/* Fairfinanz — Ratgeber-Tor (E-Mail-Formular + /ratgeber).

   Eigene Datei statt einer Kopie von .feld/.formular-meldung aus site.css: Das Tor
   steht an drei Stellen, die nicht dieselben Stylesheets laden. index.html und
   ratgeber.html laden css/site.css (dort gäbe es .feld schon), quiz.html aber nicht —
   nur tokens.css, quiz.css, bewertungen.css. Eigene, in sich geschlossene Klassen
   (rt-*) statt zwei Pflegestellen für dieselbe Regel. Baut auf css/tokens.css auf
   (Farben, --radius, .btn) — die ist überall geladen.

   Das Formular ist bewusst IMMER eine helle Papier-Karte, unabhängig vom Untergrund:
   Auf der Startseite sitzt das Tor in einem Indigo-Block (.band-navy), und Fehlertext
   ist im ganzen Haus Rot (--fehler) — Rot auf Indigo unterschreitet die Kontrastschwelle
   deutlich. Eine helle Karte macht jede Umgebungsfarbe irrelevant: drinnen gelten
   überall dieselben Töne wie in jedem anderen Formular der Seite. */

/* ---------- Das Tor: Knopf + Formular ---------- */

.rt-tor { margin-top: 28px; }

/* Der Umklapp-Knopf verschwindet beim Aufklappen (js/ratgeber.js). .btn setzt
   display:inline-flex, und das schlägt das [hidden] des Browsers. */
.rt-knopf[hidden] { display: none; }

.rt-formular {
  margin-top: 24px;
  max-width: 440px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 28px 26px;
}

.rt-feld { margin-bottom: 20px; }
.rt-feld > label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--tinte);
}
.rt-feld input:not([type="checkbox"]) {
  width: 100%;
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--sekundaer);
  border-radius: var(--radius);
  padding: 13px 14px;
  min-height: 52px;
}
.rt-feld input[aria-invalid="true"] { border-color: var(--fehler); border-width: 2px; }
/* Mit .rt-formular davor, nicht nur .rt-hinweis/.rt-fehler allein: Auf der Startseite
   steckt das Formular in einem .band-navy-Block, und dessen `.band-navy p { color:
   var(--auf-tinte-leise) }` (site.css) ist EIN Selektor-Baustein spezifischer als eine
   einzelne Klasse — ohne die zweite Klasse hier gewinnt die helle Indigo-Textfarbe auch
   auf der weißen Karte, und Hinweis wie Fehlertext werden auf Weiß fast unleserlich. */
.rt-formular .rt-hinweis { margin-top: 6px; color: var(--sekundaer); }
.rt-formular .rt-hinweis a { color: var(--tinte); }
.rt-formular .rt-fehler {
  margin-top: 8px;
  font-size: var(--t-klein);
  font-weight: 600;
  color: var(--fehler);
}

.rt-feld-einwilligung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin-bottom: 24px;
}
.rt-feld-einwilligung input {
  width: 26px;
  height: 26px;
  margin: 2px 0 0;
  accent-color: var(--tinte);
  flex: 0 0 auto;
}
.rt-feld-einwilligung label {
  font-size: var(--t-klein);
  line-height: 1.55;
  color: var(--sekundaer);
}

.rt-senden { width: 100%; }

.rt-meldung {
  margin-top: 18px;
  font-weight: 600;
  line-height: 1.55;
}
.rt-meldung:empty { margin-top: 0; }
.rt-meldung.ist-erfolg {
  padding: 18px 20px;
  background: var(--flaeche2);
  border-left: 3px solid var(--tinte);
  color: var(--tinte);
}
.rt-meldung.ist-fehler {
  padding: 18px 20px;
  background: var(--flaeche2);
  border-left: 3px solid var(--fehler);
  color: var(--tinte);
}
.rt-meldung a { color: var(--tinte); }

/* .rt-tor steckt im Quiz-Ergebnis zwischen zwei Knöpfen, die per
   `.q-aktionen .btn { flex: 1 1 240px }` nebeneinander stehen (css/quiz.css). Das Tor
   selbst ist kein Knopf mehr, sobald es offen ist — es braucht die ganze Zeile. */
.q-aktionen .rt-tor { flex: 1 1 100%; margin-top: 0; }

/* ---------- /quiz: Kasten über der ersten Frage ----------
   Dieselbe Idee wie der Block auf der Startseite (Gelb lebt auf Indigo), nur als Karte in
   der Quiz-Spalte. Zwei Klassen plus .quiz-haupt, damit die Hinweiszeilen-Regel
   `.quiz-haupt .quiz-ratgeber` aus css/quiz.css (Farbe, Breite) hier nicht greift. */
.quiz-haupt .quiz-ratgeber.rt-box {
  margin: 20px 0 0;
  max-width: none;
  padding: 24px 26px;
  background: var(--tinte);
  border-radius: var(--radius);
  color: var(--auf-tinte);
}
.rt-box .rt-box-titel {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  color: var(--auf-tinte);
}
.rt-box .rt-box-text { margin-top: 8px; color: var(--auf-tinte-leise); }
.rt-box .rt-tor { margin-top: 18px; }

/* ---------- /ratgeber: die drei Kartenzustände ---------- */

/* padding-block, nicht padding: .rt-seite sitzt auf demselben Element wie .bahn, und
   deren seitliche Polsterung (--gutter) zentriert den Inhalt — ein padding-Kürzel
   setzte sie auf 0, die Karte klebte am linken Fensterrand (Screenshot 14.09.2026). */
.rt-seite { padding-block: 56px 96px; }
.rt-karte {
  margin-top: 36px;
  padding: 32px;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  max-width: 560px;
}
/* Die Karte ist höchstens 560 px breit — in voller h1-Größe brach „E-Mail-Adresse" am
   Bindestrich um. */
.rt-karte h1 { font-size: var(--t-h2); }
.rt-karte p { margin-top: 14px; }
.rt-karte .btn { margin-top: 8px; }
.rt-karte .rt-tor { margin-top: 20px; }
.rt-haken { font-size: 40px; line-height: 1; color: var(--tinte); margin: 0 0 8px; }

@media (max-width: 699px) {
  .rt-karte { padding: 22px 18px; }
}