/* ==========================================================================
   Bastelbude – Layout & Design-System (Handy, Tablet, PC)
   Wird nach app.css geladen und überschreibt dessen Grundwerte.
   Schrift: Barlow (SIL OFL), lokal ausgeliefert – kein Abruf bei Google.
   ========================================================================== */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.81419bf5abb5.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.8e986e86d57e.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.a1e2a2d7d4c0.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-700-normal.15481e4eab6d.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.ba4513495282.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.e1180918b873.woff2") format("woff2"); }

/* ── Farben & Maße ─────────────────────────────────────────────────────── */
:root {
  --bg: #1c1e1d;          /* Graphit */
  --panel: #242725;
  --panel-2: #2e322f;
  --field: #191b1a;
  --line: #393e3a;
  --text: #f1eee7;
  --muted: #a4a8a1;
  --orange: #ed7d31;      /* Bastelbude-Orange = Signalfarbe */
  --orange-dark: #b95417;
  --orange-soft: rgba(237,125,49,.14);
  --on-orange: #1f1309;
  --green: #6fae72;
  --red: #d4665b;
  --yellow: #e2b84a;
  --orange-text: #ffd3b4;
  --accent-text: #f39250;
  --blue-text: #8cbde3;
  --yellow-text: #e2b84a;   /* Orange für Schrift: erfüllt WCAG-Kontrast 4.5:1 */
  --red-text: #e8887e;
  --green-text: #9fcea1;
  --radius: 12px;
  --radius-sm: 8px;
  --tap: 48px;
  --nav-w: 252px;
  --appbar-h: 56px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Barlow Condensed", "Barlow", ui-sans-serif, system-ui, sans-serif;
  /* Aliase für ältere Inline-Styles in den Vorlagen */
  --border: var(--line);
  --accent: var(--orange);
  --success: var(--green);
  --bg-warning: rgba(226,184,74,.12);
  --border-warning: rgba(226,184,74,.55);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #f2f1ed;
  --panel: #ffffff;
  --panel-2: #eae8e2;
  --field: #ffffff;
  --line: #d6d3ca;
  --text: #1c1e1d;
  --muted: #5f625d;
  --orange-dark: #b4510f;
  --orange-soft: rgba(237,125,49,.13);
  --green: #3f8a43;
  --red: #b8483d;
  --yellow: #8a6510;
  --orange-text: #9a4510;
  --accent-text: #9a4510;
  --blue-text: #2b6a99;
  --yellow-text: #7a5a0e;
  --red-text: #a83a30;
  --green-text: #276029;
  color-scheme: light;
}

/* ── Grundlagen ────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar-h) + 12px); }
body,
[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
body.nav-open { overflow: hidden; }
.icon { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
p { line-height: 1.55; }
small { font-size: 14px; }

h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 6.2vw, 46px);
  line-height: 1.02;
  letter-spacing: 0;
}
h2 { font-family: var(--font-body); font-weight: 700; font-size: 18px; letter-spacing: 0; }
.eyebrow {
  color: var(--accent-text);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Seitenrahmen ─────────────────────────────────────────────────────── */
.container { width: min(1120px, 100% - 48px); margin: 0 auto; padding: 32px 0 48px; }
.page-heading { min-height: 0; margin-bottom: 24px; align-items: flex-end; }
.demo-banner { padding: 8px 16px; background: var(--orange); color: var(--on-orange); text-align: center; font-size: 14px; font-weight: 600; }
.appfooter { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; padding: 8px 16px 32px; font-size: 14px; }
.appfooter a { color: var(--muted); display: inline-flex; align-items: center; min-height: 40px; }
.appfooter a:hover { color: var(--accent-text); }

/* Kopfzeile (Handy) */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: none; align-items: center; gap: 4px;
  height: calc(var(--appbar-h) + var(--safe-t));
  padding: var(--safe-t) 8px 0;
  background: var(--bg); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.appbar-brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 8px; margin-right: auto; font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.appbar-brand img { width: 34px; height: 34px; border-radius: 50%; }
.appbar-btn {
  display: inline-grid; place-items: center;
  width: var(--tap); height: var(--tap); padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
}
.appbar-btn:active { background: var(--panel-2); }
.appbar-public { display: flex; }

/* Navigation (Seitenleiste / Blatt) */
.appnav {
  position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
  width: var(--nav-w);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.appnav-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 6px 16px; }
.appnav-brand { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.appnav-brand img { width: 38px; height: 38px; border-radius: 50%; }
.appnav-close { display: none; }
.appnav-search { position: relative; margin: 6px 12px 10px; }
.appnav-search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 20px; height: 20px; pointer-events: none; }
.appnav-search input { min-height: 44px; padding: 8px 12px 8px 40px; border-radius: 999px; font-size: 16px; }
.appnav-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 12px; }
.navgroup { padding: 6px 0; }
.navgroup + .navgroup { border-top: 1px solid var(--line); }
.navgroup-title { margin: 8px 12px 4px; color: var(--muted); font-size: 13px; font-weight: 600; }
.navlink {
  position: relative;
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; font-size: 15.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.navlink .icon { color: var(--muted); }
.navlink:hover { background: var(--panel-2); }
.navlink[aria-current="page"] { background: var(--orange-soft); color: var(--text); font-weight: 700; }
.navlink[aria-current="page"]::before { content: ""; position: absolute; left: -8px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 3px 3px 0; background: var(--orange); }
.navlink[aria-current="page"] .icon { color: var(--accent-text); }
.navlink .badge { margin-left: auto; }
.appnav-foot { padding: 8px; border-top: 1px solid var(--line); padding-bottom: calc(8px + var(--safe-b)); }
.appnav-foot form { margin: 0; }
.appnav-backdrop { display: none; }

/* Badges */
.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--orange); color: var(--on-orange); font-size: 12px; font-weight: 700; line-height: 1; }
.badge-dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }

/* Tab-Leiste (Handy) */
.tabbar {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  display: none;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 4px var(--safe-b);
  margin: 0;
  background: var(--panel); background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: inherit; gap: 0;
}
.tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; padding: 6px 2px 4px; margin: 0;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-icon { position: relative; display: inline-grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; }
.tab-icon .badge { position: absolute; top: -3px; right: 8px; min-width: 18px; height: 18px; font-size: 11px; box-shadow: 0 0 0 2px var(--panel); }
.tab-icon .badge-dot { width: 10px; height: 10px; min-width: 10px; top: 1px; right: 14px; }
.tab > .icon { width: 56px; height: 30px; padding: 4px 17px; border-radius: 999px; }
.tab[aria-current="page"] { color: var(--text); }
.tab[aria-current="page"] > .icon,
.tab[aria-current="page"] .tab-icon { background: var(--orange-soft); color: var(--accent-text); }
body.nav-open .tab[data-open-nav] .tab-icon { background: var(--orange-soft); color: var(--accent-text); }

/* Zurück-Knopf im Inhalt (Tablet/PC) */
.back-button.back-inline { gap: 6px; min-height: 40px; margin: -12px 0 16px; padding: 0 12px 0 8px; border-radius: 999px; background: transparent; font-weight: 600; font-size: 15px; }
.back-button.back-inline .icon { width: 18px; height: 18px; }

