/* Convia Klick-Dummy. Keine fremden Schriften, keine Inline-Stile (CSP default-src 'self'). */

:root {
  color-scheme: light;
  --grund: #f2f4f9; --flaeche: #ffffff; --flaeche-2: #e9edf6; --linie: #d2d8e7;
  --text: #121729; --leise: #485068;
  --blau: #213f8e; --blau-hell: #e5ebfb; --knopf: #213f8e; --knopf-text: #ffffff;
  --rot: #b3122e; --rot-hell: #fbe6ea; --gruen: #1a6436; --gruen-hell: #e1f3e7; --gelb: #7a4f00; --gelb-hell: #fff0c9;
  --oben: #1a2d6b; --oben-text: #ffffff;
  --chemie-bg: #dfe6fb; --chemie-rand: #3552b5; --chemie-text: #14235c;
  --lebens-bg: #dcf2e3; --lebens-rand: #23794a; --lebens-text: #0e3a22;
  --adblue-bg: #d7f0f5; --adblue-rand: #17748a; --adblue-text: #093c48;
  --frei-a: #e3e6ee; --frei-b: #f4f5f9;
  --fokus: #c2410c; --schatten: 0 8px 30px rgba(18, 23, 41, 0.18);
  --schrift: "Noto Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --grund: #0d101d; --flaeche: #161a2c; --flaeche-2: #1f2439; --linie: #343b58;
    --text: #e8eaf3; --leise: #b5bace;
    --blau: #a9bdff; --blau-hell: #1d2850; --knopf: #a9bdff; --knopf-text: #0d1330;
    --rot: #ff8fa0; --rot-hell: #3a1820; --gruen: #86d8a4; --gruen-hell: #14301f; --gelb: #ffd27a; --gelb-hell: #33290f;
    --oben: #131b40; --oben-text: #ffffff;
    --chemie-bg: #223066; --chemie-rand: #8ea5ff; --chemie-text: #e5eaff;
    --lebens-bg: #17402a; --lebens-rand: #6fcf97; --lebens-text: #dcf5e6;
    --adblue-bg: #123c46; --adblue-rand: #5cc4d8; --adblue-text: #d9f3f8;
    --frei-a: #262b42; --frei-b: #1a1e31;
    --fokus: #fdba74; --schatten: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0d101d; --flaeche: #161a2c; --flaeche-2: #1f2439; --linie: #343b58;
  --text: #e8eaf3; --leise: #b5bace;
  --blau: #a9bdff; --blau-hell: #1d2850; --knopf: #a9bdff; --knopf-text: #0d1330;
  --rot: #ff8fa0; --rot-hell: #3a1820; --gruen: #86d8a4; --gruen-hell: #14301f; --gelb: #ffd27a; --gelb-hell: #33290f;
  --oben: #131b40; --oben-text: #ffffff;
  --chemie-bg: #223066; --chemie-rand: #8ea5ff; --chemie-text: #e5eaff;
  --lebens-bg: #17402a; --lebens-rand: #6fcf97; --lebens-text: #dcf5e6;
  --adblue-bg: #123c46; --adblue-rand: #5cc4d8; --adblue-text: #d9f3f8;
  --frei-a: #262b42; --frei-b: #1a1e31;
  --fokus: #fdba74; --schatten: 0 8px 30px rgba(0, 0, 0, 0.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--grund); color: var(--text); font: 0.95rem/1.45 var(--schrift); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
h1 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
h2 { font-size: 1.05rem; margin: 0 0 0.6rem; line-height: 1.25; }
h3 { font-size: 0.8rem; margin: 1.2rem 0 0.4rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--leise); }
p { margin: 0 0 0.6rem; }
[hidden] { display: none !important; }
.sprung { position: absolute; left: -999px; top: 0; background: var(--flaeche); padding: 0.5rem 1rem; z-index: 50; }
.sprung:focus { left: 0.5rem; top: 0.5rem; }
.hinweis { color: var(--leise); font-size: 0.88rem; margin: 0.2rem 0 0.6rem; }
.leer { color: var(--leise); font-style: italic; padding: 0.5rem 0; }
.ohne-js { padding: 2rem; }

