/* ============================================================
   Bewerbungs-Funnel Physiotherapie Melanie Kosel, Forchheim
   Aufbau und Machart uebernommen von jobs-koeln-physiotherapie.de,
   Farben von der Praxis: Rot #A71A30 und Gruen #738639.
   ============================================================ */

/* ---------- Schrift ----------
   Selbst ausgeliefert statt von Google, damit beim Aufruf keine IP-Adresse
   an Google geht. Liegt die Datei (noch) nicht unter assets/fonts, greift
   eine lokal installierte Inter und danach die Systemschrift. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: local('Inter Variable'), local('Inter'),
       url(assets/fonts/inter-var-latin.woff2) format('woff2');
}

:root {
  --brand:        #A71A30;   /* Praxis-Rot: Stellenbezeichnung, Buttons, Linien */
  --gruen:        #738639;   /* Praxis-Gruen: Logo, Haekchen */
  --btn:          var(--brand);
  --btn-dark:     #861526;   /* Hover: dunkleres Rot */
  --btn-text:     #FFFFFF;
  --go:           var(--brand);
  --go-dark:      #861526;
  /* "Bewerbung absenden" ist die einzige gruene Flaeche der Strecke. Einen
     Hauch dunkler als das Praxis-Gruen, damit weisse Schrift darauf gut
     lesbar bleibt (5:1 gegen Weiss). */
  --submit:       #647530;
  --submit-dark:  #536228;
  --answer:       #FFFFFF;
  --answer-dark:  hsl(0, 0%, 90%);
  --font-color:   #202020;
  --grey:         #707070;
  --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: Inter, 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;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p { margin: 0; }
h1, h2, h3 { margin: 0; font-size: inherit; font-weight: inherit; }
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, vertikale Abstaende ueber --pt / --pb */
.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;
  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; } }
@media (min-width: 768px)  { .cols--3 { grid-template-columns: 1fr 1fr 1fr; } }

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

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

/* Helle Abschnitte und Formulare stehen ohne Karte, mit demselben
   Seitenrand wie alles andere. */
.col--hell > .col__inner--framed,
.col--formular > .col__inner--framed { padding: .5rem; }
@media (min-width: 640px) {
  .col--hell > .col__inner--framed,
  .col--formular > .col__inner--framed { padding: 0; }
}

/* 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; }
.col--hell .t--white, .col--formular .t--white { color: #202020; }

.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; } }
.t-36 { font-size: 28px; line-height: 1.15; }
@media (min-width: 640px) { .t-36 { font-size: 32px; } }
@media (min-width: 768px) { .t-36 { font-size: 36px; } }

/* Aufhaenger ueber der Stellenbezeichnung */
.aufhaenger { margin-bottom: .6rem; }

/* Stellenbezeichnung: gross und rot, ohne Flaeche dahinter */
.stelle {
  margin: 0;
  text-align: center;
  color: var(--brand);
  font-size: 30px; line-height: 1.15; font-weight: 600;
}
.stelle__zusatz { display: block; font-size: 20px; line-height: 1.25; }
@media (min-width: 768px) {
  .stelle { font-size: 40px; }
  .stelle__zusatz { font-size: 24px; }
}

/* Abschnittstitel: dunkel wie der Text, darueber eine feine rote Linie als
   Trenner zum Abschnitt davor. */
.abschnitt-titel { color: #202020; }
.abschnitt-titel::before {
  content: "";
  display: block;
  border-top: 1px solid var(--brand);
  margin: 1.5rem 0 2.5rem;
}

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

.site-header { width: 100%; padding: 0.5rem 1rem; background: #fff; }
.site-header__inner { display: flex; align-items: center; justify-content: center; }
.site-header__logo { padding: 0.5rem; }
/* Das Logo der Praxis ist hochkant (Kreis ueber dem Schriftzug). Bei den
   64px eines Querformat-Logos waere der Schriftzug nicht mehr lesbar,
   deshalb ist es hier hoeher. */
.site-header img { height: 84px; width: auto; }
@media (min-width: 768px) { .site-header img { height: 112px; } }
/* Auf dem Handy rueckt der Kopf zusammen, damit der erste Aufruf moeglichst
   ohne Scrollen zu sehen ist. */
@media (max-width: 639px) {
  .site-header { padding-block: .25rem; }
  .site-header__logo { padding-block: .25rem; }
}

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

/* Signatur der Agentur: bewusst leiser als die Rechtslinks darueber. */
.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(0, 0, 0, .08);
}
.progress__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: #1D1D1B;
  width: 0;
  transition: width .4s ease;
}

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

