/* ==========================================================================
   Mai Haven Spa – Stylesheet
   Design-System mit 12 wählbaren Themes (6 hell / 6 dunkel) +
   abschaltbaren Bewegungseffekten. Kein separater Hell/Dunkel-Schalter –
   das übernimmt die Design-Auswahl.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

/* ---------- Theme tokens ---------------------------------------------- */
/* Jedes Theme definiert dieselben Variablen: bg, bgAlt, card, border,
   text, textMuted, primary, primary contrast, secondary, shadow-tint    */

:root,
[data-theme="lotusgarten"]{
  --bg:#faf7f2; --bg-alt:#f2ede3; --card:rgba(138,154,91,.07); --card-solid:#ffffff;
  --border:rgba(138,154,91,.22); --text:#2b2b26; --text-muted:#5c5b4f;
  --primary:#8a9a5b; --primary-ink:#ffffff; --secondary:#c9a15a;
  --shadow-tint:0,0,0; --accent-glow:138,154,91;
  color-scheme: light;
}
[data-theme="mitternachtsmeditation"]{
  --bg:#12140f; --bg-alt:#191c14; --card:rgba(255,255,255,.045); --card-solid:#1c1f17;
  --border:rgba(201,161,90,.18); --text:#f2efe6; --text-muted:#b7b6a8;
  --primary:#a3b471; --primary-ink:#12140f; --secondary:#d8b26b;
  --shadow-tint:0,0,0; --accent-glow:163,180,113;
  color-scheme: dark;
}
[data-theme="jaderuhe"]{
  --bg:#f3faf8; --bg-alt:#e7f4f0; --card:rgba(47,158,143,.08); --card-solid:#ffffff;
  --border:rgba(47,158,143,.22); --text:#153230; --text-muted:#43615e;
  --primary:#2f9e8f; --primary-ink:#ffffff; --secondary:#c9a15a;
  --shadow-tint:0,0,0; --accent-glow:47,158,143;
  color-scheme: light;
}
[data-theme="tiefseestille"]{
  --bg:#0a1615; --bg-alt:#0f1e1c; --card:rgba(255,255,255,.045); --card-solid:#101f1d;
  --border:rgba(53,179,163,.2); --text:#e7f5f2; --text-muted:#a9c2be;
  --primary:#49bfae; --primary-ink:#06120f; --secondary:#d8b26b;
  --shadow-tint:0,0,0; --accent-glow:73,191,174;
  color-scheme: dark;
}
[data-theme="sandelholz"]{
  --bg:#faf3ea; --bg-alt:#f3e7d6; --card:rgba(193,122,77,.08); --card-solid:#fffdf9;
  --border:rgba(193,122,77,.22); --text:#3a2a1e; --text-muted:#6b5544;
  --primary:#c17a4d; --primary-ink:#fff; --secondary:#8a9a5b;
  --shadow-tint:0,0,0; --accent-glow:193,122,77;
  color-scheme: light;
}
[data-theme="abenddaemmerung"]{
  --bg:#181119; --bg-alt:#211823; --card:rgba(255,255,255,.045); --card-solid:#221a26;
  --border:rgba(201,161,90,.2); --text:#f5ecec; --text-muted:#c3aeb5;
  --primary:#c9a15a; --primary-ink:#181119; --secondary:#b46b6b;
  --shadow-tint:0,0,0; --accent-glow:201,161,90;
  color-scheme: dark;
}
[data-theme="lavendelnebel"]{
  --bg:#f8f5fb; --bg-alt:#efe9f5; --card:rgba(141,122,181,.08); --card-solid:#ffffff;
  --border:rgba(141,122,181,.22); --text:#2e2a38; --text-muted:#5a5468;
  --primary:#8d7ab5; --primary-ink:#ffffff; --secondary:#c9a15a;
  --shadow-tint:0,0,0; --accent-glow:141,122,181;
  color-scheme: light;
}
[data-theme="mondsteinnacht"]{
  --bg:#100e1a; --bg-alt:#171325; --card:rgba(255,255,255,.05); --card-solid:#181430;
  --border:rgba(156,143,209,.22); --text:#efeaf9; --text-muted:#bcb2d6;
  --primary:#a698d8; --primary-ink:#100e1a; --secondary:#d8b26b;
  --shadow-tint:0,0,0; --accent-glow:166,152,216;
  color-scheme: dark;
}
[data-theme="kirschbluete"]{
  --bg:#fdf5f4; --bg-alt:#f9e9e7; --card:rgba(201,138,138,.09); --card-solid:#ffffff;
  --border:rgba(201,138,138,.24); --text:#3a2b2b; --text-muted:#6b5250;
  --primary:#c98a8a; --primary-ink:#ffffff; --secondary:#8a9a5b;
  --shadow-tint:0,0,0; --accent-glow:201,138,138;
  color-scheme: light;
}
[data-theme="onyxruhe"]{
  --bg:#131313; --bg-alt:#1a1a1a; --card:rgba(255,255,255,.045); --card-solid:#1b1b1b;
  --border:rgba(183,161,106,.2); --text:#efefe9; --text-muted:#b7b4a8;
  --primary:#b7a16a; --primary-ink:#131313; --secondary:#7f9169;
  --shadow-tint:0,0,0; --accent-glow:183,161,106;
  color-scheme: dark;
}
[data-theme="bambuswald"]{
  --bg:#f5faf3; --bg-alt:#e9f3e4; --card:rgba(95,138,82,.08); --card-solid:#ffffff;
  --border:rgba(95,138,82,.22); --text:#243018; --text-muted:#4f5f42;
  --primary:#5f8a52; --primary-ink:#ffffff; --secondary:#c9a15a;
  --shadow-tint:0,0,0; --accent-glow:95,138,82;
  color-scheme: light;
}
[data-theme="sternenhimmel"]{
  --bg:#0b0f1c; --bg-alt:#111729; --card:rgba(255,255,255,.045); --card-solid:#131a2f;
  --border:rgba(127,168,201,.22); --text:#e9eef8; --text-muted:#aab6cf;
  --primary:#8fb4d6; --primary-ink:#0b0f1c; --secondary:#d8b26b;
  --shadow-tint:0,0,0; --accent-glow:143,180,214;
  color-scheme: dark;
}

