/* ============================================================
   SHAH CONSULTING GmbH — Design-System-Bausteine
   ------------------------------------------------------------
   Zwei Teile:

   TEIL A  1:1-Spiegelung von shahgmbhdesignsytem/components.css.
           Panel, Tile, SectionBadge, Glass, MediaTile, MetaList,
           GhostHeadline, Dots, Faq, Chip, Stat, Numeral, Wordmark.
           Quelle der Wahrheit ist das Design-System-Verzeichnis.

   TEIL B  Produkt-UI-Ergaenzungen. Das Design-System ist fuer eine
           Marketing-Website entstanden; eine Verwaltungsplattform
           braucht Bausteine, die dort nicht vorkommen. Alles hier
           komponiert AUSSCHLIESSLICH DS-Tokens und folgt den
           verbindlichen Regeln aus DESIGNSYSTEM.md -- es fuehrt keine
           eigene Designsprache ein.

   Laedt NACH sc.css und setzt damit die DS-Fassung durch, wo beide
   dieselbe Klasse kennen.

   LADEREIHENFOLGE (verbindlich):
     sc-fonts.css -> sc-tokens.css -> sc-bridge.css -> sc.css
     -> sc-components.css -> sc-app.css
   ============================================================ */


/* ============================================================
   TEIL A — Design-System-Bausteine
   ============================================================ */

/* ---- Geruest ---------------------------------------------------------- */
.sc-shell { background: var(--sc-bg); border-radius: var(--sc-radius-2xl); border: 1px solid var(--sc-line-subtle); overflow: hidden; }
.sc-container-content { max-width: var(--sc-container-content); margin: 0 auto; padding: 0 var(--space-6); }

/* Panel > Tile ist die verbindliche Verschachtelung: Kacheln stehen nie
   lose auf dem Seitengrund (layout/Panel.prompt.md). */
.sc-panel { background: var(--sc-bg-raised); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-xl); padding: var(--space-6); }
.sc-tile { background: var(--sc-bg-card); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-edge-top); padding: var(--space-6); }
.sc-tile--raised { background: var(--sc-bg-raised); }
.sc-tile--deep { background: var(--sc-bg-deep); }
/* Genau EINE Kontrast-Kachel pro Panel (layout/Tile.prompt.md). */
.sc-tile--contrast { background: var(--sc-accent); color: var(--sc-on-accent); box-shadow: none; border-color: transparent; }
.sc-tile--contrast .sc-meta { color: var(--sc-ink-2); }

/* ---- Typografie des Systems ------------------------------------------- */
.sc-display { font-family: var(--sc-font-display); font-weight: var(--sc-weight-display); letter-spacing: var(--sc-tracking-display); line-height: var(--sc-leading-display); color: var(--sc-text); }
.sc-meta { font-size: var(--sc-text-xs); font-weight: var(--sc-weight-medium); letter-spacing: var(--sc-tracking-meta); text-transform: uppercase; color: var(--sc-text-3); }
.sc-lead { font-size: var(--sc-text-md); line-height: var(--sc-leading-relaxed); color: var(--sc-text-2); }
.sc-wordmark { font-family: var(--sc-font-wordmark); font-weight: 900; letter-spacing: var(--sc-tracking-wordmark); color: var(--sc-text); }
/* Verlaufende Riesen-Headline (layout/GhostHeadline.prompt.md). */
.sc-ghost-headline { font-family: var(--sc-font-display); font-weight: var(--sc-weight-display); letter-spacing: var(--sc-tracking-display); line-height: var(--sc-leading-display); font-size: var(--sc-text-3xl); background-image: linear-gradient(180deg, var(--sc-text-2) 20%, rgba(163,169,174,0) 105%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Geister-Ziffer hinter Prozessschritten. */
.sc-numeral { font-family: var(--sc-font-display); font-weight: var(--sc-weight-medium); font-size: var(--sc-text-giant); line-height: .9; color: var(--sc-bg-elevated); }

/* ---- Buttons — immer Pille (core/Button.prompt.md) --------------------
   Setzt die DS-Fassung ueber die aus sc.css uebernommene: Pillenform,
   invertierter Primary, Hoehe aus dem Innenabstand statt fixer Hoehe. */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: auto; border-radius: var(--sc-radius-pill);
  font-family: var(--sc-font-body); font-weight: var(--sc-weight-medium);
  font-size: var(--sc-text-base); letter-spacing: var(--sc-tracking-normal);
  padding: 13px 26px; cursor: pointer; border: 1px solid transparent;
  transition: var(--motion-hover, color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out));
  text-decoration: none; white-space: nowrap;
}
.sc-btn--sm { padding: 9px 18px; font-size: var(--sc-text-sm); }
.sc-btn--lg { padding: 16px 34px; font-size: var(--sc-text-md); }
/* Primary = invertierter Akzent: helles Grau, fast schwarze Schrift.
   EINER pro View (core/Button.prompt.md). */
