/* RACE RESULT Timing BW Solutions - Einheits-Kit 1.4.9 (EINE Quelle: rr-solutions/static/kit/, ausgeliefert als /static/kit/kit.css).
   Tools binden es ein, kopieren es nicht. Alle Klassen tragen das Praefix rr-, damit sie neben alten Tool-Stilen nicht kollidieren.
   Referenz: Geraeteliste-Entwurf b68a65c (freigegeben 26.10.2026). Kopfleiste: Graphit, Strich 3 px #C41011; #A81815 ist der Akzent.
   Schrift: Rajdhani nur fuer Ueberschriften/Knoepfe/Zahlen, Fliesstext Systemschrift. Hell/Dunkel: prefers-color-scheme oder data-theme am <html>.
   Status immer Form + Farbe. Bedeutung: ROT = jetzt handeln, GELB = bald handeln, GRUEN = laeuft, KREIS (grau) = ruht/aus. Rollen/Typen sind neutral grau.
   Handy zuerst: Ziele >= 44 px, Text >= 14 px (Fliesstext 16), Kopf/Leisten beachten safe-area (PWA, display: standalone). */

@font-face { font-family: "Rajdhani"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-500.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-600.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/rajdhani-700.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --grund: #eef0f4; --flaeche: #fff; --flaeche-2: #f2f4f7; --linie: #dfdfdf; --linie-stark: #c8c8c8;
  --text: #2c2c2c; --text-2: #5f5f5f; --text-3: #666;
  --kopf: #2c2c2c; --kopf-text: #fff; --kopf-strich: #c41011;
  --akzent: #a81815; --akzent-hover: #c41011; --akzent-weich: #f7eceb; --akzent-flaeche: #a81815; --flaeche-hover: #c41011;
  --petrol: #007777;
  --rot: #b3201d; --rot-weich: #fdeeee;
  --gelb: #b26a00; --gelb-text: #8a5a00; --gelb-weich: #fbf0dc;
  --gruen: #157a3a; --gruen-weich: #e2f3e7;
  --grau: #7a7f87; --grau-weich: #eceef1;
  --fokus: #0b57d0; --schalter-aus: #6e6e6e;
  --schatten: 0 1px 2px rgb(0 0 0 / .06), 0 2px 8px rgb(0 0 0 / .05);
  --radius: 12px; --radius-m: 10px; --radius-klein: 6px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --schrift-kopf: "Rajdhani", "DIN Alternate", "Bahnschrift", system-ui, sans-serif;
  --kopf-hoehe: 50px; --inhalt-breite: 1380px; --rand: 16px;
  --fs-k: 13px;     /* kleinste Schrift: Desktop 13, Handy 14 */
  --h: 44px;        /* Werkzeugleiste: Chips, Segment, Suche, NEU */
  --h-btn: 40px;    /* Knoepfe in Zeilen; auf dem Handy 44 */
  --sa-u: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --grund: #121212; --flaeche: #1c1c1c; --flaeche-2: #242424; --linie: #2f2f2f; --linie-stark: #3d3d3d;
  --text: #ededed; --text-2: #b0b0b0; --text-3: #8c8c8c; --kopf: #222;
  --akzent: #ff7a80; --akzent-hover: #ff9a9e; --akzent-weich: #3a1c1e; --akzent-flaeche: #c8302f; --flaeche-hover: #d63a38;
  --petrol: #5fd3d3; --rot: #ff7a80; --rot-weich: #3a1517; --gelb: #e6a640; --gelb-text: #e6a640; --gelb-weich: #2b2110;
  --gruen: #45c374; --gruen-weich: #11271a; --grau: #8d939c; --grau-weich: #2a2c30;
  --fokus: #8ab4ff; --schalter-aus: #8a8a8a; --schatten: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark; } }
:root[data-theme="dark"] {
  --grund: #121212; --flaeche: #1c1c1c; --flaeche-2: #242424; --linie: #2f2f2f; --linie-stark: #3d3d3d;
  --text: #ededed; --text-2: #b0b0b0; --text-3: #8c8c8c; --kopf: #222;
  --akzent: #ff7a80; --akzent-hover: #ff9a9e; --akzent-weich: #3a1c1e; --akzent-flaeche: #c8302f; --flaeche-hover: #d63a38;
  --petrol: #5fd3d3; --rot: #ff7a80; --rot-weich: #3a1517; --gelb: #e6a640; --gelb-text: #e6a640; --gelb-weich: #2b2110;
  --gruen: #45c374; --gruen-weich: #11271a; --grau: #8d939c; --grau-weich: #2a2c30;
  --fokus: #8ab4ff; --schalter-aus: #8a8a8a; --schatten: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark;
}

/* ---- Grundlage (nur wirksam, wenn <body class="rr"> gesetzt ist).
   text-rendering: geometricPrecision = Subpixel-Positionierung; ohne sie rundet Chromium unter Linux jede Glyphenbreite auf ganze Pixel
   und es entstehen Luecken nach t/T ("PORT AL"). Gemessen auf Linux/Chromium: die Schriftdatei ist in Ordnung (Breiten und Abstaende normal,
   keine Hinting-Anweisungen); Formularelemente (button, summary, input) erben text-rendering NICHT, daher stand der Fehler weiter in
   Zeilen/Chips/Knoepfen. Behebung: text-rendering wird dort ausdruecklich geerbt (naechste Regel). */
.rr, .rr *, .rr *::before, .rr *::after { box-sizing: border-box; }
.rr { margin: 0; background: var(--grund); color: var(--text); font: 14px/1.35 var(--schrift); -webkit-text-size-adjust: 100%; text-rendering: geometricPrecision; -webkit-tap-highlight-color: transparent; }
:where(.rr) :is(button, input, select, textarea, summary) { font: inherit; color: inherit; text-rendering: inherit; letter-spacing: inherit; }
:where(.rr) button { cursor: pointer; }
.rr :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.rr-num { font-variant-numeric: tabular-nums; }
.rr-nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg.rr-i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
h1.rr-titel, h2.rr-titel { font: 700 1.3rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }

/* ---- Kopfleiste: Wortmarke, Trenner, Tool-Name, Reiter, Weg zum Portal, Aktionen. Erste Zeile bricht nie um (Titel kuerzt mit ...). */
.rr-kopf { display: block; background: var(--kopf); color: var(--kopf-text); border-bottom: 3px solid var(--kopf-strich); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px); }
.rr-kopf__in { max-width: var(--inhalt-breite); margin: 0 auto; min-height: var(--kopf-hoehe); display: flex; align-items: center; gap: 14px;
  padding-inline: max(var(--rand), env(safe-area-inset-left, 0px)) max(var(--rand), env(safe-area-inset-right, 0px)); }
