/* ──────────────────────────────────────────────────────────────────
 * WINZERAI — Kellerbuch Design System
 * Self-contained: keine Framework-Abhängigkeit. Definiert eigene Tokens
 * (Light + Dark via [data-theme="dark"]), Base-Resets und alle
 * produktspezifischen Komponenten (Mic-Taste, Status-Flags, Kalender,
 * Toast/Notify, Severity-Stripes). Siehe DESIGN.md für Konventionen.
 *
 * Cormorant (SIL OFL, self-hosted) für Display — wie Weinetiketten.
 * Body bleibt system-ui für Lesbarkeit in Tabellen/Buttons.
 * ────────────────────────────────────────────────────────────────── */

/* ── Self-hosted Cormorant (Display-Serif, wie Weinetiketten) ───── */
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/cormorant-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/cormorant-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Kellerbuch Tokens (Light) ─────────────────────────────────── */
:root {
  /* Akzente — erdig, weingut-tauglich, nicht Bootstrap-primär */
  --green: #5a7a3a;              /* rebblatt — etwas gedämpfter, weiniger */
  --interactive-green: #3d6b1f; /* tiefe Kellerbuch-Grün für Buttons — nicht leuchtend */
  --surface-dark: #1c1a26;      /* nacht-wingert, leicht wärmer */
  --danger: #7a2e2e;            /* wein-rot — Burgunder, semantisch Wein=Gefahr */
  --danger-text: #7a2e2e;       /* Light-Mode: gleich wie --danger (text auf hell) */
  --wine-red: #7a2e2e;          /* Alias für wein-rot — für explizite Danger/Kritisch */

  /* Text */
  --dark: #1c1a26;              /* Body-Text-Farbe (flippt in Dark-Mode zu warm-weiß) */
  --text-secondary: #6d675d;    /* sekundaer-text — warmbraun */
  --muted-grau: #8a8478;        /* muted-grau — warmes Grau, nicht kalt */
  --on-dark: #f4f1e8;           /* Text auf dunklen Flächen — warmes Off-White, nicht grell-weiß */

  /* Oberflächen — warm, nicht steril */
  --bg: #f3efe4;                /* reifes-papier — wärmer, leicht cremig */
  --card-bg: #faf8f1;           /* karten-weiss — off-white, nicht steril */
  --card-border: #ddd8c8;       /* karte-rand — warmgrau, sichtbarer */
  --border: #e5e1d2;            /* genereller Rand */
  --th-bg: #ece6d3;             /* tabelle-kopf — warm-grünliches Grau */
  --ghost-bg: #e8e3d3;          /* Ghost-Button — warmes Beige, nicht kaltes Grau */

  /* Eingaben */
  --input-bg: #faf8f1;          /* matcht Karte */
  --input-border: #c4bda8;     /* eingabe-rand — wärmer, fassbarer */
  --input-text: #1c1a26;
  --input-placeholder: #8a8478;
  --input-focus: #3d6b1f;       /* interaktiv-gruen */

  /* Status-Farben (an Zustände gebunden, nicht dekorativ) —
     warn-gelb: Ampel-Gelb für mittlere Dringlichkeit (konstant über Themes,
     wie eine Verkehrsampel). pruef-amber/confirmed-mint: Hintergrund-Flags für
     needs_review / freigegeben; flippen im Dark-Mode auf ihre dunklen Pendants. */
  --warn-gelb: #e0a800;
  --pruef-amber: #f5e8cc;
  --confirmed-mint: #d8e8c4;
  --interactive-green-hover: #2d5a1c;  /* einheitlicher Hover-Verdunkler für interactive-green */
  --danger-hover: #5a1e1e;            /* Hover-Verdunkler für danger-Buttons */

  /* Typo & Form */
  --font-display: 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-family: system-ui, -apple-system, sans-serif;
  --radius: 6px;
  --radius-lg: 8px;
}

