/* ══════════════════════════════════════════════════════════
   Werkstatt — gemeinsame Gestaltung. Eine Quelle für alle Seiten.

   Richtung (seit 2026-09-23, zweiter Anlauf): matt + Neo-Brutalism.
   Vorlage von Daniel: „Neo Brutalism UI Component Library" (Pinterest).
   Flacher Cremegrund, deckende Flächen, kräftige Konturen, harte versetzte
   Schatten, satte Farben. Kein Glas, kein Glanz, kein Verlauf.
   Die Seitenleiste folgt seit 2026-09-23 auch (steht in index.html); nur die Tür (/anmelden) ist Rauchglas.

   Kontur und Schatten stecken in zwei Variablen, damit jede Seite, die
   `box-shadow:var(--glas-kante), var(--schatten)` schreibt, automatisch
   brutal aussieht:
     --glas-kante   2 px Kontur (als Schatten, verschiebt kein Layout)
     --schatten     harter Versatz 4 px, --schatten-hoch 7 px

   Bewegung:
     --feder   auftauchen, Dialoge — schwingt minimal über
     --sanft   gleiten, einblenden
     --tempo   kleine Farbwechsel (Hover)
     Knöpfe drücken sich in ihren Schatten (translate + Schatten weg), 90 ms.
   ══════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;

  /* ── Grund und Flächen (alles deckend) ── */
  --bg:#FBF1E6;                              /* Creme */
  --surface:#FFFDF9;                         /* Karten, Felder */
  --surface-voll:#FFFDF9;
  --surface-2:#F4EADF;                       /* Chips, stumme Flächen */
  --sunk:rgba(27,23,20,.07);                 /* eingelassen: Hover, Spuren, Balkengrund */
  --glas-dicht:#FFFDF9;                      /* Dialoge, Menüs, Leisten über Inhalt — heißt noch so, ist aber matt */
  --glas-blur:none;
  --glas-glanz:linear-gradient(transparent,transparent);
  --glanz-punkt:transparent;

  /* ── Kontur ── */
  --rand:#1B1714;
  --strich:2px;
  --glas-kante:0 0 0 var(--strich) var(--rand);

  /* ── Schrift ── */
  --ink:#1B1714;
  --ink-2:#5A514B;
  --ink-3:#8C8178;

  /* ── Linien (innerhalb von Listen) ── */
  --line:rgba(27,23,20,.16);
  --line-soft:rgba(27,23,20,.09);

  /* ── Akzent: Eosin Pink ── */
  --akzent:#E8457F;
  --akzent-ink:#B62F5F;
  --akzent-weich:rgba(232,69,127,.16);
  --akzent-schrift:#1B1714;
  --akzent-schein:232,69,127;

  /* ── Kontrastblock (Anker) ── */
  --kohle:#1B1714;
  --auf-kohle:#FBF1E6;
  --auf-kohle-2:#A9A09A;
  --auf-kohle-still:rgba(255,255,255,.12);

  /* ── Statusfarben: satt, Füllton und Schriftton getrennt ── */
  --gut:#A8D12B;        --gut-ink:#4F6A00;
  --amber:#FF9F1C;      --amber-ink:#8A4E00;
  --violet:#8C6CF0;     --violet-ink:#5A3DC2;
  --teal:#22B5A6;       --teal-ink:#0C6B62;

  /* ── Rundung: kleiner als beim Glas, damit die Kontur trägt ── */
  --r-xl:18px; --r-gross:14px; --r:10px; --r-klein:8px; --r-rund:999px;

  /* ── Maße: jeder Knopf sitzt auf demselben Raster ── */
  --h-knopf:40px; --h-klein:32px; --h-mini:26px;

  /* ── Schriftstufen ── */
  --t-riesig:clamp(3.2rem, 8vw, 5.6rem);
  --t-gross:clamp(1.6rem, 3.4vw, 2.3rem);
  --t-mittel:1.15rem;
  --t-text:15px;
  --t-klein:13px;
  --t-marke:10px;

  /* ── Raster ── */
  --luft:28px;
  --spalt:16px;

  /* ── Schatten: hart, versetzt, keine Unschärfe ── */
  --schatten:4px 4px 0 var(--strich) var(--rand);
  --schatten-hoch:7px 7px 0 var(--strich) var(--rand);
  --schatten-klein:2px 2px 0 var(--strich) var(--rand);
  --schatten-kohle:0 0 0 var(--strich) var(--rand), 5px 5px 0 var(--strich) var(--akzent);

  /* ── Schriften ── */
  --display:'Spectral',Georgia,'Times New Roman',serif;
  --body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;

  /* ── Bewegung ── */
  --feder:cubic-bezier(.34,1.46,.64,1);
  --sanft:cubic-bezier(.22,1,.36,1);
  --tempo:.16s cubic-bezier(.22,1,.36,1);
  --druck:.09s cubic-bezier(.3,0,.3,1);
}

