/* Curry – Gestaltung. Dunkel als Standard, Hell über [data-theme="light"]. */

:root {
  --grund:        #100e0c;
  --grund-2:      #17150f;
  --flaeche:      #1d1a15;
  --flaeche-2:    #24201a;
  --rand:         #2f2a22;
  --rand-hell:    #3d372c;
  --text:         #f0ece4;
  --text-2:       #b3aa9a;
  --text-3:       #7d7566;
  --akzent:       #e8a33d;
  --akzent-weich: #f2c67d;
  --akzent-dunkel:#8a5f18;
  --positiv:      #e2703a;   /* positive Korrelation: warm */
  --negativ:      #3d9bb5;   /* negative Korrelation: kühl */
  --gut:          #6fbf8b;
  --warn:         #e0b341;
  --fehler:       #e0685f;
  --schatten:     0 10px 34px rgba(0, 0, 0, .45);
  --radius:       14px;
  --radius-klein: 9px;
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
  --grund:        #f7f4ee;
  --grund-2:      #f1ece3;
  --flaeche:      #ffffff;
  --flaeche-2:    #f6f2ea;
  --rand:         #e2dccf;
  --rand-hell:    #d2cabb;
  --text:         #1e1a14;
  --text-2:       #5d5546;
  --text-3:       #8b8172;
  --akzent:       #b8761a;
  --akzent-weich: #8a5a12;
  --akzent-dunkel:#f0dcb6;
  --positiv:      #c4531f;
  --negativ:      #1f7a94;
  --schatten:     0 8px 26px rgba(60, 45, 20, .12);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(232, 163, 61, .10), transparent 62%),
    var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.012em; }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.06rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 .6rem; }
a  { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Kopfzeile */
.kopfzeile {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.4rem;
  background: color-mix(in srgb, var(--grund) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rand);
}
.marke { display: flex; align-items: center; gap: .6rem; color: var(--text); text-decoration: none; }
.marke:hover { text-decoration: none; }
.marke-punkt {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--akzent-weich), var(--akzent) 55%, var(--akzent-dunkel));
  box-shadow: 0 0 16px rgba(232, 163, 61, .5);
}
.marke-punkt.gross { width: 30px; height: 30px; }
.marke-name { font-weight: 650; letter-spacing: -.02em; font-size: 1.06rem; }
.marke-zusatz { color: var(--text-3); font-size: .82rem; padding-left: .55rem; border-left: 1px solid var(--rand-hell); }
.kopf-nav { display: flex; align-items: center; gap: .5rem; }
.kopf-nutzer { color: var(--text-2); font-size: .84rem; }
.inline-form { display: inline; }

/* ------------------------------------------------------------------ Knöpfe */
.knopf, .knopf-schlicht {
  font: inherit; font-size: .86rem; cursor: pointer;
  border-radius: var(--radius-klein); border: 1px solid var(--rand-hell);
  background: var(--flaeche); color: var(--text);
  padding: .44rem .8rem; transition: background .15s, border-color .15s, transform .1s;
}
.knopf:hover, .knopf-schlicht:hover { background: var(--flaeche-2); border-color: var(--akzent); }
.knopf:active { transform: translateY(1px); }
.knopf-schlicht { background: transparent; border-color: transparent; color: var(--text-2); }
.knopf-schlicht:hover { color: var(--text); background: var(--flaeche); }
.knopf.haupt {
  background: linear-gradient(180deg, var(--akzent-weich), var(--akzent));
  border-color: var(--akzent); color: #201703; font-weight: 620;
}
.knopf.haupt:hover { filter: brightness(1.06); }
.knopf.breit { width: 100%; justify-content: center; padding: .62rem; font-size: .95rem; }
.knopf:disabled { opacity: .5; cursor: not-allowed; }
.knopf.klein { padding: .28rem .55rem; font-size: .78rem; }
.knopf.gefahr:hover { border-color: var(--fehler); color: var(--fehler); }

/* ------------------------------------------------------------------ Felder */
.feld { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .85rem; }
.feld > span { font-size: .78rem; color: var(--text-2); letter-spacing: .01em; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  font: inherit; font-size: .9rem;
  background: var(--grund-2); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  padding: .48rem .62rem; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
  linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 1.8rem; }
.schalter { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-2); cursor: pointer; }
.schalter input { accent-color: var(--akzent); width: 16px; height: 16px; }

/* ----------------------------------------------------------------- Login */
.seite-login { display: grid; place-items: center; }
.login-huelle { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; width: 100%; }
.login-karte {
  width: min(420px, 100%); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: var(--radius);
  padding: 1.9rem; box-shadow: var(--schatten);
}
.login-marke { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.5rem; }
.login-marke h1 { font-size: 1.5rem; }
.login-marke p { color: var(--text-3); font-size: .8rem; margin: .15rem 0 0; }
.login-fuss { color: var(--text-3); font-size: .78rem; text-align: center; margin: 1rem 0 0; }

