/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 2 · „Bilanz" — Steuerkanzlei Ahlbrecht
   ---------------------------------------------------------------------------
   Haltung: ein Auswertungsbogen, kein Aktendeckel. Kuehles Blaugrau, eine
   geteilte Buehne in Petrol, Leistungen als echte TABELLE, Zahlen in einer
   Schreibmaschinenschrift und ueberall Ziffern gleicher Breite
   (tabular-nums), damit Betraege untereinander stehen wie in einer Spalte.

   Der Unterschied zu Entwurf 1 steckt nicht in der Farbe, sondern im Bau:
     Buehne     geteilte Flaeche statt zwei Spalten auf Papier
     Leistungen Tabelle statt nummerierter Reihe
     Verguetung Rechnungsbogen mit Betragsspalte statt dreier Kaesten
     Galerie    festes 3x2-Raster statt Mauerwerk
     Fragen     immer offene Karten statt Akkordeon
     Kontakt    Formular mittig unter grosser Ueberschrift statt daneben
     Kanten     10-14px statt 2px, Fuss dunkel statt hell

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

/* ── Marken-Kontrakt ─────────────────────────────────────────────────────── */
:root{
  /* Flaechen */
  --hg:        #F4F7F8;   /* Grundflaeche der Seite                          */
  --flaeche:   #FFFFFF;   /* Karten, Tabelle, Formular                       */
  --hg-tief:   #E8EEF1;   /* abgesetzte Baender                              */

  /* Schrift */
  --tinte:     #0C1C2A;   /* 16.05:1 auf HG · 17.28:1 auf Weiss              */
  --text:      #4C6172;   /*  5.98:1 auf HG ·  6.44:1 auf Weiss              */
  --leise:     #516777;   /*  5.48:1 auf HG · 5.90:1 auf Weiss ·
                              5.04:1 auf HG-tief. Der dritte Wert ist der
                              entscheidende: Tabellenkopf und Kontaktband
                              liegen auf HG-tief, und dort war ein helleres
                              Grau vorher unter 4.5:1.                       */

  /* Linien */
  --linie:     #DCE5EA;   /*  1.19:1 — reine Zierlinie, nie Textfarbe        */
  --rahmen:    #6E8CA0;   /*  3.55:1 auf Weiss · 3.29:1 auf HG.
                              Rahmen von Eingabefeldern und leeren Knoepfen.
                              WCAG 1.4.11 verlangt fuer Bedienelemente 3:1 —
                              eine zarte Haarlinie erfuellt das nicht.       */

  /* Farbe */
  --petrol:    #0B4F6C;   /*  8.30:1 auf HG · 8.94:1 auf Weiss.
                              Traegt Weiss mit 8.94:1.                       */
  --petrol-tief:#093F57;  /* Hover — Weiss darauf 11.29:1                    */
  --petrol-hell:#A8C9D8;  /*  5.11:1 AUF Petrol — gedaempfter Text im Dunkeln*/
  --bilanz:    #9DBE10;   /* nur FLAECHE: Tinte darauf misst 8.07:1.
                              Als Schrift auf hellem Grund waeren es 1.99:1  */
  --bilanz-tief:#8CAA0E;  /* nur Hover-FLAECHE — Tinte darauf 6.48:1         */
  --gruen-text:#566C06;   /*  5.51:1 auf HG · 5.93:1 auf Weiss · 5.06:1 auf
                              HG-tief. Die schreibbare Gruenstufe: ueberall
                              dort, wo Gruen als Schrift auftritt.           */
  --bilanz-hell:#B0D42A;  /*  5.23:1 auf Petrol · 10.12:1 auf Tinte          */
  --best:      #19703E;   /*  5.69:1 auf HG · 6.13:1 auf Weiss               */

  /* Fuss (dunkel) */
  --fuss-hg:   #0C1C2A;
  --fuss-leise:#9BAEBA;   /*  7.54:1 auf Fuss-Hintergrund                    */
  --fuss-linie:#2A3C4B;   /* Zierlinie im Dunkeln                            */

  /* Schriften */
  --anzeige: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Mass */
  --radius:       12px;   /* Bilanz rundet spuerbar, aber nicht verspielt    */
  --radius-klein:  8px;
  --bahn:  1180px;
  --luft:  clamp(58px, 7vw, 108px);
}