/* Nacht: warmes Dunkelbraun, Konturen und Schatten fast schwarz */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#2A2522; --surface:#36302C; --surface-voll:#36302C; --surface-2:#413A35;
  --sunk:rgba(0,0,0,.28); --glas-dicht:#36302C;
  --rand:#0B0908;
  --ink:#F4EDE6; --ink-2:#C2B7AE; --ink-3:#8E847C;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --akzent:#F2709F; --akzent-ink:#F79BBC; --akzent-weich:rgba(242,112,159,.2);
  --akzent-schrift:#1B1714; --akzent-schein:242,112,159;
  --kohle:#F4EDE6; --auf-kohle:#1B1714; --auf-kohle-2:#6B625C; --auf-kohle-still:rgba(0,0,0,.1);
  --gut:#B9DE3C;   --gut-ink:#C9E86A;
  --amber:#FFB23E; --amber-ink:#FFC56E;
  --violet:#A48CF5; --violet-ink:#BDAAF8;
  --teal:#3CC7B8;   --teal-ink:#6FD8CC;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#2A2522; --surface:#36302C; --surface-voll:#36302C; --surface-2:#413A35;
  --sunk:rgba(0,0,0,.28); --glas-dicht:#36302C;
  --rand:#0B0908;
  --ink:#F4EDE6; --ink-2:#C2B7AE; --ink-3:#8E847C;
  --line:rgba(255,255,255,.12); --line-soft:rgba(255,255,255,.07);
  --akzent:#F2709F; --akzent-ink:#F79BBC; --akzent-weich:rgba(242,112,159,.2);
  --akzent-schrift:#1B1714; --akzent-schein:242,112,159;
  --kohle:#F4EDE6; --auf-kohle:#1B1714; --auf-kohle-2:#6B625C; --auf-kohle-still:rgba(0,0,0,.1);
  --gut:#B9DE3C;   --gut-ink:#C9E86A;
  --amber:#FFB23E; --amber-ink:#FFC56E;
  --violet:#A48CF5; --violet-ink:#BDAAF8;
  --teal:#3CC7B8;   --teal-ink:#6FD8CC;
}

/* ── Grundlage ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv11";
}
/* Im Rahmen der Schale ist die Seite durchsichtig — der Farbgrund der Schale scheint durch. */
html.im-rahmen, html.im-rahmen body{background:transparent}
img{max-width:100%}
input[type=checkbox], input[type=radio], input[type=range], progress{accent-color:var(--akzent)}
[hidden]{display:none!important}
::selection{background:var(--p-gelb); color:var(--ink)}
*{scrollbar-width:thin; scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:10px; border:3px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3); background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

:focus-visible{outline:2px solid var(--akzent); outline-offset:4px}
/* Textfelder zeigen den Fokus über ihr eigenes Feld, nicht über einen Rahmen */
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible{outline:0}
.feld-eingabe:focus{outline:0; box-shadow:var(--glas-kante), 3px 3px 0 var(--strich) var(--akzent)}

