/* ============================================================================
   p24 — Gestaltungssystem fuer seitentypische Einstiege und Abschnittsformen.
   Farben, Schriften und Schaltflaechen kommen unveraendert aus der Seite;
   diese Datei liefert nur Muster, damit nicht jede Seite gleich aussieht.
   ============================================================================ */

/* ---------------------------------------------------------------- Einstiege */
/* Gemeinsame Basis aller Varianten */
.ein{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.ein .inn{padding:76px var(--gx) 64px;position:relative;z-index:2}
.ein .krume{font-family:var(--mono);font-size:13px;letter-spacing:1.6px;text-transform:uppercase;
            color:var(--muted);margin-bottom:22px}
.ein .krume a{color:var(--muted)}
.ein .krume a:hover{color:var(--cyan)}
.ein h1{font-family:'Host Grotesk',sans-serif;font-weight:800;letter-spacing:-1.6px;line-height:1.04;
        font-size:clamp(34px,5.4vw,62px);text-wrap:balance;max-width:19ch}
.ein h1 i{font-style:normal;font-weight:300;color:#0095c8}
.ein .aussage{margin-top:22px;font-size:20px;line-height:1.6;color:var(--grey);max-width:56ch}
.tat{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.tat a{display:inline-flex;align-items:center;gap:11px;min-height:56px;padding:0 30px;
            font-family:'Host Grotesk',sans-serif;font-weight:800;font-size:17px}
.tat .haupt{background:var(--cyan);color:#04222d}
.tat .haupt:hover{background:#33c3f0}
.tat .neben{border:1px solid var(--rule);color:var(--txt);font-weight:700}
.tat .neben:hover{border-color:var(--cyan);color:var(--cyan)}

/* 1 — Leistungsseite: Aussage plus drei belegte Kennzahlen, keine Spalten */
.ein--leistung{background:var(--bg)}
.ein--leistung .beleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
        margin-top:52px;background:var(--rule);border:1px solid var(--rule)}
.ein--leistung .beleg > div{background:var(--bg);padding:24px 26px}
.ein--leistung .beleg b{display:block;font-family:'Host Grotesk',sans-serif;font-weight:800;
        font-size:30px;letter-spacing:-1px;line-height:1.05;font-variant-numeric:tabular-nums}
.ein--leistung .beleg span{display:block;margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--grey)}

/* 2 — Verzeichnis: Einstieg fuehrt direkt in die Bereiche */
.ein--verzeichnis .inn{padding-bottom:0}
.ein--verzeichnis .bereiche{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
        gap:1px;margin:52px calc(var(--gx) * -1) 0;background:var(--rule);border-top:1px solid var(--rule)}
.ein--verzeichnis .bereiche a{background:var(--bg);padding:26px var(--gx) 26px;display:block;
        border-bottom:3px solid transparent;transition:border-color .15s,background .15s}
.ein--verzeichnis .bereiche a:nth-child(n+2){padding-left:26px;padding-right:26px}
.ein--verzeichnis .bereiche a:hover{background:var(--panel);border-bottom-color:var(--cyan)}
.ein--verzeichnis .bereiche .nr{font-family:var(--mono);font-size:12.5px;color:var(--acc);letter-spacing:1.4px}
.ein--verzeichnis .bereiche .tt{display:block;margin-top:9px;font-family:'Host Grotesk',sans-serif;
        font-weight:700;font-size:19px;letter-spacing:-.4px;line-height:1.2}
.ein--verzeichnis .bereiche .zz{display:block;margin-top:7px;font-size:15.5px;line-height:1.45;color:var(--grey)}

/* 3 — Fachartikel: ruhiger Lesekopf, Inhalt links gefuehrt */
.ein--artikel{background:var(--panel)}
.ein--artikel .inn{padding:60px var(--gx) 48px;max-width:none}
.ein--artikel h1{max-width:22ch;font-size:clamp(30px,4.4vw,50px);letter-spacing:-1.2px}
.ein--artikel .aussage{font-size:19px;max-width:62ch}
.ein--artikel .marken{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;
        font-family:var(--mono);font-size:13px;color:var(--muted);letter-spacing:.6px}
.ein--artikel .marken b{color:var(--txt);font-weight:600}

/* 4 — Region und Branche: der Beleg steht neben der Aussage */
.ein--region .inn{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start}
.ein--region .karte{border:1px solid var(--rule);background:var(--panel)}
.ein--region .karte .kk{display:flex;align-items:center;justify-content:space-between;
        padding:15px 22px;border-bottom:1px solid var(--rule);
        font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--acc)}
.ein--region .karte ul{list-style:none;margin:0;padding:6px 0}
.ein--region .karte li{display:flex;align-items:baseline;gap:16px;padding:13px 22px;
        border-bottom:1px solid var(--hair);font-size:16px}
.ein--region .karte li:last-child{border-bottom:none}
.ein--region .karte li b{font-family:var(--mono);font-size:14.5px;color:var(--txt);
        min-width:74px;font-variant-numeric:tabular-nums}
.ein--region .karte li span{color:var(--grey)}

/* 5 — Kontakt: Erreichbarkeit sofort, ohne Umweg */
.ein--kontakt{background:var(--bg)}
.ein--kontakt .wege{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
        gap:1px;margin-top:46px;background:var(--rule);border:1px solid var(--rule)}
.ein--kontakt .wege > *{background:var(--bg);padding:22px 24px;display:block}
.ein--kontakt .wege .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:1.8px;
        text-transform:uppercase;color:var(--acc)}
.ein--kontakt .wege .wt{display:block;margin-top:9px;font-family:'Host Grotesk',sans-serif;
        font-weight:700;font-size:20px;letter-spacing:-.4px;line-height:1.25}
.ein--kontakt .wege a.wt:hover{color:var(--cyan)}
.ein--kontakt .wege .wz{display:block;margin-top:6px;font-size:15.5px;line-height:1.45;color:var(--grey)}

/* 6 — Fallstudie: Ausgangslage gegen Ergebnis */
.ein--fall .gegen{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:48px;
        background:var(--rule);border:1px solid var(--rule)}
.ein--fall .gegen > div{background:var(--bg);padding:28px 30px}
.ein--fall .gegen .lb{font-family:var(--mono);font-size:11.5px;letter-spacing:1.8px;
        text-transform:uppercase;color:var(--muted)}
.ein--fall .gegen .neu .lb{color:var(--acc)}
.ein--fall .gegen dl{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px}
.ein--fall .gegen dt{font-size:15px;color:var(--grey)}
.ein--fall .gegen dd{margin:0;font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:16.5px;
        font-variant-numeric:tabular-nums}

/* -------------------------------------------------------- Abschnittsformen */
/* Kopf — schlanker als das alte shead, ohne Terminal-Pfad */
.ab{border-top:1px solid var(--rule)}
.ab > .kopf{padding:72px var(--gx) 0;max-width:78ch}
.ab.breit > .kopf{max-width:none}
.ab .lb{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:2.4px;
        text-transform:uppercase;color:var(--acc);margin-bottom:14px}
.ab h2{font-family:'Host Grotesk',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,38px);
       letter-spacing:-1px;line-height:1.12;text-wrap:balance}
