/* AckerMind Umfrage — Gestaltung
   Tokens, Kopfleiste, Sektionsaufbau und Bewegung sind aus ackermind.de
   uebernommen (site/styles.css und build/common.py im Repo ackermind-website).
   Wer dort etwas aendert, sollte hier nachziehen.

   Aufbau von klein nach gross: die Grundregeln gelten fuer das Telefon, groessere
   Schirme bekommen Zusaetze. Die Zielgruppe fuellt das abends am Handy aus. */

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --green-900: #011c11;
  --green-800: #023823;
  --green-700: #084b2e;
  --lime: #98c800;
  --lime-bright: #b3e300;

  --ink: #ffffff;
  --ink-80: rgba(255, 255, 255, .8);
  --ink-60: rgba(255, 255, 255, .6);
  --ink-40: rgba(255, 255, 255, .4);
  --line: rgba(255, 255, 255, .14);
  --line-stark: rgba(255, 255, 255, .3);

  --r-s: 4px;
  --r-btn: 10px;

  /* Eine Abstandsskala statt frei gewaehlter Werte — sonst driften die
     Abstaende mit jeder Aenderung weiter auseinander. */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 18px;
  --s-4: 28px;
  --s-5: 44px;

  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(52px, 8vw, 104px);
  --maxw: 1160px;
  --maxw-text: 720px;
  --kopf-hoehe: 66px;

  --t-h1: clamp(32px, 5.8vw, 62px);
  --t-h2: clamp(25px, 4.4vw, 42px);
  --t-frage: clamp(17px, 2.1vw, 21px);
  --t-lead: clamp(16px, 1.3vw, 19px);
  --t-body: clamp(15px, 1.05vw, 17px);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .9s;
  --t-schnell: .22s;
  --t-normal: .38s;
}

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

/* Ohne diese Regel setzt der Browser Links blau und unterstrichen — auf
   dunkelgruenem Grund ein Fremdkoerper. */
a { color: var(--lime); text-decoration: none; }
a:hover { color: var(--lime-bright); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--lime-bright); outline-offset: 3px; border-radius: 2px; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--green-800);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.blende {
  position: fixed;
  inset: 0;
  background: var(--green-900);
  z-index: 200;
  pointer-events: none;
  animation: aufblenden .7s var(--ease) forwards;
}
@keyframes aufblenden { to { opacity: 0; visibility: hidden; } }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Textspalte: begrenzte Zeilenlaenge, linksbuendig an derselben Kante wie das
   Logo. Die Website setzt alle Abschnitte auf eine Kante. */
.spalte { max-width: var(--maxw-text); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--lime);
  color: var(--green-900);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-btn);
  font-weight: 600;
  z-index: 210;
}
.skip-link:focus { left: var(--gutter); top: var(--s-2); }

/* Kopfleiste ------------------------------------------------------------- */
/* Schlicht: nur das Logo. Begruendung steht in templates/_kopf.html. */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-normal) var(--ease),
              border-color var(--t-normal) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(2, 56, 35, .96);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; min-height: var(--kopf-hoehe); }
.brand { display: block; width: 140px; flex: 0 0 auto; }
.brand img { display: block; width: 100%; height: auto; }

/* Sektionen -------------------------------------------------------------- */

.page-head {
  position: relative;
  isolation: isolate;
  padding-block: calc(var(--kopf-hoehe) + var(--s-5)) var(--s-5);
  overflow: hidden;
}

.bed {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
}
.bed--flat { background: var(--green-800); }
.bed--deep {
  background: linear-gradient(180deg, var(--green-800), var(--green-900) 50%, var(--green-800));
}

/* Kein Abschnitt startet nackt — Designregel der Website. */
.has-mark::before {
  content: '';
  position: absolute;
  inset-block-start: -200px;
  inset-inline-end: -180px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 200, 0, .15), transparent 68%);
  pointer-events: none;
  z-index: -1;
}

.chapter-no {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--lime);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 { margin: 0 0 var(--s-3); font-size: var(--t-h1); line-height: 1.08; font-weight: 600; letter-spacing: -.015em; }
h2 { margin: 0 0 var(--s-3); font-size: var(--t-h2); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.accent { color: var(--lime); }

.rule { width: 64px; height: 3px; background: var(--lime); margin-bottom: var(--s-4); }
.lead { margin: 0 0 var(--s-4); font-size: var(--t-lead); color: var(--ink-80); max-width: 52ch; }

/* Hinweiskasten ---------------------------------------------------------- */

.hinweise {
  list-style: none;
  margin: 0;
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}
.hinweise li { display: flex; gap: var(--s-2); align-items: flex-start; }
.hinweise svg { width: 20px; height: 20px; flex: none; color: var(--lime); margin-top: 3px; }
.hinweise span { color: var(--ink-80); }

/* Fragen ----------------------------------------------------------------- */

.frage {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  /* Sonst verschwindet die Frage beim Anspringen unter der Leiste. */
  scroll-margin-top: calc(var(--kopf-hoehe) + var(--s-3));
}
.frage + .frage { margin-top: var(--s-5); padding-top: var(--s-5); }
.frage + .frage::before {
  content: '';
  display: block;
  height: 1px;
  background: var(--line);
  /* Der Strich sitzt oben im Innenabstand, nicht als Rahmen: eine <legend>
     bricht jeden fieldset-Rahmen auf und der Strich liefe durch die Frage. */
  margin-top: calc(var(--s-5) * -1);
  margin-bottom: var(--s-5);
}
.spalte > .frage:first-of-type { margin-top: var(--s-5); }

legend.fragetext {
  /* float statt display:block: nur so verliert eine Legende ihre
     Sonderstellung im Rahmen und verhaelt sich wie normaler Text. */
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--s-1);
  font-size: var(--t-frage);
  font-weight: 600;
  line-height: 1.35;
}
.frage-hinweis { clear: both; margin: 0 0 var(--s-3); color: var(--ink-60); font-size: 14px; }
.optionen, .skala, .feld, .eingabe-zeile { clear: both; }

