/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 3 · „Nachtbüro" — Steuerkanzlei Ahlbrecht
   ---------------------------------------------------------------------------
   Haltung: die Kanzlei am Abend. Dunkel, gross, langsam, radikal wenig auf der
   Seite. EINE einzige Schrift (Manrope) traegt die ganze Hierarchie — Groesse
   und Gewicht machen den Unterschied, nicht ein zweiter Schriftschnitt.
   Flaechen haben keine Rundung, Knoepfe sind Pillen. Das ist der ganze Trick.

   Der Unterschied zu Entwurf 1 und 2 steckt im Bau, nicht in der Farbe:
     Buehne     Vollbild mit Ueberlagerung statt zwei Spalten / geteilter Flaeche
     Leistungen Akkordeon statt nummerierter Reihe / Tabelle
     Verguetung Kontobogen mit Merkspalte statt Kaesten / Rechnungsbogen
     Galerie    Wischleiste statt Mauerwerk / Raster
     Fragen     offene Liste mit Haarlinien statt Akkordeon / Karten
     Kontakt    Formular in einer eigenen dunklen Flaeche, Daten in derselben
     Kanten     Flaechen 0px, Knoepfe 9999px

   Bewegung: Stufe 2 („Buehne"). Laenger und weiter als in den anderen beiden
   Entwuerfen — 900ms statt 550ms, 34px statt 18px —, aber immer noch nur
   Einblenden beim Scrollen. Keine Bibliothek, kein Scroll-Entfuehren.
   `prefers-reduced-motion` schaltet alles ab.

   Dieser Entwurf ist als DUNKLE Buehne gebaut, nicht als Umschaltung eines
   hellen Entwurfs. Ein Hell-Schalter waere hier gelogen: die Bildbehandlung,
   die Ueberlagerung der Buehne und die Pillen leben vom dunklen Grund.

   Alle Farbtoken tragen ihr GEMESSENES Kontrastverhaeltnis als Kommentar.
   Gerechnet, nicht geschaetzt (WCAG-Formel, relative Luminanz).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ─────────────────────────────────────────────────────── */
:root{
  /* Flaechen */
  --hg:        #0B1114;   /* Grundflaeche der ganzen Seite                    */
  --flaeche:   #162126;   /* abgesetzte Flaechen: Formular, Kontobogen        */
  --tief:      #0F171B;   /* Eingabefelder — eine Stufe TIEFER als die
                             Flaeche, damit ein Feld eingelassen wirkt        */

  /* Schrift */
  --tinte:     #F2F4F3;   /* 17.21:1 auf HG · 14.86:1 auf Flaeche            */
  --text:      #9EAEB4;   /*  8.30:1 auf HG ·  7.16:1 auf Flaeche ·
                              7.91:1 auf Tief                                 */
  --leise:     #8A9CA3;   /*  6.67:1 auf HG ·  5.76:1 auf Flaeche.
                              Fuer Kleingedrucktes und Fundstellen — bewusst
                              noch ueber 4.5:1, nicht nur „grau genug".       */

  /* Linien */
  --linie:     #243238;   /*  1.44:1 — reine Zierlinie, NIE Textfarbe         */
  --rahmen:    #63787F;   /*  4.10:1 auf HG · 3.54:1 auf Flaeche · 3.90:1 auf
                              Tief. Rahmen von Eingabefeldern und leeren
                              Pillen. WCAG 1.4.11 verlangt fuer Bedienelemente
                              3:1 — eine Haarlinie erfuellt das nicht.        */

  /* Farbe */
  --blau:      #1F3BA8;   /* nur FLAECHE: Weiss darauf misst 9.34:1.
                              Als Schrift auf dem dunklen Grund waeren es
                              2.04:1 — dafuer gibt es --blau-hell.            */
  --blau-tief: #18318E;   /* Hover-Flaeche — Weiss darauf 10.86:1             */
  --blau-hell: #B9C6FF;   /* 11.39:1 auf HG · 9.83:1 auf Flaeche.
                              Die schreibbare Blaustufe.                      */
  --blau-leise:#C6D2FF;   /*  6.25:1 AUF Blau — gedaempfter Text im Blauband  */
  --best:      #3DBE7C;   /*  8.02:1 auf HG · 6.92:1 auf Flaeche              */
  --cta:       #FFFFFF;   /* Hauptknopf: weisse Pille. Tinte darauf 19.01:1   */

  /* Schrift-Familie — eine einzige, mit vollem Gewichtsvorrat */
  --schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Helvetica, Arial, sans-serif;

  /* Mass */
  --pille: 9999px;        /* Knoepfe                                         */
  --kante: 0px;           /* Flaechen — durchgehend kantig                    */
  --bahn:  1200px;
  --luft:  clamp(72px, 8.5vw, 132px);   /* mehr Luft als in 1 und 2          */
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--hg); color:var(--text);
  font:300 18px/1.75 var(--schrift);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* Der Browser soll wissen, dass diese Seite dunkel gemeint ist — dann faerbt
   er auch Rollbalken und Formularinnereien passend ein. */
:root{color-scheme:dark}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; color:var(--tinte); font-weight:700; line-height:1.1;
  letter-spacing:-.03em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--best); outline-offset:3px}

