/* Hallmark · shape: app screen · genre: atmospheric · theme: brand · redesign: full (Zentrale-Sprache, Weg B dunkel)
 * paper: #0A0B0D graphite · accent: #EDBA6F amber gold · display: Inter Display (self-hosted) · body: Inter (self-hosted)
 * nav: sticky head with tab pills (desktop), tab bar (phone) · signature: das Büro mit 3D-Figuren, die zwischen Lounge und Schreibtisch laufen · states: loading, empty, error, full
 * axes: graphite/sans/amber · posture: console · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E5 S5 R4 V4 · weakest: H, viel Inhalt auf der Startseite, darum Reiter im Bereich «Im Hintergrund» */
/* Hallmark · dismissed 29 · der weiche Goldschein markiert nur «arbeitet» und die dunklen Kacheln; Jan wünscht warmes Gold mit Glow (Memory 19.9.2026) */
/* Hallmark · dismissed F24 · Glas nach der Spezifikation der Zentrale (Abschnitt 5): feine Lichtkante plus weicher Schatten, auf Graphit sonst unsichtbar */
/* Hallmark · dismissed F7 · App-Bildschirm: eine Behälter-Rezeptur (Glas) für Leiste, Reiter und Listen ist hier gewollt (flow.md § App screens) */

/* ---------------------------------------------------------------- Hintergrund: goldener Dunst, kein blur() */
.hintergrund-flaeche { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; transform: translateZ(0); }
.blob { position: absolute; border-radius: 50%; translate: 0 var(--blob-y, 0px); will-change: transform; }
.blob-a { width: 60vmax; height: 60vmax; right: -18vmax; top: -24vmax; background: radial-gradient(closest-side, var(--akzent-dunst), transparent); animation: treiben 30s var(--weich) infinite alternate; }
.blob-b { width: 48vmax; height: 48vmax; left: -20vmax; top: 26vmax; background: radial-gradient(closest-side, var(--lime-dunst), transparent); animation: treiben 34s var(--weich) -8s infinite alternate-reverse; }
.blob-c { width: 44vmax; height: 44vmax; right: 6vmax; top: 60vmax; background: radial-gradient(closest-side, var(--akzent-dunst), transparent); opacity: .6; animation: treiben 36s var(--weich) -14s infinite alternate; }
@keyframes treiben {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); }
  100% { transform: translate3d(-3vmax, 5vmax, 0) scale(.96); }
}

/* ---------------------------------------------------------------- Kopfzeile */
.kopf {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-md);
  padding: calc(var(--space-sm) + env(safe-area-inset-top)) var(--rand-x) var(--space-sm);
  transition: background .4s var(--weich), box-shadow .4s var(--weich);
}
.kopf.ist-gescrollt { background: var(--grund-kopf); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); box-shadow: 0 1px 0 var(--linie); }
.marke { display: inline-flex; align-items: center; gap: var(--space-sm); justify-self: start; min-height: 44px; min-width: 0; color: var(--ink); }
.marke-wort { display: inline-grid; font: 500 17px/1.1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.marke-wort small { font: 400 12px/1.3 var(--sans); color: var(--ink-3); letter-spacing: 0; }
.logo-marke {
  width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--akzent);
  display: inline-grid; grid-template-columns: repeat(2, 6px); gap: var(--space-2xs); place-content: center;
  box-shadow: var(--schatten-knopf);
}
.logo-marke i { width: 6px; height: 6px; border-radius: 50%; background: var(--auf-hell); }
.logo-marke i:nth-child(2) { background: var(--ink); }
.logo-gross { width: 56px; height: 56px; grid-template-columns: repeat(2, 8px); }
.logo-gross i { width: 8px; height: 8px; }
.marke:hover .logo-marke i { animation: logoTanz .7s var(--aus); }
.marke:hover .logo-marke i:nth-child(2) { animation-delay: .06s; }
.marke:hover .logo-marke i:nth-child(3) { animation-delay: .12s; }
.marke:hover .logo-marke i:nth-child(4) { animation-delay: .18s; }
@keyframes logoTanz { 40% { transform: scale(1.5); } }
.kopf-aktionen { justify-self: end; display: flex; align-items: center; gap: var(--space-sm); }
.abmelden-form { margin: 0; }
.live-chip {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: 999px;
  background: var(--glas); border: 1px solid var(--glas-rand);
  font: 500 13px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rund-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: var(--glas-dicht); border: 1px solid var(--glas-rand); color: var(--ink-2);
  transition: background .25s var(--weich), color .25s var(--weich), translate .4s var(--aus);
}
.rund-knopf:active { scale: .94; }
.ico { width: 20px; height: 20px; flex: none; }

/* Reiter: Pillengruppe auf Glas, aktive Pille hell (auf Graphit) */
.reiter {
  display: flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 999px; max-width: 100%; overflow-x: auto;
  background: var(--glas); border: 1px solid var(--glas-rand);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reiter::-webkit-scrollbar { display: none; }
.reiter-pille {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: 999px;
  white-space: nowrap; font: 500 14px/1 var(--sans); color: var(--ink-2); cursor: pointer;
  transition: background .3s var(--weich), color .3s var(--weich), box-shadow .3s var(--weich);
}
.reiter-pille[aria-current="page"] { background: var(--ink); color: var(--auf-hell); box-shadow: 0 8px 18px -10px var(--vorhang); }
.reiter-zahl { font: 500 11.5px/1 var(--sans); min-width: 20px; padding: var(--space-2xs) var(--space-xs); border-radius: 999px; text-align: center; background: var(--glas-dicht); font-variant-numeric: tabular-nums; }
.reiter-dunkel { background: var(--glas); border-color: var(--linie); box-shadow: none; }
.reiter-dunkel .reiter-pille[aria-current="page"] { background: var(--akzent); color: var(--auf-hell); }

/* Tab-Leiste unten (iPhone und schmale Fenster) */
.tabbar {
  display: none; position: fixed; inset: auto 0 0 0; z-index: 60; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 var(--rand-x) env(safe-area-inset-bottom); background: var(--grund-kopf-dicht); box-shadow: 0 -1px 0 var(--linie);
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: var(--tabbar-h); color: var(--ink-3); font: 500 11.5px/1 var(--sans); }
.tabbar a[aria-current="page"] { color: var(--akzent); }
.tabbar .ico { width: 22px; height: 22px; }

/* ---------------------------------------------------------------- Seite */
.haupt { width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--rand-x) calc(var(--space-xl) + env(safe-area-inset-bottom)); min-width: 0; }
.haupt-weit { width: min(1440px, 100%); }
.text-link { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--akzent-linie); text-underline-offset: .2em; }
.leise { color: var(--ink-3); font-size: 13px; }

