/* Bewerbungsportal NETZkultur (bewerbung.netzkultur.de) im Corporate Design der Website www.netzkultur.de
   (wiki/netzkultur/design.md). Tokens, Schrift, Buttons, Felder, Kopfleiste und Footer stammen aus
   landingpages/netzkultur/css/style.css (eigene Kopie: Projekte bleiben getrennt, AGENTS.md). Neu: Schritte mit
   Fortschritt, Formularkarte, Ablage für Unterlagen, Ergebnis-Karten. Logik: js/bewerbung.js. Farben fest im CD
   (die Markenfarben der .env gehörten zum alten Frontend).
   Bewegung nur ohne „Bewegung reduzieren“ und endlich; einzige Ausnahme ist der Balken beim Senden (zeigt Arbeit an). */

/* Schrift Poppins, selbst gehostet, SIL OFL (assets/fonts/OFL.txt): Fließtext 400, Hervorhebungen und Buttons 600,
   Überschriften 700; kursiv für „kultur“ in „NETZkultur“ */
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --primary: #004994;
  --secondary: #002555;
  --accent: #009ee3;
  --accent-700: #0074ad; /* Akzentblau als Schrift auf Weiß, ≥ 4,5:1 */
  --accent-50: #e5f5fc;
  --bg: #f5f6fb;
  --tile: #ffffff;
  --tile-2: #dfe8f7;
  --tile-hell: #eef3fb;
  --ink: #000000;
  --text: #1a1f2b;
  --muted: #4b5568;
  --line: #e3e8f2;
  --feld: #d3dceb;
  --feld-hover: #b4c3dc;
  --rot: #c62828;
  --white: #fff;
  --hell: #bfe6f8;
  --gradient: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
  --gradient-diag: linear-gradient(120deg, var(--primary) 0%, var(--accent) 100%);
  --kopf-verlauf:
    radial-gradient(50% 60% at 90% 25%, rgba(0, 158, 227, .16), transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(0, 73, 148, .10), transparent 70%),
    linear-gradient(180deg, #e9eef9 0%, var(--bg) 85%);

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;
  --shadow-s: 0 1px 2px rgba(0, 38, 80, .06), 0 4px 14px -6px rgba(0, 38, 80, .14);
  --shadow: 0 2px 6px rgba(0, 38, 80, .05), 0 14px 32px -14px rgba(0, 38, 80, .22);
  --shadow-l: 0 4px 12px rgba(0, 38, 80, .06), 0 28px 56px -24px rgba(0, 38, 80, .36);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 64px;
  --header-gap: 10px;
}

/* ---------- Basis ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; color: var(--ink); line-height: 1.12; letter-spacing: .01em; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--tile-2); color: var(--ink); }

/* „kultur“ in „NETZkultur“ kursiv wie im Logo: NETZ<span class="kultur">kultur</span> */
.kultur { font-style: italic; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.nb { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .75rem 1rem; border-radius: var(--radius-s);
  background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* Fokusring in Primärblau, auf Blau und Verlauf weiß */
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
:is(.site-header__inner, .site-footer) :focus-visible { outline-color: var(--white); }
/* Sprungziele (Formular, Abschnitte, Ergebnis-Karten) bekommen den Fokus nur für Screenreader und Tastatur-Reihenfolge */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Buttons und Links ---------- */

.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--h); padding: 0 1.4em;
  border: 1.5px solid transparent; border-radius: 8px;
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s, border-color .2s, color .2s, opacity .2s;
}
.btn .icon { width: .95em; height: .95em; transition: transform .2s var(--ease); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn--cta { background: var(--accent); color: var(--white); box-shadow: 0 10px 22px -12px rgba(0, 158, 227, .9); }
.btn--cta:hover { background: #008bc8; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(0, 158, 227, .95); }
.btn--cta:active { transform: none; }
.btn--cta:disabled { cursor: progress; opacity: .75; transform: none; }
.btn--glass { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .9); color: var(--white); }
.btn--glass:hover { background: rgba(255, 255, 255, .3); }
.btn--lg { --h: 56px; padding: 0 1.6em; font-size: 1.0625rem; }
.btn--sm { --h: 44px; padding: 0 1.1em; font-size: .9375rem; }

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; margin-top: 2rem; }

.more-link { color: var(--primary); font-weight: 700; text-decoration: none; }
.more-link .icon { width: .9em; height: .9em; margin-left: .45em; vertical-align: -.1em; transition: transform .2s var(--ease); }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-link:hover .icon { transform: translateX(3px); }

/* ---------- Kopfleiste: schwebend in Primärblau wie auf www.netzkultur.de, ohne Menü (Formularseite) ---------- */

.site-header { position: sticky; top: 0; z-index: 50; padding: var(--header-gap) var(--header-gap) 0; }
.site-header__inner {
  display: flex; align-items: center; gap: .75rem;
  height: var(--header-h); padding: 0 clamp(.875rem, 3vw, 1.75rem);
  border-radius: 14px; background: var(--primary); color: var(--white);
  box-shadow: 0 10px 30px -18px rgba(0, 38, 80, .8);
}
.site-header__logo { display: inline-flex; flex: none; margin-right: auto; color: var(--white); border-radius: 6px; }
.logo { display: block; width: 150px; height: auto; aspect-ratio: 333.5 / 44; overflow: visible; }
.kopf-tel .icon { width: 1rem; height: 1rem; }
.kopf-tel:hover .icon:last-child { transform: none; }

/* ---------- Seitenkopf mit Formular ---------- */

.bewerbung {
  position: relative; isolation: isolate;
  margin-top: calc(-1 * (var(--header-h) + var(--header-gap)));
  padding: calc(var(--header-h) + var(--header-gap) + clamp(1.75rem, 5vw, 3.5rem)) 0 clamp(3.5rem, 8vw, 6rem);
  background: var(--kopf-verlauf);
}
.bewerbung__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: start; }
.bewerbung__titel { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem); font-weight: 700; line-height: 1.08; letter-spacing: .005em; }
/* Zweiter Teil der H1 (Stelle) in eigener Zeile, gleicher Schnitt, Verlauf als Schriftfarbe wie auf www.netzkultur.de;
   Innenabstand unten, damit Unterlängen im Verlauf bleiben */
.bewerbung__titel .light { display: block; width: fit-content; max-width: 100%; margin-top: .06em; margin-bottom: -.14em; padding: 0 .04em .22em 0; color: var(--primary); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .bewerbung__titel .light { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
/* Nur sehr lange Wörter trennen (sonst macht text-wrap: balance aus „Kundenbetreuer“ „Kundenbe-treuer“) */
.bewerbung__titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 16 6 6; }
/* Solange die Stelle lädt: Platzhalter-Balken statt Text */
.bewerbung__titel .light.is-laden { width: min(100%, 11em); height: 1.1em; padding: 0; margin-top: .2em; margin-bottom: .1em; border-radius: 10px; background: linear-gradient(90deg, var(--tile-2), #eef3fb, var(--tile-2)) 0 0 / 200% 100%; color: transparent; }
.bewerbung__lead { max-width: 34em; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); }
/* Lange Stellentitel (über 32 Zeichen, z. B. die Ausbildung) kleiner, damit die H1 nicht sechs Zeilen hoch wird */
.bewerbung__titel .light.is-lang { font-size: .64em; line-height: 1.18; }
.bewerbung__anzeige { display: inline-block; margin-top: 1rem; }

/* ---------- Schritte: was erledigt ist, bekommt einen Haken, der Balken füllt sich (js/bewerbung.js) ---------- */

.schritte { margin-top: clamp(1.75rem, 4vw, 2.25rem); padding: 1rem; border-radius: var(--radius); background: var(--tile); box-shadow: var(--shadow); }
.schritte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .25rem .5rem .75rem; }
.schritte__titel { color: var(--ink); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.schritte__zahl { padding: .2rem .7rem; border-radius: 99px; background: var(--tile-2); color: var(--primary); font-size: .8125rem; font-weight: 700; line-height: 1.5; white-space: nowrap; transition: background-color .3s, color .3s; }
.schritte.is-fertig .schritte__zahl { background: var(--gradient); color: var(--white); }
.schritte__liste { display: grid; gap: .25rem; }
.schritt a { display: flex; align-items: center; gap: .9rem; min-height: 44px; padding: .65rem .6rem; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .2s; }
.schritt a:hover { background: var(--tile-hell); }
.schritt__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--tile-2); color: var(--primary); transition: background-color .3s, color .3s; }
.schritt__icon .icon { width: 18px; height: 18px; }
.schritt__text { display: grid; min-width: 0; }
.schritt__text strong { color: var(--ink); font-size: 1rem; font-weight: 700; line-height: 1.3; }
.schritt__text small { color: var(--muted); font-size: .875rem; line-height: 1.45; }
.schritt__haken { display: grid; place-items: center; width: 26px; height: 26px; flex: none; margin-left: auto; border: 2px solid #c9d6ec; border-radius: 50%; color: transparent; transition: background-color .3s, border-color .3s, color .3s; }
.schritt__haken .icon { width: 12px; height: 12px; }
.schritt.is-erledigt .schritt__icon { background: var(--gradient-diag); color: var(--white); }
.schritt.is-erledigt .schritt__haken { border-color: var(--accent); background: var(--accent); color: var(--white); }
.schritte__balken { height: 8px; margin: .75rem .5rem .35rem; overflow: hidden; border-radius: 99px; background: var(--tile-2); }
.schritte__balken span { display: block; height: 100%; border-radius: inherit; background: var(--gradient); transform: scaleX(var(--anteil, 0)); transform-origin: left; transition: transform .6s var(--ease); }

/* Schmaler als 1024 px: die drei Schritte nebeneinander, nur Icon und Name, Haken an der Ecke des Icons */
@media (max-width: 1023.98px) {
  .schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .schritt a { position: relative; display: grid; justify-items: center; gap: .5rem; padding: .6rem .25rem; text-align: center; }
  .schritt__text small { display: none; }
  .schritt__text strong { font-size: .875rem; }
  .schritt__haken { position: absolute; top: .25rem; left: calc(50% + 12px); width: 22px; height: 22px; margin: 0; background: var(--white); }
  .schritt__haken .icon { width: 10px; height: 10px; }
  /* Offene Schritte ohne leeren Kreis: der Haken erscheint erst, wenn der Schritt erledigt ist */
  .schritt:not(.is-erledigt) .schritt__haken { opacity: 0; }
}

/* ---------- Formularkarte ---------- */

.bewerbung-form { padding: clamp(1.25rem, 4vw, 2.5rem); border-radius: var(--radius-l); background: var(--tile); box-shadow: var(--shadow-l); }
.bewerbung-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bewerbung-form__teil + .bewerbung-form__teil { margin-top: clamp(1.75rem, 4vw, 2.25rem); padding-top: clamp(1.75rem, 4vw, 2.25rem); border-top: 1px solid var(--line); }
/* Legende als Überschrift: float nimmt sie aus der Rahmenlinie des fieldset (sonst läuft die Trennlinie mittig durch).
   Den Abstand darunter trägt die Legende selbst, weil das Freistellen (clear) den oberen Rand des Folgeelements schluckt */
.bewerbung-form__titel { float: left; display: flex; align-items: center; gap: .75rem; width: 100%; margin-bottom: .6rem; padding: 0; color: var(--ink); font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); font-weight: 700; line-height: 1.3; }
.bewerbung-form__titel + * { clear: both; margin-top: 0; }
.bewerbung-form__titel + .bewerbung-form__grid { padding-top: .65rem; }
.bewerbung-form__nr { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--gradient-diag); color: var(--white); font-size: .9375rem; font-weight: 700; line-height: 1; }
.bewerbung-form__hinweis { margin-top: .6rem; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.bewerbung-form__grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
@media (min-width: 640px) {
  .bewerbung-form__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 1rem; }
  .bewerbung-form__grid > .field { grid-column: span 3; }
  .bewerbung-form__grid > .field--anrede { grid-column: 1 / span 3; }
  .bewerbung-form__grid > .field--anrede + .field { grid-column: 1 / span 3; }
  .bewerbung-form__grid > .field--voll { grid-column: 1 / -1; }
  .bewerbung-form__grid > .field--plz { grid-column: span 2; }
  .bewerbung-form__grid > .field--ort { grid-column: span 4; }
}
.bewerbung-form__pflicht { margin-top: 1rem; color: var(--muted); font-size: .8125rem; }

