/* ==========================================================================
   Bausteine im neuen Design (Regeln und Begründungen: docs/design.md, Teil A).
   Lädt als letzte Stildatei und legt Karten, Knöpfe, Felder, Chips, Segment, Reiter, Menüs,
   Dialoge, Toasts, Tooltips, Tabellen, Schalter, Skeletons und die Grundbewegung verbindlich fest.
   Nur Variablen aus css/app.css. Zustände überall gleich: normal, Hover, gedrückt, Fokus, deaktiviert, Laden.
   ========================================================================== */

/* ---------- Karten: Stufe 1, Kontur statt Rahmen, im Dunkeln ein Hauch Licht oben ---------- */
.card, .widget {
  background-color: var(--card); background-image: var(--card-glanz); border: 0; box-shadow: var(--shadow);
  transition: box-shadow var(--dauer-2) var(--ease-out), transform var(--dauer-2) var(--ease-out);
}
.card.hover:hover, a.card:hover { box-shadow: var(--shadow-hover); }
/* Karten in Karten: keine zweite Kontur, nur eine Stufe tiefer */
.card .card, .widget .card { background: var(--inset); background-image: none; box-shadow: none; }

/* ---------- Knöpfe ---------- */
.btn {
  height: 40px; padding: 0 16px; gap: 8px; border: 0; border-radius: var(--r-mittel);
  background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2);
  font: inherit; font-size: var(--t-text); font-weight: var(--w-mittel); letter-spacing: -.005em;
  transition: transform var(--dauer-1) var(--ease-out), background-color var(--dauer-1), color var(--dauer-1), box-shadow var(--dauer-2) var(--ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--raised), var(--ink) 6%); box-shadow: inset 0 0 0 1px var(--line-2); transform: translateY(-1px); }
