/* äußerer Header (lila Hintergrund) */
.card-hd{
  padding: .1rem .1rem;
  background:#f5f6fb;
  border-top-left-radius:12px; border-top-right-radius:12px;
}

/* der weiße Kasten */
.card-hd-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding: .75rem .75rem;
  cursor:pointer;             /* kompletter Kasten klickbar */
  user-select:none;
}

.card-body{
  padding: .25rem .25rem .25rem;                  /* vorher z.B. 1rem  */
}

/* leichtes Feinspacing im Inhalt */
.card-body .grid{ row-gap: .35rem; }

/* Titel */
.card-title{ font-weight:700; }

/* Chevron-Button rechts */
.card-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:28px;
  border:1px solid #d7d8e0; border-radius:999px; background:#fff;
}
.card-toggle .chev{ transition:transform .18s ease; }

/* Zu -> Pfeil nach rechts */
.card.is-collapsed .card-toggle .chev{ transform:rotate(-90deg); }
/* Card zugeklappt: Inhalt ausblenden */
.card.is-collapsed > .card-body { display: none; }

/* ================== responsives Feld-Grid ================== */
.grid-fields{
  display:grid;
  grid-auto-rows:minmax(0,auto);
  align-items:start;
}
/* ganz wichtig: Grid-Kinder dürfen schrumpfen */
.grid-fields > div{ min-width:0; }
/* Werte-Bereich: lange Wörter/URLs umbrechen */
.grid-fields [data-k]{ 
  min-width:0;
  overflow-wrap:anywhere;   /* moderne Browser */
  word-break:break-word;    /* Fallback/ergänzend */
}
.grid-fields [data-k] a{
  overflow-wrap:anywhere;
  word-break:break-all;     /* notfalls harte Trennung */
  text-decoration: underline;
}
/* Labels in einer Zeile lassen (optional) */
.grid-fields .muted{ white-space:nowrap; }

/* ===== Card-Theme-Variablen ===== */
:root{
  --card-outer-bg: #f5f6fb; /* Hinter dem weißen Kasten */
  --card-bg:       #fff;    /* Weißer Kasten */
  --card-bd:       #e5e7eb; /* Rahmen/Fokus */
  --card-fg:       inherit; /* Text/Farbe im Header */
}

/* Darkmode (klassisch per Klasse) */
:root.dark, html[data-theme="dark"], body.dark{
  /* An Tabellenköpfe angelehnt */
  --card-outer-bg: transparent;
  --card-bg:       #1f2230; /* <- wie Table-Header */
  --card-bd:       #2a2f3d;
  --card-fg:       #e5e7eb;
}

/* Darkmode (auto, wenn kein explizites Light-Theme gesetzt ist) */
@media (prefers-color-scheme: dark){
  :root:not(.light):not([data-theme="light"]){
    --card-outer-bg: transparent;
    --card-bg:       #1f2230;
    --card-bd:       #2a2f3d;
    --card-fg:       #e5e7eb;
  }
}

/* ===== Karten auf Variablen umbauen ===== */

/* äußerer Header (lila Hintergrund) */
.card-hd{
  padding: .1rem .1rem;
  background: var(--card-outer-bg);
  border-top-left-radius:12px; border-top-right-radius:12px;
}

/* der Kasten (vorher fix weiß) */
.card-hd-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background: var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:10px;
  padding: .75rem .75rem;
  cursor:pointer;
  user-select:none;
  color: var(--card-fg);
}

/* Titel übernimmt Farbe */
.card-title{ font-weight:700; color: inherit; }

/* Chevron-Button rechts */
.card-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:28px;
  border:1px solid var(--card-bd);
  border-radius:999px;
  background: var(--card-bg);
  color: var(--card-fg);
}
.card-toggle .chev{ transition:transform .18s ease; }