/* MobiMory V2 – Gestaltung
   Leitgedanke: Schale um Schale. Jede Schale ist eine eigene Fläche,
   die in der nächsten steckt. Große Schrift, große Tippflächen.
   Keine externen Schriften: alles läuft auch ohne Internet. */

:root {
  --tinte: #15324b;
  --flaeche: #eef2f4;
  --karte: #ffffff;
  --linie: #c3cfd7;
  --text: #14232f;
  --leise: #4b5d6a;
  --aktion: #0b6f78;
  --aktion-text: #ffffff;
  --korrektur-bg: #fff3d1;
  --korrektur-text: #6b4600;
  --fehler: #a4262c;
  --fehler-bg: #fdecec;
  --ok-bg: #e2f3ea;
  --ok-text: #11573a;
  --land: #b7791f;
  --wasser: #0e7c86;
  --luft: #5b5bd6;
  --radius: 14px;
  --motor-aus: #5b6a76;
  --motor-aus-text: #ffffff;
  --motor-laeuft: #b3261e;
  --motor-laeuft-text: #ffffff;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinte: #0c1d2b;
    --flaeche: #0f1a22;
    --karte: #172530;
    --linie: #2f414f;
    --text: #e6eef3;
    --leise: #9fb2bf;
    --aktion: #46bcc6;
    --aktion-text: #06242a;
    --korrektur-bg: #3a2f10;
    --korrektur-text: #ffd98a;
    --fehler: #ff9a9f;
    --fehler-bg: #3b1d20;
    --ok-bg: #153a2b;
    --ok-text: #9be3bf;
    --land: #e0a64a;
    --wasser: #46bcc6;
    --luft: #9c9cff;
    --motor-aus: #3d4e5b;
    --motor-aus-text: #e6eef3;
    --motor-laeuft: #c8372d;
    --motor-laeuft-text: #ffffff;
  }
}

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

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

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }

a { color: var(--aktion); }
:focus-visible { outline: 3px solid var(--aktion); outline-offset: 2px; border-radius: 4px; }
h1:focus { outline: none; }

/* ---------- Kopf ---------- */
.kopf {
  background: var(--tinte);
  color: #fff;
  padding: calc(.7rem + env(safe-area-inset-top, 0)) 1rem .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.kopf a { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.3rem; letter-spacing: .01em; display: flex; align-items: center; gap: .6rem; }
.kopf .marke { width: 2rem; height: 2rem; flex: none; border-radius: .5rem; }
.kopf .version { font-size: .8rem; opacity: .8; }

.inhalt { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 6.5rem; }

.krumen { font-size: .95rem; margin-bottom: 1rem; color: var(--leise); }
.krumen a { color: var(--aktion); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .6rem 1.2rem;
  border-radius: 12px; border: 2px solid var(--aktion);
  background: var(--aktion); color: var(--aktion-text);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
}
.knopf.leise { background: transparent; color: var(--aktion); }
.knopf.gefahr { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.knopf:active { transform: translateY(1px); }

.leiste {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom, 0));
  display: flex; gap: .75rem; justify-content: center;
}
.leiste .knopf { flex: 1 1 0; max-width: 22rem; }
.leiste .knopf { white-space: nowrap; padding-left: .8rem; padding-right: .8rem; }
.leiste .knopf.leise { flex: 0 0 auto; }

/* ---------- Fahrzeugliste (Schale 1) ---------- */
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.zeile {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--karte); border: 1px solid var(--linie);
  border-left-width: 8px; border-radius: var(--radius);
  padding: .8rem .9rem; min-height: 4.5rem;
  color: inherit; text-decoration: none;
}
.zeile.welt-land { border-left-color: var(--land); }
.zeile.welt-wasser { border-left-color: var(--wasser); }
.zeile.welt-luft { border-left-color: var(--luft); }
.zeile-text { display: grid; gap: .1rem; min-width: 0; }
.zeile-name { font-size: 1.15rem; overflow-wrap: anywhere; }
.zeile-art { color: var(--leise); font-size: .95rem; }