.sc-btn--primary { background: var(--sc-accent); color: var(--sc-on-accent); border-color: transparent; }
.sc-btn--primary:hover { background: var(--sc-accent-hover); color: var(--sc-on-accent); }
.sc-btn--primary:active { background: var(--sc-accent-down); }
.sc-btn--secondary { background: transparent; color: var(--sc-text); border-color: var(--sc-line-strong); }
.sc-btn--secondary:hover { border-color: var(--sc-accent); color: var(--sc-text); }
.sc-btn--ghost { background: transparent; color: var(--sc-text-2); border-color: transparent; }
.sc-btn--ghost:hover { color: var(--sc-text); background: var(--sc-bg-raised); }
.sc-btn[disabled], .sc-btn--disabled { opacity: .45; cursor: not-allowed; }

/* Runder Icon-Button (core/IconButton.prompt.md). */
.sc-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--sc-text-2); border: 1px solid var(--sc-line-strong); cursor: pointer; }
.sc-iconbtn:hover { color: var(--sc-text); border-color: var(--sc-accent); }

/* ---- Pillen, Badges, Chips -------------------------------------------- */
/* Eyebrow, das jede Sektion eroeffnet (layout/SectionBadge.prompt.md). */
.sc-section-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--sc-bg-raised); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-pill); padding: 8px 18px; font-size: var(--sc-text-sm); font-weight: var(--sc-weight-medium); color: var(--sc-text-2); }
.sc-section-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); }
/* Faehigkeits-Chip (core/Chip.prompt.md). */
.sc-chip { display: inline-flex; align-items: center; font-size: var(--sc-text-sm); font-weight: var(--sc-weight-medium); border-radius: var(--sc-radius-pill); padding: 7px 16px; background: var(--sc-bg-raised); border: 1px solid var(--sc-line); color: var(--sc-text); }
.sc-chip--on-light { background: rgba(19,20,21,.06); border-color: rgba(19,20,21,.14); color: var(--sc-ink); }

/* ---- Medien & Platzhalter (layout/MediaTile.prompt.md) ---------------- */
.sc-media { border-radius: var(--sc-radius-xl); overflow: hidden; position: relative; background: var(--sc-bg-raised); }
.sc-media img, .sc-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-placeholder { background: repeating-linear-gradient(-45deg, var(--sc-bg-raised), var(--sc-bg-raised) 10px, var(--sc-bg-card) 10px, var(--sc-bg-card) 20px); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-md); display: flex; align-items: center; justify-content: center; }
.sc-placeholder span { font-family: var(--sc-font-mono); font-size: 11px; color: var(--sc-text-3); }
.sc-media-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.sc-media-overlay > * { pointer-events: auto; }

/* ---- Glas — NUR ueber Bild/Medien/dunklen Kacheln (core/Glass.prompt.md) */
.sc-glass { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sc-radius-pill); padding: 14px 30px; color: var(--sc-white); font-weight: var(--sc-weight-medium); text-decoration: none; cursor: pointer; background: var(--sc-glass-tint); backdrop-filter: blur(var(--sc-glass-blur)); -webkit-backdrop-filter: blur(var(--sc-glass-blur)); box-shadow: inset 2px 2px 1px 0 var(--sc-glass-highlight), inset -1px -1px 1px 1px var(--sc-glass-highlight), var(--sc-glass-shadow); transition: transform var(--sc-duration-glass) var(--sc-ease-spring); }
.sc-glass:hover { transform: translateY(-2px); }
.sc-glass--surface { padding: 12px; border-radius: var(--sc-radius-xl); }

/* ---- Meta-Spalten unter Case-Kacheln (layout/MetaList.prompt.md) ------ */
.sc-metalist { display: flex; gap: var(--space-10); flex-wrap: wrap; }
.sc-metalist-value { font-size: var(--sc-text-sm); color: var(--sc-text-2); margin-top: var(--space-2); }

/* ---- Trennlisten (Leistungszeilen in Kacheln) ------------------------- */
.sc-rows > * { padding: var(--space-3) 0; border-top: 1px solid var(--sc-line-subtle); font-size: var(--sc-text-sm); color: var(--sc-text-2); }

/* ---- Carousel-Dots (layout/Dots.prompt.md) ---------------------------- */
.sc-dots { display: flex; gap: var(--space-2); }
.sc-dots > span { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-line-strong); cursor: pointer; }
.sc-dots > span.is-active { background: var(--sc-accent); }