/* Seiten-Umschalter (z. B. Posteingang) */
.segmented { display: inline-flex; gap: 4px; margin: -8px 0 20px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.segmented a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--muted); font-weight: 600; }
.segmented a[aria-current="page"] { background: var(--orange); color: var(--on-orange); }
.segmented a[aria-current="page"] .badge { background: var(--on-orange); color: var(--accent-text); }

/* ── Bausteine ────────────────────────────────────────────────────────── */
.card,
[data-theme="light"] .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: 20px; }
.card:has(> .empty:only-of-type) .empty,
.card .empty { padding: 4px 0 0; font-size: 15px; }
.section-heading { gap: 12px; margin-bottom: 6px; }
.section-heading h2 { margin: 0; }
.section-heading a { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent-text); font-size: 15px; font-weight: 600; white-space: nowrap; }

.button {
  gap: 8px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel-2); color: var(--text);
  font-weight: 600; font-size: 15.5px; line-height: 1.1; text-align: center;
  touch-action: manipulation;
}
.button.primary { background: var(--orange); border-color: var(--orange); color: var(--on-orange); }
.button.primary:hover { background: #f48d47; }
.button.danger { background: transparent; border-color: var(--red); color: var(--red-text); }
[data-theme="dark"] .button.danger { color: #ffb3ab; }
.button:disabled, .button.is-busy { opacity: .6; cursor: progress; }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; }

input, textarea, select {
  min-height: 48px; padding: 11px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: var(--field); color: var(--text);
  font-size: 16px; /* verhindert Zoom auf iPhone */
}
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--orange); }
input[type="file"] { padding: 10px; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
select[multiple] { background-image: none; padding-right: 14px; }
label, .field label { font-size: 15px; font-weight: 600; }
.checkbox-row { min-height: 44px; }
.helptext, .field small { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); }

.list-row, .event-row, .task-row, .task-detail-row { min-height: 60px; padding: 8px 0; }
.list-row small, .task-row small, .event-row small { font-size: 14px; }

.message { border-radius: var(--radius-sm); background: var(--panel); background: color-mix(in srgb, var(--green) 16%, var(--panel)); border-left-color: var(--green); }
.message.warning, .message.error { background: var(--panel); background: color-mix(in srgb, var(--orange) 16%, var(--panel)); border-left-color: var(--orange); }
.messages { margin-bottom: 8px; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 100%; }

/* Filterleisten: Knopf zum Ein-/Ausklappen (nur Handy sichtbar, per JS ergänzt) */
.filter-toggle { display: none; }