/* Kennzeichen / Registriernummer als Schild */
.schild {
  flex: none; max-width: 62%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: #111;
  border: 2px solid #111; border-radius: 7px;
  padding: .15rem .6rem; font-weight: 700; font-size: 1.05rem;
  letter-spacing: .06em; text-align: center; overflow-wrap: anywhere;
}
.schild.welt-wasser { border-color: #0e7c86; color: #0a4f56; }
.schild.welt-luft { border-color: #5b5bd6; color: #33338f; }
.schild.leer { background: transparent; color: var(--leise); border-style: dashed; border-color: var(--linie); font-weight: 400; letter-spacing: 0; font-size: .9rem; }

.leer-hinweis {
  background: var(--karte); border: 2px dashed var(--linie); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-align: center;
}

/* ---------- Schalen im Fahrzeug ---------- */
.schale { border-radius: var(--radius); border: 2px solid var(--tinte); background: var(--karte); padding: 1rem; }
.schale > .schale-kopf { margin-bottom: .9rem; }
.schale .schale { margin-top: 1rem; }
.schale.s2 { border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 5%, var(--karte)); }
.schale.s3 { border-style: dashed; border-color: var(--linie); background: transparent; }
.schale-name { font-size: .95rem; color: var(--leise); margin-bottom: .2rem; }
.fahrzeug-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.fahrzeug-kopf h1 { margin: 0; overflow-wrap: anywhere; }

.gruppe { margin-top: 1.1rem; }
.gruppe h3 { border-bottom: 1px solid var(--linie); padding-bottom: .25rem; margin-bottom: .4rem; }
.daten { margin: 0; display: grid; grid-template-columns: fit-content(60%) 1fr; gap: .35rem .9rem; }
.daten dt { color: var(--leise); overflow-wrap: anywhere; }
.daten dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.daten dd.nichts { font-weight: 400; color: var(--leise); }
.offen { color: var(--leise); margin: .4rem 0 0; font-size: .95rem; }
.formular legend { padding: 0; }
.stand { color: var(--leise); font-size: .9rem; margin-top: 1rem; }

/* ---------- Verlauf ---------- */
.verlauf { margin-top: 1.25rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .25rem 1rem; }
.verlauf summary { cursor: pointer; font-weight: 700; padding: .7rem 0; min-height: 3rem; }
.verlauf ol { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .75rem; }
.verlauf li { border-left: 4px solid var(--linie); padding-left: .75rem; }
.verlauf li.aktuell { border-left-color: var(--aktion); }
.verlauf .wann { font-weight: 600; }
.verlauf .marke-aktuell { font-size: .8rem; background: var(--aktion); color: var(--aktion-text); border-radius: 6px; padding: .05rem .4rem; margin-left: .4rem; }
.verlauf .korrektur { display: inline-block; background: var(--korrektur-bg); color: var(--korrektur-text); border-radius: 6px; padding: .05rem .5rem; font-size: .9rem; }
.verlauf ul { margin: .35rem 0 0; padding-left: 1.1rem; }
.verlauf .alt { text-decoration: line-through; color: var(--leise); }

/* ---------- Formular ---------- */
.formular { display: grid; gap: 1.1rem; }
.feld label { display: block; font-weight: 700; margin-bottom: .25rem; }
.feld .hilfe { color: var(--leise); font-size: .92rem; margin: 0 0 .3rem; }
.eingabe { display: flex; align-items: center; gap: .5rem; }
.eingabe input, .eingabe select {
  flex: 1 1 auto; min-width: 0; width: 100%;
  min-height: 3rem; padding: .5rem .75rem; font: inherit;
  color: var(--text); background: var(--karte);
  border: 2px solid var(--linie); border-radius: 10px;
}
.eingabe input:focus, .eingabe select:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aktion) 30%, transparent); }
.einheit { color: var(--leise); min-width: 2.2rem; }
.feld.hat-fehler input, .feld.hat-fehler select { border-color: var(--fehler); }
.fehler { color: var(--fehler); font-weight: 600; margin: .3rem 0 0; }
.fehlerkasten { background: var(--fehler-bg); color: var(--fehler); border-radius: 10px; padding: .75rem 1rem; font-weight: 600; }
.meldung { background: var(--ok-bg); color: var(--ok-text); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; font-weight: 600; }

.artwahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }
.artwahl label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.4rem; padding: .5rem; cursor: pointer; font-weight: 700;
  background: var(--karte); border: 2px solid var(--linie); border-radius: 12px;
  border-left-width: 8px;
}
.artwahl label.welt-land { border-left-color: var(--land); }
.artwahl label.welt-wasser { border-left-color: var(--wasser); }
.artwahl label.welt-luft { border-left-color: var(--luft); }
.artwahl input { position: absolute; opacity: 0; pointer-events: none; }
.artwahl input:checked + span { color: var(--aktion); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 3px; }
.artwahl label:has(input:checked) { border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 10%, var(--karte)); }
.artwahl label:has(input:focus-visible) { outline: 3px solid var(--aktion); outline-offset: 2px; }
.fest-art { font-weight: 700; }

/* ---------- Fuß ---------- */
.fuss { max-width: 46rem; margin: 0 auto; padding: 0 1rem 7rem; color: var(--leise); font-size: .9rem; }
.fuss details { margin-top: .75rem; }
.fuss summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; }

.laden { padding: 2rem 1rem; text-align: center; color: var(--leise); }
.fehlerseite { max-width: 36rem; margin: 3rem auto; padding: 0 1rem; }

