/* =========================================================
   admin.css – CMYK Design (DaisyUI-inspiriert, Theme "cmyk")
   Kompatibel mit vorhandenem HTML: .nav, .card, .btn,
   .table, .badge(-ok|-warn|-done), .flash, .body-container,
   .grid-2 etc.
   ========================================================= */

/* -------------------- Tokens / Variablen -------------------- */
:root{
  /* Grundfarben (CMYK) */
  --cmyk-c: 190 85% 45%;   /* Cyan */
  --cmyk-m: 310 84% 50%;   /* Magenta */
  --cmyk-y: 46 95% 55%;    /* Yellow */
  --cmyk-k: 220 16% 20%;   /* Neutral text */

  /* Semantic Colors (angelehnt an DaisyUI) */
  --color-primary: hsl(var(--cmyk-c));
  --color-primary-ct: #fff;
  --color-secondary: hsl(var(--cmyk-m));
  --color-accent: hsl(var(--cmyk-y));
  --color-neutral: hsl(var(--cmyk-k));
  --color-ok: hsl(142 72% 35%);
  --color-warn: hsl(35 92% 45%);
  --color-err: hsl(0 80% 55%);

  /* Flächen / Oberflächen */
  --base-100: #fff;
  --base-200: hsl(210 25% 97%);
  --base-300: hsl(215 22% 90%);
  --soft: hsl(220 18% 96%);

  /* Typo / Radius / Schatten */
  --ink: hsl(220 13% 16%);
  --ink-weak: hsl(220 10% 38%);
  --radius: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent);
  --font: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,"Noto Sans",sans-serif;
}

/* -------------------- Base Styles -------------------- */
html,body{
  background:var(--base-200);
  color:var(--ink);
  font-family:var(--font);
  line-height:1.5;
}
.body-container{
  max-width:960px;
  margin:0 auto;
  padding:0 14px;
}

/* -------------------- Navigation -------------------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0 18px;
}
.nav strong{font-weight:800}
.nav nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
.nav a{
  text-decoration:none;
  color:var(--ink);
  padding:8px 12px;
  border-radius:10px;
  font-weight:700;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{
  background:var(--soft);
}
.nav a.active,
.nav a[data-active="true"]{
  background:color-mix(in oklab, var(--color-primary) 15%, #fff);
  color:var(--color-primary);
}

/* -------------------- Cards -------------------- */
.card{
  background:var(--base-100);
  border:1px solid var(--base-300);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  margin:12px 0;
}
.card h2,.card h3{
  margin:0 0 10px;
  line-height:1.3;
}
h2{font-size:1.5rem;}
h3{font-size:1.25rem;}

/* -------------------- Buttons -------------------- */
button,.btn,.contrast,.secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  border:1px solid var(--base-300);
  background:#fff;
  color:var(--ink);
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  transition:filter .15s ease;
}
.btn:hover,
.secondary:hover{
  background:var(--soft);
}
.btn-primary,
.contrast,
button.contrast{
  background:var(--color-primary);
  color:var(--color-primary-ct);
  border-color:var(--color-primary);
}
.btn-primary:hover,
.contrast:hover{
  filter:brightness(.95);
}
.btn-secondary,
.secondary{
  background:var(--soft);
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Varianten */
.btn-magenta{
  background:var(--color-secondary);
  color:#fff;
  border-color:var(--color-secondary);
}
.btn-yellow{
  background:var(--color-accent);
  color:#352a00;
  border-color:var(--color-accent);
}

/* -------------------- Inputs / Formulare -------------------- */
input,select,textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--base-300);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  font:inherit;
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  box-shadow:var(--focus-ring);
  border-color:var(--color-primary);
}
input[type="checkbox"],input[type="radio"]{
  width:auto;
  box-shadow:none;
  padding:0;
}
label{display:block;margin-bottom:4px;}
.small{font-size:.9rem;}
.muted{color:var(--ink-weak);}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}

/* Kompaktere Filterfelder */
input[type="date"],
input[type="datetime-local"],
input[type="number"]{
  padding:.55rem .7rem;
}

