/* Dienstplan - Corporate Design "Modernist", Service Ternowski
   Schrift: Archivo (SIL Open Font License, siehe schrift/OFL.txt), lokal
   eingebunden - kein Abruf bei Dritten. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/schrift/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/schrift/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Hausfarben: die drei Punkte des Signets */
  --tinte: #1d1d1b;
  --rot:   #e4322a;
  --gelb:  #ffc800;

  --grund: #f2f2f0;
  --flaeche: #ffffff;
  --flaeche-leise: #f7f7f5;
  --rand: #e0e0db;
  --rand-stark: var(--tinte);
  --text: var(--tinte);
  --text-leise: #6b6b66;

  /* Schwarz ist die Hauptfarbe - Rot und Gelb bleiben Signalfarben. */
  --akzent: var(--tinte);
  --akzent-hell: #ececeA;
  --akzent-text: #ffffff;

  --ok-rand: var(--tinte);       --ok-grund: #ececea;
  --warn-rand: #8a6a00;          --warn-grund: #fff6d9;
  --fehler-rand: #c2241c;        --fehler-grund: #fdeceb;

  --schatten: 0 1px 2px rgba(29, 29, 27, .07);
  --radius: 3px;
  color-scheme: light;
}

/* Dunkel kommt vom Gerät -- ausser der Mitarbeiter hat in seinem Konto
   eine Fassung fest gewählt. Die beiden Blöcke müssen deckungsgleich
   bleiben; tests/test_app.py prüft das. */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) {
    --grund: #131312;
    --flaeche: #1c1c1a;
    --flaeche-leise: #232320;
    --rand: #35352f;
    --rand-stark: #f2f2ee;
    --text: #f2f2ee;
    --text-leise: #a3a39b;

    --akzent: #f2f2ee;
    --akzent-hell: #2b2b26;
    --akzent-text: #1d1d1b;

    --ok-rand: #f2f2ee;   --ok-grund: #2b2b26;
    --warn-rand: var(--gelb); --warn-grund: #332b0d;
    --fehler-rand: #f2685f;   --fehler-grund: #36191a;

    --schatten: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

:root[data-thema="dunkel"] {
    --grund: #131312;
    --flaeche: #1c1c1a;
    --flaeche-leise: #232320;
    --rand: #35352f;
    --rand-stark: #f2f2ee;
    --text: #f2f2ee;
    --text-leise: #a3a39b;

    --akzent: #f2f2ee;
    --akzent-hell: #2b2b26;
    --akzent-text: #1d1d1b;

    --ok-rand: #f2f2ee;   --ok-grund: #2b2b26;
    --warn-rand: var(--gelb); --warn-grund: #332b0d;
    --fehler-rand: #f2685f;   --fehler-grund: #36191a;

    --schatten: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }


* { box-sizing: border-box; }

/* Muss dem Autorenstil vorgehen: sonst gewinnt z. B. .feld-paar{display:flex}
   gegen das hidden-Attribut und versteckte Felder bleiben sichtbar. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 16px/1.55 "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", sans-serif;
  font-synthesis-weight: none;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--akzent); }

/* --- Kopf und Navigation --- */

.kopf {
  position: sticky; top: 0; z-index: 10;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  padding-top: env(safe-area-inset-top);
}

.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px 8px;
  max-width: 900px; margin: 0 auto;
}

.marke { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--text); }

/* Zurück-Knopf: nur in der installierten App (kein Browser-Zurück auf dem
   iPhone), app.js blendet ihn dort ein. Auf der Startseite gibt es ihn nicht. */
