/*
 * Gestaltung der Callerplattform nach Twilio Paste. Jeder Wert und seine Quelle stehen in web/belege.json.
 * Die Seiten der Module sind schlicht und semantisch, darum gestaltet diese Datei vor allem die Elemente selbst.
 * Gebaut aus den Tokens von Paste, die Werte sind aufgelöst, die Namen sind die von Paste.
 */

/* Inter 3.19 wie bei Paste, selbst gehostet als Teilmenge „latin“ von Google Fonts. */
@font-face {
  font-family: "Inter var";
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("schrift/Inter-roman.var.latin.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;
}

/* Tokens von Paste, hell (tokens/global) und dunkel (tokens/themes/dark), aufgelöst. */
:root {
  --border-radius-20: 4px;
  --border-radius-30: 8px;
  --border-radius-circle: 50%;
  --border-width-10: 1px;
  --color-background: #f4f4f6;
  --color-background-body: #ffffff;
  --color-background-error-weakest: #fef5f5;
  --color-background-neutral-weakest: #ebf4ff;
  --color-background-primary: #0263e0;
  --color-background-primary-stronger: #030b5d;
  --color-background-primary-weakest: #ebf4ff;
  --color-background-required: #EC5B5B;
  --color-background-strong: #e1e3ea;
  --color-background-weak: #f9f9fa;
  --color-background-weakest: #ffffff;
  --color-border: #8B93AA;
  --color-border-error-weaker: #fccfcf;
  --color-border-neutral-weaker: #cce4ff;
  --color-border-primary: #0263e0;
  --color-border-primary-stronger: #030b5d;
  --color-border-weak: #cacdd8;
  --color-border-weaker: #e1e3ea;
  --color-scheme: light;
  --color-text: #121c2d;
  --color-text-error: #DB132A;
  --color-text-icon: #606b85;
  --color-text-icon-error: #DB132A;
  --color-text-icon-neutral: #001489;
  --color-text-inverse: #ffffff;
  --color-text-link: #0263e0;
  --color-text-link-stronger: #030b5d;
  --color-text-link-strongest: #06033a;
  --color-text-neutral: #001489;
  --color-text-primary: #0263e0;
  --color-text-primary-strong: #001489;
  --color-text-weak: #606b85;
  --color-text-weaker: #8B93AA;
  --color-text-weakest: #ffffff;
  --font-family-code: 'TwilioSansMono', Courier, monospace;
  --font-family-text: 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-size-30: 0.875rem;
  --font-size-40: 1rem;
  --font-size-60: 1.25rem;
  --font-size-70: 1.5rem;
  --font-size-90: 2rem;
  --font-size-base: 100%;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --line-height-20: 1.25rem;
  --line-height-30: 1.25rem;
  --line-height-40: 1.5rem;
  --line-height-60: 1.75rem;
  --line-height-70: 2rem;
  --line-height-90: 2.5rem;
  --shadow-border: 0 0 0 1px #8B93AA;
  --shadow-border-error: 0 0 0 1px #DB132A;
  --shadow-border-error-stronger: 0 0 0 1px #4a0b0b;
  --shadow-border-primary: 0 0 0 1px #0263e0;
  --shadow-border-primary-strong: 0 0 0 1px #001489;
  --shadow-border-primary-stronger: 0 0 0 1px #030b5d;
  --shadow-border-weak: 0 0 0 1px #cacdd8;
  --shadow-border-weaker: 0 0 0 1px #e1e3ea;
  --shadow-elevation-10: 0 -1px 0 0 #f4f4f6, 0 3px 4px 0 rgba(15, 22, 33, 0.1);
  --shadow-elevation-bottom-05: 0 1px 0 0 #edeef2;
  --shadow-focus: 0 0 0 4px rgba(2, 99, 224, 0.7);
  --shadow-focus-inset: inset 0 0 0 2px rgba(2, 99, 224, 0.7);
  --shadow-focus-shadow-border: 0 0 0 4px rgba(2, 99, 224, 0.7), 0 0 0 1px #8891aa;
  --size-20: 12rem;
  --size-70: 44.5rem;
  --size-icon-10: 1rem;
  --size-icon-20: 1.25rem;
  --size-icon-30: 1.25rem;
  --size-icon-40: 1.5rem;
  --size-square-130: 3rem;
  --size-square-50: 1rem;
  --size-topbar: 4.75rem;
  --space-10: 0.125rem;
  --space-100: 2.25rem;
  --space-130: 3rem;
  --space-160: 3.75rem;
  --space-20: 0.25rem;
  --space-30: 0.5rem;
  --space-40: 0.75rem;
  --space-50: 1rem;
  --space-60: 1.25rem;
  --space-70: 1.5rem;
  --space-80: 1.75rem;
  --z-index-40: 40;
  --z-index-90: 90;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #18253C;
    --color-background-body: #0D131C;
    --color-background-error-weakest: #310c0c;
    --color-background-neutral-weakest: #030b5d;
    --color-background-primary-stronger: #cce4ff;
    --color-background-primary-weakest: #121c2d;
    --color-background-strong: #1f304c;
    --color-background-weak: #121c2d;
    --color-background-weakest: #0D131C;
    --color-border: #606b85;
    --color-border-error-weaker: #750c0c;
    --color-border-neutral-weaker: #001489;
    --color-border-primary: #006dfa;
    --color-border-primary-stronger: #cce4ff;
    --color-border-weak: #394762;
    --color-border-weaker: #1f304c;
    --color-scheme: dark;
    --color-text: #f4f4f6;
    --color-text-error: #EC5B5B;
    --color-text-icon: #8891aa;
    --color-text-icon-error: #EC5B5B;
    --color-text-icon-neutral: #66b3ff;
    --color-text-link: #008cff;
    --color-text-link-stronger: #ebf4ff;
    --color-text-link-strongest: #ffffff;
    --color-text-neutral: #cce4ff;
    --color-text-primary: #008cff;
    --color-text-primary-strong: #99cdff;
    --color-text-weak: #8891aa;
    --color-text-weaker: #394762;
    --color-text-weakest: #0D131C;
    --shadow-border: 0 0 0 1px #606b85;
    --shadow-border-error-stronger: 0 0 0 1px #fccfcf;
    --shadow-border-primary: 0 0 0 1px #006dfa;
    --shadow-border-primary-strong: 0 0 0 1px #99cdff;
    --shadow-border-primary-stronger: 0 0 0 1px #cce4ff;
    --shadow-border-weak: 0 0 0 1px #394762;
    --shadow-border-weaker: 0 0 0 1px #1f304c;
    --shadow-elevation-10: 0 -1px 0 0 #1f304c, 0 3px 4px 0 rgba(0, 0, 0, 0.4);
    --shadow-elevation-bottom-05: 0 1px 0 0 #1f304c;
    --shadow-focus: 0 0 0 4px #606b85;
    --shadow-focus-inset: inset 0 0 0 2px #606b85;
    --shadow-focus-shadow-border: 0 0 0 4px #606b85, 0 0 0 1px #606b85;
  }
}

