/*
  @contract
  provides:   das Farb-, Schrift- und Gestaltungssystem der Seite als CSS-Custom-Properties
              und Grundregeln - Rundung, Abstand und Schriftgroessen als Token (REQ-0062)
  depends-on: user/themes/praxis/fonts/*.woff2 (oertlich, keine fremde Domain)
  consumers:  user/themes/praxis/templates/partials/base.html.twig
  invariants: keine Verbindung nach aussen (REQ-0013); keine Farbe ausserhalb der Tokens;
              jede benutzte Kombination haelt 4,5:1 (REQ-0018) - geprueft von
              tests/Unit/FarbsystemTest.php, nicht abgeschrieben;
              Zustandswechsel gehen zu mehr Kontrast, nie zu weniger (ADR-0004);
              Navigationslinks und Schaltflaechen sind mindestens 44x44 px, Fliesstext-Links
              in einem Satz ausgenommen (REQ-0015, WCAG 2.5.5); lange Tokens brechen um,
              statt bei 320 px waagerecht ueberzulaufen (REQ-0015, T-0052);
              Rundung und Abschnittsabstand kommen aus --rundung und --raum-abschnitt,
              kein Baustein setzt eigene Zahlen - geprueft von tests/Browser/gestaltung.spec.js
  updated:    2026-09-06
*/

/* Plus Jakarta Sans ist eine variable Schrift: eine Datei traegt 200 bis 800 (ADR-0010). */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

/* Atkinson Hyperlegible ist statisch: zwei Schnitte, mehr nicht. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/atkinson-hyperlegible-latin-700.woff2') format('woff2');
}

:root {
  --color-green: #008273;
  --color-green-dark: #00443d;
  --color-green-light: #00a89c;
  --color-white: #ffffff;
  --color-surface-tint: #f8fcfb;
  --color-error: #a4262c;

  /* Die zweite Familie in jeder Zeile traegt die Seite, wenn die erste fehlt (REQ-0026). */
  --font-heading: 'Plus Jakarta Sans', 'Segoe UI', Tahoma, Verdana, sans-serif;
  --font-body: 'Atkinson Hyperlegible', 'Segoe UI', Helvetica, Arial, sans-serif;

  --raum: 1rem;
  --breite: 42rem;

  /* Gestaltungs-Token (REQ-0062, T-0063): weiche Formen und Luft zwischen den Abschnitten.
     clamp: auf dem Telefon kleiner, auf dem Rechner voll - ohne Media-Query. */
  --rundung: 8px;
  --raum-abschnitt: 3rem;
  --schrift-h1: clamp(1.75rem, 4vw + 1rem, 2.6rem);
  --schrift-h2: clamp(1.35rem, 2vw + 0.75rem, 1.6rem);
}


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

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-green);
  font-family: var(--font-body);
  /* rem statt px: bei 200 % Zoom skaliert alles mit (REQ-0018). */
  font-size: 1.0625rem;
  line-height: 1.6;
  /* Lange, unbrechbare Tokens (E-Mail, URL im Rechtstext) brechen um, statt bei 320 px
     waagerecht überzulaufen (REQ-0015). */
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-green-dark);
}

h1 {
  font-size: var(--schrift-h1);
}

/* Der Abschnittsabstand haengt an der Ueberschrift, die den Abschnitt eroeffnet. */
h2 {
  font-size: var(--schrift-h2);
  margin-top: var(--raum-abschnitt);
}

/* Flaechen tragen ihren Rhythmus selbst: innen Polster, aussen der Flaechenabstand -
   eine Ueberschrift direkt in der Flaeche bekommt keinen zusaetzlichen Vorlauf. */
.flaeche-gruen h2,
.flaeche-dunkel h2,
.formular h2,
.meldung h2,
.karte-getoent h2 {
  margin-top: 0;
}

/* Kein Grau: Kleingedrucktes ist kleiner, nicht blasser (ADR-0004). */
small,
.datum,
.fussnote {
  font-size: 0.875rem;
  color: var(--color-green);
}

a {
  color: var(--color-green);
  /* Die Unterstreichung ist das Merkmal, die Farbe kommt hinzu: der Abstand zwischen den
     beiden Gruentoenen betraegt 2,34 und traegt einen Unterschied nicht allein (ADR-0004). */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
  color: var(--color-green-dark);
}

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

.sprungmarke {
  position: absolute;
  left: -9999px;
}

.sprungmarke:focus {
  position: static;
  display: inline-block;
  padding: var(--raum);
  background: var(--color-green);
  color: var(--color-white);
}

main {
  max-width: var(--breite);
  margin: 0 auto;
  padding: var(--raum);
}

