/* =========================================================================
   Unterricht – Kernstylesheet

   Zwei Situationen, ein System:
   Planung am Schreibtisch (hell, dicht) und Tafel im Raum (dunkel, groß).

   Schriften kommen aus dem Betriebssystem. Kein Font-CDN, damit beim
   Aufrufen keine Verbindung zu Dritten entsteht. Willst du eine eigene
   Schrift, lege sie als woff2 in core/assets/ und ersetze --familie-anzeige.
   ========================================================================= */

:root {
  --papier:      #ECEEF0;
  --flaeche:     #FFFFFF;
  --tinte:       #14191F;
  --ton-leise:   #656E78;
  --ton-still:   #8B939B;
  --linie:       #D5DADE;
  --linie-zart:  #E5E8EB;

  --warn-flaeche: #FFF6E8;
  --warn-rand:    #E8D2A8;
  --warn-ton:     #8A6314;

  --tafel-grund:  #12171C;
  --tafel-tinte:  #F2F4F6;
  --tafel-leise:  #7C8894;
  --tafel-linie:  #2A333D;

  --akzent:        #3D4A5C;
  --akzent-dunkel: #7C93B4;

  --familie-anzeige: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --familie-text:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --familie-marke:   ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
                     "DejaVu Sans Mono", monospace;

  --schrift-marke: 600 .6875rem/1 var(--familie-marke);
  --schrift-klein: 400 .8125rem/1.5 var(--familie-text);

  --bahn: 62rem;
  --rund: 3px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1rem/1.6 var(--familie-text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

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

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

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopf__innen {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.kopf__marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-weight: 650;
}
.kopf__kuerzel {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--akzent);
  color: #fff;
  border-radius: var(--rund);
  font: var(--schrift-marke);
  letter-spacing: .02em;
}
.kopf__zurueck {
  font: var(--schrift-klein);
  color: var(--ton-leise);
  text-decoration: none;
}
.kopf__zurueck:hover { color: var(--tinte); }
.kopf__nav {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  font: var(--schrift-klein);
}
.kopf__nav a { color: var(--ton-leise); text-decoration: none; }
.kopf__nav a:hover { color: var(--tinte); }

.fuss {
  max-width: var(--bahn);
  margin: 4rem auto 2rem;
  padding: 0 1.5rem;
  font: var(--schrift-marke);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ton-still);
}

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

.inhalt { min-height: 60vh; }
.inhalt--nackt { min-height: 100vh; }

.bahn {
  max-width: var(--bahn);
  margin: 0 auto;
  padding: 3rem 1.5rem 0;
}
.bahn--schmal { max-width: 42rem; }

.marke {
  font: var(--schrift-marke);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ton-leise);
  margin: 0 0 .5rem;
}

.anzeige {
  font-family: var(--familie-anzeige);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}

.vorspann {
  font-size: 1.0625rem;
  color: var(--ton-leise);
  max-width: 44rem;
  margin: 0 0 1.5rem;
}

.leer {
  color: var(--ton-leise);
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: var(--rund);
  padding: 1.5rem;
}

