/* Monteuransicht (Z-6): Handy zuerst, im Look des Kundenportals (H-1, docs/design/360/H-Kundenportal.html).
   Für draußen gebaut: Grundschrift 16 px (kein Zoom beim Tippen in iOS), Ziele mindestens 48 px (Handschuhe;
   WCAG 2.2 verlangt 24), Kontrast der Texte mindestens 4,5:1 auch für die leisen Töne, Fokus immer sichtbar.
   Dunkel über prefers-color-scheme. Keine Inline-Stile (CSP style-src 'self'). */

@font-face {
  font-family: "Manrope";
  src: url("manrope.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --schrift: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --weiss: #FFFFFF;
  --h-grund: #0B1922; --h-grund2: #16344A; --h-text: #FFFFFF; --h-text2: rgba(255,255,255,.80); --h-text3: rgba(255,255,255,.62);
  --h-glas: rgba(255,255,255,.10); --h-glas-rand: rgba(255,255,255,.20); --h-glut: rgba(217,54,44,.30);
  --n-grund: #F3F5F7; --n-flaeche: #FFFFFF; --n-text: #0B1922; --n-text2: #4F5D68; --n-text3: #5F6C77;
  --n-linie: rgba(11,25,34,.08); --n-rand: rgba(11,25,34,.16); --n-feld: #F1F3F6; --n-feld-rand: rgba(11,25,34,.22);
  --n-schatten: 0 1px 2px rgba(11,25,34,.04), 0 10px 28px rgba(11,25,34,.05);
  --n-glas: rgba(255,255,255,.92); --n-glas-schatten: 0 -6px 24px -10px rgba(11,25,34,.22);
  --n-rot: #C31F1E; --n-rot-hell: #D9362C; --n-rot-text: #B81D1C; --n-rot-zart: rgba(195,31,30,.08); --n-rot-glut: rgba(195,31,30,.42);
  --n-gruen: #17663A; --n-gruen-zart: rgba(46,155,91,.13); --n-gelb: #7A4C00; --n-gelb-zart: #FFF3D9; --n-blau: #1F5A9E; --n-blau-zart: rgba(37,99,168,.10);
  --n-band: #F4CB6B;
  --t-rot: #C31F1E; --t-rot-g: rgba(195,31,30,.10); --t-gelb: #8A5800; --t-gelb-g: rgba(214,150,30,.16);
  --t-gruen: #17663A; --t-gruen-g: rgba(46,155,91,.13); --t-blau: #1F5A9E; --t-blau-g: rgba(37,99,168,.11);
  --t-stein: #3D4A55; --t-stein-g: rgba(61,74,85,.09);
  --b-rand: rgba(11,25,34,.10); --b-punkt-gruen: #2E9B5B; --b-punkt-gelb: #D98A1C; --b-punkt-rot: #D9362C; --b-schweben: rgba(255,255,255,.96); --b-schweben-schatten: 0 1px 2px rgba(11,25,34,.06), 0 12px 34px rgba(11,25,34,.14);
  --inhalt: 640px;
  --leiste: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --n-grund: #0B1922; --n-flaeche: #112532; --n-text: #F1F4F6; --n-text2: #A9B6BF; --n-text3: #93A1AC;
    --n-linie: rgba(255,255,255,.08); --n-rand: rgba(255,255,255,.16); --n-feld: rgba(255,255,255,.06); --n-feld-rand: rgba(255,255,255,.24);
    --n-schatten: 0 0 0 1px rgba(255,255,255,.06); --n-glas: rgba(16,36,48,.94); --n-glas-schatten: 0 -6px 24px -10px rgba(0,0,0,.6);
    --n-rot-text: #F26A5F; --n-rot-zart: rgba(240,88,76,.15);
    --n-gruen: #86DBA8; --n-gruen-zart: rgba(76,194,130,.15); --n-gelb: #F2C46B; --n-gelb-zart: rgba(242,196,107,.13); --n-blau: #9CC6F2; --n-blau-zart: rgba(106,166,232,.15);
    --t-rot: #F26A5F; --t-rot-g: rgba(240,88,76,.16); --t-gelb: #F2C46B; --t-gelb-g: rgba(242,196,107,.14);
    --t-gruen: #86DBA8; --t-gruen-g: rgba(76,194,130,.15); --t-blau: #9CC6F2; --t-blau-g: rgba(106,166,232,.16);
    --t-stein: #C9D3DA; --t-stein-g: rgba(255,255,255,.08);
    --b-rand: rgba(255,255,255,.12);
    --b-punkt-gruen: #4CC282;
    --b-punkt-gelb: #F0B44C;
    --b-punkt-rot: #F0584C;
    --b-schweben: rgba(20,42,56,.94);
    --b-schweben-schatten: 0 12px 34px rgba(0,0,0,.45);
  }
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
/* Kein Doppeltipp-Zoom auf Bedienelementen (schnelles „+ +“ beim Fortschritt vergrößerte sonst in Safari die Seite);
   Kneif-Zoom bleibt (WCAG 1.4.4). */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
html { background: var(--n-grund); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--n-grund); color: var(--n-text); font-family: var(--schrift);
  font-weight: 600; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 31; height: env(safe-area-inset-top, 0px); background: var(--h-grund); }
