/* Designsprache der Landingpage.

   Die Werte sind nicht neu erfunden, sondern aus frontend/src/theme-wache.css
   uebernommen. Grund: Wer von der Landingpage in die Anwendung wechselt, soll
   nicht das Gefuehl haben, das Produkt gewechselt zu haben. Bis zum
   30. August 2026 waren es zwei verschiedene Marken - kuehles Blaugrau mit
   Orange hier, Creme mit Feuerrot dort.

   Wer drueben eine Farbe aendert, aendert sie hier mit.

   Die Schrift liegt in fonts/ und wird nicht nachgeladen. Im Frontend standen
   bis zum 27. August 2026 Verweise auf fonts.googleapis.com; die bekamen die
   IP-Adresse jedes Besuchers. Das ist dort entfernt worden und darf hier nicht
   wieder hereinkommen. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --wache-rot: #c8102e;
  --wache-rot-dunkel: #8e0b20;
  --wache-rot-hell: #fcebeb;

  --wache-schwarz: #14171c;
  --wache-anthrazit: #1f232b;
  /* 5,00 : 1 auf Creme. Der Vorgaenger #6B7280 lag bei 4,45 und damit knapp
     unter der Grenze - derselbe Fund wie im Produkt. */
  --wache-grau: #636a78;
  --wache-linie: rgba(20, 23, 28, 0.1);

  --wache-cream: #f8f5f0;
  --wache-cream-dunkel: #efeae0;
  --wache-weiss: #ffffff;

  --wache-helmgold: #c9a35c;
  --wache-helmgold-dunkel: #8a6f36;

  --wache-radius-sm: 6px;
  --wache-radius: 10px;
  --wache-radius-lg: 14px;

  --wache-nav-height: 64px;
  --wache-max: 1180px;

  --wache-shadow-card: 0 1px 0 rgba(20, 23, 28, 0.04), 0 8px 24px -16px rgba(20, 23, 28, 0.16);
  --wache-shadow-bild: 0 2px 4px rgba(20, 23, 28, 0.06), 0 24px 60px -32px rgba(20, 23, 28, 0.4);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--wache-schwarz);
  background: var(--wache-cream);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--wache-rot-dunkel);
}

button,
input,
textarea {
  font: inherit;
}

/* Ein sichtbarer Fokus fuer alles, was Fokus bekommen kann. Vorher hatte die
   Seite gar keinen eigenen - und bei den Eingabefeldern stand outline:none. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--wache-rot);
  outline-offset: 2px;
  border-radius: var(--wache-radius-sm);
}

.wache-nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--wache-rot);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--wache-radius) 0;
  font-weight: 600;
}

.sprungmarke:focus {
  left: 0;
}

/* ---------- Kopfzeile ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--wache-nav-height);
  background: var(--wache-schwarz);
  color: var(--wache-weiss);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 1.5rem;
  flex-wrap: wrap;
}

.topnav-inner {
  width: 100%;
  max-width: var(--wache-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  /* Groesser als in der Anwendung: Dort ist die Wortmarke ein Ankerpunkt
     neben acht Navigationseintraegen und soll sich unterordnen. Hier ist
     sie das Erste, was jemand sieht, der die Marke noch nicht kennt. */
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

/* Der Schriftzug traegt die Markenfarbe, das Zeichen daneben ebenfalls -
   aber auf verschiedenem Grund. Auf der fast schwarzen Leiste kommt
   #C8102E nur auf 3,05 : 1, und das ist Text. Deshalb hier der aufgehellte
   Ton mit 4,7 : 1; auf der cremefarbenen Kachel des Zeichens gilt weiter
   der volle Wert. Zwei Untergruende, zwei Toene. */
.wortmarke span,
.fusszeile-marke span {
  color: #d8576c;
}

.marke {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
}

/* Das Kopfzeilen-Zeichen ist jetzt Schild und Schriftzug in einem
   (viewBox 480 x 120), nicht mehr das quadratische Icon von vorher - die
   Breite ergibt sich deshalb aus der Hoehe statt fest zu stehen. Die
   Fusszeile behaelt ihr eigenes, quadratisches Zeichen unveraendert. */