/* Kopf */
.oben { background: var(--oben); color: var(--oben-text); display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 20; }
.logo { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; text-decoration: none; font-weight: 800; font-size: 1.25rem; letter-spacing: 0.01em; min-height: 44px; }
.suchknopf { flex: 1; max-width: 30rem; margin: 0 auto; min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.8rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.1); color: #fff; text-align: left; }
.suchknopf kbd { font: inherit; font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 4px; padding: 0 0.35rem; }
.dummy { font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; }

/* Rahmen und Navigation */
.rahmen { flex: 1; display: grid; grid-template-columns: 11rem minmax(0, 1fr); }
.seitennav { background: var(--flaeche); border-right: 1px solid var(--linie); padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; }
.nav-punkt { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.6rem; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 600; }
.nav-punkt:hover { background: var(--flaeche-2); }
.nav-punkt[aria-current="page"] { background: var(--blau-hell); color: var(--blau); }
.wabe { width: 14px; height: 16px; flex: none; background: var(--linie); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.nav-punkt[aria-current="page"] .wabe { background: var(--blau); }
.nav-name { flex: 1; }
.zahl { display: inline-block; min-width: 1.5rem; text-align: center; font-size: 0.78rem; font-weight: 700; background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 999px; padding: 0 0.4rem; }
main { padding: 1rem; min-width: 0; }
main:focus { outline: none; }

/* Statusleiste */
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; padding: 0.4rem 1rem; background: var(--flaeche); border-top: 1px solid var(--linie); font-size: 0.8rem; color: var(--leise); }
.st { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--linie); border-radius: 999px; padding: 0.1rem 0.6rem; background: var(--flaeche); min-height: 28px; }
.st::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--leise); }
.st.ok::before { background: var(--gruen); }
.st.aus::before { background: transparent; border: 2px solid var(--leise); }
button.st:hover { background: var(--flaeche-2); }

