/* ===========================================================================
   asf-braunschweig.de
   Handgeschrieben, kein Build-Schritt, kein Framework.

   Aufbau der Datei:
     1. Farben, Abstaende, Typografie als Custom Properties
     2. Grundlagen
     3. Seitenraster und Abschnitte
     4. Kopfzeile und Navigation
     5. Typografie
     6. Bausteine: Knopf, Hinweis, Karte, Liste, Bilder
     7. Seitenbausteine: Auftakt, Plakat, Wegweiser
     8. Buchungsseite: zwei Spalten und Formular
     9. Fusszeile

   Schrift: GENAU EINE Familie fuer die ganze Seite, Ueberschriften,
   Navigation und Fusszeile eingeschlossen. Im ganzen Dokument steht
   font-family genau einmal, auf dem body. Formularelemente und Knoepfe
   erben sie ueber font: inherit. Unterschiede entstehen allein ueber
   Groesse, Gewicht und Laufweite.

   Massstab: Grundschriftgroesse 18px. Alle Groessen und Abstaende haengen
   ueber rem daran, die Seite waechst also an einer einzigen Stelle.

   Farben: aus den Logos entnommen. Die Grundfarbe ist genau die Tinte des
   Signets, #10202F. Die Flaechen sind kuehle Neutraltoene, aus dieser
   Grundfarbe gegen Weiss gemischt. Der warme Akzent aus dem Plakat steht
   nur an Linien, Knoepfen und Hervorhebungen, nie auf ganzen Flaechen.

   Es gibt genau eine Fassung, die helle. Kein prefers-color-scheme, keine
   dunklen Tokens. color-scheme: light haelt auch Formularelemente hell,
   unabhaengig von der Systemeinstellung des Besuchers.
   =========================================================================== */


/* 1. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Die eine Schriftfamilie. Sonst steht font-family nirgends. */
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, sans-serif;
  --gewicht-normal: 400;
  --gewicht-fett: 600;

  /* Schriftgroessen, 1rem sind 18px */
  --text-xs:  0.8rem;
  --text-s:   0.9rem;
  --text-m:   1rem;
  --text-l:   1.2rem;
  --text-xl:  1.35rem;
  --text-2xl: 1.7rem;
  --text-3xl: clamp(2.1rem, 1.7rem + 1.7vw, 2.8rem);

  /* Zeilenabstand */
  --zeile-eng: 1.15;
  --zeile-mittel: 1.4;
  --zeile-weit: 1.6;

  /* Abstandsskala. Abstaende kommen aus dieser Skala, nicht aus Einzelwerten. */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: 1.5rem;
  --abstand-6: 2rem;
  --abstand-7: 3rem;
  --abstand-8: 4rem;
  --abstand-9: 6rem;

  /* Breiten. --breite-text haelt die Zeile bei etwa 65 Zeichen. */
  --breite-seite: 68rem;
  --breite-text: 32rem;

  /* Ein Radius fuer alles, was eine Flaeche ist: Knopf, Karte, Bild, Feld. */
  --radius: 4px;

  /* Farben. Es gibt nur diese eine Fassung.
     Die Flaechen sind #10202F gegen Weiss gemischt, 4 und 10 Prozent. */
  --farbe-hg: #ffffff;
  --farbe-flaeche: #f5f6f7;
  --farbe-text: #10202f;
  --farbe-text-leise: #5a6570;
  --farbe-linie: #dee0e2;
  --farbe-akzent: #6e5e49;

  /* Signalfarbe fuer Fehler am Feld. Kein Schmuck, sondern Funktion, deshalb
     die einzige Farbe neben Grundfarbe, Akzent und Grautoenen. */
  --farbe-fehler: #8e3323;

  --farbe-kopf-hg: #ffffff;
  --farbe-kopf-linie: #dee0e2;

  --farbe-knopf-hg: #10202f;
  --farbe-knopf-text: #ffffff;
  --farbe-knopf-hg-aktiv: #1d3145;

  --farbe-feld-hg: #ffffff;
}


/* 2. Grundlagen ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Grundschriftgroesse 18px statt 16px. Hieran haengt der ganze Massstab. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--farbe-hg);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-size: var(--text-m);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeile-weit);
  text-align: left;
}

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

:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 3px;
}

/* Nur fuer Screenreader, etwa der Sprunglink zum Inhalt */
.versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.versteckt:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--abstand-2) var(--abstand-4);
  overflow: visible;
  clip-path: none;
  background: var(--farbe-flaeche);
}


