/* Registrierstreifen — EKG-Thermopapier als Trägermaterial der Seite. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('fonts/azeret-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Azeret Mono';
  src: url('fonts/azeret-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Die Werte hier sind die Kardiologie und zugleich der Rueckfall fuer
   Seiten ohne Welt-Klasse (Impressum, Datenschutz). Jede andere Seite
   laedt site/fach/<name>.css und ersetzt genau diesen Block — sonst
   nichts. Fuenf Welten: tor, kardiologie, hausarzt, radiologie,
   orthopaedie. Keine Komponente kennt eine Farbe. */
:root {
  /* Traegermaterial */
  --papier: #f9d5c8;
  --papier-hell: #fdefe9;
  --papier-tief: #f0c3b3;

  /* Raster 1 mm / 5 mm. Text auf blankem Raster braucht dunklere Tinte. */
  --raster-fein: rgba(194, 82, 58, 0.16);
  --raster-grob: rgba(194, 82, 58, 0.34);
  --mm: 8px;
  --mm5: 40px;
  --raster:
    repeating-linear-gradient(to right, var(--raster-grob) 0 1px, transparent 1px var(--mm5)),
    repeating-linear-gradient(to bottom, var(--raster-grob) 0 1px, transparent 1px var(--mm5)),
    repeating-linear-gradient(to right, var(--raster-fein) 0 1px, transparent 1px var(--mm)),
    repeating-linear-gradient(to bottom, var(--raster-fein) 0 1px, transparent 1px var(--mm));

  /* Schreiber */
  --tinte: #1f1a17;
  --tinte-stark: #332c27;   /* Vorspann, Begriffe — fast volle Tinte */
  --tinte-schwach: #4c3d35;
  --signal: #c2342a;        /* Flächen */
  --signal-text: #99201a;   /* Text auf Papier, AA */

  /* Text auf Volltonflaechen. Muss eigene Token sein: --papier-hell
     ist in der dunklen Welt selbst dunkel und faellt auf Rot durch. */
  --auf-signal: #fdefe9;    /* auf --signal */
  --auf-tinte: #fdefe9;     /* auf --tinte */

  /* Umgekehrter Abschnitt: Grund ist --tinte, Text ist --papier.
     In der dunklen Welt kippt das von selbst zu hell auf dunkel. */
  --invers-text: #d6c3b9;
  --invers-linie: #4b3e34;
  --invers-fuehrung: #6a584a;
  --invers-signal: #ef9c88;

  /* Ausserhalb der Praxis. Der Schieferton ist in jeder Welt derselbe:
     draussen gibt es keine Praxis mehr, also auch kein Fach. Nur die
     Helligkeitsstufe folgt dem Grund, damit die Spur ueber 3:1 bleibt
     (Radiologie gemessen: 3,7:1 gegen das Feld rechts vom Gate). */
  --extern: #45525a;
  --extern-feld: #dfe4e6;
  --extern-blatt: #eef1f2;
  --extern-ersetzt: #ccd6da;
  --extern-ersetzt-text: #22302f;

  --schrift: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Schriftrollen. Untergrenze 13px — die Leser sind nicht jung. */
  --t-body: clamp(1.0625rem, 1rem + 0.42vw, 1.1875rem);
  --t-lead: clamp(1.2rem, 1.06rem + 0.62vw, 1.45rem);
  --t-meta: clamp(0.9375rem, 0.9rem + 0.18vw, 1.03rem);
  --t-label: clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);
  --t-schalter: clamp(0.9375rem, 0.88rem + 0.28vw, 1.0625rem);
  --t-akte: clamp(0.875rem, 0.79rem + 0.4vw, 1rem);
  /* Wahlueberschrift der Torseite: eine eigene Rolle zwischen h2 und h3.
     Vier gestapelte h2 in voller Groesse waeren vier Schlagzeilen. */
  --t-wahl: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
  --sp-label: 0.12em;

  --rand: clamp(1rem, 4vw, 4rem);

  /* Pfade tragen pathLength="100", daher normierte Strichlänge */
  --laenge: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  caret-color: var(--signal);
  scrollbar-color: var(--tinte-schwach) var(--papier-tief);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sprungziele nicht unter den klebenden Kopf schieben */
