/* =============================================================
   Layout — Container, Grid, Header, Footer
   ============================================================= */

/* --- Container ---------------------------------------------- */

/* Standard-Inhaltsbreite: 1370px zentriert, Seitenrand 179px @1728 */
.container {
  width: 100%;
  max-width: calc(var(--layout-content) + 2 * var(--layout-gutter));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

/* Schmaler Rand (24px), z. B. Header-Nav und randnahe Karten */
.container--wide {
  max-width: var(--layout-max);
  padding-inline: var(--space-m);
}

/* --- Sections ----------------------------------------------- */

.section {
  padding-block: var(--section-gap);
}

.section > * + * {
  margin-top: var(--section-gap);
}

/* --- Zweispaltiger Abschnitt --------------------------------
   Rubrik links, Fließtext rechts. Im Figma sitzt die Rubrik bei
   x=179 und der Text bei x=800 mit 748px Breite — bei 1370px
   Inhaltsbreite bleiben links also 622px (49:2110 / 49:2122). */
/* .section setzt Folgeabstaende auf direkte Kinder — in Rasterab-
   schnitten uebernimmt das der gap. Gilt fuer alle Grid-Sections. */
.section.split > * + * {
  margin-top: 0;
}

/* Schliesst enger an den vorigen Abschnitt an. Zwischen dem
   Ansatz-Text und den Bildern darunter liegen im Entwurf 160px,
   nicht der doppelte Abschnittsabstand. */
.section--anschluss {
  padding-block-start: calc(var(--section-gap) / 2);
}

/* Der Lebenslauf auf „Ueber mich" folgt direkt auf die Bilderreihe.
   Mit vollem Abschnittsabstand oben kamen zusammen mit dem Innen-
   abstand des ersten Eintrags zwei Abstaende plus 46px zusammen (290
   bei 1728). Ohne ihn steht „Ausbildung" etwa so weit unter den
   Bildern wie die Bilder unter dem Text darueber. */
.section:has(> .infoliste--lebenslauf) {
  padding-block-start: 0;
}

/* Am Telefon noch enger: Der erste Eintrag hat keine Linie ueber
   sich, sein Innenabstand oben ist dort nur Luft. Mit 24 statt 46px
   steht „Ausbildung" so weit unter den Bildern (72px) wie die Bilder
   unter dem Einleitungstext. */
@media (max-width: 37.5em) {
  .infoliste--lebenslauf > .infoliste__eintrag:first-child {
    padding-block-start: var(--space-m);
  }
}

/* Inhalte, die als Gruppe zusammengehoeren — in der Ablauf-Strecke
   stehen zwischen Rubrik, Bildern und Texten je 53px. */
.section--eng > * + * {
  margin-top: var(--space-xl);
}

/* Auf dem Tablet ruecken die Rubriken ueber ganzbreiten Bloecken
   ein und werden groesser — siehe --rubrik-einzug in tokens.css. */
@media (max-width: 64em) {
  .section--eng > .section-heading {
    padding-inline-start: var(--rubrik-einzug);
  }
}

/* Am Telefon schwebt der Header ohne eigene Flaeche ueber dem
   Inhalt. Beginnt der erste Abschnitt zu frueh, liegt die Wortmarke
   beim Scrollen auf seiner Rubrik. Der Entwurf laesst dafuer Luft:
   Das Hero endet bei 873, „mein ansatz" steht bei 1068 (148:1855),
   auf „Ueber mich" und „Behandlungsschwerpunkte" genauso
   (164:2376, 148:1499). Seiten ohne Hero tragen den Headerversatz
   schon und brauchen nur den Rest bis 200 (185:2062). */
/* Die Ablauf-Strecke schliesst am Telefon enger an den Text
   darueber an: Im Entwurf endet er kurz vor der Rubrik bei 3466
   (148:1874), bei uns standen 96px dazwischen — der Abschnitts-
   abstand zweimal. Der des Blocks darueber genuegt. */
@media (max-width: 37.5em) {
  .section--eng {
    padding-block-start: 0;
  }
}

@media (max-width: 37.5em) {
  /* Seiten mit Hero: Der Abstand zaehlt ab der Hero-Unterkante. */
  main > .section:first-child,
  /* „Behandlungsschwerpunkte" reicht den ersten Abschnitt durch
     eine unbenannte <section> durch. */
  main > section:first-child > .section:first-child {
    padding-block-start: var(--kopfabstand);
  }

  /* Seiten ohne Hero: Dort zaehlt er ab der Seitenkante — den
     Headerversatz traegt das <main> schon. */
  [class*="site-main--offset"] > .section:first-child,
  [class*="site-main--offset"] > .visually-hidden:first-child + .section {
    padding-block-start: calc(var(--kopfabstand) - var(--header-height));
  }

  /* Auf „Termin buchen" ist das <main> selbst der Abschnitt und
     traegt den Versatz nicht getrennt. */
  main.site-main--offset {
    padding-block-start: var(--kopfabstand);
  }

  /* Beginnt die Seite mit einer Infoliste — Patienteninformation,
     Impressum, Datenschutz, AGB —, bringt deren erster Eintrag
     seinen Innenabstand schon mit. Der zaehlt mit, sonst faengt
     die Seite tiefer an als die uebrigen. */
  [class*="site-main--offset"] > .section:has(.infoliste),
  [class*="site-main--offset"] > .visually-hidden:first-child + .section:has(.infoliste) {
    padding-block-start: calc(
      var(--kopfabstand) - var(--header-height) - (var(--space-2xl) - 1.125rem)
    );
  }

  /* Die verborgene Ueberschrift ist absolut gesetzt und nimmt keine
     Hoehe ein — der Folgeabstand, den sie dem Abschnitt gibt, ist
     deshalb keiner. */
  main > .visually-hidden:first-child + .section {
    margin-top: 0;
  }
}

.split {
  display: grid;
  /* minmax statt min(…, 100%): Letzteres rechnet den Spaltenabstand
     nicht mit, dadurch wurde das Raster zwischen 900 und 980px
     Fensterbreite breiter als sein Container.

     18rem als Untergrenze links, damit die Textspalte sich nicht
     ihr volles Mass nimmt und der Rubrik den Rest laesst. Die
     Textspalte gibt dafuer nach — ihre 748px sind eine Obergrenze,
     keine Vorgabe. */
  grid-template-columns: minmax(18rem, 1fr) minmax(0, var(--layout-measure));
  gap: var(--layout-gap);
  /* Grundlinien ausrichten, nicht Boxen: Rubrik und Fliesstext haben
     unterschiedliche Groessen und Zeilenhoehen, bei "start" saessen
     ihre ersten Zeilen um ein paar Pixel versetzt. */
  align-items: baseline;
}

/* Unterhalb von 1168px passt das 748er Textmass nicht mehr neben
   die Rubrik. Zweispaltig bleibt es trotzdem, nur mit anderen
   Anteilen: Im Tablet-Entwurf ist die Rubrik 301 und der Text 378
   breit (123:73 und 123:85), also rund 4 zu 5. Untereinander
   stehen sie erst am Telefon.

   Die Grenze liegt dort, wo die Rubrik neben den vollen 748px
   wieder rund 300px bekommt. Darunter nahm sich die Textspalte ihr
   Mass und liess der Rubrik den Rest — bei 1100px waren das 89px. */
@media (max-width: 73em) {
  .split {
    grid-template-columns: 4fr 5fr;
  }
}

@media (max-width: 37.5em) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* Auf der Kontaktseite steht die Rubrik schon ab Tablet ueber dem
   Formular statt daneben: Die Felder brauchen die Breite, eine
   4-zu-5-Teilung liesse ihnen bei 834px nur rund 440px.

   Der Text ruecke dabei ein, die Rubrik nicht — im Entwurf sitzt
   sie bei x=31, Einleitung und Formular bei 162 (126:1019). Die
   Einrueckung ist das Doppelte der Rubrikeinrueckung der
   Startseite, also 132 auf den Seitenrand von 30.

   Beidseitig: Im Entwurf sind die Formularlinien 510 breit und
   laufen von 162 bis 672 — rechts bleibt derselbe Rand wie links.
   Nur links eingerueckt sah der Block bei 890px aus, als haette
   ihn jemand an die rechte Kante geschoben. */
@media (max-width: 64em) {
  .split--gestapelt {
    grid-template-columns: 1fr;
  }

  .split--gestapelt > :not(.section-heading) {
    padding-inline: calc(var(--rubrik-einzug) * 2);
  }
}

/* Auf „Ueber mich" steht unter dem Abschnitt das dreispaltige
   Bildraster. Im Entwurf (126:512) beginnt der Fliesstext bei 295
   — genau an der Kante des mittleren Bildes; die Rubrik bleibt am
   Seitenrand. Die linke Spalte ist darum so breit wie ein Bild,
   der Spaltenabstand ist ohnehin derselbe. */
@media (min-width: 37.5em) and (max-width: 64em) {
  .split--rasterbuendig {
    grid-template-columns:
      calc((100% - 2 * var(--layout-gap)) / 3) minmax(0, 1fr);
  }
}

/* --- Feature: randabfallendes Bild + Textspalte -------------
   Figma 49:2149 ff. — Bild sitzt links buendig am Rand
   (0…772 von 1728), die Textspalte beginnt bei x=956 und ist
   591px breit. Rechts vom Text bleiben 181px Rand, links vom
   Text 184px — beides praktisch unser Seitenrand.
   ------------------------------------------------------------ */
.feature {
  display: grid;
  grid-template-columns: 772fr 956fr;
  /* Rubrik und Text sitzen in Zeile 2 und 3, die beiden aeusseren
     Zeilen sind bewegliche Polster — so bleibt das Paar zusammen
     auf der Bildmitte, obwohl es zwei Rasterkinder sind. */
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
}

.feature__media {
  grid-column: 1;
  grid-row: 1 / -1;
}

/* Rechts ohne Innenabstand: Die Spalte reicht bis an die
   Fensterkante, der Seitenrand dort ist nur Luft. Mit ihm fehlten
   der Rubrik zwischen 1025 und 1150px wenige Pixel, und „jeder
   körper ist anders." brach um. Linksbuendig nimmt sie trotzdem
   nur, was sie braucht. */
.feature__kopf {
  grid-column: 2;
  grid-row: 2;
  padding-inline: var(--layout-gutter) 0;
}

.feature__body {
  grid-column: 2;
  grid-row: 3;
}

.feature__media {
  aspect-ratio: 772 / 1117;
  align-self: center;
  /* Nie hoeher als der sichtbare Bereich. */
  max-block-size: 100svh;
  /* Links laeuft das Bild ueber den Seitenrand hinaus — gerundet
     wird nur, wo es sichtbar endet: rechts oben und rechts unten. */
  overflow: hidden;
  border-start-end-radius: var(--radius-card);
  border-end-end-radius: var(--radius-card);
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__body {
  padding-inline: var(--layout-gutter);
}

.feature__body > * {
  max-width: 36.9375rem; /* 591px bei 16px Basis — begrenzt Text */
}

.feature__body > * + * {
  margin-top: var(--space-m);
}

.feature__kopf {
  margin-block-end: var(--space-m);
}

/* Auf dem Tablet bleiben es zwei Spalten, nur schmaler: im Entwurf
   laeuft das Bild von 0 bis 341 und der Text ab 428 (123:111 und
   123:112). Ueber die volle Breite geht es erst am Telefon. */
@media (max-width: 64em) {
  .feature {
    grid-template-columns: 41fr 59fr;
    grid-template-rows: auto auto;
  }

  /* Ueber dem ganzen Block statt neben dem Text, und um 66px vom
     Seitenrand eingerueckt — im Entwurf sitzt sie bei x=96
     (123:110), waehrend Zitat und Footer bei 30 stehen. */
  .feature__kopf {
    grid-column: 1 / -1;
    grid-row: 1;
    padding-inline: calc(var(--layout-gutter) + var(--rubrik-einzug));
    margin-block-end: var(--space-xl);
  }

  .feature__media {
    grid-column: 1;
    grid-row: 2;
  }

  /* Der Abstand zum Bild ist bei 834 der Entwurf (Bild bis 341,
     Text ab 428). Fest gesetzt blieb er darunter gleich gross,
     waehrend Bild und Text schrumpften — bei 700px wirkte die
     Luecke zu breit, bei 600 nahm sie fast ein Drittel der
     Textspalte. Er waechst jetzt mit: 40 bei 601, 64 bei 700,
     96 ab 834. */
  .feature__body {
    grid-column: 2;
    grid-row: 2;
    padding-inline:
      clamp(var(--layout-gutter), calc(24vw - 104px), var(--space-3xl))
      var(--layout-gutter);
  }
}

@media (max-width: 37.5em) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--section-gap);
  }

  .feature__kopf,
  .feature__media,
  .feature__body {
    grid-column: 1;
    grid-row: auto;
  }

  .feature__body {
    padding-inline: var(--layout-gutter);
  }

  /* Einspaltig faellt das Bild an beiden Seiten ueber den Rand.
     Eine Rundung nur rechts saehe dort schief aus. Hochformat wie
     im Entwurf: 402 breit, 487 hoch (148:1871). */
  .feature__media {
    aspect-ratio: 402 / 487;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Die drei Teile stehen unterschiedlich weit auseinander: 83px
     vom Bild zur Rubrik, 25px von der Rubrik zum Text (148:1871,
     148:1872, 148:1873). Ein einzelner Rasterabstand kann das
     nicht, deshalb Abstaende an der Rubrik. */
  .feature {
    gap: 0;
  }

  .feature__kopf {
    padding-inline: var(--layout-gutter);
    margin-block: 5.1875rem 1.5625rem;
  }

  /* .section setzt Folgeabstaende auf direkte Kinder — hier regeln
     das die Abstaende an der Rubrik. */
  .feature__body {
    margin-top: 0;
  }
}

