@font-face{font-family:Inter;src:url('/static/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
/* Design-Tokens – abgestimmt auf die anderen DLRG-Tauberbischofsheim-Apps
   (Fahrtenbuch, Equipment, Reservierung, Protokoll) für ein einheitliches CI. */
:root {
  /* Farben, Schrift, Rundungen kommen aus dlrg-tokens.css (zentraler DLRG-Standard).
     Hier nur app-interne Kurznamen darauf abgebildet. */
  --canvas: var(--color-bg);
  --surface: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --border: var(--color-border);
  --radius: var(--radius-md);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.12);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--dlrg-info) 35%, transparent);

  --ok: var(--dlrg-success);
  --ok-bg: var(--success-bg);
  --warn: var(--dlrg-text);
  --warn-bg: var(--dlrg-yellow);
  --neutral: var(--dlrg-text-muted);
  --neutral-bg: var(--color-table-head);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-sans);
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.5;
}

a { color: var(--dlrg-red); }

/* ---------- Kopfbalken ---------- */

header.top {
  background: var(--dlrg-red);
  color: var(--white);
  height: 60px;
  box-sizing: border-box;
  border-bottom: 4px solid var(--dlrg-yellow);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  position: sticky;
  top: 0;
  z-index: 30;
}

header.top a { color: var(--white); text-decoration: none; }

header.top .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
header.top .brand img {
  height: 34px;
  width: auto;
  background: var(--white);
  border-radius: 6px;
  padding: 2px 5px;
  flex-shrink: 0;
}
header.top .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
header.top .brand-text .brand-title {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
header.top .brand-text .brand-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

header.top .spacer { flex: 1 1 auto; }

header.top form.inline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}
header.top form.inline span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
header.top .btn.secondary {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}
header.top .btn.secondary:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- Layout & Sidebar ---------- */

.layout {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 60px);
}

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  width: 252px;
  flex: 0 0 252px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.side-nav {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 0.75rem 0.75rem 0;
  overflow-y: auto;
}

.side-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.7rem 0.75rem 0.7rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-left: 4px solid transparent;
  transition: background 0.12s ease, color 0.12s ease;
}

.side-nav a svg { flex-shrink: 0; color: var(--dlrg-text-muted); }

.side-nav a:hover { background: var(--neutral-bg); color: var(--ink); }
.side-nav a:hover svg { color: var(--muted); }

.side-nav a.active {
  background: var(--dlrg-red-light);
  color: var(--dlrg-red);
  border-left-color: var(--dlrg-red);
  padding-left: calc(1rem - 4px);
  font-weight: 700;
}
.side-nav a.active svg { color: var(--dlrg-red); }

.side-nav-section {
  margin-top: 1rem;
  margin-bottom: 0.15rem;
  padding: 0 0.75rem 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dlrg-text-muted);
}
.side-nav-section.with-rule {
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-top: 1.1rem;
}

.side-user {
  border-top: 1px solid var(--border);
  background: var(--canvas);
  padding: 0.9rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.side-user .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--dlrg-red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.side-user .who { min-width: 0; }
.side-user .who .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-user .who .role {
  font-size: 0.75rem;
  color: var(--muted);
}

main {
  padding: 24px;
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .layout { display: block; min-height: 0; }
  header.top { position: static; }
  .sidebar {
    width: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .side-nav { flex-direction: row; flex-wrap: wrap; padding: 0.6rem; }
  .side-nav a { border-left: none; border-radius: var(--radius); padding: 0.5rem 0.7rem; }
  .side-nav a.active { padding-left: 0.7rem; border-left: none; }
  .side-nav-section { display: none; }
  .side-user { display: none; }
  main { padding: 1.25rem; }
}

/* ---------- Überschriften ---------- */

h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; margin: 0 0 0.3rem; }
h2 { font-size: 1.15rem; }

/* ---------- Tabellen ---------- */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th, td {
  padding: 0.7rem 0.85rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--canvas);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--dlrg-bg); }

.actions-cell {
  display: flex;
  /* Umbruch statt Abschneiden: in der Kostenordnung stehen je nach Status bis
     zu vier Schaltflächen nebeneinander. Mit nowrap ragte die letzte aus der
     Spalte heraus und war ohne waagerechtes Scrollen nicht erreichbar. */
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.actions-cell .btn { white-space: nowrap; }

.table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
}
.table-scroll table { margin-bottom: 0; }

/* Kostenpunkt-Tabellen: über alle Bereiche hinweg gleiche Spaltenbreiten,
   gleiche Zeilenhöhe und vertikal zentrierter Inhalt je Zeile. */
.posten-table {
  table-layout: fixed;
  /* Summe der festen Spalten (46,5rem) plus Mindestbreite für die Leistung.
     Darunter blättert der Wrapper waagerecht, statt die Spalten zu stauchen. */
  min-width: 60rem;
}
/* Alle Spalten außer "Leistung" haben feste Breiten; Leistung bekommt den
   Rest. Früher waren die schmalen Spalten in Prozent angegeben – zusammen mit
   den festen Spalten ergab das deutlich mehr als 100 %, weshalb der Browser
   alles zusammenstauchte und die Beträge ineinanderliefen. */