[id] { scroll-margin-top: 5rem; }
@media (max-width: 680px) { [id] { scroll-margin-top: 7.5rem; } }

::selection { background: var(--signal); color: var(--auf-signal); }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  /* Das Raster ist das Layout, nicht Dekoration. Jede Welt setzt es neu. */
  background-image: var(--raster);
}

/* ---------------------------------------------------------------- Grundtypo */

h1, h2, h3 { font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.7vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem); letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; max-width: 66ch; }
/* Mehr Luft ueber einer Ueberschrift als darunter */
h2 + p { margin-top: 1.2rem; }
a { color: inherit; }

/* Eine einzige Beschriftungsrolle für die ganze Maschinenlegende */
.streifenkopf, .marke-feld b, .blatt h3, .durchlauf span,
.referenz h3, .ablesung dt, .regeln .code, .referenz cite,
.kontaktdaten dt, .rechtsangaben dt {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--sp-label);
  text-transform: uppercase;
}

/* Der Satzspiegel waechst am grossen Schirm mit, sonst steht der Text
   in einer 1440er Insel mitten im vollflaechigen Raster. Die Zeilenlaenge
   bleibt trotzdem begrenzt: Absaetze messen hoechstens 66ch. */
.werk { width: min(100%, clamp(1440px, 82vw, 2000px)); margin-inline: auto; padding-inline: var(--rand); }

/* Millimeterpapier-Perforation am Streifenrand */
.perfo {
  height: var(--mm5);
  background-image:
    /* Der Streifen laeuft zwischen den Abschnitten weiter, statt an
       jeder Perforation aufzuhoeren. Ohne diese Linie ist der
       Registrierstreifen ein einmal zitiertes Motiv, kein Traeger. */
    linear-gradient(to bottom,
      transparent calc(50% - 1px),
      color-mix(in srgb, var(--tinte) 38%, transparent) calc(50% - 1px) calc(50% + 1px),
      transparent calc(50% + 1px)),
    radial-gradient(circle at center, var(--papier-tief) 0 4px, transparent 4px);
  background-size: 100% 100%, var(--mm5) var(--mm5);
  background-position: center, center;
  border-block: 1px solid var(--raster-grob);
}

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

