/* wallPen Flow — public funnel.
   Every colour comes from a CSS variable; a flow sets them on the body tag,
   the defaults below only apply when it does not. Barlow is served from this
   server, see schriften.css. */
:root {
  --grund: #f5f6f7;
  --schrift: #323E48;
  --gruen: #CEDC00;
  --akzent-schrift: #323E48;
  --karte-grund: #fff;
  --karte-schatten: 0 1px 3px rgba(50, 62, 72, .12);
  --feld-grund: #fff;
  --feld-rand: #dfe3e6;
  --kachel-grund: #fff;
  --kachel-schrift: #323E48;
  --kachel-rand: #dfe3e6;
  --spalten: 1fr;
  --rundung: 1rem;
  --logo-hoehe: 2.1rem;
  --schrift-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-kopf: "Barlow Condensed", "Barlow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--schrift-text);
  color: var(--schrift);
  background: var(--grund);
}
h1 {
  font-family: var(--schrift-kopf);
  font-weight: 600;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.15;
  margin: 0 0 .6rem;
}
.buehne { min-height: 100dvh; display: flex; align-items: center; justify-content: center;
          padding: 1.5rem; }
.saeule { width: min(40rem, 100%); display: grid; gap: 1.2rem; justify-items: center; }
.kopfbild { width: 100%; border-radius: var(--rundung); display: block; }
.kopflogo { height: var(--logo-hoehe); width: auto; max-width: 100%; }

.karte {
  width: 100%;
  background: var(--karte-grund);
  border-radius: var(--rundung);
  padding: clamp(1.4rem, 4vw, 2.4rem);
  box-shadow: var(--karte-schatten);
}
.hinweis { margin: 0 0 1.5rem; opacity: .75; font-size: 1.05rem; }
.fehler  { margin: 0 0 1rem; color: #ff6b6b; font-weight: 600; }

.fortschritt { position: fixed; inset: 0 0 auto 0; height: 4px; background: rgba(128,128,128,.25); }
.fortschritt span { display: block; height: 100%; background: var(--gruen); transition: width .25s; }

/* Kacheln: eine Spalte, Optik je Ablauf gefüllt oder umrandet */
.auswahl { display: grid; gap: .7rem; grid-template-columns: var(--spalten); }
.kachel {
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-start;
  width: 100%; padding: 1.05rem 1.2rem;
  font: inherit; font-size: 1.05rem; text-align: left;
  background: var(--kachel-grund); color: var(--kachel-schrift);
  border: 2px solid var(--kachel-rand); border-radius: calc(var(--rundung) * .65);
  cursor: pointer; transition: border-color .15s, transform .05s, filter .15s;
}
.kachel img { width: 100%; max-width: 6rem; aspect-ratio: 3/2; object-fit: contain; }
.kachel:hover { border-color: var(--gruen); filter: brightness(1.06); }
.kachel:active { transform: translateY(1px); }

.eingabe, .feld textarea, .feld select {
  width: 100%; padding: .9rem 1rem; font: inherit; font-size: 1.1rem;
  color: var(--schrift); background: var(--feld-grund);
  border: 2px solid var(--feld-rand); border-radius: calc(var(--rundung) * .65);
}
.feld > span { font-size: .9rem; font-weight: 600; opacity: .9; }
.eingabe:focus, .feld textarea:focus, .feld select:focus { outline: none; border-color: var(--gruen); }

.weiter, a.weiter.knopf {
  display: inline-block; margin-top: 1.2rem; padding: .9rem 2.2rem;
  font: inherit; font-size: 1.05rem; font-weight: 600; text-decoration: none;
  background: var(--gruen); color: var(--akzent-schrift);
  border: none; border-radius: calc(var(--rundung) * .65); cursor: pointer;
}
.weiter:hover { filter: brightness(.95); }

/* Formularschritt */
.formular { display: grid; gap: .9rem; }
.feld { display: grid; gap: .3rem; font-size: .9rem; opacity: .85; }
.feld textarea { resize: vertical; font-size: 1.05rem; }
.zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.zustimmung input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; accent-color: var(--gruen); }

/* Mehrfachauswahl */
.auswahl.mehrfach .kachel { position: relative; padding-left: 3rem; }
.auswahl.mehrfach .kachel input { position: absolute; left: 1.1rem; top: 1.25rem;
                                  width: 1.15rem; height: 1.15rem; accent-color: var(--gruen); }
.auswahl.mehrfach .kachel:has(input:checked) { border-color: var(--gruen); }

/* Abschlussseiten */
.abschluss .merkmale { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: 1.1rem; }
.abschluss .merkmale li { display: grid; gap: .2rem; padding-left: 1.1rem; position: relative; }
.abschluss .merkmale li::before {
  content: ""; position: absolute; left: 0; top: .45rem;
  width: .5rem; height: .5rem; background: var(--gruen); border-radius: 50%;
}
.abschluss .merkmale strong { font-family: var(--schrift-kopf);
                              font-size: 1.15rem; font-weight: 600; }
.abschluss .merkmale span { opacity: .8; }

/* Video über dem Inhalt */
.video { margin: 0 0 1.3rem; border-radius: calc(var(--rundung) * .65); overflow: hidden;
         background: #000; }
.video iframe, .video video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* Einseiten-Modus: alle Blöcke untereinander */
.einseite { display: grid; gap: 2.2rem; }
.einseite .block { display: grid; gap: .7rem; }
.einseite .blockkopf { font-family: var(--schrift-kopf); font-weight: 600;
                       font-size: clamp(1.3rem, 3.5vw, 1.8rem); margin: 0; text-align: center; }
.einseite .hinweis { margin: 0; text-align: center; }
.einseite .auswahl .kachel { position: relative; padding-left: 3rem; }
.einseite .auswahl .kachel input { position: absolute; left: 1.1rem; top: 1.2rem;
                                   width: 1.1rem; height: 1.1rem; accent-color: var(--gruen); }
.einseite .kachel:has(input:checked) { border-color: var(--gruen); }
.einseite > .weiter { justify-self: center; }

/* Köderfeld: für Menschen unsichtbar, für Ausfüllmaschinen verlockend */
.koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Rechtliche Verweise unter dem Inhalt */
.fuss { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
        font-size: .85rem; opacity: .7; }
.fuss a { color: inherit; text-decoration: none; }
.fuss a:hover { text-decoration: underline; }