/* Stilblatt des neuen Aufbaus.

   Die Werte stammen aus dem Entwurf R1 von Claude Design
   (designs/r1-claude-design/). Zwei Abweichungen sind bewusst:

   1. Montserrat kommt von hier, nicht von Google. Die Seite laedt nichts
      von aussen, das ist die Bedingung, unter der sie ohne Einwilligungs-
      dialog auskommt.
   2. Fuer Text auf hellem Grund gilt --blau-tief statt --blau. #619FCE auf
      Weiss liegt bei 2,9:1 und ist als Schriftfarbe nicht lesbar. Als
      Flaeche mit dunkler Schrift bleibt --blau, dort stimmt der Kontrast.
*/

/* ------------------------------------------------------------- Schriften */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url("/schriften/montserrat-v12-latin-regular.woff2") format("woff2"),
       url("/schriften/montserrat-v12-latin-regular.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url("/schriften/montserrat-v12-latin-500.woff2") format("woff2"),
       url("/schriften/montserrat-v12-latin-500.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 500;
  font-display: swap;
  src: url("/schriften/montserrat-v12-latin-500italic.woff2") format("woff2"),
       url("/schriften/montserrat-v12-latin-500italic.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url("/schriften/montserrat-v12-latin-600.woff2") format("woff2"),
       url("/schriften/montserrat-v12-latin-600.woff") format("woff"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700;
  font-display: swap;
  src: url("/schriften/montserrat-v12-latin-700.woff2") format("woff2"),
       url("/schriften/montserrat-v12-latin-700.woff") format("woff"); }

/* ------------------------------------------------------------ Grundwerte */
:root {
  --grund: #FBFBFB;
  --flaeche: #F0F3F6;
  --linie: #E6E8EA;
  --linie-stark: #C9D2DA;
  --tinte: #2E2E2D;
  --text: #565655;
  --grau: #8E8E8D;
  --dunkel: #1C2733;
  --tiefe: #0F1720;
  --blau: #619FCE;
  --blau-tief: #2F6F9F;
  --blau-hell: #9DC5E5;
  --text-dunkel: #B9C3CC;
  --leiste: 76px;
  --rand: clamp(16px, 6vw, 96px);
  --band: clamp(80px, 10vw, 150px);
  --breit: 1400px;
  --kurve: cubic-bezier(.2,.7,.2,1);
  /* Zielwerte der Logo-Woerter in der Leiste. Die Abstaende sind die
     gemessenen Wortbreiten plus acht Pixel Luft; sie haengen deshalb an
     der Schriftgroesse und werden weiter unten je Breite nachgezogen. */
  --logo-w2: 76px;
  --logo-w3: 157px;
  --logo-schrift: 13px;
  --logo-oben: 27px;
  --logo-unter-oben: 46px;
  --logo-unter-schrift: 9px;
}
@media (max-width: 559px) {
  :root { --logo-w2: 55px; --logo-w3: 113px; --logo-schrift: 10px;
          --logo-oben: 28px; --logo-unter-oben: 44px; --logo-unter-schrift: 8px; }
}
@media (max-width: 419px) {
  :root { --logo-w2: 50px; --logo-w3: 103px; --logo-schrift: 9px;
          --logo-unter-oben: 43px; --logo-unter-schrift: 7px; }
}

*, *::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;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--grund);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.chat-offen, body.menue-offen { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

/* Ein Wort, das laenger ist als seine Spalte, bricht um, statt die Seite
   breiter zu machen. Auf 390 Pixeln passiert das im Fliesstext dauernd:
   "Rechtsangelegenheiten" allein ist dort breiter als die halbe Spalte. */
h1, h2, h3, h4, p, li, span, blockquote, .akte__name { overflow-wrap: break-word; }
.text-band__inhalt, .zweispalter { hyphens: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }

.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  padding: 12px 20px; background: var(--blau); color: var(--tiefe); font-weight: 600;
}
.sprung:focus { left: 0; }

:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }

/* -------------------------------------------------------------- Bausteine */
.kicker {
  margin: 0 0 20px; font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; color: var(--blau-tief);
}
.kicker--hell { color: var(--blau-hell); }

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  background: var(--blau); color: var(--tiefe); border: 1px solid var(--blau);
  transition: transform .2s, background .2s, color .2s;
}
.knopf:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); transform: translateY(-2px); }
.knopf--rand {
  background: none; color: var(--tinte); border-color: var(--linie-stark);
}
.knopf--rand:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.knopf--auf-dunkel { background: none; color: var(--grund); border-color: rgba(251,251,251,.5); }
.knopf--auf-dunkel:hover { background: rgba(251,251,251,.14); border-color: rgba(251,251,251,.5); color: var(--grund); }

.pfeil-link {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blau-tief);
}
.pfeil-link::after {
  content: ""; width: 34px; height: 1px; background: currentColor;
  transition: width .25s var(--kurve);
}
.pfeil-link:hover::after { width: 54px; }
.pfeil-link--hell { color: var(--blau-hell); }

/* ------------------------------------------------------------ Kopfleiste */
/* Der Kopf traegt alles untereinander: Probeleiste, Chatflaeche, Leiste,
   Streifen. Geht der Assistent auf, waechst die Chatflaeche und schiebt die
   Leiste nach unten. Die Leiste bleibt dabei unveraendert, derselbe Aufbau,
   dieselben Knoepfe, nur weiter unten. Darunter erscheint der Streifen mit
   dem Slogan und dem Weg zurueck. Man bleibt im Zusammenhang, statt in ein
   eigenes Fenster zu wechseln. */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; flex-direction: column;
}

.chatflaeche {
  height: 0; overflow: hidden;
  background: var(--dunkel); color: var(--grund);
  transition: height .6s var(--kurve);
}
body.chat-offen .chatflaeche { height: var(--chat-h, calc(100dvh - 132px)); }

.streifen {
  height: 0; overflow: hidden; background: var(--grund);
  border-bottom: 1px solid var(--linie);
  transition: height .6s var(--kurve);
}
body.chat-offen .streifen { height: 56px; }
.streifen a {
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 0 var(--rand);
}
.streifen b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.streifen i {
  font-style: normal; margin-left: 14px; font-size: 13px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.streifen__zurueck {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blau-tief); white-space: nowrap;
}
.streifen__zurueck span { transform: rotate(90deg); display: inline-block; }
@media (max-width: 719px) { .streifen i { display: none; } .streifen b { font-size: 14px; } }