/* 3. Seitenraster und Abschnitte ------------------------------------------- */

.bahn {
  width: 100%;
  max-width: var(--breite-seite);
  margin-inline: auto;
  padding-inline: var(--abstand-5);
}

@media (min-width: 40rem) {
  .bahn {
    padding-inline: var(--abstand-7);
  }
}

main {
  padding-block: var(--abstand-7) var(--abstand-9);
}

/* Jeder Abschnitt hat eine Aufgabe, dazwischen liegt Luft und eine Linie. */
.abschnitt + .abschnitt {
  margin-top: var(--abstand-8);
  padding-top: var(--abstand-8);
  border-top: 1px solid var(--farbe-linie);
}


/* 4. Kopfzeile und Navigation ---------------------------------------------- */

.kopf {
  background: var(--farbe-kopf-hg);
  border-bottom: 1px solid var(--farbe-kopf-linie);
}

.kopf__bahn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--abstand-4) var(--abstand-6);
  padding-block: var(--abstand-5);
}

/* Signet und Wortmarke, kein gesetzter Text. Sie sind das Erkennungsmerkmal,
   deshalb gross. Die Dateien sind PNG mit Transparenz, Fassung in Tinte. */
.marke {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--abstand-4);
  color: inherit;
  text-decoration: none;
}

.marke__signet {
  display: block;
  width: auto;
  height: 3.25rem;
}

.marke__wortmarke {
  display: block;
  width: auto;
  height: 1.45rem;
}

/* Schalter fuer die Navigation. Ohne Javascript traegt er hidden und bleibt
   unsichtbar, dann steht die Navigation offen da. */
.nav-schalter {
  display: none;
  align-items: center;
  gap: var(--abstand-2);
  margin-left: auto;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-2) var(--abstand-3);
  background: var(--farbe-hg);
  color: var(--farbe-text);
  font: inherit;
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
  cursor: pointer;
}

.nav-schalter__zeichen {
  width: 1.3rem;
  height: 1.3rem;
}

.nav-schalter__zu,
.nav-schalter[aria-expanded="true"] .nav-schalter__auf {
  display: none;
}

.nav-schalter[aria-expanded="true"] .nav-schalter__zu {
  display: block;
}

/* Unterhalb dieser Breite passen Marke und Navigation nicht nebeneinander.
   Achtung: rem in Media Queries sind 16px, nicht die 18px der Seite. */
@media (max-width: 75.9375rem) {
  .nav-schalter:not([hidden]) {
    display: inline-flex;
  }

  .kopf--klappbar .haupt-nav {
    display: none;
    width: 100%;
  }

  .kopf--klappbar .haupt-nav[data-offen="ja"] {
    display: block;
  }

  .kopf--klappbar .haupt-nav ul {
    flex-direction: column;
    gap: 0;
    padding-block: var(--abstand-2) var(--abstand-3);
  }

  .kopf--klappbar .haupt-nav a {
    display: block;
    padding-block: var(--abstand-3);
    border-bottom: 0;
  }

  .kopf--klappbar .haupt-nav a[aria-current="page"] {
    border-bottom: 0;
    color: var(--farbe-akzent);
  }
}

/* Signet, Wortmarke und Schalter brauchen zusammen rund 494px. Darunter
   steht neben dem Signet nur noch der Schalter, sonst rutscht er in eine
   zweite Zeile. Den Namen traegt das aria-label des Links, er geht also
   nicht verloren. */
@media (max-width: 33.9375rem) {
  .kopf .marke__wortmarke {
    display: none;
  }

  .kopf__bahn {
    gap: var(--abstand-4);
  }
}

.haupt-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.haupt-nav a {
  display: inline-block;
  padding-block: var(--abstand-2);
  border-bottom: 2px solid transparent;
  color: var(--farbe-text-leise);
  font-size: var(--text-m);
  text-decoration: none;
}

.haupt-nav a:hover {
  color: var(--farbe-text);
}

.haupt-nav a[aria-current="page"] {
  border-bottom-color: var(--farbe-akzent);
  color: var(--farbe-text);
  font-weight: var(--gewicht-fett);
}

@media (min-width: 76rem) {
  .kopf__bahn {
    flex-wrap: nowrap;
  }

  .haupt-nav {
    margin-left: auto;
  }

  .haupt-nav ul {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}


/* 5. Typografie ------------------------------------------------------------ */

h1,
h2,
h3 {
  margin: 0 0 var(--abstand-4);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-eng);
  text-wrap: balance;
}

