/* ============================================================
   Cüneyt Tuzcuoğlu — Profil-Styling (O₂-Blau-Theme)
   Original aus visiCueneyt.html extrahiert.
   ============================================================ */

/* ── O2 COLOR PALETTE ── */
:root {
  --o2:       #006BE6;
  --o2-dark:  #003C78;
  --o2-dim:   rgba(0,107,230,0.18);
  --o2-border:rgba(0,107,230,0.22);
  --o2-glow:  rgba(0,107,230,0.38);
  --o2-soft:  rgba(0,107,230,0.08);
  --o2-text:  #b8d8ff;
}

/* Social media active glow */
/* O₂-Theme — nur die FachTap-Feature-Buttons (Termin, Zertifikate, Galerie)
   in O₂-Blau statt Gold. Alle anderen Buttons bleiben neutral. */
.social-media a#terminBtn,
.social-media a#zertifikateBtn,
.social-media a#galleryBtn {
  color: var(--o2) !important;
  border-color: var(--o2) !important;
  background-color: rgba(0, 15, 40, 0.78) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4), 0 0 0 1px var(--o2-soft) !important;
}
.social-media a#terminBtn:hover,
.social-media a#zertifikateBtn:hover,
.social-media a#galleryBtn:hover {
  background-color: var(--o2-dim) !important;
  box-shadow: 0 4px 18px var(--o2-glow), 0 0 0 1px var(--o2-border) !important;
}
.social-media a#terminBtn:active,
.social-media a#zertifikateBtn:active,
.social-media a#galleryBtn:active,
.social-media a#terminBtn.active,
.social-media a#zertifikateBtn.active,
.social-media a#galleryBtn.active {
  background-color: var(--o2) !important;
  color: white !important;
}
/* Gleicher Active-Glow für alle anderen Buttons in O₂-Blau (Standard) */
.social-media a:active,
.social-media a.active { background-color: var(--o2) !important; }

/* ── HOME BUTTON ── */
/* PWA-Fix: env(safe-area-inset-*) für iPhone-Notch im Standalone-Mode */
#homeBtn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: calc(14px + env(safe-area-inset-left));
  z-index: 9999;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,20,60,0.72);
  border: 1px solid var(--o2-border);
  border-radius: 50%;
  color: var(--o2);
  font-size: 16px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: background 0.2s, transform 0.2s;
}
#homeBtn:hover { background: var(--o2-dim); transform: scale(1.08); }

/* ── EMBLEM ── */
#emblemWrapper {
  position: absolute;
  top: 18%; left: 74%;
  transform: translateX(-50%);
  width: 30%; z-index: 5;
}
#points {
  position: absolute; bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 3px;
  pointer-events: none; white-space: nowrap; z-index: 6;
}
#points span {
  background-color: goldenrod;
  color: white; padding: 1px 5px;
  border-radius: 4px; font-size: 9px; font-weight: bold;
}
@media (min-width: 601px) {
  #emblemWrapper { top: 19%; left: calc(61% - 1vh); width: 17vh; }
  #points { bottom: 25px; }
}

