@charset "UTF-8";
/* ============================================================================
   Die Vorschau — ein Ausschnitt aus dem Orbis-Arbeitsplatz.

   Bewusst in der Typografie der Anwendung selbst (Systemschrift, nicht die
   Serifenschrift der Marketingseite): Wer hier klickt, soll sehen, wie Orbis
   aussieht — nicht, wie eine Werbeseite aussieht.

   Was hier NICHT passiert: keine Verbindung nach außen, keine Rechenwege,
   keine Preisfindung, kein Prognoseverfahren. Alle Zahlen stehen fest im
   Skript und sind erfunden.
   ========================================================================= */

.vorschau {
  font-family: var(--sans);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-gross);
  background: var(--flaeche);
  box-shadow: var(--schatten-2);
  overflow: hidden;
  container-type: inline-size;
}

/* ---------- Fensterleiste ------------------------------------------------- */
.vs-fenster {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
}
.vs-ampel { display: flex; gap: 6px; flex: none; }
.vs-ampel i { width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); display: block; }
.vs-adresse {
  flex: 1; text-align: center; font-family: var(--mono); font-size: .68rem;
  color: var(--tinte-4); background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 999px; padding: 4px 12px; max-width: 300px; margin: 0 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vs-fenster .fahne { flex: none; }

/* ---------- Anwendungskopf ------------------------------------------------ */
.vs-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--linie); }
.vs-kopf .vs-marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; flex: none; }
.vs-kopf .vs-marke svg { width: 20px; height: 20px; }
.vs-zeile {
  flex: 1; max-width: 320px; border: 1px solid var(--linie); background: var(--flaeche-2);
  border-radius: var(--rund); padding: 6px 11px; font-size: .78rem; color: var(--tinte-4);
  display: flex; align-items: center; gap: 8px;
}
.vs-person { margin-left: auto; display: flex; align-items: center; gap: 9px; font-size: .78rem; color: var(--tinte-3); flex: none; }
.vs-person i {
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold-weich); color: var(--gold-tief);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; font-size: .68rem;
}
@container (max-width: 620px) { .vs-zeile, .vs-person span { display: none; } }

/* ---------- Bereichsleiste ------------------------------------------------ */
.vs-bereiche { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--linie); overflow-x: auto; scrollbar-width: none; }
.vs-bereiche::-webkit-scrollbar { display: none; }
.vs-bereiche button {
  font: inherit; font-size: .8rem; background: none; border: 0; color: var(--tinte-4);
  padding: 11px 11px; white-space: nowrap; position: relative; cursor: default;
  display: inline-flex; align-items: center; gap: 6px;
}
.vs-bereiche button[aria-current="page"] { color: var(--tinte); font-weight: 600; }
.vs-bereiche button[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--rot);
}
.vs-bereiche button:not([aria-current]):hover { color: var(--tinte-3); }
.vs-bereiche .vs-pkt { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }

/* ---------- Bühne --------------------------------------------------------- */
.vs-buehne {
  display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr);
  gap: 26px; padding: 22px 20px 24px; background: var(--papier);
  min-height: 430px; align-items: start;
}
@container (max-width: 760px) { .vs-buehne { grid-template-columns: 1fr; gap: 22px; } }

.vs-gruss { font-family: var(--sans-anzeige); font-size: 1.55rem; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
.vs-gruss span { display: block; color: var(--tinte-4); }
.vs-kernsatz { margin-top: 10px; font-size: .95rem; color: var(--tinte-3); max-width: 46ch; }

.vs-titel {
  font-family: var(--mono); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--tinte-4); font-weight: 600; margin: 20px 0 9px;
}