.wrap{width:min(100% - 48px, var(--bahn)); margin-inline:auto}
@media (max-width:560px){ .wrap{width:min(100% - 30px, var(--bahn))} }

/* Sprunglink: erst sichtbar, wenn er den Fokus bekommt. */
.nur-vorleser{
  position:absolute; left:16px; top:-64px; z-index:99;
  background:var(--cta); color:var(--hg); padding:12px 22px; text-decoration:none;
  border-radius:var(--pille); font:700 15px/1 var(--schrift); transition:top .2s;
}
.nur-vorleser:focus{top:16px}

/* Text, der nur vorgelesen wird. */
.still{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Vorspann-Zeile. Eine Schrift heisst: die Rubrik unterscheidet sich nur durch
   Groesse, Sperrung und Gewicht — nicht durch eine zweite Schriftart. */
.rubrik{
  display:block; font:700 12px/1 var(--schrift); letter-spacing:.22em;
  text-transform:uppercase; color:var(--blau-hell); margin-bottom:18px;
}

/* ── Einblenden — Bewegungsstufe 2 ───────────────────────────────────────── */
.js .zeig{opacity:0; transform:translateY(34px)}
.js .zeig[data-da="1"]{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms),
             transform .9s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 90ms);
}
@media (prefers-reduced-motion: reduce){
  .js .zeig{opacity:1 !important; transform:none !important}
}