main { display: block; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
main.mit-leiste { padding-bottom: calc(var(--leiste) + 36px + env(safe-area-inset-bottom, 0px)); }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.zahl { font-variant-numeric: tabular-nums; }
.sym { width: 22px; height: 22px; flex: none; display: inline-block; }
.ak { stroke: var(--ak, currentColor); }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--n-rot-text); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .m-haupt, .m-neben, .m-schalter i, .m-balken i { transition: background .15s, transform .15s, width .2s; } }

/* Kopf */
.m-kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; align-items: center; gap: 8px; height: 60px;
  padding: 0 max(12px, calc((100% - var(--inhalt)) / 2 + 12px)); background: var(--h-grund); color: var(--h-text); }
.m-kopf h1 { font-size: 17px; font-weight: 800; text-align: center; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-logo { justify-self: center; width: 84px; height: 40px; background: url("logo-weiss.png") center / contain no-repeat; }
.m-glas { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--h-glas-rand); background: var(--h-glas); color: var(--h-text); display: grid; place-items: center; text-decoration: none; --ak: var(--h-text); cursor: pointer; }
.m-glas .sym { width: 22px; height: 22px; }

/* Held: Gruß und Tag */
.m-held { color: var(--h-text); padding: 10px max(20px, calc((100% - var(--inhalt)) / 2 + 20px)) 50px;
  background: radial-gradient(120% 70% at 100% 0%, var(--h-glut), transparent 60%), linear-gradient(170deg, var(--h-grund2), var(--h-grund) 75%); }
.m-held small { display: block; font-size: 14px; font-weight: 700; color: var(--h-text2); }
.m-held h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; margin: 2px 0 0; text-wrap: balance; }
.m-held p { margin-top: 8px; font-size: 15px; color: var(--h-text2); display: flex; align-items: center; gap: 6px; --ak: var(--h-text2); }
.m-held .m-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.m-pille { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--h-glas); border: 1px solid var(--h-glas-rand); font-size: 14px; font-weight: 800; color: var(--h-text); text-decoration: none; --ak: var(--h-text); }
.m-pille .sym { width: 17px; height: 17px; }
.m-pille.warn { background: rgba(244,203,107,.18); border-color: rgba(244,203,107,.5); }

/* Blatt */
.m-blatt { position: relative; max-width: var(--inhalt); margin: -30px auto 0; border-radius: 28px 28px 0 0; background: var(--n-grund);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px max(14px, env(safe-area-inset-right, 0px)) 0 max(14px, env(safe-area-inset-left, 0px)); }
.m-blatt.ohne-held { margin-top: 0; border-radius: 0; padding-top: 16px; }
.m-abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 4px -4px; }
.m-abschnitt small { font-size: 14px; font-weight: 700; color: var(--n-text3); letter-spacing: 0; }
.m-karte { background: var(--n-flaeche); border-radius: 22px; padding: 16px; box-shadow: var(--n-schatten); min-width: 0; }
.m-karte > h3 { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; margin-bottom: 10px; }
.m-karte > h3 .sym { width: 20px; height: 20px; color: var(--n-text3); }
.m-karte > h3 .rechts { margin-left: auto; font-size: 14px; color: var(--n-text3); font-weight: 700; }
.m-leise { color: var(--n-text2); font-size: 15px; }
.m-text { white-space: pre-line; font-size: 16px; line-height: 1.55; }
/* Kurzanleitung (E-463): nummerierte Schritte in einer Karte */
.m-hilfe { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--n-text2); }
.m-hilfe li::marker { color: var(--n-text3); font-weight: 700; }

/* Band (ohne Netz, Ausgang) */
.m-band { position: sticky; top: calc(60px + env(safe-area-inset-top, 0px)); z-index: 29; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: var(--n-band); color: var(--h-grund); font-size: 14.5px; font-weight: 800; --ak: var(--h-grund); }
.m-band .sym { width: 19px; height: 19px; }
.m-band a { margin-left: auto; text-decoration: underline; text-underline-offset: 3px; }