/* Grundstile wie paste-theme (global.ts und base.ts). */
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-text);
  color-scheme: var(--color-scheme);
}

/* Die Fußzeile bleibt bei kurzen Seiten unten (MDN, Sticky footers): Kopf, Inhalt, Fuß als Raster. */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  margin: 0;
  background-color: var(--color-background-body);
  color: var(--color-text);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-30);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Sprunglink wie SidebarSkipLinks: außerhalb des Bildes, mit dem Fokus sichtbar. */
.sprunglinks {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: var(--z-index-90);
  display: flex;
  column-gap: var(--space-60);
  padding: var(--space-30) var(--space-60);
  border-radius: var(--border-radius-20);
  background-color: var(--color-background-body);
  box-shadow: var(--shadow-elevation-10);
  transform: translateY(-150%);
  transition: transform 0.1s;
}

.sprunglinks:focus-within {
  transform: translateY(0%);
}

/* Kopf wie Topbar: klebt oben, Name links, Konto rechts. */
.kopf {
  position: sticky;
  top: 0;
  z-index: var(--z-index-40);
  background-color: var(--color-background-weak);
  box-shadow: var(--shadow-elevation-bottom-05);
}

.kopfleiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--space-70);
  min-height: var(--size-topbar);
  padding-inline: var(--space-70);
}

/* Name der Plattform wie SidebarHeaderLabel, mit dem Fokus von Anchor. */
.marke {
  overflow: hidden;
  border-radius: var(--border-radius-20);
  color: var(--color-text);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-30);
  letter-spacing: -0.02em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
}

.marke:focus {
  box-shadow: var(--shadow-focus);
}

/* Konto wie TopbarActions: rechtsbündig, darf umbrechen. */
.konto {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-end;
  align-items: center;
  column-gap: var(--space-50);
}

/* Unter der ersten Umbruchstelle von Paste (400 px) bleibt nur „Abmelden“. */
.konto-name {
  display: none;
}

@media (min-width: 400px) {
  .konto-name {
    display: inline;
  }
}

/* Navigation wie InPageNavigation, waagrecht und bei Platzmangel seitlich zu schieben, ohne Linie unten (hideBottomBorder). */
.navigation {
  overflow-x: auto;
  overflow-y: hidden;
  padding-inline: var(--space-70);
}

@supports (-moz-appearance: none) {
  .navigation {
    padding-bottom: 0;
    scrollbar-width: none;
  }
}

.navigation::-webkit-scrollbar {
  height: 0;
}

.navigation::-webkit-scrollbar-track {
  background: transparent;
}

.navigation ul {
  display: flex;
  column-gap: var(--space-50);
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.navigation li {
  display: flex;
  min-width: 0;
}

.navigation a {
  display: block;
  position: relative;
  width: 100%;
  min-width: var(--size-square-130);
  overflow: hidden;
  padding: var(--space-40) var(--space-30);
  border-bottom: var(--border-width-10) solid transparent;
  border-top-left-radius: var(--border-radius-30);
  border-top-right-radius: var(--border-radius-30);
  color: var(--color-text-weak);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 100ms ease, color 100ms ease;
}

.navigation a:hover {
  border-bottom-color: var(--color-border-primary-stronger);
  color: var(--color-text-link-stronger);
}

.navigation a:focus {
  box-shadow: var(--shadow-focus-inset);
  outline: none;
}

.navigation a[aria-current="page"] {
  border-bottom-color: var(--color-border-primary);
  color: var(--color-text-link);
}

.navigation a[aria-current="page"]:focus {
  border-bottom: none;
}

/* Inhalt wie die Seitenvorlage Wizard: mittig, 712 px breit (size-70), oben 48 und unten 60 px Abstand. */
main {
  width: 100%;
  max-width: calc(var(--size-70) + 2 * var(--space-50));
  margin-inline: auto;
  padding: var(--space-130) var(--space-50) var(--space-160);
}

/* Fußzeile gebaut wie die Kopfleiste (Topbar), oben die Trennlinie wie Separator. */
.fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-70);
  min-height: var(--size-topbar);
  padding-inline: var(--space-70);
  border-top: var(--border-width-10) solid var(--color-border-weaker);
}

