/* ==========================================================================
   Irodion Sendling - Design-System (NK Digital Haus-Stil, Vorlage v1)
   Palette: KEIN Logo vorhanden, Akzent aus den eigenen Fotos gesampelt (Olivgruen #5f7330, Pillow-Probe am Laub der Terrassenfotos,
   Messwert #5b6e37, nach G12 leicht angehoben; Vermerk "kein Logo, Akzent aus Foto"). Eine Akzentfarbe, neutrale Buehne, kein accent-2.
   ========================================================================== */
/* sans: Display Author + Body Switzer (Fontshare). Gegen Taverna Anemos (Marcellus, Serif), Siebenbrunn (Clash), Helene (Plein). */
/* marke: Wortmarke IRODION in Versalien wie am Schild (einzige Versalien ausser dem Eyebrow); Wortmarke ist Entwurf, Logo wird mit dem Betrieb abgestimmt */
/* ==========================================================================
   Typografie: Author (Display) + Switzer (Text), lokal gehostet.
   Shape-Regel (Standard laut Niklas, N3): kantig, 4 bis 6px, kein Wert darueber. Buttons 4px, alles andere 6px.
   Nur aendern, wenn die Marke selbst rund ist (new_demo.py --rund: --r-btn: 999px, --r: 14px, --r-lg: 22px, Grund in DESIGN.md).
   Hover-Transformationen nur hinter @media (hover: hover) and (pointer: fine). Nur transform und opacity animieren.
   Helle Buehne ist der Normalfall. Dunkel nur, wo das Gewerbe dunkel ist (Barber, Werkstatt, Training, Foto).
   ========================================================================== */

@import url("../fonts/fonts.css");

:root{
  color-scheme: light dark;

  /* Marke */
  --akzent:       #5f7330;
  --akzent-hover: #526329;
  --auf-akzent:   #ffffff;      /* Weiss auf Akzent 5.27 */
  --akzent-text:  #52632a;      /* Akzent als Text/Linie auf Weiss 6.61, auf --bg-2 6.0, auf --bg-3 5.5 */
  --akzent-hell:  #a9c24a;      /* Akzent auf dunklen Flaechen (auf --invert-bg 9.0), nie als Text auf Hell */

  /* Semantische Tokens - Light */
  --bg:          #ffffff;
  --bg-2:        #f4f5f2;      /* H80 S4 L96, Beige-Test bestanden */
  --bg-3:        #e9ece4;
  --surface:     #ffffff;
  --fg:          #171a12;      /* 17.6 auf Weiss */
  --fg-2:        #4f5346;      /* 7.9 auf Weiss */
  --fg-3:        #6c7160;      /* 5.0 auf Weiss */
  --line:        rgba(23,26,18,.12);
  --line-2:      rgba(23,26,18,.24);
  --invert-bg:   #15180f;      /* getoentes Oliv-Schwarz aus dem Laub, nie #000 */
  --invert-fg:   #f3f4ee;
  --invert-fg-2: #a9ada0;
  --invert-line: rgba(255,255,255,.14);
  --shadow:      0 24px 50px -30px rgba(23,26,18,.30), 0 6px 18px -12px rgba(23,26,18,.14);
  --shadow-lg:   0 44px 80px -40px rgba(23,26,18,.40), 0 12px 28px -16px rgba(23,26,18,.18);

  /* Form */
  --r-btn:  4px;
  --r:      6px;
  --r-lg:   6px;
  --maxw:   1240px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --ease:   cubic-bezier(.16,1,.3,1);
  --sec:    clamp(4.5rem, 9vw, 8rem);
  --fd:     'Author', system-ui, sans-serif;
  --fb:     'Switzer', system-ui, -apple-system, "Segoe UI", sans-serif;
  --head-h: 74px;
  --auf-foto: #ffffff;
  --gold:   var(--akzent-hell);   /* Alias aus dem Baukasten: Linien und Zahlen auf Dunkel */
  --marke:  var(--akzent);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:          #121410;
    --bg-2:        #181b14;
    --bg-3:        #20241a;
    --surface:     #1a1d15;
    --fg:          #eff1e8;
    --fg-2:        #b4b9a8;
    --fg-3:        #959a88;
    --line:        rgba(255,255,255,.12);
    --line-2:      rgba(255,255,255,.22);
    --invert-bg:   #0a0c07;
    --akzent-text: #a9c24a;      /* 9.5 auf --bg */
    --shadow:      0 24px 50px -30px rgba(0,0,0,.7), 0 6px 18px -12px rgba(0,0,0,.5);
    --shadow-lg:   0 44px 80px -40px rgba(0,0,0,.8), 0 12px 28px -16px rgba(0,0,0,.55);
  }
}

/* ---------- 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(--fb); background:var(--bg); color:var(--fg);
  font-size:1.0625rem; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
svg{ fill:currentColor; }
img{ height:auto; }
b,strong{ font-weight:600; }  /* Satoshi liefert kein 600: rendert als 700. Display 600, Body 400/500/700 (4 Schnitte) */
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--akzent); color:var(--auf-akzent); }
:focus-visible{ outline:3px solid var(--akzent); outline-offset:3px; border-radius:2px; }
.skip{ position:absolute; left:-999px; top:0; background:var(--fg); color:var(--bg); padding:.6rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- Typo ---------- */
h1,h2,h3,h4{ word-spacing:.08em; font-family:var(--fd); font-weight:600; letter-spacing:-.01em; line-height:1.06; text-wrap:balance; }
.display{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); letter-spacing:-.018em; line-height:1.02; }
.h-sec{ font-size:clamp(1.9rem, 3.8vw, 3.1rem); }
.h-sub{ font-size:clamp(1.25rem, 2.1vw, 1.7rem); letter-spacing:-.008em; }
.lead{ font-size:clamp(1.06rem, 1.5vw, 1.28rem); line-height:1.6; color:var(--fg-2); max-width:56ch; }
.muted{ color:var(--fg-2); }
.small{ font-size:.9375rem; }
p + p{ margin-top:1em; }

/* Eyebrow: sparsam. Max 1 je 3 Sektionen. Kein Pill, keine Box. Einziger Uppercase der Seite. */
.eyebrow{
  display:inline-block; font-family:var(--fb); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--akzent-text); margin-bottom:.9rem;
}
.lead-tel{ color:var(--fg); font-weight:700; white-space:nowrap; border-bottom:2px solid var(--akzent); }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:860px; }
.section{ padding-block:var(--sec); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }
.section--alt{ background:var(--bg-2); }
.section--dark{ background:var(--invert-bg); color:var(--invert-fg); }
.section--dark .lead,.section--dark .muted,.section--dark .eyebrow{ color:var(--invert-fg-2); }
.section-head{ max-width:40rem; margin-bottom:clamp(2rem,4vw,3.25rem); }
.section-head p{ margin-top:1rem; }

/* ---------- Buttons (kantig, praezise) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem; white-space:nowrap;
  font-family:var(--fb); font-weight:700; font-size:.98rem; letter-spacing:.005em;
  padding:.9rem 1.55rem; border-radius:var(--r-btn); border:1.5px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn--primary{ background:var(--akzent); color:var(--auf-akzent); }
.btn--primary:hover{ background:var(--akzent-hover); }
.btn--primary:active{ transform:translateY(0) scale(.985); }
.btn--ghost{ border-color:var(--line-2); color:var(--fg); background:transparent; }
.btn--ghost:hover{ border-color:var(--fg); }
.btn--ghost:active{ transform:translateY(0) scale(.985); }
/* motion: feedback. Hover-Lift max 2px, nur mit echter Maus (Touch loest sonst haengende Hover aus) */
@media (hover: hover) and (pointer: fine){
  .btn--primary:hover,.btn--ghost:hover{ transform:translateY(-2px); }
}
.section--dark .btn--ghost,.on-dark .btn--ghost{ border-color:rgba(255,255,255,.45); color:var(--auf-foto); }
.section--dark .btn--ghost:hover,.on-dark .btn--ghost:hover{ border-color:var(--auf-foto); }
.btn--sm{ padding:.62rem 1.15rem; font-size:.92rem; }
.btn--lg{ padding:1.05rem 1.9rem; font-size:1.05rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; font-weight:700; color:var(--fg);
  border-bottom:2px solid var(--akzent); padding-bottom:2px;
}
.link-arrow svg{ width:1em; height:1em; flex:none; transition:transform .22s var(--ease); }  /* motion: feedback (transform statt gap) */
@media (hover: hover) and (pointer: fine){ .link-arrow:hover svg{ transform:translateX(.3rem); } }
.link-arrow--hell{ color:var(--invert-fg); border-bottom-color:var(--auf-foto); }

/* ---------- Demo-Bar ---------- */
.demo-bar{
  background:var(--invert-bg); color:var(--invert-fg-2); font-size:.78rem; text-align:center;
  padding:.5rem var(--gutter); letter-spacing:.01em;
}
.demo-bar b{ color:var(--invert-fg); font-weight:700; }

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line);
}
/* Der Blur liegt auf einer eigenen Ebene: ein backdrop-filter am Header selbst sperrt das position:fixed-Overlay der Mobil-Navigation ein. */
.site-head::before{
  content:""; position:absolute; inset:0; z-index:-1;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.site-head__inner{ height:var(--head-h); display:flex; align-items:center; justify-content:space-between; gap:1.25rem; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ height:62px; width:auto; }
.nav{ display:flex; gap:1.6rem; }
.nav a{ font-weight:500; font-size:.98rem; color:var(--fg-2); padding:.35rem 0; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--fg); border-color:var(--akzent); }
.head-cta{ display:flex; align-items:center; gap:.9rem; }
.head-tel{ display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.95rem; white-space:nowrap; }
.head-tel svg{ width:1.05em; height:1.05em; }
.burger{ display:none; background:none; border:1.5px solid var(--line-2); border-radius:var(--r-btn); padding:.5rem .8rem; font-weight:700; font-size:.9rem; cursor:pointer; }
.nav .nav__tel,.nav .nav__cta{ display:none; }
@media (max-width: 1100px) and (min-width: 901px){ .nav{ gap:1.1rem; } .head-tel span{ display:none; } }

