/* Caro – Mitarbeiterkampagne. Look der Plakate: Weiß, Schwarz, ein Cyan. */

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --cyan: #01b9f7;   /* per Pixel-Sample aus "15€/H." auf dem Plakat */
  --ink: #000;
  --paper: #fff;
  --muted: #4a4a4a;  /* 8,9:1 auf Weiß, 8,1:1 auf --mist */
  --mist: #f3f3f3;   /* helle Flächen: "Deine Key-Infos.", Kacheln, Tags */
  --line: #dcdcdc;   /* dünne Trennlinien */
  --pad: clamp(1.5rem, 6vw, 3.5rem);
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --h1: min(17.5vw, 7.5rem);
  --ls: -0.01em;
  --ease: cubic-bezier(.77, 0, .18, 1);
  --radius: 1.625rem;  /* große Rundung wie die Logo-Kacheln */
  --gap: clamp(4.75rem, 22vw, 9rem);  /* Abstand zwischen Abschnitten: ~86 px mobil */
  --buttons-gap: 3.25rem;  /* über und unter den Kontakt-Buttons in "Du willst starten?": 52 px mobil, 64 px Desktop */

  /* Typo-Skala: im restlichen CSS nur diese Größen (einzige Ausnahme: Hero-Headline --h1) */
  --fs-h2: clamp(1.125rem, 5.7vw, 2.75rem);  /* alle Abschnittsüberschriften; "ALLTAGSBEGLEITER:IN." (14,74 em) passt ab 320 px in eine Zeile */
  --fs-h3: clamp(.875rem, 4.4vw, 1.375rem);  /* Kartentitel, Kernwerte, Schlagwörter, Uhrzeiten; mobil mind. 4 px unter --fs-h2 */
  --fs-tile-l: calc(1.5 * var(--fs-h3));     /* nur die Titel der beiden großen Kacheln */
  --fs-body: 1rem;                           /* Fließtext, 17 px ab 900 px */
  --fs-small: .875rem;                       /* Beschriftungen, Tags, Hinweise, Footer */
  color-scheme: light;
}
@media (min-width: 56.25rem) {
  :root { --fs-body: 1.0625rem; }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: max(var(--pad), env(safe-area-inset-left)) max(var(--pad), env(safe-area-inset-right));
}

/* ---------- Kopf & Hero ---------- */

.top { padding-top: max(1.25rem, env(safe-area-inset-top)); }
.logo { display: block; width: auto; height: 1.75rem; }

.hero { padding-block: clamp(2.25rem, 9vw, 5.5rem) 0; }

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: var(--ls);
}

/* OMA ⇄ OPA: nur der mittlere Buchstabe rollt, die Breite geht mit */
.who { display: inline-block; white-space: nowrap; }
.slot {
  display: inline-block;
  vertical-align: top;
  height: 1em;
  overflow: hidden;
  clip-path: inset(.11em 0 .13em);         /* Fenster = Versalhöhe: Buchstaben rollen an der Kante weg */
  width: calc(1.255em + var(--ls));        /* Breite "M" in Unbounded 800 */
  transition: width .7s var(--ease);
}
.track { display: block; transition: transform .7s var(--ease); }
.track > span { display: block; height: 1em; }
[data-who="opa"] .slot { width: calc(.825em + var(--ls)); }  /* Breite "P" */
[data-who="opa"] .track { transform: translateY(-1em); }

.price {
  display: block;
  width: auto;
  height: calc(var(--h1) * .9);
  margin: calc(var(--h1) * .2) 0 0 calc(var(--h1) * -.02);
}

.lead {
  margin-top: 1.25rem;
  font-weight: 600;
}

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

.cta {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.75rem;
  max-width: 26rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3.5rem;
  padding: .75rem clamp(1rem, 4.5vw, 1.5rem);
  border: 2px solid var(--ink);
  border-radius: .875rem;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, color .15s;
}
.btn svg { flex: none; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-secondary { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .btn:hover { background: var(--cyan); color: var(--ink); }
}

@media (min-width: 40rem) {
  .cta { flex-direction: row; flex-wrap: wrap; max-width: none; }
}

/* ---------- Abschnitte ---------- */

.section { padding-top: var(--gap); }

.section h2,
.band h2 {
  margin: 0 0 clamp(1.75rem, 5vw, 3rem);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  text-wrap: balance;
}
.section h3 { margin: 0; }
.nowrap { white-space: nowrap; }

.aside {
  margin-top: clamp(2.25rem, 7vw, 3rem);
  max-width: 34rem;
  font-weight: 600;
}

/* Einblenden beim Reinscrollen – nur mit JS und wenn Bewegung erlaubt ist */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: opacity .6s ease var(--delay, 0s), transform .6s ease var(--delay, 0s), translate .2s ease;
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
  /* Sicherheitsnetz: falls script.js nicht lädt, nach 3 s trotzdem zeigen */
  .js:not(.js-ready) .reveal { animation: show 0s 3s forwards; }
}
@keyframes show { to { opacity: 1; transform: none; } }

