/* 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-600.woff2') format('woff2');
  font-weight: 600; 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;
}

:root {
  /* Thermopapier */
  --papier: #f9d5c8;
  --papier-hell: #fdefe9;
  --papier-tief: #f0c3b3;

  /* Raster 1 mm / 5 mm */
  --raster-fein: rgba(194, 82, 58, 0.20);
  --raster-grob: rgba(194, 82, 58, 0.42);
  --mm: 8px;
  --mm5: 40px;

  /* Schreiber */
  --tinte: #1f1a17;
  --tinte-schwach: #635249;
  --signal: #c2342a;        /* Flächen */
  --signal-text: #ad2a21;   /* Text auf Papier, AA */
  --signal-hell: #f08a72;   /* Text auf dunklem Grund */

  /* Außerhalb der Praxis: kühleres Papier */
  --extern: #4e5c64;
  --extern-feld: #dfe4e6;
  --extern-raster: rgba(78, 92, 100, 0.20);
  --extern-raster-grob: rgba(78, 92, 100, 0.40);

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

  --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; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--tinte);
  background: var(--papier);
  /* Das Raster ist das Layout, nicht Dekoration. */
  background-image:
    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));
}

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

h1, h2, h3 { font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(2.3rem, 1.3rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.1rem); }
h3 { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; max-width: 64ch; }
a { color: inherit; }

.legende {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-text);
  display: block;
  margin-bottom: 1.2rem;
}
.legende--extern { color: var(--extern); }
.legende--tinte { color: var(--tinte-schwach); }

.werk { width: min(100%, 1440px); margin-inline: auto; padding-inline: var(--rand); }

/* Millimeterpapier-Perforation am Streifenrand */
.perfo {
  height: var(--mm5);
  background-image: radial-gradient(circle at center, var(--papier-tief) 0 4px, transparent 4px);
  background-size: var(--mm5) var(--mm5);
  background-position: 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: 0.8rem; letter-spacing: 0.2em; 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: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none; color: var(--tinte-schwach);
  padding: 0.4rem 0; border-bottom: 2px solid transparent;
}
.kopf-nav a { 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: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--papier-hell); background: var(--signal);
  padding: 0.5rem 0.9rem; white-space: nowrap; flex: none;
}
.nav-aktion:hover, .nav-aktion:focus-visible { background: var(--tinte); }
@media (max-width: 720px) {
  .kopf { gap: 0.75rem; }
  /* Aktion bleibt erreichbar; die Sprungziele faden darunter aus */
  .kopf .nav-aktion { padding: 0.45rem 0.7rem; font-size: 0.7rem; }
  .kopf-nav { gap: 1.15rem; margin-left: 0; flex: 1 1 auto; min-width: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent); }
}

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

.streifen { padding-block: clamp(2rem, 4.5vw, 3.5rem) 0; }
.streifen h1 { max-width: 18ch; }
.streifen h1 em { font-style: normal; color: var(--signal-text); }
.vorspann {
  font-size: clamp(1.02rem, 0.96rem + 0.42vw, 1.22rem);
  max-width: 56ch; margin-top: 1.2rem; color: #3a322d;
}

/* Primäraktion im ersten Viewport */
.kopf-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.kopf-aktion .hinweis { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.01em; color: var(--tinte-schwach); max-width: 30ch; line-height: 1.6; }

/* Gedruckter Maschinenkopf, wie ihn der Schreiber mit ausgibt */
.streifenkopf {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: baseline;
  padding: 0.55rem var(--rand);
  border-top: 2px solid var(--tinte);
  font-family: var(--mono); font-weight: 700;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--signal-text);
}
.streifenkopf .vorschub { margin-left: auto; color: var(--tinte-schwach); letter-spacing: 0.1em; }
@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(150px, 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); }

/* Zeichnet sich beim Laden ein */
@media (prefers-reduced-motion: no-preference) {
  .kurve { stroke-dasharray: var(--laenge); stroke-dashoffset: var(--laenge); animation: schreiben 2.6s cubic-bezier(.5,0,.2,1) forwards; }
  .kurve--extern { animation-delay: 2.6s; }
}
@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(128px, 15vw, 172px);
  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(--papier-hell);
  font-size: clamp(0.625rem, 1.4vw, 0.6875rem); letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.5;
}