.kopf {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.75rem var(--rand);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--raster-grob);
}
.marke {
  font-family: var(--mono); font-weight: 700;
  font-size: var(--t-label); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.marke::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 0.6rem; background: var(--signal); border-radius: 50%;
  vertical-align: baseline;
}
.kopf-nav { margin-left: auto; display: flex; gap: 1.5rem; align-items: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.kopf-nav::-webkit-scrollbar { display: none; }
.kopf-nav a {
  font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; color: var(--tinte-schwach);
  padding: 0.4rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.kopf-nav a:hover, .kopf-nav a:focus-visible { color: var(--tinte); border-bottom-color: var(--signal); }
.nav-aktion {
  font-family: var(--mono); font-size: var(--t-label); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  color: var(--auf-signal); background: var(--signal);
  padding: 0.55rem 1rem; white-space: nowrap; flex: none;
}
.nav-aktion:hover, .nav-aktion:focus-visible { background: var(--tinte); color: var(--auf-tinte); }
@media (max-width: 860px) { .kopf-nav { gap: 1.15rem; } }
/* Auf dem Telefon bekommt die Legende eine eigene Zeile,
   statt hinter dem Schalter abgeschnitten zu werden. */
@media (max-width: 680px) {
  .kopf { flex-wrap: wrap; gap: 0.6rem 0.75rem; padding-bottom: 0; }
  .nav-aktion { margin-left: auto; }
  .kopf-nav {
    order: 3; flex-basis: 100%; margin-left: 0;
    gap: 1.6rem; overflow-x: visible;
    border-top: 1px solid var(--raster-grob);
  }
  .kopf-nav a { padding: 0.55rem 0; }
}

/* --------------------------------------------------------------- Streifen */

.streifen { padding-block: clamp(2rem, 4.5vw, 3.5rem) 0; }

/* Kopffeld: Schlagzeile links, Vorspann und Schalter rechts */
.kopffeld { display: grid; gap: clamp(1.6rem, 3vw, 3.5rem); align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1000px) { .kopffeld { grid-template-columns: 1.15fr 0.85fr; } }

.streifen h1 { max-width: 15ch; }
.streifen h1 em { font-style: normal; color: var(--signal-text); }
.vorspann {
  font-size: var(--t-lead);
  line-height: 1.45;
  max-width: 32ch; margin: 0; color: var(--tinte-stark);
}

/* Primäraktion im ersten Viewport */
.kopf-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; margin-top: 2rem; }
.kopf-aktion .hinweis { font-size: var(--t-meta); color: var(--tinte-stark); max-width: 30ch; line-height: 1.5; }

/* Gedruckter Maschinenkopf, wie ihn der Schreiber mit ausgibt */
.streifenkopf {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline;
  padding: 0.7rem var(--rand);
  border-top: 2px solid var(--tinte);
  background: var(--papier-hell);
  color: var(--signal-text);
}
.streifenkopf .vorschub { margin-left: auto; color: var(--tinte-schwach); letter-spacing: 0.08em; }
@media (max-width: 620px) { .streifenkopf .vorschub { margin-left: 0; } }

/* Der Schreiber: volle Breite, das Blatt läuft durch */
.schreiber {
  position: relative;
  border-bottom: 2px solid var(--tinte);
  background: linear-gradient(to right, transparent 0 49.9%, var(--extern-feld) 50% 100%);
}
.schreiber svg { display: block; width: 100%; height: clamp(160px, 22vw, 260px); }

.kurve {
  fill: none; stroke: var(--tinte); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.kurve--extern { stroke: var(--extern); }

/* ------------------------------------------- Durchlaufende Befundbogen

   Nicht jede Fachrichtung zeichnet eine Kurve auf. Der Kardiologe
   schon; der Radiologe bekommt einen Befundbogen mit Schichtbild, der
   Orthopaede einen mit Roentgenaufnahme, der Hausarzt vier verschiedene
   Blaetter auf einmal. Was durch das Gate faehrt, ist in jedem Fall das
   Dokument, das die Praxis erreicht — nicht das Aufnahmegeraet. */

.bogen { fill: var(--papier-hell); stroke: var(--tinte); stroke-width: 2; }
.bogen--extern { fill: var(--extern-blatt); stroke: var(--extern); }

/* Bildfeld auf dem Bogen: eine Flaeche, kein Foto. */
.bildfeld { fill: var(--tinte); opacity: 0.09; }
.bildfeld--extern { fill: var(--extern); opacity: 0.13; }

.anatomie { fill: none; stroke: var(--tinte); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.anatomie--extern { stroke: var(--extern); }
/* Der klinische Befund bleibt beidseits stehen — er ist der Inhalt. */
.fund { fill: var(--tinte); }
.fund--extern { fill: var(--extern); }
.fund-linie { fill: none; stroke: var(--tinte); stroke-width: 2; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.fund-linie--extern { stroke: var(--extern); }

/* Textzeilen auf dem Bogen. Rot links sind die Personendaten,
   Schiefer rechts ist, was das Modell statt dessen liest. */
/* Links ist Rot das Staerkste auf dem Bogen, rechts muss es der Ersatz
   sein: beide Male springt das ins Auge, was die Person betrifft. */
.zeile { fill: var(--tinte); opacity: 0.38; }
.zeile--pii { fill: var(--signal); opacity: 1; }
.zeile--extern { fill: var(--extern); opacity: 0.38; }
.zeile--ersetzt { fill: var(--extern); opacity: 1; }

/* Laeuft schon an, bevor die Seite steht: der Farbwechsel am Gate
   ist das Argument und darf nicht erst nach Sekunden erscheinen. */
@media (prefers-reduced-motion: no-preference) {
  .kurve { stroke-dasharray: var(--laenge); stroke-dashoffset: 72; animation: schreiben 1.1s cubic-bezier(.4,0,.2,1) forwards; }
  .kurve--extern { animation-delay: 0.45s; }
}
@keyframes schreiben { to { stroke-dashoffset: 0; } }

/* Das Gate sitzt auf dem Streifen */
.gate {
  position: absolute; left: 50%; top: 0; bottom: 0;
  transform: translateX(-50%);
  width: clamp(148px, 16vw, 196px);
  background: var(--signal);
  display: grid; place-items: center;
  text-align: center; padding: 0.5rem;
}
.gate span {
  font-family: var(--mono); font-weight: 700; color: var(--auf-signal);
  font-size: var(--t-label); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.5;
}
/* ANONYMISIERUNG ist 14 Zeichen und stiess auf dem Telefon an den Rand. */
@media (max-width: 520px) { .gate span { letter-spacing: 0; } }

/* Beschriftung an Leader-Lines, mit echten Werten */
.marken { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--raster-grob); }
.marken .marke-feld:first-child { padding-left: var(--rand); }
.marken .marke-feld:last-child { padding-right: var(--rand); }
@media (max-width: 700px) { .marken { grid-template-columns: 1fr; }
  .marken .marke-feld:first-child, .marken .marke-feld:last-child { padding-inline: var(--rand); } }
.marke-feld { padding: 1.3rem clamp(1rem, 3vw, 2.5rem) 1.6rem; background: var(--papier-hell); }
.marke-feld:last-child { padding-left: clamp(1rem, 3vw, 2.5rem); background: var(--extern-feld); }
.marke-feld b { display: block; margin-bottom: 0.6rem; }
.marke-feld:first-child b { color: var(--signal-text); }
.marke-feld:last-child b { color: var(--extern); }
.marke-feld p { margin: 0; max-width: 38ch; color: var(--tinte); }

/* --------------------------------------------- Beweis: dieselbe Zeile, zweimal */

.beweis { padding-block: clamp(4rem, 9vw, 8rem); }
.beweis-gitter { display: grid; gap: 0; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 900px) { .beweis-gitter { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }

.blatt {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 2px solid var(--tinte);
  background: var(--papier-hell);
}
.blatt--extern { border-color: var(--extern); background: var(--extern-blatt); }
.blatt h3 { margin-bottom: 1.1rem; }
.blatt--praxis h3 { color: var(--signal-text); }
.blatt--extern h3 { color: var(--extern); }

.akte { font-family: var(--mono); font-size: var(--t-akte); line-height: 1.95; margin: 0; white-space: pre-wrap; }
.akte .pii { background: var(--signal); color: var(--auf-signal); padding: 0.1em 0.3em; font-weight: 700; }
.akte .ersetzt { background: var(--extern-ersetzt); color: var(--extern-ersetzt-text); padding: 0.1em 0.3em; font-weight: 700; }
.akte .klinik { border-bottom: 2px solid var(--tinte); }

.durchlauf {
  display: grid; place-items: center; padding: 1rem;
  background: var(--signal); color: var(--auf-signal);
}
.durchlauf span { text-align: center; line-height: 1.6; }
@media (min-width: 900px) { .durchlauf { writing-mode: vertical-rl; padding: 1rem 1.05rem; } .durchlauf span { writing-mode: vertical-rl; } }

.fussnote { font-size: var(--t-meta); line-height: 1.6; color: var(--tinte-schwach);
  margin-top: 1.5rem; max-width: 72ch;
  background: var(--papier-hell); padding: 1.1rem 1.3rem; }

/* ----------------------------------------------------------- Leistungsband */

.band { padding-block: clamp(3.5rem, 8vw, 7rem); }
.band-kopf { display: grid; gap: clamp(1.2rem, 3vw, 3.5rem); align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .band-kopf { grid-template-columns: 1.15fr 0.85fr; } }
.band-kopf h2 { max-width: 16ch; }
.band-kopf p { font-size: var(--t-lead); line-height: 1.45; max-width: 32ch; margin: 0; }

/* Vier Beschriftungen an Leader-Lines auf einer durchlaufenden Spur */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding-top: 3rem; }
.ablauf .spur { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tinte); }
.punkt { position: relative; padding-right: clamp(1rem, 2.5vw, 2.25rem); }
.punkt::before { content: ""; position: absolute; top: -3rem; left: 0; width: 1px; height: 3rem; background: var(--tinte); opacity: 0.45; }
.punkt::after { content: ""; position: absolute; top: calc(-3rem - 3px); left: -3px; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; }
.punkt h3 { margin-bottom: 0.7rem; }
.punkt p { margin: 0; color: var(--tinte); max-width: 32ch; }
/* Umbricht das Band, traegt jede Zeile ihre eigene Spur */
@media (max-width: 900px) {
  .ablauf { grid-template-columns: 1fr 1fr; row-gap: 0; padding-top: 0; }
  .ablauf .spur { display: none; }
  .punkt { padding-top: 1.4rem; margin-top: 2.5rem; border-top: 2px solid var(--tinte); }
  .punkt::before { display: none; }
  .punkt::after { top: -4px; left: 0; }
}
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- Verweigert */

.verweigert { background: var(--tinte); color: var(--papier); padding-block: clamp(3.5rem, 8vw, 7rem); border-block: 2px solid var(--tinte); }
.verweigert h2 { color: var(--auf-tinte); max-width: 20ch; }
/* Heller Text auf dunklem Grund: eine Spur mehr Weite und Höhe */
.verweigert p { color: var(--invers-text); letter-spacing: 0.005em; line-height: 1.65; }
.regeln { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--invers-linie); max-width: 80ch; }
.regeln li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--invers-linie); }
@media (max-width: 760px) { .regeln li { grid-template-columns: 1fr; gap: 0.45rem; } }
.regeln .code { color: var(--invers-signal); letter-spacing: 0.06em; }
.regeln .text { color: var(--invers-text); letter-spacing: 0.005em; }