/* ── Startseite ───────────────────────────────────────────────────────── */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0 0 20px; }
.quick-action {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
  font-weight: 600; font-size: 15.5px; line-height: 1.2;
}
.quick-action .icon { width: 26px; height: 26px; color: var(--accent-text); }
.quick-action:hover { border-color: var(--orange); }
.quick-action:active { background: var(--panel-2); }
.quick-action.is-alert .icon { color: var(--red-text); }
.dashboard-hint { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; border: 1px solid var(--border-warning); border-radius: var(--radius); background: var(--bg-warning); }
.dashboard-hint strong { flex: 1 1 220px; font-weight: 600; }
.instagram-spotlight { min-height: 44px; border-radius: 999px; }
.dashboard-grid { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid > * { min-width: 0; }
.dashboard-grid .card { padding: 18px 20px; }

/* ── Tablet & PC (ab 768 px): feste Seitenleiste ──────────────────────── */
@media (min-width: 768px) {
  body.has-nav .appmain { margin-left: var(--nav-w); }
  body.has-nav .appbar { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --nav-w: 228px; }
  .container { width: calc(100% - 40px); padding-top: 24px; }
  .dashboard-grid, .card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .dashboard-grid .span-2 { grid-column: span 2; }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
  .page-heading { flex-wrap: wrap; }
  .heading-actions { flex-wrap: wrap; }
}
@media (min-width: 1400px) {
  :root { --nav-w: 272px; }
}

/* ── Handy (bis 767 px): Kopfzeile, Tab-Leiste, Menü als Blatt ────────── */
@media (max-width: 767px) {
  body.has-nav .appbar { display: flex; }
  body.has-nav .tabbar { display: flex; }
  body.has-nav .appmain { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  .back-button.back-inline { display: none; }

  .container { width: calc(100% - 32px); padding: 20px 0 28px; }
  h1 { font-size: clamp(30px, 8.5vw, 38px); }
  .page-heading { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .page-heading > div:first-child { min-width: 0; }
  .heading-actions, .page-heading > .button, .page-heading > a.button { width: 100%; }
  .heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .heading-actions > .button, .heading-actions > a.button, .heading-actions > form { flex: 1 1 140px; }
  .heading-actions > form .button { width: 100%; }

  .card, .dashboard-grid .card { padding: 16px; border-radius: 14px; }
  .button { min-height: var(--tap); }
  .form-actions { position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-b) + 8px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; margin: 20px -10px 0; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .form-actions .button { flex: 1 1 120px; }

  /* Menü als Blatt von unten */
  .appnav {
    top: auto; right: 0; width: auto;
    max-height: calc(100vh - var(--safe-t) - 24px); max-height: calc(100dvh - var(--safe-t) - 24px);
    border-right: 0; border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    transform: translateY(105%);
    transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
    visibility: hidden;
    box-shadow: 0 -12px 40px rgba(0,0,0,.35);
  }
  body.nav-open .appnav { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .appnav-head { padding: 8px 8px 0 16px; }
  .appnav-head::before { content: ""; position: absolute; left: 50%; top: 7px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--line); }
  .appnav-brand { font-size: 20px; }
  .appnav-brand img { width: 32px; height: 32px; }
  .appnav-close { display: inline-grid; }
  .appnav-search { margin: 4px 16px 8px; }
  .appnav-search input { min-height: var(--tap); }
  .appnav-scroll { padding: 0 12px 8px; }
  /* Auf dem Handy: Kacheln statt Liste */
  .navgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; }
  .navgroup + .navgroup { border-top: 0; }
  .navgroup-main { display: none; } /* steckt schon in der Tab-Leiste */
  .navgroup-title { grid-column: 1 / -1; margin: 6px 4px 0; font-size: 14px; }
  .navgroup .navlink { min-height: 56px; padding: 8px 12px; gap: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 15px; line-height: 1.2; }
  .navgroup .navlink span:not(.badge) { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .navlink[aria-current="page"]::before { display: none; }
  .navgroup .navlink[aria-current="page"] { border-color: var(--orange); }
  .appnav-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px calc(10px + var(--safe-b)); }
  .appnav-foot .navlink { min-height: var(--tap); justify-content: center; border: 1px solid var(--line); border-radius: 999px; }
  .appnav-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
  body.nav-open .appnav-backdrop { opacity: 1; pointer-events: auto; }

  /* Filter */
  .filter-collapsible { display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px; }
  .filter-collapsible > * { grid-column: 1 / -1; }
  .filter-collapsible > .filter-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
  .filter-collapsible > input[type="search"]:first-of-type,
  .filter-collapsible > input[type="text"]:first-of-type { grid-column: 1; grid-row: 1; }
  .filter-collapsible:not(.filters-open) > select,
  .filter-collapsible:not(.filters-open) > label,
  .filter-collapsible:not(.filters-open) > .button:not(.filter-toggle),
  .filter-collapsible:not(.filters-open) > button:not(.filter-toggle),
  .filter-collapsible:not(.filters-open) > div { display: none !important; }
  .filter-collapsible.filters-open > .filter-toggle { border-color: var(--orange); color: var(--accent-text); }

  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid .span-2 { grid-column: auto; }
  .quick-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quick-action { min-height: 64px; padding: 10px 12px; font-size: 15px; }
  .dashboard-heading-actions { flex-wrap: wrap; }
  .dashboard-heading-actions > * { flex: 1 1 auto !important; }
  .dashboard-heading-actions .instagram-spotlight { justify-content: center; }
  .login-logo { width: min(180px, 50vw); margin-bottom: 16px; }
  .login-shell { min-height: 0; }
  .segmented { display: flex; width: 100%; }
  .segmented a { flex: 1; justify-content: center; }
  dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .appnav, body.nav-open .appnav, .appnav-backdrop { transition: none !important; }
}

/* ── Druck: Navigation ausblenden ─────────────────────────────────────── */
@media print {
  .appbar, .appnav, .tabbar, .appnav-backdrop, .appfooter, .back-button, .demo-banner { display: none !important; }
  body.has-nav .appmain { margin: 0 !important; padding: 0 !important; }
}

/* ── Feinschliff ──────────────────────────────────────────────────────── */
.section-heading { flex-wrap: wrap; }
.section-heading a { white-space: normal; text-align: right; }
.list-row > span:has(> strong + small) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Ja/Nein-Felder: Kästchen + Beschriftung in einer großen Tippzeile, Hinweis darunter */
.checkbox-row { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px; margin: 8px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
.checkbox-row > input { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: 0; }
.checkbox-row > label { grid-column: 2; grid-row: 1; order: 0; margin: 0; cursor: pointer; }
.checkbox-row > small, .checkbox-row > .error { grid-column: 1 / -1; margin: 2px 0 0; }

/* Fahrzeug-Filter: auf kleinen Bildschirmen als Leiste statt großer Kacheln */
@media (max-width: 1023px) {
  .vehicle-filter-cards { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
  .vehicle-filter-card { flex: 0 0 auto; min-height: 44px; flex-direction: row; align-items: center; gap: 8px; padding: 0 16px; border-radius: 999px; }
  .vehicle-filter-card:hover { transform: none; }
  .vehicle-filter-card strong { font-family: var(--font-body); font-size: 15px; font-weight: 600; }
  .vehicle-filter-card small, .vehicle-filter-card .ownership-icon { display: none; }
  .vehicle-filter-card.active, [data-theme="light"] .vehicle-filter-card.active { background: var(--orange); border-color: var(--orange); box-shadow: none; }
  .vehicle-filter-card.active strong { color: var(--on-orange); }
}

/* ==========================================================================
   Gemeinsame Bausteine für Listen- und Detailseiten
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.button-row > form { margin: 0; }
.button-block { width: 100%; margin-top: 14px; }
.button-quiet { background: transparent; }
.button .icon { width: 18px; height: 18px; }
.card + .card, .detail-grid + .card, .card + .detail-grid { margin-top: 14px; }
.card-quiet { background: transparent; border-style: dashed; }
.subhead { margin: 20px 0 6px; font-size: 15px; font-weight: 700; color: var(--muted); }
.list-end { margin-left: auto; text-align: right; white-space: nowrap; }
.list-grow { flex: 1; min-width: 0; }
.list-row > form { margin: 0; }
.empty-state { display: grid; justify-items: start; gap: 4px; }
.empty-state p { margin: 0 0 8px; color: var(--muted); }

/* Status-Farben (einheitlich für Aufträge) */
.status-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.status-pill.status-active  { background: var(--orange-soft); color: var(--accent-text); }
.status-pill.status-waiting { background: transparent; background: color-mix(in srgb, var(--yellow) 18%, transparent); color: var(--yellow-text); }
.status-pill.status-done    { background: transparent; background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green-text); }
.status-pill.status-missing { background: transparent; background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red-text); }
.status-dot.waiting { background: var(--yellow); }

/* Filter-Chips */
.chip-row { display: flex; gap: 8px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; white-space: nowrap; }
.chip:hover { border-color: var(--orange); }
.chip[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip .status-dot { width: 9px; height: 9px; box-shadow: none; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 600; }
.tag .icon { width: 14px; height: 14px; }

/* Suchzeile */
.search-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px) auto auto; gap: 8px; margin-bottom: 16px; }

/* Auftragsliste */
.order-list { display: grid; gap: 8px; }
.order-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.order-item.status-active  { border-left-color: var(--orange); }
.order-item.status-waiting { border-left-color: var(--yellow); }
.order-item.status-done    { border-left-color: var(--green); background: transparent; }
.order-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.order-main:hover strong { color: var(--accent-text); }
.order-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.order-title strong { font-size: 17px; }
.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--muted); font-size: 14px; }
.order-action { margin: 0; flex: 0 0 auto; }
.order-action .button { min-width: 140px; }

/* Detail-Kopf */
.detail-head { margin-bottom: 18px; }
.detail-head h1 { margin-bottom: 12px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.meta-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: 14px; color: var(--text); }
.meta-chip .icon { width: 16px; height: 16px; color: var(--muted); }
a.meta-chip:hover { border-color: var(--orange); }
.meta-chip.is-warning { border-color: var(--yellow); color: var(--yellow); }
.meta-chip.is-warning .icon { color: var(--yellow); }
.detail-head .heading-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
.detail-grid > .card { margin: 0; }