/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{background:var(--blau); color:#fff; font:400 14px/1.5 var(--schrift)}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:10px 0}
.entwurf-band b{font-weight:800}
.entwurf-band span{flex:1 1 320px; color:var(--blau-leise)}  /* 6.25:1 */
.entwurf-band a{color:#fff; text-underline-offset:3px}

/* ── Kopf: schwebt ueber der Buehne, faerbt sich beim Scrollen ───────────── */
.kopf{position:sticky; top:0; z-index:40; background:transparent;
  border-bottom:1px solid transparent; transition:background .3s, border-color .3s}
.kopf[data-gescrollt="1"]{
  background:rgba(11,17,20,.92); border-bottom-color:var(--linie);
  backdrop-filter:blur(10px);
}
.kopf .wrap{display:flex; align-items:center; gap:26px; min-height:82px}

.marke{display:flex; align-items:baseline; gap:11px; text-decoration:none;
  margin-right:auto; font:800 25px/1 var(--schrift); color:var(--tinte);
  letter-spacing:-.04em}
.marke small{font:600 11px/1 var(--schrift); letter-spacing:.2em;
  text-transform:uppercase; color:var(--leise)}   /* 6.67:1 */

.menue{display:flex; gap:2px}
.menue a{font:500 15px/1 var(--schrift); color:var(--text); text-decoration:none;
  padding:10px 14px; border-radius:var(--pille)}
.menue a:hover{background:var(--flaeche); color:var(--tinte)}

.burger{display:none; width:48px; height:48px; background:none;
  border:1px solid var(--rahmen); border-radius:var(--pille);
  cursor:pointer; padding:0; align-items:center; justify-content:center;
  flex-direction:column; gap:5px}
.burger i{display:block; width:19px; height:2px; background:var(--tinte)}

/* ── Knoepfe: Pillen ─────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  padding:15px 28px; border-radius:var(--pille);
  border:1px solid transparent;
  font:700 15px/1 var(--schrift); text-decoration:none; cursor:pointer;
  background:var(--cta); color:var(--hg);            /* 19.01:1 — gerechnet */
  transition:background .25s, color .25s, transform .25s, border-color .25s;
}
.knopf:hover{background:#D9DEDD; transform:translateY(-2px)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}
/* Leere Pille: der Rahmen ist hier das Bedienelement, deshalb --rahmen und
   nicht --linie. 4.10:1 auf dem Grund, 3.54:1 auf der Flaeche. */
.knopf-leer{background:transparent; color:var(--tinte); border-color:var(--rahmen)}
.knopf-leer:hover{background:rgba(242,244,243,.08); border-color:var(--tinte)}

/* ── Buehne: Vollbild mit Ueberlagerung ───────────────────────────────────
   Das Bild liegt hinter dem Text, nicht daneben. Damit die Schrift auf JEDEM
   Bildausschnitt lesbar bleibt, liegt ueber dem Foto ein Verlauf, der nach
   unten hin fast die Hintergrundfarbe erreicht — die gemessenen Werte oben
   gelten deshalb auch hier. Zusaetzlich ein Farbschleier, der das Foto in den
   Blauton der Seite zieht. */
.buehne{position:relative; isolation:isolate; margin-top:-82px; padding-top:82px}
.buehne .foto{position:absolute; inset:0; z-index:-2; margin:0; overflow:clip}
.buehne .foto img{width:100%; height:100%; object-fit:cover}
/* Zwei Verlaufsschichten uebereinander. Die Zahl, auf die es ankommt, ist die
   RESTdurchlaessigkeit dort, wo Schrift steht: unten links bleiben
   (1−0,96)·(1−0,88) ≈ 0,5 % des Fotos uebrig — der Grund ist dort also
   praktisch die Hintergrundfarbe, und die gemessenen Kontrastwerte des
   Marken-Kontrakts gelten unveraendert. Oben rechts darf das Foto offen
   bleiben; dort steht nichts. */
.buehne::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right,  rgba(11,17,20,.96) 0%,  rgba(11,17,20,.92) 46%,
                               rgba(11,17,20,.34) 100%),
    linear-gradient(to bottom, rgba(11,17,20,.62) 0%,  rgba(11,17,20,.18) 32%,
                               rgba(11,17,20,.84) 64%, rgba(11,17,20,.97) 100%);
}
.buehne .wrap{
  position:relative; min-height:clamp(560px, 84vh, 800px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(64px, 9vw, 128px);
}
.buehne h1{
  font-size:clamp(40px, 7vw, 92px); font-weight:800; max-width:16ch;
  margin-bottom:26px; letter-spacing:-.045em;
}
.buehne h1 em{font-style:normal; font-weight:300; color:var(--text)}
.buehne .lead{font-size:clamp(18px, 1.7vw, 22px); max-width:46ch; color:var(--text)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.buehne .ort{
  margin-top:38px; padding-top:18px; border-top:1px solid var(--linie);
  font:600 12px/1.6 var(--schrift); letter-spacing:.18em; text-transform:uppercase;
  color:var(--leise);
}

/* ── Merkband: drei Saetze, nur durch Haarlinien getrennt ────────────────── */
.merkband{border-block:1px solid var(--linie)}
.merkband ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.merkband li{padding:clamp(30px,3.4vw,46px) clamp(20px,2.6vw,40px);
  border-left:1px solid var(--linie)}
.merkband li:first-child{border-left:0; padding-left:0}
.merkband li:last-child{padding-right:0}
.merkband b{display:block; font-size:19px; font-weight:700; color:var(--tinte);
  letter-spacing:-.02em; margin-bottom:8px}
.merkband span{display:block; font-size:16px; color:var(--text)}

/* ── Abschnitt ───────────────────────────────────────────────────────────── */
.blk{padding:var(--luft) 0}
/* Kapitelkopf: Ueberschrift gross und allein, Einordnung darunter eingerueckt.
   In Entwurf 2 stehen beide nebeneinander — hier untereinander, damit die
   Ueberschrift die ganze Breite bekommt. */
.kapitel{margin-bottom:clamp(38px,4.6vw,66px); max-width:940px}
.kapitel h2{font-size:clamp(32px,5vw,60px); font-weight:800; letter-spacing:-.04em}
.kapitel p{margin:22px 0 0 clamp(0px,6vw,90px); font-size:18px; max-width:52ch}

/* ── Leistungen: Akkordeon ───────────────────────────────────────────────
   Acht Zeilen, von denen immer nur eine offen sein muss. Das passt zu einer
   Seite, die bewusst wenig zeigt. `<details>` bringt das Auf und Zu von Haus
   aus mit — Tastatur, Vorleser und Ohne-JS-Fall inklusive. Das Zeichen rechts
   ist ein Plus, das sich zum Minus dreht; es traegt die volle Textfarbe, damit
   der Zustand nicht allein an einer zarten Linie haengt. */
.leiste{border-top:1px solid var(--linie)}
.leiste details{border-bottom:1px solid var(--linie)}
.leiste summary{
  display:flex; align-items:baseline; gap:clamp(16px,3vw,40px);
  padding:clamp(24px,2.8vw,34px) 0; cursor:pointer; list-style:none;
  transition:padding-left .35s cubic-bezier(.16,1,.3,1);
}
.leiste summary::-webkit-details-marker{display:none}
.leiste summary:hover{padding-left:10px}
.leiste .nr{font:700 13px/1.6 var(--schrift); letter-spacing:.16em;
  color:var(--leise); flex:none; width:34px}   /* 6.67:1 */
.leiste h3{
  flex:1 1 auto; font-size:clamp(21px,2.6vw,32px); font-weight:600;
  letter-spacing:-.03em;
}
.leiste .zeichen{
  flex:none; width:26px; height:26px; position:relative; align-self:center;
}
.leiste .zeichen::before,
.leiste .zeichen::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--tinte);
  transform:translate(-50%,-50%); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.leiste .zeichen::before{width:18px; height:2px}
.leiste .zeichen::after{width:2px; height:18px}
.leiste details[open] .zeichen::after{transform:translate(-50%,-50%) scaleY(0)}
.leiste .antw{
  padding:0 0 clamp(26px,3vw,38px) calc(34px + clamp(16px,3vw,40px));
  max-width:76ch;
}
.leiste .antw p{margin:0; font-size:17px}
.leiste .fuer{
  display:block; margin-top:14px; font:600 12px/1.6 var(--schrift);
  letter-spacing:.16em; text-transform:uppercase; color:var(--leise);
}

/* ── Verguetung: Kontobogen ──────────────────────────────────────────────
   Links die Merkspalte (worum es geht), rechts der Satz dazu. Kein Kasten,
   keine Rundung — nur eine Haarlinie zwischen den Posten. */
.bogen{border-top:1px solid var(--linie)}
.zeile{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(18px,4vw,64px); padding:clamp(28px,3.4vw,44px) 0;
  border-bottom:1px solid var(--linie); align-items:start;
}
.zeile .marke-links{
  font-size:clamp(20px,2.2vw,26px); font-weight:700; color:var(--tinte);
  letter-spacing:-.03em;
}
.zeile .wert{
  display:block; margin-top:10px; font-size:clamp(26px,3.4vw,40px);
  font-weight:300; color:var(--best); letter-spacing:-.03em;   /* 8.02:1 */
}
.zeile p{margin:0; font-size:17px}
.fund{
  display:block; margin-top:14px; font-size:14px; line-height:1.7;
  color:var(--leise);                                          /* 6.67:1 */
}
/* Das Blauband: die einzige grosse Farbflaeche der Seite. Weiss darauf 9.34:1,
   der gedaempfte Teil 6.25:1 — beides gerechnet. */
.blauband{
  background:var(--blau); color:#fff; margin-top:clamp(28px,3.4vw,44px);
  padding:clamp(30px,3.6vw,48px) clamp(24px,3.4vw,48px);
}
.blauband b{display:block; font-size:clamp(21px,2.4vw,28px); font-weight:700;
  color:#fff; letter-spacing:-.03em; margin-bottom:12px}
.blauband p{margin:0; font-size:17px; color:var(--blau-leise); max-width:74ch}
.blauband a{color:#fff; text-underline-offset:4px}

/* ── Kanzlei: Bild ganz links bis an den Rand, Text rechts ───────────────── */
.haus .zwei{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,80px); align-items:center;
}
.haus img{width:100%; height:auto}
.haus h2{font-size:clamp(30px,4.2vw,50px); font-weight:800; margin-bottom:22px;
  letter-spacing:-.04em}
.zitat{
  margin:34px 0 0; padding-top:26px; border-top:1px solid var(--linie);
  font-size:clamp(19px,2vw,23px); font-weight:300; line-height:1.5;
  color:var(--tinte); letter-spacing:-.02em;
}
.zitat cite{display:block; margin-top:16px; font:600 12px/1.6 var(--schrift);
  letter-spacing:.18em; text-transform:uppercase; color:var(--leise);
  font-style:normal}

/* ── Einblick: Wischleiste ───────────────────────────────────────────────
   Bewusst KEIN Raster. Der Streifen ist breiter als die Bahn, die letzte
   sichtbare Kachel wird angeschnitten — daran sieht man ohne Beschriftung,
   dass es seitlich weitergeht. Ohne vw gerechnet: vw zaehlt den Rollbalken
   mit und liesse die Seite waagerecht ueberlaufen. */
.wischen{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(74%, 420px);
  gap:clamp(12px,1.6vw,20px); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding-bottom:18px; scrollbar-width:thin;
}
.wischen figure{margin:0; scroll-snap-align:start; background:var(--flaeche);
  overflow:clip}
.wischen img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3}
.wisch-hinweis{
  margin-top:18px; font-size:14px; color:var(--leise);
  display:flex; align-items:center; gap:10px;
}
.wisch-hinweis svg{width:16px; height:16px; fill:currentColor; flex:none}

/* ── Fragen: offene Liste, nur Haarlinien ────────────────────────────────
   In Entwurf 1 ist das ein Akkordeon, in Entwurf 2 sind es Karten. Hier steht
   alles offen untereinander: Frage gross, Antwort eingerueckt daneben. */
.fragen-liste{border-top:1px solid var(--linie)}
.fragen-liste > div{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(18px,4vw,64px); padding:clamp(28px,3.4vw,44px) 0;
  border-bottom:1px solid var(--linie); align-items:start;
}
.fragen-liste h3{font-size:clamp(19px,2vw,24px); font-weight:700;
  letter-spacing:-.03em}
.fragen-liste p{margin:0; font-size:17px}

/* ── Kontakt: eine dunkle Flaeche, alles darin ───────────────────────────
   Formular oben, darunter — in derselben Flaeche, getrennt durch eine
   Haarlinie — die Direktangaben. In Entwurf 1 stehen beide nebeneinander,
   in Entwurf 2 mittig unter einer riesigen Ueberschrift. */
.tafel-dunkel{
  background:var(--flaeche); border:1px solid var(--linie);
  padding:clamp(28px,4vw,64px);
}
form{max-width:none}
.feld{display:block; margin-bottom:20px}
.feld label{
  display:block; font:700 12px/1 var(--schrift); letter-spacing:.16em;
  text-transform:uppercase; color:var(--leise); margin-bottom:10px;
}
.feld input,.feld select,.feld textarea{
  width:100%; background:var(--tief); color:var(--tinte);
  border:1px solid var(--rahmen);                    /* 3.90:1 auf Tief */
  border-radius:var(--kante); padding:15px 16px;
  font:400 17px/1.5 var(--schrift);
}
.feld textarea{min-height:150px; resize:vertical}
.feld input:focus-visible,.feld select:focus-visible,.feld textarea:focus-visible{
  outline:3px solid var(--best); outline-offset:2px; border-color:var(--best);
}
.zweispalt{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(16px,2.4vw,28px)}
.formfuss{display:flex; flex-wrap:wrap; gap:20px 30px; align-items:flex-start;
  margin-top:10px}
.formfuss .knopf{flex:none}
.hinw{flex:1 1 300px; margin:0; font-size:14px; line-height:1.7;
  color:var(--leise)}                                /* 5.76:1 auf Flaeche */
.hinw b{color:var(--tinte); font-weight:700}

.direkt{
  margin-top:clamp(30px,3.6vw,48px); padding-top:clamp(28px,3.4vw,40px);
  border-top:1px solid var(--linie);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:clamp(20px,2.6vw,34px);
}
/* Nur die aeussere Zeile ist eine Reihe (Zeichen neben Text). Der innere
   Kasten bleibt ein Block, sonst stuenden Wert und Hinweis nebeneinander. */
.direkt > div{display:flex; gap:14px; align-items:flex-start}
.direkt > div > div{min-width:0}
.direkt svg{width:20px; height:20px; fill:var(--blau-hell); flex:none;
  margin-top:3px}                                    /* 9.83:1 auf Flaeche */
.direkt b{display:block; font-size:16px; font-weight:700; color:var(--tinte);
  letter-spacing:-.01em}
.direkt b a{text-decoration:none}
.direkt b a:hover{text-decoration:underline}
.direkt small{display:block; margin-top:5px; font-size:14px; line-height:1.6;
  color:var(--leise)}

/* ── Fuss ────────────────────────────────────────────────────────────────── */
.fuss{border-top:1px solid var(--linie); padding:clamp(48px,5vw,72px) 0 34px}
.fuss-gitter{display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,3.4vw,52px)}
.fuss .marke{font-size:23px; margin:0 0 14px}
.fuss p{font-size:15px; color:var(--text); max-width:40ch; margin:0}
.fuss h3{font:700 12px/1 var(--schrift); letter-spacing:.2em;
  text-transform:uppercase; color:var(--leise); margin-bottom:16px}
