/* ============================================================
   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; }

/* Formular neu gestaltet am 12.10.2026 (Anpassungsliste K07: „flau, basic,
   unmodern“). Feldnamen, Werte, Pflichtfelder und Einwilligung sind
   unverändert (bauen.py FUNNEL_*, api/bewerbung.php); hier steht nur
   Gestaltung: Kopfband mit Schrittzähler und Segmenten, große Antwortkarten
   (Stellen mit Foto), weiche Übergänge in Laufrichtung, Felder mit 54 px
   Höhe, Prüfung erst nach der Eingabe (:user-invalid), Weiter-Knopf mit
   Pfeil, am Handy über die ganze Breite. */
.funnel-karte {
  position: relative;
  background: #fff;
  border: 1px solid #E4EED2;
  border-radius: 24px;
  padding: 0 40px 32px;
  box-shadow: 0 24px 60px rgba(51, 83, 10, .14), 0 2px 6px rgba(51, 83, 10, .05);
  overflow: hidden;
}
/* Ohne Skript gibt es kein Kopfband: etwas Luft über der ersten Frage */
html:not(.js) .funnel-karte { padding-top: 32px; }

/* Kopfband: Zähler, Segmente je Schritt mit Namen */
.funnel-fortschritt {
  margin: 0 -40px 32px;
  padding: 22px 40px 18px;
  background: linear-gradient(180deg, #F6FAEE, #FBFDF7);
  border-bottom: 1px solid #E8F0DA;
}
.fortschritt-zaehler {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gruen-link);
}
.fortschritt-zaehler:empty { display: none; }
.fortschritt-punkte {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.fortschritt-punkte li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  transition: color .25s ease;
}
.fortschritt-punkte li::before {
  content: "";
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gruen-dunkel) 50%, #DDE8C9 50%) right / 200% 100% no-repeat;
  transition: background-position .5s var(--kurve-aus);
}
.fortschritt-punkte li.aktiv::before { background-position: 50% 0; }
.fortschritt-punkte li.erledigt::before { background-position: left; }
.fortschritt-punkte li.aktiv { color: var(--tinte); font-weight: 700; }
.fortschritt-punkte li.erledigt { color: var(--gruen-link); }
.fortschritt-punkte li.erledigt span::before { content: "✓ "; }
.fortschritt-schiene { display: none; }

