/* Bewerbungsseite · sachlich und klar wie ein gutes Jobboard.
   Flache weiße Tafeln auf hellem Grund, feine Trennlinien, Angaben als Zeilen, kaum Farbe.
   Oben sofort die Bewerbung, eine Frage nach der anderen. Darunter das Video, dann die Stelle und die Firma.
   Desktop: Bewerbung und Inhalt links, Video rechts mitlaufend.
   Die Kundenfarbe kommt als --marke vom Server und steckt nur im Absenden-Knopf und im Fortschritt. */

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --schrift: var(--system);
  --bg: #f4f4f4;
  --karte: #ffffff;
  --text: #111111;
  --leise: #6b6b6b;
  --linie: #e7e7e7;
  --linie-stark: #d6d6d6;
  --feld: #ffffff;
  --feld-linie: #d6d6d6;
  --akzent: var(--marke-hell);
  --fehler: #c8102e;
  --radius: 14px;
  --radius-klein: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
.s-instrument { --schrift: "Instrument Sans", var(--system); }
.s-jakarta { --schrift: "Plus Jakarta Sans", var(--system); }

.v-kraft {
  color-scheme: dark;
  --bg: #0b0b0b;
  --karte: #151515;
  --text: #f2f2f2;
  --leise: #9a9a9a;
  --linie: #262626;
  --linie-stark: #353535;
  --feld: #1b1b1b;
  --feld-linie: #353535;
  --akzent: var(--marke-dunkel);
  --fehler: #ff6961;
}
.v-farbe {
  --bg: #f1f0ee;
  --bg: color-mix(in oklab, var(--marke) 6%, #f4f4f4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--schrift); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.intro-laeuft { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sprung {
  position: absolute; left: -9999px; top: 12px; z-index: 80;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 600;
}
.sprung:focus { left: 12px; }

/* ---------- Intro: kurz das Logo des Vermittlers (HeinsApp) ---------- */
.intro { display: none; }
.js .intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--vermittler, #111); color: #fff;
  transition: opacity 420ms ease, visibility 0s linear 420ms;
}
.intro img { width: min(58vw, 300px); height: auto; animation: intro-rein 700ms var(--ease-out) both; }
.intro p {
  position: absolute; left: 0; right: 0; bottom: calc(44px + env(safe-area-inset-bottom));
  margin: 0; text-align: center; font-family: var(--schrift); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; opacity: 0.85;
  animation: intro-rein 700ms 120ms var(--ease-out) both;
}
.intro.weg { opacity: 0; visibility: hidden; }
@keyframes intro-rein { from { opacity: 0; transform: scale(0.95); } }

/* ---------- Knöpfe ---------- */
.knopf {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: var(--radius-klein);
  font: 600 16px/1 var(--schrift); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease-out), filter 160ms ease, opacity 200ms ease;
}
.knopf:active { transform: scale(0.98); }
.knopf[disabled] { opacity: 0.55; cursor: progress; }
.knopf-marke { background: var(--marke); color: var(--auf-marke); }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { filter: brightness(1.08); }
}

/* Kleine Knöpfe der Übersichtsseite */
.pille {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text);
  font: 500 14px/1 var(--schrift); text-decoration: none; white-space: nowrap;
}
.pille-voll { background: var(--text); color: var(--karte); border-color: var(--text); }

