/* ---------- Schriften ----------
   Selbst ausgeliefert statt von Google. Vorher lud die Seite Lato und Open
   Sans von fonts.gstatic.com und uebertrug dabei die IP-Adresse jedes
   Besuchers an Google - vor jeder Einwilligung und ohne dass es sich
   abschalten liess. Das LG Muenchen I hat dafuer mit Urteil vom 20.01.2022
   (Az. 3 O 17493/20) kein berechtigtes Interesse gesehen, weil sich Schriften
   ebenso gut selbst ausliefern lassen.

   Geladen wird nur der latin-Subset; deutsche Umlaute und Anfuehrungszeichen
   liegen darin. Open Sans ist eine variable Schrift, eine Datei deckt 300 bis
   800 ab. Zusammen 70 KB, vorher waren es zwei Anfragen an zwei Google-Hosts.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/lato-700-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/opensans-var-latin.woff2) format('woff2');
}

/* ============================================================
   Bewerbungs-Funnel Physiotherapie Maria Andretzki, Koeln-Buchheim
   Struktur uebernommen aus der Vorlage (Perspective-Funnel),
   Farben und Schriften von koeln-physio.de
   ============================================================ */

:root {
  /* Markenfarbe: der dunkelste Ton aus dem Gradient des Logo-Schwungs
     (assets/logo.svg, Stop bei offset 1). Auf Wunsch des Kunden die einzige
     Rotquelle der Seite - Panels, Buttons, Badges, Fortschrittsbalken
     zeigen alle auf denselben Wert. */
  --brand:        #B81411;   /* Logo-Rot: Karten und Panels */
  --dark:         #141414;   /* nur noch fuer die Kontur-Berechnung unten, kein Hintergrund mehr */
  --black:        #000000;   /* nicht mehr im Einsatz, als Notfall-Reserve belassen */
  --btn:          var(--brand);
  --btn-dark:     #93100E;   /* Hover: dunkleres Rot */
  --btn-text:     #FFFFFF;
  --accent:       var(--brand);   /* Fortschrittsbalken */
  --submit:       #046E1B;   /* "Bewerbung absenden" */
  --kontur:       #1D1D1B;   /* Kontur der Cookie-Buttons, aus dem Logo-Schriftzug */
  --go:           var(--brand);   /* Vorwaerts-Buttons, Badges, Kreuz-Kachel - identisch mit
                                      --brand, als eigener Token belassen fuer den Fall, dass
                                      sich das mal wieder trennen soll */
  --go-dark:      #93100E;   /* Hover dazu */
  --submit-dark:  hsl(129.5, 92.5%, 17.3%);
  --answer:       #FFFFFF;
  --answer-dark:  hsl(0, 0%, 90%);
  --font-color:   #141414;
  --grey:         #707070;   /* Grau der Praxis-Website */
  --bg:           #FFFFFF;

  --r-lg: 8px;    /* Buttons, Antworten, Felder */
  --r-xl: 12px;   /* gerahmte Spalten */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--font-color);
  font-family: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  font-weight: 300;          /* wie auf koeln-physio.de: leichter Fliesstext */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin: 0; }
strong { font-weight: 600; }
img { max-width: 100%; display: block; }

/* ---------- Layout-Primitive ---------- */

.app { display: flex; flex-direction: column; min-height: 100vh; }
.app__body { flex: 1; }

/* Zeile: volle Breite, eigene Hintergrundfarbe, vertikale Abstaende */
.row {
  position: relative;
  width: 100%;
  padding-top: var(--pt, 0);
  padding-bottom: var(--pb, 0);
  background: var(--row-bg, transparent);
}

/* Aussen-Container einer Zeile */
.container {
  width: 100%;
  max-width: 28rem;         /* max-w-md */
  margin-inline: auto;
}
@media (min-width: 640px)  { .container { max-width: 36rem; } }
@media (min-width: 768px)  { .container--wide { max-width: 768px; } }
@media (min-width: 1024px) { .container--wide { max-width: 1024px; } }
@media (min-width: 1280px) { .container--wide { max-width: 1280px; } }
@media (min-width: 1536px) { .container--wide { max-width: 1536px; } }