@media (max-width: 30rem) {
  .schale { padding: .75rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Startseite ---------- */
.start {
  min-height: 100vh; min-height: 100dvh;
  max-width: 34rem; margin: 0 auto;
  padding: calc(2rem + env(safe-area-inset-top, 0)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; justify-content: center; gap: 1.6rem;
}
.start-logo { display: grid; justify-items: center; text-align: center; gap: .2rem; }
.start-logo img { width: 8rem; height: 8rem; border-radius: 1.9rem; box-shadow: 0 .5rem 1.4rem color-mix(in srgb, var(--tinte) 30%, transparent); }
.start-name { font-size: 2rem; font-weight: 800; margin: 1rem 0 0; color: var(--text); letter-spacing: .01em; line-height: 1.1; }
.start-vtd { color: var(--leise); margin: .2rem 0 0; font-size: 1rem; }

.kernsatz { display: grid; justify-content: center; gap: .55rem; margin: .4rem 0 0; font-size: clamp(1.6rem, 7.4vw, 2.6rem); font-weight: 800; line-height: 1.1; color: var(--text); text-align: left; }
.kernsatz .satz { display: flex; align-items: center; gap: .85rem; }
.kernsatz .chip {
  flex: none; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--aktion); color: var(--aktion-text);
  font-size: 1.15rem; font-weight: 800; line-height: 1;
}
.infotext { color: var(--leise); font-size: 1.1rem; margin: 0 auto; max-width: 25rem; text-align: center; }
.start-knoepfe { display: grid; gap: .8rem; margin-top: .3rem; }
.knopf.gross { min-height: 3.7rem; font-size: 1.2rem; }
.start-fuss { color: var(--leise); font-size: .95rem; margin-top: .8rem; text-align: center; border-top: 1px solid var(--linie); padding-top: 1rem; }
.start-fuss p { margin: 0 0 .15rem; }

/* ---------- Kacheln (Hauptmenü, Stammdaten) ---------- */
.kacheln { display: grid; gap: .85rem; }
.kachel {
  display: grid; gap: .2rem; position: relative;
  background: var(--karte); border: 2px solid var(--tinte); border-radius: var(--radius);
  padding: 1.1rem 1rem; min-height: 5.5rem; color: inherit; text-decoration: none;
}
a.kachel:active { transform: translateY(1px); }
a.kachel:hover { border-color: var(--aktion); }
.kachel-titel { font-size: 1.35rem; font-weight: 800; }
.kachel-text { color: var(--leise); }
.kachel.bald { border-style: dashed; border-color: var(--linie); background: transparent; }
.kachel.bald .kachel-titel { color: var(--leise); }
.kachel-bald { position: absolute; top: .8rem; right: .9rem; font-size: .9rem; color: var(--leise); border: 1px solid var(--linie); border-radius: 6px; padding: 0 .5rem; }
.zur-start { margin-top: 1.25rem; }

/* Kachelseiten (seit 2.0.31, Textumbruch neu in 2.0.32): breiter Platz, die Kacheln füllen ihn. Spalten und Höhe setzt die Seite nach dem Aufbau (MM.Hilfen.kachelRaster).
   Text wird nie abgeschnitten: Die Kachel wird höher, wenn der Text mehr Platz braucht. Titel bleiben ganze Wörter, Beschreibungen brechen nur an Silbengrenzen um (lang="de", hyphens: auto). */
.inhalt.kachelseite { max-width: 78rem; padding-bottom: 5.6rem; }
.kachelseite .kacheln { --kachel-schrift: 1; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-auto-rows: minmax(4.8rem, auto); }
.kachelseite .kachel { align-content: center; min-height: 0; min-width: 0; padding: .7rem .9rem; overflow: visible; }
.kachelseite .kachel-titel, .kachelseite .kachel-text { min-width: 0; overflow-wrap: normal; word-break: normal; }
.kachelseite .kachel-text { hyphens: auto; -webkit-hyphens: auto; }
.kachelseite .kachel-titel { hyphens: manual; -webkit-hyphens: manual; }
.kachelseite .kachel-titel { font-size: calc(clamp(1.1rem, 1rem + .6vw, 1.45rem) * var(--kachel-schrift, 1)); line-height: 1.2; }
.kachelseite .kachel-text { font-size: calc(.95rem * var(--kachel-schrift, 1)); line-height: 1.3; }
/* Titel bleiben ganze Wörter: Sie werden erst kleiner, dann gibt es weniger Spalten. Nur wenn auch das nicht reicht (Notlösung), brechen sie an Silbengrenzen um. */
.kachelseite .kacheln.umbruch-notfall .kachel-titel { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.kachelseite .kacheln.umbruch-notfall .kachel-text { overflow-wrap: break-word; }

/* ---------- Neu im Programm, Einstellungen ---------- */
.neuerungen { display: grid; gap: 1rem; }
.neuerung { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; }
.neuerung h2 { margin-bottom: .1rem; }
.neuerung .datum { color: var(--leise); font-size: .95rem; }
.neuerung ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.block { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.block h2 { margin-bottom: .4rem; }
.block p:last-child { margin-bottom: 0; }
.block .hinweis { color: var(--leise); font-size: .95rem; }
.block.test summary { cursor: pointer; font-weight: 700; min-height: 2.5rem; display: flex; align-items: center; }
details.block > summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
details.block[open] > summary { margin-bottom: .5rem; }
.fuss p { margin: 0; text-align: center; }

/* Niedrige Bildschirme (Tablet quer): Startseite soll ohne Scrollen passen */
@media (max-height: 960px) {
  .start { gap: 1rem; padding-top: calc(1rem + env(safe-area-inset-top, 0)); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0)); }
  .start-logo img { width: 5.5rem; height: 5.5rem; border-radius: 1.3rem; }
  .start-name { margin-top: .6rem; font-size: 1.7rem; }
  .kernsatz { gap: .35rem; }
  .kernsatz .chip { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .knopf.gross { min-height: 3.2rem; }
  .start-fuss { margin-top: .2rem; padding-top: .6rem; }
}
@media (max-height: 700px) {
  .start { gap: .7rem; }
  .start-logo img { width: 4rem; height: 4rem; border-radius: 1rem; }
  .start-name { margin-top: .3rem; font-size: 1.4rem; }
  .infotext { font-size: 1rem; }
  .knopf.gross { min-height: 3rem; font-size: 1.1rem; }
}

/* ---------- Komponenten (Schale 3 und tiefer) ---------- */
.schale.s3.live { border-style: solid; border-color: var(--tinte); background: color-mix(in srgb, var(--tinte) 4%, var(--karte)); }
.schale.sx { border-color: var(--aktion); }
.schale.sx > h1 { margin-bottom: .2rem; overflow-wrap: anywhere; }
.gehoert { color: var(--leise); margin: 0 0 .6rem; }
.leer-text { color: var(--leise); }
.ausgebaut-hinweis { background: var(--korrektur-bg); color: var(--korrektur-text); }

.teile { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .6rem; }
.teil {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem;
  background: var(--karte); border: 1px solid var(--linie); border-left: 6px solid var(--aktion);
  border-radius: 12px; padding: .7rem .85rem; min-height: 3.6rem; color: inherit; text-decoration: none;
}
.teil:hover { border-color: var(--aktion); }
.teil-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 9rem; }
.teil-name { overflow-wrap: anywhere; }
.teil-info { color: var(--leise); font-size: .92rem; }
.teil-zahl { color: var(--leise); font-size: .9rem; flex: none; }
.ausgebaut { margin: 0 0 .9rem; }
.ausgebaut summary { cursor: pointer; font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; color: var(--leise); }
.teile-block { margin-top: 1.25rem; }

.feld.liste { border: 0; padding: 0; margin: 0; min-width: 0; }
.feld-label { font-weight: 700; padding: 0; margin-bottom: .25rem; }
.merkmale { display: grid; gap: .6rem; margin-bottom: .6rem; }
.merkmal-zeile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid var(--linie); }
.merkmal-zeile .knopf { justify-self: end; }
.merkmal-zeile select {
  min-width: 0; width: 100%; min-height: 3rem; padding: .5rem .75rem; font: inherit;
  color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: 10px;
}
.merkmal-zeile input {
  min-width: 0; width: 100%; min-height: 3rem; padding: .5rem .75rem; font: inherit;
  color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: 10px;
}
.merkmal-zeile input:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aktion) 30%, transparent); }
.knopf.klein { min-height: 2.6rem; padding: .3rem .7rem; font-size: .9rem; }
@media (max-width: 30rem) {
  .merkmal-zeile { grid-template-columns: 1fr 1fr; }
  .merkmal-zeile .knopf { grid-column: 1 / -1; justify-self: end; }
}