/* ── Grund ──────────────────────────────────────────────
   Flache Creme mit feinem Punktraster. Liegt in Schale und Anmeldung;
   die Seiten im Rahmen sind durchsichtig und stehen auf demselben Grund. */
.grund{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px, var(--line) 1.1px, transparent 1.4px); background-size:24px 24px}
.grund i{display:none}

/* ── Fläche als Baustein ───────────────────────────────── */
.glas{background:var(--surface); box-shadow:var(--glas-kante), var(--schatten)}
.glas-dicht{background:var(--glas-dicht); box-shadow:var(--glas-kante), var(--schatten-hoch)}

/* ── Bausteine ─────────────────────────────────────────── */
.h-display{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.06}
.h-mono{font-family:var(--mono); font-size:var(--t-marke); letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3)}

.zahl-gross{font-family:var(--display); font-weight:700; font-size:var(--t-riesig);
  line-height:.88; letter-spacing:-.045em; font-variant-numeric:tabular-nums}

/* Kachel — deckend, Kontur, harter Schatten */
.kachel{background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--glas-kante), var(--schatten);
  padding:var(--luft); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden}
.kachel.anker{background:var(--kohle); color:var(--auf-kohle); box-shadow:var(--schatten-kohle)}
.kachel.anker .h-mono{color:var(--akzent)}

.ton-jetzt{color:var(--akzent-ink)} .ton-fertig{color:var(--gut-ink)}
.ton-laeuft{color:var(--amber-ink)} .ton-wartet{color:var(--violet-ink)}

.flaeche{background:var(--surface); border-radius:var(--r-gross); box-shadow:var(--glas-kante), var(--schatten)}

.balken{background:var(--surface-2); border-radius:var(--r-rund); overflow:hidden; display:flex; box-shadow:var(--glas-kante)}
.balken i{display:block; height:100%; transition:width .9s var(--sanft)}
.balken i + i{box-shadow:inset var(--strich) 0 0 var(--rand)}

.avatar{
  border-radius:50%; display:grid; place-content:center; flex:0 0 auto;
  font-family:var(--mono); font-weight:600; color:#fff; letter-spacing:.02em;
  box-shadow:0 0 0 var(--strich) var(--rand);
}

/* ── Knöpfe ────────────────────────────────────────────
   Eine Hauptaktion pro Ansicht, im Kopf der Ansicht.
     .knopf        Hauptaktion — Akzent, Kontur, harter Schatten
     .knopf.stumm  Nebenaktion — helle Fläche, Kontur, kleiner Schatten
     .knopf.klar   Zeilenaktion — nur Schrift, Kontur beim Überfahren
     .knopf.klein  kleinere Bauform
   Drücken schiebt den Knopf in seinen Schatten. Feste Höhen — nebeneinander
   sitzen sie immer auf einer Linie. */
.knopf{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer;
  height:var(--h-knopf); padding:0 18px; border-radius:var(--r);
  font-family:var(--body); font-size:13.5px; font-weight:600; letter-spacing:.005em; line-height:1;
  background:var(--akzent); color:var(--akzent-schrift);
  box-shadow:var(--glas-kante), 3px 3px 0 var(--strich) var(--rand);
  transition:transform var(--druck), box-shadow var(--druck), background-color var(--tempo), color var(--tempo), opacity var(--tempo);
  white-space:nowrap; user-select:none; -webkit-user-select:none;
}
.knopf:hover{transform:translate(-1px,-1px); box-shadow:var(--glas-kante), 4px 4px 0 var(--strich) var(--rand)}
.knopf:active{transform:translate(3px,3px); box-shadow:var(--glas-kante)}
.knopf:disabled{opacity:.45; cursor:default; transform:none; box-shadow:var(--glas-kante)}

