*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --logoGold:url("../img/v2/bb-01.png");
  --bgZitat:url("../img/v2/bb-02.jpg");
  --bgGut:url("../img/v2/bb-03.jpg");
  --bgZeiten:url("../img/v2/bb-04.jpg");
  --bgAnf:url("../img/v2/bb-05.jpg");
  --p7:url("../img/v2/bb-06.jpg");
  --p6:url("../img/v2/bb-07.jpg");
  --p5:url("../img/v2/bb-08.jpg");
  --p4:url("../img/v2/bb-09.jpg");
  --p3:url("../img/v2/bb-10.jpg");
  --p2:url("../img/v2/bb-11.jpg");
  --p1:url("../img/v2/bb-12-hd.jpg"); /* 1920×2560 statt 788×1050 (bb-12.jpg), sonst am Laptop fast doppelt, auf Retina fast vierfach hochgezogen */
  /* Helle maritime Palette — Sand, Muschel, Seeglas */
  --l1:#fbf8f3;  /* Leinen, hellster Grund */
  --l2:#f4eee4;  /* Sand */
  --l3:#eaf1f2;  /* Seeglas */
  --l4:#dde8ea;  /* Flachwasser */
  --d1:#0a3a4c;  /* Tiefes Petrol — Text & Anker */
  --d2:#0f4d63;
  --d3:#156a7c;
  --d5:#1b8b92;
  --sea:#2f8a94;
  --g:#a8853f;   /* Gold, dunkel genug für hellen Grund */
  --g2:#c6a45c; --gd:#8d6f31;
  --ink:#0a3a4c; --mut:rgba(10,58,76,.72); --faint:rgba(10,58,76,.45);
  --line:rgba(10,58,76,.13);
}
html{scroll-behavior:smooth}
body{background:var(--l1);color:var(--ink);font-family:'Jost',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:'Jost',sans-serif;color:inherit}
::selection{background:var(--d3);color:#fff}

/* ── NAV ─────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.6rem 3.5rem;transition:background .55s,padding .45s,box-shadow .45s}
/* Leicht durchsichtig, damit man beim Scrollen den Inhalt dahinter erkennt (Wunsch des Nutzers, v0.55;
   vorher 94 % Deckung und 22 px Unschärfe). Der Weichzeichner ist hier erlaubt, weil die Leiste nur ein
   schmaler Streifen ist; auf großen Flächen nicht (iPhone-Safari, siehe v0.45). saturate hält Farben
   dahinter lebendig, statt sie im Milchglas grau werden zu lassen. */
nav.sc{background:rgba(251,248,243,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);padding:.95rem 3.5rem;box-shadow:0 1px 0 var(--line)}
.ni{display:flex;align-items:center;justify-content:space-between;max-width:1500px;margin:0 auto;gap:2rem}
.nlogo{height:38px;flex-shrink:0;transition:height .45s}
nav.sc .nlogo{height:30px}
.nm{display:flex;gap:1.35rem;list-style:none;flex:1;justify-content:center}
.nm a{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;font-weight:400;color:var(--mut);white-space:nowrap;transition:color .35s;position:relative;padding-bottom:3px}
.nm a::after{content:'';position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--d3);transition:all .35s;transform:translateX(-50%)}
.nm a:hover{color:var(--d3)}
.nm a:hover::after{width:100%}
.nres{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;background:transparent;border:1px solid var(--d3);color:var(--d3);padding:.72rem 1.7rem;flex-shrink:0;border-radius:999px;transition:all .35s}
.nres:hover{background:var(--d3);color:#fff}
.nbg{display:none;flex-direction:column;gap:6px;background:none;border:none;padding:5px}
.nbg span{display:block;width:24px;height:1px;background:var(--d1);transition:all .35s}

.mn{position:fixed;inset:0;z-index:190;background:linear-gradient(170deg,var(--l1),var(--l3) 60%,var(--l4));display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .45s}
.mn.open{opacity:1;pointer-events:all}
.mn ul{list-style:none;text-align:center;display:flex;flex-direction:column;gap:1.9rem}
.mn a,.mn button{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;color:var(--ink);letter-spacing:.05em;background:none;border:none;transition:color .3s}
.mn a:hover{color:var(--d3)}
.mn-x{position:absolute;top:2rem;right:2rem;font-size:1.4rem;color:var(--faint);background:none;border:none}
.mn-cta{background:var(--d3)!important;border:1px solid var(--d3)!important;color:#fff!important;font-family:'Jost',sans-serif!important;font-size:.7rem!important;letter-spacing:.26em!important;padding:.85rem 2.4rem;margin-top:1.4rem;text-transform:uppercase;border-radius:999px}

/* ── HERO ────────────────────────────────────────── */
.hero{height:100svh;min-height:600px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
/* Kein langsamer Zoom mehr (war scale 1.04 → 1.12 mit will-change): Der Browser
   vergrößert dabei eine einmal gemalte Fläche, das Foto wirkte weich (wie bei
   Banmaai). Bewegung bringen seit v0.46 Möwen und Lichtpunkte (.hero-fx). */
.hero-bg{position:absolute;inset:0;background-image:var(--p1);background-size:cover;background-position:center 35%}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,58,76,.40) 0%,rgba(10,58,76,.30) 42%,rgba(10,58,76,.70) 100%)}
.hero-c{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 1.5rem;max-width:900px}
.hlogo{margin:0 auto 2.6rem;opacity:0;animation:rise 1.5s .25s cubic-bezier(.16,1,.3,1) forwards}
/* Logo als Hintergrundbild — einmal hinterlegt, mehrfach genutzt */
.hlogo{background-image:var(--logoGold);background-size:contain;background-repeat:no-repeat;background-position:center;width:min(78vw,340px);aspect-ratio:600/276}
.hrule{width:0;height:1px;background:linear-gradient(90deg,transparent,#ebd79b,transparent);margin-bottom:2rem;animation:widen 1.8s .8s cubic-bezier(.16,1,.3,1) forwards}
@keyframes widen{to{width:190px}}
.hh{font-family:'Cormorant Garamond',serif;font-size:clamp(2.9rem,6.4vw,5.6rem);font-weight:300;line-height:1.02;letter-spacing:.012em;color:#fbf8f3;text-shadow:0 2px 24px rgba(10,58,76,.4);opacity:0;animation:rise 1.5s .55s cubic-bezier(.16,1,.3,1) forwards}
.hh em{font-style:italic;color:#ebd79b;display:block}
.hs{margin-top:1.5rem;font-size:clamp(.56rem,.88vw,.68rem);letter-spacing:.44em;text-transform:uppercase;color:rgba(251,248,243,.85);opacity:0;animation:rise 1.5s .85s cubic-bezier(.16,1,.3,1) forwards}
.hb{margin-top:3.2rem;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;justify-content:center;opacity:0;animation:rise 1.5s 1.15s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.sh{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;opacity:0;animation:rise 1.2s 2s forwards}
.sh span{font-size:.54rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(251,248,243,.6)}
.shl{width:1px;height:52px;background:linear-gradient(to bottom,rgba(251,248,243,.8),transparent);animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.25}50%{opacity:1}}

/* ── BUTTONS ─────────────────────────────────────── */
.btn{background:var(--d1);color:var(--l1);padding:1.05rem 2.9rem;border:1px solid var(--g);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;font-weight:400;transition:all .4s;display:inline-block}
.btn:hover{background:transparent;color:var(--d1);transform:translateY(-2px)}
.btn-o{background:transparent;color:var(--ink);padding:1.05rem 2.9rem;border:1px solid var(--line);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;transition:all .4s;display:inline-block}
.btn-o:hover{border-color:var(--d1);color:var(--d1)}
.lk{display:inline-flex;align-items:center;gap:.75rem;margin-top:2.4rem;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--d3);background:none;border:none;border-bottom:1px solid var(--line);padding-bottom:5px;transition:all .35s}
.lk:hover{border-color:var(--d3);gap:1.1rem}

/* ── INFOBAR ─────────────────────────────────────── */
.ib{background:var(--l2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:center;flex-wrap:wrap}
.ii{padding:1.4rem 3.2rem;display:flex;align-items:center;gap:.85rem;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);border-right:1px solid var(--line)}
.ii:last-child{border-right:none}
.ii svg{color:var(--d3);flex-shrink:0}
.ii a{transition:color .3s}.ii a:hover{color:var(--d3)}

/* ── SECTION HELPERS ─────────────────────────────── */
.ey{font-size:.58rem;letter-spacing:.42em;text-transform:uppercase;color:var(--g);margin-bottom:1.5rem;display:block}
.hd{font-family:'Cormorant Garamond',serif;font-size:clamp(2.3rem,3.9vw,3.9rem);font-weight:300;line-height:1.1;letter-spacing:.008em}
.hd em{font-style:italic;color:var(--d3)}
.bt{margin-top:1.6rem;font-size:.9rem;line-height:2.05;color:var(--mut);font-weight:300;max-width:52ch}
.orn{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin:0 auto 2.2rem;max-width:220px}
.orn::before,.orn::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.orn::after{background:linear-gradient(90deg,var(--line),transparent)}
.orn span{color:var(--g);font-size:.6rem;letter-spacing:.3em}

/* ── SPLIT ───────────────────────────────────────── */
.sp{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;background:var(--l1)}
.sp.alt{background:var(--l3)}
.spi{overflow:hidden;position:relative;height:100%;min-height:78vh}
.spi img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.16,1,.3,1);display:block}
.sp:hover .spi img{transform:scale(1.05)}
.spi::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(10,58,76,.12),transparent 50%);pointer-events:none}
/* Restaurant-Foto (bb-16, Hochformat 2:3): Es soll zu sehen sein, dass
   ein Gericht serviert wird – Gesichter oben (ab ~15 %), Teller und Hand
   unten (bis ~84 %). Dafür braucht der Rahmen mindestens 1,1 × so hoch
   wie breit; flachere Rahmen schnitten mal die Köpfe, mal den Teller ab.
   Ausschnitt so gesetzt, dass bei genau diesem Format Zeile 115 bis 884
   von 1050 zu sehen ist. */
.sp .spi.spi-teller{min-height:min(55vw,115vh);max-height:none}
.spi-teller img{object-position:50% 41%}
@media(max-width:768px){.sp .spi.spi-teller{min-height:0;height:110vw}}
.spt{padding:7rem 6vw;display:flex;flex-direction:column;justify-content:center}
.rev{direction:rtl}.rev>*{direction:ltr}

/* ── FEATURE (Primavera) ─────────────────────────── */
.feat{background:var(--l2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:6rem 8vw;text-align:center;position:relative;overflow:hidden}
.feat::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(21,106,124,.05),transparent 65%);pointer-events:none}
.feat-in{position:relative;z-index:2;max-width:640px;margin:0 auto}
.feat .hd{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.feat .bt{font-size:.85rem}
.feat-logo{width:132px;margin:0 auto 1.8rem;opacity:.8}

/* ── QUOTE ───────────────────────────────────────── */
.qt{background:var(--l4);padding:10rem 8vw;text-align:center;position:relative;overflow:hidden}
.qt::before{content:'\201C';font-family:'Cormorant Garamond',serif;font-size:26rem;line-height:1;color:rgba(10,58,76,.05);position:absolute;top:-2rem;left:50%;transform:translateX(-50%);pointer-events:none}
.qtt{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:300;font-style:italic;line-height:1.42;max-width:840px;margin:0 auto;position:relative;z-index:2;color:var(--ink)}
.qts{margin-top:2.2rem;font-size:.58rem;letter-spacing:.38em;text-transform:uppercase;color:var(--d3);position:relative;z-index:2}

/* ── GALERIE-TEASER ──────────────────────────────── */
.gal-t{background:var(--l1);padding:8rem 8vw;text-align:center}
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin:3.4rem 0;max-width:1200px;margin-left:auto;margin-right:auto}
.gs{overflow:hidden;aspect-ratio:3/4;background:var(--l4);position:relative;cursor:pointer}
.gs img{width:100%;height:100%;object-fit:cover;filter:brightness(.95) saturate(.95);transition:all 1s cubic-bezier(.16,1,.3,1)}
.gs:hover img{filter:brightness(1) saturate(1);transform:scale(1.06)}
.gs::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .5s}
.gs:hover::after{border-color:var(--d3)}

/* ── GALERIE-MODAL ───────────────────────────────── */
#mGal .md{max-width:1180px;background:var(--l1)}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:1.8rem}
.gal-grid .gi{overflow:hidden;aspect-ratio:3/4;position:relative;cursor:pointer;background:var(--l4);margin:0}
.gal-grid .gi img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;filter:brightness(.97)}
.gal-grid .gi:hover img{transform:scale(1.07);filter:brightness(1)}
.gal-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.1rem .9rem;background:linear-gradient(to top,rgba(10,58,76,.92),transparent);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--l1);opacity:0;transform:translateY(8px);transition:all .45s}
.gal-grid .gi:hover figcaption{opacity:1;transform:translateY(0)}
.lb{position:fixed;inset:0;z-index:1200;background:rgba(10,58,76,.96);display:none;align-items:center;justify-content:center;flex-direction:column;padding:2rem}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:80vh;object-fit:contain;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.lb-cap{margin-top:1.4rem;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--l1)}
.lb-x{position:absolute;top:1.6rem;right:1.8rem;background:none;border:1px solid rgba(251,248,243,.3);color:var(--l1);width:44px;height:44px;font-size:1.1rem;transition:all .3s}
.lb-x:hover{border-color:var(--l1);background:var(--l1);color:var(--d1)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:1px solid rgba(251,248,243,.3);color:var(--l1);width:48px;height:48px;font-size:1.2rem;transition:all .3s}
.lb-nav:hover{border-color:var(--l1);background:var(--l1);color:var(--d1)}
.lb-p{left:1.6rem}.lb-n{right:1.6rem}

/* ── EVENTS ──────────────────────────────────────── */
.evs{background:var(--l3);padding:9rem 8vw}
.eg{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:4rem;border:1px solid var(--line)}
.ec{background:var(--l1);padding:4rem 2.6rem;text-align:center;transition:background .55s;cursor:pointer;position:relative}
.ec:hover{background:var(--l2)}
.ec-i{width:52px;height:52px;margin:0 auto 1.9rem;color:var(--d3);opacity:.85;transition:transform .55s}
.ec:hover .ec-i{transform:translateY(-4px) scale(1.06)}
.ec-t{font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:300;margin-bottom:1rem;letter-spacing:.01em}
.ec-d{font-size:.82rem;color:var(--mut);line-height:1.95;font-weight:300}
.ec-l{display:inline-block;margin-top:1.9rem;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--d3);border-bottom:1px solid transparent;padding-bottom:4px;transition:border-color .4s}
.ec:hover .ec-l{border-color:var(--d3)}