.meldung {
  max-width: var(--bahn);
  margin: 1rem auto 0;
  padding: .75rem 1.25rem;
  border-radius: var(--rund);
  border-left: 3px solid var(--akzent);
  background: var(--flaeche);
  font-size: .9375rem;
}
.meldung--fehler { border-left-color: #B03636; color: #7A2020; }

.werkzeuge { display: flex; flex-wrap: wrap; gap: .625rem; margin: 1.5rem 0 2.5rem; }

/* ---------- Knöpfe ---------- */

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--akzent);
  border-radius: var(--rund);
  padding: .5rem 1rem;
  font: 550 .9375rem/1.4 var(--familie-text);
  cursor: pointer;
  transition: filter .12s ease;
}
.knopf:hover { filter: brightness(1.12); }
.knopf--gross { padding: .75rem 1.5rem; font-size: 1rem; }
.knopf--leise {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.knopf--leise:hover { background: var(--flaeche); filter: none; }
.knopf--gefahr { background: #B03636; border-color: #B03636; }

/* ---------- Fächerübersicht ---------- */

.kachelgitter {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.kachel {
  display: block;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--akzent);
  border-radius: var(--rund);
  padding: 1.5rem 1.25rem 1.25rem;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.kachel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgb(20 25 31 / .09);
}
.kachel__kuerzel {
  display: block;
  font: var(--schrift-marke);
  letter-spacing: .14em;
  color: var(--akzent);
  margin-bottom: .75rem;
}
.kachel__name {
  display: block;
  font-family: var(--familie-anzeige);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: -.01em;
}
.kachel__meta {
  display: block;
  font: var(--schrift-klein);
  color: var(--ton-leise);
  margin-top: .25rem;
}

/* ---------- Fachübersicht: Jahrgänge und Reihen ---------- */

.jahrgang { margin-bottom: 3rem; }
.jahrgang__kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 .75rem;
}
.jahrgang__nr {
  font: var(--schrift-marke);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ton-leise);
}
.jahrgang__linie { flex: 1; height: 1px; background: var(--linie); }

.reihenliste { list-style: none; margin: 0; padding: 0; }
.reihe + .reihe { border-top: 1px solid var(--linie-zart); }

.reihe__flaeche {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titel zahl" "kurz zahl" "strecke strecke";
  gap: .15rem 1.5rem;
  align-items: baseline;
  padding: 1rem .75rem;
  margin: 0 -.75rem;
  text-decoration: none;
  border-radius: var(--rund);
  transition: background .12s ease;
}
.reihe__flaeche:hover { background: var(--flaeche); }
.reihe__titel { grid-area: titel; font-weight: 600; font-size: 1.0625rem; }
.reihe__kurz  { grid-area: kurz; font: var(--schrift-klein); color: var(--ton-leise); }
.reihe__zahl  {
  grid-area: zahl;
  font: var(--schrift-marke);
  letter-spacing: .08em;
  color: var(--ton-still);
  white-space: nowrap;
}

/* Die Länge der Reihe auf einen Blick: ein Punkt je Stunde */
.reihe__strecke {
  grid-area: strecke;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: .5rem;
}
.reihe__strecke i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--akzent);
  opacity: .32;
}
.reihe__flaeche:hover .reihe__strecke i { opacity: .7; }

/* ---------- Reihenansicht: die Strecke mit Halten ---------- */

.strecke { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.strecke::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 2px;
  background: var(--linie);
}

.halt {
  position: relative;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.25rem;
  padding-bottom: 2rem;
}
.halt__marke { position: relative; z-index: 1; padding-top: .15rem; }
.halt__nr {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--papier);
  border: 2px solid var(--akzent);
  color: var(--akzent);
  font: var(--schrift-marke);
  letter-spacing: 0;
}
.halt__titel {
  font-family: var(--familie-anzeige);
  font-size: 1.1875rem;
  font-weight: 650;
  letter-spacing: -.01em;
  margin: 0 0 .2rem;
}
.halt__titel a { text-decoration: none; }
.halt__titel a:hover { color: var(--akzent); }
.halt__ziel { font: var(--schrift-klein); color: var(--ton-leise); margin: 0 0 .6rem; }

.bausteinzeile {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
}
.bz a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: .3rem .625rem;
  font-size: .8125rem;
  text-decoration: none;
  color: var(--ton-leise);
  transition: border-color .12s ease, color .12s ease;
}
.bz a:hover { border-color: var(--akzent); color: var(--tinte); }
.bz__symbol { color: var(--akzent); font-size: .875rem; }
.bz__starr {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--flaeche);
  border: 1px dashed var(--linie);
  border-radius: var(--rund);
  padding: .3rem .625rem;
  font-size: .8125rem;
  color: var(--ton-still);
}
.bz--privat a, .bz--privat .bz__starr { border-style: dashed; opacity: .7; }
.bz--neu a { background: transparent; border-style: dashed; }

