/* Schdondazeddl — Elektro DC
   Mobile-only, 360px target. Tradesmen-engineering: warm paper
   background, IBM Plex Sans body, IBM Plex Mono for headings,
   numerals and the wordmark. Hairlines instead of cards. One
   accent color. Native HTML controls, semantic class names. */

/* ──────────────────────────────────────────────────────────── */
/* App root inside the device frame                              */
/* ──────────────────────────────────────────────────────────── */
.app-root {
  /* Paper — pure white, frisch, nicht schmutzig */
  --app-bg:        #ffffff;
  --app-paper:     #fafaf9;             /* leicht abgesetzte Sektionen, wenn nötig */
  --app-surface:   #ffffff;
  /* Ink */
  --app-ink:       #0a0a0a;
  --app-ink-2:     #1a1a18;
  --app-ink-muted: #5c5853;
  --app-ink-soft:  #8a857c;
  /* Lines */
  --app-line:      #e8e4dc;             /* hairlines */
  --app-line-2:    #b8b3a8;             /* input borders, strong */
  --app-line-ink:  #0a0a0a;
  /* Accents */
  --app-accent:    #0b53d8;             /* cobalt blue */
  --app-accent-ink:#ffffff;
  --app-accent-soft: color-mix(in srgb, var(--app-accent) 18%, transparent);
  --app-verbucht:  #8a9d7e;             /* mattes Salbei-Grün statt poppiges Smaragd */
  --app-danger:    #b91c1c;

  /* Type families */
  --font-body:     'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-mono:     'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  height: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--font-body);
  font-feature-settings: 'ss01', 'ss02';
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ──────────────────────────────────────────────────────────── */
/* Screen scaffolding                                            */
/* ──────────────────────────────────────────────────────────── */
.screen {
  display: flex;
  flex-direction: column;
  height: 100%;                          /* exact fit so screen-body scrolls */
}
.screen-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;                    /* anchor for week rail */
}

/* ──────────────────────────────────────────────────────────── */
/* Header                                                        */
/* "Elektro DC" — small caps utility line                        */
/* "Schdondazeddl" — Plex Mono wordmark                          */
/* ──────────────────────────────────────────────────────────── */
.app-header {
  flex: 0 0 auto;
  background: #f1f1ee;             /* leicht abgesetzt — als App-Chrome lesbar */
  border-bottom: 1px solid var(--app-line);
  position: relative;
  z-index: 5;
}
.app-header::after { display: none; }
.app-header-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 64px;
  padding: 0;
}
.header-spacer { display: block; width: 44px; height: 44px; }
.header-back {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--app-ink);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.header-back:active { background: rgba(0,0,0,0.06); }
.header-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  line-height: 1;
  min-width: 0;
}
.header-utility {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  white-space: nowrap;
}
.header-utility-gmbh { color: var(--app-ink-2); font-weight: 600; }
.header-utility-sep {
  color: var(--app-line-2);
  font-size: 14px;
}
.header-owner {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: var(--app-ink-muted);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.header-owner b {
  font-weight: 600;
  color: var(--app-ink);
}
/* ──────────────────────────────────────────────────────────── */
/* Wordmark — 4 candidate looks. Toggled via [data-wordmark] on   */
/* the app root from the Tweaks panel. Each variant has its own   */
/* eyebrow treatment so the whole brand block changes character.  */
/* ──────────────────────────────────────────────────────────── */

/* — Default: Bricolage Grotesque (modern industrial, sturdy) — */
.header-wordmark {
  font-family: 'Bricolage Grotesque', var(--font-body);
  font-weight: 800;
  font-size: 26px;
  line-height: 0.95;
  letter-spacing: -0.038em;
  font-variation-settings: 'opsz' 48, 'wdth' 100;
  color: var(--app-ink);
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.header-wordmark-dot {
  font-style: normal;
  font-weight: 800;
  color: oklch(0.62 0.16 38);   /* warm orange — workshop signal */
  margin-left: 0.02em;
}
.empty-wordmark {
  margin: 0 0 18px;
  font-family: 'Bricolage Grotesque', var(--font-body);
  font-weight: 800;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.045em;
  font-variation-settings: 'opsz' 96, 'wdth' 100;
  color: var(--app-ink);
}

/* — Workshop Signage: Big Shoulders Display (industrial signage) — */
[data-wordmark="signage"] .header-wordmark {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.005em;
  font-variation-settings: normal;
  text-transform: uppercase;
}
[data-wordmark="signage"] .empty-wordmark {
  font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 900;
  font-size: 50px;
  letter-spacing: 0.005em;
  line-height: 0.92;
  font-variation-settings: normal;
  text-transform: uppercase;
}

/* — Tech Stencil: Major Mono Display (rivet-stamp logo) — */
[data-wordmark="stencil"] .header-wordmark {
  font-family: 'Major Mono Display', monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.02em;
  font-variation-settings: normal;
}
[data-wordmark="stencil"] .empty-wordmark {
  font-family: 'Major Mono Display', monospace;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.1;
  font-variation-settings: normal;
}

/* — Chunky: Bagel Fat One (fat single-weight display) — */
[data-wordmark="chunky"] .header-wordmark {
  font-family: 'Bagel Fat One', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.015em;
  font-variation-settings: normal;
}
[data-wordmark="chunky"] .empty-wordmark {
  font-family: 'Bagel Fat One', system-ui, sans-serif;
  font-weight: 400;
  font-size: 46px;
  letter-spacing: -0.03em;
  line-height: 0.95;
  font-variation-settings: normal;
}

/* ──────────────────────────────────────────────────────────── */
/* Eyebrow polish — gives "Elektro DC" some craft.               */
/* ──────────────────────────────────────────────────────────── */
.header-utility {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  white-space: nowrap;
}
.header-utility::before,
.header-utility::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--app-ink-soft);
  opacity: 0.5;
}
.header-utility-gmbh {
  color: var(--app-ink);
  font-weight: 700;
  letter-spacing: 0.22em;
}

