/* Urobalance – Übergangsseite.
   Farben und Schrift sind aus dem Design-System von web-hzr übernommen
   (DESIGN.md), aber als Literale kopiert – dieses Projekt hängt an nichts. */

@font-face { font-family: Barlow; font-weight: 400; font-style: normal;
  font-display: swap; src: url(fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 700; font-style: normal;
  font-display: swap; src: url(fonts/barlow-700.woff2) format("woff2"); }

:root {
  --magenta: #ff025a;
  --magenta-deep: #be0143;
  --ink: #252525;
  --graphite: #525252;
  /* Der einzige nicht-weisse Ton des Systems - und er hat jetzt zwei Aufgaben:
     die Wand, an der das Blatt haengt, und das Nummernfeld darin. Vorher
     #f5f5f5; gegen Papierweiss waren das 1,04:1, also bei Tageslicht auf einem
     Telefon gar keine Flaeche. #efedea sind 1,17:1 und minimal waermer.
     Nachgerechnet auf diesem Grund: --magenta-deep 5,49:1, --graphite 6,69:1,
     --ink 13,11:1, --magenta 3,32:1 (nur Grossschrift, siehe Deep-Regel). */
  --mist: #efedea;
  --paper: #fff;
  --hairline: rgb(0 0 0 / 0.1);
  /* Die Kante. Ein Blatt liegt nicht ueber der Tuer, es liegt darauf - es hat
     deshalb keinen Schatten, sondern einen Schnitt. Getrennt von --hairline,
     weil der eine eine Verzierung an einem Link ist und der andere eine
     Begrenzung: dieselbe Zurueckhaltung, verschiedene Aufgaben. */
  --edge: rgb(0 0 0 / 0.12);
}

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

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

body {
  margin: 0;
  /* Die Seite hat wenig Inhalt. Ohne das steht sie oben im Fenster und der
     Rest ist Leere – das liest sich wie ein Ladefehler, nicht wie Absicht. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Der Grund ist nicht mehr das Blatt, sondern die Tuer. */
  background: var(--mist);
  /* Garantierte Luft ueber dem Blatt: `margin-block: auto` an .sheet zentriert
     es im freien Raum, aber wenn keiner da ist, wird die Marge 0 und das Blatt
     klebt an der Fensterkante. */
  padding-block-start: clamp(0.75rem, 3vh, 2rem);
  color: var(--ink);
  font-family: Barlow, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  /* Deutscher Fließtext bricht sonst an langen Komposita hässlich um. */
  hyphens: auto;
}

/* Maschinenlesbare Zeichenketten – E-Mail, Domain – dürfen keinen Trennstrich
   dazuerfinden, den die Leserin dann mit abtippt. */
.nohyphen { hyphens: manual; overflow-wrap: anywhere; }

a { color: var(--magenta-deep); }
/* Der helle Markenton hat auf Weiss nur 3,88:1 und traegt damit keinen Text.
   Er darf nur dort leuchten, wo Grossschrift mit 3:1 auskommt - das ist auf
   dieser Seite ausschliesslich die Telefonnummer. Alle uebrigen Links
   quittieren den Hover ueber den Unterstrich statt ueber die Farbe. */
a:hover { color: var(--magenta-deep); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--magenta-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  /* width:100% ist Pflicht, nicht Kosmetik: als Flex-Item in der Spalte
     schrumpft der Block sonst auf Inhaltsbreite, sobald margin-inline:auto
     gesetzt ist. */
  width: 100%;
  max-width: 38rem;
  margin-inline: auto;
  /* Die Obergrenze ist rem, die Untergrenze das Fenster. Bei jeder normalen
     Grundschrift sind das die dokumentierten 24px (8vw waeren bei 320px schon
     25,6px, greifen also nie). Erst unter Textzoom gibt die Rinne nach - und
     das muss sie: bei 200 % waeren 1.5rem = 48px je Seite, und zusammen mit
     denen von .call blieben der Telefonnummer 113px Innenbreite. Sie rutschte
     dadurch auf 15,6px, also unter den Fliesstext daneben - gemessen. Wer die
     Schrift vergroessert, bekam ausgerechnet die Nummer am kleinsten. */
  padding-inline: min(1.5rem, 8vw);
}

/* ---------- Das Blatt ---------- */

/* Der North Star der Seite ist "Der Aushang": ein Blatt an der Praxistuer.
   Solange die Seite selbst weiss war, gab es keinen Gegenstand - sie WAR die
   Flaeche, und das Konzept stand nur in DESIGN.md. Das Blatt ist das
   Gegenstueck dazu: es traegt Wortmarke, Zustand, Nummer und Anschrift, und
   alles, was nicht auf einem Aushang steht - der Verweis auf die Praxis, die
   Pflichtlinks, das Bild - bleibt an der Wand darunter.

   Die Kante ist ein Haarstrich, kein Schatten. Die Flach-Regel gilt weiter:
   ein Aushang liegt auf der Tuer, nicht darueber. */
.sheet {
  /* min() statt clamp(): ein rem-Boden im clamp() waechst unter Textzoom mit
     und knapste dem Blatt genau dort Breite ab, wo sie am knappsten ist. */
  width: calc(100% - min(2rem, 4vw));
  max-width: 41rem;
  /* Zentriert waagerecht wie senkrecht: als Flex-Item in der Spalte nimmt
     `auto` den freien Raum auf und schiebt Praxisverweis, Fuss und Band an den
     unteren Rand - dieselbe Wirkung, die vorher `flex: 1` auf .hero hatte. */
  margin: auto;
  background: var(--paper);
  border: 1px solid var(--edge);
  /* Papier hat fast rechte Ecken. 2px, damit die Kante nicht schneidet. */
  border-radius: 2px;
}

/* ---------- Kopf ---------- */

/* Die Hoehe wird nur auf flachen Fenstern knapp, nicht auf schmalen. Deshalb
   deckelt vh statt vw: bei 880px Fensterhoehe bleiben es die bisherigen 56px
   (8vh = 70,4px, greift nicht), im Querformat bei 390px Hoehe sind es 31,2px.
   min() ist kein Breakpoint - die Seite dehnt sich weiter stufenlos. */
.masthead { padding-block: min(3.5rem, 8vh) 0; text-align: center; }
.masthead a { display: inline-block; }
/* Dieselbe Logik am Bild: bei 880px Hoehe sind 12vh = 105,6px und die
   Wortmarke ist 68px hoch - die Regel schlaeft. Im Querformat deckelt sie auf
   46,8px und gibt 23px an die Nummer ab. Steht hier und nicht an
   `.masthead > img`, damit sie die Startseite und die Rechtsseiten
   gleichermassen trifft (siehe Wortmarken-Regel). */
.masthead img { width: 100%; height: auto; max-height: 12vh; }
/* Die Startseite traegt das Bild direkt im .masthead, die Rechtstexte in einem
   <a href="/">. Stuende die Begrenzung am Bild, rechnete max-width dort gegen
   den auf Inhaltsbreite geschrumpften Link - die Wortmarke kaeme auf den
   Rechtsseiten mit 168px statt 240px heraus. Beide Faelle bekommen deshalb
   dieselbe Regel auf demselben Elternelement. */
.masthead > img,
.masthead > a { width: clamp(22rem, 40vw, 30rem); max-width: 96%; }

/* Auf den Rechtsseiten ist die Marke nicht der Grund fuer den Besuch, der Text
   ist es. 480px Wortmarke ueber einer 30px-Ueberschrift "Impressum" stellt das
   auf den Kopf: das lauteste Element einer Seite, die gelesen und abgeheftet
   wird, war das Logo. Hier also kleiner - 208px statt 311px am Telefon, 288px
   statt 480px am Schirm. Die Wortmarken-Regel gilt weiter, nur mit zwei
   Sollwerten statt einem: gemessen gleich innerhalb einer Seitenart, bewusst
   verschieden zwischen ihnen. */
.masthead--legal > img,
.masthead--legal > a { width: clamp(13rem, 24vw, 18rem); }

/* ---------- Startseite ---------- */

/* Zwei Angaben auf Augenhoehe: wie man uns erreicht, und zu wem wir gehoeren.
   Frueher war die Nummer die Schlagzeile der Seite und der Praxisverweis eine
   Fussnote hinter dem Fuss. Urobalance hat aber keine offenen Sprechzeiten, und
   der Terminweg laeuft nicht ueber diese Seite - die Nummer ist eine Auskunft,
   keine Aufforderung. Beide stehen deshalb in einer Reihe, gleich breit, mit
   demselben Beschriftungsstil darueber.

   flex-basis 12rem: bei 390px passen zwei davon nicht nebeneinander, also
   stapeln sie. Kein Breakpoint noetig, das Umbrechen erledigt der Inhalt. */
.pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* start, nicht center: so stehen die beiden Beschriftungen auf einer Linie.
     Zentriert saessen sie versetzt, weil unter der einen eine Zeile Text und
     unter der anderen ein Bild anderer Hoehe steht - und genau die Linie ist
     das, was die Gleichrangigkeit sichtbar macht. */
  align-items: start;
  gap: 2rem 2.5rem;
  margin-top: min(2.5rem, 6vh);
  padding-top: min(2rem, 5vh);
  /* Der einzige Strich im Hauptteil: er trennt die Marke und ihren Zustand von
     den Angaben darunter. Dieselbe Linie wie die Kante des Blatts. */
  border-top: 1px solid var(--edge);
}