.knopf-zurueck {
  flex: none; width: 40px; height: 40px; margin-left: -8px;
  border: 1px solid var(--rand); border-radius: 50%; background: var(--flaeche, #fff);
  color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.knopf-zurueck[hidden] { display: none; }

.navi {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  padding: 0 12px 8px; max-width: 900px; margin: 0 auto;
}
.navi::-webkit-scrollbar { display: none; }

.navi a {
  flex: 0 0 auto;
  padding: 8px 14px; border-radius: 999px;
  color: var(--text-leise); text-decoration: none; font-size: .92rem; font-weight: 500;
  white-space: nowrap;
}
.navi a:hover { background: var(--flaeche-leise); color: var(--text); }
.navi a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

.inhalt {
  max-width: 900px; margin: 0 auto;
  padding: 16px 16px calc(40px + env(safe-area-inset-bottom));
}

/* --- Seitenkopf --- */

.seiten-kopf {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 4px 0 16px;
}
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.unterzeile { margin: 4px 0 0; color: var(--text-leise); font-size: .92rem; }

/* --- Karten und Formulare --- */

.karte {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 16px; margin-bottom: 16px; box-shadow: var(--schatten);
}
.karte-inaktiv { opacity: .62; }

.formular { display: flex; flex-direction: column; }
.formular label { font-size: .88rem; font-weight: 600; margin: 14px 0 6px; }
.formular label:first-of-type { margin-top: 0; }
.optional { font-weight: 400; color: var(--text-leise); }

input[type=text], input[type=password], input[type=date], input[type=time],
input:not([type]), select {
  width: 100%; padding: 11px 12px; font-size: 16px; font-family: inherit;
  color: var(--text); background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: 9px;
  min-height: 44px;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

.feld-paar { display: flex; gap: 12px; }
.feld-paar > div { flex: 1; }
.feld-paar label { display: block; margin-top: 14px; }

.feld-hinweis { margin: 6px 0 0; font-size: .82rem; color: var(--text-leise); }
.ankreuz {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400 !important; font-size: .9rem; margin-top: 14px !important;
}
.ankreuz input { width: auto; min-height: 0; margin-top: 3px; }

/* --- Knöpfe --- */

.knopf {
  display: inline-block; padding: 11px 18px; min-height: 44px;
  background: var(--akzent); color: var(--akzent-text);
  border: 1px solid transparent; border-radius: 9px;
  font: inherit; font-weight: 600; text-decoration: none; text-align: center;
  cursor: pointer;
}
.knopf:hover { filter: brightness(1.08); }
.knopf-voll { width: 100%; margin-top: 20px; }
.knopf-reihe { display: flex; gap: 10px; margin-top: 20px; }

.knopf-schlicht {
  display: inline-block; padding: 9px 14px; min-height: 40px;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 9px;
  font: inherit; font-size: .9rem; font-weight: 500; text-decoration: none; text-align: center;
  cursor: pointer;
}
.knopf-schlicht:hover { background: var(--flaeche-leise); }

.knopf-gefahr {
  padding: 9px 14px; min-height: 40px; margin-top: 12px;
  background: transparent; color: var(--fehler-rand);
  border: 1px solid var(--fehler-rand); border-radius: 9px;
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
}
.knopf-gefahr:hover { background: var(--fehler-grund); }
.gefahr-form { margin-top: 4px; }

/* --- Hinweise --- */

.hinweis {
  padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
  border: 1px solid var(--ok-rand); background: var(--ok-grund);
  font-size: .93rem;
}
.hinweis-warnung { border-color: var(--warn-rand); background: var(--warn-grund); }
.hinweis-fehler  { border-color: var(--fehler-rand); background: var(--fehler-grund); }
.hinweis-passwort {
  border-color: var(--akzent); background: var(--akzent-hell);
}
.passwort-text {
  margin: 6px 0 0; font-size: .95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-word;
}

/* --- Tage und Schichten --- */

.tag { margin-bottom: 22px; }

.tag-kopf {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 0 2px;
  font-size: .9rem; font-weight: 600;
}
.tag-wochentag { color: var(--text); }
.tag-datum { color: var(--text-leise); font-weight: 500; }
.tag-leer { margin: 0 0 4px; padding: 10px 2px; color: var(--text-leise); font-size: .88rem; }

.tag-plus {
  margin-left: auto; width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--rand); border-radius: 8px;
  color: var(--akzent); text-decoration: none; font-size: 1.2rem; line-height: 1;
  background: var(--flaeche);
}
.tag-plus:hover { background: var(--akzent-hell); }

.schicht {
  display: block;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 8px;
  box-shadow: var(--schatten);
  color: inherit; text-decoration: none;
}
.schicht-klickbar:hover { background: var(--flaeche-leise); }
.schicht-heute { border-left-color: var(--ok-rand); }

.schicht-zeit {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.zeit {
  font-size: 1.28rem; font-weight: 700; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.bis { padding: 0 3px; color: var(--text-leise); font-weight: 400; }
.zeit-dauer { font-size: .84rem; color: var(--text-leise); }

.schicht-ort { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.ort-name { font-weight: 600; font-size: 1rem; }
.ort-adresse { font-size: .88rem; color: var(--text-leise); }

.schicht-notiz {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--rand);
  font-size: .89rem; color: var(--text-leise);
}

/* --- Plaketten --- */

.plakette {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--ok-grund); color: var(--ok-rand);
  border: 1px solid var(--ok-rand);
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
}
.plakette-rolle { background: var(--akzent-hell); color: var(--akzent); border-color: var(--akzent); }
.plakette-warn  { background: var(--warn-grund); color: var(--warn-rand); border-color: var(--warn-rand); }
.plakette-aus   { background: var(--flaeche-leise); color: var(--text-leise); border-color: var(--rand); }

/* --- Umschalter, Wochennavigation, Filter --- */

.umschalter {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: 10px;
}
.umschalter a {
  flex: 1; padding: 9px 12px; border-radius: 7px;
  text-align: center; text-decoration: none; font-size: .92rem; font-weight: 500;
  color: var(--text-leise);
}
.umschalter a.aktiv { background: var(--flaeche); color: var(--text); font-weight: 600; box-shadow: var(--schatten); }

.wochen-navi { display: flex; gap: 8px; margin-bottom: 12px; }
.wochen-navi a { flex: 1; }

.filter { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.filter select { flex: 1 1 160px; font-size: .92rem; }

/* --- Listenzeilen (Mitarbeiter) --- */

.zeile {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--schatten);
}
.zeile-inaktiv { opacity: .62; }
.zeile-haupt { min-width: 200px; flex: 1; }
.zeile-titel { font-weight: 600; font-size: 1.02rem; text-decoration: none; color: var(--text); }
.zeile-titel:hover { color: var(--akzent); }
.zeile-neben {
  margin: 5px 0 0; font-size: .86rem; color: var(--text-leise);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.zeile-aktionen { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }

/* --- Leerzustand, Fußzeile, Anmeldung --- */

.leer {
  background: var(--flaeche); border: 1px dashed var(--rand); border-radius: var(--radius);
  padding: 32px 20px; text-align: center; color: var(--text-leise);
}
.leer-titel { margin: 0 0 6px; font-weight: 600; color: var(--text); }
.leer p { margin: 0; }

.fusszeile { margin-top: 20px; font-size: .84rem; color: var(--text-leise); text-align: center; }

.anmelde-karte {
  max-width: 380px; margin: 8vh auto 0;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 16px;
  padding: 28px 24px; box-shadow: var(--schatten);
}
.anmelde-karte h1 { text-align: center; }
.anmelde-karte .unterzeile { text-align: center; margin-bottom: 24px; }

.stammdaten { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.stammdaten dt { color: var(--text-leise); font-size: .88rem; }
.stammdaten dd { margin: 0; font-weight: 500; }

@media (min-width: 700px) {
  .zeit { font-size: 1.35rem; }
  .inhalt { padding-top: 24px; }
}

/* --- Planungsmatrix -------------------------------------------------------- */

/* Acht Farbtoene fuer Einsatzorte. Ein Ton je Ort, Hintergrund und Rand
   leiten sich daraus ab, damit hell und dunkel gleich gut lesbar bleiben. */
/* Klare Grundfarben, Blau/Rot/Gelb zuerst - die ersten Orte bekommen damit
   die Primaerfarben. Die Meldebaender heben sich durch Flaeche und Versalien
   ab, nicht allein durch die Farbe. */
.farbe-0 { --ton: 216 78% 46%; }   /* Blau     */
.farbe-1 { --ton:   2 70% 50%; }   /* Rot      */
.farbe-2 { --ton:  44 92% 46%; }   /* Gelb     */
.farbe-3 { --ton: 142 80% 30%; }   /* Gruen    */
.farbe-4 { --ton:  26 88% 47%; }   /* Orange   */
.farbe-5 { --ton: 268 62% 47%; }   /* Violett  */
.farbe-6 { --ton: 187 84% 33%; }   /* Tuerkis  */
.farbe-7 { --ton: 330 70% 46%; }   /* Pink     */

.matrix-leiste {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.matrix-leiste .filter { margin: 0; flex: 1 1 200px; }

.legende { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; }
.legende-punkt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .84rem; color: var(--text-leise);
}
.legende-punkt::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px;
  background: hsl(var(--ton)); flex: 0 0 auto;
}

.matrix-hilfe {
  margin: 0 0 14px; font-size: .85rem; color: var(--text-leise);
}
.matrix-hilfe kbd {
  padding: 1px 6px; border: 1px solid var(--rand); border-bottom-width: 2px;
  border-radius: 5px; background: var(--flaeche); font-size: .8em; font-family: inherit;
}

.matrix-huelle {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche);
}

.matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 880px; }

.matrix th, .matrix td {
  border-bottom: 1px solid var(--rand); border-right: 1px solid var(--rand);
  vertical-align: top; text-align: left;
}
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: none; }
.matrix th:last-child, .matrix td:last-child { border-right: none; }

.mx-ecke, .mx-person {
  position: sticky; left: 0; z-index: 2;
  width: 178px; min-width: 178px;
  background: var(--flaeche-leise);
  padding: 10px 12px; font-size: .88rem;
  box-shadow: 6px 0 8px -6px rgba(15, 23, 42, .22);
}
.mx-ecke { font-size: .78rem; color: var(--text-leise); font-weight: 600; letter-spacing: .03em;
           text-transform: uppercase; }
.mx-name { display: block; font-weight: 600; }
.mx-personsumme { display: block; margin-top: 3px; font-size: .8rem; color: var(--text-leise);
                  font-variant-numeric: tabular-nums; }

.mx-tag {
  padding: 9px 10px; min-width: 132px;
  background: var(--flaeche-leise); font-weight: 600;
}
.mx-wochentag { font-size: .88rem; }
.mx-datum { margin-left: 6px; font-size: .82rem; font-weight: 500; color: var(--text-leise); }
.mx-tagsumme { display: block; margin-top: 3px; font-size: .78rem; font-weight: 500;
               color: var(--text-leise); font-variant-numeric: tabular-nums; }
.matrix .mx-heute { background: var(--akzent-hell); }
.matrix th.mx-heute .mx-wochentag { color: var(--akzent); }

.mx-zelle { padding: 6px; min-width: 132px; height: 62px; position: relative; }
.mx-zelle.ziel {
  background: var(--akzent-hell);
  box-shadow: inset 0 0 0 2px var(--akzent);
}
.mx-zelle.ziel-verboten {
  background: var(--fehler-grund);
  box-shadow: inset 0 0 0 2px var(--fehler-rand);
}

.block {
  display: block; margin-bottom: 5px; padding: 6px 9px;
  border-radius: 8px; border-left: 3px solid hsl(var(--ton));
  background: hsl(var(--ton) / .13);
  color: var(--text); font-size: .8rem; line-height: 1.35;
  cursor: grab; touch-action: none; user-select: none;
}
.block:last-of-type { margin-bottom: 0; }
.block:hover { background: hsl(var(--ton) / .22); }
.block-zeit { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.block-ort { display: block; color: var(--text-leise); }
.block-notiz {
  display: block; margin-top: 2px; font-size: .92em; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.block.zieht { opacity: .3; }
.block-schwebt {
  position: fixed; z-index: 200; pointer-events: none;
  width: 132px; margin: 0; cursor: grabbing;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .28);
  transform: rotate(1.5deg);
  background: var(--flaeche);
}
.block-schwebt.kopiert { box-shadow: 0 8px 24px rgba(22, 121, 74, .4); }

.mx-plus {
  position: absolute; right: 5px; bottom: 5px;
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 6px; color: var(--text-leise); text-decoration: none;
  font-size: 1.05rem; line-height: 1; opacity: 0;
}
.mx-zelle:hover .mx-plus, .mx-plus:focus { opacity: 1; background: var(--flaeche-leise); color: var(--akzent); }

/* Dunkel kommt vom Gerät -- ausser der Mitarbeiter hat in seinem Konto
   eine Fassung fest gewählt. Die beiden Blöcke müssen deckungsgleich
   bleiben; tests/test_app.py prüft das. */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .block { background: hsl(var(--ton) / .26); }
:root:not([data-thema="hell"]) .block:hover { background: hsl(var(--ton) / .36); }
:root:not([data-thema="hell"]) .legende-punkt::before, :root:not([data-thema="hell"]) .block { border-color: hsl(var(--ton) / .9); }
}

:root[data-thema="dunkel"] .block { background: hsl(var(--ton) / .26); }
:root[data-thema="dunkel"] .block:hover { background: hsl(var(--ton) / .36); }
:root[data-thema="dunkel"] .legende-punkt::before, :root[data-thema="dunkel"] .block { border-color: hsl(var(--ton) / .9); }


/* --- Kurzmeldung (Toast) --------------------------------------------------- */

.melder {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 300;
  max-width: min(460px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: 10px;
  border: 1px solid var(--ok-rand); background: var(--ok-grund); color: var(--text);
  box-shadow: 0 6px 20px rgba(15, 23, 42, .2);
  font-size: .9rem;
}
.melder.fehler { border-color: var(--fehler-rand); background: var(--fehler-grund); }

/* --- Farbwahl im Ortsformular --------------------------------------------- */

.farbwahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.farbwahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.farbwahl label {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: hsl(var(--ton)); margin: 0 !important;
  box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 2px transparent;
}
.farbwahl input:checked + label { box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 4px var(--text); }
.farbwahl input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* --- Mein Plan am Telefon: ein Tag je Karte, seitlich durchwischen ---------- */

.streifen-hinweis { display: none; }
.streifen-punkte { display: none; }

@media (max-width: 700px) {
  .streifen-hinweis {
    display: block; margin: 0 0 10px;
    font-size: .82rem; color: var(--text-leise);
  }

  .tage-streifen {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    /* bis an den Bildschirmrand, damit die naechste Karte angeschnitten ist */
    margin: 0 -16px; padding: 2px 16px 6px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tage-streifen::-webkit-scrollbar { display: none; }

  .tage-streifen .tag {
    flex: 0 0 88%; min-width: 0; margin-bottom: 0;
    scroll-snap-align: start;
  }
  .tage-streifen .tag-kopf {
    position: sticky; left: 0;
    margin-bottom: 10px;
  }
  /* Innerhalb einer Tageskarte bleiben mehrere Schichten untereinander. */
  .tage-streifen .schicht { margin-bottom: 10px; }

  .streifen-punkte {
    display: flex; justify-content: center; gap: 7px; margin-top: 14px;
  }
  .streifen-punkt {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--rand); transition: background .15s, transform .15s;
  }
  .streifen-punkt.aktiv { background: var(--akzent); transform: scale(1.35); }

  /* Die Zeit darf auf schmalen Geraeten ruhig groesser sein. */
  .tage-streifen .zeit { font-size: 1.42rem; }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .tage-streifen { scroll-behavior: smooth; }
}

/* --- Meldungen: Sperrzeit, Krankmeldung, Wunschzeit ------------------------ */

.abschnitt { margin: 26px 0 12px; font-size: 1rem; }
.abschnitt .anzahl {
  margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--flaeche-leise); border: 1px solid var(--rand);
  font-size: .78rem; font-weight: 600; color: var(--text-leise);
}

/* Auswahl der Meldungsart: drei grosse, gut treffbare Flaechen */
.artwahl { display: grid; gap: 8px; }
.artwahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.artwahl label {
  display: block; margin: 0 !important; padding: 12px 14px;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--flaeche-leise); cursor: pointer;
  font-weight: 400 !important;
}
.artwahl input:checked + label {
  border-color: var(--akzent); background: var(--akzent-hell);
  box-shadow: inset 0 0 0 1px var(--akzent);
}
.artwahl input:focus-visible + label { outline: 2px solid var(--akzent); outline-offset: 2px; }
.art-titel { display: block; font-weight: 600; font-size: .95rem; }
.art-text { display: block; margin-top: 2px; font-size: .84rem; color: var(--text-leise); }