/* ---------- Reset & base ------------------------------------------------ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Work Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .5s ease,color .5s ease;
  padding-bottom:100px;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,.brand,.price-tag{ font-family:'Fraunces',serif; }
a{color:inherit;}
img{max-width:100%;display:block;}
button{font-family:inherit;}
::selection{ background:rgba(var(--accent-glow),.35); }

.wrap{ max-width:1120px; margin:0 auto; padding:0 20px; position:relative; }

/* ---------- Entry gate (Willkommens-Hinweis) ----------------------------- */
#entryGate{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:22px; overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(var(--accent-glow),.25), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(var(--accent-glow),.18), transparent 55%),
    var(--bg);
  transition:opacity .5s ease, visibility .5s ease;
}
#entryGate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
/* Willkommens-Effekt: sanft fallende Blütenblätter & Glitzer über dem Popup */
.gate-petals{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.gate-petals span{
  position:absolute; top:-10%; font-size:1.6rem; opacity:0;
  animation:gatePetalFall 5.5s ease-in infinite;
}
.gate-petals span:nth-child(1){ left:6%;  animation-delay:.2s;  font-size:1.3rem; }
.gate-petals span:nth-child(2){ left:18%; animation-delay:1.6s; font-size:1.8rem; }
.gate-petals span:nth-child(3){ left:30%; animation-delay:.8s;  font-size:1.1rem; }
.gate-petals span:nth-child(4){ left:48%; animation-delay:2.4s; font-size:1.5rem; }
.gate-petals span:nth-child(5){ left:62%; animation-delay:.4s;  font-size:1.2rem; }
.gate-petals span:nth-child(6){ left:76%; animation-delay:1.9s; font-size:1.7rem; }
.gate-petals span:nth-child(7){ left:88%; animation-delay:1.1s; font-size:1.1rem; }
.gate-petals span:nth-child(8){ left:95%; animation-delay:2.8s; font-size:1.4rem; }
@keyframes gatePetalFall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.9; }
  50%{ transform:translateY(50vh) translateX(18px) rotate(180deg); }
  90%{ opacity:.7; }
  100%{ transform:translateY(105vh) translateX(-14px) rotate(340deg); opacity:0; }
}
.gate-card{
  position:relative; z-index:1;
  max-width:480px; width:100%; background:var(--card-solid);
  border:1px solid var(--border); border-radius:24px; padding:36px 30px;
  text-align:center; box-shadow:0 25px 70px rgba(var(--shadow-tint),.25);
  animation:gateIn .6s ease;
}
@keyframes gateIn{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;} }
.gate-icon{ font-size:2.8rem; margin-bottom:10px; display:inline-block; animation:gateIconPop .8s ease .1s both; }
@keyframes gateIconPop{ 0%{ transform:scale(0) rotate(-15deg); opacity:0; } 60%{ transform:scale(1.15) rotate(8deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }
.gate-card h2{ margin:0 0 12px; font-size:1.4rem; }
.gate-card p{ font-size:.92rem; line-height:1.6; color:var(--text-muted); margin:0 0 10px; }
.gate-card .gate-small{ font-size:.78rem; opacity:.75; margin-top:14px; }
.gate-btn{
  margin-top:18px; border:none; border-radius:14px; padding:14px 26px;
  background:var(--primary); color:var(--primary-ink); font-weight:600; cursor:pointer;
  font-size:.95rem; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 10px 30px rgba(var(--accent-glow),.35);
}
.gate-btn:hover{ transform:translateY(-2px); }

/* ---------- Header ------------------------------------------------------- */
/* Wrapper hält Header + Bonus-Banner zusammen oben fixiert (sticky), damit
   eine aktive Bonus-Aktion beim Scrollen sichtbar bleibt statt wegzuscrollen. */
.sticky-top-wrap{ position:sticky; top:0; z-index:60; background:var(--bg); }
header.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--border);
}
.sticky-top-wrap .bonus-banner-container{ padding-bottom:10px; margin-top:0; }
.sticky-top-wrap .bonus-banner-container:not(:empty){ padding-top:2px; }
.brand-block{ display:flex; align-items:center; gap:14px; cursor:pointer; }
.brand-block img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.brand-name{ font-size:1.4rem; font-weight:600; letter-spacing:.3px; }
.brand-sub{ font-size:.78rem; opacity:.75; margin-top:2px; }