/* Knöpfe, Chips, Filter */
.knopf { min-height: 40px; padding: 0 0.9rem; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); font-weight: 600; }
.knopf:hover { background: var(--flaeche-2); }
.knopf.haupt { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
.knopf.haupt:hover { filter: brightness(1.12); }
.knopf.klein { min-height: 32px; padding: 0 0.6rem; font-size: 0.85rem; }
.knopf.breit { width: 100%; }
.link { background: none; border: 0; padding: 0; color: var(--blau); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; text-align: left; }
.chip { display: inline-block; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--linie); border-radius: 999px; padding: 0 0.5rem; background: var(--flaeche-2); white-space: nowrap; vertical-align: middle; }
.chip.ok, .chip.erledigt { color: var(--gruen); background: var(--gruen-hell); border-color: var(--gruen); }
.chip.warn, .chip.geplant, .chip.prio-mittel { color: var(--gelb); background: var(--gelb-hell); border-color: var(--gelb); }
.chip.no, .chip.offen, .chip.prio-hoch, .chip.adr { color: var(--rot); background: var(--rot-hell); border-color: var(--rot); }
.chip.unterwegs { color: var(--blau); background: var(--blau-hell); border-color: var(--blau); }
.chip.adr { margin-left: 0.35rem; }
.filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.8rem; }
.filterknopf { min-height: 36px; padding: 0 0.8rem; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche); font-weight: 600; font-size: 0.88rem; }
.filterknopf[aria-pressed="true"] { background: var(--knopf); border-color: var(--knopf); color: var(--knopf-text); }
.punkt { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.35rem; border: 2px solid; vertical-align: baseline; }
.kat-chemie { background: var(--chemie-bg); border-color: var(--chemie-rand); color: var(--chemie-text); }
.kat-lebensmittel { background: var(--lebens-bg); border-color: var(--lebens-rand); color: var(--lebens-text); }
.kat-adblue { background: var(--adblue-bg); border-color: var(--adblue-rand); color: var(--adblue-text); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.kopfzeile .filter { margin: 0; }
.kopf-knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.seite { max-width: 78rem; }

/* Karten */
.kartenliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.karte { display: flex; flex-direction: column; gap: 0.15rem; width: 100%; text-align: left; padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); }
button.karte:hover { border-color: var(--blau); background: var(--blau-hell); }
.karte.fest { background: var(--flaeche-2); margin: 0.6rem 0 1rem; }
.k-kopf { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.k-kopf span { color: var(--leise); font-size: 0.85rem; text-align: right; }
.k-strecke, .k-titel { font-weight: 600; }
.k-zeit { color: var(--leise); font-size: 0.85rem; }

/* Planboard */
.pb { display: grid; grid-template-columns: 19rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.pb-seite { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 0.8rem; position: sticky; top: 4.2rem; max-height: calc(100dvh - 7.5rem); overflow-y: auto; }
.pb-tafel { min-width: 0; }
.t-scroll { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.tafel { min-width: 132rem; }
.t-kopf, .zeile { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); }
.t-kopf { position: sticky; top: 0; background: var(--flaeche-2); font-size: 0.8rem; font-weight: 700; }
.t-ecke { padding: 0.45rem 0.6rem; position: sticky; left: 0; z-index: 3; background: var(--flaeche-2); border-right: 1px solid var(--linie); }
.t-tage { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-tag { padding: 0.45rem 0.5rem; border-left: 1px solid var(--linie); }
.t-tag:first-child { border-left: 0; }
.t-tag.heute { color: var(--rot); }
.zeile { border-top: 1px solid var(--linie); min-height: 3.9rem; }
.z-kopf { position: sticky; left: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.05rem; text-align: left; padding: 0.35rem 0.6rem; border: 0; border-right: 1px solid var(--linie); background: var(--flaeche); font-size: 0.82rem; }
.z-kopf:hover { background: var(--flaeche-2); }
.z-kopf span { color: var(--leise); }
.z-tank { display: flex; align-items: center; }
.z-kopf .z-grund { color: var(--rot); font-weight: 600; font-size: 0.76rem; line-height: 1.25; }
.spur { position: relative; background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px); background-size: calc(100% / 7) 100%; }
.wochenende { position: absolute; top: 0; bottom: 0; left: calc(100% * 5 / 7); right: 0; background: var(--flaeche-2); opacity: 0.55; }
.balken { position: absolute; top: 0.45rem; bottom: 0.45rem; z-index: 1; min-width: 10px; padding: 0 0.4rem; border: 1px solid; border-left-width: 5px; border-radius: 6px; font-size: 0.78rem; line-height: 1.2; text-align: left; white-space: nowrap; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.balken strong, .balken span { overflow: hidden; text-overflow: ellipsis; }
.balken:hover, .balken:focus-visible { z-index: 2; filter: brightness(1.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); }
.balken.erledigt { opacity: 0.6; }
.balken.unterwegs { box-shadow: inset 0 -3px 0 var(--rot); }
.block { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; overflow: hidden; }
.block span { font-size: 0.72rem; font-weight: 700; color: var(--leise); background: var(--flaeche); border-radius: 4px; padding: 0 0.3rem; margin-left: 0.4rem; white-space: nowrap; }
.block.frei { background: repeating-linear-gradient(135deg, var(--frei-a) 0 6px, var(--frei-b) 6px 12px); }
.block.werkstatt { background: var(--gelb-hell); border-left: 2px solid var(--gelb); border-right: 2px solid var(--gelb); }
.block.reinigung { top: 0.9rem; bottom: 0.9rem; z-index: 1; justify-content: center; font-size: 0.7rem; font-weight: 800; color: var(--gelb); background: var(--gelb-hell); border: 1px dashed var(--gelb); border-radius: 4px; min-width: 14px; }
.geist { position: absolute; top: 0.3rem; bottom: 0.3rem; z-index: 2; border: 2px dashed; border-radius: 6px; font-weight: 800; font-size: 0.78rem; white-space: nowrap; overflow: hidden; padding: 0 0.3rem; min-width: 3.4rem; }
.geist.ok { color: var(--gruen); background: var(--gruen-hell); border-color: var(--gruen); }
.geist.warn { color: var(--gelb); background: var(--gelb-hell); border-color: var(--gelb); }
.jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rot); z-index: 2; pointer-events: none; }
.zeile.ok .z-kopf { box-shadow: inset 5px 0 0 var(--gruen); }
.zeile.warn .z-kopf { box-shadow: inset 5px 0 0 var(--gelb); }
.zeile.no .z-kopf { box-shadow: inset 5px 0 0 var(--rot); }
.zeile.no .spur { opacity: 0.4; }
.legende { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--leise); }
.legende > span { display: inline-flex; align-items: center; }
.muster { display: inline-block; width: 1.2rem; height: 0.8rem; margin-right: 0.35rem; border-radius: 3px; border: 1px solid var(--linie); }
.muster.frei { background: repeating-linear-gradient(135deg, var(--frei-a) 0 4px, var(--frei-b) 4px 8px); }
.muster.werkstatt { background: var(--gelb-hell); border-color: var(--gelb); }
.muster.rein { width: auto; height: auto; padding: 0 0.25rem; font-size: 0.7rem; font-weight: 800; color: var(--gelb); background: var(--gelb-hell); border: 1px dashed var(--gelb); }
.muster.linie { width: 2px; height: 0.9rem; background: var(--rot); border: 0; }