.held { padding: clamp(var(--space-xl), 7vw, 104px) 0 0; }
.gruss { margin: 0; font: 400 clamp(46px, 8.2vw, 112px)/.98 var(--display); letter-spacing: -.048em; text-wrap: balance; }
.gruss .wort { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; vertical-align: bottom; }
.gruss .wort > span { display: inline-block; }
.gruss .wort-name > span { font-weight: 500; color: var(--akzent); }
.held-satz { margin: var(--space-lg) 0 0; max-width: 40ch; font: 400 clamp(18px, 1.9vw, 23px)/1.4 var(--display); color: var(--ink-2); letter-spacing: -.015em; }

.kennzahlen { margin: clamp(var(--space-xl), 5vw, var(--space-2xl)) 0 0; display: flex; flex-wrap: wrap; gap: clamp(28px, 6vw, 88px); }
.kennzahl { margin: 0; display: grid; gap: var(--space-sm); min-width: 0; }
.kennzahl dt { margin: 0; }
.kennzahl dd { margin: 0; display: flex; align-items: flex-end; gap: var(--space-sm); }
.kz-pille {
  display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: 999px;
  background: var(--glas-dicht); border: 1px solid var(--glas-rand); font: 500 12.5px/1 var(--sans); color: var(--ink-2);
}
a.kz-pille { min-height: 28px; }
.kz-pille.kz-gold { background: var(--akzent); border-color: transparent; color: var(--auf-hell); }
.kz-pille.kz-rot { background: var(--rot-wasch); border-color: var(--rot-linie); color: var(--rot-ink); }
.kz-unter { font: 400 13px/1.3 var(--sans); color: var(--ink-3); padding-bottom: var(--space-2xs); max-width: 26ch; }
.matrix { height: clamp(40px, 5vw, 56px); width: auto; display: block; overflow: visible; }
.matrix circle { fill: var(--ink); transform-box: fill-box; transform-origin: center; }

.licht { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.licht-puls { color: var(--gruen); animation: lichtPuls 2.4s ease-out infinite; }
.kz-gold .licht { color: var(--auf-hell); }
@keyframes lichtPuls { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }

/* Zustand: Licht + Wort, nie Farbe allein */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); font: 500 12.5px/1 var(--sans); color: var(--ink-2); flex: none; white-space: nowrap; }
.status .licht { color: var(--grau-licht); }
.status[data-status="arbeitet"] { color: var(--akzent); }
.status[data-status="arbeitet"] .licht { color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-wasch); animation: atmen 1.6s ease-in-out infinite; }
.status[data-status="ruht"] .licht { color: var(--gruen); box-shadow: 0 0 0 3px var(--gruen-wasch); }
.status[data-status="fehler"] { color: var(--rot-ink); }
.status[data-status="fehler"] .licht { color: var(--rot); border-radius: 1px; rotate: 45deg; animation: lichtRot 1.6s ease-out infinite; }
.status[data-status="unklar"] .licht { color: var(--gelb); }
@keyframes lichtRot { 0% { box-shadow: 0 0 0 0 var(--rot-linie); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes atmen { 50% { opacity: .4; } }

.glas { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); border-radius: var(--r-gross); }

/* ---------------------------------------------------------------- Zeitleiste (24 h) */
.leiste { padding: var(--space-lg) 28px var(--space-md); margin: clamp(var(--space-xl), 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.leiste-spur { position: relative; height: 96px; }
.leiste-spur::before { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: repeating-linear-gradient(90deg, var(--linie-punkt) 0 2px, transparent 2px 7px); }
.leiste-marke { position: absolute; bottom: 0; translate: -50% 0; font: 500 11.5px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.leiste-marke::before { content: ""; position: absolute; left: 50%; bottom: 17px; width: 1px; height: 9px; background: var(--linie-punkt); }
/* Der Punkt bleibt gleich gross (Trefferfläche, Tooltip); nur ::before wächst. Zustand = Farbe UND Form. */
.leiste-punkt { position: absolute; bottom: calc(30px + var(--spur) * 14px); width: 16px; height: 16px; margin: 0 0 calc(var(--space-3xs) * -1) calc(var(--space-xs) * -1); --punkt: var(--gruen); }
.leiste-punkt::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--punkt); transition: scale .3s var(--aus); }
.leiste-punkt[data-zustand="fehler"] { --punkt: var(--rot); }
.leiste-punkt[data-zustand="fehler"]::before { border-radius: 2px; rotate: 45deg; inset: 3px; }
.leiste-punkt[data-zustand="laeuft"] { --punkt: var(--akzent); }
.leiste-punkt[data-zustand="laeuft"]::before { border-radius: 2px; }
.leiste-punkt.zukunft::before { background: transparent; box-shadow: inset 0 0 0 1.6px var(--ink-2); }
.leiste-punkt::after {
  content: attr(data-tipp); position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 4px;
  white-space: nowrap; padding: var(--space-xs) var(--space-sm); border-radius: 10px; background: var(--ink); color: var(--auf-hell);
  font: 500 12px/1 var(--sans); opacity: 0; pointer-events: none; z-index: 5;
  transition: opacity .2s var(--weich), translate .25s var(--weich);
}
.leiste-punkt.kante-rechts::after { left: auto; right: -6px; translate: 0 4px; }
.leiste-punkt.kante-links::after { left: -6px; translate: 0 4px; }
@media (hover: hover) and (pointer: fine) {
  .leiste-punkt:hover { z-index: 4; }
  .leiste-punkt:hover::before { scale: 1.6; }
  .leiste-punkt:hover::after { opacity: 1; translate: -50% 0; }
  .leiste-punkt.kante-rechts:hover::after, .leiste-punkt.kante-links:hover::after { translate: 0 0; }
}
.leiste-jetzt { position: absolute; top: 0; bottom: 22px; width: 0; }
.leiste-jetzt::before { content: ""; position: absolute; top: 30px; bottom: 0; left: 0; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.leiste-jetzt::after { content: ""; position: absolute; bottom: -5px; left: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); box-shadow: 0 0 0 2px var(--grund); }
.jetzt-pille {
  position: absolute; top: 0; left: 0; translate: -50% 0; display: inline-flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm); border-radius: 999px; white-space: nowrap; background: var(--ink); color: var(--auf-hell);
  font: 400 12.5px/1 var(--sans); font-variant-numeric: tabular-nums;
}
.jetzt-pille b { font-weight: 500; }
.jetzt-pille .ico { width: 16px; height: 16px; }
.leiste-fuss { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); font: 500 12px/1 var(--sans); color: var(--ink-3); }
.leiste-legende { display: inline-flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; }
.lp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.leiste-legende .lp:not(:first-child) { margin-left: var(--space-sm); }
.lp-ok { background: var(--gruen); }
.lp-fehler { background: var(--rot); border-radius: 1px; rotate: 45deg; width: 7px; height: 7px; }
.lp-laeuft { background: var(--akzent); border-radius: 2px; }
.lp-plan { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.leiste-liste { margin-top: var(--space-sm); font-size: 13.5px; color: var(--ink-2); }
.leiste-liste summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2xs); cursor: pointer; font-weight: 500; color: var(--ink); }
.leiste-liste ul { list-style: none; margin: var(--space-2xs) 0 0; padding: 0; columns: 2 260px; column-gap: 28px; }
.leiste-liste li { padding: var(--space-2xs) 0; break-inside: avoid; }
.leiste-liste li span { display: inline-block; min-width: 46px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.leiste-liste li em { font-style: normal; color: var(--ink-3); }
.leiste-liste li[data-zustand="fehler"] em { color: var(--rot-ink); font-weight: 500; }

/* ---------------------------------------------------------------- Abschnitte */
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) 28px; margin-bottom: 28px; }
.abschnitt-titel { margin: 0; font: 400 clamp(32px, 4vw, 50px)/1.02 var(--display); letter-spacing: -.04em; }
.abschnitt-unter { margin: var(--space-xs) 0 0; color: var(--ink-3); font-size: 15px; max-width: 60ch; }
.seite-oben { padding-top: clamp(var(--space-xl), 6vw, 88px); }