/* Der Fuss als Abschlussflaeche (REQ-0063): volle Breite dunkelgruen, Inhalt in der
   Spalte, Schrift weiss - auch die Marke, die im Kopf dunkelgruen ist. Links bleiben
   unterstrichen und weiss, auch beruehrt: Gruen-dunkel auf Gruen ergaebe 2,34 (ADR-0004). */
.fuss {
  background: var(--color-green);
  color: var(--color-white);
  margin-top: var(--raum-abschnitt);
  /* Kleiner als der Fliesstext: der Fuss ist nachgeordnet, und die Angabenzeile passt
     so ohne Umbruch in die Spalte (Abnahme 2026-08-26). Weiss auf Gruen haelt 4,73:1
     auch in dieser Groesse - die Schwelle haengt am Kontrast, nicht an der Groesse. */
  font-size: 0.9375rem;
}

.fuss-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: calc(var(--raum) * 1.5) var(--raum);
  display: flex;
  align-items: flex-start;
  gap: var(--raum);
}

/* Der Link um das Logo: er soll das Bild fassen, nicht unterstreichen. */
.fuss-marke {
  display: inline-flex;
  flex-shrink: 0;
  text-decoration: none;
}

/* Das Logo als Blickfang auf der gruenen Flaeche: ein weisser Rand hebt das gruene
   Zeichen ab, das sonst darin unterginge (Abnahme 2026-08-26). */
.fuss-logo {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border: 3px solid var(--color-white);
  border-radius: var(--rundung);
}

.fuss-text {
  min-width: 0;
}

.fuss a,
.fuss a:hover,
.fuss a:focus-visible,
.fuss .marke {
  color: var(--color-white);
}

.fuss p {
  margin: 0 0 0.5rem;
}

/* Eine kompakte Linkzeile statt Absaetzen (Abnahme-Rueckmeldung 2026-08-26). */
.fuss /* Der Copyright-Vermerk als letzte, ruhige Zeile des Fusses (T-0136). */
.fuss-copyright {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  opacity: 0.9;
}

.rechtliches ul {
  margin: 0.5rem 0 0;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

/* Die Angabenzeile: Praxis, Strasse, Ort, Nummer - durch Mediopunkte getrennt. Bricht
   auf schmalen Bildschirmen um, die Punkte wandern dann mit. */
.fuss-angaben {
  margin: 0;
}

/* Das hidden-Attribut gilt - auch gegen eine Autorenregel wie .menue { display: flex },
   die die Browservorgabe sonst uebersteuern wuerde (T-0064). */
[hidden] {
  display: none !important;
}

/* Der Kopf bleibt beim Scrollen stehen und traegt den Telefon-Button (REQ-0059).
   Die Flaeche laeuft ueber die volle Breite, der Inhalt haelt die Inhaltsspalte. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-surface-tint);
}

.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.5rem var(--raum);
}

/* Eine durchgehende linke Kante ueber alle drei Kopfzeilen (Abnahme 2026-08-26): die
   Schaltflaechen rechtsbuendig zwischen zwei linksbuendigen Zeilen liessen das Auge
   springen. Geprueft von tests/Browser/kopfbereich.spec.js. */
.kopf-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--raum);
}

/* Ohne JavaScript bleibt der Schalter hidden und die Liste steht offen (REQ-0026). */
.menue-schalter {
  margin-top: 0.5rem;
}

/* Die beiden Schaltflaechen nebeneinander, auf derselben Kante wie Marke und Menue
   (REQ-0058/0059, T-0069, T-0070). */
.kopf-wege {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--raum);
}

/* Logo und Wortmarke, gemeinsam der Weg zur Startseite (REQ-0059, T-0070). Keine
   Unterstreichung: hier traegt die Marke selbst die Erkennbarkeit, nicht die Linie -
   die Ausnahme gilt nur fuer diesen einen Link, Fliesstext-Links bleiben unterstrichen. */
.marke {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-green-dark);
  text-decoration: none;
}

/* Nur im Kopf: Logo und Text nebeneinander. Im Fuss ist .marke ein Wort in einer Zeile
   und darf kein Flex-Kasten werden (T-0070). */
