/* ══════════════════════════════════════════════════════════════════════════
   Kanzlei-Demo — Beispielseite von LITVASS
   ------------------------------------------------------------------------
   Gebaut nach dem Entwurf „Symbiose (Palette C + Rohling-Linie)".
   Der Aufbau ist der eines Urteils: links die Randziffer und das Stichwort,
   rechts hinter einer senkrechten Linie der Satz. Newsreader traegt die
   Ueberschriften, Geist den Lesetext, Geist Mono die Marginalie.

   Schwarz und Markengelb kommen genau zweimal vor — im Warnbanner oben und
   im Band ganz unten. Das sind die einzigen Stellen, an denen LITVASS
   spricht und nicht die Kanzlei. Alles dazwischen gehoert gestalterisch dem
   Kunden.

   Kein Skript, kein fremder Server, Schriften selbst gehostet.
   Alle Paarungen sind gemessen; die schwaechste liegt bei 4,8:1 (WCAG AA).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Schriften ────────────────────────────────────────────────────────────
      Nach Zeichenbereich getrennt wie auf litvass.com: wer nur Deutsch
      liest, laedt latin-ext nie.

      Newsreader laeuft ausschliesslich im Schnitt 500. Der Schnitt 400 war
      eingebunden, wurde nie abgerufen und ist entfernt; braucht ein Kunde
      ihn, kommen Datei und @font-face zusammen zurueck. ──────────────── */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/Newsreader-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/Newsreader-500-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Geist-Variable.woff2) format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/GeistMono-Variable.woff2) format('woff2');}

/* ── Farben und Maße ──────────────────────────────────────────────────────
      Der Austauschpunkt pro Kanzlei. Wer die Demo fuer einen echten Kunden
      umfaerbt, aendert diesen Block und sonst nichts. ─────────────────── */
:root{
  --creme:#F7F3EA;        /* Grundflaeche, warmes Papier                   */
  --creme-hell:#F2EFE4;   /* Schrift auf den dunklen Baendern              */
  --sand:#EBE3D0;         /* Zwischenflaeche: Ablauf, Fotoplatz            */
  --sand-hell:#F0E4CB;    /* Bildplatz                                     */
  --linie:#DDD5C2;        /* die Linie neben dem Satz                      */
  --linie-hell:#E4E1D2;   /* Marginalie auf dunklem Grund                  */

  --tinte:#16211D;        /* 14,9:1 auf --creme                            */
  --grau:#5E6154;         /*  5,7:1 auf --creme, 5,0:1 auf --sand          */
  --grau-tot:#63604F;     /*  4,8:1 auf --tot — Beschriftung toter Flaechen*/
  --bronze:#7A5C12;       /*  5,6:1 — der eine Akzent der Kanzlei          */
  --gold:#D3B05A;         /*  5,9:1 auf --gruen                            */
  --stein:#C1BAB1;        /*  6,4:1 auf --gruen                            */

  --gruen:#1F3A31;        /* Frist- und Bildband                           */
  --gruen-tief:#10201B;   /* Kontakt                                       */
  --gruen-feld:#182B24;   /* Nummernfeld im Kontakt                        */
  --rose:#E8B4B4;         /*  8,2:1 — Warnton auf dunklem Grund            */
  --tot:#E6E0D0;          /* deaktivierte Flaeche                          */

  --linie-dunkel:rgba(242,239,228,.28);  /* Linie auf den dunklen Baendern */

  /* Die Marke litvass. Diese vier gehoeren NICHT der Kanzlei und werden
     beim Umfaerben nicht angefasst — sie stehen hier, damit sie auffindbar
     sind und nicht als feste Werte im Blatt verstreut liegen.             */
  --schwarz:#000000;
  --gelb:#FACC15;         /* nur wo LITVASS spricht, nie bei der Kanzlei   */
  --weiss:#FFFFFF;
  --marke-linie:#3A3A3A;  /* Trennlinien im Litvass-Band                   */
  --marke-text:#D8D8D8;   /* 14,7:1 auf Schwarz                            */
  --marke-zweit:#B9B9B9;  /*  9,7:1 auf Schwarz                            */

  /* 104 px am Kopf, 72 px an den Baendern — die beiden gezeichneten Raender.
     Beide laufen auf 22 px am Telefon zusammen. */
  --rand-kopf:clamp(1.375rem,7.22vw,6.5rem);
  --rand:clamp(1.375rem,5vw,4.5rem);
  --marg:9rem;                 /* Breite der Marginalie, 144 px            */
  --satzbreite:81rem;          /* Satzspiegel, zentriert ab 1296 px        */
  --block:clamp(3.25rem,1.75rem + 5vw,6.5rem);
  --block-schmal:clamp(2.5rem,1.5rem + 3.5vw,3.75rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--creme);
  color:var(--tinte);
  font-family:'Geist',system-ui,-apple-system,sans-serif;
  font-size:clamp(1.0625rem,1rem + .2vw,1.0625rem);
  line-height:1.55;
  text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
p,ul,ol,figure,h1,h2,h3,h4{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}

/* Der Fokusring traegt Bronze, nicht Markengelb: er gehoert der Kanzlei.
   Auf den dunklen Baendern kehrt er sich um, sonst verschwindet er. */
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}
.band--gruen :focus-visible,.band--tief :focus-visible,
.warnband :focus-visible,.litvass :focus-visible{outline-color:var(--gelb)}
::selection{background:var(--bronze);color:var(--weiss)}

