/* optional statt swap: Der Browser wartet kurz auf Geist und tauscht die
   Schrift danach nicht mehr aus. So bleibt der Text beim Laden stehen,
   statt erst in der Systemschrift zu erscheinen und dann zu springen.
   Die Schnitte werden im Seitenkopf vorgeladen. */
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v5-latin/geist-v5-latin-100.woff2") format("woff2");
  font-weight: 100;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v5-latin/geist-v5-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v5-latin/geist-v5-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v5-latin/geist-v5-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-display: optional;
}
@font-face {
  font-family: "Geist";
  src: url("../assets/fonts/geist-v5-latin/geist-v5-latin-900.woff2") format("woff2");
  font-weight: 900;
  font-display: optional;
}

:root {
  --navy: #051e42;
  --ink: #1f3766;
  --blue: #4e8fcc;
  --blue-soft: #afc8db;
  --green: #41c363;
  --yellow: #ffcc03;
  --yellow-mid: #fae91f;
  --yellow-light: #fcf3a7;
  --red: #ff4548;
  --coral: #ff7277;
  --white: #fff;

  --page-max: 1600px;
  --gutter: 64px;
  /* Wieviel die zentrierte Seitenspalte auf breiten Schirmen vom Fensterrand
     entfernt liegt. Der Menüknopf und das rote Menü lösen sich davon: Sie
     halten immer genau --gutter zum Fensterrand. */
  --page-offset: max(0px, calc((100vw - var(--page-max)) / 2));
  --header-h: 107px;

  /* Schritt-Seite: Die Nummer steht in einer eigenen Spalte, ihre Breite plus
     Abstand ergibt die Textkante. Titel und alle Kapitel darunter beginnen auf
     dieser Linie. */
  --step-num-w: clamp(44px, 4.4vw, 62px);
  --step-gap: clamp(20px, 3vw, 40px);
  --step-indent: calc(var(--step-num-w) + var(--step-gap));

  --fs-hero: clamp(2.5rem, 4.6vw, 4.5rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1.65vw, 1.75rem);
  --fs-body: clamp(1rem, 1.4vw, 1.25rem);

  /* ---- Zeilenlänge ----
     Wie breit ein Absatz höchstens laufen darf. 36em sind rund 72 Zeichen –
     die Spanne, in der das Auge den nächsten Zeilenanfang findet, ohne ihn zu
     suchen. Vorher standen hier 44em bei kleinerer Schrift: in Pixeln fast
     dieselbe Spalte, aber knapp 90 Zeichen je Zeile. Die Spalte bleibt also,
     wo sie war – die Schrift darin ist gewachsen. */
  --measure: 36em;

  /* ---- Bewegung ----
     Sanfter Lauf: Jede Verschiebung von Text gleitet mit dieser Kurve. Die
     Dauer richtet sich nach der Fläche und danach, wie oft etwas läuft:
     --dur-soft  für große Flächen und seltene Vorgänge (Menü, A11y-Feld),
     --dur-step  für den Schrittwechsel, den man hier öfter macht als alles
                 andere – er gehört deshalb ans kurze Ende,
     --dur-quick für kleine Rückmeldungen: Druckpunkt, Farbwechsel, Aufblenden.
     Für Überblendungen gilt eine eigene Zeit und bewusst `linear`: Zwei
     Bilder, die beide mit ease-in-out laufen, stehen in der Mitte zusammen
     unter voller Deckung – dann schlägt das Feld darunter kurz durch. */
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-soft: 0.42s;
  --dur-step: 0.22s;
  --dur-quick: 0.12s;
  --dur-blend: 1.4s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Pfeil ----------
   Alle Pfeile im Layout kommen aus derselben SVG-Datei. Sie liegt als Maske
   hinter der Textfarbe, damit jeder Pfeil die Farbe seiner Umgebung annimmt;
   Größe (--arrow-w) und Richtung setzt die jeweilige Stelle selbst. */
.arrow {
  display: inline-block;
  vertical-align: -0.12em;
  flex: none;
  width: var(--arrow-w, 1.05em);
  aspect-ratio: 59 / 51;
  background-color: currentColor;
  -webkit-mask: url("../assets/img/%E2%86%92.svg") no-repeat center / contain;
  mask: url("../assets/img/%E2%86%92.svg") no-repeat center / contain;
}

.arrow--left {
  rotate: 180deg;
}

.arrow--down {
  rotate: 90deg;
}

.arrow--up {
  rotate: -90deg;
}

html {
  scroll-behavior: smooth;
  /* Beim Tippen legt der mobile Browser sonst kurz ein graues Feld über den
     angetippten Bereich. Die Rückmeldung geben Knöpfe und Links selbst. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.01em;
  /* Lange deutsche Wörter ("Ausbildungsbetrieb") sind auf schmalen Schirmen
     breiter als die Spalte. Sie brechen dann um – ohne Trennstrich, der bei
     dieser Schriftgröße zu stark auffällt. Wo eine Trennung wirklich schöner
     ist, steht ein ­ im Text. */
  overflow-wrap: break-word;
  /* Der Browser sucht die Umbruchstellen so, dass die Zeilen gleich lang
     werden, statt die erste bis an die Kante zu füllen und ein einzelnes
     Wort übrig zu lassen. */
  text-wrap: balance;
}

p {
  margin: 0;
}

.wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sprungmarken der Startseite (#info, #angebot, #kontakt) enden sonst unter
   der klebenden Kopfzeile. Der Abstand hält sie darunter frei. */
#info,
#angebot,
#kontakt {
  scroll-margin-top: var(--header-h);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
}

/* Gleiche Breite und Aufteilung wie der Kopfbereich darunter, damit die
   Kanten exakt übereinander liegen. */
.header-inner {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: var(--header-h);
}

/* Der Knopf zu den 21 Schritten steht auf der Textkante der Seite – genau
   dort, wo er im geöffneten Menü wieder auftaucht. Deshalb hat die linke
   Hälfte keinen eigenen Einzug mehr. */
.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding-inline: 0;
  background: var(--white);
}

.header-right {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  padding-inline: 32px clamp(24px, 3vw, 60px);
  color: var(--white);
  font-weight: 500;
  font-size: 1.5rem;
  transition: color var(--dur-soft) var(--ease-soft);
}

/* Das grüne Feld liegt als eigene Fläche hinter den Links. So kann es nach
   rechts herausfahren, während die Links an ihrem Platz stehen bleiben. */
.header-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transition: transform var(--dur-soft) var(--ease-soft);
}

/* Die Links oben in der Kopfzeile und unten im Footer tragen keinen festen
   Unterstrich – er wächst beim Überfahren von links nach rechts ein. */
.header-right a,
.footer-meta a {
  position: relative;
  text-decoration: none;
}

.header-right a::after,
.footer-meta a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-step) var(--ease-soft);
}

.header-right a:hover::after,
.header-right a:focus-visible::after,
.footer-meta a:hover::after,
.footer-meta a:focus-visible::after {
  transform: none;
}

/* Rechtsbündig an der Kante zwischen weißem und grünem Feld – das Logo steht
   damit vollständig auf Weiß und endet genau über der Kante im Kopfbereich. */
.header-logo-link {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 16px;
  z-index: 1;
  line-height: 0;
}

.header-logo {
  height: 58px;
  width: auto;
  flex: none;
}

.steps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Aus der zentrierten Spalte heraus an den Fensterrand: Abstand links ist
     damit auf jedem Schirm --gutter – genau wie im geöffneten Menü. */
  margin-left: calc(-1 * var(--page-offset));
  min-height: 39px;
  white-space: nowrap;
  padding: 4px clamp(14px, 1.6vw, 28px);
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: clamp(0.9375rem, 1.35vw, 1.375rem);
  cursor: pointer;
}

/* ---- Der wandernde Pfeil ----
   Der Pfeil im Knopf schwingt langsam vor und zurück – gerade genug, dass das
   Auge ihn findet, ohne dass die Kopfzeile unruhig wird. Der Weg ist an der
   Schriftgröße gemessen, damit er auf jedem Schirm im Verhältnis bleibt. */
@keyframes arrow-schwung {
  0%,
  100% {
    translate: 0;
  }
  50% {
    translate: var(--arrow-schwung) 0;
  }
}

.steps-toggle .arrow {
  --arrow-w: 0.85em;
  /* Die Weite des Schwungs – einmal gesetzt, damit der Knopf zum Schließen
     denselben Weg zurücklegt, nur in die andere Richtung. */
  --arrow-weg: 0.32em;
  --arrow-schwung: var(--arrow-weg);
  /* Dreimal, dann Ruhe. Der Knopf steht in der festen Kopfzeile – also auf
     jeder Seite, an jeder Scrollposition, dauerhaft im Bild. Ein Pfeil, der
     dort ohne Ende schwingt, zeigt nach dem dritten Takt nichts mehr und
     konkurriert nur noch mit dem Text daneben. */
  animation: arrow-schwung 3.4s var(--ease-soft) 3;
}

/* Beim Überfahren tritt der Knopf selbst hervor – dann darf der Pfeil ruhen. */
.steps-toggle:hover .arrow {
  animation-play-state: paused;
}

/* Wer das Menü einmal geöffnet hat, weiß, wo die Schritte liegen. Ab dann
   ruht der Pfeil – auch bei jedem weiteren Besuch (js/main.js merkt es sich). */
body.steps-seen .steps-toggle .arrow {
  animation: none;
}

/* Am Telefon ist der Knopf schmal und steht dicht neben dem Logo. Dort genügt
   ein Hauch von Bewegung, sonst wirkt die Zeile hektisch. */
@media (max-width: 700px) {
  .steps-toggle .arrow {
    --arrow-weg: 0.14em;
    animation-duration: 4.6s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-toggle .arrow {
    animation: none;
  }
}

.steps-toggle:hover {
  background: var(--ink);
  color: var(--white);
}

.steps-toggle-short {
  display: none;
}

/* Der Kopfbereich im Menü übernimmt ab dem Schreibtisch-Schirm die Rolle der
   Kopfzeile: Das Menü deckt sie links ab, der Knopf zum Schließen steht darin. */
.steps-head {
  display: none;
}

/* Zurück ins Menü heißt: Pfeil zeigt nach links. Farbe und Umkehrung beim
   Überfahren bringt .steps-toggle schon mit. */
.steps-toggle--close .arrow {
  rotate: 180deg;
  /* Der Schwung folgt der Spitze – hier zeigt sie nach links, also auf den
     Text zu. Damit die Spitze ihm dabei nicht zu nahe kommt, steht der Pfeil
     von vornherein um genau diesen Weg weiter rechts: Am nächsten Punkt des
     Schwungs bleibt der Abstand dann derselbe wie im Knopf oben. */
  --arrow-schwung: calc(-1 * var(--arrow-weg));
  margin-left: var(--arrow-weg);
}

/* Im Menü setzt der Innenabstand des roten Feldes die Kante – der Knopf
   braucht den Ausbruch aus der Seitenspalte dort nicht. */
.steps-toggle--close {
  margin-left: 0;
}

/* ---------- 21 Schritte overlay ---------- */

.steps-panel {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 55;
  background: var(--red);
  color: var(--white);
  overflow-y: auto;
  padding: 40px var(--gutter) 80px;
  /* Geschlossen steht das Menü links neben dem Bild und fährt von dort
     herein. visibility hält es solange aus Tastatur und Vorlesern heraus und
     schaltet erst am Ende der Fahrt um, damit die Ausfahrt sichtbar bleibt. */
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--dur-soft) var(--ease-soft),
    visibility 0s linear var(--dur-soft);
}

