/* neXus · Webseite nexustool.de
   Eigenständig, ohne Build. Farben wie die App (Dark only), Schriften
   selbst gehostet (keine Google-Server). Erkennungs-Element ist der
   „Beleg“ im Ablauf-Abschnitt. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Farben */
  --nacht: #0A0B14;      /* Hintergrund, wie die App */
  --regal: #12141F;      /* Flächen */
  --regal-2: #171A28;    /* leicht erhöhte Flächen */
  --kante: #23263A;      /* Linien */
  --kante-2: #33374F;
  --kreide: #EEF1F6;     /* Text */
  --grau: #A3ABBD;       /* Nebentext */
  --grau-2: #8A93A8;     /* Beschriftungen */
  --blau: #3B82F6;       /* Knöpfe, Links */
  --blau-hell: #60A5FA;
  --blau-soft: rgba(59, 130, 246, 0.16);  /* = --accent-soft der App */
  /* Hintergrund-Verlauf wie in der App (html/body in frontend/index.html) */
  --verlauf:
    radial-gradient(circle at 15% 0%, var(--blau-soft) 0%, transparent 35%),
    radial-gradient(circle at 85% 100%, var(--blau-soft) 0%, transparent 40%);

  /* Status-Farben der App, nur wo ein echter Status gemeint ist */
  --st-bestellt: #FB923C;
  --st-versandt: #FACC15;
  --st-lager: #34D399;
  --st-verkauft: #60A5FA;
  --st-retoure: #F87171;

  /* Schrift */
  /* Wie in der App: Inter für alles, Codes und Beleg in der Systemschrift mit fester Zeichenbreite */
  --f-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-text: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-h1: clamp(2.6rem, 1.5rem + 4.4vw, 5.1rem);
  --t-h2: clamp(1.95rem, 1.3rem + 2.5vw, 3.2rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --t-text: 1.0625rem;
  --t-klein: 0.9375rem;
  --t-auge: 0.6875rem;

  /* Abstände */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px;
  --a-6: 32px; --a-7: 48px; --a-8: 72px; --a-9: 112px;

  --r-klein: 8px;
  --r: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --kopf-h: 64px;
  --abschnitt: clamp(72px, 9vw, 112px);   /* gleicher Abstand oben/unten für alle Abschnitte */
  --kopf-abstand: 48px;                    /* Überschrift → Inhalt, kleiner als zwischen Abschnitten (Nähe) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0;
  letter-spacing: -0.011em;
  background: var(--nacht);
  color: var(--kreide);
  font-family: var(--f-text);
  font-size: var(--t-text);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Kein Markieren von Text, wie in der App (User-Wunsch). Impressum und
     Datenschutz bleiben markierbar, damit man Anschrift o.ä. kopieren kann. */
  -webkit-user-select: none;
          user-select: none;
}
.text-seite { -webkit-user-select: text; user-select: text; }
a, img { -webkit-user-drag: none; }  /* Links und Bilder nicht herausziehen */
/* Fest am Bildschirm wie in der App (background-attachment: fixed). Als eigene
   Ebene statt „fixed“, weil Safari auf iPhone/iPad das sonst ignoriert. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image: var(--verlauf);
  pointer-events: none;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blau-hell); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

.sprung {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--kreide); color: var(--nacht); padding: 10px 16px; border-radius: var(--r-klein);
  font-weight: 600; text-decoration: none;
}
.sprung:focus { top: 12px; }

/* ---------- Typo-Bausteine ---------- */
h1, h2, h3 { font-family: var(--f-display); color: var(--kreide); text-wrap: balance; }
h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
h2 {
  font-size: var(--t-h2);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -0.032em;
}
h3 {
  font-size: var(--t-h3);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

/* ---------- Knöpfe & Links ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 22px;
  background: var(--blau); color: #fff;
  font-family: var(--f-text); font-weight: 650; font-size: 1rem;
  border-radius: 999px; text-decoration: none;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}
.knopf:hover { background: #2F74E8; }
.knopf:active { transform: scale(0.98); }
.knopf-klein { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }

.link-pfeil {
  color: var(--kreide); text-decoration: none; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
}
.link-pfeil::after { content: '→'; transition: transform 200ms var(--ease); }
.link-pfeil:hover::after { transform: translateX(3px); }

/* ---------- Kopfzeile wie in der App ----------
   Logo oben links (scrollt mit weg), schwebende Leiste in der
   Mitte mit gleitendem blauen Feld, Knopf-Pille oben rechts. Beim
   Runterscrollen verschwinden Leiste und Knöpfe, beim Hochscrollen sind
   sie sofort wieder da (wie useHideOnScroll in der App). */
.marke {
  position: absolute; top: 16px; left: 32px; z-index: 51;
  height: 46px; display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.marke img { height: 20px; width: auto; }

.dock-wrap {
  position: fixed; top: 16px; left: 50%; z-index: 50;
  transform: translateX(-50%);
  max-width: calc(100vw - 24px);
  transition: transform 280ms var(--ease), opacity 280ms var(--ease);
}
.dock, .topbar {
  background: rgba(20, 22, 33, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.dock {
  position: relative; display: flex; padding: 5px;
  transition: box-shadow 380ms var(--ease);
}
.dock:hover { box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); }
.dock-anzeiger {
  position: absolute; top: 5px; bottom: 5px; left: 0; width: 0;
  background: var(--blau); border-radius: 999px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  opacity: 0; pointer-events: none;
  transition: left 460ms var(--ease), width 460ms var(--ease), opacity 280ms var(--ease);
}
.dock-anzeiger.ist-bereit { opacity: 1; }
.dock-item {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3;
  color: #94A3B8; text-decoration: none; white-space: nowrap; flex-shrink: 0;
  transition: color 280ms var(--ease);
}
.dock-item svg { width: 16px; height: 16px; flex: none; }
.dock-item:hover { color: var(--kreide); }
.dock-item.ist-aktiv { color: #fff; }
.dock-item .kurz { display: none; }

.topbar {
  position: fixed; top: 16px; right: 16px; z-index: 51;
  display: flex; align-items: center; gap: 6px; padding: 5px;
  transition: transform 280ms var(--ease), opacity 280ms var(--ease);
}
.topbar-link {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px;
  border-radius: 999px; color: #94A3B8; text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em;
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.topbar-link:hover { color: var(--kreide); background: rgba(255, 255, 255, 0.08); }
.topbar .knopf-klein {
  min-height: 34px; padding: 0 16px; font-size: 13.5px; letter-spacing: -0.01em;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.kopf-weg .dock-wrap { transform: translateX(-50%) translateY(calc(-100% - 32px)); opacity: 0; pointer-events: none; }
body.kopf-weg .topbar { transform: translateY(calc(-100% - 32px)); opacity: 0; pointer-events: none; }

/* ---------- 1 · Einstieg ---------- */
.held {
  padding-block: calc(78px + clamp(40px, 6vw, 88px)) var(--abschnitt);
}
/* Produktbild direkt unter der Einleitung, ragt beim Öffnen schon ins Bild */
.held-produkt { margin-top: clamp(40px, 5vw, 64px); text-align: left; }
.held h1 { max-width: 13ch; }
.held-satz {
  margin-top: var(--a-5);
  max-width: 38rem;  /* ca. 70 Zeichen je Zeile (lesbar: 45–75) */
  color: var(--grau);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-3) var(--a-5); margin-top: var(--a-6); }
.held-hinweis { margin-top: var(--a-4); font-size: var(--t-klein); color: var(--grau-2); }

/* Status-Schild (in der Status-Strecke im Ablauf) */
.badge {
  justify-self: start;
  display: inline-block; min-width: 76px; text-align: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  transition: background-color 280ms var(--ease), color 280ms var(--ease);
}
.badge-bestellt { background: rgba(251,146,60,0.16); color: #FDBA74; }
.badge-versandt { background: rgba(250,204,21,0.16); color: #FDE047; }
.badge-lager    { background: rgba(52,211,153,0.16); color: #6EE7B7; }
.badge-verkauft { background: rgba(96,165,250,0.16); color: #93C5FD; }

/* ---------- 2 · Plattformen ---------- */
.plattformen { border-block: 1px solid var(--kante); }
.plattformen-zeile { padding-block: var(--a-5); }
/* Schrägstriche liegen frei in der Lücke (beeinflussen den Umbruch nicht);
   am Zeilenanfang blendet site.js sie über .zeilenanfang aus. */
.plattformen ul { --luecke: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-2) var(--luecke); }
.plattformen li {
  position: relative;
  font-family: var(--f-display); font-weight: 600;  font-size: 1.0625rem; color: var(--kreide);
}
.plattformen li + li::before {
  content: '/'; position: absolute; left: calc(var(--luecke) / -2); transform: translateX(-50%);
  color: var(--kante-2); font-weight: 400;
}
.plattformen li.zeilenanfang::before { content: none; }
.plattformen li:last-child { color: var(--grau); font-weight: 500; }

/* ---------- Abschnitte allgemein ---------- */
.abschnitt-kopf { max-width: 46rem; }
.abschnitt-satz { margin-top: var(--a-4); color: var(--grau); max-width: 38rem; }

/* ---------- 3 · Ablauf: Status-Strecke ---------- */
.ablauf { padding-block: var(--abschnitt); }
/* Status-Strecke wie die Status-Kette der App: Bestellt → Versandt → Im Lager → Verkauft → Gewinn.
   Die Linie verbindet die Punkte und zieht sich beim Hereinscrollen einmal durch. */
.stationen {
  --spalten: 5; --luecke: 28px; --punkt: 16px;
  position: relative;
  display: grid; grid-template-columns: repeat(var(--spalten), minmax(0, 1fr)); gap: var(--luecke);
  margin-top: var(--kopf-abstand); text-align: left;
}
.stationen::before {
  content: ''; position: absolute; top: calc(var(--punkt) / 2 - 1px); height: 2px;
  left: calc(var(--punkt) / 2);
  right: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten) - var(--punkt) / 2);
  background: linear-gradient(90deg, #FB923C, #FACC15, #34D399, #60A5FA, #34D399);
  opacity: 0.55; border-radius: 2px; transform-origin: left center;
}
.station { position: relative; display: grid; justify-items: start; gap: 10px; align-content: start; }
.station-punkt {
  position: relative; z-index: 1;
  width: var(--punkt); height: var(--punkt); border-radius: 50%; margin-bottom: 8px;
  background: var(--farbe); box-shadow: 0 0 0 5px var(--nacht), 0 0 16px var(--farbe);
}
.punkt-bestellt { --farbe: var(--st-bestellt); }
.punkt-versandt { --farbe: var(--st-versandt); }
.punkt-lager    { --farbe: var(--st-lager); }
.punkt-verkauft { --farbe: var(--st-verkauft); }
.punkt-gewinn   { --farbe: var(--st-lager); }
.station h3 { font-size: 1.125rem; font-weight: 700; }
.station p { color: var(--grau); font-size: var(--t-klein); line-height: 1.55; }
.badge-gewinn { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; }

/* Linie zieht sich einmal durch (nur mit JavaScript und ohne „weniger Bewegung“) */
@media (prefers-reduced-motion: no-preference) {
  .js .stationen::before { transform: scaleX(0); transition: transform 1400ms var(--ease) 250ms; }
  .js .stationen.ist-drin::before { transform: scaleX(1); }
}

/* Schmal: Strecke senkrecht, Punkte links */
@media (max-width: 900px) {
  .stationen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stationen::before {
    top: calc(var(--punkt) / 2); bottom: 40px; left: calc(var(--punkt) / 2 - 1px); right: auto;
    width: 2px; height: auto;
    background: linear-gradient(180deg, #FB923C, #FACC15, #34D399, #60A5FA, #34D399);
    transform-origin: center top;
  }
  .station { padding-left: calc(var(--punkt) + 18px); }
  .station-punkt { position: absolute; left: 0; top: 2px; margin: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .stationen::before { transform: scaleY(0); }
  .js .stationen.ist-drin::before { transform: scaleY(1); }
}

/* ---------- Verkäufe-Nachbau (wie der Verkäufe-Tab der App) ---------- */
.verkaeufe { padding-block: var(--abschnitt); }
.verkaeufe .fenster { margin-top: var(--kopf-abstand); }
.v-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.v-karte {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r); padding: 16px 18px; display: grid; gap: 14px; align-content: start;
}
.v-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.v-titel { font-size: 14px; font-weight: 650; }
.v-datum { font-size: 11px; color: #94A3B8; margin-top: 2px; }
.v-trend { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.v-plus { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; }
.v-minus { background: rgba(248, 113, 113, 0.16); color: #FCA5A5; }
.v-gross { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.v-label, .v-mini p:first-child {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #94A3B8;
}
.v-wert { font-size: clamp(17px, 0.9rem + 0.5vw, 22px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px; white-space: nowrap; }
.v-gruen { color: #6EE7B7; }
.v-orange { color: #FDBA74; }
.v-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.v-mini p:last-child { font-size: 13px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.v-pills {
  display: flex; gap: 2px; padding: 4px; width: fit-content; max-width: 100%;
  border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.v-pill { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: #94A3B8; white-space: nowrap; }
.v-pill.ist-aktiv { background: var(--blau); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }

/* Artikel-Karten wie .pcard der App */
.k-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.k-karte {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
}
.k-bild { position: relative; aspect-ratio: 1 / 1; background: #fff; color: #2A2E3A; display: grid; place-items: center; }
.k-bild > svg { width: 52%; height: auto; }
.k-status {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(15, 23, 42, 0.85); color: #93C5FD; font-size: 11px; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.k-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.k-inhalt { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.k-titel {
  font-size: 13.5px; font-weight: 600; line-height: 1.3; min-height: 35px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.k-meta { font-size: 12px; color: #94A3B8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-chips { display: flex; gap: 6px; margin-top: 2px; }
.k-chip { display: inline-flex; padding: 3px 6px; border-radius: 999px; }
.k-chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.k-gruen { background: rgba(52, 211, 153, 0.16); color: #6EE7B7; }
.k-orange { background: rgba(251, 146, 60, 0.16); color: #FDBA74; }
.k-preise {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.k-plus { font-size: 12px; color: #6EE7B7; }

@media (max-width: 1240px) {
  .v-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .k-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .v-karten { grid-template-columns: minmax(0, 1fr); }
  .v-karte:nth-child(n+3) { display: none; }
  .k-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .k-karte:nth-child(n+5) { display: none; }
  .v-pills { display: none; }
}

/* ---------- Ausgaben ----------
   Nachbau des Tabs „Ausgaben & Einnahmen“ (16-ausgaben.js): Umschalter, vier
   Kennzahlen (finanzStatCard), „Demnächst fällig“, „Verteilung nach Kategorie“
   und die Ausgaben-Karten. Nur Beispieldaten. */
.ausgaben { padding-block: var(--abschnitt); }
.ausgaben .fenster { margin-top: var(--kopf-abstand); text-align: left; }
.ag-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ag-faellig-liste { display: grid; gap: 8px; }
.ag-faellig-liste li { display: flex; align-items: center; gap: 8px; color: #CBD5E1; }
.ag-faellig-liste svg, .ag-knopf svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ag-verteilung { display: grid; gap: 8px; }
.ag-verteilung p { display: flex; justify-content: space-between; gap: 12px; color: #CBD5E1; margin-bottom: 4px; }
.ag-verteilung p span:last-child { color: #94A3B8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-spur { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.ag-spur span { display: block; height: 100%; border-radius: 999px; background: var(--blau); }
.ag-liste-kopf, .ag-gruppe {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #94A3B8;
}
.ag-liste-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ag-knopf {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--kreide);
}
.ag-gruppe { margin-bottom: 10px; }
.ag-gruppe span { color: #7D889C; }
.ag-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
/* Karte wie .settings-section.finanz-karte */
.ag-karte {
  display: flex; flex-direction: column;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
}
.ag-name { font-size: 15px; font-weight: 600; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-betrag { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: #94A3B8; }
.ag-betrag strong { font-size: 22px; font-weight: 700; color: var(--kreide); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ag-chip {
  display: inline-block; margin-top: 10px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: #CBD5E1;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ag-faellig { font-size: 12px; color: #94A3B8; margin-top: 6px; }
.ag-aktiv {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #CBD5E1;
}
.ag-faellig + .ag-aktiv { margin-top: 12px; }
/* IosToggle der App, eingeschaltet */
.ag-schalter {
  position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px;
  background: var(--blau); border: 1px solid var(--blau);
}
.ag-schalter::after {
  content: ''; position: absolute; top: 2px; left: 20px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
@media (max-width: 1100px) {
  .ag-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ag-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ag-kpis { gap: 8px; }
  .ag-karten { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ag-karte:nth-child(n+3) { display: none; }
  .ag-verteilung li:nth-child(n+5) { display: none; }
  .ag-karte { padding: 14px 16px; }
}

/* ---------- 4 · Steuern ---------- */
.steuern { background: rgba(255, 255, 255, 0.02); border-block: 1px solid var(--kante); padding-block: var(--abschnitt); }
.modi {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-top: var(--kopf-abstand); text-align: left;
}
.modus {
  padding: 22px 22px 20px;
  /* Kopf + 4 Zeilen über alle drei Boxen auf gleicher Höhe */
  display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0;
}
.modus-kopf { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; }
.modus-kopf h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.modus-kopf p { margin-top: 2px; font-size: 13px; color: var(--grau-2); }
.modus dl { display: contents; }
.modus dl > div {
  display: grid; align-content: start; gap: 6px;
  padding-block: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.modus dl > div:last-child { padding-bottom: 0; }
.modus dt {
  font-size: var(--t-auge); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau-2);
}
.modus dd { display: grid; gap: 2px; }
.modus dd strong { font-size: 15px; font-weight: 600; color: var(--kreide); font-variant-numeric: tabular-nums; }
.modus dd span { font-size: 13.5px; line-height: 1.45; color: var(--grau); }

/* ---------- 5 · Dashboard ----------
   Nachbau des echten Dashboards (09-dashboard.js): gleiche Karten, Abstände,
   Beschriftungen und Farben wie in der App, nur mit Beispieldaten. */
.fenster {
  /* breiter als der Textbereich (bis 1360px), damit die fünf Karten Platz haben wie in der App */
  margin-inline: calc((100% - min(1360px, 100vw - 32px)) / 2);
  background-color: var(--nacht);
  background-image: var(--verlauf);
  border: 1px solid var(--kante-2); border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.8);
}
.fenster-inhalt { padding: clamp(12px, 2vw, 22px); display: grid; gap: 16px; font-size: 13px; line-height: 1.4; }

/* Gemeinsame Karte (stat-card / sectionPanel / vk-spark der App) */
.d-kpi, .d-panel, .d-spark {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
}
.d-kpi::before, .d-spark::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); opacity: 0.5;
}
.d-label {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94A3B8; margin-bottom: 6px;
}

.d-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.d-kpi { padding: 14px 18px; }
.d-kpi-hervor { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16); }
.d-kpi-hervor .d-label { color: var(--blau); }
.d-wert {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: clamp(18px, 1rem + 0.6vw, 24px); font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.d-trend { font-size: 12px; font-weight: 600; color: #6EE7B7; letter-spacing: 0; }
.d-unter { font-size: 12px; color: #94A3B8; margin-top: 4px; }

.d-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-panel { padding: 14px 18px; }
.d-panel-titel {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: #94A3B8; margin-bottom: 10px;
}
.d-panel-titel.d-blau { color: var(--blau); }
.d-panel-titel.d-orange { color: #FDBA74; }

/* alertRow der App */
.d-zeilen { display: grid; gap: 8px; }
.d-zeilen li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #CBD5E1;
}
.d-zeilen li span { flex: 1; min-width: 0; }
.d-zeilen li::after { content: '›'; color: #7D889C; font-size: 16px; line-height: 1; }
.d-zeilen svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.d-zeilen li.d-blau svg { color: var(--blau); }
.d-zeilen li.d-orange svg { color: #FDBA74; }

/* Sparkline-Karten der App */
.d-spark { padding: 18px 20px 14px; }
.d-spark .d-label { margin-bottom: 0; }
.d-spark-unter { font-size: 11px; font-weight: 500; color: #7D889C; margin: 4px 0 6px; }
.d-spark-summe { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: 4px; }
.d-spark-chart { display: block; width: 100%; height: 80px; margin-top: 14px; }
.d-achse {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: #7D889C; font-variant-numeric: tabular-nums;
}

/* RecentList der App */
.d-panel .d-liste { display: grid; grid-template-columns: minmax(0, 1fr); }
.d-liste li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; color: #CBD5E1;
}
.d-liste li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.d-liste li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-datum { color: #7D889C; font-size: 11px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.d-plus, .d-betrag { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 70px; text-align: right; flex-shrink: 0; }
.d-plus { color: #6EE7B7; }

/* ---------- 6 · Kleine Dinge ---------- */
.dinge-abschnitt { padding-block: var(--abschnitt); }
.dinge {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 5vw, 80px);
  margin-top: var(--kopf-abstand);
}
.dinge > div {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: var(--a-4);
  padding-block: 18px; border-top: 1px solid var(--kante);
}
.dinge dt { font-family: var(--f-display); font-weight: 650; font-size: 1.0625rem; }
.dinge dd { color: var(--grau); font-size: var(--t-klein); }

/* ---------- 7 · Beta ---------- */
.beta { background: rgba(255, 255, 255, 0.02); border-block: 1px solid var(--kante); padding-block: var(--abschnitt); }
.beta-raster { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.beta-text > p:not(.held-hinweis) { margin-top: var(--a-4); color: var(--grau); max-width: 32rem; }

/* ---------- 8 · FAQ ---------- */
.faq { padding-block: var(--abschnitt); display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--kopf-abstand); align-items: start; }
.faq-liste { border-top: 1px solid var(--kante); }
.faq details { border-bottom: 1px solid var(--kante); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--a-4);
  min-height: 56px; padding-block: 14px;
  font-family: var(--f-display); font-weight: 600; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-family: var(--f-text); font-weight: 400; color: var(--grau);
  font-size: 1.25rem; transition: transform 200ms var(--ease);
}
/* Plus dreht sich zum Kreuz: mit JavaScript über .ist-offen (sofort beim Klick), ohne über [open] */
html:not(.js) .faq details[open] summary::after,
.faq details.ist-offen summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--grau); max-width: 40rem; }
.faq details a { color: var(--blau-hell); }
.faq-kontakt {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--a-4) var(--a-5);
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
}
.faq-kontakt-titel { font-weight: 650; font-size: 1rem; }
.faq-kontakt-satz { color: var(--grau); font-size: var(--t-klein); margin-top: 2px; }
.faq-kontakt-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.faq-kontakt .knopf { gap: 8px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
.faq-kontakt svg { width: 16px; height: 16px; flex: none; }

/* ---------- Fußzeile ---------- */
.fuss { border-top: 1px solid var(--kante); padding-block: var(--a-6); }
.fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-4) var(--a-6); }
.fuss-zeile img { height: 18px; width: auto; opacity: 0.85; }
.fuss nav { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); margin-right: auto; }
.fuss a { color: var(--grau); text-decoration: none; font-size: 0.875rem; padding-block: 8px; }
.fuss a:hover { color: var(--kreide); }
.fuss p { font-size: 0.8125rem; color: var(--grau-2); }

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.text-seite { max-width: 46rem; padding-block: calc(78px + var(--a-7)) var(--a-9); }
.text-seite h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); max-width: none; }
.text-seite .stand { margin-top: var(--a-3); color: var(--grau-2); font-size: var(--t-klein); }
.text-seite h2 { font-size: 1.375rem; margin-top: var(--a-7); margin-bottom: var(--a-3); }
.text-seite p, .text-seite li { color: var(--grau); }
.text-seite p + p { margin-top: var(--a-3); }
.text-seite ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: var(--a-2); }
.text-seite strong { color: var(--kreide); font-weight: 600; }
.text-seite a { color: var(--blau-hell); }

/* ---------- Alles mittig (User-Wunsch) ----------
   Überschriften, Einleitungen und Knöpfe stehen in der Mitte; Abschnitte, die
   vorher zweispaltig waren (Beta, FAQ), stehen untereinander.
   Listen und Karten-Inhalte bleiben linksbündig, damit sie lesbar bleiben. */
.held, .abschnitt-kopf { text-align: center; }
.held h1, .held-satz, .abschnitt-kopf, .abschnitt-satz { margin-inline: auto; }
.held-aktionen { justify-content: center; }


.beta-raster { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.beta-text > p:not(.held-hinweis) { margin-inline: auto; }
.beta-text h2 { max-width: 20ch; margin-inline: auto; }

.faq { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.faq-liste, .faq-kontakt { width: min(100%, 800px); }

.fuss-zeile { flex-direction: column; text-align: center; }
.fuss nav { margin-right: 0; justify-content: center; }

/* ---------- Boxen wie in der App (.settings-section) ----------
   Gleiche Abschnitts-Box wie in Einstellungen und Fenstern der App: leicht
   abgesetzte Fläche, feiner Rand, Radius 14px, Innenabstand 18/20px. */
.modus, .dinge > div, .faq details {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
/* Funktionen: jede Funktion eine eigene Box */
.dinge { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dinge > div { display: block; padding: 18px 20px; }
.dinge dt { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 1100px) { .dinge { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* FAQ: jede Frage eine Box */
.faq-liste { border-top: 0; display: grid; gap: 8px; }
.faq details { padding-inline: 20px; }
.faq details p { padding-bottom: 18px; }

/* ---------- Bald dazu (geplante Funktionen) ----------
   Gleiche Box wie oben, aber gestrichelter Rand und „Bald“-Pille, damit klar
   ist, dass es das noch nicht gibt. */
.bald { margin-top: var(--a-8); }
.bald-titel { text-align: center; font-size: 1.25rem; font-weight: 700; }
.bald-liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: var(--a-5); }
.bald-liste li {
  position: relative;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 14px;
}
.bald-pill {
  display: inline-block; margin-bottom: 10px;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(59, 130, 246, 0.16); color: #93C5FD;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.bald-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.bald-liste li > p:last-child { color: var(--grau); font-size: var(--t-klein); }
@media (max-width: 1100px) { .bald-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bald-liste { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Symbole in den Funktions- und Bald-Boxen (Strichsymbole wie <Icon> der App) ---------- */
.f-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: rgba(59, 130, 246, 0.14); color: #93C5FD; border: 1px solid rgba(147, 197, 253, 0.12);
}
.f-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dinge dt { display: grid; justify-items: start; gap: 14px; }
.bald-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.bald-kopf .bald-pill { margin-bottom: 0; }
.bald-liste .f-icon { background: rgba(255, 255, 255, 0.05); color: #A3ABBD; border-color: rgba(255, 255, 255, 0.08); }

/* ---------- Einblenden wie in der App ----------
   Gleiche Bewegung wie fadeUp/cardIn der App: 12px von unten, 460ms (--t-modal),
   gestaffelt. Versteckt wird nur mit JavaScript (Klasse .js aus dem Kopf der
   Seite) und ohne „weniger Bewegung“ — sonst ist alles sofort da. Wann ein
   Element erscheint, steuert site.js (beim Öffnen bzw. sobald es ins Bild kommt). */
@keyframes kopfRein {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-rein] { opacity: 0; transform: translateY(12px); }
  .js [data-rein].ist-drin {
    opacity: 1; transform: none;
    transition: opacity 460ms var(--ease), transform 460ms var(--ease);
    transition-delay: var(--rein-verzug, 0ms);
  }
  .js .marke, .js .dock, .js .topbar { animation: kopfRein 460ms var(--ease) backwards; }
  .js .dock { animation-delay: 60ms; }
  .js .topbar { animation-delay: 120ms; }
}

/* ---------- Breakpoints ---------- */
/* Kopfzeile: erst „Anmelden“ raus, dann Symbole aus der Leiste, unter 860px Leiste unten (wie die App am Handy) */
@media (max-width: 1340px) {
  .topbar-anmelden { display: none; }
}
@media (max-width: 1180px) {
  .dock-item { padding: 8px 13px; }
  .dock-item svg { display: none; }
}
@media (max-width: 860px) {
  body { padding-bottom: 76px; }
  .marke { top: 8px; left: 16px; }
  .topbar { top: 8px; right: 8px; }
  .topbar .knopf-klein { min-height: 44px; padding: 0 18px; }
  .dock-wrap { top: auto; bottom: 8px; width: calc(100vw - 16px); max-width: calc(100vw - 16px); }
  body.kopf-weg .dock-wrap { transform: translateX(-50%); opacity: 1; pointer-events: auto; }
  .dock { padding: 4px; }
  .dock-anzeiger { top: 4px; bottom: 4px; }
  .dock-item {
    flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px;
    padding: 7px 2px 6px; font-size: 10.5px; letter-spacing: 0;
  }
  .dock-item svg { display: block; }
  .dock-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .dock-item .voll:has(+ .kurz) { display: none; }
  .dock-item .kurz { display: inline; }
}

@media (max-width: 900px) {
  .modi { grid-template-columns: minmax(0, 1fr); }
  .modus { grid-row: auto; display: block; }
  .d-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .d-kpi-hervor { grid-column: 1 / -1; }
  .d-zwei { grid-template-columns: 1fr; }
  .dinge { grid-template-columns: 1fr; }
  .beta-raster { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .knopf-klein { padding: 0 14px; font-size: 0.875rem; }
  .held-aktionen .knopf { width: 100%; }
  .plattformen ul { --luecke: 22px; }
  .dinge > div { grid-template-columns: 1fr; gap: var(--a-1); }
  .fenster-inhalt { padding: 10px; gap: 10px; }
  .d-kpis { gap: 8px; }
  .d-kpi, .d-panel { padding: 12px 14px; }
  .d-spark { padding: 14px 14px 12px; }
}


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; transition-delay: 0s !important; }
}