/*
 * Editio - Gestaltungsschicht: Bausteine.
 * Jeder Baustein bezieht Farbe, Abstand und Schrift ausschliesslich aus den
 * Merkmalen aus kern.css. Keine Zahl steht zweimal. Setzt kern.css voraus.
 */

/* ============ Blatt ============
 * Seitenvorschau auf dem Board. Rahmen, Miniatur, Schild mit Name und
 * Nummer, Bereichsmarke oben rechts. Traegt den Zustand ueber [data-zustand].
 * Markup:
 * <article class="blatt" data-zustand="veroeffentlicht">
 *   <span class="blatt__marke versal">Blog</span>
 *   <div class="blatt__miniatur"></div>
 *   <div class="blatt__schild">
 *     <span class="blatt__name">Start</span>
 *     <span class="blatt__nummer zahlen">003</span>
 *   </div>
 * </article>
 */
.blatt {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.blatt__marke {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px var(--raum-2);
  background: var(--akzent-flaeche);
  color: var(--text);
  border-left: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.blatt__miniatur {
  aspect-ratio: 4 / 3;
  background: var(--grund);
  border-bottom: 1px solid var(--linie-fein);
}
.blatt__schild {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3);
}
.blatt__name {
  font-family: var(--schrift-beschriftung);
  font-weight: 600;
  font-size: var(--mass-1);
  color: var(--text);
}
.blatt__nummer {
  color: var(--text-2);
  font-size: var(--mass-0);
}

/* Zustand: Veroeffentlicht - durchgezogene Linie, volle Deckkraft */
.blatt[data-zustand='veroeffentlicht'] {
  border-color: var(--zustand-veroeffentlicht);
  border-style: solid;
}

/* Zustand: Entwurf - gestrichelte Umrandung, Blatt leicht zurueckgenommen */
.blatt[data-zustand='entwurf'] {
  border-style: dashed;
  border-color: var(--zustand-entwurf);
  opacity: 0.82;
}

/* Zustand: Veraendert seit dem Veroeffentlichen - Ecke oben rechts angeschnitten */
.blatt[data-zustand='veraendert'] {
  border-color: var(--zustand-veraendert);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
.blatt[data-zustand='veraendert']::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent var(--zustand-veraendert) transparent transparent;
}

/* Zustand: Fehlerhaft - Schraffur ueber dem Blatt */
.blatt[data-zustand='fehlerhaft'] {
  border-color: var(--zustand-fehlerhaft);
}
.blatt[data-zustand='fehlerhaft']::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    var(--zustand-fehlerhaft) 0 1px,
    transparent 1px 8px
  );
  opacity: 0.4;
  pointer-events: none;
}

/* ============ Kante ============
 * Verbindung zwischen Blaettern. Rechter Winkel, nie Kurve. Als Flaeche
 * (fuer einfache Steg-Verbindungen) oder als SVG-Linie im Board.
 * Markup Flaeche:  <span class="kante kante--horizontal"></span>
 * Markup SVG:      <path class="kante" d="M0,0 H40 V20" />
 */
