/* kern/css/basis.css */
/* M4V-Kern · Basis. Nur Bausteine, die jede Kundenseite braucht. Design kommt aus der Kundenschicht. */

/* Offene Punkte, nur in der Testumgebung ausgegeben */
.offen {
  display: inline-block;
  font: 600 0.7rem/1.3 system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b4a00;
  background: #fff4d6;
  border: 1px dashed #b58a1f;
  border-radius: 2px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet */
.formular-honig {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nur-screenreader {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite { display: none; }

/* Hinweis über der Vorschau einer Terminseite aus dem Pflegebereich */
.pflege-vorschau {
  position: relative;
  z-index: 50;
  margin: 0;
  padding: 12px 16px;
  font: 500 0.95rem/1.45 system-ui, sans-serif;
  color: #3d2a00;
  background: #fff4d6;
  border-bottom: 2px dashed #b58a1f;
  text-align: center;
}
.pflege-vorschau a { color: inherit; font-weight: 700; }

/* kunde/css/schriften.css */
/* Lebegern · Schriften lokal (Fontsource, SIL Open Font License 1.1). Keine Verbindung zu Google.
   Nur freigegebene Schnitte, je Schnitt latin und latin-ext. IM Fell English gibt es nur als latin-Subset, es enthält alle deutschen Zeichen. */
@font-face{font-family:"IM Fell English";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/im-fell-english-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/cormorant-garamond-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/cormorant-garamond-400-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-500-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("/assets/fonts/cormorant-garamond-500-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/jost-300-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/jost-300-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/jost-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/jost-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jost-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/jost-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Mynerve (Carolina Short, SIL OFL 1.1, google/fonts) · Handschrift für alle Akzente. Nur ein Schnitt (400).
   font-weight 400 600: derselbe Schnitt bedient auch 500/600, der Browser verfettet nicht künstlich.
   size-adjust 88 %: Wortbreite wie bisher, Mittellänge passt zur Cormorant */
@font-face{font-family:"Mynerve";font-style:normal;font-weight:400 600;font-display:swap;size-adjust:88%;src:url("/assets/fonts/mynerve-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Mynerve";font-style:normal;font-weight:400 600;font-display:swap;size-adjust:88%;src:url("/assets/fonts/mynerve-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* kunde/css/tokens.css */
/* Lebegern · Design-Tokens (Freigabe v8, 24.10.2026)
   Farben, Schriften, Abstände, Bewegung. Komponenten nutzen nur diese Variablen.
   *-rgb: Farbkanäle für Transparenzen, Verwendung: rgb(var(--ink-rgb) / .3) */

:root {
  /* Papier und Tinte */
  --paper:       #faf8f3;
  --paper-warm:  #f3eee5;
  --ink:         #211c15;
  --ink-soft:    #55493a;
  --muted:       #776a5d;   /* WCAG AA (v8: #97897a, nur 3,2:1) */
  --line:        #e3dccd;
  --line-dark:   rgb(var(--paper-rgb) / .14);

  /* Dunkel */
  --dark:        #1d1812;
  --dark-soft:   #2a231b;
  --dark-strip:  #161310;   /* Fußleiste */
  --dark-break:  #1b1612;   /* Feuer-Zwischenbild */
  --board-hell:  #2e3032;   /* Holzbackofen-Tafel */
  --board-dunkel:#212325;

  /* Gold und Goldbraun (kein Rot) */
  --accent:      #a8834b;   /* Messing-Gold, dekorativ */
  --accent-deep: #86653a;   /* Kicker, Akzentwörter */
  --accent-soft: rgb(var(--accent-rgb) / .12);
  --brand:       #8a6a3c;   /* CTA Goldbraun */
  --brand-deep:  #6a4f2a;   /* CTA Hover */
  --brand-soft:  rgb(var(--brand-rgb) / .12);
  --brand-glut:  #4e3a1f;   /* Glut-Verlauf, dunkelster Ton */
  --brand-hell:  #b08a4f;   /* Glut-Verlauf, hellster Ton */
  --bronze-tief: #5d4626;
  --bronze-mitte:#7a5c32;
  --gold-hell:   #dfb578;   /* Handschrift auf Dunkel */

  /* Formular-Erfolg */
  --ok-bg:       #eef2ea;
  --ok-linie:    #b8c6ac;
  --ok-text:     #33452a;

  /* Farbkanäle für Transparenzen */
  --paper-rgb:   250 248 243;
  --ink-rgb:     33 28 21;
  --dark-rgb:    29 24 18;
  --scrim-rgb:   24 19 13;   /* Abdunklung über Fotos */
  --shadow-rgb:  74 55 30;   /* Button-Schatten */
  --bronze-rgb:  93 70 38;
  --accent-rgb:  168 131 75;
  --brand-rgb:   138 106 60;
  --gold-hell-rgb: 223 181 120;
  --board-rgb:   35 37 39;
  --lightbox-rgb: 18 15 12;

  /* Schriften (lokal, siehe schriften.css) */
  --font-head:    "IM Fell English", Georgia, serif;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", system-ui, sans-serif;
  --font-hand:    "Mynerve", cursive;
  --font-script:  "Mynerve", cursive;

  /* Raster */
  --max-w:  1280px;
  --gutter: clamp(20px, 4.5vw, 60px);

  /* Abstandssystem (V8.2) */
  --sec-y:      clamp(72px, 8vw, 120px);   /* Kapitel */
  --sec-y-sm:   clamp(56px, 6vw, 84px);    /* Zwischenblöcke */
  --head-gap:   clamp(36px, 4.5vw, 60px);  /* Überschrift → Inhalt */
  --block-gap:  clamp(48px, 6vw, 88px);    /* Blöcke innerhalb eines Kapitels */

  /* Bewegung */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-duration: 1s;
  --reveal-distance: 40px;
}

@media (max-width: 960px) {
  :root {
    --sec-y:     clamp(64px, 9vw, 88px);
    --sec-y-sm:  clamp(48px, 7vw, 64px);
    --head-gap:  clamp(28px, 5vw, 44px);
    --block-gap: clamp(40px, 7vw, 64px);
  }
}

/* kunde/css/lebegern.css */
/* Lebegern · Design v8 (freigegeben 24.10.2026), übernommen in den M4V-Baukasten.
   Werte aus styles-v8.css, ungenutzte Regeln entfernt, Farben als Tokens (tokens.css).
   Ergänzungen für die PHP-Fassung stehen gesammelt am Ende (Abschnitt V9). */
/* ============================================
   LEBEGERN — v8 (echte Location-Fotos, Goldbraun statt Rot)
   Warm neutrals · gold accents · high-contrast
   serif + geometric sans · cinematic imagery
   ============================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; background: var(--dark-strip); }  /* Unterkante und Überscrollen bleiben dunkel wie die Abschlussleiste */

body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.08rem, 1.15vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-deep); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--ink); }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { position: relative; }

/* ===== Typografie-Bausteine ===== */
h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.08;
  text-wrap: balance;
}
h2 { font-size: clamp(2.4rem, 4.6vw, 3.9rem); letter-spacing: -0.01em; }
h2 em { font-style: italic; font-weight: 400; color: var(--accent-deep); }
h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }

p { text-wrap: pretty; }

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

/* Kicker — kleine Overline */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 26px;
}
.kicker::before {
  content: "";
  width: 44px; height: 1px;
  background: var(--accent);
}
.kicker.centered { justify-content: center; }
.kicker.centered::after {
  content: "";
  width: 44px; height: 1px;
  background: var(--accent);
}
.on-dark .kicker { color: var(--accent); }

/* Section-Head zentriert */
.section-head {
  max-width: 720px;
  margin: 0 auto clamp(50px, 7vw, 90px);
  text-align: center;
}
.section-head p { margin-top: 24px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 38px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Glut-Füllung: wächst diagonal von links unten hoch */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, var(--brand-deep), var(--brand) 55%, var(--brand-hell));
  transform: translateY(102%);
  transition: transform 0.5s var(--ease);
  z-index: -1;
}
/* Gold-Schimmer, der beim Hover einmal durchläuft */
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgb(var(--gold-hell-rgb) / 0.5), transparent);
  transform: skewX(-18deg);
  z-index: -1;
  transition: none;
}
.btn:hover {
  color: var(--paper);
  border-color: var(--brand-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgb(var(--shadow-rgb) / 0.32);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover::after { animation: btnShine 0.9s var(--ease) 0.25s 1; }
@keyframes btnShine {
  from { left: -40%; }
  to   { left: 130%; }
}
.btn.gold {
  background: var(--brand);
  border-color: var(--brand);
}
.btn.gold::before { background: linear-gradient(115deg, var(--brand-glut), var(--brand-deep) 55%, var(--brand)); }
.btn.gold:hover { border-color: var(--brand-glut); box-shadow: 0 16px 36px rgb(var(--shadow-rgb) / 0.38); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgb(var(--ink-rgb) / 0.35);
}
.btn.ghost:hover { color: var(--paper); border-color: var(--brand-deep); }
.btn.ghost.on-dark { color: var(--paper); border-color: rgb(var(--paper-rgb) / 0.4); }
.btn.ghost.on-dark:hover { color: var(--paper); border-color: var(--brand-deep); }

/* Text-Link mit Pfeil */
.textlink, .textseite-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 6px;
  transition: all 0.3s ease;
}
.textlink::after, .textseite-link::after { content: "→"; transition: transform 0.3s var(--ease); }
.textlink:hover, .textseite-link:hover { color: var(--accent-deep); }
.textlink:hover::after, .textseite-link:hover::after { transform: translateX(6px); }

/* GSAP steuert Bild-Parallax — CSS-Transitions auf transform würden ruckeln */
body.gsap-on .figure .media:not(.fader) img { transition: none; }

/* Fokus-Zustände (Accessibility) */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ===== Scroll Reveal ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--ease),
    transform var(--reveal-duration) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="left"]  { transform: translateX(calc(var(--reveal-distance) * -1)); }
[data-reveal="left"].revealed  { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(var(--reveal-distance)); }
[data-reveal="right"].revealed { transform: translateX(0); }

