/* ─────────────────────────────────────────────────────────────
   Containerbuch · Contena  (Design v4.0, 2026-09-24)

   Übernimmt die Stilbasis von contena.de („Schwarz auf Weiß"):
   warmes Schwarz statt Bildschirmschwarz, gebrochenes Weiß statt
   Reinweiß, Haarlinien statt Schatten, Kanten statt Kissen.
   Die Hauptfarbe ist keine Farbe, sondern der Kontrast selbst:
   im Dunkeln Knochenweiß, im Hellen Tinte. Farbe gibt es nur
   dort, wo sie etwas bedeutet — beim Status eines Containers.

   Wird als letztes Stylesheet geladen und setzt nur Variablen
   plus die wenigen Stellen, die Farben fest verdrahtet hatten.
   ───────────────────────────────────────────────────────────── */

/* ── Hell: Schwarz auf Weiß ─────────────────────────────── */
:root,
html[data-theme="light"] {
  --bg: #f4f1ea;
  --bg-tint: #ebe7de;
  --paper: #fbfaf6;
  --paper-2: #f0ece4;
  --border: #dcd6ca;
  --border-strong: #b9b2a4;
  --ink: #0f0e0c;
  --ink-2: #2b2925;
  --muted: #69655d;
  --muted-2: #938e84;

  --brand: #0f0e0c;
  --brand-dark: #2b2925;
  --brand-darker: #080706;   /* warm, kein Reinschwarz */
  --brand-rgb: 15, 14, 12;
  --brand-soft: rgba(15, 14, 12, 0.06);
  --brand-softer: rgba(15, 14, 12, 0.03);
  --on-brand: #f4f1ea;

  /* Status — erdige Töne, gedeckt, klar unterscheidbar */
  --sage: #4a7536;   --sage-soft: rgba(74, 117, 54, 0.11);
  --amber: #93600f;  --amber-soft: rgba(147, 96, 15, 0.11);
  --rose: #a3402c;   --rose-soft: rgba(163, 64, 44, 0.10);
  --slate: #5c5852;  --slate-soft: rgba(92, 88, 82, 0.10);

  --font-display: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 4px; --r-pill: 2px;

  --sh-sm: 0 0 0 1px var(--border);
  --sh-md: 0 0 0 1px var(--border);
  --sh-lg: 0 28px 64px -24px rgba(15, 14, 12, 0.35), 0 0 0 1px var(--border-strong);
  --sh-focus: 0 0 0 2px rgba(var(--brand-rgb), 0.55);
}

/* ── Dunkel: die Grundbühne von contena.de ──────────────── */
html[data-theme="dark"] {
  --bg: #0f0e0c;
  --bg-tint: #141310;
  --paper: #171613;
  --paper-2: #1d1b18;
  --border: #2c2a26;
  --border-strong: #45423c;
  --ink: #ece8e0;
  --ink-2: #d4cfc5;
  --muted: #a8a49c;
  --muted-2: #7a766f;

  --brand: #ece8e0;
  --brand-dark: #d4cfc5;
  --brand-darker: #bdb7ab;
  --brand-rgb: 236, 232, 224;
  --brand-soft: rgba(236, 232, 224, 0.08);
  --brand-softer: rgba(236, 232, 224, 0.04);
  --on-brand: #0f0e0c;

  --sage: #9dbd7f;   --sage-soft: rgba(157, 189, 127, 0.13);
  --amber: #dcab5c;  --amber-soft: rgba(220, 171, 92, 0.13);
  --rose: #e07f68;   --rose-soft: rgba(224, 127, 104, 0.13);
  --slate: #9a958c;  --slate-soft: rgba(154, 149, 140, 0.12);

  --sh-sm: 0 0 0 1px var(--border);
  --sh-md: 0 0 0 1px var(--border);
  --sh-lg: 0 32px 80px -24px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--border-strong);
  --sh-focus: 0 0 0 2px rgba(var(--brand-rgb), 0.55);
}

body { font-family: var(--font-body); font-variant-numeric: tabular-nums; background: var(--bg); }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── Schrift: eine Familie (Public Sans), keine Serife, kein Kursiv ──
   Christoph 24.09.: „das J ist komisch schnörkelig — professionell halten".
   Hierarchie über Gewicht und Grauton, nie über Schnörkel. */
h1, h2, h3, .section-title, .lg2-title, .lg2-card-hd h2, .modal h2, .modal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-style: normal;
  font-variation-settings: normal;
}
.section-title em, .lg2-title em {
  font-style: normal;
  font-weight: inherit;
  color: var(--muted);
}
html[data-theme="dark"] .section-title em { color: var(--muted); }

