/* Handy-App (Monteure): eigene Farbwelt mit Tag- und Nachtmodus. Alle Farben über --h-* Variablen. */
.handy {
  --h-kopf: #14395e; --h-kopf-text: #ffffff; --h-grund: #eef2f7; --h-flaeche: #ffffff; --h-linie: #d5dde8; --h-text: #172033; --h-text2: #5b6778;
  --h-akzent: #14395e; --h-akzent-hell: #dfe8f3; --h-akzent-text: #ffffff; --h-gut: #2a7f56; --h-gut-hell: #e2f3ea; --h-warn: #b97a00; --h-warn-hell: #fdf1d6;
  --h-rot: #c0392b; --h-rot-hell: #fbe9e7; --h-blau: #2f5f9e; --h-blau-hell: #e3ecf8; --h-radius: 16px; --h-schatten: 0 1px 3px rgba(20, 30, 50, .08);
  --t-start: #2f5f9e; --t-termine: #d98c1f; --t-projekte: #2a8f62; --t-offen: #d1433a; --t-menue: #6b7785;
  flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--h-grund); color: var(--h-text); font-size: 15px; line-height: 1.4; color-scheme: light;
}
.handy.nacht {
  --h-kopf: #16211d; --h-kopf-text: #f1f5f2; --h-grund: #16211d; --h-flaeche: #202d27; --h-linie: #2f3e36; --h-text: #f1f5f2; --h-text2: #a7b5ad;
  --h-akzent: #3fb58f; --h-akzent-hell: #1e3a30; --h-akzent-text: #16211d; --h-gut: #3fb58f; --h-gut-hell: #1e3a30; --h-warn: #e6a23c; --h-warn-hell: #3f3218;
  --h-rot: #ff7a6e; --h-rot-hell: #48282a; --h-blau: #7fb0e8; --h-blau-hell: #1f2f40; --h-radius: 20px; --h-schatten: none; color-scheme: dark;
}
.handy * { box-sizing: border-box; }
.handy a { color: inherit; text-decoration: none; }
.handy .h-kachel h3 a, .handy .h-feld a, .handy .h-ort a, .handy .h-hinweis a, .handy .h-wochenkopf a, .handy .h-notiz a, .handy p a { color: var(--h-akzent); text-decoration: underline; }
.handy button { font: inherit; }