/* Signage variant: prominent eyebrow with badge marks */
[data-wordmark="signage"] .header-utility {
  font-family: 'Big Shoulders Display', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
}
[data-wordmark="signage"] .header-utility-gmbh {
  font-weight: 800;
}

/* Stencil variant: very thin rules, mono caps */
[data-wordmark="stencil"] .header-utility {
  font-family: 'Major Mono Display', monospace;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.24em;
}
[data-wordmark="stencil"] .header-utility-gmbh {
  font-weight: 400;
}

/* Chunky variant: condensed body sans, almost ticket-stub */
[data-wordmark="chunky"] .header-utility {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ──────────────────────────────────────────────────────────── */
/* Empty state — editorial, dominates the first screen           */
/* ──────────────────────────────────────────────────────────── */
.empty-state {
  padding: 32px 20px 28px;
  position: relative;
}
.empty-eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  white-space: nowrap;
}
.empty-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: var(--app-accent);
  vertical-align: 4px;
  margin-right: 8px;
}
.empty-prose {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--app-ink-2);
  max-width: 28ch;
}
.empty-prose b {
  font-weight: 600;
  color: var(--app-ink);
}
.empty-meta {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--app-line);
  font-size: 12.5px;
  color: var(--app-ink-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.empty-meta-greet {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: var(--app-ink);
  white-space: nowrap;
}
.empty-meta-date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────── */
/* Zeit list — editorial rows, big date numerals                 */
/* ──────────────────────────────────────────────────────────── */
.zeit-liste-wrap {
  position: relative;
  min-height: 100%;
}
.zeit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zeit-list-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--app-line-ink);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--app-bg);
}
.zeit-list-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.1;
  flex-wrap: wrap;
}
.zeit-list-title-name {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--app-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.zeit-list-title-period {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  color: var(--app-ink-muted);
  letter-spacing: -0.005em;
}
.zeit-list-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--app-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Week header — KW als kleines Mono-Label oben, Datum + Summen drunter. */
.zeit-week-header {
  position: sticky;
  top: 32px;       /* directly under thin list header */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 20px 12px;
  margin-top: 14px;
  background: var(--app-bg);
  border-top: 1.5px solid var(--app-line-ink);
  border-bottom: 1px solid var(--app-line);
  font-variant-numeric: tabular-nums;
}
.zeit-week-header:first-of-type {
  margin-top: 0;
}
.zeit-week-kw {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-accent);
  white-space: nowrap;
}
.zeit-week-main {
  display: flex;
  align-items: baseline;
}
.zeit-week-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.zeit-week-sums {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.zeit-week-sum {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--app-ink-muted);
}
.zeit-week-sum-icon {
  flex: 0 0 auto;
  color: var(--app-line-2);
  transform: translateY(2px);          /* optisch auf Baseline ziehen */
}
.zeit-week-sum-value {
  font-variant-numeric: tabular-nums;
}
.zeit-week-sum-sep {
  color: var(--app-line-2);
  font-size: 11px;
}

.zeit-row-li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zeit-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--app-line);
  align-items: stretch;
  position: relative;
  background: var(--app-bg);
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.zeit-row:hover  { background: color-mix(in srgb, var(--app-ink) 4%, var(--app-bg)); }
.zeit-row:active { background: color-mix(in srgb, var(--app-ink) 8%, var(--app-bg)); }
.zeit-row:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-bg));
  box-shadow: inset 3px 0 0 var(--app-accent);
}
.zeit-row.is-booked {
  background: color-mix(in srgb, var(--app-ink) 3%, var(--app-bg));
}
.zeit-row.is-booked .zeit-row-baustelle,
.zeit-row.is-booked .zeit-row-daynum,
.zeit-row.is-booked .zeit-row-arbeit { color: var(--app-ink-muted); }
.zeit-row.is-booked .zeit-row-notiz,
.zeit-row.is-booked .zeit-row-fahrt,
.zeit-row.is-booked .zeit-row-weekday,
.zeit-row.is-booked .zeit-row-monthyear { color: var(--app-ink-soft); }
.zeit-row-li:last-child .zeit-row { border-bottom: 1px solid var(--app-line-ink); }

