/* Gebaut aus html/css/ (WordPress-Fassung) – NICHT von Hand ändern, bin/build ausführen. */

/* ===== 00-tokens.css ===== */
/* Farben „gedeckt-natürlich“ (Salbei, Moos, Hafer, Sand) – Inhaber 28.10.2026: Logo-Farben nur im Logo.
   Logo-Gelbgrün #BDD100 nur noch winzig als Marker (Pfote, Unterstrich aktiver Menüpunkt, Fortschrittsring, Fokus im Dunkelmodus).
   Komponenten nutzen nur die semantischen Tokens. Kontraste gemessen (WCAG 2.2):
   hell  – Text #24271F auf Hafer 13,8:1 · auf Salbei 12,2:1 · auf Sand 11,2:1 · Nebentext #5C6052 auf Hafer 5,9:1 / Salbei 5,2:1 / Sand 4,8:1 ·
           Titel #2C3A25 11,0:1 · Akzent #3F5B32 auf Hafer 6,9:1 / Salbei 6,2:1 · Taste Weiß auf Moos #4B6A3C 6,1:1 (Hover #3E5A31 7,7:1) ·
           Moos-Rand auf Hafer 5,6:1 · Fokusring Moos dunkel 6,9:1 (Gelbgrün hätte nur 1,6:1)
   dunkel – Text #ECEBE3 auf #1C241B 13,3:1 · Akzent Salbei #B9CBA6 9,2:1 (auf Fläche #2B3629 7,3:1) · Nebentext #ABB2A0 7,3:1 / 5,8:1 ·
           Taste Weiß auf #557A44 4,9:1 · Fuß-Text #ECEBE3 auf #18201A 13,9:1 · Pfote #E3E9DA auf Moos 4,9:1 · Hinweis dunkel #2E3324: Text 10,9:1, Nebentext 6,0:1 */
:root {
  /* Primitive */
  --logo-gruen: #BDD100;
  --moos: #4B6A3C;
  --moos-tief: #3E5A31;
  --moos-text: #3F5B32;
  --moos-hell: #557A44;
  --salbei: #E3E9DA;
  --salbei-hell: #B9CBA6;
  --hafer: #F7F4EC;
  --papier: #FBFAF6;
  --sand: #E9DCC0;
  --linie: #DCD8CC;
  --text: #24271F;
  --text-2: #5C6052;
  --titel: #2C3A25;
  --wald-950: #151C14;
  --wald-900: #1C241B;
  --wald-850: #232D22;
  --wald-800: #2B3629;
  --wald-700: #3A4637;
  --wald-600: #4A5746;
  --wald-text: #ECEBE3;
  --wald-text-2: #ABB2A0;
  /* Kompatibilität für ältere Selektoren */
  --oliv-900: var(--text);
  --logo-braun: var(--titel);

  /* Semantik – hell */
  --c-papier: var(--hafer);
  --c-karte: var(--papier);
  --c-flaeche: var(--salbei);
  --c-flaeche-2: #D7E0CC;
  --c-text: var(--text);
  --c-text-2: var(--text-2);
  --c-titel: var(--titel);
  --c-akzent-text: var(--moos-text);
  --c-marker: var(--logo-gruen);
  --c-linie: var(--linie);
  --c-linie-stark: #C9C4B5;
  --c-haupt-bg: var(--moos);
  --c-haupt-bg-hover: var(--moos-tief);
  --c-haupt-text: #FFFFFF;
  --c-rand-zweit: var(--moos);
  --c-hinweis-bg: var(--sand);
  --c-hinweis-linie: #D6C59E;
  --c-waerme: #F1E8D4;
  --c-fokus: var(--moos-text);
  --c-kopf-bg: rgb(247 244 236 / .86);
  --c-schatten: 0 1px 2px rgb(36 39 31 / .06), 0 8px 28px rgb(36 39 31 / .08);
  --c-offen-bg: #FFF2B8;
  --c-offen-text: #4A3B00;
  --c-fehler: #9B2C1F;            /* Formular-Fehler (Anmeldung, WordPress-Fassung) */
  /* Fuß: in beiden Themes Waldgrün */
  --c-fuss-bg: #22301F;
  --c-fuss-text: var(--wald-text);
  --c-fuss-text-2: #C9CDBE;
  --c-fuss-linie: #3A4A35;
  --c-lb-bg: rgb(21 28 20 / .96);
  /* Lightbox: in beiden Themes dunkel */
  --c-lb-text: #ECE6D8;
  --c-lb-text-2: #C4BCAA;
  --c-lb-knopf: rgb(255 255 255 / .1);
  --c-lb-knopf-hover: rgb(255 255 255 / .2);
  --c-lb-fokus: var(--logo-gruen);
  --c-lb-glas: rgb(21 28 20 / .45);
  --c-lb-lichtkante: rgb(255 255 255 / .14);
  /* WhatsApp-Taste (Desktop) */
  --c-wa-blase: var(--moos);
  --c-wa-pfote: var(--salbei);
  --c-ring: var(--moos);
  /* Sterne der Google-Bewertung: Bernstein gedeckt (Grafik ≥ 3:1: #A06A12 auf Hafer 4,2:1, auf Salbei 3,7:1), leer = Linie stark */
  --c-stern: #A06A12;
  --c-stern-leer: var(--c-linie-stark);
  --c-pfote-flaeche: rgb(75 106 60 / .3);   /* Moos 25 % auf Salbei */
  --c-stern-fuss: #E2B451;
  /* Desktop-Held 2: Nebel hinter dem Text (Papierfarbe), Tieraugen (Bernstein wie die Sterne im Fuß, Kern hell), Kartentitel auf Foto
     (in beiden Themes hell auf Waldgrün-Verlauf: Text #ECEBE3 auf #151C14 bei .82 ≥ 12:1) */
  --c-nebel: 247 244 236;
  --c-auge: var(--c-stern-fuss);
  --c-auge-kern: #FFF1C2;
  --c-karte-titel: var(--wald-text);
  --c-karte-titel-grund: 21 28 20;
  /* Glas (nur schwebende Funktionsebenen, apple-design §12). Schlimmster Fall gerechnet (Schwarz hinter dem Glas):
     Text #24271F auf Glas .72 = 7,0:1, .82 = 9,1:1. Nebentext auf Glas nur über --glas-text-2 (= Text), weil #5C6052 dort < 4,5:1 fiele. */
  --glas-klein: rgb(247 244 236 / .72);     /* Leiste, Knöpfe, Hinweisblase */
  --glas-mittel: rgb(251 250 246 / .78);    /* Dropdown, Kopf beim Scrollen */
  --glas-gross: rgb(247 244 236 / .82);     /* Vollbild-Menü, Orte-Blatt */
  --glas-deckend: var(--hafer);
  --glas-lichtkante: rgb(255 255 255 / .75);
  --glas-linie: rgb(36 39 31 / .10);
  --glas-text-2: var(--text);
  --glas-schatten-klein: 0 1px 2px rgb(36 39 31 / .08), 0 6px 18px rgb(36 39 31 / .10);
  --glas-schatten-gross: 0 2px 6px rgb(36 39 31 / .08), 0 18px 48px rgb(36 39 31 / .18);

  --font-display: "Alegreya", "Alegreya Ersatz", "Alegreya Ersatz Times", Georgia, serif;   /* nur H1 + H2 */
  --font-titel: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;           /* H3–H6, Hervorhebungen */
  --font-ui: var(--font-titel);   /* Navigation, Tasten, Badges, Labels, Ablauf-Ziffern: Jost 500 */
  --font-text: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif;
  --r-klein: 10px;
  --r: 18px;
  --r-gross: 28px;
  --r-pill: 999px;
  --kopf-h: 64px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: light;
}
@media (min-width: 68.75em) { :root { --kopf-h: 76px; } }

html[data-theme="dark"] {
  --c-papier: var(--wald-900);
  --c-karte: var(--wald-850);
  --c-flaeche: var(--wald-850);
  --c-flaeche-2: var(--wald-800);
  --c-text: var(--wald-text);
  --c-text-2: var(--wald-text-2);
  --c-titel: var(--wald-text);
  --c-akzent-text: var(--salbei-hell);
  --c-marker: var(--logo-gruen);
  --c-linie: var(--wald-700);
  --c-linie-stark: var(--wald-600);
  --c-haupt-bg: var(--moos-hell);
  --c-haupt-bg-hover: var(--moos);
  --c-haupt-text: #FFFFFF;
  --c-rand-zweit: var(--salbei-hell);
  --c-hinweis-bg: #2E3324;
  --c-hinweis-linie: #474E38;
  --c-waerme: #252F23;
  --c-fokus: var(--logo-gruen);
  --c-kopf-bg: rgb(28 36 27 / .84);
  --c-schatten: 0 1px 2px rgb(0 0 0 / .3), 0 10px 30px rgb(0 0 0 / .35);
  --c-offen-bg: #5A4A00;
  --c-offen-text: #FFF2B8;
  --c-fehler: #F2A08E;
  --c-fuss-bg: #18201A;
  --c-wa-blase: var(--moos-hell);
  --c-wa-pfote: #FFFFFF;
  --c-ring: var(--salbei-hell);
  --c-stern: #E2B451;            /* 8,3:1 auf Waldgrün */
  --c-stern-leer: var(--wald-600);
  --c-pfote-flaeche: rgb(185 203 166 / .3);
  --c-nebel: 28 36 27;
  /* Glas dunkel (Waldgrün). Schlimmster Fall Weiß dahinter: Text #ECEBE3 auf .70 = 4,9:1, auf .80 = 7,0:1 */
  --glas-klein: rgb(28 36 27 / .70);
  --glas-mittel: rgb(35 45 34 / .76);
  --glas-gross: rgb(21 28 20 / .80);
  --glas-deckend: var(--wald-900);
  --glas-lichtkante: rgb(255 255 255 / .10);
  --glas-linie: rgb(255 255 255 / .08);
  --glas-text-2: var(--wald-text);
  --glas-schatten-klein: 0 1px 2px rgb(0 0 0 / .3), 0 8px 22px rgb(0 0 0 / .35);
  --glas-schatten-gross: 0 2px 8px rgb(0 0 0 / .3), 0 22px 56px rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* ===== 01-schriften.css ===== */
/* Selbst gehostet (@fontsource, OFL), nur latin + latin-ext, nur genutzte Schnitte. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/jost-latin-400-normal.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(../fonts/jost-latin-ext-400-normal.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(../fonts/jost-latin-500-normal.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(../fonts/jost-latin-ext-500-normal.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; }
/* Jost 600 nur latin: Ziffern der Ablauf-Schritte */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/jost-latin-600-normal.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: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-normal.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: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-ext-400-normal.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: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-400-italic.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: "Roboto"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/roboto-latin-ext-400-italic.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: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-latin-700-normal.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: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/roboto-latin-ext-700-normal.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; }
/* Alegreya (Huerta Tipográfica, OFL): nur H1 (600) und H2 (500), Inhaber 28.10.2026 */
@font-face { font-family: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/alegreya-latin-500-normal.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: "Alegreya"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/alegreya-latin-ext-500-normal.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: "Alegreya"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/alegreya-latin-600-normal.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: "Alegreya"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/alegreya-latin-ext-600-normal.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; }
/* Ersatz bis Alegreya geladen ist: Georgia Bold bzw. Times Bold auf Alegreyas Laufweite und Zeilenmaße gebracht (kaum Sprung beim Tausch) */
@font-face { font-family: "Alegreya Ersatz"; font-weight: 500 600; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 80%; ascent-override: 127%; descent-override: 43%; line-gap-override: 0%; }
@font-face { font-family: "Alegreya Ersatz Times"; font-weight: 500 600; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold"); size-adjust: 96.5%; ascent-override: 105%; descent-override: 36%; line-gap-override: 0%; }

/* ===== 05-basis.css ===== */
/* Grundlagen: Reset, Typografie, Container, Buttons, Links, Hilfsklassen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  scroll-padding-block-start: calc(var(--kopf-h) + 16px); background: var(--c-papier); }
@media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--c-papier); color: var(--c-text); font-family: var(--font-text); font-weight: 400;
  font-size: 1.0625rem; line-height: 1.6; text-rendering: optimizeLegibility; overflow-x: clip; overflow-wrap: break-word; }
@media (min-width: 47.5em) { body { font-size: 1.125rem; } }
html.theme-wechsel *, html.theme-wechsel *::before, html.theme-wechsel *::after { transition: none !important; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p, ul, ol, figure, blockquote, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: var(--c-marker); color: var(--oliv-900); }
:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 3px; border-radius: 6px; }
.vz-ringlos:focus, .vz-ringlos:focus-visible { outline: none; }
/* Ring nur nach Tastatur: nach Klick oder Tipp (00-basis.js setzt data-eingabe) kein Ring auf Knöpfen und Links, Eingabefelder behalten ihn */
html[data-eingabe="zeiger"] :focus-visible:not(input, textarea, select, [contenteditable]) { outline: none; }
main:focus { outline: none; }

/* Typografie: Alegreya für H1/H2, Jost für H3–H6 und Bedienung, Roboto für Text. Rollen = Größe + Zeilenhöhe + Gewicht. */
h1, h2, h3, h4, .h1, .h2, .h3 { font-family: var(--font-titel); font-weight: 500; color: var(--c-titel); margin: 0; text-wrap: balance; hyphens: auto; }
/* Alegreya hat Mediävalziffern als Standard („61“ läse sich wie „6ı“): Normalziffern erzwingen */
h1, h2, .h1, .h2 { font-family: var(--font-display); font-variant-numeric: lining-nums; }
h1, .h1 { font-weight: 600; }
.h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); line-height: 1.08; letter-spacing: -0.01em; }
.h2, h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); line-height: 1.12; letter-spacing: -0.005em; }
.h3 { font-family: var(--font-titel); font-variant-numeric: normal; }
.h3, h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.625rem); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 1.15rem; line-height: 1.3; }
.lead { font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.375rem); line-height: 1.5; color: var(--c-text); }
.zitat { font-family: var(--font-titel); font-weight: 400; font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); line-height: 1.32;
  letter-spacing: -0.01em; color: var(--c-text); text-wrap: pretty; }
.zitat em { font-style: normal; }
.merksatz { font-family: var(--font-titel); font-weight: 500; font-size: 1.3em; line-height: 1.3; color: var(--c-titel); }
p { text-wrap: pretty; }
strong, b { font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Container */
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left), min(5vw, 48px)); }
.text-spalte { max-width: 44rem; }
.wrap.text-spalte { max-width: calc(44rem + 2 * max(20px, min(5vw, 48px))); }
.text-spalte > * + * { margin-block-start: 1.1em; }
.abschnitt { padding-block: clamp(56px, 8vw, 112px); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-block-end: clamp(24px, 3vw, 40px); }

/* Links im Fließtext */
.text-spalte a:not([class]), .recht a:not([class]), .beitrag-text a, .eintrag-text a, .adresse a {
  color: var(--c-akzent-text); text-decoration-line: underline; text-decoration-thickness: from-font;
  text-underline-offset: .18em; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: text-decoration-color .15s ease; overflow-wrap: anywhere; }
.text-spalte a:not([class]):hover, .recht a:not([class]):hover, .beitrag-text a:hover, .adresse a:hover { text-decoration-color: currentColor; }

/* Tasten: genau ein gefüllter Typ (WhatsApp = Hauptaktion), sonst Umriss. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px;
  border-radius: var(--r-pill); border: 1.5px solid transparent; font-family: var(--font-ui); font-weight: 500;
  font-size: 1.0625rem; line-height: 1.15; text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .16s var(--ease-out); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn .ic { flex: none; }
.btn-haupt { background: var(--c-haupt-bg); color: var(--c-haupt-text); }
.btn-zweit { background: transparent; color: var(--c-text); border-color: var(--c-rand-zweit); }
@media (hover: hover) and (pointer: fine) {
  .btn-haupt:hover { background: var(--c-haupt-bg-hover); }
  .btn-zweit:hover { background: var(--c-flaeche); border-color: var(--c-text-2); }
}
.btn-klein { min-height: 44px; padding: 0 18px; font-size: 1rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-ui); font-weight: 500;
  color: var(--c-akzent-text); text-decoration: none; }
.textlink .ic { transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .textlink:hover .ic:last-child { transform: translateX(3px); } .textlink:hover span { text-decoration: underline; text-underline-offset: .2em; } }
.rund-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent;
  color: var(--c-text); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, transform .16s var(--ease-out); }
.rund-knopf:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .rund-knopf:hover { background: var(--c-flaeche); } }
.text-knopf { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em;
  text-decoration-thickness: from-font; min-height: 24px; }

/* Hinweisfläche (z. B. „Achtung!“) */
.hinweis { background: var(--c-hinweis-bg); border: 1px solid var(--c-hinweis-linie); border-radius: var(--r); padding: clamp(20px, 3vw, 28px);
  color: var(--c-text); }
.hinweis > * + * { margin-block-start: .5em; }
.hinweis-titel { font-family: var(--font-titel); font-size: 1.25rem; }
.hinweis-ruhig { background: var(--c-flaeche); border-color: var(--c-linie); }
.aufbau { display: inline-block; font-size: .9375rem; color: var(--c-text-2); border: 1px dashed var(--c-linie-stark); border-radius: var(--r-pill);
  padding: 6px 14px; }