/* --- Wechselblock: Bild und Text nebeneinander --------------
   Zwei gleich breite Spalten mit grosszuegigem Abstand. Im Entwurf
   sitzen sie bei x=177 und x=956, je 595 breit — der Abstand
   dazwischen betraegt 184px auf 1728px Artboardbreite.
   Die Variante --media-rechts tauscht die Seiten, ohne die
   Reihenfolge im Markup zu aendern.
   ------------------------------------------------------------ */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 48px an der Tabletgrenze (wie das Tablet selbst), 184px auf
     dem Artboard, dazwischen gerade. Die reine vw-Kurve gab direkt
     ueber der Grenze schon 109px — zu viel neben einem schmalen
     Bild. */
  gap: clamp(3rem, calc(19.3vw - 9.4rem), 11.5rem);
  align-items: stretch;
}

.duo--media-rechts > .duo__media {
  grid-column: 2;
  grid-row: 1;
}

.duo--media-rechts > .duo__body {
  grid-column: 1;
  grid-row: 1;
}

/* Das Bild behaelt sein Seitenverhaeltnis und wird nie hoeher als
   80% des sichtbaren Bereichs. */
.duo__media {
  align-self: start;
  max-block-size: 80svh;
}

/* Die Textspalte fuellt die Bildhoehe, der Text sitzt auf der
   Bildmitte — im Entwurf liegt die Textmitte von Block 1 bei
   y=1823,5 und die Bildmitte bei 1823.

   Die Rubrik lag hier frueher mit im Raster, oben buendig zur
   Bildoberkante und in derselben Flaeche wie der Text. Sobald der
   Text hoch genug wurde, wuchs er in sie hinein. Sie steht jetzt
   ueber dem Block. */
.duo__body {
  display: grid;
  align-content: center;
}

.duo__text > * + * {
  margin-top: var(--space-m);
}

/* Abstand zwischen Rubrik und Block — wie bei den Standorten auf
   der Kontaktseite, nicht der volle Abschnittsabstand, den
   `.section > * + *` sonst gaebe. */
.section-heading + .duo {
  margin-top: var(--space-3xl);
}

/* Auf dem Tablet bleibt der Text neben dem Bild, nur der Abstand
   dazwischen schrumpft. Einspaltig wird es erst am Telefon. */
@media (max-width: 64em) {
  .duo {
    gap: var(--space-xl);
  }
}

@media (max-width: 37.5em) {
  .duo {
    grid-template-columns: 1fr;
    /* Die Abstaende haengen am Bild, siehe unten. */
    gap: 0;
  }

  .duo--media-rechts > :is(.duo__media, .duo__body) {
    grid-column: 1;
    grid-row: auto;
  }

  /* Im Entwurf steht beim ersten Block erst der Text, dann das
     Bild (148:1525 bei 1122, 148:1526 bei 1328) — die Rubrik der
     Seite soll nicht unmittelbar auf eine Bildflaeche treffen.
     Alle weiteren Bloecke beginnen wie bisher mit dem Bild.

     Damit der Vorspann darueber rutschen kann, muss er ein Kind
     desselben Rasters sein wie das Bild: Texthuelle und Textspalte
     geben ihre Kaesten dafuer auf. */
  .duo__body,
  .duo__text {
    display: contents;
  }

  .duo__vorspann {
    order: -1;
  }

  /* 60px ueber und unter dem Bild: Der Vorspann endet im Entwurf
     bei 1268, das Bild beginnt bei 1328 und endet bei 1813, der
     Text folgt bei 1873. */
  /* Die Bilder laufen naeher an den Rand als der Text — wie in der
     Ablauf-Strecke. Der Abschnitt traegt den Seitenrand, das Bild
     holt sich die Differenz zurueck. */
  .duo__media {
    margin-block: 3.75rem;
    margin-inline: calc(0.5rem - var(--layout-gutter));
  }

  /* Im Entwurf sind alle Blockbilder gleich hoch (485 auf 382).
     Die Karten der Seite stehen dagegen auf 438:652 — fuer die
     Sportbilder der zweiten Rubrik ist das zu hochformatig. */
  section[aria-labelledby="entwicklung"] .duo__media {
    aspect-ratio: 382 / 485;
  }

  /* Ohne Vorspann steht das Bild oben — dort traegt der Abschnitt
     schon seinen Abstand. `:first-child` genuegt nicht: Im Markup
     steht das Bild immer zuerst, nur die Reihenfolge im Raster
     dreht sich. */
  .duo:not(:has(.duo__vorspann)) > .duo__media {
    margin-block-start: 0;
  }

  /* Der Vorspann ist weggerueckt — der Absatz danach braucht
     keinen Abstand zu ihm, das Bild dazwischen bringt seinen mit. */
  .duo__vorspann + * {
    margin-top: 0;
  }

  /* Folgt auf die Rubrik gleich Text, ruecken beide zusammen: im
     Entwurf 24px statt der 90, die vor einer Bildflaeche stehen
     (148:1499 endet 1098, 148:1525 beginnt 1122). */
  .section-heading + .duo:has(.duo__vorspann) {
    margin-top: var(--space-m);
  }
}

/* --- Infoliste ----------------------------------------------
   Rubrik links, Inhalt rechts, dazwischen durchgehende Trennlinien.
   Zweimal im Einsatz: Lebenslauf (Ueber mich) und Patienten-
   information. Die Linie laeuft ueber beide Spalten, deshalb sitzt
   sie am Eintrag und nicht an den Spalten.
   ------------------------------------------------------------ */
/* Alle Eintraege liegen in einem Container, damit der Folgeabstand
   von .section nicht zwischen ihnen greift — sonst kaeme der
   Abschnittsabstand zusaetzlich zum Innenabstand und die Linie saesse
   nicht mehr mittig zwischen den Eintraegen. */
