/* Stilblatt der Kanzlei Magold, Walter & Hermann.

   Die Werte stammen aus dem Bestand: Montserrat, #619FCE als Akzent,
   #565655 als Textfarbe, Fliesstext 16/30, Ueberschriften in Versalien
   mit kurzem Strich darunter. Wer die Seiten nebeneinanderlegt, soll
   keinen Unterschied sehen.
*/

/* ------------------------------------------------------------ Schriften */
/* Dieselben Dateien wie im Bestand, hier ausgeliefert statt von Google. */
@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 {
  --blau: #619FCE;
  --text: #565655;
  --grau: #8E8E8D;
  --linie: #EAEAEA;
  --weiss: #FFF;
  --leiste: 80px;
  /* Nachgemessen am Bestand: dort laden fuenf Montserrat-Schnitte, aber
     jede Ueberschrift rendert in Helvetica. Foundation setzt fuer h1 bis h6
     eine eigene Familie, und die hat nie jemand auf Montserrat gestellt.
     Der Nachbau uebernimmt das, damit der Umzug unsichtbar bleibt. Wenn die
     Kanzlei es anders will, steht hier Montserrat und die Sache ist erledigt. */
  --schrift: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --schrift-ueberschrift: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --spalte-links: 16.6667%;
  --spalte-breit: 66.6667%;
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0;
  font-family: var(--schrift);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.menue-offen { overflow: hidden; }

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

/* Wie im Bestand: ein Wort, das laenger ist als seine Spalte, bricht um,
   statt aus dem Kasten zu laufen. */
h1, h2, h3, h4, h5, h6, p, span, .auszeichnung__text { overflow-wrap: break-word; }

p { margin: 0 0 1rem; font-size: 16px; line-height: 30px; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { font-size: 16px; line-height: 30px; }

a { color: var(--text); text-decoration: underline; }
a:hover { color: var(--blau); }

h1, h2, h3, h4 {
  color: var(--text); text-align: left; font-weight: 400;
  font-family: var(--schrift-ueberschrift);
}
h1 { margin: 0 0 45px; font-size: 26px; line-height: 1.4; text-transform: uppercase; }
body.Start h1 { font-size: 28px; }
h2 { margin: 0 0 15px; font-size: 20px; line-height: 1.4; }
h3 { margin: 0 0 30px; font-size: 22px; line-height: 1.4; text-transform: uppercase; }
body.Start h3 { font-size: 24px; }
body.Start h2 { margin: 0 0 15px; font-size: 22px; }
h4 { margin: 0 0 15px; font-size: 18px; line-height: 1.4; font-weight: 500; }

.unterstrich { position: relative; display: inline-block; }
/* Die Ueberschrift eines Textblocks fuellt ihre Spalte; der Strich sitzt
   trotzdem an der linken Kante, weil er absolut liegt. */
.text .text__kopf { display: block; }
.unterstrich::before {
  content: ""; position: absolute; width: 40px; height: 2px;
  left: 0; bottom: -10px; background-color: gray;
}
/* Die Ueberschrift steht mittig, der Strich bleibt an ihrer linken Kante.
   So macht es der Bestand: zentriert wird der Block, nicht der Strich. */
.mitte { display: inline-block; text-align: left; }
.auszeichnungen, .bewertungen > .spalte, .zahlen__innen { text-align: center; }
.auszeichnungen .rolle, .bewertungen__reihe, .zahlen__reihe { text-align: left; }

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

.knopf {
  display: inline-block; padding: 14px 20px; font-size: 16px; font-weight: 700;
  color: var(--weiss); background: var(--blau); border: 2px solid var(--blau);
  text-decoration: none; cursor: pointer; transition: box-shadow .2s ease;
}
.knopf:hover { color: var(--weiss); box-shadow: 0 3px 5px 0 rgba(0,0,0,.2); }
.knopf:focus { color: var(--blau); background: var(--weiss); }

/* --------------------------------------------------------------- Kopfleiste */
.kopfleiste {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1920px; height: var(--leiste);
  background: var(--weiss); z-index: 9999; transition: height .3s linear;
}
.kopfleiste__innen {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%; padding: 0 15px 0 0;
}
.marke { display: block; height: 100%; }
.marke__bild { width: auto; height: 100%; transition: width .3s linear, height .3s linear; }

.werkzeuge { display: flex; align-items: center; gap: 22px; }
.werkzeug {
  display: inline-flex; align-items: center; padding: 0; background: none;
  border: 0; cursor: pointer; text-decoration: none; color: var(--text);
}
.werkzeug svg { width: 32px; max-height: 32px; height: auto; display: block; }
.werkzeug__wort { position: absolute; left: -9999px; }


.notruf { position: relative; }
.notruf__knopf { display: block; }
.notruf__blase {
  position: absolute; display: none; right: -50%; top: calc(100% + 14px);
  padding: 15px; font-size: 14px; font-weight: 500; white-space: nowrap;
  background: var(--weiss); box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
}
.notruf:hover .notruf__blase, .notruf:focus-within .notruf__blase { display: block; }
.notruf__blase a { font-size: 24px; text-decoration: none; }

/* Suche ------------------------------------------------------------------ */
.suche {
  position: absolute; right: 15px; top: 100%; width: min(30rem, calc(100vw - 30px));
  padding: 20px; background: var(--weiss); box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
}
.suche__marke { position: absolute; left: -9999px; }
.suche__feld {
  width: 100%; padding: 12px 14px; font-family: inherit; font-size: 16px;
  color: var(--text); background: var(--weiss); border: 1px solid var(--grau);
}
.suche__feld:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.suche__treffer { margin: 0; padding: 0; list-style: none; }
.suche__treffer li { margin: 16px 0 0; font-size: 14px; line-height: 22px; }
.suche__treffer a { display: block; font-weight: 500; text-decoration: none; }
.suche__treffer a:hover { color: var(--blau); }
.suche__stelle { display: block; color: var(--grau); }
.suche__leer { color: var(--grau); }

.menueknopf {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 40px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer;
}
.menueknopf span {
  display: block; width: 100%; height: 4px; border-radius: 4px;
  background: var(--text); transition: transform .2s linear, opacity .2s linear;
}
.menueknopf[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.menueknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menueknopf[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ------------------------------------------------------------- Hauptmenue */
.hauptmenue {
  position: fixed; top: var(--leiste); left: 0; right: 0; bottom: 0;
  padding: 40px 15px 60px; background: var(--weiss); z-index: 9998;
  overflow-y: auto;
}
.hauptmenue__innen { max-width: 1200px; margin: 0 auto; }
.menue__punkt {
  display: block; margin: 0 0 24px; font-size: 24px; font-weight: 500;
  text-transform: uppercase; text-decoration: none;
}
.menue__punkt[aria-current] { color: var(--blau); }
.untermenue { margin: 0 0 30px; columns: 1; }
.untermenue__punkt {
  display: block; margin: 0 0 14px; font-size: 16px; font-weight: 500;
  text-decoration: none; break-inside: avoid;
}
.untermenue__punkt:hover { color: var(--blau); }

/* ------------------------------------------------------------ Kopfbereich */
.kopfbereich { display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; }
.kopfbereich--leer { min-height: calc(var(--leiste) + 30px); }
.kopfbereich__bild { flex: 1 1 100%; }
.kopfbereich__bild img { display: block; width: 100%; margin-top: 70px; }
/* Unter 768px laesst der Bestand die Schlagzeile weg und stellt nur das Bild. */
.kopfbereich__zeile { display: none; flex: 1 1 100%; padding: 30px; }
.kopfbereich__schlagzeile {
  margin: 0; display: inline-block; font-size: 22px; line-height: 1.3;
  font-weight: 500; text-transform: uppercase; color: var(--blau);
}


/* ---------------------------------------------------------------- Krumen */
.krumen { display: none; }

/* ---------------------------------------------------------------- Baender */
main { display: block; margin: 0 15px; min-height: 300px; }
/* Unter 768px haelt der Bestand 30 Pixel zwischen den Baendern. */
.band { margin: 30px 0; }
.spalte { width: 100%; }
.fliess > *:last-child { margin-bottom: 0; }
.fliess h2 { margin-top: 30px; }
.fliess h2:first-child { margin-top: 0; }

/* Fliesstext ------------------------------------------------------------- */
.text__bild { margin-top: 60px; }

/* Profile ---------------------------------------------------------------- */
.profile { margin: 30px 0; }
.profil { margin: 40px 0; }
.profil__bild { max-width: 274px; margin: 0 0 20px; }
.profil__knopf { margin-top: 20px; }
.profil__name {
  margin: 0; font-size: 20px; font-weight: 500; text-transform: none;
  font-family: var(--schrift-ueberschrift);
}
.profil__rolle { margin: 0 0 20px; font-size: 18px; color: var(--blau); }

/* Teaser ----------------------------------------------------------------- */
.teaser-reihe { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; margin: 30px 0; }
/* Unter 768px stehen die Teaser untereinander, so wie medium-6 im Bestand. */
.teaser { flex: 1 1 100%; max-width: 580px; }
.teaser__text { max-width: 580px; margin: 15px 0; }
.teaser__text h3 { margin: 0 0 15px; }
.teaser__text .knopf { margin-top: 15px; }

/* Startseite: Schlagzeile rechtsbuendig neben dem Text -------------------- */
.text--start { margin: 30px 10px; }
.text--start .text__kopf { margin-bottom: 50px; }

/* Zitat auf Bild --------------------------------------------------------- */
.zitat {
  position: relative; margin: 0; padding: 19px 20px; font-weight: 500;
  font-style: italic; text-transform: uppercase; font-size: 20px; line-height: 1.3;
}
.zitat::before {
  content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 26px;
  background: url("/bilder/icon-quote.svg") no-repeat 0 0 / contain; opacity: .5;
}
/* Der Bestand stellt das Zitatbild ohne eigenen Abstand ins Band; erst ab
   1260 Pixeln bekommt es Luft. */
.zitatbild { position: relative; margin: 0; }
.zitatbild img { width: 100%; }
/* Wie im Bestand: weisser Schleier unten links auf dem Bild, kein Weiss auf Foto. */
.zitatbild__innen { padding: 40px 20px; text-align: center; }
/* Innenabstand und Hoechstbreite kommen aus .quote. */
.zitatbild__innen .knopf { margin-top: 15px; }

/* Auszeichnungen --------------------------------------------------------- */
.rolle { position: relative; margin: 20px; }
.rolle__fenster { overflow-x: auto; scrollbar-width: thin; }
.rolle__spur {
  display: flex; gap: 40px; margin: 0; padding: 0;
  list-style: none; scroll-snap-type: x mandatory;
}
/* Sobald die Pfeile bedienen, faehrt die Spur als Ganzes, und der Balken
   verschwindet: der Bestand hat keinen. */
.rolle--bedient .rolle__fenster { overflow: hidden; scrollbar-width: none; }
.rolle--bedient .rolle__fenster::-webkit-scrollbar { display: none; }
.rolle--bedient .rolle__spur {
  scroll-snap-type: none;
  transition: transform .5s ease;
}
/* Wie im Bestand: was nicht vorne steht, liegt hinter einem Schleier. */
.rolle--bedient .rolle__spur > * { opacity: .2; transition: opacity .3s linear; }
.rolle--bedient .rolle__spur > .rolle__stueck--vorn { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rolle--bedient .rolle__spur { transition: none; }
}
.rolle__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 40px; padding: 0; border: 0; background: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  cursor: pointer; z-index: 2;
}
.rolle__pfeil--zurueck { left: -20px; background-image: url("/bilder/icon-left.svg"); }
.rolle__pfeil--vor { right: -20px; background-image: url("/bilder/icon-right.svg"); }
.rolle__pfeil:disabled { opacity: .25; cursor: default; }
/* Die Teamreihe nimmt die volle Spaltenbreite, die Pfeile liegen auf den
   aeusseren Karten. Unter 768 Pixeln laesst der Bestand sie ganz weg; hier
   bleiben sie stehen, sonst waere die Reihe mit dem Finger nicht zu bewegen. */
.team .rolle { margin: 0; }
.team .rolle__pfeil--zurueck { left: 0; }
.team .rolle__pfeil--vor { right: 0; }

.auszeichnungen > .rolle { margin: 40px 20px 0; }
.auszeichnung {
  position: relative; flex: 0 0 260px; height: 357px; padding: 100px 10px 0;
  text-align: center; scroll-snap-align: center;
  background: url("/bilder/bg-awards.svg") no-repeat center / contain;
}
.auszeichnung__titel { margin: 0 0 20px; font-size: 20px; line-height: 26px; font-weight: 700; }
/* 1,25 statt 1,4: bei 300 Pixeln Kartenbreite laufen sonst drei der
   dreiundsiebzig Eintraege unten aus dem Rahmen. Im Bestand tun sie das. */
.auszeichnung__text { font-size: 22px; font-weight: 500; line-height: 1.25; }
.auszeichnung__text p { font-size: inherit; line-height: inherit; margin: 0; }
.auszeichnung__zaehler { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 14px; }

/* Zahlen ----------------------------------------------------------------- */
/* Die Zahlen stehen als weisse Scheiben auf dem Foto, Schrift bleibt dunkel. */
.zahlen { margin: 40px 0; padding: 40px; background: var(--linie) center / cover no-repeat; }
.zahlen__reihe {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  margin: 0; padding: 20px 0; list-style: none;
}
.zahlen__innen { max-width: none; margin: 0 auto; }
.zahl { flex: 0 0 100%; text-align: center; }
.zahl__scheibe {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; height: 150px; margin: 40px auto; background: var(--weiss); border-radius: 50%;
}
.zahl__oben { display: block; margin: 0; font-size: 16px; line-height: 1; font-weight: 500; }
.zahl__wert, .zahl__prozent { font-size: 48px; line-height: 52px; font-weight: 700; white-space: nowrap; }
.zahl__label { display: block; margin: 0 0 10px; font-size: 16px; line-height: 22px; font-weight: 500; }
.zahl__icon { display: inline-block; width: 48px; height: auto; }

/* Bewertungen ------------------------------------------------------------ */
.bewertungen { margin: 60px 0; }
.bewertungen__reihe {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.bewertung { flex: 1 1 260px; padding: 0 20px 30px; text-align: center; border-top: 2px solid var(--linie); }
.bewertung:first-child { border-top: none; }
.bewertung__logo {
  max-height: 38px; width: auto; margin: 30px auto;
}

/* Sprungmarken ----------------------------------------------------------- */
.sprungmarken { display: none; }

/* Video ------------------------------------------------------------------ */
.video__rahmen { position: relative; cursor: pointer; background: #000; }
.video__rahmen img { width: 100%; }
.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; font-size: 28px; color: var(--weiss);
  background: rgba(0,0,0,.55); border: 2px solid var(--weiss); border-radius: 50%;
  cursor: pointer;
}

/* Einwilligung fuer das eingebettete Video. Der Bestand loest das ueber einen
   fremden Dienst; hier haengt es an dieser einen Einbindung. */
.video__einwilligung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 12px 0 0; font-size: 14px; line-height: 1.5;
}
.video__einwilligung label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.video__schalter { width: 16px; height: 16px; accent-color: var(--blau); }
.video__details {
  padding: 0; font: inherit; color: var(--blau); background: none; border: 0;
  text-decoration: underline; cursor: pointer;
}

.anbieter {
  width: min(720px, calc(100% - 30px)); max-height: 80vh; padding: 0;
  border: 0; color: var(--text); background: var(--weiss);
}
.anbieter::backdrop { background: rgba(0,0,0,.5); }
.anbieter__innen { max-height: calc(80vh - 90px); overflow-y: auto; padding: 30px; }
.anbieter__titel { margin: 0 0 20px; font-size: 22px; line-height: 1.3; text-transform: none; }
.anbieter p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; }
.anbieter__tabelle { overflow-x: auto; margin: 0 0 24px; }
.anbieter table { width: 100%; border-collapse: collapse; font-size: 13px; }
.anbieter th, .anbieter td {
  padding: 8px 10px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linie);
}
.anbieter th { font-weight: 600; }
.anbieter form { padding: 15px 30px; border-top: 1px solid var(--linie); text-align: center; }

/* Anwaelte --------------------------------------------------------------- */
/* Wie im Bestand: Name und Fachgebiet liegen auf dem Bild, darueber ein
   Verlauf, damit die weisse Schrift auf hellen Portraits noch traegt. */
.anwaelte__raster { display: grid; grid-template-columns: 1fr; gap: 24px; }
.anwaelte__zitat { margin: 0 0 40px; padding-left: 40px; font-size: 20px; line-height: 1.35; }
.anwalt__karte { position: relative; display: block; cursor: pointer; list-style: none; }
.anwalt__karte::-webkit-details-marker { display: none; }
.anwalt__karte::after {
  content: "+"; position: absolute; top: 0; left: 0;
  display: flex; align-items: center; justify-content: center;
  width: 45px; height: 45px; font-size: 26px; line-height: 1;
  color: var(--weiss); background: var(--blau);
}
.anwalt[open] > .anwalt__karte::after { content: "–"; }
.anwalt__bild { width: 100%; }
.anwalt__deckel {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  padding: 40px 14px 14px; color: var(--weiss);
  background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.anwalt__name { display: block; font-size: 18px; line-height: 30px; font-weight: 700; }
.anwalt__fach { display: block; font-size: 14px; }
.anwalt__fach p { margin: 0; font-size: 14px; line-height: 20px; }
.anwalt__innen { padding: 20px 0 30px; border-bottom: 1px solid var(--linie); }
.anwalt__kontakt { font-size: 16px; }
.anwalt__block { margin: 25px 0 0; }
.anwalt__block h4 {
  margin-bottom: 10px; font-size: 20px; line-height: 30px;
  text-transform: uppercase; letter-spacing: .04em;
}
.vita__zeile { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0 0 10px; }
.vita__zeit { flex: 0 0 130px; font-weight: 500; font-size: 16px; }
.vita__text { flex: 1 1 240px; font-size: 16px; }

/* Trennzitat ------------------------------------------------------------- */
.trennzitat { display: flex; align-items: center; gap: 20px; margin: 100px 0; }
.trennzitat hr { flex: 1 1 auto; height: 2px; margin: 0; background: var(--text); border: 0; }
.trennzitat .zitat { flex: 0 1 auto; text-align: center; }
.zitat__quelle { display: block; margin-top: 10px; font-size: 16px; font-style: normal; text-transform: none; }

/* Team ------------------------------------------------------------------- */
/* Unter 480 Pixeln fuellt eine Karte die Spalte, darueber steht sie auf
   376 Pixeln, so wie slick es im Bestand rechnet. */
.team__reihe { gap: 0; padding: 0; }
.teamer { flex: 0 0 100%; scroll-snap-align: center; }
.teamer img { display: block; width: 100%; height: auto; }
.teamer__name {
  display: block; margin: 10px 0 5px; font-size: 22px; line-height: 33px; font-weight: 700;
}
.teamer__rolle {
  display: block; font-size: 16px; line-height: 24px; font-weight: 500; font-style: italic;
}

/* Zweispalter ------------------------------------------------------------ */
.zweispalter__raster { display: grid; grid-template-columns: 1fr; gap: 40px; }

/* Notfall ---------------------------------------------------------------- */
.notfall {
  position: relative; margin: 60px 15px; padding: 40px 20px;
  background: var(--grau) center / cover no-repeat;
}
.notfall::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.notfall__innen { position: relative; }
.notfall__innen { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; }
.notfall__text { flex: 1 1 280px; color: var(--weiss); }
.notfall__text h3, .notfall__text p, .notfall__text a { color: var(--weiss); }
.notfall__text .unterstrich::before { background: var(--weiss); }
.notfall__text .knopf { margin-top: 10px; text-decoration: none; }
.notfall__bild { flex: 0 1 220px; }
.notfall__bild img { margin: 0 auto; }

/* Gebietsliste ----------------------------------------------------------- */
.gebiete__liste { margin: 45px 0; padding: 0; list-style: none; }
.gebiete__liste li { margin: 0 0 15px; }
.gebiet {
  display: block; position: relative; padding-left: 15px;
  font-weight: 500; text-decoration: none;
}
.gebiet::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px;
  background: var(--blau);
}
.gebiet:hover { color: var(--blau); }

/* Formular --------------------------------------------------------------- */
.formular__gitter { display: grid; grid-template-columns: 1fr; gap: 0 30px; margin-top: 40px; }
.formular__feld { margin: 0 0 20px; }
.formular__feld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.formular__feld input, .formular__feld select, .formular__feld textarea {
  width: 100%; padding: 10px 12px; font-family: inherit; font-size: 16px;
  color: var(--text); background: var(--weiss);
  border: 1px solid var(--grau); border-radius: 0;
}
.formular__feld input:focus, .formular__feld select:focus, .formular__feld textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 1px;
}
.formular__gruppe { margin: 0 0 20px; padding: 0; border: 0; }
.formular__gruppe legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 500; }
.formular__wahl { display: inline-block; margin: 0 24px 0 0; font-size: 16px; }
.formular__hinweis { font-size: 14px; line-height: 22px; }
.formular__zeile { margin: 10px 0 0; }
abbr[title] { text-decoration: none; color: var(--blau); }