.knopf.stumm{background:var(--surface); color:var(--ink); font-weight:500;
  box-shadow:var(--glas-kante), var(--schatten-klein)}
.knopf.stumm:hover{box-shadow:var(--glas-kante), 3px 3px 0 var(--strich) var(--rand)}
.knopf.stumm:active{box-shadow:var(--glas-kante); transform:translate(2px,2px)}

.knopf.klar{background:transparent; color:var(--ink-2); padding:0 12px; box-shadow:none; font-weight:500}
.knopf.klar:hover{background:var(--surface); color:var(--ink); box-shadow:var(--glas-kante); transform:none}
.knopf.klar:active{transform:translate(1px,1px)}

.knopf.klein{height:var(--h-klein); padding:0 13px; font-size:12.5px; gap:6px; border-radius:var(--r-klein)}
.knopf.klar.klein{padding:0 10px}

.anker .knopf{box-shadow:0 0 0 var(--strich) var(--auf-kohle), 3px 3px 0 var(--strich) var(--akzent)}
.anker .knopf.stumm{background:var(--auf-kohle-still); color:var(--auf-kohle); box-shadow:0 0 0 var(--strich) var(--auf-kohle-2)}
.anker .knopf.klar{color:var(--auf-kohle-2); box-shadow:none}
.anker .knopf.klar:hover{background:var(--auf-kohle-still); color:var(--auf-kohle)}

