/*
 * Gestaltung von vuh.si, gebaut 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-text: 'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  --font-size-100: 2.5rem;
  --font-size-20: 0.75rem;
  --font-size-30: 0.875rem;
  --font-size-40: 1rem;
  --font-size-50: 1.125rem;
  --font-size-60: 1.25rem;
  --font-size-70: 1.5rem;
  --font-size-80: 1.75rem;
  --font-size-90: 2rem;
  --font-size-base: 100%;
  --font-weight-bold: 700;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --line-height-10: 1rem;
  --line-height-100: 3.25rem;
  --line-height-20: 1.25rem;
  --line-height-30: 1.25rem;
  --line-height-40: 1.5rem;
  --line-height-50: 1.75rem;
  --line-height-60: 1.75rem;
  --line-height-70: 2rem;
  --line-height-80: 2.5rem;
  --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;
  }
}

/* Typo-System: Größen und Zeilenhöhen sind nur die Stufen von Paste oben, kleiner als font-size-20 (12 px) wird
 * nichts. Dazu, was Paste nicht als Token führt: die Laufweite der Überschriften, die bei Heading als Wert steht,
 * und die Schrift für Code von Primer (GitHub), denn TwilioSansMono liegt hier nicht, Code stünde sonst in Courier.
 * Belege in web/belege.json. */
:root {
  --font-family-code: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --letter-spacing-heading: -0.02em;
}

/* 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. Die Spalte darf
   schmaler werden als breiter Inhalt, etwa der Vertrag, sonst wird die ganze Seite am Handy so breit wie er. */
body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: minmax(0, 1fr);
  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: var(--letter-spacing-heading);
  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) steht statt des Namens ein Kreis mit den Anfangsbuchstaben wie der
   Avatar im UserDialog von Paste; der Name bleibt im Link für Screenreader. inline-grid, damit die Unterstreichung
   des Links nicht in den Kreis reicht. */
.konto-kuerzel {
  display: none;
}

@media (max-width: 399.98px) {
  .konto-kuerzel {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--akzent-zart);
    color: var(--akzent);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-70);
  }

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

/* 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;
}

/* Ein Eintrag wird nicht schmaler als sein Text, sonst stünde am Handy statt zu schieben nur „Mein …“ da. */
.navigation li {
  display: flex;
  flex-shrink: 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, auf allen Breiten gleich: h1 als heading20, die Voreinstellung von Heading, darunter
 * heading30 bis heading50. */
h1,
h2,
h3,
h4 {
  max-width: var(--size-70);
  margin: 0;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading);
}

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

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

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

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

/* 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: var(--letter-spacing-heading);
  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;
}

@media (hover: hover) {
  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);
}

@media (hover: hover) {
  :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. Eine Gruppe, in der eins
 * von mehreren Feldern genügt (fieldset[data-eins-von]), trägt ihn an der Legende wie Legend mit required. */
label:has(+ :is(input, select, textarea):required),
input[type="checkbox"]:required + label,
fieldset[data-eins-von] > legend {
  position: relative;
  padding-left: calc(4px + var(--space-20));
}

label:has(+ :is(input, select, textarea):required)::before,
input[type="checkbox"]:required + label::before,
fieldset[data-eins-von] > legend::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: var(--letter-spacing-heading);
}

/* 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);
}

/* Nach einem Feld steht die Gruppe 28 px tiefer wie jedes Feld. Direkt unter ihrer Legende steht sie nur die 8 px der
 * Legende tiefer wie die Optionen unter der Legende von RadioGroup, sonst stünde „Weg“ weiter von Mail und SMS weg
 * als ein Label von seinem Feld. */
:is(form, fieldset) > :not(input[type="hidden"], legend) ~ [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. Unten hat die
 * Hülle den Abstand eines Absatzes, sonst klebt die nächste Überschrift an der Tabelle. */
div:has(> table) {
  overflow-x: auto;
  margin-bottom: var(--space-70);
}

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;
}

/*
 * Gestaltungssystem von vuh.si, Stand 27.10.2026. Diese Schicht steht zuletzt und geht vor. Sie legt Farben, Schrift
 * und Abstände für alle Seiten fest, dazu den Rahmen: am PC die Seitenleiste links, am Handy oben Name, Konto und die
 * Navigation als Reihe zum Schieben. Die Seiten bleiben schlicht und semantisch, die Elemente sind hier gestaltet. Was
 * eine Seite zusätzlich braucht, wählt sie mit den Klassen im Abschnitt „Bausteine“. Seiteneigene Regeln stehen nicht
 * hier, sondern in <modul>/statisch/<modul>.css, eingebunden über den Block stil in web/vorlagen/basis.html.
 */
