/* ==========================================================================
   Rettungsdienst Spree-Neiße GmbH — Bewerberportal
   Gleiches Muster wie das Website-Redesign 2026 (rettungsdienst-spn-redesign):
   Styleguide Rot #BC1010 · Blau #004799 · Navy #061746 · Dunkelblau #08236A,
   Barlow Semi Condensed (Headlines) · Open Sans (Body) · Roboto Condensed (Labels)
   ========================================================================== */

@import url('/assets/karriere/fonts/fonts.css');

:root {
  --rot: #BC1010;
  --rot-dunkel: #9a0d0d;
  --blau: #004799;
  --navy: #061746;
  --dunkel: #08236A;
  --tint: rgba(0, 71, 153, .10);
  --hairline: rgba(6, 23, 70, .10);
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --text: #061746;
  --text-soft: rgba(6, 23, 70, .72);
  --white-soft: rgba(255, 255, 255, .85);

  --f-head: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --f-body: 'Open Sans', 'Segoe UI', sans-serif;
  --f-label: 'Roboto Condensed', 'Arial Narrow', sans-serif;

  --ease: cubic-bezier(.32, .72, 0, 1);

  --radius: 22px;
  --radius-sm: 14px;
  --shadow-soft: 0 24px 60px -24px rgba(6, 23, 70, .22);
  --shadow-card: 0 10px 40px -18px rgba(6, 23, 70, .25);

  --header-h: 84px;
  --pad-x: clamp(20px, 5vw, 72px);
  --max-w: 1320px;
}

/* --------------------------------- Reset --------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
::selection { background: var(--blau); color: #fff; }

:focus-visible {
  outline: 3px solid var(--blau);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 2000;
  background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px;
  font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ------------------------------ Typography ------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}
.h-1 { font-size: clamp(38px, 5.4vw, 78px); }
.h-2 { font-size: clamp(30px, 4vw, 56px); }
.h-accent { color: var(--blau); }
.tt-none { text-transform: none !important; }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }

.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-soft); max-width: 62ch; }
p { max-width: 68ch; text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-label); font-weight: 500;
  font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--blau); margin-bottom: 22px;
}
.eyebrow::before {
  content: ''; width: 34px; height: 3px; background: var(--rot); border-radius: 2px;
  flex: none;
}
.on-dark .eyebrow { color: rgba(255, 255, 255, .8); }

/* -------------------------------- Layout --------------------------------- */
.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad-x); }
.section { padding-block: clamp(90px, 11vw, 160px); position: relative; }
.section-soft { background: var(--bg-soft); }
.section-dark {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(0, 71, 153, .55), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(188, 16, 16, .28), transparent 60%),
    var(--navy);
  color: var(--white-soft);
}
.section-dark p { color: rgba(255, 255, 255, .78); }

.grid-2 {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 5vw, 90px); align-items: center;
}

/* ------------------------------- Buttons --------------------------------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--f-label); font-weight: 500;
  font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 8px 8px 28px; border-radius: 999px;
  transition: transform .5s var(--ease), background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(.97); }
.btn .btn-ic {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: transform .5s var(--ease), background-color .5s var(--ease);
}
.btn .btn-ic svg { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.btn:hover .btn-ic svg { transform: translate(2px, -2px); }

.btn-rot { background: var(--rot); color: #fff; }
.btn-rot .btn-ic { background: rgba(255, 255, 255, .16); }
.btn-rot:hover { background: var(--rot-dunkel); }

.btn-blau { background: var(--blau); color: #fff; }
.btn-blau .btn-ic { background: rgba(255, 255, 255, .16); }
.btn-blau:hover { background: var(--dunkel); }

.btn-ghost { border: 1.5px solid var(--hairline); color: var(--navy); background: transparent; }
.btn-ghost .btn-ic { background: var(--tint); }
.btn-ghost:hover { border-color: var(--blau); }
header.on-hero:not(.is-solid) .btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
header.on-hero:not(.is-solid) .btn-ghost .btn-ic { background: rgba(255, 255, 255, .14); }
header.on-hero:not(.is-solid) .btn-ghost:hover { border-color: #fff; }

/* -------------------------------- Header --------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--header-h);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease),
              backdrop-filter .5s var(--ease), transform .6s var(--ease);
}
.site-header .wrap {
  max-width: none; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-header.is-solid {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -30px rgba(6, 23, 70, .35);
}
.site-header.is-hidden { transform: translateY(-102%); }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 52px; width: auto; transition: opacity .4s var(--ease); }
.brand .logo-dark { display: block; }
.brand .logo-light { display: none; }
header.on-hero:not(.is-solid) .logo-dark { display: none; }
header.on-hero:not(.is-solid) .logo-light { display: block; }

.nav-cta { flex: none; }
.nav-cta .btn { padding: 6px 6px 6px 22px; }
.nav-cta .btn .btn-ic { width: 36px; height: 36px; }

/* --------------------------------- Hero ----------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: clip;
  background: var(--navy);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(6, 23, 70, .92) 0%, rgba(6, 23, 70, .45) 34%, rgba(6, 23, 70, .2) 60%, rgba(6, 23, 70, .55) 100%);
}
.hero-inner {
  position: relative; z-index: 2; width: 100%;
  padding-bottom: clamp(56px, 8vh, 110px); padding-top: calc(var(--header-h) + 40px);
}
.hero .eyebrow { color: rgba(255, 255, 255, .85); }
.hero h1 { color: #fff; }
.hero .hero-sub {
  margin-top: 26px; max-width: 56ch;
  color: rgba(255, 255, 255, .82); font-size: clamp(16px, 1.3vw, 19px);
}
.hero-sub-page { min-height: clamp(520px, 78svh, 820px); }

/* Hero-Exit: das Video schrumpft beim Wegscrollen in einen Rahmen */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; will-change: transform;
  transform-origin: 50% 42%;
}
.hero-bg .hero-media, .hero-bg .hero-scrim { z-index: auto; }