.fuss li{margin-bottom:9px; font-size:15px}
.fuss li a{text-decoration:none}
.fuss li a:hover{color:var(--tinte); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(38px,4vw,58px); padding-top:22px;
  border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:13px; color:var(--leise);
}

/* ── Daumenleiste (nur Handy) ────────────────────────────────────────────── */
.daumen{display:none}

/* ── Rechtsseiten ────────────────────────────────────────────────────────── */
.recht{padding:clamp(46px,5vw,80px) 0 var(--luft)}
.recht h1{font-size:clamp(32px,4.6vw,52px); font-weight:800; margin-bottom:16px}
.recht h2{font-size:clamp(21px,2.2vw,27px); font-weight:700;
  margin:clamp(34px,3.6vw,52px) 0 14px}
.recht h3{font-size:19px; font-weight:700; margin:26px 0 10px}
.recht p,.recht li{font-size:17px; max-width:76ch}
.recht ul{list-style:disc; padding-left:22px; margin:0 0 1em}
.recht li{margin-bottom:7px}
.recht a{color:var(--blau-hell); text-underline-offset:3px}  /* 11.39:1 */
.recht dl{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:8px 26px; margin:0 0 1em; max-width:76ch}
.recht dt{font-weight:700; color:var(--tinte)}
.recht dd{margin:0}
.recht .stand{margin-top:clamp(38px,4vw,58px); padding-top:20px;
  border-top:1px solid var(--linie); font-size:14px; color:var(--leise)}