.krumen { overflow-wrap: anywhere; }

/* Hinweis auf eine neue App-Version */
.update-hinweis {
  position: fixed; left: .75rem; right: .75rem; top: calc(.75rem + env(safe-area-inset-top, 0)); z-index: 20;
  background: var(--tinte); color: #fff; border-radius: 12px; padding: .75rem 1rem;
  display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.3);
}
.update-hinweis .knopf { min-height: 2.6rem; background: #fff; color: var(--tinte); border-color: #fff; }

@media (max-width: 30rem) {
  .schale { padding: .65rem; }
  .schale .schale { margin-top: .8rem; }
  .teil { padding: .6rem .7rem; }
}

/* ---------- Fristen und Zähler ---------- */
.bereich { margin-top: 1.5rem; }
.bereich h2 { margin-bottom: .6rem; }
.fristen { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .6rem; }
.frist {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .75rem;
  background: var(--karte); border: 1px solid var(--linie); border-left: 6px solid var(--linie);
  border-radius: 12px; padding: .7rem .85rem; min-height: 3.6rem; color: inherit; text-decoration: none;
}
.frist:hover { border-color: var(--aktion); }
.frist.status-ueberfaellig { border-left-color: var(--fehler); }
.frist.status-bald { border-left-color: var(--land); }
.frist.status-ok { border-left-color: var(--ok-text); }
.frist-text { display: grid; gap: .1rem; min-width: 0; flex: 1 1 11rem; }
.frist-name { overflow-wrap: anywhere; }
.frist-info { color: var(--leise); font-size: .92rem; }
.zaehler-zeile { border-left-color: var(--aktion); }
.zaehler-stand { font-weight: 700; flex: none; }

.chip-status { flex: none; border-radius: 999px; padding: .15rem .7rem; font-size: .9rem; font-weight: 700; border: 1px solid var(--linie); background: var(--flaeche); color: var(--leise); }
.chip-status.gross { font-size: 1.05rem; padding: .3rem 1rem; }
.chip-status.status-ueberfaellig { background: var(--fehler-bg); color: var(--fehler); border-color: var(--fehler); }
.chip-status.status-bald { background: var(--korrektur-bg); color: var(--korrektur-text); border-color: var(--land); }
.chip-status.status-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-text); }

.hinweis-frist { display: inline-block; width: fit-content; margin-top: .15rem; border-radius: 6px; padding: 0 .5rem; font-size: .9rem; font-weight: 700; }
.hinweis-frist.status-ueberfaellig { background: var(--fehler-bg); color: var(--fehler); }
.hinweis-frist.status-bald { background: var(--korrektur-bg); color: var(--korrektur-text); }

.status-zeilen { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.status-zeilen li { padding-left: .75rem; border-left: 4px solid var(--linie); }
.status-zeilen li.status-ueberfaellig { border-left-color: var(--fehler); color: var(--fehler); font-weight: 600; }
.status-zeilen li.status-bald { border-left-color: var(--land); }
.status-zeilen li.status-ok { border-left-color: var(--ok-text); }
.hinweis { color: var(--leise); font-size: .95rem; margin: .5rem 0 0; }
.grosse-zahl { font-size: 2.2rem; font-weight: 800; margin: .2rem 0; }

.formular fieldset > .hilfe { color: var(--leise); font-size: .95rem; margin: 0; }

.bereich.oben { margin: 0 0 1.25rem; }

/* ---------- Dokumente ---------- */
.frist.dok { border-left-color: var(--luft); }
.knopfzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.vorschau { margin: .6rem 0; }
.vorschau-bild { max-width: 100%; max-height: 22rem; border-radius: 10px; border: 1px solid var(--linie); display: block; }
.oeffnen-status { color: var(--leise); min-height: 1.4rem; margin: 0 0 .6rem; }
.gewaehlt { color: var(--ok-text); font-weight: 600; margin: .3rem 0 0; overflow-wrap: anywhere; }
.eingabe input[type="file"] { padding: .6rem .6rem; min-height: 3.2rem; }
/* Foto-Knöpfe (seit 2.0.49): das Datei-Feld ist unsichtbar, der Knopf (das Etikett) öffnet es. */
.datei-knopf { position: relative; margin-bottom: 0; }
.feld .datei-knopf { display: inline-flex; margin-bottom: 0; }
.datei-versteckt { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.datei-knopf:has(.datei-versteckt:focus-visible) { outline: 3px solid var(--aktion); outline-offset: 2px; }
.suche { width: 100%; min-height: 3rem; padding: .5rem .75rem; font: inherit; color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: 10px; margin-bottom: 1rem; }
.suche:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aktion) 30%, transparent); }
.dok-gruppen .bereich:first-child { margin-top: 0; }
.dok-gruppen h2 a { color: inherit; text-decoration-color: var(--linie); }