/* ------------------------------------------------------------- Kennzahlen */

/* Gedruckte Ablesezeile, wie sie ein Geraet mit ausgibt */
.ablesung { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 80ch; border-top: 1px solid var(--invers-linie); }
.ablesung > div { padding: 1.05rem 0; border-bottom: 1px solid var(--invers-linie); }
.ablesung .zeile { display: flex; align-items: baseline; gap: 0.75rem; }
.ablesung dt { flex: none; color: var(--invers-signal); }
.ablesung .fuehrung { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 1px dotted var(--invers-fuehrung); transform: translateY(-0.25em); }
.ablesung dd { flex: none; margin: 0; font-family: var(--mono); font-weight: 700; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: var(--auf-tinte); }
.ablesung p { margin: 0.4rem 0 0; font-size: var(--t-meta); color: var(--invers-text); }

/* --------------------------------------------------------------- Ehrlich */

.ehrlich { padding-block: clamp(3rem, 6.5vw, 5.5rem); }
/* Streifensegment, keine Karte: obere Tintenlinie statt Rahmen.
   Der volle Grund haelt den Text vom blanken Raster fern. */
.zusagen {
  list-style: none; margin: 2.5rem 0 0;
  border-top: 2px solid var(--tinte);
  padding: 1.6rem clamp(0.9rem, 1.6vw, 1.4rem);
  background: var(--papier-hell);
  display: grid; gap: 1.1rem clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 880px) { .zusagen { grid-template-columns: 1fr 1fr; } }