/* ── 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:400 17px/1.7 var(--sans);
  /* Ziffern gleicher Breite — der Kern dieses Entwurfs. */
  font-variant-numeric:tabular-nums;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@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; font-family:var(--anzeige); color:var(--tinte);
  font-weight:700; line-height:1.15; letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--petrol); outline-offset:3px; border-radius:3px}

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

/* Sprunglink: erst sichtbar, wenn er den Fokus bekommt. */
.nur-vorleser{
  position:absolute; left:14px; top:-60px; z-index:99;
  background:var(--petrol); color:#fff; padding:11px 18px; text-decoration:none;
  border-radius:var(--radius-klein); font:600 15px/1 var(--sans); transition:top .18s;
}
.nur-vorleser:focus{top:14px}

/* Text, der nur vorgelesen wird — z. B. Spaltennamen in der Leistungstabelle,
   wenn die Kopfzeile auf schmalen Bildschirmen wegfaellt. */
.still{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Vorspann-Zeile: Schreibmaschine, weil sie in diesem Entwurf ueberall die
   Rolle der Ordnungsnummer hat. */
.marker{
  display:block; font:400 12px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.marker::before{content:"— "; color:var(--gruen-text)}
/* Auf Petrol waere --leise unlesbar (rund 1.5:1). Im Dunkeln hellt die
   Vorspann-Zeile deshalb auf: 5.11:1 bzw. 5.23:1 — beides gerechnet. */
.dunkel .marker{color:var(--petrol-hell)}
.dunkel .marker::before{color:var(--bilanz-hell)}

/* ── Einblenden ──────────────────────────────────────────────────────────── */
.js .zeig{opacity:0; transform:translateY(18px)}
.js .zeig[data-da="1"]{
  opacity:1; transform:none;
  transition:opacity .55s ease calc(var(--i,0) * 65ms),
             transform .55s ease calc(var(--i,0) * 65ms);
}
@media (prefers-reduced-motion: reduce){
  .js .zeig{opacity:1 !important; transform:none !important}
}

/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{background:var(--petrol); color:#fff; font:400 14px/1.5 var(--sans)}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  padding:9px 0}
.entwurf-band b{font-family:var(--anzeige); font-weight:700}
.entwurf-band span{flex:1 1 320px; color:var(--petrol-hell)}
.entwurf-band a{color:#fff; text-underline-offset:3px}

/* ── Kopf: durchgehend weiss mit fester Trennlinie ───────────────────────── */
.kopf{position:sticky; top:0; z-index:40; background:var(--flaeche);
  border-bottom:1px solid var(--linie)}
.kopf[data-gescrollt="1"]{box-shadow:0 1px 14px rgba(12,28,42,.07)}
.kopf .wrap{display:flex; align-items:center; gap:24px; min-height:76px}

.marke{display:flex; align-items:baseline; gap:9px; text-decoration:none;
  margin-right:auto; font:700 24px/1 var(--anzeige); color:var(--tinte);
  letter-spacing:-.025em}
.marke small{font:400 11px/1 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--leise)}

.menue{display:flex; gap:4px}
.menue a{font:500 15px/1 var(--sans); color:var(--text); text-decoration:none;
  padding:9px 13px; border-radius:var(--radius-klein)}
.menue a:hover{background:var(--hg-tief); color:var(--tinte)}

.burger{display:none; width:46px; height:46px; background:none;
  border:1px solid var(--rahmen); border-radius:var(--radius-klein);
  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);
  border-radius:2px}

/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  padding:14px 24px; border-radius:var(--radius-klein);
  border:1px solid transparent;
  font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer;
  background:var(--petrol); color:#fff;              /* 8.94:1 — gerechnet */
  transition:background .18s, transform .18s;
}
.knopf:hover{background:var(--petrol-tief); transform:translateY(-1px)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}
.knopf-leer{background:transparent; color:var(--tinte); border-color:var(--rahmen)}
.knopf-leer:hover{background:var(--hg-tief); border-color:var(--petrol)}
.knopf-gruen{background:var(--bilanz); color:var(--tinte)}  /* 8.07:1 */
.knopf-gruen:hover{background:var(--bilanz-tief)}
/* Im Dunkeln kehrt sich der Hauptknopf um. */
.dunkel .knopf{background:var(--bilanz); color:var(--tinte)}
.dunkel .knopf:hover{background:var(--bilanz-tief)}
.dunkel .knopf-leer{background:transparent; color:#fff; border-color:var(--petrol-hell)}
.dunkel .knopf-leer:hover{background:rgba(255,255,255,.09)}
.dunkel :focus-visible{outline-color:var(--bilanz-hell)}

/* ── Buehne: geteilte Flaeche ─────────────────────────────────────────────
   Links Petrol, rechts das Bild — beide laufen bis an den Rand des Fensters.
   Der linke Innenabstand rechnet sich aus der Bahnbreite, damit der Text auf
   derselben Kante beginnt wie der Rest der Seite. `100%` ist hier die Breite
   des Elements (ohne Rollbalken); `max()` faengt schmale Fenster ab, in denen
   die Rechnung negativ wuerde. */
.buehne{background:var(--petrol); color:#fff}
.buehne .split{
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  padding-inline-start:max(22px, calc((100% - var(--bahn)) / 2));
}
.buehne .text{
  padding-block:clamp(52px,6.4vw,96px);
  padding-inline-end:clamp(26px,3.6vw,58px);
  align-self:center;
}
.buehne h1{font-size:clamp(36px,5.2vw,62px); color:#fff; margin-bottom:22px;
  letter-spacing:-.03em}
.buehne h1 em{font-style:normal; color:var(--bilanz-hell)}  /* 5.23:1 */
.buehne .lead{font-size:clamp(17px,1.5vw,20px); max-width:44ch;
  color:var(--petrol-hell)}                                  /* 5.11:1 */
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.buehne .bild{margin:0; position:relative}
.buehne .bild img{width:100%; height:100%; min-height:340px; object-fit:cover}
/* Die Bildunterschrift sitzt oben, nicht unten: unten schieben sich die
   Streifen-Karten ueber das Bild und wuerden sie verdecken. */
.buehne .bild figcaption{
  position:absolute; left:16px; top:16px; background:rgba(12,28,42,.86);
  color:#fff; padding:8px 14px; border-radius:var(--radius-klein);
  font:400 12px/1.4 var(--mono); letter-spacing:.05em; max-width:calc(100% - 32px);
}

/* ── Streifen: drei Karten, die in die Buehne hineinragen ────────────────── */
.streifen{position:relative; z-index:2; margin-top:clamp(-52px,-4vw,-30px)}
.streifen ul{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px)}
.streifen li{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:22px 22px 24px; position:relative;
  overflow:hidden}
.streifen li::before{content:""; position:absolute; left:0; top:0;
  width:56px; height:4px; background:var(--bilanz)}
.streifen .nr{display:block; font:700 12px/1 var(--mono); letter-spacing:.12em;
  color:var(--leise); margin-bottom:12px}
.streifen b{display:block; font:700 18px/1.3 var(--anzeige); color:var(--tinte);
  letter-spacing:-.015em; margin-bottom:6px}
.streifen span{display:block; font-size:15px; color:var(--text)}

/* ── Abschnitt ───────────────────────────────────────────────────────────── */
.blk{padding:var(--luft) 0}
/* Kapitelkopf zweispaltig: Ueberschrift links, Einordnung rechts. */
.kapitel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,56px); align-items:end; margin-bottom:clamp(28px,3.6vw,48px)}
.kapitel h2{font-size:clamp(30px,3.8vw,46px)}
.kapitel p{font-size:17px; margin:0; max-width:52ch}

