/* ============================================================================
   DIE INSEL — Mediterrane Küche · Duisburg Wedau
   Design system. Ruhig, hochwertig, mediterran. "Urlaub am See."
   Palette: Dunkelgrün · Creme · Sand · Gold-Akzent · warme Holztöne
   Fonts: Cormorant Garamond (Display) · Jost (Sans)
   ========================================================================== */

/* ---------- tokens -------------------------------------------------------- */
:root{
  --green:#355B44;          /* Marken-Dunkelgrün */
  --green-700:#2A4A38;
  --green-800:#1E3629;
  --green-900:#16281E;      /* fast schwarz-grün, für Hero */
  --green-950:#0F1D16;
  --moss:#6E8A6F;
  --sage:#9FB29B;

  --cream:#F6F0E3;          /* Haupt-Hintergrund */
  --cream-2:#FBF7EE;
  --paper:#FDFBF5;
  --sand:#E7D9BD;
  --sand-2:#DCC9A4;
  --wood:#9C7A50;

  --gold:#C4A052;           /* Akzent — sparsam */
  --gold-soft:#D8BE84;
  --gold-ink:#9A7B34;

  --ink:#24352B;            /* Text auf hell */
  --ink-soft:#586B5C;
  --ink-faint:#8A9789;
  --line:#DACFB8;           /* Haarlinien auf hell */
  --line-dark:rgba(233,217,189,.16);

  --cream-on-dark:#F3ECDC;
  --muted-on-dark:#B9C6B4;

  --white:#ffffff;

  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --wrap:1200px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:18px;
  --radius-sm:12px;

  --shadow-sm:0 2px 10px rgba(22,40,30,.06);
  --shadow:0 18px 50px -22px rgba(22,40,30,.32);
  --shadow-lg:0 40px 90px -40px rgba(22,40,30,.5);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --nav-h:70px;
  --bottomnav-h:64px;
}

/* ---------- reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{display:block; max-width:100%}
picture{display:contents}
img{height:auto}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:none; background:none}
input,textarea,select{font:inherit; color:inherit}
ul{list-style:none; padding:0}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:6px}
/* Auf dunklem Grund braucht der Fokusring mehr Helligkeit */
.section--dark :focus-visible,.section--green :focus-visible,
.hero :focus-visible,.drawer :focus-visible,.footer :focus-visible,
.map-consent :focus-visible{outline-color:var(--gold-soft)}

/* Sprung zum Inhalt für Tastatur und Screenreader */
.skip-link{
  position:fixed; top:-100px; left:50%; translate:-50% 0; z-index:200;
  padding:.85em 1.5em; border-radius:0 0 12px 12px;
  background:var(--green-900); color:var(--cream-on-dark);
  font-size:.9rem; font-weight:500; letter-spacing:.04em;
  transition:top .25s var(--ease-out);
}
.skip-link:focus{top:0}
::selection{background:var(--gold-soft); color:var(--green-900)}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:.005em}
.display{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.9rem, 9vw, 6.4rem);
  line-height:.98; letter-spacing:-.01em;
}
.h-sec{font-size:clamp(2.1rem,5.2vw,3.6rem); line-height:1.02}
.italic{font-style:italic}
.eyebrow{
  font-family:var(--sans); font-weight:500;
  font-size:.74rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-ink);
  display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--gold); opacity:.7}
.eyebrow.center::after{content:""; width:26px; height:1px; background:var(--gold); opacity:.7}
.lede{font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--ink-soft); font-weight:300}

/* ---------- layout -------------------------------------------------------- */
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(64px,10vw,128px); position:relative}
.section--dark{background:var(--green-900); color:var(--cream-on-dark)}
.section--green{background:var(--green); color:var(--cream-on-dark)}
.section--sand{background:linear-gradient(180deg,var(--cream) 0%, #F0E7D2 100%)}
.section--dark .eyebrow,.section--green .eyebrow{color:var(--gold-soft)}
.section--dark .eyebrow::before,.section--green .eyebrow::before,
.section--dark .eyebrow.center::after,.section--green .eyebrow.center::after{background:var(--gold-soft)}
.section--dark .lede,.section--green .lede{color:var(--muted-on-dark)}
.center{text-align:center}
.sec-head{max-width:640px}
.sec-head.center{margin-inline:auto}
.sec-head .h-sec{margin-top:.35em}

/* soft paper grain on cream */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(rgba(120,100,60,.05) 1px, transparent 1px);
  background-size:3px 3px; opacity:.5; mix-blend-mode:multiply;
}
main,header,footer{position:relative; z-index:1}

/* ---------- buttons ------------------------------------------------------- */
.btn{
  --bg:var(--green); --fg:var(--cream-on-dark);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border-radius:100px;
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.02em;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .3s;
  box-shadow:0 10px 24px -12px rgba(22,40,30,.55);
}
.btn svg{width:1.05em; height:1.05em}
.btn::after{ /* glare */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform:translateX(-120%); transition:transform .8s var(--ease-out);
}
.btn:hover{transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(22,40,30,.6)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn--gold{--bg:linear-gradient(180deg,var(--gold-soft),var(--gold)); --fg:var(--green-900)}
.btn--frost{--bg:rgba(246,240,227,.15); --fg:#FCF8EE; border:1px solid rgba(246,240,227,.42); backdrop-filter:blur(8px); box-shadow:0 10px 26px -16px rgba(0,0,0,.6)}
.btn--frost:hover{--bg:rgba(246,240,227,.26)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border:1px solid var(--line); box-shadow:none}
.btn--ghost:hover{background:rgba(53,91,68,.06)}
.section--dark .btn--ghost,.section--green .btn--ghost{--fg:var(--cream-on-dark); border-color:var(--line-dark)}
.section--dark .btn--ghost:hover,.section--green .btn--ghost:hover{background:rgba(243,236,220,.08)}
.btn--lg{padding:1.05em 2em; font-size:1.02rem}
.btn--block{display:flex; width:100%}

.link-underline{position:relative; font-weight:500; color:var(--gold-ink)}
.link-underline::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform .4s var(--ease-out)}
.link-underline:hover::after{transform:scaleX(1)}

/* ============================================================================
   NAV
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; width:100%}
.nav__brand{display:flex; align-items:center; gap:.6em}
.nav__brand img{height:38px; width:auto; transition:filter .4s}
.nav__brand .wordmark{
  font-family:var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.02em; line-height:1;
  color:var(--cream-on-dark);
}
.nav__brand .wordmark small{display:block; font-family:var(--sans); font-size:.52rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin-top:.35em}
.nav__links{display:flex; align-items:center; gap:2.1rem}
.nav__links a{font-size:.86rem; letter-spacing:.06em; color:var(--cream-on-dark); opacity:.86; font-weight:400; transition:opacity .3s, color .3s; position:relative}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%; background:var(--gold-soft); transform:scaleX(0); transform-origin:center; transition:transform .35s var(--ease-out)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__cta{display:flex; align-items:center; gap:.8rem}

/* scrolled state */
.nav.is-solid{background:rgba(246,240,227,.86); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line), var(--shadow-sm); height:60px}
.nav.is-solid .nav__brand .wordmark{color:var(--green-900)}
.nav.is-solid .nav__links a{color:var(--ink)}
.nav.is-solid .nav__brand img{filter:none}

.nav__burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; flex-direction:column; gap:5px}
.nav__burger span{display:block; width:22px; height:1.6px; background:currentColor; transition:transform .4s var(--ease), opacity .3s; color:var(--cream-on-dark)}
.nav.is-solid .nav__burger span{background:var(--green-900)}

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:var(--green-900); color:var(--cream-on-dark);
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 18px) var(--pad) calc(env(safe-area-inset-bottom) + 24px);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform:translateY(-100%); transition:transform .5s var(--ease-out); visibility:hidden;
}
.drawer.open{transform:translateY(0); visibility:visible}