.recht .zurueck{display:inline-flex; align-items:center; gap:8px;
  margin-bottom:26px; font:600 14px/1 var(--schrift); color:var(--text);
  text-decoration:none}
.recht .zurueck:hover{color:var(--tinte)}

/* ── Schmaler ────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .merkband ul{grid-template-columns:minmax(0,1fr)}
  .merkband li{border-left:0; border-top:1px solid var(--linie);
    padding-inline:0}
  .merkband li:first-child{border-top:0}
  .haus .zwei{grid-template-columns:minmax(0,1fr)}
  .fuss-gitter{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}

@media (max-width:860px){
  .menue{
    position:fixed; inset:82px 0 auto; background:var(--hg);
    border-bottom:1px solid var(--linie); flex-direction:column; gap:0;
    padding:10px 24px 22px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:15px 0; border-radius:0; border-bottom:1px solid var(--linie);
    font-size:17px}
  .menue a:hover{background:none}
  .burger{display:flex}
  .kopf .knopf{display:none}
  .zeile{grid-template-columns:minmax(0,1fr); gap:14px}
  .fragen-liste > div{grid-template-columns:minmax(0,1fr); gap:12px}
  .kapitel p{margin-left:0}
}

@media (max-width:600px){
  body{font-size:17px}
  .zweispalt{grid-template-columns:minmax(0,1fr)}
  .wischen{grid-auto-columns:min(86%, 340px)}
  .recht dl{grid-template-columns:minmax(0,1fr); gap:2px}
  .recht dd{margin-bottom:12px}
  .leiste .antw{padding-left:0}
  /* Daumenleiste: zwei Pillen, fest am unteren Rand. */
  .daumen{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(11,17,20,.94); border-top:1px solid var(--linie);
    backdrop-filter:blur(10px);
  }
  .daumen .knopf{flex:1; padding:14px 10px; font-size:15px}
  body{padding-bottom:84px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz)
   Nachtbuero bleibt auch hier dunkel und kantig. Anders als bei Kontor und
   Bilanz traegt die Gliederung nicht die Linie und nicht die Karte, sondern
   der Abstand: viel Luft zwischen den Abschnitten, eine Haarlinie als
   leiser Nachweis, dass ein neuer Abschnitt beginnt.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{max-width:70ch; padding:clamp(54px,7vw,104px) 0 clamp(24px,3vw,38px)}