/* Kleine gesperrte Zeilen (vorher Monospace) wie auf contena.de */
.lg2-eyebrow, .lg2-feat-k, .lg2-metric-l, .lg2-status, .field label, .info-label, .dm-label {
  letter-spacing: 0.14em;
}

/* ── Knöpfe: gefüllt = Kontrast, sonst Haarlinie ─────────── */
.btn-primary,
html[data-theme="dark"] .btn-primary,
.lg-submit,
html[data-theme="dark"] .lg-submit,
.app-iconbtn.iconbtn-primary {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
  box-shadow: none;
}
.btn-primary:hover,
html[data-theme="dark"] .btn-primary:hover,
.lg-submit:hover,
.app-iconbtn.iconbtn-primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--on-brand);
}
.btn-teal,
html[data-theme="dark"] .btn-teal {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-teal:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.foto-upload-item input[type="file"]::-webkit-file-upload-button,
.foto-upload-item input[type="file"]::file-selector-button { color: var(--on-brand); }

/* ── Marke: C-Zeichen statt Farbkachel ──────────────────── */
.brand-mark-ico {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Hell: Zeichen invertieren; brightness hebt die Kachel auf Reinweiß, multiply lässt sie
   dann im jeweiligen Grund verschwinden (vorher kühlgraues Kästchen auf warmem Papier) */
html[data-theme="light"] .brand-mark-ico { filter: invert(1) hue-rotate(180deg) brightness(1.08); mix-blend-mode: multiply; }
.brand-title, .brand-mark-text {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.brand-mark-text em {
  font-family: var(--font-body);
  font-style: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.app-user-avatar { background: var(--ink); color: var(--bg); }

/* ── Karten: Beleg statt Kachel ─────────────────────────── */
.c-card { box-shadow: none; }
.c-card:hover { border-color: var(--border-strong); box-shadow: none; transform: none; }
.c-card.aktiv::before { background: var(--sage); }
.modal { border-radius: 4px; }
.modal-bg { background: rgba(15, 14, 12, 0.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ── Anmeldeseite ───────────────────────────────────────── */
#login {
  --lg2-bg1: #f4f1ea; --lg2-bg2: #ebe7de;
  --lg2-aside: #fbfaf6; --lg2-aside-line: #dcd6ca;
  --lg2-card: #fbfaf6; --lg2-card-brd: #dcd6ca;
  --lg2-ink: #0f0e0c; --lg2-muted: #69655d;
  --lg2-line: #0f0e0c; --lg2-line-soft: rgba(15, 14, 12, .28);
  --lg2-glow: transparent;
  --lg2-chip-bg: #fbfaf6; --lg2-chip-brd: #dcd6ca;
  --lg2-grid: rgba(15, 14, 12, .04); --lg2-grid-major: rgba(15, 14, 12, .07);
}
html[data-theme="dark"] #login {
  --lg2-bg1: #0f0e0c; --lg2-bg2: #0f0e0c;
  --lg2-aside: #141310; --lg2-aside-line: #2c2a26;
  --lg2-card: #171613; --lg2-card-brd: #2c2a26;
  --lg2-ink: #ece8e0; --lg2-muted: #a8a49c;
  --lg2-line: #ece8e0; --lg2-line-soft: rgba(236, 232, 224, .30);
  --lg2-glow: transparent;
  --lg2-chip-bg: #171613; --lg2-chip-brd: #2c2a26;
  --lg2-grid: rgba(236, 232, 224, .025); --lg2-grid-major: rgba(236, 232, 224, .05);
}
.lg2-title {
  font-weight: 600; letter-spacing: -0.045em; line-height: 1.02;
  font-size: clamp(38px, 4.4vw, 70px);
  font-variant-numeric: proportional-nums;
}
.lg2-title em { color: var(--lg2-muted); }
.lg2-cta, .lg2-cta-ghost { border-radius: 2px; box-shadow: none !important; font-weight: 600; }
.lg2-cta { background: var(--lg2-line); color: var(--lg2-bg1); }
.lg2-cta:hover { transform: none; opacity: .88; }
.lg2-cta-ghost { border: 1px solid var(--lg2-card-brd); color: var(--lg2-ink); background: transparent; }
.lg2-card { border-radius: 3px; box-shadow: none !important; }
.lg2-chip { border-radius: 2px; box-shadow: none !important; }
.lg2-metric, .lg2-feat { border-radius: 0; box-shadow: none !important; }
.lg2-vis-glow { display: none; }
.lg2-pulse, .lg2-proof-dot { background: var(--sage) !important; box-shadow: none !important; }
#lg2clip + * {}
.lg2-wave { fill: rgba(var(--brand-rgb), .10); }

/* Anmeldekarte: ruhig, eine Haarlinie oben statt Verlauf */
html[data-theme="dark"] .lg2-card, .lg2-card { background: var(--lg2-card); backdrop-filter: none; -webkit-backdrop-filter: none; }
.lg2-card::before { background: var(--lg2-line); height: 2px; }
.lg2-card-hd h2 { font-weight: 600; }
#login .lg-submit, html[data-theme="dark"] #login .lg-submit {
  background: var(--lg2-line); color: var(--lg2-bg1);
  border-radius: 2px; box-shadow: none; font-weight: 600; letter-spacing: 0.01em;
}
#login .lg-submit:hover { filter: none; opacity: .88; }
.lg-submit::before { display: none; }
#login .lg-input { border-radius: 2px; background: transparent; }
#login .lg-input:focus { box-shadow: 0 0 0 1px var(--lg2-line); border-color: var(--lg2-line); }

/* Kennzahlen + Funktionen: Beleg-Raster mit Haarlinien statt Kacheln */
.lg2-metrics, .lg2-features { gap: 0 !important; border-top: 1px solid var(--lg2-card-brd); }
.lg2-metric, .lg2-feat {
  background: transparent; border: 0; border-right: 1px solid var(--lg2-card-brd);
  padding: 22px 22px 20px;
}
.lg2-metric:last-child, .lg2-feat:last-child { border-right: 0; }
.lg2-metric:first-child, .lg2-feat:first-child { padding-left: 0; }
.lg2-metric::before { display: none; }
.lg2-metric:hover, .lg2-feat:hover { transform: none; border-color: var(--lg2-card-brd); }
.lg2-metric-n { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -0.035em; font-variant-numeric: proportional-nums; }
.lg2-metric-l, .lg2-feat-k {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lg2-muted);
}
.lg2-feat-h { font-family: var(--font-body); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
@media (max-width: 900px) {
  .lg2-metric, .lg2-feat { border-right: 0; border-bottom: 1px solid var(--lg2-card-brd); padding-left: 0; }
}

/* ── Alte Serifen-Zwänge aus app.css aufheben (Cormorant/Fraunces mit !important) ── */
.lg-title, .lg-title *, .doc-title, .doc-title *, .section-title, .section-title *,
.view-head-title, .view-head-title *, .c-top .c-nr, #d-title, .c-nr {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
  font-feature-settings: normal !important;
}
.lg-title em, .section-title em, .view-head-title em, .doc-title em {
  font-style: normal !important;
  color: var(--muted) !important;
}
.c-top .c-nr, .c-nr, #d-title { font-variant-numeric: tabular-nums; letter-spacing: -0.01em !important; }

/* ═══ Anmeldeseite · Nachschliff (2026-09-24) ═══════════════════
   Reste der v3-Optik aus app.css aufheben: Pillen, Mint, Verlauf,
   Raster, Schrift unter 12px, Klickziele unter 40px. app.css bleibt
   unberührt — alles hier als Überschreibung. */

/* Hintergrund ruhig: kein Bauplan-Raster, kein Schein, kein Verlauf */
#login { background: var(--lg2-bg1); }
#login::before, #login::after { display: none; }
/* ohne Raster keine eigene Ebene nötig — sonst verrechnet multiply das Markenzeichen
   (Hell) gegen einen durchsichtigen Grund statt gegen das Papier */
.lg2-split { z-index: auto; }
.lg2-aside { background: var(--lg2-aside); }

/* Kleinste Schrift auf der Anmeldeseite: 12px */
.brand-mark-text em,
.lg2-eyebrow,
.lg2-status,
.lg2-chip,
.lg2-metric-l,
.lg2-feat-k { font-size: 12px; }
.lg2-metric-l, .lg2-feat-k, .lg2-status { letter-spacing: 0.1em; }

/* Status oben rechts: Kante statt Pille */
.lg2-status { border-radius: 2px; background: transparent; }

/* Live-Zeile: Wort „Live" im Status-Grün (sage) statt Mint, Haarlinie statt Strichellinie */
.lg2-proof { border-top: 1px solid var(--lg2-card-brd); }
.lg2-proof-head { color: var(--sage); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; }

/* § 49 / § 50: Klickziel 40px, ohne dass die Zeile optisch springt */
.lg2-eyebrow a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 40px; margin-block: -12px;
}

/* Handy/Tablet: Anmeldekarte ohne Leerstreifen darüber und darunter
   (app.css zieht min-height: 840px nachträglich wieder über die Media-Query) */
@media (max-width: 999px) {
  .lg2-aside-inner { min-height: auto; }
}

/* Hinweis unter „Einloggen": ganz lesbar, ruhig, ohne Pille und Emoji */
#login .lg-help-row {
  overflow: visible;
  flex-wrap: wrap !important;
  justify-content: flex-start;
  margin-top: 22px;
  padding-top: 16px !important;
  border-top: 1px solid var(--lg2-card-brd);
  font-size: 13px !important;
}
#login .lg-help-row .lg-help-link {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: normal; text-overflow: clip; overflow: visible;
  background: transparent; border: 0; border-radius: 0; padding: 0;
  color: var(--lg2-muted) !important;
  font-size: 13px; font-weight: 500; letter-spacing: 0;
}
#login .lg-help-link svg { flex: none; }
#login .lg-err { border-radius: 2px; border-color: var(--rose-soft); animation: none; }