.media { overflow: hidden; line-height: 0; border-radius: 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; }
/* Die drei Praxisfotos nebeneinander: 4:3 ist das Format der Aufnahmen,
   so wird an keiner Kante viel abgeschnitten. */
.media--43 img    { aspect-ratio: 4 / 3; }
/* Ohne festes Verhaeltnis: das Bild bestimmt seine Hoehe selbst und wird an
   keiner Kante beschnitten. width/height am <img> liefern das Verhaeltnis,
   deshalb springt beim Laden trotzdem nichts. */
.media--voll img { aspect-ratio: auto; }
@media (min-width: 768px) {
  .media--voll img { max-height: 55vh; width: auto; max-width: 100%; margin-inline: auto; }
}

/* Das Teamfoto ist quadratisch. Auf dem Handy wird es unten etwas
   angeschnitten (6:5, oben verankert): die Gesichter bleiben ganz, und der
   Aufruf darunter rueckt hoeher. Am Desktop begrenzt die Hoehe das Bild. */
@media (max-width: 639px) {
  .media--hero.media--voll img { aspect-ratio: 6 / 5; object-position: center top; }
}
@media (min-width: 768px) {
  .media--hero.media--voll img { max-height: 44vh; }
}

/* Auf dem Handy laufen die Bilder randlos ueber die volle Breite */
.media--hero { width: calc(100% + 48px); transform: translateX(-24px); }
@media (max-width: 639px) {
  .media--wide { width: calc(100% + 48px); transform: translateX(-24px); }
}
@media (min-width: 640px) {
  .media--hero { width: 100%; transform: none; }
}

/* Die drei Praxisfotos: auf dem Handy ein Slider zum Wischen statt drei
   Bilder untereinander, das spart gut zwei Bildhoehen. Das naechste Bild
   schaut rechts ein Stueck herein, damit man sieht, dass es weitergeht.
   Reines CSS (scroll-snap), die Punkte darunter setzt funnel.js.
   Ab Tablet stehen die drei Bilder nebeneinander. */
.galerie-punkte { display: none; }
@media (max-width: 767px) {
  .galerie {
    display: flex; gap: .75rem;
    padding-inline: 1.5rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .galerie::-webkit-scrollbar { display: none; }
  .galerie:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
  .galerie > .col { flex: 0 0 84%; height: auto; scroll-snap-align: start; }
  .galerie .col__inner { padding: 0; }
  .galerie .media--wide { width: 100%; transform: none; }

  .galerie-punkte { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
  .galerie-punkte span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0, 0, 0, .18);
    transition: background-color .2s ease, transform .2s ease;
  }
  .galerie-punkte span.is-aktiv { background: var(--brand); transform: scale(1.25); }
}

/* ---------- Eckdaten auf der Startseite ----------
   Ort in einer Zeile, Startzeitpunkt und Umfang nebeneinander in der
   naechsten. Flex statt <br>, damit die zweite Zeile auf schmalen Geraeten
   umbrechen darf statt zu ueberlaufen. */

.eckdaten {
  margin: .5rem 0 0;
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  font-size: 16px; line-height: 1.5;
  color: #202020;
}
@media (max-width: 639px) { .eckdaten { font-size: 15px; gap: .15rem .9rem; margin-top: .35rem; } }
.eckdaten .icon {
  width: 15px; height: 15px;
  vertical-align: -2px;
  margin-right: .15rem;
}

/* ---------- 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;
}
.list__text strong { font-weight: 600; }

/* Kontextzeile unter der Kernaussage */
.list__kontext { display: block; font-size: 14px; opacity: .82; margin-top: .15rem; }
.list__text:has(.list__kontext) { align-items: flex-start; }

/* Vorteile: Symbol oben, Titel und Erklaerung mittig darunter */
.list--mitte { gap: 2.25rem; }
.list--mitte .list__item { flex-direction: column; align-items: center; text-align: center; }
.list--mitte .list__text { margin: .35rem 0 0; min-height: 0; justify-content: center; }
.list--mitte .list__kontext { font-size: 16px; opacity: 1; margin-top: 0; }

/* Behandlungsspektrum: einzelne Zeilen, durch Haarlinien getrennt.
   Bewusst ohne Nummern, die Punkte sind gleichrangig. */
.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(0, 0, 0, .1);
  color: #202020; font-size: 16px; font-weight: 300; line-height: 1.35;
  text-align: center;
}
.spektrum__schluss { margin-top: 1rem; }

/* "Was Dich bei uns erwartet": zwei Arbeitsweisen nebeneinander, auch auf
   dem Handy. Ohne Karten und Flaechen wie der Rest der Seite, nur eine
   feine Linie trennt die beiden. */