/* Sprungmarke. Erstes fokussierbare Element der Seite. */
.sprung{
  position:absolute;left:.5rem;top:-4rem;z-index:20;
  background:var(--tinte);color:var(--creme);
  padding:.75rem 1.25rem;border-radius:3px;text-decoration:none;
  transition:top .15s ease;
}
.sprung:focus{top:.5rem}
@media (prefers-reduced-motion:reduce){.sprung{transition:none}}

/* Nur fuer Vorleseprogramme. */
.nur-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ── Satz ─────────────────────────────────────────────────────────────── */
.h1,.h2,.h3,.gross,.kanzleiname,.fuss-marke,.schritt-nr{
  font-family:'Newsreader',Georgia,'Times New Roman',serif;
  font-weight:500;
  text-wrap:balance;
  /* Trennung statt Ueberlauf: „Datenschutzerklaerung" passt sonst auf 320 px
     nicht in eine Zeile, und die Seite bekaeme einen waagerechten Schieber. */
  hyphens:auto;
}
.litvass h2,.schritt h3{hyphens:auto}
.h1{font-size:clamp(2.5rem,1.5rem + 4.4vw,4.5rem);line-height:1.06;letter-spacing:-.022em}
.h2{font-size:clamp(1.8125rem,1.35rem + 2vw,2.5rem);line-height:1.13;letter-spacing:-.02em}
.gross{font-size:clamp(1.875rem,1.4rem + 2.1vw,2.625rem);line-height:1.12;letter-spacing:-.019em}
.h3{font-size:clamp(1.375rem,1.2rem + .75vw,1.625rem);line-height:1.19;letter-spacing:-.012em}

/* Die Marginalie: Geist Mono, gesperrt, klein. Sie zitiert, sie wirbt nicht. */
.rn,.stich,.marke,.abb{
  font-family:'Geist Mono','SFMono-Regular',ui-monospace,monospace;
  font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;
}
.marke{font-size:.875rem;letter-spacing:.13em;font-weight:400}

/* Symbole laufen als Linien mit, nicht als Flaechen — neben der Serife
   wirkten gefuellte Piktogramme wie Aufkleber. */