.kopf .marke {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.marke-logo {
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
}

.marke-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

/* Die Wortmarke kommt aus **einer** Familie (Plus Jakarta Sans, variabel 200-800). Die
   Abstufung leisten Gewicht und Groesse - ein Wechsel der Schriftfamilie mitten in der
   Marke las sich wie zwei zusammengeklebte Marken (Abnahme 2026-08-26). Die Farbe teilt
   in zwei Rollen: Zeile 1 und 2 sind die Praxis (dunkel), Zeile 3 ist ihr Zusatz.
   Geprueft von tests/Browser/kopfbereich.spec.js. */
.marke-fach {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.marke-name {
  font-weight: 600;
  font-size: 1rem;
}

.marke-ort {
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--color-green);
}

/* Nur fuer Vorleser: aus dem Blickfeld, aber im Dokument und in der Vorlesereihenfolge. */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dunkle Flaechen tragen immer weisse Schrift - nie das andere Gruen (ADR-0004). */
.flaeche-gruen,
.flaeche-dunkel {
  color: var(--color-white);
  padding: var(--raum);
  margin-block: calc(var(--raum-abschnitt) / 2);
}

/* Weiche Formen (REQ-0062): jede abgesetzte Flaeche nutzt dasselbe Rundungs-Token. */
.flaeche-gruen,
.flaeche-dunkel,
.formular,
.meldung,
.hinweiskasten,
.schaltflaeche {
  border-radius: var(--rundung);
}

.flaeche-gruen {
  background: var(--color-green);
}

.flaeche-dunkel {
  background: var(--color-green-dark);
}

.flaeche-gruen a,
.flaeche-dunkel a,
.flaeche-gruen h1,
.flaeche-dunkel h1,
.flaeche-gruen h2,
.flaeche-dunkel h2 {
  color: var(--color-white);
}

.schaltflaeche {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-white);
  border: 0;
  padding: 0.6rem 1.2rem;
  /* Touch-Ziel mindestens 44x44 px, auch bei kurzer Beschriftung (REQ-0015, WCAG 2.5.5). */
  min-height: 44px;
  min-width: 44px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.schaltflaeche:hover,
.schaltflaeche:focus-visible {
  background: var(--color-green-dark);
  color: var(--color-white);
}

/* Die zweite Stufe (REQ-0059, T-0070): derselbe Koerper, umrandet statt gefuellt. Der
   Rand traegt hier die Erkennbarkeit - 4,73:1 gegen Weiss, verlangt sind 3:1 (SC 1.4.11).
   Beruehrt wird der Kontrast groesser, nie kleiner (ADR-0004). */
.schaltflaeche-umrandet {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-white);
  color: var(--color-green);
  border: 2px solid var(--color-green);
}

.schaltflaeche-umrandet:hover,
.schaltflaeche-umrandet:focus-visible {
  background: var(--color-surface-tint);
  color: var(--color-green-dark);
  border-color: var(--color-green-dark);
}

.schaltflaeche-umrandet svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Formulare stehen auf hellem Grund: Fehlerrot auf Dunkelgruen ergaebe 1,53 (ADR-0004). */
.formular {
  background: var(--color-surface-tint);
  padding: var(--raum);
}

/* Die Begruessung eroeffnet die Startseite (REQ-0001, REQ-0058, T-0071). Das Kreuz liegt
   als ruhiges Wasserzeichen dahinter - Zierrat ohne Bedeutung, deshalb sehr blass und
   aria-hidden; Text liegt nie darauf, sondern daneben. */
/* Auf dem Telefon knapper: Begruessung, heutige Zeiten und Kontakt-Karte sollen zusammen
   ins erste Blickfeld passen (REQ-0058). clamp statt Media-Query - waechst mit dem Platz. */
.begruessung {
  position: relative;
  overflow: hidden;
  padding: clamp(0.75rem, 3vw, calc(var(--raum) * 2)) var(--raum);
  margin-bottom: clamp(0.75rem, 2vw, calc(var(--raum-abschnitt) / 2));
}

/* Enger als im Fliesstext: die Box ist eine Einheit, keine Folge von Abschnitten - und
   jeder Millimeter hier schiebt die Kontakt-Karte aus dem ersten Blickfeld (REQ-0058). */
.begruessung p {
  margin-block: 0.625rem;
}

.begruessung-zierrat {
  position: absolute;
  top: -1rem;
  right: -1rem;
  width: 10rem;
  height: 10rem;
  /* Dunkler als die Flaeche, nicht heller (ADR-0004). Ein aufhellendes Wasserzeichen
     senkt den Kontrast des weissen Textes darueber - gemessen am 2026-08-26: 4,73:1
     fielen auf 4,13:1. Nach unten kann derselbe Zierrat ihn nur anheben. Geprueft von
     tests/Browser/zierratkontrast.spec.js an gerenderten Pixeln. */
  fill: var(--color-green-dark);
  opacity: 0.15;
  pointer-events: none;
}

.begruessung-text {
  position: relative;
}

.begruessung h1 {
  color: var(--color-white);
  margin-top: 0;
}

/* Ein zweiter Abschnitt **innerhalb** der Box braucht nicht den Abstand, der zwischen
   Seitenabschnitten steht - sonst schiebt die Box alles Folgende aus dem ersten
   Blickfeld (REQ-0058; gemessen am 2026-08-26). */