[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-stagger].revealed > * { opacity: 1; transform: translateY(0); }
[data-stagger].revealed > *:nth-child(1) { transition-delay: 0.02s; }
[data-stagger].revealed > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].revealed > *:nth-child(3) { transition-delay: 0.18s; }
[data-stagger].revealed > *:nth-child(4) { transition-delay: 0.26s; }
[data-stagger].revealed > *:nth-child(5) { transition-delay: 0.34s; }
[data-stagger].revealed > *:nth-child(6) { transition-delay: 0.42s; }
[data-stagger].revealed > *:nth-child(7) { transition-delay: 0.5s; }
[data-stagger].revealed > *:nth-child(8) { transition-delay: 0.58s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0;
  z-index: 50;
  background: rgb(var(--paper-rgb) / 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 30px rgb(var(--ink-rgb) / 0.05);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  height: 84px;
}
.brand { display: inline-flex; align-items: center; }
.brand-mark {
  height: 42px;
  display: flex; align-items: center;
  overflow: hidden;
}
.brand-mark img { height: 100%; width: auto; max-width: none; object-fit: contain; display: block; }

.nav-links {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  list-style: none;
}
.nav-links a {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-cta .phone {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
}
.nav-cta .btn { padding: 12px 26px; font-size: 0.74rem; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 9px 20px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ===== Hero — Vollbild-Kino ===== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 120px 0 0;
  overflow: visible;
  color: var(--paper);
}
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-bg img,
.hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 40%, rgb(var(--scrim-rgb) / 0.55) 100%),
    linear-gradient(to bottom, rgb(var(--scrim-rgb) / 0.55), rgb(var(--scrim-rgb) / 0.42) 45%, rgb(var(--scrim-rgb) / 0.68) 100%);
}
.hero-content { position: relative; z-index: 2; }
.hero .script-line {
  font-family: var(--font-script);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 600;
  color: var(--gold-hell);
  display: inline-block;
  transform: rotate(-2.5deg);
  text-shadow: 0 2px 24px rgb(var(--scrim-rgb) / 0.5);
}
.hero h1 {
  font-size: clamp(3.6rem, 9vw, 8.2rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.0;
  margin: 18px 0 0;
  color: var(--paper);
  text-shadow: 0 4px 40px rgb(var(--scrim-rgb) / 0.45);
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.hero h1 .line .inner { display: inline-block; }
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold-hell);
}
.hero .hero-sub {
  margin: 30px auto 0;
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.6;
  color: rgb(var(--paper-rgb) / 0.92);
  text-shadow: 0 2px 18px rgb(var(--scrim-rgb) / 0.5);
}
.hero .hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 42px;
  flex-wrap: wrap;
}
.hero .scroll-hint {
  margin-top: clamp(36px, 5vh, 60px);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.hero .scroll-hint .label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgb(var(--paper-rgb) / 0.75);
}
.hero .scroll-hint .track {
  width: 1px;
  height: 58px;
  background: rgb(var(--paper-rgb) / 0.25);
  position: relative;
  overflow: hidden;
}
.hero .scroll-hint .fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40%;
  background: var(--gold-hell);
  animation: hintDrop 2.2s ease-in-out infinite;
}
@keyframes hintDrop {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(150%); }
  100% { transform: translateY(150%); }
}

/* Meta-Karte am Hero-Fuß — halb auf dem Bild, halb im nächsten Abschnitt */

/* Entrance-Choreografie */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg img, .hero-bg video { animation: heroZoom 3s var(--ease) both; }
  @keyframes heroZoom {
    from { transform: scale(1.14); }
    to   { transform: scale(1.02); }
  }
  .hero .script-line { animation: heroFadeDown 1s var(--ease) 0.25s both; }
  @keyframes heroFadeDown {
    from { opacity: 0; transform: rotate(-2.5deg) translateY(-24px); }
    to   { opacity: 1; transform: rotate(-2.5deg) translateY(0); }
  }
  .hero h1 .line .inner { transform: translateY(118%); animation: heroLineUp 1.15s var(--ease) both; }
  .hero h1 .line:nth-child(1) .inner { animation-delay: 0.4s; }
  .hero h1 .line:nth-child(2) .inner { animation-delay: 0.55s; }
  .hero h1 .line:nth-child(3) .inner { animation-delay: 0.7s; }
  @keyframes heroLineUp {
    to { transform: translateY(0); }
  }
  .hero .hero-sub { animation: heroFadeUp 1s var(--ease) 1.15s both; }
  .hero .hero-buttons { animation: heroFadeUp 1s var(--ease) 1.35s both; }
    .hero .scroll-hint { animation: heroFadeUp 1s var(--ease) 1.95s both; }
  @keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ===== Intro / Über uns ===== */
.intro {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--paper);
}
.figure { position: relative; }
.figure .media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 2px;
}
.figure .media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.figure:hover .media img { transform: scale(1.045); }
.figure .fig-caption {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.figure .fig-caption em {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

/* ===== Split-Sektionen (Catering / Stodl) ===== */
.split-section {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--paper);
}
.split-section.warm {
  background: var(--paper-warm);
}
.split-section.warm .split .text {
  background: rgb(var(--paper-rgb) / 0.94);
  padding: clamp(30px, 4vw, 54px);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgb(var(--ink-rgb) / 0.12);
}
.split {
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}
.split .text .feature-list {
  list-style: none;
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.16rem;
  color: var(--ink);
}
.feature-list .li-icon {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--accent-deep);
}
.spanferkel .feature-list .li-icon { color: var(--accent); }
.split .btn-row { margin-top: 44px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ===== Spanferkel — Kreidetafel auf rustikalem Holz ===== */
.spanferkel {
  background: url("/assets/bilder/bretter-1800.webp") center / cover no-repeat;
  color: rgb(var(--paper-rgb) / 0.82);
  padding: clamp(70px, 9vw, 120px) var(--gutter);
  overflow: hidden;
}
.spanferkel .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 640px;
  max-width: var(--max-w);
  margin: 0 auto;
  background:
    radial-gradient(ellipse 90% 130% at 50% -30%, rgb(var(--accent-rgb) / 0.12), transparent 55%),
    linear-gradient(160deg, var(--board-hell), var(--board-dunkel));
  border: 2px solid var(--accent);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgb(var(--ink-rgb) / 0.3);
}
.spanferkel .media {
  position: relative;
  overflow: hidden;
  min-height: 420px;
}
.spanferkel .media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.spanferkel .media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 55%, rgb(var(--board-rgb) / 0.98) 100%);
}
.spanferkel .text {
  padding: clamp(70px, 8vw, 130px) var(--gutter);
  max-width: 640px;
  align-self: center;
}
.spanferkel h2 { color: var(--paper); }
.spanferkel h2 em { color: var(--accent); }
.spanferkel .lead { color: rgb(var(--paper-rgb) / 0.92); }
.spanferkel p + p { margin-top: 20px; }
.spanferkel .feature-list { border-top-color: var(--line-dark); margin-top: 36px; }
.spanferkel .feature-list li { border-bottom-color: var(--line-dark); color: var(--paper); }

/* ===== Parallax-Break — dunkle Insel ===== */
.parallax-break {
  position: relative;
  min-height: clamp(380px, 55vh, 560px);
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--paper);
  background:
    linear-gradient(rgb(var(--scrim-rgb) / 0.66), rgb(var(--scrim-rgb) / 0.72)),
    url("/assets/bilder/flammen-braten-1600.webp") center 30% / cover;
  padding: clamp(80px, 10vw, 130px) var(--gutter);
  overflow: hidden;
}
.parallax-break .script {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--gold-hell);
  text-shadow: 0 2px 20px rgb(var(--scrim-rgb) / 0.65);
  transform: rotate(-2deg);
  display: block;
  margin-bottom: 14px;
}
.parallax-break h2 {
  color: var(--paper);
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  max-width: 22ch;
  margin: 0 auto;
  text-shadow: 0 3px 30px rgb(var(--scrim-rgb) / 0.6);
}
.parallax-break h2 em { color: var(--gold-hell); }

/* ===== Termine ===== */
.dates {
  padding: clamp(100px, 13vw, 180px) 0;
  background: url("/assets/bilder/sack-neuses-1500.webp") center 30% / cover no-repeat;
  position: relative;
}
.dates .section-head {
  background: var(--paper);
  padding: clamp(30px, 4vw, 50px) clamp(24px, 4vw, 60px);
  border-radius: 8px;
  box-shadow: 0 30px 70px rgb(var(--ink-rgb) / 0.3);
  max-width: 760px;
}
.dates .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  max-width: 1000px;
  margin: 0 auto;
}
.date-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 40px 24px 32px;
  text-align: center;
  position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.date-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 24px 50px rgb(var(--ink-rgb) / 0.09);
}
.date-card .month {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.date-card .dow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  margin-top: 2px;
}
.date-card .day {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 4rem;
  line-height: 1;
  color: var(--ink);
  margin: 14px 0 4px;
}
.date-card .year {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--muted);
  font-size: 1.05rem;
}
.date-card .time {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.date-card.special::before {
  content: "Sonderzeit";
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 2px;
}
.dates .note {
  text-align: center;
  max-width: 640px;
  margin: 50px auto 0;
  background: var(--paper);
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: 0 30px 70px rgb(var(--ink-rgb) / 0.3);
}
.dates .note .btn { margin-top: 26px; }

/* ===== Lieferanten ===== */
.suppliers {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--paper);
}
.suppliers .list {
  max-width: 860px;
  margin: 0 auto;
  background: rgb(var(--paper-rgb) / 0.94);
  border-radius: 10px;
  padding: 10px clamp(20px, 3vw, 44px);
  box-shadow: 0 24px 60px rgb(var(--ink-rgb) / 0.1);
  border-top: none;
}
.supplier:last-child { border-bottom: none; }
.supplier {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 26px 10px;
  border-bottom: 1px solid var(--line);
  transition: background 0.35s ease, padding 0.35s ease;
}
.supplier:hover { background: var(--accent-soft); padding-left: 22px; }
.supplier .num {
  display: flex;
  align-items: center;
  color: var(--accent-deep);
}
.supplier .s-icon { width: 30px; height: 30px; }
.supplier h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--ink);
}
.supplier p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ===== FAQ ===== */
.faq {
  padding: clamp(100px, 13vw, 180px) 0;
  background: url("/assets/bilder/holz-textur-1800.webp") center / cover no-repeat;
}
.faq .layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
  background: rgb(var(--paper-rgb) / 0.97);
  border-radius: 12px;
  padding: clamp(30px, 4.5vw, 70px);
  box-shadow: 0 30px 70px rgb(var(--ink-rgb) / 0.3);
}
.faq aside { position: sticky; top: 120px; }
.faq .category-list {
  list-style: none;
  margin-top: 36px;
}
.faq .category-list button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 16px 2px;
  width: 100%;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.22rem;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.3s ease, padding-left 0.35s var(--ease);
}
.faq .category-list button .count {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.faq .category-list button:hover { color: var(--ink); }
.faq .category-list button.active {
  color: var(--accent-deep);
  font-style: italic;
  padding-left: 14px;
}
.faq .cat-group { display: none; }
.faq .cat-group.active { display: block; animation: fadeUp 0.6s var(--ease); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq .cat-group h3 {
  font-size: 1.9rem;
  margin-bottom: 20px;
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-family: var(--font-display);
  font-size: 1.24rem;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  transition: color 0.3s ease;
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary:hover { color: var(--accent-deep); }
.faq details summary .toggle {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 1.6rem;
  color: var(--accent-deep);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease);
}
.faq details[open] summary .toggle { transform: rotate(45deg); }
.faq .answer {
  padding: 0 0 26px;
  max-width: 62ch;
}
.faq .answer p + p { margin-top: 14px; }
.faq .answer ul { margin: 10px 0; padding-left: 20px; }

/* ===== Kontakt ===== */
.contact {
  padding: clamp(100px, 13vw, 180px) 0;
  background: var(--paper);
}
.contact .layout {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.contact-info { margin-top: 10px; }
.contact-info dt {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-top: 30px;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd {
  font-family: var(--font-display);
  font-size: 1.28rem;
  color: var(--ink);
  line-height: 1.5;
  margin-top: 8px;
}
.contact-info dd.small {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.7;
}
.contact .map-link { margin-top: 44px; }

.form {
  background: rgb(var(--paper-rgb) / 0.96);
  border: 1px solid var(--line);
  padding: clamp(34px, 4vw, 56px);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgb(var(--ink-rgb) / 0.1);
}
.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form .field { margin-bottom: 22px; }
.form label {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.3s ease;
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-bottom-color: var(--brand);
}
.form .check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 6px 0 26px;
}
.form .check input { width: auto; margin-top: 6px; accent-color: var(--brand); }
.form .check label {
  letter-spacing: 0; text-transform: none;
  font-size: 0.85rem; font-weight: 300;
  color: var(--ink-soft); margin: 0;
  line-height: 1.6;
}
.form .btn { width: 100%; justify-content: center; }

/* ===== Footer — V5: Papierkarte auf Holz ===== */
.site-footer {
  background: url("/assets/bilder/holz-textur-1800.webp") center / cover no-repeat;
  color: var(--ink-soft);
  padding: clamp(60px, 8vw, 100px) 0 0;
}
.site-footer .paper-card {
  background: var(--paper);
  border-radius: 10px 10px 0 0;
  padding: clamp(40px, 5vw, 60px) clamp(30px, 4.5vw, 64px) 36px;
  box-shadow: 0 -20px 60px rgb(var(--ink-rgb) / 0.3);
}
.site-footer .top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px);
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.site-footer .brand-mark { display: block; height: auto; overflow: visible; margin-bottom: 20px; }
.site-footer .brand-mark img { height: 54px; display: block; }
.site-footer .tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30ch;
}
.site-footer h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 20px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 10px; font-weight: 400; font-size: 0.95rem; font-family: var(--font-sans); color: var(--ink-soft); }
.site-footer ul a { color: var(--ink-soft); }
.site-footer ul a:hover { color: var(--brand); }
.site-footer .bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
  font-size: 0.82rem;
  font-weight: 400;
  font-family: var(--font-sans);
  letter-spacing: 0.06em;
  flex-wrap: wrap;
  color: var(--muted);
}
.site-footer .bottom a { color: var(--muted); }
.site-footer .bottom a:hover { color: var(--brand); }
.footer-strip {
  background: var(--dark-strip);
  border-top: 3px solid var(--accent);
  padding: 14px var(--gutter);
  text-align: center;
  font-family: var(--font-script);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--brand);
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 84px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 24px var(--gutter) 30px;
    gap: 16px;
    box-shadow: 0 30px 50px rgb(var(--ink-rgb) / 0.08);
  }
  .menu-toggle { display: block; }
  .nav-cta .phone { display: none; }
}

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; }
  .split .media-col { order: -1; }
  .spanferkel .inner { grid-template-columns: 1fr; }
  .spanferkel .media::after { background: linear-gradient(to bottom, transparent 55%, rgb(var(--board-rgb) / 0.98) 100%); }
  .dates .list { grid-template-columns: repeat(2, 1fr); }
  .faq .layout { grid-template-columns: 1fr; }
  .faq aside { position: static; }
  .contact .layout { grid-template-columns: 1fr; }
  .site-footer .top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .dates .list { grid-template-columns: 1fr; max-width: 340px; }
  .form .row { grid-template-columns: 1fr; gap: 0; }
  .supplier { grid-template-columns: 44px 1fr; }
  .supplier p { grid-column: 2; }
  .site-footer .top { grid-template-columns: 1fr; }
}

