/* Kopiert aus dem Skill webdesign-styleguide. Nicht bearbeiten.
 * Version: unbekannt
 * Aenderungen gehoeren in src/styles/tokens.css.
 */
/* Erzeugt von `npm run build:css` aus docs/extraction/tokens.json.
 * Nicht von Hand bearbeiten — Aenderungen gehoeren in die Marken-Tokendatei
 * des Projekts (src/styles/tokens.css).
 *
 * Jede Deklaration traegt ihren Status. Die Bedeutungen stehen hier woertlich
 * so, wie tokens.json sie fuehrt (Feld `statusMeaning`); dieser Generator
 * verfasst keine eigene Fassung davon.
 *
 *   belegt
 *     Aus dem Material extrahiert und von der Abnahme bestaetigt. Nur diese
 *     Werte darf Etappe 1 als belegte Regel fuehren; ein Projekt darf sie
 *     nicht ueberschreiben.
 *
 *   vorgabewert
 *     Der Wert ist nicht als eigenstaendiger Handwerksbefund dieser Werkstatt
 *     belegt. Das hat zwei Spielarten, die dasselbe Etikett tragen, weil sie
 *     dieselbe Folge haben: entweder stammt er nachweislich oder erkennbar aus
 *     fremder Herkunft (Relume-Vorlage, Untitled-UI-Paletten), oder er ist
 *     nicht unabhaengig bestaetigt, weil die Sites, die ihn tragen, eine
 *     gemeinsame Herkunft haben. In beiden Faellen wird er uebernommen, aber
 *     als projektseitig ueberschreibbarer Vorgabewert gefuehrt (§13, §22.1).
 *     Ein vierter Status fuer die zweite Spielart waere schlimmer als die
 *     Weitung: drei Stufen, die beide Faelle tragen, sind einer vierten
 *     vorzuziehen, die niemand von der dritten unterscheidet.
 *
 *   setzung
 *     Der Mehrheitswert ist verworfen, fuer den Ersatzwert existiert aber kein
 *     entscheidendes Argument. Er gilt als Setzung, nicht als Befund, und darf
 *     nicht als belegt dargestellt werden (§14.2, §20.3).
 */

:root {
  --error-25: #fffbfa; /* vorgabewert — heras, relume-gruppe */
  --error-50: #fef3f2; /* vorgabewert — heras, relume-gruppe */
  --error-100: #fee4e2; /* vorgabewert — heras, relume-gruppe */
  --error-200: #fecdca; /* vorgabewert — heras, relume-gruppe */
  --error-300: #fda29b; /* vorgabewert — heras, relume-gruppe */
  --error-400: #f97066; /* vorgabewert — heras, relume-gruppe */
  --error-500: #f04438; /* vorgabewert — heras, relume-gruppe */
  --error-600: #d92d20; /* vorgabewert — heras, relume-gruppe */
  --error-700: #b42318; /* vorgabewert — heras, relume-gruppe */
  --error-800: #912018; /* vorgabewert — heras, relume-gruppe */
  --error-900: #7a271a; /* vorgabewert — heras, relume-gruppe */
  --error-950: #55160c; /* vorgabewert — heras, relume-gruppe */
  --success-25: #f6fef9; /* vorgabewert — heras, relume-gruppe */
  --success-50: #ecfdf3; /* vorgabewert — heras, relume-gruppe */
  --success-100: #dcfae6; /* setzung — heras */
  --success-200: #a9efc5; /* setzung — heras */
  --success-300: #75e0a7; /* setzung — heras */
  --success-400: #47cd89; /* setzung — heras */
  --success-500: #17b26a; /* setzung — heras */
  --success-600: #079455; /* setzung — heras */
  --success-700: #067647; /* setzung — heras */
  --success-800: #085d3a; /* setzung — heras */
  --success-900: #074d31; /* setzung — heras */
  --success-950: #053321; /* vorgabewert — heras, relume-gruppe */
  --white: #ffffff; /* belegt — heras, flo-steinle, relume-gruppe */
  --black: #000000; /* belegt — heras, relume-gruppe */
  --font-size-h1: 4.5rem; /* vorgabewert — relume-gruppe */
  --font-size-h2: 3.75rem; /* vorgabewert — heras, relume-gruppe */
  --font-size-h4: 2.25rem; /* vorgabewert — heras, relume-gruppe */
  --font-size-h5: 1.875rem; /* vorgabewert — heras, relume-gruppe */
  --font-size-h6: 1.5rem; /* vorgabewert — heras, relume-gruppe */
  --font-size-text-xsmall: 0.75rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --font-size-text-small: 0.875rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --font-size-text-main: 1rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --font-size-text-large: 1.125rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --font-size-text-xlarge: 1.25rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --weight-light: 300; /* belegt — heras, relume-gruppe */
  --weight-regular: 400; /* belegt — heras, flo-steinle, relume-gruppe */
  --weight-medium: 500; /* belegt — heras, relume-gruppe */
  --weight-semibold: 600; /* belegt — heras, flo-steinle, relume-gruppe */
  --weight-bold: 700; /* belegt — heras, flo-steinle, relume-gruppe */
  --weight-xbold: 800; /* belegt — heras, flo-steinle, relume-gruppe */
  --line-height-text-main: 1.5; /* belegt — heras, flo-steinle, relume-gruppe */
  --line-height-h2: 1.2; /* vorgabewert — heras, flo-steinle, relume-gruppe */
  --section-space-small: 4rem; /* belegt — heras, relume-gruppe */
  --section-space-main: 6rem; /* belegt — heras */
  --section-space-large: 10rem; /* belegt — heras */
  --container-small: 48rem; /* vorgabewert — relume-gruppe */
  --container-main: 64rem; /* vorgabewert — relume-gruppe */
  --container-full: 90rem; /* belegt — heras, flo-steinle, relume-gruppe */
  --radius-small: 0.5rem; /* vorgabewert — heras, flo-steinle */
  --radius-main: 1rem; /* vorgabewert — heras, flo-steinle */
  --button-font-weight: 600; /* belegt — flo-steinle, relume-gruppe */
}