/* Links wie Anchor. */
a {
  color: var(--color-text-link);
  text-decoration: underline;
  outline: none;
}

a:active {
  color: var(--color-text-link-strongest);
  text-decoration: none;
}

a:focus {
  border-radius: var(--border-radius-20);
  box-shadow: var(--shadow-focus);
  color: var(--color-text-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-text-link-stronger);
  text-decoration: none;
}

/* Überschriften wie Heading: h1 als heading10 wie im PageHeader, darunter heading20 bis heading40. */
h1,
h2,
h3,
h4 {
  max-width: var(--size-70);
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

h1 {
  margin-bottom: var(--space-70);
  font-size: var(--font-size-90);
  line-height: var(--line-height-90);
}

h2 {
  margin-bottom: var(--space-60);
  font-size: var(--font-size-70);
  line-height: var(--line-height-70);
}

h3 {
  margin-bottom: var(--space-50);
  font-size: var(--font-size-60);
  line-height: var(--line-height-60);
}

h4 {
  margin-bottom: var(--space-30);
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}

/* Absätze wie Paragraph. */
p {
  max-width: var(--size-70);
  margin: 0 0 var(--space-70);
  line-height: var(--line-height-40);
}

/* Seitenkopf in header wie PageHeader: Überschrift ohne Abstand, Absatz 24 px darunter, 48 px bis zum Inhalt. */
main > header {
  margin-bottom: var(--space-130);
}

main > header h1 {
  margin-bottom: 0;
}

main > header p {
  margin-top: var(--space-70);
  margin-bottom: 0;
}

/* Listen wie UnorderedList und OrderedList mit ListItem. */
main ul,
main ol {
  margin: 0 0 var(--space-70) var(--space-70);
  padding: 0;
  line-height: var(--line-height-40);
}

main ul {
  list-style-type: disc;
}

main ol {
  list-style-type: decimal;
}

main li {
  margin-block: var(--space-30);
}

/* Schritte mit Titel und Text, etwa der Ablauf der Bewerbung: Titel als h3 in der Größe heading40, der Text steht
 * darunter wie ein Absatz, so liegen die Schritte 24 px auseinander. */
main li > h3 {
  margin-bottom: var(--space-30);
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}

/* Abschnitte stehen 48 px auseinander wie die Spalte der Seitenvorlage Wizard. */
section + section {
  margin-top: var(--space-130);
}

/* Beschreibungslisten wie DescriptionList: Begriff halbfett, Beschreibung normal, beide 14 px auf 20 px Zeilenhöhe.
 * Die Seiten schreiben dt und dd ohne die Hülle DescriptionListSet, darum stehen deren Abstände an den Nachbarn: 4 px
 * vom letzten Begriff zur Beschreibung (space20), 2 px zwischen Begriffen oder zwischen Beschreibungen (space10), 20 px
 * bis zum nächsten Paar (space60). Im Fluss der Seite steht die Liste wie Paragraph mit 24 px darunter. */
dl {
  max-width: var(--size-70);
  margin: 0 0 var(--space-70);
}

dt,
dd {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
}

dt {
  font-weight: var(--font-weight-semibold);
}

dd {
  font-weight: var(--font-weight-normal);
  overflow-wrap: break-word;
}

dt + dt,
dd + dd {
  margin-top: var(--space-10);
}

dt + dd {
  margin-top: var(--space-20);
}

dd + dt {
  margin-top: var(--space-60);
}

/* Karten wie Card: ein article in einem Abschnitt, 1 px Rahmen in colorBorderWeaker, Radius 8 px, 36 px Innenabstand
 * (space100) auf colorBackgroundWeakest. Der Rechtstext als Hauptinhalt der Seite (main > article) ist keine Karte.
 * Karten folgen einander wie Absätze mit 24 px Abstand. */
section > article {
  margin-bottom: var(--space-70);
  padding: var(--space-100);
  border: var(--border-width-10) solid var(--color-border-weaker);
  border-radius: var(--border-radius-30);
  background-color: var(--color-background-weakest);
}

section > article > :last-child {
  margin-bottom: 0;
}

/* Aufklapper wie Disclosure (Variante default), gebaut aus details und summary, darum ohne Skript und ohne Einblenden.
 * Der Kopf hat die Schrift von heading40, 8 px Innenabstand (space30) und Radius 4 px. Davor steht der Pfeil
 * ChevronDisclosure in colorTextIcon und 24 px (sizeIcon40 gehört zu heading40). Beim Zeigen wird der Kopf
 * colorBackground und der Pfeil rückt 2 px nach rechts (space10), offen ist der Kopf colorBackgroundWeak und der Pfeil
 * um 90 Grad gedreht. Der Inhalt hat 16 px Innenabstand (space50). Nach dem letzten Aufklapper geht der Fluss weiter
 * wie nach einem Absatz. */
details {
  max-width: var(--size-70);
}

details:not(:has(+ details)) {
  margin-bottom: var(--space-70);
}

summary {
  display: flex;
  position: relative;
  padding: var(--space-30);
  border-radius: var(--border-radius-20);
  outline: none;
  background-color: var(--color-background-body);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
  letter-spacing: -0.02em;
  list-style: none;
  transition: background-color 100ms ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "";
  flex: none;
  width: var(--size-icon-40);
  height: var(--size-icon-40);
  background-color: var(--color-text-icon);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M9.707 6.293a1 1 0 0 0-1.497 1.32l.083.094L10.585 10l-2.292 2.293a1 1 0 0 0-.083 1.32l.083.094a1 1 0 0 0 1.32.083l.094-.083 3-3a1 1 0 0 0 .083-1.32l-.083-.094-3-3Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100%;
  transition: transform 170ms ease;
}

summary:hover {
  background-color: var(--color-background);
}

summary:hover::before {
  transform: translateX(var(--space-10));
}

summary:focus {
  box-shadow: var(--shadow-focus);
}

details[open] > summary {
  background-color: var(--color-background-weak);
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details[open] > summary:hover::before {
  transform: translateX(var(--space-10)) rotate(90deg);
}

details > :not(summary) {
  margin: 0;
  padding: var(--space-50);
  background-color: var(--color-background-body);
}

/* Knöpfe wie Button: primär, dazu der zweitrangige Knopf für das Abmelden im Kopf. Ein Link mit der Klasse knopf oder
 * knopf-zweitrangig ist ein Knopf wie Button as="a", den es bei Paste nur primär und zweitrangig gibt. Die Selektoren
 * stehen als Liste, damit jeder sein Gewicht behält: a.knopf wiegt so viel wie a:focus weiter oben und gewinnt, weil
 * es später kommt. */
button,
a.knopf,
a.knopf-zweitrangig {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: var(--space-30) var(--space-40);
  border: none;
  border-radius: var(--border-radius-30);
  outline: none;
  appearance: none;
  background-color: var(--color-background-primary);
  box-shadow: var(--shadow-border-primary);
  color: var(--color-text-inverse);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-20);
  text-decoration: none;
  transition: background-color 100ms ease-in, box-shadow 100ms ease-in, color 100ms ease-in;
}

button:hover,
a.knopf:hover {
  background-color: var(--color-background-weakest);
  box-shadow: var(--shadow-border-primary);
  color: var(--color-text-primary);
}

button:focus,
a.knopf:focus {
  box-shadow: var(--shadow-focus);
}

button:active,
a.knopf:active {
  background-color: var(--color-background-primary-weakest);
  box-shadow: var(--shadow-border-primary-strong);
  color: var(--color-text-primary-strong);
}

button:disabled {
  background-color: var(--color-background-strong);
  box-shadow: var(--shadow-border-weaker);
  color: var(--color-text-weakest);
  cursor: not-allowed;
}

:is(button, a).knopf-zweitrangig {
  background-color: var(--color-background-weakest);
  box-shadow: var(--shadow-border-weak);
  color: var(--color-text);
}

:is(button, a).knopf-zweitrangig:hover {
  background-color: var(--color-background-weakest);
  box-shadow: var(--shadow-border-primary);
  color: var(--color-text-primary);
}

:is(button, a).knopf-zweitrangig:focus {
  box-shadow: var(--shadow-focus-shadow-border);
}

:is(button, a).knopf-zweitrangig:active {
  background-color: var(--color-background-primary-weakest);
  box-shadow: var(--shadow-border-primary-strong);
  color: var(--color-text-primary-strong);
}

/* Knöpfe nebeneinander wie ButtonGroup: umbrechend, 12 px Abstand in beide Richtungen (space40). */
p:has(> :is(a.knopf, a.knopf-zweitrangig)) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40);
}