/* ---------- Personen, Tiere, Nachweise ---------- */
.frist.nw { border-left-color: var(--linie); }
.frist.nw.status-unbekannt { border-left-color: var(--leise); }
.papier { color: var(--leise); font-size: .85em; font-weight: 400; }
.angaben { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; }

.vorschlag { background: var(--karte); border: 1px solid var(--linie); border-radius: 12px; padding: .8rem .9rem; display: grid; gap: .35rem; }
.vorschlag p { margin: 0; }
.vorschlag-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .75rem; }
.vorschlag-mehr summary { cursor: pointer; min-height: 2.5rem; display: flex; align-items: center; color: var(--aktion); font-weight: 600; }
.vorschlag-mehr p { margin: .4rem 0; }

.zeilen-editor { display: grid; gap: .9rem; margin-bottom: .6rem; }
.zeile-edit { display: grid; grid-template-columns: 1fr 8rem; gap: .5rem; align-items: center; padding: .7rem; border: 1px solid var(--linie); border-radius: 12px; background: color-mix(in srgb, var(--karte) 70%, transparent); }
.zeile-edit .ze-label, .zeile-edit .ze-papier, .zeile-edit .ze-typ {
  min-width: 0; width: 100%; min-height: 3rem; padding: .5rem .75rem; font: inherit;
  color: var(--text); background: var(--karte); border: 2px solid var(--linie); border-radius: 10px;
}
.zeile-edit .ze-label { grid-column: 1 / -1; }
.zeile-edit .ze-papier { grid-column: 1 / 2; }
.zeile-edit .knopf { grid-column: 2 / 3; justify-self: end; }
.zeile-edit .ze-typ { grid-column: 2 / 3; grid-row: 2; }
.zeile-edit .ze-papier { grid-row: 2; }
.zeile-edit .knopf { grid-row: 3; grid-column: 1 / -1; }
.zeile-edit input:focus, .zeile-edit select:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aktion) 30%, transparent); }

.schale.sx > h1 { font-size: 1.5rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.daten.stapel { grid-template-columns: 1fr; gap: 0; }
.daten.stapel dt { font-size: .92rem; }
.daten.stapel dd { margin-bottom: .65rem; }

/* ---------- Aktivitäten ---------- */
.frist.ak { border-left-color: var(--linie); }
.frist.ak.status-ok { border-left-color: var(--ok-text); }
.frist.ak.status-ueberfaellig { border-left-color: var(--fehler); }
.pruef-person { margin: .6rem 0 0; padding-left: .75rem; border-left: 4px solid var(--linie); }
.pruef-person p { margin: 0 0 .3rem; }
.gruende { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; }
.gruende li { padding-left: .75rem; border-left: 4px solid var(--linie); }
.gruende li.status-ok { border-left-color: var(--ok-text); }
.gruende li.status-bald { border-left-color: var(--land); }
.gruende li.status-ueberfaellig { border-left-color: var(--fehler); font-weight: 600; }
.gruende li.status-unbekannt { border-left-color: var(--leise); }
.wechsel { margin: .4rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }

/* ---------- Sicherung ---------- */
.erinnerung { background: var(--korrektur-bg); color: var(--korrektur-text); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; display: grid; gap: .6rem; }
.erinnerung p { margin: 0; font-weight: 600; }
.erinnerung .knopf { justify-self: start; }
.checkzeile { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; cursor: pointer; }
.checkzeile input { width: 1.6rem; height: 1.6rem; flex: none; margin-top: .1rem; }
.vergleich { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.vergleich th, .vergleich td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--linie); }
.vergleich th { color: var(--leise); font-size: .9rem; font-weight: 600; }
.vergleich td:nth-child(n+2), .vergleich th:nth-child(n+2) { text-align: right; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }
.feld label.checkzeile { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 0; }
.feld label.checkzeile input { width: 1.8rem; height: 1.8rem; flex: none; margin: 0; accent-color: var(--aktion); }

/* ---------- 2.0.14: Cockpit und klassisches Logbuch (Reiter, große Knöpfe) ---------- */
.reiter-leiste { display: flex; gap: .4rem; margin: 0 0 1rem; border-bottom: 2px solid var(--linie); }
.reiter {
  flex: 1 1 0; min-height: 3.6rem; padding: .4rem .8rem; margin-bottom: -2px;
  font: inherit; font-size: 1.25rem; font-weight: 800; cursor: pointer;
  background: transparent; color: var(--leise); border: 0; border-bottom: 5px solid transparent; border-radius: 10px 10px 0 0;
}
.reiter[aria-selected="true"] { color: var(--aktion); border-bottom-color: var(--aktion); background: var(--karte); }
.reiter:focus-visible { outline: 3px solid var(--aktion); outline-offset: -3px; }
.reiter-inhalt[hidden] { display: none; }

.cockpit-status { display: grid; gap: .5rem; margin: 0 0 1rem; padding: .9rem 1rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); }
.cockpit-status p { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; }
.cockpit-status strong { font-size: 1.2rem; }

.cockpit-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1rem 0; }
@media (min-width: 40rem) { .cockpit-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cockpit-knopf {
  flex-direction: column; gap: .15rem; min-height: 5.5rem; padding: .8rem .6rem;
  font-size: 1.45rem; font-weight: 800; line-height: 1.2; text-align: center;
}
.cockpit-knopf-info { font-size: .95rem; font-weight: 600; opacity: .85; }
.cockpit-knopf.leise { border-width: 2px; }
a.knopf[aria-disabled="true"] { opacity: .5; pointer-events: none; cursor: not-allowed; }

.tag-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 1rem; }
.tag-karte h3 { margin: 0 0 .3rem; font-size: 1.25rem; }
.tag-karte h3 a { color: var(--aktion); }
.tag-karte p { margin: .25rem 0; }
.tag-karte .fristen { margin: .5rem 0; }
.tag-karte.ausgeblendet { opacity: .8; border-style: dashed; }
.tag-abschluss { padding: .5rem .7rem; background: var(--flaeche); border-radius: 10px; }
.tag-karte .knopfzeile { gap: .5rem; }
.tag-karte .knopf.klein { min-height: 2.9rem; }

