/* ============================================================
   ENTWURF-PANEL — Regelwerk
   Benutzt AUSSCHLIESSLICH die Variablen aus tokens.css.
   Kein #hex, keine freien px ausser 0 und Haarlinien via
   var(--strich).
   ============================================================ */

/* ---------- Grundlage ------------------------------------- */

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

/* `hidden` muss gewinnen. Sobald eine Klasse auf demselben
   Knoten `display` setzt (z. B. .anmelde-feld{display:grid}),
   schlaegt die Autorenregel die Browserregel [hidden]{display:none}
   — und ein "verstecktes" Blatt bleibt sichtbar ueber der
   Flaeche liegen. Deshalb hier mit !important, bewusst. */
[hidden] { display: none !important; }

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

body {
  margin: var(--raum-0);
  font-family: var(--schriftart);
  font-size: var(--schrift-m);
  line-height: var(--zeilen-normal);
  color: var(--text-1);
  background: var(--flaeche-grund);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Alles, was lange Bezeichner traegt, darf brechen — sonst
   sprengen Container-IDs und Domains die schmale Breite. */
h1, h2, h3, h4, p, td, th, li, dd, dt { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  margin: var(--raum-0);
  line-height: var(--zeilen-eng);
  font-weight: var(--fett-halb);
  color: var(--text-1);
}

p { margin: var(--raum-0); }

a {
  color: var(--akzent-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: none;
  box-shadow: var(--glanz-fokus);
  border-radius: var(--rund-1);
}

.nur-fuer-vorleser {
  position: absolute;
  width: var(--strich);
  height: var(--strich);
  padding: var(--raum-0);
  margin: calc(-1 * var(--strich));
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.fest { font-family: var(--schriftart-fest); font-variant-ligatures: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--zeit-1) !important; /* Begruendung: Nutzer
       hat Bewegung abbestellt; die Regel muss jede Einzelregel
       ueberstimmen, sonst laeuft irgendwo doch eine lange Animation. */
    transition-duration: var(--zeit-1) !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Gesamtaufbau ----------------------------------- */

.huelle {
  display: grid;
  grid-template-columns: var(--leiste-breit) minmax(0, 1fr);
  min-height: 100vh;
}

.huelle[hidden] { display: none; }

.bahn {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.inhalt {
  min-width: 0;
  flex: 1;
  padding: var(--raum-5);
  max-width: var(--bahn-max);
  width: 100%;
}

/* ---------- Navigationsleiste ------------------------------ */

.leiste {
  grid-column: 1;
  background: var(--flaeche-1);
  border-right: var(--strich) solid var(--linie-1);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--raum-0);
  height: 100vh;
  z-index: var(--ebene-leiste);
  min-width: 0;
}

.leiste-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  height: var(--kopf-hoehe);
  padding: var(--raum-0) var(--raum-4);
  border-bottom: var(--strich) solid var(--linie-1);
  flex: none;
}

.zeichen {
  width: var(--raum-6);
  height: var(--raum-6);
  border-radius: var(--rund-2);
  background: linear-gradient(140deg, var(--akzent), var(--iris));
  color: var(--text-auf-akzent);
  display: grid;
  place-items: center;
  font-weight: var(--fett-voll);
  font-size: var(--schrift-m);
  flex: none;
}

.wortmarke {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--zeilen-eng);
}
.wortmarke b {
  font-size: var(--schrift-m);
  font-weight: var(--fett-halb);
  letter-spacing: var(--sperrung-weit);
  white-space: nowrap;
}
.wortmarke span {
  font-size: var(--schrift-xs);
  color: var(--text-3);
  white-space: nowrap;
}

.leiste-rumpf {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--raum-3) var(--raum-3) var(--raum-5);
  min-width: 0;
}

.leiste-fuss {
  flex: none;
  border-top: var(--strich) solid var(--linie-1);
  padding: var(--raum-3);
}

.bereich-titel {
  font-size: var(--schrift-xs);
  font-weight: var(--fett-halb);
  letter-spacing: var(--sperrung-weit);
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--raum-4) var(--raum-3) var(--raum-2);
}

.nav-punkt {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  min-height: var(--tippziel);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  color: var(--text-2);
  font-size: var(--schrift-m);
  font-weight: var(--fett-mittel);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--zeit-1) var(--kurve),
              color var(--zeit-1) var(--kurve);
  min-width: 0;
}
.nav-punkt:hover { background: var(--flaeche-ein); color: var(--text-1); text-decoration: none; }
.nav-punkt[aria-current="page"] {
  background: var(--akzent-leise);
  color: var(--akzent-text);
  font-weight: var(--fett-halb);
}
.nav-punkt .bild { flex: none; color: currentColor; }
.nav-punkt .wort {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-punkt .zahl {
  margin-left: auto;
  font-size: var(--schrift-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  background: var(--flaeche-leise);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-voll);
  padding: var(--raum-0) var(--raum-2);
  flex: none;
}

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

.kopf {
  position: sticky;
  top: var(--raum-0);
  z-index: var(--ebene-kopf);
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  height: var(--kopf-hoehe);
  padding: var(--raum-0) var(--raum-5);
  background: var(--flaeche-1);
  border-bottom: var(--strich) solid var(--linie-1);
  min-width: 0;
}

.brotkrume {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-width: 0;
  font-size: var(--schrift-m);
  color: var(--text-3);
  overflow: hidden;
}
.brotkrume ol {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  list-style: none;
  margin: var(--raum-0);
  padding: var(--raum-0);
  min-width: 0;
}
.brotkrume li {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-width: 0;
  white-space: nowrap;
  /* Ohne diese Klammer laeuft der Text bei Platznot aus seinem
     Kasten heraus und legt sich ueber die naechste Stufe. */
  overflow: hidden;
  text-overflow: ellipsis;
}
.brotkrume li:not(:last-child)::after {
  content: "/";
  color: var(--text-aus);
}
.brotkrume a { color: var(--text-3); }
.brotkrume li:last-child {
  color: var(--text-1);
  font-weight: var(--fett-halb);
  overflow: hidden;
  text-overflow: ellipsis;
}

.kopf-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  flex: none;
}