.sym{
  width:1.25rem;height:1.25rem;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ══ Warnband ══════════════════════════════════════════════════════════════
   Erstes Element der Seite, nicht im Fuss acht Bildschirme weiter unten:
   wer hier landet, soll vor jeder anderen Zeile wissen, dass es diese
   Kanzlei nicht gibt. role="alert" waere falsch — der Hinweis ist kein
   Ereignis, sondern ein Zustand. Ein benanntes aside genuegt.
   ═══════════════════════════════════════════════════════════════════════ */
.warnband{
  background:var(--schwarz);
  border-left:8px solid var(--gelb);
  color:var(--marke-text);
}
.warnband__innen>div{min-width:0}
.warnband__innen{
  display:flex;gap:1.125rem;align-items:flex-start;
  padding:1.375rem var(--rand-kopf);
  max-width:calc(var(--satzbreite) + 2 * var(--rand-kopf));margin-inline:auto;
}
.warnband .sym{color:var(--gelb);margin-top:.15rem}
.warnband__titel{color:var(--weiss);font-weight:600;font-size:1.0625rem;line-height:1.35}
.warnband__satz{font-size:1rem;line-height:1.56;max-width:58ch;margin-top:.4375rem}
.warnband a{color:var(--gelb)}

/* ── Bildstreifen über dem Kopf der Startseite ────────────────────────────
      Im Entwurf steht das Bild ueber der Navigation. Auf dem Telefon wird es
      flach gehalten, damit die Navigation im ersten Bildschirm bleibt: wer
      unter Druck sucht, soll nicht an einem Bild vorbeiscrollen muessen. */
.hero-bild{
  background:var(--sand-hell);color:var(--grau);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.875rem;
  height:clamp(9rem,28vw,20rem);padding:1.25rem;text-align:center;
}
.hero-bild .sym{width:2rem;height:2rem;stroke-width:1.2}

/* ══ Kopf ═════════════════════════════════════════════════════════════════
   Die Telefonflaeche ist tot und sieht tot aus: ein span, kein tel:-Link,
   mit durchgestrichenem Hoerer. Eine plausible Muenchner Nummer koennte bei
   einem echten Anschluss klingeln — deshalb ist hier nichts verlinkt.
   Auf schmalen Schirmen oeffnet der Schalter die Navigation ueber :target,
   dieselbe skriptfreie Loesung wie auf litvass.com.
   ═══════════════════════════════════════════════════════════════════════ */
.kopf{
  background:var(--creme);
  border-bottom:1px solid var(--linie);
}
.kopf__innen{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.25rem var(--rand-kopf);
  max-width:calc(var(--satzbreite) + 2 * var(--rand-kopf));margin-inline:auto;
}
.kanzleiname{font-size:1.5rem;letter-spacing:-.008em;line-height:1.2}
.kanzleiname a{color:inherit;text-decoration:none}
.kanzleiname a:hover{text-decoration:underline;text-decoration-thickness:1px}

.navigation{display:flex;align-items:center;gap:2.125rem}
.navigation a{
  color:var(--tinte);text-decoration:none;font-size:1.0625rem;
  padding-block:.25rem;
  border-bottom:1px solid transparent;
}
.navigation a:hover{border-bottom-color:var(--bronze)}
.navigation a[aria-current="page"]{border-bottom-color:var(--bronze);font-weight:500}

.telefon-tot{
  display:inline-flex;align-items:center;gap:.5625rem;
  background:var(--tot);color:var(--grau-tot);
  border-radius:3px;padding:.6875rem 1.25rem;font-size:1rem;
}
.menue-schalter,.menue-zu{display:none;color:var(--tinte)}

/* ══ Band ═════════════════════════════════════════════════════════════════
   Der tragende Baustein. Links die Randziffer, rechts hinter der Linie der
   Satz — die Form, in der Juristen seit je zitieren. Die Linie laeuft auch
   auf dem Telefon mit; nur die Marginalie legt sich dort darueber.
   ═══════════════════════════════════════════════════════════════════════ */
.band{padding-inline:var(--rand)}
.band__innen{
  max-width:var(--satzbreite);margin-inline:auto;
  display:grid;grid-template-columns:var(--marg) minmax(0,1fr);column-gap:1rem;
}
.rand{
  display:flex;flex-direction:column;gap:2rem;
  padding-block:var(--block);
  color:var(--grau);
}
.inhalt{
  border-left:1px solid var(--linie);
  padding-left:1rem;
  padding-block:var(--block);
  min-width:0;
}
.band--sand{background:var(--sand)}
.band--gruen{background:var(--gruen);color:var(--creme-hell)}
.band--tief{background:var(--gruen-tief);color:var(--creme-hell)}
.band--gruen .rand,.band--tief .rand{color:var(--linie-hell)}
.band--gruen .inhalt,.band--tief .inhalt{border-left-color:var(--linie-dunkel)}
.band--eng .rand,.band--eng .inhalt{padding-block:var(--block-schmal)}

/* ── Auftakt: Brotkrumen, H1, Untertitel ─────────────────────────────── */
.brotkrumen{color:var(--grau);font-size:1rem;margin-bottom:1.25rem}
.brotkrumen ol{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline}
/* inline-block, damit der senkrechte Innenabstand das Klickfeld wirklich
   vergroessert: 21 px waren unter der Mindestzielgroesse. */
.brotkrumen a{color:inherit;display:inline-block;padding-block:.35rem}
.brotkrumen [aria-current="page"]{color:var(--tinte);font-weight:500}
.brotkrumen .trenner{color:var(--grau)}
.brotkrumen ol{list-style:none;margin:0;padding:0}
.inhalt > .marke{color:var(--bronze);display:block;margin-bottom:1.375rem}
.untertitel{
  color:var(--grau);margin-top:1.25rem;
  font-size:clamp(1.125rem,1.02rem + .45vw,1.3125rem);line-height:1.52;
  max-width:44ch;
}
.lead{
  color:var(--grau);
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);line-height:1.53;
  max-width:48ch;
}

