/* Flexoopp Firmengehirn – Flexoopp-CI (Markenhandbuch 01.10.2026) im „Jarvis“-Look.
   Layout: Kommandozentrale. iPhone zuerst (Tab-Leiste unten), ab 900 px Seitenleiste.
   Regeln: eine UI-Farbe (brand), Glow und Linien nur in brand-Blau, Spektrum nur im Logo und
   als eine Spektrum-Linie pro Ansicht, keine bunten Verläufe, Status immer mit Wort. App startet dunkel. */

@font-face { font-family: "Figtree"; src: url("fonts/Figtree-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("fonts/Outfit-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Dunkel = Standard der App */
  --bg: #0f1319; --bg-2: #121820; --card: #171d27; --card-2: #1d2533; --card-3: #232c3d;
  --line: #273041; --line-2: #5d6a80;
  --ink: #eceef3; --text-2: #b3bccb; --muted: #8f9aad;
  --brand: #6aa5f5; --brand-d: #8ab8f7; --brand-soft: #1b2a45; --brand-text: #8ab8f7; --on-brand: #0f1319;
  --ok: #3ddc84; --ok-bg: #12301f; --warn: #f5a524; --warn-bg: #352510; --err: #ff7b7b; --err-bg: #3a1717;
  --anthracite: #2c2c2c;
  --glow: rgba(106, 165, 245, .45); --glow-2: rgba(106, 165, 245, .18); --raster: rgba(106, 165, 245, .055);
  --karte-rand: transparent; --shadow-card: none;
  --glas: rgba(23, 29, 39, .78);
  --spektrum: linear-gradient(90deg, #e23ad2, #e45025, #e19235, #8152c1, #4d72e8, #63ddf4, #74de4f);
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --head: "Outfit", "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --r8: 8px; --r-btn: 10px; --r: 12px; --r16: 16px;
  --feder: cubic-bezier(.2, .9, .25, 1.15); --sanft: cubic-bezier(.25, .8, .25, 1);
  --tab-h: 64px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6fa; --bg-2: #eceff5; --card: #ffffff; --card-2: #eceff5; --card-3: #e2e6ee;
  --line: #dde2ea; --line-2: #848ea0;
  --ink: #2c2c2c; --text-2: #4b5668; --muted: #5f6878;
  --brand: #2a66d1; --brand-d: #1f55b5; --brand-soft: #e7eefb; --brand-text: #2257b8; --on-brand: #ffffff;
  --ok: #12703a; --ok-bg: #e3f4e9; --warn: #a14a07; --warn-bg: #fbefdf; --err: #b91c1c; --err-bg: #fbe5e5;
  --glow: rgba(42, 102, 209, .3); --glow-2: rgba(42, 102, 209, .12); --raster: rgba(42, 102, 209, .06);
  --karte-rand: #dde2ea; --shadow-card: 0 1px 2px rgba(20,26,38,.06), 0 4px 14px rgba(20,26,38,.05);
  --glas: rgba(255, 255, 255, .8);
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 32px 32px; background-attachment: fixed;
}
button, input, textarea, select { font: inherit; color: inherit; }
input, textarea { font-size: 16px; } /* verhindert das Hineinzoomen auf dem iPhone */
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r8); }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 600; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 28px; line-height: 1.2; }
h2 { font-size: 19px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.35; }
.muted { color: var(--muted); }
.klein { font-size: 13px; line-height: 1.45; }
.eyebrow { margin: 0 0 6px; font-size: 14px; color: var(--text-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.msg { min-height: 1.2em; margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.msg.fehler { color: var(--err); }
.hud { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.spektrum-linie { height: 4px; width: 72px; border-radius: 4px; background: var(--spektrum); margin-top: 12px; }

/* Knöpfe */
.btn { border: 0; border-radius: var(--r-btn); min-height: 42px; padding: 10px 16px; font-weight: 600; transition: transform .15s var(--sanft), background .15s; }
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-d); }
.btn-ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-err { background: var(--err-bg); color: var(--err); }
.btn-gross { width: 100%; min-height: 48px; font-size: 16px; }
.btn-text { background: none; color: var(--brand-text); padding: 8px 4px; min-height: 0; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Anmeldung ---------- */
.login {
  min-height: 100%; display: grid; place-items: center;
  padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.login-card { width: min(100%, 380px); display: grid; gap: 14px; text-align: center; animation: hoch .6s var(--feder) both; }
.login-logo { width: 180px; height: auto; margin: 0 auto 10px; }
.login-card .muted { margin: -8px 0 6px; }
.feld { display: grid; gap: 6px; text-align: left; }
.feld label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.feld input { width: 100%; border: 1px solid var(--line-2); background: var(--card); border-radius: var(--r8); padding: 12px; }
.feld input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow-2); outline: none; }
@keyframes hoch { from { opacity: 0; transform: translateY(20px); } }

/* ---------- Grundgerüst ---------- */
.shell { min-height: 100%; }
.main {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 28px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.view { display: grid; gap: 24px; animation: einblenden .4s var(--sanft) both; }
@keyframes einblenden { from { opacity: 0; transform: translateY(8px); } }
.kopf { padding-top: 8px; }

/* Tab-Leiste */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around; align-items: stretch;
  height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  background: var(--glas); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--line);
}
.seiten-marke, .seiten-fuss { display: none; }
.tab {
  position: relative; flex: 1; display: grid; place-items: center; align-content: center; gap: 3px;
  border: 0; background: none; color: var(--muted); font-size: 11px; font-weight: 600; padding: 6px 0 0; transition: color .2s;
}
.tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: filter .3s, transform .3s var(--feder); }
.tab[aria-current="page"] { color: var(--brand-text); }
.tab[aria-current="page"] svg { filter: drop-shadow(0 0 6px var(--glow)); transform: translateY(-1px); }
.tab-badge {
  position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--err); color: var(--bg); font-size: 11px; line-height: 18px; text-align: center; font-weight: 700; animation: plopp .4s var(--feder);
}
@keyframes plopp { from { transform: scale(0); } }

@media (min-width: 900px) {
  .shell { display: grid; grid-template-columns: 236px 1fr; }
  .tabbar {
    position: sticky; top: 0; height: 100vh; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: calc(env(safe-area-inset-top, 0px) + 24px) 14px 18px max(14px, env(safe-area-inset-left, 0px));
    border-top: 0; border-right: 1px solid var(--line); background: var(--card);
  }
  .seiten-marke { display: grid; gap: 6px; padding: 0 8px 24px; }
  .seiten-marke img { width: 132px; height: auto; }
  .seiten-fuss { display: grid; margin-top: auto; padding: 0 8px; gap: 2px; justify-items: start; }
  .tab { flex: 0; display: flex; justify-content: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--r-btn); font-size: 15px; }
  .tab svg { width: 20px; height: 20px; }
  .tab[aria-current="page"] { background: var(--brand-soft); }
  .tab-badge { position: static; margin-left: auto; }
  .main { padding-bottom: 40px; max-width: 900px; }
}

/* ---------- Reaktor (Max) – auf der Startseite und im Gesprächsmodus ---------- */
.reaktor-buehne { display: grid; justify-items: center; gap: 12px; padding: 4px 0 0; }
.reaktor { position: relative; width: min(280px, 76vw); aspect-ratio: 1; display: grid; place-items: center; border: 0; background: none; padding: 0; color: inherit; }
.reaktor > * { grid-area: 1 / 1; }
.reaktor-welle, .reaktor-ringe { width: 100%; height: 100%; pointer-events: none; }
.reaktor-ringe { overflow: visible; }
.reaktor-ringe circle, .reaktor-ringe path { fill: none; stroke: var(--brand); }
.reaktor-ringe .r1 { stroke-width: 1; stroke-dasharray: 1.5 5; opacity: .6; transform-origin: 140px 140px; animation: drehen 40s linear infinite; }
.reaktor-ringe .r2 { stroke-width: 1.5; stroke-dasharray: 70 16 10 16; opacity: .5; transform-origin: 140px 140px; animation: drehen 22s linear infinite reverse; }
.reaktor-ringe .r3 { stroke-width: 1; opacity: .3; }
.reaktor-ringe .ticks { stroke-width: 1; opacity: .45; transform-origin: 140px 140px; animation: drehen 60s linear infinite; }
.reaktor-ringe .scan { stroke-width: 3; stroke-linecap: round; opacity: 0; transform-origin: 140px 140px; filter: drop-shadow(0 0 6px var(--glow)); }
@keyframes drehen { to { transform: rotate(360deg); } }
.kern {
  position: relative; z-index: 2; width: 46%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--brand); background: #0f1319;
  box-shadow: 0 0 0 6px var(--glow-2), 0 0 36px var(--glow), inset 0 0 26px var(--glow-2);
  display: grid; place-items: center; animation: atmen 4.5s ease-in-out infinite;
  transition: box-shadow .3s, transform .2s;
  --pegel: 0;
}
.kern img { width: 66%; height: auto; filter: drop-shadow(0 0 10px var(--glow)); transition: transform .12s linear; transform: scale(calc(1 + var(--pegel) * .18)); }
@keyframes atmen { 50% { box-shadow: 0 0 0 10px var(--glow-2), 0 0 56px var(--glow), inset 0 0 34px var(--glow-2); } }
[data-zustand="hoert"] .kern { animation: none; box-shadow: 0 0 0 calc(8px + var(--pegel) * 14px) var(--glow-2), 0 0 calc(50px + var(--pegel) * 50px) var(--glow), inset 0 0 30px var(--glow); }
[data-zustand="hoert"] .r2 { animation-duration: 6s; opacity: .9; }
[data-zustand="hoert"] .r1 { animation-duration: 14s; opacity: .85; }
[data-zustand="denkt"] .scan { opacity: 1; animation: drehen 1.1s linear infinite; }
[data-zustand="denkt"] .kern { animation: atmen 1.2s ease-in-out infinite; }
[data-zustand="denkt"] .kern img { animation: schimmern 1.2s ease-in-out infinite; }
@keyframes schimmern { 50% { opacity: .55; } }
[data-zustand="spricht"] .kern { animation: none; box-shadow: 0 0 0 calc(8px + var(--pegel) * 10px) var(--glow-2), 0 0 calc(44px + var(--pegel) * 40px) var(--glow), inset 0 0 30px var(--glow-2); }
[data-zustand="spricht"] .r2 { animation-duration: 10s; opacity: .8; }
.hud-zeile { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hud-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--glow); animation: blinken 2.4s ease-in-out infinite; }
@keyframes blinken { 50% { opacity: .35; } }
.mikro-hinweis { margin: 0; color: var(--text-2); font-size: 15px; text-align: center; }

/* Verlauf */
.verlauf { display: grid; gap: 12px; }
.blase { max-width: 88%; padding: 12px 16px; border-radius: var(--r16); animation: blase .35s var(--feder) both; overflow-wrap: anywhere; }
@keyframes blase { from { opacity: 0; transform: translateY(8px); } }
.blase.ich { justify-self: end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.blase.ich img { display: block; max-width: 180px; border-radius: var(--r8); margin-bottom: 6px; }
.blase.max, .hud-karte { position: relative; justify-self: stretch; max-width: 100%; background: var(--card); border-radius: var(--r); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px var(--glow-2); }
.blase.max::before, .blase.max::after, .hud-karte::before, .hud-karte::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--brand); pointer-events: none; filter: drop-shadow(0 0 4px var(--glow)); }
.blase.max::before, .hud-karte::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: var(--r); }
.blase.max::after, .hud-karte::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; border-bottom-right-radius: var(--r); }
.blase.max .wer { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.blase .vorlesen { margin-left: auto; border: 0; background: none; color: var(--brand-text); font-size: 13px; font-weight: 600; padding: 0; }
.verteilt { display: grid; gap: 8px; margin-top: 12px; }
.daten-karte {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r8); width: 100%; text-align: left;
  background: var(--card-2); border: 1px solid var(--line); color: var(--ink); font-size: 15px; transform-origin: 50% 0;
  animation: auswerfen .55s var(--feder) both;
}
.daten-karte .titel { flex: 1; min-width: 0; }
@keyframes auswerfen { from { opacity: 0; transform: translateY(-28px) scale(.82); filter: blur(4px); } 60% { box-shadow: 0 0 18px var(--glow); } }
.tippen { display: flex; align-items: center; gap: 10px; }
.scanbalken { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.scanbalken::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--brand); box-shadow: 0 0 10px var(--glow); animation: scan 1.1s ease-in-out infinite; }
@keyframes scan { from { left: -40%; } to { left: 100%; } }

/* Eingabe */
.eingabe {
  position: sticky; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 10px); z-index: 5;
  display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: var(--r16);
  background: var(--glas); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--glow-2);
}
@media (min-width: 900px) { .eingabe { bottom: 16px; } }
.eingabe:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow-2), 0 0 24px var(--glow-2); }
.eingabe-feld { flex: 1; min-width: 0; display: grid; gap: 6px; }
.eingabe textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 10px 6px; max-height: 140px; outline: none; }
.rund-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--card-2); color: var(--ink); transition: transform .2s var(--feder); }
.rund-btn:active { transform: scale(.9); }
.rund-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund-btn.senden { background: var(--brand); color: var(--on-brand); }
.anhang { display: flex; align-items: center; gap: 8px; padding: 6px 6px 0; animation: blase .3s var(--feder); }
.anhang img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r8); }
.anhang span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anhang-weg { border: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--card-2); font-size: 17px; line-height: 1; }
.optionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
.schalter { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.schalter input { position: absolute; opacity: 0; }
.schalter span { width: 40px; height: 24px; border-radius: 999px; background: var(--card-3); position: relative; transition: background .25s; box-shadow: inset 0 0 0 1px var(--line-2); }
.schalter span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .3s var(--feder); }
.schalter input:checked + span { background: var(--brand); box-shadow: 0 0 10px var(--glow-2); }
.schalter input:checked + span::after { transform: translateX(16px); background: var(--on-brand); }
.schalter input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Gesprächsmodus: schwarzer Bildschirm, animierte Schleife ---------- */
.gespraech {
  position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr auto;
  background: #0f1319; color: #eceef3;
  --brand: #6aa5f5; --brand-text: #8ab8f7; --on-brand: #0f1319; --line: #273041; --card: #171d27; --card-2: #1d2533; --ink: #eceef3; --text-2: #b3bccb; --muted: #8f9aad;
  --glow: rgba(106, 165, 245, .5); --glow-2: rgba(106, 165, 245, .2);
  background-image: radial-gradient(circle at 50% 42%, rgba(106,165,245,.10), transparent 55%), linear-gradient(rgba(106,165,245,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(106,165,245,.045) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) max(16px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 18px) max(16px, env(safe-area-inset-left, 0px));
  animation: gespraech-auf .5s var(--sanft) both;
}
@keyframes gespraech-auf { from { opacity: 0; transform: scale(1.04); } }
.gespraech.zu { animation: gespraech-zu .3s var(--sanft) forwards; }
@keyframes gespraech-zu { to { opacity: 0; transform: scale(1.04); } }
.gespraech-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gespraech-mitte { display: grid; align-content: center; justify-items: center; gap: 18px; min-height: 0; overflow: auto; }
.gespraech .reaktor { width: min(340px, 82vw, 46vh); }
.gespraech .kern { width: 50%; }
.gespraech-text { min-height: 3em; max-width: 30ch; text-align: center; font-family: var(--head); font-size: 22px; line-height: 1.35; color: var(--ink); transition: opacity .3s; }
.gespraech-text.ich { color: var(--text-2); font-family: var(--sans); font-size: 19px; }
.gespraech-karten { display: grid; gap: 8px; width: min(100%, 420px); }
.gespraech-fuss { display: flex; align-items: center; justify-content: center; gap: 18px; }
.kreis-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; transition: transform .2s var(--feder), box-shadow .2s; }
.kreis-btn:active { transform: scale(.92); }
.kreis-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kreis-btn.an { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: 0 0 20px var(--glow); }
.kreis-btn.ende { background: #3a1717; color: #ff7b7b; border-color: #3a1717; }

/* ---------- Karten, Listen ---------- */
.block { display: grid; gap: 12px; }
.block-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.liste { display: grid; gap: 12px; }
.karte {
  position: relative; background: var(--card); border: 1px solid var(--karte-rand); box-shadow: var(--shadow-card);
  border-radius: var(--r); padding: 16px; display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  animation: blase .4s var(--feder) both; transition: transform .2s var(--feder); color: var(--ink);
}
button.karte { width: 100%; text-align: left; }
button.karte:active { transform: scale(.985); }
.karte .inhalt { flex: 1; min-width: 0; }
.karte .titel { font-weight: 600; overflow-wrap: anywhere; }
.karte .unter { font-size: 13px; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; }
.karte .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.leer { text-align: center; padding: 20px 16px; border-radius: var(--r); border: 1px dashed var(--line-2); color: var(--muted); font-size: 13px; }
.pille { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--card-2); color: var(--text-2); white-space: nowrap; }
.pille.dringend, .pille.nein { background: var(--err-bg); color: var(--err); }
.pille.hoch, .pille.wartet { background: var(--warn-bg); color: var(--warn); }
.pille.ok { background: var(--ok-bg); color: var(--ok); }
.pille.frist { font-variant-numeric: tabular-nums; }
.pille.ueberfaellig { background: var(--err); color: var(--bg); }
.pille.info { background: var(--brand-soft); color: var(--brand-text); }

.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zahl { text-align: left; padding: 14px 16px; display: grid; gap: 4px; animation: blase .45s var(--feder) both; color: var(--ink); font: inherit; }
.zahl b { font-family: var(--head); font-size: 28px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zahl span { font-size: 13px; color: var(--text-2); }
.zahl.achtung b { color: var(--warn); }

/* Avatare: Kürzel in Flexoopp-Blau, aktive leuchten */
.avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-text); border: 1px solid var(--line-2);
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .04em;
}
.avatar.aktiv { border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow-2), 0 0 14px var(--glow); }
.avatar.klein { width: 30px; height: 30px; font-size: 10px; }
.avatar.gross { width: 64px; height: 64px; font-size: 15px; }
.avatar.max-marke { background: #0f1319; border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow-2), 0 0 16px var(--glow); }
.avatar.max-marke img { width: 66%; height: auto; }

/* Gehirn: Max in der Mitte, KI-Mitarbeiter im Kreis, Impulse auf den Verbindungen */
.gehirn { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: -4px auto 0; }
.gehirn-netz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.gehirn-netz .bahn { fill: none; stroke: var(--brand); stroke-width: .25; stroke-dasharray: .4 1.6; opacity: .5; transform-origin: 50px 50px; animation: drehen 90s linear infinite; }
.gehirn-netz .bahn-2 { opacity: .25; animation-duration: 140s; animation-direction: reverse; }
.gehirn-netz line { stroke: var(--brand); stroke-width: .22; opacity: .12; transition: opacity .4s; }
.gehirn-netz line.hat { opacity: .35; }
.gehirn-netz line.arbeitet { opacity: .7; stroke-dasharray: .8 .8; animation: fliessen 1.2s linear infinite; }
@keyframes fliessen { to { stroke-dashoffset: -3.2; } }
.gehirn-netz .puls { fill: var(--brand); filter: drop-shadow(0 0 1.2px var(--brand)) drop-shadow(0 0 2.5px var(--glow)); }
.gehirn-mitte { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -50%); z-index: 2; }
.knoten { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; padding: 0; color: inherit; display: grid; justify-items: center; gap: 2px; z-index: 3; animation: knoten .7s var(--feder) both; }
.knoten .name { font-size: 11px; color: var(--text-2); white-space: nowrap; line-height: 1.2; }
.knoten .zustand { white-space: nowrap; font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.1; }
.knoten.hat .zustand { color: var(--brand-text); }
.knoten.arbeitet .zustand { color: var(--brand-text); animation: blinken 1.4s ease-in-out infinite; }
.knoten.frei .avatar { opacity: .7; }
.knoten .avatar { position: relative; transition: transform .25s var(--feder), box-shadow .3s; }
.knoten:active .avatar { transform: scale(.9); }
.knoten.empfaengt .avatar { transform: scale(1.18); border-color: var(--brand); box-shadow: 0 0 0 4px var(--glow-2), 0 0 22px var(--glow); }
/* hat Aufgaben: ruhiger Puls · arbeitet: drehender Bogen und Leuchten */
.knoten.hat .avatar { border-color: var(--brand); }
.knoten.hat .avatar::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--brand); opacity: 0; animation: arbeitsring 2.8s var(--sanft) infinite; }
.knoten.arbeitet .avatar { border-color: var(--brand); box-shadow: 0 0 0 3px var(--glow-2), 0 0 16px var(--glow); }
.knoten.arbeitet .avatar::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--brand); border-right-color: var(--brand); animation: drehen 1.1s linear infinite; }
@keyframes arbeitsring { 0% { opacity: .8; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes knoten { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.gehirn-info { display: grid; justify-items: center; gap: 4px; margin-top: -8px; }
@media (max-width: 480px) {
  .knoten .avatar { width: 34px; height: 34px; font-size: 10px; }
  .knoten .name { font-size: 10px; }
}

.team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mitarbeiter { flex-direction: column; gap: 10px; text-align: left; }
.mitarbeiter .name { font-family: var(--head); font-weight: 600; font-size: 17px; }
.mitarbeiter .bereich { font-size: 13px; color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; }
.mitarbeiter.ist-max { grid-column: 1 / -1; }
.mitarbeiter .zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }

/* Segment */
.segment { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 999px; background: var(--card-2); }
.segment button { position: relative; z-index: 1; border: 0; background: none; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: color .2s; }
.segment button[aria-selected="true"] { color: var(--on-brand); }
.segment-pille { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 999px; background: var(--brand); box-shadow: 0 0 12px var(--glow-2); transition: transform .35s var(--feder); }
.wisch-hinweis { margin: -12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* Wischkarten */
.wisch { position: relative; border-radius: var(--r); overflow: hidden; animation: blase .4s var(--feder) both; }
.wisch-grund { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-weight: 700; color: var(--on-brand); background: var(--brand); opacity: 0; transition: opacity .15s; }
.wisch.zieht .wisch-grund, .wisch.weg .wisch-grund { opacity: 1; }
.wisch-grund .links { opacity: 1; } .wisch-grund .rechts { opacity: 0; }
.wisch[data-richtung="links"] .wisch-grund { background: var(--err); color: var(--bg); }
.wisch[data-richtung="links"] .wisch-grund .links { opacity: 0; }
.wisch[data-richtung="links"] .wisch-grund .rechts { opacity: 1; }
.wisch > .karte { margin: 0; animation: none; touch-action: pan-y; will-change: transform; }
.wisch.zurueck > .karte { transition: transform .45s var(--feder); }
.wisch.weg { animation: zuklappen .35s var(--sanft) forwards; }
@keyframes zuklappen { to { opacity: 0; height: 0; margin-top: -12px; } }
.freigabe-aktionen { display: flex; gap: 8px; margin-top: 12px; }
.freigabe-aktionen .btn { flex: 1; }
.betrag { font-family: var(--head); font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; margin-top: 6px; }

/* Bottom Sheet */
.sheet-hintergrund { position: fixed; inset: 0; z-index: 40; background: rgba(5, 8, 12, .55); animation: hg .25s both; }
@keyframes hg { from { opacity: 0; } }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 86vh; overflow: auto;
  background: var(--card); color: var(--ink); border-radius: var(--r16) var(--r16) 0 0; border-top: 1px solid var(--brand);
  box-shadow: 0 -10px 40px rgba(0,0,0,.35), 0 -1px 18px var(--glow-2);
  padding: 8px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  animation: sheet-hoch .45s var(--feder) both;
}
@media (min-width: 700px) { .sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); bottom: 24px; border-radius: var(--r16); border: 1px solid var(--brand); animation-name: sheet-mitte; } }
@keyframes sheet-hoch { from { transform: translateY(100%); } }
@keyframes sheet-mitte { from { transform: translate(-50%, 40px); opacity: 0; } }
.sheet.zu { animation: sheet-runter .28s var(--sanft) forwards; }
@keyframes sheet-runter { to { transform: translateY(100%); } }
@media (min-width: 700px) { .sheet.zu { animation-name: sheet-runter-mitte; } @keyframes sheet-runter-mitte { to { transform: translate(-50%, 40px); opacity: 0; } } }
.sheet-griff { width: 38px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 2px auto 14px; }
.sheet-inhalt { display: grid; gap: 14px; }
.sheet-kopf { display: flex; align-items: center; gap: 14px; }
.sheet textarea { width: 100%; min-height: 90px; border: 1px solid var(--line-2); background: var(--bg); border-radius: var(--r8); padding: 12px; resize: vertical; }
.sheet .knopfreihe { display: flex; gap: 10px; }
.sheet .knopfreihe .btn { flex: 1; }
.status-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.status-wahl button { border: 1px solid var(--line-2); background: var(--card); border-radius: var(--r-btn); min-height: 42px; font-weight: 600; }
.status-wahl button[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-text); background: var(--brand-soft); box-shadow: 0 0 10px var(--glow-2); }
.beschreibung { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Toast */
.toast {
  position: fixed; z-index: 70; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px;
  background: var(--card); color: var(--ink); border: 1px solid var(--brand); box-shadow: 0 0 20px var(--glow-2); animation: toast .5s var(--feder) both;
}
@keyframes toast { from { opacity: 0; transform: translate(-50%, -20px); } }

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

/* Logo je Thema: Wortmarke hell auf dunkel, Anthrazit auf hell */
.logo-hell { display: none !important; }
:root[data-theme="light"] .logo-hell { display: block !important; }
:root[data-theme="light"] .logo-dunkel { display: none !important; }
.login-logo.logo-hell { margin: 0 auto 10px; }

a.karte { color: var(--ink); }
a.karte:active { transform: scale(.985); }
#google-block .block-kopf { flex-wrap: wrap; }
#google-konto { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }