/* Farbprofil „Sand & Terrakotta“ (DESIGN.md, Entscheidung 2) */
:root {
  --bg: #f4efe6; --karte: #fffdf9; --text: #2b2620; --leise: #685e52; --linie: #ece4d7;
  --flaeche: #ebe3d5; --rand: #d9cebd; --dunkel: #3a322a;
  --akzent: #a65a36; --akzent-text: #fff;
  --gruen: #3f6a37; --gruen-hell: #e6eedf;
  --warn: #8a4f16; --warn-hell: #f5e6d3; --hinweis: #f8eee0; --hinweis-rand: #ead8bf;
  --rot: #a33d31; --rot-hell: #f6e3de;
  --schatten: rgba(80, 55, 30, .07);

  /* Sichere Bereiche (Notch/Dynamic Island, Home-Leiste, Querformat-Ränder).
     Alle Abstände laufen über diese Variablen; Tests überschreiben sie mit iPhone-Werten. */
  --sicher-oben: env(safe-area-inset-top, 0px);
  --sicher-unten: env(safe-area-inset-bottom, 0px);
  --sicher-links: env(safe-area-inset-left, 0px);
  --sicher-rechts: env(safe-area-inset-right, 0px);
  --rand-seite: 16px;
  --tastflaeche: 44px; /* Mindestgröße für Fingertipp (Apple-Richtlinie) */
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
h1 { font-size: 24px; margin: 0; }
h2 { font-size: 18px; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.leise { color: var(--leise); font-size: 15px; }

.seite, .anmeldung {
  margin: 0 auto;
  padding-top: calc(20px + var(--sicher-oben));
  padding-bottom: calc(40px + var(--sicher-unten));
  padding-left: max(var(--rand-seite), var(--sicher-links));
  padding-right: max(var(--rand-seite), var(--sicher-rechts));
}
.seite { max-width: 720px; }
.anmeldung { max-width: 440px; padding-top: calc(14vh + var(--sicher-oben)); }
.anmeldung h1 { font-size: 28px; }
.anmeldung .karte { margin-top: 18px; display: grid; gap: 8px; }

.kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.kopf h1 { overflow-wrap: anywhere; }
.karte { background: var(--karte); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 2px var(--schatten); }
.hinweis { background: var(--hinweis); border: 1px solid var(--hinweis-rand); border-radius: 14px; padding: 12px 14px; font-size: 15px; margin: 0 0 14px; }

label { font-weight: 600; font-size: 15px; }
/* ≥ 16px verhindert, dass Safari beim Antippen in das Feld hineinzoomt */
input { font: inherit; font-size: max(16px, 1em); min-height: var(--tastflaeche); padding: 12px 14px; border: 1px solid var(--rand); border-radius: 12px; background: #fff; color: var(--text); }
input:focus-visible, button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
h2 input { padding: 8px 10px; font-size: 16px; }
.fehler { color: var(--rot); background: var(--rot-hell); border-radius: 10px; padding: 10px 12px; margin: 4px 0; font-size: 15px; }

.knopf {
  min-height: var(--tastflaeche); border: 0; border-radius: 14px; padding: 14px 16px;
  font: inherit; font-weight: 700; background: var(--akzent); color: var(--akzent-text);
  cursor: pointer; margin-top: 8px; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
a.knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.knopf.zweit { background: var(--flaeche); color: var(--text); }
.knopf.klein { padding: 10px 14px; margin: 0; font-size: 15px; }
.knopf:disabled { opacity: .6; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 8px; }
.knopfreihe .knopf { flex: 1 1 160px; }

.zeile { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linie); }
.zeile:first-child { border-top: 0; padding-top: 0; }
.zeile .wer { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.zeile small { display: block; color: var(--leise); font-size: 14px; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--rand); flex: none; }
.punkt.an { background: var(--gruen); }
.marke { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--flaeche); color: var(--leise); white-space: nowrap; }
.marke.warn { background: var(--warn-hell); color: var(--warn); }
.marke.gut { background: var(--gruen-hell); color: var(--gruen); }
.vorschau { width: 72px; height: 48px; border-radius: 8px; object-fit: cover; background: var(--flaeche); flex: none; }

/* Offline-Seite */
.offline { text-align: center; }
.offline .symbol { width: 96px; height: 96px; border-radius: 22%; margin: 0 auto 16px; display: block; }

/* ---------------------------------------------------------------- App-Gerüst (Variante A „Karten“) */
:root { --tabhoehe: 62px; }
#app .seite { padding-bottom: calc(var(--tabhoehe) + 24px + var(--sicher-unten)); }
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center;
  background: var(--karte); border-top: 1px solid var(--linie);
  padding: 8px max(4px, var(--sicher-rechts)) max(10px, var(--sicher-unten)) max(4px, var(--sicher-links));
}
.tabs a {
  flex: 1; max-width: 140px; min-height: var(--tastflaeche); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-size: 11px; letter-spacing: -.2px; color: var(--leise);
  text-decoration: none; font-weight: 600; position: relative; -webkit-user-select: none; user-select: none;
}
.tabs a[aria-current="page"] { color: var(--akzent); }
.tabs .ico { width: 26px; height: 26px; }
.badge { position: absolute; top: -2px; left: calc(50% + 6px); background: var(--rot); color: #fff; font-size: 11px;
         border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
.ico { width: 22px; height: 22px; flex: none; }

.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kachel { background: var(--karte); border-radius: 16px; padding: 14px 16px; box-shadow: 0 1px 2px var(--schatten); }
.kachel b { display: block; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kachel span { color: var(--leise); font-size: 15px; }
.kachel.gruen b { color: var(--gruen); }
.kachel.warn b { color: var(--warn); }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 4px 10px;
        border-radius: 999px; background: var(--flaeche); color: var(--leise); white-space: nowrap; }
.pill.gut { background: var(--gruen-hell); color: var(--gruen); }
.pill.warn { background: var(--warn-hell); color: var(--warn); }
.marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.ava { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff;
       font-weight: 700; flex: none; font-size: 16px; background: var(--c, #6b6b6b); }
.ava.gross { width: 58px; height: 58px; font-size: 20px; }
.jetztda { display: flex; flex-wrap: wrap; gap: 14px; }
.jetztda div { text-align: center; font-size: 14px; width: 84px; overflow-wrap: anywhere; }
.jetztda .ava { width: 56px; height: 56px; font-size: 19px; margin-bottom: 4px; box-shadow: 0 0 0 3px var(--karte), 0 0 0 5px var(--gruen); }
.jetztda small { display: block; color: var(--leise); }
.zeit { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeit b { display: block; }
.zeit small { color: var(--leise); font-size: 14px; }

.suche { display: flex; align-items: center; gap: 10px; background: var(--karte); border-radius: 14px; padding: 0 14px;
         color: var(--leise); margin-bottom: 12px; border: 1px solid var(--rand); }
.suche input { border: 0; flex: 1; background: transparent; padding: 12px 0; min-width: 0; }
.suche input:focus-visible { outline: none; }
.suche:focus-within { outline: 3px solid var(--akzent); outline-offset: 2px; }
a.karte { display: block; color: inherit; text-decoration: none; }
.person-kopf { display: flex; gap: 12px; align-items: center; }
.person-kopf .wer { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.person-kopf b { display: block; font-size: 18px; }
.person-kopf small { color: var(--leise); font-size: 14px; }
.warnzeile { margin-top: 10px; font-size: 14px; color: var(--warn); font-weight: 600; }
.fotos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.fotos > * { aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 0; padding: 0; background: var(--flaeche); }
.fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos .leer { border: 2px dashed var(--rand); background: none; display: grid; place-items: center; color: var(--leise);
               cursor: pointer; font-size: 28px; font-weight: 300; }
.fotos .leer:focus-within { outline: 3px solid var(--akzent); outline-offset: 2px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.knoepfe .knopf { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.knopf.gefahr { background: var(--rot-hell); color: var(--rot); }
.knopf.voll { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
.formular { display: grid; gap: 8px; }
.formular .knopf { margin-top: 12px; }
.feldhinweis { font-size: 14px; color: var(--leise); margin: -2px 0 4px; }
.erfolg { color: var(--gruen); background: var(--gruen-hell); border-radius: 10px; padding: 10px 12px; font-size: 15px; margin: 8px 0 0; }
.beleg { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--leise); margin-top: 12px; }
.beleg img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tastflaeche); color: var(--akzent);
           font-weight: 600; text-decoration: none; margin: -8px 0 4px; }
.protokoll .zeile small { white-space: normal; }
input[type=number] { width: 110px; }

.abschnitt { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--leise); margin: 22px 4px 10px; }
a.kachel { color: inherit; text-decoration: none; display: block; }
.mt { margin-top: 12px; }
.formular > * { min-width: 0; }
.formular input:not([type=file]):not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; }

/* ---------------------------------------------------------------- Phase 2: Prüfliste (Entscheidung 4, Variante A „Einzeln“) */
.mitte { text-align: center; justify-content: center; }
select { font: inherit; font-size: max(16px, 1em); min-height: var(--tastflaeche); padding: 10px 12px; border: 1px solid var(--rand);
         border-radius: 12px; background: #fff; color: var(--text); width: 100%; }
.knoepfe .knopf.gefahr:last-child:nth-child(odd) { grid-column: 1 / -1; }

.fortschritt { display: flex; align-items: center; gap: 6px; margin: -4px 0 12px; }
.fortschritt i { width: 26px; height: 6px; border-radius: 3px; background: var(--rand); }
.fortschritt i.an { background: var(--akzent); }
.fallnr { font-size: 14px; margin: -4px 0 10px; }
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vergleich figure { margin: 0; text-align: center; font-size: 14px; color: var(--leise); min-width: 0; }
.vergleich img, .vergleich .platz { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px;
                                    background: var(--flaeche); margin-bottom: 6px; }
.vergleich .platz { display: grid; place-items: center; font-size: 40px; color: var(--leise); }
.vergleich figcaption b { display: block; color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.frage { font-size: 21px; font-weight: 700; text-align: center; margin: 16px 0 4px; overflow-wrap: anywhere; }
.stapel { display: grid; gap: 10px; margin-top: 14px; }
.stapel .knopf { margin: 0; padding: 17px; font-size: 18px; }
.auswahl-titel { text-align: center; font-size: 17px; }
.personwahl { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--rand);
              border-radius: 14px; background: #fff; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.personwahl span:last-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.personwahl b { display: block; }
.personwahl small { color: var(--leise); font-size: 14px; }
.personwahl:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.fertig { text-align: center; padding: 28px 16px; }
.fertig .haken { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen);
                 display: grid; place-items: center; font-size: 34px; font-weight: 700; }
.fertig b { font-size: 19px; }

/* „Kommen & Gehen“: Zeile antippen → Korrektur */
button.zeile.tippbar { width: 100%; background: none; border: 0; border-top: 1px solid var(--linie); font: inherit; color: inherit;
                       text-align: left; cursor: pointer; min-height: var(--tastflaeche); }
button.zeile.tippbar:first-child { border-top: 0; }
button.zeile.tippbar:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 8px; }
.meldung:not([hidden]) { margin: 6px 0 0; }

/* ---------------------------------------------------------------- Korrektur-Blatt (von unten) mit Tagesbalken aus Variante C */
dialog.blatt {
  margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 24px - var(--sicher-oben)); overflow-y: auto;
  border: 0; border-radius: 22px 22px 0 0; background: var(--karte); color: var(--text); box-shadow: 0 -6px 24px rgba(0, 0, 0, .2);
  padding: 10px max(18px, var(--sicher-rechts)) calc(24px + var(--sicher-unten)) max(18px, var(--sicher-links));
  overscroll-behavior: contain;
}
dialog.blatt::backdrop { background: rgba(43, 38, 32, .45); }
@media (min-width: 760px) { dialog.blatt { max-width: 640px; margin: auto auto 0; } }
.griff { width: 40px; height: 5px; border-radius: 3px; background: var(--rand); margin: 0 auto 12px; }
dialog.blatt h2 { font-size: 20px; margin: 0 0 2px; outline: none; }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 4px; }
.felder > div { display: grid; gap: 4px; min-width: 0; }
.felder input { width: 100%; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

.balken { margin-top: 14px; }
.achse { position: relative; height: 16px; font-size: 12px; color: var(--leise); margin: 0 8px 2px; }
.achse span { position: absolute; transform: translateX(-50%); }
.bahn { position: relative; height: 38px; border-radius: 8px; background: var(--flaeche); margin: 0 8px; }
.bahn .anw { position: absolute; top: 13px; height: 12px; border-radius: 6px; background: #3f6a3755; }
.bahn .luecke { position: absolute; top: 13px; height: 12px; background: repeating-linear-gradient(135deg, #fffdf9 0 3px, #d9cebd 3px 6px); }
.bahn .pause { position: absolute; top: 11px; height: 16px; border-radius: 4px; background: var(--akzent); opacity: .85; }
.bahn .p { position: absolute; top: 11px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--gruen);
           border: 2px solid var(--karte); }
.bahn a.p.u { top: -3px; width: 44px; height: 44px; margin-left: -22px; background: transparent; border: 0; display: grid; place-items: center; }
.bahn a.p.u::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--karte); border: 3px solid var(--warn);
                     box-sizing: border-box; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--leise); margin: 6px 8px 0; }
.legende span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.legende .l-p::before { background: var(--gruen); }
.legende .l-u::before { border: 2px solid var(--warn); box-sizing: border-box; }
.legende .l-luecke::before { border-radius: 2px; background: repeating-linear-gradient(135deg, #fffdf9 0 2px, #b9ad9a 2px 4px); }
.legende .l-pause::before { border-radius: 2px; background: var(--akzent); }

.summe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.summe .wert { border: 1px solid var(--rand); border-radius: 12px; padding: 6px 12px; font-weight: 700; font-variant-numeric: tabular-nums;
               background: #fff; min-width: 70px; }
.summe .wert small { display: block; font-size: 12px; font-weight: 500; color: var(--leise); }
.summe .wert.edit { border-color: var(--akzent); box-shadow: 0 0 0 2px #a65a3633; }
.summe .wert.stunden { background: var(--gruen-hell); border-color: transparent; color: var(--gruen); }
.vorher { font-size: 14px; color: var(--leise); margin: 6px 0 0; }
.pausenkopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.pausen { display: grid; gap: 8px; }
.pausezeile { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
.pausezeile input { width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.pausezeile .knopf { min-width: var(--tastflaeche); }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tastflaeche);
            padding: 8px 0; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); margin: 8px 0; font-weight: 600; }
.schalter input { -webkit-appearance: none; appearance: none; width: 51px; height: 31px; border-radius: 16px; background: var(--rand);
                  position: relative; flex: none; margin: 0; padding: 0; min-height: 0; border: 0; cursor: pointer; transition: background .15s; }
.schalter input::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%;
                         background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.schalter input:checked { background: var(--akzent); }
.schalter input:checked::after { transform: translateX(20px); }
.schalter input:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.verlauf { margin-top: 12px; font-size: 14px; color: var(--leise); }
.verlauf summary { min-height: var(--tastflaeche); display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--text); }
.verlauf p { margin: 4px 0; }
dialog.blatt .knoepfe .knopf { margin: 0; }

/* ---------------------------------------------------------------- Phase 3: Fortschritt (Variante A, Mockup a-farbe-1-sand) */
.segment { display: flex; background: var(--flaeche); border-radius: 12px; padding: 4px; margin: 0 0 10px; }
.segment a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--tastflaeche);
             font-weight: 600; border-radius: 9px; color: var(--leise); text-decoration: none; }
.segment a.an { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.blaettern { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.blaettern b { flex: 1; text-align: center; font-size: 16px; }
.blaettern .knopf { min-width: var(--tastflaeche); font-size: 22px; line-height: 1; padding: 8px 14px; }
.knopf.aus { opacity: .35; pointer-events: none; }
.punkte { margin: 8px 0 0; padding-left: 20px; }
.punkte li { margin-bottom: 4px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chips button { min-height: var(--tastflaeche); border: 1px solid var(--rand); background: var(--karte); border-radius: 999px;
                padding: 8px 14px; font: inherit; font-size: 15px; font-weight: 600; color: var(--leise); cursor: pointer; }
.chips button.an { background: var(--dunkel); border-color: var(--dunkel); color: var(--karte); }
.chips button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
.vg { position: relative; overflow: hidden; aspect-ratio: 16 / 9; --pos: 50%; user-select: none; -webkit-user-select: none;
      border-radius: 12px; background: var(--flaeche); touch-action: pan-y; }
.vg-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-vorher { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vg-linie { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff;
            box-shadow: 0 0 4px rgba(0, 0, 0, .5); pointer-events: none; }
.vg-linie::after { content: "◀ ▶"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px;
                   border-radius: 50%; background: #fff; color: #333; display: grid; place-items: center; font-size: 11px;
                   letter-spacing: -1px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.vg input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.vg-label { position: absolute; top: 8px; padding: 4px 9px; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff;
            font-size: 13px; font-weight: 600; pointer-events: none; }
.vg-label.links { left: 8px; }
.vg-label.rechts { right: 8px; }
.bildkarte { padding: 0; overflow: hidden; }
.bildkarte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--flaeche); }
.bildkarte .unter { padding: 12px 16px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--leise); }
.bildkarte .unter b { color: var(--text); }
.galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galerie a { font-size: 13px; color: var(--leise); text-align: center; text-decoration: none; min-width: 0; }
.galerie img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 3px; background: var(--flaeche); }
.galerie a.aktuell img { outline: 3px solid var(--akzent); outline-offset: -3px; }
input[type=range] { min-height: var(--tastflaeche); accent-color: var(--akzent); width: 100%; padding: 0; border: 0; background: none; }
dialog.zeitraffer { width: min(100%, 900px); max-width: 100%; max-height: 100dvh; margin: auto; border: 0; border-radius: 18px;
                    background: var(--karte); color: var(--text); overflow-y: auto;
                    padding: calc(14px + var(--sicher-oben)) max(14px, var(--sicher-rechts)) calc(14px + var(--sicher-unten)) max(14px, var(--sicher-links)); }
dialog.zeitraffer::backdrop { background: rgba(20, 16, 12, .8); }
dialog.zeitraffer h2 { outline: none; }
dialog.zeitraffer img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--flaeche); }
.zr-zeile { display: flex; justify-content: space-between; margin: 10px 2px 0; font-variant-numeric: tabular-nums; }
dialog.zeitraffer .knoepfe .knopf { margin: 0; }

/* Person anlegen: Art der Erfassung */
.wahl-erfassung { border: 0; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; min-width: 0; }
.wahl-erfassung legend { font-weight: 600; font-size: 15px; margin-bottom: 6px; padding: 0; }
.wahlkarte { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--rand); border-radius: 14px;
             background: #fff; cursor: pointer; font-weight: 400; min-height: var(--tastflaeche); }
.wahlkarte:has(input:checked) { border-color: var(--akzent); box-shadow: 0 0 0 2px #a65a3633; }
.wahlkarte input { width: 22px; height: 22px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--akzent); flex: none; }
.wahlkarte b { display: block; font-size: 16px; }
.wahlkarte small { color: var(--leise); font-size: 14px; }
.hinweis a { color: var(--akzent); font-weight: 600; }

/* ---------------------------------------------------------------- Phase 4: Woche/Monat, Export, PC-Ansicht (Entscheidung 5, Variante C) */
/* iPhone: Export als eigene Zeile unter dem Titel, kurze Beschriftung; PC: oben rechts (siehe unten) */
#uebersicht > .kopf { flex-wrap: wrap; }
.kopf .export { display: flex; gap: 8px; width: 100%; }
.kopf .export .knopf { flex: 1; }
.kopf .export .lang { display: none; }
.kopf .export .knopf { margin: 0; padding: 10px 14px; gap: 6px; font-size: 15px; }
.kopf .export .ico { width: 18px; height: 18px; }
.tabs .marke { display: none; }
#zeitraum-wahl { margin-bottom: 14px; }
.mehr { font-size: 14px; font-weight: 600; color: var(--akzent); text-decoration: none; min-height: var(--tastflaeche); display: inline-flex; align-items: center; }
#karte-hausbild a { display: block; }
.tabellenrahmen { overflow-x: auto; margin: 0 -16px; padding: 0 16px; -webkit-overflow-scrolling: touch; }
table.stunden { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; min-width: 100%; }
table.stunden th, table.stunden td { padding: 6px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap; text-align: left; }
table.stunden thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--leise); font-weight: 600; }
table.stunden thead th a { color: var(--akzent); text-decoration: none; display: inline-flex; min-height: var(--tastflaeche); align-items: center; }
table.stunden .zahl { text-align: right; }
table.stunden .zukunft, table.stunden .leer { color: var(--rand); }
table.stunden tbody th { position: sticky; left: 0; background: var(--karte); z-index: 1; font-weight: 400;
                         white-space: normal; min-width: 150px; max-width: 210px; }
