/* Copyright ONLINE NETWORK VISION S.L. – Villa Olivija (Gerald Fior) – Entwurf, Nutzung nur nach Auftrag – dnw-wz-villaolivija-20261028
   FARBEN GEMESSEN (nicht ausgedacht):
   Gold #EAB454, Sonnenorange #EA9654, Türkis #12A8C0 / #30C0E4 = häufigste Farben im bisherigen Logo (logo-farben.py, 2022_04_Logo-Villa-Olivija.png)
   Adria #004A89 = Mittelwert tiefes Wasser im Foto 2019_06_Villa-Olivija-Boot3.jpg
   Abendrot #E45A63 = Sonnenuntergang 2019_06_Villa-Olivija-Sonnenuntergang.jpg; für Knöpfe vertieft auf #C8414D (weiss darauf 4,86:1)
   Signalfarbe (Abendrot) NUR für die eine Handlung: Buchen. Schriften: Noto Serif Display 300 + Albert Sans + La Belle Aurore (OFL, selbst ausgeliefert). */
@font-face{font-family:"NotoD";font-weight:300;font-display:swap;src:url(fonts/noto-serif-display-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"NotoD";font-weight:300;font-display:swap;src:url(fonts/noto-serif-display-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"NotoD";font-weight:300;font-style:italic;font-display:swap;src:url(fonts/noto-serif-display-latin-300-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"NotoD";font-weight:300;font-style:italic;font-display:swap;src:url(fonts/noto-serif-display-latin-ext-300-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert";font-weight:400;font-display:swap;src:url(fonts/albert-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert";font-weight:400;font-display:swap;src:url(fonts/albert-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert";font-weight:500;font-display:swap;src:url(fonts/albert-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert";font-weight:500;font-display:swap;src:url(fonts/albert-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert";font-weight:600;font-display:swap;src:url(fonts/albert-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert";font-weight:600;font-display:swap;src:url(fonts/albert-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Aurore";font-weight:400;font-display:swap;src:url(fonts/la-belle-aurore-latin-400-normal.woff2) format("woff2")}

/* ===== FASSUNG 6 (30.10.2026): drei Farbwelten über data-welt am <html>. Alle Töne aus Geralds Material gemessen:
   Logo 2022: Gold #EAB454, Türkis #12A8C0 · tiefes Wasser (meer-05) #146CA4 · Ziegeldach (villa-01) #DC8388 · Terrassenmauer (top2-01) #CBA781
   · Olivenlaub (villa-12) #64858B · flaches Wasser (meer-09) #3B6570. Gerald 30.10.: weniger bunt, Buchung nicht als Blaufläche. ===== */
:root{
  --grund:#F4EEE4; --grund-2:#EDE4D6; --papier:#FBF8F2;
  --marke:#062A45; --marke-2:#0A3A5E; --marke-3:#041C30; --marke-rgb:6,42,69; --dunkel-rgb:4,28,48;
  --tinte:#13304A; --tinte-2:#46596B; --linie:rgba(6,42,69,.12);
  --akzent:#D9A441; --akzent-hell:#EAC06C; --akzent-tief:#8A5E14; --akzent-rgb:217,164,65; --akzent-tief-rgb:138,94,20;
  --akzent2:#146CA4; --akzent2-hell:#3C8FC6; --akzent2-tief:#0B4F7A; --akzent2-rgb:20,108,164;
  --signal:#C9942F; --signal-hell:#DDAA47; --signal-tief:#9F7420; --signal-rgb:201,148,47; --signal-text:#062A45;
  --theme:#062A45;
  /* alte Namen bleiben gültig */
  --kalk:var(--grund); --nacht:var(--marke); --nacht-2:var(--marke-2); --nacht-3:var(--marke-3);
  --adria:var(--akzent2-tief); --tuerkis:var(--akzent2); --tuerkis-hell:var(--akzent2-hell); --tuerkis-tief:var(--akzent2-tief);
  --gold:var(--akzent); --gold-tief:var(--akzent-tief); --orange:var(--akzent-hell);
  --marke-tief:var(--marke-3); --signal-tief-text:var(--akzent2-tief);
  --anzeige:"NotoD","Times New Roman",serif; --text:"Albert",system-ui,sans-serif; --hand:"Aurore","Segoe Script",cursive;
  --r:30px; --kopf-h:88px; --ruf-h:66px; --rand:clamp(18px,5vw,80px); --breit:1440px;
  --fs:clamp(18px,.5vw + 15.5px,21px);
}
/* Welt B „Terrakotta & Olive“: Sand aus der Terrassenmauer, Dunkel aus dem Olivenlaub, Akzent aus dem Ziegeldach */
[data-welt="oliva"]{
  --grund:#F3EDE3; --grund-2:#EAE1D3; --papier:#FBF8F2;
  --marke:#2F3A33; --marke-2:#3E4C43; --marke-3:#1E2823; --marke-rgb:47,58,51; --dunkel-rgb:30,40,35;
  --tinte:#26302A; --tinte-2:#5A6358; --linie:rgba(47,58,51,.14);
  --akzent:#C8795F; --akzent-hell:#DDA08C; --akzent-tief:#8C4A35; --akzent-rgb:200,121,95; --akzent-tief-rgb:140,74,53;
  --akzent2:#647F74; --akzent2-hell:#8AA398; --akzent2-tief:#45605A; --akzent2-rgb:100,127,116;
  --signal:#A8563F; --signal-hell:#BE6A52; --signal-tief:#84412F; --signal-rgb:168,86,63; --signal-text:#fff;
  --theme:#2F3A33;
}
/* Welt C „Weiß & Meer“: fast weiß, Graphit statt Nachtblau, ein Türkis aus Wasser und Logo */
[data-welt="meer"]{
  --grund:#F6F8F8; --grund-2:#ECF1F2; --papier:#FFFFFF;
  --marke:#1D2B33; --marke-2:#2C3E49; --marke-3:#121C22; --marke-rgb:29,43,51; --dunkel-rgb:18,28,34;
  --tinte:#1D2B33; --tinte-2:#4F5B64; --linie:rgba(29,43,51,.12);
  --akzent:#0E7F94; --akzent-hell:#36A0B4; --akzent-tief:#0A5C6B; --akzent-rgb:14,127,148; --akzent-tief-rgb:10,92,107;
  --akzent2:#146CA4; --akzent2-hell:#3C8FC6; --akzent2-tief:#0B4F7A; --akzent2-rgb:20,108,164;
  --signal:#0E7F94; --signal-hell:#1E93A8; --signal-tief:#0A5C6B; --signal-rgb:14,127,148; --signal-text:#fff;
  --theme:#1D2B33;
}
/* Welt D „Logo“ (31.10.2026, Geralds Wunsch: Farbkonzept aus dem Logo): Marineblau #1F325C, Adria-Türkis #32C3E5,
   Ozean-Türkis #1D788D für Knöpfe, Eisblau #DFF4FA, Meeresweiß #F4FAFC, Reinweiß; Logo-Blau #2B4AA0, Sonne #E8955A nur als Punkt */
[data-welt="logo"]{
  --grund:#F4FAFC; --grund-2:#DFF4FA; --papier:#FFFFFF;
  --marke:#1F325C; --marke-2:#2B4AA0; --marke-3:#16244A; --marke-rgb:31,50,92; --dunkel-rgb:22,36,74;
  --tinte:#1F325C; --tinte-2:#4A5A78; --linie:rgba(31,50,92,.12);
  --akzent:#32C3E5; --akzent-hell:#7FDCF2; --akzent-tief:#1D788D; --akzent-rgb:50,195,229; --akzent-tief-rgb:29,120,141;
  --akzent2:#1D788D; --akzent2-hell:#32C3E5; --akzent2-tief:#165E6F; --akzent2-rgb:29,120,141;
  --signal:#1D788D; --signal-hell:#2A97B0; --signal-tief:#14596A; --signal-rgb:29,120,141; --signal-text:#fff;
  --theme:#1F325C;
}
[data-welt="logo"] body::before{background:
 radial-gradient(55vw 45vh at 92% 8%,rgba(50,195,229,.16),transparent 62%),
 radial-gradient(50vw 45vh at 4% 55%,rgba(43,74,160,.08),transparent 62%),var(--kalk)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--kalk);color:var(--tinte);font:400 var(--fs)/1.6 var(--text);overflow-x:hidden;overflow-x:clip}
body::before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:-3;pointer-events:none;background:
 radial-gradient(55vw 45vh at 92% 8%,rgba(var(--akzent-rgb),.20),transparent 62%),
 radial-gradient(50vw 45vh at 4% 55%,rgba(var(--akzent2-rgb),.16),transparent 62%),
 radial-gradient(45vw 40vh at 75% 98%,rgba(234,150,84,.14),transparent 60%),var(--kalk)}
img,video{max-width:100%;display:block}
img[height]{height:auto}
a{color:var(--adria)}
h1,h2,h3{font-family:var(--anzeige);font-weight:300;line-height:1.04;margin:0;color:var(--nacht);letter-spacing:-.01em}
h1 em,h2 em,h3 em{font-style:italic}
h2{font-size:clamp(42px,5.6vw + 10px,98px);line-height:1;margin-bottom:.38em}
h3{font-size:clamp(27px,1.7vw + 18px,40px);line-height:1.12}
p{margin:0 0 1em}
.sprung{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:12px 16px;border-radius:12px}
.sprung:focus{left:12px}
.kicker{font:600 .88rem/1.3 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--tuerkis-tief);margin:0 0 1rem}
.kicker.-hell{color:var(--gold)}
.lead{font-size:clamp(19px,.75vw + 15.5px,25px);line-height:1.55;color:var(--tinte-2);max-width:760px}
.abschnitt{padding:clamp(84px,11vw,180px) var(--rand);max-width:var(--breit);margin:0 auto}
.titelzeile{max-width:1000px;margin-bottom:clamp(34px,5vw,72px)}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--tuerkis-hell);outline-offset:3px}

/* GLAS: Weichzeichner liegt auf ::before, Text bleibt Vektor */
.glas{position:relative;isolation:isolate;border-radius:var(--r)}
.glas::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.62);
 -webkit-backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
 border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 60px -30px rgba(var(--marke-rgb),.45)}
.glas::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.5),transparent 40%,transparent 72%,rgba(255,255,255,.16))}
.glas.-dunkel{color:#fff}
.glas.-dunkel::before{background:rgba(var(--marke-rgb),.46);border-color:rgba(255,255,255,.26);box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 30px 70px -30px rgba(0,0,0,.6)}
.glas.-dunkel::after{background:linear-gradient(118deg,rgba(255,255,255,.16),transparent 38%,transparent 75%,rgba(255,255,255,.06))}

/* KNÖPFE */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:58px;padding:.9em 1.9em;border-radius:999px;border:0;cursor:pointer;
 font:600 1.06rem/1.15 var(--text);text-decoration:none;text-align:center;position:relative;isolation:isolate;max-width:100%;color:var(--nacht)}