.meldung {
  display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  border-left: 4px solid var(--rand);
  padding: 13px 15px; margin-bottom: 9px; box-shadow: var(--schatten);
}
.meldung-haupt { flex: 1; min-width: 190px; }
.meldung-person { margin: 0 0 4px; font-weight: 600; }
.meldung-zeitraum { margin: 5px 0 0; font-weight: 600; font-size: .95rem; }
.meldung-zeit { margin: 3px 0 0; font-size: .86rem; color: var(--text-leise); }
.meldung-sperre    { border-left-color: var(--warn-rand); }
.meldung-krankheit { border-left-color: var(--fehler-rand); }
.meldung-wunsch    { border-left-color: var(--akzent); }
.meldung-vergangen { opacity: .6; border-left-color: var(--rand); }

.plakette-sperre    { background: var(--warn-grund);   color: var(--warn-rand);   border-color: var(--warn-rand); }
.plakette-krankheit { background: var(--fehler-grund); color: var(--fehler-rand); border-color: var(--fehler-rand); }
.plakette-wunsch    { background: var(--akzent-hell);  color: var(--akzent);      border-color: var(--akzent); }

/* Bänder in den Zellen der Planungsmatrix */
.meldeband {
  margin-bottom: 5px; padding: 3px 8px; border-radius: 6px;
  font-size: .73rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.band-sperre    { background: var(--warn-grund);   color: var(--warn-rand);
                  border: 1px dashed var(--warn-rand); }
.band-krankheit { background: var(--fehler-grund); color: var(--fehler-rand);
                  border: 1px solid var(--fehler-rand); }
.band-wunsch    { background: var(--akzent-hell);  color: var(--akzent);
                  border: 1px dotted var(--akzent); }

.melder.warnung { border-color: var(--warn-rand); background: var(--warn-grund); }

/* --- Modernist: Typografie und Formensprache ------------------------------ */
/* Die Hausschrift wird in Versalien und schweren Schnitten gesetzt, Flaechen
   sind rechteckig, Auszeichnungen laufen als invertierte Kaesten. */

h1 {
  font-weight: 800; font-size: 1.45rem;
  text-transform: uppercase; letter-spacing: -.005em;
}
h2 { font-weight: 700; letter-spacing: -.005em; }

.unterzeile { font-weight: 500; }

/* Kleine Bereichsmarken wie "STANDORTE" im Briefbogen */
.mx-ecke, .abschnitt {
  text-transform: uppercase; letter-spacing: .11em; font-weight: 700;
}
.abschnitt { font-size: .82rem; color: var(--text-leise); }
.abschnitt .anzahl { letter-spacing: 0; border-radius: 0; }

.formular label, .feld-paar label {
  text-transform: uppercase; letter-spacing: .08em; font-size: .74rem;
  color: var(--text-leise); font-weight: 700;
}
.formular .ankreuz, .artwahl label {
  text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text);
}

/* --- Marke im Kopf -------------------------------------------------------- */

.kopf { border-bottom: 2px solid var(--rand-stark); }

.marke { display: flex; align-items: baseline; gap: 7px; }
.marke-service {
  background: var(--rand-stark); color: var(--flaeche);
  padding: 2px 7px 3px;
  font-weight: 800; font-size: .95rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .01em;
}
.marke-name {
  font-weight: 800; font-size: .95rem; line-height: 1;
  text-transform: uppercase; letter-spacing: .01em; color: var(--text);
}
.marke-app {
  margin-left: 10px; padding-left: 11px; border-left: 1px solid var(--rand);
  font-size: .8rem; font-weight: 600; color: var(--text-leise);
  text-transform: uppercase; letter-spacing: .1em;
}

.navi a {
  border-radius: 2px; text-transform: uppercase;
  letter-spacing: .07em; font-size: .76rem; font-weight: 700;
}
.navi a.aktiv { background: var(--rand-stark); color: var(--flaeche); }

/* --- Fussbalken ----------------------------------------------------------- */

.fussbalken {
  margin-top: auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--tinte); color: #b9b9b2;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .13em;
  text-align: center;
}
body { display: flex; flex-direction: column; min-height: 100vh; }
.inhalt { width: 100%; }

/* --- Rechteckige Auszeichnungen ------------------------------------------- */