/* Eine bedingte Frage faellt beim Erscheinen sanft ein, damit der Sprung
   nicht wie ein Fehler wirkt. */
.frage--bedingt:not([hidden]) { animation: einfalten var(--t-normal) var(--ease); }
@keyframes einfalten {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}

.optionen { display: grid; gap: var(--s-1); margin-top: var(--s-3); }

/* Eigene Bedienelemente — die Browser-Vorgaben sehen auf dunklem Grund
   zusammengewuerfelt aus und lassen sich nicht in die Marke bringen. */
.option {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  transition: border-color var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease);
}
.option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.marke {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--line-stark);
  background: rgba(0, 0, 0, .18);
  transition: border-color var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease);
}
.marke--radio { border-radius: 50%; }
.marke--checkbox { border-radius: var(--r-s); }

.marke--radio::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-900);
  opacity: 0;
  scale: .4;
  transition: opacity var(--t-schnell) var(--ease), scale var(--t-schnell) var(--ease);
}
/* Der Haken sitzt im Raster mittig — feste Pixelwerte sassen bei jeder
   Groessenaenderung wieder daneben. */
.marke--checkbox svg {
  width: 14px;
  height: 14px;
  color: var(--green-900);
  opacity: 0;
  scale: .6;
  transition: opacity var(--t-schnell) var(--ease), scale var(--t-schnell) var(--ease);
}
.option:has(input:checked) .marke--checkbox svg { opacity: 1; scale: 1; }

.optionstext { line-height: 1.4; }

.option:hover { border-color: var(--line-stark); background: rgba(255, 255, 255, .06); }
.option:has(input:checked) { border-color: rgba(152, 200, 0, .65); background: rgba(152, 200, 0, .09); }
.option:has(input:checked) .marke { border-color: var(--lime); background: var(--lime); }
.option:has(input:checked) .marke::after { opacity: 1; scale: 1; }
.option:has(input:focus-visible) {
  outline: none;
  border-color: var(--lime-bright);
  box-shadow: 0 0 0 3px rgba(179, 227, 0, .25);
}

/* Skala ------------------------------------------------------------------ */

.skala { margin-top: var(--s-3); }
.skala-stufen { display: flex; gap: var(--s-1); }
.stufe {
  position: relative;
  flex: 1;
  min-height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  transition: border-color var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease),
              color var(--t-schnell) var(--ease);
}
.stufe input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.stufe:hover { border-color: var(--line-stark); }
.stufe:has(input:checked) { border-color: var(--lime); background: var(--lime); color: var(--green-900); }
.stufe:has(input:focus-visible) {
  outline: none;
  border-color: var(--lime-bright);
  box-shadow: 0 0 0 3px rgba(179, 227, 0, .25);
}

.skala-enden {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-1);
  color: var(--ink-60);
  font-size: 13px;
}

/* Eingabefelder ---------------------------------------------------------- */

.feld {
  width: 100%;
  margin-top: var(--s-3);
  font: inherit;
  font-size: 16px; /* unter 16px zoomt iOS beim Fokus hinein */
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: var(--s-2) var(--s-3);
  transition: border-color var(--t-schnell) var(--ease);
}
textarea.feld { resize: vertical; min-height: 112px; display: block; }
.feld::placeholder { color: var(--ink-40); }
.feld:focus { outline: 2px solid var(--lime-bright); outline-offset: 1px; border-color: transparent; }
.feld--sonstiges { margin-top: var(--s-1); }

.eingabe-zeile { display: flex; align-items: center; gap: var(--s-2); }
.einheit { color: var(--ink-60); }

/* Der Honigtopf darf fuer Menschen nicht sichtbar und nicht erreichbar sein. */
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Abschnitts-Abschluss ----------------------------------------------------- */
/* Erscheint, wenn ein Abschnitt ausgefuellt ist — ein Bogen ohne Rueckmeldung
   fuehlt sich an wie eine Liste, die man abarbeitet. */

