/* ============================================================================
   Wachstumstest - Gestaltung
   Ergaenzt css/stil.css, nutzt dessen Farb- und Schrift-Token.
   Inhalt und Auswertungslogik stammen aus Tims Prototyp vom 21.07.2026.
   ========================================================================= */

/* Breiter als vorher: die Seite soll die Bildschirm-
 breite nutzen, statt als schmale, sehr hohe Saeule zu laufen. Dadurch
 werden die Antwortkarten schmaler und wirken ruhiger. Lesetexte bleiben
 ueber max-width an den einzelnen Bausteinen begrenzt. */
.wt-raum{max-width:1240px;margin:0 auto;padding:0 22px}
/* Abstand ueber dem Test gekuerzt, vorher 120 Pixel */
.wt-raum--seite{padding-top:96px;padding-bottom:64px}

.wt-karte{
  background:var(--paper);border:1px solid var(--line);border-radius:20px;
  padding:44px 44px 40px;box-shadow:0 1px 2px rgba(52,44,49,.04),0 14px 40px rgba(52,44,49,.06);
}

/* Die Schritte sind <section>-Elemente und erbten dadurch aus stil.css
 Zeile "section{padding:clamp(58px,7.5vw,100px) 0;border-top:..}" bis zu
 100 Pixel Polster und eine Trennlinie. Innerhalb der Karte gehoert beides
 nicht hin, es hat die Seite unnoetig hoch gemacht. */
.wt-schritt{display:none;padding:0;border-top:0}
.wt-schritt.aktiv{display:block}

.wt-kicker{font-family:var(--sans);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--violet);font-weight:600;margin:0 0 14px}
.wt-karte h1{font-family:var(--serif);font-size:clamp(28px,4.4vw,40px);line-height:1.2;
  letter-spacing:-.01em;color:var(--ink);margin:0 0 16px;font-weight:600}
.wt-karte h2{font-family:var(--serif);font-size:clamp(21px,2.9vw,28px);line-height:1.26;
  letter-spacing:-.008em;color:var(--ink);margin:0 0 12px;font-weight:600}
.wt-karte h3{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--ink);
  margin:0 0 8px;font-weight:600}
.wt-karte p{margin:0 0 14px;color:var(--ink-soft);line-height:1.65}
.wt-lead{font-size:17.5px;color:var(--ink);max-width:60ch}
.wt-leise{font-size:14.5px;color:var(--faint)}
.wt-zg{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)}

/* ---------- Fortschritt ----------
 Der Kopf des Fragen-Schritts bleibt beim Scrollen stehen,
 damit immer sichtbar ist, in welchem Feld man gerade ist. Der weisse
 Grund verhindert, dass Fragen darunter durchscheinen. */
.wt-kopf-fest{position:sticky;top:78px;z-index:5;background:var(--paper);
  padding:18px 0 14px;margin-top:-18px;border-bottom:1px solid var(--line)}
.wt-kopf-fest h2{margin-bottom:6px}
.wt-kopf-fest .wt-leise{margin-bottom:0}
.wt-fortschritt{margin-bottom:16px}
/* Kleiner: Die Standortangabe ist eine Nebeninfo, stand aber
 mit 12,5 Pixel Versalien so schwer wie eine Zwischenüberschrift.
 Zurückhaltung kommt jetzt aus Grad und Laufweite, nicht aus einem blassen
 Ton: #8B8391 erreichte auf Weiss nur 3,6:1 und lag damit unter den 4,5:1,
 die WCAG 1.4.3 für kleinen Text verlangt (BFSG). Bei 11 Pixel wäre das
 noch schlechter lesbar gewesen, deshalb der dunklere Ton mit 7,8:1. */
.wt-stufe{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:9px}

/* ---------- Fortschritt in acht Segmenten ----------
 Loest den durchgehenden Balken ab. Ein Balken sagt nur "wie weit", die
 Segmente sagen zusaetzlich "in welchem Kapitel": Sie sind nach den drei
 Triebwerksstufen gruppiert und beschriftet, die laufende Gruppe steht in
 Violett.
 Die Gruppen sind nach ihrer Feldzahl gewichtet: "--felder" setzt das Skript
 je Gruppe, daraus wird der Flex-Anteil. So ist ein Segment ueberall gleich
 breit, sonst waeren die drei Felder der Navigation schmaler als die zwei des
 Schubs. Die Gewichtung sitzt bewusst an der Gruppe und nicht am Raster:
 Bekommt eine Stufe spaeter ein Feld mehr, stimmt sie ohne Nacharbeit.
 Aufbau und Beschriftung erzeugt das Skript im HTML aus STAGES, hier steht
 nur das Aussehen. */