.drawer__top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.drawer__top .wordmark{font-family:var(--serif); font-size:1.7rem; font-weight:600; color:var(--cream-on-dark); line-height:1}
.drawer__top .wordmark small{display:block; font-family:var(--sans); font-size:.54rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); font-weight:500; margin-top:.45em}
.drawer__close{
  flex:0 0 auto; width:46px; height:46px; margin:-6px -6px 0 0;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(243,236,220,.1); border:1px solid var(--line-dark); color:var(--cream-on-dark);
  transition:background .3s, transform .3s var(--ease-out);
}
.drawer__close svg{width:20px; height:20px}
.drawer__close:active{transform:rotate(90deg); background:rgba(243,236,220,.2)}

.drawer__nav{display:flex; flex-direction:column; margin-top:1.6rem}
.drawer__nav a{
  display:flex; flex-direction:column; gap:.16rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-dark);
  transition:padding-left .3s var(--ease-out);
}
.drawer__nav a:first-child{border-top:1px solid var(--line-dark)}
.drawer__nav a:active{padding-left:.5rem}
.drawer__nav .t{font-family:var(--serif); font-size:1.55rem; font-weight:500; line-height:1.1; color:var(--cream-on-dark)}
.drawer__nav .s{font-size:.82rem; font-weight:300; color:var(--muted-on-dark); line-height:1.35}

.drawer__hours{margin-top:1.5rem; display:flex; flex-direction:column; gap:.5rem}
.drawer__hours .row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-size:.88rem; color:var(--muted-on-dark);
}
.drawer__hours b{font-weight:500; color:var(--gold-soft); white-space:nowrap}

.drawer__actions{margin-top:1.6rem; display:grid; gap:.7rem}
.drawer__actions .btn{width:100%}
.drawer .btn--ghost{--fg:var(--cream-on-dark); border-color:var(--line-dark)}
.drawer .btn--ghost:active{background:rgba(243,236,220,.1)}

.drawer__meta{margin-top:1.6rem; color:var(--muted-on-dark); font-size:.85rem; line-height:1.9}
.drawer__meta a{color:var(--gold-soft)}

/* Auf dem Handy brauchen Links und Bedienelemente mehr Fläche */
@media (max-width:768px){
  .loc__row a.v,.footer address a{display:inline-block; padding:.42em 0}
  .footer ul a{display:inline-block; padding:.45em 0}
  .footer__bottom nav a{display:inline-block; padding:.5em 0}
  .form__consent a{padding:.2em 0}
  /* Suchfeld und Kategorien mit dem Daumen bedienbar */
  .menu__search{padding:.85em 1em}
  .menu__search input{font-size:16px}   /* verhindert das Zoomen beim Antippen in iOS */
  .menu__search .clear{padding:.35em .55em}
  .tab{padding:.72em 1.1em}
  .form input,.form select,.form textarea{font-size:16px}
}