/* ------------------------------------------------------------------- Fuss */
.fuss { margin-top: 80px; padding: 40px 15px; border-top: 1px solid var(--blau); }
.fuss__innen { display: grid; grid-template-columns: 1fr; gap: 30px; }
.fuss__rechts { display: grid; gap: 30px; }
.fuss__anschrift p { margin: 0 0 8px; font-size: 14px; line-height: 24px; }
.fuss__sozial { display: flex; align-items: center; gap: 20px; }
.fuss__sozial img { height: 45px; width: auto; }
.fuss__menue a {
  position: relative; margin-right: 24px; font-size: 14px; text-decoration: none;
}
.fuss__menue a:not(:first-child)::before { content: "|"; position: absolute; left: -14px; }

/* --------------------------------------------------------------- Ab 480px */
@media screen and (min-width: 30em) {
  .kopfbereich__schlagzeile { font-size: 28px; }
  .untermenue { columns: 2; }
  .anwaelte__raster { grid-template-columns: repeat(2, 1fr); }
  .teamer { flex-basis: 376px; }
  .team__reihe { gap: 30px; }
  .formular__gitter { grid-template-columns: 1fr 1fr; }
  .formular__gitter > .formular__hinweis,
  .formular__gitter > .formular__gruppe,
  .formular__gitter > .formular__zeile { grid-column: 1 / -1; }
  .formular__feld:has(textarea) { grid-column: 1 / -1; }
  .zweispalter__raster { grid-template-columns: 1fr 1fr; }
  .profil { display: grid; grid-template-columns: 41.6667% 1fr; gap: 0; align-items: start; }
  .profil__bild { margin: 0; max-width: 274px; padding: 0 15px; }
  .gebiete__liste { columns: 2; column-gap: 32px; }
  .gebiete__liste li { margin: 0 0 30px; break-inside: avoid; }
  .gebiet { font-size: 18px; }
}