select#langSelect{
  border:1px solid var(--border); background:transparent; color:inherit;
  border-radius:10px; padding:4px 6px; font-size:.8rem; cursor:pointer; max-width:54px;
}
/* Reine Icon-Buttons ohne Text-Label, in der Bottom-Dock-Leiste unter Anrufen/WhatsApp/E-Mail/Route */
.icon-btn-sm{
  border:1px solid var(--border); background:var(--card); color:inherit;
  border-radius:50%; width:30px; height:30px; font-size:.88rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; transition:transform .15s ease, background .2s ease;
}
.icon-btn-sm:hover{ transform:translateY(-1px); background:rgba(var(--accent-glow),.14); }

/* ---------- Hero + decorative photos -------------------------------------- */
.hero{ text-align:center; padding:56px 20px 32px; position:relative; }
.hero .eyebrow{
  display:inline-block; font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  color:var(--primary); font-weight:600; margin-bottom:10px;
}
.hero h1{ font-size:clamp(2rem,5vw,2.6rem); margin:0 0 10px; }
.hero p.addr{ opacity:.85; font-size:.95rem; margin:4px 0; color:var(--text-muted); }
.leaf-divider{ width:120px; height:20px; margin:22px auto 0; opacity:.6; }

.hero-deco{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:visible; }
.deco-photo{
  position:absolute; width:118px; height:150px; border-radius:14px; overflow:hidden;
  border:6px solid var(--card-solid); box-shadow:0 16px 34px rgba(var(--shadow-tint),.22);
  opacity:.92;
}
.deco-photo img{ width:100%; height:100%; object-fit:cover; }
.deco-photo.d1{ top:2%;  left:2%;  transform:rotate(-9deg); }
.deco-photo.d2{ top:8%;  right:3%; transform:rotate(7deg); }
.deco-photo.d3{ bottom:-6%; left:8%; transform:rotate(6deg); width:100px; height:128px; }
.deco-photo.d4{ bottom:-10%; right:9%; transform:rotate(-6deg); width:96px; height:122px; }
@media (max-width: 900px){
  .deco-photo{ display:none; }
}

.section-title{ text-align:center; font-size:1.8rem; margin:46px 0 6px; }
.section-sub{ text-align:center; font-size:.9rem; color:var(--text-muted); max-width:560px; margin:0 auto 6px; }

/* ---------- Design & Effects panels --------------------------------------- */
.panel-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.42);
  display:none; align-items:flex-end; justify-content:center; padding:0;
}
.panel-overlay.open{ display:flex; }
@media (min-width:720px){ .panel-overlay{ align-items:center; } }