/* Date block — column stretches full row height; verbucht-Badge sitzt unten. */
.zeit-row-date {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.zeit-row-booked {
  margin-top: auto;       /* schiebt's an die Unterkante — selbe Höhe wie .zeit-row-times */
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--app-verbucht);
  opacity: 0.85;
}
.zeit-row.is-booked .zeit-row-booked {
  color: var(--app-verbucht);
  opacity: 0.75;
}
.zeit-row-weekday {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  line-height: 1;
  margin-bottom: 2px;
}
.zeit-row-daynum {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 26px;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}
.zeit-row-monthyear {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--app-ink-muted);
  line-height: 1.1;
}

/* Main column — baustelle + notiz oben, times an die Unterkante. */
.zeit-row-main {
  min-width: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
}
.zeit-row-baustelle {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--app-ink);
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.zeit-row-meta {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--app-ink-muted);
  line-height: 1.3;
}
.zeit-row-name { font-weight: 500; }
.zeit-row-notiz {
  margin-top: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--app-ink-2);
  line-height: 1.35;
  padding-left: 10px;
  border-left: 2px solid var(--app-line-2);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Inline time line — rechts in der Hauptspalte ausgerichtet, an die Unterkante. */
.zeit-row-times {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.zeit-row-arbeit,
.zeit-row-fahrt {
  font-size: 12px;
  font-weight: 500;
  color: var(--app-ink-muted);
}

/* Verbucht-Badge label + Row-Hintergrund-Tint */
.zeit-row-booked-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.zeit-row.is-booked {
  background: color-mix(in srgb, var(--app-verbucht) 3%, var(--app-bg));
}

/* Header-Action (Senden-Icon oben rechts). Badge zeigt unverbuchte Anzahl. */
.header-action {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--app-ink);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.header-action:disabled {
  color: var(--app-line-2);
  cursor: default;
}
.header-action:not(:disabled):active { background: rgba(0,0,0,0.06); }
.header-action-badge {
  position: absolute;
  top: 7px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--app-accent);
  color: var(--app-accent-ink);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Export-Banner — entfernt: Senden-Action lebt im Header. */

/* ──────────────────────────────────────────────────────────── */
/* Week rail — floating right-edge overlay during scroll         */
/* ──────────────────────────────────────────────────────────── */
.week-rail {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.week-rail.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.week-rail-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--app-ink) 92%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(26,24,21,0.18);
}
.week-rail-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  cursor: pointer;
  user-select: none;
}
.week-rail-kw {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums;
  transition: color 120ms ease;
}
.week-rail-item.is-active .week-rail-kw {
  color: #fff;
  font-weight: 700;
}
.week-rail-item.is-active::before {
  content: '';
  position: absolute;
  right: 100%;
  width: 4px;
  height: 18px;
  margin-right: 6px;
  border-radius: 4px;
  background: var(--app-accent);
}
.week-rail-item { position: relative; }