/* Das Raster liegt auf der Liste, nicht auf den einzelnen Eintraegen:
   nur so sind die Spalten ueber alle Eintraege hinweg gleich breit.
   Vorher bestimmte jeder Eintrag seine Spalten selbst — bei 1100px
   ergab das vier verschiedene Teilungen (81/748, 171/658, 135/694,
   114/716), und „der ablauf" brach um.

   Die Rubriken brechen gar nicht (white-space unten), dadurch ist
   ihre min-content-Breite die ganze Zeile und nicht nur das
   laengste Wort. Die Spalte richtet sich danach.

   Vorher standen hier feste 12rem. Das reichte, solange die
   Rubriken 22px gross waren — mit den 31px des Tablet-Entwurfs
   passte „Berufserfahrung" nicht mehr hinein und wurde mitten im
   Wort getrennt. */
.infoliste {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, var(--layout-measure));
  column-gap: var(--layout-gap);
}

/* Nur die Rubriken des Lebenslaufs und der Patienteninformation.
   In den Rechtstexten steht in derselben Rolle die Abschnitts-
   ueberschrift („Haftung für externe Links"), die umbrechen muss. */
.infoliste:not(.infoliste--rechtstext) .infoliste__eintrag > h2 {
  white-space: nowrap;
}

.infoliste__eintrag {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 2;
  /* Rubrik und erste Inhaltszeile teilen sich die Grundlinie.
     Das schiebt den Zeilenanfang um 18px nach unten (gemessen,
     ueber alle Eintraege konstant) — der obere Innenabstand ist
     um genau diesen Betrag gekuerzt, damit die Trennlinie wieder
     mittig zwischen den Eintraegen sitzt. */
  align-items: baseline;
  padding-block: calc(var(--space-2xl) - 1.125rem) var(--space-2xl);
}

.infoliste__eintrag + .infoliste__eintrag {
  border-block-start: 1px solid
    color-mix(in srgb, var(--color-text) 20%, transparent);
}

/* Zwischen zwei Bloecken steht im Entwurf genau eine Leerzeile:
   Zeilenabstand 30px, von Punkt zu Punkt 60px. Aus der Zeilenhoehe
   gerechnet, damit beide Werte zusammen bleiben. */
.infoliste__block + .infoliste__block {
  margin-top: calc(var(--leading-body) * 1em);
}

/* Ist der Inhalt eine Aufzaehlung (Patienteninformation), tragen die
   Bloecke Punkte. Im Lebenslauf bleiben sie schlichte Bloecke. */
ul.infoliste__inhalt {
  padding-inline-start: 1.2em;
}

/* Rubriken stehen in Koralle, nicht im Waldgruen der uebrigen h2. */
.infoliste__eintrag > h2 {
  color: var(--color-accent);
}

/* Auf der Patienteninformation sind die Rubriken im Entwurf
   Vektorpfade (49:1468 ff.) und damit in Soyuz Grotesk gesetzt —
   wie „mein ansatz" und „der ablauf" auf der Startseite, in
   derselben Groesse. Der Lebenslauf auf „Ueber mich" nutzt
   dieselbe Komponente, dort sind es aber echte Texte in Romie. */
.infoliste--rubrikmarke .infoliste__eintrag > h2 {
  font-family: var(--font-brand);
  font-size: var(--text-section);
  line-height: 1;
  text-transform: lowercase;
}

.infoliste__vorspann {
  font-weight: var(--weight-bold);
}

/* Der Vorspann gehoert zur Zeile darunter, nicht als eigener Absatz. */
.infoliste__vorspann + * {
  margin-top: 0;
}

/* --- Rechtstexte --------------------------------------------
   Impressum, Datenschutz und AGB teilen sich das Raster der
   Infoliste, belegen es aber anders: die Rubrik steht nur einmal
   links, die Abschnittsueberschriften wandern in die Inhaltsspalte.
   Ab dem zweiten Abschnitt bleibt die linke Spalte leer — die
   Trennlinien laufen trotzdem ueber die volle Breite, weil sie am
   Eintrag haengen und nicht an der Spalte.
   ------------------------------------------------------------ */

.infoliste--rechtstext .infoliste__eintrag > :not(.section-heading) {
  grid-column: 2;
}

/* Rechtstexte tragen lange Komposita ("Gesundheitsberuferegister",
   "Krankenversicherung") und volle URLs. Auf schmalen Fenstern
   bestimmt das laengste Wort die Mindestbreite der Rasterspalte und
   sprengt sie. Getrennt wird nach Sprachregel (<html lang="de">);
   was sich nicht trennen laesst — Adressen —, darf notfalls
   irgendwo umbrechen. */
.infoliste--rechtstext .infoliste__eintrag {
  hyphens: auto;
  overflow-wrap: break-word;
}

.infoliste--rechtstext a[href^="http"],
.infoliste--rechtstext a[href^="mailto"] {
  overflow-wrap: anywhere;
}

/* Eine Telefonnummer bricht nicht in der Mitte um. */
.infoliste--rechtstext a[href^="tel"] {
  white-space: nowrap;
}

/* Die Rubrik steht auf der Grundlinie der ersten Ueberschrift.
   Sie wird nicht getrennt: Der Eintrag erlaubt Silbentrennung fuer
   die langen Komposita im Text, und die Rubrikspalte richtet sich
   nach ihrer Mindestbreite — mit Trennung waere das „Impres-",
   und die Spalte schrumpfte darauf zusammen. */
.infoliste--rechtstext .section-heading {
  grid-column: 1;
  grid-row: 1;
  hyphens: manual;
}

/* Hier tragen die Ueberschriften das Waldgruen der uebrigen h2,
   nicht das Koralle der Infoliste-Rubriken. */
.infoliste--rechtstext .infoliste__eintrag > h2 {
  color: var(--color-heading);
}

/* Zwischen Ueberschrift und Text steht im Entwurf eine Leerzeile,
   nicht der kleinere Abstand aus base.css. */
.infoliste--rechtstext .infoliste__eintrag > h2 + * {
  margin-top: calc(var(--leading-body) * 1em);
}


/* Der Lebenslauf bleibt auf dem Tablet zweispaltig — Rubrik links,
   Eintrag rechts. Die Rechtstexte stapeln frueher: Dort steht die
   Rubrik nur einmal ganz oben, die linke Spalte waere ab dem
   zweiten Abschnitt bloss leerer Raum. */
@media (max-width: 64em) {
  .infoliste--rechtstext,
  .infoliste--rechtstext .infoliste__eintrag {
    grid-template-columns: 1fr;
  }

  .infoliste--rechtstext .infoliste__eintrag {
    grid-column: auto;
    gap: var(--space-m);
  }

  /* Im Einspalter gibt es keine zweite Spalte mehr. Bliebe die feste
     Zuweisung stehen, legte das Raster eine implizite zweite Spalte
     an und liefe ueber den Rand. Die Selektoren sind bewusst gleich
     gebaut wie oben — sonst gewaenne dort das :not() ueber die
     Spezifitaet. */
  .infoliste--rechtstext .infoliste__eintrag > :not(.section-heading),
  .infoliste--rechtstext .section-heading {
    grid-area: auto;
  }
}

@media (max-width: 37.5em) {
  .infoliste,
  .infoliste__eintrag {
    grid-template-columns: 1fr;
  }

  .infoliste__eintrag {
    grid-column: auto;
    gap: var(--space-m);
  }
}

/* Gestapelt braucht der Rechtstext eine Staffelung, sonst beginnt
   alles an derselben Kante. Im Entwurf steht die Rubrik bei 96,
   Ueberschriften und Text bei 162, die Trennlinien laufen von 94
   bis 752 (136:1940, 136:1937, 136:1942). Der Einzug am Eintrag
   nimmt die Linien mit. */
@media (max-width: 64em) {
  .infoliste--rechtstext .infoliste__eintrag {
    margin-inline: var(--rubrik-einzug);
  }

  .infoliste--rechtstext .infoliste__eintrag > h2,
  .infoliste--rechtstext .infoliste__inhalt {
    padding-inline-start: var(--rubrik-einzug);
  }
}

/* Die Patienteninformation stapelt auf dem Tablet ebenfalls: Rubrik
   ueber dem Text, beide an derselben Kante. Im Entwurf (133:1752,
   133:1753) laufen die Trennlinien von 88 bis 746, Rubrik und Text
   beginnen bei 152 — also derselbe Einzug wie in den Rechtstexten,
   nur ohne deren Staffelung.

   Der Lebenslauf auf „Ueber mich" nutzt dieselbe Komponente ohne
   diese Klasse und bleibt zweispaltig. */
@media (max-width: 64em) {
  .infoliste--rubrikmarke,
  .infoliste--rubrikmarke .infoliste__eintrag {
    grid-template-columns: 1fr;
  }

  .infoliste--rubrikmarke .infoliste__eintrag {
    grid-column: auto;
    gap: var(--space-m);
  }

  /* Die Rubrik bemisst keine Spalte mehr; sie darf umbrechen,
     statt auf schmalen Fenstern ueber den Rand zu laufen. */
  .infoliste--rubrikmarke .infoliste__eintrag > h2 {
    white-space: normal;
  }
}

/* Der doppelte Einzug (Linie 96, Inhalt 162) kostet 132px. Auf dem
   Tablet ist das der Entwurf, auf dem Telefon bliebe von 402px
   kaum Zeilenbreite uebrig — dort steht der Block am Rand. */