/* Status-Umschalter */
.status-card h2 { margin-bottom: 12px; }
.status-switch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); }
.status-switch[hidden] { display: none; }
.status-switch form { margin: 0; display: contents; }
.status-option { min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; line-height: 1.15; cursor: pointer; }
.status-option:hover { background: var(--panel-2); color: var(--text); }
.status-option[aria-pressed="true"] { cursor: default; color: var(--on-orange); background: var(--muted); }
.status-option.status-active[aria-pressed="true"]  { background: var(--orange); }
.status-option.status-waiting[aria-pressed="true"] { background: var(--yellow); }
.status-option.status-done[aria-pressed="true"]    { background: var(--green); color: #fff; }
.done-form { margin-top: 16px; }
.done-checklist { margin-top: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.done-checklist p { margin: 0 0 8px; }
.done-checklist .checkbox-row { margin: 6px 0; background: transparent; }

.order-total { margin: 0 0 8px; padding: 0 0 12px; border-top: 0; border-bottom: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.order-total strong { font-family: var(--font-display); font-size: 34px; line-height: 1; }

/* Kommentare */
.comment { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.comment:first-of-type { border-top: 0; }
.comment > form { margin: 0; }
.avatar-sm { flex: 0 0 auto; width: 36px; height: 36px; font-size: 13px; font-family: var(--font-body); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { margin: 0; }
.comment-meta small { margin-left: 6px; }
.comment-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; }
.comment-form textarea { min-height: 48px; height: 48px; flex: 1; resize: vertical; }

@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .search-row { grid-template-columns: minmax(0, 1fr) auto; }
  .search-row select { grid-column: 1 / -1; grid-row: 2; }
  .search-row .button-quiet { grid-column: 1 / -1; }
  .order-item { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .order-action .button { width: 100%; }
  .detail-head .heading-actions > * { flex: 1 1 0; }
  .status-switch { grid-template-columns: 1fr 1fr; }
  .order-total strong { font-size: 30px; }
  .comment-form { flex-direction: column; align-items: stretch; }
}

/* ── Fahrzeug-Detail ───────────────────────────────────────────────────── */
.vehicle-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: start; }
.vehicle-head > .heading-actions, .vehicle-head > .action-chips { grid-column: 1 / -1; }
.vehicle-head:not(:has(.vehicle-head-image)) { grid-template-columns: minmax(0, 1fr); }
.vehicle-head-image { width: 168px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }
.vehicle-head h1 { margin-bottom: 2px; }
.vehicle-model { margin: 0 0 12px; }
.plate { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px 0 22px; border: 2px solid #1c1e1d; border-radius: 6px; background: #fff linear-gradient(90deg, #1d4fa5 0 14px, transparent 14px); color: #111; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: .5px; }
.meta-chip.is-danger { border-color: var(--red); color: var(--red-text); }
.action-chips { margin: 12px 0 0; }
.action-chips .chip { font-size: 14px; min-height: 40px; }
.action-chips .chip .icon { width: 18px; height: 18px; color: var(--accent-text); }
button.chip { font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

.section-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 4px; margin: 0 0 14px; padding: 6px 0; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: 15px; }
.section-nav a:hover { color: var(--text); background: var(--panel-2); }
section[id] { scroll-margin-top: 72px; }

.data-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0; margin: 0; }
.data-list dt, .data-list dd { padding: 10px 0; border-top: 1px solid var(--line); }
.data-list dt { padding-right: 16px; font-size: 15px; }
.data-list dd { overflow-wrap: anywhere; }
.data-list > dt:first-of-type, .data-list > dt:first-of-type + dd { border-top: 0; }
.more-data { margin-top: 6px; border-top: 1px solid var(--line); }
.more-data > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; cursor: pointer; color: var(--accent-text); font-weight: 600; list-style: none; }
.more-data > summary::-webkit-details-marker { display: none; }
.more-data > summary::after { content: ""; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.more-data[open] > summary::after { transform: rotate(-135deg); }
.inline-date-edit summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; margin-left: 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.inline-date-form { display: flex; gap: 8px; margin: 8px 0 0; }
.inline-date-form input { min-height: 44px; }

.text-link { color: var(--accent-text); font-weight: 600; display: inline-flex; align-items: center; min-height: 40px; }
.list-row-top { align-items: flex-start; padding: 12px 0; }
.list-row-top > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row-text { color: var(--text); font-size: 15px; margin-top: 4px; }
.status-dot.overdue { background: var(--red); }
.icon-btn-danger:hover { border-color: var(--red); color: var(--red-text); }

.protocol-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.protocol-row:first-of-type { border-top: 0; }
.protocol-row .list-grow { display: flex; flex-direction: column; gap: 3px; }
.protocol-actions { display: flex; gap: 8px; align-items: center; }

.qr-dialog { border: 0; border-radius: 16px; padding: 20px; background: #fff; color: #111; text-align: center; }
.qr-dialog::backdrop { background: rgba(0,0,0,.7); }
.qr-dialog img { display: block; margin: 8px auto 16px; }
.qr-dialog .button { background: #eee; color: #111; border-color: #ddd; }

@media (max-width: 767px) {
  .vehicle-head { grid-template-columns: minmax(0, 1fr); }
  .vehicle-head-image { width: 100%; max-height: 200px; aspect-ratio: auto; margin-bottom: 14px; }
  .section-nav { margin-left: -16px; margin-right: -16px; padding-left: 12px; padding-right: 12px; top: calc(var(--appbar-h) + var(--safe-t)); border-bottom: 1px solid var(--line); }
  section[id] { scroll-margin-top: calc(var(--appbar-h) + 64px); }
  .data-list { grid-template-columns: minmax(0, 1fr); }
  .data-list dt { padding: 10px 0 0; color: var(--muted); font-size: 13px; }
  .data-list dd { padding: 0 0 10px; border-top: 0; }
  .protocol-row { flex-wrap: wrap; }
  .protocol-actions { width: 100%; padding-left: 22px; }
  .protocol-actions .button { flex: 1; }
}

/* ── Hebebühnen-Plan ───────────────────────────────────────────────────── */
.icon-flip { transform: scaleX(-1); }
.week-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.week-nav .icon-btn { width: 44px; height: 44px; }
.week-label { font-family: var(--font-display); font-size: 22px; font-weight: 700; padding: 0 4px; }
.week-nav .button { margin-left: auto; }
.lift-agenda { display: none; }
.lift-booking { border-color: var(--orange); border-color: color-mix(in srgb, var(--orange) 55%, transparent); background: var(--orange-soft); color: var(--text); }
.lift-booking-time { color: var(--accent-text); }
.lift-booking-nolift .lift-booking-time { color: var(--blue-text); }
.lift-free { border-color: transparent; border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green-text); }
.lift-schedule-head > strong { text-transform: none; letter-spacing: 0; font-size: 13px; }
.lift-today { background: transparent !important; background: color-mix(in srgb, var(--orange) 7%, transparent) !important; }

@media (max-width: 1023px) {
  .lift-schedule { display: none; }
  .lift-agenda { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
  .agenda-day { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); scroll-margin-top: calc(var(--appbar-h) + 12px); }
  .agenda-day.is-today { border-color: var(--orange); }
  .agenda-date { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
  .agenda-date > span:first-child { font-weight: 700; }
  .agenda-lift { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); }
  .agenda-lift:first-of-type { border-top: 0; }
  .agenda-lift-name { padding-top: 10px; font-weight: 700; font-size: 14px; color: var(--accent-text); }
  .agenda-lift-name.is-muted { color: var(--muted); }
  .agenda-bookings { display: grid; gap: 6px; }
  .agenda-bookings .lift-booking { padding: 10px 12px; border-radius: 10px; }
  .agenda-bookings .lift-booking-time { font-size: 13px; }
  .agenda-bookings .lift-booking-title { font-size: 15px; }
  .agenda-bookings .lift-booking-sub { font-size: 13px; }
  .agenda-bookings .lift-free { min-height: 44px; justify-content: flex-start; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 767px) {
  .lift-agenda { grid-template-columns: minmax(0, 1fr); }
  .week-label { font-size: 19px; }
}

/* Unter-Navigation der Werkstatt als Chips */
.workshop-tabs { display: flex; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; overflow-x: auto; scrollbar-width: none; }
.workshop-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-size: 15px; font-weight: 600; }
.workshop-tabs a:hover, .workshop-tabs a.active, .workshop-tabs a[aria-current] { border-color: var(--orange); }

/* ==========================================================================
   Kein seitliches Wischen auf dem Handy
   ========================================================================== */
/* Lange Wörter (Teilenummern, Links, E-Mails) umbrechen statt die Seite zu verbreitern */
.container { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.container :is(h1, h2, h3, p, li, dd, td, th, label, small, strong, span, a, summary, em) { overflow-wrap: anywhere; min-width: 0; }
.container .button, .container .chip, .container .badge, .container .status-pill, .container .plate, .container time { overflow-wrap: normal; }
/* Flex- und Grid-Kinder dürfen schrumpfen */
.container :is(.card, .list-row, .task-row, .task-detail-row, .event-row, .member-card, .document-row, .maintenance-row, .order-item, .order-main, .project-card, .kanban-column) > * { min-width: 0; }
.container img, .container video, .container iframe, .container canvas, .container svg:not(.icon) { max-width: 100%; height: auto; }
.container pre, .container code { white-space: pre-wrap; overflow-wrap: anywhere; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.permission-card { padding: 0; overflow: hidden; }
.permission-scroll { overflow-x: auto; }
.permission-group-name { display: none; }

@media (max-width: 767px) {
  /* Knöpfe dürfen umbrechen statt die Zeile zu sprengen */
  .container .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; hyphens: auto; text-align: center; }
  .list-row, .document-row, .maintenance-row { flex-wrap: wrap; }
  .row-actions { width: 100%; margin-left: 0; }
  .row-actions .button { flex: 1 1 0; }

}
@media (max-width: 1023px) { .table-stack .table-head-row { display: none; } }

@media (max-width: 767px) {
  /* Beitrags-Jahresübersicht: Monate als 4er-Raster */
  .membership-year-table.table-stack tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .membership-year-table.table-stack td { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
  .membership-year-table.table-stack td:first-child, .membership-year-table.table-stack td:last-child { grid-column: 1 / -1; border: 0; padding: 4px 0; flex-direction: row; justify-content: space-between; }
  .membership-year-table.table-stack td:first-child::before { display: none; }
}

/* ==========================================================================
   Runde 4: Feinschliff über alle Seiten
   ========================================================================== */
/* Knöpfe nie schmaler als ihr längstes Wort, keine Silbentrennung in Knöpfen */
.container .button, .container .chip, .container .status-option, .container summary.button { overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; min-width: min-content; flex-shrink: 0; }
.container .button { line-height: 1.15; padding-top: 6px; padding-bottom: 6px; }
.text-strong { color: var(--text); }

/* Datumskachel */
.date-tile { flex: 0 0 auto; width: 52px; height: 56px; border-radius: 10px; border-color: var(--orange); border-color: color-mix(in srgb, var(--orange) 60%, transparent); background: var(--orange-soft); }
.date-tile strong { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.date-tile small, .date-tile strong { white-space: nowrap; overflow-wrap: normal !important; hyphens: manual; }
.date-tile small { font-size: 12px; font-weight: 700; }

/* Formulare */
input[type="file"] { padding: 8px; min-height: 48px; color: var(--muted); }
input[type="file"]::file-selector-button { margin-right: 12px; min-height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
input[type="date"], input[type="time"], input[type="datetime-local"] { min-width: 0; }
.field { margin-bottom: 16px; }
.inline-form { margin-bottom: 14px; }
.inline-form label { display: block; margin: 0 0 6px; }
.inline-form-row { display: flex; gap: 8px; }
.inline-form-row input { flex: 1; min-width: 0; }

/* Wartungsintervalle */
.schedule-item { padding: 14px 0; border-top: 1px solid var(--line); }
.schedule-item:first-of-type { border-top: 0; padding-top: 0; }
.schedule-main { display: flex; gap: 12px; align-items: flex-start; }
.schedule-main .status-dot { margin-top: 7px; }
.schedule-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schedule-text small { display: block; }
.schedule-due.is-overdue { color: var(--red-text); font-weight: 600; }
.schedule-due.is-warning { color: var(--yellow); font-weight: 600; }
.schedule-done { margin: 12px 0 0 22px; }
.schedule-done > summary { list-style: none; display: inline-flex; }
.schedule-done > summary::-webkit-details-marker { display: none; }
.schedule-done[open] > summary { background: transparent; color: var(--accent-text); }
.schedule-done form { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.schedule-done label { display: block; margin-bottom: 6px; }
.schedule-done p { margin: 8px 0 12px; }
.schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 22px; }
.schedule-actions form { margin: 0; }

/* Gefährliche Aktionen ans Seitenende (per JS verschoben) */
.danger-zone { margin-top: 20px; }
.danger-zone .button-row { margin-top: 0; }

/* Stat-Kacheln */
.stat-grid, .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.stat-value { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1; }
.stat-label { color: var(--muted); font-size: 14px; }

@media (max-width: 767px) {
  .schedule-done, .schedule-actions { margin-left: 0; }
  .schedule-done > summary { width: 100%; justify-content: center; }
  .schedule-actions > * { flex: 1 1 0; }
  .schedule-actions .button { width: 100%; }
  .stat-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
}
.stat-block { margin-bottom: 20px; }
@media (max-width: 767px) {
  .filter-collapsible.filter-no-search { grid-template-columns: 1fr !important; }
  .filter-collapsible.filter-no-search > .filter-toggle { grid-column: 1; width: 100%; }
}

/* Lager */
.card-alert { border-color: var(--orange); border-color: color-mix(in srgb, var(--orange) 60%, var(--line)); margin-bottom: 14px; }
.card-alert h2 { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); }
.card-alert h2 .icon { width: 20px; height: 20px; }
.stock-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--panel-2); font-weight: 700; font-size: 14px; white-space: nowrap; }
.stock-badge.is-low { background: transparent; background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red-text); }
.stock-low, .list-row.stock-low { background: transparent; }
.search-row-scan { grid-template-columns: minmax(0, 1fr) auto auto auto; }
@media (max-width: 767px) {
  .search-row-scan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .search-row-scan input { grid-column: 1 / -1; }
  .search-row-scan .button-quiet { grid-column: 1 / -1; }
}

/* Kartenraster für Werkzeuge, Anhänger u. ä. */
.group-section + .group-section { margin-top: 22px; }
.group-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--muted); }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.item-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.item-card > form { margin: 6px 0 0; }
.item-card > .button { margin-top: 6px; }
.item-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.item-card-head strong { font-size: 17px; }
.item-card-head > :first-child { flex: 1 1 auto; min-width: 0; }
.item-card-head > .status-pill { flex: 0 0 auto; }
.item-meta { display: block; color: var(--muted); }
.item-meta strong { color: var(--text); }
.item-card.is-overdue { border-color: var(--red); }
.item-card-admin { display: flex; gap: 16px; margin-top: 4px; }
.text-danger { color: var(--red-text); }
@media (max-width: 767px) { .item-grid { grid-template-columns: minmax(0, 1fr); } }
.plate-sm { min-height: 24px; padding: 0 8px 0 16px; font-size: 15px; border-width: 1.5px; background: #fff linear-gradient(90deg, #1d4fa5 0 10px, transparent 10px); }
.order-action-group { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 767px) { .order-action-group > .button { flex: 1 1 0; } }

/* Kasse */
.money-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.money-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.money-tile span { color: var(--muted); font-size: 13px; font-weight: 600; }
.money-tile strong { font-family: var(--font-display); font-size: 24px; line-height: 1.05; white-space: nowrap; }
.is-plus { color: var(--green-text); }
.is-minus { color: var(--red-text); }
.money-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.money-row:first-of-type { border-top: 0; }
.money-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.money-row-amount { white-space: nowrap; font-size: 16px; }
.money-row-actions { display: flex; gap: 6px; }
.money-row-actions form { margin: 0; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.icon-btn .icon { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .money-summary { grid-template-columns: 1fr 1fr; }
  .money-tile-total { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; }
  .money-tile strong { font-size: 21px; }
  .money-row { grid-template-columns: minmax(0, 1fr) auto; }
  .money-row-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: -4px; }
}

/* Dokumente */
.document-folder-panel { margin: 0 0 16px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.document-folder-card { min-height: 0; padding: 14px 16px; gap: 4px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.document-folder-card:hover { transform: none; }
.document-folder-card .document-folder-icon { grid-row: span 2; width: 26px; height: 26px; color: var(--accent-text); font-size: inherit; }
.document-folder-card strong { font-family: var(--font-body); font-size: 16px; font-weight: 700; }
.document-row { gap: 8px; padding: 10px 0; min-height: 64px; }
.document-row > a { min-width: 0; }
.document-row-actions { display: flex; gap: 4px; align-items: center; }
.document-row-actions form { margin: 0; }
.folder-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
@media (max-width: 767px) {
  .document-folder-panel { grid-template-columns: 1fr 1fr; }
  .document-folder-card { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .document-folder-card .document-folder-icon { grid-row: auto; width: 22px; height: 22px; }
  .document-folder-card small { font-size: 13px; }
  .document-row { flex-wrap: wrap; }
  .document-row > a { flex: 1 1 100%; }
  .document-row-actions { width: 100%; justify-content: flex-end; margin-top: -6px; }
}

/* Posteingang */
.inbox-row { display: flex; align-items: flex-start; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.inbox-row:first-of-type { border-top: 0; }
.inbox-row > form { margin: 0; }
.inbox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.inbox-main:hover strong { color: var(--accent-text); }
.inbox-preview { color: var(--muted); font-size: 15px; }
.inbox-row.is-unread strong { color: var(--text); }
.unread-dot { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--orange); vertical-align: middle; }

/* Listenfilter & Mitglieder */
.list-filter { position: relative; margin: 0 0 14px; }
.list-filter .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.list-filter input { padding-left: 44px; border-radius: 999px; }
.avatar-img { object-fit: cover; }
.member-grid { gap: 10px; }
.member-card { padding: 14px 16px; gap: 14px; }
.member-card > span:last-child { gap: 2px; min-width: 0; }
.member-card[hidden] { display: none !important; }
@media (max-width: 767px) {
  .member-card { padding: 12px 14px; }
  .member-card .avatar { width: 44px; height: 44px; font-size: 16px; }
}
.notice-item { padding: 10px 0; border-top: 1px solid var(--line); }
.notice-item:first-of-type { border-top: 0; }
.notice-item strong { display: block; }
.notice-item small { display: block; margin-top: 2px; }
.notice-item p { margin: 4px 0 0; font-size: 15px; }
.notice-item .status-pill { min-height: 22px; font-size: 12px; vertical-align: 1px; }
.button.button-warn { border-color: var(--yellow); color: var(--yellow); background: transparent; }
.app-install-icon { width: 32px; height: 32px; color: var(--accent-text); }
.severity { display: inline-flex; align-items: center; gap: 8px; }
.project-icon { width: 26px; height: 26px; color: var(--accent-text); }
.project-card { min-height: 0; }
.project-card h2 { margin: 10px 0 4px; }
@media (max-width: 767px) { .membership-year-table.table-stack .month-btn { width: 100%; min-width: 40px; height: 40px; font-size: 15px; } }
.membership-member strong a { display: inline-flex; align-items: center; min-height: 40px; }
.fee-input { width: 120px; }
.event-row-work-order, .appointment-row-work-order { padding-left: 18px !important; padding-right: 12px; }
@media (max-width: 767px) {
  .list-row:has(> .list-end) { flex-wrap: nowrap; }
  .list-row:has(> .list-end) > span:first-child { flex: 1 1 auto; }
  .list-row > time { margin-left: auto; white-space: nowrap; font-size: 14px; }
  .list-row:has(> time) { flex-wrap: wrap; }
}
/* Ältere Vorlagen mit Inline-Flex-Zeilen: auf dem Handy umbrechen lassen */
@media (max-width: 767px) {
  .container [style*="display:flex"], .container [style*="display: flex"] { flex-wrap: wrap; }
  .container [style*="display:flex"] > .button, .container [style*="display: flex"] > .button { flex: 1 1 auto; }
}
@media (max-width: 767px) {
  .container [style*="display:flex"] > input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .container [style*="display: flex"] > input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { flex: 1 1 100%; min-width: 0; }
  /* Mehrspaltige Inline-Raster älterer Formulare untereinander */
  .container form [style*="grid-template-columns"], .container .card [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 1023px) {
  .vehicle-filter-cards .vehicle-filter-card, .vehicle-filter-cards .vehicle-filter-card.card { padding: 0 16px !important; min-height: 40px; border-radius: 999px; }
}
.vehicle-type-filter > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: var(--muted); font-weight: 600; }
.vehicle-type-filter > summary::-webkit-details-marker { display: none; }
.vehicle-type-filter > summary::after { content: ""; width: 8px; height: 8px; margin-left: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.vehicle-type-filter[open] > summary::after { transform: rotate(-135deg); }
.vehicle-type-filter > summary strong { color: var(--text); }
.vehicle-type-filter > div { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.view-toggle-btn .icon { width: 20px; height: 20px; }
@media (max-width: 767px) { .hide-phone { display: none !important; } }
.vehicle-type-filter { background: var(--panel); padding: 2px 16px; }
.status-option.status-planned[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* Bis Tablet hochkant: Tabellen als Karten, Leisten umbrechen */
@media (max-width: 1023px) {
  /* Leisten umbrechen statt seitlich zu scrollen */
  .chip-row, .section-nav, .workshop-tabs, .vehicle-filter-cards, .action-chips, .dashboard-heading-actions, .filter-bar { flex-wrap: wrap; overflow-x: visible; }
  .section-nav { gap: 2px 4px; }
  .section-nav a { min-height: 36px; padding: 0 12px; }

  /* Tabellen werden zu Karten: jede Zeile ein Block, jede Zelle mit Spaltenname */
  .table-scroll { overflow-x: visible; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td, .table-stack th { display: block; width: 100%; }
  .table-stack { min-width: 0 !important; border: 0; }
  .table-stack thead { display: none; }
  .table-stack tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .table-stack tr:first-child { border-top: 0; }
  .table-stack td, .table-stack tbody th { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; text-align: left !important; white-space: normal !important; }
  .table-stack td::before, .table-stack tbody th::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 600; }
  .table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { display: none; }
  .table-stack td:not([data-label]), .table-stack td[data-label=""] { grid-template-columns: minmax(0, 1fr); }
  .table-stack tfoot { display: block; border-top: 2px solid var(--line); }
  .table-stack tfoot tr { display: block; }

}

/* Rechteübersicht: auf allen Bildschirmen pro Mitglied eine Karte (die Matrix ist zu breit) */
.permission-card { padding: 0; background: transparent; border: 0; }
.permission-scroll { overflow: visible; }
.permission-table { min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 10px; background: transparent; border: 0; }
.permission-head { display: none !important; }
.permission-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.permission-row > * { padding: 0; background: transparent; }
.permission-row > *:first-child { position: static; grid-column: 1 / -1; box-shadow: none; padding-bottom: 6px; background: transparent; }
.permission-group summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 4px 6px 4px 10px; border: 1px solid var(--line); border-radius: 10px; }
.permission-group[open] { grid-column: 1 / -1; }
.permission-group-name { display: block; font-style: normal; font-size: 14px; font-weight: 600; }
.permission-group summary span { min-width: 48px; min-height: 30px; }

/* Scanner */
.appnav-search input { padding-right: 52px; }
.appnav-scan { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--accent-text); cursor: pointer; }
.appnav-scan .icon { position: static; transform: none; width: 22px; height: 22px; color: var(--accent-text); }
.appnav-scan:hover { background: var(--panel-2); }
button.quick-action { font: inherit; font-weight: 600; font-size: 15.5px; text-align: left; cursor: pointer; width: 100%; }
.scan-dialog { width: min(480px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); }
.scan-dialog::backdrop { background: rgba(0,0,0,.75); }
.scan-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.scan-view { position: relative; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18% 14%; border: 3px solid var(--orange); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); pointer-events: none; }
.scan-status { margin: 10px 0 12px; color: var(--muted); }
.scan-status.is-error { color: var(--red-text); }
.scan-manual label { display: block; margin-bottom: 6px; font-size: 14px; color: var(--muted); }

/* Formular-Abschnitte */
.form-section { padding-top: 6px; }
.form-section + .form-section { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-section > h2, .form-section-title { margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--text); text-transform: none; letter-spacing: 0; }
.form-section[id], .form-card [id^="abschnitt-"] { scroll-margin-top: 120px; }
.form-nav { margin-bottom: 12px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (min-width: 768px) {
  .form-actions { position: sticky; bottom: 12px; z-index: 5; padding: 10px; margin-left: -10px; margin-right: -10px; border-radius: 999px; background: var(--panel); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); width: fit-content; border: 1px solid var(--line); }
}
.form-nav { position: static; border-bottom: 0; }

/* Offline & Entwürfe */
.offline-bar { position: fixed; z-index: 70; left: 12px; right: 12px; top: calc(var(--safe-t) + 8px); padding: 12px 16px; border-radius: 14px; background: #3a2a10; color: #ffe2b8; border: 1px solid var(--yellow); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: 15px; }
[data-theme="light"] .offline-bar { background: #fff4dc; color: #5a3b00; }
.offline-bar[hidden] { display: none; }
.offline-bar.is-shaking { animation: bb-shake .35s; }
@keyframes bb-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (min-width: 768px) { .offline-bar { left: calc(var(--nav-w) + 20px); right: 20px; } }
@media (prefers-reduced-motion: reduce) { .offline-bar.is-shaking { animation: none; } }
.draft-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--orange); border-radius: var(--radius); background: var(--orange-soft); }
.draft-hint-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Suche */
.search-summary { margin: 0 0 10px; }
.chip-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); font-size: 12px; }
.chip[aria-current="true"] .chip-count { background: var(--bg); }
.search-groups { display: grid; gap: 12px; }
.search-groups > .card { margin: 0; }
.search-group h2 { display: inline-flex; align-items: center; gap: 8px; }
.search-group h2 .icon { width: 20px; height: 20px; color: var(--accent-text); }
.search-group { scroll-margin-top: 80px; }
.list-row .avatar-sm { width: 36px; height: 36px; }
@media (max-width: 767px) {
  body.keyboard-open .tabbar { display: none; }
  body.keyboard-open.has-nav .appmain { padding-bottom: 0; }
  body.keyboard-open .form-actions { bottom: calc(8px + var(--safe-b)); }
}
.form-nav { flex-wrap: wrap; overflow-x: visible; }

/* ── Abstimmungen ── */
.poll-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.poll-card h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.poll-card h2 a { color: inherit; }
.poll-card.is-closed { background: transparent; }
.poll-card .button-row { margin: 4px 0 0; }
.poll-desc { margin: 0 0 12px; color: var(--muted); }
.poll-card .poll-desc { margin: 0; }
.poll-results { display: grid; gap: 12px; }
.poll-results-detail { gap: 18px; }
.poll-result-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 15px; }
.poll-result-label > span:last-child { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.poll-bar { height: 10px; border-radius: 999px; background: var(--panel-2); overflow: hidden; }
.poll-bar > span { display: block; height: 100%; min-width: 0; border-radius: inherit; background: var(--orange); }
.poll-voters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.poll-voters .meta-chip { min-height: 28px; font-size: 13px; }
.poll-answers { margin: 0; padding: 0; list-style: none; }
.poll-answers li { padding: 6px 0; border-top: 1px solid var(--line); font-size: 15px; }
.poll-answers li:first-child { border-top: 0; }
.poll-answers strong { margin-right: 6px; }
.poll-cta { margin: 0 0 16px; }
.poll-byline { margin-top: 16px; font-size: 14px; color: var(--muted); }
.poll-vote-form fieldset, .poll-options { margin: 0; padding: 0; border: 0; min-width: 0; }
.poll-vote-form legend, .poll-options legend { padding: 0; margin-bottom: 10px; font-weight: 700; font-size: 16px; }
.vote-option { display: flex; align-items: center; gap: 14px; min-height: 56px; margin: 0 0 8px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--field); cursor: pointer; font-size: 16px; font-weight: 600; }
.vote-option input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--orange); }
.vote-option:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.vote-option:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.poll-options { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.poll-options .helptext { margin: -6px 0 10px; }
.option-row { display: flex; gap: 8px; margin-bottom: 8px; }
.option-row input { flex: 1 1 auto; min-width: 0; }
.option-row .icon-btn { width: 48px; height: auto; min-height: 48px; flex: 0 0 auto; }
.poll-success { display: grid; justify-items: center; gap: 6px; padding: 32px 20px; text-align: center; }
.poll-success h1 { margin: 6px 0 0; }
.poll-success-icon { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--orange-soft); color: var(--accent-text); }
.poll-success .button-row { justify-content: center; margin-top: 12px; }
button.text-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.item-card-admin form { margin: 0; }

/* ── Rechte & Rollen: kompakte Schalterliste ── */
.perm-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.perm-group-head h2 { margin: 0; }
.perm-switch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 24px; }
.perm-switch-list .checkbox-row { margin: 0; padding: 10px 2px; min-height: 52px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.perm-switch-list .checkbox-row > span { cursor: pointer; line-height: 1.3; }
@media (max-width: 767px) { .perm-switch-list { grid-template-columns: minmax(0, 1fr); } }

/* ── Changelog ── */
.changelog-entry { margin-bottom: 12px; }
.changelog-head { margin-bottom: 10px; }
.changelog-head h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.changelog-meta { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.changelog-entry .item-card-admin { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.changelog-older > summary { display: flex; justify-content: center; width: fit-content; margin: 8px auto 16px; list-style: none; }
.changelog-older > summary::-webkit-details-marker { display: none; }
.changelog-older[open] > summary { display: none; }

/* ── Reifengrößen im Fahrzeugformular ── */
.tire-slot-wrap { margin-bottom: 14px; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.tire-slot-label { display: block; margin-bottom: 8px; font-weight: 700; }
.tire-subheading { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tire-slot { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 10px; align-items: end; }
.tire-field { display: grid; gap: 4px; min-width: 0; }
.tire-field label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0; }
.tire-field select { width: 100%; min-width: 0; }
.tire-preview { grid-column: 1 / -1; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .02em; color: var(--accent-text); }
.tire-preview.is-empty { font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
@media (max-width: 767px) {
  .tire-slot { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tire-field { grid-column: span 2; }
  .tire-field-extra { grid-column: span 3; }
}

/* Alte Farbnamen aus früheren Vorlagen auf die aktuellen Design-Tokens abbilden */
:root {
  --primary: var(--accent-text);
  --warning: var(--yellow);
  --danger: var(--red-text);
  --card-bg: var(--panel);
  --bg-card: var(--panel);
  --surface2: var(--panel-2);
  --surface-2: var(--panel-2);
  --border-success: var(--green);
  --text-muted: var(--muted);
}

/* ── Werkstattwissen ── */
.wi-hint { margin: -6px 0 16px; }
.wi-entry { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wi-entry h2 { margin: 0; font-size: 19px; line-height: 1.25; }
.wi-entry .meta-chips { margin: 0; }
.wi-entry .meta-chips:empty { display: none; }
.wi-content { font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wi-entry .button-row { margin: 0; }
.wi-pages { justify-content: center; }

/* ── Halle (Home Assistant) ── */
.hc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 767px) { .hc-grid { grid-template-columns: minmax(0, 1fr); } }
.hc-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; transition: opacity .15s; }
.hc-card.is-busy { opacity: .6; pointer-events: none; }
.hc-card form { margin: 0; }
.hc-head { display: flex; align-items: center; gap: 12px; }
.hc-icon { flex: 0 0 auto; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--panel-2); color: var(--muted); }
.hc-icon .icon { width: 24px; height: 24px; }
.hc-card.is-on .hc-icon { background: var(--orange-soft); color: var(--accent-text); }
.hc-title { flex: 1 1 auto; min-width: 0; }
.hc-title h2 { margin: 0; font-size: 18px; line-height: 1.2; }
.hc-summary { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.hc-power { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 76px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; justify-content: center; }
.hc-power .icon { width: 18px; height: 18px; }
.hc-power.is-on { border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.hc-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.hc-offline { margin: 0; color: var(--muted); }
.hc-card.is-offline .hc-icon { opacity: .6; }
/* Heizung */
.hc-climate { display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: end; }
.hc-temp-now strong, .hc-target-value { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.hc-temp-now strong small, .hc-target-value small { font-size: 18px; font-weight: 600; color: var(--muted); }
.hc-temp-target { justify-self: end; text-align: center; }
.hc-stepper { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.hc-target-value { min-width: 3.6ch; font-size: 34px; color: var(--accent-text); }
.hc-round { display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--text); cursor: pointer; }
.hc-round:hover { border-color: var(--orange); }
.hc-round .icon { width: 22px; height: 22px; }
.hc-modes { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
.hc-modes form { flex: 1 1 0; min-width: 80px; }
.hc-modes .status-option { width: 100%; }
.hc-modes .status-option[aria-pressed="true"] { background: var(--orange); color: var(--on-orange); }
/* Musik */
.hc-now { margin: 0; display: grid; gap: 2px; }
.hc-now strong { font-size: 17px; overflow-wrap: anywhere; }
.hc-now span { font-size: 14px; color: var(--muted); }
.hc-transport { display: flex; justify-content: center; align-items: center; gap: 18px; }
.hc-play { width: 64px; height: 64px; border-color: var(--orange); background: var(--orange); color: var(--on-orange); }
.hc-play .icon { width: 26px; height: 26px; fill: currentColor; }
.hc-volume label { display: flex; justify-content: space-between; margin-bottom: 6px; font-weight: 600; }
.hc-volume output { color: var(--muted); font-variant-numeric: tabular-nums; }
.hc-volume input[type=range] { width: 100%; min-height: 32px; accent-color: var(--orange); }
.hc-source { margin: 0; }
.hc-favorites .chip-row { margin-top: 6px; flex-wrap: wrap; overflow: visible; }
.hc-favorites .chip .icon { width: 14px; height: 14px; fill: currentColor; color: var(--accent-text); }
/* Sensor */
.hc-big { margin: 0; font-family: var(--font-display); font-size: 34px; font-weight: 700; }
/* Rückmeldung */
.hc-toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px); z-index: 70; transform: translateX(-50%); max-width: calc(100% - 32px); margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.hc-toast.is-error { background: #a83a30; color: #fff; }
@media (min-width: 768px) { .hc-toast { bottom: 24px; } }
.hc-status h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; }
.hc-status p { margin: 12px 0 0; }
.hc-code { margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--field); font-size: 13px; overflow-x: auto; white-space: pre; }
.hc-dashboard .hc-grid { margin-top: 4px; }

/* Halle: Kacheln anordnen (nur im „Anordnen“-Modus sichtbar) */
.hc-arrange { display: none; }
.hc-grid.is-arranging .hc-arrange { display: flex; align-items: center; gap: 8px; }
.hc-grid.is-arranging .hc-card { border-style: dashed; }
.hc-grid.is-arranging .hc-card > :not(.hc-arrange) { pointer-events: none; opacity: .5; }
.hc-grip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; margin-right: auto; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); font-weight: 700; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.hc-grip .icon { width: 22px; height: 22px; }
.hc-move { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); cursor: pointer; }
.hc-move .icon { width: 22px; height: 22px; }
.hc-move:hover { border-color: var(--orange); }
.hc-card.is-dragging { border-color: var(--orange); border-style: solid; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); z-index: 2; position: relative; }
.hc-card.is-dragging .hc-grip { cursor: grabbing; border-color: var(--orange); }