/* ──────────────────────────────────────────────────────────── */
/* Form                                                          */
/* ──────────────────────────────────────────────────────────── */
.form-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 10px;
  border-bottom: 1px solid var(--app-line-ink);
}
.form-section-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--app-ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.form-section-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--app-ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Inline edit-mode controls — delete + confirm */
.form-section-delete-btn,
.link-danger,
.link-muted {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.form-section-delete-btn,
.link-danger { color: var(--app-danger); }
.link-danger:hover { text-decoration: underline; }
.link-muted { color: var(--app-ink-soft); font-weight: 500; }
.link-muted:hover { color: var(--app-ink); }

/* Footer unter der Zeit-Liste fuer Aufraeum-Aktionen. Nur sichtbar wenn
   es verbuchte Eintraege gibt -- die kann der User vom Geraet kicken,
   im Buero bleiben sie ja erhalten. */
.zeit-list-footer {
  display: flex;
  justify-content: center;
  padding: 18px 20px 32px;
}
.zeit-list-cleanup {
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.form-section-delete {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.form-fields {
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 0;
  margin: 0;
  min-width: 0;
}
.form-fields[disabled] {
  /* Native disabled-Fieldset dimmt alle Kinder, sperrt Eingaben. */
  opacity: 0.85;
}
.form-fields[disabled] .field input,
.form-fields[disabled] .field textarea,
.form-fields[disabled] .dauer-picker {
  background: color-mix(in srgb, var(--app-ink) 5%, var(--app-bg));
  cursor: not-allowed;
}

/* Inline hint shown when editing an already-exported entry.
   Warm-orange "workshop signal" tone (same hue as the wordmark dot)
   to telegraph "achtung, das hier passiert" without going full danger
   red -- saving here is a legitimate corrective action, not an error. */
.form-export-hint {
  margin: 0;
  padding: 12px 20px;
  background: color-mix(in srgb, oklch(0.62 0.16 38) 10%, var(--app-bg));
  border-bottom: 1px solid color-mix(in srgb, oklch(0.62 0.16 38) 30%, var(--app-line));
  border-left: 3px solid oklch(0.62 0.16 38);
  font-size: 13px;
  line-height: 1.45;
  color: var(--app-ink);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Dauer-Pickers stapeln vertikal -- 360px reicht fuer Std-Select +
   Min-Select + zwei Stepper-Buttons nicht nebeneinander. */
.field-row--dauer {
  grid-template-columns: 1fr;
  gap: 18px;
}
.field-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
}
.field-label-hint {
  font-weight: 500;
  color: var(--app-line-2);
  letter-spacing: 0.06em;
}

/* Inputs — paper-line style, no box. Bottom rule only. */
.field input,
.field textarea {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--app-ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--app-line-2);
  border-radius: 0;
  padding: 8px 0 10px;
  min-height: 44px;
  box-sizing: border-box;
  transition: border-color 120ms ease;
}
.field textarea {
  resize: none;
  min-height: 48px;
  line-height: 1.45;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--app-accent);
  border-bottom-width: 2px;
  padding-bottom: 9px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--app-line-2);
  font-weight: 400;
}

/* Date + numeric inputs use mono for the value */
.datum-input,
.zeit-input {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
  letter-spacing: -0.01em;
}

/* Dauer-Picker — Stunden-Input (Zahl + Datalist) + Minuten-<select>. */
.dauer-picker {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: end;
  gap: 6px;
  min-height: 44px;
  border-bottom: 1.5px solid var(--app-line-2);
  padding: 6px 0 7px;
  transition: border-color 120ms ease;
}
.dauer-picker:focus-within {
  border-bottom-color: var(--app-accent);
  border-bottom-width: 2px;
  padding-bottom: 6px;
}
.dauer-input,
.dauer-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  letter-spacing: -0.02em;
  color: var(--app-ink);
  padding: 0 16px 0 2px;
  margin: 0;
  min-height: 32px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  /* unified chevron: both hour-input and minute-select show the same caret */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0px center;
  background-size: 10px 10px;
}
.dauer-input::-webkit-outer-spin-button,
.dauer-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.dauer-input { -moz-appearance: textfield; }
.dauer-input::placeholder { color: var(--app-ink-soft); font-weight: 600; }
.dauer-input:focus,
.dauer-select:focus { outline: none; }
.dauer-unit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  padding-bottom: 4px;
}

/* Error state mirrors text inputs */
.field:has(.field-error) .dauer-picker {
  border-bottom-color: var(--app-danger);
}

/* ──────────────────────────────────────────────────────────── */
/* Inline-Picker — Std-Select + Min-Select + ±5 Stepper.         */
/* Schnellster Pfad ohne Popup: zwei Taps fuer gaengige Werte,   */
/* ±5 fuer Feinjustierung.                                       */
/* ──────────────────────────────────────────────────────────── */
.dauer-inline {
  display: grid;
  grid-template-columns: auto auto auto auto 1fr;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 6px 0 8px;
  border-bottom: 1.5px solid var(--app-line-2);
  transition: border-color 120ms ease;
}
.dauer-inline:focus-within {
  border-bottom-color: var(--app-accent);
  border-bottom-width: 2px;
  padding-bottom: 7px;
}
.dauer-inline.has-error {
  border-bottom-color: var(--app-danger);
}
.dauer-inline-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--app-ink);
  padding: 0 14px 0 2px;
  margin: 0;
  min-height: 36px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M1 3l4 4 4-4' stroke='%230a0a0a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px 10px;
}
.dauer-inline-select:focus { outline: none; }
.dauer-inline-h { min-width: 44px; }
.dauer-inline-m { min-width: 60px; }
.dauer-inline-unit {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-ink-soft);
  align-self: end;
  padding-bottom: 6px;
}
.dauer-inline-steppers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
  padding-left: 4px;
}
.dauer-step {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1.5px solid var(--app-line-2);
  border-radius: 999px;
  width: 44px;
  height: 32px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.dauer-step:active {
  background: var(--app-ink);
  color: var(--app-bg);
  border-color: var(--app-ink);
}
.dauer-step:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}

/* Vorschlags-Pille: "Letzte Schicht 8:00 ↺" -- tap to apply. Sitzt
   ueber dem Picker, gestrichelter Rahmen signalisiert: das ist nur
   ein Vorschlag, keine festgelegte Eingabe. */