/* ---------- Tafelansicht ---------- */

.seite-tafel {
  background: var(--tafel-grund);
  color: var(--tafel-tinte);
  font-size: clamp(1.0625rem, 1.25vw, 1.5rem);
}
.tafel {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.tafel__kopf {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid var(--tafel-linie);
}
.tafel__raus {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--tafel-linie);
  border-radius: var(--rund);
  color: var(--tafel-leise);
  text-decoration: none;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.tafel__raus:hover { color: var(--tafel-tinte); border-color: var(--tafel-leise); }
.tafel__wo { min-width: 0; }
.tafel__reihe {
  display: block;
  font: var(--schrift-marke);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent-dunkel);
}
.tafel__stunde {
  display: block;
  font-family: var(--familie-anzeige);
  font-weight: 650;
  font-size: 1.25rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tafel__zaehler {
  margin-left: auto;
  font: var(--schrift-marke);
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--tafel-leise);
  flex-shrink: 0;
}

.tafel__buehne {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 4vh, 3.5rem) 2rem;
  overflow-y: auto;
}
.tafel__buehne > .baustein { width: 100%; max-width: 68rem; }

.seite-tafel .b__titel {
  font-family: var(--familie-anzeige);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}
.seite-tafel .b__fliess { font-size: 1.15em; max-width: 46em; }
.seite-tafel .b__fliess p { margin: 0 0 1em; }
.seite-tafel .b__marken {
  font: var(--schrift-marke);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent-dunkel);
  margin: -.75rem 0 1.25rem;
}
.seite-tafel .b-text--merksatz .b__fliess {
  border-left: 4px solid var(--akzent-dunkel);
  padding-left: 1.5rem;
  font-size: 1.35em;
}
.seite-tafel .b-text--zitat .b__fliess { font-style: italic; color: var(--tafel-leise); }
.seite-tafel .knopf { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #0D1216; }
.seite-tafel .knopf--leise { background: transparent; color: var(--tafel-tinte); border-color: var(--tafel-linie); }
.seite-tafel .hinweis { color: var(--tafel-leise); }
.seite-tafel .v__kopf, .seite-tafel .v__art { color: var(--akzent-dunkel); }
.seite-tafel .v__gefahr { background: #2A2317; border-color: #5C4A22; }
.seite-tafel .v__gefahr-kopf { color: #E0B959; }
.seite-tafel .v__entsorgung { border-top-color: var(--tafel-linie); color: var(--tafel-leise); }
.seite-tafel .w__de--zu { background: var(--tafel-linie); }

.b__rahmen {
  width: 100%;
  height: 68vh;
  border: 1px solid var(--tafel-linie);
  border-radius: var(--rund);
  background: #fff;
}
.b__leiste { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; }
.b__titel-klein { font-weight: 600; margin-right: auto; }
.b-video video { width: 100%; max-height: 68vh; background: #000; border-radius: var(--rund); }
.b-bild img { max-width: 100%; max-height: 66vh; border-radius: var(--rund); }
.b-bild figure { margin: 0; }
.b__nachweis { font: var(--schrift-klein); color: var(--ton-still); margin-top: .5rem; }
.seite-tafel .b__nachweis { color: var(--tafel-leise); }

.b__loesung {
  margin-top: 2rem;
  border-top: 1px solid var(--tafel-linie);
  padding-top: 1rem;
}
.b__loesung summary {
  cursor: pointer;
  font: var(--schrift-marke);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent-dunkel);
  padding: .5rem 0;
}
.b-link__flaeche {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  border: 1px solid var(--tafel-linie);
  border-radius: var(--rund);
  padding: 1.25rem 1.5rem;
}
.b-link__titel { font-size: 1.375rem; font-weight: 600; }
.b-link__wirt { font: var(--schrift-marke); letter-spacing: .1em; color: var(--tafel-leise); }
.b-dateien__liste { font-size: 1.1em; line-height: 2; }

/* Fußleiste der Tafel: die Bausteine der Stunde als Abschnitte */

.tafel__fuss {
  display: flex;
  align-items: stretch;
  gap: .5rem;
  padding: .75rem 1.25rem 1rem;
  border-top: 1px solid var(--tafel-linie);
}
.tafel__pfeil {
  display: grid;
  place-items: center;
  min-width: 4rem;
  border: 1px solid var(--tafel-linie);
  border-radius: var(--rund);
  color: var(--tafel-tinte);
  text-decoration: none;
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.tafel__pfeil:hover { background: var(--tafel-linie); }
.tafel__pfeil.ist-aus { opacity: .22; pointer-events: none; }
.tafel__pfeil--naechste { border-color: var(--akzent-dunkel); color: var(--akzent-dunkel); }

.schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  gap: 3px;
  min-width: 0;
}
.schritte li { flex: 1; min-width: 0; display: flex; }
.schritt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: .5rem .5rem .4rem;
  border-bottom: 4px solid var(--tafel-linie);
  text-decoration: none;
  color: var(--tafel-leise);
  font-size: .8125rem;
  transition: border-color .12s ease, color .12s ease;
}
.schritt span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schritt:hover { color: var(--tafel-tinte); border-bottom-color: var(--tafel-leise); }
.schritt--hier {
  color: var(--tafel-tinte);
  border-bottom-color: var(--akzent-dunkel);
  font-weight: 600;
}

/* ---------- Formulare ---------- */

.feld { margin-bottom: 1.5rem; }
.feld__label {
  display: block;
  font: var(--schrift-marke);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ton-leise);
  margin-bottom: .4rem;
}
.feld input[type=text], .feld input[type=number], .feld input[type=password],
.feld textarea, .feld select {
  width: 100%;
  font: inherit;
  color: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: .5rem .75rem;
}
.feld textarea { resize: vertical; line-height: 1.55; }
.feld input:focus, .feld textarea:focus, .feld select:focus {
  border-color: var(--akzent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent);
}
.feld__hilfe { font: var(--schrift-klein); color: var(--ton-leise); margin: .35rem 0 0; }
.feld__upload { display: block; font: var(--schrift-klein); color: var(--ton-leise); margin-top: .5rem; }
.feld__schalter { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; }
.feld__schalter input { width: auto; }

.zeilenform { display: flex; gap: .625rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.zeilenform input[type=text] {
  flex: 1;
  min-width: 14rem;
  font: inherit;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  padding: .5rem .75rem;
}

.abschnitt { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--linie); }
.abschnitt__kopf {
  font: var(--schrift-marke);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ton-leise);
  margin: 0 0 1rem;
}
.abschnitt--gefahr { border-top-color: #E0BDBD; }

/* Listen im Admin */

.stundenliste, .bausteinliste { list-style: none; margin: 0; padding: 0; }
.sl, .bl {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .625rem .75rem;
  margin: 0 -.75rem;
  border-bottom: 1px solid var(--linie-zart);
}
.sl__nr, .bl__symbol {
  font: var(--schrift-marke);
  color: var(--akzent);
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}
.bl__symbol { font-size: 1rem; }
.sl__titel, .bl__titel {
  flex: 1;
  text-decoration: none;
  font-weight: 550;
  min-width: 0;
}
.sl__titel:hover, .bl__titel:hover { color: var(--akzent); }
.sl__anzahl, .bl__typ {
  display: block;
  font: var(--schrift-klein);
  color: var(--ton-still);
  font-weight: 400;
}
.sl__aktionen { display: flex; gap: .5rem; flex-shrink: 0; }
.sl__aktionen a {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rund);
  color: var(--ton-still);
  text-decoration: none;
}
.sl__aktionen a:hover { background: var(--linie-zart); color: var(--tinte); }
.sl__aktionen .loeschen:hover { background: #FBE9E9; color: #B03636; }

/* Bausteintyp auswählen */

.typwahl { margin-top: 2rem; }
.typwahl__kopf {
  font: var(--schrift-marke);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ton-leise);
  margin: 0 0 .75rem;
}
.typwahl__gitter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.typ {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: center;
  text-align: center;
  padding: .875rem .5rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  text-decoration: none;
  font-size: .8125rem;
  transition: border-color .12s ease, transform .12s ease;
}
.typ:hover { border-color: var(--akzent); transform: translateY(-1px); }
.typ__symbol { font-size: 1.375rem; color: var(--akzent); line-height: 1; }

