/*
 * Instrumententafel statt Anwendungsoberfläche.
 *
 * Dunkel ist der Normalzustand — die App wird nachts im Fahrzeug benutzt.
 * Signalgelb steht ausschliesslich für „ausgewählt", Grün für Volltreffer,
 * Rot ausschliesslich für Warnungen und Warnbänder. Keine dekorativen Farben.
 */

@font-face {
  font-family: "Plex Condensed";
  src: url("../schriften/IBMPlexSansCondensed-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("../schriften/IBMPlexSansCondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Plex Condensed";
  src: url("../schriften/IBMPlexSansCondensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../schriften/IBMPlexMono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../schriften/IBMPlexMono-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --grund: #0b0d0f;
  --tafel: #14181c;
  --tafel-hoch: #1c2228;
  --linie: #2b343c;
  --schrift: #eef2f5;
  --schrift-matt: #a6b4bf;
  --schrift-schwach: #8695a1;
  --signal: #ffb000;
  --signal-schrift: #0b0d0f;
  --voll: #3ddc97;
  --warnung: #ff6a5e;
  /* Die Karte und die Fläche, die der Verweis über sie spannt, teilen ihn. */
  --treffer-rundung: 9px;
  --fokusring: 3px solid var(--schrift);
  --schmal: "Plex Condensed", ui-sans-serif, system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
  --fett: 600;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #e7e9eb;
    --tafel: #ffffff;
    --tafel-hoch: #f2f4f6;
    --linie: #cdd4da;
    --schrift: #10151a;
    --schrift-matt: #3c4750;
    --schrift-schwach: #545f68;
    --signal: #8a4d00;
    --signal-schrift: #ffffff;
    --voll: #0c6b46;
    --warnung: #a81f11;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.45 var(--schmal);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:where(button, a, summary, [tabindex]):focus-visible {
  outline: var(--fokusring);
  outline-offset: 2px;
}

/* --- Kopfbereich: scrollt nicht mit --- */

.kopf {
  flex: none;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--linie);
  background: var(--tafel);
}

.marke {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.marke h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.datenstand {
  font: 400 11px/1 var(--mono);
  color: var(--schrift-schwach);
  white-space: nowrap;
}

.patient {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  border: 0;
}

.patient button {
  flex: 1;
  min-height: 44px;
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  border-radius: 7px;
  color: var(--schrift-matt);
  font: var(--fett) 13px/1 var(--schmal);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
}

.patient button[aria-pressed="true"] {
  background: var(--schrift);
  border-color: var(--schrift);
  color: var(--grund);
}

.ortung {
  margin-top: 9px;
  font: 400 11.5px/1.3 var(--mono);
  color: var(--schrift-schwach);
}

.ortung.warnt {
  color: var(--schrift);
  font-weight: var(--fett);
}

.erneut {
  min-height: 44px;
  width: 100%;
  margin-top: 8px;
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  border-radius: 7px;
  color: var(--schrift);
  font: var(--fett) 13px/1 var(--schmal);
  letter-spacing: 0.06em;
  cursor: pointer;
}

.erneut[hidden] {
  display: none;
}

/*
 * --- Bänder: Einschränkungen der Auskunft, keine Fehler ---
 *
 * Sie stehen zwischen Kopfbereich und Rollbereich und scrollen nicht mit. Die
 * Liste darunter bleibt vollständig bedienbar — deshalb nehmen sie nicht den
 * Platz des Fehlerkastens ein und tragen dessen Auszeichnung nicht.
 */

.baender {
  flex: none;
}

.band {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  background: var(--tafel-hoch);
  font-size: 13px;
  line-height: 1.35;
  color: var(--schrift);
}

/*
 * Das Warnband trägt dieselbe dreifache Unterscheidung wie die Warnung am
 * Treffer: Dreieck, kräftige Kante, stärkere Schrift. Ein Rotton allein hätte
 * hier zu wenig Fläche — als Grund über der Tafel steht er nur 1,25:1 gegen
 * den Kopfbereich und verginge im Sonnenlicht im Fahrzeug.
 */
.band.warnt {
  border-left-color: var(--warnung);
  background: color-mix(in srgb, var(--warnung) 16%, var(--tafel));
  font-weight: var(--fett);
}
.band.warnt::before {
  content: "";
  flex: none;
  border: 7px solid transparent;
  border-bottom-color: var(--warnung);
  /* Die Tinte sitzt in der unteren Hälfte des Kastens; das hebt sie in die Zeile. */
  margin-top: -7px;
}

/*
 * Die Schaltfläche des Hinweisbands. Sie steht rechts und mittig in der Zeile,
 * während der Satz auf der Grundlinie sitzt — 44 Pixel hoch, wie jede andere
 * Trefferfläche in dieser Anwendung.
 */
.band-laden {
  flex: none;
  align-self: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 12px;
  background: var(--tafel);
  /*
   * Kräftiger als die übrigen Ränder der Anwendung: auf der Fläche des Bandes
   * stünde `--linie` mit 1,27:1 kaum ab, und dieser Knopf ist das einzige
   * Bedienelement, an dem das Hinweisband hängt.
   */
  border: 1px solid var(--schrift-schwach);
  border-radius: 7px;
  color: var(--schrift);
  font: var(--fett) 13px/1 var(--schmal);
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* --- Rollbereich: Auswahl und Ergebnis teilen sich einen Scroll --- */

.rollbereich {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.abschnitt {
  padding: 14px 14px 8px;
  font: var(--fett) 10.5px/1 var(--schmal);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--schrift-schwach);
}

.zaehler {
  padding: 0 14px 4px;
  font: 400 11.5px/1 var(--mono);
  color: var(--schrift-schwach);
}

.umfang {
  padding: 0 14px 8px;
  font: 400 11.5px/1 var(--mono);
  color: var(--schrift-schwach);
}

.faecher {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 14px 6px;
}

.fach {
  min-height: 44px;
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  border-radius: 6px;
  color: var(--schrift-matt);
  font: 400 13.5px/1 var(--schmal);
  padding: 0 11px;
  cursor: pointer;
}

.fach[aria-pressed="true"] {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-schrift);
  font-weight: var(--fett);
}

/* --- Ergebnis --- */

.ergebnis {
  padding: 0 12px 18px;
}

.treffer {
  /* Bezug für die Fläche, die der Verweis auf das Fahrziel aufspannt. */
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--tafel-hoch);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie);
  border-radius: var(--treffer-rundung);
  padding: 10px 12px;
  margin-bottom: 7px;
}