.panel{
  background:var(--card-solid); color:var(--text); width:100%; max-width:640px;
  border-radius:22px 22px 0 0; padding:22px 22px 28px; max-height:86vh; overflow-y:auto;
  box-shadow:0 -20px 60px rgba(var(--shadow-tint),.3);
  animation:panelUp .35s ease;
}
@media (min-width:720px){ .panel{ border-radius:22px; } }
@keyframes panelUp{ from{ transform:translateY(24px); opacity:0;} to{ transform:none; opacity:1;} }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.panel-head h2{ margin:0; font-size:1.2rem; }
.panel-close{ background:none; border:none; font-size:1.3rem; cursor:pointer; color:inherit; }
.panel p.panel-hint{ font-size:.85rem; color:var(--text-muted); margin:2px 0 16px; }

.theme-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.theme-card{
  border:2px solid var(--border); border-radius:16px; padding:12px; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; background:var(--bg-alt); transition:border-color .2s ease, transform .15s ease;
  text-align:left;
}
.theme-card:hover{ transform:translateY(-2px); }
.theme-card.active{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--accent-glow),.25); }
.theme-swatch{ display:flex; gap:5px; height:30px; border-radius:8px; overflow:hidden; }
.theme-swatch span{ flex:1; }
.theme-card .tname{ font-size:.82rem; font-weight:600; }
.theme-card .tmode{ font-size:.7rem; opacity:.65; }

.fx-list{ display:flex; flex-direction:column; gap:10px; }
.fx-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--border); border-radius:14px; padding:12px 14px; background:var(--bg-alt);
}
.fx-row .fx-label{ font-size:.9rem; font-weight:600; }
.fx-row .fx-desc{ font-size:.76rem; color:var(--text-muted); margin-top:2px; }
.fx-toggle{ position:relative; width:46px; height:26px; flex:0 0 auto; }
.fx-toggle input{ opacity:0; width:0; height:0; }
.fx-toggle .fx-slider{ position:absolute; inset:0; background:rgba(var(--accent-glow),.3); border-radius:30px; cursor:pointer; transition:.25s; }
.fx-toggle .fx-slider:before{ content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.fx-toggle input:checked + .fx-slider{ background:var(--primary); }
.fx-toggle input:checked + .fx-slider:before{ transform:translateX(20px); }

.panel-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.chip-btn{
  border:1px solid var(--border); background:transparent; color:inherit; border-radius:20px;
  padding:9px 16px; font-size:.82rem; cursor:pointer;
}
.chip-btn:hover{ background:var(--bg-alt); }

/* ---------- Service grid (bestehende Funktion, neues Theme) ---------------- */
.grid{
  max-width:1080px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px;
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:20px; padding:22px;
  box-shadow:0 10px 30px rgba(var(--shadow-tint),.08);
  display:flex; flex-direction:column; gap:12px; transition:transform .25s ease, box-shadow .25s ease;
}
.card h3{ margin:0; font-size:1.15rem; }
.card p.desc{ font-size:.86rem; opacity:.85; margin:0; line-height:1.5; min-height:1em; color:var(--text-muted); }
.option-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:auto; }
select.option-select{
  flex:1; min-width:110px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--border); background:transparent; color:inherit; font-size:.88rem;
}
.price-tag{ font-weight:600; font-size:1.1rem; color:var(--secondary); white-space:nowrap; }
.duration-tag{ font-size:.78rem; opacity:.8; color:var(--text-muted); }
.book-btn{
  margin-top:6px; border:none; border-radius:12px; padding:12px 16px;
  background:var(--primary); color:var(--primary-ink); font-weight:600; cursor:pointer;
  font-size:.9rem; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s ease, opacity .2s ease; position:relative; overflow:hidden;
}
.book-btn:hover{ transform:translateY(-2px); opacity:.94; }

/* ---------- Fotos direkt in der Preisliste je Kategorie: Karussell ---------- */
.cat-photos-wrap{ max-width:1080px; margin:14px auto 0; padding:0 20px; }
.cat-photos{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding:2px 2px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
}
.cat-photos::-webkit-scrollbar{ height:6px; }
.cat-photos::-webkit-scrollbar-thumb{ background:var(--border); border-radius:6px; }

/* Web-Ansicht: Fotos sichtbar (Standard). Listenansicht: Fotos ausgeblendet, reine Textliste. */
body[data-gallery-view="list"] .cat-photos-wrap{ display:none; }

.gphoto{
  position:relative; border-radius:16px; overflow:hidden; cursor:pointer;
  border:1px solid var(--border); box-shadow:0 12px 26px rgba(var(--shadow-tint),.14);
  perspective:800px; flex:0 0 auto; width:150px; aspect-ratio:4/5; scroll-snap-align:start;
}
.gphoto img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .05s linear; will-change:transform, filter; }
.gphoto .gcap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 12px 10px;
  background:linear-gradient(to top, rgba(0,0,0,.62), transparent);
  color:#fff; font-size:.8rem; font-weight:600; opacity:0; transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