.leiste {
  position: relative; height: var(--leiste);
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(12px, 2vw, 28px);
  padding: 0 var(--rand) 0 200px;
  background: rgba(251,251,251,.92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
  transition: padding-left .5s var(--kurve);
}
body.gescrollt .leiste, body.chat-offen .leiste { padding-left: calc(var(--rand) + 260px); }

/* Das Logo. Oben steht es als weisser Block ueber der Bildkante, dreizeilig.
   Beim ersten Scrollen loest sich der Block auf und die drei Woerter fliegen
   einzeln nebeneinander in die Leiste. Jedes Wort sitzt absolut und wandert
   fuer sich; nur deshalb laesst sich der Weg ueberhaupt animieren.
   Die Zielabstaende 76 und 157 Pixel sind die gemessenen Wortbreiten bei
   13 Pixeln plus acht Pixel Luft. */
.marke {
  position: absolute; left: 0; top: 0;
  width: 300px; height: 176px; display: block;
  color: var(--text); text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.marke__block {
  position: absolute; left: 0; top: 0; width: 176px; height: 172px;
  background: var(--grund); box-shadow: 0 18px 40px rgba(15,23,32,.13);
  transition: background .5s var(--kurve), box-shadow .5s var(--kurve),
              width .5s var(--kurve), height .5s var(--kurve);
}
.marke__wort, .marke__unter {
  position: absolute; left: 24px; font-weight: 500; letter-spacing: .04em;
  transition: left .55s var(--kurve), top .55s var(--kurve),
              font-size .55s var(--kurve), color .4s var(--kurve);
}
.marke__wort { font-size: 19px; }
.marke__wort--1 { top: 30px; }
.marke__wort--2 { top: 60px; }
.marke__wort--3 { top: 90px; }
.marke__unter { top: 124px; font-size: 11px; letter-spacing: .12em; color: var(--blau-tief); }

body.gescrollt .marke__block, body.chat-offen .marke__block {
  width: 0; height: var(--leiste); background: transparent; box-shadow: none;
}
body.gescrollt .marke__wort, body.chat-offen .marke__wort {
  font-size: var(--logo-schrift); top: var(--logo-oben);
}
body.gescrollt .marke__wort--1, body.chat-offen .marke__wort--1 { left: var(--rand); }
body.gescrollt .marke__wort--2, body.chat-offen .marke__wort--2 { left: calc(var(--rand) + var(--logo-w2)); }
body.gescrollt .marke__wort--3, body.chat-offen .marke__wort--3 { left: calc(var(--rand) + var(--logo-w3)); }
body.gescrollt .marke__unter, body.chat-offen .marke__unter {
  left: var(--rand); top: var(--logo-unter-oben); font-size: var(--logo-unter-schrift);
}
@media (prefers-reduced-motion: reduce) {
  .marke__block, .marke__wort, .marke__unter { transition: none; }
}
/* Unter 560 Pixeln bleibt der Block ganz oben erhalten, nur kleiner und
   quadratisch: er ist das Zeichen der Kanzlei und soll auch am Telefon als
   Form ankommen. Die Masse sind die des grossen Blocks auf 140 Pixel
   heruntergerechnet. Sobald gescrollt wird oder der Chat aufgeht, loest er
   sich auf wie am grossen Schirm, denn dann braucht die Leiste den Platz. */
@media (max-width: 559px) {
  .marke { width: calc(var(--logo-w3) + 90px); height: 140px; }
  .marke__block { width: 140px; height: 140px; }
  .marke__wort { font-size: 15px; }
  .marke__wort--1 { left: 19px; top: 26px; }
  .marke__wort--2 { left: 19px; top: 48px; }
  .marke__wort--3 { left: 19px; top: 70px; }
  .marke__unter { left: 19px; top: 100px; font-size: 9px; }

  body.gescrollt .marke__block, body.chat-offen .marke__block {
    width: 0; height: var(--leiste); background: transparent; box-shadow: none;
  }
  body.gescrollt .marke__wort, body.chat-offen .marke__wort {
    font-size: var(--logo-schrift); top: var(--logo-oben);
  }
  body.gescrollt .marke__wort--1, body.chat-offen .marke__wort--1 { left: var(--rand); }
  body.gescrollt .marke__wort--2, body.chat-offen .marke__wort--2 { left: calc(var(--rand) + var(--logo-w2)); }
  body.gescrollt .marke__wort--3, body.chat-offen .marke__wort--3 { left: calc(var(--rand) + var(--logo-w3)); }
  body.gescrollt .marke__unter, body.chat-offen .marke__unter {
    left: var(--rand); top: var(--logo-unter-oben); font-size: var(--logo-unter-schrift);
  }
  .leiste { padding-left: calc(var(--rand) + var(--logo-w3) + 70px); gap: 8px; }
  .werkzeuge { gap: 8px; }
}

/* Im Querformat ist das Fenster flacher als der Block hoch ist. Er schob
   sich dort ueber die Zeile der Buehne, bis man scrollte. Unter 560 Pixeln
   Hoehe loest er sich deshalb von vornherein auf, wie im gescrollten
   Zustand; die Kanzlei steht dann als Wortmarke in der Leiste. */
@media (max-height: 559px) {
  .marke { width: calc(var(--logo-w3) + 90px); height: var(--leiste); }
  .marke__block { width: 0; height: var(--leiste); background: transparent; box-shadow: none; }
  .marke__wort { font-size: var(--logo-schrift); top: var(--logo-oben); }
  .marke__wort--1 { left: var(--rand); }
  .marke__wort--2 { left: calc(var(--rand) + var(--logo-w2)); }
  .marke__wort--3 { left: calc(var(--rand) + var(--logo-w3)); }
  .marke__unter { left: var(--rand); top: var(--logo-unter-oben); font-size: var(--logo-unter-schrift); }
  .leiste { padding-left: calc(var(--rand) + var(--logo-w3) + 70px); }
  /* Die Buehne darf im Querformat nicht hoeher sein als das Fenster, sonst
     steht der Kanzleiname unter dem Rand. */
  .buehne { min-height: 100svh; }
}

.menue {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 30px);
  font-size: 13px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap;
}
.menue a { padding: 6px 0; border-bottom: 2px solid transparent; }
.menue a:hover, .menue a[aria-current] { border-bottom-color: var(--blau); }
@media (max-width: 1199px) { .menue { display: none; } }

.werkzeuge { display: flex; align-items: center; gap: 12px; }

.webakte {
  display: inline-flex; align-items: center; padding: 10px 16px;
  border: 1px solid var(--tinte); border-radius: 999px;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.webakte:hover { background: var(--tinte); color: var(--grund); }
@media (max-width: 719px) { .webakte { display: none; } }

/* SOS: ein dunkler Kreis im blauen Ring. Beim Ueberfahren faehrt die Nummer
   daneben aus, geschlossen bleibt es ein Zeichen. */
.sos {
  display: inline-flex; align-items: center; gap: 0;
  padding: 3px; border-radius: 999px; background: var(--blau); color: var(--tiefe);
  transition: gap .3s var(--kurve), padding .3s var(--kurve);
}
.sos__zeichen {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 50%; background: var(--dunkel); color: var(--grund);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.sos__text {
  display: grid; grid-template-columns: 0fr; overflow: hidden;
  transition: grid-template-columns .3s var(--kurve);
}
.sos__innen {
  overflow: hidden; white-space: nowrap; display: flex; flex-direction: column;
  line-height: 1.15;
}
.sos__oben { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.sos__nr { font-size: 14px; font-weight: 700; }
/* Nur mit echtem Zeiger. Am Telefon loest die Beruehrung das Ausfahren
   mit aus, und die Nummer steht dann halb abgeschnitten in der Leiste. */
@media (hover: hover) and (pointer: fine) {
  .sos:hover, .sos:focus-visible { gap: 12px; padding: 3px 20px 3px 3px; }
  .sos:hover .sos__text, .sos:focus-visible .sos__text { grid-template-columns: 1fr; }
}
.sos:focus-visible { outline: 2px solid var(--grund); outline-offset: 2px; }

/* Notrufleiste am Telefon ----------------------------------------------- */
/* Sie steht erst da, wenn gescrollt wurde: ueber der Buehne wuerde sie das
   erste Bild zerschneiden, und wer gerade ankommt, sucht noch nicht. */
.notruf { display: none; }
@media (max-width: 599px) {
  .notruf {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--blau); color: var(--tiefe);
    transform: translateY(100%); transition: transform .3s var(--kurve);
  }
  body.gescrollt .notruf { transform: none; }
  body.chat-offen .notruf, body.menue-offen .notruf { transform: translateY(100%); }
  .notruf__wort { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
  .notruf__nr { font-size: 17px; font-weight: 700; letter-spacing: .01em; }
  .notruf__ruf {
    margin-left: auto; padding: 7px 14px; border-radius: 999px;
    background: var(--tiefe); color: var(--grund);
    font-size: 13px; font-weight: 600;
  }
}

/* Der Rufknopf des Assistenten. Der Bestand fuehrt dort eine Figur im
   Talar, die fuer Sir Wilfred steht; sie ist hier nachgezeichnet.

   Nach ein paar Sekunden meldet er sich einmal von selbst: der Knopf
   schlaegt dreimal einen Ring, daneben faehrt seine Sprechblase auf.
   Danach ist Ruhe. Wer ihn wegklickt, sieht ihn in dieser Sitzung nicht
   wieder. */
.ruf { position: relative; }
.rufer {
  all: unset; cursor: pointer; position: relative;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--linie); background: var(--grund);
  color: var(--blau-tief);
  transition: transform .2s, border-color .2s, background .2s, color .2s;
}
.rufer:hover { transform: translateY(-2px); border-color: var(--blau); background: var(--blau); color: var(--tiefe); }
.rufer svg { width: 24px; height: 24px; }
.rufer::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--blau); opacity: 0; pointer-events: none;
}
body.winkt .rufer { background: var(--blau); border-color: var(--blau); color: var(--tiefe); }
body.winkt .rufer::after { animation: ring 1.5s var(--kurve) 3; }
@keyframes ring {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}
body.chat-offen .rufer { background: var(--blau); border-color: var(--blau); color: var(--tiefe); }

/* Seine Sprechblase. Sie haengt unter der Leiste und bleibt auf schmalen
   Schirmen innerhalb des Randes. */
.winke {
  position: absolute; top: calc(100% + 16px); right: -8px; z-index: 3;
  /* Die Blase haengt am Knopf, der auf schmalen Schirmen selbst schon
     nah am Rand steht. 68 Pixel sind der Platz, den der Knopf rechts
     einnimmt, plus der Rand links, den die Blase nicht unterschreiten darf. */
  width: min(340px, calc(100vw - 68px));
  display: flex; align-items: flex-start;
  background: var(--dunkel); color: var(--grund);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 26px 60px rgba(15,23,32,.3);
  animation: winke-auf .45s var(--kurve) both;
}
.winke[hidden] { display: none; }
.winke::before {
  content: ""; position: absolute; top: -6px; right: 20px;
  width: 14px; height: 14px; border-radius: 3px;
  background: var(--dunkel); transform: rotate(45deg);
}
@keyframes winke-auf { from { opacity: 0; transform: translateY(-12px) scale(.96); } }
.winke__flaeche {
  all: unset; cursor: pointer; flex: 1; min-width: 0;
  display: flex; gap: 14px; align-items: flex-start; padding: 16px 6px 16px 16px;
}
.winke__flaeche img { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: rgba(251,251,251,.08); }
.winke__flaeche span { display: block; font-size: 13px; line-height: 1.5; color: var(--text-dunkel); }
.winke__flaeche b { display: block; margin-bottom: 3px; font-size: 14px; color: var(--grund); }
.winke__flaeche:hover b { color: var(--blau); }
.winke__zu {
  all: unset; cursor: pointer; flex: 0 0 auto;
  padding: 13px 14px 0 0; font-size: 17px; line-height: 1; color: var(--grau);
}
.winke__zu:hover { color: var(--grund); }
@media (prefers-reduced-motion: reduce) {
  body.winkt .rufer::after { animation: none; }
  .winke { animation: none; }
}

.brenner {
  all: unset; cursor: pointer; display: none;
  flex-direction: column; gap: 5px; padding: 10px;
}
.brenner span { display: block; width: 24px; height: 2px; background: var(--tinte); transition: transform .2s, opacity .2s; }
.brenner span:last-child { width: 16px; }
@media (max-width: 1199px) { .brenner { display: flex; } }
.brenner[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.brenner[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.brenner[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-7px) rotate(-45deg); }

/* Unter 420 Pixeln geben die Knoepfe ihre Polsterung ab, sonst liegt die
   Wortzeile unter dem SOS-Zeichen. */
@media (max-width: 419px) {
  .leiste { gap: 4px; }
  .werkzeuge { gap: 4px; }
  .sos { padding: 0; }
  .sos:hover, .sos:focus-visible { padding: 0 14px 0 0; }
  .sos__zeichen { width: 34px; height: 34px; flex-basis: 34px; font-size: 10px; }
  .rufer { width: 36px; height: 36px; }
  .rufer svg { width: 21px; height: 21px; }
  .brenner { padding: 6px; }
  .brenner span { width: 20px; }
  .brenner span:last-child { width: 13px; }
}
/* Vollbildmenue --------------------------------------------------------- */
.vollmenue {
  position: fixed; inset: 0; z-index: 55;
  padding: calc(var(--leiste) + 70px) var(--rand) 80px;
  background: var(--dunkel); color: var(--grund);
  overflow-y: auto;
}
.vollmenue[hidden] { display: none; }
.vollmenue__raster {
  max-width: var(--breit); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px;
}
.vollmenue h2 {
  margin: 0 0 18px; font-size: 13px; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 500; color: var(--blau-hell);
}
.vollmenue ul { margin: 0; padding: 0; list-style: none; }
.vollmenue li { margin: 0 0 12px; }
.vollmenue li a { font-size: 16px; color: var(--text-dunkel); }
.vollmenue li a:hover { color: var(--grund); }
.vollmenue__haupt a { display: block; margin: 0 0 16px; font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.vollmenue__haupt a:hover { color: var(--blau-hell); }

/* ----------------------------------------------------------------- Buehne */
main { display: block; }

.buehne {
  position: relative; min-height: 85vh;
  display: grid; align-items: end;
  background: var(--dunkel); color: var(--grund); overflow: hidden;
}
.buehne__bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  opacity: .55; filter: grayscale(1) contrast(1.05);
  transform: scale(1.06);
  animation: atmen 26s ease-in-out infinite alternate;
}
@keyframes atmen { from { transform: scale(1.06); } to { transform: scale(1.14); } }
.buehne__schleier {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,39,51,.2) 0%, rgba(28,39,51,.38) 45%, rgba(28,39,51,.95) 100%);
}
.buehne__innen {
  position: relative; padding: 190px var(--rand) 72px;
  display: grid; gap: 40px; width: 100%;
}
.buehne h1 {
  margin: 0; font-weight: 600;
  font-size: clamp(38px, 6.4vw, 104px); line-height: 1.02; letter-spacing: -.03em;
  max-width: 1100px;
}
.buehne h1 span { display: block; color: var(--blau-hell); font-weight: 400; }
.buehne__fuss {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 28px; border-top: 1px solid rgba(251,251,251,.22); padding-top: 28px;
}
.buehne__fuss p { margin: 0; max-width: 640px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; }
.buehne__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* Kopf der Unterseiten: dieselbe Sprache, halbe Hoehe. */
.kopfstueck {
  position: relative; min-height: 58vh; display: grid; align-items: end;
  background: var(--dunkel); color: var(--grund); overflow: hidden;
}
.kopfstueck--schmal { min-height: 42vh; }
.kopfstueck__innen { position: relative; padding: 170px var(--rand) 56px; width: 100%; }
.kopfstueck h1 {
  margin: 0; max-width: 20ch;
  font-size: clamp(32px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -.025em;
  /* „Datenschutzerklärung" ist am Telefon breiter als der Schirm. Ohne
     Trennung stand das Wort bündig an der Kante und sah aus, als sei es
     abgeschnitten. */
  hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.kopfstueck__zeile { margin: 22px 0 0; max-width: 60ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--text-dunkel); }

.krumen { margin: 0 0 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--blau-hell); }
.krumen a:hover { color: var(--grund); }
.krumen span { opacity: .5; margin: 0 8px; }