/* 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.1rem clamp(1rem, 3vw, 2.5rem) 1.4rem; }
.marke-feld:last-child { padding-left: clamp(1rem, 3vw, 2.5rem); background: var(--extern-feld); }
.marke-feld b {
  display: block; font-family: var(--mono); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.marke-feld:first-child b { color: var(--signal-text); }
.marke-feld:last-child b { color: var(--extern); }
.marke-feld p { font-size: 1rem; margin: 0; max-width: 40ch; color: #453b35; }

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

.beweis { padding-block: clamp(3.5rem, 8vw, 7rem); }
.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: #eef1f2; }
.blatt h3 { margin-bottom: 1rem; font-size: 1rem; font-family: var(--mono); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.blatt--praxis h3 { color: var(--signal-text); }
.blatt--extern h3 { color: var(--extern); }

.akte { font-family: var(--mono); font-size: clamp(0.72rem, 1.4vw, 0.84rem); line-height: 2; margin: 0; white-space: pre-wrap; word-break: break-word; }
.akte .pii { background: var(--signal); color: var(--papier-hell); padding: 0.1em 0.35em; font-weight: 700; }
.akte .ersetzt { background: #cfd8dc; color: #26343c; padding: 0.1em 0.35em; font-weight: 700; }
.akte .klinik { border-bottom: 2px solid var(--tinte); }

.durchlauf {
  display: grid; place-items: center; padding: 1rem;
  background: var(--signal); color: var(--papier-hell);
}
.durchlauf span {
  font-family: var(--mono); font-weight: 700; font-size: 0.6875rem;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center; line-height: 1.6;
}
@media (min-width: 900px) { .durchlauf { writing-mode: vertical-rl; padding: 1rem 0.9rem; } .durchlauf span { writing-mode: vertical-rl; } }

.fussnote { font-size: 0.875rem; color: var(--tinte-schwach); margin-top: 1.25rem; max-width: 70ch; }

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

.band { border-top: 2px solid var(--tinte); padding-block: clamp(3.5rem, 8vw, 7rem); }
.band-kopf { max-width: 58ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }

/* 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.6rem; }
.punkt p { font-size: 1rem; margin: 0; color: #453b35; max-width: 34ch; }
@media (max-width: 900px) { .ablauf { grid-template-columns: 1fr 1fr; row-gap: 3rem; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; row-gap: 2.5rem; } }

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

.verweigert { background: var(--tinte); color: var(--papier); padding-block: clamp(3.5rem, 8vw, 7rem); border-block: 2px solid var(--tinte); }
.verweigert .legende { color: #e8836f; }
.verweigert h2 { color: var(--papier-hell); max-width: 20ch; }
.verweigert p { color: #cbb8ae; }
.regeln { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 0; border-top: 1px solid #46392f; max-width: 78ch; }
.regeln li { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid #46392f; }
@media (max-width: 700px) { .regeln li { grid-template-columns: 1fr; gap: 0.4rem; } }
.regeln .code { font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: #e8836f; letter-spacing: 0.08em; }
.regeln .text { font-size: 1rem; color: #d8c8bf; }

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

/* Gedruckte Ablesezeile, wie sie ein Geraet mit ausgibt */
.ablesung { margin: clamp(2rem, 4vw, 3rem) 0 0; max-width: 78ch; border-top: 1px solid #46392f; }
.ablesung > div { padding: 0.95rem 0; border-bottom: 1px solid #46392f; }
.ablesung .zeile { display: flex; align-items: baseline; gap: 0.75rem; }
.ablesung dt { flex: none; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #e8836f; }
.ablesung .fuehrung { flex: 1 1 auto; min-width: 1.5rem; border-bottom: 1px dotted #5d4c40; transform: translateY(-0.25em); }
.ablesung dd { flex: none; margin: 0; font-family: var(--mono); font-weight: 700; font-size: 1.15rem; color: var(--papier-hell); }
.ablesung p { margin: 0.35rem 0 0; font-size: 0.875rem; color: #cbb8ae; }

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

.ehrlich { padding-block: clamp(3.5rem, 8vw, 7rem); }
.ehrlich-gitter { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 880px) { .ehrlich-gitter { grid-template-columns: 1fr 1fr; } }
.spalte { border: 2px solid var(--tinte); padding: clamp(1.25rem, 3vw, 2rem); background: var(--papier-hell); }
.spalte--nein { border-style: dashed; background: transparent; }
.spalte h3 { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.25rem; }
.spalte--ja h3 { color: var(--signal-text); }
.spalte--nein h3 { color: var(--tinte-schwach); }
.spalte ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.9rem; }
.spalte li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; font-size: 1rem; line-height: 1.55; }

.spalte li::before { content: ""; width: 0.85rem; height: 0.85rem; margin-top: 0.3rem; }
.spalte--ja li::before {
  border-left: 2px solid var(--signal-text); border-bottom: 2px solid var(--signal-text);
  transform: rotate(-45deg) translate(1px, -2px); height: 0.45rem;
}
.spalte--nein li::before { border-top: 2px solid var(--tinte-schwach); height: 0; margin-top: 0.72rem; }
.spalte--nein li { color: #5d514a; }

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

.abschluss { border-top: 2px solid var(--tinte); padding-block: clamp(3.5rem, 8vw, 7rem); }
.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; } }

.schalter {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; color: var(--papier-hell); 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); 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(--papier-hell); }
.aktionen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

.referenz { border: 2px solid var(--tinte); padding: clamp(1.25rem, 3vw, 2rem); background: var(--papier-hell); }
.referenz blockquote { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.5; }
.referenz cite { font-style: normal; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.01em; color: var(--tinte-schwach); }

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

.fuss { border-top: 1px solid var(--raster-grob); padding-block: 2.5rem 3.5rem; font-size: 0.875rem; color: var(--tinte-schwach); }
.fuss-innen { display: flex; flex-wrap: wrap; gap: 1.5rem 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: 0.75rem; 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(--papier-hell);
  padding: 0.8rem 1.2rem; z-index: 100; font-family: var(--mono); font-size: 0.8rem;
}
.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; }
}