/* Einsatz-Karte */
.m-einsatz { display: grid; gap: 12px; text-decoration: none; }
.m-einsatz-kopf { display: grid; grid-template-columns: 62px minmax(0,1fr) 22px; gap: 14px; align-items: start; text-decoration: none; color: inherit; }
.m-uhrzeit { border-radius: 16px; background: var(--n-feld); text-align: center; padding: 8px 0 7px; }
.m-uhrzeit b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.m-uhrzeit small { display: block; font-size: 12.5px; font-weight: 800; color: var(--n-text3); text-transform: uppercase; letter-spacing: .04em; }
.m-einsatz-kopf h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.m-einsatz-kopf p { font-size: 15px; color: var(--n-text2); margin-top: 3px; }
.m-einsatz-kopf > .sym { margin-top: 4px; color: var(--n-text3); }
.m-zeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.m-marke { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 11px; border-radius: 999px; font-size: 13.5px; font-weight: 800; background: var(--n-feld); color: var(--n-text2); --ak: currentColor; }
.m-marke .sym { width: 16px; height: 16px; }
.m-marke.gruen { background: var(--n-gruen-zart); color: var(--n-gruen); }
.m-marke.gelb { background: var(--n-gelb-zart); color: var(--n-gelb); }
.m-marke.rot { background: var(--n-rot-zart); color: var(--n-rot-text); }
.m-marke.blau { background: var(--n-blau-zart); color: var(--n-blau); }
.m-marke.ich { background: var(--h-grund); color: var(--h-text); }
@media (prefers-color-scheme: dark) { .m-marke.ich { background: var(--h-text); color: var(--h-grund); } }
.m-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }

/* Knöpfe */
.m-haupt, .m-neben, .m-hell { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 16px; border: 0;
  font: 800 16px var(--schrift); cursor: pointer; text-decoration: none; text-align: center; width: 100%; }
.m-haupt { min-height: 56px; background: linear-gradient(180deg, var(--n-rot-hell), var(--n-rot)); color: var(--weiss); box-shadow: 0 10px 22px -12px var(--n-rot-glut); --ak: var(--weiss); }
.m-haupt:active { transform: scale(.985); }
.m-haupt[disabled] { background: var(--n-feld); color: var(--n-text3); box-shadow: none; cursor: not-allowed; }
.m-neben { background: var(--n-feld); color: var(--n-text); border: 1px solid var(--n-rand); --ak: var(--n-rot-text); }
.m-hell { background: transparent; color: var(--n-text); border: 1px solid var(--n-rand); }
.m-haupt .sym, .m-neben .sym, .m-hell .sym { width: 20px; height: 20px; }
.m-unten { position: sticky; bottom: calc(var(--leiste) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 5; }
.m-unten.ohne-leiste { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Liste mit Zeilen */
.m-liste { display: grid; }
.m-liste > * { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--n-linie); text-decoration: none; color: inherit; }
.m-liste > *:first-child { border-top: 0; }
.m-liste b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.m-liste small { display: block; font-size: 14px; color: var(--n-text2); }
.m-ton { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--t-stein-g); color: var(--t-stein); --ak: currentColor; }
.m-ton .sym { width: 22px; height: 22px; }
.m-ton.rot { background: var(--t-rot-g); color: var(--t-rot); }
.m-ton.gruen { background: var(--t-gruen-g); color: var(--t-gruen); }
.m-ton.gelb { background: var(--t-gelb-g); color: var(--t-gelb); }
.m-ton.blau { background: var(--t-blau-g); color: var(--t-blau); }
.m-rund { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--n-feld); border: 1px solid var(--n-rand); color: var(--n-text); text-decoration: none; --ak: var(--n-rot-text); }

/* Arbeiten (Positionen) mit Fortschritt */
.m-titel { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--n-text3); margin: 14px 0 2px; }
.m-titel:first-child { margin-top: 0; }
.m-position { padding: 12px 0; border-top: 1px solid var(--n-linie); }
.m-position:first-of-type { border-top: 0; }
.m-position-kopf { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: baseline; }
.m-position-kopf .nr { font-size: 13.5px; font-weight: 800; color: var(--n-text3); }
.m-position-kopf b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.m-position-kopf .text small { display: block; font-size: 14px; color: var(--n-text2); font-weight: 600; }
.m-position-kopf .menge { font-size: 14.5px; font-weight: 800; color: var(--n-text2); white-space: nowrap; }
.m-position details { margin: 6px 0 0 48px; }
.m-position summary { font-size: 14.5px; font-weight: 800; color: var(--n-text); cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; list-style: none; --ak: currentColor; }
.m-position summary::-webkit-details-marker { display: none; }
.m-position summary .sym { width: 18px; height: 18px; color: var(--n-text3); }
@media (prefers-reduced-motion: no-preference) { .m-position summary .sym { transition: transform .15s; } }
.m-position details[open] summary .sym { transform: rotate(180deg); }
.m-position details p { font-size: 15px; color: var(--n-text2); white-space: pre-line; margin-top: 4px; }
.m-hinweis { margin: 8px 0 0 48px; padding: 9px 12px; border-radius: 12px; background: var(--n-gelb-zart); color: var(--n-gelb); font-size: 14.5px; font-weight: 700; display: flex; gap: 8px; --ak: currentColor; }
.m-hinweis .sym { width: 18px; height: 18px; margin-top: 2px; }
.m-balken { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 10px; align-items: center; margin: 8px 0 0 48px; }
.m-balken span { height: 8px; border-radius: 4px; background: var(--n-feld); overflow: hidden; box-shadow: inset 0 0 0 1px var(--n-linie); }
.m-balken i { display: block; height: 100%; border-radius: 4px; background: var(--n-gruen); }
.m-balken b { font-size: 14.5px; font-weight: 800; text-align: right; }
.b0 i { width: 0; } .b10 i { width: 10%; } .b20 i { width: 20%; } .b25 i { width: 25%; } .b30 i { width: 30%; } .b40 i { width: 40%; } .b50 i { width: 50%; }
.b60 i { width: 60%; } .b70 i { width: 70%; } .b75 i { width: 75%; } .b80 i { width: 80%; } .b90 i { width: 90%; } .b100 i { width: 100%; }