/* --------------------------------------------------------------- Ab 640px */
/* --------------------------------------------------------------- Ab 768px */
/* Der Bruchpunkt des Bestands. Hier springt das Logo aus der Leiste,
   die Schlagzeilen werden gross und die Startseite zweispaltig. */
@media screen and (min-width: 48em) {
  :root { --leiste: 100px; }

  /* Der Fliesstext steht auf acht von zwoelf Feldern des Rasters, ab 1260
     auf sieben. Darunter fuellt er die Spalte. */
  .text__spalte { width: 66.6667%; }

  h1 { margin: 0 0 45px; font-size: 44px; line-height: 48px; }
  h2 { font-size: 24px; line-height: 34px; }
  body.Start h2 { font-size: 22px; line-height: 32px; }
  h3 { margin: 0 0 60px; font-size: 36px; line-height: 46px; }
  .unterstrich::before { width: 70px; }

  body.Start h1 { margin: 0 0 50px; font-size: 48px; line-height: 56px; }
  body.Start h3 { margin: 0 0 30px; font-size: 40px; line-height: 50px; }

  .kopfleiste__innen { padding: 0 15px 0 0; align-items: flex-start; }
  /* Das Logo verlaesst die Leiste und legt sich als weisser Block auf das
     Kopfbild. Beim Scrollen schrumpft es auf Leistenhoehe. */
  /* Das Logo sitzt buendig an der Kante und wird von seiner Spalte
     begrenzt: unter 840 Pixeln ist ein Viertel schmaler als 210. */
  .marke { height: auto; padding: 0; width: 25%; display: flex; justify-content: center; }
  .marke__bild { width: 210px; max-width: 100%; height: 205px; }
  .kopfleiste--klein .marke__bild { width: 102px; height: 100px; }
  .kopfleiste--klein .marke { align-self: center; }
  .werkzeuge { height: var(--leiste); }
  .suche { right: 30px; }

  .kopfbereich { min-height: 300px; padding-top: 100px; }
  .kopfbereich { flex-wrap: wrap; }
  .kopfbereich__bild { flex: 1 1 100%; }
  .kopfbereich__bild img { margin-top: 0; width: 100%; }
  .kopfbereich__zeile { display: block; flex: 1 1 100%; padding: 30px; }
  .kopfbereich__schlagzeile { font-size: 36px; line-height: 46px; }
  .kopfbereich--start { padding-top: 100px; }

  .krumen { display: flex; flex-wrap: wrap; gap: 0 30px; margin: 30px 0 30px 15px; }
  .krume {
    position: relative; font-size: 16px; font-weight: 500;
    text-transform: uppercase; text-decoration: none;
  }
  .krume:not(:first-child)::before {
    content: "|"; position: absolute; left: -20px; font-size: 20px; line-height: 20px;
  }
  .krume--hier { color: var(--blau); }

  main { margin: 0 15px; }
  .spalte { width: 100%; }
  .band { margin: 60px 0; }
  .text { margin: 60px 0; }
  .profile { margin: 60px 0; }
  .teaser-reihe { margin: 80px 0; gap: 0; flex-wrap: nowrap; }
  .teaser { flex: 0 0 50%; max-width: none; padding: 0 15px; }
  .teaser__text { margin: 30px 0 0; padding-right: 30px; }
  .teaser__text h3 { margin: 0 0 30px; }

  .zitat { max-width: 420px; padding: 28px 30px 28px 15px; font-size: 34px; line-height: 1.25; }
  .zitat::before { width: 44px; height: 34px; }
  /* Der Bestand meint eine zentrierte Zeile: text-center, uppercase, grid-x.
     Nur der Fueller bleibt dort leer, weil das Skript die Anker nie setzt. */
  .sprungmarken {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px;
    margin: 90px 0; line-height: 33px;
  }
  .sprungmarke {
    font-size: 22px; font-weight: 500; text-decoration: none; text-transform: uppercase;
  }
  .sprungmarke:hover { color: var(--blau); }

  .anwaelte__raster { grid-template-columns: repeat(4, 1fr); }
  .anwalt[open] { grid-column: 1 / -1; }

  .team { margin: 90px 0; }
  .gebiete__liste li { margin: 0 0 45px; }
  .gebiet { font-size: 22px; }

  .text--start {
    display: grid; grid-template-columns: 41.6667% 50%;
    align-items: center; margin: 100px 0;
  }
  .text--start .text__kopf { margin: 0 15px; text-align: right; }
  .text--start .fliess { padding: 0 15px; margin-top: 16px; }

  .zitatbild__innen {
    position: absolute; left: 0; bottom: 0; width: 40%;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 15px; background: rgba(255, 255, 255, .9); text-align: left;
  }
  /* Groesse und Innenabstand kommen aus .quote, hier nur die Schriftgroesse,
     die der Bestand fuer dieses eine Zitat kleiner haelt. */
  .zitatbild__innen .zitat { font-size: 16px; line-height: 24px; }
  .zitatbild__innen .zitat::before { width: 28px; height: 22px; top: 28px; }

  .auszeichnung { flex: 0 0 300px; height: 400px; padding: 120px 20px 40px; }
  .rolle { margin: 40px; }
  .team .rolle__pfeil { width: 26px; height: 52px; }
  .auszeichnungen > .rolle { margin: 40px; }
  .zahlen { margin: 160px 0; padding: 87px 0; }
  .zahl { flex: 0 0 33.3333%; }
  .zahlen__reihe { flex-wrap: nowrap; }
  .zahl__scheibe { width: 205px; height: 205px; }
  .zahl__wert, .zahl__prozent { font-size: 80px; line-height: 100px; }
  .zahl__label { margin: 0 0 15px; font-size: 20px; line-height: 28px; }
  .zahl__oben { font-size: 20px; }
  .zahl__icon { width: 68px; }

  .bewertungen { margin: 60px 0; }
  .bewertungen__reihe { margin: 75px 0; flex-wrap: nowrap; }
  .bewertung { border-top: none; border-left: 2px solid var(--linie); }
  .bewertung:first-child { border-left: none; }
  .bewertung__logo { margin: 0 auto 30px; }
  .notfall { margin: 90px 30px; padding: 80px 40px; }
  .notfall__innen { margin-left: var(--spalte-links); }
  .trennzitat { margin: 100px 0; }
  .trennzitat .zitat { min-width: 420px; }

  .fuss { margin-top: 60px; padding: 60px 30px; }
  /* Zwei Bloecke, links die Anschrift, rechts Zeichen und Verweise
     untereinander. Beide oben buendig und spiegelgleich eingerueckt. */
  .fuss__innen { grid-template-columns: 1fr 1fr; align-items: start; gap: 0 30px; }
  .fuss__rechts { justify-items: end; gap: 20px; }
  .fuss__sozial { justify-content: flex-end; }
  .fuss__menue { text-align: right; }
}