.zeit-suggest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 4px 0 0;
  padding: 5px 10px 5px 8px;
  border: 1px dashed var(--app-line-2);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--app-ink-muted);
  cursor: pointer;
  transition: border-color 100ms ease, background 100ms ease, color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.zeit-suggest:hover {
  border-color: var(--app-ink);
  color: var(--app-ink);
}
.zeit-suggest:active {
  background: var(--app-line);
}
.zeit-suggest:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}
.zeit-suggest-icon {
  flex: 0 0 auto;
  color: var(--app-ink-soft);
  transform: translateY(-0.5px);
}
.zeit-suggest:hover .zeit-suggest-icon { color: var(--app-ink); }
.zeit-suggest-label { font-weight: 500; }
.zeit-suggest-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--app-ink);
  padding-left: 2px;
}

/* Baustellen-Combobox — eigenes Dropdown (statt datalist) damit pro
   Vorschlag ein ×-Button möglich ist. Erscheint nur beim Fokus/Tippen.
   Sitzt absolut UNTER dem Input — das Form-Layout muss platz lassen. */
.baustelle-combo {
  position: relative;
}
.baustelle-listbox {
  list-style: none;
  margin: 0;
  padding: 4px;
  position: absolute;
  top: calc(100% + 4px);
  left: -8px;
  right: -8px;
  z-index: 10;
  background: var(--app-paper);
  border: 1.5px solid var(--app-line-ink);
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(10,10,10,0.18);
  max-height: 260px;
  overflow-y: auto;
}
.baustelle-option {
  display: flex;
  align-items: stretch;
}
.baustelle-option + .baustelle-option {
  border-top: 1px solid var(--app-line);
}
.baustelle-option.is-highlighted {
  background: color-mix(in srgb, var(--app-accent) 8%, transparent);
}
.baustelle-option-pick,
.baustelle-option-dismiss {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.baustelle-option-pick {
  flex: 1 1 auto;
  text-align: left;
  padding: 10px 6px 10px 10px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--app-ink);
  letter-spacing: -0.005em;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.baustelle-option-pick:hover  { background: color-mix(in srgb, var(--app-ink) 5%, transparent); }
.baustelle-option-pick:active { background: color-mix(in srgb, var(--app-ink) 10%, transparent); }
.baustelle-option-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  color: var(--app-ink-soft);
  min-width: 36px;
  flex: 0 0 auto;
}
.baustelle-option-dismiss:hover  { background: color-mix(in srgb, var(--app-danger) 10%, transparent); color: var(--app-danger); }
.baustelle-option-dismiss:active { background: color-mix(in srgb, var(--app-danger) 20%, transparent); color: var(--app-danger); }
.field-error {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--app-danger);
  font-weight: 500;
}
/* Soft hint (e.g. "already 6h logged today") */
.field-hint {
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--app-ink-soft);
}
.field-hint b {
  color: var(--app-ink);
  font-weight: 600;
}
.field:has(.field-error) input,
.field:has(.field-error) textarea {
  border-bottom-color: var(--app-danger);
}

/* ──────────────────────────────────────────────────────────── */
/* Action bar — bottom-anchored primary button                   */
/* One primary action per screen; a bar would imply secondaries  */
/* we deliberately omit in V1.                                   */
/* ──────────────────────────────────────────────────────────── */
.action-bar {
  flex: 0 0 auto;
  padding: 14px 20px 18px;
  background: var(--app-bg);
  border-top: 1px solid transparent;
  z-index: 4;
}
.btn-primary {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--app-accent-ink);
  background: var(--app-ink);
  border: 1.5px solid var(--app-ink);
  border-radius: 999px;
  min-height: 54px;
  padding: 0 22px;
  cursor: pointer;
  transition: transform 80ms ease, background 120ms ease;
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  /* Accent pill on the right — the only chrome flourish */
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--app-accent);
  margin-left: 4px;
}
.btn-primary:hover  { background: #000; }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible {
  outline: 3px solid var(--app-accent-soft);
  outline-offset: 2px;
}
.btn-primary--block::after { display: none; }     /* no dot on dialog block button */

/* Secondary button — used in dialog. Outlined, sturdy. */
.btn-secondary {
  appearance: none;
  display: block;
  width: 100%;
  font: inherit;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--app-ink);
  background: transparent;
  border: 1.5px solid var(--app-ink);
  border-radius: 999px;
  min-height: 48px;
  padding: 0 18px;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn-secondary:hover  { background: color-mix(in srgb, var(--app-ink) 6%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--app-ink) 12%, transparent); }