:root {
  --grund: #f5f6f8;
  --flaeche: #ffffff;
  --flaeche-leise: #f9fafb;
  --linie: #e6e8ec;
  --linie-stark: #d2d6dd;
  --schwebe: #f1f3f5;
  --akzent: #2457d6;
  --akzent-stark: #1b46b3;
  --akzent-zart: #eef3ff;
  --akzent-linie: #c9d7fb;
  --text: #15181d;
  --text-leise: #5b6472;
  --text-leiser: #8a929e;
  --gut: #157f3c;
  --gut-zart: #ebf7ef;
  --gut-linie: #b9e1c7;
  --warnung: #8f5400;
  --warnung-zart: #fff6e6;
  --warnung-linie: #f1d39c;
  --fehler: #c3262e;
  --fehler-text: #a1161d;
  --fehler-zart: #fdf1f1;
  --fehler-linie: #f3c3c5;
  --radius-klein: 6px;
  --radius: 10px;
  --radius-gross: 14px;
  --schatten: 0 1px 2px rgba(16, 24, 40, 0.04);
  --schatten-hoch: 0 4px 16px rgba(16, 24, 40, 0.08);
  --color-text: var(--text);
  --color-text-weak: var(--text-leise);
  --color-text-weaker: var(--text-leiser);
  --color-text-error: var(--fehler);
  --color-text-icon: var(--text-leise);
  --color-text-icon-error: var(--fehler);
  --color-text-icon-neutral: var(--akzent);
  --color-text-neutral: var(--text);
  --color-border: #9aa1ad;
  --color-border-weak: var(--linie-stark);
  --color-border-weaker: var(--linie);
  --color-border-error-weaker: var(--fehler-linie);
  --color-border-neutral-weaker: var(--akzent-linie);
  --color-background: var(--schwebe);
  --color-background-weak: var(--flaeche-leise);
  --color-background-error-weakest: var(--fehler-zart);
  --color-background-neutral-weakest: var(--akzent-zart);
  --color-background-primary: var(--akzent);
  --color-background-primary-stronger: #13307a;
  --color-background-primary-weakest: var(--akzent-zart);
  --knopf-schwebe: var(--akzent-stark);
  --knopf-gedrueckt: var(--color-background-primary-stronger);
  --color-border-primary: var(--akzent);
  --color-text-link: var(--akzent);
  --color-text-link-stronger: var(--akzent-stark);
  --color-text-primary: var(--akzent);
  --shadow-border: 0 0 0 1px #c3c9d2;
  --shadow-border-weak: 0 0 0 1px var(--linie-stark);
  --shadow-border-weaker: 0 0 0 1px var(--linie);
  --shadow-border-primary: 0 0 0 1px var(--akzent);
  --shadow-border-error: 0 0 0 1px var(--fehler);
  --shadow-focus: 0 0 0 3px rgba(36, 87, 214, 0.35);
  --shadow-focus-inset: inset 0 0 0 2px rgba(36, 87, 214, 0.6);
  --shadow-focus-shadow-border: 0 0 0 3px rgba(36, 87, 214, 0.35), 0 0 0 1px var(--akzent);
  --border-radius-20: var(--radius-klein);
  --border-radius-30: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d0f12;
    --flaeche: #15181d;
    --flaeche-leise: #1a1d23;
    --linie: #272b33;
    --linie-stark: #363c46;
    --schwebe: #1f232a;
    --akzent: #8aaeff;
    --akzent-stark: #b3cbff;
    --akzent-zart: #1a2440;
    --akzent-linie: #2e4378;
    --text: #e8eaed;
    --text-leise: #a3abb6;
    --text-leiser: #6f7783;
    --gut: #5fd08a;
    --gut-zart: #10261a;
    --gut-linie: #1f4d31;
    --warnung: #f2b65c;
    --warnung-zart: #2a1f0d;
    --warnung-linie: #5a4214;
    --fehler: #ff8a8f;
    --fehler-text: #ffb3b6;
    --fehler-zart: #2c1214;
    --fehler-linie: #5c2126;
    --schatten: 0 1px 2px rgba(0, 0, 0, 0.3);
    --schatten-hoch: 0 4px 16px rgba(0, 0, 0, 0.4);
    --color-border: #4a515c;
    --color-background-body: #111418;
    --color-background-weakest: var(--flaeche);
    --color-background-strong: #2a2f37;
    --color-background-primary: #3a6cf4;
    --color-background-primary-stronger: #b3cbff;
    --knopf-schwebe: #2f5fe0;
    --knopf-gedrueckt: #2852c4;
    --color-text-inverse: #ffffff;
    --color-text-weakest: #6f7783;
    --shadow-border: 0 0 0 1px #3d444f;
    --shadow-border-primary: 0 0 0 1px #3a6cf4;
    --shadow-focus: 0 0 0 3px rgba(138, 174, 255, 0.4);
    --shadow-focus-inset: inset 0 0 0 2px rgba(138, 174, 255, 0.6);
    --shadow-focus-shadow-border: 0 0 0 3px rgba(138, 174, 255, 0.4), 0 0 0 1px var(--akzent);
  }
}

/* Grundlagen: ruhiger Grund, gut lesbare Schrift, Auswahl in der Akzentfarbe. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--grund);
  color: var(--text);
}

::selection {
  background-color: var(--akzent-zart);
  color: var(--text);
}

h2 {
  margin-bottom: var(--space-50);
}

h3 {
  margin-bottom: var(--space-30);
}

p {
  margin-bottom: var(--space-50);
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--akzent-stark);
}

strong,
b {
  font-weight: var(--font-weight-semibold);
}

small {
  color: var(--text-leise);
  font-size: var(--font-size-20);
  line-height: var(--line-height-20);
}

hr {
  height: 0;
  margin: var(--space-100) 0;
  border: 0;
  border-top: var(--border-width-10) solid var(--linie);
}

code,
kbd {
  border-color: var(--linie-stark);
  background-color: var(--flaeche-leise);
}

/* Tasten wie KeyboardKey in der Schrift des Textes, nicht in der festen Schrift des Browsers. */
kbd {
  font-family: var(--font-family-text);
}

/* Fokus nur bei der Tastatur: Ein Klick mit der Maus lässt keinen Ring stehen, die Tastatur zeigt ihn immer. */
a:focus:not(:focus-visible) {
  box-shadow: none;
}

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

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

summary:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Kopf am Handy: Name und Konto in einer Zeile, darunter die Navigation als Reihe runder Einträge zum Schieben. Er
   klebt nicht, so bleibt am Handy der Platz dem Inhalt. */
.kopf {
  position: static;
  border-bottom: var(--border-width-10) solid var(--linie);
  background-color: var(--flaeche);
  box-shadow: none;
}

.kopfleiste {
  min-height: 3.5rem;
  padding-inline: var(--space-50);
}

.marke {
  display: inline-flex;
  align-items: center;
  column-gap: var(--space-30);
  font-size: var(--font-size-40);
}

.marke::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: url("favicon.svg") center / contain no-repeat;
}

.konto {
  column-gap: var(--space-40);
}

.konto-name {
  overflow: hidden;
  max-width: 14rem;
  color: var(--text-leise);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Der Name führt zur Anmeldeadresse (kern/adresse.py) wie das Konto oben rechts bei Stripe und GitHub: leise wie
   Text, unterstrichen erst unter dem Zeiger. */
a.konto-name {
  text-decoration: none;
}

a.konto-name:hover {
  color: var(--text);
  text-decoration: underline;
}

.konto button {
  min-height: 2rem;
  padding: 0.3125rem var(--space-40);
  font-size: var(--font-size-30);
}

.navigation {
  display: flex;
  column-gap: var(--space-20);
  padding: 0 var(--space-50) var(--space-40);
}

.navigation-gruppe {
  display: none;
}

.navigation ul {
  column-gap: var(--space-20);
}

.navigation a {
  min-width: 0;
  padding: 0.4375rem var(--space-40);
  border-bottom: none;
  border-radius: 999px;
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
  transition: background-color 100ms ease, color 100ms ease;
}

.navigation a:hover {
  background-color: var(--schwebe);
  color: var(--text);
}

.navigation a[aria-current="page"] {
  background-color: var(--akzent-zart);
  color: var(--akzent);
  font-weight: var(--font-weight-semibold);
}

/* Befehlsfenster wie bei Linear, GitHub und Slack (web/statisch/befehle.js). Sein Knopf steht am Handy als Lupe vor dem
   Konto, am PC als Suchfeld unter dem Namen, das Kürzel darin nur mit Maus oder Trackpad. */
button.befehle-knopf {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-30);
  width: 2.25rem;
  min-height: 2.25rem;
  margin-right: calc(var(--space-40) - var(--space-70));
  margin-left: auto;
  padding: 0;
  border-radius: 999px;
  background-color: transparent;
  box-shadow: none;
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
}

