:root {
  color-scheme: light dark;
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-border: #dde2e7;
  --color-text: #1f2933;
  --color-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-danger: #dc2626;
  --color-success: #16a34a;
  --color-timer-bg: #eff6ff;
  --color-timer-border: #bfdbfe;
  --color-alert-error-bg: #fef2f2;
  --color-alert-error-border: #fecaca;
  --color-alert-success-bg: #f0fdf4;
  --color-alert-success-border: #bbf7d0;
  --color-btn-text-on-accent: #ffffff;
  --radius: 8px;
  /* Kategoriale Diagrammfarben (validierte Palette, siehe dataviz-Skill):
     feste Reihenfolge, nie pro Diagramm neu gemischt. */
  --chart-series-1: #2a78d6;
  --chart-series-2: #eb6834;
  --chart-series-3: #1baf7a;
  --chart-series-4: #eda100;
  --chart-series-5: #e87ba4;
  --chart-series-6: #008300;
  --chart-series-7: #4a3aa7;
  --chart-series-8: #e34948;
  --chart-series-andere: #767672;
  --chart-gridline: #e1e0d9;
  --chart-axis-muted: #898781;
}

/* System-Einstellung folgen, solange kein manuelles Theme gewaehlt wurde */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #14181f;
    --color-surface: #1c222c;
    --color-border: #2e3644;
    --color-text: #e6e9ef;
    --color-muted: #96a1b3;
    --color-primary: #5b8def;
    --color-primary-dark: #7ba3f5;
    --color-danger: #f87171;
    --color-success: #4ade80;
    --color-timer-bg: #1a2740;
    --color-timer-border: #2c4a75;
    --color-alert-error-bg: #3a1d1d;
    --color-alert-error-border: #5c2b2b;
    --color-alert-success-bg: #16321f;
    --color-alert-success-border: #245530;
    --chart-series-1: #3987e5;
    --chart-series-2: #d95926;
    --chart-series-3: #199e70;
    --chart-series-4: #c98500;
    --chart-series-5: #d55181;
    --chart-series-6: #008300;
    --chart-series-7: #9085e9;
    --chart-series-8: #e66767;
    --chart-series-andere: #a4a39b;
    --chart-gridline: #2c2c2a;
    --chart-axis-muted: #898781;
  }
}

/* Manuell erzwungenes Dark Theme, unabhaengig von der Systemeinstellung */
:root[data-theme='dark'] {
  --color-bg: #14181f;
  --color-surface: #1c222c;
  --color-border: #2e3644;
  --color-text: #e6e9ef;
  --color-muted: #96a1b3;
  --color-primary: #5b8def;
  --color-primary-dark: #7ba3f5;
  --color-danger: #f87171;
  --color-success: #4ade80;
  --color-timer-bg: #1a2740;
  --color-timer-border: #2c4a75;
  --color-alert-error-bg: #3a1d1d;
  --color-alert-error-border: #5c2b2b;
  --color-alert-success-bg: #16321f;
  --color-alert-success-border: #245530;
  --chart-series-1: #3987e5;
  --chart-series-2: #d95926;
  --chart-series-3: #199e70;
  --chart-series-4: #c98500;
  --chart-series-5: #d55181;
  --chart-series-6: #008300;
  --chart-series-7: #9085e9;
  --chart-series-8: #e66767;
  --chart-series-andere: #a4a39b;
  --chart-gridline: #2c2c2a;
  --chart-axis-muted: #898781;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
}
.brand { font-weight: 700; font-size: 1.1rem; color: var(--color-text); }
.nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.nav-user { color: var(--color-muted); font-size: 0.9rem; }

.page-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.sync-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.meta { color: var(--color-muted); margin: 0 0 12px; }
h1 .meta, h2 .meta {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 400;
  margin: 0 0 0 10px;
}
.hint { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 12px; }

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