.pair > * { margin: 0; flex: 1 1 12rem; }
/* Der Praxisverweis traegt 0.5rem Innenabstand oben, damit das Ziel gross genug
   ist - dadurch saesse seine Beschriftung 8px tiefer als die daneben. Dasselbe
   negative Margin wie beim Zurueck-Link: das Padding macht die Flaeche, das
   Margin haelt die Linie. Gemessen muessen beide Beschriftungen dieselbe
   Oberkante haben, solange sie nebeneinander stehen. */
.pair .sister { margin-block-start: -0.5rem; }

/* Kein `flex: 1` und keine Flex-Zentrierung mehr: der Hero ist jetzt Inhalt
   eines inhaltsgrossen Blatts, und die senkrechte Mitte macht dessen
   `margin: auto`. */
.hero {
  /* Wie am Kopf: bei 880px Hoehe unveraendert 44/52px, im Querformat 31,2px. */
  padding-block: min(2.75rem, 8vh) min(3.25rem, 8vh);
  text-align: center;
}

/* Klasse statt Element: `.hero h1` haette Spezifitaet (0,1,1) und schluege
   damit jede (0,1,0)-Regel weiter unten - genau der Fehler, an dem `.hero p`
   einmal vier Deklarationen still getoetet hat. Innerhalb von .hero wird nach
   Klasse selektiert, ohne Ausnahme. */