.gphoto:hover .gcap{ opacity:1; transform:none; }
.gphoto:hover img{ transform:scale(1.08); }
@media (max-width:600px){ .gphoto{ width:120px; } }

/* ---------- Galerie-Slideshow (wischbares Karussell) ------------------------ */
.lightbox-overlay{
  position:fixed; inset:0; z-index:400; background:rgba(0,0,0,.92);
  display:none; flex-direction:column;
}
.lightbox-overlay.open{ display:flex; }
.lb-track{
  flex:1; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.lb-track::-webkit-scrollbar{ display:none; }
.lb-slide{
  flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:50px 24px; box-sizing:border-box;
}
.lb-slide img{ max-width:100%; max-height:74vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); cursor:zoom-in; transition:max-width .25s ease, max-height .25s ease, border-radius .25s ease; }
.lb-caption{ color:#fff; font-size:.9rem; text-align:center; opacity:.9; transition:opacity .2s ease; max-width:80vw; }
.lb-counter{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.65); font-size:.78rem; transition:opacity .2s ease; }

/* Immersiv/Vollbild: Klick auf das Bild blendet Rahmen, Bildunterschrift & Zähler aus - reines, randloses Foto. */
.lightbox-overlay.immersive{ background:#000; }
.lightbox-overlay.immersive .lb-slide{ padding:0; }
.lightbox-overlay.immersive .lb-slide img{ max-width:100vw; max-height:100vh; border-radius:0; box-shadow:none; cursor:zoom-out; }
.lightbox-overlay.immersive .lb-caption,
.lightbox-overlay.immersive .lb-counter,
.lightbox-overlay.immersive .lb-play{ opacity:0; pointer-events:none; }
.lb-close{
  position:absolute; top:18px; right:18px; z-index:2; background:rgba(255,255,255,.12); color:#fff; border:none;
  border-radius:50%; width:40px; height:40px; font-size:1.1rem; cursor:pointer;
}
.lb-play{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.12); color:#fff;
  border:none; border-radius:50%; width:44px; height:44px; font-size:1rem; cursor:pointer;
}
@media (min-width:720px){ .lb-close:hover, .lb-play:hover{ background:rgba(255,255,255,.24); } }