/* ── Leistungen: echte Tabelle ────────────────────────────────────────────
   Warum eine Tabelle und nicht eine Liste: hier stehen fuer jede Leistung
   dieselben drei Angaben nebeneinander — das ist genau der Fall, fuer den
   Tabellen gemacht sind. Damit die Zeilen auf schmalen Bildschirmen als
   Bloecke untereinander stehen duerfen, ohne die Bedeutung zu verlieren,
   tragen die Tabellenteile im HTML ihre Rollen ausdruecklich (role="table",
   role="row", …). Ohne das wuerde `display:block` die Tabelle fuer Vorleser
   in eine Ansammlung loser Absaetze verwandeln. Die Spaltennamen stecken
   zusaetzlich als stille Beschriftung in jeder Zelle. */
.tafel{width:100%; border-collapse:separate; border-spacing:0;
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); overflow:hidden}
.tafel thead th{
  background:var(--hg-tief); text-align:left; vertical-align:bottom;
  font:400 12px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--leise); padding:14px 18px; border-bottom:1px solid var(--linie);
}
.tafel td,.tafel tbody th{padding:20px 18px; vertical-align:top;
  border-bottom:1px solid var(--linie); text-align:left}
.tafel tbody tr:last-child td,
.tafel tbody tr:last-child th{border-bottom:0}
.tafel tbody tr:hover td,
.tafel tbody tr:hover th{background:var(--hg)}
.sp-nr{width:66px; font:700 15px/1.6 var(--mono); color:var(--gruen-text);
  white-space:nowrap}