.kante {
  background: var(--linie);
}
.kante--horizontal { height: 2px; width: 100%; }
.kante--vertikal { width: 2px; height: 100%; }
.kante--fuss {
  background: none;
  background-image: repeating-linear-gradient(to right, var(--linie-fein) 0 6px, transparent 6px 10px);
  opacity: 0.7;
}
.kante--fuss.kante--vertikal {
  background-image: repeating-linear-gradient(to bottom, var(--linie-fein) 0 6px, transparent 6px 10px);
}
svg .kante {
  stroke: var(--linie);
  stroke-width: 2;
  fill: none;
}
svg .kante--fuss {
  stroke: var(--linie-fein);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

/* ============ Schriftfeld ============
 * Drei bis fuenf Felder, Beschriftung klein und gesperrt, Wert in Roboto
 * Mono darunter. Auf der Flaeche unten rechts platziert, Teil des Blattes,
 * keine Statusleiste.
 * Markup:
 * <dl class="schriftfeld">
 *   <div class="schriftfeld__feld">
 *     <dt class="schriftfeld__label versal">Bestand</dt>
 *     <dd class="schriftfeld__wert zahlen">12 Seiten</dd>
 *   </div>
 * </dl>
 */
.schriftfeld {
  display: flex;
  margin: 0;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.schriftfeld__feld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--raum-2) var(--raum-3);
  border-left: 1px solid var(--linie-fein);
  margin: 0;
}
.schriftfeld__feld:first-child { border-left: none; }
.schriftfeld__label {
  color: var(--text-2);
  margin: 0;
}
.schriftfeld__wert {
  font-family: var(--schrift-zahlen);
  font-size: var(--mass-1);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0;
}

/* ============ Massstabsleiste ============
 * Balken plus Massangabe, zeigt die Zoomstufe als Massstab.
 * Markup:
 * <div class="massstabsleiste">
 *   <span class="massstabsleiste__balken" aria-hidden="true"></span>
 *   <span class="massstabsleiste__mass zahlen">1:100</span>
 * </div>
 */
.massstabsleiste {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
}
.massstabsleiste__balken {
  display: block;
  width: 64px;
  height: 6px;
  border: 1px solid var(--linie);
  background-image: linear-gradient(to right, var(--linie) 0 50%, transparent 50% 100%);
  background-size: 16px 100%;
  background-repeat: repeat-x;
}
.massstabsleiste__mass {
  font-family: var(--schrift-zahlen);
  font-size: var(--mass-0);
  color: var(--text-2);
}

/* ============ Werkzeugknopf ============
 * Rahmen, Versalbeschriftung, kein Hintergrund im Ruhezustand.
 * Markup: <button class="werkzeugknopf">Speichern</button>
 */
.werkzeugknopf {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-family: var(--schrift-beschriftung);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  font-size: var(--mass-0);
  font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 0;
  padding: var(--raum-2) var(--raum-3);
  cursor: pointer;
  transition: background var(--dauer) var(--schwung), border-color var(--dauer) var(--schwung), color var(--dauer) var(--schwung);
}
.werkzeugknopf:hover {
  background: var(--akzent-flaeche);
  border-color: var(--akzent);
}
.werkzeugknopf:active { transform: translateY(1px); }
.werkzeugknopf[aria-pressed='true'],
.werkzeugknopf.werkzeugknopf--aktiv {
  border-color: var(--akzent);
  color: var(--akzent);
}
.werkzeugknopf:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ============ Feld ============
 * Beschriftung darueber, Rahmen einfarbig, Fehlermeldung darunter in Rot
 * mit Text - nie nur farbig. Einzige Ausnahme von scharfen Ecken: 2 Pixel.
 * Markup:
 * <div class="feld">
 *   <label class="feld__label" for="x">Titel</label>
 *   <input class="feld__eingabe" id="x">
 *   <p class="feld__fehlermeldung">Fehler: Titel fehlt.</p>
 * </div>
 */
.feld {
  display: flex;
  flex-direction: column;
  gap: var(--raum-1);
  max-width: 32rem;
}
.feld__label {
  font-family: var(--schrift-beschriftung);
  font-size: var(--mass-0);
  color: var(--text-2);
}
.feld__eingabe {
  font-family: var(--schrift-text);
  font-size: var(--mass-1);
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 2px;
  padding: var(--raum-2) var(--raum-3);
}
.feld__eingabe::placeholder { color: var(--text-2); }
.feld--fehler .feld__eingabe { border-color: var(--zustand-fehlerhaft); }
.feld__fehlermeldung {
  margin: 0;
  color: var(--zustand-fehlerhaft);
  font-size: var(--mass-0);
  font-weight: 600;
}