/* ── RATING POPUP – O2 BLUE THEME ── */
#popup {
  display: none; position: fixed; inset: 0; z-index: 1000;
  align-items: center; justify-content: center;
  padding: 20px; box-sizing: border-box;
}
#popup.show { display: flex; }
#popup::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,10,30,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.popup-card {
  position: relative; width: 100%; max-width: 360px;
  background: linear-gradient(160deg, #f0f8ff 0%, #e4f0ff 50%, #d8eaff 100%);
  border-radius: 28px; padding: 32px 28px 28px;
  /* Sanfterer Schatten */
  box-shadow: 0 20px 50px rgba(0,0,0,0.32), 0 0 0 1px var(--o2-border), inset 0 1px 0 rgba(255,255,255,0.7);
  animation: popupEnter 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
  overflow: hidden;
}
@keyframes popupEnter {
  from { opacity:0; transform:scale(0.85) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.popup-card::before {
  content: ''; position: absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--o2), #5ab0ff, var(--o2), transparent);
}
.popup-card::after {
  content: ''; position: absolute; top:-60px; right:-60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--o2-dim) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.popup-close {
  position: absolute; top:16px; right:16px;
  width:32px; height:32px; border:none;
  background: var(--o2-soft); border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color: var(--o2-dark); font-size:13px; transition:background 0.2s; z-index:2;
}
.popup-close:hover { background: var(--o2-dim); }
.popup-avatar-placeholder {
  width:64px; height:64px; border-radius:50%;
  margin: 0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--o2), var(--o2-dark));
  border: 2px solid var(--o2-border);
  box-shadow: 0 4px 14px rgba(0,107,230,0.25);
  font-family:'Cormorant Garamond',serif;
  font-size:22px; font-weight:700; color:white; letter-spacing:1px;
}
.popup-avatar {
  width:72px; height:72px;
  margin:0 auto 12px;
  border-radius:50%;
  border:2px solid var(--o2-border);
  box-shadow:0 4px 14px rgba(0,107,230,0.25);
  overflow:hidden;
  background:#e4f0ff;
}
.popup-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.popup-avatar.is-clickable {
  padding:0; border:2px solid var(--o2-border);
  cursor:zoom-in; transition:transform 0.2s, border-color 0.2s;
}
.popup-avatar.is-clickable:hover { transform:scale(1.05); border-color:var(--o2); }

/* ── LIGHTBOX ── */
.lightbox {
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:30px 20px;
}
.lightbox[hidden] { display:none !important; }
.lightbox__backdrop {
  position:absolute; inset:0;
  background:rgba(0,5,15,0.92);
  cursor:zoom-out;
  opacity:0; transition:opacity 0.25s;
}
.lightbox.is-open .lightbox__backdrop { opacity:1; }
.lightbox__img {
  position:relative; z-index:1;
  max-width:100%; max-height:100%;
  border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.6);
  transform:scale(0.92); opacity:0;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
}
.lightbox.is-open .lightbox__img { transform:scale(1); opacity:1; }
.lightbox__close, .lightbox__nav {
  position:absolute; z-index:2;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.2);
  color:white; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(8px);
}
.lightbox__close { top:20px; right:20px; width:40px; height:40px; border-radius:50%; }
.lightbox__close svg { width:14px; height:14px; }
.lightbox__nav {
  top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  font-size:24px; line-height:1;
}
.lightbox__nav--prev { left:20px; }
.lightbox__nav--next { right:20px; }
.lightbox__close:hover, .lightbox__nav:hover { background:rgba(255,255,255,0.2); }
.lightbox__caption {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.7); color:white;
  padding:8px 16px; border-radius:8px;
  font-size:13px; max-width:80%; text-align:center;
  backdrop-filter:blur(8px);
}