/* Feiner gesetzt: Die Leiste soll den Fortschritt zeigen und
 nicht die Kopfzeile beherrschen. Segmente von 7 auf 4 Pixel Höhe, Lücken
 und Gruppenabstände enger, Stufenwörter eine Stufe kleiner. Eine dünne
 Linie liest sich als Anzeige, ein dicker Balken als Bauteil. Getroffen
 werden nur Größen und Abstände, Aufbau und Logik bleiben. */
.wt-stufenleiste{display:flex;gap:16px;align-items:flex-start}
.wt-stufengruppe{flex:var(--felder,1) 1 0;display:grid;gap:8px;min-width:0}
.wt-segmente{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.wt-segmente i{display:block;height:4px;border-radius:99px;background:var(--line);
  transition:background .35s cubic-bezier(.4,0,.2,1)}
.wt-segmente i[data-voll="true"]{background:var(--violet)}
/* Die wartenden Stufen tragen das leichtere Gewicht, die laufende das volle
   und die Farbe. So sieht man auf einen Blick, wo man steht, ohne dass drei
   Woerter gleich laut um Aufmerksamkeit bitten. */
.wt-stufenwort{text-align:center;font-size:11px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);transition:color .3s ease}
.wt-stufengruppe[data-aktiv="true"] .wt-stufenwort{color:var(--violet);font-weight:600}
/* Auf dem Telefon reicht die Breite nicht fuer drei Woerter nebeneinander:
   "Tragfaehigkeit" allein braucht dort mehr Platz als ein Drittel der Zeile.
   Die Segmente bleiben, beschriftet wird nur noch die laufende Stufe. */
@media (max-width:600px){
  .wt-stufenleiste{gap:10px}
  .wt-segmente i{height:4px}
  .wt-stufenwort{font-size:10.5px;letter-spacing:.06em;opacity:0;
    white-space:nowrap;overflow:hidden}
  .wt-stufengruppe[data-aktiv="true"] .wt-stufenwort{opacity:1}
}

/* ---------- Fragen ---------- */
.wt-feldsatz{border:0;padding:0;margin:0 0 30px;min-width:0}
.wt-feldsatz:last-of-type{margin-bottom:0}
.wt-frage{font-size:16.5px;line-height:1.55;color:var(--ink);font-weight:600;margin:0 0 14px;padding:0}
/* Die drei Antworten stehen nebeneinander, der Buchstabe sitzt oben.
 Alle Karten sind gleich breit und gleich hoch: gleiche
 Spaltenbreite ueber das Raster, gleiche Hoehe ueber stretch und eine
 Mindesthoehe, damit auch kurze Antworten nicht aus der Reihe fallen. */