/* ------------------------------------------------------------------ Band */
.band { padding: var(--band) var(--rand); }
.band__innen { max-width: var(--breit); margin: 0 auto; }
.band--flaeche { background: var(--flaeche); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.band--dunkel { background: var(--dunkel); color: var(--grund); }
.band--dunkel .kicker { color: var(--blau-hell); }
.band--dunkel p { color: var(--text-dunkel); }
.band--eng { padding-top: clamp(48px, 6vw, 90px); padding-bottom: clamp(48px, 6vw, 90px); }

.kopfzeile {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 44px;
}
.kopfzeile h2 { font-size: clamp(28px, 3.2vw, 44px); }
.kopfzeile p { margin: 0; max-width: 460px; font-size: 16px; line-height: 1.7; color: var(--text); }
.kopfzeile__satz { margin: 0; max-width: 36ch; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }

/* Fliesstext: Ueberschrift links, Text rechts, wie im Entwurf. */
.text-band { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
@media (max-width: 899px) { .text-band { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.text-band h1, .text-band h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.12; }
.text-band__inhalt { font-size: clamp(16px, 1.15vw, 17px); line-height: 1.8; color: var(--text); }
.text-band__inhalt h2 { margin: 36px 0 14px; font-size: clamp(20px, 1.8vw, 26px); color: var(--tinte); }
.text-band__inhalt h2:first-child { margin-top: 0; }
.text-band__inhalt h3 { margin: 30px 0 12px; font-size: 19px; color: var(--tinte); }
.text-band__inhalt ul, .text-band__inhalt ol { margin: 0 0 1rem; padding-left: 1.2rem; }
.text-band__inhalt li { margin-bottom: .35rem; }
.text-band__inhalt a { color: var(--blau-tief); text-decoration: underline; text-underline-offset: 3px; }
.text-band__bild { margin-top: 40px; }

/* Anapher: die Wenn-Zeilen als Liste mit Marke ------------------------- */
.anapher { display: grid; gap: 0; }
.anapher__zeile {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px;
  padding: 26px 0; border-top: 1px solid var(--linie);
}
.anapher__zeile:last-child { border-bottom: 1px solid var(--linie); }
.anapher__wort { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blau-tief); padding-top: 4px; }
.anapher__satz { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--text); }
@media (max-width: 599px) { .anapher__zeile { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* Zitat mit Foto -------------------------------------------------------- */
.zitatband { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--dunkel); color: var(--grund); }
@media (max-width: 899px) { .zitatband { grid-template-columns: minmax(0, 1fr); } }
.zitatband__bild { width: 100%; height: 100%; min-height: 420px; object-fit: cover; filter: grayscale(1); }
.zitatband__innen { padding: clamp(40px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.zitatband__strich { width: 40px; height: 2px; background: var(--blau); }
.zitatband blockquote { margin: 0; font-size: clamp(26px, 3vw, 46px); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; }
.zitatband p { margin: 0; max-width: 46ch; color: var(--text-dunkel); }

.trennzitat { background: var(--flaeche); padding: clamp(56px, 8vw, 120px) var(--rand); text-align: center; }
.trennzitat blockquote { margin: 0 auto; max-width: 20ch; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.08; font-weight: 600; letter-spacing: -.025em; }

/* Anwaltsleiste --------------------------------------------------------- */
.leute { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; background: var(--linie); }
.person { position: relative; display: block; background: var(--dunkel); overflow: hidden; }
.person img { width: 100%; aspect-ratio: 376 / 500; object-fit: cover; filter: grayscale(1); transition: transform .5s var(--kurve), filter .4s; }
.person:hover img { transform: scale(1.05); }
.person__schild {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 18px 18px; color: var(--grund);
  background: linear-gradient(180deg, rgba(15,23,32,0) 0%, rgba(15,23,32,.88) 70%);
}
.person__name { display: block; font-size: 15px; font-weight: 600; }
.person__fach { display: block; font-size: 12px; line-height: 1.35; color: var(--blau-hell); margin-top: 3px; }
/* Kein einzelnes Wortstueck in der letzten Zeile: Bei Jens Hermann stand
   am Telefon die letzte Silbe allein unter vier vollen Zeilen. */
.person__fach, .profil__rolle, .jurist__fach { text-wrap: pretty; overflow-wrap: break-word; hyphens: auto; }

/* Rechtsgebiete: ein Aufklapper ---------------------------------------- */
/* Knopf und Feld stehen im Quelltext als Paar. Am Telefon klappt das Feld
   deshalb unter seinem Knopf auf. Ab 900px legt das Raster alle Knoepfe in
   die linke und alle Felder uebereinander in die rechte Spalte, wo immer
   nur das offene sichtbar ist: dieselbe Optik wie vorher. */
.gruppen { display: block; background: var(--grund); border: 1px solid var(--linie); }
.gruppen__knopf {
  all: unset; cursor: pointer; box-sizing: border-box; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--linie);
  font-size: 17px; font-weight: 500; color: var(--text);
  transition: background .2s, color .2s;
}
.gruppen__knopf:hover { background: var(--flaeche); color: var(--tinte); }
.gruppen__knopf[aria-expanded="true"] { background: var(--flaeche); color: var(--tinte); font-weight: 600; box-shadow: inset 3px 0 0 var(--blau); }
.gruppen > :last-child { border-bottom: 0; }

@media (min-width: 900px) {
  /* Eine Zeile je Knopf, dazu eine leere Auffangzeile: Ohne sie verteilt
     das Raster die Hoehe des Feldes auf die Knopfzeilen, und der offene
     Knopf wird so hoch wie das Feld daneben. */
  .gruppen { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr);
             grid-template-rows: repeat(var(--gruppen, 5), min-content) 1fr;
             gap: 2px; background: var(--linie); }
  .gruppen__knopf { grid-column: 1; padding: 22px 24px; background: var(--grund); }
  .gruppen__feld { grid-column: 2; grid-row: 1 / -1; }
}
.gruppen__zahl { font-size: 12px; font-weight: 500; color: var(--grau); letter-spacing: .06em; }
.gruppen__feld {
  background: var(--dunkel); color: var(--grund);
  padding: 24px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 900px) {
  .gruppen__feld { padding: clamp(32px, 4vw, 56px); gap: 26px; min-height: 420px; }
}
.gruppen__feld[hidden] { display: none; }
.gruppen__feld h3 { font-size: clamp(24px, 3vw, 42px); line-height: 1.08; letter-spacing: -.02em; }
.gruppen__feld > p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--text-dunkel); }
.marken { display: flex; flex-wrap: wrap; gap: 10px; }
.marke-pille {
  display: inline-flex; align-items: center; padding: 11px 16px;
  border: 1px solid rgba(251,251,251,.28); border-radius: 999px;
  font-size: 14px; font-weight: 500;
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}
.marke-pille:hover { background: var(--blau); border-color: var(--blau); color: var(--tiefe); transform: translateY(-2px); }
.gruppen__fuss {
  margin-top: auto; display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(251,251,251,.18); padding-top: 20px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--blau-hell);
}