/* ---------- Kopf ---------- */
.kopf {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; height: 60px; padding: 0 20px;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--linie);
}
.kopf-logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.kopf-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; object-position: left center; }
.kopf-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.kopf-bearbeiten {
  margin-left: auto; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--linie-stark); background: var(--karte); color: var(--text); text-decoration: none;
  transition: transform 150ms ease;
}
.kopf-bearbeiten:focus-visible { outline: 2px solid var(--marke); outline-offset: 2px; }
.kopf-bearbeiten:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .kopf-bearbeiten:hover { border-color: var(--text); }
}
.logo-chip { display: inline-flex; padding: 5px 9px; border-radius: 8px; background: #fff; }
.logo-chip img { height: 22px; }

/* ---------- Oben: Titel, Eckdaten, Bewerbung ---------- */
.seite { padding: 0 16px; }
.start-links { padding-top: 26px; }
.titel {
  margin: 0 2px 14px; overflow-wrap: break-word; hyphens: manual;
  font-size: clamp(2.1rem, 10vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 600;
}
.titel-m { font-size: clamp(1.85rem, 8vw, 2.4rem); }
.titel-l { font-size: clamp(1.55rem, 6.4vw, 2rem); }
.mwd { font-size: max(0.38em, 14px); font-weight: 500; letter-spacing: 0; color: var(--leise); white-space: nowrap; }
.titel-zeile { margin: 0 2px; font-size: 16px; color: var(--leise); }

/* Eckdaten als kleine umrandete Etiketten */
.etiketten { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 2px; padding: 0; }
.etiketten li {
  padding: 6px 9px 5px; border: 1px solid var(--linie-stark); border-radius: 6px; background: var(--karte);
  font-size: 12px; line-height: 1.2; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase;
}
.etiketten + .karte, .titel-zeile + .karte { margin-top: 22px; }

/* Die Bewerbung: Tafel mit Kopfzeile, Fortschritt als Linie und Fußzeile */
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.karte-kopf { display: none; }
.js .karte-kopf { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px; }
.karte-titel { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.zurueck {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 0; margin: 0; border: 0; background: none;
  color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
}
.zurueck.weg { display: none; }
.zurueck:not(.weg) + .karte-titel { display: none; }
.schritt-zahl { margin-left: auto; font-size: 13px; color: var(--leise); font-variant-numeric: tabular-nums; }
.balken { display: none; }
.js .balken { display: block; height: 2px; background: var(--linie); }
.balken i { display: block; height: 100%; background: var(--marke); transform-origin: left; transform: scaleX(0); transition: transform 400ms var(--ease-out); }
.karte-inhalt { padding: 24px 20px 22px; }
.karte-fuss { display: none; }
.js .karte-fuss { display: block; margin-top: 22px; }
.karte-unten {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 13px 20px;
  border-top: 1px solid var(--linie); font-size: 14px; color: var(--leise);
}
.karte-unten img, .initialen.klein { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; font-size: 11px; }

.schritt { border: 0; margin: 0; padding: 0; min-width: 0; }
.schritt + .schritt { margin-top: 34px; }
.js .schritt { display: none; }
.js .schritt + .schritt { margin-top: 0; }
.js .schritt.aktiv { display: block; animation: schritt-rein 240ms var(--ease-out) both; }
.js .schritt.aktiv.zurueck-rein { animation-name: schritt-zurueck; }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(10px); } }
@keyframes schritt-zurueck { from { opacity: 0; transform: translateX(-10px); } }
.schritt-frage {
  display: block; padding: 0; margin: 0 0 18px; outline: none;
  font-size: 23px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600;
}
.schritt-sub { margin: -8px 0 18px; font-size: 15px; color: var(--leise); }
.schritt-fuer { margin: -10px 0 16px; font-size: 14px; color: var(--leise); }
.js .schritt-fuer { display: none; }

/* Antworten: schlichte umrandete Knöpfe, ausgewählt in Schwarz */
.antworten { display: flex; flex-wrap: wrap; gap: 8px; }
.antwort { position: relative; }
.antwort input { position: absolute; inset: 0; opacity: 0; margin: 0; pointer-events: none; }
.antwort span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--linie-stark); border-radius: var(--radius-klein); background: var(--karte);
  font-size: 15.5px; font-weight: 500; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out);
}
.antwort span:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .antwort span:hover { border-color: var(--text); } }
.antwort input:checked + span { background: var(--text); border-color: var(--text); color: var(--karte); }
.antwort input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
.schritt[aria-invalid="true"] .antwort span { border-color: var(--fehler); }

