/* ---------------------------------------------------------------------------
   Vectral 2.0 — Basis und Shell (T18 n: Aufteilung von app.css, Sprint B4)

   Grundlage, Kopfleiste, Prozessleiste, Seitengerüst, Verlaufszone
   (Screen-Kopf), Nutzermenü, Hinweisbanner, Bewegung. Jede Seite bindet
   tokens.css, app.css und bausteine.css; je Bereich kommt eine Datei dazu:
   einstieg.css (Hauptmenü, Anmeldung), wizard.css (Import-Wizard),
   struktur.css (Grundriss, Gang-/Zonen-Editor), faktenbasis.css (Screens
   7–11, 16), modell.css (Modellrechnung, Ergebnis), verwaltung.css.

   Farbdisziplin: Navy = Struktur, Violett = Aktion, Teal = Vorschlag.
--------------------------------------------------------------------------- */

/* === Grundlage ========================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink);
  background:
    radial-gradient(1400px 560px at 50% -260px, rgb(107 92 224 / .035), transparent 72%),
    linear-gradient(180deg, var(--bg-top, #FBFBFD) 0%, var(--bg) 40%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); letter-spacing: -.022em; }
h1 { font-size: 32px; letter-spacing: -.032em; }
h2 { font-size: 22px; letter-spacing: -.026em; }
h3 { font-size: 16px; }
h4 { font-size: 13px; }

/* Zweiton-Satz: Betonung durch Farbe, nicht durch Fettung.
   Der Satz bleibt in einem Gewicht und wechselt zwischen Ink und Muted.
   Höchstens zwei Wechsel pro Satz — ab drei liest es sich als Fehler.    */