/* Schritt 2 (Baustelle wählen): Kanten statt Kissen */
.lg2-site-btn { border-radius: 2px; }
.lg2-site-btn:hover { transform: none; }

/* ── Fuß der Anmeldeseite: wie contena.de — Haarlinie, kein Kasten ── */
#login .lg-footer,
html[data-theme="dark"] #login .lg-footer {
  background: transparent;
  border-radius: 0;
  border-top: 1px solid var(--lg2-card-brd);
  color: var(--lg2-muted);
  padding: 48px clamp(16px, 3.5vw, 64px) 20px;
}
#login .lg-footer-inner { max-width: none; margin: 0; gap: 36px 32px; }
#login .lg-footer-col { font-size: 13.5px; line-height: 1.6; }
.lg-footer-h,
html[data-theme="dark"] .lg-footer-h {
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  text-transform: none; color: var(--lg2-ink); margin-bottom: 12px;
}
.lg-footer-p { color: var(--lg2-muted); }
.lg-footer-badge,
html[data-theme="dark"] .lg-footer-badge {
  border-radius: 2px;
  background: transparent;
  border: 1px solid var(--lg2-card-brd);
  color: var(--lg2-muted);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  padding: 5px 10px;
}
.lg-footer-dot { background: var(--sage); box-shadow: none; }
#login .lg-footer-list a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--lg2-ink); text-decoration: underline; text-decoration-color: var(--lg2-card-brd);
  text-underline-offset: 4px;
}
#login .lg-footer-list a:hover { text-decoration-color: currentColor; }
#login .lg-footer-mail { padding-top: 0; padding-bottom: 0; }