/* ── Frist ────────────────────────────────────────────────────────────────
   Das wichtigste Modul der Seite. Der Audit von Kanzleiseiten fand die
   Frist fast nirgends beantwortet; hier steht sie oben, nicht im Fliesstext.
   Der Sachverhalt steht, die Fundstelle nicht: Paragraphen bleiben drausssen,
   weil ein Vorlagentext mit Paragraph von geprüfter Beratung nicht zu
   unterscheiden waere. ──────────────────────────────────────────────── */
.frist{display:grid;grid-template-columns:minmax(0,min(26rem,52%)) minmax(0,1fr);
  column-gap:min(4.5rem,10%);row-gap:2.25rem;align-items:start}
.frist .marke{color:var(--gold);display:block;margin-bottom:1rem}
.frist__satz{font-size:clamp(1.125rem,1rem + .55vw,1.3125rem);line-height:1.62;max-width:52ch}

/* ── Liste aus Faellen und Zusagen ───────────────────────────────────── */
.zweispalt{display:grid;grid-template-columns:minmax(0,min(20rem,40%)) minmax(0,1fr);
  column-gap:min(5.5rem,12%);row-gap:2rem;align-items:start}
.faelle li{
  display:flex;gap:1.375rem;align-items:flex-start;
  border-top:1px solid var(--linie);padding-block:1.625rem;
}
.faelle li>p,.schritt,.gebiet,.leistung,.person,.bildfeld{min-width:0}
.faelle .sym{color:var(--bronze);margin-top:.35rem}
.faelle p{font-size:clamp(1.0625rem,.98rem + .55vw,1.3125rem);line-height:1.52}
.band--sand .faelle li{border-top-color:var(--linie)}

/* ── Gebiete ─────────────────────────────────────────────────────────── */
.gebiete{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:2.75rem 2.25rem;margin-top:3.5rem;
}
.gebiet{border-top:1px solid var(--linie);padding-top:1.5rem;position:relative}
.gebiet h3{margin-bottom:.75rem}
.gebiet h3 a{color:inherit;text-decoration:none}
/* Das Klickfeld der Ueberschrift deckt die ganze Karte ab. Der Fokusring
   bleibt am Text: dort steht der Name, den das Vorleseprogramm ansagt. */
.gebiet h3 a::after{content:"";position:absolute;inset:0}
.gebiet:hover h3 a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--bronze)}
.gebiet:hover .verweis{text-decoration:underline;text-decoration-thickness:1px}
.gebiet p{color:var(--grau);font-size:1.0625rem;line-height:1.53}
.verweis{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:.875rem;
  color:var(--bronze);font-weight:500;font-size:1rem;
}
.verweis .sym{width:1.0625rem;height:1.0625rem}

/* ── Ablauf in drei Schritten ────────────────────────────────────────── */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));gap:1.75rem;margin-top:3.25rem}
.schritt{border-top:2px solid var(--bronze);padding-top:1.5rem}
.schritt-nr{font-size:2.125rem;color:var(--bronze);line-height:1.1}
.schritt h3{
  font-family:'Geist',system-ui,sans-serif;font-weight:600;
  font-size:1.25rem;line-height:1.35;letter-spacing:-.015em;
  margin-top:1.125rem;
}
.schritt p{color:var(--grau);font-size:1.0625rem;line-height:1.53;margin-top:1.125rem}

/* ── Bildband ─────────────────────────────────────────────────────────────
   Zwei Bildplaetze und zwei dunkle Felder im Wechsel. Die Bildplaetze sind
   leer und sollen es sein: „Platz fuer Ihre Fotos" ist ehrlicher als ein
   gekauftes Stockbild und sagt dem Kunden, was er liefern muss. ─────── */