.posten-table .col-reihenfolge { width: 4.5rem; }
.posten-table th:first-child,
.posten-table td:first-child {
  padding-right: 1.1rem;
}
.posten-table .col-leistung { width: auto; }
.posten-table .col-ersteller { width: 7.2rem; }
.posten-table td.z-ersteller { color: var(--muted); font-size: 0.88rem; overflow-wrap: break-word; hyphens: auto; }
.posten-table .col-einheit { width: 7.5rem; }
.posten-table .col-mitglieder { width: 6.5rem; }
.posten-table .col-nichtmitglieder { width: 7rem; }
.posten-table .col-status { width: 8.5rem; }
/* Aktionen: „Einreichen“ und Stift stehen immer in einer Zeile, der Stift
   sitzt in jeder Zeile an derselben Stelle ganz rechts. */
.posten-table .col-zeilenaktionen { width: 9.5rem; }
.posten-table td.z-aktionen .actions-cell { flex-wrap: nowrap; justify-content: flex-end; gap: 0.5rem; }
.posten-table td.z-einheit { font-size: 0.92rem; overflow-wrap: anywhere; }
/* Auf breiten Bildschirmen bekommen die schmalen Spalten mehr Luft. */
@media (min-width: 1500px) {
  .posten-table .col-reihenfolge { width: 5.5rem; }
  .posten-table .col-ersteller { width: 8rem; }
  .posten-table .col-einheit { width: 11rem; }
  .posten-table .col-mitglieder { width: 8rem; }
  .posten-table .col-nichtmitglieder { width: 9rem; }
  .posten-table .col-status { width: 9.5rem; }
  .posten-table .col-zeilenaktionen { width: 11rem; }
}