table.stunden tbody th .ava { width: 36px; height: 36px; font-size: 13px; }
table.stunden tbody th small { display: block; color: var(--leise); font-size: 12px; }
table.stunden td.summe { font-weight: 700; }
table.stunden tfoot th, table.stunden tfoot td { font-weight: 700; border-top: 2px solid var(--rand); border-bottom: 0; position: static; }
table.stunden tfoot th { position: sticky; left: 0; background: var(--karte); }
.zellknopf { min-height: var(--tastflaeche); min-width: 64px; border: 0; background: none; font: inherit; color: var(--text);
             text-align: right; border-radius: 8px; padding: 0 6px; cursor: pointer; font-variant-numeric: tabular-nums; }
.zellknopf:hover { background: var(--flaeche); }
.zellknopf.leer { color: var(--rand); }
.zellknopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: -2px; }
.personen-raster { display: block; }

@media (min-width: 1024px) {
  /* Tabs oben rechts als Leiste, Marke links (Mockup pc-c-breit.html) */
  #app { display: flex; flex-direction: column; }
  .tabs { order: -1; position: sticky; top: 0; bottom: auto; justify-content: flex-end; gap: 4px; border-top: 0;
          border-bottom: 1px solid var(--linie); background: var(--bg);
          padding: 10px max(24px, calc((100vw - 1180px) / 2)) 10px; z-index: 20; }
  .tabs a { flex: none; max-width: none; flex-direction: row; gap: 8px; font-size: 15px; padding: 8px 14px; border-radius: 10px; }
  .tabs a[aria-current="page"] { background: var(--hinweis); }
  .tabs .ico { width: 22px; height: 22px; }
  .tabs .badge { position: static; margin-left: 2px; }
  .tabs .marke { display: flex; margin-right: auto; color: var(--text); font-weight: 800; font-size: 17px; padding-left: 0; background: none; }
  .kopf .export { width: auto; }
  .kopf .export .knopf { flex: none; }
  .kopf .export .lang { display: inline; }
  .kopf .export .kurz { display: none; }
  .tabs .marke img { width: 34px; height: 34px; border-radius: 8px; }
  #app .seite { max-width: 1180px; width: 100%; padding: 22px max(24px, var(--sicher-rechts)) 40px max(24px, var(--sicher-links)); }
  .kacheln { grid-template-columns: repeat(4, 1fr); }
  .spalten { columns: 3 320px; column-gap: 14px; }
  .spalten > * { break-inside: avoid; display: block; }
  .spalten > [hidden] { display: none; }
  .personen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 14px; }
  [data-ansicht="fortschritt"], [data-ansicht="pruefliste"] { max-width: 760px !important; }
  [data-ansicht="personen"] > .karte, [data-ansicht="personen"] > form, [data-ansicht="personen"] > .hinweis { max-width: 720px; }
  [data-ansicht="einstellungen"] { columns: 2 420px; column-gap: 14px; }
  [data-ansicht="einstellungen"] > * { break-inside: avoid; }
  [data-ansicht="einstellungen"] > h1 { column-span: all; margin-bottom: 14px; }
  #zeitraum-wahl { max-width: 420px; }
  .kopf { align-items: center; }
  dialog.blatt { margin: auto; border-radius: 22px; max-height: 90vh; }
}