button.befehle-knopf::before {
  content: "";
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M13.2 13.2l3.8 3.8'/%3E%3C/svg%3E") center / contain no-repeat;
}

button.befehle-knopf:hover,
button.befehle-knopf:active {
  background-color: var(--schwebe);
  box-shadow: none;
  color: var(--text);
}

button.befehle-knopf:focus-visible {
  box-shadow: var(--shadow-focus);
}

button.befehle-knopf:focus:not(:focus-visible) {
  box-shadow: none;
}

button.befehle-knopf[hidden],
button.befehle-knopf > :is(span, kbd) {
  display: none;
}

.kopfleiste:has(> .befehle-knopf:not([hidden])) > .konto {
  flex-grow: 0;
}

/* Unter 375 px passen der Name der Plattform, die Lupe, der Kreis mit den Anfangsbuchstaben und „Abmelden“ nicht
   nebeneinander. Dann steht nur das Zeichen, der Name bleibt im Link für Screenreader. */
@media (max-width: 374.98px) {
  .kopfleiste:has(> .befehle-knopf:not([hidden])) > .marke {
    width: 1.5rem;
  }
}

.befehle {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  background: transparent;
  color: var(--text);
}

.befehle::backdrop {
  background-color: rgba(13, 15, 18, 0.45);
  backdrop-filter: blur(2px);
}

.befehle-fenster {
  display: flex;
  flex-direction: column;
  width: min(40rem, 100% - 2rem);
  margin: 12vh auto 0;
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--flaeche);
  box-shadow: 0 0 0 1px var(--linie-stark), 0 24px 48px -12px rgba(0, 0, 0, 0.35);
  animation: befehle-auf 120ms ease-out;
}

@keyframes befehle-auf {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.befehle-fenster > input {
  flex: none;
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-40) var(--space-50);
  border-bottom: var(--border-width-10) solid var(--linie);
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-40);
}

.befehle-fenster > input:is(:hover, :focus, :active) {
  box-shadow: none;
}

.befehle-fenster > input::placeholder {
  color: var(--text-leiser);
  font-style: normal;
}

.befehle-liste {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(56vh, 27.5rem);
  padding: var(--space-20) var(--space-30) var(--space-30);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.befehle-liste:empty,
.befehle-leer:empty {
  display: none;
}

/* Gruppen wie in der Seitenleiste, die gewählte Zeile wie der Eintrag der Seite in der Navigation. */
.befehle-gruppe {
  padding: var(--space-40) var(--space-40) var(--space-20);
  color: var(--text-leiser);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-10);
}

.befehle-liste [role="option"] {
  display: flex;
  align-items: center;
  column-gap: var(--space-40);
  min-height: 2.5rem;
  padding: var(--space-30) var(--space-40);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
}

.befehle-liste [role="option"][aria-selected="true"] {
  background-color: var(--akzent-zart);
}

.befehle-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.befehle-zusatz {
  max-width: 55%;
  margin-left: auto;
  overflow: hidden;
  color: var(--text-leise);
  font-size: var(--font-size-20);
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.befehle-fenster, .befehle-knopf) kbd {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 var(--space-20);
  border: var(--border-width-10) solid var(--linie-stark);
  border-radius: 4px;
  background-color: var(--flaeche);
  color: var(--text-leise);
  font-family: inherit;
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-10);
  text-align: center;
}

.befehle-liste [role="option"] > kbd {
  flex: none;
  margin-left: auto;
}

.befehle-leer {
  margin: 0;
  padding: var(--space-70) var(--space-50);
  color: var(--text-leise);
  text-align: center;
}

.befehle-fuss {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-50);
  margin: 0;
  padding: var(--space-30) var(--space-50);
  border-top: var(--border-width-10) solid var(--linie);
  color: var(--text-leiser);
  font-size: var(--font-size-20);
  line-height: var(--line-height-20);
}

@media not all and (hover: hover) and (pointer: fine) {
  .befehle-fuss {
    display: none;
  }
}

/* Am Handy steht das Fenster oben, damit die Tastatur die Liste nicht verdeckt, und der Zusatz unter dem Namen. */
@media (max-width: 639px) {
  .befehle-fenster {
    width: calc(100% - 2 * var(--space-40));
    margin-top: var(--space-40);
  }

  .befehle-liste {
    max-height: min(45vh, 27.5rem);
  }

  .befehle-liste [role="option"] {
    flex-wrap: wrap;
    min-height: 2.75rem;
  }

  .befehle-zusatz {
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
}

@media (min-width: 1024px) {
  body.mit-navigation button.befehle-knopf {
    justify-content: flex-start;
    align-self: stretch;
    width: auto;
    margin: 0 0 var(--space-60);
    padding: 0 var(--space-30) 0 var(--space-40);
    border: var(--border-width-10) solid var(--linie);
    border-radius: 8px;
    background-color: var(--flaeche-leise);
    color: var(--text-leiser);
    font-size: var(--font-size-30);
  }

  body.mit-navigation button.befehle-knopf:hover {
    border-color: var(--linie-stark);
    background-color: var(--schwebe);
    color: var(--text-leise);
  }

  body.mit-navigation button.befehle-knopf > span {
    display: inline;
  }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body.mit-navigation button.befehle-knopf > kbd {
    display: inline-block;
    margin-left: auto;
  }
}

/* Inhalt: am Handy über die ganze Breite auf weißer Fläche, ab 640 px als Fläche mit Rand auf dem grauen Grund. Seiten
   mit Tabelle werden breiter, ebenso Seiten mit der Klasse breit; die Klasse voll nutzt die ganze Breite. */
main {
  align-self: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-70) var(--space-50) var(--space-100);
  border: none;
  border-bottom: var(--border-width-10) solid var(--linie);
  background-color: var(--flaeche);
}

main:has(table:not(figure table)) {
  padding-inline: var(--space-50);
}

