/* ============================================================
   PHYSIOPARK Karriere: was nur die Subdomain braucht (seit 08.10.2026)

   Lädt NACH seiten.css und nur auf karriere.physiopark.berlin. Kopf, Fuß,
   Bühne, Wischreihen und alle übrigen Bauteile kommen unverändert aus dem
   gemeinsamen Bestand von physiopark.berlin. Hier steht nur:

     F1  Funnel (Karte, Fortschritt, Kacheln, Felder), aus der Live-Quelle
         01_karriereseite/website/assets/css/style.css übernommen und auf die
         Token der Website abgebildet. Kacheln typografisch: ohne
         Strichsymbol im Pastellquadrat (Agenturregel 02.10.2026).
     F2  Funnelseiten /bewerben/<kurz>/: Kopf nur Logo, erste Frage im
         ersten Bildschirm bei 390 × 844 (SOP-K Ebene 2).
     F3  Einwilligungsbanner (tracking.js), auf Funnelseiten als schmale
         Leiste, damit es die erste Frage nicht verdeckt (09 Abschnitt 8.2).
     F4  Kleinteile der Karriere: Eckdaten, Stimmen, Belegzeile.
   ============================================================ */

:root {
  --fokus: #D2551A;               /* 4,15:1 auf Weiß, 3,82:1 auf gewählter Kachel */
  --kachel-rand: #8E9093;         /* 3,2:1 auf Weiß (WCAG 1.4.11) */
  --kachel-gewaehlt: #F1F8E4;
}

/* ============================================================
   F1  FUNNEL
   ============================================================ */

.bewerben-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--m16);
  align-items: start;
}
@media (min-width: 981px) {
  .bewerben-text { position: sticky; top: calc(var(--kopf-hoehe) + 48px); }
}
@media (max-width: 980px) {
  .bewerben-grid { grid-template-columns: minmax(0, 1fr); gap: var(--m10); }
}
.bewerben-hotline { margin-top: var(--m5); }
.bewerben-hotline a { color: var(--gruen-link); font-weight: 700; white-space: nowrap; }
.bewerben-stelle {
  margin-top: var(--m5);
  padding: var(--m3) var(--m4);
  border-left: 3px solid var(--gruen);
  background: var(--karte-hell);
  border-radius: 0 var(--bogen-feld) var(--bogen-feld) 0;
}
.bewerben-stelle strong { color: var(--tinte); }

.bewerben-anker { list-style: none; margin: var(--m8) 0 0; padding: 0; max-width: 420px; }
.bewerben-anker li { position: relative; padding-left: 30px; margin-bottom: var(--m5); }
.bewerben-anker li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--gruen);
}
.bewerben-anker strong { display: block; color: var(--tinte); margin-bottom: 2px; }
.bewerben-anker span { font-size: var(--grad-s); line-height: 1.5; }

.funnel-karte {
  background: #fff;
  border: 1px solid #E4EED2;
  border-radius: 20px;
  padding: 34px 32px 30px;
  box-shadow: var(--schatten-2);
}