.rr-kopf a { color: inherit; text-decoration: none; }
.rr-kopf__marke { display: flex; align-items: center; flex: none; border-radius: 4px; }
.rr-kopf__marke img { height: 22px; width: auto; display: block; }
.rr-kopf__trenner { width: 1px; height: 22px; background: rgb(255 255 255 / .28); flex: none; }
.rr-kopf__tool { font: 700 1.15rem var(--schrift-kopf); letter-spacing: .14em; text-transform: uppercase; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rr-kopf__nav { display: flex; gap: 2px; margin-left: 6px; min-width: 0; }
.rr-kopf__nav a { font: 600 1rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; color: rgb(255 255 255 / .86); white-space: nowrap; display: inline-flex; align-items: center; }
.rr-kopf__nav a:hover { background: rgb(255 255 255 / .12); color: #fff; }
.rr-kopf__nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 #e73331; border-radius: 0; }
.rr-kopf__sp { flex: 1; }
.rr-kopf__zurueck-m { display: none; place-items: center; width: 44px; height: 44px; margin-left: -4px; border-radius: 8px; flex: none; }
.rr-kopf__zurueck-m:hover { background: rgb(255 255 255 / .12); }
.rr-kopf__zurueck-m svg { width: 24px; height: 24px; stroke-width: 2.2; }
.rr-kopf__zurueck { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; font: 700 1rem var(--schrift-kopf); letter-spacing: .08em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.rr-kopf__zurueck:hover { background: rgb(255 255 255 / .12); }
.rr-ib { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid transparent; background: transparent; padding: 0; flex: none; }
.rr-kopf .rr-ib { color: #fff; } .rr-kopf .rr-ib:hover { background: rgb(255 255 255 / .12); }
.rr-kopf :focus-visible { outline-color: #fff; }
.rr-kopf__nutzer { font-size: var(--fs-k); color: rgb(255 255 255 / .8); white-space: nowrap; }
.rr-inhalt { max-width: var(--inhalt-breite); margin: 0 auto; padding: 16px max(var(--rand), env(safe-area-inset-right, 0px)) calc(40px + var(--sa-u)) max(var(--rand), env(safe-area-inset-left, 0px)); }
.rr-fuss { max-width: var(--inhalt-breite); margin: 0 auto; padding: 0 var(--rand) calc(24px + var(--sa-u)); color: var(--text-3); font-size: var(--fs-k); }

/* ---- Werkzeugleiste: IMMER eine Reihe, nie Umbruch.
   Chips = nur Symbol + Zahl (hoechstens 4, Chips mit 0 entfallen, kein "Alle"-Chip), Segment hoechstens 3, NEU = 44-px-Symbolknopf neben der Suche.
   Handy: Segment wird ein Wechselknopf (zeigt die Auswahl, Tippen schaltet weiter), Suche ein 44-px-Symbol (Tippen oeffnet das Feld ueber die ganze Leiste),
   NEU wandert als runder Knopf in die Daumenzone unten rechts. */
.rr-tools { position: relative; display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-bottom: 12px; min-width: 0; }
.rr-tools__sp { flex: 1 1 0; min-width: 0; }
.rr-stat { display: flex; gap: 6px; flex: 0 1 auto; min-width: 0; }
.rr-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); min-width: var(--h); padding: 0 12px 0 10px; border-radius: calc(var(--h) / 2); background: var(--flaeche); border: 1.5px solid var(--linie-stark); font: 700 1.1rem var(--schrift-kopf); flex: 0 1 auto; }
.rr-chip[aria-pressed="true"] { background: var(--text); color: var(--flaeche); border-color: var(--text); }
.rr-chip svg { width: 20px; height: 20px; flex: none; }
.rr-chip[data-n="0"]:not([aria-pressed="true"]) { display: none; }
.rr-seg { display: inline-flex; position: relative; border-radius: var(--radius-m); overflow: hidden; background: var(--flaeche); flex: none; }
.rr-seg::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--linie-stark); border-radius: inherit; pointer-events: none; }
.rr-seg button { height: var(--h); min-width: 44px; padding: 0 12px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 1rem var(--schrift-kopf); letter-spacing: .04em; white-space: nowrap; }
.rr-seg button + button { border-left: 1.5px solid var(--linie-stark); }
.rr-seg button[aria-pressed="true"] { background: var(--akzent-flaeche); color: #fff; }
.rr-seg .c { opacity: .8; font-weight: 600; font-variant-numeric: tabular-nums; }
.rr-such { display: flex; align-items: center; gap: 6px; height: var(--h); padding: 0 10px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-m); background: var(--flaeche); width: 240px; flex: 0 1 240px; min-width: 0; }
.rr-such input { border: 0; background: transparent; outline: 0; min-width: 0; width: 100%; height: 100%; font-size: 1rem; -webkit-appearance: none; appearance: none; border-radius: 0; }
.rr-such input::-webkit-search-cancel-button, .rr-such input::-webkit-search-decoration, .rr-such input::-webkit-search-results-button { display: none; -webkit-appearance: none; }
.rr .rr-such input:focus, .rr .rr-such input:focus-visible { outline: 0; box-shadow: none; }
.rr-such input::placeholder { color: var(--text-2); opacity: 1; }
.rr-such:focus-within { outline: 0; border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.rr-such__zu { display: none; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); padding: 0; flex: none; }
.rr-such input:not(:placeholder-shown) ~ .rr-such__zu { display: grid; }
.rr-such__zu:hover { background: var(--flaeche-2); color: var(--text); }
.rr-neu { display: inline-grid; place-items: center; width: var(--h); height: var(--h); flex: none; padding: 0; border-radius: var(--radius-m); border: 1.5px solid var(--akzent-flaeche); background: var(--akzent-flaeche); color: #fff; }
.rr-neu:hover { background: var(--flaeche-hover); border-color: var(--flaeche-hover); }
.rr-neu svg { width: 22px; height: 22px; stroke-width: 2.2; }
/* Zaehler-Pille: zaehlt nur, filtert nicht (bewusst flach, ohne Rand) */
.rr-pille { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 10px; border-radius: 14px; background: var(--grau-weich); }
.rr-pille b { font: 700 1rem var(--schrift-kopf); } .rr-pille span { color: var(--text-2); font-size: var(--fs-k); }

/* ---- Knoepfe: Standard = Rand; Haupt = Akzent (einer je Ansicht/Zeile); Gefahr = roter Rand. Je Zeile hoechstens ein Hauptknopf + ein weiterer, Rest hinter "..." (.rr-mehr). */
.rr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-btn); padding: 0 16px; border-radius: var(--radius-m);
  border: 1.5px solid var(--linie-stark); background: var(--flaeche); font: 700 1.05rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--text); white-space: nowrap; }
