/* Objektplan – Gestaltung.

   Arbeitet mit den Tokens aus styles.css und ergänzt nur, was der Plan selbst
   braucht.

   Die wichtigste Regel dieser Datei steht gleich am Anfang und ist keine
   Vorliebe: Die Farben AUF dem Plan hängen nicht am Erscheinungsbild. Das
   Planbild ist ein Scan – ein weisses Blatt mit schwarzen Linien –, und es
   bleibt weiss, wenn jemand nachts die dunkle Fassung einschaltet. Eine
   Marke, die dabei mit umschlägt, ist im dunklen Erscheinungsbild eine weisse
   Scheibe auf weissem Papier. Darum werden die zwei Tokens, die kippen würden,
   für den Plan auf ihren hellen Wert festgehalten. Neue Farben kommen keine
   dazu; die Werte stammen aus styles.css. */

:root {
  /* Farbbelegung, an DIN 14095 angelehnt und für einen Wachdienst umbelegt:
     Löschwassermenge und Brandwand interessieren hier niemanden, Sackgasse
     und Sperrbereich sehr wohl. */
  --plan-zufahrt: var(--text-muted);     /* Grau: befahrbar, Zufahrt */
  --plan-sackgasse: var(--warning);      /* Gelb: nicht befahrbar, Sackgasse */
  --plan-gefahr: var(--critical);        /* Rot: Gefahrenstelle, Sperrbereich */
  --plan-kontrolle: var(--series-7);     /* Blau: Kontrollpunkt */
  --plan-zugang: var(--good);            /* Grün: Zugang, den man selbst nimmt */
  --plan-bau: var(--text-primary);       /* Schwarz: Baukörper */

  /* Der eigene Standort ist die einzige Angabe, die man im Bruchteil einer
     Sekunde finden muss – und die einzige, die keiner der fünf Belegungen
     gehört. Violett ist die Akzentfarbe des Hauses und auf dem Plan sonst
     nirgends im Einsatz. */
  --plan-standort: var(--accent);

  /* Weiss trägt jede Marke auf jedem Untergrund: Fassung um die Form, Hof um
     die Schrift. Ohne sie verschwindet eine blaue Marke auf einer blauen
     Bemassung des Architekten. */
  --plan-fassung: #ffffff;
  --plan-papier: #ffffff;

  /* Derselbe Ring wie auf der Karte, absichtlich: Ein Fokus, der auf zwei
     Ansichten unterschiedlich aussieht, wird zweimal gelernt. */
  --plan-fokus: #0b6bcb;
}

:root[data-theme="dark"] {
  /* Nur die beiden, die mit dem Erscheinungsbild kippen würden. Grau wird sonst
     violettgrau, Schwarz wird weiss – beides auf einem hellen Scan unlesbar.
     Rot, Gelb, Grün und Blau sind in styles.css ohnehin für beide Fassungen
     gleich oder nahe beieinander und bleiben, wie sie sind. */
  --plan-zufahrt: #6d6b65;
  --plan-bau: #0b0b0b;
}

/* ---------- Aufbau ---------- */
.plan-halter {
  display: block;
}

/* Das Attribut hidden verliert gegen JEDE eigene display-Regel: Die
   Browservorgabe [hidden]{display:none} steht in der schwächsten Schicht, und
   schon eine einzige Klasse mit display:flex hebelt sie aus.

   Das ist kein theoretischer Fall. Genau hier stand eine leere, weisse
   Meldefläche mit display:flex über dem ganzen Plan: Sie war "versteckt",
   sichtbar war trotzdem nur weiss. Diese eine Zeile deckt alles im Plan ab –
   auch das, was später dazukommt. Ausserhalb des Planhalters wirkt sie nicht,
   damit sie niemandem sonst ins Handwerk pfuscht. */
.plan-halter [hidden] { display: none !important; }

/* ---------- Ebenenwechsler ---------- */
/* Eine Reihe kurzer Schalter, kein Aufklappmenü: Eine Liste, die aufgeht und
   wieder zugeht, ist mit Handschuhen unzuverlässig – und nachts trägt jeder
   Handschuhe. Sie steht ÜBER dem Plan, weil "welche Ebene sehe ich" die Frage
   vor dem Hinschauen ist und nicht danach. */
.plan-ebenen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.plan-ebene {
  display: flex;
  align-items: center;
  gap: 7px;
  /* 44 Punkte hoch: die Fläche, die ein Daumen im Dunkeln sicher trifft. */
  min-height: 44px;
  padding: 6px 14px;
  font: inherit;
  /* Nichts unter 14 Punkten. max() statt einer festen Zahl, damit die Schrift
     mitwächst, wenn jemand seine Grundschrift vergrössert hat. */
  font-size: max(14px, var(--fs-md));
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}