/* Formulare wie Form: Felder untereinander mit 28 px Abstand (rowGap space80), Knöpfe wie FormActions 20 px
 * tiefer (marginTop space60). Die Vorlagen stellen Label und Feld nebeneinander, das Kontrollkästchen vor sein
 * Label; das Raster setzt beides in eine Zeile. Eine Gruppe in fieldset ordnet ihre Felder ebenso. */
:is(form, fieldset) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
}

:is(form, fieldset) > * {
  grid-column: 1 / -1;
}

:is(form, fieldset) > input[type="checkbox"] {
  grid-column: 1;
}

:is(form, fieldset) > :not(input[type="hidden"]) ~ :is(label, p) {
  margin-top: var(--space-80);
}

:is(form, fieldset) > :not(input[type="hidden"]) ~ input[type="checkbox"] {
  margin-top: calc(var(--space-80) + var(--space-10));
}

:is(form, fieldset) > input[type="checkbox"] + label {
  grid-column: 2;
  margin: 0 0 0 var(--space-20);
}

:is(form, fieldset) > p {
  margin-bottom: 0;
}

:is(form, fieldset) > button {
  justify-self: start;
}

:is(form, fieldset) > :not(input[type="hidden"]) ~ button {
  margin-top: calc(var(--space-80) + var(--space-60));
}

