/* Stildatei der Startseite von beyond price wars.
   Farben nur ueber Absichts-Namen — kein Hex an der Verwendungsstelle.
   Palette "Tiefwasser" aus marketing/brand/ci-grundlage.md, Abschnitt 3.3 und 4.
   Schriften: nur Georgia, Arial, Helvetica und die allgemeinen Ersatzschriften
   (Abnahmekriterium A11). Kein @font-face, kein @import, keine fremde Adresse. */

:root {
  color-scheme: light;

  /* Palette "Tiefwasser" */
  --tiefsee:      #08202B;
  --tiefwasser:   #14404F;
  --stroemung:    #3A7C8C;
  --leinen:       #F2ECE2;
  --papier:       #FCFAF6;
  --kupfer:       #A85C33;
  --preiskampf:   #A32A20;

  /* Absichts-Namen — nur diese werden unten benutzt */
  --grund:      var(--papier);
  --flaeche:    var(--leinen);
  --text:       var(--tiefsee);
  --text-leise: #4A5C66;
  --aktion:     var(--kupfer);
  --linie:      #DFD6C8;
  --gegner:     var(--preiskampf);

  /* Ruhiger Text auf DUNKLEM Grund (Fund 8 des Abnahme-Laufs T12).
     --text-leise ist fuer hellen Grund gemacht (dort 5,9 zu 1) und stand im
     dunklen Block bei 1,6 zu 1 — praktisch unlesbar, ausgerechnet unter dem
     einzigen namentlichen Zitat der Seite. Dieser Sandton haelt 5,8 zu 1 auf
     Tiefwasser und bleibt trotzdem spuerbar leiser als der Fliesstext: Eine
     Quellenangabe soll zuruecktreten, nicht mit dem Zitat konkurrieren. */
  --text-leise-hell: #C4B9A8;

  /* Kupfer fuer TEXTVERWEISE, eine Nuance tiefer (Fund 8).
     Das Marken-Kupfer liegt auf Leinen bei 4,21 zu 1 und damit knapp unter dem
     Soll von 4,5 (S6). Diese Nuance haelt 5,05 auf Leinen und 5,7 auf Papier.
     Knoepfe und Wortmarke behalten das Marken-Kupfer: Dort steht heller Text
     AUF der Farbe, und dieses Paar ist mit 5,0 in Ordnung. */
  --aktion-text: #96522D;

  /* Das Grau der gleichen Boote und Puzzleteile in den Grafiken im Einstieg:
     das Austauschbare soll zuruecktreten. Grafisches Zeichen, kein Text — Soll
     3 zu 1 (tests/test_kontrast.py, GRAFIK_PAARE). */
  --austauschbar: #8C8577;

  --serif: Georgia, serif;
  --sans:  Arial, Helvetica, sans-serif;

  --spalte: 39rem;   /* Fliesstext bleibt bei rund 65 Zeichen */
  --breit:  62rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: normal;
  line-height: 1.18;
  margin: 0 0 1rem;
}

h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.8rem; }

p { margin: 0 0 1.15rem; }

strong { color: var(--text); }

