:root {
  --bg: #0d0d0f;
  --bg2: #141417;
  --card: #17171b;
  --card2: #1d1d22;
  --line: rgba(255, 255, 255, .08);
  --line-violet: rgba(115, 41, 130, .22);
  --violet: #732982;
  --violet-dim: #c99a1f;
  --ink: #ededed;
  --muted: #9a9aa1;
  --muted2: #6f6f77;
  --good: #57c98a;
  --warn: #e0603a;
  --rad: 14px;
}

:root[data-theme="light"] {
  --bg: #f7f5f2;
  --bg2: #efece7;
  --card: #ffffff;
  --card2: #f4f1ec;
  --line: rgba(20, 20, 25, .09);
  --line-violet: rgba(115, 41, 130, .18);
  --violet: #732982;
  --violet-dim: #a97c12;
  --ink: #201f24;
  --muted: #6b6a72;
  --muted2: #8c8a92;
  --good: #2d8a5c;
  --warn: #c14a28;
}

:root[data-theme="warm"] {
  --bg: #faf3ea;
  --bg2: #f3e8d9;
  --card: #fffdf9;
  --card2: #f7ecdc;
  --line: rgba(80, 50, 20, .10);
  --line-violet: rgba(193, 101, 47, .22);
  --violet: #c1652f;
  --violet-dim: #d99b4e;
  --ink: #3a2e22;
  --muted: #8a7358;
  --muted2: #a8967d;
  --good: #6a9b5e;
  --warn: #c14a28;
}

:root[data-theme="soft"] {
  --bg: #1c1a22;
  --bg2: #242030;
  --card: #29242f;
  --card2: #322c3d;
  --line: rgba(255, 255, 255, .07);
  --line-violet: rgba(154, 110, 255, .24);
  --violet: #9a6eff;
  --violet-dim: #e0b458;
  --ink: #efeaf5;
  --muted: #a79dc0;
  --muted2: #7d7396;
  --good: #63d19a;
  --warn: #ef7a56;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  background:
    radial-gradient(1200px 500px at 15% -8%, rgba(115, 41, 130, .10), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh
}

/* Sidebar */
.sidebar {
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  position: sticky;
  top: 0;
  height: 100vh
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px
}

.brand strong {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  letter-spacing: -.01em
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: .82rem
}

.logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--violet), #4a1a55);
  color: #f2e9e0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-family: 'Fraunces', serif;
  flex-shrink: 0
}

.sidebar nav {
  display: grid;
  gap: 6px
}

.sidebar button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: .95rem;
  font-family: inherit;
  transition: .15s
}

.sidebar button:hover {
  color: var(--ink);
  border-color: var(--line-violet)
}

.sidebar button.active {
  background: var(--violet);
  color: #f4ece2;
  font-weight: 600
}

#logout-btn {
  width: 100%;
  text-align: left;
  color: var(--warn) !important
}

#logout-btn:hover {
  border-color: var(--warn) !important
}

/* Main */
main {
  padding: 28px;
  min-width: 0
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px
}

.topbar h1 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 4px;
  letter-spacing: -.01em
}

.topbar p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem
}

.primary {
  background: var(--violet);
  color: #f4ece2;
  border: 1px solid var(--violet);
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: .15s
}

.primary:hover {
  filter: brightness(1.08)
}

/* Grid & cards */
.grid {
  display: grid;
  gap: 16px
}

.cards {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.card,
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  padding: 18px
}

.card span {
  color: var(--muted);
  font-size: .85rem
}

.card strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin-top: 8px;
  color: var(--ink)
}

.panel h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin-top: 0;
  font-size: 1.1rem
}

.two-col {
  grid-template-columns: 1.5fr 1fr
}

/* Table */
.table-wrap {
  overflow: auto
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* verhindert inhaltsbasierte Breitenberechnung -> Zeilenhöhen/Trennlinien können nie mehr auseinanderlaufen */
}

.data-table th,
.data-table td {
  /* Innenabstand skaliert sanft mit der Fensterbreite (Minimum, bevorzugter
     Wert basierend auf Viewport-Breite, Maximum) statt fester Werte -
     dadurch wächst/schrumpft der Abstand automatisch mit dem Bildschirm,
     ohne abrupte Sprünge an einzelnen Breakpoints. */
  padding: clamp(8px, 0.6vw + 6px, 14px) clamp(6px, 0.5vw + 5px, 12px);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  overflow: hidden; /* Sicherheitsnetz: darf niemals in Nachbarzellen hineinlaufen */
  color: var(--ink);
  vertical-align: middle
}

.data-table th {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600
  /* bewusst KEIN white-space:nowrap mehr - lange Spaltenüberschriften
     (z.B. "Beschreibung (für Rechnung)") sollen bei schmalen Spalten
     umbrechen dürfen, statt über die Zellgrenze hinauszulaufen */
}

