/* JANDAUSCH Plattform — Grundgestaltung nach CI (Design-Manual V7.1, Kap. 05/06)
   Schriften: Poppins (Überschriften), Lato (Text) — lokal eingebunden, nichts von
   fremden Servern. Quelle: Jandausch_CI/Fonts, auf Latin verkleinert (WOFF2).
   Beide Schriften stehen unter der SIL Open Font License 1.1. */

@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Poppins-Bold.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/Lato-Regular.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("../fonts/Lato-Italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/Lato-Bold.woff2") format("woff2"); }

:root {
  --schwarz: #111111;
  --weiss: #ffffff;
  --kohle: #5a5a5a;
  --hellgrau: #ededed;
  --papier: #f7f7f7;
  --blau: #0058d0;
  --gelb: #ffc300;
  --gruen: #1e8449; --gruen-flaeche: #e4f2ea;
  --rot: #c0392b;   --rot-flaeche: #f9e3e0;
  --schrift-titel: "Poppins", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Lato", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--weiss); color: var(--schwarz);
  font: 16px/1.5 var(--schrift-text);
}
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 700; line-height: 1.25; }
h1 { font-size: 1.6rem; margin: 0 0 1rem; }
a { color: var(--blau); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blau); outline-offset: 2px;
}

.wortmarke {
  font-family: var(--schrift-titel); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
}
/* Manual V7.1: Positionierungszeile unter dem Logo in Lato, Kohlegrau; Claim in Blau */
.positionierung { color: var(--kohle); font-size: .85rem; margin-top: .3rem; }
.claim { color: var(--blau); font-family: var(--schrift-titel); font-weight: 500; font-size: .8rem; text-align: center; margin: .35rem 0 0; }
.leise { color: var(--kohle); }