.plan-ebene:hover { background: var(--surface-sunken); color: var(--text-primary); }
.plan-ebene:focus-visible { outline: 2px solid var(--plan-fokus); outline-offset: 1px; }

/* Der aktive Schalter ist gefüllt, nicht nur eingefärbt: Ein Farbunterschied
   allein verschwindet auf einem Telefon, das nachts auf die dunkelste Stufe
   gestellt ist. */
.plan-ebene.ist-aktiv {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.plan-ebene-zahl {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: max(12px, var(--fs-xs));
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--surface-sunken);
}

.plan-ebene.ist-aktiv .plan-ebene-zahl {
  color: var(--accent);
  background: var(--plan-fassung);
}

/* ---------- Bühne ---------- */
.plan-buehne {
  position: relative;
  /* Weiss, nicht surface: Der Rand um den Scan soll wie Papier aussehen und
     nicht wie ein dunkler Rahmen, der den Plan optisch abschneidet. */
  background: var(--plan-papier);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.plan {
  display: block;
  width: 100%;
  /* Feste Höhe statt mitwachsend: Ein Grundriss kann quer oder hoch sein, und
     eine Ansicht, die je nach Plan ihre Höhe ändert, verschiebt beim
     Ebenenwechsel alles darunter. Die Rechnung im Modul kennt den dabei
     entstehenden Rand und rechnet ihn heraus. */
  height: clamp(320px, 62vh, 620px);
  /* Ohne das rollt beim Wischen über den Plan die Seite mit und der Plan bleibt
     stehen – auf dem Telefon der häufigste Grund für "das klemmt". */
  touch-action: none;
}

.plan.wird-gezogen { cursor: grabbing; }

/* Im Setzwerkzeug sagt schon der Zeiger, was ein Klick tut. */
.ist-setzwerkzeug .plan { cursor: crosshair; }
.ist-setzwerkzeug .plan.wird-gezogen { cursor: grabbing; }

.plan-bild {
  /* Ein Scan wird beim Vergrössern unscharf – das ist ehrlicher als ein
     nachgeschärftes Bild, das Kanten erfindet, die im Papier nicht stehen. */
  image-rendering: auto;
}

/* ---------- Flächen ---------- */
/* Durchscheinend gefüllt, kräftig umrandet: Unter der Fläche liegen die Linien
   des Architekten, und die sollen lesbar bleiben. Eine deckende Fläche würde
   genau die Information verdecken, wegen der der Plan da ist. */
.plan-bereich-flaeche {
  stroke-width: 2;
  stroke-linejoin: round;
}

.plan-bereich-text {
  font-family: inherit;
  font-weight: 600;
  /* Weisser Hof um die Schrift, damit sie auf jedem Untergrund lesbar bleibt.
     paint-order sorgt dafür, dass der Hof HINTER der Schrift liegt und sie
     nicht auffrisst. */
  stroke: var(--plan-fassung);
  stroke-width: 3px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  user-select: none;
}

.plan-bereich.ist-zufahrt .plan-bereich-flaeche {
  fill: color-mix(in srgb, var(--plan-zufahrt) 16%, transparent);
  stroke: var(--plan-zufahrt);
}
.plan-bereich.ist-zufahrt .plan-bereich-text { fill: var(--plan-zufahrt); }

.plan-bereich.ist-sackgasse .plan-bereich-flaeche {
  fill: color-mix(in srgb, var(--plan-sackgasse) 26%, transparent);
  stroke: var(--plan-sackgasse);
}
/* Nicht das Gelb selbst als Schrift: Gelb auf Weiss ist keine Schrift, sondern
   eine Andeutung. Der Text nimmt das Schwarz des Baukörpers. */
.plan-bereich.ist-sackgasse .plan-bereich-text { fill: var(--plan-bau); }

.plan-bereich.ist-gefahr .plan-bereich-flaeche {
  fill: color-mix(in srgb, var(--plan-gefahr) 20%, transparent);
  stroke: var(--plan-gefahr);
}
.plan-bereich.ist-gefahr .plan-bereich-text { fill: var(--plan-gefahr); }

.plan-bereich.ist-zugang .plan-bereich-flaeche {
  fill: color-mix(in srgb, var(--plan-zugang) 20%, transparent);
  stroke: var(--plan-zugang);
}
.plan-bereich.ist-zugang .plan-bereich-text { fill: var(--plan-zugang); }

.plan-bereich.ist-baukoerper .plan-bereich-flaeche {
  fill: color-mix(in srgb, var(--plan-bau) 12%, transparent);
  stroke: var(--plan-bau);
}
.plan-bereich.ist-baukoerper .plan-bereich-text { fill: var(--plan-bau); }

/* ---------- Marken ---------- */
/* Grössen setzt objektplan.js als Attribut, weil sie von der dargestellten
   Grösse abhängen. Hier stehen nur Farben – sonst streiten sich zwei Stellen
   um denselben Wert. */
.plan-marke { cursor: pointer; }

.plan-marke-form {
  stroke: var(--plan-fassung);
  stroke-width: 2;
  /* Die Fassung soll zwei Bildschirmpunkte breit bleiben, egal wie stark
     vergrössert ist – sonst verschwindet sie beim Hineinzoomen. */
  vector-effect: non-scaling-stroke;
}

.plan-marke.ist-kontrolle .plan-marke-form { fill: var(--plan-kontrolle); }
.plan-marke.ist-zugang .plan-marke-form { fill: var(--plan-zugang); }
.plan-marke.ist-gefahr .plan-marke-form { fill: var(--plan-gefahr); }

/* Beschriftet wird direkt an der Marke, nicht in einer Legende: Wer nachts erst
   eine Zeichenerklärung lesen muss, hat schon verloren. */
.plan-marke-text {
  font-family: inherit;
  font-weight: 600;
  fill: var(--plan-bau);
  stroke: var(--plan-fassung);
  stroke-width: 3.5px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  /* Die Aufschrift wird gelesen, nie markiert – beim Ziehen sonst blau umrandet. */
  user-select: none;
  pointer-events: none;
}

/* Der Fokusring ist ein eigener Kreis im Markup: Ein CSS-Umriss um eine
   SVG-Gruppe zeichnen Browser unterschiedlich, teils rechteckig, teils gar
   nicht. Ein Kreis sitzt überall gleich. */
.plan-fokus {
  fill: none;
  stroke: none;
  stroke-width: 3;
}

.plan-marke:focus { outline: none; }
.plan-marke:focus-visible .plan-fokus { stroke: var(--plan-fokus); }

/* Ausgewählt bleibt sichtbar, auch wenn der Fokus weitergewandert ist – sonst
   weiss niemand mehr, worauf sich die Tafel darunter bezieht. */
.plan-marke.ist-gewaehlt .plan-fokus { stroke: var(--plan-fokus); }

/* ---------- Sie sind hier ---------- */
.plan-standort { pointer-events: none; }

.plan-standort-hof {
  fill: color-mix(in srgb, var(--plan-standort) 22%, transparent);
  stroke: var(--plan-standort);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.plan-standort-kern {
  fill: var(--plan-standort);
  stroke: var(--plan-fassung);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.plan-standort-text {
  font-family: inherit;
  font-weight: 700;
  fill: var(--plan-standort);
  stroke: var(--plan-fassung);
  stroke-width: 4px;
  paint-order: stroke fill;
  vector-effect: non-scaling-stroke;
  user-select: none;
}

/* Ein einziger, langsamer Puls. Er zieht das Auge auf die eine Stelle, die man
   sofort finden muss – und ist so träge, dass er beim Lesen nicht stört. */
.plan-standort-hof {
  transform-box: fill-box;
  transform-origin: center;
  animation: plan-puls 2.4s ease-in-out infinite;
}

@keyframes plan-puls {
  0%, 100% { opacity: .55; transform: scale(.86); }
  50% { opacity: 1; transform: scale(1); }
}

/* ---------- Nordpfeil ---------- */
/* Klein in der Ecke: Der Plan ist nach der Zufahrt gedreht, nicht nach Norden.
   Ohne diesen Pfeil ginge der Weltbezug ganz verloren – mit ihm bleibt er da,
   wo er hingehört: als Nebenangabe. */
.plan-nord {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 38px;
  height: 38px;
  padding: 2px;
  background: color-mix(in srgb, var(--plan-papier) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 50%;
  pointer-events: none;
}

.plan-nord-bild { display: block; width: 100%; height: 100%; }
.plan-nord-pfeil { fill: var(--plan-bau); }
.plan-nord-text {
  fill: var(--plan-bau);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}

/* ---------- Bedienung ---------- */
/* Die Knöpfe liegen auf dem Plan, nicht darunter: Wer den Ausschnitt sucht,
   schaut auf den Plan und nicht ans Seitenende. */
.plan-steuerung {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 4px;
  padding: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.plan-knopf {
  /* 38 Punkte im Quadrat: mit Handschuhen die untere Grenze des sicher
     Treffbaren. Auf der Schweizkarte reichen 32, dort sitzt niemand im Regen. */
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: max(15px, var(--fs-lg));
  line-height: 1;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
}

.plan-knopf.ist-breit {
  grid-column: 1 / -1;
  height: 32px;
  font-size: max(13px, var(--fs-sm));
}

.plan-knopf:hover:not(:disabled) { background: var(--surface-0); }
.plan-knopf:focus-visible { outline: 2px solid var(--plan-fokus); outline-offset: 1px; }

.plan-knopf:disabled {
  /* Nicht ausblenden, nur abschwächen: Ein Knopf, der verschwindet, lässt die
     übrigen springen und man drückt daneben. */
  opacity: .4;
  cursor: default;
}

/* ---------- Meldung ---------- */
/* Sie liegt IM Bild und nicht am Seitenende, weil die Frage "warum sehe ich
   nichts" genau dort entsteht, wo nichts zu sehen ist. */
.plan-meldung {
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-size: max(14px, var(--fs-md));
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.plan-stand {
  margin: 8px 0 0;
  font-size: max(14px, var(--fs-sm));
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tafel ---------- */
.plan-tafel {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.plan-tafel-kopf {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.plan-tafel-kopf h3 { flex: 1; font-size: max(16px, var(--fs-lg)); }

.plan-tafel-art {
  margin: 0 0 4px;
  font-size: max(13px, var(--fs-sm));
  color: var(--text-muted);
}

.plan-tafel-ort,
.plan-tafel-hinweis {
  margin: 0 0 6px;
  font-size: max(14px, var(--fs-md));
  color: var(--text-primary);
}

.plan-tafel-lage {
  margin: 2px 0 10px;
  font-size: max(13px, var(--fs-sm));
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.plan-tafel-reihe { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Referenzbild ---------- */
/* "So sieht die Nordtür aus, wenn alles stimmt." Vergleichen fällt leichter als
   Lesen – dieses eine Bild beantwortet nachts mehr Fragen als drei Absätze
   Beschreibung, und es ist der Grund, warum es hier keine räumliche
   Darstellung braucht. */
.plan-referenz { margin-top: 10px; }

.plan-referenz-knopf {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-sunken);
  overflow: hidden;
  cursor: zoom-in;
}

.plan-referenz-knopf:focus-visible { outline: 2px solid var(--plan-fokus); outline-offset: 2px; }

.plan-referenz-bild {
  display: block;
  width: 100%;
  /* Klein genug, dass Name und Hinweis daneben sichtbar bleiben – gross genug,
     um eine Tür wiederzuerkennen. */
  max-height: 240px;
  object-fit: cover;
}

.plan-referenz.ist-gross .plan-referenz-knopf { cursor: zoom-out; }
.plan-referenz.ist-gross .plan-referenz-bild {
  max-height: none;
  object-fit: contain;
}

.plan-referenz-text {
  margin: 6px 0 0;
  font-size: max(13px, var(--fs-sm));
  color: var(--text-muted);
}

/* ---------- Punkte ohne Lage ---------- */
/* Sie verschwinden nicht, sie stehen daneben. Ein Kontrollpunkt, der aus der
   Ansicht fällt, weil niemand ihn auf den Plan gesetzt hat, wird sonst
   vergessen – und genau der ist es, bei dem später etwas passiert. */
.plan-offen {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.plan-offen h3 {
  margin: 0 0 6px;
  font-size: max(13px, var(--fs-sm));
  font-weight: 550;
  color: var(--text-muted);
}

.plan-offen ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.plan-offen-knopf {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  min-height: 40px;
  padding: 6px 11px;
  font: inherit;
  font-size: max(14px, var(--fs-md));
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.plan-offen-knopf:focus-visible { outline: 2px solid var(--plan-fokus); outline-offset: 1px; }

/* Vorgemerkt heisst: Der nächste Tipp in den Plan gilt diesem Punkt. Das muss
   man sehen, sonst tippt man und wundert sich, welcher Punkt gewandert ist. */
.plan-offen-knopf.ist-vorgemerkt {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.plan-offen-ort { font-size: max(12px, var(--fs-xs)); color: var(--text-muted); }
.plan-offen-knopf.ist-vorgemerkt .plan-offen-ort { color: var(--accent-ink); }

/* ---------- Legende ---------- */
/* Zugeklappt und ganz unten, und das ist der Punkt: Beschriftet wird an der
   Marke. Die Legende ist eine Ergänzung für den Bürotisch, kein Werkzeug für
   den Weg – wer sie nachts aufklappen muss, hat schon verloren. */
.plan-legende {
  margin-top: 10px;
  font-size: max(13px, var(--fs-sm));
  color: var(--text-secondary);
}

.plan-legende summary {
  cursor: pointer;
  color: var(--text-muted);
  /* Ein Aufklapper ist ein Bedienelement: Er braucht dieselbe Trefferfläche
     wie ein Knopf. */
  padding: 6px 0;
}

.plan-legende ul {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.plan-legende li { display: flex; align-items: center; gap: 7px; }

.plan-legende i {
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid var(--plan-fassung);
  border-radius: 50%;
}

/* Dieselben drei Formen wie im Plan: Ein Zeichen, das in der Erklärung anders
   aussieht als in der Zeichnung, erklärt nichts. */
.plan-legende i.ist-zugang { border-radius: 3px; }
.plan-legende i.ist-gefahr {
  border: 0;
  /* Dreieck aus einem Rahmen: Kein zusätzliches Bild nötig. */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid var(--plan-gefahr);
  background: none;
}

.plan-legende i.ist-kontrolle { background: var(--plan-kontrolle); }
.plan-legende i.ist-zugang { background: var(--plan-zugang); }
.plan-legende i.ist-zufahrt { background: var(--plan-zufahrt); border-radius: 3px; }
.plan-legende i.ist-sackgasse { background: var(--plan-sackgasse); border-radius: 3px; }
.plan-legende i.ist-baukoerper { background: var(--plan-bau); border-radius: 3px; }
.plan-legende i.ist-standort { background: var(--plan-standort); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Der Puls am Standort verschwindet, die Marke bleibt: Sie ist die Aussage,
     die Bewegung war nur der Hinweis darauf. */
  .plan-standort-hof { animation: none; opacity: .8; transform: none; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 640px) {
  .plan {
    /* Auf dem Telefon darf der Plan mehr Höhe nehmen: Dort ist er das einzige,
       was gerade zählt, und die Tafel darunter ist einen Wisch entfernt. */
    height: clamp(300px, 56vh, 480px);
  }

  .plan-ebenen {
    /* Sechs Ebenen passen nicht nebeneinander. Waagerecht rollbar statt
       umbrechend: Eine Schalterreihe, die zwei Zeilen hoch wird, schiebt den
       Plan aus dem Bild. */
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Der Schalter behält seine Breite, statt gequetscht zu werden. */
    scrollbar-width: thin;
  }

  .plan-ebene { flex: none; }

  /* Auf dem Telefon wandern die Knöpfe nach unten rechts: Dort erreicht sie
     der Daumen einer Hand, die gleichzeitig eine Lampe hält – und dort
     verdecken sie den unteren Bildrand statt der Mitte, auf die man schaut.
     Der Nordpfeil sitzt unten links und kommt sich damit nicht in die Quere. */
  .plan-steuerung {
    top: auto;
    bottom: 10px;
    right: 10px;
  }
}

/* ---------- Druck ---------- */
@media print {
  /* Helle Fassung erzwingen: Ein dunkler Ausdruck frisst Toner, und die
     Farbbelegung – auf der hier alles beruht – verschwindet im Schwarz. */
  .plan-halter {
    --plan-zufahrt: #6d6b65;
    --plan-sackgasse: #fab219;
    --plan-gefahr: #d03b3b;
    --plan-kontrolle: #2a78d6;
    --plan-zugang: #0ca30c;
    --plan-bau: #0b0b0b;
    --plan-standort: #6d28d9;
  }

  .plan-buehne {
    background: #ffffff;
    border-color: #7d8b9c;
    /* Ohne das lassen Browser beim Drucken die Flächen weg – dann ist die
       Farbbelegung, wegen der der Plan da ist, nicht mehr zu sehen. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .plan {
    /* Auf Papier gibt es keinen Bildschirmrand: Der Plan darf die Seite füllen. */
    height: auto;
    min-height: 60vh;
  }

  /* Knöpfe und Schalter gehören nicht aufs Papier – dort lässt sich nichts
     drücken. Welche Ebene gedruckt wurde, steht in der Standzeile. */
  .plan-steuerung,
  .plan-ebenen,
  .plan-tafel-reihe,
  .plan-tafel-zu { display: none; }

  /* Die Randliste bleibt: Ein Punkt ohne Lage gehört zur Aussage des Ausdrucks. */
  .plan-offen { background: #ffffff; border-color: #7d8b9c; }

  /* Auf Papier steht alles sofort – und offen, nicht zugeklappt. */
  .plan-standort-hof { animation: none; opacity: .8; }
  .plan-legende ul { display: flex; }
}