/* ---- Rollbalken im Menü ----
   Der Balken liegt auf dem roten Feld und stört dort die Ruhe. Er ist deshalb
   in jedem Browser durchsichtig und blitzt nur während des Scrollens kurz auf
   (die Klasse setzt js/main.js). Seine Breite bleibt dabei immer gleich, damit
   die Liste beim Ein- und Ausblenden nicht springt. Auf dem Mac blendet das
   System seine Balken ohnehin selbst aus – die Regeln stören dort nicht. */
.steps-panel {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.steps-panel::-webkit-scrollbar {
  width: 10px;
}

.steps-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* Die durchsichtige Kontur hält den Griff schmaler als seine Spur, ohne dass
   die Spur selbst schmaler wird. */
.steps-panel::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}

.steps-panel.is-scrolling {
  scrollbar-color: rgb(255 255 255 / 45%) transparent;
}

.steps-panel.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgb(255 255 255 / 45%);
}

.steps-panel[data-open="true"] {
  transform: none;
  visibility: visible;
  transition:
    transform var(--dur-soft) var(--ease-soft),
    visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .steps-panel,
  .header-right,
  .header-right::before,
  .header-right a::after,
  .footer-meta a::after {
    transition: none;
  }

  .step-nav-link .arrow {
    transition: none;
  }

  #page-content.is-entering > main,
  .strip .arrow {
    animation: none;
  }
}

.steps-inner {
  position: relative;
  display: flex;
  gap: 32px;
  max-width: var(--page-max);
  margin-inline: auto;
}

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 64px;
  flex: 1;
}

.steps-list li {
  break-inside: avoid;
  margin-bottom: 14px;
}

.steps-list a {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  align-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  /* Der Text wechselt seine Farbe im selben Takt, in dem die Pille wandert:
     Wo sie ankommt, wird er dunkelblau, wo sie fortzieht, wieder weiß. */
  transition:
    color var(--dur-soft) var(--ease-soft),
    scale var(--dur-quick) var(--ease-soft);
  /* Zahl und Titel stehen auf der Textkante; die Pille darunter tritt um
     ihren eigenen Innenabstand nach außen, damit nichts eingerückt wirkt.
     Diese Form gilt auf jedem Schirm – so passt die wandernde Pille immer. */
  padding: 6px 12px;
  margin-inline: -12px;
  border-radius: 999px;
}

.steps-list img {
  width: 42px;
  height: 42px;
}

/* Der gewählte Schritt trägt keinen Unterstrich. Seine weiße Fläche kommt
   nicht von hier, sondern von der wandernden Pille – so springt sie beim
   Schrittwechsel nicht um, sondern fährt an ihren neuen Platz. */
.steps-list li.is-current a {
  font-weight: 500;
  text-decoration: none;
}

/* Der Punkt, unter dem die Pille gerade liegt. */
.steps-list li.is-pilled a {
  color: var(--navy);
}

/* Der Pfeil unter der Liste bringt am Telefon zurück an ihren Anfang. Auf
   breiteren Schirmen ist die Liste kurz genug, dort fehlt er. */
.steps-top {
  display: none;
}

/* Die weiße Pille zeigt, wo der Zeiger steht, und ruht sonst auf dem
   gewählten Schritt. Sie wird von main.js bewegt und läuft gemächlich
   hinterher, statt hart umzuspringen – auch beim Schrittwechsel. */
.steps-pill {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 999px;
  background: var(--white);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-quick) var(--ease-soft);
  /* main.js schiebt und staucht die Pille allein über `transform`. Der Ursprung
     oben links hält die obere linke Ecke dort, wohin sie geschoben wurde. */
  transform-origin: 0 0;
  will-change: transform;
}

.steps-pill.is-visible {
  opacity: 1;
}

.steps-list a {
  position: relative;
  z-index: 1;
}

/* Ab dem Schreibtisch-Schirm deckt das Menü nur die linke Hälfte ab. Rechts
   daneben stehen die Schritte, die beim Klick live nachgeladen werden. */
@media (min-width: 1000px) {
  :root {
    /* Breite der Menüspalte – daran richtet sich der Schritt daneben aus. */
    --steps-w: max(320px, calc(50vw - 180px));
  }

  .steps-panel {
    /* Dieselbe Kante wie der Knopf in der Kopfzeile: --gutter zum Fensterrand.
       Der Knopf zum Schließen steht damit genau da, wo eben noch der Knopf zum
       Öffnen stand – und die Liste nutzt das rote Feld bis zu beiden Kanten. */
    --steps-pad: var(--gutter);
    top: 0;
    right: auto;
    width: var(--steps-w);
    /* Über der Kopfzeile, damit das rote Feld links bis nach oben durchläuft.
       Rechts daneben bleiben Logo und Hauptnavigation frei. */
    z-index: 65;
    padding: 0 var(--steps-pad) 64px;
    scrollbar-gutter: stable;
    box-shadow: 0 0 40px rgb(5 30 66 / 25%);
  }

  .steps-head {
    display: flex;
    align-items: center;
    min-height: var(--header-h);
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--red);
    margin-inline: calc(-1 * var(--steps-pad));
    padding-inline: var(--steps-pad);
  }

  .steps-inner {
    gap: 24px;
    max-width: none;
  }

  .steps-list {
    columns: 1;
  }

  .steps-list li {
    margin-bottom: 6px;
  }

  .steps-list a {
    font-size: 1.25rem;
    grid-template-columns: 34px 1fr;
    gap: 14px;
  }

  .steps-list img {
    width: 34px;
    height: 34px;
  }

  /* Steht ein Schritt neben dem Menü, fährt das grüne Feld nach rechts
     heraus; die Links bleiben stehen und werden dabei dunkelblau. */
  body.steps-split[data-step] .header-right {
    color: var(--ink);
  }

  body.steps-split[data-step] .header-right::before {
    transform: translateX(100%);
  }

  /* Über der Startseite liegt das Menü nur auf – erst ein aufgerufener
     Schritt rückt in die freie Hälfte daneben. */
  body.steps-split[data-step] #page-content {
    --gutter: 40px;
  }

  /* Nur der Schritt selbst rückt neben das Menü. CTA-Streifen und Fußzeile
     behalten die volle Breite und laufen beim Scrollen hinter dem Menü durch. */
  #page-content > main {
    margin-left: 0;
    transition: margin-left var(--dur-soft) var(--ease-soft);
  }

  body.steps-split[data-step] #page-content > main {
    margin-left: var(--steps-w);
  }

  /* Der frisch geladene Schritt fährt von rechts in die freie Hälfte. Kurz und
     knapp: Sich durch die Schritte zu arbeiten ist die häufigste Handlung auf
     dieser Seite, und was oft läuft, gehört ans kurze Ende. Der halbe Weg
     genügt dafür – die Richtung ist auch mit 36px zu sehen. */
  body.steps-split[data-step] #page-content.is-entering > main {
    animation: step-enter var(--dur-step) var(--ease-soft) both;
  }
}

@keyframes step-enter {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Ohne die geteilte Ansicht – am Telefon und am schmalen Fenster – blendet
   der nachgeladene Schritt einfach von unten auf. */
#page-content.is-entering > main {
  animation: page-enter var(--dur-step) var(--ease-soft) both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Nach einem Wisch kommt der Schritt aus der Richtung, in die gewischt wurde:
   Die Seite führt fort, was der Finger begonnen hat. */
#page-content.is-entering[data-from="right"] > main {
  animation-name: page-enter-right;
}

#page-content.is-entering[data-from="left"] > main {
  animation-name: page-enter-left;
}

@keyframes page-enter-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes page-enter-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Während des Nachladens bleibt der alte Inhalt stehen, nur gedämpft. */
#page-content.is-loading {
  opacity: 0.45;
  transition: opacity var(--dur-quick) var(--ease-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.05em 1.15em;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  /* Knopf und Fließtext stehen in derselben Größe – nebeneinander in einer
     Karte fiele ein Unterschied nur als Unruhe auf. */
  font-size: var(--fs-body);
  line-height: 1.364;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-quick) var(--ease-soft),
    color var(--dur-quick) var(--ease-soft),
    scale var(--dur-quick) var(--ease-soft);
}

.btn:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--light {
  border-color: var(--white);
  color: var(--white);
}

.btn--light:hover {
  background: var(--white);
  color: var(--ink);
}

/* ---------- Shared section pieces ---------- */

.section {
  position: relative;
}

.block {
  position: relative;
  padding: clamp(48px, 6vw, 96px) clamp(32px, 6vw, 96px);
}

.block--green {
  background: var(--green);
  padding-block: clamp(64px, 7.5vw, 120px);
}
.block--blue {
  background: var(--blue);
  color: var(--white);
}
.block--coral {
  background: var(--coral);
}
.block--yellow {
  background: var(--yellow-mid);
}

/* Der Knopf unter dem Text eines farbigen Blocks – im Vorstellungs-, Team-
   und Besuch-Block derselbe Abstand. */
.block-btn {
  position: relative;
  z-index: 2;
  margin-top: clamp(24px, 2.9vw, 50px);
}

/* Im Entwurf stehen Knopf und Logo am Fuss des blauen Blocks in einer Reihe:
   der Knopf an der Textkante, das Logo an der rechten Kante. */
.block-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(32px, 4.5vw, 72px);
}

.block-foot-logo {
  height: clamp(40px, 3.9vw, 58px);
  width: auto;
}

.arrow-marker {
  --arrow-w: 58px;
  position: absolute;
  /* Der Pfeil steht links neben dem Feld, draußen in der Randspalte. Wie weit
     draußen, entscheidet der kleinere von zwei Werten: der gewünschte Abstand
     – und das, was bis zum Fensterrand überhaupt da ist. Ohne die zweite
     Hälfte ragte er zwischen 1280px und 1600px Fensterbreite aus dem Bild,
     denn dort sind 5vw bereits breiter als die Randspalte selbst. */
  left: calc(-1 * min(clamp(40px, 5vw, 96px), var(--gutter) + var(--page-offset) - 8px));
  /* Auf Höhe der ersten Textzeile, also am oberen Innenabstand des Blocks. */
  top: clamp(64px, 7.5vw, 120px);
}

.lead {
  /* Entwurf: 60px auf 1728px Breite, Zeilenhöhe 66px. */
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem, 3.47vw, 3.75rem);
  line-height: 1.1;
  max-width: 24em;
}

.lead strong {
  font-weight: 900;
}