.btn:active { transform: scale(.98); transition-duration: var(--dauer-mikro); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary, .btn.accent {
  background: var(--btn-primary); color: var(--btn-primary-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 6px 16px -8px rgba(var(--accent-rgb), .55);
}
.btn.primary:hover, .btn.accent:hover { background: var(--btn-primary-hover); box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 20px -8px rgba(var(--accent-rgb), .6); }
.btn.primary:focus-visible, .btn.accent:focus-visible { box-shadow: var(--ring); }
/* Hauptknöpfe in Karten, Listen und Widgets sind ruhig wie der sekundäre Knopf (Orange nur einmal je Seite, Ausnahme .wichtig) */
.content :is(.card, .widget, .list, .nk-karte) .btn.primary:not(.wichtig) { background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.content :is(.card, .widget, .list, .nk-karte) .btn.primary:not(.wichtig):hover { background: color-mix(in srgb, var(--raised), var(--ink) 6%); box-shadow: inset 0 0 0 1px var(--line-2); }
.content :is(.card, .widget, .list, .nk-karte) .btn.primary:not(.wichtig):focus-visible { box-shadow: var(--ring); }
.btn.soft { background: var(--inset); box-shadow: none; }
.btn.soft:hover { background: var(--track); box-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink-2); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.btn.danger { color: var(--crit-text); }
.btn.danger.solid { background: var(--crit-solid); color: #FFFFFF; box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
/* Laden: Breite bleibt, Text weicht einem Kreis */
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: var(--r-rund);
  border: 2px solid var(--ink-3); border-top-color: transparent; animation: dreh .7s linear infinite;
}
.btn.primary[aria-busy="true"]::after { border-color: var(--on-accent); border-top-color: transparent; }
@keyframes dreh { to { transform: rotate(360deg); } }
.btn.sm { height: 32px; padding: 0 12px; gap: 6px; font-size: var(--t-klein); }
.iconbtn {
  width: 36px; height: 36px; border: 0; border-radius: var(--r-rund); background: transparent; color: var(--ink-2); box-shadow: none;
  transition: background-color var(--dauer-1), color var(--dauer-1), transform var(--dauer-1) var(--ease-out);
}
.iconbtn:hover { background: var(--hover); color: var(--ink); box-shadow: none; }
.iconbtn:active { transform: scale(.94); }

/* ---------- Felder: Stufe 2 ohne Rand, Fokus mit Ring ---------- */
.input, .select, .textarea {
  height: 40px; border: 1px solid transparent; border-radius: var(--r-mittel); background-color: var(--inset); color: var(--ink);
  box-shadow: none; transition: box-shadow var(--dauer-2) var(--ease-out), background-color var(--dauer-1);
}
.textarea { height: auto; }
.input:hover, .select:hover, .textarea:hover { background-color: color-mix(in srgb, var(--inset), var(--ink) 4%); }
.input:focus, .select:focus, .textarea:focus { outline: none; background-color: var(--inset); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .75), 0 0 0 4px rgba(var(--accent-rgb), .14); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input[disabled], .select[disabled], .textarea[disabled] { opacity: .5; cursor: not-allowed; }
.select.pill, .input.pill { background-color: var(--inset); border-color: transparent; border-radius: var(--r-rund); }
.select.pill.aktiv { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* ---------- Chips und Etiketten: Pillen ---------- */
.chip { border-radius: var(--r-rund); border: 0; font-size: var(--t-label); font-weight: var(--w-mittel); height: 24px; padding: 0 10px; }
.chip.accent { background: var(--blue-flaeche); color: var(--ink); }

/* ---------- Segment: Kapsel, die Wahl gleitet als hellere Pille ---------- */
.seg { padding: 3px; border-radius: var(--r-rund); background: var(--inset); box-shadow: none; }
.seg button { height: 30px; padding: 0 12px; border-radius: var(--r-rund); font-weight: var(--w-mittel); color: var(--ink-3); transition: color var(--dauer-2); }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .thumb { top: 3px; bottom: 3px; border-radius: var(--r-rund); background: var(--seg-thumb); box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--line); transition: transform var(--dauer-3) var(--ease-feder), width var(--dauer-3) var(--ease-feder); }
.seg.sm button { height: 26px; padding: 0 10px; border-radius: var(--r-rund); }

/* ---------- Reiter: aktive Pille neutral, kein Unterstrich, kein Orange ---------- */
.tabs a { height: 34px; padding: 0 12px; border-radius: var(--r-rund); color: var(--ink-3); font-weight: var(--w-mittel); transition: color var(--dauer-1), background-color var(--dauer-1); }
.tabs a:hover { color: var(--ink); background: var(--hover); }
.tabs a.active { color: var(--ink); background: var(--inset); font-weight: var(--w-fett); }
.tabs a.active::after { display: none; }
.ml-tab { border-radius: var(--r-rund); }
.ml-tab.an, .ml-tab.active, .ml-tab[aria-selected="true"] { color: var(--ink); }

/* ---------- Menüs und Popover: Stufe 3, wachsen aus dem Auslöser (ui.popover setzt transform-origin) ---------- */
.pop { background: var(--raised); border-radius: var(--r-gross); box-shadow: var(--shadow-pop); padding: 6px; animation: none; }
.pop.ein { animation: aus-ausloeser var(--dauer-2) var(--ease-out); }
@keyframes aus-ausloeser { from { opacity: 0; transform: scale(.96); } }
.pop-item { border-radius: calc(var(--r-gross) - 6px); min-height: 36px; transition: background-color var(--dauer-1); }
.pop-item:hover, .pop-item:focus-visible { background: var(--hover); outline: none; }
.pop-sep { background: var(--line); }
.pop-label { color: var(--ink-3); }

/* ---------- Dialoge und Blätter ---------- */
.scrim { transition: opacity var(--dauer-2) var(--ease-out); }
.modal {
  border-radius: var(--r-fenster) !important; background: var(--card); box-shadow: var(--shadow-pop);
  transform: translateY(10px) scale(.97); opacity: 0; transition: transform var(--dauer-3) var(--ease-feder), opacity var(--dauer-2) var(--ease-out);
}
.scrim.show .modal { transform: none; opacity: 1; }
.drawer { transition: transform var(--dauer-3) var(--ease-out); }
.palette { border-radius: var(--r-fenster); background: var(--raised); }
.palette-item[aria-selected="true"] { background: var(--hover); }
.palette-item[aria-selected="true"] .ic { color: var(--ink); }
@media (max-width: 640px) {
  .modal, .modal.wide, .modal.xwide { border-radius: var(--r-fenster) var(--r-fenster) 0 0 !important; transform: translateY(40px); }
}

/* ---------- Toasts: unten mittig über den Schwebe-Knöpfen ---------- */
.toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.toast { border-radius: var(--r-gross) !important; background: var(--toast-bg); animation: toast-ein var(--dauer-3) var(--ease-feder); }
@keyframes toast-ein { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- Tooltip ---------- */
.tip { border-radius: var(--r-klein); background: var(--raised); box-shadow: var(--shadow-pop); }

/* ---------- Tabellen: ruhig, feine Trennlinien, Zeilen-Hover ---------- */
table.t td { border-bottom: 1px solid var(--line); transition: background-color var(--dauer-1); }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:nth-child(even) td { background: transparent; }
table.t tr.click:hover td, table.t tbody tr:hover td { background: var(--hover); }

/* ---------- Schalter: an = Tinte, nicht Orange ---------- */
.schalter { background: var(--track); transition: background-color var(--dauer-2) var(--ease-out); }
.schalter::after { transition: transform var(--dauer-3) var(--ease-feder), background-color var(--dauer-2); }
.schalter.an { background: var(--ink); }
.schalter.an::after { background: var(--page); }

/* ---------- Leere Zustände: ein Satz, eine Aktion ---------- */
.empty .ic, .empty-ic { color: var(--ink-3); }

/* ---------- Skeleton mit ruhigem Schimmer ---------- */
.skelett, .dw-laedt { position: relative; overflow: hidden; background: var(--inset); border-radius: var(--r-mittel); }
.skelett::after, .dw-laedt::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 5%, transparent), transparent);
  animation: schimmer 1.6s var(--ease-out) infinite;
}
@keyframes schimmer { to { transform: translateX(100%); } }

/* ---------- „Zum Inhalt springen“: beim Fokus sichtbar ---------- */
a.sr:focus-visible {
  position: fixed !important; left: 16px; top: 12px; z-index: 500; width: auto; height: auto; overflow: visible; clip: auto; white-space: nowrap;
  padding: 8px 12px; border-radius: var(--r-mittel); background: var(--raised); color: var(--ink); text-decoration: none; box-shadow: var(--ring);
}

/* ---------- Bewegung: Einblenden gestaffelt (App.motion.reveal), Fokus blendet ein ---------- */
.reveal-pending { opacity: 0; transform: translateY(8px); }
.reveal-run { transition: opacity var(--dauer-3) var(--ease-out), transform var(--dauer-3) var(--ease-out); }
:focus-visible { animation: fokus-ein var(--dauer-2) var(--ease-out); }
@keyframes fokus-ein { from { outline-offset: 6px; outline-color: transparent; } }
/* Rollende Ziffern (App.motion.count) */
.roll-z { display: inline-block; height: 1.04em; overflow: hidden; vertical-align: top; line-height: 1.04; }
.roll-s { display: flex; flex-direction: column; }
.roll-s > span { display: block; height: 1.04em; }

/* ---------- Diagramme (js/charts.js): Hauptreihe Blau, Vergleich Grau, Orange nur als ein Punkt im hervorgehobenen Widget (.hervor) ---------- */
.chart { position: relative; }
.chart .line { stroke: var(--chart-farbe, var(--reihe-1)); stroke-width: 1.75px; }
.chart .line.neutral { stroke: var(--vergleich); stroke-width: 1.5px; opacity: 1; }
.chart .line.netz { stroke: var(--ink-2); }
.chart .line.netz.gestr { stroke-dasharray: 4 4; }
.chart .area { fill-opacity: 1; }
.chart .verlauf-oben { stop-color: var(--chart-farbe, var(--reihe-1)); stop-opacity: .16; }
.chart .verlauf-unten { stop-color: var(--chart-farbe, var(--reihe-1)); stop-opacity: 0; }
.chart .dot { fill: var(--chart-farbe, var(--reihe-1)); stroke: var(--card); stroke-width: 2px; }
.chart .dot.neutral { fill: var(--vergleich); }
.chart .dot-hof { fill: var(--chart-farbe, var(--reihe-1)); opacity: .16; transform-box: fill-box; transform-origin: center; }
.chart .gridline { stroke: var(--grid); }
.chart .gridline.zero { stroke: var(--zero); }
.chart text { font-size: 11px; fill: var(--ink-3); font-feature-settings: var(--zahl-features); }
.chart .cross { stroke: var(--ink-3); stroke-width: 1px; stroke-dasharray: 2 3; opacity: .7; }
.chart .band { fill: var(--hover); }
.chart-lese { transition: opacity var(--dauer-2); }
.chart-lese.aus { opacity: 0; }
.chart-tip {
  position: absolute; top: 0; left: 0; z-index: 2; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; pointer-events: none;
  border-radius: var(--r-mittel); background: var(--raised); box-shadow: var(--shadow-pop); white-space: nowrap;
  opacity: 0; transition: opacity var(--dauer-2) var(--ease-out);
}
.chart-tip.an { opacity: 1; }
.ct-datum { font-size: 11px; color: var(--ink-3); }
.ct-zeile { display: flex; align-items: center; gap: 6px; font-size: var(--t-klein); color: var(--ink-2); }
.ct-zeile em { font-style: normal; }
.ct-zeile b { color: var(--ink); font-size: 15px; font-weight: var(--w-mittel); letter-spacing: -.01em; font-feature-settings: var(--zahl-features); }
.ct-extra { font-size: 12px; color: var(--ink-3); }
/* Kreis und Ring füllen sich im Uhrzeigersinn */
.kreis-stueck { transition: stroke-width var(--dauer-2) var(--ease-out); }
.kreis-stueck:hover { opacity: .8; }
.kreis-stueck.fuellt { animation: kreis-fuell .9s var(--ease-out) both; }
@keyframes kreis-fuell { from { stroke-dasharray: 0 var(--c); } }
.ring-arc.fuellt { animation: ring-fuell 1.1s var(--ease-out) both; }
@keyframes ring-fuell { from { stroke-dashoffset: var(--c); } }
.kreis-mitte { font-weight: var(--w-mittel); letter-spacing: -.02em; }
.spark .spark-linie { stroke-width: 1.5px; }

/* Einstellung „Animationen aus“ (meta.darstellung.animationen, App.applyDetail): alles steht sofort im Endzustand */
html.ohne-bewegung *, html.ohne-bewegung *::before, html.ohne-bewegung *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
html.ohne-bewegung::view-transition-old(root), html.ohne-bewegung::view-transition-new(root) { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .kreis-stueck.fuellt, .ring-arc.fuellt { animation: none; }
  .pop.ein, .toast, :focus-visible { animation: none; }
  .modal, .scrim .modal { transition: opacity var(--dauer-1); transform: none; }
  .skelett::after, .dw-laedt::after { animation: none; }
  .btn:hover { transform: none; }
}

/* Umschalter: Auswahl nicht nur über die Schriftfarbe (Thumb mit Kontur, aktive Schrift kräftiger), am Touch 44 px Zielhöhe */
.seg button[aria-pressed="true"] { font-weight: 650; }
.seg .thumb { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 1px var(--line-2); }
@media (pointer: coarse) { .seg button, .seg.sm button { min-height: 44px; } }