/* ── GALERIE-POPUP ── */
.gallery-popup {
  position:fixed; inset:0; z-index:1050;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.gallery-popup[hidden] { display:none !important; }
.gallery-popup__backdrop {
  position:absolute; inset:0;
  background:rgba(0,10,30,0.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; opacity:0; transition:opacity 0.25s;
}
.gallery-popup.is-open .gallery-popup__backdrop { opacity:1; }
.gallery-popup__card {
  position:relative; z-index:1;
  width:100%; max-width:420px; max-height:80vh;
  background:linear-gradient(160deg, #001a3a 0%, #000c1f 100%);
  border:1px solid var(--o2-border);
  border-radius:18px;
  padding:14px;
  display:flex; flex-direction:column;
  transform:scale(0.92) translateY(20px); opacity:0;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
}
.gallery-popup.is-open .gallery-popup__card { transform:scale(1) translateY(0); opacity:1; }
.gallery-popup__head {
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 8px 10px;
  font-family:'DM Sans',sans-serif;
  font-size:13px; font-weight:600;
  color:var(--o2-text);
}
.gallery-popup__close {
  border:none; background:var(--o2-soft);
  color:var(--o2); width:28px; height:28px;
  border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.gallery-popup__close svg { width:11px; height:11px; }
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  overflow-y:auto;
}
.gallery-item {
  border:0; padding:0;
  aspect-ratio:1 / 1;
  overflow:hidden; cursor:zoom-in;
  border-radius:8px; background:var(--o2-soft);
  transition:transform 0.2s;
}
.gallery-item:hover { transform:scale(0.97); }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.popup-name {
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:17px; font-weight:600; color:#001a3a; margin-bottom:2px;
}
.popup-subtitle {
  text-align:center; font-size:12px; color:var(--o2-dark);
  margin-bottom:18px; font-family:'DM Sans',sans-serif; font-weight:300;
}
.popup-divider {
  height:1px;
  background: linear-gradient(90deg, transparent, var(--o2-border), transparent);
  margin-bottom:18px;
}
.popup-question {
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:20px; font-weight:600; color:#001a3a;
  margin-bottom:16px; line-height:1.3;
}
.stars-row { display:flex; justify-content:center; gap:8px; margin-bottom:8px; }
.star {
  font-size:30px; cursor:pointer;
  color: rgba(0,107,230,0.2);
  transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), color 0.15s, filter 0.15s;
  display:inline-block; line-height:1;
}
.star svg { display:block; width:1em; height:1em; }
.star.hovered svg, .star.selected svg { filter: drop-shadow(0 0 8px var(--o2-glow)); }
.popup-close svg { width:13px; height:13px; }
.star.hovered, .star.selected { color: var(--o2); text-shadow: 0 0 8px var(--o2-glow); }
.star.hovered  { transform:scale(1.25); }
.star.selected { transform:scale(1.15); }
@keyframes starBurst {
  0%{transform:scale(1);} 40%{transform:scale(1.45);}
  70%{transform:scale(0.95);} 100%{transform:scale(1.15);}
}
.star.burst { animation: starBurst 0.35s cubic-bezier(0.34,1.56,0.64,1); }
#selectedRating {
  text-align:center; font-family:'Cormorant Garamond',serif;
  font-size:14px; color:var(--o2-dark); margin-bottom:10px;
  min-height:20px; font-style:italic;
}
#dynamicQuestion {
  text-align:center; font-size:12px; color:var(--o2-dark);
  background: var(--o2-soft); border-radius:8px;
  padding:7px 12px; margin-bottom:12px;
  font-family:'DM Sans',sans-serif; font-weight:500;
  display:none; animation:fadeSlide 0.3s ease;
}
@keyframes fadeSlide {
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:translateY(0);}
}
#emoji {
  text-align:center; font-size:26px; display:none;
  margin-bottom:8px;
  animation:emojiBounce 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes emojiBounce {
  0%{transform:scale(0);} 60%{transform:scale(1.3);} 100%{transform:scale(1);}
}
#comment {
  width:100%; padding:11px 14px;
  background: rgba(255,255,255,0.75);
  border: 1.5px solid var(--o2-border);
  border-radius:14px; color:#001a3a;
  font-size:13px; font-family:'DM Sans',sans-serif;
  resize:none; min-height:68px; outline:none;
  transition:border-color 0.2s, box-shadow 0.2s;
  box-sizing:border-box; margin-bottom:14px;
}
#comment:focus { border-color:var(--o2); box-shadow: 0 0 0 3px var(--o2-dim); }
#comment::placeholder { color:rgba(0,40,100,0.35); }
#submitRating {
  width:100%; padding:13px 20px;
  background: linear-gradient(135deg, var(--o2) 0%, var(--o2-dark) 50%, var(--o2) 100%);
  background-size:200% 200%;
  color:white; border:none; border-radius:14px; cursor:pointer;
  font-size:14px; font-family:'DM Sans',sans-serif; font-weight:500;
  letter-spacing:0.4px;
  transition:box-shadow 0.2s, transform 0.1s, background-position 0.4s;
  box-shadow: 0 6px 24px var(--o2-glow);
}
#submitRating:hover { box-shadow: 0 8px 32px var(--o2-glow); background-position:right center; transform:translateY(-1px); }
#submitRating:active { transform:translateY(0); }

