/* Schrift lokal, keine Verbindung zu Google */
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/urbanist-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/urbanist-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; }

/* Aus dem Design übernommen */

body { margin: 0; font-family: Urbanist, 'Avenir Next', 'Segoe UI', sans-serif; background: #F2F4F8; color: #16243D; -webkit-font-smoothing: antialiased; }
a { color: #31538A; }
a:hover { color: #1C3359; }
h1, h2, h3, h4 { font-family: Urbanist, 'Avenir Next', 'Segoe UI', sans-serif; margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.st-btn { transition: filter 200ms ease, translate 200ms cubic-bezier(0.23, 1, 0.32, 1), scale 160ms ease; }
.st-btn:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) { .st-btn:hover { filter: brightness(1.08); translate: 0 -1px; } .st-card:hover { translate: 0 -3px; box-shadow: 0 24px 50px rgba(22, 36, 61, 0.10); } }
.st-card { transition: translate 250ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 250ms cubic-bezier(0.23, 1, 0.32, 1); }
.st-faq summary { list-style: none; cursor: pointer; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq .st-chev { transition: rotate 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.st-faq[open] .st-chev { rotate: 45deg; }
.st-faq[open] { box-shadow: 0 12px 32px rgba(22, 36, 61, 0.08); }
:where(a, button, summary, input, select):focus-visible { outline: 2px solid #31538A; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
@keyframes stIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes stPop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
.st-hero-text > * { animation: stIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; }
.st-hero-text > *:nth-child(2) { animation-delay: 0.08s; }
.st-hero-text > *:nth-child(3) { animation-delay: 0.16s; }
.st-hero-text > *:nth-child(4) { animation-delay: 0.24s; }
.st-hero-text > *:nth-child(5) { animation-delay: 0.32s; }
.st-pop { animation: stPop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.55s both; }
.st-pop2 { animation: stPop 0.6s cubic-bezier(0.23, 1, 0.32, 1) 0.8s both; }
}

/* Cookie-Banner (Design) */
.ck-btn { height: 46px; padding: 0 22px; border-radius: 10px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; transition: filter 180ms ease, scale 140ms ease; }
.ck-btn:active { scale: 0.97; }
.ck-solid { background: #31538A; color: #FFFFFF; border: 2px solid #31538A; }
.ck-line { background: #FFFFFF; color: #16243D; border: 2px solid #16243D; }
.ck-link { background: none; border: 0; padding: 0; font-family: inherit; font-size: 14px; font-weight: 700; color: #16243D; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ck-btn:hover { filter: brightness(1.08); } .ck-line:hover { background: #F2F4F8; filter: none; } }
.ck-switch { width: 46px; height: 28px; border-radius: 100px; border: 0; padding: 3px; cursor: pointer; display: flex; transition: background-color 180ms ease; flex-shrink: 0; }
.ck-knob { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(22, 36, 61, 0.3); transition: translate 200ms cubic-bezier(0.23, 1, 0.32, 1); }
@media (prefers-reduced-motion: no-preference) {
@keyframes ckUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.ck-in { animation: ckUp 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0.6s both; }
}

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target, [id] { scroll-margin-top: 16px; }
img { max-width: 100%; }
.st-page { width: 100%; max-width: 100%; overflow-x: clip; background: #FFFFFF; display: flex; flex-direction: column; position: relative; }
.st-page > section, .st-page > footer, .st-page > header, .st-page > .st-topbar { width: 100%; box-sizing: border-box; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: #FFFFFF; color: #16243D; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Inhalte auf großen Bildschirmen begrenzen, Hintergründe laufen voll durch */
@media (min-width: 1441px) {
  .st-page > section, .st-page > footer, .st-page > header, .st-page > .st-topbar { padding-left: calc((100% - 1240px) / 2) !important; padding-right: calc((100% - 1240px) / 2) !important; }
}

/* ---------- Header + Menü ---------- */
.st-menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid #DDE3EC; background: #FFFFFF; align-items: center; justify-content: center; cursor: pointer; }
.st-mobile-nav { display: flex; flex-direction: column; background: #FFFFFF; padding: 4px 20px 24px; border-bottom: 1px solid #DDE3EC; box-shadow: 0 20px 40px rgba(22, 36, 61, 0.12); position: relative; z-index: 4; }
.st-mobile-nav[hidden] { display: none; }
.st-mobile-nav a { padding: 15px 0; border-bottom: 1px solid #DDE3EC; color: #16243D; text-decoration: none; font-weight: 700; font-size: 19px; }
.st-mobile-nav .st-mobile-cta { margin-top: 18px; border: 0; background: #31538A; color: #FFFFFF; border-radius: 10px; padding: 17px 20px; text-align: center; font-size: 16px; }

/* ---------- Formular ---------- */
.st-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.st-turnstile { min-height: 65px; }
.st-form-status { font-size: 14px; line-height: 1.5; color: #2E7D4F; min-height: 0; text-align: center; }
.st-form-status:empty { display: none; }
.st-form-status.is-error { color: #B4233C; font-weight: 600; }
.st-form [aria-invalid="true"] { border-color: #B4233C !important; background: #FDF2F3 !important; }
.st-submit:disabled { opacity: 0.6; cursor: progress; }
.st-form input:focus, .st-form select:focus { border-color: #31538A !important; background: #FFFFFF !important; }

/* ---------- Formular in 2 Schritten ---------- */
.st-form { scroll-margin-top: 88px; }
.st-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sf-legend { padding: 0; margin: 0 0 2px; font-size: 17px; font-weight: 800; color: #16243D; }
.sf-progress { display: none; flex-direction: column; gap: 8px; }
.st-form.is-steps .sf-progress { display: flex; }
.sf-progress-label { font-size: 13px; font-weight: 700; color: #5A6880; }
.sf-bar { height: 6px; border-radius: 6px; background: #E3E9F1; overflow: hidden; }
.sf-bar > span { display: block; height: 100%; width: 50%; background: #31538A; border-radius: 6px; transition: width 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.st-form[data-step="2"] .sf-bar > span { width: 100%; }
.st-form.is-steps .sf-step { display: none; }
.st-form.is-steps[data-step="1"] .sf-step[data-step="1"], .st-form.is-steps[data-step="2"] .sf-step[data-step="2"] { display: flex; }
.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-tile { position: relative; cursor: pointer; }
.sf-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-tile span { display: flex; align-items: center; min-height: 52px; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid #DDE3EC; border-radius: 10px; background: #F2F4F8; font-size: 15px; font-weight: 700; color: #16243D; line-height: 1.25; transition: border-color 150ms ease, background-color 150ms ease; }
.sf-tile:hover span { border-color: #A9BEE0; }
.sf-tile input:checked + span { border-color: #31538A; background: #EEF3FB; box-shadow: inset 0 0 0 1px #31538A; }
.sf-tile input:focus-visible + span { outline: 2px solid #31538A; outline-offset: 2px; }
.sf-tiles.is-invalid .sf-tile span { border-color: #B4233C; }
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sf-field { display: flex; flex-direction: column; gap: 7px; }
.sf-field label { font-size: 14px; font-weight: 700; color: #16243D; }
.sf-opt { font-weight: 500; color: #5A6880; }
.sf-input { height: 52px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid #DDE3EC; border-radius: 10px; background: #F2F4F8; font-family: inherit; font-size: 16px; color: #16243D; width: 100%; }
.sf-input::placeholder { color: #8A96AB; }
.sf-hint { font-size: 13px; line-height: 1.4; color: #5A6880; }
.sf-error { font-size: 13px; line-height: 1.4; font-weight: 600; color: #B4233C; }
.sf-error[hidden] { display: none; }
.st-submit, .sf-next { border: 0; cursor: pointer; box-sizing: border-box; background: #31538A; color: #FFFFFF; font-family: inherit; font-weight: 700; font-size: 17px; padding: 19px 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.sf-back { align-self: center; background: none; border: 0; padding: 4px; font-family: inherit; font-size: 14px; font-weight: 700; color: #5A6880; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: none; }
.st-form.is-steps .sf-back { display: inline; }
.st-form:not(.is-steps) .sf-next { display: none; }
.sf-trust { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 0; }
.sf-trust li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #16243D; }
.sf-trust svg { flex-shrink: 0; }
@media (max-width: 900px) { .sf-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sticky-Leiste (mobil) ---------- */
.st-sticky { display: none !important; }

/* ---------- Cookie-Banner ---------- */
.ck-wrap { position: fixed; z-index: 60; left: 50%; bottom: 24px; translate: -50% 0; width: min(1120px, calc(100% - 32px)); }
.ck-wrap[hidden] { display: none; }
.ck-panel { background: #FFFFFF; border: 1px solid #DDE3EC; border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(22, 36, 61, 0.35); padding: 18px 20px 18px 28px; box-sizing: border-box; }
.ck-panel[hidden] { display: none; }
.ck-row { display: flex; align-items: center; gap: 28px; }
.ck-row p { flex: 1; font-size: 15px; line-height: 1.5; color: #4B5A72; }
.ck-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ck-settings { width: min(640px, 100%); margin-left: auto; margin-right: auto; }
.ck-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #DDE3EC; }
.ck-item span span { font-size: 13px; line-height: 1.45; color: #4B5A72; }
.ck-switch[aria-checked="true"] { background: #31538A; }
.ck-switch[aria-checked="false"] { background: #C9D1DC; }
.ck-switch[aria-checked="true"] .ck-knob { translate: 18px 0; }
.ck-solid { background: #31538A; border-color: #31538A; color: #FFFFFF; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1100px) {
  .home .st-nav > a:not(.st-btn) { display: none; }
}
@media (max-width: 900px) {
  .home .st-topbar { display: none !important; }
  .home .st-header { height: 68px !important; padding: 0 20px !important; position: sticky; top: 0; z-index: 20; }
  .home .st-header img[alt=""] { width: 27px !important; height: 32px !important; }
  .home .st-header img[alt="Seitentalent"] { width: 125px !important; height: 20px !important; }
  .home .st-nav { display: none !important; }
  .home .st-menu-btn { display: flex; }

  .home .st-sec { padding: 56px 20px !important; gap: 32px !important; }
  .home .st-hero { padding: 40px 20px 56px !important; }
  .home .st-sec[style*="display: grid"] { display: flex !important; flex-direction: column !important; }
  .home .st-sec[style*="align-items: center; gap: 80px"] { flex-direction: column !important; align-items: stretch !important; }
  .home .st-sec > div[style*="position: relative; height: 560px"] { height: 430px !important; width: 100% !important; }
  .home .st-sec > div[style*="position: relative; height: 560px"] > div { left: 14px !important; right: auto !important; top: 14px !important; bottom: auto !important; padding: 10px 14px !important; }
  .home .st-sec > div[style*="position: relative; height: 560px"] > div img { display: none !important; }

  .home h1.st-h1-home { font-size: 38px !important; line-height: 1.06 !important; }
  .home .st-sec h2 { font-size: 32px !important; line-height: 1.12 !important; }
  .home .st-sec h3 { font-size: 21px !important; }
  .home .st-sec p[style*="font-size: 19px"], .home .st-sec p[style*="font-size: 18px"] { font-size: 17px !important; }

  /* Reihen mit Pfeilen / Plus zwischen Karten werden zu Spalten */
  .home [style*="grid-template-columns: minmax(0, 1fr) 40px"], .home [style*="grid-template-columns: minmax(0, 1fr) 44px"] { display: flex !important; flex-direction: column !important; }
  .home [style*="grid-template-columns: minmax(0, 1fr) 40px"] > div[aria-hidden="true"], .home [style*="grid-template-columns: minmax(0, 1fr) 44px"] > div[aria-hidden="true"] { transform: rotate(90deg); margin: -4px 0; }
  .home .st-sec [style*="grid-template-columns: repeat(3"], .home .st-sec [style*="grid-template-columns: repeat(4"], .home .st-sec [style*="grid-template-columns: repeat(2"]:not(.st-form *) { grid-template-columns: minmax(0, 1fr) !important; }
  .home .st-form [style*="grid-template-columns: repeat(2"] { grid-template-columns: minmax(0, 1fr) !important; }
  .home .st-sec ul[style*="display: flex; gap: 28px"] { flex-direction: column !important; gap: 12px !important; }
  .home .st-sec [style*="justify-content: space-between; gap: 40px"] { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
  .home .st-sec [style*="width: 540px"], .home .st-sec [style*="width: 560px"], .home .st-sec [style*="width: 470px"] { width: 100% !important; }
  .home .st-sec [style*="padding: 32px;"], .home .st-sec [style*="padding: 36px;"] { padding: 22px !important; }
  .home .st-sec [style*="padding: 34px 44px"] { padding: 26px 22px !important; }
  .home .st-sec [style*="font-size: 56px"] { font-size: 44px !important; }
  .home .st-sec a.st-btn { width: 100%; justify-content: center; box-sizing: border-box; white-space: normal; }
  .home .st-sec [style*="grid-template-columns: minmax(0, 1.3fr)"] { grid-template-columns: minmax(0, 1fr) !important; padding: 14px 14px 24px !important; gap: 22px !important; }
  .home .st-sec [style*="justify-content: space-between; gap: 32px"] { flex-direction: column !important; align-items: stretch !important; gap: 20px !important; }
  .home .st-sec [style*="display: flex; gap: 48px"] { flex-wrap: wrap !important; gap: 18px 28px !important; }
  .home .st-sec [style*="grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 0"] { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; }
  .home .st-sec [style*="font-size: 38px; line-height: 1; font-weight: 800"] { font-size: 32px !important; }
  .home .st-sec h3[style*="font-size: 32px"] { font-size: 26px !important; }
  .home .st-sec figure[style*="padding: 44px"] { padding: 24px 20px !important; }
  .home .st-sec blockquote { font-size: 19px !important; }
  .home .st-sec [style*="width: 920px"] { width: 100% !important; }
  .home .st-sec summary { font-size: 17px !important; padding: 18px 18px !important; }
  .home footer { padding: 48px 20px 110px !important; }
  .home footer > div { flex-direction: column !important; gap: 20px !important; }

  .st-sticky { display: flex !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #FFFFFF; border-top: 1px solid #DDE3EC; box-shadow: 0 -10px 30px rgba(22, 36, 61, 0.12); padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; translate: 0 110%; transition: translate 260ms cubic-bezier(0.23, 1, 0.32, 1); }
  .st-sticky.is-visible { translate: 0 0; }

  .ck-wrap { left: 0; right: 0; bottom: 0; translate: none; width: 100%; }
  .ck-panel { border-radius: 18px 18px 0 0; border: 0; box-shadow: 0 -12px 40px rgba(22, 36, 61, 0.18); padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
  .ck-row { flex-direction: column; align-items: stretch; gap: 14px; }
  .ck-row p { font-size: 14px; }
  .ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ck-actions .ck-link { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin: 0 !important; }
  .ck-settings { width: 100%; }
  .ck-settings .ck-foot { display: grid !important; grid-template-columns: 1fr 1fr; }
  .ck-settings .ck-foot .ck-btn { min-width: 0 !important; padding: 0 10px; }
}