.treffer[data-gruppe="volltreffer"] {
  border-left-color: var(--voll);
}

.treffer[data-gruppe="teiltreffer"] {
  background: var(--tafel);
}

.treffer-haupt {
  flex: 1;
  min-width: 0;
}

.treffer-name {
  font-size: 17px;
  font-weight: var(--fett);
  line-height: 1.2;
}

/*
 * Der Absprung ins Navigationsprogramm hängt am Namen, seine Fläche aber am
 * ganzen Treffer: mit dem Daumen im Handschuh trifft man die Karte, nicht die
 * Zeile. Unterstrichen ist er nicht — der Name bleibt die Überschrift des
 * Treffers, und die Trefferfläche ist die Karte, nicht das Wort.
 */
.treffer-ziel {
  color: inherit;
  text-decoration: none;
}

.treffer-ziel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--treffer-rundung);
}

/*
 * Der Ring gehört um das, was der Tastendruck auslöst — und das ist die ganze
 * Karte, nicht das Wort. Ein Umriss umfasst nur die Zeilenkästen des Elements
 * selbst, nicht die Fläche, die sein Pseudoelement aufspannt; deshalb steht er
 * am Treffer und ist am Verweis abbestellt. Beide Regeln gehören zusammen:
 * bliebe die zweite weg, stünden zwei Ringe da.
 */
.treffer:has(.treffer-ziel:focus-visible) {
  outline: var(--fokusring);
  outline-offset: 2px;
}

/*
 * Abbestellt nur dort, wo der Ersatz oben auch greift. Kennt eine Laufzeit
 * `:has()` nicht, verwirft sie jene Regel — und der Treffer stünde ohne jeden
 * sichtbaren Fokus da, statt wenigstens den Ring um seinen Namen zu tragen.
 */
@supports selector(:has(*)) {
  .treffer-ziel:focus-visible {
    outline: none;
  }
}

/*
 * Der Winkel hinter dem Namen sagt, dass er weiterführt. Gezeichnet, nicht
 * geschrieben: ein Zeichen im Inhalt eines Pseudoelements läse mancher
 * Screenreader mit vor. Er steht nur da, wo es ein Fahrziel gibt.
 *
 * Ohne `:has()` fällt er ersatzlos weg — anders als beim Fokusring braucht es
 * hier keinen Ausweichweg: der Treffer ohne Fahrziel bleibt an seinem eigenen
 * Wort erkennbar, und angesagt wird der Absprung ohnehin im Verweis selbst.
 */