/* Spaltenraster einer Zeile */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-inline: 1rem;
}
@media (min-width: 1024px) { .cols { padding-inline: 3rem; } }
@media (min-width: 768px)  { .cols--2 { grid-template-columns: 1fr 1fr; } }

/* Spalte; .col--framed = gerahmte Karte */
.col { position: relative; width: 100%; height: 100%; border-radius: var(--r-xl); }
.col--framed { overflow: hidden; background: var(--col-bg, transparent); }

/* Innenabstand der Spalte - im Original: p-2 sm:p-0 bzw. p-4 sm:p-10 (gerahmt) */
.col__inner { display: flex; flex-direction: column; height: 100%; padding: 0.5rem; }
@media (min-width: 640px) { .col__inner { padding: 0; } }
.col__inner--framed { padding: 1rem; }
@media (min-width: 640px) { .col__inner--framed { padding: 2.5rem; } }

/* Block innerhalb einer Spalte */
.block {
  /* eigene Standardwerte, damit die --pt/--pb der Zeile nicht hierher vererbt werden */
  --pt: 0; --pb: 0; --pl: 0; --pr: 0;
  position: relative;
  width: 100%;
  padding: var(--pt) var(--pr) var(--pb) var(--pl);
}
.block__inner { width: 100%; max-width: 28rem; margin-inline: auto; }
@media (min-width: 640px) { .block__inner { max-width: 36rem; } }
.block__inner--wide { width: 100%; max-width: 28rem; margin-inline: auto; }
@media (min-width: 640px)  { .block__inner--wide { max-width: 36rem; } }
@media (min-width: 768px)  { .block__inner--wide { max-width: 48rem; } }
@media (min-width: 1024px) { .block__inner--wide { max-width: 56rem; } }

/* ---------- Typografie ---------- */

.t { word-break: break-word; }
.t--center { text-align: center; }
.t--left   { text-align: left; }
.t--white  { color: #fff; }

.t-16 { font-size: 16px; line-height: 1.5; }
.t-20 { font-size: 20px; line-height: 1.25; }
@media (min-width: 768px) { .t-20 { font-size: 24px; } }
/* Grosse Ueberschriften in der Hausschrift Lato, wie auf koeln-physio.de */
.t-36 { font-family: Lato, "Open Sans", Arial, sans-serif; font-size: 24px; line-height: 1.25; letter-spacing: normal; }
.t-36 strong { font-weight: 700; }
@media (min-width: 640px) { .t-36 { font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; } }
@media (min-width: 768px) { .t-36 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; } }

/* ---------- Kopfbereich ---------- */

.site-header { width: 100%; padding: 0.5rem 1rem; background: #fff; border-bottom: 1px solid #eee; }
.site-header__inner { display: flex; align-items: center; justify-content: center; }
.site-header__logo { padding: 0.5rem; }
.site-header img { height: 64px; width: auto; }

/* ---------- Fussbereich ---------- */

.site-footer { width: 100%; padding: 1rem; }
.site-footer__inner {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: rgba(0,0,0,.6); text-align: center;
}
.site-footer a { color: inherit; text-decoration: underline; }
.site-footer .sep { padding-inline: 0.375rem; }

/* Wasserzeichen: bewusst leiser als die Rechtslinks darueber - es ist eine
   Signatur, kein Hinweis, den der Bewerber lesen muss. Der Name traegt etwas
   mehr Gewicht als das "In Zusammenarbeit mit" davor. */
.site-footer__marke {
  margin-top: .5rem;
  text-align: center;
  font-size: 11px;
  letter-spacing: .01em;
  color: rgba(0, 0, 0, .38);
}
.site-footer__marke a { color: inherit; text-decoration: none; }
.site-footer__marke a:hover { color: rgba(0, 0, 0, .62); text-decoration: underline; }
.site-footer__marke strong { font-weight: 600; color: rgba(0, 0, 0, .55); }

/* ---------- Fortschrittsbalken ---------- */

.progress {
  position: fixed; left: 0; bottom: 0; z-index: 10;
  width: 100%; height: 4px;
  background: rgba(184, 20, 17, .2);   /* Marken-Rot, 20 % */
}
.progress__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent);
  width: 0;
  transition: width .4s ease;
}

