/* ═══════════════════════════════════════════════════════════════════════════
   Entwurf 1 · „Kontor" — Steuerkanzlei Ahlbrecht
   ---------------------------------------------------------------------------
   Haltung: ein Aktendeckel, kein Werbeprospekt. Papierton, grosse Serife,
   Haarlinien statt Schatten, Kantenradius fast null. Die Leistungen stehen
   als nummerierte Reihe untereinander wie ein Inhaltsverzeichnis.

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

/* ── Marken-Kontrakt ─────────────────────────────────────────────────────── */
:root{
  /* Flaechen */
  --papier:      #F7F4EF;   /* Grundflaeche der Seite                        */
  --flaeche:     #FFFFFF;   /* Karten, Formular, Tabellenkopf                */
  --papier-tief: #EFEAE1;   /* abgesetzte Baender                            */

  /* Schrift */
  --tinte:       #1C1B19;   /* 15.69:1 auf Papier · 17.21:1 auf Weiss        */
  --text:        #4E4B45;   /* 7.92:1 auf Papier · 8.69:1 auf Weiss          */
  --leise:       #6B675F;   /* 5.13:1 auf Papier — nur Kleingedrucktes       */

  /* Linien */
  --linie:       #E4DED4;   /* 1.22:1 — reine Zierlinie, nie Textfarbe       */
  --linie-stark: #8E7F66;   /* 3.56:1 auf Papier · 3.90:1 auf Weiss.
                               Rahmen von Bedienelementen. Absichtlich so
                               dunkel: ein Eingabefeld muss als Bedienelement
                               erkennbar sein, dafuer verlangt WCAG 1.4.11
                               mindestens 3:1 — eine zarte Haarlinie reicht
                               dafuer nicht.                                 */

  /* Farbe */
  --gruen:       #2F5D50;   /* 6.83:1 auf Papier · 7.49:1 unter Weiss        */
  --gold:        #B0862F;   /* nur FLAECHE: Tinte darauf misst 5.16:1        */
  --gold-text:   #8A681F;   /* 4.69:1 auf Papier — die schreibbare Goldstufe */
  --best:        #2F7A52;   /* 4.75:1 auf Papier — Bestaetigung              */

  /* Schriften */
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Mass */
  --radius: 2px;            /* Kontor rundet fast nicht                      */
  --bahn:   1180px;
  --luft:   clamp(56px, 7vw, 104px);
}