.wortmarke .marke {
  width: auto;
  height: 34px;
}

.fusszeile-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.fusszeile-marke .marke {
  width: 22px;
  height: 22px;
}

.topnav nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Symbol und Aufschrift in einer Zeile. Jeder Menuepunkt traegt dasselbe
   Symbol wie der Abschnitt, auf den er zeigt — damit ist die Leiste
   nebenbei die Legende der Seite.

   `inline-flex` und nicht `flex`: Die Punkte stehen selbst in einer
   Flexzeile; `flex` machte aus jedem einen Block und riss die Leiste
   auseinander. */
.topnav nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: var(--wache-radius-sm);
}

/* Etwas kleiner als die Schrift: In der dunklen Leiste wirkt eine Form
   schwerer als ein Buchstabe derselben Hoehe. */
.topnav nav a .symbol {
  width: 0.95em;
  height: 0.95em;
  opacity: 0.85;
}

.topnav nav a:hover .symbol {
  opacity: 1;
}

.topnav nav a:hover {
  color: var(--wache-weiss);
  background: rgba(255, 255, 255, 0.08);
}

.topnav .knopf {
  margin-left: 0.4rem;
}

/* „Anmelden“ steht abgesetzt und als Letztes.

   Die vier Punkte davor führen **innerhalb** der Seite, „Pilotwehr
   werden“ ruft zum Eintragen. „Anmelden“ tut etwas anderes: Es
   verlässt die Werbeseite und führt in die Anwendung.

   Erst stand hier eine Trennlinie links davon. Gemessen bei neun
   Breiten: Bei fünf davon (360, 400, 560, 640, 720) steht „Anmelden“
   in derselben Zeile wie der Knopf, bei vier beginnt es eine neue —
   und dort hängt eine linke Kante als Strich am Zeilenanfang. Die
   Begründung „der Umbruch trennt schon“ war eine Vermutung und bei
   fünf von neun Breiten falsch.

   Deshalb trägt der Punkt die Trennung jetzt selbst: eine eigene
   Umrandung, die an jeder Stelle einer Zeile wirkt.

   Bewusst flacher als „Pilotwehr werden“. Mit derselben Polsterung wie
   die übrigen Punkte war das Feld 42 px hoch, der Knopf daneben 44 —
   zwei praktisch gleich große Kästen, die um dieselbe Aufmerksamkeit
   streiten. Die Werbeseite hat aber genau einen Ruf, und das ist der
   andere. Geringere Polsterung bringt es auf 35 px.

   Über die Schriftstärke ließ sich das nicht regeln: `.topnav nav a`
   ist spezifischer als `.knopf` und setzt beide auf 500 — die 600 des
   Knopfes kommen in der Kopfzeile nie an.

   Die Kante: 0,36 Weiß auf dem fast schwarzen Grund ergibt 3,4 : 1
   und liegt damit über den 3 : 1, die WCAG 1.4.11 für die Kante
   eines Bedienelements verlangt. Bei 0,28 waren es 2,9 : 1 —
   gerechnet, nicht geschätzt. */
/* Als `.topnav nav a.topnav-anmelden` geschrieben und nicht als
   `.topnav-anmelden`: Die Polsterung steht in `.topnav nav a`, und die
   ist spezifischer. Die erste Fassung sah im Quelltext richtig aus und
   blieb wirkungslos — gemerkt nur, weil die Höhe nachgemessen wurde. */
.topnav nav a.topnav-anmelden {
  margin-left: 0.55rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.36);
}

.topnav nav a.topnav-anmelden:hover {
  border-color: var(--wache-weiss);
}

/* ---------- Knoepfe ---------- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--wache-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}

.knopf-primaer {
  background: var(--wache-rot);
  color: var(--wache-weiss);
}

.knopf-primaer:hover {
  background: var(--wache-rot-dunkel);
}

/* Die Kante war rgba(20,23,28,0.2) und ergab gegen Creme 1,5 : 1. Ein
   Bedienelement braucht 3 : 1 fuer die Kante, die es als solches erkennbar
   macht (WCAG 1.4.11). 0,5 bringt 3,4 : 1. Dasselbe gilt unten fuer die
   Eingabefelder und in der Kopfzeile fuer die helle Variante. */
