/* Firmenfarben kommen als CSS-Variablen aus den Einstellungen (Verwaltung → Design). */
:root {
  --text: #1d2329; --text-leise: #5b6670; --rand: #d5dbe1; --flaeche: #ffffff;
  --gruen: #1f8a4c; --gelb: #e0a100; --rot: #c62828;
  --radius: 10px; --schatten: 0 1px 3px rgba(0,0,0,.08);
  --auf-primaer: #fff; --auf-akzent: #fff;  /* Schrift auf Hauptfarbe (Kopf, Knöpfe) bzw. Akzent – Design */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-ueberschrift: var(--schrift);
  /* Flächen und Hinweisfarben – im Dunkelmodus unten überschrieben */
  --flaeche-2: #eef1f4; --flaeche-3: #e6e9ed; --primaer-text: var(--primaer);
  --blau-hell: #eef4fb; --blau: #1d4f91; --gruen-hell: #e7f5ec; --tuerkis-hell: #e6f2f1; --tuerkis: #11695f;
  --rot-hell: #fdecea; --gelb-hell: #fff3d6; --gelb-text: #8a5a00;
  color-scheme: light;
  font-family: var(--schrift);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hintergrund); color: var(--text); font-size: 17px; line-height: 1.45; }
h1, h2, h3 { font-family: var(--schrift-ueberschrift); }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; } h2 { font-size: 1.15rem; margin: 0 0 .7rem; }
a { color: var(--primaer-text); }
small { color: var(--text-leise); }