/* ============ Liste ============
 * Zeilen mit Trennlinie, keine Kacheln, Sortierung sichtbar.
 * Markup:
 * <ul class="liste">
 *   <li class="liste__zeile"><span>Name</span><span class="zahlen">Datum</span></li>
 * </ul>
 */
.liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.liste__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-3);
  padding: var(--raum-2) var(--raum-1);
  border-bottom: 1px solid var(--linie-fein);
}
.liste__kopf {
  font-family: var(--schrift-beschriftung);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  font-size: var(--mass-0);
  color: var(--text-2);
  border-bottom: 1px solid var(--linie);
}
.liste__zeile[aria-sort='ascending']::after { content: '\25B2'; margin-left: var(--raum-1); font-size: 0.7em; }
.liste__zeile[aria-sort='descending']::after { content: '\25BC'; margin-left: var(--raum-1); font-size: 0.7em; }

/* Modifizierer: tabellarisch (S-22 ergaenzt) - Zeilen als echte Spalten
 * statt gleichmaessig verteilt, fuer eine Liste mit mehreren vergleichbaren
 * Werten je Zeile (etwa Name/Domain/Verzeichnis/Seiten einer Website). Die
 * Spaltenbreiten kommen von der Liste selbst ueber die Eigenschaft
 * --tabellen-spalten, damit Kopf- und Datenzeilen genau uebereinandersitzen
 * -- Parametrisierung ueber ein Merkmal wie bei --ton, kein zweites Stilblatt.
 * Markup:
 * <ul class="liste liste--tabellarisch" style="--tabellen-spalten: 1.2fr 1fr 1.4fr auto auto">
 *   <li class="liste__zeile liste__kopf"><span>Name</span>...</li>
 *   <li class="liste__zeile"><span>Wert</span>...</li>
 * </ul>
 */
.liste--tabellarisch .liste__zeile {
  display: grid;
  grid-template-columns: var(--tabellen-spalten, 1fr);
  align-items: baseline;
}

/* ============ Leerstand ============
 * Zustand, solange eine Liste nichts zu zeigen hat (S-22 ergaenzt). Setzt an
 * derselben oberen Trennlinie wie "Liste" an, damit der leere Zustand wie
 * die Fortsetzung derselben Flaeche liest statt wie ein eigener Kasten.
 * Keine Karte, kein Rahmen ringsum -- nur die Linie, die auch eine gefuellte
 * Liste traegt, dazu der Weg, den leeren Zustand zu beheben.
 * Markup:
 * <div class="leerstand">
 *   <p class="leerstand__text">Noch keine Website angemeldet.</p>
 *   <a class="werkzeugknopf" href="/websites/neu">Website anmelden</a>
 * </div>
 */
.leerstand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-4);
  padding: var(--raum-8) 0;
  border-top: 1px solid var(--linie);
}
.leerstand__text {
  color: var(--text-2);
  margin: 0;
}

/* ============================================================
   BAUSTEIN: Rasterformular
   ------------------------------------------------------------
   Ein Formular, das nicht auf dem Raster liegt, sondern aus ihm
   besteht. Jedes Eingabefeld ist genau 2 mal 10 Kaestchen gross,
   die Trennlinien sitzen auf Rasterlinien, und das Ganze liest
   sich als ein einziges gezeichnetes Objekt statt als Sammlung
   einzelner Bedienelemente. Vorbild ist das Schriftfeld einer
   technischen Zeichnung: ein unterteiltes Rechteck, in dessen
   Feldern geschrieben wird.

   Das Kaestchenmass --k gilt nur innerhalb dieses Bausteins. Es
   ist groesser als das feine Seitenraster, damit ein Feld von
   zwei Kaestchen Hoehe bedienbar bleibt.
   ============================================================ */

/* ------------------------------------------------------------
   Schrift im Raster
   Ein Buchstabe je Kaestchen. Roboto Mono hat eine Vorbreite von
   0,6 em; die Sperrung fuellt den Rest bis zur Kaestchenweite auf.
   ------------------------------------------------------------ */