/* Fahrzeugarten als Baum (2.0.15): sichtbare Häkchen, eingerückt, gut mit dem Finger zu treffen */
.artbaum { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.baumzeile { display: flex; align-items: center; gap: .7rem; min-height: 2.75rem; padding: .3rem .6rem; border: 1px solid var(--linie, #c9c9c9); border-radius: .6rem; background: var(--karte); cursor: pointer; }
.baumzeile input { width: 1.5rem; height: 1.5rem; flex: none; accent-color: var(--aktion); }
.baumzeile:has(input:checked) { border-color: var(--aktion); background: color-mix(in srgb, var(--aktion) 10%, var(--karte)); }
.baumzeile:has(input:focus-visible) { outline: 3px solid var(--aktion); outline-offset: 2px; }
.artwahl .artgruppe { grid-column: 1 / -1; margin: .6rem 0 0; font-weight: 600; }
.frist.ausgeblendet { opacity: .65; border-style: dashed; }

/* ---------- Cockpit im Vollbild (seit 2.0.18): kein Scrollen, die Knöpfe teilen sich die Höhe ---------- */
.cockpit-voll {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: .6rem;
  padding: max(.6rem, env(safe-area-inset-top)) max(.7rem, env(safe-area-inset-right)) max(.6rem, env(safe-area-inset-bottom)) max(.7rem, env(safe-area-inset-left));
  background: var(--flaeche); color: var(--text); overflow: hidden;
}
.cv-status { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; align-items: baseline; padding: .5rem .8rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); flex: 0 0 auto; }
.cv-status p { margin: 0; display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.cv-status strong { font-size: 1.1rem; }
.cv-meldung { margin: 0; padding: .4rem .8rem; background: var(--ok-bg); color: var(--ok-text); border-radius: var(--radius); font-weight: 700; flex: 0 0 auto; }
/* Hinweis „Kein Motor läuft“ (seit 2.0.20): nur ein Hinweis, der Eintrag ist schon gespeichert */
.cv-hinweis { margin: 0; padding: .4rem .8rem; background: var(--korrektur-bg); color: var(--korrektur-text); border-left: 6px solid var(--land); border-radius: var(--radius); font-weight: 700; flex: 0 0 auto; }
/* Motorstopp-Frage (seit 2.0.22): Frage nach der Ankunft und Vorschlag der Stoppzeit, mit Knöpfen */
.cv-frage { margin: 0; padding: .5rem .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; background: var(--korrektur-bg); color: var(--korrektur-text); border-left: 6px solid var(--motor-laeuft); border-radius: var(--radius); flex: 0 0 auto; }
.cv-frage p { margin: 0; font-weight: 700; flex: 1 1 14rem; }
.cv-frage-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Position im Cockpit (seit 2.0.21) */
.cv-position { flex-basis: 100%; }
/* Beide Zähler in der Statuszeile (seit 2.0.20) */
.cv-status .cv-zaehler { flex-basis: 100%; gap: .1rem 1.4rem; }
.cv-z { display: inline-flex; flex-wrap: wrap; gap: .1rem .5rem; align-items: baseline; }
/* Spalten nach Breite des Bildschirms (seit 2.0.20): Handy 2, Tablet 3, großer Bildschirm 4. Die Zeilen teilen sich die Höhe. */
.cv-raster { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .6rem; }
@media (min-width: 600px) { .cv-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .cv-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cv-knopf {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 0; height: 100%;
  padding: .3rem .5rem; font-size: clamp(1.2rem, 4.2vmin, 2.2rem); font-weight: 800; line-height: 1.15; overflow: hidden; overflow-wrap: anywhere;
}
.cv-knopf.leise { border-width: 3px; }
/* Status (seit 2.0.23): ein Knopf, der zum Status des Fahrzeugs nicht passt, ist grau und nennt den Grund. */
.cv-knopf.cv-gesperrt { flex-direction: column; gap: .1rem; background: var(--motor-aus); color: var(--motor-aus-text); border-color: var(--motor-aus); opacity: .55; cursor: not-allowed; }
.cv-gesperrt .ms-aktion { font-size: .8em; font-weight: 600; }
.cv-fuss { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; justify-content: space-between; }
.cv-letzte { margin: 0; flex: 1 1 14rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--leise); }
.cv-fussknoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Motorschalter (seit 2.0.19): grau = Motor aus, rot = Motor läuft ---------- */
.motor-schalter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; text-align: center; text-decoration: none;
  border-color: transparent; font-weight: 800; line-height: 1.15;
}
.motor-schalter.motor-aus { background: var(--motor-aus); color: var(--motor-aus-text); border-color: var(--motor-aus); }
.motor-schalter.motor-laeuft { background: var(--motor-laeuft); color: var(--motor-laeuft-text); border-color: var(--motor-laeuft); }
.motor-schalter .ms-name { font-size: 1.35rem; letter-spacing: .04em; overflow-wrap: anywhere; }
.motor-schalter .ms-aktion { font-size: 1rem; font-weight: 700; }
.motor-schalter:focus-visible { outline: 3px solid var(--aktion); outline-offset: 3px; }
.cv-motoren { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
/* Seit 2.0.54: Motor- und Verbraucher-Schalter so klein wie die übrigen Knöpfe (Fußleiste), Name und Start/Stopp nebeneinander */
.cv-motor { flex: 0 1 auto; flex-direction: row; gap: .5rem; align-items: baseline; min-height: 2.6rem; padding: .35rem .8rem; }
.cv-motor .ms-name { font-size: 1rem; }
.cv-motor .ms-aktion { font-size: .95rem; }
/* Verbraucher-Schalter im Cockpit (seit 2.0.53): eigene Reihe unter den Motoren */
.cv-verbraucher { grid-auto-flow: row; }
.motor-karte .motor-schalter.gross { width: 100%; min-height: 4.2rem; margin: .4rem 0 .6rem; }
.motor-lauf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }

/* ---------- Werkstatt (seit 2.0.24) ---------- */
.leiste-inline { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.bereich.warnung { border: 2px solid var(--land); background: var(--korrektur-bg); color: var(--korrektur-text); border-radius: 12px; padding: .9rem 1rem; }
.bereich.warnung.status-ueberfaellig { border-color: var(--fehler); background: var(--fehler-bg); color: var(--fehler); }
.bereich.warnung h2 { margin-top: 0; font-size: 1.15rem; }
.bereich.warnung .hinweis { color: inherit; }
.bereich.warnung .frist { color: var(--text); }
.bereich.warnung .frist-name { font-weight: 700; color: var(--text); }

/* Kostenzeilen (seit 2.0.29): Art, neue Art und Betrag in einer Zeile */
.zeilen-editor-kz { display: grid; gap: .9rem; margin-bottom: .6rem; }
.zeilen-editor-kz .kz-edit { display: grid; grid-template-columns: 1fr 8rem; gap: .5rem; align-items: center; padding: .7rem; border: 1px solid var(--linie); border-radius: 12px; background: color-mix(in srgb, var(--karte) 70%, transparent); }
.zeilen-editor-kz .kz-art, .zeilen-editor-kz .kz-neu, .zeilen-editor-kz .kz-betrag { width: 100%; min-height: 2.75rem; font: inherit; padding: .5rem .7rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--karte); color: inherit; box-sizing: border-box; }
.zeilen-editor-kz .kz-art { grid-column: 1 / -1; }
.zeilen-editor-kz .kz-neu { grid-column: 1 / 2; }
.zeilen-editor-kz .kz-betrag { grid-column: 2 / 3; text-align: right; }
.zeilen-editor-kz .knopf { grid-column: 1 / -1; justify-self: end; }
.zeilen-editor-kz input:focus, .zeilen-editor-kz select:focus { border-color: var(--aktion); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aktion) 30%, transparent); }
.kasse-stand { font-size: 1.6rem; font-weight: 700; margin: .2rem 0 .6rem; }
.kasse-stand.minus { color: var(--warnung, #b3261e); }
.buchung-aus { opacity: .55; }

/* Import (seit 2.0.30): Vorschau der Tabelle */
.tabelle-rollen { overflow-x: auto; margin: .5rem 0 1rem; }
.import-tabelle { width: 100%; border-collapse: collapse; }
.import-tabelle th, .import-tabelle td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--linie); }
.import-tabelle th { color: var(--leise); font-size: .9rem; font-weight: 600; }
.import-tabelle td:first-child { color: var(--leise); white-space: nowrap; }
.import-tabelle ul.fehler { margin: .25rem 0 0; padding-left: 1.1rem; font-weight: 400; font-size: .92rem; }
.import-tabelle .hilfe { color: var(--leise); font-size: .9rem; }