/* ============================================================
   V7 — Ergänzungen: Struktur & UX nach Redesign-Briefing
   ============================================================ */

/* Skip-Link */
.figure .media{position:relative}
.hero-bg::after{background:radial-gradient(ellipse 120% 92% at 50% 45%,rgb(var(--scrim-rgb) / .26) 0%,rgb(var(--scrim-rgb) / .74) 100%),linear-gradient(to bottom,rgb(var(--scrim-rgb) / .6),rgb(var(--scrim-rgb) / .48) 42%,rgb(var(--scrim-rgb) / .84) 100%)}
.skip{position:absolute;left:-9999px;top:0;z-index:400;background:var(--ink);color:var(--paper);padding:14px 22px;font-family:var(--font-sans);font-size:0.8rem;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:16px;top:16px}
section{scroll-margin-top:100px}

/* Bildplatz — Motiv noch zu liefern */

/* ===== Teaser — zwei Einstiege, über den Hero geschoben ===== */
.teasers{background:var(--paper);padding:0 0 clamp(90px,11vw,150px)}
.teasers .container{position:relative;z-index:6;margin-top:clamp(-90px,-7vw,-40px)}
.teaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.teaser{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,34vw,460px);padding:clamp(28px,3vw,44px);border-radius:4px;overflow:hidden;color:var(--paper);text-decoration:none;box-shadow:0 30px 70px rgb(var(--scrim-rgb) / .34);isolation:isolate}
.teaser .t-media{position:absolute;inset:0;z-index:-2;transition:transform 1.1s var(--ease)}
.teaser .t-media img{width:100%;height:100%;object-fit:cover}
.teaser::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgb(var(--scrim-rgb) / .9) 0%,rgb(var(--scrim-rgb) / .55) 46%,rgb(var(--scrim-rgb) / .34) 100%);transition:background .5s var(--ease)}
.teaser .t-kicker{font-family:var(--font-sans);font-size:0.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.teaser .t-kicker svg{width:20px;height:20px;flex-shrink:0}
.teaser h3{font-family:var(--font-head);font-size:clamp(1.9rem,2.8vw,2.7rem);color:var(--paper);font-weight:400}
.teaser p{margin-top:12px;font-family:var(--font-display);font-size:1.08rem;line-height:1.55;color:rgb(var(--paper-rgb) / .86);max-width:34ch}
.teaser .t-cta{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;margin-top:26px;font-family:var(--font-sans);font-size:0.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid var(--accent);padding-bottom:6px}
.teaser .t-cta .arw{transition:transform .38s var(--ease)}
@media (hover:hover){.teaser:hover .t-media{transform:scale(1.03)}.teaser:hover::after{background:linear-gradient(to top,rgb(var(--scrim-rgb) / .82) 0%,rgb(var(--scrim-rgb) / .4) 50%,rgb(var(--scrim-rgb) / .16) 100%)}.teaser:hover .t-cta .arw{transform:translateX(8px)}}
.teaser:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media (hover:none){.teaser:active{box-shadow:inset 0 0 0 2px var(--accent),0 30px 70px rgb(var(--scrim-rgb) / .34)}}
@media (prefers-reduced-motion:reduce){.teaser:hover .t-media{transform:none}}

/* ===== Ablauf im Raum ===== */

/* ===== Catering-Leistungen zweispaltig ===== */
.split .text .feature-list.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.split .text .feature-list.two-col li{font-size:1.06rem}

.faq .faq-group h3{font-size:clamp(1.5rem,2.1vw,1.9rem);padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:4px}
.faq details summary{min-height:56px}
.faq details summary:focus-visible{outline:2px solid var(--brand);outline-offset:-3px}

/* ===== Formular — Zustände ===== */
.form .err{display:none;font-family:var(--font-sans);font-size:0.82rem;font-weight:300;color:var(--brand);margin-top:8px}
.form .field.has-error .err,.form .check.has-error .err{display:block}
.form .field.has-error input,.form .field.has-error textarea,.form .field.has-error select{border-bottom-color:var(--brand);background:var(--brand-soft)}
.form .check.has-error label{color:var(--brand)}
.form input:hover,.form select:hover,.form textarea:hover{border-bottom-color:var(--accent)}
.formstate{display:none;gap:12px;padding:18px 20px;border-radius:4px;font-family:var(--font-sans);font-size:0.94rem;font-weight:300;line-height:1.5;margin-bottom:26px;border:1px solid}
.formstate[data-show="true"]{display:block}
.formstate strong{font-weight:500}
.formstate.ok{background:var(--ok-bg);border-color:var(--ok-linie);color:var(--ok-text)}
.formstate.fail{background:var(--brand-soft);border-color:rgb(var(--brand-rgb) / .4);color:var(--brand-deep)}
.form .btn[disabled]{opacity:.6;pointer-events:none}
.form .form-note{font-family:var(--font-sans);font-size:0.82rem;font-weight:300;color:var(--muted);margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* ===== Kontaktdaten ===== */
.contact-info dd a{border-bottom:1px solid var(--line)}
.contact-info dd a:hover{border-color:var(--brand)}

/* ===== Mobile Conversion-Leiste ===== */

/* ===== Responsive-Ergänzungen ===== */
@media (max-width:1080px){
  .teasers .container{margin-top:clamp(-60px,-5vw,-30px)}
}
@media (max-width:960px){
  .figure .media{aspect-ratio:3/2}
  .teaser-grid{grid-template-columns:1fr}
  .split .text .feature-list.two-col{grid-template-columns:1fr}
}
@media (max-width:720px){
  .teasers .container{margin-top:-30px}
  .teaser{min-height:340px}
}

/* ============================================================
   V8 — echte Fotos, Goldbraun, Anlässe im Stodl, Feuer-Zwischenbild
   ============================================================ */
.footer-strip{color:var(--gold-hell)}
.faq{background:var(--paper-warm)}
.faq::before{display:none}
.faq .layout{background:var(--paper);box-shadow:0 24px 60px rgb(var(--ink-rgb) / .08);border:1px solid var(--line)}
.site-footer{background-image:url("/assets/bilder/wagenrad-1500.webp");background-size:cover;background-position:center 40%}
.site-footer::before{background:linear-gradient(rgb(var(--scrim-rgb) / .38),rgb(var(--scrim-rgb) / .55))}
.hero{overflow:hidden}
html,body{overflow-x:clip}
.nav-cta .btn{white-space:nowrap}
.hero-bg img{object-position:center 55%}
.hero-bg::after{background:radial-gradient(ellipse 120% 92% at 50% 45%,rgb(var(--scrim-rgb) / .22) 0%,rgb(var(--scrim-rgb) / .72) 100%),linear-gradient(to bottom,rgb(var(--scrim-rgb) / .58),rgb(var(--scrim-rgb) / .42) 42%,rgb(var(--scrim-rgb) / .86) 100%)}

/* Teaser mit echten Motiven */
.teaser .t-media img{transition:transform 1.1s var(--ease)}
.teaser.t-catering .t-media img{object-position:center 45%}
.teaser::after{background:linear-gradient(to top,rgb(var(--scrim-rgb) / .9) 0%,rgb(var(--scrim-rgb) / .5) 46%,rgb(var(--scrim-rgb) / .22) 100%)}

/* Holz-Sektionen: Textur ruhiger, kein Braun-Overkill */
.spanferkel,.faq,.site-footer{background-size:cover;background-position:center}
.faq::before,.site-footer::before{content:"";position:absolute;inset:0;background:linear-gradient(rgb(var(--paper-rgb) / .06),rgb(var(--ink-rgb) / .08));pointer-events:none}
.faq,.site-footer{position:relative}
.faq>*,.site-footer>*{position:relative}

/* Anlässe im Stodl-Kapitel */
.occ-strip{margin-top:clamp(60px,7vw,100px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.occ-strip .occ-text h3{font-size:clamp(1.9rem,3vw,2.7rem)}
.occ-strip .occ-text h3 em{color:var(--accent-deep)}
.occ-strip .occ-text>p{margin-top:22px}
.occ-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 0;font-family:var(--font-head);font-size:clamp(1.15rem,1.5vw,1.4rem);color:var(--ink)}
.occ-list li{position:relative;padding-right:22px;margin-right:6px;white-space:nowrap}
.occ-list{row-gap:14px}
.occ-list li::after{content:"·";position:absolute;right:4px;color:var(--accent);font-family:var(--font-display)}
.occ-list li:last-child::after{display:none}
.occ-strip .btn-row{margin-top:36px}
.occ-pics{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.occ-pics img{width:100%;height:100%;object-fit:cover;display:block}

/* Feuer-Zwischenbild als Video */
.parallax-break{background:var(--dark-break);min-height:clamp(420px,62vh,640px)}
.parallax-break video{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;z-index:0}
.parallax-break::before{content:"";position:absolute;inset:0;background:linear-gradient(rgb(var(--scrim-rgb) / .5),rgb(var(--scrim-rgb) / .62));z-index:1}
.parallax-break>*{position:relative;z-index:2}

/* Galerie: zehn Motive */

/* Wappen-Akzent im Footer */

@media (max-width:960px){
  .occ-strip{grid-template-columns:1fr}
  }
@media (max-width:720px){
  .occ-pics{gap:12px}
}

/* ============================================================
   V8.1 — Kommentare: Hero-Übergang, Anlass-Galerie, Lightbox, FAQ-Tabs
   ============================================================ */
/* Hero -> Teaser: Luft und Überleitung statt Überlappung */
.teasers{padding:clamp(90px,11vw,150px) 0}
.teasers .container{margin-top:0}
.teasers .intro{max-width:760px;margin:0 auto clamp(44px,5.5vw,76px);text-align:center}
.teasers .intro h2{margin-top:18px}
.teasers .intro p{margin:22px auto 0;max-width:56ch;color:var(--ink-soft)}
.hero-bg img{object-position:center 60%}

/* Bronze-Button — farbig, sichtbar auf Papier */
.btn.bronze{background:var(--accent-deep);color:var(--paper);border-color:var(--accent-deep)}
.btn.bronze::before{background:linear-gradient(115deg,var(--bronze-tief),var(--bronze-mitte) 55%,var(--accent))}
.btn.bronze:hover{color:var(--paper);border-color:var(--bronze-tief);box-shadow:0 16px 36px rgb(var(--bronze-rgb) / .35)}
.btn.bronze.outline{background:transparent;color:var(--accent-deep);border:2px solid var(--accent-deep)}
.btn.bronze.outline:hover{color:var(--paper)}

/* Anlässe: vier Fotos, ohne Beschriftung */
.occ-pics{grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;align-content:start}
.occ-pics .pic{appearance:none;border:0;padding:0;margin:0;background:none;cursor:zoom-in;position:relative;overflow:hidden;border-radius:4px;box-shadow:0 22px 54px rgb(var(--ink-rgb) / .16);aspect-ratio:4/3;display:block}
.occ-pics .pic:nth-child(2){margin-top:clamp(20px,3vw,44px)}
.occ-pics .pic:nth-child(3){margin-top:calc(-1 * clamp(20px,3vw,44px))}
.occ-pics .pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
.occ-pics .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgb(var(--scrim-rgb) / .28),transparent 50%);opacity:0;transition:opacity .5s ease}
.occ-pics .pic:hover img{transform:scale(1.04)}
.occ-pics .pic:hover::after{opacity:1}
.occ-pics .pic:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.occ-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.occ-actions .btn{flex:1 1 auto;justify-content:center;text-align:center}

/* FAQ: Kategorien links sticky, Panels rechts */
.faq .layout{grid-template-columns:minmax(280px,340px) 1fr}
.faq aside .kicker{margin-bottom:14px}
.faq .category-list button{font-size:1.18rem;padding:18px 4px;border-left:2px solid transparent;transition:color .3s ease,padding-left .35s var(--ease),border-color .3s ease}
.faq .category-list button:hover{color:var(--accent-deep);padding-left:10px}
.faq .category-list button.active{border-left-color:var(--accent);padding-left:14px;font-style:italic;color:var(--accent-deep)}
.faq .category-list button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faq .cat-group h3{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--ink)}

@media (max-width:960px){
  .faq .layout{grid-template-columns:1fr}
  .faq aside{position:static}
  .faq .category-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
  .faq .category-list li{flex:1 1 auto}
  .faq .category-list button{border:1px solid var(--line);border-radius:3px;padding:12px 14px;font-size:1rem;justify-content:center;gap:10px}
  .faq .category-list button.active{border-color:var(--accent-deep);background:var(--accent-soft);padding-left:14px}
  .faq .category-list button .count{display:none}
  .occ-pics .pic:nth-child(2),.occ-pics .pic:nth-child(3){margin-top:0}
}

/* Galerie-Kacheln öffnen die Lightbox */

/* Anlässe: drei Thumbnails in einer Reihe */
.occ-pics{grid-template-columns:repeat(3,1fr);gap:14px}
.occ-pics .pic{aspect-ratio:3/4}
.occ-pics .pic:nth-child(2){margin-top:clamp(18px,2.6vw,40px)}
.occ-pics .pic:nth-child(3){margin-top:0}
.occ-pics .pic[hidden]{display:none}
@media (max-width:960px){.occ-pics .pic:nth-child(2){margin-top:0}}
@media (max-width:560px){.occ-pics{grid-template-columns:1fr 1fr}.occ-pics .pic{aspect-ratio:4/3}}

/* Anlässe: Eingangsfoto groß und breit, zwei kleine daneben */
.occ-pics{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;gap:14px}
.occ-pics .pic-lead{grid-column:1/-1;aspect-ratio:16/9}
.occ-pics .pic-lead img{object-position:center 45%}
.occ-pics .pic:nth-child(2),.occ-pics .pic:nth-child(3){margin-top:0;aspect-ratio:4/3}
@media (max-width:560px){.occ-pics .pic-lead{aspect-ratio:4/3}}

/* Fade-Slider (Catering) */
.fader{position:relative}
.fader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity 2.6s cubic-bezier(.4,0,.2,1),transform 7s linear;will-change:opacity,transform}
.fader img.is-active{opacity:1;transform:scale(1)}
.fader-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:3}
.fader-dots span{width:7px;height:7px;border-radius:50%;background:rgb(var(--paper-rgb) / .45);transition:background .4s ease,transform .4s ease}
.fader-dots span.on{background:var(--accent);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.fader img{transition:none}}