/* -------------------- Tabellen -------------------- */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
}
.table thead th{
  text-align:left;
  font-weight:800;
  color:var(--ink-weak);
  padding:8px 10px;
}
.table tbody td{
  background:var(--base-100);
  border:1px solid var(--base-300);
  padding:10px;
  vertical-align:top;
}
.table tbody tr td:first-child{
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
.table tbody tr td:last-child{
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
.table tbody tr:hover td{
  background:var(--soft);
}

/* -------------------- Badges / Status -------------------- */
.badge,.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border:1px solid var(--base-300);
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.85rem;
  background:var(--soft);
  color:var(--ink);
}
.badge-ok{
  background:color-mix(in oklab, var(--color-ok) 18%, #fff);
  color:var(--color-ok);
  border-color:color-mix(in oklab, var(--color-ok) 35%, #fff);
}
.badge-warn{
  background:color-mix(in oklab, var(--color-warn) 18%, #fff);
  color:var(--color-warn);
  border-color:color-mix(in oklab, var(--color-warn) 35%, #fff);
}
.badge-done{
  background:color-mix(in oklab, var(--color-primary) 18%, #fff);
  color:var(--color-primary);
  border-color:color-mix(in oklab, var(--color-primary) 35%, #fff);
}

/* -------------------- Flash / Alerts -------------------- */
.flash{
  border-radius:10px;
  padding:.8rem 1rem;
  margin:.75rem 0;
  border:1px solid var(--base-300);
  background:var(--soft);
}
.flash.success{
  background:color-mix(in oklab, var(--color-ok) 14%, #fff);
  border-color:color-mix(in oklab, var(--color-ok) 30%, #fff);
  color:var(--color-ok);
}
.flash.error{
  background:color-mix(in oklab, var(--color-err) 12%, #fff);
  border-color:color-mix(in oklab, var(--color-err) 30%, #fff);
  color:var(--color-err);
}

/* -------------------- Layout-Utils -------------------- */
.grid-2{
  display:grid;
  gap:12px;
}
@media(min-width:900px){
  .grid-2{grid-template-columns:1fr 1fr;}
}
.actions .btn{margin-right:8px;}

/* ===== Anti-Overflow + Mobile-Fixes (immer ganz unten einfügen) ===== */

/* 1) Box-Sizing & globale Begrenzung */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}

/* 2) Container konsistent begrenzen */
.body-container,.container,.wrap{max-width:960px;margin:0 auto;padding:0 14px}

/* 3) Medien nie überlaufen lassen */
img,svg,canvas,video,iframe{max-width:100%;height:auto;display:block}

/* 4) Navigation bruchsicher */
.nav{min-width:0}
.nav nav{display:flex;flex-wrap:wrap;gap:12px;min-width:0}
.nav a{white-space:nowrap}
.nav a.active{font-weight:800;color:var(--color-primary)}
/* Falls Badges verwendet werden, nicht aus dem Viewport schieben */
.nav a.has-count::after{right:-0.25em;}

/* 5) Tabellen sicher (kein Rechts-Überlauf) */
.table{width:100%;display:block;overflow-x:auto}
.table thead,.table tbody,.table tr{width:100%}
.table th,.table td{white-space:normal;overflow-wrap:anywhere;word-break:break-word}

/* 6) Karten/Grids bruchsicher */
.card,details,summary,.timeline{min-width:0}
.timeline{overflow-x:auto}

/* 7) Form-Controls nicht breiter als der Viewport */
input,select,textarea,button,.btn{max-width:100%}

/* 8) Vorformatierter Text soll umbrechen (Logs) */
pre{white-space:pre-wrap;word-wrap:break-word}

/* 9) iOS Safari: Sticky/Fixed-Navi verhindern (falls gesetzt) */
header.nav{position:static}
/* ===== Mobile-Table-Fix v2 (iOS Safari) ========================= */
@media (max-width: 740px){
  /* der Karten-Container scrollt horizontal */
  .card{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tabelle nutzt ihre Inhaltsbreite, kein Buchstabenbruch */
  .table{
    display: table;              /* zurück zu echter Tabelle */
    width: max-content;          /* so breit wie Inhalte */
    min-width: 720px;            /* Untergrenze für Kopflesbarkeit */
    border-spacing: 0;           /* keine Lücken */
    white-space: nowrap;
  }
  .table thead th,
  .table tbody td{
    white-space: nowrap;
  }

  /* kompaktere Controls */
  input, select, textarea{ padding:9px 10px; }
  .btn, button{ padding:8px 12px; }
  .card{ padding:12px; } /* optisch enger, aber behält overflow-x */
}

/* Desktop: Karte nicht abschneiden */
.card{ overflow: visible; }
/* ===== Rechnungen: Mobile-Accordion statt breiter Tabelle ===== */
@media (max-width: 740px){
  .table--invoices { display:none; }         /* breite Tabelle verstecken */
  .invoice-list   { display:grid; gap:12px; }

  /* Karten scollen nicht mehr seitlich */
  html, body { overflow-x:hidden; }
}

@media (min-width: 741px){
  .invoice-list { display:none; }            /* Accordion nur mobil */
}

.invoice-item{
  border:1px solid var(--base-300);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-1);
}

/* Summary-Zeile (Header des Accordions) */
.invoice-item > summary{
  list-style:none;
  display:grid;
  grid-template-columns: 1fr auto; /* links: Nummer+Kunde, rechts: Datum */
  gap:8px;
  align-items:center;
  padding:12px 14px;
  cursor:pointer;
}
.invoice-item > summary::-webkit-details-marker{ display:none; }

.invoice-item .muted{ color:var(--ink-weak); }
.invoice-item .meta{ padding:0 14px 12px; }
.invoice-item .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:8px;
}
.invoice-item .label{
  font-size:.9rem;
  color:var(--ink-weak);
}
/* --- iOS Fix: verhindert Überlauf bei Date-/Datetime-Feldern --- */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  border: 1px solid var(--base-300, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
/* === NAV FIX (desktop + mobile) =================================== */
.shell{max-width:1000px;margin:0 auto;padding:0 14px}

/* Header-Layout */
header.nav{display:flex;align-items:center;gap:16px;padding:10px 0;
  background:hsl(210 25% 97%);border-bottom:1px solid hsl(215 22% 90%)}
header.nav .brand{display:flex;align-items:baseline;gap:8px}
header.nav .brand .userhint{color:#6b7280}

/* Toggle (mobil) */
header.nav .nav-toggle{display:none;width:38px;height:32px;border:1px solid hsl(215 22% 90%);
  border-radius:10px;background:#fff;cursor:pointer}

/* Liste horizontal, ohne Bullets */
header.nav .nav-list{margin-left:auto}
header.nav .nav-list ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
header.nav .nav-list li{margin:0;padding:0}
header.nav .nav-list a{display:block;text-decoration:none;color:inherit;font-weight:700;
  padding:6px 10px;border-radius:10px}
header.nav .nav-list a:hover{background:hsl(220 14% 96%)}
header.nav .nav-list a.active{background:hsl(222 85% 57% / .14);color:hsl(222 85% 47%)}

/* Mobile: Dropdown-Panel */
@media (max-width:860px){
  header.nav{padding:6px 0}
  header.nav .nav-toggle{display:inline-flex;margin-left:auto;justify-content:center;align-items:center}
  header.nav .nav-list{
    position:fixed;left:12px;right:12px;top:58px;background:#fff;
    border:1px solid hsl(215 22% 90%);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.08);
    padding:10px;display:none;z-index:60}
  header.nav .nav-list ul{flex-direction:column;gap:6px}
  body.nav-open header.nav .nav-list{display:block}
  .nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.15);opacity:0;pointer-events:none}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
}

/* Fokus sichtbar */
header.nav a:focus-visible, header.nav .nav-toggle:focus-visible{
  outline:3px solid rgba(0,79,159,.25); outline-offset:2px;
}
/* responsive table: stack rows on small screens */
.rtable{width:100%; border-collapse:separate; border-spacing:0 8px}
.rtable th{ text-align:left; color:#6b7280; padding:8px 10px }
.rtable td{ background:#fff; border:1px solid #e5e7eb; padding:10px; vertical-align:top }
.rtable tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
.rtable tbody tr td:last-child {border-top-right-radius:10px;border-bottom-right-radius:10px}

/* mobile stacking */
@media (max-width: 760px){
  .rtable thead{ display:none }
  .rtable, .rtable tbody, .rtable tr, .rtable td{ display:block; width:100% }
  .rtable tr{ margin:10px 0; border:1px solid #e5e7eb; border-radius:12px; background:#fff }
  .rtable td{ border:0; border-bottom:1px solid #e5e7eb; padding:10px 12px }
  .rtable td:last-child{ border-bottom:0 }
  .rtable td::before{
    content: attr(data-label);
    display:block; font-size:.85rem; color:#6b7280; margin-bottom:4px;
  }
}
/* === admin.css · Core-Fixes (mobile + desktop) =================== */
*,
*::before,
*::after { box-sizing: border-box }

html,body{ min-height:100%; background:#f3f5f7; color:#111; overflow-x:hidden }

.body-container{ max-width:980px; margin:0 auto; padding:0 14px }

/* Karten sind Scrolling-Container für breite Inhalte (Tabellen) */
.card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05); padding:14px; margin:12px 0;
  overflow-x:auto; /* <<< verhindert Seiten-Overflow, scrollt nur im Block */
}

/* Form Controls: nie breiter als Card, auf iOS ohne Ausreißer */
input,select,textarea,button{ max-width:100%; font:inherit }
input,select,textarea{
  width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  padding:10px 12px; outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.25) }
input[type="date"], input[type="datetime-local"], input[type="number"]{ padding:.55rem .7rem }

/* Tabelle: Desktop normal, mobil bleibt Tabelle erhalten,
   ist aber nur innerhalb der Card horizontal scrollbar. */
.table{ width:100%; border-collapse:separate; border-spacing:0 }
.table thead th{
  text-align:left; font-weight:700; color:#6b7280; padding:10px 12px; white-space:nowrap;
  border-bottom:2px solid #e5e7eb;
}
.table tbody td{
  padding:12px; vertical-align:top; border-bottom:1px solid #e5e7eb;
}
.table tbody tr:hover td{ background:#fafbfc }
@media (max-width: 760px){
  .table{ min-width:700px } /* << damit scrollt nur die Card, nicht die Seite */
}

/* Details/Accordion (für Rechnungen etc.) – generisch nutzbar */
details.invoice-item{ border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.03); margin:10px 0 }
details.invoice-item > summary{
  list-style:none; cursor:pointer; padding:12px 14px;
  display:grid; grid-template-columns:1.1fr 1.6fr auto; gap:8px; align-items:center;
}
details.invoice-item > summary::-webkit-details-marker{ display:none }
details.invoice-item[open] > summary{ border-bottom:1px solid #e5e7eb }
details.invoice-item .body{ padding:12px 14px; display:grid; gap:10px }
@media (max-width:700px){
  details.invoice-item > summary{ grid-template-columns:1fr; row-gap:4px }
}

/* Navigation bleibt mittig, bricht sauber */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:10px 0 18px }
.nav-list{ display:flex; gap:14px; flex-wrap:wrap }
.nav a{ text-decoration:none; color:#111; padding:6px 10px; border-radius:10px; font-weight:700 }
.nav a.active{ background:#dbeafe; color:#2563eb }

/* Badges/Buttons klein gehalten */
.badge{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px;
  border:1px solid #e5e7eb; background:#f3f4f6; font-weight:700; font-size:.85rem }
.badge-ok{ background:#e8f6ee; border-color:#c7ead6; color:#0a7f2e }
.badge-requested{ background:#fff4e6; border-color:#ffe2b8; color:#a96500 }
.badge-declined{ background:#fdecec; border-color:#f7c7c9; color:#a40000 }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  border:1px solid #e5e7eb; background:#fff; cursor:pointer; font-weight:800 }
.btn:hover{ background:#f3f4f6 }
.btn.secondary{ background:#f1f5f9 }

/* ===== FIX: iOS-Overflow in Rechnungstabellen (card-bounded scroll) ===== */
.card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

/* Tabellen in Cards als echte Tabellen rendern und an Inhalt binden */
.card > table,
.card .table {
  display: table !important;
  width: max-content !important;   /* so breit wie der Inhalt */
  min-width: 100% !important;      /* mindestens so breit wie die Card */
  border-spacing: 0;
}

/* Breite auf kleinen Screens begrenzen, Scroll bleibt in der Card */
@media (max-width: 760px){
  .card > table,
  .card .table { min-width: 640px !important; } /* lesbare Untergrenze */
}

/* vorangegangene "Breite 100%"-Regeln neutralisieren */
.card .table thead,
.card .table tbody,
.card .table tr { width: auto !important; }

/* Zellen umbrechen statt die Card zu sprengen */
.card .table th,
.card .table td {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* === iPhone-Fix: Tabellen dürfen die Card nicht verlassen ============= */

/* 1) Card wird zum eigenen Scroll-Container */
.card{
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 2) Tabellen in Cards auf Card-Breite clampen */
.card > table,
.card table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: auto !important;      /* Inhalte dürfen umbrechen */
  border-collapse: separate !important;/* Safari-Overflow-Bug vermeiden */
}

/* 3) Inhalte sicher umbrechen, keine starren Whitespaces */
.card th,
.card td {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Speziell für Rechnungsansicht: Positions-Tabelle darf intern breiter sein,
      scrollt aber ausschließlich in der Card */
@media (max-width: 760px){
  #invoiceContainer .panel { overflow-x: auto !important; }
  #invoiceContainer table.pos { 
    min-width: 680px !important; 
    width: max-content !important;
  }
}

/* 5) Frühere Block-Darstellung neutralisieren, damit es echte Tabellen bleiben */
#invoiceContainer thead,
#invoiceContainer tbody,
#invoiceContainer tr {
  display: table-row-group !important;
  width: auto !important;
}
/* ==== iPhone Overflow-Fix für Rechnung & Accounting ================= */

/* 0) Keine Seitwärts-Scrollbars auf der Seite */
html, body { max-width: 100%; overflow-x: hidden; }

/* 1) Container der Rechnung darf selbst horizontal scrollen */
#invoiceContainer .panel,
.card {                         /* card = auch für accounting.php */
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* 2) Tabellen auf Containerbreite einfangen */
#invoiceContainer .panel > table,
.card > table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;     /* erzwingt Umbruch */
  border-collapse: separate !important;
}

/* 3) Umbruch wirklich erlauben (überschreibt nowrap aus admin.css) */
#invoiceContainer table.kv th,
#invoiceContainer table.kv td,
#invoiceContainer table.pos th,
#invoiceContainer table.pos td,
.card table th,
.card table td {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 4) Positions-Tabelle darf intern breiter sein, scrollt aber nur in der Card */
@media (max-width: 760px){
  #invoiceContainer table.pos { min-width: 680px !important; width: max-content !important; }
}
html, body { -webkit-text-size-adjust: 100%; font-size: 16px; }
@supports (font: -apple-system-body) {
  body { font: -apple-system-body; }
}
.vorgang {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.vorgang + .vorgang { margin-top: 12px; }

.vorgang header {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; letter-spacing: .2px;
}

.vorgang .meta { font-size: 13px; color: #666; margin-top: 6px; }

.vorgang.abgeschlossen {
  background: #f6f8f6;
  border-left: 4px solid #47a857;
  opacity: .95;
}

.section--abgeschlossen { padding-top: 4px; }
.section--abgeschlossen::before {
  content: "Abgeschlossen"; display: block; font-size: 12px; color: #777;
  margin: 8px 0; text-transform: uppercase; letter-spacing: .08em;
  border-top: 1px dashed #ddd; padding-top: 8px;
}
/* iOS: konstante Schrift und kein Auto-Zoom */
html, body { -webkit-text-size-adjust: 100%; font-size: 16px; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }

:root {
  --bg: #fafafa; --bg-done: #f6f8f6; --stroke: #e5e5e5; --text-weak:#666;
  --ok: #47a857; --shadow: 0 1px 3px rgba(0,0,0,.06); --radius: 10px;
}

.anfrage-list { display: flex; flex-direction: column; gap: 12px; }
.anfrage-card {
  background: var(--bg);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.anfrage-card.is-done { background: var(--bg-done); border-left: 4px solid var(--ok); }

.card-head { display:flex; align-items:center; justify-content:space-between; }
.card-head .id { font-weight: 700; letter-spacing:.2px; }
.pill {
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; background:#e9ecef; color:#222;
}
.pill--angenommen { background:#e4e9ff; }
.pill--abgelehnt  { background:#ffe4e4; }
.pill--offen      { background:#eee; }

.row { margin-top: 12px; }
.row + .row { border-top: 1px solid var(--stroke); padding-top: 12px; }
.label { display:block; font-size: 12px; color: var(--text-weak); margin-bottom: 4px; text-transform: none; }
.value { font-size: 16px; }

.card-foot { margin-top: 12px; display:flex; justify-content:flex-start; }
.btn {
  display:inline-block; padding: 8px 14px; border:1px solid #dcdcdc; border-radius: 999px;
  background:#fff; font-weight:700; text-decoration:none; color:#111;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root { --bg:#111; --bg-done:#0f140f; --stroke:#222; --text-weak:#aaa; --shadow:none; }
  .btn { background:#0b0b0b; border-color:#2a2a2a; color:#eee; }
}