/* Vorschläge */
.vorschlaege { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.5rem; }
.vorschlaege > li { border: 1px solid var(--linie); border-left: 5px solid var(--gruen); border-radius: 8px; padding: 0.6rem 0.7rem; }
.vorschlaege > li.warn { border-left-color: var(--gelb); }
.v-kopf { display: flex; align-items: baseline; gap: 0.45rem; }
.v-kopf span:last-child { color: var(--leise); font-size: 0.85rem; }
.rang { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--flaeche-2); font-size: 0.78rem; font-weight: 800; flex: none; }
.gruende { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; font-size: 0.86rem; }
.gruende li { position: relative; padding-left: 1.4rem; margin-bottom: 0.15rem; }
.gruende li::before { position: absolute; left: 0; font-weight: 800; }
.g-ok::before { content: "✓"; color: var(--gruen); }
.g-warn::before { content: "!"; color: var(--gelb); left: 0.25rem; }
.g-no::before { content: "✕"; color: var(--rot); }
.nein-liste { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--leise); }
.nein-liste li { margin-bottom: 0.3rem; }
.nein-liste strong { color: var(--text); }
details summary { cursor: pointer; font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.kasten { border: 1px solid var(--linie); border-left: 5px solid var(--blau); border-radius: 8px; padding: 0.7rem; margin-bottom: 0.8rem; }
.kasten.no { border-left-color: var(--rot); background: var(--rot-hell); }

/* Tabellen */
.tab-rahmen { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { text-align: left; vertical-align: middle; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linie); white-space: nowrap; }
td:last-child, .d-inhalt td { white-space: normal; }
thead th { background: var(--flaeche-2); font-size: 0.78rem; letter-spacing: 0.03em; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flaeche-2); }
.mini { position: relative; display: inline-block; width: 7rem; height: 0.8rem; border-radius: 4px; background: var(--gruen-hell); border: 1px solid var(--gruen); overflow: hidden; vertical-align: middle; }
.mini span { position: absolute; top: 0; bottom: 0; }
.mini-frei { background: repeating-linear-gradient(135deg, var(--frei-a) 0 3px, var(--leise) 3px 5px); }
.mini-werkstatt { background: var(--gelb); }