/* --------------------------------------------------------------- Meldungen */
.meldung {
  border-radius: var(--radius-klein); padding: .55rem .75rem; font-size: .85rem;
  border: 1px solid var(--rand); background: var(--flaeche-2); margin-bottom: .9rem;
}
.meldung.fehler { border-color: color-mix(in srgb, var(--fehler) 55%, var(--rand)); color: var(--fehler); }
.meldung.warn   { border-color: color-mix(in srgb, var(--warn) 50%, var(--rand)); color: var(--warn); }
.meldung.gut    { border-color: color-mix(in srgb, var(--gut) 50%, var(--rand)); color: var(--gut); }

/* ----------------------------------------------------------------- Layout */
.inhalt { padding: 1.2rem 1.4rem 4rem; }
.werkbank { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1080px) { .werkbank { grid-template-columns: 1fr; } }

.karte {
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: var(--radius); padding: 1.05rem; box-shadow: var(--schatten);
}
.karte + .karte { margin-top: 1rem; }
.karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.karte-kopf h2 { display: flex; align-items: center; gap: .5rem; }
.karte-titel-zusatz { color: var(--text-3); font-size: .78rem; font-weight: 400; }
.seitenleiste { position: sticky; top: 4.2rem; }

/* ------------------------------------------------------------------ Chips */
.chip-liste { display: flex; flex-wrap: wrap; gap: .38rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-radius: 999px; padding: .22rem .5rem .22rem .62rem; font-size: .8rem;
}
.chip .sym { font-family: var(--mono); font-size: .76rem; color: var(--akzent); }
.chip .weg {
  border: none; background: none; color: var(--text-3); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .1rem;
}
.chip .weg:hover { color: var(--fehler); }
.chip.aktiv { border-color: var(--akzent); background: color-mix(in srgb, var(--akzent) 14%, var(--flaeche-2)); }

/* ------------------------------------------------------------- Suchtreffer */
.trefferliste { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.trefferliste li {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .4rem .5rem; border-radius: var(--radius-klein); cursor: pointer;
}
.trefferliste li:hover { background: var(--flaeche-2); }
.treffer-name { font-size: .82rem; }
.treffer-meta { color: var(--text-3); font-size: .72rem; font-family: var(--mono); }

/* -------------------------------------------------------------- Steuerung */
.steuerleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; align-items: end; }
.steuerleiste .feld { margin-bottom: 0; }

/* ------------------------------------------------------------------ Kacheln */
.kachelreihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem .9rem; }
.kachel .kachel-label { color: var(--text-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.kachel .kachel-wert { font-size: 1.42rem; font-weight: 640; font-variant-numeric: tabular-nums; margin-top: .18rem; }
.kachel .kachel-zusatz { color: var(--text-2); font-size: .78rem; }

/* ------------------------------------------------------------------ Tabelle */
.tabellen-huelle { overflow-x: auto; border-radius: var(--radius-klein); border: 1px solid var(--rand); }
table.gitter { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.gitter th, table.gitter td { padding: .5rem .6rem; text-align: right; white-space: nowrap; }
table.gitter thead th {
  position: sticky; top: 0; background: var(--flaeche-2); color: var(--text-2);
  font-weight: 560; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--rand); z-index: 2;
}
table.gitter tbody tr { border-bottom: 1px solid color-mix(in srgb, var(--rand) 60%, transparent); }
table.gitter tbody tr:last-child { border-bottom: none; }
table.gitter tbody tr:hover { background: color-mix(in srgb, var(--akzent) 6%, transparent); }
table.gitter td.titel, table.gitter th.titel {
  text-align: left; position: sticky; left: 0; background: var(--flaeche); z-index: 1;
  border-right: 1px solid var(--rand); min-width: 190px; white-space: normal;
}
table.gitter thead th.titel { background: var(--flaeche-2); z-index: 3; }
tr:hover td.titel { background: color-mix(in srgb, var(--akzent) 6%, var(--flaeche)); }
.zell-name { font-weight: 560; }
.zell-meta { color: var(--text-3); font-size: .72rem; font-family: var(--mono); }
.zahl { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .82rem; }
.korr-zelle { border-radius: 5px; padding: .28rem .42rem !important; }
.klein-n { color: var(--text-3); font-size: .68rem; display: block; font-family: var(--mono); }
.stern { color: var(--akzent); }
.zeile-aktiv td { background: color-mix(in srgb, var(--akzent) 10%, transparent) !important; }

/* ------------------------------------------------------------------ Diagramme */
.diagramm { width: 100%; height: 340px; }
.diagramm.hoch { height: 420px; }
.diagramm-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .diagramm-paar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ Reiter */
.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--rand); margin-bottom: .9rem; flex-wrap: wrap; }
.reiter button {
  font: inherit; font-size: .84rem; background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: .45rem .7rem; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.reiter button:hover { color: var(--text); }
.reiter button.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }

/* --------------------------------------------------------------- Hinweise */
.hinweisliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hinweisliste li {
  display: flex; gap: .55rem; font-size: .84rem; color: var(--text-2);
  background: var(--flaeche-2); border: 1px solid var(--rand);
  border-left: 3px solid var(--akzent); border-radius: var(--radius-klein); padding: .5rem .7rem;
}
.hinweisliste li.warnung { border-left-color: var(--warn); }
.hinweisliste li::before { content: "i"; font-family: var(--mono); color: var(--akzent); font-size: .8rem; }
.hinweisliste li.warnung::before { content: "!"; color: var(--warn); }

/* ---------------------------------------------------------------- Einschätzung */
.llm-block { display: grid; gap: .8rem; }
.llm-kern {
  font-size: 1rem; line-height: 1.6; color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--akzent) 12%, var(--flaeche-2)), var(--flaeche-2));
  border: 1px solid color-mix(in srgb, var(--akzent) 30%, var(--rand));
  border-radius: var(--radius-klein); padding: .9rem 1rem;
}
.befund { border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .7rem .85rem; background: var(--flaeche-2); }
.befund h4 { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.befund p { color: var(--text-2); font-size: .86rem; margin: 0; }
.marke-bewertung {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .1rem .42rem; border-radius: 999px; border: 1px solid var(--rand-hell); color: var(--text-2);
}
.marke-bewertung.hoch { color: var(--positiv); border-color: color-mix(in srgb, var(--positiv) 50%, var(--rand)); }
.marke-bewertung.mittel { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--rand)); }
.marke-bewertung.negativ { color: var(--negativ); border-color: color-mix(in srgb, var(--negativ) 50%, var(--rand)); }
.llm-fuss { color: var(--text-3); font-size: .74rem; }

/* ------------------------------------------------------------------ Sonstiges */
.leer { color: var(--text-3); font-size: .85rem; text-align: center; padding: 2.4rem 1rem; }
.lade { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-2); font-size: .85rem; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--rand-hell); border-top-color: var(--akzent);
  animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