/* Kopf, Inhalt, Fußleiste */
.h-kopf { background: var(--h-kopf); color: var(--h-kopf-text); padding: calc(8px + env(safe-area-inset-top, 0px)) 18px 16px; flex-shrink: 0; }
.h-kopf .gruss { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.h-kopf .datum { font-size: 13px; opacity: .88; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.h-kopf .zurueck { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; opacity: .9; background: none; border: 0; color: inherit; padding: 6px 0; margin: -6px 0 2px; cursor: pointer; }
.h-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: .02em; color: #fff; white-space: nowrap; }
.h-chip.vamo { background: #1e7a4a; } .h-chip.k5 { background: #5b2d8e; } .h-chip.alle { background: #6b7785; } .h-chip.p1 { background: #c0392b; }
.h-chip.phase1 { background: #2a8f62; } .h-chip.phase2 { background: #2f5f9e; } .h-chip.phase3 { background: #6b7785; }
.h-inhalt { flex: 1; min-height: 0; overflow: auto; padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.h-inhalt > * { flex-shrink: 0; }
.h-fuss { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--h-linie); background: var(--h-flaeche); padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.h-fuss a { position: relative; text-align: center; font-size: 11px; font-weight: 500; color: var(--h-text2); text-decoration: none; border-radius: 12px; padding: 2px 0; -webkit-tap-highlight-color: transparent; }
.h-fuss a b { display: flex; align-items: center; justify-content: center; width: 44px; height: 30px; margin: 0 auto 3px; border-radius: 12px; color: var(--f); }
.h-fuss a svg { width: 22px; height: 22px; }
.h-fuss a.aktiv { color: var(--f); font-weight: 700; } .h-fuss a.aktiv b { background: var(--f); color: #fff; }
.h-fuss a .zahl { position: absolute; top: -2px; left: 50%; margin-left: 10px; background: var(--t-offen); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; min-width: 16px; }

/* Kacheln, Zeilen, Marken, Knöpfe */
.h-kachel { background: var(--h-flaeche); border: 1px solid var(--h-linie); border-radius: var(--h-radius); padding: 14px; box-shadow: var(--h-schatten); }
.h-kachel.laufend { border-left: 5px solid var(--h-gut); }
.h-kachel h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--h-text2); text-transform: uppercase; letter-spacing: .06em; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.h-kachel h3 a { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.h-titel { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.h-ort { font-size: 13px; color: var(--h-text2); overflow-wrap: anywhere; }
.h-zahl { font-size: 34px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 10px; }
.h-zahl small { font-size: 14px; font-weight: 600; color: var(--h-text2); margin-left: 6px; }
.h-balken { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--h-akzent-hell); margin: 10px 0 8px; }
.h-balken span { display: block; height: 100%; }
.h-balken.duenn { height: 6px; margin: 8px 0 4px; }
.h-zeile { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-top: 1px solid var(--h-linie); font-size: 14px; gap: 8px; color: inherit; text-decoration: none; }
.h-zeile.erste { border-top: 0; }
.h-zeile.klick { cursor: pointer; }
.h-zeile .pfeil { color: var(--h-text2); }
.h-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: middle; }
.h-einsatz { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--h-linie); color: inherit; text-decoration: none; }
.h-einsatz.erste { border-top: 0; }
.h-uhr { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-uhr small { display: block; font-size: 11px; font-weight: 500; color: var(--h-text2); }
.h-kunde { font-weight: 600; overflow-wrap: anywhere; }
.h-marke { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; }
.h-marke.rot { background: var(--h-rot-hell); color: var(--h-rot); } .h-marke.gelb { background: var(--h-warn-hell); color: var(--h-warn); }
.h-marke.gruen { background: var(--h-gut-hell); color: var(--h-gut); } .h-marke.blau { background: var(--h-blau-hell); color: var(--h-blau); } .h-marke.grau { background: var(--h-grund); color: var(--h-text2); }
.h-marke.umbruch { white-space: normal; }
.handy .h-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--h-akzent); color: var(--h-akzent-text); font-size: 13px; font-weight: 700; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--h-akzent); text-decoration: none; cursor: pointer; white-space: nowrap; }
.handy .h-knopf.leer { background: var(--h-flaeche); color: var(--h-text); border-color: var(--h-linie); }
.handy .h-knopf.gefahr { background: var(--h-flaeche); color: var(--h-rot); border-color: var(--h-rot); }
.h-knopf.gross { width: 100%; padding: 14px; font-size: 16px; border-radius: 12px; }
.h-knopf:disabled { opacity: .5; cursor: default; }
.h-aktionen { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 6px; margin-top: 10px; }
.h-aktionen.drei { grid-template-columns: repeat(3, 1fr); }
.h-aktionen .h-knopf { padding: 9px 4px; }
.h-hinweis { background: var(--h-akzent-hell); color: var(--h-text); border-radius: var(--h-radius); padding: 10px 12px; font-size: 13px; }
.h-hinweis.warn { background: var(--h-warn-hell); border-left: 4px solid var(--h-warn); }
.h-hinweis.fehler { background: var(--h-rot-hell); border-left: 4px solid var(--h-rot); }
.h-leer { text-align: center; color: var(--h-text2); padding: 16px 8px; font-size: 14px; }
.h-tag-titel { font-size: 12px; font-weight: 600; color: var(--h-text2); text-transform: uppercase; letter-spacing: .06em; margin: 2px 0 -6px; }
.h-gedeckt { color: var(--h-text2); }

/* Woche (Termine) */
.h-woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.h-woche a { font-size: 11px; color: var(--h-text2); padding: 6px 0 5px; border-radius: 12px; text-decoration: none; }
.h-woche a b { display: block; font-size: 15px; font-weight: 700; color: var(--h-text); }
.h-woche a i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--h-akzent); margin: 4px auto 0; }
.h-woche a.heute { background: var(--h-akzent); color: var(--h-akzent-text); } .h-woche a.heute b { color: var(--h-akzent-text); } .h-woche a.heute i { background: var(--h-akzent-text); }
.h-woche a.gewaehlt:not(.heute) { outline: 2px solid var(--h-akzent); }
.h-wochenkopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--h-text2); }
.h-wochenkopf button { background: none; border: 1px solid var(--h-linie); border-radius: 10px; color: var(--h-text); padding: 6px 10px; cursor: pointer; }
.h-karte { background: var(--h-flaeche); border: 1px solid var(--h-linie); border-radius: var(--h-radius); padding: 12px 14px; border-left: 5px solid var(--h-akzent); box-shadow: var(--h-schatten); }
.h-karte.p1 { border-left-color: var(--h-rot); } .h-karte.einbau { border-left-color: var(--h-gut); } .h-karte.erledigt { opacity: .7; border-left-color: var(--h-linie); }
.h-karte .oben { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; align-items: center; }
.h-karte .name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.h-karte .info { font-size: 13px; color: var(--h-text2); overflow-wrap: anywhere; }
.h-karte .info.text { color: var(--h-text); white-space: pre-line; }