/* Fader: Hover-Zoom des Figure-Containers deaktivieren, Fade hat Vorrang */
.figure:hover .media.fader img{transform:scale(1)}
.figure:hover .media.fader img:not(.is-active){transform:scale(1.04)}
.fader img{transition:opacity 2.8s cubic-bezier(.45,0,.2,1),transform 9s linear!important}

/* Termine: Foto-Hintergrund mit Scrim */
.dates::before{content:"";position:absolute;inset:0;background:linear-gradient(rgb(var(--scrim-rgb) / .32),rgb(var(--scrim-rgb) / .5));pointer-events:none}
.dates>*{position:relative}
.date-card.special::before{background:var(--accent-deep)}

/* ============================================================
   V8.2 — Abstandssystem (Premium-Rhythmus)
   Kapitel: --sec-y · Zwischenblöcke: --sec-y-sm · Head→Inhalt: --head-gap
   ============================================================ */

/* Kapitel */
.split-section,.suppliers,.contact,.faq,.dates{padding:var(--sec-y) 0}
.teasers{padding:clamp(64px,7vw,96px) 0 var(--sec-y)}
/* Zwischenblöcke */
.spanferkel{padding-top:var(--sec-y-sm);padding-bottom:var(--sec-y-sm)}
.site-footer{padding-top:var(--sec-y-sm)}
.parallax-break{min-height:clamp(360px,50vh,520px);padding:var(--sec-y-sm) var(--gutter)}

/* Head → Inhalt */
.section-head{margin-bottom:var(--head-gap)}
.section-head p{margin-top:18px}
.teasers .intro{margin-bottom:var(--head-gap)}
.dates .section-head{margin-bottom:clamp(32px,4vw,48px);padding:clamp(28px,3.2vw,40px) clamp(24px,3.5vw,48px)}
.dates .note{margin-top:clamp(32px,4vw,48px);padding:clamp(24px,3vw,36px) clamp(24px,3.5vw,48px)}
.suppliers .section-head,.contact .section-head{margin-bottom:var(--head-gap)}

/* Blöcke innerhalb des Stodl-Kapitels */
.occ-strip{margin-top:var(--block-gap);padding-top:var(--block-gap);border-top:1px solid var(--line)}

/* Kicker: nie umbrechen */
.kicker{white-space:nowrap}
.kicker::before,.kicker.centered::after{flex-shrink:0}

/* Lieferanten: dichter */
.supplier{padding:20px 10px}
.suppliers .list{padding:6px clamp(20px,3vw,44px)}

/* Footer: kompakter */
.site-footer .paper-card{padding-top:clamp(36px,4vw,52px)}
.site-footer .top{gap:clamp(28px,4vw,56px)}
.site-footer .top{padding-bottom:clamp(28px,3.5vw,40px)}
.site-footer .bottom{padding-top:22px}
.site-footer .top{row-gap:clamp(24px,3vw,36px)}
.site-footer ul li{margin-bottom:8px}

/* Formular-Karte etwas dichter */
.form{padding:clamp(28px,3.2vw,40px)}

@media (max-width:960px){
    .teaser{min-height:320px}
  .split{gap:clamp(28px,5vw,44px)}
}

/* ============================================================
   V8.3 — Fakten-Zeile im Teaser-Block, kompakter Ablauf
   ============================================================ */
.facts-row{list-style:none;margin:clamp(40px,5vw,64px) auto 0;padding:clamp(22px,2.6vw,30px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,40px);border-top:1px solid var(--line)}
.facts-row li{position:relative;text-align:center}
.facts-row li+li::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.25vw,20px));top:10%;bottom:10%;width:1px;background:var(--line)}
.facts-row .t-k{font-family:var(--font-head);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;color:var(--ink);display:block}
.facts-row .t-v{margin-top:8px;font-family:var(--font-sans);font-size:0.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-deep);display:block}


@media (max-width:960px){
  .facts-row{row-gap:28px}
}
@media (max-width:560px){
  .facts-row{grid-template-columns:1fr;gap:26px}
  .facts-row li+li::before{left:50%;top:-13px;bottom:auto;width:40px;height:1px;transform:translateX(-50%)}
  .facts-row .t-k{font-size:1.4rem}
  .facts-row .t-v{font-size:0.6rem;letter-spacing:.16em}
}

/* Fakten-Zeile zwischen Intro und Teasern */
.facts-row{margin:0 auto clamp(40px,5vw,64px);padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--line)}
.teasers .intro{margin-bottom:clamp(28px,3.5vw,44px)}

/* ============================================================
   V8.4 — Handschrift-Akzent (seit V9.6 einheitlich Mynerve)
   ============================================================ */
h1 em,h2 em,h3 em,.hero h1 em{font-family:var(--font-hand);font-style:normal;font-weight:400;font-size:.9em;line-height:.9;letter-spacing:0}
.date-card .day{font-family:var(--font-hand);font-weight:400;line-height:1;transform:rotate(-3deg);display:inline-block}

/* ============================================================
   V9 — PHP-Umsetzung im M4V-Baukasten (24.10.2026)
   Nur Ergänzungen, die Freigabe v8 bleibt unverändert.
   ============================================================ */

/* Ersatz für Inline-Styles der Referenz (CSP ohne unsafe-inline) */
.abstand-oben-28{margin-top:28px}
.abstand-oben-26{margin-top:26px}
.abstand-oben-20{margin-top:20px}
.bildfokus-58{object-position:center 58%}

/* Header: Telefonnummer bricht nicht um */
.nav-cta .phone{white-space:nowrap}
/* Mobil: Logo und Menü-Knopf; Anrufen und Besichtigung stehen unten im Mobilmenü */
@media (max-width:720px){
  .nav-cta{display:none}
}