h1 {
  margin-bottom: var(--abstand-5);
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-xl);
}

/* Luft ueber einer Ueberschrift nur, wenn etwas davor steht */
* + h2 {
  margin-top: var(--abstand-7);
}

* + h3 {
  margin-top: var(--abstand-6);
}

p {
  margin: 0 0 var(--abstand-4);
  max-width: var(--breite-text);
}

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

.anriss {
  max-width: var(--breite-text);
  font-size: var(--text-l);
  line-height: var(--zeile-mittel);
  color: var(--farbe-text-leise);
}

a {
  color: var(--farbe-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}


/* 6. Bausteine ------------------------------------------------------------- */

/* Hinweis. Eine ruhige Karte in derselben Formensprache wie Tafel und Knopf,
   keine vertikalen Striche. */
.hinweis {
  margin-block: var(--abstand-5);
  max-width: var(--breite-text);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  padding: var(--abstand-3) var(--abstand-4);
  font-weight: var(--gewicht-fett);
}

/* Knopfzeile */
.knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-4);
  margin-block: var(--abstand-5) 0;
  max-width: none;
}

.knopf {
  display: inline-block;
  padding: var(--abstand-3) var(--abstand-6);
  border: 1px solid var(--farbe-knopf-hg);
  border-radius: var(--radius);
  background: var(--farbe-knopf-hg);
  color: var(--farbe-knopf-text);
  font: inherit;
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-eng);
  text-decoration: none;
  cursor: pointer;
}

.knopf:hover {
  border-color: var(--farbe-knopf-hg-aktiv);
  background: var(--farbe-knopf-hg-aktiv);
}

.knopf--leise {
  border-color: var(--farbe-linie);
  background: transparent;
  color: var(--farbe-text);
}

.knopf--leise:hover {
  border-color: var(--farbe-text-leise);
  background: transparent;
}

/* Karte. Die eine Flaeche mit Rahmen und Radius, fuer Eckdaten und Uebersicht. */
.tafel {
  max-width: var(--breite-text);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
  padding: var(--abstand-5) var(--abstand-6);
}

.tafel--abgesetzt {
  margin-top: var(--abstand-7);
}

.eckdaten + .tafel__titel,
.liste + .tafel__titel {
  margin-top: var(--abstand-6);
}

.tafel__titel {
  margin: 0 0 var(--abstand-4);
  font-size: var(--text-l);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-eng);
}

/* Angaben als echte Tabelle, nicht als Zeile mit Trennzeichen */
.eckdaten {
  width: 100%;
  max-width: var(--breite-text);
  border-collapse: collapse;
  font-size: var(--text-s);
  line-height: var(--zeile-mittel);
}

.eckdaten caption {
  margin-bottom: var(--abstand-4);
  font-size: var(--text-l);
  font-weight: var(--gewicht-fett);
  text-align: left;
}

.eckdaten th,
.eckdaten td {
  padding-block: var(--abstand-3);
  border-bottom: 1px solid var(--farbe-linie);
  text-align: left;
  vertical-align: baseline;
}

.eckdaten th {
  width: 9rem;
  padding-right: var(--abstand-4);
  color: var(--farbe-text-leise);
  font-weight: var(--gewicht-normal);
}

.eckdaten tr:last-child th,
.eckdaten tr:last-child td {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Auf schmalen Geraeten steht die Beschriftung ueber dem Wert, sonst bleibt
   fuer die Angabe zu wenig Platz und jede Zeile bricht mehrfach um. */
@media (max-width: 34rem) {
  .eckdaten th,
  .eckdaten td {
    display: block;
    width: auto;
    padding-right: 0;
  }

  .eckdaten th {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--text-xs);
  }

  .eckdaten td {
    padding-top: var(--abstand-1);
  }
}

/* Zahlen untereinander ausrichten */
.zahl {
  font-variant-numeric: tabular-nums;
}

.nebensatz {
  display: block;
  color: var(--farbe-text-leise);
  font-size: var(--text-xs);
}

/* Listen */
.liste {
  margin: 0 0 var(--abstand-4);
  padding-left: var(--abstand-5);
  max-width: var(--breite-text);
}

.liste li {
  margin-bottom: var(--abstand-2);
}

.liste--eng {
  margin-bottom: 0;
  font-size: var(--text-s);
}

