/* showcase-v2 shared tokens — Dark and Light are role swaps on one DOM.
   Colour always carries status or identity, never decoration. */

@font-face { font-family: "Inter Local"; src: url("../../../fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../../../fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter Local"; src: url("../../../fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --sc-sans: "Inter Local", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --sc-green: #3ed277;
  --sc-amber: #ffb340;
  --sc-red: #ff6b63;
  --sc-blue: #4aa3ff;
  --sc-violet: #b4a6ff;
}

/* ---- Dark-Neutralcontract (ratifiziert 17.08.2026) -----------------------
   Der Dark Mode trug seine gesamte Struktur ueber EINE Linie: die Panelflaeche
   lag bei 1.07:1 ueber dem Canvas und war damit unterhalb der Wahrnehmungs-
   schwelle, sodass --sc-line gleichzeitig Panelkontur UND informations-
   tragende Connector-Geometrie tragen musste. Gemessen am gerenderten Bild
   (390/820/1366, Dark): Panel 1.07:1, Hairline 1.60:1, Connector auf 1366
   durch Rasterisierung nur 1.19:1.

   Die Leiter steht jetzt auf drei Ankern:
     Canvas    unveraendert — der Dark Mode wird nicht aufgehellt.
     Flaeche   auffindbar (dL* 3.4 -> 5.9), ohne zur Karte zu werden.
     Linie     zwei getrennte Rollen statt einer Doppelrolle.

   Kein neues Flaechen-Level: die Buehne bleibt flaechenlos, eine
   Aktiv-/Fokusflaeche entsteht weiterhin lokal aus --sc-inner-surface.
   Light ist unveraendert und wird weiter unten eigenstaendig gesetzt. */
:root,
[data-theme="dark"] {
  --sc-bg: #0f0f10;
  /* Level 1 — die einzige Panelflaeche. dL* 5.9 ueber dem Canvas: sichtbar,
     ohne dass eine Karten- oder Dashboardoptik entsteht. */
  --sc-surface: #1c1c1a;
  /* Divider innerhalb eines Panels. Bleibt bewusst die leiseste Linie. */
  --sc-hair: #33332e;
  /* Panelkontur. Deutlich, aber weiterhin schwaecher als Beziehungsgeometrie. */
  --sc-line: #45453f;
  /* Informationstragende Geometrie: Connector, Branch, Rail, Junction-Dot.
     Der Wert folgt nicht dem Geschmack, sondern WCAG 2.2 SC 1.4.11 — Grafik,
     die zum Verstaendnis noetig ist, braucht 3:1 gegen die angrenzende Farbe.
     #61615a trifft 3.07:1 gegen den Canvas. Bewusst ohne Reserve nach oben:
     das ist der Mindestwert, keine helle Linie. */
  --sc-line-strong: #61615a;
  --sc-text: #f3f3ee;
  --sc-muted: #9b9b93;
  /* Tertiaertext. Vorher #6a6a63 = 3.52:1 und damit unter AA, obwohl das
     Token an 52 Stellen auch echten 12-16px-Fliesstext traegt. 4.55:1 auf
     dem Canvas, 4.06:1 auf der Panelflaeche. Der Abstand zu --sc-muted
     bleibt mit dL* 12.0 klar erkennbar — drei Textstufen bleiben drei. */
  --sc-micro: #7c7c74;
  --sc-shadow: 0 42px 90px rgba(0, 0, 0, 0.55);
  --sc-portrait-veil: 0;
  --sc-dim: 0.66;
  --sc-ink-mix: #f3f3ee;
  --sc-ink-mix-amount: 100%;
  /* Identitätstürkis — auf hellem Grund braucht es einen eigenen, satteren Wert. */
  --sc-cyan: #4ad9d4;
  /* Innere Panelflaeche (.sc-inner-panel) IST die Panelflaeche — beide Rollen
     lagen vorher nur dL* 1.0 auseinander und waren damit dieselbe Ebene mit
     zwei Namen. Jetzt deckend statt transluzent: die Transluzenz kumulierte
     bei Verschachtelung und musste in .gh-sheet bereits per Gradient-Trick
     neutralisiert werden. Der Name bleibt, weil ihn die Komponenten
     konsumieren. */
  --sc-inner-surface: var(--sc-surface);
}

[data-theme="light"] {
  --sc-bg: #f8f8f6;
  --sc-surface: #ffffff;
  --sc-hair: #e5e5e0;
  --sc-line: #d6d6d0;
  /* Gegenstueck zur Dark-Rolle. Light trug fuer informationstragende
     Geometrie bisher 1.37:1 und damit WENIGER als Dark (1.60:1) — der
     Eindruck, Light funktioniere, kommt von seiner Flare-Robustheit, nicht
     vom Kontrast. #b8b8b1 hebt auf 1.88:1. Die vollen 3:1 waeren hier
     #90908a und wuerden das ruhige Light-Bild kippen; die uebrigen
     Light-Werte bleiben unveraendert. */
  --sc-line-strong: #b8b8b1;
  --sc-text: #1a1a18;
  --sc-muted: #71716a;
  --sc-micro: #9a9a92;
  --sc-shadow: 0 42px 90px rgba(26, 26, 24, 0.12);
  --sc-portrait-veil: 0.1;
  --sc-dim: 0.4;
  --sc-ink-mix: #1a1a18;
  --sc-ink-mix-amount: 55%;
  --sc-cyan: #0f7370;
  /* Actor-Violett — auf hellem Grund braucht es einen satteren Wert. */
  --sc-violet: #6a55c9;
  /* Light-Mode-Color-Contract (ratifiziert 13.08.2026, Variante B):
     die Statusfarben sind fuer Dark getunt (dort 7-11:1) und fielen auf
     hellem Grund auf 1.7-2.6:1 — hier die satten Light-Foregrounds
     (4.6-4.8:1 auf Canvas). Tints entstehen weiter per color-mix in den
     Komponenten und bleiben dadurch ruhig; Dark unveraendert. */
  --sc-green: #15803d;
  --sc-amber: #9a6700;
  --sc-red: #c93a31;
  --sc-blue: #1a6fc9;
  /* Light-Wert der inneren Panelflaeche aus dem Evolution-Light-Contract. */
  --sc-inner-surface: #f1f1ed;
}

/* Semantische Showcase-Typografie (ratifizierte Mischform 13.08.2026).
   Desktop-Marketing-Lesbarkeit: T2-Erklaertexte 15px, T3-Meta/Labels 12px,
   T4-Micro 10.5px. Nur ≥1000px definiert — Komponenten konsumieren mit
   ihrem Mobilwert als Fallback (var(--sc-ty-*, <mobilwert>)), Mobile und
   Tablet bleiben dadurch unveraendert. T1-Groessen bleiben Komposition
   der jeweiligen Komponente. */
@media (min-width: 1000px) {
  :root {
    --sc-ty-body: 15px;
    --sc-ty-meta: 12px;
    --sc-ty-micro: 10.5px;
  }
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--sc-blue); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--sc-blue) 70%, var(--sc-text)); }

:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; }

.sc-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- Showcase Panel · gemeinsame Buehne ---------------------------------
   EINE Quelle fuer die aeussere Geometrie aller Showcase-Buehnen.

   Contract (ratifiziert 15.08.2026):
       transparent + Hairline + ein Radius + ein responsives Padding.

   Die Buehne traegt keine Flaeche. Zwischen den inneren Panels steht der
   normale Seitenhintergrund — die visuelle Staffelung entsteht durch die
   inneren Panels, nicht durch einen zweiten Untergrund. Deshalb ausdruecklich
   kein background, kein Gradient, kein box-shadow, kein Glow und keine
   showcase-spezifische Rahmenfarbe.

   Radius 18px: der bisher haeufigste Buehnenradius im System
   (.co, .wi-stage, .ck-frame, .kl-frame) — kein neuer Wert, keine neue Skala,
   und bewusst EIN Wert ueber alle Breakpoints statt der bisherigen
   Staffelung 10/12/14/16/18/20/21/22/32.

   Rahmen: KEINE sichtbare Aussenlinie (Teststand 15.08.2026). Die Buehne ist
   nur noch Layout- und Kompositionscontainer; die visuelle Hierarchie tragen
   allein die inneren Panels. Der Rahmen bleibt als `1px solid transparent`
   stehen statt `border: none` — so bleibt die Boxgeometrie unveraendert und
   die Entfernung der Linie loest kein Re-Layout um 2px aus.

   BEWUSST NICHT im Primitive:
   · width / max-width — die Buehnenbreite ist eine Kompositionsentscheidung
     je Showcase (Evolution nutzt 720px schmal und 1180px breit).
   · overflow — clip/hidden/visible haengt vom Innenleben ab.
   · height / min-height — die Hoehe folgt dem Inhalt (height: auto).
     Funktionale Mindesthoehen bleiben lokal in der Komponente und begruendet.

   Breakpoints: 639/640 und 1023/1024 — beides bereits etablierte Grenzen im
   System. Keine neue Breakpoint-Systematik. */