/* Hilfetexte wie HelpText: der Absatz direkt nach seinem Feld, auf den das Feld mit aria-describedby zeigt, 8 px
 * darunter (marginTop space30), 14 px auf 20 px Zeilenhöhe in colorTextWeak. Nach einem Kontrollkästchen steht er wie
 * BaseRadioCheckboxHelpText ohne Abstand unter dem Label, bündig mit dessen Text. */
:is(form, fieldset) > :is(input, select, textarea) + p[id$="-hinweis"],
:is(form, fieldset) > input[type="checkbox"] + label + p[id$="-hinweis"] {
  margin-top: var(--space-30);
  color: var(--color-text-weak);
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
}

:is(form, fieldset) > input[type="checkbox"] + label + p[id$="-hinweis"] {
  grid-column: 2;
  margin: 0 0 0 var(--space-20);
}

/* Label wie Label, Pflichtfelder mit dem roten Punkt wie RequiredDot (4 px, mittig in der ersten Zeile). */
label {
  display: block;
  margin-bottom: var(--space-20);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-30);
}

/* Der Punkt steht vor dem Text wie MediaFigure vor MediaBody; umbrechender Text bleibt bündig. */
label:has(+ :is(input, select, textarea):required),
input[type="checkbox"]:required + label {
  position: relative;
  padding-left: calc(4px + var(--space-20));
}

label:has(+ :is(input, select, textarea):required)::before,
input[type="checkbox"]:required + label::before {
  content: "";
  position: absolute;
  top: calc((var(--size-icon-30) - 4px) / 2);
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--border-radius-circle);
  background-color: var(--color-background-required);
}

/* Eingabefelder wie Input: die Hülle (DefaultFauxInput) und das Feld (InputElement) in einem Element. Ohne
 * Gewicht (:where), damit die Regel für select Fläche, Abstand rechts und Zeiger setzen kann. */
:where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-30) var(--space-40);
  border: none;
  border-radius: var(--border-radius-30);
  outline: none;
  appearance: none;
  background-color: var(--color-background-weakest);
  box-shadow: var(--shadow-border);
  color: inherit;
  cursor: text;
  font-family: inherit;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-20);
  transition: box-shadow 100ms ease-in;
}

:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):hover {
  box-shadow: var(--shadow-border-primary);
}

:is(input, select, textarea)[aria-invalid="true"] {
  box-shadow: var(--shadow-border-error);
}

:is(input, select, textarea)[aria-invalid="true"]:hover {
  box-shadow: var(--shadow-border-error-stronger);
}

:is(input, textarea)[readonly] {
  background-color: var(--color-background);
}

:is(input, textarea)[readonly]:hover {
  box-shadow: var(--shadow-border);
}

/* Fokus und Drücken nach den Zuständen, wie _focusWithin und _active nach _hover: sie gelten auch bei Fehlern. */
:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):focus {
  box-shadow: var(--shadow-focus-shadow-border);
}

:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):active {
  box-shadow: var(--shadow-border-primary-stronger);
}

:is(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea):disabled {
  background-color: var(--color-background);
  box-shadow: var(--shadow-border-weak);
  color: var(--color-text-weaker);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--color-text-weaker);
}

:is(input, textarea)::placeholder {
  color: var(--color-text-weak);
  font-style: italic;
}

/* Auswahl wie Select: Pfeil 20 px, 8 px vom rechten Rand, auf der Fläche von InputChevronWrapper. */
select {
  padding-right: var(--space-100);
  background-color: var(--color-background-body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='%23f9f9fa'/%3E%3Cpath fill='%23606b85' fill-rule='evenodd' d='M6.29289322,8.29289322 C6.65337718,7.93240926 7.22060824,7.90467972 7.61289944,8.20970461 L7.70710678,8.29289322 L10,10.585 L12.2928932,8.29289322 C12.6533772,7.93240926 13.2206082,7.90467972 13.6128994,8.20970461 L13.7071068,8.29289322 C14.0675907,8.65337718 14.0953203,9.22060824 13.7902954,9.61289944 L13.7071068,9.70710678 L10.7071068,12.7071068 C10.3466228,13.0675907 9.77939176,13.0953203 9.38710056,12.7902954 L9.29289322,12.7071068 L6.29289322,9.70710678 C5.90236893,9.31658249 5.90236893,8.68341751 6.29289322,8.29289322 Z'/%3E%3C/svg%3E");
  background-position: right var(--space-30) center;
  background-repeat: no-repeat;
  background-size: var(--size-icon-30);
  cursor: pointer;
}

/* Abschnitte im Formular wie FormSection: fieldset ohne Rahmen und Innenabstand, die Felder darin mit denselben
 * Abständen wie im Formular, die Legende wie FormSectionHeading mit der Variante heading40 (16 px halbfett, 8 px
 * darunter wie h4). Im Formular steht der Abschnitt 28 px unter dem vorigen Feld (rowGap space80). */
fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

form > :not(input[type="hidden"]) ~ fieldset {
  margin-top: var(--space-80);
}

legend {
  max-width: var(--size-70);
  padding: 0;
  margin-bottom: var(--space-30);
  color: var(--color-text);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
  letter-spacing: -0.02em;
}

/* Optionsfelder wie Radio: 16 px rund, ausgewählt blau mit weißem Punkt (bei Paste ein innerer Kreis, hier ein
 * innerer Schatten), daneben das Label wie beim Kontrollkästchen. Die Gruppe ordnet Feld und Label in Zeilen mit
 * 12 px Abstand (space40) wie RadioGroup. */
input[type="radio"] {
  display: block;
  width: var(--size-square-50);
  height: var(--size-square-50);
  margin: var(--space-10) var(--space-20) var(--space-10) 0;
  border: var(--border-width-10) solid var(--color-border);
  border-radius: var(--border-radius-circle);
  outline: none;
  appearance: none;
  background-color: var(--color-background-body);
  cursor: pointer;
}

input[type="radio"]:hover {
  border-color: var(--color-border-primary-stronger);
}

input[type="radio"]:focus {
  box-shadow: var(--shadow-focus);
}

input[type="radio"]:checked {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-primary);
  box-shadow: inset 0 0 0 4px var(--color-background-body);
}