.kopf { background: var(--primaer); color: var(--auf-primaer); display: flex; align-items: center; gap: 1rem;
  padding: .65rem 1rem; min-height: 4.6rem; position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
.marke { display: flex; align-items: center; color: var(--auf-primaer); text-decoration: none; font-weight: 700; min-height: 2.75rem; }
/* Logo größer und ohne eigenen Hintergrund (transparente Logos wirken direkt auf der Kopffarbe) */
.marke img { max-height: 3.6rem; max-width: 18rem; background: transparent; padding: 0; border-radius: 0; display: block; }
.hauptmenue { --menue-schrift: .93rem; display: flex; gap: .2rem; margin-left: auto; align-items: center; flex-wrap: wrap; }
.hauptmenue a, .hauptmenue .link { color: var(--auf-primaer); text-decoration: none; padding: .55rem .7rem; border-radius: 6px;
  background: none; border: 0; font: inherit; cursor: pointer; }
.hauptmenue a:hover, .hauptmenue .link:hover { background: rgba(255,255,255,.15); }
.hauptmenue form { margin: 0; }
.menue-knopf { display: none; margin-left: auto; background: none; color: var(--auf-primaer); border: 1px solid rgba(255,255,255,.5);
  border-radius: .4rem; font-size: 1.4rem; width: 3rem; height: 2.75rem; line-height: 1; padding: 0; }
.testmodus-band { color: #1d2329; background: repeating-linear-gradient(45deg,#ffe082,#ffe082 12px,#ffd54f 12px,#ffd54f 24px);
  text-align: center; font-weight: 700; padding: .2rem; font-size: .85rem; }

.inhalt { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.karte { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.2rem; margin-bottom: 1rem; }
.karte.schmal { max-width: 520px; margin-left: auto; margin-right: auto; }
.warnkarte { border-left: 5px solid var(--gelb); }
.raster2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.titelzeile h1 { margin: 0; }

.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .6rem 1.2rem;
  background: var(--primaer); color: var(--auf-primaer); border: 0; border-radius: 8px; font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.knopf:hover { filter: brightness(1.1); }
.knopf.zweit { background: var(--flaeche); color: var(--primaer-text); border: 2px solid var(--primaer); }
.knopf.akzent { background: var(--akzent); }
.knopf.gefahr { background: var(--rot); }
.knopf.klein { min-height: 38px; padding: .35rem .8rem; font-size: .9rem; }
.knopf.voll { width: 100%; }
.knopfzeile { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.aktionen { display: flex; gap: .4rem; flex-wrap: wrap; } .aktionen form { margin: 0; }

.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .3rem; }
.feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea, select {
  width: 100%; min-height: 48px; padding: .55rem .7rem; font: inherit; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); }
.feld input[type=color] { padding: 2px; width: 90px; }
.feld-haken label { display: flex; gap: .6rem; align-items: center; font-weight: 500; min-height: 44px; }
.feld-haken input { width: 26px; height: 26px; }
.feld.fehler input, .feld.fehler select, .feld.fehler textarea { border-color: var(--rot); }
.fehlertext { color: var(--rot); font-size: .9rem; margin-top: .25rem; }
.hinweis { color: var(--text-leise); font-size: .92rem; }
.trenner { text-align: center; color: var(--text-leise); }

.meldung { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: var(--blau-hell); border-left: 5px solid var(--primaer); }
.meldung-success { background: var(--gruen-hell); border-color: var(--gruen); }
.meldung-error { background: var(--rot-hell); border-color: var(--rot); }
.meldung-warning { background: var(--gelb-hell); border-color: var(--gelb); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .8rem; margin: 1rem 0; }
.kacheln.gross { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.kachel { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 90px; padding: 1rem;
  background: var(--flaeche); border: 2px solid var(--primaer); border-radius: var(--radius); color: var(--primaer-text);
  font-weight: 700; font-size: 1.15rem; text-decoration: none; box-shadow: var(--schatten); }
.kachel:hover { background: var(--primaer); color: var(--auf-primaer); }

.pinblock { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: .5rem; }
.pintaste { min-height: 64px; font-size: 1.5rem; font-weight: 700; border-radius: 10px; border: 1px solid var(--rand); background: var(--flaeche); cursor: pointer; }
.pintaste.ok { background: var(--primaer); color: var(--auf-primaer); border: 0; }

.tabelle-wrap { overflow-x: auto; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.tabelle { width: 100%; border-collapse: collapse; }
.tabelle th, .tabelle td { padding: .6rem .7rem; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.tabelle th { background: var(--flaeche-2); font-size: .9rem; }
.tabelle .mitte { text-align: center; }
.protokoll .alt { color: var(--rot); text-decoration: line-through; } .protokoll .neu { color: var(--gruen); font-weight: 600; }
.marke-chip { display: inline-block; padding: .1rem .5rem; border-radius: 99px; font-size: .8rem; background: var(--flaeche-2); margin: .1rem 0; }
.marke-chip.gruen { background: var(--gruen-hell); color: var(--gruen); } .marke-chip.rot { background: var(--rot-hell); color: var(--rot); }
.filterzeile { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; } .filterzeile select { max-width: 320px; }
.logo-vorschau img { max-height: 80px; max-width: 100%; }

/* Smartphone/Tablet: Menü einklappen (unterhalb der Desktop-Seitenleiste) */
@media (max-width: 1099px) {
  .menue-knopf { display: block; }
  .hauptmenue { display: none; width: 100%; flex-direction: column; align-items: stretch; }
  .hauptmenue.offen { display: flex; }
  .hauptmenue a, .hauptmenue .link { padding: .8rem; text-align: left; width: 100%; }
}
@media (max-width: 760px) {
  .tabelle:not(.matrix) thead { display: none; }
  .tabelle:not(.matrix) tr { display: block; border-bottom: 2px solid var(--rand); padding: .4rem 0; }
  .tabelle:not(.matrix) td { display: flex; gap: .6rem; border: 0; padding: .3rem .7rem; }
  .tabelle:not(.matrix) td[data-label]::before { content: attr(data-label); font-weight: 600; min-width: 110px; color: var(--text-leise); }
}
body.kiosk { font-size: 22px; }

/* Aufträge */
.status { display: inline-block; padding: .15rem .6rem; border-radius: 99px; background: var(--flaeche-3); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.status.gross { font-size: 1rem; padding: .35rem .9rem; }
.status.s-angeliefert, .status.s-eingeplant { background: var(--blau-hell); color: var(--blau); }
.status.s-gebeizt, .status.s-24h_io, .status.s-72h_io, .status.s-gestrahlt { background: var(--tuerkis-hell); color: var(--tuerkis); }
.status.s-abholbereit, .status.s-abgeholt, .status.s-abgerechnet, .status.ok { background: var(--gruen-hell); color: var(--gruen); }
.status.s-archiv { background: var(--flaeche-3); color: var(--text-leise); }
.status.z-klaerung, .status.nio { background: var(--gelb-hell); color: var(--gelb-text); }
.status.z-storniert { background: var(--rot-hell); color: var(--rot); }
.marke-chip.gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.verfahren { font-weight: 700; }
.zeitleiste { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.zeitleiste li { padding: .3rem .7rem; border-radius: 6px; background: var(--flaeche); border: 1px solid var(--rand); font-size: .85rem; color: var(--text-leise); }
.zeitleiste li.erledigt { background: var(--primaer); color: var(--auf-primaer); border-color: var(--primaer); }
.zeitleiste li.aktiv { border: 2px solid var(--akzent); color: var(--text); font-weight: 700; }
.aktiver-schritt { border-left: 5px solid var(--akzent); }
.knopf.gross { min-height: 60px; font-size: 1.1rem; padding: .8rem 1.6rem; }
dl.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.daten dt { color: var(--text-leise); } dl.daten dd { margin: 0; font-weight: 500; }
.fotoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.fotoraster.klein { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.fotoraster a { display: block; text-decoration: none; color: var(--text-leise); font-size: .8rem; }
.fotoraster img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; border: 1px solid var(--rand); display: block; }
.foto-hinweis { background: var(--gelb-hell); border-radius: 8px; padding: .6rem .8rem; margin-bottom: 1rem; }
[data-fotoliste] input { margin-bottom: .5rem; }
.suchmaske { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 0 .8rem; align-items: end; }
@media (max-width: 760px) { .suchmaske { grid-template-columns: 1fr 1fr; } .suchmaske .feld:first-child { grid-column: 1 / -1; } }
.tageszeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .8rem; margin: 0 -.4rem; border-bottom: 1px solid var(--rand);
  color: var(--text); text-decoration: none; min-height: 52px; border-radius: 6px; }
.tageszeile:hover { background: var(--flaeche-2); } .tageszeile .pfeil { margin-left: auto; color: var(--primaer-text); font-weight: 600; }
.feld ul, .feld > div > div { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.feld ul li label, .feld > div > div label { display: flex; align-items: center; gap: .4rem; font-weight: 500; border: 1px solid var(--rand);
  border-radius: 8px; padding: .55rem .8rem; background: var(--flaeche); min-height: 48px; cursor: pointer; }
.feld input[type=radio], .feld input[type=checkbox] { width: 22px; height: 22px; }
details.karte summary { cursor: pointer; min-height: 32px; }
.fehlerliste ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.foto-vorschau { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.vorschau-kachel { display: flex; flex-direction: column; gap: .2rem; width: 120px; font-size: .8rem; color: var(--gruen); font-weight: 600; word-break: break-all; }
.vorschau-kachel img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; border: 2px solid var(--gruen); }
.vorschau-kachel.fehler { color: var(--rot); width: 100%; }
button[disabled] { opacity: .6; cursor: wait; }
.tagesuebersicht h3 { font-size: 1rem; margin: .8rem 0 .3rem; }
ul.liste { margin: 0; padding-left: 1.1rem; } ul.liste li { margin: .25rem 0; }
.fristenbox { background: var(--blau-hell); border-radius: 8px; padding: .7rem .9rem; margin: .5rem 0; }
.zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; margin-bottom: .4rem;
  border: 2px solid var(--primaer); border-radius: 8px; color: var(--primaer-text); font-weight: 600; text-decoration: none; background: var(--flaeche); }
.zurueck:hover { background: var(--primaer); color: var(--auf-primaer); }
.auftragsinfo { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin: -.5rem 0 1rem; color: var(--text-leise); }
.auftragsinfo strong { color: var(--text); }
.auftragsinfo span { white-space: nowrap; background: var(--flaeche-2); border-radius: 6px; padding: .1rem .5rem; color: var(--text); }
.karte .auftragsinfo { margin: 0 0 1rem; }
.abholbox { background: var(--blau-hell); border-radius: 8px; padding: .7rem .9rem; margin-bottom: 1rem; }
.abholbox.warnung { background: var(--rot-hell); border-left: 5px solid var(--rot); }
.abholwarnung { color: var(--rot); font-weight: 600; margin-top: .4rem; }
.feld label.gesperrt { opacity: .45; background: var(--flaeche-3); cursor: not-allowed; }
.kriterium { border-top: 1px solid var(--rand); padding: .9rem 0; }
.kriterium:first-of-type { border-top: 0; }
.kriterium-text { font-weight: 600; margin-bottom: .5rem; }
.bewertung { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.bewertung label { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 52px; border: 2px solid var(--rand);
  border-radius: 10px; font-weight: 700; cursor: pointer; background: var(--flaeche); }
.bewertung input { width: 22px; height: 22px; }
.bewertung .b-io:has(input:checked) { border-color: var(--gruen); background: var(--gruen-hell); color: var(--gruen); }
.bewertung .b-nio:has(input:checked) { border-color: var(--rot); background: var(--rot-hell); color: var(--rot); }
.bewertung .b-entf:has(input:checked) { border-color: var(--text-leise); background: var(--flaeche-3); }
.nio-felder { margin-top: .7rem; padding: .7rem; border-radius: 8px; background: var(--rot-hell); }
.gesamt.io { border-left: 6px solid var(--gruen); } .gesamt.nio { border-left: 6px solid var(--rot); }
.haken-klein { display: flex !important; gap: .5rem; align-items: center; font-weight: 500 !important; margin: .6rem 0 .3rem; }
.zaehler { display: inline-block; min-width: 1.4rem; padding: 0 .35rem; border-radius: 99px; background: var(--akzent); color: var(--auf-akzent); font-size: .8rem; text-align: center; }
.testmodus-band a { color: inherit; }
.uhr { color: var(--auf-primaer); white-space: nowrap; font-size: .95rem; opacity: .95; display: flex; gap: .4rem; align-items: baseline; }
.uhr strong { font-size: 1.15rem; }
@media (max-width: 1099px) { .uhr { margin-left: auto; } .menue-knopf { margin-left: .6rem; } }
@media (max-width: 400px) { .uhr { font-size: .8rem; } .uhr strong { font-size: 1rem; } }
body.kiosk .uhr { font-size: 1.4rem; } body.kiosk .uhr strong { font-size: 1.8rem; }
.fotokachel { position: relative; }
.foto-weg { position: absolute; top: 4px; right: 4px; width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.65); color: #fff; font-size: 1rem; cursor: pointer; }
[data-weiteres-foto] { margin-top: .4rem; }
.zeitleiste li.entfallen { background: var(--flaeche-3); color: var(--text-leise); text-decoration: line-through; border-style: dashed; }
/* Personal-Ampel */
.ampel { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem; border-radius: 99px; font-weight: 700; font-size: .9rem; }
.ampel-punkt { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ampel-gruen { background: var(--gruen-hell); color: var(--gruen); } .ampel-gruen .ampel-punkt { background: var(--gruen); }
.ampel-gelb { background: var(--gelb-hell); color: var(--gelb-text); } .ampel-gelb .ampel-punkt { background: var(--gelb); }
.ampel-rot { background: var(--rot-hell); color: var(--rot); } .ampel-rot .ampel-punkt { background: var(--rot); }
.ampel-aus { background: var(--flaeche-3); color: var(--text-leise); }
.planung td, .planung th { text-align: center; white-space: nowrap; }
.planung tbody th { text-align: left; }
.planung select { min-height: 40px; padding: .2rem; width: auto; font-size: .9rem; }
.planung td.abwesend { background: var(--rot-hell); }
.planung th.heute { background: var(--primaer); } .planung th.heute a { color: var(--auf-primaer); }
.planung .wochenstart { border-left: 3px solid var(--primaer); }
.positionszahl { font-size: .8rem; margin-top: .2rem; } .positionszahl .unter { color: var(--rot); font-weight: 700; } .positionszahl .ueber { color: var(--gelb-text); font-weight: 700; }
.personalraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; }
.personal-zeile { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); }
.personal-zeile select { min-height: 40px; }
.personal-zeile.abwesend { background: var(--rot-hell); }
/* Kiosk */
body.kiosk .inhalt { max-width: none; }
.kiosk-kopf { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.kiosk-kopf .ampel { font-size: 1.3rem; padding: .4rem 1rem; } .kiosk-kopf .ampel-punkt { width: 22px; height: 22px; }
.kiosk-personal { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.kiosk-ma { background: var(--flaeche); border: 2px solid var(--primaer); border-radius: 8px; padding: .2rem .7rem; font-weight: 700; }
.kiosk-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1rem; }
.kiosk-zeile { padding: .5rem 0; border-bottom: 1px solid var(--rand); }
.kiosk-fuss { text-align: center; }
.mein-tag-personal { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.planung td.ohne { background: var(--flaeche-2); }
.planung .gruppenzeile th { background: var(--flaeche-3); text-align: left; font-size: .85rem; }
.personal-zeile.ohne { background: var(--flaeche-2); }
/* Übergabe-Bemerkungen */
.notiz { border-left: 4px solid var(--rand); padding: .4rem .7rem; margin-bottom: .5rem; background: var(--flaeche-2); border-radius: 0 8px 8px 0; }
.notiz.wichtig { border-left-color: var(--rot); background: var(--rot-hell); }
.notiz-kopf { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--text-leise); }
.notiz-kopf form { margin-left: auto; }
.notiz-text { margin-top: .2rem; }
.notiz-form textarea { width: 100%; font: inherit; border: 1px solid var(--rand); border-radius: 8px; padding: .5rem; }
.notiz-form .knopfzeile { margin-top: .4rem; align-items: center; }
.planung .notizzeile td { white-space: normal; vertical-align: top; min-width: 120px; }
.notiz-kurz { display: block; font-size: .8rem; text-align: left; color: var(--text); text-decoration: none; padding: .1rem 0; }
.notiz-kurz.wichtig { color: var(--rot); font-weight: 700; }
.notiz-plus { display: inline-block; font-weight: 700; text-decoration: none; padding: 0 .4rem; border: 1px solid var(--rand); border-radius: 6px; }
.matrix td.geaendert { background: var(--gelb-hell); }
.rechte-haken { width: 24px; height: 24px; }
.kachel-zweizeilig { flex-direction: column; gap: .2rem; }
.kachel-zweizeilig small { font-weight: 500; font-size: .75rem; color: inherit; opacity: .8; }
.kacheln-breit { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.suchmaske > .feld { min-width: 0; } .suchmaske input { min-width: 0; }
code { word-break: break-all; }
.raster2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.zeitraum-form { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr auto; gap: 0 .8rem; align-items: end; }
.zeitraum-form > .feld { min-width: 0; }
@media (max-width: 760px) { .zeitraum-form { grid-template-columns: 1fr 1fr; } .zeitraum-form .feld:first-child { grid-column: 1 / -1; } }
.pos-kasten { display: inline-block; padding: .15rem .55rem; border-radius: 6px; border: 1px solid var(--rand); background: var(--flaeche); font-weight: 600; font-size: .85rem; margin: .1rem .1rem; }
.pos-kasten.pos-unter { background: var(--rot); color: #fff; border-color: var(--rot); }
.pos-kasten.pos-ueber { background: var(--gelb-hell); border-color: var(--gelb); }
body.kiosk .pos-kasten { font-size: 1.2rem; padding: .3rem .8rem; }
.personal-kuerzel { display: inline-flex; flex-wrap: wrap; gap: .2rem; }
.positionszahl .pos-kasten { font-size: .72rem; padding: .05rem .35rem; margin: .05rem; }
/* Einteilungsübersicht */
.einteilung-kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: 1.05rem; }
.einteilung-liste { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; align-items: center; }
.einteilung-liste dt { color: var(--text-leise); font-size: .9rem; }
.einteilung-liste dt .pos-kasten { margin: 0; }
.einteilung-liste dd { margin: 0; }
.ma-kuerzel { font-weight: 700; }
.einteilung-liste .leer { color: var(--text-leise); }
.einteilung-liste .abwesend-titel, .einteilung-liste .abwesend-liste { color: var(--text-leise); font-size: .8rem; font-weight: 400; }
body.kiosk .einteilung-liste { font-size: 1.3rem; } body.kiosk .einteilung-liste dt { font-size: 1.1rem; }
.notiz-neu { margin: 0 0 1rem; }
.notiz-neu summary { display: inline-block; cursor: pointer; color: var(--primaer-text); font-weight: 600; padding: .3rem .6rem; border: 1px dashed var(--rand); border-radius: 8px; }
.notiz-neu[open] { background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); padding: .8rem; }

/* ===== Geräteanpassung (Responsive) ===== */
/* Anzeigegröße: Grundgröße je Gerätebreite × persönliche Einstellung je Gerät (Mein Konto → Anzeigegröße).
   Alle rem-Angaben (Schrift, Abstände, Überschriften) wachsen mit. Handy bleibt bei 1. */
html { --geraet-skala: 1; font-size: calc(16px * var(--geraet-skala) * var(--nutzer-skala, 1) * var(--firmen-skala, 1)); }
@media (min-width: 760px) { html { --geraet-skala: 1.2; } }
/* Schrift wächst fließend mit der Bildschirmbreite */
body { font-size: clamp(1rem, .94rem + .25vw, 1.19rem); }
.inhalt { max-width: 75rem; }

/* Mein Tag: ab Tabletbreite Personal/Bemerkung links, Arbeitslisten rechts */
.tagesraster { display: block; }
@media (min-width: 900px) {
  .tagesraster { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
  .tagesrand { position: sticky; top: 4.5rem; }
}
/* Große Bildschirme: breiter nutzen, Arbeitslisten zweispaltig */
@media (min-width: 1400px) {
  .inhalt { max-width: 105rem; }
  .tagesraster { grid-template-columns: minmax(300px, 1fr) minmax(0, 3fr); }
  .tagesliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1rem; align-items: start; }
  .tagesliste > .karte { margin-bottom: 0; }
  .kiosk-raster { grid-template-columns: repeat(3, 1fr); }
}

/* Touch-Geräte (iPad, Tablets, Handys): größere Bedienflächen unabhängig von der Breite */
@media (pointer: coarse) {
  body { font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem); }
  .hauptmenue a, .hauptmenue .link { padding: .75rem 1rem; min-height: 48px; display: inline-flex; align-items: center; }
  .knopf { min-height: 52px; padding: .7rem 1.3rem; }
  .knopf.klein { min-height: 46px; padding: .5rem 1rem; }
  .tageszeile { min-height: 60px; padding: .9rem .8rem; }
  .feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea, select { min-height: 52px; }
  .bewertung label { min-height: 58px; }
  .zurueck { min-height: 48px; }
  .tabelle th, .tabelle td { padding: .8rem .8rem; }
  .planung select { min-height: 46px; }
}
/* iPad hochkant und kleine Laptops: Formulare zweispaltig nutzen */
@media (min-width: 760px) and (max-width: 1100px) {
  .karte.schmal { max-width: 680px; }
}
.kopfaktionen { margin-bottom: .4rem; }
.auszug-menue { position: relative; }
.auszug-menue summary { list-style: none; }
.auszug-menue summary::-webkit-details-marker { display: none; }
.auszug-wahl { position: absolute; right: 0; top: calc(100% + .3rem); background: var(--flaeche); border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: var(--schatten); padding: .6rem; display: flex; flex-direction: column; gap: .4rem; z-index: 5; min-width: 220px; }
.vorzeitig { margin-top: 1rem; }
.vorzeitig summary { list-style: none; }
.vorzeitig summary::-webkit-details-marker { display: none; }
.vorzeitig-inhalt { margin-top: .8rem; padding: .8rem; border-left: 5px solid var(--gelb); background: var(--gelb-hell); border-radius: 0 8px 8px 0; }
.option-zusatz { font-size: .8rem; color: var(--text-leise); font-weight: 400; margin-left: .3rem; }
.abweichend { margin: .5rem 0 1rem; } .abweichend summary { cursor: pointer; color: var(--primaer-text); font-size: .9rem; margin-bottom: .6rem; }
.pinpunkte { display: flex; justify-content: center; gap: 1rem; margin: .4rem 0 .8rem; }
.pinpunkte span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--primaer); }
.pinpunkte span.voll { background: var(--primaer); }
.haftung-beizerei { background: var(--rot-hell); border-radius: 8px; padding: .4rem .7rem; }

/* Kunden – Ansprechpartner */
.kunde-stamm { max-width: 560px; }
.ansprechpartner { border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem 1rem .4rem; margin: 0 0 .8rem;
  display: flex; gap: 1rem; align-items: flex-end; }
.ansprechpartner.fehler { border-color: var(--rot); }
.ansprechpartner-felder { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .8rem; }
.ansprechpartner-entfernen { margin-bottom: 1rem; white-space: nowrap; display: flex; gap: .4rem; align-items: center; }
@media (max-width: 900px) {
  .ansprechpartner { flex-direction: column; align-items: stretch; }
  .ansprechpartner-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) { .ansprechpartner-felder { grid-template-columns: 1fr; } }
.ap-liste { margin: .2rem 0 0; padding: 0; list-style: none; font-size: .92em; }
.ap-liste li { margin: .1rem 0; }

/* Kopf: ToDos der Tagesposition und offene Hinweise – immer sichtbar, auch bei eingeklapptem Menü (Ä27) */
.kopf-status { display: flex; gap: .4rem; align-items: center; }
.kopf-chip { color: var(--auf-primaer); text-decoration: none; white-space: nowrap; padding: .35rem .6rem; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.45); display: inline-flex; gap: .35rem; align-items: center; min-height: 2.25rem; }
.kopf-chip:hover { background: rgba(255,255,255,.15); }
@media (max-width: 1399px) { .menue-knopf { margin-left: 0; } }
@media (max-width: 520px) {
  .kopf { gap: .45rem; padding: .5rem .6rem; min-height: 3.6rem; }
  .kopf-chip-text { display: none; }
  .kopf-chip { padding: .25rem .45rem; gap: .25rem; font-size: .85rem; }
  .marke img { max-width: 8.5rem; max-height: 2.8rem; }
}

/* Mein Konto: Anzeigegröße je Gerät */
.groessenwahl { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.groessenwahl label { border: 1px solid var(--rand); border-radius: 8px; padding: .5rem .9rem; cursor: pointer; background: var(--flaeche);
  display: inline-flex; gap: .4rem; align-items: center; min-height: 44px; }
.groessenwahl input:checked + span { font-weight: 700; color: var(--primaer-text); }
/* PC: Menü kompakter, damit es bei größerer Schrift in einer Zeile bleibt */
@media (min-width: 1400px) {
  .hauptmenue { flex-wrap: nowrap; gap: 0; }
  .hauptmenue a, .hauptmenue .link { font-size: var(--menue-schrift); padding: .5rem .5rem; white-space: nowrap; }
  .kopf { flex-wrap: nowrap; }
}
/* Passt das Menü (z. B. bei großer Anzeigegröße) nicht in eine Zeile, klappt es auch am PC ein (app.js setzt .kopf-eng) */
.kopf-eng .menue-knopf { display: block; margin-left: 0; }
.kopf-eng .uhr { margin-left: auto; }
.kopf-eng .kopf { flex-wrap: wrap; }
.kopf-eng .hauptmenue { display: none; width: 100%; flex-direction: column; align-items: stretch; }
.kopf-eng .hauptmenue.offen { display: flex; }
.kopf-eng .hauptmenue a, .kopf-eng .hauptmenue .link { padding: .8rem; text-align: left; width: 100%; font-size: var(--menue-schrift); }

/* Kopf zu eng (Handy mit großer Anzeigegröße): Datum ausblenden, nur Uhrzeit und Zähler (app.js setzt .kopf-kompakt) */
.kopf-kompakt .kopf-chip-text { display: none; }
.kopf-minimal [data-uhr-datum], .kopf-minimal .kopf-chip-wort { display: none; }
.kopf-kompakt .kopf { gap: .4rem; padding-left: .5rem; padding-right: .5rem; }
.kopf-chip-symbol { display: none; }
.kopf-minimal .kopf-chip-symbol { display: inline; }
.kopf-kompakt .marke img { max-height: 2.3rem; max-width: 6rem; }
.kopf-kompakt .marke { min-height: 0; }
.kopf-kompakt .menue-knopf { width: 2.5rem; height: 2.3rem; font-size: 1.15rem; }
.kopf-kompakt .kopf-chip { padding: .2rem .4rem; gap: .2rem; min-height: 0; }
.kopf-kompakt .kopf-status { gap: .25rem; }

/* Lieferscheinnummer direkt im Auftrag / in Mein Tag eintragen */
.lieferschein-form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin: 0; }
.lieferschein-form input[type=text] { width: 11rem; max-width: 100%; min-height: 2.4rem; padding: .3rem .6rem; font: inherit;
  border: 1px solid var(--rand); border-radius: 8px; }

/* Verbesserungsvorschläge (Beta) */
.verbesserung { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .7rem 0;
  border-bottom: 1px solid var(--rand); }
.verbesserung:last-child { border-bottom: 0; }
.verbesserung form { margin: 0; flex-shrink: 0; }
.verbesserung.erledigt .verbesserung-text { color: var(--text-leise); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
.verbesserung .hinweis { margin-top: .2rem; }

/* Planen: berechnete Fristen untereinander */
.fristenliste { display: grid; grid-template-columns: auto 1fr; gap: .15rem .9rem; margin: .35rem 0 0; }
.fristenliste dt { color: var(--text-leise); font-weight: 600; }
.fristenliste dd { margin: 0; }

/* Chargen (Ä33) */
.charge-marke { display: inline-block; font-size: .7em; vertical-align: middle; padding: .1rem .55rem; border-radius: 99px;
  background: var(--primaer); color: var(--auf-primaer); font-weight: 600; }
.chargen-karte tr.aktuell td { background: var(--blau-hell); }
.charge-chip { display: inline-block; padding: 0 .45rem; border-radius: 99px; font-size: .8rem; background: var(--blau-hell);
  color: var(--primaer-text); font-weight: 600; white-space: nowrap; }
.aufteilen-hinweis { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .3rem 0 .8rem; }


/* ===== Dunkelmodus (Ä35) – Mein Konto bzw. Menü: Hell / Dunkel / Automatisch (wie das Gerät) ===== */
html[data-modus="dunkel"] {
  --text: #e4e8ec; --text-leise: #9ba5af; --rand: #3a444f; --flaeche: #1d232a; --hintergrund: #12161b;
  --flaeche-2: #262e37; --flaeche-3: #2e3741; --primaer-text: #8fb8ec;
  --gruen: #4cc27e; --gelb: #f0b429; --rot: #ff6b6b;
  --blau-hell: #1a2a3d; --blau: #8fb8ec; --gruen-hell: #163524; --tuerkis-hell: #123230; --tuerkis: #6fd1c4;
  --rot-hell: #3b1d1f; --gelb-hell: #3a2f12; --gelb-text: #f2c766;
  --schatten: 0 1px 3px rgba(0,0,0,.5);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-modus="auto"] {
    --text: #e4e8ec; --text-leise: #9ba5af; --rand: #3a444f; --flaeche: #1d232a; --hintergrund: #12161b;
    --flaeche-2: #262e37; --flaeche-3: #2e3741; --primaer-text: #8fb8ec;
    --gruen: #4cc27e; --gelb: #f0b429; --rot: #ff6b6b;
    --blau-hell: #1a2a3d; --blau: #8fb8ec; --gruen-hell: #163524; --tuerkis-hell: #123230; --tuerkis: #6fd1c4;
    --rot-hell: #3b1d1f; --gelb-hell: #3a2f12; --gelb-text: #f2c766;
    --schatten: 0 1px 3px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
input, select, textarea, button { color: inherit; }
.modus-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.karte > h3 { font-size: 1rem; margin: .9rem 0 .4rem; }
.kachel-name { display: block; font-size: .72rem; font-weight: 500; opacity: .8; margin-top: .15rem; }
.kachel { flex-direction: column; }

/* Organisation (K1) */
.org-kopf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.org-kopf h2, .org-kopf h3 { margin: 0; }
.org-kopf h3 { font-size: 1rem; }
.org-kinder { margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--rand); }
.org-kinder > .karte { box-shadow: none; border: 1px solid var(--rand); }
.org-betriebsstaette { margin-top: .8rem; padding: .7rem .9rem; border-radius: 8px; background: var(--flaeche-2); }
.org-einheiten { list-style: none; margin: .4rem 0 0; padding-left: 0; }
.org-einheiten .org-einheiten { padding-left: 1.2rem; border-left: 2px solid var(--rand); margin-left: .3rem; }
.org-einheit { margin: .3rem 0; }
.org-zeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .2rem 0; }
.org-aktionen { font-size: .85rem; margin-left: auto; }
.org-ressourcen { margin: .1rem 0 .3rem 1rem; padding-left: .8rem; font-size: .92rem; }
.inaktiv > .org-zeile, .karte.inaktiv h2 { opacity: .6; }
.loeschen-zeile { display: flex; gap: .6rem; align-items: center; margin-top: 1rem; flex-wrap: wrap; }

/* Organigramm (K2): Baum als Grafik, waagerecht scrollbar */
.organigramm-karte { overflow-x: auto; }
.organigramm ul { display: flex; justify-content: center; padding-top: 1.1rem; position: relative; margin: 0; padding-left: 0; list-style: none; }
.organigramm > ul { padding-top: 0; }
.organigramm li { position: relative; padding: 1.1rem .4rem 0; display: flex; flex-direction: column; align-items: center; }
.organigramm li::before, .organigramm li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 1.1rem; border-top: 2px solid var(--rand); }
.organigramm li::after { right: auto; left: 50%; border-left: 2px solid var(--rand); }
.organigramm li:only-child::before, .organigramm li:only-child::after { display: none; }
.organigramm li:only-child { padding-top: 0; }
.organigramm li:first-child::before, .organigramm li:last-child::after { border: 0 none; }
.organigramm li:last-child::before { border-right: 2px solid var(--rand); border-radius: 0 6px 0 0; }
.organigramm li:first-child::after { border-radius: 6px 0 0 0; }
.organigramm ul ul::before { content: ""; position: absolute; top: 0; left: 50%; height: 1.1rem; border-left: 2px solid var(--rand); }
.organigramm > ul > li { padding-top: 0; }
.organigramm > ul > li::before, .organigramm > ul > li::after { display: none; }
.org-box { background: var(--flaeche); border: 2px solid var(--primaer-text); border-radius: 10px; padding: .55rem .7rem; min-width: 11rem; max-width: 15rem; text-align: center; box-shadow: var(--schatten); }
.org-box.inaktiv { opacity: .55; border-style: dashed; }
.org-box-titel { font-weight: 700; text-decoration: none; display: block; }
.org-box-unter { font-size: .78rem; color: var(--text-leise); margin: .1rem 0 .3rem; }
.org-box-personen { display: flex; flex-direction: column; gap: .15rem; font-size: .9rem; }
.org-person { text-decoration: none; color: var(--text); }
.org-person small { color: var(--text-leise); }
.org-person-neu, .org-box-neu { font-size: .78rem; }
.org-box-rechte { margin-top: .35rem; }
.org-box-neu { display: inline-block; margin-top: .3rem; }
.organigramm { width: max-content; min-width: 100%; }

/* Arbeitszeit (K3) */
.raster3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.schichtzeiten input[type=time], .schichtzeiten input[type=number] { min-width: 6.5rem; }
.schichtzeiten input[type=text] { min-width: 11rem; }
.schichtplan td { white-space: nowrap; }
.feiertagsliste li.vergangen { color: var(--text-leise); }
.feiertag-datum { display: inline-block; min-width: 5.5rem; font-weight: 600; }
form[data-schicht]:not(.mit-gleitzeit) .gleitzeit-spalte { display: none; }

/* Fokura Core – Cockpit */
.kz-gruppe h3 { font-size: .95rem; margin: .2rem 0 .5rem; color: var(--text-leise); }
.kz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .7rem; margin-bottom: 1rem; }
.kz-kachel { border: 1px solid var(--rand); border-radius: var(--radius); padding: .7rem .8rem; background: var(--flaeche); }
.kz-name { font-size: .85rem; color: var(--text-leise); min-height: 2.2em; }
.kz-wert { font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.kz-trend { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.kz-trend.gut { color: var(--gruen); } .kz-trend.schlecht { color: var(--rot); } .kz-trend.neutral, .kz-trend.leer { color: var(--text-leise); }
.kz-stand { font-size: .8rem; color: var(--text-leise); margin: .2rem 0 0; }
.kz-standorte summary { cursor: pointer; list-style: none; }
.kz-standorte summary::-webkit-details-marker { display: none; }
.kz-standorte summary h2 { display: inline; }
.kz-standorte summary h2::before { content: "▸ "; }
.kz-standorte[open] summary h2::before { content: "▾ "; }
.kz-tabelle td { white-space: nowrap; }
.mein-tag-kz { margin-bottom: 1rem; }
.mein-tag-kz .kz-kacheln { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.mein-tag-kz .kz-wert { font-size: 1.35rem; }
.kopf-firma { color: var(--auf-primaer); opacity: .9; font-weight: 600; font-size: .95rem; white-space: nowrap; }
.kopf-kompakt .kopf-firma { display: none; }
.fusszeile { text-align: center; font-size: .75rem; color: var(--text-leise); padding: 1.5rem 1rem 1rem; line-height: 2; }
.katalog-zeile { display: flex; gap: .5rem; align-items: center; min-height: 36px; margin: .2rem 0; }
.katalog-zeile input { width: 22px; height: 22px; flex: none; }
.vorschau-status { display: block; color: var(--text-leise); margin-top: .25rem; }
.fuss-verbesserung { color: var(--text-leise); font-size: .85rem; }
.kz-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0 1rem; margin-bottom: .6rem; }

/* Personal kompakt (ab 15 Personen) und eigene Einteilung im Kopf */
.einteilung-zahlen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.pos-kasten.abwesend-zahl { color: var(--text-leise); }
.einteilung-details summary { cursor: pointer; font-size: .85rem; color: var(--primaer-text); margin-top: .5rem; }
.kopf-einteilung { color: var(--auf-primaer); opacity: .6; font-size: .78rem; white-space: nowrap; }
.kopf-minimal .kopf-einteilung { display: none; }

/* Stellenprofile */
.stellenanzeige { white-space: pre-wrap; font-family: inherit; background: var(--flaeche-2); padding: .8rem; border-radius: 8px; margin: .4rem 0 0; }
.rechte-wahl ul { list-style: none; padding: 0; margin: 0; columns: 2 16rem; }
.rechte-wahl li { margin: .15rem 0; }
.rechte-wahl label { display: flex; gap: .4rem; align-items: flex-start; font-weight: 400; }
.betrieb-wahl { margin: 0 0 .6rem; } .betrieb-wahl select { width: auto; min-height: 2.4rem; margin-left: .4rem; }

/* Einrichtungsassistent */
.assistent-schritte { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0 1rem; counter-reset: s; }
.assistent-schritte li { counter-increment: s; padding: .3rem .7rem; border-radius: 999px; background: var(--flaeche-2, #eef1f4); color: var(--text-leise, #667); font-size: .9em; }
.assistent-schritte li::before { content: counter(s) ". "; }
.assistent-schritte li.aktiv { background: var(--primaer); color: var(--auf-primaer); }
.assistent-schritte li.fertig a { color: inherit; }
.wahl-karte { display: block; border: 1px solid var(--rand, #d0d7de); border-radius: 8px; padding: .6rem .8rem; margin: .5rem 0; cursor: pointer; }
.wahl-karte input { margin-right: .5rem; }
.assistent > label:not(.wahl-karte) { display: block; margin: .6rem 0; }
.assistent > label:not(.wahl-karte) > input, .assistent > label:not(.wahl-karte) > select { display: block; width: 100%; max-width: 32rem; margin-top: .25rem; }
.assistent input:not([type=radio]) { min-height: 48px; padding: .55rem .7rem; font: inherit; border: 1px solid var(--rand);
  border-radius: 8px; background: var(--flaeche); }
.assistent fieldset label { display: block; margin: .5rem 0; }
.assistent fieldset select { display: block; width: 100%; max-width: 32rem; margin-top: .25rem; }
.assistent .tabelle input, .assistent .tabelle select { width: 100%; min-width: 7rem; }

/* Fertigung: Projektplan (Gantt), Arbeitsgänge */
.fortschritt { display: inline-block; vertical-align: middle; width: 5rem; height: .5rem; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; }
td[data-label="Fortschritt"] { white-space: nowrap; }
.fortschritt span { display: block; height: 100%; background: var(--gruen); }
.text-rot { color: var(--rot); }
.fa-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; }
.gantt { overflow-x: auto; }
.gantt-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(28rem, 1fr); align-items: center; border-bottom: 1px solid var(--rand); min-height: 2.6rem; }
.gantt-name { padding: .3rem .5rem .3rem 0; font-size: .85rem; line-height: 1.25; }
.gantt-bahn { position: relative; height: 2.4rem; }
.gantt-achse .gantt-bahn { height: 1.4rem; }
.gantt-woche { position: absolute; top: .2rem; font-size: .7rem; color: var(--text-leise); border-left: 1px solid var(--rand); padding-left: .2rem; white-space: nowrap; }
.gantt-soll { position: absolute; top: .35rem; height: 1.7rem; border: 2px solid var(--primaer-text); border-radius: 5px; background: transparent; }
.gantt-ist { position: absolute; top: .75rem; height: .9rem; border-radius: 4px; background: var(--gruen); opacity: .85; }
.gantt-ist.verzug { background: var(--rot); }
.gs-laeuft .gantt-ist { background: var(--gelb); }
.gs-nio .gantt-ist { background: var(--rot); }
.gantt-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gelb); }
.gantt-liefer { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--rot); }
.gantt-legende { font-size: .8rem; color: var(--text-leise); display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.gantt-legende span[class^="gl-"] { display: inline-block; width: 1rem; height: .6rem; margin-left: .4rem; }
.gl-soll { border: 2px solid var(--primaer-text); border-radius: 3px; } .gl-ist { background: var(--gruen); border-radius: 3px; }
.gl-heute { background: var(--gelb); width: 3px !important; } .gl-liefer { border-left: 2px dashed var(--rot); width: 2px !important; }
.ag-zeile { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--rand); flex-wrap: wrap; }
.ag-zeile.gs-erledigt .ag-text > strong { color: var(--text-leise); }
.ag-aktionen { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ag-aktionen form { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.ag-erledigt input { min-height: 2.2rem; padding: .2rem .4rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); font: inherit; width: 4.5rem; }
.beteiligte-wahl > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .2rem .8rem; max-height: 14rem; overflow-y: auto; }
.beteiligte-wahl label { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
.positionen-tabelle input, .positionen-tabelle select, .kriterien-tabelle input, .kriterien-tabelle select { width: 100%; min-height: 2.4rem; padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); font: inherit; }
.visuell-versteckt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.angebot-form .raster2 > *, .angebot-datenraster > * { min-width: 0; }
.kalkulation-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; margin: 0 0 1rem; }
.kalkulation-ergebnis dt, .kalkulation-ergebnis dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; }
.kalkulation-ergebnis dd { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  .kalkulation-ergebnis { grid-template-columns: minmax(0, 1fr); }
  .kalkulation-ergebnis dt { border: 0; padding-bottom: .1rem; }
  .kalkulation-ergebnis dd { text-align: left; padding-top: 0; }
}
.angebot-datenraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.angebot-positionen { width: 100%; }
.angebot-positionen input[type=checkbox] { width: 24px; height: 24px; min-height: 24px; }
.angebot-positionen input:not([type=checkbox]), .angebot-positionen select { min-width: 4rem; color: var(--text); }
.angebot-positionen td:first-of-type { min-width: 12rem; }
.angebot-form .angebot-positionen { table-layout: fixed; min-width: 48rem; }
.angebot-form .angebot-positionen th:nth-child(1) { width: 3rem; }
.angebot-form .angebot-positionen th:nth-child(3), .angebot-form .angebot-positionen th:nth-child(4) { width: 5rem; }
.angebot-form .angebot-positionen th:nth-child(5) { width: 7rem; }
.angebot-form .angebot-positionen th:nth-child(6) { width: 10rem; }
.angebot-form .angebot-positionen th:nth-child(7) { width: 6rem; }
.angebot-form .angebot-positionen td:first-of-type, .angebot-form .angebot-positionen input { min-width: 0; }
.angebot-positionen tr:has(input[name$="-DELETE"]:checked) { opacity: .55; }
.formular-aktionen { padding: .6rem 0; }
@media (max-width: 760px) {
  .angebot-datenraster { grid-template-columns: 1fr; }
  .angebot-positionen, .angebot-form .angebot-positionen, .angebot-positionen tbody { display: block; min-width: 0; }
  .angebot-positionen thead { display: none; }
  .tabelle.angebot-positionen tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; padding: .8rem; border-bottom: 1px solid var(--rand); }
  .tabelle.angebot-positionen td, .tabelle.angebot-positionen th { display: block; min-width: 0; padding: 0; border: 0; }
  .angebot-positionen th[scope=row], .angebot-positionen td:first-of-type { grid-column: 1 / -1; min-width: 0; }
  .tabelle.angebot-positionen td[data-label]::before { content: attr(data-label); display: block; min-width: 0; color: var(--text-leise); font-size: .85rem; margin-bottom: .25rem; }
  .angebot-positionen input:not([type=checkbox]), .angebot-positionen select { min-width: 0; }
}
.kriterien-tabelle input[type=checkbox] { width: 22px; min-height: 22px; }
.pruef-kriterium { border: 1px solid var(--rand); border-radius: 8px; padding: .6rem .8rem; margin: .6rem 0; }
.pruef-kriterium.fehler { border-color: var(--rot); }
.pruef-kriterium label { display: block; margin: .4rem 0; }
.pruef-kriterium input:not([type=radio]) { display: block; width: 100%; min-height: 2.6rem; padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); font: inherit; }
.projekt-zeile .marke-chip { margin-left: .3rem; }

.mehrfachwahl label { display: flex; gap: .5rem; align-items: center; font-weight: 400; min-height: 40px; }
.mehrfachwahl input { width: 22px; height: 22px; flex: none; }
.auslastung-tabelle td.al-zelle { text-align: center; min-width: 5.5rem; white-space: nowrap; }
.al-gruen { background: var(--gruen-hell); } .al-gelb { background: var(--gelb-hell); } .al-rot { background: var(--rot-hell); }
.al-rot strong { color: var(--rot); }
.kriterien-tabelle select[multiple] { min-width: 12rem; min-height: 5.5rem; }
.bereiche-tabelle td:nth-of-type(1) input { width: 3.5rem; }
.bereiche-tabelle td:nth-of-type(2) input { min-width: 8rem; }
.bereiche-tabelle td:nth-of-type(3) input { min-width: 10rem; }
.bereiche-tabelle td:nth-of-type(4) select { min-width: 11rem; }
.bereiche-tabelle td:nth-of-type(5) { min-width: 14rem; }
.bereiche-tabelle td:nth-of-type(6) select { min-width: 9rem; }
.bereiche-tabelle td:nth-of-type(7) input, .bereiche-tabelle td:nth-of-type(8) input { width: 4rem; }
.matrix-tabelle td.mx { text-align: center; white-space: nowrap; }
.matrix-tabelle td.mx a { color: inherit; text-decoration: none; display: block; }
.mx-gueltig { background: var(--gruen-hell); } .mx-bald { background: var(--gelb-hell); }
.mx-abgelaufen { background: var(--rot-hell); color: var(--rot); }
.mx-fehlt.mx-pflicht { background: var(--rot-hell); color: var(--rot); font-weight: 600; }
.mx-pflicht { font-weight: 600; }
.personal-warnung { color: var(--rot); font-size: .85em; }
.kz-reihe { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.kz-mini strong { font-size: 1.4rem; }
.kz-leitung { font-weight: 400; font-size: .75rem; margin-top: .2rem; }
.fertigung-zeile { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.fertigung-zeile .ag-aktionen { margin-left: auto; }
.karte-eigene { border-left: 4px solid var(--primaer-text); }
.kz-verlauf { display: block; margin-top: .35rem; overflow: visible; }
.kz-verlauf polyline { fill: none; stroke: var(--primaer-text); stroke-width: 1.6; stroke-linejoin: round; }
.kz-verlauf circle { fill: var(--primaer-text); }

/* Menü als Seitenleiste am PC (je Benutzer und Gerät, Mein Konto) */
@media (min-width: 1100px) {
  html[data-menue="seite"] body { padding-left: 17.5rem; }
  html[data-menue="seite"] .hauptmenue, html[data-menue="seite"] .kopf-eng .hauptmenue {
    display: flex !important; position: fixed; top: 0; left: 0; bottom: 0; width: 17.5rem; margin: 0;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .15rem; padding: 1rem .7rem;
    background: var(--primaer); overflow-y: auto; z-index: 30; box-shadow: 1px 0 0 rgba(0,0,0,.15); }
  html[data-menue="seite"] .hauptmenue a, html[data-menue="seite"] .hauptmenue .link {
    width: 100%; text-align: left; display: flex; align-items: center; padding: .7rem .9rem; font-size: var(--menue-schrift);
    white-space: normal; min-height: 44px; }
  html[data-menue="seite"] .hauptmenue a.aktiv { background: rgba(255,255,255,.2); font-weight: 600; }
  html[data-menue="seite"] .menue-knopf { display: none !important; }
  html[data-menue="seite"] .inhalt { max-width: 90rem; }
}
.kopf-zeit { background: rgba(255,255,255,.18); }
.zeit-laufend { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; border-left: 4px solid var(--gruen); }
.zeit-lohn { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .6rem .9rem; }
.zeit-lohn label { display: inline-flex; gap: .4rem; align-items: center; }
.design-farbe { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.design-farbe label { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
.design-farbe input[type=color] { width: 3.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--rand); border-radius: 6px; background: none; }
.design-farbe small { grid-column: 1 / -1; color: var(--text-leise); }
.design-upload { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-top: .8rem; }
.design-farbe input[type=checkbox] { width: 1.15rem; height: 1.15rem; }
.demo-band { background: repeating-linear-gradient(45deg, #d6ecff, #d6ecff 10px, #c3e1fb 10px, #c3e1fb 20px); color: #0b3a66; }
.org-pfad { margin: -.3rem 0 .6rem; }
.org-kasten { display: flex; flex-direction: column; text-decoration: none; color: var(--text); border-style: dashed; background: var(--flaeche-2); }
.org-kasten:hover { border-style: solid; }
.org-box-zahl { font-size: .78rem; color: var(--text-leise); margin-top: .3rem; }
.haken-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .2rem 1rem; }
.haken-liste label { display: flex; gap: .5rem; align-items: center; min-height: 44px; font-weight: 500; }
.haken-liste input { width: 24px; height: 24px; }
.einteilung-reserve { font-size: .78rem; color: var(--text-leise); }
.aufteilen summary { font-size: .8rem; cursor: pointer; color: var(--primaer-text); }
.aufteilen .aufteil-zeile { display: flex; gap: .3rem; margin-top: .25rem; }
.aufteilen select { min-width: 0; }
.personal-zeile { flex-wrap: wrap; }
.personal-zeile > select { flex: 1 1 8rem; min-width: 0; }
.personal-zeile .aufteilen { flex: 1 0 100%; }
.personal-zeile .aufteilen[open] { background: var(--flaeche-2); border-radius: 6px; padding: .3rem .4rem; }
.aufteilen .aufteil-zeile select:first-child { flex: 1; }
.aufteilen .aufteil-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem; gap: .3rem; }
.aufteilen .aufteil-zeile select { width: 100%; min-height: 36px; padding-left: .3rem; padding-right: .3rem; }
.personal-zeile:has(.aufteilen[open]) { grid-column: span 2; }
.haken-liste input { flex: none; }
.personal-zeile .umfang { flex: 1 0 100%; order: 3; color: var(--text-leise); font-size: .75rem; }
.personal-zeile.frei, .planung td.frei { background: var(--flaeche-2); color: var(--text-leise); }
.personal-zeile .tageszeit { flex: 1 0 100%; order: 4; display: flex; align-items: center; gap: .25rem; font-size: .8rem; flex-wrap: wrap; }
.personal-zeile .tageszeit input { width: 6.2rem; min-height: 34px; padding: .1rem .3rem; }
.personal-zeile .tageszeit.abweichend input { border-color: var(--gelb); }
.personal-zeile .aufteilen { order: 5; }
.wahl-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.matrix-wahl td, .matrix-wahl th { text-align: center; }
.matrix-wahl input, .taetigkeit-wahl input[type=checkbox] { width: 24px; height: 24px; }
.taetigkeit-wahl input[type=number] { width: 4.2rem; }
.personen-wahl input:not([type=checkbox]) { min-width: 7rem; }
.haken-klein { min-width: 12rem; }
.haken-klein label { display: inline-flex; gap: .25rem; align-items: center; margin: 0 .5rem .2rem 0; font-size: .85rem; font-weight: 400; }
.haken-klein label[hidden] { display: none; }
.checkliste { display: grid; gap: .6rem; }
.checkliste-punkt { display: grid; grid-template-columns: 2rem 1fr auto; gap: .8rem; align-items: center; margin: 0; }
.checkliste-punkt h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.checkliste-punkt p { margin: 0; color: var(--text-leise); }
.checkliste-haken { font-size: 1.5rem; color: var(--text-leise); text-align: center; }
.checkliste-punkt.erledigt .checkliste-haken { color: var(--gruen); }
@media print { .kopf, .hauptmenue, .kopfaktionen, .fuss, .testmodus-band { display: none !important; } }
.assistent input[type=checkbox] { min-height: 0; width: 22px; height: 22px; padding: 0; }
.assistent .tabelle td { padding: .3rem .35rem; }
.assistent .tabelle input:not([type=checkbox]), .assistent .tabelle select { min-height: 40px; padding: .35rem .5rem; }
.taetigkeit-wahl input[name$="_name"] { min-width: 12rem; }
.taetigkeit-wahl td.hinweis { min-width: 9rem; font-size: .8rem; }
.taetigkeit-wahl input[type=number] { width: 4.2rem; min-width: 0; }
.personen-wahl input:not([type=checkbox]) { min-width: 8rem; }
.personen-wahl select { min-width: 9rem; }
.ja-nein { display: flex; gap: 1.5rem; }
.ja-nein label { display: flex; gap: .4rem; align-items: center; font-weight: 500; min-height: 44px; }
.funktionen-tabelle td { vertical-align: top; }
.funktionen-tabelle select { min-width: 10rem; margin-bottom: .25rem; }
.arbeitszeitliste input[type=time] { width: 7.2rem; }
.arbeitszeitliste input[type=number] { width: 5rem; }
.arbeitszeitliste tr.abwesend td { color: var(--text-leise); background: var(--flaeche-2); }
.nachweis tr.wochenende td { color: var(--text-leise); }
.kennzahl-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.kennzahl-zeile .kz { margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.kennzahl-zeile .kz span { font-size: .8rem; color: var(--text-leise); }
.kennzahl-zeile .kz strong { font-size: 1.3rem; }
.zeitraum-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }

/* ==============================================================================================   Fokura Design 2026 (Petrol) – ruhig, hell, dezente Bedienelemente. Liegt bewusst am Ende und überschreibt
   die Grundformen oben; Farben weiter aus Einstellungen/Corporate Design (Variablen), Dunkelmodus inklusive.
   ===================================================================================================== */
:root {
  --schrift: "Inter", "InterVariable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: #1f2933; --text-leise: #64707d; --rand: #e3e7eb; --flaeche: #ffffff; --flaeche-2: #f2f4f6; --flaeche-3: #e9ecef;
  --radius: 12px; --radius-klein: 8px;
  --schatten: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --schatten-hoch: 0 4px 16px rgba(16, 24, 40, .08);
  --kopf-hg: var(--flaeche); --kopf-text: var(--text); --kopf-rand: var(--rand);
  --fuss-hg: transparent;
  --primaer-hell: color-mix(in srgb, var(--primaer) 9%, var(--flaeche));
  --primaer-mittel: color-mix(in srgb, var(--primaer) 18%, var(--flaeche));
  --fokus: 0 0 0 3px color-mix(in srgb, var(--primaer) 25%, transparent);
}
html[data-modus="dunkel"] { --rand: #2f3943; --primaer-hell: color-mix(in srgb, var(--primaer) 22%, var(--flaeche));
  --primaer-mittel: color-mix(in srgb, var(--primaer) 35%, var(--flaeche)); --schatten-hoch: 0 4px 16px rgba(0,0,0,.4); }
body { font-size: 15.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3 { letter-spacing: -.01em; font-weight: 650; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.08rem; } h1 small, h2 small { font-weight: 500; color: var(--text-leise); font-size: .75em; }
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Kopfzeile: hell mit feiner Linie */
.kopf { background: var(--kopf-hg); color: var(--kopf-text); min-height: 3.6rem; padding: .45rem 1.2rem;
  border-bottom: 1px solid var(--kopf-rand); box-shadow: none; }
.marke { color: var(--primaer-text); font-weight: 700; font-size: 1.05rem; min-height: 2.4rem; }
.marke img { max-height: 2.6rem; }
.kopf-firma, .uhr { color: var(--text-leise); }
.uhr strong { color: var(--text); font-size: 1.05rem; font-weight: 600; }
.kopf-einteilung { color: var(--text-leise); font-size: .85rem; }
.kopf-chip { color: var(--text); background: var(--flaeche-2); border: 1px solid var(--rand); padding: .25rem .65rem; font-size: .85rem; }
.kopf-chip:hover { background: var(--primaer-hell); border-color: var(--primaer-mittel); }
.kopf-zeit { background: var(--primaer-hell); color: var(--primaer-text); border-color: var(--primaer-mittel); }
.hauptmenue a, .hauptmenue .link { color: var(--text); font-size: var(--menue-schrift); font-weight: 500; padding: .45rem .7rem; border-radius: var(--radius-klein); }
.hauptmenue a:hover, .hauptmenue .link:hover { background: var(--flaeche-2); }
.hauptmenue a.aktiv { background: var(--primaer-hell); color: var(--primaer-text); font-weight: 600; }
.menue-knopf { color: var(--text); border: 1px solid var(--rand); font-size: 1.2rem; width: 2.6rem; height: 2.4rem; border-radius: var(--radius-klein); }
.zaehler { font-weight: 600; font-size: .72rem; line-height: 1.2rem; min-width: 1.25rem; }

/* Seitenleiste am PC: hell, aktive Seite in Hauptfarbe getönt */
@media (min-width: 1100px) {
  html[data-menue="seite"] .hauptmenue, html[data-menue="seite"] .kopf-eng .hauptmenue {
    background: var(--flaeche); box-shadow: none; border-right: 1px solid var(--rand); padding: .65rem .75rem; width: 17.5rem; }
  html[data-menue="seite"] .hauptmenue a, html[data-menue="seite"] .hauptmenue .link {
    min-height: 38px; padding: .45rem .8rem; font-size: var(--menue-schrift); color: var(--text); }
  html[data-menue="seite"] .hauptmenue a:hover, html[data-menue="seite"] .hauptmenue .link:hover { background: var(--flaeche-2); }
  html[data-menue="seite"] .hauptmenue a.aktiv { background: var(--primaer-hell); color: var(--primaer-text); }
}

/* Bänder (Demo, Testmodus): schmal und ruhig */
.testmodus-band { background: #fff7e0; color: #7a5a00; font-weight: 600; font-size: .78rem; padding: .25rem; border-bottom: 1px solid #f3e2b0; }
.demo-band { background: var(--primaer-hell); color: var(--primaer-text); border-bottom: 1px solid var(--primaer-mittel); }
html[data-modus="dunkel"] .testmodus-band { background: #3a2f12; color: #f2c766; border-color: #4a3c17; }

/* Inhalt, Karten */
.inhalt { padding: 1.4rem 1.2rem 1rem; }
.karte { border: 1px solid var(--rand); box-shadow: var(--schatten); padding: 1.15rem 1.25rem; }
.tabelle-wrap { border: 1px solid var(--rand); box-shadow: var(--schatten); }
.tabelle th { background: var(--flaeche-2); color: var(--text-leise); font-weight: 600; font-size: .8rem; text-transform: none;
  letter-spacing: .01em; }
.tabelle th, .tabelle td { padding: .55rem .75rem; border-bottom: 1px solid var(--rand); }
.tabelle tbody tr:hover td { background: color-mix(in srgb, var(--primaer) 3%, transparent); }

/* Knöpfe: dezent statt groß */
.knopf { min-height: 38px; padding: .45rem 1rem; border-radius: var(--radius-klein); font-size: .92rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08); transition: background-color .15s, border-color .15s, filter .15s; }
.knopf:hover { filter: brightness(1.06); }
.knopf:focus-visible, .feld input:focus, .feld select:focus, .feld textarea:focus, select:focus, input:focus-visible {
  outline: none; box-shadow: var(--fokus); border-color: var(--primaer); }
.knopf.zweit { background: var(--flaeche); color: var(--text); border: 1px solid var(--rand); box-shadow: none; }
.knopf.zweit:hover { background: var(--flaeche-2); filter: none; border-color: color-mix(in srgb, var(--text) 25%, var(--rand)); }
.knopf.gefahr { background: var(--rot); }
.knopf.zweit.gefahr { background: var(--flaeche); color: var(--rot); border-color: color-mix(in srgb, var(--rot) 35%, var(--rand)); }
.knopf.klein { min-height: 30px; padding: .25rem .65rem; font-size: .82rem; }
.knopf.gross { min-height: 46px; font-size: 1rem; padding: .6rem 1.3rem; }
.knopfzeile { gap: .5rem; }

/* Formulare */
.feld label { font-weight: 600; font-size: .88rem; color: var(--text); margin-bottom: .25rem; }
.feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea, select {
  min-height: 40px; padding: .45rem .65rem; border-radius: var(--radius-klein); font-size: .95rem; }
.feld-haken label { min-height: 36px; font-weight: 500; }
.feld-haken input { width: 18px; height: 18px; accent-color: var(--primaer); }
input[type=checkbox], input[type=radio] { accent-color: var(--primaer); }
.hinweis { font-size: .86rem; }

/* Meldungen */
.meldung { border-left-width: 3px; border-radius: var(--radius-klein); font-size: .93rem; padding: .7rem .95rem; }

/* Kacheln (Verwaltung, Start): ruhig mit Hover */
.kachel { border: 1px solid var(--rand); color: var(--text); font-weight: 600; font-size: 1rem; min-height: 78px;
  box-shadow: var(--schatten); transition: border-color .15s, box-shadow .15s, transform .15s; }
.kachel:hover { background: var(--flaeche); color: var(--primaer-text); border-color: var(--primaer-mittel);
  box-shadow: var(--schatten-hoch); transform: translateY(-1px); }

/* Chips und Status leiser */
.marke-chip, .status { font-weight: 600; font-size: .76rem; }

/* Fußzeile */
.fusszeile { background: var(--fuss-hg); border-top: 1px solid var(--rand); margin-top: 2rem; padding: 1rem; font-size: .75rem; }
.fuss-verbesserung { font-size: .8rem; text-decoration: none; }
.fuss-verbesserung:hover { color: var(--primaer-text); }

/* Werkstatt bleibt bedienbar: Kiosk und PIN behalten große Ziele */
body.kiosk .knopf { min-height: 56px; font-size: 1.1rem; }
.pintaste { min-height: 60px; border-radius: var(--radius); }

/* Persönliche Begrüßung – einmal am Tag, blendet von selbst aus */
.begruessung { position: fixed; top: .9rem; left: 50%; transform: translate(-50%, -12px); z-index: 50; opacity: 0;
  width: min(36rem, calc(100% - 2rem)); background: var(--flaeche); border: 1px solid var(--rand); border-radius: 14px;
  box-shadow: var(--schatten-hoch); padding: .9rem 1.1rem .9rem 1.2rem; display: flex; gap: .9rem; align-items: flex-start;
  transition: opacity .45s ease, transform .45s ease; }
.begruessung.zeigen { opacity: 1; transform: translate(-50%, 0); }
.begruessung-punkt { flex: none; width: .55rem; height: .55rem; margin-top: .5rem; border-radius: 50%; background: var(--primaer); }
.begruessung.dringend .begruessung-punkt { background: var(--akzent); }
.begruessung strong { display: block; font-size: 1.05rem; }
.begruessung p { margin: .15rem 0 0; color: var(--text-leise); font-size: .9rem; }
.begruessung ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.begruessung .knopfzeile { margin-top: .6rem; }
.begruessung-zu { margin-left: auto; background: none; border: 0; color: var(--text-leise); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: .1rem .3rem; }
@media (prefers-reduced-motion: reduce) { .begruessung { transition: none; } }

/* Fokura Central */
.central-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.central-raster .karte { margin: 0; }
.central-breit { grid-column: 1 / -1; }
.central-zahl { font-size: 1.9rem; font-weight: 700; margin: .2rem 0; color: var(--primaer-text); letter-spacing: -.02em; }
.fortschritt { height: 8px; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; margin: .4rem 0 .5rem; }
.fortschritt span { display: block; height: 100%; background: var(--primaer); border-radius: 99px; }
.modul-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.modul-raster.klein { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.modul-karte { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .7rem .8rem; background: var(--flaeche); }
.modul-karte.gewaehlt { border-color: var(--primaer-mittel); background: var(--primaer-hell); }
.modul-karte p { margin: .3rem 0 .5rem; font-size: .82rem; }
.modul-kopf { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.pflichten-liste { display: grid; gap: .4rem; }
.pflicht { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche); margin: 0; font-weight: 400; }
.pflicht input[type=checkbox] { margin-top: .2rem; width: 18px; height: 18px; flex: none; }
.pflicht.erledigt { background: var(--gruen-hell); border-color: color-mix(in srgb, var(--gruen) 30%, var(--rand)); }
.pflicht-hinweis { background: var(--flaeche-2); }
.pflicht-text { font-size: .88rem; }
.pflicht-i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--text-leise); color: #fff; font-size: .75rem; text-align: center; line-height: 18px; font-weight: 700; margin-top: .2rem; }
.pflicht-bemerkung { display: flex; gap: .4rem; margin-top: .4rem; }
.pflicht-bemerkung input { flex: 1; min-height: 32px; padding: .25rem .5rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .85rem; background: var(--flaeche); }
.raster3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; margin-top: .8rem; }
.raster-plz { display: grid; grid-template-columns: 7rem 1fr; gap: 0 .8rem; }
.haken-einspaltig { grid-template-columns: 1fr; }
.kz-betont { border-color: var(--primaer-mittel); background: var(--primaer-hell); }
.kz-betont strong { color: var(--primaer-text); }
.kosten-gruppen input { width: 100%; min-height: 36px; padding: .3rem .5rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; }
.central-start { max-width: 46rem; margin: 2rem auto; padding: 2rem; }
.central-schritte-vorschau { line-height: 1.9; margin: 1rem 0 1.5rem; }
input.eng { max-width: 6rem; }
.kosten-block { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .6rem .9rem; margin-bottom: .7rem; background: var(--flaeche); }
.kosten-block > summary { cursor: pointer; padding: .2rem 0; list-style-position: outside; }
.kosten-block[open] > summary { margin-bottom: .6rem; }
.kosten-posten { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: .3rem 1.2rem; }
.kosten-posten-zeile { display: grid; grid-template-columns: minmax(9rem, 1fr) 7.5rem 5.6rem; gap: .2rem .4rem; align-items: center; padding: .2rem 0; }
.kosten-posten-zeile label { font-size: .88rem; font-weight: 500; }
.kosten-posten-zeile input, .kosten-posten-zeile select, .kosten-zeilen input, .kosten-zeilen select { width: 100%; min-height: 34px; padding: .25rem .45rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .9rem; background: var(--flaeche); }
.kosten-posten-zeile small { grid-column: 1 / -1; margin-top: -.1rem; }
.kosten-zeilen td { padding: .3rem .35rem; }
.kosten-zeilen input[type=checkbox] { width: 18px; height: 18px; min-height: 0; }
.kosten-aufteilung { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem 1rem; margin: .4rem 0 .9rem; }
.kosten-aufteilung div { display: flex; justify-content: space-between; border-bottom: 1px solid var(--rand); padding: .25rem 0; font-size: .9rem; }
.kosten-hinweise .meldung { margin-bottom: .4rem; }
.kosten-zeilen td:first-child input { min-width: 11rem; }
.kosten-zeilen td:nth-child(2) select { min-width: 7.5rem; }
.kosten-zeilen td input { min-width: 5.5rem; }
.kosten-block > .kosten-posten-zeile { max-width: 26rem; }
.kosten-hinweis { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; padding: .6rem .8rem; border-radius: var(--radius-klein); border-left: 3px solid var(--rand); background: var(--flaeche-2); margin-bottom: .4rem; font-size: .92rem; }
.kosten-hinweis small { display: block; margin-top: .15rem; }
.kosten-hinweis.stufe-warnung { background: var(--gelb-hell); border-color: var(--gelb); }
.kosten-hinweis.stufe-hinweis { background: var(--blau-hell); border-color: var(--primaer); }
.kosten-hinweis.stufe-bestaetigt { color: var(--text-leise); }
.kosten-hinweis-text { flex: 1 1 24rem; }
.kosten-bestaetigen { display: flex; gap: .35rem; flex: 0 1 26rem; }
.kosten-bestaetigen input { flex: 1; min-height: 30px; padding: .2rem .45rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; font-size: .85rem; background: var(--flaeche); }

/* Anlagenliste: Suchfeld in der Filterzeile wie die Auswahlfelder */
.filterzeile input.suche { flex: 1 1 14rem; min-width: 12rem; max-width: 22rem; min-height: 40px; padding: .45rem .65rem;
  font: inherit; font-size: .95rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche); }
.filterzeile .feld-haken { align-self: center; }

/* Ausstattungs-Checkliste (Central-Assistent) */
.ausstattung-liste { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.ausstattung-liste label { align-items: flex-start; padding: .35rem 0; }
.ausstattung-liste label > span { display: flex; flex-direction: column; }
.ausstattung-liste small { font-weight: 400; font-size: .8rem; }

/* Fokura Energy: Monatsraster */
.energie-raster input { width: 5.2rem; min-height: 36px; padding: .25rem .4rem; font: inherit; font-size: .9rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche); text-align: right; }
.energie-raster input.energie-kosten { margin-top: .2rem; font-size: .8rem; color: var(--text-leise); }
.energie-raster td:first-child { min-width: 11rem; }

/* Fokura-Kataloge */
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
tr.gedimmt td { opacity: .55; }

/* Navigation: eine Schriftgröße, neutrale Gruppen und nur ein farbiges Seitenziel. */
.menue-gruppe { position: relative; min-width: 0; }
#hauptmenue .menue-titel, #hauptmenue a, #hauptmenue .link {
  font-family: var(--schrift); font-size: var(--menue-schrift); line-height: 1.45;
  font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--text);
  min-height: 44px; padding: .6rem .7rem; border-radius: var(--radius-klein);
  white-space: normal; text-align: left;
}
#hauptmenue .menue-titel {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  border: 0; margin: 0; background: transparent; cursor: pointer;
}
#hauptmenue > .menue-gruppe > .menue-titel { font-weight: 650; }
#hauptmenue .menue-beschriftung { flex: 1; min-width: 0; }
#hauptmenue .menue-titel::after {
  content: ""; flex: none; width: .38rem; height: .38rem; margin: 0 .15rem 0 .2rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
#hauptmenue .menue-gruppe.offen > .menue-titel::after { transform: translateY(-.15rem) rotate(45deg); }
#hauptmenue .menue-titel:hover, #hauptmenue a:hover, #hauptmenue .link:hover { background: var(--flaeche-2); }
#hauptmenue a.aktiv {
  background: color-mix(in srgb, var(--primaer-text) 12%, var(--flaeche));
  color: var(--primaer-text); box-shadow: inset 3px 0 var(--primaer-text); font-weight: 600;
}
#hauptmenue :is(a, button):focus-visible { outline: 2px solid var(--primaer-text); outline-offset: -2px; }
#hauptmenue .zaehler, #hauptmenue .menue-benutzer {
  flex: none; margin: 0; padding: .1rem .35rem; background: var(--flaeche-2);
  border: 1px solid var(--rand); border-radius: .3rem; color: var(--text);
  font-size: .75rem; line-height: 1.2; font-weight: 500; letter-spacing: normal;
}
.menue-unter {
  display: none; position: absolute; top: calc(100% + .3rem); left: 0; z-index: 40;
  min-width: 14rem; flex-direction: column; padding: .4rem; background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius, 10px); box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.menue-ich .menue-unter { left: auto; right: 0; }
.menue-gruppe.offen > .menue-unter { display: flex; }
#hauptmenue .menue-unter a, #hauptmenue .menue-unter .link { display: block; width: 100%; }
.menue-unter form { margin: 0; }
#hauptmenue .menue-zweig > .menue-unter {
  position: static; min-width: 0; margin: .15rem 0 .5rem .8rem; padding: 0 0 0 .6rem;
  border: 0; border-left: 1px solid var(--rand); border-radius: 0; box-shadow: none; background: none;
}
/* Auf der Seite und im eingeklappten Kopf trennen Linien die Hauptbereiche. */
@media (max-width: 1099px) {
  #hauptmenue > .menue-gruppe + .menue-gruppe { border-top: 1px solid var(--rand); margin-top: .35rem; padding-top: .35rem; }
  #hauptmenue > .menue-gruppe > .menue-unter {
    position: static; min-width: 0; margin: .2rem 0 .55rem .65rem; padding: 0 0 0 .5rem;
    border: 0; border-left: 1px solid var(--rand); border-radius: 0; box-shadow: none; background: none;
  }
}
@media (min-width: 1100px) {
  :is(html[data-menue="seite"], html.kopf-eng) #hauptmenue > .menue-gruppe + .menue-gruppe {
    border-top: 1px solid var(--rand); margin-top: .35rem; padding-top: .35rem;
  }
  :is(html[data-menue="seite"], html.kopf-eng) #hauptmenue > .menue-gruppe > .menue-unter {
    position: static; min-width: 0; margin: .2rem 0 .55rem .65rem; padding: 0 0 0 .5rem;
    border: 0; border-left: 1px solid var(--rand); border-radius: 0; box-shadow: none; background: none;
  }
  html[data-menue="oben"]:not(.kopf-eng) #hauptmenue > .menue-gruppe > .menue-unter {
    max-height: calc(100dvh - 7rem); overflow-y: auto; width: 19rem; max-width: calc(100vw - 2rem);
  }
  html[data-menue="oben"]:not(.kopf-eng) #hauptmenue > .menue-gruppe { flex-shrink: 0; }
  html[data-menue="oben"]:not(.kopf-eng) #hauptmenue > .menue-gruppe > .menue-titel .menue-beschriftung { white-space: nowrap; }
  html[data-menue="oben"]:not(.kopf-eng) #hauptmenue > .menue-gruppe:nth-last-child(-n+2) > .menue-unter {
    left: auto; right: 0;
  }
}