@media (min-width: 37.5em) and (max-width: 64em) {
  .infoliste--rubrikmarke .infoliste__eintrag {
    margin-inline: var(--rubrik-einzug);
  }

  /* Als Aussenabstand, nicht als Innenabstand — sonst verloere die
     Aufzaehlung den Platz fuer ihre Punkte. */
  .infoliste--rubrikmarke .infoliste__eintrag > * {
    margin-inline-start: var(--rubrik-einzug);
  }
}

/* --- Lebenslauf auf dem Tablet ------------------------------
   Der Lebenslauf bleibt zweispaltig, rueckt aber ein: Das Signet
   schwebt links unten bei 30–76 und soll an den Rubriken
   vorbeiziehen, statt sie zu ueberdecken. Im Entwurf (126:512)
   laufen die Trennlinien deshalb von 75 bis 759, die Rubriken
   beginnen bei 95, die Eintraege bei 295.

   Nur in diesem Band: unterhalb von 600px stapelt die Liste
   ohnehin, und dort waere der Einzug zu teuer.
   ------------------------------------------------------------ */
@media (min-width: 37.5em) and (max-width: 64em) {
  .infoliste--lebenslauf {
    /* so breit wie das Signet — es zieht knapp links vorbei */
    --signet-raum: 2.8125rem;

    /* Breite einer Bildspalte des Rasters weiter oben, aus der um
       den Einzug verkuerzten Listenbreite zurueckgerechnet:
       100% + 2 x Einzug ist wieder die volle Inhaltsbreite. */
    --bildspalte: calc(
      (100% + 2 * var(--signet-raum) - 2 * var(--layout-gap)) / 3
    );

    margin-inline: var(--signet-raum);

    /* Die Eintragsspalte beginnt an der Kante des mittleren Bildes.
       Der Spaltenabstand steckt schon in der Rubrikspalte — sonst
       muesste die Rubrik in den Abstand hineinlaufen, um an ihren
       Platz zu kommen. */
    grid-template-columns:
      minmax(
        min-content,
        calc(var(--bildspalte) + var(--layout-gap) - var(--signet-raum))
      )
      minmax(0, 1fr);
    column-gap: 0;
  }

  /* Die Trennlinie haengt am Eintrag und beginnt darum am Rand
     der Liste; die Rubrik darin steht 20px weiter innen. */
  .infoliste--lebenslauf .infoliste__eintrag {
    padding-inline-start: 1.25rem;
  }
}

/* Die Ueberschriften der Behandlungsbloecke stehen im Waldgruen der
   uebrigen h2 (49:2262), nicht im Koralle der Kartentexte auf der
   Startseite. */
.duo__text :is(h3, h4) {
  color: var(--color-heading);
}

/* --- Standorte ----------------------------------------------
   Bild und Karte nebeneinander, darunter drei Textspalten.
   Figma 7.1: Bild 438 x 652 bei x=179, Karte 905 x 652 bei x=645,
   Texte bei 177 / 646 / 1113 — das ist dasselbe Raster wie die
   Kartenreihe der Startseite (3 x 438 + 2 x 28).
   ------------------------------------------------------------ */

/* Beide Reihen laufen auf denselben drei Spuren, die Karte nimmt
   zwei davon ein. Vorher hielt die obere Reihe ihre erste Spalte
   fest auf Kartenbreite, waehrend die untere in drei gleiche Teile
   ging — bei 1440px lag die zweite Textspalte dadurch 81px neben
   der Kartenkante, bei 1100px 171px. */
.standorte,
.standorte__texte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
}

.standorte > .standortkarte {
  grid-column: span 2;
}

/* Die Karte hat keine eigene Hoehe — sie nimmt die des Bildes
   daneben, das ueber sein Seitenverhaeltnis misst. */
.standorte > * {
  min-height: 100%;
}

/* Im Entwurf 89px zwischen Rubrik und Bildreihe, nicht die 24px,
   die base.css jeder Ueberschrift mitgibt. */
.section-heading + .standorte {
  margin-top: var(--space-3xl);
}

.standorte__texte {
  margin-top: var(--space-xl);
}

.standorte__texte address {
  font-style: normal;
}

@media (max-width: 64em) {
  .standorte {
    grid-template-columns: 1fr;
  }

  /* Im Einspalter gibt es keine zweite Spur mehr — bliebe die
     Zuweisung stehen, legte das Raster eine implizite an. */
  .standorte > .standortkarte {
    grid-column: auto;
  }

  /* Das Sesselbild steht im Entwurf neben der Karte. Untereinander
     ergibt es keinen Sinn mehr — es waere nur eine hohe Flaeche
     zwischen Rubrik und Karte, bei 1000px ueber 1100px hoch. */
  .standorte > .card {
    display: none;
  }

  /* Ohne Bild daneben braucht die Karte ein eigenes Mass. */
  .standorte .standortkarte {
    aspect-ratio: 905 / 652;
  }
}

/* Sobald die Karte ueber die volle Breite geht, gibt es oben keine
   drei Spuren mehr, an denen sich die Texte ausrichten koennten.
   Ab hier ruecken sie deshalb selbst so viele nebeneinander, wie
   Platz haben — die Aussenkanten bleiben die der Karte. */
@media (max-width: 64em) {
  .standorte__texte {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-xl) var(--layout-gap);
  }
}

@media (max-width: 64em) {
  /* „Lass uns miteinander sprechen" bekommt eine eigene Zeile,
     darunter stehen die beiden Adressen nebeneinander. */
  .standorte__texte {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .standorte__texte > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 37.5em) {
  .standorte__texte {
    grid-template-columns: 1fr;
  }

  /* Am Telefon steht die Karte hochkant: im Entwurf 382 auf 485
     (185:2104), waehrend sie ab Tablet quer liegt. */
  .standorte .standortkarte {
    aspect-ratio: 382 / 485;
  }

  /* Und sie ruecke naeher an die Rubrik — 74px statt der 96, die
     der Entwurf am Desktop zeigt (185:2094 endet bei 1121, die
     Karte beginnt bei 1195). */
  .section-heading + .standorte {
    margin-top: 4.625rem;
  }
}

/* --- Kontaktformular ----------------------------------------
   Abstaende aus Figma 7.1: Text bis 457, erstes Feld ab 504;
   Hinweis 20px unter dem Textfeld, Knopf 45px darunter.
   ------------------------------------------------------------ */

.kontaktformular {
  margin-top: var(--space-xl);
}

/* Im Entwurf ist der Knopf 282px breit (49:1679) — deutlich breiter,
   als „senden" braucht. Die Begrenzung auf 100% haelt ihn auf
   schmalen Fenstern im Rahmen. */
.kontaktformular .button {
  min-width: min(17.625rem, 100%);
  margin-top: var(--space-l);
}

/* Am Telefon nimmt er die ganze Formularbreite — bei 354px sind
   die 282 aus dem Entwurf ein angeschnittener Rest. */
@media (max-width: 37.5em) {
  .kontaktformular .button {
    width: 100%;
  }
}

/* --- Bildband mit Zitat -------------------------------------
   Zwei randabfallende Bilder nebeneinander, Zitat mittig darueber.
   ------------------------------------------------------------ */
.band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Feste Hoehe statt Mindesthoehe: so wird das Band nie hoeher als
     der sichtbare Bereich, auch nicht bei flachen Fenstern. */
  block-size: min(69.8125rem, 100svh);
  overflow: hidden;
  isolation: isolate;
}

.band__quote {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: grid;
  align-content: center;
  padding-inline: var(--space-m);
  color: var(--color-steingrau);
  /* Schlagschatten, damit das Zitat ueber hellen Bildstellen
     lesbar bleibt. */
  text-shadow:
    0 0.125rem 1.5rem rgb(46 44 45 / 0.55),
    0 0.0625rem 0.25rem rgb(46 44 45 / 0.35);
}

/* .text-quote setzt sonst Waldgruen — hier soll es die helle
   Farbe des Bandes uebernehmen. */
.band__quote .text-quote {
  color: inherit;
}

/* Ab Tablet steht nur noch ein Bild hinter dem Zitat — zwei
   nebeneinander waeren dort je unter 400px breit.

   `img:last-of-type` statt `:last-of-type`: Letzteres traf auch
   das Zitat, weil das ein div ist und damit das letzte seiner
   Art — der Text verschwand auf schmalen Fenstern mit. */
@media (max-width: 64em) {
  .band {
    grid-template-columns: 1fr;
  }

  .band > img:last-of-type {
    display: none;
  }
}

/* --- Kartengrid --------------------------------------------- */

/* Drei Spalten — bei 1370px Inhaltsbreite genau die Kartenbreite
   von 438px plus 28px Gutter. Schmalere Viewports stauchen die
   Spalten, statt auf zwei zu springen: auto-fit haette hier ab
   ca. 1500px Fensterbreite nur noch zwei Karten nebeneinander
   gestellt, weil 438px als Mindestbreite nicht mehr dreimal
   hineinpasst. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--layout-gap);
}

/* Auf dem Tablet bleiben es drei Spalten — im Entwurf stehen die
   drei Bilder der Ueber-mich-Seite auch dort nebeneinander, nur
   schmaler. Auf zwei und dann eine Spalte geht es erst am Telefon. */
/* Am Telefon wird aus der Reihe eine Wischleiste wie auf der
   Startseite. Der Entwurf stellt die drei Bilder nebeneinander
   (164:2313 ff., je 121 breit) — so klein ist darauf nichts mehr
   zu erkennen. Kartenbreite und Abstand darum wie bei .card-rail. */
@media (max-width: 37.5em) {
  .card-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(15.3125rem, 62vw);
    gap: 1.25rem;
    /* Wie die uebrigen Blockbilder naeher am Rand als der Text. */
    margin-inline: calc(0.5rem - var(--layout-gutter));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .card-grid::-webkit-scrollbar {
    display: none;
  }

  .card-grid > * {
    scroll-snap-align: start;
  }
}