/* Fortschritt */
.funnel-fortschritt { margin-bottom: var(--m8); }
.fortschritt-punkte {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.fortschritt-punkte li {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  transition: color .2s ease;
}
.fortschritt-punkte li.erledigt { color: var(--gruen-link); }
.fortschritt-punkte li.aktiv { color: #B15D32; }
.fortschritt-punkte li.aktiv span { border-bottom: 2px solid #B15D32; padding-bottom: 2px; }
.fortschritt-punkte li.erledigt span::before { content: "✓ "; }
.fortschritt-schiene { height: 6px; background: #E4EED2; border-radius: 3px; overflow: hidden; }
.fortschritt-fuellung {
  height: 100%;
  width: 20%;
  background: var(--gruen-dunkel);
  border-radius: 3px;
  transition: width .35s ease;
}

/* Fragen und Kacheln */
.kachel-gruppe { border: none; margin: 0 0 30px; padding: 0; min-width: 0; }
.kachel-gruppe:last-of-type { margin-bottom: 0; }
.funnel-frage {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.24rem;
  line-height: 1.3;
  color: var(--tinte);
  margin: 0 0 6px;
  padding: 0;
}
.funnel-hilfe { font-size: .86rem; margin: 0 0 18px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel-breit { grid-column: 1 / -1; }
.kachel[hidden] { display: none; }
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 13px 40px 14px 16px;
  border: 2px solid var(--kachel-rand);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.kachel input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
.kachel-titel {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: .98rem;
  color: var(--tinte);
  line-height: 1.25;
}
/* Stunden: die Zahl groß (09 Abschnitt 3.0) */
.kachel-zahl {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gruen-dunkel);
}
.kachel-zusatz { font-size: .8rem; color: var(--tinte-weich); line-height: 1.3; }
.kachel:hover { border-color: var(--gruen); background: #FAFDF4; }
.kachel:hover:not(.gewaehlt) { transform: translateY(-2px); }
.kachel:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; border-color: var(--gruen); }
.kachel:has(input:checked),
.kachel.gewaehlt { border-color: var(--gruen-dunkel); background: var(--kachel-gewaehlt); transform: none; }
.kachel::after {
  content: "✓";
  position: absolute;
  top: 50%; right: 12px;
  width: 21px; height: 21px;
  margin-top: -10.5px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: var(--gruen-dunkel);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.kachel:has(input:checked)::after,
.kachel.gewaehlt::after { opacity: 1; transform: scale(1); }

.funnel-antwort {
  font-size: .88rem;
  line-height: 1.5;
  color: var(--gruen-link);
  background: var(--kachel-gewaehlt);
  border-left: 3px solid var(--gruen);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 0 0 24px;
}
.funnel-antwort:empty { display: none; }
.funnel-antwort.ist-neu { animation: funnel-schritt-auf .3s ease backwards; }

/* Felder */
.feld-optional { font-weight: 400; color: var(--tinte-weich); font-size: .85em; }
.funnel-karte .formfeld { margin-bottom: 22px; }
.funnel-karte .formfeld label { display: block; font-size: .92rem; color: var(--tinte); margin-bottom: 8px; }
.funnel-karte .formfeld input {
  width: 100%;
  font-family: var(--font-text);
  font-size: 1rem;
  color: var(--tinte);
  border: 1.5px solid var(--gruen-mittel);
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(85, 86, 90, .07);
}
.funnel-karte .formfeld input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-color: var(--gruen-dunkel); }
.funnel-karte .formfeld.hat-fehler input { border-color: #B3401A; }
.feld-fehler { display: block; font-size: .82rem; line-height: 1.4; color: #B3401A; margin-top: 6px; }
.kachel-gruppe.hat-fehler .kacheln { outline: 2px solid #B3401A; outline-offset: 6px; border-radius: 12px; }
.funnel-karte .formfeld-datei input[type="file"] {
  font-size: .92rem;
  border-style: dashed;
  padding: 10px 12px;
  box-shadow: none;
}
.funnel-karte .formfeld-datei input[type="file"]::file-selector-button {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--orange-aktion);
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  margin-right: 12px;
  cursor: pointer;
}
.feld-hinweis { display: block; font-size: .78rem; line-height: 1.45; color: var(--tinte-leise); margin-top: 7px; }
.formfeld-checkbox { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; margin-bottom: 26px; }
.formfeld-checkbox input { flex: none; margin-top: 2px; width: 22px; height: 22px; accent-color: var(--gruen-dunkel); }
.formfeld-checkbox input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.formfeld-checkbox label a { color: var(--gruen-link); }
.formfeld-checkbox.hat-fehler label { color: #B3401A; }

.funnel-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; }
.funnel-buttons .btn { justify-content: center; text-align: center; }
@media (min-width: 561px) {
  .funnel-buttons { flex-direction: row; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .funnel-buttons .btn-outline { order: -1; }
}

/* Ein Schritt je Bildschirm, aber nur mit Skript. Ohne Skript stehen alle
   Schritte untereinander und das Formular geht als normaler POST ab
   (SOP-K: Test ohne JavaScript je Seitentyp). */
html.js .funnel-schritt { display: none; }
html.js .funnel-schritt.aktiv { display: block; }
html:not(.js) .funnel-schritt + .funnel-schritt { margin-top: var(--m8); padding-top: var(--m8); border-top: 1px solid #EAF0DC; }
html:not(.js) .funnel-buttons button[type="button"] { display: none; }
@keyframes funnel-schritt-auf { from { opacity: 0; transform: translateY(12px); } }
@keyframes funnel-kachel-auf { from { opacity: 0; transform: translateY(9px); } }
.funnel-schritt.aktiv { animation: funnel-schritt-auf .3s ease backwards; }
.funnel-schritt.aktiv .kachel { animation: funnel-kachel-auf .32s ease backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) {
  .funnel-schritt.aktiv, .funnel-schritt.aktiv .kachel, .funnel-antwort.ist-neu { animation: none; }
}

.funnel-vertrauen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #EAF0DC;
}
.funnel-vertrauen li { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--tinte-weich); }
.funnel-vertrauen li::before { content: "✓"; color: var(--gruen-dunkel); font-weight: 800; }
.funnel-fehler {
  display: none;
  color: #B3401A;
  background: #FDEEE6;
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .88rem;
  margin-top: 18px;
}
.funnel-erfolg {
  display: none;
  text-align: center;
  border: 2px solid var(--gruen);
  border-radius: 18px;
  background: linear-gradient(170deg, #FCFEF7, #F0F7E0);
  padding: 44px 28px;
}
.funnel-erfolg h3 { color: var(--gruen-dunkel); margin-bottom: 12px; }
.funnel-fussnote { font-size: .78rem; line-height: 1.5; color: var(--tinte-leise); margin-top: 22px; }
.funnel-fussnote a { color: var(--gruen-link); }
.hp-feld { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

@media (max-width: 760px) {
  .funnel-karte { padding: 22px 16px 20px; border-radius: 16px; }
  .funnel-fortschritt { margin-bottom: var(--m5); }
  .fortschritt-punkte li { font-size: .6rem; letter-spacing: .02em; }
  .funnel-frage { font-size: 1.1rem; }
  .funnel-hilfe { margin-bottom: 12px; }
  .kacheln { grid-template-columns: 1fr; gap: 8px; }
  .kacheln.kacheln-kurz { grid-template-columns: 1fr 1fr; }
  .kachel { min-height: 52px; padding: 10px 36px 11px 13px; }
  .kachel-zahl { font-size: 1.3rem; }
}

/* ============================================================
   F2  FUNNELSEITEN /bewerben/<kurz>/
   Kopf nur Logo (bauen.py, Funnel-Schalter), keine Bühne. Überschrift,
   drei Zeilen und die erste Frage stehen im ersten Bildschirm.
   ============================================================ */

.site-header-funnel .header-inner { justify-content: center; }
.funnel-kopf { padding: var(--m10) 0 var(--m16); }
.funnel-kopf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--m12); align-items: start; }
/* Gleiche H1-Größe wie in der Bühne aller übrigen Seiten (Agenturregel) */
.funnel-kopf h1 { margin: 0; font-size: var(--grad-h1); }
.huerden { list-style: none; margin: var(--m5) 0 0; padding: 0; display: grid; gap: 6px; }
.huerden li { display: flex; gap: 10px; align-items: baseline; font-weight: 600; color: var(--tinte); }
.huerden li::before { content: "✓"; color: var(--gruen-dunkel); font-weight: 800; }
.funnel-kopf-bild { margin-top: var(--m8); border-radius: var(--bogen-karte); overflow: hidden; }
.funnel-kopf-bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 980px) {
  .funnel-kopf-grid { grid-template-columns: minmax(0, 1fr); gap: var(--m5); }
  .funnel-kopf-bild { display: none; }
}
@media (max-width: 760px) {
  .funnel-kopf { padding: var(--m4) 0 var(--m10); }
  .huerden { margin-top: var(--m3); gap: 2px; font-size: .9rem; }
}

/* ============================================================
   F3  EINWILLIGUNGSBANNER (tracking.js baut es, wenn eine ID steht)
   ============================================================ */

.consent-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 999;
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-karte);
  box-shadow: var(--schatten-3);
}
.consent-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 24px;
  max-width: var(--breite-normal);
  margin: 0 auto;
  flex-wrap: wrap;
}
.consent-text { flex: 1 1 380px; font-size: .86rem; line-height: 1.55; color: var(--tinte); margin: 0; }
.consent-text a { color: var(--gruen-link); }
.consent-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.consent-buttons .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .consent-inner { padding: 14px; gap: 12px; }
  .consent-buttons { width: 100%; }
  .consent-buttons .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
/* Funnelseiten: schmale Leiste am unteren Rand statt einer Fläche über dem
   ersten Bildschirm (vorher 40 % verdeckt, BEF Z. 695). */
.site-header-funnel ~ .consent-banner { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 2px 0 0; }
.site-header-funnel ~ .consent-banner .consent-inner { padding: 10px 16px; gap: 10px; }
.site-header-funnel ~ .consent-banner .consent-text { flex-basis: 260px; font-size: .74rem; line-height: 1.4; }
.site-header-funnel ~ .consent-banner .btn { padding-block: 8px; min-height: 38px; font-size: .74rem; }

/* Widerruf im Fuß: ein Knopf, der wie ein Verweis aussieht. */
.widerruf-knopf {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   F4  KLEINTEILE
   ============================================================ */

/* Eckdaten der Stelle, ohne Scrollen sichtbar (SOP-K Ebene 1) */
.eckdaten {
  margin: var(--m6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--m3) var(--m5);
  font-size: var(--grad-s);
}
.eckdaten > div { min-width: 0; }
.eckdaten dt {
  font-family: var(--font-head);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
}
.eckdaten dd { margin: 2px 0 0; color: var(--tinte); font-weight: 600; line-height: 1.35; }
@media (max-width: 760px) {
  .eckdaten { gap: var(--m2) var(--m4); font-size: .84rem; margin-top: var(--m4); }
}

/* Muss und Kann in der Liste „Das bringst Du mit“ */
.muss-marke {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: var(--bogen-pille);
  background: var(--gruen-dunkel);
  color: #fff;
  font-family: var(--font-head);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

/* Stimmen: nur Funktion, kein Name (Kundenwunsch 01.10.) */
.stimmen-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--m6); }
.stimme {
  margin: 0;
  padding: var(--m8) var(--m6) var(--m6);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
}
.stimme blockquote { margin: 0; font-family: var(--font-sub); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--tinte); }
.stimme figcaption { margin-top: var(--m4); font-weight: 700; color: var(--gruen-dunkel); font-size: var(--grad-s); }
@media (max-width: 760px) {
  .stimmen-reihe.wisch {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 340px);
    grid-template-columns: none;
    gap: var(--m4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--m6));
    padding: 4px var(--m6) 14px;
  }
  .stimmen-reihe.wisch::-webkit-scrollbar { display: none; }
  .stimmen-reihe.wisch > * { scroll-snap-align: start; }
}