/* ---------- Du wirst Alltagsbegleiter:in: Einstieg ---------- */

.intro { max-width: 40rem; }
.intro p + p { margin-top: 1rem; }
.c { color: var(--cyan); }

/* ---------- Flip-Kacheln direkt unter dem Einstieg: wie kleine Plakate, groß und klein im Wechsel ---------- */

/* Einstieg, Hinweissatz und Kacheln bilden einen Block: 18 px über dem Satz, 15 px darunter (Desktop 22/15) */
.tiles-hint { margin-block: 1.125rem .9375rem; font-weight: 600; }
html:not(.flip-live) .tiles-hint { display: none; }  /* ohne JS gibt es nichts zu tippen */
html:not(.flip-live) .tiles { margin-top: 1.125rem; }
@media (min-width: 56.25rem) {
  .tiles-hint { margin-top: 1.375rem; }
  html:not(.flip-live) .tiles { margin-top: 1.375rem; }
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6875rem;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1000px;   /* für das Hover-Andrehen der Kacheln */
}
/* Außen (li): Einblenden, Hover. Innen (.flip): Umdrehen, auch der Auto-Dreh (.is-peek). So überschreiben sich die Transformationen nicht. */
.tile { position: relative; display: grid; perspective: 1000px; }
.tile.big { grid-column: span 2; }
.flip { display: grid; gap: .375rem; }  /* ohne JS: Vorder- und Rückseite untereinander */
html:not(.flip-live) .rear { min-height: 0; }
.face {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 6.25rem;
  padding: 1rem .75rem;   /* kleine Kacheln: 12 px seitlich, damit "EINKAUFEN." bei 360 px passt */
  border-radius: var(--radius);
}
.big .face { min-height: 7.5rem; padding: 1rem .9375rem; }
.face h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.big .face h3 { font-size: var(--fs-tile-l); }

/* Rückseite: Flex-Spalte mit demselben Innenabstand wie vorn, Inhalt senkrecht mittig. Liste mit rundem Punkt in Textfarbe
   und hängendem Einzug. Kleine Kacheln: eine Spalte. Große: "Dazu gehört:" über der Liste, Liste zweispaltig mit je zwei Punkten. */