.rr-btn:hover { border-color: var(--text-2); }
.rr-btn:active { transform: translateY(1px); }
.rr-btn--haupt { background: var(--akzent-flaeche); border-color: var(--akzent-flaeche); color: #fff; }
.rr-btn--haupt:hover { background: var(--flaeche-hover); border-color: var(--flaeche-hover); }
.rr-btn--gefahr { color: var(--rot); border-color: var(--rot); }
.rr-btn--gefahr:hover { background: var(--rot-weich); border-color: var(--rot); }
.rr-btn--icon { width: var(--h-btn); padding: 0; }
.rr-btn[disabled], .rr-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.rr-akt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* "..."-Menue = Overlay am Knopf: der Knopf bleibt als einziges Element in der Zeile (kein Layoutsprung), das Menue schwebt (position: fixed, kit.js setzt left/top
   unter bzw. ueber den Knopf und haelt es im Bild; schliesst bei Klick daneben, Esc, Scrollen, Groessenaenderung). */
.rr-mehr { display: block; flex: none; }
.rr-mehr > summary { list-style: none; } .rr-mehr > summary::-webkit-details-marker { display: none; }
.rr-mehr[open] > summary { background: var(--flaeche-2); border-color: var(--text-2); }
.rr-menue { position: fixed; z-index: 60; top: 0; left: 0; box-sizing: border-box; display: grid; gap: 6px; padding: 8px; min-width: 200px; max-width: calc(100vw - 16px);
  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius-m); box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.rr-mehr:not([open]) > .rr-menue { display: none; }
.rr-menue .rr-btn { justify-content: flex-start; width: 100%; }
.rr-datei { position: relative; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rr-datei input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }   /* unsichtbares Feld deckt Knopf und Namen ab: ganze Zeile ist das Ziel */
.rr-datei:focus-within .rr-btn { outline: 2px solid var(--fokus); outline-offset: 2px; }
.rr-datei__name { color: var(--text-2); }

/* ---- Liste: kompakte, aufklappbare Zeilen. Spalten je Liste per --spalten. Desktop: echte Spalten mit festen Breiten, ueberzaehliger Platz nach rechts (1fr-Leerspalte).
   Zeilenzellen: .rr-n Name (+small), .rr-mitte nur Desktop, .rr-k1/.rr-k2 bleiben auch auf dem Handy (Zeile 2), .rr-m nur Handy (Zeile 3, wichtigster Wert),
   .rr-w Grund (Wort nur bei rot/gelb, sonst leer). */
.rr-liste { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); overflow: clip; }
.rr-cols, .rr-zeile { display: grid; align-items: center; column-gap: 14px; grid-template-columns: var(--spalten, 30px minmax(0, 1fr) auto 30px); padding: 0 14px 0 12px; }
.rr-cols { height: 38px; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); font: 700 var(--fs-k) var(--schrift-kopf); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.rr-cols span { display: flex; gap: 5px; align-items: center; min-width: 0; white-space: nowrap; }
.rr-cols svg.rr-i { width: 15px; height: 15px; }
.rr-grp { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--flaeche-2); border-block: 1px solid var(--linie); font: 700 1.1rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; }
.rr-grp__rechts { margin-left: auto; display: flex; gap: 8px; }
.rr-dot { display: inline-flex; align-items: center; gap: 3px; font: 700 1rem var(--schrift-kopf); letter-spacing: 0; }
.rr-dot svg { width: 16px; height: 16px; }
.rr-eintrag { border-top: 1px solid var(--linie); position: relative; }
.rr-grp + .rr-eintrag { border-top: 0; }
.rr-eintrag::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sc, transparent); }
.rr-eintrag[data-status="rot"] { --sc: var(--rot); } .rr-eintrag[data-status="gelb"] { --sc: var(--gelb); }
.rr-eintrag[data-status="ok"] { --sc: var(--gruen); } .rr-eintrag[data-status="inaktiv"] { --sc: var(--grau); }
.rr-eintrag[data-status="rot"] > .rr-zeile { background: linear-gradient(90deg, var(--rot-weich), transparent 60%); }
.rr-eintrag[data-status="inaktiv"] .rr-n b { color: var(--text-2); }
.rr-zeile { width: 100%; min-height: 54px; border: 0; background: transparent; text-align: left; padding-block: 6px; color: inherit; text-decoration: none; }
a.rr-zeile { cursor: pointer; }
.rr-zeile:hover { background: var(--flaeche-2); }
.rr-n { min-width: 0; display: block; }
.rr-n b { font: 700 1.18rem var(--schrift-kopf); letter-spacing: .03em; display: block; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-n small { display: block; color: var(--text-3); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-mitte, .rr-k1, .rr-k2 { min-width: 0; }
.rr-mitte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
/* Titel und Kurzbeschreibungen: duerfen auf 2 Zeilen umbrechen, erst danach kommt die Kuerzung (Handy: alle Namen in Listen). */
.rr-2z { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; text-overflow: clip; min-width: 0; }
@media (max-width: 640px) {
  .rr-n b, .rr-n small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; text-overflow: clip; }
}
.rr-m { display: none; }
.rr-w { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-nil { color: var(--text-3); }
.rr-chev { justify-self: end; width: 18px; height: 18px; color: var(--text-2); transition: transform .2s; }
.rr-eintrag.rr-offen { background: var(--flaeche-2); }
.rr-eintrag.rr-offen::before { width: 6px; }
.rr-eintrag.rr-offen > .rr-zeile { background: transparent; }
.rr-eintrag.rr-offen .rr-chev { transform: rotate(180deg); }
.rr-det { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.rr-eintrag.rr-offen .rr-det { grid-template-rows: 1fr; }
.rr-det > div { overflow: hidden; min-height: 0; }
/* Aufklappzeile: Wertkacheln feste Breite (180) in einer Reihe, Aktionen rechtsbuendig in derselben Reihe */
.rr-det__rahmen { padding: 4px 18px 18px 56px; display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.rr-det__rahmen > .rr-akt { margin-left: auto; align-self: center; }
.rr-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 12px; flex: 1 1 100%; min-width: 0; }
.rr-box h3 { margin: 0 0 8px; font: 700 var(--fs-k) var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.rr-wert { display: flex; flex-direction: column; gap: 2px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 8px 10px; flex: 0 0 180px; min-width: 0; }
.rr-wert .l { display: flex; align-items: center; gap: 5px; color: var(--text-2); font: 700 var(--fs-k) var(--schrift-kopf); letter-spacing: .08em; text-transform: uppercase; }
.rr-wert .l svg.rr-i { width: 15px; height: 15px; }
.rr-wert .v { font: 700 1.45rem var(--schrift-kopf); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-wert .v small { font-size: var(--fs-k); font-weight: 600; color: var(--text-2); }
.rr-wert--rot .v { color: var(--rot); } .rr-wert--gelb .v { color: var(--gelb-text); } .rr-wert--ok .v { color: var(--gruen); }

/* Geraeteliste (Referenz b68a65c): Akku-Balken, Sparkline, Zeit, Netz/Drucker, Detail mit Verlauf */
.rr-akku { display: flex; align-items: center; gap: 8px; }
.rr-bar { margin-right: 5px; position: relative; width: 64px; height: 12px; border-radius: 3px; border: 1.5px solid var(--text-3); padding: 1px; flex: none; }
.rr-bar::after { content: ""; position: absolute; right: -5px; top: 2px; width: 3px; height: 4px; background: var(--text-3); border-radius: 0 2px 2px 0; }
.rr-bar i { display: block; min-width: 3px; height: 100%; border-radius: 1px; background: var(--bc); }
.rr-bar.k { --bc: var(--rot); } .rr-bar.g { --bc: var(--gelb); } .rr-bar.o { --bc: var(--gruen); }
.rr-akku b { font: 700 1.15rem var(--schrift-kopf); min-width: 2.6ch; text-align: right; }
.rr-akku .bolt { color: var(--gruen); width: 15px; height: 15px; }
.rr-spark { display: block; width: 100%; max-width: 104px; height: 30px; }
.rr-zu { font-weight: 600; white-space: nowrap; }
.rr-zu.g, .rr-t.g { color: var(--gelb-text); font-weight: 700; } .rr-zu.r, .rr-t.r { color: var(--rot); font-weight: 700; }
.rr-ok-i { color: var(--gruen); } .rr-schlecht-i { color: var(--rot); }
.rr-det__rahmen--geraet { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 22px; }
.rr-kach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rr-kach .rr-wert { flex: none; }
.rr-chart { display: block; width: 100%; height: auto; } .rr-chart--m { display: none; }
@media (max-width: 700px) { .rr-chart--d { display: none; } .rr-chart--m { display: block; } }
.rr-chart text { fill: var(--text-3); font: var(--fs-k) var(--schrift); }
.rr-det__unten { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 22px; align-items: start; }

/* ---- Status: nur Form + Farbe (Symbol aus icons.svg: s-rot Raute, s-gelb Dreieck, s-ok Haken-Kreis, s-inaktiv gestrichelter Kreis) */
.rr-st { width: 24px; height: 24px; display: block; }
.rr-wort-rot { color: var(--rot); font-weight: 700; } .rr-wort-gelb { color: var(--gelb-text); font-weight: 700; }
.rr-rolle { color: var(--text-2); font-weight: 600; }

/* ---- Formulare */
.rr-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rr-feld > label { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rr-feld input:not([type=checkbox], [type=file]), .rr-feld select, .rr-feld textarea { height: var(--h-btn); padding: 0 12px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-m); background: var(--flaeche); width: 100%; font-size: 1rem; }
.rr-feld textarea { height: auto; padding: 10px 12px; }
.rr-feld input:hover, .rr-feld select:hover { border-color: var(--text-3); }
.rr-feld[data-fehler] input { border-color: var(--rot); }
.rr-feld__fehler { display: flex; gap: 6px; align-items: center; color: var(--rot); font-weight: 600; }
.rr-feld__fehler .rr-st { width: 18px; height: 18px; flex: none; }
.rr-schalt { display: flex; gap: 12px; align-items: center; min-height: 44px; }
.rr-schalter { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.rr-schalter input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.rr-schalter__bahn { position: absolute; inset: 0; border-radius: 13px; background: var(--schalter-aus); transition: background .15s; }
.rr-schalter__bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.rr-schalter input:checked + .rr-schalter__bahn { background: var(--gruen); }
.rr-schalter input:checked + .rr-schalter__bahn::after { transform: translateX(20px); }
.rr-schalter input:focus-visible + .rr-schalter__bahn { outline: 2px solid var(--fokus); outline-offset: 2px; }
.rr-schalter input:disabled + .rr-schalter__bahn { opacity: .45; }

/* ---- Meldungen, Karten, Leer-/Fehlerzustand */
.rr-meldung { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--sc); background: var(--bg); }
.rr-meldung svg { color: var(--sc); margin-top: 1px; flex: none; }
.rr-meldung svg.rr-st { width: 20px; height: 20px; margin-top: 0; }
.rr-meldung time { margin-left: auto; color: var(--text-2); white-space: nowrap; }
.rr-meldung--fehler { --sc: var(--rot); --bg: var(--rot-weich); } .rr-meldung--ok { --sc: var(--gruen); --bg: var(--gruen-weich); } .rr-meldung--warn { --sc: var(--gelb); --bg: var(--gelb-weich); }
.rr-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px; }
.rr-karte--bild { padding: 0; overflow: clip; margin-top: 12px; }
.rr-leer { display: grid; justify-items: center; gap: 12px; padding: 40px 16px; text-align: center; color: var(--text-2); }
.rr-leer > svg.rr-i { width: 48px; height: 48px; stroke-width: 1.4; color: var(--text-3); }
.rr-leer h2 { margin: 0; font: 700 1.2rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.rr-leer > svg.rr-st { width: 48px; height: 48px; }

/* ---- Dialog + Info (ⓘ): Erklaerung nur hier, kurz und bildhaft */
.rr-ov { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 50; display: grid; place-items: center; padding: 16px; }
.rr-ov[hidden] { display: none; }
.rr-ov > div { background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: 14px; max-width: 520px; width: 100%; padding: 16px 18px; max-height: 90vh; overflow: auto; }
.rr-ov h2 { margin: 0 0 12px; font: 700 1.2rem var(--schrift-kopf); letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; }
.rr-ov h2 .rr-ib { margin-left: auto; border-color: var(--linie-stark); }
.rr-ov__fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.rr-leg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rr-leg > div { display: flex; gap: 10px; align-items: center; border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 8px 10px; }
.rr-leg b { font: 700 1.05rem var(--schrift-kopf); display: block; line-height: 1.1; } .rr-leg small { color: var(--text-2); font-size: var(--fs-k); }
.rr-info { color: var(--text-2); border: 0; background: transparent; width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; padding: 0; flex: none; }
.rr-info:hover { color: var(--text); background: var(--flaeche-2); }
.rr-info svg { width: 20px; height: 20px; }

/* ---- Zeile als Link (Portal-Start): ganze Zeile fuehrt ins Werkzeug, ⓘ (Anleitung) sitzt am Zeilenende und oeffnet nichts anderes */
.rr-eintrag--link > .rr-info { position: absolute; right: 8px; top: 9px; z-index: 2; width: 44px; height: 44px; }
.rr-zeile--link { padding-right: 62px; }
.rr-zeile--link .rr-chev { transform: none; }
.rr-n--sym { display: flex; align-items: center; gap: 12px; }
.rr-n--sym > span:last-child { min-width: 0; }
.rr-tool-sym { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); display: grid; place-items: center; color: var(--text); }
.rr-tool-sym svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rr-eintrag[data-status="inaktiv"] .rr-tool-sym { color: var(--text-3); border-style: dashed; }
.rr-eintrag--link .rr-zeile { min-height: 64px; }

/* ---- Schmal (unter 1100): keine Spaltenkoepfe; Name + Grund oben, Kernwerte (.rr-k1/.rr-k2) in Zeile 2, wichtigster Wert (.rr-m) in Zeile 3 */
@media (max-width: 1100px) {
  .rr-cols { display: none; }
  .rr-zeile { grid-template-columns: 30px minmax(0, 1fr) auto 26px !important; grid-template-areas: "st n w c" "st k1 k2 k2" "st m m m"; column-gap: 12px; row-gap: 0; padding-block: 10px; align-items: center; }
  .rr-zeile > :first-child { grid-area: st; align-self: start; margin-top: 2px; }
  .rr-zeile > .rr-n { grid-area: n; } .rr-zeile > .rr-w { grid-area: w; text-align: right; } .rr-zeile > .rr-chev { grid-area: c; }
  .rr-zeile > .rr-k1 { grid-area: k1; margin-top: 6px; } .rr-zeile > .rr-k2 { grid-area: k2; margin-top: 6px; min-width: 0; }
  .rr-mitte { display: none; }
  .rr-m { display: flex; grid-area: m; gap: 6px 10px; align-items: center; margin-top: 4px; color: var(--text-2); font-size: var(--fs-k); min-width: 0; flex-wrap: wrap; }
  .rr-zeile--link { grid-template-columns: 30px minmax(0, 1fr) auto !important; grid-template-areas: "st n w" "st k1 k2" "st m m"; }
  .rr-zeile--link > .rr-chev { display: none; }
  .rr-det__rahmen--geraet { grid-template-columns: 1fr; padding: 4px 14px 16px 16px; }
}
@media (max-width: 800px) { .rr-det__rahmen--geraet .rr-kach { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Handy (<= 560): Ziele 44, Text >= 14 (Fliesstext 16), Daumenzone unten, safe-area */
@media (max-width: 560px) { :root { --fs-k: 14px; } }
@media (max-width: 560px), (pointer: coarse) { :root { --h-btn: 44px; } .rr-ib { width: 44px; height: 44px; } .rr-info { width: 44px; height: 44px; } }
@media (max-width: 560px) {
  .rr { font-size: 16px; }
  .rr-kopf__in { gap: 6px; flex-wrap: wrap; row-gap: 0; padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .rr-kopf__marke { height: 50px; padding-left: 6px; }
  .rr-kopf__marke img { height: 18px; }
  .rr-kopf__trenner, .rr-kopf__sp, .rr-kopf__nutzer, .rr-kopf__zurueck span { display: none; }
  .rr-kopf__tool { flex: 1 1 0; font-size: 1rem; letter-spacing: .05em; padding-left: 4px; }
  .rr-kopf__zurueck { display: none; }
  .rr-kopf__zurueck-m { display: grid; }
  .rr-kopf__marke { padding-left: 0; }
  .rr-kopf__nav { order: 9; flex: 1 0 100%; margin: 0 -2px; overflow-x: auto; scrollbar-width: none; }
  .rr-kopf__nav a { min-height: 44px; padding: 6px 8px; font-size: 1rem; letter-spacing: .03em; flex: 1 1 auto; justify-content: center; }
  .rr-kopf__nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #e73331; }
  .rr-inhalt { padding-bottom: calc(96px + var(--sa-u)); padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px)); }
  /* Werkzeugleiste: Chips | Wechselknopf | Suche-Symbol */
  .rr-tools { gap: 6px; }
  .rr-tools__sp { display: none; }
  .rr-stat { gap: 4px; } .rr-chip { padding: 0 7px 0 6px; gap: 3px; min-width: 44px; } .rr-chip svg { width: 18px; height: 18px; }
  .rr-seg { margin-left: auto; }
  .rr-seg { border: 1.5px solid var(--linie-stark); overflow: visible; }
  .rr-seg::after { display: none; }
  .rr-seg button:not([aria-pressed="true"]) { display: none; }
  .rr-seg button[aria-pressed="true"] { padding: 0 10px 0 12px; gap: 6px; background: transparent; color: var(--text); border-radius: inherit; }
  .rr-seg button[aria-pressed="true"]::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: translateY(-2px) rotate(45deg); margin-left: 2px; }
  .rr-seg button[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
  .rr-seg .rr-seg__t { display: none; }
  .rr-seg .c { opacity: 1; font-weight: 700; }
  .rr-such { width: var(--h); flex: none; padding: 0; justify-content: center; cursor: pointer; margin-left: auto; }
  .rr-seg ~ .rr-such { margin-left: 0; }
  .rr-such input { display: none; }
  .rr-tools.rr-sucht > :not(.rr-such) { display: none; }
  .rr-tools.rr-sucht .rr-such { flex: 1 1 auto; width: auto; padding: 0 4px 0 12px; justify-content: flex-start; margin-left: 0; cursor: text; }
  .rr-tools.rr-sucht .rr-such input { display: block; }
  .rr-tools.rr-sucht .rr-such__zu { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; margin-left: auto; flex: none; }
  .rr-neu { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + var(--sa-u)); width: 56px; height: 56px; border-radius: 50%; z-index: 15; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }
  .rr-neu svg { width: 26px; height: 26px; }
  .rr-tools.rr-sucht .rr-neu { display: none; }
  /* Liste */
  .rr-n small { font-size: var(--fs-k); } .rr-n b { font-size: 1.25rem; }
  .rr-zeile { grid-template-columns: 26px minmax(0, 1fr) auto 26px !important; }
  .rr-zeile--link { grid-template-columns: 26px minmax(0, 1fr) auto !important; }
  .rr-w { font-size: 1rem; }
  .rr-grp { padding: 10px 12px; }
  .rr-det__rahmen { padding: 4px 14px 16px 16px; gap: 8px; }
  .rr-wert { flex: 1 1 calc(50% - 4px); } .rr-wert .l { font-size: var(--fs-k); }
  .rr-det__rahmen > .rr-akt { margin-left: 0; width: 100%; }
  .rr-det__rahmen > .rr-akt > .rr-btn, .rr-det__rahmen > .rr-akt > form > .rr-btn { flex: 1 1 0; }
  .rr-det__rahmen > .rr-akt > .rr-btn--haupt { flex: 3 1 0; }
  .rr-det__rahmen > .rr-akt > .rr-btn--icon, .rr-det__rahmen > .rr-akt > .rr-mehr { flex: 0 0 44px; }
  .rr-btn { font-size: 1.1rem; }
  .rr-akt > .rr-btn { padding: 0 10px; letter-spacing: .03em; }
  .rr-w { max-width: 11em; }
  .rr-leg { grid-template-columns: 1fr; }
  .rr-ov { place-items: end center; padding: 0; } .rr-ov > div { border-radius: 14px 14px 0 0; max-width: none; padding-bottom: calc(18px + var(--sa-u)); }
  .rr-kach { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-datei { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rr-det, .rr-chev, .rr-schalter__bahn, .rr-schalter__bahn::after { transition: none; } }

/* ---- Anleitung (gemeinsamer Rahmen aller Bildanleitungen): Kapitel untereinander, alle offen, KEINE Sprung-Chips, KEIN Auf-/Zuklappen.
   Je Kapitel Bild (hoechstens 480 px breit) + 3 nummerierte Schritte, daneben gross. Nummer = Reihenfolge (kein Status). */
.rr-kapitel { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); margin-bottom: 12px; overflow: visible; }
.rr-kapitel > h2 { display: flex; align-items: center; gap: 10px; min-height: 54px; margin: 0; padding: 6px 16px; font: 700 1.25rem var(--schrift-kopf); letter-spacing: .06em; text-transform: uppercase; }
.rr-kapitel__rumpf { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 20px 28px; padding: 4px 18px 18px; align-items: center; }
.rr-kapitel__bild { margin: 0; border: 1px solid var(--linie); border-radius: var(--radius-m); background: var(--flaeche-2); overflow: hidden; max-width: 480px; width: 100%; }
.rr-kapitel__bild img, .rr-kapitel__bild svg { display: block; width: 100%; height: auto; }
.rr-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: center; }
.rr-schritte li { display: flex; gap: 14px; align-items: center; font: 600 1.4rem/1.15 var(--schrift-kopf); letter-spacing: .04em; text-transform: uppercase; }
.rr-nr { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--akzent-flaeche); color: #fff; font: 700 1rem var(--schrift-kopf); }
.rr-schritte .rr-nr { width: 36px; height: 36px; font-size: 1.2rem; }
@media (max-width: 800px) { .rr-kapitel__rumpf { grid-template-columns: 1fr; padding: 4px 14px 16px; } .rr-schritte li { font-size: 1.25rem; } }

/* ---- 1.2.0: Handy-Menue des Wechselknopfs, Link-Zeile mit Pfeil, Zustaende (Keine Treffer, Offline, Laden, veraltet), Status-Formen, Anleitung mit Marken */
.rr-segmenue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 230px; padding: 6px; display: grid; gap: 2px; background: var(--flaeche); border: 1.5px solid var(--linie-stark); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .22); }
.rr-segmenue[hidden] { display: none; }
.rr-segmenue button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-m); background: transparent; text-align: left; font: 700 1.1rem var(--schrift-kopf); letter-spacing: .04em; color: var(--text); }
.rr-segmenue button .t { flex: 1; }
.rr-segmenue button .c { font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.rr-segmenue button[aria-checked="true"] { background: var(--flaeche-2); box-shadow: inset 3px 0 0 var(--akzent-flaeche); }
.rr-segmenue button:hover { background: var(--flaeche-2); }
.rr-segmenue svg.rr-i { width: 20px; height: 20px; }

.rr-eintrag[hidden], .rr-grp[hidden] { display: none; }
@media (max-width: 560px) {
  .rr-eintrag--link > .rr-zeile--link { grid-template-columns: 26px minmax(0, 1fr) 44px !important; grid-template-areas: "st n c" "st w ." "st m ."; padding-right: 4px; }
  .rr-eintrag--link > .rr-zeile--link > .rr-chev { display: block; grid-area: c; justify-self: center; width: 22px; height: 22px; color: var(--text-2); }
  .rr-eintrag--link > .rr-zeile--link > .rr-w { text-align: left; max-width: none; margin-top: 4px; }
  .rr-eintrag--link > .rr-info { top: auto; bottom: 2px; right: 0; }
  .rr-eintrag--link .rr-zeile { min-height: 76px; }
  .rr-tool-sym { width: 40px; height: 40px; }
}

/* Zustaende: Keine Treffer (Filter aus), Offline, Laden, veraltet. Rot = Raute, Gelb = Dreieck. */
.rr-leer[data-rr-leer] { border-top: 1px solid var(--linie); }
.rr-leer[data-rr-leer][hidden] { display: none; }
.rr-leer .rr-akt { justify-content: center; }
.rr-band { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 8px 16px; font-weight: 600; background: var(--bg, var(--flaeche-2)); border-bottom: 1px solid var(--sc, var(--linie)); color: var(--text); }
.rr-band[hidden] { display: none; }
.rr-band svg.rr-st { width: 20px; height: 20px; flex: none; }
.rr-band--rot { --sc: var(--rot); --bg: var(--rot-weich); }
.rr-band--gelb { --sc: var(--gelb); --bg: var(--gelb-weich); }
.rr-band > svg.rr-i { color: var(--text-2); }
.rr-band time, .rr-band .rr-band__zeit { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-inhalt > .rr-band { border: 1px solid var(--sc); border-radius: var(--radius-m); margin-bottom: 12px; }
.rr-lade { display: grid; grid-template-columns: 30px minmax(0, 1fr) 90px; gap: 14px; align-items: center; min-height: 64px; padding: 10px 14px 10px 12px; border-top: 1px solid var(--linie); }
.rr-lade i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--grau-weich) 25%, var(--flaeche-2) 50%, var(--grau-weich) 75%); background-size: 200% 100%; animation: rr-schimmer 1.4s linear infinite; }
.rr-lade > i:first-child { width: 24px; height: 24px; border-radius: 50%; }
.rr-lade span { display: grid; gap: 7px; }
.rr-lade span i:last-child { width: 55%; height: 10px; }
@keyframes rr-schimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .rr-lade i { animation: none; } }