/* ──────────────────────────────────────────────────────────── */
/* Rename-Baustelle dialog                                       */
/* ──────────────────────────────────────────────────────────── */
.rename-dialog {
  width: min(320px, calc(100% - 32px));
  max-width: 320px;
  margin: auto;
  padding: 0;
  border: 1.5px solid var(--app-ink);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  box-shadow: 0 24px 60px rgba(10,10,10,0.35);
  font-family: var(--font-body);
}
.rename-dialog::backdrop {
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(2px);
}
.rename-dialog-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rename-dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-accent);
}
.rename-dialog-prose {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: 14px;
  line-height: 1.3;
}
.rename-dialog-from {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--app-ink-muted);
  text-decoration: line-through;
  text-decoration-color: var(--app-ink-muted);
  text-decoration-thickness: 1.5px;
}
.rename-dialog-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--app-ink-soft);
  padding-left: 4px;
}
.rename-dialog-to {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--app-ink);
}
.rename-dialog-explain {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--app-ink-2);
}
.rename-dialog-explain b { font-weight: 600; }

.rename-dialog-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.rename-dialog-list-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
  font-size: 12px;
}
.rename-dialog-list-date {
  font-family: var(--font-body);
  color: var(--app-ink-2);
}
.rename-dialog-list-time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--app-ink);
}
.rename-dialog-list-more {
  font-size: 11px;
  color: var(--app-ink-soft);
  font-style: normal;
  padding-top: 2px;
}

.rename-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.rename-dialog-actions .btn-primary,
.rename-dialog-actions .btn-secondary {
  padding: 0 14px;
  font-size: 14px;
  min-height: 48px;
}
.rename-dialog-cancel {
  align-self: center;
  padding: 6px 0;
}

/* ──────────────────────────────────────────────────────────── */
/* Selection-Mode (issue #12, PR 1)                              */
/* Top-of-list count bar + leading checkbox column on each row.  */
/* Booked rows render in selection mode too but are locked       */
/* (no checkbox, no edit click-through).                         */
/* ──────────────────────────────────────────────────────────── */
.selection-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--app-accent) 6%, var(--app-bg));
  border-bottom: 1px solid var(--app-line);
  font-family: var(--font-body);
}
.selection-bar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.selection-bar-count {
  font-size: 13px;
  color: var(--app-ink-2);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.selection-bar-count b {
  font-weight: 700;
  color: var(--app-ink);
}
.selection-bar-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.selection-bar-toggle:hover { color: var(--app-ink); }
.selection-bar-toggle:focus-visible {
  outline: 2px solid var(--app-accent-soft);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Issue #47: "Auch verbuchte" switch sits on its own row below the count/
   Alle-Keine pair. role=switch native checkbox keeps the a11y story clean;
   the visual track/thumb is decorative (aria-hidden), the label text is the
   accessible name. Hidden entirely when there are no booked entries. */
.selection-bar-include {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.selection-bar-include-input {
  /* Visually hidden but keyboard- and screen-reader-reachable.
     position:absolute + clip-path so focus order stays correct. */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.selection-bar-include-track {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--app-line-2);
  border-radius: 999px;
  transition: background 120ms ease;
}
.selection-bar-include-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--app-bg);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 120ms ease, background 120ms ease;
}
.selection-bar-include-input:checked + .selection-bar-include-track {
  background: var(--app-accent);
}
.selection-bar-include-input:checked + .selection-bar-include-track .selection-bar-include-thumb {
  transform: translateX(14px);
  background: var(--app-accent-ink);
}
.selection-bar-include-input:focus-visible + .selection-bar-include-track {
  outline: 2px solid var(--app-accent-soft);
  outline-offset: 2px;
}
.selection-bar-include-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-ink-2);
}
.selection-bar-include-input:checked ~ .selection-bar-include-label {
  color: var(--app-ink);
}

/* Row variants in selection-mode. Selectable rows render as <label>,
   locked (already-booked) rows render as <div>. Both get a leading
   checkbox cell so the date/main columns stay aligned with the rest
   of the list. */
.zeit-row.is-selection {
  grid-template-columns: 28px 64px 1fr;
  gap: 12px;
  cursor: default;
}
.zeit-row.is-selection.is-selectable {
  cursor: pointer;
}
.zeit-row.is-selection.is-locked {
  /* Dim further than .is-booked alone — clearer "out of scope" cue. */
  opacity: 0.7;
  cursor: not-allowed;
}
.zeit-row.is-selection.is-selected {
  background: color-mix(in srgb, var(--app-accent) 8%, var(--app-bg));
  box-shadow: inset 3px 0 0 var(--app-accent);
}
.zeit-row.is-selection.is-selectable:hover {
  background: color-mix(in srgb, var(--app-accent) 5%, var(--app-bg));
}
.zeit-row.is-selection.is-selectable:active {
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-bg));
}