input[type="radio"]:checked:focus {
  box-shadow: inset 0 0 0 4px var(--color-background-body), var(--shadow-focus);
}

[role="radiogroup"] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  row-gap: var(--space-40);
}

:is(form, fieldset) > :not(input[type="hidden"]) ~ [role="radiogroup"] {
  margin-top: var(--space-80);
}

[role="radiogroup"] > input[type="radio"] {
  grid-column: 1;
}

[role="radiogroup"] > input[type="radio"] + label {
  grid-column: 2;
  margin: 0 0 0 var(--space-20);
}

[role="radiogroup"] > :not(input[type="radio"], input[type="radio"] + label) {
  grid-column: 1 / -1;
}

[role="radiogroup"] > label:not(input + label) {
  margin: var(--space-20) 0 0;
}

/* Kontrollkästchen in einer Tabelle wie DataGrid mit Auswahl: mittig in der Zeile, ohne eigenen Abstand. */
td > input:is([type="checkbox"], [type="radio"]) {
  margin: var(--space-10) 0 0;
}

/* Seiten blättern wie Pagination: Zurück und Weiter als Links mit Fokusrahmen, dazwischen „Seite x von y“ in
 * colorTextWeak, mittig mit 12 px Abstand (space40), 20 px unter der Tabelle (space60). */
main nav:not(.navigation) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-40);
  margin-top: var(--space-60);
}

main nav:not(.navigation) > span {
  color: var(--color-text-weak);
}

main nav:not(.navigation) > a {
  padding: var(--space-20) var(--space-30);
  border-radius: var(--border-radius-20);
}

/* Kontrollkästchen wie Checkbox: 16 px, Radius 4 px, angehakt blau mit weißem Haken. */
input[type="checkbox"] {
  display: block;
  width: var(--size-square-50);
  height: var(--size-square-50);
  margin: var(--space-10) var(--space-20) var(--space-10) 0;
  border: var(--border-width-10) solid var(--color-border);
  border-radius: var(--border-radius-20);
  outline: none;
  appearance: none;
  background-color: var(--color-background-body);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--size-icon-10);
  cursor: pointer;
}

input[type="checkbox"]:hover {
  border-color: var(--color-border-primary-stronger);
}

input[type="checkbox"]:focus {
  border-color: var(--color-border);
  box-shadow: var(--shadow-focus);
}

input[type="checkbox"]:active {
  border-color: var(--color-border-primary-stronger);
  background-color: var(--color-background-primary-stronger);
}

