/* ═══════════════════════════════════════════════════════
   HUNDESCHULE WOLFSTEIN · Stylesheet der neuen Website
   Eine Datei seit 15.09.2026 (K28/K40): style.css (Grundlagen, 2026-07-11)
   und neu.css (Gestaltung, ab 25.07.2026) sind hier zusammengelegt.
   Reihenfolge der Regeln bewusst wie zuvor — die Kaskade hängt daran.
   Entscheidungsgeschichte und Messwerte: website-neugestaltung/PROTOKOLL.md
   (26.08.2026 Kontraste, 14.09. Review Teil 4, 15.09. Teil 5).
   Hell ist Standard, dunkel nur per Schalter (.theme-dark).
   ═══════════════════════════════════════════════════════ */

/* ── Schriften, selbst gehostet (kein Google-CDN) ── */
@font-face { font-family: 'Oswald'; src: url('fonts/oswald-v57-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/oswald-v53-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Oswald'; src: url('fonts/oswald-v53-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v47-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v51-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/roboto-v47-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ── Tokens ──
   Kontraste nachgerechnet (26.08.2026): --ink-faint 4,60:1 auf Tönung,
   --sage-deeper für Hover (8,02:1), --line-strong 3,2:1 als Rand für
   Bedienelemente (WCAG 1.4.11). */
:root {
    --sage:        #87a96b;
    --sage-dark:   #6b8a52;
    --sage-deep:   #4f6a3b;
    --sage-deeper: #3f5730;
    --sage-tint:   #eef3e8;
    --sage-line:   #cfdcbf;
    --paper:       #fbfaf7;
    --card:        #ffffff;
    --ink:         #26291f;
    --ink-soft:    #5c6152;
    --ink-faint:   #6a6f5f;
    --line:        #e5e7de;
    --line-strong: #8a8f7e;
    --black:       #0b0b0b;
    --band:        #3a3d33;   /* Bänder: weicher als reines Schwarz, zweite Rückmeldung: noch heller */
    --tint:        #edece3;   /* neutrale Fläche für getönte Abschnitte, deutlicher als Papier (16.09., 3. Rückmeldung) */
    --on-black:    #f4f2ec;
    --on-black-soft: #b9b6ad;
    --shadow: 0 1px 3px rgba(38,41,31,.06), 0 8px 24px rgba(38,41,31,.07);
    --font-display: 'Oswald', 'Avenir Next Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --radius: 12px;
    --wrap: 1080px;
    /* Höhe der Kopfleiste — alle Abstände zur Leiste rechnen damit (K14) */
    --kopf-hoehe: 68px;
    color-scheme: light;
}
.theme-dark {
    --sage:        #9dbb81;
    --sage-dark:   #b2cd97;
    --sage-deep:   #cbe0b4;
    --sage-deeper: #dcecc9;   /* Hover läuft in der dunklen Ansicht nach hell */
    --sage-tint:   #262c1e;
    --sage-line:   #3b4a2a;
    --band:        #121409;
    --tint:        #1e211a;
    --paper:       #191b14;
    --card:        #22251b;
    --ink:         #eaece2;
    --ink-soft:    #a9ae9c;
    --ink-faint:   #8f9682;
    --line:        #32362a;
    --line-strong: #7f8672;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    color-scheme: dark;
}
/* Satzbreite wächst auf großen Bildschirmen mit, bis etwa 90 Zeichen je Zeile */
@media (min-width: 1500px) { :root { --wrap: 1200px; } }
@media (min-width: 1900px) { :root { --wrap: 1320px; } }

/* ── Basis ── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 300;   /* Rückmeldung 16.09.: Fließtext Roboto Light */
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: .02em;
    text-wrap: balance;
    color: var(--ink);
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2.25rem, 5.8vw, 3.6rem); font-weight: 300; }
b, strong { font-weight: 500; }              /* Roboto Medium statt Bold */
input, select, textarea, button { font-weight: 400; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 300; }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1em; max-width: var(--lesemass, none); }   /* 18.09. (2. Runde): war 68ch — die eigentliche Ursache dafür, dass Fließtext neben Tabellen schmal wirkte */
a  { color: var(--sage-deep); }
main p a:not(.btn):not(.card-link), main li a:not(.btn), .notice a {
    /* 17.09.2026: Wort in Grün, Linie fein. Ganz ohne Linie geht nicht — das Grün hebt sich
       vom Text nur 2,4:1 ab (nötig wären 3:1), vom grauen Text gar nicht (1,05:1). */
    color: var(--sage-deep); text-decoration: underline; text-decoration-color: var(--sage);
    text-decoration-thickness: 1px; text-underline-offset: 4px;
}
main p a:not(.btn):not(.card-link):hover, main li a:not(.btn):hover, .notice a:hover { color: var(--sage-deep); text-decoration-color: var(--sage-deep); text-decoration-thickness: 2px; }
a:hover { color: var(--sage-dark); }
ul { padding-left: 1.2em; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--sage-deep); color: #fff;
    padding: 10px 18px; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Kopfleiste ── */
.site-header {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 50;
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: var(--kopf-hoehe);
}
.brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--ink);
}
.nav-list {
    display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
}
.nav-list a {
    display: block; padding: 10px 13px;
    text-decoration: none; color: var(--ink-soft);
    font-family: var(--font-display); font-weight: 400;
    font-size: .95rem; text-transform: uppercase; letter-spacing: .05em;
    border-radius: 8px;
}
.nav-list a:hover { color: var(--sage-deep); background: var(--sage-tint); }
.nav-list a[aria-current="page"] { color: var(--sage-deep); background: var(--sage-tint); font-weight: 400; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
    .nav-toggle {
        display: inline-flex; flex-direction: column; gap: 5px;
        background: none; border: 1px solid var(--line); border-radius: 8px;
        padding: 11px 10px; cursor: pointer;
    }
    .nav-toggle-bar { width: 22px; height: 2px; background: var(--ink); }
    .nav-list {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; gap: 0;
        background: var(--card); border-bottom: 1px solid var(--line);
        padding: 8px 14px 14px; box-shadow: var(--shadow);
    }
    .main-nav.open .nav-list { display: flex; }
}

/* ── Heller Textkopf (Danke, Fehler, 404, Produktsicherheit) ── */
.hero {
    background: linear-gradient(180deg, var(--sage-tint), var(--paper));
    padding: 56px 0 44px;
}
.hero .eyebrow {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .14em; font-size: .85rem; color: var(--sage-deep);
    margin-bottom: 10px;
}
.hero p.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 62ch; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Bildschirmbreiter Foto-Streifen, bricht bewusst aus .wrap aus */
.bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 21 / 9;
    overflow: hidden;
}
.bleed img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px) { .bleed { aspect-ratio: 4 / 5; } }

/* ── Knopfleiste unter dem Kopfbild (Rückmeldung 16.09.: Auswahl unter das Bild) ── */
.hero-leiste { background: var(--card); border-bottom: 1px solid var(--line); }
.hero-leiste .wrap { display: flex; flex-wrap: wrap; gap: 10px 12px; padding-block: 16px; }
.hero-leiste .btn { padding: 10px 18px; font-size: .92rem; }
@media (max-width: 600px) {
    .hero-leiste .wrap { gap: 8px; padding-block: 12px; }
    .hero-leiste .btn { flex: 1 1 calc(50% - 4px); text-align: center; padding: 9px 10px; font-size: .84rem; }
}
.hero-leiste + section { padding-top: 48px; }