#login .lg-footer-bar {
  max-width: none;
  margin: 36px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--lg2-card-brd);
  font-size: 13px; letter-spacing: 0;
  color: var(--lg2-muted);
  gap: 0 24px;
}
.lg-footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; }
.lg-footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.lg-footer-links a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; min-width: 40px;
  color: var(--lg2-ink); font-weight: 600; text-decoration: none;
}
.lg-footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
#login .lg-footer-tech { opacity: 1; color: var(--lg2-muted); padding-block: 10px; }
@media (max-width: 900px) {
  #login .lg-footer-bar { gap: 0; }
  .lg-footer-legal { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 10px; }
}

/* ═══ App-Oberfläche · Nachschliff (2026-09-24) ══════════════════
   Eingeloggte Ansicht (Container, Anfragen, Benutzer, Modals).
   Kopfzeile ohne Überlappung von 1024 bis 1920 und am Handy,
   Kanten statt Kissen (2–4px), Schrift ab 12px, Klickziele ab 40px,
   ruhige Schließen-/Lösch-Knöpfe. app.css bleibt unberührt —
   alles hier als Überschreibung. */

/* ── Kopfzeile · Grundform (alle drei Ansichten) ─────────── */
.app-header-inner { padding-top: 12px; padding-bottom: 12px; gap: 10px 16px; }
.app-header-spacer { min-width: 8px; }
.app-nav { gap: 2px; }
.app-nav-item {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 2px;
  font-size: 13.5px;
  justify-content: center;
}
.app-nav-item.active { background: var(--paper-2); color: var(--ink); }
/* „← Container": ruhig wie die übrigen Einträge, kein Signalrot */
.app-nav-item.nav-back,
.app-nav-item.nav-back:hover { color: var(--ink); font-weight: 600; }
.app-nav-item.nav-back:hover { background: var(--paper-2); }
.app-nav-item .nav-badge {
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 2px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  background: var(--rose); color: var(--bg);
}
.app-meta { gap: 8px; }
.app-meta .toolbar-select { min-height: 40px; min-width: 104px; }
.app-user-chip {
  min-height: 40px;
  padding: 0 12px 0 8px;
  border-radius: 2px;
  background: transparent;
}
.app-user-avatar { border-radius: 2px; }
.app-header-brand .brand-mark-ico { border-radius: 0 !important; }   /* app.css ≤520px: 7px !important */
.app-user-role { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.08em; }
.app-iconbtn {
  width: 40px; height: 40px;
  border-radius: 2px;
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink-2);
}
.app-iconbtn:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.app-iconbtn:active { transform: none; }
.app-iconbtn svg { display: block; }