input[type="checkbox"]:checked {
  border-color: var(--color-border-primary);
  background-color: var(--color-background-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M15.590404,5.91595525 C15.044244,5.36134825 14.1565654,5.36134825 13.6104053,5.91595525 L8.57040871,11.053822 L6.38961872,8.83068394 C6.11644243,8.55220292 5.75856032,8.41306054 5.40067821,8.41306054 C5.04067845,8.41306054 4.68279633,8.55220292 4.40962005,8.83068394 C3.86345998,9.38744971 3.86345998,10.2923658 4.40962005,10.8491316 L7.58127568,14.0823766 C7.8461739,14.35026 8.19577794,14.5 8.5702162,14.5 C8.94465445,14.5 9.29637614,14.35026 9.56127436,14.0823766 L15.5902115,7.93420665 C16.1365641,7.37959965 16.1365641,6.47272103 15.590404,5.91595525 Z'/%3E%3C/svg%3E");
}

input[type="checkbox"]:checked:is(:hover, :active) {
  border-color: var(--color-border-primary-stronger);
  background-color: var(--color-background-primary-stronger);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M15.590404,5.91595525 C15.044244,5.36134825 14.1565654,5.36134825 13.6104053,5.91595525 L8.57040871,11.053822 L6.38961872,8.83068394 C6.11644243,8.55220292 5.75856032,8.41306054 5.40067821,8.41306054 C5.04067845,8.41306054 4.68279633,8.55220292 4.40962005,8.83068394 C3.86345998,9.38744971 3.86345998,10.2923658 4.40962005,10.8491316 L7.58127568,14.0823766 C7.8461739,14.35026 8.19577794,14.5 8.5702162,14.5 C8.94465445,14.5 9.29637614,14.35026 9.56127436,14.0823766 L15.5902115,7.93420665 C16.1365641,7.37959965 16.1365641,6.47272103 15.590404,5.91595525 Z'/%3E%3C/svg%3E");
}

input[type="checkbox"]:disabled {
  border-color: var(--color-border-weak);
  background-color: var(--color-background);
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='4' fill='%2318253C'/%3E%3Cpath fill='%238891aa' fill-rule='evenodd' d='M6.29289322,8.29289322 C6.65337718,7.93240926 7.22060824,7.90467972 7.61289944,8.20970461 L7.70710678,8.29289322 L10,10.585 L12.2928932,8.29289322 C12.6533772,7.93240926 13.2206082,7.90467972 13.6128994,8.20970461 L13.7071068,8.29289322 C14.0675907,8.65337718 14.0953203,9.22060824 13.7902954,9.61289944 L13.7071068,9.70710678 L10.7071068,12.7071068 C10.3466228,13.0675907 9.77939176,13.0953203 9.38710056,12.7902954 L9.29289322,12.7071068 L6.29289322,9.70710678 C5.90236893,9.31658249 5.90236893,8.68341751 6.29289322,8.29289322 Z'/%3E%3C/svg%3E");
  }

  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M15.590404,5.91595525 C15.044244,5.36134825 14.1565654,5.36134825 13.6104053,5.91595525 L8.57040871,11.053822 L6.38961872,8.83068394 C6.11644243,8.55220292 5.75856032,8.41306054 5.40067821,8.41306054 C5.04067845,8.41306054 4.68279633,8.55220292 4.40962005,8.83068394 C3.86345998,9.38744971 3.86345998,10.2923658 4.40962005,10.8491316 L7.58127568,14.0823766 C7.8461739,14.35026 8.19577794,14.5 8.5702162,14.5 C8.94465445,14.5 9.29637614,14.35026 9.56127436,14.0823766 L15.5902115,7.93420665 C16.1365641,7.37959965 16.1365641,6.47272103 15.590404,5.91595525 Z'/%3E%3C/svg%3E");
  }

  input[type="checkbox"]:checked:is(:hover, :active) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230D131C' fill-rule='evenodd' d='M15.590404,5.91595525 C15.044244,5.36134825 14.1565654,5.36134825 13.6104053,5.91595525 L8.57040871,11.053822 L6.38961872,8.83068394 C6.11644243,8.55220292 5.75856032,8.41306054 5.40067821,8.41306054 C5.04067845,8.41306054 4.68279633,8.55220292 4.40962005,8.83068394 C3.86345998,9.38744971 3.86345998,10.2923658 4.40962005,10.8491316 L7.58127568,14.0823766 C7.8461739,14.35026 8.19577794,14.5 8.5702162,14.5 C8.94465445,14.5 9.29637614,14.35026 9.56127436,14.0823766 L15.5902115,7.93420665 C16.1365641,7.37959965 16.1365641,6.47272103 15.590404,5.91595525 Z'/%3E%3C/svg%3E");
  }
}

/* Meldungen wie Alert: Fehler mit role="alert", Hinweise mit role="status"; Symbol 20 px, 8 px vor dem Text. */
p:is([role="alert"], [role="status"]) {
  display: flex;
  align-items: flex-start;
  column-gap: var(--space-30);
  padding: var(--space-50);
  border: var(--border-width-10) solid var(--color-border-error-weaker);
  border-radius: var(--border-radius-30);
  background-color: var(--color-background-error-weakest);
  color: var(--color-text-error);
  line-height: var(--line-height-30);
}

p[role="status"] {
  border-color: var(--color-border-neutral-weaker);
  background-color: var(--color-background-neutral-weakest);
  color: var(--color-text-neutral);
}

p:is([role="alert"], [role="status"])::before {
  content: "";
  flex: none;
  width: var(--size-icon-20);
  height: var(--size-icon-20);
  background-color: var(--color-text-icon-error);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M11.2472301,2.51661961 L17.4833804,8.75276993 C18.1722065,9.44159608 18.1722065,10.5584039 17.4833804,11.2472301 L11.2472301,17.4833804 C10.5584039,18.1722065 9.44159608,18.1722065 8.75276993,17.4833804 L2.51661961,11.2472301 C1.82779346,10.5584039 1.82779346,9.44159608 2.51661961,8.75276993 L8.75276993,2.51661961 C9.44159608,1.82779346 10.5584039,1.82779346 11.2472301,2.51661961 Z M10,12 C9.44771525,12 9,12.4477153 9,13 C9,13.5522847 9.44771525,14 10,14 C10.5522847,14 11,13.5522847 11,13 C11,12.4477153 10.5522847,12 10,12 Z M10.0101104,7 L9.98974671,7 C9.38562515,7 8.91726125,7.59236125 9.01229161,8.24395862 L9.43992821,10.4816839 C9.48065551,10.7778645 9.7182314,11 9.99653459,11 L10.0033225,11 C10.2816257,11 10.5192015,10.7778645 10.5599288,10.4816839 L10.9875654,8.24395862 C11.0825958,7.59236125 10.6210198,7.00740452 10.0101104,7 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100%;
}