/* ---- FAQ-Akkordeon (marketing/Faq.prompt.md) -------------------------- */
.sc-faq-item { background: var(--sc-bg-card); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-lg); margin-bottom: var(--space-3); }
.sc-faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); width: 100%; background: none; border: none; text-align: left; padding: var(--space-5) var(--space-6); color: var(--sc-text); font-family: var(--sc-font-body); font-size: var(--sc-text-md); font-weight: var(--sc-weight-medium); cursor: pointer; }
.sc-faq-plus { flex: 0 0 auto; transition: transform var(--sc-duration-base) var(--sc-ease); color: var(--sc-text-3); }
.sc-faq-item[open] .sc-faq-plus { transform: rotate(45deg); }
.sc-faq-a { padding: 0 var(--space-6) var(--space-5); color: var(--sc-text-2); font-size: var(--sc-text-base); line-height: var(--sc-leading-relaxed); }

/* ---- Fokus & Auswahl --------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--sc-bg), 0 0 0 4px var(--sc-accent); }
::selection { background: var(--sc-accent); color: var(--sc-on-accent); }

/* ---- Reduzierte Bewegung ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ============================================================
   TEIL B — Produkt-UI-Ergaenzungen
   Bausteine, die eine Compliance-/Lernplattform braucht und die im
   Design-System (Marketing-Herkunft) nicht vorkommen. Komponiert
   ausschliesslich DS-Tokens.
   ============================================================ */

/* ---- Textbausteine ----------------------------------------------------- */
.sc-h4 { font-weight: var(--sc-weight-medium); font-size: var(--sc-text-base); letter-spacing: var(--sc-tracking-normal); line-height: var(--sc-leading-heading); margin: 0; color: var(--sc-text); }
.sc-heading { font-family: var(--sc-font-display); font-weight: var(--sc-weight-display); font-size: var(--sc-text-xl); letter-spacing: var(--sc-tracking-display); line-height: var(--sc-leading-heading); margin: 0; color: var(--sc-text); }
.sc-headline { font-family: var(--sc-font-display); font-weight: var(--sc-weight-display); font-size: var(--sc-text-2xl); letter-spacing: var(--sc-tracking-display); line-height: var(--sc-leading-display); margin: 0; color: var(--sc-text); }
.sc-lede { font-size: var(--sc-text-md); line-height: var(--sc-leading-relaxed); color: var(--sc-text-2); }
.sc-text { font-size: var(--sc-text-base); line-height: var(--sc-leading-normal); color: var(--sc-text-2); }
.sc-text--muted { color: var(--sc-text-3); }
.sc-bold { font-weight: var(--sc-weight-semibold); color: var(--sc-text); }
.sc-sm { font-size: var(--sc-text-sm); }
.sc-note { font-size: var(--sc-text-sm); line-height: var(--sc-leading-normal); color: var(--sc-text-3); }
.sc-mark { background: var(--sc-accent); color: var(--sc-on-accent); border-radius: var(--sc-radius-sm); padding: 0 4px; }

/* Fliesstext-Bereich fuer redaktionelle Inhalte (Lektionen, Bescheide). */
.sc-prose { color: var(--sc-text-2); font-size: var(--sc-text-md); line-height: var(--sc-leading-relaxed); }
.sc-prose > * + * { margin-top: var(--space-4); }
.sc-prose h1, .sc-prose h2, .sc-prose h3, .sc-prose h4 { color: var(--sc-text); font-family: var(--sc-font-display); font-weight: var(--sc-weight-display); letter-spacing: var(--sc-tracking-display); line-height: var(--sc-leading-heading); }
.sc-prose h1 { font-size: var(--sc-text-2xl); }
.sc-prose h2 { font-size: var(--sc-text-xl); }
.sc-prose h3 { font-size: var(--sc-text-lg); }
.sc-prose h4 { font-size: var(--sc-text-md); }
.sc-prose a { color: var(--sc-text); text-decoration: underline; text-underline-offset: 3px; }
.sc-prose a:hover { color: var(--sc-accent-hover); }
.sc-prose code { font-family: var(--sc-font-mono); font-size: var(--sc-text-sm); background: var(--sc-bg-raised); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-sm); padding: 1px 6px; }
.sc-prose pre { font-family: var(--sc-font-mono); font-size: var(--sc-text-sm); background: var(--sc-bg-deep); border: 1px solid var(--sc-line-subtle); border-radius: var(--sc-radius-md); padding: var(--space-4); overflow-x: auto; }
.sc-prose blockquote { border-left: 2px solid var(--sc-line-strong); padding-left: var(--space-4); color: var(--sc-text-3); }
.sc-prose ul, .sc-prose ol { padding-left: var(--space-5); }
.sc-prose li + li { margin-top: var(--space-2); }
.sc-prose img { border-radius: var(--sc-radius-md); }

