/* Hausschrift Poppins, selbst ausgeliefert (SIL Open Font License).
   Bewusst nicht ueber das Google-CDN: von dort wuerde bei jedem Aufruf die
   IP des Bewerbers an Google gehen. font-display: swap zeigt sofort die
   Ersatzschrift, der Funnel startet also nicht mit leerer Seite. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/poppins-700.woff2') format('woff2'); }

* { 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); }
/* Datei war gewaehlt, ist aber beim Neuladen verloren gegangen */
.file-drop.needs-file { border-color: #d97706; color: #b45309; }

.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; }

/* ---------- Eingebettet ---------- */
/* Ohne diese Regel misst sich der Funnel selbst falsch: body hat min-height:100vh,
   und im Rahmen ist die Sichthoehe genau die Rahmenhoehe. Der Funnel meldet also
   immer exakt die Hoehe, die der Rahmen ohnehin schon hat – eine Rueckkopplung,
   die die Hoehe auf dem Startwert einfriert. Sie kann dann nur noch wachsen,
   wenn der Inhalt laenger wird, und nie wieder schrumpfen.

   Eingebettet zaehlt allein der Inhalt. Die Mindesthoehe kommt vom Rahmen. */
body.eingebettet { min-height: 0; }
/* Der Aussenabstand wuerde sonst doppelt wirken: einmal hier, einmal durch den
   Abstand, den der Kunde um das Einbett-Element herum setzt. */
body.eingebettet .funnel { padding-top: 12px; padding-bottom: 12px; }