.knopf-sekundaer {
  background: transparent;
  border-color: rgba(20, 23, 28, 0.5);
  color: var(--wache-schwarz);
}

.knopf-sekundaer:hover {
  border-color: var(--wache-schwarz);
  background: rgba(20, 23, 28, 0.04);
}

.topnav .knopf-sekundaer {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--wache-weiss);
}

.topnav .knopf-sekundaer:hover {
  border-color: var(--wache-weiss);
  background: rgba(255, 255, 255, 0.1);
}

/* ---------- Grundraster ---------- */

.bahn {
  width: min(var(--wache-max), calc(100vw - 3rem));
  margin: 0 auto;
}

.abschnitt {
  padding: 4.5rem 0;
  border-top: 1px solid var(--wache-linie);
}

.abschnitt:first-of-type {
  border-top: 0;
}

.augenbraue {
  /* Flex statt block, seit ein Symbol danebensteht: Ohne das säße es auf
     der Grundlinie und der Text daneben eine Spur zu hoch. */
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--wache-grau);
  margin: 0 0 0.6rem;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 0.8rem;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
}

h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
}

h3 {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

p {
  margin: 0 0 1rem;
}

.fuehrungstext {
  font-size: 1.12rem;
  color: var(--wache-anthrazit);
  max-width: 62ch;
}

.gedaempft {
  color: var(--wache-grau);
}

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

.aufmacher {
  padding: 4rem 0 3rem;
}

.aufmacher h1 {
  max-width: 18ch;
}

.aufmacher-tasten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.aufmacher-bild {
  margin-top: 3rem;
  border-radius: var(--wache-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wache-linie);
  box-shadow: var(--wache-shadow-bild);
  background: var(--wache-weiss);
  line-height: 0;
}

.aufmacher-bild img {
  display: block;
  width: 100%;
}

/* ---------- Belegzeile ---------- */

.belege {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 1px;
  background: var(--wache-linie);
  border: 1px solid var(--wache-linie);
  border-radius: var(--wache-radius);
  overflow: hidden;
}

.beleg {
  background: var(--wache-cream);
  padding: 1.4rem 1.3rem;
}

.beleg strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}

.beleg span {
  font-size: 0.9rem;
  color: var(--wache-grau);
}

/* ---------- Zweispalter mit Bild ---------- */

.zweispalter {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
}

.zweispalter.gedreht .zweispalter-text {
  order: 2;
}

.zweispalter-bild {
  border-radius: var(--wache-radius-lg);
  overflow: hidden;
  border: 1px solid var(--wache-linie);
  box-shadow: var(--wache-shadow-bild);
  background: var(--wache-weiss);
  line-height: 0;
}

.zweispalter-bild img {
  display: block;
  width: 100%;
}

.punkte {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.punkte li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.98rem;
}

.punkte li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wache-rot);
}

.punkte strong {
  font-weight: 600;
}

/* ---------- Kartenraster ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.karte {
  background: var(--wache-weiss);
  border: 1px solid var(--wache-linie);
  border-radius: var(--wache-radius);
  box-shadow: var(--wache-shadow-card);
  padding: 1.5rem;
}

/* Zwei Spalten statt vier: Die Karten mit Frage und Antwort tragen laengeren
   Text, und vier nebeneinander ergeben Spalten von 12 Zeichen Breite. */
.karten-zwei {
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}

.karten-zwei .karte h3 {
  margin-bottom: 0.6rem;
}

.karte p:last-child {
  margin-bottom: 0;
}

.karte p {
  font-size: 0.96rem;
  color: var(--wache-anthrazit);
}

/* ---------- Dunkler Abschnitt ---------- */

.dunkel {
  background: var(--wache-schwarz);
  color: var(--wache-weiss);
  border-top: 0;
}