/* Eingabefelder mit Beschriftung im Feld */
.feld { position: relative; margin: 0 0 10px; }
.feld input {
  width: 100%; height: 54px; padding: 21px 14px 6px;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--feld); border: 1px solid var(--feld-linie); border-radius: var(--radius-klein);
  appearance: none; -webkit-appearance: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.feld label {
  position: absolute; left: 15px; top: 16px; pointer-events: none;
  font-size: 16px; color: var(--leise); transform-origin: left top;
  transition: transform 150ms var(--ease-out);
}
.feld input:focus + label, .feld input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(0.75); }
.feld input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklab, var(--text) 10%, transparent); }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.feld-fehler { margin: 7px 2px 0; font-size: 13.5px; font-weight: 500; color: var(--fehler); }
.form-fehler { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-klein); font-size: 15px; color: var(--fehler); border: 1px solid color-mix(in oklab, var(--fehler) 35%, transparent); }

/* Lebenslauf: hierher ziehen oder auswählen */
.ablage { position: relative; margin-top: 2px; }
.datei-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.ablage-feld {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; text-align: left;
  padding: 14px 15px; border: 1px solid var(--feld-linie); border-radius: var(--radius-klein); background: var(--feld);
  color: var(--leise); cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ablage-feld .icon { color: var(--text); }
.ablage-gross { font-size: 15.5px; color: var(--text); }
.ablage-gross strong { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ablage-frei { color: var(--leise); }
.ablage-feld .ablage-klein { flex-basis: 100%; padding-left: 28px; }
.ablage-klein { font-size: 13px; }
.ablage.ueber .ablage-feld { border-color: var(--text); background: color-mix(in oklab, var(--text) 4%, var(--feld)); }
.datei-input:focus-visible + .ablage-feld { outline: 2px solid var(--text); outline-offset: 3px; }
.datei-input[aria-invalid="true"] + .ablage-feld { border-color: var(--fehler); }
@media (hover: none) { .nur-zeiger { display: none; } }
.datei-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.datei-liste li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--linie); border-radius: var(--radius-klein); }
.datei-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 15px; }
.datei-groesse { flex: none; font-size: 13px; color: var(--leise); }
.datei-weg { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--leise); cursor: pointer; }

.feld-check { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; margin: 18px 0 4px; }
.feld-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--text); cursor: pointer; }
.feld-check label { margin: 0; font-size: 14px; line-height: 1.45; color: var(--leise); cursor: pointer; }
.feld-check .feld-fehler { grid-column: 2; margin-left: 0; }
.senden { margin-top: 20px; }

.danke { outline: none; text-align: center; padding: 8px 0 4px; }
.danke-haken { width: 56px; height: 56px; margin: 4px auto 18px; }
.danke-haken circle { fill: var(--marke); }
.danke-haken path { fill: none; stroke: var(--auf-marke); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: haken 500ms 150ms var(--ease-out) forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }
.danke .schritt-sub { margin: -6px 0 0; }
.danke-dev { margin-top: 14px; font-size: 14px; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Video unter der Bewerbung ---------- */
.video-bereich { padding-top: 16px; }
.story {
  position: relative; margin: 0 auto; width: min(100%, calc(84vh * 9 / 16)); width: min(100%, calc(84svh * 9 / 16));
  aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #000; isolation: isolate;
}
.story-leer { display: grid; place-items: center; padding: 24px; text-align: center; background: #1b1b1b; color: rgba(255, 255, 255, 0.55); font-size: 15px; }
.story-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.story-video.aktiv { opacity: 1; pointer-events: auto; }
.story-oben {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
  padding: 10px 12px 26px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}
.story-oben button { pointer-events: auto; }
.story-segmente { display: flex; gap: 4px; }
.story-segmente span { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.32); overflow: hidden; }
.story-segmente i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.story-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.story-name { color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); }
.glas {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 8px;
  background: rgba(0, 0, 0, 0.45); color: #fff; font: 600 13px/1 var(--schrift); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform 160ms var(--ease-out);
}
.glas:active { transform: scale(0.96); }
.glas > span { display: inline-flex; align-items: center; gap: 6px; }
.ton { display: none; }
.js .ton { display: inline-flex; }
.ton .ton-an, .ton[aria-pressed="true"] .ton-aus { display: none; }
.ton[aria-pressed="true"] .ton-an { display: inline-flex; }
.story-tippen { display: none; }
.js .story-tippen { display: block; position: absolute; top: 0; bottom: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; }
.story-tippen.links { left: 0; width: 30%; }
.story-tippen.rechts { right: 0; width: 70%; }
.story-tippen.ganz { left: 0; right: 0; }
.story-tippen:focus-visible { outline-offset: -4px; }
.story-pause {
  position: absolute; inset: 0; z-index: 2; margin: auto; width: 64px; height: 64px; padding-left: 4px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none; color: #fff;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(0.94); transition: opacity 200ms ease, transform 200ms var(--ease-out);
}
.story.pausiert .story-pause { opacity: 1; transform: none; }