.tt      { color: var(--muted); }
.tt .sec { color: var(--muted); font-weight: inherit; }
.tt .em  { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Geteilte Ziffer: Einheit und Nachkommastelle fallen eine Stufe ab.     */
.split        { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.split .unit  { font-size: .52em; font-weight: 500; color: var(--muted); letter-spacing: -.01em; }
p  { margin: 0; }
a  { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }
svg { flex: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny  { font-size: 11.5px; }
.num   { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.mt-8  { margin-top: 8px; }  .mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spacer { flex: 1; }
.wrap { flex-wrap: wrap; }
.narrow { max-width: 940px; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2);
}

/* === Kopfleiste ========================================================= */

.topbar {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--topbar-h);
  display: flex; align-items: center;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .container { display: flex; align-items: center; gap: 20px; width: 100%; }

.brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { height: 28px; width: auto; display: block; flex: none; }
.brand-text { line-height: 1.05; }
.brand-name { font-size: 17px; font-weight: 800; color: var(--navy); letter-spacing: -.025em; }
.brand-sub  { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; color: var(--muted); }

/* Bereichs-Umschalter Analyse / Verwaltung (H8) */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; flex: none;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.seg a {
  padding: 6px 18px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap;
}
.seg a:hover { color: var(--ink); text-decoration: none; }
.seg a { transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.seg a:active { transform: scale(.97); }
.seg .is-active { background: var(--primary-hover); color: #fff; box-shadow: var(--shadow-xs); }
.seg .is-active:hover { color: #fff; }

.crumb { font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.crumb strong { color: var(--ink); font-weight: 600; }
.crumb .sep { margin: 0 7px; color: var(--muted-2); }

.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--navy-fill); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

/* === Prozessleiste ====================================================== */

.stepper {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-xs);
  overflow: hidden; margin-bottom: 24px;
}
.stepper a {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  color: var(--muted); text-decoration: none; font-size: 12.5px; font-weight: 600;
  border-right: 1px solid var(--border);
}
.stepper a:last-child { border-right: 0; }
.stepper a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.stepper a { transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.stepper .st-no {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--muted-2);
  border: 1px solid var(--border);
}
.stepper .st-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper .is-done { color: var(--ink); }
.stepper .is-done .st-no { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.stepper .is-active { background: var(--navy-soft); color: var(--navy); }
.stepper .is-active .st-no { background: var(--navy-fill); color: #fff; border-color: var(--navy-fill); }

/* === Seitengerüst ======================================================= */

.page { padding: 28px 0 40px; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; align-items: start; }
.col-main { min-width: 0; }
.col-main.is-form { max-width: 1080px; }
.sitefoot {
  border-top: 1px solid var(--border);
  padding: 22px 0 44px; margin-top: 8px;
  font-size: 11.5px; color: var(--muted-2);
  background: var(--surface);
}

/* === Verlaufszone: Screen-Kopf und Kernaussage ========================== */
/* Der Verlauf erscheint genau einmal pro Bildschirm, immer ganz oben.     */

.screenhead, .banner {
  position: relative; overflow: hidden;
  background: var(--verlauf);
  color: #fff; border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero);
}
/* Feine Körnung — nimmt dem Verlauf das Digitale, ohne ihn zu strukturieren.
   Der Lichtschein steckt bereits im Verlauf selbst, kein zweiter Effekt.  */
.screenhead::before, .banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 7px);
}
/* Obere Lichtkante — gibt der Fläche eine Materialstärke */
.screenhead::after, .banner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / .10);
}
.screenhead > *, .banner > * { position: relative; z-index: 1; }

.screenhead {
  padding: 34px 36px 36px;
  display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.sh-text { flex: 1 1 380px; min-width: 0; }
.sh-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .74;
}
.sh-title {
  margin-top: 12px; font-size: 34px; font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12; color: #fff; text-wrap: balance;
}
.sh-title .sec { opacity: .55; font-weight: 500; }   /* Zweiton auf dem Feld */
.sh-sub { margin-top: 12px; font-size: 14px; opacity: .74; max-width: 62ch; }

/* Glaskarte auf dem Verlauf */
.sh-card {
  flex: none; width: 268px; max-width: 100%;
  border-radius: var(--radius-lg); padding: 18px 20px 20px;
  background: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .16);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.sh-card .c-label {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; opacity: .66;
}
.sh-card .c-value {
  margin-top: 12px; font-size: 32px; font-weight: 700;
  letter-spacing: -.028em; line-height: 1; font-variant-numeric: tabular-nums;
}
.sh-card .c-value .unit { font-size: .46em; font-weight: 500; opacity: .6; letter-spacing: -.01em; }
.sh-card .c-delta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 12px;
  border-radius: var(--radius-pill); padding: 5px 12px;
  background: rgb(255 255 255 / .09); border: 1px solid rgb(255 255 255 / .18);
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .92;
}
@media (max-width: 720px) {
  .screenhead { padding: 26px 24px 28px; }
  .sh-title { font-size: 30px; }
  .sh-card { width: 100%; }
}

/* === Bewegung =========================================================== */
/* Regeln nach Emil Kowalski: nur transform und opacity animieren, Ein-
   tritt mit ease-out, nie aus scale(0), nichts über 300 ms, Hover nur
   für Zeiger, Bewegung reduzierbar.                                      */

/* Panels, die per .hidden umgeschaltet werden, treten ein statt zu springen.
   @starting-style greift beim Wechsel aus display:none.                  */
[data-panel], [data-detail], .reveal {
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(4px); }
}

/* Kartenraster kommen gestaffelt: 40 ms Abstand, Interaktion nie blockiert.
   backwards statt both — nach dem Lauf gehört transform wieder dem Hover. */
.menugrid > .menucard, .kpis > .kpi, .tiles > .tile {
  animation: card-enter 320ms var(--ease-out) backwards;
}
.menugrid > :nth-child(2), .kpis > :nth-child(2), .tiles > :nth-child(2) { animation-delay: 40ms; }
.menugrid > :nth-child(3), .kpis > :nth-child(3), .tiles > :nth-child(3) { animation-delay: 80ms; }
.kpis > :nth-child(4), .tiles > :nth-child(4) { animation-delay: 120ms; }
.tiles > :nth-child(5) { animation-delay: 160ms; }
.tiles > :nth-child(6) { animation-delay: 200ms; }
@keyframes card-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tastaturfokus: sichtbar, aber nur bei Tastatur. */
.btn:focus-visible, .seg a:focus-visible, .modeswitch button:focus-visible,
.pills a:focus-visible, .picklist a:focus-visible, .picklist button:focus-visible,
.tile:focus-visible, .menucard:focus-visible, .stepper a:focus-visible,
.notes-toggle:focus-visible, .radio:focus-visible, .brand:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.input:focus-visible, select.input:focus-visible { outline: 2px solid var(--primary-line); outline-offset: 0; }

/* Weniger Bewegung heißt weniger, nicht nichts: Fades bleiben, Ortswechsel gehen. */
/* Die Rücknahme muss in derselben Datei stehen wie die Bewegung selbst
   (Reihenfolge der Stylesheets): hier nur Shell und Panels, der Rest je
   Bereichsdatei am Ende.                                                  */
@media (prefers-reduced-motion: reduce) {
  .menugrid > .menucard, .kpis > .kpi, .tiles > .tile { animation: none; }
  [data-panel], [data-detail], .reveal { transition-property: opacity; }
  .seg a:active { transform: none; }
}

/* === B0-Ergänzungen === */
/* Layout ohne Notizspalte, Nutzermenü, Hinweisbanner. Nur vorhandene Tokens. */

/* --- Layout ohne Notizspalte ------------------------------------------- */
.layout { grid-template-columns: minmax(0, 1fr); }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* --- Nutzermenü (Dropdown am Avatar) ----------------------------------- */
.usermenu-wrap { position: relative; flex: none; }
button.avatar { border: 0; padding: 0; cursor: pointer; font-family: inherit;
  transition: box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
button.avatar:hover { box-shadow: 0 0 0 3px var(--navy-soft); }
button.avatar:active { transform: scale(.95); }
button.avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.usermenu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
  min-width: 250px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  transition: opacity var(--dur-enter) var(--ease-out), transform var(--dur-enter) var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}
.usermenu .um-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.usermenu .um-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.usermenu .um-mail { font-size: 12px; color: var(--muted); word-break: break-all; }
.usermenu .um-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--ink); font-size: 13px; font-weight: 600;
  transition: background-color var(--dur-hover) ease;
}
.usermenu .um-item:hover { background: var(--surface-2); }
.usermenu .um-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* --- Hinweisbanner (flach, im Kontext; kein Verlauf) ------------------- */
/* .banner ist im Wireframe die Kernaussage-Fläche mit Verlauf. Die
   Hinweisvarianten heben Verlauf, Schatten und Körnung wieder auf.       */