.begruessung h2 {
  color: var(--color-white);
  margin-top: var(--raum);
}

.begruessung p:last-child {
  margin-bottom: 0;
}

/* Getoente Karte (REQ-0060, REQ-0058): die helle Stufe unter der dunklen Signalflaeche.
   Nicht dunkler als --color-surface-tint - Folgeregel aus REQ-0024. */
.karte-getoent {
  background: var(--color-surface-tint);
  padding: var(--raum);
  border-radius: var(--rundung);
  margin-block: clamp(0.75rem, 2vw, calc(var(--raum-abschnitt) / 2));
}

/* Umrandete Karte (Nutzer, 2026-08-26): weiss mit feiner Linie statt getoent. Kontakt,
   Bereitschaft und Praxis-im-Haus sind bereits getoent - eine vierte getoente Flaeche
   machte die Seite monoton; die Linie fasst den Inhalt, ohne Gewicht hinzuzufuegen. */
.karte-umrandet {
  background: var(--color-white);
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
  padding: clamp(0.75rem, 2.5vw, var(--raum));
  margin-block: clamp(0.75rem, 2vw, calc(var(--raum-abschnitt) / 2));
}

.karte-umrandet h2 {
  margin-top: 0;
}

/* Symbole vor den Wegen in der Kontakt-Karte: sie wachsen mit der Schrift (em, nicht px)
   und stehen **ausserhalb** des Links - innerhalb liefe die Unterstreichung darunter
   durch. Zierrat, kein Bedeutungstraeger: daneben steht immer der Text (WCAG SC 2.4.4). */
.weg-mit-zeichen svg,
.zur-karte svg,
.kontakt-neu svg {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  margin-right: 0.3em;
  flex-shrink: 0;
}

/* Zeichen und Linktext wandern gemeinsam in die naechste Zeile. Ein inline-block wird
   nicht aufgetrennt, darf innen aber weiter umbrechen - anders als `nowrap`, das den
   ganzen Linktext in einer Zeile hielte und schmale Spalten sprengte. */
.weg-mit-zeichen {
  display: inline-block;
}

/* Ein geaenderter Tag hebt sich ab - aber nie allein durch die Flaeche: daneben steht das
   Wort, denn Farbe allein traegt keine Information (WCAG SC 1.4.1). */
.zeitentabelle tr[data-geaendert="ja"] th {
  /* Eine Kante am Zeilenanfang statt einer Flaeche: ruhiger in einer Tabelle, die sonst
     nur aus Linien besteht. Der Rand allein traegt die Aussage aber nicht - daneben
     steht das Wort (WCAG SC 1.4.1, zwei Merkmale statt eines). */
  box-shadow: inset 3px 0 0 var(--color-green);
  padding-left: 0.75rem;
}

.abweichung {
  margin-left: 0.4rem;
  font-size: 0.85em;
  white-space: nowrap;
}

/* Wofuer eine Sprechstunde gedacht ist: erklaerender Vorspann unter ihrer Ueberschrift. */
.wofuer {
  margin-block: 0.35rem 1rem;
  max-width: var(--breite);
}

/* Der Infektschutz-Hinweis steht bei der Infektsprechstunde als Kasten (T-0134): gruene
   Kante und Tonflaeche aus dem Farbsystem (ADR-0004), Text in Gruen auf Hell - kein Rot,
   es ist eine Bitte, keine Warnung. */
.hygiene {
  display: block;
  margin: 0.75rem 0 1rem;
  padding: 0.9rem var(--raum);
  background: var(--color-surface-tint);
  border-left: 0.35rem solid var(--color-green);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  font-weight: 600;
}

/* Die heutigen Zeiten als zwei Spalten: Bezeichnung links, Zeit rechts. Die zweite Spalte
   richtet sich am laengsten Eintrag aus, damit die Ziffern untereinander stehen - „Offene
   Sprechstunde" und „Infektsprechstunde" sind verschieden lang (Nutzer, 2026-08-27).
   tabular-nums haelt auch die Ziffern selbst in Spur: proportional gesetzt waere die 1 in
   12:00 schmaler als die 8 in 08:30, und die Doppelpunkte verschoeben sich. */
dl.heutige-zeiten {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 0.2rem 1.25rem;
  margin-block: 0.75rem 0;
}

dl.heutige-zeiten dt::after {
  content: ':';
}

dl.heutige-zeiten dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Der Hinweis auf Schliesszeiten: er soll auffallen, denn er aendert die Erwartung an die
   Antwortzeit. Gruene Flaeche wie die Vertretungskarte - der Ausnahmefall, nicht der
   Dauerzustand. Die dunkle Flaeche bleibt dem Notruf (REQ-0060). */