@media (min-width: 640px) {
  main {
    width: min(100% - 3rem, 46rem);
    margin: 2rem auto var(--space-70);
    padding: 2.5rem 2.5rem 3rem;
    border: var(--border-width-10) solid var(--linie);
    border-radius: var(--radius-gross);
    box-shadow: var(--schatten);
  }

  main:is(.breit, :has(table:not(figure table))) {
    width: min(100% - 3rem, 72rem);
    padding-inline: 2.5rem;
  }

  main.voll {
    width: calc(100% - 3rem);
  }
}

main > :last-child {
  margin-bottom: 0;
}

/* Seitenkopf: Titel, darunter ein kurzer Satz in leiserer Farbe; Knöpfe in .aktionen stehen am PC rechts daneben. */
main > header {
  margin-bottom: var(--space-100);
}

main > header p {
  margin-top: var(--space-30);
  color: var(--text-leise);
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}

main > header p.zurueck {
  margin: 0 0 var(--space-40);
  font-size: var(--font-size-30);
}

main > header > .aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40);
  margin-top: var(--space-60);
}

@media (min-width: 640px) {
  main > header:has(> .aktionen) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-70);
    align-items: start;
  }

  main > header:has(> .aktionen) > * {
    grid-column: 1;
  }

  main > header > .aktionen {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-end;
    margin-top: 0;
  }

  main > header:has(> p.zurueck) > .aktionen {
    grid-row: 2 / span 2;
  }
}

/* Zurück-Link über dem Titel, mit Pfeil davor. */
p.zurueck > a {
  display: inline-flex;
  align-items: center;
  column-gap: var(--space-20);
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

p.zurueck > a::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 15l-5-5 5-5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

p.zurueck > a:hover {
  color: var(--text);
}

/* Ansicht als (basis.html): Hinweis und Knopf „Ansicht beenden“ in einer gelben Leiste über dem Inhalt. */
.ansicht {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-40) var(--space-50);
  margin-bottom: var(--space-100);
  padding: var(--space-40) var(--space-50);
  border: var(--border-width-10) solid var(--warnung-linie);
  border-radius: var(--radius);
  background-color: var(--warnung-zart);
}

.ansicht > p[role="status"] {
  flex: 1 1 16rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.ansicht > p[role="status"]::before {
  background-color: var(--warnung);
}

.ansicht > form {
  display: block;
}

/* Abschnitte trennt eine feine Linie. */
section + section {
  margin-top: var(--space-100);
  padding-top: var(--space-100);
  border-top: var(--border-width-10) solid var(--linie);
}

main form + p {
  margin-top: var(--space-70);
}

/* Fußzeile: klein, leise und mittig. */
.fuss {
  justify-content: center;
  column-gap: var(--space-60);
  min-height: 0;
  padding: var(--space-50) var(--space-70) var(--space-70);
  border-top: none;
  font-size: var(--font-size-20);
}

.fuss a {
  color: var(--text-leise);
  text-decoration: none;
}

.fuss a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Tabellen: die Hülle mit Rand und runden Ecken schiebt seitlich, der Kopf ist leise, Zeilen trennt eine feine Linie,
   die Zeile unter dem Zeiger wird hell hinterlegt. Zahlen stehen mit der Klasse zahl rechtsbündig. */
div:has(> table) {
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche);
}

div:has(> table) > table {
  border: none;
}

table {
  border-color: var(--linie);
  border-radius: var(--radius);
}

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

th,
td {
  padding: var(--space-40) var(--space-50);
  border-bottom-color: var(--linie);
}

th {
  padding-block: 0.625rem;
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-30);
  vertical-align: bottom;
}

tbody th {
  color: var(--text);
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
  vertical-align: inherit;
}

thead > tr:first-child > :first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

thead > tr:first-child > :last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

tbody > tr:hover > :is(td, th) {
  background-color: var(--flaeche-leise);
}

td a {
  font-weight: var(--font-weight-medium);
}

:is(td, th).zahl {
  text-align: right;
  white-space: nowrap;
}

td :is(button, a.knopf, a.knopf-zweitrangig) {
  min-height: 2rem;
  padding: 0.3125rem var(--space-40);
  font-size: var(--font-size-30);
  white-space: nowrap;
}

td > form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-30);
  vertical-align: middle;
}

td > form > * {
  margin: 0;
}

td > form + form {
  margin-left: var(--space-30);
}

/* Am Handy werden Tabellen mit drei und mehr Spalten zu Karten. web/statisch/plattform.js gibt jeder Zelle den Namen
   ihrer Spalte als data-spalte und der Tabelle das Merkmal data-stapel; ohne Skript schiebt die Tabelle seitlich. Die
   erste Zelle ist der Titel der Karte, jede weitere Zelle steht mit ihrem Spaltennamen davor. */
@media (max-width: 639.98px) {
  table[data-stapel] > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  table[data-stapel],
  table[data-stapel] > tbody,
  table[data-stapel] > tbody > tr,
  table[data-stapel] > tbody > tr > :is(td, th) {
    display: block;
    width: auto;
  }

  /* Ohne Kopf liegt der Körper an allen vier Ecken der Hülle; eckig würde sein Hintergrund ihren runden Rand verdecken. */
  table[data-stapel] > tbody {
    border-radius: calc(var(--radius) - var(--border-width-10));
  }

  table[data-stapel] > tbody > tr {
    padding: var(--space-40) var(--space-50);
    border-bottom: var(--border-width-10) solid var(--linie);
  }

  table[data-stapel] > tbody > tr:last-of-type {
    border-bottom: none;
  }

  table[data-stapel] > tbody > tr:hover > :is(td, th) {
    background-color: transparent;
  }

  table[data-stapel] > tbody > tr > :is(td, th) {
    padding: var(--space-20) 0;
    border: none;
    text-align: left;
    white-space: normal;
  }

  table[data-stapel] > tbody > tr > :is(td, th)[data-spalte] {
    min-height: 1.875rem;
    padding-left: calc(40% + var(--space-40));
  }

  table[data-stapel] > tbody > tr > :is(td, th)[data-spalte]::before {
    content: attr(data-spalte);
    position: absolute;
    top: var(--space-20);
    left: 0;
    width: 40%;
    overflow: hidden;
    color: var(--text-leise);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
  }

  table[data-stapel] > tbody > tr > :is(td, th):first-child:not(:has(> input)) {
    margin-bottom: var(--space-20);
    padding-left: 0;
    font-size: var(--font-size-40);
    font-weight: var(--font-weight-semibold);
  }

  table[data-stapel] > tbody > tr > :is(td, th):first-child:not(:has(> input))::before {
    content: none;
  }

  table[data-stapel] > tbody > tr > :is(td, th):empty {
    display: none;
  }
}

