/* ============================================================
   LAKE LOUNGE — Marken-Designsystem (mehrseitig)
   Eigenständige Variante nach Recherche (L'Osteria, Hans im Glück)
   ============================================================ */
/* --- Self-hosted Schriften (DSGVO-konform, keine Google-Server) ---
   Benötigte .woff2-Dateien in /src/assets/fonts/ ablegen (siehe SCHRIFTEN_README.md):
   cormorant-400.woff2 · cormorant-italic-400.woff2 · cormorant-600.woff2
   dmsans-400.woff2 · dmsans-500.woff2
   Solange Dateien fehlen, greift sauber der System-Fallback (font-display:swap). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-italic-400.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/cormorant-600.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/dmsans-400.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/dmsans-500.woff2") format("woff2")}
:root{
  /* BLAU-Palette (Wunsch des Inhabers, angelehnt an die bestehende Website) + goldene Sonne als Signatur */
  --paper:#F4F7F9; --paper-2:#FFFFFF;
  --navy:#012B3E;        /* tiefes Teal-Navy — exakt aus dem Logo */
  --navy-2:#01405C;
  --cream:#F5F1AE;       /* Creme aus dem Logo — Akzent NUR auf Navy */
  --ink:#132E3B;         /* Text dunkelblau */
  --blue:#3E7CA0;        /* mittlerer See-Blauton (Akzent/Links) */
  --blue-deep:#2A5C78;
  --sun:#E8A24C;         /* goldene Sonne - Signatur-Akzent auf hellen Flaechen (Buttons) */
  --sun-deep:#D6822E;
  --sun-hi:#F3C375;      /* helle Tönung für goldene Glas-Buttons */
  --sun-label:#996213;   /* dunkleres Gold für Eyebrows auf HELLEM Grund (WCAG AA); Vibrant-Gold bleibt auf Navy */
  --line:#DCE6EC;        /* kuehle helle Linien */
  --muted:#556D79;       /* kuehler Grauton (WCAG AA auf hellem BG, >=4.5:1) */
  /* Kompatibilitaets-Aliase: alte Token zeigen auf neue Blautoene */
  --espresso:#012B3E; --clay:#2A5C78; --sage:#3E7CA0; --sage-deep:#2A5C78; --brass:#C8915A;
  --maxw:1180px;

  /* Schriften */
  --font-serif:"Cormorant Garamond",Georgia,serif;
  --font-sans:"DM Sans",-apple-system,sans-serif;

  /* Spacing-Tokens (konsistentes Abstandssystem) */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-6:3rem;  --sp-8:4rem; --sp-12:6rem;  --sp-16:8rem;

  /* Fluid-Typ-Skala */
  --t-xs:  clamp(.75rem,  .7rem  + .25vw, .875rem);
  --t-sm:  clamp(.875rem, .8rem  + .375vw,1rem);
  --t-base:clamp(1rem,    .95rem + .25vw, 1.125rem);
  --t-lg:  clamp(1.125rem,1rem   + .625vw,1.375rem);
  --t-xl:  clamp(1.5rem,  1.2rem + 1.5vw, 2.25rem);
  --t-2xl: clamp(1.875rem,1.2rem + 3.3vw, 3.25rem);
  --t-3xl: clamp(2.5rem,1.5rem + 6vw,   5.5rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--paper);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* Ausnahme: Formularfelder müssen editierbar/markierbar bleiben */