.ab h2 i{font-style:normal;font-weight:300;color:var(--acc)}
.ab .fuehrung{margin-top:16px;font-size:18.5px;line-height:1.62;color:var(--grey);max-width:64ch}
.ab .fuehrung b{color:var(--txt);font-weight:700}
.ab > .inhalt{padding:40px var(--gx) 84px}

/* Kartenform — hoechstens sechs je Gruppe, jede mit Nutzenaussage */
.form-karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:24px}
.form-karten .kt{border:1px solid var(--line);padding:30px 32px 32px;background:var(--bg);
        display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
a.kt{text-decoration:none}
a.kt:hover{border-color:var(--cyan);transform:translateY(-3px)}
.form-karten .kt h3{font-family:'Host Grotesk',sans-serif;font-weight:800;font-size:21px;
        letter-spacing:-.5px;line-height:1.22}
.form-karten .kt p{margin-top:12px;font-size:16.5px;line-height:1.62;color:var(--grey)}
.form-karten .kt .nutzen{margin-top:auto;padding-top:18px;font-size:16px;line-height:1.55;
        color:var(--txt);border-top:1px solid var(--hair)}
.form-karten .kt .nutzen b{color:var(--acc);font-weight:700}

/* Prozessform — Ablauf mit Dauer, keine Karten */
.form-prozess{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;
        border-top:1px solid var(--rule)}
.form-prozess > div{position:relative;padding:30px 30px 34px 0;border-right:1px solid var(--hair)}
.form-prozess > div:last-child{border-right:none}
.form-prozess .nr{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
        border:1px solid var(--cyan);color:var(--acc);font-family:var(--mono);font-size:14px;font-weight:700}
.form-prozess .dauer{display:block;margin-top:16px;font-family:var(--mono);font-size:13.5px;
        letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.form-prozess h3{margin-top:7px;font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:18.5px;
        letter-spacing:-.3px;line-height:1.25}
.form-prozess p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--grey);max-width:36ch}