/* --- Utilities ---
 * Erzeugt aus docs/extraction/tokens.json, angehaengt an diese Datei von
 * `npm run build:css`.
 *
 * Die Farb-Utilities (u-tc-*, u-bc-*) zeigen teils auf Markenrollen
 * (--brand-*, --gray-*), die in DIESER Datei nicht definiert sind — sie
 * stehen erst in der Projekt-Tokendatei (siehe tokens.template.css). Das
 * ist Absicht, der Kern der Markenebene, und kein Fehler: styleguide.css
 * ist allein unvollstaendig und gilt nur zusammen mit der Projektdatei.
 *
 * Die Breakpoints (991px, 479px) und die Skalierungsleiter stehen unten
 * fest im Code. Das ist keine Werthardcodierung im Sinn des Anti-
 * Hardcodier-Tests: es gibt in tokens.json keine Tokens, aus denen sie
 * abzuleiten waeren.
 *
 * Ihr Rang ist aber nicht derselbe. Die Breakpoints sind der Standard des
 * Baukastens, gegen den die ganze Skala abgestimmt wurde (Spec,
 * "Breakpoints"). Die Skalierungsleiter ist aus einer EINZIGEN Site
 * ausgemessen und damit nach dem Massstab dieses Projekts kein Beleg,
 * sondern eine Setzung des Frameworks — siehe die Konstante SKALIERUNG
 * weiter unten und skill/references/typography.md.
 */