/* ── „Meine Bewertung"-Link (login-gated, NICHT öffentlich) ── */
.my-review-link {
  display:flex; align-items:center; gap:8px;
  margin-top:14px;
  padding:9px 14px;
  background:var(--o2-soft);
  border:1px solid var(--o2-border);
  border-radius:10px;
  font-size:12px; color:var(--o2-dark);
  text-decoration:none;
  font-family:'DM Sans',sans-serif;
  transition:background 0.2s, border-color 0.2s;
}
.my-review-link:hover {
  background:var(--o2-dim);
  border-color:rgba(0,107,230,0.4);
}
.my-review-link__icon { font-size:12px; }
.my-review-link span:nth-child(2) { flex:1; }
.my-review-link__arrow { font-size:16px; opacity:0.5; }

/* ── REVIEWS-LISTE ─────────────────────────────────────── */
.reviews-list {
  margin-top:18px; padding-top:14px;
  border-top:1px solid var(--o2-border);
}
.reviews-list__header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--o2-dark);
  font-family:'DM Sans',sans-serif;
  margin-bottom:10px; letter-spacing:0.2px;
}
.reviews-list__avg { font-weight:600; color:var(--o2); }
.reviews-list__items { list-style:none; padding:0; margin:0; max-height:220px; overflow-y:auto; }
.reviews-list__item {
  padding:9px 0; border-bottom:1px solid var(--o2-soft);
  font-size:12px; color:#001a3a;
}
.reviews-list__item:last-child { border-bottom:0; }
.reviews-list__top {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.reviews-list__name { font-weight:600; font-size:11px; }
.reviews-list__stars { color:var(--o2); font-size:11px; letter-spacing:1px; }
.reviews-list__when { font-size:10px; color:var(--o2-dark); opacity:0.7; margin-left:8px; }
.reviews-list__text { font-style:italic; line-height:1.4; color:rgba(0,26,58,0.85); }

/* Loading-Skeleton */
.reviews-skel .skel-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--o2-soft); }
.reviews-skel .skel-bar {
  height:12px; border-radius:4px;
  background:linear-gradient(90deg, var(--o2-soft) 0%, var(--o2-dim) 50%, var(--o2-soft) 100%);
  background-size:200% 100%;
  animation: skelShine 1.4s ease-in-out infinite;
}
@keyframes skelShine { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.w15 { width:15%; } .w20 { width:20%; } .w25 { width:25%; }
.w40 { width:40%; } .w50 { width:50%; } .w60 { width:60%; }

/* Empty State */
.reviews-empty {
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 12px;
  font-size:12px; color:var(--o2-dark); font-style:italic;
  background:var(--o2-soft);
  border-radius:10px;
}
.reviews-empty__icon { font-size:16px; }
#successOverlay {
  display:none; position:absolute; inset:0;
  background: linear-gradient(160deg, #f0f8ff, #e4f0ff);
  border-radius:28px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:10px; text-align:center; padding:32px;
  animation:popupEnter 0.4s cubic-bezier(0.34,1.56,0.64,1);
  z-index:3;
}
#successOverlay.show { display:flex; }
.success-trophy { font-size:52px; animation:trophyPop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both; }
@keyframes trophyPop {
  0%{transform:scale(0) rotate(-15deg);} 70%{transform:scale(1.2) rotate(5deg);} 100%{transform:scale(1) rotate(0);}
}
.success-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700; color:#001a3a; }
.success-sub   { font-size:13px; color:var(--o2-dark); font-family:'DM Sans',sans-serif; font-weight:300; }

/* ── TOP-RIGHT CONTROLS ── */
#topRightControls {
  position:fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index:9999;
  display:flex; align-items:center; gap:8px;
}
#authButtonContainer { position:static; }
#authButton i, #authButton svg { color:var(--o2) !important; font-size:16px !important; }
#authButton svg { width: 16px; height: 16px; }
#authButton {
  min-width:40px !important; height:40px !important;
  border-radius:999px !important;
  background:rgba(0,20,60,0.72) !important;
  border:1px solid var(--o2-border) !important;
  color:var(--o2) !important; font-size:14px !important; font-weight:600 !important;
  cursor:pointer !important; backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
  box-shadow:0 4px 14px rgba(0,0,0,0.35) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 14px !important; transition:background 0.2s, transform 0.2s !important;
  white-space:nowrap !important;
}
#authButton:hover { background:var(--o2-dim) !important; transform:scale(1.05) !important; }
#shareBtn {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:rgba(0,20,60,0.72); border:1px solid var(--o2-border);
  color:var(--o2); font-size:15px; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, transform 0.2s;
}
#shareBtn:hover { background:var(--o2-dim); transform:scale(1.08); }