/* Suchknopf, der die Befehlspalette oeffnet */
.suchknopf {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: var(--raum-0) var(--raum-3);
  background: var(--flaeche-leise);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-2);
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--schrift-m);
  min-width: 0;
  transition: border-color var(--zeit-1) var(--kurve),
              background var(--zeit-1) var(--kurve);
}
.suchknopf:hover { border-color: var(--linie-stark); background: var(--flaeche-ein); }
.suchknopf .wort {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taste {
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-xs);
  padding: var(--raum-0) var(--raum-1);
  border: var(--strich) solid var(--linie-2);
  border-bottom-width: calc(var(--strich) * 2);
  border-radius: var(--rund-1);
  background: var(--flaeche-1);
  color: var(--text-3);
  flex: none;
}

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: var(--raum-0) var(--raum-4);
  border-radius: var(--rund-2);
  border: var(--strich) solid transparent;
  font-size: var(--schrift-m);
  font-weight: var(--fett-halb);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--zeit-1) var(--kurve),
              border-color var(--zeit-1) var(--kurve),
              color var(--zeit-1) var(--kurve),
              transform var(--zeit-1) var(--kurve);
  background: var(--flaeche-1);
  color: var(--text-1);
  border-color: var(--linie-2);
}
.knopf:hover { background: var(--flaeche-ein); text-decoration: none; }
.knopf:active { transform: translateY(var(--strich)); }
.knopf:disabled,
.knopf[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.knopf[data-art="haupt"] {
  background: var(--akzent);
  color: var(--text-auf-akzent);
  border-color: var(--akzent);
}
.knopf[data-art="haupt"]:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); }

.knopf[data-art="stumm"] {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.knopf[data-art="stumm"]:hover { background: var(--flaeche-ein); color: var(--text-1); }

.knopf[data-art="gefahr"] {
  background: var(--st-fehler-feld);
  color: var(--st-fehler-text);
  border-color: var(--st-fehler-linie);
}
.knopf[data-art="gefahr"]:hover { background: var(--st-fehler-linie); }

.knopf[data-gross] {
  min-height: calc(var(--tippziel) + var(--raum-2));
  padding: var(--raum-0) var(--raum-5);
  font-size: var(--schrift-basis);
  width: 100%;
}

/* Knopf, der nur ein Sinnbild traegt */
.bildknopf {
  display: inline-grid;
  place-items: center;
  width: var(--tippziel);
  height: var(--tippziel);
  border-radius: var(--rund-2);
  border: var(--strich) solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  flex: none;
  transition: background var(--zeit-1) var(--kurve), color var(--zeit-1) var(--kurve);
}
.bildknopf:hover { background: var(--flaeche-ein); color: var(--text-1); }
.bildknopf[aria-pressed="true"] { background: var(--akzent-leise); color: var(--akzent-text); }

/* Ladepunkt im Knopf */
.knopf[data-laedt="ja"] { pointer-events: none; }
.kreisel {
  width: var(--raum-4);
  height: var(--raum-4);
  border-radius: var(--rund-voll);
  border: calc(var(--strich) * 2) solid currentColor;
  border-right-color: transparent;
  animation: dreh var(--zeit-4) linear infinite;
  flex: none;
}
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- Karten ----------------------------------------- */

.karte {
  background: var(--flaeche-1);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-3);
  box-shadow: var(--schatten-1);
  min-width: 0;
}

.karte-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-4) var(--raum-5);
  border-bottom: var(--strich) solid var(--linie-1);
  min-width: 0;
  flex-wrap: wrap;
}
.karte-kopf h2, .karte-kopf h3 {
  font-size: var(--schrift-l);
  min-width: 0;
}
.karte-kopf .neben {
  font-size: var(--schrift-s);
  color: var(--text-3);
  font-weight: var(--fett-normal);
}
.karte-kopf .rechts { margin-left: auto; display: flex; gap: var(--raum-2); flex-wrap: wrap; }

.karte-rumpf { padding: var(--raum-5); min-width: 0; }
.karte-rumpf[data-eng] { padding: var(--raum-3); }
.karte-rumpf[data-null] { padding: var(--raum-0); }

.karte-fuss {
  padding: var(--raum-3) var(--raum-5);
  border-top: var(--strich) solid var(--linie-1);
  background: var(--flaeche-2);
  border-radius: var(--rund-0, 0) var(--rund-0, 0) var(--rund-3) var(--rund-3);
  font-size: var(--schrift-s);
  color: var(--text-3);
}

/* ---------- Seitenkopf ------------------------------------- */

.seitenkopf {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-4);
  flex-wrap: wrap;
  margin-bottom: var(--raum-5);
  min-width: 0;
}
.seitenkopf h1 {
  font-size: var(--schrift-2xl);
  letter-spacing: calc(var(--sperrung-weit) * -0.5);
}
.seitenkopf .unterzeile {
  color: var(--text-3);
  font-size: var(--schrift-m);
  margin-top: var(--raum-1);
}
.seitenkopf .werkzeuge {
  margin-left: auto;
  display: flex;
  gap: var(--raum-2);
  flex-wrap: wrap;
}

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