.rasterschrift {
  font-family: var(--schrift-zahlen);
  font-size: calc(var(--k) * 1.05);
  line-height: var(--k);
  --sperrung: calc(var(--k) - var(--k) * 1.05 * 0.6);
  letter-spacing: var(--sperrung);
  /* Die Sperrung sitzt hinter jedem Buchstaben. Ohne Ausgleich klebt jeder
     Buchstabe am linken Rand seines Kaestchens. Der halbe Betrag als Einzug
     rueckt ihn in die Mitte. */
  text-indent: calc(var(--sperrung) / 2);
  text-transform: uppercase;
  font-weight: 500;
}

.rasterform {
  --k: var(--raster-fein);
  --marke-spalte: 10;
  --feld-spalte: 10;
  display: grid;
  grid-template-columns: calc(var(--k) * var(--marke-spalte)) calc(var(--k) * var(--feld-spalte));
  /* Der Rahmen liegt als Schatten aussen an. Ein echter Rahmen wuerde den
     Inhalt um einen Punkt verschieben, und dann saessen die Zellen nicht
     mehr auf den Rasterlinien.

     In derselben Farbe wie die Linien zwischen den Kaestchen, nicht in der
     der groben Rasterlinien: das Formular sitzt auf dem Zeichenbrett, es
     liegt nicht darauf. Vorher trug jede seiner Linien die Helligkeit der
     groben Linien, von denen es auf dem Blatt nur alle fuenf Kaestchen eine
     gibt -- dicht an dicht gesetzt hob sich das Formular als fremder Koerper
     ab (Anweisung Moritz, 2026-08-30). Was das Formular lesbar haelt, ist
     nicht die Linie, sondern die Flaeche: die Eingabezellen tragen
     --flaeche, die beschrifteten Zeilen ihren blassen Schleier. */
  box-shadow: 0 0 0 1px var(--linie-fein);
  /* Feste Breite in Kaestchen. Mit max-content wuerde ein langer Text in der
     Fusszeile die Spalten auseinanderziehen, und das Feld waere nicht mehr
     zehn Kaestchen breit. */
  width: calc(var(--k) * (var(--marke-spalte) + var(--feld-spalte)));
  max-width: 100%;
  background: transparent;
}

.rasterform__zelle {
  min-height: calc(var(--k) * 2);
  display: flex;
  align-items: center;
  position: relative;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--linie-fein);
}

/* Verbundene Zelle: die Rasterlinien darin sind entfernt, wie beim
   Zusammenschliessen von Zellen in einer Tabelle. */
.rasterform__zelle--verbunden {
  background-color: var(--flaeche);
  /* Die Umrandung ist dieselbe Linie wie im Raster, damit das Feld als
     zusammengeschlossene Kaestchen liest und nicht als fremdes Bedienelement. */
  box-shadow: inset 0 0 0 1px var(--linie-fein), inset 0 -1px 0 var(--linie-fein);
}

.rasterform__kopf,
.rasterform__fuss { grid-column: 1 / -1; }
/* Der Knopf nimmt die ganze Zeile. Er stand vorher nur in der zweiten
   Spalte, buendig unter den Eingabefeldern -- was links davon ein leeres
   Kaestchen stehen liess, das nichts sagte und trotzdem im Rahmen des
   Formulars mitzaehlte (Anweisung Moritz, 2026-08-30). Eine Zeile, eine
   Handlung, kein Rest daneben. */
.rasterform__fuss { box-shadow: none; padding: 0; }
.rasterform__fuss .rasterform__knopf { flex: 1; }

/* Zeilen, in denen Text steht, bekommen einen blassen Schleier. Das Raster
   bleibt sichtbar, tritt aber hinter die Schrift zurueck. Ohne das liest
   sich jede Beschriftung gegen die Linien an. */