.tafel tbody th{width:27%; font:700 19px/1.35 var(--anzeige); color:var(--tinte);
  letter-spacing:-.015em}
.tafel .was{font-size:16px}
.sp-fuer{width:24%; font-size:15px; color:var(--leise)}

/* ── Verguetung: Rechnungsbogen mit Betragsspalte ────────────────────────── */
.rechnung{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); overflow:hidden}
.posten{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,190px);
  gap:clamp(16px,3vw,40px); align-items:start;
  padding:clamp(22px,2.6vw,30px) clamp(20px,3vw,36px);
  border-bottom:1px solid var(--linie)}
.posten h3{font-size:20px; margin-bottom:8px}
.posten p{margin:0; font-size:16px}
.posten .fund{display:block; margin-top:10px; font:400 13px/1.6 var(--mono);
  color:var(--leise)}
.betrag{text-align:right; font-family:var(--mono); color:var(--tinte)}
.betrag b{display:block; font-size:clamp(22px,2.6vw,30px); font-weight:700;
  letter-spacing:-.02em; line-height:1.2}
.betrag small{display:block; margin-top:7px; font:400 12px/1.5 var(--sans);
  letter-spacing:.06em; text-transform:uppercase; color:var(--leise)}
.schlusszeile{background:var(--bilanz); color:var(--tinte);
  padding:clamp(20px,2.4vw,26px) clamp(20px,3vw,36px); font-size:16px}
.schlusszeile p{margin:0}
.schlusszeile b{font-family:var(--anzeige); font-weight:700}
.schlusszeile a{color:var(--tinte); text-underline-offset:3px}  /* 8.07:1 */

/* ── Kanzlei: breites Bild oben, Text darunter, Zitat in Petrol ──────────── */
.haus .bandbild{border-radius:var(--radius); overflow:hidden; margin-bottom:clamp(26px,3.4vw,44px)}
.haus .bandbild img{width:100%; aspect-ratio:21/9; object-fit:cover}
.haus .zwei{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,4vw,56px); align-items:start}
.haus h2{font-size:clamp(28px,3.4vw,42px)}
.haus .zwei p:last-child{margin-bottom:0}
.zitat{margin:clamp(26px,3.4vw,44px) 0 0; background:var(--petrol); color:#fff;
  border-radius:var(--radius); padding:clamp(28px,3.6vw,46px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(16px,2.4vw,30px)}
.zitat .zeichen{font:700 62px/.8 var(--mono); color:var(--bilanz-hell)}
.zitat p{margin:0; font:500 clamp(19px,2.2vw,26px)/1.45 var(--anzeige);
  letter-spacing:-.015em}
.zitat cite{display:block; margin-top:16px; font:400 12px/1.4 var(--mono);
  font-style:normal; letter-spacing:.12em; text-transform:uppercase;
  color:var(--petrol-hell)}

/* ── Einblick: festes Raster ─────────────────────────────────────────────── */
.raster{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px)}
.raster figure{margin:0; border-radius:var(--radius); overflow:hidden;
  background:var(--hg-tief)}
