/* =====================================================================
   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;

  /* Gleiche Mono-Stufen wie im <style> der Hauptseiten — sonst rendert die
     Fusszeile auf den Rechtsseiten minimal anders als auf der Startseite. */
  --m1:.66rem;
  --m2:.78rem;
  --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;
}
/* Schmal wird der Name kleiner, aber NICHT unsichtbar — die Kopfzeile soll
   auch am Handy "3DDruck&Design Matthias Klöck" zeigen. */
@media (max-width:760px){.marke-s{font-size:.58rem;letter-spacing:.04em}}

.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}

/* Hinweis für englischsprachige Leser: bewusst zurückhaltend gehalten —
   er soll auffindbar sein, aber dem deutschen Leser nicht den Blick auf den
   eigentlichen Text verstellen. Steht direkt unter der Stand-Zeile, damit ihn
   niemand erst am Seitenende findet. */
.recht .nur-deutsch{
  font-family:var(--mono);font-size:var(--m2);line-height:1.7;
  color:var(--mid);max-width:68ch;
  border-left:2px solid var(--linie);padding-left:.9rem;
  margin:-.8rem 0 2.4rem;
}
.recht .nur-deutsch a{color:var(--mid)}

.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)}
/* Drei Felder statt vier: Firma und Logo gehören zusammen, sie standen
   vorher getrennt. Das erste Feld ist breiter, weil es beides trägt. */
/* 1.4fr: Bei 1.7fr klaffte zwischen Text und rechtsbündigem Logo eine Lücke
   von 203 px — im Browser nachgemessen. Bei 1.4fr füllt der Text die Spalte
   aus, es bleiben 19 px Abstand, und Text (14rem) plus Logo (9rem) passen
   gerade noch nebeneinander. */
.tb{display:grid;grid-template-columns:1.4fr 1fr 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(3n){border-right:0}
/* flex-wrap: Wird das Feld zu schmal, rutscht das Logo unter den Text,
   statt ihn zusammenzuquetschen. Der Satz soll ungern umbrechen — deshalb
   bekommt der Textblock eine Mindestbreite, unterhalb derer das Logo weicht. */
.firma-in{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:flex-start;justify-content:space-between}
/* 14rem = 224px: die laengste der drei Zeilen, im Browser gemessen.
   Darunter braeche ein Satz um — deshalb weicht lieber das Logo nach unten. */
.tb-firma .v{flex:1 1 14rem;min-width:0}
/* Der Weg zur Anfrage bleibt zusammen und bricht nur, wenn es wirklich eng wird. */
.weg-zeile{display:inline-block}
/* Im Fuß steht die BILDMARKE (3dd mark, Verhältnis ~1,77:1), nicht das
   horizontale Volllogo — der Firmenname steht als Text direkt daneben und
   müsste sich sonst selbst wiederholen. Beide Grenzen (Breite UND Höhe)
   bleiben: So kann jede künftige Fassung gefahrlos eingesetzt werden. */
.firma-logo{flex-shrink:0;max-width:9rem}
.firma-logo img{max-width:9rem;max-height:4rem;width:auto;height:auto}
.anfrage-weg{margin-top:.8rem}
.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)}
/* SICHERHEITSNETZ, 30.07.2026 — nicht wegoptimieren.
   Am 30.07. lagen datenschutz.html und agb.html noch im Stand vom 28.07. auf
   dem Server, weil sie beim Hochladen zurueckgeblieben waren. Ihr alter Fuss
   trug das Logo in einer Zelle .tb-logo, deren Groessenregel ich zuvor als
   "verwaist" entfernt hatte — das Logo rendete daraufhin 451x354 statt 144x45
   Pixel und sprengte die Fusszeile. Diese Regel begrenzt JEDES Bild im Fuss,
   unabhaengig von Klassennamen: Ein unvollstaendiger Upload kann das Layout
   damit nicht mehr zerreissen. */
.fuss img{max-height:4rem;width: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:center;align-items:center;text-align: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}
}