/*
 * STS Design System · 1.0.0 · 10.10.2026
 * Quellen und Entscheidungen: DESIGNSYSTEM.md / QUELLEN.md
 * Einbindung: <link rel="stylesheet" href="sts-design-system.css">
 * Kontext: <body class="sts"> oder <div class="sts">…</div>
 * Optionale Varianten: data-sts-theme="service|ink|paper"
 * Alle Komponenten brauchen einen .sts-Kontext. Keine globalen Resets.
 * Lokale Schriftdateien: assets/fonts/ · Roboto unter SIL OFL.
 */

/* 01 · Schrift ----------------------------------------------------------- */
@font-face {
  font-family: "STS Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/roboto-latin-ext-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "STS Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/roboto-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "STS Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/roboto-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "STS Roboto"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("assets/fonts/roboto-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* 02 · Tokens. Markenwerte = Bestand; semantische Rollen = Konsolidierung. */
.sts {
  --sts-steel: #2a4b63;
  --sts-steel-dark: #1f394d;
  --sts-bronze: #a26f52;
  --sts-bronze-light: #d1b7a9;
  --sts-bronze-ink: #805237;
  --sts-blue: #2f80ed;
  --sts-blue-dark: #1d5fbf;
  --sts-slate: #2c3e50;
  --sts-slate-light: #34495e;
  --sts-gold: #b8966a;
  --sts-bg: #f4f7fa;
  --sts-surface: #ffffff;
  --sts-surface-alt: #edf3f8;
  --sts-ink: #10273b;
  --sts-muted: #526575;
  --sts-border: #d4e0e7;
  --sts-control-border: #758695;
  --sts-primary: #1d5fbf;
  --sts-primary-hover: #184f9f;
  --sts-on-primary: #ffffff;
  --sts-primary-soft: #e8f1fd;
  --sts-accent: #805237;
  --sts-accent-soft: #f5ede7;
  --sts-focus: #1d5fbf;
  --sts-success: #17603e;
  --sts-success-bg: #e8f5ed;
  --sts-warning: #785000;
  --sts-warning-bg: #fff4d6;
  --sts-danger: #b42318;
  --sts-danger-bg: #fff0ee;
  --sts-info: #17577e;
  --sts-info-bg: #e8f4fd;
  --sts-font: "STS Roboto", Roboto, Arial, sans-serif;
  --sts-font-heading: var(--sts-font);
  --sts-font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --sts-text-xs: .75rem;
  --sts-text-sm: .875rem;
  --sts-text-base: 1rem;
  --sts-text-lg: 1.125rem;
  --sts-text-xl: 1.25rem;
  --sts-text-2xl: clamp(1.375rem, 1.2rem + .65vw, 1.75rem);
  --sts-text-3xl: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --sts-text-display: clamp(2.25rem, 1.3rem + 3.1vw, 4.5rem);
  --sts-leading: 1.6;
  --sts-space-1: .25rem;
  --sts-space-2: .5rem;
  --sts-space-3: .75rem;
  --sts-space-4: 1rem;
  --sts-space-5: 1.25rem;
  --sts-space-6: 1.5rem;
  --sts-space-8: 2rem;
  --sts-space-10: 2.5rem;
  --sts-space-12: 3rem;
  --sts-space-16: 4rem;
  --sts-space-24: 6rem;
  --sts-radius-sm: .375rem;
  --sts-radius-control: .625rem;
  --sts-radius-panel: .875rem;
  --sts-radius-card: 1.25rem;
  --sts-radius-pill: 999px;
  --sts-shadow-sm: 0 2px 8px rgb(16 39 59 / .06);
  --sts-shadow-card: 0 8px 26px rgb(16 39 59 / .09);
  --sts-shadow-float: 0 16px 40px rgb(16 39 59 / .18);
  --sts-container: 75rem;
  --sts-form-width: 48rem;
  --sts-duration: 180ms;
  --sts-ease: cubic-bezier(.2,.7,.2,1);
  --sts-z-sticky: 20;
  --sts-z-overlay: 100;
  --sts-z-toast: 200;
  color-scheme: light;
  margin: 0;
  background: var(--sts-bg);
  color: var(--sts-ink);
  font: 400 var(--sts-text-base)/var(--sts-leading) var(--sts-font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
.sts[data-sts-theme="service"] {
  --sts-bg: #eef3f6; --sts-ink: #172733; --sts-muted: #526878;
  --sts-primary: #005d8f; --sts-primary-hover: #0d3f5f; --sts-primary-soft: #dcecf6;
  --sts-focus: #005d8f; --sts-radius-card: 1rem;
}
.sts[data-sts-theme="ink"] {
  --sts-bg: #0b0b0b; --sts-surface: #141414; --sts-surface-alt: #1c1c1c;
  --sts-ink: #f2f1ee; --sts-muted: #a3a29e; --sts-border: #383838;
  --sts-control-border: #8b8a86; --sts-primary: #f2f1ee; --sts-primary-hover: #ffffff;
  --sts-on-primary: #0b0b0b; --sts-primary-soft: #262626;
  --sts-accent: #d1b7a9; --sts-accent-soft: #30251e; --sts-focus: #d1b7a9;
  --sts-success: #a3dfb9; --sts-success-bg: #13291e;
  --sts-warning: #f4d58d; --sts-warning-bg: #30260f;
  --sts-danger: #ffb4ab; --sts-danger-bg: #351816;
  --sts-info: #b5d8f1; --sts-info-bg: #172b3a;
  --sts-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sts-radius-card: .625rem; --sts-shadow-sm: none; --sts-shadow-card: none;
  color-scheme: dark;
}
.sts[data-sts-theme="paper"] {
  --sts-bg: #f4f4f2; --sts-surface: #ffffff; --sts-surface-alt: #e4e4e1;
  --sts-ink: #0b0b0b; --sts-muted: #5f5f5a; --sts-border: #c6c6c3;
  --sts-primary: #0b0b0b; --sts-primary-hover: #333333; --sts-primary-soft: #e4e4e1;
  --sts-focus: #0b0b0b; --sts-control-border: #6e6d69;
  --sts-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sts-radius-sm: 0; --sts-radius-control: 0; --sts-radius-panel: 0; --sts-radius-card: 0;
  --sts-shadow-sm: none; --sts-shadow-card: none;
}

/* 03 · Basis / Fokus / Typografie --------------------------------------- */
.sts *, .sts *::before, .sts *::after { box-sizing: border-box; }
.sts [hidden] { display: none !important; }
.sts :where(button, input, select, textarea) { font: inherit; }
.sts :where(img, svg, video) { max-width: 100%; }
.sts :where(img) { height: auto; }
.sts :where(h1, h2, h3, h4, p, figure) { margin: 0; }
.sts :where(h1, h2, h3, h4) { font-family: var(--sts-font-heading); line-height: 1.2; text-wrap: balance; }
.sts :where(h1) { font-size: var(--sts-text-3xl); }
.sts :where(h2) { font-size: var(--sts-text-2xl); }
.sts :where(h3) { font-size: var(--sts-text-xl); }
.sts :where(h4) { font-size: var(--sts-text-lg); }
.sts :where(a) { color: var(--sts-primary); text-underline-offset: .2em; }
.sts :where(a:hover) { text-decoration-thickness: 2px; }
.sts :where(button, [type="submit"], [type="reset"], summary) { cursor: pointer; }
.sts :where(:focus-visible) { outline: 3px solid var(--sts-focus); outline-offset: 4px; }
.sts :where(section[id], h2[id], h3[id]) { scroll-margin-top: 5rem; }
.sts :where(code, pre, kbd) { font-family: var(--sts-font-mono); font-size: .875em; }
.sts :where(pre) { overflow-x: auto; white-space: pre; padding: 1.25rem; background: var(--sts-surface-alt); border: 1px solid var(--sts-border); border-radius: var(--sts-radius-control); }
.sts-display { font-size: var(--sts-text-display); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
.sts-lead { max-width: 62ch; color: var(--sts-muted); font-size: var(--sts-text-lg); }
.sts-eyebrow { color: var(--sts-accent); font-size: var(--sts-text-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sts-prose { max-width: 65ch; }
.sts-prose > * + * { margin-block-start: 1rem; }
.sts-prose :where(h2, h3) { margin-block-start: 2rem; }
.sts-prose :where(ul, ol) { padding-inline-start: 1.4rem; }
.sts-muted { color: var(--sts-muted); }
.sts-small { font-size: var(--sts-text-sm); }
.sts-mono { font-family: var(--sts-font-mono); }
.sts-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sts-skip-link { position: fixed; inset: .5rem auto auto .5rem; z-index: 999; padding: .75rem 1rem; background: var(--sts-surface); color: var(--sts-ink); transform: translateY(-180%); }
.sts-skip-link:focus { transform: none; }

/* 04 · Layout ----------------------------------------------------------- */
.sts-container { width: min(100% - 2rem, var(--sts-container)); margin-inline: auto; }
.sts-container--form { max-width: var(--sts-form-width); }
.sts-section { padding-block: clamp(2rem, 5vw, 5rem); }
.sts-stack { display: flex; flex-direction: column; gap: var(--sts-gap, 1.5rem); }
.sts-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sts-gap, .75rem); }
.sts-between { justify-content: space-between; }
.sts-grid { display: grid; gap: var(--sts-gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.sts-grid > *, .sts-split > * { min-width: 0; }
.sts-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.sts-divider { width: 100%; border: 0; border-block-start: 1px solid var(--sts-border); margin-block: 1.5rem; }

/* 05 · Navigation / Hero / Footer --------------------------------------- */
.sts-header { background: var(--sts-steel-dark); color: #fff; border-block-end: 1px solid rgb(255 255 255 / .15); }
.sts-header--textured { background: var(--sts-steel-dark) url("assets/brand/header.jpg") center / cover; }
.sts-header--sticky { position: sticky; top: 0; z-index: var(--sts-z-sticky); }
.sts-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 5rem; padding-block: 1rem; }
.sts-logo { display: block; width: 15rem; max-width: 65vw; }
.sts-nav { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sts-nav__link { color: inherit; font-weight: 600; font-size: var(--sts-text-sm); padding: .65rem 1rem; min-height: 2.75rem; border-radius: var(--sts-radius-sm); text-decoration: none; }
.sts-nav__link:hover, .sts-nav__link[aria-current="page"] { background: rgb(255 255 255 / .13); color: #fff; }
.sts-header :focus-visible, .sts-hero :focus-visible, .sts-footer :focus-visible { outline-color: #fff; }
.sts-menu { margin-inline-start: auto; }
.sts-menu > summary { list-style: none; min-height: 2.75rem; display: flex; align-items: center; padding: .5rem .75rem; border: 1px solid #8b9da9; border-radius: .375rem; }
.sts-menu > summary::-webkit-details-marker { display: none; }
.sts-menu[open] .sts-nav { margin-top: 1rem; }
.sts-hero { padding: clamp(2rem, 6vw, 5rem); background: var(--sts-steel-dark); color: #fff; border-radius: var(--sts-radius-card); }
.sts-hero .sts-eyebrow { color: var(--sts-bronze-light); }
.sts-hero .sts-lead { color: #dbe8f5; }
.sts-hero__media { display: block; width: 100%; border-radius: var(--sts-radius-panel); aspect-ratio: 4 / 3; object-fit: cover; }
.sts-hero .sts-btn--secondary { background: transparent; color: #fff; border-color: #a9bccb; }
.sts-hero .sts-btn--secondary:hover { background: rgb(255 255 255 / .1); }
.sts-footer { background: var(--sts-slate); color: #e6eef4; padding-block: 3rem; }
.sts-footer a { color: #fff; }
.sts-footer h2, .sts-footer h3 { color: #fff; }
.sts-footer__bottom { padding-top: 1.5rem; margin-top: 2rem; border-top: 1px solid #647a8d; font-size: var(--sts-text-sm); }
.sts-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; color: var(--sts-muted); font-size: var(--sts-text-sm); }
.sts-breadcrumb li + li::before { content: "/"; margin-inline-end: .5rem; }

/* 06 · Buttons / Icons -------------------------------------------------- */
.sts-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.875rem; padding: .65rem 1.25rem;
  border: 1px solid transparent; border-radius: var(--sts-radius-control);
  background: var(--sts-primary); color: var(--sts-on-primary);
  font-size: var(--sts-text-sm); font-weight: 700; line-height: 1.4; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background var(--sts-duration) var(--sts-ease), box-shadow var(--sts-duration) var(--sts-ease);
}
.sts-btn:hover { background: var(--sts-primary-hover); text-decoration: none; }
.sts-btn:active { transform: translateY(1px); }
.sts-btn--secondary { background: var(--sts-surface); color: var(--sts-ink); border-color: var(--sts-control-border); }
.sts-btn--secondary:hover { background: var(--sts-surface-alt); }
.sts-btn--ghost { background: transparent; color: var(--sts-primary); }
.sts-btn--ghost:hover { background: var(--sts-primary-soft); }
.sts-btn--bronze { background: var(--sts-bronze-ink); color: #fff; }
.sts-btn--bronze:hover { background: #69422b; }
.sts-btn--danger { background: #b42318; color: #fff; }
.sts-btn--danger:hover { background: #8f1d14; }
.sts-btn--gradient { background: linear-gradient(135deg, #236fd8, #1d5fbf); color: #fff; }
.sts-btn--gradient:hover { background: linear-gradient(135deg, #1d5fbf, #184f9f); }
.sts-btn--sm { min-height: 2.75rem; padding: .5rem .875rem; }
.sts-btn--lg { min-height: 3.25rem; padding: .875rem 1.75rem; font-size: 1rem; }
.sts-btn--block { width: 100%; }
.sts-btn--icon { min-width: 2.875rem; padding: .625rem; }
.sts-btn:disabled, .sts-btn[aria-disabled="true"] { background: var(--sts-surface-alt); color: var(--sts-muted); border-color: var(--sts-border); cursor: not-allowed; box-shadow: none; transform: none; }
.sts-btn[aria-busy="true"] { cursor: progress; }
.sts-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* 07 · Karten / Kennzahlen / Listen ------------------------------------ */
.sts-card { background: var(--sts-surface); border: 1px solid var(--sts-border); border-radius: var(--sts-radius-card); box-shadow: var(--sts-shadow-card); }
.sts-card__body { padding: clamp(1.25rem, 2.5vw, 2rem); }
.sts-card__header, .sts-card__footer { padding: 1.25rem 1.5rem; }
.sts-card__header { border-bottom: 1px solid var(--sts-border); }
.sts-card__footer { border-top: 1px solid var(--sts-border); }
.sts-card__media { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--sts-radius-card) var(--sts-radius-card) 0 0; }
.sts-card__media--poster { aspect-ratio: 3 / 4; object-fit: contain; background: var(--sts-surface-alt); padding: .5rem; }
.sts-card--interactive { transition: box-shadow var(--sts-duration); }
.sts-card--interactive:hover, .sts-card--interactive:focus-within { box-shadow: var(--sts-shadow-float); }
.sts-card--featured { border: 2px solid var(--sts-primary); }
.sts-stat { padding: 1.5rem; }
.sts-stat__value { font-size: var(--sts-text-3xl); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sts-stat__label { color: var(--sts-muted); font-size: var(--sts-text-sm); margin-top: .5rem; }
.sts-list { list-style: none; padding: 0; margin: 0; }
.sts-list > li { display: flex; align-items: start; gap: .75rem; padding-block: .875rem; }
.sts-list > li + li { border-top: 1px solid var(--sts-border); }
.sts-avatar { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--sts-primary-soft); color: var(--sts-primary); font-size: var(--sts-text-sm); font-weight: 700; }
.sts-empty { padding: 3rem 1.5rem; text-align: center; color: var(--sts-muted); }

/* 08 · Formulare. Labels und Fehlermeldungen im HTML verknüpfen. ---------- */
.sts-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.sts-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sts-field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.sts-label { color: var(--sts-ink); font-size: var(--sts-text-sm); font-weight: 600; }
.sts-required { color: var(--sts-danger); }
.sts-input, .sts-select, .sts-textarea {
  display: block; width: 100%; min-width: 0; min-height: 3rem; padding: .7rem .875rem;
  border: 1px solid var(--sts-control-border); border-radius: var(--sts-radius-control);
  background: var(--sts-surface); color: var(--sts-ink); font-size: 1rem; line-height: 1.5;
  transition: border-color var(--sts-duration), box-shadow var(--sts-duration);
}
.sts-input::placeholder, .sts-textarea::placeholder { color: var(--sts-muted); opacity: 1; }
.sts-input:hover, .sts-select:hover, .sts-textarea:hover { border-color: var(--sts-ink); }
.sts-input:focus, .sts-select:focus, .sts-textarea:focus { border-color: var(--sts-focus); outline: 2px solid var(--sts-focus); outline-offset: 2px; }
.sts-textarea { min-height: 8rem; resize: vertical; }
.sts-select { cursor: pointer; }
.sts-input[aria-invalid="true"], .sts-select[aria-invalid="true"], .sts-textarea[aria-invalid="true"] { border-color: var(--sts-danger); outline-color: var(--sts-danger); box-shadow: inset 3px 0 var(--sts-danger); }
.sts-input:disabled, .sts-select:disabled, .sts-textarea:disabled { background: var(--sts-surface-alt); color: var(--sts-muted); cursor: not-allowed; opacity: 1; }
.sts-input[readonly], .sts-textarea[readonly] { background: var(--sts-surface-alt); }
.sts-hint { color: var(--sts-muted); font-size: var(--sts-text-sm); }
.sts-error { color: var(--sts-danger); font-size: var(--sts-text-sm); }
.sts-fieldset { border: 1px solid var(--sts-border); border-radius: var(--sts-radius-panel); padding: 1.25rem; margin: 0; min-width: 0; }
.sts-fieldset > legend { font-weight: 700; padding-inline: .5rem; }
.sts-choice { display: flex; align-items: start; gap: .75rem; padding-block: .625rem; min-height: 2.75rem; cursor: pointer; }
.sts-choice input { accent-color: var(--sts-primary); width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; flex: 0 0 auto; }
.sts-choice:has(input:disabled) { color: var(--sts-muted); cursor: not-allowed; }
.sts-choice-card { border: 1px solid var(--sts-control-border); border-radius: var(--sts-radius-control); padding: 1rem; }
.sts-choice-card:has(input:checked) { border-color: var(--sts-primary); background: var(--sts-primary-soft); box-shadow: inset 0 0 0 1px var(--sts-primary); }
.sts-choice-card:has(input:focus-visible) { outline: 3px solid var(--sts-focus); outline-offset: 3px; }
.sts-switch { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; cursor: pointer; }
.sts-switch input { appearance: none; width: 2.75rem; height: 1.625rem; margin: 0; border: 2px solid var(--sts-control-border); border-radius: 999px; background: var(--sts-surface-alt); position: relative; cursor: pointer; flex: 0 0 auto; }
.sts-switch input::before { content: ""; position: absolute; left: 3px; top: 3px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sts-muted); transition: transform var(--sts-duration); }
.sts-switch input:checked { background: var(--sts-primary); border-color: var(--sts-primary); }
.sts-switch input:checked::before { transform: translateX(1.125rem); background: var(--sts-on-primary); }
.sts-switch input:disabled { opacity: .6; cursor: not-allowed; }
.sts-upload { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; background: var(--sts-surface-alt); border: 1px dashed var(--sts-control-border); border-radius: var(--sts-radius-panel); }
.sts-upload:focus-within { outline: 3px solid var(--sts-focus); outline-offset: 3px; }
.sts-upload input { width: 100%; min-width: 0; max-width: 100%; font-size: var(--sts-text-sm); }
.sts-upload input::file-selector-button { padding: .6rem .875rem; margin-inline-end: .75rem; border: 1px solid var(--sts-control-border); border-radius: var(--sts-radius-sm); background: var(--sts-surface); color: var(--sts-ink); font: inherit; cursor: pointer; min-height: 2.75rem; }
.sts-range { width: 100%; min-height: 2.75rem; accent-color: var(--sts-primary); }
.sts-form-actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }

/* 09 · Status / Badge / Fortschritt ------------------------------------- */
.sts-badge { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; padding: .25rem .65rem; border: 1px solid transparent; border-radius: var(--sts-radius-pill); background: var(--sts-primary-soft); color: var(--sts-primary); font-size: var(--sts-text-xs); font-weight: 700; line-height: 1.5; }
.sts-badge--success { background: var(--sts-success-bg); color: var(--sts-success); }
.sts-badge--warning { background: var(--sts-warning-bg); color: var(--sts-warning); }
.sts-badge--danger { background: var(--sts-danger-bg); color: var(--sts-danger); }
.sts-badge--bronze { background: var(--sts-accent-soft); color: var(--sts-accent); }
.sts-badge--neutral { background: var(--sts-surface-alt); color: var(--sts-muted); }
.sts-alert { display: flex; align-items: start; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--sts-radius-control); border: 1px solid currentColor; border-inline-start-width: 4px; background: var(--sts-info-bg); color: var(--sts-info); font-size: var(--sts-text-sm); }
.sts-alert--success { background: var(--sts-success-bg); color: var(--sts-success); }
.sts-alert--warning { background: var(--sts-warning-bg); color: var(--sts-warning); }
.sts-alert--danger { background: var(--sts-danger-bg); color: var(--sts-danger); }
.sts-alert a { color: inherit; }
.sts-stepper { display: flex; gap: .75rem; padding: 0; margin: 0; list-style: none; counter-reset: sts-step; }
.sts-stepper > li { flex: 1; display: flex; align-items: center; gap: .625rem; color: var(--sts-muted); font-size: var(--sts-text-sm); padding-bottom: .875rem; border-bottom: 3px solid var(--sts-border); counter-increment: sts-step; }
.sts-stepper > li::before { content: counter(sts-step); display: grid; place-items: center; width: 1.875rem; height: 1.875rem; flex: 0 0 auto; background: var(--sts-surface-alt); border: 1px solid var(--sts-control-border); border-radius: 50%; font-weight: 700; }
.sts-stepper > li[aria-current="step"] { color: var(--sts-primary); border-color: var(--sts-primary); font-weight: 700; }
.sts-stepper > li[aria-current="step"]::before { background: var(--sts-primary); color: var(--sts-on-primary); border-color: var(--sts-primary); }
.sts-stepper > li[data-complete="true"] { color: var(--sts-success); border-color: var(--sts-success); }
.sts-progress { display: block; width: 100%; height: .625rem; border: 0; border-radius: 999px; overflow: hidden; appearance: none; background: var(--sts-border); accent-color: var(--sts-primary); }
.sts-progress::-webkit-progress-bar { background: var(--sts-border); border-radius: 999px; }
.sts-progress::-webkit-progress-value { background: var(--sts-primary); border-radius: 999px; }
.sts-progress::-moz-progress-bar { background: var(--sts-primary); border-radius: 999px; }
.sts-spinner { display: inline-block; width: 1.125rem; height: 1.125rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: sts-spin .75s linear infinite; }
.sts-skeleton { min-height: 1rem; border-radius: var(--sts-radius-sm); background: var(--sts-surface-alt); animation: sts-pulse 1.5s ease-in-out infinite alternate; }
@keyframes sts-spin { to { transform: rotate(360deg); } }
@keyframes sts-pulse { to { opacity: .5; } }

/* 10 · Tabellen / Tabs / Akkordeon / Dialog ------------------------------ */
.sts-table-wrap { overflow-x: auto; border: 1px solid var(--sts-border); border-radius: var(--sts-radius-panel); background: var(--sts-surface); }
.sts-table { width: 100%; border-collapse: collapse; text-align: start; font-size: var(--sts-text-sm); }
.sts-table caption { text-align: start; padding: 1rem; font-weight: 700; }
.sts-table th, .sts-table td { padding: .875rem 1rem; border-bottom: 1px solid var(--sts-border); vertical-align: middle; }
.sts-table thead th { background: var(--sts-surface-alt); color: var(--sts-muted); font-size: var(--sts-text-xs); font-weight: 700; }
.sts-table tbody tr:last-child > * { border-bottom: 0; }
.sts-table tbody tr:hover { background: var(--sts-surface-alt); }
.sts-table--nowrap td { white-space: nowrap; }
.sts-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.sts-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; }
.sts-pagination [aria-current="page"] { background: var(--sts-primary); color: var(--sts-on-primary); }
.sts-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--sts-border); }
.sts-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--sts-muted); padding: .875rem 1rem; min-height: 2.75rem; font-size: var(--sts-text-sm); font-weight: 600; white-space: nowrap; }
.sts-tab[aria-selected="true"] { color: var(--sts-primary); border-bottom-color: var(--sts-primary); }
.sts-tab:hover { background: var(--sts-surface-alt); }
.sts-tab:focus-visible { outline-offset: -4px; }
.sts-tabpanel { padding-block: 1.5rem; }
.sts-accordion { border: 1px solid var(--sts-border); background: var(--sts-surface); border-radius: var(--sts-radius-panel); }
.sts-accordion + .sts-accordion { margin-top: .75rem; }
.sts-accordion > summary { padding: 1.125rem 1.25rem; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sts-accordion > summary::-webkit-details-marker { display: none; }
.sts-accordion > summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; }
.sts-accordion[open] > summary::after { content: "−"; }
.sts-accordion__body { padding: 0 1.25rem 1.25rem; color: var(--sts-muted); }
.sts-dialog { width: min(34rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 2rem; border: 1px solid var(--sts-border); border-radius: var(--sts-radius-card); background: var(--sts-surface); color: var(--sts-ink); box-shadow: var(--sts-shadow-float); }
.sts-dialog::backdrop { background: rgb(10 25 38 / .65); }
.sts-toast { position: fixed; z-index: var(--sts-z-toast); right: 1.5rem; bottom: 1.5rem; max-width: min(26rem, calc(100% - 3rem)); padding: 1rem 1.25rem; border: 1px solid var(--sts-control-border); border-radius: var(--sts-radius-panel); background: var(--sts-surface); color: var(--sts-ink); box-shadow: var(--sts-shadow-float); }

/* 11 · Responsive / Bewegung / Systemfarben / Druck --------------------- */
@media (max-width: 48rem) {
  .sts-split { grid-template-columns: 1fr; }
  .sts-header__inner { align-items: start; flex-wrap: wrap; }
  .sts-header__inner > .sts-nav { width: 100%; }
  .sts-header__inner:has(> .sts-nav) { flex-wrap: wrap; }
  .sts-form-row { grid-template-columns: 1fr; }
  .sts-stepper { flex-direction: column; gap: .5rem; }
  .sts-stepper > li { border-bottom: 0; padding: .375rem 0; }
  .sts-menu[open] .sts-nav { flex-direction: column; align-items: stretch; }
}
@media (max-width: 30rem) {
  .sts-hero { padding: 1.5rem; }
  .sts-card__body { padding: 1.25rem; }
  .sts-form-actions > .sts-btn { width: 100%; }
  .sts-dialog { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sts *, .sts *::before, .sts *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .sts-btn, .sts-badge, .sts-alert, .sts-choice-card { border: 1px solid ButtonText; }
  .sts-switch input { appearance: auto; }
  .sts-switch input::before { display: none; }
  .sts-stepper > li[aria-current="step"] { outline: 2px solid Highlight; }
  .sts-progress { appearance: auto; }
}
@media print {
  .sts { --sts-bg: #fff; --sts-surface: #fff; --sts-ink: #000; --sts-muted: #333; background: #fff; color: #000; }
  .sts-header, .sts-footer, .sts-no-print, .sts-toast { display: none !important; }
  .sts-card { box-shadow: none; break-inside: avoid; }
  .sts-hero { background: #fff; color: #000; border: 1px solid #999; }
  .sts-hero .sts-lead, .sts-hero .sts-eyebrow { color: #333; }
  .sts-section { padding-block: 1rem; }
}