.plakette {
  border-radius: 0; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; font-size: .68rem;
  background: var(--rand-stark); color: var(--flaeche); border-color: var(--rand-stark);
}
.plakette-rolle { background: transparent; color: var(--text); border-color: var(--rand-stark); }
.plakette-aus   { background: transparent; color: var(--text-leise); border-color: var(--rand); }
.plakette-warn, .plakette-sperre {
  background: var(--gelb); color: var(--tinte); border-color: var(--tinte);
}
.plakette-krankheit { background: var(--rot); color: #fff; border-color: var(--rot); }
.plakette-wunsch    { background: transparent; color: var(--text); border-color: var(--rand-stark); }

.knopf, .knopf-schlicht, .knopf-gefahr {
  border-radius: 2px; text-transform: uppercase;
  letter-spacing: .08em; font-size: .78rem; font-weight: 700;
}
.knopf-gefahr { border-color: var(--rot); color: var(--rot); }

.umschalter { border-radius: 2px; padding: 3px; }
.umschalter a { border-radius: 1px; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
.umschalter a.aktiv { background: var(--rand-stark); color: var(--flaeche); }

input[type=text], input[type=password], input[type=date], input[type=time],
input:not([type]), select { border-radius: 2px; }

.karte, .zeile, .schicht, .meldung, .leer, .hinweis, .matrix-huelle, .melder {
  border-radius: var(--radius);
}
.anmelde-karte { border-radius: var(--radius); border-top: 3px solid var(--rand-stark); }

/* Ortsmarken im Legendenband: kleine Rechtecke wie die Standort-Kuerzel */
.legende-punkt::before { border-radius: 0; width: 10px; height: 10px; }
.legende-punkt { text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 600; }

.tag-plus, .mx-plus { border-radius: 2px; }
.block { border-radius: 2px; }
.meldeband { border-radius: 0; text-transform: uppercase; letter-spacing: .07em; }
.band-krankheit { background: var(--rot); color: #fff; border-color: var(--rot); }
.band-sperre    { background: var(--gelb); color: var(--tinte); border-color: var(--tinte); }
.farbwahl label { border-radius: 2px; }
.artwahl label  { border-radius: 2px; }

/* Uhrzeiten sind die wichtigste Angabe - schwer und mit gleichen Ziffernbreiten */
.zeit { font-weight: 800; }
.tag-wochentag { text-transform: uppercase; letter-spacing: .06em; }
.mx-wochentag  { text-transform: uppercase; letter-spacing: .06em; }

/* --- Anmeldeseite: volle Markenpraesenz ----------------------------------- */

.anmelde-marke { text-align: center; margin-bottom: 22px; }
.anmelde-signet { display: block; margin: 0 auto 14px; }
.anmelde-lockup {
  display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 0;
}
.anmelde-lockup .marke-service, .anmelde-lockup .marke-name { font-size: 1.28rem; }
.anmelde-lockup .marke-service { padding: 3px 9px 4px; }
.anmelde-sparten {
  margin: 9px 0 0; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .22em; color: var(--text-leise);
}
.anmelde-karte h1 {
  font-size: 1.05rem; text-align: center; color: var(--text-leise);
  letter-spacing: .16em; font-weight: 700;
  padding-top: 18px; border-top: 1px solid var(--rand);
}

@media (max-width: 560px) {
  /* Am Telefon traegt die Seitenueberschrift den App-Namen bereits. */
  .marke-app { display: none; }
  .marke-service, .marke-name { font-size: .88rem; }
  .kopf-innen { padding: 10px 16px 6px; }
}

/* Der heutige Tag wird oben durch einen schweren Balken markiert. */
.matrix th.mx-heute { box-shadow: inset 0 3px 0 0 var(--rand-stark); }
.matrix th.mx-heute .mx-wochentag { color: var(--text); }
.tag-heute > .tag-kopf .tag-wochentag { text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* --- Startseite ----------------------------------------------------------- */

.naechste {
  background: var(--tinte); color: #fff;
  border-radius: var(--radius); padding: 20px 22px; margin-bottom: 8px;
}
.naechste-marke {
  margin: 0; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: #a8a8a0;
}
.naechste-datum { margin: 10px 0 0; font-size: .95rem; font-weight: 600; }
.naechste-zeit {
  margin: 4px 0 0; font-size: 2.1rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.naechste-zeit .bis { color: #8a8a82; padding: 0 4px; font-weight: 400; }
.naechste-ort { margin: 8px 0 0; font-size: 1rem; font-weight: 600; }
.naechste-adresse { margin: 3px 0 0; font-size: .88rem; color: #a8a8a0; }
.naechste-notiz {
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #3a3a34;
  font-size: .88rem; color: #c8c8c0;
}
.naechste-leer { background: var(--flaeche); color: var(--text); border: 1px dashed var(--rand); }
.naechste-leer .naechste-marke { color: var(--text-leise); }
.naechste-leer .naechste-adresse { color: var(--text-leise); }

.kacheln {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  margin-bottom: 6px;
}
.kachel {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 15px 16px; text-decoration: none; color: var(--text);
  box-shadow: var(--schatten);
}
.kachel:hover { border-color: var(--rand-stark); }
.kachel-zahl {
  font-size: 1.7rem; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kachel-titel {
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.kachel-text { font-size: .82rem; color: var(--text-leise); }
.kachel-stark { background: var(--akzent-hell); border-color: var(--rand-stark); }

/* --- Urlaub als vierte Meldungsart ---------------------------------------- */

.meldung-urlaub { border-left-color: var(--rand-stark); }
.plakette-urlaub { background: var(--rand-stark); color: var(--flaeche); border-color: var(--rand-stark); }
.band-urlaub {
  background: var(--rand-stark); color: var(--flaeche); border: 1px solid var(--rand-stark);
}
.band-wunsch { border-style: dotted; }

/* --- Urlaubsstand --------------------------------------------------------- */

.urlaubsstand { margin: 22px 0 4px; }
.urlaubsbalken {
  height: 8px; background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: 1px; overflow: hidden;
}
.urlaubsbalken span { display: block; height: 100%; background: var(--rand-stark); }
.urlaubstext { margin: 7px 0 0; font-size: .86rem; color: var(--text-leise); }
.urlaubstext strong { color: var(--text); font-size: 1rem; }
.urlaubsjahr { font-variant-numeric: tabular-nums; }

.rueckfrage p { margin: 5px 0 0; }

/* --- Uhr im Seitenkopf ----------------------------------------------------- */

/* Groesse und Ausrichtung der Uhr kommen von .leiste-wert -- hier bleibt nur
   der Startzustand, bis JavaScript das erste Mal gezeichnet hat. */
/* Bis JavaScript das erste Mal gezeichnet hat, bleibt der Platz leer statt
   "--:--" zu zeigen. Ohne JavaScript bleibt er dauerhaft leer. */
.uhr-still { visibility: hidden; }
.datum-veraltet { color: var(--warn-rand); font-weight: 600; }

/* --- Wetterstreifen -------------------------------------------------------- */


/* --- Wetterort im Konto ---------------------------------------------------- */

.feld-label {
  margin: 18px 0 6px; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
}
.wetterort-jetzt { margin: 4px 0 12px; font-size: .95rem; }
.ortknoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.ortknoepfe form { margin: 0; }
.suchzeile { display: flex; gap: 8px; }
.suchzeile input { flex: 1; }
.suchzeile .knopf { flex: 0 0 auto; margin-top: 0; }

.trefferliste { display: flex; flex-direction: column; gap: 6px; }
.trefferliste form { margin: 0; }
.treffer-knopf {
  width: 100%; text-align: left; cursor: pointer;
  padding: 11px 13px; border: 1px solid var(--rand); border-radius: 2px;
  background: var(--flaeche-leise); font: inherit; color: var(--text);
}
.treffer-knopf:hover { border-color: var(--rand-stark); }
.treffer-name { display: block; font-weight: 600; font-size: .95rem; }
.treffer-zusatz { display: block; font-size: .82rem; color: var(--text-leise); }

@media (max-width: 560px) {
  .uhr { font-size: 1.7rem; }
  .seiten-kopf { align-items: baseline; }
}

/* --- Ausbesserung: Schichtkasten im Dunkelmodus ---------------------------- */
/* Der Kasten war fest auf --tinte gesetzt. Im Dunkelmodus steht er damit auf
   fast derselben Farbe wie der Untergrund (Kontrast 1,1:1) und verschwindet.
   Im Dunkelmodus trägt er deshalb eine hellere Fläche und einen sichtbaren Rand. */
/* Dunkel kommt vom Gerät -- ausser der Mitarbeiter hat in seinem Konto
   eine Fassung fest gewählt. Die beiden Blöcke müssen deckungsgleich
   bleiben; tests/test_app.py prüft das. */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .naechste {
    background: #26261f;
    border: 1px solid #45453c;
  }
:root:not([data-thema="hell"]) .naechste-notiz { border-top-color: #45453c; }
}

:root[data-thema="dunkel"] .naechste {
    background: #26261f;
    border: 1px solid #45453c;
  }
:root[data-thema="dunkel"] .naechste-notiz { border-top-color: #45453c; }


/* --- Stempeluhr ------------------------------------------------------------ */

.stempel-kasten {
  background: var(--tinte); color: #fff;
  border-radius: var(--radius); padding: 22px; margin-bottom: 6px;
}
.stempel-marke {
  margin: 0; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: #a8a8a0;
}
.stempel-zeit {
  margin: 8px 0 0; font-size: 3rem; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stempel-neben { margin: 6px 0 0; font-size: .86rem; color: #a8a8a0; }
.stempel-knoepfe { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Im schwarzen Kasten muss alles invertiert sein -- ein schwarzer Knopf auf
   schwarzem Grund ist unsichtbar. */
.stempel-kasten:not(.stempel-aus) .knopf {
  background: #fff; color: var(--tinte); border-color: #fff;
}
.stempel-kasten:not(.stempel-aus) .knopf:hover { background: #e8e8e2; filter: none; }
.stempel-kasten:not(.stempel-aus) .knopf-schlicht {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55);
}
.stempel-kasten:not(.stempel-aus) .knopf-schlicht:hover {
  background: rgba(255, 255, 255, .12); border-color: #fff;
}
.stempel-kasten:not(.stempel-aus) :focus-visible { outline-color: #fff; }
.stempel-knoepfe form { flex: 1 1 130px; margin: 0; }
.stempel-knopf { width: 100%; }

/* Pause: gelber Rand statt anderer Fläche -- die Farbe bleibt Signal. */
.stempel-pause { box-shadow: inset 0 0 0 3px var(--gelb); }
.stempel-pause .stempel-zeit { color: var(--gelb); }
/* Nicht gestempelt: heller Kasten, damit der schwarze Zustand "läuft" bedeutet. */
.stempel-aus { background: var(--flaeche); color: var(--text); border: 1px dashed var(--rand); }
.stempel-aus .stempel-marke, .stempel-aus .stempel-neben { color: var(--text-leise); }
.stempel-aus .stempel-zeit { color: var(--text-leise); }

.zeile-warnung { border-left: 4px solid var(--warn-rand); }

.plakette-eingereicht { background: transparent; color: var(--text); border-color: var(--rand-stark); }
.plakette-anfrage     { background: var(--gelb); color: var(--tinte); border-color: var(--tinte); }
.plakette-genehmigt   { background: var(--rand-stark); color: var(--flaeche); border-color: var(--rand-stark); }
.plakette-abgelehnt   { background: var(--rot); color: #fff; border-color: var(--rot); }

/* --- Berichtigungen im Adminbereich ---------------------------------------- */

.anfrage-person { margin: 0 0 12px; font-weight: 700; font-size: 1rem; }
.gegenueber { display: flex; gap: 12px; flex-wrap: wrap; }
.gegenueber-halb {
  flex: 1 1 150px; padding: 11px 13px;
  border: 1px solid var(--rand); border-radius: 2px; background: var(--flaeche-leise);
}
.gegenueber-neu { border-color: var(--rand-stark); background: var(--akzent-hell); }
.gegenueber-halb .feld-label { margin: 0 0 5px; }
.gegenueber-zeit {
  margin: 0; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.gegenueber-neben { margin: 3px 0 0; font-size: .82rem; color: var(--text-leise); }
.anfrage-grund { margin: 13px 0 0; font-size: .95rem; }

.stunden td { padding: 11px 12px; }
.stunden-wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.stunden-gesamt { font-weight: 800; }

/* --- Ausbesserungen aus der Prüfung ---------------------------------------- */

/* Der Stempelkasten war fest auf --tinte gesetzt -- im Dunkelmodus steht er
   damit auf fast derselben Farbe wie der Untergrund und verschwindet. Genau
   derselbe Fehler wie zuvor bei .naechste, dort schon korrigiert. */
/* Dunkel kommt vom Gerät -- ausser der Mitarbeiter hat in seinem Konto
   eine Fassung fest gewählt. Die beiden Blöcke müssen deckungsgleich
   bleiben; tests/test_app.py prüft das. */
@media (prefers-color-scheme: dark) {
:root:not([data-thema="hell"]) .stempel-kasten:not(.stempel-aus) {
    background: #26261f;
    border: 1px solid #45453c;
  }
}

:root[data-thema="dunkel"] .stempel-kasten:not(.stempel-aus) {
    background: #26261f;
    border: 1px solid #45453c;
  }


/* Die Eingabefelder für Datum und Uhrzeit haben eine feste Mindestbreite und
   ragten dadurch am Telefon aus der Karte. */
.formular input[type=datetime-local] { min-width: 0; max-width: 100%; }
.feld-paar > div { min-width: 0; }

/* Beide Knöpfe gleich hoch und mindestens 44 px -- sonst ist der zweite am
   Telefon schwerer zu treffen als der erste. */
.stempel-knoepfe .knopf,
.stempel-knoepfe .knopf-schlicht,
.zeile-aktionen .knopf,
.zeile-aktionen .knopf-schlicht,
.entscheidung-reihe .knopf,
.entscheidung-reihe .knopf-gefahr {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}

/* Genehmigen und Ablehnen brauchen Abstand -- eine endgültige Entscheidung
   soll man nicht danebengreifen. */
.entscheidung-reihe { gap: 18px; flex-wrap: wrap; }

@media (max-width: 460px) {
  /* Zwei Datums- und Zeitfelder nebeneinander sind auf schmalen Geräten zu
     eng -- der Inhalt wird abgeschnitten, obwohl das Feld formal passt. */
  .feld-paar { flex-direction: column; gap: 0; }
  .feld-paar label { margin-top: 14px; }
}

/* Die mitlaufende Pause muss so gut sichtbar sein wie die Arbeitszeit --
   sonst wirkt die eingefrorene Arbeitszeit wie ein stiller Weiterlauf. */
.stempel-pausenzeit { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gelb); }
.stempel-abzug {
  margin-left: 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
}

/* --- Hinweisfenster für neue Aufgaben --------------------------------------- */

.hinweisstapel {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 12px;
  z-index: 400; display: flex; flex-direction: column; gap: 10px;
  width: min(340px, calc(100vw - 24px)); pointer-events: none;
}

.aufgabenhinweis {
  pointer-events: auto; display: block; text-decoration: none; color: inherit;
  background: var(--flaeche); border: 1px solid var(--rand-stark);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(29, 29, 27, .3);
  overflow: hidden;
  /* Startzustand: rechts ausserhalb des Bildes */
  transform: translateX(calc(100% + 20px));
  transition: transform .28s cubic-bezier(.2, .8, .3, 1), opacity .2s;
}
.aufgabenhinweis.herein { transform: translateX(0); }
.aufgabenhinweis.hinaus { transform: translateX(calc(100% + 20px)); opacity: 0; }

.hinweis-kopf {
  padding: 12px 14px 4px; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-leise);
}
.hinweis-titel { margin: 0; padding: 0 14px; font-weight: 700; font-size: .98rem; }
.hinweis-neben {
  margin: 3px 0 12px; padding: 0 14px; font-size: .82rem; color: var(--text-leise);
}

/* Der Balken läuft in fünf Sekunden von voller Breite auf null. */
.hinweis-balken { height: 3px; background: var(--akzent-hell); }
.hinweis-balken span {
  display: block; height: 100%; width: 100%; background: var(--rand-stark);
  transform-origin: left center;
}
.aufgabenhinweis.laeuft .hinweis-balken span {
  animation: hinweis-ablauf 5s linear forwards;
}
@keyframes hinweis-ablauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .aufgabenhinweis { transition: none; }
  .aufgabenhinweis.laeuft .hinweis-balken span { animation-duration: 5s; }
}

/* --- Aufgabenliste ---------------------------------------------------------- */

.aufgabe {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  border-left: 4px solid var(--rand);
  padding: 13px 15px; margin-bottom: 9px; box-shadow: var(--schatten);
  text-decoration: none; color: inherit;
}
.aufgabe:hover { border-color: var(--rand-stark); }
.aufgabe-neu { border-left-color: var(--rand-stark); }
.aufgabe-fertig { opacity: .6; }
.aufgabe-vorschau {
  width: 64px; height: 64px; object-fit: cover; border-radius: 2px; flex: 0 0 auto;
  background: var(--flaeche-leise);
}
.aufgabe-haupt { min-width: 0; flex: 1; }
.aufgabe-titel { margin: 0; font-weight: 700; font-size: 1rem; }
.aufgabe-text {
  margin: 4px 0 0; font-size: .88rem; color: var(--text-leise);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aufgabe-neben {
  margin: 6px 0 0; font-size: .8rem; color: var(--text-leise);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.aufgabe-fliesstext { margin: 0; white-space: pre-wrap; }
.aufgabe-bildrahmen { display: block; margin-bottom: 14px; }
.aufgabe-bildrahmen img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--rand); display: block;
}

.empfaengerwahl {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 14px; margin-top: 4px;
}
textarea {
  width: 100%; padding: 11px 12px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: 2px; resize: vertical;
}
input[type=file] { font-size: .9rem; }

/* --- Tagesleiste: zwei gleich gebaute Spalten ------------------------------ */
/* Links das Wetter, rechts Tag und Uhrzeit -- beide mit demselben Aufbau
   (Marke, grosser Wert, leise Zeile), damit der Kasten nicht schief wird.
   Die Quellenangabe läuft darunter über die volle Breite. */

.leiste {
  margin: 8px 0 0; padding: 15px 18px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); box-shadow: var(--schatten);
}
.leiste-leer { border-style: dashed; box-shadow: none; }

.leiste-reihe { display: flex; align-items: stretch; }
/* Genau die Hälfte je Spalte. Mit flex-basis 0 käme der Innenabstand der
   rechten Spalte obendrauf und die Hälften wären 19 px auseinander. */
.leiste-halb { flex: 0 0 50%; min-width: 0; }
.leiste-halb:first-child { padding-right: 18px; }
.leiste-rechts {
  text-align: right; padding-left: 18px;
  border-left: 1px solid var(--rand);
}

.leiste-marke {
  margin: 0; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-leise);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.leiste-wert {
  margin: 7px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 1.9rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.leiste-rechts .leiste-wert { justify-content: flex-end; }
.leiste-leise {
  margin: 5px 0 0; font-size: .86rem; color: var(--text-leise);
  font-weight: 400; letter-spacing: 0;
}
.leiste-quelle {
  margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--rand);
  font-size: .72rem; color: var(--text-leise);
  opacity: .5;   /* die Quellenangabe soll zurücktreten */
}
.leiste-quelle a { color: inherit; }

/* Die Wetterlage steht neben der Gradzahl und bleibt normal gross. */
.wetter-symbol { width: 1.5em; height: 1.5em; flex: none; align-self: center; }
.wetter-symbol[hidden] { display: none; }
.wetter-symbol-klein { width: 1.6rem; height: 1.6rem; vertical-align: -.45rem; }
.wetterort-lage { margin-left: 8px; color: var(--text-leise); white-space: nowrap; }
.wetter-grad { font-size: 1em; }
.wetter-lage { font-size: .53em; font-weight: 600; letter-spacing: 0; }

@media (max-width: 560px) {
  /* Am Telefon untereinander, getrennt durch eine Linie statt einer Spalte. */
  .leiste-reihe { flex-direction: column; }
  .leiste-halb { flex: 1 1 auto; }
  .leiste-halb:first-child { padding-right: 0; }
  .leiste-rechts {
    text-align: left; padding-left: 0; padding-top: 13px; margin-top: 13px;
    border-left: none; border-top: 1px solid var(--rand);
  }
  .leiste-rechts .leiste-wert { justify-content: flex-start; }
  .leiste-wert { font-size: 1.7rem; }
}


/* Der Monatskasten der Stempeluhr nutzt denselben Aufbau, seine Fusszeile ist
   aber ein Hinweis und keine Quellenangabe -- also nicht zurückgenommen. */
.leiste-monat { margin-top: 0; }
.leiste-monat .leiste-quelle { opacity: 1; }

/* --- Chat: Übersicht -------------------------------------------------------- */

.gespraech {
  display: flex; gap: 13px; align-items: center;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  border-left: 4px solid var(--rand);
  padding: 12px 15px; margin-bottom: 8px; box-shadow: var(--schatten);
  text-decoration: none; color: inherit;
}
.gespraech:hover { border-color: var(--rand-stark); }
.gespraech-neu { border-left-color: var(--rand-stark); }

.gespraech-zeichen {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--rand-stark); border-radius: 2px;
  font-weight: 800; font-size: 1rem;
}
.gespraech-team { background: var(--rand-stark); color: var(--flaeche); }

.gespraech-haupt { min-width: 0; flex: 1; display: block; }
.gespraech-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.gespraech-name { font-weight: 700; font-size: .98rem; }
.gespraech-zeit {
  font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.gespraech-vorschau {
  display: block; margin-top: 2px; font-size: .86rem; color: var(--text-leise);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gespraech-zahl {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--rand-stark); color: var(--flaeche);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.navi-zahl {
  display: inline-grid; place-items: center; margin-left: 6px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--rot); color: #fff; font-size: .66rem; letter-spacing: 0;
}

/* --- Chat: Verlauf ---------------------------------------------------------- */

.verlauf {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0 12px; min-height: 40vh;
}
.verlauf-leer { margin: 24px 0; text-align: center; color: var(--text-leise); }
.verlauf-tag {
  align-self: center; margin: 14px 0 6px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-leise);
}

.blase {
  align-self: flex-start; max-width: min(82%, 520px);
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 9px 13px;
}
/* Eigene Nachrichten rechts und invertiert -- so ist ohne Namen klar, wer schrieb. */
.blase-eigen {
  align-self: flex-end; background: var(--rand-stark); color: var(--flaeche);
  border-color: var(--rand-stark);
}
.blase-absender {
  margin: 0 0 3px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-leise);
}
.blase-text { margin: 0; font-size: .95rem; line-height: 1.45; white-space: pre-wrap;
              overflow-wrap: anywhere; }
.blase-zeit {
  margin: 3px 0 0; font-size: .7rem; text-align: right;
  color: var(--text-leise); font-variant-numeric: tabular-nums;
}
.blase-eigen .blase-zeit { color: rgba(255, 255, 255, .6); }

/* --- Chat: Schreibzeile ----------------------------------------------------- */

.schreibzeile {
  position: sticky; bottom: 0; display: flex; gap: 8px;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: var(--grund);
}
.schreibzeile input { flex: 1; min-width: 0; }
.schreibzeile .knopf { flex: 0 0 auto; margin-top: 0; }

/* --- Ansicht hell/dunkel ---------------------------------------------------- */

.themawahl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.themawahl form { flex: 1 1 130px; }

.thema-knopf {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 11px 13px; cursor: pointer;
  background: var(--flaeche); color: var(--text);
  border: 1px solid var(--rand); border-radius: 9px;
  font: inherit; text-align: left;
}
.thema-knopf:hover { background: var(--flaeche-leise); }
.thema-aktiv { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }

.thema-name { font-weight: 600; font-size: .92rem; }
.thema-hinweis { font-size: .8rem; color: var(--text-leise); }

/* Kleine Vorschau, damit die Wahl ohne Ausprobieren klar ist. */
.thema-probe {
  display: block; width: 100%; height: 26px; margin-bottom: 6px;
  border: 1px solid var(--rand); border-radius: 3px;
}
.thema-probe-hell   { background: linear-gradient(#ffffff 55%, #f2f2f0 55%); }
.thema-probe-dunkel { background: linear-gradient(#1c1c1a 55%, #131312 55%); }
.thema-probe-system {
  background: linear-gradient(115deg, #ffffff 0 48%, #131312 48% 100%);
}

/* --- Updates: Verlauf ------------------------------------------------------- */

.update {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  border-left: 4px solid var(--rand);
  padding: 16px; margin-bottom: 14px; box-shadow: var(--schatten);
}
.update-neu { border-left-color: var(--rot); }

.update-kopf {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  align-items: baseline;
}
.update-marke, .update-orte {
  margin: 0; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-leise);
}
.update-orte { color: var(--text-leise); }

.update-titel { margin: 8px 0 0; font-size: 1.12rem; letter-spacing: -.01em; }
.update-text { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.update-bild {
  display: block; width: 100%; height: auto; margin-top: 12px;
  border: 1px solid var(--rand); border-radius: var(--radius);
}

.update-fuss {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rand);
}
.update-quittung {
  margin: 0; font-size: .84rem; color: var(--text-leise);
}
.update-quittung::before { content: "✓ "; font-weight: 700; }

/* --- Updates: Lesestand in der Verwaltung ----------------------------------- */

.lesestand-zahl {
  margin: 0; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.lesestand { list-style: none; margin: 0; padding: 0; }
.lesestand li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--rand); font-size: .95rem;
}
.lesestand li:last-child { border-bottom: 0; }
.lesestand-offen { color: var(--text-leise); }
.lesestand-fertig::before { content: "✓"; margin-right: 8px; font-weight: 700; }
.lesestand-zeit { color: var(--text-leise); font-size: .82rem; font-variant-numeric: tabular-nums; }

/* Die Standortmarken in der Mitarbeiterliste. */
.ortmarken { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 0; }
.ortmarke {
  padding: 1px 7px 2px; border: 1px solid var(--rand); border-radius: 999px;
  font-size: .74rem; color: var(--text-leise);
}

/* --- Scanner ---------------------------------------------------------------- */

.suchzeile { display: flex; gap: 8px; margin-bottom: 14px; }
.suchzeile input { flex: 1; min-width: 0; }
.suchzeile .knopf { flex: 0 0 auto; }

.anhangliste {
  margin: 12px 0 0; padding: 10px 12px; font-size: .86rem;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
  white-space: pre-line; overflow-wrap: anywhere;
}

.ablage {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--schatten);
}
.ablage-kopf {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  align-items: baseline;
}
.ablage-zeit {
  margin: 0; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: .08em;
}
.ablage-marken { display: flex; gap: 5px; flex-wrap: wrap; margin: 0; }
.ablage-von, .ablage-notiz { margin: 6px 0 0; font-size: .9rem; color: var(--text-leise); }
.ablage-notiz { color: var(--text); }

.ablage-dateien { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ablage-bild {
  display: block; width: 92px; height: 92px; overflow: hidden;
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.ablage-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ablage-pdf {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 92px; height: 92px; padding: 8px;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--flaeche-leise); color: var(--text); text-decoration: none;
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.ablage-name {
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-leise); overflow: hidden; text-overflow: ellipsis;
}
.ablage-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rand); }

/* --- Mein Plan: Heute / Morgen / Übermorgen --------------------------------- */

.visuell-versteckt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.tagblock {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius);
  border-left: 4px solid var(--rand);
  padding: 14px 16px; margin-bottom: 12px; box-shadow: var(--schatten);
}
/* Ampel für die drei Tage. Die Farbe steckt in --ampel, damit Streifen und
   Plakette immer dieselbe tragen. */
.tagblock-gruen { --ampel: #2e9e4b; --ampel-schrift: #ffffff; }
.tagblock-gelb  { --ampel: var(--gelb); --ampel-schrift: var(--tinte); }
.tagblock-rot   { --ampel: var(--rot); --ampel-schrift: #ffffff; }
.tagblock-gruen, .tagblock-gelb, .tagblock-rot { border-left-color: var(--ampel); }

.tagblock-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 1rem;
}
.tagblock-marke {
  font-size: .84rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px 4px; border-radius: 2px;
  background: var(--ampel, var(--rand-stark)); color: var(--ampel-schrift, var(--flaeche));
}
.tagblock-datum {
  font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-leise);
}
.tagblock-frei { margin: 0; color: var(--text-leise); }
.tagblock .schicht { margin-top: 10px; }
.tagblock .schicht:first-of-type { margin-top: 0; }

/* --- Mein Plan: Wochen- und Monatsblock ------------------------------------- */

.block-uebersicht { padding-top: 14px; }
.block-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.block-kopf h2 { margin: 0; }
.block-neben {
  margin: 0; font-size: .78rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-leise); font-variant-numeric: tabular-nums;
}

.wochenliste { list-style: none; margin: 0; padding: 0; }
.wochentagzeile {
  display: flex; gap: 12px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--rand);
}
.wochentagzeile:last-child { border-bottom: 0; }
.wochentagzeile-heute { font-weight: 600; }
.wochentagzeile-tag {
  flex: 0 0 108px; font-size: .88rem; font-variant-numeric: tabular-nums;
}
.wochentagzeile-inhalt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wochentagzeile-schicht { font-size: .92rem; font-variant-numeric: tabular-nums; }
.wochentagzeile-frei { color: var(--text-leise); font-size: .92rem; }

.monat-blaettern, .tag-blaettern {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap;
}
.tag-wahl { display: flex; gap: 8px; flex: 1; min-width: 0; }
.tag-wahl input { flex: 1; min-width: 0; }
.tag-ueberschrift { margin: 0; font-weight: 700; }

.monat { width: 100%; border-collapse: collapse; table-layout: fixed; }
.monat th {
  padding: 4px 2px; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-leise);
}
.monat-zelle {
  vertical-align: top; height: 54px; padding: 3px;
  border: 1px solid var(--rand); border-radius: 2px;
}
.monat-fremd { opacity: .38; }
.monat-heute { outline: 2px solid var(--akzent); outline-offset: -2px; }
.monat-nummer {
  display: block; font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-leise);
}
.monat-dienst .monat-nummer { color: var(--text); font-weight: 700; }
.monat-schicht {
  display: block; margin-top: 2px; padding: 1px 3px; border-radius: 2px;
  background: hsl(var(--ton) / .18); border-left: 3px solid hsl(var(--ton));
  font-size: .66rem; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- Arbeitsplan: wer wo arbeitet ------------------------------------------- */

.ortblock { border-left: 4px solid hsl(var(--ton)); }
.ortblock-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.ortblock-kopf h2 { margin: 0; }
.ortblock .ort-adresse { display: block; margin: 2px 0 0; }

.besetzung { list-style: none; margin: 12px 0 0; padding: 0; }
.besetzung-zeile {
  display: flex; gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--rand);
}
.besetzung-zeile:last-child { border-bottom: 0; }
.besetzung-ich { font-weight: 700; }
.besetzung-zeit {
  flex: 0 0 108px; font-variant-numeric: tabular-nums; font-size: .92rem;
}
.besetzung-name { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .wochentagzeile-tag, .besetzung-zeit { flex-basis: 92px; }
  .monat-zelle { height: 46px; }
}

/* --- Menü hinter den drei Strichen ------------------------------------------ */

/* Die Fläche hängt am Kopf, nicht an der Navigation -- die scrollt waagerecht
   und beschnitt das aufgeklappte Menü, es war schlicht nicht zu sehen. */
.kopf-innen { position: relative; }
.menue { margin-left: auto; flex: 0 0 auto; }

.menue-knopf {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  color: var(--text-leise); font-size: .92rem; font-weight: 500; white-space: nowrap;
  list-style: none;                       /* das Dreieck von <details> weg */
}
.menue-knopf::-webkit-details-marker { display: none; }
.menue-knopf:hover { background: var(--flaeche-leise); color: var(--text); }
.menue-knopf.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.menue[open] .menue-knopf { background: var(--akzent-hell); color: var(--akzent); }

/* Die drei Striche: ein Kasten mit zwei Rändern plus Mittellinie. */
.menue-striche {
  position: relative; display: block; width: 17px; height: 11px;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
.menue-striche::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 100%;
  border-top: 2px solid currentColor; transform: translateY(-1px);
}

.menue-flaeche {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; min-width: 232px; max-width: calc(100vw - 24px);
  max-height: min(70vh, 520px); overflow-y: auto;
  padding: 8px; background: var(--flaeche);
  border: 1px solid var(--rand-stark); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.menue-flaeche a {
  padding: 10px 12px; border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-size: .95rem; white-space: nowrap;
}
.menue-flaeche a:hover { background: var(--flaeche-leise); }
.menue-flaeche a.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

.menue-gruppe {
  margin: 8px 0 4px; padding: 0 12px;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-leise);
}
.menue-gruppe:first-child { margin-top: 2px; }

@media (max-width: 380px) {
  .menue-wort { display: none; }         /* am kleinen Telefon reichen die Striche */
}

/* Hinweis, wenn nicht neu geladen werden konnte, weil gerade getippt wird. */
.neuerstand {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  padding: 11px 18px; min-height: 44px;
  background: var(--akzent); color: var(--akzent-text);
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* Die wechselnde Begrüßung darf nicht umbrechen wie ein zweiter Satz. */
.gruss { white-space: nowrap; }

/* --- Startbildschirm nach dem Anmelden -------------------------------------- */

.vorhang {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--grund);
  animation: vorhang-weg 1.25s steps(1, end) forwards;
}
@keyframes vorhang-weg {
  0%, 99% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}
.vorhang-zeichen { border-radius: 22%; }
.vorhang-wort {
  margin: 0; font-size: 1.15rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .34em; text-indent: .34em;
}
.vorhang-balken {
  width: min(240px, 60vw); height: 4px; overflow: hidden;
  background: var(--rand); border-radius: 2px;
}
.vorhang-balken span {
  display: block; width: 100%; height: 100%;
  transform-origin: left center; transform: scaleX(0);
  background: var(--rot);
  /* Zwei Läufe auf einem Element: der Balken wächst und färbt sich zugleich
     von Rot über Orange und Gelb nach Grün. Getrennte Keyframes, damit die
     Farbe gleichmässig überblendet und nicht mit dem Wachsen springt. */
  animation: vorhang-balken 1.25s linear forwards,
             vorhang-farbe 1.25s linear forwards;
}
@keyframes vorhang-balken { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vorhang-farbe {
  0%   { background-color: #e4322a; }   /* Rot    */
  33%  { background-color: #f0842a; }   /* Orange */
  66%  { background-color: #ffc800; }   /* Gelb   */
  100% { background-color: #2e9e4b; }   /* Grün   */
}

/* Wer die Bewegung abgestellt hat, bekommt den Balken ohne Lauf. */
@media (prefers-reduced-motion: reduce) {
  .vorhang-balken span { animation-duration: 1.25s; }
}

/* --- Push-Benachrichtigungen im Konto --------------------------------------- */

.push-stand {
  margin: 14px 0 0; padding: 10px 12px; font-size: .9rem;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
}
.push-stand::before { content: "○ "; font-weight: 700; }
.push-an::before { content: "● "; color: #2e9e4b; }
.push-aus::before { content: "○ "; color: var(--text-leise); }
.push-fehler::before { content: "! "; color: var(--rot); }

/* --- To-Do's: dringend und Nachweis ----------------------------------------- */

.plakette-dringend {
  background: var(--rot); color: #ffffff; border-color: var(--rot);
}

.aufgabe-dringend { border-left: 4px solid var(--rot); }

.nachweis-karte { border-left: 4px solid var(--gelb); }

.nachweisliste { list-style: none; margin: 6px 0 0; padding: 0; }
.nachweisliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; font-size: .88rem; color: var(--text-leise);
}
.nachweis-vorschau {
  display: block; width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden;
  border: 1px solid var(--rand); border-radius: 2px;
}
.nachweis-vorschau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nachweis-fehlt { font-size: .78rem; color: var(--warn-rand); }

.nachweis-wer { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nachweis-zeit { font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }

/* --- Zwei-Faktor-Anmeldung --------------------------------------------------- */

.totp-kode {
  display: block; margin: 14px auto; width: 240px; height: 240px;
  background: #ffffff; padding: 10px; border: 1px solid var(--rand); border-radius: 2px;
}
.totp-geheimnis {
  margin: 6px 0 0; padding: 10px 12px;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .08em; text-align: center; overflow-wrap: anywhere;
}

.notfallcodes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px;
}
.notfallcodes li {
  padding: 10px 12px; text-align: center;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; letter-spacing: .06em;
}

/* --- Notfallcodes: Kopf nur auf dem Ausdruck -------------------------------- */

.druckkopf { display: none; }

/* --- Ausdruck --------------------------------------------------------------- */

@media print {
  /* Alles weg, was auf Papier nichts verloren hat. */
  .kopf, .fussbalken, .navi, .seiten-kopf, .hinweis, .hinweisstapel,
  .knopf-reihe, .fusszeile, .melder, .vorhang, .neuerstand { display: none !important; }

  html, body { background: #ffffff !important; color: #000000 !important; }
  .inhalt { max-width: none; padding: 0; }

  .karte {
    border: 1px solid #000000; box-shadow: none; break-inside: avoid;
    background: #ffffff !important; padding: 18px;
  }

  .druckkopf { display: block; margin-bottom: 16px; }
  .druckkopf h2 { margin: 6px 0 4px; font-size: 1.2rem; }
  .druckkopf-marke {
    margin: 0; font-size: .7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .16em;
  }
  .druckkopf-neben { margin: 2px 0 0; font-size: .8rem; }

  .notfallcodes { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .notfallcodes li {
    background: #ffffff !important; border: 1px solid #000000; color: #000000;
    font-size: 1.05rem; letter-spacing: .1em;
  }
}

.regelliste { margin: 0 0 10px; padding-left: 20px; font-size: .92rem; }
.regelliste li { margin-bottom: 4px; }

/* --- Änderungsprotokoll ------------------------------------------------------ */

.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li {
  display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--rand);
}
.protokoll li:last-child { border-bottom: 0; }
.protokoll-zeit {
  flex: 0 0 76px; font-size: .76rem; color: var(--text-leise);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.protokoll-haupt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.protokoll-haupt strong { font-size: .94rem; }
.protokoll-text { font-size: .9rem; overflow-wrap: anywhere; }
.protokoll-wer { font-size: .8rem; color: var(--text-leise); }

/* --- Gemerkte Geräte --------------------------------------------------------- */

.geraeteliste { list-style: none; margin: 10px 0; padding: 0; }
.geraeteliste li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--rand);
}
.geraeteliste li:last-child { border-bottom: 0; }
.geraet-haupt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.geraet-neben { font-size: .8rem; color: var(--text-leise); }

.besetzung-netto { font-size: .76rem; color: var(--text-leise); }

/* --- Soll gegen Ist in der Planungsmatrix ------------------------------------ */

.ist-band {
  display: block; margin-top: 3px; padding: 1px 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .22);
  font-size: .64rem; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* Fehlende Stempelung ist etwas anderes als Minderarbeit -- deshalb eine
   eigene, deutliche Kennzeichnung statt einer Zahl. */
.ist-fehlt { background: var(--rot); color: #ffffff; font-weight: 700; }
.ist-knapp { background: rgba(255, 200, 0, .85); color: var(--tinte); font-weight: 600; }
.ist-mehr  { background: rgba(46, 158, 75, .85); color: #ffffff; }

.warnzahl { color: var(--rot); font-weight: 700; text-decoration: none; }
.warnzahl:hover { text-decoration: underline; }

/* --- Wochenaktionen der Planung ---------------------------------------------- */

.wochenaktionen { margin-bottom: 14px; }
.wochenaktionen-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.wochenaktionen-kopf h2 { margin: 0; }
.wochenaktionen-reihe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.vorlagenfach { margin-top: 12px; }
.vorlagenfach summary {
  cursor: pointer; font-size: .88rem; font-weight: 600;
  padding: 6px 0; color: var(--text-leise);
}
.vorlagenfach summary:hover { color: var(--text); }

/* Entwürfe sind schraffiert: sofort erkennbar, dass die Mitarbeiter das noch
   nicht sehen. */
.block-entwurf {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 6px,
                                              transparent 6px 12px);
  opacity: .92;
}
.block-marke {
  display: inline-block; padding: 0 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .35); font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* --- Prüfung nach Arbeitszeitgesetz ------------------------------------------ */

.pruefkarte { border-left: 4px solid var(--gelb); }
.pruefkarte-rot { border-left-color: var(--rot); }
.pruefkarte summary { cursor: pointer; padding: 2px 0; }

.befundliste { list-style: none; margin: 12px 0 0; padding: 0; }
.befund {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0; border-bottom: 1px solid var(--rand);
}
.befund:last-child { border-bottom: 0; }
.befund-marke {
  flex: 0 0 auto; padding: 2px 7px 3px; border-radius: 2px;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  background: var(--gelb); color: var(--tinte);
}
.befund-verstoss .befund-marke { background: var(--rot); color: #ffffff; }
.befund-haupt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.befund-text { font-size: .92rem; overflow-wrap: anywhere; }
.befund-neben { font-size: .78rem; color: var(--text-leise); }

/* Zeichen in der betroffenen Zelle der Matrix. */
.zellbefund {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--gelb); color: var(--tinte);
  font-size: .66rem; font-weight: 800; cursor: help;
}
.zellbefund-rot { background: var(--rot); color: #ffffff; }

/* --- Personalkosten ---------------------------------------------------------- */

.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.kennzahl {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px; background: var(--flaeche-leise);
  border: 1px solid var(--rand); border-radius: var(--radius);
}
.kennzahl-wert { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.kennzahl-marke {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-leise);
}
.kennzahl-neben { font-size: .78rem; color: var(--text-leise); }

.kostentabelle { width: 100%; border-collapse: collapse; }
.kostentabelle th, .kostentabelle td {
  padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--rand);
  font-variant-numeric: tabular-nums;
}
.kostentabelle thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-leise);
}
.kostentabelle tbody th { text-align: left; font-weight: 600; }
.kostentabelle .heute-zeile { background: var(--flaeche-leise); }
.zelle-neben { display: block; font-size: .74rem; color: var(--text-leise); }

/* --- Besetzung und Auslastung ------------------------------------------------ */

.rest-offen { color: var(--warn-rand); font-weight: 600; }
.rest-ueber { color: var(--rot); font-weight: 600; }

.wochenstreifen { display: flex; gap: 3px; justify-content: flex-end; }
.streifen-tag {
  width: 10px; height: 16px; border-radius: 2px;
  background: var(--rand); display: inline-block;
}
.streifen-an { background: var(--akzent); }

.block-gruppe { background: rgba(0, 0, 0, .28); color: #ffffff; }

/* --- Monatsplan der Planung -------------------------------------------------- */

.monat-gross .monat-zelle { height: 118px; min-width: 118px; }
.monat-gross .monat-schicht {
  display: block; margin-top: 2px; padding: 2px 4px; border-radius: 2px;
  background: hsl(var(--ton) / .2); border-left: 3px solid hsl(var(--ton));
  color: var(--text); text-decoration: none;
  font-size: .68rem; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.monat-gross .monat-schicht:hover { background: hsl(var(--ton) / .34); }
.monat-entwurf {
  background-image: repeating-linear-gradient(45deg, rgba(128,128,128,.22) 0 5px,
                                              transparent 5px 10px);
}
.monat-mehr {
  display: block; margin-top: 2px; font-size: .66rem; color: var(--text-leise);
}

.gespraech-gruppe { background: var(--rand-stark); color: var(--flaeche); }

/* --- Planung: zwei Spalten --------------------------------------------------- */

.planung-raster { display: grid; gap: 16px; align-items: start; }

@media (min-width: 1100px) {
  /* Links der Plan, rechts das Fenster -- das Fenster bleibt beim Scrollen
     stehen, damit es beim Arbeiten in der Matrix sichtbar ist. */
  .planung-raster { grid-template-columns: minmax(0, 1fr) 340px; }
  .planung-rechts { position: sticky; top: 92px; }
  .inhalt:has(.planung-raster) { max-width: 1500px; }
}

.planung-links { min-width: 0; }
.planung-rechts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.schichtfenster .formular { margin-top: 4px; }
.empfaengerwahl-eng { max-height: 168px; overflow-y: auto; }
.fenster-hinweis {
  margin: 0 0 10px; padding: 8px 10px; font-size: .82rem;
  background: var(--flaeche-leise); border: 1px solid var(--rand); border-radius: var(--radius);
}

/* --- Monatsblock unter dem Wochenplan --- */

.monatsblock .monat-zelle { height: 40px; min-width: 0; padding: 0; }
.monat-tag {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 1px; text-decoration: none; color: inherit;
}
.monat-tag:hover { background: var(--flaeche-leise); }
.monat-woche-aktiv { background: var(--akzent-hell); }
.monat-zahl {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  border-radius: 8px; background: var(--rand-stark); color: var(--flaeche);
  font-size: .62rem; font-weight: 700;
}

/* --- Stundenübersicht --- */

.stundenliste { list-style: none; margin: 0; padding: 0; }
.stundenliste li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 0; border-bottom: 1px solid var(--rand);
}
.stundenliste li:last-child { border-bottom: 0; }
.stunden-name { font-weight: 600; font-size: .92rem; }
.stunden-werte { font-size: .78rem; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.stunden-soll { white-space: nowrap; }
.stunden-balken {
  display: block; height: 5px; background: var(--rand); border-radius: 3px; overflow: hidden;
}
.stunden-balken > span { display: block; height: 100%; background: var(--akzent); }

/* --- Lohnabrechnungen: Zuweisung per Ziehen und Ablegen --- */
.lohn-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 760px) { .lohn-raster { grid-template-columns: 1fr; } }
.lohn-spalte h2 { display: flex; align-items: center; gap: 8px; }
.lohn-liste, .lohn-leute, .lohn-zugewiesen { list-style: none; margin: 0; padding: 0; }
.lohn-chip {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; margin: 0 0 8px; border: 1px solid var(--rand-stark);
  border-radius: var(--radius); background: var(--flaeche); cursor: grab;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.lohn-chip:active { cursor: grabbing; }
.lohn-chip.gewaehlt, .lohn-chip:focus-visible {
  outline: 2px solid var(--tinte); outline-offset: 1px; background: var(--flaeche-leise);
}
.lohn-chip.schwebt { opacity: .45; }
.lohn-chip-name { font-weight: 700; word-break: break-word; }
.lohn-chip-neben { color: var(--text-leise); font-size: .82rem; }
.lohn-chip-aktionen { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 4px; }
.lohn-chip-aktionen form { margin: 0; display: inline; }
.lohn-details summary { list-style: none; cursor: pointer; }
.lohn-details summary::-webkit-details-marker { display: none; }
.lohn-details[open] .suchzeile { margin-top: 6px; }
.lohn-ziel {
  padding: 10px 12px; margin: 0 0 8px; border: 1px dashed var(--rand);
  border-radius: var(--radius); transition: background .12s, border-color .12s;
}
.lohn-ziel.ueber, .lohn-ziel:focus-visible { border-style: solid; border-color: var(--tinte); background: var(--flaeche-leise); }
.lohn-ziel.bereit { border-color: var(--tinte); cursor: pointer; }
.lohn-ziel-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lohn-zugewiesen li {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  padding: 6px 0 0; font-size: .9rem;
}
.lohn-zugewiesen .lohn-chip-aktionen { margin-top: 0; }
.lohn-inaktiv { padding: 10px 12px; margin: 0 0 8px; border: 1px dashed var(--rand); border-radius: var(--radius); opacity: .75; }