/* Lage */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.kachel { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; padding: 0.8rem 0.9rem; background: var(--flaeche); border: 1px solid var(--linie); border-top: 4px solid var(--linie); border-radius: 10px; }
.kachel:hover { background: var(--flaeche-2); }
.kachel.no { border-top-color: var(--rot); }
.kachel.warn { border-top-color: var(--gelb); }
.kachel.ok { border-top-color: var(--gruen); }
.ka-titel { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise); }
.ka-zahl { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.ka-text { color: var(--leise); font-size: 0.86rem; }
.eingang { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); overflow: hidden; }
.eingang li + li { border-top: 1px solid var(--linie); }
.fall { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; min-height: 48px; padding: 0.4rem 0.8rem; border: 0; background: none; text-align: left; font-weight: 600; }
.fall:hover { background: var(--flaeche-2); }

/* Tickets */
.kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 0.75rem; align-items: start; }
.spalte { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 10px; padding: 0.6rem; display: grid; gap: 0.5rem; min-height: 8rem; align-content: start; }
.spalte h2 { margin: 0; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; }
.ticket { border-left: 5px solid var(--linie); }
.ticket.prio-hoch { border-left-color: var(--rot); }
.ticket.prio-mittel { border-left-color: var(--gelb); }

/* Schublade, Meldung, Dialoge */
.schublade { position: fixed; top: 3.6rem; right: 0; bottom: 0; width: min(100%, 24rem); z-index: 30; background: var(--flaeche); border-left: 1px solid var(--linie); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.s-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--linie); }
.s-kopf h2 { margin: 0; }
.s-inhalt { padding: 0.8rem 1rem 1.5rem; overflow-y: auto; }
.s-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.daten { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem; margin: 0; }
.daten dt { color: var(--leise); font-size: 0.85rem; }
.daten dd { margin: 0; font-weight: 600; }
.schlicht { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.vorschau { margin-top: 1rem; min-height: 9rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--leise); border: 2px dashed var(--linie); border-radius: 8px; background: var(--flaeche-2); }
.meldung { position: fixed; left: 50%; bottom: 3.2rem; transform: translateX(-50%); z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; max-width: calc(100% - 2rem); padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--text); color: var(--grund); box-shadow: var(--schatten); font-weight: 600; }
.meldung .knopf { background: transparent; color: inherit; border-color: currentColor; }
dialog { width: min(calc(100% - 2rem), 30rem); max-height: calc(100dvh - 2rem); padding: 1.1rem; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
dialog.breit { width: min(calc(100% - 2rem), 56rem); }
dialog::backdrop { background: rgba(10, 14, 30, 0.55); }
.d-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.6rem; }
.feld { display: grid; gap: 0.2rem; font-size: 0.85rem; font-weight: 600; }
.feld.ganz { grid-column: 1 / -1; }
.feld input, .feld select, textarea { min-height: 40px; width: 100%; padding: 0.35rem 0.6rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--flaeche); font-weight: 400; }
textarea { margin-top: 0.6rem; }
.suchfeld { max-width: 24rem; margin-bottom: 0.7rem; }
.mail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.mail-text { background: var(--flaeche-2); border: 1px solid var(--linie); border-radius: 8px; padding: 0.8rem; font-size: 0.9rem; }
.mail-kopf { color: var(--leise); border-bottom: 1px solid var(--linie); padding-bottom: 0.5rem; }
#palette { padding: 0.6rem; margin-top: 12vh; }
#palette input { width: 100%; min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--flaeche); }
.treffer { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.treffer button { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; width: 100%; min-height: 40px; padding: 0.2rem 0.6rem; border: 0; border-radius: 6px; background: none; text-align: left; }
.treffer li:first-child button, .treffer button:hover { background: var(--blau-hell); }

/* Schmale Bildschirme */
@media (max-width: 60rem) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .seitennav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--linie); padding: 0.35rem 0.5rem; }
  .nav-punkt { flex: none; }
  .pb { grid-template-columns: minmax(0, 1fr); }
  .pb-seite { position: static; max-height: none; }
  .t-kopf, .zeile { grid-template-columns: 7.8rem minmax(0, 1fr); }
  .z-kopf { font-size: 0.76rem; padding: 0.3rem 0.4rem; }
  .dummy { display: none; }
  .schublade { top: auto; left: 0; width: 100%; max-height: 75dvh; border-left: 0; border-top: 1px solid var(--linie); border-radius: 14px 14px 0 0; }
  main { padding: 0.75rem; }
}
@media (max-width: 26rem) {
  .suchknopf kbd { display: none; }
  .st-rest { display: none; }
}