.sc-panel {
  box-sizing: border-box;
  height: auto;
  margin-inline: auto;
  padding: 24px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}
.sc-panel *, .sc-panel *::before, .sc-panel *::after { box-sizing: border-box; }

@media (max-width: 639px) {
  .sc-panel { padding: 14px; }
}

@media (min-width: 1024px) {
  .sc-panel { padding: 32px; }
}

/* ---- Zeiger · gemeinsame Geometrie des simulierten Klicks --------------
   Ratifiziert in WorkIntent (`.wi-cursor`); Governance und Company Knowledge
   trugen bis hierher eigene, identische Kopien, weil die Homepage CSS pro
   Insel laedt. Diese Datei liegt global — deshalb gehoert das Primitive her.

   Es besitzt KEINE Position: wo der Zeiger sitzt und welchen Ton seine Welle
   traegt, bleibt Sache des Showcases (`--sc-cursor-accent`). */

.sc-cursor {
  position: absolute;
  display: flex;
  color: var(--sc-text);
  opacity: 0;
  transition: opacity 200ms var(--sc-cursor-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  pointer-events: none;
}

.sc-cursor[data-on="true"] { opacity: 1; }

.sc-cursor::before {
  content: "";
  position: absolute;
  left: 1px; top: 3px;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sc-cursor-accent, var(--sc-violet)) 70%, transparent);
  opacity: 0;
}