.deco {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.seal {
  position: absolute;
  display: block;
  width: clamp(140px, 14vw, 236px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 3;
  /* `scale` statt `transform`, damit die Platzierungen ihr translateY behalten. */
  scale: 1;
  transition: scale var(--dur-soft) var(--ease-soft);
}

.seal:hover,
.seal:focus-visible {
  scale: 1.06;
}

/* Der beschriftete Kreis dreht sich langsam ... */
.seal-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  animation: seal-turn 32s linear infinite;
}

/* ... der Daumen darin bleibt stehen. Beim Hover wandert er langsam auf und
   ab wie ein Anhalterdaumen – so knapp, dass er die Schrift nie berührt. */
.seal-thumb {
  position: absolute;
  left: 32.5%;
  top: 20.8%;
  width: 28.2%;
}

/* Am Telefon gibt es keinen Zeiger – dort bliebe der Daumen ungesehen, obwohl
   er der schönste Einfall der Seite ist. Kommt das Siegel zum ersten Mal ins
   Bild, wippt er deshalb von selbst dreimal und ruht dann wieder. Die Klasse
   setzt js/main.js, und nur, wenn Bewegung erwünscht ist.

   Steht vor der Hover-Regel: Wer doch einen Zeiger hat und darüberfährt,
   bekommt das durchgehende Wippen – gleiche Spezifität, die spätere gewinnt. */
.seal.is-winking .seal-thumb {
  animation: seal-hitch 2.2s var(--ease-soft) 3 alternate;
}

.seal:hover .seal-thumb,
.seal:focus-visible .seal-thumb {
  animation: seal-hitch 2.2s var(--ease-soft) infinite alternate;
}

@keyframes seal-hitch {
  from {
    transform: translateY(-7%);
  }
  to {
    transform: translateY(7%);
  }
}

@keyframes seal-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .seal-ring,
  .seal.is-winking .seal-thumb,
  .seal:hover .seal-thumb,
  .seal:focus-visible .seal-thumb {
    animation: none;
  }

  .seal {
    transition: none;
  }
}

/* Platzierung je Block – der Intro-Block folgt dem Entwurf. */
.seal--intro {
  left: 48.2%;
  bottom: 11.7%;
  width: clamp(120px, 17.6%, 282px);
}

/* Weit rechts im Streifen darüber – an der linken Ecke säße das Siegel sonst
   auf dem Verweis zu Spotify. Die Marke aus der Korrekturfassung liegt bei
   zwei Dritteln der Blockbreite. */
.seal--team {
  left: 66.7%;
  top: 0;
  transform: translateY(-60%);
}

/* Hängt gut drei Viertel seiner Höhe über der Blockkante und hält Abstand zur
   rechten Ecke – so bleibt es frei vom Text im blauen Feld. */
.seal--hwk {
  right: 9.2%;
  top: 0;
  transform: translateY(-76%);
}

/* Im Entwurf steht das Siegel deutlich rechts neben dem Haus und haengt mit
   einem Fuenftel seiner Hoehe unter der Kante des gruenen Feldes. */
.seal--besuch {
  left: 51%;
  top: auto;
  bottom: calc(-0.15 * var(--haus-b));
}

/* Im Entwurf bleibt unter dem Text ein freier Streifen, in dem Siegel und
   Pylone stehen – gut ein Viertel der Blockbreite hoch. */
.block--intro {
  padding-bottom: 26%;
}

/* Der Besuch-Block ist im Entwurf nach rechts gerückt und hält unter dem
   Knopf einen Streifen frei, in dem Haus und Siegel stehen.

   Beide hängen am unteren Rand, nicht an einer Höhenprozentzahl: Der Block
   wird höher, sobald der Text mehr Zeilen braucht, und eine Angabe wie
   "top: 56%" würde dann auf dem Knopf landen. Streifen und Überstand zusammen
   (0.9 + 0.52) sind etwas größer als das Haus hoch ist (Seitenverhältnis
   1.414), deshalb bleibt es immer unterhalb des Textes. */
.block--besuch {
  --haus-b: clamp(150px, 23vw, 344px);
  margin-left: clamp(0px, 6vw, 96px);
  padding-bottom: calc(0.9 * var(--haus-b));
}

/* Das Haus steht im freien Streifen und ragt unten aus dem Block heraus. */
.deco--haus {
  left: 11%;
  top: auto;
  bottom: calc(-0.52 * var(--haus-b));
  width: var(--haus-b);
}

/* Pylone mit Glühbirne und Lichtschein – im Entwurf eine Einheit. */
.deco--kegel {
  right: 1.2%;
  bottom: 4.7%;
  width: 29.4%;
  z-index: 1;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  /* Gleiche Breite wie die farbigen Blöcke darunter. */
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Über der folgenden Sektion, damit das illustrierte A darüber liegt. */
  z-index: 2;
}

.hero-copy {
  padding: clamp(48px, 8vw, 138px) clamp(32px, 5vw, 96px) clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  background: var(--blue);
  color: var(--white);
}

.hero-copy h1 {
  font-size: var(--fs-hero);
  max-width: 8ch;
}

.hero-copy p {
  font-size: var(--fs-lead);
  max-width: 16em;
}

.hero-media {
  position: relative;
  overflow: hidden;
  /* Höhe wie im Entwurf – sonst passt das illustrierte A nicht daneben. */
  min-height: clamp(420px, 44vw, 740px);
}

.hero-slider {
  position: absolute;
  inset: 0;
  background: var(--blue-soft);
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-blend) linear;
}

.hero-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide {
    transition: none;
  }
}

/* Das illustrierte A sitzt auf der Kante zwischen Textfeld und Foto und ragt
   unten aus dem Kopfbereich heraus. Es beginnt rechts der Textspalte. */
.hero-illu {
  position: absolute;
  left: 36%;
  bottom: -16%;
  width: 36%;
  z-index: 4;
  pointer-events: none;
}

/* ---------- Angebot cards ---------- */

/* Die Überschrift sitzt im Entwurf auf einem hellgelben Feld, das links auf
   der Kante des Seiteninhalts beginnt und rechts kurz hinter dem Text endet. */
.angebot-head {
  /* Der weiße Streifen zwischen grünem Block und den gelben Karten ist so
     hoch wie der Abstand von .spaced. */
  --head-gap: clamp(48px, 6vw, 96px);
  /* So weit ragt das helle Feld oben in das Grün hinein. */
  --head-lift: clamp(24px, 2.8vw, 48px);
  position: relative;
  z-index: 3;
  width: fit-content;
  max-width: 100%;
  background: var(--yellow-light);
  font-size: var(--fs-h2);
  /* Das helle Feld überbrückt den weißen Streifen: Es beginnt im Grün und
     endet ohne Fuge auf der ersten gelben Karte. Seine Höhe ist deshalb
     Streifen plus Überstand; der Zuschlag verteilt sich gleichmäßig auf oben
     und unten, damit die Zeile mittig im Feld steht. */
  margin: calc(-1 * var(--head-lift)) 0 0;
  padding: calc((var(--head-gap) + var(--head-lift) - 1.02em) / 2)
    clamp(24px, 3vw, 48px)
    calc((var(--head-gap) + var(--head-lift) - 1.02em) / 2)
    clamp(32px, 6vw, 96px);
}

/* Der Pfeil ist höchstens so hoch wie die Versalhöhe der Schrift daneben –
   gedreht ist seine Höhe die angegebene Breite – und steht mittig dazu. */
.angebot-head .arrow {
  --arrow-w: 0.72em;
  vertical-align: 0;
}

.card {
  --finger-t: clamp(40px, 5vw, 90px);
  --finger-w: clamp(64px, 7.5vw, 120px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 4vw, 56px) clamp(32px, 5.5vw, 96px) clamp(48px, 5vw, 72px);
  align-items: stretch;
}

/* Rechte Spalte: Knopf oben, Aufzählung unten – wie im Entwurf. */
.card-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
}

.card--1 {
  background: var(--yellow);
  margin-right: clamp(0px, 8vw, 130px);
}
.card--2 {
  background: var(--yellow-mid);
  margin-left: clamp(0px, 6vw, 96px);
}
.card--3 {
  background: var(--yellow-light);
  margin-right: clamp(0px, 8vw, 130px);
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.card-num {
  width: clamp(48px, 4vw, 68px);
  flex: none;
}

/* Die Überschrift beginnt unterhalb der Hand: oberer Abstand des Fingers plus
   dessen Höhe (Seitenverhältnis rund 1.73) plus etwas Luft – so überschneiden
   sich Bild und Schrift nie. */
.card h3 {
  font-size: var(--fs-h2);
  font-weight: 500;
  margin-top: calc(var(--finger-t) + 1.73 * var(--finger-w) - clamp(48px, 5.5vw, 80px));
  max-width: 9em;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(12px, 1.4vw, 24px);
  font-size: var(--fs-lead);
}

.card-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
}

.card-list .arrow {
  --arrow-w: 0.95em;
  /* Im Rasterfeld greift die Grundlinie nicht – der Pfeil wird von Hand
     auf die erste Zeile gesetzt. */
  margin-top: 0.2em;
}

.card-cta {
  margin: 0;
  text-align: right;
}

.card-finger {
  position: absolute;
  top: var(--finger-t);
  left: clamp(56px, 8vw, 130px);
  width: var(--finger-w);
  z-index: 2;
}

/* ---------- Social strips ---------- */

.strip {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 12px var(--gutter);
  color: var(--white);
  font-size: clamp(1.75rem, 3vw, 3.25rem);
  font-weight: 300;
  position: relative;
}

/* Die Pfeile im CTA-Streifen halten Abstand zur Schrift und treiben gemächlich
   nur im Freiraum daneben – immer in die Richtung, in die sie zeigen. */
.strip .arrow {
  margin-inline: 0.34em;
  animation: arrow-drift 3.4s ease-in-out infinite;
}

.strip .arrow--left {
  animation-name: arrow-drift-left;
}

@keyframes arrow-drift {
  0%,
  100% {
    translate: 0;
  }
  50% {
    translate: 0.22em;
  }
}

@keyframes arrow-drift-left {
  0%,
  100% {
    translate: 0;
  }
  50% {
    translate: -0.22em;
  }
}

.strip--follow {
  background: var(--red);
}
.strip--podcast {
  background: var(--coral);
}

.strip .pill {
  flex: none;
  min-width: 168px;
  text-align: center;
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  /* Der Streifen selbst steht im leichten Schnitt – die Pille darin nicht. */
  font-weight: 400;
  font-size: 1.375rem;
  padding: 4px 20px;
  text-decoration: none;
}

.strip .pill:hover {
  background: var(--ink);
  color: var(--white);
}

.strip-cake {
  position: absolute;
  right: clamp(48px, 11vw, 230px);
  bottom: -18px;
  width: clamp(110px, 12vw, 200px);
  z-index: 4;
}

/* ---------- Team / Kontakt ---------- */

/* Im Entwurf stossen die beiden Felder ohne Naht aneinander: links das
   Korallenfeld mit Anrede und Peace-Hand, rechts das hellgelbe Feld mit den
   Kontaktwegen. Das gelbe Feld setzt tiefer an – es beginnt dort, wo im
   Korallenfeld die kleine Ueberschrift steht. Unten enden beide auf derselben
   Kante: Das kuerzere waechst bis zur Hoehe des laengeren mit. */