/* Formulare: Felder 40 px hoch mit runden Ecken, die Breite bleibt lesbar. Am Handy ist die Schrift in Feldern 16 px,
   sonst vergrößert iOS die Seite beim Tippen; der Knopf zum Absenden geht dort über die ganze Breite. */
main form:not(:has(table)) {
  max-width: 42rem;
}

:where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
  min-height: 2.5rem;
  padding: 0.5625rem var(--space-40);
  background-color: var(--flaeche);
  font-weight: var(--font-weight-normal);
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

select {
  background-color: var(--flaeche);
}

label {
  font-weight: var(--font-weight-medium);
}

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

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

input:is([type="checkbox"], [type="radio"]) {
  margin-top: 0.1875rem;
  background-color: var(--flaeche);
}

/* Das Label eines Kontrollkästchens steht auf der Höhe seines Kästchens, auch nach anderen Feldern. */
:is(form, fieldset) > :not(input[type="hidden"]) ~ input[type="checkbox"] + label {
  margin-top: var(--space-80);
}

@media (max-width: 639.98px) {
  :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
    font-size: var(--font-size-40);
  }

  main form:not(:has(table), .zeile, .inline) > button {
    justify-self: stretch;
  }
}

/* Felder nebeneinander: .reihe hält Paare aus Label und Feld je in einem div; am Handy stehen sie untereinander. */
.reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-60) var(--space-50);
}

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

.reihe > div > label {
  margin-top: 0;
}

/* Formular in einer Zeile, etwa Suche oder Filter über einer Tabelle: Felder und Knopf nebeneinander, umbrechend. */
form:is(.zeile, .inline).zeile,
form:is(.zeile, .inline).inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-30) var(--space-40);
  max-width: none;
}

form:is(.zeile, .inline).zeile > *,
form:is(.zeile, .inline).inline > * {
  margin: 0;
}

form.zeile.zeile > :is(input, select) {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

form.zeile.zeile > label {
  flex-basis: 100%;
}

form.inline.inline {
  display: inline-flex;
  margin-left: var(--space-30);
  vertical-align: middle;
}

form.inline.inline > button {
  min-height: 2rem;
  padding: 0.3125rem var(--space-40);
  font-size: var(--font-size-30);
}

/* Knöpfe: 38 px hoch, halbfett. Der Hauptknopf ist blau und wird beim Zeigen und Drücken dunkler, auch im dunklen
   Modus, so bleibt die weiße Schrift lesbar. Der zweitrangige ist weiß mit Rand. knopf-gefahr ist rot für Endgültiges
   wie Sperren oder Kündigen, klein macht jeden Knopf kleiner. Zeigen gibt es nur mit Maus oder Trackpad (hover: hover),
   am Handy bliebe der Zustand nach dem Tippen stehen. */
button,
a.knopf,
a.knopf-zweitrangig {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  column-gap: var(--space-30);
  min-height: 2.375rem;
  padding: 0.5rem var(--space-50);
  text-align: center;
}

@media (hover: hover) {
  button:hover,
  a.knopf:hover {
    background-color: var(--knopf-schwebe);
    box-shadow: 0 0 0 1px var(--knopf-schwebe);
    color: var(--color-text-inverse);
  }
}

button:active,
a.knopf:active {
  background-color: var(--knopf-gedrueckt);
  box-shadow: 0 0 0 1px var(--knopf-gedrueckt);
  color: var(--color-text-inverse);
}

:is(button, a).knopf-zweitrangig {
  background-color: var(--flaeche);
  color: var(--text);
}

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

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

:is(button, a).knopf-gefahr {
  background-color: #c3262e;
  box-shadow: 0 0 0 1px #c3262e;
  color: #ffffff;
}

@media (hover: hover) {
  :is(button, a).knopf-gefahr:hover {
    background-color: #a31d24;
    box-shadow: 0 0 0 1px #a31d24;
    color: #ffffff;
  }
}

:is(button, a).knopf-gefahr:active {
  background-color: #a31d24;
  box-shadow: 0 0 0 1px #a31d24;
  color: #ffffff;
}

:is(button, a).knopf-gefahr:focus-visible {
  box-shadow: 0 0 0 3px rgba(195, 38, 46, 0.35);
}

:is(button, a).knopf-leise {
  background-color: transparent;
  box-shadow: none;
  color: var(--akzent);
}

@media (hover: hover) {
  :is(button, a).knopf-leise:hover {
    background-color: var(--akzent-zart);
    box-shadow: none;
    color: var(--akzent-stark);
  }
}

:is(button, a).knopf-leise:active {
  background-color: var(--akzent-zart);
  box-shadow: none;
  color: var(--akzent-stark);
}

:is(button, a.knopf, a.knopf-zweitrangig).klein {
  min-height: 2rem;
  padding: 0.3125rem var(--space-40);
  font-size: var(--font-size-30);
}

a.knopf-leise {
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding: 0.5rem var(--space-40);
  border-radius: var(--border-radius-30);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

button:disabled,
button:disabled:hover {
  background-color: var(--schwebe);
  box-shadow: var(--shadow-border-weaker);
  color: var(--text-leiser);
}

/* Knopfgruppe: Knöpfe nebeneinander, umbrechend. Im Formular steht sie wie ein Knopf unter den Feldern. */
.knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-40);
}

.knoepfe > * {
  margin: 0;
}

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

/* Meldungen: Hinweis (role="status") blau, Fehler (role="alert") rot, dazu die Varianten gut und warnung. Bei Hinweisen
   tragen Rand, Fläche und Zeichen die Farbe, der Text bleibt dunkel; bei Fehlern ist auch der Text dunkelrot, mit
   Kontrast über 7:1 hell wie dunkel. */
:is(p, div):is([role="alert"], [role="status"]) {
  max-width: none;
  padding: var(--space-40) var(--space-50);
  border-radius: var(--radius);
  color: var(--text);
}

div:is([role="alert"], [role="status"]) {
  margin-bottom: var(--space-50);
  border: var(--border-width-10) solid var(--akzent-linie);
  background-color: var(--akzent-zart);
}

div[role="alert"] {
  border-color: var(--fehler-linie);
  background-color: var(--fehler-zart);
}

:is(p, div)[role="alert"] {
  color: var(--fehler-text);
}

