/* Seitengerüst: Kopfzeile, Navigation, Karten, Raster, Fuß. */

.kopf {
  background: var(--marke);
  color: var(--text-invers);
  border-bottom: var(--linie-2) solid var(--akzent);
  height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--raum-6);
}

.kopf-marke { display: flex; align-items: center; gap: var(--raum-3); min-width: 0; }
.kopf-marke img { height: 26px; width: auto; display: block; }

.kopf-marke .wortmarke {
  font-size: var(--schrift-gross);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-invers);
  text-decoration: none;
}

.kopf-marke .haus {
  font-size: var(--schrift-mikro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(242, 241, 236, 0.62);
  border-left: var(--linie-1) solid rgba(242, 241, 236, 0.28);
  padding-left: var(--raum-3);
}

.kopf-rechts { display: flex; align-items: center; gap: var(--raum-4); font-size: var(--schrift-klein); }
.kopf-rechts .benutzer { color: rgba(242, 241, 236, 0.82); }
.kopf-rechts form { margin: 0; }

.kopf-rechts .abmelden {
  background: none;
  border: var(--linie-1) solid rgba(242, 241, 236, 0.35);
  border-radius: var(--radius);
  color: var(--text-invers);
  font-family: inherit;
  font-size: var(--schrift-klein);
  padding: var(--raum-1) var(--raum-3);
  cursor: pointer;
}
.kopf-rechts .abmelden:hover { background: rgba(242, 241, 236, 0.12); }

/* --- Navigation ---------------------------------------------------------- */

.navigation {
  background: var(--flaeche);
  border-bottom: var(--linie-1) solid var(--linie-stark);
  display: flex;
  padding: 0 var(--raum-6);
  gap: var(--raum-1);
  overflow-x: auto;
}

.navigation a {
  padding: var(--raum-3) var(--raum-4);
  font-size: var(--schrift-basis);
  color: var(--text-2);
  text-decoration: none;
  border-bottom: var(--linie-2) solid transparent;
  white-space: nowrap;
}
.navigation a:hover { color: var(--text); }
.navigation a[aria-current="page"] { color: var(--marke); font-weight: 600; border-bottom-color: var(--akzent); }

/* --- Inhalt -------------------------------------------------------------- */

.inhalt { max-width: 1560px; margin: 0 auto; padding: var(--raum-5) var(--raum-6) var(--raum-7); }

.seitenkopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}
.seitenkopf .titelgruppe { min-width: 0; }
.seitenkopf .titelgruppe .marke-versal { margin-bottom: 2px; }

/* Kopfleiste mit Stand, Verfasser, Fassung — die Angaben, nach denen in der
   Organisationsabteilung als Erstes gefragt wird. */
.stammleiste {
  display: flex;
  align-items: center;
  gap: var(--raum-6);
  flex-wrap: wrap;
  background: var(--flaeche-2);
  border: var(--linie-1) solid var(--linie);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-4);
}
.stammleiste .wert { font-weight: 600; color: var(--marke); font-size: var(--schrift-klein); }
.stammleiste .rechts { margin-left: auto; display: flex; gap: var(--raum-2); align-items: center; }

.karte {
  background: var(--flaeche);
  border: var(--linie-1) solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  margin-bottom: var(--raum-4);
}
.karte:last-child { margin-bottom: 0; }

.karte-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  flex-wrap: wrap;
  margin-bottom: var(--raum-4);
}
.karte-kopf h2 { margin: 0; }

/* --- Kennzahlen ---------------------------------------------------------- */

.kennzahlen { display: flex; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-4); }

.kennzahl {
  flex: 1;
  min-width: 160px;
  background: var(--flaeche);
  border: var(--linie-1) solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4);
}
.kennzahl .zahl { font-size: var(--schrift-zahl); font-weight: 600; color: var(--marke); font-variant-numeric: tabular-nums; }
.kennzahl .bezeichnung { font-size: var(--schrift-mikro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }

/* --- Raster -------------------------------------------------------------- */

.raster { display: grid; gap: var(--raum-4); }
.raster--zwei  { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.raster--seite { grid-template-columns: minmax(260px, 320px) 1fr; align-items: start; }

@media (max-width: 900px) {
  .kopf, .navigation, .inhalt { padding-left: var(--raum-4); padding-right: var(--raum-4); }
  .raster--seite { grid-template-columns: 1fr; }
}

/* --- Anmeldeseite -------------------------------------------------------- */

.anmeldung { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--raum-5); }

.anmeldung-karte {
  width: 100%;
  max-width: 380px;
  background: var(--flaeche);
  border: var(--linie-1) solid var(--linie-stark);
  border-radius: var(--radius);
}
.anmeldung-karte .kopfband {
  background: var(--marke);
  color: var(--text-invers);
  border-bottom: var(--linie-2) solid var(--akzent);
  padding: var(--raum-4) var(--raum-5);
}
.anmeldung-karte .kopfband .wortmarke { font-size: var(--schrift-titel); font-weight: 600; }
.anmeldung-karte .rumpf { padding: var(--raum-5); }
.anmeldung-karte .fuss {
  border-top: var(--linie-1) solid var(--linie);
  padding: var(--raum-3) var(--raum-5);
  font-size: var(--schrift-mikro);
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- Fehlerseite --------------------------------------------------------- */

.fehlerseite { max-width: 560px; margin: 12vh auto; padding: 0 var(--raum-5); }
.fehlerseite .status { font-family: var(--schrift-fest); font-size: var(--schrift-zahl); color: var(--akzent); }