/* ===========================================================================
   Dashboard 3D-Baustelle -- Gestaltung

   Gleiche Farbwelt wie 3d-baustelle.de: dunkles Blaugrau, Orange #ff6600,
   Schrift Roboto (liegt auf dem eigenen Server).

   Aufbau dieser Datei:
     1. Farben und Masse (alles an einer Stelle)
     2. Grundgeruest: Seitenleiste mit den zwei Menues, Kopf, Inhalt
     3. Zeitraum- und Filterleiste
     4. Karten (die Kaesten), Kennzahl-Kacheln, Erklaerkaesten
     5. Diagramme, Tabellen, Listen
     6. Einzelne Seiten (Einzelbesuche, Ampel, Server ...)
     7. Handy
   =========================================================================== */

/* 1. Farben und Masse ------------------------------------------------------ */
:root {
  color-scheme: dark;

  --seite:      #10141c;   /* Hintergrund der Seite (wie die Unterseiten der Website) */
  --leiste:     #0c0f15;   /* Seitenleiste */
  --flaeche:    #1a1f2b;   /* Karten -- auch die Flaeche, auf der Diagramme liegen */
  --flaeche-2:  #222838;   /* Knoepfe, Eingabefelder, Hover */
  --flaeche-3:  #2b3245;
  --rahmen:     #2a3245;
  --linie:      #252c3b;   /* Gitterlinien in Diagrammen */
  --achse:      #3a4255;   /* Grundlinie in Diagrammen */

  --text:       #f1f1f1;
  --text-2:     #c8cdd8;
  --text-3:     #9aa3b2;   /* leise: Achsen, Beschriftungen */

  --orange:       #ff6600; /* Hausfarbe: aktive Knoepfe, Markierungen */
  --orange-tief:  #e45b00;
  --orange-hauch: rgba(255, 102, 0, 0.10);
  --orange-rand:  rgba(255, 102, 0, 0.38);

  /* Datenfarben -- geprueft mit dem Farbpruefer (auch bei Farbschwaeche
     unterscheidbar, Kontrast >= 3:1 auf --flaeche). Reihenfolge NICHT
     aendern, sie ist Teil der Pruefung. */
  --s1: #d95926;   /* Orange */
  --s2: #3987e5;   /* Blau */
  --s3: #199e70;   /* Tuerkis */
  --s4: #c98500;   /* Gelb */
  --s5: #d55181;   /* Magenta */
  --s6: #008300;   /* Gruen */
  --s7: #9085e9;   /* Violett */
  --s8: #e66767;   /* Rot */
  --vergleich: #5f687b;    /* Vergleichszeitraum: bewusst zurueckhaltendes Grau */

  /* Ampel -- nur fuer "gut/achtung/problem", nie fuer Datenreihen */
  --gut:      #0ca30c;
  --achtung:  #fab219;
  --ernst:    #ec835a;
  --problem:  #d03b3b;

  --schrift: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --radius: 10px;
  --abstand: 20px;
  --leiste-breite: 256px;
}

* { box-sizing: border-box; }

/* hidden muss immer gewinnen, auch gegen display-Angaben weiter unten */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--seite);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--orange); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
p { margin: 0; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* 2. Grundgeruest ------------------------------------------------------------ */
.rahmen { display: flex; min-height: 100vh; }

.seitenleiste {
  position: sticky; top: 0; align-self: flex-start;
  width: var(--leiste-breite); flex: 0 0 var(--leiste-breite);
  height: 100vh; overflow-y: auto;
  background: var(--leiste);
  border-right: 1px solid var(--rahmen);
  padding: 22px 16px 24px;
  display: flex; flex-direction: column; gap: 22px;
}

.marke { display: block; padding: 2px 8px 0; text-decoration: none; }
.marke img { display: block; width: 100%; max-width: 196px; height: auto; }
.marke__unter {
  display: block; margin-top: 8px;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); font-weight: 700;
}

.menue { display: flex; flex-direction: column; gap: 20px; }

.menue__gruppe {
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 12px 8px 8px;
  background: rgba(255, 255, 255, 0.015);
}
.menue__gruppe--aktiv { border-color: var(--orange-rand); background: var(--orange-hauch); }

