/* ki.css · KI-Integration: eine Inhaltsbreite, ein Rhythmus für alle Abschnitte.
   Wird nach den Seiten-Styles geladen; "html"-Präfix schlägt die Seitenregeln. */
:root{--ki-w:1240px;--ki-gx:clamp(20px,3.4vw,48px);--ki-py:clamp(72px,9vh,120px);--ki-py-s:clamp(48px,6vh,80px)}

/* ── Breite: alles auf 1240 px Inhalt ─────────────────────────────────── */
html .p1-mid,html .p1-stage~.p1-mid{max-width:calc(var(--ki-w) + 2*var(--ki-gx))}
html .s2-in,html .pn-in,html .pf-in,html .p3-in,html .fq-in,html .anf-in,html .p3.p3-light .p3-in{max-width:var(--ki-w)}
html .ced-top,html .ced-fig{width:min(var(--ki-w),100% - 2*var(--ki-gx));margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}
html .ced-body{max-width:calc(var(--ki-w) + 2*var(--ki-gx))}
html .anb>*{max-width:var(--ki-w);margin-left:auto;margin-right:auto}
html .anb{padding:var(--ki-py) var(--ki-gx)}
html .hw .problem>*,html .hw .section-two>*{max-width:var(--ki-w)}
html .kc-num,html .kc-about,html .kc-flow,html .kc-exp,html .kc-faq,html .kc-ask,html .kc-foot{max-width:calc(var(--ki-w) + 64px)}

/* ── Rhythmus: gleiche Innenabstände, saubere Übergänge dunkel/hell ────── */
html .section-two,html .pnerd,html .pf{padding-top:var(--ki-py);padding-bottom:var(--ki-py)}
html .p3{padding:var(--ki-py) var(--ki-gx)}
html .p3[style]{padding-top:var(--ki-py)!important}
html .p3.p3-light{padding-top:var(--ki-py);padding-bottom:var(--ki-py)}
html .ced{padding-bottom:var(--ki-py)}
html .ced-body{padding-top:clamp(36px,5vh,60px)}
/* hell → dunkel: der erste dunkle Abschnitt bekommt Tiefe statt einer harten Kante */
html .p3.p3-after-light{background:linear-gradient(180deg,#0a1a21 0,#040b0e 220px,#000 min(30vh,360px))}
html .anb.p3-after-light{background:linear-gradient(180deg,#0a1a21 0,#040b0e 220px,#000 min(30vh,360px))}
/* dunkel auf dunkel: eine Haarlinie und ein kleinerer Abstand statt doppeltem Polster */
html .p3.p3-follow{padding-top:0!important}
html .p3.p3-follow>.p3-in{border-top:1px solid rgba(255,255,255,.09);padding-top:var(--ki-py-s)}
html .p3-fq{border-top:0}
/* dunkel → hell (FAQ → Anfrage): weicher Auslauf */
html .p3.anf{padding-top:var(--ki-py);padding-bottom:var(--ki-py)}
html .p3.fq{padding-bottom:var(--ki-py)}

/* ── Lesegitter für Textabschnitte: Überschrift links haftend, Inhalt rechts ── */
html .p3-in.p3-read>h2{margin:0 0 20px;font-size:clamp(26px,2.5vw,38px);line-height:1.12;letter-spacing:-.025em}
html .p3-in.p3-read>h2+*{margin-top:0}
html .p3-in.p3-read>p,html .p3-in.p3-read>ul,html .p3-in.p3-read>h3{max-width:72ch}
@media(min-width:1000px){
 html .p3-in.p3-read{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:clamp(36px,5vw,84px);row-gap:0;align-items:start}
 html .p3-in.p3-read>h2{grid-column:1;grid-row:1/span 200;position:sticky;top:96px;align-self:start;margin:0;padding-right:8px;max-width:none}
 html .p3-in.p3-read>:not(h2){grid-column:2}
 html .p3-in.p3-read>h3:first-of-type{margin-top:0}
}
@media(max-width:999px){html .p3-in.p3-read>h2{max-width:22ch}}