/* Mobile Leiste: CTA-Text vollständig (CTA-Familie) */

/* Lightbox als <dialog>: Werte wie v8.1 */
dialog.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:40px;z-index:500;color:inherit;place-items:center;background:rgb(var(--lightbox-rgb) / .94);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:hidden}
dialog.lightbox[open]{display:grid;animation:lbFade .4s var(--ease)}
dialog.lightbox::backdrop{background:transparent}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.lightbox .lb-stage{margin:0;max-width:min(1400px,92vw);position:relative;padding:0;background:none;border-radius:4px;box-shadow:0 40px 100px rgb(0 0 0 / .6)}
.lightbox .lb-stage img{display:block;max-width:min(1400px,92vw,100vw - 80px);max-height:min(86vh,100vh - 80px);width:auto;height:auto;border-radius:4px}
.lightbox button{appearance:none;background:rgb(var(--scrim-rgb) / .6);border:1px solid rgb(var(--gold-hell-rgb) / .45);color:var(--gold-hell);font-family:var(--font-head);cursor:pointer;display:grid;place-items:center;transition:background .3s ease,color .3s ease,border-color .3s ease}
.lightbox button:hover{background:var(--accent-deep);color:var(--paper);border-color:var(--accent)}
.lightbox .lb-close{position:absolute;top:22px;right:22px;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;background:transparent;color:rgb(var(--paper-rgb) / .8);border:1px solid rgb(var(--paper-rgb) / .35);padding:10px 22px;font-family:var(--font-sans);letter-spacing:.22em;text-transform:uppercase;transition:all .3s ease}
.lightbox .lb-close:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.lightbox .lb-prev,.lightbox .lb-next{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;font-size:2.4rem;line-height:1;padding-bottom:6px}
.lightbox .lb-prev{left:22px}
.lightbox .lb-next{right:22px}
.lightbox .lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--font-sans);font-size:0.72rem;letter-spacing:.28em;color:var(--gold-hell)}
body.lb-open{overflow:hidden}
@media (max-width:720px){
  dialog.lightbox{padding:16px}
  .lightbox .lb-stage img{max-width:calc(100vw - 32px);max-height:calc(100vh - 180px)}
  .lightbox .lb-prev,.lightbox .lb-next{width:46px;height:46px;top:auto;bottom:18px;transform:none}
  .lightbox .lb-prev{left:18px}
  .lightbox .lb-next{right:18px}
  .lightbox .lb-count{bottom:30px}
}

/* Termine aus dem News-Modul: Karte als Link zur Termin-Unterseite */
.date-card .date-link{display:block;color:inherit}
.date-card .date-link::after{content:"";position:absolute;inset:0}
.date-card:focus-within{border-color:var(--accent)}
.date-card .date-link:focus-visible{outline:none}
.date-card:has(.date-link:focus-visible){outline:2px solid var(--brand);outline-offset:3px}
.date-card.abgesagt::before{content:"Abgesagt";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink-soft);color:var(--paper);font-family:var(--font-sans);font-size:0.66rem;letter-spacing:.24em;text-transform:uppercase;padding:6px 16px;border-radius:2px}
.date-card.abgesagt .day{text-decoration:line-through;text-decoration-thickness:2px}
/* Keine Termine: Besichtigung persönlich vereinbaren */
.dates .section-head .btn{margin-top:26px}

/* Hintergrundfotos mobil in kleiner Variante */
@media (max-width:720px){
  .spanferkel{background-image:url("/assets/bilder/bretter-800.webp")}
  .dates{background-image:url("/assets/bilder/sack-neuses-800.webp")}
  .site-footer{background-image:url("/assets/bilder/wagenrad-800.webp")}
}

/* Textseiten: Impressum, Datenschutz, Termin, Fehlerseiten */
.textseite{padding:var(--sec-y) 0;background:var(--paper)}
.textseite-inhalt{max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.textseite h1{font-size:clamp(2.4rem,4.6vw,3.9rem);margin-bottom:var(--head-gap)}
.textseite h2{font-size:clamp(1.4rem,2vw,1.8rem);margin:44px 0 14px}
.textseite p+p,.textseite p+ul,.textseite ul+p{margin-top:16px}
.textseite ul{padding-left:22px}
.textseite a:not(.btn):not(.textseite-link){border-bottom:1px solid var(--line)}
.textseite .textseite-link{margin-top:36px}
.termin-seite .date-card{max-width:300px;margin:0 0 var(--head-gap)}
.termin-seite .date-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.termin-seite .termin-text{color:var(--ink-soft)}
.termin-seite .termin-text+p{margin-top:16px}
.termin-seite .date-card .time+.time{margin-top:0;padding-top:6px;border-top:0}
.termin-seite .btn-row{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
.termin-abgesagt{padding:16px 20px;border:1px solid var(--line);background:var(--paper-warm);font-family:var(--font-sans);font-weight:300;margin-bottom:28px}

/* Bewegung reduziert: keine Translation oder Skalierung, nur Farb- und Konturwechsel */
@media (prefers-reduced-motion:reduce){
  .btn:hover,.date-card:hover{transform:none}
  .btn:hover::after{animation:none}
  .btn::before{transition:none}
  .figure:hover .media img,.occ-pics .pic:hover img,.teaser:hover .t-media{transform:none}
  .hero .scroll-hint .fill{animation:none;transform:none}
  .faq .cat-group.active{animation:none}
  .textlink:hover::after,.textseite-link:hover::after,.teaser:hover .t-cta .arw{transform:none}
  .supplier,.faq .category-list button{transition:color .3s ease,background .35s ease,border-color .3s ease}
  dialog.lightbox[open]{animation:none}
}

/* Touch-Ziele mindestens 44 × 44 px */
.brand{min-height:44px}
@media (max-width:1080px){
  .nav-links.open{gap:2px}
  .nav-links.open a{display:block;padding:12px 0}
  .menu-toggle{min-height:44px}
}
@media (pointer:coarse){
  .contact .map-link{margin-top:29px}
  .contact .map-link .textlink{padding-top:15px}
  .site-footer ul li{margin-bottom:0;min-height:44px;display:flex;align-items:center}
  .site-footer ul a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
}
/* Knopf im Termin-Ersatzblock bleibt mobil einzeilig */
@media (max-width:560px){
  .dates .section-head .btn,.dates .note .btn{padding-left:22px;padding-right:22px;letter-spacing:.16em}
}

/* Ohne JavaScript: alle Inhalte sichtbar, FAQ-Gruppen untereinander */
@media (scripting:none){
  [data-reveal],[data-stagger]>*{opacity:1;transform:none}
  .faq .category-list{display:none}
  .faq .cat-group{display:block}
  .faq .cat-group+.cat-group{margin-top:48px}
  .menu-toggle{display:none}
}

/* Link im Einwilligungstext: zusätzlich unterstrichen (WCAG 1.4.1) */
.form .check label a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:960px){
  .faq .category-list button.active{color:var(--brand-deep)}  /* 4,45:1 -> AA */
}

/* Impressum: Vermerk der Agentur unter dezentem Trennstrich */
.impressum-trenner{border:0;border-top:1px solid var(--line);margin:clamp(48px,6vw,72px) 0 28px}
.impressum-gestaltung{display:flex;flex-direction:column;gap:10px}
.impressum-gestaltung-text{font-family:var(--font-sans);font-size:0.72rem;letter-spacing:.24em;text-transform:uppercase;line-height:1.7;color:var(--muted)}
.textseite .impressum-gestaltung a{align-self:flex-start;font-family:var(--font-display);font-size:1.15rem;color:var(--accent-deep);border-bottom:1px solid var(--accent);padding:10px 0 2px;transition:color .3s ease,border-color .3s ease}
.textseite .impressum-gestaltung a:hover{color:var(--ink);border-color:var(--ink)}

/* Rechtstexte: Zwischenüberschriften und Versalabsätze */
.textseite h3{font-size:clamp(1.2rem,1.6vw,1.45rem);margin:32px 0 10px}
.textseite h4{font-family:var(--font-sans);font-weight:500;font-size:0.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:24px 0 8px}
.textseite h2+h3,.textseite h3+h4{margin-top:14px}
.textseite p.caps{font-size:0.92em;letter-spacing:.02em;line-height:1.6}
.textseite p,.textseite li{overflow-wrap:break-word}

/* V9.1 · neue Fotos vom 1. August 2026 */
/* Anlässe: Traubogen als großes Bild, Bogen und Stuhlschilder im Ausschnitt */
.occ-pics .pic-lead img{object-position:44% 100%}
/* Regionale Partner: Balkenmaserung als zurückhaltendes Band, oben und unten in Papier auslaufend */
.suppliers{position:relative;isolation:isolate;background:var(--paper)}
.suppliers::before{content:"";position:absolute;inset:0;z-index:-1;background:url("/assets/bilder/balken-maserung-1800.webp") center 52% / cover no-repeat;opacity:.34;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 30%,#000 70%,transparent 100%)}
.suppliers .list{background:rgb(var(--paper-rgb) / .97)}
@media (max-width:720px){
  .suppliers::before{background-image:url("/assets/bilder/balken-maserung-800.webp")}
}
/* Hero-Begrüßung: groß und auf allen Geräten zweizeilig („Herzlich willkommen“ / „bei Lebegern“) */
.hero .script-line{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05}
/* Damit die Knöpfe auf Laptop-Bildschirmen im ersten Blick bleiben: Headline zusätzlich an der Bildschirmhöhe begrenzen */
.hero h1{font-size:min(clamp(3.6rem,9vw,8.2rem),12.5svh)}
.hero{padding-top:104px}
/* Lightbox-Knöpfe: Symbole als SVG, damit Kreuz und Pfeile exakt mittig im Kreis sitzen */
.lightbox .lb-close,.lightbox .lb-prev,.lightbox .lb-next{padding:0;letter-spacing:0}
.lightbox button svg{width:24px;height:24px;display:block}
/* Besichtigung / Termine: Sattel und Kuhglocke am Balken als Hintergrund (Shooting Nr. 37) */
.dates{background-image:url("/assets/bilder/sattel-glocke-2000.webp");background-position:center 45%}
@media (max-width:720px){.dates{background-image:url("/assets/bilder/sattel-glocke-800.webp");background-position:30% 45%}}
/* Icons insgesamt größer: Listen, Partner, Teaser */
.feature-list .li-icon{width:32px;height:32px}
.supplier .s-icon{width:38px;height:38px}
.teaser .t-kicker svg{width:24px;height:24px}
/* Mobilmenü: fährt als Vorhang von oben auf, Einträge folgen gestaffelt; Knopf wechselt zu „Schließen“ */
.menu-toggle{display:none;place-items:center}
.menu-toggle>span{grid-area:1/1;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.menu-toggle .mt-zu{opacity:0;transform:translateY(6px);visibility:hidden}
.menu-toggle[aria-expanded="true"] .mt-auf{opacity:0;transform:translateY(-6px);visibility:hidden}
.menu-toggle[aria-expanded="true"] .mt-zu{opacity:1;transform:none;visibility:visible}
.menu-toggle[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:1080px){
  .menu-toggle{display:grid}
  .nav-links,.nav-links.open{display:flex;flex-direction:column;position:absolute;top:84px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px var(--gutter) 28px;gap:2px;box-shadow:0 30px 50px rgb(var(--ink-rgb) / .08)}
  .nav-links{visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease),visibility 0s linear .5s}
  .nav-links.open{visibility:visible;clip-path:inset(0 0 -60px 0);transition:clip-path .65s var(--ease)}
  .nav-links li{opacity:0;transform:translateY(-10px);transition:opacity .3s ease,transform .3s ease}
  .nav-links.open li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease)}
  .nav-links.open li:nth-child(1){transition-delay:.12s}
  .nav-links.open li:nth-child(2){transition-delay:.18s}
  .nav-links.open li:nth-child(3){transition-delay:.24s}
  .nav-links.open li:nth-child(4){transition-delay:.30s}
  .nav-links li+li{border-top:1px solid var(--line)}
  .nav-links a{display:block;padding:14px 0;font-size:.86rem}
  .nav-links a::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-links,.nav-links.open,.nav-links li,.nav-links.open li,.menu-toggle>span{transition:none}
}
@media (scripting:none){.menu-toggle{display:none}}
/* Hero-Begrüßung: gezeichnete Handschrift (kunde/css/handschrift.css), die Textzeile selbst blendet nicht mehr ein */
@media (prefers-reduced-motion:no-preference){.hero .script-line{animation:none}}
/* Formular als Sprungziel: unter dem festen Kopf landen */
#anfrage{scroll-margin-top:110px}
/* Teaser: Kicker hell statt Gold, größer und mit weichem Schatten – auf dem Foto sicher lesbar */
.teaser .t-kicker{color:var(--paper);font-size:.8rem;font-weight:500;letter-spacing:.26em;text-shadow:0 1px 3px rgb(var(--scrim-rgb) / .7),0 0 18px rgb(var(--scrim-rgb) / .55)}
.teaser .t-kicker svg{color:var(--gold-hell);filter:drop-shadow(0 1px 3px rgb(var(--scrim-rgb) / .7))}
/* Scroll-Verankerung des Browsers aus: sie verschob die Seite nahe FAQ/Kontakt nachträglich um mehrere hundert Pixel.
   Alle Bilder reservieren ihren Platz (Breite/Höhe), daher ohne Nachteil */