/* ── KALENDER ────────────────────────────────────── */
.kal{background:var(--l1);padding:9rem 8vw}
.kh{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3.6rem;flex-wrap:wrap;gap:1.8rem}
.cn{display:flex;align-items:center;gap:1.2rem}
.cnb{background:none;border:1px solid var(--line);color:var(--mut);width:40px;height:40px;font-size:.95rem;display:flex;align-items:center;justify-content:center;transition:all .35s}
.cnb:hover{border-color:var(--d3);color:var(--d3)}
.cml{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;min-width:168px;text-align:center;letter-spacing:.05em}
.cg{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.cr{display:grid;grid-template-columns:130px 1fr auto auto;align-items:center;gap:2rem;padding:1.7rem 2.2rem;background:var(--l1);transition:background .4s}
.cr:hover{background:var(--l3)}
.cr.cl{background:rgba(180,70,70,.09)}
.cr.ev{background:rgba(168,133,63,.09)}
.cd{display:flex;flex-direction:column;gap:.16rem}
.cwd{font-size:.52rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.cdy{font-family:'Cormorant Garamond',serif;font-size:2.1rem;font-weight:300;line-height:1;color:var(--ink)}
.cmn{font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.cti{font-size:.9rem;font-weight:300;color:var(--ink)}
.csu{font-size:.72rem;color:var(--mut);font-weight:300;margin-top:.22rem}
.cb{font-size:.52rem;letter-spacing:.24em;text-transform:uppercase;padding:.36rem 1rem;white-space:nowrap;border:1px solid}
.bo{color:var(--d3);border-color:var(--line)}
.bc{color:#a84a4a;border-color:rgba(168,74,74,.3)}
.be{color:var(--l1);background:var(--gd);border-color:var(--gd)}
.ce{background:none;border:none;color:var(--faint);font-size:.68rem;transition:color .3s;white-space:nowrap;padding:.3rem}
.ce:hover{color:var(--d3)}
.ca{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.4rem;background:none;border:1px dashed var(--line);color:var(--faint);padding:1.15rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;width:100%;transition:all .35s}
.ca:hover{border-color:var(--d3);color:var(--d3)}
.kleg{display:flex;gap:2rem;flex-wrap:wrap}
.kli{display:flex;align-items:center;gap:.6rem;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.kld{width:6px;height:6px;border-radius:50%}
.kem{text-align:center;padding:4.5rem;color:var(--faint);font-size:.82rem;background:var(--l1)}

/* ── ÖFFNUNGSZEITEN ──────────────────────────────── */
.ozs{background:linear-gradient(175deg,var(--l3),var(--l4));padding:10rem 8vw;text-align:center}
.oz-g{display:flex;flex-direction:column;max-width:720px;margin:4.5rem auto 0}
.od{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:2.9rem 0;border-bottom:1px solid var(--line);gap:2.4rem}
.od:first-child{border-top:1px solid var(--line)}
.odn{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mut);text-align:right}
.odt{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:300;white-space:nowrap;letter-spacing:.02em;color:var(--ink)}
.ono{font-size:.55rem;color:var(--d3);letter-spacing:.24em;text-align:left;text-transform:uppercase}

/* ── KONTAKT ─────────────────────────────────────── */
.kos{background:var(--l1);padding:9rem 8vw}
.ko-g{display:grid;grid-template-columns:1fr 1.15fr;gap:6rem;align-items:start;margin-top:4rem}
.kf{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.kf.fl{grid-template-columns:1fr}
.ff{display:flex;flex-direction:column;gap:.6rem}
.ff label{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.ff input,.ff select,.ff textarea{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:.85rem .1rem;font-size:.88rem;font-weight:300;outline:none;transition:border-color .4s;-webkit-appearance:none;border-radius:0}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-bottom-color:var(--d3)}
.ff select option{background:#fff;color:var(--ink)}
.ff textarea{resize:vertical;min-height:90px}
.kir{display:flex;align-items:center;gap:1rem;font-size:.85rem;color:var(--mut);margin-top:1.2rem;font-weight:300}
.kir svg{color:var(--d3);flex-shrink:0}
.kir a{transition:color .3s}.kir a:hover{color:var(--d3)}
.ok-msg{display:none;padding:1rem;border:1px solid var(--line);border-left:2px solid #2f7d4a;font-size:.8rem;color:#2f7d4a;margin-top:1.2rem;font-weight:300}

/* ── SPEISEKARTE ─────────────────────────────────── */
.mtabs{display:flex;border-bottom:1px solid var(--line);margin:1.6rem 0 2.4rem;overflow-x:auto}
.mtab{background:none;border:none;color:var(--faint);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;padding:1rem 1.7rem;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .35s}
.mtab.on{color:var(--d3);border-bottom-color:var(--d3)}
.mtab:hover{color:var(--d1)}
.mpane{display:none}.mpane.on{display:block}
.mc{margin-bottom:3rem}
.mc-t{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--d3);margin-bottom:1.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--line);letter-spacing:.03em}
.mi{display:flex;align-items:flex-start;justify-content:flex-start;padding:1.05rem 0;border-bottom:1px solid rgba(10,58,76,.08);gap:2rem}
.mi:last-child{border:none}
.mi-l{display:flex;flex-direction:column;gap:.32rem;flex:1}
.mi-n{font-size:.92rem;font-weight:300;color:var(--ink)}
.mi-d{font-size:.75rem;color:var(--mut);line-height:1.7;font-weight:300}
.mi-p{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--gd);white-space:nowrap;flex-shrink:0}


.mc-s{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint);margin:-1rem 0 1.6rem}
/* Unterüberschrift innerhalb einer Kategorie (Pasta / Risotto & Tortellini, Vom Fass / Aus der Flasche …) */
.mc-u{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:1.15rem;color:var(--gd);margin:1.6rem 0 .2rem}
.mc-s+.mc-u,.mc-t+.mc-u{margin-top:0}
.mc-x{font-size:.75rem;line-height:1.85;color:var(--mut);font-weight:300;margin-top:1.4rem;padding:1.1rem 1.3rem;border:1px solid var(--line)}
.mc-x strong{color:var(--d3);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.6rem}
.mc-x em{color:var(--faint);font-style:italic}
.mi-a{font-size:.58rem;color:var(--faint);margin-left:.35rem;letter-spacing:.05em}
.mk{display:inline-block;margin-left:.5rem;font-size:.68rem;vertical-align:middle}
/* Chili und Blatt wie in der gedruckten Karte (v0.56) statt der Zeichen ♨ und ✿ */
.mk-s,.mk-v{width:1.2em;height:1.2em;background:center/contain no-repeat}
.mk-s{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.6 4.4c1.1 1 1.2 2.7.4 4.3-1.6 3.1-5 5.3-8.8 5.7-.6.1-.8-.6-.3-.9 2.9-1.6 5.2-4 6.3-7.1.4-1.1 1.3-2.1 2.4-2z' fill='%23b4432b'/%3E%3Cpath d='M11.4 4.5c.2-1.3.9-2.3 2-2.9' fill='none' stroke='%235d7d3b' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
.mk-v{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 2C8.2 2.3 3.7 4.9 3.1 10.1c-.1 1 .2 2 .7 2.8C5.1 8.8 8 6.5 11 5.3 8.3 7.1 6 9.5 4.4 13.5c.8.4 1.8.5 2.8.3C12.3 12.8 14 7.3 14 2z' fill='%234e7e39'/%3E%3C/svg%3E")}
.mk-V{color:#2f7d4a;font-family:'Cormorant Garamond',serif;font-size:.8rem;font-weight:500}
.mk-e{display:inline-block;margin-left:.6rem;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gd);border:1px solid var(--line);padding:.16rem .55rem;vertical-align:middle}
.al-g{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.al-h{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d3);margin-bottom:1rem}
.al-l{list-style:none;margin:0}
.al-l li{font-size:.78rem;color:var(--mut);font-weight:300;padding:.5rem 0;border-bottom:1px solid rgba(10,58,76,.08);display:flex;gap:.9rem}
.al-l b{color:var(--d3);min-width:18px;font-weight:400}
.al-n{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.al-n p{font-size:.78rem;line-height:1.85;color:var(--mut);font-weight:300}
.al-n strong{color:var(--d3);font-weight:400;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;display:block;margin-bottom:.5rem}
.mleg{display:flex;gap:1.6rem;flex-wrap:wrap;padding:1.2rem 0;border-top:1px solid var(--line);margin-top:.5rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.mleg span{display:flex;align-items:center;gap:.4rem}
@media(max-width:768px){.al-g,.al-n{grid-template-columns:1fr;gap:1.6rem}}


/* ── WILLKOMMENS-POPUP ───────────────────────────── */
#mWel .md{max-width:640px}
.wel-h{text-align:center;padding:2.8rem 2.6rem 1.6rem;border-bottom:1px solid var(--line)}
.wel-logo{height:64px;margin:0 auto 1.4rem;opacity:.95}
.wel-t{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;line-height:1.15}
.wel-t em{font-style:italic;color:var(--d3);display:block}
.wel-s{margin-top:.9rem;font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--mut)}
.wel-b{padding:2.2rem 2.6rem 2.6rem}
.wel-lbl{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--d3);margin-bottom:1.3rem;display:block;text-align:center}
.wel-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:1.8rem}
.wel-row{display:grid;grid-template-columns:64px 1fr auto;gap:1.2rem;align-items:center;padding:1.1rem 1.3rem;background:var(--l1)}
.wel-row.ev{background:rgba(168,133,63,.1)}
.wel-row.cl{background:rgba(180,70,70,.09)}
.wel-d{text-align:center}
.wel-dd{font-family:'Cormorant Garamond',serif;font-size:1.55rem;line-height:1;color:var(--ink)}
.wel-dm{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:.15rem}
.wel-n{font-size:.84rem;color:var(--ink);font-weight:300}
.wel-x{font-size:.68rem;color:var(--mut);margin-top:.16rem;font-weight:300}
.wel-tag{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;padding:.26rem .7rem;white-space:nowrap;border:1px solid}
.wel-empty{padding:2.2rem;text-align:center;color:var(--faint);font-size:.8rem;background:var(--l1)}
.wel-acts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.wel-a{border:1px solid var(--line);padding:1.15rem 1rem;background:none;text-align:left;transition:all .35s;cursor:pointer;display:block}
.wel-a:hover{border-color:var(--d3);background:var(--l3)}
.wel-a-t{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:300;color:var(--ink);display:block;margin-bottom:.22rem}
.wel-a-d{font-size:.62rem;color:var(--faint);line-height:1.55;display:block}
.wel-skip{display:block;width:100%;text-align:center;margin-top:1.4rem;font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint);background:none;border:none;padding:.7rem;transition:color .3s}
.wel-skip:hover{color:var(--d3)}
@media(max-width:768px){
  .wel-h{padding:2rem 1.5rem 1.3rem}.wel-logo{height:50px}.wel-t{font-size:1.5rem}
  .wel-b{padding:1.7rem 1.5rem 2.2rem}
  .wel-row{grid-template-columns:52px 1fr;gap:.9rem;padding:.95rem 1rem}
  .wel-tag{display:none}
  .wel-acts{grid-template-columns:1fr}
}

/* ── MODALS ──────────────────────────────────────── */
.bk{position:fixed;inset:0;z-index:1000;background:rgba(10,58,76,0);backdrop-filter:blur(0);display:flex;align-items:center;justify-content:center;pointer-events:none;transition:background .5s,backdrop-filter .5s;padding:1.5rem}
.bk.open{background:rgba(10,58,76,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:all}
.md{background:var(--l1);border:1px solid var(--line);width:100%;max-width:620px;position:relative;transform:translateY(30px) scale(.98);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1);max-height:90svh;overflow-y:auto}
.bk.open .md{transform:none;opacity:1}
.md-x{position:absolute;top:1.2rem;right:1.2rem;background:var(--l2);border:1px solid var(--line);color:var(--d1);font-size:.95rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;z-index:10;transition:all .35s}
.md-x:hover{background:var(--d1);color:var(--l1)}
.md-body{padding:3rem 3.2rem 3.4rem}
.md-ey{font-size:.55rem;letter-spacing:.38em;text-transform:uppercase;color:var(--g);margin-bottom:1.1rem;display:block}
.md-h{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:300;line-height:1.14;margin-bottom:.6rem}
.md-h em{font-style:italic;color:var(--g)}
.md-sub{font-size:.85rem;color:var(--mut);font-weight:300;margin-bottom:2rem;line-height:1.85}
.md-hr{border:none;border-top:1px solid var(--line);margin:1.5rem 0 1.4rem}
.md-con{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;font-size:.78rem;color:var(--mut)}
.md-con a{transition:color .3s}.md-con a:hover{color:var(--d3)}
.rf{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.rf label{font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.rf input,.rf select,.rf textarea{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:.8rem .1rem;font-size:.88rem;font-weight:300;outline:none;transition:border-color .4s;-webkit-appearance:none;border-radius:0}
.rf input:focus,.rf select:focus,.rf textarea:focus{border-bottom-color:var(--d3)}
.rf select option{background:#fff}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}

/* ── RECHTLICHES ─────────────────────────────────── */
#mLegal .md{max-width:840px}
.lg-tabs{display:flex;border-bottom:1px solid var(--line);margin:1.5rem 0 2.2rem;overflow-x:auto}
.lg-tab{background:none;border:none;color:var(--faint);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;padding:.95rem 1.6rem;border-bottom:1px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all .35s}
.lg-tab.on{color:var(--d3);border-bottom-color:var(--d3)}
.lg-pane{display:none}.lg-pane.on{display:block}
.lg h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:var(--d3);margin:2.2rem 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.lg h3:first-child{margin-top:0}
.lg h4{font-size:.85rem;color:var(--ink);font-weight:400;margin:1.6rem 0 .55rem}
.lg p{font-size:.82rem;line-height:1.95;color:var(--mut);font-weight:300;margin-bottom:.95rem}
.lg strong{color:var(--ink);font-weight:400}
.lg ul{margin:.7rem 0 1.1rem 1.3rem}
.lg li{font-size:.82rem;line-height:1.9;color:var(--mut);font-weight:300;margin-bottom:.4rem}
.lg .addr{border-left:2px solid var(--d3);padding:1.2rem 1.5rem;margin:1.1rem 0;background:var(--l3)}
.lg .addr p{margin:0;line-height:1.85}
.lg a{color:var(--d3)}
.lg .caps{font-size:.75rem;line-height:1.9;color:var(--faint);padding:1.1rem 1.3rem;margin:1.1rem 0;border:1px solid var(--line)}

/* ── COOKIE ──────────────────────────────────────── */
.ck{position:fixed;bottom:0;left:0;right:0;z-index:9998;background:rgba(251,248,243,.98);border-top:1px solid var(--d3);backdrop-filter:blur(18px);transform:translateY(100%);transition:transform .6s cubic-bezier(.16,1,.3,1);padding:1.7rem 3.5rem}
.ck.show{transform:none}
.ck-in{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.ck-t{flex:1;min-width:280px}
.ck-tl{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--g);margin-bottom:.55rem;display:block}
.ck-t p{font-size:.78rem;line-height:1.85;color:var(--mut);font-weight:300}
.ck-t a{color:var(--d3)}
.ck-b{display:flex;gap:.9rem;flex-shrink:0;flex-wrap:wrap}
.ck-acc{background:var(--d1);color:var(--l1);border:1px solid var(--d1);padding:.78rem 2rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;transition:all .35s}
.ck-acc:hover{background:transparent;color:var(--d1)}
.ck-set{background:none;color:var(--mut);border:1px solid var(--line);padding:.78rem 1.5rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;transition:all .35s}
.ck-set:hover{border-color:var(--d1);color:var(--d1)}
.ck-rej{background:none;color:var(--faint);border:none;padding:.78rem .9rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;transition:color .3s}
.ck-rej:hover{color:var(--ink)}
.ctog{display:flex;align-items:flex-start;justify-content:space-between;padding:1.3rem 0;border-bottom:1px solid var(--line);gap:1.8rem}
.ctog:last-of-type{border:none}
.ctog-nm{font-size:.85rem;color:var(--ink);font-weight:400;margin-bottom:.35rem;display:block}
.ctog-ds{font-size:.75rem;color:var(--mut);line-height:1.75;font-weight:300}
.tg{position:relative;width:46px;height:25px;flex-shrink:0;margin-top:2px}
.tg input{opacity:0;width:0;height:0;position:absolute}
.tg-sl{position:absolute;inset:0;background:rgba(10,58,76,.16);border-radius:25px;cursor:pointer;transition:background .35s}
.tg-sl::before{content:'';position:absolute;height:19px;width:19px;left:3px;bottom:3px;background:var(--faint);border-radius:50%;transition:all .35s}
.tg input:checked+.tg-sl{background:var(--d3)}
.tg input:checked+.tg-sl::before{transform:translateX(21px);background:var(--l1)}
.tg input:disabled+.tg-sl{opacity:.5;cursor:not-allowed}

/* ── EDITOR ──────────────────────────────────────── */
body.edit-on [data-edit]{outline:1px dashed rgba(21,106,124,.4);outline-offset:4px;cursor:text;transition:all .25s;min-height:1em}
body.edit-on [data-edit]:hover{outline-color:var(--d3);background:rgba(21,106,124,.07)}
body.edit-on [data-edit]:focus{outline:1px solid var(--d3);background:rgba(21,106,124,.1)}
body.edit-on [data-img]{position:relative;cursor:pointer}
body.edit-on [data-img]::after{content:'Bild tauschen';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,58,76,.92);color:var(--l1);font-family:'Jost',sans-serif;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;padding:.7rem 1.3rem;border:1px solid var(--l1);z-index:5;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .3s}
body.edit-on [data-img]:hover::after{opacity:1}
.edbar{position:fixed;top:0;left:0;right:0;z-index:9997;background:var(--l1);border-bottom:1px solid var(--d3);padding:.85rem 1.5rem;display:none;align-items:center;gap:.9rem;flex-wrap:wrap}
.edbar.show{display:flex}
body.edit-on{padding-top:60px}body.edit-on nav{top:60px}
.edbar-tag{font-size:.55rem;letter-spacing:.28em;text-transform:uppercase;color:var(--d3);border:1px solid var(--d3);padding:.36rem .85rem;white-space:nowrap}
.edbar-unsaved{display:none;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:#a8702a;border:1px solid rgba(168,112,42,.4);padding:.36rem .8rem}
.edbar-unsaved.on{display:inline-block}
.edbar-info{font-size:.68rem;color:var(--mut);flex:1;min-width:140px;font-weight:300}
.edb{background:none;color:var(--mut);border:1px solid var(--line);padding:.5rem 1.1rem;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;transition:all .3s;white-space:nowrap}
.edb:hover{border-color:var(--d3);color:var(--d3)}
.edb.prim{background:var(--d1);border-color:var(--d1);color:var(--l1)}
.edb.prim:hover{background:transparent;color:var(--d1)}
.edb.warn{border-color:rgba(168,74,74,.35);color:#a84a4a}
.adm{position:fixed;bottom:2rem;right:2rem;z-index:9999;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem}
.adm-pw{display:none;flex-direction:column;gap:.7rem;background:var(--l1);border:1px solid var(--d3);padding:1.4rem;min-width:230px}
.adm-pw.show{display:flex}
.adm-pw label{font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.adm-pw input{background:transparent;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:.6rem .1rem;font-size:.88rem;outline:none;transition:border-color .3s}
.adm-pw input:focus{border-bottom-color:var(--g)}
.adm-pw-btn{background:var(--d1);color:var(--l1);border:none;padding:.7rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;transition:opacity .3s}
.adm-err{font-size:.68rem;color:#a84a4a;display:none}
.adm-lbl{background:var(--l1);color:var(--mut);font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;padding:.45rem 1rem;border:1px solid var(--line);white-space:nowrap;pointer-events:none}
.adm-btn{background:var(--d1);color:var(--l1);border:none;width:56px;height:56px;border-radius:50%;font-size:1.15rem;box-shadow:0 6px 28px rgba(10,58,76,.25);transition:all .35s;display:flex;align-items:center;justify-content:center}
.adm-btn:hover{transform:scale(1.07)}

/* ── FOOTER ──────────────────────────────────────── */
footer{background:var(--l2);border-top:1px solid var(--line);padding:6rem 8vw 3.4rem;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:5rem}
.ft-l{height:56px;margin-bottom:2rem;opacity:.9}
.ft-t{font-size:.8rem;line-height:2.15;color:var(--mut);font-weight:300}
.ft-t a{transition:color .3s}.ft-t a:hover{color:var(--d3)}
.ft-h{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--g);margin-bottom:1.9rem}
.ft-u{list-style:none;display:flex;flex-direction:column;gap:.95rem}
.ft-u a,.ft-u button{color:var(--mut);font-size:.82rem;font-weight:300;transition:color .3s;background:none;border:none;text-align:left;padding:0}
.ft-u a:hover,.ft-u button:hover{color:var(--d3)}
.ft-b{background:var(--l4);padding:1.7rem 8vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);flex-wrap:wrap;gap:1.2rem}
.ft-b span{font-size:.6rem;color:var(--faint);letter-spacing:.12em}
.ft-s{display:flex;gap:2rem}
.ft-s a{font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);transition:color .3s}
.ft-s a:hover{color:var(--d3)}


/* ── INTRO / MANIFEST ────────────────────────────── */
.intro{background:var(--l1);padding:8.5rem 8vw;text-align:center}
.intro-in{max-width:780px;margin:0 auto}
.intro-lead{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:300;line-height:1.62;color:var(--ink);letter-spacing:.008em}
.intro-lead em{font-style:italic;color:var(--g)}
.intro-sub{margin-top:2rem;font-size:.9rem;line-height:2.05;color:var(--mut);font-weight:300}

/* ── SÄULEN ──────────────────────────────────────── */
.pil{background:var(--l2);padding:7rem 8vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pil-g{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);max-width:1300px;margin:0 auto;border:1px solid var(--line)}
.pil-c{background:var(--l2);padding:3.4rem 2rem;text-align:center;transition:background .5s}
.pil-c:hover{background:var(--l1)}
.pil-i{width:38px;height:38px;margin:0 auto 1.5rem;color:var(--d3);opacity:.9}
.pil-t{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:400;margin-bottom:.7rem;letter-spacing:.02em}
.pil-d{font-size:.78rem;color:var(--mut);line-height:1.85;font-weight:300}

/* ── SIGNATURE ───────────────────────────────────── */
.sig{background:var(--l3);padding:8.5rem 8vw}
.sig-h{text-align:center;margin-bottom:4.5rem}
.sig-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3.5rem;max-width:1200px;margin:0 auto}
.sig-c{text-align:center;position:relative;padding-top:2.4rem}
.sig-c::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:1px;background:var(--d3)}
.sig-n{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:300;margin-bottom:.85rem;letter-spacing:.01em}
.sig-d{font-size:.82rem;color:var(--mut);line-height:1.9;font-weight:300;margin-bottom:1.2rem}
.sig-p{font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--g)}
.sig-f{text-align:center;margin-top:4.5rem}

/* ── BAR ─────────────────────────────────────────── */
.bar-s{background:var(--l2);padding:9rem 8vw;position:relative;overflow:hidden}
.bar-in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.bar-list{list-style:none;margin-top:2.4rem}
.bar-li{display:block;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.bar-li:last-child{border:none}
.bar-nm{font-size:.9rem;font-weight:300;color:var(--ink)}
.bar-ds{font-size:.72rem;color:var(--faint);display:block;margin-top:.2rem}
.bar-pr{font-family:'Cormorant Garamond',serif;font-size:1.1rem;color:var(--g);white-space:nowrap}
.bar-img{overflow:hidden;aspect-ratio:4/5}
.bar-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
.bar-img:hover img{transform:scale(1.05)}

/* ── STIMMEN ─────────────────────────────────────── */
.voi{background:var(--l2);padding:8.5rem 8vw;text-align:center}
.voi-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:4rem;max-width:1250px;margin-left:auto;margin-right:auto;border:1px solid var(--line)}
.voi-c{background:var(--l2);padding:3.4rem 2.4rem;text-align:center}
.voi-st{color:var(--gd);font-size:.72rem;letter-spacing:.4em;margin-bottom:1.6rem}
.voi-t{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-style:italic;line-height:1.85;color:var(--ink);font-weight:300}
.voi-a{margin-top:1.6rem;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}

/* ── ANFAHRT ─────────────────────────────────────── */
.anf{background:linear-gradient(165deg,var(--l4),var(--l3));padding:9rem 8vw}
.anf-in{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5.5rem;align-items:center}
.anf-box{border:1px solid var(--line);padding:3rem 2.6rem;background:var(--l1)}
.anf-r{padding:1.35rem 0;border-bottom:1px solid var(--line);display:flex;gap:1.4rem;align-items:flex-start}
.anf-r:last-child{border:none;padding-bottom:0}
.anf-r:first-child{padding-top:0}
.anf-k{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d3);min-width:96px;padding-top:.28rem}
.anf-v{font-size:.86rem;color:var(--mut);line-height:1.8;font-weight:300}
.anf-v strong{color:var(--ink);font-weight:400}

/* ── GUTSCHEIN ───────────────────────────────────── */
.gut{background:var(--l2);padding:7.5rem 8vw;text-align:center;border-top:1px solid var(--line)}
.gut-in{max-width:640px;margin:0 auto}

@media(min-width:769px) and (max-width:1100px){
  .pil-g{grid-template-columns:1fr 1fr}
  .sig-g{grid-template-columns:1fr;gap:3rem}
  .bar-in{grid-template-columns:1fr;gap:3.5rem}
  .voi-g{grid-template-columns:1fr}
  .anf-in{grid-template-columns:1fr;gap:3.5rem}
}
@media(max-width:768px){
  .intro{padding:5.5rem 1.8rem}.intro-lead{font-size:1.35rem}
  .pil{padding:4.5rem 1.5rem}.pil-g{grid-template-columns:1fr 1fr}
  .pil-c{padding:2.6rem 1.2rem}.pil-t{font-size:1.1rem}.pil-d{font-size:.73rem}
  .sig{padding:5.5rem 1.5rem}.sig-g{grid-template-columns:1fr;gap:3rem}.sig-h{margin-bottom:3rem}
  .bar-s{padding:5.5rem 1.5rem}.bar-in{grid-template-columns:1fr;gap:3rem}
  .voi{padding:5.5rem 1.5rem}.voi-g{grid-template-columns:1fr}.voi-c{padding:2.6rem 1.6rem}
  .anf{padding:5.5rem 1.5rem}.anf-in{grid-template-columns:1fr;gap:3rem}
  .anf-box{padding:2.2rem 1.6rem}
  .anf-r{flex-direction:column;gap:.5rem}.anf-k{min-width:auto}
  .gut{padding:5rem 1.5rem}
}

/* Ohne JavaScript ist alles sichtbar */
.no-js .r{opacity:1;transform:none}
@media(scripting:none){.r{opacity:1!important;transform:none!important}}

/* ── Anklickbare Fl\u00e4chen ─────────────────────── */
[data-act]{cursor:pointer}
[role="button"]{transition:background .4s,border-color .4s}
.sig-c[data-act]:hover .sig-n,.pil-c[data-act]:hover .pil-t{color:var(--d3)}
.sig-c[data-act]::after{content:'Zur Karte';display:block;margin-top:1.1rem;font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--d3);opacity:0;transition:opacity .4s}
.sig-c[data-act]:hover::after{opacity:1}
.od[data-act]:hover{background:rgba(21,106,124,.05)}
.bar-li[data-act]:hover .bar-nm{color:var(--d3)}
[data-act]:focus-visible{outline:1px solid var(--g);outline-offset:4px}
.gs{position:relative}
/* Kein Schild „Galerie öffnen“ beim Überfahren (Wunsch des Nutzers, v0.59); Zoom und Rahmen reichen */


/* ── Modals ohne JavaScript: \u00f6ffnen \u00fcber die Adresszeile ──
   Klick auf einen Link mit #modal-id blendet das Fenster ein.
   Wenn JavaScript l\u00e4uft, \u00fcbernimmt es und unterdr\u00fcckt den Sprung. */
.bk:target{background:rgba(10,58,76,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:all}
.bk:target .md{transform:none;opacity:1}


/* Volllink für anklickbare Kacheln — funktioniert auch ohne JavaScript */
.cover-link{position:absolute;inset:0;z-index:4;display:block;text-indent:-9999px;overflow:hidden}
.ec,.sig-c,.pil-c,.gs,.bar-li,.od{position:relative}


/* Terminband direkt unter der Infoleiste */
.tband{background:var(--l4);border-bottom:1px solid var(--line);padding:1.6rem 8vw}
.tband-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
.tband-l{font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;color:var(--d3);white-space:nowrap}
.tband-list{display:flex;gap:2.2rem;flex-wrap:wrap;flex:1}
.tband-i{display:flex;align-items:baseline;gap:.7rem;font-size:.78rem;color:var(--mut);font-weight:300}
.tband-d{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--ink)}
.tband-i.ev .tband-d{color:var(--gd)}
.tband-i.cl .tband-d{color:#a84a4a}
.tband-a{font-size:.55rem;letter-spacing:.26em;text-transform:uppercase;color:var(--d3);border-bottom:1px solid var(--line);padding-bottom:3px;white-space:nowrap;transition:border-color .3s}
.tband-a:hover{border-color:var(--d3)}
@media(max-width:768px){
  .tband{padding:1.2rem 1.5rem}.tband-in{gap:1rem}
  .tband-list{gap:1.2rem}.tband-i{font-size:.72rem}
}


/* ── Begr\u00fc\u00dfungsfenster ohne JavaScript ───────────────
   Wird beim \u00d6ffnen der Seite automatisch angezeigt und
   verschwindet, sobald man es schlie\u00dft oder ein anderes
   Fenster \u00f6ffnet. L\u00e4uft JavaScript, steuert dieses es. */
#mWel{z-index:990;background:rgba(10,58,76,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:all}
#mWel .md{transform:none;opacity:1}
#nowelcome:target ~ #mWel,
.bk:target ~ #mWel{background:rgba(10,58,76,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);pointer-events:none}
#nowelcome:target ~ #mWel .md,
.bk:target ~ #mWel .md{transform:translateY(30px) scale(.98);opacity:0}
/* L\u00e4uft JavaScript, blendet es das Fenster selbst ein */
body.js-on #mWel{background:rgba(10,58,76,0);backdrop-filter:blur(0);pointer-events:none}
body.js-on #mWel .md{transform:translateY(30px) scale(.98);opacity:0}
body.js-on #mWel.open{background:rgba(4,32,47,.9);backdrop-filter:blur(14px);pointer-events:all}
body.js-on #mWel.open .md{transform:none;opacity:1}
/* Kein Aufblitzen beim Laden: html.js steht sofort im Kopf, body.js-on erst nach site.js.
   Solange das Fenster nicht per JavaScript geöffnet ist, bleibt es zu. */
html.js #mWel:not(.open){background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important}
html.js #mWel:not(.open) .md{opacity:0!important;transform:translateY(16px)!important}

/* ═══ Begrüßungsfenster im Stil von banmaai.de (v0.44) ══════════════════
   Wunsch des Nutzers (28.09.2026): Layout wie auf banmaai.de – runde Ecken, Foto oben, der
   Hintergrund bleibt sichtbar und wird nur leicht unscharf. Vorher lag ein fast deckendes
   Petrol (90 %) mit 14 px Unschärfe darüber, von der Seite war nichts mehr zu sehen, und das
   eckige Fenster wirkte wie ein Formular. Jetzt: helles Petrol mit 28 % und 4 px Unschärfe,
   langsames Ein- und Ausblenden (1,4 s), das Fenster steigt dabei 16 px auf.
   Das Logo oben entfällt: Es sitzt nach dem Logo-Flug schon in der Menüleiste, stattdessen
   die Strandterrasse im Abendlicht (bb-05), die unten weich in den Fenstergrund ausläuft. */
body.js-on #mWel{transition:background 1.4s ease,backdrop-filter 1.4s ease,-webkit-backdrop-filter 1.4s ease}
body.js-on #mWel.open{background:rgba(10,58,76,.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#mWel .md{max-width:520px;border:none;border-radius:22px;box-shadow:0 30px 90px rgba(4,32,47,.34);
  transition:opacity 1.3s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
body.js-on #mWel .md{transform:translateY(16px);opacity:0}
body.js-on #mWel.open .md{transform:none;opacity:1}
#mWel .md-x{border-radius:50%;background:rgba(251,248,243,.85);border:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#mWel .md-x:hover{background:var(--d1);color:var(--l1)}
.wel-h{padding:0 2rem 1.2rem;border-bottom:none}
.wel-pic{height:190px;margin:0 -2rem 1.4rem;background:url("../img/v2/bb-05.jpg") center 58%/cover;position:relative}
.wel-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,190,140,.10),rgba(251,248,243,0) 45%,var(--l1) 100%)}
.wel-t{font-size:1.75rem}
.wel-s{font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--mut);font-weight:300;margin-top:.6rem}
.wel-b{padding:.4rem 2rem 1.6rem}
/* Heute-Zeile und Termine als ein Block mit runden Ecken, oben dunkel wie die Statusleiste */
.wel-box{border-radius:14px;overflow:hidden;margin-bottom:1.6rem;box-shadow:0 0 0 1px var(--line)}
.wel-heute{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;background:var(--d1);color:var(--l1);font-family:'Cormorant Garamond',serif;font-size:1.12rem;line-height:1.35}
.wel-heute em{font-style:normal;color:#ebd79b}
.wel-heute .stat-dot{flex-shrink:0}
.wel-heute>span:last-child{text-wrap:balance}
/* Event- und Geschlossen-Zeilen: Die Tönung lag bisher direkt auf dem Linien-Grund der Liste und
   wirkte grau-trüb; jetzt über dem hellen Fenstergrund */
.wel-box .wel-row.ev{background:linear-gradient(rgba(168,133,63,.12),rgba(168,133,63,.12)),var(--l1)}
.wel-box .wel-row.cl{background:linear-gradient(rgba(192,87,90,.08),rgba(192,87,90,.08)),var(--l1)}
.wel-box .wel-list{border:none;margin-bottom:0}
.wel-acts{gap:.6rem}
.wel-a{border:1px solid transparent;border-radius:14px;background:var(--l2);padding:1rem 1.1rem}
.wel-a:hover{background:var(--l3);border-color:rgba(21,106,124,.3)}
.wel-a-t{font-family:'Jost',sans-serif;font-size:.92rem;font-weight:400;margin-bottom:.3rem}
.wel-skip{margin-top:.8rem;font-size:.78rem;letter-spacing:.02em;text-transform:none}
/* Handy: Das Fenster gleitet als Blatt von unten herein und liegt unten an der Kante an –
   deshalb nur oben runde Ecken. Die Kacheln bleiben zweispaltig, sonst wird das Fenster zu lang. */
@media(max-width:768px){
  #mWel .md{border-radius:22px 22px 0 0;max-width:100%}
  .wel-h{padding:0 1.3rem 1.1rem!important}
  .wel-pic{height:150px;margin:0 -1.3rem 1.1rem}
  .wel-b{padding:.3rem 1.3rem 1.4rem!important}
  .wel-t{font-size:1.45rem}
  .wel-heute{font-size:1.02rem;padding:.9rem 1rem}
  .wel-heute>span:last-child{text-wrap:balance}
  .wel-acts{grid-template-columns:1fr 1fr!important}
  .wel-a{padding:.9rem .95rem}
}

/* Geschlossene Fenster ganz aus der Darstellung nehmen (von banmaai.de, dort 28.09.2026): Alle
   .bk liegen auch geschlossen als unsichtbare Vollbild-Ebenen mit backdrop-filter über der Seite.
   Safari auf dem iPhone hält dafür bei dreifacher Auflösung Hunderte MB Grafikspeicher vor –
   banmaai.de stürzte dadurch beim Scrollen ab. Mit der sichtbaren Unschärfe im Begrüßungsfenster
   gilt das hier genauso. Verstecken erst nach dem Ausblenden, Öffnen wirkt sofort. */
html.js .bk:not(.open):not(:target){visibility:hidden;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .5s,backdrop-filter .5s,-webkit-backdrop-filter .5s,visibility 0s .5s}
html.js body.js-on #mWel:not(.open):not(:target){transition:background 1.4s ease,backdrop-filter 1.4s ease,-webkit-backdrop-filter 1.4s ease,visibility 0s 1.6s}


/* Buttons im Hero liegen auf dem Foto */
.hb .btn{background:#fbf8f3;color:var(--d1);border-color:#fbf8f3}
.hb .btn:hover{background:transparent;color:#fbf8f3;border-color:#fbf8f3}
.hb .btn-o{color:#fbf8f3;border-color:rgba(251,248,243,.45)}
.hb .btn-o:hover{border-color:#fbf8f3;color:#fbf8f3}
/* Navigation über dem Hero, solange nicht gescrollt */
nav:not(.sc) .nm a{color:rgba(251,248,243,.8)}
nav:not(.sc) .nm a:hover{color:#fff}
nav:not(.sc) .nm a::after{background:#fbf8f3}
nav:not(.sc) .nres{color:#fbf8f3;border-color:rgba(251,248,243,.6)}
nav:not(.sc) .nres:hover{background:#fbf8f3;color:var(--d1)}
nav:not(.sc) .nbg span{background:#fbf8f3}
nav:not(.sc) .nlogo{filter:brightness(0) invert(1)}


/* Event-Karten mit Bild im Hintergrund */
.ec{position:relative;overflow:hidden;isolation:isolate}
.ec-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.16;transition:opacity .6s,transform 1.2s cubic-bezier(.16,1,.3,1);z-index:-1}
.ec:hover .ec-bg{opacity:.3;transform:scale(1.05)}


.md-pic{width:100%;height:190px;object-fit:cover;display:block}
@media(max-width:768px){.md-pic{height:140px}}


.md-pic{background-size:cover;background-position:center}
.gimg{width:100%;height:100%;background-size:cover;background-position:center;transition:transform 1s cubic-bezier(.16,1,.3,1),filter .6s;filter:brightness(.97)}
.gi:hover .gimg,.gs:hover .gimg{transform:scale(1.06);filter:brightness(1)}
.gs .gimg{filter:brightness(.95) saturate(.95)}


/* Zarte Bildhintergründe für die textlastigen Bereiche */
.qt,.gut,.ozs,.anf{position:relative;isolation:isolate}
.qt::after,.gut::after,.ozs::after,.anf::after{
  content:'';position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:.1;z-index:-1;pointer-events:none}
.qt::after{background-image:var(--bgZitat);opacity:.12}
.gut::after{background-image:var(--bgGut);opacity:.11}
.ozs::after{background-image:var(--bgZeiten);opacity:.09}
.anf::after{background-image:var(--bgAnf);opacity:.11}


/* ── REVEAL ──────────────────────────────────────── */
.r{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
.r.d1{transition-delay:.13s}.r.d2{transition-delay:.26s}.r.d3{transition-delay:.39s}
.r.vis{opacity:1;transform:none;will-change:auto}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.r{opacity:1;transform:none}}

/* ── TABLET ──────────────────────────────────────── */
@media(min-width:769px) and (max-width:1100px){
  nav{padding:1.2rem 2rem}nav.sc{padding:.85rem 2rem}
  .nm{gap:1.2rem}.nm a{font-size:.55rem;letter-spacing:.2em}
  .spi{min-height:60vh}.spt{padding:5rem 4vw}
  .eg{grid-template-columns:1fr}
  .gal-strip{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  footer{grid-template-columns:1fr 1fr;gap:3rem}
  .ko-g{grid-template-columns:1fr;gap:3.5rem}
}
/* ── MOBILE ──────────────────────────────────────── */
@media(max-width:768px){
  .nm,.nres{display:none!important}.nbg{display:flex!important}
  nav{padding:1.1rem 1.5rem}nav.sc{padding:.85rem 1.5rem}
  .nlogo{height:30px}nav.sc .nlogo{height:26px}
  .hlogo{width:min(70vw,230px);margin-bottom:1.9rem}
  .hh{font-size:clamp(2.4rem,9vw,3.3rem)}
  .hs{letter-spacing:.3em;font-size:.53rem}
  .hb{flex-direction:column;gap:.9rem;width:100%}
  .hb .btn,.hb .btn-o{width:82%;text-align:center}
  .ib{flex-direction:column}
  .ii{border-right:none;border-bottom:1px solid var(--line);padding:1.05rem 1.5rem;justify-content:center;font-size:.56rem}
  .ii:last-child{border-bottom:none}
  .sp,.rev{grid-template-columns:1fr;direction:ltr}.rev>*{direction:ltr}
  .spi{min-height:66vw;max-height:78vw}
  .spt{padding:4rem 1.8rem}
  .feat{padding:5.5rem 1.8rem}.feat-logo{width:150px}
  .qt{padding:6rem 1.8rem}.qtt{font-size:1.45rem}
  .gal-t{padding:5rem 1.5rem}
  .gal-strip{grid-template-columns:1fr 1fr;gap:2px;margin:2.6rem 0}
  .gal-grid{grid-template-columns:1fr 1fr;gap:2px}
  .gal-grid figcaption{opacity:1;transform:none;font-size:.52rem;padding:1.1rem .7rem .6rem}
  .evs{padding:5rem 1.5rem}.eg{grid-template-columns:1fr}.ec{padding:3rem 1.8rem}
  .kal{padding:5rem 1.5rem}.kh{flex-direction:column;align-items:flex-start;gap:1.4rem}
  .cr{grid-template-columns:74px 1fr;gap:1.1rem;padding:1.3rem 1.3rem}
  .cb,.ce{display:none}.cdy{font-size:1.7rem}.cti{font-size:.82rem}.csu{font-size:.68rem}
  .ozs{padding:5.5rem 1.5rem}
  .od{grid-template-columns:1fr;text-align:center;gap:.5rem;padding:2.2rem .5rem}
  .odn,.ono{text-align:center}.odt{font-size:1.95rem}
  .kos{padding:5rem 1.5rem}.ko-g{grid-template-columns:1fr;gap:3rem}
  .kf,.rgrid{grid-template-columns:1fr}
  .ff input,.ff select,.ff textarea,.rf input,.rf select,.rf textarea{font-size:16px}
  .bk{align-items:flex-end;padding:0}
  .md{max-width:100%;max-height:90svh}
  .md-body{padding:2.2rem 1.6rem 2.8rem}.md-h{font-size:1.8rem}
  .md-con{flex-direction:column;align-items:flex-start;gap:.7rem}
  .mtab{font-size:.53rem;padding:.85rem 1rem;letter-spacing:.16em}
  .ck{padding:1.4rem 1.5rem}.ck-in{flex-direction:column;gap:1.2rem;align-items:flex-start}
  .ck-b{width:100%}.ck-acc,.ck-set{flex:1;text-align:center}
  footer{grid-template-columns:1fr;gap:3rem;padding:4.5rem 1.5rem 2rem}
  .ft-b{flex-direction:column;text-align:center;padding:1.5rem;gap:.8rem}
  .adm{bottom:1.2rem;right:1.2rem}.adm-btn{width:50px;height:50px}
  .lb-nav{width:40px;height:40px}.lb-p{left:.6rem}.lb-n{right:.6rem}
}








/* Bankverbindung im Gutscheinfenster */
.gs-bank{display:none;border:1px solid var(--d3);border-left-width:2px;padding:1.3rem 1.5rem;margin-top:1rem;background:var(--l3)}
.gs-bank.on{display:block}
.gs-bank-h{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d3);margin-bottom:1rem;display:block}
.gs-bz{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;align-items:baseline}
.gs-bk{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.gs-bv{font-size:.88rem;color:var(--ink);font-weight:300}
.gs-bv.iban{font-family:'Courier New',monospace;letter-spacing:.06em;font-size:.92rem;font-weight:700;color:var(--d1)}
.gs-bnote{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.74rem;line-height:1.75;color:var(--mut)}
.gs-bnote b{color:var(--d1);font-weight:400}
.gs-copy{margin-top:.9rem;background:none;border:1px solid var(--line);color:var(--d3);padding:.5rem 1rem;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;transition:all .3s}
.gs-copy:hover{border-color:var(--d3);background:var(--l1)}
@media(max-width:480px){
  .gs-bank{padding:1.1rem 1.1rem}
  .gs-bz{grid-template-columns:1fr;gap:.15rem .5rem}
  .gs-bk{margin-top:.5rem}
}


.gs-bank-grid{display:grid;grid-template-columns:1fr auto;gap:1.6rem;align-items:start}
.gs-qr{text-align:center;flex-shrink:0}
.gs-qr img{width:112px;height:112px;display:block;border:1px solid var(--line)}
.gs-qr span{display:block;margin-top:.5rem;font-size:.55rem;letter-spacing:.14em;color:var(--faint);line-height:1.5;max-width:112px}
@media(max-width:480px){
  .gs-bank-grid{grid-template-columns:1fr;gap:1.2rem}
  .gs-qr{text-align:left}
  .gs-qr span{max-width:none}
}


/* Bankdaten-Versand in der Verwaltung */
.gv-bank{border:1px solid var(--line);border-left:2px solid var(--d3);padding:1.3rem 1.5rem;margin:1.6rem 0;background:var(--l3)}
.gv-bank-h{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d3);margin-bottom:1rem;display:block}
.gv-bank-grid{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:start}
.gv-bz{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.2rem;align-items:baseline}
.gv-bk{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.gv-bv{font-size:.85rem;color:var(--ink);font-weight:300}
.gv-bv.iban{font-family:'Courier New',monospace;letter-spacing:.05em;font-weight:700;color:var(--d1)}
.gv-qr img{width:96px;height:96px;display:block;border:1px solid var(--line)}
.gv-qr span{display:block;margin-top:.45rem;font-size:.5rem;letter-spacing:.1em;color:var(--faint);max-width:96px;line-height:1.45}
.gv-bank-acts{display:flex;gap:.5rem;margin-top:1.1rem;flex-wrap:wrap}
.gv-bank-note{margin-top:.9rem;font-size:.7rem;line-height:1.7;color:var(--mut)}
@media(max-width:600px){.gv-bank-grid{grid-template-columns:1fr}.gv-qr span{max-width:none}}

/* Ablauf-Hinweis im Gutscheinfenster */
.gs-flow{border:1px solid var(--line);padding:1.2rem 1.4rem;margin:1.4rem 0 .4rem;background:var(--l3)}
.gs-flow-h{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--d3);margin-bottom:.9rem;display:block}
.gs-flow ol{list-style:none;counter-reset:gsf;margin:0;display:flex;flex-direction:column;gap:.6rem}
.gs-flow li{counter-increment:gsf;display:flex;gap:.8rem;font-size:.76rem;line-height:1.65;color:var(--mut)}
.gs-flow li::before{content:counter(gsf);flex-shrink:0;width:17px;height:17px;border:1px solid var(--d3);
  color:var(--d3);font-size:.55rem;display:flex;align-items:center;justify-content:center;margin-top:1px}
.gs-flow b{color:var(--ink);font-weight:400}

/* ═══ WINTERDORF ══════════════════════════════════════
   Weihnachtsfeiern draußen im Winterdorf, danach drinnen
   in der Winterhütte. Winternacht am Strand: Lichterkette
   oben, leiser Schnee, verschneite Dünen mit Strandhafer
   als Übergang – das Gegenstück zu den Wellen bei „Was
   uns ausmacht". Das Gold ist hier heller (--wg), weil
   --g auf dem dunklen Petrol zu schwach lesbar war.
   Kein filter/backdrop-filter auf großen Flächen
   (iPhone-Safari, siehe Banmaai).                     */
:root{--winDh:clamp(108px,12.5vw,225px)}
.win{--wg:#dcc285;--dh:var(--winDh);--dc:calc(var(--dh) * .3);color:var(--l1);
     background:linear-gradient(180deg,#eaf1f2 0,#c6d7dc calc(var(--kh) * .5),#6c93a0 calc(var(--kh) * 1.15),
       #0d3547 calc(var(--kh) * 2),#04202f calc(var(--kh) * 2.8),#0a3a4c 46%,#0f4d63 calc(100% - var(--dh) * 1.5),
       #3f6f7f calc(100% - var(--dh) * .55),#7fa3ae 100%) top/100% calc(100% - var(--dc)) no-repeat;
     padding:12rem 8vw 13rem;position:relative;z-index:2;overflow:hidden;margin-bottom:calc(var(--dh) * -1)}
.win::before{content:'';position:absolute;inset:0 0 var(--dc);z-index:0;pointer-events:none;
     background:radial-gradient(ellipse 60% 45% at 50% 20%,rgba(255,205,130,.14),transparent 70%),
                radial-gradient(ellipse at 15% 70%,rgba(235,215,155,.07),transparent 55%),
                radial-gradient(ellipse at 85% 55%,rgba(127,196,194,.10),transparent 55%)}
.win-in{max-width:1220px;margin:0 auto;position:relative;z-index:2}

/* Karten, Badge und Hinweis sind deckend, damit kein Schnee
   durch den Text rieselt. */
/* Schnee: zwei gekachelte Ebenen, die per transform um genau eine
   Kachelhöhe wandern – nahtlos und ohne Neuzeichnen pro Bild. */
.win-flocken{position:absolute;inset:0 0 var(--dc);z-index:1;pointer-events:none;overflow:hidden}
.win-flocken i{position:absolute;left:0;right:0;bottom:0;will-change:transform}
.win-flocken i:first-child{top:-260px;background-size:260px 260px;animation:winSchnee1 24s linear infinite;
  background-image:radial-gradient(circle at 165px 77px,rgba(255,255,255,0.27) 0.9px,transparent 1.7px),
    radial-gradient(circle at 48px 187px,rgba(255,255,255,0.57) 1.0px,transparent 1.8px),
    radial-gradient(circle at 109px 19px,rgba(255,255,255,0.4) 0.8px,transparent 1.6px),
    radial-gradient(circle at 123px 46px,rgba(255,255,255,0.27) 1.0px,transparent 1.8px),
    radial-gradient(circle at 63px 114px,rgba(255,255,255,0.45) 1.1px,transparent 1.9px),
    radial-gradient(circle at 31px 203px,rgba(255,255,255,0.33) 0.7px,transparent 1.5px),
    radial-gradient(circle at 68px 148px,rgba(255,255,255,0.44) 1.0px,transparent 1.8px),
    radial-gradient(circle at 157px 92px,rgba(255,255,255,0.45) 0.8px,transparent 1.6px),
    radial-gradient(circle at 96px 190px,rgba(255,255,255,0.5) 0.8px,transparent 1.6px)}
.win-flocken i:last-child{top:-420px;background-size:420px 420px;animation:winSchnee2 38s linear infinite;
  background-image:radial-gradient(circle at 288px 30px,rgba(255,255,255,0.31) 1.8px,transparent 2.6px),
    radial-gradient(circle at 272px 218px,rgba(255,255,255,0.3) 1.9px,transparent 2.7px),
    radial-gradient(circle at 232px 185px,rgba(255,255,255,0.37) 1.6px,transparent 2.4px),
    radial-gradient(circle at 357px 399px,rgba(255,255,255,0.33) 1.6px,transparent 2.4px),
    radial-gradient(circle at 268px 253px,rgba(255,255,255,0.36) 2.0px,transparent 2.8px),
    radial-gradient(circle at 147px 311px,rgba(255,255,255,0.23) 2.1px,transparent 2.9px)}
@keyframes winSchnee1{to{transform:translateY(260px)}}
@keyframes winSchnee2{to{transform:translateY(420px)}}

/* Übergang oben: Das Seeglas des Event-Abschnitts läuft in weichen
   Wellen aus, und der Hintergrund beginnt selbst im Seeglas und
   dämmert über gut zwei Wellenhöhen in die Nacht (Verlauf in .win).
   Unter der Wellenkante liegt derselbe Federrand wie unten am Schnee
   (zehn um je 2,4 px versetzte Kopien mit 14 %), damit auch die Kante
   selbst weich ausläuft; nur die Wellenform bleibt sichtbar.
   Die Lichterkette hängt in den Wellentälern (x = 0, 720, 1440). Kante und Kette skalieren deshalb
   gleich: gleiche Breite, gleiche Mindest-/Höchstskala (0,533 … 1,25),
   beide mittig beschnitten. */
.win{--kh:clamp(59px,7.64vw,137.5px)}
.win-kante{position:absolute;top:-1px;left:0;width:100%;height:var(--kh);z-index:1;pointer-events:none}
.win-lichter{position:absolute;top:calc(var(--kh) * .7455);left:0;width:100%;height:clamp(64px,8.333vw,150px);z-index:1;pointer-events:none}
.win-lichter .b{animation:winFunkeln 3.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes winFunkeln{0%,100%{opacity:1}50%{opacity:.42}}

.win-head{text-align:center;max-width:700px;margin:0 auto 4.2rem}
.win-badge{position:relative;display:inline-flex;align-items:center;border-radius:999px;
     padding:.8rem 1.7rem .8rem 2.2rem;margin-bottom:2rem;background:#062a3a;
     border:1px solid rgba(220,194,133,.55);box-shadow:0 0 0 5px rgba(220,194,133,.07),0 14px 30px -14px rgba(0,0,0,.6)}
.win-badge span{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--wg);font-weight:500;white-space:nowrap}
.win-muetze{position:absolute;left:-22px;top:-29px;width:56px;height:47px;transform:rotate(-24deg);
     filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.win-h{font-family:'Cormorant Garamond',serif;font-size:clamp(2.3rem,4.4vw,3.8rem);font-weight:300;line-height:1.08}
.win-h em{font-style:italic;color:var(--wg);display:block}
.win-t{margin-top:1.6rem;font-size:.95rem;line-height:2.05;color:rgba(251,248,243,.8);font-weight:300}

.win-flow{display:grid;grid-template-columns:1fr 88px 1fr;align-items:stretch}
.win-step{padding:3rem 2.6rem 2.8rem;border-radius:24px;
     background:linear-gradient(170deg,#184d60,#0d3f52);
     border:1px solid rgba(220,194,133,.24);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.6);
     transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .5s}
.win-step.vis:hover{transform:translateY(-5px);border-color:rgba(220,194,133,.45)}
.win-ic{display:block;width:84px;height:84px;margin-left:-6px;margin-bottom:1.3rem;color:var(--wg)}
.win-num{font-size:.56rem;letter-spacing:.32em;text-transform:uppercase;color:var(--wg);margin-bottom:1rem;display:block}
.win-st{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:300;margin-bottom:.5rem;line-height:1.15}
.win-sub{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(251,248,243,.55);margin-bottom:1.4rem;display:block}
.win-d{font-size:.88rem;line-height:1.95;color:rgba(251,248,243,.76);font-weight:300}
.win-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.win-tag{font-size:.62rem;letter-spacing:.12em;color:rgba(251,248,243,.86);border-radius:999px;
     background:rgba(251,248,243,.05);border:1px solid rgba(220,194,133,.24);padding:.45rem .95rem;white-space:nowrap;transition:all .35s}
.win-tag:hover{border-color:var(--wg);color:var(--wg)}

/* „danach": zeigt den Ablauf draußen → drinnen */
.win-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}
.win-mid::before,.win-mid::after{content:'';flex:1;width:1px;background:linear-gradient(transparent,rgba(220,194,133,.35),transparent)}
.win-mid-o{width:46px;height:46px;border-radius:50%;border:1px solid rgba(220,194,133,.5);color:var(--wg);
     display:flex;align-items:center;justify-content:center;background:#0a3a4c}
.win-mid-o svg{width:18px;height:18px}
.win-mid-t{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(251,248,243,.5)}

.win-cta{margin-top:3.6rem;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.win-b{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.9rem;
     min-height:58px;border-radius:999px;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:500;
     transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,background .45s,border-color .45s}
.win-b1{padding:.5rem .5rem .5rem 2.1rem;color:var(--d1);
     background:linear-gradient(135deg,#efd9a2 0%,#d4b46e 48%,#a8853f 100%);
     box-shadow:0 16px 36px -16px rgba(220,180,100,.8),inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.12)}
.win-b1 i{width:42px;height:42px;border-radius:50%;background:var(--d1);color:#efd9a2;
     display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.win-b1 i svg{width:17px;height:17px}
/* Lichtreflex, der beim Hover über den Goldknopf streicht */
.win-b1::after{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-120%);transition:transform .9s cubic-bezier(.16,1,.3,1);
     background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%)}
.win-b1:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(220,180,100,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.win-b1:hover::after{transform:translateX(120%)}
.win-b1:hover i{transform:translateX(3px)}
.win-b2{padding:0 2rem 0 1.7rem;color:var(--l1);background:#11465a;
     border:1px solid rgba(220,194,133,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.win-b2 svg{width:19px;height:19px;color:var(--wg);flex-shrink:0}
.win-b2:hover{transform:translateY(-2px);background:#185268;border-color:var(--wg)}
.win-b:focus-visible{outline:2px solid var(--wg);outline-offset:3px}

.win-note{width:fit-content;max-width:100%;margin:2.2rem auto 0;text-align:center;font-size:.72rem;line-height:1.8;
     color:rgba(251,248,243,.64);padding:.7rem 1.6rem;border-radius:999px;
     background:#0b3a4d;border:1px solid rgba(251,248,243,.1)}

.win-duene{position:absolute;left:0;bottom:0;width:100%;height:var(--dh);z-index:1;pointer-events:none}
/* Der Event-Abschnitt davor hat viel Luft nach unten; die Wellenkante
   oben bringt schon eigenen Abstand mit. */
.evs:has(+#winter){padding-bottom:4.5rem}
/* Der folgende Abschnitt rückt um 70 % der Dünenhöhe nach unten – das ist
   genau der Teil, den Nachthimmel und Schnee immer deckend überlagern.
   Ohne das fehlte dem Foto oben ein Stück (auf dem Handy der Kopf). */
#winter+*{padding-top:calc(var(--winDh) * .7)}
@media(max-width:900px){.evs:has(+#winter){padding-bottom:3rem}}
/* Übergang unten: Der Abschnitt ragt mit den Dünen über den nächsten
   (negativer Außenabstand). Der Hintergrund endet bei y = 126 von 180
   der Dünen-SVG (--dc), genau unter dem Schneeband, das diese Kante
   überall verdeckt. Weich wird es durch vier Dinge: Der Nachthimmel
   hellt zu den Dünen hin auf, über der hinteren Düne liegt ein leichter
   Schneedunst (Kopien nach oben versetzt, je 10 %), die Düne selbst hat
   einen Verlauf zum Schnee hin, und unter der Schneekante liegen zehn um je 2,4 px
   versetzte, fast durchsichtige Kopien (je 14 %) – ein Federrand ohne
   Weichzeichner, der auf dem iPhone teuer wäre. Mit 4-px-Schritten
   waren die Stufen auf dem Foto als Linien zu sehen. Unter der welligen Unterkante des Schnees ist die
   SVG leer, dort erscheint schon das Foto des Restaurant-Abschnitts –
   keine gerade Kante mehr. Ein eigener dunkler Himmel in der SVG
   hätte nie genau zu Verlauf und Lichtschein gepasst. */

@media(max-width:900px){
  .win{padding:9rem 1.4rem 8rem}
  .win-head{margin-bottom:2.8rem}
  .win-flow{grid-template-columns:1fr}
  .win-mid{flex-direction:row;height:78px}
  .win-mid::before,.win-mid::after{width:auto;height:1px;flex:1;max-width:90px;background:linear-gradient(90deg,transparent,rgba(220,194,133,.35),transparent)}
  .win-mid-o svg{transform:rotate(90deg)}
  .win-step{padding:2.4rem 1.6rem 2.2rem}
  .win-cta{flex-direction:column;align-items:stretch}
  .win-b1{justify-content:space-between}
  .win-b2{justify-content:center}
  .win-note{border-radius:18px;padding:.9rem 1.2rem}
}
@media(max-width:480px){
  .win{padding:8rem 1.1rem 7rem}
  .win-badge{padding:.7rem 1.1rem .7rem 1.8rem}
  .win-badge span{font-size:.6rem;letter-spacing:.18em}
  .win-muetze{width:40px;height:34px;left:-15px;top:-21px}
  .win-h{font-size:2.05rem}.win-st{font-size:1.55rem}.win-ic{width:60px;height:60px}
  .win-b{font-size:.6rem;letter-spacing:.2em}
}
@media(prefers-reduced-motion:reduce){.win-flocken i,.win-lichter .b{animation:none}}
@media print{.win{background:none!important;padding:1.2rem 0!important;margin-bottom:0!important}.win::before,.win-flocken,.win-kante,.win-lichter,.win-duene{display:none}}

/* ═══ SAISON ══════════════════════════════════════════
   Was gerade Saison hat — Muscheln, Spargel, Pfifferlinge.
   Vollständig über den Bearbeitungsmodus änderbar.     */
.sai{background:linear-gradient(160deg,var(--d1),var(--d2) 55%,var(--d3));color:var(--l1);
     padding:6.5rem 8vw;position:relative;overflow:hidden}
.sai::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;
     opacity:.14;z-index:0;pointer-events:none;background-image:var(--p3)}
.sai-in{max-width:1180px;margin:0 auto;position:relative;z-index:2;
     display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
.sai-badge{display:inline-flex;align-items:center;gap:.7rem;border:1px solid rgba(235,215,155,.45);
     padding:.55rem 1.2rem;margin-bottom:1.7rem}
.sai-pulse{width:7px;height:7px;border-radius:50%;background:var(--g);
     animation:saiPulse 2.4s ease-in-out infinite;flex-shrink:0}
@keyframes saiPulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(235,215,155,.5)}
                    50%{opacity:.7;box-shadow:0 0 0 6px rgba(235,215,155,0)}}
.sai-badge span{font-size:.55rem;letter-spacing:.32em;text-transform:uppercase;color:var(--g);white-space:nowrap}
.sai-h{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.4rem);
     font-weight:300;line-height:1.08;color:var(--l1)}
.sai-h em{font-style:italic;color:var(--g);display:block}
.sai-t{margin-top:1.5rem;font-size:.92rem;line-height:2;color:rgba(251,248,243,.72);font-weight:300;max-width:46ch}
.sai-zeit{margin-top:1.4rem;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(251,248,243,.5)}
.sai-list{display:flex;flex-direction:column;gap:1px;background:rgba(251,248,243,.12);
     border:1px solid rgba(251,248,243,.14)}
.sai-i{display:flex;justify-content:space-between;align-items:flex-start;gap:1.6rem;
     padding:1.35rem 1.6rem;background:rgba(4,32,47,.5);transition:background .4s}
.sai-i:hover{background:rgba(4,32,47,.25)}
.sai-n{font-size:.95rem;color:var(--l1);font-weight:300;display:block}
.sai-d{font-size:.74rem;color:rgba(251,248,243,.6);line-height:1.7;display:block;margin-top:.24rem}
.sai-p{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--g);white-space:nowrap;flex-shrink:0}
.sai-cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap}
.sai .btn{background:var(--g);color:var(--d1);border-color:var(--g)}
.sai .btn:hover{background:transparent;color:var(--g)}
.sai .btn-o{color:var(--l1);border-color:rgba(251,248,243,.35)}
.sai .btn-o:hover{border-color:var(--l1);color:var(--l1)}

@media(min-width:769px) and (max-width:1024px){.sai-in{gap:3rem}}
@media(max-width:768px){
  .sai{padding:4.5rem 1.5rem}
  .sai-in{grid-template-columns:1fr;gap:2.4rem}
  .sai-t{max-width:none}
  .sai-i{padding:1.1rem 1.2rem;gap:1rem}
  .sai-cta{flex-direction:column}
  .sai-cta .btn,.sai-cta .btn-o{width:100%;text-align:center}
}
@media(max-width:480px){.sai{padding:3.6rem 1.2rem}.sai-h{font-size:1.9rem}}
@media print{.sai{background:none!important;padding:1.2rem 0!important}.sai::before{display:none}}

/* ═══ STATUS & TERMINE ════════════════════════════════
   Direkt unter dem Hero: Was ist heute, was kommt als
   Nächstes, wann ist geschlossen.                     */
.stat{background:var(--d1);color:var(--l1);padding:0;border-bottom:1px solid var(--line)}
.stat-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:stretch}
.stat-now{display:flex;align-items:center;gap:1rem;padding:1.5rem 2.4rem;border-right:1px solid rgba(251,248,243,.14);white-space:nowrap}
.stat-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.stat-dot.op{background:#6fd08c;animation:blink 2.6s ease-in-out infinite}
.stat-dot.cl{background:#e8877f}
.stat-dot.ev{background:var(--g)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
.stat-lbl{font-size:.5rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(251,248,243,.5);display:block;margin-bottom:.2rem}
.stat-txt{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:300;line-height:1.15;color:var(--l1)}
.stat-txt em{font-style:normal;color:var(--g)}

.stat-next{display:flex;align-items:center;gap:0;overflow-x:auto;scrollbar-width:none;padding:0}
.stat-next::-webkit-scrollbar{display:none}
.sn{display:flex;align-items:center;gap:1rem;padding:1.5rem 1.8rem;border-right:1px solid rgba(251,248,243,.1);white-space:nowrap;transition:background .35s;min-width:0}
.sn:hover{background:rgba(251,248,243,.05)}
/* Die Termine waren nur so breit wie ihr Text, rechts blieb ein leerer Streifen. Jetzt teilen sie
   sich die volle Breite; sind es mehr, als hineinpassen, bleibt die Leiste seitlich wischbar
   (flex-shrink 0). Wie auf banmaai.de. */
.stat-next .sn{flex:1 0 auto}
.sn-leer,.sn-leer:hover{cursor:default;background:none}
.sn-d{text-align:center;flex-shrink:0}
.sn-dd{font-family:'Cormorant Garamond',serif;font-size:1.65rem;line-height:1;color:var(--l1)}
.sn-dm{font-size:.48rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(251,248,243,.5);margin-top:.15rem}
.sn-i{min-width:0}
.sn-t{font-size:.82rem;color:var(--l1);font-weight:300;display:block;overflow:hidden;text-overflow:ellipsis}
.sn-s{font-size:.64rem;color:rgba(251,248,243,.55);display:block;margin-top:.12rem;overflow:hidden;text-overflow:ellipsis}
.sn-b{font-size:.46rem;letter-spacing:.2em;text-transform:uppercase;padding:.28rem .62rem;border:1px solid;flex-shrink:0}
.sn.ev{background:rgba(235,215,155,.1)}
.sn.ev .sn-dd{color:var(--g)}
.sn.ev .sn-b{color:var(--d1);background:var(--g);border-color:var(--g)}
.sn.cl{background:rgba(232,135,127,.1)}
.sn.cl .sn-dd{color:#e8877f}
.sn.cl .sn-b{color:#e8877f;border-color:rgba(232,135,127,.45)}
.sn.op .sn-b{color:rgba(251,248,243,.7);border-color:rgba(251,248,243,.22)}
.stat-all{display:flex;align-items:center;gap:.8rem;padding:1.5rem 2.2rem;border-left:1px solid rgba(251,248,243,.14);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--g);white-space:nowrap;transition:background .35s}
.stat-all:hover{background:rgba(235,215,155,.1)}

@media(max-width:1100px){
  .stat-in{grid-template-columns:1fr}
  .stat-now{border-right:none;border-bottom:1px solid rgba(251,248,243,.14);padding:1.2rem 1.6rem}
  /* Einspaltig darf der Heute-Text umbrechen: "nowrap" machte die ganze Seite auf dem Handy
     breiter als den Bildschirm, sobald der Text lang war (z. B. "Heute geschlossen — wieder
     geöffnet am Donnerstag …" oder ein Event mit Uhrzeit und Reservierungshinweis). */
  .stat-now{white-space:normal}
  .stat-now>span:last-child{min-width:0}
  .stat-txt{display:block;text-wrap:balance}
  .stat-all{border-left:none;border-top:1px solid rgba(251,248,243,.14);padding:1.1rem 1.6rem;justify-content:center}
  .sn{padding:1.1rem 1.4rem}
}
@media(max-width:480px){
  .stat-now{padding:1rem 1.2rem;gap:.8rem}
  .stat-txt{font-size:1.05rem}
  .sn{padding:.95rem 1.1rem;gap:.8rem}
  .sn-dd{font-size:1.4rem}
  .sn-t{font-size:.76rem}
  .sn-s{font-size:.58rem}
  .sn-b{display:none}
}
@media print{.stat{display:none}}


/* ═══ LOGO-FLUG (Entwurf v0.43, wie banmaai.de) ══════════════════
   Das Hero-Logo wandert nach ~2,5 s in die Menüleiste (js/site.js initLogoFlug). Nur transform
   und opacity im Seitenfluss: Die Lücke im Hero schließt sich sofort, .hero-c gleitet per
   translateY nach (FLIP). Die fliegende Kopie ändert width/height statt scale – mit scale wurde
   das große Logo auf banmaai.de als fertiges Bild heruntergerechnet und flimmerte. Sie ist fixed
   und ohne Seitenfluss, ihr Größenwechsel verschiebt also nichts.
   Leisten-Logo bis zur Landung unsichtbar – per html.js aus dem <head>, damit es beim Laden nicht
   erst kurz zu sehen ist und dann verschwindet. Ohne JavaScript bleibt es stehen. */
html.js .nlogo:not(.da){opacity:0}
.nlogo{transition:height .45s,opacity .3s}
.hlogo-flug{position:fixed;z-index:400;pointer-events:none;transform-origin:top left;will-change:transform,opacity;opacity:0;
  transition:transform 1.15s cubic-bezier(.62,.03,.2,1),width 1.15s cubic-bezier(.62,.03,.2,1),height 1.15s cubic-bezier(.62,.03,.2,1),opacity .18s ease}
.hlogo-flug.an{opacity:1}
.hlogo-flug i{position:absolute;inset:0;background:center/contain no-repeat}
.hf-g{background-image:var(--logoGold)!important}
/* Unterwegs von Gold auf das Leisten-Logo überblenden (Filter setzt das Skript vom Ziel) */
.hf-z{background-image:url("../img/v2/bb-13.png")!important;opacity:0;transition:opacity .7s .35s ease}
.hlogo-flug.fliegt .hf-z{opacity:1}
.hlogo.weg{visibility:hidden}
.hlogo.zu{height:0!important;margin:0!important}
.hero-c.rueckt{will-change:transform;transition:transform .9s cubic-bezier(.62,.03,.2,1)}

/* ═══ KEIN LOGO-AUFTAKT MEHR (v0.42) ══════════════════
   Bis v0.41 lag beim ersten Besuch ein großes Logo 4,6 s über der Seite, die Hero-Inhalte
   kamen fest erst nach 3,5–5,4 s (mit !important, deshalb auch beim zweiten Aufruf, obwohl
   initIntro die Verzögerung dort auf 0 setzen wollte). Nutzer (26.09.2026): Seite soll sofort
   da sein, das Begrüßungsfenster kurz danach — wie auf banmaai.de, wo der Auftakt ebenfalls
   entfernt wurde. Die Hero-Elemente laufen jetzt mit den Verzögerungen der Vorlage ein
   (Logo 0,25 s … Knöpfe 1,15 s), die Heute-Zeile direkt danach (1,45 s). */

/* ══ Hero: alles auf einer Mittelachse ══
   "Entdecken" (.sh) stand 37 px rechts der Mitte: zentriert war es mit left:50% plus
   translateX(-50%), die Einblend-Animation "rise" setzt aber selbst transform (translateY) und
   überschreibt das — übrig blieb nur left:50%, also die linke Kante in der Mitte. Jetzt über die
   Breite zentriert, dann darf die Animation transform frei benutzen.
   Gesperrte Schrift (letter-spacing) hängt auch hinter den letzten Buchstaben einen Abstand; der
   Text rückt dadurch um die Hälfte davon nach links. Ein gleich großer Innenabstand links gleicht
   das aus. Gleiche Vorlage und gleicher Fehler wie auf banmaai.de, dort ebenso gelöst. */
.sh{left:0;right:0;margin:0 auto;width:max-content;transform:none}
.sh span{padding-left:.34em}
.hs{padding-left:.44em}
@media(max-width:768px){.hs{padding-left:.3em}}
@media(max-width:480px){.hs{padding-left:.14em}}

/* ══ Heute-Zeile im Hero ══
   "Jetzt geöffnet · Küche bis 21:30 · Telefon" unter den Knöpfen — das, was Gäste im ersten
   Bildschirm zuerst suchen. Der Text kommt aus der Statusleiste (initHeroHeute in site.js).
   Schrift wie die Unterzeile, Punkt wie in der Statusleiste, eingeblendet nach den Knöpfen. */
.hinfo{margin-top:2rem;display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;
  font-size:.72rem;letter-spacing:.08em;color:rgba(251,248,243,.9);text-shadow:0 1px 3px rgba(10,58,76,.55);
  opacity:0;animation:rise 1.5s 1.45s cubic-bezier(.16,1,.3,1) forwards}
.hinfo em{font-style:normal;color:#ebd79b}
.hinfo a{color:#fbf8f3;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(251,248,243,.45)}
.hinfo a:hover{text-decoration-color:#ebd79b}
.hinfo-sep{opacity:.55}
/* Punkt und Text bilden eine Einheit: Als eigene Flex-Elemente rutschte der Punkt bei langem Text
   ("Heute geschlossen — wieder geöffnet am Donnerstag …") auf dem Handy allein in eine Zeile
   darüber. Jetzt steht er im Textfluss vor dem ersten Wort und bricht mit um. */
.hinfo-st{min-width:0;text-align:center;text-wrap:balance}
.hinfo-dot{display:inline-block;vertical-align:middle;margin:-2px .6rem 0 0;width:7px;height:7px;border-radius:50%;background:#6fd08c;box-shadow:0 0 0 3px rgba(111,208,140,.25)}
/* Geschlossen: kräftigeres Rot statt des Altrosa (#e8877f), das neben dem Grün zu blass wirkte —
   derselbe Ton wie auf banmaai.de. Gilt für Hero und Statusleiste, nicht für die Kalender-Schilder. */
.hinfo-dot.cl{background:#e0605a;box-shadow:0 0 0 3px rgba(224,96,90,.25)}
.stat-dot.cl{background:#e0605a}
.hinfo-dot.ev{background:var(--g);box-shadow:0 0 0 3px rgba(168,133,63,.3)}
@media(max-width:768px){.hinfo{margin-top:1.4rem;font-size:.66rem;gap:.35rem .5rem}.hinfo-sep{display:none}.hinfo a{flex-basis:100%}}
/* Mit der Heute-Zeile wurde der Hero-Inhalt höher; auf Laptops (768 px und weniger Fensterhöhe)
   stieß er unten an "Entdecken". Abstände und Logo werden dort etwas knapper statt "Entdecken"
   auszublenden. */
@media(min-width:769px) and (max-height:860px){
  .hlogo{margin-bottom:2rem}.hrule{margin-bottom:1.6rem}.hb{margin-top:2.4rem}.hinfo{margin-top:1.3rem}
}
@media(min-width:769px) and (max-height:760px){.hlogo{width:min(78vw,250px);margin-bottom:1.6rem}.hb{margin-top:2rem}}
@media(min-width:769px) and (max-height:640px){.sh{display:none}}
@media(max-height:520px) and (orientation:landscape){.hinfo{margin-top:.9rem}}
@media(prefers-reduced-motion:reduce){.hinfo{animation:none;opacity:1}}
@media print{.hinfo{display:none}}

/* ═══ GUTSCHEINE ══════════════════════════════════════ */
/* Bestellstrecke für Gäste */
.gs-amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem}
.gs-amt{border:1px solid var(--line);background:none;padding:1rem .5rem;text-align:center;transition:all .3s;cursor:pointer}
.gs-amt:hover{border-color:var(--d3)}
.gs-amt.on{border-color:var(--d1);background:var(--d1);color:var(--l1)}
.gs-amt b{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;display:block}
.gs-amt span{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.gs-pay{display:flex;flex-direction:column;gap:.55rem;margin-top:.4rem}
.gs-pay label{display:flex;align-items:flex-start;gap:.8rem;padding:.9rem 1rem;border:1px solid var(--line);cursor:pointer;transition:all .3s}
.gs-pay label:hover{border-color:var(--d3)}
.gs-pay input{margin-top:.25rem;accent-color:var(--d3)}
.gs-pay b{font-size:.84rem;font-weight:400;display:block;color:var(--ink)}
.gs-pay small{font-size:.7rem;color:var(--mut);line-height:1.6;display:block;margin-top:.15rem}

/* Verwaltung */
.gv-top{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-bottom:1.4rem}
.gv-stat{border:1px solid var(--line);padding:.85rem 1.2rem;flex:1;min-width:110px}
.gv-stat b{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;display:block;color:var(--d1);line-height:1.1}
.gv-stat span{font-size:.5rem;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.gv-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);max-height:340px;overflow-y:auto}
.gv-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:1rem;align-items:center;padding:.9rem 1rem;background:var(--l1);font-size:.82rem}
.gv-row.used{opacity:.5}
.gv-no{font-family:'Courier New',monospace;font-size:.82rem;color:var(--d3);font-weight:700;letter-spacing:.06em}
.gv-info b{font-weight:400;color:var(--ink);display:block}
.gv-info small{color:var(--faint);font-size:.68rem}
.gv-val{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--d1);white-space:nowrap}
.gv-acts{display:flex;gap:.35rem}
.gv-b{background:none;border:1px solid var(--line);color:var(--mut);padding:.3rem .6rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;transition:all .3s;white-space:nowrap}
.gv-b:hover{border-color:var(--d3);color:var(--d3)}
.gv-b.ok{border-color:rgba(47,125,74,.4);color:#2f7d4a}
.gv-b.del:hover{border-color:#a84a4a;color:#a84a4a}
.gv-empty{padding:2.4rem;text-align:center;color:var(--faint);font-size:.82rem;background:var(--l1)}
.gv-err{display:none;padding:.7rem .9rem;border-left:2px solid #a84a4a;background:rgba(168,74,74,.07);font-size:.76rem;color:#a84a4a;margin-top:.6rem}

/* Der Gutschein selbst */
#voucherSheet{position:fixed;left:-9999px;top:0;width:210mm;min-height:148mm;background:#fbf8f3;color:#0a3a4c;
  font-family:'Jost',sans-serif;padding:13mm 15mm;box-sizing:border-box;display:flex;flex-direction:column}
.vs-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:6mm;border-bottom:.4mm solid rgba(10,58,76,.18)}
.vs-logo{height:21mm;width:auto;image-rendering:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.vs-kind{text-align:right}
.vs-kind b{font-family:'Cormorant Garamond',serif;font-size:8mm;font-weight:300;display:block;line-height:1}
.vs-kind span{font-size:2.4mm;letter-spacing:.34em;text-transform:uppercase;color:#a8853f}
.vs-mid{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:5mm 0 7mm}
.vs-for{font-size:2.6mm;letter-spacing:.3em;text-transform:uppercase;color:rgba(10,58,76,.5);margin-bottom:2mm}
.vs-name{font-family:'Cormorant Garamond',serif;font-size:9.5mm;font-weight:300;line-height:1.1;margin-bottom:4mm}
.vs-sum{font-family:'Cormorant Garamond',serif;font-size:15mm;font-weight:300;color:#156a7c;line-height:1;margin-bottom:4mm}
.vs-msg{font-size:3.2mm;line-height:1.8;color:rgba(10,58,76,.72);max-width:130mm;margin:0 auto;font-style:italic}
.vs-from{font-size:2.8mm;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,58,76,.5);margin-top:5mm}

.vs-rest{margin-top:0;padding-top:4.5mm;border-top:.3mm dashed rgba(10,58,76,.32)}
.vs-rest-h{font-size:2.2mm;letter-spacing:.26em;text-transform:uppercase;color:#a8853f;margin-bottom:1.6mm}
.vs-tab{width:100%;border-collapse:collapse;font-size:2.5mm}
.vs-tab th{text-align:left;font-weight:400;font-size:2mm;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(10,58,76,.45);padding:0 0 1mm 1mm;border-bottom:.25mm solid rgba(10,58,76,.25)}
.vs-tab td{height:5.4mm;border-bottom:.25mm solid rgba(10,58,76,.16);padding-left:1mm}
.vs-tab th:nth-child(1),.vs-tab td:nth-child(1){width:26%}
.vs-tab th:nth-child(2),.vs-tab td:nth-child(2){width:24%}
.vs-tab th:nth-child(3),.vs-tab td:nth-child(3){width:30%}
.vs-tab th:nth-child(4),.vs-tab td:nth-child(4){width:20%}
.vs-foot{margin-top:2mm;display:grid;grid-template-columns:1.1fr .85fr .85fr 1.4fr;gap:4mm;padding-top:5mm;border-top:.4mm solid rgba(10,58,76,.18);align-items:end}
.vs-f{font-size:2.5mm;line-height:1.7;color:rgba(10,58,76,.62)}
.vs-f b{display:block;font-size:2.2mm;letter-spacing:.24em;text-transform:uppercase;color:#a8853f;font-weight:400;margin-bottom:1mm}
.vs-no{font-family:'Courier New',monospace;font-size:4.4mm;letter-spacing:.14em;color:#0a3a4c;font-weight:700}
.vs-ctr{text-align:center}.vs-rgt{text-align:right}

@media print{
  body.printing-voucher>*{display:none!important}
  body.printing-voucher #voucherSheet{display:flex!important;position:static!important;left:0!important;width:100%!important;height:auto!important;min-height:140mm;padding:12mm 14mm}
  @page{size:A5 landscape;margin:0}
}

@media(max-width:768px){
  .gs-amounts{grid-template-columns:repeat(2,1fr)}
  .gv-row{grid-template-columns:1fr auto;gap:.6rem}
  .gv-acts{grid-column:1/-1;flex-wrap:wrap}
  .gv-top{gap:.5rem}
  .gv-stat{min-width:0;padding:.7rem .8rem}
  .gv-stat b{font-size:1.2rem}
}

/* ═══════════════════════════════════════════════════════
   GERÄTE-ANPASSUNGEN
   Von iPhone SE bis 4K-Monitor, mit Rücksicht auf
   Notch-Bereiche, Touch-Bedienung und Drucken.
   ═══════════════════════════════════════════════════════ */

/* ── Sichere Bereiche (iPhone-Notch, Android-Gesten) ── */
nav{padding-left:max(3rem,env(safe-area-inset-left));padding-right:max(3rem,env(safe-area-inset-right));padding-top:max(1.6rem,env(safe-area-inset-top))}
nav.sc{padding-top:max(.95rem,env(safe-area-inset-top))}
.hero-c{padding-left:max(1.5rem,env(safe-area-inset-left));padding-right:max(1.5rem,env(safe-area-inset-right))}
.sh{bottom:max(2rem,calc(env(safe-area-inset-bottom) + 1rem))}
.ck{padding-bottom:max(1.7rem,calc(env(safe-area-inset-bottom) + .8rem))}
.adm{bottom:max(2rem,calc(env(safe-area-inset-bottom) + 1rem));right:max(2rem,calc(env(safe-area-inset-right) + .5rem))}
.mn-x{top:max(2rem,calc(env(safe-area-inset-top) + .5rem));right:max(2rem,calc(env(safe-area-inset-right) + .5rem))}
footer,.ft-b{padding-left:max(8vw,env(safe-area-inset-left));padding-right:max(8vw,env(safe-area-inset-right))}
.ft-b{padding-bottom:max(1.7rem,calc(env(safe-area-inset-bottom) + .5rem))}
.md{padding-bottom:env(safe-area-inset-bottom)}

/* ── Touchgeräte: Effekte, die sonst nur bei Maus erscheinen ── */
@media (hover:none),(pointer:coarse){
  .ec-desc,.ecd{max-height:140px!important;opacity:1!important}
  .ecbtn,.ec-l{opacity:1!important;transform:none!important}
  .gc,.gi-cap{opacity:1!important;transform:none!important}
  .gal-grid figcaption{opacity:1;transform:none}
  .sig-c[data-act]::after{opacity:1}
  .ec-bg{opacity:.24}
  /* Größere Trefferflächen */
  .nm a,.ft-u a,.ft-u button,.mn a{padding-top:.45rem;padding-bottom:.45rem}
  .md-x,.lb-x{width:42px;height:42px}
  .cnb{width:44px;height:44px}
  .mtab,.lg-tab{padding-top:1.05rem;padding-bottom:1.05rem}
  .tg{width:50px;height:28px}
  .tg-sl::before{height:22px;width:22px}
  .tg input:checked+.tg-sl::before{transform:translateX(22px)}
}

/* ── Sehr große Bildschirme: iMac, 4K ── */
@media(min-width:1600px){
  html{font-size:17px}
  .ni{max-width:1560px}
  .hero-c{max-width:1000px}
  .intro-in{max-width:880px}
  .pil-g,.mosaic-grid{max-width:1480px}
  .sig-g,.gal-strip{max-width:1400px}
  .eg,.voi-g,.gal-grid{max-width:1480px;margin-left:auto;margin-right:auto}
  .bar-in,.anf-in{max-width:1340px}
  .cg{max-width:1400px;margin-left:auto;margin-right:auto}
  .oz-g{max-width:820px}
  .ko-g{max-width:1400px;margin-left:auto;margin-right:auto}
  footer{max-width:1560px;margin-left:auto;margin-right:auto}
  .md{max-width:680px}
  #mMenu .md{max-width:860px}
  #mLegal .md{max-width:940px}
  #mGal .md{max-width:1320px}
}
@media(min-width:2200px){
  html{font-size:19px}
  .hero-c{max-width:1200px}
}

/* ── Große Notebooks & Desktops: 1101–1599 ── */
@media(min-width:1101px) and (max-width:1599px){
  .nm{gap:1.15rem}
  .spt{padding:6rem 5vw}
}

/* ── MacBook Air/Pro 13″ und kleine Notebooks ── */
@media(min-width:1025px) and (max-width:1366px){
  .hero{min-height:560px}
  .hh{font-size:clamp(2.6rem,5.2vw,4.2rem)}
  .spi{min-height:0}
  .sp{min-height:78vh}
  .spt{padding:5rem 4.5vw}
  .intro,.sig,.evs,.voi,.kal,.kos,.hoch,.anf,.gal-t{padding-top:6.5rem;padding-bottom:6.5rem}
  .qt{padding:7rem 8vw}
  .ozs{padding:7rem 8vw}
  .nm{gap:.95rem}
  .nm a{font-size:.52rem;letter-spacing:.14em}
}

/* ── Tablet quer: iPad Pro, Surface ── */
@media(min-width:1025px) and (max-width:1100px){
  .eg{grid-template-columns:repeat(3,1fr)}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── Tablet hoch: iPad, Galaxy Tab ── */
@media(min-width:769px) and (max-width:1024px){
  .hero{min-height:620px}
  .sp{min-height:auto}
  .spi{min-height:52vh;max-height:60vh}
  .spt{padding:4.5rem 5vw}
  .mg{grid-template-columns:repeat(3,1fr)}
  .gi.tall{grid-column:span 2;grid-row:span 2}
  .gal-strip{grid-template-columns:repeat(4,1fr)}
  .gal-grid{grid-template-columns:repeat(3,1fr)}
  .eg{grid-template-columns:repeat(3,1fr)}
  .ec{padding:2.8rem 1.6rem}
  .ec-t{font-size:1.45rem}
  .voi-g{grid-template-columns:repeat(3,1fr)}
  .pil-g{grid-template-columns:repeat(4,1fr)}
  .pil-c{padding:2.6rem 1.2rem}
  .bar-in{grid-template-columns:1fr 1fr;gap:3rem}
  .anf-in{grid-template-columns:1fr 1fr;gap:3rem}
  .ko-g{grid-template-columns:1fr;gap:3rem}
  footer{grid-template-columns:1.3fr 1fr 1fr;gap:2.5rem}
  .cr{grid-template-columns:110px 1fr auto auto;gap:1.2rem;padding:1.4rem 1.5rem}
  .md{max-width:600px}
  #mMenu .md,#mLegal .md{max-width:700px}
}

/* ── Handy quer (niedrige Höhe) ── */
@media(max-height:520px) and (orientation:landscape){
  .hero{height:auto;min-height:100svh;padding:5rem 0 3rem}
  .hlogo{width:min(46vw,150px);margin-bottom:1rem}
  .hh{font-size:2rem}
  .hs{margin-top:.6rem;font-size:.5rem}
  .hb{margin-top:1.4rem;flex-direction:row;gap:.8rem}
  .hb .btn,.hb .btn-o{width:auto;padding:.75rem 1.6rem}
  .hrule{margin-bottom:1rem}
  .sh{display:none}
  .mn ul{gap:.9rem}
  .mn a,.mn button{font-size:1.25rem}
  .mn-cta{margin-top:.8rem;padding:.6rem 1.8rem}
  .bk{align-items:center;padding:1rem}
  .md{max-height:94svh}
  .md-pic{height:110px}
}

/* ── Größere Handys: 481–768 ── */
@media(min-width:481px) and (max-width:768px){
  .mg{grid-template-columns:repeat(3,1fr)}
  .gi.tall{grid-column:span 2;grid-row:span 2}
  .gal-strip,.gal-grid{grid-template-columns:repeat(3,1fr)}
  .welcome-actions,.wel-acts{grid-template-columns:1fr 1fr}
  .rgrid,.kf{grid-template-columns:1fr 1fr}
}

/* ── Kleine Handys: bis 480 ── */
@media(max-width:480px){
  html{font-size:15.5px}
  nav{padding-left:1.2rem;padding-right:1.2rem}
  .nlogo{height:24px}
  .hlogo{width:min(66vw,190px);margin-bottom:1.3rem}
  .hh{font-size:2.1rem;line-height:1.06}
  .hs{letter-spacing:.14em;font-size:.5rem}
  .hb .btn,.hb .btn-o{width:90%;padding:.85rem 1.4rem;font-size:.65rem}
  .ii{font-size:.54rem;padding:.75rem 1rem;letter-spacing:.08em}
  .hd{font-size:1.85rem}
  .spt .hd{font-size:1.75rem}
  .intro-lead{font-size:1.2rem}
  .bt,.intro-sub{font-size:.85rem;line-height:1.85}
  .spt,.intro,.pil,.sig,.evs,.voi,.kal,.kos,.hoch,.anf,.gut,.gal-t{padding-left:1.2rem;padding-right:1.2rem}
  .mg,.gal-strip,.gal-grid{grid-template-columns:1fr 1fr}
  .gi.tall{grid-column:1/3}
  .pil-g{grid-template-columns:1fr}
  .pil-c{padding:2.2rem 1.4rem}
  .ec{aspect-ratio:auto;min-height:0;padding:2.4rem 1.4rem}
  .ec-t{font-size:1.4rem}
  .qtt{font-size:1.25rem;padding:0 1.2rem}
  .odt{font-size:1.7rem}
  .cr{grid-template-columns:58px 1fr;padding:.9rem;gap:.7rem}
  .cdy{font-size:1.45rem}
  .cti{font-size:.76rem}
  .csu{font-size:.62rem}
  .cml{font-size:1.2rem;min-width:120px}
  .md-body{padding:1.5rem 1.2rem 2.2rem}
  .md-h{font-size:1.55rem}
  .md-pic{height:120px}
  .mtabs{gap:0}
  .mtab{font-size:.5rem;padding:.75rem .7rem;letter-spacing:.1em}
  .mi{gap:1rem;padding:.9rem 0}
  .mi-n{font-size:.86rem}
  .mi-d{font-size:.7rem}
  .mi-p{font-size:1rem}
  .wel-acts,.welcome-actions{grid-template-columns:1fr}
  .wel-row{grid-template-columns:48px 1fr;padding:.85rem .9rem}
  .wel-t{font-size:1.35rem}
  .ck-b{flex-direction:column}
  .ck-acc,.ck-set,.ck-rej{width:100%;text-align:center}
  .tband-in{flex-direction:column;align-items:flex-start;gap:.8rem}
  .tband-list{flex-direction:column;gap:.5rem}
  .lb-nav{width:36px;height:36px;font-size:.95rem}
  .lb img{max-width:96vw;max-height:70vh}
}

/* ── Sehr kleine Handys: iPhone SE, bis 360 ── */
@media(max-width:360px){
  html{font-size:14.5px}
  .hh{font-size:1.85rem}
  .hlogo{width:min(62vw,165px)}
  .hd{font-size:1.65rem}
  .mg,.gal-strip,.gal-grid{grid-template-columns:1fr}
  .gi.tall{grid-column:auto}
  .md-h{font-size:1.4rem}
  .mtab{font-size:.46rem;padding:.7rem .5rem;letter-spacing:.06em}
  .edbar{padding:.6rem .8rem;gap:.5rem}
  .edb{padding:.4rem .7rem;font-size:.52rem}
}

/* ── Sehr breite, niedrige Fenster ── */
@media(min-aspect-ratio:21/9) and (min-width:1200px){
  .hero-c{max-width:1100px}
  .sp{min-height:auto}
  .spi{max-height:80vh}
}

/* ── Drucken ── */
@media print{
  *{background:transparent!important;color:#000!important;box-shadow:none!important}
  nav,.mn,.ck,.adm,.edbar,.sh,.bk,.lb,.tband,.gal-t,.gs{display:none!important}
  .r{opacity:1!important;transform:none!important}
  .hero{height:auto;min-height:0;page-break-after:avoid}
  .hero-bg,.hero-ov{display:none}
  .hh,.hs{color:#000!important;text-shadow:none!important}
  section,footer{page-break-inside:avoid;padding:1.2rem 0!important}
  .sp{grid-template-columns:1fr}
  .spi,.bar-img,.ec-bg{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555!important}
  a[href^="#"]::after{content:""}
  body{font-size:11pt}
}





/* ═══════════════════════════════════════════════════════════
   BACKEND-ANBINDUNG
   Bausteine, die mit dem Personal-Backend zusammenarbeiten:
   Reservierungs-Slots, Datumswahl, Admin-Links, Event-Felder
   und die Kacheln der naechsten Events.
   ═══════════════════════════════════════════════════════════ */

/* ── Admin: Links ins Backend ─────────────────────── */
.adm-links{display:none;flex-direction:column;gap:.5rem;background:var(--l1);border:1px solid var(--d3);padding:1rem;min-width:230px}
.adm-links.show{display:flex}
.adm-link{font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mut);border:1px solid var(--line);padding:.6rem .9rem;text-align:center;transition:all .3s}
.adm-link:hover{border-color:var(--d3);color:var(--d3)}

/* ── Reservierung: freie Uhrzeiten ────────────────── */
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.5rem;margin-top:.3rem}
.slot-btn{background:transparent;border:1px solid var(--line);color:var(--mut);padding:.6rem .3rem;font-size:.72rem;letter-spacing:.08em;transition:all .3s}
.slot-btn:hover:not(.full){border-color:var(--d3);color:var(--d3)}
.slot-btn.sel{background:var(--d1);border-color:var(--d1);color:var(--l1)}
.slot-btn.full{opacity:.32;text-decoration:line-through;cursor:not-allowed;pointer-events:none}
.slot-hint{font-size:.7rem;color:var(--faint);line-height:1.6;margin-top:.5rem}

/* ── Reservierung: Datumswahl ─────────────────────── */
#rd-input{cursor:pointer}
.cal{display:none;position:fixed;z-index:10000;background:var(--l1);border:1px solid var(--d3);
     padding:.9rem;box-shadow:0 14px 44px rgba(10,58,76,.18);min-width:250px}
.cal.open{display:block}
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.cal-hd span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--d3)}
.cal-hd button{background:none;border:1px solid var(--line);color:var(--mut);width:26px;height:26px;font-size:.9rem;line-height:1;transition:all .3s}
.cal-hd button:hover:not(:disabled){border-color:var(--d3);color:var(--d3)}
.cal-hd button:disabled{opacity:.25;cursor:not-allowed}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:.3rem}
.cal-wd span{text-align:center;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:.25rem 0}
.cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-day{background:transparent;border:1px solid transparent;color:var(--ink);padding:.45rem 0;font-size:.76rem;transition:all .25s}
.cal-day:hover:not(:disabled){border-color:var(--d3);color:var(--d3)}
.cal-day.today{border-color:var(--line);font-weight:400;color:var(--d3)}
.cal-day.sel{background:var(--d1);border-color:var(--d1);color:var(--l1)}
.cal-day.past{opacity:.25;cursor:not-allowed}

/* ── Termin-Dialog: Event-Felder ──────────────────── */
.e-switch-row{display:flex;align-items:flex-start;gap:.9rem;margin:1.1rem 0 .4rem;cursor:pointer}
.e-switch{flex-shrink:0;width:42px;height:23px;border:1px solid var(--line);background:var(--l2);
          border-radius:23px;position:relative;transition:all .3s;margin-top:.15rem}
.e-switch i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
            background:var(--faint);transition:all .3s}
.e-switch.on{background:var(--d3);border-color:var(--d3)}
.e-switch.on i{left:21px;background:#fff}
.e-switch-lbl{font-size:.76rem;color:var(--mut);line-height:1.5}
.e-switch-lbl small{display:block;margin-top:.3rem;font-size:.66rem;color:var(--faint);line-height:1.6}
.e-img-status{font-size:.68rem;color:var(--faint)}
.e-img-prev{display:none;align-items:center;gap:1rem;margin:.6rem 0 1rem}
.e-img-prev img{width:92px;height:62px;object-fit:cover;border:1px solid var(--line)}

/* ── Naechste Events ──────────────────────────────── */
.ue{padding:7rem 3.5rem;background:var(--l2)}
.ue-h{text-align:center;margin-bottom:3.5rem}
.ue-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem;max-width:1280px;margin:0 auto}
.uec{position:relative;min-height:290px;overflow:hidden;cursor:pointer;display:flex;
     flex-direction:column;justify-content:flex-end;border:1px solid var(--line);background:var(--l1)}
.ueb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s}
.uec:hover .ueb{transform:scale(1.05)}
.ueo{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,58,76,.88) 12%,rgba(10,58,76,.35) 55%,rgba(10,58,76,.1))}
.uec.noimg .ueo{background:linear-gradient(to top,rgba(10,58,76,.94),rgba(10,58,76,.72))}
.ued{position:absolute;top:1.3rem;left:1.3rem;z-index:2;background:var(--g);color:#fff;
     padding:.6rem .85rem;text-align:center;line-height:1}
.uedd{display:block;font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:400}
.uedm{display:block;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;margin-top:.2rem}
.uebody{position:relative;z-index:2;padding:1.6rem}
.uet{font-family:'Cormorant Garamond',serif;font-size:1.55rem;font-weight:300;color:#fff;line-height:1.25}
.ues2{font-size:.74rem;color:rgba(255,255,255,.78);margin-top:.5rem;line-height:1.6;font-weight:300}

/* ── Bearbeitungsmodus: Block-Werkzeuge ───────────── */
[data-block]{position:relative}
.blk-tools{display:none;position:absolute;top:.6rem;right:.6rem;z-index:60;gap:.3rem}
body.edit-on .blk-tools{display:flex}
.blk-btn{background:var(--l1);border:1px solid var(--d3);color:var(--d3);width:28px;height:28px;
         font-size:.8rem;line-height:1;transition:all .3s}
.blk-btn:hover{background:var(--d3);color:var(--l1)}
.blk-btn.del{border-color:#a84a4a;color:#a84a4a}
.blk-btn.del:hover{background:#a84a4a;color:#fff}

@media(max-width:768px){
  .ue{padding:4.5rem 1.4rem}
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr))}
  .adm-links{min-width:0}
}

/* ═══ SÄULEN „Was uns ausmacht" – edler und mit Strand (v0.45) ══════════════════
   Nutzer (28.09.2026): Der Abschnitt wirkte zu einfach (vier Felder mit Haarlinien, kleine
   Symbole) – edler wie auf banmaai.de und mit mehr Strandgefühl. Übernommen von banmaai.de:
   Milchglas-Karten (halbdurchsichtiges Weiß, weißer Rand mit Lichtkante, weicher Schatten, runde
   Ecken), große eigene Symbole in Gold, Überschrift mit Linien, Stichwort über jedem Titel,
   Karte hebt sich beim Zeigen. Eigene Ergänzung für den Strand: Der Grund läuft vom Leinen des
   Abschnitts darüber in warmen Sand, darauf weiche Flecken in Sand, Sonnengelb und Seeglas;
   unten laufen drei Wellen aus (Meerblau, Flachwasser, Seeglas), die vordere genau im Seeglas des Event-Abschnitts darunter –
   die Seite geht an dieser Stelle vom Strand ins Wasser über.
   Wie auf banmaai.de ohne filter:blur und ohne backdrop-filter: Dort war die Seite damit auf dem
   iPhone nicht mehr benutzbar (Safari rechnet beides bei dreifacher Auflösung als eigene Ebenen,
   der Speicher lief voll). Auf weichen Verläufen sieht man eine Unschärfe ohnehin kaum.
   Die Wellen bewegen sich langsam per transform (eine Ebene, kein Neuzeichnen); bei
   „Bewegung reduzieren" stehen sie. */
.pil{position:relative;overflow:hidden;isolation:isolate;padding:6.5rem 8vw 10rem;border:none;
  background:linear-gradient(180deg,var(--l1) 0%,#f7f0e4 55%,#f3eadb 100%)}
.pil::before{content:'';position:absolute;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36% 44% at 16% 30%,rgba(222,198,150,.45),rgba(222,198,150,0) 70%),
    radial-gradient(30% 36% at 62% 14%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(26% 32% at 86% 26%,rgba(255,214,160,.30),rgba(255,214,160,0) 70%),
    radial-gradient(34% 40% at 80% 74%,rgba(150,196,202,.30),rgba(150,196,202,0) 70%)}
.pil-lbl{display:flex;align-items:center;justify-content:center;gap:1.4rem;max-width:1300px;margin:0 auto 3.2rem}
.pil-lbl::before,.pil-lbl::after{content:'';flex:1;max-width:170px;height:1px;background:linear-gradient(90deg,transparent,rgba(168,133,63,.5))}
.pil-lbl::after{background:linear-gradient(90deg,rgba(168,133,63,.5),transparent)}
.pil-lbl span{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--g);white-space:nowrap;padding-left:.34em}
.pil-g{gap:1.4rem;background:none;border:none;padding:0;position:relative;z-index:1}
.pil-c{padding:3rem 1.8rem 2.8rem;border-radius:24px;cursor:pointer;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(168,133,63,.10),0 24px 50px -28px rgba(10,58,76,.30);
  transition:background .5s,transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s,opacity 1.1s cubic-bezier(.16,1,.3,1)}
.pil-c.r.vis:hover,.pil-c:hover{background:rgba(255,255,255,.75);transform:translateY(-5px);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(168,133,63,.14),0 32px 60px -28px rgba(10,58,76,.36)}
.pil-i{display:block;width:84px;height:84px;margin:0 auto 1.6rem;color:var(--g);opacity:1}
.pil-k{display:block;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--g);margin-bottom:.75rem;padding-left:.3em}
.pil-t{font-size:1.6rem;font-weight:400;letter-spacing:.01em;line-height:1.15;margin-bottom:.85rem;transition:color .4s}
.pil-d{max-width:27ch;margin:0 auto;font-size:.82rem;line-height:1.9}
.pil-wv{position:absolute;left:0;right:0;bottom:-1px;height:140px;pointer-events:none;z-index:0}
.pil-wv svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.pil-wv-b{fill:#cfe1e5;animation:pilWelle 46s linear infinite}
.pil-wv-m{fill:#dfeaec;animation:pilWelle 34s linear infinite reverse}
.pil-wv-f{animation:pilWelle 60s linear infinite}
.pil-wv-f .f{fill:var(--l3)}
.pil-wv-f .s{fill:none;stroke:#fff;stroke-width:1.4;opacity:.8;vector-effect:non-scaling-stroke}
@keyframes pilWelle{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.pil-wv svg{animation:none!important}}
@media(min-width:769px) and (max-width:1100px){.pil-g{gap:1rem}.pil-c{padding:2.4rem 1.2rem 2.2rem}.pil-t{font-size:1.4rem}}
@media(max-width:768px){
  .pil{padding:4.5rem 1.2rem 7rem}
  .pil-lbl{margin-bottom:2rem}
  .pil-g{gap:.8rem;grid-template-columns:1fr 1fr!important}
  .pil-c{padding:1.8rem .9rem 1.7rem!important;border-radius:18px}
  .pil-i{width:60px;height:60px;margin:0 auto 1.1rem}
  .pil-t{font-size:1.3rem!important;margin-bottom:.5rem}
  .pil-d{font-size:.8rem!important;line-height:1.6}
  .pil-wv{height:84px}
}

/* ═══ HERO-EFFEKTE ════════════════════════════════════
   Das Gegenstück zu den Schmetterlingen bei Primavera und den
   Lichtpunkten bei Banmaai: Möwen ziehen vor dem Sonnenuntergang
   vorbei, dazu steigen warme Lichtpunkte auf. Die Möwen liegen unter
   dem Farbschleier (.hero-ov), damit sie wie im Foto wirken.
   Nur transform/opacity auf kleinen Elementen, kein filter. Die
   Möwen starten erst nach dem Logo-Flug (Verzögerung 4 s bzw. mehr),
   damit im ersten Moment nichts vom Logo ablenkt.              */
.hero-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mw{position:absolute;left:0;will-change:transform;transform:translate3d(-12vw,0,0);animation:mwFlug var(--dauer) linear var(--ab) infinite}
.mw i{display:block;animation:mwWippen 6.5s ease-in-out infinite alternate}
.mw svg{display:block;width:var(--w);height:auto;overflow:visible;animation:mwSchlag 5.2s ease-in-out infinite}
.mw path{fill:none;stroke:#1d2731;stroke-opacity:.72;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
/* Ein Paar vorn, eine dritte weiter hinten (kleiner, langsamer, andere Richtung) */
.mw1{top:17%;--w:38px;--dauer:44s;--ab:4s}
.mw2{top:21%;--w:28px;--dauer:44s;--ab:5.6s}
.mw2 svg{animation-delay:-1.3s}
.mw3{top:30%;--w:18px;--dauer:62s;--ab:14s;animation-name:mwFlugR}
.mw3 path{stroke-opacity:.5}
/* Quer durchs Bild in gut 60 % der Zeit, danach Pause außerhalb */
@keyframes mwFlug{0%{transform:translate3d(-12vw,0,0)}62%,100%{transform:translate3d(112vw,-7vh,0)}}
@keyframes mwFlugR{0%{transform:translate3d(112vw,0,0)}62%,100%{transform:translate3d(-12vw,-4vh,0)}}
@keyframes mwWippen{from{transform:translateY(-6px) rotate(-3deg)}to{transform:translateY(8px) rotate(4deg)}}
/* Ein paar Flügelschläge, dann gleiten */
@keyframes mwSchlag{0%,34%,100%{transform:scaleY(1)}5%,15%,25%{transform:scaleY(-.35)}10%,20%,30%{transform:scaleY(1)}}

/* Warme Lichtpunkte wie bei Banmaai, hier in Rosé-Gold passend zum
   Abendhimmel. Sie liegen über dem Farbschleier, sonst verschwänden sie
   im dunklen unteren Bilddrittel. Erst war Glitzern auf dem Wasser
   geplant, aber je nach Bildausschnitt liegt unten Strand statt Meer. */
.gl{position:absolute;inset:0;z-index:1}
.gl b{position:absolute;bottom:-12px;width:var(--g);height:var(--g);border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle,#fff1d8 0%,rgba(255,214,170,.7) 38%,rgba(250,196,160,0) 72%);
  animation:glSteigen var(--t) linear var(--d) infinite}
@keyframes glSteigen{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:1}55%{transform:translate3d(var(--sw),-55vh,0);opacity:.7}
  92%{opacity:.2}100%{transform:translate3d(calc(var(--sw) * -.6),-105vh,0);opacity:0}}
@media(max-width:768px){
  .mw1{--w:30px;top:13%}.mw2{--w:22px;top:16%}.mw3{--w:14px;top:24%}
  .gl b:nth-child(n+9){display:none}
}
@media(prefers-reduced-motion:reduce){.hero-fx{display:none}}
@media print{.hero-fx{display:none}}

/* ═══ ÜBERGANG PRIMAVERA → LA BARRA ══════════════════
   Beide Abschnitte liegen auf Sand (--l2). Vorher trennte sie nur eine
   graue Haarlinie mit viel Leerraum darüber und darunter (6 + 9 rem).
   Jetzt fließt der Sand durch, und ein goldener Trenner mit Spritz-Glas
   markiert den Wechsel von der Küche zur Bar (ohne Text – „La Barra“
   steht direkt darunter als Überschrift). Die Bar bekommt einen
   warmen Aperitivo-Schein, der von der Nahtstelle aus einsetzt.   */
.feat:has(+.bar-s){border-bottom:none;padding-bottom:3rem}
.bar-s{padding-top:4rem;
  background:radial-gradient(ellipse 55% 60% at 76% 58%,rgba(236,178,128,.16),transparent 70%),
             linear-gradient(180deg,var(--l2) 0%,#f5ebdf 55%,var(--l2) 100%)}
.bar-ueb{display:flex;align-items:center;justify-content:center;gap:1.1rem;max-width:420px;margin:0 auto 5rem;color:var(--g)}
.bar-ueb i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(168,133,63,.55))}
.bar-ueb i:last-child{background:linear-gradient(90deg,rgba(168,133,63,.55),transparent)}
.bar-ueb svg{width:40px;height:40px;flex-shrink:0}
@media(max-width:900px){.bar-s{padding-top:3rem}.bar-ueb{margin-bottom:3.2rem;max-width:340px}.feat:has(+.bar-s){padding-bottom:2.5rem}}
@media print{.bar-ueb{display:none}}

/* ═══ SOCIAL-ICONS (v0.52) ═══
   Wie bei Primavera und Banmaai: runde Icons in der Menüleiste (vor „Reservieren") und in der
   Fußzeile. Reine Links, es wird nichts vom Anbieter nachgeladen. Auf dem Handy stehen sie vor der
   Menütaste; die Tippfläche ist dort 44 px (Mindestmaß von Apple/Google), der sichtbare Ring bleibt
   29 px und wird deshalb als ::before in die Mitte gezeichnet. */
.nl-g{display:flex;align-items:center;gap:1.4rem;flex-shrink:0}
.nsoc{display:flex;gap:.45rem;flex-shrink:0}
.sb{width:29px;height:29px;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mut);transition:color .35s,transform .35s}
.sb::before{content:'';position:absolute;left:50%;top:50%;width:29px;height:29px;margin:-14.5px 0 0 -14.5px;border-radius:50%;border:1px solid var(--line);transition:border-color .35s}
.sb svg{width:13px;height:13px;fill:currentColor;position:relative}
.sb:hover,.sb:focus-visible{color:var(--d3);transform:translateY(-1px)}
.sb:hover::before,.sb:focus-visible::before{border-color:var(--d3)}
nav:not(.sc) .sb{color:rgba(251,248,243,.8)}
nav:not(.sc) .sb::before{border-color:rgba(251,248,243,.4)}
nav:not(.sc) .sb:hover,nav:not(.sc) .sb:focus-visible{color:#fff}
nav:not(.sc) .sb:hover::before,nav:not(.sc) .sb:focus-visible::before{border-color:#fbf8f3}
/* Menütaste bis 1100 statt 768 px: Zehn Links und „Reservieren" passten schon vor den Icons nicht
   auf Tablet-Breite – der Knopf ragte bei 769 px 143 px, bei 900 px 12 px aus dem Fenster (gemessen,
   v0.52). Seit v0.53 (sieben Links mit „Öffnungszeiten") reicht auch 1024 px nicht mehr: Dort
   überlappte die Linkzeile die Icons. Das Menü (#mn) ist bildschirmfüllend und braucht keine Anpassung. */
@media(max-width:1100px){
  .nm,.nres{display:none!important}.nbg{display:flex!important}
  .ni{gap:.6rem}
  /* Auf Handy und Tablet stehen die Icons rechts vor der Menütaste, nicht neben dem Logo */
  .nl-g{display:contents}
  .nsoc{margin-left:auto;gap:0}
  .sb{width:44px;height:44px}
}
/* Menüleiste auf das Wesentliche reduziert (sechs statt zehn Links) und die Linkzeile genau in der
   Fenstermitte: Als flex:1 stand sie nur mittig zwischen den Seitengruppen, und die sind links
   (Logo + Icons) und rechts („Reservieren") unterschiedlich breit. Deshalb absolut in die Mitte der
   Leiste gesetzt; die Seitengruppen bleiben per space-between außen. Die alten Verkleinerungen der
   Links für 1025–1366 px (für zehn Links nötig) sind damit überflüssig und hier überschrieben. */
@media(min-width:1101px){
  .ni{position:relative}
  .nm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);flex:none;gap:2rem}
  .nm a{font-size:.6rem;letter-spacing:.2em}
}
/* Bis 1279 px enger: In voller Größe ist die Zeile 734 px breit und ließe bei 1200 px nur 15 px
   Luft zu den Icons; eng sind es 586 px, bei 1101 px bleiben so je mindestens 32 px (v0.53) */
@media(min-width:1101px) and (max-width:1279px){
  .nm{gap:1.1rem}
  .nm a{font-size:.56rem;letter-spacing:.16em}
}
.ft-soc{display:flex;gap:.55rem;margin-top:1.8rem}
.ft-sb{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);color:var(--mut);transition:color .3s,border-color .3s,transform .3s}
.ft-sb svg{width:15px;height:15px;fill:currentColor}
.ft-sb:hover,.ft-sb:focus-visible{color:var(--d3);border-color:var(--d3);transform:translateY(-1px)}

/* ═══ AKTIVER MENÜPUNKT (v0.54) ═══
   Wie beim Überfahren: Strich unter dem Link und Petrol; über dem Hero-Foto weiß. Gesetzt von
   initAktiv() in js/site.js. */
.nm a.act{color:var(--d3)}
.nm a.act::after{width:100%}
nav:not(.sc) .nm a.act{color:#fff}
.mn a.act{color:var(--d3)}

/* ═══ VORERST AUSGEBLENDET (v0.58) ═══
   Für Bereiche, die noch nicht fertig sind (derzeit Gutscheine). !important, weil z. B. die
   Linkzeile und Abschnitte eigene display-Werte haben, die das hidden-Attribut überstimmen würden. */
.bb-aus{display:none!important}

/* ═══ SCROLL-FORTSCHRITT (v0.60) ═══
   Wie bei Primavera eine Linie ganz oben, die mit der Scrollhöhe wächst. Für Blossom Beach von
   Meerblau nach Sand-Gold – vom Wasser an den Strand – und 2 statt 1 px, weil die helle, leicht
   durchsichtige Leiste eine 1-px-Linie verschluckt. Über der Leiste (z-index 200), nie klickbar. */
.prog{position:fixed;top:0;left:0;width:100%;height:2px;z-index:250;background:linear-gradient(90deg,var(--sea),var(--g2));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
body.edit-on .prog{top:60px}
@media print{.prog{display:none}}

/* ═══ RESERVIEREN ÜBER ZENCHEF (v0.61) ═══
   Aufbau wie das Fenster „Reservieren" bei Primavera: Telefon zuerst, dann Platzhalter mit
   Zustimmung, erst danach das Zenchef-Formular als iframe. */
.zc-tel{display:flex;flex-direction:column;align-items:center;gap:.35rem;margin:1.4rem 0 1.2rem;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--faint)}
.zc-tel a{font-family:'Cormorant Garamond',serif;font-size:1.9rem;letter-spacing:.04em;text-transform:none;color:var(--d3)}
.zc-oder{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem;font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}
.zc-oder::before,.zc-oder::after{content:'';flex:1;height:1px;background:var(--line)}
.zc-platz{border:1px solid var(--line);padding:1.6rem 1.4rem;text-align:center;font-size:.8rem;line-height:1.8;color:var(--mut);font-weight:300}
.zc-platz .btn{margin:1.1rem 0 .9rem}
.zc-direkt{font-size:.72rem}.zc-direkt a,.zc-hinweis a{color:var(--d3);text-decoration:underline;text-underline-offset:3px}
.zc-frame{display:none;width:100%;height:min(640px,70vh);border:1px solid var(--line);background:#fff}
.zc-frame.an{display:block}
.zc-hinweis{margin-top:1.2rem;font-size:.72rem;color:var(--faint);text-align:center}

/* ═══ FUSSZEILE AUFGERÄUMT, TEAM-ZUGANG, SCHWEBENDER RESERVIEREN-KNOPF (v0.62) ═══ */
/* Team-Zugang in der Spalte „Mehr" der Fußzeile (v0.65). Passwortfeld und Links klappen über dem
   Eintrag auf, damit die Spalte nicht wächst. */
footer .adm{position:relative;bottom:auto;right:auto;z-index:auto;display:block}
footer .adm-pw,footer .adm-links{position:absolute;left:0;bottom:calc(100% + .8rem);z-index:60;box-shadow:0 12px 32px rgba(10,58,76,.16);text-align:left}
footer .adm-btn{width:auto;height:auto;background:none;color:var(--mut);border-radius:0;box-shadow:none;padding:0;font-size:.82rem;font-weight:300;display:inline-flex;align-items:center;gap:.45rem;transition:color .3s}
footer .adm-btn:hover{transform:none;color:var(--d3)}
/* Vier Spalten statt drei; auf Tablets zwei, auf dem Handy eine (die alte 3-Spalten-Regel für
   769–1024 px wird hier überstimmt) */
footer{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4rem}
@media(min-width:769px) and (max-width:1100px){footer{grid-template-columns:1fr 1fr;gap:3rem}}
@media(max-width:768px){footer{grid-template-columns:1fr;gap:3rem}}
/* Ersatzknopf, solange Zenchef nicht geladen ist; danach übernimmt der SDK-Knopf (iframe) die Ecke */
/* Aussehen wie der Knopf aus dem Zenchef-SDK (gemessen: 245 × 48 px, 16 px vom Rand, abgerundetes
   Rechteck, links ein Symbolfeld mit Trennstrich), damit die Ecke vor und nach der Zustimmung gleich
   aussieht. Statt des Zenchef-Logos ein Kalender, weil der Knopf bis dahin nicht von Zenchef kommt. */
.zc-fab{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:900;display:inline-flex;align-items:center;height:48px;background:var(--d3);color:#fff;border-radius:12px;padding:0 22px 0 0;font-family:'Jost',sans-serif;font-size:15px;font-weight:400;letter-spacing:.01em;box-shadow:0 6px 20px rgba(10,58,76,.28);transition:background .3s,transform .3s}
.zc-fab-i{display:flex;align-items:center;justify-content:center;width:50px;height:100%;border-right:1px solid rgba(255,255,255,.28);margin-right:20px}
.zc-fab:hover{background:var(--d1);transform:translateY(-2px)}
body.zc-an .zc-fab{display:none}
/* Solange ein Fenster offen ist, gehören Knopf und SDK-Knopf nicht darüber (Klassenname des SDK ist gehasht,
   verlässlich ist nur der Anfang, wie bei Primavera) */
body:has(.bk.open) .zc-fab,body:has(.mn.open) .zc-fab{display:none}
body:has(.bk.open) iframe[class*="ZC_sdk__zc-iframe"],body:has(.mn.open) iframe[class*="ZC_sdk__zc-iframe"]{visibility:hidden}
/* Platz unter der Fußzeile, damit der Knopf die untere Leiste nicht verdeckt */
.ft-b{padding-bottom:max(5.4rem,calc(env(safe-area-inset-bottom) + 5rem))}
@media print{.zc-fab{display:none}}

/* ═══ BEGRÜSSUNGSFENSTER NACH DEM NEULADEN SOFORT DA (v0.66) ═══
   html.wel-sofort setzt der <head>, wenn das Fenster beim Neuladen offen war. Bis site.js es richtig
   öffnet, zeigt dieses CSS es schon im offenen Zustand – ohne Übergang, damit es nicht erst einblendet.
   Muss die Sperren html.js #mWel:not(.open) und html.js .bk:not(.open):not(:target) überstimmen. */
html.js.wel-sofort #mWel,html.js.wel-sofort #mWel:not(.open):not(:target){visibility:visible!important;pointer-events:all!important;background:rgba(10,58,76,.28)!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;transition:none!important}
html.js.wel-sofort #mWel .md,html.js.wel-sofort #mWel:not(.open) .md{opacity:1!important;transform:none!important;transition:none!important}

/* ── v0.67: Begrüßungsfenster in der Größe von banmaai.de, mit Hinweis aufs Winterdorf, ohne Scrollen ──
   Am Desktop 500 px breit wie dort. Auf dem Handy war es ein Blatt von unten über 750 px (fast der
   ganze Bildschirm, unten hinter der Adressleiste von Safari); banmaai.de zeigt seit 28.09.2026
   eine kompakte schwebende Karte mit Abstand zu allen Rändern, das hier übernommen.
   Mit dem Winterdorf-Hinweis war der Inhalt am Desktop über 1.000 px hoch und musste gescrollt werden
   (Nutzer: „ohne dass man scrollen muss"). Deshalb überall kompakt: flacheres Foto, Titel in einer
   Zeile, keine Überschrift über den Terminen (die Heute-Zeile und die Daten erklären sich selbst),
   höchstens drei Termine in engen Zeilen, die vier Kacheln nebeneinander nur mit Titel.
   Ziel: passt am Desktop auch auf 768 px hohe Laptop-Bildschirme, auf dem Handy auf 375 × 667. */
#mWel .md{max-width:500px;max-height:calc(100svh - 3rem)}
#mWel .wel-h{padding:0 1.8rem .9rem}
/* Das Foto gibt nach, wenn der Bildschirm niedrig ist: volle 100 px ab etwa 750 px Höhe, darunter
   flacher, unter 685 px gar nicht – der Rest passt dann weiter ohne Scrollen. Der Faktor 1,5 lässt
   es schnell verschwinden, statt als schmaler Streifen stehen zu bleiben. */
#mWel .wel-pic{height:clamp(0px,calc((100svh - 685px) * 1.5),100px);margin:0 -1.8rem 1rem}
#mWel .wel-t{font-size:1.6rem;line-height:1.1}
#mWel .wel-t em{display:inline}
#mWel .wel-s{font-size:.8rem;margin-top:.35rem}
#mWel .wel-b{padding:.2rem 1.8rem 1.1rem}
#mWel .wel-lbl{display:none}
#mWel .wel-box{margin-bottom:.9rem;border-radius:12px}
/* Die Heute-Zeile steht seit v0.68 allein über dem Winterdorf-Hinweis. Verlauf (Nutzer, 30.09.2026):
   heller Sandgrund (v0.68) und zartes Grün/Rosé (v0.69) – die Hervorhebung („Ruhetag", „morgen",
   die Uhrzeit) war nicht zu erkennen, weil Text (--ink) und Hervorhebung (--d3) fast derselbe
   Petrol-Ton sind; gefüllter Petrol-Balken mit Gold (v0.70) – gut lesbar, aber „sieht billig aus".
   Seit v0.71: helle Karte mit feiner Goldlinie, Text in Petrol, Hervorhebung in warmem Gold und
   kursiv – Farbton und Schriftform unterscheiden sich, ohne dass es laut wird. */
#mWel .wel-heute{font-size:1.1rem;padding:.7rem 1.1rem;margin-bottom:.7rem;border-radius:12px;
  background:#fff;color:var(--ink);font-weight:400;
  box-shadow:inset 0 0 0 1px rgba(168,133,63,.38),0 6px 18px -12px rgba(10,58,76,.35)}
#mWel .wel-heute em{font-style:italic;color:#9a6f22;font-weight:400}
#mWel .wel-heute .stat-dot{box-shadow:0 0 0 4px rgba(10,58,76,.06)}
#mWel .wel-heute .stat-dot.op{background:#2e9e5b}
#mWel .wel-row{grid-template-columns:44px 1fr auto;gap:.8rem;padding:.5rem 1rem}
#mWel .wel-dd{font-size:1.15rem}
#mWel .wel-n{font-size:.8rem}
#mWel .wel-x{font-size:.64rem;margin-top:.05rem}
#mWel .wel-tag{font-size:.46rem;padding:.2rem .55rem}
#mWel .wel-row:nth-child(n+4){display:none}
#mWel .wel-empty{padding:1rem;font-size:.74rem}
#mWel .wel-acts{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:.45rem!important}
#mWel .wel-a{display:flex;align-items:center;justify-content:center;min-height:3.1rem;padding:.45rem .35rem;text-align:center;border-radius:12px}
#mWel .wel-a-t{font-size:.76rem;line-height:1.25;margin:0}
#mWel .wel-a-d{display:none}
#mWel .wel-skip{margin-top:.3rem;padding:.35rem}
/* Winterdorf-Hinweis: dunkel wie der Winterdorf-Abschnitt, Gold und Lichterkette – hebt sich vom
   hellen Fenster ab und steht als Erstes, vor den Terminen */
.wel-win{position:relative;display:block;border-radius:12px;overflow:hidden;margin-bottom:.9rem;
  padding:1.05rem 1.2rem .95rem;color:var(--l1);text-align:left;
  background:radial-gradient(ellipse 80% 70% at 85% 0,rgba(255,205,130,.16),transparent 70%),
             linear-gradient(160deg,#0f4d63 0,#0a3a4c 45%,#04202f 100%);
  box-shadow:0 14px 30px -18px rgba(4,32,47,.7)}
/* Weihnachtsmütze wie am Badge des Winterdorf-Abschnitts (Nutzer, 30.09.2026), schräg auf der
   linken oberen Ecke – deshalb darf die Karte nicht mehr abschneiden (overflow sichtbar), und über
   ihr bleibt etwas mehr Luft, damit die Mütze nicht in die Heute-Zeile ragt */
.wel-win{overflow:visible}
/* Außerhalb der Saison (März–August) blendet welWinter() in site.js den Hinweis aus; [hidden] allein
   reicht nicht, weil .wel-win oben display:block setzt. Der Platz für die Mütze entfällt dann. */
.wel-win[hidden]{display:none}
#mWel .wel-heute:has(+ .wel-win[hidden]){margin-bottom:.8rem}
#mWel .wel-heute{margin-bottom:1.1rem}
.wel-win-hut{position:absolute;left:-9px;top:-15px;width:42px;height:35px;transform:rotate(-22deg);z-index:2;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.3));pointer-events:none}
.wel-win-l{position:absolute;top:0;left:12px;width:calc(100% - 24px);height:20px;pointer-events:none}
.wel-win-l circle{filter:drop-shadow(0 0 3px rgba(255,217,138,.9))}
.wel-win-k{display:block;margin-top:.3rem;font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:#dcc285;font-weight:500}
.wel-win-t{display:block;margin-top:.35rem;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.3rem;line-height:1.12}
.wel-win-t em{font-style:italic;font-weight:300;color:#ebd79b;display:block}
.wel-win-d{display:block;margin-top:.4rem;font-size:.74rem;line-height:1.5;font-weight:300;color:rgba(251,248,243,.82)}
.wel-win-b{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin-top:.7rem}
.wel-win-a{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;
  background:#dcc285;color:#04202f;font-size:.72rem;font-weight:500;letter-spacing:.02em;transition:background .3s}
.wel-win-a:hover{background:#ebd79b}
.wel-win-m{font-size:.72rem;color:rgba(251,248,243,.85);border-bottom:1px solid rgba(220,194,133,.5);padding-bottom:1px;transition:color .3s}
.wel-win-m:hover{color:#ebd79b}
/* Handy: mittig schwebend mit Abstand zu allen Rändern, unten mehr wegen der Adressleiste von Safari.
   Auf sehr kleinen Handys darf es weiter scrollen (max-height). */
@media(max-width:768px){
  #mWel{align-items:center!important;padding:.8rem .9rem 4.5rem!important}
  #mWel .md{border-radius:20px!important;max-width:500px;max-height:calc(100svh - 5.5rem)!important}
  #mWel .md-x{top:.6rem;right:.6rem;width:32px;height:32px}
  #mWel .wel-h{padding:0 1.1rem .6rem!important}
  /* In Safari bleibt nach Adress- und Symbolleiste deutlich weniger als die Bildschirmhöhe (iPhone 13:
     rund 660 px, iPhone SE rund 550 px). svh ist genau diese sichtbare Höhe. */
  #mWel .wel-pic{height:clamp(0px,calc((100svh - 600px) * 1.5),72px)!important;margin:0 -1.1rem .7rem!important}
  #mWel .wel-t{font-size:1.3rem}
  #mWel .wel-s{font-size:.72rem;margin-top:.25rem}
  #mWel .wel-b{padding:.2rem 1.1rem .8rem!important}
  #mWel .wel-win{padding:.9rem .95rem .85rem;margin-bottom:.75rem}
  #mWel .wel-win-t{font-size:1.1rem}
  #mWel .wel-win-d{font-size:.68rem;margin-top:.3rem}
  #mWel .wel-win-b{margin-top:.6rem}
  #mWel .wel-win-a{padding:.45rem .9rem;font-size:.68rem}
  #mWel .wel-box{margin-bottom:.75rem}
  #mWel .wel-heute{font-size:1rem;padding:.55rem .85rem;margin-bottom:1rem}
  #mWel .wel-row{grid-template-columns:38px 1fr;gap:.65rem;padding:.4rem .85rem}
  #mWel .wel-tag{display:none}
  #mWel .wel-acts{gap:.4rem!important}
  #mWel .wel-a{min-height:2.9rem;padding:.4rem .3rem}
  #mWel .wel-a-t{font-size:.7rem}
  #mWel .wel-skip{margin-top:.25rem;padding:.3rem}
}
/* Sehr niedrige Handys (iPhone SE, kleine Android-Geräte): zwei Termine statt drei, ohne Untertitel */
@media(max-width:768px) and (max-height:700px){
  #mWel .wel-row:nth-child(n+3){display:none}
  #mWel .wel-s{display:none}
}
@media(max-width:768px) and (max-height:600px){
  #mWel .wel-win-d{display:none}
}
/* Winzige Bildschirme: „Weiter zur Website" entfällt, das ✕ oben schließt ebenso */
@media(max-width:768px) and (max-height:520px){
  #mWel .wel-skip{display:none}
}