/* Zeiterfassung eco Haustechnik AG
   Stil: Accent ladder, offene Flaeche ohne Top-Bar. Die Leiter kommt aus dem Blau des Logos:
   das volle Blau nur auf kleinen Marken und Daten, seine hellen Toene auf Flaechen.
   Die drei Logofarben tragen die drei Zustaende: Blau erfasst, Gruen abgeschlossen, Rot fehlt.

   Raster: Inhalt fluid, ein Abstand von 24 px horizontal und vertikal, Rand 24 px (Handy 16 px). */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #f7fbfd;
  --surface: #ffffff;
  --raised: #f1f5f8;
  --border: #e3e8ec;
  --rule: #eef2f5;
  --control: #c9d1d8;
  --text: #111827;
  --muted: #55606b;
  --accent: #0f97d6;
  --accent-soft: #e8f5fb;
  --accent-track: #cfeaf7;
  --accent-ink: #0b4a6b;
  --primary: #111827;
  --primary-ink: #ffffff;
  --positive: #4a6a08;
  --negative: #bd1226;
  --pill-positive-bg: #eef6c9; --pill-positive-ink: #39500a;
  --pill-negative-bg: #fdeaec; --pill-negative-ink: #8a0f1f;
  --pill-warning-bg: #fffbeb; --pill-warning-ink: #92400e;
  --pill-neutral-bg: #eef1f4; --pill-neutral-ink: #374151;
  --pill-accent-bg: #e8f5fb; --pill-accent-ink: #0b4a6b;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-title: 26px; --fs-section: 18px; --fs-lead: 32px; --fs-kpi: 24px; --fs-body: 14px; --fs-small: 12px;
  --sidebar-width: 232px;
  --pad: 24px; --gap: 24px; --card-pad: 20px;
  --radius-card: 8px; --radius-control: 6px;
  --control-height: 36px; --row-height: 45px;
  --bottombar: 58px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M-1 1 1-1M0 6 6 0M5 7 7 5' stroke='%2393a0ab' stroke-width='1'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { margin: 0; background: var(--ground); color: var(--text); font: var(--fs-body)/20px var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a, button, summary, .btn { touch-action: manipulation; }
button, .btn, .nav-item, .tab-item { user-select: none; -webkit-user-select: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
table, .num, .kpi-value, .tage input { font-variant-numeric: tabular-nums; }
.link { color: var(--accent-ink); font-weight: 500; text-underline-offset: 3px; }
.leise { color: var(--muted); }
.klein { font-size: var(--fs-small); line-height: 16px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Rahmen --- */
.app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 16px; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--border); }
.marke { display: block; padding: 0 8px 18px; }
.marke img { width: 84px; height: auto; }
.gruppe { margin: 20px 8px 6px; font-size: var(--fs-small); color: var(--muted); }
.nav-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: 8px; color: var(--muted); transition: background-color 150ms ease, color 150ms ease; }
.nav-item svg { width: 16px; height: 16px; flex: none; }
.nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.nav-item[aria-current="page"] svg { color: var(--accent); }
.nav-zahl { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pill-accent-bg); color: var(--accent-ink); font-size: var(--fs-small); line-height: 20px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.nav-item[aria-current="page"] .nav-zahl { background: var(--surface); }
.fuss { margin-top: auto; padding-top: 16px; }
.fuss-name { padding: 0 8px 4px; font-weight: 500; }
.nav-item.als-knopf { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
.canvas { min-width: 0; padding: var(--pad); max-width: 1320px; }
.topbar { display: none; }
.bottombar { display: none; }

/* --- Kopf --- */
.kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--gap); flex-wrap: wrap; }
.kopf h1 { font-size: var(--fs-title); line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.kopf .unter { margin-top: 4px; color: var(--muted); font-size: 15px; }
.kopf .unter strong { color: var(--text); font-weight: 500; }
.kopf-aktionen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wochen-nav { display: inline-flex; align-items: center; gap: 4px; }
.pfeil { display: inline-grid; place-items: center; width: var(--control-height); height: var(--control-height); border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); transition: background-color 150ms ease, transform 120ms var(--ease-out); }
.pfeil svg { width: 16px; height: 16px; }
.pfeil:active { transform: scale(0.96); background: var(--raised); }
.pfeil[aria-disabled="true"] { color: var(--control); pointer-events: none; }