@media (max-width: 900px){
  :root{ --head-h: 64px; }
  /* Geschlossenes Menue: display:none. Beim Oeffnen blenden Overlay und Links per Keyframes ein. */
  .nav{
    display:none; position:fixed; inset:0; z-index:60; flex-direction:column; justify-content:center; gap:.4rem;
    padding:var(--gutter); background:var(--bg);
  }
  .nav[data-open="true"]{ display:flex; animation:nav-in .3s var(--ease) both; }
  .nav[data-open="true"] a{ animation:nav-link .45s var(--ease) both; }
  .nav[data-open="true"] a:nth-child(2){ animation-delay:.05s } .nav[data-open="true"] a:nth-child(3){ animation-delay:.1s }
  .nav[data-open="true"] a:nth-child(4){ animation-delay:.15s } .nav[data-open="true"] a:nth-child(5){ animation-delay:.2s }
  .nav[data-open="true"] a:nth-child(6){ animation-delay:.25s }
  .nav a{ font-family:var(--fd); font-size:clamp(1.8rem,7vw,2.6rem); font-weight:600; color:var(--fg); border:0; padding:.35rem 0; }
  .nav .nav__tel,.nav .nav__cta{ display:inline-flex; font-family:var(--fb); font-size:1.15rem; font-weight:700; }
  .nav .nav__tel{ margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); gap:.6rem; align-items:center; }
  .nav .nav__tel svg{ width:1.2rem; height:1.2rem; color:var(--akzent-text); }
  .nav .nav__cta{ align-self:flex-start; margin-top:.6rem; padding:.9rem 1.55rem; color:var(--auf-akzent); border:1.5px solid transparent; }
  .burger{ display:inline-block; position:relative; z-index:70; }
  .head-tel span{ display:none; }
  .head-cta .btn{ display:none; }
  .brand img{ height:54px; }
}
@keyframes nav-in{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }  /* motion: state */
@keyframes nav-link{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }  /* motion: hierarchy */
html[data-motion="reduce"] .nav[data-open="true"],html[data-motion="reduce"] .nav[data-open="true"] a{ animation-duration:.2s; animation-delay:0s; }
.site-head.is-scrolled{ box-shadow:var(--shadow); }

/* ---------- Mobile Leiste: Tisch reservieren plus Hoerer ---------- */
.mbar{ display:none; }
@media (max-width: 900px){
  .mbar{
    position:fixed; left:0; right:0; bottom:0; z-index:45; display:grid; grid-template-columns:minmax(0,1fr) 3.1rem; gap:.6rem;
    padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 94%, transparent); border-top:1px solid var(--line);
  }
  .mbar .btn{ padding-block:.8rem; }
  .mbar__tel{ display:grid; place-items:center; border:1.5px solid var(--line-2); border-radius:var(--r-btn); color:var(--fg); }
  .mbar__tel svg{ width:1.3rem; height:1.3rem; }
  .site-foot{ padding-bottom:calc(5.6rem + env(safe-area-inset-bottom)); }
}

/* ---------- Hero: vollflaechig, Video, Scrim, grosse klare Headline ---------- */
.hero{ position:relative; min-height:calc(100dvh - var(--head-h)); display:flex; align-items:flex-end; color:var(--auf-foto); overflow:hidden; isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img,.hero__bg video{ width:100%; height:100%; object-fit:cover; }
/* Scrim fuer ein helles Sonnenfoto: unterer Stop .84, linke Flanke .80 bis .66, Text bleibt ueber 5 zu 1 */
.hero__bg::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(8,12,18,.80) 0%, rgba(8,12,18,.66) 45%, rgba(8,12,18,.12) 82%, rgba(8,12,18,.04) 100%),
             linear-gradient(180deg, rgba(8,12,18,.24) 0%, rgba(8,12,18,.30) 40%, rgba(8,12,18,.84) 100%);
}
.hero__inner{ position:relative; z-index:1; width:100%; padding-block:clamp(3rem,8vw,6rem); }
.hero__copy{ max-width:44rem; }
.hero__copy .display{ margin:0 0 1.1rem; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.hero__copy .lead{ color:rgba(255,255,255,.94); max-width:38rem; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:1.8rem; }
.hero .btn--ghost{ border-color:rgba(255,255,255,.7); color:var(--auf-foto); }
.hero .btn--ghost:hover{ border-color:var(--auf-foto); }
@media (max-width: 900px){
  .hero{ min-height:min(82dvh, 640px); } .hero__inner{ padding-block:2.5rem; }
  .hero__bg::after{ background:linear-gradient(180deg, rgba(8,12,18,.70) 0%, rgba(8,12,18,.78) 45%, rgba(8,12,18,.92) 100%); }
}
.hero__zoom{ position:absolute; inset:0; transform-origin:62% 45%; }
.hero__video{ position:absolute; inset:0; opacity:0; transition:opacity .8s var(--ease); }
.hero__video.is-play{ opacity:1; }
html[data-motion="reduce"] .hero__video{ display:none; }

/* H1: jede Zeile in einer Maske, die Zeile faehrt von unten ein. Unterstreichung in Gold zeichnet sich einmal. */
.zl{ display:block; overflow:hidden; padding:.06em 0 .26em; margin:-.06em 0 -.26em; }
.zl > span{ display:block; }
.uline{ position:relative; display:inline-block; }
.uline__svg{ position:absolute; left:0; bottom:-.12em; width:100%; height:.2em; overflow:visible; }
.uline__svg path{ fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }

/* Chip-Reihe: Status aus der Uhr, Google, Ort. Kantige Rechtecke. */
.hero__chips{ list-style:none; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:.5rem .6rem; margin-top:1.5rem; }
.hero__chips li{
  display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .8rem; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-btn);
  background:rgba(8,12,18,.62); color:var(--invert-fg); font-size:.88rem; font-weight:500; line-height:1.3;
}
.hero__chips svg{ width:.95em; height:.95em; flex:none; }
.chip-g svg{ color:var(--gold); }
.chip-t{ display:grid; }
.chip-t small{ font-size:.74rem; color:var(--invert-fg-2); }
/* Status-Punkt: einziger Kreis der Seite (Status-Puls im Hero, 1x, bewusst rund) */
.dot{ position:relative; flex:none; width:.55rem; height:.55rem; border-radius:50%; background:var(--akzent-hell); }
.dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--akzent-hell); animation:puls 2.4s var(--ease) infinite; }
@keyframes puls{ from{ transform:scale(1); opacity:.7 } to{ transform:scale(2.6); opacity:0 } }  /* motion: state */
html[data-motion="reduce"] .dot::after{ animation:none; opacity:0; }

/* Eingangs-Animationen nur mit JS-Klasse, ohne JS steht alles sofort */
.js .hero__zoom{ animation:hero-zoom 10s var(--ease) both; }
@keyframes hero-zoom{ from{ transform:scale(1) } to{ transform:scale(1.05) } }  /* motion: story */
.js .hero [data-h]{ animation:hero-in .8s var(--ease) both; }
.js .hero [data-h="2"]{ animation-delay:.09s; }
.js .hero [data-h="3"]{ animation-delay:.12s; }
.js .hero .zl > span{ animation:zl-in .9s var(--ease) both; }
.js .hero .zl:nth-child(2) > span{ animation-delay:.05s; }
.js .hero .uline__svg path{ animation:uline-draw .9s var(--ease) .5s both; }
.js .hero__chips li{ animation:hero-in .7s var(--ease) both; animation-delay:.32s; }
.js .hero__chips li:nth-child(2){ animation-delay:.4s; }
.js .hero__chips li:nth-child(3){ animation-delay:.48s; }
@keyframes hero-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }  /* motion: hierarchy */
@keyframes zl-in{ from{ transform:translateY(105%) } to{ transform:none } }  /* motion: hierarchy */
@keyframes uline-draw{ from{ stroke-dashoffset:1 } to{ stroke-dashoffset:0 } }  /* motion: story */
@keyframes hero-fade{ from{ opacity:0 } to{ opacity:1 } }  /* motion: state */
/* Reduced motion: verkuerzen, nicht abschalten. Zoom aus, Text blendet kurz ein, Unterstreichung steht fertig, Video bleibt Poster */
html.js[data-motion="reduce"] .hero__zoom{ animation:none; }
html.js[data-motion="reduce"] .hero [data-h],
html.js[data-motion="reduce"] .hero__chips li,
html.js[data-motion="reduce"] .hero .zl > span{ animation:hero-fade .3s var(--ease) both; animation-delay:0s; }
html.js[data-motion="reduce"] .hero .uline__svg path{ animation:none; }

/* ---------- Editoriale Zeilen (statt Kartenraster) ---------- */
.rows{ border-top:1px solid var(--line); }
.row{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto; gap:1.5rem 2.5rem; align-items:center;
  padding:1.6rem 0; border-bottom:1px solid var(--line);
}
.row h3,.row p{ transition:transform .3s var(--ease); }  /* motion: feedback (transform statt padding, Hairline bleibt ruhig) */
@media (hover: hover) and (pointer: fine){ .row:hover h3,.row:hover p{ transform:translateX(.6rem); } }
.row h3{ font-size:clamp(1.35rem, 2.4vw, 2rem); letter-spacing:-.01em; }
.row p{ color:var(--fg-2); max-width:52ch; }
.row .link-arrow{ justify-self:end; }
@media (max-width: 760px){ .row{ grid-template-columns:1fr; gap:.5rem; } .row .link-arrow{ justify-self:start; margin-top:.4rem; } }