/* Projekte */
.h-suche { display: flex; align-items: center; gap: 8px; background: var(--h-flaeche); border: 1px solid var(--h-linie); border-radius: 12px; padding: 6px 12px; }
.h-suche svg { width: 18px; height: 18px; flex: none; color: var(--h-text2); }
.h-suche input { border: 0; background: transparent; width: 100%; padding: 6px 0; color: var(--h-text); outline: none; }
.h-segmente { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.h-segmente span { flex: none; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--h-linie); background: var(--h-flaeche); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.h-segmente span b { font-weight: 700; color: var(--h-text2); margin-left: 4px; font-variant-numeric: tabular-nums; }
.h-segmente span.aktiv { background: var(--h-akzent); border-color: var(--h-akzent); color: var(--h-akzent-text); } .h-segmente span.aktiv b { color: inherit; opacity: .8; }
.h-projekt { display: grid; grid-template-columns: 50px 1fr auto; gap: 12px; align-items: center; background: var(--h-flaeche); border: 1px solid var(--h-linie); border-radius: var(--h-radius); padding: 12px 12px 12px 10px; color: inherit; text-decoration: none; box-shadow: var(--h-schatten); }
.h-projekt.fertig { opacity: .85; }
.h-blatt { text-align: center; border-radius: 10px; padding: 5px 0 6px; background: var(--h-blau-hell); color: var(--h-blau); font-size: 11px; font-weight: 600; }
.h-blatt b { display: block; font-size: 15px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.h-projekt.lauf .h-blatt { background: var(--h-gut-hell); color: var(--h-gut); } .h-projekt.fertig .h-blatt { background: var(--h-grund); color: var(--h-text2); }
.h-projekt .name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.h-unter { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }

/* Projektseite, Vorgang */
.h-feld { display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--h-linie); font-size: 14px; }
.h-feld.erste { border-top: 0; } .h-feld span:first-child { color: var(--h-text2); } .h-feld span:last-child { font-weight: 600; overflow-wrap: anywhere; }
.h-schritt { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; }
.h-schritt i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--h-linie); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-style: normal; }
.h-schritt.ok i { background: var(--h-gut); border-color: var(--h-gut); color: #fff; }
.h-schritt.jetzt i { border-color: var(--h-akzent); box-shadow: 0 0 0 3px var(--h-akzent-hell); } .h-schritt.jetzt { font-weight: 700; }
.h-schritt small { color: var(--h-text2); font-size: 12px; font-weight: 500; }
.h-posten { padding: 9px 0; border-top: 1px solid var(--h-linie); font-size: 14px; }
.h-posten.erste { border-top: 0; } .h-posten.erl { color: var(--h-text2); text-decoration: line-through; }
.h-posten .h-unter { text-decoration: none; }
.h-melden { display: block; width: 100%; text-align: center; margin-top: 8px; padding: 10px; border-radius: 10px; border: 1.5px dashed var(--h-akzent); color: var(--h-akzent); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
.h-notiz { background: var(--h-warn-hell); color: var(--h-text); border-radius: var(--h-radius); padding: 10px 12px; font-size: 14px; border-left: 4px solid var(--h-warn); white-space: pre-line; overflow-wrap: anywhere; }
.h-notiz .ergaenzen { display: block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--h-warn); background: none; border: 0; padding: 0; cursor: pointer; }
.h-dok { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--h-linie); font-size: 14px; color: inherit; text-decoration: none; }
.h-dok.erste { border-top: 0; }
.h-dok b { font-size: 10px; font-weight: 700; background: var(--h-rot-hell); color: var(--h-rot); border-radius: 6px; padding: 6px 0; text-align: center; }
.h-dok b.foto { background: var(--h-akzent-hell); color: var(--h-akzent); } .h-dok b.link { background: var(--h-blau-hell); color: var(--h-blau); }
.h-formular { display: flex; flex-direction: column; gap: 10px; }
.h-formular label { font-size: 12px; color: var(--h-text2); display: block; margin-bottom: 3px; }
.h-formular input, .h-formular select, .h-formular textarea { width: 100%; border: 1px solid var(--h-linie); border-radius: 10px; padding: 10px; background: var(--h-flaeche); color: var(--h-text); font-size: 16px; }
.h-formular textarea { min-height: 90px; }
.h-formular .h-fehler { color: var(--h-rot); font-size: 12px; margin-top: 3px; }