/* Kennzahl-Verlauf: kleine Linie als Knopf, großer Graph im Dialog */
.kz-verlauf-knopf { display: block; background: none; border: 0; padding: .2rem; margin: .15rem -.2rem 0; border-radius: 6px; cursor: zoom-in; color: inherit; }
.kz-verlauf-knopf:hover, .kz-verlauf-knopf:focus-visible { background: var(--primaer-hell); }
.kz-verlauf-knopf .kz-verlauf { margin-top: 0; }
.kz-dialog { width: min(56rem, calc(100vw - 2rem)); max-width: none; border: 1px solid var(--rand); border-radius: var(--radius, 12px);
  padding: 1.2rem 1.4rem; background: var(--flaeche); color: var(--text); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.kz-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.kz-dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.kz-dialog-kopf h2 { margin: 0; font-size: 1.2rem; }
.kz-zeitraum { display: inline-flex; gap: .25rem; margin: .8rem 0; padding: .2rem; background: var(--flaeche-2); border-radius: 8px; }
.kz-zeitraum button { border: 0; background: none; font: inherit; font-size: .85rem; padding: .35rem .8rem; border-radius: 6px; cursor: pointer; color: var(--text-leise); }
.kz-zeitraum button.aktiv { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.kz-dialog-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.kz-dialog-zahlen div { display: flex; flex-direction: column; padding: .45rem .6rem; border: 1px solid var(--rand); border-radius: 8px; }
.kz-dialog-zahlen span { font-size: .75rem; color: var(--text-leise); }
.kz-dialog-zahlen strong { font-size: 1.05rem; }
.kz-graph { position: relative; }
.kz-gross { display: block; width: 100%; height: auto; touch-action: none; }
.kz-gross .raster { stroke: var(--rand); stroke-width: 1; }
.kz-gross .schnitt { stroke: var(--text-leise); stroke-width: 1; stroke-dasharray: 4 4; }
.kz-gross .achse { fill: var(--text-leise); font-size: 11px; }
.kz-gross .linie { fill: none; stroke: var(--primaer-text); stroke-width: 2.2; stroke-linejoin: round; }
.kz-gross .flaeche { fill: var(--primaer-text); opacity: .09; }
.kz-gross .marke { fill: var(--primaer-text); stroke: var(--flaeche); stroke-width: 2; }
.kz-gross .fadenkreuz { stroke: var(--text-leise); stroke-width: 1; opacity: .5; }
.kz-tipp { position: absolute; transform: translate(-50%, -140%); background: var(--text); color: var(--flaeche); font-size: .8rem;
  padding: .25rem .5rem; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.kz-dialog-fuss { margin: .5rem 0 0; }

/* ===== Kompakt am PC (26.10.2026): Grundgröße 16 px statt 19 px, dichtere Felder und Knöpfe.
   Touch-Geräte (Tablet in der Halle) behalten große Bedienflächen; „Anzeigegröße“ in Mein Konto wirkt weiter. ===== */
@media (min-width: 760px) and (pointer: fine) { html { --geraet-skala: 1; } }
@media (min-width: 760px) and (pointer: coarse) { html { --geraet-skala: 1.12; } }
body { font-size: .9rem; }
@media (pointer: fine) {
  h1 { font-size: 1.32rem; margin-bottom: .6rem; } h2 { font-size: 1rem; } h3 { font-size: .9rem; }
  .titelzeile { margin-bottom: .8rem; }
  .karte { padding: 1rem 1.15rem; margin-bottom: .85rem; }
  .feld { margin-bottom: .7rem; }
  .feld label { font-size: .82rem; margin-bottom: .2rem; }
  .feld input:not([type=checkbox]):not([type=radio]), .feld select, .feld textarea, select,
  .assistent input:not([type=radio]):not([type=checkbox]) {
    min-height: 36px; padding: .38rem .6rem; font-size: .9rem; }
  .knopf { min-height: 34px; padding: .38rem .9rem; font-size: .85rem; }
  .knopf.klein { min-height: 28px; padding: .18rem .65rem; font-size: .8rem; }
  .knopf.gross { min-height: 44px; font-size: .95rem; }
  .knopfzeile { gap: .45rem; margin-top: .8rem; }
  .zurueck { min-height: 30px; padding: 0 .75rem; font-size: .82rem; }
  .tabelle th, .tabelle td { padding: .42rem .6rem; }
  .tabelle td { font-size: .88rem; }
  .tabelle th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-leise); font-weight: 600; }
  .feld-haken label, .haken-liste label, .ja-nein label, .mehrfachwahl label { min-height: 30px; }
  .feld-haken input, .haken-liste input { width: 17px; height: 17px; }
  .marke-chip, .status { font-size: .72rem; padding: .05rem .45rem; }
  .meldung { padding: .55rem .8rem; font-size: .88rem; }
  .hinweis { font-size: .84rem; }
  .kz-kachel { padding: .6rem .7rem; }
}

/* Zentrale und Tochtergesellschaften klar erkennbar (Central, Organigramm) */
.marke-chip.zentrale { background: var(--primaer); color: var(--auf-primaer, #fff); font-weight: 600; }
.marke-chip.tochter { background: var(--primaer-hell); color: var(--primaer-text); }
h1 .marke-chip { vertical-align: middle; font-size: .7rem; }
.org-box.org-zentrale { border-color: var(--primaer); background: var(--primaer-hell); }
.org-box.org-tochter { border-style: solid; border-width: 1px 1px 1px 4px; }

/* Central: Kennzahlen in einer Zeile, Aufbau der Gruppe als Baum */
.central-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin-bottom: .85rem; }
.central-kennzahlen > div { background: var(--flaeche); border: 1px solid var(--rand); border-radius: 10px; padding: .6rem .8rem;
  display: flex; flex-direction: column; gap: .1rem; }
.central-kennzahlen span { font-size: .75rem; color: var(--text-leise); }
.central-kennzahlen strong { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
.aufbau, .aufbau ul { list-style: none; margin: 0; padding: 0; }
.aufbau ul { margin-left: 1.4rem; padding-left: 1rem; border-left: 2px solid var(--rand); }
.aufbau li { position: relative; margin-top: .55rem; }
.aufbau ul > li::before { content: ""; position: absolute; left: -1rem; top: 1.25rem; width: .9rem; border-top: 2px solid var(--rand); }
.aufbau-firma { border: 1px solid var(--rand); border-radius: 10px; padding: .6rem .8rem; background: var(--flaeche); }
.aufbau-firma.ist-zentrale { border: 1px solid var(--primaer-mittel); background: var(--primaer-hell); }
.aufbau-titel { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.aufbau-titel strong { font-size: .98rem; }
.aufbau-zeile { margin-top: .1rem; }
.aufbau-betriebe { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.aufbau-bs { display: inline-flex; flex-direction: column; text-decoration: none; color: var(--text); border: 1px solid var(--rand);
  background: var(--flaeche); border-radius: 8px; padding: .3rem .6rem; font-size: .85rem; font-weight: 600; }
.aufbau-bs small { font-weight: 400; color: var(--text-leise); font-size: .75rem; }
.aufbau-bs:hover { border-color: var(--primaer-mittel); background: var(--primaer-hell); }
/* Mein Tag (Gruppe): Aufbau als kompakte Leiste */
.gruppen-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .7rem; }
.gl-firma { display: inline-flex; flex-direction: column; gap: .15rem; border: 1px solid var(--rand); background: var(--flaeche);
  border-radius: 10px; padding: .35rem .65rem; }
.gl-firma.ist-zentrale { border-color: var(--primaer-mittel); background: var(--primaer-hell); }
.gl-name { font-weight: 600; font-size: .86rem; }
.gl-werke { display: flex; gap: .5rem; font-size: .78rem; color: var(--text-leise); }
.gl-werke small { color: var(--text-leise); }
.gl-werke small::before { content: "· "; }
.gl-werke small::after { content: " Pers."; }
.gl-pfeil { color: var(--text-leise); }
/* Zuständigkeiten: Matrix Bereiche × Betriebsstätten */
.zustaendig td { min-width: 11rem; }
.zustaendig td:first-child { min-width: 13rem; }
.zustaendig select, .zustaendig input { display: block; width: 100%; margin-bottom: .25rem; min-height: 32px !important; font-size: .82rem !important; padding: .2rem .4rem !important; }
.zustaendig .vorgabe { background: var(--primaer-hell); }
.zust-wahl { margin-top: .6rem; }
.zust-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem .8rem; margin-top: .5rem; }
.zust-raster label { display: flex; flex-direction: column; font-size: .82rem; font-weight: 600; gap: .15rem; }

/* Rechte: Gruppen, Art, Suche */
.rechte-werkzeug { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .3rem 0 .7rem; }
.rechte-werkzeug .suche { flex: 1 1 18rem; max-width: 28rem; min-height: 34px; padding: .35rem .6rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--rand); border-radius: var(--radius-klein); background: var(--flaeche); }
.gruppe-kopf th { background: var(--flaeche-2); padding: 0 !important; }
[data-gruppe-kopf] { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: 0; font: inherit;
  font-size: .82rem; font-weight: 650; color: var(--text); text-align: left; padding: .5rem .6rem; cursor: pointer; text-transform: none; letter-spacing: 0; }
[data-gruppe-kopf] small { color: var(--text-leise); font-weight: 500; }
[data-gruppe-kopf]::before { content: ""; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s; margin-right: .2rem; }
.zu > [data-gruppe-kopf]::before, .zu [data-gruppe-kopf]::before { transform: rotate(-45deg); }
tbody.zu tr:not(.gruppe-kopf), .rechte-gruppe.zu label { display: none; }
[data-suchtext][hidden], [data-gruppe][hidden] { display: none !important; }
.rechte-gruppe { border: 1px solid var(--rand); border-radius: 8px; margin-bottom: .4rem; overflow: hidden; }
.rechte-gruppe-kopf { background: var(--flaeche-2) !important; }
.rechte-gruppe label { display: flex; gap: .45rem; align-items: center; padding: .25rem .7rem; font-weight: 400; font-size: .88rem; }
.marke-chip.recht-lesen { background: var(--gruen-hell); color: var(--gruen); }
.marke-chip.recht-ändern { background: var(--primaer-hell); color: var(--primaer-text); }
.marke-chip.recht-verwaltung { background: var(--gelb-hell); color: var(--gelb-text); }
.mail-dialog textarea { width: 100%; font: inherit; font-size: .9rem; padding: .5rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
.mail-dialog input { width: 100%; }
/* Mein Bereich / Steckbrief */
.portal-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,22rem), 1fr)); gap: .85rem; }
.portal-raster > .karte { margin-bottom: 0; }
.portal-raster + .karte { margin-top: .85rem; }
.wunsch { margin-top: .7rem; } .wunsch summary { cursor: pointer; color: var(--primaer-text); font-size: .88rem; }
.wunsch textarea { width: 100%; font: inherit; padding: .4rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); }
/* Tresor */
.tresor-code { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .7rem .9rem; margin: .6rem 0;
  border: 2px dashed var(--primaer-mittel); border-radius: 10px; background: var(--primaer-hell); }