.rechts-kopf h1{font-size:clamp(34px,5.4vw,64px); font-weight:800;
  letter-spacing:-.04em; margin-bottom:20px}
.rechts-kopf .lead{max-width:58ch; font-size:18px; color:var(--text); margin:0}

/* Deutsche Rechtsbegriffe sind lang: „Datenschutzerklaerung",
   „Umsatzsteuer-Identifikationsnummer", „Verbraucherstreitbeilegungsgesetz".
   Auf einem 375px-Bildschirm passt so ein Wort in keine Zeile und wuerde sonst
   ueber den Rand hinausgeschoben — der Text waere abgeschnitten. hyphens trennt
   nach den Regeln der Sprache (lang="de" steht im html-Tag, sonst greift es
   nicht), overflow-wrap ist das Netz darunter fuer Browser ohne Trennmuster.
   Beides vererbt sich, die eine Regel auf dem Behaelter deckt alle Absaetze,
   Listen und Adressen darin ab. */
.rechts-kopf h1,.rechtstext{hyphens:auto; overflow-wrap:break-word}
.rechtstext{max-width:70ch; padding-bottom:clamp(60px,7vw,110px)}
.rechtstext section{padding:34px 0; border-top:1px solid var(--linie)}
.rechtstext h2{font-size:clamp(21px,2.4vw,28px); font-weight:800;
  letter-spacing:-.025em; color:var(--tinte); margin-bottom:14px}