a {
  color: var(--aktion-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---------- Geruest ---------- */

.bahn { padding: 3rem 1.5rem; }
.bahn > * { margin-inline: auto; }
.spalte { max-width: var(--spalte); }
.breit  { max-width: var(--breit); }

/* Kopf und Fuss werden wie eine Bahn behandelt, damit Wortmarke, Fliesstext und
   Fusszeile auf derselben linken Kante stehen. Zwei verschiedene Kanten sehen
   nach Versehen aus. */
.kopf {
  padding: 1.5rem;
  border-bottom: 1px solid var(--linie);
}

.kopf > * { margin-inline: auto; }

.kopf .wortmarke {
  display: block;
  width: auto;
  height: 2rem;
  max-width: 100%;
}

/* ---------- Aufmacher ---------- */

#aufmacher { padding-top: 3.5rem; padding-bottom: 1.5rem; }

/* Die Unterzeile ist der erste Absatz nach der Hauptueberschrift. */
#aufmacher h1 + p {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text-leise);
  margin-bottom: 0;
}

#einstieg { padding-top: 2rem; }

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

.fuss {
  margin-top: 2rem;
  padding: 2rem 1.5rem;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  font-size: 0.92rem;
  color: var(--text-leise);
}

.fuss > * { margin-inline: auto; }
/* margin-block, nicht margin: sonst setzt diese Regel die automatischen
   Seitenraender der Zeile darueber wieder zurueck und die Fusszeile rutscht an
   den linken Rand. */
.fuss p { margin-block: 0; }

/* ---------- Telefon ---------- */

@media (max-width: 32rem) {
  h1 { font-size: 2rem; }
  #aufmacher h1 + p { font-size: 1.15rem; }
  .bahn { padding: 2.25rem 1.15rem; }
}

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

/* ==========================================================================
   Aufgabe T3 — Formular, Knoepfe, Schaubild, Fragen, Portraet, Nebenseiten.
   Weiterhin gilt: kein Hex an der Verwendungsstelle, keine fremde Adresse,
   nur Georgia, Arial, Helvetica und die allgemeinen Ersatzschriften (A11).
   ========================================================================== */

/* --- Baender ------------------------------------------------------------- */

.bahn-flaeche { background: var(--flaeche); }

.bahn-tief {
  background: var(--tiefwasser);
  color: var(--papier);
}
.bahn-tief h2,
.bahn-tief strong { color: var(--papier); }
.bahn-tief a { color: var(--leinen); }

.bahn-aufmacher { padding-bottom: 2.5rem; }

/* --- Persoenliche Begruessung (A16, S4) -----------------------------------
   Eine leise Zeile ueber der Hauptueberschrift. Sie muss klein bleiben: jeder
   Bildpunkt hier schiebt den Anmelde-Knopf auf dem Telefon nach unten, und der
   muss oberhalb der Falz stehen (Kriterium A86). Gemessen, nicht geschaetzt. */

.gruss-block { margin-bottom: 0.6rem; }

.gruss {
  font-size: 0.95rem;
  color: var(--text-leise);
  margin: 0;
}
.gruss + .gruss { margin-top: 0.1rem; }
.gruss-bezug { font-style: italic; }

/* --- Knoepfe -------------------------------------------------------------
   Genau eine Handlung auf der Seite (A29): der Anmelde-Knopf in Kupfer (A86).
   Den Umriss-Knopf trug bis T18 der Termin-Knopf; seither gibt es ihn auf
   keiner Seite mehr (Variante B). Die Klasse bleibt als Gestaltung
   stehen, das Pruefskript verlangt aber, dass kein Knopf sie traegt. */

.knopf {
  display: inline-block;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.2;
  padding: 0.85rem 1.6rem;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}

.knopf-aktion {
  background: var(--aktion);
  color: var(--papier);
  border: 1px solid var(--aktion);
  font-weight: 700;
}
.knopf-aktion:hover,
.knopf-aktion:focus-visible { background: var(--tiefwasser); border-color: var(--tiefwasser); }

.knopf-umriss {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--stroemung);
  font-weight: 400;
}
.knopf-umriss:hover,
.knopf-umriss:focus-visible { border-color: var(--text); }

.knopf-zeile { margin-top: 2rem; }

/* --- Anmeldeformular (A28, A30) ------------------------------------------ */

.anmeldung {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 3px;
}

.feld { margin-bottom: 1rem; }

/* Fehlertext neben dem Feld (Kriterium A32). Ohne Kennung im Link und ohne
   Absenden ist er leer und verborgen — er darf den Quelltext nicht veraendern.
   Farbe: der Rotton der Palette, derselbe wie fuer den Preiskampf. */
.feldfehler {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gegner);
}

.feld label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.feld input {
  width: 100%;
  font-family: var(--sans);
  font-size: 1.0625rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--linie);
  border-radius: 2px;
  background: var(--papier);
  color: var(--text);
}
.feld input:focus-visible {
  outline: 2px solid var(--aktion);
  outline-offset: 1px;
}

/* Der Hinweis steht zwischen dem letzten Feld und dem Absende-Knopf (A30) —
   nicht in einer Fussnote. */
.hinweis {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-leise);
  margin: 0 0 1.2rem;
}
.hinweis p { margin: 0 0 0.5rem; }
.hinweis p:last-child { margin-bottom: 0; }

/* --- Ablauf-Schaubild (A73) ----------------------------------------------
   Eingebettete Zeichnung mit durchsuchbarem Text. Farben stehen hier, nicht
   in der SVG-Datei — damit die Palette an einer Stelle gepflegt wird. */

.schaubild-rahmen { margin: 2rem 0 0; }

.schaubild {
  width: 100%;
  height: auto;
  max-width: 25rem;
  display: block;
}

.schaubild-strom {
  stroke: var(--stroemung);
  stroke-width: 2;
  stroke-linecap: round;
}