.knopf::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;border-radius:inherit}
.knopf.-signal{color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.14) inset,0 16px 34px -14px rgba(var(--signal-rgb),.85)}
.knopf.-signal::before{background:linear-gradient(135deg,var(--signal) 0%,var(--signal-tief) 100%)}
.knopf.-glas{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 12px 30px -16px rgba(var(--marke-rgb),.5)}
.knopf.-glas::before{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(var(--marke-rgb),.14)}
.knopf.-breit{width:100%}
.knopf[disabled]{cursor:not-allowed;color:rgba(255,255,255,.88)}
.knopf[disabled]::before{background:#5a6b7a}
.knopf[disabled]{box-shadow:none}
@media (hover:hover) and (pointer:fine){.knopf.-signal:not([disabled]):hover::before{background:linear-gradient(135deg,var(--signal-tief) 0%,var(--signal) 100%)}.knopf.-glas:hover::before{background:#fff}}

/* KOPF */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--kopf-h);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 clamp(12px,3vw,36px);color:#fff;transition:background .35s,color .35s,box-shadow .35s}
.kopf::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.55),rgba(var(--dunkel-rgb),0));transition:opacity .35s}
.kopf.-fest{color:var(--nacht);background:var(--papier);-webkit-backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 var(--linie)}
.kopf.-fest::before{opacity:0}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none;min-height:44px}
.menue{display:flex;align-items:center;gap:2px}
.menue a:not(.knopf){color:inherit;text-decoration:none;font:500 1.04rem var(--text);padding:.55em .95em;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover) and (pointer:fine){.menue a:not(.knopf):hover{background:rgba(255,255,255,.16)}.kopf.-fest .menue a:not(.knopf):hover{background:rgba(var(--marke-rgb),.06)}}
.menue .knopf{min-height:46px;margin-left:8px;padding:.6em 1.25em}
.kopf-rechts{display:flex;align-items:center;gap:8px;flex:none}
.lied-knopf{position:relative;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:inherit;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.kopf.-fest .lied-knopf{border-color:rgba(var(--marke-rgb),.18);background:rgba(255,255,255,.7)}
.lied-knopf svg{width:22px;height:22px;grid-area:1/1}
.lied-knopf .pause,[data-lied] .pause{display:none}
[data-lied][aria-pressed="true"] .spielen{display:none}
[data-lied][aria-pressed="true"] .pause{display:block}
.wellen{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;inset:-5px;border-radius:50%;pointer-events:none}
[aria-pressed="true"] .wellen i{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:50%;border:1.5px solid var(--gold);animation:welle 2.4s ease-out infinite;opacity:0}
[aria-pressed="true"] .wellen i:nth-child(2){animation-delay:.8s}[aria-pressed="true"] .wellen i:nth-child(3){animation-delay:1.6s}
@keyframes welle{from{transform:scale(.85);opacity:.9}to{transform:scale(1.5);opacity:0}}
.menue-knopf{display:none;min-height:46px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.14);color:inherit;font:600 .95rem var(--text);cursor:pointer}
.kopf.-fest .menue-knopf{border-color:rgba(var(--marke-rgb),.18);background:rgba(255,255,255,.7)}
@media (max-width:1180px){
  .menue{position:fixed;top:var(--kopf-h);left:10px;right:10px;flex-direction:column;align-items:stretch;padding:12px;border-radius:22px;background:rgba(251,248,242,.97);box-shadow:0 30px 60px -20px rgba(var(--marke-rgb),.45);display:none;color:var(--nacht)}
  .menue.-offen{display:flex}
  .menue a:not(.knopf){padding:.9em 1em;font-size:1.15rem}
  .menue .knopf{margin:8px 0 0}
  .menue-knopf{display:inline-flex;align-items:center}
}