/* Gebietsliste als Raster ---------------------------------------------- */
.gebiete { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: var(--linie); border: 1px solid var(--linie); }
.gebiet {
  background: var(--grund); padding: 26px 24px; min-height: 148px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  font-size: 17px; font-weight: 500;
  transition: background .2s, color .2s;
}
.gebiet__fuss { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gebiet:hover { background: var(--dunkel); color: var(--grund); }
/* Der Name darf schrumpfen und umbrechen, "ansehen" behaelt seine Breite.
   Sonst schiebt "Ehevertrag & Zugewinnausgleich" die Seite auf 390 Pixeln auf. */
.gebiet__name { min-width: 0; line-height: 1.35; hyphens: auto; }
/* Ohne Silbentrennung bricht der Browser lange Zusammensetzungen hart
   ab, mitten im Wort und ohne Strich. */
.marke-pille, .pille { hyphens: auto; }
.ganzes-wort { hyphens: none; }
.formular__stern { color: var(--blau-tief); }
.formular__hinweis a { text-decoration: underline; text-underline-offset: 3px; }

/* Angaben zum Anbieter des Videos --------------------------------------- */
.video__details {
  all: unset; cursor: pointer; color: var(--blau-tief);
  text-decoration: underline; text-underline-offset: 3px;
}
.video__details:hover { color: var(--tinte); }
.anbieter {
  width: min(760px, calc(100vw - 32px)); max-height: 82vh; padding: 0;
  border: 0; border-radius: 2px; background: var(--grund); color: var(--text);
  box-shadow: 0 30px 80px rgba(15,23,32,.3);
}
.anbieter::backdrop { background: rgba(15,23,32,.55); }
.anbieter__innen { padding: clamp(24px, 3vw, 40px); overflow-y: auto; max-height: calc(82vh - 84px); }
.anbieter__innen h2 { margin: 0 0 20px; font-size: clamp(22px, 2.4vw, 30px); }
.anbieter__innen h3 { margin: 28px 0 10px; font-size: 16px; }
.anbieter__innen p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; }
.anbieter__innen p strong { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--grau); }
.anbieter__tabelle { overflow-x: auto; }
.anbieter__tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anbieter__tabelle th, .anbieter__tabelle td {
  text-align: left; vertical-align: top; padding: 8px 10px;
  border-bottom: 1px solid var(--linie);
}
.anbieter__tabelle th { font-weight: 600; white-space: nowrap; }
.anbieter__tabelle td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.anbieter__fuss { padding: 16px clamp(24px, 3vw, 40px); border-top: 1px solid var(--linie); text-align: right; }
.gebiet__mehr { flex: 0 0 auto; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.gebiet:hover .gebiet__mehr { color: var(--blau-hell); }
/* Die kleinen Portraets in der Zeile: wer die Liste durchgeht, sieht
   sofort, bei wem das Gebiet liegt. */
.gebiet__koepfe { display: flex; flex: 0 0 auto; align-self: center; }
.gebiet__koepfe img {
  width: 30px; height: 30px; border-radius: 50%; margin-left: -10px;
  object-fit: cover; object-position: center 15%; filter: grayscale(1);
  border: 2px solid var(--grund); transition: border-color .2s;
}
.gebiet__koepfe img:first-child { margin-left: 0; }
.gebiet:hover .gebiet__koepfe img { border-color: var(--dunkel); }

/* Zahlen ---------------------------------------------------------------- */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.zahl { border-left: 1px solid var(--linie-stark); padding-left: 24px; }
.zahl__wert { margin: 0; font-size: clamp(46px, 6vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--tinte); }
.zahl__wert small { font-size: .5em; color: var(--blau-tief); }
.zahl__label { margin: 12px 0 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--text); }