/* Zweispaltige Liste, wo viele kurze Punkte stehen */
@media (min-width: 40rem) {
  .liste--zwei {
    max-width: none;
    columns: 2;
    column-gap: var(--abstand-7);
  }

  .liste--zwei li {
    break-inside: avoid;
  }
}

.bedingungen {
  margin: 0 0 var(--abstand-5);
  padding-left: var(--abstand-5);
  max-width: var(--breite-text);
}

.bedingungen li {
  margin-bottom: var(--abstand-4);
}

/* Bilder. Immer ein gesetztes Format, nie ein einzelner Block im Fliesstext. */
figure {
  margin: 0;
}

figcaption {
  margin-top: var(--abstand-2);
  color: var(--farbe-text-leise);
  font-size: var(--text-xs);
  line-height: var(--zeile-mittel);
}

.bildraster {
  display: grid;
  gap: var(--abstand-4);
}

.bildraster img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.bildraster--hoch img {
  aspect-ratio: 3 / 4;
}

/* Hochkant fuer Personenaufnahmen, schneidet wenig vom Kopf ab */
.bildraster--portraet img {
  aspect-ratio: 3 / 4;
  object-position: 50% 30%;
}

.bildraster--quer img {
  aspect-ratio: 3 / 2;
}

.bildraster--quadrat img {
  aspect-ratio: 1 / 1;
}

@media (min-width: 34rem) {
  .bildraster--zwei {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 52rem) {
  .bildraster--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Abstand um Bildbloecke. Ein Bild klebt weder am Text noch am naechsten
   Bild. Im Fluss fallen unterer und oberer Abstand zusammen, es bleibt also
   bei einem Abstand zwischen zwei Bloecken. */
.bild,
.bildraster {
  margin-block: var(--abstand-5);
}

.bild:first-child,
.bildraster:first-child {
  margin-top: 0;
}

.bild:last-child,
.bildraster:last-child {
  margin-bottom: 0;
}

/* In einem Raster regelt gap den Abstand, dort stoeren eigene Aussenabstaende */
.zweispalt > .bild,
.zweispalt > .bildraster,
.auftakt > .bildraster,
.fahrt-einstieg > .bild,
.vereinsbilder > .bild,
.vereinsbilder > .bildraster {
  margin-block: 0;
}

/* Einzelnes Bild. Ohne Modifikator bleibt es unter der Seitenbreite, damit
   es nicht als riesiger Block im Fliesstext steht. */
.bild {
  max-width: 44rem;
}

.bild--band {
  max-width: none;
}

.bild--band img {
  aspect-ratio: 5 / 2;
}

.bild img {
  display: block;
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.bild--quer img {
  aspect-ratio: 3 / 2;
}

/* Text und Bild nebeneinander, auf dem Handy untereinander */
.zweispalt {
  display: grid;
  gap: var(--abstand-6);
  align-items: start;
}

.zweispalt:not(:last-child) {
  margin-bottom: var(--abstand-6);
}

@media (min-width: 52rem) {
  .zweispalt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--abstand-8);
  }

  .zweispalt--schmal-rechts {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }

  .zweispalt--schmal-links {
    grid-template-columns: 22rem minmax(0, 1fr);
  }
}

/* Bilderspalte der Vereinsseite, zwei Aufnahmen untereinander */
.vereinsbilder {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
}

/* Fehlende Angabe. Bleibt sichtbar, bis der Verein sie nachliefert. */
.fehlt {
  display: inline-block;
  border: 1px dashed var(--farbe-fehler);
  border-radius: var(--radius);
  padding: 0 var(--abstand-2);
  color: var(--farbe-fehler);
  font-weight: var(--gewicht-fett);
}


/* 7. Seitenbausteine ------------------------------------------------------- */

/* Auftakt der Startseite: links Marke und Text, rechts die beiden Fotos.
   Auf dem Handy Marke, Fotos, Text, damit nicht zuerst eine Textwand kommt. */
.auftakt {
  display: grid;
  gap: var(--abstand-6);
}

.auftakt__marke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-4);
}

.auftakt__signet {
  display: block;
  width: auto;
  height: 6rem;
}

.auftakt__wortmarke {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
}

/* Die Marke ist hier die grosse Form, die Ueberschrift ordnet sich unter. */
.auftakt__titel {
  margin: var(--abstand-5) 0 0;
  max-width: var(--breite-text);
  font-size: var(--text-xl);
  letter-spacing: 0;
}

/* Das Querformat schliesst buendig unter den beiden Hochformaten an. */
.auftakt__quer {
  grid-column: 1 / -1;
}

