/* Kontrollzentrum — Design-System (portiert aus Mockup v8, Variante A „Atelier Glass") */

:root{
  --berry:#8B1A6B; --berry-soft:#A84A8A; --berry-glow:#C558A8;
  --gold:#C8A55B; --orange:#C2552E;
  --ok:#2E7D5B; --warn:#B8860B; --crit:#B3382E;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:"Avenir Next","Helvetica Neue",-apple-system,sans-serif;
  font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.num{font-family:ui-monospace,"SF Mono",Menlo,monospace; font-variant-numeric:tabular-nums}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
input{font:inherit}

/* Masken-Toggle (Sales/Kosten) */
.maskable{transition:filter .25s}
body.masked .maskable{filter:blur(11px)}
.eye{opacity:.55; font-size:13px; padding:2px 6px; border-radius:6px}
.eye:hover{opacity:1}

/* Sparkline */
.spark{display:block}
.spark .area{opacity:.13}
.spark .dot{r:3}

/* Status-Punkte */
.procs{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.proc{display:flex; gap:6px; align-items:center; font-size:12px; opacity:.75}
.proc i{width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block}
.proc.idle i{background:#9aa0a6}

.check{width:19px; height:19px; border-radius:6px; border:1.5px solid currentColor; opacity:.4;
  display:inline-flex; align-items:center; justify-content:center; font-size:12px; flex:none;
  transition:all .18s}
.check.done{background:var(--ok); border-color:var(--ok); color:#fff; opacity:1}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* ============ ATELIER GLASS (hell + Nacht) ============ */
body{
  --card:rgba(255,255,255,.55); --cardline:rgba(110,84,100,.42);
  --cardshadow:0 10px 36px rgba(46,26,40,.14), inset 0 1px 0 rgba(255,255,255,.95);
  --sheen:linear-gradient(115deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%);
  --line-soft:rgba(28,20,26,.18);
  --ink:#241F26; --mut:#5F5661; --mut2:#8A8090;
  --chipline:rgba(28,20,26,.18); --chipink:#544C56;
  --accent:var(--berry); --accent-line:var(--berry-soft);
  --goldink:#A8853F;
  --bubble-me:rgba(139,26,107,.12); --bubble-cl:rgba(255,255,255,.55);
  --workbg:rgba(255,248,228,.5); --workline:rgba(200,165,91,.8);
  --inputbg:rgba(255,255,255,.55); --fillbg:rgba(28,20,26,.12);
  --blob1:rgba(168,74,138,.42); --blob2:rgba(200,165,91,.48); --blob3:rgba(122,101,196,.3);
  background:#F4F1EC; color:var(--ink);
  position:relative;
  transition:background .3s, color .3s;
}
body.night{
  --card:rgba(30,25,36,.58); --cardline:rgba(255,255,255,.30);
  --cardshadow:0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
  --sheen:linear-gradient(115deg, rgba(255,255,255,.13), rgba(255,255,255,0) 42%);
  --line-soft:rgba(255,255,255,.17);
  --ink:#F0EBF3; --mut:#BDB5C6; --mut2:#8F869B;
  --chipline:rgba(255,255,255,.18); --chipink:#D4CCDD;
  --accent:#C558A8; --accent-line:#C558A8;
  --goldink:#D8B978;
  --bubble-me:rgba(197,88,168,.2); --bubble-cl:rgba(255,255,255,.07);
  --workbg:rgba(66,54,30,.35); --workline:rgba(200,165,91,.5);
  --inputbg:rgba(255,255,255,.06); --fillbg:rgba(255,255,255,.12);
  --blob1:rgba(139,26,107,.6); --blob2:rgba(200,165,91,.32); --blob3:rgba(96,72,190,.4);
  background:#121017;
}
/* Flüssige Farbfelder, die hinter dem Glas treiben.
   fixed statt absolute: body darf nicht overflow:hidden bekommen (Seite muss scrollen) */
body::before, body::after{
  content:""; position:fixed; inset:-22%; z-index:0; pointer-events:none;
  filter:blur(44px);
}
body::before{
  background:
    radial-gradient(36% 30% at 20% 14%, var(--blob1), transparent 70%),
    radial-gradient(30% 26% at 84% 10%, var(--blob2), transparent 70%);
  animation:blobA 26s ease-in-out infinite alternate;
}
body::after{
  background:
    radial-gradient(32% 28% at 68% 72%, var(--blob3), transparent 70%),
    radial-gradient(28% 24% at 32% 86%, var(--blob1), transparent 72%);
  animation:blobB 34s ease-in-out infinite alternate;
}
@keyframes blobA{from{transform:translate(0,0) scale(1)} to{transform:translate(6%,5%) scale(1.14)}}
@keyframes blobB{from{transform:translate(0,0) scale(1.1)} to{transform:translate(-5%,-6%) scale(1)}}
/* Glanz auf der Glasoberfläche */
body .kpi::before, body .card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:var(--sheen); pointer-events:none;
}
/* Bild-Modus: Foto hinter dem Glas */
body.wall::before{
  background:url('/static/img/wallpaper.jpg') center/cover no-repeat;
  inset:-4%; filter:blur(14px) saturate(1.25); animation:none;
}
body.wall::after{display:none}
body.wall:not(.night)::before{filter:blur(14px) saturate(1.12) brightness(1.22)}
body.night.wall::before{filter:blur(14px) saturate(1.1) brightness(.42)}
/* Lesbarkeit über dem Bild: Karten deckender, Kopf wird Glasleiste */
body.wall:not(.night){--card:rgba(255,255,255,.68); --mut:#554C57; --mut2:#7E7484}
body.night.wall{--card:rgba(26,22,32,.58)}
body.wall header{
  background:var(--card); border:1.5px solid var(--cardline); border-radius:16px;
  padding:12px 16px; box-shadow:var(--cardshadow);
  -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6);
}
/* Herzstück-Hervorhebung: Jetzt dran */
body .card.hot{border:1.5px solid color-mix(in srgb, var(--accent) 60%, transparent)}
body .card.hot h2{color:var(--accent); justify-content:flex-start; gap:7px}
body .card.hot h2::before{content:"●"; font-size:8px}
body.night .card.hot{box-shadow:var(--cardshadow), 0 0 36px rgba(197,88,168,.16)}
/* Blume des Lebens — nur erahnbar, zwischen Grund und Glas */
body .fol{
  position:fixed; z-index:0; pointer-events:none;
  top:46%; left:50%; width:1180px; height:1180px; max-width:160vw;
  transform:translate(-50%,-50%);
  color:var(--berry); opacity:.055;
}
body.night .fol{color:#C558A8; opacity:.09}
body.wall:not(.night) .fol{color:#FFF; opacity:.14}
body.night.wall .fol{color:#EAB8DC; opacity:.11}
body .fol svg{width:100%; height:100%; display:block}
body.night .goal .n{text-shadow:0 0 18px rgba(197,88,168,.55)}
body.night .kpi .spark .dot{filter:drop-shadow(0 0 4px rgba(197,88,168,.9))}
body.night .act.primary, body.night .kipp button{box-shadow:0 0 22px rgba(197,88,168,.35)}
body.night h1 em{text-shadow:0 0 22px rgba(197,88,168,.45)}
body .wrap{position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:26px 28px 110px}
body header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px}
body h1{font-size:21px; font-weight:600; letter-spacing:-.01em}
body h1 em{font-style:normal; color:var(--accent)}
body .date{color:var(--mut); font-size:13px}
body .mode{font-size:15px; padding:4px 9px; border-radius:9px; border:1px solid var(--chipline); line-height:1}
body .mode:hover{border-color:var(--accent)}
body .quote{display:flex; align-items:baseline; gap:10px; margin:-8px 2px 18px}
body .quote p{font-family:"Iowan Old Style",Georgia,serif; font-style:italic; font-size:14.5px; color:var(--mut)}
body .quote p b{color:var(--ink); font-weight:500; font-style:normal; font-family:"Avenir Next",sans-serif; font-size:12px; margin-left:6px}
body .quote button{font-size:13px; opacity:.5; flex:none}
body .quote button:hover{opacity:1; color:var(--accent)}
/* Band statt Kartenwand (Manuela 17.07. „nimmt zu viel Platz ein"): eine flache Zeile,
   auto-fit statt fester Spaltenzahl — die Kacheln teilen sich die Breite, egal wie viele
   Zubringer schon liefern. Wert links, Mini-Chart rechts unten, Unterzeile einzeilig. */
body .kpis{display:flex; gap:8px; margin-bottom:12px}
body .kpi{flex:1 1 0; min-width:0; position:relative; overflow:hidden; background:var(--card); border:1.5px solid var(--cardline); border-radius:13px; padding:7px 11px 6px;
  -webkit-backdrop-filter:blur(26px) saturate(1.8); backdrop-filter:blur(26px) saturate(1.8);
  box-shadow:var(--cardshadow); transition:background .3s, border-color .3s, box-shadow .3s}
body .kpi .lbl{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body .kpi .kpi-zeile{display:flex; align-items:flex-end; justify-content:space-between; gap:6px}
body .kpi .kpi-zeile>div{min-width:0}
body .kpi .val{font-size:17px; font-weight:600; margin:1px 0 0; white-space:nowrap}
body .kpi .sub{font-size:10.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
body .kpi .spark{flex:none; margin-bottom:2px}
body .kpi .spark path.line{stroke:var(--accent-line)}
body .kpi .spark .area{fill:var(--accent-line)}
body .kpi .spark .dot{fill:var(--accent)}
body .fill{height:5px; border-radius:3px; background:var(--fillbg); margin-top:8px; overflow:hidden}
body .fill i{display:block; height:100%; width:76%; background:var(--accent); border-radius:3px}
body .grid{display:grid; grid-template-columns:4fr 5fr 3.6fr; gap:12px; align-items:start}
body .card{position:relative; overflow:hidden; background:var(--card); border:1px solid var(--cardline); border-radius:22px; padding:16px 18px;
  -webkit-backdrop-filter:blur(28px) saturate(1.7); backdrop-filter:blur(28px) saturate(1.7);
  box-shadow:var(--cardshadow); transition:background .3s, border-color .3s, box-shadow .3s}
body .card h2{font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center}
body .card + .card{margin-top:12px}
body .goal{display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line-soft); align-items:flex-start}
body .goal:first-of-type{border-top:none; padding-top:2px}
body .goal .n{font-size:24px; font-weight:600; color:var(--accent); line-height:1; width:26px; flex:none}
body .goal .t{font-weight:600; font-size:15px}
body .goal .s{font-size:12.5px; color:var(--mut); margin-top:2px}
body .row{display:flex; gap:10px; align-items:center; padding:9px 0; border-top:1px solid var(--line-soft)}
body .row:first-of-type{border-top:none}
body .dot{width:8px; height:8px; border-radius:50%; flex:none}
body .row .t{flex:1}
body .row .t .tt{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
body .row .t small{display:block; color:var(--mut); font-size:12.5px; font-weight:500}
body .panel-titel{flex:1; font-size:15px; font-weight:600; line-height:1.5; text-transform:none; letter-spacing:0}
body .act{font-size:12px; padding:5px 10px; border-radius:8px; border:1px solid var(--chipline); color:var(--chipink); white-space:nowrap}
body .act:hover{border-color:var(--accent); color:var(--accent)}
body .act.primary{background:var(--accent); border-color:var(--accent); color:#fff}
body .act.primary:hover{color:#fff}
body .grp{display:flex; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line-soft)}
body .grp:first-of-type{border-top:none}
body .grp .cnt{min-width:30px; height:24px; border-radius:8px; border:1px solid var(--chipline); display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; padding:0 7px}
body .chat{display:flex; flex-direction:column; min-height:520px}
/* Arbeitsbereich klebt im Viewport: Detail erscheint auf Klickhöhe statt ganz oben (Abnahme 14.07.) */
@media (min-width:901px){
  body .chat{position:sticky; top:14px; min-height:min(520px, calc(100vh - 28px)); max-height:calc(100vh - 28px); overflow-y:auto}
}
body .kipp{display:flex; gap:8px; margin-bottom:14px}
body .kipp input{flex:1; border:1.5px solid var(--accent); border-radius:11px; padding:11px 14px; background:var(--inputbg); color:var(--ink); font-size:14px}
body .kipp input::placeholder{color:var(--mut2)}
body .kipp button{background:var(--accent); color:#fff; border-radius:11px; padding:0 15px; font-size:18px}
body .msgs{flex:1; display:flex; flex-direction:column; gap:10px}
body .msg{max-width:92%; padding:9px 13px; border-radius:13px; font-size:13.5px}
body .msg.me{align-self:flex-end; background:var(--bubble-me); border-bottom-right-radius:4px}
body .msg.cl{align-self:flex-start; background:var(--bubble-cl); border-bottom-left-radius:4px}
body .workcard{border:1px solid var(--workline); background:var(--workbg); border-radius:12px; padding:11px 13px; font-size:13px}
body .workcard b{display:block; margin-bottom:3px}
body .workcard .acts{display:flex; gap:7px; margin-top:9px}
body .parkrow{font-size:13px; color:var(--chipink); padding:7px 0; border-top:1px solid var(--line-soft)}
body .parkrow:first-of-type{border-top:none}
body .slot-hinweis{font-size:13px; color:var(--mut); font-style:italic}
body a{color:var(--accent)}   /* nie Browser-Blau — im Nachtmodus unlesbar (Abnahme 14.07.) */
/* Einklapp-Sektionen: clean by default, bei Bedarf aufklappen (Konzept 4.4) */
body details.sektion{margin-top:14px}
body details.sektion summary{font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:var(--mut);
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:7px; margin-bottom:10px}
body details.sektion summary::-webkit-details-marker{display:none}
body details.sektion summary::before{content:'▸'; font-size:12px; transition:transform .2s}
body details.sektion[open] summary::before{transform:rotate(90deg)}
body details.sektion summary:hover{color:var(--accent)}
body .kursrow{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:3px 0}
body .kursbadge{font-size:12.5px; font-weight:600; color:var(--goldink); padding:3px 11px;
  border:1px solid color-mix(in srgb, var(--goldink) 55%, transparent); border-radius:999px;
  background:color-mix(in srgb, var(--gold) 10%, transparent)}
body .kursstand{color:var(--goldink); font-size:11px; text-transform:uppercase; letter-spacing:.07em}
body .typbadge{font-size:9.5px; letter-spacing:.08em; color:var(--mut); border:1px solid var(--chipline);
  border-radius:6px; padding:2px 7px; vertical-align:2px; margin-left:6px}
/* Abgeleitete Merkmale (kundin/alumni/lounge/interessentin): errechnete Badges der Kontakt-Karte */
body .merkmal{display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius:999px; padding:2px 9px; margin-right:6px;
  background:color-mix(in srgb, var(--accent) 9%, transparent)}
body .parkrow.lang .txt{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; cursor:pointer}
body .parkrow.lang.offen .txt{-webkit-line-clamp:unset}
body .tagzeile{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:6px}
body .chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 6px 3px 10px;
  border:1px solid var(--chipline); border-radius:999px; color:var(--chipink)}
body .chipx{color:var(--mut); font-size:13px; line-height:1; padding:0 3px}
body .chipx:hover{color:var(--crit)}

@media (max-width:900px){
  /* 2 Spalten, nicht 3: mit Zahl + Mini-Chart in einer Kachel überlagern sich beide
     ab ~110px Kachelbreite (Mobil-Befund 17.07.) — zwei breite Kacheln tragen beides. */
  body .kpis{display:grid; grid-template-columns:repeat(2,1fr)}
  body .grid{grid-template-columns:1fr}
  body header{flex-wrap:wrap; row-gap:10px}
  /* Handgriffe (aufklappen/Wv./parken) sind white-space:nowrap-Buttons in einer Flexzeile;
     ohne Umbruch zwingen sie .row breiter als den Bildschirm — die ganze Seite wird
     dann seitlich scrollbar/gezoomt (Mobil-Befund 15.07.). Buttons rutschen jetzt bei
     Bedarf in eine zweite Zeile statt das Grid zu sprengen. */
  body .row{flex-wrap:wrap; row-gap:6px}
  body .workcard .acts{flex-wrap:wrap; row-gap:6px}
}

body select, body input[type="date"], body input[type="number"], #panel-slot label>input, #panel-slot .row>input{
  font:inherit; border:1px solid var(--chipline); border-radius:8px; padding:4px 8px;
  background:var(--inputbg); color:var(--ink)}
body .procs label{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--mut)}
#panel-slot h2{margin-top:0}
#panel-slot{max-height:70vh; overflow-y:auto}
#panel-slot a{color:var(--accent)}

/* ---- Zuruf-Kanal (BT3 Etappe 1) ----
   Variablen-Fix 15.07. (Etappe 2): stand auf --lin/--pap/--ber/--sig/--sof — die es hier nie
   gab. Eine ungültige var() macht die GANZE Deklaration ungültig, d.h. das Eingabefeld war
   live ohne Rahmen und ohne Grund. Jetzt auf dem echten Kanon (--line-soft/--inputbg/--accent/
   --orange/--mut), Eingabe nach dem Muster von .kipp input. */
#zuruf-form { margin: 0 0 10px }
#zuruf-text {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1.5px solid var(--accent); background: var(--inputbg); color: var(--ink);
  font: inherit; font-size: .92rem;
}
#zuruf-text:focus { outline: none; border-color: var(--berry-glow) }
.zuruf-status { margin: 0 0 8px; font-size: .82rem; color: var(--accent); font-weight: 500 }
.zuruf-liste { list-style: none; margin: 0 0 10px; padding: 0; font-size: .84rem }
.zuruf-liste li { padding: 7px 0; border-bottom: 1.5px solid color-mix(in srgb, var(--orange) 72%, transparent) }
.zuruf-text { color: var(--ink) }
.zuruf-marke { margin-left: 6px; font-size: .72rem; color: var(--mut) }
.zuruf-erledigt { color: var(--mut) }
.zuruf-fehler { color: var(--orange); font-size: .82rem; margin: 0 0 8px }
.zuruf-ergebnis { margin: 3px 0 0; font-size: .8rem; color: var(--mut) }

/* ---- Kurs-Dashboard /pipeline/{kurs} (Aufarbeitung 4.5) ----
   Der Balken ist die Aussage: erreichte Station = gefüllter Punkt in Berry, offene = leerer
   Ring. Datum klein darunter, damit die Zeile ruhig bleibt und der Fortschritt trägt. */
.pipe-scroll { overflow-x: auto }           /* schmale Schirme: Tabelle scrollt, Seite nicht */
.pipe { width: 100%; border-collapse: collapse; font-size: .84rem }
.pipe th {
  text-align: center; font-weight: 500; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--mut); padding: 0 6px 7px; white-space: nowrap;
}
.pipe th:first-child { text-align: left }
.pipe td { padding: 7px 6px; border-top: 1px solid var(--line-soft) }
.pipe-wer { white-space: nowrap }
.pipe-stat { text-align: center; white-space: nowrap }
.pipe-paket { margin-left: 7px; font-size: .72rem; color: var(--goldink) }
.pipe-datum { display: block; font-size: .66rem; color: var(--mut2); margin-top: 1px }
.pipe-marke { font-size: .72rem; color: var(--goldink) }
.pipe-bestaetigt { color: var(--ok) }
.pipe-nicht_moeglich { color: var(--mut2) }
.pipe-scheck { display: flex; align-items: center; gap: 4px; margin-top: 4px }
.pipe-scheck > span { font-size: .64rem; color: var(--mut) }
.pipe-scheck .pipe-datum-feld { max-width: 112px; font-size: .7rem }
.pipe-fristen { display: block; margin-top: 2px; font-size: .66rem; color: var(--mut2) }
.pipe-frist-abgelaufen { display: block; margin-top: 2px; color: var(--orange); font-weight: 600 }
.kontakt-scheck { display: flex; flex-direction: column; gap: 2px; font-size: .7rem; color: var(--mut) }
.kontakt-scheck .pipe-datum-feld { max-width: 140px }
.pipe-gebucht { background: var(--fillbg) }
.pipe-weg { opacity: .45 }                  /* verloren: da, aber nicht im Weg */
.pipe-fuss { margin: 12px 0 0; font-size: .74rem; color: var(--mut) }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.linkbtn:hover { color: var(--accent) }
.stat {
  background: none; border: 0; padding: 0 3px; font-size: 1rem; line-height: 1;
  color: var(--mut2); cursor: pointer;
}
.stat-an { color: var(--accent) }
.stat-hier { text-shadow: 0 0 7px var(--berry-glow) }   /* wo sie GERADE steht */
.stat-gebucht { color: var(--ok); cursor: default }
.stat:disabled { cursor: default }
.stat:not(:disabled):hover { color: var(--berry-glow) }
.ziel-liste { list-style: none; margin: 0; padding: 0; font-size: .86rem }
.ziel-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0;
                 border-top: 1px solid var(--line-soft) }
.ziel-liste li:first-child { border-top: 0 }
.ziel-liste a { color: var(--ink); text-decoration: none }
.ziel-liste a:hover { color: var(--accent) }
.ziel-zahl { color: var(--mut); font-size: .84rem; font-weight: 500; white-space: nowrap }

/* ---- Vorschlags-Gate (Etappe 2, Entscheid 3b) ----
   Gold, nicht Orange: ein wartender Vorschlag ist eine Einladung zu entscheiden, kein Alarm.
   Steht bewusst über der Zuruf-Liste — was Manuelas Ja braucht, kommt zuerst. */
.vorschlag-liste { list-style: none; margin: 0 0 10px; padding: 0 }
.vorschlag {
  padding: 9px 11px; margin-bottom: 7px; border-radius: 9px;
  border: 1px solid var(--goldink); background: var(--fillbg);
}
.vorschlag-text { margin: 0; font-size: .86rem; color: var(--ink); font-weight: 500 }
.vorschlag-notiz { margin: 3px 0 0; font-size: .78rem; color: var(--mut); font-style: italic }
.vorschlag-herkunft { margin: 2px 0 7px; font-size: .75rem; color: var(--mut) }
.vorschlag-knoepfe { display: flex; gap: 6px }

/* ---- Post-Spalte (BT4, Spec 3.2) ---- */
details.post-gruppe { margin: 2px 0; }
details.post-gruppe > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none; padding: 6px 2px; }
details.post-gruppe > summary::-webkit-details-marker { display: none; }
details.post-gruppe > summary::before { content: "▸"; color: var(--mut); font-size: 12px; }
details.post-gruppe[open] > summary::before { content: "▾"; }
details.post-gruppe > summary small { color: var(--mut); }
.post-neu { background: var(--accent); color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 7px; margin-left: auto; }
.post-snippet { display: block; color: var(--mut); }
select.act { max-width: 52px; }


/* ---- Header-Logo (Manuela 16.07.) ---- */
.logo { height: 42px; width: 42px; display: block; filter: brightness(0) invert(.95); }

/* ---- Kurs-Board: Geld-Verdeck + Ausgelaufene (Manuela 16.07.) ---- */
.pipe .geld { display: inline-block; filter: blur(7px); transition: filter .15s; pointer-events: none; user-select: none; }
.card.geld-an .pipe .geld { filter: none; pointer-events: auto; user-select: auto; }
.pipe tr.pipe-abgelaufen { display: none; }
.card.zeig-abgelaufen .pipe tr.pipe-abgelaufen { display: table-row; opacity: .55; }
.pipe-datum-feld { font: inherit; font-size: .78rem; color: var(--ink); background: var(--card); border: 1px solid var(--chipline); border-radius: 8px; padding: 2px 6px; max-width: 128px; }

/* ---- Deine Drei (BT5) ---- */
.ziel-slot { padding: 8px 2px; border-bottom: 1.5px solid color-mix(in srgb, var(--orange) 72%, transparent); }
.ziel-slot:last-of-type { border-bottom: none; }
.ziel-kopf { display: flex; gap: 8px; align-items: baseline; }
.ziel-nr { font-weight: 700; color: var(--accent); }
.ziel-titel { flex: 1; font-weight: 600; }
.ziel-zaehler .linkbtn { font-weight: 600; color: var(--goldink); }
.ziel-schritt { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.ziel-dran { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mut);
  border: 1px solid var(--chipline); border-radius: 8px; padding: 1px 7px; cursor: pointer; }
.ziel-dran-claude { color: var(--accent); border-color: var(--accent); }
.ziel-schritt-feld { flex: 1; font: inherit; font-size: .82rem; color: var(--ink); background: transparent;
  border: none; border-bottom: 1px dashed var(--chipline); padding: 2px 2px; }
.ziel-schritt-feld:focus { outline: none; border-bottom-color: var(--accent); }
.ziel-neu input { width: 100%; font: inherit; font-size: .85rem; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--chipline); border-radius: 10px; padding: 7px 10px; margin-top: 8px; }

/* ---- Deine Drei in Berry (Manuela 16.07.: Berry + weiße Schrift, mehr Struktur) ---- */
.card.drei { background: color-mix(in srgb, #8B1A6B 88%, #2A0F22); border-color: color-mix(in srgb, #8B1A6B 55%, #fff); }
body.night .card.drei { background: color-mix(in srgb, #8B1A6B 72%, #1a0a14); }
.card.drei h2, .card.drei .ziel-titel, .card.drei .check { color: #fff; }
.card.drei .ziel-titel { cursor: pointer; }
.card.drei .ziel-nr, .card.drei .ziel-zaehler .linkbtn { color: #DCC089; }
.card.drei .ziel-slot { border-bottom-color: color-mix(in srgb, #C8A55B 60%, transparent); }
.card.drei .ziel-dran { color: #F3EDE2; border-color: rgba(255,255,255,.4); }
.card.drei .ziel-dran-claude { color: #DCC089; border-color: #DCC089; }
.card.drei .ziel-schritt-feld { color: #fff; border-bottom-color: rgba(255,255,255,.35); }
.card.drei .ziel-schritt-feld::placeholder, .card.drei .slot-hinweis { color: rgba(255,255,255,.6); }
.card.drei .act { color: #fff; border-color: rgba(255,255,255,.4); }
.card.drei .ziel-neu input { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.card.drei .ziel-neu input::placeholder { color: rgba(255,255,255,.6); }

/* ---- Karten-Überschriften: dezentes Champagner-Gold (Manuela 16.07., 2. Runde) ---- */
body .card h2 { background: color-mix(in srgb, #C8A55B 26%, transparent); color: var(--goldink); padding: 6px 12px; border-radius: 10px; }
body.night .card h2 { color: #DCC089; }
body .card.hot h2 { color: var(--goldink); }   /* Herzstück-Marker bleibt der Berry-Rand */
body.night .card.hot h2 { color: #DCC089; }
body .card.drei h2 { background: color-mix(in srgb, #C8A55B 34%, transparent); color: #F3EDE2; }   /* Gold auf Berry (Brand-Logik) */

/* ---- Kopfbalken in Berry-Glas (Manuela 16.07.: Berry hinterlegt, Liquid Glass bleibt) ---- */
body header {
  background: color-mix(in srgb, #8B1A6B 88%, #2A0F22);
  border: 1.5px solid color-mix(in srgb, #8B1A6B 55%, #fff);
  border-radius: 16px; padding: 12px 16px;
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 10px 36px rgba(46,26,40,.2), inset 0 1px 0 rgba(255,255,255,.35);
}
body.night header { background: color-mix(in srgb, #8B1A6B 72%, #1a0a14); }
body header h1, body header .date { color: #fff; }
body header .proc, body header .proc.idle { color: rgba(255,255,255,.78); }
body header .mode { border-color: rgba(255,255,255,.45); }

/* ---- Fokus-Modus im Arbeitsbereich (Manuela 16.07.): Detail offen = Verlauf weg ---- */
.card.chat.fokus #zuruf-slot { display: none; }

/* ---- Jetzt dran: zwei Bereiche — Deine To-dos oben, Kurs & Kontakte darunter
   (Bau-Auftrag 23.07.: Follow-ups überlagerten Manuelas eigene To-dos).
   Kappung je Bereich, Rest klappt am Bereich auf. ---- */
.dran-bereich:not(.offen) .row.dran-rest { display: none; }
.dran-bereich + .dran-bereich { margin-top: 14px; }
.dran-titel { font-size: 10px; text-transform: uppercase; letter-spacing: .11em;
  color: var(--mut); margin-bottom: 6px; }
.dran-mehr { margin-top: 8px; }

/* Aufgaben-Suche im Dran-Kopf: durchsucht ALLE offenen Schritte, auch nicht fällige */
#aufgaben-suche { flex: 1; min-width: 60px; max-width: 220px; margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 9px;
  padding: 4px 9px; background: var(--inputbg); color: var(--ink);
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; }
#aufgaben-suche::placeholder { color: var(--mut2); }

/* ---- KPI-Charts (Manuela 16.07.: „ich liebe Charts") — eine Serie, ein Farbton.
   Layout-Regeln des Bands wohnen komplett im Kompakt-Block weiter oben (Manuela 17.07.
   „nimmt zu viel Platz ein") — hier nur noch die Chart-Farben. ---- */
.kpi .spark-balken { fill: var(--accent); }
.kpi .spark-leer { fill: var(--line-soft); }
.kpi .spark-ring-grund { stroke: var(--line-soft); }
.kpi .spark-ring-wert { stroke: var(--accent); }

/* ---- BT7 Belohnungs-Schicht: Abhak-Auflösen, Blumen-Glühen, Zieleinlauf-Welle ---- */
.row.weg, .ziel-slot.weg { animation: weg-aufloesen .3s ease-in forwards; }
@keyframes weg-aufloesen { to { opacity: 0; transform: scale(.96) translateX(6px); } }
.fol circle.gluht { stroke: var(--accent); opacity: .55; filter: drop-shadow(0 0 6px rgba(197,88,168,.7)); transition: opacity .6s; }
body.zieleinlauf::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 98;
  background: radial-gradient(ellipse at 22% 30%, rgba(197,88,168,.28), transparent 55%);
  animation: zieleinlauf-welle 2s ease-out forwards; }
@keyframes zieleinlauf-welle { 0% { opacity: 0 } 18% { opacity: 1 } 100% { opacity: 0 } }
.zitat-knopf { margin-left: 8px; font-size: 14px; color: var(--goldink); }

/* ---- Prozess-Ampeln (BT8-Vorgriff) ---- */
.proc-gruen i { background: #4a9d5f; }
.proc-gelb i { background: #d1a13a; }
.proc-rot i { background: #c24a3e; }

/* ---- BT6 b: klickbare Zubringer-Kacheln + Detail-Boards (Manuela 17.07.) ---- */
body .kpi[data-panel]{cursor:pointer}
body .kpi[data-panel]:hover{border-color:var(--accent-line)}
body .board-stats{display:flex; gap:22px; flex-wrap:wrap; margin:12px 0 4px}
body .board-stat .lbl{font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--mut)}
body .board-stat .val{font-size:19px; font-weight:600; margin-top:2px}
body .board-stat .val.neg, body .board-tabelle td.neg{color:var(--crit)}
body .board-legende{display:flex; gap:16px; font-size:11px; color:var(--mut); margin:10px 0 2px}
body .board-legende i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
body .board-legende i.le{background:var(--accent)}
body .board-legende i.lk{background:var(--goldink)}
body .board-chart{width:100%; height:auto; display:block; margin:4px 0 6px}
body .board-chart .board-balken-e{fill:var(--accent)}
body .board-chart .board-balken-k{fill:var(--goldink)}
body .board-chart .board-label{font-size:9.5px; fill:var(--mut)}
body .board-chart .board-linie{fill:none; stroke:var(--accent-line); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
body .board-tabelle{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px}
body .board-tabelle th{font-weight:500; color:var(--mut); text-align:right; padding:4px 8px}
body .board-tabelle td{text-align:right; padding:4px 8px; border-top:1px solid var(--cardline); font-variant-numeric:tabular-nums}
body .board-tabelle .links{text-align:left}