/* Quiz eingebettet auf der Landingpage (Variante C, /v3/).

   Das Quiz-Markup ist dasselbe wie auf /quiz/, es steht hier nur an der
   Stelle, an der die anderen Varianten das Video zeigen. quiz.css bringt
   alles mit, was innerhalb der Schritte liegt. Diese Datei macht nur den
   Kasten drumherum und nimmt die paar Regeln zurueck, die auf eine eigene
   Seite gemuenzt sind. Sie wird nach quiz.css geladen.

   Was hier bewusst NICHT passiert: die Klasse .quiz-seite landet nicht am
   Body. Sie zieht den Quiz-Hintergrund als fixierte Flaeche ueber das ganze
   Fenster und wuerde damit den Hintergrund der Landingpage ueberdecken. */

/* Rueckfallebene fuer den Ueberschriften-Test.

   Im Markup stehen alle Arme untereinander, sichtbar gemacht wird einer von
   assets/split.js. Laedt das Skript nicht (404, Blocker, Netzfehler), gaebe
   es ohne diese Regel vier Ueberschriften untereinander auf einer Seite, auf
   die bezahlter Verkehr laeuft.

   Die Regel greift nur, solange am <html> kein data-split steht, also genau
   dann, wenn das Skript nichts zugeteilt hat. Sobald es laeuft, gilt allein
   seine eigene Regel, sonst wuerde diese hier den gewaehlten Arm mit
   verstecken. */
html:not([data-split]) [data-nur]:not([data-standard]) { display: none; }

/* Lange Ueberschriften kleiner setzen.

   Die Arme eines Ueberschriften-Tests sind verschieden lang. Eine Schrift,
   die fuer den kuerzesten Arm gesetzt ist, schiebt beim laengsten den Knopf
   aus dem ersten Bild, und auf dem Handy entscheidet genau das.

   `data-laenge` vergibt build.py aus der Zeichenzahl, nicht der Browser:
   eine Schrift, die erst nach dem Zeichnen kleiner wird, springt sichtbar.
   Ueber 110 Zeichen "lang", ueber 150 "sehr-lang". Die Grenzen stammen aus
   der Messung auf 375 px Breite, dort bleibt der Knopf so im ersten Bild. */
.hero__titel[data-laenge="lang"] { font-size: clamp(25px, 3.5vw, 50px); }
.hero__titel[data-laenge="sehr-lang"] { font-size: clamp(22px, 2.9vw, 42px); }

.quiz-einbau {
  /* Dieselbe Breite und derselbe Abstand wie .video in styles.css. Steht
     eine Variante neben der anderen, soll sich nur der Inhalt des Kastens
     unterscheiden, nicht seine Position. */
  width: min(100% - 2 * var(--rand), 886px);
  margin: clamp(36px, 4.4vw, 59px) auto 0;
  border-radius: 14px;
  border: 1px solid var(--karten-linie);
  background: var(--schwarz-3);
  overflow: hidden;

  /* Keine aspect-ratio wie beim Video: die Schritte sind unterschiedlich
     hoch, das Gate deutlich hoeher als eine Frage. Eine feste Hoehe wuerde
     das Formular abschneiden. Die Mindesthoehe haelt den Kasten beim Wechsel
     von Frage zu Frage ruhig, sonst springt der Rest der Seite bei jeder
     Antwort mit. */
  min-height: min(56vw, 500px);
  display: flex;
}

/* .quiz zentriert sich auf der eigenen Seite ueber die volle Fensterhoehe.
   Im Kasten gilt die Hoehe des Kastens. */
.quiz--einbau {
  flex: 1 1 auto;
  max-width: none;
  padding: clamp(22px, 3.4vw, 38px) clamp(18px, 3vw, 40px);
}

/* Auf der eigenen Seite traegt der Seitenkopf die Marke und die Frage darf
   gross auftreten. Hier steht die Headline der Landingpage darueber, eine
   zweite Zeile in Headline-Groesse im Kasten waere eine Konkurrenz dazu. */
.quiz--einbau .frage {
  font-size: clamp(20px, 2.1vw, 28px);
}

@media (max-width: 700px) {
  .quiz-einbau {
    /* Auf dem Telefon ist die Breite ohnehin ausgereizt, die Mindesthoehe
       wuerde hier nur Luft unter die Antworten schieben. */
    min-height: 0;
  }
}