/* ===== Ausbau: Gruppen, Rollen, neue Bereiche ===== */
.oben { flex-wrap: wrap; }
.suchknopf { min-width: 8rem; }
.obenknopf { min-height: 40px; padding: 0 0.9rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 700; }
.obenknopf:hover { background: rgba(255, 255, 255, 0.28); }
.rollenwahl { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.rollenwahl select { min-height: 40px; max-width: 11rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.45); background: var(--oben); color: #fff; padding: 0 0.4rem; }
.seitennav { position: sticky; top: 3.5rem; align-self: start; max-height: calc(100dvh - 3.5rem); overflow-y: auto; }
.rahmen { grid-template-columns: 12.5rem minmax(0, 1fr); }
.nav-gruppe { margin: 0.7rem 0.6rem 0.15rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--leise); }
.nav-gruppe:first-child { margin-top: 0.1rem; }
.nav-punkt { min-height: 38px; }
.abstand { margin-top: 1.6rem; }
.rot { color: var(--rot); font-weight: 700; }
.gruen { color: var(--gruen); font-weight: 700; }
.hinweis.rot { font-weight: 600; }
.kachel.neutral { border-top-color: var(--blau); }
div.kachel:hover { background: var(--flaeche); }
.seite > .feld { max-width: 24rem; margin-bottom: 0.8rem; }
.formular.schmal { max-width: 36rem; margin-bottom: 0.8rem; align-items: end; }
.kopf-knoepfe.unten { align-self: end; }
.zwei { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 1.5rem; margin: 0.5rem 0 1rem; }
.s-inhalt input[type="search"] { width: 100%; min-height: 44px; padding: 0 0.7rem; border: 1px solid var(--leise); border-radius: 8px; background: var(--flaeche); margin-bottom: 0.6rem; }
.block.wechsel { background: var(--blau-hell); border-left: 2px solid var(--blau); border-right: 2px solid var(--blau); }
.mini-wechsel { background: var(--blau); }

/* Auswahlkarten in Dialogen */
.auswahl { display: grid; gap: 0.5rem; }
.wahlkarte { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; text-align: left; padding: 0.65rem 0.8rem; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche); }
.wahlkarte:hover:not(:disabled) { border-color: var(--blau); background: var(--blau-hell); }
.wahlkarte[aria-checked="true"] { border: 2px solid var(--blau); background: var(--blau-hell); }
.wahlkarte:disabled { opacity: 0.55; cursor: not-allowed; }
.wahlkarte span { color: var(--leise); font-size: 0.86rem; }