/* Listenform — die Breite statt dutzender Karten */
.form-liste{border-top:1px solid var(--rule)}
.form-liste details{border-bottom:1px solid var(--line)}
.form-liste summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
        padding:24px 0;font-family:'Host Grotesk',sans-serif;font-weight:700;font-size:20px;
        letter-spacing:-.4px}
.form-liste summary::-webkit-details-marker{display:none}
.form-liste summary .zahl{font-family:var(--mono);font-size:13.5px;color:var(--acc);min-width:42px}
.form-liste summary .pf{margin-left:auto;color:var(--acc);font-size:15px;transition:transform .2s}
.form-liste details[open] summary .pf{transform:rotate(45deg)}
.form-liste summary:hover{color:var(--acc)}
.form-liste .aus{padding:0 0 28px 62px;max-width:74ch}
.form-liste .aus > p{font-size:17px;line-height:1.65;color:var(--grey)}
.form-liste .eintraege{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:2px 34px;margin-top:18px}
.form-liste .eintraege a{display:flex;align-items:baseline;gap:12px;padding:11px 0;
        border-bottom:1px solid var(--hair);font-size:16.5px}
.form-liste .eintraege a:hover{color:var(--acc)}
.form-liste .eintraege a::before{content:'';width:12px;height:3px;background:var(--cyan);
        transform:skewX(-24deg);flex-shrink:0;position:relative;top:-4px}
.form-liste .eintraege em{font-style:normal;color:var(--grey);font-size:15.5px}

/* Splitform — Text neben genau einem Bild oder Diagramm */
.form-split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.form-split .txt > p{font-size:17.5px;line-height:1.68;color:var(--grey);margin-bottom:14px;max-width:52ch}
.form-split .txt > p b{color:var(--txt)}
.form-split figure{margin:0;border:1px solid var(--line);background:var(--panel)}
.form-split figcaption{padding:15px 20px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--grey)}
.form-split img{display:block;width:100%;height:auto}

/* Belegform — echte Zahlen mit Herkunft statt Dekoration */
.form-beleg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
        background:var(--rule);border:1px solid var(--rule)}
.form-beleg > div{background:var(--bg);padding:26px 28px}
.form-beleg b{display:block;font-family:'Host Grotesk',sans-serif;font-weight:800;font-size:32px;
        letter-spacing:-1.2px;line-height:1;font-variant-numeric:tabular-nums}
.form-beleg .bt{display:block;margin-top:10px;font-size:16px;font-weight:600}
.form-beleg .bq{display:block;margin-top:7px;font-size:15.5px;line-height:1.5;color:var(--grey)}