.zusagen li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; line-height: 1.5; max-width: 46ch; }
.zusagen li::before {
  content: ""; width: 0.85rem; height: 0.45rem; margin-top: 0.3rem;
  border-left: 2px solid var(--signal-text); border-bottom: 2px solid var(--signal-text);
  transform: rotate(-45deg) translate(1px, -2px);
}

/* ----------------------------------------------------------------- Abschluss */

.abschluss { padding-block: clamp(4rem, 9vw, 8rem); }
.abschluss-innen { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .abschluss-innen { grid-template-columns: 1.1fr 0.9fr; } }
/* Ohne Referenz-Aside bleibt es einspaltig, statt eine Luecke zu lassen. */
@media (min-width: 900px) { .abschluss-innen--einspaltig { grid-template-columns: minmax(0, 46rem); } }
.abschluss-innen h2 + p { font-size: var(--t-lead); line-height: 1.45; max-width: 34ch; margin-top: 1.4rem; }
.abschluss .nachsatz { max-width: 40ch; color: var(--tinte); }

.schalter {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: var(--t-schalter); letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; color: var(--auf-signal); background: var(--signal);
  padding: 1.15rem 2.2rem; border: 2px solid var(--signal);
  transition: transform .12s ease, background .12s ease;
}
.schalter:hover, .schalter:focus-visible { background: var(--tinte); border-color: var(--tinte); color: var(--auf-tinte); transform: translateY(-2px); }
.schalter--leer { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.schalter--leer:hover, .schalter--leer:focus-visible { background: var(--tinte); color: var(--auf-tinte); }
.aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* Kontakt im Klartext: funktioniert auch ohne Mailprogramm */
.kontaktdaten { margin: 2.25rem 0 0; display: grid; gap: 0.7rem; }
.kontaktdaten > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; }
.kontaktdaten dt { color: var(--tinte-stark); min-width: 8ch; }
.kontaktdaten dd { margin: 0; font-family: var(--mono); font-weight: 700; font-size: var(--t-meta); }
.kontaktdaten a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kontaktdaten a:hover, .kontaktdaten a:focus-visible { color: var(--signal-text); }