/* Laufband der Auszeichnungen ------------------------------------------ */
/* Bewegt wird der Rollbalken, nicht die Spur. 73 Auszeichnungen, jede
   doppelt, ergeben eine Spur von rund 117.000 Pixeln; als verschobene Ebene
   sprengt die jede Flaeche, die WebKit am Telefon zusammensetzen kann, und
   das Band blieb auf dem iPhone leer (gemeldet am 01.10.2026). Als
   Rollbereich zeichnet der Browser nur den sichtbaren Ausschnitt. Das
   Weiterruecken macht neu.js; ohne JavaScript bleibt das Band von Hand
   verschiebbar und zeigt alle Auszeichnungen.

   Kein -webkit-overflow-scrolling: touch. Es ist seit iOS 13 ohne Wirkung
   und erzwang davor genau die eigene Ebene, an der das Band gescheitert
   ist. */
.laufband {
  border-top: 1px solid var(--linie); padding: 18px 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.laufband::-webkit-scrollbar { display: none; }
.laufband__spur { display: inline-flex; gap: 0; white-space: nowrap; }
.laufband__stueck { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.laufband__stueck::after { content: ""; width: 5px; height: 5px; background: var(--blau); flex: 0 0 5px; }

/* Teaser ---------------------------------------------------------------- */
.teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 3vw, 48px); }
.teaser__karte { display: block; }
.teaser__bild { overflow: hidden; }
.teaser__bild img { width: 100%; aspect-ratio: 580 / 405; object-fit: cover; filter: grayscale(1); transition: transform .55s var(--kurve), filter .4s; }
.teaser__karte:hover .teaser__bild img { transform: scale(1.045); filter: grayscale(.2); }
.teaser__karte .kicker { margin: 22px 0 10px; }
.teaser__karte h3 { font-size: clamp(20px, 2vw, 27px); }
.teaser__karte p { margin: 12px 0 18px; color: var(--text); font-size: 15px; line-height: 1.7; }

/* Bewertungen ----------------------------------------------------------- */
.bewertungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px; background: var(--linie); border: 1px solid var(--linie); }
.bewertung { background: var(--grund); padding: 34px 28px; display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
/* align-self, sonst streckt die Spalte das Logo auf ihre volle Breite und
   max-height staucht es dann in der Hoehe: Das Google-Logo stand doppelt
   so breit wie hoch, wie es sein sollte. */
.bewertung img { max-height: 34px; width: auto; align-self: start; object-fit: contain; }
.bewertung--wort { background: var(--flaeche); }
.bewertung--wort p { margin: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }

/* Profile (Team) -------------------------------------------------------- */
.profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(16px, 2vw, 30px); }
.profil img { width: 100%; aspect-ratio: 376 / 500; object-fit: cover; filter: grayscale(1); }
.profil__name { margin: 16px 0 2px; font-size: 16px; font-weight: 600; }
.profil__rolle { margin: 0; font-size: 13px; color: var(--text); }

/* Personen am Telefon: ein Streifen statt einer Spalte -------------------- */
/* Acht Juristen und zehn Leute aus dem Team untereinander ergeben am Telefon
   zwei Bildschirmlaengen, durch die niemand scrollt. Nebeneinander, mit
   angeschnittener naechster Karte als Hinweis, dass es weitergeht. */
@media (max-width: 599px) {
  .leute, .profile {
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .leute::-webkit-scrollbar, .profile::-webkit-scrollbar { display: none; }
  .leute > *, .profile > * { flex: 0 0 62%; scroll-snap-align: start; }
}

/* Die Juristen als Raster ------------------------------------------------
   Eine Darstellung, nicht mehr zwei. Das Raster traegt drei Spalten, jede
   Karte ihre Akte. Beim Aufklappen schiebt das Skript die Akte als eigene
   Zeile ueber die volle Breite zwischen die Karten (.jurist__schub); das
   Raster selbst bleibt stehen. Ohne Skript steht die Akte offen in der
   Karte, die Seite ist dann laenger und vollstaendig. */
.juristen__filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 26px;
}
.juristen__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  all: unset; cursor: pointer; padding: 9px 18px;
  border: 1px solid var(--linie-stark); border-radius: 999px;
  font-size: 13px; color: var(--text);
  transition: background .2s, color .2s, border-color .2s;
}
.filter:hover { border-color: var(--tinte); color: var(--tinte); }
.filter[aria-pressed="true"] { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }
.juristen__leer { margin: 0 0 26px; font-size: 15px; color: var(--grau); }
.juristen__leer[hidden] { display: none; }

.juristen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px); align-items: start;
}
.jurist { display: flex; flex-direction: column; min-width: 0; }
.jurist[data-aus] { display: none; }
.jurist__kopf {
  all: unset; cursor: pointer; position: relative; display: block;
  background: var(--dunkel); overflow: hidden;
}
.jurist__kopf img {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: center 12%; filter: grayscale(1);
  transition: transform .5s var(--kurve);
}
.jurist__kopf:hover img { transform: scale(1.05); }
.jurist__schild {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px;
  color: var(--grund); background: linear-gradient(transparent, rgba(15,23,32,.9));
}
.jurist__name { display: block; font-size: 16px; font-weight: 600; }
.jurist__fach { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: var(--blau-hell); }
.jurist__zeichen {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 21px; line-height: 1;
  background: rgba(251,251,251,.92); color: var(--tinte);
  transition: transform .3s var(--kurve), background .2s, color .2s;
}
.jurist__kopf:hover .jurist__zeichen { background: var(--blau); color: var(--tiefe); }
.jurist[data-offen] .jurist__zeichen { transform: rotate(45deg); background: var(--blau); color: var(--tiefe); }
.jurist__gebiete { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.pille {
  padding: 5px 12px; border: 1px solid var(--linie-stark); border-radius: 999px;
  font-size: 12px; color: var(--text);
  transition: background .2s, color .2s, border-color .2s;
}
.pille:hover { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--grund); }