input,textarea,select,[contenteditable]{-webkit-user-select:text;user-select:text}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
picture{display:contents}   /* WebP-Wrapper layout-neutral: <img> verhaelt sich wie zuvor */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.serif{font-family:var(--font-serif)}
.label{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--sun-label)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:12px 26px;font-weight:500;font-size:14px;transition:.18s;cursor:pointer;border:0;font-family:var(--font-sans)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.68;cursor:default;pointer-events:none}
.btn-sun{color:var(--espresso);background:linear-gradient(120deg,rgba(255,244,219,.44) 0%,rgba(255,255,255,.1) 32%,rgba(255,255,255,0) 52%),linear-gradient(155deg,rgba(243,195,117,.88) 0%,rgba(232,162,76,.82) 52%,rgba(214,130,46,.8) 100%);border:1px solid rgba(255,231,184,.7);-webkit-backdrop-filter:blur(7px) saturate(1.12);backdrop-filter:blur(7px) saturate(1.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(116,61,14,.13),0 6px 16px rgba(1,43,62,.17),0 1px 3px rgba(116,61,14,.15);text-shadow:0 1px 0 rgba(255,255,255,.2);transform:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),filter .18s var(--ease),border-color .18s var(--ease)}
.btn-sun:hover{color:var(--espresso);filter:saturate(1.03) brightness(1.025);border-color:rgba(255,240,209,.82);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.66),inset 0 -1px 0 rgba(116,61,14,.11),0 8px 18px rgba(1,43,62,.19),0 1px 3px rgba(116,61,14,.14)}
.btn.btn-sun:active{filter:brightness(.99);transform:translateY(1px) scale(.995);box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 1px 3px rgba(116,61,14,.12),0 3px 8px rgba(1,43,62,.14)}
.btn-out{border:1.5px solid currentColor;background:transparent}.btn-out:hover{background:var(--espresso);color:var(--paper);border-color:var(--espresso)}
.btn-light,.btn-ghost-light{color:#fff;background:linear-gradient(135deg,rgba(234,244,249,.13),rgba(151,183,199,.07) 45%,rgba(1,43,62,.2)),rgba(1,43,62,.3);border:1px solid rgba(218,234,242,.46);-webkit-backdrop-filter:blur(8px) saturate(1.08);backdrop-filter:blur(8px) saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(1,24,35,.22),0 2px 0 rgba(1,24,35,.42),0 6px 14px rgba(0,0,0,.2);text-shadow:0 1px 3px rgba(0,0,0,.3);transform:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
.btn-light:hover,.btn-ghost-light:hover{color:#fff;background:linear-gradient(135deg,rgba(239,247,251,.18),rgba(151,183,199,.1) 46%,rgba(1,43,62,.18)),rgba(1,43,62,.28);border-color:rgba(229,241,247,.64);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(1,24,35,.2),0 3px 0 rgba(1,24,35,.42),0 8px 16px rgba(0,0,0,.22)}
.btn.btn-light:active,.btn.btn-ghost-light:active{transform:translateY(2px) scale(.99);background:linear-gradient(135deg,rgba(218,235,243,.1),rgba(1,43,62,.25)),rgba(1,43,62,.34);box-shadow:inset 0 2px 4px rgba(1,24,35,.25),inset 0 1px 0 rgba(255,255,255,.11),0 0 0 rgba(1,24,35,.42),0 2px 5px rgba(0,0,0,.17)}
.proto-hint{background:#F0E6D2;color:#8a6d2f;font-size:12.5px;text-align:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.sun-mark{display:inline-block;vertical-align:middle}
.sun-watermark{position:absolute;pointer-events:none;z-index:0;aspect-ratio:512/329;background-color:currentColor;-webkit-mask:url(/assets/img/logo-mark.png) center/contain no-repeat;mask:url(/assets/img/logo-mark.png) center/contain no-repeat}

/* Header */
header{position:sticky;top:0;z-index:100;background:rgba(1,43,62,.93);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(245,241,174,.14)}
body.nav-open header{backdrop-filter:none;-webkit-backdrop-filter:none}
header.scrolled .qlinks{top:74px;left:50%}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-serif);font-size:20px;font-weight:400;letter-spacing:.3px;flex-shrink:0;color:var(--cream)}
.brand .logo-mark{height:28px;width:auto;display:block}
.brand .logo-word{height:13px;width:auto;display:block;filter:drop-shadow(0 1px 1.4px rgba(0,0,0,.45))}
.qlinks{display:flex;gap:26px;font-size:14px;font-weight:500;margin-left:auto;color:#EAF1F5}
.qlinks a{opacity:.72;transition:.15s;position:relative;padding:5px 0;white-space:nowrap}
.qlinks a:hover,.qlinks a.on{opacity:1}
.qlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--sun)}
.nav .resv{flex-shrink:0;display:flex;align-items:center}
.nav .resv .btn{padding:10px 20px;font-size:13.5px;line-height:1}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:10px;font-size:25px;line-height:1;cursor:pointer;color:#EAF1F5;position:relative;z-index:101;transition:color .2s,background-color .2s}
body.nav-open .burger{color:#fff}
@media(max-width:1040px){
  .qlinks{
    display:none;position:fixed;top:74px;left:50%;right:0;
    background:linear-gradient(135deg,#1C4A62 0%,var(--navy) 50%,#0C2230 100%);
    flex-direction:column;gap:0;margin:0;
    padding:8px 0 20px;z-index:100;
    border-radius:18px 0 0 18px;
    box-shadow:0 16px 48px rgba(19,48,63,.4);
  }
  .qlinks.open{display:flex}
  /* Haupt-Nav-Links */
  .qlinks a:not(.mobile-only){
    font-size:16px;font-weight:500;
    color:rgba(255,255,255,.8);padding:14px 28px;
    border-bottom:1px solid rgba(255,255,255,.07);opacity:1;
    transition:color .15s var(--ease),background-color .15s var(--ease);
  }
  .qlinks a:not(.mobile-only):last-of-type{border-bottom:0}
  .qlinks a:not(.mobile-only):hover{color:var(--sun);background:rgba(255,255,255,.04)}
  .qlinks a:not(.mobile-only).on{color:var(--sun)}
  /* Sekundäre Links */
  .qlinks a.mobile-only{
    display:flex;align-items:center;gap:9px;line-height:1;
    font-size:13px;font-weight:500;color:#E0AE66;
    padding:11px 28px;border-top:0;margin-top:0;transition:color .15s;
  }
  .qlinks a.mobile-only svg{flex-shrink:0;display:block}
  .qlinks a.mobile-only:hover{color:var(--sun)}
  .qlinks a.mobile-ig{border-top:1px solid rgba(255,255,255,.1) !important;padding-top:14px;margin-top:6px}
  body.nav-open{overflow:hidden}
  .burger{display:flex;order:3}.nav .resv{display:none}
}

/* Page-Hero (Unterseiten) */
.phero{position:relative;overflow:hidden;padding:clamp(36px,5vh,64px) 0;background:radial-gradient(110% 90% at 82% -10%, #CFE3EE, rgba(207,227,238,0) 55%), linear-gradient(168deg,#EAF1F5,#DCE9F0)}
.phero .sun-watermark{top:-9vw;right:-7vw;width:44vw;color:var(--sun);opacity:.28}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-family:var(--font-serif);font-weight:400;font-size:var(--t-2xl);line-height:1.04;letter-spacing:-.1px;color:var(--espresso);margin-top:var(--sp-2)}
.phero p{margin-top:var(--sp-3);font-size:var(--t-base);color:var(--muted);max-width:52ch}
.crumb{font-size:13px;color:var(--muted)}
.crumb a{color:var(--clay);font-weight:600}

/* Hero (Start) – Video-Header */
.hero{position:sticky;top:74px;z-index:0;min-height:calc(100svh - 74px);display:flex;align-items:center;overflow:hidden;color:#fff;background:var(--navy)}
/* Curtain-Reveal: nachfolgender Inhalt schiebt sich beim Scrollen über den fixierten Hero */
.hero ~ *{position:relative;z-index:1}
.hero + section{background:var(--paper)}
#faq{background:var(--paper)}
.hero-media{position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,#1C4257 0%, #13303F 58%, #0C2230 100%)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hero-video.is-playing{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,28,40,.70) 0%, rgba(10,28,40,.40) 45%, rgba(10,28,40,.16) 100%), linear-gradient(180deg,rgba(10,28,40,.28) 0%, rgba(10,28,40,.40) 60%, rgba(10,28,40,.60) 100%)}
.hero .wrap{position:relative;z-index:2;padding:40px 26px;text-align:center}
.hero-eyebrow{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#C2D2DC;margin-bottom:24px;line-height:1.7;text-shadow:0 1px 10px rgba(8,20,30,.55)}
.hero-eyebrow b{color:#F0C277;font-weight:600}
.hero-eyebrow .loc{position:relative;margin-left:13px;padding-left:14px;white-space:nowrap}
.hero-eyebrow .loc::before{content:"";position:absolute;left:0;top:0;bottom:0;margin:auto 0;width:1px;height:11px;background:rgba(159,179,191,.45)}
@media(max-width:560px){.hero-eyebrow .loc{display:block;margin:7px 0 0;padding:0}.hero-eyebrow .loc::before{display:none}}
.hero .kicker{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero .kicker .ln{height:1px;width:48px;background:var(--sun);opacity:.85}
.hero .label{color:#F0C277}
.hero h1{font-family:var(--font-serif);font-weight:400;font-size:var(--t-3xl);line-height:.96;letter-spacing:-1px;color:#fff;text-shadow:0 2px 22px rgba(8,20,30,.4)}
.hero h1 .hl{display:block;white-space:nowrap;font-size:clamp(1.5rem,5.7vw,4.8rem);letter-spacing:-.5px}
.hero h1 .sub{display:block;font-weight:400;font-style:italic;font-size:var(--t-xl);letter-spacing:0;color:#FBD9A0;margin-top:var(--sp-2)}
.hero .lede{margin-top:var(--sp-4);font-size:var(--t-lg);color:#E7EEF2;max-width:46ch;text-shadow:0 1px 14px rgba(8,20,30,.5)}
.hero .actions{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.hero .actions .btn{min-height:44px;padding:10px 22px;font-size:13.5px}
.hero .badge{position:absolute;right:5vw;bottom:120px;z-index:2;background:rgba(19,48,63,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.13);color:#fff;border-radius:12px;padding:10px 14px;max-width:190px;transform:rotate(-2deg);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hero .badge .big{font-family:var(--font-serif);font-size:22px;line-height:1;color:#FBD9A0}
.hero .badge .small{font-size:11px;color:#C7D6DE;margin-top:4px;line-height:1.4}
@media(max-width:780px){.hero .badge{display:none}}
@media(max-width:780px){.hero{min-height:calc(100svh - 74px)}}
@media(max-width:560px){.hero .actions{gap:12px}.hero .actions .btn{padding:9px 18px;font-size:13px}}

/* Trust-Ticker */
.ticker{background:var(--espresso);color:var(--paper);overflow:hidden;white-space:nowrap}
.ticker .run{display:inline-flex;animation:tick 30s linear infinite;will-change:transform}
.ticker:hover .run{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker .it{display:inline-flex;align-items:center;gap:12px;padding:15px 0;font-size:13.5px;letter-spacing:1px}
.ticker .it .dot{color:var(--sun);margin:0 30px}
.ticker b{color:#fff}
@media(prefers-reduced-motion:reduce){.ticker .run{animation:none}}

/* Sektionsköpfe */
section{padding:var(--sp-8) 0}
@media(max-width:560px){section{padding:var(--sp-4) 0}}
.shead{max-width:620px;margin-bottom:var(--sp-3)}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{font-family:var(--font-serif);font-weight:400;font-size:var(--t-2xl);line-height:1.08;letter-spacing:-.1px;margin-top:var(--sp-2)}
.shead p{margin-top:var(--sp-2);font-size:var(--t-base);color:var(--muted)}

/* Drei Welten (Funnel auf Startseite) */
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.worlds{grid-template-columns:1fr;gap:14px}}
.world{position:relative;border-radius:16px;overflow:hidden;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;color:#fff;transition:.22s}
.world:hover{transform:translateY(-6px);box-shadow:0 24px 56px rgba(19,48,63,.28)}
.world.w1{background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),url(/assets/img/fotos/restaurant-gastraum-lake-lounge.jpg);background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),image-set(url(/assets/img/fotos/restaurant-gastraum-lake-lounge.webp) type("image/webp"),url(/assets/img/fotos/restaurant-gastraum-lake-lounge.jpg) type("image/jpeg"));background-size:cover;background-position:center 65%}
.world.w2{background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),url(/assets/img/fotos/feiern-festtafel-soier-see.jpg);background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),image-set(url(/assets/img/fotos/feiern-festtafel-soier-see.webp) type("image/webp"),url(/assets/img/fotos/feiern-festtafel-soier-see.jpg) type("image/jpeg"));background-size:cover;background-position:center 42%}
.world.w3{background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),url(/assets/img/fotos/ferienwohnung-wohnzimmer-soier-see.jpg);background-image:linear-gradient(to top,rgba(8,22,32,.94) 0%,rgba(8,22,32,.82) 34%,rgba(8,22,32,.34) 70%,rgba(8,22,32,.5) 100%),image-set(url(/assets/img/fotos/ferienwohnung-wohnzimmer-soier-see.webp) type("image/webp"),url(/assets/img/fotos/ferienwohnung-wohnzimmer-soier-see.jpg) type("image/jpeg"));background-size:cover;background-position:center 42%}
/* Zusätzliche Abdunklung zum linken Rand – hält die Schrift (Titel/Text/Link) überall lesbar,
   während der helle Blick rechts erhalten bleibt. Liegt unter dem Text (z-index:2). */
.world::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to right,rgba(8,22,32,.72) 0%,rgba(8,22,32,.34) 44%,rgba(8,22,32,0) 72%)}
.world .ph-label{position:absolute;top:16px;right:18px;font-size:10px;letter-spacing:2px;text-transform:uppercase;opacity:.7}
.world .num{display:none}
.world h3{font-family:var(--font-serif);font-weight:600;font-size:26px;position:relative;z-index:2;color:var(--sun);text-shadow:0 1px 12px rgba(8,20,30,.65)}
.world p{position:relative;z-index:2;margin:8px 0 16px;font-size:14.5px;color:rgba(255,255,255,.92);max-width:34ch}
.world .go{position:relative;z-index:2;font-weight:600;font-size:14.5px;border-bottom:2px solid rgba(255,255,255,.7);padding-bottom:2px;align-self:flex-start}
@media(max-width:860px){
  .world{min-height:210px;justify-content:flex-start;padding:22px 22px 24px}
  .world.w3{background-position:center 35%}
  .world .num{display:none}
  .world h3{font-size:23px}
  .world p{margin:6px 0 14px;max-width:none}
}

/* Story-Teaser (Split) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.split .ph{min-height:440px;border-radius:20px;position:relative;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.9);font-size:12px;letter-spacing:2px;text-transform:uppercase;text-align:center;padding:22px;background:linear-gradient(150deg,#9DB8C6,#5E7E90)}
.split .ph .sun-watermark{color:#fff;opacity:.5;width:140px;top:50%;left:50%;transform:translate(-50%,-50%)}
/* Sobald ein echtes Foto in .ph liegt: Platzhalter-Rahmen (Padding/Verlauf) entfernen */
.split .ph:has(img){padding:0;background:none;min-height:0;aspect-ratio:3/2}
.split .ph img{display:block;width:100%;height:100%;object-fit:cover}
/* Ueber-uns-Portraet: aufrechtes 4:5-Format, etwas herausgezoomt (ganze Person + Terrasse sichtbar).
   .ph.ph--match schlaegt die Basisregel .split .ph:has(img){aspect-ratio:3/2}. */
.split .ph.ph--match{aspect-ratio:4/5;max-width:400px;justify-self:center}
.split .ph.ph--match img{object-position:center 32%}
.split blockquote{font-family:var(--font-serif);font-style:italic;font-size:clamp(20px,2.4vw,28px);line-height:1.35;color:var(--clay);margin:22px 0;border-left:3px solid var(--sun);padding-left:20px}

/* Lieblinge */
.faves{background:var(--navy);color:var(--paper);position:relative;overflow:visible;padding-bottom:1.75rem}   /* an das (ebenfalls navy) Review-Band angeschmiegt -> weniger Leerraum */
/* Bridge: Sonne überlappt die Naht Welten (hell) → Lieblinge (navy) und verbindet beide */
.faves .sun-watermark{top:-72px;left:6%;width:200px;color:var(--sun);opacity:.14}
@media(max-width:560px){.faves .sun-watermark{top:-70px;left:50%;transform:translateX(-50%);width:160px}}
.faves .shead{position:relative;z-index:2}
.faves .label{color:var(--sun)}
.faves .shead p{color:#CDBBA4}
.fgrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media(max-width:1080px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fgrid{grid-template-columns:1fr}}
/* Mandala liegt NUR innerhalb der Kacheln (::after), aussen bleibt der Grund plain – wie ausgestanzt. */
.fave{position:relative;background:transparent;border:1px solid rgba(232,162,76,.22);border-radius:14px;padding:24px 22px;overflow:hidden;box-shadow:0 18px 36px -12px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .25s var(--ease),background .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.fave::after{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/img/mandala.svg) center / 460px auto repeat;opacity:.09;pointer-events:none}   /* Mandala nur in der Kachel – gross */
.fgrid .fave:nth-child(1)::after{background-position:14% 22%}   /* je Kachel anderer Ausschnitt */
.fgrid .fave:nth-child(2)::after{background-position:80% 58%}
.fgrid .fave:nth-child(3)::after{background-position:32% 82%}
.fgrid .fave:nth-child(4)::after{background-position:92% 18%}
.fave > *{position:relative;z-index:1}
#live .fave::after{content:none}   /* Feiern-Party-Box nutzt .fave, aber OHNE Mandala */
.fave::before{content:"";position:absolute;left:22px;top:0;z-index:2;height:2px;width:26px;background:var(--sun);border-radius:0 0 2px 2px;transition:width .3s var(--ease)}   /* Gold-Akzentleiste – waechst beim Hover */
.faves .fave:hover{border-color:rgba(232,162,76,.55);background:rgba(255,255,255,.03);box-shadow:0 26px 50px -14px rgba(0,0,0,.58),0 6px 14px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.fave:hover::before{width:calc(100% - 44px)}
.fave .tag{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sun);margin-bottom:14px}
.fave-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:11px;padding-bottom:11px;border-bottom:1px solid rgba(232,162,76,.15)}
.fave h3{font-family:var(--font-serif);font-weight:400;font-size:24px;letter-spacing:.2px;color:#fff}
.fave .price{font-family:var(--font-serif);color:var(--sun);font-weight:400;font-size:19px;white-space:nowrap}
.fave p{font-size:14.5px;color:#C6B7A3;line-height:1.55}
.faves .cta{position:relative;z-index:2;margin-top:42px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.faves .note{font-size:13px;color:#A99883;max-width:44ch}

/* Stimmen */
.voices{background:var(--blue-deep);color:var(--paper)}
.voices .label{color:#E7C9A0}
.voices .shead h2{color:#fff}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.vgrid{grid-template-columns:1fr}}
.voice{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:26px;position:relative}
.voice .g{position:absolute;top:22px;right:22px;width:22px;height:22px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75% 100%);display:flex;align-items:center;justify-content:center}
.voice .g i{width:13px;height:13px;border-radius:50%;background:#fff;font-style:normal;font-size:9px;font-weight:bold;color:#4285F4;display:flex;align-items:center;justify-content:center}
.voice .stars{color:var(--sun);letter-spacing:2px;margin-bottom:10px}
.voice p{font-size:15px;color:#EDE6D8}
.voice .who{margin-top:14px;font-size:13px;color:#C7BCA7}

/* CTA-Band */
.cta-band{position:relative;overflow:hidden;background:radial-gradient(100% 80% at 80% 0%, #CFE3EE, rgba(207,227,238,0) 55%), var(--paper);text-align:center}
.cta-band .sun-watermark{top:-8vw;left:-6vw;width:34vw;color:var(--sun);opacity:.22}
/* Bridge-Variante: Wasserzeichen überlappt die Naht zwischen FAQ und CTA und verbindet beide Bereiche */
.cta-band--bridge{overflow:visible}
.cta-band--bridge .sun-watermark{top:-100px;left:6%;width:210px;opacity:.13}
@media(max-width:560px){.cta-band--bridge .sun-watermark{top:-70px;left:50%;transform:translateX(-50%);width:160px}}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-family:var(--font-serif);font-weight:400;font-size:var(--t-2xl);line-height:1.06;letter-spacing:-.1px}
.cta-band p{margin:var(--sp-2) auto var(--sp-4);font-size:var(--t-base);color:var(--muted);max-width:48ch}
/* Foto-Hintergrund-Variante: dunkler Overlay + heller Text für Lesbarkeit */
.cta-band--photo{background:var(--navy);background-size:cover;background-position:center}
/* Bild liegt auf ::before -> kann via --cta-blur weichgezeichnet werden, ohne den Text zu blurren.
   --cta-scale überzoomt leicht, damit die weichen Blur-Ränder nicht sichtbar werden. */
.cta-band--photo::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:inherit;background-position:inherit;background-size:cover;
  filter:blur(var(--cta-blur,0));transform:scale(var(--cta-scale,1))}
.cta-band--photo::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(10,28,40,.80) 0%,rgba(10,28,40,.55) 50%,rgba(10,28,40,.40) 100%)}
.cta-band--photo .wrap{z-index:2}
.cta-band--photo h2{color:#fff;text-shadow:0 2px 22px rgba(8,20,30,.4)}
.cta-band--photo p{color:#E7EEF2;text-shadow:0 1px 14px rgba(8,20,30,.5)}
/* sanfter Weichzeichner für niedriger aufgelöste Hintergrundfotos */
.cta-band--blur{--cta-blur:3px;--cta-scale:1.06}

/* Buchungs-CTA (Übernachten) mit Wohnungsfoto im Hintergrund */
.booking-cta{position:relative;background-color:var(--navy);background-size:cover;background-position:center;overflow:hidden}
.booking-cta::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(1,43,62,.86) 0%,rgba(1,43,62,.66) 55%,rgba(1,43,62,.5) 100%)}
.booking-cta > .wrap{position:relative;z-index:1}
.booking-cta .shead h2{color:#fff;text-shadow:0 2px 20px rgba(8,20,30,.4)}
.booking-cta .shead p{color:#E7EEF2;text-shadow:0 1px 12px rgba(8,20,30,.45)}
.booking-cta .shead .label{color:var(--sun);text-shadow:0 1px 10px rgba(8,20,30,.55)}

/* Dezentes, wiederholtes Mandala-Wasserzeichen (Gold, mit Logo-Sonne im Zentrum).
   Datei: /assets/img/mandala.svg (prozedural erzeugt). Wiederverwendbar via .mandala-bg
   (z. B. Speisekarte = .menu-bg, Über uns). Deckkraft/Kachelgröße unten justierbar. */
.menu-bg,.mandala-bg{position:relative;overflow:hidden}
.menu-bg::before,.mandala-bg::before{content:"";position:absolute;inset:0;
  background:url(/assets/img/mandala.svg) center top / 540px 540px repeat;
  opacity:.1;pointer-events:none;z-index:0}
.menu-bg > .wrap,.mandala-bg > .wrap{position:relative;z-index:1}

/* Speisekarte (Unterseite) */
.menu-nav{position:sticky;top:74px;z-index:40;width:100%;box-sizing:border-box;background:rgba(250,247,242,.78);backdrop-filter:blur(12px);border-bottom:1px solid rgba(220,230,236,.5)}
/* Rand-Fades zeigen an, dass die Leiste seitlich weiterläuft (JS toggelt is-scrollable/at-start/at-end) */
.menu-nav::before,.menu-nav::after{content:"";position:absolute;top:0;bottom:1px;width:38px;pointer-events:none;z-index:1;opacity:0;transition:opacity .2s var(--ease)}
.menu-nav::before{left:0;background:linear-gradient(to right,rgba(250,247,242,.96),rgba(250,247,242,0))}
.menu-nav::after{right:0;background:linear-gradient(to left,rgba(250,247,242,.96),rgba(250,247,242,0))}
.menu-nav.is-scrollable:not(.at-start)::before{opacity:1}
.menu-nav.is-scrollable:not(.at-end)::after{opacity:1}
.menu-nav .inner{display:flex;gap:2px;overflow-x:auto;padding:9px 26px;scrollbar-width:none;-ms-overflow-style:none;box-sizing:border-box;justify-content:safe center;scroll-padding-inline:20px}
@media(max-width:560px){.menu-nav .inner{padding:9px 16px}}
.menu-nav .inner::-webkit-scrollbar{display:none}
.menu-nav .inner::after{content:'';display:block;flex-shrink:0;min-width:26px}
.menu-nav a{flex-shrink:0;white-space:nowrap;font-size:13.5px;font-weight:500;color:var(--muted);border:1px solid transparent;border-radius:999px;padding:9px 15px;transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.menu-nav a:hover{color:var(--ink)}
.menu-nav a.on{color:#9A5E18;font-weight:600;background:linear-gradient(145deg,rgba(255,248,234,.8),rgba(243,195,117,.25) 48%,rgba(232,162,76,.2)),rgba(255,255,255,.38);border-color:rgba(232,162,76,.43);-webkit-backdrop-filter:blur(8px) saturate(1.08);backdrop-filter:blur(8px) saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(154,94,24,.12),0 2px 0 rgba(177,110,34,.2),0 5px 11px rgba(1,43,62,.11);text-shadow:0 1px 0 rgba(255,255,255,.6);transform:translateY(-1px)}
.menu-nav a.on:active{transform:translateY(1px);box-shadow:inset 0 2px 4px rgba(154,94,24,.13),inset 0 1px 0 rgba(255,255,255,.68),0 1px 3px rgba(1,43,62,.08)}
.mcat{padding:48px 0 0;scroll-margin-top:140px}
.mcat h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(26px,3.4vw,38px);display:flex;align-items:baseline;gap:14px}
.mcat h2 > span{white-space:nowrap}
.mcat h2 small{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--sun-deep);font-weight:700}
@media(max-width:780px){
  .mcat h2{flex-direction:column;align-items:flex-start;gap:4px}
  .mcat h2 small{display:block;white-space:nowrap;line-height:1.35}
}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:0 54px;margin-top:24px}
@media(max-width:780px){.mlist{grid-template-columns:1fr}}
.mdish{padding:16px 0;border-bottom:1px solid var(--line)}
.mdish .top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.mdish .nm{font-weight:600;font-size:16.5px;color:var(--espresso)}
.mdish .pr{color:var(--clay);font-weight:400;white-space:nowrap}
.mdish .ds{font-size:14px;color:var(--muted);margin-top:3px;padding-right:3.6em}
.dish-extras{margin-top:6px}
.ex-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13px;color:var(--muted);padding:2px 0}
.ex-row .ex-pr{color:var(--clay);white-space:nowrap}
.diet-tag{display:inline-block;font-size:10px;font-weight:400;letter-spacing:.04em;color:var(--sun-deep);border:1px solid var(--sun-deep);border-radius:20px;padding:1px 7px;vertical-align:middle;opacity:.85;margin-left:6px}
.allergen{margin:46px 0 0;background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:14px;padding:22px 24px;font-size:14px;color:var(--muted)}
.legal{font-size:15px;line-height:1.7;color:var(--ink)}
.legal h2{font-family:var(--font-serif);font-weight:400;font-size:var(--t-lg);margin:34px 0 10px;color:var(--ink)}
.legal h3{font-size:15px;font-weight:600;margin:22px 0 6px;color:var(--ink)}
.legal p,.legal li{color:var(--muted)}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px;display:grid;gap:4px}
.legal a{color:var(--clay);font-weight:600}
.legal strong{color:var(--ink)}

/* Feature-Liste (Unterseiten) */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
@media(max-width:680px){.feat{grid-template-columns:1fr}}
.feat .f{background:var(--paper-2);border:1px solid rgba(220,230,236,.7);border-radius:12px;padding:18px 20px}
.feat .f h3{font-family:var(--font-serif);font-weight:600;font-size:18px;margin-bottom:6px}
.feat .f p{font-size:14.5px;color:var(--muted)}
/* "Vier Dinge"-Kaesten: Milchglas – das Mandala der Sektion schimmert leicht durch (wie die Lieblinge-Kaesten) */
/* Echtes durchscheinendes Glas: transparente Flaeche (KEIN backdrop-filter – das wuerde das
   Mandala hinter dem .wrap-Stacking-Context nicht einfangen und weiss waschen). */
.feat .f:not(.f--img){position:relative;background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.4));border:1px solid rgba(232,162,76,.32);border-radius:14px;padding:22px 22px;overflow:hidden;box-shadow:0 16px 32px -12px rgba(19,48,63,.24),0 3px 8px rgba(19,48,63,.1),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.28);transition:border-color .25s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.mandala-bg:has(.feat)::before,.mandala-bg:has(.glass)::before{opacity:.2}   /* Sektionen mit Glas-Kaesten: Mandala kraeftiger -> schimmert deutlich durch */
.feat .f:not(.f--img)::before{content:"";position:absolute;left:22px;top:0;height:2px;width:26px;background:var(--sun);border-radius:0 0 2px 2px;transition:width .3s var(--ease)}   /* Gold-Akzentleiste */
.feat .f:not(.f--img):hover{border-color:rgba(232,162,76,.55);box-shadow:0 24px 44px -14px rgba(19,48,63,.3),0 4px 10px rgba(19,48,63,.12),inset 0 1px 0 rgba(255,255,255,.85)}
.feat .f:not(.f--img):hover::before{width:calc(100% - 44px)}
.feat .f:not(.f--img) > *{position:relative;z-index:1}
/* Anlass-Kacheln: diffuse Vollbildfläche, Text auf dunkler linker Unterkante */
.feat .f--img{position:relative;isolation:isolate;min-height:320px;padding:0;overflow:hidden;display:flex;align-items:flex-end;background:var(--navy);border-color:rgba(1,43,62,.18)}
.feat .f--img::before{content:"";position:absolute;z-index:-2;inset:-5px;background-image:var(--f-bg,linear-gradient(150deg,#26506A,var(--navy)));background-image:image-set(var(--f-bg-webp) type("image/webp"),var(--f-bg) type("image/jpeg"));background-size:cover;background-position:center;filter:blur(.7px) saturate(.94);transform:scale(1.03);transition:transform .55s var(--ease),filter .4s var(--ease)}
.feat .f--img::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(28deg,rgba(1,32,47,.96) 0%,rgba(1,43,62,.84) 30%,rgba(1,43,62,.35) 62%,rgba(1,43,62,.08) 100%)}
.feat .f--img:hover::before{transform:scale(1.06);filter:blur(.35px) saturate(.99)}
.feat .f--img>.sun-watermark{position:absolute;z-index:0;top:50%;left:50%;width:72px;transform:translate(-50%,-50%);color:var(--sun);opacity:.4}
.feat .f--img .f-body{position:relative;z-index:1;width:100%;padding:32px 30px 28px;color:#fff}
.feat .f--img h3{color:var(--sun);font-size:24px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.feat .f--img p{max-width:44ch;color:rgba(255,255,255,.9);text-shadow:0 1px 14px rgba(0,0,0,.42)}
.feat .f--img .more{display:inline-block;margin-top:16px;padding-bottom:2px;color:#fff;font-weight:600;border-bottom:2px solid var(--sun);text-shadow:0 1px 12px rgba(0,0,0,.45)}
.event-offers{padding:clamp(36px,4.5vw,56px) 0}
.event-offers .feat{margin-top:24px;gap:16px}
.event-offers .feat .f--img{min-height:255px}
.event-offers .feat .f--img .f-body{padding:26px 26px 24px}
@media(max-width:680px){
  .feat .f--img{min-height:290px}
  .feat .f--img .f-body{padding:26px 22px 24px}
  .feat .f--img h3{font-size:22px}
  .event-offers .feat .f--img{min-height:250px}
  .event-offers .feat .f--img .f-body{padding:24px 20px 22px}
}

/* Reservieren-Seite */
.rules{background:var(--paper-2);border:1px solid rgba(220,230,236,.7);border-radius:12px;padding:20px 22px}
.rules h3{font-family:var(--font-serif);font-weight:600;font-size:20px;margin-bottom:16px}
.rules .rule{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.rules .rule:first-of-type{border-top:0;padding-top:0}
.rules .ico{flex-shrink:0;width:20px;text-align:center;font-size:14px;color:var(--sun);font-weight:400;letter-spacing:0}
.rules b{color:var(--espresso)}
.resv-form--zones{margin-top:0}
.zone-fieldset{border:0;min-width:0;margin:0;padding:0}
.zone-legend{font-size:24px;line-height:1.2;color:var(--ink);margin-bottom:10px}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:10px 0 4px}
@media(max-width:560px){.zones{grid-template-columns:1fr 1fr}}
.zone{position:relative;display:block;cursor:pointer;text-align:center}
.zone-radio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.zone-visual{display:block;background:var(--navy);border:2px solid rgba(255,255,255,.12);border-radius:16px;overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.zone:hover .zone-visual{border-color:var(--sun);transform:translateY(-2px)}
.zone-radio:checked + .zone-visual{border-color:var(--sun);box-shadow:0 0 0 3px rgba(232,162,76,.25)}
.zone-radio:focus-visible + .zone-visual{outline:3px solid var(--sun);outline-offset:4px}
/* Bild-Bereich oben in jeder Zone-Karte */
.zone-img{display:block;height:90px;background-size:cover;background-position:center;position:relative}
.zone-img::after{content:"";position:absolute;inset:0;backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);background:rgba(255,255,255,.08);transition:backdrop-filter .3s var(--ease),-webkit-backdrop-filter .3s var(--ease),background .3s var(--ease)}
.zone-radio:checked + .zone-visual .zone-img::after{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);background:rgba(255,255,255,0)}
/* Placeholder-Gradienten – werden durch echte Fotos ersetzt:
   zone-img--terrasse → src/assets/img/zone-terrasse.jpg
   zone-img--innen    → src/assets/img/zone-innen.jpg
   zone-img--bar      → src/assets/img/zone-bar.jpg      */
.zone-img--terrasse{background-image:url(/assets/img/fotos/terrasse-soier-see-bad-bayersoien.jpg);background-image:image-set(url(/assets/img/fotos/terrasse-soier-see-bad-bayersoien.webp) type("image/webp"),url(/assets/img/fotos/terrasse-soier-see-bad-bayersoien.jpg) type("image/jpeg"))}
.zone-img--innen{background-image:url(/assets/img/fotos/restaurant-innen-bad-bayersoien.jpg);background-image:image-set(url(/assets/img/fotos/restaurant-innen-bad-bayersoien.webp) type("image/webp"),url(/assets/img/fotos/restaurant-innen-bad-bayersoien.jpg) type("image/jpeg"))}
.zone-img--bar{background-image:linear-gradient(150deg,#C8915A,#8B5E36)}
/* Echte Fotos (sobald vorhanden, Kommentar entfernen): */
/* .zone-img--terrasse{background-image:url(/assets/img/zone-terrasse.jpg)} */
/* .zone-img--innen{background-image:url(/assets/img/zone-innen.jpg)} */
/* .zone-img--bar{background-image:url(/assets/img/zone-bar.jpg)} */
.zone-label{display:block;padding:12px 10px 14px}
.zone .zn{display:block;font-weight:600;color:var(--sun);font-size:15px}
.zone .zs{display:block;font-size:12px;color:rgba(240,194,119,.8);margin-top:2px}

/* Footer */
footer{background:var(--navy);color:#C9BAA6;padding:60px 0 28px}
.fgrid2{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:38px;align-items:stretch}
.fcol{display:flex;flex-direction:column}
.fcol .fcta{margin-top:auto;padding-top:14px;color:#F0CFA6;font-weight:600}
@media(max-width:860px){.fgrid2{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid2{grid-template-columns:1fr;align-items:start;text-align:center}footer .hours-line{margin-left:auto;margin-right:auto}}
footer .fb{display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:21px;color:#fff}
footer .fbrand{text-align:center}
footer .fbrand .footer-logo{width:132px;height:auto;display:block;margin:0 auto 6px}
footer .fbrand p{margin-left:auto;margin-right:auto}
footer .fbrand .soc{justify-content:center}
footer h4{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:#A8967D;margin-bottom:15px}
footer a{display:block;font-size:14px;padding:4px 0;opacity:.85}
footer a:hover{opacity:1;color:#fff}
.gutschein{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:rgba(232,162,76,.16);border:1px solid rgba(232,162,76,.4);color:#F0CFA6;border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;cursor:pointer}
.fbottom{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:20px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#A8967D}
.fbottom a{display:inline;padding:0 0 0 16px}

/* Nav-Overlay: Inhalt diffus wenn Menü offen – blur direkt auf main/footer statt Overlay-Pseudo-Element */
main,footer,.mobile-bar{transition:filter .3s var(--ease)}
body.nav-open main,body.nav-open footer,body.nav-open .mobile-bar{filter:blur(4px) brightness(.7);pointer-events:none}
@media(prefers-reduced-motion:reduce){body.nav-open main,body.nav-open footer,body.nav-open .mobile-bar{filter:brightness(.5)}}

/* Mobile Reserve-Bar */
.mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:10px;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(1,43,62,.9),rgba(1,43,62,.98));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(245,241,174,.16);box-shadow:0 -10px 26px rgba(0,0,0,.3)}
.mobile-bar a{flex:1;text-align:center;justify-content:center}
.mobile-bar .btn{padding:9px 14px;font-size:13.5px;font-weight:600;gap:7px}
.mobile-bar .btn svg{width:15px;height:15px;flex-shrink:0}
.mobile-bar .btn-sun{background:linear-gradient(120deg,rgba(255,244,219,.42),rgba(255,255,255,.08) 38%,transparent 55%),linear-gradient(155deg,rgba(243,195,117,.88),rgba(232,162,76,.82) 56%,rgba(214,130,46,.8));color:var(--espresso);border-color:rgba(255,231,184,.68);-webkit-backdrop-filter:blur(8px) saturate(1.1);backdrop-filter:blur(8px) saturate(1.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.56),inset 0 -1px 0 rgba(116,61,14,.12),0 4px 10px rgba(0,0,0,.2);transform:none}
.mobile-bar .btn.btn-sun:active{transform:translateY(1px) scale(.995);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 1px 3px rgba(116,61,14,.12),0 2px 5px rgba(0,0,0,.16)}
.mobile-bar .btn-light{border-color:rgba(218,234,242,.42);background:linear-gradient(135deg,rgba(234,244,249,.12),rgba(151,183,199,.06) 45%,rgba(1,43,62,.2)),rgba(1,43,62,.3);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(1,24,35,.22),0 2px 0 rgba(1,24,35,.44),0 5px 11px rgba(0,0,0,.2);transform:none}
.mobile-bar .btn.btn-light:active{background:linear-gradient(135deg,rgba(218,235,243,.1),rgba(1,43,62,.25)),rgba(1,43,62,.34);transform:translateY(2px) scale(.99);box-shadow:inset 0 2px 4px rgba(1,24,35,.25),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 rgba(1,24,35,.44),0 2px 5px rgba(0,0,0,.16)}
@media(max-width:780px){.mobile-bar{display:flex}footer{padding-bottom:calc(28px + 56px)}}

/* Reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}


/* Reservierungs-Formular */
/* Reservierung/Event: Formular + Infobox. Auf Mobile einspaltig -> „Gut zu wissen“ rutscht unter das Formular. */
.resv-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
@media(max-width:780px){.resv-grid{grid-template-columns:1fr;gap:28px}}
.resv-form{margin-top:18px;display:grid;gap:14px}
.resv-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.resv-form .frow{grid-template-columns:1fr}}
.resv-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink)}
/* Einzeilige Überschriften mit fester Höhe -> Felder eines Paars starten immer auf gleicher Höhe.
   „optional“ als dezenter Chip statt Klammer-Zusatz in zweiter Zeile. */
.resv-form .cap{display:flex;align-items:center;gap:8px;min-height:20px;white-space:nowrap}
.resv-form .opt{font-weight:600;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 7px;line-height:1}
.resv-form input,.resv-form textarea,.resv-form select{font-family:var(--font-sans);font-size:15px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;color:var(--ink);outline:none;transition:.15s}
.resv-form input:focus,.resv-form textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(62,124,160,.15)}
.resv-form textarea{resize:none}
.resv-form input::placeholder,.resv-form textarea::placeholder{color:#6E7C85;opacity:1}
/* Zahlenfeld ohne Spinner-Pfeile -> Wert wird eingetippt */
.resv-form input[type=number]{-moz-appearance:textfield;appearance:textfield}
.resv-form input[type=number]::-webkit-outer-spin-button,
.resv-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Zeichenzähler unter der Nachricht */
.char-count{font-size:11.5px;font-weight:500;color:var(--muted);text-align:right;margin-top:-1px}
.char-count.near{color:var(--sun-deep)}
.review-panel .char-count{color:#9FB4BF}
.review-panel .char-count.near{color:var(--sun)}
/* Datenschutz: Hinweissatz (Reservierung/Event) + Pflichthaken (Bewerbung) */
.form-consent{font-size:12px;line-height:1.45;color:var(--muted);margin:2px 0 0}
.form-consent a{color:var(--clay);font-weight:600}
.resv-form .consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer}
.resv-form .consent input[type=checkbox]{flex:0 0 auto;width:19px;height:19px;padding:0;margin-top:1px;border-radius:5px;accent-color:var(--sun);cursor:pointer}
.resv-form .consent>span{flex:1;min-width:0}
.resv-form .consent a{color:var(--clay);font-weight:600}
/* Custom-Validierung: leere Pflichtfelder werden gold umrandet, dazu eine Hinweis-Box. */
.resv-form .err,.resv-form select.err,.resv-form textarea.err{border-color:var(--sun);box-shadow:0 0 0 3px rgba(232,162,76,.3)}
.resv-form .err:focus{border-color:var(--sun);box-shadow:0 0 0 3px rgba(232,162,76,.4)}
.form-hint{margin-top:2px;font-size:13px;font-weight:600;color:var(--sun-deep);background:rgba(232,162,76,.1);border:1px solid rgba(232,162,76,.4);border-radius:10px;padding:10px 13px}
.form-submit-status{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--sun-deep);background:rgba(232,162,76,.1);border:1px solid rgba(232,162,76,.4);border-radius:10px;padding:10px 13px}
.form-submit-status[data-state="error"]{color:var(--sun-deep)}
/* Tippfehler-Vorschlag für E-Mail-Domains */
.email-suggest{font-size:12.5px;font-weight:500;color:var(--muted)}
.email-suggest b{color:var(--ink);font-weight:600}
.email-suggest .fix{font:inherit;font-weight:600;color:var(--sun-deep);background:rgba(232,162,76,.14);border:1px solid rgba(232,162,76,.42);border-radius:999px;padding:2px 10px;margin-left:4px;cursor:pointer;transition:background .15s var(--ease)}
.email-suggest .fix:hover{background:rgba(232,162,76,.24)}
.resv-form input[type=time]{min-height:46px;color-scheme:light}

/* =====================================================================
   INTERAKTIONS-SCHICHT  (subtil, aber spürbar)
   ===================================================================== */
:root{ --ease:cubic-bezier(.2,.7,.2,1); }

/* Sanfte, einheitliche Hover-Hebung für alle „Karten" */
.world,.fave,.voice,.mcard,.zone,.f,.review-tile{
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background-color .28s var(--ease), border-color .28s var(--ease), filter .28s var(--ease);
  will-change:transform;
}
.world:hover,.mcard:hover{transform:translateY(-4px) scale(1.008);box-shadow:0 14px 32px rgba(19,48,63,.16);filter:saturate(1.04)}
.fave:hover,.voice:hover,.f:hover,.review-tile:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(19,48,63,.11)}

/* Speisekarte: jede Zeile blendet beim Drüberfahren leicht auf */
.mdish{transition:background-color .25s var(--ease), transform .25s var(--ease), padding-left .25s var(--ease);border-radius:10px;padding-left:8px;padding-right:8px;position:relative}
.mdish::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--sun);transform:scaleY(0);transform-origin:center;transition:transform .25s var(--ease);opacity:.0}
.mdish:hover{background:rgba(232,162,76,.07);padding-left:16px}
.mdish:hover::before{transform:scaleY(1);opacity:1}
.mdish:hover .nm{color:var(--clay)}
.mdish:hover .pr{color:var(--sun-deep)}

/* Buttons & Links: feines Feedback */
.btn{will-change:transform}
.btn:active{transform:translateY(0) scale(.985)}
@media(prefers-reduced-motion:reduce){
  .btn-sun,.btn-sun:hover,.btn.btn-sun:active,.mobile-bar .btn-sun,.mobile-bar .btn.btn-sun:active,
  .btn-light,.btn-light:hover,.btn.btn-light:active,.btn-ghost-light,.btn-ghost-light:hover,.btn.btn-ghost-light:active,.mobile-bar .btn-light,.mobile-bar .btn.btn-light:active{transition:none;transform:none}
}
.qlinks a,.world .go,.act .txt .more,.mcard .more{transition:color .2s var(--ease), opacity .2s var(--ease)}

/* Sichtbarer Fokus (Barrierefreiheit + wirkt durchdacht) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.zone:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* Foto-Platzhalter: ganz leichtes Zoomen beim Hover des Eltern-Containers */
.world,.mcard{overflow:hidden}
.split .ph,.world,.mcard{}
.world::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 120%, rgba(255,255,255,.16), transparent 60%);opacity:0;transition:opacity .3s var(--ease)}
.world:hover::after{opacity:1}

/* ---------- Live-Google-Sterne (datengesteuert, beliebige Bewertung) ---------- */
.stars-live{display:inline-block;position:relative;white-space:nowrap;font-size:1em;line-height:1}
.stars-live .base{color:rgba(255,255,255,.28)}
.stars-live .fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:var(--sun);width:var(--pct,90%)}
.stars-live.on-light .base{color:rgba(19,48,63,.18)}
.rating-chip{display:inline-flex;align-items:center;gap:10px}
.rating-chip .num{font-family:var(--font-serif);font-weight:600}

/* ---------- Bewertungs-Laufband ---------- */
.review-band{background:var(--navy);color:var(--paper);padding:0;overflow:hidden;position:relative}
.review-band .inner{padding:clamp(40px,5vh,58px) 0}
.review-band .rb-head{text-align:center;max-width:640px;margin:0 auto 30px;padding:0 26px}
.review-band .rb-head .label{color:var(--sun)}
.review-band .rb-head h2{font-family:var(--font-serif);font-weight:400;font-size:var(--t-2xl);margin-top:var(--sp-2);line-height:1.1}
.review-band .rb-head .summary{margin-top:14px;color:#C7D6DE;font-size:16px}
/* Wiederverwendbares animiertes Mandala: echte Ringe drehen sich, die Logo-Sonne in der Mitte steht.
   Einbinden via {% include "partials/mandala-spin.njk" %} in eine Sektion mit position:relative;overflow:hidden. */
.mandala-spin{position:absolute;top:50%;left:50%;width:min(660px,94%);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.12;pointer-events:none;z-index:0}
.mandala-spin .ms-rings{position:absolute;inset:0;background:url(/assets/img/mandala-rings.svg) center/contain no-repeat;animation:mnd-spin 90s linear infinite}
.mandala-spin .ms-sun{position:absolute;top:50%;left:50%;width:28%;aspect-ratio:512/329;transform:translate(-50%,-50%);background:var(--sun);-webkit-mask:url(/assets/img/logo-mark.png) center/contain no-repeat;mask:url(/assets/img/logo-mark.png) center/contain no-repeat}
@keyframes mnd-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mandala-spin .ms-rings{animation:none}}
/* Spezialfall Bewerten-Panel: Mandala erst beim Ausklappen einblenden */
.review-band .inner{position:relative;z-index:1}
.review-band .mandala-spin{opacity:0;transition:opacity .7s var(--ease)}
.review-band:has(#reviewPanel.open) .mandala-spin{opacity:.16}

/* Danke-Seiten: ein ruhiger, markentypischer Abschluss mit dezentem Bewegungsmoment. */
.thanks-hero{position:relative;isolation:isolate;min-height:70vh;display:flex;align-items:center;overflow:hidden}
.thanks-hero .mandala-spin{width:min(760px,110vw);opacity:.13}
.thanks-hero .thanks-content{position:relative;z-index:1;text-align:center;max-width:620px;margin:0 auto}
.thanks-mark{display:block;color:var(--sun-deep);margin:0 auto 18px}
.thanks-content h1{font-size:clamp(34px,5vw,56px);line-height:1.08}
.thanks-content p{max-width:50ch;margin:18px auto 0;font-size:18px;color:var(--muted)}
.thanks-content .btn{margin-top:26px;display:inline-flex}
@media(max-width:560px){
  .thanks-hero{min-height:66vh}
  .thanks-hero .mandala-spin{width:145vw;opacity:.1}
  .thanks-content p{font-size:16.5px}
}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:inline-flex;animation:rbscroll 42s linear infinite;will-change:transform}
.marquee:hover .track{animation-play-state:paused}
@keyframes rbscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-tile{flex:0 0 auto;width:300px;margin-right:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:18px 20px;white-space:normal}
.review-tile .g{width:22px;height:22px;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75% 100%);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.review-tile .g i{width:13px;height:13px;border-radius:50%;background:#fff;font-style:normal;font-size:9px;font-weight:bold;color:#4285F4;display:flex;align-items:center;justify-content:center}
.review-tile .stars{color:var(--sun);letter-spacing:2px;margin:12px 0 8px}
.review-tile p{font-size:14.5px;color:#E8EEF2;line-height:1.5;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.review-tile .who{margin-top:12px;font-size:12.5px;color:#9FB4BF}
.review-tile .who a{color:#C7D6DE;text-decoration:none}
.review-tile .who a:hover{text-decoration:underline}
.review-tile .gmaps{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--sun);text-decoration:none}
.review-tile .gmaps:hover{text-decoration:underline}
.rb-note{text-align:center;margin:0 0 18px;font-size:12.5px;letter-spacing:.04em;color:#9FB4BF}
.track-dup{display:contents}
.marquee:focus-within .track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none;flex-wrap:wrap;justify-content:center}}

/* ---------- „Jetzt bewerten" – ausklappbares Panel ---------- */
.review-cta{text-align:center;margin-top:34px;position:relative;z-index:2}
.review-panel{max-height:0;opacity:0;overflow:hidden;visibility:hidden;transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease), visibility 0s .5s;max-width:620px;margin:0 auto}
.review-panel.open{max-height:640px;opacity:1;margin-top:24px;visibility:visible;transition-delay:0s}
.review-panel .inner-box{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(232,162,76,.3);border-radius:18px;padding:26px 26px 28px;text-align:left;overflow:hidden;box-shadow:0 20px 44px -16px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.review-panel .inner-box::before{content:"";position:absolute;left:26px;top:0;height:2px;width:26px;background:var(--sun);border-radius:0 0 2px 2px;z-index:2}   /* Gold-Akzentleiste (Glas-Optik) */
.review-panel .inner-box > *{position:relative;z-index:1}
.review-panel .opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
@media(max-width:560px){.review-panel .opts{grid-template-columns:1fr}}
.review-panel .opt{display:block;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:16px 18px;transition:.2s var(--ease)}
.review-panel .opt:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.review-panel .opt b{display:block;color:#fff;margin-bottom:3px}
.review-panel .opt span{font-size:13px;color:#A8BCC6}
.review-panel form{margin-top:14px;display:grid;gap:12px}
.review-panel .review-field{display:grid;gap:6px;color:#E8EEF2;font-size:13px;font-weight:600}
.review-panel .review-field small{margin-left:5px;color:#9FB4BF;font-size:10px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.review-panel .stars-pick{display:flex;gap:6px;font-size:30px;color:rgba(255,255,255,.3);cursor:pointer}
.review-panel .stars-pick span{transition:transform .15s var(--ease),color .15s var(--ease)}
.review-panel .stars-pick span:hover{transform:scale(1.18)}
.review-panel .stars-pick span.lit{color:var(--sun)}
.review-panel .stars-pick [role="radio"]{border-radius:6px;line-height:1}
.review-panel .stars-pick [role="radio"]:focus-visible{outline:3px solid var(--sun);outline-offset:4px}
.review-panel input,.review-panel textarea{font-family:var(--font-sans);font-size:15px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff;border-radius:12px;padding:12px 14px;outline:none}
.review-panel textarea{resize:none}
.review-panel input::placeholder,.review-panel textarea::placeholder{color:#9FB4BF}

/* ---------- Öffnungs-Status-Pille im Header ---------- */
.open-pill-wrap{position:relative;margin-right:6px}
.open-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:rgba(234,241,245,.85);background:none;border:0;cursor:pointer;font-family:inherit;padding:4px 2px;transition:color .15s var(--ease)}
.open-pill:hover{color:#fff}
.open-pop{position:absolute;top:calc(100% + 10px);left:0;z-index:120;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 36px rgba(19,48,63,.18);padding:14px 16px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;user-select:none;-webkit-user-select:none;cursor:default}
.open-pop.show{opacity:1;visibility:visible;transform:translateY(0)}
.open-pop::before{content:"Öffnungszeiten";display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-deep);font-weight:700;margin-bottom:9px}
.open-pop .hours-line{display:flex;justify-content:space-between;gap:20px;font-size:13.5px;padding:5px 9px;margin:0 -9px;border-radius:8px;color:var(--ink);transition:background-color .16s var(--ease),transform .16s var(--ease)}
.open-pop .hours-line:hover{background:rgba(232,162,76,.12);transform:translateX(2px)}
.open-pop .hours-line .ruhe{color:var(--clay);font-weight:600}
.open-pill .d{width:8px;height:8px;border-radius:50%;background:#9AA0A8}
.open-pill.open .d{background:#3Fae6a;box-shadow:0 0 0 0 rgba(63,174,106,.5);animation:pulse 2.2s infinite}
.open-pill.closed .d{background:#D98A4E}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,174,106,.45)}70%{box-shadow:0 0 0 7px rgba(63,174,106,0)}100%{box-shadow:0 0 0 0 rgba(63,174,106,0)}}
@media(max-width:1040px){.open-pill{display:none}}

/* ---------- Header beim Scrollen kompakter ---------- */
header{transition:box-shadow .3s var(--ease), background-color .3s var(--ease)}
header.scrolled{box-shadow:0 6px 24px rgba(19,48,63,.18)}

/* ---------- Count-up Zahl ---------- */
.countup{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .world:hover,.mcard:hover,.fave:hover,.voice:hover,.f:hover,.review-tile:hover,.mdish:hover,.faq-item:hover{transform:none}
}

/* =====================================================================
   KEN-BURNS · SEITENÜBERGÄNGE
   ===================================================================== */
/* Ken-Burns: sehr langsames, dezentes Zoomen+Schwenken des Hero-Standbilds.
   Greift nur, wenn KEIN Video läuft (Poster-Fallback) und Bewegung erlaubt ist. */
.hero-media .kenburns{position:absolute;inset:-6%;background-size:cover;background-position:center;
  transform-origin:35% 50%;will-change:transform;animation:kenburns 26s ease-in-out infinite alternate}
@keyframes kenburns{
  0%{transform:scale(1.0) translate(0,0)}
  100%{transform:scale(1.12) translate(-2.5%,-2%)}
}
/* Läuft das Video, liegt es über dem Standbild und verdeckt den Effekt automatisch. */
@media(prefers-reduced-motion:reduce){.hero-media .kenburns{animation:none;inset:0}}

/* Weiche Seitenübergänge (View Transitions API – moderne Browser; ältere ignorieren es einfach) */
@view-transition{ navigation: auto; }
@media(prefers-reduced-motion:reduce){ @view-transition{ navigation: none; } }
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .34s ease both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}

/* FAQ-Akkordeon */
.faq-list{max-width:640px;margin:0 auto;display:grid;gap:6px}
.faq-item{background:transparent;border:1px solid rgba(19,48,63,.1);border-radius:8px;padding:0 18px;transform:translateY(0);transition:border-color .22s var(--ease),background .22s var(--ease),box-shadow .26s var(--ease),transform .26s var(--ease)}
.faq-item:hover{border-color:rgba(232,162,76,.66);background:rgba(255,255,255,.72);transform:translateY(-4px);box-shadow:0 18px 30px -12px rgba(1,43,62,.28),0 5px 12px rgba(1,43,62,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.faq-item[open]{background:rgba(19,48,63,.04);border-color:rgba(19,48,63,.18)}
.faq-item summary{list-style:none;cursor:pointer;font-family:var(--font-serif);font-weight:400;font-size:var(--t-base);color:var(--ink);padding:14px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:color .2s var(--ease)}
.faq-item:hover summary{color:var(--navy-2)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-sans);font-size:18px;color:var(--sun-deep);flex-shrink:0;transition:transform .2s var(--ease),color .2s var(--ease)}
.faq-item:hover summary::after{color:#C87025;transform:scale(1.2)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item[open]:hover summary::after{transform:rotate(45deg) scale(1.14)}
.faq-item .faq-a{padding:0 0 14px;color:var(--muted);font-size:var(--t-sm);line-height:1.65}

/* =====================================================================
   AUSGESTALTUNG: Über uns & Ferienwohnung
   ===================================================================== */
/* Zahlen/Fakten-Streifen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat .n{font-family:var(--font-serif);font-weight:600;font-size:var(--t-2xl);color:var(--clay);line-height:1}
.stat .l{font-size:13px;color:var(--muted);letter-spacing:.5px;margin-top:6px}

/* Ausstattung (Amenities) */
.amenities{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.amenities{grid-template-columns:1fr 1fr}}
.amenity{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid rgba(220,230,236,.7);border-radius:10px;padding:12px 16px;font-size:14px;font-weight:400;color:var(--ink);transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.amenity::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sun);flex-shrink:0}
.amenity:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 10px 26px rgba(19,48,63,.08)}

/* Bildergalerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.gallery{grid-template-columns:1fr 1fr}}
.gallery .shot{aspect-ratio:4/3;border-radius:14px;overflow:hidden;position:relative;margin:0;display:flex;align-items:flex-end}
.gallery .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,28,40,.62),rgba(10,28,40,0) 48%);z-index:1}
.gallery .shot:hover img{transform:scale(1.06)}
.gallery .shot figcaption{position:relative;z-index:2;color:#fff;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;padding:12px}

/* Info-/Konditionen-Box */
.infobox{background:var(--paper-2);border:1px solid rgba(220,230,236,.7);border-radius:12px;padding:20px 22px}
.infobox h3{font-family:var(--font-serif);font-weight:600;font-size:20px;margin-bottom:14px}
.infobox .row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px}
.infobox .row:first-of-type{border-top:0;padding-top:0}
.infobox .row b{color:var(--espresso)}
.infobox .row .v{color:var(--clay);font-weight:600;white-space:nowrap;text-align:right}
/* Wiederverwendbare Glas-Optik (wie die Vier-Dinge-Kaesten): Mandala schimmert dezent durch, Gold-Kante + Akzentleiste + 3D */
.infobox.glass,.glass{position:relative;background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.4));border:1px solid rgba(232,162,76,.32);border-radius:14px;overflow:hidden;box-shadow:0 16px 32px -12px rgba(19,48,63,.24),0 3px 8px rgba(19,48,63,.1),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.28)}
.glass::before{content:"";position:absolute;left:22px;top:0;height:2px;width:26px;background:var(--sun);border-radius:0 0 2px 2px;z-index:2}
.glass > *{position:relative;z-index:1}
/* FAQ-Reihen als Glas, aber ohne Akzentleiste (7 Reihen -> sonst zu unruhig) + Hover/Open bleiben glasig */
.faq-item.glass::before{content:none}
.faq-item.glass:hover{background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(255,255,255,.66));border-color:rgba(232,162,76,.7);box-shadow:0 20px 34px -12px rgba(1,43,62,.3),0 6px 14px rgba(1,43,62,.13),inset 0 1px 0 rgba(255,255,255,.95)}
.faq-item.glass[open]{background:linear-gradient(155deg,rgba(255,255,255,.78),rgba(255,255,255,.56));border-color:rgba(232,162,76,.5)}

/* Umgebung / in der Nähe */
.nearby{display:grid;gap:0;margin-top:8px}
.nearby .n{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;transition:padding-left .2s var(--ease),color .2s var(--ease)}
.nearby .n:hover{padding-left:8px;color:var(--clay)}
.nearby .dist{color:var(--clay);font-weight:600;white-space:nowrap}

/* Zwei-Spalten-Layout für Unterseiten-Inhalte */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
@media(max-width:820px){.cols2{grid-template-columns:1fr}}

/* Herkunfts-Hinweis am Gericht (typografisches Mini-Label) */
.origin{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--sage-deep);font-weight:700;margin-top:7px;text-transform:uppercase;letter-spacing:1.2px}
.origin .ln{height:1px;width:16px;background:var(--sage-deep);opacity:.55;flex-shrink:0}
.origin.on-dark{color:#BBD9B0}
.origin.on-dark .ln{background:#BBD9B0}

/* =====================================================================
   UX-OPTIMIERUNG: Header-Icons, Instagram, Route, Öffnungszeiten
   ===================================================================== */
/* Runde Icon-Buttons im Header (Desktop) */
.hdr-ic{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#EAF1F5;border:1px solid rgba(255,255,255,.22);transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.hdr-ic:hover{background:var(--sun);color:var(--navy);border-color:var(--sun);transform:translateY(-2px)}

/* Mobil-only Links im aufklappbaren Menü */
.qlinks a.mobile-only{display:none}
@media(max-width:1040px){
  .qlinks a.mobile-only{display:flex;align-items:center;gap:9px;line-height:1;border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding:12px 28px;color:#E0AE66;font-weight:500}
  .qlinks a.mobile-only svg{flex-shrink:0;display:block}
}

/* Footer: Instagram-Link */
.soc{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:14px;font-weight:600;color:#F0CFA6;transition:opacity .2s var(--ease)}
.soc:hover{opacity:.8}
/* Footer: Gutschein-Hinweis */
.gutschein{margin-top:14px;font-size:13.5px;color:#C9BAA6;cursor:pointer;display:inline-block;border:1px dashed rgba(232,162,76,.4);border-radius:10px;padding:8px 12px;transition:background-color .2s var(--ease)}
.gutschein:hover{background:rgba(232,162,76,.1)}
/* Footer: Route-Button */
.route-btn{display:inline-flex;align-items:center;gap:6px;margin:6px 0 10px;font-weight:600;color:#F0CFA6;border:1px solid rgba(232,162,76,.4);border-radius:999px;padding:8px 15px;font-size:13.5px;transition:background-color .2s var(--ease)}
.route-btn:hover{background:rgba(232,162,76,.14)}
/* Footer: Öffnungszeiten-Zeilen */
.hours-line{display:flex;justify-content:space-between;gap:clamp(10px,2vw,18px);width:100%;font-size:14px;padding:5px 0;color:#C9BAA6;max-width:240px}
.hours-line span{white-space:nowrap;flex-shrink:0}
.hours-line .ruhe{color:#E0A24F;font-weight:600}
@media(min-width:861px){footer .hours-line{display:grid;grid-template-columns:max-content max-content;justify-content:start;gap:16px;max-width:none}}

/* Karriere: Stellen-Karten */
.jobs{display:grid;gap:14px;max-width:840px}
.job{background:var(--paper-2);border:1px solid rgba(220,230,236,.7);border-radius:12px;padding:18px 20px;transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease)}
.job:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 12px 30px rgba(19,48,63,.09)}
.job-h{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.job-h h3{font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--ink)}
.job-art{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--sun-deep);background:rgba(232,162,76,.14);border-radius:999px;padding:5px 13px;white-space:nowrap}
.job p{color:var(--muted);font-size:15px;margin:10px 0}
.job .more{display:inline-block;font-weight:600;color:var(--clay);border-bottom:2px solid var(--sun);padding-bottom:2px}