/* Anleitung 1.2.0: Kapitel = graues Quadrat mit Zahl, Schritte = rote Kreise. Bild fuellt seine Spalte; Marken (Rahmen / Kreis / Pfeil) sitzen als Overlay,
   Nummern-Badge immer AUSSERHALB der Marke. Daten in Prozent des Bildes (siehe muster.html). */
.rr-kapitel__rumpf { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rr-kapitel__bild { max-width: none; position: relative; overflow: visible; }
.rr-kapitel__bild img { border-radius: inherit; }
.rr-kap-nr { flex: none; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px; display: grid; place-items: center; background: var(--text); color: var(--flaeche); font: 700 1.2rem var(--schrift-kopf); }
.rr-marken { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rr-marken .m { fill: none; stroke: #c41011; stroke-width: 3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rr-marken .s { fill: none; stroke: #fff; stroke-width: 6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.rr-marken .k { fill: #c41011; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rr-badge { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: #c41011; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font: 700 .95rem/1 var(--schrift-kopf); box-shadow: 0 1px 3px rgb(0 0 0 / .35); transform: translate(var(--bx, -50%), var(--by, -50%)); }
@media (max-width: 800px) { .rr-kapitel__rumpf { grid-template-columns: 1fr; } .rr-kapitel__bild { width: auto; margin: 22px 20px 6px; } }
@media (min-width: 801px) { .rr-schritte li { font-size: 1.5rem; } }
.rr-liste--link .rr-cols, .rr-liste:has(.rr-zeile--link) .rr-cols, .rr-zeile--link { padding-right: 62px; }
.rr-marken .m *, .rr-marken .s * { vector-effect: non-scaling-stroke; }
/* Kartenfarben je Fahrzeug (Zuordnung immer mit Nummer + Legende, nie nur Farbe) */
:root { --v1: #1d5fd6; --v2: #7a3fc4; --v3: #0b7f78; --v4: #b52a77; --v5: #55606e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --v1: #6ea2ff; --v2: #b58cf0; --v3: #4fd1c5; --v4: #f07ab8; --v5: #a5afbd; } }
:root[data-theme="dark"] { --v1: #6ea2ff; --v2: #b58cf0; --v3: #4fd1c5; --v4: #f07ab8; --v5: #a5afbd; }
.rr-karte svg.rr-kd { display: block; width: 100%; height: auto; } .rr-karte svg.rr-km { display: none; width: 100%; height: auto; }
@media (max-width: 700px) { .rr-karte svg.rr-kd { display: none; } .rr-karte svg.rr-km { display: block; } }
.rr-karte svg text { font-family: var(--schrift-kopf); font-weight: 700; }
.rr-kartenleg { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; padding: 12px 16px 14px; border-top: 1px solid var(--linie); background: var(--flaeche); }
.rr-kartenleg > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rr-kartenleg b { font: 700 1.1rem var(--schrift-kopf); letter-spacing: .03em; display: block; line-height: 1.1; }
.rr-kartenleg small { color: var(--text-2); font-size: var(--fs-k); display: block; }
.rr-kartenleg .pt { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); color: #fff; font: 700 .95rem var(--schrift-kopf); border: 2px solid var(--flaeche); box-shadow: 0 0 0 1px var(--pc); }
:root[data-theme="dark"] .rr-kartenleg .pt { color: #111; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rr-kartenleg .pt { color: #111; } }

/* 1.3.0 */
.rr-dot[hidden] { display: none; }
.rr-chip[aria-pressed="true"][data-status] { background: var(--flaeche); color: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 1.5px var(--text); }
.rr-mitte small { font-size: var(--fs-k); }
.rr-zeile > .rr-chev { grid-column: -2 / -1; }
/* 1.3.0: Baender stapeln in einem klebenden Behaelter direkt unter dem Kopf (kit.js legt .rr-baender an und sammelt alle .rr-band ein) */
.rr-baender { position: sticky; top: var(--kopf-ist, 0px); z-index: 19; display: flex; flex-direction: column; }
.rr-baender > .rr-band { border: 0; border-bottom: 1px solid var(--sc, var(--linie)); border-radius: 0; margin: 0; }
.rr-baender--statisch { position: static; border-radius: var(--radius-m); overflow: hidden; margin-top: 12px; }
@media (max-width: 560px) { .rr-fuss { padding-bottom: calc(88px + var(--sa-u)); } }

/* ---- rr-hilfe: Suche in den Bildanleitungen (<rr-hilfe tool="navi">, Index /anleitung/suche.json). Handy: Feld und Liste in voller Breite, Ziele >= 44 px. */
rr-hilfe { display: block; }
.rr-hilfe { position: relative; max-width: 720px; }
.rr-hilfe__feld { display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 4px 0 14px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten); }
.rr-hilfe__feld:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.rr-hilfe__feld > .rr-i { width: 22px; height: 22px; flex: none; color: var(--text-2); }
.rr-hilfe input { flex: 1; min-width: 0; height: 50px; border: 0; background: transparent; outline: 0; font-size: 1.0625rem; -webkit-appearance: none; appearance: none; border-radius: 0; }
.rr .rr-hilfe input:focus, .rr .rr-hilfe input:focus-visible { outline: 0; box-shadow: none; }
.rr-hilfe input::placeholder { color: var(--text-2); opacity: 1; }
.rr-hilfe__zu, .rr-hilfe__bereich { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; min-width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-2); padding: 0; border-radius: var(--radius-m); }
.rr-hilfe__zu[hidden] { display: none; }
.rr-hilfe__zu { border-radius: 50%; }
.rr-hilfe__zu:hover, .rr-hilfe__bereich:hover { background: var(--flaeche-2); color: var(--text); }
.rr-hilfe__bereich { padding: 0 10px; border: 1px solid var(--linie-stark); font: 600 .9375rem var(--schrift-kopf); letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.rr-hilfe__bereich[aria-pressed="true"] { background: var(--flaeche-2); }
.rr-hilfe__bereich .rr-i { width: 20px; height: 20px; }
.rr-hilfe__liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: min(70vh, 480px); overflow: auto; overscroll-behavior: contain; background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--radius); box-shadow: 0 10px 30px rgb(0 0 0 / .22); }
.rr-hilfe__liste[hidden] { display: none; }
.rr-hilfe__z { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 6px 8px; border-radius: var(--radius-m); cursor: pointer; }
.rr-hilfe__z--q { grid-template-columns: 28px minmax(0, 1fr); min-height: 48px; }
.rr-hilfe__z:hover { background: var(--flaeche-2); }
.rr-hilfe__z[aria-selected="true"] { background: var(--akzent-weich); box-shadow: inset 3px 0 0 var(--akzent); }
.rr-hilfe__z .rr-i { width: 24px; height: 24px; color: var(--text-2); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rr-hilfe__z > span { display: grid; gap: 1px; min-width: 0; }
.rr-hilfe__z b { font: 700 1.0625rem/1.2 var(--schrift-kopf); letter-spacing: .03em; }
.rr-hilfe__z small { font: 500 .875rem var(--schrift); color: var(--text-2); letter-spacing: 0; margin-left: 4px; }
.rr-hilfe__z em { font-style: normal; font-size: .9375rem; line-height: 1.3; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-hilfe__z em i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--akzent-flaeche); color: #fff; font: 700 .875rem var(--schrift-kopf); font-style: normal; margin-right: 4px; }
.rr-hilfe mark { background: transparent; color: var(--akzent); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.rr-hilfe__b { width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--linie); object-fit: cover; background: var(--flaeche-2); }
.rr-hilfe__b--d { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rr-hilfe__b--h { display: none; } :root:not([data-theme="light"]) .rr-hilfe__b--d { display: block; } }
:root[data-theme="dark"] .rr-hilfe__b--h { display: none; }
:root[data-theme="dark"] .rr-hilfe__b--d { display: block; }
.rr-hilfe__leer { padding: 12px 10px 6px; font: 700 1.0625rem var(--schrift-kopf); letter-spacing: .04em; color: var(--text-2); }
.rr-hilfe__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rr-ov .rr-hilfe__liste { position: static; box-shadow: none; margin-top: 8px; max-height: 50vh; }
.rr-hilfe-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--linie-stark); border-radius: var(--radius-m); background: var(--flaeche); color: var(--text); font: 600 1rem var(--schrift-kopf); letter-spacing: .04em; text-transform: uppercase; }
.rr-hilfe-link .rr-i { width: 20px; height: 20px; }
rr-hilfe { scroll-margin-top: calc(var(--band-ist, var(--kopf-ist, 50px)) + 12px); }
/* Sprungziel: Schritt oder Kapitel leuchtet kurz auf */
.rr-treffer { outline: 3px solid var(--akzent); outline-offset: 4px; border-radius: var(--radius-m); animation: rr-treffer 2.8s ease-out; }
@keyframes rr-treffer { 0%, 35% { background-color: var(--akzent-weich); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .rr-treffer { animation: none; background-color: var(--akzent-weich); } }
.rr-hilfe__leer--hinweis { padding: 8px 10px 2px; font: 600 .875rem var(--schrift); letter-spacing: 0; color: var(--text-2); }
.rr-hilfe__bereich span { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-ib--suche { display: none; }
/* Handy: Bereich-Knopf mit Wort (Alle bzw. Werkzeugname), Werkzeug in der Trefferzeile nur als Symbol, Lupe im Kopf */
@media (max-width: 560px) { .rr-hilfe__z { gap: 10px; } .rr-hilfe__z small { display: none; } .rr-hilfe__bereich { padding: 0 8px; font-size: .875rem; letter-spacing: .02em; } .rr-hilfe__bereich .rr-i { width: 18px; height: 18px; } .rr-ib--suche { display: grid; } }

/* 1.4.0: Overlay (ⓘ) aus einem modalen <dialog>: kit.js haengt es in den Dialog und zeigt es als popover im Top-Layer (liegt ueber dem Dialog) */
.rr-ov[popover] { border: 0; margin: 0; width: 100%; height: 100%; max-width: none; max-height: none; overflow: visible; color: var(--text); }
.rr-ov[popover]:not(:popover-open) { display: none; }
.rr-ov[popover]::backdrop { background: transparent; }