/* --- Ablauf: Bild und Text paarweise ------------------------
   Auf dem Desktop drei Bilder in einer Reihe und die Texte darunter
   (49:2162 ff.), auf dem Tablet abwechselnd nebeneinander
   (123:123 ff.). Dasselbe Markup, zwei Raster.
   ------------------------------------------------------------ */

.ablauf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  /* Spaltenweise gefuellt: So landet jedes Bild in der oberen und
     sein Text in der unteren Zeile, obwohl sie im Markup
     paarweise beieinanderstehen. */
  grid-auto-flow: column;
  gap: var(--space-xl) var(--layout-gap);
}

/* Auf dem Desktop reicht das Paar seine beiden Kinder an das
   Raster darueber durch. */
.ablauf__paar {
  display: contents;
}

/* Der Text steht ein Stueck innerhalb der Bildkanten, nicht
   buendig darunter. Auf Tablet und Telefon steht er neben oder
   unter einem Bild, das selbst schon Rand haelt — dort wieder
   zurueckgenommen. */
.ablauf__paar > :not(.card) {
  padding-inline: var(--space-s);
}

@media (max-width: 64em) {
  .ablauf {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-flow: row;
    gap: var(--section-gap);
  }

  .ablauf__paar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--layout-gap);
    align-items: center;
  }

  .ablauf__paar > :not(.card) {
    padding-inline: 0;
  }

  /* Im Entwurf steht das Bild beim ersten und dritten Paar rechts,
     beim zweiten links. */
  .ablauf__paar:nth-child(odd) > .card {
    order: 2;
  }

  .ablauf__paar > .card {
    aspect-ratio: 377 / 467;
  }
}

@media (max-width: 37.5em) {
  /* Untereinander. Zwischen den Paaren 60px wie im Entwurf
     (148:1884 ff.); innerhalb eines Paars enger, damit Bild und
     Text als Einheit lesbar sind und nicht der Text naeher am
     naechsten Bild zu stehen scheint als am eigenen. */
  .ablauf {
    gap: 3.75rem; /* 60px */
  }

  .ablauf__paar {
    gap: var(--space-m); /* 24px */
  }

  .ablauf__paar {
    grid-template-columns: 1fr;
  }

  .ablauf__paar:nth-child(odd) > .card {
    order: 0;
  }

  /* Die Bilder laufen fast bis an den Rand — 0,5rem statt des
     Seitenrands von 1rem. Der Abschnitt traegt den Rand, das Bild
     holt sich die Differenz zurueck. */
  .ablauf__paar > .card {
    aspect-ratio: 382 / 485;
    margin-inline: calc(0.5rem - var(--layout-gutter));
  }
}

/* 4-Karten-Reihe der Startseite läuft im Figma über den Rand hinaus
   (x = 24 … 1859 bei 1728px Artboard) — also ein horizontaler Slider. */
.card-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(var(--layout-card), 80vw);
  gap: var(--layout-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Derselbe Randabstand links wie rechts. Im Entwurf laeuft die
     Reihe zwar ueber die rechte Kante hinaus (49:2126 endet bei
     1859 von 1728), am Ende der Strecke soll aber genauso viel
     Luft stehen wie am Anfang. */
  padding-inline: var(--space-m);
  scroll-padding-inline: var(--space-m);
  scrollbar-width: none;
}

.card-rail::-webkit-scrollbar {
  display: none;
}

.card-rail > * {
  scroll-snap-align: start;
}

/* Auf dem Tablet beginnt die Reihe eingerueckt und die Karten sind
   kleiner: im Entwurf 245 breit ab x=122, Abstand 20 (123:86 ff.).
   Der Einzug skaliert mit, sonst bliebe auf dem Telefon kaum
   Kartenbreite uebrig. */
@media (max-width: 64em) {
  .card-rail {
    grid-auto-columns: min(15.3125rem, 62vw);
    gap: 1.25rem;
    padding-inline: clamp(var(--space-m), 14.6vw, 7.625rem) var(--layout-gutter);
    scroll-padding-inline: clamp(var(--space-m), 14.6vw, 7.625rem);
  }
}

/* --- Header ------------------------------------------------- */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  min-height: var(--header-height);
  padding-block: var(--space-m);
  /* Kein eigener Hintergrund — der Header schwebt, wie im Entwurf. */
}

/* --- Menue: Burger und Vollbild-Overlay ---------------------
   Figma 136:2376 (iPad Pro 11"). Ab 64em traegt der Header die
   Navigation offen; darunter passt sie nicht mehr neben die
   Wortmarke (Logo 127 + Navigation 573 brauchen 700px, bei 834px
   Fensterbreite bleiben 662 uebrig).

   Die vier Hauptlinks stehen nur einmal im Markup: Auf dem Desktop
   ist das Panel bloss eine Huelle (display: contents), im Overlay
   wird es zur Flaeche.
   ------------------------------------------------------------ */

.site-header__menue {
  display: none;
}

/* Am Telefon steht die Wortmarke bei x=10, y=15 (148:1830). Wir
   nehmen den Seitenrand des Inhalts, damit Logo und Text auf
   derselben Kante stehen. */
@media (max-width: 37.5em) {
  .site-header {
    padding-block: var(--header-rand);
  }

  .site-header.container--wide {
    padding-inline: var(--layout-gutter);
  }

  /* Auf dem Desktop erscheint der Header erst nach dem Splash —
     dort steht die Wortmarke gross in der Bildmitte und waere
     doppelt. Am Telefon zeigt der Splash nur die Bildmarke
     (120:82), die Wortmarke steht auch dort schon oben links
     (120:93). Sie darf also von Anfang an sichtbar sein. */
  .site-header.reveal {
    animation: none;
  }
}

.site-header__panel {
  display: contents;
}

.menue__anhang {
  display: none;
}

@media (max-width: 64em) {
  .site-header__menue {
    display: grid;
    /* Beide Sinnbilder in derselben Rasterflaeche, damit der Wechsel
       die Kopfzeile nicht verschiebt. */
    grid-template-areas: "zeichen";
    place-items: center;
    width: 3.4375rem; /* 55px — Figma 123:41 */
    color: inherit;
    cursor: pointer;
  }

  .site-header__menue > svg {
    grid-area: zeichen;
    width: 100%;
    height: auto;
  }

  /* Geschlossen der Burger, offen das Kreuz. */
  .site-header__menue-zu,
  .site-header[data-menue-offen] .site-header__menue-auf {
    display: none;
  }

  .site-header[data-menue-offen] .site-header__menue-zu {
    display: block;
  }

  /* Das Kreuz steht immer auf dem dunklen Schleier, nie auf dem
     Abschnitt dahinter — es folgt deshalb nicht dem Thema. */
  .site-header[data-menue-offen] .site-header__menue {
    color: var(--color-weiss);
  }

  /* Solange js/menue.js nicht gelaufen ist, bleibt die Navigation
     sichtbar — sonst waere sie ohne Skript unerreichbar. Erst das
     Skript setzt data-menue und uebergibt damit an das Overlay. */
  .site-header[data-menue] .site-header__panel {
    position: fixed;
    inset: 0;
    /* Negativ innerhalb des Header-Stapelkontexts: ueber der Seite,
       aber unter Wortmarke und Schliesskreuz. */
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    /* Oben der Header, unten Signet und Ortszeile — dazwischen
       bleibt der Inhalt mittig. Auf flachen Fenstern scrollt er,
       statt unter die Fusszeile zu rutschen. */
    padding: var(--header-height) var(--space-m) 6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: color-mix(in srgb, var(--color-waldgruen) 90%, transparent);
    backdrop-filter: blur(var(--blur-glass));
    color: var(--color-steingrau);
    visibility: hidden;
    opacity: 0;
    /* Beim Schliessen wartet die Flaeche, bis der Inhalt weg ist
       (siehe unten), und blendet dann selbst aus. */
    transition:
      opacity var(--duration-base) var(--ease) var(--menue-staffel),
      visibility 0s linear calc(var(--duration-base) + var(--menue-staffel));

    /* Abstand zwischen Flaeche und Inhalt. Etwas kuerzer als die
       Blende selbst: Der Inhalt setzt ein, wenn der Schleier schon
       fast steht, nicht erst, wenn er ganz fertig ist. */
    --menue-staffel: 150ms;
  }

  .site-header[data-menue-offen] .site-header__panel {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  /* Der Inhalt blendet getrennt von der Flaeche: beim Oeffnen nach
     ihr, beim Schliessen vor ihr. Die Verzoegerung steht jeweils an
     dem Zustand, in den gewechselt wird. */
  .site-header[data-menue] :is(.site-nav, .menue__anhang) {
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease);
  }

  .site-header[data-menue-offen] :is(.site-nav, .menue__anhang) {
    opacity: 1;
    transition-delay: var(--menue-staffel);
  }

  /* Die Wortmarke steht im Overlay in Koralle statt in der Farbe
     des Abschnitts darunter (Figma 136:2478). */
  .site-header[data-menue-offen] .site-header__logo {
    color: var(--color-accent);
  }

  /* Mittig ueber automatische Raender statt justify-content: center.
     Ist der Inhalt hoeher als das Fenster, schiebt `center` ihn
     oben ueber den Scrollbereich hinaus — dorthin laesst sich dann
     nicht mehr scrollen. Automatische Raender fallen in dem Fall
     einfach auf null. */
  .site-header[data-menue] .site-nav {
    margin-block-start: auto;
  }

  .site-header[data-menue] .menue__anhang {
    margin-block-end: auto;
  }

  .site-header[data-menue] .menue__anhang {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
  }

  /* Hauptnavigation: gestapelt, mittig, mit Trennlinien dazwischen.
     Im Entwurf 32px Schrift, 88px von Zeile zu Zeile, Linien 222px
     breit und mittig in der Luecke. */
  .site-header[data-menue] .site-nav {
    /* 88px von Zeile zu Zeile im Entwurf, abzueglich der
       Zeilenhoehe von 38,4px. */
    --menue-luecke: 3.125rem;

    display: grid;
    justify-items: center;
    gap: var(--menue-luecke);
    font-size: clamp(1.5rem, 3.84vw, 2rem);
    line-height: 1.2;
  }

  .site-header[data-menue] .site-nav a {
    position: relative;
  }

  .site-header[data-menue] .site-nav a + a::before {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--menue-luecke) / -2);
    inset-inline-start: 50%;
    width: 13.875rem; /* 222px */
    translate: -50% 0;
    border-block-start: var(--border-width) solid
      color-mix(in srgb, currentcolor 45%, transparent);
  }

  /* Im Entwurf 243px breit (136:2486) — breiter, als die
     Beschriftung allein ergaebe. Ohne Prozentanteil: Der Anhang
     richtet sich nach seinem Inhalt, `100%` haette sich also auf
     eine Breite bezogen, die der Knopf selbst bestimmt. */
  .menue__anhang .button {
    min-width: 15.1875rem;
  }

  /* Signet links, Ortszeile rechts, beide am unteren Rand.

     Die Masse sind bewusst die des schwebenden Signets: Vorher
     stand das Overlay-Signet 6px links und 4px ueber ihm, und weil
     beide gleichzeitig sichtbar waren, sprang es beim Oeffnen. */
  .menue__fuss {
    position: absolute;
    inset-inline: var(--layout-gutter);
    inset-block-end: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-m);
  }

  .menue__signet {
    width: 2.875rem; /* 46px */
    height: auto;
    color: var(--color-accent);
  }

  /* Romie Bold 28/34 mit 0.56px Sperrung (136:2487). */
  .menue__ort {
    font-weight: var(--weight-bold);
    font-size: clamp(1.25rem, 3.36vw, 1.75rem);
    letter-spacing: 0.02em;
  }

  /* Solange das Overlay offen ist, scrollt die Seite dahinter nicht. */
  body:has(.site-header[data-menue-offen]) {
    overflow: hidden;
  }

  /* Das Overlay bringt Signet und Terminknopf selbst mit — die
     schwebenden Fassungen wuerden sonst gedaempft durch den
     Schleier durchscheinen und sich doppeln. */
  body:has(.site-header[data-menue-offen]) :is(.signet-fest, .button-fest) {
    visibility: hidden;
  }
}