/* Filmkorn */
.grain {
  position: absolute; inset: -2%; z-index: 2; pointer-events: none;
  opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.82'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------ Drei Schritte ----------------------------- */
/* Seit 28.09.2026 ein schmales Band mit drei Stationen nebeneinander statt
   Einleitungsabsatz und Liste. Die Linie verbindet die Stationen. */
.section-schritte { padding-block: clamp(72px, 8vw, 124px); }
.schritte-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(32px, 5vw, 90px); align-items: start;
}
.schritte {
  --luecke: clamp(20px, 2.4vw, 36px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--luecke); counter-reset: schritt;
}
.schritte li { position: relative; display: grid; gap: 6px; align-content: start; }
.schritte li::before {
  counter-increment: schritt; content: counter(schritt);
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: 12px;
  background: var(--blau); color: #fff;
  font-family: var(--f-head); font-weight: 700; font-size: 20px;
  display: grid; place-items: center;
}
.schritte li:not(:last-child)::after {
  content: ''; position: absolute; top: 23px; height: 2px;
  left: 60px; right: calc(12px - var(--luecke));
  background: linear-gradient(90deg, var(--blau), rgba(0, 71, 153, .14));
}
.schritte b {
  font-family: var(--f-head); font-weight: 700; text-transform: uppercase;
  font-size: 19px; line-height: 1.2; color: var(--navy);
}
.schritte li > span { font-size: 15px; line-height: 1.55; color: var(--text-soft); }

/* ------------------------------- Accordion -------------------------------- */
.acc { display: grid; gap: 14px; }
.acc-item {
  border-radius: var(--radius-sm); overflow: clip;
  background: #fff; border: 1px solid var(--hairline);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.acc-item.open { box-shadow: var(--shadow-card); border-color: rgba(0, 71, 153, .3); }
.acc-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 22px 26px; text-align: left;
}
.acc-btn .acc-title {
  font-family: var(--f-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--navy); line-height: 1.25;
}
.acc-btn .acc-title small {
  display: block; font-family: var(--f-label); font-weight: 500;
  font-size: 12px; letter-spacing: .18em; color: var(--text-soft); margin-top: 4px;
}
.acc-btn .acc-ic {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--tint); display: grid; place-items: center;
  transition: transform .5s var(--ease), background-color .4s;
}
.acc-btn .acc-ic svg { width: 15px; height: 15px; color: var(--blau); transition: color .3s; }
.acc-item.open .acc-ic { transform: rotate(45deg); background: var(--rot); }
.acc-item.open .acc-ic svg { color: #fff; }
.acc-panel { height: 0; overflow: hidden; }
.acc-panel-in { padding: 0 26px 30px; color: var(--text-soft); }
#stellen-liste { margin-top: clamp(32px, 4vw, 52px); }

/* Stellendetails: links Leitsatz, Einleitung und die drei Listen als Reiter,
   rechts eine Karte mit Eckdaten und dem Weg zur Bewerbung (28.09.2026). */
.st-inhalt {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px); align-items: start;
  border-top: 1px solid var(--hairline); padding-top: 26px;
}
.st-unter {
  font-family: var(--f-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(21px, 1.9vw, 27px); line-height: 1.1; color: var(--blau);
  margin-bottom: 12px;
}
.st-einleitung { font-size: 16px; line-height: 1.7; max-width: 66ch; }
.st-mehr {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font-family: var(--f-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau);
}
.st-mehr[hidden] { display: none; }
.nw { white-space: nowrap; }

/* Reiter als Segmentschalter. Die Markierung gleitet unter die gewählte
   Liste, gerechnet wird nur mit transform. */
.st-reiter { margin-top: 30px; }
.st-reiterleiste {
  position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  max-width: 480px; padding: 4px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--hairline);
}
.st-reiterleiste[hidden] { display: none; }
.st-marker {
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc((100% - 8px) / var(--n));
  transform: translateX(calc(var(--i) * 100%));
  background: var(--blau); border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(0, 71, 153, .7);
  transition: transform .5s var(--ease);
}
.st-tab {
  position: relative; z-index: 1; min-height: 44px; padding: 8px 10px;
  border-radius: 999px; white-space: nowrap;
  font-family: var(--f-head); font-weight: 700; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blau);
  transition: color .35s var(--ease);
}
.st-tab[aria-selected="true"] { color: #fff; }
.st-feld { padding-top: 24px; }
.st-feld:focus-visible { outline-offset: 6px; }

.st-liste li {
  position: relative; padding-left: 34px; margin-bottom: 13px;
  font-size: 15.5px; line-height: 1.55; color: var(--text); break-inside: avoid;
}
.st-liste--zwei { columns: 2; column-gap: 40px; }
.st-liste li::before {
  content: ''; position: absolute; left: 0; top: calc(.775em - 11px);
  width: 22px; height: 22px; border-radius: 50%;
}
/* Aufgaben: der rote Strich des Portals */
.st-feld--aufgaben .st-liste li::before {
  top: calc(.775em - 1.5px); left: 5px; width: 12px; height: 3px; border-radius: 2px;
  background: var(--rot);
}
/* Profil: ein Haken im blassblauen Kreis */
.st-feld--profil .st-liste li::before {
  background: rgba(0, 71, 153, .10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l2.9 2.9 5.9-6.2' fill='none' stroke='%23004799' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat;
}
/* Wir bieten: das Plus aus dem Styleguide, wie auf der Ausbildungsseite */
.st-feld--bieten .st-liste li::before {
  background:
    linear-gradient(var(--rot), var(--rot)) center / 10px 2.4px no-repeat,
    linear-gradient(var(--rot), var(--rot)) center / 2.4px 10px no-repeat,
    rgba(188, 16, 16, .09);
}
.st-eigenschaften { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.st-eigenschaften p {
  font-family: var(--f-label); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blau); margin-bottom: 12px;
}
.st-eigenschaften ul { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.st-eigenschaften li {
  padding: 6px 14px; border-radius: 999px; background: #fff;
  border: 1px solid rgba(0, 71, 153, .2); font-size: 14px; line-height: 1.35; color: var(--navy);
}

/* Seitenkarte */
.st-seite {
  display: grid; gap: 22px; padding: 24px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
}
.st-fakten { display: grid; gap: 16px; }
.st-fakt { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center; align-content: start; }
.st-fakt-ic {
  grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--blau); box-shadow: inset 0 0 0 1px var(--hairline);
}
.st-fakt-ic svg { width: 20px; height: 20px; }
.st-fakt dt, .st-fakt dd { grid-column: 2; }
.st-fakt dt {
  font-family: var(--f-label); font-weight: 500; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); line-height: 1.3;
}
.st-fakt dd {
  font-family: var(--f-head); font-weight: 600; font-size: 17px;
  line-height: 1.25; color: var(--navy);
}
.st-aktion { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.st-aktion .btn { justify-content: space-between; }
.st-kontakt { font-size: 14.5px; line-height: 1.45; margin: 0; }
.st-kontakt span {
  display: block; margin-bottom: 2px;
  font-family: var(--f-label); font-weight: 500; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft);
}
.st-kontakt b { font-weight: 600; color: var(--navy); }
.stellen-laden, .stellen-leer { color: var(--text-soft); }

/* Initiativbewerbung unter der Liste */
.initiativ {
  margin-top: 24px; padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px;
  border: 1.5px dashed rgba(0, 71, 153, .28); border-radius: var(--radius-sm);
}
.initiativ p { margin: 0; color: var(--text-soft); }
.initiativ b {
  margin-right: 6px; font-family: var(--f-head); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--navy);
}

/* --------------------------- Formular-Sektion ----------------------------- */
.bw-grid {
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 5vw, 90px); align-items: start;
}
/* Links zwei Zeilen mit Symbol statt einer Strichliste. Weiß auf Marineblau,
   Rot bleibt hier aus (Kontrast, Styleguide). Am Schreibtisch bleibt die
   Spalte neben dem langen Formular stehen. */
.bw-links { position: sticky; top: calc(var(--header-h) + 32px); }
.section-dark .bw-lead { margin-top: 18px; font-size: 18px; color: rgba(255, 255, 255, .85); }
.bw-infos { margin-top: 32px; display: grid; gap: 20px; }
.bw-infos li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; }
.bw-ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
}
.bw-ic svg { width: 21px; height: 21px; }
.bw-infos b {
  display: block; margin: 2px 0 3px;
  font-family: var(--f-head); font-weight: 700; font-size: 17px; line-height: 1.25;
  letter-spacing: .02em; text-transform: uppercase; color: #fff;
}
.bw-infos span { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .76); }
.bw-infos a {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, .45); overflow-wrap: anywhere;
}
.bw-infos a:hover { text-decoration-color: #fff; }
/* Der Verweis bekommt eine Fingerfläche, ohne die Zeile zu vergrößern */
.bw-infos a { position: relative; }
.bw-infos a::after { content: ''; position: absolute; inset: -10px -6px; }

.bw-card {
  background: #fff; border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 44px);
  box-shadow: 0 40px 90px -30px rgba(6, 23, 70, .5);
}
.bwform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.feld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.feld--voll { grid-column: 1 / -1; }
.feld label {
  font-family: var(--f-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
.bwform input, .bwform select {
  font-family: var(--f-body); font-size: 16px; color: var(--text);
  width: 100%; max-width: 100%; min-width: 0;
  padding: 13px 14px; min-height: 48px;
  border: 1.5px solid var(--hairline); border-radius: 10px; background: #fff;
  transition: border-color .3s var(--ease);
}
.bwform input:hover, .bwform select:hover { border-color: rgba(0, 71, 153, .35); }
.bwform input:focus, .bwform select:focus {
  outline: none; border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(0, 71, 153, .12);
}
.bwform input[type="file"] { padding: 10px 12px; }
.bwform input[type="file"]::file-selector-button {
  font-family: var(--f-label); font-weight: 500; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--tint); color: var(--blau); border: 0; border-radius: 999px;
  padding: 8px 14px; margin-right: 12px; cursor: pointer;
}
.hinweis { font-size: 13px; color: var(--text-soft); }
.hp { position: absolute; left: -9999px; top: -9999px; }
/* Pflichtinformation nach Art. 13 DSGVO direkt am Formular - nicht versteckt
   hinter einem Link, den niemand oeffnet. Die Karte steht in einem dunklen
   Abschnitt, ist selbst aber hell: Farben deshalb ausdruecklich setzen, sonst
   erbt der Text das Weiss des Abschnitts und steht unsichtbar auf Weiss. */
.bwform .ds-hinweis { gap: 10px; padding: 18px 20px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--hairline); }
.bwform .ds-hinweis p { font-size: 13.5px; line-height: 1.6; margin: 0; max-width: none;
  color: var(--text) !important; }
.bwform .ds-hinweis .ds-kurz { font-size: 14px; }
.ds-kurz b { color: var(--navy); }
.ds-mehr summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer;
  list-style: none; font-family: var(--f-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--blau);
}
.ds-mehr summary::-webkit-details-marker { display: none; }
.ds-mehr summary::after {
  content: ''; width: 7px; height: 7px; margin-top: -4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease);
}
.ds-mehr[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.ds-voll { display: grid; gap: 8px; padding: 2px 0 8px; }

/* Datei-Ablage. Das echte Dateifeld liegt unsichtbar darüber. */
.feld-titel {
  font-family: var(--f-label); font-weight: 500; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft);
}
.ablage {
  position: relative; display: grid; justify-items: center; gap: 6px;
  padding: 22px 18px; text-align: center;
  border: 1.5px dashed rgba(0, 71, 153, .35); border-radius: 12px; background: #fafbfd;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.ablage:hover, .ablage.ueber { border-color: var(--blau); background: rgba(0, 71, 153, .06); }
.ablage:focus-within { outline: 3px solid var(--blau); outline-offset: 3px; }
.bwform .ablage input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.ablage-ic {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--tint); color: var(--blau);
}
.ablage-ic svg { width: 21px; height: 21px; }
.ablage-text { font-size: 15px; color: var(--text); }
.ablage-text b { color: var(--blau); font-weight: 600; }
/* Am Telefon zieht niemand Dateien, dort genügt die Auswahl */
@media (hover: none) { .ablage-ziehen { display: none; } }
.ablage-hinweis { font-size: 13px; line-height: 1.5; color: var(--text-soft); max-width: 46ch; }
.ablage.zu-gross { border-color: var(--rot); background: #FBEDED; }
.ablage.zu-gross .ablage-hinweis { color: #8f1010; }
.ablage[hidden], .ablage-datei[hidden] { display: none; }
.ablage-datei {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px 10px 10px 12px; border-radius: 12px;
  border: 1.5px solid rgba(0, 71, 153, .3); background: rgba(0, 71, 153, .05);
}
.ablage-name { font-size: 14.5px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; }
.ablage-weg {
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  font-family: var(--f-label); font-weight: 500; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blau);
  transition: background-color .3s var(--ease);
}
.ablage-weg:hover { background: var(--tint); }

/* Die Stelle aus "Jetzt bewerben" leuchtet im Auswahlfeld kurz auf */
.bwform select.gewaehlt { animation: gewaehlt 1.8s var(--ease); }
@keyframes gewaehlt {
  0%, 40% { border-color: var(--blau); background-color: rgba(0, 71, 153, .06);
            box-shadow: 0 0 0 4px rgba(0, 71, 153, .16); }
}
/* .feld label setzt Versalien und Sperrung - fuer einen Satz waere das unlesbar */
.bwform label.ds-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  font-family: var(--f-body); font-size: 14px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--text); }
/* Ein Kaestchen von 20 Pixeln trifft am Telefon niemand zuverlaessig. Es bleibt
   optisch klein, bekommt aber eine Trefferflaeche von 44 Pixeln. */