/* ---------- Bilder ---------- */

.media { overflow: hidden; line-height: 0; }
.media img { width: 100%; height: auto; object-fit: cover; object-position: center; }
.media--hero img  { aspect-ratio: 6 / 5; }
.media--wide img  { aspect-ratio: 16 / 9; }
.media--about img { aspect-ratio: 4 / 3; }

/* Hero laeuft auf dem Handy randlos ueber die volle Breite (wie im Original) */
.media--hero { width: calc(100% + 48px); transform: translateX(-24px); border-radius: 0; }
@media (min-width: 640px) {
  .media--hero { width: 100%; transform: none; border-radius: var(--r-xl); }
}

/* Kontextzeile unter der Kernaussage. Kleiner und leicht abgesetzt, damit beim
   Ueberfliegen zuerst die fette Zeile haengen bleibt und der Zusatz nur dann
   gelesen wird, wenn der Punkt wirklich interessiert. */
.list__kontext { display: block; font-size: 14px; opacity: .82; margin-top: .15rem; }
/* Bei zwei Zeilen darf der Text nicht mehr mittig zum Symbol sitzen. */
.list__text:has(.list__kontext) { align-items: flex-start; }

/* Behandlungsspektrum. Vorher war das ein Fliesstext-Satz, in dem fuenf
   Schwerpunkte hintereinander weg standen und keiner haengen blieb. Jetzt
   stehen sie einzeln, durch Haarlinien getrennt, auf der roten Karte.
   Bewusst ohne Nummern: die fuenf sind gleichrangig, keine Reihenfolge. */
