/* Rechtsseiten (Impressum, Datenschutz, AGB, Widerruf) und 404.
 *
 * Quelle: design/handoff/Impressum.dc.html und 404.dc.html (<style>-Bloecke).
 * Seitenkopf (.bc/.wtitle/.wsub) kommt aus css/kasse.css, Seitenspalte
 * (.iaside/.iac/.toc) aus css/content.css, Karte und Buttons aus
 * css/komponenten.css.
 */

/* NOVA polstert #content-wrapper oben mit 64px. data-page 20 = AGB,
   21 = Datenschutz, 27 = Widerrufsrecht, 31 = eigene Linkseite (Impressum),
   36 = 404 (gemessen; die 36 steht nicht in defines_inc.php). */
body[data-page="20"] #content-wrapper,
body[data-page="21"] #content-wrapper,
body[data-page="27"] #content-wrapper,
body[data-page="36"] #content-wrapper{padding-top:0}

/* ================= Rechtsseiten ================= */
.tw-recht{background:var(--color-bg)}
.igrid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;padding-bottom:84px}
.iprose{padding:28px 30px}
.iprose h1{font:800 21px/1.35 var(--font-body);margin:0 0 14px}
.iprose h2{font:800 17px/1.35 var(--font-body);margin:26px 0 10px;scroll-margin-top:150px}
.iprose h2:first-child{margin-top:0}
.iprose h3{font:800 15px/1.35 var(--font-body);margin:20px 0 8px}
/* Farbe stand hier nie - Schriftschnitt und Groesse schon, die Farbe nicht.
   Damit erbten alle Ueberschriften NOVAs #525252, gemessen am 07.09.2026 auf
   der AGB-Seite ueber zehn Paragraphen hinweg (ci-audit.mjs). Auf der hellen
   Flaeche faellt es kaum auf, im Dunkelmodus stand Dunkelgrau auf Navy. */
.iprose h1,.iprose h2,.iprose h3{color:var(--color-ink)}
[data-theme="dark"] .iprose h1,
[data-theme="dark"] .iprose h2,
[data-theme="dark"] .iprose h3{color:var(--color-text-inverse)}
.iprose p{font:400 14.5px/1.75 var(--font-body);color:var(--color-text-muted);margin:0 0 12px}
.iprose p b{color:var(--color-ink)}
[data-theme="dark"] .iprose p b{color:var(--color-text-inverse)}
.iprose ul,.iprose ol{margin:0 0 12px;padding-left:20px;font:400 14.5px/1.75 var(--font-body);color:var(--color-text-muted)}
.iprose li{margin-bottom:4px}
.iprose table{width:100%;border-collapse:collapse;margin:0 0 14px;font:400 14px/1.6 var(--font-body)}
.iprose td,.iprose th{border:1px solid var(--color-border);padding:10px 12px;text-align:left}
/* Die Seitenspalte traegt den Hinweis ohne den Abstand, den er in der Kasse
   braucht. */
.iaside .knote{margin-top:0}
/* Die Referenz klebt die Spalte bei 132, der Blogartikel bei 150. */
.tw-recht .iaside{top:132px}

/* ================= 404 ================= */
.e4sec{background:var(--sky-100);position:relative;overflow:hidden;padding:0}
[data-theme="dark"] .e4sec{background:#0b1326}
.e4wrap{position:relative;z-index:2;min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:90px 24px 50px}
.e4code{font-family:var(--font-display);font-weight:400;font-size:120px;line-height:1;color:var(--navy-900);letter-spacing:.02em}
[data-theme="dark"] .e4code{color:var(--color-text)}
.e4sub{font-family:var(--font-accent);font-size:30px;color:var(--sky-700);margin:2px 0 0}
[data-theme="dark"] .e4sub{color:var(--sky-300)}
.e4txt{font:400 16px/1.7 var(--font-body);color:var(--color-text-muted);max-width:480px;margin:8px 0 20px}
.e4btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.e4search{display:flex;gap:10px;margin-top:26px;width:min(440px,90%)}
.e4search .input{font:400 15px/1.4 var(--font-body);padding:13px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--color-border-strong);background:var(--color-surface);color:var(--color-ink);flex:1;min-width:0;box-sizing:border-box}
.e4search .input::placeholder{color:#8b99ad}
[data-theme="dark"] .e4search .input::placeholder{color:#7f93b3}
.e4search .input:focus{outline:none;border-color:var(--sky-600);box-shadow:var(--focus-ring)}
.e4links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.fchip2{display:inline-flex;font:600 12.5px/1 var(--font-body);padding:8px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.7);color:var(--navy-800);text-decoration:none;transition:background var(--transition-fast)}
.fchip2:hover{background:#fff;color:var(--navy-900)}
.fchip2:focus-visible{outline:none;box-shadow:var(--focus-ring)}
[data-theme="dark"] .fchip2{background:rgba(160,218,254,.14);color:var(--sky-300)}
[data-theme="dark"] .fchip2:hover{background:rgba(160,218,254,.24)}

/* ================= Responsive ================= */
@media (max-width:1024px){
.igrid{grid-template-columns:1fr}
}
@media (max-width:640px){
.e4code{font-size:84px}
.e4sub{font-size:24px}
.iprose{padding:22px}
}