.wahl { display: grid; grid-template-columns: 1fr 1fr; max-width: 34rem; margin-inline: auto; }
.wahl__seite { padding: .25rem 1rem; text-align: center; }
.wahl__seite + .wahl__seite { border-left: 1px solid rgba(0, 0, 0, .12); }
.wahl__symbol { display: block; font-size: 32px; line-height: 1; }
.wahl__titel { margin-top: .6rem; font-size: 18px; line-height: 1.25; font-weight: 600; color: #202020; }
.wahl__text { margin-top: .3rem; font-size: 16px; line-height: 1.4; }
.wahl__schluss { margin-top: 1.25rem; }
@media (min-width: 768px) {
  .wahl__seite { padding-inline: 2rem; }
  .wahl__titel { font-size: 20px; }
}

/* Ueber uns: schmale Textspalte, Absaetze mit Luft dazwischen */
.ueber p + p { margin-top: .75rem; }
.portrait { width: 100%; max-width: 260px; margin: 0 auto 1.5rem; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait figcaption { margin-top: .6rem; text-align: center; font-size: 14px; line-height: 1.4; color: var(--grey); }

/* ---------- 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;
  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 + .btn { margin-top: .75rem; }
.btn--lg { font-size: 20px; line-height: 1.28; }
@media (min-width: 768px) { .btn--lg { font-size: 24px; } }

/* Vorwaerts-Buttons sind der eine Weg durch die Strecke. Sie wackeln alle
   paar Sekunden kurz, langsam und mit kleiner Auslenkung. */
.btn--go {
  --btn-bg: var(--go);
  --btn-bg-dark: var(--go-dark);
  animation: jittery 6s ease 0s infinite;
}
@media (prefers-reduced-motion: reduce) { .btn--go { animation: none; } }
@keyframes jittery {
  5%, 50% { transform: scale(1); }
  10% { transform: scale(0.96); }
  15% { transform: scale(1.025); }
  20% { transform: scale(1.025) rotate(-1.75deg); }
  23% { transform: scale(1.025) rotate(1.75deg); }
  26% { transform: scale(1.025) rotate(-1.25deg); }
  30% { transform: scale(1.025) rotate(1.25deg); }
  35% { transform: scale(1.025) rotate(0deg); }
}

/* Der Absende-Knopf ist gruen: der letzte Klick, der die Bewerbung
   abschickt. Die Farbe kommt sonst nirgends als Flaeche vor. */
.btn--submit { --btn-bg: var(--submit); --btn-bg-dark: var(--submit-dark); }
.btn--go strong, .btn--submit strong { font-size: 20px; line-height: 1.25; }

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

/* Flache Kacheln mit feinem Rand. Rot erscheint erst bei Beruehrung oder
   Tastaturfokus, dann ist es genau ein Element auf dem Schirm. */
.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: 1px solid #d9d9d9; text-align: left; font: inherit;
  background: var(--answer);
  color: #2a2a2a;
  border-radius: var(--r-lg);
  transition: background-color .2s ease, transform .2s ease, border-color .15s ease;
}
.answer:hover  { background: var(--answer-dark); }
.answer:hover, .answer:focus-visible { border-color: var(--brand); }
.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);
}

/* Kleiner Pfeil: ein dezentes "hier geht's weiter" je Kachel */
.answer::after {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-top: 2px solid #9a9290;
  border-right: 2px solid #9a9290;
  transform: rotate(45deg);
  transition: border-color .15s ease;
}
.answer:hover::after, .answer:focus-visible::after { border-color: var(--brand); }

/* ---------- Schritt-Anzeige und Vertrauenszeilen im Quiz ---------- */

.pille {
  display: inline-block;
  padding: .4rem 1.1rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}

.vertrauen {
  margin: 0 0 .5rem;
  text-align: center;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .82);
}
.vertrauen--dunkel { color: #5c5c5c; margin: 0 0 .75rem; }

/* Zeitversprechen ueber dem Fragebogen. Steht bewusst vor der
   Schrittanzeige: erst der Aufwand, dann wo man gerade steht. */
.versprechen {
  margin: 0 0 .75rem;
  text-align: center;
  font-size: 22px; line-height: 1.25; font-weight: 700;
  color: #1D1D1B;
}
@media (min-width: 640px) { .versprechen { font-size: 26px; } }

/* ---------- 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; }
/* Die Felder stehen auf einer sehr hellen Flaeche, kein Kasten */
.col--formular form { background: #F7F7F7; margin: 0 -.5rem; padding: 1rem .5rem; border-radius: 8px; }
@media (min-width: 640px) { .col--formular form { margin: 0 -1rem; padding: 1.25rem 1rem; } }
/* Ab hier ist die Spalte breiter als das Formular: mittig setzen */
@media (min-width: 768px) { .col--formular form { margin-inline: auto; } }

.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(115, 134, 57, .2);
}
.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; }