/* ---------------------------------------------------------------- Büro: Räume als dunkle Kacheln */
.raeume-bereich { margin-bottom: clamp(56px, 8vw, 112px); }
.raeume { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.raum {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; display: flex; flex-direction: column;
  border-radius: var(--r); border: 1px solid var(--linie); box-shadow: var(--schatten); background: var(--kachel-dunkel);
}
.raum::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 70% at 62% 36%, var(--akzent-dunst) 0%, transparent 62%), radial-gradient(90% 80% at 10% 110%, var(--lime-dunst) 0%, transparent 60%);
  transition: opacity .6s var(--weich);
}
.raum.arbeitet { border-color: var(--akzent-linie); box-shadow: var(--schatten), 0 30px 70px -40px var(--akzent-glanz); }
.raum.arbeitet::before { background: radial-gradient(80% 70% at 62% 36%, var(--akzent-glanz) 0%, transparent 62%), radial-gradient(90% 80% at 10% 110%, var(--lime-dunst) 0%, transparent 60%); }
.raum.fehler { border-color: var(--rot-linie); }
.raum-buehne { position: relative; aspect-ratio: 1168 / 880; margin: var(--space-xs) var(--space-xs) 0; }
.raum-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; pointer-events: none; }
.raum-fuss {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2xs) var(--space-sm);
  padding: var(--space-md) 20px 20px; border-top: 1px solid var(--linie);
}
.raum-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--linie-stark); }
.raum.arbeitet .raum-avatar { box-shadow: 0 0 0 2px var(--akzent); }
.raum-titel { min-width: 0; }
.raum-titel h3 { font: 500 23px/1.1 var(--display); letter-spacing: -.03em; }
.raum-titel p { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.raum-pfeil {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--glas-dicht); color: var(--ink); border: 1px solid var(--glas-rand);
  transition: background .35s var(--weich), color .35s var(--weich), translate .4s var(--aus);
}
.raum-pfeil .ico { width: 18px; height: 18px; transition: transform .45s var(--aus); }
.raum-satz { grid-column: 1 / -1; margin-top: var(--space-xs); font-size: 14px; line-height: 1.42; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.raum-zahl { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.raum-zahl b { color: var(--akzent); font-weight: 500; }

/* Figuren. Ohne 3D: Porträt-Chips an ihrem Platz. Mit 3D (figuren.js): Roboter auf der Leinwand, der Knopf ist
   die unsichtbare Trefferfläche über der Figur und trägt Name, Sprechblase und Info. */
.raum-figuren { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.figur { position: absolute; z-index: 10; width: 0; height: 0; }
.figur-koerper {
  position: absolute; left: 0; top: 0; width: max-content; transform: translate(-50%, -100%);
  display: grid; justify-items: center; gap: var(--space-3xs); padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
}
.figur-bild { width: 30px; height: 30px; max-width: none; border-radius: 50%; object-fit: cover; background: var(--graphit); box-shadow: 0 0 0 1.5px var(--linie-stark), 0 6px 12px -4px var(--vorhang); }
.figur-buchstabe { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--graphit); color: var(--ink-2); font-size: 13px; }
.figur-name {
  display: none; font: 500 11px/1.2 var(--sans); padding: var(--space-3xs) var(--space-xs); border-radius: 6px; background: var(--grund-kopf-dicht);
  color: var(--ink-2); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 0 0 1px var(--linie);
}
.figur.arbeitet .figur-bild { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--akzent), 0 0 20px -2px var(--akzent-glanz); }
.figur.arbeitet .figur-name, .figur.fehler .figur-name { display: block; }
.figur.arbeitet .figur-name { color: var(--auf-hell); background: var(--akzent); box-shadow: none; }
.figur.fehler .figur-bild { box-shadow: 0 0 0 2px var(--rot); }
.figur.fehler .figur-name { color: var(--rot-ink); }
.figur.geplant .figur-bild { filter: grayscale(1); opacity: .55; }
.figur.geplant .figur-name { opacity: .75; }
.figur-blase {
  position: absolute; left: 50%; bottom: calc(100% + var(--space-xs) + var(--stufe, 0) * 40px); translate: -50% 0; width: max-content; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: var(--space-xs) var(--space-sm); border-radius: 12px;
  background: var(--ink); color: var(--auf-hell); font: 400 12px/1.2 var(--sans); box-shadow: 0 10px 24px -12px var(--vorhang);
}
.figur-blase::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--ink); }
.figur-koerper:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 10px; }
.figur-info {
  position: absolute; left: 50%; top: calc(100% + var(--space-xs)); translate: -50% 0; width: 220px; padding: var(--space-sm);
  border-radius: 14px; background: var(--grund-kopf-dicht); border: 1px solid var(--glas-rand); box-shadow: var(--schatten-hoch);
  font: 400 12.5px/1.45 var(--sans); color: var(--ink-2); text-align: left; pointer-events: none; z-index: 5;
  transition: opacity .2s var(--weich), translate .25s var(--weich);
}
.figur-info strong { display: block; color: var(--ink); font: 500 14px/1.3 var(--display); }
.js .figur-info { opacity: 0; translate: -50% 4px; }
.js .figur-koerper:focus-visible .figur-info, .js .figur.offen .figur-info { opacity: 1; translate: -50% 0; }
.figur.offen, .figur:focus-within { z-index: 200 !important; }
@media (hover: hover) and (pointer: fine) {
  .js .figur-koerper:hover .figur-info { opacity: 1; translate: -50% 0; }
  .figur:hover { z-index: 200 !important; }
}
/* 3D: Porträt weg, Knopf so gross wie die Figur, Name nur beim Zeigen, bei «arbeitet» und bei Fehler */
.figuren-3d .mit-figuren .figur-bild, .figuren-3d .mit-figuren .figur-buchstabe { display: none; }
.figuren-3d .mit-figuren .figur-koerper { width: calc(var(--fh, 60px) * .62); height: var(--fh, 60px); align-content: start; border-radius: 12px; }
.figuren-3d .mit-figuren .figur-name { position: absolute; bottom: calc(100% + var(--space-xs)); left: 50%; translate: -50% 0; }
.figuren-3d .mit-figuren .figur:not(.fehler) .figur-name { display: none; }
.figur-blase b { font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .figuren-3d .mit-figuren .figur:not(.arbeitet):hover .figur-name { display: block; }
}
.figuren-3d .mit-figuren .figur:not(.arbeitet) .figur-koerper:focus-visible .figur-name { display: block; }

/* ---------------------------------------------------------------- Im Hintergrund (Graphit-Bereich) */
.hinter {
  position: relative; overflow: hidden; color: var(--ink); border-radius: 40px; padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(70% 90% at 100% 0%, var(--lime-glanz), transparent 60%), radial-gradient(60% 80% at 0% 100%, var(--akzent-dunst), transparent 60%), var(--graphit-flaeche);
  border: 1px solid var(--linie); box-shadow: 0 40px 80px -40px var(--vorhang);
}
.hinter-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md) 28px; margin-bottom: 28px; }
.hinter-titel { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.03em; margin-bottom: var(--space-md); }
.zeilen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3xs); }
.zeile {
  display: grid; grid-template-columns: 12px minmax(0, 1.6fr) minmax(0, .8fr) 150px; align-items: center;
  gap: var(--space-md); padding: var(--space-md) var(--space-md); border-radius: var(--r-klein); transition: background .3s var(--weich);
}
.zeile-kurz { grid-template-columns: 12px minmax(0, 1fr) 150px; }
.zeile-ablauf { grid-template-columns: 12px minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, .8fr) 120px; }
.zeile[data-zustand="unklar"] .zeile-licht { background: var(--gelb); box-shadow: none; }
.zeile-licht { width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 12px var(--gruen-wasch); }
.zeile[data-zustand="fehler"] .zeile-licht { background: var(--rot); border-radius: 1px; rotate: 45deg; box-shadow: 0 0 12px var(--rot-linie); }
.zeile[data-zustand="laeuft"] .zeile-licht { background: var(--akzent); border-radius: 2px; animation: atmen 1.4s ease-in-out infinite; }
.zeile[data-zustand="aus"] .zeile-licht { background: var(--ink-4); box-shadow: none; }
.zeile[data-zustand="plan"] .zeile-licht { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.zeile-name { font: 500 16px/1.3 var(--display); letter-spacing: -.01em; min-width: 0; }
.zeile-name small { display: block; margin-top: var(--space-2xs); font: 400 13px/1.35 var(--sans); color: var(--ink-3); }
.zeile-zeit { font: 400 14px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.zeile-zeit span { display: block; font: 500 11px/1 var(--sans); color: var(--ink-3); margin-bottom: var(--space-2xs); }
.chip {
  justify-self: end; padding: var(--space-xs) var(--space-sm); border-radius: 999px; font: 500 12px/1 var(--sans); white-space: nowrap;
  background: var(--gruen-wasch); color: var(--gruen);
}
.chip[data-zustand="fehler"] { background: var(--rot-wasch); color: var(--rot-ink); }
.chip[data-zustand="laeuft"] { background: var(--akzent-wasch); color: var(--akzent); }
.chip[data-zustand="aus"], .chip[data-zustand="plan"] { background: var(--glas-dicht); color: var(--ink-2); }
.chip[data-zustand="unklar"] { background: var(--gelb-wasch); color: var(--gelb-ink); }
.zeile-leer { display: block; padding: var(--space-md); color: var(--ink-3); }

/* ---------------------------------------------------------------- Organigramm */
.kennzahlen-vier { margin: 0 0 clamp(var(--space-xl), 5vw, var(--space-2xl)); }
.dran { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-xl); padding: var(--space-md) 20px; border-radius: var(--r); }
.dran:not(.leer) { border-color: var(--akzent-linie); box-shadow: var(--schatten), 0 30px 60px -40px var(--akzent-glanz); }
.dran-titel { flex-basis: 100%; font: 500 13px/1 var(--sans); color: var(--akzent); }
.dran.leer .dran-titel { color: var(--ink-3); }
.dran-eintrag { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-xs); border-radius: 999px; background: var(--glas-dicht); min-width: 0; flex: 1 1 260px; max-width: 480px; }
.dran-eintrag img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px var(--akzent); flex: none; width: 40px; height: 40px; }
.dran-eintrag p { font-size: 13.5px; line-height: 1.35; }
.dran-was { color: var(--akzent); }
.dran-ruhig { color: var(--ink-3); font-size: 14px; }