.raster {
  display: grid;
  gap: var(--raum-4);
  min-width: 0;
}
.raster[data-spalten="auto"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.raster[data-spalten="breit"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}
.raster[data-spalten="2"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.stapel { display: flex; flex-direction: column; gap: var(--raum-4); min-width: 0; }
.stapel[data-eng] { gap: var(--raum-2); }
.reihe {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  flex-wrap: wrap;
  min-width: 0;
}

/* ---------- Zustandsmarken --------------------------------- */

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-1) var(--raum-3);
  border-radius: var(--rund-voll);
  font-size: var(--schrift-xs);
  font-weight: var(--fett-halb);
  border: var(--strich) solid var(--st-aus-linie);
  background: var(--st-aus-feld);
  color: var(--st-aus-text);
  white-space: nowrap;
  flex: none;
}
.marke .punkt {
  width: var(--raum-2);
  height: var(--raum-2);
  border-radius: var(--rund-voll);
  background: var(--st-aus-punkt);
  flex: none;
}

.marke[data-st="laeuft"] {
  background: var(--st-laeuft-feld);
  color: var(--st-laeuft-text);
  border-color: var(--st-laeuft-linie);
}
.marke[data-st="laeuft"] .punkt {
  background: var(--st-laeuft-punkt);
  animation: pulsen calc(var(--zeit-4) * 5) var(--kurve) infinite;
}
@keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.marke[data-st="startet"] {
  background: var(--st-startet-feld);
  color: var(--st-startet-text);
  border-color: var(--st-startet-linie);
}
.marke[data-st="startet"] .punkt { background: var(--st-startet-punkt); }

.marke[data-st="fehler"] {
  background: var(--st-fehler-feld);
  color: var(--st-fehler-text);
  border-color: var(--st-fehler-linie);
}
.marke[data-st="fehler"] .punkt { background: var(--st-fehler-punkt); }

.marke[data-st="info"] {
  background: var(--st-info-feld);
  color: var(--st-info-text);
  border-color: var(--st-info-linie);
}
.marke[data-st="info"] .punkt { background: var(--st-info-punkt); }

.marke[data-st="entwurf"] {
  background: var(--iris-leise);
  color: var(--iris);
  border-color: var(--iris-linie);
}
.marke[data-st="entwurf"] .punkt { background: var(--iris); }

/* ---------- Auslastungsbalken ------------------------------ */

.mess {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  min-width: 0;
}
.mess-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
  font-size: var(--schrift-xs);
  color: var(--text-3);
  min-width: 0;
}
.mess-kopf b {
  color: var(--text-1);
  font-weight: var(--fett-halb);
  font-variant-numeric: tabular-nums;
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-s);
}
.balken {
  height: var(--raum-2);
  border-radius: var(--rund-voll);
  background: var(--balken-bett);
  overflow: hidden;
}
.balken i {
  display: block;
  height: 100%;
  border-radius: var(--rund-voll);
  background: var(--balken-gut);
  transition: width var(--zeit-3) var(--kurve);
}
.balken[data-last="mittel"] i { background: var(--balken-mittel); }
.balken[data-last="hoch"] i { background: var(--balken-hoch); }

/* ---------- Tabellen — scrollen INNEN ---------------------- */

.tabellen-huelle {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--rund-3);
}

.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-m);
  min-width: max-content;
}
.tabelle th {
  text-align: left;
  font-size: var(--schrift-xs);
  font-weight: var(--fett-halb);
  letter-spacing: var(--sperrung-weit);
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: var(--strich) solid var(--linie-2);
  background: var(--flaeche-2);
  white-space: nowrap;
  position: sticky;
  top: var(--raum-0);
}
.tabelle td {
  padding: var(--raum-3) var(--raum-4);
  border-bottom: var(--strich) solid var(--linie-1);
  vertical-align: middle;
  white-space: nowrap;
}
.tabelle tbody tr { cursor: pointer; transition: background var(--zeit-1) var(--kurve); }
.tabelle tbody tr:hover { background: var(--flaeche-ein); }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle td .mess { min-width: 8rem; }

.zelle-haupt {
  display: flex;
  flex-direction: column;
  gap: var(--raum-0);
  min-width: 0;
}
.zelle-haupt b { font-weight: var(--fett-halb); color: var(--text-1); }
.zelle-haupt span { font-size: var(--schrift-xs); color: var(--text-3); }

/* ---------- Container als Karten (schmale Breiten) --------- */

.container-karte {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-4);
  background: var(--flaeche-1);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-3);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: border-color var(--zeit-1) var(--kurve),
              box-shadow var(--zeit-2) var(--kurve),
              transform var(--zeit-2) var(--kurve);
  min-width: 0;
}
.container-karte:hover {
  border-color: var(--akzent-linie);
  box-shadow: var(--schatten-2);
  transform: translateY(calc(-1 * var(--strich)));
  text-decoration: none;
}
.container-karte .kk-kopf {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  min-width: 0;
}
.container-karte .kk-titel { min-width: 0; flex: 1; }
.container-karte .kk-titel b {
  display: block;
  font-size: var(--schrift-basis);
  font-weight: var(--fett-halb);
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container-karte .kk-titel span {
  font-size: var(--schrift-xs);
  color: var(--text-3);
  font-family: var(--schriftart-fest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.container-karte .kk-messwerte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 7rem), 1fr));
  gap: var(--raum-3);
}
.container-karte .kk-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding-top: var(--raum-3);
  border-top: var(--strich) solid var(--linie-1);
  font-size: var(--schrift-xs);
  color: var(--text-3);
  font-family: var(--schriftart-fest);
  min-width: 0;
}
.container-karte .kk-fuss .adresse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Art-Auswahl (Game / VPS / Web / Datenbank) ----- */