.sc-cursor[data-click="true"]::before {
  animation: sc-cursor-click 700ms var(--sc-cursor-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

@keyframes sc-cursor-click {
  0% { opacity: 0.9; transform: scale(0.35); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- Connector · gemeinsame Geometrie echter Beziehungspunkte -----------
   Ein Connector-Dot markiert einen ANKER einer Beziehung (Junction), eine
   Connector-Line die Beziehung selbst. Beides ist reine Geometrie.

   NICHT hierfuer gedacht — diese behalten ihre eigene Semantik:
   Statuspunkte einer Prozessachse, Pagination, Carousel-Indikatoren,
   Progress-Schritte, Checkmarks, Bulletpoints.

   Das Primitive besitzt bewusst KEINE Position: wo ein Anker sitzt, wie lang
   eine Linie ist und welchen semantischen Ton sie traegt, bleibt Sache des
   jeweiligen Showcases. Es setzt nur:
     Dot   Groesse, perfekte Kreisform, Randstaerke, deckende Grundflaeche
     Line  Staerke und neutrale Grundfarbe

   Bewusst ausgeschlossen, weil sie diffuse Kanten erzeugen: gebrochene
   Randstaerken (1.35px), halbtransparente Fuellungen, ueber die die Linie
   durchscheint, Verlaeufe, Schatten und Filter.

   Connectoren sind NEUTRAL. Eine Reihe unterschiedlich eingefaerbter Punkte
   an einer Verbindung liest sich als Verlauf, nicht als Struktur — die
   Bedeutung traegt der Knoten am Ende, nicht der Weg dorthin. Deshalb gibt
   es hier keine Accent-Durchreichung. */

:root {
  /* Uebernommen aus `.sev-connector__junction` (Software Evolution) —
     die saubere der beiden bestehenden Varianten: ganzzahlige Randstaerke,
     deckende Flaeche. Die zweite Variante trug 7px/1.35px und erzeugte
     dadurch diffuse Kanten. */
  --sc-connector-dot: 9px;
  --sc-connector-hair: 2px;
  --sc-connector-line-hair: 1px;
}

/* Connectoren tragen Bedeutung und laufen deshalb auf --sc-line-strong, nicht
   auf der Panelkontur --sc-line. Das ist die einzige Stelle, an der die
   Trennung der beiden Linienrollen konsumiert wird — jeder kuenftige
   Connector bekommt sie dadurch ohne weiteren Eingriff. */
.sc-connector-dot {
  box-sizing: border-box;
  width: var(--sc-connector-dot);
  height: var(--sc-connector-dot);
  border: var(--sc-connector-hair) solid var(--sc-line-strong);
  border-radius: 50%;
  /* Deckend: eine transluzente Fuellung liesse die Linie durchscheinen und
     der Punkt saehe aus wie ein Verlauf. */
  background: var(--sc-bg);
  box-shadow: none;
  filter: none;
}

.sc-connector-line {
  border: 0;
  background: var(--sc-line-strong);
  background-image: none;
  box-shadow: none;
  filter: none;
}

/* ---- Inner Panel · gemeinsame Geometrie der inneren Content-Panels -------
   Aus der ratifizierten Evolution-Geometrie extrahiert (Stand 15.08.2026).
   Source of Truth:
     Standard  -> `.sev-stage`
     Compact   -> `.sev-outcome` (Desktop) / `.sev-rotator` (Mobile)

   Das Primitive traegt ausschliesslich Geometrie:
   Flaeche, Hairline, Radius, responsives Padding, box-sizing, height: auto.

   Semantik bleibt in der Komponente. Die Akzentfarbe der Hairline kommt ueber
   `--sc-panel-accent` faerbt die Hairline NICHT mehr — sie ist immer
   `--sc-line`. Die Variable bleibt fuer Icon, Label und Zustaende erhalten.

   BEWUSST NICHT im Primitive:
   · min-height/height — die Hoehe folgt dem Inhalt. Die alten
     Evolution-Tablet-Reserven (214px/178px) sind ausdruecklich NICHT Teil
     des Contracts.
   · Breite, internes Grid, Gaps, Icon- und Typografiegeometrie.
   · Zustands- und Overlay-Schatten. */
.sc-inner-panel {
  box-sizing: border-box;
  height: auto;
  padding: 17px 16px 18px;
  /* Panelkontur ist Geometrie, nicht Semantik: seit dem Hairline-Pass
     immer die neutrale Linie. `--sc-panel-accent` bleibt fuer Icon, Label
     und Zustaende nutzbar, faerbt aber nicht mehr den Rahmen. */
  border: 1px solid var(--sc-line);
  border-radius: 15px;
  background: var(--sc-inner-surface);
  box-shadow: none;
}

.sc-inner-panel--compact {
  padding: 13px 15px 15px;
  border-color: var(--sc-line);
  border-radius: 14px;
}

@media (min-width: 640px) {
  .sc-inner-panel { padding: 20px 19px; border-radius: 17px; }
  .sc-inner-panel--compact { padding: 17px 16px; border-radius: 14px; }
}