.schliesshinweis {
  background: var(--color-green);
  color: var(--color-white);
  border-radius: var(--rundung);
  padding: 0.75rem var(--raum);
  margin-block: 0 var(--raum);
  font-weight: 700;
}

/* Hinweise am Feld: kleiner als die Beschriftung, aber nicht blasser - kein Grau
   (ADR-0004). Sie stehen zwischen Beschriftung und Eingabe, wo sie gelesen werden,
   bevor jemand tippt. */
.feldhinweis {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.875rem;
}

.zeichenzaehler {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.pflichtfeld-hinweis {
  margin: var(--raum) 0;
  font-size: 0.875rem;
}

/* Ein Datumsfeld ueber die volle Breite schiebt seinen Kalenderknopf an den rechten Rand,
   wo ihn niemand sucht (Nutzer, 2026-08-27). Schmal steht er neben der Eingabe. */
.feld-schmal {
  max-width: 12rem;
}

/* Der Weg zur Karte auf der Kontaktseite. */
.wegkarte {
  margin-block: 0 var(--raum-abschnitt);
}

/* Banner: der Ausnahmefall ganz oben. Beide sind abschaltbar und stehen normalerweise
   nicht da - deshalb duerfen sie auffallen, ohne die Seite dauerhaft lauter zu machen. */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem var(--raum);
  border-radius: var(--rundung);
  padding: 0.75rem var(--raum);
  margin-block: 0 var(--raum);
}

.banner-text {
  flex: 1 1 14rem;
  min-width: 0;
}

.banner-titel {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
}

.banner p {
  margin: 0;
}

/* Die Stellenanzeige ist der lautere der beiden: gruene Flaeche, weisse Schrift, und ein
   Glanz, der einmal darueberzieht. Kein Blinken - WCAG 2.3.1 zieht die Grenze bei
   dreimal je Sekunde, und in einer Arztpraxis waere alles in dieser Naehe fehl am Platz. */
.banner-stelle {
  position: relative;
  overflow: hidden;
  background: var(--color-green);
  color: var(--color-white);
}

.banner-stelle .schaltflaeche {
  background: var(--color-white);
  color: var(--color-green-dark);
  flex-shrink: 0;
}

.banner-stelle::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: banner-glanz 2.2s ease-out 0.4s 1 both;
  pointer-events: none;
}

@keyframes banner-glanz {
  to { left: 120%; }
}

/* Der Gruss ist der leisere: getoente Flaeche, das Zeichen wippt einmal. */
.banner-gruss {
  background: var(--color-surface-tint);
  border: 1px solid var(--color-green);
  color: var(--color-green-dark);
}

.gruss-zeichen {
  display: inline-flex;
  flex-shrink: 0;
}

.gruss-zeichen svg {
  width: 2rem;
  height: 2rem;
  /* Zwei Sekunden, einmal, dann steht es. Unter fuenf Sekunden verlangt WCAG 2.2.2 keine
     Pausiertaste - eine Schleife braeuchte eine, und ein GIF koennte man nicht anhalten. */
  animation: gruss-wippen 2s ease-in-out 1 both;
}

@keyframes gruss-wippen {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-9deg) scale(1.12); }
  45% { transform: rotate(7deg) scale(1.08); }
  70% { transform: rotate(-4deg) scale(1.03); }
}

/* Wer weniger Bewegung eingestellt hat, hat oft einen medizinischen Grund - Migraene,
   vestibulaere Stoerung. Beide Effekte stehen dann still (WCAG 2.3.3, Best Practice). */
@media (prefers-reduced-motion: reduce) {
  .gruss-zeichen svg,
  .banner-stelle::after {
    animation: none;
  }

  .banner-stelle::after {
    display: none;
  }
}

/* Der Hinweis auf geaenderte Zeiten: eine getoente Zeile in der weissen Karte. Er soll
   auffallen, ohne eine Farbe einzufuehren, die das System nicht hat - Gruen ist die Farbe
   der Praxis, Rot bliebe dem Fehler vorbehalten, und ein Gelb gaebe es hier nur als
   Fremdkoerper (ADR-0004). Flaeche und Fettung tragen den Unterschied. */
.heute-weg-spalte {
  display: flex;
  flex-direction: column;
  /* Mobil steht die Spalte am Kartenende, linksbuendig im Lesefluss (T-0163). */
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: var(--raum);
}

/* Am Rechner rueckt die Spalte zurueck in die Kopfzeile: Ueberschrift links, Weg und
   Hinweis rechts (Nutzer, 2026-08-27) - auf dem Telefon bleibt sie im Aufbau am Ende
   der Karte, wo sie steht (Nutzer, 2026-09-06, T-0163). */