/* ---------- Anliegen ------------------------------------------------------ */
.vs-anliegen { display: flex; flex-direction: column; gap: 8px; }
.vs-sache {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  /* `color` MUSS hier stehen. `font: inherit` vererbt die Schriftfamilie, nicht
     die Farbe — ein <button> ohne eigene Farbe nimmt `buttontext`, und das ist
     Schwarz. Im Hellmodus fiel das nie auf, weil Schwarz auf Weiss gut traegt;
     im Dunkelmodus stand der Kopf der Zeile mit 1,20:1 auf der dunklen Karte.
     Gefunden am 24.08.2026, beim Messen der wirklich gemalten Farben im
     Browser — die Token-Pruefung allein sieht so etwas nicht. */
  color: var(--tinte);
  background: var(--flaeche); border: 1px solid var(--linie); border-left: 3px solid var(--linie-stark);
  border-radius: var(--rund); padding: 13px 14px;
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: start;
  transition: border-color .2s, transform .2s var(--schwung), box-shadow .2s;
}
.vs-sache:hover { border-color: var(--linie-stark); box-shadow: var(--schatten); transform: translateX(2px); }
.vs-sache[aria-expanded="true"] { border-color: var(--linie-stark); box-shadow: var(--schatten); }
/* Der innere Ring des Fokus liegt im box-shadow und würde die eigene
   Schattierung dieser Zeile sonst verdrängen. Also beide, Ring zuerst. */
.vs-sache:focus-visible { box-shadow: 0 0 0 2px var(--fokusring-innen), var(--schatten); }
.vs-sache.kritisch { border-left-color: var(--rot); }
.vs-sache.ernst    { border-left-color: var(--ernst); }
.vs-sache.hinweis  { border-left-color: var(--gold); }
.vs-sache.getan    { opacity: .5; border-left-color: var(--oliv); }
.vs-sache.getan .vs-sache__kopf { text-decoration: line-through; text-decoration-color: var(--tinte-4); }
.vs-ware { width: 34px; height: 34px; border-radius: var(--rund); background: var(--flaeche-2); display: grid; place-items: center; }
.vs-ware svg { width: 26px; height: 26px; }
.vs-sache__kopf { font-size: .91rem; font-weight: 600; line-height: 1.3; }

/* Die Stufe einer Zeile darf nicht allein an der farbigen Kante haengen.
   merkmale.mjs fuehrt `hinweis` und `ernst` in `markierungBrauchtBeschriftung`:
   Der Ton ist zu schwach, um allein zu bedeuten — Gold misst im Hellmodus
   2,45:1 gegen das Blatt und 2,55:1 gegen die Karte. `kritisch` steht in der
   strengeren Liste `immerBeschriftet`: Dort ist der Ton stark genug und Farbe
   reicht trotzdem nicht, weil Kontrast Leuchtdichte misst und Leuchtdichte Rot
   nicht von Oliv trennt. Wer Rot und Gruen schlecht auseinanderhaelt — rund
   acht Prozent der Maenner — sah hier bisher irgendeine Markierung.

   Der Zeitstrahl auf den Blaettern braucht nichts dergleichen: Dort steht die
   Beschriftung mit `.wann` ("laeuft gerade") laengst daneben.

   `display: inline-block` ist kein Schmuck: Ohne das zieht die Durchstreichung
   der erledigten Zeile durch die Marke mit hindurch. */
.vs-stufe {
  display: inline-block; margin-left: 8px; vertical-align: baseline;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .11em;
  text-transform: uppercase; font-weight: 700; padding: 2px 7px;
  border-radius: 999px; white-space: nowrap; text-decoration: none;
}
.vs-sache.kritisch .vs-stufe { color: var(--rot-schrift); background: var(--rot-weich); }
.vs-sache.ernst    .vs-stufe { color: var(--ernst);       background: var(--ernst-weich); }
.vs-sache.hinweis  .vs-stufe { color: var(--gold-tief);   background: var(--gold-weich); }
/* Muss nach den drei Zeilen oben stehen: Die Stufenklasse bleibt am Element,
   wenn `getan` dazukommt, und beide Regeln sind gleich spezifisch. */