.art-kachel {
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  padding: var(--raum-5);
  border-radius: var(--rund-4);
  border: var(--strich) solid var(--linie-1);
  background: var(--flaeche-1);
  cursor: pointer;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: border-color var(--zeit-2) var(--kurve),
              box-shadow var(--zeit-2) var(--kurve),
              transform var(--zeit-2) var(--kurve);
  min-width: 0;
}
.art-kachel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--raum-1);
  background: var(--akzent);
  opacity: 0;
  transition: opacity var(--zeit-2) var(--kurve);
}
.art-kachel:hover {
  border-color: var(--akzent-linie);
  box-shadow: var(--schatten-3);
  transform: translateY(calc(-1 * var(--raum-1)));
  text-decoration: none;
}
.art-kachel:hover::before { opacity: 1; }
.art-kachel[aria-current="true"] {
  border-color: var(--akzent);
  box-shadow: var(--glanz-fokus);
}
.art-kachel[aria-current="true"]::before { opacity: 1; }

.art-bild {
  width: var(--raum-7);
  height: var(--raum-7);
  border-radius: var(--rund-3);
  display: grid;
  place-items: center;
  background: var(--akzent-leise);
  color: var(--akzent-text);
  flex: none;
}
.art-kachel h3 { font-size: var(--schrift-l); }
.art-kachel .beschreibung {
  color: var(--text-3);
  font-size: var(--schrift-m);
  line-height: var(--zeilen-normal);
}
.art-kachel .art-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-top: auto;
  padding-top: var(--raum-3);
  border-top: var(--strich) solid var(--linie-1);
  font-size: var(--schrift-s);
  min-width: 0;
}
.art-kachel .preis {
  font-family: var(--schriftart-fest);
  font-weight: var(--fett-halb);
  color: var(--text-1);
}
.art-kachel .preis small {
  font-weight: var(--fett-normal);
  color: var(--text-3);
  font-size: var(--schrift-xs);
}

/* ---------- Reiter ----------------------------------------- */

.reiter-huelle {
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: var(--strich) solid var(--linie-1);
  margin-bottom: var(--raum-5);
  max-width: 100%;
}
.reiter {
  display: flex;
  gap: var(--raum-1);
  min-width: max-content;
  padding-bottom: var(--raum-0);
}
.reiter button {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: var(--raum-0) var(--raum-4);
  background: none;
  border: none;
  border-bottom: calc(var(--strich) * 2) solid transparent;
  color: var(--text-3);
  font-size: var(--schrift-m);
  font-weight: var(--fett-mittel);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--zeit-1) var(--kurve),
              border-color var(--zeit-1) var(--kurve);
}
.reiter button:hover { color: var(--text-1); }
.reiter button[aria-selected="true"] {
  color: var(--akzent-text);
  border-bottom-color: var(--akzent);
  font-weight: var(--fett-halb);
}

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

.formzeile {
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  min-width: 0;
}
.etikett {
  font-size: var(--schrift-m);
  font-weight: var(--fett-halb);
  color: var(--text-1);
}
.hinweis-klein {
  font-size: var(--schrift-s);
  color: var(--text-3);
}

.feld {
  width: 100%;
  min-height: var(--tippziel);
  padding: var(--raum-2) var(--raum-3);
  /* 16px Grundschrift: verhindert das Hineinzoomen auf iOS */
  font-size: var(--schrift-basis);
  background: var(--flaeche-1);
  border: var(--strich) solid var(--linie-2);
  border-radius: var(--rund-2);
  color: var(--text-1);
  transition: border-color var(--zeit-1) var(--kurve),
              box-shadow var(--zeit-1) var(--kurve);
}
.feld::placeholder { color: var(--text-aus); }
.feld:hover { border-color: var(--linie-stark); }
.feld:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: var(--glanz-fokus);
}
.feld[aria-invalid="true"] {
  border-color: var(--st-fehler-punkt);
}
.feld[aria-invalid="true"]:focus { box-shadow: var(--glanz-fehler); }
textarea.feld { min-height: calc(var(--tippziel) * 3); resize: vertical; }
select.feld { cursor: pointer; }

.feld-mit-knopf {
  display: flex;
  gap: var(--raum-2);
  min-width: 0;
}
.feld-mit-knopf .feld { flex: 1; min-width: 0; }

/* ---------- Meldungsflaechen (Zustaende) ------------------- */

.hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-4);
  border-radius: var(--rund-3);
  border: var(--strich) solid var(--st-info-linie);
  background: var(--st-info-feld);
  color: var(--st-info-text);
  font-size: var(--schrift-m);
  min-width: 0;
}
.hinweis .bild { flex: none; margin-top: var(--raum-0); }
.hinweis .text { min-width: 0; }
.hinweis b { display: block; font-weight: var(--fett-halb); margin-bottom: var(--raum-1); }
.hinweis[data-st="fehler"] {
  border-color: var(--st-fehler-linie);
  background: var(--st-fehler-feld);
  color: var(--st-fehler-text);
}
.hinweis[data-st="warnung"] {
  border-color: var(--st-startet-linie);
  background: var(--st-startet-feld);
  color: var(--st-startet-text);
}
.hinweis[data-st="gesperrt"] {
  border-color: var(--iris-linie);
  background: var(--iris-leise);
  color: var(--iris);
}
.hinweis[data-st="erfolg"] {
  border-color: var(--st-laeuft-linie);
  background: var(--st-laeuft-feld);
  color: var(--st-laeuft-text);
}
.hinweis .beiwerk {
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-xs);
  opacity: 0.85;
  display: block;
  margin-top: var(--raum-2);
  overflow-wrap: anywhere;
}