/* Fortschritt eingeben: Stufen 0–100 in Zehnern */
.m-stufen { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 6px; margin: 10px 0 0 48px; border: 0; padding: 0; }
.m-stufen legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.m-stufen label { position: relative; }
.m-stufen input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.m-stufen span { display: grid; place-items: center; min-height: 48px; border-radius: 12px; background: var(--n-feld); border: 1px solid var(--n-rand); font-size: 15px; font-weight: 800; color: var(--n-text); }
.m-stufen input:checked + span { background: var(--n-gruen); border-color: var(--n-gruen); color: var(--n-flaeche); }
.m-stufen input:focus-visible + span { outline: 3px solid var(--n-rot-text); outline-offset: 2px; }
.m-stufen .vorher span { box-shadow: inset 0 -3px 0 var(--n-gruen); }

/* Formular */
.m-feld { display: grid; gap: 6px; margin-top: 14px; }
.m-feld:first-child { margin-top: 0; }
.m-feld > label, .m-feld > .beschriftung { font-size: 15px; font-weight: 800; }
.m-feld small { font-size: 14px; color: var(--n-text2); font-weight: 600; }
.m-eingabe, .m-feld textarea, .m-feld select { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--n-feld-rand); background: var(--n-feld);
  color: var(--n-text); font: 600 16px var(--schrift); }
.m-feld textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.m-eingabe:focus, .m-feld textarea:focus, .m-feld select:focus { outline: 3px solid var(--n-rot-text); outline-offset: 1px; border-color: transparent; }
.m-drei { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.m-zwei { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.m-schalter { display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: 12px; align-items: center; min-height: 56px; cursor: pointer; }
.m-schalter b { display: block; font-size: 16px; font-weight: 800; }
.m-schalter small { display: block; font-size: 14px; color: var(--n-text2); }
.m-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.m-schalter i { position: relative; width: 56px; height: 34px; border-radius: 17px; background: var(--n-feld); border: 1px solid var(--n-feld-rand); }
.m-schalter i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--weiss); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.m-schalter input:checked + i { background: var(--n-gruen); border-color: var(--n-gruen); }
.m-schalter input:checked + i::after { transform: translateX(22px); }
.m-schalter input:focus-visible + i { outline: 3px solid var(--n-rot-text); outline-offset: 2px; }
.m-fehler { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--n-rot-zart); color: var(--n-rot-text); font-size: 15px; font-weight: 700; --ak: currentColor; }
.m-ok { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--n-gruen-zart); color: var(--n-gruen); font-size: 15px; font-weight: 700; --ak: currentColor; }

/* Team und Zeiten im Rapport */
.m-person { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--n-linie); }
.m-person:first-of-type { border-top: 0; padding-top: 0; }
.m-person b { font-size: 16px; font-weight: 800; }
.m-person .m-drei label { display: grid; gap: 4px; font-size: 13.5px; font-weight: 800; color: var(--n-text2); }