/* ---------- Bento (asymmetrisch, echte Fotos, exakt so viele Zellen wie Inhalte) ---------- */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(15rem,26vw,22rem); gap:.9rem; }
.tile{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--bg-3); min-height:220px; isolation:isolate; color:var(--auf-foto); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .9s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .tile:hover img{ transform:scale(1.04); } }
.tile::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,12,18,0) 35%, rgba(8,12,18,.78) 100%); }
.tile__txt{ position:absolute; left:1.3rem; right:1.3rem; bottom:1.2rem; z-index:2; text-shadow:0 1px 12px rgba(0,0,0,.35); }
.tile__txt h3{ font-size:1.3rem; }
.tile__txt b{ font-family:var(--fd); font-weight:600; font-size:1.15rem; letter-spacing:-.006em; }
.tile__txt p{ font-size:.95rem; color:rgba(255,255,255,.9); margin-top:.2rem; }
.tile--8{ grid-column:span 8; } .tile--7{ grid-column:span 7; } .tile--6{ grid-column:span 6; } .tile--5{ grid-column:span 5; }
.tile--4{ grid-column:span 4; } .tile--12{ grid-column:span 12; }
.tile--tall{ grid-row:span 2; }
@media (max-width: 900px){ .tile--8,.tile--7,.tile--6,.tile--5,.tile--4{ grid-column:span 6; } }
@media (max-width: 600px){ .bento{ grid-template-columns:1fr; grid-auto-rows:15rem; } .tile--8,.tile--7,.tile--6,.tile--5,.tile--4,.tile--12{ grid-column:span 1; } .tile--tall{ grid-row:span 1; } }

/* Galerie-Bento mit Lightbox: Wrapper tragen Spanne und optional die Gold-Versatzflaeche (kein Schatten) */
.bento--galerie{ gap:1.5rem; }
.tw{ position:relative; isolation:isolate; min-height:0; }
.tw > .tile{ height:100%; margin:0; cursor:zoom-in; }
.tw > .tile:focus-visible{ outline:3px solid var(--akzent); outline-offset:3px; }
.versatz::before{ content:""; position:absolute; inset:14px 14px -14px -14px; z-index:-1; background:var(--gold); border-radius:var(--r-btn); }
.versatz--l::before{ inset:14px 14px -14px -14px; }
@media (max-width: 600px){ .bento--galerie{ gap:1.4rem; } }

/* Leistungswahl: grosse Foto-Kacheln als Rubriken der Karte, asymmetrisch 7 + 5 (hoch) / 7 / 5 + 7 */
.lw{ grid-auto-rows:minmax(17rem,22vw); }
.lwk .tile__txt{ left:1.5rem; right:1.5rem; bottom:1.4rem; }
.lwk .tile__txt h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.01em; }
.lwk__link{ display:inline-flex; align-items:center; gap:.45rem; margin-top:.8rem; font-weight:700; border-bottom:2px solid var(--auf-foto); padding-bottom:2px; }
.lwk__link svg{ width:1em; height:1em; transition:transform .22s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .lwk:hover .lwk__link svg{ transform:translateX(.3rem); } }
@media (max-width: 900px){ .lw{ grid-auto-rows:minmax(15rem,auto); } .lw .tile--7,.lw .tile--5{ grid-column:1 / -1; } .lw .tile--tall{ grid-row:span 1; min-height:22rem; } }

/* ---------- Split (Text + grosses Bild), max 2 in Folge ---------- */
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--rev > :first-child{ order:2; }
.split figure{ border-radius:var(--r-lg); overflow:hidden; }  /* flach: kein Schatten auf Bildern (T4) */
.split figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.split .h-sec{ margin-bottom:1rem; }
.split .link-arrow{ margin-top:.2rem; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } .split--rev > :first-child{ order:0; } }

/* ---------- CTA-Band mit Bild ---------- */
.cta-band{ position:relative; overflow:hidden; border-radius:var(--r-lg); padding:clamp(2.5rem,6vw,4.5rem); color:var(--auf-foto); isolation:isolate; background:var(--invert-bg); }
.cta-band img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cta-band::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(8,12,18,.88) 0%, rgba(8,12,18,.70) 100%); }
.cta-band > *:not(img){ position:relative; z-index:2; }
@media (max-width: 700px){
  .cta-band::after{ background:linear-gradient(180deg, rgba(8,12,18,.82) 0%, rgba(8,12,18,.88) 100%); }
}
.cta-band .h-sec{ max-width:20ch; }
.cta-band p{ margin-top:.8rem; max-width:48ch; color:var(--auf-foto); }
.cta-band .cta-ot{ margin-top:1.4rem; }

/* ---------- Galerie: Chips + Lightbox ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.chip{
  border:1.5px solid var(--line-2); background:transparent; border-radius:var(--r-btn); padding:.55rem .95rem; min-height:2.75rem; font-size:.92rem; font-weight:500; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.chip[aria-pressed="true"]{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
@media (hover: hover) and (pointer: fine){ .chip:hover{ border-color:var(--fg); } }
.lb{ position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:2rem; }
.lb[hidden]{ display:none; }
.lb img{ max-width:min(92vw,1400px); max-height:82vh; object-fit:contain; border-radius:var(--r); }
.lb figcaption{ position:absolute; bottom:1.2rem; left:0; right:0; text-align:center; color:var(--invert-fg); font-size:.95rem; }
.lb button{ position:absolute; background:rgba(255,255,255,.1); color:var(--auf-foto); border:0; width:48px; height:48px; border-radius:var(--r-btn); cursor:pointer; display:grid; place-items:center; }
.lb button svg{ width:22px; height:22px; }
.lb__close{ top:1rem; right:1rem; } .lb__prev{ left:1rem; top:50%; transform:translateY(-50%); } .lb__next{ right:1rem; top:50%; transform:translateY(-50%); }

/* ---------- Formular (Label ueber Feld, Fehler unter Feld) ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem; align-content:start; }
.form .full{ grid-column:1 / -1; }
.field{ display:grid; gap:.4rem; align-content:start; min-width:0; }
.field label,.field .label{ font-weight:700; font-size:.95rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.85rem 1rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); color:var(--fg);
  transition:border-color .2s var(--ease); min-height:2.75rem;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--akzent); outline:2px solid color-mix(in srgb, var(--akzent) 35%, transparent); outline-offset:1px; }
.field textarea{ min-height:130px; resize:vertical; }
.field small{ color:var(--fg-3); }
.field small a{ color:var(--fg); font-weight:700; border-bottom:1px solid var(--akzent); }
.check{ display:grid; grid-template-columns:auto 1fr; column-gap:.7rem; row-gap:.35rem; align-items:start; font-size:.95rem; color:var(--fg-2); }
.check input{ margin-top:.3rem; width:1.1rem; height:1.1rem; accent-color:var(--akzent); }
.check a{ color:var(--fg); font-weight:700; border-bottom:1px solid var(--akzent); }
.form-ok{ display:none; padding:1.2rem 1.4rem; border:1.5px solid var(--akzent); border-radius:var(--r); background:color-mix(in srgb, var(--akzent) 10%, var(--surface)); }
.form-ok[data-show="true"]{ display:block; }
.form-ok a{ font-weight:700; border-bottom:2px solid var(--akzent); }
@media (max-width: 640px){ .form{ grid-template-columns:1fr; } }

/* Kontaktkarte */
.contact-card{ display:grid; gap:1.2rem; padding:1.8rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); align-content:start; }
.contact-card .item{ display:grid; grid-template-columns:1.4rem 1fr; gap:.8rem; align-items:start; }
.contact-card .item svg{ width:1.3rem; height:1.3rem; color:var(--akzent-text); margin-top:.15rem; }
.contact-card b{ display:block; }
.contact-card a:not(.tel-gross):not(.link-arrow){ font-weight:700; border-bottom:1px solid var(--akzent); }
.kk > p{ margin:0; color:var(--fg-2); }
.kk__hinweis{ font-size:.88rem; }
.tel-gross{
  display:inline-flex; align-items:center; gap:.7rem; width:fit-content; font-family:var(--fd); font-weight:600; font-size:clamp(1.7rem,3.4vw,2.4rem);
  letter-spacing:-.01em; line-height:1.1; padding-bottom:.15rem; border-bottom:3px solid var(--akzent);
}
.tel-gross svg{ width:.75em; height:.75em; flex:none; color:var(--akzent-text); }

/* Karte als Zwei-Klick-Loesung (DSGVO) */
.map{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-3); min-height:340px; display:grid; place-items:center; text-align:center; padding:2rem; }
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map p{ max-width:40ch; color:var(--fg-2); margin:0 auto 1rem; }
.map p a{ color:var(--fg); font-weight:700; border-bottom:1px solid var(--akzent); }

/* ---------- Footer ---------- */
.site-foot{ background:var(--invert-bg); color:var(--invert-fg-2); padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; }
.site-foot a:hover{ color:var(--invert-fg); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--invert-line); }
.foot-grid h4{ color:var(--invert-fg); font-size:.95rem; margin-bottom:.9rem; letter-spacing:.02em; }
.foot-grid ul{ list-style:none; padding:0; display:grid; gap:.45rem; font-size:.95rem; }
.foot-logo{ height:130px; width:auto; }
.foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-top:1.3rem; font-size:.85rem; }
@media (max-width: 760px){ .foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }

/* ---------- Rechtsseiten ---------- */
.legal h1{ font-size:clamp(2rem,4vw,3rem); margin-bottom:1.5rem; overflow-wrap:anywhere; hyphens:auto; }
.legal h2{ font-size:1.35rem; margin:2.2rem 0 .7rem; }
.legal p,.legal li{ color:var(--fg-2); }
.legal mark{ background:color-mix(in srgb, var(--akzent) 20%, transparent); color:var(--fg); padding:0 .25em; }
.note{ border:1px solid var(--line-2); border-left:4px solid var(--akzent); border-radius:var(--r); padding:1rem 1.2rem; background:var(--bg-2); margin:1.2rem 0 1.8rem; }
.note p{ color:var(--fg-2); margin:0; }

/* ---------- Motion: Reveal mit Absicht ---------- */
/* motion: hierarchy. Ein Reveal-Typ, translateY 22px, laeuft einmal, nie beim Zurueckscrollen */
.js [data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal="1"]{ transition-delay:.08s } .js [data-reveal="2"]{ transition-delay:.16s } .js [data-reveal="3"]{ transition-delay:.24s } .js [data-reveal="4"]{ transition-delay:.32s }
.js [data-reveal].is-in{ opacity:1; transform:none; }
html[data-motion="reduce"] [data-reveal]{ transform:none; transition-duration:.3s; transition-delay:0s; }