.bildband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.bildplatz{
  background:var(--sand-hell);color:var(--grau);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  min-height:13.5rem;padding:1.25rem;text-align:center;
}
.bildplatz .sym{width:1.75rem;height:1.75rem;stroke-width:1.2}
.bildfeld{background:var(--gruen);color:var(--creme-hell);padding:2rem;display:flex;flex-direction:column;gap:1.125rem;justify-content:center}
.bildfeld .markenzeile{display:flex;align-items:center;gap:.625rem;color:var(--stein)}
.bildfeld .strich{display:block;width:1.5rem;height:1px;background:currentColor;flex:0 0 auto}
.bildfeld p{font-size:.9375rem;line-height:1.53}

/* ── Personen ────────────────────────────────────────────────────────── */
/* auto-fill statt auto-fit: leere Spuren bleiben stehen. Mit auto-fit zog
   eine einzelne Person ueber die ganze Breite, und der leere Fotoplatz
   wurde bei 1920 px 1119 x 839 gross. Ab 64rem drei feste Spalten, damit
   eine, zwei oder drei Personen immer dieselbe Kartenbreite haben. */
.personen{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));gap:2.25rem;margin-top:3rem}
@media (min-width:64rem){
  .personen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Fotoplatz, Name und Titel liegen auf den Spuren ihrer Reihe. Bricht ein
   Name um, ruecken die Titel der ganzen Reihe mit. */
.personen>.person{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.person p{color:var(--grau);font-size:1.125rem;line-height:1.5;margin-top:.375rem}
.fotoplatz{
  background:var(--sand);border:1px dashed var(--linie);
  color:var(--grau);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;
  aspect-ratio:4 / 3;padding:1.75rem;text-align:center;margin-bottom:1.375rem;
  font-size:1rem;line-height:1.5;
}
.band--sand .fotoplatz{background:var(--sand-hell)}
.fotoplatz .sym{width:1.75rem;height:1.75rem;stroke-width:1.2}

/* ── Kontakt ─────────────────────────────────────────────────────────────
   Die Nummer ist sichtbar tot: als Muster ausgewiesen, ohne tel:-Link.
   Beide Flaechen darunter sind Text, keine Schalter — ein Knopf, der nichts
   tut, ist eine Zusage, die die Seite nicht halten kann, und ein
   Vorleseprogramm kuendigt ihn faelschlich als bedienbar an.
   ─────────────────────────────────────────────────────────────────── */
.kontakt{display:grid;grid-template-columns:minmax(0,min(24rem,48%)) minmax(0,1fr);
  column-gap:min(5.5rem,12%);row-gap:2.25rem;align-items:start}
.kontakt .zeiten{color:var(--linie-hell);font-size:1.1875rem;line-height:1.53;margin-top:1.25rem}
.anschrift{border-top:1px solid var(--linie-dunkel);margin-top:1.5rem;padding-top:1.5rem}
.anschrift p:first-child{font-size:1.1875rem;line-height:1.53}
.anschrift p+p{color:var(--linie-hell);font-size:1.0625rem;line-height:1.53;margin-top:.5rem}
.nummernfeld{background:var(--gruen-feld);border-radius:3px;padding:1.625rem 1.875rem}
.nummer{
  font-size:clamp(1.75rem,1.2rem + 2.2vw,2.375rem);font-weight:500;
  letter-spacing:-.026em;color:var(--linie-hell);line-height:1.15;
}
.nummer-hinweis{display:flex;align-items:center;gap:.5625rem;color:var(--rose);font-size:1.0625rem;margin-top:.5rem}
.knopf-tot{
  display:flex;align-items:center;gap:.6875rem;
  background:var(--tot);color:var(--grau-tot);
  border-radius:3px;padding:.9375rem 1.25rem;margin-top:1.25rem;
  font-size:1.0625rem;font-weight:500;min-height:2.75rem;
}

/* ══ Litvass-Band ═════════════════════════════════════════════════════════
   Die zweite und letzte Stelle, an der LITVASS spricht. Deshalb Schwarz und
   Markengelb, deutlich abgesetzt vom Auftritt der Kanzlei: Wer hier liest,
   soll die Absenderin nicht mit der Kanzlei verwechseln.
   ═══════════════════════════════════════════════════════════════════════ */
.litvass{background:var(--schwarz);border-left:8px solid var(--gelb);color:var(--marke-text)}
.litvass__innen{
  padding:clamp(2.5rem,1.5rem + 3vw,3.5rem) var(--rand-kopf);
  max-width:calc(var(--satzbreite) + 2 * var(--rand-kopf));margin-inline:auto;
}
.litvass .marke{color:var(--gelb);display:block}
.litvass h2{
  font-family:'Newsreader',Georgia,serif;font-weight:500;color:var(--weiss);
  font-size:clamp(1.625rem,1.3rem + 1.4vw,2.125rem);line-height:1.2;
  letter-spacing:-.018em;margin-top:1rem;max-width:26ch;
}
.litvass__lead{margin-top:1rem;max-width:60ch;font-size:1.0625rem;line-height:1.58}
.leistungen{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
  gap:1.75rem 2.25rem;margin-top:2.75rem;
}
/* Sechs Karten sollen 3 + 3 brechen. Ohne die Grenze stellt auto-fit auf
   breiten Schirmen vier Spalten und laesst die zweite Reihe halb leer. */
@media (min-width:64rem){
  .leistungen{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* subgrid: Titel und Text jeder Karte liegen auf den Spuren ihrer Reihe.
   Bricht ein Titel auf zwei Zeilen um, ruecken die Texte der ganzen Reihe
   gemeinsam nach unten, statt dass eine Karte allein verspringt. Browser
   ohne subgrid bekommen das bisherige Verhalten, nichts bricht. */
.leistungen>.leistung{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-rows:subgrid;grid-row:span 2;gap:.5rem}
.leistung{border-top:1px solid var(--marke-linie);padding-top:1.125rem}
.leistung h3{font-size:1.0625rem;font-weight:600;color:var(--weiss);letter-spacing:-.005em}
.leistung h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--gelb);padding-bottom:1px}
.leistung h3 a:hover{color:var(--gelb)}
.leistung p{font-size:.9375rem;line-height:1.55;color:var(--marke-zweit)}
.litvass__fuss{
  border-top:1px solid var(--marke-linie);margin-top:2.75rem;padding-top:1.75rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
}
.litvass__fuss p{font-size:1rem;line-height:1.55;max-width:52ch}
.knopf-gelb{
  display:inline-flex;align-items:center;gap:.625rem;
  background:var(--gelb);color:var(--schwarz);text-decoration:none;
  border-radius:3px;padding:.875rem 1.375rem;font-weight:600;font-size:1.0625rem;
  min-height:2.75rem;
}
.knopf-gelb:hover{background:var(--weiss)}

/* ══ Fuß der Kanzlei ══════════════════════════════════════════════════════ */
.fuss{background:var(--creme);border-top:1px solid var(--linie)}
.fuss__innen{
  padding:2.5rem var(--rand-kopf) 3rem;
  max-width:calc(var(--satzbreite) + 2 * var(--rand-kopf));margin-inline:auto;
}
.fuss-gebiete{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-bottom:1.625rem}
.fuss-gebiete a,.fuss-links a{color:var(--grau);font-size:1rem;text-decoration:none;border-bottom:1px solid transparent;padding-block:.25rem}
.fuss-gebiete a:hover,.fuss-links a:hover{border-bottom-color:var(--grau)}
.fuss-zeile{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;justify-content:space-between}
.fuss-marke{font-size:1.3125rem}
.fuss-links{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
.fuss-hinweis{
  display:flex;gap:.875rem;align-items:flex-start;
  border-top:1px solid var(--linie);margin-top:1.625rem;padding-top:1.375rem;
  color:var(--grau);font-size:1rem;line-height:1.56;
}
.fuss-hinweis .sym{margin-top:.2rem}
.fuss-hinweis a{color:var(--grau)}

/* ══ Rechtstexte (Impressum, Datenschutz) ════════════════════════════════ */
.rechtstext{max-width:68ch}
.rechtstext h2{margin-top:3rem}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{
  font-family:'Geist',system-ui,sans-serif;font-weight:600;
  font-size:1.125rem;letter-spacing:-.005em;margin-top:2rem;
}
.rechtstext p{margin-top:1.125rem;line-height:1.65}
.rechtstext ul{margin-top:1.125rem;display:flex;flex-direction:column;gap:.625rem}
.rechtstext ul li{padding-left:1.25rem;position:relative;line-height:1.6}
.rechtstext ul li::before{content:"—";position:absolute;left:0;color:var(--bronze)}
.rechtstext a{color:var(--bronze)}
.rechtstext dd a{display:inline-block;padding-block:.2rem}
.rechtstext dl{margin:1.125rem 0 0;display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.625rem 1.5rem}
.rechtstext dt{color:var(--grau);font-size:1rem}
.rechtstext dd{margin:0}

/* ══ Schmale Schirme ══════════════════════════════════════════════════════
   Die Seite ist fuer das Telefon gebaut; alles hier ist der Rueckbau der
   Desktop-Zugaben, nicht umgekehrt. ──────────────────────────────────── */
@media (max-width:64rem){
  .frist,.zweispalt,.kontakt{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .zweispalt{gap:2rem}
}

@media (max-width:60rem){
  /* Die Marginalie legt sich als Zeile ueber den Satz. Die Linie bleibt —
     sie ist das Erkennungszeichen des Aufbaus, nicht Zierrat. */
  .band__innen{grid-template-columns:minmax(0,1fr)}
  .rand{
    flex-direction:row;align-items:baseline;gap:1rem;flex-wrap:wrap;
    padding-block:var(--block) 0;
  }
  .inhalt{padding-block:1.5rem var(--block)}
}

@media (max-width:48rem){
  /* Navigation ueber :target — ohne Skript, mit echtem Fokus. */
  .menue-schalter{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:2.75rem;min-height:2.75rem;margin-right:-.5rem;
  }
  .menue-schalter .sym{width:1.625rem;height:1.625rem}
  .navigation{
    position:fixed;inset:0;z-index:30;
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:.5rem;padding:var(--rand-kopf);
    background:var(--creme);
    transform:translateX(100%);
    visibility:hidden;
  }
  .navigation:target{transform:none;visibility:visible}
  .navigation a{font-size:1.5rem;padding-block:.75rem;min-height:2.75rem;display:flex;align-items:center}
  .menue-zu{
    display:inline-flex;align-items:center;justify-content:center;
    position:absolute;top:1rem;right:var(--rand-kopf);
    min-width:2.75rem;min-height:2.75rem;
  }

  /* Solange das Menue offen ist, nimmt der Rest der Seite nicht mehr an der
     Tabulatorfolge teil. Ohne das springt der Fokus hinter die deckende
     Flaeche: auf zwanzig Links, die niemand sehen kann. visibility:hidden
     nimmt sie aus Tabulatorfolge und Vorleseprogramm zugleich — inert gibt
     es in CSS nicht, und ein Skript soll die Seite nicht brauchen.
     Browser ohne :has() verhalten sich wie bisher. */
  body:has(#menue:target) > :not(header),
  body:has(#menue:target) .kopf__innen > :not(.navigation){visibility:hidden}
  .menue-zu .sym{width:1.75rem;height:1.75rem}
  .telefon-tot{margin-top:1rem}

  .warnband{border-left-width:6px}
  .litvass{border-left-width:6px}
  .bildband{grid-template-columns:minmax(0,1fr)}
  .bildplatz{min-height:11rem}
  .fuss-zeile{flex-direction:column;align-items:flex-start;gap:1rem}
  .rechtstext dl{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .rechtstext dd{margin-bottom:.75rem}
}

/* Wo der Nutzer groessere Schrift eingestellt hat, darf nichts abgeschnitten
   werden: alle Raster fallen einspaltig zurueck. */
@media (max-width:30rem){
  .gebiete,.schritte,.personen,.leistungen{grid-template-columns:minmax(0,1fr)}
}

/* ══ Druck ════════════════════════════════════════════════════════════════
   Die Demo liegt auch als Blatt bei. Dunkle Flaechen wuerden eine Patrone
   leeren und im Ausdruck grau absaufen — sie kehren sich um. ─────────── */
@media print{
  /* Hier stehen #fff und #000 absichtlich als feste Werte und nicht als
     Token: Papier ist weiss und Toner ist schwarz, unabhaengig davon, in
     welchen Farben eine Kanzlei ihre Seite betreibt. */
  .navigation,.menue-schalter,.menue-zu,.sprung,.knopf-gelb{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .band--gruen,.band--tief,.warnband,.litvass{
    background:#fff;color:#000;border:1px solid #000;border-left-width:4px;
  }
  .band--gruen .rand,.band--tief .rand,.litvass h2,.warnband__titel{color:#000}
  .band--gruen .inhalt,.band--tief .inhalt{border-left-color:#000}
  .nummernfeld{background:#fff;border:1px solid #000}
  .nummer,.nummer-hinweis,.litvass__lead,.leistung p,.kontakt .zeiten{color:#000}
  .band,.fuss{break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}