/* --- Meldungen --- */
.meldungen { display: grid; gap: 8px; margin-bottom: var(--gap); }
.meldung { padding: 10px 14px; border-radius: var(--radius-control); background: var(--pill-accent-bg); color: var(--pill-accent-ink); }
.meldung.success { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.meldung.error { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.meldung.warning { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }

/* --- Flaechen --- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--card-pad); min-width: 0; }
.panel + .panel, .block + .block { margin-top: var(--gap); }
.panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.panel h2, .abschnitt h2 { font-size: var(--fs-section); line-height: 24px; font-weight: 600; }
.block { min-width: 0; }

.kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-bottom: var(--gap); }
.kpi { padding: 16px var(--card-pad); min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--border); }
.kpi-label { color: var(--muted); }
.kpi-value { margin-top: 6px; font-size: var(--fs-kpi); line-height: 1.15; font-weight: 500; letter-spacing: -0.01em; }
.kpi-value small { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 2px; letter-spacing: 0; }
.kpi-value.fuehrt { font-size: var(--fs-lead); font-weight: 600; }
.kpi-value.minus { color: var(--negative); }
.kpi-sub { margin-top: 4px; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }

/* --- Tabellen --- */
.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: collapse; }
th { height: 36px; padding: 0 12px; text-align: left; font-weight: 400; font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
td { padding: 12px; border-top: 1px solid var(--rule); vertical-align: baseline; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th.n, td.n { text-align: right; white-space: nowrap; }
td .unter { display: block; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
td .wer { font-weight: 500; }
tfoot td { border-top: 1px solid var(--control); font-weight: 600; }
.minus { color: var(--negative); }

.pill { display: inline-flex; flex: none; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--fs-small); font-weight: 500; background: var(--pill-neutral-bg); color: var(--pill-neutral-ink); white-space: nowrap; }
.pill.abgeschlossen { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.pill.erfasst { background: var(--pill-accent-bg); color: var(--pill-accent-ink); }
.pill.fehlt, .pill.teilweise { background: var(--pill-negative-bg); color: var(--pill-negative-ink); }
.pill.warnung { background: var(--pill-warning-bg); color: var(--pill-warning-ink); }
.nummern { display: flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.nummer-auffaellig { color: var(--pill-warning-ink); font-weight: 500; }
.test-band { padding: 6px 16px; background: var(--pill-warning-bg); color: var(--pill-warning-ink); font-size: var(--fs-small); line-height: 16px; text-align: center; }

/* --- Bedienung --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--control-height); padding: 0 14px; border-radius: var(--radius-control); border: 1px solid var(--control); background: var(--surface); font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, transform 120ms var(--ease-out); }
.btn:active { transform: scale(0.98); background: var(--raised); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: transparent; }
.btn.primary:active { background: #2a3444; }
.btn.textlich { border-color: transparent; background: transparent; padding: 0 6px; color: var(--accent-ink); }
.btn[disabled] { background: var(--raised); color: var(--muted); border-color: var(--border); cursor: not-allowed; }
.tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: var(--gap); overflow-x: auto; }
.tabs a { position: relative; padding: 10px 0; color: var(--muted); white-space: nowrap; }
.tabs a[aria-selected="true"] { color: var(--text); font-weight: 500; }
.tabs a[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text); }
.input, select.input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--control); border-radius: var(--radius-control); background: var(--surface); font-size: 16px; }
select.input { padding-right: 4px; }
.feld { display: grid; gap: 8px; align-content: start; }
.feld label, .feld .feld-label { font-weight: 500; }
.feld .hinweis { font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.feld .errorlist, .fehlerliste { color: var(--negative); font-size: var(--fs-small); line-height: 16px; }
.felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.felder.voll { grid-template-columns: minmax(0, 1fr); }
.felder.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.felder .breit { grid-column: 1 / -1; }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.filter { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }
.filter .feld { min-width: 130px; }
.filter .input { height: var(--control-height); font-size: 14px; }
.leer { display: grid; place-items: center; min-height: 72px; padding: 16px; border: 1px dashed var(--control); border-radius: var(--radius-control); color: var(--muted); text-align: center; }

/* --- Einstellungen und Stammdaten --- */
.abschnitt { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--gap); padding: 24px 0; border-top: 1px solid var(--border); }
.abschnitt:first-of-type { border-top: 0; padding-top: 0; }
.abschnitt p { margin-top: 6px; color: var(--muted); }
.fussaktionen { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.wochenplan { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.wochenplan .input { padding: 0 8px; text-align: right; }
.wochenplan label { font-weight: 400; color: var(--muted); font-size: var(--fs-small); }

/* --- Tageszeilen (Woche und Nachtragen) --- */
.tage { display: grid; }
/* Spalten: Tag, Arbeitsort, Stunden, Pikett, Pikett-Nr. (fasst vier Nummern), Abwesenheit, Vermerk */
.tag-zeile { display: grid; grid-template-columns: 112px minmax(140px, 1fr) 72px 72px 232px 112px; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule); }
.tage.ohne-pikett .tag-zeile { grid-template-columns: 112px minmax(140px, 1fr) 72px 112px; }
.tage.mit-vermerk .tag-zeile { grid-template-columns: 112px minmax(130px, 1fr) 72px 72px 216px 112px minmax(130px, 1fr); }
.tage.mit-vermerk.ohne-pikett .tag-zeile { grid-template-columns: 112px minmax(130px, 1fr) 72px 112px minmax(130px, 1fr); }
.tag-zeile.titel { border-top: 0; padding: 0 0 6px; font-size: var(--fs-small); color: var(--muted); }
.tag-zeile.titel .n { text-align: right; }
.tag-name { min-width: 0; }
.tag-name b { font-weight: 600; }
.tag-name .fei { display: block; font-size: var(--fs-small); line-height: 16px; color: var(--accent-ink); }
.tag-zeile label, .tag-zeile > div[class^="z-"] { display: block; min-width: 0; }
.mini { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tag-zeile .input { height: 40px; }
.z-std input.input, .z-pik input.input { text-align: right; padding: 0 10px; }
.tag-zeile.we .tag-name { color: var(--muted); }
.wert { display: block; text-align: right; padding-right: 10px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wert.txt { text-align: left; padding-right: 0; }
.tag-spaeter { grid-column: 2 / -1; font-size: var(--fs-small); }
.tag-fehler, .tag-hinweis { grid-column: 1 / -1; font-size: var(--fs-small); line-height: 16px; }
.tag-fehler { color: var(--negative); }
.tag-hinweis { color: var(--pill-warning-ink); }
.tag-zeile.hat-fehler .input { border-color: var(--negative); }
.leiste { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; margin: 16px calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); padding: 12px var(--card-pad); background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-card) var(--radius-card); flex-wrap: wrap; }

/* --- Wochenstreifen, das eigene Element dieser App --- */
.streifen { display: grid; grid-template-columns: repeat(7, 34px); gap: 3px; }
.zelle { position: relative; display: grid; place-items: center; height: 30px; border-radius: 4px; font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; }
.zelle.arbeit { background: var(--accent-soft); color: var(--accent-ink); }
.zelle.ferien { background: var(--pill-positive-bg); color: var(--pill-positive-ink); }
.zelle.krank { background: var(--surface) var(--hatch); color: var(--text); outline: 1px solid var(--control); outline-offset: -1px; }
.zelle.unfall { background: var(--raised) var(--hatch); color: var(--text); outline: 1px solid var(--muted); outline-offset: -1px; }
.zelle.militaer { color: var(--text); outline: 1px solid var(--muted); outline-offset: -1px; }
.zelle.feiertag { background: var(--raised); color: var(--muted); }
.zelle.fehlt { outline: 1px dashed var(--negative); outline-offset: -1px; }
.zelle.kommt { outline: 1px dashed var(--control); outline-offset: -1px; }
.zelle.frei { background: transparent; }
.zelle.pikett::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 3px; border-radius: 1px; background: var(--accent); }
.legende { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.legende li { display: inline-flex; align-items: center; gap: 6px; }
.legende .zelle { width: 20px; height: 20px; font-size: 10px; }

/* --- Wochenpruefung --- */
.pruef-kopf, .pruef-zeile { display: grid; grid-template-columns: minmax(170px, 1.3fr) 256px 72px 72px 148px 112px; gap: 12px; align-items: center; }
.pruef-kopf { height: 36px; font-size: var(--fs-small); color: var(--muted); }
.pruef-zeile { min-height: 58px; padding: 10px 0; border-top: 1px solid var(--rule); }
.pruef-kopf .n, .pruef-zeile .n { text-align: right; font-variant-numeric: tabular-nums; }
.pruef-wer { font-weight: 500; }
.pruef-wer .unter { display: block; font-weight: 400; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
.pruef-aktion { text-align: right; }
.spaet { display: block; font-size: var(--fs-small); line-height: 16px; color: var(--negative); margin-top: 2px; }

.tabelle-breit th:first-child, .tabelle-breit td:first-child { position: sticky; left: 0; background: var(--surface); }

/* --- Anmeldung --- */
.anmeldung { min-height: 100dvh; display: grid; place-items: center; padding: 16px; }
.anmeldung .karte { width: 100%; max-width: 380px; }
.anmeldung img { width: 112px; margin-bottom: 24px; }
.anmeldung h1 { font-size: 22px; line-height: 28px; font-weight: 700; margin-bottom: 4px; }
.anmeldung .felder { margin-top: 20px; }
.anmeldung .btn { width: 100%; height: 44px; margin-top: 16px; }

@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--raised); color: var(--text); }
  .nav-item[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-ink); }
  .btn:hover { background: var(--raised); }
  .btn.primary:hover { background: #2a3444; }
  .pfeil:hover { background: var(--raised); }
  .link:hover, .pruef-wer a:hover { text-decoration: underline; }
}

/* --- Tablet und Handy: die Navigation klappt weg --- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .canvas { padding: 16px 16px calc(var(--bottombar) + env(safe-area-inset-bottom, 0px) + 16px); }
  .topbar { display: flex; align-items: center; justify-content: space-between; height: calc(48px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0; background: var(--surface); border-bottom: 1px solid var(--border); }
  .topbar img { width: 56px; height: auto; }
  .topbar .wer { color: var(--muted); font-size: var(--fs-small); }
  .bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--surface); border-top: 1px solid var(--border); }
  .tab-item { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: var(--bottombar); color: var(--muted); font-size: var(--fs-small); line-height: 16px; list-style: none; cursor: pointer; }
  .tab-item::-webkit-details-marker { display: none; }
  .tab-item svg { width: 20px; height: 20px; }
  .tab-item[aria-current="page"] { color: var(--accent-ink); font-weight: 500; }
  .tab-item[aria-current="page"] svg { color: var(--accent); }
  .tab-item:active { background: var(--raised); }
  .tab-zahl { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent-ink); color: #fff; font-size: 11px; line-height: 16px; text-align: center; }
  .mehr[open] > .blatt { position: fixed; inset: 0 0 calc(var(--bottombar) + env(safe-area-inset-bottom, 0px)) 0; z-index: 9; display: flex; flex-direction: column; gap: 2px; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 16px; background: var(--surface); overflow: auto; overscroll-behavior: contain; }
  .blatt .nav-item { height: 48px; font-size: 16px; }
  .kopf h1 { font-size: 22px; line-height: 28px; }
  .kopf-aktionen .btn.primary { width: 100%; height: 44px; }
  .kopf-aktionen { width: 100%; }
  .btn { min-height: 44px; }
  .pfeil { width: 44px; height: 44px; }
  .kpis { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi + .kpi { border-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .kpi:nth-child(2n) { border-left: 1px solid var(--border); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Drei Werte der Woche bleiben in einer Zeile, damit die Tage hoch oben beginnen */
  .kpis.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.drei .kpi { padding: 10px 12px; grid-column: auto; border-top: 0; }
  .kpis.drei .kpi + .kpi { border-left: 1px solid var(--border); }
  .kpis.drei .kpi-value { font-size: 20px; margin-top: 2px; }
  .kopf.eng { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 16px; }
  .kopf.eng .kopf-aktionen { width: auto; flex-wrap: nowrap; }
  .abschnitt { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .felder, .felder.drei { grid-template-columns: minmax(0, 1fr); }
  .filter { gap: 8px; }
  .filter .feld { flex: 1 1 40%; min-width: 0; }
  .filter .btn { flex: 1 1 100%; }
  .input, select.input, .filter .input { height: 44px; font-size: 16px; }
  .tag-zeile .input { height: 44px; }
  .leiste { bottom: calc(var(--bottombar) + env(safe-area-inset-bottom, 0px)); }
  .leiste .btn { flex: 1; }
  /* Handy: pro Tag ein Block. Tag und Arbeitsort oben, darunter Stunden, Pikett, Abwesenheit,
     die Pikett-Nr. erscheint erst, wenn Pikettstunden eingetragen sind. */
  .tag-zeile.titel { display: none; }
  .tag-zeile, .tage.ohne-pikett .tag-zeile, .tage.mit-vermerk .tag-zeile, .tage.mit-vermerk.ohne-pikett .tag-zeile {
    grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; padding: 12px 0;
    grid-template-areas: "name name ort ort ort ort" "std std pik pik abw abw" "nr nr nr nr nr nr" "ver ver ver ver ver ver";
  }
  .tage.ohne-pikett .tag-zeile, .tage.mit-vermerk.ohne-pikett .tag-zeile {
    grid-template-areas: "name name ort ort ort ort" "std std std abw abw abw" "ver ver ver ver ver ver";
  }
  .mini { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; margin-bottom: 2px; font-size: var(--fs-small); line-height: 16px; color: var(--muted); }
  .tag-name { grid-area: name; align-self: center; }
  .z-ort { grid-area: ort; } .z-std { grid-area: std; } .z-pik { grid-area: pik; }
  .z-nr { grid-area: nr; } .z-abw { grid-area: abw; } .z-vermerk { grid-area: ver; }
  .tag-spaeter { grid-column: 3 / -1; grid-row: 1; align-self: center; }
  .tag-zeile.lesend .wert { text-align: left; padding-right: 0; }
  .tag-zeile:has(.z-pik input:placeholder-shown):not(.hat-fehler) .z-nr { display: none; }
  .pruef-kopf { display: none; }
  .pruef-zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "wer status" "streifen streifen" "summe aktion"; gap: 8px 12px; padding: 14px 0; }
  .pruef-wer { grid-area: wer; }
  .pruef-status { grid-area: status; }
  .pruef-streifen { grid-area: streifen; }
  .pruef-summe { grid-area: summe; display: flex; gap: 12px; color: var(--muted); }
  .pruef-summe .n { text-align: left; }
  .pruef-summe .n::before { content: attr(data-kurz) " "; }
  .pruef-aktion { grid-area: aktion; }
  .streifen { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .zelle { height: 34px; }
  .legende .zelle { height: 20px; }
}
@media (min-width: 861px) { .pruef-summe { display: contents; } }
@media (max-width: 480px) {
  :root { --card-pad: 14px; }
  .wochenplan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tag-zeile input.input { padding: 0 8px; }
  .tag-zeile select.input { padding: 0 2px 0 6px; }
  /* Kurze Tabellen passen ohne seitliches Scrollen auf das Handy */
  .table-wrap:not(.tabelle-breit) th, .table-wrap:not(.tabelle-breit) td { padding-left: 4px; padding-right: 4px; }
  .table-wrap:not(.tabelle-breit) th:first-child, .table-wrap:not(.tabelle-breit) td:first-child { padding-left: 0; }
  .table-wrap:not(.tabelle-breit) th:last-child, .table-wrap:not(.tabelle-breit) td:last-child { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; } }

@media print {
  .sidebar, .topbar, .bottombar, .leiste, .kopf-aktionen { display: none !important; }
  .app { display: block; }
  body { background: #fff; }
}