/* ---------- Utilities ---------- */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }  /* nur fuer Bild-Zellen; drei gleiche Text-Karten sind verboten (Anti-KI) */
@media (max-width: 860px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.mt-1{ margin-top:1rem } .mt-2{ margin-top:2rem } .mt-3{ margin-top:3rem }
.pt-0{ padding-top:0 }
.measure-44{ max-width:44rem }                 /* Headline-Container in rem, nie in ch (Bug 7) */
.text-hero .display{ margin:0 0 1.1rem }
.text-hero.measure-44{ max-width:66rem; }
.text-hero .lead{ max-width:44rem; }
.foot-text{ margin-top:1.25rem; max-width:36ch }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fehler-404{ padding-block:clamp(4rem,10vw,8rem); }
.zeiten-fuss{ margin-top:.8rem; font-size:.85rem; color:var(--fg-3); line-height:1.45; }

/* ==========================================================================
   Hintergrund-Ebenen (max 3 je Seite): Karo, Punktraster mit Gold-Linien, blasses Foto
   Ebenen liegen unter dem Inhalt, fangen keine Klicks, der Abschnitt schneidet sie ab.
   ========================================================================== */
.deko-host{ position:relative; overflow:clip; isolation:isolate; }
.deko-host > .wrap{ position:relative; z-index:1; }
.deko{ position:absolute; inset:0; z-index:0; pointer-events:none; }

/* Karo: feines Gingham in Akzent, 8 Prozent, Raender laufen per Maske aus, sehr langsame Drift (endlich) */
.deko--karo{
  opacity:.08;
  -webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, black 30%, transparent 100%);
  mask-image:radial-gradient(ellipse 80% 75% at 50% 45%, black 30%, transparent 100%);
}
.karo{ position:absolute; left:-56px; top:-56px; width:calc(100% + 112px); height:calc(100% + 112px); animation:karo-drift 60s var(--ease) 4 alternate both; }
.karo__a{ fill:var(--akzent); fill-opacity:.55; }
@keyframes karo-drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(56px,56px,0) } }  /* motion: story */
html[data-motion="reduce"] .karo{ animation:none; }

/* Dunkler Block: Punktraster plus blasse Gold-Wellenlinien */
.deko__punkte{ position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size:22px 22px; opacity:.6; }
.welle{ position:absolute; left:-8%; top:0; width:116%; height:100%; overflow:visible; animation:welle-drift 30s var(--ease) 10 alternate both; }
.welle--linien{ fill:none; stroke:var(--gold); stroke-width:1.4; opacity:.24; }
.welle--linien path{ vector-effect:non-scaling-stroke; }
.deko--dunkel{
  -webkit-mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
  mask-image:linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
}
@keyframes welle-drift{ from{ transform:translate3d(-2%,0,0) } to{ transform:translate3d(2%,3%,0) } }  /* motion: story */
html[data-motion="reduce"] .welle{ animation:none; }

/* Blasses Betriebsfoto: hoechstens 7 Prozent, entsaettigt, Maske zu den Raendern */
.deko--foto img{
  width:100%; height:100%; object-fit:cover; opacity:.05; filter:grayscale(1);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 45%, black 35%, transparent 100%);
}
@media (prefers-color-scheme: dark){ .deko--karo{ opacity:.06; } .deko--foto img{ opacity:.05; } }

/* ==========================================================================
   Text-Hero mit Logo als Deko (Kontakt)
   ========================================================================== */
.th-logo{ position:absolute; right:var(--gutter); top:50%; width:13.75rem; transform:translateY(-50%); }
.th-logo img{ width:100%; height:auto; }
@media (max-width: 1100px){ .th-logo{ display:none; } }

/* ==========================================================================
   Kennzahl-Komposition Wirtsgarten (dunkel): Foto mit Gold-Versatzflaeche, Zahlen in Gold
   ========================================================================== */
.kz-grid{ display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.kz__foto{ position:relative; isolation:isolate; }
.kz__foto figure{ border-radius:var(--r-lg); overflow:hidden; }
.kz__foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.kz__chip{
  position:absolute; left:1rem; bottom:1rem; z-index:2; padding:.45rem .8rem; background:var(--invert-bg); color:var(--invert-fg);
  border:1px solid var(--invert-line); border-left:3px solid var(--gold); border-radius:var(--r-btn); font-size:.88rem; font-weight:500; line-height:1.3;
}
.kz__txt .lead{ margin-top:1rem; }
.kz__zeilen{ margin-top:2rem; border-bottom:1px solid var(--invert-line); }
.kz__zeile{ display:grid; grid-template-columns:12.5rem minmax(0,1fr); gap:.2rem 1.4rem; align-items:baseline; padding:1.1rem 0; border-top:1px solid var(--invert-line); }
.kz__zeile p{ margin:0; }
.kz__zahl{ font-family:var(--fd); font-weight:600; font-size:clamp(2.6rem,5vw,4rem); line-height:1; letter-spacing:-.012em; color:var(--gold); font-variant-numeric:tabular-nums; white-space:nowrap; }
.kz__zahl b{ font-weight:600; }
.kz__vor{ font-size:.38em; letter-spacing:0; margin-right:.2em; }
.kz__text{ color:var(--invert-fg); }
.kz__quelle{ margin-top:1.1rem; font-size:.85rem; color:var(--invert-fg-2); max-width:46ch; }
@media (max-width: 860px){ .kz-grid{ grid-template-columns:1fr; } .kz__zeile{ grid-template-columns:9.5rem minmax(0,1fr); } }

/* ==========================================================================
   Handy-Mockup, Wow-Moment "Drinnen oder Biergarten?" (Eingang 1). Kantiger Rahmen 6px, keine Notch.
   ========================================================================== */
.mk-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.mk-text .lead{ margin-top:1.1rem; }
.mk-buehne{ position:relative; display:grid; justify-items:center; padding:1.4rem 0 2rem; }
.mk-flaeche{ position:absolute; left:50%; top:3.4rem; bottom:.4rem; width:min(100%,21rem); margin-left:-4.4rem; background:var(--akzent); border-radius:var(--r-lg); }
.mk{ position:relative; z-index:1; width:min(100%,21rem); padding:6px; background:var(--invert-bg); border:1px solid var(--invert-line); border-radius:var(--r-lg); }
.mk__screen{ display:grid; gap:.75rem; padding:1rem 1rem 1.1rem; background:var(--bg); color:var(--fg); border-radius:var(--r); }
.mk__screen p{ margin:0; }
.mk__status{ display:flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; color:var(--fg-2); }
.dot-sq{ width:.5rem; height:.5rem; flex:none; background:var(--akzent); border-radius:1px; }
.mk__titel{ font-family:var(--fd); font-weight:600; font-size:1.3rem; line-height:1.15; letter-spacing:-.008em; }
.mk__wahl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; }
.mk__tile{
  position:relative; display:block; aspect-ratio:1/1; padding:0; overflow:hidden; border:2px solid var(--line-2); border-radius:var(--r);
  background:var(--bg-3); color:var(--auf-foto); cursor:pointer; isolation:isolate; transition:border-color .25s var(--ease);
}
.mk__tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.mk__tile::after{ content:""; position:absolute; inset:0; z-index:1; background:rgba(8,12,18,.52); opacity:0; transition:opacity .25s var(--ease); }  /* motion: state */
.mk__tile.is-weg::after{ opacity:1; }
.mk__tile[aria-pressed="true"]{ border-color:var(--akzent); }
.mk__tl{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.6rem .6rem .55rem; font-weight:700; font-size:.92rem; text-align:left; text-shadow:0 1px 8px rgba(0,0,0,.5); background:linear-gradient(180deg, rgba(8,12,18,0), rgba(8,12,18,.78)); }
.mk__ok{ position:absolute; top:.4rem; right:.4rem; z-index:2; display:grid; place-items:center; width:1.5rem; height:1.5rem; background:var(--akzent); color:var(--auf-akzent); border-radius:var(--r-btn); opacity:0; transition:opacity .25s var(--ease); }
.mk__ok svg{ width:.9rem; height:.9rem; }
.mk__tile[aria-pressed="true"] .mk__ok{ opacity:1; }
.mk__egal{ min-height:2.75rem; padding:.4rem .9rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:transparent; font-weight:700; font-size:.92rem; cursor:pointer; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.mk__egal[aria-pressed="true"]{ border-color:var(--akzent); background:color-mix(in srgb, var(--akzent) 12%, var(--bg)); }
.mk__reihe{ display:grid; gap:.35rem; }
.mk__label{ font-size:.78rem; font-weight:700; color:var(--fg-2); }
.mk__stepper{ display:grid; grid-template-columns:2.75rem minmax(0,1fr) 2.75rem; gap:.4rem; align-items:center; }
.mk__stepper button,.pers button{ height:2.75rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); color:var(--fg); font-weight:700; font-size:1.25rem; line-height:1; cursor:pointer; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.mk__stepper button:active,.pers button:active{ transform:scale(.96); }  /* motion: feedback */
.mk__n{ text-align:center; font-family:var(--fd); font-weight:600; font-size:1.4rem; }
.mk__chips{ display:grid; gap:.4rem; }
.mk__chips--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.mk__chips--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.mk__chip{ display:grid; place-items:center; align-content:center; gap:.05rem; min-height:2.75rem; padding:.2rem .1rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); font-size:.82rem; font-weight:700; line-height:1.15; cursor:pointer; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.mk__chip small{ font-size:.7rem; font-weight:500; color:var(--fg-2); }
.mk__chip small:empty{ display:none; }
.mk__chip[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); }
.mk__chip[aria-pressed="true"] small{ color:var(--auf-akzent); }
.mk__summary{ padding:.7rem .8rem; border-left:4px solid var(--akzent); border-radius:var(--r-btn); background:var(--bg-2); font-size:.9rem; font-weight:500; line-height:1.4; transition:opacity .2s var(--ease); }
.mk__cta{ width:100%; }
@media (hover: hover) and (pointer: fine){ .mk__stepper button:hover,.pers button:hover,.mk__chip:hover,.mk__egal:hover{ border-color:var(--fg); } .mk__tile:hover{ border-color:var(--fg-2); } }
@media (max-width: 900px){ .mk-grid{ grid-template-columns:1fr; } .mk-flaeche{ left:.9rem; right:-.9rem; width:auto; margin-left:0; } }