/* Baustellenzeile: „BVH: Name" lesbar (12px), Wechseln als Haarlinien-Knopf */
.brand-bvh { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; min-width: 0; }
.app-header-sub { font-size: 12px !important; letter-spacing: 0.1em !important; }
.brand-bvh .app-header-sub { font-size: 12px !important; letter-spacing: 0.08em !important; color: var(--ink-2); }
.app-user-avatar { font-size: 12px; }
.site-switch-btn,
.brand-line .site-switch-btn {
  min-height: 32px;
  padding: 0 12px 0 10px;
  border-radius: 2px;
  font-size: 13px;
  background: transparent;
}
.site-switch-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-2); }

/* Bis 1599px Marke zweizeilig — „Containerbuch" oben, darunter BVH +
   Wechseln; ab 1200px (u. a. Surface 1280) bleibt die Kopfzeile damit
   einzeilig. Die Baustelle kürzt per Auslassung, statt in die
   Navigation zu laufen (vorher: Nav lag über „Wechseln"). */
@media (max-width: 1599px) {
  /* Marke darf schrumpfen: ein umbrechender Flex-Block meldet sonst seine
     einzeilige Breite (≈500px) — bei 1200–1238px lag Abmelden außerhalb */
  .app-header-brand { flex-shrink: 1; min-width: 0; }
  .app-header-brand > div.brand-line {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
    column-gap: 12px !important;
  }
  .brand-line .brand-title { flex: 0 0 100%; line-height: 1.1; }
  /* Basis 0: BVH + Wechseln bleiben gemeinsam in Zeile 2, der Name kürzt statt umzubrechen */
  .brand-bvh { min-width: 0; flex: 1 1 0; max-width: max-content; }
  .brand-bvh .app-header-sub { min-width: 0 !important; max-width: min(260px, 30vw) !important; }
  .brand-line .site-switch-btn { flex: none; }
}
@media (max-width: 1365px) {
  .app-user-role { display: none; }
}

/* Bis 1199px (Tablet, schmale Fenster): Zeile 1 Marke + Konto,
   Zeile 2 Navigation über die volle Breite — nichts rutscht aus dem Bild */
@media (max-width: 1199px) {
  .app-header-inner { flex-wrap: wrap; row-gap: 8px; }
  /* Basis 0: das Konto bleibt neben der Marke, statt bei 641–670px in eine eigene Zeile zu rutschen */
  .app-header-brand { flex: 1 1 0; min-width: 0; }
  .app-header-spacer { display: none; }
  .app-meta { margin-left: auto; }
  .app-nav {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    overflow: visible;
    padding: 8px 0 0;
    border-top: 1px solid var(--border);
  }
}

/* Handy (bis 640px), Container-Ansicht: festes Raster
   Zeile 1  Zeichen · Containerbuch · Wechseln · Abmelden
   Zeile 2  BVH: Baustelle ........................ Nutzer
   Zeile 3  Navigation (volle Breite, je 40px hoch)
   Die Baustelle in Zeile 2 reicht bis kurz vor den Nutzernamen (360px: kein „…"):
   Wechseln überspannt die Spalten 3–5, der Nutzer nur 5–6. Weil der Nutzer
   weniger Spalten überspannt, wird Spalte 5 zuerst nach ihm bemessen; Spalte 3
   bekommt nur den Rest, den Wechseln darüber hinaus braucht (Spalte 4 = 0px
   trennt die beiden Spannen). Ein langer Name nimmt so nie „Containerbuch" Platz. */