.rasterform__kopf,
.rasterform__marke,
.rasterform__fuss {
  background-color: color-mix(in oklab, var(--grund) 82%, transparent);
}

.rasterform__kopf {
  justify-content: space-between;
  padding: 0 calc(var(--k) / 2);
  color: var(--text-2);
}

.rasterform__marke {
  padding: 0 calc(var(--k) / 2);
  box-shadow: inset -1px 0 0 var(--linie-fein), inset 0 -1px 0 var(--linie-fein);
  color: var(--text);
  cursor: pointer;
}

.rasterform__eingabe {
  width: 100%;
  height: 100%;
  min-height: calc(var(--k) * 2);
  padding: 0 calc(var(--k) / 2);
  border: 0;
  background: transparent;
  color: var(--text);
}
.rasterform__eingabe:focus { outline: 0; }

.rasterform__zelle--verbunden:focus-within {
  background-color: var(--akzent-flaeche);
  box-shadow: inset 0 0 0 1px var(--akzent), inset 0 -1px 0 var(--linie-fein);
}

.rasterform__hinweis { color: var(--text); }

.rasterform__knopf {
  border: 0;
  color: var(--flaeche);
  background: var(--text);
  width: 100%;
  height: calc(var(--k) * 2);
  padding: 0;
  text-align: center;
  cursor: pointer;
}
.rasterform__knopf:hover { background: var(--akzent); }
.rasterform__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -3px; }

.rasterform--fehler { border-color: var(--zustand-fehlerhaft, var(--akzent)); }

.rasterform__meldung {
  grid-column: 1 / -1;
  padding: 0 calc(var(--k) / 2);
  color: var(--text);
  /* Schraffur statt bloss roter Schrift: der Zustand steht in der Form,
     nicht nur in der Farbe. Dieselbe Sprache wie beim fehlerhaften Blatt. */
  background-color: var(--flaeche);
  background-image: repeating-linear-gradient(
    135deg,
    var(--zustand-fehlerhaft) 0 1px,
    transparent 1px calc(var(--k) / 2)
  );
}

/* Das Codefeld wird nicht verbunden: hier sind die sechs Stellen die Sache
   selbst, also bleiben die Kaestchen stehen, eines je Ziffer. Beim Passwort
   ist es umgekehrt richtig, dort zaehlt niemand die Zeichen. */
.rasterform__zelle--gezaehlt {
  background-color: transparent;
  gap: calc(var(--k) / 2);
}
.rasterform__eingabe--zellen {
  width: calc(var(--k) * 6);
  flex: 0 0 auto;
  padding-left: 0;
  /* halbe Sperrung als Einzug, damit jede Ziffer mittig im Kaestchen sitzt */
  text-indent: calc((var(--k) - var(--k) * 1.05 * 0.6) / 2);
}
.rasterform__zelle--gezaehlt:focus-within .rasterform__eingabe--zellen {
  box-shadow: inset 0 0 0 1px var(--akzent);
}

/* ------------------------------------------------------------
   Die Marke, drei Kaestchen hoch und mittig ueber dem Formular.
   Hier darf ein Buchstabe breiter sein als ein Kaestchen: sie
   beschriftet das Blatt, sie steht nicht in einem Feld.
   ------------------------------------------------------------ */
.marke-gross {
  --k: var(--raster-fein);
  margin: 0;
  font-family: var(--schrift-beschriftung);
  font-weight: 700;
  font-size: calc(var(--k) * 3 / 0.654);
  /* Zeilenhoehe gleich Versalhoehe: der Schriftkasten soll nicht groesser
     sein als der Buchstabe, sonst stoesst die Unterzeile dagegen. */
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
  width: 100%;
}
.marke-gross small { display: block; color: var(--text-2); margin-top: var(--k); }

/* Der Block traegt die Breite des Formulars, damit die Marke darueber
   mittig sitzt und nicht ueber die Seite. */