.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: var(--gruen); border-color: var(--gruen); }
.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: #3a2422; cursor: pointer; }
.consent label a { color: inherit; text-decoration: underline; }

.form__error {
  display: none; color: #fff; background: rgba(20,20,20,.92);
  border-radius: var(--r-lg); padding: .75rem 1rem; font-size: 14px;
}
.form__error.is-visible { display: block; }

/* ---------- Erreichbarkeit auf der Danke-Seite ----------
   Eine Frage, ein Feld fuer die Uhrzeit, ein Knopf. Auf einer hellen
   Flaeche, damit es als ein Block gelesen wird. */
.erreichbar { padding: 1.25rem 1rem; border-radius: var(--r-lg); background: #F7F7F7; }
.erreichbar__hinweis { margin-top: .25rem; color: var(--grey); }
.erreichbar__uhrzeit { margin-top: 1rem; }
.erreichbar__senden { margin-top: .75rem; width: 100%; max-width: none; }
.erreichbar__senden[hidden] { display: none; }
.erreichbar__senden:disabled { opacity: .45; cursor: default; }
.erreichbar__senden:disabled:hover { background: var(--submit); }
.erreichbar__danke { margin-top: 1rem; font-weight: 600; color: #202020; }
.erreichbar .form__error { margin-top: 1rem; }

/* Was nach dem Absenden passiert, direkt unter dem Button. */
.nach-absenden { margin: .75rem 0 0; text-align: center; font-size: 15px; line-height: 1.4; color: #5c5c5c; }

/* ---------- Einwilligung ----------
   Karte unten links, die den Besucher nicht aussperrt: die Seite bleibt
   dahinter bedienbar. "Ablehnen" und "Akzeptieren" sehen bewusst gleich
   aus, keine der beiden Antworten wird optisch bevorzugt. */

.cookie {
  position: fixed; left: .75rem; right: .75rem; bottom: .75rem; z-index: 999;
  max-width: 380px;
  animation: cookie-rein .35s ease both;
}
@keyframes cookie-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }
.cookie[hidden] { display: none; }

.cookie__card {
  background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--r-xl);
  padding: .9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  font-size: 13px; line-height: 1.45; color: #374151;
}
.cookie__text strong { color: #202020; }
.cookie__card a { color: inherit; text-decoration: underline; }
.cookie__link {
  border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline;
}

.cookie__knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; }
.cookie__knopf {
  min-height: 42px; padding: .5rem .75rem;
  border: 0; border-radius: var(--r-lg);
  background: #202020; color: #fff;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.cookie__knopf:hover { background: #3a3a3a; }
.cookie__knopf:focus-visible, .cookie__link:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.cookie__knopf--breit { width: 100%; background: #fff; color: #202020; box-shadow: inset 0 0 0 1.5px #202020; }
.cookie__knopf--breit:hover { background: #f2f2f2; }

.cookie__auswahl { margin-top: .8rem; display: grid; gap: .65rem; }
.cookie__auswahl[hidden] { display: none; }
.cookie__zeile { display: flex; align-items: flex-start; gap: .6rem; cursor: pointer; }
.cookie__zeile[hidden] { display: none; }
.cookie__zeile input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gruen); }
.cookie__zeile strong { display: block; color: #202020; }
.cookie__klein { font-size: 12px; 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;
}

/* ---------- Rechtsseiten (Impressum, Datenschutz, Cookies) ---------- */

.legal { max-width: 48rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.legal h1 { font-size: 28px; line-height: 1.2; font-weight: 600; margin: 0 0 1.5rem; color: var(--brand); }
.legal h2 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 2rem 0 .5rem; }
.legal p, .legal li { font-size: 16px; line-height: 1.6; }
.legal p + p { margin-top: .75rem; }
.legal a { color: var(--brand); }
.legal ul { padding-left: 1.25rem; }
.legal code { font-size: 14px; background: #f2f2f2; padding: 1px 4px; border-radius: 4px; }
.legal .tabelle { overflow-x: auto; margin-top: .75rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 34rem; }
.legal th, .legal td { border: 1px solid #e5e7eb; padding: .5rem .75rem; text-align: left; vertical-align: top; }
.legal th { background: #f7f7f7; font-weight: 600; }
.legal .back { display: inline-block; margin-top: 2.5rem; }
.legal .stand { color: #707070; font-size: 14px; }