* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font); min-height: 100vh; }
.funnel { max-width: 640px; margin: 0 auto; padding: 24px 16px 60px; }
.logo { max-height: 56px; display: block; margin: 0 auto 16px; }
.progress { height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; margin-bottom: 28px; }
.progress-bar { height: 100%; width: 0; background: var(--primary); transition: width .35s ease; }
#stage { position: relative; }

.page { animation-duration: .35s; animation-fill-mode: both; }
.anim-slide.enter { animation-name: slideIn; }
.anim-fade.enter { animation-name: fadeIn; }
.anim-none.enter { animation: none; }
@keyframes slideIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.block { margin-bottom: 22px; }
.block h1 { font-size: 1.7rem; line-height: 1.25; }
.block p.body-text { font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--text) 80%, transparent); }
.block img.media, .block video.media { width: 100%; border-radius: var(--radius); display: block; }
.block iframe.media { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }
.q-label { font-weight: 600; margin-bottom: 10px; display: block; font-size: 1.05rem; }
.q-label .req { color: #dc2626; }

.choices { display: grid; gap: 10px; }
.choices.tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.choice { border: 2px solid rgba(0,0,0,.12); background: #fff; border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font-size: 1rem; text-align: left; transition: border-color .15s, background .15s; display: flex; align-items: center; gap: 10px; }
.choice img { width: 100%; border-radius: calc(var(--radius) - 4px); }
.choices.tiles .choice { flex-direction: column; text-align: center; }
.choice.selected { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], textarea, select {
  width: 100%; padding: 13px 14px; font-size: 1rem; border: 2px solid rgba(0,0,0,.12); border-radius: var(--radius); background: #fff; font-family: inherit;
}
input:focus, textarea:focus { outline: none; border-color: var(--primary); }
textarea { min-height: 110px; resize: vertical; }

.slider-wrap { display: flex; align-items: center; gap: 14px; }
.slider-wrap input[type=range] { flex: 1; accent-color: var(--primary); }
.slider-value { font-weight: 700; min-width: 44px; text-align: right; }

.rating { display: flex; gap: 6px; }
.rating button { font-size: 1.8rem; background: none; border: none; cursor: pointer; filter: grayscale(1); transition: filter .1s, transform .1s; }
.rating button.on { filter: none; transform: scale(1.15); }

.file-drop { border: 2px dashed rgba(0,0,0,.2); border-radius: var(--radius); padding: 22px; text-align: center; cursor: pointer; background: #fff; }
.file-drop.has-file { border-color: var(--primary); }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.consent input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--primary); }

.nav { display: flex; gap: 12px; margin-top: 30px; }
.btn { border: none; border-radius: var(--radius); padding: 15px 26px; font-size: 1.05rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform .1s, opacity .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; flex: 1; }
.btn-ghost { background: transparent; color: var(--text); opacity: .6; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.error { color: #dc2626; font-size: .9rem; margin-top: 8px; display: none; }
.error.show { display: block; }
.ending { text-align: center; padding: 40px 0; }
.ending .check { font-size: 3.4rem; margin-bottom: 14px; }
.divider { border: none; border-top: 1px solid rgba(0,0,0,.1); }
.spacer { height: 24px; }

.consent a, .block a { color: var(--primary); text-decoration: underline; }
.legal-footer { margin-top: 40px; text-align: center; font-size: 12.5px; opacity: .65; }
.legal-footer a { color: inherit; text-decoration: underline; }

/* Sprachumschalter */
.lang-switch { display: flex; gap: 4px; justify-content: flex-end; margin-bottom: 10px; }
.lang-btn { border: 1px solid rgba(0,0,0,.12); background: #fff; color: inherit; border-radius: 99px;
  padding: 3px 11px; font-size: 12px; font-weight: 700; cursor: pointer; opacity: .55; font-family: inherit; }
.lang-btn.on { opacity: 1; border-color: var(--primary); color: var(--primary); }

/* Stellenbeschreibung: steht sichtbar unter dem Formular, weil Google den
   Stellentext auf derselben Seite wie die JobPosting-Auszeichnung verlangt.
   Nicht ausblenden – das wäre ein Richtlinienverstoß. */
.job-description { max-width: 620px; margin: 0 auto; padding: 34px 22px 60px; line-height: 1.65;
  color: var(--text); opacity: .9; }
.job-description h1 { font-size: 1.35rem; margin: 0 0 14px; font-weight: 700; }
.job-description p { margin: 0 0 13px; }

/* Startseite einer Kundendomain: Liste der offenen Stellen. Nutzt bewusst
   dieselben Variablen wie der Funnel, damit der Auftritt zusammenpasst. */
.landing { text-align: left; }
.landing h1 { font-size: 1.8rem; margin: 0 0 4px; }
.landing-sub { margin: 0 0 26px; opacity: .65; }
.landing-empty { opacity: .7; }
.job-list { list-style: none; margin: 0; padding: 0; }
.job-list li { margin-bottom: 10px; }
.job-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; border-radius: var(--radius); background: #fff; text-decoration: none;
  color: var(--text); border: 1px solid rgba(15,23,42,.09); transition: border-color .15s, transform .1s; }
.job-list a:hover { border-color: var(--primary); transform: translateY(-1px); }
.job-name { font-weight: 600; }
.job-go { color: var(--primary); font-weight: 600; font-size: .9rem; white-space: nowrap; }