.kontakt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

/* Unter dem Zuruf bleibt im Entwurf ein freier Streifen, in dem die
   Peace-Hand steht – wie beim Haus im Besuch-Block hängt sie am unteren Rand
   und ragt ein Stück heraus. Streifen und Überstand rechnen mit ihrer Breite,
   damit der Text darüber sie nie berührt, egal wie lang er wird.

   Die Hand ist 1,76 ihrer Breite hoch und haengt 0,23 davon heraus, steht also
   1,53 Breiten hoch im Feld. Der Streifen laesst ihr darueber noch gut ein
   Drittel Breite Luft – mehr reservierte nur leere Flaeche, die das gelbe Feld
   daneben mit in die Laenge zoege. */
.kontakt-main {
  --peace-b: clamp(90px, 13.6vw, 220px);
  --mass-b: clamp(120px, 20vw, 314px);
  position: relative;
  background: var(--coral);
  padding: clamp(48px, 8.2vw, 130px) clamp(32px, 6vw, 96px)
    calc(1.85 * var(--peace-b));
}

/* Die kleine Ueberschrift traegt im Entwurf das Gewicht, der grosse Zuruf
   darunter steht im leichten Schnitt. Der Pfeil sitzt an der rechten Kante
   des Korallenfeldes, nicht direkt hinter dem Wort. */
.kontakt-label {
  --arrow-w: 52px;
  font-size: clamp(1.5rem, 3.2vw, 3rem);
  font-weight: 900;
  line-height: 1.02;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.kontakt h2 {
  font-size: clamp(2.75rem, 8.2vw, 7.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-top: clamp(16px, 1.6vw, 26px);
}

.deco--peace {
  left: 30%;
  bottom: calc(-0.23 * var(--peace-b));
  width: var(--peace-b);
}

/* Der Zollstock liegt auf der oberen Kante des Korallenfeldes und ragt zur
   Hälfte in den blauen Block darüber – das Gegenstück zur Peace-Hand unten.
   Der Faktor rechnet mit seiner Höhe, die knapp 0,87 seiner Breite misst. */
.deco--massstab {
  left: 52%;
  top: calc(-0.45 * var(--mass-b));
  width: var(--mass-b);
}

.kontakt-list {
  background: var(--yellow-light);
  margin-top: clamp(24px, 8.5vw, 135px);
  padding: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px);
  display: grid;
  /* Das Feld waechst bis zur Unterkante des korallenen mit. Die Zeilen behalten
     dabei ihre eigene Hoehe – sonst zoege der Ueberschuss die Pillen in die
     Laenge – und stehen als Gruppe in der Mitte. */
  align-content: center;
  gap: clamp(28px, 3.2vw, 56px);
}

/* Jeder Kontaktweg steht mittig: die Art darueber, die Angabe darunter als
   Pille. Lange Angaben – etwa die Adresse der Ausbildungsbegleitung – brechen
   in der Pille um, statt sie zu sprengen. */
.kontakt-way {
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: clamp(8px, 0.9vw, 15px);
}

.kontakt-way h3 {
  font-size: var(--fs-h3);
}

/* Dieselbe Bauart wie jeder andere Knopf – nur breiter, damit die lange
   E-Mail-Adresse in einer Zeile bleibt und die Pille flach wie ein Knopf. */
.kontakt-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 440px);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.05em 1.15em;
  font-size: var(--fs-body);
  line-height: 1.364;
  text-decoration: none;
  overflow-wrap: anywhere;
}

/* Was zusammengehört, bricht nicht um – siehe wrap_at(). */
.nowrap {
  white-space: nowrap;
}

a.kontakt-pill:hover,
a.kontakt-pill:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* ---------- Plakat ---------- */

/* Der Plakat-Block steht im Entwurf links auf der Kante des Seiteninhalts und
   ist rechts eingerückt – gegenläufig zum Besuch-Block darüber. */
.block--plakat {
  margin-right: clamp(0px, 6vw, 96px);
}

.plakat {
  /* Das Plakat ragt über die rechte Blockkante hinaus, bis es bündig mit der
     Kante des Blocks darüber steht: Einrückung des Blocks plus sein
     Innenabstand. Der gleiche Wert schiebt es links wieder herein, damit die
     Spaltenbreite stimmt. */
  --plakat-shift: calc(clamp(0px, 6vw, 96px) + clamp(32px, 6vw, 96px));
  display: grid;
  grid-template-columns: 1fr 48%;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* Im Entwurf steht die Textspalte weit auseinander – Überschrift, Fließtext
   und Knopf trennt jeweils rund ein Zwanzigstel der Fensterbreite. */
.plakat h2 {
  font-size: var(--fs-h2);
  /* Nicht der schwere Schnitt der übrigen Überschriften: Neben dem dicht
     gezeichneten Plakat wirkt der mittlere ruhiger. */
  font-weight: 500;
  margin-bottom: clamp(16px, 2.2vw, 36px);
}

/* Solange Text und Plakat nebeneinander stehen, ist die Textspalte schmal.
   Eine Spur kleiner gesetzt, bleibt der Titel dort auf zwei Zeilen, statt in
   drei zu zerfallen – bis hinunter zu 1101px, wo der Block einspaltig wird
   und die Überschrift ihre volle Größe zurückbekommt. */
@media (min-width: 1101px) {
  .plakat h2 {
    font-size: clamp(2rem, 3.2vw, 3.4rem);
  }
}

.plakat p {
  font-size: var(--fs-body);
  margin-bottom: clamp(20px, 2.8vw, 48px);
  max-width: 32em;
}

.plakat p.plakat-order {
  /* Der Bestellhinweis gehört zum zweiten Knopf, nicht zum ersten: Er setzt
     sich mit demselben Abstand vom Download-Knopf ab, mit dem der Fließtext
     über ihm steht. */
  margin-top: clamp(20px, 2.8vw, 48px);
}

.plakat img {
  width: 100%;
  border: 2px solid var(--ink);
  margin-left: var(--plakat-shift);
  margin-right: calc(-1 * var(--plakat-shift));
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: clamp(24px, 2.2vw, 36px) var(--gutter) clamp(16px, 1.6vw, 26px);
}

/* Der Claim sitzt im Entwurf auf der Textkante des Seiteninhalts,
   nicht auf der schmaleren Footer-Kante. */
.claim {
  color: var(--red);
  font-size: clamp(2rem, 5.8vw, 6.25rem);
  font-weight: 100;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 clamp(48px, 15vw, 264px);
  padding-left: max(0px, calc((100vw - var(--page-max)) / 2));
}

.claim strong,
.claim b {
  font-weight: 900;
}

.footer-main {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
}

.footer-logos {
  display: flex;
  align-items: flex-end;
  gap: clamp(32px, 5vw, 88px);
}

.footer-logo-azubi {
  height: clamp(72px, 6.4vw, 110px);
  width: auto;
}

.footer-logo-hwk {
  height: clamp(32px, 2.7vw, 47px);
  width: auto;
}

.logo-invert {
  filter: brightness(0) invert(1);
}

.footer-address {
  margin: 0;
  text-align: right;
  font-size: clamp(0.9375rem, 1.16vw, 1.25rem);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 26px;
  font-size: 0.9375rem;
}

/* ---------- Kopfbereich und Bereiche der Schritt-Seiten ---------- */

.start-hero {
  padding: clamp(40px, 5vw, 96px) 0;
  position: relative;
}

.start-hero h1 {
  font-size: var(--fs-h2);
  margin-bottom: 32px;
  max-width: 14em;
}

.start-hero p {
  font-size: var(--fs-body);
  max-width: var(--measure);
}

.group-head {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: var(--fs-h2);
  padding: clamp(40px, 5vw, 80px) 0 clamp(16px, 2vw, 32px);
}

.group-head .arrow {
  --arrow-w: 58px;
}

/* Der Titel steht als eigenes Element in der Zeile – sonst würde jedes
   **fett** markierte Wort zu einem eigenen Flex-Element und der Abstand des
   Pfeils klaffte mitten im Satz. */
.group-head__text {
  min-width: 0;
}

.group-head strong,
.group-head b {
  font-weight: 900;
}

/* Die große Überschrift trägt denselben Ton wie der Claim in der Fußzeile:
   dünner Schnitt über die ganze Breite, aus dem die **fett** markierten Wörter
   herausstechen. Sie eröffnet damit einen größeren Zusammenhang als die
   normale Überschrift. */
.group-head--big {
  font-size: var(--fs-hero);
  font-weight: 100;
}

/* ---- Überschriften auf der Schritt-Seite ----
   Der Pfeil ist hier kein Teil der Zeile mehr, sondern eine rote Marke in der
   Spalte der Schrittzahl. Dafür wandert die ganze Überschrift um den Einzug
   nach links, und der Pfeil schiebt den Titel mit seinem rechten Abstand
   wieder genau auf die Textkante – dieselbe Linie, auf der auch die Karten
   darunter beginnen. */
.step-content .group-head {
  align-items: flex-start;
  gap: 0;
  margin-left: calc(-1 * var(--step-indent));
  /* Der dünne Schnitt lässt die **fett** markierten Wörter hervortreten. */
  font-weight: 300;
}

.step-content .group-head--big {
  font-weight: 100;
}

.step-content .group-head .arrow {
  --arrow-w: clamp(22px, 2.4vw, 34px);
  color: var(--red);
  margin-right: calc(var(--step-num-w) - var(--arrow-w) + var(--step-gap));
  /* Auf Höhe der ersten Zeile, auch wenn der Titel umbricht. */
  margin-top: calc((1.02em - var(--arrow-w) * 51 / 59) / 2);
}

.info-card {
  padding: 0 0 clamp(40px, 5.7vw, 80px);
}

/* Die Kartenüberschrift steht laut Entwurf in Rot – sie führt durch die
   lange Liste und hebt sich vom blauen Fließtext ab. */
.info-card h3 {
  color: var(--red);
  font-size: clamp(1.25rem, 1.9vw, 1.875rem);
  margin-bottom: 16px;
}

.info-card-teaser {
  font-size: var(--fs-body);
  max-width: var(--measure);
  margin-bottom: 24px;
}

.info-card-teaser p + p {
  margin-top: 0.8em;
}

/* Ohne weiterführende Links endet die Karte direkt hinter dem Kurztext. */
.info-card-teaser:last-child {
  margin-bottom: 0;
}

/* Die Bilder einer Karte: eine Reihe, die erst umbricht, wenn die Zeile nicht
   mehr reicht. Alle gleich hoch beschnitten – so bleibt die Reihe ruhig, auch
   wenn die Redaktion Hoch- und Querformate mischt. */
.info-card-images {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-width: var(--measure);
  margin-bottom: 24px;
}

.info-card-images img {
  flex: 1 1 220px;
  min-width: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--blue-soft);
}

/* Ohne weiterführende Links enden die Bilder die Karte. */
.info-card-images:last-child {
  margin-bottom: 0;
}