/* ── Knöpfe ── */
.btn {
    display: inline-block; padding: 13px 26px;
    font-family: var(--font-display); font-weight: 400;
    font-size: 1rem; text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none; border-radius: 10px;
    border: 2px solid var(--sage-dark);
    transition: transform .12s ease, background .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.btn-solid:hover { background: var(--sage-deeper); border-color: var(--sage-deeper); color: #fff; }
.btn-ghost { background: transparent; color: var(--sage-deep); }
.btn-ghost:hover { background: var(--sage-tint); color: var(--sage-deep); }

/* ── Abschnitte ── */
section { padding: 56px 0; position: relative; }
section.tint {
    background: linear-gradient(180deg,
        var(--paper) 0%, var(--tint) 9%, var(--tint) 91%, var(--paper) 100%);
}
/* 18.09.2026 (Moritz): Auf einer Seite standen bis zu fünf verschiedene
   Textbreiten nebeneinander — Abschnittskopf 84ch, Fließtext 72ch,
   Fakten-Nachsatz 82ch, Fakten-Streifen 82ch. Das wirkte unruhig, ohne dass ein
   Unterschied beabsichtigt war. Jetzt gilt ein Lesemaß für alle Textblöcke;
   Tabellen, Karten und Raster bleiben auf der vollen Inhaltsbreite. */
:root { --lesemass: 100%; }
/* 18.09.2026 (Moritz, 2. Runde): Textblöcke sollen dieselbe Breite haben wie
   Tabellen und Karten — auf einem großen Bildschirm wirkte ein Lesemaß von 72ch
   wie „ein Drittel der Seite". Damit ist D13 (Zeilenlänge 72ch aus dem Review vom
   17.09.) überstimmt: Die Zeilenlänge begrenzt jetzt allein der Inhaltsrahmen
   (--wrap: 1080px, auf sehr großen Schirmen 1200/1320). */
/* Absätze, die direkt im Inhaltsrahmen stehen (ohne .langtext drumherum), liefen
   über die volle Breite — z. B. „Beratung inklusive" auf der MarFaChi-Seite.
   Auch sie halten jetzt das Lesemaß. */
main .wrap > p, main .wrap > ul, main .wrap > ol { max-width: var(--lesemass); }
.section-head { max-width: var(--lesemass); margin-bottom: 26px; }
.section-head p { color: var(--ink-soft); max-width: none; font-weight: 300; font-size: 1.06rem; }

/* ── Gestufte Liste (Empfehlungen) ── */
.stack { display: flex; flex-direction: column; }
.stack-item {
    display: grid; grid-template-columns: 240px 1fr; gap: 36px;
    align-items: center; padding: 36px 0;
    border-top: 1px solid var(--line);
}
.stack-item:last-child { border-bottom: 1px solid var(--line); }
.stack-item.no-photo { grid-template-columns: 1fr; }
.stack-item h3 { margin-bottom: 8px; }
/* h2 statt h3, wo die Liste direkt unter der h1 steht — gleiche Optik */
.stack-item h2 { font-size: 1.2rem; margin-bottom: 8px; }
.stack-item p { color: var(--ink-soft); margin-bottom: 12px; max-width: 60ch; }
@media (max-width: 700px) {
    .stack-item { grid-template-columns: 1fr; padding: 28px 0; }
}

/* ── Vertrauensband ── */
.trust {
    display: grid; gap: 34px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trust-item b {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: 1.3rem; letter-spacing: .01em; margin-bottom: 4px;
}
.trust-item span { color: var(--ink-soft); font-size: .96rem; }

/* ── CTA-Band ── */
.cta-band {
    background: var(--sage-deep); color: #fff;
    padding: 56px 0; text-align: center;
}
.cta-band h2 { color: inherit; }
.cta-band p { margin: 0 auto 22px; max-width: 55ch; opacity: .92; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-solid { background: #fff; color: var(--sage-deep); border-color: #fff; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.cta-band .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Foto-Galerie ── */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.gallery a, .gallery div.gallery-item { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery a:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }

/* ── Tabellen (Preise) ── */
.table-scroll { overflow-x: auto; }
table.price {
    width: 100%; border-collapse: collapse;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden;
    font-variant-numeric: tabular-nums;
}
table.price th, table.price td {
    padding: 12px 16px; text-align: left;
    border-bottom: 1px solid var(--line);
}
table.price th {
    font-family: var(--font-body); font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em; font-size: .78rem;
    background: var(--sage-tint); color: var(--sage-deep);
}
table.price td.num { text-align: right; white-space: nowrap; }
table.price tr:last-child td { border-bottom: none; }

/* ── Hinweiskasten ── */
.notice {
    background: var(--sage-tint); border: 1px solid var(--sage-line);
    border-radius: var(--radius); padding: 18px 22px; margin: 22px 0;
}
.notice p:last-child { margin-bottom: 0; }

/* ── Fußzeile ── */
.site-footer {
    background: var(--card);
    margin-top: 0; padding: 44px 0 0; font-size: .95rem;
}
.footer-grid {
    display: grid; gap: 28px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    padding-bottom: 28px;
}
.site-footer h3 {
    font-size: .85rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--ink-faint); margin-bottom: 10px;
}
.site-footer p { color: var(--ink-soft); margin-bottom: .6em; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { color: var(--ink-soft); text-decoration: none; }
.footer-links a:hover { color: var(--sage-deep); }
.footer-note { font-size: .85rem; color: var(--ink-faint); }
.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 16px; padding-bottom: 20px;
    color: var(--ink-faint); font-size: .87rem;
}

/* ══ Farben und Fokus (Kontraste 26.08.2026) ══════════════ */
/* :not(.btn), weil Knöpfe eigene Hover-Farben haben */
a:hover:not(.btn) { color: var(--sage-deeper); }
.theme-dark .btn-solid { background: var(--sage-dark); border-color: var(--sage-dark); }
.theme-dark .btn-solid:hover { background: var(--sage-deeper); border-color: var(--sage-deeper); }
/* Zwei Ringe (innen --card, außen --ink): auf jedem Untergrund über 3:1 */
:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--card);
}
/* Sprunglink: in der dunklen Ansicht wird --sage-deep hell, also dunkle Schrift */
.theme-dark .skip-link, .theme-dark .skip-link:focus { color: #191b14; }
.theme-dark .btn-solid, .theme-dark .btn-solid:hover { color: #191b14; }
.theme-dark .cta-band { background: var(--sage-tint); color: var(--ink); }
.theme-dark .cta-band .btn-solid { background: var(--sage-dark); color: #191b14; border-color: var(--sage-dark); }
.theme-dark .cta-band .btn-ghost { color: var(--ink); border-color: var(--sage-line); }
/* Textlinks im grünen Band, z. B. die per Skript gebaute Mailadresse (K2) */
main .cta-band p a:not(.btn):not(.card-link), main .cta-band li a:not(.btn), .cta-band a:not(.btn) { color: #fff; text-decoration-color: rgba(255,255,255,.6); text-underline-offset: 3px; }
.cta-band a:not(.btn):hover { text-decoration-color: #fff; }
.theme-dark .cta-band a:not(.btn) { color: var(--sage-deep); text-decoration-color: var(--sage-line); }

/* ══ 0 · Sanftes Einblenden beim Scrollen ═════════════════
   Ohne JavaScript ist alles sofort sichtbar (.js setzt das Kopfskript). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
}
/* Notnagel (K3): fällt neu.js aus, blendet CSS nach 2,5 s selbst ein */
.js .reveal { animation: reveal-notnagel 1ms 2.5s forwards; }
@keyframes reveal-notnagel { to { opacity: 1; transform: none; } }

/* ══ 1 · Kopfleiste über dem Foto ═════════════════════════
   Liegt durchsichtig auf dem Kopfbild, wird beim Scrollen zur hellen Leiste. */
.site-header.over-hero {
    position: fixed; left: 0; right: 0; top: 0;
    background: transparent; border-bottom-color: transparent;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.over-hero .brand,
.site-header.over-hero .nav-list a { color: var(--on-black); }
.site-header.over-hero .nav-list a:hover { background: rgba(255,255,255,.14); color: #fff; }
.site-header.over-hero:not(.is-scrolled) .nav-list a[aria-current="page"] {
    background: rgba(255,255,255,.16); color: #fff;
}
.site-header.over-hero .nav-toggle { border-color: rgba(255,255,255,.5); }
.site-header.over-hero .nav-toggle-bar { background: var(--on-black); }
.site-header.over-hero:not(.is-scrolled) .theme-toggle { color: var(--on-black); }
.site-header.is-scrolled {
    background: var(--card); border-bottom-color: var(--line);
    box-shadow: 0 1px 14px rgba(0,0,0,.05);
}
.site-header.is-scrolled .brand { color: var(--ink); }
.site-header.is-scrolled .nav-list a { color: var(--ink-soft); }
.site-header.is-scrolled .nav-list a:hover { background: var(--sage-tint); color: var(--sage-deep); }
.site-header.is-scrolled .nav-toggle-bar { background: var(--ink); }
@media (max-width: 860px) {
    .site-header.over-hero:not(.is-scrolled) .nav-list { background: rgba(11,11,11,.96); }
    /* Im Ausklappmenü trägt der Schalter ein Wort (K23) */
    .main-nav .theme-toggle { width: auto; padding: 0 12px; gap: 8px; }
    .main-nav .theme-toggle::after {
        content: "Dunkle Ansicht"; font-family: var(--font-display); text-transform: uppercase;
        letter-spacing: .08em; font-size: .82rem;
    }
    .theme-dark .main-nav .theme-toggle::after { content: "Helle Ansicht"; }
}

/* Marke: Signet + Wortmarke (SVG-Kurven, keine Webfont-Lizenz), je hell und dunkel */
.brand { gap: 12px; align-items: center; }
.brand .signet    { height: 38px; width: auto; display: block; flex: none; }
.brand .wortmarke { height: 26px; width: auto; display: block; }
.site-header .marke-dunkel { display: none; }
.site-header.is-scrolled .marke-hell { display: none; }
.site-header.is-scrolled .marke-dunkel { display: block; }
.site-header:not(.over-hero) .marke-hell { display: none; }
.site-header:not(.over-hero) .marke-dunkel { display: block; }
.theme-dark .site-header.is-scrolled .marke-hell,
.theme-dark .site-header:not(.over-hero) .marke-hell { display: block; }
.theme-dark .site-header.is-scrolled .marke-dunkel,
.theme-dark .site-header:not(.over-hero) .marke-dunkel { display: none; }
@media (max-width: 480px) {
    .brand { gap: 9px; }
    .brand .signet    { height: 30px; }
    .brand .wortmarke { height: 21px; }
}
/* Menüpunkte brechen nie um; zwischen 861 und 1200 px enger */
.nav-list a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1200px) {
    .nav-list a { padding-inline: 9px; font-size: .88rem; letter-spacing: .03em; }
    .header-inner { gap: 10px; }
}
.theme-toggle {
    background: none; border: 1px solid currentColor; color: inherit;
    border-radius: 8px; width: 38px; height: 38px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1rem; line-height: 1; opacity: .75;
}
.theme-toggle:hover { opacity: 1; }

/* ══ 2 · Schwarzer Hero der Startseite (Jinjin) ═══════════
   object-fit: contain, damit der Hund auf jeder Bildschirmgröße ganz zu
   sehen ist; der Rest ist Schwarz wie die Fotokulisse. */
.hero-black {
    position: relative;
    padding: clamp(36px, 7vh, 92px) 0;
    background: #000;
    min-height: clamp(560px, 100svh, 900px);
    display: flex; align-items: center;
    overflow: hidden;
    isolation: isolate;
}
.hero-black > img {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: 36% 50%;
}
.hero-black::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(100deg, rgba(11,11,11,0) 38%, rgba(11,11,11,.55) 62%, rgba(11,11,11,.88) 100%),
        linear-gradient(0deg, rgba(11,11,11,.8) 0%, rgba(11,11,11,0) 34%);
}
.hero-black .wrap { position: relative; z-index: 2; width: 100%; }
.hero-black-text {
    max-width: 30rem; margin-left: auto;
    padding: clamp(24px, 6vh, 96px) 0 clamp(40px, 9vh, 120px);
}
.hero-black .eyebrow {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .2em; font-size: .8rem; color: var(--sage);
    margin-bottom: 14px;
}
.hero-black h1 {
    color: #fff; text-transform: uppercase;
    font-size: clamp(2.3rem, 5.2vw, 3.9rem);
    line-height: 1.02; letter-spacing: .005em; margin-bottom: .35em;
}
.hero-black h1 em { font-style: normal; color: var(--sage); }
.hero-black p { color: var(--on-black-soft); font-size: 1.08rem; max-width: 34ch; }
.hero-black .hero-actions { margin-top: 28px; }
.hero-black .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero-black .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
/* „Mehr ↓" steht in der Bildschirmmitte, nicht in der Textspalte */
.hero-scroll-leiste { position: absolute; z-index: 2; left: 0; right: 0; bottom: 26px; }
.hero-scroll-leiste .wrap { display: flex; justify-content: center; }
.hero-scroll {
    color: rgba(255,255,255,.7); font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
    text-decoration: none; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.hero-scroll span { display: block; font-size: 1.1rem; letter-spacing: 0; animation: heroNudge 2.4s ease-in-out infinite; }
@keyframes heroNudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 860px) {
    /* Handy: Foto oben als Streifen, Text darunter auf Schwarz */
    .hero-black { display: block; min-height: 0; align-items: initial; }
    .hero-black > img {
        position: static; width: 100%; height: 38svh; min-height: 220px;   /* D6: Text und Knopf in den ersten Bildschirm */
        object-fit: cover; object-position: 50% 58%;
    }
    .hero-black::after { display: none; }
    .hero-black .wrap { position: static; }
    .hero-black-text { margin: 0; max-width: none; padding: 22px 0 8px; }
    .hero-black p { max-width: 42ch; }
    .hero-black .hero-actions { margin-top: 18px; }
    .hero-scroll-leiste { position: static; padding-bottom: 34px; }
}

/* ══ 2b · Bildkopf der Unterseiten ════════════════════════
   Immer gleich hoch (Mindesthöhe gewinnt), Bilder als 3:1-Banner. */
.page-hero {
    position: relative;
    display: flex; align-items: flex-end;
    min-height: clamp(440px, 42vw, 620px);   /* 18.09. (Moritz): höher, damit vom Kopfbild mehr zu sehen ist */
    padding: 0; margin-bottom: 0;
    background: var(--black);
    overflow: hidden; isolation: isolate;
}
.page-hero > img {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: var(--fokus, 50% 42%);
}
/* Zwei Schleier: unten für die Schrift, oben leicht für die Kopfleiste */
.page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(11,11,11,.58) 0%, rgba(11,11,11,.18) 24%, rgba(11,11,11,0) 42%),
        /* 18.09.2026 (Moritz): Der Verlauf trägt die Schrift, lässt das Bild darüber
           aber frei — vorher lag er über der ganzen Höhe und machte dunkle Motive
           (schwarzer Hund) fast unsichtbar. */
        linear-gradient(0deg, rgba(11,11,11,.93) 0%, rgba(11,11,11,.74) 22%, rgba(11,11,11,.34) 48%, rgba(11,11,11,0) 72%);
}
.page-hero .wrap { position: relative; z-index: 2; width: 100%; padding-block: 0 clamp(30px, 5vh, 54px); }
.page-hero .eyebrow {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .2em; font-size: .8rem; color: var(--sage);
    margin-bottom: 12px;
}
.page-hero h1 {
    color: #fff; text-transform: uppercase;
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    line-height: 1.04; margin-bottom: .3em;
}
.page-hero .lede {
    color: var(--on-black-soft); font-size: 1.12rem; font-weight: 300;
    max-width: 64ch; margin: 0;
}
.page-hero .hero-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.page-hero .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
/* 18.09.2026 (Moritz): Steht der Hund im Foto links, beginnt der Text rechts von
   ihm — das Bild bleibt ganzflächig, nur die Textspalte rückt.
   20.09.2026: Der Block stand vorher VOR „.page-hero .lede { max-width: 64ch }“.
   Gleiche Spezifität, also gewann die spätere Regel — die Überschrift rückte nach
   rechts, der Fließtext blieb links stehen. Jetzt steht er hinter allen Hero-Regeln. */
@media (min-width: 861px) {
    .page-hero--text-rechts .wrap > *,
    .page-hero--text-rechts .wrap > .lede {
        max-width: min(34rem, 52%); margin-left: auto;
    }
}
/* Platz für die durchsichtige Kopfleiste */
.page-hero { padding-top: calc(var(--kopf-hoehe) + 10px); }
@media (max-width: 860px) {
    .page-hero { min-height: clamp(380px, 46svh, 430px); padding-top: calc(var(--kopf-hoehe) - 2px); }
    .page-hero .wrap { padding-block: 0 24px; }
    .page-hero .lede { font-size: 1rem; max-width: none; }
    .page-hero .hero-actions { margin-top: 12px; gap: 8px; }
    /* zwei Knöpfe je Zeile (K4) */
    .page-hero .hero-actions .btn {
        flex: 1 1 calc(50% - 4px); min-width: 0; text-align: center;
        padding: 9px 12px; font-size: .8rem; letter-spacing: .04em;
    }
}

/* Kopf mit freistehendem Motiv (17.09.2026): Das unveränderte Foto steht in voller
   Höhe am Rand und läuft zur Mitte in die dunkle Fläche aus; der Titel steht
   daneben. Nichts wird gespiegelt oder retuschiert, das Foto wird nur verschoben
   (Moritz 17.09.). „--motiv-links“ für Ablauf: Hund und lesbarer Aufnäher links,
   Titel rechts. „--motiv-rechts“ für Assistenzhunde: Hund rechts, Titel links.
   --blende = wie weit das Foto ausläuft. */
.page-hero--motiv-rechts, .page-hero--motiv-links {
    background: var(--band);
    min-height: clamp(460px, 36vw, 640px);
}
.page-hero--motiv-rechts > img, .page-hero--motiv-links > img {
    width: auto; height: 100%; max-width: none; aspect-ratio: 3 / 2;
}
.page-hero--motiv-rechts > img {
    inset: 0 0 0 auto; object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 var(--blende, 46%));
            mask-image: linear-gradient(90deg, transparent 0%, #000 var(--blende, 46%));
}
.page-hero--motiv-links > img {
    inset: 0 auto 0 0; object-position: 0% 50%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 var(--blende, 46%));
            mask-image: linear-gradient(270deg, transparent 0%, #000 var(--blende, 46%));
}
.page-hero--motiv-rechts::after, .page-hero--motiv-links::after {
    background: linear-gradient(180deg, rgba(11,11,11,.5) 0%, rgba(11,11,11,.14) 22%, rgba(11,11,11,0) 38%);
}
.page-hero--motiv-rechts .wrap > *, .page-hero--motiv-links .wrap > * { max-width: min(30rem, 46%); }
.page-hero--motiv-links .wrap > * { margin-left: auto; }
@media (max-width: 860px) {
    /* schmal: Foto oben ohne Schleier, Titel darunter auf der dunklen Fläche */
    .page-hero--motiv-rechts, .page-hero--motiv-links { display: block; min-height: 0; padding-top: var(--kopf-hoehe); }
    .page-hero--motiv-rechts > img, .page-hero--motiv-links > img {
        position: relative; inset: auto; display: block;
        width: 100%; height: auto; aspect-ratio: 4 / 3;
        -webkit-mask-image: none; mask-image: none;
    }
    .page-hero--motiv-rechts > img { object-position: 35% 50%; }
    .page-hero--motiv-rechts::after, .page-hero--motiv-links::after { display: none; }
    .page-hero--motiv-rechts .wrap, .page-hero--motiv-links .wrap { padding-block: 22px 26px; }
    .page-hero--motiv-rechts .wrap > *, .page-hero--motiv-links .wrap > * { max-width: none; margin-left: 0; }
}

/* ══ 2c · Lange Fließtext-Seiten ══════════════════════════ */
.langtext p,
.langtext ul,
.langtext ol { max-width: none; }
.langtext p { font-size: 1.12rem; line-height: 1.75; font-weight: 300; max-width: var(--lesemass); } /* D13, 18.09. auf das gemeinsame Lesemaß */
.langtext h2 { margin-top: 1.8em; }
.langtext ul li, .langtext ol li { margin-bottom: .55em; padding-left: .2em; }
.langtext ul, .langtext ol { margin: .4em 0 1.2em; }
.langtext h2:first-of-type { margin-top: 0; }
.langtext .notice p { font-size: 1.03rem; }

/* ══ 2c-2 · Rechtstexte (Impressum, Datenschutz) ══════════
   Text aus rechtstexte_portieren.py mit eigenen Listenklassen
   (.index, .m-elements, .glossary). Enger und kleiner: zum Nachschlagen. */
.rechtstext p,
.rechtstext li { font-size: 1rem; line-height: 1.65; }
.rechtstext p { margin: 0 0 .7em; }
.rechtstext h2 {
    font-size: 1.32rem; margin-top: 2.2em; padding-top: .9em;
    border-top: 1px solid var(--line);
}
.rechtstext h3 { font-size: 1.08rem; margin-top: 1.6em; }
.rechtstext a { overflow-wrap: anywhere; }
.rechtstext ul { margin: 0 0 1em; padding-left: 1.2em; }
.rechtstext li { margin-bottom: .35em; }
.rechtstext ul.index { list-style: none; padding-left: 0; }
.rechtstext ul.index li { margin-bottom: .5em; }
.rechtstext ul.glossary li { margin-bottom: .9em; }
.rechtstext .seal { margin-top: 2.4em; font-size: .9rem; color: var(--ink-soft); }

/* ══ 2d · Zwei Begriffe gegenübergestellt (Erziehung/Ausbildung) ══ */
.begriffe {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 68px);
    align-items: start;
}
.begriffe > div { position: relative; }
.begriffe > div + div::before {
    content: ""; position: absolute;
    left: calc(clamp(28px, 5vw, 68px) / -2); top: .4em; bottom: .4em;
    width: 1px; background: var(--sage-line);
}
.begriffe .wort {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .04em;
    font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1;
    color: var(--sage-deep); margin-bottom: .5em;
}
.begriffe p { margin: 0; max-width: none; font-size: 1.06rem; line-height: 1.7; }
.begriffe-schluss {
    max-width: none;
    margin-top: clamp(28px, 4vw, 44px); text-align: center;
    font-family: var(--font-display); font-weight: 400;
    letter-spacing: .03em; font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.25; color: var(--ink);
}
.begriffe-schluss b { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) {
    .begriffe { grid-template-columns: 1fr; gap: 30px; }
    .begriffe > div + div::before {
        left: 0; right: 0; top: -15px; bottom: auto; width: auto; height: 1px;
    }
}

/* ══ 3 · Dreier-Intro (Kicker + Titel + Text) ═════════════ */
.intro-trio {
    display: grid; gap: 48px;
    grid-template-columns: repeat(3, 1fr);
    padding: 80px 0;
    align-items: stretch;
}
.intro-trio > div { display: flex; flex-direction: column; }
.intro-trio > div > p:last-of-type { margin-bottom: 22px; }
.intro-trio .card-link { margin-top: auto; align-self: flex-start; }
.intro-trio .kicker {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .18em;
    font-size: .82rem; color: var(--sage-deep); margin-bottom: 6px;
}
.intro-trio h2 {
    text-transform: uppercase; font-size: 1.45rem;
    letter-spacing: .02em; margin-bottom: .55em;
}
.intro-trio p { color: var(--ink-soft); font-size: .98rem; }
.intro-trio .card-link {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
    text-decoration: none;
}
.intro-trio .card-link::after { content: " →"; }
@media (max-width: 860px) {
    .intro-trio { grid-template-columns: 1fr; gap: 38px; padding: 56px 0; }
}

/* ══ 4 · „Wähle deinen Einstieg" — die ganze Kachel ist der Link ══ */
.einstieg-head { text-align: center; margin: 0 auto 52px; }
.einstieg-head .wortmarke { max-width: 230px; margin: 0 auto 24px; display: block; }
.einstieg-head .kicker {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .2em; font-size: .82rem; font-weight: 400; color: var(--sage-deep);
    margin-bottom: 8px;
}
.einstieg-head h2 {
    text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin-bottom: .3em;
}
.einstieg-head p { color: var(--ink-soft); max-width: 46ch; margin: 0 auto; }

.einstieg { display: grid; gap: 44px 32px; grid-template-columns: repeat(3, 1fr); }
.einstieg-item {
    display: block; text-decoration: none; color: inherit;
}
.einstieg-item .foto {
    display: block; overflow: hidden; border-radius: var(--radius);
    aspect-ratio: 3 / 2; background: var(--sage-tint); margin-bottom: 16px;
}
.einstieg-item .foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.einstieg-item:hover .foto img { transform: scale(1.045); }
.einstieg-item h3 {
    text-transform: uppercase; font-size: 1.12rem;
    letter-spacing: .02em; margin: 0 0 5px; transition: color .2s ease;
}
.einstieg-item:hover h3 { color: var(--sage-deep); }
.einstieg-item .fakten {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .11em; font-size: .72rem; color: var(--sage-deep);
    margin: 0 0 9px;
}
.einstieg-item p.text { color: var(--ink-soft); font-size: .95rem; margin: 0; max-width: 36ch; }
@media (max-width: 900px) { .einstieg { grid-template-columns: repeat(2, 1fr); gap: 38px 26px; } }
@media (max-width: 580px) { .einstieg { grid-template-columns: 1fr; gap: 34px; } }

/* Schlanke Zeile für das, was keine Kachel braucht */
.einstieg-mehr {
    margin-top: 40px; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--card); display: flex; flex-wrap: wrap; gap: 10px 36px; align-items: baseline;
}
.einstieg-mehr > span {
    flex-basis: 100%; font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .14em; font-size: .8rem; color: var(--sage-deep);
}
.einstieg-mehr a {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .06em; font-size: .88rem; text-decoration: none;
    display: inline-block; padding: 8px 16px; border: 1px solid var(--sage-line);
    border-radius: 999px; color: var(--sage-deep); background: var(--paper);
}
.einstieg-mehr a:hover { background: var(--sage-tint); border-color: var(--sage); }
.einstieg-mehr a::after { content: " →"; }
.einstieg-mehr { gap: 10px 10px; }
/* Zwei Bilder in der schmalen Spalte neben einem Text (18.09.2026: Mary bei Susanne) */
/* 18.09.2026 (Moritz): Zwei Bilder in der schmalen Spalte. Wichtig — das Kleben
   (sticky) gehört an die Spalte, nicht an die einzelnen Bilder: Sonst blieb das
   erste Bild stehen und das zweite schob sich beim Scrollen in seine
   Bildunterschrift. Jetzt wandern beide gemeinsam mit. */
.split-media-spalte {
    display: flex; flex-direction: column; gap: 26px;
    position: sticky; top: calc(var(--kopf-hoehe) + 28px);
}
.split-media-spalte .split-media { margin: 0; position: static; }
/* 18.09.2026 (Moritz): „Außerdem bei uns“ als gleichmäßiges Raster — gleich breite
   Felder statt einer Reihe verschieden langer Knöpfe. */
.einstieg-mehr.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.einstieg-mehr.raster > span { grid-column: 1 / -1; margin-bottom: 2px; }
.einstieg-mehr.raster a { text-align: center; }
@media (max-width: 760px) { .einstieg-mehr.raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .einstieg-mehr.raster { grid-template-columns: 1fr; } }
/* Ohne Nummer wirkt die Zeile sonst zu eng am Rand (Abschnitt „Alles an einem Ort“) */
.weg-step:not(:has(.num)) h3 { margin-top: 0; }
/* Sprungliste unter einer Abschnittsüberschrift (Training) — gleiche Chips */
.sprungliste { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.sprungliste a {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .88rem;
    text-decoration: none; display: inline-block; padding: 8px 16px; border: 1px solid var(--sage-line);
    border-radius: 999px; color: var(--sage-deep); background: var(--card);
}
.sprungliste a:hover { background: var(--sage-tint); border-color: var(--sage); }
.section-head + .sprungliste { margin-bottom: 10px; }
/* 17.09.2026 (Moritz): Auswahlknöpfe sehen aus wie „Platz anfragen“ (.btn-ghost) —
   rechteckig mit runden Ecken, gleicher Grund, gleiche Reaktion beim Überfahren.
   Etwas kleiner als ein echter Knopf, damit vier nebeneinander nicht drücken. */
main .sprungliste li a:not(.btn), main .einstieg-mehr a:not(.btn) {   /* stärker als die Textlink-Regel: keine Unterstreichung */
    padding: 9px 20px; font-size: .92rem; letter-spacing: .05em;
    border: 2px solid var(--sage-dark); border-radius: 10px;
    background: transparent; color: var(--sage-deep); text-decoration: none;
    transition: transform .12s ease, background .12s ease;
}
main .sprungliste li a:not(.btn):hover, main .einstieg-mehr a:not(.btn):hover {
    background: var(--sage-tint); border-color: var(--sage-dark); color: var(--sage-deep);
    transform: translateY(-1px);
}

/* ══ 5 · Lebensweg-Band ═══════════════════════════════════ */
.weg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 40px; }
.weg.vier { grid-template-columns: repeat(4, 1fr); }
.weg.drei { grid-template-columns: repeat(3, 1fr); }
.weg-step { padding: 26px 20px 0; border-top: 3px solid var(--sage-line); }
.weg-step:first-child { padding-left: 0; }
.weg-step:last-child { padding-right: 0; }
.weg-step .num {
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .16em;
    font-size: .72rem; color: var(--sage-deep); display: block; margin-bottom: 6px;
}
.weg-step h3 { text-transform: uppercase; font-size: 1.05rem; margin-bottom: .45em; }
.weg-step p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
@media (max-width: 900px) {
    .weg, .weg.vier, .weg.drei { grid-template-columns: 1fr; }
    .weg-step { border-top: none; border-left: 3px solid var(--sage-line); padding: 0 0 24px 20px; }
    .weg-step:first-child { padding-left: 20px; }
    .weg-step:last-child { padding-bottom: 0; }
}

/* ══ 6a · Schwarzes Band — der einzige zweite schwarze Moment ══ */
.band-schwarz {
    background: var(--band); color: var(--on-black);
    padding: 64px 0;
}
.band-schwarz h2 { color: #fff; }
.band-schwarz .section-head p { color: var(--on-black-soft); }
.band-schwarz .weg-step { border-top-color: rgba(255,255,255,.28); }
.band-schwarz .weg-step h3 { color: #fff; }
.band-schwarz .weg-step p { color: var(--on-black-soft); }
.band-schwarz .weg-step .num { color: var(--sage); }
.band-schwarz .fakten-streifen p { color: var(--on-black-soft); }
.band-schwarz .fakten-streifen p b { color: #fff; }
.band-schwarz .notice { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); }
.band-schwarz .notice p { color: var(--on-black-soft); }
@media (max-width: 900px) {
    .band-schwarz .weg-step { border-left-color: rgba(255,255,255,.28); }
}

/* ══ 6b · Zitatband ═══════════════════════════════════════ */
.band-zitat { background: var(--sage-tint); padding: 0; overflow: hidden; }
.band-zitat .inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.band-zitat figure { margin: 0; height: 100%; min-height: 400px; }
.band-zitat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-zitat .text { padding: 64px clamp(24px, 5vw, 72px); max-width: 40rem; }
.band-zitat .leitsatz-kicker {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .2em; font-size: .76rem; color: var(--sage-deep); margin: 0 0 14px;
}
.band-zitat .leitsatz {
    margin: 0; font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.22; color: var(--ink);
    max-width: 24ch; text-wrap: balance;
}
@media (max-width: 860px) {
    .band-zitat .inner { grid-template-columns: 1fr; }
    .band-zitat .text { padding: 44px 20px; }
    .band-zitat figure { min-height: 260px; }
}

/* ══ 7 · Zweispalter Text + mitlaufendes Bild ═════════════ */
.split { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: center; } /* 16.09.: Bildspalte mittig */
.split.media-left { grid-template-columns: 340px 1fr; }
.split-media { margin: 0; position: sticky; top: calc(var(--kopf-hoehe) + 28px); }
.split-media img { width: 100%; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.split-media figcaption { font-size: .82rem; color: var(--ink-faint); padding: 10px 2px 0; line-height: 1.45; }
.split-media .stat {
    display: block; font-family: var(--font-display); font-weight: 400;
    font-size: 2.1rem; color: var(--sage-deep); line-height: 1;
}
@media (max-width: 860px) {
    .split, .split.media-left { grid-template-columns: 1fr; gap: 28px; }
    .split-media { position: static; max-width: 420px; }
    .split.media-left .split-media { order: -1; }
}

/* ══ 8 · Angebots-Zeile: großes Bild, Text daneben ════════ */
.feature {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px); align-items: center;
    padding: 56px 0;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature-media { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
/* 20.09.2026 (Moritz): Am Handy wird .feature-media flacher (16/10 statt 4/3), dadurch
   schnitt der mittige Standardausschnitt Gesichter oben ab. Der Ausschnitt lässt sich
   jetzt je Bild über --fokus auf der <figure> steuern. */
.feature-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); display: block; transition: transform .6s ease; }
.feature:hover .feature-media img { transform: scale(1.03); }
.feature:nth-of-type(even) .feature-media { order: 2; }
.feature .kicker {
    font-family: var(--font-display); text-transform: uppercase;
    /* 17.09.2026: war blass, weil die Zeile das Light-Gewicht (300) der Seite erbte und nur 12 px hatte.
       Die Farbe stimmte schon (5,8:1) — geholfen hat Gewicht 400 und etwas mehr Größe. */
    letter-spacing: .16em; font-size: .82rem; font-weight: 400; color: var(--sage-deep); margin-bottom: 6px;
}
.feature h2, .feature h3 { text-transform: uppercase; margin-bottom: .4em; }
.feature p { color: var(--ink-soft); }
.fakten-liste { margin: 18px 0 22px; padding: 0; list-style: none; display: grid; gap: 9px; }
.fakten-liste li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; font-size: .95rem; }
.fakten-liste dt, .fakten-liste b {
    font-family: var(--font-body); font-weight: 500; text-transform: uppercase;
    letter-spacing: .08em; font-size: .74rem; color: var(--ink-faint); padding-top: 4px;
}
@media (max-width: 800px) {
    .feature { grid-template-columns: 1fr; padding: 40px 0; }
    .feature:nth-of-type(even) .feature-media { order: -1; }
    .feature-media { aspect-ratio: 16 / 10; }
}

/* ══ 9 · Kontakt: Formular neben den Kontaktwegen ═════════ */
.kontakt-layout { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
/* Eingebettetes Erstkontakt-Formular: kompakter als die eigene Formularseite (17.09.) */
#formular .fragebogen-frame { max-width: none; margin: 0; padding: 0; }
#formular .fragebogen-section { margin-top: 0; margin-bottom: 8px; }
#formular .fragebogen-progress { display: none; }
#formular .fragebogen-section h2 { font-size: 1.05rem; margin: 22px 0 10px; padding-bottom: 6px; }
#formular #sectionA, #formular #sectionB { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
#formular #sectionA > h2, #formular #sectionB > h2 { grid-column: 1 / -1; }
#formular .fragebogen-frage { margin-bottom: 12px; }
#formular .fragebogen-frage > label, #formular fieldset.optionen legend { font-size: .96rem; margin-bottom: 6px; }
#formular .fragebogen-frage .hinweis { font-size: .8rem; margin-top: 4px; }
#formular .optionen-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
#formular textarea { min-height: 120px; }
#formular .fragebogen-anhang-block { margin-top: 22px; }
#formular .fragebogen-anhang-block p, #formular .fragebogen-anhang-block li, #formular .fragebogen-datenschutz p { font-size: .9rem; }
@media (max-width: 640px) {
    #formular #sectionA, #formular #sectionB, #formular .optionen-liste { grid-template-columns: 1fr; }
}
.kontakt-karte {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.kontakt-karte h3 { text-transform: uppercase; font-size: 1rem; letter-spacing: .08em; margin-bottom: 14px; }
.kontakt-karte p { font-size: .95rem; color: var(--ink-soft); }
.kontakt-weg { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.kontakt-weg .label {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
    font-size: .72rem; color: var(--ink-faint); min-width: 62px;
}
.formular { display: grid; gap: 18px; }
.feld { display: grid; gap: 6px; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.formular label {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .09em; font-size: .78rem; color: var(--ink-soft);
}
.formular input, .formular select, .formular textarea {
    font-family: var(--font-body); font-size: 1rem; color: var(--ink);
    background: var(--card); border: 1px solid var(--line-strong);
    border-radius: 10px; padding: 12px 14px; width: 100%;
}
/* Fokusring kommt von :focus-visible (K7), nur der Rand wechselt */
.formular input:focus, .formular select:focus, .formular textarea:focus { border-color: var(--sage-deep); }
.formular textarea { min-height: 140px; resize: vertical; }
.formular .hinweis { font-size: .85rem; color: var(--ink-faint); margin: 0; }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
    .kontakt-layout { grid-template-columns: 1fr; gap: 34px; }
    .feld-paar { grid-template-columns: 1fr; }
}

/* ══ 9b · Anteaser: Titel, ein Satz, Pfeil ════════════════ */
.anteaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 34px; }
.anteaser > a {
    display: block; text-decoration: none; color: inherit;
    border-top: 3px solid var(--sage-line); padding-top: 20px;
    transition: border-color .2s ease;
}
.anteaser > a:hover { border-top-color: var(--sage-dark); }
.anteaser h3 { text-transform: uppercase; font-size: 1.08rem; margin: 0 0 8px; transition: color .2s ease; }
.anteaser > a:hover h3 { color: var(--sage-deep); }
.anteaser p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 12px; }
.anteaser .pfeil {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    letter-spacing: .06em; font-size: .82rem; color: var(--sage-deep);
}
.anteaser .pfeil::after { content: " →"; }
@media (max-width: 560px) { .anteaser { grid-template-columns: 1fr; gap: 28px; } }

/* Kurzliste: Titel + eine Zeile, zweispaltig, ohne Kastenoptik */
.kurzliste { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 44px; margin: 0; padding: 0; }
.kurzliste > div, .kurzliste > details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.kurzliste h3 { text-transform: uppercase; font-size: 1rem; margin: 0 0 4px; }
.kurzliste p { color: var(--ink-soft); font-size: .94rem; margin: 0; max-width: none; }
@media (max-width: 760px) { .kurzliste { grid-template-columns: 1fr; } }

/* Logo einer Fremdmarke im Abschnittskopf (18.09.2026, Moritz: Non-stop).
   Steht auf hellem Grund, damit die dunkle Wortmarke auch im Dunkelmodus lesbar
   bleibt — Fremdlogos färben wir nicht um. */
.marken-logo { margin: 0 0 16px; }
.marken-logo img {
    width: 190px; max-width: 62%; height: auto; display: block;
    background: #fff; padding: 12px 16px; border-radius: 10px;
}

/* Einleitung, die mittig stehen soll (18.09.2026, Moritz: „Von Hand geflochten“
   wirkte nach links gerutscht, darunter klaffte eine Lücke). */
.intro-mitte { text-align: center; max-width: 720px; margin-inline: auto; }
.intro-mitte p { margin-inline: auto; }
section.narrow:has(.intro-mitte) { padding-bottom: 28px; }

/* Ruhiger Fakten-Streifen (Anerkennungen) */
.fakten-streifen {
    border-left: 3px solid var(--sage); padding: 4px 0 4px 24px;
    max-width: none;
}
.fakten-streifen p { color: var(--ink-soft); margin-bottom: 1em; max-width: var(--lesemass); }
.fakten-streifen p b { color: var(--ink); font-weight: 500; }
.fakten-nachsatz {
    margin: 30px 0 0; max-width: var(--lesemass);
    font-size: .94rem; color: var(--ink-faint);
}
.fakten-streifen p:last-child { margin-bottom: 0; }

/* ══ 10 · Partner-Logos (erst wieder ab drei Partnern) ════ */
.logo-strip { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: center; }
.logo-strip img {
    max-height: 96px; width: auto; opacity: .9; transition: opacity .25s ease;
}
.logo-strip a:hover img { opacity: 1; }

/* ── Kleinigkeiten ── */
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.breit { max-width: none; }
.section-head.breit p { max-width: none; }
.section-head.center p { margin-left: auto; margin-right: auto; text-wrap: balance; }
section.narrow { padding-block: 48px; }
/* Rückmeldung 16.09.: schmale Abschnitte mittig und ohne leeres Drittel rechts.
   20.09.2026 (Moritz): Die Zeile „section.narrow .wrap { max-width: none }“ ist raus —
   sie hat dem Rahmen nicht das schmale Maß genommen, sondern jede Begrenzung, dadurch
   lief der erste Textblock (z. B. auf assistenzhunde.html) über die ganze Fensterbreite,
   während alle anderen Abschnitte bei --wrap endeten. Jetzt gilt überall --wrap. */
.notice p { max-width: none; }

/* Kurzer Hinweis vor einer Schrittfolge */
.vorab { max-width: none; margin: 0 0 44px; padding-left: 24px; border-left: 3px solid var(--sage); }
.vorab p { max-width: none; }
.vorab-kicker {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: .18em; font-size: .74rem; color: var(--sage-deep); margin: 0 0 6px;
}
.vorab p:last-child { color: var(--ink-soft); margin: 0; }

/* ══ 12 · Zeilenumbruch: kein einzelnes Wort in der letzten Zeile ══ */
p, li, .lede { text-wrap: pretty; }

/* ══ 12a · Luft zwischen Kopf und erstem Abschnitt ════════ */
.hero + section,
.page-hero + section { padding-top: 48px; }
.hero + section.narrow,
.page-hero + section.narrow { padding-top: 40px; }

/* ══ 12b · Verweis-Links in der gestuften Liste ═══════════ */
.stack-item a.card-link {
    display: inline-block; margin-top: 4px;
    font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .05em; font-size: .9rem;
    color: var(--sage-deep); text-decoration: none;
}
.stack-item a.card-link::after { content: " →"; transition: transform .2s ease; display: inline-block; }
.stack-item a.card-link:hover { color: var(--sage-dark); }
.stack-item a.card-link:hover::after { transform: translateX(3px); }

/* ══ 13 · Werbekennzeichnung für Partnerlinks ═════════════ */
.tag-werbung {
    display: inline-block; font-family: var(--font-display); font-weight: 400;
    text-transform: uppercase; letter-spacing: .05em; font-size: .72rem;
    color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px;
    padding: 3px 10px; margin-bottom: 10px;
}

/* ══ 15 · Markenname MarFaChi ═════════════════════════════
   Cafe Brewery darf nicht als Webfont eingebettet werden, wohl aber als
   Vektor: einmal je Seite als <symbol>, Fundstellen per <use>,
   fill: currentColor erbt die Textfarbe. (Eine CSS-Maske war in Safari
   unsichtbar — deshalb eingebettetes SVG.) */
.marfachi {
    display: inline-block;
    width: 3.763em; height: .887em;   /* Seitenverhältnis der SVG (3763 × 887) */
    vertical-align: -0.02em;
    line-height: 0;
}
.marfachi svg {
    width: 100%; height: 100%; display: block;
    fill: currentColor;
}

/* ══ 14 · Handy: dichtere Abstände ════════════════════════
   Muss NACH den Abstandsregeln aus 12a stehen (gleiche Spezifität). */
@media (max-width: 640px) {
    section { padding: 48px 0; }
    section.narrow,
    .hero + section.narrow,
    .page-hero + section.narrow { padding-block: 40px; }
    .hero + section,
    .page-hero + section { padding-top: 40px; }
    .band-schwarz { padding: 56px 0; }
    .cta-band { padding: 46px 0; }

    .hero { padding: 44px 0 36px; }
    .hero p.lede { font-size: 1.1rem; }
    .section-head { margin-bottom: 22px; }
    .feature { padding: 32px 0; }
    .vorab { margin-bottom: 32px; }

    .kontakt-weg a, .kontakt-weg span { overflow-wrap: anywhere; }
}

/* ══ Nachbesserungen aus dem externen Review (14.09.2026, Teil 4) ══ */
/* Sprungmarken unter der festen Kopfleiste */
[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
/* Links im schwarzen Band */
main .band-schwarz p a:not(.btn):not(.card-link), main .band-schwarz li a:not(.btn), .band-schwarz a { color: var(--sage); text-decoration-color: rgba(157,187,129,.5); }
.band-schwarz a:hover { color: #fff; }
.band-schwarz .fakten-nachsatz { color: var(--on-black-soft); }
/* Links im Bildkopf */
main .page-hero p.lede a:not(.btn):not(.card-link), .page-hero .lede a { color: #fff; text-decoration-color: var(--sage); text-underline-offset: 3px; }
.page-hero .lede a:hover { color: var(--sage); }
/* Anteaser ohne Link (Platzhalter) */
.anteaser > div { display: block; border-top: 3px solid var(--sage-line); padding-top: 20px; }
.anteaser .pfeil.still { color: var(--ink-faint); }
.anteaser .pfeil.still::after { content: none; }
/* Kurzliste dreispaltig für neun Einträge */
@media (min-width: 900px) { .kurzliste.drei { grid-template-columns: repeat(3, 1fr); gap: 4px 36px; } }
.kurzliste + .langtext { margin-top: 22px; }
.kurzliste + .hero-actions { margin-top: 26px; }
/* Entscheidungshilfe: zwei Hinweiskästen nebeneinander */
.notice-paar { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.notice-paar .notice { flex: 1 1 280px; margin: 0; }
.notice ul { margin: 10px 0 0; padding-left: 20px; }
.notice ul li { margin-bottom: 4px; }
/* Hinweiskasten mit Logo */
.notice.mit-logo { display: flex; gap: 18px; align-items: center; }
.notice.mit-logo img { border-radius: 8px; flex-shrink: 0; }
.notice.mit-logo p { margin: 0; }
/* Kleinkram statt Inline-Stilen */
.kontakt-karte + .kontakt-karte { margin-top: 22px; }
.gallery.zwei { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin-inline: auto; }
/* MarFaChi: Linien als Karten (16.09.2026, nach Muster der Infoseite) */
.linien { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.linie { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 16px 18px 18px; }
.linie img { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: 12px; }
.linie h3 { text-transform: uppercase; font-size: 1rem; margin: 6px 0 12px; }
.linie p { margin: 0; color: var(--ink-soft); font-size: .95rem; max-width: none; }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }
.gallery + .footer-note { margin-top: 10px; }
/* 20.09.2026 (Moritz): Abstand zwischen Vereinslogo und der Stand-Zeile */
.logo-strip + .footer-note { margin-top: 38px; }
.stand { font-family: var(--font-body); font-size: .82rem; font-weight: 400; color: var(--ink-faint); text-transform: none; letter-spacing: 0; }
.code {
    display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88rem; padding: 3px 10px; border: 1px solid var(--sage-line); border-radius: 8px;
    background: var(--sage-tint); color: var(--ink); margin: 0 12px 10px 0;
}
.stack-item .code + a.card-link { margin-left: 0; }
/* Textzellen in Preistabellen dürfen umbrechen, linksbündig (K20) */
table.price td.text { white-space: normal; text-align: left; }
table.price td.num.text {
    text-align: right; white-space: normal;
    /* 17.09.: auch Textpreise rechtsbündig (Moritz).
       18.09.: dazu eine feste, schmale Spalte — sonst zog ein langer Textpreis
       („je nach Länge, Breite und Haken“) die Spalte auf 40 % der Tabelle, und die
       Preise standen in jeder Tabelle woanders. Jetzt bricht der Text um und die
       Spalte ist überall gleich breit (Moritz, 18.09.2026). */
    width: 11em; min-width: 11em;
}
@media (max-width: 620px) { table.price td.num.text { width: 8em; min-width: 8em; } }
/* Dunkle Ansicht: Kante unter dem Bildkopf */
.theme-dark .page-hero { box-shadow: inset 0 -1px var(--line); }
/* Pflichtfeld-Hinweis über dem Formular */
.pflicht-hinweis { font-size: .9rem; color: var(--ink-faint); margin: 0 0 18px; }

/* ── Seitliches Lese-Blatt (Erfahrungsbericht Piet) ── */
.seitenblatt-schleier {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(11,11,11,.45);
    opacity: 0; transition: opacity .25s ease;
}
.seitenblatt-schleier.offen { opacity: 1; }
.seitenblatt {
    position: fixed; top: 4vh; bottom: 4vh; left: 50%; z-index: 61;
    width: min(760px, calc(100% - 32px));
    background: var(--card); color: var(--ink); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    opacity: 0; transform: translate(-50%, 24px); transition: transform .3s ease, opacity .3s ease;
}
.seitenblatt.offen { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 600px) {
    .seitenblatt { top: 0; bottom: 0; width: 100%; border-radius: 0; }
}
.seitenblatt-kopf {
    position: sticky; top: 0; z-index: 1;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 24px; background: var(--card); border-bottom: 1px solid var(--line);
}
.seitenblatt-kopf .kicker { margin-bottom: 4px; }
.seitenblatt-kopf h2 { font-size: 1.15rem; text-transform: uppercase; margin: 0; line-height: 1.2; }
.seitenblatt-schliessen {
    appearance: none; flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.seitenblatt-schliessen:hover { border-color: var(--sage); color: var(--sage-deep); }
.seitenblatt-inhalt { padding: 26px 28px 48px; }
.seitenblatt-inhalt p { font-size: 1rem; line-height: 1.7; margin: 0 0 1em; max-width: none; }
.seitenblatt-inhalt .footer-note { margin-top: 18px; }
.seitenblatt-inhalt .notice { margin-top: 22px; }
body.blatt-offen { overflow: hidden; }
@media (max-width: 480px) { .seitenblatt-inhalt { padding: 20px 18px 40px; } .seitenblatt-kopf { padding: 14px 18px; } }
@media (prefers-reduced-motion: reduce) { .seitenblatt, .seitenblatt-schleier { transition: none; } }

/* ══ 16 · Druck (K5) — Preise und Termine werden ausgedruckt ══ */
@media print {
    :root, .theme-dark {
        --paper: #fff; --card: #fff; --ink: #000; --ink-soft: #222; --ink-faint: #444;
        --line: #bbb; --line-strong: #888; --sage-tint: #fff; --sage-deep: #2f4a22;
        --black: #fff; --on-black: #000; --on-black-soft: #333;
    }
    html, body { background: #fff !important; color: #000 !important; }
    .site-header, .cta-band, .hero-scroll-leiste, .seitenblatt-schleier, .theme-toggle,
    .nav-toggle, .skip-link, .page-hero > img, .hero-black > img, .hero-black::after,
    .page-hero::before, .page-hero::after { display: none !important; }
    .page-hero, .hero-black { min-height: 0 !important; padding-top: 0 !important; background: none !important; }
    .page-hero h1, .page-hero .lede, .page-hero .eyebrow, .hero-black-text, .hero-black-text *,
    .band-schwarz, .band-schwarz * { color: #000 !important; background: none !important; }
    .js .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
    section, .band-schwarz { padding: 12px 0 !important; }
    section.tint { background: none !important; }
    table.price { break-inside: avoid; }
    table.price th, table.price td { border-color: #bbb !important; }
    .seitenblatt { position: static !important; transform: none !important; width: auto !important; box-shadow: none !important; }
    .seitenblatt[hidden] { display: none !important; }
    a { color: #000 !important; text-decoration: none; }
    main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
    .btn { border: 1px solid #888 !important; color: #000 !important; background: none !important; }
    img { max-width: 60% !important; height: auto !important; }
}

/* Weiterlesen-Block: aktuelle Seite markiert, nicht klickbar (K17) */
.anteaser > a[aria-current="page"] { pointer-events: none; opacity: .55; }
.anteaser > a[aria-current="page"] .pfeil { visibility: hidden; }

/* Fehlerseite: Absatz zum Grund per Sprungmarke aus anfrage-senden.php (K9) */
.grund { display: none; }
.grund:target { display: block; }
.grund p { border-left: 3px solid var(--sage-deep); padding-left: 16px; }

/* K29 (15.09.2026): Sonderstunden aufklappbar — Titel sichtbar, Text auf
   Tipp. Auf dem Desktop offen (HTML), auf dem Handy schließt neu.js sie. */
.kurzliste summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kurzliste summary::-webkit-details-marker { display: none; }
.kurzliste summary h3 { margin: 0; }
.kurzliste summary::after { content: "+"; font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: var(--sage-deep); flex: none; }
.kurzliste details[open] summary::after { content: "–"; }
.kurzliste details p { margin-top: 6px; }
.kurzliste details p, details.aufklapp p, .einstieg-item .text { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
details.aufklapp { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 20px; margin: 22px 0; background: var(--card); }
details.aufklapp summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; }
details.aufklapp summary::-webkit-details-marker { display: none; }
details.aufklapp summary::after { content: "+"; font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: var(--sage-deep); }
details.aufklapp[open] summary::after { content: "–"; }
details.aufklapp > *:not(summary) { margin-top: 12px; }
/* 18.09.2026 (Moritz): Im schwarzen Kasten („Worauf du dich verlassen kannst")
   wirkte der helle Aufklapper wie ein Fremdkörper. Dort steht er jetzt in einem
   gedämpften Grün auf dunklem Grund und setzt sich trotzdem ab. */
.band-schwarz details.aufklapp {
    background: rgba(135, 169, 107, .14);
    border-color: rgba(157, 187, 130, .45);
    color: var(--on-black);
}
.band-schwarz details.aufklapp summary { color: var(--on-black); }
.band-schwarz details.aufklapp summary::after { color: var(--sage); }
.band-schwarz details.aufklapp p { color: rgba(235, 233, 223, .86); }
.band-schwarz details.aufklapp a { color: var(--sage); }

/* 18.09.2026 (Moritz): Fußzeile kompakter — die Abstände zwischen den Spalten
   und Zeilen waren zu groß. */
.site-footer { padding-top: 34px; font-size: .92rem; }
.footer-grid { gap: 18px 32px; padding-bottom: 20px; }
.site-footer p { margin-bottom: .45em; }
.footer-links li { margin-bottom: 3px; }
.site-footer h3 { margin-bottom: 7px; }
details.aufklapp p { font-size: .98rem; color: var(--ink-soft); }


/* ══ Paket D (Teil 6, 17.09.2026) ═══════════════════════════ */
/* D8 · Berührungsziele mindestens 44 px */
.footer-links a, .site-footer p a, .card-link, .stack-item a.card-link, .anteaser .pfeil {
    display: inline-flex; align-items: center; min-height: 44px;
}
/* 20.09.2026 (Moritz): Fußzeile war immer noch riesig. Ursache waren nicht die
   Abstände, sondern diese 44 px je Linkzeile. In der Fußzeile auf 30 px — über dem
   Mindestmaß 24 px aus WCAG 2.2 AA (2.5.8); die 44 px (AAA) bleiben überall sonst. */
.footer-links a, .site-footer p a { min-height: 30px; }
.site-footer { padding-top: 26px; }
.footer-grid { gap: 14px 32px; padding-bottom: 14px; }
.footer-bottom { padding-top: 12px; padding-bottom: 16px; }
.einstieg-mehr a, .sprungliste a { min-height: 44px; display: inline-flex; align-items: center; }
.kurzliste summary, details.aufklapp summary { min-height: 44px; align-items: center; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
.fragebogen-aktionen .btn, .formular button[type="submit"] { min-height: 48px; }
.fragebogen-frage input[type="checkbox"], .fragebogen-zustimmung input[type="checkbox"], .optionen-liste input[type="checkbox"] { width: 22px; height: 22px; }
.optionen-liste label { min-height: 36px; display: flex; align-items: center; gap: 10px; }
/* D10 · kleinste Beschriftungen und Kontrast im Band */
.einstieg-item .fakten, .weg-step .num, .kontakt-weg .label, .hero-scroll { font-size: .8rem; }
.band-schwarz .weg-step .num { color: var(--on-black); }
/* D15 · Ersatzschrift mit angeglichenen Maßen, damit beim Nachladen nichts springt */
@font-face { font-family: 'Roboto Ersatz'; src: local('Arial'); size-adjust: 100.3%; ascent-override: 92.5%; descent-override: 24.3%; line-gap-override: 0%; }
:root { --font-body: 'Roboto', 'Roboto Ersatz', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; }
/* D20 · Aufklapper mit sichtbarem Fokus; Plus/Minus nicht vorlesen */
summary:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 3px; border-radius: 6px; }
.kurzliste summary::after, details.aufklapp summary::after { content: "+" / ""; }
.kurzliste details[open] summary::after, details.aufklapp[open] summary::after { content: "–" / ""; }
/* ══ Überzeilen und kleine Versal-Etiketten (17.09.2026, Moritz: „Überzeile jetzt“) ══
   Kleine gesperrte Oswald-Zeilen lösen sich in Light (300) auf. Alle Zeilen dieser Art
   laufen deshalb in Regular (400) und mindestens .8rem. Die Farbe bleibt, sie war nie
   das Problem (dunkles Grün 5,8:1). Überschriften bleiben Light. */
.hero .eyebrow, .hero-black .eyebrow, .page-hero .eyebrow,
.intro-trio .kicker, .einstieg-head .kicker, .feature .kicker, .seitenblatt-kopf .kicker,
.band-zitat .leitsatz-kicker, .vorab-kicker, .einstieg-mehr > span,
.einstieg-item .fakten, .kontakt-weg .label, .hero-scroll, .site-footer h3,
.formular label, .main-nav .theme-toggle::after { font-weight: 400; }
.feature .kicker, .intro-trio .kicker, .einstieg-head .kicker,
.band-zitat .leitsatz-kicker, .vorab-kicker { font-size: .82rem; }

/* D21 · Druck: Aufklapper vollständig */
@media print {
    details > *:not(summary) { display: block !important; }
    details:not([open]) > *:not(summary) { content-visibility: visible; }
    summary::after { content: none !important; }
    .sprungliste, .einstieg-mehr { display: none; }
}
.brand { min-height: 44px; display: inline-flex; align-items: center; }


/* ══ Kontaktformular noch kompakter (17.09.2026, Moritz: zu viele Felder/zu viel Text im Auswahlbereich) ══ */
#formular .fragebogen-section h2 { font-size: .95rem; letter-spacing: .08em; margin: 18px 0 8px; border: 0; padding: 0; color: var(--sage-deep); }
#formular .fragebogen-section h2 .letter { display: none; }
#formular .fragebogen-frage { margin-bottom: 8px; }
#formular .fragebogen-frage > label .nr, #formular fieldset.optionen legend .nr { display: none; }
#formular .fragebogen-frage > label, #formular fieldset.optionen legend { font-size: .9rem; margin-bottom: 4px; }
#formular .fragebogen-frage .hinweis, #formular fieldset.optionen .hinweis {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;   /* nur noch für Vorleser */
}
#formular input[type="text"], #formular input[type="email"], #formular input[type="tel"], #formular select { min-height: 42px; padding-block: 8px; }
#formular textarea { min-height: 96px; }
@media (min-width: 900px) {
    #formular #sectionA { grid-template-columns: repeat(3, 1fr); }
    #formular #sectionB { grid-template-columns: 1.3fr 1.3fr .8fr 1fr; }
}
/* Interessen als Chips statt Liste */
#formular .optionen-liste { display: flex; flex-wrap: wrap; gap: 8px; }
#formular .optionen-liste label {
    min-height: 0; padding: 6px 12px 6px 10px; border: 1px solid var(--sage-line); border-radius: 10px;
    font-size: .88rem; gap: 6px; background: var(--card); cursor: pointer;
}
#formular .optionen-liste label:hover { background: var(--sage-tint); }
#formular .optionen-liste label:has(input:checked) { background: var(--sage-tint); border-color: var(--sage-deep); color: var(--sage-deep); }
#formular .optionen-liste input[type="checkbox"] { width: 16px; height: 16px; }
#formular .fragebogen-anhang-block { margin-top: 16px; }
#formular .fragebogen-anhang-block p, #formular .fragebogen-anhang-block li, #formular .fragebogen-datenschutz p { font-size: .86rem; line-height: 1.55; }