p[role="status"]::before {
  background-color: var(--color-text-icon-neutral);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10,2 C14.418278,2 18,5.581722 18,10 C18,14.418278 14.418278,18 10,18 C5.581722,18 2,14.418278 2,10 C2,5.581722 5.581722,2 10,2 Z M10.0000053,9.00061665 C9.74019301,9.01038552 9.47239432,9.0803986 9.29253079,9.23997113 C9.11466916,9.39791264 9.00075171,9.59492962 9.00075171,9.81473774 L9.00075171,9.81473774 L9.00075171,13.1852555 C9.00075171,13.3953034 9.11066537,13.6134632 9.29253079,13.7616358 C9.46639922,13.9016965 9.7501919,14.0091368 10.0000053,13.9993852 C10.259807,13.9911869 10.5276057,13.9211997 10.7074692,13.7616358 C10.8853308,13.6020719 10.9992483,13.4066946 10.9992483,13.1852555 L10.9992483,13.1852555 L10.9992483,9.81473774 C10.9992483,9.60632088 10.8893346,9.38813515 10.7074692,9.23997113 C10.5336008,9.09831394 10.2498081,8.99084779 10.0000053,9.00061665 Z M10,6.00073698 L9.73419791,6.03600271 C9.56432268,6.08302368 9.41643654,6.16727305 9.29253079,6.2887612 L9.29253079,6.2887612 L9.13664766,6.48664804 C9.0467106,6.63947657 9.00075171,6.80406036 9.00075171,6.98039938 L9.00075171,6.98039938 L9.00075171,7.01959044 C8.99475662,7.15478612 9.02473211,7.28017883 9.08668498,7.39774164 C9.12665936,7.51921941 9.19460733,7.62502697 9.29253079,7.71319129 C9.38246785,7.80724362 9.49037961,7.87582279 9.61428536,7.91500347 C9.73419791,7.97574235 9.86210745,8.00514084 10,7.99926322 C10.0879299,7.98750798 10.1778669,7.97574235 10.2658021,7.96398711 C10.4356773,7.91696614 10.5835635,7.83271677 10.7074692,7.71123901 L10.7074692,7.71123901 L10.8633523,7.51334179 C10.9532894,7.36051325 10.9992483,7.19592947 10.9992483,7.01959044 L10.9992483,7.01959044 L10.9992483,6.98039938 C11.0052434,6.8452037 10.9752679,6.71981099 10.913315,6.60224818 C10.8733406,6.48077041 10.8053927,6.37496285 10.7074692,6.28679853 C10.6175321,6.1927462 10.5096204,6.12417742 10.3857146,6.08498635 C10.2658021,6.02424747 10.1378925,5.99485936 10,6.00073698 L10,6.00073698 Z'/%3E%3C/svg%3E");
}

/* Tabellen wie Table: Rahmen und Linien in colorBorderWeaker, Kopf auf colorBackgroundWeak; die Hülle schiebt
 * seitlich wie bei scrollHorizontally. Seiten mit Tabelle nutzen die volle Breite wie die Vorlage Objects list, außer
 * die Tabelle steht in einer figure: Dann gehört sie zum Text, etwa der Vergleich auf der Stellenseite. */
div:has(> table) {
  overflow-x: auto;
}

table {
  width: 100%;
  border: var(--border-width-10) solid var(--color-border-weaker);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

thead {
  background-color: var(--color-background-weak);
  color: var(--color-text-weak);
}

tbody {
  background-color: var(--color-background-weakest);
  color: var(--color-text);
}

tr {
  vertical-align: middle;
}

th,
td {
  position: relative;
  padding: var(--space-50);
  border-bottom: var(--border-width-10) solid var(--color-border-weaker);
  color: inherit;
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
  text-align: left;
  vertical-align: inherit;
  word-wrap: break-word;
}

th {
  padding: var(--space-40) var(--space-50);
  font-weight: var(--font-weight-semibold);
}

tbody > tr:last-of-type > :is(td, th) {
  border-bottom-width: 0;
}

main:has(table:not(figure table)) {
  max-width: none;
}

main:has(table:not(figure table)) > header > :is(h1, p) {
  max-width: var(--size-70);
}

@media (min-width: 400px) {
  main:has(table:not(figure table)) {
    padding-inline: var(--space-100);
  }
}

/* Code wie InlineCode, etwa für die Wiederherstellungscodes. */
code {
  padding-inline: var(--space-20);
  border: var(--border-width-10) solid var(--color-border-weak);
  border-radius: var(--border-radius-20);
  background-color: var(--color-background-weak);
  color: inherit;
  font-family: var(--font-family-code);
  font-size: inherit;
  line-height: inherit;
}

/* Abbildungen im Text, etwa der Vergleich auf der Stellenseite, mit 24 px darunter wie Absätze. */
figure {
  margin: 0 0 var(--space-70);
}

/* QR-Code beim Einrichten: 192 px (size-20) auf weißem Grund wie bei segno als PNG, auch im dunklen Modus. */
figure > svg {
  display: block;
  width: var(--size-20);
  max-width: 100%;
  height: auto;
  margin-bottom: var(--space-70);
  background-color: #fff;
}