html{overflow-anchor:none}
/* Wischgesten: waagerecht gehört der Seite (Blättern), senkrecht dem Browser (Scrollen) */
.fader{touch-action:pan-y}
/* Lightbox: Ein-Finger-Gesten gehören der Galerie (blättern, nach unten wegwischen), Zwei-Finger-Zoom bleibt erlaubt */
dialog.lightbox{touch-action:pinch-zoom}
dialog.lightbox .lb-stage{will-change:transform}
.fader.fader-hand img{transition:opacity .55s ease,transform .55s ease!important}
/* Mobilmenü unten: Anrufen (hell, umrahmt) und Besichtigung anfragen (Gold) statt fester Leiste */
.nav-links .nav-aktionen{display:none}
@media (max-width:1080px){
  .nav-links .nav-aktionen{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;border-top:0}
  .nav-links .nav-aktionen a{display:flex;align-items:center;justify-content:center;min-height:50px;padding:12px 14px;font-size:.74rem;letter-spacing:.16em;text-align:center}
  .nav-links .nav-aktionen .nav-anrufen{border:1px solid var(--ink);color:var(--ink);background:transparent;border-radius:2px}
  .nav-links .nav-aktionen .btn{color:var(--paper)}
  .nav-links.open li.nav-aktionen{transition-delay:.3s}
}
/* FAQ-Kategorien mobil: feste Spalte, aktive Kategorie nur farbig – nichts verschiebt sich */
@media (max-width:960px){
  .faq .category-list{display:grid;grid-template-columns:1fr;gap:8px}
  .faq .category-list button,.faq .category-list button:hover,.faq .category-list button.active{width:100%;padding-left:14px;padding-right:14px;font-style:normal}
}
/* Hero mobil: Inhalt beginnt höher, beide Knöpfe im ersten Blick */
@media (max-width:720px){
  .hero{padding-top:18px;padding-bottom:24px;justify-content:flex-start;min-height:calc(100svh - 84px)}
  .hero .hero-content{padding-top:clamp(4px,2svh,24px)}
  .hero h1{margin-top:8px}
  .hero .hero-sub{margin-top:20px;font-size:1.12rem;line-height:1.5}
  .hero .hero-buttons{margin-top:22px;gap:10px}
  .hero .scroll-hint{display:none}
}
/* Nach-oben-Pfeil rechts unten: dezent, blendet langsam ein */
.nach-oben{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--accent-deep);background:rgb(var(--paper-rgb) / .88);border:1px solid rgb(var(--accent-rgb) / .45);box-shadow:0 10px 28px rgb(var(--ink-rgb) / .16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity 1.1s ease,transform 1.1s var(--ease),visibility 0s linear 1.1s,background .3s ease,color .3s ease}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none;transition:opacity 1.1s ease,transform 1.1s var(--ease),background .3s ease,color .3s ease}
.nach-oben svg{width:22px;height:22px}
.nach-oben:hover{background:var(--accent-deep);color:var(--paper)}
.nach-oben:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.nach-oben,.nach-oben.sichtbar{transition:none;transform:none}}
body.lb-open .nach-oben{display:none}
/* Split-Spalten dürfen schrumpfen: sonst drückt eine lange Zeile (Kicker) die Karte über den rechten Rand */
.split>*{min-width:0}
@media (max-width:560px){.kicker{letter-spacing:.24em;gap:12px}.kicker::before{width:32px}}
/* Typografie: Lese- und Begleittexte rund 8–10 % größer (Cormorant läuft klein, Jost-Etiketten waren knapp) */
body{font-size:clamp(1.18rem,1.28vw,1.32rem)}
.site-footer .tagline{font-size:1.22rem}
.site-footer h4{font-size:.8rem}
.site-footer ul li{font-size:1.04rem}
.site-footer .bottom{font-size:.9rem}
.figure .fig-caption,.form label{font-size:.8rem}
.kicker{font-size:.84rem}
.facts-row .t-v{font-size:.74rem}
.feature-list li{font-size:1.25rem}
.split .text .feature-list.two-col li{font-size:1.15rem}
.faq details summary{font-size:1.32rem}
.impressum-gestaltung-text{font-size:.78rem}
.textseite h4{font-size:.86rem}
@media (max-width:720px){.facts-row .t-v{font-size:.66rem}}
/* ===== V9.3 · Feinschliff nach Durchsicht am Handy (25.10.2026) ===== */
/* 1 · Einstieg „Zwei Wege zu uns“: kein doppelter Innenabstand mehr */
.teasers .intro{padding:0}
@media (max-width:720px){.teasers{padding-top:48px}}
/* 4 · Video-Zwischenbild: Zeile so groß und zweizeilig wie die Begrüßung im Hero */
.parallax-break .script{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;margin-bottom:18px}
.parallax-break .script .zeile{display:block}
/* 5 · Partner: Name und Branche als Block mittig zum Icon, eng beieinander */
.supplier{row-gap:2px}
@media (max-width:620px){
  .supplier{grid-template-columns:44px 1fr;column-gap:18px;padding:18px 6px}
  .supplier .num{grid-row:1 / span 2;align-self:center;justify-content:center}
  .supplier h4{align-self:end;line-height:1.15}
  .supplier p{grid-column:2;align-self:start;line-height:1.3}
}
/* 6 · FAQ-Kategorien: Schrift wächst mit der Breite, bricht nie um */
.faq .category-list button{white-space:nowrap;font-size:clamp(1.06rem,4.4vw,1.25rem)}
@media (min-width:961px){.faq .category-list button{font-size:1.25rem}}
/* 7 · Einheitliche Größen nach Vorbild Spanferkel: h2 · h3 · Kicker · Fließtext · Listen · Knöpfe */
.occ-strip .occ-text h3,.faq .cat-group h3{font-size:clamp(1.75rem,2.8vw,2.5rem);line-height:1.15}
.split .text .feature-list.two-col li,.feature-list li{font-size:1.25rem}
.faq details summary{font-size:1.25rem}
.teaser .t-cta{font-size:.82rem}
.parallax-break h2{font-size:clamp(2.4rem,4.6vw,3.9rem)}
.teaser h3{font-size:clamp(1.75rem,2.8vw,2.5rem)}
/* Kleine Handys (320 px): nichts ragt über den Rand */
.contact .layout>*{min-width:0}
.offen{white-space:normal}
@media (max-width:360px){.kicker{letter-spacing:.16em;gap:10px}.kicker::before,.kicker.centered::after{width:24px}}
/* Fließtext seitenweit eine Größe (Maß: Spanferkel-Abschnitt), eine Schrift, eine Farbe je Hintergrund */
:root{--fliess:clamp(1.25rem,1.35vw,1.35rem)}
body,.lead,.teaser p,.contact-info dd,.contact-info dd.small,.site-footer .tagline,.feature-list li,.split .text .feature-list.two-col li{font-size:var(--fliess)}
.lead{color:inherit;line-height:1.6}
.spanferkel p,.spanferkel .lead{color:rgb(var(--paper-rgb) / .9)}
.contact-info dd.small{font-family:var(--font-display);font-weight:500;line-height:1.6}
@media (max-width:720px){.hero .hero-sub{font-size:var(--fliess)}}
/* Footer: Links, Adresse und Abschlusszeile in Schrift und Größe wie der Fließtext; nur die Rubriken bleiben Etiketten */
.site-footer ul li,.site-footer ul a,.site-footer .bottom,.site-footer .bottom a{font-family:var(--font-display);font-weight:500;font-size:var(--fliess);letter-spacing:0;line-height:1.5}
.site-footer ul li{margin-bottom:6px}
/* Abschlussleiste: Gruß größer, unten mehr Luft (inkl. Home-Leiste am iPhone) */
.footer-strip{font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.2;padding:26px var(--gutter) calc(44px + env(safe-area-inset-bottom))}
.nach-oben.sichtbar{transform:translateY(var(--hub,0px))}
.footer-strip{padding:34px var(--gutter) calc(34px + env(safe-area-inset-bottom))}
/* Einheitliche Handschrift Mynerve: in Überschriften größer, mit leichtem Strich auf das Gewicht des Logos gebracht */
h1 em,h2 em,h3 em,.hero h1 em{font-size:1.12em;line-height:.85;letter-spacing:.01em;-webkit-text-stroke:.014em currentColor;paint-order:stroke fill}
.hero .script-line,.parallax-break .script,.footer-strip{-webkit-text-stroke:.01em currentColor}
/* ===== V9.4 · Form-System: zwei Rundungen, zwei Schattenstufen ===== */
:root{
  --r-element:2px;   /* Knöpfe, Felder, Tabs, Bilder */
  --r-karte:10px;    /* Karten, Teaser, Listen, Formular */
  --schatten-karte:0 24px 60px rgb(var(--ink-rgb) / .12);
  --schatten-hoch:0 30px 70px rgb(var(--scrim-rgb) / .32);   /* Karten auf Fotos und dunklen Flächen */
}
.btn,.form input,.form select,.form textarea,.faq .category-list button,.figure .media,.occ-pics .pic,.occ-pics .pic img,.lightbox .lb-stage,.lightbox .lb-stage img{border-radius:var(--r-element)}
.split-section.warm .split .text,.suppliers .list,.form,.spanferkel .inner,.dates .section-head,.dates .note,.teaser,.faq .paper-card,.faq .layout{border-radius:var(--r-karte)}
.split-section.warm .split .text,.suppliers .list,.form,.occ-pics .pic{box-shadow:var(--schatten-karte)}
.teaser,.spanferkel .inner,.dates .section-head,.dates .note{box-shadow:var(--schatten-hoch)}
.form-zusage{margin-top:18px;font-family:var(--font-display);font-style:italic;font-size:var(--fliess);color:var(--ink-soft)}
/* Aktiver Menüpunkt (Desktop): dunkler mit Goldlinie */
@media (min-width:1081px){.nav-links a.aktiv{color:var(--ink)}.nav-links a.aktiv::after{width:100%}}
/* Hero passt in den ersten Bildschirm: Größen zusätzlich an der Bildschirmhöhe begrenzt (Laptops 720–900 px hoch) */
@media (min-width:721px){
  .hero{padding-top:clamp(20px,5svh,104px)}
  .hero h1{font-size:min(clamp(3.6rem,9vw,8.2rem),11svh)}
  .hero .script-line{font-size:min(clamp(2rem,4vw,3.5rem),5.2svh)}
  .hero .hero-sub{margin-top:min(30px,3svh)}
  .hero .hero-buttons{margin-top:min(42px,4.2svh)}
}
@media (max-width:360px),(max-height:600px){
  .hero h1{font-size:min(3rem,11svh)}
  .hero .script-line{font-size:min(1.8rem,5.5svh)}
  .hero .hero-sub{font-size:1.1rem;margin-top:14px}
  .hero .hero-buttons{margin-top:16px}
}
@media (max-width:360px) and (max-height:600px){
  .hero{padding-top:8px}
  .hero h1{font-size:2.7rem}
  .hero .hero-buttons .btn{padding-top:14px;padding-bottom:14px}
  .hero .hero-buttons{gap:8px}
}
/* Einwilligung im Formular: lesbar in der Textschrift statt Kleingedrucktem */
.form .check label{font-family:var(--font-display);font-weight:500;font-size:1.08rem;line-height:1.5;color:var(--ink-soft)}