.verborgen { display: none !important; }
.trennlinie { height: 1px; background: var(--rand); margin: 1rem 0; border: none; }
.legende { display: flex; align-items: center; gap: .5rem; color: var(--text-3); font-size: .74rem; }
.legende .balken {
  width: 130px; height: 9px; border-radius: 999px;
  background: linear-gradient(90deg, var(--negativ), var(--flaeche-2) 50%, var(--positiv));
  border: 1px solid var(--rand);
}
.gruppen-titel { color: var(--text-3); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin: .7rem 0 .3rem; }
details.preset > summary {
  cursor: pointer; font-size: .84rem; color: var(--text-2); padding: .3rem 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.preset > summary::-webkit-details-marker { display: none; }
details.preset > summary::after { content: "+"; color: var(--text-3); }
details.preset[open] > summary::after { content: "–"; }
details.preset > summary:hover { color: var(--text); }

/* ---------------------------------------------------------- Gruppierung */
:root {
  --gruppe-1: #e8a33d; --gruppe-2: #4aa3c4; --gruppe-3: #7fb84e; --gruppe-4: #c77dd6;
  --gruppe-5: #e2704a; --gruppe-6: #4fc2b0; --gruppe-7: #d9c04a; --gruppe-8: #d66a8f;
}

.sortierleiste { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.mini-feld { display: flex; flex-direction: column; gap: .18rem; }
.mini-feld > span { font-size: .7rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.mini-feld select { padding: .3rem 1.6rem .3rem .5rem; font-size: .82rem; }

.gruppen-gitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: .7rem; }
.gruppen-karte {
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  background: var(--flaeche-2); padding: .7rem .8rem; border-top: 3px solid var(--gruppe);
}
.gruppen-karte h4 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .86rem; }
.gruppen-karte .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--gruppe); display: inline-block; margin-right: .4rem; }
.gruppen-kennzahl { display: flex; justify-content: space-between; font-size: .76rem; color: var(--text-2); margin-top: .35rem; }
.gruppen-kennzahl b { font-family: var(--mono); font-weight: 600; color: var(--text); }
.gruppen-mitglieder { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.gruppen-mitglieder .chip { font-size: .74rem; padding: .16rem .48rem; }
.gruppen-mitglieder .chip.vertreter { border-color: var(--gruppe); }

.gruppen-marke {
  display: inline-block; width: 4px; height: 30px; border-radius: 2px;
  background: var(--gruppe); margin-right: .55rem; vertical-align: middle;
}
.chip.gruppiert { border-left: 3px solid var(--gruppe); }

.dendro { width: 100%; min-height: 340px; }
.dendro svg { width: 100%; height: auto; display: block; }
.dendro .ast { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dendro .schnitt { stroke: var(--rand-hell); stroke-width: 1; stroke-dasharray: 4 4; }
.dendro .blatt { font-size: 11px; fill: var(--text-2); }
.dendro .blatt.kandidat { fill: var(--akzent); font-weight: 600; }
.dendro .achse { font-size: 10px; fill: var(--text-3); }
table.gitter th.sortierbar { cursor: pointer; user-select: none; }
table.gitter th.sortierbar:hover { color: var(--akzent); }

/* -------------------------------------------------------- Klappbare Karten */
.karte.klappbar { padding: 0; }
.karte.klappbar > details > summary {
  cursor: pointer; list-style: none; padding: 1.05rem;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.karte.klappbar > details > summary::-webkit-details-marker { display: none; }
.karte.klappbar > details > summary::after {
  content: "▾"; margin-left: auto; color: var(--text-3); transition: transform .15s;
}
.karte.klappbar > details[open] > summary::after { transform: rotate(180deg); }
.karte.klappbar > details > summary:hover h2 { color: var(--akzent); }
.karte.klappbar > details > *:not(summary) { padding: 0 1.05rem 1.05rem; }

/* ------------------------------------------------------------------- Chat */
.chat-verlauf { display: grid; gap: .6rem; margin-bottom: .8rem; max-height: 560px; overflow-y: auto; }
.chat-eintrag { border-radius: var(--radius-klein); padding: .6rem .8rem; font-size: .88rem; }
.chat-eintrag.nutzer {
  background: color-mix(in srgb, var(--akzent) 12%, var(--flaeche-2));
  border: 1px solid color-mix(in srgb, var(--akzent) 28%, var(--rand));
  margin-left: 12%;
}
.chat-eintrag.assistent {
  background: var(--flaeche-2); border: 1px solid var(--rand); margin-right: 6%;
  white-space: pre-wrap; line-height: 1.6; color: var(--text-2);
}
.chat-kopf {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3); margin-bottom: .3rem;
}
.chat-kopf .knopf { padding: .1rem .4rem; font-size: .68rem; text-transform: none; letter-spacing: 0; }
.chat-eingabe { display: flex; gap: .5rem; align-items: flex-end; }
.chat-eingabe textarea {
  flex: 1; font: inherit; font-size: .88rem; resize: vertical; min-height: 46px;
  background: var(--grund-2); color: var(--text);
  border: 1px solid var(--rand); border-radius: var(--radius-klein); padding: .5rem .62rem;
}
.chat-eingabe textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent);
}
.kopiert { color: var(--gut) !important; border-color: var(--gut) !important; }

/* --------------------------------------------------------------- Hilfetexte */
.hilfe-knopf {
  width: 15px; height: 15px; padding: 0; margin-left: .3rem;
  border-radius: 50%; border: 1px solid var(--rand-hell);
  background: transparent; color: var(--text-3);
  font-size: .64rem; line-height: 1; cursor: pointer; vertical-align: middle;
}
.hilfe-knopf:hover, .hilfe-knopf.aktiv {
  border-color: var(--akzent); color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}
.hilfe-box {
  margin-top: .85rem; padding: .8rem .95rem; font-size: .85rem; line-height: 1.6;
  color: var(--text-2); background: var(--flaeche-2);
  border: 1px solid var(--rand); border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein);
}
.hilfe-box h4 { color: var(--text); margin-bottom: .35rem; font-size: .9rem; }
.hilfe-box p { margin: 0 0 .5rem; }
.hilfe-box p:last-child { margin-bottom: 0; }
.hilfe-box b { color: var(--text); }
.hilfe-box .schliessen { float: right; margin-left: .6rem; }

/* ------------------------------------------------------------- Listenpflege */
.listen-aktionen { display: flex; gap: .4rem; margin: -.35rem 0 .8rem; }
.listen-aktionen .knopf { flex: 1; }
.listen-form { display: grid; gap: .45rem; margin-bottom: .8rem; }
.listen-form-knoepfe { display: flex; gap: .4rem; }
.listen-form-knoepfe .knopf { flex: 1; }