.dunkel .augenbraue {
  color: rgba(255, 255, 255, 0.55);
}

.dunkel .fuehrungstext,
.dunkel p {
  color: rgba(255, 255, 255, 0.8);
}

.dunkel .karte {
  background: var(--wache-anthrazit);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.dunkel .karte h3 {
  color: var(--wache-weiss);
}

.dunkel .karte p {
  color: rgba(255, 255, 255, 0.72);
}

.dunkel a {
  color: var(--wache-weiss);
}

/* ---------- Merkmale (Schlagwortraster) ---------- */

.merkmale {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--wache-radius);
  overflow: hidden;
}

.merkmal {
  background: var(--wache-schwarz);
  padding: 1.3rem 1.25rem;
}

.merkmal strong {
  display: flex;
  /* `flex-start` und nicht `center`: Bricht der Titel um — „Barrierefrei
     nach WCAG 2.1 AA" tut das —, säße das Symbol sonst mittig zwischen
     beiden Zeilen und damit neben der zweiten. Gesehen am 8. September
     2026. Der Versatz hebt es auf die Schriftlinie der ersten. */
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.98rem;
  color: var(--wache-weiss);
  margin-bottom: 0.3rem;
}

.merkmal span {
  font-size: 0.9rem;
  /* 0,72 ergibt gegen #14171C rund 8,7 : 1. */
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Stand des Projekts ---------- */

.stand {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1rem;
  margin-top: 2rem;
  /* Ohne das ziehen sich alle drei Bloecke auf die Hoehe des laengsten und
     stehen unten halb leer. */
  align-items: start;
}

.stand-block {
  border: 1px solid var(--wache-linie);
  border-radius: var(--wache-radius);
  background: var(--wache-weiss);
  padding: 1.5rem;
}

.stand-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.stand-block li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--wache-anthrazit);
}

/* Die Zeichen ✓ und → standen hier bis zum 8. September 2026. Sie sind
   Symbolen aus `@coreui/icons` gewichen — demselben Satz, den die
   Anwendung benutzt. Ein Schriftzeichen sieht in jeder Schrift anders
   aus; ein Pfad sieht überall gleich aus.

   Die Farbe trägt die Aussage nicht allein (WCAG 1.4.1): Der Haken und
   der Kreispfeil sind auch in Graustufen zu unterscheiden, und die
   Überschrift des Blocks sagt es noch einmal in Worten. */
.stand-block li .symbol {
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.05em;
  height: 1.05em;
}

/* --wache-helmgold ergibt auf Weiss 2,4 : 1. Die dunkle Variante 4,8 : 1. */
.stand-fertig li .symbol {
  color: #1d7a5c;
}

.stand-arbeit li .symbol {
  color: var(--wache-helmgold-dunkel);
}

/* ---------- Anmeldung ---------- */

.anmeldung {
  background: var(--wache-cream-dunkel);
  border-top: 0;
}

.anmeldung-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  gap: 3rem;
  align-items: start;
}

.formular {
  background: var(--wache-weiss);
  border: 1px solid var(--wache-linie);
  border-radius: var(--wache-radius-lg);
  box-shadow: var(--wache-shadow-card);
  padding: 1.75rem;
}

.feldraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1rem;
}

.feld {
  display: grid;
  gap: 0.35rem;
}

.feld-breit {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}

.feld > span,
.feld-breit > span {
  font-size: 0.86rem;
  font-weight: 600;
}

input[type='text'],
input[type='email'],
textarea {
  width: 100%;
  border: 1px solid rgba(20, 23, 28, 0.5);
  border-radius: var(--wache-radius-sm);
  background: var(--wache-weiss);
  color: var(--wache-schwarz);
  padding: 0.65rem 0.8rem;
}

/* War #78808D und ergab auf Weiss 4,0 : 1. Platzhaltertext ist Text. */
input::placeholder,
textarea::placeholder {
  color: var(--wache-grau);
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.pflichthinweis {
  font-size: 0.82rem;
  color: var(--wache-grau);
  margin: 0.9rem 0 0;
}

.formular-fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.3rem;
}