/* ── Kellerbuch Tokens (Dark) — "Kellerbuch im Kerzenschein" ───── */
[data-theme="dark"] {
  --green: #7ba84d;             /* rebblatt aufgehellt für Sichtbarkeit */
  --interactive-green: #4a7a2c; /* bleibt dunkel — weiß-auf-grün auf dunkler Karte */
  --surface-dark: #1c1a26;      /* bleibt als Buchrücken */
  --danger: #b0413e;            /* wein-rot für Hintergründe (weißer Text drauf: 5.72:1 AA) */
  --danger-text: #e8908c;       /* helleres Weinrot für Text auf dunklen Karten (7.11:1 AA) */
  --wine-red: #b0413e;

  --dark: #ece8df;              /* Body-Text warm-weiß */
  --text-secondary: #a8a09a;
  --muted-grau: #a8a09a;
  --on-dark: #f4f1e8;

  --bg: #13121a;                /* tiefer als nacht-wingert — Kerzenschein-Papier */
  --card-bg: #1d1b26;           /* angehobene Karte */
  --card-border: #2e2b3a;
  --border: #2a2737;
  --th-bg: #26242f;
  --ghost-bg: #2a2735;

  --input-bg: #1a1822;
  --input-border: #3a3648;
  --input-text: #ece8df;
  --input-placeholder: #a8a09a;
  --input-focus: #7ba84d;

  /* Status-Flag-Hintergründe flippen im Kerzenschein auf ihre dunklen Pendants. */
  --pruef-amber: #3a3026;
  --confirmed-mint: #2a3a26;
  --danger-hover: #8a3333;            /* Hover-Verdunkler für danger-Buttons im Dark-Mode */
}

/* ── Base Reset ────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  font-family: var(--font-family);
  margin: 0;
  background: var(--bg);
  color: var(--dark);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* Subtile Papiertextur via CSS-Noise (keine Bilder): ~6% Opacity,
     gibt dem Papier-Grund echtes Material-Feel ohne sichtbares Muster.
     Plus warmer Gradient von oben — Papier fällt leicht heller aus. */
  background-image:
    linear-gradient(to bottom, rgba(255, 248, 235, 0.3), transparent 6rem),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.13  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[data-theme="dark"] body {
  background-image:
    linear-gradient(to bottom, rgba(40, 38, 50, 0.4), transparent 6rem),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* ── Display-Serif für Headlines (Cormorant, wie Weinetiketten) ── */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
h1 { font-weight: 700; }
h2 { font-weight: 500; }
p { margin: 0 0 0.8rem; }
a { color: var(--interactive-green); }
table { caption-side: bottom; }

/* ── Navigation (Buchrücken) — full-width dark bar, content aligned with main ──
   Vine-leaf pattern bei 5% Opacity: dezentes Wein-Motiv, 0 KB, offline-safe. */
nav {
  background: var(--surface-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23f4f1e8' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'><path d='M12 2C7 2 3 6 3 11c0 4 3 7 7 9 0-3 1-5 3-7-1 3-1 6 0 9 4-2 7-5 7-9 0-5-4-9-8-11Z'/><path d='M12 22V11'/></svg>");
  background-size: 60px 60px;
  padding: 0.6rem 1rem;
}
.nav-inner {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
nav a { color: var(--on-dark); text-decoration: none; font-weight: 600; }
nav a:hover { color: var(--green); }
nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
nav .brand .icon { color: var(--green); }
nav .spacer { flex: 1; }
nav .user {
  color: var(--muted-grau);
  font-weight: 400;
  font-size: 0.85rem;
}
/* Logout-Form inline in Nav */
nav form { display: inline; }

/* Nav-Hierarchie: Diktieren als primärer CTA (grüne Pill) */
nav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(61, 107, 31, 0.15);
  color: var(--interactive-green);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
nav .nav-cta:hover { background: rgba(61, 107, 31, 0.25); }
nav .nav-secondary { white-space: nowrap; }

/* Mobil: Bottom tab bar + Drawer (PWA) — default hidden */
.nav-bottom {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--surface-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23f4f1e8' stroke-width='0.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.06'><path d='M12 2C7 2 3 6 3 11c0 4 3 7 7 9 0-3 1-5 3-7-1 3-1 6 0 9 4-2 7-5 7-9 0-5-4-9-8-11Z'/><path d='M12 22V11'/></svg>");
  background-size: 60px 60px;
  z-index: 100;
  padding: 0.4rem 0.3rem;
  justify-content: space-around;
  align-items: center;
}
.nav-bottom__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  color: var(--on-dark);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  min-height: 48px;
  justify-content: center;
  flex: 1;
}
.nav-bottom__tab:hover { color: var(--green); }
/* Diktieren-Tab: primärer Akzent (grün) */
.nav-bottom__tab:first-child {
  color: var(--green);
  font-weight: 700;
}
.nav-bottom__tab:first-child svg { width: 26px; height: 26px; }

/* Drawer: hidden by default, toggled by JS */
.nav-drawer {
  display: none;
  position: fixed;
  bottom: 4rem;
  right: 0.5rem;
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
  padding: 0.6rem;
  z-index: 101;
  min-width: 12rem;
}
.nav-drawer.open { display: flex; flex-direction: column; gap: 0.3rem; }
.nav-drawer a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--on-dark);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
}
.nav-drawer a:hover { background: rgba(255, 255, 255, 0.08); }
.nav-drawer hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 0.3rem 0; }
.nav-drawer .user { color: var(--muted-grau); padding: 0.3rem 0.6rem; }
.nav-drawer .theme-toggle { color: var(--on-dark); justify-content: flex-start; }