:is(p, div)[role="alert"] a {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

:is(p, div)[role="status"].gut {
  border-color: var(--gut-linie);
  background-color: var(--gut-zart);
}

p[role="status"].gut::before {
  background-color: var(--gut);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.2 5.3-4.1 4.3-1.9-1.9a1 1 0 0 0-1.4 1.4l2.6 2.6a1 1 0 0 0 1.4 0l4.8-5a1 1 0 1 0-1.4-1.4Z'/%3E%3C/svg%3E");
}

:is(p, div)[role="status"].warnung {
  border-color: var(--warnung-linie);
  background-color: var(--warnung-zart);
}

p[role="status"].warnung::before {
  background-color: var(--warnung);
}

p.fehler:not([role]) {
  color: var(--fehler-text);
  font-weight: var(--font-weight-medium);
}

/*
 * Bausteine. Jede Seite wählt sie mit diesen Klassen, ohne eigene Regeln:
 * main.breit, main.voll, main.abschnitte (Block flaeche in basis.html) · header > .aktionen · p.zurueck
 * .kennzahlen · .karten mit .karte · ul.liste · .leer · .abzeichen (gut, warnung, fehler, neu) · dl.raster
 * nav.reiter · ol.schritte (li.erledigt, li[aria-current="step"]) · .werkzeuge · form.zeile · .reihe · .knoepfe
 * Knöpfe knopf, knopf-zweitrangig, knopf-gefahr, knopf-leise, klein · Meldungen role="status" (gut, warnung) und
 * role="alert" · td.zahl · .leise · .vorschau · aside · details
 */

/* Leiser Text, etwa Datum oder Zusatz unter einem Namen. */
.leise {
  color: var(--text-leise);
}

.klein {
  font-size: var(--font-size-20);
  line-height: var(--line-height-20);
}

/* Kennzahlen: Kacheln mit Bezeichnung und großer Zahl, darunter optional ein Zusatz.
   <ul class="kennzahlen"><li><span>Firmen</span> <strong>150</strong> <small>12 neu</small></li></ul> */
main ul.kennzahlen,
ul.kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: var(--space-40);
  margin: 0 0 var(--space-100);
  padding: 0;
  list-style: none;
}

.kennzahlen > li {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-10);
  margin: 0;
  padding: var(--space-50) var(--space-60);
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche);
}

.kennzahlen > li > span {
  color: var(--text-leise);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-medium);
}

.kennzahlen > li > strong {
  color: var(--text);
  font-size: var(--font-size-70);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-70);
  letter-spacing: var(--letter-spacing-heading);
}

.kennzahlen > li > a {
  color: inherit;
  font-size: var(--font-size-70);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-70);
  letter-spacing: var(--letter-spacing-heading);
  text-decoration: none;
}

.kennzahlen > li > a:hover {
  color: var(--akzent);
}

/* Karten nebeneinander, am Handy untereinander. Eine Karte ist article, li, div oder a mit der Klasse karte; eine
   Karte als Link wird beim Zeigen blau umrandet. */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-50);
  margin: 0 0 var(--space-100);
  padding: 0;
  list-style: none;
}

.karte,
section > article {
  display: block;
  margin: 0;
  padding: var(--space-60);
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche);
  color: var(--text);
}

section > article + article {
  margin-top: var(--space-50);
}

.karten > .karte + .karte {
  margin-top: 0;
}

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

.karte > :is(h2, h3) {
  margin-bottom: var(--space-20);
  font-size: var(--font-size-40);
  line-height: var(--line-height-40);
}

a.karte {
  text-decoration: none;
  transition: border-color 100ms ease, box-shadow 100ms ease;
}

a.karte:hover {
  border-color: var(--akzent);
  box-shadow: var(--schatten-hoch);
  color: var(--text);
}

a.karte p {
  color: var(--text-leise);
}

/* Liste mit Zeilen: links Name und Zusatz, rechts Knöpfe oder ein Abzeichen.
   <ul class="liste"><li><div><strong>Name</strong> <small>Zusatz</small></div> <a class="knopf-zweitrangig">…</a></li></ul> */
main ul.liste,
ul.liste {
  margin: 0 0 var(--space-70);
  padding: 0;
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche);
  list-style: none;
}

.liste > li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-30) var(--space-50);
  margin: 0;
  padding: var(--space-40) var(--space-50);
}

.liste > li + li {
  border-top: var(--border-width-10) solid var(--linie);
}

.liste > li > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.liste > li > :is(form, .knoepfe) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-30);
}

/* Projekte auf /projekte: Knöpfe und Links als Reihe gleich großer Kacheln. */
main ul:has(> li > form):not(.liste, .karten) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-40);
  margin-left: 0;
  list-style: none;
}

main ul:has(> li > form):not(.liste, .karten) > li {
  margin: 0;
}

main ul:has(> li > form):not(.liste, .karten) > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding: 0.5rem var(--space-50);
  border: var(--border-width-10) solid var(--linie-stark);
  border-radius: var(--border-radius-30);
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

main ul:has(> li > form):not(.liste, .karten) > li > a:hover {
  background-color: var(--schwebe);
}

/* Leerzustand: wenn es noch nichts gibt, sagt eine ruhige Fläche, warum und was als Nächstes kommt.
   <div class="leer"><strong>Noch keine Firmen</strong><p>Die Leitung teilt Ihnen bald Firmen zu.</p></div> */
.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-30);
  margin: 0 0 var(--space-70);
  padding: var(--space-100) var(--space-70);
  border: var(--border-width-10) dashed var(--linie-stark);
  border-radius: var(--radius);
  background-color: var(--flaeche-leise);
  color: var(--text-leise);
  text-align: center;
}

.leer > :is(h2, h3, strong) {
  margin: 0;
  color: var(--text);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-40);
}

.leer > p {
  max-width: 32rem;
  margin: 0;
}

.leer > :is(.knoepfe, p:has(> .knopf, > .knopf-zweitrangig)) {
  margin-top: var(--space-40);
}

/* Abzeichen für einen Stand, etwa freigeschaltet, offen oder gesperrt. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  column-gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background-color: var(--schwebe);
  color: var(--text-leise);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-10);
  white-space: nowrap;
  vertical-align: middle;
}

.abzeichen::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: currentColor;
}

.abzeichen.gut {
  background-color: var(--gut-zart);
  color: var(--gut);
}

.abzeichen.warnung {
  background-color: var(--warnung-zart);
  color: var(--warnung);
}

.abzeichen.fehler {
  background-color: var(--fehler-zart);
  color: var(--fehler);
}

.abzeichen.neu {
  background-color: var(--akzent-zart);
  color: var(--akzent);
}

/* Angaben als Raster: am PC Begriff links und Wert rechts, Zeilen mit feiner Linie; am Handy untereinander. */
dl.raster {
  max-width: none;
  margin-bottom: var(--space-70);
}

