/* DARUHub: Farben und Flächen wie die Startseite daru-gruppe.ch, Programmfarbe Gold */
@font-face { font-family: "Metrophobic"; src: url(metrophobic.woff2) format("woff2"); font-display: swap; }
:root { --bg: #36454c; --panel: #42545c; --panel2: #4b5f68; --tief: #2d3a40; --line: #587077; --fg: #e6eef0; --fg2: #d3dddf; --fg3: #bac6c8; --akzent: #c9a46a; --akzent-text: #2a1d08; --warn: #e0b44a; --rot: #ff8a7a; }
.dl.generator.flotte { --dl-farbe: #6fb0e8; }
.dl.flotte button[type=submit] { color: var(--akzent-text); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 "Noto Sans", "Segoe UI", Arial, sans-serif; }
h1, h2 { font-family: "Metrophobic", "Segoe UI", Arial, sans-serif; font-weight: 400; letter-spacing: .02em; margin: 0; }
a { color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.in { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.kopf { background: var(--tief); border-bottom: 1px solid var(--line); }
.kopf .in { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-block: 14px; }
.marke { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 24px "Metrophobic", "Segoe UI", Arial, sans-serif; letter-spacing: .03em; }
.marke img { width: 30px; height: 30px; }
.marke i { font-style: normal; color: var(--akzent); }
.wer { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--fg3); }
.nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 16px; }
.nav button { font: 600 14px "Noto Sans", Arial, sans-serif; padding: 9px 14px; background: var(--panel); color: var(--fg2); border: 1px solid var(--line); cursor: pointer; }
.nav button[aria-selected="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.flaeche { background: var(--tief); border: 1px solid var(--line); padding: 22px; display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; }
.spalten { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; }
.spalten > * { min-width: 0; }
.ablage { display: block; border: 2px dashed var(--akzent); padding: 22px 14px; text-align: center; color: var(--fg2); font-size: 14.5px; cursor: pointer; }
.ablage.drueber { background: var(--panel); }
.ablage b { display: block; font: 400 20px "Metrophobic", "Segoe UI", Arial, sans-serif; color: var(--fg); }
.ablage button { background: none; border: 0; padding: 0; color: var(--akzent); font: inherit; text-decoration: underline; cursor: pointer; }
.dateien { list-style: none; margin: 10px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.dateien li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dateien .n { overflow-wrap: anywhere; min-width: 0; flex: 1; }
.dateien .g { flex: none; color: var(--fg3); font-variant-numeric: tabular-nums; }
.dateien .x { flex: none; background: none; border: 0; color: var(--fg3); cursor: pointer; font-size: 15px; padding: 0 2px; }
.summe { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 14px; font-weight: 600; }
.summe.zuviel { color: var(--rot); }
.felder { display: flex; flex-direction: column; gap: 10px; }
.feld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--fg3); }
.feld input, .feld select, .feld textarea { font: 15px "Noto Sans", Arial, sans-serif; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 8px 10px; width: 100%; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.knopf { font: 600 15px "Noto Sans", Arial, sans-serif; padding: 11px 16px; background: var(--akzent); color: var(--akzent-text); border: 0; cursor: pointer; text-decoration: none; display: inline-block; }
.knopf:disabled { opacity: .55; cursor: not-allowed; }
.knopf.zweit { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.klein { font-size: 13px; padding: 5px 9px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fehler { color: var(--rot); font-size: 14px; margin: 0; }
.fehler:empty { display: none; }
.hinweis { color: var(--fg3); font-size: 13.5px; margin: 0; }
.lauf { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--fg2); }
.balken { height: 10px; background: var(--panel); border: 1px solid var(--line); }
.balken i { display: block; height: 100%; width: 0; background: var(--akzent); }
.linkzeile { display: flex; gap: 10px; flex-wrap: wrap; }
.linkzeile input { flex: 1 1 260px; min-width: 0; font: 14.5px Consolas, monospace; color: var(--fg); padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); }
.fakten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fakten div { background: var(--panel); padding: 10px 12px; font-size: 13px; color: var(--fg3); }
.fakten b { display: block; font-size: 15px; color: var(--fg); }
h2.titel { font-size: 24px; }
.rollen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 600; }
td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td.z { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.t { overflow-wrap: anywhere; min-width: 160px; }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; border: 1px solid currentColor; white-space: nowrap; }
.pill.gut { color: var(--akzent); } .pill.warn { color: var(--warn); } .pill.aus { color: var(--fg3); }
.mittig { max-width: 560px; margin: 30px auto; }
h3 { font: 400 19px "Metrophobic", "Segoe UI", Arial, sans-serif; margin: 0; }
.schalter { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--fg2); }
.schalter input { accent-color: var(--akzent); width: 16px; height: 16px; }
.schmal { max-width: 440px; }
.kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.einladen { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr .8fr auto; gap: 10px; align-items: end; }
.einladen > * { min-width: 0; }
.einsicht { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
td .knopf { white-space: nowrap; }
td select { font: 13.5px "Noto Sans", Arial, sans-serif; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; }
.klein-text { display: block; color: var(--fg3); font-size: 12.5px; overflow-wrap: anywhere; }
#kForm { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
#kForm .wachsen { grid-column: 1 / -1; }
#kForm button { justify-self: start; }
@media (max-width: 860px) { .einladen { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { display: none; }
.chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fg); background: var(--panel2); border: 1px solid var(--line); padding: 2px 4px 2px 8px; overflow-wrap: anywhere; }
.chips button { background: none; border: 0; color: var(--fg3); cursor: pointer; font-size: 14px; padding: 0 3px; }
.reihe { display: flex; gap: 8px; align-items: flex-end; }
.reihe.umbruch { flex-wrap: wrap; }
.wachsen { flex: 1; min-width: 0; }
.wahl { font: 14px "Noto Sans", Arial, sans-serif; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 8px; max-width: 45%; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.hinweisbox { padding: 12px 14px; background: var(--panel); border-left: 4px solid var(--warn); display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--fg2); }
.hinweisbox b { color: var(--fg); font-size: 16px; }
.hinweisbox.rot { border-left-color: var(--rot); }
.qr { display: flex; align-items: center; gap: 14px; }
.qr img { width: 132px; height: 132px; background: #fff; flex: none; }
.qr-zeile img { display: block; width: 120px; height: 120px; background: #fff; margin-top: 6px; }
.pill.rot { color: var(--rot); }
.balken.laufend { overflow: hidden; }
.balken.laufend i { width: 30%; animation: laufen 1.6s ease-in-out infinite; }
@keyframes laufen { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .balken.laufend i { animation: none; width: 100%; opacity: .5; } }
.kaestchen { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.kaestchen label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg2); }
.verlauf { font-size: 12.5px; color: var(--fg3); }
.verlauf li { margin: 2px 0; }
.dateien .aktionen { flex: none; display: flex; gap: 4px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .zwei { grid-template-columns: 1fr; } }
.firmenkopf { display: flex; align-items: center; gap: 12px; font: 400 19px "Metrophobic", "Segoe UI", Arial, sans-serif; padding-bottom: 10px; border-bottom: 3px solid var(--firma, var(--akzent)); }
.firmenkopf img { height: 40px; width: auto; background: #fff; padding: 3px; }
.sprachwahl { display: flex; gap: 4px; }
.sprachwahl button { font: 600 12px "Noto Sans", Arial, sans-serif; padding: 3px 8px; background: transparent; color: var(--fg3); border: 1px solid var(--line); cursor: pointer; }
.sprachwahl button[aria-pressed="true"] { color: var(--akzent); border-color: var(--akzent); }
details.verlauf summary { cursor: pointer; color: var(--fg2); }
details.verlauf ul { margin: 4px 0 0; padding-left: 16px; }
.fuss { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-block: 0 26px; font-size: 13px; color: var(--fg3); }
@media (max-width: 680px) {
  .spalten, .fakten { grid-template-columns: 1fr; }
  .flaeche { padding: 16px; }
}

/* ---- DARUFleet */
#muster { margin-top: 20px; }
.fakten.fuenf { grid-template-columns: repeat(5, 1fr); }
.flotte:not(.dl) { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.flotte:not(.dl) > * { min-width: 0; }
.karte { height: 520px; background: var(--panel); border: 1px solid var(--line); }
.fz-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; }
.fz-liste button { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 12px; background: var(--panel); color: var(--fg);
  border: 1px solid var(--line); border-left: 4px solid var(--st, var(--line)); cursor: pointer; font: 14px "Noto Sans", Arial, sans-serif; }
.fz-liste button:hover, .fz-liste button.aktiv { background: var(--panel2); }
.fz-liste b { font-size: 15.5px; letter-spacing: .03em; }
.fz-liste .zeile2 { grid-column: 1 / -1; color: var(--fg3); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.st-unterwegs { --st: #6fb0e8; } .st-gebraucht { --st: #e0b44a; } .st-frei { --st: #5fbf8f; } .st-offline { --st: #8a9aa0; }
.pill.st { color: var(--st); }
.tank { display: inline-flex; align-items: center; gap: 5px; }
.tank i { display: inline-block; width: 38px; height: 7px; background: var(--tief); border: 1px solid var(--line); position: relative; }
.tank i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--tf, var(--akzent)); }
.tank.tief i::after { --tf: var(--rot); }
.fz-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fz-kopf h2 { font-size: 28px; }
.monate { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 140px; }
.monate div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; font-size: 12px; color: var(--fg3); }
.monate span.b { width: 100%; max-width: 60px; background: var(--akzent); min-height: 2px; }
.monate b { font-size: 12.5px; color: var(--fg); font-weight: 600; }
.filter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.filter .knoepfe { padding-bottom: 1px; }
td select, td input[type=text] { font: 13.5px "Noto Sans", Arial, sans-serif; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; }
td input[type=text] { width: 100%; min-width: 120px; }
td.strecke { min-width: 170px; }
td .klein-text { white-space: nowrap; }
tr.laeuft td { color: var(--akzent); }
.meldungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.meldungen li { display: flex; gap: 14px; flex-wrap: wrap; padding: 8px 12px; background: var(--panel); border-left: 4px solid var(--warn); font-size: 14px; }
.meldungen li .z { color: var(--fg3); font-variant-numeric: tabular-nums; }
.meldungen:empty::before { content: "Keine Meldungen."; color: var(--fg3); font-size: 14px; }
.einladen { grid-template-columns: 1.4fr 1fr .9fr auto; }
.leaflet-container { font: 13px "Noto Sans", Arial, sans-serif; background: var(--panel); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--tief); color: var(--fg); border: 1px solid var(--line); border-radius: 0; }
.leaflet-popup-content b { font-size: 14.5px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--fg3); }
.leaflet-control-attribution { background: rgba(45, 58, 64, .85) !important; color: var(--fg3); }
.leaflet-control-attribution a { color: var(--fg2); }
.leaflet-bar a { background: var(--tief); color: var(--fg); border-color: var(--line); }
@media (max-width: 980px) {
  .flotte { grid-template-columns: 1fr; }
  .karte { height: 360px; }
  .fz-liste { max-height: none; }
  .filter { grid-template-columns: 1fr 1fr; }
  .fakten.fuenf { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) { .fakten.fuenf { grid-template-columns: 1fr 1fr; } .einladen { grid-template-columns: 1fr; } }
/* Etappe A: Fahrzeugakte, Mitarbeitende, Verwaltung */
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px 14px; }
tr.klickbar { cursor: pointer; } tr.klickbar:hover td { background: var(--panel); }
tr.aus td { opacity: .55; }
code { font: 12.5px Consolas, monospace; background: var(--panel); padding: 1px 5px; }
code.gesperrt { text-decoration: line-through; color: var(--rot); }
.dlg { background: var(--tief); color: var(--fg); border: 1px solid var(--line); padding: 22px; width: min(760px, 94vw); }
.dlg::backdrop { background: rgba(0, 0, 0, .55); }
.reihe .feld { min-width: 120px; }
details.firma { border: 1px solid var(--line); background: var(--panel); padding: 8px 12px; margin-bottom: 6px; }
details.firma summary { cursor: pointer; }
details.firma.aus { opacity: .6; }
ul.filialen { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ul.filialen li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
ul.filialen li.aus { opacity: .5; }
.chips li code { background: transparent; }
/* Etappe B: Karten */
.karte.klein { height: 340px; }
.dlg.breit { width: min(1000px, 96vw); }
.dlg.breit .karte { height: min(60vh, 520px); }
#ueFilter { align-items: flex-end; }
/* DARUHub: Anmeldekasten in der Mitte */
section.flaeche.schmal { max-width: 480px; margin: 40px auto; }
.knoepfe select { font: 13.5px "Noto Sans", Arial, sans-serif; color: var(--fg); background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; }

/* Personenkarte, Fotos, Zutritt */
.foto { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--panel2, #4b5f68); color: var(--fg2, #d3dddf); font-size: 12px; font-weight: 600; flex: none; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.gross { width: 92px; height: 92px; font-size: 26px; }
.karte-person { border: 1px solid var(--line, #587077); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.karte-kopf { display: flex; gap: 16px; align-items: center; }
.karte-kopf > div:nth-child(2) { flex: 1; }
.karte-kopf h3 { margin: 0 0 4px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.raster .knoepfe, .raster .fehler, .raster .hinweis { grid-column: 1 / -1; }
td.zutritt .pill { margin: 1px 0; font-size: 11.5px; }
button.link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
button.link:hover b { text-decoration: underline; }

.imp-zeile { font-size: 14px; color: var(--fg2); margin: 2px 0; }
.imp-zeile b { color: var(--fg); min-width: 44px; display: inline-block; text-align: right; margin-right: 6px; }

/* Verteiler */
.verteiler table { font-size: 13.5px; }
.verteiler th { white-space: nowrap; }
.verteiler select { font: 13px "Noto Sans", Arial, sans-serif; color: var(--fg3); background: var(--panel); border: 1px solid var(--line); padding: 4px 6px; max-width: 150px; }
.verteiler select.hat { color: var(--fg); border-color: var(--akzent); }

/* Verwaltungsliste: Knöpfe der letzten Spalte untereinander umbrechen statt abschneiden (Zelle bleibt Tabellenzelle) */
#vListe td.knoepfe { display: table-cell; min-width: 200px; }
#vListe td.knoepfe > .knopf, #vListe td.knoepfe > select { margin: 0 6px 6px 0; vertical-align: top; }
#vListe td.knoepfe .knopf { white-space: normal; text-align: left; }
#vListe td .klein-text { white-space: normal; }
#vListe td.zutritt { max-width: 180px; }


/* Ganze Breite wie FASS und Portal (Entscheid 06.11.2026); Formulare und Textabsätze behalten ihre eigene Breite */
.in { max-width: none; padding: 0 24px; }

/* Gemeinsame Anmeldeseite (daru-login.css) in der Programmfarbe Gold; die Karten werden per hidden umgeschaltet */
.dl.generator.hub { --dl-farbe: #c9a46a; }
.dl.hub button[type=submit] { color: var(--akzent-text); }
.dl.generator.hub section.dl-karte[hidden], .dl.generator.hub[hidden] { display: none !important; }
.dl.hub .dl-inhalt a { color: #d3dddf; }

/* Übersicht (Startseite für HR und Admins, Variante A 06.11.2026): Zahlen oben, Programme als Kacheln, rechts «Zu erledigen» */
.ue-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.ue-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ue-zahl { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.ue-zahl span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.ue-zahl b { font: 400 34px/1.1 "Metrophobic", "Segoe UI", Arial, sans-serif; color: var(--fg); }
.ue-zahl small { font-size: 12.5px; color: var(--fg3); }
.ue-zahl.gold b { color: var(--akzent); }
.ue-zahl.rot b { color: var(--rot); }
.ue-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ue-raster h3 { margin-bottom: 10px; }
.ue-programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ue-prog { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 30px 12px 14px; min-height: 86px; background: var(--panel); border: 1px solid var(--line);
  border-top: 4px solid var(--farbe); color: var(--fg); text-decoration: none; }
a.ue-prog:hover { background: var(--panel2); border-color: var(--farbe); }
.ue-prog b { font: 400 18px "Metrophobic", "Segoe UI", Arial, sans-serif; }
.ue-prog span { font-size: 13.5px; color: var(--fg2); }
.ue-prog small { font-size: 12px; color: var(--fg3); }
.ue-prog i { position: absolute; top: 10px; right: 12px; font-style: normal; color: var(--fg3); }
.ue-seite { display: flex; flex-direction: column; gap: 14px; }
.ue-box { background: var(--panel); border: 1px solid var(--line); padding: 14px 16px; }
.ue-box h3 { color: var(--akzent); font-size: 17px; }
.ue-aufgabe { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; background: none; border: 0;
  border-bottom: 1px solid var(--panel2); color: var(--fg); font: 14px "Noto Sans", Arial, sans-serif; text-align: left; cursor: pointer; }
.ue-aufgabe:last-child { border-bottom: 0; }
.ue-aufgabe i { font-style: normal; color: var(--akzent); }
.ue-aufgabe:hover span { text-decoration: underline; }
.ue-aufgabe.austritte span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--rot); }
.ue-aufgabe.ohnePw span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--akzent); }
.ue-zeile { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--panel2); font-size: 13.5px; }
.ue-zeile:last-child { border-bottom: 0; }
.ue-zeile span small { display: block; color: var(--fg3); font-size: 12px; word-break: break-word; }
.ue-zeile > small { color: var(--fg3); font-size: 12px; text-align: right; flex-shrink: 0; }
@media (max-width: 820px) { .ue-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ue-raster { grid-template-columns: 1fr; } }

/* ---- Ausbau 06.11.2026: Diagramme, Mein Konto, Verwaltung mit Reitern ---- */
/* Diagramme in der Übersicht */
.ue-diagramme { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ue-diagramme .dg { grid-column: span 2; }
.ue-diagramme .dg.breit { grid-column: span 3; }
.dg { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dg figcaption { font: 400 17px "Metrophobic", "Segoe UI", Arial, sans-serif; color: var(--akzent); }
.dg figcaption small { display: block; font: 12px "Noto Sans", Arial, sans-serif; color: var(--fg3); }
.dg-ring { display: flex; align-items: center; gap: 16px; }
.dg-ring svg { width: 116px; height: 116px; flex: none; }
.dg-gross { font: 400 20px "Metrophobic", "Segoe UI", Arial, sans-serif; fill: var(--fg); }
.dg-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--fg2); }
.dg-ring .dg-legende { flex-direction: column; }
.dg-legende i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }
.dg-kopfzahl { font-size: 13px; color: var(--fg3); }
.dg-kopfzahl b { font: 400 24px "Metrophobic", "Segoe UI", Arial, sans-serif; color: var(--fg); margin-right: 4px; }
.dg-linie { width: 100%; height: 120px; display: block; }
.dg-linie rect[data-i]:hover, .dg-linie rect[data-i]:focus { fill: rgba(201, 164, 106, .14); outline: none; }
.dg-achse { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fg3); margin-top: -12px; }
.dg-balken { display: flex; flex-direction: column; gap: 7px; }
.dg-b { display: grid; grid-template-columns: minmax(80px, 38%) minmax(0, 1fr) 36px; gap: 8px; align-items: center; font-size: 13px; color: var(--fg2); }
.dg-b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-b b { text-align: right; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.dg-spur { height: 10px; background: var(--tief); }
.dg-spur i { display: block; height: 100%; min-width: 2px; border-radius: 0 4px 4px 0; }
.dg-b:hover span, .dg-b:focus span { color: var(--fg); }
.dg-saeulen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 140px; align-items: end; }
.dg-monat { display: flex; flex-direction: column; align-items: stretch; height: 100%; gap: 4px; outline: none; }
.dg-paar { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--line); }
.dg-paar i { width: 42%; max-width: 14px; min-height: 0; border-radius: 4px 4px 0 0; }
.dg-monat span { font-size: 11px; color: var(--fg3); text-align: center; }
.dg-monat:hover .dg-paar, .dg-monat:focus .dg-paar { background: rgba(201, 164, 106, .10); }
.dg-tip { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; background: var(--tief); border: 1px solid var(--akzent); color: var(--fg); font-size: 13px; white-space: nowrap; }
@media (max-width: 900px) { .ue-diagramme { grid-template-columns: 1fr; } .ue-diagramme .dg, .ue-diagramme .dg.breit { grid-column: auto; } }

/* Mein Konto */
.mk-oben, .mk-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.mk-profil { display: flex; gap: 18px; align-items: center; }
.mk-profil .hinweis { margin-top: 4px; }
.mk-bild { width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: var(--akzent); color: var(--akzent-text); font: 400 30px "Metrophobic", "Segoe UI", Arial, sans-serif; }
.mk-bild img { width: 100%; height: 100%; object-fit: cover; }
.mk-programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.ue-prog.klein { min-height: 64px; }
.mk-staerke { display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.mk-balken { height: 6px; background: var(--tief); }
.mk-balken i { display: block; height: 100%; width: 0; transition: width .2s; background: var(--fg3); }
.mk-balken i.rot { background: var(--rot); } .mk-balken i.gold { background: var(--akzent); } .mk-balken i.gruen { background: #7fe0a8; }
.mk-unten .felder { max-width: 460px; }
@media (max-width: 820px) { .mk-oben, .mk-unten { grid-template-columns: 1fr; } }

/* Verwaltung: Reiter */
.unter { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--line); margin-top: -4px; }
.unter button { background: none; border: 0; padding: 10px 2px; color: var(--fg3); font: 600 14.5px "Noto Sans", Arial, sans-serif; cursor: pointer; }
.unter button:hover { color: var(--fg); }
.unter button[aria-selected="true"] { color: var(--fg); box-shadow: inset 0 -3px 0 var(--akzent); }
.unter .zaehler { display: inline-block; min-width: 22px; margin-left: 4px; padding: 0 6px; font-size: 12px; background: var(--panel); color: var(--fg2); text-align: center; }
.unter .zaehler:empty { display: none; }
.teil { display: flex; flex-direction: column; gap: 14px; }
.teil .filter { grid-template-columns: minmax(0, 1fr) auto auto auto; }
table.personen tbody tr:hover { background: rgba(255, 255, 255, .025); }
/* Menü ⋯ pro Person */
details.menue { position: relative; }
details.menue > summary { list-style: none; cursor: pointer; width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1;
  color: var(--fg2); border: 1px solid var(--line); background: var(--panel); }
details.menue > summary::-webkit-details-marker { display: none; }
details.menue[open] > summary, details.menue > summary:hover { border-color: var(--akzent); color: var(--fg); }
.menue-liste { position: absolute; right: 0; top: 34px; z-index: 20; min-width: 250px; display: flex; flex-direction: column; padding: 6px; background: var(--tief); border: 1px solid var(--line);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); }
.menue-liste button { text-align: left; background: none; border: 0; padding: 8px 10px; color: var(--fg); font: 14px "Noto Sans", Arial, sans-serif; cursor: pointer; }
.menue-liste button:hover { background: var(--panel); }
.menue-liste button.rot { color: var(--rot); }
.menue-liste .feld { padding: 8px 10px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
/* Daten einlesen */
.dl-wege { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.weg { display: flex; flex-direction: column; gap: 8px; border-left: 4px solid var(--akzent); }
.weg.blau { border-left-color: #6fb0e8; } .weg.lila { border-left-color: #8f9bd6; }
.weg h3 { color: var(--fg) !important; }
.weg .knoepfe, .weg .ablage { margin-top: auto; }
.weg .ablage { padding: 16px 10px; }
details.mehr summary { cursor: pointer; color: var(--fg2); font-size: 14px; }
details.mehr .hinweis { margin-top: 8px; }
@media (max-width: 900px) { .dl-wege { grid-template-columns: 1fr; } .teil .filter { grid-template-columns: 1fr; } }
.mk-programme > p { grid-column: 1 / -1; margin: 0; }
.ue-box > h3 + .hinweis { margin-top: 4px; }