/* Desktop: Bottom-Bar + Drawer hidden */
@media (min-width: 641px) {
  .nav-bottom, .nav-drawer { display: none !important; }
}

/* Theme-Toggle in der Nav — 44px Touch-Target */
nav .theme-toggle,
.landing-header .theme-toggle {
  background: transparent;
  color: var(--on-dark);
  border: 0;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
nav .theme-toggle:hover,
.landing-header .theme-toggle:hover { color: var(--green); }

/* ── Main-Container ────────────────────────────────────────────── */
main { max-width: 60rem; margin: 1rem auto; padding: 0 1rem; }
h1 { font-size: 1.3rem; }

/* ── Responsive: Mobil-PWA (nach main-Regel, damit padding-bottom greift) ── */
@media (max-width: 640px) {
  /* Top-Nav: nur Brand + Theme bleiben sichtbar */
  nav .nav-inner a.nav-secondary,
  nav .nav-inner a.nav-cta,
  nav .nav-inner .spacer,
  nav .nav-inner .user,
  nav .nav-inner form { display: none; }
  /* Bottom-Bar sichtbar */
  .nav-bottom { display: flex; }
  /* Platz für Bottom-Bar */
  main { padding-bottom: 4.5rem; }
}

/* ── Dashboard-Grid — 2 Spalten auf Desktop, 1 auf Mobil (auto-fit) ── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
  align-items: start;
}
.dash-grid > .full { grid-column: 1 / -1; }

/* ── Dashboard: Hero-Zone (Diktieren — das Herzstück) ──────────── */
.hero-dictate {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.4rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.hero-dictate__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  flex-wrap: wrap;
}
.hero-dictate__text {
  flex: 1;
  min-width: 16rem;
}
.hero-dictate__text h1 {
  font-size: 1.75rem;
  margin: 0 0 0.3rem;
  line-height: 1.2;
}
.hero-dictate__text .muted { margin-bottom: 0.8rem; }
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.65rem 1.4rem;
  font-size: 1.05rem;
}
.hero-dictate__pending {
  display: inline-block;
  margin-left: 0.8rem;
  padding: 0.35rem 0.7rem;
  background: var(--pruef-amber);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--dark);
  text-decoration: none;
  vertical-align: middle;
}
.hero-dictate__pending strong { color: var(--danger); }
[data-theme="dark"] .hero-dictate__pending { background: var(--pruef-amber); }
.hero-dictate__mic {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--interactive-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease;
}
.hero-dictate__mic:hover { background: var(--interactive-green-hover); }

/* ── Dashboard: Attention-Row — "Was braucht deinen Blick?" ────── */
.attention-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.attention-card {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--dark);
  transition: border-color 0.15s ease;
}
.attention-card:hover { border-color: var(--green); }
.attention-card--alert { border-left: 4px solid var(--wine-red); }
.attention-card--review { border-left: 4px solid var(--warn-gelb); }
.attention-card--ok { border-left: 4px solid var(--green); }
.attention-card__count {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--interactive-green);
  min-width: 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attention-card--alert .attention-card__count { color: var(--wine-red); }
.attention-card--review .attention-card__count { color: var(--warn-gelb); }
.attention-card__label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.attention-card__label strong { font-size: 0.95rem; }
.attention-card__label .muted { font-size: 0.8rem; }
.attention-card__link {
  color: var(--muted-grau);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Dashboard: Monitoring-Row — Fristen + Tank (dichter) ──────── */
.monitoring-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: start;
}