/* ── QR-Button ── */
#qrBtn {
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:rgba(0,20,60,0.72);
  border:1px solid var(--o2-border);
  color:var(--o2); font-size:17px; cursor:pointer;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, transform 0.2s;
}
#qrBtn:hover { background:var(--o2-dim); transform:scale(1.08); }

/* ── QR-Popup ── */
.qr-popup {
  position:fixed; inset:0; z-index:1100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
/* WICHTIG: hidden muss display:flex überschreiben — sonst blockt der
   unsichtbare Backdrop alle Klicks auf der Karte. */
.qr-popup[hidden] { display:none !important; }

/* ── PWA Standalone-Mode (App vom Homescreen / Dock) ── */
@media (display-mode: standalone) {
  html, body { min-height:100vh; min-height:100svh; }
  #bg { min-height:100vh; min-height:100svh; }

  @media (min-width: 768px) {
    #homeBtn          { top:calc(20px + env(safe-area-inset-top)); }
    #topRightControls { top:calc(20px + env(safe-area-inset-top)); }
    #shareToast       { top:calc(68px + env(safe-area-inset-top)); }
  }
}

/* Window Controls Overlay (Chrome Desktop PWA) */
@supports (top: env(titlebar-area-height)) {
  #homeBtn          { top:calc(14px + env(titlebar-area-height, 0px)); }
  #topRightControls { top:calc(14px + env(titlebar-area-height, 0px)); }
  #shareToast       { top:calc(62px + env(titlebar-area-height, 0px)); }
}
.qr-popup__backdrop {
  position:absolute; inset:0;
  background:rgba(0,10,30,0.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity 0.25s;
  cursor:pointer;
}
.qr-popup.is-open .qr-popup__backdrop { opacity:1; }
.qr-popup__card {
  position:relative; z-index:1;
  width:100%; max-width:320px;
  background:linear-gradient(160deg, #f0f8ff 0%, #e4f0ff 100%);
  border-radius:24px;
  padding:30px 24px 24px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px var(--o2-border);
  transform:scale(0.9) translateY(20px); opacity:0;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s;
}
.qr-popup.is-open .qr-popup__card { transform:scale(1) translateY(0); opacity:1; }
.qr-popup__close {
  position:absolute; top:12px; right:12px;
  width:30px; height:30px; border:none;
  background:var(--o2-soft); border-radius:50%;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--o2-dark);
}
.qr-popup__close:hover { background:var(--o2-dim); }
.qr-popup__close svg { width:12px; height:12px; }
.qr-popup__eyebrow {
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--o2-dark); margin-bottom:4px;
}
.qr-popup__name {
  font-family:'Cormorant Garamond',serif;
  font-size:20px; font-weight:700; color:#001a3a;
  margin-bottom:18px;
}
.qr-popup__img {
  display:inline-block;
  padding:10px;
  background:white;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin-bottom:14px;
}
.qr-popup__img img { display:block; width:100%; max-width:240px; height:auto; }
.qr-popup__url {
  font-family:'SF Mono',Menlo,monospace;
  font-size:10px; color:var(--o2-dark);
  word-break:break-all; margin-bottom:12px;
  padding:6px 10px; background:var(--o2-soft); border-radius:6px;
}
.qr-popup__hint {
  font-size:12px; color:var(--o2-dark); line-height:1.5;
  font-family:'DM Sans',sans-serif;
}
#shareToast {
  position:fixed;
  top: calc(62px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  z-index:9999;
  background:rgba(0,15,40,0.88); border:1px solid var(--o2-border);
  color:#e0f0ff; font-size:12px; font-family:'DM Sans',sans-serif;
  padding:7px 14px; border-radius:10px; backdrop-filter:blur(10px);
  opacity:0; transform:translateY(-6px);
  transition:opacity 0.2s, transform 0.2s;
  pointer-events:none; white-space:nowrap;
}
#shareToast.show { opacity:1; transform:translateY(0); }

/* ── FORTSCHRITTSBALKEN ── */
#emblemProgress {
  position:fixed; bottom:calc(2.8rem + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  width:min(260px,72vw); z-index:20;
  background:rgba(0,15,40,0.78);
  border:1px solid var(--o2-border); border-radius:14px;
  padding:10px 14px 9px; backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,0.45);
}
#epNameRow { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#nameLabel {
  font-family:'Cormorant Garamond','Georgia',serif;
  font-size:13px; font-weight:600; color:var(--o2-text);
  letter-spacing:0.2px; line-height:1;
}
#leistungenBtn {
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  gap:3px; min-height:30px; padding:4px 12px;
  background:var(--o2-soft); border:1px solid var(--o2-border);
  border-radius:999px; color:var(--o2);
  font-family:'DM Sans',sans-serif; font-size:10.5px; font-weight:600;
  cursor:pointer; transition:all 0.2s; letter-spacing:0.2px;
  -webkit-tap-highlight-color:var(--o2-dim);
}
#leistungenBtn:hover { background:var(--o2-dim); border-color:rgba(0,107,230,0.45); }
#leistungenBtn:active { background:rgba(0,107,230,0.22); transform:scale(0.96); }
#leistungenBtn .lp-arrow { font-size:12px; font-weight:400; transition:transform 0.2s; }
#leistungenBtn:hover .lp-arrow { transform:translateX(2px); }
#emblemProgressTrack {
  width:100%; height:5px; background:rgba(255,255,255,0.10);
  border-radius:999px; overflow:hidden;
}
#emblemProgressFill {
  height:100%; width:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--o2-dark), var(--o2), #5ab0ff);
  box-shadow:0 0 8px var(--o2-glow);
  transform:scaleX(0); transform-origin:left center;
  will-change:transform; transition:transform 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