/* Die Akte. Mit Skript wandert sie in den Schub, ohne Skript bleibt sie,
   wo sie steht, und ist sichtbar. */
.jurist__schub { grid-column: 1 / -1; }
.jurist > .jurist__akte { display: none; }
.kein-js .jurist > .jurist__akte { display: block; }
.jurist__akte {
  border-top: 2px solid var(--tinte); padding: 30px 0 36px;
  animation: akte-auf .4s var(--kurve) both;
}
@keyframes akte-auf { from { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .jurist__akte { animation: none; } }
.jurist__akte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-bottom: 28px; }
.jurist__akte-kopf img {
  width: 86px; height: 86px; flex: 0 0 86px; border-radius: 50%;
  object-fit: cover; object-position: center 15%; filter: grayscale(1);
}
.jurist__akte-name { margin: 0; font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -.01em; }
.jurist__akte-fach { margin: 4px 0 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.jurist__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.jurist__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 36px; }
.jurist__spalten h4 { margin: 0 0 14px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--blau-tief); font-weight: 600; }
.jurist__spalten ul { margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.7; color: var(--text); }
.jurist__spalten li { margin-bottom: 6px; }
.vita li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.vita b { font-weight: 600; color: var(--tinte); }
@media (max-width: 899px) { .juristen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) {
  .juristen { grid-template-columns: minmax(0, 1fr); }
  .jurist__wege { margin-left: 0; }
}

/* Ansprechpartner: dieselbe Matrix, vom Rechtsgebiet aus gelesen -------- */
.ansprechpartner { display: flex; flex-wrap: wrap; gap: 20px; }
.ansprech {
  flex: 1 1 250px; max-width: 340px;
  background: var(--grund); border: 1px solid var(--linie); padding: 26px 24px;
}
.ansprech img {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center 15%; filter: grayscale(1);
}
.ansprech__name { margin: 16px 0 0; font-size: 17px; font-weight: 600; }
.ansprech__name a:hover { color: var(--blau-tief); }
.ansprech__fach { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); }
.ansprech__wege { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; }
.ansprech__wege a { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--blau-tief); }
.ansprech__wege a:hover { color: var(--tinte); }

/* Gesichter an einer Gruppe oder einem Gebiet --------------------------- */
.koepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.kopf-marke {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--grund);
}
.kopf-marke img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; object-position: center 15%; filter: grayscale(1);
  transition: filter .3s;
}
.kopf-marke:hover { color: var(--blau); }
.kopf-marke:hover img { filter: none; }

/* Notfall --------------------------------------------------------------- */
.notfall { position: relative; background: var(--dunkel); color: var(--grund); overflow: hidden; }
.notfall__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(1); }
.notfall__innen { position: relative; max-width: var(--breit); margin: 0 auto; padding: clamp(56px, 7vw, 110px) var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: 36px; justify-content: space-between; }
.notfall h2 { font-size: clamp(24px, 2.8vw, 40px); }
.notfall__nr { display: inline-flex; align-items: center; gap: 14px; margin-top: 18px; font-size: clamp(26px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.02em; color: var(--blau-hell); }

/* Formular -------------------------------------------------------------- */
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld--weit { grid-column: 1 / -1; }
.feld label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--text); }
.feld input, .feld textarea, .feld select {
  font: inherit; font-size: 16px; padding: 14px 16px;
  color: var(--tinte); background: var(--grund);
  border: 1px solid var(--linie-stark); border-radius: 0;
}
.feld textarea { min-height: 160px; resize: vertical; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; }
.formular__hinweis { margin: 0; font-size: 13px; color: var(--grau); max-width: 52ch; }

/* Video ----------------------------------------------------------------- */
.video__rahmen { position: relative; background: var(--dunkel); cursor: pointer; }
.video__rahmen img { width: 100%; filter: grayscale(1); }
.video__rahmen iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }
.video__knopf {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer;
  background: var(--blau); color: var(--tiefe); border: 0; font-size: 26px;
  transition: transform .25s var(--kurve);
}
.video__rahmen:hover .video__knopf { transform: translate(-50%, -50%) scale(1.08); }
.video__hinweis { margin: 14px 0 0; font-size: 13px; color: var(--grau); }

/* Zweispalter ----------------------------------------------------------- */
.zweispalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(28px, 4vw, 64px); font-size: 15px; line-height: 1.8; color: var(--text); }
.zweispalter h2 { margin: 0 0 12px; font-size: 19px; color: var(--tinte); }
.zweispalter a { color: var(--blau-tief); }
.zweispalter a:hover { text-decoration: underline; }

/* Sprungmarken ---------------------------------------------------------- */
.marken-zeile { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px var(--rand); border-bottom: 1px solid var(--linie); background: var(--grund); }
.marken-zeile a { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 16px; border: 1px solid var(--linie-stark); border-radius: 999px; color: var(--text); }
.marken-zeile a:hover { background: var(--tinte); border-color: var(--tinte); color: var(--grund); }

/* ------------------------------------------------------------------ Fuss */
.fuss { background: var(--dunkel); color: var(--grund); padding: clamp(56px, 7vw, 110px) var(--rand) 40px; }
.fuss__innen { max-width: var(--breit); margin: 0 auto; }
.fuss__oben { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 44px; align-items: end; }
.fuss__spruch { font-size: clamp(28px, 3.6vw, 54px); line-height: 1.05; font-weight: 600; letter-spacing: -.03em; }
.fuss__spruch span { display: block; color: var(--blau-hell); font-weight: 400; }
.fuss__kontakt p { margin: 0 0 4px; color: var(--text-dunkel); }
.fuss__tel { display: block; margin: 14px 0 6px; font-size: clamp(19px, 2vw, 26px); font-weight: 600; color: var(--grund); }
.fuss__unten {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(251,251,251,.18);
  display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: space-between;
  font-size: 13px; color: var(--text-dunkel);
}
.fuss__unten a:hover { color: var(--grund); }
.fuss__verweise { display: flex; flex-wrap: wrap; gap: 18px; }

/* ----------------------------------------------------------- Assistent */
.assistent { display: flex; flex-direction: column; height: 100%; }
.assistent__innen {
  flex: 1; min-height: 0;
  max-width: var(--breit); margin: 0 auto;
  padding: 28px var(--rand) 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 44px;
  box-sizing: border-box;
}
/* Die Leiste von Sir Wilfred. Sie faehrt beim Oeffnen von oben ein, kurz
   nach der Flaeche, damit die Bewegung eine Reihenfolge hat. */