.zeit-row-check {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}
.zeit-row-check--locked {
  /* Empty slot for booked rows so columns stay aligned. */
  position: relative;
}
.zeit-row-check--locked::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--app-line-2);
  display: block;
  border-radius: 1px;
}
.zeit-row-check-input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--app-ink);
  border-radius: 4px;
  background: var(--app-bg);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex: 0 0 auto;
  transition: background 100ms ease, border-color 100ms ease;
}
.zeit-row-check-input:checked {
  background: var(--app-accent);
  border-color: var(--app-accent);
}
.zeit-row-check-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 7px;
  height: 12px;
  border: solid var(--app-accent-ink);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.zeit-row-check-input:focus-visible {
  outline: 3px solid var(--app-accent-soft);
  outline-offset: 2px;
}

/* Action-bar variant for selection-mode — two buttons side by side.
   Abbrechen left (secondary, ~40% width), CSV senden right (primary,
   fills remaining). Sits in the same .action-bar slot, so the bottom
   edge stays consistent with normal mode. */
.action-bar-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.action-bar-cancel.btn-secondary {
  width: auto;
  flex: 0 0 auto;
  padding: 0 18px;
  min-height: 54px;
}
.action-bar-send.btn-primary {
  flex: 1 1 auto;
}
.action-bar-send.btn-primary:disabled {
  background: var(--app-line-2);
  border-color: var(--app-line-2);
  color: var(--app-bg);
  cursor: not-allowed;
}
.action-bar-send.btn-primary:disabled::after {
  background: var(--app-line);
}

/* ──────────────────────────────────────────────────────────── */
/* Pending-Marker (issue #12, PR 2)                              */
/* Rows whose CSV is dispatched but not user-confirmed-verbucht. */
/* Small clock chip + soft accent tint so it reads as "in        */
/* flight, awaits your confirmation" — distinct from .is-booked. */
/* ──────────────────────────────────────────────────────────── */
.zeit-row.is-pending {
  background: color-mix(in srgb, var(--app-accent) 4%, var(--app-bg));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--app-accent) 55%, transparent);
}
.zeit-row.is-pending:not(.is-selection):hover {
  background: color-mix(in srgb, var(--app-accent) 7%, var(--app-bg));
}
.zeit-row-pending {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--app-accent);
}
.zeit-row-pending-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────── */
/* Share-Choice dialog (issue #12 Solution 3)                    */
/* Desktop fallback when navigator.share is unavailable.         */
/* Three explicit options as full-width tap targets.             */
/* ──────────────────────────────────────────────────────────── */
.share-choice-dialog {
  width: min(340px, calc(100% - 32px));
  max-width: 340px;
  margin: auto;
  padding: 0;
  border: 1.5px solid var(--app-ink);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  box-shadow: 0 24px 60px rgba(10,10,10,0.35);
  font-family: var(--font-body);
}
.share-choice-dialog::backdrop {
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(2px);
}
.share-choice-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.share-choice-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-accent);
}
.share-choice-prose {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--app-ink-2);
}
.share-choice-prose b { color: var(--app-ink); font-weight: 700; }
.share-choice-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.share-choice-option {
  appearance: none;
  width: 100%;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  color: var(--app-ink);
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.share-choice-option:hover {
  background: color-mix(in srgb, var(--app-accent) 6%, var(--app-surface));
  border-color: var(--app-accent);
}
.share-choice-option:active {
  background: color-mix(in srgb, var(--app-accent) 12%, var(--app-surface));
}
.share-choice-option:focus-visible {
  outline: 2px solid var(--app-accent-soft);
  outline-offset: 2px;
}
.share-choice-option-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--app-accent);
}
.share-choice-option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.share-choice-option-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink);
  line-height: 1.2;
}
.share-choice-option-hint {
  font-size: 11.5px;
  color: var(--app-ink-soft);
  line-height: 1.3;
}
.share-choice-cancel {
  align-self: center;
  padding: 6px 0;
}

/* ──────────────────────────────────────────────────────────── */
/* Verbucht-Confirm dialog (issue #12 Solution 2)                */
/* Explicit "did the boss actually receive it?" confirmation.    */
/* Decouples file dispatch from exportedAt-marking — the head-   */
/* line correctness fix for the auto-mark disaster.              */
/* ──────────────────────────────────────────────────────────── */
.verbucht-confirm-dialog {
  width: min(340px, calc(100% - 32px));
  max-width: 340px;
  margin: auto;
  padding: 0;
  border: 1.5px solid var(--app-ink);
  border-radius: 4px;
  background: var(--app-paper);
  color: var(--app-ink);
  box-shadow: 0 24px 60px rgba(10,10,10,0.35);
  font-family: var(--font-body);
}
.verbucht-confirm-dialog::backdrop {
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(2px);
}
.verbucht-confirm-body {
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.verbucht-confirm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-accent);
}
.verbucht-confirm-prose {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--app-ink-2);
}
.verbucht-confirm-prose b { color: var(--app-ink); font-weight: 700; }
.verbucht-confirm-list {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.verbucht-confirm-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
  align-items: baseline;
}
.verbucht-confirm-list-date {
  font-family: var(--font-body);
  color: var(--app-ink-2);
}
.verbucht-confirm-list-baustelle {
  color: var(--app-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.verbucht-confirm-list-time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--app-ink);
}
.verbucht-confirm-list-more {
  font-size: 11px;
  color: var(--app-ink-soft);
  padding-top: 2px;
}
.verbucht-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.verbucht-confirm-actions .btn-primary,
.verbucht-confirm-actions .btn-secondary {
  padding: 0 14px;
  font-size: 14px;
  min-height: 48px;
}
.verbucht-confirm-foot {
  margin: 0;
  font-size: 11.5px;
  color: var(--app-ink-soft);
  line-height: 1.35;
}