.rechtstext h3{font-size:16px; font-weight:700; color:var(--tinte); margin:26px 0 8px}
.rechtstext p{color:var(--text)}                        /* 8.30:1 auf HG */
.rechtstext p + p{margin-top:13px}
.rechtstext ul{list-style:none; margin:14px 0}
.rechtstext li{position:relative; padding:7px 0 7px 24px; color:var(--text)}
.rechtstext li::before{
  content:""; position:absolute; left:0; top:1.1em;
  width:12px; height:1px; background:var(--blau-hell);
}
.rechtstext address{font-style:normal; line-height:1.8; color:var(--text)}
.rechtstext dl{margin:14px 0}
.rechtstext dt{font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leise); margin-top:18px}  /* 6.67:1 */
.rechtstext dd{margin-left:0; margin-top:6px; color:var(--text)}
.rechtstext strong{color:var(--tinte); font-weight:700}
.rechtstext a{color:var(--blau-hell)}                  /* 11.39:1 auf HG */

.rechts-hinweis{
  background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--blau-hell); border-radius:var(--kante);
  padding:24px 26px;
}
.rechts-hinweis b{display:block; font-size:17px; font-weight:800;
  letter-spacing:-.02em; color:var(--tinte); margin-bottom:9px}
.rechts-hinweis p{margin:0; font-size:15px; color:var(--text)}   /* 7.16:1 */

/* Muss ".rechtstext .zurueck" heissen: die Linkregel oben ist spezifischer
   und faerbte den Knopftext sonst blau statt weiss. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:10px; margin-top:36px;
  padding:15px 28px; border:1px solid var(--rahmen);       /* 4.10:1 — UI */
  border-radius:var(--pille); background:transparent;
  font-size:15px; font-weight:700; color:var(--tinte); text-decoration:none;
  transition:border-color .25s, background .25s;
}
.rechtstext .zurueck:hover{border-color:var(--tinte); background:var(--flaeche)}