.raster img{width:100%; aspect-ratio:3/2; object-fit:cover}

/* ── Fragen: offene Karten, kein Akkordeon ───────────────────────────────── */
.karten{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px)}
.karten article{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:clamp(22px,2.6vw,30px)}
.karten h3{font-size:19px; margin-bottom:10px}
.karten p{margin:0; font-size:16px}
.karten .fund{display:block; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--linie);
  font:400 13px/1.6 var(--mono); color:var(--leise)}

/* ── Kontakt: mittig unter grosser Ueberschrift ──────────────────────────── */
.kontakt{background:var(--hg-tief); border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.kontakt .mitte{text-align:center; max-width:62ch; margin:0 auto clamp(28px,3.6vw,44px)}
.kontakt .mitte .marker::before{content:""}
.kontakt .mitte .marker{color:var(--leise)}
.kontakt h2{font-size:clamp(34px,5vw,58px); margin-bottom:16px; letter-spacing:-.03em}
.kontakt .mitte p{margin:0; font-size:17px}

form{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:clamp(22px,3vw,38px);
  max-width:780px; margin-inline:auto}
.feld{margin-bottom:18px}
.feld label{display:block; font:600 12px/1 var(--sans); letter-spacing:.1em;
  text-transform:uppercase; color:var(--leise); margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; font:400 16px/1.5 var(--sans); color:var(--tinte);
  background:var(--flaeche); border:1px solid var(--rahmen);
  border-radius:var(--radius-klein);
}
.feld textarea{min-height:124px; resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:3px solid var(--petrol); outline-offset:1px; border-color:var(--petrol)}
.zweispalt{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:0 18px}
.formfuss .knopf{width:100%}
.hinw{margin:14px 0 0; font:400 13px/1.65 var(--sans); color:var(--leise)}

.direkt{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr));
  gap:clamp(12px,1.6vw,18px); margin-top:clamp(24px,3vw,38px)}
.direkt li{background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:20px; text-align:center}
.direkt svg{width:22px; height:22px; fill:var(--petrol); margin:0 auto 10px}
.direkt b{display:block; font:600 16px/1.4 var(--sans); color:var(--tinte);
  overflow-wrap:anywhere}
.direkt b a{text-decoration:none}
.direkt b a:hover{text-decoration:underline}
.direkt small{display:block; font-size:14px; color:var(--leise); margin-top:5px}

/* ── Fuss: dunkel ────────────────────────────────────────────────────────── */
.fuss{background:var(--fuss-hg); color:var(--fuss-leise); padding:var(--luft) 0 28px}
.fuss .marke{color:#fff; margin:0 0 14px}
.fuss .marke small{color:var(--fuss-leise)}
.fuss-gitter{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,52px)}
.fuss p{font-size:15px; max-width:42ch; margin:0}
.fuss h3{font:400 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fuss-leise); margin-bottom:16px}
.fuss li{margin-bottom:10px; font-size:15px; color:#fff}
.fuss li a{text-decoration:none; overflow-wrap:anywhere}
.fuss li a:hover{text-decoration:underline}
.fuss-unten{display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  margin-top:clamp(30px,4vw,52px); padding-top:22px;
  border-top:1px solid var(--fuss-linie); font:400 13px/1.6 var(--mono);
  color:var(--fuss-leise)}

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

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.recht{padding:clamp(36px,5vw,64px) 0 var(--luft)}
.recht .bahn{width:min(100%, 76ch); margin-inline:auto}
.recht h1{font-size:clamp(32px,4.2vw,48px); margin-bottom:12px}
.recht .stand{display:block; font:400 12px/1.5 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--leise); margin-bottom:34px}
.recht h2{font-size:clamp(22px,2.4vw,28px); margin:46px 0 14px; padding-top:24px;
  border-top:1px solid var(--linie)}
