/* Rechtsseiten (AGB, Impressum, Widerruf, Datenschutz) im Streifen-Look, seit 19.10.2026.
   Baut auf gemeinsam.css und fassung-4.css auf. Viel Text, deshalb ruhig: Streifen nur im Kopf,
   der Text steht gerade in einem weissen Kasten und läuft nicht breiter als gut lesbar. */
.f4 .hero{display:block;padding:60px var(--edge) 70px}
.f4 .hero-kasten{max-width:1100px;padding:40px 48px}
.f4 .hero h1{font-size:clamp(34px,3.4vw,62px);margin-bottom:10px}
.meta,.stand{font-size:var(--text-klein);font-weight:600;color:#6b5a7a;margin-top:6px}

.recht{max-width:calc(1100px + 2*var(--edge));margin:0 auto;padding:60px var(--edge) 80px}
.recht-kasten{background:var(--w);border:5px solid var(--k);box-shadow:14px 14px 0 var(--k);padding:clamp(24px,3vw,52px)}
.recht-kasten h2{display:block;background:none;border:0;box-shadow:none;transform:none;padding:0 0 0 30px;position:relative;font-size:clamp(24px,1.7vw,34px);color:var(--l);margin:44px 0 14px}
.recht-kasten h2::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;background:var(--o);border:3px solid var(--k)}
.recht-kasten > h2:first-child{margin-top:0}
.recht-kasten h3{font-size:clamp(20px,1.25vw,26px);margin:26px 0 8px}
.recht-kasten p,.recht-kasten li{font-size:var(--text-klein);max-width:80ch;margin-bottom:14px}
.recht-kasten ul,.recht-kasten ol{padding-left:26px;margin-bottom:12px}
.recht-kasten li{margin-bottom:8px}
.recht-kasten a{color:var(--l);font-weight:700}
.recht-kasten hr{border:0;border-top:4px dashed var(--k);margin:40px 0}
.recht .btn{margin-top:44px}
/* Lange Adressen (z. B. die Datenschutz-Links von LinkedIn oder PayPal) machten den Kasten am Handy
   breiter als den Bildschirm, der Text wurde rechts abgeschnitten (Tina, 23.10.2026). Jetzt bleibt
   der Kasten so breit wie der Bildschirm und eine lange Adresse bricht um. */
.recht,.recht-kasten{min-width:0;max-width:100%}
.recht-kasten{overflow-wrap:break-word}
.recht-kasten a,.recht-kasten p,.recht-kasten li{overflow-wrap:anywhere}
/* Handy: "Datenschutzerklärung" ist ein einziges langes Wort und lief bei 375 px aus dem Kasten */
@media(max-width:640px){
  .f4 .hero{padding:36px var(--edge) 50px}
  .f4 .hero-kasten{padding:22px}
  .f4 .hero h1{font-size:clamp(26px,7.4vw,34px);hyphens:auto;overflow-wrap:break-word}
  .recht{padding-top:40px}
  .recht-kasten{padding:20px;box-shadow:10px 10px 0 var(--k)}
}