/* Version 1.8: dunkles Design in Graphit mit Rosé-Rot-Akzent (Standard). Helles Design über das Konto-Menü. */
:root[data-thema="dunkel"] {
  --papier: #0F1519; --flaeche: #172026; --tinte: #E6EEF0; --grau: #93A3AA; --linie: #2A363D;
  --petrol: #E26D7A; --petrol-hell: #3D1F25; --rot: #FFA25E; --rot-hell: #3A2A1A;
  --gold-1: #F08A95; --gold-2: #A8394A; --akzent-text: #FFFFFF;
  --schatten: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}
:root[data-thema="hell"] { --gold-1: #2A8A80; --gold-2: #17605A; --akzent-text: #fff; }
:root[data-thema="dunkel"] body {
  background: radial-gradient(1200px 600px at 50% -10%, #2A1E26 0%, rgba(15, 21, 25, 0) 70%), var(--papier);
  background-attachment: fixed;
}
:root[data-thema="dunkel"] .kopf { background: rgba(15, 21, 25, .85); backdrop-filter: blur(8px); border-bottom-color: #202B31; }
:root[data-thema="dunkel"] .nav a { color: #C9D5D9; font-weight: 600; font-size: 14.5px; }
:root[data-thema="dunkel"] .nav a:hover { background: #1C272D; color: #fff; }
:root[data-thema="dunkel"] .nav a.aktiv { background: none; color: #fff; box-shadow: inset 0 -2px 0 var(--petrol); border-radius: 0; }

/* Akzentflächen mit dunkler Schrift */
:root[data-thema="dunkel"] .knopf { background: linear-gradient(180deg, #E8737F, #C9495A); border-color: #C9495A; color: var(--akzent-text); font-weight: 600; }
:root[data-thema="dunkel"] .frage div { background: #3D1F25; color: var(--tinte); border: 1px solid #5A2A33; }
:root[data-thema="dunkel"] .zaehler, :root[data-thema="dunkel"] .glocke-zahl { background: #F2A65A; color: #1E1408; }
:root[data-thema="dunkel"] .art { background: #3D1F25; color: #F2A0A9; }
:root[data-thema="dunkel"] .art-mandant { background: #1E2A30; color: var(--tinte); }
:root[data-thema="dunkel"] mark { background: #5A2A33; }
:root[data-thema="dunkel"] .balken { background: #2A363D; }
:root[data-thema="dunkel"] .balken span { background: linear-gradient(90deg, #C9495A, #F08A95); }
:root[data-thema="dunkel"] #kontingent-text { color: #F08A95; }
:root[data-thema="dunkel"] .kontingent { border: 1px solid var(--linie); border-radius: 20px; padding: 5px 12px; background: #131B20; }

/* Markenzeichen: Goldkachel */
.monogramm { background: linear-gradient(145deg, var(--gold-1), var(--gold-2)); color: var(--akzent-text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.hero-monogramm { width: 76px; height: 76px; font-size: 46px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.hero-logo { width: 76px; height: 76px; border-radius: 16px; }
.hero h1 { font-size: 30px; letter-spacing: -.01em; }
:root[data-thema="dunkel"] .hero h1 { color: #fff; }
:root[data-thema="dunkel"] .hero h1 .ai { color: var(--petrol); }
:root[data-thema="dunkel"] .hero-zeile span:first-child { color: #fff; }

/* Kopfzeile: Menüknopf, Chats als ausklappbare Leiste */
.menueknopf { border: 0; background: none; color: var(--grau); cursor: pointer; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; margin-right: -8px; }
.menueknopf:hover { background: var(--papier); color: var(--tinte); }
.verlauf { position: fixed; top: 57px; bottom: 0; left: 0; z-index: 40; width: 300px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, .3); }
body.verlauf-offen .verlauf { transform: none; }
@media (max-width: 760px) { .verlauf { display: flex; } }
@media (prefers-reduced-motion: reduce) { .verlauf { transition: none; } }

/* Startseite breiter, „Heute“ rechts daneben */
.chat.startmodus .spalte, .chat.startmodus .vorlagen, .start-unten > * { max-width: 1000px; }
.chat.startmodus .nachrichten { padding-top: 9vh; }
.chat.startmodus .eingabe .spalte { border-radius: 18px; padding: 16px 16px 12px; }
:root[data-thema="dunkel"] .eingabe .spalte { background: #141D22; border-color: #2A363D; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
:root[data-thema="dunkel"] .eingabe .spalte:focus-within { border-color: #6B3540; }
:root[data-thema="dunkel"] .stufen { background: #1E2A30; }
:root[data-thema="dunkel"] .stufen button.aktiv { background: #2E4048; color: #fff; }
:root[data-thema="dunkel"] .stufen button small { color: #A59B8D; }
.chat.startmodus { position: relative; }
@media (min-width: 1500px) {
  .chat.startmodus .heute { position: absolute; top: 72px; right: 32px; width: 340px; max-width: 340px; margin: 0; grid-template-columns: 1fr 1fr; }
  .chat.startmodus .heute .fristen-karte { grid-column: 1 / -1; grid-row: auto; }
  .chat.startmodus .start-unten { padding-top: 22px; }
}
.heute-karte { border-radius: 16px; }
.bib-karte { border-radius: 16px; padding: 16px 18px; }
:root[data-thema="dunkel"] .bib-karte, :root[data-thema="dunkel"] .heute-karte { background: linear-gradient(180deg, #1A242A, #141D22); }
:root[data-thema="dunkel"] .bib-karte:hover { border-color: #6B3540; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
:root[data-thema="dunkel"] .bib-icon { background: #301A1F; color: #F08A95; border: 1px solid #2A363D; }
.bib-tabs { border-radius: 22px; padding: 3px; }
.bib-tabs button { border-radius: 18px; }
:root[data-thema="dunkel"] .bib-suche { background: #141D22; border-radius: 14px; }
:root[data-thema="dunkel"] .startvorschlaege button, :root[data-thema="dunkel"] .beispiele button { background: #141D22; }

/* Karten und Tabellen im dunklen Design */
:root[data-thema="dunkel"] .seite .karte, :root[data-thema="dunkel"] .agent, :root[data-thema="dunkel"] .meldung,
:root[data-thema="dunkel"] .idee, :root[data-thema="dunkel"] .treffer, :root[data-thema="dunkel"] .kennzahlen,
:root[data-thema="dunkel"] .antwort, :root[data-thema="dunkel"] .programme > div { background: linear-gradient(180deg, #1A242A, #141D22); border-color: #25323A; }
:root[data-thema="dunkel"] .treffer li[data-i]:hover, :root[data-thema="dunkel"] .verlauf li a:hover { background: #1E2A30; }
:root[data-thema="dunkel"] .verlauf li a.aktiv, :root[data-thema="dunkel"] .mandanten-liste li a.aktiv { background: #1E2A31; }
:root[data-thema="dunkel"] .meldung { border-left-color: #E26D7A; }
:root[data-thema="dunkel"] .meldung.gelesen { border-left-color: #25323A; }
:root[data-thema="dunkel"] .db-balken { background: #2C3A42; }
:root[data-thema="dunkel"] .db-balken.neg { background: #4A3320; }
:root[data-thema="dunkel"] .stimme.gewaehlt { background: #3D1F25; }
:root[data-thema="dunkel"] .status.s-umgesetzt { background: #1D3A2A; color: #9EE0B8; }
:root[data-thema="dunkel"] dialog { background: #172026; border-color: #2A363D; }
:root[data-thema="dunkel"] .neu-marke { background: none; color: #F2A65A; padding: 0; letter-spacing: .06em; text-transform: uppercase; }
:root[data-thema="dunkel"] .punkt { background: #F2A65A; }
:root[data-thema="dunkel"] .cursor::after { color: var(--petrol); }
:root[data-thema="dunkel"] .antwort .text code, :root[data-thema="dunkel"] .antwort .text pre { background: #0F1519; }
.fristen-karte li > span { min-width: 0; }
:root[data-thema="dunkel"] .aging-legende i[style*="--petrol"] { background: #E26D7A; }