/* Vorschau im Baustein-Formular: Tafeloptik im Kleinen */
.probe {
  background: var(--tafel-grund);
  color: var(--tafel-tinte);
  border-radius: var(--rund);
  padding: 2rem;
  font-size: .9375rem;
}
.probe .b__titel {
  font-family: var(--familie-anzeige);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
}
.probe .b__rahmen { height: 22rem; border-color: var(--tafel-linie); }
.probe .hinweis, .probe .b__nachweis { color: var(--tafel-leise); }
.probe .knopf { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #0D1216; }
.probe .b__loesung, .probe .b__loesung summary { border-color: var(--tafel-linie); color: var(--akzent-dunkel); }
.probe .v__kopf, .probe .v__art { color: var(--akzent-dunkel); }
.probe .v__gefahr { background: #2A2317; border-color: #5C4A22; }
.probe .v__gefahr-kopf { color: #E0B959; }
.probe img { max-width: 100%; }

/* Tabelle */

.tabelle { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .9375rem; }
.tabelle th {
  text-align: left;
  font: var(--schrift-marke);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ton-leise);
  padding: 0 .75rem .5rem;
  border-bottom: 1px solid var(--linie);
}
.tabelle td { padding: .625rem .75rem; border-bottom: 1px solid var(--linie-zart); }
.einheit { font: var(--schrift-marke); font-size: .75rem; color: var(--ton-still); }

.hinweis { color: var(--ton-leise); }
.baustein--unbekannt { border: 1px dashed var(--linie); border-radius: var(--rund); padding: 1rem; }

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

.seite-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--tafel-grund);
  color: var(--tafel-tinte);
}
.anmeldung { width: min(22rem, 90vw); padding: 2rem 0; }
.anmeldung__marke {
  font: var(--schrift-marke);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tafel-leise);
  margin: 0 0 .5rem;
}
.anmeldung__kopf {
  font-family: var(--familie-anzeige);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -.02em;
  margin: 0 0 2rem;
}
.anmeldung .feld__label { color: var(--tafel-leise); }
.anmeldung .feld input[type=text],
.anmeldung .feld input[type=password] {
  background: #1A2128;
  border-color: var(--tafel-linie);
  color: var(--tafel-tinte);
}
.anmeldung .feld input::placeholder { color: var(--tafel-leise); }
.anmeldung .knopf { width: 100%; text-align: center; }
.anmeldung .meldung { background: #2A1A1A; border-left-color: #B03636; color: #F0C4C4; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 40rem) {
  .bahn { padding: 2rem 1rem 0; }
  .kopf__innen { padding: 0 1rem; gap: .875rem; }
  .kopf__nav { gap: .875rem; }
  .tafel__kopf, .tafel__buehne { padding-left: 1rem; padding-right: 1rem; }
  .tafel__fuss { padding: .5rem .75rem .75rem; }
  .schritt span { display: none; }
  .schritt { padding: .75rem .25rem; }
  .reihe__flaeche { grid-template-areas: "titel titel" "kurz kurz" "strecke zahl"; }
}