.wilfred {
  display: flex; align-items: center; gap: 16px;
  padding: 13px var(--rand); border-bottom: 1px solid rgba(251,251,251,.14);
  background: linear-gradient(180deg, rgba(97,159,206,.18), transparent);
  transform: translateY(-100%); opacity: 0;
  transition: transform .5s var(--kurve), opacity .3s;
}
body.chat-offen .wilfred { transform: none; opacity: 1; transition-delay: .28s; }
.wilfred__bild { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; background: rgba(251,251,251,.08); }
.wilfred__namen { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wilfred__namen b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--grund); }
.wilfred__namen i { font-style: normal; font-size: 13px; color: var(--text-dunkel); }
.wilfred__da {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--blau-hell);
}
.wilfred .assistent__zu { margin-left: 8px; flex: 0 0 auto; }
@media (max-width: 639px) {
  .wilfred { padding: 10px var(--rand); gap: 12px; }
  .wilfred__bild { width: 42px; height: 42px; flex-basis: 42px; }
  .wilfred__namen i { display: none; }
  .wilfred__da { display: none; }
  .wilfred .assistent__zu { margin-left: auto; }
}
.assistent__punkt { width: 8px; height: 8px; border-radius: 50%; background: #7BD389; }
.assistent__zu {
  all: unset; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(251,251,251,.28); border-radius: 50%; font-size: 18px;
}
.assistent__zu:hover { background: rgba(251,251,251,.14); }
.assistent__gespraech { display: flex; flex-direction: column; min-height: 0; }
.assistent__lauf { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding-right: 8px; }
.blase {
  max-width: min(560px, 86%); padding: 14px 18px; font-size: 15px; line-height: 1.55;
  border-radius: 18px; animation: einblenden .35s ease both;
  /* Ohne das staucht die Flexbox die oberen Blasen zu Strichen zusammen,
     statt den Lauf scrollen zu lassen. Am Telefon faellt es zuerst auf,
     und mit dem Modell faellt es oefter auf als mit dem Gespraechsbaum:
     die Antworten sind laenger. */
  flex: none;
  /* Das Modell setzt Absaetze. Ohne dies laeuft die ganze Antwort zu einem
     Block zusammen, und lange Woerter sprengen die Blase. */
  white-space: pre-wrap; overflow-wrap: break-word;
}
/* Solange das Modell rechnet, steht eine Blase mit drei Punkten da. Ohne
   sie sieht die Flaeche nach dem Absenden zwei Sekunden lang tot aus. */
.blase--tippt { letter-spacing: 3px; opacity: .6; animation: einblenden .35s ease both, pulsen 1.4s ease-in-out infinite; }
@keyframes pulsen { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .blase--tippt { animation: none; } }
/* Die Blasen von Sir Wilfred tragen sein Gesicht, aber nur die erste je
   Gruppe: sonst steht er sechsmal untereinander. */
.blase--bot {
  position: relative; align-self: flex-start; margin-left: 46px;
  max-width: min(560px, calc(100% - 60px));
  background: rgba(251,251,251,.08); border: 1px solid rgba(251,251,251,.14);
  border-bottom-left-radius: 4px;
}
.blase--bot::before {
  content: ""; display: none; position: absolute; left: -46px; bottom: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(251,251,251,.08) url("sir-wilfred.png") center/cover;
}
.assistent__lauf > .blase--bot:first-child::before,
.blase--ich + .blase--bot::before { display: block; }
.blase--ich { align-self: flex-end; background: var(--blau); color: var(--tiefe); border-bottom-right-radius: 4px; font-weight: 500; }
@keyframes einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
/* Der Knopf, der weiterfuehrt. Zwei gleich aussehende Knoepfe nebeneinander
   lassen offen, welcher der gewoehnliche Weg ist. */
.chip--haupt { background: var(--blau); border-color: var(--blau); color: var(--tiefe); }
.chip--haupt:hover { background: var(--blau-hell); border-color: var(--blau-hell); color: var(--tiefe); }
.chip {
  all: unset; cursor: pointer; padding: 9px 14px;
  border: 1px solid rgba(157,197,229,.5); border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--blau-hell);
  transition: background .2s, color .2s, border-color .2s;
}
.chip:hover { background: var(--blau); color: var(--tiefe); border-color: var(--blau); }
.assistent__eingabe {
  display: flex; gap: 8px; align-items: center; margin-top: 16px;
  padding: 6px 6px 6px 20px; border: 1px solid rgba(251,251,251,.28); border-radius: 999px;
  background: rgba(251,251,251,.04);
}
.assistent__eingabe input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--grund); font: inherit; font-size: 15px; }
.assistent__senden { all: unset; cursor: pointer; padding: 12px 20px; background: var(--blau); color: var(--tiefe); font-size: 13px; font-weight: 600; border-radius: 999px; }
.assistent__senden svg { display: none; }
.assistent__senden:hover { background: var(--grund); }
.assistent__spur { display: flex; flex-direction: column; gap: 20px; min-height: 0; border-left: 1px solid rgba(251,251,251,.14); padding-left: 30px; }
/* Was noch gebraucht wird, damit die Sache in die Kanzlei gehen kann. Die
   Liste darunter zeigt, was schon dasteht; dieser Satz zeigt die Luecke. */
.assistent__fehlt {
  margin: -8px 0 0; font-size: 13px; line-height: 1.5; color: var(--blau-hell);
}
.assistent__fehlt b { font-weight: 600; color: #fbfbfb; }
.assistent__spur h2 { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blau-hell); font-weight: 500; }
/* Die Kopfzeile ist ein Knopf, weil sie am Telefon die Spur auf- und
   zuklappt. Auf der breiten Flaeche steht alles offen, dort ruehrt sie
   niemand an: kein Zeiger, kein Pfeil, keine Aufnahme in die Tabfolge. */
.assistent__kopfzeile {
  all: unset; display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; width: 100%; box-sizing: border-box;
}
.assistent__pfeil { display: none; flex: none; align-self: center; color: var(--blau-hell); transition: transform .25s ease; }
.assistent__falte { display: contents; }
.assistent__stand { font-size: 12px; color: var(--grau); }
.assistent__balken { height: 2px; background: rgba(251,251,251,.12); }
.assistent__balken i { display: block; height: 2px; width: 0; background: var(--blau); transition: width .5s ease; }
/* Der Ring um einen erledigten Punkt ist ein box-shadow und zaehlt nicht
   zur Breite. Ohne diesen Innenabstand schneidet der scrollende Kasten ihn
   links und beim obersten Punkt auch oben ab. */