#emblemProgressSub {
  margin-top:6px; text-align:center; font-size:9px;
  color:rgba(255,255,255,0.38); font-family:'DM Sans',sans-serif;
}
#emblemProgress.is-max #emblemProgressTrack { display:none; }
#emblemProgress.is-max #emblemProgressSub { color:var(--o2); font-weight:600; font-size:10px; }

/* ── ACHIEVEMENTS ───────────────────────────────────── */
.achievements {
  display:flex; flex-wrap:wrap; gap:4px;
  margin-top:8px; padding-top:6px;
  border-top:1px solid var(--o2-soft);
  justify-content:center;
}
.achievement {
  display:inline-flex; align-items:center; gap:3px;
  padding:3px 7px;
  background:var(--o2-soft);
  border:1px solid var(--o2-border);
  border-radius:999px;
  font-size:9px;
  font-family:'DM Sans',sans-serif;
  color:rgba(184,216,255,0.85);
}
.achievement__icon { font-size:10px; }
.achievement__label { letter-spacing:0.2px; }
@media (min-width:601px) {
  #emblemProgress { width:min(280px,72vw); padding:12px 16px 10px; border-radius:16px; }
  #nameLabel { font-size:15px; }
  #leistungenBtn { font-size:11px; padding:5px 14px; }
  #emblemProgressSub { font-size:10px; }
}