/* Leerer Zustand */
.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--raum-3);
  padding: var(--raum-8) var(--raum-5);
  color: var(--text-3);
}
.leer .bild {
  width: var(--raum-8);
  height: var(--raum-8);
  border-radius: var(--rund-4);
  display: grid;
  place-items: center;
  background: var(--flaeche-leise);
  border: var(--strich) solid var(--linie-1);
  color: var(--text-aus);
}
.leer h3 { font-size: var(--schrift-l); color: var(--text-1); }
.leer p { max-width: 34rem; font-size: var(--schrift-m); }

/* Ladezustand */
.schimmer {
  background: linear-gradient(
    90deg,
    var(--flaeche-leise) 25%,
    var(--flaeche-ein) 50%,
    var(--flaeche-leise) 75%
  );
  background-size: 400% 100%;
  animation: wandern calc(var(--zeit-4) * 3) var(--kurve) infinite;
  border-radius: var(--rund-2);
}
@keyframes wandern {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}
.schimmer-zeile { height: var(--raum-4); }
.schimmer-block { height: var(--raum-8); }

/* ---------- Konsole ---------------------------------------- */

.konsole {
  background: var(--flaeche-fest);
  color: var(--text-auf-fest);
  border-radius: var(--rund-3);
  border: var(--strich) solid var(--linie-2);
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-s);
  line-height: var(--zeilen-weit);
  padding: var(--raum-4);
  height: clamp(18rem, 46vh, 34rem);
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.konsole .zeit { color: var(--text-3); }
.konsole .stufe-info  { color: var(--st-info-punkt); }
.konsole .stufe-warn  { color: var(--st-startet-punkt); }
.konsole .stufe-fehler{ color: var(--st-fehler-punkt); }
.konsole .stufe-ok    { color: var(--st-laeuft-punkt); }

.konsole-eingabe {
  display: flex;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
  min-width: 0;
}
.konsole-eingabe .feld {
  font-family: var(--schriftart-fest);
  flex: 1;
  min-width: 0;
}

/* ---------- Dateiliste ------------------------------------- */

.datei-zeile {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  border-radius: var(--rund-2);
  min-height: var(--tippziel);
  cursor: pointer;
  border: var(--strich) solid transparent;
  min-width: 0;
  width: 100%;
  background: none;
  text-align: left;
}
.datei-zeile:hover { background: var(--flaeche-ein); }
.datei-zeile .bild { flex: none; color: var(--text-3); }
.datei-zeile .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-s);
}
.datei-zeile .groesse {
  font-size: var(--schrift-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.pfadleiste {
  display: flex;
  align-items: center;
  gap: var(--raum-1);
  flex-wrap: wrap;
  font-family: var(--schriftart-fest);
  font-size: var(--schrift-s);
  color: var(--text-3);
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-leise);
  border-radius: var(--rund-2);
  min-width: 0;
}
.pfadleiste button {
  background: none;
  border: none;
  color: var(--akzent-text);
  cursor: pointer;
  padding: var(--raum-0) var(--raum-1);
  font: inherit;
  min-height: var(--raum-5);
}

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

.kennzahl {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  padding: var(--raum-4);
  background: var(--flaeche-1);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-3);
  min-width: 0;
}
.kennzahl .titel {
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
  color: var(--text-3);
  font-weight: var(--fett-halb);
}
.kennzahl .wert {
  font-size: var(--schrift-2xl);
  font-weight: var(--fett-halb);
  font-variant-numeric: tabular-nums;
  color: var(--text-1);
  line-height: var(--zeilen-eng);
}
.kennzahl .wert small {
  font-size: var(--schrift-m);
  color: var(--text-3);
  font-weight: var(--fett-normal);
}
.kennzahl .fuss { font-size: var(--schrift-xs); color: var(--text-3); }

/* Beschreibungspaare */
.paare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--raum-4);
  margin: var(--raum-0);
  min-width: 0;
}
.paare > div { min-width: 0; }
.paare dt {
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
  color: var(--text-3);
  font-weight: var(--fett-halb);
  margin-bottom: var(--raum-1);
}
.paare dd {
  margin: var(--raum-0);
  font-size: var(--schrift-m);
  color: var(--text-1);
  font-family: var(--schriftart-fest);
  overflow-wrap: anywhere;
}

/* ---------- Schleier, Dialog ------------------------------- */