.abschnitt-abschluss {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 0;
  padding: var(--s-3);
  border: 1px solid rgba(152, 200, 0, .3);
  border-radius: var(--r-btn);
  background: rgba(152, 200, 0, .08);
  color: var(--ink-80);
  animation: einfalten var(--t-normal) var(--ease);
}
.abschnitt-abschluss svg { width: 20px; height: 20px; flex: none; color: var(--lime); }
/* Ohne diese Zeile schlaegt `display:flex` den Browser-Standard fuer [hidden]
   und der Hinweis stuende von Anfang an da. Gleicher Fehler wie zuvor beim
   Kopf-Knopf — deshalb hier einmal generell fuer alle eigenen Klassen. */
[hidden] { display: none !important; }

/* Kanäle auf der Danke-Seite ---------------------------------------------- */

.social { margin-top: var(--s-5); }
.social-titel { margin: 0 0 var(--s-3); color: var(--ink-60); font-size: 14px; }
.social-liste { display: grid; gap: var(--s-2); }
.social-karte {
  display: block;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  transition: border-color var(--t-schnell) var(--ease),
              background var(--t-schnell) var(--ease);
}
.social-karte:hover { border-color: var(--lime); background: rgba(152, 200, 0, .08); text-decoration: none; }
.social-name { display: block; color: var(--lime); font-weight: 600; }
.social-text { display: block; color: var(--ink-60); font-size: 14px; }

/* Abschluss -------------------------------------------------------------- */

.cta-bereich { padding-bottom: calc(var(--section-y) + 64px); }

.cta-panel {
  position: relative;
  isolation: isolate;
  padding: var(--s-5) var(--s-4);
  border: 1px solid rgba(152, 200, 0, .34);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
}
.cta-panel::before {
  content: '';
  position: absolute;
  inset-block-start: -140px;
  inset-inline-end: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(152, 200, 0, .2), transparent 70%);
  z-index: -1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-4);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--r-btn);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-schnell) var(--ease),
              transform var(--t-schnell) var(--ease),
              border-color var(--t-schnell) var(--ease),
              color var(--t-schnell) var(--ease);
}
.btn-primary { background: var(--lime); color: var(--green-900); }
.btn-primary:hover { background: var(--lime-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn svg { width: 20px; height: 20px; }
.nav-cta, .header-cta { min-height: 44px; font-size: 14.5px; padding: 0 var(--s-3); }

.cta-note { margin: var(--s-3) 0 0; color: var(--ink-60); font-size: 14px; }

/* Fortschritt ------------------------------------------------------------ */

.fortschritt {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--gutter);
  background: rgba(1, 28, 17, .94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  opacity: 0;
  translate: 0 100%;
  transition: opacity var(--t-normal) var(--ease), translate var(--t-normal) var(--ease);
}
.fortschritt.is-sichtbar { opacity: 1; translate: 0 0; }
.fortschritt-balken {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.fortschritt-balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--lime);
  border-radius: 999px;
  transition: width var(--t-normal) var(--ease);
}
.fortschritt-text { flex: none; font-size: 13px; color: var(--ink-60); font-variant-numeric: tabular-nums; }

/* Danke ------------------------------------------------------------------ */

.danke-seite { min-height: 70vh; display: flex; align-items: center; }
.haken { color: var(--lime); margin-bottom: var(--s-3); }
.haken svg { width: 56px; height: 56px; }

/* Pilot-Hinweis am Ende ---------------------------------------------------- */

.pilot-panel {
  margin-top: var(--s-5);
  padding: var(--s-5) var(--s-4);
  border: 1px solid rgba(152, 200, 0, .3);
  border-radius: var(--r-s);
  background: rgba(255, 255, 255, .03);
}
.pilot-panel h2 { font-size: clamp(21px, 3vw, 30px); }
.pilot-panel .lead { margin-bottom: var(--s-4); }

/* Fuss ------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-4);
  color: var(--ink-60);
  font-size: 14px;
}
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.site-footer a { color: var(--ink-60); transition: color var(--t-schnell) var(--ease); }
.site-footer a:hover { color: var(--lime); }

/* Bewegung --------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* Ab Tablet -------------------------------------------------------------- */

@media (min-width: 700px) {
  :root { --kopf-hoehe: 78px; }

  .brand { width: 168px; height: 63px; }
  .site-header.is-scrolled .brand { width: 140px; height: 53px; }
  .site-header.is-scrolled .header-inner { min-height: 64px; }

  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.2vw, 32px);
    padding: 0;
    background: none;
    border: 0;
    opacity: 1;
    visibility: visible;
    translate: 0;
  }
  .nav a { font-size: 14.5px; padding: 4px 0; position: relative; }
  /* Unterstrich, der beim Zeigen aufzieht — wie auf der Website. */
  .nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-normal) var(--ease);
  }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { transform: scaleX(1); }
  .site-header .nav-cta, .nav-toggle { display: none; }
  .site-header .header-cta { display: inline-flex; }

  .optionen { gap: var(--s-2); }
  .cta-panel { padding: var(--s-5); }
  .skala-stufen { gap: var(--s-2); }
  .stufe { flex: 0 0 64px; }
}

/* Ruecksicht ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blende { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .frage--bedingt:not([hidden]) { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
}