.hero__title {
  margin: 0 0 1rem;
  /* 24px bei 390, 28px ab 1024. Gegen den Vorspann sind das 1,33 bis 1,56 - die
     Stufe, die DESIGN.md verlangt und die mit den frueheren 22/18px = 1,22:1
     nicht da war. Nach oben begrenzt die Wortmarke: sie fuehrt, die
     Ueberschrift benennt nur den Zustand. Die Telefonnummer liegt bewusst auf
     derselben Stufe (24px am Telefon, 32px am Schirm) statt darueber - sie ist
     eine Auskunft, keine Schlagzeile. */
  font-size: clamp(1.5rem, 1.2vw + 1.05rem, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Heisst `.hero__lead` und nicht `p`, weil der Elementselektor `.hero p` mit
   Spezifitaet (0,1,1) einmal jede (0,1,0)-Regel weiter unten schlug und vier
   Deklarationen still toetete. Siehe die Klassen-statt-Elemente-Regel. */
.hero__lead {
  margin: 0 auto;
  max-width: 30rem;
  font-size: 1.125rem;
  color: var(--graphite);
  /* Wie an der H1: der Satz ist zwei Zeilen lang und darf nicht mit einem
     Einzelwort enden. */
  text-wrap: balance;
}

.call {
  /* Der einzige Zweck dieser Regel: .call zum Bezug fuer die cqi-Deckelung der
     Nummer machen (siehe unten). Zulaessig, weil die Breite von aussen kommt -
     `.pair > *` setzt `flex: 1 1 12rem` - und nie vom Inhalt.
     Das frueher hier stehende `width: 100%` ist mit dem Nummernfeld entfallen:
     als Flex-Item bestimmt die flex-basis die Breite, `width` lief ins Leere. */
  container-type: inline-size;
}

.call__label {
  display: block;
  /* Parallel zu .sister__label: die beiden Angaben stehen auf Augenhoehe und
     werden deshalb gleich beschriftet. Die gesperrten Versalien sind mit der
     Nummer zurueckgetreten - sie waren die Auszeichnung einer Schlagzeile.
     Der frueher hierfuer geladene 500er Schnitt entfaellt damit ebenfalls:
     22.008 Bytes, vorgeladen mit hoher Prioritaet, fuer ein einziges Wort. */
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--graphite);
  /* Platz fuer den Fokusring der Nummer darunter. Der liegt mit 2px Staerke und
     3px Offset ausserhalb des Padding-Kastens - ohne diesen Abstand stiess seine
     Oberkante genau an die Unterlaengen dieser Zeile. Die Beschriftung des
     Praxisverweises traegt aus demselben Grund 0.625rem. */
  margin-bottom: 0.5rem;
}

.call__number {
  display: inline-block;
  /* Die Trefferflaeche kommt aus dem Padding, nicht aus der Zeilenhoehe: 24px
     Schrift ergeben 26,4px Zeilenbox, mit 2 x 10px kommt der Link auf 46,4px
     und damit ueber die 44px aus Apple HIG und WCAG 2.5.5. Vorher standen hier
     0.5rem - die reichten, solange die Nummer 36px gross war, und fielen mit
     ihrer Verkleinerung auf 42,4px. Eine Trefferflaeche ist keine Funktion der
     Schriftgroesse, sondern der Fingerkuppe. */
  padding: 0.625rem 1.25rem;
  /* Auch das Innenpolster gehoert in die Rechnung: bei 200 % Textzoom waeren
     1.25rem = 40px je Seite, und die fressen den Platz, den die Ziffern
     brauchen. 6cqi ist bei 390px/Standardzoom 17,6px und greift dort kaum. */
  padding-inline: min(1.25rem, 6cqi);
  /* Zurueckgenommen: 24px am Telefon, 32px am Schirm statt 36/52px. Die
     Wortmarke fuehrt, die Nummer ist eine Auskunft und nicht mehr die
     Schlagzeile - Urobalance hat keine offenen Sprechzeiten, und der Weg zum
     Termin laeuft nicht ueber diese Seite. */
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
  /* Der Boden des clamp() ist rem-basiert und gewinnt damit gegen den
     Viewport: wer die Grundschrift auf 32px stellt, bekommt 72px Ziffern in
     einem 390px-Fenster - gemessen 529px Dokumentbreite, die letzten drei
     Ziffern stehen ausserhalb. Zusammen mit `white-space: nowrap` ist das
     dieselbe Fehlwahl, gegen die nowrap geschrieben wurde, nur durch die
     andere Tuer (WCAG 1.4.4 und 1.4.10).
     17cqi deckelt gegen die Breite von .call statt gegen die Grundschrift und
     greift im Normalfall nie: bei 390px sind es rund 55px gegen 24px aus dem
     clamp(). Erst unter Zoom uebernimmt es - dort haelt es die Nummer
     ausserdem groesser als den Fliesstext daneben (43px gegen 32px bei
     Grundschrift 32px auf 320px, gemessen).
     Die Zeile davor bleibt als Rueckfall stehen - Engines ohne
     Container-Query-Einheiten verwerfen die zweite Deklaration und landen
     beim bisherigen Verhalten, nicht bei einem Bruch. */
  font-size: min(clamp(1.5rem, 1.6vw + 0.9rem, 2rem), 17cqi);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  /* Eine Telefonnummer, die mitten im Umbruch reißt, wird falsch gewählt. */
  white-space: nowrap;
}

/* Der einzige Ort im System, an dem der helle Markenton leuchtet. Die Nummer
   steht seit dem Wegfall des Feldes auf Papierweiss, nicht mehr auf Mist:
   #ff025a erreicht dort 3,88:1. Bei 24-32px und Schnitt 700 gilt sie als
   Grossschrift (WCAG: ab 18,66px fett), dort genuegen nach 1.4.3 die 3:1.
   Ohne diese Regel aendert der Hover gar nichts - die Ruhefarbe ist bereits
   magenta-deep, und die Unterstrichstaerke aus `a:hover` laeuft ins Leere,
   weil .call__number `text-decoration: none` traegt. */
.call__number:hover { color: var(--magenta); }

.address {
  margin: 1.5rem 0 0;
  font-size: 0.9375rem;
  color: var(--graphite);
}

/* ---------- Verweis auf die Praxis ---------- */

/* Der einzige Link, der von dieser Seite wegfuehrt, und seit der Umstellung
   die zweite Spalte des Paars - gleichrangig zur Telefonnummer, nicht mehr
   hinter der Fusszeile. Trotzdem ohne Magenta im Ruhezustand: die
   Ein-Akzent-Regel gilt weiter, und das Logo der Hauptpraxis bringt seine
   eigene Zurueckhaltung mit (#909183 statt Markenmagenta). Genau deshalb
   vertraegt es die Gleichrangigkeit, ohne mit der Wortmarke darueber zu
   konkurrieren. Die Affordanz traegt der Unterstrich unter der Textzeile -
   das Logo allein waere ein Ziel ohne Hinweis, dass es eins ist. */
.sister { text-align: center; }

.sister__link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: var(--graphite);
  text-decoration: none;
}
.sister__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.6;
  text-decoration: underline;
  text-decoration-color: currentColor;
}
.sister__link:hover { color: var(--magenta-deep); }
.sister__link img {
  display: block;
  width: 13rem;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ---------- Bildband ---------- */

.band { margin: 0; position: relative; line-height: 0; }
.band img {
  display: block;
  width: 100%;
  /* Nicht die natuerliche Hoehe: bei 1440px waere das Band 638px hoch und
     wuerde die Seite dominieren. Der Beschnitt haengt unten, weil Stamm und
     Erdhuegel am unteren Bildrand sitzen – oben wird nur Bokeh abgeschnitten. */
  /* Randlos ueber die volle Fensterbreite, bei jeder Breite. Das geht nur,
     weil das Motiv keins ist: ein Blueten- und Grasteppich hat kein Zentrum,
     das ein Beschnitt koepfen koennte. Der Vorgaenger - ein einzelner Bonsai
     in der Bildmitte - erzwang eine Hoehe von mindestens 30vw und damit
     entweder ein dominantes Band oder einen gekoepften Baum. Wer dieses Bild
     je gegen eines mit erkennbarem Einzelmotiv tauscht, holt sich das Problem
     zurueck. */
  /* Der Weg hierher in zwei Schritten. Urspruenglich clamp(380px, 42vw, 620px):
     604,8px bei 1440px, aber ueber der Falz lagen davon nur 40,7px, weil der
     Inhalt darueber 900px hoch war - ein blasser Schmier am Bildrand, den
     niemand als Foto liest. Dann auf 200-300px gekuerzt, was das Problem an der
     falschen Stelle loeste: nicht das Band war zu hoch, der Inhalt war es.
     Seit die Nummer zurueckgetreten ist und das Paar den Hero traegt, ist die
     Seite rund 300px kuerzer - das Band kann also wieder gross sein UND
     gesehen werden. Bei 1440x880 liegen jetzt rund 220px davon ueber der Falz,
     bei 1024x880 sogar das ganze Band. */
  height: clamp(420px, 40vw, 680px);
  object-fit: cover;
  /* Der Beschnitt haengt jetzt oben, nicht unten - und das ist die Umkehrung
     der urspruenglichen Regel, weil sich die Voraussetzung umgekehrt hat.
     Solange das Band niedrig war, war seine ganze Hoehe sichtbar und die
     dichteren Blueten am unteren Bildrand die richtige Wahl. Mit einem Verlauf
     ueber 88 % der Bandhoehe ist aber nur noch das untere Drittel wirklich frei,
     und `bottom` legte ausgerechnet den Stengel- und Bodenbereich dorthin: die
     Blueten standen im verdeckten Teil.

     `top` schiebt das Bild um den ganzen Ueberhang nach unten (264px bei 1440,
     440px bei 1920). In der freien Zone liegen damit die Bildzeilen bei rund
     45-70 % - der Bereich mit den Doldenblueten. Was oben wegfaellt, ist das
     ausgebrannte Gegenlicht, das der Verlauf ohnehin verdeckt haette.

     Unterhalb von ~800px Fensterbreite hat das keine Wirkung: dort ist das Bild
     schmaler als hoch skaliert und wird waagerecht beschnitten, nicht senkrecht.
     Die Motiv-Regel traegt beide Faelle - ein Bluetenteppich hat kein Zentrum,
     das ein Beschnitt koepfen koennte. */
  object-position: center top;
}
/* Weiche Kante nach oben, damit das Foto nicht aufgeklebt wirkt, sondern aus
   dem Blatt heraus entsteht. Der Verlauf laeuft ueber 72 % der Bandhoehe statt
   ueber feste 4rem - bei einem hohen Band ist eine kurze Kante genau der harte
   Schnitt, den sie verbergen soll.

   Die vielen Stops sind kein Zierrat: Ein zweistufiger Verlauf ist in der Alpha
   linear und liest sich als Band mit sichtbarer Mitte. Die Stops bilden eine
   ease-out-Kurve nach, damit oben schnell und unten kaum noch aufgehellt wird -
   das ist der Unterschied zwischen "ausgeblendet" und "ueberdeckt".

   Der transparente Stop bleibt bewusst literal: rgb(...)/0 statt transparent,
   damit aeltere Engines nicht durch Transparent-Schwarz interpolieren. */
.band::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  /* Die Kante war zu hart, und zwar nicht oben, wo der Verlauf voll deckt,
     sondern in der Mitte: dort wurde er zu schnell durchlaessig und das Foto
     setzte auf einer erkennbaren Linie ein. Zwei Aenderungen dagegen.

     Erstens die Laenge: 88 % der Bandhoehe statt 62 %. Bei 680px Band sind das
     598px Uebergang statt 422px - und weil das Band selbst gewachsen ist,
     verdoppelt sich die absolute Strecke gegenueber vorher fast.

     Zweitens die Kurve. Vierzehn Stops statt zehn, und sie halten oben laenger
     nahe der vollen Deckung (99 % bei 8 %, 97 % bei 16 %) und laufen unten mit
     einem langen flachen Schwanz aus (12 % bei 88 %, 5 % bei 94 %). Der steile
     Teil liegt damit in der Mitte, wo das Auge ihn nicht als Kante liest,
     sondern als Tiefe. Ein zweistufiger Verlauf waere in der Alpha linear und
     ergaebe genau die sichtbare Mitte, die hier stoert.

     Der Ton ist der der Wand, nicht der des Blatts: das Band schliesst die Tuer
     ab, nicht den Aushang. Der transparente Stop bleibt literal
     (239 237 234 / 0 statt `transparent`), damit aeltere Engines nicht durch
     Transparent-Schwarz interpolieren und einen Grauschleier erzeugen. */
  height: 88%;
  background: linear-gradient(
    var(--mist) 0%,
    rgb(239 237 234 / 0.99) 8%,
    rgb(239 237 234 / 0.97) 16%,
    rgb(239 237 234 / 0.93) 24%,
    rgb(239 237 234 / 0.87) 32%,
    rgb(239 237 234 / 0.79) 40%,
    rgb(239 237 234 / 0.69) 48%,
    rgb(239 237 234 / 0.58) 56%,
    rgb(239 237 234 / 0.46) 64%,
    rgb(239 237 234 / 0.34) 72%,
    rgb(239 237 234 / 0.22) 80%,
    rgb(239 237 234 / 0.12) 88%,
    rgb(239 237 234 / 0.05) 94%,
    rgb(239 237 234 / 0) 100%);
  pointer-events: none;
}