/* Fotos */
.m-fotos { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.m-foto { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--n-feld); }
.m-foto img, .m-foto .bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-foto .bild { background: linear-gradient(135deg, #8BA0AE, #4D6372); }
.m-foto .bild.b2 { background: linear-gradient(135deg, #A47E62, #5B4434); }
.m-foto .bild.b3 { background: linear-gradient(135deg, #6E8A6A, #3E5640); }
.m-foto .bild.b4 { background: linear-gradient(135deg, #B9A88C, #6E6150); }
.m-foto small { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 7px; border-radius: 8px; background: rgba(11,25,34,.72); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-foto .wahl { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--n-gruen); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.m-foto .wahl .sym { width: 18px; height: 18px; }
.m-foto .warte { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 8px; background: var(--n-band); color: var(--h-grund); font-size: 12px; font-weight: 800; }
.m-foto-neu { aspect-ratio: 1; border-radius: 14px; border: 2px dashed var(--n-feld-rand); display: grid; place-content: center; justify-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--n-text2); background: transparent; cursor: pointer; --ak: var(--n-rot-text); }

/* Unterschrift */
.m-zusammenfassung { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--n-feld); font-size: 15px; }
.m-zusammenfassung b { font-weight: 800; }
.m-unterschrift { position: relative; height: 210px; border-radius: 16px; background: #FFFFFF; border: 2px solid var(--n-feld-rand); touch-action: none; }
.m-unterschrift::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 52px; border-bottom: 2px solid #C9D1D8; }
.m-unterschrift span { position: absolute; left: 22px; bottom: 22px; font-size: 13px; font-weight: 700; color: #5C6974; }
.m-unterschrift svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-unterschrift path { fill: none; stroke: #0B1922; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Haus-Vorgeschichte */
.m-verlauf { list-style: none; margin: 0; padding: 0; }
.m-verlauf li { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 12px; padding-bottom: 14px; }
.m-verlauf li:last-child { padding-bottom: 0; }
.m-verlauf li::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--n-linie); }
.m-verlauf li:last-child::before { display: none; }
.m-verlauf .m-ton { width: 36px; height: 36px; border-radius: 12px; }
.m-verlauf .m-ton .sym { width: 18px; height: 18px; }
.m-verlauf b { display: block; font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.m-verlauf small { display: block; font-size: 14px; color: var(--n-text2); }

/* Woche */
.m-tag { display: flex; align-items: baseline; gap: 10px; margin: 10px 4px -4px; }
.m-tag b { font-size: 17px; font-weight: 800; }
.m-tag small { font-size: 14px; color: var(--n-text3); font-weight: 700; }
.m-tag.heute b { color: var(--n-text); }
.m-tag.heute b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--b-punkt-rot); }
.m-frei { padding: 14px 16px; border-radius: 18px; border: 1px dashed var(--n-rand); color: var(--n-text3); font-size: 15px; }

/* Zeiten */
.m-summe { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.m-summe div { border-radius: 16px; background: var(--n-feld); padding: 10px 12px; }
.m-summe b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.m-summe small { font-size: 13px; font-weight: 800; color: var(--n-text3); }
.m-vorschlag { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 16px; background: var(--n-blau-zart); }
.m-vorschlag b { display: block; font-size: 15.5px; font-weight: 800; }
.m-vorschlag small { display: block; font-size: 14px; color: var(--n-text2); }
.m-vorschlag .m-neben { grid-column: 1 / -1; min-height: 48px; }

/* Untere Leiste */
.m-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  padding: 6px max(8px, calc((100% - var(--inhalt)) / 2 + 8px)) calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--n-glas); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--n-glas-schatten); border-top: 1px solid var(--n-linie); }
.m-leiste a { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; border-radius: 14px; font-size: 12.5px; font-weight: 800; color: var(--n-text2); text-decoration: none; --ak: currentColor; }
.m-leiste a .sym { width: 24px; height: 24px; }
.m-leiste a[aria-current="page"] { color: var(--n-rot-text); background: var(--n-rot-zart); }
.m-leiste em { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--n-rot); color: #fff; font-size: 11px; font-style: normal; display: grid; place-items: center; }

/* Anmeldung */
.m-tuer { min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 32px 22px calc(32px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 60% at 100% 0%, var(--h-glut), transparent 60%), linear-gradient(170deg, var(--h-grund2), var(--h-grund) 75%); color: var(--h-text); text-align: center; }
.m-tuer .m-logo { width: 140px; height: 64px; }
.m-tuer h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; max-width: 340px; }
.m-tuer p { font-size: 16px; color: var(--h-text2); max-width: 340px; }
.m-tuer .m-haupt { max-width: 360px; }
.m-tuer .m-gross { width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; background: var(--h-glas); border: 1px solid var(--h-glas-rand); --ak: #F4CB6B; }
.m-tuer .m-gross .sym { width: 46px; height: 46px; }
.m-tuer small { font-size: 14px; color: var(--h-text3); max-width: 340px; }
.m-tuer-link { font-size: 15px; font-weight: 700; color: var(--h-text); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.m-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 360px; width: 100%; text-align: left; }
.m-schritte li { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 12px; align-items: start; font-size: 15px; color: var(--h-text2); }
.m-schritte li i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--h-glas); border: 1px solid var(--h-glas-rand); font-style: normal; font-weight: 800; color: var(--h-text); }

@media (min-width: 900px) {
  .m-blatt.zwei { max-width: 1040px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .m-blatt.zwei > .spalte { display: grid; gap: 14px; }
}

/* Auswahl als Kapseln (Art, Dringlichkeit): wie die Stufen, aber mit Text */
.m-stufen.m-art { grid-template-columns: repeat(3, minmax(0,1fr)); margin-left: 0; }
.m-abstand { margin-top: 14px; }
.m-drei > .m-feld, .m-zwei > .m-feld { margin-top: 0; }
.m-summe b { font-size: 20px; white-space: nowrap; }

/* ═══ Gewählte Gestaltung: Variante B „360°“ (Chef 26.10.2026), überschreibt die Grundwerte oben ═══ */
/* Variante B „360°“: wie die App (docs/DESIGN.md) statt wie das Kundenportal.
   Helle bzw. nachtblaue Fläche ohne Kopfband, großer Bereichstitel, Karten Radius 22 mit runden Symbolfeldern,
   Knöpfe als Kapseln, Stand als Punkt statt farbiger Fläche, Rot nur für die eine Hauptaktion,
   Leiste schwebt als Kapsel über dem Inhalt (wie die Dot-Leiste der App). Gleiches HTML, nur dieses CSS dazu. */


body::before { background: var(--n-grund); }

/* Kopf: ruhig, auf der Fläche, mit Schleier beim Rollen */
.m-kopf { background: color-mix(in srgb, var(--n-grund) 86%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  color: var(--n-text); height: 56px; }
.m-kopf h1 { font-size: 16px; }
.m-logo { background-image: url("logo.png"); width: 72px; height: 34px; }
@media (prefers-color-scheme: dark) { .m-logo { background-image: url("logo-weiss.png"); } }
.m-glas { width: 48px; height: 48px; border: 1px solid var(--b-rand); background: var(--n-flaeche); color: var(--n-text); --ak: #D9362C; box-shadow: var(--n-schatten); }

/* Held: großer Bereichstitel wie „Heute“ in der App */
.m-held { background: none; color: var(--n-text); padding-top: 6px; padding-bottom: 8px; }
.m-held small { color: var(--n-text3); font-size: 13px; letter-spacing: .02em; text-transform: uppercase; font-weight: 800; }
.m-held h2 { font-size: 36px; letter-spacing: -0.04em; margin-top: 4px; }
.m-held p { color: var(--n-text2); --ak: #D9362C; }
.m-pille { background: var(--n-flaeche); border: 1px solid var(--b-rand); color: var(--n-text); box-shadow: var(--n-schatten); --ak: #D9362C; }
.m-pille.warn { background: var(--n-flaeche); border-color: var(--b-rand); }
.m-pille.warn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--b-punkt-gelb); }
.m-pille.warn .sym { display: none; }
.m-blatt { margin-top: 0; border-radius: 0; padding-top: 12px; gap: 16px; }

/* Karten und Zeilen */
.m-karte { border-radius: 22px; padding: 18px; border: 1px solid transparent; }
@media (prefers-color-scheme: dark) { .m-karte { border-color: rgba(255,255,255,.06); } }
.m-karte > h3 { font-size: 15px; }
.m-karte > h3 .sym { color: #D9362C; --ak: #D9362C; }
.m-abschnitt { font-size: 22px; letter-spacing: -0.03em; }
.m-ton { border-radius: 50%; width: 40px; height: 40px; background: var(--n-feld); color: var(--n-text); --ak: #D9362C; }
.m-ton.rot, .m-ton.gruen, .m-ton.gelb, .m-ton.blau { background: var(--n-feld); color: var(--n-text); }
.m-liste > * { grid-template-columns: 40px minmax(0,1fr) auto; }
.m-uhrzeit { background: none; border: 1px solid var(--b-rand); border-radius: 18px; }
.m-uhrzeit small { color: var(--n-text3); }

/* Stand als Punkt, nicht als Farbfläche */
.m-marke, .m-marke.gruen, .m-marke.gelb, .m-marke.rot, .m-marke.blau { background: var(--n-feld); color: var(--n-text); border-radius: 999px; }
.m-marke.gruen::before, .m-marke.gelb::before, .m-marke.rot::before, .m-marke.blau::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.m-marke.gruen::before { background: var(--b-punkt-gruen); }
.m-marke.gelb::before { background: var(--b-punkt-gelb); }
.m-marke.rot::before { background: var(--b-punkt-rot); }
.m-marke.blau::before { background: var(--n-text2); }
.m-marke.gruen .sym, .m-marke.gelb .sym, .m-marke.rot .sym, .m-marke.blau .sym { display: none; }
.m-marke.ich { background: var(--n-text); color: var(--n-flaeche); }
@media (prefers-color-scheme: dark) { .m-marke.ich { background: var(--n-text); color: var(--n-grund); } }

/* Knöpfe: Kapseln, Rot nur für die Hauptaktion */
.m-haupt, .m-neben, .m-hell { border-radius: 999px; }
.m-haupt { box-shadow: 0 0 0 1px rgba(195,31,30,.5), 0 10px 24px -10px rgba(195,31,30,.55); }
.m-neben { background: var(--n-flaeche); border-color: var(--b-rand); --ak: #D9362C; }
.m-rund { background: var(--n-flaeche); border-color: var(--b-rand); }
.m-eingabe, .m-feld textarea, .m-feld select { border-radius: 16px; background: var(--n-flaeche); border-color: var(--b-rand); }

/* Fortschritt in der Positionsfarbe der App (Text, nicht Grün) */
.m-balken i { background: var(--n-text); }
.m-stufen span { border-radius: 999px; background: var(--n-flaeche); border-color: var(--b-rand); }
.m-stufen input:checked + span { background: var(--n-text); border-color: var(--n-text); color: var(--n-flaeche); }
.m-stufen .vorher span { box-shadow: inset 0 0 0 2px var(--b-punkt-gruen); }
.m-hinweis { background: var(--n-feld); color: var(--n-text); border-left: 3px solid var(--b-punkt-gelb); border-radius: 10px; }
.m-schalter input:checked + i { background: var(--n-text); border-color: var(--n-text); }
.m-fehler { background: var(--n-flaeche); color: var(--n-text); border: 1px solid var(--b-rand); box-shadow: var(--n-schatten); }
.m-fehler .sym { color: #D9362C; }
.m-ok { background: var(--n-feld); color: var(--n-text); }
.m-band { background: var(--n-text); color: var(--n-grund); --ak: var(--n-grund); }
.m-summe div { background: none; border: 1px solid var(--b-rand); }
.m-vorschlag { background: var(--n-feld); }
.m-foto .wahl { background: var(--n-text); color: var(--n-flaeche); box-shadow: 0 0 0 2px var(--n-flaeche); }

/* Leiste schwebt als Kapsel */
.m-leiste { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 26px; border: 1px solid var(--b-rand);
  background: var(--b-schweben); box-shadow: var(--b-schweben-schatten); max-width: 520px; margin: 0 auto; }
.m-leiste a { border-radius: 20px; }
.m-leiste a[aria-current="page"] { background: var(--n-feld); color: var(--n-text); --ak: #D9362C; }
main.mit-leiste { padding-bottom: calc(var(--leiste) + 48px + env(safe-area-inset-bottom, 0px)); }
.m-unten { bottom: calc(var(--leiste) + 24px + env(safe-area-inset-bottom, 0px)); }

/* Tür (Einrichten, Anmelden) bleibt nachtblau: der eine große Moment, wie der Start der App */

/* Anpassungen an die Regeln des Projekts (Z-6 M1 B): runder Kopfknopf 48 statt 44 px (Ziele mindestens 48 px),
   auf der nachtblauen Tür immer das weiße Logo. */
.m-tuer .m-logo { background-image: url("logo-weiss.png"); }

/* Ergänzungen für die echten Seiten (Z-6 M1): nur Bausteine, die die Entwurfsseiten nicht brauchten.
   Das Aussehen bleibt über die Variablen oben austauschbar. */
[hidden] { display: none !important; }
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.m-band.rot .sym { color: var(--b-punkt-rot); }
.m-band a, .m-band button { display: inline-flex; align-items: center; min-height: 48px; margin: -10px 0 -10px auto; padding: 0 4px;
  background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.m-band a + button, .m-band button + a { margin-left: 12px; }
.m-unterschrift canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; color: #0B1922; }
.m-unterschrift.hat-strich span { display: none; }
.m-fehlertext { color: var(--n-text); font-size: 15px; font-weight: 700; }
.m-fehlertext::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 8px 1px 0; border-radius: 50%; background: var(--b-punkt-rot); }
.m-eingabe[aria-invalid="true"], .m-feld textarea[aria-invalid="true"] { border-color: var(--n-rot-text); }
.m-material-neu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.m-tuer .m-fehler, .m-tuer .m-ok { max-width: 360px; width: 100%; text-align: left; }
.m-tuer .m-hell { max-width: 360px; color: var(--h-text); border-color: var(--h-glas-rand); }
.m-ausgang { display: grid; gap: 4px; }
.m-ausgang .m-marke { justify-self: start; }
.m-liste button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.m-zusammenfassung span { white-space: pre-line; }

/* Stand je Arbeit (Klickprobe M1): „−“ · Wert · „+“ in einer Zeile, darunter ein Schieberegler 0–100 in Zehnern; der
   bisherige Stand als feine grüne Marke auf der Schiene (Klasse v0 … v100) und als Text. */
.m-stand { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px; margin: 12px 0 0 48px; }
.m-stand-wert { text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.m-rund[disabled], .m-rund[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
button.m-rund { cursor: pointer; font: inherit; padding: 0; }
.m-regler { --vorher: 0; display: block; width: calc(100% - 48px); height: 44px; margin: 6px 0 0 48px; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.m-regler::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--b-rand);
  background: linear-gradient(var(--b-punkt-gruen), var(--b-punkt-gruen)) no-repeat calc(21px + (100% - 44px) * var(--vorher)) 0 / 3px 100%, var(--n-feld); }
.m-regler::-moz-range-track { height: 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--b-rand);
  background: linear-gradient(var(--b-punkt-gruen), var(--b-punkt-gruen)) no-repeat calc(21px + (100% - 44px) * var(--vorher)) 0 / 3px 100%, var(--n-feld); }
.m-regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%;
  background: var(--n-flaeche); border: 2px solid var(--n-text); box-shadow: var(--n-schatten); }
.m-regler::-moz-range-thumb { width: 40px; height: 40px; border-radius: 50%; background: var(--n-flaeche); border: 2px solid var(--n-text); box-shadow: var(--n-schatten); }
.m-regler:focus-visible { outline: 3px solid var(--n-rot-text); outline-offset: 2px; border-radius: 22px; }
.m-vorher { display: block; margin: 2px 0 0 48px; font-size: 14px; color: var(--n-text2); }
.v0 { --vorher: 0; } .v10 { --vorher: .1; } .v20 { --vorher: .2; } .v30 { --vorher: .3; } .v40 { --vorher: .4; } .v50 { --vorher: .5; }
.v60 { --vorher: .6; } .v70 { --vorher: .7; } .v80 { --vorher: .8; } .v90 { --vorher: .9; } .v100 { --vorher: 1; }
.m-textzeile { margin: 8px 0 0; font-size: 15px; color: var(--n-text2); }
.m-uhrzeit b.klein { font-size: 13px; letter-spacing: 0; padding: 4px 0 1px; }

/* Block „Ich“ (M2): Erinnerung „Stunden fehlen“ in Heute (ruhige Karte statt Pop-up), Monatswahl, Art mit vier
   Kapseln (Azubi), Verlauf der Bestätigung. Farben nur aus den Variablen oben (Kontrast hell und dunkel geprüft). */
.m-erinnerung > h3 .m-ton { width: 36px; height: 36px; border-radius: 12px; }
.m-erinnerung > h3 .m-ton .sym { width: 19px; height: 19px; color: inherit; }
.m-erinnerung .m-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-erinnerung .m-aktionen > :first-child { grid-column: 1 / -1; }
.m-monatswahl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; align-items: center; text-align: center; }
.m-monatswahl b { font-size: 17px; font-weight: 800; }
.m-stufen.m-art.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-liste .m-rechts { display: grid; justify-items: end; gap: 4px; }
/* Datumsfelder nebeneinander (Von/Bis): nicht breiter als ihre Spalte (sonst ragt „Bis“ aus der Karte) */
.m-zwei > .m-feld, .m-drei > .m-feld { min-width: 0; }
.m-eingabe[type="date"] { min-width: 0; width: 100%; }
.m-hell[disabled], .m-neben[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 380px) { .m-erinnerung .m-aktionen { grid-template-columns: minmax(0, 1fr); } }
/* Fotos am Einsatz (Z-6 F): Raster aus Vorschaubildern; Büro und Team in getrennten Karten. Die ganze Kachel ist das
   Ziel (Link bzw. Beschriftung des Kästchens), mindestens 48 px. */
.m-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.m-foto { position: relative; display: block; min-height: 48px; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--n-feld); border: 1px solid var(--n-rand); cursor: pointer; }
.m-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-foto small { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 12px; font-weight: 800; background: var(--n-flaeche); color: var(--n-text); }
.m-foto input { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; margin: 0; accent-color: var(--n-text); }
.m-foto:has(input:checked) { outline: 3px solid var(--n-text); outline-offset: -3px; }
.m-foto:has(input:focus-visible) { outline: 3px solid var(--n-rot-text); outline-offset: 2px; }
.m-datei { cursor: pointer; }
.m-datei:focus-within { outline: 3px solid var(--n-rot-text); outline-offset: 2px; }
/* Baustelle (Z-6 M3): Prüfpunkte des Wartungsprotokolls (Ergebnis als Stufen, Bemerkung, ein Foto je Punkt), die
   Zeichenfläche der Skizze (4:3, weiß wie das Bild, das daraus wird) und ein Punkt, der vor der Unterschrift noch fehlt. */
.m-pruefpunkt { border: 0; margin: 0; padding: 14px 0; border-top: 1px solid var(--n-linie); min-width: 0; }
.m-pruefpunkt:first-of-type { border-top: 0; padding-top: 4px; }
.m-pruefpunkt legend { padding: 0; font-size: 16px; font-weight: 800; color: var(--n-text); float: left; width: 100%; }
.m-pruefpunkt legend + * { clear: both; }
.m-pruefpunkt[data-offen] { box-shadow: inset 4px 0 0 var(--b-punkt-gelb); padding-left: 14px; }
.m-pruefpunkt .m-stufen { margin-top: 10px; }
.m-pruef-foto { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 10px; }
.m-pruef-foto img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; border: 1px solid var(--n-rand); }
.m-pruef-foto img[hidden] + .m-datei { grid-column: 1 / 3; }
.m-pruef-foto .m-hell { min-height: 48px; }
.m-skizze { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; background: #FFFFFF; border: 2px solid var(--n-feld-rand); touch-action: none; }
.m-skizze canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-skizze span { position: absolute; left: 18px; bottom: 14px; font-size: 13px; font-weight: 700; color: #5C6974; pointer-events: none; }
.m-skizze.hat-strich span { display: none; }