/* sehr kleine oder niedrige Displays: kompakter */
@media (max-height:700px){
  .drawer__nav a{padding:.62rem 0}
  .drawer__nav .t{font-size:1.32rem}
  .drawer__nav .s{font-size:.78rem}
  .drawer__hours,.drawer__actions,.drawer__meta{margin-top:1.1rem}
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; background:var(--green-900); color:var(--cream-on-dark); overflow:hidden}
#hero-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1}
.hero__scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(120% 95% at 80% 16%, rgba(226,172,88,.32), transparent 52%),
    linear-gradient(180deg, rgba(11,22,16,.58) 0%, rgba(11,22,16,.26) 30%, rgba(11,22,16,.5) 62%, rgba(11,22,16,.93) 100%);
}
/* real terrace photo behind the drifting leaves — slow, gentle zoom */
.hero__bg{position:absolute; inset:0; z-index:0; transform-origin:62% 42%; image-rendering:auto; backface-visibility:hidden;
  /* WebP wo möglich, JPEG als Rückfallebene. Spart rund 600 KB beim ersten
     Seitenaufruf. image-set() wird von Browsern ohne WebP ignoriert, die
     bekommen dann die Zeile darüber. */
  background:url(img/photos/hero-terrasse.jpg) center 32%/cover no-repeat, #16281E;
  background-image:
    -webkit-image-set(url(img/photos/hero-terrasse-1400.webp) type("image/webp"),
                      url(img/photos/hero-terrasse.jpg) type("image/jpeg")),
    linear-gradient(#16281E, #16281E);
  background-image:
    image-set(url(img/photos/hero-terrasse-1400.webp) type("image/webp"),
              url(img/photos/hero-terrasse.jpg) type("image/jpeg")),
    linear-gradient(#16281E, #16281E);
  background-position:center 32%; background-size:cover; background-repeat:no-repeat;
}
/* Auf kleinen Displays reicht die halbe Auflösung — spart nochmal gut 200 KB. */
@media (max-width:800px){
  .hero__bg{
    background-image:
      -webkit-image-set(url(img/photos/hero-terrasse-700.webp) type("image/webp"),
                        url(img/photos/hero-terrasse.jpg) type("image/jpeg")),
      linear-gradient(#16281E, #16281E);
    background-image:
      image-set(url(img/photos/hero-terrasse-700.webp) type("image/webp"),
                url(img/photos/hero-terrasse.jpg) type("image/jpeg")),
      linear-gradient(#16281E, #16281E);
  }
  animation:heroZoom 26s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1.015)}to{transform:scale(1.06)}}
.no-webgl #hero-canvas{display:none}
.hero__inner{position:relative; z-index:3; width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 var(--pad) clamp(72px,12vh,140px)}
.hero__eyebrow{color:var(--gold-soft); margin-bottom:1.1rem}
.hero h1{font-size:clamp(3.1rem,11.5vw,8rem); font-weight:500; letter-spacing:-.015em; line-height:.9; color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 .script{font-style:italic; font-weight:500; color:var(--gold-soft)}
.hero__sub{margin-top:1.4rem; max-width:38ch; font-size:clamp(1.05rem,2.4vw,1.35rem); font-weight:300; color:#EEE7D6; text-shadow:0 1px 18px rgba(0,0,0,.4)}
.hero__cta{margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.9rem; align-items:center}
.hero__scroll{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:.5em; color:var(--muted-on-dark); font-size:.62rem; letter-spacing:.3em; text-transform:uppercase}
.hero__scroll .line{width:1px; height:42px; background:linear-gradient(var(--gold-soft),transparent); position:relative; overflow:hidden}
.hero__scroll .line::after{content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--gold-soft); animation:scrolldot 2.4s var(--ease) infinite}
@keyframes scrolldot{0%{top:-40%}60%,100%{top:100%}}

/* rating pill in hero */

/* ============================================================================
   MARQUEE (values / atmosphere words)
   ========================================================================== */
.ticker{background:var(--green-900); color:var(--cream-on-dark); border-block:1px solid var(--line-dark); overflow:hidden; padding-block:1.1rem}
.ticker__track{display:flex; gap:3.5rem; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track span{font-family:var(--serif); font-style:italic; font-size:1.5rem; opacity:.85; display:inline-flex; align-items:center; gap:3.5rem}
.ticker__track span::after{content:"✦"; font-style:normal; font-size:.7em; color:var(--gold-soft); opacity:.8}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Auf dem Handy nimmt das Band sonst zu viel Platz weg — etwa halbe Höhe,
   läuft aber unverändert flüssig weiter. */
@media (max-width:768px){
  .ticker{padding-block:.42rem}
  .ticker__track{gap:2rem}
  .ticker__track span{font-size:1.05rem; gap:2rem}
}
@media (max-width:420px){
  .ticker{padding-block:.36rem}
  .ticker__track{gap:1.6rem}
  .ticker__track span{font-size:.98rem; gap:1.6rem}
}

/* ============================================================================
   ATMOSPHERE / STORY
   ========================================================================== */
.story__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.story__copy p{margin-top:1.1rem; color:var(--ink-soft); font-weight:300; font-size:1.08rem}
.story__stats{display:flex; gap:2.4rem; margin-top:2.2rem; flex-wrap:wrap}
.stat b{font-family:var(--serif); font-size:2.4rem; color:var(--green); display:block; line-height:1}
.stat span{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* framed media slot (photo-ready placeholder) */
.frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25), inset 0 0 0 6px rgba(255,255,255,.06); border-radius:inherit; pointer-events:none}
.media-slot{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(196,160,82,.22), transparent 55%),
    linear-gradient(160deg, #2E5140 0%, #16281E 70%);
  display:grid; place-items:center; color:var(--muted-on-dark);
}
.media-slot[data-tall]{aspect-ratio:3/4}
.media-slot[data-wide]{aspect-ratio:16/10}
.media-slot .slot-note{position:relative; z-index:2; text-align:center; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; opacity:.5; padding:1em}
.media-slot .palm{position:absolute; inset:0; z-index:1; opacity:.16}
.media-slot::before{content:""; position:absolute; inset:0; z-index:1;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 2px, transparent 2px 22px);
  mix-blend-mode:overlay; animation:shimmer 7s var(--ease) infinite alternate}
@keyframes shimmer{to{transform:translateX(6%)}}

/* real photo frame (story) */
.photo-frame{position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:0}
.photo-frame img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .9s var(--ease-out)}
.photo-frame:hover img{transform:scale(1.04)}
.photo-frame figcaption,.photo-frame__cap{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:1.4rem 1.3rem .95rem; color:#fff;
  font-family:var(--serif); font-style:italic; font-size:1.25rem;
  background:linear-gradient(transparent, rgba(15,29,22,.72))}
.photo-frame::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); border-radius:inherit; pointer-events:none}

/* Story-Bild als Button: Beschriftung plus Hinweis auf die Galerie */
button.photo-frame{display:block; width:100%; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none; text-align:left}
.photo-frame__cap{display:flex; flex-direction:column; gap:.45rem; align-items:flex-start}
.photo-frame__txt{font-family:var(--serif); font-style:italic; font-size:1.35rem; line-height:1.1}
.photo-frame__more{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-style:normal; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--gold-soft); transition:gap .35s var(--ease-out);
}
.photo-frame__more svg{width:15px; height:15px}
.photo-frame:hover .photo-frame__more{gap:.85em}

/* gallery band */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:14px; margin-top:clamp(28px,4vw,48px)}
.gallery figure{position:relative; margin:0; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%, rgba(15,29,22,.6))}
.gallery figcaption{position:absolute; left:0; bottom:0; z-index:2; padding:.9rem 1rem; color:#fff; font-family:var(--serif); font-style:italic; font-size:1.15rem}
.gallery .g-wide{grid-column:span 2}
.gallery .g-tall{grid-row:span 2}
@media (max-width:820px){
  .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:150px}
  .gallery .g-tall{grid-row:span 1}
  .gallery .g-wide{grid-column:span 2}
}

/* glare hover on frames */
.glare{position:relative}
.glare::before{content:""; position:absolute; inset:0; z-index:3; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); transition:opacity .3s}
.glare:hover::before{opacity:1}

/* ============================================================================
   HIGHLIGHTS (features)
   ========================================================================== */
.features{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.feature{
  padding:2rem 1.7rem; border-radius:var(--radius); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.feature:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--sand-2)}
.feature__ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(53,91,68,.08); color:var(--green); margin-bottom:1.1rem}
.feature__ic svg{width:24px; height:24px}
.feature h3{font-size:1.5rem; color:var(--green-900)}
.feature p{margin-top:.5rem; color:var(--ink-soft); font-size:.98rem; font-weight:300}