.vs-sache.getan    .vs-stufe { color: var(--oliv);        background: var(--oliv-weich); }
.vs-sache__text { font-size: .81rem; color: var(--tinte-4); margin-top: 3px; line-height: 1.45; }
.vs-sache__pfeil { color: var(--tinte-4); font-size: .95rem; align-self: center; transition: transform .25s var(--schwung); }
.vs-sache[aria-expanded="true"] .vs-sache__pfeil { transform: rotate(90deg); }

/* ---------- Tafel (Detail) ------------------------------------------------ */
.vs-tafel {
  margin-top: 8px; background: var(--flaeche); border: 1px solid var(--linie-stark);
  border-radius: var(--rund); box-shadow: var(--schatten); overflow: hidden;
}
.vs-tafel[hidden] { display: none; }
/* Die Tafel bekommt nach dem Öffnen den Fokus (Tastatur und Vorleser landen
   dort, wo etwas passiert ist). Ein Rahmen um die ganze Tafel wäre laut — der
   Doppelring bleibt den Bedienelementen vorbehalten. */
.vs-tafel:focus { outline: none; }
.vs-tafel:focus-visible { outline: 2px solid var(--fokusring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--fokusring-innen), var(--schatten); }
.vs-tafel__kopf { padding: 15px 17px 13px; border-bottom: 1px solid var(--linie); background: var(--flaeche-2); }
.vs-tafel__kopf h4 { font-family: var(--sans-anzeige); font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.vs-tafel__kopf p { font-size: .79rem; color: var(--tinte-4); margin-top: 4px; }
.vs-tafel__leib { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 14px; }

.vs-feld { display: grid; grid-template-columns: 118px minmax(0,1fr); gap: 14px; align-items: start; }
@container (max-width: 560px) { .vs-feld { grid-template-columns: 1fr; gap: 3px; } }
.vs-feld dt { font-family: var(--mono); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-4); padding-top: 3px; }
.vs-feld dd { margin: 0; font-size: .89rem; color: var(--tinte-2); line-height: 1.5; }
.vs-feld dd b { font-weight: 650; color: var(--tinte); }
.vs-feld dd small { display: block; color: var(--tinte-4); font-size: .79rem; margin-top: 3px; }

.vs-menge { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--linie-stark); border-radius: var(--rund); overflow: hidden; background: var(--flaeche); }
.vs-menge button {
  font: inherit; font-size: 1.05rem; line-height: 1; width: 34px; height: 34px; border: 0;
  background: var(--flaeche-2); color: var(--tinte-2); cursor: pointer;
}
.vs-menge button:hover { background: var(--flaeche-3); color: var(--tinte); }
.vs-menge output {
  min-width: 62px; text-align: center; font-size: .95rem; font-weight: 650;
  font-variant-numeric: tabular-nums; padding: 0 6px;
}
.vs-mengensatz { font-size: .79rem; color: var(--tinte-4); margin-top: 6px; }