/* AUFTAKT */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:calc(var(--kopf-h) + 24px) var(--rand) clamp(36px,7vh,72px);color:#fff;isolation:isolate;overflow:hidden;overflow:clip}
.hero-film{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:var(--nacht)}
.hero-film video,.hero-poster img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster{transition:opacity .8s}
.hero-film.-laeuft .hero-poster{opacity:0}
.hero-schleier{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.5) 0%,rgba(var(--dunkel-rgb),.14) 24%,rgba(var(--dunkel-rgb),.24) 45%,rgba(var(--dunkel-rgb),.82) 100%),linear-gradient(90deg,rgba(var(--dunkel-rgb),.72) 0%,rgba(var(--dunkel-rgb),.4) 50%,rgba(var(--dunkel-rgb),0) 80%)}
.hero-inhalt{max-width:980px}
.hero h1{color:#fff;font-size:clamp(50px,min(9vw + 6px,12.6vh),160px);line-height:.95;margin-bottom:.3em;text-shadow:0 2px 26px rgba(var(--dunkel-rgb),.55),0 1px 3px rgba(var(--dunkel-rgb),.35)}
.hero-lead{font-size:clamp(19px,.8vw + 15px,26px);max-width:880px;color:#fff;margin-bottom:1.6em;text-shadow:0 1px 18px rgba(var(--dunkel-rgb),.65),0 1px 2px rgba(var(--dunkel-rgb),.5)}
.hero .kicker{display:inline-block;color:#fff;padding:.5em 1.1em;border-radius:999px;background:rgba(var(--dunkel-rgb),.62);-webkit-backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}
.suchleiste{display:grid;grid-template-columns:1.3fr 1fr 1fr auto;gap:6px;padding:10px;border-radius:28px;max-width:940px}
.such-feld{display:flex;flex-direction:column;justify-content:center;gap:0;padding:8px 18px;border-radius:18px;min-height:70px;min-width:0}
.such-feld+.such-feld{border-left:1px solid rgba(255,255,255,.18)}
.such-feld span{font:600 .82rem/1.2 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.such-feld input,.such-feld select{all:unset;font:500 1.14rem var(--text);color:#fff;width:100%;min-height:44px;cursor:pointer;color-scheme:dark;box-sizing:border-box}
.such-feld select option{color:#000}
.such-feld.-datum{position:relative}
.such-feld .ph{position:absolute;left:18px;bottom:20px;font:500 1.14rem var(--text);font-style:normal;color:rgba(255,255,255,.9);pointer-events:none;display:none}
.such-feld.-leer .ph{display:block}
.such-feld.-leer input{color:transparent}
.suchleiste .knopf{min-height:70px;border-radius:20px;padding:0 2em;font-size:1.12rem}
.hero-werte{display:flex;flex-direction:column;gap:10px}
.wert{padding:18px 24px;min-width:220px}
.wert b{display:block;font:300 58px/1 var(--anzeige)}
.wert b small{font-size:.5em;opacity:.85}
.wert span{font-size:1rem;color:rgba(255,255,255,.92)}
.film-knopf{position:absolute;right:16px;top:calc(var(--kopf-h) + 12px);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(var(--dunkel-rgb),.35);color:#fff;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.film-knopf svg{width:18px;height:18px;fill:currentColor}
.film-knopf .s{display:none}.film-knopf.-aus .p{display:none}.film-knopf.-aus .s{display:block}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-werte{display:none}}
@media (max-width:640px){
  .hero{min-height:94vh;min-height:94svh}
  .hero-schleier{background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.5) 0%,rgba(var(--dunkel-rgb),.32) 18%,rgba(var(--dunkel-rgb),.58) 42%,rgba(var(--dunkel-rgb),.9) 100%)}
  .suchleiste{grid-template-columns:1fr 1fr;border-radius:22px}
  .such-feld:nth-child(3){display:none}
  .suchleiste .tastknopf{grid-column:1/-1}
  .such-feld+.such-feld{border-left:1px solid rgba(255,255,255,.18)}
  .suchleiste .knopf{grid-column:1/-1;min-height:54px}
  .such-feld{min-height:58px;padding:8px 12px}
}

/* FAKTEN */

/* EIN TAG AN DER VILLA */
.tag-buehne{position:relative;aspect-ratio:16/8.4;border-radius:36px;overflow:hidden;background:var(--nacht);box-shadow:0 40px 80px -40px rgba(var(--marke-rgb),.55)}
.tag-bilder img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.tag-uhr{position:absolute;left:clamp(14px,2.4vw,28px);top:clamp(14px,2.4vw,28px);padding:6px 18px 8px;border-radius:999px;background:rgba(var(--dunkel-rgb),.62);color:#fff;font:300 clamp(30px,3vw + 10px,56px)/1.05 var(--anzeige);font-variant-numeric:tabular-nums;-webkit-backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.tag-karte{position:absolute;left:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);max-width:min(560px,calc(100% - 28px));padding:22px 26px}
.tag-karte h3{color:#fff;font-size:clamp(24px,1.5vw + 15px,38px);margin-bottom:.3em}
.tag-karte p{margin:0;font-size:1.08rem;color:rgba(255,255,255,.94)}
.tag-steuer{padding:18px 4px 0}
.tag-bahn{position:relative;height:84px}
.tag-himmel{position:absolute;left:22px;right:22px;top:20px;height:8px;border-radius:999px;background:linear-gradient(90deg,#F7C98A 0%,#9FD9EA 18%,#30C0E4 36%,#12A8C0 55%,#EA9654 78%,#C8414D 86%,#0A3A5E 100%);box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.tag-marken{position:absolute;left:22px;right:22px;top:36px;height:40px}
.tag-marken button{position:absolute;top:0;transform:translateX(-50%);min-width:44px;min-height:44px;padding:4px 2px;border:0;background:transparent;font:500 .95rem var(--text);color:var(--tinte-2);cursor:pointer;font-variant-numeric:tabular-nums}
.tag-marken button::before{content:"";display:block;width:2px;height:8px;margin:0 auto 4px;background:rgba(var(--marke-rgb),.25);border-radius:2px}
.tag-marken button.-an{color:var(--nacht);font-weight:600}
.tag-sonne{position:absolute;top:2px;left:0;width:44px;height:44px;border-radius:50%;cursor:grab;touch-action:none;display:grid;place-items:center;outline-offset:4px}
.tag-sonne .kern{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#FFF1C4,var(--gold) 52%,var(--orange));box-shadow:0 0 0 6px rgba(var(--akzent-rgb),.25),0 0 34px 10px rgba(var(--akzent-rgb),.55),0 8px 16px -4px rgba(var(--akzent-tief-rgb),.6);transition:background .4s,box-shadow .4s}
.tag-sonne.-mond .kern{background:radial-gradient(circle at 38% 34%,#FFFFFF,#DCE6F0 55%,#9FB3C8);box-shadow:0 0 0 6px rgba(220,230,240,.3),0 0 30px 8px rgba(200,220,240,.55)}
.tag-sonne:active{cursor:grabbing}
.tag-hinweis{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:6px 0 0;font-size:1.02rem;color:var(--tinte-2)}
.tag-hinweis .hand{color:var(--gold-tief)}
.nochmal{min-height:44px;padding:.4em 1.1em;border-radius:999px;border:1px solid rgba(var(--marke-rgb),.2);background:#fff;font:600 .9rem var(--text);color:var(--nacht);cursor:pointer}
@media (max-width:700px){.tag-buehne{aspect-ratio:4/5;border-radius:24px}.tag-marken button:nth-child(even){display:none}}

/* BUCHEN */
.buchen-bereich{position:relative;isolation:isolate;color:#fff;background:var(--nacht);overflow:hidden;overflow:clip}
.buchen-bereich::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:
 radial-gradient(50vw 50vh at 85% 15%,rgba(var(--akzent2-rgb),.32),transparent 60%),
 radial-gradient(45vw 45vh at 10% 85%,rgba(var(--akzent-rgb),.26),transparent 60%),
 radial-gradient(40vw 40vh at 50% 50%,rgba(var(--marke-rgb),.6),transparent 70%),var(--nacht)}
.buchen-bereich h2{color:#fff}
.buchen-bereich .lead{color:rgba(255,255,255,.86)}
.buchung{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
.kalender{padding:18px 14px 16px}
.kal-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.kal-titel{font:300 1.6rem var(--anzeige)}
.kal-pfeil{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer}
.kal-pfeil[disabled]{opacity:.35;cursor:default}
.kal-monate{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kal-monate:not(.-einer) .tage{gap:1px}
.monat h4{margin:6px 0 8px;font:600 .9rem var(--text);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.tage{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tage .wt{font:500 .86rem var(--text);text-align:center;color:rgba(255,255,255,.65);padding:4px 0}
.tage button{min-height:50px;border:0;border-radius:12px;background:transparent;color:#fff;font:500 1.08rem var(--text);cursor:pointer;font-variant-numeric:tabular-nums;position:relative}
@media (hover:hover) and (pointer:fine){.tage button:not([disabled]):hover{background:rgba(255,255,255,.12)}}
.tage button[disabled]{cursor:default;color:rgba(255,255,255,.34)}
.tage button.-belegt{color:rgba(255,255,255,.4);text-decoration:line-through;text-decoration-color:rgba(var(--signal-rgb),.85)}
.tage button.-im{background:rgba(var(--akzent-rgb),.34);border-radius:0}
.tage button.-an,.tage button.-ab{background:var(--gold);color:var(--nacht);font-weight:600}
.tage button.-an{border-radius:12px 0 0 12px}.tage button.-ab{border-radius:0 12px 12px 0}
.tage button.-an.-ab{border-radius:12px}
.tage .leer{min-height:50px}
.kal-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:.86rem;color:rgba(255,255,255,.82)}
.kal-legende i{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:7px;vertical-align:-2px}
.l-frei{border:1px solid rgba(255,255,255,.6)}.l-belegt{background:rgba(255,255,255,.12);border:1px solid rgba(var(--signal-rgb),.85)}.l-wahl{background:var(--gold)}
.kal-status{margin:8px 0 0;font-size:.86rem;color:rgba(255,255,255,.8)}
.auswahl{padding:24px;display:flex;flex-direction:column;gap:16px}
.aus-zeile{display:flex;gap:12px;flex-wrap:wrap}
.aus-zeile>div{flex:1;min-width:120px}
.aus-label{display:block;font:600 .82rem var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.aus-zeile b{font:300 1.55rem var(--anzeige)}
.naechte{display:flex;gap:6px}
.naechte button{flex:1;min-height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;font:600 1.02rem var(--text);cursor:pointer}
.naechte button.-an{background:#fff;color:var(--nacht);border-color:#fff}
.zaehler{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zaehler .aus-label{flex:0 0 100%}
.zaehler button{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.3rem;cursor:pointer}
.zaehler output{min-width:28px;text-align:center;font:300 1.4rem var(--anzeige)}
.angebote{display:flex;flex-direction:column;gap:8px}
.angebote .hinweis{margin:0;font-size:1.05rem;color:rgba(255,255,255,.86)}
.angebot{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);cursor:pointer;min-height:64px}
.angebot input{position:absolute;opacity:0;width:1px;height:1px}
.angebot .ring{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.6)}
.angebot.-gewaehlt{border-color:var(--gold);background:rgba(var(--akzent-rgb),.14)}
.angebot.-gewaehlt .ring{border:7px solid var(--gold)}
.angebot.-nein{opacity:.55;cursor:not-allowed}
.angebot .a-name{flex:1;min-width:0}
.angebot .a-name b{display:block;font:300 1.4rem var(--anzeige)}
.angebot .a-name small{font-size:.84rem;color:rgba(255,255,255,.8)}
.angebot .a-preis{text-align:right}
.angebot .a-preis b{display:block;font:300 1.45rem var(--anzeige)}
.angebot .a-preis small{font-size:.8rem;color:rgba(255,255,255,.8)}
.angebot input:focus-visible+.ring{outline:3px solid var(--tuerkis-hell);outline-offset:3px}
.sicher{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:.86rem;color:rgba(255,255,255,.82)}
.sicher svg{flex:none;width:18px;height:18px;margin-top:2px}
.ablauf{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ablauf li{display:flex;gap:16px;padding:24px 22px 22px;border-radius:26px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.ablauf li>b{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--nacht);font:600 1rem var(--text)}
.ablauf h3{color:#fff;font-size:1.55rem;margin-bottom:.3em}
.ablauf p{margin:0;font-size:1.05rem;color:rgba(255,255,255,.84)}
@media (max-width:1000px){.buchung{grid-template-columns:1fr}.ablauf{grid-template-columns:1fr}}
@media (max-width:760px){.kal-monate{grid-template-columns:1fr}.kalender{padding:14px 6px 14px}.kal-kopf,.kal-legende,.kal-status{padding:0 8px}}
.kal-monate.-einer{grid-template-columns:1fr}

/* GÄSTE */
.gaeste-kopf{display:flex;align-items:center;gap:clamp(20px,4vw,56px);margin-bottom:28px;flex-wrap:wrap}
.note{display:flex;align-items:baseline;font-family:var(--anzeige);color:var(--nacht);line-height:.9}
.note-zahl{font-size:clamp(110px,14vw,190px);font-weight:300;background:linear-gradient(160deg,var(--akzent-tief),var(--gold) 45%,var(--akzent-tief));-webkit-background-clip:text;background-clip:text;color:transparent}
.note-von{font-size:clamp(34px,3vw,52px);color:var(--tinte-2)}
.gaeste-kopf>div:last-child{flex:1;min-width:280px}
.quelle{font-size:.9rem;color:var(--tinte-2);margin:.8em 0 0}
.balken{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px}
.balken li{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.balken span{font-size:1.08rem;color:var(--tinte)}
.balken b{font:300 1.4rem var(--anzeige);color:var(--nacht)}
.balken i{grid-column:1/-1;height:8px;border-radius:999px;background:rgba(var(--marke-rgb),.1);position:relative;overflow:hidden}
.balken i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--tuerkis),var(--gold));transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.balken.-da i::after{width:calc(var(--w) * 100%)}
@media (max-width:760px){.balken{grid-template-columns:1fr 1fr}}
.stimmen{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 26px;scrollbar-width:thin}
.stimme{flex:0 0 min(500px,86vw);scroll-snap-align:start;margin:0;padding:32px 30px 26px;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.stimme blockquote{margin:0;font:300 clamp(1.35rem,.6vw + 1.1rem,1.7rem)/1.42 var(--anzeige);color:var(--nacht)}
.stimme figcaption{font-size:.98rem;color:var(--tinte-2)}
.stimme figcaption b{color:var(--nacht)}
.stimme figcaption small{display:block;font-size:.8rem;margin-top:2px;color:var(--tinte-2)}

/* BRIEF + SONG */
.brief-bereich{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.brief-bild img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.brief-bereich::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--dunkel-rgb),.55),rgba(var(--dunkel-rgb),.1) 70%)}
.brief{max-width:760px;padding:clamp(30px,4.5vw,64px);border-radius:32px;background:var(--papier);box-shadow:0 50px 90px -40px rgba(0,0,0,.6);position:relative}
.brief::before{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;inset:10px;border:1px solid rgba(var(--akzent-tief-rgb),.25);border-radius:20px;pointer-events:none}
.brief .hand{font:400 clamp(30px,2.6vw + 16px,46px)/1.25 var(--hand);color:var(--adria);margin-bottom:.6em}
.brief p{color:var(--tinte);font-size:1.08em}
.gruss{font:300 1.3rem var(--anzeige);font-style:italic;color:var(--nacht)}

/* KONTAKT */
.kontakt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.kontakt-wege{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.weg{display:flex;align-items:center;gap:16px;padding:20px 22px;text-decoration:none;color:var(--nacht);min-height:76px}
.weg svg{flex:none;width:24px;height:24px;color:var(--adria)}
.weg span{display:flex;flex-direction:column;font-weight:600;font-size:1.1rem;min-width:0;overflow-wrap:anywhere}
.weg small{font:500 .84rem var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-2)}
.adresse{margin-top:18px;font-size:1.05rem;color:var(--tinte-2)}
.adresse a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.anfrage{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:14px}
.anfrage h3{margin-bottom:.2em}
.feld{display:flex;flex-direction:column;gap:6px}
.feld label{font:600 1rem var(--text);color:var(--nacht)}
.feld label small{font-weight:400;font-size:.82rem;color:var(--tinte-2)}
.feld input,.feld textarea{width:100%;min-width:0;font:inherit;font-size:1.08rem;padding:.8em 1em;border-radius:16px;border:1px solid rgba(var(--marke-rgb),.2);background:rgba(255,255,255,.9);color:var(--tinte);min-height:58px}
.feld textarea{min-height:120px;resize:vertical}
.zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:1rem;color:var(--tinte-2)}
.zustimmung input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--adria)}
.versteckt{position:absolute;left:-9999px}
@media (max-width:900px){.kontakt{grid-template-columns:1fr}}
@media (max-width:520px){.kontakt-wege{grid-template-columns:1fr}}

/* FUSS */
.fuss{padding:64px var(--rand) calc(var(--ruf-h) + 40px);padding-bottom:calc(var(--ruf-h) + 40px + env(safe-area-inset-bottom));background:var(--nacht);color:rgba(255,255,255,.86)}
.fuss-innen{max-width:var(--breit);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 36px}
.fuss-marke{display:flex;align-items:center;gap:16px}
.fuss-marke img{width:150px;height:150px;border-radius:50%;background:#fff;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.fuss-marke p{margin:0;font:300 2rem/1.25 var(--anzeige);color:#fff}
.fuss-marke span{display:block;font:400 1rem var(--text);color:rgba(255,255,255,.8);margin-top:6px}
.fuss-links{display:flex;flex-wrap:wrap;gap:4px 20px}
.fuss-links a{color:#fff;text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.fuss-lied{min-height:46px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font:600 .92rem var(--text);cursor:pointer}
.fuss-lied .pause-txt{display:none}.fuss-lied[aria-pressed="true"] .spielen-txt{display:none}.fuss-lied[aria-pressed="true"] .pause-txt{display:inline}
.schutz{max-width:var(--breit);margin:26px auto 0;font-size:.86rem;color:rgba(255,255,255,.72)}

/* KASSE */
.kasse{border:0;padding:0;width:min(940px,100vw);max-width:100vw;height:min(92vh,980px);height:min(92svh,980px);max-height:100vh;max-height:100svh;border-radius:26px;overflow:hidden;background:var(--papier);box-shadow:0 40px 120px -20px rgba(0,0,0,.6)}
.kasse[open]{display:flex;flex-direction:column}
.kasse::backdrop{background:rgba(var(--dunkel-rgb),.62);-webkit-backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kasse-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 22px;background:var(--nacht);color:#fff}
.kasse-kopf b{display:block;font:300 1.3rem var(--anzeige)}
.kasse-kopf span{font-size:.88rem;color:rgba(255,255,255,.84)}
.kasse-zu{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;cursor:pointer;flex:none}
.kasse-hinweis{margin:0;padding:10px 22px;font-size:.88rem;background:#FFF4DB;color:#5A3D0A}
.kasse iframe{flex:1;width:100%;border:0;background:#fff}
@media (max-width:700px){.kasse{width:100vw;height:100vh;height:100svh;border-radius:0}}

/* RUFLEISTE (Telefon) */
.rufleiste{position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--ruf-h) + env(safe-area-inset-bottom));padding:8px 10px calc(8px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px;background:var(--nacht);border-top:1px solid rgba(255,255,255,.12)}
.rufleiste a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:50px;min-width:0;padding:0 6px;white-space:nowrap;border-radius:999px;text-decoration:none;font:600 1.02rem var(--text);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.rufleiste a svg{width:19px;height:19px}
.rufleiste .bu{background:linear-gradient(135deg,var(--signal) 0%,var(--signal-tief) 100%);border-color:rgba(255,255,255,.25)}
@media (min-width:1181px){.rufleiste{display:none}:root{--ruf-h:0px}}

/* ASSISTENT (Bausteinlager, Farben nachgerechnet) */
.as-knopf{transition:opacity .3s;position:fixed;right:16px;bottom:calc(var(--ruf-h) + 16px);z-index:70;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--nacht-2),var(--nacht-3));box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 16px 36px -12px rgba(var(--dunkel-rgb),.7);display:grid;place-items:center}
.as-knopf svg{width:28px;height:28px}
.as-knopf .zu{display:none}.as-knopf.-offen .auf{display:none}.as-knopf.-offen .zu{display:block}
.as-fenster{position:fixed;right:16px;bottom:calc(var(--ruf-h) + 88px);z-index:69;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - var(--ruf-h) - 110px));display:none;flex-direction:column;overflow:hidden;background:#fff;border-radius:22px;box-shadow:0 30px 80px -30px rgba(var(--dunkel-rgb),.6);border:1px solid var(--linie)}@supports (height:100svh){.as-fenster{max-height:min(620px,calc(100svh - var(--ruf-h) - 110px))}}
.as-fenster.-offen{display:flex}
.as-kopf{padding:12px 16px;background:var(--nacht);color:#fff;font:300 1.15rem var(--anzeige);display:flex;align-items:center;gap:10px}
.as-kopf img{width:40px;height:40px;border-radius:50%;background:#fff}
.as-kopf small{display:block;font:500 .78rem var(--text);color:rgba(255,255,255,.82)}
.as-verlauf{flex:1;min-height:140px;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--kalk)}
@media (max-height:620px){.as-verlauf{min-height:96px}}
.as-b{max-width:88%;padding:11px 15px;border-radius:16px;font-size:1.02rem;line-height:1.45;white-space:pre-line}
.as-b.-ich{align-self:flex-end;background:var(--nacht);color:#fff;border-bottom-right-radius:6px}
.as-b.-sc{align-self:flex-start;background:#fff;border:1px solid var(--linie);color:var(--tinte);border-bottom-left-radius:6px}
.as-b a{color:var(--adria);font-weight:600}
.as-vorschlaege{display:flex;gap:8px;overflow-x:auto;padding:10px 14px 4px;white-space:nowrap;scrollbar-width:none;background:#fff}
.as-vorschlaege::-webkit-scrollbar{display:none}
.as-vorschlaege button{flex:none;min-height:40px;padding:.45em .9em;border-radius:999px;border:1px solid var(--linie);background:var(--kalk);font:600 .85rem var(--text);color:var(--nacht);cursor:pointer}
.as-eingabe{display:flex;gap:8px;padding:10px 12px 12px;background:#fff}
.as-eingabe input{flex:1;min-height:46px;padding:.6em .9em;border-radius:999px;border:1px solid rgba(var(--marke-rgb),.2);font:inherit;font-size:1rem;min-width:0}
.as-eingabe button{min-width:46px;min-height:46px;border-radius:50%;border:0;background:var(--nacht);color:#fff;cursor:pointer;display:grid;place-items:center}
.as-eingabe button svg{width:20px;height:20px}

/* EINBLENDEN: threshold 0, rootMargin -12 %, Endzustand transform:none */
.ein{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--v,0s),transform .9s cubic-bezier(.2,.7,.2,1) var(--v,0s)}
.ein.-da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.ein{opacity:1;transform:none;transition:none}.balken i::after{transition:none}[aria-pressed="true"] .wellen i{animation:none}}

/* UNTERSEITEN */
.seite{max-width:860px;margin:0 auto;padding:calc(var(--kopf-h) + 40px) var(--rand) 80px}
.seite h1{font-size:clamp(38px,4vw + 14px,60px);margin-bottom:.5em}
.seite h2{font-size:clamp(24px,1.5vw + 16px,32px);margin:1.6em 0 .5em}
.kopf.-unterseite{color:var(--nacht);background:var(--papier);box-shadow:0 1px 0 var(--linie)}
.kopf.-unterseite::before{opacity:0}

@media (max-width:360px){.rufleiste a svg{display:none}.rufleiste a{font-size:.9rem}}
@media (max-width:640px) and (max-height:700px){.hero-lead{display:none}.hero h1{margin-bottom:.45em}}

.kasse-hinweis a{color:#5A3D0A;font-weight:600;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:6px 0}
.angebot .a-name{flex:1 1 auto}
.angebot .a-name b{white-space:nowrap}
.angebot .a-name small,.angebot .a-preis small{display:block;line-height:1.4}
.angebot .a-name small span,.angebot .a-preis small span{display:block}
.angebot .a-preis{flex:0 1 auto;max-width:60%}
.angebot .a-preis b{white-space:nowrap}
.angebot .a-name small span{white-space:nowrap}
/* Laufband „Lage und Ausstattung“ (27.10.2026, Bauart aus dem Bausteinlager) */
.fakten{border-bottom:1px solid var(--linie)}
.band{overflow:hidden;padding:28px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.band-spur{display:flex;width:max-content;animation:bandLauf 60s linear infinite}
@media (hover:hover) and (pointer:fine){.band:hover .band-spur{animation-play-state:paused}}
.band-reihe{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:none}
.band-reihe li{display:flex;align-items:baseline;gap:10px;padding:0 30px 0 0;white-space:nowrap}
.band-reihe li::before{content:"";flex:none;align-self:center;width:8px;height:8px;margin-right:22px;border-radius:50%;background:var(--gold)}
.band-reihe b{font:300 2.1rem/1.15 var(--anzeige);color:var(--nacht)}
.band-reihe span{font-size:1.08rem;color:var(--tinte-2)}
@keyframes bandLauf{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:600px){.band{padding:20px 0}.band-reihe li{padding:0 22px 0 0}.band-reihe li::before{margin-right:16px}.band-reihe b{font-size:1.6rem}}
/* 31.10.: Laufband läuft auf jedem Handy, auch mit „Bewegung reduzieren“ (Matze: am Handy immer) */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){.hero-schleier{background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.5) 0%,rgba(var(--dunkel-rgb),.28) 18%,rgba(var(--dunkel-rgb),.5) 42%,rgba(var(--dunkel-rgb),.88) 100%),linear-gradient(90deg,rgba(var(--dunkel-rgb),.55) 0%,rgba(var(--dunkel-rgb),.25) 60%,rgba(var(--dunkel-rgb),.08) 100%)}}

/* ====================== V2 (28.10.2026): größer, mehr Bewegung, Original-Logo, Anflüge, Galerie, Partner ====================== */
/* KOPF mit dem Original-Emblem der Villa (2022_04_Logo-Villa-Olivija.png, unverändert) */
.marke{gap:12px;position:relative;flex:0 1 auto;min-width:0}
.kopf-rechts{flex:none}
.marke-emblem{flex:none;width:62px;height:62px;border-radius:50%;background:#fff;overflow:hidden;box-shadow:0 10px 24px -10px rgba(0,0,0,.55);display:block}
.marke-emblem img{width:100%;height:100%}
.marke-name{display:flex;flex-direction:column;min-width:0}
.marke-name b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marke-name b{font:300 1.75rem/1 var(--anzeige);font-style:italic;font-weight:300}
.marke-name small{font:600 12.5px/1.2 var(--text);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.kopf.-fest .marke-name small,.kopf.-unterseite .marke-name small{color:var(--gold-tief)}
.entwurf{position:absolute;left:-4px;bottom:-5px;width:70px;text-align:center;font:600 12.5px/1.35 var(--text);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--signal);border-radius:6px;padding:0 2px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.kopf:not(.-fest):not(.-unterseite) .marke-name b{text-shadow:0 2px 14px rgba(0,0,0,.45)}
@media (max-width:520px){.marke-emblem{width:52px;height:52px}.marke-name b{font-size:1.45rem}.marke-name small{display:none}.entwurf{left:-6px;width:64px}.kopf{gap:8px}}
@media (max-width:340px){.marke-name b{font-size:1.2rem}}

/* AUFTAKT: Emblem groß, Zeilen fahren hoch */
.hero-emblem{display:block;width:clamp(84px,min(10vw + 30px,15vh),176px);height:auto;border-radius:50%;background:#fff;margin:0 0 22px;box-shadow:0 26px 60px -24px rgba(0,0,0,.7),0 0 0 6px rgba(255,255,255,.18);animation:emblemAuf 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes emblemAuf{from{opacity:0;transform:scale(.55) rotate(-30deg)}to{opacity:1;transform:none}}
.h1-auf .z{display:block;overflow-y:clip;overflow-x:visible;padding-bottom:.1em;margin-bottom:-.1em}
.h1-auf .z>*{display:inline-block;animation:zeileAuf 1.05s cubic-bezier(.2,.8,.2,1) .25s backwards}
.h1-auf .z+.z>*{animation-delay:.4s}
@keyframes zeileAuf{from{transform:translateY(108%)}to{transform:none}}
.auf{animation:aufTauch .9s cubic-bezier(.2,.8,.2,1) var(--v,0s) backwards}
@keyframes aufTauch{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-weiter{display:none}
@media (min-width:1181px) and (min-height:840px){
  .hero{padding-bottom:128px}
  .hero-weiter{position:absolute;left:0;right:0;bottom:26px;margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;text-decoration:none;font:600 .9rem var(--text);letter-spacing:.24em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.6);min-height:44px}
  .hero-weiter i{display:block;width:2px;height:46px;border-radius:2px;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0));animation:weiterLinie 2.2s ease-in-out infinite;transform-origin:top}
}
@keyframes weiterLinie{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (max-width:640px) and (max-height:760px){.hero-emblem{width:84px;margin-bottom:14px}}

/* ÜBERSCHRIFTEN: Wörter fahren einzeln hoch (Endzustand transform:none) */
.worte .w{display:inline-block;overflow-y:clip;overflow-x:visible;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.worte .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.05s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.worte.-da .w>span{transform:none}

/* WOHNUNGEN: Auswahl, Anflug, Wohnungsblock */
.wohnungen-bereich{position:relative}
.abschnitt.-schmal{padding-bottom:clamp(40px,5vw,70px)}

@keyframes radRollen{0%{opacity:0;transform:translateY(-2px)}40%{opacity:1}100%{opacity:0;transform:translateY(9px)}}

.wohnung-block{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(26px,4.5vw,76px);align-items:center;max-width:var(--breit);margin:0 auto;padding:clamp(70px,9vw,150px) var(--rand) clamp(90px,11vw,170px)}
.wohnung-block[data-wohnung="top2"]{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr)}
.wohnung-block[data-wohnung="top2"] .wb-galerie{order:2}
.wb-galerie{min-width:0}
.wb-spur{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:34px;scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:0 60px 100px -56px rgba(var(--marke-rgb),.7);background:#d8dee2}
.wb-spur::-webkit-scrollbar{display:none}
.wb-bild{flex:0 0 100%;border:0;padding:0;margin:0;cursor:zoom-in;scroll-snap-align:start;background:transparent;display:block;overflow:hidden}
.wb-bild img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.wb-bild:hover img{transform:scale(1.04)}}
.wb-steuer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.pfeil{flex:none;width:60px;height:60px;border-radius:50%;border:1px solid rgba(var(--marke-rgb),.18);background:#fff;color:var(--nacht);font:300 2.1rem/1 var(--anzeige);cursor:pointer;box-shadow:0 14px 30px -16px rgba(var(--marke-rgb),.5);display:grid;place-items:center;padding:0 0 4px}
@media (hover:hover) and (pointer:fine){.pfeil:hover{background:var(--nacht);color:#fff}}
.wb-zahl{font:300 1.5rem var(--anzeige);color:var(--tinte-2);font-variant-numeric:tabular-nums}
.wb-zahl b{font-weight:300;color:var(--nacht)}
.wb-titel{font-size:clamp(52px,5vw + 12px,104px);line-height:.95;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:.3em}
.wb-titel span{font:600 1.15rem var(--text);letter-spacing:.06em;color:var(--tuerkis-tief)}
.wb-satz{font-size:clamp(19px,.6vw + 16px,24px);line-height:1.5;color:var(--tinte)}
.eckdaten{list-style:none;margin:0 0 1.1em;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.eckdaten li{font:600 1rem var(--text);padding:.55em 1.05em;border-radius:999px;background:rgba(var(--marke-rgb),.07);color:var(--nacht)}
.ausstattung{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.ausstattung li{position:relative;padding-left:28px;font-size:1rem;line-height:1.4;color:var(--tinte-2)}
.ausstattung li::before{content:"";position:absolute;left:2px;top:.32em;width:13px;height:7px;border-left:2.5px solid var(--tuerkis-tief);border-bottom:2.5px solid var(--tuerkis-tief);transform:rotate(-45deg)}
.preis{margin:0 0 20px}
.preis b{display:block;font:300 clamp(30px,1.6vw + 18px,44px)/1.15 var(--anzeige);color:var(--nacht)}
.preis small{font-size:.95rem;color:var(--tinte-2)}
@media (max-width:1000px){.wohnung-block,.wohnung-block[data-wohnung="top2"]{grid-template-columns:1fr}.wohnung-block[data-wohnung="top2"] .wb-galerie{order:0}}
@media (max-width:520px){.ausstattung{grid-template-columns:1fr}.wb-spur{border-radius:24px}.wohnung-block .knopf{width:100%}}

/* GALERIE */
.galerie-bereich{background:linear-gradient(180deg,var(--papier),var(--grund-2))}
.reiter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.reiter-k{min-height:54px;padding:0 1.35em;border-radius:999px;border:1px solid rgba(var(--marke-rgb),.18);background:#fff;font:600 1.04rem var(--text);color:var(--nacht);cursor:pointer;transition:background .25s,color .25s}
.reiter-k small{font:500 .92rem var(--text);color:var(--tinte-2);margin-left:4px}
.reiter-k.-an{background:var(--nacht);border-color:var(--nacht);color:#fff}
.reiter-k.-an small{color:rgba(255,255,255,.8)}
.gal-raster{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,250px);grid-auto-flow:dense;gap:clamp(8px,1vw,16px)}
.gal-bild{position:relative;border:0;padding:0;margin:0;border-radius:22px;overflow:hidden;cursor:zoom-in;background:#cfd8de;display:block}
.gal-bild.-gross{grid-column:span 2;grid-row:span 2}
.gal-bild.-weg{display:none}
.gal-bild img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.gal-text{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font:600 1rem/1.3 var(--text);color:#fff;text-align:left;background:linear-gradient(rgba(var(--dunkel-rgb),0),rgba(var(--dunkel-rgb),.82));opacity:0;transition:opacity .35s}
.gal-bild.-gross .gal-text{opacity:1}
@media (hover:hover) and (pointer:fine){.gal-bild:hover img{transform:scale(1.07)}.gal-bild:hover .gal-text{opacity:1}}
.gal-bild.-neu{animation:galAuf .8s cubic-bezier(.2,.8,.2,1) var(--v,0s) backwards}
@keyframes galAuf{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
.gal-mehr{display:flex;justify-content:center;margin-top:36px}
.gal-mehr[hidden]{display:none}
@media (max-width:760px){.gal-raster{grid-template-columns:1fr 1fr;grid-auto-rows:44vw}.reiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--rand) * -1) 24px;padding:0 var(--rand)}.reiter::-webkit-scrollbar{display:none}.reiter-k{flex:none}.gal-bild{border-radius:16px}}

/* BILD GROSS */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100vh;height:100svh;max-width:100vw;max-height:100vh;max-height:100svh;background:rgba(var(--dunkel-rgb),.97);color:#fff;overflow:hidden}
.lb[open]{display:grid;place-items:center}
.lb::backdrop{background:rgba(var(--dunkel-rgb),.9)}
.lb-buehne{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 84px;touch-action:pan-y}
.lb-buehne img{display:block;max-width:calc(100vw - 168px);max-height:calc(100vh - 150px);max-height:calc(100svh - 150px);width:auto;height:auto;border-radius:16px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8)}
.lb-buehne img.-wechsel{animation:lbAuf .4s ease both}
@keyframes lbAuf{from{opacity:0}to{opacity:1}}
.lb-buehne figcaption{font:300 clamp(20px,1vw + 14px,28px)/1.3 var(--anzeige);text-align:center;color:#fff;max-width:900px}
.lb-zahl{position:absolute;top:22px;left:24px;margin:0;font:600 1rem var(--text);letter-spacing:.12em;color:rgba(255,255,255,.85)}
.lb-zu{position:absolute;top:12px;right:14px;width:58px;height:58px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lb-pfeil{position:absolute;top:50%;margin-top:-32px;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:300 2.4rem/1 var(--anzeige);cursor:pointer;padding:0 0 5px}
.lb-pfeil.-l{left:14px}.lb-pfeil.-r{right:14px}
@media (max-width:760px){
  .lb-buehne{padding:0 10px}
  .lb-buehne img{max-width:calc(100vw - 20px);max-height:calc(100vh - 200px);max-height:calc(100svh - 200px);border-radius:12px}
  .lb-pfeil{top:auto;bottom:22px;margin:0}
  .lb-pfeil.-l{left:22px}.lb-pfeil.-r{right:22px}
}

/* PARTNER */
.partner-bereich{position:relative;isolation:isolate;color:#fff;background:var(--nacht);overflow:hidden;overflow:clip}
.partner-bereich::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;z-index:-1;background:radial-gradient(55vw 50vh at 10% 10%,rgba(var(--akzent2-rgb),.26),transparent 60%),radial-gradient(50vw 50vh at 90% 80%,rgba(var(--akzent-rgb),.22),transparent 60%),var(--nacht)}
.partner-bereich h2,.partner-bereich h3{color:#fff}
.partner-bereich .lead{color:rgba(255,255,255,.88)}
.p-boot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-radius:38px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);margin-bottom:clamp(20px,3vw,36px)}
.p-boot-film{position:relative;min-height:460px;background:var(--marke-2)}
.p-boot-film video,.p-boot-film img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.p-boot-film img{transition:opacity .6s}
.p-boot-film.-laeuft img{opacity:0}
.p-boot-text{padding:clamp(28px,4vw,60px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.p-boot-text h3{font-size:clamp(36px,3.2vw + 12px,70px);line-height:1.02;margin-bottom:.35em}
.p-boot-text p:not(.kicker){font-size:1.1rem;color:rgba(255,255,255,.9);margin-bottom:1.4em}
.p-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px)}
.p-karte{border-radius:34px;overflow:hidden;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column}
.p-bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--marke-2)}
.p-bild img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover}
.p-bild-2{animation:wechselBild 12s ease-in-out infinite}
@keyframes wechselBild{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.p-text{padding:clamp(24px,3vw,44px)}
.p-text h3{font-size:clamp(32px,2.2vw + 14px,54px);margin-bottom:.35em}
.p-text p:not(.kicker){font-size:1.06rem;color:rgba(255,255,255,.88)}
.p-tel{display:inline-flex;align-items:center;min-height:48px;color:var(--gold);font-weight:600;font-size:1.1rem;text-decoration:none;border-bottom:1.5px solid rgba(var(--akzent-rgb),.55)}
.p-technik{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:clamp(30px,4vw,52px);padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.p-technik-titel{flex:0 0 100%;margin:0 0 4px;font:600 .9rem var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.p-logo{flex:1 1 280px;display:flex;align-items:center;gap:16px;padding:12px 20px 12px 12px;border-radius:24px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);text-decoration:none;color:#fff;min-height:92px}
.p-logo img{flex:none;width:68px;height:68px;object-fit:contain;border-radius:16px;background:#fff}
.p-logo b{display:block;font:300 1.4rem/1.2 var(--anzeige)}
.p-logo small{display:block;font-size:.95rem;color:rgba(255,255,255,.8)}
@media (max-width:900px){.p-boot-text .knopf{width:100%}.p-boot{grid-template-columns:1fr}.p-boot-film{min-height:0;aspect-ratio:16/10}.p-raster{grid-template-columns:1fr}}

/* GÄSTE: Pfeile, BRIEF: Emblem */
.stimmen-rahmen{position:relative}
.pfeile{display:flex;gap:12px;justify-content:flex-end;margin-top:4px}
.brief{margin-top:40px}
.brief .hand{padding-right:clamp(84px,9vw,130px)}
.brief-emblem{position:absolute;top:-52px;right:clamp(20px,4vw,48px);width:clamp(96px,8vw,128px);height:auto;border-radius:50%;background:#fff;box-shadow:0 24px 50px -20px rgba(0,0,0,.6);animation:schweben 7s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.brief-bild img{will-change:transform}

/* UNTERSEITEN: Emblem im Kopf */
.kopf.-unterseite .marke-emblem{box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}

/* REDUZIERTE BEWEGUNG: alles lesbar, nichts läuft von selbst */
@media (prefers-reduced-motion:reduce){
  .hero-emblem,.h1-auf .z>*,.auf,.gal-bild.-neu,.lb-buehne img.-wechsel{animation:none}
  .worte .w>span{transform:none;transition:none}
  .p-bild-2,.brief-emblem,.hero-weiter i{animation:none}
}
.gal-raster.-wartet .gal-bild{opacity:0}
/* Großer Bildschirm: Emblem rechts oben im Film, damit Suchleiste und Text im ersten Bild bleiben */
@media (min-width:901px){
  .hero-emblem{position:absolute;right:var(--rand);top:calc(var(--kopf-h) + 44px);width:clamp(150px,13vw,230px);margin:0}
}
@media (min-width:901px) and (max-height:620px){.hero-emblem{display:none}}
@media (max-width:640px) and (max-height:700px){.hero-emblem{display:none}}
@media (max-width:520px){.entwurf{left:-5px;width:62px;letter-spacing:0}}
@media (max-width:360px){.hero .kicker{letter-spacing:.12em;font-size:.8rem}.such-feld .ph{white-space:nowrap;font-size:1rem}.such-feld{padding:8px 10px}}
.lb-buehne img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}

/* Auftakt: Rufleiste (bis 1180 px) nicht über der Suchleiste; niedrige Querformate kompakter */
@media (max-width:1180px){.hero{padding-bottom:calc(var(--ruf-h) + clamp(24px,4vh,56px))}}
@media (min-width:641px) and (max-height:820px){.hero h1{font-size:clamp(48px,min(8vw,11.2vh),150px)}.hero-lead{font-size:clamp(18px,.6vw + 13px,21px);margin-bottom:1.2em}}
@media (max-width:640px) and (max-height:780px){.hero-lead{display:none}.hero-emblem{width:76px;margin-bottom:12px}.hero h1{margin-bottom:.45em}}
.hero .kicker{background:rgba(var(--dunkel-rgb),.74)}
.nb{white-space:nowrap}.lb-buehne:focus{outline:none}
.p-boot-text .knopf{flex-wrap:wrap;row-gap:2px;text-align:center}

/* ====================== FASSUNG 3 (28.10.2026): Logo-Auftakt, Anflug-Karten, Bilderfilm, Boot im Vollbild ====================== */
/* AUFTAKT: Das Emblem öffnet sich zur Bucht (einmal pro Besuch). Notaus nach 4 s, falls das Skript fehlt. */
.intro{display:none}
html.intro-an .intro{display:block;position:fixed;top:0;right:0;bottom:0;left:0;inset:0;z-index:300;pointer-events:none;animation:introNotaus .01s linear 4s forwards}
@keyframes introNotaus{to{visibility:hidden;opacity:0}}
.intro-flaeche{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:radial-gradient(circle at 50% 46%,#0A3A5E 0%,var(--nacht) 55%,var(--nacht-3) 100%);
 -webkit-mask-image:radial-gradient(circle at 50% 46%,transparent var(--loch,0px),#000 calc(var(--loch,0px) + 1px));mask-image:radial-gradient(circle at 50% 46%,transparent var(--loch,0px),#000 calc(var(--loch,0px) + 1px))}
.intro-emblem{position:absolute;left:50%;top:46%;width:min(46vw,250px);height:auto;margin:calc(min(46vw,250px) / -2) 0 0 calc(min(46vw,250px) / -2);border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgba(255,255,255,.14),0 0 0 18px rgba(var(--akzent-rgb),.16),0 40px 90px -20px rgba(0,0,0,.7);opacity:0}
.intro.-bereit .intro-emblem{animation:introEmblem .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes introEmblem{from{opacity:0;transform:scale(.45) rotate(-40deg)}to{opacity:1;transform:none}}
html.intro-an .hero-emblem{animation:none}
html.intro-an:not(.intro-ende) .hero-emblem{opacity:0}
html.intro-an .hero-emblem{transition:opacity .4s}
html.intro-an .h1-auf .z>*{animation-delay:1.5s}
html.intro-an .h1-auf .z+.z>*{animation-delay:1.65s}
html.intro-an .auf{animation-delay:calc(var(--v,0s) + 1.4s)}
.zz{font-variant-numeric:tabular-nums}

/* BILDERFILM: beim Scrollen ziehen die Bilder seitlich vorbei (ohne Skript: zum Wischen) */
.bildfilm{position:relative}
.bf-buehne{position:relative;padding:calc(var(--kopf-h) + 40px) 0 30px;overflow:hidden}
.bf-kopf{width:100%;max-width:var(--breit);margin:0 auto 3.5vh;padding:0 var(--rand)}
.bf-kopf h2{margin:0}
.bf-spur{display:flex;align-items:center;gap:clamp(14px,2vw,34px);padding:4vh var(--rand);height:52vh;height:52vh;height:52svh;overflow-x:auto;scrollbar-width:none}
.bf-spur::-webkit-scrollbar{display:none}
.bf-bild{flex:none;margin:0;height:100%;aspect-ratio:var(--r);border-radius:30px;overflow:hidden;transform:translateY(var(--y));box-shadow:0 44px 80px -44px rgba(var(--marke-rgb),.7);background:#cfd8de}
.bf-bild img{width:100%;height:100%;object-fit:cover}
.bf-leiste{display:none}
.bildfilm.-aktiv{height:var(--bf-h,300vh)}
.bildfilm.-aktiv .bf-buehne{position:sticky;top:0;height:100vh;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:var(--kopf-h) 0 0}
.bildfilm.-aktiv .bf-spur{overflow:visible;will-change:transform}
.bildfilm.-aktiv .bf-leiste{display:block;width:min(420px,60vw);height:4px;margin:5vh auto 0;border-radius:4px;background:rgba(var(--marke-rgb),.12);overflow:hidden}
.bf-leiste i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--tuerkis),var(--gold));transform:scaleX(0);transform-origin:left}
@media (max-width:760px){.bf-spur{height:42vh;height:42vh;height:42svh}.bf-bild{border-radius:20px}}
.abschnitt.-galerie{padding-top:clamp(30px,4vw,60px)}
.partner-bereich>.abschnitt:first-child{padding-bottom:clamp(36px,5vw,70px)}
.abschnitt.-partner2{padding-top:clamp(36px,5vw,70px)}

/* BOOT: Vollbild, zieht beim Scrollen von der Karte zum ganzen Bild auf */
.p-boot{display:block;position:relative;width:100%;margin:0;min-height:92vh;min-height:92vh;min-height:92svh;border:0;border-radius:0;background:var(--marke-2);overflow:hidden}
.p-boot .p-boot-film{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;min-height:0;aspect-ratio:auto}
.p-boot-schleier{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.2) 25%,rgba(var(--dunkel-rgb),.88) 100%),linear-gradient(90deg,rgba(var(--dunkel-rgb),.6) 0%,rgba(var(--dunkel-rgb),0) 70%)}
.p-boot .p-boot-text{position:absolute;left:0;right:0;bottom:0;display:block;padding:0 max(var(--rand),calc((100vw - var(--breit)) / 2 + var(--rand))) clamp(44px,9vh,100px)}
.p-boot .p-boot-text>*{max-width:780px}
.p-boot .p-boot-text h3{font-size:clamp(46px,6vw + 8px,124px);line-height:.98;text-shadow:0 2px 30px rgba(var(--dunkel-rgb),.6)}
.p-boot .p-boot-text p:not(.kicker){font-size:clamp(18px,.6vw + 15px,23px);text-shadow:0 1px 14px rgba(var(--dunkel-rgb),.7)}
@media (max-width:900px){.p-boot{min-height:96vh;min-height:96svh}.p-boot .p-boot-text{padding-bottom:calc(var(--ruf-h) + 34px)}}
@media (prefers-reduced-motion:reduce){.bildfilm.-aktiv{height:auto}.intro{display:none!important}}
.wert b .zz{font-size:inherit;color:inherit;font-weight:inherit}
.intro-emblem{will-change:transform,opacity}.intro-flaeche{will-change:-webkit-mask-image,mask-image}



/* ====================== FASSUNG 6 (30.10.2026): ruhiger Auftakt, Glas-Buchung auf echtem Foto, Mindestaufenthalt 6, Anfass-Bausteine ====================== */
/* Grund: weniger Lichtfelder, nur noch die Hausfarbe – „zu bunt“ war Geralds Rückmeldung */
body::before{background:
 radial-gradient(55vw 45vh at 92% 8%,rgba(var(--akzent-rgb),.10),transparent 62%),
 radial-gradient(50vw 45vh at 4% 55%,rgba(var(--akzent2-rgb),.08),transparent 62%),var(--grund)}
.entwurf{background:#C8414D}  /* Entwurfs-Plakette bleibt rot, ist kein Gestaltungsmittel */
.kicker{color:var(--akzent2-tief)}.kicker.-hell{color:var(--akzent-hell)}
.tag-himmel{background:linear-gradient(90deg,var(--akzent-hell) 0%,#E3EBEF 26%,var(--akzent2-hell) 54%,var(--akzent) 80%,var(--marke-2) 100%)}
.tag-sonne .kern{background:radial-gradient(circle at 38% 34%,#FFF4D6,var(--akzent) 56%,var(--akzent-tief));box-shadow:0 0 0 6px rgba(var(--akzent-rgb),.22),0 0 30px 8px rgba(var(--akzent-rgb),.45),0 8px 16px -4px rgba(var(--akzent-tief-rgb),.5)}
.balken i::after{background:var(--akzent2)}
.note-zahl{background-image:linear-gradient(160deg,var(--akzent-tief),var(--akzent) 60%,var(--akzent-tief))}
.bf-leiste i{background:var(--akzent)}
.wb-titel span,.ausstattung li::before{color:var(--akzent2-tief);border-color:var(--akzent2-tief)}
.partner-bereich::before{background:radial-gradient(55vw 50vh at 10% 10%,rgba(var(--akzent2-rgb),.22),transparent 60%),radial-gradient(50vw 50vh at 90% 80%,rgba(var(--akzent-rgb),.16),transparent 60%),var(--marke)}
.p-tel{color:var(--akzent-hell);border-bottom-color:rgba(var(--akzent-rgb),.55)}
.rufleiste .bu{background:linear-gradient(135deg,var(--signal),var(--signal-tief));color:var(--signal-text)}

/* Tastknopf (Baustein) in den Farben der Welt; Schrift auf Gold dunkel, auf Terrakotta/Türkis weiß */
.tastknopf{--tk-text:var(--signal-text);--tk-schatten:rgba(var(--dunkel-rgb),.35);font-family:var(--text);font-size:1.06rem}
.tastknopf.-hell{--tk-text:var(--marke)}
.tastknopf.-breit{width:100%;display:flex}.tastknopf.-breit .tk-flaeche{width:100%}
.suchleiste .tastknopf{--tk-r:20px;--tk-tiefe:5px;margin-bottom:5px;font-size:1.12rem}
.suchleiste .tastknopf .tk-flaeche{min-height:65px;padding:0 1.8em}
.menue .tastknopf{margin-left:8px;margin-bottom:4px}
.wohnung-block .tastknopf{margin-top:4px}
.tastknopf[disabled] .tk-flaeche{background:#7d8893;background-image:none;box-shadow:none}.tastknopf[disabled]::before{background:#5a6670}

/* AUFTAKT: erst das Standbild (steht sofort), der Film blendet weich darüber – kein Sprung, kein Warten */
.hero-film video{opacity:0;transition:opacity 1.8s ease}
.hero-film.-laeuft video{opacity:1}
.hero-poster{transition:opacity 1.8s ease .3s}
.hero-schleier{background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.42) 0%,rgba(var(--dunkel-rgb),.10) 24%,rgba(var(--dunkel-rgb),.18) 45%,rgba(var(--dunkel-rgb),.78) 100%),linear-gradient(90deg,rgba(var(--dunkel-rgb),.62) 0%,rgba(var(--dunkel-rgb),.32) 50%,rgba(var(--dunkel-rgb),0) 80%)}
.such-feld span{color:var(--akzent-hell)}

/* WOHNUNGEN: Kartenfächer mit den echten Fotos */
.faecher{--fk-tinte:var(--tinte);--fk-tinte-2:var(--tinte-2);--fk-akzent:var(--akzent2-tief);--fk-papier:var(--papier);--fk-b:clamp(150px,42vw,320px);margin-top:10px}
.fk-gross{color:var(--tinte)}
.fk-gross a{display:inline-flex;align-items:center;min-height:46px;padding:0 1.2em;border-radius:999px;background:var(--marke);color:#fff;text-decoration:none;font-weight:600}

/* BUCHEN: echtes Foto der Bucht, darauf helle Glaskarten (Apple-Stil) statt der Blaufläche */
.buchen-bereich{background:var(--marke-2);color:var(--tinte)}
.buchen-bild img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.buchen-bereich::before{background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.70) 0%,rgba(var(--dunkel-rgb),.46) 38%,rgba(var(--dunkel-rgb),.40) 100%)}
.buchen-bereich .lead{color:#fff;text-shadow:0 1px 14px rgba(var(--dunkel-rgb),.6)}
.buchen-bereich h2{text-shadow:0 2px 24px rgba(var(--dunkel-rgb),.55)}
.buchen-bereich .glas.-dunkel{color:var(--tinte)}
.buchen-bereich .glas.-dunkel::before{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(26px) saturate(1.35);-webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);border-color:rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 30px 70px -30px rgba(var(--dunkel-rgb),.6)}
.buchen-bereich .glas.-dunkel::after{background:linear-gradient(118deg,rgba(255,255,255,.55),transparent 40%,transparent 72%,rgba(255,255,255,.2))}
.kal-titel{color:var(--marke)}
.kal-pfeil{border-color:rgba(var(--marke-rgb),.2);background:rgba(255,255,255,.7);color:var(--marke)}
.monat h4{color:var(--akzent2-tief)}
.tage .wt{color:var(--tinte-2)}
.tage button{color:var(--tinte)}
@media (hover:hover) and (pointer:fine){.tage button:not([disabled]):hover{background:rgba(var(--marke-rgb),.08)}}
.tage button[disabled]{color:rgba(var(--marke-rgb),.3)}
.tage button.-belegt{color:rgba(var(--marke-rgb),.35);text-decoration-color:rgba(var(--signal-rgb),.9)}
.tage button.-im{background:rgba(var(--akzent-rgb),.28)}
.tage button.-an,.tage button.-ab{background:var(--marke);color:#fff}
.kal-legende,.kal-status{color:var(--tinte-2)}
.l-frei{border-color:rgba(var(--marke-rgb),.45)}.l-belegt{background:rgba(var(--marke-rgb),.08);border-color:rgba(var(--signal-rgb),.9)}.l-wahl{background:var(--marke)}
.aus-label{color:var(--akzent2-tief)}
.aus-label small{font-weight:500;letter-spacing:0;text-transform:none;color:var(--tinte-2)}
.aus-zeile b{color:var(--marke)}
.zaehler button{border-color:rgba(var(--marke-rgb),.22);background:rgba(255,255,255,.75);color:var(--marke)}
.zaehler output{color:var(--marke)}
.zaehler.-naechte{flex:1 1 100%}
.angebote .hinweis{color:var(--tinte)}
.angebot{border-color:rgba(var(--marke-rgb),.18);background:rgba(255,255,255,.55)}
.angebot .ring{border-color:rgba(var(--marke-rgb),.45)}
.angebot.-gewaehlt{border-color:var(--marke);background:rgba(255,255,255,.9)}
.angebot.-gewaehlt .ring{border:7px solid var(--marke)}
.angebot .a-name b,.angebot .a-preis b{color:var(--marke)}
.angebot .a-name small,.angebot .a-preis small{color:var(--tinte-2)}
.sicher{color:var(--tinte-2)}
.ablauf li{position:relative;isolation:isolate;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ablauf li>b{background:var(--marke);color:#fff}
.ablauf h3{color:var(--marke)}.ablauf p{color:var(--tinte-2)}

/* BRIEF: Song als Kassette (Baustein), aus bis man drückt */
.brief .kassette{--ks-koerper:var(--marke);--ks-etikett:var(--papier);--ks-akzent:var(--akzent);--ks-tinte:var(--marke);margin:26px 0 0;max-width:420px}

/* KONTAKT: Anfrage mit Senden-Knopf, darunter der Kassenbon als Beleg */
.anfrage-spalte{display:flex;flex-direction:column;gap:26px;min-width:0}
.anfrage-satz{margin:-8px 0 4px;color:var(--tinte-2);font-size:1rem}
.feld.-zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feld.-zwei>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.feld select{width:100%;min-width:0;font:inherit;font-size:1.08rem;padding:.8em 2.4em .8em 1em;border-radius:16px;border:1px solid rgba(var(--marke-rgb),.2);background:rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2346596B' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center/18px;color:var(--tinte);min-height:58px;appearance:none;-webkit-appearance:none}
.kassenbon{--kb-gehaeuse:var(--marke);--kb-breite:320px}
@media (max-width:520px){.feld.-zwei{grid-template-columns:1fr}}
.knopf.-signal{color:var(--signal-text)}.knopf[disabled]{color:#fff}
.suchleiste .tastknopf{grid-column:auto}
@media (max-width:640px){.suchleiste .tastknopf{grid-column:1/-1;display:flex}.suchleiste .tastknopf .tk-flaeche{width:100%;min-height:56px}}
.aus-label small{font-size:12.5px}
.zustimmung a{display:inline-block;padding:10px 0;margin:-10px 0}
.fuss-links a{min-width:44px;justify-content:center}
.zustimmung input{width:24px;height:24px}
/* Prüfkette 30.10.: Kalendertage auch bei 320 px mindestens 44 px breit; Labels auf Glas heller; Kicker auf Fotos in Pille */
@media (max-width:400px){
  .buchen-bereich .abschnitt{padding-left:0;padding-right:0}
  .buchen-bereich .titelzeile,.buchen-bereich .auswahl,.buchen-bereich .ablauf{margin-left:12px;margin-right:12px}
  .buchen-bereich .buchung{gap:14px}
  .kalender{border-radius:20px;padding:12px 2px 12px}
  .tage{gap:0}.kal-kopf,.kal-legende,.kal-status{padding:0 10px}
}
.such-feld span{color:rgba(255,255,255,.9)}
.hero-werte .glas.-dunkel::before{background:rgba(var(--dunkel-rgb),.64)}
.p-boot-text .kicker{display:inline-block;color:#fff;padding:.5em 1.1em;border-radius:999px;background:rgba(var(--dunkel-rgb),.62);border:1px solid rgba(255,255,255,.2)}
.tastknopf[disabled]{--tk-text:#fff}
.ablauf li{background:rgba(255,255,255,.82)}
.ablauf p,.sicher,.kal-legende,.kal-status,.angebot .a-name small,.angebot .a-preis small{color:var(--tinte)}
.tastknopf[disabled] .tk-flaeche{background:#5F6B76}
.hero-werte .glas.-dunkel::before{background:rgba(var(--dunkel-rgb),.74)}
.tage .wt{color:var(--tinte)}
.p-technik-titel{color:var(--akzent-hell)}

/* ====================== RUNDGÄNGE (aus Fassung 4/5, 30.10. zurückgeholt: Gerald will sie – jetzt ohne Autostart, ohne erfundene Flure) ====================== */
/* ====================== FASSUNG 4 (28.10.2026): Rundflug je Wohnung als Video mit Raum-Knöpfen ====================== */
.tour{position:relative;background:var(--nacht-3);color:#fff;padding-bottom:clamp(14px,2vw,26px)}
.tour-buehne{position:relative;width:100%;height:56.25vw;max-height:calc(100vh - var(--kopf-h) - 84px);height:min(56.25vw,calc(100vh - var(--kopf-h) - 84px));height:min(56.25vw,calc(100vh - var(--kopf-h) - 84px));min-height:320px;overflow:hidden;background:var(--nacht-3);isolation:isolate}@supports (height:100svh){.tour-buehne{height:min(56.25vw,calc(100svh - var(--kopf-h) - 84px))}}
.tour-film{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;background:var(--nacht-3) center/contain no-repeat}
.tour-schleier{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.55) 0%,rgba(var(--dunkel-rgb),0) 24%,rgba(var(--dunkel-rgb),0) 52%,rgba(var(--dunkel-rgb),.78) 100%),linear-gradient(90deg,rgba(var(--dunkel-rgb),.42) 0%,rgba(var(--dunkel-rgb),0) 58%)}
.tour-kopf{position:absolute;left:var(--rand);right:var(--rand);top:clamp(14px,2.2vw,30px);display:flex;align-items:center;gap:12px}
.tour-nr{flex:none;font:300 clamp(26px,1.8vw + 14px,44px)/1 var(--anzeige);color:#fff;padding:11px 24px 13px;border-radius:999px;background:rgba(var(--dunkel-rgb),.62);border:1px solid rgba(255,255,255,.22)}
.tour-marke{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(var(--dunkel-rgb),.62);border:1px solid rgba(255,255,255,.22);font:600 .98rem var(--text);color:#fff}
.tour-knopf{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 20px 0 16px;border-radius:999px;background:rgba(var(--dunkel-rgb),.7);border:1px solid rgba(255,255,255,.45);color:#fff;font:600 1rem var(--text);cursor:pointer}
.tour-knopf i{position:relative;flex:none;width:16px;height:18px}
.tour-knopf i::before{content:"";position:absolute;left:2px;top:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.tour.-spielt .tour-knopf i::before{left:1px;width:5px;height:18px;border:0;background:#fff;box-shadow:9px 0 0 #fff}
.tour.-ende .tour-knopf i::before{left:0;top:1px;width:12px;height:12px;border:3px solid #fff;border-right-color:transparent;border-radius:50%;background:none}
@media (hover:hover) and (pointer:fine){.tour-knopf:hover{background:#fff;color:var(--nacht)}.tour-knopf:hover i::before{border-left-color:var(--nacht)}.tour.-spielt .tour-knopf:hover i::before{background:var(--nacht);box-shadow:9px 0 0 var(--nacht)}.tour.-ende .tour-knopf:hover i::before{border-color:var(--nacht);border-right-color:transparent}}
.tour-knopf:focus-visible,.tour-kapitel button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tour-texte{list-style:none;margin:0;padding:0;position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(28px,4.4vw,64px);height:0}
.tour-texte li{position:absolute;left:0;bottom:0;max-width:860px;opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tour-texte li.-an{opacity:1;transform:none}
.tour-texte h3{color:#fff;font-size:clamp(34px,4.4vw + 6px,92px);line-height:1;margin-bottom:.2em;text-shadow:0 2px 30px rgba(var(--dunkel-rgb),.6),0 1px 3px rgba(var(--dunkel-rgb),.45)}
.tour-texte p{margin:0;color:#fff;font-size:clamp(17px,.7vw + 13px,25px);line-height:1.45;max-width:640px;text-shadow:0 1px 18px rgba(var(--dunkel-rgb),.85),0 1px 2px rgba(var(--dunkel-rgb),.6)}
.tour-leiste{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18)}
.tour-leiste i{display:block;height:100%;width:100%;background:var(--akzent);transform:scaleX(0);transform-origin:left}
.tour-unten{max-width:var(--breit);margin:0 auto;padding:14px var(--rand) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.tour-kapitel{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0;padding:4px 0}
.tour-kapitel button{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;font:600 .98rem var(--text);cursor:pointer;transition:background .3s,color .3s}
.tour-kapitel button b{font:700 .8rem var(--text);opacity:.7}
.tour-kapitel button.-an{background:#fff;color:var(--nacht);border-color:#fff}
.tour-kapitel button.-an b{opacity:1}
@media (hover:hover) and (pointer:fine){.tour-kapitel button:not(.-an):hover{background:rgba(255,255,255,.14)}}
.tour-quelle{margin:0;flex:none;font:500 13px/1.3 var(--text);color:rgba(255,255,255,.78)}
/* Handy hochkant: 4:5-Fassung, Texte etwas kleiner */
@media (max-aspect-ratio:4/5){
  .tour-buehne{height:auto;min-height:0;aspect-ratio:3/4}
  .tour-texte{bottom:22px}
  .tour-texte h3{font-size:clamp(30px,7.4vw,44px)}
  .tour-texte p{font-size:clamp(16px,4.1vw,19px)}
}
@media (max-width:520px){.tour-marke{display:none}.tour-knopf{padding:0 16px 0 14px}.tour-unten{padding-top:10px}.tour-quelle{font-size:12.5px}.tour-kapitel{gap:6px}.tour-kapitel button{padding:0 13px;font-size:.94rem;gap:6px}}
@media (prefers-reduced-motion:reduce){.tour-texte li{transition:none;transform:none}}

/* ====================== FASSUNG 5 (28.10.2026): Rundgang durch alle Fotos, Vollbild ====================== */
.tour-voll-knopf{flex:none;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 18px 0 14px;border-radius:999px;background:rgba(var(--dunkel-rgb),.7);border:1px solid rgba(255,255,255,.45);color:#fff;font:600 1rem var(--text);cursor:pointer}
.tour-voll-knopf i{position:relative;flex:none;width:18px;height:18px}
.tour-voll-knopf i::before,.tour-voll-knopf i::after{content:"";position:absolute;width:7px;height:7px;border:2.5px solid #fff}
.tour-voll-knopf i::before{left:0;top:0;border-right:0;border-bottom:0}
.tour-voll-knopf i::after{right:0;bottom:0;border-left:0;border-top:0}
@media (hover:hover) and (pointer:fine){.tour-voll-knopf:hover{background:#fff;color:var(--nacht)}.tour-voll-knopf:hover i::before,.tour-voll-knopf:hover i::after{border-color:var(--nacht)}}
.tour-voll-knopf:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tour-voll{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
@media (max-width:520px){.tour-voll-knopf{width:50px;padding:0;justify-content:center}.tour-voll-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tour-kopf{gap:8px}.tour-knopf{margin-left:auto}}
/* Vollbild (PC, Android, iPad): Bühne füllt den Schirm, Texte bleiben drauf */
.tour-buehne:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.tour-buehne:-webkit-full-screen{width:100vw;height:100vh;aspect-ratio:auto;background:#000}
.tour-buehne:fullscreen .tour-film{object-fit:contain}
.tour-buehne:-webkit-full-screen .tour-film{object-fit:contain}
.tour-buehne:fullscreen .tour-voll-knopf i::before{left:2px;top:2px;border:2.5px solid #fff;border-left:0;border-top:0}
.tour-buehne:fullscreen .tour-voll-knopf i::after{right:2px;bottom:2px;border:2.5px solid #fff;border-right:0;border-bottom:0}
/* Fassung 5: ganz schmale Handys (bis 380 px, z. B. iPhone SE): Abspielen-Knopf nur als Symbol, damit Vollbild-Knopf nicht übersteht */
@media (max-width:380px){.tour-knopf{width:50px;padding:0;justify-content:center;gap:0}.tour-knopf span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tour-nr{padding:9px 16px 11px}.tour-kopf{gap:6px}}

/* Play-Knopf groß auf dem Standbild; verschwindet, sobald der Rundgang einmal gestartet wurde */
.tour-start{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;margin:auto;width:max-content;height:max-content;z-index:3;--tk-r:999px}
.tour-start .tk-flaeche{padding:0 1.6em 0 1.3em;gap:.5em}
.tour-start .tk-flaeche svg{width:1.3em;height:1.3em}
.tour.-gestartet .tour-start{display:none}
.tour:not(.-gestartet) .tour-texte li.-an{opacity:1}
.tour:not(.-gestartet) .tour-kopf .tour-knopf{display:none}
@media (max-width:520px){.tour-start .tk-flaeche{font-size:1rem}}
.tour-quelle{flex:1 1 100%;white-space:normal;max-width:100%}
@media (max-width:360px){.p-boot-text .tastknopf{width:100%;display:flex}.p-boot-text .tastknopf .tk-flaeche{width:100%;flex-wrap:wrap;padding:8px 1em;line-height:1.3}.p-boot-text .tastknopf .nb{white-space:normal}}
/* große Systemschrift am Handy: Suchleiste bleibt im ersten Bild */
@media (max-width:640px){.hero{padding-top:calc(var(--kopf-h) + 10px)}.such-feld{min-height:54px}.such-feld input,.such-feld select,.such-feld .ph{font-size:min(1.14rem,19px)}.such-feld span{font-size:min(.82rem,13px)}.hero .kicker{font-size:min(.8rem,14px);margin-bottom:.7rem}.hero-emblem{margin-bottom:12px}}
/* 31.10.: Kopf-Knopf ohne Menü-Polster, sonst steht die 3D-Kante als Ring um den Knopf */
.menue a.tastknopf{padding:0;min-height:0;background:none}
[data-welt="logo"] .tastknopf:not(.-hell){--tk-farbe:#17687B;--tk-hell:#1F8299;--tk-kante:#0F4E5D}
[data-welt="logo"] .tastknopf:not(.-hell) .tk-flaeche{text-shadow:0 1px 1px rgba(8,40,50,.45)}
.wert.glas.-dunkel::before{background:rgba(var(--dunkel-rgb),.62)}
/* 31.10. (Gerald): Logo nur oben links, ganz sichtbar mit Ringschrift, leicht durchscheinend; Name größer */
.marke-emblem{width:76px;height:76px;background:none;overflow:visible;box-shadow:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.kopf.-unterseite .marke-emblem,.kopf.-fest .marke-emblem{box-shadow:none;filter:drop-shadow(0 6px 14px rgba(var(--dunkel-rgb),.28))}
.marke-name b{font-size:2.3rem}
.marke-name small{font-size:13.5px}
@media (max-width:520px){.marke-emblem{width:60px;height:60px}.marke-name b{font-size:1.85rem}}
@media (max-width:360px){.marke-emblem{width:52px;height:52px}.marke-name b{font-size:1.5rem}}
.hero-emblem{display:none!important}

/* ===== 31.10. Abend (Geralds Wünsche nach dem Telefonat) ===== */
/* Blau unten etwas heller als das Logo-Marineblau */
[data-welt="logo"]{--marke:#264477;--marke-2:#2F5590;--marke-3:#1F3966;--marke-rgb:38,68,119;--dunkel-rgb:31,57,102;--theme:#264477}
/* Drei Wohnungen nebeneinander (Handy untereinander), echtes Foto statt Kartenfächer */
.flug-wahl{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,28px)}
.fw-karte{position:relative;display:block;aspect-ratio:4/5;border-radius:30px;overflow:hidden;text-decoration:none;color:#fff;background:var(--marke);box-shadow:0 50px 90px -50px rgba(var(--dunkel-rgb),.8);isolation:isolate}
.fw-film{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.fw-schleier{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;background:linear-gradient(180deg,rgba(var(--dunkel-rgb),0) 35%,rgba(var(--dunkel-rgb),.88) 100%)}
.fw-text{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:6px}
.fw-text b{font:300 clamp(44px,3.2vw + 14px,72px)/1 var(--anzeige);text-shadow:0 2px 24px rgba(var(--dunkel-rgb),.6)}
.fw-text>span{font:600 1.06rem var(--text);color:var(--akzent-hell);letter-spacing:.02em}
.fw-text small{font-size:1.04rem;line-height:1.45;color:#fff;max-width:30ch}
.fw-text i{font-style:normal;margin-top:12px;align-self:flex-start;min-height:46px;display:inline-flex;align-items:center;padding:0 20px;border-radius:999px;background:rgba(var(--dunkel-rgb),.55);border:1px solid rgba(255,255,255,.45);font:600 1rem var(--text);color:#fff;-webkit-backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (hover:hover) and (pointer:fine){.fw-karte:hover .fw-film{transform:scale(1.06)}.fw-karte:hover .fw-text i{background:#fff;color:var(--marke)}}
@media (max-width:760px){.flug-wahl{grid-template-columns:1fr}.fw-karte{aspect-ratio:4/3.3}.fw-text small{max-width:none}}

/* Galerie: sechs Bereiche zum Aufklappen, Bilder erst nach dem Antippen */
.gal-teile{display:grid;gap:14px}
.gal-teil{border-radius:26px;background:var(--papier);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 50px -34px rgba(var(--dunkel-rgb),.45);border:1px solid var(--linie);overflow:hidden}
.gal-teil>summary{list-style:none;display:flex;align-items:center;gap:clamp(12px,2vw,24px);padding:12px clamp(12px,2vw,20px) 12px 12px;cursor:pointer;min-height:88px}
.gal-teil>summary::-webkit-details-marker{display:none}
.gal-deckel{width:clamp(84px,9vw,128px);height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;flex:none}
.gal-titel{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.gal-titel b{font:300 clamp(26px,1.6vw + 16px,40px)/1.05 var(--anzeige);color:var(--marke)}
.gal-titel small{font-size:.98rem;color:var(--tinte-2);line-height:1.35}
.gal-zahl{font:600 .95rem var(--text);color:var(--akzent-tief);white-space:nowrap}
.gal-pfeil{width:44px;height:44px;flex:none;border-radius:50%;background:var(--signal);position:relative;box-shadow:0 6px 0 var(--signal-tief),0 12px 20px -8px rgba(var(--dunkel-rgb),.5);transition:transform .3s ease}
.gal-pfeil::before{content:"";position:absolute;left:50%;top:46%;width:12px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)}
.gal-teil[open] .gal-pfeil{transform:rotate(180deg)}
.gal-teil .gal-raster{padding:6px clamp(10px,1.4vw,18px) clamp(14px,1.8vw,22px);grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,14vw,230px)}
.gal-teil .gal-text{opacity:1}
@media (max-width:760px){.gal-zahl{display:none}.gal-teil .gal-raster{grid-template-columns:1fr 1fr;grid-auto-rows:40vw}.gal-titel small{font-size:.9rem}}
@media (hover:hover) and (pointer:fine){.gal-teil>summary:hover .gal-pfeil{transform:translateY(-2px)}.gal-teil[open]>summary:hover .gal-pfeil{transform:rotate(180deg) translateY(2px)}}

/* Brief „Kommen Sie als Gast …“: scharfes Abendbild, Glaskarte, ein Song-Knopf */
.brief-bereich{min-height:min(100vh,980px);display:flex;align-items:center}
.brief-bild img{object-position:50% 62%}
.brief-bereich::before{background:linear-gradient(180deg,rgba(var(--dunkel-rgb),.25),rgba(var(--dunkel-rgb),.05) 40%,rgba(var(--dunkel-rgb),.45))}
.brief{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 #fff inset,0 50px 90px -40px rgba(0,0,0,.55)}
.brief::before{border-color:rgba(var(--akzent-tief-rgb),.22)}
.brief .hand{color:var(--marke)}
.brief-emblem{background:none;box-shadow:none;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35))}
.brief-lied{margin-top:22px}
.brief-lied .pa,.brief-lied .pause-txt{display:none}
.brief-lied[aria-pressed="true"] .pa,.brief-lied[aria-pressed="true"] .pause-txt{display:inline}
.brief-lied[aria-pressed="true"] .sp,.brief-lied[aria-pressed="true"] .spielen-txt{display:none}
@media (max-width:700px){.brief-bereich{min-height:0}.brief-bild img{object-position:56% 70%}}
/* Entwurfs-Plakette unter das Logo, damit die Ringschrift frei bleibt */
.entwurf{bottom:-19px;left:3px}
@media (max-width:520px){.entwurf{bottom:-17px;left:-2px}}
/* Hero: Geralds Farben zeigen – neutraler, leichter Schleier statt Blaustich */
[data-welt="logo"] .hero-schleier{background:linear-gradient(180deg,rgba(8,16,30,.45) 0%,rgba(8,16,30,.05) 22%,rgba(8,16,30,.08) 45%,rgba(8,16,30,.66) 100%),linear-gradient(90deg,rgba(8,16,30,.5) 0%,rgba(8,16,30,.2) 50%,rgba(8,16,30,0) 78%)}
@media (max-width:640px){[data-welt="logo"] .hero-schleier{background:linear-gradient(180deg,rgba(8,16,30,.45) 0%,rgba(8,16,30,.18) 20%,rgba(8,16,30,.42) 45%,rgba(8,16,30,.82) 100%)}}
.menue a.tastknopf,.menue a.tastknopf .tk-flaeche{color:#fff}
.fw-bild{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover) and (pointer:fine){.fw-karte:hover .fw-bild{transform:scale(1.06)}}
.fw-schleier{background:linear-gradient(180deg,rgba(8,16,30,0) 30%,rgba(8,16,30,.55) 55%,rgba(8,16,30,.9) 100%)}
.fw-text>span{color:#fff;opacity:.95}
.gal-teil .gal-text{padding:46px 14px 12px;background:linear-gradient(rgba(8,16,30,0),rgba(8,16,30,.55) 40%,rgba(8,16,30,.88));text-shadow:0 1px 3px rgba(0,0,0,.6)}
.fw-karte img.fw-bild{height:100%}
@media (max-width:520px){.entwurf{width:70px;left:-5px;font-size:12px}}
/* Unterschrift schreibt sich unter dem Gruß (Baustein Unterschrift) */
.brief .gruss{margin-bottom:.2em}
.brief-unterschrift{max-width:300px;color:var(--marke);margin:0 0 4px -6px}
@media (max-width:700px){.brief-unterschrift{max-width:240px}}
/* Häufige Fragen (statt Tagesregler, 02.11.) */
.fragen{display:grid;gap:12px;max-width:980px}
.frage{border-radius:22px;background:var(--papier);border:1px solid var(--linie);box-shadow:0 1px 0 #fff inset,0 20px 44px -34px rgba(var(--dunkel-rgb),.45)}
.frage>summary{list-style:none;display:flex;align-items:center;gap:16px;justify-content:space-between;padding:16px 16px 16px clamp(18px,2.4vw,28px);cursor:pointer;min-height:68px;font:600 clamp(1.05rem,.4vw + .95rem,1.25rem)/1.35 var(--text);color:var(--marke)}
.frage>summary::-webkit-details-marker{display:none}
.frage .gal-pfeil{width:40px;height:40px}
.frage[open] .gal-pfeil{transform:rotate(180deg)}
.frage p{margin:0;padding:0 clamp(18px,2.4vw,28px) 20px;color:var(--tinte-2);max-width:72ch}

/* Vorschau-Film auf den Apartment-Karten: blendet erst ein, wenn er wirklich läuft */
.fw-karte .fw-film{opacity:0;transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.fw-karte .fw-film.-laeuft{opacity:1}

/* Rundgang: ganzer Raum sichtbar (Film ist 4:3, wird nicht mehr beschnitten) */
.tour-film{object-fit:contain}
.tour-buehne{background:#0b1830}
/* Gerrys Änderungen 04.11.2026 */
.hero-unter{font:300 clamp(24px,2vw + 12px,44px)/1.15 var(--anzeige);font-style:italic;color:#fff;margin:-.2em 0 .5em;text-shadow:0 1px 18px rgba(var(--dunkel-rgb),.65)}
.wb-titel .wb-vor{font:inherit;font-size:.5em;letter-spacing:0;color:inherit;flex-basis:100%;margin-bottom:-.15em}
.wb-unter{font:400 clamp(20px,1vw + 15px,27px)/1.3 var(--anzeige);font-style:italic;margin:0 0 .5em}
.unterzeile{font:400 clamp(19px,.8vw + 15px,25px)/1.3 var(--anzeige);font-style:italic;margin:-.3em 0 .6em;color:inherit}
.brief .brief-motto{font:500 clamp(22px,1.4vw + 14px,32px)/1.3 var(--anzeige);color:var(--marke,var(--adria));margin-bottom:.7em}
.fuss-recht{max-width:var(--breit);margin:22px auto 0;font-size:.95rem;color:rgba(255,255,255,.85)}
.angebot-dlg{border:0;padding:0;border-radius:24px;max-width:min(560px,94vw);width:100%;max-height:92vh;background:#fff;color:var(--tinte);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.angebot-dlg::backdrop{background:rgba(11,24,48,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.angebot-dlg .ad-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 22px 6px}
.angebot-dlg .ad-kopf b{display:block;font:500 1.6rem var(--anzeige)}
.angebot-dlg .ad-kopf span{display:block;font-size:.95rem;opacity:.75;margin-top:2px}
.angebot-dlg .kasse-zu{font-size:28px;line-height:1;background:none;border:0;cursor:pointer;color:inherit;padding:4px 8px}
.angebot-dlg form{padding:6px 22px 22px;background:none;box-shadow:none;border:0}
.angebot-dlg .ad-danke{padding:10px 22px 26px;display:none}
.angebot-dlg.-gesendet form{display:none}.angebot-dlg.-gesendet .ad-danke{display:block}
/* 04.11.: Buchungsbereich größer lesbar */
.buchen-bereich .lead{font-size:clamp(19px,.7vw + 15px,24px)}
.buchen-bereich .kal-titel{font-size:clamp(26px,1.2vw + 18px,34px)}
.buchen-bereich .tage button{font-size:clamp(17px,.4vw + 14px,20px)}
.buchen-bereich .wt{font-size:15px}
.buchen-bereich .monat h4{font-size:15px}
.buchen-bereich .aus-label{font-size:15px}
.buchen-bereich .aus-zeile b{font-size:clamp(22px,1vw + 16px,28px)}
.buchen-bereich .angebote .hinweis,.buchen-bereich .angebote{font-size:18px}
.buchen-bereich .kal-legende,.buchen-bereich .kal-status{font-size:15px}
.buchen-bereich .sicher{font-size:16px}
.buchen-bereich .ablauf h3{font-size:clamp(24px,1vw + 18px,30px)}
.buchen-bereich .ablauf p{font-size:18.5px}
.buchen-bereich .tastknopf .tk-flaeche{font-size:18px}
.buchen-bereich .tastknopf[disabled]{opacity:.8}
.angebot-dlg{font-size:18px;max-width:min(620px,94vw)}
.angebot-dlg .ad-kopf b{font-size:1.9rem}
.angebot-dlg .ad-kopf span,.angebot-dlg .anfrage-satz{font-size:17px;opacity:.85}
.angebot-dlg .feld label,.angebot-dlg .zustimmung{font-size:17px}
.angebot-dlg input,.angebot-dlg textarea{font-size:18px}
.angebot-dlg .tastknopf .tk-flaeche{font-size:19px}
/* Cookie-Hinweis */
.cookie-hinweis{position:fixed;left:16px;right:16px;bottom:16px;z-index:9000;max-width:560px;margin:0 auto;display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.96);color:var(--tinte,#1f325c);border:1px solid rgba(38,68,119,.15);border-radius:20px;padding:16px 18px;box-shadow:0 20px 60px rgba(11,24,48,.28);-webkit-backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cookie-hinweis[hidden]{display:none}
.cookie-hinweis p{margin:0;font-size:15px;line-height:1.45}
.cookie-hinweis p b{display:block;font-size:16px;margin-bottom:2px}
.cookie-hinweis a{color:inherit;text-decoration:underline}
.cookie-hinweis .ck-knopf{flex:0 0 auto;border:0;border-radius:999px;padding:12px 26px;font:600 16px var(--text,system-ui);color:#fff;background:linear-gradient(#2a8fa3,#16687a);box-shadow:0 6px 16px rgba(22,104,122,.35);cursor:pointer}
@media (max-width:640px){.cookie-hinweis{flex-direction:column;align-items:stretch;bottom:86px}.cookie-hinweis .ck-knopf{width:100%}}
/* alt-safari */
dialog:not([open]){display:none}
.-kein-dialog .angebot-dlg[open]{display:block;position:fixed;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:9999;overflow:auto;-webkit-overflow-scrolling:touch;box-shadow:0 0 0 3000px rgba(11,24,48,.6)}
.-kein-dialog .lb[open]{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center}
@supports not (aspect-ratio:1/1){
.tag-buehne::before,.p-bild::before,.fw-karte::before,.p-boot-film::before,.tour-buehne::before{content:"";display:block}
.tag-buehne::before{padding-top:52.5%}
.p-bild::before{padding-top:62.5%}
.fw-karte::before{padding-top:125%}
@media (max-width:760px){.fw-karte::before{padding-top:82.5%}}
@media (max-width:700px){.tag-buehne::before{padding-top:125%}}
@media (max-width:900px){.p-boot-film::before{padding-top:62.5%}}
@media (max-aspect-ratio:4/5){.tour-buehne::before{padding-top:133.3%}}
.wb-bild img,.gal-deckel{height:auto}
}
html{background:linear-gradient(var(--kalk) 50%,var(--nacht) 50%)}
.zurueck{display:inline-flex;align-items:center;gap:.45em;margin:0 0 22px;padding:.55em 1.2em;border-radius:999px;background:#fff;color:var(--tinte);font:600 1rem var(--text);text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 26px -14px rgba(var(--marke-rgb),.55);border:1px solid rgba(var(--marke-rgb),.14)}
.zurueck:hover{background:var(--kalk)}
/* svh mit var() nur, wo svh bekannt ist – sonst verwirft alter Safari die ganze Höhe */