/* ──────────────────────────────────────────────────────────── */
/* Outer stage                                                   */
/* ──────────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: #b8b3a8;                  /* darker industrial gray surround   */
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  display: grid;
  place-items: center;
  overflow: auto;
}
.device-stage {
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.stage-note {
  max-width: 360px;
  font-size: 12px;
  line-height: 1.5;
  color: #6e6962;
  text-align: center;
  font-family: var(--font-body);
}
.stage-note b { color: #1a1815; font-weight: 600; }
.stage-note i {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ──────────────────────────────────────────────────────────── */
/* Erststart — one-time name capture on first launch             */
/* ──────────────────────────────────────────────────────────── */
.erststart-body {
  display: flex;
  flex-direction: column;
}
.erststart-inner {
  padding: 30px 20px 24px;
  flex: 1 1 auto;
  min-height: 0;
}
.erststart-field {
  margin-top: 26px;
}
.erststart-body .action-bar {
  flex: 0 0 auto;
}

/* ──────────────────────────────────────────────────────────── */
/* Production overrides -- hide the designer-only tweaks panel.  */
/* Tweaks-panel.jsx still runs (it sets default accent/wordmark   */
/* via useEffect), but the panel UI itself stays invisible.       */
/* ──────────────────────────────────────────────────────────── */
.twk-panel { display: none !important; }

/* ──────────────────────────────────────────────────────────── */
/* Production: fill the viewport instead of centering a 360px    */
/* column against the designer's industrial-gray stage backdrop. */
/* On phones the app fills edge-to-edge. On wider screens we     */
/* keep a sane reading column so the layout doesn't stretch.     */
/* ──────────────────────────────────────────────────────────── */
body {
  background: var(--app-bg, #ffffff) !important;
  display: block !important;
  place-items: initial !important;
}
.app-root {
  min-block-size: 100dvh;
  inline-size: 100%;
  max-inline-size: 480px;
  margin-inline: auto;
}

/* "von Bob" lesbarer machen + naeher an die Wordmark. Vorher 14px vs 28px
   wirkte stark abgesetzt. */
.header-owner {
  font-size: 17px !important;
  color: var(--app-ink-muted) !important;
}
.header-brand {
  gap: 8px !important;
}
.header-utility-sep {
  font-size: 18px !important;
  margin-inline: -2px;
}

/* "von Bob" in eigene Zeile unter der Wordmark stapeln statt inline. */
.header-brand {
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
.header-utility-sep { display: none !important; }
.header-owner {
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* PWA install hint -- fixed banner above the bottom action-bar.
   Hidden when standalone or after dismiss. */
.install-hint {
  position: fixed;
  inset-inline: 12px;
  bottom: 84px;
  z-index: 30;
  background: var(--app-ink, #1a1a1a);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 14px 16px;
  max-inline-size: 460px;
  margin-inline: auto;
}
.install-hint-body { display: flex; flex-direction: column; gap: 10px; }
.install-hint-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #fff;
}
.install-hint-text b { font-weight: 600; }
.install-hint-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.install-hint-primary,
.install-hint-dismiss {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}
.install-hint-primary {
  background: #fff;
  color: var(--app-ink, #1a1a1a);
}
.install-hint-dismiss {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.2);
}
.install-hint-primary:active,
.install-hint-dismiss:active { transform: translateY(1px); }

/* Version-Tag rechts unten -- diskret, tap-bar fuer Detail-Info. Stop-Gap
   bis das Hamburger-Menue (#16) einen About-Eintrag hat. */
.version-tag {
  position: fixed;
  bottom: 6px;
  right: 8px;
  z-index: 5;
  background: transparent;
  border: 0;
  padding: 2px 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--app-ink-soft);
  opacity: 0.45;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.version-tag:hover, .version-tag:focus { opacity: 0.9; outline: none; }
@media (display-mode: standalone) {
  /* In der installierten PWA gibt es keine Adressleiste -- bottom safe area
     kann den Tag sonst halb verdecken. */
  .version-tag { bottom: max(6px, env(safe-area-inset-bottom)); }
}