:root {
  /* BTE Digital Solutions (00 Kontext/Branding.md): Navy plus Gold */
  --navy: #1a365d; --navy-dunkel: #0f2040; --navy-hell: #2a4a7f;
  --gold: #d69e2e; --gold-hell: #f6e05e;
  --tinte: #2d3748; --grau: #5b6673; --linie: #d9dee5; --flaeche: #f7fafc;
  --gruen: #1d7a3e; --rot: #b3382c; --gelb: #9a6b00;
}
* { box-sizing: border-box; }
/* Design-Entscheid Mr. G (05.08.2026): Serifenschrift als Marken-Look der
   BTE-Tools — bewusst Times New Roman wie die Kundenakte, KEIN Geist. */
body { margin: 0; font-family: "Times New Roman", Times, serif; color: var(--tinte); background: var(--flaeche); }
/* Sidebar exakt nach Kundenakte-Spec: w-60, Pill-Items mit Gold-Linksrand,
   E-Mail + Abmelden im Fuß (components/app/nav.tsx + app/(app)/layout.tsx) */
body.app { display: flex; min-height: 100vh; }
.sidebar { background: var(--navy-dunkel); color: #f7fafc; display: flex; flex-direction: column; width: 240px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }
.marke { display: block; padding: 1.25rem 1rem 1rem; }
.logo { width: 100%; max-width: 11rem; display: block; }
.goldlinie { height: 1px; background: rgba(214, 158, 46, 0.7); margin: 0 1rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.5rem 0.5rem; }
.sidebar nav a { color: rgba(247, 250, 252, 0.65); text-decoration: none; font-size: 0.875rem; font-weight: 500; padding: 0.5rem 0.75rem; border-left: 2px solid transparent; border-radius: 8px; transition: background-color 0.15s, color 0.15s; }
.sidebar nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.sidebar nav a.aktiv { background: rgba(255, 255, 255, 0.08); color: #fff; border-left-color: var(--gold); }
.sidebar-fuss { margin-top: auto; }
.fusslinie { height: 1px; background: rgba(255, 255, 255, 0.12); margin: 0 1rem; }
.fussblock { padding: 1rem; font-size: 0.875rem; }
.nutzer-email { color: rgba(247, 250, 252, 0.6); margin-bottom: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-btn { width: 100%; background: none; border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(247, 250, 252, 0.8); border-radius: 8px; padding: 0.375rem 0.75rem; font-size: 0.875rem; font-family: inherit; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.logout-btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
main { flex: 1; overflow-x: auto; padding: 1.5rem; min-width: 0; }

/* Mobil: Sidebar wird zur Kopfleiste mit horizontaler Navigation */
@media (max-width: 860px) {
  body.app { display: block; }
  .sidebar { position: sticky; height: auto; width: auto; z-index: 5; padding-bottom: 0; }
  .marke { padding: 0.7rem 1rem 0.5rem; }
  .logo { max-width: 8.5rem; }
  .goldlinie { margin: 0; }
  .sidebar nav { flex-direction: row; overflow-x: auto; padding: 0.35rem 0.5rem; }
  .sidebar nav a { border-left: none; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; white-space: nowrap; }
  .sidebar nav a.aktiv { border-bottom-color: var(--gold); }
  .sidebar-fuss { position: absolute; top: 0.6rem; right: 0.6rem; margin: 0; }
  .fusslinie, .nutzer-email { display: none; }
  .fussblock { padding: 0; }
  .logout-btn { width: auto; padding: 0.25rem 0.55rem; font-size: 0.74rem; }
  main { padding: 1rem; }
}
h1 { font-size: 1.5rem; font-weight: 600; color: var(--tinte); margin-top: 0; } h2 { font-size: 1.02rem; font-weight: 600; margin-top: 1.5rem; color: var(--tinte); }
a { color: var(--navy-hell); }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.chips.klein .chip { font-size: 0.78rem; }
.chip { padding: 0.35rem 0.7rem; border-radius: 999px; background: #fff; border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; font-size: 0.85rem; }
.chip.aktiv { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Versendet-Chip heller als das Karten-Badge, damit nur der AKTIVE Filter voll Navy ist */
.chip.status-versendet { background: #e8f0fb; color: var(--navy); border-color: #bcd4ef; }
.chip.aktiv { background: var(--navy); color: #fff; border-color: var(--navy); }

.karten { display: flex; flex-direction: column; gap: 0.6rem; }
.karte { display: block; background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 0.8rem 0.9rem; text-decoration: none; color: var(--tinte); margin-bottom: 0.6rem; }
.karte-kopf { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.karte-meta { color: var(--grau); font-size: 0.82rem; margin-top: 0.15rem; }
.karte-text { font-size: 0.88rem; margin-top: 0.35rem; }

.badge { display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.74rem; background: var(--flaeche); border: 1px solid var(--linie); white-space: nowrap; text-decoration: none; }
.status-recherchiert { background: #e8f0fb; color: var(--navy-hell); border-color: #bcd4ef; }
.status-kontaktieren, .status-versandfertig { background: #e6f4ea; color: var(--gruen); border-color: #bfe0c9; }
.status-nachschaerfen, .status-ansprache_entwurf { background: #fdf3d7; color: var(--gelb); border-color: #ecd9a0; }
.status-versendet { background: var(--navy); color: #fff; border-color: var(--navy); }
.status-raus { background: #fbe9e7; color: var(--rot); border-color: #efc3bd; }
.vorgang-entwurf { background: #fdf3d7; color: var(--gelb); }
.vorgang-freigegeben, .vorgang-angenommen { background: #e6f4ea; color: var(--gruen); }
.vorgang-invite_versendet { background: #e8f0fb; color: var(--navy-hell); }
.vorgang-abgeschlossen { background: var(--navy); color: #fff; }
.lauf-done, .push-erledigt, .conf-hart { background: #e6f4ea; color: var(--gruen); }
.lauf-failed, .push-fehler, .conf-niedrig { background: #fbe9e7; color: var(--rot); }
.lauf-queued, .push-offen, .conf-mittel { background: #fdf3d7; color: var(--gelb); }
.conf-gut { background: #e8f0fb; color: var(--navy-hell); }
.adressat { background: var(--navy); color: #fff; border-color: var(--navy); }
.linkedin { background: #e8f0fb; color: #0a66c2; border-color: #bcd4ef; font-weight: 600; }

.fakten { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); border-radius: 10px; }
.fakten th { text-align: left; color: var(--grau); font-weight: 500; width: 38%; }
.fakten th, .fakten td { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--linie); font-size: 0.9rem; vertical-align: top; }

.person { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; }
.belege { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.beleg-feld { font-weight: 600; }
.liste { padding-left: 1.1rem; font-size: 0.9rem; }
.leer { color: var(--grau); }
.warnhinweis { background: #fdf3d7; border: 1px solid #ecd9a0; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.88rem; }
.fehler { background: #fbe9e7; border: 1px solid #efc3bd; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; color: var(--rot); }
.erfolg { background: #e6f4ea; border: 1px solid #bfe0c9; border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.9rem; color: var(--gruen); }
.log { background: #fff; border: 1px solid var(--linie); border-radius: 8px; padding: 0.6rem; font-size: 0.72rem; overflow-x: auto; }
.pfad { margin-bottom: 0.2rem; }
.copytext { background: var(--flaeche); border: 1px dashed var(--linie); border-radius: 8px; padding: 0.6rem; font-size: 0.85rem; white-space: pre-wrap; font-family: inherit; }
.aktionen { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }

.gate details, .person details { margin-bottom: 0.6rem; }
.gate summary, .person summary { list-style: none; cursor: pointer; text-align: center; }
.gate summary::-webkit-details-marker, .person summary::-webkit-details-marker { display: none; }
.gate form, .person details form { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 0.8rem 0.9rem; margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
label { font-size: 0.9rem; display: block; }
textarea, select, input[type="date"], input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
  width: 100%; padding: 0.55rem; border: 1px solid var(--linie); border-radius: 8px; font: inherit; margin-top: 0.25rem; background: #fff; }
[x-cloak] { display: none !important; }
textarea[readonly], input[readonly] { background: var(--flaeche); color: var(--grau); }
.radio { display: block; padding: 0.4rem 0; }
.btn { display: block; width: 100%; padding: 0.75rem 1rem; border-radius: 10px; border: none; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center; }
.btn.klein { padding: 0.45rem 0.8rem; font-size: 0.85rem; width: auto; }
.btn.verlinkt { text-decoration: none; display: block; color: #fff; }
.btn-gruen { background: var(--gruen); color: #fff; }
.btn-rot { background: var(--rot); color: #fff; }
.btn-gelb { background: var(--gelb); color: #fff; }
.btn-grau { background: var(--grau); color: #fff; }
.btn-gold { background: var(--gold); color: var(--navy-dunkel); }
.zuruecksetzen { margin-top: 0.4rem; }

.formular { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; }
.gate-3c { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 860px) { .gate-3c { grid-template-columns: 3fr 2fr; } }
.fakten-panel { background: #fff; border: 1px solid var(--gold); border-radius: 10px; padding: 0.9rem; }
.fakten-panel h2 { margin-top: 0.2rem; }
.adresse { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: 0.5rem; }

/* Login im Kundenakte-Stil: helle Seite, Navy-Logo, weiße Karte mit Gold-Oberkante */
.login-seite { background: var(--flaeche); min-height: 100vh; margin: 0; }
.login-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 1rem; }
.login-logo { width: min(70vw, 256px); display: block; }
.login-card { background: #fff; border: 1px solid var(--linie); border-top: 2px solid var(--gold); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 32, 64, 0.08); padding: 1.4rem 1.5rem 1.5rem; width: min(92vw, 384px); }
.login-card h1 { font-size: 1.05rem; color: var(--tinte); margin: 0 0 1rem; }
.login-card label { font-size: 0.88rem; font-weight: 500; margin-top: 0.8rem; }
.login-card .btn { margin-top: 1.1rem; }
.login-card .fehler { margin-bottom: 0.4rem; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hell); }