.spektrum { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .spektrum { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.spektrum li {
  padding: .6rem 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35;
}
/* Auf dem Desktop bekommt auch die rechte Spalte oben eine Linie, sonst
   haengt sie optisch tiefer als die linke. */
.spektrum__schluss { margin-top: 1rem; }

/* ---------- Buttons ---------- */

.btn {
  display: block; width: 100%;
  margin-inline: auto;
  padding: 1rem 1.5rem;
  border: 0; cursor: pointer;
  border-radius: var(--r-lg);
  background: var(--btn-bg, var(--btn));
  color: var(--btn-text);
  font: inherit; font-size: 16px; text-align: center;
  /* leichter Schlagschatten, damit der Button sich von den ebenfalls
     roten Karten abhebt und als klickbar zu erkennen ist */
  box-shadow: inset 0 0 1px rgba(0,0,0,.5), 0 2px 6px rgba(184,20,17,.35);
  transition: background-color .2s ease, transform .2s ease;
}
/* max-width statt width, damit auch <a class="btn"> auf Inhaltsbreite schrumpft */
@media (min-width: 1024px) { .btn { width: auto; max-width: fit-content; padding-inline: 2rem; } }
.btn:hover  { background: var(--btn-bg-dark, var(--btn-dark)); }
.btn:active { transform: scale(.9); transition-duration: .2s; }
.btn strong { font-weight: 600; }
.btn--submit { --btn-bg: var(--submit); --btn-bg-dark: var(--submit-dark); }

/* Vorwaerts-CTA am Seitenende. Steht auf Weiss, aber direkt darueber liegen die
   roten Textpanels (Claim, Jobkarte, "Du passt in unser Team, wenn Du..."). Ein
   Button in Markenrot darunter las sich wie noch ein Panel.

   Eigener Rustton (--go) statt Markenrot loest das: der Button hebt sich von
   den Panels ab, ohne einen Rand zu brauchen. Wackelt permanent - Vorwaerts-
   Buttons sind der eine Weg durch den Funnel, den man nicht uebersehen soll. */
.btn--go {
  --btn-bg: var(--go);
  --btn-bg-dark: var(--go-dark);
  box-shadow: inset 0 0 1px rgba(0,0,0,.5), 0 2px 6px rgba(184,20,17,.35);
  animation: jittery 4s ease 0s infinite;
}
@media (prefers-reduced-motion: reduce) { .btn--go { animation: none; } }

/* Umgekehrt, damit der Button auf der roten Karte nicht verschwindet */
.btn--invers {
  --btn-bg: #FFFFFF;
  --btn-bg-dark: hsl(0, 0%, 92%);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.btn--lg { font-size: 20px; line-height: 1.28; }
@media (min-width: 768px) { .btn--lg { font-size: 24px; } }

/* Zweitrangiger Weiter-Button ("direkt zur Bewerbung") */
.btn + .btn { margin-top: .75rem; }
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-dark: rgba(20, 20, 20, .06);
  color: var(--font-color);
  border: 1px solid rgba(20, 20, 20, .25);
  box-shadow: none;
  font-size: 15px;
  padding-block: .875rem;
}
.btn--ghost:hover { border-color: rgba(20, 20, 20, .45); }

/* "jittery"-Animation aus der Vorlage */
@keyframes jittery {
  5%, 50% { transform: scale(1); }
  10% { transform: scale(0.9); }
  15% { transform: scale(1.05); }
  20% { transform: scale(1.05) rotate(-3.5deg); }
  23% { transform: scale(1.05) rotate(3.5deg); }
  26% { transform: scale(1.05) rotate(-2.5deg); }
  30% { transform: scale(1.05) rotate(2.5deg); }
  35% { transform: scale(1.05) rotate(0deg); }
}
.btn--jittery { animation: jittery 4s ease 0s infinite; }
@media (prefers-reduced-motion: reduce) { .btn--jittery { animation: none; } }

/* ---------- Text-Antworten ---------- */

.answers {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 28rem; margin: 1.5rem auto 0;
}
@media (min-width: 768px) { .answers { margin-top: 2.5rem; } }

.answer {
  position: relative;
  display: flex; align-items: center; gap: 1rem;
  min-height: 64px; width: 100%;
  padding: 1rem;
  cursor: pointer; user-select: none; overflow: hidden;
  border: 0; text-align: left; font: inherit;
  background: var(--answer);
  color: #2a2a2a;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 0 1px 1px rgba(0,0,0,.1);
  transition: background-color .2s ease, transform .2s ease;
}
.answer:hover  { background: var(--answer-dark); }
.answer:active { transform: scale(.9); transition-duration: .2s; }
.answer > span { flex-grow: 1; font-size: 16px; font-weight: 600; }
.answer__fill {
  position: absolute; inset: 0; z-index: 10;
  width: 0; height: 100%;
  border-radius: var(--r-lg);
  background: rgba(0,0,0,.15);
  transition: width .7s cubic-bezier(.33, 1, .68, 1);
}

/* ---------- Bild-/Icon-Antworten ---------- */

.media-answers {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center;
  gap: 1rem; margin-top: 1.5rem; line-height: 1.25;
}
@media (min-width: 768px) { .media-answers { margin-top: 2.5rem; } }

.media-answer {
  position: relative;
  flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 0; padding: 0; cursor: pointer; font: inherit;
  border-radius: var(--r-lg);
  background: var(--ma-bg, var(--btn));
  transition: transform .5s ease-out, box-shadow .5s ease-out;
}
@media (min-width: 768px) {
  .media-answer { flex-basis: calc(25% - 12px); max-width: calc(25% - 12px); }
  .media-answer:hover { transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
}
.media-answer:active { transform: scale(.9); transition-duration: .2s; }
.media-answer__fill {
  position: absolute; inset: 0; z-index: 10;
  width: 0; height: 100%;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.15);
  transition: width .7s cubic-bezier(.33, 1, .68, 1);
}
.media-answer__visual {
  position: relative; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--ma-visual-bg, transparent);
}
.media-answer__visual svg { width: 64px; height: 64px; }
.media-answer__visual .emoji { font-size: 48px; line-height: 1; }
.media-answer__label {
  background: transparent; color: #fff;
  padding: 1rem; text-align: center;
  font-size: 16px; line-height: 1.5; font-weight: 600;
  flex-grow: 1;
}

/* ---------- Listen ---------- */

.list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; text-align: left; }
@media (min-width: 768px) { .list--2 { grid-template-columns: 1fr 1fr; } }
.list__item { display: flex; align-items: flex-start; width: 100%; }
.list__visual {
  flex-shrink: 0; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; line-height: 1;
}
.list__text {
  flex-grow: 1; min-width: 0; margin-left: 1.5rem;
  display: flex; align-items: center; min-height: 48px;
  font-size: 16px;
}