.referenz { border-top: 2px solid var(--tinte); padding: 1.5rem clamp(0.9rem, 1.6vw, 1.4rem) 1.6rem; background: var(--papier-hell); }
.referenz h3 { color: var(--tinte-schwach); margin-bottom: 1.2rem; }
.referenz blockquote { margin: 0 0 1.25rem; font-size: var(--t-body); line-height: 1.5; }
.referenz cite { font-style: normal; letter-spacing: 0.06em; color: var(--tinte-schwach); }

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

.fuss { border-top: 1px solid var(--raster-grob); padding-block: 2.5rem 3.5rem;
  font-size: var(--t-meta); color: var(--tinte-schwach); background: var(--papier-hell); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: baseline; }
.fuss a { color: var(--tinte-schwach); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fuss a:hover, .fuss a:focus-visible { color: var(--signal-text); }
.fuss .platzhalter { margin-left: auto; font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.02em; }

/* --------------------------------------------------------------- Zugang */

:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.sprung {
  position: fixed; left: -9999px; top: 0;
  background: var(--tinte); color: var(--auf-tinte);
  padding: 0.9rem 1.3rem; z-index: 100; font-family: var(--mono); font-size: var(--t-label);
}
.sprung:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Telefon: der Kopf ruecht zusammen, damit das Gate
   im ersten Viewport steht — es ist das Argument. */
@media (max-width: 680px) {
  .streifen { padding-block: 1rem 0; }
  .kopffeld { gap: 1.25rem; padding-bottom: 1.25rem; }
  .kopf-aktion { margin-top: 1.25rem; gap: 0.85rem; }
  .streifenkopf { padding-block: 0.55rem; }
}

/* ------------------------------------------------- Torseite: die Auswahl */

/* Die Startseite ist unbeschriebenes Papier. Kein Fachraster, keine
   Kurve — das Traegermaterial ist noch nicht gewaehlt. Das Gate steht
   schon da: es ist das eine Bauteil, das in jeder Welt dasselbe ist. */

.tor { padding-block: clamp(2.5rem, 6vw, 5rem) 0; }
.tor h1 { max-width: 17ch; }
.tor h1 em { font-style: normal; color: var(--signal-text); }
.tor-vorspann {
  font-size: var(--t-lead); line-height: 1.45;
  max-width: 44ch; margin: 1.6rem 0 0; color: var(--tinte-stark);
}

/* Leerer Streifen: das Blatt laeuft, aber es ist noch nichts drauf. */
.tor-streifen {
  position: relative; margin-top: clamp(2.5rem, 5vw, 4rem);
  height: clamp(84px, 11vw, 132px);
  border-block: 2px solid var(--tinte);
  background: var(--papier-hell);
}
.tor-streifen .gate { width: clamp(150px, 16vw, 190px); }

/* Enger als ein normaler Abschnitt: zwischen Streifen und erster Wahl
   soll keine Leerstelle stehen, die wie ein fehlendes Bauteil aussieht. */
.tor-wahl { padding-block: clamp(1.8rem, 3.5vw, 3rem) clamp(2.5rem, 5vw, 4rem); }

.fachwahl { margin: 0; padding: 0; list-style: none; }

.wahl {
  display: grid; align-items: center;
  grid-template-columns: 1fr;
  gap: 1.1rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.1rem) 0;
  border-top: 2px solid var(--tinte);
  background: var(--papier-hell);
  text-decoration: none; color: inherit;
  transition: background .12s ease;
}
.fachwahl li:last-child .wahl { border-bottom: 2px solid var(--tinte); }
@media (min-width: 820px) { .wahl { grid-template-columns: 1fr clamp(220px, 26vw, 340px); } }