.dash { display: grid; gap: var(--space-xl); }
@media (min-width: 1440px) { .dash { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .strom { position: sticky; top: 88px; } }
.org { position: relative; min-width: 0; }
.org-jan {
  display: flex; align-items: center; gap: var(--space-sm); width: max-content; max-width: 100%; margin: 0 auto;
  padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-xs); border-radius: 999px;
  background: var(--glas-dicht); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); position: relative; z-index: 2;
}
.org-jan img { border-radius: 50%; width: 56px; height: 56px; }
.org-jan div { display: grid; line-height: 1.3; }
.org-jan strong { font: 500 19px/1.2 var(--display); }
.org-jan span { color: var(--ink-3); font-size: 13px; }
.org-jan.wach { border-color: var(--akzent-linie); box-shadow: var(--schatten), 0 0 0 4px var(--akzent-wasch); }
.org-stamm { width: 2px; height: 28px; margin: 0 auto; background: var(--linie-stark); }
.org-stamm.an, .spalte.arbeitet .spalte-anschluss::before { background: var(--akzent); }
.spalten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.spalte { position: relative; min-width: 0; display: grid; gap: var(--space-sm); align-content: start; }
.spalte-anschluss { position: relative; height: var(--space-lg); }
.spalte-anschluss::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 100%; background: var(--linie-stark); }
.spalte-anschluss::after { content: ""; position: absolute; top: 0; height: 2px; left: calc(var(--space-md) / -2); right: calc(var(--space-md) / -2); background: var(--linie-stark); }
.spalte:first-child .spalte-anschluss::after { left: 50%; }
.spalte:last-child .spalte-anschluss::after { right: 50%; }
.spalte.fehler .spalte-anschluss::before { background: var(--rot-linie); }
.kopf-karte {
  display: grid; gap: var(--space-3xs); padding: 20px; border-radius: var(--r); color: var(--ink); background: var(--kachel-dunkel);
  border: 1px solid var(--linie); box-shadow: var(--schatten); min-width: 0;
  transition: border-color .4s var(--weich), box-shadow .5s var(--weich), translate .5s var(--weich);
}
.spalte.arbeitet .kopf-karte { border-color: var(--akzent-linie); box-shadow: var(--schatten), 0 30px 60px -40px var(--akzent-glanz); }
.spalte.fehler .kopf-karte { border-color: var(--rot-linie); }
.kopf-oben { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--graphit); }
.spalte.arbeitet .avatar { box-shadow: 0 0 0 2px var(--akzent); }
.abt-name-klein { font-size: 13px; color: var(--akzent); }
.kopf-karte h2 { font: 500 23px/1.1 var(--display); letter-spacing: -.03em; }
.kopf-rolle, .kopf-aufgabe { color: var(--ink-3); font-size: 13.5px; }
.kopf-aufgabe { margin-top: var(--space-xs); line-height: 1.4; color: var(--ink-2); }
.kopf-satz { font-size: 13.5px; margin-top: var(--space-xs); color: var(--ink-2); }
.kopf-zahl { color: var(--ink-3); font-size: 12.5px; margin-top: var(--space-2xs); }
.kopf-zahl b { color: var(--akzent); font-weight: 500; }
.gruppe { display: grid; gap: var(--space-xs); }
.gruppe-titel { font-size: 12.5px; color: var(--ink-3); padding: var(--space-xs) 0 0 var(--space-xl); }
.agenten, .ad-raster { list-style: none; margin: 0; padding: 0 0 0 var(--space-xl); display: grid; gap: var(--space-xs); position: relative; }
.agenten::before { content: ""; position: absolute; left: var(--space-sm); top: -24px; bottom: 24px; width: 2px; background: var(--linie); }
.agent {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-sm); align-items: start;
  padding: var(--space-sm); border-radius: var(--r-klein); background: var(--glas); border: 1px solid var(--linie);
}
.agent::before { content: ""; position: absolute; left: calc(var(--space-xl) * -1 + var(--space-sm)); top: 28px; width: calc(var(--space-xl) - var(--space-sm)); height: 2px; background: var(--linie); }
.agent-bild, .agent-zeichen { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--graphit); }
.agent-zeichen { display: grid; place-items: center; color: var(--ink-2); font-size: 13px; }
.agent-text { min-width: 0; }
.agent-name { font: 500 14.5px/1.3 var(--display); }
.etikett { font: 400 11px/1.4 var(--sans); color: var(--ink-3); border: 1px solid var(--linie-stark); border-radius: 6px; padding: 0 var(--space-2xs); }
.agent-aufgabe { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.agent-zuletzt { color: var(--ink-3); font-size: 12.5px; margin-top: var(--space-2xs); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent-jetzt { color: var(--akzent); font-size: 12.5px; margin-top: var(--space-2xs); line-height: 1.35; }
.licht-klein { width: 10px; height: 10px; border-radius: 50%; margin-top: var(--space-2xs); border: 1.5px solid var(--ink-4); flex: none; }
.licht-klein.ruht { border-color: var(--gruen); background: var(--gruen); }
.licht-klein.arbeitet { background: var(--akzent); border-color: var(--akzent); border-radius: 2px; }
.licht-klein.fehler { border: 0; border-radius: 1px; rotate: 45deg; background: var(--rot); }
.licht-klein.unklar { border-style: dashed; border-color: var(--gelb); }
.licht-klein.geplant { border-style: dotted; }
.licht-klein.fertig { border-color: var(--gruen); background: var(--gruen); }
.agent.arbeitet { border-color: var(--akzent-linie); background: var(--akzent-wasch); }
.agent.arbeitet .agent-bild { box-shadow: 0 0 0 2px var(--akzent); }
.agent.arbeitet::before { background: var(--akzent); }
.agent.fehler { border-color: var(--rot-linie); }
.agent.geplant { background: transparent; border-style: dashed; }
.agent.geplant .agent-bild { filter: grayscale(1); opacity: .6; }
.ad { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--space-sm); background: var(--glas); border: 1px solid var(--linie); font-size: 12.5px; min-width: 0; }
.ad-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ad-zeichen { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-4); flex: none; }
.ad.fertig .ad-zeichen { background: var(--gruen); border-color: var(--gruen); }
.ad.arbeitet .ad-zeichen { background: var(--akzent); border-color: var(--akzent); border-radius: 2px; }
.strom { padding: 28px 20px; border-radius: var(--r-gross); }
.zeile-ereignis { grid-template-columns: 32px minmax(0, 1fr) auto; padding: var(--space-sm) var(--space-xs); }
.ereignis-bild { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.zeile-ereignis[data-zustand="laeuft"] .ereignis-bild { box-shadow: 0 0 0 2px var(--akzent); }
.zeile-ereignis[data-zustand="fehler"] .ereignis-bild { box-shadow: 0 0 0 2px var(--rot); }
.zeile-ereignis .zeile-name { font-size: 14.5px; }
.zeile-wann { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.strom-fuss { color: var(--ink-3); font-size: 12px; margin-top: var(--space-sm); }

/* ---------------------------------------------------------------- Abteilungsseiten */
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); padding: clamp(var(--space-xl), 6vw, 88px) 0 var(--space-lg); flex-wrap: wrap; }
.seitenkopf .status { margin-top: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: 999px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); }
.seitenkopf-satz { margin-top: var(--space-sm); max-width: 60ch; font: 400 18px/1.45 var(--display); color: var(--ink-2); }
.seiten-reiter { width: max-content; margin-bottom: var(--space-lg); position: sticky; top: calc(76px + env(safe-area-inset-top)); z-index: 40; }
.hinweis { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-radius: var(--r-klein); background: var(--glas); border: 1px solid var(--linie); font-size: 14px; color: var(--ink-2); }
.hinweis.fehler { background: var(--rot-wasch); border-color: var(--rot-linie); color: var(--rot-ink); }
.leer { color: var(--ink-3); padding: var(--space-lg) var(--space-2xs); display: grid; gap: var(--space-xs); }
.fehler-text { color: var(--rot-ink); font-size: 13.5px; }