/* ── Karten-Überschriften auf h2 heruntergestuft (h1 = Seitentitel) ─ */
.card h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  font-weight: 700;
}

/* ── Bundle-Detail: Status-Banner + Entry-Cards ────────────────── */
.bundle-header {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.bundle-header h1 { margin: 0; }
.bundle-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.transcript {
  white-space: pre-wrap;
  padding: 0.6rem 0.8rem;
  background: var(--bg);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0.4rem 0 0;
}
.review-hint {
  margin-top: 0.8rem;
  padding: 0.5rem 0.8rem;
  background: var(--pruef-amber);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
[data-theme="dark"] .review-hint { background: var(--pruef-amber); }

.entry-card {
  margin-top: 0.8rem;
  padding: 0.8rem 0 0.6rem;
  border-top: 1px dashed var(--border);
}
.entry-card__header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.entry-card__header h2 {
  margin: 0;
  font-size: 1rem;
}
.entry-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.entry-card .muted { margin: 0.2rem 0 0.4rem; font-size: 0.85rem; }

/* ── Korrektur-Details: separat unter den Aktions-Buttons ──────── */
.correct-details {
  margin: 0;
}
.correct-details__summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
/* Form unter den Buttons, hidden bis „Korrigieren" aufgeklappt wird */
.correct-details-form-wrap {
  display: none;
  margin-top: 0.6rem;
}
.entry-card:has(.correct-details[open]) .correct-details-form-wrap {
  display: block;
}
.correct-form {
  padding: 0.6rem 0.8rem;
  background: var(--bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ── Tabellen (Haupt-Daten-Ansicht) ────────────────────────────── */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
}
th, td {
  text-align: left;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
th { background: var(--th-bg); }

/* ── Karten ────────────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ── Status-Flags (Signatur: Wort + Farbe, nie nur Farbe) ───────── */
/* Einheitliche Badge-Größe für alle Status-Flags */
.ok { color: var(--green); font-weight: 700; }
.review-flag,
.confirmed-flag,
.flag-red,
.flag-yellow {
  display: inline-block;
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}
.review-flag {
  background: var(--pruef-amber);
  color: var(--dark);
}
[data-theme="dark"] .review-flag { color: var(--dark); }
.confirmed-flag { background: var(--confirmed-mint); color: var(--dark); }
[data-theme="dark"] .confirmed-flag { color: var(--dark); }
.flag-red { background: var(--danger); color: #fff; }
.flag-yellow { background: var(--warn-gelb); color: var(--dark); }

/* ── Buttons ───────────────────────────────────────────────────── */
/* Hierarchie: button (Basis) → .btn (große CTA, 44px) → .btn-sm (kompakt, 32px)
   Modifikatoren: .ghost (sekundär), .danger (destruktiv) — gelten für ALLE Größen. */

/* Basis: gilt für alle Buttons und .btn-Links. Einheitliche Min-Height, damit
   inline-Buttons in Tabellen/Forms nicht springen. */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--interactive-green);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  min-height: 36px;
  font-weight: 700;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.12s ease, border-color 0.12s ease;
}
button:hover, .btn:hover { background: var(--interactive-green-hover); }

/* Disabled: Pflichtfelder fehlen — nicht klickbar, klar unterscheidbar von ghost */
button:disabled, .btn:disabled {
  background: var(--ghost-bg);
  color: var(--muted-grau);
  cursor: not-allowed;
  opacity: 0.5;
}

/* .btn = primäre Standalone-CTA (Diktieren, Export, Zurück) — 44px Touch-Target */
.btn {
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
}

/* .btn-sm = kompakt (Tabellen, Listen, Inline-Forms) — 32px, kleinere Schrift */
.btn-sm {
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* Modifikator: Ghost (sekundäre Aktion — nicht primär, nicht destruktiv) */
/* Gilt für button.ghost UND .btn.ghost (Link-Buttons) UND .btn-sm.ghost */
button.ghost, .btn.ghost, .btn-sm.ghost {
  background: var(--ghost-bg);
  color: var(--dark);
  border: 1px solid var(--card-border);
}
button.ghost:hover, .btn.ghost:hover, .btn-sm.ghost:hover {
  background: var(--border);
}

/* Modifikator: Danger (destruktiv — Löschen, Verwerfen, Abbrechen) */
button.danger, .btn.danger, .btn-sm.danger {
  background: var(--danger);
  color: #fff;
}
button.danger:hover, .btn.danger:hover, .btn-sm.danger:hover {
  background: var(--danger-hover, #5a1e1e);
}

/* Icon-Only-Button: quadratisch, für Tabellen-Zeilen und kompakte Actions.
   Genau so hoch wie .btn-sm (32px) — nicht kleiner, damit Touch-Target stimmt. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
  vertical-align: middle;
}
.btn-icon.danger { background: var(--danger); color: #fff; }
.btn-icon.danger:hover { background: var(--danger-hover, #5a1e1e); }
.btn-icon.ghost { background: var(--ghost-bg); color: var(--dark); border: 1px solid var(--card-border); }
.btn-icon.ghost:hover { background: var(--border); }

/* Summary als btn-sm darf kein display:inline-flex bekommen (es ist kein Button) */
summary.btn-sm { display: inline; min-height: 0; padding: 0.2rem 0.5rem; }
/* Inline-Form und inline-Details vertikal mittig ausrichten */
form[style*="display:inline"],
details[style*="display:inline"] { vertical-align: middle; }

/* Entry-Aktionen: Freigeben (primär, breit), Korrigieren + Verwerfen kompakt */
.entry-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.entry-actions form { margin: 0; }
.entry-actions .entry-actions__primary {
  flex: 1;
  min-width: 8rem;
}
.entry-actions .entry-actions__primary button {
  width: 100%;
  justify-content: center;
}

/* ── Eingabefelder ──────────────────────────────────────────────── */
input, textarea, select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  width: 100%;
  background: var(--input-bg);
  color: var(--input-text);
  font-family: inherit;
  font-size: 1rem;
}
input::placeholder, textarea::placeholder { color: var(--input-placeholder); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--input-focus);
}
.form-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: end;
}
.error { color: var(--danger-text); }
.muted { color: var(--text-secondary); font-size: 0.85rem; }

/* ── Mikrofon-Taste (Signatur der Diktat-Seite) ────────────────── */
.icon {
  display: inline-flex;
  vertical-align: middle;
  line-height: 0;
  flex-shrink: 0;
}
.icon svg { display: block; }
/* Icon + Text in Buttons: kleiner Abstand */
.icon + span, button .icon + span, .btn .icon + span { margin-left: 0.3rem; }
span + .icon, button span + .icon, .btn span + .icon { margin-left: 0.3rem; }

/* ── Entry: Pflichtfeld-Warnung (freigeben blockiert bis korrigiert) ── */
.entry-missing-warning {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  background: rgba(122, 46, 46, 0.1);
  border-left: 3px solid var(--wine-red);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.85rem;
  margin: 0.4rem 0;
}

/* ── Export-Seite: saubere Liste mit einem Download-Button je Bereich ── */
.export-list {
  max-width: 42rem;
  margin-top: 1rem;
}
.export-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.export-item:last-child { border-bottom: 0; }
.export-item--empty { opacity: 0.55; }
.export-item__info { flex: 1; min-width: 14rem; }
.export-item__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.export-item__info h2 {
  font-size: 1.05rem;
  margin: 0;
}
.export-item__info .muted {
  font-size: 0.85rem;
  margin: 0;
}
.export-item__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.export-item__empty { font-style: italic; }
.export-other-formats {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}

/* Badge für Zeilenanzahl */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.5rem;
  border-radius: var(--radius);
  background: var(--interactive-green);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-family);
}
.badge--muted {
  background: var(--ghost-bg);
  color: var(--muted-grau);
}