.treffer-name:has(.treffer-ziel)::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border: 2px solid var(--schrift-schwach);
  border-left: 0;
  border-bottom: 0;
  transform: translateY(-1px) rotate(45deg);
}

/*
 * Ohne Fahrziel führt der Treffer nirgends hin. Das sagt ein Wort, nicht ein
 * fehlender Winkel und keine Farbe: was nur im Vergleich mit den Karten
 * daneben auffällt, fällt in einer Liste lauter Verweise gar nicht auf. Kein
 * Rot — der Treffer taugt, nur das Abtippen bleibt einem nicht erspart.
 *
 * Das Wort steht immer da, auch neben „Standort unbekannt" an der Stelle der
 * Entfernung: eine Auszeichnung, die je nach Ortungslage kommt und geht, wäre
 * genau dann fort, wenn niemand damit rechnet.
 */
.ohne-fahrziel {
  margin-top: 5px;
  font: var(--fett) 11px/1 var(--schmal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

/*
 * Kennzeichnungen: kompakte Schilder im Fliesssatz, die ihren Anzeigetext
 * aufklappen. Die Klasse heisst `kennzeichnung`, nicht `marke` — `.marke` ist
 * seit jeher die Wortmarke im Kopfbereich.
 *
 * Aufgeklappt nimmt eine Kennzeichnung die volle Breite, damit ihr Anzeigetext
 * nicht in einer Chipspalte umbricht.
 */

.kennzeichnungen {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

/*
 * Die Kennzeichnung hebt sich von beiden Trefferflächen ab: der Volltreffer liegt auf
 * `--tafel-hoch`, der Teiltreffer auf `--tafel`. Ein fester Ton träfe einen von
 * beiden; ein Schleier über dem Untergrund hebt sich von jedem ab.
 *
 * Sie liegt über der Fläche des Verweises: sonst klappte ein Antippen nicht
 * auf, sondern spränge in die Navigation. Nur sie selbst, nicht ihre Leiste —
 * die spannt die volle Breite, und ein Antippen der Lücken daneben soll die
 * Karte treffen wie überall sonst.
 */
.kennzeichnung {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--schrift) 8%, transparent);
  border: 1px solid var(--linie);
  border-radius: 6px;
}

.kennzeichnung[open] {
  flex: 1 0 100%;
}

.kennzeichnung summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 11px;
  /*
   * Ohne `text-transform`: die Kurzform steht so am Treffer, wie die
   * Legendentabelle sie schreibt. Versalien machten aus „eCPR" ein „ECPR".
   */
  font: 400 12.5px/1.25 var(--schmal);
  color: var(--schrift-matt);
  cursor: pointer;
  list-style: none;
}

.kennzeichnung .kurzform {
  font-weight: var(--fett);
}

.kennzeichnung summary::-webkit-details-marker {
  display: none;
}

/*
 * Die Fachrichtungen stehen zurückgenommen vor der Kurzform: sie sagen, worauf
 * sich die Kennzeichnung bezieht, tragen aber nicht die Aussage. Die Rücknahme
 * liegt im Schriftschnitt, nicht in einem schwächeren Ton — auf der Fläche der
 * Kennzeichnung fiele `--schrift-schwach` im Dunkelmodus unter 4,5:1.
 *
 * Den Ton erben sie im Normalfall ohnehin; die Regel hält ihn in der Warnung
 * fest, wo das `summary` auf die volle Schriftfarbe geht.
 */
.kennzeichnung .fachrichtungen {
  color: var(--schrift-matt);
}

/*
 * Der Aufklapp-Hinweis ist gezeichnet, nicht geschrieben: ein Zeichen im
 * Inhalt eines Pseudoelements läse mancher Screenreader mit vor. Ein Haken,
 * kein Dreieck — das Dreieck gehört der Warnung und muss ihr allein gehören.
 */
.kennzeichnung summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-left: 0;
  border-top: 0;
  transform: translateY(-2px) rotate(45deg);
}

.kennzeichnung[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}

.anzeigetext {
  padding: 0 11px 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--schrift);
}

/*
 * Eine Warnung unterscheidet sich dreifach ohne jede Farbe: durch das
 * vorangestellte Dreieck, durch den doppelt so starken Rand und durch die
 * kräftigere Schrift. In Graustufen, bei Farbfehlsichtigkeit und in grellem
 * Licht bleibt sie deshalb erkennbar — keiner der drei ist zu streichen, ohne
 * das aufzugeben. Rot und volle Schriftfarbe kommen dazu, ohne dafür nötig
 * zu sein. Die Fachrichtungen davor bleiben zurückgenommen: die Warnung steckt
 * in der Kurzform, nicht darin, worauf sie sich bezieht.
 */