.chat { display: flex; flex-direction: column; gap: var(--space-sm); padding-bottom: var(--space-xs); }
.trenner { text-align: center; margin: var(--space-sm) 0 var(--space-2xs); }
.trenner span { font: 500 12px/1 var(--sans); color: var(--ink-3); background: var(--glas); padding: var(--space-xs) var(--space-sm); border-radius: 999px; border: 1px solid var(--linie); }
.leise-trenner span { border-color: transparent; background: none; }
.blase { max-width: min(88%, 680px); padding: var(--space-sm) var(--space-md) var(--space-xs); border-radius: 22px; display: grid; gap: var(--space-xs); min-width: 0; line-height: 1.5; }
.blase ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }
.blase a { color: var(--akzent); text-decoration: underline; text-decoration-color: var(--akzent-linie); }
.blase .tz { font-size: 13.5px; color: var(--ink-3); }
.blase.jan { align-self: flex-end; background: var(--akzent-wasch); border: 1px solid var(--akzent-linie); border-bottom-right-radius: 6px; }
.blase.team { align-self: flex-start; background: var(--glas-dicht); border: 1px solid var(--glas-rand); border-bottom-left-radius: 6px; box-shadow: var(--schatten); }
.absender { font: 500 12.5px/1.2 var(--sans); color: var(--akzent); }
.zeit { font-size: 12px; color: var(--ink-3); justify-self: end; font-variant-numeric: tabular-nums; }
.systemzeile { align-self: center; max-width: 92%; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.systemzeile.zwischen { align-self: flex-start; text-align: left; padding-left: var(--space-sm); border-left: 2px solid var(--linie-stark); }
.blase.lang:has(details[open]) .anriss { display: none; }
.blase details summary { list-style: none; color: var(--akzent); font-size: 13.5px; cursor: pointer; padding: var(--space-2xs) 0; min-height: 44px; display: flex; align-items: center; }
.blase details summary::-webkit-details-marker { display: none; }
.blase details[open] summary { display: none; }
.blase.fehler-blase { border-color: var(--rot-linie); background: var(--rot-wasch); }
.blase.arbeitet-blase { border-color: var(--akzent-linie); }
.tippt { display: flex; align-items: center; gap: var(--space-2xs); color: var(--ink-2); font-size: 13.5px; }
.tippt span { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); opacity: .5; }
.schritte { color: var(--ink-3); font-size: 13.5px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips .chip { justify-self: start; background: var(--glas-dicht); color: var(--ink-2); }
.chips .chip b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.chips .chip.warn { background: var(--rot-wasch); color: var(--rot-ink); }
.dock { position: sticky; bottom: calc(var(--space-md) + env(safe-area-inset-bottom)); display: flex; justify-content: center; padding-top: var(--space-sm); z-index: 20; }

.abschnitt { font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--display); letter-spacing: -.03em; margin: var(--space-xl) 0 var(--space-md); }
.liste, .karten { display: grid; gap: var(--space-sm); }
.eintrag, .karte { background: var(--glas); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); border-radius: var(--r-klein); padding: var(--space-md) 20px; display: grid; gap: var(--space-2xs); min-width: 0; }
.karte { padding: var(--space-lg); gap: var(--space-sm); border-radius: var(--r); }
.karte h2 { font: 500 23px/1.1 var(--display); letter-spacing: -.03em; }
.karte p { color: var(--ink-2); }
.eintrag-oben { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.eintrag-oben strong { min-width: 0; font: 500 16px/1.3 var(--display); }
.ablauf.fehler { border-color: var(--rot-linie); }
.status-chip { flex: none; font: 500 12px/1 var(--sans); padding: var(--space-xs) var(--space-sm); border-radius: 999px; color: var(--ink-2); background: var(--glas-dicht); }
.status-chip.fertig { color: var(--gruen); background: var(--gruen-wasch); }
.status-chip.fehler { color: var(--rot-ink); background: var(--rot-wasch); }
.status-chip.laeuft, .status-chip.angefordert { color: var(--akzent); background: var(--akzent-wasch); }

/* Knöpfe */
.knopf, .knopf-gold {
  display: inline-flex; justify-content: center; align-items: center; gap: var(--space-xs); min-height: 54px; padding: 0 var(--space-lg);
  border: 0; border-radius: 999px; background: var(--akzent); color: var(--auf-hell); font: 500 16px/1 var(--sans); cursor: pointer;
  box-shadow: var(--schatten-knopf); transition: transform .3s var(--aus), box-shadow .3s var(--weich), background .3s var(--weich);
}
.knopf:active, .knopf-gold:active { transform: scale(.97); }
.knopf-leise {
  display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer;
  background: var(--glas-dicht); color: var(--ink); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); font: 500 15px/1 var(--sans);
  transition: background .3s var(--weich);
}
.knopf-gold[disabled], .knopf[disabled] { background: var(--glas-dicht); color: var(--ink-3); box-shadow: none; cursor: not-allowed; transform: none; }
.breit { width: 100%; }

/* Bestätigung als Blatt */
.blatt {
  border: 1px solid var(--glas-rand); padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; color: var(--ink);
  background: var(--grund-kopf-dicht); border-radius: var(--r) var(--r) 0 0; box-shadow: 0 50px 100px -30px var(--vorhang);
}
.blatt[open] { animation: blattAuf .32s var(--aus); }
.blatt::backdrop { background: var(--vorhang); }
.blatt form { padding: var(--space-lg) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom)); display: grid; gap: var(--space-sm); }
.blatt h2 { font: 400 28px/1.05 var(--display); letter-spacing: -.035em; }
.blatt p { color: var(--ink-2); }
.blatt-knoepfe { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-sm); margin-top: var(--space-xs); }
@keyframes blattAuf { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* ---------------------------------------------------------------- Anmeldung */
.eingang {
  min-height: 100vh; min-height: 100dvh; width: min(460px, 100%); margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--space-xl) + env(safe-area-inset-top)) var(--rand-x) calc(var(--space-xl) + env(safe-area-inset-bottom));
}
.eingang-marke { display: inline-flex; align-items: center; gap: var(--space-sm); margin-bottom: 44px; }
.eingang-titel { margin: 0; font: 400 clamp(44px, 11vw, 64px)/1 var(--display); letter-spacing: -.045em; }
.eingang-satz { margin: var(--space-md) 0 32px; font: 400 18px/1.45 var(--display); color: var(--ink-2); letter-spacing: -.01em; }
.eingang-karte { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: 30px; background: var(--glas-dicht); border: 1px solid var(--glas-rand); box-shadow: var(--schatten); }
.eingang-zurueck { display: flex; justify-content: center; margin-top: var(--space-md); }
.feld { display: grid; gap: var(--space-xs); }
.feld > span { font: 500 13px/1 var(--sans); color: var(--ink-2); }
.feld input {
  width: 100%; min-height: 52px; padding: 0 var(--space-md); border-radius: var(--space-md); border: 1px solid var(--ink-4);
  background: var(--glas); color: var(--ink); font: 400 16px/1 var(--sans);
}
.feld input:focus { outline: none; }
.feld input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.feld input[aria-invalid="true"] { border-color: var(--rot); }
.feld-hilfe { font-size: 13px; color: var(--ink-3); }
.meldung { margin: 0; padding: var(--space-sm) var(--space-md); border-radius: 14px; background: var(--rot-wasch); color: var(--rot-ink); font-size: 14px; }
.meldung:focus-visible { outline-offset: 2px; }
.schritt { display: flex; gap: var(--space-sm); align-items: baseline; color: var(--ink-2); font-size: 14px; }
.schritt b { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--akzent-wasch); color: var(--akzent); display: grid; place-items: center; font-size: 12px; }
.geheim { word-spacing: var(--space-2xs); font-variant-numeric: tabular-nums; }
.fehlerseite { margin: clamp(var(--space-xl), 8vw, 112px) 0; padding: var(--space-xl); display: grid; gap: var(--space-md); }