.schaubild-punkt {
  fill: none;
  stroke: var(--stroemung);
  stroke-width: 2;
}

.schaubild-ziffer {
  fill: var(--stroemung);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}

.schaubild-titelzeile {
  fill: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
}

.schaubild-zeile {
  fill: var(--text-leise);
  font-family: var(--sans);
  font-size: 14px;
}

/* --- Grafiken im Einstieg ------------------------------------------------
   "Alle versprechen dasselbe" (Boote) und "Das fehlende Stueck" (Puzzle). Schmal gezeichnet
   (360 Einheiten breit) und wie das Schaubild hoechstens 25rem breit. Jede
   Schrift ist mindestens 14 Einheiten gross: auf 360 Bildpunkten Breite bleiben
   davon gut 12 Bildpunkte (tests/test_grafiken.py, Kriterium 6). */

.grafik { margin: 2rem 0 2.25rem; }

.grafik-zeichnung {
  width: 100%;
  height: auto;
  max-width: 25rem;
  display: block;
}

.grafik figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-leise);
}

.grafik-klein { fill: var(--text-leise); font-family: var(--sans); font-size: 14px; }

/* Boote: die Bucht und die Wellen sind Schmuck, die Boote und die Kurslinie
   tragen die Aussage. Die grauen Boote stehen IN der Bucht: deren Deckung
   bleibt so gering, dass sie dort 3 zu 1 halten (bei 0.1 waren es 2,98;
   tests/test_kontrast.py rechnet die gemischte Farbe nach). */
.grafik-bucht { fill: var(--gegner); fill-opacity: 0.06; }
.grafik-welle { fill: none; stroke: var(--stroemung); stroke-opacity: 0.45; stroke-width: 2; }
.grafik-boot { fill: var(--austauschbar); }
.grafik-boot-frei { fill: var(--aktion); }
.grafik-kurs { fill: none; stroke: var(--aktion); stroke-width: 2; stroke-dasharray: 5 6; }

/* Puzzle: graue Teile, eine gestrichelt umrandete Luecke, das Kupfer-Teil. */
/* Der helle Rand in Papierfarbe trennt jede Nase vom Nachbarteil gleicher Farbe. */
.grafik-teil { fill: var(--austauschbar); stroke: var(--grund); stroke-width: 2.5; }
.grafik-teil-frei { fill: var(--aktion); stroke: var(--grund); stroke-width: 2.5; }
.grafik-luecke {
  fill: var(--grund);
  stroke: var(--aktion);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}

/* --- Portraet-Platz (A74, A75) ------------------------------------------- */

.person-satz {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: flex-start;
}

.person-text { flex: 1 1 18rem; }

/* 16rem, weil das Portraet im Querformat 3:2 liegt — bei 11rem (Stand bis
   2026-09-21, damals Hochformat) waere es neben dem Text eine Briefmarke. */
.portraet {
  flex: 0 0 16rem;
  margin: 0;
}

.portraet img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
}

/* Kein leerer Kasten, sondern Text mit Inhalt (A74). */
.portraet-ersatz {
  border-left: 2px solid var(--stroemung);
  padding: 0.25rem 0 0.25rem 1rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* --- Haeufige Fragen -----------------------------------------------------
   details und summary funktionieren ohne JavaScript; der Text steht im
   Quelltext (Pruefstein 1). */

.frage {
  border-top: 1px solid var(--linie);
  padding: 0.9rem 0;
}
.frage:last-of-type { border-bottom: 1px solid var(--linie); }

.frage summary {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  padding-right: 1.8rem;
  position: relative;
}
.frage summary::-webkit-details-marker { display: none; }

.frage summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--stroemung);
  font-family: var(--sans);
  font-weight: 400;
}
.frage[open] summary::after { content: "\2212"; }

.frage-antwort { padding-top: 0.6rem; }
.frage-antwort p:last-child { margin-bottom: 0; }

/* --- Belege --------------------------------------------------------------- */

/* Die Quellenangabe ist der letzte Absatz des Zitats. Frueher trug sie eine
   eigene Klasse und dafuer ein <span> mitten im Text der Textdatei — genau die
   spitzen Klammern, die Oliver auf seinem Textblatt nicht schreiben will
   (Entscheidung 4 der Textblatt-Spezifikation, 2026-09-18). */
blockquote p:last-child {
  font-size: 0.88rem;
  color: var(--text-leise);
}