.banner.is-danger, .banner.is-info, .banner.is-ok {
  display: block; padding: 14px 18px; margin: 0 0 16px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: none; overflow: visible;
}
.banner.is-danger::before, .banner.is-info::before, .banner.is-ok::before,
.banner.is-danger::after,  .banner.is-info::after,  .banner.is-ok::after { content: none; }
.banner.is-danger { background: var(--danger-soft); border-color: var(--danger-line); }
.banner.is-ok     { background: var(--ok-soft);     border-color: var(--ok-line); }
.banner.is-info   { background: var(--navy-soft);   border-color: var(--navy-line); }
.banner .bn-title { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.banner.is-danger .bn-title { color: var(--danger); }
.banner.is-ok .bn-title     { color: var(--ok); }
.banner.is-info .bn-title   { color: var(--navy); }
.banner .bn-text { font-size: 13.5px; line-height: 1.5; }
.banner .bn-options { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; }
.banner .bn-options li { margin-top: 2px; }
.banner.is-sprint { margin-bottom: 20px; }
.banner.is-sprint .bn-text { font-weight: 600; color: var(--navy); }
.dlg-banner:empty, .banner-slot:empty { display: none; }

/* Reduzierte Bewegung: auch die neuen Übergänge zurücknehmen */
@media (prefers-reduced-motion: reduce) {
  .usermenu { transition-property: opacity; }
  button.avatar:active { transform: none; }
}

/* === Responsive (Sprint B12 §2a, Register T29 q) ========================= */
/* Grundsatz: die Seite scrollt nie horizontal. Breite Tabellen scrollen in
   ihrem eigenen Container, Kopfleiste und Stepper brechen um, Formulare
   werden einspaltig. Wireframe-Optik bleibt; Schriften werden nicht kleiner. */

/* Tabellen: der direkte Container übernimmt das Scrollen (auch bei Karten,
   die nicht in .table-wrap stehen). Gilt in jeder Breite. */
:has(> .table-std):not(.table-wrap) { overflow-x: auto; max-width: 100%; }
.table-wrap { max-width: 100%; }

@media (max-width: 900px) {
  .topbar { min-height: 0; }
  .topbar .container { flex-wrap: wrap; gap: 6px 12px; padding-top: 8px; padding-bottom: 8px; }
  .brand { order: 1; }
  .seg { order: 2; margin-left: auto; }
  .usermenu-wrap { order: 3; }
  .crumb { order: 4; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .seg a { padding: 6px 12px; }
  .stepper { flex-wrap: wrap; }
  .stepper a { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
  .stepper a:nth-last-child(-n+2) { border-bottom: 0; }
  .stepper .st-label { white-space: normal; }
  .layout { grid-template-columns: 1fr; }
  .page { padding: 20px 0 32px; }
}

@media (max-width: 480px) {
  :root { --gutter: 14px; }
  .brand-text { display: none; }
  .seg a { padding: 6px 10px; font-size: 12.5px; }
  .stepper a { flex-basis: 100%; }
  .stepper a:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .stepper a:last-child { border-bottom: 0; }
  .sh-title { font-size: 26px; }
}

/* Schmale Breiten: Karten und Rasterzellen dürfen nie breiter als ihr Elternteil werden
   (Grid-/Flex-Kinder haben sonst min-width:auto und schieben die Seite auf). */
@media (max-width: 900px) {
  .card, .card-pad, .table-wrap, .col-main, .col-side, .layout > *, .formsplit > *, .split-3 > *,
  .cmp-grid > *, .tiles > *, .kpis > *, .menugrid > *, form, [data-panel] { min-width: 0; max-width: 100%; }
}
@media (max-width: 480px) {
  .ramp { flex-wrap: wrap; max-width: 100%; }
  .ramp .cap { white-space: normal; }
  .cmp-bar .lbl { white-space: normal; }
  .warn-liste li, .warn-liste a { white-space: normal; overflow-wrap: anywhere; }
  .badge { white-space: normal; }
  .small.num, .num { overflow-wrap: anywhere; }
  .zr-gaenge { overflow-x: auto; grid-auto-columns: minmax(34px, 1fr); padding-bottom: 4px; }
}