/* Lange Textspalten (Beschreibung, Notizen) bekommen automatisch mehr
   Breite als kurze Spalten (Status, Datum, Beträge) - table-layout:fixed
   würde sonst allen Spalten stur die gleiche Breite geben, was bei
   gemischten Tabellen wie Rechnungen (kurze + lange Felder) zu extrem
   gequetschtem Text führt. */
.data-table th.col-wide,
.data-table td.col-wide {
  width: 26%
}

/* Bei table-layout:fixed bestimmt die Kopfzeile die Spaltenbreiten - die
   leere, letzte Kopfzeile der "einfachen" Module (nur "Löschen") muss
   daher hier ebenfalls die feste Breite bekommen, sonst würde sie trotz
   der Regel weiter unten ignoriert. */
.data-table th:last-child:empty {
  width: 110px
}

.row-edit {
  cursor: pointer;
  transition: background .12s
}

.row-edit:hover {
  background: var(--card2)
}

/* Badges (status colors kept distinct from violet accent) */
.badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem
}

.badge.green {
  background: rgba(87, 201, 138, .12);
  border-color: rgba(87, 201, 138, .3);
  color: var(--good)
}

.badge.yellow {
  background: rgba(201, 154, 31, .12);
  border-color: rgba(201, 154, 31, .35);
  color: var(--violet-dim)
}

.badge.red {
  background: rgba(224, 96, 58, .12);
  border-color: rgba(224, 96, 58, .35);
  color: var(--warn)
}

.badge.grey {
  background: rgba(140, 140, 140, .12);
  border-color: rgba(140, 140, 140, .3);
  color: var(--muted2);
  text-decoration: line-through
}

.progress {
  height: 10px;
  background: var(--bg2);
  border-radius: 999px;
  overflow: hidden
}

.progress>div {
  height: 100%;
  background: var(--violet)
}

.list {
  display: grid;
  gap: 10px
}

.list-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg2)
}

.empty {
  color: var(--muted2);
  padding: 28px;
  text-align: center
}

.selfcare-grid {
  grid-template-columns: repeat(3, 1fr)
}

.alert-banner {
  background: rgba(224, 96, 58, .1);
  color: #f0a084;
  border: 1px solid rgba(224, 96, 58, .35);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: .9rem;
  margin-top: 4px
}

/* Forms */
label {
  display: grid;
  gap: 6px;
  font-weight: 500;
  font-size: .85rem;
  color: var(--muted)
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  background: var(--bg2);
  color: var(--ink)
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(115, 41, 130, .16)
}

input[type="color"] {
  padding: 4px;
  height: 42px;
  cursor: pointer
}

textarea {
  min-height: 90px;
  resize: vertical
}

/* Modal */
dialog {
  border: 0;
  border-radius: 16px;
  padding: 0;
  width: min(560px, 92vw);
  background: var(--card);
  color: var(--ink)
}

dialog::backdrop {
  background: rgba(0, 0, 0, .6)
}

#modal-form {
  padding: 20px
}

.modal-head,
.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.modal-head h2 {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  margin: 0
}

.modal-actions {
  margin-top: 18px
}

.modal-actions button {
  padding: 10px 14px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer
}

.modal-actions .primary {
  background: var(--violet);
  color: #f4ece2;
  border-color: var(--violet)
}

.icon-btn {
  font-size: 1.8rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer
}

.icon-btn:hover {
  color: var(--ink)
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.field-grid .full {
  grid-column: 1/-1
}

/* Toolbar (search + export) */
.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px
}

.search-box {
  flex: 1;
  max-width: 320px
}

.btn-sec {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  white-space: nowrap;
  transition: .15s
}

.btn-sec:hover {
  border-color: var(--line-violet)
}

th.sortable {
  cursor: pointer;
  user-select: none
}

th.sortable:hover {
  color: var(--violet-dim)
}

.row-actions {
  white-space: normal;
  max-width: none !important; /* nicht durch die generelle Zellen-Breitenbegrenzung einschränken lassen */
  padding-top: clamp(4px, 0.3vw + 3px, 6px) !important;
  padding-bottom: clamp(8px, 0.6vw + 6px, 14px) !important;
}

/* Einfache Module (nur "Löschen"-Button): eigene, schmale, zentrierte
   Spalte mit fester Breite. WICHTIG: display bleibt beim normalen
   table-cell (Standard für <td>) - kein display:block/flex hier, sonst
   fällt die Zelle aus dem Tabellenzeilen-Verbund heraus und streckt sich
   nicht mehr korrekt auf die Höhe der Nachbarzellen, wenn eine Zeile
   durch langen Text in einer anderen Spalte höher wird. */
.row-actions-simple {
  width: 110px;
  text-align: center;
  padding: clamp(8px, 0.6vw + 6px, 14px) clamp(6px, 0.5vw + 5px, 12px) !important;
}

.row-actions-row {
  cursor: default
}

.row-actions-row:hover {
  background: transparent
}

.row-actions-row td {
  border-bottom: 1px solid var(--line)
}

.row-edit-multi td {
  border-bottom: none /* Trennlinie erscheint erst nach der Aktions-Zeile, nicht schon zwischen Daten- und Aktions-Zeile */
}

.row-actions button {
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--ink);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: .15s;
  margin: 2px 6px 2px 0 /* ersetzt den früheren flex-gap, da .row-actions kein Flex mehr ist */
}

.row-actions button:hover {
  border-color: var(--line-violet)
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: .85rem;
  color: var(--muted)
}

.pagination button {
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--ink);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font: inherit
}

.pagination button:disabled {
  opacity: .35;
  cursor: default
}

/* Balkendiagramm (Umsatz pro Monat) */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding-top: 10px
}

.bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px
}

.bar {
  width: 100%;
  max-width: 28px;
  background: linear-gradient(180deg, var(--violet), var(--violet-dim));
  border-radius: 6px 6px 0 0;
  min-height: 2px;
  transition: height .3s ease
}

.bar-label {
  font-size: .7rem;
  color: var(--muted2);
  text-transform: none;
  white-space: nowrap;
}

/* Horizontales Balkendiagramm (Umsatz nach Shooting-Art) */
.hbar-chart {
  display: grid;
  gap: 12px;
  padding-top: 6px
}

.hbar-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 10px
}

.hbar-label {
  font-size: .82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.hbar-track {
  background: var(--bg2);
  border-radius: 999px;
  height: 12px;
  overflow: hidden
}

.hbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violet-dim), var(--violet));
  border-radius: 999px;
  transition: width .3s ease
}

.hbar-value {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap
}

/* Kalenderansicht (Shootings) */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px
}

.cal-grid-header {
  margin-bottom: 4px
}

.cal-weekday {
  text-align: center;
  font-size: .75rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 0
}

.cal-cell {
  min-height: 90px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: var(--bg2)
}

.cal-empty {
  background: transparent;
  border-color: transparent
}

.cal-today {
  border-color: var(--violet);
  background: var(--accent-soft)
}

.cal-daynum {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px
}

.cal-today .cal-daynum {
  color: var(--violet)
}

.cal-events {
  display: grid;
  gap: 3px
}

.cal-event {
  font-size: .72rem;
  background: var(--violet);
  color: #f4ece2;
  padding: 3px 6px;
  border-radius: 5px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cal-event:hover {
  filter: brightness(1.1)
}

@media(max-width: 700px) {
  .cal-grid {
    grid-template-columns: 1fr
  }

  .cal-grid-header {
    display: none
  }

  .cal-cell {
    min-height: auto;
    display: flex;
    align-items: center;
    gap: 10px
  }

  .cal-empty {
    display: none
  }

  .cal-daynum {
    margin-bottom: 0;
    flex-shrink: 0;
    width: 30px
  }

  .cal-events {
    flex: 1
  }
}

/* Kunden-Zeitleiste */
.timeline {
  display: grid;
  gap: 10px
}

.timeline-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: .15s
}

.timeline-item:hover {
  border-color: var(--line-violet);
  background: var(--card2)
}

.timeline-icon {
  font-size: 1.3rem;
  flex-shrink: 0
}

.timeline-title {
  font-weight: 600;
  font-size: .92rem
}

.timeline-meta {
  font-size: .8rem;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px
}

/* Ausrüstungs-Checkliste */
.equip-checklist {
  display: grid;
  gap: 8px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0
}

.equip-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  font-weight: 400;
  cursor: pointer
}

.equip-check-item input[type="checkbox"] {
  width: auto;
  accent-color: var(--violet)
}

/* Design-Vorlagen (Einstellungen) */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px
}

.preset-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 2px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: .15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06)
}

.preset-btn:hover {
  border-color: var(--violet);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
  transform: translateY(-1px)
}

.preset-btn.preset-active {
  border-color: var(--violet);
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(115, 41, 130, .18)
}

.preset-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, .15)
}

.preset-btn-label {
  font-size: .85rem;
  font-weight: 600;
  color: #222
}

/* Globale Suche (Overlay) */
.gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh
}

.gs-overlay.show {
  display: flex
}

.gs-box {
  background: var(--card);
  border: 1px solid var(--line-violet);
  border-radius: 14px;
  width: min(560px, 90vw);
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
}

#gs-input {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 16px;
  font-size: 1rem;
  background: var(--card)
}

#gs-input:focus {
  box-shadow: none;
  border-color: var(--violet)
}