/* ── Grundlagen ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papier); color:var(--text);
  font:400 17px/1.68 var(--sans);
  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(--serif); color:var(--tinte); font-weight:600;
  line-height:1.14; letter-spacing:-.01em}
p{margin:0 0 1em}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--gruen); outline-offset:3px; border-radius:1px}

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

.nur-vorleser{
  position:absolute; left:12px; top:-60px; z-index:99;
  background:var(--tinte); color:#fff; padding:10px 16px; text-decoration:none;
  font:500 15px/1 var(--sans); transition:top .18s;
}
.nur-vorleser:focus{top:12px}

.rubrik{
  display:inline-block; font:600 12px/1 var(--sans);
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-text);
  margin-bottom:14px;
}

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

/* ── Entwurfs-Band ───────────────────────────────────────────────────────── */
.entwurf-band{background:var(--tinte); color:#EDE9E1; 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{color:#fff}
.entwurf-band span{flex:1 1 320px; color:#C3BDB2}
.entwurf-band a{color:#fff; text-underline-offset:3px}

/* ── Kopf ────────────────────────────────────────────────────────────────── */
.kopf{position:sticky; top:0; z-index:40; background:var(--papier);
  border-bottom:1px solid transparent; transition:border-color .2s}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
.kopf .wrap{display:flex; align-items:center; gap:24px; min-height:74px}

.marke{display:flex; flex-direction:column; text-decoration:none; margin-right:auto;
  font:600 25px/1 var(--serif); color:var(--tinte); letter-spacing:-.015em}
.marke small{font:500 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--leise); margin-top:7px}

.menue{display:flex; gap:26px}
.menue a{font:500 15px/1 var(--sans); color:var(--text); text-decoration:none;
  padding:6px 0; border-bottom:1px solid transparent}
.menue a:hover{color:var(--tinte); border-bottom-color:var(--gold)}

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

/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; gap:9px; justify-content:center;
  padding:13px 22px; border-radius:var(--radius); border:1px solid transparent;
  font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer;
  background:var(--gold); color:var(--tinte);        /* 5.16:1 — gerechnet */
  transition:background .18s, transform .18s;
}
.knopf:hover{background:#C89A3C; transform:translateY(-1px)}
.knopf svg{width:18px; height:18px; fill:currentColor; flex:none}
.knopf-leer{background:transparent; color:var(--tinte); border-color:var(--linie-stark)}
.knopf-leer:hover{background:var(--papier-tief); border-color:var(--tinte)}
.knopf-gruen{background:var(--gruen); color:#fff}      /* 7.49:1 — gerechnet */
.knopf-gruen:hover{background:#264B41}

/* ── Buehne: zwei Spalten, Bild mit hartem Rand ──────────────────────────── */
.buehne{padding:clamp(40px,6vw,78px) 0 var(--luft)}
.buehne .gitter{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(30px,4.5vw,62px); align-items:center}
.buehne h1{font-size:clamp(38px,5.6vw,68px); font-weight:600; margin-bottom:22px}
.buehne h1 em{font-style:italic; color:var(--gruen); font-weight:600}
.buehne .lead{font-size:clamp(17px,1.5vw,20px); max-width:46ch; color:var(--text)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.buehne-bild{position:relative; border:1px solid var(--linie)}
.buehne-bild img{aspect-ratio:4/3; object-fit:cover; width:100%}
.buehne-bild figcaption{
  position:absolute; left:0; bottom:0; background:var(--papier);
  border-top:1px solid var(--linie); border-right:1px solid var(--linie);
  padding:9px 15px; font:500 12px/1.4 var(--sans); color:var(--leise);
  letter-spacing:.06em; text-transform:uppercase; max-width:80%;
}

/* ── Merkband: drei Saetze mit Haarlinien ────────────────────────────────── */
.merkband{border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  background:var(--papier-tief)}
.merkband ul{display:grid; grid-template-columns:repeat(3, minmax(0,1fr))}
.merkband li{padding:26px 26px 26px 0; border-right:1px solid var(--linie)}
.merkband li:last-child{border-right:0}
.merkband li + li{padding-left:26px}
.merkband b{display:block; font:600 19px/1.3 var(--serif); color:var(--tinte); margin-bottom:5px}
.merkband span{display:block; font-size:15px; color:var(--text)}

/* ── Abschnitt ───────────────────────────────────────────────────────────── */
.blk{padding:var(--luft) 0}
.blk-kopf{max-width:60ch; margin-bottom:clamp(30px,4vw,52px)}
.blk-kopf h2{font-size:clamp(29px,3.6vw,44px); margin-bottom:16px}
.blk-kopf p{font-size:17px; margin:0}

/* ── Leistungen: nummerierte Reihe (Inhaltsverzeichnis) ──────────────────── */
.reihe{border-top:1px solid var(--linie)}
.reihe li{border-bottom:1px solid var(--linie); padding:26px 0}
.reihe .zl{display:grid; grid-template-columns:64px minmax(0,1fr) minmax(0,1.25fr);
  gap:clamp(16px,3vw,44px); align-items:start}
.reihe .nr{font:500 14px/1.5 var(--sans); color:var(--gold-text);
  font-variant-numeric:tabular-nums; letter-spacing:.08em; padding-top:5px}
.reihe h3{font-size:clamp(21px,2.1vw,26px); font-weight:600}
.reihe p{margin:0; font-size:16px}
.reihe .fuer{display:block; margin-top:8px; font:500 13px/1.5 var(--sans); color:var(--leise)}

/* ── Verguetung: gerahmter Kasten wie ein Briefbogen ─────────────────────── */
.honorar{background:var(--flaeche); border:1px solid var(--linie);
  padding:clamp(26px,3.6vw,44px)}
.honorar .gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));
  gap:clamp(22px,3vw,38px)}
.honorar h3{font-size:20px; margin-bottom:10px}
.honorar p{font-size:16px; margin:0}
.honorar .fund{display:block; margin-top:10px; font:500 13px/1.55 var(--sans); color:var(--leise)}
.honorar .kante{border-left:1px solid var(--linie); padding-left:clamp(22px,3vw,38px)}
@media (max-width:820px){ .honorar .kante{border-left:0; padding-left:0;
  border-top:1px solid var(--linie); padding-top:26px} }

/* ── Kanzlei: Bild links, Text rechts ────────────────────────────────────── */
.kanzlei .gitter{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4.5vw,60px); align-items:center}
.kanzlei img{border:1px solid var(--linie); aspect-ratio:3/4; object-fit:cover; width:100%}
.kanzlei h2{font-size:clamp(28px,3.4vw,42px); margin-bottom:18px}
.kanzlei blockquote{margin:26px 0 0; padding-left:22px; border-left:2px solid var(--gold);
  font:400 italic 20px/1.5 var(--serif); color:var(--tinte)}
.kanzlei blockquote cite{display:block; margin-top:12px; font:500 13px/1.4 var(--sans);
  font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:var(--leise)}

/* ── Galerie: Mauerwerk aus Spalten ──────────────────────────────────────── */
.mauer{columns:3; column-gap:14px}
.mauer figure{margin:0 0 14px; break-inside:avoid; border:1px solid var(--linie)}
.mauer img{width:100%}

/* ── Fragen: Haarlinien-Akkordeon ────────────────────────────────────────── */
.fragen{border-top:1px solid var(--linie); max-width:82ch}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{
  list-style:none; cursor:pointer; padding:21px 42px 21px 0; position:relative;
  font:600 18px/1.45 var(--serif); color:var(--tinte);
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:""; position:absolute; right:6px; top:29px; width:11px; height:11px;
  border-right:1.5px solid var(--gold-text); border-bottom:1.5px solid var(--gold-text);
  transform:rotate(45deg); transition:transform .22s;
}
.fragen details[open] summary::after{transform:rotate(-135deg); top:33px}
.fragen .antw{padding:0 0 22px; max-width:70ch}
.fragen .antw p:last-child{margin-bottom:0}
.fragen .antw .fund{display:block; margin-top:10px; font:500 13px/1.55 var(--sans);
  color:var(--leise)}

/* ── Kontakt: Formular neben Datenspalte ─────────────────────────────────── */
.kontakt{background:var(--papier-tief); border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.kontakt .gitter{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,56px); align-items:start}
form{background:var(--flaeche); border:1px solid var(--linie); padding:clamp(22px,3vw,34px)}
.feld{margin-bottom:17px}
.feld label{display:block; font:600 13px/1 var(--sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--leise); margin-bottom:8px}
.feld input,.feld select,.feld textarea{
  width:100%; padding:12px 14px; font:400 16px/1.5 var(--sans); color:var(--tinte);
  background:var(--papier); border:1px solid var(--linie-stark); border-radius:var(--radius);
}
.feld textarea{min-height:118px; resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:3px solid var(--gruen);
  outline-offset:1px; border-color:var(--gruen)}
.zweispalt{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:0 17px}
.formfuss{margin-top:6px}
.formfuss .knopf{width:100%}
.hinw{margin:13px 0 0; font:400 13px/1.6 var(--sans); color:var(--leise)}

.kontakt-liste li{display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--linie)}
.kontakt-liste li:last-child{border-bottom:0}
.kontakt-liste svg{width:20px; height:20px; fill:var(--gruen); flex:none; margin-top:3px}
.kontakt-liste b{display:block; font:600 16px/1.4 var(--sans); color:var(--tinte)}
.kontakt-liste b a{text-decoration:none}
.kontakt-liste b a:hover{text-decoration:underline}
.kontakt-liste small{display:block; font-size:14px; color:var(--leise); margin-top:2px}

