/* ============================================================
   survey.css – Seiten für Schüler:innen (Code, Fragebogen, Dank)
   Mobile first. Überarbeitet 2026-10-27, siehe PROJEKTSTAND
   „Layout“: Die Antwortskala ist das wiedererkennbare Element —
   die gewählte Antwort wird mit FHBK-Grün gefüllt, wie ein Kreuz
   auf dem Papierbogen. Dieselbe Skala erscheint in der Auswertung.
   ============================================================ */

/* Atkinson Hyperlegible (Braille Institute, 2020) — entworfen für die
   Unterscheidbarkeit ähnlicher Zeichen (l/I/1, 0/O), wichtig bei den
   Klassencodes. Selbst gehostet, kein Abruf bei Dritten.
   Lizenz: schrift/Atkinson-Hyperlegible-Font-License-2020-1104.pdf */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("schrift/Atkinson-Hyperlegible-Regular-102.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("schrift/Atkinson-Hyperlegible-Bold-102.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

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

:root {
  /* FHBK-Grün, Pantone 381 C = #CDDB00 (Wert der Schule). Nur als FLÄCHE mit
     dunkler Schrift tragfähig (10,0:1); auf Weiß als Schrift- oder Linienfarbe
     unbrauchbar (1,5:1). Für Schrift, Linien und Schaltflächen die dunklen Töne. */
  --fhbk:     #CDDB00;
  --fhbk-dk:  #4f5b00;   /* 7,4:1 auf Weiß */
  --fhbk-dk2: #3a4300;   /* 10,6:1 auf Weiß */
  --fhbk-lt:  #f7f9e0;

  --tinte:    #23270f;   /* Schrift: Schwarz mit einem Hauch Oliv */
  --grau:     #5f6352;   /* Nebentext, 6,1:1 auf Weiß */
  --linie:    #d9dccb;
  --grund:    #ffffff;
  --rot:      #b42318;

  --schrift: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
}

html { font-size: 17px; }
body {
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--tinte);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main   { flex: 1 0 auto; width: 100%; }
body > footer { flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--fhbk-dk2); outline-offset: 2px; }

/* Nur für Bildschirmleser (z. B. „Frage 3 von 16:“ vor dem Fragetext). */
.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;
}

/* ---- Kopf ---- */
/* Der Kopf bleibt beim Scrollen stehen, damit der Fortschritt sichtbar ist.
   (Bis 2026-10-27: body fest, nur main rollte — dabei verschob ein Klick das
   ganze Dokument und schnitt den Kopf ab.) */
.survey-header {
  background: var(--fhbk);
  color: var(--tinte);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.survey-header .container { padding-top: 18px; padding-bottom: 16px; }
.survey-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.survey-header .sub {
  font-size: .9rem;
  margin-top: 2px;
}

/* ---- Fortschritt: ein Feld je Frage ----
   Zeigt nicht nur wie viel, sondern WELCHE Frage noch offen ist. */
.fortschritt {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 3px;
  margin-top: 14px;
}
.fortschritt span {
  height: 8px;
  border-radius: 2px;
  background: rgba(35, 39, 15, .16);
}
.fortschritt span.an { background: var(--fhbk-dk2); }
.progress-label {
  font-size: .82rem;
  margin-top: 6px;
}

/* ---- Container ---- */
.container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 18px;
}
main.container { padding-top: 22px; padding-bottom: 40px; }

.einleitung {
  font-size: 1rem;
  max-width: 34em;
  margin-bottom: 8px;
}

/* ---- Fragebogen ---- */
.question-card {
  border: 0;
  border-top: 1px solid var(--linie);
  padding: 22px 0 24px;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 10px;
  scroll-margin-top: 150px;   /* nicht unter dem stehenden Kopf verschwinden */
}
.question-card:first-of-type { border-top: 0; }
.question-number {
  grid-row: 1 / span 2;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--fhbk-dk);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.question-text {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 14px;
  padding: 0;
}