.auftakt__quer img {
  aspect-ratio: 16 / 9;
}

@media (min-width: 52rem) {
  .auftakt {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--abstand-8);
    row-gap: var(--abstand-6);
    align-items: start;
  }

  .auftakt__bilder {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .auftakt__signet {
    height: 7.5rem;
  }
}

/* Das Plakat. Es wird nie beschnitten, nur skaliert. */
.plakat {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.plakat--start {
  max-width: 26rem;
}

.plakat--fahrt {
  max-width: 20rem;
}

.plakat--buchen {
  max-width: 23rem;
}

/* Plakat und Eckdaten nebeneinander. Die rechte Spalte ist so hoch wie das
   Plakat, der Knopf sitzt unten und schliesst buendig mit dem Plakat ab.
   Erst ab 64rem, darunter bliebe fuer die Tabelle zu wenig Breite. */
.fahrt-einstieg {
  display: grid;
  gap: var(--abstand-6);
}

.fahrt-einstieg__daten .tafel {
  max-width: none;
}

@media (min-width: 64rem) {
  .fahrt-einstieg {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--abstand-8);
    align-items: stretch;
  }

  .fahrt-einstieg .plakat--start {
    max-width: none;
  }

  /* Startseite: die Eckdaten sind dort kuerzer, deshalb darf das Plakat
     schmaler stehen, damit ueber den Knoepfen weniger Leere bleibt. */
  .fahrt-einstieg--start {
    grid-template-columns: minmax(0, 0.68fr) minmax(0, 1fr);
  }

  .fahrt-einstieg__daten {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .fahrt-einstieg__daten .eckdaten th {
    width: 7rem;
  }

  .fahrt-einstieg__daten .knopfzeile {
    margin-top: auto;
    padding-top: var(--abstand-5);
    margin-bottom: 0;
  }
}

/* Verweise auf die anderen Seiten */
.wegweiser {
  display: grid;
  gap: var(--abstand-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 34rem) {
  .wegweiser {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 52rem) {
  .wegweiser {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wegweiser a {
  display: block;
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: var(--abstand-3) var(--abstand-4);
  color: var(--farbe-text);
  font-size: var(--text-m);
  font-weight: var(--gewicht-fett);
  text-decoration: none;
}

.wegweiser a:hover {
  border-color: var(--farbe-akzent);
  background: var(--farbe-flaeche);
}


/* 8. Buchungsseite --------------------------------------------------------- */

/* Links die Ueberschrift und darunter das Formular, rechts das Plakat und
   darunter die Eckdaten. Die rechte Spalte laeuft ueber beide Zeilen, damit
   links unter der Ueberschrift keine Luecke entsteht. */
.buchen-raster {
  display: grid;
  gap: var(--abstand-7);
}

.buchen-raster__rechts {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-6);
}

.uebersicht .tafel {
  max-width: none;
}

/* Ab etwa 900px zwei Spalten, links das Formular, rechts die Uebersicht.
   In der Reihenfolge des Dokuments steht die Uebersicht zuerst, damit sie auf
   dem Handy ueber dem Formular liegt. */
@media (min-width: 56.25rem) {
  .buchen-raster {
    grid-template-columns: minmax(0, 1fr) 23rem;
    column-gap: var(--abstand-8);
    row-gap: var(--abstand-7);
    align-items: start;
  }

  .buchen-raster__kopf {
    grid-column: 1;
    grid-row: 1;
  }

  .buchen-raster__rechts {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .formular-spalte {
    grid-column: 1;
    grid-row: 2;
  }

  /* In der schmalen Spalte steht die Beschriftung ueber dem Wert, sonst bleibt
     fuer die Angabe zu wenig Platz. Die Werte fluchten weiter untereinander. */
  .uebersicht .eckdaten th,
  .uebersicht .eckdaten td {
    display: block;
    width: auto;
    padding-right: 0;
  }

  .uebersicht .eckdaten th {
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--text-xs);
  }

  .uebersicht .eckdaten td {
    padding-top: var(--abstand-1);
  }
}

/* Formular */
.block {
  margin: 0 0 var(--abstand-8);
  padding: 0;
  border: 0;
  border-top: 1px solid var(--farbe-linie);
}

.block legend {
  padding: 0 var(--abstand-3) 0 0;
  font-size: var(--text-xl);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-eng);
}

.feld {
  margin-top: var(--abstand-5);
  max-width: 28rem;
}

.feld--schmal {
  max-width: 11rem;
}

.feld label {
  display: block;
  margin-bottom: var(--abstand-2);
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
}

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld input[type="date"],
.feld select,
.feld textarea {
  display: block;
  width: 100%;
  padding: var(--abstand-3);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  background: var(--farbe-feld-hg);
  color: var(--farbe-text);
  font: inherit;
  line-height: var(--zeile-mittel);
}

.feld textarea {
  resize: vertical;
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--farbe-text-leise);
}

.feld__hilfe {
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--text-xs);
  line-height: var(--zeile-mittel);
}

.feld__fehler {
  margin: var(--abstand-2) 0 0;
  color: var(--farbe-fehler);
  font-size: var(--text-xs);
  font-weight: var(--gewicht-fett);
  line-height: var(--zeile-mittel);
}

[aria-invalid="true"] {
  border-color: var(--farbe-fehler);
}

/* Auswahl aus wenigen Moeglichkeiten */
.feld--wahl {
  margin-top: var(--abstand-5);
  padding: 0;
  border: 0;
}

.feld--wahl legend {
  padding: 0;
  margin-bottom: var(--abstand-3);
  font-size: var(--text-s);
  font-weight: var(--gewicht-fett);
}

.wahlzeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-5);
}

