@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunitosans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunitosans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito Sans";
  font-style: italic;
  font-weight: 200 1000;
  font-display: swap;
  src: url("/assets/fonts/nunitosans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --cyan: #00ccff;
  --cyan-flaeche: #09caff;
  --cyan-fuss: #00ace1;
  --cyan-tief: #0089b8;      
  --eis: #eafcff;
  --orange: #ff773d;
  --orange-tief: #e85f24;
  --text: #2e3236;
  --grau: #5f666b;
  --grau-hell: #8a9296;
  --linie: #d9dde0;
  --flaeche: #f7f8f9;
  --weiss: #fff;
  --schrift: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --breite: 1180px;
  --rand: clamp(16px, 5.6vw, 80px);
  --abstand: clamp(64px, 8vw, 112px);
  --radius: 10px;
  --kurve: cubic-bezier(.22, .8, .24, 1);
  --schatten: 0 18px 40px -22px rgba(20, 40, 60, .35);
  
  --ueberschrift: var(--cyan);
  --duenn: 200;
  --fett: 900;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font: 400 17px/1.6 var(--schrift);
  color: var(--text);
  background: var(--weiss);
  overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { padding: 0; }
b, strong { font-weight: 800; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--text); color: #fff; border-radius: 6px; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
:focus-visible { outline: 3px solid var(--cyan-tief); outline-offset: 3px; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.innen--stellen { width: min(100% - 2 * var(--rand), 980px); }
.innen--schmal { width: min(100% - 2 * var(--rand), 840px); }

.js [data-zeige] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
  transition-delay: var(--verzug, 0s);
}
.js [data-zeige].ist-da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-zeige] { opacity: 1; transform: none; transition: none; }
}

.pille {
  display: inline-block; padding: 9px 28px; margin: 0 0 30px;
  border: 1px solid var(--cyan); border-radius: 999px;
  font: 500 15px/1.2 var(--schrift); letter-spacing: .4px; text-transform: uppercase;
  color: var(--ueberschrift); background: rgba(255, 255, 255, .7);
}
.pille--cyan { background: transparent; }
.pille--glas { background: rgba(255, 255, 255, .25); border-color: var(--cyan); color: var(--text); margin: 0; font-size: 13px; padding: 6px 20px; }