/* ── Entry-Korrektur-Formular (aus msgspec-Structs generiert) ───── */
.form-row {
  margin-bottom: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.form-row > label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
}
.form-row-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}
.form-row-checkbox > label {
  font-weight: 400;
  margin: 0;
}
.form-required {
  color: var(--danger);
  font-weight: 700;
}
.form-hint {
  font-size: 0.75rem;
  font-style: italic;
}
.form-group-label {
  color: var(--text-secondary);
  font-weight: 400;
}
.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
  background: var(--bg);
}
.form-fieldset legend {
  font-size: 0.9rem;
  font-weight: 700;
  font-family: var(--font-display);
  padding: 0 0.4rem;
  color: var(--dark);
}
.ref-row {
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 0.4rem;
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.ref-row:last-of-type { border-bottom: 0; }
.kv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
}
.ref-add, .kv-add {
  margin-top: 0.3rem;
  background: transparent;
  color: var(--interactive-green);
  border: 1px dashed var(--input-border);
  width: 100%;
}

/* ── Diktat-Seite: Layout mit mic als Fokus ────────────────────── */
.dictate-panel {
  max-width: 36rem;
  margin: 0 auto;
}
.dictate-mic-zone {
  text-align: center;
  padding: 1.5rem 0 1rem;
}
.dictate-mic-zone .muted {
  margin: 0.6rem 0 0;
}
.dictate-help {
  margin: 0.4rem 0 0.8rem;
  text-align: left;
}
.dictate-help summary {
  cursor: pointer;
  font-size: 0.85rem;
  user-select: none;
}
.dictate-form {
  margin-top: 0.5rem;
}
.dictate-form textarea {
  font-size: 1rem;
  line-height: 1.5;
}
.dictate-form .btn {
  margin-top: 0.6rem;
  width: 100%;
  justify-content: center;
}
.dictate-spinner {
  display: block;
  margin-top: 0.8rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
.dictate-result {
  margin-top: 1rem;
}
.extract-summary {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
}
.extract-summary li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.08));
}
.extract-summary li:last-child {
  border-bottom: none;
}