@media (min-width: 40rem) {
  .heute {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    align-items: baseline;
  }

  .heute > * {
    grid-column: 1;
  }

  #heute-titel {
    grid-row: 1;
  }

  .heute .heute-weg-spalte {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
    margin-top: 0;
    /* Der Hinweis darf die Spalte nicht so breit ziehen, dass die Ueberschrift umbricht. */
    max-width: 22rem;
  }

  .heute .zeiten-geaendert {
    text-align: right;
  }
}

.zeiten-geaendert {
  display: flex;
  align-items: center;
  gap: 0.35em;
  background: var(--color-surface-tint);
  border-radius: var(--rundung);
  padding: 0.3rem 0.6rem;
  margin: 0;
  /* Kleiner als der Fliesstext: der Hinweis begleitet die Zeiten, er ersetzt sie nicht
     (Nutzer, 2026-08-27). Dunkelgruen und fett tragen den Unterschied. */
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-green-dark);
}

.zeiten-geaendert svg {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  align-self: center;
}

/* Ein Rahmen um eine getoente Flaeche (Nutzer, 2026-08-26): die Kontakt-Karte soll sich
   von den uebrigen getoenten Karten abheben, ohne eine dritte Farbe einzufuehren. */
.karte-gerahmt {
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
}

/* Auf dunklem Grund traegt dieselbe Linie nur 2,34:1 und verschwindet. Das hellere Gruen
   haelt 3,74:1 gegen #00443d - die Schwelle fuer ein Bedienelement (WCAG 1.4.11). */
.flaeche-dunkel.karte-gerahmt {
  border-color: var(--color-green-light);
}

/* Zwei Spalten am Rechner, untereinander auf dem Telefon: links wo wir sind, rechts wer
   willkommen ist. Ohne Media-Query - die Spalten brechen, wenn sie zu eng werden. */
.kontakt-spalten {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--raum-abschnitt);
}

.kontakt-ort,
.kontakt-neu {
  /* 16rem: darunter draengt sich die Anschrift, dann ist untereinander besser. */
  flex: 1 1 16rem;
  min-width: 0;
}

/* Ueberschrift links, Weg zur Uebersicht rechts - auf schmalen Bildschirmen untereinander.
   Die Heute-Karte macht das seit T-0163 nicht mehr so, sondern per Raster (siehe oben). */
.begruessung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
}

.heute-weg,
.begruessung-weg {
  white-space: nowrap;
  font-size: 0.9375rem;
}

/* In der gruenen Box schreibt Weiss - auch der Weg zu den Leistungen (ADR-0004). */
.begruessung-weg {
  color: var(--color-white);
}

/* Die Verweis-Karten der Startseite (REQ-0058): Symbol, Text, Link - als Raster. */
.verweis-liste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--raum);
  padding: 0;
  margin: var(--raum) 0 0;
}

.verweis {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--color-surface-tint);
  border-radius: var(--rundung);
  padding: var(--raum);
  min-height: 44px;
}