.gs-results {
  overflow-y: auto;
  padding: 6px
}

.gs-hint {
  color: var(--muted);
  font-size: .85rem;
  padding: 16px
}

.gs-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer
}

.gs-result:hover {
  background: var(--card2)
}

.gs-icon {
  font-size: 1.2rem;
  flex-shrink: 0
}

.gs-result-title {
  font-weight: 600;
  font-size: .92rem
}

.gs-result-sub {
  font-size: .78rem;
  color: var(--muted)
}

/* Undo-Toast nach Löschen */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(80px);
  background: var(--card2);
  border: 1px solid var(--line-violet);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 999px;
  font-size: .88rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  opacity: 0;
  transition: .25s;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 14px
}

.undo-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1
}

.undo-toast button {
  background: var(--violet);
  color: #f4ece2;
  border: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  font-family: inherit
}

/* Dateianhänge im Bearbeiten-Dialog */
.attach-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line)
}

.attach-title {
  font-size: .85rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px
}

.attach-files {
  display: grid;
  gap: 6px;
  margin-bottom: 10px
}

.attach-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: .85rem
}

.attach-file a {
  color: var(--violet-dim);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.attach-file a:hover {
  text-decoration: underline
}

.attach-file button {
  background: none;
  border: none;
  color: var(--muted2);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0
}

.attach-file button:hover {
  color: var(--warn)
}

.attach-upload {
  display: flex;
  gap: 8px;
  align-items: center
}

.attach-upload input[type="file"] {
  flex: 1;
  font-size: .8rem;
  padding: 8px;
  color: var(--muted)
}

.attach-upload button {
  flex-shrink: 0
}

/* Responsive */
@media(max-width:1000px) {
  body {
    grid-template-columns: 90px 1fr
  }

  .brand div:not(.logo),
  .sidebar button span {
    display: none
  }

  .cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .two-col {
    grid-template-columns: 1fr
  }
}

/* Hamburger-Menü-Button (nur auf schmalen Bildschirmen sichtbar) */
#mobile-nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0
}

@media(max-width:650px) {
  body {
    display: block
  }

  #mobile-nav-toggle {
    display: block
  }

  .brand {
    margin-bottom: 0;
    display: flex;
    align-items: center
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px
  }

  .sidebar nav {
    display: none;
    flex-direction: column;
    gap: 4px;
    margin-top: 14px;
    max-height: 70vh;
    overflow-y: auto
  }

  .sidebar.nav-open nav {
    display: flex
  }

  .sidebar nav button {
    width: 100%;
    min-height: 46px;
    font-size: 1rem;
    text-align: left
  }

  .sidebar nav button span {
    display: inline !important
  }

  main {
    padding: 16px
  }

  .cards,
  .selfcare-grid {
    grid-template-columns: 1fr
  }

  .topbar {
    align-items: flex-start
  }

  .topbar .primary,
  main button,
  .toolbar button,
  .row-actions button {
    min-height: 40px
  }

  .field-grid {
    grid-template-columns: 1fr
  }

  .field-grid .full {
    grid-column: auto
  }

  /* Dialog auf Handys als Vollbild, leichter zu bedienen */
  dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0
  }

  #modal-form {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto
  }

  /* Toolbar (Suche + Export-Buttons) auf Handys stapeln statt quetschen */
  .toolbar {
    flex-wrap: wrap
  }

  .search-box {
    max-width: none;
    width: 100%
  }

  /* Suchoverlay (Strg+K) auf Handys vollflächig */
  .gs-box {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0
  }

  .gs-overlay {
    padding-top: 0
  }

  /* Kalender: Wochenraster wird auf schmalen Screens schon per
     .cal-grid-Regel (700px) zur Liste, hier zusätzlich Feinschliff */
  .cal-event {
    font-size: .8rem;
    padding: 6px 8px
  }

  /* Tabellen als Karten statt breiter, horizontal scrollender Tabelle */
  .data-table thead {
    display: none
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%
  }

  .data-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 6px 4px;
    background: var(--card2)
  }

  .data-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    border-bottom: 1px dashed var(--line);
    white-space: normal;
    text-align: left;
    min-height: 20px
  }

  .data-table td:last-child {
    border-bottom: none
  }

  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex-shrink: 0
  }

  .data-table td.row-actions {
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap
  }

  .data-table td.row-actions::before {
    display: none
  }

  .data-table td.row-actions button {
    padding: 10px 12px;
    font-size: .85rem
  }
}

/* Tablet-Feinschliff (zwischen Handy und Desktop) */
@media(min-width:651px) and (max-width:1000px) {
  .cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .field-grid {
    grid-template-columns: 1fr 1fr
  }

  dialog {
    width: min(640px, 94vw)
  }

  .toolbar {
    flex-wrap: wrap
  }
}