/* Schritte der Fahrer-App */
.schritte { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.schritte span { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 2px solid var(--leise); }
.schritte span.an { background: var(--blau); border-color: var(--blau); }
.schritte.gross { gap: 5px; margin: 0.4rem 0 0.1rem; }
.schritte.gross span { width: 1.4rem; height: 0.5rem; border-radius: 3px; }

/* Karte */
.karte-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.karte-rahmen { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 0.6rem; }
.karte-svg { display: block; width: 100%; height: auto; max-height: 78dvh; }
.land { fill: var(--flaeche-2); stroke: var(--linie); stroke-width: 2; stroke-linejoin: round; }
.route { stroke: var(--blau); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0.7; }
.ort { fill: var(--leise); }
.depot { fill: var(--text); }
.ortname { font-size: 11px; fill: var(--leise); }
.marke { cursor: pointer; }
.marke circle { stroke-width: 2.5; fill: var(--flaeche); stroke: var(--leise); }
.marke text { font-size: 9px; font-weight: 800; text-anchor: middle; fill: var(--text); pointer-events: none; }
.marke.kat-chemie circle { fill: var(--chemie-bg); stroke: var(--chemie-rand); }
.marke.kat-lebensmittel circle { fill: var(--lebens-bg); stroke: var(--lebens-rand); }
.marke.kat-adblue circle { fill: var(--adblue-bg); stroke: var(--adblue-rand); }
.marke.faehrt circle { stroke-width: 4; }
.marke.ruht { opacity: 0.5; }
.marke.offen circle { fill: var(--rot-hell); stroke: var(--rot); r: 8px; }
.marke.offen text { fill: var(--rot); font-size: 11px; }
.marke:hover circle, .marke:focus-visible circle { stroke: var(--fokus); }
.marke:focus-visible { outline: none; }
.muster.faehrt { border: 3px solid var(--chemie-rand); background: var(--chemie-bg); border-radius: 50%; width: 0.9rem; height: 0.9rem; }
.muster.stehtm { border: 1px solid var(--chemie-rand); background: var(--chemie-bg); border-radius: 50%; width: 0.9rem; height: 0.9rem; }
.muster.offenm { width: auto; height: auto; padding: 0 0.35rem; border-radius: 50%; color: var(--rot); background: var(--rot-hell); border: 2px solid var(--rot); font-weight: 800; font-size: 0.7rem; }
.muster.depotm { width: 0.7rem; height: 0.7rem; background: var(--text); border: 0; border-radius: 0; }
.fortschritt { display: block; height: 0.45rem; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; margin: 0.2rem 0; }
.fortschritt span { display: block; height: 100%; background: var(--blau); }

/* Rotation */
.rotplan { min-width: 62rem; }
.rot-zeile { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 17rem; border-top: 1px solid var(--linie); min-height: 3rem; }
.rot-kopf { border-top: 0; background: var(--flaeche-2); font-size: 0.8rem; font-weight: 700; min-height: 0; }
.rot-name, .rot-info { padding: 0.4rem 0.7rem; display: flex; flex-direction: column; justify-content: center; font-size: 0.86rem; }
.rot-name span { color: var(--leise); }
.rot-info { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.3rem; border-left: 1px solid var(--linie); }
.rot-wochen { display: grid; grid-template-columns: repeat(4, 1fr); }
.rot-wochen div { padding: 0.45rem 0.5rem; border-left: 1px solid var(--linie); }
.rot-spur { position: relative; border-left: 1px solid var(--linie); background-image: linear-gradient(to right, var(--linie) 1px, transparent 1px); background-size: 25% 100%; }
.rot-zeile.no .rot-name { box-shadow: inset 5px 0 0 var(--rot); }

/* Unterkünfte */
.wohnungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.75rem; }
.wohnung { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 0.8rem; }
.wohnung h2 { margin: 0; }
.betten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.bett { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; min-height: 44px; padding: 0 0.7rem; border-radius: 8px; border: 1px solid var(--linie); background: var(--flaeche-2); text-align: left; }
.bett span { color: var(--leise); font-size: 0.82rem; }
.bett.frei { border: 2px dashed var(--gruen); background: var(--gruen-hell); }
.bett.frei strong { color: var(--gruen); }
.bett:hover { border-color: var(--blau); }