.wahl-text { padding-inline: clamp(0.9rem, 1.6vw, 1.4rem); }
/* Das Fach IST die Wahl, also traegt es die Ueberschrift. Es stand hier
   einmal als Etikett darueber — das ist ein Kicker, und den gibt es in
   diesem System nicht. */
.wahl h2 { font-size: var(--t-wahl); max-width: 22ch; }
.wahl p { margin: 0.7rem 0 0; max-width: 46ch; color: var(--tinte); }

.wahl:hover, .wahl:focus-visible { background: var(--papier-tief); }
.wahl:hover h2, .wahl:focus-visible h2 { color: var(--signal-text); }

/* Materialprobe: der Kopf der Zielseite in klein. Jede Welt bringt ihre
   eigene Geometrie mit, nicht nur ihre Farbe — ein Streifen hat keine
   Seitenkanten, eine Karteikarte schon, ein Film gar keinen Rahmen.
   Waeren alle vier gleich geschnitten, waere das eine Farblegende. */
.probe {
  position: relative; display: block;
  margin-inline: clamp(0.9rem, 1.6vw, 1.4rem);
  background-color: var(--papier);
  background-image: var(--raster);
}
@media (min-width: 820px) { .probe { margin-left: 0; } }

/* Die Hoehen muessen weit auseinanderliegen. Der erste Entwurf lag bei
   75/105/98/100 — drei davon binnen sieben Pixeln, also eine Hoehe mit
   drei Rahmen. Ein Streifen ist flach, eine Karteikarte hoch. */