.verweis svg {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.heutige-zeiten {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.fehler {
  color: var(--color-error);
  font-weight: 700;
}

/* Zierrat ohne Text: Weiss darauf ergibt 2,97 und verfehlt jede Schwelle (ADR-0004). */
.zierlinie {
  border: 0;
  border-top: 4px solid var(--color-green-light);
  margin: calc(var(--raum) * 2) 0;
}

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

/* Zeiten als Tabellenziffern: untereinander stehende Uhrzeiten fluchten (REQ-0018). */
.zeitentabelle {
  border-collapse: collapse;
  width: 100%;
  /* Feste Aufteilung: ohne sie richtet sich die Spaltenbreite nach dem laengsten Inhalt,
     und ein langer Tagesname schiebt die Tabelle bei 320 px aus dem Bild (REQ-0015,
     gemessen am 2026-08-25 - 316 px in einem 288 px breiten Feld). */
  table-layout: fixed;
}

.zeitentabelle td,
.zeitentabelle th {
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  text-align: left;
  padding: 0.35rem 0.6rem 0.35rem 0;
  vertical-align: baseline;
  border-bottom: 1px solid var(--color-surface-tint);
}

.zeitentabelle caption {
  position: absolute;
  left: -9999px;
}

.zeitraum {
  font-weight: 700;
}

/* Der Vorbehalt steht im selben Blickfeld wie die Zeiten, nicht in der Fusszeile
   (REQ-0029, Abnahme 4). */
.vorbehalt {
  border-left: 4px solid var(--color-green);
  padding-left: var(--raum);
}

.notfallweg {
  margin-bottom: calc(var(--raum) * 1.5);
}

.telefonnummer {
  margin-top: var(--raum);
}

.menue {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum);
  margin: 0.5rem 0 0;
  padding: 0;
  font-family: var(--font-heading);
}

.menue [aria-current='page'] {
  font-weight: 700;
}

/* Navigationslinks sind eigenständige Ziele - mindestens 44x44 px, damit sie auf dem Telefon
   sicher zu treffen sind (REQ-0015). Fliesstext-Links in einem Satz sind ausgenommen
   (WCAG 2.5.5), sonst zerrisse die Zeile. */
.menue a,
.rechtliches a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* Rechtsseiten (T-0050): der Entwurfshinweis faellt auf, der Rechtstext liest sich ruhig,
   die Fusszeile traegt die Pflichtlinks. */
.hinweiskasten {
  border: 2px solid var(--color-green);
  background: var(--color-surface-tint);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.rechtstext {
  max-width: 44rem;
}

.rechtliches ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  padding: 0;
  margin: 2rem 0 1rem;
}

/* Anfahrt (T-0053): das Kartenbild fuellt die Spalte, die Namensnennung steht darunter -
   sichtbar und vorlesbar, nicht ins Bild gebrannt (REQ-0017, ADR-0015). */
.karte {
  margin: var(--raum) 0;
}

.karte img {
  display: block;
  width: 100%;
  height: auto;
}

.karte-nachweis {
  font-size: 0.875rem;
  padding-top: 0.35rem;
}

/* Der Honigtopf (T-0055): aus dem Blickfeld und aus der Tabulatorreihenfolge, aber im
   Dokument - ein Automat fuellt ihn aus, ein Mensch sieht ihn nie. Nicht display:none:
   manche Automaten ueberspringen genau das. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Rueckmeldungen (T-0056, T-0155): ein Kasten mit Ueberschrift und Zeichen, nicht zu
   uebersehen - eine Zeile mit Balken ueber dem unveraenderten Formular wurde uebersehen
   (Nutzer, 2026-08-30). Der Ausfall nennt den Telefonweg (REQ-0006). */
.meldung {
  border: 2px solid var(--color-green);
  border-left-width: 8px;
  background: var(--color-surface-tint);
  padding: var(--raum);
  margin: 0 0 calc(var(--raum) * 1.5);
}

.meldung-titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

.meldung-titel svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.meldung-text {
  margin: 0;
}

.meldung-error {
  border-color: var(--color-error);
  color: var(--color-error);
}

.meldung-weg {
  margin: 0 0 var(--raum);
}

/* Der Datenschutzhinweis am Formular (T-0056, REQ-0053): sichtbar, aber ruhig - er steht
   neben den Feldern, nicht ueber ihnen. */
.hinweis-datenschutz {
  border-left: 4px solid var(--color-green);
  padding-left: var(--raum);
  margin-bottom: calc(var(--raum) * 1.5);
}

/* Formulargestaltung (REQ-0061, T-0066): Beschriftung ueber dem Feld, Felder in voller
   Spaltenbreite, alles auf hellem Grund (ADR-0004). */
.praxis-formular .formularfeld {
  margin-bottom: var(--raum);
}

.praxis-formular .formularfeld > label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.praxis-formular input:not([type='checkbox']):not([type='hidden']),
.praxis-formular select,
.praxis-formular textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  color: inherit;
  background: var(--color-white);
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
}

/* Ankreuzfeld und Beschriftung in einer Zeile; das Feld selbst gross genug zum Treffen. */
.praxis-formular .formularfeld-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.praxis-formular .formularfeld-checkbox > label {
  display: inline;
  font-weight: 400;
  margin: 0;
}

.praxis-formular input[type='checkbox'] {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-green);
}

/* Das Datei-Feld: die native Schaltflaeche im Stil der uebrigen (REQ-0061). */
.praxis-formular input[type='file']::file-selector-button {
  background: var(--color-green);
  color: var(--color-white);
  border: 0;
  border-radius: var(--rundung);
  padding: 0.5rem 1rem;
  margin-right: 0.75rem;
  font: inherit;
  cursor: pointer;
}

.praxis-formular input[type='file']::file-selector-button:hover {
  background: var(--color-green-dark);
}

/* Weiterweg (T-0089): der Abschluss der Leistungsseite. **Untereinander, nicht
   nebeneinander.** Nebeneinander standen die Schaltflaechen auf verschiedenen Hoehen, weil
   die Texte verschieden lang sind; buendig ausrichten liesse sich das, aber dann wiegen
   beide Wege gleich schwer - und der Weg fuer neue Patienten soll hier zuerst ins Auge
   fallen (Nutzer, 2026-08-28). Untereinander loest die Ausrichtung und die Gewichtung
   in einem. */
.weiterweg {
  margin-top: var(--raum-abschnitt);
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-green);
  display: grid;
  gap: 1.5rem;
}

.weiterweg p {
  margin: 0;
}