/* ---------- Fuß ---------- */

.site-foot {
  /* Oben/unten je 0.5rem weniger, weil die Links ihr eigenes Padding tragen. */
  padding-block: 1rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--graphite);
}
/* Vorher Warm Graphite mit Haarstrich-Unterstrich: dieselbe Farbe wie der
   Fliesstext daneben, und der Unterstrich kompositiert auf Weiss zu #e6e6e6 =
   1,25:1. Damit waren die Pflichtlinks weder als Link erkennbar noch von
   gewoehnlichem Text zu unterscheiden. Sie tragen jetzt die Linkfarbe des
   Systems - das sind genau die drei Magenta-Stellen, die die Ein-Akzent-Regel
   ohnehin vorsieht. */
.site-foot a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--magenta-deep);
}
.site-foot .sep { padding: 0 0.5rem; }

/* ---------- Rechtstexte ---------- */

.legal { padding-block: 2.5rem 1rem; }

.legal h1 {
  margin: 0 0 2rem;
  font-size: clamp(1.5rem, 2vw + 1rem, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
}

.legal h2 {
  margin: 2.25rem 0 0.5rem;
  /* 18/16px = 1,125:1 war allein vom Schnitt getragen; auf einer Seite, die
     gelesen und nicht ueberflogen wird, ist das zu wenig Struktur. 20/16 =
     1,25:1 plus Schnitt 700 gegen 400 ist ein Schritt, den man sieht, ohne
     ihn zu suchen. */
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Warm Graphite ist im System der Fliesstext ZWEITER Ordnung. Auf den
   Rechtsseiten gibt es keine erste - der Text ist der ganze Zweck der Seite.
   Er steht deshalb in --ink (15,33:1 statt 7,81:1). Die frueher noetige Klasse
   .plain ist damit ersatzlos weg - sie existierte nur, um einzelne Absaetze
   aus dem Grau zurueckzuholen. */
.legal p { margin: 0 0 1rem; color: var(--ink); }

/* Der <address> traegt nur noch die Postanschrift; was antippbar ist, steht
   darunter in .contact. Damit liest sich die Anschrift wieder als ein Block
   im normalen Vorschub, statt als lose Zeilen im Trefferflaechen-Raster. */
.legal address {
  font-style: normal;
  color: var(--ink);
  /* 0 statt 1rem: im Impressum folgt ein h2 (margin-top 2.25rem), die Margins
     kollabieren, es bleiben dieselben 36px wie vorher. In der
     Datenschutzerklaerung folgt der Kontaktblock, und dort soll kein Spalt
     stehen - die Anschrift und ihre Erreichbarkeit sind ein Block. */
  margin-bottom: 0;
}

/* Kontaktzeilen sind kein Fliesstext, sondern antippbare Ziele in einer Zeile.
   Sie stehen deshalb in einem eigenen Element statt mitten in einer Anschrift:
   vorher entschied `:has(a)` darueber, ob ein Block den weiten Vorschub bekam,
   und in datenschutz.html traf das den <address> mitsamt seinen drei reinen
   Anschriftenzeilen - fuenf lose Angaben statt einer Adresse. Wer eine Regel
   an das Vorhandensein eines Links knuepft, trifft alles im selben Kasten mit.

   Die Aufteilung: Vorschub am Container, Zielhoehe am Link. 3,25 ergibt 52px
   Vorschub, der Link 16px x 1,4 + 2 x 11px Padding = 44,4px Ziel - also die
   44px aus der Trefferflaechen-Regel und 7,6px Luft ZWISCHEN zwei Zielen.
   Stuende die Hoehe nur am Link, waechse der Vorschub mit ihm und zwei Ziele
   stiessen exakt aneinander; ein Griff daneben oeffnet dann das Mailprogramm
   statt zu waehlen. Vorher waren es 30,4px Ziel - dieselbe Nummer wie auf der
   Startseite, dort aber 55,6px. */
.legal .contact { margin: 0 0 1rem; line-height: 3.25; }

.legal .contact a {
  display: inline-block;
  line-height: 1.4;
  padding-block: 0.6875rem;
}

.back {
  display: inline-block;
  /* Negatives oberes Margin haelt die optische Lage, waehrend das Padding die
     Trefferflaeche von 24px auf 40px bringt. */
  margin: -0.5rem 0 1.5rem;
  padding-block: 0.5rem;
  font-size: 0.9375rem;
  text-decoration-color: var(--hairline);
}

/* Die eine Bewegung der Seite - und sie fasst die Nummer nicht an. Vorher lag
   `.fade` auf `.hero` und damit auf dem Elternelement des Nummernfelds: ein
   Elternteil bei opacity 0 verdeckt seine Kinder, egal was diese setzen. Lief
   die Animation aus irgendeinem Grund nicht (fill-mode `both` haelt den
   Startzustand), war der Grund fuer die Existenz der Seite unsichtbar. Geringe
   Wahrscheinlichkeit, totaler Radius. Jetzt fahren nur Ueberschrift und
   Vorspann ein; die Nummer ist von der ersten Bildfolge an da, wo sie
   hingehoert. */
@media (prefers-reduced-motion: no-preference) {
  .fade { animation: fade 0.5s ease-out both; }
  @keyframes fade { from { opacity: 0; transform: translateY(0.5rem); } }
}

/* ---------- Druck ---------- */

/* Das Impressum ist das Dokument, das tatsaechlich ausgedruckt und abgeheftet
   wird - bei der Krankenkasse, beim Anwalt, in der Patientenakte. Auf Papier
   zaehlt der Text; Foto, Fusszeile und Zurueck-Link sind dort Ballast. Die
   Links brauchen ihr Ziel nicht angehaengt: Telefonnummer und E-Mail-Adresse
   stehen bereits als Text da. */
@media print {
  body {
    display: block;
    min-height: 0;
    color: #000;
    background: #fff;
  }

  .band,
  .site-foot,
  .back { display: none; }

  /* Das Blatt IST das Papier. Kante und Grund waeren dort eine Zeichnung von
     etwas, das man bereits in der Hand haelt. */
  .sheet {
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    background: none;
  }

  /* Etwas Luft nach oben: Drucker setzen eigene Seitenraender, aber die
     Marke soll nicht auf der Schnittkante sitzen. */
  .masthead { padding-block: 0.5rem 1.5rem; }
  .masthead img { width: 9rem; }

  .hero,
  .legal { padding-block: 0 1rem; }

  /* Der weite Vorschub kauft Platz fuer Fingerkuppen. Auf Papier kauft er
     nichts und kostet eine halbe Seite. */
  .legal .contact { line-height: 1.6; }
  .legal .contact a { padding-block: 0; }

  .hero__lead,
  .call__label,
  .sister__label,
  .legal .contact,
  .legal p,
  .legal address,
  .address { color: #000; }

  a { color: #000; }

  .pair {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #000;
  }

  h1, h2 { break-after: avoid; }
  p, address { break-inside: avoid; }
}