/* Einklappbares Panel (z. B. seltener gebrauchte Admin-Einstellungen) -
   optisch wie .panel, aber per <details> ein-/ausklappbar; die Ueberschrift
   im <summary> ist der Klick-Bereich. */
.panel-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.panel-details > summary {
  cursor: pointer;
  padding: 20px;
  list-style: none;
}
.panel-details > summary::-webkit-details-marker { display: none; }
.panel-details > summary::before { content: '▸'; display: inline-block; width: 1em; color: var(--color-muted); }
.panel-details[open] > summary::before { content: '▾'; }
.panel-details > summary h2 { display: inline; margin-bottom: 0; }
.panel-details-body { padding: 0 20px 20px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  color: var(--color-text);
}
.card:hover { border-color: var(--color-primary); text-decoration: none; }
.card h2 { font-size: 1.05rem; }
.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; }
.card-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.progress {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
  margin: 8px 0;
}
.progress-bar { background: var(--color-primary); height: 100%; }
.progress-label { color: var(--color-muted); font-size: 0.85rem; margin: 0; }

.timer-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--color-timer-bg);
  border: 1px solid var(--color-timer-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* Der Textblock muss schrumpfen und umbrechen duerfen, sonst sprengt eine lange
   Beschreibung ohne Leerzeichen das Banner (und auf dem Smartphone den Bildschirm). */
.timer-banner > div { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
main { overflow-wrap: break-word; }
.live-timer { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 8px; }

.btn {
  display: inline-block;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 10px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { border-color: var(--color-primary); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-start { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.btn-start:hover { background: var(--color-primary-dark); }
.btn-stop { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.btn-block { width: 100%; margin-top: 8px; }

.link-button {
  background: none;
  border: none;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
  font-size: 0.9rem;
}
.link-button:hover { text-decoration: underline; }
.link-button-danger { color: var(--color-danger); }
.entries-row-actions { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.entries-table input[type=text],
.entries-table input[type=date],
.entries-table input[type=time] { padding: 5px 8px; font-size: 0.85rem; }

.inline-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap; max-width: 100%; }
/* Ein Auswahlfeld ist sonst so breit wie sein laengster Eintrag (z. B. ein langer
   Unterprojekt-Name) und schiebt die Zeile aus dem Rahmen. */
.inline-form > input:not([type=hidden]),
.inline-form > select { min-width: 0; max-width: 100%; }
.entry-form { display: flex; flex-wrap: wrap; gap: 8px; }
.entry-form input { flex: 1 1 160px; }
.assign-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.assign-form .row { display: flex; gap: 10px; }
.assign-form .row input { flex: 1; }

input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  background: var(--color-surface);
  color: var(--color-text);
}

.zuweisung-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.zuweisung-item:last-child { margin-bottom: 0; }
.zuweisung-meta { margin: 0 0 10px; }
.zuweisung-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.checkbox { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--color-muted); }

.tabs { margin-bottom: 20px; }
.tab-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab-button {
  background: var(--color-timer-bg);
  border: 1px solid var(--color-timer-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.tab-button:hover { border-color: var(--color-primary); }
.tab-button.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-btn-text-on-accent);
  font-weight: 600;
}
.tab-button.active:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.tab-panel { margin-bottom: 0; }

/* Datentabellen sind auf schmalen Bildschirmen leicht breiter als der
   Viewport (Datum/Uhrzeit-Felder, mehrere Aktionen je Zeile). Ohne diesen
   Rahmen wuerde nicht die Tabelle, sondern die ganze Seite waagerecht
   scrollen - dann laeuft der Inhalt ueber den weissen Panel-Rahmen hinaus
   und wirkt wie abgeschnitten (z. B. das Aktion-Menue). */
.table-scroll { overflow-x: auto; }

.entries-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.entries-table th, .entries-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}
.entries-table tr.archived { opacity: 0.55; }
.entries-table tfoot td { border-top: 2px solid var(--color-border); border-bottom: none; }

.empty-state { color: var(--color-muted); font-style: italic; }

/* Unterprojekte lassen sich ein- und ausklappen (natives <details>, kein
   JS noetig) - offen zeigt die zugehoerigen Zeiten, geschlossen blendet sie
   aus, z. B. fuer Unterprojekte, an denen gerade nicht gearbeitet wird. */
.unterprojekt-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.unterprojekt-details:last-child { margin-bottom: 0; }
/* Direkter Kindselektor (">") statt Nachfahren-Selektor: die Zeilen der
   aufgeklappten Tabelle enthalten selbst ein <details class="aktion-menu">
   mit eigenem <summary> (das Aktion-Menue je Eintrag) - ein Nachfahren-
   Selektor wuerde dessen Summary mit demselben Hintergrund, Pfeil und
   Fettdruck versehen wie die Gruppen-Ueberschrift. */
.unterprojekt-details > summary {
  cursor: pointer;
  padding: 10px 14px;
  background: var(--color-bg);
  font-weight: 600;
  list-style: none;
}
.unterprojekt-details > summary::-webkit-details-marker { display: none; }
.unterprojekt-details > summary::before { content: '▸'; display: inline-block; width: 1em; }
.unterprojekt-details[open] > summary::before { content: '▾'; }
.unterprojekt-details .entries-table { margin-top: 0; }
.unterprojekt-details .entries-table tr:last-child td { border-bottom: none; }

/* Kleines Aktion-Menue je Zeile (Zuweisen zu einem Unterprojekt, Loeschen) -
   ebenfalls per <details> ohne eigenes JS, mit name="aktion-menu" schliessen
   sich mehrere offene Menues gegenseitig (in Browsern, die das unterstuetzen). */
.aktion-menu { position: relative; display: inline-block; }
.aktion-menu summary { list-style: none; cursor: pointer; }
.aktion-menu summary::-webkit-details-marker { display: none; }
.aktion-menu-content {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 170px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aktion-menu-content .inline-form { display: block; }
.aktion-menu-content .link-button { display: block; width: 100%; text-align: left; padding: 4px 6px; }
.aktion-menu-content .link-button:disabled { color: var(--color-muted); cursor: default; text-decoration: none; }
.aktion-menu-label { margin: 0 0 2px; padding: 0 6px; font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; }
.aktion-menu-content hr { border: none; border-top: 1px solid var(--color-border); margin: 4px 0; }

.alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; }
.alert-error { background: var(--color-alert-error-bg); border: 1px solid var(--color-alert-error-border); color: var(--color-danger); }
.alert-success { background: var(--color-alert-success-bg); border: 1px solid var(--color-alert-success-border); color: var(--color-success); }

.login-page { position: relative; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 32px;
  width: 320px;
}
.login-box h1 { margin-bottom: 2px; }
.login-box .subtitle { color: var(--color-muted); margin-top: 0; margin-bottom: 20px; }
.login-box form { display: flex; flex-direction: column; gap: 4px; }
.login-box label { font-size: 0.85rem; color: var(--color-muted); margin-top: 8px; }
.login-box input { width: 100%; }

.autocomplete { position: relative; }
.autocomplete input { width: 100%; }
.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
}
.autocomplete-item { padding: 8px 12px; cursor: pointer; font-size: 0.9rem; }
.autocomplete-item:hover { background: var(--color-bg); }
.selected-user { font-size: 0.85rem; color: var(--color-success); min-height: 1.2em; margin: 0; }

.theme-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.theme-toggle button {
  background: var(--color-surface);
  color: var(--color-muted);
  border: none;
  border-left: 1px solid var(--color-border);
  padding: 6px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle button:first-child { border-left: none; }
.theme-toggle button:hover { color: var(--color-text); }
.theme-toggle button.active { background: var(--color-primary); color: #fff; }
.login-page-toolbar { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; }

#pwa-install-button { font-size: 0.85rem; padding: 6px 10px; }

.token-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 4px 0 12px;
  word-break: break-all;
  user-select: all;
}
.code-block {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 4px 0 12px;
  overflow-x: auto;
  font-size: 0.85rem;
}
/* .btn setzt display und wuerde sonst das hidden-Attribut aushebeln. */
#pwa-install-button[hidden] { display: none; }

.pwa-install-dialog {
  max-width: 420px;
  width: calc(100% - 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  padding: 20px;
}
.pwa-install-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.pwa-install-dialog h2 { margin-top: 0; }
.pwa-install-dialog-body ol { padding-left: 20px; margin: 12px 0; }
.pwa-install-dialog-body li { margin-bottom: 6px; }

/* Beginn und Ende eines Eintrags bestehen aus Datum + Uhrzeit. Beide Felder
   stehen in einer Zelle, damit sich auch eine Taetigkeit ueber Mitternacht
   bearbeiten laesst, ohne die Tabelle unnoetig breit zu machen. */
.zeit-zelle {
  white-space: nowrap;
}

.zeit-zelle input {
  display: block;
  margin-bottom: 4px;
}

.zeit-zelle input:last-child {
  margin-bottom: 0;
}

/* Schuljahr-Auswahl in der Ueberschrift: soll wie ein Teil der Zeile wirken
   und nicht wie ein eigener Block. */
.schuljahr-wahl {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 8px;
  font-size: 0.6em;
  font-weight: normal;
}

/* Saeulendiagramm "Zeiten je Kategorie" (Dashboard) - reines HTML/CSS, kein
   SVG und kein Diagramm-JS: Balkenhoehen kommen bereits fertig als Pixelwerte
   aus util/auswertung.js. Gestapelt/Gruppiert schaltet ueber die bestehende
   Tabs-Mechanik um (zwei fertig gerenderte Varianten, per CSS ein-/ausgeblendet). */
.saeulendiagramm-plot {
  display: grid;
  grid-template-columns: 44px 1fr;
  row-gap: 8px;
}
.saeulendiagramm-achsen-labels { grid-column: 1; grid-row: 1; position: relative; }
.saeulendiagramm-achsen-labels span {
  position: absolute;
  right: 8px;
  transform: translateY(50%);
  font-size: 0.75rem;
  color: var(--chart-axis-muted);
  white-space: nowrap;
}
.saeulendiagramm-flaeche {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  border-bottom: 1px solid var(--chart-axis-muted);
  overflow-x: auto;
}
.saeulendiagramm-gitternetz { position: absolute; inset: 0; }
.saeulendiagramm-gitternetz .gitterlinie {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--chart-gridline);
}
.saeulendiagramm-balken {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 8px;
}
.balken-gruppe { flex: 1 0 32px; min-width: 32px; display: flex; justify-content: center; }
.balken-saeule-feld { display: flex; align-items: flex-end; justify-content: center; }
.balken-saeule { display: flex; align-items: flex-end; }
.balken-saeule.stapel { flex-direction: column-reverse; width: 24px; gap: 2px; }
.balken-saeule.gruppiert { flex-direction: row; gap: 2px; }
.balken-saeule.gruppiert .segment { width: 16px; }
.balken-saeule .segment {
  width: 100%;
  border-radius: 0;
}
.balken-saeule .segment.oben,
.balken-saeule.gruppiert .segment { border-radius: 4px 4px 0 0; }
.segment-synced { background: var(--chart-series-1); }
.segment-entwurf { background: var(--chart-series-2); }
.saeulendiagramm-labels {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  gap: 16px;
  padding: 0 8px;
}
.balken-label {
  flex: 1 0 32px;
  min-width: 32px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.saeulendiagramm-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.85rem;
}
.saeulendiagramm-legende span { display: inline-flex; align-items: center; gap: 6px; }
.saeulendiagramm-legende .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* Smartphone: keine der Datentabellen (Erfasste Taetigkeiten, Unterprojekte,
   Admin-Bereich) passt mit vier bis sechs Spalten nebeneinander auf einen
   schmalen Bildschirm - die hinteren Spalten (z. B. das Aktion-Menue, die
   Kategorie-Verknuepfung oder "Archivieren") lagen dann innerhalb des
   .table-scroll-Rahmens ohne jedes Scroll-Indiz ausserhalb des sichtbaren
   Bereichs und wirkten dadurch schlicht fehlend. Jede Zeile wird deshalb zu
   einer Karte mit beschrifteten, gestapelten Feldern (data-label + ::before) -
   jede Spalte landet als normaler, immer sichtbarer Block, ganz ohne
   waagerechtes Scrollen. */
@media (max-width: 640px) {
  .login-box { width: min(320px, 100%); }

  .entries-table thead { display: none; }
  .entries-table,
  .entries-table tbody,
  .entries-table tr,
  .entries-table td {
    display: block;
    width: 100%;
  }
  .entries-table tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .entries-table tr:last-child { margin-bottom: 0; }
  .entries-table td {
    border-bottom: none;
    padding: 6px 0;
  }
  .entries-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-bottom: 2px;
  }
  .entries-table td[data-label] input[type=text],
  .entries-table td[data-label] input[type=number] { width: 100%; }
  .entries-table td.entries-row-actions { display: flex; justify-content: flex-end; }
}

/* Bedienbarkeit auf dem Smartphone.
   - Tippflaechen mindestens ca. 44 px hoch (Apple/Google-Richtlinie); vorher
     waren Navigationslinks, Link-Buttons, Theme-Umschalter und Tabs nur
     13-34 px hoch und liessen sich mit dem Daumen kaum treffen.
   - Eingabefelder mit mindestens 16 px Schrift: iOS-Safari zoomt sonst beim
     Fokussieren automatisch in die Seite und verschiebt das Layout.
   - Formulare duerfen nie breiter als der Bildschirm werden: Eingabefelder
     haben von Haus aus eine Mindestbreite (ca. 20 Zeichen), die in einer
     Flex-Zeile ohne min-width:0 nicht schrumpft und Buttons aus dem Rand
     schiebt. Deshalb brechen Formularzeilen um und Felder/Buttons nutzen
     die volle Breite. */
@media (max-width: 640px) {
  input[type=text], input[type=password], input[type=number], input[type=date], input[type=time], select,
  .entries-table input[type=text],
  .entries-table input[type=date],
  .entries-table input[type=time] {
    font-size: 16px;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
  }

  .btn { min-height: 44px; padding: 10px 16px; }
  .link-button { min-height: 44px; padding: 0 6px; }
  .aktion-menu-content .link-button { padding: 10px 8px; }
  .tab-button { min-height: 44px; }
  summary { min-height: 44px; display: flex; align-items: center; }
  .panel-details > summary { display: flex; }
  .unterprojekt-details > summary { align-items: baseline; gap: 8px; }

  input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
  .checkbox { min-height: 44px; gap: 10px; }

  .inline-form { flex-wrap: wrap; max-width: 100%; }
  .inline-form > input:not([type=hidden]),
  .inline-form > select { flex: 1 1 100%; }
  .entry-form > input,
  .entry-form > select,
  .entry-form > .btn { flex: 1 1 100%; }
  .entry-form > .inline-form { flex: 1 1 100%; }

  .zuweisung-item select { flex: 1 1 100%; }

  .topbar-inner { row-gap: 4px; }
  .brand { display: inline-block; padding: 10px 0; }
  .nav-links { gap: 0 14px; }
  .nav-links > a,
  .nav-links .inline-form > .link-button { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-user { display: inline-flex; align-items: center; min-height: 44px; }
  #pwa-install-button { font-size: 0.9rem; padding: 10px 12px; }
  .theme-toggle button { padding: 0 10px; min-height: 44px; font-size: 0.9rem; }
  .login-page-toolbar { gap: 8px; }

  main > p > a:only-child { display: inline-block; padding: 12px 0; }
}