.wt-optionen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.wt-option{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;text-align:left;
  min-height:152px;
  background:var(--paper);border:1.5px solid var(--line);border-radius:12px;
  padding:16px 18px;cursor:pointer;font:inherit;font-size:14.5px;
  line-height:1.5;color:var(--ink-soft);transition:border-color .15s,background .15s;
}
.wt-option:hover{border-color:var(--violet-hell)}
.wt-option:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.wt-option[aria-pressed="true"]{border-color:var(--violet);background:#FCF7FE;color:var(--ink)}
.wt-marke{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  color:var(--faint);font-family:var(--sans);
}
.wt-option[aria-pressed="true"] .wt-marke{background:var(--violet);border-color:var(--violet);color:#fff}

.wt-steuerung{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}

/* ---------- Ergebnis ---------- */
.wt-mitte{text-align:center}
.wt-band{display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--violet);background:#FAF3FD;
  border:1px solid #EBD5F5;border-radius:99px;padding:6px 16px;margin-bottom:20px}
.wt-punkte{font-family:var(--serif);font-size:64px;line-height:1;color:var(--violet);font-weight:600;
  font-variant-numeric:tabular-nums}
.wt-von{font-family:var(--serif);font-size:24px;color:var(--faint)}

/* Stufen, Hebel und Feld-Balken stehen auf breiten Schirmen nebeneinander
 statt gestapelt. */
#stagesContainer{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#hebelContainer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
#barsContainer{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
.wt-stufe-block{border:1px solid var(--line);border-radius:12px;padding:16px 18px}
/* In der Dreier-Reihe steht das Etikett immer unter dem Namen: nebeneinander
   wuerde es je nach Namenslaenge mal so, mal so umbrechen. */
.wt-stufe-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.wt-stufe-name{font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:600}
.wt-status{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 11px;border-radius:99px;white-space:nowrap}
.wt-traegt{background:#F2FAF4;color:#1F6B39;border:1px solid #CFE8D8}
.wt-ruckelt{background:#FDF8EC;color:#8A6414;border:1px solid #EDDCB4}
.wt-fehlt{background:#FDF2F7;color:#9A1B63;border:1px solid #F0CFE2}
.wt-stufe-sub{font-size:14px;color:var(--ink-soft);margin-top:7px;line-height:1.5}

.wt-hebel-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  flex-wrap:wrap;border-bottom:1px solid var(--line);padding:13px 0}
.wt-hebel-zeile:last-child{border-bottom:0}
.wt-frist{font-family:var(--sans);font-size:12.5px;color:var(--violet);font-weight:600;white-space:nowrap}

/* ---------- Formular ---------- */
.wt-feldname{display:block;font-size:14.5px;font-weight:600;color:var(--ink);margin:20px 0 7px}
.wt-eingabe{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--paper)}
.wt-eingabe:focus-visible{outline:3px solid var(--violet);outline-offset:1px;border-color:var(--violet)}
.wt-fehler{color:#B4184E;font-size:14px;margin:10px 0 0;min-height:20px}
/* Einwilligungssatz direkt unter dem E-Mail-Feld. Klein, aber
 nicht kleiner als 13 Pixel: darunter meldet die Mobil-Pruefung zu Recht
 schwer lesbaren Kleinsatz. Der Verweis traegt auf Beruehrungsgeraeten
 senkrechtes Polster, damit die Trefferflaeche 24 Pixel erreicht. */
.wt-einwilligung{margin-top:10px;font-size:13px;line-height:1.55;color:var(--ink-soft)}
.wt-einwilligung a{color:var(--violet)}
@media (hover:none),(pointer:coarse){.wt-einwilligung a{display:inline-block;padding-block:4px}}
/* ---------- Gesonderte Einwilligung in die Kontaktaufnahme (19.08.) ----------
   Bewusst als echtes Kaestchen und nicht als Satz: Eine Einwilligung in
   Werbekontakt muss ausdruecklich erklaert werden, ein Haken ist die
   nachweisbare Form. Nicht vorausgewaehlt, das waere keine Einwilligung.
   Die Zeile misst mitsamt Polster 44 Pixel Hoehe und liegt damit ueber der
   geforderten Tastgroesse, das Kaestchen selbst waere mit 18 Pixeln zu klein. */
.wt-haken{display:flex;align-items:flex-start;gap:11px;margin-top:16px;
  padding:11px 0;font-size:13.5px;line-height:1.55;color:var(--ink-soft);cursor:pointer}
.wt-haken input{flex:none;width:19px;height:19px;margin-top:1px;accent-color:var(--violet);cursor:pointer}
.wt-haken input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
/* Honigtopf: aus dem Bild, aber nicht per display:none. Manche Roboter
   ueberspringen ausgeblendete Felder, ein weggeschobenes fuellen sie aus. */
.wt-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Rueckmeldung zum Mailversand ueber der Auswertung */
.wt-versand{margin-top:14px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  line-height:1.5;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-soft)}
.wt-versand:empty{display:none}
.wt-versand[data-stand="ok"]{border-color:#C9E7D2;background:#F1F9F4;color:#245B39}
.wt-versand[data-stand="fehler"]{border-color:#F0CFCF;background:#FDF4F4;color:#7A2B2B}
.wt-datenschutz{margin-top:18px;padding:14px 16px;background:var(--paper-2);border:1px solid var(--line);
  border-radius:11px;font-size:13.5px;color:var(--ink-soft);line-height:1.6}
.wt-datenschutz a{color:var(--violet)}

/* ---------- Feld-Balken in der Auswertung ---------- */
.wt-balken{padding:16px 0;border-bottom:1px solid var(--line)}
/* Zwei Spalten: die letzte Zeile sind die beiden letzten Karten, beide
   ohne Trennlinie. Faellt das Raster auf eine Spalte, greift die Regel
   darunter und nur die allerletzte verliert die Linie. */
.wt-balken:nth-last-child(-n+2){border-bottom:0}
@media(max-width:900px){
  .wt-balken:nth-last-child(2){border-bottom:1px solid var(--line)}
}
.wt-balken-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px}
.wt-balken-name{font-family:var(--serif);font-size:16.5px;color:var(--ink);font-weight:600}
.wt-balken.schwach .wt-balken-name{color:var(--violet)}
.wt-balken-schiene{display:block;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.wt-balken-fuellung{display:block;height:100%;width:0;border-radius:99px;background:var(--violet);
  transition:width .8s cubic-bezier(.4,0,.2,1)}
.wt-balken.schwach .wt-balken-fuellung{background:var(--flame)}
.wt-lesart{font-size:14px;color:var(--ink-soft);margin-top:9px;line-height:1.55}

/* ---------- Auswertung verdichtet ----------
 Ziel ist ein Ergebnis, das man mit moeglichst wenig Scrollen ueberblickt:
 engere Abstaende, Muster nebeneinander, der Abschluss direkt darunter. */
#s-detail h2{font-size:clamp(19px,2.2vw,23px);margin-top:26px!important;margin-bottom:6px}
#s-detail h2:first-of-type{margin-top:0!important}
#s-detail .wt-leise{margin-bottom:10px}
.wt-balken{padding:11px 0}
.wt-lesart{margin-top:7px;font-size:13.5px}
.wt-balken-name{font-size:15.5px}
#musterContainer{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px!important}
.wt-muster{border-left:2px solid var(--violet);padding:4px 0 4px 14px;margin-bottom:0;
  font-size:14.5px;color:var(--ink);line-height:1.55}
.wt-hebel-block{padding:16px 18px}
.wt-hebel-block h3{font-size:17px}
.wt-abschluss{margin-top:26px;padding:26px 30px}
.wt-abschluss h2{margin-top:0!important;font-size:clamp(21px,2.6vw,26px)}
@media(max-width:900px){
  #musterContainer{grid-template-columns:1fr}
}
.wt-hebel-block{border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  background:var(--paper-2)}
.wt-hebel-block p{margin-bottom:0;font-size:14.5px;line-height:1.6}

/* Einordnung des Ergebnisses, steht direkt ueber der
 Abschluss-Karte. Bewusst als ruhiger Hinweis mit Linie links, nicht als
 Kasten: Sie relativiert, sie ruft nicht auf. Der Aussenabstand nach unten
 ist 0, den Abstand zur Karte setzt deren margin-top. */
/* Der Wahl-Ausdruck ist ABSICHTLICH ".wt-karte p.wt-selbstbild" und nicht nur
 ".wt-selbstbild" (Familie): Weiter oben steht
 ".wt-karte p{margin:0 0 14px}". Dieser Ausdruck zaehlt eine Klasse und einen
 Elementnamen und ist damit staerker als eine einzelne Klasse. Die einfache
 Fassung war deshalb wirkungslos, der Abstand nach oben lag gemessen bei
 0 statt 38 Pixeln, der Kasten klebte an den Hebel-Karten darueber.
 Oben und unten stehen jetzt dieselben 20 Pixel, der Kasten sitzt also
 gleichmaessig zwischen den Hebeln und der Abschluss-Karte. */
.wt-karte p.wt-selbstbild{margin:20px 0 0;padding:16px 20px;border-left:3px solid var(--violet);
  background:var(--paper-2);border-radius:0 12px 12px 0;
  font-size:15px;line-height:1.62;color:var(--ink)}
.wt-selbstbild b{font-weight:600}
.wt-selbstbild + .wt-abschluss{margin-top:20px}

.wt-abschluss{margin-top:38px;background:var(--nacht);border-radius:16px;padding:34px 32px;color:#fff}
.wt-abschluss h2{color:#fff}
.wt-abschluss p{color:#D9CFE0}
.wt-abschluss a.hell{color:#fff;text-decoration:underline}

/* Unter 900 px reicht die Breite nicht mehr fuer drei Antworten oder drei
   Bloecke nebeneinander, alles faellt zurueck in eine Spalte. */
@media(max-width:900px){
  .wt-optionen{grid-template-columns:1fr;gap:9px}
  .wt-option{flex-direction:row;align-items:flex-start;gap:13px;font-size:15px;min-height:0}
  #stagesContainer,#hebelContainer,#barsContainer{grid-template-columns:1fr}
  .wt-kopf-fest{position:static;margin-top:0;padding-top:0}
}
@media(max-width:640px){
  /* Die Karte klebte auf dem Telefon oben an der Kopfleiste und
 unten am Fuss, gemessen 0 Pixel an beiden Kanten. Ursache war diese Regel
 selbst: Die Kurzschreibweise "padding:0 16px" setzt oben und unten auf 0
 und hebt damit die 96 und 64 Pixel aus ".wt-raum--seite" auf, weil sie
 spaeter steht und gleich stark ist (Familie).
 Jetzt rundum derselbe Wert wie seitlich, die Karte steht also gleich weit
 von allen vier Kanten. */
  .wt-raum{padding:16px}
  .wt-karte{padding:26px 20px 24px;border-radius:16px}
  .wt-punkte{font-size:52px}
  .wt-steuerung{flex-direction:column-reverse;align-items:stretch}
  .wt-steuerung .btn{width:100%;justify-content:center}
  .wt-abschluss{padding:26px 20px}
}
@media(prefers-reduced-motion:reduce){
  .wt-balken-fuellung,.wt-segmente i,.wt-stufenwort{transition:none}
}