/* Felder wie im Formular „Beratung anfragen“ auf www.netzkultur.de */
.field { display: grid; gap: .35rem; align-content: start; }
.field label { color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.field__frei { color: var(--muted); font-weight: 400; }
.req { color: var(--accent-700); }
.field :is(input, select, textarea) {
  width: 100%; min-height: 50px; padding: 0 .95rem;
  border: 1.5px solid var(--feld); border-radius: 8px; background: var(--bg);
  font-size: 1rem; color: var(--ink);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field select {
  padding-right: 2.6rem; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23004994' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E") right 1rem center / 12px 12px no-repeat;
}
.field textarea { min-height: 8.5rem; padding: .8rem .95rem; line-height: 1.6; resize: vertical; }
.field :is(input, select, textarea):hover { border-color: var(--feld-hover); }
.field :is(input, select, textarea):focus { outline: none; border-color: var(--primary); background-color: var(--white); box-shadow: 0 0 0 4px rgba(0, 73, 148, .14); }
.field :is(input, textarea)[aria-invalid="true"] { border-color: var(--rot); box-shadow: 0 0 0 4px rgba(198, 40, 40, .12); }
.field__error { color: var(--rot); font-size: .8125rem; font-weight: 600; line-height: 1.45; text-wrap: balance; }
.field__error:empty { display: none; }

/* ---------- Ablage für Unterlagen: ganze Fläche ist das Label des Dateifelds, Ziehen und Ablegen per JS ---------- */

.ablage { position: relative; margin-top: 1.25rem; }
.ablage__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ablage__flaeche {
  display: grid; justify-items: center; gap: .3rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) 1.25rem;
  border: 2px dashed var(--feld-hover); border-radius: var(--radius); background: var(--bg);
  text-align: center; cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ablage__flaeche:hover, .ablage.is-drag .ablage__flaeche { border-color: var(--accent); background: var(--accent-50); }
.ablage__input:focus-visible + .ablage__flaeche { outline: 3px solid var(--primary); outline-offset: 3px; }
.ablage.is-fehler .ablage__flaeche { border-color: var(--rot); }
.ablage__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: .4rem; border-radius: 16px; background: var(--gradient-diag); color: var(--white); box-shadow: 0 10px 20px -10px rgba(0, 73, 148, .7); transition: translate .3s var(--ease); }
.ablage__icon .icon { width: 24px; height: 24px; }
.ablage.is-drag .ablage__icon { translate: 0 -4px; }
.ablage__titel { color: var(--ink); font-weight: 700; line-height: 1.4; }
.ablage__oder { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.ablage__knopf { color: var(--accent-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Ohne Maus (Handy, Tablet): kein „hierher ziehen“ */
@media (hover: none) {
  .ablage__titel--ziehen { display: none; }
}
@media (hover: hover) {
  .ablage__titel--tippen { display: none; }
}

.dateien { display: grid; gap: .5rem; margin-top: 1rem; }
.dateien:empty { display: none; }
.datei { display: flex; align-items: center; gap: .75rem; padding: .5rem .5rem .5rem .75rem; border-radius: 12px; background: var(--tile-hell); }
.datei__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--white); color: var(--primary); }
.datei__icon .icon { width: 15px; height: 15px; }
.datei__text { display: grid; flex: 1; min-width: 0; }
.datei__name { color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.datei__groesse { color: var(--muted); font-size: .8125rem; line-height: 1.4; }
.datei__weg { display: grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; transition: background-color .2s, color .2s; }
.datei__weg:hover { background: var(--white); color: var(--rot); }
.datei__weg .icon { width: 16px; height: 16px; }

.speicher { margin-top: .9rem; }
.speicher__balken { height: 6px; overflow: hidden; border-radius: 99px; background: var(--tile-2); }
.speicher__balken span { display: block; height: 100%; border-radius: inherit; background: var(--gradient); transform: scaleX(var(--anteil, 0)); transform-origin: left; transition: transform .4s var(--ease); }
.speicher__text { margin-top: .35rem; color: var(--muted); font-size: .8125rem; line-height: 1.5; }

.bewerbung-form__nachricht { margin-top: 1.5rem; }

/* ---------- Abschluss: Einwilligung, Senden, Status ---------- */

.einwilligung { margin-top: 1rem; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.check { position: relative; display: flex; align-items: flex-start; gap: .8rem; margin-top: 1.1rem; cursor: pointer; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check__box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-top: .05em; border: 2px solid var(--feld-hover); border-radius: 6px; background: var(--white); color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.check__box .icon { width: 13px; height: 13px; }
.check:hover .check__box { border-color: var(--primary); }
.check input:checked + .check__box { border-color: var(--accent); background: var(--accent); color: var(--white); }
.check input:focus-visible + .check__box { outline: 3px solid var(--primary); outline-offset: 3px; }
.check input[aria-invalid="true"] + .check__box { border-color: var(--rot); box-shadow: 0 0 0 4px rgba(198, 40, 40, .12); }
.check__text { color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.5; }
.check__text a { text-underline-offset: 3px; }
.check + .field__error { margin-top: .4rem; padding-left: calc(24px + .8rem); }

.bewerbung-form__senden { width: 100%; margin-top: 1.5rem; }
.bewerbung-form__senden .icon { width: 1em; height: 1em; }

.status:not(:empty) { margin-top: 1rem; padding: .8rem 1rem; border-radius: 8px; background: #fdecea; color: #8e1c1c; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.status a { color: inherit; text-underline-offset: 3px; }

/* Fortschritt beim Senden: Hochladen in Prozent, danach Speichern (Balken läuft, bis der Server antwortet) */
.senden { margin-top: 1rem; padding: .9rem 1rem; border-radius: 12px; background: var(--tile-hell); }
.senden__text { color: var(--ink); font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.senden__balken { height: 8px; margin-top: .6rem; overflow: hidden; border-radius: 99px; background: var(--tile-2); }
.senden__balken span { display: block; height: 100%; border-radius: inherit; background: var(--gradient); transform: scaleX(var(--anteil, .03)); transform-origin: left; transition: transform .3s linear; }

/* ---------- Ergebnis-Karten: Bewerbung gesendet, Stelle nicht gefunden ---------- */

.ergebnis { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.25rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem); border-radius: var(--radius-l); background: var(--tile); box-shadow: var(--shadow-l); text-align: center; }
.ergebnis__icon { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 1.5rem; border-radius: 50%; background: var(--gradient-diag); color: var(--white); box-shadow: 0 16px 30px -14px rgba(0, 73, 148, .8); }
.ergebnis__icon .icon { width: 40px; height: 40px; }
.ergebnis--fehler .ergebnis__icon { background: var(--tile-2); color: var(--primary); box-shadow: none; }
.ergebnis__titel { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem); }
.ergebnis__text { max-width: 32rem; margin: 1rem auto 0; color: var(--muted); font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); }
.ergebnis__text a { font-weight: 600; text-underline-offset: 3px; }

/* Konfetti in den CD-Blautönen, fliegt einmal hinter dem Haken hervor (wie die Feier in den Checklisten) */
.konfetti { position: absolute; left: 50%; top: calc(clamp(2.25rem, 6vw, 3.5rem) + 44px); z-index: -1; width: 0; height: 0; }
.konfetti i { position: absolute; left: -5px; top: -4px; width: 10px; height: 8px; border-radius: 2px; background: var(--accent); opacity: 0; }
.konfetti i:nth-child(3n) { background: var(--primary); }
.konfetti i:nth-child(3n + 1) { background: var(--hell); }
.konfetti i:nth-child(4n) { width: 7px; height: 7px; border-radius: 50%; }

/* ---------- Footer: Lippstadt-Skyline und Fläche im Verlauf #002555 → #004994 wie auf www.netzkultur.de ---------- */

.site-footer { --footer-verlauf: linear-gradient(90deg, #002555 0%, #004994 100%); color: rgba(255, 255, 255, .86); font-size: .9375rem; line-height: 1.6; }
.site-footer__skyline { position: relative; aspect-ratio: 2400 / 426; }
.site-footer__skyline img { display: none; }
.site-footer__skyline::before { content: ""; position: absolute; inset: auto 0 -2px; height: 3px; background: var(--footer-verlauf); }
.site-footer__skyline::after {
  content: ""; position: absolute; inset: 0 0 -2px; background: var(--footer-verlauf);
  -webkit-mask: url("../assets/img/skyline-lippstadt-2400.webp") center bottom / 100% auto no-repeat;
  mask: url("../assets/img/skyline-lippstadt-2400.webp") center bottom / 100% auto no-repeat;
}
.site-footer__main { position: relative; padding: clamp(2.5rem, 6vw, 3.5rem) 0 1.75rem; background: var(--footer-verlauf); }
.site-footer a { color: var(--white); }
.site-footer__grid { display: grid; gap: 2rem 3rem; }
.site-footer__marke { display: grid; gap: 1.1rem; align-content: start; }
.site-footer__logo { display: inline-flex; justify-self: start; color: var(--white); border-radius: 6px; }
.site-footer__logo .logo { width: 180px; }
.site-footer__slogan { color: var(--white); line-height: 1.45; }
.site-footer__slogan strong { color: var(--white); font-weight: 600; }
.site-footer__kontakt { display: grid; gap: .5rem; align-content: start; }
.site-footer__kontakt li { display: flex; align-items: flex-start; gap: .65rem; }
.site-footer__kontakt .icon { width: 1rem; height: 1rem; margin-top: .3em; color: var(--hell); }
.site-footer__kontakt a { position: relative; text-decoration: none; }
.site-footer__kontakt a::after { content: ""; position: absolute; inset: -10px -8px; }
.site-footer__kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__unten { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: clamp(2rem, 5vw, 3rem); padding-top: 1.25rem; }
.site-footer__unten::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255, 255, 255, .22); }
.site-footer__copy { color: rgba(255, 255, 255, .8); font-size: .875rem; }
.site-footer__recht { display: flex; flex-wrap: wrap; margin-inline: -.75rem; }
.site-footer__recht a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  padding: .45rem .75rem; border-radius: 7px;
  color: var(--tile-2); font-size: .875rem; font-weight: 600; text-decoration: none; transition: color .4s;
}
.site-footer__recht a::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, .24); opacity: 0; transition: opacity .4s; }
.site-footer__recht a:hover, .site-footer__recht a:focus-visible { color: var(--white); }
.site-footer__recht a:hover::before, .site-footer__recht a:focus-visible::before { opacity: 1; }

/* Cookie-Banner (Baustein bausteine/consent/) im CD von NETZkultur; erscheint nur, wenn ein Dienst eingebunden ist */
body .lpc, body .lpc-platzhalter { --lpc-primary: #004994; --lpc-accent: #009ee3; --lpc-bg: #eef3fb; --lpc-tile-2: #dfe8f7; font-family: var(--font); }

/* ---------- Bewegung (endlich; bei „Bewegung reduzieren“ nichts davon) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .bewerbung__titel .light.is-laden { animation: laden 1.4s ease-in-out infinite; }
  .schritt.is-erledigt .schritt__haken { animation: haken .5s var(--ease); }
  .datei { animation: datei-rein .35s var(--ease); }
  .senden__balken.is-warten span { animation: warten 1.6s ease-in-out infinite alternate; }
  .ergebnis.is-neu .ergebnis__icon { animation: ergebnis-icon .7s var(--ease) both; }
  .ergebnis.is-neu :is(.ergebnis__titel, .ergebnis__text, .knopfreihe) { animation: rein .6s var(--ease) both; }
  .ergebnis.is-neu .ergebnis__text { animation-delay: .1s; }
  .ergebnis.is-neu .knopfreihe { animation-delay: .2s; }
  .ergebnis.is-neu .konfetti i { animation: konfetti 1.3s cubic-bezier(.15, .7, .3, 1) .25s 1 both; }
}
@keyframes laden { to { background-position: -200% 0; } }
@keyframes haken { 0% { scale: .6; } 60% { scale: 1.15; } 100% { scale: 1; } }
@keyframes datei-rein { from { opacity: 0; translate: 0 8px; } }
@keyframes warten { from { transform: scaleX(.55); } to { transform: scaleX(.95); } }
@keyframes ergebnis-icon { 0% { opacity: 0; scale: .4; } 60% { opacity: 1; scale: 1.08; } 100% { scale: 1; } }
@keyframes rein { from { opacity: 0; translate: 0 14px; } }
@keyframes konfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)); }
}

/* ---------- Breakpoints ---------- */

@media (max-width: 479.98px) {
  .kopf-tel { padding: 0 .9em; }
  .kopf-tel__nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359.98px) {
  .site-header__inner { gap: .5rem; }
  .logo { width: 132px; }
}
@media (min-width: 768px) {
  :root { --header-h: 72px; }
  body { font-size: 1.125rem; }
  .logo { width: 178px; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .site-footer__recht { margin-left: auto; margin-right: -.75rem; }
}
@media (min-width: 1024px) {
  .bewerbung__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 4.5rem); }
  /* Links mitlaufend: Titel und Schritte bleiben beim Ausfüllen sichtbar */
  .bewerbung__intro { position: sticky; top: calc(var(--header-h) + var(--header-gap) + 1.75rem); }
  /* Die linke Spalte ist schmal: Titel so groß, dass „Kundenbetreuer“ ab 1024 px in eine Zeile passt */
  .bewerbung__titel { font-size: clamp(2.125rem, .5rem + 2.6vw, 3.125rem); }
}

@media print {
  .site-header, .site-footer__skyline { display: none !important; }
  .bewerbung, .site-footer__main { background: none !important; color: #000 !important; }
  .bewerbung__titel .light { background: none !important; color: var(--primary) !important; }
}