.chip {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  font: 800 12px/1.2 var(--schrift); letter-spacing: .3px; text-transform: uppercase;
  color: var(--cyan-tief); background: var(--eis);
}
.chip--grau { color: var(--grau); background: #f0f1f2; }

.titel {
  font: var(--duenn) clamp(32px, 4.4vw, 52px)/1.04 var(--schrift);
  text-transform: uppercase; letter-spacing: .5px; color: var(--ueberschrift);
}
.titel b { font-weight: var(--fett); }
.titel--zeile { margin-bottom: 34px; }
.titel--mitte { text-align: center; }

.kopfzeile { margin-bottom: 52px; }
.kopfzeile--mitte { text-align: center; }
.kopfzeile__text { max-width: 660px; margin: 22px auto 0; font-size: 18px; line-height: 1.6; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 34px; min-height: 52px;
  font: 500 18px/1.2 var(--schrift); color: #fff; text-decoration: none;
  background: var(--orange); border: 1px solid var(--orange-tief); border-radius: 6px;
  cursor: pointer; transition: background .2s, color .2s, transform .2s var(--kurve), box-shadow .2s;
}
.btn:hover { background: var(--orange-tief); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(232, 95, 36, .8); }
.btn--rand { background: #fff; color: var(--text); border-color: var(--orange); }
.btn--rand:hover { background: #fff4ee; color: var(--text); }
.btn--klein { min-height: 42px; padding: 9px 20px; font-size: 15px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 44px; }
.knoepfe--mitte { justify-content: center; }
.knoepfe--rechts { justify-content: flex-end; }
@media (max-width: 560px) {
  .knoepfe { gap: 12px; }
  .knoepfe .btn { flex: 1 1 100%; }
}

.kopf {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  background: transparent; transition: box-shadow .3s;
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: min(100% - 2 * var(--rand), 1263px); margin-inline: auto; height: 120px;
}
.kopf__logo { display: block; flex: 0 1 auto; }
.kopf__logo img { width: clamp(180px, 23vw, 330px); height: auto; }
.kopf__nav { display: flex; gap: clamp(18px, 2.4vw, 34px); }
.kopf__nav a {
  font: 500 clamp(15px, 1.5vw, 21px)/1 var(--schrift); text-transform: uppercase; letter-spacing: .4px;
  text-decoration: none; color: var(--ueberschrift); padding: 8px 0; border-bottom: 2px solid transparent;
}
.kopf__nav a[aria-current] { font-weight: 800; }
.kopf__nav a:hover { border-bottom-color: var(--cyan); }
.kopf__tel { text-decoration: none; font-weight: 800; font-size: 15px; text-align: right; }
.kopf__tel span { display: block; font-weight: 400; font-size: 13px; color: var(--grau); }
@media (max-width: 899px) {
  .kopf__innen { height: 76px; }
  .kopf__logo img { width: 190px; }
}
@media (max-width: 380px) {
  .kopf__logo img { width: 160px; }
  .kopf__nav { gap: 14px; }
}

.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 54.7fr) minmax(0, 45.3fr);
  min-height: min(800px, 100svh);
  background: linear-gradient(90deg, #fff 0 54.7%, var(--eis) 54.7% 100%);
}
.hero__text {
  padding: 190px clamp(24px, 4vw, 60px) 80px max(var(--rand), calc((100vw - 1263px) / 2));
  align-self: center;
}
.hero__titel {
  font: var(--duenn) clamp(44px, 5.6vw, 76px)/1 var(--schrift);
  text-transform: uppercase; color: var(--ueberschrift); letter-spacing: .5px; margin-bottom: 40px;
}
.hero__titel b { font-weight: var(--fett); }
.hero__titel--stelle { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; margin-bottom: 22px; font-weight: var(--fett); }
.hero__unterzeile { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; font-weight: 700; color: var(--ueberschrift); margin-bottom: 18px; max-width: 560px; }
.hero__lead { max-width: 500px; font-size: 18px; line-height: 1.55; text-align: justify; hyphens: auto; color: var(--text); }
.hero .knoepfe { margin-top: 70px; }
.hero--stelle .knoepfe, .hero--funnel .knoepfe { margin-top: 40px; }
.hero__bilder { position: relative; padding: 116px 0 70px; align-self: stretch; display: flex; align-items: center; }
.stapel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-left: 28%; width: 72%; box-shadow: var(--schatten); }
.stapel > * { min-width: 0; }
.stapel picture, .stapel img { width: 100%; aspect-ratio: 1375 / 543; object-fit: cover; }
.stapel > :first-child img { border-top-left-radius: var(--radius); }
.stapel > :last-child img { border-bottom-left-radius: var(--radius); }
.stapel--eins img { border-radius: var(--radius) 0 0 var(--radius); aspect-ratio: 724 / 543; }
.hero__weiter { display: none; }
.hero__mobilbild { display: none; }
.hero__band { margin: 0 0 26px; max-width: 520px; }
.hero__band img { width: 100%; aspect-ratio: 1375 / 543; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }

.ki-bild { position: relative; display: block; }
.ki-bild img.ki-bild__marke {
  position: absolute; right: 6px; bottom: 6px; z-index: 2;
  width: 96px !important; height: auto !important; aspect-ratio: auto !important;
  border-radius: 0 !important; box-shadow: none !important; object-fit: contain; pointer-events: none;
}
.teambild .ki-bild__marke { display: none; }   
@media (max-width: 599px) { .ki-bild img.ki-bild__marke { width: 80px !important; } }

.speed { position: absolute; pointer-events: none; z-index: 3; }
.speed i {
  position: absolute; display: block; height: var(--d, 14px); width: var(--l, 120px);
  border-radius: 999px; background: var(--cyan);
  left: var(--x); top: var(--y); transform: rotate(-45deg); transform-origin: left center;
}
.speed--hero { left: 4%; top: 22%; width: 38%; height: 56%; }
.speed--hero i:nth-child(1)  { --x: 10%; --y: 14%; --l: 120px; --d: 7px; }
.speed--hero i:nth-child(2)  { --x: 28%; --y: 15%; --l: 120px; --d: 12px; }
.speed--hero i:nth-child(3)  { --x: 46%; --y: 16%; --l: 140px; --d: 18px; }
.speed--hero i:nth-child(4)  { --x: 66%; --y: 18%; --l: 150px; --d: 24px; }
.speed--hero i:nth-child(5)  { --x: 14%; --y: 44%; --l: 100px; --d: 7px; }
.speed--hero i:nth-child(6)  { --x: 32%; --y: 45%; --l: 110px; --d: 12px; }
.speed--hero i:nth-child(7)  { --x: 50%; --y: 46%; --l: 130px; --d: 18px; }
.speed--hero i:nth-child(8)  { --x: 70%; --y: 48%; --l: 150px; --d: 26px; }
.speed--hero i:nth-child(9)  { --x: 0%;  --y: 80%; --l: 160px; --d: 8px; }
.speed--hero i:nth-child(10) { --x: 20%; --y: 81%; --l: 160px; --d: 14px; }
.speed--hero i:nth-child(11) { --x: 42%; --y: 82%; --l: 170px; --d: 20px; }
.speed--hero i:nth-child(12) { --x: 64%; --y: 83%; --l: 170px; --d: 26px; }
.js .speed--hero i { animation: speed-rein .9s var(--kurve) both; }
.js .speed--hero i:nth-child(4n+2) { animation-delay: .06s; }
.js .speed--hero i:nth-child(4n+3) { animation-delay: .12s; }
.js .speed--hero i:nth-child(4n+4) { animation-delay: .18s; }
@keyframes speed-rein { from { opacity: 0; transform: rotate(-45deg) translateX(-40px) scaleX(.4); } to { opacity: 1; transform: rotate(-45deg); } }
@media (prefers-reduced-motion: reduce) { .js .speed--hero i { animation: none; } }

@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; background: #fff; }
  .hero__text { padding: 104px var(--rand) 36px; }
  .hero .knoepfe { margin-top: 32px; }
  .hero__lead { text-align: left; }
  .hero__bilder { background: var(--eis); padding: 28px 0 56px; overflow: hidden; }
  .stapel { margin-left: 18%; width: 82%; gap: 8px; }
  .speed--hero { left: 2%; top: 16%; width: 40%; height: 60%; }
  .speed--hero i { --l: 70px !important; }
  .speed--hero i:nth-child(n+9) { display: none; }
  
  .hero--start .hero__bilder { display: none; }
  .hero__mobilbild { display: block; position: relative; margin: 0; padding: 88px 0 22px; background: var(--eis); overflow: hidden; }
  .hero__mobilbild .ki-bild, .hero__mobilbild > picture { margin-left: 14%; }
  .hero__mobilbild img { width: 100%; aspect-ratio: 724 / 543; object-fit: cover; border-radius: var(--radius) 0 0 var(--radius); box-shadow: var(--schatten); }
  .speed--mobil { left: 3%; top: 42%; width: 30%; height: 40%; }
  .speed--mobil i:nth-child(1) { --x: 0%;  --y: 30%; --l: 60px; --d: 6px; }
  .speed--mobil i:nth-child(2) { --x: 22%; --y: 32%; --l: 66px; --d: 10px; }
  .speed--mobil i:nth-child(3) { --x: 46%; --y: 34%; --l: 72px; --d: 14px; }
  .speed--mobil i:nth-child(4) { --x: 70%; --y: 36%; --l: 78px; --d: 18px; }
  .hero--start .hero__text, .hero--stelle .hero__text { padding-top: 26px; }
  .hero--stelle .hero__bilder { order: -1; padding: 88px 0 22px; }
  .hero--stelle .speed--hero { top: 46%; left: 2%; }
  .hero--stelle .speed--hero i:nth-child(n+5) { display: none; }
  .hero__titel--stelle { font-size: clamp(24px, 7.2vw, 34px); overflow-wrap: anywhere; hyphens: auto; }
  
  .hero--funnel .hero__text { padding-top: 84px; }
  .hero--funnel .stelle-zeile__chips .chip:first-child { display: none; }
  .hero--funnel .stelle-zeile__chips { margin-bottom: 8px; }
  .hero--start .hero__weiter { display: none; }
  .hero__band { margin-bottom: 20px; }
  .hero__weiter {
    display: inline-flex; align-items: center; gap: 8px; position: absolute; left: var(--rand); bottom: 16px;
    font-weight: 700; font-size: 15px; color: var(--text); text-decoration: none; z-index: 4;
  }
}