/* Route und Wetter (seit 2.0.33) */
.rp-punkt { display: grid; gap: .2rem; padding: .6rem .8rem; margin: .5rem 0; border: 1px solid var(--linie); border-radius: 8px; background: var(--flaeche); list-style: none; }
.rp-punkt.rp-aktiv { border-color: var(--ok-text); }
.rp-zeile { display: block; }
.rp-punkt .knopf { justify-self: start; }

/* ---------- Karte im Vollbild (seit 2.0.34, Schritt 9b) ---------- */
.karte-voll {
  position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; gap: .4rem;
  padding: max(.5rem, env(safe-area-inset-top)) max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
  background: var(--flaeche); color: var(--text); overflow: hidden;
}
.kv-leiste { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: .4rem; }
.kv-karte { flex: 1 1 auto; min-height: 0; border: 1px solid var(--linie); border-radius: var(--radius); isolation: isolate; background: #e8eef3; }
.kv-info { flex: 0 0 auto; max-height: 34vh; overflow: auto; padding: .4rem .7rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); font-size: .95rem; }
.kv-info p { margin: .15rem 0; }
.kv-leise { color: var(--leise); }
.kv-warn { color: var(--fehler); font-weight: 700; }
.kv-meldung { margin: 0; padding: .4rem .8rem; background: var(--ok-bg); color: var(--ok-text); border-radius: var(--radius); font-weight: 700; flex: 0 0 auto; }
.kv-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; color: var(--leise); font-size: .85rem; }
.kv-pin-huelle { background: none; border: 0; }
.kv-pin {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border: 3px solid #fff; border-radius: 50%;
  color: #fff; font-weight: 800; font-size: .95rem; box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
}
.kv-pin.klein { display: inline-flex; width: 1.3rem; height: 1.3rem; font-size: .7rem; border-width: 2px; vertical-align: middle; }
.kv-start { background: #1f8a3b; }
.kv-ziel { background: #c0262d; }
.kv-zwischen { background: #0b7285; }
.kv-wetterpunkt { background: #1d5fbf; }
.kv-vorbei { background: #7b8794; }
.kv-wetterjetzt { background: #7a3db8; }
.kv-eintrag { background: #5f6b76; border-width: 2px; }
.kv-position { background: #1d5fbf; border-color: #fff; animation: kv-puls 2s ease-out infinite; }
@keyframes kv-puls { 0% { box-shadow: 0 0 0 0 rgba(29, 95, 191, .6); } 100% { box-shadow: 0 0 0 14px rgba(29, 95, 191, 0); } }
@media (prefers-reduced-motion: reduce) { .kv-position { animation: none; } }
.kv-linie { display: inline-block; width: 1.6rem; height: 0; border-top: 4px solid; vertical-align: middle; }
.kv-linie-plan { border-color: #1d5fbf; }
.kv-linie-weg { border-color: #e07b00; }
.kv-popup p { margin: .2rem 0 0; }
.leaflet-container { font: inherit; }


/* Abgeben, Übergabe und Fahrzeugart ändern (seit 2.0.37) */
.block.warn { border: 2px solid var(--land); background: var(--korrektur-bg); color: var(--korrektur-text); }
.block.warn h2 { margin-top: 0; }
.block.warn ul { margin: .3rem 0 .6rem 1.1rem; padding: 0; }
.hinweis-frist.status-unbekannt { background: var(--linie); color: var(--leise); }

/* Reisecheck (seit 2.0.38) */
.rc-liste { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .6rem; }
.rc-anf { padding: .7rem .8rem; border: 1px solid var(--linie); border-left-width: 4px; border-radius: var(--radius); background: var(--karte); }
.rc-anf.status-ok { border-left-color: var(--ok-text); }
.rc-anf.status-bald { border-left-color: var(--land); }
.rc-anf.status-ueberfaellig { border-left-color: var(--fehler); }
.rc-anf p { margin: .3rem 0; overflow-wrap: anywhere; }
.rc-kopf { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rc-text { font-weight: 600; }
.rc-quellen { margin: .3rem 0 0 1.1rem; padding: 0; overflow-wrap: anywhere; }

/* 2.0.44: Wechselfeld für die Geschwindigkeit in der Kopfzeile des Cockpits */
.cv-position { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.cv-pos-text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.cv-tempo { display: inline-flex; align-items: baseline; gap: .45rem; min-height: 2.4rem; padding: .15rem .7rem; border: 1px solid var(--linie); border-radius: 999px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.cv-tempo[hidden] { display: none; }
.cv-tempo strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.cv-tempo:focus-visible { outline: 3px solid var(--aktion); outline-offset: 2px; }
.cv-meldung { cursor: pointer; }
/* Umschalter km und sm neben dem Wechselfeld (seit 2.0.61) */
.cv-einheit { display: inline-flex; align-items: center; justify-content: center; min-height: 2.4rem; min-width: 3.2rem; padding: .15rem .7rem; border: 1px solid var(--linie); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.cv-einheit:focus-visible { outline: 3px solid var(--aktion); outline-offset: 2px; }

/* Kennzahlen auf Seite 1 (seit 2.0.62): ETA, Rest, Gefahren groß nebeneinander */
.cv-kennzahlen { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cv-kz { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .6rem .4rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); text-align: center; }
.cv-kz-wert { font-size: clamp(1.4rem, 5vmin, 2.8rem); font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }

/* Cockpit in Seiten (seit 2.0.61): Kopfzeile mit Logbuch und Hauptmenü steht fest über den Seiten, die Seiten wischt man waagerecht,
   unten zeigen Punkte die Seite. Jede Seite füllt die Höhe, das Wischen schnappt auf die ganze Seite ein. */
.cv-kopf { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cv-seiten { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cv-seiten::-webkit-scrollbar { display: none; }
.cv-seite { flex: 0 0 100%; min-width: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; }
.cv-punkte { flex: 0 0 auto; display: flex; justify-content: center; gap: .2rem; }
.cv-punkt { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.6rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.cv-punkt-bild { width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid var(--leise); background: transparent; }
.cv-punkt.aktiv .cv-punkt-bild { background: var(--aktion); border-color: var(--aktion); }
.cv-punkt:focus-visible { outline: 3px solid var(--aktion); outline-offset: 2px; border-radius: 50%; }


/* 2.0.44: Tag der Reise wählen, Kalender hinter einem Knopf */
.tagwahl { margin: .4rem 0 .8rem; }
.tagwahl-knopf { min-height: 2.8rem; }
.tagwahl-kalender { margin-top: .5rem; padding: .6rem .8rem; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); max-height: 70vh; overflow: auto; }
.tagwahl-kalender[hidden] { display: none; }
.tw-monat { width: 100%; max-width: 24rem; border-collapse: collapse; margin: 0 0 .9rem; table-layout: fixed; }
.tw-monat caption { text-align: left; font-weight: 700; padding: .2rem 0 .3rem; }
.tw-monat th { font-size: .8rem; font-weight: 600; color: var(--leise); padding: .1rem 0; }
.tw-monat td { padding: .12rem; text-align: center; }
.tw-tag { display: block; width: 100%; min-height: 2.5rem; line-height: 2.5rem; padding: 0; border: 1px solid transparent; border-radius: 8px; font: inherit; text-align: center; background: transparent; }
.tw-ausserhalb { color: var(--leise); opacity: .35; }
.tw-frei { color: var(--leise); }
.tw-aktiv { background: var(--ok-bg); color: var(--ok-text); font-weight: 700; border-color: var(--linie); cursor: pointer; }
.tw-aktiv:focus-visible { outline: 3px solid var(--aktion); outline-offset: 1px; }
.tw-gewaehlt { background: var(--aktion); color: var(--aktion-text); border-color: var(--aktion); }
.tw-heute { text-decoration: underline; text-underline-offset: 3px; }

/* Kontroll-Code (2.0.67): groß und gut lesbar, damit man ihn vorlesen oder abtippen kann */
.code-gross { font-size: 1.8rem; letter-spacing: .12em; font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-all; }