/* Registrierstreifen: laeuft durch, hat oben und unten eine Kante. */
.probe.welt-kardiologie {
  height: clamp(44px, 4.6vw, 58px);
  border-block: 2px solid var(--tinte);
}
/* Karteikarte: ein Blatt, ringsum beschnitten, mit Reiterkante oben. */
.probe.welt-hausarzt {
  height: clamp(84px, 10vw, 118px);
  border: 1px solid var(--tinte);
  border-top-width: 5px;
}
/* Film am Schaukasten: kein Rahmen, die Kante ist das Ende des Lichts. */
.probe.welt-radiologie {
  height: clamp(58px, 6.2vw, 78px);
  border: 0;
}
/* Zeichenbogen: duenne Schnittkante ringsum. */
.probe.welt-orthopaedie {
  height: clamp(70px, 8vw, 98px);
  border: 1px solid var(--tinte);
}
.probe svg { display: block; width: 100%; height: 100%; }
.probe .probe-ein { fill: none; stroke: var(--tinte); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.probe .probe-aus { fill: none; stroke: var(--extern); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
/* Geraetebeschriftung der jeweiligen Welt: Zeitmarken, Tagesspalten,
   Filmecken, Gradteilung. Das ist die Hardware des Traegers. */
/* 1px bei 45 % verschwand auf dem gerasterten Grund vollstaendig. */
.probe .probe-riss { fill: none; stroke: var(--tinte); stroke-width: 1.5; opacity: .75; vector-effect: non-scaling-stroke; }
/* Die Probe zeigt dasselbe Motiv wie der Kopf der Zielseite, nicht
   viermal dieselbe Kurve: vier Blaetter, ein Bogen mit Schichtbild, ein
   Stapel mit Winkel. Nur die Kardiologie zeichnet wirklich eine Kurve.
   Dieselben Bogenklassen wie oben, nur mit duennerer Kante — bei 1,4 px
   bleibt ein Stapel aus vier Blaettern ein Stapel und keine Flaeche. */
.probe .bogen { stroke-width: 1.4; vector-effect: non-scaling-stroke; }
/* Nur die Kurve traegt preserveAspectRatio="none": eine Aufzeichnung
   laeuft wirklich so lang wie das Papier. Ein Bogen tut das nicht, also
   behalten die drei anderen ihr Seitenverhaeltnis — sonst wird aus dem
   Winkel auf dem Telefon ein flacher Pfeil. */
.probe .fund-linie { stroke-width: 1.4; stroke-dasharray: 4 3; }
.probe::before {
  content: ""; position: absolute; inset-block: 0; left: 50%;
  width: 22px; transform: translateX(-50%); background: var(--signal);
}
.probe::after {
  content: ""; position: absolute; inset-block: 0; right: 0; width: 50%;
  background: var(--extern-feld); mix-blend-mode: multiply; opacity: .55;
}
.wahl:hover .probe, .wahl:focus-visible .probe { border-color: var(--signal); }

/* Der fuenfte Weg, leiser: wer sich in keiner der vier wiederfindet. */
.tor-sonst {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-inline: clamp(0.9rem, 1.6vw, 1.4rem);
  font-size: var(--t-meta); color: var(--tinte-schwach); max-width: 60ch;
}
.tor-sonst a { color: var(--tinte); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tor-sonst a:hover, .tor-sonst a:focus-visible { color: var(--signal-text); }

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

.rechtstext { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.rechtstext h1 { max-width: 20ch; margin-bottom: 1.2rem; }
.rechtstext h2 { font-size: var(--t-lead); margin-top: 2.5rem; }
.rechtsangaben {
  margin: 2rem 0 0; max-width: 62ch;
  border-top: 2px solid var(--tinte);
  background: var(--papier-hell);
  padding: 1.6rem clamp(0.9rem, 1.6vw, 1.4rem);
  display: grid; gap: 1.1rem;
}
.rechtsangaben > div { display: grid; gap: 0.3rem; }
.rechtsangaben dt { color: var(--tinte-stark); }
.rechtsangaben dd { margin: 0; }
/* Offene Pflichtangaben muessen ins Auge springen */
.offen {
  background: var(--signal); color: var(--auf-signal);
  font-family: var(--mono); font-weight: 700; font-size: var(--t-label);
  padding: 0.1em 0.45em; letter-spacing: 0.04em;
}