/* Gemeinsames Aussehen der drei Seiten. Bewusst schlicht: das Pruefteam
   soll den Text lesen, nicht die Gestaltung bewundern. Hoher Kontrast,
   grosse Zeilenabstaende, klare Ueberschriften. */

:root {
  --rot: #de2028;
  --dunkel: #0e1116;
  --text: #1b1f24;
  --grau: #5b6470;
  --linie: #e3e6ea;
  --flaeche: #f7f8fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: #fff;
}

header {
  background: var(--dunkel);
  color: #fff;
  padding: 28px 20px;
}

header .innen,
main,
footer .innen {
  max-width: 780px;
  margin: 0 auto;
}

.marke {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fff;
}

.zeichen {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  flex: 0 0 auto;
}

.marke b { font-size: 21px; letter-spacing: .2px; }

/* ACHTUNG: hier stand einmal `.marke span`. Das ist spezifischer als
   `.zeichen` (Klasse + Element schlaegt Klasse allein) und hat der Ziffer
   im Kreis Schriftgroesse und Farbe des Untertitels aufgezwungen - die 30
   war praktisch unsichtbar. Deshalb eine eigene Klasse statt eines
   Element-Selektors. */
.marke .untertitel { display: block; font-size: 13px; color: #b6bec9; font-weight: 400; }

nav { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
nav a {
  color: #cdd4dd;
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid transparent;
}
nav a:hover, nav a[aria-current] { color: #fff; border-bottom-color: var(--rot); }

/* Sprachumschalter. Sitzt am Ende der Navigation, direkt neben Impressum. */
#sprachknopf {
  margin-left: auto;
  background: transparent;
  color: #cdd4dd;
  border: 1px solid #47505c;
  border-radius: 999px;
  padding: 5px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.2;
}
#sprachknopf:hover { color: #fff; border-color: var(--rot); background: rgba(222,32,40,.15); }
#sprachknopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

/* Ohne JavaScript stehen beide Sprachfassungen untereinander. Das ist gewollt,
   damit nichts unauffindbar wird. Mit JavaScript blendet sprache.js die
   jeweils andere Fassung ueber das hidden-Attribut aus. */
[hidden] { display: none !important; }

main { padding: 34px 20px 60px; }

h1 { font-size: 27px; line-height: 1.25; margin: 0 0 6px; }
h2 { font-size: 20px; margin: 34px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--linie); }
h3 { font-size: 16px; margin: 22px 0 6px; }

.stand { color: var(--grau); font-size: 14px; margin: 0 0 26px; }

a { color: #0b57d0; }

.kasten {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-left: 3px solid var(--rot);
  padding: 14px 18px;
  margin: 22px 0;
  border-radius: 4px;
}

.kasten p:first-child { margin-top: 0; }
.kasten p:last-child { margin-bottom: 0; }

/* Frueher stand die englische Fassung unter der deutschen und brauchte einen
   Trenner. Seit dem Sprachumschalter steht immer nur eine Fassung auf der
   Seite, deshalb keine Abgrenzung mehr. */

table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { background: var(--flaeche); font-weight: 600; }

code {
  background: var(--flaeche);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 14px;
  word-break: break-all;
}

ul { padding-left: 22px; }
li { margin: 5px 0; }

footer {
  border-top: 1px solid var(--linie);
  padding: 24px 20px 40px;
  color: var(--grau);
  font-size: 14px;
}
footer a { color: var(--grau); margin-right: 18px; }

.hinweis-ausfuellen {
  background: #fff4d6;
  border: 1px solid #e0b93a;
  padding: 12px 16px;
  border-radius: 4px;
  margin: 20px 0;
  font-size: 15px;
}