.menue__titel {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rahmen);
}
.menue__symbol {
  flex: 0 0 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--flaeche-2); color: var(--orange);
}
.menue__symbol svg { width: 18px; height: 18px; }
.menue__titel strong { display: block; font-size: 15px; }
.menue__titel small { display: block; font-size: 12px; color: var(--text-3); line-height: 1.3; }

.menue a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; margin: 1px 0;
  border-radius: 7px;
  color: var(--text-2); text-decoration: none; font-size: 14px;
}
.menue a:hover { background: var(--flaeche-2); color: var(--text); }
.menue a[aria-current="page"] { background: var(--flaeche-3); color: var(--text); font-weight: 500; box-shadow: inset 3px 0 0 var(--orange); }
.menue a .bald { font-size: 11px; color: var(--text-3); border: 1px solid var(--rahmen); border-radius: 99px; padding: 0 7px; }

.menue__unten { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }

.hauptbereich { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: rgba(16, 20, 28, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rahmen);
  padding: 14px var(--abstand) 12px;
}
.kopf__zeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kopf__menueknopf {
  display: none;
  border: 1px solid var(--rahmen); background: var(--flaeche-2); border-radius: 8px;
  padding: 6px 10px; cursor: pointer;
}
.kopf__titel { flex: 1 1 auto; min-width: 0; }
.kopf__titel small { display: block; font-size: 12px; color: var(--orange); letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.kopf__titel h1 { font-size: 22px; }
.kopf__titel p { color: var(--text-3); font-size: 13.5px; margin-top: 2px; }

.live {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--rahmen); border-radius: 99px;
  padding: 5px 12px; font-size: 13px; color: var(--text-2);
  background: var(--flaeche); cursor: help;
}
.live__punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.live--an .live__punkt { background: var(--gut); box-shadow: 0 0 0 0 rgba(12, 163, 12, 0.6); animation: puls 2s infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(12, 163, 12, .55); } 70% { box-shadow: 0 0 0 8px rgba(12, 163, 12, 0); } 100% { box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); } }
@media (prefers-reduced-motion: reduce) { .live--an .live__punkt { animation: none; } }

.hinweisbalken {
  margin: 12px var(--abstand) 0; padding: 10px 14px;
  border: 1px solid var(--orange-rand); background: var(--orange-hauch);
  border-radius: var(--radius); font-size: 14px; color: var(--text-2);
}

main { padding: 18px var(--abstand) 48px; }

/* 3. Zeitraum- und Filterleiste --------------------------------------------- */
.filterleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }

.umschalter {
  display: inline-flex; border: 1px solid var(--rahmen); border-radius: 9px; overflow: hidden; background: var(--flaeche);
}
.umschalter button {
  border: 0; background: transparent; padding: 7px 13px; cursor: pointer; color: var(--text-2); font-size: 14px;
  border-right: 1px solid var(--rahmen);
}
.umschalter button:last-child { border-right: 0; }
.umschalter button:hover { background: var(--flaeche-2); color: var(--text); }
.umschalter button[aria-pressed="true"] { background: var(--orange); color: #fff; font-weight: 600; }

.blaettern { display: inline-flex; align-items: center; gap: 6px; }
.blaettern button {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rahmen);
  background: var(--flaeche); cursor: pointer; font-size: 18px; line-height: 1;
}
.blaettern button:hover:not(:disabled) { background: var(--flaeche-2); }
.blaettern button:disabled { opacity: .35; cursor: default; }
.blaettern__text { min-width: 210px; text-align: center; font-weight: 500; font-size: 14.5px; }