/* Menü */
.h-profil { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.h-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--h-akzent); color: var(--h-akzent-text); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.h-mzeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--h-linie); font-size: 15px; color: inherit; text-decoration: none; background: none; border-left: 0; border-right: 0; border-bottom: 0; width: 100%; text-align: left; cursor: pointer; }
.h-mzeile.erste { border-top: 0; } .h-mzeile small { display: block; font-size: 12px; color: var(--h-text2); }
.h-mzeile.stapel { flex-direction: column; align-items: stretch; gap: 8px; cursor: default; }
.h-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--h-grund); border-radius: 10px; padding: 3px; }
.h-wahl.zwei { grid-template-columns: 1fr 1fr; }
.h-wahl span { text-align: center; padding: 8px 2px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--h-text2); cursor: pointer; }
.h-wahl span.aktiv { background: var(--h-flaeche); color: var(--h-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.h-abmelden { text-align: center; padding: 12px; border-radius: var(--h-radius); border: 1px solid var(--h-rot); color: var(--h-rot); font-size: 15px; font-weight: 700; background: var(--h-flaeche); width: 100%; cursor: pointer; }
.h-version { text-align: center; font-size: 12px; color: var(--h-text2); padding-bottom: 6px; }
.h-frage { padding: 12px 14px; } .h-frage summary { font-size: 15px; font-weight: 700; cursor: pointer; } .h-frage p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; }

/* Geführter Einsatz */
.h-stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 12px; }
.h-stepper i { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.h-stepper i.ok { background: #7fd1a8; } .h-stepper i.jetzt { background: #fff; }
.h-schritt-titel { font-size: 13px; margin-top: 8px; opacity: .9; }
.h-grossknopf { background: var(--h-gut); color: #fff; border: 0; border-radius: var(--h-radius); padding: 16px; text-align: center; font-size: 20px; font-weight: 800; width: 100%; cursor: pointer; }
.h-grossknopf small { display: block; font-size: 13px; font-weight: 500; opacity: .9; margin-top: 2px; }
.h-grossknopf.fertig { background: var(--h-gut-hell); color: var(--h-gut); }
.handy.nacht .h-grossknopf { color: #16211d; }
.h-efuss { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; border-top: 1px solid var(--h-linie); background: var(--h-flaeche); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
.h-efuss button { text-align: center; padding: 13px 6px; border-radius: 12px; border: 1px solid var(--h-linie); font-size: 15px; font-weight: 700; cursor: pointer; color: var(--h-text); background: var(--h-flaeche); }
.h-efuss button.primaer { background: var(--h-akzent); border-color: var(--h-akzent); color: var(--h-akzent-text); }
.h-efuss button:disabled { opacity: .4; }
.h-zaehler { display: flex; align-items: center; gap: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.h-zaehler button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--h-linie); background: var(--h-flaeche); color: var(--h-text); font-size: 18px; font-weight: 700; cursor: pointer; }
.h-diktat { display: flex; gap: 8px; margin-top: 8px; }
.h-diktat button.aktiv { background: var(--h-rot); border-color: var(--h-rot); color: #fff; }
.h-fertig-block { text-align: center; padding: 24px 12px; }
.h-fertig-block .haken { width: 64px; height: 64px; border-radius: 50%; background: var(--h-gut); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }

/* Wiederverwendete Bausteine (Fotos, Unterschrift) an die Farbwelt anpassen */
.handy .foto-knopf { border-color: var(--h-akzent); color: var(--h-akzent); background: var(--h-flaeche); }
.handy .anhang-galerie .anhang { border-color: var(--h-linie); background: var(--h-flaeche); }
.handy .anhang-galerie .anhang .icon { background: var(--h-grund); }
.handy .leer-hinweis { color: var(--h-text2); }
.handy .leer-hinweis.pflicht { border-color: var(--h-warn); color: var(--h-warn); }
.handy .unterschrift-feld { border-color: var(--h-linie); }
.handy .unterschrift input { border: 1px solid var(--h-linie); border-radius: 10px; padding: 10px; background: var(--h-flaeche); color: var(--h-text); width: 100%; }
.handy .unterschrift button { border: 1px solid var(--h-linie); border-radius: 10px; padding: 10px; background: var(--h-flaeche); color: var(--h-text); }
.handy .unterschrift button.primaer { background: var(--h-akzent); border-color: var(--h-akzent); color: var(--h-akzent-text); }
.handy .kunde-erklaerung { background: var(--h-flaeche); color: var(--h-text); border-color: var(--h-linie); border-left-color: var(--h-akzent); }
.handy .dialog { background: var(--h-flaeche); color: var(--h-text); }

/* Meldungen über der Fußleiste bzw. den Einsatz-Knöpfen zeigen */
.handy ~ .toast-wrap { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }