/* Reponara-Webseite — Nachbauten der App (Stand 24.09.2026).

   Werte aus brand/official/REPONARA-BRAND-KIT.md und dem App-Code:
   lib/shell/main_shell.dart (Leiste), lib/widgets/focus_band.dart (Band),
   lib/widgets/focus_page_header.dart (Kopf), lib/widgets/focus_appearance.dart
   (Grund, Karten, Knöpfe), lib/dashboard/dashboard_screen.dart (Kennzahlen,
   Balken). Alle Klassen tragen das Präfix a- — die Webseite benutzt es nie,
   deshalb kann keine Seitenregel in ein Fenster hineinwirken.

   Das Fenster hat feste 1120 × 740 px. .a-rahmen skaliert es per --s, das
   main.js aus der Breite berechnet. Alle Daten sind erfunden. */

.a-rahmen {
  --s: .6;
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 740;
  border-radius: calc(14px * var(--s) + 4px);
  overflow: hidden;
  box-shadow: 0 50px 90px -40px rgba(56, 30, 18, .42), 0 18px 34px -18px rgba(56, 30, 18, .28), 0 0 0 1px rgba(80, 55, 40, .10);
  background: #F6EEE6;
}
.a-fenster {
  --grund: #F6EEE6;
  --grund-tief: #EFE3D7;
  --karte: #FFFAF6;
  --papier: #FFFCF7;
  --erhoben: #EDE1D0;
  --linie: #E8D9CC;
  --linie-fein: #EFE2D6;
  --text: #33261F;
  --neben: #59483B;
  --leise: #8A7A6A;
  --terra: #93472A;
  --terra-hell: #F4DDD2;
  --ocker: #7E5A22;
  --ocker-hell: #F3E6CC;
  --salbei: #4F6243;
  --salbei-hell: #E4EBDD;
  --rauch: #4E6675;
  --mauve: #8E5A63;
  --petrol: #3F6B66;
  --rot: #D1584F;
  --focus: linear-gradient(90deg, #302431 0%, #4A2D2D 52%, #68402E 100%);
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  /* Plattformfarben aus lib/dashboard/stats_collector.dart */
  --c4s: #C87B52; --fh: #B98C42; --mv: #B57E86; --ph: #A17C60; --iwc: #9C7CA2;
  --of: #6E8896; --fy: #728764; --x: #6D6A61; --rd: #8A6758;

  position: absolute;
  left: 0;
  top: 0;
  width: 1120px;
  height: 740px;
  transform: scale(var(--s, .6));
  transform-origin: 0 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}
.a-fenster *, .a-fenster *::before, .a-fenster *::after { box-sizing: border-box; }
.a-fenster img { display: block; max-width: none; }
.a-fenster svg { display: block; flex: none; }

/* ── Titelleiste (macOS) ───────────────────────────────────────── */
.a-titelleiste { position: absolute; left: 0; top: 0; right: 0; height: 28px; display: flex; align-items: center; justify-content: center;
  background: #EFEAE6; border-bottom: 1px solid #DCD3CB; font-size: 13px; font-weight: 600; color: #4A433E; }
.a-ampel { position: absolute; left: 12px; top: 8px; display: flex; gap: 8px; }
.a-ampel i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.a-ampel i:nth-child(1) { background: #FF5F57; }
.a-ampel i:nth-child(2) { background: #FEBC2E; }
.a-ampel i:nth-child(3) { background: #28C840; }

/* ── Seitenleiste (main_shell.dart:294-711) ────────────────────── */
.a-leiste { position: absolute; left: 0; top: 28px; bottom: 0; width: 92px; padding: 14px 8px 12px; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #312724 0%, #29211F 48%, #201B19 100%); border-right: 1px solid #493C36; }
.a-marke { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.a-marke img { width: 26.5px; height: 30px; }
.a-marke img.a-wordmark { width: 72px; height: auto; }
.a-marke span { font-size: 11px; font-weight: 700; color: #FAF6F0; letter-spacing: .17px; line-height: 1; }
.a-naht { width: 68px; height: 1px; margin: 13px auto 10px; background: repeating-linear-gradient(90deg, rgba(140, 112, 86, .30) 0 3px, transparent 3px 7px); }
.a-eintrag { position: relative; height: 54px; margin: 2px 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid transparent; transition: background .26s cubic-bezier(.22, .61, .36, 1), border-color .26s, box-shadow .26s; }
.a-eintrag svg { width: 22px; height: 22px; transition: transform .42s cubic-bezier(.34, 1.56, .64, 1); }
.a-eintrag span { font-size: 10px; font-weight: 500; line-height: 1.1; letter-spacing: .16px; color: #CFC3B4; white-space: nowrap; }
.a-eintrag::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3.5px; height: 24px; margin-top: -12px; border-radius: 2px; background: var(--tief);
  transform: scaleY(0); transition: transform .22s cubic-bezier(.22, .61, .36, 1); }
.a-eintrag.ist-aktiv { background: linear-gradient(135deg, var(--akt-a), var(--akt-b)); border-color: color-mix(in srgb, var(--hell) 42%, transparent);
  box-shadow: 0 4px 9px rgba(0, 0, 0, .20), 0 0 22px -3px color-mix(in srgb, var(--tief) 26%, transparent); }
.a-eintrag.ist-aktiv::before { transform: scaleY(1); }
.a-eintrag.ist-aktiv svg { transform: translateY(-1.5px) scale(1.065); }
.a-eintrag.ist-aktiv span { font-weight: 700; color: #FFF5E9; }
.a-eintrag .a-zaehler { position: absolute; top: 4px; right: 12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #D1584F;
  color: #fff; font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }
.a-eintrag .a-rotpunkt { position: absolute; top: 8px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #D1584F; }
.a-luecke { flex: 1; }
/* Farbfamilien je Bereich (main_shell.dart:445-457) und die vorberechneten
   Kachelfarben des aktiven Eintrags. */
.a-f-dashboard { --tief: #9A6B2E; --hell: #D1A462; --akt-a: #5E4E40; --akt-b: #554230; }
.a-f-library { --tief: #93472A; --hell: #C87B52; --akt-a: #5C483E; --akt-b: #53392F; }
.a-f-studio { --tief: #7E5A22; --hell: #B98C42; --akt-a: #5A4B3C; --akt-b: #4E3E2D; }
.a-f-trailer { --tief: #8E5A63; --hell: #B57E86; --akt-a: #5A4946; --akt-b: #523E3D; }
.a-f-upload { --tief: #4F6243; --hell: #8FA87C; --akt-a: #554F44; --akt-b: #434035; }
.a-f-post { --tief: #4E6675; --hell: #6E8896; --akt-a: #504A48; --akt-b: #434141; }
.a-f-numbers { --tief: #7A5C80; --hell: #9C7CA2; --akt-a: #564849; --akt-b: #4D3E44; }
.a-f-maissage { --tief: #3F6B66; --hell: #7AA39D; --akt-a: #524E49; --akt-b: #3F423E; }
.a-f-todos { --tief: #6B5C3F; --hell: #A1906B; --akt-a: #574B42; --akt-b: #4A3E34; }
.a-f-sales { --tief: #5E6B3A; --hell: #93A063; --akt-a: #554D41; --akt-b: #464233; }
.a-f-settings { --tief: #7A5A44; --hell: #A17C60; --akt-a: #574840; --akt-b: #4D3E36; }

/* ── Inhalt und Bereiche ───────────────────────────────────────── */
.a-inhalt { position: absolute; left: 92px; top: 28px; right: 0; bottom: 0; overflow: hidden; }
.a-pane { position: absolute; inset: 0; padding: 18px 22px 0 24px; background: var(--grund); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .32s cubic-bezier(.22, .61, .36, 1), transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .32s; }
.a-pane.ist-aktiv { opacity: 1; visibility: visible; transform: none; transition: opacity .32s cubic-bezier(.22, .61, .36, 1), transform .32s cubic-bezier(.22, .61, .36, 1), visibility 0s; }

/* Kopf: REPONARA + Bereichsname + blasses Zeichen (focus_page_header.dart) */
.a-kopf { position: relative; min-height: 58px; margin-bottom: 12px; display: flex; align-items: flex-start; gap: 14px; }
.a-kopf__text { position: relative; z-index: 1; }
.a-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 2px; color: var(--terra); text-transform: uppercase; }
.a-titel { font-size: 32px; font-weight: 500; letter-spacing: -1.2px; line-height: 1.1; color: var(--text); margin-top: 5px; white-space: nowrap; }
.a-untertitel { font-size: 12px; line-height: 1.4; color: var(--neben); margin-top: 6px; white-space: nowrap; }
.a-motiv { position: absolute; left: 150px; top: -70px; width: 250px; height: 135px; pointer-events: none; z-index: 0; }
.a-motiv--gross { left: 170px; top: -118px; width: 200px; height: 200px; opacity: .12; }
.a-kopf__rechts { margin-left: auto; position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; padding-top: 12px; }

/* Focus-Band (focus_band.dart) */
.a-band { position: relative; overflow: hidden; border-radius: 16px; background: var(--focus); padding: 14px 22px; display: flex; align-items: center; gap: 20px; min-height: 72px; margin-bottom: 14px; }
.a-band--kompakt { border-radius: 10px; padding: 7px 10px; min-height: 0; }
.a-band::after { content: ""; position: absolute; right: 34px; top: -120px; width: 235px; height: 235px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(232, 170, 120, .20) 0%, rgba(208, 123, 98, .05) 56%, transparent 100%);
  border: 18px solid rgba(240, 182, 127, .13); box-shadow: 0 0 0 18px rgba(217, 155, 104, .08); }
.a-band__text { position: relative; z-index: 1; flex: none; }
.a-band__kicker { font-size: 10px; letter-spacing: 1.6px; color: #E4BC97; text-transform: uppercase; }
.a-band__titel { font-size: 19px; font-weight: 500; letter-spacing: -.4px; color: #FFF5E9; margin-top: 4px; white-space: nowrap; }
.a-band__aktionen { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 7px; }
.a-band--kompakt .a-band__aktionen { justify-content: flex-start; }
.a-bchip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: 10px; background: #51372C; border: 1px solid #8E6754;
  color: #FFF3E4; font-size: 12px; white-space: nowrap; flex: none; }
.a-bchip b { font-weight: 800; }
.a-bchip svg { width: 15px; height: 15px; }
.a-bchip[style*="--f"] { background: color-mix(in srgb, var(--f) 32%, #51372C); border-color: color-mix(in srgb, var(--f) 75%, transparent); }
.a-bchip--an { background: #77513C; border-color: #F1CBA1; }

/* Karten und Grundbausteine (focus_appearance.dart) */
.a-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 3px 10px rgba(56, 36, 24, .025); }
.a-label { font-size: 10px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--neben); }
.a-klein { font-size: 11.5px; color: var(--neben); }
.a-leise { color: var(--leise); }
.a-mono { font-family: var(--mono); }
.a-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--f, var(--terra)); flex: none; }

/* Knöpfe */
.a-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.a-knopf svg { width: 15px; height: 15px; }
.a-knopf--primaer { background: var(--terra); color: #fff; }
.a-knopf--gruen { background: var(--salbei); color: #F6FFF0; }
.a-knopf--sekundaer { background: var(--karte); border: 1px solid var(--linie); color: var(--text); font-weight: 500; }
.a-knopf--dunkel { background: #33261F; color: #FFFCF7; border-radius: 18px; }
.a-knopf--text { height: auto; padding: 0; color: var(--terra); font-weight: 600; }
.a-knopf--glas { height: 34px; border-radius: 17px; padding: 0 14px; font-weight: 500; color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 251, 245, .86) 55%, rgba(253, 246, 238, .78));
  border: 1px solid rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(122, 90, 68, .10), 0 6px 15px rgba(122, 90, 68, .13); }
.a-knopf--ton { color: var(--terra); background: linear-gradient(180deg, rgba(255, 244, 236, .98), rgba(248, 225, 209, .90)); border-color: rgba(255, 247, 240, .95);
  box-shadow: 0 1px 2px rgba(140, 72, 42, .14), 0 7px 16px rgba(140, 72, 42, .18); }
.a-rund { width: 34px; padding: 0; border-radius: 50%; }
.a-knopf--klein { height: 28px; padding: 0 10px; font-size: 11.5px; gap: 5px; }
.a-knopf--klein svg { width: 13px; height: 13px; }

/* Chips (theme.dart:360-369) */
.a-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 12px; background: var(--erhoben);
  border: 1px solid rgba(51, 38, 31, .12); color: var(--neben); font-size: 12px; white-space: nowrap; flex: none; }
.a-chip svg { width: 13px; height: 13px; }
.a-chip--an { background: color-mix(in srgb, var(--terra) 14%, var(--erhoben)); color: var(--terra); font-weight: 600; }
/* Zeitfilter-Pille (dashboard_screen.dart:2919): ausgewählt dunkel */
.a-pille { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 20px; background: var(--papier); border: 1px solid rgba(51, 38, 31, .12);
  color: var(--neben); font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.a-pille--an { background: #33261F; border-color: #33261F; color: #FFFCF7; }
/* Plattform-Pille mit Farbpunkt */
.a-ppille { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--karte); border: 1px solid var(--linie);
  font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.a-ppille--an { background: color-mix(in srgb, var(--terra) 12%, var(--karte)); border-color: color-mix(in srgb, var(--terra) 55%, transparent); font-weight: 800; }
/* Reiter (reiterleiste.dart) */
.a-reiter { display: inline-flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--karte); border: 1px solid var(--linie); }
.a-reiter span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: rgba(51, 38, 31, .7);
  border: 1px solid transparent; white-space: nowrap; }
.a-reiter span svg { width: 14px; height: 14px; }
.a-reiter .an { background: color-mix(in srgb, var(--terra) 14%, var(--karte)); border: 1.5px solid var(--terra); color: var(--terra); font-weight: 800; }
/* Plaketten */
.a-plakette { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.a-plakette--premium { background: rgba(246, 235, 214, .92); border: 1px solid rgba(110, 80, 25, .34); color: #65490F; }
.a-plakette--custom { background: color-mix(in srgb, var(--mauve) 12%, var(--karte)); border: 1px solid color-mix(in srgb, var(--mauve) 30%, transparent); color: var(--mauve); letter-spacing: 0; font-weight: 600; }
.a-plakette--rot { background: color-mix(in srgb, var(--rot) 14%, var(--karte)); color: #A63A32; letter-spacing: 0; font-weight: 700; font-size: 11px; height: 22px; }
.a-plakette--gruen { background: var(--salbei-hell); color: var(--salbei); letter-spacing: 0; font-weight: 700; }

/* Kennzahl-Karte und dunkle Hero-Zahl (dashboard_screen.dart:3064-3202) */
.a-kpi { padding: 16px 18px; }
.a-kpi__kopf { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--neben); }
.a-kpi__icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--terra) 14%, transparent); color: var(--terra); }
.a-kpi__icon svg { width: 16px; height: 16px; }
.a-kpi__wert { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 10px; }
.a-kpi__unter { font-size: 11.5px; color: var(--neben); margin-top: 4px; }
.a-kpi--held { background: var(--focus); border: 0; color: #fff; box-shadow: 0 3px 10px rgba(147, 71, 42, .06); }
.a-kpi--held .a-kpi__kopf { color: rgba(255, 255, 255, .70); }
.a-kpi--held .a-kpi__icon { background: rgba(255, 255, 255, .22); color: #fff; }
.a-kpi--held .a-kpi__unter { color: rgba(255, 255, 255, .70); }

/* Vorschaubilder: immer 16:9 */
.a-bild { aspect-ratio: 16 / 9; border-radius: 8px; object-fit: cover; background: var(--erhoben); }

/* Zeilen in Listen */
.a-zeile { display: flex; align-items: center; gap: 10px; }
.a-spalte { display: flex; flex-direction: column; }
.a-fett { font-weight: 700; }

/* Bewegung: Laufzeit-Animationen stehen nur unter .ist-aktiv, damit sie beim
   erneuten Aktivieren neu anlaufen. Endzustand = normale Regel (Keyframes
   nur mit from), deshalb stimmt das Bild auch bei reduzierter Bewegung. */
@keyframes a-auf { from { opacity: 0; transform: translateY(8px); } }
@keyframes a-ein { from { opacity: 0; } }
@keyframes a-wachsen-y { from { transform: scaleY(0); } }
@keyframes a-wachsen-x { from { transform: scaleX(0); } }
@keyframes a-plopp { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } }
.ist-aktiv .a-anim-auf { animation: a-auf .5s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
.ist-aktiv .a-anim-ein { animation: a-ein .5s ease-out both; animation-delay: calc(var(--i, 0) * 70ms + 120ms); }

/* Im reduzierten Modus und im Standbild: kein Übergang zwischen Bereichen. */
html.keine-bewegung .a-pane, html.keine-bewegung .a-eintrag, html.keine-bewegung .a-eintrag::before, html.keine-bewegung .a-eintrag svg { transition: none !important; }
html.keine-bewegung .a-fenster * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .a-pane, .a-eintrag, .a-eintrag::before, .a-eintrag svg { transition: none !important; }
  .a-fenster * { animation: none !important; }
}