.bwform label.ds-check input { width: 26px; height: 26px; min-height: 26px; flex: none;
  margin-top: 0; padding: 0; position: relative; }
.bwform label.ds-check input::after {
  content: ''; position: absolute; inset: -9px; border-radius: 6px;
}
.bwform label.ds-check span { line-height: 1.55; }
.meldung { grid-column: 1 / -1; display: none; padding: 14px 16px; border-radius: 10px; font-size: 14.5px; max-width: none; }
.meldung.ok { display: block; background: #E7F3EC; border-left: 4px solid #1B7A43; color: #146034 !important; }
.meldung.fehler { display: block; background: #FBEBEB; border-left: 4px solid var(--rot); color: #8f1010 !important; }
.bwform .btn[disabled] { opacity: .6; pointer-events: none; }
.bwform .feld .btn { align-self: start; }
/* Der Rueckpfeil im Kopf zeigt nach links, ohne Hover-Diagonale */
.nav-cta .btn:hover .btn-ic svg { transform: translateX(-3px); }

/* -------------------------------- Footer ---------------------------------- */
.site-footer {
  background:
    radial-gradient(900px 480px at 110% -20%, rgba(0, 71, 153, .5), transparent 60%),
    var(--navy);
  color: rgba(255, 255, 255, .78);
  padding: clamp(70px, 8vw, 110px) 0 0;
  position: relative; overflow: clip;
}
.site-footer .f-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(30px, 4vw, 60px); padding-bottom: 60px;
}
.site-footer h3 {
  color: #fff; font-size: 15px; font-family: var(--f-label); font-weight: 500;
  letter-spacing: .24em; margin-bottom: 20px;
}
.site-footer .f-brand img { height: 58px; margin-bottom: 22px; }
.site-footer .f-brand p { font-size: 14.5px; max-width: 36ch; }
.site-footer ul { display: grid; gap: 10px; font-size: 15px; }
.site-footer ul a { transition: color .3s; }
.site-footer ul a:hover { color: #fff; }
.site-footer .f-partner { display: grid; gap: 18px; }
.site-footer .f-partner .fp-item { display: flex; align-items: center; gap: 14px; }
.site-footer .f-partner img.wappen { height: 54px; width: auto; }
.site-footer .f-partner img.mul { height: 30px; width: auto; }
.site-footer .f-partner b { color: #fff; font-family: var(--f-head); text-transform: uppercase; font-weight: 600; font-size: 16px; line-height: 1.25; display: block; }
.site-footer .f-partner small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--f-label); color: rgba(255,255,255,.55); display: block; margin-bottom: 4px; }
.f-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 24px 0 30px; display: flex; flex-wrap: wrap; gap: 16px 30px;
  align-items: center; justify-content: space-between; font-size: 13.5px;
}
.f-bottom nav { display: flex; gap: 24px; }
.f-bottom a:hover { color: #fff; }

.site-footer .f-watermark {
  display: block; white-space: nowrap; pointer-events: none;
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(90px, 13vw, 220px); line-height: .9;
  letter-spacing: .01em; color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .10);
  margin: 0 calc(-1 * var(--pad-x)) clamp(30px, 4vw, 60px);
  user-select: none;
}