.schritte { list-style: none; margin: 0; padding: 5px 0 0 5px; overflow-y: auto; min-height: 0; }
.schritte li { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px; padding: 0 0 22px; }
.schritte li::before { content: ""; position: absolute; left: 9px; top: 20px; bottom: 0; width: 2px; background: rgba(251,251,251,.12); }
.schritte li:last-child::before { display: none; }
.schritte b { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(251,251,251,.3); background: transparent; transition: background .3s, border-color .3s, box-shadow .3s; }
.schritte li[data-an] b { background: var(--blau); border-color: var(--blau); box-shadow: 0 0 0 4px rgba(97,159,206,.2); }
.schritte span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schritte em { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.schritte li[data-an] em { color: var(--blau-hell); }
.schritte i { font-style: normal; font-size: 14px; line-height: 1.4; color: var(--text-dunkel); overflow-wrap: anywhere; }
.assistent__hinweis { margin: 0; font-size: 12px; line-height: 1.5; color: var(--grau); }

/* Auf dem Telefon bleibt nur das Gespraech. Die Spur braucht eine zweite
   Spalte, die dort nicht da ist, und sie frisst sonst die Hoehe, die das
   Gespraech braucht. */
@media (max-width: 899px) {
  .assistent__innen { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; }
  /* Am Telefon steht die Spur ueber dem Gespraech und ist zugeklappt: eine
     Zeile mit dem Stand und ein Balken. Wer wissen will, was schon dasteht
     und was fehlt, tippt sie auf. Zugeklappt kostet sie 40 Pixel, offen
     nimmt sie sich hoechstens die halbe Hoehe und scrollt in sich. */
  .assistent__spur {
    order: -1; gap: 10px; border-left: 0; padding: 0 0 14px;
    border-bottom: 1px solid rgba(251,251,251,.14); margin-bottom: 14px;
  }
  .assistent__kopfzeile { cursor: pointer; padding: 2px 0; }
  .assistent__pfeil { display: block; }
  .assistent__kopfzeile[aria-expanded="true"] .assistent__pfeil { transform: rotate(180deg); }
  /* Das Wort „Senden" kostet 60 Pixel, die dem Eingabefeld fehlen: Bei 375
     Pixeln Breite bricht der Platzhalter mitten im Wort ab. Am Telefon steht
     dort deshalb der Pfeil, den jeder aus seinen anderen Gespraechen kennt. */
  .assistent__senden { padding: 0; width: 40px; height: 40px; display: grid; place-items: center; }
  .assistent__senden span { display: none; }
  .assistent__senden svg { display: block; }

  .assistent__falte { display: flex; flex-direction: column; gap: 14px; max-height: 40vh; overflow-y: auto; }
  /* Der Stand ist die wichtigste Zeile der Spur und stand nach jedem
     Scrollen halb unter dem Balken. Er bleibt jetzt oben kleben. */
  .assistent__fehlt {
    position: sticky; top: 0; z-index: 1; margin: 0; padding: 2px 0 6px;
    background: var(--dunkel);
  }
  .assistent__kopfzeile[aria-expanded="false"] + .assistent__balken + .assistent__falte { display: none; }
  .schritte li { padding-bottom: 16px; }
  /* Der Hinweis auf das Sprachmodell steht am Telefon nicht noch einmal in
     der Spur. Er kostet dort 100 Pixel und wiederholt Wort fuer Wort, was
     in der Einwilligung stand, die vor dem ersten Satz zu lesen war. */
  .assistent__hinweis { display: none; }

  /* Solange Sir Wilfred spricht, gehoert ihm der Bildschirm. Kopfleiste und
     Streifen stehen unter der Flaeche und waren am Telefon nur der Grund,
     warum das Gespraech 132 Pixel zu wenig hatte. Geschlossen wird ueber
     das Kreuz in seiner eigenen Kopfzeile. */
  body.chat-offen .leiste, body.chat-offen .streifen { display: none; }
  body.chat-offen .chatflaeche { height: var(--chat-h, 100dvh); }
}

/* ------------------------------------------------- Einblenden beim Scrollen */
[data-zeig] { opacity: 0; transform: translateY(22px); }
[data-zeig].da { opacity: 1; transform: none; transition: opacity .7s var(--kurve), transform .7s var(--kurve); }
@media (prefers-reduced-motion: reduce) {
  [data-zeig] { opacity: 1; transform: none; }
  .buehne__bild { animation: none; }
}
/* Ohne JavaScript bleibt nichts unsichtbar. */
.kein-js [data-zeig] { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Probeleiste */
.probe {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: baseline;
  padding: 9px var(--rand); background: var(--tiefe); color: var(--grund);
  font-size: 12px; line-height: 1.35; letter-spacing: .02em;
}
.probe p { margin: 0; }
.probe[hidden] { display: none !important; }
.probe__zu {
  all: unset; cursor: pointer; flex: 0 0 auto;
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid rgba(251,251,251,.3); border-radius: 50%;
  font-size: 15px; line-height: 1; color: var(--grund);
  transition: background .2s, border-color .2s;
}
.probe__zu:hover { background: rgba(251,251,251,.16); border-color: rgba(251,251,251,.6); }
.probe b { color: var(--blau-hell); font-weight: 600; }
.probe a { color: var(--blau-hell); text-decoration: underline; text-underline-offset: 3px; }
.probe__wink { margin-left: auto; opacity: .6; }
@media (max-width: 899px) { .probe__wink { display: none; } }
@media (max-width: 619px) {
  .probe__lang { display: none; }
  .probe { gap: 10px; }
}
.probe__kurz { display: none; }
@media (max-width: 619px) { .probe__kurz { display: inline; } }

/* Das Bestandsformular fuehrt ein unbeschriftetes Textfeld als Spam-Fang.
   Es bleibt im Markup, damit der spaetere Mailweg es auswerten kann. */
.feld--fang { position: absolute; left: -9999px; }
.wahlgruppe { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.wahlgruppe label { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--tinte); }
.wahlgruppe input { width: 18px; height: 18px; accent-color: var(--blau); }

/* Erreichbarkeit auf der Kontaktseite. Zwei Spalten je Zeile, damit Tag und
   Zeit auf einer Grundlinie stehen; am Telefon untereinander. */
.zeiten {
  max-width: 720px; padding: clamp(24px, 3vw, 36px);
  background: var(--flaeche); border: 1px solid var(--linie);
}
.zeiten h2 { margin: 0 0 20px; font-size: clamp(20px, 2vw, 26px); }
.zeiten__liste { margin: 0; display: grid; gap: 2px; }
.zeiten__liste > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
  align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--linie-stark);
}
.zeiten__liste > div:last-child { border-bottom: 0; }
.zeiten__liste dt { margin: 0; font-weight: 600; color: var(--tinte); }
.zeiten__liste dd {
  margin: 0; font-variant-numeric: tabular-nums; color: var(--text); text-align: right;
}
.zeiten__fuss { margin: 20px 0 0; font-size: 15px; line-height: 1.7; color: var(--text); }
.zeiten__fuss a { color: var(--blau-tief); font-weight: 600; white-space: nowrap; }
@media (max-width: 479px) {
  .zeiten__liste > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .zeiten__liste dd { text-align: left; }
}

/* Antwort des Formulars. Sie steht ueber den Feldern, weil der Blick nach dem
   Klick dort hingeht, und traegt ihre Farbe am Rand statt in der Flaeche. */
.formular__meldung {
  grid-column: 1 / -1; margin: 0 0 8px; padding: 14px 18px;
  border-left: 3px solid var(--linie-stark); background: var(--flaeche);
  font-size: 15px; line-height: 1.65; color: var(--text);
}
.formular__meldung[data-gut="1"] { border-left-color: #2E7D5B; }
.formular__meldung[data-gut="0"] { border-left-color: #B3261E; }

/* ------------------------------------------------- Der Ablauf des Assistenten */
/* Senkrecht statt waagerecht: Acht Stationen nebeneinander waeren am Telefon
   eine Tapetenrolle. Untereinander liest sich derselbe Weg auf jeder Breite.
   Die Farben sind die des hellen Grundes, nicht die des Assistenten. */
.ablauf__rahmen { margin: 26px 0; }
.ablauf { width: 100%; height: auto; max-width: 520px; display: block; }
.ablauf__halt { cursor: pointer; }
.ablauf__feld {
  fill: var(--grund); stroke: var(--linie-stark); stroke-width: 1;
  transition: fill .2s, stroke .2s;
}
.ablauf__halt:hover .ablauf__feld,
.ablauf__halt:focus-visible .ablauf__feld { fill: var(--flaeche); stroke: var(--blau); }
.ablauf__halt.ist-an .ablauf__feld { fill: var(--flaeche); stroke: var(--blau-tief); stroke-width: 2; }
.ablauf__halt:focus-visible { outline: none; }
.ablauf__punkt { fill: var(--grund); stroke: var(--linie-stark); stroke-width: 2; transition: fill .2s, stroke .2s; }
.ablauf__halt.ist-an .ablauf__punkt { fill: var(--blau-tief); stroke: var(--blau-tief); }
.ablauf__ziffer { fill: var(--text); font-size: 11px; font-weight: 600; }
.ablauf__halt.ist-an .ablauf__ziffer { fill: var(--grund); }
.ablauf__titel { fill: var(--tinte); font-size: 14px; font-weight: 500; }
.ablauf__unter { fill: var(--grau); font-size: 12px; }
.ablauf__pfeil { stroke: var(--linie-stark); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ablauf__tafel {
  border-left: 3px solid var(--blau); padding: 4px 0 4px 20px; margin: 0 0 8px;
  min-height: 92px;
}
.ablauf__tafel h3 { margin: 0 0 8px; font-size: 17px; }
.ablauf__tafel p { margin: 0; }
.ablauf__leer { color: var(--grau); }

/* Der Wortlaut der Anweisung. Vorformatiert, weil die Abschnitte im Original
   eine Gliederung tragen, die als Fliesstext verlorenginge. */
.wortlaut { margin: 20px 0; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.wortlaut summary {
  cursor: pointer; padding: 14px 18px; font-weight: 500; color: var(--blau-tief);
  list-style-position: inside;
}
.wortlaut pre {
  margin: 0; padding: 0 18px 18px; max-height: 60vh; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.6; color: var(--text);
}
.knopf--rand { background: transparent; border: 1px solid var(--linie-stark); color: var(--tinte); }