/* Fahrer-App */
.app-raster { display: grid; grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.telefon { display: grid; gap: 0.5rem; padding: 0.9rem; border: 10px solid #1c2033; border-radius: 30px; background: var(--flaeche); box-shadow: var(--schatten); }
.tel-kopf { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 0.4rem; border-bottom: 1px solid var(--linie); }
.tel-kopf span { color: var(--leise); font-size: 0.85rem; }
.tel-karte { display: grid; gap: 0.2rem; padding: 0.7rem; border-radius: 10px; background: var(--flaeche-2); border: 1px solid var(--linie); }
.tel-titel { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.telefon .knopf { min-height: 46px; }
.tel-chat { display: grid; gap: 0.35rem; margin-top: 0.3rem; }
.blase { margin: 0; max-width: 88%; padding: 0.45rem 0.7rem; border-radius: 12px; font-size: 0.88rem; background: var(--flaeche-2); border: 1px solid var(--linie); justify-self: start; }
.blase.dispo { justify-self: end; background: var(--blau-hell); border-color: var(--blau); }
.blase small { display: block; color: var(--leise); margin-top: 0.15rem; }
.app-dispo { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 0.9rem; }

/* Diagramme */
.diagramm { display: grid; gap: 0.4rem; }
.d-zeile { display: grid; grid-template-columns: minmax(6rem, 11rem) minmax(0, 1fr) 5.5rem; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.d-spur { height: 1.1rem; border-radius: 4px; background: var(--flaeche-2); border: 1px solid var(--linie); overflow: hidden; }
.d-spur span { display: block; height: 100%; background: var(--blau); }
.d-spur span.minus { background: var(--rot); }
.d-wert { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Schalter, Faktenkarte, Portal */
.schalter { min-width: 4.2rem; min-height: 34px; border-radius: 999px; border: 1px solid var(--leise); background: var(--flaeche-2); font-weight: 700; color: var(--leise); }
.schalter[aria-checked="true"] { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.fragen .filterknopf { font-size: 0.8rem; min-height: 32px; text-align: left; border-radius: 8px; }
.faktenkarte { border: 1px solid var(--linie); border-left: 5px solid var(--blau); border-radius: 8px; padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; background: var(--flaeche); }
.faktenkarte p { margin: 0; }
.fk-frage { color: var(--leise); font-size: 0.85rem; font-style: italic; }
.fk-titel { margin-top: 0.4rem !important; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--leise); }
.fk-zahl { font-size: 1.7rem; font-weight: 800; line-height: 1.15; }
.faktenkarte ul { margin: 0.3rem 0; padding-left: 1.1rem; font-size: 0.88rem; }
.gekuerzt { list-style: none; margin-left: -1.1rem; color: var(--gelb); font-weight: 700; }
.fk-quelle { font-size: 0.76rem; color: var(--leise); margin: 0.3rem 0 0.5rem !important; }
.portal { max-width: 46rem; border: 2px solid var(--linie); border-radius: 12px; background: var(--flaeche); overflow: hidden; padding: 0 1rem 1rem; }
.portal-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; margin: 0 -1rem; padding: 0.7rem 1rem; background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.portal-kopf span { color: var(--leise); font-size: 0.86rem; }
.portal-liste { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.portal-liste li { display: grid; gap: 0.15rem; padding: 0.7rem 0.8rem; border: 1px solid var(--linie); border-radius: 8px; }

@media (max-width: 60rem) {
  .rahmen { grid-template-columns: minmax(0, 1fr); }
  .seitennav { position: static; max-height: none; align-items: center; }
  .nav-gruppe { flex: none; margin: 0 0.2rem 0 0.7rem; }
  .karte-raster, .app-raster { grid-template-columns: minmax(0, 1fr); }
  .rollenwahl span { display: none; }
  .d-zeile { grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 4.8rem; }
}
.ortname.links { text-anchor: end; }
.tel-karte .chip { justify-self: start; margin-left: 0; }