.schleier {
  position: fixed;
  inset: 0;
  background: var(--schleier);
  z-index: var(--ebene-schleier);
  animation: einblenden var(--zeit-2) var(--kurve);
}
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  position: fixed;
  inset: 0;
  z-index: var(--ebene-dialog);
  display: grid;
  place-items: center;
  padding: var(--raum-4);
  pointer-events: none;
}
.dialog-blatt {
  pointer-events: auto;
  width: min(100%, 34rem);
  max-height: calc(100vh - var(--raum-8));
  overflow: auto;
  background: var(--flaeche-3);
  border: var(--strich) solid var(--linie-2);
  border-radius: var(--rund-4);
  box-shadow: var(--schatten-4);
  animation: auftauchen var(--zeit-3) var(--kurve);
}
@keyframes auftauchen {
  from { opacity: 0; transform: translateY(var(--raum-5)) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Befehlspalette --------------------------------- */

.palette {
  position: fixed;
  inset: 0;
  z-index: var(--ebene-palette);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--raum-4);
  padding-top: clamp(var(--raum-5), 10vh, var(--raum-8));
  pointer-events: none;
}
.palette-blatt {
  pointer-events: auto;
  width: min(100%, 44rem);
  max-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
  background: var(--flaeche-3);
  border: var(--strich) solid var(--linie-2);
  border-radius: var(--rund-4);
  box-shadow: var(--schatten-4);
  overflow: hidden;
  animation: auftauchen var(--zeit-2) var(--kurve);
  min-width: 0;
}
.palette-kopf {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-bottom: var(--strich) solid var(--linie-1);
  flex: none;
}
.palette-kopf .bild { color: var(--text-3); flex: none; }
.palette-kopf input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: var(--schrift-basis);
  min-height: var(--tippziel);
  color: var(--text-1);
}
.palette-kopf input:focus { outline: none; box-shadow: none; }

.palette-liste {
  overflow-y: auto;
  padding: var(--raum-2);
  min-height: 0;
}
.palette-gruppe {
  font-size: var(--schrift-xs);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-weit);
  color: var(--text-3);
  font-weight: var(--fett-halb);
  padding: var(--raum-3) var(--raum-3) var(--raum-1);
}
.palette-treffer {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  width: 100%;
  min-height: var(--tippziel);
  padding: var(--raum-2) var(--raum-3);
  border: none;
  background: none;
  border-radius: var(--rund-2);
  cursor: pointer;
  text-align: left;
  color: var(--text-1);
  min-width: 0;
}
.palette-treffer:hover,
.palette-treffer[data-gewaehlt="ja"] { background: var(--akzent-leise); }
.palette-treffer .bild { flex: none; color: var(--text-3); }
.palette-treffer .beschriftung { flex: 1; min-width: 0; }
.palette-treffer .beschriftung b {
  display: block;
  font-size: var(--schrift-m);
  font-weight: var(--fett-mittel);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-treffer .beschriftung span {
  display: block;
  font-size: var(--schrift-xs);
  color: var(--text-3);
  font-family: var(--schriftart-fest);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-treffer .weg {
  font-size: var(--schrift-xs);
  color: var(--text-aus);
  flex: none;
  white-space: nowrap;
}
.palette-fuss {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
  padding: var(--raum-2) var(--raum-4);
  border-top: var(--strich) solid var(--linie-1);
  background: var(--flaeche-2);
  font-size: var(--schrift-xs);
  color: var(--text-3);
  flex: none;
  flex-wrap: wrap;
}

/* ---------- Meldungen (Toast) ------------------------------ */

.meldungen {
  position: fixed;
  right: var(--raum-4);
  bottom: var(--raum-4);
  left: var(--raum-4);
  z-index: var(--ebene-meldung);
  display: flex;
  flex-direction: column;
  gap: var(--raum-2);
  align-items: flex-end;
  pointer-events: none;
}
.meldung {
  pointer-events: auto;
  width: min(100%, 26rem);
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--rund-3);
  background: var(--flaeche-3);
  border: var(--strich) solid var(--linie-2);
  box-shadow: var(--schatten-3);
  font-size: var(--schrift-m);
  animation: hereinschieben var(--zeit-3) var(--kurve);
  min-width: 0;
}
@keyframes hereinschieben {
  from { opacity: 0; transform: translateY(var(--raum-4)); }
  to   { opacity: 1; transform: none; }
}
.meldung .bild { flex: none; }
.meldung .text { min-width: 0; flex: 1; }
.meldung b { display: block; font-weight: var(--fett-halb); }
.meldung small { color: var(--text-3); font-size: var(--schrift-xs); overflow-wrap: anywhere; }
.meldung[data-st="erfolg"] { border-left: var(--raum-1) solid var(--st-laeuft-punkt); }
.meldung[data-st="fehler"] { border-left: var(--raum-1) solid var(--st-fehler-punkt); }
.meldung[data-st="gesperrt"] { border-left: var(--raum-1) solid var(--iris); }
.meldung[data-st="info"] { border-left: var(--raum-1) solid var(--st-info-punkt); }
.meldung .bild[data-st="erfolg"] { color: var(--st-laeuft-punkt); }
.meldung .bild[data-st="fehler"] { color: var(--st-fehler-punkt); }
.meldung .bild[data-st="gesperrt"] { color: var(--iris); }
.meldung .bild[data-st="info"] { color: var(--st-info-punkt); }

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

.anmelde-seite {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--flaeche-grund);
}
.anmelde-seite[hidden] { display: none; }

.anmelde-schau {
  display: none;
  position: relative;
  padding: var(--raum-8) var(--raum-7);
  background:
    radial-gradient(circle at 18% 22%, var(--akzent-leise), transparent 55%),
    radial-gradient(circle at 82% 78%, var(--iris-leise), transparent 55%),
    var(--flaeche-1);
  border-right: var(--strich) solid var(--linie-1);
  flex-direction: column;
  justify-content: center;
  gap: var(--raum-5);
  min-width: 0;
}
.anmelde-schau h2 {
  font-size: var(--schrift-3xl);
  letter-spacing: calc(var(--sperrung-weit) * -1);
  max-width: 22ch;
}
.anmelde-schau p { color: var(--text-2); font-size: var(--schrift-l); max-width: 46ch; }
.schau-punkte { display: flex; flex-direction: column; gap: var(--raum-4); margin-top: var(--raum-4); }
.schau-punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--raum-3);
  min-width: 0;
}
.schau-punkt .bild {
  flex: none;
  width: var(--raum-6);
  height: var(--raum-6);
  border-radius: var(--rund-2);
  display: grid;
  place-items: center;
  background: var(--flaeche-1);
  border: var(--strich) solid var(--linie-1);
  color: var(--akzent-text);
}
.schau-punkt b { display: block; font-weight: var(--fett-halb); font-size: var(--schrift-m); }
.schau-punkt span { color: var(--text-3); font-size: var(--schrift-m); }

