/* =====================================================================
   Phase 2a – Unterseiten (Rechtstexte, Kontakt). Ergänzt style.css der
   Startseite, ändert keine Startseiten-Regeln. Mobile-first, logische
   Abstände (RTL-fähig).
   ===================================================================== */
.subpage .site-header{background:rgba(var(--header-tint,var(--home-tint,3,20,36)),.94);backdrop-filter:none;-webkit-backdrop-filter:none}
.page-back{padding-block:9px;padding-inline:14px;border-radius:999px;border:1px solid var(--home-line-strong);color:var(--ink-soft,#dce9f4);font-weight:800;font-size:calc(12.5px * var(--font-scale,1));text-decoration:none;white-space:nowrap}
.page-back:hover,.page-back:focus-visible{background:rgba(var(--glass,255,255,255),.08)}
.page-main{position:relative;padding-block:32px 56px;min-height:60vh}
.page-main::before{content:"";position:absolute;inset:0 0 auto 0;height:420px;z-index:-1;
  background:radial-gradient(520px 300px at 92% -10%,rgba(255,140,0,.22),transparent 60%),radial-gradient(420px 300px at -10% 40%,rgba(255,77,141,.14),transparent 60%)}
.page-head{margin-block-end:22px}
.page-head h1{font-size:calc(30px * var(--font-scale,1));margin-block-end:8px}
.page-meta{margin:0;color:var(--home-muted);font-size:calc(13px * var(--font-scale,1));font-weight:700}

/* Rechtstexte: gut lesbare Textbreite */
.legal-page{max-width:860px}
.legal-page .page-head h1{overflow-wrap:anywhere;hyphens:auto} /* lange Titel (z. B. „Geschäftsbedingungen“) am schmalen Handy nicht über den Rand */
.legal-notice{margin-block:0 22px;padding-block:12px;padding-inline:16px;border-radius:calc(var(--rk,1px) * 14);background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.4);font-weight:700;font-size:calc(14px * var(--font-scale,1))}
.legal-notice a{color:var(--accent-ink,var(--brand-accent))}
.legal-toc{margin-block-end:26px;padding-block:16px;padding-inline:18px;border-radius:var(--radius-m);background:var(--home-panel);border:1px solid var(--home-line)}
.legal-toc ol{margin-block:8px 0;padding-inline-start:20px;columns:1}
.legal-toc li{margin-block:3px;break-inside:avoid}
.legal-toc a{color:var(--home-text);text-decoration:none}
.legal-toc a:hover,.legal-toc a:focus-visible{color:var(--accent-ink,var(--brand-accent));text-decoration:underline}
.legal-body{font-size:calc(15px * var(--font-scale,1));line-height:1.65;color:var(--home-prose,#e4eef7);overflow-wrap:anywhere}
.legal-body h2{font-size:calc(21px * var(--font-scale,1));margin-block:32px 10px;scroll-margin-top:90px}
.legal-body h2:first-child{margin-block-start:0}
.legal-body h3{font-size:calc(17px * var(--font-scale,1));margin-block:22px 8px;scroll-margin-top:90px}
.legal-body p{margin-block:0 12px}
.legal-body ul,.legal-body ol{margin-block:0 14px;padding-inline-start:22px}
.legal-body li{margin-block:4px}
.legal-body a{color:var(--accent-ink,var(--brand-accent));text-underline-offset:3px}
.legal-body strong{color:var(--ink,#fff)}
.legal-body blockquote{margin-block:10px 20px;margin-inline:0;padding-block:16px;padding-inline:18px;border-radius:var(--radius-m);background:rgba(var(--glass,255,255,255),.04);border:1px solid var(--home-line-strong);font-family:ui-monospace,Consolas,monospace;font-size:calc(13.5px * var(--font-scale,1))}

/* Kontaktseite */
.contact-grid{display:grid;gap:22px}
.contact-card,.contact-aside{border-radius:var(--radius-l);padding:20px;border:1px solid var(--home-line-strong);background:linear-gradient(150deg,var(--home-card),var(--home-panel))}
.contact-intro{color:var(--home-muted);margin:0 0 4px;font-size:calc(15px * var(--font-scale,1))}
.form-row{display:grid;gap:14px}
.field{display:grid;gap:6px;margin-block-end:14px}
.field label{font-weight:800;font-size:calc(13.5px * var(--font-scale,1))}
.field input,.field textarea{inline-size:100%;padding-block:12px;padding-inline:14px;border-radius:12px;border:1px solid var(--home-line-strong);background:var(--field-bg,rgba(var(--home-tint,3,20,36),.55));color:var(--home-text);font:inherit;font-size:16px}
.field textarea{min-block-size:160px;resize:vertical}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand-accent);outline-offset:1px;border-color:transparent}
.field [aria-invalid="true"]{border-color:#ff6b6b}
.field-error{color:var(--err-ink,#ffb4b4);font-weight:700;font-size:calc(13px * var(--font-scale,1));margin:0}
.req{color:var(--accent-ink,var(--brand-accent))}
.check{display:flex;gap:10px;align-items:flex-start;font-size:calc(14px * var(--font-scale,1));margin-block-end:6px}
.check input{inline-size:20px;block-size:20px;flex:none;margin-block-start:2px;accent-color:var(--brand-accent)}
.check a{color:var(--accent-ink,var(--brand-accent))}
.check small{display:block;margin-block-start:3px;color:var(--home-muted);font-size:.9em;line-height:1.45}
.form-hint{color:var(--home-muted);font-size:calc(12.5px * var(--font-scale,1));margin-block:6px 16px}
.form-alert{padding-block:12px;padding-inline:16px;border-radius:calc(var(--rk,1px) * 14);margin-block-end:16px;font-weight:700}
.form-alert.is-error{background:rgba(255,80,80,.14);border:1px solid rgba(255,107,107,.55)}
.form-success{text-align:center;padding-block:10px}
.form-success h2{margin-block-end:8px}
.form-success p{color:var(--home-muted)}
.hp-field{position:absolute !important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.contact-aside h2{font-size:calc(18px * var(--font-scale,1))}
.contact-aside dl{margin:0;display:grid;gap:12px}
.contact-aside dt{font-size:calc(11px * var(--font-scale,1));font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink,var(--brand-accent))}
.contact-aside dd{margin:2px 0 0;font-weight:700}
.contact-aside a{color:var(--home-text)}
.btn[disabled]{opacity:.6;cursor:progress}

@media(min-width:640px){
  .page-head h1{font-size:calc(40px * var(--font-scale,1))}
  .form-row{grid-template-columns:1fr 1fr}
  .contact-card,.contact-aside{padding:28px}
  .legal-toc ol{columns:2;column-gap:28px}
}
@media(min-width:980px){
  .page-main{padding-block:56px 80px}
  .page-head h1{font-size:calc(48px * var(--font-scale,1))}
  .contact-grid{grid-template-columns:1.6fr 1fr;align-items:start}
}
@media(max-width:639px){.page-back{padding-inline:11px}}
.subpage .lang-switch summary{white-space:nowrap}
@media(max-width:479px){.page-back{display:none}}
.legal-toc ul{list-style:none;margin-block:8px 0;padding:0;columns:1}
@media(min-width:640px){.legal-toc ul{columns:2;column-gap:28px}}

/* Fehlerseite „Seite nicht gefunden“ (404) */
.notfound{max-width:640px;padding-block:24px 8px}
.notfound h1{font-size:calc(34px * var(--font-scale,1));margin-block:6px 12px}
.notfound-text{color:var(--home-muted);font-size:calc(16px * var(--font-scale,1));line-height:1.6;margin-block:0 26px}
@media(min-width:640px){.notfound{padding-block:48px 16px}.notfound h1{font-size:calc(48px * var(--font-scale,1))}}

/* Kontaktformular: Anliegen als anklickbare Auswahl-Knöpfe */
.topic-field{border:0;padding:0;margin:0 0 14px;min-inline-size:0}
.topic-field legend{font-weight:800;font-size:calc(13.5px * var(--font-scale,1));padding:0;margin-block-end:8px}
.topic-chips{display:flex;flex-wrap:wrap;gap:8px}
.topic-chip{position:relative;cursor:pointer}
.topic-chip input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.topic-chip span{display:inline-block;padding-block:9px;padding-inline:15px;border-radius:999px;border:1px solid var(--home-line-strong);background:var(--field-bg,rgba(var(--home-tint,3,20,36),.55));color:var(--home-text);font-weight:700;font-size:calc(14px * var(--font-scale,1));transition:background .15s,border-color .15s}
.topic-chip:hover span{border-color:var(--brand-accent)}
.topic-chip input:checked+span{background:var(--brand-accent);border-color:var(--brand-accent);color:#1a1200}
.topic-chip input:focus-visible+span{outline:2px solid var(--brand-accent);outline-offset:2px}
.topic-field[aria-describedby] .topic-chip span{border-color:#ff6b6b}

/* Elektronische Widerrufsfunktion (v5) */
.withdraw-box{display:grid;gap:12px;justify-items:start;margin-block:0 26px;padding-block:16px;padding-inline:18px;border-radius:var(--radius-m);background:rgba(255,140,0,.12);border:1px solid rgba(255,140,0,.4)}
.withdraw-box p{margin:0;font-weight:700;font-size:calc(14.5px * var(--font-scale,1))}
.wd-declaration{margin-block:0 16px;padding-block:12px;padding-inline:16px;border-radius:calc(var(--rk,1px) * 14);border-inline-start:4px solid var(--brand-accent);background:rgba(var(--glass,255,255,255),.05);font-weight:800;font-size:calc(15.5px * var(--font-scale,1))}
.wd-hint{margin-block:0}
.wd-optional{font-weight:600;color:var(--home-muted)}
.field textarea.wd-message{min-block-size:96px}
.wd-privacy{margin-block:16px 0}
.wd-privacy a,.wd-other a,.contact-intro a{color:var(--accent-ink,var(--brand-accent))}
.wd-other{margin-block:0 16px;color:var(--home-muted);font-size:calc(14px * var(--font-scale,1))}
.wd-summary{display:grid;gap:10px;margin-block:14px;padding-block:14px;padding-inline:16px;border-radius:calc(var(--rk,1px) * 14);background:rgba(var(--glass,255,255,255),.05);text-align:start}
.wd-summary dt{font-size:calc(11px * var(--font-scale,1));font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink,var(--brand-accent))}
.wd-summary dd{margin:2px 0 0;font-weight:800;color:var(--home-text);overflow-wrap:anywhere}
.wd-success .form-alert{text-align:start}

/* Formulare kompakter (v6): Kontakt + Widerruf. Schrift in den Feldern bleibt 16px (sonst zoomt das iPhone beim Antippen), Felder mind. 44px hoch. */
.page-head:has(+ .contact-grid){margin-block-end:16px}
.page-head:has(+ .contact-grid) h1{font-size:calc(26px * var(--font-scale,1));margin-block-end:6px}
.contact-card,.contact-aside{padding:16px}
.contact-card .form-row{gap:0 14px}
.contact-card .field{margin-block-end:10px}
.contact-card .field input,.contact-card .field textarea{padding-block:9px;padding-inline:12px}
.contact-card .field input{min-block-size:44px}
.contact-card .field textarea{min-block-size:120px}
.contact-card .field textarea.wd-message{min-block-size:72px}
.contact-card .topic-field{margin-block-end:10px}
.contact-card .form-hint{margin-block:4px 12px}
.contact-card .wd-hint{margin-block:0}
.contact-card .wd-privacy{margin-block:12px 0}
.contact-card .form-row{align-items:start} /* Felder einer Zeile nie in die Höhe ziehen (z. B. wenn nur eines eine Fehlermeldung hat) */
/* Widerruf: Vertrag + Vertragsdatum. Eingabefelder stehen immer auf einer Linie, auch wenn eine Beschriftung umbricht; Hinweis und Fehler darunter. */
.contact-card .wd-row{grid-template-areas:"c" "h" "e" "d";align-items:end}
.wd-row .wd-c{grid-area:c}
.wd-row .wd-d{grid-area:d}
.wd-row .wd-hint{grid-area:h}
.wd-row .field-error{grid-area:e;margin-block:-4px 10px}
.contact-card .wd-row .wd-c{margin-block-end:0}
.contact-card .wd-row .wd-hint{margin-block:5px 10px}
.wd-declaration{margin-block:0 12px;padding-block:9px;padding-inline:14px;font-weight:700;font-size:calc(14px * var(--font-scale,1))}
@media(min-width:640px){
  .page-head:has(+ .contact-grid) h1{font-size:calc(32px * var(--font-scale,1))}
  .contact-card,.contact-aside{padding:22px}
  .contact-card .wd-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c d" "h h" "e e"} /* gleiche Spalten wie Name/E-Mail: „Vertrag geschlossen am (freiwillig)“ passt in eine Zeile */
  .contact-card .wd-row .wd-d{margin-block-end:0}
}
@media(min-width:980px){
  .page-head:has(+ .contact-grid) h1{font-size:calc(36px * var(--font-scale,1))}
}

/* Verwandte Seiten (inc/related.php): kleine Leiste mit Textlinks am Ende einer Seite */
.rel-links{margin-block:40px 0;padding-block-start:22px;border-top:1px solid var(--home-line-strong,rgba(255,255,255,.14))}
.rel-links h2{margin:0 0 12px;font-size:calc(15px * var(--font-scale,1));font-weight:900;letter-spacing:.02em;color:var(--home-muted,#9fb3c8)}
.rel-links ul{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;padding:0;list-style:none}
.rel-links a{display:inline-block;padding-block:8px;padding-inline:14px;border-radius:999px;border:1px solid var(--home-line-strong,rgba(255,255,255,.18));color:var(--home-text,#e4eef7);font-weight:700;font-size:calc(14px * var(--font-scale,1));text-decoration:none}
.rel-links a:hover,.rel-links a:focus-visible{background:rgba(var(--glass,255,255,255),.08);color:var(--accent-ink,var(--brand-accent))}