/* ── Fuss ────────────────────────────────────────────────────────────────── */
.fuss{background:var(--papier); padding:var(--luft) 0 30px}
.fuss-gitter{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(26px,4vw,52px)}
.fuss .marke{margin:0 0 14px}
.fuss p{font-size:15px; max-width:42ch; margin:0}
.fuss h3{font:600 13px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--leise); margin-bottom:14px}
.fuss li{margin-bottom:9px; font-size:15px}
.fuss li a{text-decoration:none}
.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:20px; border-top:1px solid var(--linie);
  font-size:14px; color:var(--leise)}

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

/* ── Rechtstexte ─────────────────────────────────────────────────────────── */
.recht{padding:clamp(38px,5vw,66px) 0 var(--luft)}
.recht .bahn{width:min(100%, 74ch); margin-inline:auto}
.recht h1{font-size:clamp(31px,4vw,46px); margin-bottom:12px}
.recht .stand{font:500 13px/1.5 var(--sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--leise); margin-bottom:36px; display:block}
.recht h2{font-size:clamp(22px,2.4vw,28px); margin:44px 0 14px; padding-top:22px;
  border-top:1px solid var(--linie)}
.recht h3{font-size:19px; margin:26px 0 9px}
.recht p,.recht li{font-size:16px}
.recht ul.punkte{margin:0 0 1em; padding-left:20px; list-style:disc}
.recht ul.punkte li{margin-bottom:7px}
.recht .kasten{background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--gold); 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}
.recht a{color:var(--gruen); text-underline-offset:3px}
.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)}
@media (max-width:600px){
  .recht dl{grid-template-columns:minmax(0,1fr); gap:2px}
  .recht dd{margin-bottom:12px}
}