.anmelde-feld {
  display: grid;
  place-items: center;
  padding: var(--raum-5);
  min-width: 0;
}
.anmelde-blatt {
  width: min(100%, 26rem);
  display: flex;
  flex-direction: column;
  gap: var(--raum-5);
  min-width: 0;
}
.anmelde-marke {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
}

/* ---------- Sperr-Hinweis (403 aus dem Entwurf) ------------ */

.sperr-band {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-5);
  background: var(--iris-leise);
  border-bottom: var(--strich) solid var(--iris-linie);
  color: var(--iris);
  font-size: var(--schrift-s);
  font-weight: var(--fett-mittel);
  min-width: 0;
}
.sperr-band .bild { flex: none; }
.sperr-band .text { min-width: 0; }
.sperr-band button {
  margin-left: auto;
  flex: none;
}

/* ---------- Vorschau-Kennzeichnung ------------------------- */

.gestellt-marke {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-size: var(--schrift-xs);
  font-weight: var(--fett-halb);
  color: var(--st-startet-text);
  background: var(--st-startet-feld);
  border: var(--strich) solid var(--st-startet-linie);
  border-radius: var(--rund-voll);
  padding: var(--raum-0) var(--raum-2);
  white-space: nowrap;
  flex: none;
}

/* ---------- Nutzerknopf ------------------------------------ */