/* Karten sind Buttons — Browser-Defaults zurücksetzen, Optik bleibt */
button.feature{
  display:flex; flex-direction:column; align-items:flex-start;
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.feature h3,.feature p{font-family:inherit}
.feature h3{font-family:var(--serif); font-weight:500; line-height:1.15}
.feature__more{
  margin-top:auto; padding-top:1.1rem;
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
  color:var(--gold-ink); opacity:.85; transition:gap .35s var(--ease-out), opacity .3s;
}
.feature__more svg{width:15px; height:15px}
.feature:hover .feature__more,.feature:focus-visible .feature__more{gap:.9em; opacity:1}
.sec-hint{
  margin-top:1.1rem; font-size:.95rem; font-weight:300; color:var(--ink-faint);
}
.sec-hint.center{text-align:center}

/* ============================================================================
   FRÜHSTÜCK & BRUNCH — drei Angebote
   ========================================================================== */
.offers{display:grid; grid-template-columns:repeat(2,1fr); gap:1.8rem; margin-top:clamp(28px,4vw,52px); max-width:920px; margin-inline:auto}
.offer{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.offer:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.offer__media{
  position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--green-900);
  display:block; width:100%; padding:0; cursor:pointer; -webkit-appearance:none; appearance:none;
}
.offer__media img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.offer:hover .offer__media img{transform:scale(1.05)}
.offer__zoom{
  position:absolute; left:12px; bottom:12px; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.45em .95em; border-radius:100px;
  background:rgba(15,29,22,.6); color:var(--cream-on-dark);
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .3s, gap .35s var(--ease-out);
}
.offer__zoom svg{width:15px; height:15px}
.offer__media:hover .offer__zoom{background:rgba(15,29,22,.8); gap:.8em}
.offer__body{padding:1.5rem 1.5rem 1.7rem; display:flex; flex-direction:column; flex:1}
.offer__badge{
  align-self:flex-start; padding:.36em 1em; border-radius:100px;
  background:rgba(53,91,68,.08); color:var(--green);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500;
}
.offer__body h3{margin-top:.9rem; font-family:var(--serif); font-size:1.85rem; font-weight:500; line-height:1.1; color:var(--green-900)}
.offer__time{margin-top:.3rem; color:var(--gold-ink); font-weight:500; font-size:.95rem}
.offer__body p:not(.offer__time){margin-top:.85rem; color:var(--ink-soft); font-size:.97rem; font-weight:300}
.offer__note{
  margin-top:1rem; padding:.85rem 1rem; border-radius:var(--radius-sm);
  background:rgba(53,91,68,.06); border-left:2px solid var(--gold);
  color:var(--ink-soft); font-size:.92rem; font-weight:300;
}
.offer__note b{color:var(--green-900); font-weight:500}
.offer__body p:last-of-type{margin-bottom:1.6rem}
.offer__body .btn{margin-top:auto; align-self:flex-start}

/* ============================================================================
   DETAIL-DIALOG (Karten „Warum die Insel“)
   ========================================================================== */
.dlg{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(12px,3vw,40px)}
.dlg[hidden]{display:none}
.dlg__backdrop{
  position:absolute; inset:0; background:rgba(15,29,22,.72);
  opacity:0; transition:opacity .3s var(--ease-out);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.dlg.open .dlg__backdrop{opacity:1}
.dlg__panel{
  position:relative; z-index:1;
  width:min(980px,100%); max-height:min(88vh,860px); overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.dlg.open .dlg__panel{opacity:1; transform:none}
.dlg__close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:rgba(253,251,245,.92); color:var(--green-900);
  box-shadow:0 6px 18px -8px rgba(22,40,30,.5);
  transition:transform .3s var(--ease-out), background .3s;
}
.dlg__close svg{width:18px; height:18px}
.dlg__close:hover{transform:rotate(90deg); background:#fff}
.dlg__media{position:relative; min-height:260px; background:var(--green-900); overflow:hidden}

/* Bilderstreifen: wischen auf dem Handy, Pfeile und Punkte am Rechner */
.dlg__track{
  position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain; overflow-anchor:none;
  touch-action:pan-x;   /* nur waagerecht — sonst verschluckt der Browser die Wischgeste */
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.dlg__track::-webkit-scrollbar{display:none}
.dlg__slide{flex:0 0 100%; scroll-snap-align:center; position:relative}
.dlg__slide img{width:100%; height:100%; object-fit:cover; -webkit-user-select:none; user-select:none}

.dlg__nav{
  position:absolute; top:50%; z-index:3; translate:0 -50%;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(253,251,245,.94); color:var(--green-900);
  box-shadow:0 6px 20px -6px rgba(22,40,30,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:opacity .3s, transform .25s var(--ease-out), background .3s;
  -webkit-tap-highlight-color:transparent;
}
.dlg__nav svg{width:22px; height:22px}
.dlg__nav--prev{left:10px}
.dlg__nav--next{right:10px}
.dlg__nav:hover{background:#fff; transform:scale(1.06)}
.dlg__nav:active{transform:scale(.92); background:var(--gold-soft)}
.dlg__nav[disabled]{opacity:.28; pointer-events:none}
.dlg__nav[hidden]{display:none}

.dlg__count{
  position:absolute; top:14px; left:14px; z-index:2;
  padding:.3em .8em; border-radius:100px;
  background:rgba(15,29,22,.6); color:var(--cream-on-dark);
  font-size:.74rem; letter-spacing:.12em; font-weight:500;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.dlg__count[hidden]{display:none}

.dlg__dots{
  position:absolute; bottom:14px; left:50%; translate:-50% 0; z-index:2;
  display:flex; gap:.45rem; padding:.45em .7em; border-radius:100px;
  background:rgba(15,29,22,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.dlg__dots[hidden]{display:none}
.dlg__dot{
  width:7px; height:7px; border-radius:50%; padding:0;
  background:rgba(246,240,227,.45); transition:background .3s, width .3s var(--ease-out);
}
.dlg__dot.is-active{background:var(--gold-soft); width:18px; border-radius:100px}

/* Auf dem Handy zusätzlich zum Wischen: Pfeile bleiben sichtbar und
   bekommen eine Tippfläche, die man auch mit dem Daumen trifft. */
@media (hover:none){
  .dlg__nav{width:52px; height:52px}
  .dlg__nav svg{width:24px; height:24px}
  .dlg__nav--prev{left:8px}
  .dlg__nav--next{right:8px}
  .dlg__nav:hover{transform:none; background:rgba(253,251,245,.94)}
}
.dlg__body{padding:clamp(24px,3.4vw,44px)}
.dlg__title{
  margin-top:.5rem; font-family:var(--serif); font-weight:500;
  font-size:clamp(1.9rem,3.6vw,2.6rem); line-height:1.05; color:var(--green-900);
}
.dlg__text{margin-top:1.1rem}
.dlg__text p{color:var(--ink-soft); font-weight:300; font-size:1.02rem}
.dlg__text p + p{margin-top:.9rem}
.dlg__actions{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.7rem}

/* ============================================================================
   ANGEBOT DER WOCHE — vorbereitet, im HTML noch auskommentiert
   ========================================================================== */
.weekbar{
  position:relative; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:.8em;
  padding:.7em 1.2em; margin-top:var(--nav-h);
  background:linear-gradient(90deg,var(--green-800),var(--green));
  color:var(--cream-on-dark);
  font-size:.86rem; letter-spacing:.06em;
  transition:background .3s;
}
.weekbar:hover{background:linear-gradient(90deg,var(--green-700),var(--green))}
.weekbar__tag{
  padding:.24em .8em; border-radius:100px;
  background:var(--gold); color:var(--green-900);
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.weekbar svg{width:16px; height:16px; color:var(--gold-soft)}

/* ============================================================================
   POPULAR (Beliebte Gerichte teaser rail)
   ========================================================================== */
.rail{display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem var(--pad) 1.5rem; margin-inline:calc(var(--pad)*-1); -webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:0}
.pcard{
  scroll-snap-align:start; flex:0 0 min(78vw,320px);
  border-radius:var(--radius); overflow:hidden; background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .5s var(--ease-out), box-shadow .5s;
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.pcard__media{aspect-ratio:16/11; position:relative; overflow:hidden; background:linear-gradient(160deg,#2E5140,#16281E)}
.pcard__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out)}
.pcard:hover .pcard__media img{transform:scale(1.05)}
.pcard__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%, rgba(15,29,22,.35))}
.pcard__media .tag{position:absolute; top:12px; left:12px; z-index:2}
.pcard__body{padding:1.2rem 1.3rem 1.4rem}
.pcard__body h3{font-size:1.45rem; color:var(--green-900); display:flex; justify-content:space-between; align-items:baseline; gap:.6em}
.pcard__body h4 .price{font-family:var(--sans); font-size:.98rem; font-weight:600; color:var(--gold-ink); white-space:nowrap}
.pcard__body p{margin-top:.35rem; color:var(--ink-soft); font-size:.92rem; font-weight:300}

/* ============================================================================
   MENU — the heart
   ========================================================================== */
.menu{background:linear-gradient(180deg,var(--cream) 0%, #F1E8D4 100%); position:relative}
.menu__head{max-width:640px; margin:0 auto clamp(20px,3vw,34px); text-align:center}

/* sticky control bar: search + category tabs */
.menu__bar{position:sticky; top:calc(var(--nav-h) - 10px); z-index:40; padding-top:12px; margin-bottom:1.6rem}
.menu__bar-inner{background:rgba(251,247,238,.9); backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-sm); padding:.7rem .7rem .2rem}
.menu__search{display:flex; align-items:center; gap:.7em; padding:.7em 1em; border-radius:14px; background:var(--white); border:1px solid var(--line); margin-bottom:.6rem}
.menu__search svg{width:18px; height:18px; color:var(--ink-faint); flex:0 0 auto}
.menu__search input{border:none; outline:none; background:none; width:100%; font-size:1rem}
.menu__search input::placeholder{color:var(--ink-faint)}
.menu__search .clear{color:var(--ink-faint); font-size:1.1rem; padding:.1em .4em; display:none}
.menu__search.has-value .clear{display:block}

.tabs{display:flex; gap:.5rem; overflow-x:auto; scrollbar-width:none; padding-bottom:.55rem; scroll-snap-type:x proximity}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; scroll-snap-align:start;
  padding:.6em 1.05em; border-radius:100px; font-size:.9rem; font-weight:500; letter-spacing:.01em;
  color:var(--ink-soft); background:transparent; border:1px solid var(--line);
  white-space:nowrap; transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.tab:hover{border-color:var(--sand-2)}
.tab.active{background:var(--green); color:var(--cream-on-dark); border-color:var(--green)}
.tab .dot{color:var(--gold-soft)}

/* results */
.menu__note{max-width:760px; margin:0 auto 1.6rem; text-align:center; font-size:.86rem; color:var(--ink-faint); font-style:italic}
.menu__group{margin-bottom:2.6rem}
.menu__group-title{display:flex; align-items:center; gap:1em; font-family:var(--serif); font-size:1.7rem; color:var(--green-900); margin-bottom:1.2rem}
.menu__group-title::after{content:""; flex:1; height:1px; background:var(--line)}
.menu__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem 2.2rem}

.dish{
  display:grid; grid-template-columns:1fr auto; gap:.2em 1em; align-items:baseline;
  padding:.85rem .2rem; border-bottom:1px solid rgba(218,207,184,.6);
  position:relative; transition:background .3s;
}
.dish:hover{background:rgba(53,91,68,.03)}
.dish__main{min-width:0}
.dish__name{font-family:var(--serif); font-size:1.32rem; font-weight:600; color:var(--green-900); line-height:1.15; display:flex; align-items:baseline; gap:.5em; flex-wrap:wrap}
.dish__num{font-family:var(--sans); font-size:.7rem; font-weight:600; color:var(--ink-faint); letter-spacing:.04em; border:1px solid var(--line); border-radius:6px; padding:.15em .45em; transform:translateY(-1px)}
.dish__desc{color:var(--ink-soft); font-size:.92rem; font-weight:300; margin-top:.15em; max-width:52ch}
.dish__price{font-family:var(--sans); font-weight:600; font-size:1.05rem; color:var(--gold-ink); white-space:nowrap; font-variant-numeric:tabular-nums}
.dish__price .cur{font-size:.8em; opacity:.7; margin-left:.1em}

/* wine list rows: name + herkunft, price */
.dish--wine .dish__name{font-size:1.18rem}

/* tags */
.tag{display:inline-flex; align-items:center; gap:.35em; font-family:var(--sans); font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:.28em .55em; border-radius:100px; line-height:1}
.tag--v{background:rgba(83,138,74,.14); color:#3E7A3A}
.tag--veg{background:rgba(120,150,70,.16); color:#5E7A2E}
.tag--s{background:rgba(190,80,50,.14); color:#B4502F}
.tag--af{background:rgba(80,120,160,.14); color:#3E6F9A}
.tag--h{background:rgba(160,120,60,.16); color:#9A7B34}
.tag--pop{background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:var(--green-900)}
.dish__tags{display:inline-flex; gap:.35em; flex-wrap:wrap; margin-left:.3em}

.menu__empty{text-align:center; padding:3rem 1rem; color:var(--ink-faint); display:none}
.menu__empty.show{display:block}
.menu__empty b{font-family:var(--serif); font-size:1.6rem; color:var(--green-900); display:block; margin-bottom:.3em}

/* animate group entrance on category switch */
.menu__results.switching{opacity:0}
.menu__results{transition:opacity .18s ease}

/* ============================================================================
   REVIEWS
   ========================================================================== */
.reviews__top{display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.4rem}
.rating-badge{display:flex; align-items:center; gap:1.1rem}
.rating-badge .score{font-family:var(--serif); font-size:4.2rem; line-height:.9; color:var(--gold-soft)}
.rating-badge .stars{color:var(--gold-soft); font-size:1.1rem; letter-spacing:.14em}
.rating-badge .count{color:var(--muted-on-dark); font-size:.9rem; margin-top:.2em}
.counter{font-variant-numeric:tabular-nums}
.rev-marquee{display:flex; gap:1.2rem; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-track{display:flex; gap:1.2rem; width:max-content; animation:marquee 60s linear infinite}
.rev-marquee:hover .rev-track{animation-play-state:paused}
.rev{flex:0 0 min(84vw,360px); background:rgba(243,236,220,.05); border:1px solid var(--line-dark); border-radius:var(--radius); padding:1.5rem 1.6rem}
.rev .stars{color:var(--gold-soft); font-size:.85rem; letter-spacing:.12em}
.rev p{margin-top:.7rem; font-weight:300; color:var(--cream-on-dark); font-size:.98rem; line-height:1.55}
.rev .who{margin-top:1rem; font-size:.82rem; color:var(--muted-on-dark); display:flex; align-items:center; gap:.5em}
.rev .who b{color:var(--cream-on-dark); font-weight:500}
.rev .who .g{margin-left:auto; font-size:.7rem; letter-spacing:.1em; opacity:.6}

/* ============================================================================
   EVENTS
   ========================================================================== */
.events__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.6rem}
.event{padding:1.7rem 1.4rem; border-radius:var(--radius); background:var(--paper); border:1px solid var(--line); transition:transform .5s var(--ease-out), box-shadow .5s}
.event:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.event .n{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--gold-ink); opacity:.7}
.event h3{font-size:1.35rem; color:var(--green-900); margin-top:.3em}
.event p{font-size:.9rem; color:var(--ink-soft); font-weight:300; margin-top:.3em}

/* Catering — gleicher Kartenstil wie die Anlässe darüber, nur breiter */
.catering{
  margin-top:1.1rem; padding:clamp(1.7rem,3vw,2.4rem);
  border-radius:var(--radius); background:var(--paper); border:1px solid var(--line);
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem); align-items:center;
}
.catering__title{font-size:clamp(1.5rem,2.6vw,1.9rem); color:var(--green-900); margin-top:.35em}
.catering__text p{color:var(--ink-soft); font-weight:300; margin-top:.7em; max-width:58ch}
.catering__actions{display:flex; flex-wrap:wrap; gap:.7rem}
.catering__actions .btn svg{width:18px; height:18px}
@media (max-width:900px){
  .catering{grid-template-columns:1fr; gap:1.4rem; align-items:start}
}

/* ============================================================================
   LOCATION
   ========================================================================== */
.loc__grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:stretch}
.loc__map{position:relative; border-radius:var(--radius); overflow:hidden; min-height:420px; box-shadow:var(--shadow)}
.loc__map iframe{position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(.2) saturate(.9)}
.loc__info{display:flex; flex-direction:column; justify-content:center}
.loc__list{margin-top:1.8rem; display:flex; flex-direction:column; gap:1.1rem}
.loc__row{display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.1rem; border-bottom:1px solid var(--line-dark)}
.loc__row .ic{width:42px; height:42px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center; background:rgba(243,236,220,.08); color:var(--gold-soft)}
.loc__row .ic svg{width:20px;height:20px}
.loc__row .k{font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-on-dark)}
.loc__row .v{font-size:1.08rem; color:var(--cream-on-dark); margin-top:.1em}
.loc__row a.v:hover{color:var(--gold-soft)}
.loc__actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.8rem}

/* ============================================================================
   RESERVATION
   ========================================================================== */
.res__grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center}
.res__aside .h-sec{color:var(--green-900)}
.res__aside .lede{margin-top:1rem}
.res__hours{margin-top:2rem; border-top:1px solid var(--line); padding-top:1.4rem}
.res__hours .row{display:flex; justify-content:space-between; padding:.5em 0; font-size:1rem; border-bottom:1px solid var(--line)}
.res__hours .row span:first-child{color:var(--ink-soft)}
.res__hours .row b{font-weight:600; color:var(--green-900); font-variant-numeric:tabular-nums}
.form{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field{margin-bottom:1rem; position:relative}
.field label{display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45em}
.field label .req{color:var(--gold-ink)}
.field input,.field textarea,.field select{
  width:100%; padding:.85em 1em; border-radius:12px; border:1px solid var(--line); background:var(--white);
  transition:border-color .3s, box-shadow .3s; font-size:1rem;
  /* Ohne feste Zeilenhöhe erbt <input> die 1.6 aus dem body (25,6 px),
     während <select> intern „normal" (20,8 px) rechnet. Das Datumsfeld
     wurde dadurch 7 px höher als Uhrzeit und Personen. */
  line-height:1.3; font-family:inherit; color:inherit;
}
/* Eine gemeinsame Feldhöhe für alle einzeiligen Felder: Zeilenhöhe 1.3em
   + Innenabstand 2 × .85em + Rahmen. Aus denselben Werten gerechnet wie
   oben, dadurch skaliert sie mit der Schriftgröße mit. So sind Datum,
   Uhrzeit und Personen zwangsläufig gleich hoch, egal wie der jeweilige
   Browser das Innenleben eines date-Feldes aufbaut. */
.field input,.field select{height:calc(1.3em + 1.7em + 2px)}
.field textarea{line-height:1.6; height:auto}
/* iOS/Safari gibt dem Datumsfeld eine eigene Innenbox: der Wert wird
   zentriert und bekommt eigene Ränder. Beides hier zurücksetzen, damit
   das Feld links bündig und genauso hoch ist wie die übrigen. */
.field input[type="date"]{-webkit-appearance:none; appearance:none; display:block}
.field input[type="date"]::-webkit-date-and-time-value{text-align:left; margin:0; line-height:1.3}
.field input[type="date"]::-webkit-datetime-edit{padding:0; line-height:1.3}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0}
.field input[type="date"]::-webkit-datetime-edit-day-field,
.field input[type="date"]::-webkit-datetime-edit-month-field,
.field input[type="date"]::-webkit-datetime-edit-year-field,
.field input[type="date"]::-webkit-datetime-edit-text{padding:0}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--green); box-shadow:0 0 0 3px rgba(53,91,68,.1); outline:none}
.field textarea{resize:vertical; min-height:90px}
.form__consent{display:flex; gap:.7em; align-items:flex-start; font-size:.84rem; color:var(--ink-soft); margin:.4rem 0 1.2rem}
.form__consent input{width:18px; height:18px; margin-top:.2em; accent-color:var(--green)}
.form__note{font-size:.8rem; color:var(--ink-faint); margin-top:1rem; text-align:center}
/* Karte: Zwei-Klick-Lösung, Google wird erst auf Wunsch kontaktiert */
.map-consent{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem; padding:clamp(20px,4vw,36px); text-align:center;
  background:linear-gradient(160deg,#2E5140,#16281E); color:var(--cream-on-dark);
}
.map-consent::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.14;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(243,236,220,.4) 22px 23px),
    repeating-linear-gradient(90deg,transparent 0 22px,rgba(243,236,220,.4) 22px 23px);
}
.map-consent__ic{width:40px; height:40px; color:var(--gold-soft); position:relative; z-index:1}
.map-consent__txt{max-width:30ch; font-size:.92rem; font-weight:300; color:var(--muted-on-dark); position:relative; z-index:1}
.map-consent .btn{position:relative; z-index:1}
.map-consent__alt{
  position:relative; z-index:1; font-size:.8rem; letter-spacing:.06em;
  color:var(--gold-soft); text-decoration:underline; text-underline-offset:3px;
}

/* Honeypot: für Menschen unsichtbar, für Bots verführerisch */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Ladezustand des Absende-Buttons */
.btn__spinner{display:none; width:1.05em; height:1.05em; border-radius:50%;
  border:2px solid rgba(22,40,30,.28); border-top-color:var(--green-900);
  animation:btnSpin .7s linear infinite}
.is-sending .btn__spinner{display:block}
@keyframes btnSpin{to{transform:rotate(360deg)}}
.btn[disabled]{opacity:.75; pointer-events:none}

/* Erfolg */
.form__ok{
  text-align:center; padding:clamp(28px,5vw,48px) clamp(20px,4vw,40px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.form__ok[hidden]{display:none}
.form__ok-ic{
  width:60px; height:60px; margin:0 auto 1.2rem; border-radius:50%;
  display:grid; place-items:center; background:rgba(53,91,68,.1); color:var(--green);
}
.form__ok-ic svg{width:30px; height:30px}
.form__ok .big{font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.4rem); color:var(--green-900); margin-bottom:.4em; line-height:1.1}
.form__ok p{color:var(--ink-soft); font-weight:300; max-width:44ch; margin-inline:auto}
.form__ok-note{margin-top:.9rem; font-size:.86rem; color:var(--ink-faint)}
.form__ok-actions{margin-top:1.8rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center}

/* Fehlschlag beim Senden */
.form__fail{
  margin-top:1rem; padding:1rem 1.15rem; border-radius:var(--radius-sm);
  background:rgba(192,73,46,.07); border-left:3px solid #C0492E; color:var(--ink-soft);
}
.form__fail[hidden]{display:none}
.form__fail b{display:block; color:#9A3A22; margin-bottom:.3em}
.form__fail p{font-size:.9rem; font-weight:300}

/* Fehlerzustände */
.field.error input,.field.error select,.field.error textarea{border-color:#C0492E; box-shadow:0 0 0 3px rgba(192,73,46,.12)}
.field .err{color:#C0492E; font-size:.78rem; margin-top:.35em; display:none}
.field.error .err{display:block}
.form__consent.error{color:#9A3A22}
.form__consent.error input{outline:2px solid #C0492E; outline-offset:2px}

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer{background:var(--green-950); color:var(--muted-on-dark); padding-block:clamp(48px,7vw,80px) 0}
.footer__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; padding-bottom:3rem; border-bottom:1px solid var(--line-dark)}
.footer__brand .wordmark{font-family:var(--serif); font-size:2rem; color:var(--cream-on-dark); font-weight:600}
.footer__brand .wordmark small{display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); margin-top:.4em}
.footer__brand p{margin-top:1.1rem; font-weight:300; max-width:34ch; font-size:.96rem}
.footer .footer__h{font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:1.1rem}
.footer ul li{margin-bottom:.65rem}
.footer ul a:hover,.footer address a:hover{color:var(--gold-soft)}
.footer address{font-style:normal; font-weight:300; line-height:1.9}
.footer__socials{display:flex; gap:.7rem; margin-top:1.4rem}
.footer__socials a{width:42px; height:42px; border-radius:11px; border:1px solid var(--line-dark); display:grid; place-items:center; transition:background .3s, transform .3s, color .3s}
.footer__socials a:hover{background:rgba(243,236,220,.08); transform:translateY(-3px); color:var(--gold-soft)}
.footer__socials svg{width:19px; height:19px}
.footer__bottom{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.6rem; font-size:.8rem}
.footer__bottom nav{display:flex; gap:1.4rem; flex-wrap:wrap}

/* ============================================================================
   STICKY MOBILE BOTTOM NAV  (Menü · Reservieren · Anrufen · Navigation)
   ========================================================================== */
.bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:65; height:var(--bottomnav-h);
  display:none; grid-template-columns:repeat(4,1fr);
  background:rgba(250,246,237,.96); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px -14px rgba(22,40,30,.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.bottomnav a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-soft); font-size:.62rem; letter-spacing:.05em; transition:color .25s; position:relative}
.bottomnav a svg{width:21px; height:21px}
.bottomnav a[data-primary]{color:var(--gold-ink)}
.bottomnav a:active{color:var(--green)}
.bottomnav a::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:0; height:2px; background:var(--gold); transition:width .3s}
.bottomnav a.active::before{width:40%}
.bottomnav a.active{color:var(--green-900)}

/* ============================================================================
   REVEAL (GSAP fallback + base states)
   ========================================================================== */
.reveal{opacity:0; transform:translateY(28px)}
.reveal.in{opacity:1; transform:none}
.js .reveal{will-change:opacity,transform}
html:not(.js) .reveal{opacity:1; transform:none}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .story__grid{grid-template-columns:1fr; gap:2.4rem}
  .story__media{order:-1}
  .features{grid-template-columns:1fr 1fr}
  .offers{grid-template-columns:1fr; gap:1.4rem}
  .offer{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); display:grid; align-items:stretch}
  .offer__media{aspect-ratio:auto; min-height:230px}
  .events__grid{grid-template-columns:1fr 1fr}
  .loc__grid{grid-template-columns:1fr}
  .loc__map{min-height:340px}
  .res__grid{grid-template-columns:1fr; gap:2.2rem}
  .footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .nav__cta{gap:0}
  .bottomnav{display:grid}
  body{padding-bottom:var(--bottomnav-h)}
  .menu__bar{top:6px}   /* nav hides some links; keep bar near top */
  .menu__grid{grid-template-columns:1fr; gap:0}
  .menu__group-title{font-size:1.45rem}
  .features{grid-template-columns:1fr}
  .offer{display:flex; flex-direction:column}
  .offer__media{aspect-ratio:4/3; min-height:0}
  .events__grid{grid-template-columns:1fr 1fr}
  .form__row{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column}
  .hero{align-items:flex-end}
  .rating-badge .score{font-size:3.2rem}
  .dish__desc{max-width:none}
}
@media (max-width:900px){
  /* Bild bleibt oben stehen, darunter scrollt der Text.
     So sind Pfeile und Punkte immer erreichbar. */
  .dlg__panel{
    display:flex; flex-direction:column;
    grid-template-columns:none;
    width:100%; max-height:92svh; height:92svh; overflow:hidden;
  }
  .dlg__media{flex:0 0 auto; min-height:0; aspect-ratio:16/11}
  .dlg__body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch}
  .dlg__close{top:10px; right:10px; width:44px; height:44px}
}
@media (max-width:420px){
  .events__grid{grid-template-columns:1fr}
  .story__stats{gap:1.6rem}
  .dlg{padding:0}
  .dlg__panel{border-radius:0; height:100svh; max-height:100svh}
  .dlg__media{aspect-ratio:4/3}
  .dlg__body{padding:20px 20px calc(24px + env(safe-area-inset-bottom))}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .ticker__track,.rev-track{animation:none}
  .reveal{opacity:1; transform:none}
}

/* ============================================================================
   HINWEISLEISTE („Insel News") — Inhalt kommt aus /admin
   Liegt fest unter der Navigation. Kein Layout-Sprung: sie überlagert den
   oberen Rand des Hero, dessen Inhalt ohnehin unten sitzt.
   ========================================================================== */
.notice{
  position:fixed; top:var(--nav-h); left:0; right:0; z-index:58;
  opacity:0; transform:translateY(-8px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.notice[hidden]{display:none}
.notice.is-in{opacity:1; transform:none}
.notice__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:.72rem var(--pad); padding-right:calc(var(--pad) + 8px);
  display:flex; align-items:center; gap:.9rem;
}
.notice__tag{
  flex:0 0 auto; padding:.3em .85em; border-radius:100px;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
}
.notice__tag[hidden]{display:none}
.notice__txt{
  flex:1 1 auto; margin:0; font-size:.92rem; font-weight:400; line-height:1.4;
}
.notice__close{
  flex:0 0 auto; width:34px; height:34px; margin-right:-6px;
  border-radius:50%; display:grid; place-items:center;
  opacity:.7; transition:opacity .25s, background .25s;
}
.notice__close svg{width:16px; height:16px}
.notice__close:hover{opacity:1; background:rgba(255,255,255,.14)}

/* Drei Tonlagen — im Admin auswählbar */
.notice--hinweis{background:linear-gradient(90deg,var(--green-800),var(--green)); color:var(--cream-on-dark)}
.notice--hinweis .notice__tag{background:var(--gold); color:var(--green-900)}
.notice--angebot{background:linear-gradient(90deg,#B08633,var(--gold)); color:var(--green-900)}
.notice--angebot .notice__tag{background:rgba(22,40,30,.82); color:var(--gold-soft)}
.notice--angebot .notice__close:hover{background:rgba(22,40,30,.14)}
.notice--wichtig{background:linear-gradient(90deg,#8C3320,#B4432A); color:#FDF6EC}
.notice--wichtig .notice__tag{background:#FDF6EC; color:#8C3320}

@media (max-width:768px){
  .notice__inner{padding-block:.5rem; gap:.55rem; align-items:flex-start}
  .notice__txt{font-size:.8rem; line-height:1.35}
  .notice__tag{font-size:.58rem; padding:.24em .62em; letter-spacing:.12em; margin-top:.08em}
  .notice__close{width:28px; height:28px; margin-right:-4px}
  .notice__close svg{width:14px; height:14px}
}
@media (prefers-reduced-motion:reduce){
  .notice{transition:none}
}

/* ============================================================================
   INSEL NEWS — Pop-up-Variante (Form wird im Admin gewählt)
   ========================================================================== */
.popnews{position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:clamp(14px,4vw,40px)}
.popnews[hidden]{display:none}
.popnews__grund{
  position:absolute; inset:0; background:rgba(15,29,22,.74);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .3s var(--ease-out);
}
.popnews.is-in .popnews__grund{opacity:1}
.popnews__karte{
  position:relative; z-index:1;
  width:min(400px,100%); max-height:min(86svh,640px);
  overflow-y:auto; overscroll-behavior:contain;
  background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(16px) scale(.97);
  transition:opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.popnews.is-in .popnews__karte{opacity:1; transform:none}
.popnews__close{
  position:absolute; top:12px; right:12px; z-index:3;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(253,251,245,.94); color:var(--green-900);
  box-shadow:0 6px 18px -8px rgba(22,40,30,.55);
  transition:transform .3s var(--ease-out), background .3s;
}
.popnews__close svg{width:18px; height:18px}
.popnews__close:hover{transform:rotate(90deg); background:#fff}
/* Feste Höhe statt der vollen Bildhöhe: ein Hochformat-Motiv würde sonst den
   ganzen Bildschirm füllen. Rund 42 Prozent der Fensterhöhe, nach oben und
   unten gedeckelt. object-fit schneidet sauber zu, statt zu verzerren. */
.popnews__bild{
  width:100%; display:block; background:var(--green-900);
  height:clamp(170px, 42svh, 340px);
  object-fit:cover; object-position:center;
}
.popnews__bild[hidden]{display:none}
.popnews__body{padding:clamp(20px,5vw,30px)}
.popnews__tag{
  display:inline-block; padding:.34em .95em; border-radius:100px;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  background:var(--green); color:var(--cream-on-dark);
}
.popnews__tag[hidden]{display:none}
.popnews--angebot .popnews__tag{background:var(--gold); color:var(--green-900)}
.popnews--wichtig .popnews__tag{background:#8C3320; color:#FDF6EC}
.popnews__titel{margin-top:.7rem; font-family:var(--serif); font-size:1.7rem; font-weight:500; color:var(--green-900)}
.popnews__titel[hidden]{display:none}
.popnews__txt{margin-top:.8rem; color:var(--ink-soft); font-size:1rem; font-weight:300; line-height:1.55}
.popnews__knopf{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:1.4rem; padding:.85em 1.7em; border-radius:100px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:var(--green-900);
  font-weight:500; transition:transform .25s var(--ease-out), box-shadow .3s;
}
.popnews__knopf[hidden]{display:none}
.popnews__knopf:hover{transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(22,40,30,.6)}

@media (max-width:480px){
  .popnews{padding:18px}
  .popnews__karte{width:100%; max-height:84svh}
  .popnews__bild{height:clamp(150px, 42svh, 390px)}
  .popnews__body{padding:18px 18px 22px}
}
/* Niedrige Fenster (Handy quer, kleines Notebook): Bild weiter zurücknehmen,
   damit Text und Knopf sicher sichtbar bleiben. */
@media (max-height:620px){
  .popnews__bild{height:clamp(120px, 34svh, 220px)}
  .popnews__karte{max-height:92svh}
}
@media (prefers-reduced-motion:reduce){
  .popnews__grund,.popnews__karte{transition:none}
}