/* ── LEISTUNGEN POPUP OVERRIDES ── */
.lp-card { border-color:var(--o2-border) !important; box-shadow:0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px var(--o2-soft) !important; }
.lp-card::before { background:linear-gradient(90deg, transparent, var(--o2), #5ab0ff, var(--o2), transparent) !important; }
.lp-title { color:var(--o2-text) !important; }
.lp-subtitle { color:rgba(180,220,255,0.6) !important; }
.lp-item { border-color:var(--o2-border) !important; }
.lp-item:hover { border-color:rgba(0,107,230,0.4) !important; background:var(--o2-soft) !important; }
.lp-item-title { color:var(--o2-text) !important; }
.lp-close { background:var(--o2-soft) !important; border-color:var(--o2-border) !important; color:var(--o2) !important; }
.lp-close:hover { background:var(--o2-dim) !important; }
.lp-cta-btn { background:linear-gradient(135deg, var(--o2), var(--o2-dark)) !important; box-shadow:0 8px 24px var(--o2-glow) !important; }
.lp-cta-btn:hover { box-shadow:0 12px 32px var(--o2-glow) !important; }
.lp-hours { margin:18px 0 0; padding:14px 16px; border:1px solid var(--o2-border); border-radius:10px; background:var(--o2-soft); }
.lp-hours-title { font-size:12px; font-weight:600; color:var(--o2-text); margin-bottom:10px; letter-spacing:0.04em; }
.lp-hours-grid { display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px; color:rgba(200,230,255,0.85); }
.lp-address { display:flex; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--o2-border); font-size:13px; color:rgba(200,230,255,0.85); }

/* ── TERMIN POPUP OVERRIDES ── */
.tp-close, .tp-btn-ghost { border-color:var(--o2-border) !important; color:var(--o2) !important; }
.tp-close:hover, .tp-btn-ghost:hover { background:var(--o2-dim) !important; border-color:rgba(0,107,230,0.4) !important; }
.tp-slot.free { border-color:var(--o2-border) !important; }
.tp-slot.free:hover { background:var(--o2-soft) !important; border-color:var(--o2) !important; }
.tp-slot.selected { background:var(--o2-dim) !important; border-color:var(--o2) !important; }
.tp-btn-primary { background:linear-gradient(135deg, var(--o2), var(--o2-dark)) !important; box-shadow:0 6px 20px var(--o2-glow) !important; }
.day-btn.active, .day-btn:hover { border-color:var(--o2) !important; color:var(--o2) !important; }

/* ── FOOTER — horizontal expandierende Pille ── */
#visiFooter {
  position:fixed;
  bottom: calc(8px + env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  z-index:40;   /* über #emblemProgress (z=20) */
}
.vf-details {
  display:flex; align-items:center;
  background:rgba(0,10,25,0.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--o2-border);
  border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
}
.vf-summary {
  list-style:none; cursor:pointer;
  padding:6px 14px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Cormorant Garamond','Georgia',serif;
  font-size:.8rem; font-weight:700;
  color:rgba(184,216,255,0.7);
  transition:color .2s; flex-shrink:0;
}
.vf-summary:hover { color:var(--o2); }
.vf-summary::-webkit-details-marker { display:none; }
.vf-name {
  background:linear-gradient(135deg, #e0f0ff, var(--o2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  letter-spacing:.5px;
}
.vf-chev {
  font-size:14px; opacity:0.5;
  transition:transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display:inline-block; line-height:1;
}
.vf-details[open] .vf-chev { transform:rotate(90deg); }
.vf-links {
  display:flex; align-items:center; gap:14px;
  padding:6px 14px;
  border-left:1px solid var(--o2-border);
  white-space:nowrap;
}
.vf-links a {
  font-size:.58rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.55); transition:color .2s;
}
.vf-links a:hover { color:var(--o2); }

/* ── Mobile: Links als kleines Sheet ÜBER der Pille ── */
@media (max-width: 600px) {
  .vf-details { position: relative; }
  .vf-links {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    flex-direction: column;
    gap: 0;
    padding: 8px 4px;
    background: rgba(0,10,25,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--o2-border);
    border-radius: 14px;
    min-width: 180px;
    white-space: normal;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .vf-details[open] .vf-links {
    opacity: 1; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .vf-links a {
    display: block; padding: 10px 16px;
    font-size: .68rem; letter-spacing: .08em;
    color: rgba(245,250,255,0.85);
    border-radius: 8px;
    text-align: center;
  }
  .vf-links a:hover, .vf-links a:active {
    background: var(--o2-dim);
    color: var(--o2);
  }
}