@media (max-width: 640px) {
  #app .app-header-inner {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto 0px auto 40px;
    grid-template-areas:
      "logo title sw   sw   sw   out"
      "bvh  bvh   bvh  bvh  user user"
      "nav  nav   nav  nav  nav  nav";
    align-items: center;
    gap: 6px 8px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #app .app-header-brand,
  #app .app-header-brand > div.brand-line,
  #app .app-meta { display: contents; }
  #app .app-header-spacer { display: none; }
  #app .app-header-brand .brand-mark-ico { grid-area: logo; width: 32px !important; height: 32px !important; }
  #app .brand-title { grid-area: title; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #app .site-switch-btn { grid-area: sw; justify-self: end; min-height: 40px; }
  #app .app-logout { grid-area: out; }
  #app .brand-bvh { grid-area: bvh; min-width: 0; gap: 5px; }
  #app .brand-bvh .app-header-sub { min-width: 0 !important; max-width: none !important; }
  #app .app-user-chip {
    grid-area: user; justify-self: end;
    min-height: 0; padding: 0; gap: 6px;
    border: 0; background: transparent;
    font-size: 12px; color: var(--muted);
    /* langer Name: höchstens 135px, danach „…" — so bleibt „Containerbuch" auch bei 360px ganz */
    width: max-content; min-width: 0; max-width: 135px !important;
  }
  /* sehr langer Name kürzt sich selbst, statt „Containerbuch" zu kürzen */
  #app .app-user-chip #app-user-name {
    min-width: 0;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #app .app-user-avatar { display: grid; width: 20px; height: 20px; font-size: 12px; }
  #app .app-nav { grid-area: nav; width: auto; }

  .app-nav { gap: 4px; padding-top: 6px; }
  .app-nav-item { flex: 1 1 auto; padding: 0 8px; font-size: 13px; }
}
/* sehr schmale Handys (360px): vier Einträge bleiben in einer Zeile */
@media (max-width: 380px) {
  .app-nav { gap: 2px; }
  .app-nav-item { padding: 0 5px; font-size: 12.5px; gap: 4px; }
}

/* ── Kanten statt Kissen: feste Radien aus app.css auf 2–4px ── */
.app-nav-item, .app-user-chip, .app-iconbtn,
.toolbar-search input, .toolbar-select,
.month-card, .month-card-count,
.c-status, .btn,
.chip-list-item, .chip-list-item .chip-del,
.field input, .field select, .field textarea, input[type="date"],
.foto-upload-item, .foto-upload-item input[type="file"], .foto-preview img,
.c-fotos img, .c-fotos-empty, .c-notiz,
.d-cell, .d-tabs, .d-tab, .d-fotos-block img, #d-body .d-fotos > div img,
.log-box, .log-del,
.vw-item, .site-switch-item, .modal .lg-input,
.user-row, .ur-role, .act-chip, .lh-row .lh-role, .login-history, .presence-chip,
.img-viewer img, .img-viewer-nav button, .img-viewer-counter,
.nav-dd-menu, .nav-dd-item, .dz-item {
  border-radius: 2px;
}
.foto-upload-item input[type="file"]::file-selector-button,
.foto-upload-item input[type="file"]::-webkit-file-upload-button { border-radius: 2px; }
.d-action-zone, #detail-modal .d-action-zone { border-radius: 3px; }
#detail-modal .d-action-row .btn { border-radius: 2px; }
#detail-modal .d-action-row .btn:hover { transform: none; }
@media (max-width: 640px) {
  .modal { border-radius: 4px 4px 0 0; }
}
/* Modal: Haarlinie statt Schwebeschatten */
.modal { box-shadow: none; border-color: var(--border-strong); }
/* Design-Auswahl (.dz-item): steht im Inline-<style> von index.html, der nach
   dieser Datei geladen wird — dort gepflegt (gewählt = Tintenkante, kein Schein). */