.rueckmeldung {
  min-height: 1.5rem;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
}

/* Beide Werte gegen den weissen Formularhintergrund gerechnet: 5,1 : 1 und
   5,6 : 1. Die Vorgaenger (#2f8f63 und #c54e43) lagen bei 3,9 und 4,4. */
.rueckmeldung.gut {
  color: #1f7a50;
}

.rueckmeldung.schlecht {
  color: #b8362a;
}

/* ---------- Fusszeile ---------- */

.fusszeile {
  background: var(--wache-schwarz);
  color: rgba(255, 255, 255, 0.72);
  padding: 2.5rem 0;
  font-size: 0.92rem;
}

.fusszeile-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.fusszeile-marke {
  color: var(--wache-weiss);
  font-weight: 600;
}

.fusszeile nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.fusszeile a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.fusszeile a:hover {
  color: var(--wache-weiss);
  text-decoration: underline;
}

/* 0,45 ergab 4,55 : 1 und lag damit nur um 0,05 ueber der Grenze - zu wenig
   Luft, um eine spaetere Farbaenderung zu ueberstehen. 0,55 bringt 6,2 : 1. */
.fusszeile-hinweis {
  width: 100%;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Rechtstexte ---------- */

.rechtstext {
  padding: 3.5rem 0 4.5rem;
  max-width: 74ch;
}

.rechtstext h2 {
  font-size: 1.35rem;
  margin-top: 2.5rem;
}

.rechtstext h3 {
  margin-top: 1.8rem;
}

.rechtstext p,
.rechtstext li {
  font-size: 1rem;
}

.rechtstext ul {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.anschrift {
  background: var(--wache-weiss);
  border: 1px solid var(--wache-linie);
  border-radius: var(--wache-radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 860px) {
  .zweispalter,
  .anmeldung-raster {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .zweispalter.gedreht .zweispalter-text {
    order: 0;
  }

  .abschnitt {
    padding: 3rem 0;
  }

  .topnav nav {
    margin-left: 0;
    width: 100%;
  }

}

@media (max-width: 480px) {
  body {
    font-size: 16px;
  }

  .bahn {
    width: calc(100vw - 2rem);
  }

  .formular {
    padding: 1.25rem;
  }
}

/* Die Seite hat keine Bewegung ausser weichem Scrollen - das gehoert
   trotzdem abschaltbar. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Symbole ----------
   Die Pfade stehen als `<symbol>` im Dokument, siehe den Kommentar dort.
   Hier nur, wie sie sich verhalten.

   `1em` und `currentColor`: Ein Symbol wächst mit seinem Text und nimmt
   dessen Farbe an. Damit gibt es keine Stelle, an der eine Größe oder
   ein Farbwert zweimal gepflegt werden müsste.

   Alle tragen `aria-hidden` im Markup - sie sagen nichts, was der Text
   daneben nicht sagt. */
.symbolvorrat {
  display: none;
}

.symbol {
  width: 1em;
  height: 1em;
  /* Ohne das schrumpft das Symbol in einem Flexcontainer mit, sobald der
     Text daneben lang wird. */
  flex: none;
}

.augenbraue .symbol {
  width: 1.15em;
  height: 1.15em;
}

/* Ohne eigene Farbe: Das Symbol erbt die des Titels und gehoert damit
   sichtbar zu ihm.

   Nachgerechnet am 8. September 2026 gegen den Kartengrund #14171c:
   Das Marken-Rot #c8102e ergibt dort 2,6 : 1 und faellt unter die
   3 : 1 aus WCAG 1.4.11. `--wache-rot-hell` waere mit #fcebeb zwar
   hell genug, sieht aber aus wie ein blasses Weiss - eine dritte Farbe,
   die nichts sagt. Das Weiss des Titels sagt dasselbe und ist schon da. */
.symbol-merkmal {
  width: 1.15em;
  height: 1.15em;
  /* Auf die Schriftlinie der ersten Zeile, siehe `align-items` oben. */
  margin-top: 0.1em;
}