/* ---------- Chevron-Icon-Block ---------- */

.icon-block { display: flex; justify-content: center; }
.icon-block svg { width: 32px; height: 32px; }

/* ---------- Formular ---------- */

.form { max-width: 36rem; margin-inline: auto; display: grid; gap: 1rem; }
.field { position: relative; display: flex; align-items: center; }
.field__emoji {
  position: absolute; left: 1rem; top: 0; height: 56px;
  display: flex; align-items: center; font-size: 20px;
  user-select: none; pointer-events: none; z-index: 1;
}
.field__box {
  width: 100%; height: 56px;
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: var(--r-lg);
  padding-left: 52px;
  display: flex; align-items: center;
  box-shadow: 0 0 0 2px transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field__box:focus-within {
  border-color: var(--submit);
  box-shadow: 0 0 0 2px rgba(4,110,27,.15);
}
.field input {
  width: 100%; height: 100%;
  border: 0; outline: none; background: transparent;
  font: inherit; font-weight: 300; font-size: 16px; color: #000;
  padding-right: 2.5rem;
}
.field input::placeholder { color: #6b7280; }

.textarea-box {
  width: 100%; background: #fff; border: 1px solid #e5e7eb;
  border-radius: var(--r-lg); padding: 1rem 1rem 1rem 52px;
  min-height: 120px; position: relative;
  box-shadow: 0 0 0 2px transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.textarea-box:focus-within { border-color: var(--btn); box-shadow: 0 0 0 2px rgba(2,81,135,.15); }
.textarea-box textarea {
  width: 100%; min-height: 94px; resize: vertical; display: block;
  margin: 0; padding: 0;
  border: 0; outline: none; background: transparent;
  font: inherit; font-weight: 300; font-size: 16px; color: #000;
}
.textarea-box textarea::placeholder { color: #6b7280; }

.dropzone {
  position: relative; width: 100%; min-height: 90px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: var(--r-lg);
  padding: 0.5rem 0.5rem 0.5rem 52px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  cursor: pointer; font-size: 16px; color: #111;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dropzone:hover, .dropzone.is-active { border-color: var(--submit); }
.dropzone small { color: #6b7280; font-size: 13px; }
.dropzone input[type=file] { display: none; }

.consent { display: flex; align-items: center; padding-block: 0.5rem; }
.consent__box { position: relative; min-width: 24px; min-height: 24px; }
.consent__box input {
  appearance: none; -webkit-appearance: none;
  width: 24px; height: 24px; margin: 0;
  background: #fff; border: 2px solid #E5E7EB; border-radius: 4px;
  cursor: pointer; display: block;
}
.consent__box input:checked { background: #0BB648; border-color: #0BB648; }
.consent__box input:checked::after {
  content: ""; position: absolute; left: 8px; top: 3px;
  width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.consent label { padding-inline: 1rem; font-size: 14px; line-height: 24px; color: #fff; cursor: pointer; }
.consent label a { color: inherit; text-decoration: underline; }

.form__error {
  display: none; color: #fff; background: rgba(20,20,20,.92);   /* Anthrazit, damit die Meldung auf der roten Karte lesbar bleibt */
  border-radius: var(--r-lg); padding: .75rem 1rem; font-size: 14px;
}
.form__error.is-visible { display: block; }

/* ---------- Cookie-Hinweis ---------- */

.cookie {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.2);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 1rem;
  animation: cookie-in .4s ease both;
}
@media (min-width: 640px) { .cookie { align-items: flex-end; } }
@keyframes cookie-in { from { opacity: 0; } to { opacity: 1; } }
.cookie[hidden] { display: none; }
.cookie__card {
  display: flex; align-items: flex-start;
  width: calc(100% - 16px); min-height: 64px;
  background: #f9fafb; border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  animation: cookie-up .4s ease both;
}
@keyframes cookie-up { from { transform: translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 640px) { .cookie__card { width: 360px; } }
.cookie__card { flex-direction: column; }
.cookie__card p { line-height: 1.625; color: #374151; font-size: 15px; margin: 0 0 1rem; }
.cookie__card a { color: inherit; text-decoration: underline; }

/* Beide Schaltflaechen sind exakt gleich gross und gleich auffaellig.
   Art. 7 Abs. 3 DSGVO und die Leitlinien der Aufsichtsbehoerden verlangen,
   dass Ablehnen genauso leicht ist wie Zustimmen - ein grauer Textlink neben
   einem bunten Button waere unzulaessig. Gleiche Groesse, gleicher Kontrast,
   nur unterschiedliche Fuellung. */
.cookie__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: 100%; }
.cookie__btn {
  min-height: 44px;
  padding: .625rem 1rem;
  border-radius: var(--r-lg);
  border: 2px solid var(--kontur);
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cookie__btn--nein { background: #fff; color: var(--kontur); }
.cookie__btn--nein:hover { background: #ececec; }
.cookie__btn--ja { background: var(--brand); color: #fff; }
.cookie__btn--ja:hover { background: var(--btn-dark); }
.cookie__mehr { margin-top: .75rem; font-size: 13px; }
.cookie__mehr a { color: #6b7280; }

/* ---------- Seiten / Reveal ---------- */

.screen { display: none; }
.screen.is-active { display: block; }

.reveal { opacity: 0; transform: translateY(10px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s linear, transform .6s linear; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------- Mehrfachauswahl (Weiterbildungen) ---------- */

.answer--multi { gap: .875rem; }

/* 11 Punkte sind einspaltig zu lang - ab Tablet zweispaltig */
@media (min-width: 768px) {
  .answers--multi { max-width: 44rem; grid-template-columns: 1fr 1fr; }
}
.answer > .answer__box {
  /* hoehere Spezifitaet als ".answer > span", sonst zieht flex-grow die Box breit */
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border: 2px solid #C9C9C9;
  border-radius: 5px;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease;
}
.answer--multi.is-selected {
  background: #FFF3EF;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 0 0 2px var(--brand);
}
.answer--multi.is-selected .answer__box {
  background: var(--brand);
  border-color: var(--brand);
}
.answer--multi.is-selected .answer__box::after {
  content: "";
  position: absolute; left: 6px; top: 1px;
  width: 6px; height: 12px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---------- Einfachauswahl im Formular (Erreichbarkeit) ---------- */

.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice legend {
  display: block; width: 100%;
  padding: 0 0 .5rem;
  color: #fff; font-size: 15px;
}
.choice__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choice__btn {
  min-height: 48px;
  padding: .5rem .25rem;
  border: 1px solid #e5e7eb;
  border-radius: var(--r-lg);
  background: #fff;
  color: #2a2a2a;
  font: inherit; font-size: 15px;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.choice__btn:hover { background: var(--answer-dark); }
.choice__btn.is-selected {
  background: var(--go);
  color: #fff;
  border-color: var(--go);
  font-weight: 600;
}
.choice.has-error .choice__btn { border-color: #fff; }


/* ---------- Teamreihe auf Schritt 1 ---------- */

.team-row { display: flex; justify-content: center; align-items: center; margin-top: .625rem; }
.team-row img {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  background: #fff;
  margin-left: -10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.team-row img:first-child { margin-left: 0; }
@media (min-width: 640px) {
  .team-row img { width: 64px; height: 64px; margin-left: -12px; border-width: 3px; }
}