/* ------------------------------ Motion-Basis ------------------------------ */
html.js [data-reveal] { opacity: 0; }
html.js.no-motion [data-reveal] { opacity: 1; }

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 1200; pointer-events: none;
}
.scroll-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--rot), #ff6b6b);
  transform: scaleX(0); transform-origin: left;
}

/* ------------------------------ Responsive -------------------------------- */
@media (max-width: 768px) {
  :root { --header-h: 70px; }
  .brand img { height: 42px; }
  .grid-2, .bw-grid { grid-template-columns: 1fr; }
  .bwform { grid-template-columns: 1fr; }
  .nav-cta .btn .lang { display: none; }
  .schritte-grid { grid-template-columns: 1fr; }
  .schritte { grid-template-columns: 1fr; --luecke: 24px; }
  .schritte li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; }
  .schritte li::before { grid-row: 1 / span 2; width: 44px; height: 44px; margin: 0; font-size: 18px; }
  .schritte li > b, .schritte li > span { grid-column: 2; }
  .schritte li:not(:last-child)::after {
    top: 50px; bottom: calc(6px - var(--luecke)); left: 21px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--blau), rgba(0, 71, 153, .14));
  }
  /* Die Seitenkarte löst sich auf: Eckdaten oben, Knopf am Ende */
  .st-inhalt { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 20px; }
  /* Fünf Zeilen Einleitung, der Rest hinter "Weiterlesen" */
  .st-einleitung:not(.ganz) {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden;
  }
  .st-seite { display: contents; }
  .st-fakten {
    order: -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px;
    padding: 16px; border-radius: 12px; background: var(--bg-soft);
  }
  .st-fakt { grid-template-columns: 20px minmax(0, 1fr); column-gap: 7px; row-gap: 3px; align-items: center; }
  .st-fakt-ic { grid-row: 1; width: 20px; height: 20px; background: none; box-shadow: none; }
  .st-fakt-ic svg { width: 18px; height: 18px; }
  .st-fakt dd { grid-column: 1 / -1; font-size: 16px; }
  .st-aktion { order: 1; padding-top: 0; border-top: 0; }
  .st-reiterleiste { max-width: none; }
  .st-tab { font-size: 14px; letter-spacing: .02em; padding: 8px 4px; }
  .st-liste--zwei { columns: 1; }
  .initiativ { padding: 20px; }
  .initiativ .btn { width: 100%; justify-content: space-between; }
  .bw-links { position: static; }
  .site-footer .f-grid { grid-template-columns: 1fr; }
  .site-footer .f-watermark { -webkit-text-stroke-width: 1px; }
  .acc-btn { padding: 18px 18px; }
  .acc-panel-in { padding: 0 18px 24px; }
  /* Der Absendeknopf ist am Telefon eine volle, mittige Flaeche */
  .bwform .feld .btn { align-self: stretch; justify-content: center; }
  /* Textverweise in der Fusszeile brauchen eine Fingerflaeche. Sie waechst
     ueber ein Pseudoelement, damit die Zeilenhoehe gleich bleibt. */
  .site-footer ul a, .f-bottom a { position: relative; }
  .site-footer ul a::after, .f-bottom a::after {
    content: ''; position: absolute; inset: -9px -6px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .st-inhalt { grid-template-columns: minmax(0, 1fr) 270px; }
  .st-liste--zwei { columns: 1; }
}

/* Sehr schmale Schirme: der Kopf braucht jede Handbreit */
@media (max-width: 379px) {
  .site-header .wrap { gap: 10px; }
  .brand img { height: 36px; }
  .nav-cta .btn { padding: 6px 6px 6px 14px; letter-spacing: .08em; }
}

/* --------------------------- Reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scroll-progress { display: none; }
}