/* Am Telefon steht im Overlay unten nicht Signet links und
   Ortszeile rechts, sondern beides mittig untereinander: Zeile bei
   y=723, Signet bei 803, beide auf der Mittelachse (121:1047).
   Der Knopf ist dort 221 statt 243 breit (121:1100). */
@media (max-width: 37.5em) {
  .menue__anhang .button {
    min-width: 13.8125rem; /* 221px */
  }

  .menue__fuss {
    flex-direction: column;
    /* 54px zwischen Ortszeile (endet 749) und Signet (ab 803) */
    gap: 3.375rem;
    inset-block-end: 1.9375rem; /* 31px */
  }

  .menue__signet {
    width: 2.4375rem; /* 39px */
    order: 1;
  }
}

/* Telefon quer (z. B. 874 x 402): Untereinander waere das Menue
   500px hoch, der Bildschirm 400. Die Links stehen deshalb zu zweit
   nebeneinander, darunter mittig der Knopf, ganz unten mittig die
   Ortszeile. Das Signet entfaellt hier — die Wortmarke steht ja
   schon oben links. */
@media (max-width: 64em) and (max-height: 32em) and (orientation: landscape) {
  .site-header[data-menue] .site-header__panel {
    gap: var(--space-l);
    /* unten Platz fuer die Ortszeile */
    padding-block-end: 4rem;
  }

  .site-header[data-menue] .site-nav {
    --menue-luecke: 1.75rem;
    grid-template-columns: repeat(2, auto);
    column-gap: var(--space-3xl);
    font-size: 1.75rem;
  }

  /* Trennlinien nur zwischen den beiden Zeilen, nicht vor dem
     zweiten Link der ersten Zeile. */
  .site-header[data-menue] .site-nav a:nth-child(2)::before {
    content: none;
  }

  .menue__fuss {
    inset-block-end: var(--space-m);
    justify-content: center;
  }

  .menue__signet {
    display: none;
  }

  .menue__ort {
    font-size: 1.25rem;
  }
}

/* Farbe richtet sich nach dem Abschnitt darunter; js/header.js setzt
   data-theme auf allen Elementen mit data-theme-follow.
   „light" = helle Schrift auf Bild- oder Dunkelflaeche. */
/* Die Ueberblendung gilt erst, wenn js/header.js einmal gemessen hat.
   Sonst wuerde ein serverseitig falsch gesetztes Startthema beim
   Seitenwechsel sichtbar von Dunkel nach Hell faden. */
html[data-thema-geprueft] [data-theme-follow] {
  transition: color var(--duration-base) var(--ease);
}

[data-theme-follow][data-theme="light"] {
  color: var(--color-weiss);
}

[data-theme-follow][data-theme="dark"] {
  color: var(--color-urbangrau);
}

/* Der Footer ist eine eigene Zone, nicht bloss „hell": Auf seinem
   Waldgruen steht die Wortmarke in Steingrau, das Signet aber in
   Koralle — so zeichnet es der Entwurf (49:624). Ueber Bildflaechen
   soll das Signet weiterhin weiss bleiben, deshalb genuegt „light"
   dafuer nicht. */
[data-theme-follow][data-theme="footer"] {
  color: var(--color-footer-text);
}

.signet-fest[data-theme="footer"] {
  color: var(--color-accent);
}

/* Alle Header-Links erben die Header-Farbe — sonst zieht das
   Inline-Logo das Koralle der allgemeinen Link-Regel. */
.site-header a {
  color: inherit;
}

/* Inline eingebundenes Logo, damit es die Header-Farbe erbt.
   Die Wortmarke ist Schrift in Pfadform — sie skaliert deshalb
   mit der Schriftgroesse mit. Seitenverhaeltnis 127:56. */
.site-header__logo {
  display: block;
  height: var(--logo-height);
  width: auto;
  flex-shrink: 0;
  color: inherit;
}

/* Seiten ohne Hero brauchen Platz unter dem fixierten Header.

   --offset ist fuer Seiten, deren <main> selbst der Abschnitt ist:
   dort kaeme sonst kein Abschnittsabstand mehr zustande.
   --offset-schlank ist fuer Seiten mit einem .section darin — der
   setzt den Rhythmus bereits, hier fehlt nur die Headerhoehe. */
.site-main--offset {
  padding-block-start: calc(var(--header-height) + var(--section-gap));
}

.site-main--offset-schlank {
  padding-block-start: var(--header-height);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
}

/* Die Unterstreichung liegt immer an, ist im Ruhezustand aber
   durchsichtig. Nur so laesst sie sich weich einblenden:
   text-decoration-line ist nicht animierbar, die Farbe schon. */
.site-nav a {
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--duration-base) var(--ease);
}

/* Aktiver Menüpunkt zusaetzlich kursiv. */
.site-nav a[aria-current="page"] {
  font-style: italic;
}

/* Sichtbar wird die Unterstreichung beim aktiven und beim gerade
   ueberfahrenen Punkt. Die allgemeine Link-Regel blendet Links beim
   Hover ab — im Header ist die Unterstreichung das Signal, deshalb
   hier volle Deckkraft. */
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration-color: currentColor;
}

/* Im Overlay nicht: Dort stehen die Punkte gross und mit
   Trennlinien dazwischen, eine weitere Linie unter dem aktiven
   waere eine zu viel. Die Kursive genuegt als Merkmal. */
@media (max-width: 64em) {
  .site-header[data-menue] .site-nav a[aria-current="page"] {
    text-decoration-color: transparent;
  }
}

.site-nav a:hover {
  opacity: 1;
}

/* --- Hero ---------------------------------------------------
   Figma 19:2 / 33:1716 — 1728 × 1117, zwei randabfallende Bilder
   nebeneinander, Text darüber.
   ------------------------------------------------------------ */