.preis { font-family: var(--font-titel); font-size: 1.25rem; color: var(--c-titel); }

/* Bilder */
.bild img { width: 100%; height: auto; border-radius: inherit; }
.bild-fehlt { display: block; width: 100%; background: var(--c-flaeche); border-radius: var(--r); }

/* Überspringen-Link und Vorschau-Balken */
.skip { position: absolute; left: 12px; top: -100px; z-index: 200; background: var(--c-haupt-bg); color: var(--c-haupt-text); padding: 12px 18px;
  border-radius: var(--r-pill); font-family: var(--font-ui); text-decoration: none; }
.skip:focus { top: 12px; }
.vorschau { box-sizing: border-box; min-height: var(--vorschau-h); background: var(--c-hinweis-bg); color: var(--c-text); font-size: .8125rem; line-height: 1.3; text-align: center; padding: 6px 16px; }
body:has(> .vorschau) { --vorschau-h: 29px; }
/* Startseite ab 960 px (Held 2): Vorschau-Leiste weg, der Held reicht bis ganz oben (Inhaber 31.10.2026); noindex bleibt unabhängig davon */
@media (min-width: 60em) { body:has(.held--wald) > .vorschau { display: none; } body:has(.held--wald) { --vorschau-h: 0px; } }

/* Platzhalter für fehlende Kundendaten */
mark.offen { background: var(--c-offen-bg); color: var(--c-offen-text); border-radius: 4px; padding: 0 4px; font-size: .9em; }

/* KI-Bilder: Label „AI“ 1:1 wie .is-ki-label von innovate-systems.de (Pflichtstandard §5, feste Werte gewollt) */
.bild-rahmen { position: relative; display: block; }
.ki-label { position: absolute; z-index: 1; right: 10px; bottom: 10px; width: 18px; height: 18px; padding: 0; border-radius: 50%; display: grid;
  place-items: center; background: rgba(15,23,42,.18); color: rgba(255,255,255,.7); font-size: 8px; line-height: 1; font-weight: 600;
  letter-spacing: .02em; pointer-events: none; font-family: system-ui, -apple-system, sans-serif; }

/* Lange deutsche Wörter in schmalen Spalten (break-ui: 320 px, 200 % Schrift) */
@media (max-width: 32.5em) { .zeitleiste, .angebote, .angebote-neben, .karten, .ablauf, .stimmen, .faq, .band, .nf, .kontakt-raster, .fuss { hyphens: auto; } }
.btn > span { min-width: 0; }

/* ===== 10-kopf.css ===== */
/* Kopf: klebt oben. Mobil blendet er beim Runterscrollen aus (html.kopf-weg), beim Hochscrollen ein.
   Ab 80 px gescrollt: leichte Fläche mit Unschärfe (html.gescrollt). */
.kopf { position: sticky; top: 0; z-index: 60; height: var(--kopf-h); background: var(--c-papier);
  transition: transform .32s var(--ease-drawer), background-color .25s ease, box-shadow .25s ease; }
html.gescrollt .kopf { background: var(--c-kopf-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: 0 1px 0 var(--c-linie); }
@media (prefers-reduced-transparency: reduce) { html.gescrollt .kopf { background: var(--c-papier); backdrop-filter: none; } }
/* Startseite ab 960 px: der Held 2 liegt hinter dem Kopf, der Kopf ist bis zum Scrollen durchsichtig (Inhaber 31.10.2026) */
@media (min-width: 60em) {
  html:not(.gescrollt) body:has(.held--wald) .kopf { background: transparent; box-shadow: none; }
  /* Kleine Wolken hinter Logo, Navigation und je Knopf rechts (Inhaber 31.10.2026), Papierfarbe bzw. Waldgrün wie die Wolke hinter dem Held-Text */
  body:has(.held--wald) :is(.marke, .kopf-rechts .rund-knopf, .hauptnav) { position: relative; isolation: isolate; }
  body:has(.held--wald) :is(.marke, .kopf-rechts .rund-knopf, .hauptnav)::before { content: ""; position: absolute; z-index: -1; inset: -22px -52px; pointer-events: none; filter: blur(8px);
    background: radial-gradient(ellipse 50% 56% at 50% 50%, rgb(var(--c-nebel) / .96) 0 52%, rgb(var(--c-nebel) / 0) 100%);
    opacity: .7; transition: opacity .25s ease; }   /* 70 % Deckkraft wie die Wolke hinter dem Held-Text */
  body:has(.held--wald) .marke::before { inset: -30px -70px; filter: blur(12px); }   /* Logo liegt im Laub: größere Wolke */
  html:not([data-theme="dark"]):not(.gescrollt) body:has(.held--wald) .marke::before { opacity: 1; }   /* hell: Logo-Wolke volle Deckkraft (Inhaber 31.10.2026) */
  /* Rechts je Knopf eine kleine runde Wolke (die unsichtbare WhatsApp-Taste daneben hält Platz frei und bekommt keine) */
  body:has(.held--wald) .kopf-rechts .rund-knopf::before { inset: -10px; filter: blur(6px); opacity: .55;   /* kleiner, weniger Deckkraft (Inhaber 31.10.2026), Logo-Wolke unverändert */
    background: radial-gradient(circle, rgb(var(--c-nebel) / .9) 0 40%, rgb(var(--c-nebel) / 0) 100%); }
  html.gescrollt body:has(.held--wald) :is(.marke, .kopf-rechts .rund-knopf, .hauptnav)::before { opacity: 0; }
}
@media (max-width: 68.6875em) { html.kopf-weg:not(.menue-offen) .kopf { transform: translateY(-100%); } }
.kopf-in { height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: max(14px, env(safe-area-inset-left), min(3vw, 40px));
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
@media (min-width: 68.75em) { .kopf-in { grid-template-columns: 1fr auto 1fr; } }
.marke { display: block; width: 140px; padding-block: 4px; -webkit-tap-highlight-color: transparent; }
@media (min-width: 68.75em) { .marke { width: 170px; transition: width .35s var(--ease-out), margin .35s var(--ease-out); } }
/* Startseite mit Held 2, nur solange nicht gescrollt (Inhaber 31.10.2026): Logo 20 % größer und links außen, Knöpfe rechts außen,
   Navigation mittig; beim Scrollen zurück auf Normalgröße und 1440-px-Innenbreite (sonst zu markant). Das große Logo ragt 8 px unter
   den durchsichtigen Kopf, das stört nicht, weil der Held dahinter liegt. */
@media (min-width: 68.75em) {
  .kopf-in { transition: max-width .35s var(--ease-out), padding .35s var(--ease-out); }
  html:not(.gescrollt) body:has(.held--wald) .marke { width: 204px; margin-top: 8px; }
  html:not(.gescrollt) body:has(.held--wald) .kopf-in { max-width: 100%; padding-inline: max(28px, env(safe-area-inset-left), min(3vw, 56px)); }
}
/* Logo als Hintergrund: so lädt der Browser nur die Fassung des aktiven Themes (Pflichtstandard §2). */
.logo-bild { display: block; aspect-ratio: 1018 / 407; background: url(../marke/logo-hell-360.webp) left center / contain no-repeat;
  background-image: image-set(url(../marke/logo-hell-360.webp) 1x, url(../marke/logo-hell-720.webp) 2x); }
html[data-theme="dark"] .logo-bild { background-image: url(../marke/logo-dunkel-360.webp);
  background-image: image-set(url(../marke/logo-dunkel-360.webp) 1x, url(../marke/logo-dunkel-720.webp) 2x); }
.hund-bild { display: block; aspect-ratio: 1; background: url(../marke/hund-hell-240.webp) center / contain no-repeat; }
html[data-theme="dark"] .hund-bild { background-image: url(../marke/hund-dunkel-240.webp); }
@media (forced-colors: active) { .logo-bild, .hund-bild { forced-color-adjust: none; } }

/* Hauptnavigation (ab 1100 px) */
.hauptnav { display: none; }
@media (min-width: 68.75em) {
  .hauptnav { display: block; }
  .hauptnav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .hauptnav li { position: relative; display: flex; align-items: center; }
  .hauptnav > ul > li > a { position: relative; display: block; padding: 10px 12px; font-family: var(--font-ui); font-weight: 500; font-size: 1.0625rem;
    color: var(--c-text); text-decoration: none; border-radius: var(--r-pill); transition: background-color .15s ease; }
  .hauptnav > ul > li.hat-unter > a { padding-inline-end: 4px; }
  .hauptnav > ul > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; border-radius: 2px;
    background: var(--c-marker); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); }
  .hauptnav > ul > li.hat-unter > a::after { right: 4px; }
  .hauptnav > ul > li > a.ist-aktiv::after { transform: scaleX(1); }
  .unter-knopf { display: grid; place-items: center; width: 28px; height: 36px; border: 0; background: none; border-radius: var(--r-pill); cursor: pointer; color: var(--c-text-2); }
  .unter-knopf .ic { transition: transform .2s var(--ease-out); }
  .unter-knopf[aria-expanded="true"] .ic { transform: rotate(180deg); }
  .unter { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; list-style: none; margin: 0; padding: 8px;
    background: var(--c-papier); border: 1px solid var(--c-linie); border-radius: var(--r); box-shadow: var(--c-schatten);
    opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top left;
    transition: opacity .16s ease, transform .2s var(--ease-out), visibility 0s linear .2s; }
  .unter::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
  .hat-unter:hover > .unter, .hat-unter.offen > .unter { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .unter a { display: block; padding: 10px 14px; border-radius: var(--r-klein); text-decoration: none; color: var(--c-text); white-space: nowrap; }
  .unter a:hover { background: var(--c-flaeche); }
  .unter a[aria-current="page"] { color: var(--c-akzent-text); font-weight: 700; }
  @media (hover: hover) and (pointer: fine) { .hauptnav > ul > li > a:hover { background: var(--c-flaeche); } }
}
.kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.kopf-cta { display: none; }
@media (min-width: 68.75em) { .kopf-cta { display: inline-flex; margin-inline-start: 6px; } .burger { display: none !important; } }
html.ohne-js .theme-knopf { display: none; }
html:not([data-theme="dark"]) .theme-knopf .ic-sonne, html[data-theme="dark"] .theme-knopf .ic-mond { display: none; }

/* Burger → X */
.burger-striche { position: relative; width: 22px; height: 14px; }
.burger-striche span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .28s var(--ease-out), top .28s var(--ease-out); }
.burger-striche span:first-child { top: 2px; }
.burger-striche span:last-child { top: 10px; }
.burger[aria-expanded="true"] .burger-striche span:first-child { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-striche span:last-child { top: 6px; transform: rotate(-45deg); }

/* Vollbild-Menü (mobil): liegt unter dem Kopf, sperrt die Seite (html.menue-offen). Die Fläche (Material) reicht bis oben und trägt
   so auch die Kopfzeile (ein Material, nie Glas auf Glas). Gerollt wird nur .menue-rollbar, die erst unter der Kopfzeile beginnt;
   oben ein weicher Übergang (Maske 16 px) statt Kante – unsichtbar, solange ganz oben (16 px Innenabstand).
   --menue-oben setzt 20-kopf.js beim Öffnen auf die gemessene Unterkante des Kopfs: der Vorschau-Balken (live=false) ist je nach
   Breite, Schriftgröße und Scrollstand 0 bis 80 px hoch, ein fester Wert schob die Einträge unter den Kopf (Klicks ins Leere). */
.menue { position: fixed; inset: 0; z-index: 55; background: var(--c-papier); display: flex; flex-direction: column;
  padding-top: var(--menue-oben, calc(env(safe-area-inset-top) + var(--kopf-h))); }
.menue[hidden] { display: none; }
.menue-rollbar { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 32px;
  padding: 16px 0 calc(24px + env(safe-area-inset-bottom));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px); mask-image: linear-gradient(to bottom, transparent 0, #000 16px); }
/* Nur html sperren: overflow am body machte ihn zum Scroll-Container, der klebende Kopf rutschte dann gescrollt aus dem Bild */
html.menue-offen { overflow: hidden; }
.menue-nav > ul, .menue-unter { list-style: none; margin: 0; padding: 0; }
.menue-nav, .menue-kontakt { padding-inline: max(24px, env(safe-area-inset-left)); }
.menue-nav > ul > li { border-bottom: 1px solid var(--c-linie); padding-block: 10px; }
.menue-haupt { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 1.75rem; line-height: 1.2; color: var(--c-titel);
  text-decoration: none; padding-block: 6px; }
.menue-unter { display: grid; gap: 0; padding: 4px 0 4px 16px; margin-inline-start: 2px; border-inline-start: 1px solid var(--c-linie); }
.menue-unter a { display: flex; align-items: center; min-height: 44px; color: var(--c-text-2); text-decoration: none; font-size: 1.0625rem; }
/* „Start“ klein ganz oben (Logo führt ebenfalls zur Startseite) */
.menue-start .menue-haupt { display: flex; align-items: center; min-height: 44px; font-size: 1.125rem; font-family: var(--font-text); font-weight: 400; color: var(--c-text-2); }
.menue-nav > ul > li.menue-start { padding-block: 0 4px; }
.menue a[aria-current="page"] { color: var(--c-akzent-text); }
/* minmax(0, 1fr): bei 200 % Schrift war der Google-Badge (437 px) breiter als die Spalte, die Rollfläche rollte seitwärts */
.menue-kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: auto; }
.menue-kontakt .btn { width: 100%; }
.menue-neben { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 68.75em) { .menue { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .menue.ist-offen { animation: menue-ein .26s var(--ease-out); }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li { animation: menue-zeile .38s var(--ease-out) both; }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li:nth-child(2) { animation-delay: 30ms; }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li:nth-child(3) { animation-delay: 60ms; }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li:nth-child(4) { animation-delay: 90ms; }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li:nth-child(5) { animation-delay: 120ms; }
  html:not([data-motion="off"]) .menue.ist-offen .menue-nav > ul > li:nth-child(6) { animation-delay: 150ms; }
}
@keyframes menue-ein { from { opacity: 0; } }
@keyframes menue-zeile { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 68.75em) {
  body.mit-held .kopf-cta { transition: opacity .2s ease, visibility 0s linear .2s; }
  body.mit-held:not(.held-weg) .kopf-cta { opacity: 0; visibility: hidden; }
  body.mit-held.held-weg .kopf-cta { opacity: 1; visibility: visible; transition-delay: 0s; }
}

/* ===== 20-held.css ===== */
/* Startseite: Held. Mobil Foto oben (4:3, alle drei Gesichter bleiben, kein Zuschnitt), Text darunter.
   Ab 960 px Foto links bis an den Rand, Text rechts. Showcase-Moment: das Foto öffnet sich beim Laden aus einer
   Maske und wandert beim Scrollen leicht gegen (nur transform, kein Pinning, aus bei reduzierter Bewegung). */
.held { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 48px); padding-block: 12px clamp(48px, 7vw, 96px); }
.held-bild { margin-inline: 12px; border-radius: var(--r-gross); overflow: hidden; background: var(--c-flaeche);
  aspect-ratio: 4 / 3; isolation: isolate; }
.held-bild .bild, .held-bild .bild img { width: 100%; height: 100%; }
.held-bild .bild img { object-fit: cover; object-position: 50% 45%; }
.held-text { padding-inline: max(20px, min(5vw, 48px)); max-width: 40rem; }
.held-titel { font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.25rem); line-height: 1.05; letter-spacing: -0.01em; }
.held-fragen { margin-top: clamp(18px, 2.4vw, 28px); font-size: clamp(1.125rem, 1.02rem + .45vw, 1.3125rem); line-height: 1.55; color: var(--c-text); }
.held-antwort { margin-top: 18px; font-family: var(--font-titel); font-weight: 500; font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height: 1.25; color: var(--c-akzent-text); }
.held .aktionen { margin-top: clamp(24px, 3vw, 36px); }
/* Desktop-Regeln gelten nur für Held 1; .held--wald (21-held-wald.css) baut ab 960 px eigenständig */
@media (min-width: 60em) {
  .held:not(.held--wald) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; column-gap: clamp(40px, 5vw, 88px); padding-block-start: clamp(12px, 2vw, 32px); }
  .held:not(.held--wald) .held-bild { margin-inline: 0; border-radius: 0 var(--r-gross) var(--r-gross) 0; }
  .held:not(.held--wald) .held-text { padding-inline: 0 max(24px, min(5vw, 72px)); }
  .held:not(.held--wald) .held-fragen { max-width: 34rem; }
}
@media (min-width: 100em) { .held:not(.held--wald) .held-bild { border-radius: var(--r-gross); margin-inline-start: max(0px, calc((100vw - 1600px) / 2)); } }