/* Definitionsliste fuer Kennwert-Paare (Detailseiten, Pruefberichte). */
.sc-dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); align-items: baseline; margin: 0; }
.sc-dl dt { font-size: var(--sc-text-xs); font-weight: var(--sc-weight-medium); letter-spacing: var(--sc-tracking-meta); text-transform: uppercase; color: var(--sc-text-3); }
.sc-dl dd { margin: 0; font-size: var(--sc-text-base); color: var(--sc-text); }

/* ---- Layout-Helfer ------------------------------------------------------ */
.sc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.sc-cluster--between { justify-content: space-between; }
.sc-stack--sm { gap: var(--space-2); }
.sc-stack--md { gap: var(--space-4); }
.sc-row--gap-sm { gap: var(--space-2); }

/* ---- Kachel-Varianten fuer Zustaende ------------------------------------
   Getoente Flaeche + farbige Haarlinie; die Semantik bleibt entsaettigt
   (DESIGNSYSTEM.md §3: Semantik nur in Produkt-UI). */
.sc-card--muted { background: var(--sc-bg-raised); box-shadow: none; }
.sc-card--inset { background: var(--sc-bg-deep); box-shadow: none; }
.sc-card--info { border-color: var(--sc-info); background: var(--sc-info-tint); }
.sc-card--danger { border-color: var(--sc-error); background: var(--sc-error-tint); }

/* ---- Formular-Varianten ------------------------------------------------- */
.sc-input--full, .sc-select--full, .sc-textarea--full { width: 100%; }
.sc-input--sm, .sc-select--sm { padding: 8px 12px; font-size: var(--sc-text-sm); height: auto; }

/* ---- Anwendungs-Navigation ----------------------------------------------
   Die Navigations-Pille des DS ist fuer eine Marketing-Kopfzeile gedacht.
   Eine Plattform braucht zusaetzlich eine Navigationsliste mit Aktiv-Zustand. */
.sc-navbar__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.sc-navbar__meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--sc-text-sm); color: var(--sc-text-3); }
.sc-navlink {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 16px; border-radius: var(--sc-radius-pill);
  font-size: var(--sc-text-sm); font-weight: var(--sc-weight-medium);
  color: var(--sc-text-2); text-decoration: none; border: 1px solid transparent;
  transition: color var(--sc-duration-fast) var(--sc-ease), background-color var(--sc-duration-fast) var(--sc-ease);
}
.sc-navlink:hover { color: var(--sc-text); background: var(--sc-bg-raised); }
/* Aktiv = invertiert, wie jede andere aktive Flaeche im System. */
.sc-navlink--active { background: var(--sc-accent); color: var(--sc-on-accent); }
.sc-navlink--active:hover { background: var(--sc-accent-hover); color: var(--sc-on-accent); }

/* ---- Zustandsvarianten, die im Bestand fehlten --------------------------- */
.sc-btn--danger { background: transparent; color: var(--sc-error); border-color: var(--sc-line-strong); }
.sc-btn--danger:hover { border-color: var(--sc-error); color: var(--sc-error); }
.sc-alert--ok { border-color: var(--sc-ok); background: var(--sc-ok-tint); color: var(--sc-text); }

/* ---- Marken-Zeichen: folgt dem Theme -------------------------------------
   Das Logo liegt einfarbig als SVG vor (``sc-mark.svg``, Marken-Hellgrau).
   Als ``<img>`` eingebunden kann es nicht auf ``data-theme`` reagieren -- im
   Hell-Theme waere helles Grau auf hellem Papier unsichtbar.

   Loesung: das SVG dient als MASKE, die Flaeche kommt aus ``currentColor``.
   Damit traegt das Zeichen immer die Textfarbe des Themes und bleibt in
   beiden Faellen lesbar -- ohne zweite Bilddatei und ohne Template-Logik. */
.sc-brand__mark {
  width: 32px; height: 32px; flex: none; border-radius: 0;
  /* ``content: ""`` ersetzt den Bildinhalt des <img>, sonst wuerde das
     hellgraue SVG zusaetzlich zur eingefaerbten Maske durchscheinen. */
  content: "";
  background-color: currentColor;
  color: var(--sc-text);
  -webkit-mask: url("/static/sc-mark.svg") center / contain no-repeat;
  mask: url("/static/sc-mark.svg") center / contain no-repeat;
}

/* Schliessen-Knopf im Assistenz-Drawer. T-UX-14: invertierter Akzent
 * (DS-Regel "Interaktives invertiert", DESIGNSYSTEM.md §1) statt der
 * transparenten Ghost-Optik -- deutlich sichtbar in JEDEM Theme. */
.sc-chat-drawer__close {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--sc-accent); color: var(--sc-on-accent);
  border: 1px solid transparent; cursor: pointer;
}
.sc-chat-drawer__close:hover { background: var(--sc-accent-hover); color: var(--sc-on-accent); }