.feld .wahl,
.feld .haken {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-2);
  margin-bottom: 0;
  font-size: var(--text-s);
  font-weight: var(--gewicht-normal);
}

.wahl input,
.haken input {
  flex: none;
  margin: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--farbe-text);
}

.feld--haken {
  max-width: var(--breite-text);
}

.haken span {
  line-height: var(--zeile-mittel);
}

/* Honigtopf. Nicht type=hidden, deshalb hier aus dem Weg geraeumt. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reisebedingungen zum Aufklappen */
.bedingungen-klapp {
  margin-top: var(--abstand-6);
  border-top: 1px solid var(--farbe-linie);
  border-bottom: 1px solid var(--farbe-linie);
  max-width: var(--breite-text);
}

.bedingungen-klapp summary {
  padding-block: var(--abstand-4);
  font-weight: var(--gewicht-fett);
  cursor: pointer;
}

.bedingungen-klapp__inhalt {
  padding-bottom: var(--abstand-4);
  font-size: var(--text-s);
}

.bedingungen-klapp__inhalt h3 {
  margin-top: var(--abstand-5);
  font-size: var(--text-m);
}

/* Aufstellung der Betraege */
.aufstellung {
  width: 100%;
  max-width: 28rem;
  margin-top: var(--abstand-6);
  border-collapse: collapse;
  font-size: var(--text-s);
}

.aufstellung caption {
  margin-bottom: var(--abstand-3);
  font-weight: var(--gewicht-fett);
  text-align: left;
}

.aufstellung th,
.aufstellung td {
  padding-block: var(--abstand-2);
  border-bottom: 1px solid var(--farbe-linie);
  text-align: left;
  font-weight: var(--gewicht-normal);
}

.aufstellung td {
  text-align: right;
}

.aufstellung tfoot th,
.aufstellung tfoot td {
  border-bottom: 0;
  font-weight: var(--gewicht-fett);
}

.formular__meldung {
  margin-top: var(--abstand-6);
  max-width: var(--breite-text);
  border: 1px solid var(--farbe-fehler);
  border-radius: var(--radius);
  padding: var(--abstand-3) var(--abstand-4);
  color: var(--farbe-fehler);
  font-weight: var(--gewicht-fett);
}


/* 9. Fusszeile ------------------------------------------------------------- */

.fuss {
  border-top: 1px solid var(--farbe-linie);
  background: var(--farbe-flaeche);
}

.fuss__bahn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-7) var(--abstand-8);
  padding-block: var(--abstand-8);
}

.fuss__marke .marke__signet {
  height: 2.75rem;
}

.fuss__marke .marke__wortmarke {
  height: 1.25rem;
}

.fuss__name {
  margin: var(--abstand-4) 0 0;
  color: var(--farbe-text-leise);
  font-size: var(--text-s);
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alle Verweise in der Fusszeile sehen gleich aus, auch der zu Instagram. */
.fuss a {
  color: var(--farbe-text-leise);
}

.fuss a:hover {
  color: var(--farbe-text);
}

.fuss__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

/* Das Zeichen laeuft in der Schriftgroesse mit und nimmt die Textfarbe an. */
.fuss__zeichen {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}