/* Alles Weiterführende steht offen da: Knöpfe, Videos, ergänzender Text. */
.info-card-actions {
  font-size: var(--fs-body);
  max-width: var(--measure);
}

.info-card-actions > * + * {
  margin-top: 16px;
}

/* Steht ein Video ganz vorn, reicht der Abstand hinter dem Kurztext. */
.info-card-actions > .video:first-child {
  margin-top: 0;
}

/* Mehrere Links einer Karte stehen nebeneinander und brechen erst, wenn die
   Zeile nicht mehr reicht. */
.info-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.figure-caption {
  background: var(--yellow-light);
  font-size: 0.875rem;
  padding: 10px 16px;
}

/* Trägt der Fotostreifen je Bild eine eigene Unterschrift, liegen alle
   übereinander im selben Feld: So ist das Band immer so hoch wie die längste
   Zeile und rückt beim Wechsel nicht nach. */
.figure-caption--slides {
  display: grid;
}

.figure-caption-text {
  grid-area: 1 / 1;
  opacity: 0;
  /* Derselbe Übergang wie beim Bild darüber – Band und Bild wechseln zusammen. */
  transition: opacity var(--dur-blend) linear;
}

.figure-caption-text.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .figure-caption-text {
    transition: none;
  }
}

.start-photo {
  margin: clamp(32px, 4vw, 64px) 0 0;
}

/* Der übliche Abstand zwischen zwei Blöcken der Startseite. Am Telefon fällt
   er weg – dort stoßen die farbigen Felder im Entwurf direkt aneinander. */
.spaced {
  margin-top: clamp(48px, 6vw, 96px);
}

.start-photo--home {
  position: relative;
  margin-bottom: clamp(48px, 6vw, 96px);
}

/* Das Einzelbild einer Schritt-Seite. Nur unmittelbare Kinder und kein
   Beiwerk: Auf der Startseite stehen in derselben Figur der Bilderwechsel –
   der hält sein eigenes Seitenverhältnis – und die Leiter, die sonst auf
   Bildhöhe zurechtgeschnitten würde. */
.start-photo > img:not(.deco) {
  width: 100%;
  height: clamp(260px, 30vw, 520px);
  object-fit: cover;
}

/* ---- Bilderwechsel im Fotostreifen ----
   Derselbe sanfte Übergang wie im Kopfbereich. Das Feld hält sein
   Seitenverhältnis, damit die Seite beim Laden nicht nachrückt und jedes Bild
   gleich hoch steht – auch wenn die Redaktion Hoch- und Querformate mischt. */
.photo-slider {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-soft);
}

.photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-blend) linear;
}

.photo-slide.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .photo-slide {
    transition: none;
  }
}

/* Die Leiter steht vor dem Bilderwechsel und ragt unten heraus, bis ihre Füße
   im blauen Feld darunter stehen. Der Überstand rechnet mit ihrer eigenen
   Breite, nicht mit der Höhe des Bildfeldes – so bleibt er derselbe, egal wie
   hoch der Streifen gerade ist. */
.deco--leiter {
  --leiter-b: clamp(90px, 17vw, 280px);
  left: 7.5%;
  /* Tief genug, dass die Füße im blauen Feld stehen – aber über der ersten
     Textzeile darin, sonst sitzt die Leiter auf dem Satz. */
  bottom: calc(-0.56 * var(--leiter-b));
  width: var(--leiter-b);
}

/* Auf der Startseite liegt die Bildunterschrift im Entwurf im Bild: ein
   gelbes Band an der unteren rechten Ecke, buendig mit beiden Kanten. Der
   seitliche Innenabstand der Seitenspalte steckt im Rand des Bandes. */
.start-photo--home .figure-caption {
  position: absolute;
  right: var(--gutter);
  bottom: 0;
  width: calc(47% - var(--gutter));
  background: var(--yellow);
}

/* ---------- Schritt-Detailseite ---------- */

.step-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--step-gap);
  align-items: start;
  padding: clamp(40px, 5vw, 96px) 0 clamp(24px, 3vw, 48px);
}

.step-num {
  width: var(--step-num-w);
}

/* Die Pfeile neben der Schrittzahl und der Weg zurück an den Seitenanfang
   sind der Ersatz für die Fußnavigation – beide stehen nur am Telefon.
   Am großen Schirm steht die Fußnavigation mit ihren Titeln. */
.step-jump,
.step-top {
  display: none;
}

.step-content {
  margin-left: var(--step-indent);
}

.step-hero h1 {
  font-size: var(--fs-h2);
  max-width: 16em;
}

.step-intro {
  font-size: var(--fs-lead);
  margin-top: 24px;
  max-width: 32em;
}

.step-body {
  font-size: var(--fs-body);
  max-width: var(--measure);
  padding-bottom: clamp(32px, 4vw, 64px);
}

.step-body p {
  margin-bottom: 1.2em;
}

/* ---- Seiten ohne Schrittzahl (Datenschutz) ----
   Sie erben das Raster der Schritt-Seite, nur ohne die Zahlenspalte: Der Titel
   rückt um den Einzug nach rechts und steht damit auf derselben Textkante wie
   die Kapitel darunter. */
.step-hero--plain {
  grid-template-columns: minmax(0, 1fr);
  margin-left: var(--step-indent);
}

/* ---- Rechtstext: Abstände ----
   Ein Rechtstext ist eine lange Kette kurzer Kapitel. Der Abstand der
   Schritt-Seiten würde ihn auseinanderziehen, deshalb rücken die Kapitel hier
   enger zusammen – gerade weit genug, dass die Pfeilmarke jedes neue Kapitel
   noch klar eröffnet. */
.step-content--legal .step-body {
  padding-bottom: clamp(16px, 1.6vw, 24px);
}

.step-content--legal .group-head {
  padding-top: clamp(24px, 2.6vw, 40px);
}

/* ---- Rechtstext: Fließtext ----
   Wie auf einer Schritt-Seite. Neu sind hier nur die Dinge, die im
   Text der Schritte nicht vorkommen: Zwischenzeilen, Listen und Verweise, die
   im laufenden Satz als Verweis erkennbar sein müssen. */
.legal h3 {
  color: var(--red);
  font-size: clamp(1.25rem, 1.9vw, 1.875rem);
  margin: clamp(28px, 3.4vw, 48px) 0 16px;
}

.legal > h3:first-child {
  margin-top: 0;
}

.legal ul {
  margin: 0 0 1.2em;
  padding-left: 1.2em;
}

.legal li {
  margin-bottom: 0.4em;
}

/* Lange Adressen sprengen die Spalte sonst – sie brechen lieber um. */
.legal a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
  transition: color var(--dur-soft) var(--ease-soft);
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--red);
}

/* ---- Rechtstext: Abmeldung von der Statistik ----
   Der Stand steht als Satz da, der Knopf darunter ändert ihn. Beides gehört
   zusammen und rückt deshalb enger aneinander als zwei Absätze. */
.statistik {
  margin: 0 0 1.2em;
}

.statistik-status {
  margin-bottom: 0.6em;
}

/* ---------- Video ----------
   YouTube wird erst geladen, wenn jemand das Video startet. Bis dahin steht
   nur das Vorschaubild da, darüber ein weißer Playbutton – das hält die Seite
   schnell und schickt niemanden ungefragt zu YouTube. */
.video {
  display: block;
  margin: 1.6em 0;
}

.video-btn {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: scale var(--dur-quick) var(--ease-soft);
}

.video-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  transition: opacity var(--dur-step) var(--ease-soft);
}

.video-btn:hover .video-thumb,
.video-btn:focus-visible .video-thumb {
  opacity: 1;
}

/* Das Dreieck steht auf seinem Schwerpunkt in der Mitte – der liegt bei einem
   Drittel der Breite, deshalb die -33 % statt der üblichen -50 %. */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -33% -50%;
  width: clamp(48px, 7vw, 84px);
  aspect-ratio: 1;
  background: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 2px 14px rgba(5, 30, 66, 0.45));
  transition: scale var(--dur-step) var(--ease-soft);
}

.video-btn:hover .video-play,
.video-btn:focus-visible .video-play {
  scale: 1.08;
}

.video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video-thumb,
  .video-play {
    transition: none;
  }
}

/* Die beiden Nachbarschritte stehen nebeneinander, solange beide Titel
   nebeneinander Platz haben – erst dann bricht die Zeile um. Auch untereinander
   bleibt der Weg zurück links und der Weg vorwärts rechts. */
.step-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  border-top: 2px solid var(--ink);
  padding: clamp(24px, 3vw, 40px) 0 clamp(40px, 5vw, 80px);
}

.step-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 260px;
  text-decoration: none;
  font-size: clamp(0.875rem, 0.95vw, 1.0625rem);
  transition: scale var(--dur-quick) var(--ease-soft);
}

.step-nav-link--next {
  justify-content: flex-end;
  text-align: right;
}

.step-nav-link strong {
  font-weight: 400;
}

.step-nav-num {
  flex: none;
  width: 42px;
  height: 42px;
}

/* Der Pfeil rückt beim Überfahren ein Stück in seine Richtung – mehr Bewegung
   braucht es nicht. Er ist gedreht, deshalb verschiebt ihn `translate` und
   nicht `transform`; sonst ginge die Drehung verloren. */
.step-nav-link .arrow {
  transition: translate var(--dur-step) var(--ease-soft);
}

.step-nav-link:hover .arrow,
.step-nav-link:focus-visible .arrow {
  translate: 6px;
}