/* ── Todo-/Reminder-Liste (wiederverwendbares Macro) ───────────── */
/* Grid-„Tabelle": erlaubt die Inline-Bearbeiten-Disclosure, unter der Zeile
   in voller Breite aufzuklappen (in echten <td> würde sie die enge Aktions-
   Zelle sprengen). Sieht wie eine Tabelle aus, verhält sich wie eine Liste. */
.todo-list,
.reminder-list {
  margin: 0.4rem 0;
}
.todo-list__head,
.todo-list__row,
.reminder-list__head,
.reminder-list__row {
  display: grid;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--card-border);
}
.todo-list__head,
.todo-list__row {
  grid-template-columns: 1fr auto auto auto;
}
.reminder-list__head,
.reminder-list__row {
  grid-template-columns: 1fr auto auto;
}
.todo-list__head,
.reminder-list__head {
  background: var(--th-bg);
  font-weight: 700;
  font-size: 0.85rem;
}
.todo-list__task {
  min-width: 0;
  overflow-wrap: anywhere;
}
.row-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
}
/* Erledigte Todos: gedämpft, Aufgabe durchgestrichen — Zustand sichtbar. */
.todo-done {
  opacity: 0.65;
}
.todo-done .todo-list__task {
  text-decoration: line-through;
  color: var(--text-secondary);
}
/* Neutraler Status-Badge für „offen" — bewusst NICHT amber (das ist
   needs_review vorbehalten). Ruhiges Papier-Grau, Wort + Form. */
.status-flag-neutral {
  display: inline-block;
  background: var(--th-bg);
  color: var(--text-secondary);
  border-radius: 4px;
  padding: 0.1rem 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}
/* Inline-Bearbeiten-Disclosure: Form fließt in voller Breite unter die Zeile
   (kein Overlay, kein Schatten — reine Disclosure gemäß DESIGN.md).
   Standardmäßig ausgeblendet; sichtbar, wenn die Zeile davor ein offenes
   <details> enthält (CSS :has() + adjacent-sibling). */
.todo-edit-row {
  display: none;
  padding: 0 0.6rem 0.6rem;
}
.todo-list__row:has(.todo-edit[open]) + .todo-edit-row {
  display: block;
}
.todo-edit__form {
  padding: 0.7rem;
  background: var(--th-bg);
  border-radius: var(--radius);
}