.aktionen{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.aktionen .rechts{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Kapsel: Filter, Umschalter. Gewählt = dunkel mit Akzentschatten. */
.kapsel{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:0; border-radius:var(--r-rund); height:var(--h-klein); padding:0 15px;
  background:var(--surface); color:var(--ink-2); box-shadow:var(--glas-kante);
  font-family:var(--body); font-size:13px; font-weight:500; cursor:pointer; line-height:1; white-space:nowrap;
  transition:background var(--tempo), color var(--tempo), box-shadow var(--druck), transform var(--druck);
}
.kapsel:hover{background:var(--surface-2); color:var(--ink)}
.kapsel:active{transform:translate(1px,1px)}
.kapsel[aria-pressed="true"]{background:var(--kohle); color:var(--auf-kohle);
  box-shadow:var(--glas-kante), 2px 2px 0 var(--strich) var(--akzent)}

.blase{position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  background:var(--akzent); opacity:.18}
.geist{font-family:var(--display); font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px var(--akzent);
  opacity:.30; user-select:none; pointer-events:none}

/* ── Auftauchen ───────────────────────────────────────────
   Nur beim ersten Laden einer Seite (glas.js setzt html.rein für ~1,4 s und
   nummeriert die Karten in --i). Live-Nachladen blendet nicht erneut ein. */
@keyframes auftauchen{from{opacity:0; transform:translateY(12px) scale(.985)} to{opacity:1; transform:none}}
@keyframes einblenden{from{opacity:0}}
html.rein :is(.kachel, .pk, .seitenkopf, .fuerdich, .lk, .ev, .tk, .card, .ak, .afz, .zeile, .frage, .e, .dia, .mst, .text-karte, .bl){
  animation:auftauchen .62s var(--sanft) both; animation-delay:calc(min(var(--i, 0), 14) * 38ms)}

/* Dialoge: federn auf, Hintergrund wird weich */
@keyframes dlgauf{from{opacity:0; transform:translateY(10px) scale(.965)}}
@keyframes schleier{from{opacity:0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-delay:0s!important; transition-duration:.01ms!important}
}

/* ══ Farbkacheln (Intelly-Aufbau, Neo-Brutalism-Farben) ═══════
   Satte, deckende Töne mit Kontur. Farbe = Thema, nicht Laune. */
:root{
  --p-gelb:#FFE066; --p-pink:#FF9DBE; --p-lila:#C3B1FA; --p-blau:#8EDDD2; --p-amber:#FFC47A;
}
:root[data-theme="dark"]{
  --p-gelb:#6B5E1C; --p-pink:#733049; --p-lila:#4B3D7A; --p-blau:#1F5E57; --p-amber:#734A17;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --p-gelb:#6B5E1C; --p-pink:#733049; --p-lila:#4B3D7A; --p-blau:#1F5E57; --p-amber:#734A17;
}}
.pk{position:relative; overflow:hidden; isolation:isolate; border-radius:var(--r-xl); padding:24px 26px; color:var(--ink);
  display:flex; flex-direction:column; gap:14px; border:0; text-align:left; font:inherit;
  box-shadow:var(--glas-kante), var(--schatten)}
button.pk{cursor:pointer; transition:transform var(--druck), box-shadow var(--druck)}
button.pk:hover{transform:translate(-2px,-2px); box-shadow:var(--glas-kante), 6px 6px 0 var(--strich) var(--rand)}
button.pk:active{transform:translate(4px,4px); box-shadow:var(--glas-kante)}
.pk > *{position:relative; z-index:1}
.pk h2{font-family:var(--body); font-size:1.15rem; font-weight:600; margin:0; letter-spacing:-.01em}
/* Deko-Form: flach, mit Kontur — wie ausgeschnitten */
.pk .form{position:absolute; z-index:0; pointer-events:none; opacity:1}
.pk .form path, .pk .form circle, .pk .form rect, .pk .form polygon{stroke:var(--rand); stroke-width:2; vector-effect:non-scaling-stroke}
.pk.gelb{background:var(--p-gelb)} .pk.pink{background:var(--p-pink)}
.pk.lila{background:var(--p-lila)} .pk.blau{background:var(--p-blau)} .pk.amber{background:var(--p-amber)}
/* halb in den Kachelton gemischt, damit Text darüber lesbar bleibt */
.pk.gelb .form{color:color-mix(in srgb,var(--gut) 50%,var(--p-gelb))}
.pk.pink .form{color:color-mix(in srgb,var(--akzent) 40%,var(--p-pink))}
.pk.lila .form{color:color-mix(in srgb,var(--violet) 45%,var(--p-lila))}
.pk.blau .form{color:color-mix(in srgb,var(--teal) 45%,var(--p-blau))}
.pk.amber .form{color:color-mix(in srgb,var(--amber) 50%,var(--p-amber))}
.pk p{margin:0; font-size:13.5px; line-height:1.5; color:color-mix(in srgb,var(--ink) 82%,transparent)}
.gross-titel{font-family:var(--display); font-size:2rem; font-weight:700; letter-spacing:-.03em; line-height:1.05}
.pille{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:var(--h-klein);
  background:var(--kohle); color:var(--auf-kohle); border-radius:var(--r-rund); padding:0 16px;
  font:inherit; font-size:12.5px; font-weight:600; line-height:1; border:0; cursor:pointer; white-space:nowrap;
  box-shadow:var(--glas-kante), var(--schatten-klein);
  transition:transform var(--druck), box-shadow var(--druck)}
.pille:hover{transform:translate(-1px,-1px); box-shadow:var(--glas-kante), 3px 3px 0 var(--strich) var(--rand)}
.pille:active{transform:translate(2px,2px); box-shadow:var(--glas-kante)}
.pille:disabled{opacity:.4; cursor:default}
.pille.hell{background:var(--surface); color:var(--ink)}
.leise{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 58%,transparent)}
.werte{display:flex; gap:22px; flex-wrap:wrap}
.werte b{font-size:15px; font-weight:700; display:block; line-height:1.1}
.werte b small{font-weight:500; font-size:13px; margin-left:3px}
.werte span{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:color-mix(in srgb,var(--ink) 60%,transparent); margin-top:4px}
/* Seitenkopf der neuen Orte: große Überschrift + ein Satz */
.seitenkopf{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap}
.seitenkopf h1{font-family:var(--display); font-weight:700; font-size:clamp(2rem,4vw,2.9rem); line-height:1.02;
  margin:0; letter-spacing:-.04em}