dl.raster > dt {
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
}

@media (max-width: 639.98px) {
  dl.raster > dd + dt {
    margin-top: var(--space-50);
  }
}

@media (min-width: 640px) {
  dl.raster {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    column-gap: var(--space-70);
  }

  dl.raster > :is(dt, dd) {
    margin: 0;
    padding-block: var(--space-40);
    border-top: var(--border-width-10) solid var(--linie);
  }

  dl.raster > dt {
    grid-column: 1;
    font-size: var(--font-size-30);
  }

  dl.raster > dd {
    grid-column: 2;
  }

  dl.raster > dt:first-of-type,
  dl.raster > dt:first-of-type + dd {
    border-top: none;
  }
}

/* Reiter innerhalb einer Seite, etwa die Bereiche von /admin: Links in einer Reihe, der aktuelle blau unterstrichen.
   <nav class="reiter" aria-label="…"><ul><li><a href="…" aria-current="page">…</a></li></ul></nav> */
main nav.reiter {
  display: block;
  margin: 0 0 var(--space-100);
  overflow-x: auto;
  border-bottom: var(--border-width-10) solid var(--linie);
  scrollbar-width: none;
}

main nav.reiter ul {
  display: flex;
  column-gap: var(--space-70);
  margin: 0;
  padding: 0;
  list-style: none;
}

main nav.reiter li {
  flex-shrink: 0;
  margin: 0;
}

main nav.reiter a {
  display: block;
  margin-bottom: -1px;
  padding: var(--space-40) 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

main nav.reiter a:hover {
  color: var(--text);
}

main nav.reiter a[aria-current="page"] {
  border-bottom-color: var(--akzent);
  color: var(--akzent);
  font-weight: var(--font-weight-semibold);
}

/* Blättern unter Tabellen: Zurück und Weiter als kleine Knöpfe, dazwischen „Seite x von y“. */
main nav:not(.navigation, .reiter) > a {
  padding: 0.3125rem var(--space-40);
  border: var(--border-width-10) solid var(--linie-stark);
  border-radius: var(--border-radius-30);
  color: var(--text);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

main nav:not(.navigation, .reiter) > a:hover {
  background-color: var(--schwebe);
}

/* Schritte eines Ablaufs, etwa Vertrag, Anrufregeln, Nachweise: erledigte mit Haken, der aktuelle blau. */
main ol.schritte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-30) var(--space-70);
  margin: 0 0 var(--space-100);
  padding: 0;
  list-style: none;
  counter-reset: schritt;
}

ol.schritte > li {
  display: flex;
  align-items: center;
  column-gap: var(--space-30);
  margin: 0;
  color: var(--text-leise);
  font-weight: var(--font-weight-medium);
  counter-increment: schritt;
}

ol.schritte > li::before {
  content: counter(schritt);
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: var(--border-width-10) solid var(--linie-stark);
  border-radius: 50%;
  background-color: var(--flaeche);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-semibold);
}

ol.schritte > li.erledigt {
  color: var(--text);
}

ol.schritte > li.erledigt::before {
  content: "";
  border-color: var(--gut);
  background: var(--gut) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
}

ol.schritte > li[aria-current] {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
}

ol.schritte > li[aria-current]::before {
  border-color: var(--akzent);
  background-color: var(--akzent);
  color: var(--color-text-inverse);
}

/* Werkzeugleiste über einer Tabelle: links Suche oder Filter, rechts Knöpfe. */
.werkzeuge {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-40);
  margin-bottom: var(--space-50);
}

.werkzeuge > * {
  margin: 0;
}

.werkzeuge > form.zeile {
  flex: 1 1 20rem;
}

/* Aufklapper als ruhige Fläche mit Rand. */
details {
  max-width: none;
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche);
}

details + details {
  margin-top: var(--space-30);
}

summary {
  align-items: center;
  column-gap: var(--space-20);
  padding: var(--space-40) var(--space-50);
  border-radius: calc(var(--radius) - 1px);
  background-color: transparent;
  font-size: var(--font-size-30);
  line-height: var(--line-height-30);
}

summary::before {
  width: var(--size-icon-20);
  height: var(--size-icon-20);
}

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

details[open] > summary {
  border-bottom: var(--border-width-10) solid var(--linie);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background-color: transparent;
}

details > :not(summary) {
  background-color: transparent;
}

details > :not(summary) + :not(summary) {
  padding-top: 0;
}

/* Kasten am Rand des Textes, etwa ein Hinweis oder eine Vorschau. */
main aside,
.vorschau {
  margin: 0 0 var(--space-70);
  padding: var(--space-50) var(--space-60);
  border: var(--border-width-10) solid var(--linie);
  border-radius: var(--radius);
  background-color: var(--flaeche-leise);
}

main aside > :last-child,
.vorschau > :last-child {
  margin-bottom: 0;
}

/* main.abschnitte: Ab 640 px steht jeder Abschnitt als eigene Fläche auf dem grauen Grund, der Seitenkopf darüber. */
@media (min-width: 640px) {
  main.abschnitte {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  main.abschnitte > header {
    padding-inline: var(--space-20);
  }

  main.abschnitte > section {
    padding: var(--space-80) var(--space-100);
    border: var(--border-width-10) solid var(--linie);
    border-radius: var(--radius-gross);
    background-color: var(--flaeche);
    box-shadow: var(--schatten);
  }

  main.abschnitte > section + section {
    margin-top: var(--space-60);
  }
}

/* Am PC mit Navigation: Seitenleiste links, oben der Name, darunter die Einträge in Gruppen, unten das Konto. Sie
   klebt und läuft über die ganze Höhe des Fensters. Nur am Bildschirm, gedruckt steht allein der Inhalt (@media print
   unten), auch auf breitem Papier. */
@media screen and (min-width: 1024px) {
  body.mit-navigation {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-rows: 1fr auto;
  }

  body.mit-navigation .kopf {
    display: flex;
    position: sticky;
    top: 0;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-60) var(--space-40) var(--space-50);
    border-right: var(--border-width-10) solid var(--linie);
    border-bottom: none;
  }

  body.mit-navigation .kopfleiste {
    display: contents;
  }

  body.mit-navigation .marke {
    order: 0;
    margin-bottom: var(--space-70);
    padding: var(--space-20) var(--space-40);
  }

  body.mit-navigation .navigation {
    flex-direction: column;
    order: 1;
    overflow: visible;
    padding: 0;
  }

  body.mit-navigation .navigation-gruppe {
    display: block;
    margin: var(--space-60) 0 var(--space-20);
    padding: 0 var(--space-40);
    color: var(--text-leiser);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-10);
  }

  body.mit-navigation .navigation-gruppe:first-child {
    margin-top: 0;
  }

  body.mit-navigation .navigation ul {
    flex-direction: column;
    row-gap: var(--space-10);
  }

  body.mit-navigation .navigation a {
    display: flex;
    align-items: center;
    column-gap: 0.625rem;
    padding: var(--space-30) var(--space-40);
    border-radius: 8px;
    text-align: left;
  }

  body.mit-navigation .navigation a::before {
    content: "";
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    background-color: currentColor;
    mask: var(--zeichen) center / contain no-repeat;
  }

  body.mit-navigation .konto {
    flex-direction: column;
    flex-grow: 0;
    align-items: stretch;
    order: 2;
    row-gap: var(--space-30);
    margin-top: auto;
    padding: var(--space-50) var(--space-40) 0;
    border-top: var(--border-width-10) solid var(--linie);
  }

  body.mit-navigation .konto-name {
    display: block;
    max-width: none;
  }

  body.mit-navigation .konto button {
    width: 100%;
  }

  body.mit-navigation main {
    grid-column: 2;
    grid-row: 1;
    width: min(100% - 4rem, 46rem);
    margin-block: 2.5rem var(--space-70);
  }

  body.mit-navigation main:is(.breit, :has(table:not(figure table))) {
    width: min(100% - 4rem, 72rem);
  }

  body.mit-navigation main.voll {
    width: calc(100% - 4rem);
  }

  body.mit-navigation .fuss {
    grid-column: 2;
    grid-row: 2;
  }
}