/* ---------- Social icon footer -------------------------------------------- */
.social-strip{ display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
.social-ic{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border);
  box-shadow:0 4px 10px rgba(var(--shadow-tint),.12); transition:transform .2s ease, box-shadow .2s ease;
}
.social-ic:hover{ transform:translateY(-3px) scale(1.08); box-shadow:0 10px 20px rgba(var(--shadow-tint),.2); }
.social-ic svg{ width:18px; height:18px; }
/* Original-Markenfarben statt Theme-Farbe, damit die Icons sofort erkennbar sind */
.social-ic.ic-instagram{ background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.social-ic.ic-instagram svg{ color:#fff; }
.social-ic.ic-facebook svg{ color:#1877F2; }
.social-ic.ic-whatsapp svg{ color:#25D366; }
.social-ic.ic-maps svg{ color:#EA4335; }
.social-ic.ic-star svg{ color:#FBBC05; }
.social-ic.ic-mail svg{ color:#5B6472; }
.social-ic.ic-phone svg{ color:var(--primary); }
@media (max-width:600px){ .social-ic{ width:30px; height:30px; } .social-ic svg{ width:16px; height:16px; } }

/* ---------- Bottom-Dock: Kontakt-Leiste + reine Icon-Leiste, beide immer sichtbar --- */
.bottom-dock{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:var(--bg); border-top:1px solid var(--border); backdrop-filter:blur(8px);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.floating-footer{
  display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 10px 4px;
}
.utility-bar{ display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap; padding:0 10px 6px; }

.side-fab{
  position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:45;
  display:flex; flex-direction:column; gap:12px;
}
.side-fab button{
  width:50px; height:50px; border-radius:50%; border:1px solid var(--border); cursor:pointer;
  background:var(--card-solid); box-shadow:0 8px 22px rgba(var(--shadow-tint),.15); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.side-fab button:hover{ transform:scale(1.08); }
@media (max-width:640px){ .side-fab{ right:8px; } .side-fab button{ width:44px; height:44px; font-size:1.1rem; } }

.credit{ text-align:center; font-size:.75rem; opacity:.65; padding:22px 16px 8px; }
.credit a{ color:var(--primary); font-weight:600; text-decoration:none; }

.legal-notice{ max-width:560px; margin:0 auto; padding:0 16px 110px; text-align:center; }
.legal-toggle{
  background:none; border:none; color:inherit; opacity:.55; font-size:.72rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; padding:4px 8px;
}
.legal-toggle:hover{ opacity:.85; }
#legalToggleIcon{ transition:transform .2s ease; display:inline-block; }
.legal-notice.open #legalToggleIcon{ transform:rotate(90deg); }
.legal-notice-body{
  display:none; font-size:.72rem; opacity:.6; line-height:1.65; margin-top:8px; text-align:left;
}
.legal-notice.open .legal-notice-body{ display:block; }
.gear-btn{ background:none; border:none; cursor:pointer; font-size:1.15rem; margin:0 4px; opacity:.8; transition:opacity .2s; }
.gear-btn:hover{ opacity:1; }

/* ---------- Modals (Mitglied / Passwort / Einstellungen), bestehende Logik --- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--card-solid); color:var(--text); border-radius:20px;
  padding:26px; max-width:520px; width:100%; max-height:88vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(var(--shadow-tint),.3); position:relative;
}
.modal-wide{ max-width:min(94vw, 960px); }
.modal h2{ margin-top:0; font-size:1.3rem; }
.modal input, .modal textarea, .modal select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:transparent; color:inherit; margin-bottom:12px; font-family:inherit; font-size:.95rem;
}
.modal-close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:inherit; }
.modal .primary-btn{
  width:100%; padding:12px; border:none; border-radius:12px; background:var(--primary);
  color:var(--primary-ink); font-weight:600; cursor:pointer; font-size:.95rem;
}
.modal .secondary-btn{
  width:100%; padding:12px; border:none; border-radius:12px; background:var(--secondary);
  color:var(--primary-ink); font-weight:600; cursor:pointer; font-size:.95rem; margin-top:8px;
}
.settings-actions{ display:flex; gap:10px; margin-top:14px; }
.settings-actions .primary-btn, .settings-actions .secondary-btn{ width:auto; flex:1; margin-top:0; }
.success-box{ background:rgba(var(--accent-glow),.15); border-radius:12px; padding:14px; margin-top:10px; font-size:.9rem; display:none; }
.error-box{ background:rgba(217,122,107,.15); border-radius:12px; padding:14px; margin-top:10px; font-size:.9rem; display:none; color:#d97a6b; }
.member-hint{ font-size:.85rem; opacity:.85; margin-bottom:16px; padding:10px; background:var(--bg-alt); border-radius:10px; }

/* Gruppierte Abschnitte im "Allgemein"-Tab - übersichtlicher statt einer langen Liste */
.cfg-section{
  border:1px solid var(--border); border-radius:14px; padding:16px 16px 4px;
  margin-bottom:16px;
}
.cfg-section legend{ font-weight:600; font-size:.9rem; padding:0 8px; }
.cfg-section label{ font-size:.82rem; opacity:.8; display:block; margin-bottom:4px; }

.tabs{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tab-btn{
  padding:8px 14px; border-radius:20px; border:1px solid var(--border);
  background:transparent; color:inherit; cursor:pointer; font-size:.85rem;
}
.tab-btn.active{ background:var(--primary); color:var(--primary-ink); border-color:var(--primary); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* Kategorien als Akkordeon: eingeklappt zeigt nur Name, aufgeklappt zeigt die Services - übersichtlicher & breiter zum Bearbeiten */
.cat-block{ border:1px solid var(--border); border-radius:14px; margin-bottom:14px; overflow:hidden; }
.cat-block-header{
  display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
  background:var(--bg-alt);
}
.cat-block-header .cat-toggle-icon{ transition:transform .2s ease; font-size:.85rem; flex:0 0 auto; }
.cat-block.expanded .cat-toggle-icon{ transform:rotate(90deg); }
.cat-block-title{ flex:1 1 auto; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-block-body{ display:none; padding:14px; }
.cat-block.expanded .cat-block-body{ display:block; }
.cat-drag-handle{ flex:0 0 auto; cursor:grab; font-size:1.1rem; opacity:.55; padding:2px 4px; touch-action:none; user-select:none; }
.cat-drag-handle:active{ cursor:grabbing; }
.cat-move-btns{ display:flex; flex-direction:column; flex:0 0 auto; gap:2px; }
.cat-move-btns button{ border:none; background:transparent; color:inherit; opacity:.55; cursor:pointer; font-size:.75rem; line-height:1; padding:2px; }
.cat-move-btns button:hover{ opacity:1; }
.cat-move-btns button:disabled{ opacity:.2; cursor:default; }
.cat-block.dragging{ opacity:.4; }
.cat-block.drag-over-top{ box-shadow: inset 0 3px 0 var(--primary); }
.cat-block.drag-over-bottom{ box-shadow: inset 0 -3px 0 var(--primary); }
.cat-edit-label{ font-size:.78rem; opacity:.75; display:block; margin:2px 0 4px; }
.srv-block{ border:1px dashed var(--border); border-radius:12px; padding:12px; margin:10px 0; }
.opt-row{ display:flex; gap:8px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.opt-row input{ margin-bottom:0; }
.opt-row input[placeholder="A"]{ max-width:56px; flex:0 0 56px; }
.row-inline{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:600px){
  .row-inline input, .opt-row input:not([placeholder="A"]){ flex:1 1 100%; }
}
.small-btn{
  border:none; border-radius:8px; padding:6px 10px; cursor:pointer; font-size:.78rem;
  background:var(--bg-alt); color:inherit;
}
.small-btn.danger{ background:#d97a6b; color:#fff; }
.pw-gate input{ margin-bottom:10px; }
.password-hint{ font-size:.8rem; opacity:.7; margin-top:-8px; margin-bottom:12px; }
.hint-warning{ background:rgba(217,122,107,.12); border:1px solid rgba(217,122,107,.35); border-radius:10px; padding:10px 12px; opacity:.95; margin-top:8px; }

/* ==========================================================================
   Bonus-Aktionen: Editor in den Einstellungen + öffentliches Blink-Banner.
   ========================================================================== */
.bonus-campaign-row{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin-bottom:8px;
  border:1px solid var(--border); border-radius:12px; background:var(--bg-alt); flex-wrap:wrap;
}
.bonus-campaign-row .bc-icon{ font-size:1.3rem; flex:0 0 auto; }
.bonus-campaign-row .bc-name{ flex:1 1 140px; font-weight:600; min-width:0; }
.bonus-campaign-row .bc-name input{ margin:0 0 4px; font-weight:400; font-size:.85rem; }
.bonus-campaign-row .bc-percent{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.bonus-campaign-row .bc-percent input{
  width:64px; margin:0; padding:6px 8px; border-radius:8px; border:1px solid var(--border);
  background:transparent; color:inherit; text-align:right;
}
.bonus-campaign-row .bc-active{ display:flex; align-items:center; gap:6px; flex:0 0 auto; font-size:.8rem; }
.bonus-campaign-row .bc-active input{ width:auto; margin:0; }
.bonus-campaign-row.active{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary) inset; }

.bonus-banner-container{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:0 16px; margin-top:10px;
}
.bonus-banner-container:empty{ display:none; }
.bonus-badge{
  display:inline-flex; align-items:center; gap:6px; background:var(--primary); color:var(--primary-ink);
  border-radius:30px; padding:7px 16px; font-weight:700; font-size:.85rem; letter-spacing:.3px;
  box-shadow:0 6px 18px rgba(var(--shadow-tint),.25); animation:bonusBlink 1.4s ease-in-out infinite;
}
.bonus-badge .bc-badge-icon{ font-size:1.05rem; }
@keyframes bonusBlink{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.55; transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .bonus-badge{ animation:none; }
}
.price-tag .bonus-pill{
  display:inline-block; margin-left:6px; background:var(--secondary); color:#fff;
  border-radius:20px; padding:2px 8px; font-size:.72rem; font-weight:700; animation:bonusBlink 1.4s ease-in-out infinite;
}

/* ---------- Foto-Manager (Einstellungen -> 📸 Fotos) ------------------------ */
.photo-cat-block{ border:1px solid var(--border); border-radius:14px; padding:14px; margin-bottom:14px; }
.photo-cat-block h4{ margin:0 0 10px; font-size:.95rem; }
.photo-thumbs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.photo-thumb{ position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.photo-thumb img{ width:100%; height:100%; object-fit:cover; }
.photo-thumb-del{
  position:absolute; top:2px; right:2px; background:rgba(0,0,0,.6); color:#fff; border:none;
  border-radius:50%; width:22px; height:22px; font-size:.75rem; cursor:pointer; line-height:1;
}
.photo-empty{ font-size:.8rem; opacity:.6; margin:0 0 4px; }
.photo-search-input{ margin-bottom:14px !important; }
.photo-upload-btn{
  display:inline-block; border:1px dashed var(--primary); color:var(--primary); border-radius:10px;
  padding:8px 14px; font-size:.82rem; cursor:pointer; font-weight:600;
}
.photo-upload-btn input[type="file"]{ display:none; }
.photo-gallery-block{ border-color:var(--primary); background:rgba(var(--accent-glow),.06); }
.photo-block-hint{ font-size:.76rem; opacity:.7; margin:-4px 0 10px; }

/* ---------- Effekt: schwebende Blütenblätter --------------------------------- */
#petalLayer{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; display:none; }
body[data-fx-petals="on"] #petalLayer{ display:block; }
.petal{ position:absolute; top:-40px; opacity:.8; animation:petalFall linear infinite; will-change:transform; }
@keyframes petalFall{
  from{ transform:translateY(-5vh) translateX(0) rotate(0deg); }
  to{ transform:translateY(105vh) translateX(var(--drift,40px)) rotate(320deg); }
}

/* ---------- Effekt: Ambient Gradient ------------------------------------------ */
body[data-fx-gradient="on"]{
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--accent-glow),.10), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(var(--accent-glow),.10), transparent 45%),
    var(--bg);
  background-size:200% 200%;
  animation:gradientShift 26s ease infinite;
}
@keyframes gradientShift{
  0%,100%{ background-position:0% 0%; }
  50%{ background-position:100% 100%; }
}

/* ---------- Effekt: Glow Puls -------------------------------------------------- */
body[data-fx-glow="on"] .book-btn,
body[data-fx-glow="on"] .gate-btn{ animation:btnGlow 3.2s ease-in-out infinite; }
@keyframes btnGlow{
  0%,100%{ box-shadow:0 0 0 rgba(var(--accent-glow),0); }
  50%{ box-shadow:0 0 22px rgba(var(--accent-glow),.55); }
}
body[data-fx-glow="on"] .section-title{ position:relative; }
body[data-fx-glow="on"] .section-title::after{
  content:""; display:block; width:60px; height:3px; margin:10px auto 0; border-radius:3px;
  background:var(--secondary); animation:lineGlow 3.2s ease-in-out infinite;
}
@keyframes lineGlow{ 0%,100%{ opacity:.5; width:40px;} 50%{ opacity:1; width:80px;} }

/* ---------- Effekt: Fade-in beim Scrollen -------------------------------------- */
body[data-fx-reveal="on"] .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
body[data-fx-reveal="on"] .reveal.in-view{ opacity:1; transform:none; }

/* ---------- Effekt: Karten-Tilt ------------------------------------------------- */
body[data-fx-tilt="on"] .card,
body[data-fx-tilt="on"] .gphoto{ transition:transform .12s ease, box-shadow .25s ease; }

/* ---------- Effekt: Cursor-Aura (nur Desktop) ----------------------------------- */
#cursorAura{
  position:fixed; width:220px; height:220px; border-radius:50%; pointer-events:none; z-index:4;
  background:radial-gradient(circle, rgba(var(--accent-glow),.16), transparent 70%);
  transform:translate(-50%,-50%); display:none; transition:opacity .3s ease;
}
@media (hover:hover) and (pointer:fine){
  body[data-fx-aura="on"] #cursorAura{ display:block; }
}

/* ---------- Effekt: Ken Burns in Galerie (Web View) ------------------------------ */
body[data-fx-kenburns="on"] .gphoto img{ animation:kenBurns 14s ease-in-out infinite alternate; }
@keyframes kenBurns{ from{ transform:scale(1); } to{ transform:scale(1.14) translate(-2%,-2%); } }
body[data-fx-kenburns="on"] .gphoto:hover img{ animation-play-state:paused; }

/* ---------- Effekt: Parallax Hero ------------------------------------------------ */
body[data-fx-parallax="on"] .deco-photo{ transition:transform .1s linear; }

/* ---------- Scroll progress (dezent, immer sichtbar) ----------------------------- */
#scrollBar{ position:fixed; top:0; left:0; height:3px; background:var(--primary); z-index:70; width:0%; transition:width .1s ease; }

/* ---------- Responsive ------------------------------------------------------------ */
@media (max-width:640px){
  .brand-name{ font-size:1.2rem; }
  .hero h1{ font-size:1.7rem; }
  .section-title{ font-size:1.4rem; }
}