/* ── Bundle-Status-Zeile (Diktat-Ergebnis, Labor) ──────────────── */
.bundle-status-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.transcribe-status {
  margin: 0.8rem 0;
}
.transcribe-status .notify {
  position: static;
  transform: none;
  display: inline-flex;
  border-radius: var(--radius-lg);
  padding: 0.4rem 0.8rem;
}
.transcribe-status .clock {
  color: var(--on-dark);
  margin-right: 0.3rem;
}
/* Transkript fertig: kurze Hervorhebung des Textfelds */
@keyframes transcript-flash {
  0% { background: rgba(90, 122, 58, 0.2); }
  100% { background: var(--input-bg); }
}
textarea.transcript-ready {
  animation: transcript-flash 2s ease-out;
}

.mic {
  font-size: 2.5rem;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  display: block;
  margin: 1rem auto;
  background: var(--green);
  color: #fff;
  border: 0;
  cursor: pointer;
}
.mic.recording { background: var(--danger); animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }

/* ── Uhr (Server-elapsed) für Hintergrund-Verarbeitung ──────────── */
.clock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--green);
}

/* ── Floating-Notification oben ────────────────────────────────── */
.notify {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.notify .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.3; } }

/* ── Toast: Fertigstellungs-Benachrichtigung ───────────────────── */
.toast-area {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast {
  background: var(--surface-dark);
  color: var(--on-dark);
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-lg);
  font-size: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.toast a { color: var(--green); font-weight: 700; }
.toast .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* ── Severity-Stripes (4-px-Links-Strich = Schweregrad, brief-pinned) ──
   Wiederverwendbare Karten-Modifier für Copilot-/Deadlines-Karten. Die
   Inline-Styles in den Templates werden durch diese Klassen ersetzt, damit
   die Severity-Farben theme-bewusst (via Tokens) flippen. */
.card--severity-high { border-left: 4px solid var(--danger); }
.card--severity-medium { border-left: 4px solid var(--warn-gelb); }
.card--severity-info { border-left: 4px solid var(--muted-grau); }
.card--severity-ok { border-left: 4px solid var(--green); }

/* ── Auto-Confirmierte Bundle-Gruppe in der Review-Karte ────────── */
.confirmed-group {
  background: var(--confirmed-mint);
  border-left: 4px solid var(--green);
  opacity: 0.85;
}
[data-theme="dark"] .confirmed-group { background: var(--confirmed-mint); }

/* ── Gap-Liste (Copilot-Karte) — Randnotizen-Stil, keine Bullets ── */
.gap-list {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 0.8rem;
}
.gap-list li {
  padding: 0.4rem 0 0.4rem 0.6rem;
  margin-bottom: 0.3rem;
  border-left: 2px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.gap-list li:last-child { margin-bottom: 0; }
.gap-list li.high { border-left-color: var(--danger); }
.gap-list li.medium { border-left-color: var(--warn-gelb); }
.gap-list li.info { border-left-color: var(--muted-grau); }
.gap-list li .icon { flex-shrink: 0; align-self: center; }

/* ── Open-Questions-Listen — Flag-Chips ohne Bullets ───────────── */
.question-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
}
.question-list li { margin-bottom: 0.3rem; }
.question-list li:last-child { margin-bottom: 0; }

/* ── Verordnungs-Hinweis (Deadlines-Assistent) — 3-px-Severity-Streifen ── */
.reg-hint {
  margin: 0.6rem 0;
  padding: 0.4rem;
  border-left: 3px solid var(--muted-grau);
}
.reg-hint--high { border-left-color: var(--danger); }
.reg-hint--medium { border-left-color: var(--warn-gelb); }
.reg-hint--info { border-left-color: var(--muted-grau); }

/* ── Kalender ──────────────────────────────────────────────────── */
.calendar { table-layout: fixed; }
.calendar td, .calendar th {
  text-align: center;
  padding: 0.3rem;
  border: 1px solid var(--border);
}
.calendar th { background: var(--th-bg); font-size: 0.8rem; }
.cal-day { height: 3rem; vertical-align: top; }
.cal-day.empty { background: #efebdf; }
[data-theme="dark"] .cal-day.empty { background: #181822; }
.cal-day.today { background: #e8f0d8; }
[data-theme="dark"] .cal-day.today { background: #2a3a26; }
.cal-num { font-size: 0.8rem; color: var(--text-secondary); }
.cal-badge {
  background: var(--interactive-green);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.cal-badge:hover { background: var(--interactive-green-hover); }
/* Kalender-Navigation (‹ ›) — klein, nicht 44px */
.cal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.cal-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  min-height: 0;
  font-size: 1.1rem;
  text-decoration: none;
  background: var(--interactive-green);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
}
.cal-nav-btn:hover { background: var(--interactive-green-hover); }

/* ── prefers-reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mic.recording,
  .notify .dot { animation: none; }
}

/* ── Chat-Assistent (CHAT.md) ──────────────────────────────────── */
/* [x-cloak] gehört zum no-FOUC-Base (Alpine), nicht zum Chat — hier nur
   zentraler Haltepunkt, wirkt page-wide. */
[x-cloak] { display: none !important; }

.chat-details__summary {
  display: flex; align-items: center; gap: 0.45rem;
  cursor: pointer; list-style: none;
}
.chat-details__summary::-webkit-details-marker { display: none; }

.chat-hint-btn {
  display: inline-flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
  margin-top: 0.8rem; padding: 0.5rem 0.8rem;
  border: 1px dashed var(--card-border); border-radius: var(--radius);
  background: transparent; color: var(--text-secondary);
  cursor: pointer; font: inherit; text-align: left; max-width: 32rem;
}
.chat-hint-btn:hover { border-color: var(--interactive-green); color: var(--interactive-green); }
.chat-hint-btn strong { color: var(--dark); }

.chat-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.chat-panel__log {
  display: flex; flex-direction: column; gap: 0.6rem;
  max-height: 340px; overflow-y: auto;
  padding: 0.4rem 0.1rem;
}
.chat-panel__hint { margin: 0.3rem 0; }

.chat-msg { display: flex; flex-direction: column; gap: 0.15rem; max-width: 92%; }
.chat-msg--user { align-self: flex-end; align-items: flex-end; }
.chat-msg--assistant { align-self: flex-start; }
.chat-msg__role { font-size: 0.72rem; color: var(--text-secondary); }
.chat-msg__body {
  padding: 0.5rem 0.75rem; border-radius: var(--radius);
  white-space: pre-wrap; line-height: 1.5;
}
.chat-msg--user .chat-msg__body {
  background: var(--interactive-green); color: var(--on-dark);
}
.chat-msg--assistant .chat-msg__body {
  background: var(--ghost-bg); color: var(--dark);
}

.chat-panel__proposals { display: flex; flex-direction: column; gap: 0.5rem; }
.chat-proposal {
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--warn-gelb);   /* pending = bitte entscheiden */
  border-radius: var(--radius-lg); padding: 0.6rem 0.75rem;
  background: var(--card-bg);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.chat-proposal--applied { border-left-color: var(--green); opacity: 0.85; }
.chat-proposal--rejected { border-left-color: var(--muted-grau); opacity: 0.7; }
.chat-proposal__desc { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.chat-proposal__actions { display: flex; gap: 0.5rem; }
.chat-proposal__error { margin: 0; }
.chat-proposal__result { margin: 0; color: var(--interactive-green); font-weight: 600; }

.chat-panel__form { display: flex; gap: 0.4rem; }
.chat-panel__form input { flex: 1; }
.chat-panel__tool-error { margin: 0.2rem 0; font-size: 0.85rem; }

/* „denkt nach"-Indikator lebt IM Log (als kommende Assistenten-Blase),
   nicht unter dem Eingabefeld — so wird er nicht übersehen. */
.chat-panel__thinking {
  display: flex; align-items: center; gap: 0.5rem;
  align-self: flex-start;
  padding: 0.5rem 0.75rem; border-radius: var(--radius);
  background: var(--ghost-bg); color: var(--text-secondary);
  font-size: 0.88rem;
}
.chat-panel__thinking .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--interactive-green);
  animation: chat-pulse 1s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Floating assistant — Schatten im Toast/Notify-Maßstab (nicht schwerer) */
.chat-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 50; }
@media (max-width: 640px) { .chat-fab { bottom: 5rem; } } /* über Bottom-Nav */
.chat-fab__btn {
  width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--interactive-green); color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.chat-fab__btn:hover { background: var(--interactive-green-hover); }
.chat-fab__panel {
  position: absolute; right: 0; bottom: 64px; width: min(380px, 92vw);
  max-height: calc(100dvh - 7rem); display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  padding: 0.85rem 1rem;
}
.chat-fab__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.chat-fab__head strong { display: flex; align-items: center; gap: 0.35rem; }