/* Dieselbe Quellenangabe im dunklen Block braucht die helle Fassung. Die
   Startseite hat eine zweite Quellenangabe im hellen Belege-Abschnitt — die
   bleibt, wie sie ist (Fund 8). */
.bahn-tief blockquote p:last-child { color: var(--text-leise-hell); }

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

.fuss-marke { font-size: 0.95rem; }

.fuss-verweise {
  margin-top: 0.4rem;
  font-size: 0.95rem;
}
.fuss-verweise a { margin-right: 1.2rem; }

.wortmarke-verweis { display: inline-block; }

/* --- Nebenseiten ---------------------------------------------------------- */

#danke .knopf-zeile { margin-top: 1.75rem; }

/* Der Fall "Tagesgrenze" (Aufgabe T16 Paket 3): sichtbar nur als Ziel der
   Sprungmarke /danke-ohne-mail#tagesgrenze. Ueber der Tagesgrenze wird nichts
   gespeichert — dann darf die Seite nicht "deine Anmeldung ist da" sagen.

   Ohne Stilblatt sind BEIDE Texte sichtbar. Das ist gewollt: Der ehrliche
   steht dann mit dabei, statt dass der falsche allein stehen bleibt
   (Bau-Regel R29 — der Ausfall trifft das Billige).

   Die dritte Regel blendet alles nach dem Block aus, ausser einer
   Knopf-Zeile. Bis T18 stand dort der Termin-Knopf; seither hat die Seite
   keinen mehr (Variante B), die Ausnahme greift also ins Leere und
   schadet nicht. */
.fall-tagesgrenze { display: none; }
.fall-tagesgrenze:target { display: block; }
.fall-tagesgrenze:target ~ :not(.knopf-zeile) { display: none; }

/* Das Pruefskript verlangt genau eine Hauptueberschrift je Seite (Regel A4).
   Der Tagesgrenze-Block traegt deshalb eine h2, die aussieht wie die h1. */
.wie-h1 { font-size: 2.6rem; letter-spacing: -0.01em; }

#impressum p,
#datenschutz p { max-width: var(--spalte); }

/* --- Schmale Bildschirme --------------------------------------------------- */

/* Auf dem Telefon (360 Bildpunkte) muss der Anmelde-Knopf oberhalb der Falz
   stehen — Kriterium A86. Gemessen am 2026-09-09: mit den Vorgabe-Abstaenden lag
   er 148 Bildpunkte zu tief. Die Werte hier sind deshalb keine Geschmacksfrage,
   sondern eine Abnahmebedingung; wer sie lockert, misst bitte nach. */
@media (max-width: 32rem) {
  .kopf { padding-block: 0.6rem; }
  .kopf .wortmarke { max-width: 11rem; }
  /* Angesprochen wird hier "#aufmacher" und nicht ".bahn-aufmacher".
     **Warum das wichtig ist:** Weiter oben steht "#aufmacher { padding-top:
     3.5rem }". Eine Kennung (#) sticht eine Klasse (.) immer — egal, welche
     Zeile spaeter kommt und egal, ob die Regel in einer Bildschirmabfrage
     steht. Die Zeile hier hiess bis zum 2026-09-09 ".bahn-aufmacher" und war
     damit **wirkungslos**: Auf dem Telefon blieben 56 Bildpunkte Abstand
     stehen, wo 16 gemeint waren. Gemessen bei 360 Bildpunkten Breite; der
     Anmelde-Knopf lag dadurch bei 720 Bildpunkten Hoehe unterhalb der Falz,
     obwohl die Werte hier genau das verhindern sollten. */
  #aufmacher { padding-top: 1rem; padding-bottom: 1.5rem; }
  .gruss-block { margin-bottom: 0.15rem; }
  .gruss { font-size: 0.85rem; line-height: 1.35; }
  #aufmacher h1 { font-size: 1.75rem; margin-bottom: 0.55rem; }
  #aufmacher h1 + p { font-size: 1.08rem; margin-bottom: 0.6rem; }
  #aufmacher p { margin-bottom: 0.7rem; }

  .anmeldung { padding: 0.9rem; margin-top: 1.1rem; }
  .feld { margin-bottom: 0.7rem; }
  .feld label { font-size: 0.9rem; margin-bottom: 0.2rem; }
  .feld input { padding: 0.55rem 0.7rem; }

  .hinweis { font-size: 0.82rem; line-height: 1.4; margin-bottom: 0.6rem; }
  .knopf { display: block; text-align: center; padding: 0.75rem 1.2rem; }

  .portraet { flex: 1 1 100%; }
}