.rear { justify-content: center; }
.rear-lead { margin-bottom: .5625rem; font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
.rear ul { display: grid; row-gap: .375rem; margin: 0; padding: 0; list-style: none; line-height: 1.35; }
.big .rear ul { grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 1.375rem; }
.rear li { position: relative; padding-left: .875rem; text-wrap: pretty; break-inside: avoid; }
/* Punktmitte bei .74em: zwischen Versal- und x-Höhen-Mitte der ersten Zeile, wirkt so optisch mittig */
.rear li::before { content: ""; position: absolute; left: 0; top: calc(.74em - .1875rem); width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
@media (max-width: 22.4375rem) {  /* unter 360 px: große Kacheln einspaltig */
  .big .rear ul { grid-template-rows: none; grid-auto-flow: row; }
}
/* Platz für den Dreh-Badge (28 px, 8 px vom Rand): die letzte Zeile endet mind. 40 px vor dem rechten Rand.
   Passt sie nicht daneben, rutscht nur dieser Platzhalter in eine neue Zeile – dann bleibt unten Platz. */
.flip-live .rear li:last-child::after { content: ""; display: inline-block; width: 1.75rem; }
/* Beide Seiten liegen übereinander: feste Mindesthöhen, damit alle kleinen bzw. großen Kacheln gleich hoch sind und hinten Luft ist */
.flip-live .face { min-height: 9.5rem; }
.flip-live .big .face { min-height: 10rem; }

/* Füllungen – Vorderseiten: Nachbarn (auch senkrecht) nie gleich; Rückseite immer eine andere Farbe als vorn */
.is-ink { background: var(--ink); color: var(--paper); }
.is-cyan { background: var(--cyan); color: var(--ink); }
.is-mist { background: var(--mist); color: var(--ink); }
.is-line { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }

/* Dreh-Badge unten rechts (per JS eingefügt): 28 px sichtbar, die ganze Kachel ist Trefffläche */
.turn {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}
.turn svg { display: block; }
.flip-btn {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 3D-Flip, sobald script.js läuft: beide Seiten im selben Grid-Feld, die höhere bestimmt die Höhe */
.flip-live .flip { gap: 0; transform-style: preserve-3d; }
.flip-live .face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-live .rear { transform: rotateY(180deg); }
.flip-live .is-flipped .flip,
.flip-live .flip.is-peek { transform: rotateY(180deg); }  /* .is-peek: Auto-Dreh, rein visuell (aria bleibt) */

@media (min-width: 56.25rem) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(9.5rem, auto); gap: .75rem; }
  .face, .big .face { padding: 1.25rem; }
  .big .face { padding-inline: 1.5rem; }
  .flip-live .face, .flip-live .big .face { min-height: 11rem; }
  .tiles > :nth-child(2) { --delay: 60ms; }
  .tiles > :nth-child(3) { --delay: 120ms; }
  .tiles > :nth-child(4) { --delay: 180ms; }
  .tiles > :nth-child(5) { --delay: 240ms; }
  .tiles > :nth-child(6) { --delay: 300ms; }
}
/* 900–990 px: kleine Kacheln sind schmal, weniger Innenabstand statt kleinerer Schrift ("EINKAUFEN." = 165 px) */
@media (min-width: 56.25rem) and (max-width: 61.9375rem) {
  .tile:not(.big) .face { padding-inline: .6875rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .flip { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .js .tiles .reveal { transition: opacity .6s ease var(--delay, 0s), transform .6s ease var(--delay, 0s), translate .2s ease, rotate .2s ease, scale .1s ease; }
  .tile:active { scale: .98; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tile:hover { translate: 0 -4px; rotate: y 6deg; }
}

/* ---------- So könnte ein normaler Termin aussehen: Uhrzeit links (Cyan), Linie mit Punkten, Text rechts ---------- */

.timeline {
  --col: calc(var(--fs-h3) * 4.5);  /* "10:00" ist 3,6 em breit + Luft bis zur Linie */
  --dot-y: calc(var(--fs-body) * .65);  /* Mitte der ersten Zeile von <strong> */
  position: relative;
  max-width: 42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: var(--col) 1fr;
  align-items: baseline;
  padding-bottom: 2rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li:not(:last-child)::before {   /* graue Linie zum nächsten Punkt */
  content: "";
  position: absolute;
  left: var(--col);
  top: var(--dot-y);
  bottom: calc(var(--dot-y) * -1);
  width: 2px;
  background: var(--line);
}
.timeline::after {                         /* Cyan-Füllung, wächst per JS mit dem Scrollen */
  content: "";
  position: absolute;
  left: var(--col);
  top: var(--tl-top, 0);
  width: 2px;
  height: var(--tl-p, 0);
  background: var(--cyan);
}
.timeline time {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: var(--ls);
  color: var(--cyan);
}
.timeline div { position: relative; padding-left: 1.5rem; color: var(--muted); }
.timeline .dot {
  position: absolute;
  z-index: 1;
  left: -5px;
  top: calc(var(--dot-y) - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--cyan);
}
.timeline strong {
  display: block;
  margin-bottom: .2rem;
  line-height: 1.3;
  color: var(--ink);
}

/* Scroll-Zustände (nur wenn script.js läuft und Bewegung erlaubt ist) */
.tl-live .timeline .dot { background: #cfcfcf; transition: background-color .25s ease; }
.tl-live .timeline .is-on .dot { background: var(--cyan); animation: pop .45s cubic-bezier(.3, 1.6, .5, 1); }
.tl-live .timeline time,
.tl-live .timeline strong,
.tl-live .timeline .desc { transition: opacity .35s ease; }
.tl-live .timeline li:not(.is-on) time,
.tl-live .timeline li:not(.is-on) strong,
.tl-live .timeline li:not(.is-on) .desc { opacity: .35; }
@keyframes pop { 50% { transform: scale(1.6); } }

/* ---------- Deine Key-Infos.: weiße Kacheln auf hellgrauer Fläche; mit JS ist die ganze Kachel ein Button ---------- */

.band {
  margin-top: var(--gap);
  padding-block: clamp(3.75rem, 16vw, 6.5rem);
  background: var(--mist);
}
.facts-hint { margin-bottom: 1rem; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
html:not(.facts-live) .facts-hint { display: none; }  /* ohne JS: nichts zu tippen, alle Infotexte stehen offen da */
.facts-live .band h2 { margin-bottom: .625rem; }      /* Hinweiszeile direkt unter der Überschrift */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;   /* offene Kachel wächst allein nach unten */
  gap: .6875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.facts > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.fact {
  position: relative;
  min-height: 6rem;
  padding: .875rem .75rem;
  border: 1px solid #e2e2e2;
  border-radius: 1.25rem;
  background: var(--paper);
}
/* Wert und Beschriftung brechen nur an Leerzeichen um, nie mitten im Wort;
   "15 €", "Mo–So" und "Max. 40h /" sind im HTML gegen Umbruch geschützt */
.fact-val {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: -.02em;
}
.fact-sub { display: block; margin-top: .3rem; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.fact .more p { padding-top: .625rem; }

/* Ein Button pro Kachel (per JS aus .fact-head gebaut): Wert, Beschriftung, Aufklapp-Pfeil.
   Sein ::after spannt sich über die ganze Kachel samt Rand und aufgeklapptem Text (Stretched Button). */
.facts-live .fact { padding-top: 2.75rem; }
.fact-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fact-btn::after { content: ""; position: absolute; inset: -1px; border-radius: 1.25rem; }
.fact-btn:focus-visible { outline: none; }
.fact-btn:focus-visible::after { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Aufklapp-Pfeil oben rechts (per JS eingefügt, rein visuell, aria-hidden), 28 px, Mitte 25 px vom Rand.
   Offen: Kreis schwarz, Chevron weiß und nach oben gedreht. Drehen am Kreis, Nicken am SVG – so überschreibt sich nichts. */
.facts-live .fact-chev {
  position: absolute;
  top: .6875rem;
  right: .6875rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
}
.fact-chev svg { display: block; }
.facts-live [aria-expanded="true"] .fact-chev { background: var(--ink); color: var(--paper); transform: rotate(180deg); }
/* Nicken: 0 → 4 px → 0 → 2 px → 0 (Klasse und Versatz --nd kommen per JS) */
@keyframes nod { 25% { transform: translateY(4px); } 50% { transform: none; } 75% { transform: translateY(2px); } }
.facts-live .more { display: grid; grid-template-rows: 0fr; }
.facts-live .more > div { overflow: hidden; visibility: hidden; }
.facts-live .is-open .more { grid-template-rows: 1fr; }
.facts-live .is-open .more > div { visibility: visible; }
@media (hover: hover) {
  .facts-live .fact:hover { border-color: var(--ink); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .facts-live .fact:hover .fact-chev svg { translate: 0 2px; }  /* in Pfeilrichtung: zu nach unten, offen nach oben */
}
@media (prefers-reduced-motion: no-preference) {
  .facts-live .fact { transition: border-color .15s ease, scale .1s ease; }
  .facts-live .fact:active { scale: .98; }
  .fact-chev { transition: background-color .2s ease-out, color .2s ease-out, transform .2s ease-out; }
  .fact-chev svg { transition: translate .15s ease; }
  .fact-chev.is-nod svg { animation: nod 1.2s ease-in-out var(--nd, 0s); }
  .facts-live .more { transition: grid-template-rows .2s ease; }
  .facts-live .more > div { transition: visibility 0s .2s; }
  .facts-live .is-open .more > div { transition: visibility 0s; }
}
/* Mobil liegt der Pfeil in einem eigenen Streifen über dem Text (padding-top), ab 768 px daneben:
   dort hält der Wert rechts 40 px frei. Drei Spalten erst ab 900 px. */
@media (min-width: 48rem) {
  .facts { gap: .75rem; }
  .fact, .facts-live .fact { padding: 1.125rem 1.25rem; }
  .facts-live .fact-val { padding-right: 2.5rem; }
}
@media (min-width: 56.25rem) {
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- "Ich will den Job": Button unter den Key-Infos, öffnet ein Auswahlfenster (WhatsApp oder E-Mail) ---------- */

/* Button im Stil der Kontakt-Buttons, aber flächig in Cyan (Rand transparent, die Fläche läuft darunter durch).
   Schwarz auf Cyan: 9,3 : 1. Mobil volle Breite bis 420 px, ab 900 px nach Inhalt. Nur mit JS (.job-live) sichtbar. */
.btn-job {
  display: flex;
  width: 100%;
  max-width: 26.25rem;
  margin-top: 1.875rem;   /* 30 px unter dem Raster */
  border-color: transparent;
  background: var(--cyan);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}
html:not(.job-live) .btn-job { display: none; }
.btn-job:active { transform: scale(.98); }
.btn-job:focus-visible { outline-width: 2px; }
@media (hover: hover) {
  .btn-job:hover { background: color-mix(in srgb, var(--cyan) 88%, var(--ink)); }  /* eine Spur dunkler */
}

/* Auswahlfenster: mit JS ein modales <dialog>, mobil als Bottom-Sheet, ab 900 px mittig.
   Der Inhalt liegt in .job-box, das <dialog> selbst hat kein Padding: Ein Klick, der es direkt trifft, kam vom Hintergrund. */
.job-title {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.job-options { display: flex; flex-direction: column; gap: .75rem; }
.job-cancel {
  display: block;
  min-width: 2.75rem;
  min-height: 2.75rem;    /* Trefffläche 44 × 44 px */
  margin: .5rem auto 0;
  padding: 0 1rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.job-live .job {
  width: 100%;
  max-width: none;
  max-height: calc(100% - 2rem);
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--paper);
  color: var(--ink);
}
.job-live .job-box { padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom)); }
.job::backdrop { background: rgb(0 0 0 / .45); }
html.job-open { overflow: hidden; scrollbar-gutter: stable; }  /* Seite dahinter scrollt nicht, nichts springt */
@keyframes job-up { from { transform: translateY(100%); } }
@keyframes job-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .job-live .job[open] { animation: job-up .22s ease-out; }
  .job-live .job[open]::backdrop { animation: job-fade .22s ease-out; }
}

/* Ohne JS (oder ohne showModal): kein Fenster, die beiden Optionen stehen als normale Buttons unter dem Raster */
html:not(.job-live) .job {
  position: static;
  display: block;
  width: auto;
  max-width: 26.25rem;
  margin: 1.875rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
}
html:not(.job-live) .job-title,
html:not(.job-live) .job-cancel { display: none; }

@media (min-width: 56.25rem) {
  .btn-job { width: fit-content; max-width: none; margin-top: 2.375rem; padding-inline: 2rem; }  /* 38 px unter dem Raster */
  html:not(.job-live) .job { margin-top: 2.375rem; }
  .job-live .job { width: 26.25rem; margin: auto; border-radius: 1.5rem; }
  .job-live .job-box { padding-bottom: 1.5rem; }
}
@media (min-width: 56.25rem) and (prefers-reduced-motion: no-preference) {
  .job-live .job[open] { animation: job-fade .2s ease-out; }
  .job-live .job[open]::backdrop { animation-duration: .2s; }
}

/* ---------- Das musst du mitbringen?: vier schlichte Zeilen zwischen feinen Linien, darunter ein Schlusssatz ---------- */

.traits {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e5e5e5;
}
.traits li {
  display: grid;
  align-content: center;
  padding-block: .875rem;   /* Zeile ca. 70 px */
  border-bottom: 1px solid #e5e5e5;
}
.trait {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.traits p { line-height: 1.35; color: var(--muted); }
.hint { max-width: 35rem; margin-top: 1.5rem; }
@media (min-width: 56.25rem) {
  .traits li { grid-template-columns: 13.75rem 1fr; align-items: baseline; padding-block: 1.125rem; }  /* Zeile ca. 58 px */
}

/* ---------- Du willst starten?: flache Karten, Nummer links, Pfeil zur nächsten ---------- */

.steps {
  --g: 4rem;        /* Abstand zwischen den Karten: 64 px */
  --arrow: 2.5rem;  /* Pfeillänge: 40 px, mittig im Abstand → 12 px Luft oben und unten */
  display: grid;
  gap: var(--g);
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  grid-template-areas: "no title" "text text" "tag tag";
  column-gap: .75rem;
  align-items: center;
  padding: .75rem .875rem .875rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}
.step-no {
  grid-area: no;
  justify-self: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--ls);
  color: var(--cyan);
}
.step h3 {
  grid-area: title;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);  /* "KENNENLERNEN." = 10,8 em passt ab 320 px */
  line-height: 1.05;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}
.step p { grid-area: text; margin: .375rem 0 .5rem; line-height: 1.4; color: var(--muted); }
.tag {
  grid-area: tag;
  justify-self: start;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--mist);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
}
.step-goal { background: var(--cyan); }
.step-goal .step-no, .step-goal p { color: var(--ink); }

/* Pfeil zur nächsten Karte: img/pfeil.svg ist das unveränderte Original aus svgs/ (zeigt nach oben), in seinen eigenen Farben.
   Per CSS nur Größe (proportional) und Drehung. Das Kästchen drumherum zentriert ihn: mobil mittig im Abstand, unter der Nummer. */
.step-arrow {
  position: absolute;
  top: calc(100% + 2px + (var(--g) - var(--arrow)) / 2);
  left: calc(.875rem + 1.25rem - var(--arrow) / 2);  /* Mitte der Nummernspalte */
  display: flex;
  justify-content: center;
  width: var(--arrow);
  height: var(--arrow);
}
.step-arrow img { display: block; width: auto; height: var(--arrow); transform: rotate(180deg); }

/* Ab 1024 px: drei Karten in einer Reihe, Pfeile nach rechts (darunter untereinander wie mobil – bei 900 px wäre
   "KENNENLERNEN." breiter als eine Drittel-Spalte). 1fr statt minmax(0, 1fr): eine Spalte wird nie schmaler als ihr
   längstes Wort, bei 1024 px ist die mittlere deshalb etwas breiter, ab ca. 1060 px sind alle gleich. */
@media (min-width: 64rem) {
  .steps { --arrow: 2.75rem; grid-template-columns: repeat(3, 1fr); }
  .step { display: flex; flex-direction: column; align-items: stretch; padding: 1rem 1rem 1.125rem; }
  .step-no { margin-bottom: .375rem; }
  .step p { margin: .375rem 0 .75rem; }
  .tag { align-self: flex-start; margin-top: auto; }
  .step-arrow { top: calc(50% - var(--arrow) / 2); left: calc(100% + 2px + (var(--g) - var(--arrow)) / 2); }
  .step-arrow img { transform: rotate(90deg); }
  .step:nth-child(2) { --delay: 60ms; }
  .step:nth-child(3) { --delay: 120ms; }
}

/* Karten von "Du willst starten?": kurz und früh einblenden, damit nie Lücken sichtbar sind */
@media (prefers-reduced-motion: no-preference) {
  .js .steps .reveal { transform: translateY(.375rem); transition: opacity .3s ease var(--delay, 0s), transform .3s ease var(--delay, 0s); }
  .js .steps .reveal.is-in { transform: none; }
}

/* Kontakt-Buttons unter "Du willst starten?" – Ziel von #kontakt. Gleicher Abstand zur letzten Karte und zur Footer-Linie. */
.cta-steps { margin-top: var(--buttons-gap); scroll-margin-top: 2rem; }
main > .section:last-child { padding-bottom: var(--buttons-gap); }
@media (min-width: 56.25rem) {
  :root { --buttons-gap: 4rem; }
}

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

.footer { border-top: 2px solid var(--ink); }
.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 2rem;
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.footer .logo { height: 2rem; }
.footer p { flex: 1 1 16rem; font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.footer nav { display: flex; gap: 1.5rem; }
.footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  font-size: var(--fs-small);
  font-weight: 600;
  text-underline-offset: .2em;
}

/* ---------- Rechtliche Seiten & 404 ---------- */

.legal { padding-block: clamp(2.5rem, 8vw, 5rem) clamp(4rem, 10vw, 6rem); }
.legal > * { max-width: 44rem; }
.legal h1 {
  margin: 0 0 2rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: var(--ls);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.legal h2 { margin: 2.5rem 0 .5rem; font-size: var(--fs-h3); line-height: 1.3; }
.legal h3 { margin: 1.5rem 0 .25rem; font-size: var(--fs-body); }
.legal p, .legal ul { margin: 0 0 .875rem; }
.legal ul { padding-left: 1.25rem; }
.legal address { font-style: normal; }
.back {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  margin-bottom: 1rem;
  font-weight: 600;
  text-underline-offset: .2em;
}
.todo {
  padding: .05em .35em;
  border-radius: .25rem;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (min-width: 48rem) {
  .logo { height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .slot, .track, .btn { transition: none; }
}