/* ---------- Tafeln: Stelle, Firma, Stellenliste ---------- */
.tafel { margin-top: 16px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.tafel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--linie); }
.tafel-kopf h2 { margin: 0; font-size: 19px; line-height: 1.25; letter-spacing: -0.015em; font-weight: 600; }
.tafel-text { padding: 18px 20px; }
.tafel-text p { margin: 0; font-size: 16px; line-height: 1.55; }
.tafel-unter { margin: 0; padding: 18px 20px 0; border-top: 1px solid var(--linie); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.tafel-kopf + .tafel-unter, .tafel-kopf + .zahlen, .tafel-kopf + .zeilen > div:first-child { border-top: 0; }

/* Angaben als Zeilen: links die Bezeichnung, rechts der Wert */
.zeilen { margin: 0; }
.zeilen div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; border-top: 1px solid var(--linie); }
.zeilen dt { flex: none; font-weight: 600; font-size: 15px; }
.zeilen dd { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; text-align: right; font-size: 15px; color: var(--leise); }
.zeilen dd img { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; }
.zeilen dd a { color: var(--text); text-decoration: underline; overflow-wrap: anywhere; }

/* „Was du bekommst“: Linie mit Halten */
.strecke { list-style: none; margin: 0; padding: 18px 20px 20px; }
.strecke li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: 14px; padding-bottom: 18px; }
.strecke li:last-child { padding-bottom: 0; }
.strecke li::before { content: ""; position: absolute; left: 15.5px; top: 32px; bottom: 0; width: 1px; background: var(--linie-stark); }
.strecke li:last-child::before { display: none; }
.strecke-icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--karte); border: 1px solid var(--linie-stark); color: var(--text);
}
.strecke li:last-child .strecke-icon { background: var(--text); border-color: var(--text); color: var(--karte); }
.strecke-text { padding-top: 5px; min-width: 0; }
.strecke-text strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.strecke-text span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--leise); }

/* Zahlen über die Firma: Felder nebeneinander, getrennt durch Linien */
.zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--linie); }
.zahlen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; padding: 18px 20px; }
.zahlen div + div { border-left: 1px solid var(--linie); }
.zahlen dd { margin: 0; font-size: 36px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.zahlen dt { margin-top: 8px; font-size: 14px; line-height: 1.3; color: var(--leise); }

.werte { list-style: none; margin: 0; padding: 12px 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.werte li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.4; }
.werte .icon { flex: none; margin-top: 1px; color: var(--leise); }

/* Mehrere Stellen */
.stellen { list-style: none; margin: 0; padding: 0; }
.stellen li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.stellen li + li { border-top: 1px solid var(--linie); }
.stelle-text { min-width: 0; }
.stellen h3 { margin: 0 0 3px; font-size: 16.5px; line-height: 1.3; font-weight: 600; }
.leise { margin: 0; color: var(--leise); font-size: 14px; }
.stelle-gehalt { margin: 3px 0 0; font-size: 14px; font-weight: 500; }
.stelle-los { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; font-weight: 600; text-decoration: underline; }

.initialen { display: grid; place-items: center; background: var(--text); color: var(--karte); font-weight: 600; }

.fuss { margin-top: 28px; padding: 20px 2px calc(96px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); font-size: 12.5px; color: var(--leise); display: flex; flex-direction: column; gap: 6px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss nav a { color: var(--text); text-decoration: none; padding: 4px 0; font-size: 13px; }
.fuss p { margin: 0; }
.agentur { text-decoration: none; }

/* Leiste unten: erscheint, sobald die Bewerbung aus dem Bild ist */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--linie);
  transform: translateY(110%); transition: transform 280ms var(--ease-out);
}
.leiste.zeigen { transform: none; }