.hero {
  position: relative;
  display: grid;
  /* Die Headline steht mittig im Hero — im Entwurf liegt ihre Mitte
     bei y=554 von 1117. Der Innenabstand ist bewusst symmetrisch:
     asymmetrisch waere die Zeile um die halbe Differenz nach unten
     gerutscht, statt wirklich mittig zu sitzen. */
  align-content: center;
  min-height: min(69.8125rem, 100svh); /* 1117px */
  padding-block: var(--header-height);
  overflow: hidden;
  color: var(--color-on-image);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Auf dem Tablet stehen die beiden Fotos uebereinander statt
   nebeneinander (Figma 123:39 und 123:64: 834x605 ueber 835x593). */
@media (max-width: 64em) {
  /* Im Entwurf fuellt der Hero die Fensterhoehe (605 + 593 von
     1194). Die 1117px sind das Desktop-Artboard. */
  .hero {
    min-height: 100svh;
  }

  .hero__media {
    grid-template-columns: 1fr;
    /* minmax(0, 1fr) statt 1fr: Die Untergrenze von `1fr` ist die
       Mindesthoehe des Inhalts, und die ist bei einem Bild mit
       `width: 100%` seine skalierte Eigenhoehe — die Zeilen wuchsen
       dadurch auf 1228 und 1024 statt sich zu teilen. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__content {
  text-align: center;
}

/* Am Telefon stehen die beiden Hero-Fotos uebereinander, und oben
   links liegt dann die weisse Wand des ersten Bildes genau unter
   der weissen Wortmarke — sie verschwindet darauf. Der Entwurf
   zeigt dort das dunkle Haar: Er schneidet das Bild tiefer an
   (120:76: Hoehe 138%, Versatz -29,93%, also rund vier Fuenftel
   statt der Mitte). */
@media (max-width: 37.5em) {
  .hero__bild--tief {
    object-position: 50% 79%;
  }
}

/* Signet und Terminbutton bleiben beim Scrollen stehen. Positionen
   aus dem Entwurf: Signet bei x=64 und 34px ueber der Hero-Unterkante,
   der Button rechts mit 24px Rand und 32px ueber der Unterkante. */
.signet-fest,
.button-fest {
  position: fixed;
  z-index: 90;
}

/* Unterkante auf der Grundlinie der letzten Footerzeile, wenn die
   Seite ganz nach unten gescrollt ist: 40px Innenabstand plus 9px
   von der Grundlinie der Labels bis zu ihrer Zeilenunterkante. */
.signet-fest {
  inset-block-end: 3.0625rem; /* 49px */
  inset-inline-start: 4rem;  /* 64px */
  display: block;
  width: 3rem;               /* 48px */
  height: auto;
}

.button-fest {
  inset-block-end: 3.0625rem; /* 49px — wie das Signet */
  inset-inline-end: var(--space-m);
}

/* Der Button traegt eine eigene Flaeche — die Farblogik der
   schwebenden Elemente darf seine Schrift nicht ueberschreiben. */
.button-fest[data-theme-follow][data-theme] {
  color: var(--color-button-text);
}

.button-fest[data-theme-follow][data-theme]:hover {
  color: var(--color-button-hover-text);
}

/* Auf dem Tablet wird aus dem Knopf eine Scheibe von 112px mit
   zweizeiliger Beschriftung (Figma 123:166). Signet und Knopf
   ruecken auf den Seitenrand von 30px. */
@media (max-width: 64em) {
  .signet-fest {
    inset-inline-start: var(--layout-gutter);
    inset-block-end: 2.75rem; /* 44px */
    width: 2.875rem;          /* 46px */
  }

  /* Mit `.button` qualifiziert: components.css wird nach layout.css
     geladen, bei gleicher Spezifitaet gewaenne dort sonst der
     eckige Radius und der breitere Innenabstand des Grundknopfs. */
  .button.button-fest {
    inset-inline-end: var(--layout-gutter);
    inset-block-end: 2.6875rem; /* 43px */
    width: 7rem;
    height: 7rem;
    padding-inline: var(--space-2xs);
    border-radius: 50%;
    line-height: 1.15;
    text-align: center;
  }
}

/* Am Telefon schwebt nur noch der Knopf. Das Signet steht dort
   nicht ueber dem Inhalt, sondern unten im Footer (148:1920) — es
   scrollt also mit. Der Knopf selbst wird kleiner, seine
   Beschriftung aber groesser: Im Entwurf misst die Scheibe 105px
   und die Schrift darin 74px, sie fuellt die Flaeche also fast aus
   (148:1837). */
@media (max-width: 37.5em) {
  .signet-fest {
    display: none;
  }

  .button.button-fest {
    /* wie Wortmarke und Menueknopf darueber, nicht am Seitenrand
       der Inhaltsspalte */
    inset-inline-end: 0.625rem;  /* 10px */
    inset-block-end: 2.0625rem;  /* 33px */
    width: 6.5625rem;            /* 105px */
    height: 6.5625rem;
    padding-inline: var(--space-3xs);
    font-size: 1.5rem;           /* 24px */
  }
}

/* --- Splash auf der Startseite ------------------------------
   Der Landing-Frame (33:1716) zeigt die Bildmarke gross ueber den
   Hero-Fotos. Nach kurzer Standzeit blendet sie aus und gibt das
   eigentliche Hero frei: Wortmarke, Navigation, Headline und das
   kleine Signet.

   Bewusst reine CSS-Animation statt JavaScript — so kann der
   Splash nicht haengenbleiben, wenn ein Skript scheitert.
   ------------------------------------------------------------ */

.splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  /* Die Bildmarke sitzt auf der Mitte des Heros — also auf der Naht
     zwischen den beiden Fotos, wenn sie uebereinander stehen. Lag
     die Ortszeile mit im Raster, teilte sie sich die Hoehe und das
     Lockup rutschte um ihre halbe Hoehe nach oben. */
  align-content: center;
  color: var(--color-on-image);
  animation: splash-aus var(--splash-fade) var(--ease) var(--splash-hold) forwards;
}

@keyframes splash-aus {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Wortmarke links, Signet mittig, zweite Haelfte rechts.
   Im Entwurf sitzen sie bei x=179 / 772 / 1281 — also linksbuendig,
   exakt mittig und rechtsbuendig in der Inhaltsbreite. */
.splash__lockup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
}

.splash__lockup > :first-child {
  justify-self: start;
}

.splash__lockup > :last-child {
  justify-self: end;
}

/* Breiten wie die Typo-Skala an der Viewportbreite ausgerichtet:
   der vw-Wert trifft bei 1728px genau die Figma-Groesse (287, 185
   und 268), das clamp verhindert Extreme auf sehr schmalen und
   sehr breiten Fenstern.

   Prozentwerte gehen hier nicht: auf einem Grid-Element loesen sie
   sich gegen die Spur auf, und die Spur richtet sich nach dem
   Element — das ist zirkulaer und liefert zu kleine Werte. */
.splash__teil {
  display: block;
  height: auto;
}

.splash__teil--sophie { width: clamp(7rem, 16.61vw, 17.9375rem); }
.splash__teil--signet { width: clamp(4.5rem, 10.71vw, 11.5625rem); }
.splash__teil--leisch { width: clamp(6.5rem, 15.51vw, 16.75rem); }

.splash__claim {
  position: absolute;
  inset-block-end: var(--space-xl);
  inset-inline: 0;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
}

/* Am Telefon zeigt der Splash nur die Bildmarke, gross und mittig
   auf der Naht zwischen den beiden Fotos (120:82: 146x150, Mitte
   bei 436,5 von 874). Die Wortmarke steht stattdessen klein oben
   links im Header, die Ortszeile direkt unter der Bildmarke. */
@media (max-width: 37.5em) {
  .splash__teil--sophie,
  .splash__teil--leisch {
    display: none;
  }

  .splash__lockup {
    grid-template-columns: auto;
  }

  .splash__teil--signet {
    width: 9.125rem; /* 146px */
  }

  /* Bleibt absolut gesetzt: im Raster teilte sie sich die Hoehe mit
     der Bildmarke und schoebe sie aus der Mitte. Der Abstand ist
     deshalb von der Mitte aus gerechnet — halbe Bildmarke plus
     Luft (120:81 beginnt bei 523, die Mitte liegt bei 437). */
  .splash__claim {
    inset-block: calc(50% + 6.5rem) auto;
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
  }
}

/* --- Freilegen des Hero -------------------------------------
   Alles, was erst nach dem Splash erscheint. Gleiche Verzoegerung
   wie das Ausblenden, dadurch ein sauberer Wechsel.
   ------------------------------------------------------------ */

.reveal {
  animation: reveal-ein var(--splash-fade) var(--ease) var(--splash-hold) backwards;
}

@keyframes reveal-ein {
  from {
    opacity: 0;
  }
}

/* Wer vorzeitig mit der Tastatur navigiert, soll nicht auf einen
   noch unsichtbaren Link fassen: der Splash endet dann sofort. */
body:has(:focus-visible) .splash {
  animation: none;
  opacity: 0;
  visibility: hidden;
}

body:has(:focus-visible) .reveal {
  animation: none;
  opacity: 1;
}

/* Bei reduzierter Bewegung entfaellt der Splash ganz — eine
   Wartezeit ohne Animation waere nur laestig. */
@media (prefers-reduced-motion: reduce) {
  .splash {
    display: none;
  }

  .reveal {
    animation: none;
    opacity: 1;
  }
}

/* --- Footer ------------------------------------------------- */

.site-footer {
  /* Reicht der Inhalt nicht fuer die Mindesthoehe (ab 1728px), geht
     der Rest nach oben statt nach unten. So steht die letzte Zeile
     auf jeder Breite gleich weit ueber dem Seitenende — Signet und
     Terminknopf sind darauf ausgerichtet (siehe unten). */
  display: grid;
  align-content: end;
  min-height: var(--footer-height);
  /* Figma: Inhalt beginnt bei y=6104, Footer bei 6054 -> 50px oben;
     Labels enden bei 6227, Footer bei 6267 -> 40px unten. */
  padding-block: 3.125rem 2.5rem;
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  /* Figma-Stil Footer/Footer Infotexte: gleiche Groesse wie die
     Navigation, aber luftiger gesetzt (18/26 statt 18/22). Der
     Fliesstext-Token wird hier lokal umgehaengt, damit die p-Regel
     aus base.css denselben Wert zieht statt ihn zu ueberschreiben. */
  font-size: var(--text-nav);
  line-height: var(--leading-footer);
  --leading-body: var(--leading-footer);
  /* Waldgruen ist hier die Hintergrundfarbe — der Button braucht
     beim Ueberfahren einen Ton, der sich davon abhebt. Steingrau
     liegt bei 7.5:1 gegen den Footer, Urbangrau nur bei 1.6:1. */
  --color-button-hover-bg:   var(--color-steingrau);
  --color-button-hover-text: var(--color-urbangrau);
}

/* Der Claim schliesst direkt an die Wortmarke an. */
.wordmark + p {
  margin-top: 0;
}

.site-footer a {
  color: inherit;
}

/* Die Footer-Spalten sind im Figma von Hand gesetzt (x-Werte mit
   Nachkommastellen) und NICHT gleich breit. Startpunkte bei 1728px:
   Signet 65 | Marke 179 | Kontakt 489 | Standorte 780 |
   Ordination 1019 | Legal 1267 | Button 1480 (225 breit, endet 1705).
   Die Spurbreiten unten sind die Abstaende zwischen diesen Punkten. */
.site-footer__grid {
  display: grid;
  /* Sieben Spuren wie im Entwurf (49:622) — die erste und die
     letzte bleiben aber leer: Dort stehen Signet und Terminknopf,
     die als schwebende Elemente ueber dem Footer liegen statt in
     ihm. Die letzte ist fest bemessen, weil kein Inhalt sie
     aufspannt. */
  /* Die Inhaltsspuren werden nie schmaler als ihr Text: Mit reinen
     Anteilen schrumpften sie unter 1650px mit dem Fenster und die
     Adressen brachen auf fuenf Zeilen um. Bei 1728 kommen dieselben
     Spurbreiten heraus wie zuvor. Die erste, leere Spur haelt
     mindestens 4rem fuer das Signet frei. */
  grid-template-columns:
    minmax(4rem, 114fr)
    minmax(max-content, 310fr)
    minmax(max-content, 291fr)
    minmax(max-content, 238fr)
    minmax(max-content, 248fr)
    minmax(max-content, 214fr)
    15.5rem;
  /* Zwei Zeilen: oben der Inhalt, unten die Spaltenlabels. Dadurch
     liegen die Labels auf einer Linie, ohne dass jede Spalte das
     selbst regeln muss. */
  grid-template-rows: auto auto;
  align-items: start;
  column-gap: var(--layout-gap);
  padding-inline: 3.76% 1.33%;
}

/* Die Marke beginnt in der zweiten Spur — die erste bleibt dem
   schwebenden Signet. Die uebrigen Spalten fliessen von selbst
   nach. */
.site-footer__col--marke {
  grid-column: 2;
}

/* Jede Spalte übernimmt die beiden Zeilen des Elternrasters:
   Inhalt in Zeile 1, Label in Zeile 2. */
.site-footer__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
}

/* Browser setzen <address> kursiv. */
.site-footer address {
  font-style: normal;
}

.site-footer__label {
  padding-top: var(--space-xs);
}

/* Unter 1344px reicht eine Zeile nicht mehr: Selbst wenn jede Spalte
   genau so breit ist wie ihr Text, stoesst „Legal" unterhalb von
   rund 1340px an den Terminknopf. Vorher brachen die Adressen hier
   auf fuenf Zeilen um, und unter 1100px landete eine unter dem
   Signet.

   Aufbau wie am Tablet: Marke links am Seitenrand, daneben oben die
   beiden Standorte, darunter Kontakt und Legal. Unter der Marke
   bleibt die Zelle frei — dort steht das schwebende Signet, auf
   derselben Kante wie die Marke. Rechts eine Spur fuer den Knopf.
   Die Inhaltsspuren sind `auto`, damit die sichtbaren Abstaende
   gleich werden. */
@media (min-width: 64.0625em) and (max-width: 84em) {
  .site-footer__grid {
    grid-template-columns: auto auto auto 13rem;
    grid-template-rows: auto auto;
    gap: var(--space-xl) var(--layout-gap);
    padding-inline: var(--layout-gutter);
  }

  /* Die Spalten teilen sich die Zeilen nicht mehr — ihre Labels
     stehen einfach unter ihrem Block. */
  .site-footer__col {
    display: block;
    grid-row: auto;
  }

  .site-footer__col--marke {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer__col--standort {
    grid-column: 2;
    grid-row: 1;
  }

  .site-footer__col--standort + .site-footer__col--standort {
    grid-column: 3;
  }

  .site-footer__col--kontakt {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer__col--legal {
    grid-column: 3;
    grid-row: 2;
  }

  /* Das Signet auf die Kante der Marke, wie am Tablet. */
  .signet-fest {
    inset-inline-start: var(--layout-gutter);
  }
}


/* Tablet und schmaler: vier Spuren statt sieben. Oben die beiden
   Adressen, darunter Kontakt und Legal — anders als im Entwurf,
   wo Legal oben steht. Links Marke und Signet, rechts der Knopf
   ueber beide Zeilen.
   ------------------------------------------------------------ */
@media (max-width: 64em) {
  /* Unterkante des Textes auf Hoehe der schwebenden Elemente: Die
     stehen 43px ueber dem Seitenende, der Innenabstand traegt
     denselben Wert. */
  .site-footer {
    padding-block-end: 2.75rem;
  }

  .site-footer__grid {
    /* Drei inhaltsbreite Spuren, dazu 7rem fuer die schwebende
       Scheibe rechts (123:160 ff.).

       Vorher standen hier die Anteile des Entwurfs (265, 198, 198
       von Spaltenanfang zu Spaltenanfang). Die Spuren waren dadurch
       zwar so breit wie gezeichnet, die *sichtbaren* Abstaende aber
       nicht: Die Marke fuellt ihre Spur nur zur Haelfte, die
       Adressen fuellen ihre ganz. Zwischen Marke und erster Adresse
       klafften 104px, zwischen den beiden Adressen 26.

       Mit `auto` bekommt jede Spur ihren Inhalt plus einen gleichen
       Anteil am Rest — die Luecken werden dadurch gleich (74 und 68
       bei 834, 88 und 88 bei 899). Der Preis: Die Spaltenkanten
       haengen an den Textlaengen, eine laengere Adresse verschiebt
       sie. Bei festem Fusszeilentext ist das zu verschmerzen. */
    grid-template-columns: auto auto auto 7rem;
    grid-template-rows: auto auto;
    gap: var(--space-xl) var(--layout-gap);
    padding-inline: var(--layout-gutter);
  }

  /* Die Spalten teilen sich das Raster des Footers nicht mehr —
     ihre Labels stehen einfach unter ihrem Block. */
  .site-footer__col {
    display: block;
    grid-row: auto;
  }

  /* Spur 1 traegt die Marke; das schwebende Signet liegt darunter
     in deren leerer zweiter Zeile. */
  .site-footer__col--marke {
    grid-column: 1;
    grid-row: 1;
  }

  /* Ohne Spaltenangabe: Die beiden ruecken von selbst in die
     naechsten freien Zellen der ersten Zeile. */
  .site-footer__col--standort {
    grid-row: 1;
  }

  .site-footer__col--kontakt {
    grid-column: 2;
    grid-row: 2;
  }

  .site-footer__col--legal {
    grid-column: 3;
    grid-row: 2;
  }

}

/* Das Signet steht nur am Telefon im Footer — darueber uebernimmt
   das schwebende aus schwebend.php, das dort die Farbe wechselt. */
.site-footer__signet {
  display: none;
}

/* --- Footer am Telefon --------------------------------------
   Fuenf Baender: Marke mittig ueber die ganze Breite, darunter die
   beiden Standorte, dann Kontakt neben Legal, zuletzt Signet und
   Jahreszeile wieder mittig. Die Spalten stehen im Entwurf
   (148:1915) bei x=38 und 239.
   ------------------------------------------------------------ */
@media (max-width: 37.5em) {
  /* Der Terminknopf schwebt weiter, braucht aber kein eigenes Band
     mehr: Er steht rechts, Signet und Jahreszeile stehen mittig —
     nebeneinander ist Platz. Unten bleibt darum nur das Mass des
     Entwurfs (148:1919 endet bei 6785, der Footer bei 6812). */
  .site-footer {
    padding-block-end: 1.75rem;
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    /* Der engste Abstand im Stapel: 14px zwischen Signet und
       Jahreszeile (148:1920 endet bei 6757, 148:1919 beginnt bei
       6771). Die weiteren Baender setzen darauf auf. */
    row-gap: 0.875rem;
    /* Im Entwurf stehen die Spalten bei 38 und 239, die rechte
       laeuft bis an den Seitenrand. Hier stehen beide symmetrisch,
       aber schmaler als der Seitenrand des Textes: Mit 1,5rem
       braechen „info@sophie-leisch.at" und „Heinrichsgasse 2/1/2A"
       um. */
    column-gap: 1.25rem;
    padding-inline: 1rem;
  }

  /* 40px zwischen den Textbaendern (6321 -> 6360, 6437 -> 6476). */
  .site-footer__col--kontakt,
  .site-footer__col--legal,
  .site-footer__col--standort {
    margin-block-start: 1.625rem;
  }

  /* Aufgeloest, damit Wortmarke und Jahreszeile einzeln im Raster
     stehen: im Entwurf ganz oben die eine, ganz unten die andere. */
  .site-footer__col--marke {
    display: contents;
  }

  .site-footer__col--marke > div {
    grid-column: 1 / -1;
    order: 1;
    text-align: center;
  }

  /* Wie am Tablet: oben die beiden Standorte nebeneinander, darunter
     Kontakt und Legal. Der Entwurf (148:1915) hat es umgekehrt. */
  .site-footer__col--standort {
    order: 2;
  }

  .site-footer__col--kontakt {
    order: 3;
  }

  .site-footer__col--legal {
    order: 4;
  }

  .site-footer__col--standort,
  .site-footer__col--kontakt,
  .site-footer__col--legal {
    grid-column: auto;
    grid-row: auto;
  }

  .site-footer__signet {
    display: block;
    order: 5;
    grid-column: 1 / -1;
    justify-self: center;
    width: 2.1875rem; /* 35px */
    height: auto;
    margin-block-start: 3.125rem;
    color: var(--color-accent);
  }

  /* Die Jahreszeile steht hier nicht als Spaltenlabel unter einem
     Textblock, sondern allein unter dem Signet — die grosse
     Zeilenhoehe der Labels wuerde den Abstand verdoppeln. */
  .site-footer__col--marke > .site-footer__label {
    grid-column: 1 / -1;
    order: 6;
    padding-top: 0;
    line-height: 1.2;
    text-align: center;
  }
}