/* Showcase-Moment */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .held-bild { animation: held-maske 1.25s var(--ease-out) both; }
  html.js:not([data-motion="off"]) .held-bild .bild img { animation: held-zoom 1.6s var(--ease-out) both; }
  html.js:not([data-motion="off"]) .held-text > * { animation: held-text .9s var(--ease-out) both; }
  html.js:not([data-motion="off"]) .held-text > :nth-child(2) { animation-delay: .12s; }
  html.js:not([data-motion="off"]) .held-text > :nth-child(3) { animation-delay: .22s; }
  html.js:not([data-motion="off"]) .held-text > :nth-child(4) { animation-delay: .3s; }
  html.js:not([data-motion="off"]) .held-bild .bild { transform: translate3d(0, var(--held-y, 0px), 0) scale(1.08); will-change: transform; }
  /* Held 2 am Desktop: Foto ist Endkarte des Bildgangs, keine Maske, kein Scroll-Versatz (der Wald trägt die Tiefe) */
  @media (min-width: 60em) {
    html.js:not([data-motion="off"]) .held--wald .held-bild { animation: none; }
    html.js:not([data-motion="off"]) .held--wald .held-bild .bild img { animation: none; }
    html.js:not([data-motion="off"]) .held--wald .held-bild .bild { transform: none; will-change: auto; }
  }
}
@keyframes held-maske { from { clip-path: inset(7% 9% 7% 9% round var(--r-gross)); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes held-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes held-text { from { opacity: 0; transform: translateY(14px); } }

/* ===== 21-held-wald.css ===== */
/* Startseite: Held 2 am Desktop (ab 960 px, Inhaber 31.10.2026). Markup inc/held.php, Bewegung js/41-held-wald.js.
   Aufbau nach Hero-Referenz 13/14 (Perspektiv-Galerie, zentriert): Textblock mittig (Eyebrow, Titel, kurze Unterzeile, Antwort, Tasten),
   darunter ein Bildgang mit Fluchtpunkt in der Mitte: außen je eine große Vorschaukarte (zur Mitte hin gedreht, Trapez), dazwischen
   je vier Blogfotos, die zur Mitte kleiner werden; ganz vorn in der Mitte, unten am Rand, das Foto der drei Hunde (3:2) mit der
   Google-Pille mittig unten. Keine Porträt-Kachel: der Abschnitt direkt darunter zeigt Porträt und „Über mich“ (Inhaber 31.10.2026).
   Dahinter ein Wald aus fünf Ebenen (Disney-Multiplane); hinter dem Text eine weiche Wolke in Papierfarbe (dunkel: Waldgrün).
   1 Lichtung/Himmel steht, 2–3 Baumreihen, 4 Stämme, 5 Boden. Hell = Nachmittag mit unscharfen Vögeln zwischen den Ebenen, dunkel = Nacht mit Glühwürmchen unten (keine Tieraugen mehr, Inhaber 31.10.2026).
   Stapel in .held (isolation): Ebenen 1–5 < Gang < Hundefoto und Text. Das Skript lädt die Ebenen und bewegt sie zu Maus und
   Scroll. Unter 960 px gelten die Regeln aus 20-held.css; Wald, Gang, Eyebrow und Kurztext sind dort nicht da. */
.held-wald, .held-gang, .held-eyebrow, .held-fragen--kurz, .wa-held-pfote { display: none; }
@media (min-width: 60em) { .held--wald .wa-held-pfote { display: block; } }

@media (min-width: 60em) {
  .held.held--wald { position: relative; isolation: isolate; overflow: hidden;
    /* Vollbild (Pflichtstandard §19): der Held beginnt hinter dem Kopf (Inhaber 31.10.2026, Kopf durchsichtig bis zum Scrollen) und
       reicht bis zur Bildschirmkante: Höhe = Bildschirm minus Vorschau-Leiste, keine Obergrenze */
    margin-top: calc(-1 * var(--kopf-h)); min-height: max(640px, calc(100svh - var(--vorschau-h, 0px))); padding: 0; background: var(--c-flaeche); color: var(--c-text);
    --rand: max(20px, env(safe-area-inset-left), min(5vw, 48px));
    /* Karten vor dem unruhigen Wald: kräftiger, nach unten gerichteter Schatten plus feine helle Kante (Inhaber 31.10.2026) */
    --schatten-karte: 0 22px 48px rgb(0 0 0 / .42), 0 6px 14px rgb(0 0 0 / .28), 0 0 0 1px rgb(255 255 255 / .18);
    }
  .held-wald, .held-gang { display: block; }
  .held-wald { position: absolute; inset: 0; pointer-events: none; }

  /* Wald: Ebenen als Hintergrundbilder (Skript setzt sie nach dem Laden, Satz je Theme) mit knappem Rand für die Parallaxe, weich
     (Inhaber 31.10.2026: kleiner und unschärfer), damit Text und Karten davor stehen */
  .wald-ebene { position: absolute; inset: -3% -2%; background: center 70% / cover no-repeat; opacity: 0; transition: opacity .9s ease;
    will-change: transform; }   /* knapper Rand = weniger Vergrößerung; scharf (Inhaber 31.10.2026); nie CSS-blur(): fünf bewegte Ebenen damit kosteten die Bildrate */
  /* Nebelfläche hinter dem Text: vorerst aus (Inhaber 31.10.2026), Markup bleibt für den Fall, dass der Text sie braucht */
  .wald-nebel { display: none; }
  .held--wald[data-wald="an"] .wald-ebene { opacity: 1; }

  /* Vögel (hell) und Glühwürmchen (dunkel): nur mit Bewegung, nur wenn der Wald steht. Rein CSS, keine Eingabe. */
  .wald-voegel, .wald-gluehen { display: none; position: absolute; inset: 0; overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-theme="dark"]):not([data-motion="off"]) .held--wald[data-wald="an"] .wald-voegel { display: block; }
    html[data-theme="dark"]:not([data-motion="off"]) .held--wald[data-wald="an"] .wald-gluehen { display: block; }
  }
  /* Vogel: unscharfe Silhouette, flattert (scaleY) und fliegt durch, dann lange Pause; --y Flughöhe, --w Größe, --t Umlauf, --v Versatz, Bahn je nth-child */
  .vogel { position: absolute; left: 0; top: var(--y); width: var(--w); color: var(--c-vogel, #2F3A2B); filter: blur(1.4px); opacity: 0;
    animation: vogel-rechts-mittel var(--t) ease-in-out var(--v) infinite; will-change: transform; }
  .vogel svg { display: block; width: 100%; height: auto; overflow: visible; }
  /* Flügel schlagen um die Rumpflinie: erst fünf schnelle Schläge, dann Gleiten mit leicht angehobenen Flügeln (--schlag Rhythmus je Vogel; nicht --r, das ist der Radius-Token) */
  .vogel .fluegel { transform-box: view-box; transform-origin: 50% 70%; animation-name: fluegel-rhythmus; animation-duration: var(--schlag, 2.6s);
    animation-timing-function: linear; animation-iteration-count: infinite; }   /* Langform: var() in der animation-Kurzform ließ Chromium die Animation fallen */
  .vogel .fluegel-r { animation-delay: .05s; }
  .vogel:nth-child(3) .fluegel { --schlag: 4.8s; }   /* Kreisender: lange Gleitphasen */
  .vogel:nth-child(2) .fluegel { --schlag: 3.4s; }
  .vogel:nth-child(5) .fluegel { --schlag: 1.9s; }
  /* Fünf Vögel, jeder anders: Richtung (rechts/links), Tempo (Anteil des Umlaufs im Bild) und einer zieht erst zwei Bögen, bevor er abfliegt */
  .vogel:nth-child(1) { --y: 30%; --w: 26px; --t: 19s; --v: 2s; animation-name: vogel-rechts-schnell; }
  .vogel:nth-child(2) { --y: 22%; --w: 18px; --t: 27s; --v: 8s; filter: blur(2px); animation-name: vogel-links-langsam; }
  .vogel:nth-child(3) { --y: 40%; --w: 32px; --t: 41s; --v: 14s; animation-name: vogel-kreis; }
  .vogel:nth-child(4) { --y: 34%; --w: 20px; --t: 33s; --v: 23s; animation-name: vogel-rechts-mittel; }
  .vogel:nth-child(5) { --y: 26%; --w: 22px; --t: 29s; --v: 31s; filter: blur(1.8px); animation-name: vogel-links-schnell; }
  /* Glühwürmchen (72, Lagen aus einem festen Zufallssatz): grüne Punkte im unteren Drittel, treiben langsam (--dx/--dy), glühen je Zyklus (7–12 s) rund 4 s weich auf und ab */
  .wald-gluehen i { --glut: #8FE85A; position: absolute; left: var(--x); top: var(--y); border-radius: 50%; background: #DDFFB0;
    box-shadow: 0 0 6px 2px color-mix(in srgb, var(--glut) 75%, transparent), 0 0 16px 5px color-mix(in srgb, var(--glut) 30%, transparent);
    opacity: 0; animation: gluehen-treiben var(--t) ease-in-out var(--v) infinite alternate, gluehen-blinken var(--b) ease-in-out var(--v) infinite; will-change: transform, opacity; }
  .wald-gluehen i:nth-child(1) { --x: -0.0%; --y: 76.2%; --dx: 49px; --dy: -14px; --t: 12.4s; --b: 8.9s; --v: 7.4s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(2) { --x: 3.5%; --y: 55.7%; --dx: 49px; --dy: 13px; --t: 9.9s; --b: 7.4s; --v: 0.3s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(3) { --x: 3.7%; --y: 50.6%; --dx: -43px; --dy: -18px; --t: 12.0s; --b: 11.2s; --v: 8.7s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(4) { --x: 4.6%; --y: 66.3%; --dx: -13px; --dy: -3px; --t: 10.0s; --b: 10.4s; --v: 7.0s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(5) { --x: 7.6%; --y: 89.8%; --dx: 7px; --dy: -28px; --t: 15.6s; --b: 7.9s; --v: 0.5s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(6) { --x: 6.8%; --y: 53.2%; --dx: 42px; --dy: -17px; --t: 15.7s; --b: 9.7s; --v: 8.6s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(7) { --x: 9.3%; --y: 88.5%; --dx: 44px; --dy: -22px; --t: 14.3s; --b: 9.7s; --v: 9.5s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(8) { --x: 10.1%; --y: 64.7%; --dx: -2px; --dy: -34px; --t: 13.2s; --b: 11.0s; --v: 2.4s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(9) { --x: 12.7%; --y: 72.1%; --dx: 39px; --dy: 33px; --t: 14.2s; --b: 9.2s; --v: 6.6s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(10) { --x: 13.8%; --y: 59.0%; --dx: 8px; --dy: -16px; --t: 13.0s; --b: 10.9s; --v: 7.5s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(11) { --x: 14.4%; --y: 69.3%; --dx: -15px; --dy: 10px; --t: 9.6s; --b: 6.5s; --v: 6.2s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(12) { --x: 15.9%; --y: 54.5%; --dx: 38px; --dy: 8px; --t: 10.7s; --b: 11.1s; --v: 9.7s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(13) { --x: 16.8%; --y: 62.2%; --dx: 36px; --dy: 11px; --t: 9.3s; --b: 9.9s; --v: 4.1s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(14) { --x: 19.7%; --y: 65.5%; --dx: -42px; --dy: -26px; --t: 12.5s; --b: 8.9s; --v: 0.4s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(15) { --x: 19.6%; --y: 93.4%; --dx: 22px; --dy: 14px; --t: 13.4s; --b: 11.5s; --v: 1.3s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(16) { --x: 20.6%; --y: 51.4%; --dx: 11px; --dy: 14px; --t: 13.1s; --b: 8.6s; --v: 3.5s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(17) { --x: 23.3%; --y: 51.9%; --dx: 47px; --dy: 10px; --t: 9.7s; --b: 12.1s; --v: 0.7s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(18) { --x: 25.3%; --y: 63.3%; --dx: 32px; --dy: -38px; --t: 8.9s; --b: 8.6s; --v: 9.6s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(19) { --x: 26.4%; --y: 74.1%; --dx: 38px; --dy: 25px; --t: 12.4s; --b: 7.4s; --v: 6.7s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(20) { --x: 26.6%; --y: 80.8%; --dx: -39px; --dy: 23px; --t: 12.3s; --b: 10.1s; --v: 5.8s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(21) { --x: 29.3%; --y: 63.1%; --dx: -7px; --dy: -13px; --t: 13.9s; --b: 12.6s; --v: 1.6s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(22) { --x: 29.0%; --y: 62.2%; --dx: -1px; --dy: -30px; --t: 13.0s; --b: 12.7s; --v: 7.2s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(23) { --x: 31.6%; --y: 77.5%; --dx: 32px; --dy: 18px; --t: 10.0s; --b: 12.0s; --v: 0.0s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(24) { --x: 31.7%; --y: 56.3%; --dx: -11px; --dy: -16px; --t: 13.5s; --b: 9.6s; --v: 6.8s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(25) { --x: 33.1%; --y: 63.3%; --dx: -49px; --dy: -13px; --t: 15.3s; --b: 9.9s; --v: 0.5s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(26) { --x: 35.3%; --y: 78.2%; --dx: 42px; --dy: 32px; --t: 15.7s; --b: 9.8s; --v: 7.4s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(27) { --x: 37.5%; --y: 92.0%; --dx: 45px; --dy: -32px; --t: 16.0s; --b: 9.6s; --v: 7.4s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(28) { --x: 38.4%; --y: 72.5%; --dx: 20px; --dy: -19px; --t: 8.8s; --b: 10.6s; --v: 2.5s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(29) { --x: 39.4%; --y: 54.2%; --dx: 25px; --dy: 12px; --t: 13.3s; --b: 10.0s; --v: 0.3s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(30) { --x: 41.2%; --y: 56.6%; --dx: 37px; --dy: -29px; --t: 14.5s; --b: 12.8s; --v: 8.8s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(31) { --x: 43.1%; --y: 71.5%; --dx: 28px; --dy: 14px; --t: 13.1s; --b: 9.6s; --v: 6.2s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(32) { --x: 44.7%; --y: 58.1%; --dx: -49px; --dy: 36px; --t: 10.7s; --b: 10.4s; --v: 4.0s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(33) { --x: 45.8%; --y: 73.6%; --dx: 16px; --dy: 9px; --t: 9.1s; --b: 10.9s; --v: 9.3s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(34) { --x: 47.6%; --y: 77.5%; --dx: -28px; --dy: 34px; --t: 11.2s; --b: 12.0s; --v: 8.9s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(35) { --x: 47.5%; --y: 68.3%; --dx: 4px; --dy: 30px; --t: 8.0s; --b: 7.8s; --v: 2.9s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(36) { --x: 48.4%; --y: 75.4%; --dx: -18px; --dy: -25px; --t: 8.0s; --b: 8.5s; --v: 0.2s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(37) { --x: 50.7%; --y: 88.3%; --dx: -46px; --dy: 28px; --t: 13.1s; --b: 8.8s; --v: 2.8s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(38) { --x: 51.8%; --y: 71.9%; --dx: 10px; --dy: 34px; --t: 8.8s; --b: 12.1s; --v: 8.0s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(39) { --x: 53.0%; --y: 81.6%; --dx: -37px; --dy: 18px; --t: 14.2s; --b: 7.3s; --v: 0.5s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(40) { --x: 56.0%; --y: 59.5%; --dx: -9px; --dy: 14px; --t: 14.7s; --b: 8.3s; --v: 9.0s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(41) { --x: 56.0%; --y: 53.7%; --dx: -3px; --dy: -35px; --t: 13.1s; --b: 12.1s; --v: 3.4s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(42) { --x: 58.3%; --y: 91.3%; --dx: 39px; --dy: 21px; --t: 8.8s; --b: 12.8s; --v: 4.2s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(43) { --x: 58.8%; --y: 69.2%; --dx: 42px; --dy: -10px; --t: 12.7s; --b: 11.3s; --v: 9.9s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(44) { --x: 59.3%; --y: 82.8%; --dx: 45px; --dy: -37px; --t: 12.6s; --b: 10.0s; --v: 0.3s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(45) { --x: 62.2%; --y: 54.4%; --dx: 48px; --dy: -29px; --t: 12.7s; --b: 7.6s; --v: 2.6s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(46) { --x: 63.9%; --y: 50.6%; --dx: 30px; --dy: 9px; --t: 15.4s; --b: 6.9s; --v: 4.9s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(47) { --x: 65.5%; --y: 91.4%; --dx: -8px; --dy: 12px; --t: 10.2s; --b: 9.4s; --v: 8.9s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(48) { --x: 65.0%; --y: 93.7%; --dx: 36px; --dy: 16px; --t: 15.8s; --b: 10.2s; --v: 4.8s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(49) { --x: 67.0%; --y: 69.7%; --dx: -35px; --dy: 27px; --t: 8.4s; --b: 8.6s; --v: 5.3s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(50) { --x: 68.7%; --y: 86.8%; --dx: 8px; --dy: 13px; --t: 8.8s; --b: 10.8s; --v: 8.0s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(51) { --x: 69.9%; --y: 68.3%; --dx: 28px; --dy: -19px; --t: 15.2s; --b: 8.3s; --v: 0.8s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(52) { --x: 72.1%; --y: 50.9%; --dx: -41px; --dy: 16px; --t: 10.4s; --b: 7.3s; --v: 4.7s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(53) { --x: 71.7%; --y: 92.1%; --dx: 15px; --dy: -12px; --t: 8.7s; --b: 8.4s; --v: 3.4s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(54) { --x: 74.4%; --y: 88.2%; --dx: 1px; --dy: -24px; --t: 12.8s; --b: 7.3s; --v: 6.0s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(55) { --x: 76.0%; --y: 56.7%; --dx: 22px; --dy: -2px; --t: 11.6s; --b: 12.3s; --v: 5.5s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(56) { --x: 77.6%; --y: 57.2%; --dx: 34px; --dy: -19px; --t: 10.0s; --b: 7.7s; --v: 2.6s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(57) { --x: 77.7%; --y: 65.6%; --dx: -4px; --dy: -24px; --t: 14.2s; --b: 9.0s; --v: 5.4s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(58) { --x: 80.2%; --y: 51.2%; --dx: 48px; --dy: -24px; --t: 9.4s; --b: 8.7s; --v: 8.3s; width: 5px; height: 5px; }
  .wald-gluehen i:nth-child(59) { --x: 80.5%; --y: 89.1%; --dx: 29px; --dy: 11px; --t: 16.0s; --b: 9.5s; --v: 3.9s; width: 6px; height: 6px; }
  .wald-gluehen i:nth-child(60) { --x: 82.1%; --y: 74.0%; --dx: 18px; --dy: -24px; --t: 13.8s; --b: 11.0s; --v: 6.1s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(61) { --x: 83.0%; --y: 52.3%; --dx: 41px; --dy: 14px; --t: 10.0s; --b: 10.0s; --v: 7.9s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(62) { --x: 86.2%; --y: 88.6%; --dx: -33px; --dy: 0px; --t: 12.2s; --b: 12.2s; --v: 9.0s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(63) { --x: 87.7%; --y: 84.5%; --dx: 0px; --dy: -24px; --t: 10.2s; --b: 8.9s; --v: 6.4s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(64) { --x: 87.0%; --y: 74.6%; --dx: -38px; --dy: -28px; --t: 10.4s; --b: 11.3s; --v: 7.8s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(65) { --x: 89.1%; --y: 82.8%; --dx: 16px; --dy: 17px; --t: 12.8s; --b: 9.8s; --v: 1.0s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(66) { --x: 90.6%; --y: 84.4%; --dx: -32px; --dy: 13px; --t: 15.2s; --b: 8.4s; --v: 9.5s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(67) { --x: 93.2%; --y: 66.7%; --dx: -14px; --dy: 34px; --t: 12.6s; --b: 11.5s; --v: 5.4s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(68) { --x: 94.6%; --y: 70.9%; --dx: -7px; --dy: 36px; --t: 12.6s; --b: 7.3s; --v: 9.2s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(69) { --x: 94.0%; --y: 63.0%; --dx: 6px; --dy: -14px; --t: 12.5s; --b: 12.0s; --v: 3.8s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(70) { --x: 97.0%; --y: 82.6%; --dx: 21px; --dy: -23px; --t: 10.9s; --b: 12.4s; --v: 3.7s; width: 4px; height: 4px; }
  .wald-gluehen i:nth-child(71) { --x: 98.7%; --y: 87.4%; --dx: 37px; --dy: 6px; --t: 14.8s; --b: 8.7s; --v: 0.2s; width: 3px; height: 3px; }
  .wald-gluehen i:nth-child(72) { --x: 98.7%; --y: 79.0%; --dx: 12px; --dy: 8px; --t: 9.8s; --b: 8.2s; --v: 5.5s; width: 4px; height: 4px; }

  /* Raster: oben der Textblock mittig, darunter der Gang über die ganze Breite; die Reihe steht mittig zwischen Tasten und Hundefoto */
  .held.held--wald { display: grid; gap: 0; align-items: start; padding-top: calc(var(--kopf-h) + clamp(20px, 4vh, 56px));
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    /* Gang: Höhen an der Bildschirmhöhe (Held ≈ 100svh − Kopf); --h0 innerste, --h1 äußerste Blogkarte, Vorschaukarten außen, Hundefoto vorn */
    --h0: clamp(90px, 12svh, 300px); --h1: clamp(180px, 25svh, 620px); --gross-h: clamp(230px, 32svh, 800px); --vorschau-b: clamp(180px, 15vw, 640px);
    --mitte-h: clamp(160px, 22svh, 540px); --gang-gap: 10px; --kamera: 1400px; }
  .held--wald .held-text { grid-row: 1; justify-self: center; position: relative; z-index: 4; max-width: 52rem; padding: 0 var(--rand); text-align: center; }
  /* Wolke hinter dem Text (Inhaber 31.10.2026): weiche Fläche in Papierfarbe, dunkel in Waldgrün, aus drei Ellipsen, statt der alten Nebelbahn */
  .held--wald .held-text::before { content: ""; position: absolute; z-index: -1; inset: -12% -6%; pointer-events: none; filter: blur(18px); opacity: .7;   /* schmal, 70 % Deckkraft, hell wie dunkel (Inhaber 31.10.2026) */
    background:
      radial-gradient(ellipse 54% 60% at 50% 52%, rgb(var(--c-nebel) / .94) 0 46%, rgb(var(--c-nebel) / 0) 100%),
      radial-gradient(ellipse 36% 46% at 30% 42%, rgb(var(--c-nebel) / .85) 0 42%, rgb(var(--c-nebel) / 0) 100%),
      radial-gradient(ellipse 36% 46% at 70% 44%, rgb(var(--c-nebel) / .85) 0 42%, rgb(var(--c-nebel) / 0) 100%); }
  .held--wald .held-eyebrow { display: inline-block; margin: 0 0 clamp(14px, 2vh, 22px); padding: 7px 14px; border-radius: 999px;
    background: var(--c-pfote-flaeche); color: var(--c-akzent-text); font-family: var(--font-ui); font-weight: 500; font-size: .9375rem; line-height: 1.2; }
  .held--wald .held-titel { font-size: clamp(2.75rem, 1.4rem + 3.4vw, 4.5rem); }
  .held--wald .held-fragen { display: none; }
  .held--wald .held-fragen--kurz { display: block; max-width: 40rem; margin-inline: auto; font-size: clamp(1.0625rem, .95rem + .4vw, 1.25rem); line-height: 1.5; text-wrap: balance; }
  .held--wald .held-antwort { margin-top: 14px; }
  .held--wald .aktionen { justify-content: center; margin-top: clamp(20px, 2.6vw, 30px); }
  /* WhatsApp-Knopf im Held (Inhaber 31.10.2026): dieselbe Sprechblase wie die schwebende Taste (Moos, Pfote, grüne WhatsApp-Plakette),
     größer; die schwebende Taste unten rechts bleibt im Held versteckt und fliegt beim Scrollen in die Ecke (72-wa-taste.css) */
  .held--wald .wa-held { position: relative; min-height: 60px; padding: 0 30px 0 22px; gap: 12px; font-size: 1.125rem; border-radius: 999px;
    background: var(--c-wa-blase); color: var(--c-wa-pfote); box-shadow: 0 10px 28px rgb(36 39 31 / .28); }
  html[data-theme="dark"] .held--wald .wa-held { box-shadow: 0 0 0 1.5px rgb(0 0 0 / .4), 0 10px 28px rgb(0 0 0 / .45); }
  .held--wald .wa-held .wa-held-pfote { width: 24px; height: 24px; transition: transform .25s var(--ease-out); }
  .held--wald .wa-held .ic:not(.wa-held-pfote) { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; padding: 5px; border-radius: 50%;
    background: #25D366; color: #fff; box-shadow: 0 0 0 2px var(--c-papier); }
  @media (hover: hover) and (pointer: fine) {
    .held--wald .wa-held:hover { background: var(--c-wa-blase); filter: brightness(1.06); }
    .held--wald .wa-held:hover .wa-held-pfote { transform: translateY(-3px) rotate(-6deg); }
  }

  /* Hundefoto: ganz vorn in der Mitte, unter der Kartenreihe, sitzt unten auf dem Rand, Google-Pille mittig unten darauf */
  .held--wald .held-bild { position: absolute; z-index: 4; left: 50%; bottom: 0; width: auto; height: var(--mitte-h); aspect-ratio: 3 / 2; margin: 0;
    transform: translateX(-50%); overflow: hidden; border-radius: var(--r-gross) var(--r-gross) 0 0; box-shadow: var(--schatten-karte); background: var(--c-karte); }
  .held--wald .held-bild .bild, .held--wald .held-bild .bild img { display: block; width: 100%; height: 100%; }
  .held--wald .held-bild .bild img { object-fit: cover; object-position: 50% 45%; }
  .held--wald .g-pille { left: 50%; bottom: 12px; top: auto; transform: translateX(-50%); }
  .held--wald .g-pille:active { transform: translateX(-50%) scale(.97); }
  @media (max-width: 80em) { .held--wald .g-pille .g-sterne { display: none; } }   /* Foto schmal: Wert + Anzahl tragen die Aussage */

  /* Gang: eine Reihe, mittig, alle Karten auf einer gemeinsamen Mittelachse (Oberkanten hängen durch, Unterkanten wölben sich, wie in der
     Referenz); zur Mitte kleiner, ohne Lücke in der Mitte. Die Zeile füllt den Platz unter dem Text, lässt unten die Höhe des Hundefotos frei
     und zentriert die Reihe darin; die Vorschaukarten dürfen darüber hinausragen (außen, neben dem Text).
     --d Abstand zur Mitte (0,25 … 1), --seite −1 links / 1 rechts. Drehung um die Senkrechte vom Betrachter weg: Innenkante kürzer (Trapez). */
  .held-gang { grid-row: 2; grid-column: 1; align-self: stretch; position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; min-height: 0;
    padding: clamp(8px, 1.5vh, 20px) 0 var(--mitte-h); }
  /* Die Reihe ist im Fluss nur so hoch wie die äußerste Blogkarte; die höheren Vorschaukarten ragen oben und unten gleich weit hinaus */
  .gang-reihe { display: flex; justify-content: center; align-items: center; height: var(--h1); gap: var(--gang-gap); margin: 0; padding: 0; list-style: none;
    translate: 0 -5svh; }   /* Reihe ein Stück über der Mitte zwischen Tasten und Hundefoto (Inhaber 31.10.2026), ohne den Held höher zu machen */
  .gang-platz { flex: none; position: relative; aspect-ratio: 2 / 3; height: calc(var(--h0) + (var(--h1) - var(--h0)) * pow(var(--d), 1.3));
    transform: perspective(var(--kamera)) rotateY(calc(-1 * var(--seite) * var(--d) * 40deg));
    transform-origin: calc(50% - var(--seite) * 50%) 50%; transition: transform .4s var(--ease-out); }
  .gang-platz:is(:hover, :focus-within) { transform: translateY(-8px) perspective(var(--kamera)) rotateY(0deg); z-index: 2; }
  /* Vorschaukarten außen: hoch, breit, stark gedreht, Titel immer sichtbar; laufen bei schmalen Fenstern über den Rand hinaus */
  .gang-platz.gang-vorschau { flex: 1 1 var(--vorschau-b); aspect-ratio: auto; min-width: var(--vorschau-b); max-width: 26vw; height: var(--gross-h);
    transform: perspective(var(--kamera)) rotateY(calc(-1 * var(--seite) * 42deg)); }   /* füllen die Reihe bis an beide Ränder */
  .gang-platz:first-child { margin-left: -4vw; }   /* Außenkante bis über den Rand, die Perspektive zieht sie sonst ein Stück herein */
  .gang-platz:last-child { margin-right: -4vw; }
  .gang-platz.gang-vorschau:is(:hover, :focus-within) { transform: translateY(-8px) perspective(var(--kamera)) rotateY(calc(-1 * var(--seite) * 26deg)); }
  .gang-karte { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--r); color: var(--c-karte-titel); text-decoration: none;
    background: var(--c-karte); box-shadow: var(--schatten-karte); }
  .gang-vorschau .gang-karte { border-radius: var(--r-gross); }
  .gang-karte .bild, .gang-karte .bild img { display: block; width: 100%; height: 100%; }
  .gang-karte .bild img { object-fit: cover; }
  .gang-karte:focus-visible { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
  /* Titel: unten auf der Karte, bei Blogkarten erst bei Hover/Fokus (für Bildschirmleser immer da), auf Vorschaukarten immer */
  .gang-titel { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 12px; font-family: var(--font-ui); font-weight: 500; font-size: .9375rem; line-height: 1.3;
    background: linear-gradient(to top, rgb(var(--c-karte-titel-grund) / .82), rgb(var(--c-karte-titel-grund) / 0)); opacity: 0; transform: translateY(6px);
    transition: opacity .3s ease, transform .3s var(--ease-out); text-wrap: balance; }
  .gang-platz:is(:hover, :focus-within) .gang-titel, .gang-vorschau .gang-titel { opacity: 1; transform: none; }

  /* Lauf (Skript, 2 s nach dem Laden, nur mit Bewegung): die Plätze bleiben als unsichtbare Maßvorlage stehen, die Karten liegen in
     .gang-lauf absolut über der Reihe; Lage und Drehung je Frame per transform, Größe gleichmäßig skaliert (Grundmaß = äußerste Blogkarte 2:3),
     nur Vorschaukarten und der Übergang dorthin setzen den Kasten direkt (sonst verzerrt das Foto).
     Hover oder Fokus auf einer Karte hält den Lauf an; Karten an den Rändern (.an-kante) zeigen den Titel wie die Vorschaukarten. */
  .held-gang.laeuft .gang-platz { visibility: hidden; }
  .gang-lauf { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .gang-lauf .gang-karte { position: absolute; left: 0; top: 0; pointer-events: auto; transform-origin: 50% 50%;   /* Kasten setzt das Skript */
    will-change: transform; border-radius: var(--r-gross); box-shadow: var(--schatten-karte); }
  .gang-lauf .gang-karte.ist-weg { visibility: hidden; }
  .gang-lauf .gang-karte:is(:hover, :focus-visible) .gang-titel, .gang-lauf .gang-karte.an-kante .gang-titel { opacity: 1; transform: none; }
  .gang-lauf .gang-karte.an-kante .gang-titel { font-size: 1.0625rem; padding: 48px 16px 18px; }
  .gang-vorschau .gang-titel { font-size: 1.0625rem; padding: 48px 16px 18px; }

  /* Flache Bildschirme (bis 950 px, z. B. 1366 × 768 und 1440 × 900): Text kompakter, Gang niedriger */
  @media (max-height: 950px) {
    .held.held--wald { --gross-h: clamp(190px, 26svh, 320px); --mitte-h: clamp(140px, 20svh, 210px); --h1: clamp(160px, 23svh, 250px); padding-top: calc(var(--kopf-h) + 12px); }
    .held--wald .held-titel { font-size: clamp(2.25rem, 1rem + 2.6vw, 3.25rem); }
    .held--wald .held-fragen--kurz { font-size: 1rem; line-height: 1.45; }
    .held--wald .held-antwort { margin-top: 10px; }
    .held--wald .aktionen { margin-top: 18px; }
    .held--wald .held-eyebrow { margin-bottom: 10px; }
    .held--wald .g-pille .g-sterne { display: none; }
  }

  /* Ohne Bewegung: kein Lauf (Skript startet nicht), Karten drehen sich nicht, Titel erscheint ohne Übergang */
  html[data-motion="off"] :is(.gang-platz, .gang-titel) { transition: none; }
}
@media (min-width: 60em) and (prefers-reduced-motion: reduce) {
  .gang-platz, .gang-titel { transition: none; }
}
@media (min-width: 60em) and (forced-colors: active) {
  .held-wald { display: none; }
  .gang-karte, .held-bild { border: 1px solid CanvasText; }
}
@keyframes vogel-rechts-schnell { 0% { transform: translate(-8vw, 0); opacity: 0; } 1% { opacity: .85; } 21% { transform: translate(108vw, -9vh); opacity: .85; } 21.1%, 100% { transform: translate(108vw, -9vh); opacity: 0; } }
@keyframes vogel-rechts-mittel { 0% { transform: translate(-8vw, 0); opacity: 0; } 1% { opacity: .85; } 22% { transform: translate(108vw, 5vh); opacity: .85; } 22.1%, 100% { transform: translate(108vw, 5vh); opacity: 0; } }
@keyframes vogel-links-langsam { 0% { transform: translate(108vw, 0); opacity: 0; } 1% { opacity: .85; } 34% { transform: translate(-8vw, -7vh); opacity: .85; } 34.1%, 100% { transform: translate(-8vw, -7vh); opacity: 0; } }
@keyframes vogel-links-schnell { 0% { transform: translate(108vw, 0); opacity: 0; } 1% { opacity: .85; } 16% { transform: translate(-8vw, 6vh); opacity: .85; } 16.1%, 100% { transform: translate(-8vw, 6vh); opacity: 0; } }
/* Kreisender Vogel: kommt von links, zieht zwei weite, gleichmäßige Schleifen (Ellipse, 28 Stützpunkte) mit Schräglage in der Kurve, näher = größer, und fliegt rechts ab */
@keyframes vogel-kreis { 0% { transform: translate(-8vw, 4vh) rotate(0deg) scale(.9); opacity: 0; } 1% { opacity: .85; } 8% { transform: translate(24vw, -2vh) rotate(-6deg) scale(.95); } 9.9% { transform: translate(28.2vw, -3.5vh) rotate(-9deg) scale(0.90); } 11.7% { transform: translate(34.3vw, -6.3vh) rotate(-8deg) scale(0.84); } 13.6% { transform: translate(43.1vw, -7.8vh) rotate(-11deg) scale(0.80); } 15.4% { transform: translate(52.9vw, -7.8vh) rotate(-17deg) scale(0.80); } 17.3% { transform: translate(61.7vw, -6.3vh) rotate(-20deg) scale(0.84); } 19.1% { transform: translate(67.8vw, -3.5vh) rotate(-19deg) scale(0.90); } 21.0% { transform: translate(70.0vw, 0.0vh) rotate(-14deg) scale(0.98); } 22.9% { transform: translate(67.8vw, 3.5vh) rotate(-9deg) scale(1.05); } 24.7% { transform: translate(61.7vw, 6.3vh) rotate(-8deg) scale(1.11); } 26.6% { transform: translate(52.9vw, 7.8vh) rotate(-11deg) scale(1.15); } 28.4% { transform: translate(43.1vw, 7.8vh) rotate(-17deg) scale(1.15); } 30.3% { transform: translate(34.3vw, 6.3vh) rotate(-20deg) scale(1.11); } 32.1% { transform: translate(28.2vw, 3.5vh) rotate(-19deg) scale(1.05); } 34.0% { transform: translate(26.0vw, 0.0vh) rotate(-14deg) scale(0.98); } 35.9% { transform: translate(28.2vw, -3.5vh) rotate(-9deg) scale(0.90); } 37.7% { transform: translate(34.3vw, -6.3vh) rotate(-8deg) scale(0.84); } 39.6% { transform: translate(43.1vw, -7.8vh) rotate(-11deg) scale(0.80); } 41.4% { transform: translate(52.9vw, -7.8vh) rotate(-17deg) scale(0.80); } 43.3% { transform: translate(61.7vw, -6.3vh) rotate(-20deg) scale(0.84); } 45.1% { transform: translate(67.8vw, -3.5vh) rotate(-19deg) scale(0.90); } 47.0% { transform: translate(70.0vw, -0.0vh) rotate(-14deg) scale(0.97); } 48.9% { transform: translate(67.8vw, 3.5vh) rotate(-9deg) scale(1.05); } 50.7% { transform: translate(61.7vw, 6.3vh) rotate(-8deg) scale(1.11); } 52.6% { transform: translate(52.9vw, 7.8vh) rotate(-11deg) scale(1.15); } 54.4% { transform: translate(43.1vw, 7.8vh) rotate(-17deg) scale(1.15); } 56.3% { transform: translate(34.3vw, 6.3vh) rotate(-20deg) scale(1.11); } 58.1% { transform: translate(28.2vw, 3.5vh) rotate(-19deg) scale(1.05); } 60.0% { transform: translate(26.0vw, 0.0vh) rotate(-14deg) scale(0.98); } 68% { transform: translate(108vw, -10vh) rotate(4deg) scale(.9); opacity: .85; } 68.1%, 100% { transform: translate(108vw, -10vh) rotate(0deg) scale(.9); opacity: 0; } }
@keyframes fluegel-rhythmus { 0%, 7%, 14%, 21%, 28% { transform: scaleY(1); } 3.5%, 10.5%, 17.5%, 24.5%, 31.5% { transform: scaleY(.3); } 35%, 100% { transform: scaleY(1.12); } }
@keyframes gluehen-treiben { to { transform: translate(var(--dx), var(--dy)); } }
@keyframes gluehen-blinken { 0%, 42%, 100% { opacity: 0; } 52%, 78% { opacity: 1; } 90% { opacity: .15; } }

/* ===== 30-start.css ===== */
/* Startseite: Abschnitte unter dem Held. */
.start-ich { background: var(--c-flaeche); }
/* minmax(0, 1fr): bei 200 % Schrift bestimmte sonst das längste Wort („Nasenbeschäftigung“, Telefonnummer) die Spaltenbreite (320 px: +69 px Überlauf) */
.start-ich-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.portrait { max-width: 420px; }
.portrait .bild { border-radius: var(--r-gross); overflow: hidden; }
.portrait figcaption { margin-top: 12px; font-family: var(--font-titel); font-size: 1rem; color: var(--c-text-2); }
.start-ich-text > * + * { margin-top: 1.1em; }
.start-ich-text .lead { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.625rem); line-height: 1.45; }
.weiter-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
@media (min-width: 53.75em) { .start-ich-in { grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); } }

.start-kontakt-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.start-kontakt-text > * + * { margin-top: 24px; }
@media (min-width: 60em) { .start-kontakt-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; } }

.angebot { padding-block-start: 0; }
.angebot-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(24px, 3vw, 40px); }
.angebot-liste li { position: relative; padding-block: 22px 26px; border-top: 1px solid var(--c-linie-stark); font-family: var(--font-titel);
  font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.3; color: var(--c-text); text-wrap: pretty; }
.angebot-liste li::before { content: ""; position: absolute; top: -2px; left: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--c-marker); }
@media (min-width: 40em) { .angebot-liste { grid-template-columns: 1fr 1fr; } }
/* /kursangebot/: Abstand zur Überschrift wie auf der Startseite (Prüfung F3) */
.h2 + .angebot-liste-kurz { margin-top: clamp(20px, 3vw, 32px); }
@media (min-width: 62.5em) { .angebot-liste:not(.angebot-liste-kurz) { grid-template-columns: repeat(3, 1fr); } }
.angebot .h2 { margin-bottom: clamp(20px, 3vw, 36px); }

.schliesstage { background: var(--c-flaeche); }
.schliesstage-titel { max-width: 30ch; margin-bottom: clamp(20px, 3vw, 32px); }
.schliesstage-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.schliesstage-liste li { background: var(--c-karte); border: 1px solid var(--c-linie); border-radius: var(--r); padding: 22px 24px;
  font-family: var(--font-titel); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.3; }
.schliesstage-liste strong { font-weight: 500; color: var(--c-akzent-text); }
@media (min-width: 47.5em) { .schliesstage-liste { grid-template-columns: repeat(3, 1fr); } }

/* ===== 35-verkauf.css ===== */
/* Phase 2: Vertrauen, Kurse und Preise, Ablauf, Stimmen, FAQ, Abschluss-Band, Belege. Nur Tokens. */

/* Nachweis am Kopf von „Über mich“ (ersetzt die Vertrauensleiste, Inhaber 31.10.2026): Salbei beginnt direkt am Held.
   Gleiches 5/7-Raster wie Porträt und Text darunter, damit beide Zeilen eine Kante teilen. Aussage Alegreya, Belege Roboto,
   Zertifikate klein (nie breiter als die Datei, IHK hat 251 px), Unterschrift Jost. Keine Linien, keine Icons. */
.nachweis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px clamp(28px, 5vw, 72px); align-items: start;
  margin-block-end: clamp(48px, 7vw, 96px); }
.nachweis-aussage { font-family: var(--font-display); font-weight: 500; font-variant-numeric: lining-nums; color: var(--c-titel);
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem); line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; max-width: 22ch; }
.nachweis-belege { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px clamp(20px, 3vw, 40px); align-items: start; }
.nachweis-belege > p { color: var(--c-text-2); font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; max-width: 40em; hyphens: manual; overflow-wrap: break-word; }
.nachweis .raster.nachweis-bilder { grid-template-columns: repeat(2, 84px); gap: 14px; }
.nachweis-bilder .raster-link { aspect-ratio: 3 / 4; border-radius: 6px; background: var(--c-flaeche-2);
  box-shadow: 0 1px 2px rgb(36 39 31 / .10), 0 4px 12px rgb(36 39 31 / .08); }
.nachweis-bilder .raster-link img { object-position: 50% 0; }
.nachweis .raster figcaption { margin-top: 6px; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.3; color: var(--c-text-2); white-space: nowrap; }
@media (max-width: 29.9375em) { .nachweis-belege { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 53.75em) {
  .nachweis { grid-template-columns: minmax(260px, 5fr) minmax(0, 7fr); }
  .nachweis-aussage { max-width: none; }
  .nachweis-belege > p { padding-top: .35em; }
}

/* Kurse und Preise */
.kurse-preise { background: var(--c-flaeche); }
.angebote { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 24px); }
@media (min-width: 40em) { .angebote { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68.75em) { .angebote { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.angebot { display: flex; position: relative; }
.angebot article { display: flex; flex-direction: column; width: 100%; background: var(--c-karte); border-radius: var(--r); overflow: hidden;
  border: 1px solid var(--c-linie); transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.angebot-bild { aspect-ratio: 2 / 3; overflow: hidden; background: var(--c-flaeche-2); }
@media (max-width: 39.9375em) { .angebot-bild { aspect-ratio: 4 / 5; } }
.angebot-bild .bild-rahmen, .angebot-bild .bild, .angebot-bild img { display: block; width: 100%; height: 100%; }
.angebot-bild .bild-fehlt { aspect-ratio: auto; height: 100%; border-radius: 0; }
.angebot-bild img { object-fit: cover; }
.angebot-text { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 22px; flex: 1; }
.angebot-titel { font-size: 1.4375rem; line-height: 1.2; }
.angebot-titel a { color: inherit; text-decoration: none; }
.angebot-titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.angebot-titel a:focus-visible { outline: none; }
.angebot:has(.angebot-titel a:focus-visible) article { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.angebot-text > p { color: var(--c-text-2); font-size: 1rem; line-height: 1.55; }
.angebot-fakten { margin: 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--c-linie); font-size: .9375rem; }
.angebot-fakten div { display: grid; grid-template-columns: minmax(4.2em, auto) minmax(0, 1fr); gap: 8px; }
.angebot-fakten dt { color: var(--c-text-2); }
.angebot-fakten dd { margin: 0; color: var(--c-text); font-weight: 700; overflow-wrap: anywhere; }
.angebot-aktion { margin-top: auto; padding-top: 4px; position: relative; z-index: 1; }
.angebot .angebot-aktion .btn { width: 100%; padding-inline: 12px; font-size: .9375rem; white-space: normal; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .angebot:hover article { transform: translateY(-3px); box-shadow: var(--c-schatten); }
  .angebot:hover .angebot-titel { color: var(--c-akzent-text); }
}

/* Ablauf in drei Schritten: Pfote als Marker */
.ablauf-abschnitt .h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: none; }
@media (min-width: 53.75em) { .ablauf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); } }
.ablauf li { display: grid; gap: 10px; align-content: start; }
.ablauf li { position: relative; }
/* Schritt-Kreis 64 px mit großer Pfote (Inhaber 28.10.2026): Pfote ~75 %, gedämpfter Akzent mit geringer Deckung, je Schritt
   abwechselnd links/rechts (gespiegelt) wie eine Spur; Ziffer Jost 600 im großen Ballen. Ziffer #2C3A25 auf Pfotenfläche hell 7,0:1
   (auf Wärme 7,1:1), dunkel #ECEBE3 6,6:1. Die Ziffer sitzt im Ballen: Pfoten-SVG 62 px (Zeichnung ≈ 48 px = 75 %), Ballenmitte 2,2 px seitlich, 9 px unter der Mitte. Ziffer auf Pfote .3: hell 6,5:1, dunkel 5,9:1. */
.ablauf-nr { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-flaeche);
  border: 1px solid var(--c-linie); color: var(--c-pfote-flaeche); }
.ablauf-nr > * { grid-area: 1 / 1; }
.ablauf-nr .ic-pfote { width: 62px; height: 62px; }
.ablauf-nr span { position: relative; font-family: var(--font-titel); font-weight: 600; font-size: 1.125rem; line-height: 1;
  color: var(--c-titel); transform: translate(2.2px, 9px); font-variant-numeric: tabular-nums; }
.ablauf li:nth-child(even) .ic-pfote { transform: scaleX(-1); }
.ablauf li:nth-child(even) .ablauf-nr span { transform: translate(-2.2px, 9px); }
/* Spur zwischen den Kreisen (nur nebeneinander) */
@media (min-width: 53.75em) {
  .ablauf li:not(:last-child)::before { content: ""; position: absolute; top: 31px; left: 76px; right: calc(-1 * clamp(24px, 4vw, 56px) + 12px);
    border-top: 2px dotted var(--c-linie-stark); }
}
.ablauf-titel { font-size: 1.375rem; }
.ablauf p { color: var(--c-text-2); }

/* Stimmen aus dem Gästebuch: Zitate, keine Sterne */
.stimmen-abschnitt { background: var(--c-waerme); }
.stimmen { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(28px, 4vw, 48px) clamp(28px, 5vw, 72px); }
@media (min-width: 53.75em) { .stimmen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stimmen figure { display: grid; gap: 14px; padding-inline-start: 20px; border-inline-start: 3px solid var(--c-haupt-bg); }
.stimmen blockquote { margin: 0; }
.stimmen blockquote p { font-family: var(--font-titel); font-size: clamp(1.1875rem, 1.05rem + .5vw, 1.4375rem); line-height: 1.4; color: var(--c-text); text-wrap: pretty; }
.stimmen blockquote p::before { content: "„"; }
.stimmen blockquote p::after { content: "“"; }
.stimmen figcaption { font-size: .9375rem; color: var(--c-text-2); }
.stimme-wer { font-weight: 700; color: var(--c-text); margin-inline-end: 6px; }

/* FAQ */
.faq-spalte, .faq-wrap .text-spalte { margin-inline: auto; }
.faq-wrap { padding-block: clamp(48px, 7vw, 88px) 0; }
.faq .h2 { margin-bottom: 16px; }
.faq-liste { border-top: 1px solid var(--c-linie-stark); }
.faq-eintrag { border-bottom: 1px solid var(--c-linie); }
.faq-eintrag summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding-block: 12px;
  cursor: pointer; list-style: none; font-family: var(--font-titel); font-weight: 500; font-size: 1.1875rem; line-height: 1.3; color: var(--c-text); }
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary .ic { flex: none; color: var(--c-akzent-text); transition: transform .2s var(--ease-out); }
.faq-eintrag[open] summary .ic { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .faq-eintrag summary:hover { color: var(--c-akzent-text); } }
.faq-antwort { padding-bottom: 20px; color: var(--c-text-2); }
.faq-antwort > * + * { margin-top: .6em; }

/* Abschluss-Band vor dem Fuß */
.band { background: var(--c-flaeche); border-top: 1px solid var(--c-linie); padding-block: clamp(48px, 7vw, 88px); margin-top: clamp(32px, 5vw, 64px); }
main > .band:last-child { padding-bottom: clamp(48px, 7vw, 88px); }
.band-in { display: grid; gap: 24px; align-items: center; }
.band-hund { width: 120px; }
.band-text { display: grid; gap: 16px; max-width: 40rem; }
.band-text p { font-size: 1.125rem; color: var(--c-text); }


/* Über mich: Zeitleiste der Belege */
.belege { clear: both; margin-top: clamp(40px, 6vw, 64px) !important; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--c-linie); }
.belege .h2 { margin-bottom: 20px; }
.zeitleiste { list-style: none; margin: 0; padding: 0; }
.zeitleiste > li { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.zeitleiste > li::before { content: ""; position: absolute; left: calc(4.5rem - 9px); top: .55em; bottom: -.4em; width: 1px; background: var(--c-linie-stark); }
.zeitleiste > li:last-child::before { display: none; }
.zeitleiste > li::after { content: ""; position: absolute; left: calc(4.5rem - 13px); top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--c-marker);
  box-shadow: 0 0 0 3px var(--c-papier); }
.zeitleiste-jahr { font-family: var(--font-titel); font-weight: 500; font-size: 1.25rem; line-height: 1.3; color: var(--c-titel); }
.zeitleiste-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding-inline-start: 8px; }
.zeitleiste-zeile > span { min-width: 0; }
/* 200 % Schrift: die Jahresspalte (4.5rem) ließ dem Text bei 320/390 px nur ~120 px, „Clickertrainerin“ ragte bis 103 px hinaus.
   Container-Abfrage in rem (wächst mit der Schrift, anders als em-Media-Queries): unter 17rem Spaltenbreite steht das Jahr über dem Text.
   Bei 100 % Schrift greift das erst unter 272 px, das normale Mobil-Bild bleibt. */
.zeitleiste { container-type: inline-size; }
@container (max-width: 17rem) {
  .zeitleiste > li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-inline-start: 24px; }
  .zeitleiste > li::before { left: 4px; }
  .zeitleiste > li::after { left: 0; }
  .zeitleiste-text { padding-inline-start: 0; }
}
.raster.beleg { grid-template-columns: minmax(0, 160px); }
.raster.beleg .raster-link { aspect-ratio: 3 / 4; }
.belege-dazu { color: var(--c-text-2); }

/* Weitere Angebote als schlanke Zeilen ohne Bild */
.angebote-neben { list-style: none; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-linie-stark); }
.angebot-zeile { display: grid; gap: 12px; padding-block: 22px; border-bottom: 1px solid var(--c-linie); }
.angebot-zeile-kopf p { color: var(--c-text-2); margin-top: 4px; font-size: 1rem; }
.angebot-zeile .angebot-titel a { color: inherit; text-decoration: none; }
.angebot-zeile .angebot-titel a:hover { color: var(--c-akzent-text); }
.angebot-zeile .angebot-fakten { border-top: 0; padding-top: 0; }
@media (min-width: 56.25em) {
  .angebot-zeile { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto; align-items: center; gap: 28px; }
  .angebot-zeile .angebot-aktion { margin: 0; }
}
html[data-theme="dark"] .angebot-bild img { filter: brightness(.94); }

/* Echtheitshinweis zu Kundenstimmen (§ 5b Abs. 3 UWG): sachlich, klein, am selben Ort */
.echtheit { margin-top: clamp(24px, 3vw, 36px); max-width: 44rem; font-size: .875rem; line-height: 1.5; color: var(--c-text-2); }
.echtheit-oben { margin: 0 0 clamp(20px, 3vw, 32px); }
.stimmen-abschnitt .g-links { margin-top: 8px; }

/* ===== 36-google.css ===== */
/* Google-Bewertung: Badge als ruhiger Beleg (dünne Linie, keine Fläche, kein Schein), Sterne exakt anteilig,
   Original-„G“ unverändert. Plätze: Held, Vertrauensleiste, Abschluss-Band, Kontakt, Fuß. Daten: inc/google.php. */
.g-badge { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 14px; max-width: 100%;
  border: 1px solid var(--c-linie-stark); border-radius: var(--r-klein); color: var(--c-text); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease; }
.g-badge:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .g-badge:hover { background: var(--c-flaeche); border-color: var(--c-text-2); } }
.g-logo { flex: none; display: block; }
.g-badge-wert { font-family: var(--font-ui); font-weight: 500; font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-titel); }
.g-badge-rest { display: grid; gap: 2px; min-width: 0; }
.g-badge-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
/* Anzahl ist Teil des Belegs: gut lesbar, gleiche Farbe wie Text */
.g-badge-text { font-size: .9375rem; line-height: 1.25; font-weight: 700; color: var(--c-text); }

.g-sterne { position: relative; display: inline-block; width: 85px; height: 17px; flex: none; vertical-align: middle; line-height: 0; }
.g-sterne > span { position: absolute; inset: 0 auto 0 0; width: 100%; overflow: hidden; }
/* max-width: none: das globale svg { max-width: 100% } (05-basis) staucht sonst die gefüllte Reihe auf die Breite ihres Ausschnitts */
.g-sterne svg { display: block; width: 85px; height: 17px; max-width: none; }
.g-sterne-leer svg { fill: var(--c-stern-leer); }
.g-sterne-voll svg { fill: var(--c-stern); }
@media (forced-colors: active) { .g-sterne-voll svg { fill: CanvasText; } .g-sterne-leer svg { fill: GrayText; } .g-logo { forced-color-adjust: none; } }

/* Held: Google-Bewertung genau einmal als Pille unten links auf dem Foto (Gras, keine Gesichter), auf allen Breiten;
   kein zweiter Badge unter dem Held-Text (Pflichtstandard 18, Inhaber 29.10.2026) */
  .held-bild { position: relative; }
  /* Grazil: 36 px sichtbar, Tippfläche 44 px über ::before; Jost 400, kleines G, kleine Sterne, enge Abstände */
  .g-pille { display: inline-flex; align-items: center; position: absolute; left: 12px; bottom: 12px; z-index: 1;
    max-width: calc(100% - 24px); min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px; white-space: nowrap;
    background: var(--glas-deckend); box-shadow: 0 0 0 1px var(--glas-linie); color: var(--c-text); text-decoration: none;
    font-family: var(--font-ui); font-weight: 400; font-size: .9375rem; line-height: 1; font-variant-numeric: tabular-nums;
    transition: transform .12s ease; }
  .g-pille::before { content: ""; position: absolute; inset: -4px 0; }
  .g-pille:active { transform: scale(.97); }
  .g-pille:focus-visible { outline-offset: 2px; border-radius: 999px; }
  .g-pille-in { display: flex; align-items: center; gap: 6px; }
  .g-pille .g-logo { width: 16px; height: 16px; }
  /* Feste Breiten in em (Jost 400: „4,9“ und je Ziffer), damit der Schrift-Tausch nichts verschiebt */
  .g-pille-wert { inline-size: 1.55em; color: var(--c-titel); }
  .g-pille .g-sterne, .g-pille .g-sterne svg { width: 60px; height: 12px; }
  .g-pille-zahl { display: inline-block; inline-size: calc(var(--z, 2) * .6em); }
  /* Schmale Geräte: Sterne weg (Wert + Anzahl tragen die Aussage), nie umbrechen */
  @media (max-width: 22.4375em) { .g-pille .g-sterne { display: none; } }
  /* Auf dem Foto: mittlere Glas-Stufe (zarter als v1, Text über Gras und Fell weiter AA); feine Lichtkante oben, kein Schein */
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media not all and (prefers-reduced-transparency: reduce) {
  @media not all and (prefers-contrast: more) {
    .g-pille { background: var(--glas-mittel); -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
      box-shadow: inset 0 1px 0 var(--glas-lichtkante), 0 0 0 1px var(--glas-linie); }
  }}}
  @media (prefers-contrast: more) { .g-pille { box-shadow: 0 0 0 1.5px var(--c-text); } }
  @media (forced-colors: active) { .g-pille { border: 1px solid CanvasText; } }


/* Band, Kontakt */
.band-text .g-badge { justify-self: start; }
.kontakt-haupt .social .btn { min-height: 52px; }

/* Fuß: auf Waldgrün */
.g-badge--fuss { margin-top: 18px; color: var(--c-fuss-text); border-color: var(--c-fuss-linie); }
.g-badge--fuss .g-badge-wert { color: var(--c-fuss-text); }
.g-badge--fuss .g-badge-text { color: var(--c-fuss-text); }
.g-badge--fuss .g-sterne-voll svg { fill: var(--c-stern-fuss); }
.g-badge--fuss .g-sterne-leer svg { fill: var(--c-fuss-linie); }
@media (hover: hover) and (pointer: fine) { .g-badge--fuss:hover { background: rgb(255 255 255 / .06); border-color: var(--c-fuss-text-2); } }

/* Echte Rezensionen (nur mit API-Daten) */
.google-stimmen .abschnitt-kopf { align-items: center; }
.google-stimmen figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.google-stimmen blockquote p::before, .google-stimmen blockquote p::after { content: none; }
.g-stimme-text { font-family: var(--font-text) !important; font-size: 1.0625rem !important; }
.g-quelle { display: flex; align-items: center; gap: 8px; margin-top: 28px; font-size: .875rem; color: var(--c-text-2); }
.g-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.stimmen-abschnitt .g-links { margin-top: clamp(24px, 3vw, 36px); }

/* Social: Facebook-Glyph im Kopf (Desktop), im Menü und auf der Kontaktseite als Umriss-Taste */
.social { display: contents; }
.kopf-social { display: none; }
@media (min-width: 68.75em) { .kopf-social { display: contents; } }
.menue-social, .kontakt-social { display: flex; flex-wrap: wrap; gap: 12px; }
.menue-social { display: contents; }
.menue-social .btn { width: 100%; }

/* ===== 37-icons.css ===== */
/* Icon-Set „Hunde-Universum“ (img/icons-hund.svg, docs/ICONS.md). Farbe immer Akzent-Text (hell Moos, dunkel Salbei), nie Logo-Gelbgrün.
   Icons stehen nur dort, wo sie beim Scannen helfen; keine Kacheln, keine Flächen dahinter. */
.ic-h { flex: none; color: var(--c-akzent-text); }

/* Mein Angebot (Start) und Kursangebot: Icon vor dem Punkt, Marker-Strich bleibt oben */
.angebot-liste li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.angebot-liste .ic-h { margin-top: .05em; }

/* Schließtage */
.schliesstage-liste li { display: flex; align-items: center; gap: 14px; }

/* Angebotskarten: Fakten (Wann/Preis) und Zeilen ohne Bild */
.angebot-fakten div { grid-template-columns: 4.6em minmax(0, 1fr); }
.angebot-fakten dt { display: inline-flex; align-items: flex-start; gap: 6px; }
.angebot-fakten dt .ic-h { margin-top: .1em; }
.angebot-zeile .angebot-titel { display: flex; align-items: center; gap: 10px; }

/* Kursinhalte: Kurs-Überschriften (Sprungmarken ohne Icons: breitere Chips brachen beim Schriftwechsel um, CLS) */
.h2-ic { display: flex; align-items: center; gap: 12px; }

/* Über mich: Zeitleiste und „Außerdem“ */
.zeitleiste-zeile { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.belege-dazu { margin-bottom: 10px; }
.belege-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; color: var(--c-text-2); }
.belege-liste li { display: flex; align-items: center; gap: 12px; }
.belege-liste li > span { min-width: 0; }   /* 200 % Schrift, 320 px: „Diplom-Biogeographin“ ragte 79 px hinaus */

/* Kontakt: Wege mit Icon */
.adresse-wege { display: grid; gap: 10px; font-style: normal; }
.adresse-zeile { display: flex; align-items: flex-start; gap: 12px; }
.adresse-zeile > .ic-h { margin-top: .25em; }
.adresse-zeile > .ic-h[width="20"] { margin-inline: 2px; }

/* Blog: „Mitzubringen“ als Dinge mit Icon (Text unverändert), „Dauer/Kosten“ mit Icon */
.mitbringen .ding .ic-h, .fakt > .ic-h { display: inline-block; vertical-align: -4px; margin-inline-end: 5px; }
.fakt > .ic-h { margin-inline-end: 8px; }
.ding-kopf { white-space: nowrap; }

/* ===== 40-seiten.css ===== */
/* Unterseiten: Kopf mit Bereichsnavigation, Textspalte, Abschluss, Kontakt, Dateien, Einträge. */
.seitenkopf { padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 48px); }
.seitenkopf .h1 { max-width: 18ch; }
.seitenkopf-meta { margin-top: 12px; color: var(--c-text-2); }
.bereich, .sprung { margin-top: clamp(20px, 3vw, 32px); }
.bereich ul, .sprung ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bereich a, .sprung a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--c-linie-stark); text-decoration: none; color: var(--c-text); font-family: var(--font-ui); font-weight: 500;
  font-size: 1rem; transition: background-color .15s ease, border-color .15s ease; }
.bereich a[aria-current="page"] { background: var(--c-haupt-bg); border-color: var(--c-haupt-bg); color: var(--c-haupt-text); }
.sprung a { min-height: 40px; padding: 0 14px; font-size: .9375rem; border-style: dashed; color: var(--c-text-2);
  hyphens: auto; overflow-wrap: anywhere; }   /* 200 % Schrift, 320 px: „Erziehungsspaziergänge“ ragte 56 px hinaus */
@media (hover: hover) and (pointer: fine) { .bereich a:not([aria-current]):hover, .sprung a:hover { background: var(--c-flaeche); } }
@media (max-width: 40em) {
  .bereich ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * max(20px, min(5vw, 48px))); padding-inline: max(20px, min(5vw, 48px));
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 32px), transparent); }
  .bereich ul::-webkit-scrollbar { display: none; }
  .bereich li { flex: none; }
}
main > .wrap:last-child, main > .text-spalte:last-child, main > section:last-child { padding-bottom: clamp(64px, 9vw, 128px); }
.abschluss { margin-top: clamp(40px, 6vw, 64px) !important; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--c-linie); }
.abschluss > * + * { margin-top: 24px; }
.text-spalte .h2 { margin-top: 1.6em; }
.text-spalte .h2:first-child { margin-top: 0; }
.text-spalte .lead + p { margin-top: 1em; }

/* Kursinhalte */
.kurs { padding-top: clamp(28px, 4vw, 48px); }
.kurs + .kurs { border-top: 1px solid var(--c-linie); margin-top: clamp(36px, 5vw, 56px) !important; }
.kurs > * + * { margin-top: 1.1em; }
.kurs > .h2 { margin-top: 0; margin-bottom: .2em; }
.punkte { list-style: none; padding: 0; display: grid; gap: 6px; }
.punkte li { position: relative; padding-inline-start: 22px; }
.punkte li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-haupt-bg); }
.zwei-listen { display: grid; gap: 20px; background: var(--c-flaeche); border-radius: var(--r); padding: clamp(20px, 3vw, 28px); }
.zwei-listen p { margin-bottom: 10px; color: var(--c-text-2); }
@media (min-width: 40em) { .zwei-listen { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* Über mich: kleine Fotos nie hochziehen */
.bild-rand .bild { border-radius: var(--r); overflow: hidden; }
.bild-rechts { max-width: 371px; }
@media (min-width: 47.5em) { .ueber .bild-rechts { float: inline-end; width: 46%; margin: 6px 0 20px 32px; } }
.ueber .portrait-gross { max-width: 480px; clear: both; padding-top: 12px; }
.zertifikat { display: grid; gap: 20px; align-items: center; clear: both; padding-block: 12px; }
.zertifikat .bild-rand { max-width: 200px; }
.zertifikat-text { color: var(--c-titel); }
@media (min-width: 40em) { .zertifikat { grid-template-columns: 200px 1fr; gap: 32px; } }
.gemaelde { margin-top: clamp(32px, 5vw, 48px) !important; }
.gemaelde .bild { border-radius: var(--r); overflow: hidden; }
.gemaelde figcaption { margin-top: 12px; color: var(--c-text-2); font-size: .9375rem; }

/* Tierschutzhunde */
.hunde { list-style: none; padding: 0; display: grid; gap: 10px; }
@media (min-width: 35em) { .hunde { grid-template-columns: 1fr 1fr; } }
.hunde a { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 22px; border-radius: var(--r);
  background: var(--c-flaeche); text-decoration: none; font-family: var(--font-titel); font-weight: 500; font-size: 1.375rem; color: var(--c-titel);
  transition: background-color .15s ease; }
.hunde a .ic { color: var(--c-akzent-text); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hunde a:hover { background: var(--c-flaeche-2); } .hunde a:hover .ic { transform: translateX(4px); } }

/* Kontakt */
.kontakt-raster { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
.kontakt-daten > * + * { margin-top: 20px; }
.kontakt-haupt > * + * { margin-top: 28px; }
@media (min-width: 56.25em) { .kontakt-raster { grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 96px); } .kontakt-haupt { order: 0; } }
.adresse { font-size: 1.0625rem; line-height: 1.6; }
.adresse strong { font-family: var(--font-titel); font-weight: 500; font-size: 1.25rem; color: var(--c-titel); }
.adresse-karte { display: flex; gap: 14px; padding: 20px 22px; background: var(--c-flaeche); border-radius: var(--r); }
.adresse-ic { color: var(--c-akzent-text); padding-top: 4px; }
.anfahrt-block { margin-top: clamp(48px, 7vw, 88px); }
.anfahrt-block > .text-spalte { padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--c-linie); }

/* Download */
.datei { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--r); border: 1px solid var(--c-linie-stark);
  text-decoration: none; color: var(--c-text); max-width: 30rem; transition: background-color .15s ease, transform .16s var(--ease-out); }
.datei:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .datei:hover { background: var(--c-flaeche); } }
.datei-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-haupt-bg); color: var(--c-haupt-text); flex: none; }
.datei-text { display: grid; }
.datei-text strong { font-family: var(--font-titel); font-weight: 500; font-size: 1.1875rem; }
.datei-text span { color: var(--c-text-2); font-size: .9375rem; }
.fb-knopf { display: inline-block; border-radius: var(--r-klein); overflow: hidden; }
.fb-knopf .bild { max-width: 300px; }

/* Gästebuch und Kommentare (nur lesend) */
.eintraege { list-style: none; padding: 0; margin: 0; }
.eintrag { padding-block: 24px; border-top: 1px solid var(--c-linie); }
.eintrag:first-child { border-top: 0; padding-top: 0; }
.eintrag-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; }
.eintrag-name { font-family: var(--font-titel); font-weight: 500; font-size: 1.1875rem; color: var(--c-titel); overflow-wrap: anywhere; }
.eintrag-datum { font-size: .9375rem; color: var(--c-text-2); }
.eintrag-text > * + * { margin-top: .8em; }
.eintrag-text { overflow-wrap: anywhere; }

/* ===== 45-blog.css ===== */
/* Aktuelles: Karten, Blättern, Beitrag. */
.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 40em) { .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62.5em) { .karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.karte { position: relative; display: flex; }
.karte article { display: flex; flex-direction: column; width: 100%; border-radius: var(--r); background: var(--c-karte); border: 1px solid var(--c-linie); overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.karte-bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-flaeche-2); }
.karte-bild .bild, .karte-bild img { width: 100%; height: 100%; }
.karte-bild img { object-fit: cover; transition: transform .6s var(--ease-out); }
.karte-text { display: grid; gap: 8px; padding: 20px 22px 24px; align-content: start; }
.karte-datum { font-size: .9375rem; color: var(--c-text-2); }
.karte-titel { font-size: 1.3125rem; line-height: 1.25; }
.karte-titel a { text-decoration: none; color: inherit; overflow-wrap: anywhere; }
.karte-titel a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.karte-titel a:focus-visible { outline: none; }
.karte:has(a:focus-visible) article { outline: 3px solid var(--c-fokus); outline-offset: 3px; }
.karte-anriss { color: var(--c-text-2); font-size: 1rem; line-height: 1.55; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.karte-meta { font-size: .875rem; color: var(--c-text-2); }
@media (hover: hover) and (pointer: fine) {
  .karte:hover article { transform: translateY(-3px); box-shadow: var(--c-schatten); }
  .karte:hover .karte-bild img { transform: scale(1.03); }
  .karte:hover .karte-titel { color: var(--c-akzent-text); }
}
@media (min-width: 62.5em) {
  .karten-erste > .karte:first-child { grid-column: span 2; }
  .karten-erste > .karte:first-child .karte-titel { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); }
}
.karten-erste > .karte:first-child:not(:has(.karte-bild)) article { background: var(--c-hinweis-bg); }
.blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: clamp(32px, 5vw, 56px); }
.blaettern-stand { color: var(--c-text-2); font-size: .9375rem; }
html.js .blaettern.ist-js .blaettern-stand, html.js .blaettern.ist-js a:not([data-mehr]) { display: none; }
.altinhalt { margin: clamp(40px, 6vw, 72px) auto 0; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--c-linie); }
.altinhalt > * + * { margin-top: 1em; }

.beitrag-kopf .zurueck { margin-bottom: 12px; margin-inline-start: -2px; }
.beitrag-datum { color: var(--c-text-2); margin-bottom: 10px; }
.beitrag-kopf .h1 { max-width: 22ch; font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); }
.beitrag-inhalt > * + * { margin-top: clamp(24px, 3vw, 36px); }
.beitrag-text > * + * { margin-top: 1.1em; }
.beitrag-text h2, .beitrag-text h3 { margin-top: 1.4em; }
.beitrag-text ul, .beitrag-text ol { padding-inline-start: 1.3em; }
.beitrag-text li + li { margin-top: .3em; }
.beitrag-text table { display: block; overflow-x: auto; border-collapse: collapse; font-size: .9375rem; max-width: 100%; }
.beitrag-text th, .beitrag-text td { padding: 8px 12px; border: 1px solid var(--c-linie); text-align: start; vertical-align: top; min-width: 7em; }
.beitrag-text hr, .text-spalte hr { border: 0; border-top: 1px solid var(--c-linie); margin-block: 2em; }
.kommentare { margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--c-linie); }
.kommentare .h3 { margin-bottom: 20px; }
.beitrag-nav { display: grid; gap: 12px; margin-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(64px, 9vw, 120px); }
@media (min-width: 47.5em) { .beitrag-nav { grid-template-columns: 1fr 1fr; } .beitrag-nav .aelter { grid-column: 2; text-align: end; } }
.beitrag-nav-link { display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r); background: var(--c-flaeche); text-decoration: none; color: var(--c-text); }
.beitrag-nav-art { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; color: var(--c-text-2); }
.aelter .beitrag-nav-art { justify-content: flex-end; }
.beitrag-nav-titel { font-family: var(--font-titel); font-weight: 500; font-size: 1.1875rem; color: var(--c-titel); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .beitrag-nav-link:hover { background: var(--c-flaeche-2); } }

/* ===== 50-raster.css ===== */
/* Bilderraster (Galerie, Beiträge) und Lightbox. Raster: ruhige 4:3-Kacheln, Einzelbild in voller Form. */
.raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); }
@media (min-width: 40em) { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 68.75em) { .raster.raster-weit, .galerie .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.raster figure { height: 100%; }
.raster-link { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-klein); overflow: hidden; background: var(--c-flaeche); cursor: zoom-in;
  -webkit-tap-highlight-color: transparent; }
.raster-link .bild, .raster-link img { width: 100%; height: 100%; }
.raster-link img { object-fit: cover; transition: transform .5s var(--ease-out), opacity .2s ease; }
.raster .hoch .raster-link img { object-position: 50% 30%; }
@media (hover: hover) and (pointer: fine) { .raster-link:hover img { transform: scale(1.04); } }
.raster-link:active img { opacity: .85; }
.raster figcaption { margin-top: 8px; font-size: .9375rem; color: var(--c-text-2); }
.raster.raster-1 { grid-template-columns: minmax(0, 1fr); max-width: 44rem; }
.raster.raster-1 .raster-link { aspect-ratio: auto; border-radius: var(--r); }
.raster.raster-1 .raster-link img { height: auto; }
.raster.raster-1 .hoch .raster-link { max-width: min(100%, 420px); }
.raster.raster-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 56rem; }
.galerien > .galerie + .galerie { margin-top: clamp(48px, 7vw, 88px); }
.galerie .h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: clamp(16px, 2.4vw, 24px); }
.galerie .anzahl { font-family: var(--font-text); font-size: .9375rem; font-weight: 400; letter-spacing: 0; color: var(--c-text-2); }
.galerien { padding-bottom: clamp(64px, 9vw, 128px); }

/* Lightbox: Wischen 1:1 mit Schwung, Pfeiltasten, Esc, Fokus zurück. Immer dunkel. */
.lb { position: fixed; inset: 0; z-index: 120; background: var(--c-lb-bg); color: var(--c-lb-text); touch-action: none; user-select: none; -webkit-user-select: none; }
.lb[hidden] { display: none; }
.lb-buehne { position: absolute; inset: 0; overflow: hidden; }
.lb-bahn { position: absolute; inset: 0; will-change: transform; }
.lb-bild { position: absolute; top: 0; bottom: 0; width: 100%; display: grid; place-items: center; padding: max(64px, env(safe-area-inset-top)) 12px max(64px, env(safe-area-inset-bottom)); }
@media (min-width: 56.25em) { .lb-bild { padding-inline: 88px; } }
.lb-bild img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; pointer-events: none; -webkit-user-drag: none; }
.lb .rund-knopf { position: absolute; color: var(--c-lb-text); background: var(--c-lb-knopf); width: 48px; height: 48px; }
@media (hover: hover) and (pointer: fine) { .lb .rund-knopf:hover { background: var(--c-lb-knopf-hover); } }
.lb .rund-knopf:focus-visible { outline-color: var(--c-lb-fokus); }
.lb-zu { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.lb-pfeil { top: 50%; margin-top: -24px; }
.lb-zurueck { left: max(16px, env(safe-area-inset-left)); }
.lb-vor { right: max(16px, env(safe-area-inset-right)); }
@media (pointer: coarse) { .lb-pfeil { display: none; } }
.lb-zahl { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); text-align: center; font-size: .9375rem;
  color: var(--c-lb-text-2); font-variant-numeric: tabular-nums; }
.lb.ist-ein { animation: lb-ein .22s var(--ease-out); }
@keyframes lb-ein { from { opacity: 0; } }

/* ===== 60-recht.css ===== */
/* Rechtsseiten (Aufbau wie vezoza.com) und 404. */
.recht-kopf { padding-block: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 40px); }
.recht-kopf-in { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.recht-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--c-flaeche); }
.recht-tab { display: inline-flex; text-align: center; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); text-decoration: none;
  color: var(--c-text); font-family: var(--font-ui); font-weight: 500; }
.recht-tab.ist-aktiv { background: var(--c-karte); box-shadow: var(--c-schatten); color: var(--c-titel); }
.recht-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: clamp(64px, 9vw, 128px); }
.recht-toc { display: none; }
.recht-toc-m { min-width: 0; overflow-wrap: anywhere; border: 1px solid var(--c-linie); border-radius: var(--r); padding: 4px 18px; }
.recht-toc-m summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: 500; }
.recht-toc-m summary::-webkit-details-marker { display: none; }
.recht-toc-m[open] .recht-toc-ic { transform: rotate(180deg); }
.recht-toc-m ol, .recht-toc ol { margin: 0; padding: 0 0 12px 1.2em; display: grid; gap: 6px; }
.recht-toc-m a, .recht-toc a { color: var(--c-text-2); text-decoration: none; }
.recht-toc a.ist-aktiv { color: var(--c-akzent-text); font-weight: 700; }
@media (min-width: 62.5em) {
  .recht-wrap { grid-template-columns: 240px minmax(0, 44rem); gap: 64px; }
  .recht-toc-m { display: none; }
  .recht-toc { display: block; position: sticky; top: calc(var(--kopf-h) + 24px); align-self: start; }
  .recht-toc-titel { font-family: var(--font-titel); font-weight: 500; margin-bottom: 12px; }
}
.recht > * + * { margin-top: 1em; }
.recht h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); margin-top: 1.8em; scroll-margin-top: calc(var(--kopf-h) + 20px); }
.recht ul { padding-inline-start: 1.3em; }
.recht-notiz { background: var(--c-offen-bg); color: var(--c-offen-text); padding: 12px 16px; border-radius: var(--r-klein); font-size: .9375rem; }
.recht-stand { color: var(--c-text-2); font-size: .9375rem; margin-top: 2.4em !important; }

.nf { display: grid; gap: 32px; align-items: center; padding-block: clamp(40px, 8vw, 112px); }
.nf-bild { width: clamp(140px, 30vw, 280px); }
.nf-zahl { font-family: var(--font-titel); font-size: 1rem; letter-spacing: .08em; color: var(--c-text-2); margin-bottom: 8px; }
.nf-text > * + * { margin-top: 20px; }
.nf-liste { list-style: none; padding: 0; display: grid; gap: 0; max-width: 32rem; }
.nf-liste a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--c-linie);
  text-decoration: none; font-family: var(--font-titel); font-weight: 500; font-size: 1.1875rem; color: var(--c-text); }
.nf-liste a .ic { color: var(--c-akzent-text); }
@media (min-width: 53.75em) { .nf { grid-template-columns: auto 1fr; gap: 72px; } }

/* ===== 66-formular.css ===== */
/* Online-Anmeldung (WordPress-Fassung, Markup aus hdh_anmeldung_formular() im Plugin hdh-inhalte). Nur Tokens.
   Eingabefelder mobil mindestens 16 px (kein iOS-Zoom), Tippflächen 48 px, Fokus über den Ring aus 05-basis.css. */
.anmeldung { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--c-linie); }
.formular { display: grid; gap: clamp(28px, 4vw, 40px); }
.feld-gruppe { display: grid; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld-gruppe > legend { margin-bottom: 10px; padding: 0; }
.feld { display: grid; gap: 6px; margin: 0; min-width: 0; }
.feld > label, .feld-wahl > legend { font-family: var(--font-ui); font-weight: 500; color: var(--c-titel); }
.pflicht { color: var(--c-akzent-text); }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="date"], .formular textarea, .formular select {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: max(1rem, 16px); color: var(--c-text);
  background: var(--c-karte); border: 1.5px solid var(--c-linie-stark); border-radius: var(--r-klein); }
.formular input:hover, .formular textarea:hover { border-color: var(--c-rand-zweit); }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--c-fokus); outline-offset: 2px; border-color: var(--c-rand-zweit); }
.formular input[type="date"] { max-width: 16rem; }
.feld-wahl { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.feld-wahl > legend { width: 100%; margin-bottom: 6px; padding: 0; }
.wahl, .feld-haken label { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 48px; padding-block: 12px; cursor: pointer; }
.feld-haken label { display: flex; font-family: inherit; font-weight: 400; color: var(--c-text); }
.wahl input, .feld-haken input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-haupt-bg); }
.feld-haken .haken-text { flex: 1 1 auto; min-width: 0; }   /* Text als ein Block neben dem Kasten, Link und Stern bleiben im Fluss */
.feld-hilfe { color: var(--c-text-2); font-size: .9375rem; }
.feld-fehler input { border-color: var(--c-fehler); }
.feld-fehler > label::after { content: " – bitte ausfüllen"; color: var(--c-fehler); font-weight: 400; }
.anmeldung .hinweis ul { margin: .6em 0 0; padding-inline-start: 1.2em; }
.anmeldung .hinweis li + li { margin-top: .4em; }
.hinweis-fehler { border-color: var(--c-fehler); }
.hinweis-fehler p { color: var(--c-fehler); font-weight: 500; }
.formular-aktion { margin: 0; }

/* ===== 68-orte.css ===== */
/* Baustein „Orte-Auswahl“ (Anfahrt-Blatt). Nur über Tokens; Rückfallwerte, falls ein Projekt sie nicht kennt.
   Blatt wächst aus dem Auslöser (transform-origin per JS), Wischen nach unten schließt (JS-Feder). */
.orte { position: fixed; inset: 0; z-index: 130; }
.orte[hidden] { display: none; }
.orte-grund { position: absolute; inset: 0; background: rgb(0 0 0 / .38); opacity: 0; transition: opacity .25s ease; }
.orte.ist-offen .orte-grund { opacity: 1; }
.orte-blatt { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); max-height: min(80dvh, 640px); overflow-y: auto;
  overscroll-behavior: contain; padding: 6px 20px 20px; border-radius: 24px; background: var(--c-karte, #fff); color: var(--c-text, #222);
  box-shadow: 0 -2px 30px rgb(0 0 0 / .18); touch-action: pan-y; will-change: transform; }
@media (min-width: 40em) { .orte-blatt { left: auto; right: 16px; width: 420px; } }
.orte-griff { display: grid; place-items: center; height: 22px; cursor: grab; touch-action: none; }
.orte-griff span { width: 40px; height: 5px; border-radius: 3px; background: var(--c-linie-stark, #ccc); }
.orte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; touch-action: none; }
.orte-titel { font-family: var(--font-titel, inherit); font-weight: 500; font-size: 1.375rem; color: var(--c-titel, inherit); margin: 0; }
.orte-zu { display: grid; place-items: center; width: 44px; height: 44px; margin-inline-end: -10px; border: 0; border-radius: 50%; background: none;
  color: var(--c-text-2, #555); cursor: pointer; }
.orte-liste { list-style: none; margin: 0; padding: 0; }
.orte-ort { display: grid; gap: 12px; padding-block: 14px; border-top: 1px solid var(--c-linie, #e5e5e5); }
.orte-name { font-family: var(--font-titel, inherit); font-weight: 500; font-size: 1.125rem; margin: 0; }
.orte-adresse { margin: 2px 0 0; color: var(--c-text-2, #555); font-size: .9375rem; }
.orte-hinweis { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--c-hinweis-bg, #f3ecd8); font-size: .9375rem; }
.orte-route, .orte-kontakt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 999px; font-family: var(--font-ui, inherit); font-weight: 500; text-decoration: none; transition: transform .16s var(--ease-out, ease-out); }
.orte-route { border: 1.5px solid var(--c-rand-zweit, currentColor); color: var(--c-text, #222); }
.orte-kontakt { width: 100%; background: var(--c-haupt-bg, #2d6a3e); color: var(--c-haupt-text, #fff); margin-top: 6px; }
.orte-route:active, .orte-kontakt:active { transform: scale(.97); }
.orte-fuss-hinweis { margin: 14px 0 6px; padding-top: 14px; border-top: 1px solid var(--c-linie, #e5e5e5); color: var(--c-text, #222); }
.orte-mehr { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; color: var(--c-akzent-text, inherit);
  font-family: var(--font-ui, inherit); font-weight: 500; }
.orte-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.orte-offen, html.orte-offen body { overflow: hidden; }
@media (prefers-reduced-transparency: reduce) { .orte-grund { background: rgb(0 0 0 / .6); } }

/* ===== 69-treffpunkte.css ===== */
/* Treffpunkte als Liste auf /kontakt/anfahrt/ (WordPress-Fassung, Daten hdh_treffpunkte()). Nutzt die Orte-Bausteine aus 68-orte.css. */
.anfahrt-orte { margin-top: clamp(32px, 5vw, 48px); }
.anfahrt-orte .h2 { margin-bottom: .5em; }
.anfahrt-orte .orte-liste { border-bottom: 1px solid var(--c-linie); }
@media (min-width: 40em) { .anfahrt-orte .orte-ort { grid-template-columns: 1fr auto; align-items: center; } }
.anfahrt-orte + .aktionen { margin-top: clamp(24px, 4vw, 36px); }

/* ===== 70-fuss.css ===== */
/* Fuß (in beiden Themes Waldboden-Dunkel), mobile Aktionsleiste, Nach-oben. */
.fuss { background: var(--c-fuss-bg); color: var(--c-fuss-text); padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 56.25em) { .fuss { padding-bottom: 104px; } .fuss-unten { padding-inline-end: 84px; } } /* Platz für die WhatsApp-Taste, sie verdeckt keine Fuß-Links */
.fuss a { color: inherit; }
.fuss-oben { display: grid; gap: 32px; }
.fuss-logo { display: block; width: 120px; }
.fuss-logo img { width: 100%; height: auto; }
.fuss-name { margin-top: 14px; font-family: var(--font-titel); font-weight: 500; font-size: 1.375rem; }
.fuss-wege { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 2px; }
.fuss-wege a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; color: var(--c-fuss-text-2); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .fuss-wege a:hover { color: var(--c-fuss-text); } }
.fuss-wege .ic { color: var(--logo-gruen); flex: none; }
.fuss-spalten { display: grid; }
.fuss-spalte { border-top: 1px solid var(--c-fuss-linie); }
.fuss-spalte summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: 500; font-size: 1.125rem; }
.fuss-spalte summary::-webkit-details-marker { display: none; }
.fuss-spalte summary .ic { transition: transform .2s var(--ease-out); color: var(--c-fuss-text-2); }
.fuss-spalte[open] summary .ic { transform: rotate(180deg); }
.fuss-spalte ul { list-style: none; padding: 0 0 14px; margin: 0; display: grid; }
.fuss-spalte ul a { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-fuss-text-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss-spalte ul a:hover { color: var(--c-fuss-text); text-decoration: underline; text-underline-offset: .2em; } }
@media (min-width: 56.25em) {
  .fuss-oben { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 64px; }
  .fuss-spalten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .fuss-spalte { border-top: 0; }
  .fuss-spalte summary { pointer-events: none; min-height: 0; margin-bottom: 12px; }
  .fuss-spalte summary .ic { display: none; }
}
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: clamp(40px, 6vw, 72px);
  padding-top: 20px; border-top: 1px solid var(--c-fuss-linie); font-size: .9375rem; color: var(--c-fuss-text-2); }
.fuss-recht { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.fuss-recht a, .fuss-recht .text-knopf { color: var(--c-fuss-text-2); display: inline-flex; align-items: center; min-height: 44px; }
.fuss-recht a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fuss-recht a:hover, .fuss-recht .text-knopf:hover { color: var(--c-fuss-text); } }
.fuss :focus-visible { outline-color: var(--logo-gruen); }

/* Nach oben ab 900 px: nur Pfeil + dünner Fortschrittsring (Inhaber 28.10.2026), keine Fläche, kein Schatten; über Fotos lesbar per zartem drop-shadow.
   Unter 900 px Scheibe im Leisten-Material (Block unten). */
.nach-oben { position: fixed; z-index: 49; right: calc(max(18px, env(safe-area-inset-right)) + 4px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 72px);
  width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--c-text);
  background: none; filter: drop-shadow(0 0 1.5px var(--c-papier)) drop-shadow(0 0 3px var(--c-papier));
  opacity: 0; transform: translateY(12px) scale(.95); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s; }
.nach-oben[hidden] { display: none; }
/* Versteckt = visibility:hidden, damit er auch per Tab nicht erreichbar ist (Prüfung W1) */
.nach-oben.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.nach-oben:active { transform: scale(.94); }
.nach-oben > * { grid-area: 1 / 1; }
.nach-oben-ring { width: 44px; height: 44px; transform: rotate(-90deg); overflow: visible; }
.nach-oben-ring circle { fill: none; stroke: var(--c-ring); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--fortschritt, 100); }
@media (max-width: 56.1875em) {
  /* Mobil liegt er über Inhalt: Scheibe im Material der Aktionsleiste, Ring am Rand (Inhaber 28.10.2026) */
  .nach-oben { width: 48px; height: 48px; bottom: calc(10px + env(safe-area-inset-bottom) + 72px); right: max(16px, env(safe-area-inset-right));
    filter: none; background: var(--c-kopf-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    box-shadow: var(--c-schatten), 0 0 0 1px var(--c-linie); }
  .nach-oben-ring { width: 46px; height: 46px; }
  html.kopf-weg .nach-oben.ist-sichtbar, html.menue-offen .nach-oben.ist-sichtbar { opacity: 0; transform: translateY(12px) scale(.95); pointer-events: none;
    visibility: hidden; transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s linear .3s; }
}

@media (max-width: 56.1875em) and (prefers-reduced-transparency: reduce) { .nach-oben { background: var(--c-papier); backdrop-filter: none; } }

/* ===== 72-wa-taste.css ===== */
/* WhatsApp-Taste unten rechts (alle Seiten, alle Breiten): eigene Sprechblase im CD mit Pfote, offizielles
   WhatsApp-Glyph unverändert als Plakette. Hinweis-Sprechblase einmalig. Nie über Menü oder Lightbox.
   Nach-oben-Taste steht auf derselben Achse darüber (70-fuss.css). */
.wa-taste-box { display: none; }
@media (min-width: 56.25em) { .wa-taste-box { display: block; } }
.wa-taste-box { position: fixed; z-index: 50; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  transition: opacity .2s ease, transform .3s var(--ease-out); }
html.menue-offen .wa-taste-box, html.lb-offen .wa-taste-box { opacity: 0; transform: translateY(16px); pointer-events: none; visibility: hidden; }
/* Startseite ab 960 px (Held 2): solange der Held im Bild ist, trägt der große Knopf im Held die WhatsApp-Aktion; die Taste ist weg und
   kommt beim Scrollen aus Richtung des Held-Knopfs in die Ecke geflogen (Inhaber 31.10.2026, zweimal WhatsApp im Held ist doppelt) */
@media (min-width: 60em) {
  body.mit-held:has(.held--wald) .wa-taste-box { transition: opacity .35s ease, transform .6s var(--ease-out), visibility 0s linear 0s; }
  body.mit-held:not(.held-weg):has(.held--wald) .wa-taste-box { opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(calc(-50vw + 50% + 30px), calc(-100vh + 100% + 60vh)) scale(.5); transition: opacity .25s ease, transform .5s var(--ease-out), visibility 0s linear .5s; }
}
.wa-taste { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50% 50% 50% 14%;
  background: var(--c-wa-blase); color: var(--c-wa-pfote); text-decoration: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px rgb(36 39 31 / .24); transition: transform .16s var(--ease-out), box-shadow .2s ease; }
html[data-theme="dark"] .wa-taste { box-shadow: 0 0 0 1.5px rgb(0 0 0 / .4), 0 6px 18px rgb(0 0 0 / .45); }

.wa-taste:active { transform: scale(.95); }
.wa-taste:focus-visible { outline-offset: 4px; }
.wa-pfote { transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .wa-taste:hover .wa-pfote { transform: translateY(-3px) rotate(-4deg); } }
.wa-plakette { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: #25D366; color: #fff; box-shadow: 0 0 0 2px var(--c-papier); }

/* Hinweis-Sprechblase links neben der Taste */
.wa-hinweis { position: absolute; right: calc(100% + 12px); bottom: 6px; width: max-content; max-width: min(280px, calc(100vw - 112px));
  display: flex; align-items: flex-start; gap: 6px; padding: 12px 8px 12px 16px; border-radius: 18px 18px 4px 18px;
  background: var(--c-papier); color: var(--c-text); border: 1px solid var(--c-linie); box-shadow: var(--c-schatten);
  font-size: .9375rem; line-height: 1.4; }
.wa-hinweis[hidden] { display: none; }
.wa-hinweis-zu { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin: -6px 0 -6px; border: 0; border-radius: 50%;
  background: none; color: var(--c-text-2); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .wa-hinweis-zu:hover { background: var(--c-flaeche); } }

/* Pfotenspur beim ersten Erscheinen: zwei Abdrücke laufen schräg zur Taste und blenden aus, dann setzt die Pfote auf */
.wa-spur { position: absolute; inset: 0; pointer-events: none; color: var(--c-akzent-text); }
.wa-spur .ic { position: absolute; opacity: 0; }
.wa-spur-1 { right: 96px; bottom: 70px; transform: rotate(-40deg); }
.wa-spur-2 { right: 70px; bottom: 44px; transform: rotate(-40deg); }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .wa-taste-box.ist-erstes .wa-spur-1 { animation: wa-spur .9s var(--ease-out) both; }
  html:not([data-motion="off"]) .wa-taste-box.ist-erstes .wa-spur-2 { animation: wa-spur .9s var(--ease-out) .22s both; }
  html:not([data-motion="off"]) .wa-taste-box.ist-erstes .wa-pfote { animation: wa-aufsetzen .45s var(--ease-out) .55s both; }
  html:not([data-motion="off"]) .wa-hinweis.ist-ein { animation: wa-hinweis .28s var(--ease-out); transform-origin: bottom right; }
}
@keyframes wa-spur { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
@keyframes wa-aufsetzen { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes wa-hinweis { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@media print { .wa-taste-box { display: none; } }

/* Mobile Aktionsleiste (unter 900 px): Anfahrt · Anrufen · WhatsApp (gefüllt, Pfoten-Sprechblase, breitester Knopf) rechts in der
   Daumenzone und am Ort der Desktop-Pfoten-Taste (Inhaber 28.10.2026). DOM = Sichtreihenfolge. Nie zusammen mit der Taste. */
.aktionsleiste { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; padding: 6px; border-radius: var(--r-pill);
  background: var(--c-kopf-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
  box-shadow: var(--c-schatten), 0 0 0 1px var(--c-linie); transition: transform .35s var(--ease-drawer), opacity .2s ease; }
.aktionsleiste .btn { min-height: 48px; padding: 0 8px; gap: 5px; font-size: .9375rem; min-width: 0; white-space: nowrap; overflow-wrap: normal; hyphens: manual; }
.aktionsleiste .btn-zweit[aria-current="page"] { background: var(--c-flaeche-2); box-shadow: inset 0 0 0 1.5px var(--c-rand-zweit); }
@media (max-width: 23.6875em) { .aktionsleiste { grid-template-columns: 56px 56px minmax(0, 1fr); } .aktionsleiste .leiste-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.aktionsleiste .btn-zweit { border-color: transparent; background: var(--c-flaeche); }
/* Beschriftungen in fester Breite (Jost 500: WhatsApp 4,6 · Anrufen 3,53 · Anfahrt 3,27 em): der Schrift-Tausch verschiebt den mittig gesetzten Knopfinhalt sonst (CLS) */
.aktionsleiste .btn-haupt > span:nth-child(2) { inline-size: 4.65em; text-align: center; }
@media (min-width: 23.75em) { .aktionsleiste .btn:nth-child(1) .leiste-text { inline-size: 3.3em; } .aktionsleiste .btn:nth-child(2) .leiste-text { inline-size: 3.6em; } }
.pfoten-blase { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50% 50% 50% 18%; background: var(--c-haupt-text); color: var(--c-haupt-bg); }
@media (prefers-reduced-transparency: reduce) { .aktionsleiste { background: var(--c-papier); backdrop-filter: none; } }
html.menue-offen .aktionsleiste, html.lb-offen .aktionsleiste { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
@media (min-width: 56.25em) { .aktionsleiste { display: none; } }
/* Platz am Seitenende = Leistenhöhe + Abstand + safe-area, solange die Leiste sichtbar ist */
@media (max-width: 56.1875em) { body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* Mobil ist die Leiste die eine gefüllte Hauptaktion: der Held verzichtet auf seine Tasten (gleiche zwei Wege),
   übrige WhatsApp-Tasten im Inhalt werden Umriss-Tasten. */
@media (max-width: 56.1875em) {
  .held .aktionen { display: none; }
  main .btn-haupt { background: transparent; color: var(--c-text); border-color: var(--c-rand-zweit); }
}

/* ===== 80-bewegung.css ===== */
/* Einblenden beim Scrollen: nur mit JS, nur ohne reduzierte Bewegung. Ohne JS ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) [data-reveal] { opacity: 0; transform: translateY(16px);
    transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
  html.js:not([data-motion="off"]) [data-reveal="1"] { transition-delay: 70ms; }
  html.js:not([data-motion="off"]) [data-reveal="2"] { transition-delay: 140ms; }
  html.js:not([data-motion="off"]) [data-reveal].ist-da { opacity: 1; transform: none; }
}
/* Schalter „Animationen aus“ und Systemeinstellung: alles steht. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media print { .kopf, .menue, .nach-oben, .fuss-spalten, .lb, .vorschau { display: none !important; } }
/* Prüf-Umschalter (nur Vorschau mit ?daten=…) */
.pruef-umschalter { position: fixed; z-index: 200; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: #ddd; font: 13px/1 system-ui, sans-serif; }
.pruef-umschalter a { padding: 7px 12px; border-radius: 999px; color: #222; text-decoration: none; }
.pruef-umschalter a[aria-current] { background: #fff; }

/* ===== 85-glas.css ===== */
/* Glas nur für schwebende Funktionsebenen (apple-design §12, Inhaber 28.10.2026): Kopf beim Scrollen, Dropdowns, Aktionsleiste,
   Nach-oben-Scheibe, Vollbild-Menü, Orte-Blatt, Lightbox-Knöpfe, WhatsApp-Hinweis. Nie für Inhaltskarten oder Abschnitte.
   Gewicht = Hierarchie: große Flächen stärkere Unschärfe + tieferer Schatten als kleine. Nie Glas auf Glas (Kopf wird bei offenem
   Menü durchsichtig). Ohne backdrop-filter, bei reduzierter Transparenz oder mehr Kontrast: deckend mit Rand. */

/* Grundzustand (auch Rückfall): deckend */
.unter, .aktionsleiste, .menue, .orte-blatt, .wa-hinweis { background: var(--glas-deckend); }
@media (max-width: 56.1875em) { .nach-oben { background: var(--glas-deckend); } }
html.gescrollt .kopf { background: var(--glas-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
.aktionsleiste { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 56.1875em) { .nach-oben { -webkit-backdrop-filter: none; backdrop-filter: none; } }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
@media not all and (prefers-reduced-transparency: reduce) {
@media not all and (prefers-contrast: more) {
  /* Kopf beim Scrollen: Material, Kante als weicher Verlauf statt harter Linie */
  /* Material auf ::before, nicht am Kopf selbst: sonst wird der Kopf Backdrop-Root und die Dropdowns darin blurren nichts */
  html.gescrollt .kopf { background: transparent; box-shadow: none; }
  .kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s ease;
    background: var(--glas-mittel); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); }
  html.gescrollt .kopf::before { opacity: 1; }
  html.menue-offen .kopf::before { opacity: 0; }
  .kopf::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0;
    background: linear-gradient(to bottom, var(--glas-linie), transparent); transition: opacity .25s ease; }
  html.gescrollt .kopf::after { opacity: 1; }
  html.menue-offen .kopf { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  html.menue-offen .kopf::after { opacity: 0; }

  /* Dropdown (Desktop): mittleres Material, Lichtkante oben, Ursprung am Auslöser, Unschärfe + Skalierung beim Einblenden */
  @media (min-width: 68.75em) {
    .unter { background: var(--glas-mittel); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
      border-color: var(--glas-linie); box-shadow: inset 0 1px 0 var(--glas-lichtkante), var(--glas-schatten-gross); }
  }

  /* Kleine Ebenen: leichtes Material */
  .aktionsleiste { background: var(--glas-klein); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    box-shadow: inset 0 1px 0 var(--glas-lichtkante), var(--glas-schatten-klein), 0 0 0 1px var(--glas-linie); }
  @media (max-width: 56.1875em) {
    .nach-oben { background: var(--glas-klein); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
      box-shadow: inset 0 1px 0 var(--glas-lichtkante), var(--glas-schatten-klein), 0 0 0 1px var(--glas-linie); }
  }
  .wa-hinweis { background: var(--glas-klein); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-color: var(--glas-linie); box-shadow: inset 0 1px 0 var(--glas-lichtkante), var(--glas-schatten-klein); }

  /* Große Ebenen: kräftige Stufe, starke Unschärfe, tiefer Schatten */
  .menue { background: var(--glas-gross); -webkit-backdrop-filter: saturate(150%) blur(32px); backdrop-filter: saturate(150%) blur(32px); }
  .orte-blatt { background: var(--glas-gross); -webkit-backdrop-filter: saturate(150%) blur(28px); backdrop-filter: saturate(150%) blur(28px);
    box-shadow: inset 0 1px 0 var(--glas-lichtkante), var(--glas-schatten-gross); }

  /* Lightbox-Knöpfe: dunkles Glas über dem Foto */
  .lb .rund-knopf { background: var(--c-lb-glas); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
    box-shadow: inset 0 1px 0 var(--c-lb-lichtkante), 0 0 0 1px var(--c-lb-knopf); }
}}}

/* Text auf Glas: eine Stufe kräftiger, Nebentext mit vollem Kontrast */
@media (min-width: 68.75em) { .unter a { font-family: var(--font-ui); font-weight: 500; } }
.menue-unter a, .wa-hinweis, .orte-adresse { color: var(--glas-text-2); }
.wa-hinweis { font-weight: 500; font-family: var(--font-ui); }

/* Mehr Kontrast: deckend mit klarer Kante */
@media (prefers-contrast: more) {
  .unter, .aktionsleiste, .orte-blatt, .wa-hinweis { border: 1.5px solid var(--c-text); }
  html.gescrollt .kopf { box-shadow: 0 1.5px 0 var(--c-text); }
}

/* Dropdown einblenden: Material kommt an (Unschärfe + Skalierung zusammen), Ursprung oben links am Auslöser */
@media (min-width: 68.75em) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .unter { transform: translateY(-4px) scale(.98); filter: blur(4px);
    transition: opacity .18s ease, transform .24s var(--ease-out), filter .24s var(--ease-out), visibility 0s linear .24s; }
  html:not([data-motion="off"]) .hat-unter:hover > .unter, html:not([data-motion="off"]) .hat-unter.offen > .unter { filter: none; transform: none; }
}