/* ── Schmaler ────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .buehne .gitter,
  .kanzlei .gitter,
  .kontakt .gitter{grid-template-columns:minmax(0,1fr)}
  .kanzlei img{aspect-ratio:16/10}
  .mauer{columns:2}
  .reihe .zl{grid-template-columns:48px minmax(0,1fr); }
  .reihe .zl p{grid-column:2}
  .fuss-gitter{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
}

@media (max-width:820px){
  .menue{
    position:fixed; inset:74px 0 auto; background:var(--papier);
    border-bottom:1px solid var(--linie); flex-direction:column; gap:0;
    padding:8px 20px 20px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:14px 0; border-bottom:1px solid var(--linie); font-size:17px}
  .burger{display:flex}
  .kopf .knopf{display:none}
  .merkband ul{grid-template-columns:minmax(0,1fr)}
  .merkband li{border-right:0; border-bottom:1px solid var(--linie); padding:20px 0}
  .merkband li + li{padding-left:0}
  .merkband li:last-child{border-bottom:0}
}

@media (max-width:600px){
  body{font-size:16px}
  .mauer{columns:1}
  .daumen{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; gap:9px;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom));
    background:var(--papier); border-top:1px solid var(--linie);
  }
  .daumen .knopf{flex:1; padding:13px 10px; font-size:15px}
  body{padding-bottom:74px}
  .fuss{padding-bottom:20px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Rechtstexte (Impressum, Datenschutz)
   Eigene Huelle: diese Seiten haben weder Buehne noch Merkband, sondern nur
   langen Fliesstext. Die Aufteilung der Startseite bleibt: Ueberschriften in
   der Serife, Fliesstext und Beschriftungen in der Grotesk. Ueber viele
   Bildschirmseiten Rechtstext liest sich die Grotesk ruhiger.
   ═══════════════════════════════════════════════════════════════════════════ */
.rechts-kopf{max-width:72ch; padding:clamp(46px,6vw,88px) 0 clamp(20px,2.6vw,32px)}
.rechts-kopf h1{font:600 clamp(32px,4.4vw,50px)/1.08 var(--serif);
  letter-spacing:-.015em; 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}

/* 72 Zeichen Zeilenlaenge: darueber springt das Auge beim Rueckweg in die
   falsche Zeile. Bei Rechtstexten faellt das besonders auf, weil kaum Bilder
   den Fluss unterbrechen. */
.rechtstext{max-width:72ch; padding-bottom:clamp(52px,6vw,92px)}
.rechtstext section{padding:26px 0; border-top:1px solid var(--linie)}
.rechtstext h2{font:600 clamp(22px,2.2vw,27px)/1.25 var(--serif);
  color:var(--tinte); margin-bottom:12px}
.rechtstext h3{font:600 15px/1.35 var(--sans); color:var(--tinte); margin:22px 0 8px}
.rechtstext p{color:var(--text)}                       /* 7.92:1 auf Papier */
.rechtstext p + p{margin-top:12px}
.rechtstext ul{list-style:none; margin:12px 0}
.rechtstext li{position:relative; padding:6px 0 6px 22px; color:var(--text)}
.rechtstext li::before{                                /* Strich statt Punkt */
  content:""; position:absolute; left:0; top:1.05em;
  width:11px; height:1px; background:var(--gold);
}
.rechtstext address{font-style:normal; line-height:1.75; color:var(--text)}
.rechtstext dl{margin:12px 0}
.rechtstext dt{font:600 12px/1 var(--sans); letter-spacing:.08em;
  text-transform:uppercase; color:var(--leise); margin-top:15px}  /* 5.13:1 */
.rechtstext dd{margin-left:0; color:var(--text); margin-top:5px}
.rechtstext strong{color:var(--tinte); font-weight:600}
.rechtstext a{color:var(--gruen)}                      /* 6.83:1 auf Papier */

.rechts-hinweis{
  background:var(--flaeche); border:1px solid var(--linie);
  border-left:3px solid var(--gold); border-radius:var(--radius);
  padding:20px 22px; margin-bottom:6px;
}
.rechts-hinweis b{display:block; font-family:var(--serif); font-size:17px;
  color:var(--tinte); margin-bottom:8px}
.rechts-hinweis p{margin:0; font-size:15px; color:var(--text)}  /* 8.69:1 */

/* Muss ".rechtstext .zurueck" heissen: die Linkregel oben ist spezifischer
   und faerbte den Knopf sonst gruen-auf-gruen. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; margin-top:32px;
  padding:13px 24px; border:1px solid var(--linie-stark);   /* 3.90:1 — UI */
  border-radius:var(--radius); background:var(--flaeche);
  font:600 15px/1 var(--sans); color:var(--gruen); text-decoration:none;
}
.rechtstext .zurueck:hover{border-color:var(--gruen)}