/* Status-Knöpfe: beim Überfahren in der eigenen (gedeckten) Farbe statt Weiß auf Farbe */
.btn-amber:hover  { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.btn-sage:hover   { background: var(--sage-soft);  color: var(--sage);  border-color: var(--sage); }
.btn-danger:hover { background: var(--rose-soft);  color: var(--rose);  border-color: var(--rose); }
.btn svg { display: block; flex: none; }

/* Checkboxen (Tausch-Vorlage, Formulare): Tinte statt Browser-Blau */
#app, #requests-view, #users-view, .modal-bg { accent-color: var(--ink); }
/* app.css setzt color-scheme fest auf dark — im Hell-Design wären Kästchen,
   Datumsfelder und Auswahllisten sonst dunkle Fremdkörper */
html[data-theme="light"] :is(#app, #requests-view, #users-view, .modal-bg) { color-scheme: light; }
#tausch-chk-list input[type="checkbox"] { width: 16px; height: 16px; }

/* ── Schrift: nichts unter 12px ──────────────────────────── */
.c-grid .c-label, .d-label, .d-action-label, .d-info-label, .stats-label,
.c-status, .month-card-count, .chip-list-item, .chip-list-item .chip-del,
.c-cname, .c-nr-prefix, .field label, .log-item,
.act-head-sub, .act-chip, .rm-table th, .ur-name em, .lh-row .lh-role {
  font-size: 12px;
}
.c-grid .c-label, .d-label, .d-action-label, .c-status { letter-spacing: 0.08em; }
.field label { font-weight: 600; }
/* Bearbeiten-/Neu-Modal „Fotodokumentation · Notiz", Konto-Name (app.css: 11px bis 820px) */
.uppercase-eyebrow { font-size: 12px; }
.app-user-chip { font-size: 12px; }

/* ── Klickziele: Filter 40px, Monats-Chips 36px (Touch 40px) ── */
.toolbar-search input, .toolbar-select, .toolbar .btn { min-height: 40px; }
/* Monatsleiste: immer EINE Zeile, waagerecht scrollbar — nie umbrechen
   (sonst schiebt sie bei 13 Monaten die Containerliste aus dem ersten Bildschirm) */
.month-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
}
.month-card { flex: none; min-height: 36px; padding: 0 12px; font-family: var(--font-body); }
.month-card-count { padding: 1px 6px; font-weight: 600; }

/* ── Karten ohne Foto: ruhiger Platzhalter statt Kamera-Emoji ── */
.c-fotos-empty {
  flex-direction: column;
  gap: 6px;
  background: transparent;
  color: var(--muted-2);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.c-fotos-empty svg { display: block; }
.c-fotos img { border-radius: 2px; }
/* Handy (Fotos nebeneinander): genau ein Foto füllt die Breite statt einer leeren rechten Hälfte */
@media (max-width: 440px) {
  .c-card .c-fotos img:only-child { width: 100%; }
}
/* Handy (Karte einspaltig): ohne Foto nur eine schmale Zeile statt 180px Leerfläche */
@media (max-width: 400px) {
  .c-card .c-fotos.is-empty { height: auto; min-height: 0; }
  .c-fotos.is-empty .c-fotos-empty { flex-direction: row; gap: 8px; padding: 10px 0; }
  .c-fotos.is-empty .c-fotos-empty svg { width: 20px; height: 20px; }
}

/* ── Notiz: neutraler Kasten, Kennwort statt Emoji ───────── */
.c-notiz {
  background: var(--paper-2) !important;
  border-left: 2px solid var(--amber);
  font-size: 13px;
}
.c-notiz-k {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  margin-right: 6px;
}

/* ── Notiz löschen: Haarlinien-Knopf, Rose erst beim Überfahren ── */
.notiz-del {
  width: 32px !important;
  height: 32px !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  background: transparent !important;
  color: var(--muted) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.notiz-del:hover {
  background: var(--rose-soft) !important;
  color: var(--rose) !important;
  border-color: var(--rose) !important;
  transform: none !important;
}
.log-del { width: 32px; height: 32px; }
.log-del:hover { color: var(--rose) !important; background: var(--rose-soft) !important; }

/* ── Schließen (✕): Haarlinie, kein Signalrot, kein Weiß auf Rot ── */
.modal-close {
  width: 40px; height: 40px;
  color: var(--muted) !important;
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 2px !important;
  font-size: 18px !important;
  box-shadow: none !important;
}
.modal-close:hover {
  color: var(--ink) !important;
  background: var(--paper-2) !important;
  border-color: var(--ink) !important;
}
/* Foto-Vollbild ist immer dunkel: gleicher Knopf in Knochenweiß auf Schwarz */
.img-viewer-close {
  background: rgba(15, 14, 12, 0.72) !important;
  color: #ece8e0 !important;
  border: 1px solid rgba(236, 232, 224, 0.32) !important;
  border-radius: 2px !important;
}
.img-viewer-close:hover { background: rgba(15, 14, 12, 0.92) !important; border-color: #ece8e0 !important; }

/* ── Detailansicht: Datum-Stift + Drehen als Haarlinien-Knöpfe ── */
.d-pen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-left: 8px; vertical-align: middle;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 2px;
  cursor: pointer;
}
.d-pen:hover { color: var(--ink); border-color: var(--ink); }

/* ── Verwaltung: Linien-Symbole statt bunter Emojis ──────── */
.vw-item { background: transparent; }
.vw-item:hover { transform: none; border-color: var(--ink); background: var(--paper-2); }
.vw-ic { display: grid; place-items: center; width: 24px; height: 24px; font-size: 0; color: var(--muted); }
.vw-item:hover .vw-ic { color: var(--ink); }
.vw-ic svg { display: block; }
.vw-tx strong { font-weight: 600; }

/* ── Baustelle wechseln: Kante statt Verschieben ─────────── */
.site-switch-item:not([data-active="1"]):hover { transform: none; border-color: var(--ink) !important; }

/* ── Bearbeiten-Modal: Foto löschen als ruhiger Haarlinien-Knopf ──
   (vorher knallroter Kreis mit Weiß und Schatten) — unter dem Bild,
   Rose erst beim Überfahren, wie .notiz-del */
.foto-preview .foto-prev-item {
  position: static;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: 112px;
}
.foto-preview img { display: block; border-radius: 2px; }
.foto-del {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 32px; padding: 0 8px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  box-shadow: none;
  font: 500 12px/1 var(--font-body);
  cursor: pointer;
}
.foto-del svg { display: block; flex: none; }
.foto-del:hover, .foto-del:focus-visible {
  background: var(--rose-soft);
  color: var(--rose);
  border-color: var(--rose);
}

/* ── Listen-Tags (Admin, Bearbeiten-Modal): lesbar in Hell + Dunkel ── */
.chip-list-item.list-tag {
  gap: 2px;
  margin: 2px 4px 2px 0;
  padding: 0 0 0 9px;
  min-height: 28px;
  background: var(--paper-2);
  color: var(--ink);
  border-color: var(--border);
  cursor: default;
}
.chip-list-item.list-tag:hover { background: var(--paper-2); color: var(--ink); border-color: var(--border-strong); }
.chip-list-item .chip-del {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: 2px;
  color: var(--muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.chip-list-item .chip-del:hover { background: var(--rose-soft); color: var(--rose); }

/* ── Benutzer: Rollen sind kein Status → Grauton + Haarlinie, kein Leuchten ── */
.user-row { border-left: 1px solid var(--border); }
.user-row.is-online { border-left-color: var(--border-strong); }
.ur-dot, .act-dot { box-shadow: none !important; }
.ur-role {
  padding: 2px 8px;
  background: transparent;
  border: 1px solid var(--border-strong);
  font-weight: 600;
}
.ur-ago.on, .act-ago.on { color: var(--sage); }
.act-chip { font-size: 12px; }
.act-total-hint { font-size: 12px; font-style: normal; }
.lh-meta, .lh-row .lh-when, .lh-row .lh-ip, .lh-row .lh-ua { font-size: 12px; }
.lh-row .lh-role {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--border-strong);
}

/* ── Kostenspiegel: Beträge nie zwischen Zahl und € umbrechen; Szenario-Tabelle
   einzeilig (scrollt am Handy waagerecht in ihrem eigenen Kasten) ── */
#cost-summary-card strong { white-space: nowrap; font-size: clamp(18px, 5vw, 22px) !important; }
#cost-summary-card #cs-sale { font-size: clamp(20px, 6vw, 26px) !important; }
#cost-beteiligung th, #cs-bet-tbody td { white-space: nowrap; }

/* ── Fußzeile: Impressum/Datenschutz mit 40px Trefferfläche, Zeile bleibt ruhig ── */
.app-footer a { display: inline-block; padding-block: 13px; margin-block: -13px; }

/* ── Touch (Handy, Tablet bis 900px, jedes Touch-Gerät): Klickziele 40px ── */
@media (max-width: 900px), (pointer: coarse) {
  .month-card { min-height: 40px; padding: 0 14px; }
  .btn { min-width: 40px; }
  .btn.btn-sm { min-height: 40px; }
  .field input, .field select { min-height: 40px; }
  .notiz-del, .log-del { width: 40px !important; height: 40px !important; }
  .d-pen { width: 40px; height: 40px; }
  .site-switch-btn, .brand-line .site-switch-btn { min-height: 40px; }
  .foto-del { min-height: 40px; }
  .chip-list-item.list-tag { min-height: 40px; }
  .chip-list-item .chip-del { width: 40px; height: 38px; }
  #tausch-chk-list label { min-height: 40px; }
}
/* Handy: Monatsleiste ohne Leiste darunter — genau eine Chip-Höhe (40px), Wischen genügt */
@media (max-width: 640px) {
  .month-strip { padding-bottom: 0; scrollbar-width: none; }
  .month-strip::-webkit-scrollbar { display: none; }
}

/* Knopfzeile in Karten/Dialogen auf dem Handy (25.09.2026): mit flex:1 passten alle Knöpfe nie in eine neue Zeile,
   „Bearbeiten / Speichern“ lief über „Zurück“ und „Löschen“. Hauptknopf eigene Zeile oben, die übrigen darunter. */
@media (max-width: 640px) {
  .modal-btns .btn { flex: 1 1 auto; }
  .modal-btns .btn-primary { flex: 1 1 100%; order: -1; }
}