.kennzeichnung.warnt {
  border: 2px solid var(--warnung);
  background: color-mix(in srgb, var(--warnung) 16%, transparent);
}

/* Ein Pixel weniger Polsterung als sonst: der zweite Randpixel holt ihn zurück. */
.kennzeichnung.warnt summary,
.kennzeichnung.warnt .anzeigetext {
  padding-left: 10px;
  padding-right: 10px;
}

.kennzeichnung.warnt summary {
  color: var(--schrift);
}

.kennzeichnung.warnt .kurzform {
  font-weight: 700;
}

.kennzeichnung.warnt summary::before {
  content: "";
  border: 7px solid transparent;
  border-bottom-color: var(--warnung);
  /* Die Tinte sitzt in der unteren Hälfte des Kastens; das hebt sie in die Zeile. */
  margin-top: -7px;
}

.treffer-abdeckung {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--schrift-matt);
}

.treffer-abdeckung .fehlend {
  color: var(--schrift);
  font-weight: var(--fett);
}

.treffer-entfernung {
  flex: none;
  text-align: right;
}

.km {
  font: var(--fett) 20px/1 var(--mono);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.km small {
  font-size: 11px;
  font-weight: 400;
  color: var(--schrift-schwach);
  margin-left: 1px;
}

.ohne-standort {
  font: 400 11.5px/1.3 var(--mono);
  color: var(--schrift-schwach);
  max-width: 6.5rem;
}

.himmelsrichtung {
  margin-top: 5px;
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.05em;
  color: var(--schrift-schwach);
}

.trennung {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 2px 10px;
  font: var(--fett) 10px/1 var(--schmal);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--schrift-schwach);
}

.trennung::before,
.trennung::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--linie);
}

.hinweis,
.leer {
  padding: 12px 2px;
  font-size: 13.5px;
  color: var(--schrift-matt);
}

.fehler {
  border: 1px solid var(--warnung);
  border-radius: 9px;
  padding: 14px;
  color: var(--schrift);
  background: color-mix(in srgb, var(--warnung) 12%, var(--tafel));
}

.fehler b {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  color: var(--warnung);
}

.fehler code {
  font: 400 12px/1.4 var(--mono);
  color: var(--schrift-matt);
  overflow-wrap: anywhere;
}

/* --- Haftungshinweis: scrollt nicht mit --- */

.haftung {
  flex: none;
  padding: 9px 14px;
  border-top: 1px solid var(--linie);
  background: var(--tafel);
  font-size: 11px;
  line-height: 1.4;
  color: var(--schrift-matt);
}

.haftung b {
  color: var(--schrift);
  font-weight: 700;
}

.quelle {
  display: block;
  margin-top: 2px;
  color: var(--schrift-schwach);
}

.quelle a {
  color: inherit;
}

/* --- Textseiten: Impressum und Datenschutzerklärung --- */

/*
 * Fliesstext statt Instrumententafel. Die beiden Seiten stehen ausserhalb der
 * Bedienung: sie scrollen als Ganzes, statt einen eigenen Rollbereich unter
 * einem festen Kopfbereich zu führen — deshalb heben sie die Höhe des
 * Grundgerüsts wieder auf.
 */
.textseite {
  display: block;
  height: auto;
  min-height: 100dvh;
}

.textseite main {
  max-width: 38rem;
  margin: 0 auto;
  padding: 20px 14px 28px;
}

.textseite h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.textseite h2 {
  margin: 24px 0 6px;
  font-size: 15px;
  font-weight: var(--fett);
}

.textseite p,
.textseite address {
  margin: 0 0 10px;
  color: var(--schrift-matt);
  font-style: normal;
}

.textseite a {
  color: var(--schrift);
}

.textseite .stand {
  margin-top: 26px;
  color: var(--schrift-schwach);
  font-size: 13px;
}

/* Der Weg zurück steht im Fussbereich, wo auf der Startseite der Hinweis steht. */
.textseite .haftung {
  text-align: center;
}

/*
 * Die Verweise auf die Rechtstexte tragen die volle Schriftfarbe: der
 * Fussbereich ist matt gesetzt, und leicht erkennbar müssen sie sein.
 */
.rechtliches {
  display: block;
  margin-top: 3px;
}

.rechtliches a {
  color: var(--schrift);
}