/* Farben */
.u-tc-error-25 { color: var(--error-25); }
.u-bc-error-25 { background-color: var(--error-25); }
.u-tc-error-50 { color: var(--error-50); }
.u-bc-error-50 { background-color: var(--error-50); }
.u-tc-error-100 { color: var(--error-100); }
.u-bc-error-100 { background-color: var(--error-100); }
.u-tc-error-200 { color: var(--error-200); }
.u-bc-error-200 { background-color: var(--error-200); }
.u-tc-error-300 { color: var(--error-300); }
.u-bc-error-300 { background-color: var(--error-300); }
.u-tc-error-400 { color: var(--error-400); }
.u-bc-error-400 { background-color: var(--error-400); }
.u-tc-error-500 { color: var(--error-500); }
.u-bc-error-500 { background-color: var(--error-500); }
.u-tc-error-600 { color: var(--error-600); }
.u-bc-error-600 { background-color: var(--error-600); }
.u-tc-error-700 { color: var(--error-700); }
.u-bc-error-700 { background-color: var(--error-700); }
.u-tc-error-800 { color: var(--error-800); }
.u-bc-error-800 { background-color: var(--error-800); }
.u-tc-error-900 { color: var(--error-900); }
.u-bc-error-900 { background-color: var(--error-900); }
.u-tc-error-950 { color: var(--error-950); }
.u-bc-error-950 { background-color: var(--error-950); }
.u-tc-success-25 { color: var(--success-25); }
.u-bc-success-25 { background-color: var(--success-25); }
.u-tc-success-50 { color: var(--success-50); }
.u-bc-success-50 { background-color: var(--success-50); }
.u-tc-success-100 { color: var(--success-100); }
.u-bc-success-100 { background-color: var(--success-100); }
.u-tc-success-200 { color: var(--success-200); }
.u-bc-success-200 { background-color: var(--success-200); }
.u-tc-success-300 { color: var(--success-300); }
.u-bc-success-300 { background-color: var(--success-300); }
.u-tc-success-400 { color: var(--success-400); }
.u-bc-success-400 { background-color: var(--success-400); }
.u-tc-success-500 { color: var(--success-500); }
.u-bc-success-500 { background-color: var(--success-500); }
.u-tc-success-600 { color: var(--success-600); }
.u-bc-success-600 { background-color: var(--success-600); }
.u-tc-success-700 { color: var(--success-700); }
.u-bc-success-700 { background-color: var(--success-700); }
.u-tc-success-800 { color: var(--success-800); }
.u-bc-success-800 { background-color: var(--success-800); }
.u-tc-success-900 { color: var(--success-900); }
.u-bc-success-900 { background-color: var(--success-900); }
.u-tc-success-950 { color: var(--success-950); }
.u-bc-success-950 { background-color: var(--success-950); }
.u-tc-white { color: var(--white); }
.u-bc-white { background-color: var(--white); }
.u-tc-black { color: var(--black); }
.u-bc-black { background-color: var(--black); }
.u-tc-brand-25 { color: var(--brand-25); }
.u-bc-brand-25 { background-color: var(--brand-25); }
.u-tc-brand-50 { color: var(--brand-50); }
.u-bc-brand-50 { background-color: var(--brand-50); }
.u-tc-brand-100 { color: var(--brand-100); }
.u-bc-brand-100 { background-color: var(--brand-100); }
.u-tc-brand-200 { color: var(--brand-200); }
.u-bc-brand-200 { background-color: var(--brand-200); }
.u-tc-brand-300 { color: var(--brand-300); }
.u-bc-brand-300 { background-color: var(--brand-300); }
.u-tc-brand-400 { color: var(--brand-400); }
.u-bc-brand-400 { background-color: var(--brand-400); }
.u-tc-brand-500 { color: var(--brand-500); }
.u-bc-brand-500 { background-color: var(--brand-500); }
.u-tc-brand-600 { color: var(--brand-600); }
.u-bc-brand-600 { background-color: var(--brand-600); }
.u-tc-brand-700 { color: var(--brand-700); }
.u-bc-brand-700 { background-color: var(--brand-700); }
.u-tc-brand-800 { color: var(--brand-800); }
.u-bc-brand-800 { background-color: var(--brand-800); }
.u-tc-brand-900 { color: var(--brand-900); }
.u-bc-brand-900 { background-color: var(--brand-900); }
.u-tc-brand-950 { color: var(--brand-950); }
.u-bc-brand-950 { background-color: var(--brand-950); }
.u-tc-gray-25 { color: var(--gray-25); }
.u-bc-gray-25 { background-color: var(--gray-25); }
.u-tc-gray-50 { color: var(--gray-50); }
.u-bc-gray-50 { background-color: var(--gray-50); }
.u-tc-gray-100 { color: var(--gray-100); }
.u-bc-gray-100 { background-color: var(--gray-100); }
.u-tc-gray-200 { color: var(--gray-200); }
.u-bc-gray-200 { background-color: var(--gray-200); }
.u-tc-gray-300 { color: var(--gray-300); }
.u-bc-gray-300 { background-color: var(--gray-300); }
.u-tc-gray-400 { color: var(--gray-400); }
.u-bc-gray-400 { background-color: var(--gray-400); }
.u-tc-gray-500 { color: var(--gray-500); }
.u-bc-gray-500 { background-color: var(--gray-500); }
.u-tc-gray-600 { color: var(--gray-600); }
.u-bc-gray-600 { background-color: var(--gray-600); }
.u-tc-gray-700 { color: var(--gray-700); }
.u-bc-gray-700 { background-color: var(--gray-700); }
.u-tc-gray-800 { color: var(--gray-800); }
.u-bc-gray-800 { background-color: var(--gray-800); }
.u-tc-gray-900 { color: var(--gray-900); }
.u-bc-gray-900 { background-color: var(--gray-900); }
.u-tc-gray-950 { color: var(--gray-950); }
.u-bc-gray-950 { background-color: var(--gray-950); }