.seitenkopf p{margin:10px 0 0; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:62ch}
.seitenkopf p b{color:var(--ink); font-weight:600}
.seitenkopf .knopf, .seitenkopf .rechts{margin-left:auto}
/* Zwei Spalten: Hauptfläche + rechte Spalte, jede rollt für sich */
.zweispalt{height:100%; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:30px; padding:0 22px 0 26px}
/* Rollbereiche lassen rechts/unten Platz für den harten Schatten (sonst abgeschnitten) */
.zweispalt > .haupt{overflow-y:auto; min-height:0; padding:18px 10px 40px 2px; scrollbar-width:thin}
.zweispalt > .seite{overflow-y:auto; min-height:0; padding:18px 10px 40px 2px; scrollbar-width:thin}
@media (max-width:1100px){
  .zweispalt{grid-template-columns:minmax(0,1fr); height:auto; padding:0 16px; gap:10px}
  .zweispalt > .haupt,.zweispalt > .seite{overflow:visible; padding-bottom:10px}
}
.abschnitt{font-family:var(--body); font-size:1.12rem; font-weight:600; margin:0 0 12px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px}
.abschnitt .zahl{font-family:var(--mono); font-size:11px; color:var(--ink-3); font-weight:400}
.abschnitt .rechts{margin-left:auto}
.still{font-size:13px; color:var(--ink-3); margin:0; line-height:1.5}
/* Wer ist dran — der Ball */
.ball{display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:5px 11px 5px 5px;
  border-radius:var(--r-rund); background:var(--surface); box-shadow:var(--glas-kante); white-space:nowrap}
.ball .avatar{width:20px; height:20px; font-size:8px}
.ball.ich{background:var(--p-pink); font-weight:600}
.feld-eingabe{font:inherit; font-size:13.5px; border:0; border-radius:var(--r); background:var(--surface);
  color:var(--ink); padding:11px 14px; min-height:var(--h-knopf); box-shadow:var(--glas-kante); width:100%;
  transition:box-shadow var(--druck), background var(--tempo)}
.feld-eingabe:hover{background:var(--surface-voll)}
.feld-eingabe::placeholder{color:var(--ink-3)}
textarea.feld-eingabe{resize:vertical; min-height:70px; line-height:1.5}
.dlg{border:0; border-radius:var(--r-xl); padding:0; background:var(--glas-dicht); color:var(--ink);
  max-width:520px; width:calc(100% - 32px); box-shadow:var(--glas-kante), var(--schatten-hoch)}