/* V9.5 · Hero: Oberlängen der Handschrift nicht abschneiden */
.hero h1 .line:nth-child(3){padding-top:.3em;margin-top:-.48em} /* kollabiert mit -.18em der Vorzeile: Lage unverändert */

/* V9.5 · Einblenden ruhig und ohne Sprünge */
/* Parallax-Bilder starten in ihrer GSAP-Ausgangslage */
.parallax .figure .media:not(.fader) img{transform:scale(1.15);transition:none}
/* GSAP-Drift der Abschnittsköpfe nicht durch die CSS-Transition nachziehen lassen */
.gsap-on .section-head[data-reveal]{transform:none;transition:opacity var(--reveal-duration) var(--ease)}
/* Gestapelte Spalten: von unten statt seitlich */
@media (max-width:960px){
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(var(--reveal-distance))}
  [data-reveal="left"].revealed,[data-reveal="right"].revealed{transform:none}
}
/* Tafel Holzbackofen: mit Gewicht */
.spanferkel .inner[data-reveal]{transform:translateY(60px) scale(.96);transition-duration:1.3s}
.spanferkel .inner[data-reveal].revealed{transform:none}
/* Anlass-Bilder: großes Bild zuerst, Knöpfe zuletzt */
.occ-pics[data-stagger]>.occ-actions{transition-delay:.34s}
.occ-pics[data-stagger]>*{transition-duration:1s}
.teaser-grid[data-stagger]>*{transition-duration:1.1s}

/* ===== V9.6 · 26.10. abends: Rückmeldung Thomas zur Live-Seite ===== */
/* 1 · Anker schließen bündig an die Menüleiste an (Leiste 84 px + 1 px Linie) */
:root{--kopf-h:85px}
section{scroll-margin-top:var(--kopf-h)}
/* 1 · Startseite Desktop: Hero wirkt allein, Menü blendet nach dem ersten Scrollen weich ein.
   Gilt nur mit JavaScript (Klasse .mit-hero); per Tastatur erscheint das Menü sofort (:focus-within). Mobil unverändert. */
@media (min-width:1081px){
  .mit-hero .site-header{position:fixed;left:0;right:0;top:0;opacity:0;transform:translateY(-14px);pointer-events:none;
    transition:opacity .9s var(--ease),transform .9s var(--ease),border-color .4s ease,box-shadow .4s ease}
  .mit-hero .site-header.sichtbar,.mit-hero .site-header:focus-within{opacity:1;transform:none;pointer-events:auto}
}
@media (min-width:1081px) and (prefers-reduced-motion:reduce){
  .mit-hero .site-header{transform:none;transition:opacity .2s linear}
}
/* 2 · Stodl wie Catering: Text als Kachel, Bild so hoch wie die Kachel */
.split.gleich-hoch{align-items:stretch}
.split.gleich-hoch .media-col{display:flex;flex-direction:column}
.split.gleich-hoch .media-col .media{flex:1 1 auto;aspect-ratio:auto;min-height:440px;border-radius:var(--r-element);box-shadow:var(--schatten-karte)}
.split.gleich-hoch .media-col .media img{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:960px){
  .split.gleich-hoch .media-col .media{flex:none;aspect-ratio:3/2;min-height:0}
}
/* 3 · Anlass-Galerie: Höhe über das Bild statt über die Schaltfläche (Safari setzt aspect-ratio an <button> nicht zuverlässig um) */
.occ-pics .pic,.occ-pics .pic:nth-child(2),.occ-pics .pic:nth-child(3),.occ-pics .pic-lead{aspect-ratio:auto}
.occ-pics .pic img{height:auto;aspect-ratio:4/3}
.occ-pics .pic-lead img{aspect-ratio:16/9}
@media (max-width:560px){.occ-pics .pic-lead img{aspect-ratio:4/3}}
/* 4 · Holzbackofen: Feuer-Video als Hintergrund statt Holzbrettern, Zwischenbild entfällt */
.spanferkel.mit-video{position:relative;isolation:isolate;background:var(--dark-break);padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.spanferkel.mit-video .hintergrund-video{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2}
.spanferkel.mit-video::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgb(var(--scrim-rgb) / .42),rgb(var(--scrim-rgb) / .58))}
@media (max-width:720px){.spanferkel.mit-video{background-image:none}}
/* 5 · Aus der Nachbarschaft: neutraler Cremeton statt Balkenbild */
.suppliers{background:var(--paper-warm)}
.suppliers::before{display:none}
/* 6 · FAQ: Hintergrund Foto 57, Balken schräg im hellen Putz (Thomas, 27.10.; vorher Holzbretter), Inhalt bleibt Kachel */
.faq{background:url("/assets/bilder/faq-putz-balken-1800.webp") center / cover no-repeat}
.faq .layout{box-shadow:var(--schatten-karte);border-color:transparent}
@media (max-width:720px){.faq{background-image:url("/assets/bilder/faq-putz-balken-800.webp")}}
/* 2 · Stodl-Kachel kompakt wie Catering: Merkmale zweispaltig (two-col im Markup), Bild schmaler, Kachel breiter */
@media (min-width:961px){
  .split.gleich-hoch{grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,80px)}
  .split.gleich-hoch .media-col .media{min-height:0}
}
/* 7 · Dank nach dem Absenden als Pop-up (<dialog>, Esc und Schließen, Fokus kehrt zurück) */
dialog.danke{border:0;padding:0;margin:auto;width:min(460px,calc(100% - 32px));max-width:none;background:var(--paper);color:var(--ink);border-radius:var(--r-karte);box-shadow:0 30px 80px rgb(var(--scrim-rgb) / .35);text-align:center}
dialog.danke::backdrop{background:rgb(var(--scrim-rgb) / .55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.danke-inhalt{padding:clamp(34px,6vw,52px) clamp(24px,5vw,48px) clamp(30px,5vw,44px);display:grid;justify-items:center;gap:10px}
.danke-zeichen{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent-deep);margin-bottom:8px}
.danke-zeichen svg{width:26px;height:26px}
dialog.danke h2{font-size:clamp(1.7rem,3.2vw,2.15rem);line-height:1.15;margin:0;max-width:16ch}
dialog.danke p{margin:0;font-size:var(--fliess);color:var(--ink-soft)}
dialog.danke .danke-gruss{font-family:var(--font-script);font-size:clamp(1.5rem,2.6vw,1.8rem);color:var(--accent-deep);margin-top:6px;-webkit-text-stroke:.01em currentColor}
dialog.danke .btn{margin-top:18px;min-width:180px}
@media (prefers-reduced-motion:no-preference){dialog.danke[open]{animation:dankeEin .45s var(--ease)}dialog.danke[open]::backdrop{animation:dankeHg .45s ease}}
@keyframes dankeEin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dankeHg{from{opacity:0}to{opacity:1}}
.bildfokus-stodl{object-position:30% 50%} /* Foto 33: Pfosten mit Handlauf, dahinter die Stuhlreihe */
/* 8 · Hero ohne Knöpfe (Thomas, 26.10.): mehr Bild, „Mehr erfahren“ am unteren Rand als Link zur ersten Sektion */
.hero .scroll-hint{position:absolute;left:50%;bottom:clamp(22px,4svh,44px);transform:translateX(-50%);z-index:3;margin:0;padding:10px 16px 0;min-width:44px;min-height:44px;text-decoration:none;color:inherit}
.hero .scroll-hint .label{color:rgb(var(--paper-rgb) / .88);font-size:.72rem;transition:color .3s ease}
.hero .scroll-hint:hover .label,.hero .scroll-hint:focus-visible .label{color:var(--gold-hell)}
.hero .scroll-hint:focus-visible{outline:2px solid var(--gold-hell);outline-offset:4px;border-radius:2px}
@media (prefers-reduced-motion:no-preference){.hero .scroll-hint{animation:heroHintEin 1s var(--ease) 1.95s both}}
@keyframes heroHintEin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}
@media (max-width:720px){.hero .scroll-hint{display:inline-flex;bottom:clamp(18px,3svh,32px)}.hero .scroll-hint .track{height:44px}}
@media (min-width:721px){.hero{padding-top:0;padding-bottom:clamp(110px,17svh,170px)}}
@media (min-width:721px) and (max-width:1080px){.hero{min-height:calc(100svh - var(--kopf-h))}} /* Tablet: Menü steht über dem Hero, Link bleibt im ersten Bildschirm */
@media (min-width:721px) and (max-width:1080px){.hero{min-height:calc(100svh - var(--kopf-h))}} /* Tablet: Menü steht über dem Hero, „Mehr erfahren“ bleibt im ersten Bildschirm */
/* 9 · Holzbackofen (Thomas, 26.10.): erst 1,5 s nur das Feuer-Video, dann blendet die Tafel langsam ein.
   Die Textspalte ist halbtransparent, das Video bleibt dahinter sichtbar. */