.step-nav-link:hover .arrow--left,
.step-nav-link:focus-visible .arrow--left {
  translate: -6px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  :root {
    --gutter: 32px;
    --header-h: 84px;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .header-right {
    gap: 20px;
    font-size: 1.125rem;
    padding-inline: 24px;
  }

  .header-logo {
    height: 44px;
    margin-right: 20px;
  }

  .steps-toggle {
    font-size: 1rem;
    padding: 4px 18px;
  }

  .steps-list {
    columns: 1;
  }

  .steps-list a {
    font-size: 1.125rem;
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }

  .steps-list img {
    width: 36px;
    height: 36px;
  }

  .hero,
  .kontakt,
  .plakat,
  .card {
    grid-template-columns: 1fr;
  }

  .hero-illu {
    position: static;
    width: min(70%, 320px);
    margin: -12% auto 0;
  }

  .card h3 {
    margin-top: 24px;
  }

  .card-finger {
    display: none;
  }

  .card--1,
  .card--3 {
    margin-right: 0;
  }

  /* Einspaltig ist der Block viel höher als breit – das Haus wird schmaler,
     die Rechnung für Streifen und Überstand bleibt dieselbe. */
  .block--besuch {
    --haus-b: clamp(130px, 34vw, 300px);
    margin-left: 0;
  }

  .deco--haus {
    left: 6%;
  }

  .block--plakat {
    margin-right: 0;
  }

  .plakat {
    --plakat-shift: 0px;
  }

  .card--2 {
    margin-left: 0;
  }

  .card-cta {
    order: 1;
    align-self: flex-start;
    text-align: left;
  }

  .arrow-marker {
    display: none;
  }

  .seal:not(.seal--intro) {
    width: 110px;
  }

  .footer-main {
    align-items: flex-start;
  }

  .footer-logos {
    flex-wrap: wrap;
  }

  .footer-address {
    text-align: left;
  }
}

/* Unterhalb des Schreibtisch-Schirms passt das Logo nicht mehr neben den
   Knopf, wenn es an der Mitte klebt – dort liefen beide ineinander. Ab hier
   läuft es im Textfluss mit und rückt mit dem Knopf zusammen nach links. */
@media (max-width: 999px) {
  .header-logo-link {
    position: static;
    transform: none;
    margin-right: 0;
    min-width: 0;
  }
}

@media (max-width: 860px) {
  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header-left {
    gap: 12px;
    padding-inline: 16px 12px;
  }

  .header-logo {
    height: 40px;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    object-fit: contain;
    object-position: left;
  }

  .steps-toggle-full {
    display: none;
  }

  .steps-toggle-short {
    display: inline;
  }

  .header-right {
    padding-inline: 16px;
    gap: 14px;
    font-size: 1rem;
  }

  /* Auf schmalen Schirmen hängen die Siegel an der oberen linken Ecke des
     Blocks statt an ihrer Entwurfsposition – dort ist Platz neben dem Text. */
  .seal:not(.seal--intro) {
    width: 92px;
    inset: 0 auto auto 8px !important;
    transform: translateY(-50%) !important;
  }

  /* Mobil stehen Pylone und Siegel untereinander – der freie Streifen unter
     dem Text ist entsprechend höher als auf dem Schreibtisch-Schirm. */
  .block--intro {
    padding-bottom: 121%;
  }

  /* Der Intro-Block hat auch mobil eine eigene Anordnung im Entwurf. */
  .seal--intro {
    width: 45%;
    left: 45.8%;
    bottom: 4.5%;
  }

  .deco--kegel {
    left: 11.4%;
    right: auto;
    bottom: 15.5%;
    width: 70.9%;
  }

  figure .deco {
    display: none;
  }
}

/* ---------- Telefon ----------
   Der mobile Entwurf verzichtet auf Karten, Ränder und weiße Zwischenräume:
   Jedes farbige Feld läuft von Kante zu Kante und stößt direkt an das
   nächste. Links bleibt ein Streifen frei – dort steht fest die senkrechte
   Schiene zu den 21 Schritten, die am Telefon den Knopf in der Kopfzeile
   ersetzt. */
@media (max-width: 700px) {
  :root {
    --gutter: 0px;
    --header-h: 64px;
    /* Freiraum links für die Schiene und Abstand zur rechten Kante. */
    --rail: 72px;
    --edge: 24px;

    --fs-hero: 2.75rem;
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
    --fs-lead: 1.25rem;
    /* Aus der HWK-Durchsicht: Am Telefon steht jeder Fließtext in einer
       Größe – 1.25rem –, jeder Knopf in einer zweiten – 1.1rem. Zwei Werte
       für die ganze Seite, statt einer eigenen Größe je Block. */
    --fs-body: 1.25rem;
    --fs-btn: 1.1rem;
  }

  /* ---- Kopfzeile: durchgehend weiß, nur Logo und zwei Links ---- */

  .header-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-inline: 0;
  }

  .header-left {
    padding-inline: 16px 0;
    gap: 0;
  }

  .header-logo {
    height: 48px;
  }

  .header-right {
    padding-inline: 16px;
    gap: 20px;
    color: var(--ink);
    font-size: 1rem;
    /* Einen Schnitt schmaler als der schwerste: Neben dem gewachsenen Logo
       trugen die beiden Verweise im schwarzen Schnitt zu viel Gewicht. */
    font-weight: 700;
  }

  /* Das grüne Feld gehört zum Schreibtisch-Entwurf. */
  .header-right::before {
    display: none;
  }

  /* ---- Die Schiene ----
     Derselbe Knopf wie oben in der Kopfzeile, nur senkrecht und fest am
     linken Rand: Er liegt über allem und öffnet und schließt die Liste. */

  .steps-toggle {
    position: fixed;
    left: 12px;
    top: calc(var(--header-h) + 24px);
    z-index: 70;
    writing-mode: vertical-rl;
    rotate: 180deg;
    gap: 14px;
    min-height: 0;
    padding: 22px 7px;
    font-size: var(--fs-btn);
  }

  .steps-toggle-full {
    display: inline;
  }

  .steps-toggle-short {
    display: none;
  }

  /* Die Schrift läuft senkrecht, der Pfeil bleibt waagerecht: geschlossen
     zeigt er nach rechts (öffnen), offen nach links (zurück). */
  .steps-toggle .arrow {
    --arrow-w: 0.95em;
    rotate: 180deg;
  }

  /* Offen steht die Schiene auf dem roten Feld – und der Pfeil zeigt zurück. */
  body.steps-open .steps-toggle {
    background: var(--red);
    border-color: var(--white);
    color: var(--white);
  }

  body.steps-open .steps-toggle .arrow {
    rotate: 0deg;
  }

  /* ---- Liste der 21 Schritte ---- */

  .steps-panel {
    padding: 24px var(--edge) 56px var(--rail);
  }

  .steps-inner {
    display: block;
  }

  .steps-list {
    columns: 1;
  }

  .steps-list li {
    margin-bottom: 8px;
  }

  .steps-list a {
    grid-template-columns: 34px 1fr;
    gap: 16px;
    font-size: 1.0625rem;
    padding: 4px 12px;
  }

  .steps-list img {
    width: 34px;
    height: 34px;
  }

  .steps-top {
    display: block;
    margin-top: 28px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  .steps-top .arrow {
    --arrow-w: 30px;
  }

  /* ---- Blöcke: randlos, links am Freiraum der Schiene ausgerichtet ---- */

  /* Die Schiene liegt fest über dem Inhalt – links bleibt deshalb überall
     ihr Streifen frei. Auf der Startseite laufen die farbigen Felder von
     Kante zu Kante und tragen diesen Abstand selbst. */
  .wrap {
    padding-left: var(--rail);
    padding-right: var(--edge);
  }

  .section.wrap,
  #angebot.wrap,
  .start-photo--home {
    padding-inline: 0;
  }

  .spaced {
    margin-top: 0;
  }

  /* Nur vor dem Block, über dessen Kante das Siegel hängt, bleibt ein weißer
     Streifen stehen – so steht es im Entwurf. */
  .spaced:has(.seal--team) {
    margin-top: 104px;
  }

  .block {
    padding: 40px var(--edge) 48px var(--rail);
  }

  .block--green {
    padding-block: 40px 48px;
  }

  /* Die Siegel hängen mittig über der oberen Kante – darunter braucht der
     Text Luft. */
  .block--green:not(.block--intro) {
    padding-top: 108px;
  }

  .lead {
    font-size: var(--fs-lead);
    line-height: 1.25;
  }

  .btn {
    font-size: var(--fs-btn);
  }

  /* Im Entwurf tritt der Knopf in den grünen Feldern hinter die Aussage
     zurück – er steht eine Stufe kleiner als der Text darüber. */
  .block--green .btn {
    font-size: 0.9375rem;
  }

  /* Aus der HWK-Durchsicht: Im Vorstellungsblock steht der Knopf nicht mehr
     an der Textkante, sondern mittig unter dem Text – so weit weg von der
     Schiene wie vom rechten Rand. */
  .block--intro .block-btn {
    display: flex;
    justify-content: center;
    padding-right: calc(var(--rail) - var(--edge));
  }

  /* Am Telefon ist die Zeile zu schmal für Knopf und Logo nebeneinander: Das
     Logo lief über die rechte Kante hinaus und machte damit die ganze Seite
     quer verschiebbar. Beide stehen deshalb untereinander, der Knopf bleibt
     einzeilig. */
  .block-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .block-foot .btn {
    white-space: nowrap;
  }

  .block-foot-logo {
    height: 34px;
    max-width: 100%;
  }

  /* ---- Kopfbereich ----
     Textfeld, illustriertes A und Foto stehen untereinander; A und Text
     teilen sich das blaue Feld. */

  .hero {
    display: flex;
    flex-direction: column;
    padding-inline: 0;
    /* Textfeld und Illustration stehen untereinander auf demselben Blau –
       der Grund liegt am Kopfbereich, sonst blitzt an der Naht Weiß durch. */
    background: var(--blue);
    /* Was rechts übersteht, endet am Bildschirmrand statt die Seite quer
       rollen zu lassen. */
    overflow: hidden;
  }

  .hero-copy {
    padding: 32px var(--edge) 24px var(--rail);
    gap: 20px;
  }

  .hero-copy h1 {
    max-width: none;
  }

  .hero-copy p {
    max-width: none;
  }

  /* Das illustrierte A rückt zwischen Text und Foto. Es steht rechts, wo es
     über den Rand des Bildschirms hinausläuft, und hängt unten ein Stück in
     den Bilderwechsel hinein. Den blauen Grund liefert der Kopfbereich. */
  .hero-illu {
    order: 1;
    position: relative;
    inset: auto;
    z-index: 2;
    align-self: flex-end;
    width: 80%;
    margin: 0 -8% -14% 0;
    padding: 0;
    background: none;
  }

  .hero-media {
    order: 2;
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  /* ---- Vorstellung ----
     Unter dem Knopf bleibt der Streifen frei, in dem Pylone mit Glühbirne und
     das Siegel stehen. Aus der HWK-Durchsicht: Die Pylone rückt nach oben an
     die rechte Kante, der leere grüne Rest darunter fällt weg. */
  .block--intro {
    padding-bottom: 62%;
  }

  .deco--kegel {
    left: auto;
    right: 0%;
    bottom: 9%;
    width: 56%;
  }

  /* Das Siegel rückt mit nach links, damit die Pylone daneben sichtbar
     bleibt und nicht dahinter verschwindet. */
  .seal--intro {
    left: 20%;
  }

  /* ---- Unser Angebot ---- */

  /* Aus der HWK-Durchsicht: Die Überschrift steht so groß wie die
     Kartenüberschriften darunter ("Beratung & Unterstützung"). Damit sie im
     hellgelben Feld nicht gequetscht wirkt, wächst dessen Höhe mit. */
  .angebot-head {
    width: auto;
    font-size: var(--fs-h2);
    margin: 0;
    padding: 28px var(--edge) 28px var(--rail);
  }

  .card {
    position: relative;
    margin: 0;
    padding: 40px var(--edge) 48px var(--rail);
    gap: 20px;
  }

  .card-num {
    width: 56px;
  }

  /* Der zeigende Finger steht wieder im Bild – am Telefon ist Platz dafür. */
  .card-finger {
    display: block;
    top: 52px;
    left: calc(var(--rail) + 4px);
    width: 92px;
  }

  /* Die groessere Zahl schiebt die Ueberschrift schon von sich aus nach
     unten – der Abstand zum Finger wird um denselben Betrag kleiner. */
  .card h3 {
    margin-top: 126px;
    max-width: none;
  }

  .card-list {
    font-size: var(--fs-body);
    gap: 8px;
  }

  /* Der Knopf steht auch am Telefon in der Karte – wie im schmalen Entwurf
     unter der Aufzählung und an derselben Kante wie sie. */
  .card-cta {
    display: block;
  }

  /* ---- CTA-Streifen ---- */

  .social-strips {
    margin-top: 72px;
  }

  .strip {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding: 10px var(--edge) 10px var(--rail);
    font-size: 1.375rem;
    white-space: nowrap;
  }

  /* Im Entwurf steht am Telefon nur die Beschriftung im Streifen. */
  .strip .arrow {
    display: none;
  }

  .strip .pill {
    min-width: 0;
    font-size: var(--fs-btn);
    padding: 3px 16px;
  }

  /* Am Telefon steht im Streifen über dem roten Feld keine Torte – ohne sie
     darf der Streifen auch schmaler ausfallen. */
  .strip-cake {
    display: none;
  }

  /* ---- Melde Dich ---- */

  .kontakt {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Die kleine Überschrift steht nur im Schreibtisch-Entwurf. */
  .kontakt-label {
    display: none;
  }

  /* Der Zuruf steht mittig unter dem Zollstock und bleibt einzeilig. */
  .kontakt h2 {
    margin-top: 0;
    font-size: var(--fs-h2);
    max-width: none;
  }

  /* Aus der HWK-Durchsicht: Am Telefon steht der Block wie im Entwurf –
     der Zollstock liegt auf der oberen Kante, der Zuruf mittig darunter.
     Der obere Innenabstand hält frei, was der Zollstock ins Feld hineinragt:
     Er ist 0,87 seiner Breite hoch und hängt 0,45 davon oben heraus. */
  .kontakt-main {
    --mass-b: min(52vw, 240px);
    padding: calc(0.42 * var(--mass-b) + 28px) var(--edge) 48px var(--edge);
    text-align: center;
  }

  /* Am Telefon gibt es kein gemeinsames gelbes Feld: Jede Person bringt ihr
     eigenes mit und läuft von Kante zu Kante. */
  .kontakt-list {
    background: none;
    margin-top: 0;
    padding: 0;
    gap: 0;
  }

  /* Im Entwurf trägt das Korallenfeld am Telefon nur ein Bild – den
     Zollstock auf seiner oberen Kante. Die Peace-Hand gehört zum
     Schreibtisch-Entwurf. */
  .deco--peace {
    display: none;
  }

  .deco--massstab {
    left: 50%;
    translate: -50% 0;
    top: calc(-0.45 * var(--mass-b));
    width: var(--mass-b);
  }

  /* Jeder Kontaktweg füllt ein eigenes farbiges Feld von Kante zu Kante,
     abwechselnd hell und kräftig. Aus der HWK-Durchsicht stehen Art und
     Angabe mittig im Bildschirm – der Innenabstand ist deshalb auf beiden
     Seiten gleich und lässt den Streifen der Schiene nicht mitrechnen. */
  .kontakt-way {
    background: var(--yellow-light);
    gap: 16px;
    margin: 0;
    padding: 40px var(--edge) 48px;
  }

  .kontakt-way--alt {
    background: var(--yellow);
  }

  .kontakt-way h3 {
    font-size: var(--fs-h2);
  }

  /* Die Pille ist nur so breit wie ihre Angabe und steht mittig im Feld.
     Reicht die Zeile für die lange E-Mail-Adresse nicht, bricht sie hinter
     dem @ um (siehe wrap_at()); kurze Angaben bleiben einzeilig. */
  .kontakt-pill {
    width: auto;
    max-width: 100%;
    font-size: var(--fs-btn);
  }

  /* Eine zweizeilige Angabe – nur die E-Mail-Adresse ist lang genug dafür –
     zieht die Pille sonst auf die volle Breite des Feldes, obwohl die
     längere ihrer beiden Zeilen deutlich kürzer ist. Die Pille legt sich
     deshalb um die längere Hälfte. */
  .kontakt-pill:has(.nowrap) {
    flex-wrap: wrap;
    width: min-content;
  }

  /* ---- Besuchen und Plakat ---- */

  /* Aus der HWK-Durchsicht: Das Haus rückt herauf, direkt unter den Text,
     und der Knopf rückt herunter neben seine untere linke Ecke. Die grüne
     Fläche endet damit gleich hinter dem Knopf; das Haus ragt darüber hinaus
     ins gelbe Feld.

     Dafür stehen Text, Haus und Knopf am Telefon nicht mehr absolut gesetzt,
     sondern in einer Spalte untereinander – so folgt das Haus dem Text, egal
     wie viele Zeilen er braucht. Sein negativer unterer Abstand holt den
     Knopf wieder auf seine Höhe. */
  .block--green.block--besuch {
    /* Schmal genug, dass links neben dem Haus der Knopf steht, ohne es zu
       berühren. */
    --haus-b: min(46vw, 240px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
    /* Gerade so viel, dass der Knopf über dem Siegel bleibt, das mittig auf
       der unteren Kante liegt. */
    padding-bottom: 76px;
  }

  .block--besuch .lead {
    order: 1;
  }

  /* Rechtsbündig bis an den Bildschirmrand – wie das illustrierte A im
     Kopfbereich. */
  .block--besuch .deco--haus {
    order: 2;
    position: static;
    align-self: flex-end;
    width: var(--haus-b);
    margin: 20px calc(-1 * var(--edge)) calc(-0.42 * var(--haus-b)) 0;
  }

  .block--besuch .block-btn {
    order: 3;
    margin-top: 0;
  }

  /* Kleiner als die Knöpfe in den übrigen grünen Feldern: Er steht hier
     neben dem Haus, nicht allein unter dem Text. */
  .block--besuch .btn {
    font-size: 0.875rem;
  }

  /* Unter der oberen Kante hängt das Siegel ins gelbe Feld – die Überschrift
     beginnt darunter. Aus der HWK-Durchsicht steht zwischen dem Knopf im
     grünen Feld und dieser Überschrift mehr Luft. */
  .block--plakat {
    padding-top: 148px;
  }

  .plakat {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .plakat h2 {
    font-size: var(--fs-h2);
    margin-bottom: 24px;
  }

  .plakat p {
    margin-bottom: 28px;
  }

  .plakat p.plakat-order {
    margin-top: 28px;
  }

  .plakat img {
    margin-inline: 0;
  }

  /* ---- Fußzeile ---- */

  .site-footer {
    padding: 32px var(--edge) 32px var(--rail);
  }

  .claim {
    font-size: 2.25rem;
    margin-bottom: 120px;
    padding-left: 0;
  }

  /* Aus der HWK-Durchsicht: Am Telefon steht der Zuruf ohne den Pfeil davor –
     in der schmalen Spalte nahm er der Zeile mehr, als er ihr gab. */
  .claim .arrow {
    display: none;
  }

  .footer-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-logos {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .footer-logo-azubi {
    height: 48px;
  }

  .footer-logo-hwk {
    height: 28px;
  }

  /* Die Adresse steht wie im Entwurf auf drei Zeilen und in der
     Fließtextgröße. */
  .footer-address {
    text-align: left;
    font-size: var(--fs-body);
    line-height: 1.3;
  }

  /* Impressum und Datenschutz stehen dichter über "Alle Rechte vorbehalten" –
     die drei Angaben gehören zusammen. */
  .footer-meta {
    column-gap: 20px;
    row-gap: 6px;
    margin-top: 24px;
  }

  /* ---- Schritt-Seite ----
     Neben der Schiene ist die Spalte schmal – die Nummer rückt deshalb über
     die Überschrift statt daneben. Aus der HWK-Durchsicht steht der Weg zu
     den Nachbarschritten in derselben Zeile wie die Nummer: oben, wo man ihn
     ohne die ganze Seite hinunterzurollen findet. */
  .step-hero {
    grid-template-columns: auto 1fr;
    gap: 16px 24px;
    padding-bottom: 16px;
  }

  .step-hero > div {
    grid-column: 1 / -1;
  }

  .step-jump {
    display: flex;
    align-self: center;
    justify-content: flex-end;
    gap: 32px;
  }

  .step-jump-link {
    --arrow-w: 34px;
    display: block;
    color: var(--red);
    /* Der Pfeil selbst ist schmal – die Fläche zum Antippen darf es nicht
       sein. */
    padding: 8px;
    margin: -8px;
    transition: translate var(--dur-step) var(--ease-soft);
  }

  .step-jump-link[rel="next"]:active {
    translate: 6px;
  }

  .step-jump-link[rel="prev"]:active {
    translate: -6px;
  }

  /* Am Telefon führen die Pfeile oben zu den Nachbarschritten – unten bleibt
     nur der Weg zurück an den Anfang, ohne trennende Linie darüber. */
  .step-nav {
    display: none;
  }

  .step-top {
    --arrow-w: 30px;
    display: block;
    margin: 8px auto clamp(40px, 8vw, 72px);
    padding: 12px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }

  /* Die Nummer steht hier über dem Titel, die Kapitel bleiben an der Kante. */
  .step-content {
    margin-left: 0;
  }

  /* Ohne Zahlenspalte gibt es auch keinen Einzug, den der Titel nachholen müsste. */
  .step-hero--plain {
    margin-left: 0;
  }

  /* Aus der HWK-Durchsicht: Die roten Überschriften der Abschnitte stehen
     eine Stufe größer, und zwischen zwei Abschnitten liegt mehr Luft. */
  .info-card h3 {
    font-size: 1.5rem;
  }

  .info-card {
    padding-bottom: 60px;
  }

  /* Der Pfeil steht überall links neben dem Titel, auch hier. Nur die
     Zahlenspalte, in die er am großen Schirm ausweicht, fehlt – er rückt
     deshalb in die Zeile und schiebt den Titel um seine Breite nach rechts. */
  .step-content .group-head {
    margin-left: 0;
  }

  .step-content .group-head .arrow {
    margin-right: 12px;
  }

  /* ---- Sonstiges ---- */

  /* Am Telefon stossen die Felder ohne Naht aneinander – auch das Foto
     schliesst direkt an das gruene Feld darueber an. */
  .start-photo--home {
    margin-top: 0;
    margin-bottom: 0;
  }

  .start-photo > img:not(.deco) {
    height: auto;
    aspect-ratio: 3 / 4;
  }

  /* Auf dem blauen Feld steht im Entwurf kein Siegel. */
  .seal--hwk {
    display: none;
  }

  /* Die Siegel stehen am Telefon mittig auf der Kante zwischen zwei Feldern,
     nicht wie beim Tablet an der linken Ecke. Die Regel dort ist mit
     !important gesetzt und muss hier genauso überschrieben werden. */
  .seal.seal--team {
    width: 150px !important;
    inset: 0 auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Kleiner als die übrigen Siegel und mit seiner Mitte auf der Kante des
     grünen Feldes – es sitzt vor der unteren linken Ecke des Hauses und
     damit rechts neben dem Knopf, nicht auf ihm. */
  .seal.seal--besuch {
    width: min(34%, 130px) !important;
    inset: auto auto max(-16vw, -65px) 26% !important;
    transform: none !important;
  }
}

@media (max-width: 480px) {
  :root {
    --rail: 64px;
    --edge: 16px;
    --fs-hero: 2.375rem;
  }

  .header-logo {
    height: 42px;
  }

  /* Auch auf dem schmalsten Schirm bleiben Knöpfe und Schiene in der einen
     Größe, die für alle gilt – nur ihr Innenabstand fällt knapper aus. */
  .steps-toggle {
    left: 8px;
    padding: 18px 6px;
  }

  .header-right {
    padding-inline: 12px;
    gap: 14px;
  }
}

/* ---------- Ruhiger Modus ----------
   Steht am Ende, damit es die weiter oben gesetzten Gleitwege sicher
   überschreibt. */
@media (prefers-reduced-motion: reduce) {
  #page-content > main,
  body.steps-split[data-step] #page-content > main {
    transition: none;
  }

  /* Auch die beiden Richtungen des Wischens – sie setzen animation-name aus
     einer spezifischeren Regel und blieben von der Kurzform sonst unberührt. */
  #page-content.is-entering > main,
  #page-content.is-entering[data-from="right"] > main,
  #page-content.is-entering[data-from="left"] > main {
    animation: none;
  }

  .step-jump-link {
    transition: none;
  }
}

/* ---------- Barrierefreiheit ----------
   Der runde Knopf unten rechts liegt über allem, auch über dem roten Menü –
   die Einstellungen sollen von jeder Stelle aus erreichbar bleiben. Das Feld
   darüber fährt aus dem Knopf heraus. Die Regeln, die die Einstellungen
   auslösen, stehen weiter unten in diesem Abschnitt. */
.a11y {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  /* Der Rahmen um Knopf und Feld ist so hoch wie das geschlossene Feld und
     legt sich damit unsichtbar über die untere rechte Ecke der Seite. Am
     Telefon lagen darunter die Schrittliste und die Verweise im Fuß – sie
     ließen sich weder antippen noch mit dem Finger schieben. Der Rahmen gibt
     Berührungen deshalb weiter; nur Knopf und Feld selbst nehmen sie an. */
  pointer-events: none;
}

.a11y-toggle,
.a11y-panel {
  pointer-events: auto;
}

.a11y-toggle {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(5 30 66 / 18%);
  transition:
    background var(--dur-soft) var(--ease-soft),
    color var(--dur-soft) var(--ease-soft),
    scale var(--dur-quick) var(--ease-soft);
}

.a11y-toggle:hover,
.a11y-toggle:focus-visible {
  background: var(--ink);
  color: var(--white);
  scale: 1.06;
}

.a11y-icon {
  width: 30px;
  height: 30px;
}

/* Geschlossen bleibt das Feld am Knopf und ist für Tastatur und Vorleser
   nicht zu erreichen – wie das große Menü schaltet visibility erst am Ende
   der Fahrt um, damit die Ausfahrt sichtbar bleibt. */
.a11y-panel {
  order: 1;
  width: min(320px, calc(100vw - 32px));
  padding: 20px;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 12px 32px rgb(5 30 66 / 20%);
  transform-origin: bottom right;
  opacity: 0;
  scale: 0.94;
  translate: 0 12px;
  visibility: hidden;
  transition:
    opacity var(--dur-soft) var(--ease-soft),
    scale var(--dur-soft) var(--ease-soft),
    translate var(--dur-soft) var(--ease-soft),
    visibility 0s linear var(--dur-soft);
}

.a11y-panel[data-open="true"] {
  opacity: 1;
  scale: 1;
  translate: 0;
  visibility: visible;
  transition-delay: 0s;
}

.a11y-title {
  margin: 0 0 14px;
  font-size: 1.125rem;
  font-weight: 500;
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.a11y-label {
  font-size: 1rem;
}

.a11y-size {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.a11y-step {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--dur-soft) var(--ease-soft),
    color var(--dur-soft) var(--ease-soft),
    scale var(--dur-quick) var(--ease-soft);
}

.a11y-step:hover,
.a11y-step:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.a11y-step[disabled] {
  opacity: 0.35;
  cursor: default;
}

.a11y-size-value {
  min-width: 4ch;
  text-align: center;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

/* Ein Schalter je Zeile: links die Beschriftung, rechts das Kästchen, das
   beim Einschalten voll wird. aria-pressed sagt dasselbe ohne Bild. */
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 2px solid var(--blue-soft);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--dur-soft) var(--ease-soft),
    background var(--dur-soft) var(--ease-soft),
    scale var(--dur-quick) var(--ease-soft);
}

.a11y-option:hover,
.a11y-option:focus-visible {
  border-color: var(--ink);
}

.a11y-option[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--yellow-light);
}

.a11y-option-text {
  display: block;
}

/* Der Hinweis unter einer Einstellung stand im Blau der Verweise – auf Weiß
   trägt das 3,4:1 und damit zu wenig für eine Zeile dieser Größe. Er ist
   ohnehin kleiner gesetzt als die Einstellung darüber; die Farbe muss den
   Unterschied nicht noch einmal machen. Ausgerechnet im Feld für
   Barrierefreiheit soll nichts blass stehen. */
.a11y-hint {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink);
}

.a11y-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--white);
  transition: box-shadow var(--dur-soft) var(--ease-soft);
}

.a11y-option[aria-pressed="true"] .a11y-mark {
  box-shadow: inset 0 0 0 5px var(--ink);
}

/* Der Verweis ist unterstrichen und damit auch ohne Farbe als anfassbar zu
   erkennen – deshalb darf er das dunkle Blau tragen statt des hellen, das auf
   Weiß nur 3,4:1 erreicht.

   Die Zeile allein ist zwanzig Pixel hoch und damit zu schmal für einen
   Daumen. Der Innenabstand bringt sie auf Daumenhöhe; das negative Außenmaß
   nimmt oben wieder heraus, was er dort dazugibt, damit der Abstand zur
   letzten Einstellung derselbe bleibt. Ein unsichtbares Feld wie bei den
   Verweisen in Kopfzeile und Fuß verbietet sich hier: Es läge über der
   Einstellung darüber und finge deren Klicks ab. */
.a11y-reset {
  margin-top: -6px;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  cursor: pointer;
}

.a11y-reset:hover,
.a11y-reset:focus-visible {
  color: var(--navy);
}

/* ---- Farben verstärken ----
   Statt eines Filters über der Seite werden die Farben der Palette selbst
   dunkler gesetzt: Alles, was sie benutzt, zieht mit – auch das rote Menü und
   die Siegel – und nichts verliert seine Form. */
body.a11y-contrast {
  --ink: #051e42;
  --blue: #1c5a92;
  --blue-soft: #6f93b0;
  --green: #17853a;
  --red: #d21519;
  --coral: #c8363b;
  --yellow: #ffc700;
  --yellow-mid: #f5df00;
  --yellow-light: #fbeb8a;
}

/* ---- Verweise unterstreichen ----
   Verweise sollen nicht nur an der Farbe zu erkennen sein. Knöpfe, Logo und
   Siegel bleiben ausgenommen – dort trägt das Bild die Bedeutung. */
body.a11y-links a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

body.a11y-links .header-logo-link,
body.a11y-links .seal,
body.a11y-links .steps-list a,
body.a11y-links a:has(> img:only-child) {
  text-decoration: none;
}

/* ---------- Druckpunkt ----------
   Ganz oben nimmt `-webkit-tap-highlight-color: transparent` dem mobilen
   Browser seine graue Tipp-Fläche ab – mit dem Versprechen, dass die Knöpfe
   die Rückmeldung selbst geben. Hier lösen sie es ein: Wer tippt, sieht das
   Ziel kurz nachgeben, noch bevor die Antwort aus dem Netz da ist.

   Nur ein Hauch – 0.97, nicht weniger, und ohne Nachfedern. Das ist eine
   Quittung, keine Vorstellung. `scale` statt `transform`, damit vorhandene
   Verschiebungen erhalten bleiben. Der Block steht am Ende, damit er die
   Hover-Regeln der einzelnen Stellen sicher überschreibt. */
.btn:active,
.steps-list a:active,
.step-nav-link:active,
.video-btn:active,
.a11y-toggle:active,
.a11y-option:active,
.a11y-step:active {
  scale: 0.97;
}

/* ---------- Genug Fläche zum Antippen ----------
   Die Verweise oben in der Kopfzeile und unten im Fuß sind nur so hoch wie
   ihre eigene Zeile – am Telefon gut zwanzig Pixel. Ein Daumen ist breiter als
   das. Hinter jedem Wort liegt deshalb ein unsichtbares Feld, das die Fläche
   auf Daumenhöhe bringt; das Wort selbst bleibt stehen, wo es steht, und keine
   Zeile rückt dadurch nach.

   Der Unterstrich, der beim Überfahren einwächst, hängt an `::after` – hier
   ist deshalb `::before` an der Reihe. */
.header-right a::before,
.footer-meta a::before {
  content: "";
  position: absolute;
  inset-inline: -6px;
  top: 50%;
  translate: 0 -50%;
  height: 100%;
  min-height: 44px;
}

/* ---------- Der Fokusrahmen ----------
   Wer die Seite mit der Tastatur geht, muss sehen, wo er gerade steht. Bisher
   zeichnete das jeder Browser nach eigenem Gutdünken. Jetzt trägt der Rahmen
   die Farben der Seite: dunkelblau, mit etwas Abstand zum Rand, damit er die
   Form dahinter nicht zuschnürt.

   Dunkelblau steht auf jeder Fläche der Palette gut – auf Weiß, auf dem Grün,
   dem Blau, dem Rot des Menüs und dem Gelb. Nur im dunklen Fuß verschwände es;
   dort wird der Rahmen weiß. Der Abstand von 3px hält ihn außerhalb des
   Knopfes, auch wenn dieser beim Fokus selbst dunkel wird – gemessen wird also
   immer gegen die Fläche ringsum. Sichtbar ist er nur bei der Tastatur; die
   Maus löst ihn nicht aus. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.site-footer :focus-visible {
  outline-color: var(--white);
}

/* ---- Bewegung anhalten ----
   Dasselbe, was der Schalter im Betriebssystem bewirkt – nur eben hier auf
   der Seite. Die Bilderwechsel schaltet js/main.js zusätzlich ab. */
body.a11y-still,
body.a11y-still *,
body.a11y-still *::before,
body.a11y-still *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}

/* ---- Vorlesen ----
   Solange das Vorlesen an ist, zeigt der Zeiger über den Textstellen, dass
   sie angetippt werden können; die gerade gelesene Stelle wird markiert. */
body.a11y-read #page-content :is(p, li, h1, h2, h3, h4, blockquote) {
  cursor: pointer;
}

body.a11y-read .a11y-speaking {
  background: var(--yellow-light);
  box-shadow: 0 0 0 4px var(--yellow-light);
  border-radius: 4px;
}

/* Am Telefon steht der Knopf dicht am Rand; das Feld nimmt dann fast die
   ganze Breite ein. */
@media (max-width: 480px) {
  .a11y-toggle {
    width: 50px;
    height: 50px;
  }

  .a11y-icon {
    width: 26px;
    height: 26px;
  }
}