.recht h3{font-size:18px; margin:26px 0 9px}
.recht p,.recht li{font-size:16px}
.recht ul.punkte{margin:0 0 1em; padding-left:22px; list-style:disc}
.recht ul.punkte li{margin-bottom:7px}
.recht .kasten{background:var(--flaeche); border:1px solid var(--linie);
  border-left:4px solid var(--bilanz); border-radius:var(--radius-klein);
  padding:20px 22px; margin:0 0 1.3em}
.recht .kasten p:last-child{margin-bottom:0}
.recht dl{margin:0 0 1.3em; display:grid;
  grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:9px 22px}
.recht dt{font-weight:600; color:var(--tinte); font-size:16px}
.recht dd{margin:0; font-size:16px; overflow-wrap:anywhere}
.recht a{color:var(--petrol); text-underline-offset:3px}   /* 8.30:1 */
.recht .zurueck{display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; font:500 15px/1 var(--sans); color:var(--text);
  margin-bottom:26px}
.recht .zurueck:hover{color:var(--tinte)}

/* ── Schmaler ────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .buehne .split{grid-template-columns:minmax(0,1fr); padding-inline-start:0}
  .buehne .text{padding-inline:clamp(22px,4vw,40px)}
  .buehne .bild{order:-1}
  .buehne .bild img{min-height:0; aspect-ratio:16/9}
  .streifen{margin-top:clamp(24px,3vw,32px)}
  .streifen ul{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .kapitel{grid-template-columns:minmax(0,1fr); align-items:start; gap:14px}
  .haus .zwei{grid-template-columns:minmax(0,1fr)}
  .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karten{grid-template-columns:minmax(0,1fr)}
  .fuss-gitter{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}

@media (max-width:900px){
  /* Tabelle wird zur Kartenliste. Die Rollen im HTML halten die Bedeutung,
     die stillen Beschriftungen in den Zellen ersetzen die Kopfzeile. */
  .tafel{border:0; border-radius:0; background:none; overflow:visible}
  .tafel thead{display:none}
  .tafel tbody{display:block}
  .tafel tbody tr{display:block; background:var(--flaeche);
    border:1px solid var(--linie); border-radius:var(--radius);
    padding:20px 20px 22px; margin-bottom:14px; position:relative}
  .tafel tbody tr:hover td,
  .tafel tbody tr:hover th{background:none}
  .tafel td,.tafel tbody th{display:block; width:auto; padding:0;
    border-bottom:0}
  .tafel .sp-nr{margin-bottom:8px}
  .tafel tbody th{margin-bottom:8px}
  .tafel .was{margin-bottom:10px}
  /* In der Kartenansicht fehlt die Kopfzeile — dann darf die stille
     Beschriftung der Wen-Zelle sichtbar werden, sonst steht die
     Zielgruppe ohne Zusammenhang unter dem Text. */
  .tafel .sp-fuer .still{
    position:static; display:block; width:auto; height:auto; margin:0 0 2px;
    overflow:visible; clip-path:none; white-space:normal;
    font:400 12px/1.6 var(--mono); letter-spacing:.1em;
    text-transform:uppercase; color:var(--leise);
  }
  .posten{grid-template-columns:minmax(0,1fr); gap:16px}
  .betrag{text-align:left; display:flex; align-items:baseline; gap:12px}
  .betrag small{margin-top:0}
}

@media (max-width:820px){
  .menue{
    position:fixed; inset:76px 0 auto; background:var(--flaeche);
    border-bottom:1px solid var(--linie); flex-direction:column; gap:0;
    padding:8px 22px 20px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:14px 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}
  .zitat{grid-template-columns:minmax(0,1fr); gap:10px}
  .zitat .zeichen{font-size:44px}
}