.zitatband {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(80px, 9vw, 120px) var(--rand) clamp(90px, 10vw, 140px);
  background:
    repeating-linear-gradient(135deg, transparent 0 140px, rgba(255, 255, 255, .07) 140px 230px, transparent 230px 380px),
    var(--cyan-flaeche);
  color: #fff;
}
.zitatband__strich { display: block; width: 106px; height: 8px; margin: 0 auto 44px; background: #fff; border-radius: 6px; }
.zitatband blockquote { max-width: 760px; margin: 0 auto; }
.zitatband p { font: italic 500 clamp(21px, 2vw, 27px)/1.4 var(--schrift); }

.versprechen { position: relative; padding: var(--abstand) 0; overflow: hidden; }
.versprechen__grund { position: absolute; inset: 0; z-index: -1; }
.versprechen__grund picture, .versprechen__grund img { width: 100%; height: 100%; object-fit: cover; }
.versprechen__grund img { object-position: 100% 100%; }
.versprechen__grund::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .84); }

.versprechen__grund img.versprechen__ki { position: absolute; right: 14px; bottom: 14px; z-index: 1; width: 96px; height: auto; object-fit: contain; }
.karten { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.karte {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #5e6468; border-radius: var(--radius);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--kurve);
}
.karte__bild img { width: 100%; aspect-ratio: 400 / 130; object-fit: cover; }
.karte__text { padding: 40px 38px 44px; }
.karte__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
.karte h3 { font: 800 clamp(22px, 2vw, 27px)/1.05 var(--schrift); color: var(--ueberschrift); text-transform: uppercase; letter-spacing: 1.4px; }
.karte__symbol {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 8px; background: var(--eis); color: var(--cyan-tief);
}
.karte p { font-size: 16.5px; line-height: 1.45; }

.karten .karte:nth-child(2), .karten:hover .karte:hover {
  border: 3px solid var(--cyan); box-shadow: 0 22px 34px -20px rgba(0, 120, 160, .5); transform: translateY(-4px);
}
.karten:hover .karte:not(:hover) { border: 1px solid #5e6468; box-shadow: none; transform: none; }

.kennen { padding: var(--abstand) 0; background: var(--eis); }
.kennen__kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 70px; }
.kennen__text { font-size: 18px; line-height: 1.55; text-align: justify; hyphens: auto; }
.teambild { position: relative; overflow: hidden; border-radius: 24px; box-shadow: 0 28px 50px -28px rgba(0, 60, 90, .55); }
.teambild img { width: 100%; aspect-ratio: 965 / 543; object-fit: cover; }
.teambild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(9, 202, 255, .55) 64%, var(--cyan-flaeche) 92%);
}
.teambild figcaption { position: absolute; inset: 0; z-index: 2; }
.teambild .pille--glas { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.teambild__titel {
  position: absolute; left: 6%; bottom: 10%;
  font: var(--duenn) clamp(30px, 5vw, 64px)/1 var(--schrift); text-transform: uppercase; color: #fff;
}
.teambild__titel b { font-weight: var(--fett); }

.teambild img.teambild__ki { position: absolute; top: 16px; right: 16px; z-index: 3; width: 96px; height: auto; aspect-ratio: auto; object-fit: contain; }
.speed--team { right: 0; bottom: 0; width: 40%; height: 60%; }
.speed--team i { background: rgba(255, 255, 255, .35); }
.speed--team i:nth-child(1) { --x: 6%;  --y: 98%; --l: 220px; --d: 12px; }
.speed--team i:nth-child(2) { --x: 26%; --y: 98%; --l: 260px; --d: 18px; }
.speed--team i:nth-child(3) { --x: 48%; --y: 99%; --l: 270px; --d: 26px; }
.speed--team i:nth-child(4) { --x: 70%; --y: 99%; --l: 260px; --d: 34px; }
.speed--team i:nth-child(5) { --x: 72%; --y: 46%; --l: 180px; --d: 14px; }
@media (max-width: 899px) {
  .kennen__kopf { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; }
  .kennen__text { text-align: left; }
  .teambild { border-radius: 16px; }
  .teambild__titel { font-size: 24px; bottom: 9%; }
  .teambild .pille--glas { display: none; }
  .teambild img.teambild__ki { width: 80px; top: 10px; right: 10px; }
  .speed--team i { --l: 120px !important; }
}

.stellen { padding: var(--abstand) 0; background: #fff; }
.stellen .kopfzeile { margin-bottom: 50px; }
.stellen .kopfzeile__text { margin-top: 20px; }
.stellen-liste { list-style: none; display: grid; gap: 14px; }
.stelle-zeile {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center;
  padding: 32px 48px 36px 34px; background: #fff;
  border: 2px solid var(--linie); border-radius: 12px;
  transition: border-color .3s, box-shadow .3s, transform .3s var(--kurve);
}
.stelle-zeile__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.stelle-zeile__titel { font: 800 clamp(20px, 2vw, 25px)/1.2 var(--schrift); color: var(--ueberschrift); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
.stelle-zeile__titel a { text-decoration: none; }
.stelle-zeile__titel a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.stelle-zeile__kurz { color: var(--grau); font-size: 16px; line-height: 1.55; max-width: 540px; padding-left: 4px; }
.stelle-zeile__knopf { min-width: 292px; font-size: 21px; padding: 12px 26px; }
.stelle-zeile__knopf svg { transition: transform .25s var(--kurve); }

.stelle-zeile.ist-vorne, .stellen-liste:hover .stelle-zeile:hover, .stelle-zeile:focus-within {
  border-color: #5bd0f2; box-shadow: 0 16px 30px -20px rgba(20, 40, 60, .45);
}
.stelle-zeile.ist-vorne .stelle-zeile__knopf, .stellen-liste:hover .stelle-zeile:hover .stelle-zeile__knopf,
.stelle-zeile:focus-within .stelle-zeile__knopf { background: var(--orange); border-color: var(--orange-tief); color: #fff; }
.stellen-liste:hover .stelle-zeile.ist-vorne:not(:hover) { border-color: var(--linie); box-shadow: none; }
.stellen-liste:hover .stelle-zeile.ist-vorne:not(:hover) .stelle-zeile__knopf { background: #fff; color: var(--text); border-color: var(--orange); }
.stelle-zeile:hover .stelle-zeile__knopf svg { transform: translateX(4px); }
.stellen--weitere { background: var(--eis); }
@media (max-width: 760px) {
  .stelle-zeile { grid-template-columns: 1fr; padding: 24px 20px 24px; }
  .stelle-zeile__knopf { min-width: 0; width: 100%; font-size: 18px; }
}

.umfeld { padding: var(--abstand) 0; background: #fff; }
.umfeld--eis { background: var(--eis); }
.umfeld .titel { font-size: clamp(28px, 3.9vw, 46px); }
@media (max-width: 599px) { .umfeld .titel, .express .titel { font-size: clamp(22px, 6.3vw, 30px); } }
.umfeld__text { max-width: 500px; margin: -6px 0 58px; font-size: 18px; line-height: 1.4; text-align: justify; hyphens: auto; }
.bereiche { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 18px; }
.bereich {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  min-height: 166px; padding: 30px 26px 26px; border-radius: 4px; color: #fff;
  background:
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .1) 18px 30px, transparent 30px 44px),
    var(--cyan-flaeche);
  box-shadow: 0 22px 18px -18px rgba(0, 0, 0, .35);
  transition: transform .3s var(--kurve), box-shadow .3s;
}
.bereich:hover { transform: translateY(-4px); box-shadow: 0 26px 22px -18px rgba(0, 0, 0, .4); }
.bereich__nr { font: 800 26px/1.2 var(--schrift); margin-bottom: 6px; }
.bereich__nr--wort { font-size: 23px; line-height: 1.15; }
.bereich__titel { font: 800 17px/1.25 var(--schrift); text-transform: uppercase; letter-spacing: .3px; }
.bereich__text { font: 500 15.5px/1.3 var(--schrift); }
.umfeld .knoepfe { margin-top: 64px; }

.wisch-fortschritt { display: none; }
@media (max-width: 759px) {
  .wisch {
    display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--rand) * -1); padding: 6px var(--rand) 22px;
    scroll-padding-inline: var(--rand); scrollbar-width: none;
  }
  .wisch::-webkit-scrollbar { display: none; }
  .wisch > * { flex: 0 0 82%; scroll-snap-align: start; }
  .bereiche.wisch > * { flex-basis: 72%; }
  .wisch-fortschritt {
    display: flex; align-items: center; gap: 12px; margin-top: 4px;
    font: 800 13px/1 var(--schrift); color: var(--grau);
  }
  .wisch-fortschritt button {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linie);
    background: #fff; color: var(--text); font-size: 18px; cursor: pointer;
  }
  .wisch-fortschritt__linie { flex: 1; height: 3px; background: var(--linie); border-radius: 3px; overflow: hidden; }
  .wisch-fortschritt__linie span { display: block; height: 100%; width: 30%; background: var(--cyan); border-radius: 3px; }
  .karten .karte:nth-child(2) { transform: none; }
}

.abschnitt { padding: var(--abstand) 0; }
.eckdaten { list-style: none; display: grid; gap: 8px; margin: 26px 0 0; max-width: 520px; }
.eckdaten li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.45; }
.eckdaten span { font-weight: 800; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: var(--cyan-tief); padding-top: 2px; }
.reiter__leiste { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.reiter__leiste button {
  padding: 10px 24px; border-radius: 999px; border: 1px solid var(--cyan);
  font: 600 16px/1.2 var(--schrift); color: var(--text); background: #fff; cursor: pointer;
}
.reiter__leiste button[aria-selected="true"] { background: var(--cyan-flaeche); border-color: var(--cyan-flaeche); color: #fff; font-weight: 800; }
.reiter__tafel {
  padding: 34px 38px; border: 2px solid var(--linie); border-radius: 12px; background: #fff;
}
.no-js .reiter__leiste { display: none; }
.no-js .reiter__tafel + .reiter__tafel { margin-top: 16px; }
.haken-liste { list-style: none; display: grid; gap: 14px; }
.haken-liste li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 17px; line-height: 1.5; }
.haken-liste svg { width: 26px; height: 26px; padding: 4px; border-radius: 6px; background: var(--eis); color: var(--cyan-tief); }
.reiter__zusatz { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); color: var(--grau); }
.schlagworte { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.schlagworte li { padding: 8px 16px; border-radius: 999px; background: var(--eis); font-weight: 700; font-size: 15px; }
@media (max-width: 599px) { .reiter__tafel { padding: 24px 20px; } }

.fragen { display: grid; gap: 12px; }
.frage { border: 2px solid var(--linie); border-radius: 12px; background: #fff; }
.frage summary {
  list-style: none; cursor: pointer; padding: 20px 56px 20px 24px; position: relative;
  font-weight: 800; font-size: 17px; line-height: 1.4;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font-size: 26px; font-weight: 400; color: var(--cyan-tief); transition: transform .25s;
}
.frage[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.frage[open] { border-color: #5bd0f2; }
.frage p { padding: 0 24px 22px; color: var(--grau); line-height: 1.6; }

.ablauf { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 40px; }
.ablauf li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.45; color: var(--grau); }
.ablauf b { display: block; color: var(--text); font-size: 16px; }
.ablauf__nr { font: 800 22px/1 var(--schrift); color: var(--cyan-tief); }
@media (max-width: 760px) { .ablauf { grid-template-columns: 1fr; } }

.express { padding: var(--abstand) 0; background: var(--flaeche); }
.express .titel--zeile { margin-bottom: 56px; }
.funnel-karte {
  position: relative; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 44px -26px rgba(20, 40, 60, .3);
  padding: 0 0 6px;
}
.funnel { padding: 0 54px 22px; }
.funnel__fortschritt {
  display: flex; align-items: center; gap: 20px; margin: 0 -54px 40px; padding: 22px 30px;
  border-bottom: 2px solid #eceef0;
}
.funnel__fortschritt::before { content: "Bewerbung"; font: 800 17px/1 var(--schrift); text-transform: uppercase; letter-spacing: .6px; min-width: 0; }
.funnel__balken { flex: 1; height: 8px; background: #eef0f2; border-radius: 8px; overflow: hidden; margin-left: 40px; }
.funnel__balken span { display: block; height: 100%; width: 0; background: #4fd2f5; border-radius: 8px; transition: width .45s var(--kurve); }
.funnel__zaehler { font-size: 16px; color: var(--grau-hell); min-width: 34px; text-align: right; }
.funnel__schritt { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.js-funnel .funnel__schritt:not([hidden]) { animation: schritt-rein .45s var(--kurve); }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-funnel .funnel__schritt:not([hidden]) { animation: none; } }
.funnel__frage { padding: 0; margin: 0 0 28px; width: 100%; font: 400 clamp(24px, 2.6vw, 33px)/1.22 var(--schrift); color: var(--ueberschrift); text-align: center; }
.funnel__rueckmeldung {
  margin: -12px 0 20px; padding: 12px 16px; border-radius: 8px;
  background: var(--eis); color: var(--text); font-size: 15px; line-height: 1.5;
}
.funnel__rueckmeldung:empty { display: none; }
.funnel__optionen { display: grid; gap: 14px; }
.funnel__optionen--zwei { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .funnel__optionen--zwei { grid-template-columns: 1fr; } }
.funnel__option { position: relative; display: block; cursor: pointer; }
.funnel__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.funnel__option > span {
  position: relative; display: block; padding: 22px 70px 22px 22px;
  border: 2px solid #e8eaec; border-radius: 10px; background: #fcfcfd;
  font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--text);
  transition: border-color .2s, background .2s, transform .2s var(--kurve);
}
.funnel__option > span small { display: block; margin-top: 5px; font-weight: 400; font-size: 16px; color: var(--grau-hell); }
.funnel__option > span::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 28px; height: 28px; margin-top: -14px;
  border: 2px solid #d4d8db; border-radius: 50%; background: #fff; transition: border-color .2s, background .2s, box-shadow .2s;
}
.funnel__option:hover > span { border-color: var(--cyan); transform: translateX(3px); }
.funnel__option input:checked + span { border-color: var(--cyan); background: var(--eis); }
.funnel__option input:checked + span::after { border-color: var(--cyan); background: var(--cyan); box-shadow: inset 0 0 0 5px #fff; }
.funnel__option input:focus-visible + span { outline: 3px solid var(--cyan-tief); outline-offset: 2px; }
.funnel__option[hidden] { display: none; }
.funnel__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.funnel__nav [hidden] { display: none; }
.funnel__nav [data-weiter] { margin-left: auto; }
.funnel__hinweise { margin: 26px 0 8px; text-align: center; font-size: 17px; color: var(--grau-hell); }
.funnel__hinweise span { margin: 0 8px; }
.funnel__telefon { margin: 0 0 16px; text-align: center; font-size: 15px; color: var(--grau); }
.funnel__telefon a { font-weight: 800; color: var(--text); }
@media (max-width: 599px) {
  .funnel { padding: 0 20px 18px; }
  .funnel__fortschritt { margin: 0 -20px 28px; padding: 18px 20px; gap: 12px; }
  .funnel__fortschritt::before { font-size: 14px; }
  .funnel__balken { margin-left: 0; }
  .funnel__option > span { font-size: 17px; padding: 18px 58px 18px 18px; }
  .funnel__option > span small { font-size: 14.5px; }
  .funnel__option > span::after { right: 18px; width: 24px; height: 24px; margin-top: -12px; }
}

.form__group { margin-bottom: 16px; }
.form__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .form__zeile { grid-template-columns: 1fr; } }
.form__group label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 15px; }
.form__group input[type="text"], .form__group input[type="tel"], .form__group input[type="email"],
.form__group select, .form__group textarea, .form__group input[type="file"] {
  width: 100%; padding: 14px 16px; border: 2px solid #e1e4e6; border-radius: 10px;
  font: 400 17px/1.4 var(--schrift); color: var(--text); background: #fff;
}
.form__group input[type="file"] { padding: 10px; font-size: 15px; }
.form__group input:focus, .form__group select:focus, .form__group textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 204, 255, .2); }
.form__group [aria-invalid="true"] { border-color: #b3261e; }
.form__hint, .form__optional { font-size: 14px; line-height: 1.5; color: var(--grau); font-weight: 400; }
.form__hint { margin: -14px 0 18px; }
.form__error { display: block; margin-top: 6px; font-weight: 700; font-size: 14px; color: #b3261e; }
.form__note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.form__note:empty { display: none; }
.form__note--err { color: #b3261e; font-weight: 700; }
.form__note--ok { color: #1e6b35; font-weight: 700; }
.req { color: var(--orange-tief); }
.form__group--check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin-top: 10px; }
.form__group--check input { width: 22px; height: 22px; margin: 3px 0 0; accent-color: var(--cyan-tief); }
.form__group--check label { font-weight: 400; font-size: 14.5px; line-height: 1.6; color: var(--grau); }
.funnel__mehr { margin: 4px 0 14px; border: 2px solid #eceef0; border-radius: 10px; }
.funnel__mehr summary { padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 15px; }
.funnel__mehr[open] summary { border-bottom: 2px solid #eceef0; }
.funnel__mehr > :not(summary) { margin-left: 18px; margin-right: 18px; }
.funnel__mehr > summary + * { margin-top: 16px; }
.funnel__senden { width: 100%; margin-top: 18px; padding-top: 16px; padding-bottom: 16px; }

.funnel-sticky {
  display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  padding: 16px 20px; border-radius: 10px; text-align: center; text-decoration: none;
  font-weight: 800; font-size: 17px; color: #fff; background: var(--orange);
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4);
  transition: transform .35s var(--kurve), opacity .35s;
}
.funnel-sticky:hover { color: #fff; }
.funnel-sticky.is-weg { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (max-width: 899px) { .funnel-sticky { display: block; } body.hat-sticky { padding-bottom: 80px; } }

.hero--funnel { min-height: 0; }
.hero--funnel .hero__text { padding-bottom: 60px; }
.hero__funnel { padding: 140px max(var(--rand), calc((100vw - 1263px) / 2)) 60px clamp(20px, 3vw, 40px); }
.hero--funnel .funnel-karte { box-shadow: 0 24px 44px -26px rgba(20, 40, 60, .4); }
.hero--funnel .funnel { padding: 0 28px 16px; }
.hero--funnel .funnel__fortschritt { margin: 0 -28px 26px; padding: 18px 22px; }
.hero--funnel .funnel__balken { margin-left: 12px; }
.hero--funnel .funnel__frage { font-size: clamp(21px, 2vw, 26px); }

.hero--funnel .hero__titel--stelle { font-weight: var(--duenn); }
.hero--funnel .hero__titel--stelle b { font-weight: var(--fett); }
.hero--funnel .funnel__option > span { font-size: 17px; padding: 16px 56px 16px 18px; }
@media (max-width: 899px) and (max-height: 760px) {
  .hero--funnel .hero__lead { display: none; }
}
@media (max-width: 899px) {
  .hero__funnel { padding: 14px var(--rand) 48px; background: var(--eis); }
  .hero--funnel .hero__text { padding-bottom: 18px; }
  .hero--funnel .funnel__fortschritt { margin-bottom: 18px; padding: 14px 18px; }
  .hero--funnel .funnel__frage { margin-bottom: 16px; }
}

.danke, .leer { padding: 170px var(--rand) var(--abstand); max-width: 900px; margin: 0 auto; text-align: center; }
.danke__haken { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 24px; border-radius: 50%; background: var(--cyan-flaeche); color: #fff; }
.danke__haken svg { width: 38px; height: 38px; }
.danke__lead { font-size: 19px; margin-bottom: 40px; }
.danke .ablauf { text-align: left; }
.danke p { margin-bottom: 18px; }
.leer p { margin-top: 20px; }

.recht { padding: 170px 0 var(--abstand); }
.recht h2 { font-weight: 800; font-size: 20px; margin: 34px 0 10px; color: var(--ueberschrift); }
.recht h3 { font-weight: 800; font-size: 17px; margin: 26px 0 8px; }
.recht p, .recht li { line-height: 1.65; margin-bottom: 12px; }
.recht ul { padding-left: 22px; }
.recht a { color: var(--cyan-tief); }
.ai-hinweis { display: flex; align-items: center; gap: 10px; }
.ai-hinweis img { width: 20px; height: 20px; flex: none; }
@media (max-width: 899px) { .recht, .danke, .leer { padding-top: 120px; } }

.fuss { background: var(--cyan-fuss); color: #fff; padding: 76px 0 40px; }
.fuss__innen {
  width: min(100% - 2 * var(--rand), 880px); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 40px;
}
.fuss__marke img { width: 300px; max-width: 100%; height: auto; }
.fuss__marke p { margin-top: 12px; font-size: 17px; line-height: 1.2; }
.fuss__titel { font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; }
.fuss__spalte p { font-weight: 600; font-size: 14.5px; margin-bottom: 10px; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss__copy {
  width: min(100% - 2 * var(--rand), var(--breite)); margin: 46px auto 0; padding-top: 36px;
  border-top: 1px solid rgba(255, 255, 255, .35); text-align: center; font-size: 13px; font-weight: 600; opacity: .9;
}
@media (max-width: 760px) {
  .fuss__innen { grid-template-columns: 1fr; gap: 28px; }
  .fuss__marke img { width: 240px; }
}

@media (max-width: 1080px) and (min-width: 760px) {
  .karten { grid-template-columns: 1fr 1fr; }
  .bereiche { grid-template-columns: 1fr 1fr; }
  .karte__text { padding: 32px 28px; }
}

#vorschau-hinweis { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(.5rem); z-index: 1200;
  max-width: min(34rem, calc(100vw - 2rem)); background-color: #333; color: #fff; border-radius: 10px; padding: .8rem 1.1rem;
  font-size: .95rem; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.3); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s; }
#vorschau-hinweis.is-da { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#vorschau-fahne { position: fixed; right: 0; top: 0; z-index: 1201; background-color: #333; color: #fff; font-size: .6rem; line-height: 1.2;
  letter-spacing: .06em; text-transform: uppercase; padding: .12rem .5rem; border-bottom-left-radius: 6px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #vorschau-hinweis { transition: none; } }