/* Demo-Leiste (nur Demo-Kunde) */
.demo-leiste {
  display: flex; align-items: center; gap: 16px; overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  padding: 8px 16px; background: #111; color: #f2f2f2;
  font-family: var(--schrift); font-size: 12.5px; line-height: 1.3;
}
.demo-leiste::-webkit-scrollbar { display: none; }
.demo-gruppe { display: inline-flex; align-items: center; gap: 5px; }
.demo-label { opacity: 0.55; margin-right: 3px; }
.demo-pille { color: #f2f2f2; text-decoration: none; padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.25); }
.demo-pille[aria-current="true"] { background: #fff; color: #111; border-color: #fff; }

/* ---------- Desktop: Bewerbung und Inhalt links, Video rechts mitlaufend ---------- */
@media (min-width: 1024px) {
  html { scroll-padding-top: 96px; }
  .kopf { height: 72px; padding: 0 max(40px, calc((100vw - 1120px) / 2)); }
  .kopf-logo img { height: 46px; }
  .demo-leiste { padding: 8px max(40px, calc((100vw - 1120px) / 2)); }
  .leiste { display: none; }
  .seite {
    display: grid; grid-template-columns: minmax(0, 620px) auto; justify-content: space-between; column-gap: 64px;
    max-width: 1120px; margin: 0 auto; padding: 52px 40px 0;
  }
  .start { display: contents; }
  .start-links { grid-column: 1; grid-row: 1; padding-top: 0; }
  .mehr { grid-column: 1; grid-row: 2; }
  .start-rechts { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 96px; align-self: start; }
  .titel { font-size: 3.6rem; margin-bottom: 16px; }
  .titel-m { font-size: 3rem; }
  .titel-l { font-size: 2.5rem; }
  .mwd { font-size: 0.3em; }
  .etiketten + .karte, .titel-zeile + .karte { margin-top: 28px; }
  .js .karte-kopf { padding: 0 28px; min-height: 56px; }
  .karte-inhalt { padding: 30px 28px 28px; }
  .karte-unten { padding: 14px 28px; }
  .schritt-frage { font-size: 27px; }
  .video-bereich { padding-top: 0; }
  .story { width: auto; height: min(calc(100vh - 140px), 760px); }
  .tafel { margin-top: 20px; }
  .tafel-kopf, .tafel-text, .zeilen div, .zahlen div, .stellen li { padding-left: 28px; padding-right: 28px; }
  .tafel-unter { padding-left: 28px; padding-right: 28px; }
  .strecke, .werte { padding-left: 28px; padding-right: 28px; }
  .zahlen dd { font-size: 42px; }
  .fuss { padding-bottom: 40px; flex-direction: row; justify-content: space-between; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-property: opacity, background-color, color, border-color !important; }
}

/* ---------- Einfache Seiten (Übersicht, 404, Postausgang) ---------- */
.einfach { background: #fafafa; }
.einfach-inhalt { max-width: 760px; margin: 0 auto; padding: 40px 20px 80px; }
.einfach-inhalt h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -0.025em; }
.einfach-inhalt h2 { font-size: 1.3rem; margin-top: 32px; }
.uebersicht { list-style: none; padding: 0; margin: 20px 0 0; }
.uebersicht > li { padding: 16px 0; border-top: 1px solid var(--linie); }
.uebersicht-pillen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mail-kopf { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0 20px; }
.mail-kopf th { text-align: left; color: var(--leise); font-weight: 500; padding: 6px 16px 6px 0; vertical-align: top; white-space: nowrap; }
.mail-kopf td { padding: 6px 0; word-break: break-word; }
.mail-vorschau { width: 100%; height: 680px; border: 1px solid var(--linie); border-radius: 12px; background: #fff; }
.mail-text { white-space: pre-wrap; background: #fff; border: 1px solid var(--linie); border-radius: 12px; padding: 16px; font-size: 14px; }