/* Dunkles Band — gliedert, nicht nur Kopf und Fuss */
.ab.band{background:var(--ink);color:rgba(255,255,255,.92);border-top:none;
        --bg:#0a0f14;--panel:#111820;--txt:rgba(255,255,255,.92);--grey:rgba(255,255,255,.66);
        --muted:rgba(255,255,255,.5);--line:rgba(255,255,255,.12);--rule:rgba(255,255,255,.16);
        --hair:rgba(255,255,255,.08);--acc:#6cc4e6}

/* Zitat mit Herkunft */
.form-stimme{display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:start;max-width:88ch}
.form-stimme .strich{width:4px;align-self:stretch;background:var(--cyan);transform:skewX(-12deg)}
.form-stimme blockquote{margin:0;font-family:'Host Grotesk',sans-serif;font-weight:600;
        font-size:clamp(21px,2.4vw,27px);line-height:1.4;letter-spacing:-.5px}
.form-stimme figcaption{margin-top:18px;font-size:16px;color:var(--grey)}
.form-stimme figcaption b{color:var(--txt);font-weight:600}

/* ------------------------------------------------------------- Schmale Displays */
@media (max-width:1024px){
    .ein .inn{padding:52px 40px 46px}
    .ein--region .inn{grid-template-columns:1fr;gap:36px}
    .ein--verzeichnis .bereiche{margin-left:-40px;margin-right:-40px}
    .ein--verzeichnis .bereiche a{padding-left:40px;padding-right:40px}
    .ab > .kopf{padding:56px 40px 0}
    .ab > .inhalt{padding:30px 40px 62px}
    .form-split{grid-template-columns:1fr;gap:30px}
    .form-prozess > div{border-right:none;border-bottom:1px solid var(--hair);padding-right:0}
}
@media (max-width:768px){
    .ein .inn{padding:38px 20px 34px}
    .ein h1{max-width:none;letter-spacing:-1px}
    .ein .aussage{font-size:17px}
    .tat{flex-direction:column;align-items:stretch}
    .tat a{justify-content:center;padding:0 18px}
    .ein--leistung .beleg,.ein--fall .gegen{grid-template-columns:1fr;margin-top:32px}
    .ein--verzeichnis .bereiche{grid-template-columns:1fr;margin:32px -20px 0}
    .ein--verzeichnis .bereiche a,.ein--verzeichnis .bereiche a:nth-child(n+2){padding:20px}
    .ein--kontakt .wege{grid-template-columns:1fr;margin-top:30px}
    .ab > .kopf{padding:44px 20px 0}
    .ab > .inhalt{padding:24px 20px 48px}
    .ab .fuehrung{font-size:17px}
    .form-karten{grid-template-columns:1fr;gap:16px}
    .form-karten .kt{padding:24px 22px 26px}
    .form-liste summary{font-size:18px;gap:14px;padding:20px 0}
    .form-liste .aus{padding-left:0}
    .form-beleg{grid-template-columns:1fr}
    .form-stimme{grid-template-columns:1fr;gap:18px}
    .form-stimme .strich{width:44px;height:4px;align-self:start}
}
@media (prefers-reduced-motion:reduce){
    a.kt:hover{transform:none}
    .form-liste summary .pf{transition:none}
}

/* Links im Aufklapper — ohne diese Regel erben sie die Absatzfarbe und sind
   von Fliesstext nicht zu unterscheiden (8 Seiten, 102 Links, 24.08.2026).
   Gleiche Auszeichnung wie Fliesstextlinks in Karten. */
.faq-list .a a:not(.glossary-link){color:var(--acc);text-decoration:none;
    border-bottom:1px solid rgba(0,177,235,.35)}
.faq-list .a a:not(.glossary-link):hover{border-bottom-color:var(--acc)}

/* Lesekorridor im Aufklapper: nur der Fliesstext wird gedeckelt.
   Breite Bausteine (Zonenbilder, Kartenraster, Tabellen) nutzen die
   volle Abschnittsbreite — sonst brechen sie zeichenweise um. */
.faq-list .a,.faq-list details[open] .a{max-width:none}
.faq-list details[open] .a p,
.faq-list details[open] .a li,
.faq-list details[open] .a>b,
.faq-list details[open] .a>em,
.faq-list details[open] .a>h3,
.faq-list details[open] .a>h4,
.faq-list details[open] .a>div:not([class]),
.faq-list details[open] .a .fuehrung,
.faq-list details[open] .a>.sintro,
.faq-list details[open] .a>.pnote,
.faq-list details[open] .a>.benote,
.faq-list details[open] .a>.scrollhinweis,
.faq-list details[open] .a>.kcnote{max-width:70ch}