/* ==========================================================================
   Bereichs-Tafeln (Eingang 2): zwei grosse Foto-Tafeln, gewaehlte mit Rahmen und Haekchen, die andere mit Scrim
   ========================================================================== */
.tafeln{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
.tafel{ display:grid; grid-template-rows:1fr auto; gap:1rem; }
.tafel__wahl{
  position:relative; display:block; width:100%; padding:0; text-align:left; border:3px solid transparent; border-radius:var(--r-lg);
  background:var(--surface); outline:1px solid var(--line); cursor:pointer; overflow:hidden; transition:border-color .25s var(--ease); height:100%;
}
.tafel__wahl[aria-pressed="true"]{ border-color:var(--akzent); outline-color:transparent; }
.tafel__foto{ position:relative; display:block; overflow:hidden; }
.tafel__foto img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .9s var(--ease); }
.tafel__foto::after{ content:""; position:absolute; inset:0; background:rgba(8,12,18,.55); opacity:0; transition:opacity .25s var(--ease); }  /* motion: state */
.tafel.is-weg .tafel__foto::after{ opacity:1; }
@media (hover: hover) and (pointer: fine){ .tafel__wahl:hover .tafel__foto img{ transform:scale(1.03); } }
.tafel__haken{ position:absolute; top:.9rem; right:.9rem; z-index:2; display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; background:var(--akzent); color:var(--auf-akzent); border-radius:var(--r-btn); font-weight:700; font-size:.88rem; opacity:0; transition:opacity .25s var(--ease); }
.tafel__haken svg{ width:1em; height:1em; }
.tafel__wahl[aria-pressed="true"] .tafel__haken{ opacity:1; }
.tafel__kopf{ display:grid; gap:.2rem; padding:1.1rem 1.2rem 1.3rem; align-content:start; }
.tafel__kopf b{ font-family:var(--fd); font-weight:600; font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:-.01em; line-height:1.1; }
.tafel__kopf span{ color:var(--fg-2); max-width:42ch; }
.tafel > .btn{ justify-self:start; }
@media (max-width: 760px){ .tafeln{ grid-template-columns:1fr; } }

/* ==========================================================================
   Speisekarte: sticky Rubrik-Filter, Rubriken mit Foto, Hairline-Zeilen mit Kartennummer und Preis
   ========================================================================== */
.kfilter{ position:sticky; top:var(--head-h); z-index:40; margin-inline:calc(var(--gutter) * -1); padding:.7rem var(--gutter) .1rem; background:var(--bg); border-bottom:1px solid var(--line); }
.kf__chips{ flex-wrap:nowrap; overflow-x:auto; margin:0; padding-bottom:.7rem; scrollbar-width:thin; }
.kf__chips .chip{ flex:none; white-space:nowrap; }
.karte__hinweis{ max-width:44rem; margin:1.6rem 0 2.4rem; padding:.85rem 1.1rem; border-left:4px solid var(--akzent); border-radius:var(--r); background:var(--bg-2); color:var(--fg); }
.kat{ padding-bottom:clamp(2.5rem,5vw,4rem); scroll-margin-top:calc(var(--head-h) + 5rem); }
.kat[hidden]{ display:none; }
.kat__kopf{ display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-bottom:1.2rem; align-items:end; }
.kat__kopf--foto{ grid-template-columns:minmax(0,1fr) minmax(0,26rem); gap:clamp(1.5rem,4vw,3rem); }
.kat__txt .muted{ margin-top:.7rem; }
.kat__foto{ border-radius:var(--r-lg); overflow:hidden; }
.kat__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.karte{ list-style:none; padding:0; border-top:1.5px solid var(--fg); }
.kz{ display:grid; grid-template-columns:2.8rem minmax(0,1fr) auto; gap:.15rem 1.2rem; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--line); }
.kz__nr{ font-size:.85rem; font-weight:500; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.kz__name{ font-size:clamp(1.12rem,1.8vw,1.4rem); letter-spacing:-.006em; line-height:1.2; }
.kz__preis{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kz__beschr{ grid-column:2 / 4; grid-row:2; color:var(--fg-2); font-size:.97rem; max-width:58ch; }
.kz__name,.kz__beschr{ transition:transform .3s var(--ease); }  /* motion: feedback */
@media (hover: hover) and (pointer: fine){ .kz:hover .kz__name,.kz:hover .kz__beschr{ transform:translateX(.6rem); } }
.kat__hinweis{ margin-top:1rem; font-size:.92rem; color:var(--fg-2); }
.kat__gruppe{ margin-top:1.8rem; }
.kat__gruppe .h-sub{ margin-bottom:.7rem; }
.kat.is-neu{ animation:kr-in .45s var(--ease) both; }
@keyframes kr-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }  /* motion: state */
html[data-motion="reduce"] .kat.is-neu{ animation-duration:.2s; }
@media (max-width: 760px){
  .kat__kopf--foto{ grid-template-columns:1fr; }
  .kz{ grid-template-columns:2.2rem minmax(0,1fr) auto; gap:.15rem .8rem; }
}

/* ==========================================================================
   Reservierung und Feiern: Radio-Tafeln, Stepper, Tag-Chips, Zusammenfassung, Regler (Eingaenge 3 und 4)
   ========================================================================== */
.res-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (max-width: 860px){ .res-grid{ grid-template-columns:1fr; } }
.res__bereich{ border:0; padding:0; min-width:0; }
.res__bereich legend{ font-weight:700; font-size:.95rem; margin-bottom:.6rem; padding:0; }
.res__tafeln{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.rt{ position:relative; display:block; cursor:pointer; }
.rt input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:2; }
.rt__box{ display:grid; grid-template-rows:auto 1fr; height:100%; overflow:hidden; border:2px solid var(--line-2); border-radius:var(--r); background:var(--surface); transition:border-color .25s var(--ease); }
.rt__foto{ display:block; overflow:hidden; }
.rt__foto img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.rt__foto--leer{ aspect-ratio:16/10; background:var(--bg-3); }
.rt__name{ display:flex; align-items:center; justify-content:space-between; gap:.4rem; padding:.7rem .8rem; font-weight:700; font-size:.95rem; min-height:2.75rem; }
.rt__ok{ display:grid; place-items:center; width:1.3rem; height:1.3rem; flex:none; background:var(--akzent); color:var(--auf-akzent); border-radius:var(--r-btn); opacity:0; transition:opacity .25s var(--ease); }
.rt__ok svg{ width:.85rem; height:.85rem; }
.rt input:checked + .rt__box{ border-color:var(--akzent); }
.rt input:checked + .rt__box .rt__ok{ opacity:1; }
.rt input:focus-visible + .rt__box{ outline:3px solid var(--akzent); outline-offset:2px; }
@media (hover: hover) and (pointer: fine){ .rt:hover .rt__box{ border-color:var(--fg-2); } .rt input:checked + .rt__box{ border-color:var(--akzent); } }

.pers{ display:grid; grid-template-columns:2.75rem minmax(0,1fr) 2.75rem; gap:.4rem; }
.field .pers input{ text-align:center; font-family:var(--fd); font-weight:600; font-size:1.2rem; padding:.4rem .5rem; -moz-appearance:textfield; appearance:textfield; }
.pers input::-webkit-inner-spin-button,.pers input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
.tagchips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.tagchips .chip{ padding:.5rem .8rem; }
.res__summary{ margin:0; padding:.9rem 1.1rem; border-left:4px solid var(--akzent); border-radius:var(--r); background:var(--bg-2); font-weight:500; }
.section--alt .res__summary{ background:var(--surface); border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.res__summary.is-neu{ animation:fade-in .2s var(--ease) both; }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }  /* motion: state */
.res__summary a{ font-weight:700; border-bottom:2px solid var(--akzent); }

.regler{ display:grid; gap:.3rem; }
.regler__out{ font-family:var(--fd); font-weight:600; font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:-.01em; line-height:1.1; }
.field input[type="range"]{ padding:0; border:0; background:transparent; accent-color:var(--akzent); cursor:pointer; height:2.75rem; }
.regler__skala{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--fg-3); }

/* ==========================================================================
   Kontakt: Wochenleiste (Balken ohne Track, wachsen einmal von links) und Hausnummern-Schild
   ========================================================================== */