@media (max-width:600px){
  body{font-size:16px}
  .raster{grid-template-columns:minmax(0,1fr)}
  .recht dl{grid-template-columns:minmax(0,1fr); gap:2px}
  .recht dd{margin-bottom:12px}
  .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:var(--flaeche); border-top:1px solid var(--linie);
  }
  .daumen .knopf{flex:1; padding:13px 10px; font-size:15px}
  body{padding-bottom:76px}
  .fuss{padding-bottom:20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz)
   Bilanz arbeitet auf der Startseite mit Karten und einer Tabelle. Das wird
   hier fortgesetzt: jeder Abschnitt ist eine eigene weisse Karte auf dem
   blaugrauen Grund — nicht, wie sonst ueblich, eine Bleiwueste mit Trennlinien.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{max-width:78ch; padding:clamp(46px,6vw,88px) 0 clamp(22px,2.8vw,34px)}
.rechts-kopf .rubrik{                                  /* wie .marker oben */
  display:block; font:400 12px/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.rechts-kopf .rubrik::before{content:"— "; color:var(--gruen-text)}
.rechts-kopf h1{font:700 clamp(32px,4.6vw,52px)/1.05 var(--anzeige);
  letter-spacing:-.025em; margin-bottom:16px}
.rechts-kopf .lead{max-width:60ch; font-size:17px; 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}

/* Etwas breiter als bei Kontor: der Text steht in Karten mit Innenabstand,
   die Zeile ist also schon durch das Kartenpolster gebremst. */
.rechtstext{max-width:78ch; padding-bottom:clamp(54px,6vw,96px);
  display:grid; gap:14px}
.rechtstext section{
  background:var(--flaeche); border:1px solid var(--linie);
  border-radius:var(--radius); padding:clamp(22px,2.6vw,32px);
}
.rechtstext h2{font:700 clamp(20px,2vw,25px)/1.2 var(--anzeige);
  letter-spacing:-.02em; color:var(--tinte); margin-bottom:12px}
.rechtstext h3{font:700 15px/1.35 var(--sans); color:var(--tinte); margin:20px 0 8px}
.rechtstext p{color:var(--text)}                       /* 6.44:1 auf Weiss */
.rechtstext p + p{margin-top:12px}
.rechtstext ul{list-style:none; margin:12px 0}
.rechtstext li{position:relative; padding:6px 0 6px 24px; color:var(--text)}
.rechtstext li::before{                        /* Kaestchen statt Punkt */
  content:""; position:absolute; left:0; top:.95em;
  width:8px; height:8px; border-radius:2px; background:var(--bilanz);
}
.rechtstext address{font-style:normal; line-height:1.75; color:var(--text)}
/* Die Angaben-Paare stehen wie in der Kontaktkarte zweispaltig — links die
   Bezeichnung in der Monoschrift, rechts der Wert. */
.rechtstext dl{margin:12px 0; display:grid;
  grid-template-columns:minmax(0,15em) minmax(0,1fr); gap:10px 22px}
.rechtstext dt{font:400 12px/1.5 var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--leise)}         /* 5.90:1 auf Weiss */
.rechtstext dd{margin-left:0; color:var(--text)}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext a{color:var(--petrol)}                      /* 8.94:1 auf Weiss */

.rechts-hinweis{
  background:var(--hg-tief); border:1px solid var(--linie);
  border-radius:var(--radius); padding:22px 24px;
}
.rechts-hinweis b{display:block; font-family:var(--anzeige); font-size:17px;
  letter-spacing:-.01em; color:var(--tinte); margin-bottom:8px}
.rechts-hinweis p{margin:0; font-size:15px; color:var(--text)}   /* 5.50:1 */

/* Muss ".rechtstext .zurueck" heissen: die Linkregel oben ist spezifischer. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  padding:14px 24px; border:1px solid var(--rahmen);      /* 3.29:1 — UI */
  border-radius:var(--radius); background:var(--flaeche);
  font:600 15px/1 var(--sans); color:var(--petrol); text-decoration:none;
  justify-self:start;
}
.rechtstext .zurueck:hover{border-color:var(--petrol); background:var(--hg-tief)}

@media (max-width:600px){
  .rechtstext dl{grid-template-columns:minmax(0,1fr); gap:3px}
  .rechtstext dd{margin-bottom:12px}
}