.posten-table td {
  vertical-align: middle;
  min-height: 3.25rem;
}
.posten-table td:first-of-type { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Kopfzeilen dürfen bei Bedarf sauber in eine zweite Zeile umbrechen,
   statt in die Nachbarspalte zu laufen. */
.posten-table th {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

/* Beträge: rechtsbündig wie in Finanztabellen üblich, nie umbrechen. */
.posten-table td.col-betrag-wert {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.posten-table th.col-betrag-head { text-align: right; }

/* Status-Spalte optisch zentrieren. */
.posten-table td.col-status-wert,
.posten-table th.col-status-head {
  text-align: center;
}

/* ---------- Status-Badges ---------- */

.status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.status-entwurf { background: var(--neutral-bg); color: var(--neutral); }
.status-eingereicht { background: var(--warn-bg); color: var(--warn); }
.status-freigegeben { background: var(--ok-bg); color: var(--ok); }
.status-zurueckgewiesen { background: var(--dlrg-red-light); color: var(--dlrg-red-dark); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--dlrg-red);
  color: var(--white);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.12s ease, transform 0.05s ease;
}
.btn:hover { background: var(--dlrg-red-dark); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn.secondary:hover { background: var(--neutral-bg); }
.btn.small { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn.danger { background: var(--white); color: var(--dlrg-red-dark); border-color: var(--dlrg-error); }
.btn.danger:hover { background: var(--dlrg-red-light); }
.btn.ok { background: var(--ok); }
.btn.ok:hover { background: color-mix(in srgb, var(--dlrg-success) 85%, #000); }
.btn.warn { background: var(--white); color: var(--warn); border-color: var(--dlrg-yellow); }
.btn.warn:hover { background: var(--warn-bg); }

form.inline { display: inline; }

/* ---------- Karten ---------- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* ---------- Hinweise ---------- */

.error {
  background: var(--danger-bg);
  border-left: 4px solid var(--dlrg-error);
  color: var(--dlrg-error);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.hinweis {
  background: var(--dlrg-yellow-light);
  border-left: 4px solid var(--dlrg-yellow);
  color: var(--dlrg-text);
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

/* ---------- Formulare ---------- */

label { display: block; margin-top: 0.9rem; margin-bottom: 0.2rem; font-weight: 600; font-size: 0.88rem; color: var(--ink); }
input[type=text], input[type=number], input[type=password], input[type=date], select, textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--dlrg-red);
  box-shadow: var(--focus-ring);
}
textarea { min-height: 5.5rem; resize: vertical; }

/* ---------- Login ---------- */

body.login-page { min-height: 100vh; display: flex; flex-direction: column; padding: 0; background: var(--dlrg-bg); }

body.login-page > div, body.login-page > div > main { display: flex; flex-direction: column; flex: 1; max-width: none; width: 100%; padding: 0; margin: 0; }

.login-header {
  height: 64px; background: var(--dlrg-red); border-bottom: 3px solid var(--dlrg-yellow);
  color: var(--white); display: flex; align-items: center; gap: 12px; padding: 0 24px; flex-shrink: 0;
}
.login-header__chip { display: flex; align-items: center; background: var(--white); border-radius: 6px; padding: 2px 5px; height: 44px; }
.login-header__chip img { height: 40px; width: auto; object-fit: contain; display: block; }
.login-header__title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.login-header__name { font-size: 20px; font-weight: 600; white-space: nowrap; }
.login-header__sub { font-size: 12px; font-weight: 400; color: rgba(255,255,255,.9); white-space: nowrap; }

.login-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-wrap { width: 100%; max-width: 420px; margin: 0 auto; }

.login-box {
  border: 1px solid var(--dlrg-border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(41,55,70,.06);
  padding: 32px;
}
.login-box h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.login-box .login-sub { color: var(--muted); margin-bottom: 1rem; }
.login-box .error { margin-bottom: 1rem; }

.login-footer {
  text-align: center;
  color: var(--dlrg-text-muted);
  font-size: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .login-header { padding: 0 16px; }
  .login-header__name { font-size: 17px; }
  .login-box { padding: 24px; }
}

/* ---------- Bereichs-Blöcke ---------- */

.bereich-block { margin-bottom: 1.5rem; }

/* „+ Kostenpunkt“ sitzt unter der Tabelle, dort wo die neue Zeile aufklappt.
   „Alle einreichen“ betrifft den ganzen Bereich und bleibt oben rechts. */
.bereich-fuss {
  margin-top: 0.9rem;
}
.bereich-block h2 {
  border-bottom: 3px solid var(--dlrg-yellow);
  padding-bottom: 0.4rem;
  display: inline-block;
}

.kommentar {
  font-style: italic;
  color: var(--dlrg-red-dark);
  font-size: 0.88rem;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

/* ---------- Kennzahlen-Übersicht ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-card .stat-label { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.stat-card.accent-entwurf .stat-value { color: var(--neutral); }
.stat-card.accent-eingereicht .stat-value { color: var(--warn); }
.stat-card.accent-freigegeben .stat-value { color: var(--ok); }
.stat-card.accent-zurueckgewiesen .stat-value { color: var(--dlrg-red-dark); }

.empty-state {
  color: var(--muted);
  font-size: 0.92rem;
  padding: 0.5rem 0;
}

@media print {
  header.top, .no-print { display: none !important; }
  main { max-width: none; padding: 0; }
  body { font-size: 11pt; background: var(--white); }
}

/* Schaltflächenzeile am Ende eines Formulars: Speichern/Abbrechen links,
   Löschen deutlich abgesetzt am rechten Rand, damit es nicht versehentlich
   neben "Speichern" getroffen wird. */
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}

.form-actions .btn.danger {
  margin-left: auto;
}

@media (max-width: 560px) {
  .form-actions {
    flex-wrap: wrap;
  }
  .form-actions .btn.danger {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Kurzanleitung (/hilfe) ----------
   Am Bildschirm lesbar, beim Drucken mehrere Seiten möglich. Die Maße sind
   bewusst auf die Druckseite hin gewählt; am Bildschirm wirkt es dadurch
   etwas kompakter als die übrigen Seiten. */
.anleitung {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.6rem;
  max-width: 62rem;
}

.anleitung-kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-bottom: 3px solid var(--dlrg-yellow);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}
.anleitung-kopf img { height: 42px; width: auto; }
.anleitung-kopf h2 { margin: 0; font-size: 1.35rem; color: var(--dlrg-red); }
.anleitung-kopf p { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* Schritte untereinander, Bild rechts neben dem Text (Float statt Grid oder Flexbox: der PDF-Erzeuger
   (WeasyPrint) unterstützt beides nur teilweise und setzte die Schritte
   sonst untereinander – die Anleitung wurde dadurch mehrere Seiten lang.
   Floats beherrschen Browser und PDF-Erzeuger gleichermaßen. */
.schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0;
  padding: 0;
  overflow: hidden;           /* schließt die Floats ein */
}
.schritte > li {
  counter-increment: schritt;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;           /* schließt das rechts schwebende Bild ein */
  padding-left: 2.4rem;
  margin-bottom: 1rem;
  min-height: 2rem;
}
.schritte > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--dlrg-red);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.schritte h3 { margin: 0.1rem 0 0.25rem; font-size: 0.97rem; }
.schritte p { margin: 0 0 0.45rem; font-size: 0.83rem; line-height: 1.45; }
.schritte img {
  float: right;
  width: 52%;
  height: auto;
  margin: 0 0 0.3rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.schritte code {
  background: var(--neutral-bg);
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  font-size: 0.95em;
}

.status-leiste {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  overflow: hidden;
}
.status-leiste > div {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 1.2rem;
  margin-bottom: 0.3rem;
}
.status-leiste > div:nth-child(odd) { clear: left; }
.status-leiste .status { margin-right: 0.4rem; }
.status-leiste .status { flex: none; }

.anleitung-einleitung { margin: 0 0 1.1rem; font-size: 0.92rem; line-height: 1.5; }
.schritte ul { list-style: disc; margin: 0 0 0.45rem; padding-left: 1.1rem; font-size: 0.83rem; line-height: 1.45; }
.schritte li li { display: list-item; float: none; padding: 0; margin: 0 0 0.25rem; counter-increment: none; min-height: 0; overflow: visible; }
.schritte li li::before { content: none; }
.status-titel { margin: 1.2rem 0 0.4rem; font-size: 0.97rem; }

.anleitung-fuss {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

/* Auf schmalen Geräten untereinander statt nebeneinander – zwei Spalten
   ergeben dort nur noch stark umbrochene Textsäulen. */
@media screen and (max-width: 760px) {
  .status-leiste > div {
    float: none;
    width: 100%;
    padding-right: 0;
  }
  .anleitung { padding: 1rem; }
  .schritte img { float: none; width: 100%; max-width: 26rem; margin: 0.3rem 0; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  .anleitung {
    border: none;
    box-shadow: none;
    padding: 0;
    max-width: none;
  }
  /* Das zweispaltige Layout im Druck ausdrücklich festschreiben. Die
     Druckbreite einer A4-Seite liegt unter der Schwelle des Handy-Umbruchs;
     ohne diese Zeilen hinge es von der Engine ab, ob dieser greift. */
  .schritte > li { break-inside: avoid; margin-bottom: 0.6rem; }
  .status-leiste > div {
    float: left;
    width: 50%;
    break-inside: avoid;
  }
  .status-leiste > div:nth-child(odd) { clear: left; }
  .anleitung-kopf img { height: 38px; }
  /* Bildhöhe im Druck begrenzen, damit die Anleitung sicher auf eine Seite
     passt – am Bildschirm bleiben die Bilder in voller Spaltenbreite. */
  .schritte img { width: auto; max-width: 50%; max-height: 60mm; }
}


/* ---------- Kostenpunkt bearbeiten: Block klappt unter der Zeile auf ---------- */

/* Die ganze Zeile ist anklickbar. */
.posten-zeile { cursor: pointer; }

/* Nach dem Speichern springt die Seite per Anker zur bearbeiteten Zeile.
   Ohne den Abstand läge sie hinter der klebenden Kopfzeile (60px). */
.posten-zeile { scroll-margin-top: 5rem; }

/* Kurz hervorheben, damit man die eben geänderte Zeile wiederfindet. */
.posten-zeile:target > td { background: var(--dlrg-red-light); }
.posten-zeile:hover { background: var(--neutral-bg); }
.posten-zeile:hover .stift { color: var(--dlrg-red); border-color: var(--dlrg-red); }

.stift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}
.stift:hover { background: var(--dlrg-red-light); }

.bearbeiten-zeile > td {
  padding: 0;
  background: var(--neutral-bg);
}

.bearbeiten-block {
  padding: 1rem 1.1rem 1.1rem;
  border-left: 3px solid var(--dlrg-red);
}
.bearbeiten-block .hinweis { margin-bottom: 0.9rem; }

/* Eingabefelder nebeneinander; „Leistung“ und „Bemerkung“ über die volle Breite. */
.feld-raster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1rem;
  margin: 0;
}
.feld {
  display: block;
  flex: 1 1 11rem;
  min-width: 9rem;
  margin: 0;
}
.feld-breit { flex: 1 1 100%; }
.feld > span {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.feld > input,
.feld > textarea { width: 100%; margin: 0; }
.feld > textarea { min-height: 3.2rem; resize: vertical; }
.feld > textarea[name=beschreibung] { min-height: 10rem; }

/* Die Knopfzeile nutzt .form-actions; Löschen sitzt dort rechts abgesetzt. */
.bearbeiten-block .form-actions { margin-top: 1.1rem; }

.leer-zeile td { text-align: center; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .feld { flex: 1 1 100%; }
}

/* Freigabe-Seite: Spalte für „Freigeben / Zurückweisen“ + Stift.
   Breite unten nach Messung im Browser gesetzt. */
.posten-table .col-entscheiden { width: 17rem; }

.freigabe-zaehler {
  margin: 0 0 1.2rem;
  font-size: 0.95rem;
}
.freigabe-zaehler strong { color: var(--dlrg-red); font-size: 1.1rem; }
.freigabe-zaehler small { color: var(--muted); margin-left: 0.5rem; }

/* Begründungsfeld im Freigabe-Block vom Bearbeitungsformular absetzen. */
.bearbeiten-block .begruendung {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
}


/* ---------- Smartphone und Tablet ----------
   Bis 1240 px (Handy, Tablet hochkant und quer) wird jeder Kostenpunkt zu einer
   Karte. Die Tabelle bräuchte dort über 60 rem und scrollte waagerecht, sodass
   Beträge, Status und der Bearbeiten-Knopf aus dem Bild liefen. */
@media (max-width: 1240px) {
  .table-scroll:has(> .posten-table) { overflow: visible; border-radius: 0; }

  .posten-table,
  .posten-table tbody { display: block; }
  .posten-table {
    min-width: 0;
    background: none;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .posten-table colgroup,
  .posten-table thead { display: none; }

  .posten-table tr.posten-zeile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "leistung leistung     leistung"
      "ersteller ersteller   ersteller"
      "einheit  einheit      status"
      "mitglied nichtmitglied nichtmitglied"
      "pos      aktionen     aktionen";
    gap: 0.55rem 1rem;
    align-items: center;
    padding: 0.9rem 1rem;
    margin-bottom: 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .posten-table tr.posten-zeile > td {
    display: block;
    padding: 0;
    border: none;
    background: none;
    min-width: 0;
    /* Sehr lange Wörter (z. B. Bindestrich-Ketten) umbrechen statt die Karte zu sprengen. */
    overflow-wrap: anywhere;
  }
  .posten-table tbody tr:hover td { background: none; }
  .posten-table td { min-height: 0; }
  .posten-table tr.posten-zeile:target { background: var(--dlrg-red-light); }
  .posten-table tr.posten-zeile:target > td { background: none; }
  .posten-table td:first-child { padding-right: 0; }

  .posten-table .z-leistung { grid-area: leistung; font-size: 1rem; }
  .posten-table .z-ersteller { grid-area: ersteller; margin-top: -0.3rem; }
  .posten-table .z-ersteller::before { content: "von "; }
  .posten-table .z-einheit { grid-area: einheit; color: var(--muted); font-size: 0.9rem; }
  .posten-table .z-status { grid-area: status; text-align: right; }
  .posten-table .z-mitglied { grid-area: mitglied; }
  .posten-table .z-nichtmitglied { grid-area: nichtmitglied; }
  .posten-table .z-pos { grid-area: pos; }
  .posten-table .z-aktionen { grid-area: aktionen; }
  .posten-table .z-aktionen .actions-cell { justify-content: flex-end; }

  /* Beschriftung vor den Beträgen, weil die Kopfzeile entfällt. */
  .posten-table td.col-betrag-wert {
    text-align: left;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
    font-weight: 600;
  }
  .posten-table td.col-betrag-wert::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* Die Freigabe-Tabelle hat keine Sortierpfeile; die Knöpfe nutzen die ganze Zeile. */
  .posten-table tr.posten-zeile:not(:has(.z-pos)) .z-aktionen { grid-column: 1 / -1; }

  /* Bearbeiten-Block: eine Karte unter der Zeile. */
  .bearbeiten-zeile:not([style*="none"]) { display: block !important; }
  .bearbeiten-zeile > td {
    display: block;
    border: none;
    background: none;
  }
  .bearbeiten-zeile .bearbeiten-block {
    background: var(--neutral-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--dlrg-red);
    border-radius: var(--radius-lg);
    margin: -0.2rem 0 0.9rem;
  }
  .leer-zeile { display: block; }
  .leer-zeile td { display: block; border: none; }
}

/* Benutzerliste als Karten: Name und Status oben, Rolle/Bereich/Login darunter. */
@media (max-width: 1240px) {
  .benutzer-table tr.posten-zeile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "user   user   status"
      "name   name   name"
      "rolle  bereich bereich"
      "login  login  aktion";
  }
  .benutzer-table .b-user { grid-area: user; font-size: 1.05rem; }
  .benutzer-table .b-name { grid-area: name; color: var(--muted); }
  .benutzer-table .b-rolle { grid-area: rolle; }
  .benutzer-table .b-bereich { grid-area: bereich; }
  .benutzer-table .b-status { grid-area: status; }
  .benutzer-table .b-login { grid-area: login; font-size: 0.88rem; }
  .benutzer-table .b-aktion { grid-area: aktion; justify-self: end; }
  .benutzer-table td[data-label]:not(.col-betrag-wert)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
}

/* Tablet hochkant und größere Handys im Querformat: drei Spalten. */
@media (min-width: 700px) and (max-width: 1240px) {
  .posten-table tr.posten-zeile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
      "leistung leistung status"
      "ersteller ersteller ersteller"
      "einheit mitglied nichtmitglied"
      "pos      .        aktionen";
  }
  .posten-table td.col-betrag-wert { border-top: none; padding-top: 0; }
}

@media (max-width: 900px) {
  /* Menü: eine durchgehende Zeile zum Wischen statt dreier Zeilen. */
  .side-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.2rem;
    padding: 0.45rem 0.6rem;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav a { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

}

@media (max-width: 800px) {
  /* Kopfzeile: nur Logo, Titel und Abmelden – Untertitel und Name stören auf
     dem Handy (sie überlagerten sich) und der Name steht ohnehin im Menü. */
  header.top { padding: 0 0.75rem; gap: 0.5rem; }
  header.top .brand-sub { display: none; }
  header.top form.inline > a { display: none; }

  main { padding: 1rem 0.85rem; }
  h1 { font-size: 1.3rem; }
  .card { padding: 1rem; }
  .bereich-block.card { padding: 0.85rem 0.75rem; }

  .toolbar .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat-card { padding: 0.65rem 0.8rem; }

  /* Mindestens 16 px in Eingabefeldern, sonst zoomt iOS beim Antippen ins
     Formular hinein. Größere Flächen für den Daumen. */
  input[type=text], input[type=number], input[type=password], input[type=date],
  select, textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
  }
  .btn { min-height: 44px; padding: 0.55rem 1rem; }
  .btn.small { min-height: 44px; padding: 0.45rem 0.9rem; }
  .stift { width: 2.75rem; height: 2.75rem; }
  .posten-table .z-pos .btn.small { min-height: 44px; min-width: 44px; padding: 0; justify-content: center; }

  /* Eingabefelder: Beträge nebeneinander, alles andere untereinander. */
  .bearbeiten-block { padding: 0.9rem; }
  .feld { flex: 1 1 100%; min-width: 0; }
  .feld > textarea[name=beschreibung] { min-height: 7rem; }
  .feld-raster .feld:has(input[name=betrag_mitglied]),
  .feld-raster .feld:has(input[name=betrag_nichtmitglied]) { flex: 1 1 calc(50% - 0.5rem); }
  .bearbeiten-block .form-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .bearbeiten-block .form-actions .btn,
  .bearbeiten-block .form-actions a.btn {
    flex: 1 1 calc(50% - 0.5rem);
    justify-content: center;
    text-align: center;
  }
  .bearbeiten-block .form-actions .btn.danger { margin-left: 0; width: auto; }
}

/* Protokoll (Verwaltung) */
.p-lead { color: var(--muted); margin-top: 0; }
.p-filter { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; box-shadow: var(--shadow-sm); display: grid; gap: 0.8rem; }
.p-suche { display: flex; gap: 0.5rem; }
.p-suche input { flex: 1; min-width: 0; }
.p-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.7rem; }
.p-felder label { display: grid; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); margin: 0; }
.p-schnell { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.p-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--neutral-bg); color: var(--ink); font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.p-chip:hover { border-color: var(--dlrg-red); }
.p-chip.aktiv { background: var(--dlrg-red-light); border-color: var(--dlrg-red); color: var(--dlrg-red-dark); }
.p-leiste { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin: 1rem 0 0.4rem; }
.p-anzahl { margin: 0; color: var(--muted); font-size: 0.9rem; }
.p-aktive { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.p-alle-weg { font-size: 0.8rem; margin-left: 0.3rem; }

.p-liste { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.p-tag { margin: 0; padding: 0.5rem 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); background: var(--neutral-bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.p-tag:first-child { border-top: 0; }
.p-zeile { display: grid; grid-template-columns: 3.2rem 9rem 9.5rem minmax(0, 1fr); gap: 0.2rem 0.8rem; align-items: start; padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); }
.p-zeile:last-child { border-bottom: 0; }
.p-zeile:hover { background: var(--dlrg-bg); }
.p-zeit { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.9rem; padding-top: 0.1rem; }
.p-benutzer { font-weight: 600; overflow-wrap: anywhere; padding-top: 0.1rem; }
.p-inhalt { min-width: 0; overflow-wrap: anywhere; }
.p-posten { font-weight: 700; color: var(--ink); text-decoration: none; }
a.p-posten:hover { color: var(--dlrg-red-dark); text-decoration: underline; }
.p-bereich { margin-left: 0.4rem; font-size: 0.78rem; color: var(--muted); background: var(--neutral-bg); border-radius: 4px; padding: 0.05rem 0.4rem; white-space: nowrap; }
.p-details { list-style: none; margin: 0.3rem 0 0; padding: 0; font-size: 0.88rem; color: var(--dlrg-text); }
.p-details li { padding: 0.05rem 0; }
.p-details b { color: var(--muted); font-weight: 600; }
.p-blaettern { display: flex; justify-content: space-between; margin-top: 1rem; }

@media (max-width: 800px) {
  .p-suche { flex-direction: column; }
  .p-felder { grid-template-columns: 1fr 1fr; }
  .p-zeile { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "zeit benutzer aktion" "inhalt inhalt inhalt"; gap: 0.35rem 0.6rem; align-items: center; }
  .p-zeit { grid-area: zeit; }
  .p-benutzer { grid-area: benutzer; }
  .p-aktion { grid-area: aktion; }
  .p-inhalt { grid-area: inhalt; }
  .p-blaettern .btn { flex: 1; justify-content: center; }
  .p-blaettern { gap: 0.6rem; }
}

/* ---------- Bereiche einklappbar ---------- */
.klappen-leiste { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.8rem; }
.bereich-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.bereich-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.bereich-toggle .chevron { transition: transform 0.15s ease; color: var(--muted); flex: none; }
.bereich-block.zu .bereich-toggle .chevron { transform: rotate(-90deg); }
.bereich-block .toolbar .bereich-info { margin-right: auto; margin-left: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.bereich-block.zu .bereich-inhalt { display: none; }
.bereich-block.zu .toolbar { margin-bottom: 0; }
@media (max-width: 800px) {
  .bereich-toggle { min-height: 44px; }
  .klappen-leiste .btn { flex: 1; justify-content: center; }
  .bereich-block .toolbar .bereich-info { flex-basis: 100%; margin-left: 0; order: 3; }
}
@media print {
  .bereich-block.zu .bereich-inhalt { display: block; }
}

/* Benutzerblock ist Link zum Konto (Standard-Styleguide) */
a.side-user { text-decoration: none; color: inherit; }
a.side-user:hover { background: var(--neutral-bg); }

/* Sidebar bleibt samt Benutzerblock im Bild (Styleguide) */
@media (min-width: 761px) {
  .sidebar { position: sticky; top: 60px; align-self: flex-start; height: calc(100vh - 60px); overflow-y: auto; }
}

/* DLRG-Standard: Details (06.11.2026) */
header.top { padding: 0 14px; gap: 12px; }
header.top .brand { gap: 12px; }
header.top .brand img { height: 38px; box-sizing: border-box; padding: 2px 5px; border-radius: 6px; }
header.top form.inline a { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }
header.top form.inline { gap: 12px; }
header.top .btn.secondary { display: inline-flex; align-items: center; gap: 6px; height: 34px; min-height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: 8px; }
@media (min-width: 901px) {
  .side-nav { padding: 12px; gap: 2px; }
  .side-nav a, .side-nav a.active { min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; gap: 12px; }
  .side-nav a.active { color: var(--dlrg-red); }
  .side-nav a.active svg { color: var(--dlrg-red); }
}
@media screen {
  table th { padding: 12px 16px; }
  table td { font-size: 14px; padding: 12px 16px; }
}

/* Kostenordnung: Tabellen sind breit, daher etwas engere Spalten; kein Umbruch im Spaltenkopf */
@media screen {
  table th { padding: 12px 10px; letter-spacing: .02em; overflow-wrap: normal; word-break: normal; }
  table td { padding: 12px 10px; }
}
.bereich-block h2 { border-bottom: 0; padding-bottom: 0; font-size: 16px; font-weight: 600; }
.anleitung-kopf { border-bottom: 1px solid var(--border); }
.stat-card { padding: 16px 20px; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.stat-card .stat-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
.stat-card .stat-label { font-size: 13px; font-weight: 500; margin-top: 0; color: var(--dlrg-text-muted); }

/* ==========================================================================
   DESIGN: DLRG (DLRG.md) – verbindliche Werte, kommen aus dlrg-tokens.css
   ========================================================================== */
:root { --focus-ring: 0 0 0 3px color-mix(in srgb, var(--dlrg-info) 35%, transparent); --shadow-sm: 0 1px 2px rgba(41,55,70,.06); --radius-lg: 8px; }
body { font-size: 16px; line-height: 1.5; color: var(--dlrg-text); background: var(--dlrg-bg); }
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
.bereich-block h2 { font-size: 18px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--dlrg-info); outline-offset: 2px; }

/* Kopfbereich: 64 px + 3 px gelbe Linie, Logo links neben dem App-Namen */
header.top { height: calc(64px + var(--header-line)); border-bottom: var(--header-line) solid var(--dlrg-yellow); padding: 0 24px 0 24px; gap: 12px; }
header.top .brand { gap: 12px; }
header.top .brand img { height: 40px; width: auto; object-fit: contain; }
header.top .brand-text .brand-title { font-size: 20px; font-weight: 600; }
header.top .brand-text .brand-sub { font-size: 12px; }
.layout { min-height: calc(100vh - 64px - var(--header-line)); }

/* Seitenleiste: 260 px, weiß, rechter Rahmen in Trennfarbe */
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--color-sidebar); border-right: 1px solid var(--color-divider); }
@media (min-width: 901px) {
  .sidebar { position: sticky; top: calc(64px + var(--header-line)); height: calc(100vh - 64px - var(--header-line)); }
  .side-nav { padding: 12px 0; gap: 2px; }
  .side-nav a, .side-nav a.active {
    min-height: 44px; padding: 0 16px 0 20px; border-radius: 0; border-left: 0;
    font-size: 14px; font-weight: 400; gap: 12px; color: var(--dlrg-text);
  }
  .side-nav a svg { width: 20px; height: 20px; color: var(--dlrg-text); }
  .side-nav a:hover { background: var(--dlrg-bg); color: var(--dlrg-text); }
  .side-nav a:hover svg { color: var(--dlrg-text); }
  .side-nav a.active { font-weight: 700; color: var(--dlrg-red); background: var(--dlrg-red-light); box-shadow: inset 4px 0 0 var(--dlrg-yellow); }
  .side-nav a.active svg { color: var(--dlrg-red); }
  .side-nav-section { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dlrg-text-muted); padding: 12px 20px 4px; margin: 12px 0 0; }
  .side-nav-section.with-rule { border-top: 1px solid var(--color-divider); padding-top: 16px; }
}
.side-user { border-top: 1px solid var(--color-divider); background: var(--color-sidebar); }
a.side-user:hover { background: var(--dlrg-bg); }
.side-user .avatar { background: var(--dlrg-red); color: var(--white); font-size: 14px; font-weight: 700; }
.side-user .who .name { font-size: 14px; font-weight: 500; color: var(--dlrg-text); }
.side-user .who .role { font-size: 12px; font-weight: 400; color: var(--dlrg-text-muted); }

main { max-width: 1400px; padding: 24px; }

/* Karten */
.card { background: var(--dlrg-card); border: 1px solid var(--dlrg-border); border-radius: 8px; padding: 20px 24px; box-shadow: 0 1px 2px rgba(41,55,70,.06); }
.stat-card { border-radius: 8px; }
.stat-card .stat-label { color: var(--dlrg-text-muted); }

/* Buttons und Formularfelder */
.btn { min-height: 40px; border-radius: 6px; font-size: 14px; padding: 0 16px; justify-content: center; }
.btn.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn.secondary { background: var(--white); color: var(--dlrg-text); border-color: var(--dlrg-border); }
.btn.secondary:hover { background: var(--dlrg-bg); }
.btn.danger { background: var(--white); color: var(--dlrg-error); border-color: var(--dlrg-error); }
.btn.danger:hover { background: var(--dlrg-red-light); }
.btn.ok { background: var(--dlrg-success); }
.btn.ok:hover { background: #256528; }
.btn.warn { background: var(--white); color: var(--dlrg-text); border-color: var(--dlrg-yellow); }
.btn.warn:hover { background: var(--dlrg-yellow-light); }
header.top .btn.secondary { background: rgba(255,255,255,.18); color: var(--white); border-color: rgba(255,255,255,.4); height: 36px; min-height: 36px; border-radius: 6px; }
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { border: 1px solid var(--dlrg-border); border-radius: 6px; min-height: 40px; }
input:focus, select:focus, textarea:focus { outline: none; border: 2px solid var(--dlrg-info); box-shadow: var(--focus-ring); }

/* Tabellen */
@media screen {
  table { border-color: var(--dlrg-border); border-radius: 8px; }
  table th { background: var(--color-table-head); color: var(--dlrg-text); font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
  table td { font-size: 14px; }
}
tbody tr:hover td { background: var(--dlrg-bg); }

/* Status-Badges nur mit Farben der Palette */
.status { border-radius: 999px; font-size: 12px; font-weight: 600; }
.status-neu { background: #E8F0F8; color: var(--dlrg-info); }
.status-geloescht { background: var(--dlrg-text); color: var(--white); }
.p-chip.aktiv { border-color: var(--dlrg-red); }

/* Responsiv: Seitenleiste wird zur unteren Navigation (Beschriftung 10 px / 700) */
@media (max-width: 900px) {
  header.top { position: sticky; top: 0; padding: 0 16px; }
  body { padding-bottom: 68px; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 40; border-right: 0; border-top: 1px solid var(--color-divider); border-bottom: 0; box-shadow: 0 -2px 6px rgba(41,55,70,.08); }
  .side-nav { padding: 0; gap: 0; }
  .side-nav a, .side-nav a.active { flex: 1 0 76px; flex-direction: column; justify-content: center; gap: 2px; min-height: 60px; padding: 6px 4px; border-radius: 0; font-size: 10px; font-weight: 700; color: var(--dlrg-text-muted); text-align: center; white-space: normal; }
  .side-nav a svg { width: 22px; height: 22px; color: var(--dlrg-text-muted); }
  .side-nav a.active, .side-nav a.active svg { color: var(--dlrg-red-dark); background: transparent; box-shadow: inset 0 3px 0 var(--dlrg-yellow); }
}
@media (max-width: 800px) {
  h1 { font-size: 24px; }
  header.top .brand-text .brand-title { font-size: 17px; }
}
@media print { body { padding-bottom: 0; } }

/* Verwaltungstabelle (Bereiche): feste Spalten, Aktionen nebeneinander und rechtsbündig */
.bereiche-table { table-layout: fixed; min-width: 40rem; }
.bereiche-table .col-reihenfolge { width: 6.5rem; }
.bereiche-table .col-name { width: 11rem; }
.bereiche-table .col-aktionen { width: 12.5rem; }
.bereiche-table td { vertical-align: middle; }
.bereiche-table .z-text { color: var(--dlrg-text-muted); overflow-wrap: anywhere; }
.bereiche-table .z-aktionen .actions-cell { flex-wrap: nowrap; justify-content: flex-end; }
.bereiche-table .col-aktionen-head { text-align: right; }
.bereiche-table .actions-cell .btn { min-height: 36px; }
@media (max-width: 800px) {
  .bereiche-table { min-width: 0; table-layout: auto; }
  .bereiche-table .col-name, .bereiche-table .col-aktionen, .bereiche-table .col-reihenfolge { width: auto; }
  .bereiche-table .z-aktionen .actions-cell { flex-wrap: wrap; }
}
.bereiche-table td:first-child .actions-cell { flex-wrap: nowrap; }
.bereiche-table td:first-child .btn { min-width: 36px; padding: 0; }

/* Zustände der Protokoll-Badges (nur Palettenfarben) */
.status-neu { background: var(--info-bg); color: var(--dlrg-info); }
.status-geloescht { background: var(--dlrg-text); color: var(--white); }
.status-eingereicht { background: var(--dlrg-yellow); color: var(--dlrg-text); }
.stat-card.accent-eingereicht .stat-value { color: var(--dlrg-text); }

/* Kennzahlenkarten: Icon oben rechts im gelben Kreis */
.stat-card { position: relative; }
.stat-icon { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--dlrg-yellow); color: var(--dlrg-text); display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 20px; height: 20px; }

/* Brotkrumen über dem Seitentitel */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--dlrg-text-muted); }
.breadcrumb a { color: var(--dlrg-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--dlrg-red); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--dlrg-text); font-weight: 600; }

/* Seitenleiste einklappbar (72 px, nur Icons) – ab 901 px */
.sidebar-toggle { display: none; }
@media (min-width: 901px) {
  .sidebar { transition: width .18s ease, flex-basis .18s ease; }
  .sidebar-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 20px; border: 0; border-top: 1px solid var(--color-divider); background: var(--color-sidebar); color: var(--dlrg-text-muted); font: inherit; font-size: 13px; cursor: pointer; }
  .sidebar-toggle:hover { background: var(--dlrg-bg); color: var(--dlrg-text); }
  .sidebar-toggle svg { width: 20px; height: 20px; flex: none; transition: transform .18s ease; }
  .layout.eng .sidebar { width: 72px; flex-basis: 72px; }
  .layout.eng .sidebar .nav-text, .layout.eng .sidebar .who, .layout.eng .sidebar .toggle-text, .layout.eng .side-nav-section { display: none; }
  .layout.eng .side-nav a, .layout.eng .side-nav a.active { padding: 0; justify-content: center; }
  .layout.eng .side-user { justify-content: center; padding: 12px 0; }
  .layout.eng .sidebar-toggle { justify-content: center; padding: 0; }
  .layout.eng .sidebar-toggle svg { transform: rotate(180deg); }
}
@media print { .sidebar-toggle { display: none; } }

/* Login-Seite: unabhängig vom Browserrand – Kopfbereich bündig oben links, Karte mittig */
html { background: var(--dlrg-bg); }
body.login-page { margin: 0; width: 100%; overflow-x: hidden; }
body.login-page > div, body.login-page > div > main { margin: 0; padding: 0; max-width: none; align-items: stretch; }
.login-header { width: 100%; margin: 0; }
.login-main { width: 100%; justify-content: center; align-items: center; }
.login-wrap { margin: 0 auto; }

/* Kartenkopf der Bereiche: Titel und Aktionen, durch 1 px Linie vom Inhalt getrennt (DLRG.md, Karten) */
.bereich-block > .toolbar { padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--color-divider); }
.bereich-block.zu > .toolbar { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }