/* ============================================================
   Iron Labs · recht.css · Impressum, Datenschutz, AGB, Widerrufsbelehrung, Kündigen. Stand 03.11.2026.
   Baut auf site.css auf (Tokens, Kopf, Fuß, .feld, .knopf, .danke). Hier nur Lesetext, Auswahl, Beleg und Druck.
   Erzeugt von website/rechtsseiten_bauen.py, Texte in website/recht/.
   ============================================================ */
:root{--fehler:#B3261E}

/* ---------- Lesetext ---------- */
.recht{padding-block:40px 72px}
@media(min-width:960px){.recht{padding-block:72px 112px}}
.recht-rahmen{width:min(100% - 40px,760px);margin-inline:auto}
.recht h1{font-size:clamp(32px,7vw,48px);line-height:1.1;color:var(--primaer)}
.recht h1+p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--gedaempft-tief)}
.recht .recht-lead{margin-top:14px;max-width:60ch;font-size:18px;line-height:1.55;color:var(--text)}
.recht h2{margin-top:44px;font-size:clamp(20px,4.6vw,24px);line-height:1.25;color:var(--primaer);scroll-margin-top:calc(var(--kopf-hoehe) + 8px)}
.recht h3{margin-top:28px;font-size:18px;line-height:1.3}
.recht-text>p,.recht-text>ul,.recht-text>ol,.recht-text>address{margin-top:12px;max-width:68ch}
.recht-text address{font-style:normal}
.recht-text>ul{list-style:disc;padding-left:1.25em}
.recht-text>ol{list-style:decimal;padding-left:1.25em}
.recht-text li+li{margin-top:6px}
.recht-text a{overflow-wrap:anywhere}

/* ---------- Kündigen und Widerrufen ---------- */
.kuendigen{margin-top:28px;padding:20px;border-radius:var(--r-karte);background:var(--oberflaeche)}
@media(min-width:640px){.kuendigen{padding:32px}}
.kuendigen .felder{gap:18px}
.kuendigen:has([data-kuendigen-danke]:not([hidden])){padding:0;background:none}
/* Links mitten im Satz bleiben im Satz (site.css macht Links in .klein sonst zu eigenen Tippzeilen, 06.11.2026) */
.kuendigen .klein a{display:inline;min-height:0;padding-block:10px}
.wahl{margin:0;padding:0;border:0;min-width:0}
.wahl legend{padding:0;margin-bottom:10px;font-size:14px;font-weight:600;line-height:1.3;color:var(--text)}
.wahl-optionen{display:grid;gap:10px}
@media(min-width:560px){.wahl-optionen{grid-template-columns:1fr 1fr}}
.wahl-punkt{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 16px;border-radius:var(--r-klein);
  background:var(--grund);box-shadow:inset 0 0 0 1.5px var(--linie);font-weight:600;line-height:1.3;cursor:pointer}
.wahl-punkt input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:var(--primaer)}
.wahl-punkt:has(input:checked){background:var(--hell);box-shadow:inset 0 0 0 2px var(--primaer)}
.wahl-punkt:has(input:focus-visible){outline:3px solid var(--primaer);outline-offset:2px}
@media(hover:hover){
  .wahl-punkt:hover{box-shadow:inset 0 0 0 1.5px var(--akzent)}
  .wahl-punkt:has(input:checked):hover{box-shadow:inset 0 0 0 2px var(--primaer)}
}
.feld-paar{display:grid;gap:18px}
@media(min-width:560px){.feld-paar{grid-template-columns:1fr 1fr}}
.feld select{width:100%;min-height:52px;padding:12px 44px 12px 14px;border:0;border-radius:var(--r-klein);
  background:var(--grund) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306164D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/18px 18px;
  box-shadow:inset 0 0 0 1.5px var(--linie);font:400 16px/1.45 "Manrope",Georgia,serif;color:var(--text);
  -webkit-appearance:none;appearance:none;cursor:pointer}
@media(hover:hover){.feld select:hover{box-shadow:inset 0 0 0 1.5px var(--akzent)}}
.feld select:focus-visible{outline:3px solid var(--primaer);outline-offset:1px;box-shadow:inset 0 0 0 1.5px var(--primaer)}
.feld [aria-invalid="true"],.feld [aria-invalid="true"]:hover{box-shadow:inset 0 0 0 2px var(--fehler)}
.kuendigen .form-meldung{color:var(--fehler)}
.knopf[aria-busy="true"]{opacity:.7;cursor:progress}

/* ---------- Beleg nach dem Absenden ---------- */
.beleg{gap:18px;padding:24px 20px;font-size:16px;font-weight:400;color:var(--text)}
@media(min-width:640px){.beleg{padding:32px}}
.beleg-titel{font-size:22px;font-weight:700;line-height:1.25;color:var(--primaer)}
.beleg-liste{display:grid;gap:12px;width:100%;margin:0}
.beleg-liste>div{display:grid;gap:2px}
@media(min-width:560px){.beleg-liste>div{grid-template-columns:170px 1fr;gap:16px;align-items:baseline}}
.beleg-liste dt{font-size:14px;font-weight:600;line-height:1.4;color:var(--gedaempft-tief)}
.beleg-liste dd{font-size:16px;font-weight:600;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
.beleg-liste dd[data-beleg="referenz"]{font-size:20px;letter-spacing:.02em;color:var(--primaer);font-variant-numeric:tabular-nums}

/* ---------- 404 ---------- */
.recht-wege{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* ---------- Druck: nur der Text, beim Kündigen nur der Beleg ---------- */
@media print{
  @page{margin:16mm}
  body{background:#fff;color:#000;font-size:11pt}
  .sprung,.kopf,.fuss,.mobil-leiste,[data-drucken],.kuendigen form{display:none !important}
  .recht{padding:0}
  .recht-rahmen{width:auto}
  .recht h1,.recht h2,.recht-text a{color:#000}
  .recht h2{break-after:avoid}
  .recht-text a{text-decoration:none}
  .kuendigen{margin-top:12pt;padding:0;background:none}
  .beleg{padding:0;background:none;color:#000}
  .beleg-titel,.beleg-liste dt,.beleg-liste dd,.beleg-liste dd[data-beleg="referenz"]{color:#000}
  .beleg-liste>div{grid-template-columns:45mm 1fr;gap:4mm;break-inside:avoid}
}

/* ---------- design-council 03.11.2026 ---------- */
/* Auf Rechtsseiten zieht kein gefüllter Knopf im Kopf vom Vorgang weg */
.kopf-aktion .leben-knopf{background:var(--grund);color:var(--primaer);box-shadow:inset 0 0 0 1.5px var(--primaer)}
.kopf-aktion .leben-knopf::after{display:none}
/* Kündigen oder Widerrufen: je Wahl ein Satz, was sie bedeutet */
.wahl-punkt span{display:grid;gap:2px}
.wahl-punkt small{font-size:14px;font-weight:400;line-height:1.4;color:var(--gedaempft-tief)}
/* Felder und Wahl mit sichtbarem Rand (3:1) */
.wahl-punkt{box-shadow:inset 0 0 0 1.5px var(--feld-rand)}
.feld select{box-shadow:inset 0 0 0 1.5px var(--feld-rand)}
/* Zwei Gruppen mit Überschrift: Ihre Angaben, Ihr Vertrag */
.gruppe{margin:0;padding:0;border:0;min-width:0;display:grid;gap:18px}
.gruppe legend{padding:0;margin-bottom:14px;font-size:17px;font-weight:600;line-height:1.3;color:var(--primaer)}
.gruppe + .gruppe{margin-top:10px}