/* ---------------------------------------------------------------- Phase 5: Diebstahlwarnung (Entscheidung 6, Variante C) */
#app[data-bereich="alarm"] .tabs { display: none; }
.alarmseite { min-height: 100vh; min-height: 100dvh; background: #1f1915; color: #fff; display: flex; flex-direction: column; gap: 14px;
              padding: calc(16px + var(--sicher-oben)) max(16px, var(--sicher-rechts)) calc(24px + var(--sicher-unten)) max(16px, var(--sicher-links));
              max-width: 720px; margin: 0 auto; }
.alarmseite .schliessen { align-self: flex-end; color: #c9bfb2; text-decoration: none; font-size: 22px; min-width: var(--tastflaeche);
                          min-height: var(--tastflaeche); display: grid; place-items: center; margin: -8px -8px -6px 0; }
.alarmseite .band { background: #a33d31; border-radius: 14px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; }
.alarmseite .band.erledigt { background: #3f6a37; }
.alarmseite .band b { display: block; font-size: 19px; }
.alarmseite .band small { opacity: .9; font-size: 14px; }
.alarmseite .band .ico { width: 30px; height: 30px; }
.alarmbild { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.alarmbild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.alarmbild.leer { display: grid; place-items: center; color: #c9bfb2; padding: 20px; text-align: center; }
.alarmbild .zeitstempel { position: absolute; left: 8px; bottom: 8px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 13px;
                          font-weight: 600; padding: 4px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.alarmbild .blaetter { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%;
                       border: 0; background: rgba(0, 0, 0, .55); color: #fff; font-size: 26px; cursor: pointer; }
.alarmbild .blaetter.links { left: 8px; } .alarmbild .blaetter.rechts { right: 8px; }
.alarmbild .blaetter:disabled { opacity: .25; }
.alarmseite .knopf { margin: 0; padding: 18px; font-size: 18px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.alarmseite .knopf.rotvoll { background: #d14a3b; color: #fff; }
.alarmseite .knopf.weiss { background: #fffdf9; color: #2b2620; }
.alarmseite .hinweis-klein { color: #c9bfb2; font-size: 14px; text-align: center; margin: 0; }
.alarmseite .meldung { color: #ffd2cc; text-align: center; }
.warnkarte { border: 2px solid var(--rot); background: var(--rot-hell); color: var(--rot); gap: 12px; padding: 12px 14px; }
.warnkarte .ico { width: 28px; height: 28px; }
.warnkarte b { color: var(--rot); }
.warnkarte .knopf { background: var(--rot); margin: 0; }
.tageszeiten { display: grid; gap: 4px; margin-top: 8px; }
.tageszeile { display: grid; grid-template-columns: 1fr minmax(0, 1.2fr) auto minmax(0, 1.2fr); gap: 8px; align-items: center; }
.tageszeile .schalter { border: 0; margin: 0; padding: 0; }
.tageszeile input[type=time] { width: 100%; min-width: 0; }
.ausnahme { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--warn-hell);
            border-radius: 12px; padding: 8px 8px 8px 12px; margin-bottom: 8px; font-size: 15px; }
.ausnahmezeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 8px; }
.ausnahmezeile .knopf { margin: 0; }
#warnverlauf a.zeile { color: inherit; text-decoration: none; min-height: var(--tastflaeche); }
#arbeitszeit .knopf, #ausnahmen .knopf { margin-top: 10px; }