.vs-tat { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 3px; }
.vs-tat button {
  font: inherit; font-size: .85rem; font-weight: 600; padding: 9px 15px; border-radius: var(--rund);
  border: 1px solid transparent; cursor: pointer; transition: background .2s, transform .16s var(--schwung);
}
.vs-tat .haupt { background: var(--rot); color: var(--tat-schrift); }
.vs-tat .haupt:hover { background: color-mix(in srgb, var(--rot) 88%, #000); transform: translateY(-1px); }
.vs-tat .neben { background: transparent; color: var(--tinte-2); border-color: var(--linie-stark); }
.vs-tat .neben:hover { background: var(--flaeche-2); }

/* ---------- Verlauf nach der Freigabe ------------------------------------- */
.vs-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.vs-verlauf li {
  display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 11px; align-items: baseline;
  font-size: .87rem; color: var(--tinte-2);
  opacity: 0; transform: translateY(5px);
  animation: vs-auf .45s var(--schwung) forwards;
}
@keyframes vs-auf { to { opacity: 1; transform: none; } }
.vs-verlauf .zeichen { font-size: .95rem; line-height: 1; }
.vs-verlauf .fertig { color: var(--oliv); }
.vs-verlauf .warte { color: var(--gold-tief); }
.vs-verlauf small { display: block; color: var(--tinte-4); font-size: .78rem; margin-top: 2px; }
.vs-verlauf .wann { font-family: var(--mono); font-size: .68rem; color: var(--tinte-4); white-space: nowrap; }

.vs-schluss {
  margin-top: 4px; padding: 13px 15px; border-radius: var(--rund);
  background: var(--oliv-weich); border: 1px solid color-mix(in srgb, var(--oliv) 30%, transparent);
  font-size: .87rem; color: var(--tinte-2);
}
.vs-schluss b { color: var(--tinte); }

/* ---------- Rechte Spalte: Lage ------------------------------------------- */
.vs-lage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 17px 18px 18px; box-shadow: var(--schatten); }
.vs-lage__wert { font-family: var(--sans-anzeige); font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.vs-lage__wende { font-size: .81rem; color: var(--oliv); margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; }
.vs-linie { margin: 14px 0 4px; }
.vs-linie svg { display: block; width: 100%; height: 54px; }
.vs-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--rund); overflow: hidden; margin-top: 14px; }
.vs-zahl { background: var(--flaeche); padding: 11px 12px 12px; }
.vs-zahl dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: var(--tinte-4); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.vs-zahl dd { margin: 0; font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.vs-woher {
  border: 0; background: none; padding: 0; cursor: help; color: var(--tinte-4);
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--linie-stark);
  font-size: .58rem; line-height: 1; display: inline-grid; place-items: center; font-family: var(--sans);
}
.vs-woher:hover, .vs-woher:focus-visible { background: var(--gold-weich); color: var(--gold-tief); border-color: var(--gold); }

.vs-sprechblase {
  position: fixed; z-index: 80; max-width: 268px; background: var(--um-grund); color: var(--um-tinte);
  font-size: .79rem; line-height: 1.5; padding: 10px 13px; border-radius: var(--rund);
  box-shadow: var(--schatten-2); pointer-events: none;
}
.vs-sprechblase[hidden] { display: none; }
.vs-sprechblase b { color: var(--um-gold); display: block; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .11em; text-transform: uppercase; margin-bottom: 5px; }

/* ---------- Warenzeile unten ---------------------------------------------- */
.vs-ware-reihe { display: flex; gap: 8px; overflow-x: auto; padding: 14px 20px 16px; border-top: 1px solid var(--linie); background: var(--flaeche-2); scrollbar-width: none; }
.vs-ware-reihe::-webkit-scrollbar { display: none; }
/* 72 px statt 66: „Granatapfelsirup" war bei 66 px Behälter 74 px breit und wurde
   abgeschnitten (gemessen am 14.09.2026). Dazu darf die Bildunterschrift ein zu
   langes Wort notfalls brechen — ein Artikelname kommt aus dem Bestand, nicht
   aus dieser Datei, und der nächste ist wieder länger. */
.vs-ware-reihe figure { margin: 0; flex: none; width: 72px; text-align: center; }
.vs-ware-reihe .bild { width: 72px; height: 52px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); display: grid; place-items: center; }
.vs-ware-reihe .bild svg { width: 32px; height: 32px; }
.vs-ware-reihe figcaption { font-size: .63rem; color: var(--tinte-4); margin-top: 5px; line-height: 1.3; overflow-wrap: break-word; }

/* ---------- Fußleiste der Vorschau ---------------------------------------- */
.vs-fussleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 18px; border-top: 1px solid var(--linie); background: var(--flaeche);
  font-size: .78rem; color: var(--tinte-4);
}
.vs-fussleiste .schub { flex: 1; min-width: 20px; }
.vs-fussleiste button {
  font: inherit; font-size: .78rem; font-weight: 600; color: var(--tinte-2);
  background: transparent; border: 1px solid var(--linie-stark); border-radius: var(--rund);
  padding: 6px 12px; cursor: pointer;
}
.vs-fussleiste button:hover { background: var(--flaeche-2); }