.kontakt-grid{ align-items:start; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
@media (max-width: 860px){ .kontakt-grid{ grid-template-columns:1fr; } }
.wl .h-sub{ margin-bottom:1rem; }
.wl__kopf,.wl__zeile{ display:grid; grid-template-columns:7.4rem minmax(0,1fr); gap:0 1rem; align-items:center; }
.wl__achse{ position:relative; grid-column:2; height:1.5rem; font-size:.78rem; color:var(--fg-3); }
.wl__achse > span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.wl__achse .i0{ left:0; } .wl__achse .i1{ left:16.667%; } .wl__achse .i2{ left:33.333%; } .wl__achse .i3{ left:50%; } .wl__achse .i4{ left:66.667%; } .wl__achse .i5{ left:83.333%; } .wl__achse .i6{ left:100%; }
.wl__achse .i0{ transform:none; }
.wl__achse .i6{ transform:translateX(-100%); }
@media (max-width: 560px){ .wl__uhr{ display:none; } }
.wl__zeilen{ border-top:1.5px solid var(--fg); }
.wl__zeile{ padding:.45rem 0; border-bottom:1px solid var(--line); }
.wl__tag{ display:flex; flex-direction:column; font-weight:500; font-size:.95rem; line-height:1.25; }
.wl__heute{ display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; font-weight:700; color:var(--akzent-text); }
.wl__heute[hidden]{ display:none; }
.wl__heute::before{ content:""; width:.45rem; height:.45rem; background:var(--akzent); border-radius:1px; }
.wl__zeile.is-heute .wl__tag > span:first-child{ font-weight:700; }
.wl__bahn{ position:relative; height:2.3rem; background-image:repeating-linear-gradient(90deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc((100% - 1px) / 6)); }
.wl__bar{ position:absolute; left:0; top:.3rem; bottom:.3rem; }
.wl__bar--22{ width:91.67%; } .wl__bar--23{ width:100%; }
.wl__fuell{ position:absolute; inset:0; background:var(--akzent); border-radius:2px; transform-origin:left center; }
.wl__label{ position:relative; display:block; padding-left:.7rem; line-height:1.7rem; font-size:.85rem; font-weight:700; color:var(--auf-akzent); white-space:nowrap; }
.js .wl__fuell{ transform:scaleX(0); transition:transform .6s var(--ease); }  /* motion: story */
.js .wl__label{ opacity:0; transition:opacity .4s var(--ease) .35s; }
.js .wl.is-in .wl__fuell{ transform:none; }
.js .wl.is-in .wl__label{ opacity:1; }
html[data-motion="reduce"] .wl__fuell{ transition-duration:.2s; }
@media (max-width: 480px){ .wl__kopf,.wl__zeile{ grid-template-columns:5.6rem minmax(0,1fr); gap:0 .6rem; } .wl__label{ padding-left:.5rem; font-size:.8rem; } }

.schild-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:center; }
.schild{ position:relative; display:grid; gap:.4rem; align-content:center; justify-items:center; text-align:center; min-height:15rem; padding:clamp(2rem,5vw,3.5rem); background:var(--marke); color:var(--auf-foto); border-radius:var(--r-lg); }
.schild::before{ content:""; position:absolute; inset:.8rem; border:2px solid var(--gold); border-radius:var(--r-btn); pointer-events:none; }
.schild b{ font-family:var(--fd); font-weight:600; font-size:clamp(1.7rem,3.6vw,2.8rem); letter-spacing:-.008em; line-height:1.1; }
.schild span{ font-size:clamp(1.1rem,1.8vw,1.4rem); font-weight:500; }
.stich{ list-style:none; padding:0; border-top:1px solid var(--line); }
.stich li{ padding:1.15rem 0; border-bottom:1px solid var(--line); font-family:var(--fd); font-weight:600; font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:-.006em; line-height:1.25; }
@media (max-width: 860px){ .schild-grid{ grid-template-columns:1fr; } }

.tile__txt b,.mk__titel,.mk__n,.tafel__kopf b,.schild b,.stich li,.tel-gross,.regler__out,.kz__zahl,.kz__name,.brand{ word-spacing:.08em; }