.spanferkel.mit-video .inner{background:transparent}
.spanferkel.mit-video .text{background:rgb(var(--board-rgb) / .6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);max-width:none;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.spanferkel.mit-video .media::after{background:linear-gradient(to right,transparent 55%,rgb(var(--board-rgb) / .6) 100%)}
@media (max-width:960px){.spanferkel.mit-video .media::after{background:linear-gradient(to bottom,transparent 55%,rgb(var(--board-rgb) / .6) 100%)}}
@media (prefers-reduced-motion:no-preference){
  /* V9.7b (Thomas, 26.10.): kürzer warten, Tafel zoomt sichtbar heran. 0,7 s nur Video, dann in 0,5 s sichtbar und in 1,3 s von 72 % auf 100 %, Text folgt */
  .spanferkel.mit-video .inner[data-reveal]{transform:scale(.72);transition:opacity .5s ease .7s,transform 1.3s cubic-bezier(.22,1,.36,1) .7s}
  .spanferkel.mit-video .inner[data-reveal].revealed{transform:none}
  .spanferkel.mit-video .text[data-reveal]{transition-duration:.8s;transition-delay:1.3s}
}

/* ===== V9.7 (26.10.): Aktuelles mit Umbruch, Hinweise, Sonderzeit, Stimmen, Menü ===== */
/* Terminkarten: höchstens vier je Reihe, weitere brechen zentriert in die nächste Reihe um (Tablet zwei, Handy eine) */
.dates .list{--kg:clamp(18px,2.4vw,30px);display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kg);max-width:1000px}
.dates .list>.date-card{flex:0 1 calc((100% - 3 * var(--kg)) / 4);min-width:0}
@media (max-width:960px){.dates .list{max-width:640px}.dates .list>.date-card{flex-basis:calc((100% - var(--kg)) / 2)}}
@media (max-width:620px){.dates .list{max-width:340px}.dates .list>.date-card{flex-basis:100%}}
.dates .list .date-card{margin-top:13px}   /* Platz für das Etikett „Sonderzeit“/„Abgesagt“ auch in der zweiten Reihe */
/* Hinweise (z. B. Betriebsurlaub) zwischen Überschrift und Karten */
.dates .hinweise{max-width:760px;margin:0 auto clamp(32px,4vw,48px);display:grid;gap:clamp(16px,2vw,22px)}
.hinweis{background:var(--paper);border-radius:var(--r-karte);box-shadow:var(--schatten-hoch);border-top:3px solid var(--accent-deep);padding:clamp(24px,3vw,34px) clamp(24px,3.5vw,48px);text-align:center}
.hinweis h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.hinweis-zeit{margin-top:10px;font-family:var(--font-sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep)}
.hinweis-text{margin-top:14px}
.hinweis-text p+p{margin-top:10px}
#anlaesse{scroll-margin-top:var(--kopf-h)}

/* Stimmen unserer Gäste: drei Spalten wie V6, nur mit echten Bewertungen sichtbar */
.stimmen{padding:var(--sec-y) 0;background:var(--paper);border-top:1px solid var(--line)}
.stimmen-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4.5vw,72px)}
.stimmen-liste.anzahl-1{grid-template-columns:minmax(0,640px);justify-content:center}
.stimmen-liste.anzahl-2{grid-template-columns:repeat(2,minmax(0,520px));justify-content:center}
.stimme{display:flex;flex-direction:column;margin:0}
.stimme blockquote{margin:0;flex:1}
.stimme blockquote::before{content:"\201C";display:block;font-family:var(--font-display);font-size:4.2rem;line-height:.8;color:var(--accent);opacity:.7;margin-bottom:18px}
.stimme blockquote p{font-size:var(--fliess);line-height:1.65;color:var(--ink)}
.stimme figcaption{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.stimme-name{display:block;font-family:var(--font-sans);font-weight:500;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.stimme-info{display:block;margin-top:6px;font-family:var(--font-display);font-style:italic;color:var(--muted)}
.stimmen-hinweis{max-width:720px;margin:clamp(40px,5vw,64px) auto 0;text-align:center;font-size:.95rem;color:var(--muted)}
.stimmen-hinweis a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:3px}
@media (max-width:960px){.stimmen-liste,.stimmen-liste.anzahl-2{grid-template-columns:1fr;max-width:640px;margin:0 auto}}
/* Menüpunkte brechen nie um */
.nav-links a{white-space:nowrap}
@media (min-width:1081px) and (max-width:1199px){.nav-cta .phone{display:none}}   /* fünf Punkte + Telefon + Knopf passen erst ab 1200 px; die Nummer steht auch im Kontaktbereich */
/* Handy: Termine als kompakte Zeilen (Tag links, Monat, Wochentag und Uhrzeit rechts), damit fünf Termine nicht fünf Bildschirme füllen */
@media (max-width:620px){
  .dates .list{gap:14px}
  .dates .list .date-card{padding:18px 22px;text-align:left}
  .date-card .date-link{display:grid;grid-template-columns:78px 1fr;grid-template-areas:"tag monat" "tag wtag" "jahr zeit";column-gap:18px;align-items:center}
  .date-card .day{grid-area:tag;margin:0;font-size:3.2rem;text-align:center}
  .date-card .year{grid-area:jahr;text-align:center;font-size:.95rem}
  .date-card .month{grid-area:monat}
  .date-card .dow{grid-area:wtag;margin:0}
  .date-card .time{grid-area:zeit;margin:6px 0 0;padding:6px 0 0}
  .date-card.special::before,.date-card.abgesagt::before{left:22px;transform:none}
}
.stimme blockquote::before{font-family:var(--font-head);font-size:5.6rem;line-height:.7;margin-bottom:6px}
.stimmen-muster{margin-top:14px;font-family:var(--font-sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}   /* Kennzeichnung der Beispieltexte, solange stimmen.php 'muster' => true */
/* V9.8b (Thomas, 27.10.): Terminkarten sind keine Links mehr, also kein Anheben und kein Fokusrahmen beim Überfahren */
.dates .date-card:hover{transform:none;box-shadow:none;border-color:var(--line)}
.date-card .date-link::after{content:none}

/* kunde/css/handschrift.css */
/* Erzeugt mit werkzeuge/handschrift.py: ein runder Stift schreibt die Begrüßung Strich für Strich */
.handschrift{display:block;height:2.077em;width:auto;margin:0 auto;overflow:visible;fill:currentColor;filter:drop-shadow(0 2px 14px rgb(var(--scrim-rgb) / .55))}
.handschrift mask path{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .handschrift mask path{stroke-dasharray:1 2;stroke-dashoffset:1;animation:hsZug .3s linear forwards}
  @keyframes hsZug{to{stroke-dashoffset:0}}
  .handschrift .z1{animation-delay:1.20s;animation-duration:0.02s}
  .handschrift .z2{animation-delay:1.22s;animation-duration:0.02s}
  .handschrift .z3{animation-delay:1.25s;animation-duration:0.02s}
  .handschrift .z4{animation-delay:1.27s;animation-duration:0.02s}
  .handschrift .z5{animation-delay:1.30s;animation-duration:0.02s}
  .handschrift .z6{animation-delay:1.32s;animation-duration:0.02s}
  .handschrift .z7{animation-delay:1.35s;animation-duration:0.04s}
  .handschrift .z8{animation-delay:1.39s;animation-duration:0.02s}
  .handschrift .z9{animation-delay:1.42s;animation-duration:0.02s}
  .handschrift .z10{animation-delay:1.45s;animation-duration:0.02s}
  .handschrift .z11{animation-delay:1.47s;animation-duration:0.02s}
  .handschrift .z12{animation-delay:1.50s;animation-duration:0.06s}
  .handschrift .z13{animation-delay:1.56s;animation-duration:0.04s}
  .handschrift .z14{animation-delay:1.61s;animation-duration:0.02s}
  .handschrift .z15{animation-delay:1.63s;animation-duration:0.02s}
  .handschrift .z16{animation-delay:1.66s;animation-duration:0.04s}
  .handschrift .z17{animation-delay:1.70s;animation-duration:0.03s}
  .handschrift .z18{animation-delay:1.74s;animation-duration:0.03s}
  .handschrift .z19{animation-delay:1.85s;animation-duration:0.02s}
  .handschrift .z20{animation-delay:1.88s;animation-duration:0.02s}
  .handschrift .z21{animation-delay:1.90s;animation-duration:0.03s}
  .handschrift .z22{animation-delay:1.94s;animation-duration:0.02s}
  .handschrift .z23{animation-delay:1.96s;animation-duration:0.02s}
  .handschrift .z24{animation-delay:1.99s;animation-duration:0.04s}
  .handschrift .z25{animation-delay:2.03s;animation-duration:0.04s}
  .handschrift .z26{animation-delay:2.07s;animation-duration:0.02s}
  .handschrift .z27{animation-delay:2.10s;animation-duration:0.02s}
  .handschrift .z28{animation-delay:2.13s;animation-duration:0.02s}
  .handschrift .z29{animation-delay:2.15s;animation-duration:0.04s}
  .handschrift .z30{animation-delay:2.19s;animation-duration:0.02s}
  .handschrift .z31{animation-delay:2.22s;animation-duration:0.02s}
  .handschrift .z32{animation-delay:2.24s;animation-duration:0.05s}
  .handschrift .z33{animation-delay:2.30s;animation-duration:0.02s}
  .handschrift .z34{animation-delay:2.32s;animation-duration:0.04s}
  .handschrift .z35{animation-delay:2.36s;animation-duration:0.04s}
  .handschrift .z36{animation-delay:2.40s;animation-duration:0.02s}
  .handschrift .z37{animation-delay:2.43s;animation-duration:0.04s}
  .handschrift .z38{animation-delay:2.47s;animation-duration:0.04s}
  .handschrift .z39{animation-delay:2.51s;animation-duration:0.04s}
  .handschrift .z40{animation-delay:2.55s;animation-duration:0.02s}
  .handschrift .z41{animation-delay:2.58s;animation-duration:0.02s}
  .handschrift .z42{animation-delay:2.60s;animation-duration:0.04s}
  .handschrift .z43{animation-delay:2.76s;animation-duration:0.03s}
  .handschrift .z44{animation-delay:2.80s;animation-duration:0.05s}
  .handschrift .z45{animation-delay:2.85s;animation-duration:0.02s}
  .handschrift .z46{animation-delay:2.87s;animation-duration:0.04s}
  .handschrift .z47{animation-delay:2.92s;animation-duration:0.02s}
  .handschrift .z48{animation-delay:2.94s;animation-duration:0.02s}
  .handschrift .z49{animation-delay:2.97s;animation-duration:0.02s}
  .handschrift .z50{animation-delay:3.07s;animation-duration:0.06s}
  .handschrift .z51{animation-delay:3.14s;animation-duration:0.04s}
  .handschrift .z52{animation-delay:3.19s;animation-duration:0.02s}
  .handschrift .z53{animation-delay:3.22s;animation-duration:0.03s}
  .handschrift .z54{animation-delay:3.25s;animation-duration:0.05s}
  .handschrift .z55{animation-delay:3.30s;animation-duration:0.02s}
  .handschrift .z56{animation-delay:3.32s;animation-duration:0.04s}
  .handschrift .z57{animation-delay:3.37s;animation-duration:0.02s}
  .handschrift .z58{animation-delay:3.39s;animation-duration:0.04s}
  .handschrift .z59{animation-delay:3.44s;animation-duration:0.04s}
  .handschrift .z60{animation-delay:3.49s;animation-duration:0.02s}
  .handschrift .z61{animation-delay:3.51s;animation-duration:0.04s}
  .handschrift .z62{animation-delay:3.56s;animation-duration:0.02s}
  .handschrift .z63{animation-delay:3.59s;animation-duration:0.02s}
  .handschrift .z64{animation-delay:3.61s;animation-duration:0.02s}
  .handschrift .z65{animation-delay:3.64s;animation-duration:0.02s}
  .handschrift .z66{animation-delay:3.66s;animation-duration:0.02s}
  .handschrift .z67{animation-delay:3.68s;animation-duration:0.04s}
}