/* -------------------------------------------------------------- Ab 1260px */
/* Der zweite Bruchpunkt des Bestands. Nachgemessen, nicht geraten: hier
   schaltet das Raster um, das Kopfbild wird schmaler, die Schlagzeile rueckt
   daneben, und die Abstaende werden grosszuegig. */
@media screen and (min-width: 78.75em) {
  main { margin: 0; }
  .kopfleiste__innen { padding: 0 15px 0 0; }
  .marke { width: 16.6667%; display: flex; justify-content: center; }
  .kopfbereich { flex-wrap: nowrap; }
  .kopfbereich__bild { flex: 0 0 75%; }
  .kopfbereich__zeile { flex: 1 1 auto; padding: 0 15px 0 30px; }
  .text__spalte { width: 58.3333%; }
  .text--start { grid-template-columns: 41.6667% 58.3333%; }
  .text--start .text__kopf { margin: 0 15px; padding: 0; }
  .kopfbereich__zeile { flex: 0 0 16.6667%; }
  .spalte { width: var(--spalte-breit); margin-left: var(--spalte-links); }
  .krumen { margin-left: calc(var(--spalte-links) + 15px); }
  /* Die Ueberschrift der Profilseiten steht im Bestand auf halber Spalte. */
  .profile h1 { max-width: 50%; }
  .profil { grid-template-columns: 25% 1fr; }

  .teaser { flex: 0 0 610px; }
  .band { margin: 100px 0; }
  .text { margin: 100px 0; }
  .profile { margin: 120px 0; }
  .teaser-reihe { margin: 180px 0; }
  .team { margin: 100px 0; }
  .zitatbild { margin: 200px 0; }
  .trennzitat { margin: 200px 0; }
  .bewertungen { margin: 105px 0; }
  .notfall { margin: 100px 30px; }
  .text--start { margin: 200px 0; }
  .sprungmarken { margin: 90px 0 180px; }
  .zitat { padding: 30px 45px 60px 75px; }
  .zitatbild__innen { padding: 60px 30px 60px 60px; }
  .zitatbild__innen .zitat { font-size: 40px; line-height: 60px; }
  .zitatbild__innen .zitat::before { width: 44px; height: 34px; top: 30px; }
  .zitatbild__innen .knopf { margin: 30px 145px 0 0; }
  .auszeichnung { flex: 0 0 376px; height: 516px; padding: 160px 20px 40px; }
  .rolle__pfeil { width: 38px; height: 76px; }
  .team .rolle__pfeil { width: 38px; height: 76px; }
  .rolle__pfeil--zurueck { left: 0; }
  .rolle__pfeil--vor { right: 0; }
  .rolle { margin: 40px 60px; }
  .auszeichnungen__rolle { gap: 30px; }
  .auszeichnungen > .rolle { margin: 40px 60px; }
  .auszeichnung__titel { font-size: 30px; line-height: 36px; }
  .auszeichnung__text, .auszeichnung__text p { font-size: 20px; line-height: 34px; }
  .zahlen__innen { max-width: 83.3333%; }
  .zahl { flex: 0 0 25%; }
  .fuss { margin-top: 80px; padding: 120px 30px 60px; }
  .fuss__innen { margin: 0 var(--spalte-links); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}