/* Der Link ist hier kein Nebensatz, sondern der Zweck des Absatzes - er steht auf eigener
   Zeile und traegt eine Flaeche. */
.weiterweg a {
  margin-top: 0.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
  text-decoration: none;
  /* 44px Zielflaeche fuer den Finger (REQ-0018, WCAG SC 2.5.8). */
  min-height: 44px;
  /* `flex`, nicht `inline-flex`: als Inline-Element haengt sich der Link an das Ende des
     letzten Satzes, und ob er dort umbricht, entscheidet die Spaltenbreite - links stand er
     auf eigener Zeile, rechts hinter „Patienten." (gemessen am 2026-08-28). `fit-content`
     haelt ihn trotzdem so schmal wie sein Text. */
  display: flex;
  width: fit-content;
  align-items: center;
}

/* Der erste Weg fuehrt zu den neuen Patienten und traegt deshalb die gefuellte Flaeche.
   Die Reihenfolge allein reicht nicht: zwei gleich aussehende Umrisse untereinander lassen
   den Blick nicht wissen, wo er anfangen soll. Der zweite bleibt ein Umriss - zwei gefuellte
   Flaechen heben sich gegenseitig auf (REQ-0058, dieselbe Ueberlegung wie im Kopf). */
.weiterweg p:first-child a {
  background: var(--color-green);
  /* `--color-white`, nicht `--color-surface`: das Token gibt es nicht, und ein unbekanntes
     Token faellt still auf die geerbte Farbe zurueck - hier waere gruene Schrift auf
     gruener Flaeche herausgekommen (2026-08-28). Weiss auf #008273 misst 4,73:1. */
  color: var(--color-white);
}

.weiterweg a:hover,
.weiterweg a:focus-visible {
  background: var(--color-surface-tint);
  text-decoration: underline;
}

/* Die gefuellte Flaeche wechselt beim Ueberfahren **nicht** die Farbe: heller wuerde den
   Kontrast unter 4,5:1 druecken (Weiss auf #00a89c misst 2,96:1), und das dunkle Gruen ist
   dem Notfallblock vorbehalten (REQ-0060). Die Unterstreichung genuegt als Rueckmeldung. */
.weiterweg p:first-child a:hover,
.weiterweg p:first-child a:focus-visible {
  background: var(--color-green);
  color: var(--color-white);
  text-decoration: underline;
}

/* Anhangfeld (T-0090): Ablageflaeche, Liste der gewaehlten Dateien, Zaehler. Die Flaeche
   umschliesst das `input type=file` - sie tritt nicht an seine Stelle, weil WCAG SC 2.5.7
   zu jedem Ziehen eine Bedienung ohne Ziehen verlangt. */
.dateiauswahl {
  border: 1px dashed var(--color-green);
  border-radius: var(--rundung);
  padding: 1rem;
}

.dateiauswahl.bereit {
  background: var(--color-surface-tint);
  border-style: solid;
}

.ablegehinweis {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
}

.dateiliste {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.dateiliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: var(--color-surface-tint);
  border-radius: var(--rundung);
  /* Ein langer Dateiname darf die Zeile dehnen, nicht die Seite (Umbruch statt Ueberlauf). */
  overflow-wrap: anywhere;
}

.datei-entfernen {
  flex: none;
  min-height: 44px;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
  background: transparent;
  color: var(--color-green);
  font: inherit;
  cursor: pointer;
}

.datei-entfernen:hover,
.datei-entfernen:focus-visible {
  background: var(--color-green);
  color: var(--color-white);
}

.dateizaehler {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

/* Downloads (T-0091): Dateien mit Titel, Art, Groesse und Beschreibung. Die Angaben stehen
   **neben** dem Linktext und nicht darin - wer die Liste ueberfliegt, liest die Titel; wer
   sich fuer einen entscheidet, findet Art und Groesse daneben. */
.downloadliste {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.downloadliste li {
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-green);
  border-radius: var(--rundung);
}

.downloadliste a {
  font-weight: 600;
}

.dateiart {
  margin-left: 0.5rem;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.downloadtext {
  margin: 0.4rem 0 0;
}

/* Stoerungshinweis (T-0092): Er steht dort, wo das Formular stuende. Auffaellig genug, dass
   niemand weitersucht - aber nicht rot: Es ist keine Fehleingabe des Besuchers, sondern ein
   Zustand der Praxis. */
.stoerung {
  margin-top: var(--raum-abschnitt);
  padding: 1.25rem 1.5rem;
  border: 2px solid var(--color-green);
  border-radius: var(--rundung);
  background: var(--color-surface-tint);
}

.stoerung h2 {
  margin-top: 0;
}

.stoerung p {
  margin-bottom: 0;
}