/* Die Skala: vier Felder, die zusammengehören. Auf dem Handy untereinander,
   ab 600 px nebeneinander. */
.answer-options {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--fhbk-dk);
  border-radius: 10px;
  overflow: hidden;
}
.answer-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-top: 1px solid var(--linie);
}
.answer-option:first-child { border-top: 0; }
.answer-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--fhbk-dk);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
}
.answer-option input[type="radio"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fhbk-dk2);
  transform: scale(0);
  transition: transform .12s ease-out;
}
.answer-option span { font-size: 1rem; line-height: 1.25; }
.answer-option:hover { background: var(--fhbk-lt); }

/* Gewählt: das Feld füllt sich mit FHBK-Grün. */
.answer-option:has(input:checked) { background: var(--fhbk); }
.answer-option:has(input:checked) span { font-weight: 700; }
.answer-option input[type="radio"]:checked::before { transform: scale(1); }
.answer-option:has(input:focus-visible) { outline: 3px solid var(--fhbk-dk2); outline-offset: -5px; }
.answer-option input[type="radio"]:focus-visible { outline: none; }

.question-card.unanswered .answer-options { border-color: var(--rot); }

/* ---- Absenden ---- */
.submit-wrap {
  border-top: 1px solid var(--linie);
  padding-top: 24px;
  margin-top: 4px;
}
.submit-note {
  font-size: .88rem;
  color: var(--grau);
  margin-top: 10px;
}

/* ---- Schaltflächen ---- */
.btn {
  display: inline-block;
  padding: 15px 24px;
  border-radius: 10px;
  border: 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--fhbk-dk2); color: #fff; width: 100%; }
.btn-primary:hover { background: var(--tinte); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.btn-success { background: var(--fhbk-dk2); color: #fff; width: 100%; }

/* ---- Hinweise ---- */
.alert {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: .95rem;
  margin-bottom: 18px;
  border-left: 4px solid;
}
.alert-error { background: #fdf1f0; color: var(--rot); }
.alert-info  { background: var(--fhbk-lt); color: var(--fhbk-dk2); border-color: var(--fhbk-dk); }

/* ---- Code-Eingabe (index.php) ---- */
.code-card { margin-top: 8px; }
.code-card h2 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 6px; }
.code-card p  { color: var(--grau); margin-bottom: 20px; max-width: 32em; }
.code-input-wrap { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.code-input {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 14px 12px;
  border: 2px solid var(--fhbk-dk);
  border-radius: 10px;
  color: var(--tinte);
  background: #fff;
}
.code-input::placeholder { color: #a7ab98; }
.code-input:focus { outline: none; box-shadow: 0 0 0 4px var(--fhbk); }

/* ---- Danke-Seite ---- */
.thanks-card { margin-top: 8px; }
.thanks-icon { display: block; margin-bottom: 14px; }
.thanks-card h2 { font-size: 1.6rem; line-height: 1.2; margin-bottom: 8px; }
.thanks-card p  { color: var(--grau); max-width: 32em; }

/* ---- Fuß ---- */
.survey-footer {
  padding: 14px 18px;
  font-size: .8rem;
  color: var(--grau);
  text-align: center;
  border-top: 1px solid var(--linie);
}

/* ---- Ab Tablet: Skala nebeneinander ---- */
@media (min-width: 600px) {
  .survey-header h1 { font-size: 1.9rem; }
  .question-card { grid-template-columns: 3rem 1fr; }
  .question-number { font-size: 2rem; }
  .answer-options { flex-direction: row; }
  .answer-option {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;   /* Kreise auf einer Höhe, auch bei zweizeiliger Beschriftung */
    text-align: center;
    gap: 8px;
    min-height: 92px;
    padding: 16px 8px 12px;
    border-top: 0;
    border-left: 1px solid var(--linie);
  }
  .answer-option:first-child { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}