.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rahmen); background: var(--flaeche); color: var(--text-2);
  border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 14px; text-decoration: none;
}
.knopf:hover { background: var(--flaeche-2); color: var(--text); }
.knopf--haupt { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.knopf--haupt:hover { background: var(--orange-tief); color: #fff; }
.knopf--klein { padding: 4px 9px; font-size: 13px; }

.schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; user-select: none; }
.schalter input { appearance: none; width: 36px; height: 20px; border-radius: 99px; background: var(--flaeche-3); position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.schalter input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.schalter input:checked { background: var(--orange); }
.schalter input:checked::after { transform: translateX(16px); }

.freier-zeitraum { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.freier-zeitraum input[type="date"] {
  background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 8px; padding: 5px 8px; color-scheme: dark;
}

.filterchips { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.filterchips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--orange-rand); background: var(--orange-hauch);
  border-radius: 99px; padding: 4px 6px 4px 12px; font-size: 13.5px;
}
.chip button { border: 0; background: var(--flaeche-3); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; }

/* 4. Karten -------------------------------------------------------------------- */
.stapel { display: flex; flex-direction: column; gap: var(--abstand); min-width: 0; }
.raster { display: grid; gap: var(--abstand); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.b-12 { grid-column: span 12; } .b-8 { grid-column: span 8; } .b-6 { grid-column: span 6; }
.b-4 { grid-column: span 4; } .b-3 { grid-column: span 3; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  min-width: 0;
  transition: opacity .2s;
}
.laedt .karte { opacity: .55; }

.karte__kopf { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.karte__titel { font-size: 16.5px; }
.karte__kurz { color: var(--text-3); font-size: 13.5px; margin-top: 3px; }
.karte__fuss { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linie); }
.karte__fuss .leise { font-size: 12.5px; }

.hilfe-knopf {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--rahmen); background: var(--flaeche-2); color: var(--text-2);
  cursor: pointer; font-weight: 700; font-size: 14px; line-height: 1;
}
.hilfe-knopf:hover, .hilfe-knopf[aria-expanded="true"] { border-color: var(--orange); color: var(--orange); background: var(--orange-hauch); }

.erklaerung {
  margin: -4px 0 16px; padding: 14px 16px;
  border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0;
  background: #151a24; font-size: 14px; color: var(--text-2);
  display: grid; gap: 12px 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.erklaerung[hidden] { display: none; }
.erklaerung h4 { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 2px; font-weight: 700; }
.erklaerung p { line-height: 1.55; }
.erklaerung__beispiel { background: rgba(255, 255, 255, 0.03); border-radius: 6px; padding: 8px 10px; }

.leise { color: var(--text-3); }
.klein { font-size: 13px; }

/* Zusammenfassung */
.zusammenfassung { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.zusammenfassung li { position: relative; padding-left: 20px; font-size: 15.5px; color: var(--text); line-height: 1.5; }
.zusammenfassung li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

/* Kennzahl-Kacheln */
.kacheln { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kachel {
  position: relative; text-align: left;
  border: 1px solid var(--rahmen); background: var(--flaeche); border-radius: var(--radius);
  padding: 14px 14px 10px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.kachel--waehlbar { cursor: pointer; }
.kachel--waehlbar:hover { border-color: #3c4660; }
.kachel--gewaehlt { border-color: var(--orange); box-shadow: inset 0 3px 0 var(--orange); }
.kachel__name { font-size: 13.5px; color: var(--text-2); padding-right: 30px; }
.kachel__zahl { font-size: 30px; font-weight: 600; line-height: 1.15; margin-top: 2px; letter-spacing: -.5px; }
.kachel__zahl small { font-size: 15px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.kachel__vergleich { font-size: 12.5px; color: var(--text-3); min-height: 1.5em; }
.kachel__vergleich .pfeil { font-weight: 700; }
.pfeil--gut { color: var(--gut); }
.pfeil--schlecht { color: var(--problem); }
.pfeil--neutral { color: var(--text-3); }
.kachel .hilfe-knopf { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; font-size: 12.5px; }
.kachel__linie { margin-top: 6px; height: 30px; }
.kachel__zahl--lang { font-size: 22px; line-height: 1.35; }
.kachel-erklaerung { background: var(--flaeche); border: 1px solid var(--orange-rand); border-radius: var(--radius); padding: 14px 18px 16px; }
.kachel-erklaerung__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.kachel-erklaerung__kopf h3 { font-size: 15.5px; }
.kachel-erklaerung .erklaerung { margin: 0; }

/* 5. Diagramme -------------------------------------------------------------------- */
.diagramm { position: relative; width: 100%; }
.diagramm svg { display: block; width: 100%; overflow: visible; }
.diagramm text { fill: var(--text-3); font-family: var(--schrift); font-size: 12px; }
.diagramm .gitter { stroke: var(--linie); stroke-width: 1; }
.diagramm .grundlinie { stroke: var(--achse); stroke-width: 1; }
.diagramm .fadenkreuz { stroke: var(--text-3); stroke-width: 1; pointer-events: none; }
.diagramm .leer-hinweis { fill: var(--text-3); font-size: 14px; }

.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; font-size: 13px; color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: 7px; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.legende i.strich { height: 3px; width: 16px; border-radius: 2px; }

.tooltip {
  position: fixed; z-index: 100; pointer-events: none;
  background: #0b0e14; border: 1px solid var(--rahmen); border-radius: 8px;
  padding: 8px 11px; font-size: 13px; color: var(--text-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); max-width: 300px;
}
.tooltip[hidden] { display: none; }
.tooltip__titel { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.tooltip__zeile { display: flex; align-items: center; gap: 8px; }
.tooltip__zeile b { color: var(--text); font-weight: 600; }
.tooltip__strich { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }

/* Ranglisten mit Balken dahinter */
.liste { display: flex; flex-direction: column; gap: 3px; }
.liste__kopf { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); padding: 0 10px 4px; text-transform: uppercase; letter-spacing: 1px; }
.zeile {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 6px 10px; border-radius: 6px; overflow: hidden;
  border: 0; background: transparent; width: 100%; text-align: left;
}
.zeile--klickbar { cursor: pointer; }
.zeile--klickbar:hover { background: var(--flaeche-2); }
.zeile__balken { position: absolute; left: 0; top: 2px; bottom: 2px; background: rgba(217, 89, 38, 0.20); border-radius: 0 6px 6px 0; z-index: 0; }
.zeile__name { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.zeile__name small { display: block; color: var(--text-3); font-size: 12.5px; }
.zeile__wert { position: relative; z-index: 1; flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.zeile__anteil { position: relative; z-index: 1; flex: 0 0 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-3); font-size: 13px; }

.leer { color: var(--text-3); font-size: 14px; padding: 18px 4px; text-align: center; }

/* Tabellen */
.tabelle-huelle { overflow-x: auto; margin: 0 -4px; }
table.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th { text-align: left; font-weight: 500; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .8px; padding: 8px 8px; border-bottom: 1px solid var(--rahmen); white-space: nowrap; }
.tabelle td { padding: 8px 8px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tr.gedimmt td { opacity: .5; }

.marke-text {
  display: inline-block; font-size: 11.5px; border-radius: 99px; padding: 1px 8px;
  border: 1px solid var(--rahmen); color: var(--text-2); white-space: nowrap;
}
.marke-text--orange { border-color: var(--orange-rand); color: #ffb380; background: var(--orange-hauch); }
.marke-text--gruen { border-color: rgba(12, 163, 12, .5); color: #7ee07e; }

/* Ampel */
.ampel { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ampel__eintrag { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #151a24; border: 1px solid var(--linie); }
.ampel__symbol { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #0b0e14; }
.ampel__symbol--gut { background: var(--gut); }
.ampel__symbol--achtung { background: var(--achtung); }
.ampel__symbol--problem { background: var(--problem); color: #fff; }
.ampel__symbol--unbekannt { background: var(--flaeche-3); color: var(--text-2); }
.ampel__titel { font-weight: 600; font-size: 14px; }
.ampel__text { color: var(--text-3); font-size: 13px; }

/* Trichter */
.trichter { display: flex; flex-direction: column; gap: 6px; }
.trichter__stufe { display: grid; grid-template-columns: minmax(130px, 200px) 1fr auto; gap: 12px; align-items: center; }
.trichter__name { font-size: 14px; }
.trichter__bahn { height: 24px; position: relative; }
.trichter__balken { height: 24px; border-radius: 0 4px 4px 0; min-width: 2px; }
.trichter__zahl { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; }
.trichter__schritt { padding-left: calc(min(200px, 30%) + 12px); font-size: 12.5px; color: var(--text-3); }

/* Anteilsbalken */
.anteile { display: flex; height: 26px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--flaeche); }
.anteile > div { min-width: 2px; }

/* Meter */
.meter { height: 10px; border-radius: 99px; background: rgba(57, 135, 229, 0.18); overflow: hidden; }
.meter > div { height: 100%; border-radius: 99px; background: var(--s2); }
.meter--achtung > div { background: var(--achtung); }
.meter--problem > div { background: var(--problem); }

/* Waermebild */
.waermebild { display: grid; gap: 2px; font-size: 11.5px; color: var(--text-3); }
.waermebild__zelle { border-radius: 3px; aspect-ratio: 1.6 / 1; min-height: 14px; }

/* 6. Einzelne Seiten ------------------------------------------------------------- */
.besuch {
  border: 1px solid var(--rahmen); border-radius: var(--radius); background: var(--flaeche);
  padding: 14px 16px; display: grid; gap: 10px;
}
.besuch--eigen { opacity: .65; }
.besuch__kopf { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.besuch__zeit { font-weight: 600; font-size: 15px; }
.besuch__merkmal { color: var(--text-2); font-size: 13.5px; display: inline-flex; gap: 6px; align-items: center; }
.besuch__merkmal svg { width: 15px; height: 15px; opacity: .8; }
.besuch__weg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seitenchip { border: 1px solid var(--rahmen); border-radius: 7px; padding: 4px 9px; font-size: 13px; background: var(--flaeche-2); }
.seitenchip small { color: var(--text-3); margin-left: 5px; }
.weg-pfeil { color: var(--text-3); }
.ereignischip { border-radius: 7px; padding: 4px 9px; font-size: 13px; background: var(--orange-hauch); border: 1px solid var(--orange-rand); color: #ffc299; }

.notizen-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.notiz { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--text-2); }
.notiz__punkt { flex: 0 0 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.notiz button { margin-left: auto; }
.notiz-formular { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.notiz-formular input { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 8px; padding: 6px 9px; color-scheme: dark; }
.notiz-formular input[type="text"] { flex: 1 1 220px; }

.anleitung { counter-reset: schritt; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.anleitung li { counter-increment: schritt; position: relative; padding-left: 38px; color: var(--text-2); font-size: 14px; }
.anleitung li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; border-radius: 50%; background: var(--flaeche-3); display: grid; place-items: center; font-weight: 700; color: var(--orange); font-size: 13px; }
code { background: var(--flaeche-2); border: 1px solid var(--rahmen); border-radius: 5px; padding: 1px 6px; font-size: 13px; overflow-wrap: anywhere; }

.begriffe { columns: 2 380px; column-gap: var(--abstand); }
.begriff { break-inside: avoid; margin-bottom: 14px; padding: 14px 16px; background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); }
.begriff h3 { font-size: 15.5px; margin-bottom: 4px; }
.begriff p { color: var(--text-2); font-size: 14px; }

.fehler-box { border: 1px solid rgba(208, 59, 59, .5); background: rgba(208, 59, 59, .08); border-radius: var(--radius); padding: 14px 16px; }

/* 7. Handy und schmale Fenster ---------------------------------------------------- */
@media (max-width: 1180px) {
  .b-8, .b-6, .b-4 { grid-column: span 12; }
  .b-3 { grid-column: span 6; }
}

@media (max-width: 1024px) {
  :root { --abstand: 14px; }
  .seitenleiste {
    position: fixed; left: 0; top: 0; z-index: 50; height: 100vh;
    transform: translateX(-102%); transition: transform .2s ease;
    box-shadow: 8px 0 30px rgba(0, 0, 0, .5);
  }
  .seitenleiste--offen { transform: none; }
  .schleier { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 40; }
  .schleier[hidden] { display: none; }
  .kopf__menueknopf { display: inline-flex; }
  .kopf__titel h1 { font-size: 19px; }
  .blaettern__text { min-width: 0; flex: 1 1 auto; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  /* Auf dem Handy wuerde der feste Kopf den halben Bildschirm belegen */
  .kopf { position: static; backdrop-filter: none; }
  .b-3 { grid-column: span 12; }
  .karte { padding: 14px 14px 12px; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kachel__zahl { font-size: 24px; }
  .umschalter { width: 100%; }
  .umschalter button { flex: 1 1 0; padding: 7px 4px; }
  .blaettern { width: 100%; }
  .trichter__stufe { grid-template-columns: 1fr auto; }
  .trichter__bahn { grid-column: 1 / -1; order: 3; }
  .trichter__schritt { padding-left: 0; }
  .live { padding: 4px 9px; font-size: 12.5px; }
}