/* Name neben dem Logo: der Brunnen allein ist in der Kopfzeile zu klein, um den Betrieb zu nennen */
.brand{ gap:.7rem; }
.brand__name{ display:grid; line-height:1.1; font-family:var(--fd); color:var(--fg); }
.brand__name b{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
.brand__name span{ font-family:var(--fb); font-size:.85rem; color:var(--fg-2); }
@media (min-width: 901px) and (max-width: 1240px){ .brand__name{ display:none; } }
@media (max-width: 420px){ .brand__name b{ font-size:.92rem; } }


/* ==========================================================================
   Irodion: Anpassungen am Baukasten und neue Bausteine
   ========================================================================== */
/* Wortmarke und Olivenblatt-Signet */
.brand{ gap:.6rem; color:var(--fg); }
.signet{ width:30px; height:30px; flex:none; fill:var(--akzent); }
.wortmarke{ font-family:var(--fd); font-weight:600; font-size:1.3rem; letter-spacing:.16em; line-height:1; }  /* marke: Wortmarke IRODION in Versalien wie am Schild */
.brand__name{ display:grid; gap:.2rem; }
.brand__name span{ display:none; }
@media (min-width: 1100px){ .brand__name span{ display:block; } }
@media (min-width: 901px) and (max-width: 1240px){ .brand__name{ display:grid; } }
.brand--foot{ color:var(--invert-fg); }
.brand--foot .signet{ fill:var(--akzent-hell); }
.brand--foot .brand__name span{ color:var(--invert-fg-2); display:block; }

/* Versatzflaeche in Akzent (nicht Hellgruen) auf hellen Abschnitten */
.versatz::before{ background:var(--akzent); }

/* Hero: Scrim in Oliv-Schwarz, links kraeftig (Szene 2 ist sehr hell), unten bis .78 */
.hero__bg::after{
  background:linear-gradient(90deg, rgba(21,24,15,.86) 0%, rgba(21,24,15,.64) 40%, rgba(21,24,15,.2) 100%),
             linear-gradient(180deg, rgba(21,24,15,.2) 0%, rgba(21,24,15,.2) 45%, rgba(21,24,15,.78) 100%);
}
@media (max-width: 900px){ .hero__bg::after{ background:linear-gradient(180deg, rgba(21,24,15,.72) 0%, rgba(21,24,15,.8) 45%, rgba(21,24,15,.92) 100%); } }
.hero .display{ font-size:clamp(2.4rem, 5.4vw, 4.3rem); letter-spacing:-.03em; }
.hero__copy{ max-width:46rem; }
.hero__chips li{ background:rgba(21,24,15,.66); }
.hero__credit{ position:absolute; right:var(--gutter); bottom:.8rem; z-index:2; font-size:.72rem; color:rgba(255,255,255,.78); }
/* Statuspunkt: einziger Kreis der Seite, ohne Puls; geschlossen und Pause in --fg-3 */
.dot::after{ display:none; }
.is-zu .dot{ background:var(--invert-fg-2); }

/* Ambient 1: Akzent-Lichtband auf hellem Grund */
.deko--welle{ opacity:.09; }
.welle--band{ fill:var(--akzent); }
@media (prefers-color-scheme: dark){ .deko--welle{ opacity:.12; } }
.deko--foto img{ opacity:.07; }

/* Kennzahl-Komposition Mittag (hell) */
.kzm{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.kzm p{ margin:0; }
.kzm__links{ border-left:3px solid var(--akzent); padding-left:clamp(1.2rem,3vw,2rem); }
.kzm__gross{ font-family:var(--fd); font-weight:600; font-size:clamp(4.5rem,10vw,7.5rem); line-height:.95; letter-spacing:-.03em; color:var(--akzent-text); }
.kzm__zahl{ margin-top:1.4rem !important; font-family:var(--fd); font-weight:600; font-size:clamp(2.4rem,5vw,3.6rem); line-height:1; font-variant-numeric:tabular-nums; }
.kzm__zahl b{ font-weight:600; }
.kzm__lab{ color:var(--fg-2); margin-top:.3rem !important; max-width:24ch; }
.kzm__quelle{ margin-top:1.2rem !important; font-size:.85rem; color:var(--fg-3); }
.kzm__rechts .lead{ margin-top:1rem; }
@media (max-width: 860px){ .kzm{ grid-template-columns:1fr; } }

/* Visual 9.2 Preisleiter Mittag */
.pl{ margin-top:2.4rem; }
.pl__bahn{ position:relative; height:5.2rem; margin-inline:1.2rem; }
.pl__linie{ position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--fg-2); }
.pl__m{ position:absolute; bottom:1px; width:.6rem; height:.9rem; margin-left:-.3rem; background:var(--akzent); border-radius:1px; transform-origin:bottom center; }
.pl__s0{ bottom:1px } .pl__s1{ bottom:calc(1px + 1.05rem) } .pl__s2{ bottom:calc(1px + 2.1rem) } .pl__s3{ bottom:calc(1px + 3.15rem) } .pl__s4{ bottom:calc(1px + 4.2rem) }
.pl__x0{ left:0% } .pl__x15{ left:15% } .pl__x25{ left:25% } .pl__x40{ left:40% } .pl__x75{ left:75% } .pl__x100{ left:100% }
.pl__labels{ position:relative; height:3rem; margin-inline:1.2rem; margin-top:.5rem; }
.pl__l{ position:absolute; top:0; transform:translateX(-50%); font-weight:600; font-size:1.125rem; font-variant-numeric:tabular-nums; color:var(--fg); white-space:nowrap; display:grid; justify-items:center; line-height:1.2; }
.pl__l.pl__x0{ transform:none; justify-items:start; } .pl__l.pl__x100{ transform:translateX(-100%); justify-items:end; }
.pl__l small{ font-size:.78rem; font-weight:500; color:var(--fg-2); }
.pl figcaption{ margin-top:.6rem; color:var(--fg-2); font-size:.95rem; }
.js .pl .pl__m{ transform:scaleY(0); transition:transform .5s var(--ease); }  /* motion: explanation */
.js .pl.is-in .pl__m{ transform:none; }
.pl__m:nth-child(2){ transition-delay:.03s } .pl__m:nth-child(3){ transition-delay:.06s } .pl__m:nth-child(4){ transition-delay:.09s }
.pl__m:nth-child(5){ transition-delay:.12s } .pl__m:nth-child(6){ transition-delay:.15s } .pl__m:nth-child(7){ transition-delay:.18s }
.pl__m:nth-child(8){ transition-delay:.21s } .pl__m:nth-child(9){ transition-delay:.24s } .pl__m:nth-child(10){ transition-delay:.27s }
.pl__m:nth-child(11){ transition-delay:.3s } .pl__m:nth-child(12){ transition-delay:.33s } .pl__m:nth-child(13){ transition-delay:.36s }
.pl__m:nth-child(14){ transition-delay:.39s } .pl__m:nth-child(15){ transition-delay:.42s } .pl__m:nth-child(16){ transition-delay:.45s }
html[data-motion="reduce"] .pl .pl__m{ transition-duration:.2s; transition-delay:0s; }

/* Leistungswahl: Zusatz Symbolbild */
.lwk__sym{ display:block; margin-top:.5rem; font-size:.75rem; color:rgba(255,255,255,.75); }

/* Karten-Finder: Chips (Rechtecke 4px, 44px hoch) */
.fchips{ display:flex; flex-wrap:wrap; gap:.45rem; }
.fchip{
  min-height:2.75rem; padding:.45rem .85rem; border:1.5px solid var(--line-2); border-radius:var(--r-btn); background:var(--surface); color:var(--fg);
  font-weight:500; font-size:.95rem; line-height:1.2; cursor:pointer; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.fchip b{ font-weight:600; margin-right:.15rem; }
.fchip[aria-pressed="true"]{ background:var(--akzent); border-color:var(--akzent); color:var(--auf-akzent); }
@media (hover: hover) and (pointer: fine){ .fchip:hover{ border-color:var(--fg); } .fchip[aria-pressed="true"]:hover{ border-color:var(--akzent-hover); } }
.f__zahl{ font-weight:600; font-variant-numeric:tabular-nums; }
.f__reset{ min-height:2.75rem; padding:.4rem .9rem; border:0; background:transparent; color:var(--akzent-text); font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.f__reset:disabled{ color:var(--fg-3); text-decoration:none; cursor:default; }
.f__hinweis{ font-size:.88rem; color:var(--fg-2); margin-top:.6rem; max-width:60ch; }
.f__hinweis--dunkel{ color:var(--invert-fg-2); margin-top:1.6rem; }
.f__mittag{ font-size:.88rem; font-weight:600; color:var(--akzent-text); border-left:3px solid var(--akzent); padding-left:.6rem; }
.f__vorsorge,.f__suppe{ font-size:.9rem; color:var(--fg-2); margin-top:.3rem; }
.f__leer{ padding:.9rem 1rem; border-left:4px solid var(--akzent); background:var(--bg-2); border-radius:var(--r); }
.f__leer--gross{ margin:1.6rem 0; font-size:1.05rem; }
.f__leer a{ font-weight:600; border-bottom:2px solid var(--akzent); }
[hidden]{ display:none !important; }

/* Handy-Mockup Finder */
.mkf{ width:min(100%,22.5rem); }
.mkf .mk__screen{ gap:.6rem; }
.fchips--3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.fchips--3 .fchip{ padding:.3rem .2rem; font-size:.82rem; }
.fchips--k{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.3rem; }
.fchip--k{ display:grid; place-items:center; padding:.2rem .1rem; min-height:2.75rem; gap:0; }
.fchip--k b{ margin:0; font-size:.95rem; line-height:1; }
.fchip--k small{ font-size:.58rem; line-height:1.1; color:var(--fg-2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fchip--k[aria-pressed="true"] small{ color:var(--auf-akzent); }
.mkf .f__zahl{ font-size:.9rem; }
.mkf__liste{ list-style:none; padding:0; border-top:1.5px solid var(--fg); }
.mkf__liste li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 .6rem; padding:.45rem 0; border-bottom:1px solid var(--line); font-size:.86rem; line-height:1.3; }
.mkf__r{ grid-column:1 / -1; font-size:.7rem; color:var(--fg-3); }
.mkf__liste b{ font-family:var(--fd); font-weight:600; }
.mkf__p{ font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mkf__liste small{ grid-column:1 / -1; color:var(--fg-2); font-size:.74rem; }
.mkf__fuss{ display:grid; gap:.2rem; }
.mkf .f__leer{ font-size:.85rem; }
.link-arrow--hell{ color:var(--invert-fg); }

/* Finder-Leiste auf speisekarte: sticky unter dem Header */
.sprung{ display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; padding:1.2rem 0 1.6rem; font-size:.95rem; }
.sprung span{ color:var(--fg-3); }
.sprung a{ color:var(--fg-2); border-bottom:1px solid var(--line-2); }
.sprung a:hover{ color:var(--fg); border-color:var(--akzent); }
.fl{ position:sticky; top:var(--head-h); z-index:40; margin-inline:calc(var(--gutter) * -1); padding:.8rem var(--gutter) .9rem; background:var(--bg); border-bottom:1px solid var(--line-2); }
.fl__sum{ list-style:none; display:flex; align-items:center; justify-content:space-between; min-height:2.6rem; cursor:pointer; font-weight:600; }
.fl__sum::-webkit-details-marker{ display:none; }
.fl__sum b{ color:var(--akzent-text); }
.fl__body{ display:grid; gap:.7rem; padding-top:.4rem; }
.fl__reihe{ display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.6rem; align-items:start; }
.fl__label{ font-size:.85rem; font-weight:600; color:var(--fg-2); padding-top:.7rem; }
.fl__zs{ margin-left:7.6rem; }
.fl__zs summary{ cursor:pointer; font-weight:600; font-size:.9rem; color:var(--fg-2); min-height:2.75rem; display:flex; align-items:center; }
.fl__status{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; margin-top:.4rem; }
@media (max-width: 760px){
  .fl__reihe{ grid-template-columns:1fr; gap:.3rem; }
  .fl__label{ padding-top:0; }
  .fl__zs{ margin-left:0; }
  .fl__sum{ min-height:3.25rem; }
  .fl__body{ max-height:55vh; overflow:auto; }
}

/* Karte als Dokument: keine Hairline je Zeile, nur Abstand; Hairline unter dem Rubrik-Kopf */
.karte-doc{ padding-top:2rem; }
.kat{ padding-bottom:clamp(2.5rem,5vw,4rem); scroll-margin-top:calc(var(--head-h) + 6rem); }
.kat__kopf{ display:block; padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:1.5px solid var(--fg); }
.kat__kopf .muted{ margin-top:.5rem; max-width:60ch; }
.kat__streifen{ position:relative; margin-bottom:1.4rem; border-radius:var(--r); overflow:hidden; }
.kat__streifen img{ width:100%; aspect-ratio:3/1; object-fit:cover; }
.kat__streifen figcaption{ position:absolute; right:.6rem; bottom:.5rem; padding:.15rem .5rem; font-size:.72rem; background:rgba(21,24,15,.7); color:var(--invert-fg); border-radius:2px; }
.kat .pl{ margin:0 0 1.8rem; }
.karte2{ list-style:none; padding:0; display:grid; gap:1.1rem 3rem; }
@media (min-width: 1000px){ .karte2--zwei{ grid-template-columns:1fr 1fr; } }
.gr{ display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto auto; gap:.1rem 1rem; align-items:baseline; }
.gr__nr{ font-size:.85rem; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.gr__name{ font-size:1.2rem; letter-spacing:-.01em; line-height:1.25; }
.gr__beschr{ margin-top:.2rem; font-size:1.0625rem; color:var(--fg-2); line-height:1.5; }
.gr__k{ font-size:.85rem; color:var(--fg-3); white-space:nowrap; font-variant-numeric:tabular-nums; }
.gr__preis{ font-weight:600; font-size:1.125rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.gr--wein{ grid-template-columns:minmax(0,1fr) auto auto; }
@media (max-width: 640px){
  .gr{ grid-template-columns:2.2rem minmax(0,1fr) auto; }
  .gr__k{ grid-column:2; grid-row:2; }
  .gr--wein{ grid-template-columns:minmax(0,1fr) auto; }
  .gr--wein .gr__k{ grid-column:1; }
}
.kat__hinweis{ margin-top:1.2rem; font-size:.95rem; color:var(--fg-2); }
.th__klein{ margin-top:.6rem; font-size:.95rem; color:var(--fg-3); }
.wein{ display:grid; gap:2.4rem; }
.wein__gruppe .h-sub{ padding-bottom:.6rem; margin-bottom:1rem; border-bottom:1.5px solid var(--fg); }

/* Visual 9.3 Kuerzel lesen */
.kk2{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.kk2__bsp{ padding:clamp(1.4rem,3vw,2.2rem); background:var(--bg-2); border-left:4px solid var(--akzent); border-radius:var(--r); }
.kk2__bsp p{ margin:0; }
.kk2__kopf{ font-size:.9rem; color:var(--fg-2); font-weight:600; }
.kk2__name{ font-family:var(--fd); font-weight:600; font-size:clamp(2rem,4vw,3rem); line-height:1.05; margin-top:.4rem !important; }
.kk2__bsp .gr__beschr{ margin-top:.6rem !important; }
.kk2__felder{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem; }
.kk2__feld{ display:grid; place-items:center; min-width:2.6rem; height:2.6rem; padding:0 .5rem; border:2px solid var(--akzent); border-radius:var(--r-btn); font-weight:600; font-size:1.05rem; }
.kk2__preis{ margin-top:1rem !important; font-weight:600; font-size:1.3rem; font-variant-numeric:tabular-nums; }
.kk2__tafel{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; }
.kk2__tafel .h-sub{ padding-bottom:.5rem; margin-bottom:.7rem; border-bottom:1.5px solid var(--fg); }
.kk2__tafel ul{ list-style:none; padding:0; display:grid; gap:.3rem; }
.kk2__tafel li{ color:var(--fg-2); }
.kk2__tafel li b{ display:inline-block; min-width:1.8rem; color:var(--fg); }
.kk2__tafel li.is-bsp,.kk2__tafel li.is-bsp b{ color:var(--akzent-text); font-weight:600; }
.kk2__fuss{ grid-column:1 / -1; font-size:.88rem; color:var(--fg-3); }
.kk2__hinweise{ margin-top:2.4rem; padding-top:1.2rem; border-top:1px solid var(--line); display:grid; gap:.4rem; color:var(--fg-2); max-width:70ch; }
.kk2__hinweise p{ margin:0; }
@media (max-width: 900px){ .kk2{ grid-template-columns:1fr; } }
@media (max-width: 520px){ .kk2__tafel{ grid-template-columns:1fr; } }

/* Visual 9.1 Kalenderblatt: Spalte je Wochentag, Zeitachse 11 bis 23 Uhr */
.kb__blatt{ display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:0 .6rem; }
.kb__achse{ position:relative; margin-top:2.6rem; height:22rem; font-size:.8rem; color:var(--fg-3); }
.kb__h{ position:absolute; left:0; transform:translateY(-50%); white-space:nowrap; }
.kb__h0{ top:0 } .kb__h1{ top:25% } .kb__h2{ top:50% } .kb__h3{ top:75% } .kb__h4{ top:100% }
.kb__spalten{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.5rem; }
.kb__sp{ display:grid; grid-template-rows:2.6rem 22rem; }
.kb__tag{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:.4rem; font-weight:500; font-size:.92rem; line-height:1.2; border-bottom:1.5px solid var(--fg); margin:0; }
.kb__kurz{ display:none; }
.kb__heute{ display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; font-weight:600; color:var(--akzent-text); }
.kb__heute::before{ content:""; width:.45rem; height:.45rem; background:var(--akzent); border-radius:50%; }  /* einziger Kreis: Statuspunkt */
.kb__sp.is-heute .kb__tag{ font-weight:600; border-bottom-color:var(--akzent-text); border-bottom-width:3px; }
.kb__feld{ position:relative; background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 25%; border-bottom:1px solid var(--line); }
.kb__sp--ruhe .kb__feld{ background-image:repeating-linear-gradient(135deg, var(--line-2) 0, var(--line-2) 1px, transparent 1px, transparent 9px); }
.kb__ruhe{ position:absolute; top:.6rem; left:0; right:0; text-align:center; font-weight:600; font-size:.85rem; color:var(--fg-2); }
.kb__bar{ position:absolute; left:8%; right:8%; border-radius:2px; }
/* 11:30 = 4,17 %, 14:45 = 31,25 %, 17:30 = 54,17 %, 22:00 = 91,67 %, 23:00 = 100 % */
.kb__bar--m{ top:4.17%; height:27.08%; background:color-mix(in srgb, var(--fg) 12%, transparent); border:1px solid var(--line-2); }
.kb__bar--mittag{ background:var(--akzent); border-color:var(--akzent); }
.kb__lab{ display:block; padding:.35rem .3rem; font-size:.72rem; font-weight:600; line-height:1.15; color:var(--fg); overflow-wrap:anywhere; }
.kb__bar--mittag .kb__lab{ color:var(--auf-akzent); }
.kb__bar--abend{ top:54.17%; height:45.83%; background:color-mix(in srgb, var(--fg) 12%, transparent); border:1px solid var(--line-2); }
.kb__bar--so{ background:none; border:0; }
.kb__fest{ position:absolute; left:0; right:0; top:0; height:81.8%; background:color-mix(in srgb, var(--fg) 12%, transparent); border:1px solid var(--line-2); border-radius:2px; }
.kb__offen{ position:absolute; left:0; right:0; bottom:0; height:18.2%; border:1.5px dashed var(--fg-3); border-top:0; border-radius:0 0 2px 2px; }
.kb__lab--so{ position:absolute; left:0; right:0; top:.2rem; font-weight:500; color:var(--fg-2); font-size:.66rem; }
.kb__jetzt{ position:absolute; left:0; right:0; height:2px; background:var(--akzent-text); z-index:2; }
.kb__jetzt--0{ top:0 } .kb__jetzt--5{ top:5% } .kb__jetzt--10{ top:10% } .kb__jetzt--15{ top:15% } .kb__jetzt--20{ top:20% } .kb__jetzt--25{ top:25% }
.kb__jetzt--30{ top:30% } .kb__jetzt--35{ top:35% } .kb__jetzt--40{ top:40% } .kb__jetzt--45{ top:45% } .kb__jetzt--50{ top:50% } .kb__jetzt--55{ top:55% }
.kb__jetzt--60{ top:60% } .kb__jetzt--65{ top:65% } .kb__jetzt--70{ top:70% } .kb__jetzt--75{ top:75% } .kb__jetzt--80{ top:80% } .kb__jetzt--85{ top:85% }
.kb__jetzt--90{ top:90% } .kb__jetzt--95{ top:95% } .kb__jetzt--100{ top:calc(100% - 2px) }
.kb__liste{ display:none; list-style:none; padding:0; border-top:1.5px solid var(--fg); }
.kb__liste li{ display:grid; grid-template-columns:7.5rem minmax(0,1fr); gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--line); }
.kb__liste span{ color:var(--fg-2); }
@media (max-width: 1000px){ .kb__lang{ display:none; } .kb__kurz{ display:inline; } .kb__lab--so{ display:none; } }
@media (max-width: 760px){ .kb__blatt{ display:none; } .kb__liste{ display:block; } }

/* Visual 9.4 Hausnummer 18 */
.hn{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,6vw,5.5rem); align-items:center; }
.hn__foto{ position:relative; isolation:isolate; max-width:640px; }
.hn__foto img{ border-radius:var(--r); width:100%; }
.hn__foto figcaption{ margin-top:1.6rem; font-size:.9rem; color:var(--fg-2); }
.hn__zahl{ margin:.4rem 0 0; font-family:var(--fd); font-weight:600; font-size:clamp(6rem,16vw,12rem); line-height:.9; letter-spacing:-.04em; color:var(--akzent-text); }
.hn__adr{ margin-top:.6rem; font-family:var(--fd); font-weight:600; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.3; }
@media (max-width: 860px){ .hn{ grid-template-columns:1fr; } }

/* Bento Lokal: 5 hoch + 4 + 3, darunter 7 Textkachel. Fotos nie ueber Originalgroesse */
.lokal{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto; gap:1rem; }
.lokal figure{ margin:0; overflow:hidden; border-radius:var(--r); }
.lokal img{ width:100%; height:100%; object-fit:cover; }
.lokal__a{ grid-column:1 / span 5; grid-row:1 / span 2; position:relative; overflow:visible !important; isolation:isolate; }
.lokal__a img{ border-radius:var(--r); }
.lokal__b{ grid-column:6 / span 4; aspect-ratio:8/7; max-width:360px; }
.lokal__c{ grid-column:10 / span 3; aspect-ratio:4/3; }
.lokal__d{ grid-column:6 / span 7; display:grid; gap:.6rem; align-content:center; padding:clamp(1.2rem,3vw,2rem); border-top:1.5px solid var(--fg); }
@media (max-width: 860px){
  .lokal{ grid-template-columns:1fr 1fr; }
  .lokal__a{ grid-column:1 / -1; grid-row:auto; }
  .lokal__b{ grid-column:1; max-width:none; }
  .lokal__c{ grid-column:2; }
  .lokal__d{ grid-column:1 / -1; }
}

/* Galerie in drei Gruppen mit Lightbox */
.gal{ display:grid; gap:2.6rem; }
.gal__gruppe .h-sub{ margin-bottom:1rem; }
.gal__raster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:1rem; }
.gal__f{ margin:0; cursor:zoom-in; }
.gal__f img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r); }
.gal__f--breit{ grid-column:span 2; }
.gal__f--breit img{ aspect-ratio:800/220; }
.gal__f figcaption{ margin-top:.5rem; font-size:.88rem; color:var(--fg-2); }
@media (max-width: 560px){ .gal__f--breit{ grid-column:auto; } }
.lb img{ max-width:min(92vw, 800px) !important; }

/* Zutaten: Foto plus editoriale Zeilen */
.zutaten{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(2rem,5vw,4rem); align-items:start; }
.zutaten__foto{ position:sticky; top:calc(var(--head-h) + 1.5rem); margin:0; }
.zutaten__foto img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.zutaten__foto figcaption{ margin-top:.4rem; font-size:.78rem; color:var(--fg-3); }
@media (max-width: 860px){ .zutaten{ grid-template-columns:1fr; } .zutaten__foto{ position:static; } .zutaten__foto img{ aspect-ratio:16/9; } }
.split__klein img{ max-width:640px; width:100%; }
.split .lead + p,.split p + p{ margin-top:1rem; }
.einladung{ margin-top:1.2rem; padding:.8rem 1rem; border:1.5px dashed var(--line-2); border-radius:var(--r); color:var(--fg-2); font-size:.95rem; }

/* Steps als Hairline-Liste ohne Nummern */
.steps2{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 2.5rem; border-top:1.5px solid var(--fg); }
.step{ padding:1.4rem 0 0; }
.step .muted{ margin-top:.6rem; }
@media (max-width: 860px){ .steps2{ grid-template-columns:1fr; } .step{ padding:1.2rem 0; border-bottom:1px solid var(--line); } }

/* Notiz fuers Telefonat */
.notiz{ margin-top:1.4rem; }
.notiz__pruef{ margin:0; padding:.7rem 1rem; border-left:4px solid var(--fg-3); background:var(--bg-3); border-radius:var(--r); font-weight:500; }
.notiz__knoepfe{ display:flex; flex-wrap:wrap; gap:.7rem; }
.notiz__ok{ margin:0; font-weight:600; color:var(--akzent-text); }
.notiz__fuss{ margin:0; font-size:.9rem; color:var(--fg-3); }
.notiz__mehr{ display:block; margin-top:.4rem; }
.tel-gross{ display:inline-flex; align-items:center; gap:.7rem; padding:1.1rem 1.5rem; background:var(--akzent); color:var(--auf-akzent); border-radius:var(--r-btn); font-family:var(--fd); font-weight:600; font-size:clamp(1.25rem,2.4vw,1.6rem); transition:background-color .25s var(--ease); }
.tel-gross:hover{ background:var(--akzent-hover); }
.tel-gross svg{ width:1.3em; height:1.3em; }
.zeiten{ list-style:none; padding:0; display:grid; gap:.2rem; }
.zeiten li{ display:grid; }
.zeiten span{ color:var(--fg-2); }
.contact-card .h-sub{ margin-bottom:.4rem; }
.link-u{ font-weight:600; border-bottom:2px solid var(--akzent); }

/* FAQ */
.faq{ border-top:1.5px solid var(--fg); }
.faq__i{ border-bottom:1px solid var(--line); }
.faq__i summary{ list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:3.4rem; padding:.6rem 0; cursor:pointer; font-family:var(--fd); font-weight:600; font-size:1.15rem; }
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary svg{ width:1.1rem; height:1.1rem; flex:none; transition:transform .25s var(--ease); }
.faq__i[open] summary svg{ transform:rotate(180deg); }
.faq__i p{ padding:0 0 1.1rem; color:var(--fg-2); max-width:62ch; }
.notiz__knoepfe .btn{ flex:none; white-space:nowrap; }
.brand--foot .brand__name{ color:var(--invert-fg); }
.brand .wortmarke{ font-size:1.3rem; }
.notiz__knoepfe{ align-items:center; }