/* ---------------------------------------------------------------- Zeiger-Ring (nur echte Maus, s. app.js)
   Der Systemzeiger bleibt immer sichtbar. Zwei Ebenen: .zeiger-ring trägt nur die Position, .zeiger-blase Grösse,
   Versatz und Farbe; auf einer Ebene würde scale die Position mitskalieren (Spezifikation 8.2). */
.zeiger { display: none; }
html.zeiger-an .zeiger { display: block; position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; transition: opacity .25s; }
.zeiger-ring { position: absolute; left: 0; top: 0; will-change: transform; }
.zeiger-blase {
  position: absolute; left: -48px; top: -48px; width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; scale: .4; border: 3px solid var(--linie-punkt);
  transition: scale .4s var(--feder), translate .4s var(--feder), background .3s var(--weich), border-color .3s var(--weich), opacity .3s;
}
.zeiger-text { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--auf-hell); font: 500 13px/1 var(--sans); white-space: nowrap; opacity: 0; scale: .6; transition: opacity .2s, scale .35s var(--feder); }
.zeiger-text .ico { width: 14px; height: 14px; }
.zeiger.auf-kachel .zeiger-blase { scale: .84; translate: 52px 46px; background: var(--akzent); border-color: var(--akzent); }
.zeiger.auf-kachel .zeiger-text { opacity: 1; scale: 1; }
.zeiger.auf-knopf .zeiger-blase { scale: .58; border-color: var(--akzent-linie); background: var(--akzent-wasch); }
.zeiger.auf-text .zeiger-blase, .zeiger.auf-figur .zeiger-blase { opacity: 0; }
.zeiger.gedrueckt .zeiger-blase { scale: .32; }
.zeiger.auf-knopf.gedrueckt .zeiger-blase { scale: .46; }
.zeiger.auf-kachel.gedrueckt .zeiger-blase { scale: .74; }
.zeiger.weg { opacity: 0; }

/* ---------------------------------------------------------------- Hover nur mit echter Maus */
@media (hover: hover) and (pointer: fine) {
  .reiter-pille:hover { color: var(--ink); background: var(--glas-hell); }
  .reiter-pille[aria-current="page"]:hover { background: var(--ink); color: var(--auf-hell); }
  .reiter-dunkel .reiter-pille[aria-current="page"]:hover { background: var(--akzent-hell); }
  .rund-knopf:hover { background: var(--glas-hell); color: var(--ink); }
  .zeile:hover { background: var(--glas); }
  .raum-pfeil:hover { background: var(--akzent); color: var(--auf-hell); border-color: transparent; }
  .raum-pfeil:hover .ico { transform: rotate(45deg); }
  a.kopf-karte:hover { translate: 0 -4px; border-color: var(--akzent-linie); box-shadow: var(--schatten-hoch); }
  .knopf:hover, .knopf-gold:hover:not([disabled]) { background: var(--akzent-hell); box-shadow: 0 20px 40px -16px var(--akzent-glanz); }
  .knopf-leise:hover { background: var(--glas-hell); }
  .text-link:hover { text-decoration-color: var(--akzent); }
}
.kopf.ist-gescrollt .reiter.kopf-reiter { box-shadow: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .glas, .reiter, .live-chip, .eingang-karte { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
}

/* ---------------------------------------------------------------- Bewegung (abschaltbar) */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-zeigen] { opacity: 0; translate: 0 34px; transition: opacity .8s var(--weich), translate .9s var(--weich); transition-delay: calc(min(var(--i, 0), 8) * 70ms); }
  html.js [data-zeigen].ist-sichtbar { opacity: 1; translate: 0 0; }
  html.js .hinter[data-zeigen] { scale: .96; transition: opacity .9s var(--weich), translate 1s var(--weich), scale 1.1s var(--weich); }
  html.js .hinter.ist-sichtbar { scale: 1; }
  html.js .hinter.ist-sichtbar .zeile { animation: zeileAn .6s var(--weich) calc(min(var(--i, 0), 12) * 40ms + .2s) backwards; }
  html.js:not(.angekommen) [data-auftritt] { animation: auftritt .9s var(--weich) calc(var(--i) * 90ms + 150ms) backwards; }
  html.js:not(.angekommen) .gruss .wort > span { animation: wortAuf 1s var(--weich) calc(var(--i) * 90ms + 100ms) backwards; }
  html.js .matrix circle { animation: punktAn .5s var(--aus) calc(var(--i) * 11ms + 700ms) backwards; }
  html.js.angekommen .matrix circle { animation-delay: calc(var(--i) * 8ms); }
  html.js:not(.angekommen) .leiste.ist-sichtbar .leiste-punkt { animation: punktAn .5s var(--aus) calc(var(--i) * 28ms + 250ms) backwards; }
  html.js .leiste.ist-sichtbar .leiste-jetzt::before { animation: linie .8s var(--weich) .2s backwards; }
  html.js .figur-blase { animation: einblenden .4s var(--weich) backwards; }
  @keyframes zeileAn { from { opacity: 0; translate: 0 12px; } }
  @keyframes auftritt { from { opacity: 0; translate: 0 16px; filter: blur(6px); } }
  @keyframes wortAuf { from { transform: translateY(105%); } }
  @keyframes punktAn { from { opacity: 0; scale: .1; } }
  @keyframes linie { from { transform: scaleY(0); transform-origin: bottom; } }
  @keyframes einblenden { from { opacity: 0; translate: -50% 6px; } }
  .tippt span { animation: atmen 1.6s var(--weich) infinite; }
  .tippt span:nth-child(2) { animation-delay: .2s; }
  .tippt span:nth-child(3) { animation-delay: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  html.js [data-zeigen] { opacity: 1; translate: none; }
}