/* Belege in einer Zeile: Siegel nur mit Urkunde oder Datum */
.belegzeile {
  list-style: none;
  margin: var(--m8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--m5);
}
.belegzeile li {
  display: flex;
  gap: var(--m4);
  align-items: center;
  padding: var(--m4) var(--m5);
  background: #fff;
  border: 1px solid var(--linie);
  border-radius: var(--bogen-karte);
  font-size: var(--grad-s);
}
.belegzeile img { flex: none; width: 56px; height: auto; }
.belegzeile strong { display: block; color: var(--tinte); }
@media (max-width: 760px) {
  .belegzeile.wisch {
    grid-auto-flow: column;
    grid-auto-columns: min(84%, 320px);
    grid-template-columns: none;
    gap: var(--m4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--m6));
    padding: 4px var(--m6) 14px;
  }
  .belegzeile.wisch::-webkit-scrollbar { display: none; }
  .belegzeile.wisch > * { scroll-snap-align: start; }
}

/* Danke-Seite */
.danke-schritte { list-style: none; counter-reset: schritt; margin: var(--m6) 0 0; padding: 0; display: grid; gap: var(--m3); text-align: left; }
.danke-schritte li { counter-increment: schritt; display: flex; gap: var(--m4); align-items: baseline; }
.danke-schritte li::before {
  content: counter(schritt, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--orange-aktion);
}