.tresor-code strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; }
@media print { body:has(.tresor-code) * { visibility: hidden; } .tresor-code, .tresor-code * { visibility: visible; } .tresor-code { position: absolute; top: 2cm; left: 2cm; } .tresor-code button { display: none; } }
/* Einladung (privates Konto verknüpfen) – nur das Blatt drucken */
@media print { body:has(.einladung-blatt) * { visibility: hidden; } .einladung-blatt, .einladung-blatt * { visibility: visible; } .einladung-blatt { position: absolute; top: 1.5cm; left: 1.5cm; border: 0; box-shadow: none; } }
.nicht-drucken { } @media print { .nicht-drucken { display: none !important; } }
/* „hidden“ gilt immer – auch bei Elementen mit display: flex/grid */
[hidden] { display: none !important; }
/* Führerscheinkontrolle */
.fs-kamera video { width: 100%; max-width: 40rem; border-radius: 10px; background: #000; display: block; margin: .5rem 0; }
.fs-schritt { font-weight: 600; }
.fs-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.fs-bilder img { width: 100%; border-radius: 8px; border: 1px solid var(--rand); }
.fs-bilder figure { margin: 0; } .fs-bilder figcaption { font-size: .8rem; color: var(--text-leise); }
/* Sicherheit */
.qr svg { width: 200px; height: 200px; background: #fff; padding: 8px; border-radius: 8px; }
.inline-details { display: inline-block; margin-left: .5rem; } .inline-details form { display: flex; gap: .4rem; margin-top: .3rem; }
/* Kontaktdaten mit Sichtbarkeit (Mein Bereich) */
.kontakt-zeile { display: grid; grid-template-columns: 1fr 11rem; gap: .5rem; align-items: end; }
.kontakt-zeile .feld input, .kontakt-zeile .feld select { width: 100%; }
@media (max-width: 520px) { .kontakt-zeile { grid-template-columns: 1fr; gap: 0; } }
/* Tagesplanung als Tafel: links Arbeitsplatz, rechts die Personen */
.tafel { display: flex; flex-direction: column; border: 1px solid var(--rand); border-radius: var(--radius-klein, 8px); overflow: hidden; }
.tafel-reihe { display: grid; grid-template-columns: minmax(10rem, 15rem) 1fr; border-top: 1px solid var(--rand); }
.tafel-reihe:first-child { border-top: 0; }
.tafel-platz { padding: .5rem .7rem; background: var(--flaeche-2); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; justify-content: space-between; }
.tafel-platz .pos-kasten small { font-weight: 400; opacity: .75; }
.tafel-personen { padding: .4rem .5rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .35rem; min-height: 2.6rem; }
.tafel-weg .tafel-platz, .tafel-weg .tafel-personen { background: var(--rot-hell); }
.tafel-frei .tafel-personen { color: var(--text-leise); }
.tafel-ma { border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche); }
.tafel-ma > summary { list-style: none; cursor: pointer; padding: .2rem .65rem; display: flex; gap: .3rem; align-items: baseline; white-space: nowrap; }
.tafel-ma > summary::-webkit-details-marker { display: none; }
.tafel-ma > summary small { color: var(--text-leise); font-size: .72rem; }
.tafel-ma.warnung { border-color: var(--gelb); }
.tafel-ma.neu { border-color: var(--primaer); box-shadow: 0 0 0 2px var(--primaer-hell); }
.tafel-ma[open] { border-radius: 10px; flex: 1 1 100%; max-width: 26rem; }
.tafel-ma-inhalt { padding: .2rem .65rem .6rem; display: flex; flex-direction: column; gap: .4rem; }
.tafel-ma-inhalt select { min-height: 38px; }
.tafel-plus { width: auto; min-height: 32px; padding: .15rem .5rem; border: 1px dashed var(--rand); border-radius: 999px; background: transparent; color: var(--text-leise); font: inherit; font-size: .85rem; }
.tafel-speichern { margin-top: .7rem; position: sticky; bottom: 0; background: var(--flaeche); padding: .4rem 0; }
@media (max-width: 640px) { .tafel-reihe { grid-template-columns: 1fr; } .tafel-platz { padding: .4rem .6rem; } }
.tafel-ma > summary small.tafel-warnung { color: var(--gelb-text, #8a5a00); font-weight: 600; }

/* Zeichnungsarchiv */
.suchzeile { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; flex-wrap: wrap; }
.suchzeile input[type=search] { flex: 1 1 16rem; min-height: 44px; padding: .45rem .7rem; font: inherit; border: 1px solid var(--rand); border-radius: 8px; }
.revision { border-top: 1px solid var(--rand); padding: .7rem 0; }
.revision:first-of-type { border-top: 0; }
.revision.gueltig { border-left: 4px solid var(--gruen); padding-left: .7rem; }
.revision .knopfzeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.revision .knopfzeile form { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
form.inline { display: inline; }
details.aufklapp { margin-top: .5rem; } details.aufklapp summary { cursor: pointer; color: var(--blau); }
.schlagwort { display: inline-block; padding: .05rem .45rem; margin: 0 .2rem .2rem 0; border-radius: 999px; background: var(--blau-hell); color: var(--blau); font-size: .85em; }
.zeichnung-pos { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-top: .3rem; }
.zeichnung-pos input { min-height: 36px; padding: .25rem .5rem; border: 1px solid var(--rand); border-radius: 6px; font: inherit; width: 11rem; }
details.andere-standorte { grid-column: 1 / -1; width: 100%; margin-top: .4rem; }
details.andere-standorte summary { cursor: pointer; color: var(--text-leise); padding: .3rem 0; }


/* Stellenanzeigen und Karriereseite */
.anzeige-start { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.anzeige-start .feld { flex: 1 1 14rem; margin: 0; }
.jobboerse-text { width: 100%; font: inherit; font-size: .92rem; padding: .6rem .7rem; border: 1px solid var(--rand); border-radius: 8px; background: var(--flaeche); }
.stelle h2.stelle-titel { margin: .1rem 0 .4rem; }
.stelle h3 { margin: 1rem 0 .3rem; font-size: 1.02rem; }
.stelle ul { margin: 0; padding-left: 1.2rem; } .stelle li { margin: .15rem 0; }
.stelle-firma { color: var(--text-leise); margin: 0; font-size: .92rem; }
.stelle-eckdaten { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .6rem; }
.stelle-eckdaten span { background: var(--blau-hell); color: var(--blau); border-radius: 999px; padding: .1rem .55rem; font-size: .85rem; }
.stellen-liste { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.stelle-karte { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; margin: 0; }
.stelle-karte:hover, .stelle-karte:focus-visible { border-color: var(--primaer); }
.stelle-karte .stelle-titel { font-size: 1.1rem; color: var(--primaer); }
.stelle-intro { max-width: 46rem; }
.honigtopf { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.datenschutz-hinweis { margin: 1rem 0; padding: .6rem .8rem; border: 1px solid var(--rand); border-radius: 8px; font-size: .9rem; }
.datenschutz-hinweis summary { cursor: pointer; font-weight: 600; }
.datenschutz-hinweis p { margin: .45rem 0; }
.oeffentlich-kopf { justify-content: flex-start; gap: 1rem; }
.rechts { text-align: right; }
.tabelle .zahl { text-align: right; white-space: nowrap; }

/* CRM */
details.karte > summary { cursor: pointer; list-style: none; } details.karte > summary::-webkit-details-marker { display: none; }
details.karte > summary h2.inline { display: inline; } details.karte > summary::before { content: "▸ "; color: var(--text-leise); }
details.karte[open] > summary::before { content: "▾ "; }
.verlauf-eintrag { border-left: 3px solid var(--rand); padding: .4rem 0 .4rem .7rem; margin: .4rem 0; }
.verlauf-eintrag.verlauf-kontakt { border-left-color: var(--blau); }
.verlauf-eintrag.verlauf-auftrag, .verlauf-eintrag.verlauf-fertigung { border-left-color: var(--gruen); }
.verlauf-eintrag.verlauf-angebot { border-left-color: var(--gelb); }
.verlauf-datum { color: var(--text-leise); font-variant-numeric: tabular-nums; margin-right: .3rem; }
.verlauf-text { margin-top: .2rem; white-space: normal; }
.feld-haken-inline { display: inline-flex; gap: .3rem; align-items: center; font-weight: 400; }
.leitfaden-text { background: var(--blau-hell); border-radius: 8px; padding: .6rem .8rem; }
.reiter { display: flex; gap: .3rem; margin: .4rem 0; } .reiter a { padding: .4rem .8rem; border-radius: 8px 8px 0 0; border: 1px solid var(--rand); border-bottom: 0; text-decoration: none; }
.reiter a.aktiv { background: var(--flaeche); font-weight: 600; }
.karte .ja-nein { flex-wrap: wrap; gap: .2rem 1.2rem; } .feld-titel { display: block; font-weight: 600; margin-bottom: .2rem; }
.analyse-kacheln { display: flex; flex-wrap: wrap; gap: .6rem; } .analyse-kacheln .karte { flex: 1 1 10rem; margin: 0; }
.trichter-stufe { position: relative; padding: .35rem .5rem; margin: .25rem 0; }
.trichter-balken { position: absolute; inset: 0 auto 0 0; background: var(--blau-hell); border-radius: 6px; z-index: 0; }
.trichter-stufe span { position: relative; z-index: 1; }
.cd-zeilen { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.cd-zeilen input[type=color] { width: 2.4rem; height: 1.8rem; padding: 0; border: 1px solid var(--rand); }
.cd-logo { max-height: 48px; max-width: 200px; background: #fff; border: 1px solid var(--rand); padding: 2px; }
.farbfeld { display: inline-block; width: 1em; height: 1em; border-radius: 3px; vertical-align: middle; border: 1px solid var(--rand); }
.tafel-plus option.opt-eingeplant { background: #e6f2f1; } .tafel-plus option.opt-abwesend { background: #fdecec; color: #8a1f1f; }
details.status-gruppe > summary h3.inline { display: inline; margin: 0; } .zaehler-grau { color: var(--text-leise); font-weight: 600; }
details.status-gruppe > .tabelle-wrap { margin-top: .5rem; }
.schnell-gruppe > summary { cursor: pointer; margin: .6rem 0 .3rem; } .schnell-gruppe > summary h2.inline { display: inline; font-size: 1rem; } .schnell-suche input { font-size: 1.2rem; min-height: 52px; }
.auswahl-suche { display: block; width: 100%; min-height: 40px; margin-bottom: .3rem; padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: 8px; font: inherit; }
.schlagwort.gemeinsam { background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
.katalog-zeile { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.katalog-zeile input[name=synonyme] { flex: 1 1 14rem; min-height: 32px; padding: .2rem .5rem; border: 1px solid var(--rand); border-radius: 6px; }
/* Schweißer-Matrix */
.schweiss-matrix th[scope=row] { white-space: nowrap; font-weight: 500; }
.schweiss-matrix td { text-align: center; }
.schweiss-matrix .sm-text { font-size: .85em; white-space: nowrap; }
.schweiss-matrix .sm-gruppe th { background: var(--flaeche-2); font-weight: 700; text-align: left; }
.schweiss-matrix .sm-kopf { text-align: center; vertical-align: bottom; } .schweiss-matrix .sm-kopf small { display: block; color: var(--text-leise); }
.schweiss-matrix .sm-anzahl { text-align: center; color: var(--text-leise); }
.sm-zelle { display: inline-block; min-width: 1.6em; border-radius: 5px; font-weight: 700; padding: .05rem .3rem; }
.sm-ok { background: var(--gruen-hell); color: var(--gruen); } .sm-faellig { background: var(--gelb-hell); color: var(--gelb-text); }
.sm-abgelaufen { background: var(--rot-hell); color: var(--rot); }
@media print { .schweiss-matrix { font-size: 9pt; } }
.schweiss-matrix th[scope=row], .schweiss-matrix .sm-gruppe th { text-transform: none; letter-spacing: 0; font-size: .95em; }
.abc { display: inline-block; width: 1.6em; text-align: center; border-radius: 5px; font-weight: 700; }
.abc-A { background: var(--gruen-hell); color: var(--gruen); } .abc-B { background: var(--blau-hell); color: var(--blau); }
.abc-C { background: var(--flaeche-2); color: var(--text-leise); }
.trend { font-weight: 600; } .trend-auf { color: var(--gruen); } .trend-ab { color: var(--rot); }
.technik-balken { position: relative; padding: .2rem .4rem; margin: .2rem 0; }
.technik-balken span { position: absolute; inset: 0 auto 0 0; background: var(--blau-hell); border-radius: 4px; z-index: -1; }
.technik-balken { z-index: 0; isolation: isolate; }
/* Kostensätze: eigene Posten, Vorjahr */
.kosten-eigene { border-top: 1px dashed var(--rand); margin-top: .4rem; padding-top: .3rem; }
.kosten-eigen-name { flex: 1 1 12rem; min-width: 10rem; }
.monatswerte { display: grid; grid-template-columns: repeat(6, minmax(4.5rem, 1fr)); gap: .3rem; margin-top: .3rem; }
.monatswerte label { display: flex; flex-direction: column; font-size: .8em; color: var(--text-leise); }
.monatswerte input { min-height: 32px; padding: .2rem .4rem; border: 1px solid var(--rand); border-radius: 6px; }
.monatsbalken { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.monatsbalken span { flex: 1; background: var(--blau-hell); border-top: 2px solid var(--blau); min-height: 2px; max-height: 100%; }
@media (max-width: 600px) { .monatswerte { grid-template-columns: repeat(3, 1fr); } }
/* Projektmappe: Machbarkeitsampel je Dimension */
.mb-zelle { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 5px; font-weight: 700; padding: .05rem .35rem; }
.mb-gruen { background: var(--gruen-hell); color: var(--gruen); } .mb-gelb { background: var(--gelb-hell); color: var(--gelb-text); }
.mb-rot { background: var(--rot-hell); color: var(--rot); } .mb-offen { border: 1px dashed currentColor; opacity: .6; }
.mb-tabelle td, .mb-tabelle th { vertical-align: top; }
.mb-tabelle select, .mb-tabelle input { max-width: 100%; }
.mb-mitte { text-align: center; }
/* Fokura-Chat */
.chat-verlauf { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .25rem; }
.chat-zeile { max-width: 85%; padding: .45rem .7rem; border-radius: 10px; background: var(--flaeche, rgba(127,127,127,.12)); }
.chat-zeile.eigene { align-self: flex-end; background: color-mix(in srgb, var(--primaer) 18%, transparent); }
.chat-kopf { display: flex; gap: .4rem; align-items: baseline; font-size: .85rem; }
.chat-weg { margin-left: auto; } .chat-weg button { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; }
.chat-text { white-space: normal; overflow-wrap: anywhere; }
.chat-eingabe { display: flex; gap: .5rem; margin-top: .75rem; align-items: flex-end; }
.chat-eingabe textarea { flex: 1; resize: vertical; }

/* Zahnrad: direkt zu den Einstellungen dieser Seite (nur mit Recht) */
.zahnrad { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  margin-left: .4rem; border-radius: 50%; color: var(--text-leise, #7a8794); vertical-align: middle; }
.zahnrad:hover, .zahnrad:focus-visible { color: var(--primaer); background: var(--flaeche-hover, rgba(127,127,127,.12)); }

/* Einteilung: Auswahlfelder in Tages- und Wochentabelle lesbar breit */
.tabelle.einteilung select { min-width: 9rem; width: 100%; }
.tabelle.einteilung td { min-width: 9.5rem; }
.tabelle.einteilung td:first-child { min-width: 12rem; }

/* Gesprächsarbeitsplatz: Vorbereitung und Erfassen klar voneinander trennen. */
.gespraech-kopf{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin:1rem 0 1.5rem}
.gespraech-kopf h1{margin:.2rem 0}.gespraech-kopf p{margin:.35rem 0}
.gespraech-raster{display:grid;grid-template-columns:minmax(250px, .85fr) minmax(360px,1.5fr);gap:1.25rem;align-items:start}
.gespraech-vorbereitung,.gespraech-erfassung{display:grid;gap:1rem;min-width:0}
.gespraech-vorbereitung h3{margin:1.25rem 0 .6rem}.gespraech-hinweis{border-left:3px solid var(--primaer);padding:.6rem .85rem;margin:.7rem 0;background:var(--hintergrund)}
.gespraech-hinweis p{margin:.3rem 0}.gespraech-person,.gespraech-historie{padding:.8rem 0;border-bottom:1px solid var(--rand)}
.gespraech-historie strong,.gespraech-historie small{display:block}.gespraech-historie p{margin:.4rem 0;overflow-wrap:anywhere}
.gespraech-wechsel label{display:flex;gap:.5rem;align-items:center}
.kunden-kurzinfo .org-zeile{display:grid;grid-template-columns:135px 1fr;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--rand)}
@media(max-width:900px){.gespraech-raster{grid-template-columns:1fr}.gespraech-kopf{align-items:flex-start;flex-direction:column}.kunden-kurzinfo .org-zeile{grid-template-columns:1fr;gap:.15rem}}
.kunden-fakten{display:grid;grid-template-columns:130px minmax(0,1fr);gap:0 .9rem;margin:0}.kunden-fakten dt,.kunden-fakten dd{padding:.75rem 0;margin:0;border-bottom:1px solid var(--rand)}.kunden-fakten dt{color:var(--text-leise,#64748b)}
@media(max-width:550px){.kunden-fakten{grid-template-columns:1fr}.kunden-fakten dt{border-bottom:0;padding-bottom:.1rem}.kunden-fakten dd{padding-top:.2rem}}

.kunden-naechsterkontakt{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.2rem 1.4rem;margin:0 0 1.25rem;border:1px solid var(--rand);border-left:5px solid var(--primaer);background:var(--flaeche);border-radius:10px}
.kunden-naechsterkontakt h2{margin:.25rem 0}.kunden-naechsterkontakt p{margin:.25rem 0}
@media(max-width:650px){.kunden-naechsterkontakt{align-items:flex-start;flex-direction:column}}

.kunden-uebersicht{align-items:start}.kunden-seitenspalte{display:grid;gap:1rem}.kunden-seitenspalte>.karte{margin:0}.kunden-kurzinfo h3{margin-top:1.25rem}

.verlauf-eintrag[id],.org-zeile[id]{scroll-margin-top:5rem}.verlauf-eintrag:target,.org-zeile:target{outline:2px solid var(--primaer);outline-offset:4px;border-radius:4px}

/* Nur explizit aktivierte Demos: Stufenvergleich im Kopf. */
.demo-stufenschalter{display:inline-flex;align-items:center;gap:.2rem;margin:0 .5rem;padding:.2rem;border:1px solid var(--rand);border-radius:8px;flex-shrink:0;background:var(--flaeche)}
.demo-stufenschalter>span{font-size:.75rem;color:var(--text-leise,#64748b);padding:0 .4rem}
.demo-stufenschalter button{font:inherit;font-size:.85rem;line-height:1.3;padding:.35rem .65rem;border:0;border-radius:5px;background:transparent;color:var(--primaer);cursor:pointer}
.demo-stufenschalter button.gewaehlt{background:var(--primaer);color:#fff;font-weight:700}
.demo-stufenschalter button:focus-visible{outline:2px solid var(--primaer);outline-offset:2px}
@media print{.demo-stufenschalter{display:none}}
.dispo-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 16px; }
.dispo-filter .feld { margin: 0; }
.dispo-filter-aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.dispo-filter-aktionen label { display: flex; align-items: center; gap: 8px; }

.zielampel{display:inline-block;padding:.2rem .55rem;border-radius:.4rem;font-size:.85rem;font-weight:600}.zielampel-gruen{background:#e2f3e8;color:#145b32}.zielampel-gelb{background:#fff1c2;color:#6b4a00}.zielampel-rot{background:#fde3e0;color:#8f221b}.zielampel-grau{background:#edf0f3;color:#48535e}

/* Moral und Training: lesbare Karten und große Auswahlflächen auf Tablets. */
.lern-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.lern-aktionen{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.lern-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;margin-block:1rem}
.lern-raster .karte{margin:0}.lern-form{max-width:850px}.lern-text{max-width:950px}
.lern-form textarea{width:100%;max-width:100%;min-height:8rem}.lern-form select{max-width:100%}
.lern-form [id^="id_f"] label{display:flex;align-items:center;gap:.6rem;padding:.7rem;border:1px solid var(--linie,#d5dce1);border-radius:.4rem;margin:.4rem 0;cursor:pointer;min-height:44px}
.lern-ergebnis{display:grid;grid-template-columns:minmax(180px,1fr) minmax(100px,240px) 5rem;align-items:center;gap:1rem;border-bottom:1px solid var(--linie,#d5dce1);padding:.6rem 0}
.lern-ergebnis meter{width:100%;height:1.3rem}@media(max-width:600px){.lern-ergebnis{grid-template-columns:1fr 5rem}.lern-ergebnis p{grid-column:1/-1}.lern-form input:not([type=radio]):not([type=checkbox]){max-width:100%}}

.lern-frage{border:0;padding:0;margin:1.5rem 0}.lern-frage legend{font-weight:600;margin-bottom:.6rem}.lern-bestaetigung{display:flex;align-items:flex-start;gap:.7rem;margin:1.2rem 0}.lern-bestaetigung input{flex:none;margin-top:.3rem}.lern-bestaetigung label{flex:1}

.lern-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.lern-form textarea,.lern-filter input{width:100%;min-height:48px;padding:.55rem .7rem;font:inherit;border:1px solid var(--rand);border-radius:8px;background:var(--flaeche)}
.lern-form p>label{display:block;font-weight:600;margin-bottom:.3rem}.lern-form input[type=checkbox]{width:22px;height:22px;flex:none}
.lern-form p:has(>input[type=checkbox]){display:flex;align-items:flex-start;gap:.7rem}.lern-form p>input[type=checkbox]{order:-1;margin-top:.3rem}
.lern-filter{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-end}.lern-filter label{display:flex;flex-direction:column;gap:.3rem;flex:1 1 220px}

/* Shopfloor: große bedienbare Ziele am Arbeitsplatz. */
.shopfloor-terminal .knopf { min-height:48px; padding:.8rem 1rem; }
.shopfloor-terminal select { min-height:44px; }
.shopfloor-terminal .karte form + form { margin-top:1rem; }

/* Angemeldete Person bleibt auch bei geschlossenem Touch-Menü erkennbar. */
.kopf-benutzer { display:inline-flex; align-items:center; gap:.45rem; flex-shrink:0; margin-left:auto;
  min-height:44px; padding:.35rem .65rem; border:1px solid var(--rand); border-radius:999px;
  color:var(--text); background:var(--flaeche-2); text-decoration:none; font-size:.9rem; }
.kopf-benutzer svg { flex:none; }
.kopf-benutzer-name { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kopf-benutzer strong { font-size:.85rem; letter-spacing:.025em; }
.kopf-benutzer:hover { border-color:var(--primaer-text); }
.kopf-benutzer:focus-visible { outline:2px solid var(--primaer-text); outline-offset:2px; }
.menue-benutzer { display:inline-block; margin-left:.5rem; padding:.1rem .35rem; border-radius:4px;
  background:var(--primaer-hell); color:var(--primaer-text); font-size:.8rem; font-weight:650;
  letter-spacing:normal; text-transform:none; }
@media (max-width:700px) { .kopf-benutzer-name { display:none; } }
@media (min-width:1100px) {
  html[data-menue="seite"] .kopf-benutzer { display:none; }
}

/* Tastaturzugang zum Inhalt, ohne alle Menüpunkte durchlaufen zu müssen. */
.sprunglink { position: fixed; top: .5rem; left: .5rem; z-index: 10000; transform: translateY(-200%); padding: .7rem 1rem; background: #fff; color: #111; border: 2px solid #111; border-radius: .35rem; }
.sprunglink:focus { transform: translateY(0); outline: 3px solid #1565c0; outline-offset: 2px; }
@media print { .sprunglink { display: none; } }

.arbeitszeitliste input:not([type=checkbox]) { min-width: 0; max-width: 100%; }
@media (max-width: 600px) {
  .betrieb-wahl { width: 100%; max-width: 100%; min-width: 0; }
  .betrieb-wahl label { display: block; }
  .betrieb-wahl select { display: block; width: 100%; max-width: 100%; margin-left: 0; }
}

/* Desktop-Seitenmenü: feste Hauptnavigation und seitlich überlagernde Untermenüs. */
@media (min-width:1100px) {
  html[data-menue="seite"] #hauptmenue[data-seitlich] .menue-gruppe > .menue-unter {
    position:fixed;inset:auto;margin:0;padding:.45rem;min-width:0;max-width:calc(100vw - 16px);
    border:1px solid var(--rand);border-radius:var(--radius,10px);background:var(--flaeche);
    color:var(--text);box-shadow:0 12px 36px rgba(0,0,0,.25);overflow-y:auto;overscroll-behavior:contain;
    z-index:60;font-family:var(--schrift);
  }
  html[data-menue="seite"] #hauptmenue[data-seitlich] .menue-gruppe.offen > .menue-unter { display:flex; }
  html[data-menue="seite"] #hauptmenue[data-seitlich] > .menue-gruppe { flex-shrink:0; }
  html[data-menue="seite"] #hauptmenue[data-seitlich] .menue-gruppe.offen > .menue-titel { background:var(--flaeche-2); }
  html[data-menue="seite"] #hauptmenue[data-seitlich] .menue-gruppe.offen > .menue-titel::after { transform:rotate(-45deg); }
  html[data-menue="seite"] #hauptmenue[data-seitlich] > .menue-gruppe.aktiv > .menue-titel { box-shadow:inset 3px 0 var(--primaer-text); }
}

.arbeitsbereich-wege { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem; }
.arbeitsbereich-links { display:flex;flex-direction:column;gap:.35rem; }
.arbeitsbereich-links a { display:flex;justify-content:space-between;gap:1rem;padding:.65rem .75rem;min-height:44px;border:1px solid var(--rand);border-radius:var(--radius-klein);text-decoration:none; }

.tagesliste, .tagesrand { min-width:0; }

/* Wenige klare Bereiche, große Touch-Ziele und tägliche Wege ohne Untermenü. */
#hauptmenue :is(.menue-titel, a, .link) { min-height:48px; padding:.8rem; overflow-wrap:anywhere; }
#hauptmenue > .menue-gruppe ~ :is(.menue-gruppe,a) { border-top:1px solid var(--rand); margin-top:.65rem; padding-top:.65rem; }
#hauptmenue .menue-unter { gap:.3rem; }
#hauptmenue > a { font-weight:650; border-radius:0; }
.kopf .menue-knopf { flex:none; margin-left:0; width:48px; height:48px; }
.favoriten-links { display:flex; flex-direction:column; gap:.3rem; }
.favoriten-leer { margin:.4rem .8rem; }
#hauptmenue .favoriten-verwalten { border-top:1px solid var(--rand); margin-top:.4rem; }
.seitenfavorit { float:right; margin:0 0 .5rem .7rem; }
.favoriten-stern { width:48px; height:48px; font-size:1.7rem; line-height:1; border:1px solid var(--rand);
  border-radius:var(--radius-klein); background:var(--flaeche); color:var(--primaer-text); cursor:pointer; }
.favoriten-stern[aria-pressed="true"] { background:var(--primaer-hell); }
.favoriten-stern:disabled { cursor:default; opacity:.65; }
.favoriten-stern:focus-visible { outline:2px solid var(--primaer-text); outline-offset:2px; }
.favoriten-meldung { clear:both; padding:.6rem; background:var(--flaeche-2); overflow-wrap:anywhere; }
.favoriten-einstellungen { clear:both; }
.favoriten-einstellungen fieldset { border:0; padding:0; margin:0 0 .8rem; min-width:0; }
.favoriten-einstellungen fieldset label { display:flex; align-items:center; gap:.6rem; min-height:48px; }
.favoriten-einstellungen form { margin-bottom:.8rem; }
.favoriten-gespeichert { list-style:none; padding:0; }
.favoriten-gespeichert li { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.favoriten-gespeichert form { margin:0; }
.favoriten-einstellungen select { max-width:100%; min-width:0; }
.favoriten-einstellungen :is(button,select,input:not([type=hidden]):not([type=radio]):not([type=checkbox])) { min-height:48px; }
@media (max-width:1099px) {
  .kopf .menue-knopf { order:-2; }
  .kopf .marke { min-width:0; max-width:calc(100% - 64px); overflow-wrap:anywhere; }
  .kopf .marke img { max-width:100%; object-fit:contain; }
  #hauptmenue.offen { position:fixed; top:var(--menue-oben,4rem); left:.5rem; right:.5rem;
    width:auto; max-height:calc(100dvh - var(--menue-oben,4rem) - .5rem); overflow-y:auto;
    overscroll-behavior:contain; padding:.8rem; border:1px solid var(--rand);
    border-radius:var(--radius); background:var(--flaeche); box-shadow:0 12px 36px rgba(0,0,0,.25); }
}

/* Auch Tablets mit Maus behalten ausreichend große Touch-Bedienflächen.
   Nach den kompakten PC-Regeln; reine Mausgeräte und das größere Kiosk bleiben unverändert. */
@media (any-pointer: coarse) {
  body:not(.kiosk) .inhalt :is(button, .knopf, .zurueck) {
    min-height:48px; min-width:48px; white-space:normal;
  }
  body:not(.kiosk) .inhalt :is(select, textarea, input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])) {
    min-height:48px; min-width:0; max-width:100%; font-size:max(1rem,16px);
  }
  body:not(.kiosk) .inhalt :is(.feld-haken, .haken-liste, .ja-nein, .mehrfachwahl) label {
    min-height:48px; align-items:center;
  }
  body:not(.kiosk) .inhalt input:is([type=checkbox], [type=radio]) {
    min-width:24px; min-height:24px; flex-shrink:0;
  }
  body:not(.kiosk) .inhalt summary {
    min-height:48px; padding-block:.65rem; cursor:pointer;
  }
}