/* Fragen und Antwortkarten */
.kachel-gruppe { border: none; margin: 0; padding: 0; min-width: 0; }
.funnel-frage {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.3rem, .6vw + 1.1rem, 1.6rem);
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--tinte);
  margin: 0 0 8px;
  padding: 0;
}
.funnel-frage:focus { outline: none; }
.funnel-hilfe { font-size: .92rem; color: var(--tinte-weich); margin: 0 0 22px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kachel-breit { grid-column: 1 / -1; }
.kachel[hidden] { display: none; }
.kachel {
  --kachel-ring: #7F9466;          /* 3,3:1 auf Weiß (WCAG 1.4.11) */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 76px;
  padding: 16px 60px 16px 20px;
  border: 1.5px solid var(--kachel-ring);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .25s var(--kurve-aus), transform .25s var(--kurve-aus);
}
.kachel input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  top: 0; left: 0;
  margin: 0;
  cursor: pointer;
}
.kachel-titel {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--tinte);
  line-height: 1.25;
}
.kachel-zahl {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--gruen-dunkel);
}
.kachel-zusatz { font-size: .84rem; color: var(--tinte-weich); line-height: 1.35; }
/* Stellen mit Foto: Bild links, Worte rechts */
.kachel.mit-bild {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 12px 60px 12px 12px;
}
.kachel-bild {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  pointer-events: none;
}
.kachel-worte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Auswahlring rechts: leer, gewählt grün mit Haken */
.kachel::after {
  content: "";
  position: absolute;
  top: 50%; right: 18px;
  width: 26px; height: 26px;
  margin-top: -13px;
  border-radius: 50%;
  border: 2px solid var(--kachel-ring);
  background: #fff center / 14px no-repeat;
  transition: background-color .2s ease, border-color .2s ease, transform .3s var(--kurve-feder, var(--kurve-aus));
  pointer-events: none;
}
.kachel:hover { border-color: var(--gruen-dunkel); background: #FAFDF4; }
.kachel:hover:not(.gewaehlt) { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(51, 83, 10, .10); }
.kachel:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.kachel:has(input:checked),
.kachel.gewaehlt {
  border-color: var(--gruen-dunkel);
  border-width: 2px;
  background: var(--kachel-gewaehlt);
  box-shadow: 0 12px 28px rgba(78, 123, 8, .16);
  transform: none;
}
.kachel:has(input:checked)::after,
.kachel.gewaehlt::after {
  border-color: var(--gruen-dunkel);
  background-color: var(--gruen-dunkel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  transform: scale(1.06);
}

/* Rückmeldung auf die letzte Antwort: Sprechblase */
.funnel-antwort {
  position: relative;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--gruen-link);
  background: var(--kachel-gewaehlt);
  border: 1px solid #DCEBC2;
  border-radius: 18px 18px 18px 6px;
  padding: 12px 16px 12px 48px;
  margin: 0 0 24px;
}
.funnel-antwort::before {
  content: "";
  position: absolute;
  left: 14px; top: 12px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gruen-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.funnel-antwort:empty { display: none; }
.funnel-antwort.ist-neu { animation: funnel-antwort-auf .45s var(--kurve-aus) backwards; }
@keyframes funnel-antwort-auf { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* Felder */
.feld-optional { font-weight: 400; color: var(--tinte-weich); font-size: .85em; }
.funnel-karte .formfeld { margin-bottom: 18px; }
.funnel-karte .formfeld label {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--tinte);
  margin-bottom: 8px;
}
.funnel-karte .formfeld input {
  width: 100%;
  min-height: 54px;
  font-family: var(--font-text);
  font-size: 1.05rem;                 /* ab 16 px zoomt iOS nicht hinein */
  color: var(--tinte);
  border: 1.5px solid #7F9466;
  border-radius: 12px;
  padding: 13px 44px 13px 16px;
  background: #FCFDF9 right 14px center / 18px no-repeat;
  box-shadow: none;
  transition: border-color .18s ease, box-shadow .2s ease, background-color .18s ease;
}
.funnel-karte .formfeld input::placeholder { color: #8A8B8E; }
.funnel-karte .formfeld input:hover { border-color: var(--gruen-dunkel); }
.funnel-karte .formfeld input:focus-visible {
  outline: 2px solid var(--gruen-dunkel);
  outline-offset: 2px;
  border-color: var(--gruen-dunkel);
  background-color: #fff;
  box-shadow: 0 0 0 5px rgba(145, 199, 61, .22);
}
/* Haken, sobald eine Pflichtangabe stimmt (erst nach dem Verlassen des Felds) */
.funnel-karte .formfeld input[required]:user-valid {
  border-color: var(--gruen-dunkel);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234E7B08' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.funnel-karte .formfeld.hat-fehler input,
.funnel-karte .formfeld input:user-invalid {
  border-color: #B3401A;
  background-color: #FFF8F4;
}
.feld-fehler {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  color: #B3401A;
  margin-top: 8px;
}
.feld-fehler::before {
  content: "!";
  flex: none;
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #B3401A;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
}
.kachel-gruppe.hat-fehler .kacheln { outline: 2px solid #B3401A; outline-offset: 8px; border-radius: 16px; }
.kachel-gruppe.hat-fehler > .feld-fehler { margin-top: 18px; }
/* Lebenslauf: Ablagefläche statt nacktem Dateifeld */
.funnel-karte .formfeld-datei input[type="file"] {
  min-height: 0;
  padding: 18px 16px;
  font-size: .92rem;
  color: var(--tinte-weich);
  border: 2px dashed var(--linie-stark);
  border-radius: 16px;
  background: var(--papier-warm);
  cursor: pointer;
}
.funnel-karte .formfeld-datei input[type="file"]:hover { border-color: var(--gruen); background: #F3F9E8; }
.funnel-karte .formfeld-datei input[type="file"]::file-selector-button {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gruen-dunkel);
  background: #fff;
  border: 2px solid var(--gruen);
  border-radius: var(--bogen-pille);
  padding: 9px 16px;
  margin-right: 14px;
  cursor: pointer;
}
.feld-hinweis { display: block; font-size: .8rem; line-height: 1.45; color: var(--tinte-leise); margin-top: 8px; }
/* Einwilligung: eigene Fläche, großes Kästchen */
.formfeld-checkbox {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  font-size: .88rem;
  line-height: 1.5;
  margin: 6px 0 4px;
  padding: 16px 18px;
  border: 1px solid #E2EBD2;
  border-radius: 16px;
  background: #FAFCF5;
}
.formfeld-checkbox input { flex: none; margin-top: 1px; width: 24px; height: 24px; accent-color: var(--gruen-dunkel); cursor: pointer; }
.formfeld-checkbox input:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.formfeld-checkbox label { cursor: pointer; }
.formfeld-checkbox label a { color: var(--gruen-link); }
.formfeld-checkbox.hat-fehler { border-color: #B3401A; background: #FFF8F4; }
.formfeld-checkbox.hat-fehler label { color: #8F3314; }
.formfeld-checkbox .feld-fehler { grid-column: 2; margin: 0; }
/* Kontaktschritt: Name über die ganze Breite, dann Paare */
@media (min-width: 561px) {
  html.js .funnel-schritt[data-schritt="5"].aktiv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .funnel-schritt[data-schritt="5"] > * { grid-column: 1 / -1; }
  .funnel-schritt[data-schritt="5"] > .formfeld:is(:has(#f_telefon), :has(#f_email), :has(#f_plz), #feld-schule) { grid-column: auto; }
  .funnel-schritt[data-schritt="5"] > #feld-fortbildungen[hidden] { display: none; }
}

/* Knöpfe: Weiter groß mit Pfeil, Zurück als ruhiger Textknopf */
.funnel-buttons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 28px;
}
.funnel-buttons .btn { justify-content: center; text-align: center; }
.funnel-buttons .btn-primary {
  min-height: 56px;
  padding-inline: 32px;
  font-size: .9rem;
  border-radius: 12px;
}
.funnel-buttons .btn-primary::after {
  content: "";
  width: 18px; height: 18px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 5.5 6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--zeit-wechsel) var(--kurve-aus);
}
.funnel-buttons .btn-primary:hover::after { transform: translateX(4px); }
.funnel-buttons .btn-primary:disabled { opacity: .7; cursor: progress; transform: none; }
.funnel-buttons .btn-primary:disabled::after { display: none; }
.funnel-buttons .btn-outline {
  min-height: 44px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--tinte-weich);
  font-size: .78rem;
  gap: 8px;
}
.funnel-buttons .btn-outline::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6'/%3E%3Cpath d='m11.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6'/%3E%3Cpath d='m11.5 5.5-6.5 6.5 6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.funnel-buttons .btn-outline:hover { background: none; color: var(--gruen-link); transform: none; }
@media (min-width: 561px) {
  .funnel-buttons { flex-direction: row; justify-content: space-between; align-items: center; }
  .funnel-buttons .btn-outline { order: -1; padding-left: 0; }
  .funnel-buttons .btn-primary { margin-left: auto; min-width: 220px; }
}

/* 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; }
/* Übergang in Laufrichtung: vor kommt von rechts, zurück von links */
@keyframes funnel-schritt-vor { from { opacity: 0; transform: translateX(28px); } }
@keyframes funnel-schritt-zurueck { from { opacity: 0; transform: translateX(-28px); } }
@keyframes funnel-kachel-auf { from { opacity: 0; transform: translateY(10px); } }
.funnel-schritt.aktiv { animation: funnel-schritt-vor .42s var(--kurve-aus) backwards; }
#funnel[data-richtung="zurueck"] .funnel-schritt.aktiv { animation-name: funnel-schritt-zurueck; }
.funnel-schritt.aktiv .kachel { animation: funnel-kachel-auf .4s var(--kurve-aus) backwards; animation-delay: calc(80ms + var(--i, 0) * 50ms); }
@media (prefers-reduced-motion: reduce) {
  .funnel-schritt.aktiv, .funnel-schritt.aktiv .kachel, .funnel-antwort.ist-neu { animation: none; }
  .kachel, .kachel::after, .fortschritt-punkte li::before, .funnel-buttons .btn-primary::after { transition: none; }
  .kachel:hover:not(.gewaehlt) { transform: none; }
}

.funnel-vertrauen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid #EAF0DC;
}
.funnel-vertrauen li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: var(--bogen-pille);
  background: #F3F8E8;
  font-size: .8rem;
  font-weight: 600;
  color: var(--gruen-link);
}
.funnel-vertrauen li::before { content: "✓"; color: var(--gruen-dunkel); font-weight: 800; }
.funnel-fehler {
  display: none;
  color: #8F3314;
  background: #FFF3EC;
  border: 1px solid #F0B48F;
  border-left: 4px solid #B3401A;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: .9rem;
  font-weight: 600;
  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, .funnel-erfolg h2 { color: var(--gruen-dunkel); margin-bottom: 12px; font-size: var(--grad-h3, 1.3rem); }
.funnel-fussnote { font-size: .78rem; line-height: 1.55; color: var(--tinte-leise); margin-top: 18px; }
.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: 0 18px 20px; border-radius: 20px; }
  html:not(.js) .funnel-karte { padding-top: 22px; }
  .funnel-fortschritt { margin: 0 -18px 22px; padding: 16px 18px 14px; }
  .fortschritt-zaehler { margin-bottom: 10px; font-size: .7rem; }
  /* Die Namen stehen im Zähler; unter den Segmenten wären sie zu klein */
  .fortschritt-punkte li { font-size: 0; gap: 0; }
  .fortschritt-punkte li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .funnel-hilfe { margin-bottom: 16px; font-size: .9rem; }
  .kacheln { grid-template-columns: 1fr; gap: 10px; }
  .kacheln.kacheln-kurz { grid-template-columns: 1fr 1fr; }
  .kachel { min-height: 64px; padding: 13px 52px 13px 16px; border-radius: 14px; }
  .kachel::after { right: 14px; width: 24px; height: 24px; margin-top: -12px; }
  .kachel.mit-bild { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 10px 52px 10px 10px; }
  .kachel-bild { width: 52px; height: 52px; border-radius: 10px; }
  .kacheln-kurz .kachel { padding-right: 44px; }
  .kacheln-kurz .kachel::after { right: 10px; }
  .kachel-zahl { font-size: 1.6rem; }
  .funnel-buttons .btn-primary { min-height: 58px; }
}

/* ============================================================
   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);
}