.dlg[open]{animation:dlgauf .5s var(--feder)}
.dlg::backdrop{background:rgba(27,23,20,.4); animation:schleier .25s var(--sanft)}
.dlg form{padding:28px; display:grid; gap:14px}
.dlg h3{font-family:var(--display); font-size:1.6rem; font-weight:700; margin:0; letter-spacing:-.03em; line-height:1.1}
.dlg label{display:grid; gap:6px; font-family:var(--mono); font-size:var(--t-marke); letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3)}
.dlg label .opt{text-transform:none; letter-spacing:0; opacity:.7}
.dlg .zwei{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dlgfuss{display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:8px}
.dlgfehler{margin:0; font-size:13px; color:var(--akzent-ink)}

/* ══ Ablauf der Art: Concept → Ausarbeitung → Final ══════════
   Kopf der Schritt-Seiten. Zeigt, wo man steht und was danach kommt. */
.ablauf{display:flex; align-items:stretch; gap:0; margin-bottom:22px; flex-wrap:wrap}
.ablauf{background:var(--surface); border-radius:var(--r-rund); padding:5px; box-shadow:var(--glas-kante), var(--schatten); width:fit-content; gap:4px}
.ablauf button{border:0; background:transparent; color:var(--ink-2); font:inherit; text-align:left; cursor:pointer; border-radius:var(--r-rund);
  padding:8px 22px 8px 9px; display:flex; align-items:center; gap:12px; position:relative;
  transition:background var(--tempo), color var(--tempo), transform var(--druck)}
.ablauf button:active{transform:translate(1px,1px)}
.ablauf .nr{font-family:var(--mono); font-size:11px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  box-shadow:inset 0 0 0 1.5px var(--ink-3); flex:0 0 auto}
.ablauf b{display:block; font-size:14px; font-weight:600; color:var(--ink)}
.ablauf small{display:block; font-size:11.5px; color:var(--ink-3)}
.ablauf button[aria-current="step"]{background:var(--kohle); color:var(--auf-kohle); box-shadow:var(--glas-kante)}
.ablauf button[aria-current="step"] b{color:var(--auf-kohle)} .ablauf button[aria-current="step"] small{color:var(--auf-kohle-2)}
.ablauf button[aria-current="step"] .nr{background:var(--akzent); color:var(--akzent-schrift); box-shadow:0 0 0 var(--strich) var(--auf-kohle)}
.ablauf button:not([aria-current="step"]):hover{background:var(--surface-2)}

/* „Aufgaben dazu" (W.aufgabenFeld) — an Asset, Akte, Entwurf */
.afeld{display:grid; gap:6px}
.afkopf{margin:0 0 2px; font-family:var(--mono); font-size:var(--t-marke); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.afkopf span{background:var(--akzent); color:var(--akzent-schrift); border-radius:var(--r-rund); padding:1px 7px; margin-left:4px; letter-spacing:0; box-shadow:inset 0 0 0 1.5px var(--rand)}
.afz{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; background:var(--surface); border-radius:14px; padding:9px 12px 9px 10px; cursor:pointer;
  box-shadow:var(--glas-kante); transition:opacity .4s var(--sanft), box-shadow var(--druck), transform var(--druck)}
.afz:hover{box-shadow:var(--glas-kante), var(--schatten-klein); transform:translate(-1px,-1px)}
.afz b{display:block; font-size:13px; font-weight:600; line-height:1.3} .afz small{font-size:11px; color:var(--ink-3)}
.afz.weg{opacity:.35} .afz.weg b{text-decoration:line-through}
.afhk{width:20px; height:20px; border-radius:6px; border:2px solid var(--rand); background:none; padding:0; cursor:pointer; color:transparent; font-size:10px; display:grid; place-items:center;
  transition:transform .5s var(--feder), background var(--tempo), border-color var(--tempo), color var(--tempo)}
.afhk:hover{border-color:var(--gut-ink); color:var(--gut-ink); transform:scale(1.12)}
.afhk:active{transform:scale(.85)}
.afz.weg .afhk{background:var(--gut); border-color:var(--rand); color:var(--rand); animation:hakenpop .55s var(--feder)}
@keyframes hakenpop{0%{transform:scale(.6)} 60%{transform:scale(1.22)} 100%{transform:scale(1)}}
.affr{font-family:var(--mono); font-size:9.5px; padding:3px 8px; border-radius:var(--r-rund); background:var(--surface-2); color:var(--ink-2); white-space:nowrap; box-shadow:inset 0 0 0 1.5px var(--rand)}
.affr.drueber{background:var(--akzent); color:var(--akzent-schrift)} .affr.heute{background:color-mix(in srgb,var(--amber) 28%,transparent); color:var(--amber-ink)}
.afneu{justify-self:start; border:2px dashed var(--ink-3); background:none; color:var(--ink-2); font:inherit; font-size:12px; border-radius:var(--r-rund); height:var(--h-mini); padding:0 12px; cursor:pointer;
  transition:transform .45s var(--feder), color var(--tempo), border-color var(--tempo), background var(--tempo)}
.afneu:active{transform:scale(.95)}
.afneu:hover{color:var(--ink); border-color:var(--ink-3)}