.nutzer-knopf {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  min-height: var(--tippziel);
  padding: var(--raum-1) var(--raum-2);
  border-radius: var(--rund-2);
  border: var(--strich) solid transparent;
  background: none;
  cursor: pointer;
  min-width: 0;
  transition: background var(--zeit-1) var(--kurve);
}
.nutzer-knopf:hover { background: var(--flaeche-ein); }
.kringel {
  width: var(--raum-6);
  height: var(--raum-6);
  border-radius: var(--rund-voll);
  display: grid;
  place-items: center;
  background: var(--akzent);
  color: var(--text-auf-akzent);
  font-size: var(--schrift-s);
  font-weight: var(--fett-halb);
  flex: none;
  text-transform: uppercase;
}
.nutzer-knopf .wer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--zeilen-eng);
  text-align: left;
}
.nutzer-knopf .wer b {
  font-size: var(--schrift-s);
  font-weight: var(--fett-halb);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nutzer-knopf .wer span {
  font-size: var(--schrift-xs);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Klappmenue */
.klapp {
  position: absolute;
  right: var(--raum-5);
  top: var(--kopf-hoehe);
  z-index: var(--ebene-dialog);
  width: min(calc(100vw - var(--raum-8)), 17rem);
  background: var(--flaeche-3);
  border: var(--strich) solid var(--linie-2);
  border-radius: var(--rund-3);
  box-shadow: var(--schatten-3);
  padding: var(--raum-2);
  animation: auftauchen var(--zeit-2) var(--kurve);
}
.klapp-kopf {
  padding: var(--raum-3);
  border-bottom: var(--strich) solid var(--linie-1);
  margin-bottom: var(--raum-2);
  min-width: 0;
}
.klapp-kopf b { display: block; font-size: var(--schrift-m); overflow-wrap: anywhere; }
.klapp-kopf span { font-size: var(--schrift-xs); color: var(--text-3); overflow-wrap: anywhere; }

/* Themenwahl */
.thema-wahl {
  display: flex;
  gap: var(--raum-1);
  padding: var(--raum-1);
  background: var(--flaeche-leise);
  border: var(--strich) solid var(--linie-1);
  border-radius: var(--rund-2);
}
.thema-wahl button {
  flex: 1;
  min-height: calc(var(--tippziel) - var(--raum-2));
  border: none;
  background: none;
  border-radius: var(--rund-1);
  color: var(--text-3);
  cursor: pointer;
  font-size: var(--schrift-xs);
  font-weight: var(--fett-mittel);
  display: grid;
  place-items: center;
  gap: var(--raum-1);
  transition: background var(--zeit-1) var(--kurve), color var(--zeit-1) var(--kurve);
}
.thema-wahl button[aria-pressed="true"] {
  background: var(--flaeche-1);
  color: var(--text-1);
  box-shadow: var(--schatten-1);
}

/* ---------- Zeitachse / Verlauf ---------------------------- */

.achse { display: flex; flex-direction: column; gap: var(--raum-0); }
.achse-punkt {
  display: flex;
  gap: var(--raum-3);
  padding-bottom: var(--raum-4);
  position: relative;
  min-width: 0;
}
.achse-punkt::before {
  content: "";
  position: absolute;
  left: calc(var(--raum-2) - var(--strich));
  top: var(--raum-5);
  bottom: var(--raum-0);
  width: var(--strich);
  background: var(--linie-2);
}
.achse-punkt:last-child::before { display: none; }
.achse-punkt .knoten {
  width: var(--raum-4);
  height: var(--raum-4);
  border-radius: var(--rund-voll);
  background: var(--flaeche-1);
  border: calc(var(--strich) * 2) solid var(--linie-stark);
  flex: none;
  margin-top: var(--raum-1);
  z-index: 1;
}
.achse-punkt[data-st="erfolg"] .knoten { border-color: var(--st-laeuft-punkt); }
.achse-punkt[data-st="fehler"] .knoten { border-color: var(--st-fehler-punkt); }
.achse-punkt .inhalt-zeile { min-width: 0; flex: 1; }
.achse-punkt b { font-size: var(--schrift-m); font-weight: var(--fett-halb); }
.achse-punkt span { display: block; font-size: var(--schrift-xs); color: var(--text-3); }

/* ---------- Trenner ---------------------------------------- */

.trenner {
  height: var(--strich);
  background: var(--linie-1);
  border: none;
  margin: var(--raum-4) var(--raum-0);
}

/* ---------- Off-Canvas-Schublade --------------------------- */

.schublade-knopf { display: none; }

/* ============================================================
   BREITEN
   1440 (Schreibtisch) ist die Grundform oben.
   Ab hier: 834 (iPad hoch) und 390 (Handy).
   ============================================================ */

/* --- unter 1100px: enger, aber die Leiste behaelt ihre
       Beschriftung. Eine Leiste aus abgeschnittenen Woertern
       („Übers…“, „Game…“) ist als Admin-Menue wertlos; 268 px
       passen bei 834 px Breite ohne Weiteres. -------------- */
@media (max-width: 1099px) {
  .inhalt { padding: var(--raum-4); }
  .kopf { padding: var(--raum-0) var(--raum-4); }
  .klapp { right: var(--raum-4); }
  .sperr-band { padding: var(--raum-2) var(--raum-4); }

  /* Neben dem Suchfeld bleibt zu wenig Platz fuer den ganzen
     Pfad. Es bleibt die Stufe, auf der man steht; zurueck geht
     es ueber die Leiste und den Knopf „Zur Liste“. */
  .brotkrume li:not(:last-child) { display: none; }
}

/* --- unter 720px: Handy — Leiste wird Schublade ------------ */
@media (max-width: 719px) {
  .huelle { grid-template-columns: minmax(0, 1fr); }

  .schublade-knopf { display: inline-grid; }

  .leiste {
    position: fixed;
    top: var(--raum-0);
    left: var(--raum-0);
    bottom: var(--raum-0);
    width: min(var(--leiste-breit), calc(100vw - var(--raum-7)));
    height: 100vh;
    /* Nach LINKS geschoben: erzeugt in LTR keinen waagerechten
       Ueberlauf und damit keine Scrollleiste. */
    transform: translateX(-100%);
    transition: transform var(--zeit-3) var(--kurve);
    box-shadow: none;
    visibility: hidden;
    z-index: var(--ebene-dialog);
  }
  .leiste[data-offen="ja"] {
    transform: translateX(0);
    visibility: visible;
    box-shadow: var(--schatten-4);
  }

  .inhalt { padding: var(--raum-4) var(--raum-3) var(--raum-7); }
  .kopf { padding: var(--raum-0) var(--raum-3); gap: var(--raum-2); }
  .sperr-band { padding: var(--raum-2) var(--raum-3); font-size: var(--schrift-xs); }
  .klapp { right: var(--raum-3); left: var(--raum-3); width: auto; }

  /* Der Suchknopf wird zum Sinnbild */
  .suchknopf .wort, .suchknopf .taste { display: none; }
  .suchknopf {
    width: var(--tippziel);
    justify-content: center;
    padding: var(--raum-0);
  }

  .kopf-rechts .nutzer-knopf .wer { display: none; }

  .seitenkopf h1 { font-size: var(--schrift-xl); }
  .seitenkopf .werkzeuge { margin-left: var(--raum-0); width: 100%; }
  .seitenkopf .werkzeuge .knopf { flex: 1; }

  .karte-kopf, .karte-rumpf { padding: var(--raum-4) var(--raum-3); }
  .karte-fuss { padding: var(--raum-3); }
  .karte-kopf .rechts { margin-left: var(--raum-0); width: 100%; }

  .art-kachel { padding: var(--raum-4); }
  .leer { padding: var(--raum-7) var(--raum-4); }

  .meldungen { right: var(--raum-3); left: var(--raum-3); bottom: var(--raum-3); }
  .meldung { width: 100%; }

  .palette { padding: var(--raum-3); padding-top: var(--raum-4); }
  .palette-blatt { max-height: calc(100vh - var(--raum-8)); }

  .dialog { padding: var(--raum-3); align-items: flex-end; }
  .dialog-blatt { max-height: calc(100vh - var(--raum-7)); }

  .konsole { height: clamp(14rem, 40vh, 24rem); font-size: var(--schrift-xs); }
}

/* --- ab 960px: die Anmeldung bekommt ihre Schauseite ------- */
@media (min-width: 960px) {
  .anmelde-seite { grid-template-columns: 1.1fr 0.9fr; }
  .anmelde-schau { display: flex; }
}

/* --- sehr breit: mehr Luft --------------------------------- */
@media (min-width: 1440px) {
  .inhalt { padding: var(--raum-6); }
  .kopf { padding: var(--raum-0) var(--raum-6); }
  .sperr-band { padding: var(--raum-2) var(--raum-6); }
  .klapp { right: var(--raum-6); }
}

/* ---------- Druck ------------------------------------------ */
@media print {
  .leiste, .kopf, .meldungen, .palette, .schleier { display: none; }
  .huelle { grid-template-columns: minmax(0, 1fr); }
}