/* =====================================================================
   recht.css — gemeinsames Stylesheet der Rechtsseiten
   Impressum · Datenschutz · AGB · Widerruf
   Stand 28.07.2026 · gehört zu Variante D3

   WARUM EINE EIGENE DATEI UND KEIN KOPIERTES <style>:
   Die Startseite trägt ihr CSS eingebettet — das ist dort richtig, weil sie
   als einzelne Datei entworfen wurde. Vier Rechtsseiten mit je 45 KB Kopie
   wären dagegen vier Stellen, die beim nächsten Farbwechsel auseinanderlaufen.
   Hier steht deshalb nur, was die Rechtsseiten wirklich brauchen: Farben,
   Schriften, Kopf, Fuß, Maßstrich, Lesetypografie. Rund ein Fünftel.

   Der Browser lädt sie einmal und hat sie für alle vier Seiten im Speicher.
   ===================================================================== */

/* ---------- Schriften (lokal, keine externen Anfragen) ---------- */
@font-face{font-family:'Overpass';src:url('schriften/Overpass-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Overpass';src:url('schriften/Overpass-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Overpass';src:url('schriften/Overpass-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Overpass';src:url('schriften/Overpass-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Overpass';src:url('schriften/Overpass-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Cousine';src:url('schriften/Cousine-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cousine';src:url('schriften/Cousine-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* =====================================================================
   FARBEN — identisch zur Startseite. Wer hier etwas ändert, muss es auch
   im <style> von index.html ändern; die beiden sind ein Paar.
   ===================================================================== */
:root{
  --h-grund:#f4f5f2;
  --h-flaeche:#ffffff;
  --h-tief:#eceee9;
  --h-ink:#191d21;
  --h-mid:#4d565e;          /* 6,9:1 auf --h-grund */
  --h-linie:#c9cec9;
  --h-linie-akt:#858a85;    /* Bedienelement-Rand, 3,2:1 auf --h-grund */
  --h-linie-fein:#e2e5e0;
  --h-akzent:#ff5a4a;       /* nur Linien, Marken, Flächen — nie Text */
  --h-akzent-txt:#c02d16;   /* Akzent als Text, 5,2:1 auf --h-grund */
  --h-invers:#ffffff;
  --h-raster-fein:rgba(25,29,33,.045);
  --h-raster-grob:rgba(25,29,33,.085);

  --d-grund:#16181a;
  --d-flaeche:#1d2023;
  --d-tief:#232629;
  --d-ink:#eceeec;
  --d-mid:#a6aeb2;          /* 7,7:1 auf --d-grund */
  --d-linie:#3b4045;
  --d-linie-akt:#6c7278;    /* Bedienelement-Rand, 3,6:1 auf --d-grund */
  --d-linie-fein:#2a2e32;
  --d-akzent:#ff6c5a;
  --d-akzent-txt:#ff8272;   /* Akzent als Text, 7,2:1 auf --d-grund */
  --d-invers:#16181a;
  --d-raster-fein:rgba(236,238,236,.034);
  --d-raster-grob:rgba(236,238,236,.065);

  /* Belegung: HELL als Grundzustand — greift auch ganz ohne JavaScript */
  --grund:var(--h-grund);
  --flaeche:var(--h-flaeche);
  --tief:var(--h-tief);
  --ink:var(--h-ink);
  --mid:var(--h-mid);
  --linie:var(--h-linie);
  --linie-akt:var(--h-linie-akt);
  --linie-fein:var(--h-linie-fein);
  --akzent:var(--h-akzent);
  --akzent-txt:var(--h-akzent-txt);
  --invers:var(--h-invers);
  --raster-fein:var(--h-raster-fein);
  --raster-grob:var(--h-raster-grob);

  --sans:'Overpass',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Cousine',ui-monospace,'Consolas',monospace;

  --m1:.6875rem;
  --m2:.75rem;
  --m4:1.35rem;

  --max:1440px;
  --pad-x:clamp(1rem,2.6vw,2.4rem);
  --rand-w:clamp(58px,7vw,112px);
  --spalt:clamp(1.1rem,3.4vw,3.2rem);
  --kopf-h:3.9rem;
  --fein:9px;
  --grob:72px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]){
    color-scheme:dark;
    --grund:var(--d-grund); --flaeche:var(--d-flaeche); --tief:var(--d-tief);
    --ink:var(--d-ink); --mid:var(--d-mid);
    --linie:var(--d-linie); --linie-akt:var(--d-linie-akt); --linie-fein:var(--d-linie-fein);
    --akzent:var(--d-akzent); --akzent-txt:var(--d-akzent-txt);
    --invers:var(--d-invers);
    --raster-fein:var(--d-raster-fein); --raster-grob:var(--d-raster-grob);
  }
}
:root[data-theme="dunkel"]{
  color-scheme:dark;
  --grund:var(--d-grund); --flaeche:var(--d-flaeche); --tief:var(--d-tief);
  --ink:var(--d-ink); --mid:var(--d-mid);
  --linie:var(--d-linie); --linie-akt:var(--d-linie-akt); --linie-fein:var(--d-linie-fein);
  --akzent:var(--d-akzent); --akzent-txt:var(--d-akzent-txt);
  --invers:var(--d-invers);
  --raster-fein:var(--d-raster-fein); --raster-grob:var(--d-raster-grob);
}

/* =====================================================================
   Reset & Basis
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-h) + 1.5rem);
  overflow-x:clip;
}
body{
  overflow-x:clip;
  font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.65;
  color:var(--ink);
  background-color:var(--grund);
  background-image:
    linear-gradient(var(--raster-fein) 1px,transparent 1px),
    linear-gradient(90deg,var(--raster-fein) 1px,transparent 1px),
    linear-gradient(var(--raster-grob) 1px,transparent 1px),
    linear-gradient(90deg,var(--raster-grob) 1px,transparent 1px);
  background-size:var(--fein) var(--fein),var(--fein) var(--fein),var(--grob) var(--grob),var(--grob) var(--grob);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
b,strong{font-weight:700}
p,li,dd,td{overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--akzent-txt);outline-offset:3px}
::selection{background:var(--akzent-txt);color:#fff}

.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

.sprung{
  position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--ink);color:var(--invers);padding:.75rem 1.1rem;
  font-family:var(--mono);font-size:var(--m2);letter-spacing:.06em;
}
.sprung:focus{left:.5rem;top:.5rem}

/* =====================================================================
   KOPFZEILE — wie auf der Startseite, nur ohne die Abschnitts-Navigation:
   Auf einer Rechtsseite gibt es keine Abschnitte 02–08, zu denen sie
   springen könnte. Statt dessen ein Rückweg zur Startseite.
   ===================================================================== */
.kopf{
  position:sticky;top:0;z-index:120;
  background:var(--grund);border-bottom:1px solid var(--linie);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.kopf-in{
  max-width:var(--max);margin-inline:auto;min-height:var(--kopf-h);
  padding-inline:var(--pad-x);
  display:flex;align-items:center;gap:clamp(.5rem,1.6vw,1.4rem);
}
.marke{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;flex-shrink:0;min-width:0}
.marke-w{font-weight:900;font-size:1.18rem;letter-spacing:-.03em;white-space:nowrap}
.marke-amp{color:var(--akzent-txt)}
.marke-s{
  font-family:var(--mono);font-size:var(--m1);letter-spacing:.06em;
  color:var(--mid);white-space:nowrap;
}
@media (max-width:760px){.marke-s{display:none}}

.kopf-nav{
  display:flex;gap:.1rem;margin-left:auto;min-width:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.kopf-nav::-webkit-scrollbar{display:none}
.kopf-nav a{
  font-family:var(--mono);font-size:var(--m1);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--mid);white-space:nowrap;
  padding:.5rem .55rem;border-bottom:2px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.kopf-nav a:hover{color:var(--ink);border-bottom-color:var(--akzent)}
.kopf-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--akzent)}

.kopf-werkzeuge{display:flex;align-items:center;gap:.45rem;flex-shrink:0;margin-left:.2rem}

.modus{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;line-height:1;
  background:transparent;border:1px solid var(--linie-akt);color:var(--ink);
  font-family:var(--mono);font-size:var(--m1);letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem .58rem;
  transition:border-color .16s ease,color .16s ease;
}
.modus:hover{border-color:var(--akzent);color:var(--akzent-txt)}
.modus svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.modus .sonne{display:none}
:root[data-theme="dunkel"] .modus .sonne{display:block}
:root[data-theme="dunkel"] .modus .mond{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]) .modus .sonne{display:block}
  :root:not([data-theme="hell"]) .modus .mond{display:none}
}

.kopf-cta{
  font-family:var(--mono);font-weight:700;font-size:var(--m1);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;background:var(--ink);color:var(--invers);
  padding:.6rem .9rem;white-space:nowrap;flex-shrink:0;
  transition:background .16s ease;
}
.kopf-cta:hover{background:var(--akzent-txt);color:#fff}

@media (max-width:1040px){
  .kopf-in{flex-wrap:wrap;padding-top:.5rem;row-gap:.2rem}
  .kopf-nav{order:5;width:100%;margin-left:0;border-top:1px solid var(--linie-fein);padding-top:.15rem}
  .kopf-werkzeuge{margin-left:auto}
}
@media (max-width:430px){
  .kopf-cta{display:none}
  .modus .txt{display:none}
}

/* =====================================================================
   DER MASSSTRICH — dieselbe Bühne wie auf der Startseite
   ===================================================================== */
.blatt{
  display:grid;grid-template-columns:var(--rand-w) minmax(0,1fr);
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x);
}
.rand{
  position:relative;border-right:1px solid var(--linie);
  padding:clamp(3.5rem,8vw,7.5rem) 1.5rem 0 0;
}
.rand-lineal{
  position:absolute;top:0;bottom:0;right:0;width:22px;pointer-events:none;
  background-image:
    linear-gradient(to bottom,var(--linie) 0 1px,transparent 1px),
    linear-gradient(to bottom,var(--linie) 0 1px,transparent 1px);
  background-size:7px 16px,16px 80px;
  background-position:right 0 top 0;
  background-repeat:repeat-y;
  opacity:.85;
}
.rand-in{
  position:sticky;top:calc(var(--kopf-h) + 2.2rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
}
.rand-nr{
  font-family:var(--mono);font-weight:700;font-size:var(--m4);
  line-height:1;color:var(--akzent-txt);letter-spacing:-.02em;
}
.rand-strich{width:1.4rem;height:1px;background:var(--linie);display:block}
.rand-titel{
  font-family:var(--mono);font-size:var(--m2);letter-spacing:.24em;text-transform:uppercase;
  color:var(--mid);white-space:nowrap;
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.rand-mass{
  font-family:var(--mono);font-size:var(--m1);letter-spacing:.1em;color:var(--mid);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.flaeche{
  min-width:0;
  padding:clamp(3rem,6vw,5rem) 0 clamp(3.5rem,8vw,7.5rem) var(--spalt);
}

@media (max-width:960px){
  .blatt{grid-template-columns:minmax(0,1fr)}
  .rand{
    border-right:0;border-bottom:1px solid var(--linie);
    margin-top:clamp(2.4rem,7vw,3.4rem);padding:0 0 .8rem;
  }
  .rand-lineal{
    top:auto;left:0;right:0;bottom:0;width:auto;height:9px;
    background-image:
      linear-gradient(to right,var(--linie) 0 1px,transparent 1px),
      linear-gradient(to right,var(--linie) 0 1px,transparent 1px);
    background-size:16px 5px,80px 9px;
    background-position:left bottom;
    background-repeat:repeat-x;
  }
  .rand-in{position:static;flex-direction:row;align-items:baseline;gap:.7rem;flex-wrap:wrap}
  .rand-titel,.rand-mass{writing-mode:horizontal-tb;transform:none}
  .rand-strich{align-self:center}
  .rand-mass{margin-left:auto}
  .flaeche{padding:1.7rem 0 clamp(2.6rem,9vw,4rem) 0}
}

/* =====================================================================
   TYPOGRAFIE DER RECHTSTEXTE
   Rechtstexte werden gelesen, nicht überflogen. Deshalb eine ruhige
   Spalte von höchstens 68 Zeichen, großzügige Abstände zwischen den
   Paragraphen und Nummern in der Auszeichnungsschrift — so findet man
   "§ 7 Abs. 2" auch, wenn jemand am Telefon danach fragt.
   ===================================================================== */
.kicker{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--mono);font-size:var(--m2);letter-spacing:.2em;text-transform:uppercase;
  color:var(--mid);margin-bottom:1.4rem;
}
.kicker::after{content:"";flex:1;height:1px;background:var(--linie);max-width:6rem}

.recht h1{
  font-weight:900;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(2rem,5.2vw,3.4rem);
  margin-bottom:1.1rem;
}
.recht .stand{
  font-family:var(--mono);font-size:var(--m2);letter-spacing:.1em;
  color:var(--mid);
  padding-bottom:1.6rem;margin-bottom:2.4rem;
  border-bottom:1.5px solid var(--ink);
}
.recht .stand b{color:var(--akzent-txt);font-weight:400}

.recht h2{
  font-weight:700;font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:-.01em;
  line-height:1.25;
  margin:2.9rem 0 .9rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--linie);
  scroll-margin-top:calc(var(--kopf-h) + 1.5rem);
}
.recht h2:first-of-type{margin-top:0}
.recht h3{
  font-weight:600;font-size:1.02rem;
  margin:1.8rem 0 .6rem;
  scroll-margin-top:calc(var(--kopf-h) + 1.5rem);
}
.recht p{max-width:68ch;margin-bottom:1rem}
.recht ul,.recht ol{max-width:68ch;margin:0 0 1rem 1.3rem}
.recht li{margin-bottom:.4rem}
.recht a{color:var(--akzent-txt);text-decoration:none;border-bottom:1px solid var(--linie)}
.recht a:hover{border-bottom-color:var(--akzent-txt)}
.recht b,.recht strong{color:var(--ink)}

/* Anschriften und Formularblöcke: abgesetzt wie ein Stempelfeld */
.recht blockquote{
  border-left:2px solid var(--akzent);
  background:var(--flaeche);
  padding:1rem 1.2rem;margin:0 0 1.2rem;
  max-width:68ch;
}
.recht blockquote p{margin-bottom:.2rem}
.recht blockquote p:last-child{margin-bottom:0}

.recht hr{
  border:0;border-top:1px solid var(--linie);
  margin:2.6rem 0;max-width:68ch;
}

/* Der Kasten für das Muster-Widerrufsformular — bewusst in der
   Auszeichnungsschrift, damit er wie ein Vordruck aussieht und nicht
   mit dem Fließtext verwechselt wird. */
.vordruck{
  border:1px solid var(--linie);
  background:var(--flaeche);
  padding:clamp(1.1rem,2.4vw,1.8rem);
  margin:1.4rem 0;max-width:68ch;
  font-family:var(--mono);font-size:.86rem;line-height:1.9;
}
.vordruck .linie{
  display:block;border-bottom:1px solid var(--linie-akt);
  height:1.5rem;margin:.3rem 0 1rem;
}
.vordruck p{margin-bottom:.7rem;max-width:none}

/* Hinweis-Kasten: was der Nutzer wissen sollte, ohne dass es Gesetzestext
   ist — etwa "diese Seite setzt keine Cookies". */
.merk{
  border:1px solid var(--linie);border-left:3px solid var(--akzent);
  background:var(--flaeche);
  padding:1rem 1.2rem;margin:1.4rem 0;max-width:68ch;
}
.merk p:last-child{margin-bottom:0}
.merk .titel{
  display:block;font-family:var(--mono);font-size:var(--m1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mid);
  margin-bottom:.5rem;
}

/* Inhaltsverzeichnis der längeren Texte (AGB, Datenschutz) */
.inhalt{
  border:1px solid var(--linie);background:var(--flaeche);
  padding:1.1rem 1.3rem;margin-bottom:2.4rem;max-width:68ch;
}
.inhalt .titel{
  display:block;font-family:var(--mono);font-size:var(--m1);
  letter-spacing:.16em;text-transform:uppercase;color:var(--mid);
  margin-bottom:.7rem;
}
.inhalt ol{margin:0;padding-left:1.4rem;font-size:.94rem}
.inhalt li{margin-bottom:.3rem}
.inhalt a{border-bottom-color:transparent}
.inhalt a:hover{border-bottom-color:var(--akzent-txt)}

/* Querverweise auf die anderen drei Rechtsseiten, am Fuß jedes Textes */
.nachbarn{
  display:flex;flex-wrap:wrap;gap:.6rem;
  margin-top:3rem;padding-top:1.4rem;border-top:1.5px solid var(--ink);
}
.nachbarn a{
  font-family:var(--mono);font-size:var(--m2);letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--linie-akt);
  padding:.55rem .8rem;color:var(--mid);
  transition:border-color .16s ease,color .16s ease;
}
.nachbarn a:hover{border-color:var(--akzent);color:var(--akzent-txt)}
.nachbarn a[aria-current="page"]{
  border-color:var(--ink);color:var(--ink);background:var(--tief);
}

/* =====================================================================
   FUSSZEILE — der Titelblock, wie auf der Startseite
   ===================================================================== */
.fuss{border-top:1.5px solid var(--ink);background:var(--flaeche);margin-top:clamp(2rem,5vw,4rem)}
.fuss-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.tb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.tb-zelle{
  border-right:1px solid var(--linie-fein);border-bottom:1px solid var(--linie-fein);
  padding:1.4rem 1.3rem;min-height:6.6rem;
}
.tb-zelle:nth-child(4n){border-right:0}
.tb-zelle .k{
  display:block;font-family:var(--mono);font-size:var(--m1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mid);margin-bottom:.55rem;
}
.tb-zelle .v{font-size:.88rem;line-height:1.6}
.tb-zelle .v a{text-decoration:none;border-bottom:1px solid var(--linie)}
.tb-zelle .v a:hover{border-bottom-color:var(--akzent);color:var(--akzent-txt)}
.tb-logo img{max-height:3.2rem;width:auto;height:auto}
.logo-dunkel{display:none}
:root[data-theme="dunkel"] .logo-hell{display:none}
:root[data-theme="dunkel"] .logo-dunkel{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="hell"]) .logo-hell{display:none}
  :root:not([data-theme="hell"]) .logo-dunkel{display:block}
}
@media (max-width:900px){
  .tb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-zelle:nth-child(2n){border-right:0}
}
@media (max-width:520px){
  .tb{grid-template-columns:minmax(0,1fr)}
  .tb-zelle{border-right:0;min-height:0}
}

.tb-fuss{
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;align-items:center;
  padding:1rem 1.3rem 1.4rem;border-top:1px solid var(--linie-fein);
  font-family:var(--mono);font-size:var(--m1);letter-spacing:.09em;text-transform:uppercase;color:var(--mid);
}

/* Beim Umschalten von hell auf dunkel darf nichts nachlaufen. */
:root[data-schaltet] *,
:root[data-schaltet] *::before,
:root[data-schaltet] *::after{transition:none!important}

/* =====================================================================
   BEWEGUNG REDUZIEREN
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* =====================================================================
   DRUCKEN
   Rechtstexte werden ausgedruckt und abgeheftet — das ist ihr Zweck.
   Kopf, Fuß und Querverweise fallen weg, das Raster ebenso.
   ===================================================================== */
@media print{
  .kopf,.fuss,.nachbarn,.sprung,.rand,.inhalt{display:none}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.5}
  .blatt{display:block;max-width:none;padding:0}
  .flaeche{padding:0}
  .recht p,.recht ul,.recht ol,.recht blockquote{max-width:none}
  .recht h1{font-size:20pt}
  .recht h2{font-size:12pt;page-break-after:avoid}
  .recht h3{page-break-after:avoid}
  .recht a{color:#000;border:0}
  /* Die Adresse hinter einem Link ist auf Papier sonst verloren. */
  .recht a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  .vordruck,.merk{border:1px solid #000;background:#fff;page-break-inside:avoid}
}