/* iPhone und andere Touch-Geräte: keine treibenden Flecken, kein Puls, Kopfzeile deckend statt mit Unschärfe */
@media (hover: none), (pointer: coarse) {
  .blob, .licht-puls { animation: none; }
  .kopf.ist-gescrollt { background: var(--grund-kopf-dicht); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------------------- Breiten */
@media (max-width: 1099px) {
  .kopf-reiter { display: none; }
  .tabbar { display: grid; }
  .haupt { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-lg)); }
  .dock { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-sm)); }
  .spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spalte-anschluss, .org-stamm { display: none; }
  .org-jan { margin-bottom: var(--space-md); }
  .seiten-reiter { top: calc(68px + env(safe-area-inset-top)); }
}
@media (max-width: 860px) {
  .raeume { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .raum { border-radius: 24px; }
  .raum-titel h3 { font-size: 20px; }
  .zeile { grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); padding: var(--space-md) var(--space-sm); }
  .zeile-kurz { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .zeile-licht { grid-row: 1; }
  .zeile-name { grid-column: 2; }
  .chip { grid-column: 3; grid-row: 1; }
  .zeile-zeit { grid-column: 2 / 4; display: flex; gap: var(--space-xs); align-items: baseline; font-size: 13px; }
  .zeile-zeit span { margin: 0; min-width: 40px; }
  .zeile-ereignis { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .zeile-ablauf { grid-template-columns: 10px minmax(0, 1fr) auto; }
  .zeile-ablauf .zeile-zeit + .zeile-zeit { grid-column: 2 / 4; }
  .hinter { border-radius: 30px; margin: 0 calc(var(--rand-x) * -.5); }
  .spalten { grid-template-columns: minmax(0, 1fr); }
  .seiten-reiter { width: 100%; }
}
@media (max-width: 520px) {
  .live-chip { padding: var(--space-xs) var(--space-sm); font-size: 12px; }
  .marke-wort { display: none; }
  .kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
  .kennzahlen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kennzahl dd { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .matrix { height: 34px; }
  .kz-pille { padding: var(--space-2xs) var(--space-xs); font-size: 11.5px; }
  .leiste { padding: 20px var(--space-md) var(--space-md); border-radius: 26px; }
  .leiste-marke:nth-of-type(even) { display: none; }
  .leiste-punkt { width: 12px; height: 12px; margin-left: calc(var(--space-xs) * -.75); bottom: calc(30px + var(--spur) * 12px); }
  .jetzt-pille .ico { display: none; }
  .leiste-legende { display: none; }
  .raum-fuss { grid-template-columns: 40px minmax(0, 1fr) auto; padding: var(--space-md); }
  .raum-fuss .status { grid-column: 2; grid-row: 2; justify-self: start; }
  .raum-avatar { width: 40px; height: 40px; }
}

/* Keine Verbindung zum Server: Zustände nicht mehr als aktuell zeigen */
.veraltet .status .licht { color: var(--grau-licht) !important; box-shadow: none !important; animation: none !important; }
.veraltet .zeile-licht { background: var(--grau-licht) !important; box-shadow: none !important; animation: none !important; }
.veraltet .status { opacity: .65; }

/* ---------------------------------------------------------------- Konzept-Kacheln (Iteration, Plan 2026-10-24) */
.konzepte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-md); }
.konzept {
  position: relative; display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; padding: var(--space-lg);
  border-radius: var(--r); background: var(--kachel-dunkel); border: 1px solid var(--linie); box-shadow: var(--schatten);
}
.konzept.arbeitet { border-color: var(--akzent-linie); box-shadow: var(--schatten), 0 30px 70px -40px var(--akzent-glanz); }
.konzept-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.konzept-agent { font: 500 13px/1.2 var(--sans); color: var(--akzent); text-align: right; min-width: 0; }
.konzept h2 { font: 500 23px/1.15 var(--display); letter-spacing: -.03em; overflow-wrap: break-word; min-width: 0; }
.konzept-fix { color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.konzept-fix span { color: var(--ink-3); }
.konzept-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: var(--space-sm) 0; border-block: 1px solid var(--linie); }
.konzept-zahlen div { min-width: 0; }
.konzept-zahlen dt { font: 500 12px/1.2 var(--sans); color: var(--ink-3); }
.konzept-zahlen dd { margin: var(--space-2xs) 0 0; font: 400 26px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.konzept-bester { font-size: 14px; color: var(--ink); }
.konzept-fuss { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-xs); }
.konzept-grund { color: var(--ink-3); font-size: 14px; }
.konzept-laeuft { color: var(--akzent); font-size: 14px; min-width: 0; }
.konzept-rang { font: 500 13px/1.2 var(--sans); color: var(--ink-3); }
.konzept-faellig { color: var(--akzent); font-size: 14px; }
.konzept-pause { color: var(--ink-2); font-size: 14px; }
.konzepte-takt { margin-bottom: var(--space-md); }
.status[data-status="gesperrt"] { color: var(--ink-3); }
.feld select {
  width: 100%; min-height: 52px; padding: 0 var(--space-md); border-radius: var(--space-md); border: 1px solid var(--ink-4);
  background: var(--glas); color: var(--ink); font: 400 16px/1 var(--sans);
}
.feld select:focus { outline: none; }
.feld select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.konzept-ad {
  display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  border-radius: var(--r-klein); background: var(--glas); border: 1px solid var(--glas-rand); color: var(--ink); text-decoration: none;
  transition: background-color .3s var(--weich), border-color .3s var(--weich);
}
.konzept-ad-play { position: relative; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--akzent); }
.konzept-ad-play::after { content: ""; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--graphit); }
.konzept-ad-text { display: grid; gap: var(--space-3xs); min-width: 0; }
.konzept-ad-text strong { font: 500 14px/1.2 var(--sans); }
.konzept-ad-text span { font-size: 13px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.konzept-ad:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .konzept-ad:hover { border-color: var(--akzent-linie); background: var(--akzent-wasch); } }

/* ---------------------------------------------------------------- Erkennung (Iteration, Bauplan I4) */
.erkennung-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); align-items: start; }
.erkennung-kopf .karte { justify-content: flex-start; gap: var(--space-sm); }
.erkennung-bericht { white-space: pre-line; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.erkennung-lauf { margin-bottom: var(--space-xl); }
.erkennung-lauf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); }
.erkennung-lauf-kopf h2 { font: 500 21px/1.2 var(--display); letter-spacing: -.02em; }
.erkennung-faelle { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-md); }
.erkennung-fall {
  display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; padding: var(--space-md);
  border-radius: var(--r); background: var(--kachel-dunkel); border: 1px solid var(--linie);
}
.erkennung-fall.unsicher { border-color: var(--akzent-linie); }
.erkennung-fall.gescheitert { opacity: .75; }
.erkennung-fall h3 { font: 500 17px/1.25 var(--sans); overflow-wrap: break-word; }
.erkennung-boegen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.erkennung-boegen img { display: block; width: 100%; height: auto; border-radius: var(--r-klein); background: var(--glas); }
.erkennung-boegen a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.erkennung-ziel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); font-size: 15px; }
.erkennung-ziel strong { color: var(--akzent); font-weight: 500; }
.erkennung-name { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.erkennung-warum summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.erkennung-warum p { margin-top: var(--space-xs); color: var(--ink-2); font-size: 14px; line-height: 1.5; }