:root{
  --primary: #00464e;
  --primary-dark: #00323a;
  --accent: #e2001a;
  --accent-text: #FFFFFF;
  --on-primary: #FFFFFF;
  --band: #0f555d;
  /* Kopf- und Fusszeile liegen bewusst NICHT auf der Markenfarbe, sondern auf
     einem neutralen Hellgrau -- so wirkt jedes Kundenlogo sauber freigestellt. */
  --chrome-bg: #F2F2F2;
  /* Gruen der Haken-Badges unter der Headline (gleicher Ton wie das Erfolgs-Banner) */
  --success: #1E8E4F;
  --font: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ink: #12211F;
  --muted: #6B7280;
  --line: #E5E7EB;
  --bg: #F7F8F8;
  --card: #FFFFFF;
  --radius: 16px;
  --radius-lg: 22px;
  /* Sicherheitsabstand zum Displayrand — gilt AUSSCHLIESSLICH fuer den
     Body-Content (.wrap / .wrap-narrow). Header und Footer haben bewusst
     eigene, feste Paddings, damit ihre Flaechen randlos bleiben. */
  --gutter: 25px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.05);
  --shadow-lg: 0 10px 34px rgba(16,24,40,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
/* Lange deutsche Komposita brechen, statt auf schmalen Displays ueber den Rand zu laufen */
h1,h2,h3,p,li{overflow-wrap:break-word}
.ic{flex:0 0 auto}

/* ── Gerüst ── */
.page{display:flex;min-height:100vh;flex-direction:column}
.main{flex:1}
.wrap{width:100%;max-width:760px;margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{width:100%;max-width:460px;margin:0 auto;padding:0 var(--gutter)}

/* Kopfzeile: immer --chrome-bg (#F2F2F2), unabhaengig von der Markenfarbe,
   mit einem leichten Schatten als Abgrenzung zum Content. Texte darauf sind
   deshalb dunkel gesetzt (--primary-dark), nicht --on-primary. */
.header{
  position:sticky;top:0;z-index:50;display:flex;justify-content:center;
  padding:16px;background:var(--chrome-bg);box-shadow:0 1px 6px rgba(16,24,40,.10);
}
/* Logohoehe: 38px + 20px. Zum Nachjustieren hier UND beim height-Attribut
   in headerHtml (Abschnitt 6) denselben Wert setzen. */
.header img{height:58px;width:auto;object-fit:contain}
.header .brandname{color:var(--primary-dark);font-weight:800;font-size:20px;letter-spacing:.01em}

/* Fusszeile: gleiche Flaeche wie die Kopfzeile, Schatten nach oben. */
.footer{
  background:var(--chrome-bg);box-shadow:0 -1px 6px rgba(16,24,40,.10);
  /* fest, NICHT var(--gutter): der Sicherheitsabstand gilt nur fuer den Content */
  padding:14px 20px;text-align:center;font-size:13px;
}
.footer nav{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.footer a{color:var(--primary-dark);opacity:.92;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footer .addr{margin-top:8px;color:var(--muted);opacity:.85;font-size:12px}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px 24px;border:0;border-radius:14px;cursor:pointer;
  background:var(--accent);color:var(--accent-text);
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;box-shadow:var(--shadow);
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.btn:hover{filter:brightness(.95);box-shadow:var(--shadow-lg)}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
/* CTA mit Unterzeile: Label und Unterzeile stapeln, nicht nebeneinander legen */
.btn-cta{flex-direction:column;gap:3px;line-height:1.25}
.btn .sub{
  font-size:11.5px;font-weight:400;text-transform:none;letter-spacing:0;opacity:.85;
}
.btn-outline{background:var(--card);color:var(--primary);border:1.5px solid var(--primary);box-shadow:none}
.btn-icon{
  width:auto;flex:0 0 auto;padding:16px 20px;border-radius:14px;
  background:var(--card);color:var(--primary);border:2px solid var(--line);
  text-transform:none;box-shadow:none;
}

/* ── Landingpage ── */
.lp{padding-top:40px;padding-bottom:56px;text-align:center}
.lp-sub{color:var(--muted);font-size:14px}
.lp-eyebrow{margin-top:22px;font-size:17px;font-weight:600;color:var(--primary-dark)}
/* Stellentitel ist immer unterstrichen -- text-underline-offset haelt die Linie
   von den Unterlaengen frei, damit sie bei mehrzeiligen Titeln sauber sitzt. */
.lp-h1{margin-top:4px;font-size:clamp(30px,7vw,46px);line-height:1.1;font-weight:800;color:var(--primary);hyphens:auto;text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.045em}
.lp-subline{margin-top:8px;font-size:17px;font-weight:700;color:var(--primary-dark)}

.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px;font-size:14px;color:#4B5563}
.badges span{display:inline-flex;align-items:center;gap:6px}
.badges .ic{color:var(--primary)}

.cta-block{margin-top:34px}

.adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:30px}
.adv div{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 8px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  font-size:11.5px;font-weight:600;line-height:1.3;color:var(--primary-dark);
}
.adv div{overflow-wrap:break-word}
.adv .ic{color:var(--primary)}
/* Haken der drei Bullets: vollflaechig gruener Kreis, Haken in Weiss. */
.adv .adv-badge{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:24px;border-radius:999px;background:var(--success);
}
.adv .adv-badge .ic{color:#FFFFFF;stroke-width:3}

.shot{margin-top:32px;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.shot-ph{
  margin-top:32px;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;
}
.shot-ph .ic{opacity:.35}

.sec-h{margin-top:56px;font-size:clamp(22px,4.5vw,30px);font-weight:700;color:var(--primary-dark)}
.sec-sub{margin-top:6px;font-size:14px;color:var(--muted)}
.prose{max-width:620px;margin:0 auto}
.prose p{margin-top:15px;font-size:15px;line-height:1.7;color:#4B5563}
.prose .rt-accent{margin-top:20px;font-size:17px;font-weight:700;color:var(--primary-dark)}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px;text-align:left}
.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card .ic{color:var(--primary)}
.card h3{margin-top:9px;font-size:14.5px;font-weight:650;color:var(--primary-dark);overflow-wrap:break-word;hyphens:auto}
.card p{margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--muted)}

.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px;text-align:left}
.chips div{
  display:flex;align-items:center;gap:9px;padding:13px 14px;background:var(--card);
  border-radius:14px;box-shadow:var(--shadow);font-size:13.5px;color:var(--primary-dark);
}
.chips div{overflow-wrap:break-word}
.chips .ic{color:var(--primary)}

.final-bold{margin-top:56px;font-size:clamp(18px,3.4vw,24px);font-weight:700;color:var(--primary-dark)}
.final-sub{margin-top:8px;font-size:15px;color:#4B5563}

/* ── Slider ── */
.slider{margin-top:24px}
.slider-view{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.slider-track{display:flex;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.slider-track img{width:100%;flex:0 0 100%;aspect-ratio:16/9;object-fit:cover}
.slider-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--primary-dark);cursor:pointer;box-shadow:var(--shadow);
}
.slider-nav.prev{left:12px}
.slider-nav.next{right:12px}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.slider-dots button{height:8px;width:8px;border:0;border-radius:999px;background:#D1D5DB;cursor:pointer;transition:width .2s ease,background .2s ease}
.slider-dots button[aria-current="true"]{width:22px;background:var(--primary)}

/* ── Funnel ── */
.screen{padding-top:32px;padding-bottom:48px;animation:fadeUp .45s cubic-bezier(.22,.61,.36,1) both}
.bar{height:6px;width:100%;border-radius:999px;background:var(--line);margin-bottom:26px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--primary);transition:width .35s ease}

.q-h{font-size:20px;font-weight:700;line-height:1.35;color:var(--primary-dark)}
.q-sub{margin-top:8px;font-size:14px;color:var(--muted)}
.opts{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;padding:16px;text-align:left;
  background:var(--card);border:2px solid var(--line);border-radius:14px;cursor:pointer;
  font-size:14.5px;font-weight:500;color:var(--primary-dark);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.opt:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.opt[aria-pressed="true"]{border-color:var(--primary)}
.opt .ic{color:var(--primary)}
.opt .lbl{flex:1}
.opt .mark{
  width:20px;height:20px;border:2px solid #D1D5DB;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.opt[aria-pressed="true"] .mark{border-color:var(--primary);background:var(--primary)}

.field{width:100%;padding:15px 16px;border:2px solid var(--line);border-radius:14px;font-size:15px;background:var(--card);outline:none}
.field:focus{border-color:var(--primary)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.nav-row{display:flex;gap:12px;margin-top:28px}
.nav-row .grow{flex:1}
/* Beschriftungen der Navigations-Buttons brechen nie um ("Jetzt Bewerbung
   absenden" steht immer in einer Zeile). Damit auch lange Labels auf schmalen
   Displays hineinpassen, skaliert die Schrift mit und das seitliche Padding
   faellt geringer aus als beim Standard-Button. */
.nav-row .btn{white-space:nowrap}
.nav-row .grow .btn{padding-left:12px;padding-right:12px;font-size:clamp(11.5px,3.5vw,15px);letter-spacing:.02em}

.panel{background:var(--card);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow)}
.panel h2{font-size:19px;font-weight:700;color:var(--primary-dark)}
.panel .lead{margin-top:6px;font-size:14px;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:16px}
.panel .stack{margin-top:20px;gap:12px}

.banner{
  position:relative;left:50%;width:100vw;margin-left:-50vw;
  margin-top:-32px;margin-bottom:22px;padding:14px;text-align:center;
  background:#1E8E4F;color:#fff;font-size:17px;font-weight:800;
  animation:pop .55s cubic-bezier(.22,.61,.36,1) both;
}
.secure{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#9CA3AF}

.steps{display:flex;justify-content:space-between;gap:6px;margin:26px 0}
.steps div{display:flex;flex:1;flex-direction:column;align-items:center;gap:8px}
.steps .dot{
  width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  background:var(--line);color:#9CA3AF;font-size:15px;font-weight:700;box-shadow:var(--shadow);
  transition:background .2s ease,transform .2s ease;
}
.steps .on .dot{background:var(--primary);color:#fff;box-shadow:var(--shadow-lg);transform:scale(1.04)}
.steps span{font-size:11.5px;font-weight:600;color:#9CA3AF;text-align:center}
.steps .on span{color:var(--primary-dark)}

.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:90px 0;text-align:center}
.spinner{width:128px;height:128px;transform-origin:50% 50%;animation:spin .8s linear infinite}
.spinner circle{fill:none;stroke-width:10}
.spinner .spinner-track{stroke:var(--line)}
.spinner .spinner-arc{stroke:var(--primary);stroke-linecap:round;stroke-dasharray:185 371}
.btn-spinner{display:inline-block;vertical-align:-9px;margin-right:2px;animation:spin .7s linear infinite;opacity:.9}

.drop{
  display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:26px;
  border:2px dashed #D1D5DB;border-radius:14px;background:var(--card);cursor:pointer;
  font-size:14px;color:var(--muted);
}
.drop .ic{color:var(--primary)}
.drop .hint{font-size:11.5px;color:#9CA3AF}
.consent{display:flex;align-items:flex-start;gap:9px;font-size:12px;color:var(--muted);text-align:left}
.consent input{margin-top:3px}
.consent a{color:var(--primary-dark)}
.err{font-size:12px;color:#DC2626}

.tiles{display:grid;gap:12px;margin-top:22px;text-align:left}
.tiles a{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);text-decoration:none}
.tiles strong{display:block;font-size:14px;color:var(--primary-dark)}
.tiles span{display:block;margin-top:4px;font-size:12px;color:var(--muted)}

.hidden{display:none !important}

/* ── Animationen ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{0%{opacity:0;transform:scale(.7)}60%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.stagger>*{animation:rise .5s ease both}
.stagger>*:nth-child(1){animation-delay:.04s}
.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}

/* Zweispaltig bleibt bis 380px — hält die Seite kurz, wie in der Referenz.
   Erst auf sehr schmalen Geräten einspaltig, damit nichts umbricht. */
@media (max-width:380px){
  .grid2{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr}
  .adv{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--gutter:25px}
  .lp{padding-top:28px;padding-bottom:44px}
  .card p{font-size:12px}
  /* Mobil: Benefits, "Dein Aufgabenbereich" und "Dein Profil" einspaltig —
     jede Box bekommt eine eigene Zeile — und der Boxinhalt wird zentriert,
     passend zum uebrigen mittig gesetzten Text. Auf Desktop bleibt es
     zweispaltig und linksbuendig. */
  .grid2{grid-template-columns:1fr;text-align:center}
  .card{display:flex;flex-direction:column;align-items:center}
}
@media (min-width:640px){
  .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}