/* Typografie */
.u-text-style-h1 {
  --_ts--font-size: var(--font-size-h1);
  font-size: var(--_ts--font-size);
}
.u-text-style-h2 {
  --_ts--font-size: var(--font-size-h2);
  --_ts--line-height: var(--line-height-h2);
  font-size: var(--_ts--font-size);
  line-height: var(--_ts--line-height);
}
.u-text-style-h4 {
  --_ts--font-size: var(--font-size-h4);
  font-size: var(--_ts--font-size);
}
.u-text-style-h5 {
  --_ts--font-size: var(--font-size-h5);
  font-size: var(--_ts--font-size);
}
.u-text-style-h6 {
  --_ts--font-size: var(--font-size-h6);
  font-size: var(--_ts--font-size);
}
.u-text-style-text-xsmall {
  --_ts--font-size: var(--font-size-text-xsmall);
  font-size: var(--_ts--font-size);
}
.u-text-style-text-small {
  --_ts--font-size: var(--font-size-text-small);
  font-size: var(--_ts--font-size);
}
.u-text-style-text-main {
  --_ts--font-size: var(--font-size-text-main);
  --_ts--line-height: var(--line-height-text-main);
  font-size: var(--_ts--font-size);
  line-height: var(--_ts--line-height);
}
.u-text-style-text-large {
  --_ts--font-size: var(--font-size-text-large);
  font-size: var(--_ts--font-size);
}
.u-text-style-text-xlarge {
  --_ts--font-size: var(--font-size-text-xlarge);
  font-size: var(--_ts--font-size);
}

@media screen and (max-width: 991px) {
  .u-text-style-h1 { --_ts--font-size: calc(var(--font-size-h1) * .875); }
  .u-text-style-h2 { --_ts--font-size: calc(var(--font-size-h2) * .9); }
  .u-text-style-h4 { --_ts--font-size: calc(var(--font-size-h4) * .95); }
  .u-text-style-h5 { --_ts--font-size: calc(var(--font-size-h5) * .95); }
  .u-text-style-h6 { --_ts--font-size: calc(var(--font-size-h6) * .95); }
  .u-text-style-text-main { --_ts--font-size: calc(var(--font-size-text-main) * .95); }
  .u-text-style-text-large { --_ts--font-size: calc(var(--font-size-text-large) * .925); }
  .u-text-style-text-xlarge { --_ts--font-size: calc(var(--font-size-text-xlarge) * .9); }
}

@media screen and (max-width: 479px) {
  .u-text-style-h1 { --_ts--font-size: calc(var(--font-size-h1) * .85); }
  .u-text-style-h2 { --_ts--font-size: calc(var(--font-size-h2) * .875); }
  .u-text-style-h4 { --_ts--font-size: calc(var(--font-size-h4) * .875); }
  .u-text-style-h5 { --_ts--font-size: calc(var(--font-size-h5) * .875); }
  .u-text-style-h6 { --_ts--font-size: calc(var(--font-size-h6) * .925); }
  .u-text-style-text-main { --_ts--font-size: calc(var(--font-size-text-main) * .925); }
  .u-text-style-text-large { --_ts--font-size: calc(var(--font-size-text-large) * .9); }
  .u-text-style-text-xlarge { --_ts--font-size: calc(var(--font-size-text-xlarge) * .875); }
}

/* Schriftgewicht */
.u-weight-light { font-weight: var(--weight-light); }
.u-weight-regular { font-weight: var(--weight-regular); }
.u-weight-medium { font-weight: var(--weight-medium); }
.u-weight-semibold { font-weight: var(--weight-semibold); }
.u-weight-bold { font-weight: var(--weight-bold); }
.u-weight-xbold { font-weight: var(--weight-xbold); }

/* Rundung */
.u-radius-small { border-radius: var(--radius-small); }
.u-radius-main { border-radius: var(--radius-main); }

/* Abstand */
.u-mt-small { margin-top: var(--section-space-small); }
.u-mt-main { margin-top: var(--section-space-main); }
.u-mt-large { margin-top: var(--section-space-large); }
.u-mb-small { margin-bottom: var(--section-space-small); }
.u-mb-main { margin-bottom: var(--section-space-main); }
.u-mb-large { margin-bottom: var(--section-space-large); }
.u-gap-small { gap: var(--section-space-small); }
.u-gap-main { gap: var(--section-space-main); }
.u-gap-large { gap: var(--section-space-large); }

/* Container */
.u-container-small { width: 100%; max-width: var(--container-small); margin-left: auto; margin-right: auto; }
.u-container { width: 100%; max-width: var(--container-main); margin-left: auto; margin-right: auto; }
.u-container-full { width: 100%; max-width: var(--container-full); margin-left: auto; margin-right: auto; }

/* Ausrichtung und Umbruch */
.u-text-align-left { text-align: left; }
.u-text-align-center { text-align: center; }
.u-text-align-right { text-align: right; }
.u-text-wrap-balance { text-wrap: balance; }
.u-text-wrap-pretty { text-wrap: pretty; }

/* Sichtbarkeit */
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}