/* --- Anmeldeseiten ---------------------------------------------------- */
body.gast { background: var(--papier); }
.gast-kopf { background: var(--schwarz); border-bottom: 3px solid var(--blau); padding: 1.75rem 1rem; text-align: center; }
/* Logo: Schutzzone ¼ der Bildmarkenhöhe — durch den Innenabstand des Balkens gegeben */
.gast-kopf .logo { width: 300px; max-width: 80vw; height: auto; display: inline-block; }
.zentriert { text-align: center; }
.gast-rahmen { max-width: 26rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
.gast-rahmen > .positionierung { margin: 0 0 1.25rem; }
.marke { text-align: center; margin-bottom: 1.5rem; }
.marke .wortmarke { font-size: 1.6rem; }
.karte {
  background: var(--weiss); border-top: 4px solid var(--blau);
  padding: 1.75rem 1.5rem; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.karte h1 { font-size: 1.35rem; }
.fuss { color: var(--kohle); font-size: .8rem; text-align: center; margin-top: 1.5rem; }

/* --- Formulare -------------------------------------------------------- */
.formular { display: flex; flex-direction: column; gap: .35rem; }
.formular label { font-family: var(--schrift-titel); font-size: .8rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; margin-top: .6rem; }
.formular input {
  font: inherit; padding: .6rem .7rem; border: 1px solid #c9c9c9; border-radius: 2px;
  background: var(--papier); width: 100%;
}
.formular input:focus { background: var(--weiss); border-color: var(--blau); }
.hilfe { color: var(--kohle); font-size: .8rem; }
.knopf {
  margin-top: 1.1rem; font: 500 1rem var(--schrift-titel); color: var(--weiss);
  background: var(--schwarz); border: 0; border-radius: 2px; padding: .7rem 1rem; cursor: pointer;
}
.knopf:hover { background: var(--blau); }
.knopf-leise { font: inherit; background: none; border: 1px solid #5f5f5f; color: var(--weiss);
  padding: .3rem .7rem; border-radius: 2px; cursor: pointer; }
.knopf-leise:hover { border-color: var(--weiss); }
.nebenlink { margin: 1rem 0 0; font-size: .9rem; }
.ausklapp { margin-top: 1.25rem; font-size: .9rem; }
.ausklapp summary { cursor: pointer; color: var(--blau); }

/* --- Meldungen (Form zusätzlich zur Farbe, Ampelregel) ----------------- */
.meldung { padding: .7rem .9rem; margin-bottom: 1rem; border-left: 4px solid; font-size: .95rem; }
.meldung-ok { background: var(--gruen-flaeche); border-color: var(--gruen); }
.meldung-ok::before { content: "● "; color: var(--gruen); }
.meldung-fehler { background: var(--rot-flaeche); border-color: var(--rot); }
.meldung-fehler div::before { content: "■ "; color: var(--rot); }

/* --- Angemeldet --------------------------------------------------------- */
.kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--schwarz); color: var(--weiss); padding: .75rem 1.25rem;
  border-bottom: 3px solid var(--blau);
}
.kopf-marke { color: var(--weiss); text-decoration: none; display: flex; align-items: baseline; gap: .75rem; }
.kopf-marke .wortmarke { font-size: 1.1rem; }
.kopf-titel { color: #bdbdbd; font-size: .9rem; }
.kopf-nutzer { display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
.kopf-nutzer form { margin: 0; }
.inhalt { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem; }

@media (max-width: 30rem) {
  .gast-rahmen { padding-top: 1.5rem; }
  .kopf-titel { display: none; }
}

/* --- Navigation, Seiten ------------------------------------------------- */
.kopf-nav { display: flex; gap: 1rem; margin-right: auto; margin-left: 1.5rem; }
.kopf-nav a { white-space: nowrap; }
.kopf-konto { white-space: nowrap; }
.kopf-nav a, .kopf-konto { color: #d6d6d6; text-decoration: none; font-size: .95rem; }
.kopf-nav a:hover, .kopf-nav a.aktiv, .kopf-konto:hover { color: var(--weiss); }
.kopf-nav a.aktiv { box-shadow: inset 0 -2px 0 var(--blau); }
.kopfzeile-seite { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kopfzeile-seite > * { min-width: 0; max-width: 100%; }
.kopfzeile-seite .knopf { margin-top: 0; text-decoration: none; }
.schmal { max-width: 28rem; }
.formular select { font: inherit; padding: .55rem .6rem; border: 1px solid #c9c9c9; background: var(--papier); border-radius: 2px; }
.haken { display: flex; gap: .5rem; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-family: var(--schrift-text) !important; font-size: 1rem !important; }
.haken input { width: auto; }
.knopf-zweit { display: inline-block; font: 500 .95rem var(--schrift-titel); color: var(--schwarz); background: var(--weiss);
  border: 1px solid var(--schwarz); border-radius: 2px; padding: .5rem .9rem; cursor: pointer; text-decoration: none; }
.knopf-zweit:hover { border-color: var(--blau); color: var(--blau); }
form.inline { display: inline-block; margin: .5rem .5rem .5rem 0; }
.aktionen { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.kasten { background: var(--papier); border-left: 4px solid var(--hellgrau); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.kasten h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.kasten-wichtig { border-left-color: var(--blau); }
.startpasswort code, .schluessel { font-size: 1.2rem; letter-spacing: .05em; background: var(--weiss); padding: .3rem .6rem; border: 1px solid var(--hellgrau); }
.codes { columns: 2; font-family: ui-monospace, Consolas, monospace; padding-left: 1.2rem; }
.schritte li { margin-bottom: 1.5rem; }
.qr { background: var(--weiss); display: block; width: max-content; padding: .75rem; margin: .75rem 0; border: 1px solid var(--hellgrau); }
.felder { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.5rem; }
.felder dt { color: var(--kohle); }
.felder dd { margin: 0; overflow-wrap: anywhere; }
.meldung-hinweis { background: #fff4cc; border-color: #e8a600; }
.meldung-hinweis::before { content: "▲ "; color: #e8a600; }

/* Zustandsanzeigen: Ampel mit Form (Manual: Farbe allein reicht nicht) */
.zustand { white-space: nowrap; font-size: .9rem; }
.zustand::before { margin-right: .3rem; }
.zustand-ok::before { content: "●"; color: var(--gruen); }
.zustand-fehlt::before { content: "■"; color: var(--rot); }
.zustand-offen::before { content: "–"; color: #9aa0a6; }

/* Tabelle nach CI: schwarzer Kopf, feines Raster */
.tabelle { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .95rem; }
.tabelle th { background: var(--schwarz); color: var(--weiss); text-align: left; font: 500 .8rem var(--schrift-titel);
  letter-spacing: .06em; text-transform: uppercase; padding: .55rem .6rem; }
.tabelle td { padding: .55rem .6rem; border-bottom: 1px solid var(--hellgrau); }
.tabelle tr.gesperrt td { color: #9aa0a6; }
.legende { color: var(--kohle); font-size: .85rem; margin-top: .75rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.kachel { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border: 1px solid var(--hellgrau);
  border-top: 3px solid var(--blau); color: var(--schwarz); text-decoration: none; }
.kachel:hover { border-color: var(--blau); }
.kachel span { color: var(--kohle); font-size: .9rem; }
@media (max-width: 48rem) {
  .kopf { flex-wrap: wrap; }
  .kopf-nav { order: 3; width: 100%; margin: .5rem 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .35rem; }
  .kopf-nav::-webkit-scrollbar { display: none; }
  .kopf-nav a { white-space: nowrap; flex: 0 0 auto; }
  .tabelle, .zeilen-tabelle { display: block; overflow-x: auto; max-width: 100%; }
}

/* --- Kunden, Protokoll -------------------------------------------------- */
.formular textarea { font: inherit; padding: .6rem .7rem; border: 1px solid #c9c9c9; background: var(--papier); border-radius: 2px; width: 100%; }
.abschnitt { font-size: 1.05rem; margin: 1.75rem 0 .25rem; }
.umbruch { white-space: pre-line; }
.filter { display: flex; gap: .5rem; align-items: center; }
.filter select { font: inherit; padding: .45rem .5rem; border: 1px solid #c9c9c9; background: var(--papier); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.blaettern { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; color: var(--kohle); }
form.gefahr { margin-top: 2rem; display: block; }

/* --- Ampel (CI: Farbe UND Form) ------------------------------------------ */
.ampel { white-space: nowrap; font-size: .9rem; }
.ampel::before { display: inline-block; width: 1em; margin-right: .3rem; text-align: center; }
.ampel-vorhanden::before { content: "●"; color: var(--gruen); }
.ampel-teilweise::before { content: "▲"; color: #d9a400; }
.ampel-fehlt::before     { content: "■"; color: var(--rot); }
.ampel-entfaellt::before { content: "–"; color: #9aa0a6; }
.legende .ampel { margin-left: 1rem; }

/* --- Systemkontrolle ----------------------------------------------------- */
.kicker { font: 500 .75rem var(--schrift-titel); letter-spacing: .08em; text-transform: uppercase; color: var(--blau); margin: 0 0 .25rem; }
.karte-flach { border: 1px solid var(--hellgrau); padding: 1rem 1.25rem; margin: 1rem 0 1.5rem; }
.karte-flach h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
.klein { font-size: .85rem; }
.zaehler { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1.5rem; }
.zaehler-kachel { border: 1px solid var(--hellgrau); border-top: 3px solid #9aa0a6; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
.zaehler-kachel b { font: 700 1.6rem var(--schrift-titel); }
.zaehler-kachel.ampel-vorhanden { border-top-color: var(--gruen); }
.zaehler-kachel.ampel-teilweise { border-top-color: var(--gelb); }
.zaehler-kachel.ampel-fehlt     { border-top-color: var(--rot); }
.zaehler-kachel.ampel-vorhanden::before, .zaehler-kachel.ampel-teilweise::before,
.zaehler-kachel.ampel-fehlt::before, .zaehler-kachel.ampel-entfaellt::before { content: none; }
.punkte { list-style: none; padding: 0; margin: .5rem 0 1rem; border-top: 1px solid var(--hellgrau); }
.punkt { border-bottom: 1px solid var(--hellgrau); border-left: 4px solid #9aa0a6; }
.punkt.ampel-vorhanden { border-left-color: var(--gruen); }
.punkt.ampel-teilweise { border-left-color: var(--gelb); }
.punkt.ampel-fehlt     { border-left-color: var(--rot); }
.punkt.ampel-vorhanden::before, .punkt.ampel-teilweise::before, .punkt.ampel-fehlt::before, .punkt.ampel-entfaellt::before { content: none; }
.punkt summary { display: grid; grid-template-columns: 2rem 1fr auto; gap: .75rem; align-items: center; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.punkt summary::-webkit-details-marker { display: none; }
.punkt summary:hover { background: var(--papier); }
.punkt-nr { font: 700 1.1rem var(--schrift-titel); color: var(--kohle); text-align: center; }
.punkt-titel { display: flex; flex-direction: column; }
.punkt-titel small { color: var(--kohle); font-size: .8rem; }
.punkt-koerper { padding: 0 1rem 1rem 3.75rem; }
.hinweistext { color: var(--kohle); font-size: .9rem; margin: 0 0 .75rem; }
.punkt-formular { max-width: 36rem; }
.punkt-formular .knopf { align-self: flex-start; }
.punkt-notiz-druck { margin: 0; padding: 0 1rem .75rem 3.75rem; font-size: .9rem; }
.nur-drucken { display: none; }
@media (max-width: 48rem) {
  .zaehler { grid-template-columns: repeat(2, 1fr); }
  .punkt-koerper, .punkt-notiz-druck { padding-left: 1rem; }
  .punkt summary { grid-template-columns: 1.5rem 1fr; }
  .punkt summary .ampel { grid-column: 2; }
}

/* --- Druck --------------------------------------------------------------- */
@media print {
  .nicht-drucken, .punkt-koerper, .nebenlink, form.gefahr, .meldung { display: none !important; }
  .nur-drucken { display: block; }
  .inhalt { max-width: none; padding: 0; }
  body { font-size: 10pt; }
  .punkt { break-inside: avoid; }
  .punkt summary { padding: .4rem .5rem; }
  a { color: inherit; text-decoration: none; }
}

/* --- Belegschaft --------------------------------------------------------- */
.werkzeuge { display: flex; gap: .5rem; flex-wrap: wrap; }
.werkzeuge .knopf { margin-top: 0; text-decoration: none; }
.chip { display: inline-block; margin: 0 .6rem .2rem 0; font-size: .85rem; }
.quali { border: 1px solid var(--hellgrau); border-left: 4px solid #9aa0a6; margin-bottom: .5rem; }
.quali.ampel-vorhanden { border-left-color: var(--gruen); }
.quali.ampel-teilweise { border-left-color: var(--gelb); }
.quali.ampel-fehlt     { border-left-color: var(--rot); }
.quali.neu { border-left-color: var(--blau); }
.quali::before { content: none !important; }
.quali summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .65rem 1rem; cursor: pointer; list-style: none; }
.quali summary::-webkit-details-marker { display: none; }
.quali summary:hover { background: var(--papier); }
.quali .punkt-koerper { padding: 0 1rem 1rem; }
.raster-formular { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1rem; }
.raster-formular .feld { display: flex; flex-direction: column; gap: .3rem; }
.raster-formular .breit { grid-column: 1 / -1; }
.raster-formular .knopf { align-self: flex-start; margin-top: .25rem; }
.raster-formular select, .raster-formular input { width: 100%; }
.betreuer-zeile { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.haken.klein { font-size: .85rem !important; color: var(--kohle); }
@media (max-width: 48rem) { .raster-formular { grid-template-columns: 1fr; } }
@media print { .werkzeuge { display: none; } .tabelle { font-size: 9pt; } }

/* --- Aufgaben, Zeiten ---------------------------------------------------- */
.bilanz { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0; color: var(--kohle); font-size: .95rem; }
.bilanz b { color: var(--schwarz); font-family: var(--schrift-titel); }
.filterleiste { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; }
.chip-filter { border: 1px solid var(--hellgrau); padding: .3rem .75rem; border-radius: 999px; color: var(--schwarz); text-decoration: none; font-size: .9rem; }
.chip-filter:hover { border-color: var(--blau); }
.chip-filter.an { background: var(--schwarz); border-color: var(--schwarz); color: var(--weiss); }
.ampel-ohne::before { content: none; }
.aufgabe .punkt-titel b { font-weight: 700; }

/* --- Dokumente, Nachweise ------------------------------------------------ */
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .75rem 0; }
.aktionen-zeile form { margin: 0; }
.aktionen-zeile .knopf, .aktionen-zeile .knopf-zweit { margin-top: 0; }
.dok-zeile { margin: .25rem 0; display: flex; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
.nachweise { border-top: 1px dashed var(--hellgrau); margin-top: .75rem; padding-top: .5rem; }
.nachweise h4 { font: 500 .8rem var(--schrift-titel); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .3rem; color: var(--kohle); }
.nachweis-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.knopf-leise-dunkel { font: inherit; font-size: .85rem; background: none; border: 0; color: var(--rot); cursor: pointer; text-decoration: underline; padding: 0; }
input.berechnet { background: var(--hellgrau) !important; color: var(--kohle); }
.gruppe-titel { font-size: .95rem; margin: .75rem 0 0; color: var(--blau); }
.foto-feld img.vorschau { max-width: 100%; max-height: 10rem; border: 1px solid var(--hellgrau); display: block; margin-bottom: .3rem; }
.symbolwahl summary { cursor: pointer; color: var(--blau); font-size: .9rem; margin-top: .3rem; }
.symbole { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: .4rem; margin-top: .5rem; }
.symbole label { display: flex; flex-direction: column; align-items: center; gap: .2rem; border: 1px solid var(--hellgrau); padding: .3rem; cursor: pointer; }
.symbole img { width: 2.6rem; height: 2.6rem; object-fit: contain; }
.symbole input:checked + img { outline: 3px solid var(--blau); }

/* Stufe 1 — Portal, Freigaben, Einstellungen */
.marke-neu { display: inline-block; margin-left: .4rem; padding: 0 .4rem; font: 500 .7rem var(--schrift-titel); letter-spacing: .05em; text-transform: uppercase; color: var(--weiss); background: var(--blau); vertical-align: middle; }
.abstand-oben { margin-top: 2rem; }
.freigabe-kasten { border: 1px solid var(--hellgrau); border-left: 4px solid var(--blau); padding: .9rem 1.1rem; margin: 1rem 0; }
.freigabe-kasten h2 { font-size: 1rem; margin: 0 0 .4rem; }
.freigabe-kasten .tabelle { margin-top: .5rem; font-size: .9rem; }
.inline-formular { display: inline-flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.knopf-leise-dunkel { font: inherit; font-size: .85rem; background: none; border: 1px solid #c9c9c9; padding: .2rem .5rem; cursor: pointer; color: var(--schwarz); }
.knopf-leise-dunkel:hover { border-color: var(--rot); color: var(--rot); }

/* Stufe 3 — Personal, Bautagebuch, Abnahme */
.personal-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.personal-karte { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--hellgrau); border-top: 3px solid var(--blau); color: inherit; text-decoration: none; background: var(--weiss); }
.personal-karte:hover { border-color: var(--blau); }
.personal-karte.inaktiv { opacity: .6; }
.personal-karte .kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.personal-karte .score { font: 700 1rem var(--schrift-titel); min-width: 2.6rem; text-align: center; padding: .15rem .5rem; border-radius: 3px; background: #fff; color: #111; }
.personal-karte .score-gut { background: #2e8b47; color: #fff; }
.personal-karte .score-mittel { background: #f2b705; color: #111; }
.personal-karte .score-schlecht { background: #c0392b; color: #fff; }
.personal-karte .achtung { background: var(--rot-flaeche); color: var(--rot); font-size: .85rem; padding: .25rem .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: .78rem; border: 1px solid var(--hellgrau); padding: .1rem .45rem; background: var(--papier); }
.chip-warn { border-color: #e8a600; background: #fff4cc; }
.chip-rot { border-color: var(--rot); background: var(--rot-flaeche); }
.tabelle.kompakt td, .tabelle.kompakt th { padding: .35rem .5rem; }
.tabelle.kompakt input[type=date] { font: inherit; padding: .25rem; }
.aktionen-klein { display: flex; gap: 1rem; align-items: center; margin-top: .5rem; }
.dateiliste { padding-left: 1.2rem; }
.zeilen-tabelle { width: 100%; border-collapse: collapse; margin: .25rem 0 .75rem; }
.zeilen-tabelle th { text-align: left; font: 500 .75rem var(--schrift-titel); letter-spacing: .05em; text-transform: uppercase; color: var(--kohle); padding: .25rem .3rem; }
.zeilen-tabelle td { padding: .15rem .3rem; }
.zeilen-tabelle input, .zeilen-tabelle select { width: 100%; font: inherit; padding: .35rem .4rem; border: 1px solid #c9c9c9; background: var(--papier); box-sizing: border-box; }
.status-Abgenommen { border-left: 4px solid var(--gruen); }
.status-Abgelehnt { border-left: 4px solid var(--rot); }
.status-Nacharbeit { border-left: 4px solid #e8a600; }
.status-Offen { border-left: 4px solid #9aa0a6; }
.pruefpunkt { padding: .5rem .75rem; margin: .4rem 0; background: var(--weiss); border: 1px solid var(--hellgrau); }
.pruefpunkt .zeile { display: grid; grid-template-columns: 1fr 10rem; gap: .5rem; align-items: center; }
.pruefpunkt .notizen { display: grid; grid-template-columns: 1fr 1fr 10rem 9rem 6rem; gap: .5rem; margin-top: .35rem; }
@media (max-width: 48rem) { .pruefpunkt .zeile, .pruefpunkt .notizen { grid-template-columns: 1fr; } }
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.tabelle-rahmen { overflow-x: auto; }
.zeilen-tabelle .w10 { width: 7rem; } .zeilen-tabelle .w15 { width: 10rem; }
.haken-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .25rem 1rem; margin: .75rem 0; }
img.vorschau { max-width: 100%; max-height: 9rem; object-fit: cover; display: block; margin-bottom: .3rem; border: 1px solid var(--hellgrau); }
.foto-reihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .75rem; margin-bottom: .75rem; }
.bereich-name { font: inherit; font-size: 1.05rem; border: 0; border-bottom: 1px dashed #c9c9c9; background: none; width: 100%; padding: .2rem 0; }
.neuer-punkt { margin: .3rem 0 1rem; }
.bilanz .status-Abgenommen, .bilanz .status-Nacharbeit, .bilanz .status-Abgelehnt, .bilanz .status-Offen { padding-left: .5rem; }
.pruefpunkt input, .pruefpunkt select { font: inherit; padding: .35rem .45rem; border: 1px solid #c9c9c9; background: var(--papier); width: 100%; box-sizing: border-box; }
.pruefpunkt .haken input { width: auto; }
fieldset.ohne-rahmen > .knopf, form.formular > .knopf { align-self: flex-start; }
.av-kasten { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .8rem 1rem; border: 1px solid var(--hellgrau); border-left: 4px solid var(--blau); }
.av-kasten .knopf { margin-top: 0; text-decoration: none; }
.aktionen-zelle { display: flex; gap: .4rem; flex-wrap: wrap; }
.inline-formular select, .inline-formular input:not([type=checkbox]):not([type=file]) { font: inherit; padding: .5rem .55rem; border: 1px solid #c9c9c9; background: var(--papier); }
.zeitleiste-rahmen { overflow-x: auto; border: 1px solid var(--hellgrau); margin: 1rem 0 .5rem; background: var(--weiss); }
.zeitleiste-rahmen svg { min-width: 56rem; display: block; }
.lg { display: inline-block; width: .9rem; height: .6rem; vertical-align: middle; }
.lg-blau { background: #0058D0; } .lg-gelb { background: #E8A600; } .lg-grau { background: #9AA0A6; } .lg-gruen { background: #1E8449; }
.ergebnis-satz { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.2rem; margin: 1rem 0; background: var(--schwarz); color: var(--weiss); border-left: 6px solid var(--blau); }
.ergebnis-satz span { font: 500 .75rem var(--schrift-titel); letter-spacing: .08em; text-transform: uppercase; color: #bdbdbd; }
.ergebnis-satz b { font: 700 1.8rem var(--schrift-titel); }
.ergebnis-satz small { color: #d6d6d6; }
.warn-text { color: #FFC300; }
.katalog-gruppe { border-left: 3px solid var(--hellgrau); padding: .3rem .75rem; margin: .4rem 0; }
.katalog-gruppe summary { cursor: pointer; }
.katalog-unter { font: 500 .8rem var(--schrift-titel); letter-spacing: .05em; text-transform: uppercase; color: var(--kohle); margin: .75rem 0 .25rem; }
.katalog-eintrag { align-items: flex-start !important; font-size: .9rem; margin: .25rem 0; }
.katalog-eintrag input { margin-top: .25rem; }
.unterabschnitt { font-size: .95rem; margin: 1rem 0 .25rem; color: var(--kohle); }
.wissen-liste { padding-left: 1.2rem; margin: .25rem 0 1rem; }
.wissen-liste li { margin: .25rem 0; }
.schritte-liste li { margin: .4rem 0; }
.abstand-klein { margin-top: .75rem; }
a.chip { color: inherit; text-decoration: none; }

/* Prüfregister */
.zaehler-kachel { color: inherit; text-decoration: none; }
.zaehler-kachel.an { background: var(--papier); outline: 2px solid var(--schwarz); }
.pruef-tabelle td:first-child input { margin: 0; }
.etiketten-leiste { border: 1px solid var(--hellgrau); padding: .75rem 1rem; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; }
.etiketten-leiste legend { font: 600 .85rem var(--schrift-titel); padding: 0 .3rem; }
.status-gross { font-size: 1rem; font-weight: 700; }
.geraet-kopf { display: flex; gap: 2rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.geraet-kopf .felder { flex: 1 1 24rem; }
.geraet-qr { margin: 0; text-align: center; font-size: .85rem; }
.geraet-qr svg { display: block; width: 9rem; height: 9rem; margin: 0 auto .3rem; }
.hinweis-rot { background: var(--rot-flaeche); border-left: 4px solid var(--rot); padding: .7rem 1rem; }
.hinweis-ok { background: var(--gruen-flaeche); border-left: 4px solid var(--gruen); padding: .7rem 1rem; }
.fehlerliste { font-size: .9rem; color: var(--rot); }
.ablage { display: block; border: 2px dashed #b9bdc2; padding: 2rem 1rem; text-align: center; cursor: pointer; margin: 1rem 0; }
.ablage.ueber { border-color: var(--schwarz); background: var(--papier); }
.ablage input { display: block; margin: 0 auto .6rem; }
#pruef-import progress { width: 100%; height: 1rem; }
/* Statusseite hinter dem QR-Code (Handy auf der Baustelle) */
.scan-status { display: flex; gap: 1rem; align-items: center; padding: 1rem; margin: 0 0 1rem; border-left: 6px solid #9aa0a6; background: var(--papier); }
.scan-status strong { display: block; font: 700 1.25rem var(--schrift-titel); }
.scan-zeichen { font: 700 2rem/1 var(--schrift-titel); width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--weiss); background: #9aa0a6; flex: none; }
.scan-gueltig { border-color: var(--gruen); background: var(--gruen-flaeche); } .scan-gueltig .scan-zeichen { background: var(--gruen); }
.scan-bald { border-color: var(--gelb); } .scan-bald .scan-zeichen { background: #d9a400; }
.scan-mangel, .scan-ueberfaellig { border-color: var(--rot); background: var(--rot-flaeche); }
.scan-mangel .scan-zeichen, .scan-ueberfaellig .scan-zeichen { background: var(--rot); }
.scan-felder { margin-bottom: 1.25rem; }
/* Scanner */
.scanner-bild { position: relative; max-width: 32rem; aspect-ratio: 4 / 3; background: #000; margin: 0 0 1rem; overflow: hidden; }
.scanner-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-rahmen { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 3px solid var(--blau); border-radius: 6px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.scanner-liste { list-style: none; padding: 0; }
.scanner-liste li { padding: .6rem 0; border-bottom: 1px solid var(--hellgrau); }
.scanner-zuordnen { border-top: 3px solid var(--blau); padding-top: .5rem; }
.tabelle .rechts { text-align: right; white-space: nowrap; }
/* Angebote und Verträge */
.werkzeugleiste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.beleg-formular textarea, .beleg-formular input:not([type=checkbox]):not([type=radio]) { width: 100%; }
.beleg-abschnitt { border: 1px solid var(--hellgrau); padding: .75rem 1rem 1rem; margin: 0 0 1rem; }
.beleg-abschnitt legend { font: 600 .85rem var(--schrift-titel); padding: 0 .3rem; }
.beleg-pos td { vertical-align: top; }
.beleg-pos td:first-child { min-width: 18rem; }
.beleg-pos .zahl { width: 6.5rem; text-align: right; }
.beleg-pos .kurz { width: 5rem; }
.beleg-pos tr.leer textarea { background: var(--papier); }
.beleg-pos select.klein { font-size: .8rem; margin-top: .25rem; max-width: 100%; }
.beleg-summen { margin: .5rem 0 1rem auto; border-collapse: collapse; min-width: 18rem; }
.beleg-summen th { text-align: left; font-weight: 400; padding: .25rem 1rem .25rem 0; }
.beleg-summen td { text-align: right; padding: .25rem 0; white-space: nowrap; }
.beleg-summen .brutto th, .beleg-summen .brutto td { font-weight: 700; border-top: 2px solid var(--schwarz); }
.beleg-baustein { border-left: 3px solid var(--hellgrau); padding: .4rem 0 .4rem .75rem; margin: 0 0 .75rem; }
.baustein-kopf { display: flex; gap: .6rem; align-items: center; margin-bottom: .3rem; }
.baustein-kopf .nr { font-weight: 700; min-width: 2.2rem; }
.baustein-kopf input { flex: 1; font-weight: 700; }
.baustein-wahl { border: 0; padding: 0; margin: .5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .2rem 1rem; }
.baustein-wahl legend { font: 600 .85rem var(--schrift-titel); margin-bottom: .3rem; }
.speicherleiste { position: sticky; bottom: 0; background: var(--weiss); padding: .6rem 0; border-top: 1px solid var(--hellgrau); margin: 1rem 0 0; }
.preis-zeile { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.preis-zeile input { min-width: 8rem; } .preis-zeile input[name=bezeichnung] { min-width: 20rem; }
.preis-zeile .kurz { min-width: 5rem; width: 5rem; } .preis-zeile .zahl { min-width: 6rem; width: 6rem; text-align: right; }
.scanner-rahmen { z-index: 2; pointer-events: none; }
/* Projektdokumentation */
fieldset.ohne-rahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
.kabel-tabelle { font-size: .85rem; }
.kabel-tabelle td { padding: .2rem .25rem; vertical-align: top; }
.kabel-tabelle th { white-space: nowrap; font-size: .7rem; }
.kabel-tabelle input, .kabel-tabelle select { width: 9rem; font-size: .85rem; padding: .3rem .35rem; }
.kabel-tabelle input.schmal { width: 5.5rem; }
.kabel-tabelle input[type=date] { width: 9.5rem; }
.stamm-tabelle input { width: 100%; min-width: 6rem; font-size: .85rem; }
.markiert-leiste { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin: 1.5rem 0 0; }
.etiketten-leiste input { max-width: 14rem; }
/* Verwaltungsmenü oben rechts */
.kopf-menue { position: relative; }
.kopf-menue summary { list-style: none; cursor: pointer; color: #d6d6d6; font-size: 1.4rem; line-height: 1; padding: .1rem .5rem .35rem; border: 1px solid #444; border-radius: 4px; }
.kopf-menue summary::-webkit-details-marker { display: none; }
.kopf-menue summary:hover, .kopf-menue[open] summary { color: var(--weiss); border-color: #888; }
.kopf-menue-liste { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 14rem; background: var(--weiss); border: 1px solid var(--hellgrau); box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: .4rem 0; display: flex; flex-direction: column; }
.kopf-menue-liste a { color: var(--schwarz); text-decoration: none; padding: .5rem 1rem; font-size: .95rem; }
.kopf-menue-liste a:hover, .kopf-menue-liste a.aktiv { background: var(--papier); box-shadow: inset 3px 0 0 var(--blau); }
.kopf-menue-titel { font: 500 .7rem var(--schrift-titel); text-transform: uppercase; letter-spacing: .1em; color: var(--kohle); padding: .3rem 1rem .4rem; }
.kopf-menue-liste form { margin: 0; border-top: 1px solid var(--hellgrau); margin-top: .3rem; padding-top: .3rem; }
.menue-knopf { background: none; border: 0; width: 100%; text-align: left; padding: .5rem 1rem; font: inherit; font-size: .95rem; color: var(--schwarz); cursor: pointer; }
.menue-knopf:hover { background: var(--papier); box-shadow: inset 3px 0 0 var(--blau); }
.knopf-gefahr { margin-top: 1.1rem; font: 500 1rem var(--schrift-titel); color: var(--weiss);
  background: var(--rot); border: 0; border-radius: 2px; padding: .7rem 1rem; cursor: pointer; }
.knopf-gefahr:hover { background: #962d22; }
details.gefahr { margin-top: 2rem; }
details.gefahr > summary { color: var(--rot); }
.knopf-gruppe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.knopf-gruppe .knopf, .knopf-gruppe .knopf-zweit { margin-top: 0; }
.haken-klein { display: inline-flex; gap: .3rem; align-items: center; font-size: .85rem; margin-right: .4rem; }

/* Aufgabenboard */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; }
.board-spalte { background: var(--papier); border: 1px solid var(--hellgrau); border-radius: 4px; padding: .6rem; min-width: 0; }
.board-spalte h2 { font-size: .95rem; margin: .1rem .2rem .6rem; display: flex; justify-content: space-between; }
.board-spalte h2 small { color: var(--kohle); font-weight: 500; }
.board-liste { list-style: none; margin: 0; padding: 0; min-height: 2.5rem; display: grid; gap: .45rem; border-radius: 3px; }
.board-liste.ziel { outline: 2px dashed var(--blau); outline-offset: 2px; }
.bkarte { background: var(--weiss); border: 1px solid var(--hellgrau); border-left: 3px solid #c8ccd0; border-radius: 3px; cursor: grab; }
.bkarte.zieht { opacity: .5; }
.bkarte-hoch { border-left-color: var(--rot); }
.bkarte-spaet .bkarte-datum { color: var(--rot); font-weight: 700; }
.bkarte summary { list-style: none; padding: .5rem .6rem; display: grid; gap: .3rem; cursor: pointer; }
.bkarte summary::-webkit-details-marker { display: none; }
.bkarte-titel { font-size: .93rem; line-height: 1.35; overflow-wrap: anywhere; }
.bkarte-meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .75rem; color: var(--kohle); }
.bkarte-bezug, .bkarte-datum { background: var(--hellgrau); border-radius: 2px; padding: 0 .3rem; }
.bkarte-wer { margin-left: auto; background: var(--schwarz); color: var(--weiss); border-radius: 50%; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; }
.bkarte-form { padding: 0 .6rem .4rem; display: grid; gap: .4rem; cursor: default; }
.bkarte-form label { display: grid; gap: .15rem; font-size: .78rem; color: var(--kohle); }
.bkarte-form input, .bkarte-form select, .bkarte-form textarea { min-width: 0; box-sizing: border-box; font: inherit; font-size: .85rem; padding: .3rem .4rem; border: 1px solid #b5b5b5; border-radius: 2px; width: 100%; }
.bkarte-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
.bkarte-knoepfe { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.bkarte-knoepfe .knopf-zweit { padding: .35rem .7rem; font-size: .85rem; }
.bkarte-weg { padding: 0 .6rem .6rem; }
.board-neu { margin-top: .5rem; }
.board-neu input { width: 100%; font: inherit; font-size: .88rem; padding: .45rem .5rem; border: 1px dashed #b5b5b5; border-radius: 3px; background: transparent; }
.board-neu input:focus { background: var(--weiss); border-style: solid; }
@media (max-width: 900px) { .board { grid-template-columns: repeat(5, 78vw); scroll-snap-type: x mandatory; } .board-spalte { scroll-snap-align: start; } }

/* Support */
.zahl-punkt { display: inline-block; min-width: 1.2rem; padding: 0 .3rem; margin-left: .2rem; border-radius: .6rem; background: var(--rot); color: var(--weiss); font-size: .72rem; font-weight: 700; text-align: center; line-height: 1.2rem; }
.verlauf { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .75rem; }
.verlauf-eintrag { border: 1px solid var(--hellgrau); border-left: 3px solid #9aa0a6; padding: .75rem 1rem; background: var(--weiss); }
.verlauf-wir { border-left-color: var(--blau); }
.verlauf-intern { background: #fff8e1; border-left-color: var(--gelb); }
.verlauf-kopf { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; margin-bottom: .35rem; }

/* Geschäftsunterlagen */
.unterlage-kat { font-size: 1rem; margin: 1.2rem 0 .3rem; }
.inline-details { display: inline-block; margin-left: .5rem; font-size: .88rem; }
.inline-details > summary { cursor: pointer; color: var(--blau); }
.board-reiter { display: flex; gap: .3rem; border-bottom: 1px solid var(--hellgrau, #ddd); margin: .3rem 0 .8rem; }
.board-reiter a { padding: .45rem .9rem; text-decoration: none; color: inherit; border-bottom: 3px solid transparent; }
.board-reiter a.an { border-bottom-color: var(--blau); font-weight: 600; }
.board-reiter small { color: #777; font-weight: 400; }

/* Dokumente und Unterlagen (Projekt) */
.pu { margin-top: 2rem; }
.pu-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.pu-kopf .abschnitt { margin: 0 0 .35rem; }
.pu-zahlen { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0; }
.pu-knoepfe { display: flex; gap: .5rem; }
.pu-hochladen { border: 1px solid var(--hellgrau, #e2e2e2); background: #fafafa; padding: .9rem 1rem; margin-bottom: .8rem; max-width: none; }
.pu-raster { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: .8rem; }
@media (max-width: 800px) { .pu-raster { grid-template-columns: 1fr; } }
.pu-tabelle td, .pu-tabelle th { vertical-align: middle; }
.pu-tabelle .pu-gruppe td { background: #f3f3f3; font-size: .9rem; padding-top: .45rem; padding-bottom: .45rem; }
.pu-tabelle .pu-cb { width: 2rem; text-align: center; }
.pu-alle { margin-right: .5rem; vertical-align: middle; }
.pu-art { font-size: .85rem; color: var(--kohle, #5a5a5a); white-space: nowrap; }
.pu-aktion { text-align: right; white-space: nowrap; width: 1%; }
.pu-aktion form { display: inline; }
.pu-link { font: inherit; font-size: .85rem; background: none; border: 0; padding: 0; color: var(--blau); cursor: pointer; text-decoration: underline; }
.pu-rot { color: var(--rot, #b3261e); }
.pu-menue { position: relative; display: inline-block; text-align: left; }
.pu-menue > summary { cursor: pointer; color: var(--blau); font-size: .85rem; list-style: none; }
.pu-menue > summary::-webkit-details-marker { display: none; }
.pu-menue-inhalt { position: absolute; right: 0; z-index: 20; width: 320px; background: #fff; border: 1px solid #d5d5d5; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: .8rem; white-space: normal; }
.pu-leiste { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .8rem; margin-top: .4rem; background: #f3f3f3; border-left: 3px solid var(--blau); }
.pu-leiste .haken { margin: 0; }
.pu-zeile > summary { cursor: pointer; color: var(--blau); font-size: .85rem; }
.pu-zeile textarea { display: block; margin-top: .4rem; width: min(520px, 80vw); }
.chip-gruen { background: #e3f3e8; color: #1d6b37; }
.chip-gelb { background: #fff4cc; color: #6b5300; }
.chip-gelb { background: #fff4d6; color: #7a5600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pu-vorschau-hinweis, .pu-vorschau-leer { display: none; }
.pu.kundenansicht .pu-x, .pu.kundenansicht .pu-intern { display: none !important; }
.pu.kundenansicht .pu-vorschau-hinweis { display: block; margin: .2rem 0 0; padding: .45rem .7rem; background: #e8f0fd; border-left: 3px solid var(--blau); font-size: .9rem; }
.pu.kundenansicht .pu-vorschau-leer { display: block; }
.pu.kundenansicht .pu-tabelle { outline: 2px dashed #9bb8ea; outline-offset: 4px; }
.pu [data-kundenansicht][aria-pressed="true"] { background: var(--blau); color: #fff; border-color: var(--blau); }
.pu-hochladen[hidden], .pu-nurkunde { display: none; }
.pu.kundenansicht .pu-nurkunde { display: inline; }
.pu-knoepfe .knopf, .pu-knoepfe .knopf-zweit { white-space: nowrap; }
/* Aufgaben im Projekt */
.pa { margin-top: 1.6rem; }
.pa-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e4e4e4; }
.pa-zeile { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px solid #e4e4e4; flex-wrap: wrap; }
.pa-spaet { background: #fff6f5; }
.pa-haken { display: inline-flex; margin: 0; }
.pa-haken button { width: 1.15rem; height: 1.15rem; border: 2px solid #9a9a9a; border-radius: 50%; background: #fff; cursor: pointer; padding: 0; }
.pa-haken button:hover { border-color: #1d6b37; background: #e3f3e8; }
.pa-haken.an button { border-color: #1d6b37; background: #1d6b37; }
.pa-titel { flex: 1 1 260px; color: inherit; }
.pa-erledigt .pa-titel { text-decoration: line-through; color: #777; }
.pa-meta { display: inline-flex; gap: .6rem; align-items: center; font-size: .85rem; color: #555; margin-left: auto; }
.pa-spalte { padding: .05rem .45rem; border-radius: 2px; background: #eee; font-size: .78rem; }
.pa-arbeit { background: #e8f0fd; color: #0b3f8f; }
.pa-wartet { background: #fff4d6; color: #7a5600; }
.pa-spaet .pa-datum { color: #b3261e; font-weight: 600; }
.pa-wer { display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #111; color: #fff; font-size: .72rem; font-weight: 600; }
.pa-neu { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.pa-neu input[name=titel] { flex: 1 1 280px; }
.pa-neu select, .pa-neu input[type=date] { flex: 0 1 auto; width: auto; }

/* Einsatzplanung */
.ep-leiste { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.ep-leiste .knopf { margin-left: auto; }
.ep-titel { font-family: var(--schrift-titel); margin: 0 .5rem; }
.ep-neu { border: 1px solid #e2e2e2; background: #fafafa; padding: .9rem 1rem; margin-bottom: .6rem; max-width: none; }
.ep-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 900px) { .ep-raster { grid-template-columns: 1fr 1fr; } }
.ep-rahmen { overflow-x: auto; border: 1px solid #e2e2e2; }
.ep-plan { border-collapse: collapse; width: 100%; min-width: 760px; table-layout: fixed; font-size: .85rem; }
.ep-plan th, .ep-plan td { border-bottom: 1px solid #ececec; border-left: 1px solid #f1f1f1; padding: .3rem; vertical-align: top; }
.ep-plan thead th { background: #111; color: #fff; font-weight: 600; text-align: left; font-size: .78rem; position: sticky; top: 0; }
.ep-plan thead th span:first-child { opacity: .7; margin-right: .2rem; }
.ep-plan .ep-name { width: 170px; text-align: left; font-weight: 600; background: #fff; position: sticky; left: 0; z-index: 1; }
.ep-plan thead .ep-name { background: #111; z-index: 2; }
.ep-plan .ep-name small { display: block; font-weight: 400; color: #777; }
.ep-monat .ep-name { width: 140px; }
.ep-gruppe th { background: #f3f3f3; text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #555; }
.ep-zelle { height: 2.6rem; }
.ep-zelle.ep-frei[data-ep-zelle] { cursor: copy; }
.ep-zelle.ep-frei[data-ep-zelle]:hover { background: #eef4ff; }
.ep-we { background: #fafafa; }
.ep-plan thead th.ep-heute { background: var(--blau); }
td.ep-heute { background: #f2f7ff; }
.ep-wochenstart { border-left: 2px solid #c9c9c9 !important; }
.ep-pruef { float: right; background: #f2b705; color: #111; border-radius: 2px; padding: 0 .25rem; font-size: .7rem; }
.ep-einsatz { display: block; margin: 0 0 .2rem; padding: .15rem .35rem; border-radius: 3px; font-size: .78rem; line-height: 1.25; color: #111; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid transparent; }
.ep-einsatz:hover { filter: brightness(.95); text-decoration: underline; }
.ep-projekt { background: #dbe8fd; border-left-color: var(--blau); }
.ep-pruefung { background: #fdeccc; border-left-color: #e08a00; }
.ep-sifa { background: #dff3e4; border-left-color: #2e8b47; }
.ep-intern { background: #ececec; border-left-color: #777; }
.ep-abwesend { background: repeating-linear-gradient(135deg, #f4f4f4 0 6px, #e6e6e6 6px 12px); border-left-color: #999; color: #555; }
.ep-konflikt { box-shadow: inset 0 0 0 2px #c0392b; }
.ep-weiter { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ep-endet { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ep-legende { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .6rem; }
.ep-legende .ep-einsatz { display: inline-block; margin: 0; }
.ep-abo { padding: .6rem 0; }
.ep-abo-link { width: 100%; font-family: monospace; font-size: .85rem; }
.ep-neu[hidden] { display: none; }
.ep-raster label { display: flex; flex-direction: column; gap: .3rem; min-width: 0; margin: 0; }
.ep-raster select, .ep-raster input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.ep-monat { font-size: .75rem; }
.ep-monat .ep-zelle { padding: .25rem 0; }
.ep-monat .ep-einsatz { font-size: 0; height: .55rem; padding: 0; margin: 0 0 .2rem; border-left-width: 0; border-radius: 0; }
.ep-monat .ep-projekt { background: var(--blau); }
.ep-monat .ep-pruefung { background: #e08a00; }
.ep-monat .ep-sifa { background: #2e8b47; }
.ep-monat .ep-intern { background: #888; }
.ep-monat .ep-einsatz:not(.ep-weiter) { margin-left: 2px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.ep-monat .ep-einsatz:not(.ep-endet) { margin-right: 2px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.ep-monat thead th { padding: .25rem .15rem; font-size: .68rem; text-align: center; }

/* Startseite: Cockpit */
.ck-datum { margin-top: -.4rem; }
.ck { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.ck-karte { border: 1px solid #e2e2e2; background: #fff; padding: .9rem 1rem .7rem; display: flex; flex-direction: column; min-width: 0; }
.ck-karte > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.ck-karte h2 { font-size: 1rem; margin: 0; }
.ck-zahl { min-width: 2.4rem; text-align: center; font: 700 1.15rem var(--schrift-titel); padding: .15rem .55rem; border-radius: 3px; }
.ck-gruen { background: #2e8b47; color: #fff; }
.ck-gelb { background: #f2b705; color: #111; }
.ck-rot { background: #c0392b; color: #fff; }
.ck-grau { background: #e6e6e6; color: #555; }
.ck-blau { background: var(--blau); color: #fff; }
.ck-zeile { display: flex; align-items: center; gap: .55rem; padding: .4rem 0; border-top: 1px solid #f0f0f0; color: inherit; text-decoration: none; min-width: 0; }
.ck-zeile:hover .ck-text { text-decoration: underline; }
.ck-punkt { flex: 0 0 .6rem; height: .6rem; border-radius: 50%; background: #bbb; }
.ck-punkt.ep-projekt { background: var(--blau); } .ck-punkt.ep-pruefung { background: #e08a00; } .ck-punkt.ep-sifa { background: #2e8b47; } .ck-punkt.ep-intern { background: #888; } .ck-punkt.ep-abwesend { background: #ccc; }
.ck-p-rot { background: #c0392b; } .ck-p-gelb { background: #f2b705; }
.ck-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.ck-text small { display: block; color: #777; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.ck-meta { font-size: .82rem; color: #555; white-space: nowrap; }
.ck-rottext { color: #b3261e; font-weight: 600; }
.ck-warn { margin: 0 0 .3rem; color: #b3261e; font-weight: 600; font-size: .88rem; }
.ck-zweier { margin: 0 0 .3rem; font-size: .85rem; color: #555; }
.ck-unter { margin: .6rem 0 0; font-size: .8rem; color: #777; text-transform: uppercase; letter-spacing: .05em; }
.ck-karte footer { margin-top: auto; padding-top: .6rem; font-size: .88rem; }

/* Mein Tag (Handy zuerst) */
.mt { max-width: 640px; margin: 0 auto; }
.mt-kopf h1 { margin-bottom: 0; }
.mt-kopf p { margin-top: .1rem; }
.mt-uhr { border: 1px solid #e2e2e2; background: #fafafa; padding: 1rem; margin: .8rem 0 1.2rem; border-left: 5px solid #bbb; }
.mt-uhr-an { border-left-color: #2e8b47; background: #f1faf3; }
.mt-uhr-status { margin: 0; }
.mt-uhr-zeit { font: 700 2.2rem var(--schrift-titel); margin: .2rem 0 .6rem; color: #1d6b37; }
.mt-uhr-form { display: grid; gap: .6rem; }
.mt-uhr-form label { display: flex; flex-direction: column; gap: .25rem; margin: 0; }
.mt-uhr-form select, .mt-uhr-form input { font-size: 1rem; padding: .6rem; }
.mt-gross { width: 100%; padding: .9rem; font: 700 1.1rem var(--schrift-titel); border: 0; border-radius: 4px; cursor: pointer; color: #fff; }
.mt-start { background: #2e8b47; }
.mt-stopp { background: #c0392b; }
.mt-uhr-summe { margin: .7rem 0 0; font-size: .92rem; }
.mt-titel { font-size: 1.05rem; margin: 1.4rem 0 .5rem; text-transform: uppercase; letter-spacing: .06em; color: #555; }
.mt-einsatz { border: 1px solid #e2e2e2; border-left: 5px solid var(--blau); padding: .8rem .9rem; margin-bottom: .8rem; background: #fff; }
.mt-einsatz.ep-pruefung { border-left-color: #e08a00; } .mt-einsatz.ep-sifa { border-left-color: #2e8b47; } .mt-einsatz.ep-intern { border-left-color: #888; } .mt-einsatz.ep-abwesend { border-left-color: #bbb; background: #fafafa; }
.mt-einsatz h3 { margin: .1rem 0 .2rem; font-size: 1.15rem; }
.mt-einsatz p { margin: .1rem 0; }
.mt-zeit { font-size: .85rem; color: #555; font-weight: 600; }
.mt-knopf { display: inline-block; padding: .55rem .8rem; border: 1px solid #c9c9c9; border-radius: 4px; background: #fff; color: #111; text-decoration: none; font: inherit; font-size: .95rem; cursor: pointer; }
.mt-navi { display: block; margin: .6rem 0; background: var(--blau); border-color: var(--blau); color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-klein { padding: .45rem .7rem; font-size: .88rem; }
.mt-kontakt { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .45rem 0; border-top: 1px solid #f0f0f0; }
.mt-kontakt small { display: block; color: #777; font-size: .8rem; }
.mt-hinweis { margin-top: .5rem !important; padding: .5rem .6rem; background: #fff8e1; border-left: 3px solid #f2b705; font-size: .9rem; }
.mt-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.mt-aktionen form { margin: 0; }
.mt-leer { color: #777; }
.mt-morgen { margin: .3rem 0; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.mt-morgen small { color: #777; width: 100%; padding-left: 1.1rem; }
.mt-aufgabe { display: flex; align-items: center; gap: .7rem; padding: .6rem .2rem; border-bottom: 1px solid #ececec; }
.mt-aufgabe .pa-haken button { width: 1.6rem; height: 1.6rem; }
.mt-aufgabe-text { flex: 1; }
.mt-aufgabe-text small { display: block; color: #777; font-size: .8rem; }
.mt-zeitzeile { border-bottom: 1px solid #ececec; }
.mt-zeitzeile summary { display: flex; justify-content: space-between; gap: .6rem; padding: .55rem 0; cursor: pointer; list-style: none; }
.mt-zeit-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; padding-bottom: .7rem; }
.mt-zeit-form label { display: flex; flex-direction: column; margin: 0; font-size: .85rem; }
.mt-zeit-form input { width: 7.5rem; }
.foto-knopf { cursor: pointer; }
.mt-uhr-form select { width: 100%; min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.mt, .mt-einsatz { min-width: 0; overflow-wrap: anywhere; }

/* Qualifikationsnachweise */
.nw-filter { margin: .6rem 0; }
.nw-filter select { min-width: 22rem; max-width: 100%; }
.nw-aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 800px) { .nw-aktionen { grid-template-columns: 1fr; } }
.nw-weg { border: 1px solid #e2e2e2; background: #fafafa; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.nw-weg h2 { margin: 0; font-size: 1rem; }
.nw-weg label { display: flex; flex-direction: column; gap: .25rem; width: 100%; margin: 0; }
.nw-weg label.haken { flex-direction: row; }

.nw-weg.formular { max-width: none; margin: 0; }

/* Jobanfragen */
.job-form { max-width: none; }
.job-teil { margin-bottom: 1rem; }
.job-breit { grid-column: span 2; }
.job-passt-nicht td { opacity: .5; }
.score-chip { display: inline-block; min-width: 2.2rem; text-align: center; padding: .05rem .4rem; border-radius: 3px; font-weight: 700; background: #eee; }
.score-chip.score-gut { background: #2e8b47; color: #fff; } .score-chip.score-mittel { background: #f2b705; } .score-chip.score-schlecht { background: #c0392b; color: #fff; }
/* Partnerverträge */
.vt-aktionen { margin: .5rem 0 1rem; align-items: center; }
.vt-aktionen form { display: inline; }
.vt-hilfe summary { cursor: pointer; }
.vt-hilfe p { margin: .6rem 0 0; }
.vt-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.vt-klausel { margin-bottom: .7rem; display: grid; gap: .4rem; }
.vt-klausel-kopf { display: flex; gap: .8rem; align-items: center; }
.vt-klausel-kopf input[type="text"], .vt-klausel-kopf input:not([type]) { flex: 1; font-weight: 700; }
.vt-klausel textarea { width: 100%; }
.vt-bibliothek { margin: .5rem 0 1rem; }
.vt-bibliothek summary { cursor: pointer; }
.vt-bibliothek .haken { display: block; }
.vt-hash { word-break: break-all; }
/* Einkaufsliste */
.ek { max-width: 46rem; }
.ek-filter { min-width: 0; max-width: 100%; }
.ek-filter select { max-width: 100%; width: 100%; }
.ek-neu { display: grid; gap: .6rem; margin-bottom: 1rem; }
.ek-label { font-weight: 700; }
.ek-neu textarea, .mt-einkauf-neu textarea { width: 100%; font: inherit; font-size: 1.05rem; }
.ek-neu-felder { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: .6rem; }
.ek-neu-felder label { display: grid; gap: .2rem; font-size: .85rem; color: #555; }
.ek-neu-felder select, .ek-neu-felder input { width: 100%; }
.ek-notieren { justify-self: start; }
.ek-zeile { display: flex; align-items: center; gap: .7rem; padding: .55rem .2rem; border-bottom: 1px solid #ececec; flex-wrap: wrap; }
.ek-menue { margin-left: auto; }
.ek-zeile .pa-haken button { width: 1.6rem; height: 1.6rem; }
.ek-inhalt { flex: 1 1 14rem; min-width: 0; }
.ek-artikel { display: block; overflow-wrap: anywhere; }
.ek-inhalt small { display: block; color: #777; font-size: .8rem; }
.ek-erledigt .ek-artikel { text-decoration: line-through; color: #888; }
.ek-menue summary { list-style: none; cursor: pointer; padding: .2rem .5rem; color: #777; }
.ek-spaet { color: #b3261e; }
.ek-text { margin: 1rem 0; }
.ek-text summary { cursor: pointer; color: #555; }
.ek-text textarea { width: 100%; font-family: inherit; margin-top: .5rem; }
.ek-aufraeumen { margin-top: .6rem; }
.mt-einkauf-neu { display: grid; gap: .5rem; margin-bottom: .4rem; }
.mt-einkauf-zeile { display: flex; gap: .5rem; }
.mt-einkauf-zeile select { flex: 1; min-width: 0; }
@media (max-width: 40rem) { .ek-neu-felder { grid-template-columns: 1fr 1fr; } .ek-neu-felder label:first-child { grid-column: 1 / -1; } }
/* Notizblock */
.nz-text { white-space: pre-line; }
.nz-fotos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0; }
.nz-fotos img { height: 4.5rem; width: 4.5rem; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.nz-pdf { font-size: .85rem; }
.nz-menue textarea { width: 100%; font: inherit; }
.nz-menue form + form { margin-top: .4rem; }
.nz-erledigt { margin-top: 1.2rem; }
.nz-erledigt summary { cursor: pointer; color: #555; }
.nz-felder { grid-template-columns: 2fr 1fr 1.6fr; }
.mt-foto-knopf { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; border: 1px solid #c9c9c9; border-radius: 6px; background: #fff; cursor: pointer; font-size: 1.1rem; }
.mt-nz-datum { flex: 1; min-width: 0; display: flex; align-items: center; gap: .3rem; font-size: .85rem; color: #555; }
.mt-nz-datum input { flex: 1; min-width: 0; font: inherit; }
/* Fahrtenbuch */
.fb-neu { display: grid; gap: .6rem; margin-bottom: 1rem; }
.fb-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; }
.fb-felder label { display: grid; gap: .2rem; font-size: .85rem; color: #555; }
.fb-felder input, .fb-felder select { width: 100%; font: inherit; }
.fb-felder .fb-weit { grid-column: 1 / -1; }
.fb-art { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.fb-privat-form .fb-weit, .fb-privat-form label:has([name=projekt_id]), .fb-privat-form label:has([name=kunde_id]) { display: none; }
.fb-leiste { margin-top: .8rem; }
.fb-tab td.r, .fb-tab th.r { text-align: right; white-space: nowrap; }
.fb-tab .fb-text { max-width: 28rem; }
.fb-storno td { color: #999; text-decoration: line-through; }
.fb-storno td .fb-rot, .fb-storno td details { text-decoration: none; }
.fb-rot { color: #b3261e; }
.fb-luecke { color: #b3261e; font-size: .8rem; white-space: nowrap; }
.fb-aend summary { cursor: pointer; font-size: .8rem; color: #777; }
.fb-menue { min-width: min(34rem, 90vw); }
.fb-menue-zelle { width: 2rem; }
.fb-storno-form { display: flex; gap: .4rem; margin-top: .5rem; }
.fb-storno-form input { flex: 1; }
.fb-druck-tab small { color: #555; }
.mt-fahrt .fb-felder { grid-template-columns: 1fr 1fr; }
@media (max-width: 48rem) {
  .fb-tab, .fb-tab tbody, .fb-tab tr, .fb-tab td { display: block; }
  .fb-tab thead, .fb-tab tfoot { display: none; }
  .fb-tab tr { display: grid; grid-template-columns: auto 1fr auto; gap: .15rem .6rem; padding: .6rem .2rem; border-bottom: 1px solid #e5e5e5; align-items: baseline; }
  .fb-tab td { padding: 0; border: 0; }
  .fb-c-datum { grid-row: 1; grid-column: 1; font-weight: 700; }
  .fb-c-art { grid-row: 1; grid-column: 2; color: #555; font-size: .9rem; }
  .fb-c-km { grid-row: 1; grid-column: 3; font-size: 1.05rem; }
  .fb-c-km::after { content: ' km'; font-weight: 400; font-size: .85rem; color: #555; }
  .fb-c-start, .fb-c-ende { grid-row: 2; font-size: .85rem; color: #555; text-align: left; }
  .fb-c-start { grid-column: 1 / 3; } .fb-c-start::before { content: 'Tacho '; } .fb-c-ende { grid-column: 3; text-align: right; } .fb-c-ende::before { content: '→ '; }
  .fb-tab .fb-text { grid-row: 3; grid-column: 1 / -1; max-width: none; }
  .fb-c-fahrer { grid-row: 4; grid-column: 1 / 3; font-size: .8rem; color: #777; }
  .fb-menue-zelle { grid-row: 4; grid-column: 3; width: auto; text-align: right; }
  .fb-menue-zelle .pu-menue { position: static; }
  .fb-menue-zelle .pu-menue-inhalt { position: fixed; left: .5rem; right: .5rem; top: 4rem; width: auto; max-height: calc(100vh - 9rem); overflow: auto; }
  .fb-menue { min-width: 0; }
  .fb-leiste .knopfreihe { width: 100%; }
}
/* Projekt anlegen: aus AV-Suite-Datei */
.pj-av { margin: 0 0 1rem; padding: .6rem .8rem; border: 1px dashed #c9c9c9; border-radius: 4px; }
.pj-av summary { cursor: pointer; color: #1f4e9e; }
.pj-av-inhalt { display: grid; gap: .4rem; margin-top: .5rem; }
.pj-av-stand { margin: 0; font-size: .9rem; color: #1d6b37; }
.pj-av-stand.warn { color: #b3261e; }
/* Projekt anlegen: neuer Kunde */
.pj-neukunde { margin: .3rem 0 1rem; padding: .6rem .8rem; border: 1px dashed #c9c9c9; border-radius: 4px; }
.pj-neukunde summary { cursor: pointer; color: #1f4e9e; }
.pj-neukunde-felder { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin: .7rem 0 .4rem; }
.pj-neukunde-felder label { display: grid; gap: .2rem; font-size: .85rem; }
@media (max-width: 40rem) { .pj-neukunde-felder { grid-template-columns: 1fr; } }
/* Aufgaben: Anhänge */
.bkarte-anhaenge { margin: .6rem 0; }
.bkarte-dateien { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: .4rem; margin-bottom: .5rem; }
.bkarte-datei { position: relative; }
.bkarte-datei img { width: 100%; height: 4.5rem; object-fit: cover; border-radius: 3px; display: block; border: 1px solid #ddd; }
.bkarte-pdf { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 4.5rem; border: 1px solid #ddd; border-radius: 3px; background: #fbeaea; color: #a52a2a; font-weight: 700; text-decoration: none; font-size: .85rem; text-align: center; padding: .2rem; }
.bkarte-pdf small { display: block; font-weight: 400; font-size: .65rem; color: #555; overflow-wrap: anywhere; }
.bkarte-datei form { position: absolute; top: 2px; right: 2px; margin: 0; }
.bkarte-datei-weg { width: 1.3rem; height: 1.3rem; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; line-height: 1; padding: 0; }
.bkarte-hochladen label { cursor: pointer; display: inline-block; font-size: .85rem; }
.pe-einwilligung { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin: .8rem 0; border-left: 4px solid #c9a227; }
.board-vorgaenge { margin: .6rem 0 1rem; }
/* Aufgaben im Projekt direkt bearbeiten */
.pa-titel { cursor: pointer; }
.pa-bearbeiten > summary { list-style: none; cursor: pointer; color: #777; padding: 0 .3rem; }
.pa-bearbeiten > summary::-webkit-details-marker { display: none; }
.pa-bearbeiten[open] { flex-basis: 100%; }
.pa-bearbeiten[open] > summary { text-align: right; }
.pa-panel { background: #fafafa; border: 1px solid #e4e4e4; border-radius: 4px; padding: .8rem; margin: .3rem 0 .4rem; }
.pa-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem .8rem; }
.pa-form label { display: grid; gap: .2rem; font-size: .85rem; }
.pa-form input, .pa-form select, .pa-form textarea { width: 100%; }
.pa-breit { grid-column: 1 / -1; }
.pa-weg { margin-top: .4rem; }
@media (max-width: 40rem) { .pa-form { grid-template-columns: 1fr 1fr; } }
/* Schnellzugriff Einkaufsliste – nur am Handy */
.schnell-einkauf { display: none; }
@media (max-width: 48rem) {
    .schnell-einkauf { display: block; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 50;
        background: #1f4e9e; color: #fff; text-decoration: none; font: 700 1rem "Poppins", "Segoe UI", system-ui, sans-serif;
        padding: .8rem 1.1rem; border-radius: 2rem; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
    .schnell-einkauf:active { transform: scale(.97); }
    main.inhalt { padding-bottom: 5rem; }
}
/* Einsatzart Homeoffice: verfügbar, aber nicht für Baustellen */
.ep-homeoffice { background: #ece6fb; border-left-color: #6b4fbb; color: #3e2a7a; }
.ep-monat .ep-homeoffice { background: #6b4fbb; }
.ck-punkt.ep-homeoffice { background: #6b4fbb; }
.mt-einsatz.ep-homeoffice { border-left-color: #6b4fbb; }
/* Werkzeug- und Fahrzeugdisposition */
.bm-neu { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.bm-neu select { flex: 1 1 260px; min-width: 0; }
.bm-neu input[name=bezeichnung] { flex: 1 1 220px; }
.bm-neu .bm-menge { width: 5rem; }
.bm-neu input[type=date] { width: auto; }
.bm-zelle { text-align: center; font-size: .8rem; }
.bm-belegt, .bm-leg.bm-belegt { background: #dbe8fd; }
.bm-rot, .bm-leg.bm-rot { background: #f9d6d3; color: #8a1c14; font-weight: 700; }
.bm-leg { display: inline-block; padding: .1rem .5rem; border-radius: 2px; margin-right: .4rem; font-size: .8rem; }
.bm-kopf { margin-top: 1.4rem; }
.mt-werkzeug { font-size: .9rem; margin: .4rem 0; }

/* =====================================================================
   Gestaltung B „Seitenleiste“ (Oktober 2026): Navigation links, heller
   Grund, weiße Karten, am Handy untere Leiste mit Plus-Knopf.
   ===================================================================== */
:root { --grund: #eef0f3; --karte-rand: #e3e5e8; --radius: 12px; --seite-breite: 15rem; }
body.app { background: var(--grund); }
.huelle { display: flex; min-height: 100vh; }
.seite { flex: 0 0 var(--seite-breite); width: var(--seite-breite); background: var(--schwarz); color: var(--weiss); display: flex; flex-direction: column;
  padding: 1.1rem .75rem 1rem; box-sizing: border-box; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; }
.seite-kopf { display: flex; justify-content: space-between; align-items: center; padding: .2rem .75rem 1rem; }
.seite-kopf .kopf-marke { display: flex; flex-direction: column; gap: .1rem; color: var(--weiss); text-decoration: none; }
.seite-kopf .wortmarke { font-size: 1rem; }
.seite-kopf .kopf-titel { color: #9a9a9a; font-size: .8rem; }
.seite-zu { display: none; color: #bdbdbd; text-decoration: none; font-size: 1.1rem; padding: .3rem .5rem; }
.seite-gruppe { display: block; font: 500 .68rem var(--schrift-titel); letter-spacing: .1em; text-transform: uppercase; color: #7d7d7d; padding: .9rem .75rem .35rem; }
.seite-nav a, .seite-fuss > a, .seite-menue summary { display: flex; align-items: center; gap: .7rem; color: #cfcfcf; text-decoration: none; font-size: .92rem;
  padding: .55rem .75rem; border-radius: 8px; line-height: 1.25; }
.seite-nav a:hover, .seite-fuss > a:hover, .seite-menue summary:hover { background: #242424; color: var(--weiss); }
.seite-nav a.aktiv, .seite-fuss > a.aktiv { background: var(--blau); color: var(--weiss); }
.seite-nav a .zahl-punkt { margin-left: auto; }
.sym { width: 18px; height: 18px; flex: none; }
.seite-fuss { margin-top: auto; padding-top: .75rem; border-top: 1px solid #2c2c2c; }
.seite-menue summary { cursor: pointer; list-style: none; }
.seite-menue summary::-webkit-details-marker { display: none; }
.seite-menue-liste { display: flex; flex-direction: column; padding: .2rem 0 .4rem 2.3rem; }
.seite-menue-liste a { color: #bdbdbd; text-decoration: none; font-size: .86rem; padding: .35rem .5rem; border-radius: 6px; }
.seite-menue-liste a:hover, .seite-menue-liste a.aktiv { color: var(--weiss); background: #242424; }
.seite-menue-liste .menue-knopf { font: inherit; font-size: .86rem; color: #bdbdbd; background: none; border: 0; text-align: left; padding: .35rem .5rem; cursor: pointer; }
.seite-menue-liste .menue-knopf:hover { color: var(--weiss); }
.seite-nutzer { display: flex; align-items: center; gap: .6rem; padding: .75rem .5rem 0; font-size: .85rem; }
.seite-avatar { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--blau); color: var(--weiss); font: 700 .78rem var(--schrift-titel); flex: none; }
.seite-nutzer-text { display: flex; flex-direction: column; min-width: 0; }
.seite-nutzer-text .kopf-konto { color: var(--weiss); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seite-nutzer form { margin: 0; }
.seite-nutzer .knopf-leise { border: 0; padding: 0; color: #9a9a9a; font-size: .8rem; }
.seite-nutzer .knopf-leise:hover { color: var(--weiss); text-decoration: underline; }
.kopf-mobil, .leiste-mobil { display: none; }
body.app .inhalt { flex: 1 1 auto; min-width: 0; max-width: none; padding: 1.75rem 2rem 3rem; }
body.app .inhalt > * { max-width: 76rem; }
body.app .inhalt > .ek, body.app .inhalt > .mt { margin-left: 0; }
body.app h1 { font-size: 1.55rem; }
body.app .kopfzeile-seite { margin-bottom: .5rem; }

/* Karten, Tabellen, Knöpfe im neuen Bild */
body.app .karte-flach, body.app .ck-karte, body.app .mt-uhr, body.app .mt-einsatz, body.app .ep-neu, body.app .bkarte, body.app .kasten, body.app .pa-panel,
body.app .ek-neu, body.app .vt-klausel, body.app .board-spalte, body.app .kachel, body.app .pj-neukunde {
  background: var(--weiss); border: 1px solid var(--karte-rand); border-radius: var(--radius); box-shadow: 0 1px 3px rgba(17,17,17,.05); }
body.app .kasten { border-left-width: 4px; }
body.app .kasten-wichtig { border-left-color: var(--blau); }
body.app .kachel { border-top: 1px solid var(--karte-rand); }
body.app .kachel:hover { border-color: var(--blau); }
body.app .ck-karte { padding: 1rem 1.1rem .8rem; }
body.app .mt-uhr { border-left-width: 5px; }
body.app .tabelle { background: var(--weiss); border: 1px solid var(--karte-rand); border-radius: var(--radius); overflow: hidden; border-collapse: separate; border-spacing: 0; }
body.app .tabelle th { background: #f4f5f7; color: var(--kohle); border-bottom: 1px solid var(--karte-rand); }
body.app .tabelle td { border-bottom: 1px solid #eef0f2; }
body.app .tabelle tr:last-child td { border-bottom: 0; }
body.app .ep-rahmen { background: var(--weiss); border-radius: var(--radius); }
body.app .knopf, body.app .knopf-zweit, body.app .mt-knopf, body.app .formular input, body.app .formular select, body.app .formular textarea,
body.app select, body.app input:not([type=checkbox]):not([type=radio]), body.app textarea, body.app .chip-filter { border-radius: 8px; }
body.app .knopf { background: var(--blau); }
body.app .knopf:hover { background: #0047a8; }
body.app .formular input, body.app .formular select, body.app .formular textarea { background: var(--weiss); }
body.app .meldung { border-radius: 8px; border-left-width: 4px; }
body.app .schnell-einkauf { display: none; }
body.app .ck-datum { margin-top: -.2rem; margin-bottom: 1rem; }

@media (max-width: 64rem) {
  :root { --seite-breite: 13.5rem; }
  body.app .inhalt { padding: 1.5rem 1.25rem 3rem; }
}

/* Handy: Seitenleiste als Vollbild-Menü (über #menue), untere Leiste */
@media (max-width: 48rem) {
  .huelle { display: block; }
  .kopf-mobil { display: flex; justify-content: space-between; align-items: center; background: var(--schwarz); color: var(--weiss); padding: .7rem 1rem; border-bottom: 3px solid var(--blau); position: sticky; top: 0; z-index: 30; }
  .kopf-mobil .kopf-marke { color: var(--weiss); text-decoration: none; }
  .kopf-mobil .wortmarke { font-size: 1rem; }
  .kopf-mobil .kopf-konto { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--blau); color: var(--weiss); font: 700 .75rem var(--schrift-titel); text-decoration: none; }
  .seite { display: none; }
  .seite:target { display: flex; position: fixed; inset: 0; width: auto; height: auto; z-index: 60; }
  .seite-zu { display: inline-block; }
  body.app .inhalt { padding: 1.1rem 1rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .leiste-mobil { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--schwarz); padding: .3rem 0 calc(.6rem + env(safe-area-inset-bottom)); }
  .leiste-mobil a { display: flex; flex-direction: column; align-items: center; gap: .15rem; color: #a8a8a8; text-decoration: none; font: 500 .66rem var(--schrift-titel); padding: .35rem 0; min-height: 44px; }
  .leiste-mobil a .sym { width: 22px; height: 22px; }
  .leiste-mobil a.aktiv { color: var(--weiss); }
  .leiste-mobil .zahl-punkt { display: none; }
  .leiste-plus-kreis { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--blau); color: var(--weiss); margin-top: -1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
  .leiste-plus-kreis .sym { width: 26px; height: 26px; stroke-width: 2.5; }
  .leiste-mobil a.leiste-plus { color: #e6e6e6; }
}
@media print { .seite, .kopf-mobil, .leiste-mobil { display: none !important; } body.app { background: #fff; } body.app .inhalt { padding: 0; } }
.bm-inline { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.bm-zahl { width: 4.5rem; padding: .3rem .4rem; }
.bm-datum input { width: 9rem; padding: .3rem .4rem; font-size: .85rem; }
/* Direkt änderbare Felder in Listen und Köpfen */
.direkt { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.direkt select, .pk-select, .vg-schnell select { font: inherit; font-size: .9rem; padding: .25rem .4rem; border: 1px solid #c9c9c9; background: var(--weiss); border-radius: 6px; }
.ampel-select.ampel-vorhanden { border-color: var(--gruen); } .ampel-select.ampel-teilweise { border-color: #d9a400; } .ampel-select.ampel-fehlt { border-color: var(--rot); }
.vg-zeile { display: flex; align-items: flex-start; gap: .6rem; }
.vg-zeile > details { flex: 1; min-width: 0; }
.vg-schnell { display: flex; flex-direction: column; gap: .3rem; padding-top: .55rem; margin: 0; flex: none; }
.ek-direkt { display: inline-flex; gap: .3rem; margin: 0; }
.ek-menge { width: 5rem; padding: .3rem .4rem; font-size: .9rem; }
.ek-datum { width: 8.6rem; padding: .3rem .4rem; font-size: .85rem; }
.personal-karte .kopf a { color: inherit; text-decoration: none; }
.personal-karte .kopf a:hover { text-decoration: underline; }
.pk-verf { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
@media (max-width: 40rem) { .vg-zeile { flex-direction: column; } .vg-schnell { flex-direction: row; padding-top: 0; } .ek-direkt { flex: 1 1 100%; order: 3; margin-left: 2.3rem; } .ek-direkt .ek-menge { width: 6rem; } }
/* Monatskalender auf der Startseite */
.kal { background: var(--weiss); border: 1px solid var(--karte-rand); border-radius: var(--radius); padding: 1rem 1.1rem .8rem; margin: 1rem 0 1.25rem; }
.kal-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.kal-kopf h2 { font-size: 1.05rem; margin: 0; }
.kal-kopf h2 small { font-weight: 400; font-size: .9rem; margin-left: .4rem; }
.kal-abo { margin-left: .5rem; }
.kal-raster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.kal-wt { font: 500 .7rem var(--schrift-titel); letter-spacing: .06em; text-transform: uppercase; color: var(--kohle); padding: .2rem .35rem; }
.kal-tag { min-height: 5.2rem; border: 1px solid #eef0f2; border-radius: 6px; padding: .25rem .3rem; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kal-we { background: #f8f9fa; }
.kal-aus { opacity: .45; }
.kal-heute { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); }
.kal-heute .kal-nr { background: var(--blau); color: #fff; }
.kal-nr { font: 700 .75rem var(--schrift-titel); width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 50%; }
.kal-e { display: block; font-size: .72rem; line-height: 1.25; padding: .1rem .3rem; border-radius: 3px; border-left: 3px solid #999; background: #ececec; color: #111; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-e:hover { filter: brightness(.95); text-decoration: none; }
.kal-e.kal-weiter { border-left-color: transparent; border-radius: 0 3px 3px 0; opacity: .8; }
.kal-e.ep-projekt { background: #dbe8fd; border-left-color: var(--blau); }
.kal-e.ep-pruefung { background: #fdeccc; border-left-color: #e08a00; }
.kal-e.ep-sifa { background: #dff3e4; border-left-color: #2e8b47; }
.kal-e.ep-intern { background: #ececec; border-left-color: #777; }
.kal-e.ep-homeoffice { background: #ece6fb; border-left-color: #6b4fbb; }
.kal-e.ep-abwesend { background: repeating-linear-gradient(135deg, #f4f4f4 0 6px, #e6e6e6 6px 12px); border-left-color: #999; }
.kal-e.kal-vorgang { background: #e8f0fd; border-left-color: #0b3f8f; }
.kal-e.kal-meilenstein { background: #fff1bf; border-left-color: #d9a400; }
.kal-e.kal-aufgabe { background: #fff; border: 1px dashed #9a9a9a; border-left: 3px solid #555; }
.kal-e.kal-pruef { background: #fdeccc; border-left-color: #e08a00; color: #7a5600; }
.kal-mehr { font-size: .68rem; color: var(--kohle); padding-left: .3rem; }
.kal-leg { display: inline-block; padding: .1rem .5rem; border-radius: 3px; border-left: 3px solid #999; font-size: .78rem; margin-right: .3rem; background: #ececec; }
.kal-leg.ep-projekt { background: #dbe8fd; border-left-color: var(--blau); } .kal-leg.ep-homeoffice { background: #ece6fb; border-left-color: #6b4fbb; }
.kal-leg.kal-vorgang { background: #e8f0fd; border-left-color: #0b3f8f; } .kal-leg.kal-meilenstein { background: #fff1bf; border-left-color: #d9a400; }
.kal-leg.kal-aufgabe { background: #fff; border: 1px dashed #9a9a9a; border-left: 3px solid #555; } .kal-leg.kal-pruef { background: #fdeccc; border-left-color: #e08a00; }
@media (max-width: 48rem) {
  .kal-raster { gap: 1px; }
  .kal-tag { min-height: 3.4rem; padding: .15rem; }
  .kal-e { font-size: 0; height: 6px; padding: 0; border-left-width: 0; border-radius: 3px; }
  .kal-e b { display: none; }
  .kal-mehr { display: none; }
  .kal-tag.kal-heute .kal-nr { font-size: .7rem; }
}
.kal-tag { position: relative; }
.kal-plus { position: absolute; top: .2rem; right: .25rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; color: var(--kohle); text-decoration: none; font-weight: 700; opacity: 0; }
.kal-tag:hover .kal-plus, .kal-plus:focus-visible { opacity: 1; background: #e8f0fd; color: var(--blau); }
.kal-kopf .knopf { margin-top: 0; padding: .4rem .8rem; font-size: .9rem; }
@media (max-width: 48rem) { .kal-plus { display: none; } }

/* ---------- Handbuch (Hilfe) ---------- */
.hb{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start}
.hb-nav{position:sticky;top:16px;background:var(--karte,#fff);border:1px solid var(--karte-rand,#e3e5e8);border-radius:var(--radius,12px);padding:14px 16px;font-size:14px}
.hb-nav-titel{display:block;font-weight:700;margin-bottom:8px}
.hb-nav ol{margin:0;padding-left:20px;display:grid;gap:4px}
.hb-nav li.an>a{font-weight:700;color:var(--blau,#0058d0)}
.hb-nav ul{list-style:none;margin:4px 0 6px;padding-left:10px;border-left:2px solid var(--karte-rand,#e3e5e8);display:grid;gap:2px;font-size:13px}
.hb-nav a{text-decoration:none}
.hb-nav a:hover{text-decoration:underline}
.hb-text{max-width:860px;line-height:1.55}
.hb-text h2{margin-top:36px;padding-top:8px;border-top:1px solid var(--karte-rand,#e3e5e8)}
.hb-text h3{margin-top:24px}
.hb-text img{display:block;max-width:100%;height:auto;border:1px solid var(--karte-rand,#e3e5e8);border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin:12px 0 18px}
.hb-text img[alt*="Handy"]{max-width:300px}
.hb-text ol,.hb-text ul{padding-left:22px}
.hb-text li{margin:4px 0}
.hb-text kbd{font:inherit;font-size:.92em;padding:1px 6px;border:1px solid #c8ccd2;border-bottom-width:2px;border-radius:5px;background:#f7f8fa;white-space:nowrap}
.hb-text p.hb-hinweis{padding:10px 14px;border-left:4px solid var(--blau,#0058d0);background:#eef4fd;border-radius:0 8px 8px 0}
.hb-text p.hb-Achtung{border-color:#c0392b;background:#fbeeec}
.hb-text p.hb-Tipp{border-color:#1e8449;background:#eaf6ee}
.hb-blaettern{display:flex;justify-content:space-between;gap:16px;margin-top:40px;padding-top:14px;border-top:1px solid var(--karte-rand,#e3e5e8);font-weight:700}
.hb-kacheln .kachel strong{display:block;margin-bottom:4px}
@media (max-width:900px){.hb{grid-template-columns:1fr}.hb-nav{position:static;order:2}}
/* Druckfassung */
.hb-druck{width:178mm;min-height:0;display:block}
.hb-druck .hb-text{max-width:none;font-size:10pt}
.hb-druck-inhalt{columns:2;page-break-after:always}
.hb-druck-kapitel{page-break-before:always}
.hb-druck img{max-width:100%;box-shadow:none}

/* ---------- Zeitkonto ---------- */
.zk-kopf-knoepfe{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.zk-kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:14px 0}
.zk-kz{display:grid;gap:2px;padding:14px 16px}
.zk-kz-wert{font:700 1.6rem var(--schrift-titel)}
.zk-kz-text{font-weight:700;font-size:.9rem}
.zk-formulare{display:grid;gap:10px;margin:14px 0}
.zk-form summary{cursor:pointer;padding:12px 16px}
.zk-form[open] summary{border-bottom:1px solid var(--karte-rand,#e3e5e8)}
.zk-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:14px 16px;align-items:end}
.zk-felder label{display:grid;gap:3px;font-size:.85rem;color:#555}
.zk-felder input,.zk-felder select{width:100%}
.zk-breit{grid-column:span 2}
.zk-monat-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.zk-blaettern{display:flex;gap:6px}
.zk-tabelle td.r,.zk-tabelle th.r{text-align:right;white-space:nowrap}
.zk-tabelle .zk-tag{white-space:nowrap}
.zk-tabelle tr.zk-we td{background:#f6f7f9;color:#777}
.zk-tabelle tr.zk-heute td{background:#eef4fd}
.zk-tabelle tr.zk-zukunft td{color:#9aa0a6}
.zk-tabelle tr.zk-woche td{background:#f1f2f4;border-bottom:2px solid #cfd3d8}
.zk-zeit{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--hellgrau);border-radius:6px;padding:.1rem .45rem;margin:.1rem .3rem .1rem 0;font-size:.85rem;background:#fff}
.zk-zeit.zk-nach{border-style:dashed;background:#fffbea}
.zk-zeit form button{padding:0 .2rem;line-height:1}
.zk-aktion{white-space:nowrap}
.chip-blau{background:#dbe8fd;color:#0b3d91}
.chip-grau{background:#e9ebee;color:#444}
td.rot,.rot{color:var(--rot)}td.gruen,.gruen{color:#1d6b37}
.zk-abw{list-style:none;padding:0;display:grid;gap:6px}
.zk-abw li{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.zk-frei{padding:12px 16px;margin-bottom:10px;display:grid;gap:8px}
.zk-frei-kopf{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.zk-frei-form{display:flex;gap:6px;flex-wrap:wrap}
.zk-frei-form input{flex:1;min-width:200px}
.hinweis-kasten{padding:10px 14px;border-left:4px solid #e8a600;background:#fff4cc;border-radius:0 8px 8px 0}
/* Druck */
.zk-druck{font-size:9pt}
.zk-druck-tab{width:100%;border-collapse:collapse;margin:8px 0}
.zk-druck-tab th,.zk-druck-tab td{border-bottom:1px solid #ccc;padding:3px 5px;text-align:left;vertical-align:top}
.zk-druck-tab .r{text-align:right;white-space:nowrap}
.zk-druck-tab tr.we td{background:#f3f3f3;color:#777}
.zk-unterschrift{display:flex;justify-content:space-between;margin-top:40px}
.zk-unterschrift span{border-top:1px solid #111;padding-top:4px;width:45%;font-size:8pt}
.nz-zeit{border:1px solid var(--karte-rand,#e3e5e8);border-radius:10px;padding:10px 14px;margin:10px 0}
.nz-zeit legend{font-weight:700;padding:0 6px}
.nz-zeit-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.nz-zeit-felder label{display:grid;gap:3px;font-size:.85rem;color:#555}
.nz-tage{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;font-size:.9rem}
.haken-klein{display:inline-flex;gap:3px;align-items:center}
.zk-weg{font-size:.8rem;color:#777}

/* ---------- Marke, Feedback, Konto ---------- */
.mk-regeln{padding:16px 20px;margin:14px 0}
.mk-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.mk-raster h3{margin:0 0 4px;font-size:.95rem}
.mk-raster p{margin:4px 0}
.mk-farben{display:flex;flex-wrap:wrap;gap:6px}
.mk-farben span{display:inline-block;padding:6px 10px;border-radius:6px;font-size:.8rem;font-weight:700}
.mk-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.mk-element{display:grid;gap:8px;padding:12px;border:1px solid var(--karte-rand,#e3e5e8);border-radius:var(--radius,12px);background:#fff;text-decoration:none;color:inherit}
.mk-element:hover{border-color:var(--blau)}
.mk-element img{width:100%;aspect-ratio:16/9;object-fit:contain;background:#f4f5f7;border-radius:8px;padding:8px}
.mk-element span{display:grid;gap:2px;font-size:.9rem}
.mk-element small{font-size:.8rem}
.mk-weg{align-self:center}
.ko-geraet{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.hinweis-kasten.hinweis-rot{border-color:var(--rot);background:var(--rot-flaeche)}
.mk-element img.dunkel{background:#111}
.pk-login{margin-top:1rem;text-align:center}
.pk-oder{color:#777;font-size:.85rem;margin:.4rem 0}
.pk-knopf{width:100%}
.pk-name{max-width:220px}
.ek-neu-fuss{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.ek-zur-liste{font-weight:700}
.avv-wahl{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.avv-wahl input[type=text],.avv-wahl input:not([type]){max-width:12rem}

/* ---------- Schnellbericht (Handy) ---------- */
.sb{max-width:640px}
.sb-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sb-kopf h1 small{font-size:.9rem;color:#5a5a5a;font-weight:400;margin-left:.4rem}
.sb-fortschritt{font-weight:700;color:#5a5a5a;white-space:nowrap}
.sb-balken{height:6px;background:#e3e5e8;border-radius:3px;margin:8px 0 16px;overflow:hidden}
.sb-balken span{display:block;height:100%;background:var(--blau);transition:width .25s}
.sb-schritt h2{font-size:1.35rem;margin:.2rem 0 .8rem}
.sb-wahl{display:grid;gap:8px}
.sb-karte{display:flex;gap:.7rem;align-items:center;padding:12px 14px;border:2px solid var(--karte-rand,#e3e5e8);border-radius:12px;background:#fff;cursor:pointer}
.sb-karte input{width:1.3rem;height:1.3rem;flex:none}
.sb-karte span{display:grid;line-height:1.3}.sb-karte small{color:#5a5a5a}
.sb-karte:has(input:checked){border-color:var(--blau);background:#eef4fd}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;margin:.3rem 0 1rem}
.sb-chip input{position:absolute;opacity:0;width:0;height:0}
.sb-chip span{display:inline-block;padding:.6rem 1rem;border:2px solid var(--karte-rand,#e3e5e8);border-radius:999px;background:#fff;font-size:1rem;cursor:pointer}
.sb-chip:has(input:checked) span{border-color:var(--blau);background:var(--blau);color:#fff}
.sb-zeile label{display:grid;gap:4px;font-weight:700}
.sb-zweier{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:.6rem 0}
.sb-zweier input{width:100%}
.sb-suche{width:100%;font-size:1.05rem;padding:.6rem .8rem;margin-bottom:10px;border-radius:10px}
.sb-projekte{margin-top:12px}.sb-projekte select{width:100%;font-size:1.05rem}
.sb-ampel .sb-ampel-ok:has(input:checked) span{background:var(--gruen);border-color:var(--gruen)}
.sb-ampel .sb-ampel-hinweis:has(input:checked) span{background:#FFC300;border-color:#FFC300;color:#111}
.sb-ampel .sb-ampel-mangel:has(input:checked) span{background:var(--rot);border-color:var(--rot)}
.sb-einheit{display:flex;align-items:center;gap:.4rem;font-weight:400}
.sb-einheit input{width:6rem;font-size:1.2rem}
.sb-label{font-weight:700;margin:.8rem 0 .3rem;display:block}
.sb-leute{display:grid;gap:8px}
.sb-person{border:1px solid var(--karte-rand,#e3e5e8);border-radius:12px;padding:10px 12px;background:#fff}
.sb-person.an{border-color:var(--blau)}
.sb-person-kopf{display:flex;gap:.6rem;align-items:center;font-size:1.05rem;cursor:pointer}
.sb-person-kopf input{width:1.3rem;height:1.3rem}
.sb-person-felder{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.sb-person.an .sb-person-felder{display:grid}
.sb-person-felder label{display:grid;gap:2px;font-size:.85rem;color:#5a5a5a}
.sb-person-felder .sb-weit{grid-column:span 2}
.sb-person-felder input{width:100%}
.sb-text{position:relative}
.sb-text textarea{width:100%;font:inherit;font-size:1.05rem;padding:.7rem 3rem .7rem .7rem;border-radius:10px}
.sb-mikro{position:absolute;right:8px;top:8px;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid #c9c9c9;background:#fff;font-size:1.2rem;cursor:pointer}
.sb-mikro.an{background:var(--rot);color:#fff;border-color:var(--rot);animation:sb-puls 1s infinite}
@keyframes sb-puls{50%{box-shadow:0 0 0 8px rgba(192,57,43,.25)}}
.sb-foto{display:grid;place-items:center;gap:6px;padding:28px 16px;border:2px dashed var(--blau);border-radius:14px;background:#eef4fd;cursor:pointer;font-weight:700;font-size:1.05rem;text-align:center}
.sb-foto input{position:absolute;opacity:0;width:0;height:0}
.sb-foto small{font-weight:400;color:#5a5a5a}
.sb-zusammen{display:grid;gap:4px;margin:16px 0;padding:12px 14px;background:#f7f7f7;border-radius:10px;font-size:.95rem}
.sb-speichern{width:100%;font-size:1.1rem;padding:.9rem}
.sb-speichern.laeuft{opacity:.6;pointer-events:none}
.sb-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;position:sticky;bottom:calc(var(--leiste-hoehe,64px) + 8px)}
.sb-nav .knopf,.sb-nav .knopf-zweit{flex:1;padding:.85rem;font-size:1.05rem}
.sb-nav .knopf-zweit[hidden],.sb-nav .knopf[hidden]{display:none}
@media (min-width:901px){.sb-nav{position:static}}

/* Paket-Import (Produkte) */
.pk-liste{list-style:none;padding:0;margin:0;font-size:.92rem}
.pk-liste li{padding:.15rem 0;border-bottom:1px solid var(--hellgrau)}
.pk-liste li.rot{color:var(--rot)}
.pk-code{font-size:.78rem;line-height:1.4;background:var(--papier,#F7F7F7);padding:.8rem;overflow:auto;border-radius:6px}
.pk-stand{margin-top:.2rem}
.pk-balken{height:10px;background:var(--hellgrau);border-radius:5px;overflow:hidden}
.pk-balken>div{height:100%;width:0;background:var(--blau);transition:width .3s}
.pk-stand p{margin:.4rem 0 0;font-size:.92rem}
.pk-stand.fehler p{color:var(--rot)}

/* Einsatzbericht */
.eb-ampel{display:grid;gap:6px}
.eb-massnahmen input,.eb-massnahmen select{width:100%;font:inherit}
.eb-massnahmen td:first-child{width:2rem;color:#5a5a5a}
.eb-massnahmen td:nth-child(3){width:11rem}.eb-massnahmen td:nth-child(4){width:10rem}
.eb-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:.5rem 0 1rem}
.eb-foto{margin:0;display:grid;gap:6px}
.eb-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--hellgrau);border-radius:8px}
.eb-foto input{width:100%;font-size:.9rem}
.eb-pdf{display:block;padding:1.5rem .6rem;border:1px solid var(--hellgrau);border-radius:8px;text-align:center;background:#fff}

.sb-schritt > input:not([type=radio]):not([type=checkbox]):not([type=file]),.sb-zweier input{width:100%;font-size:1.05rem;padding:.6rem .7rem;border-radius:10px;box-sizing:border-box}
.eb-ampel .haken{display:flex;gap:.6rem;align-items:flex-start;text-align:left}
@media (max-width:700px){
  .eb-massnahmen thead{display:none}
  .eb-massnahmen tr{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--hellgrau)}
  .eb-massnahmen td{display:block;width:auto!important;padding:0;border:0}
  .eb-massnahmen td:first-child{display:none}
  .eb-massnahmen td:nth-child(2){grid-column:1/-1}
}

/* Prüfregister am Handy: Karten statt breiter Tabelle */
@media (max-width:48rem){
  .pruef-tabelle thead{display:none}
  .pruef-tabelle,.pruef-tabelle tbody{display:block}
  .pruef-tabelle tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:3px 10px;padding:10px 12px;border-bottom:1px solid var(--hellgrau);align-items:center}
  .pruef-tabelle tr:not(:has(.pt-wahl)){grid-template-columns:minmax(0,1fr) auto}
  .pruef-tabelle td{display:block;padding:0;border:0;min-width:0}
  .pruef-tabelle td[colspan]{grid-column:1/-1}
  .pt-wahl{grid-row:1;grid-column:1}
  .pt-id{grid-row:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.02rem}
  .pt-status{grid-row:1;grid-column:-2;justify-self:end;white-space:nowrap;font-size:.85rem}
  .pt-bez{grid-column:1/-1}
  .pt-bez:empty{display:none}
  .pt-produkt{grid-column:1/-1;font-size:.88rem;color:#5a5a5a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pt-produkt b{font-weight:500}
  .pt-gep,.pt-naechste{font-size:.85rem;color:#5a5a5a;grid-column:span 1}
  .pt-gep{grid-column:1/-2}
  .pt-gep::before,.pt-naechste::before{content:attr(data-l) ": ";}
}

/* Scannen-Knopf oben auf Mein Tag und im Prüfregister (Handy) */
.mt-scan{display:none;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border-radius:14px;background:var(--blau);color:#fff;text-decoration:none}
.mt-scan svg{width:34px;height:34px;flex:none;stroke:currentColor}
.mt-scan span{display:grid;line-height:1.25}
.mt-scan b{font:700 1.15rem var(--schrift-titel)}
.mt-scan small{opacity:.85;font-size:.85rem}
@media (max-width:48rem){.mt-scan{display:flex}}

/* Scanner: Vorschläge beim Zuordnen */
.sc-vorschlaege{display:grid;gap:6px;margin:-.3rem 0 .8rem}
.sc-vorschlag{display:grid;text-align:left;padding:.6rem .8rem;border:1px solid var(--hellgrau);border-radius:8px;background:#fff;font:inherit;cursor:pointer}
.sc-vorschlag:hover{border-color:var(--blau)}
.sc-vorschlag small{color:#5a5a5a}

/* In-App-Betrachter */
.an-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;position:sticky;top:0;background:var(--papier);padding:6px 0;z-index:2}
.an-titel{flex:1 1 10rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-zoom{display:inline-flex;gap:4px}.an-zoom .knopf-zweit{padding:.4rem .8rem}
.an-seiten{display:grid;gap:10px;overflow:auto}
.an-seiten canvas{display:block;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15);max-width:none}