/* Zeichen der Einträge in der Seitenleiste, je Ziel eins, als Linien in der Farbe des Textes. */
.navigation a {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E");
}

.navigation a[href="/admin"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='11.5' y='3' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='3' y='11.5' width='5.5' height='5.5' rx='1.5'/%3E%3Crect x='11.5' y='11.5' width='5.5' height='5.5' rx='1.5'/%3E%3C/svg%3E");
}

.navigation a[href="/admin/firmen"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5l1.5 1.5L7 4.5M3 12.5l1.5 1.5L7 11.5M10 6h7M10 13h7'/%3E%3C/svg%3E");
}

.navigation a[href="/admin/bewerbungen"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Cpath d='M2.5 17a5.5 5.5 0 0 1 11 0M15.5 6v5M13 8.5h5'/%3E%3C/svg%3E");
}

.navigation a[href="/caller"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='7' r='3.25'/%3E%3Cpath d='M3.5 17.5a6.5 6.5 0 0 1 13 0'/%3E%3C/svg%3E");
}

.navigation a[href="/firmen"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17V4.5A1.5 1.5 0 0 1 5.5 3h6A1.5 1.5 0 0 1 13 4.5V17M13 8h2.5A1.5 1.5 0 0 1 17 9.5V17M2.5 17h15M7 6.5h2M7 9.5h2M7 12.5h2'/%3E%3C/svg%3E");
}

.navigation a[href="/kontakte"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 2.5H4.4A1.4 1.4 0 0 0 3 4c.3 7 6 12.7 13 13a1.4 1.4 0 0 0 1.5-1.4v-2.2a1 1 0 0 0-.8-1l-2.9-.6a1 1 0 0 0-.9.3l-1.2 1.2a10.5 10.5 0 0 1-4.6-4.6l1.2-1.2a1 1 0 0 0 .3-.9l-.6-2.9a1 1 0 0 0-1-.8Z'/%3E%3C/svg%3E");
}

.navigation a[href="/caller/kalender"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='13' rx='2'/%3E%3Cpath d='M3 8.5h14M7 2.5v3M13 2.5v3'/%3E%3C/svg%3E");
}

.navigation a[href="/caller/merkzettel"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.5 17H4.5A1.5 1.5 0 0 1 3 15.5v-11A1.5 1.5 0 0 1 4.5 3h11A1.5 1.5 0 0 1 17 4.5v8Z'/%3E%3Cpath d='M12.5 17v-3a1.5 1.5 0 0 1 1.5-1.5h3M6.5 7h7M6.5 10h4'/%3E%3C/svg%3E");
}

.navigation a[href="/caller/geschaefte"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='15' height='10.5' rx='2'/%3E%3Cpath d='M7 6V4.5A1.5 1.5 0 0 1 8.5 3h3A1.5 1.5 0 0 1 13 4.5V6M2.5 10.5h15'/%3E%3C/svg%3E");
}

.navigation a[href="/provision"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='15' height='10' rx='2'/%3E%3Ccircle cx='10' cy='10' r='2.25'/%3E%3Cpath d='M5.5 8v4M14.5 8v4'/%3E%3C/svg%3E");
}

.navigation a[href="/postfach"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='12' rx='2'/%3E%3Cpath d='M3 5.5l7 5.5 7-5.5'/%3E%3C/svg%3E");
}

.navigation a[href="/caller/zahlen"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 16.5h13'/%3E%3Crect x='4.5' y='11' width='2.6' height='4.5' rx='0.7'/%3E%3Crect x='8.7' y='7.5' width='2.6' height='8' rx='0.7'/%3E%3Crect x='12.9' y='4' width='2.6' height='11.5' rx='0.7'/%3E%3C/svg%3E");
}

.navigation a[href="/caller/support"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='2.75'/%3E%3Cpath d='M14.6 5.4l-2.65 2.65M8.05 11.95L5.4 14.6M14.6 14.6l-2.65-2.65M8.05 8.05L5.4 5.4'/%3E%3C/svg%3E");
}

.navigation a[href="/admin/support"] {
  --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-2.5a6 6 0 0 1 12 0V13'/%3E%3Crect x='2.8' y='12' width='2.6' height='4.2' rx='1.1'/%3E%3Crect x='14.6' y='12' width='2.6' height='4.2' rx='1.1'/%3E%3Cpath d='M16 16.2v0.6a2 2 0 0 1-2 2h-2.4'/%3E%3C/svg%3E");
}

/* Drucken, etwa einen Nachweis oder eine Abrechnung: nur der Inhalt, schwarz auf weiß, ohne den Weg zurück und ohne
   den Knopf zum Drucken. */
@media print {
  .sprunglinks,
  .kopf,
  .fuss,
  main nav,
  .zurueck,
  [data-drucken] {
    display: none;
  }

  body {
    display: block;
    background: #ffffff;
    color: #000000;
  }

  main,
  main.abschnitte > section {
    width: auto;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
  }
}