.zeichenblock { width: max-content; max-width: 100%; justify-items: stretch; }


/* ============================================================
   BAUSTEIN: Zeichenflaeche, mittig
   ------------------------------------------------------------
   Traegt ein einzelnes Objekt in der Mitte der Flaeche, etwa das
   Rasterformular der Anmeldung. Nur Anordnung, keine Farben.
   ============================================================ */

.zeichenflaeche {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.zeichenblock {
  display: grid;
  gap: 24px;
  justify-items: start;
}


/* Auf schmalen Bildschirmen wird das Kaestchen kleiner statt das Formular
   breiter. Gemessen: bei 390 Pixeln lief es vorher 15 Pixel ueber und die
   Beschriftungen wurden auf vier Zeichen abgeschnitten. */
@media (max-width: 460px) {
  .rasterflaeche { --raster-fein: 16px; --raster-grob: 80px; }
  .rasterform { --marke-spalte: 9; --feld-spalte: 9; }
  .rasterform__eingabe--zellen { width: calc(var(--k) * 6); }
}

/* Bedienflaechen fuer den Finger: gemessen waren die Umschaltknoepfe der
   Baustandsseite 39 Pixel hoch, verlangt sind 44. */
.werkzeugknopf { min-height: 44px; }


/* ============ Bereich-Zustand ============
 * Kennzeichnet auf der Websiteliste, ob der Bereich einer Seite
 * gespeichert oder nur ein Vorschlag ist. Durchgezogener gegen
 * gestrichelter Rahmen traegt die Unterscheidung auch ohne
 * Farbwahrnehmung -- die Zustandsfarbe bleibt auf dem Rahmen (dort reicht
 * das 3:1-Mass fuer UI-Komponenten), nicht auf der Schrift:
 * --zustand-veroeffentlicht ist fuer Rahmen/Flaechen kontrastgeprueft,
 * nicht fuer Fliesstext -- als Textfarbe koennte "Gespeichert" auf hellem
 * Grund unter die fuer Schrift verlangten 4,5:1 rutschen (Gruen hat bei
 * gleicher OKLCH-Helligkeit eine ueberproportional hohe Leuchtdichte).
 * "Gespeichert" liest sich darum in der gewoehnlichen Textfarbe,
 * "Vorschlag" bleibt bei --text-2 (dort schon sitzweit als Textfarbe im
 * Einsatz, siehe z. B. .blatt__nummer).
 * Markup:
 * <span class="bereich-zustand bereich-zustand--gespeichert">Gespeichert</span>
 * <span class="bereich-zustand bereich-zustand--vorschlag">Vorschlag</span>
 */
.bereich-zustand {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-1);
  font-family: var(--schrift-beschriftung);
  text-transform: uppercase;
  letter-spacing: var(--sperrung-versal);
  font-size: var(--mass-0);
  padding: 2px var(--raum-2);
  border: 1px solid var(--linie);
}
.bereich-zustand--gespeichert {
  border-style: solid;
  border-color: var(--zustand-veroeffentlicht);
  color: var(--text);
}
.bereich-zustand--vorschlag {
  border-style: dashed;
  border-color: var(--text-2);
  color: var(--text-2);
}


/* ============ Marke: Sackgasse ============
 * Auf der Funnel-Ansicht die Auszeichnung einer Seite, die zwar keinen
 * weiteren Verweis in den Funnel hat, aber nicht sein Ende ist
 * (abschluss && schritt < gesamt). Sie ist ein Mangel, kein Normalzustand,
 * und wird darum kraeftiger gezeichnet als der regulaere Abschluss --
 * derselbe Ton wie .blatt--funnel-sackgasse auf der Board-Kachel
 * (board.css), damit beide Ansichten dasselbe sagen. Das Wort "Sackgasse"
 * steht im Markup daneben; die Farbe traegt die Aussage nicht allein. */
.marke--sackgasse {
  color: var(--zustand-fehlerhaft);
}