/* ===========================================================================
   MAXIM MATIS SHK — Badplaner
   Eigenständiges, additives Stylesheet — nur auf badplaner.html geladen,
   zusätzlich zu formular.css (Tokens, Grundlayout, Kopf-/Fußzeile bleiben
   von dort). Kein einziger neuer Farbwert: jede Fläche hier verwendet
   dieselben gebundenen Custom Properties wie der Rest der Seite. Der Planer
   ist "ein Vorgang wie jeder andere im Prüfsiegel-System" — Positionen,
   Formularfelder und Auswahl-Chips sind bewusst dieselben Bausteine wie im
   Anfrageformular, keine neue Bedienlogik.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Schrittleiste — sechs anklickbare Positionen, kein erzwungener Assistent.
   --------------------------------------------------------------------------- */
.plan-schritte {
  display: flex;
  flex-wrap: nowrap;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .3rem;
  margin-bottom: clamp(1.25rem, 2.6vw, 1.9rem);
  scrollbar-width: thin;
}
.plan-schritt-nav {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .95rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-meta);
  color: var(--schiefer);
  white-space: nowrap;
  transition: border-color .15s var(--ease-weich), color .15s var(--ease-weich), background-color .15s var(--ease-weich);
}
.plan-schritt-nav__nr {
  font-variation-settings: 'wdth' 116;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  /* --petrol-tief liegt bei nur 4,0:1 auf Weiß — für Fließtextgröße unter
     WCAG-AA (4,5:1). Für Rahmen/Hover reicht das (3:1), für Text hier nicht,
     deshalb dunkler gemischt statt den geteilten Token selbst zu ändern. */
  color: color-mix(in srgb, var(--petrol-tief) 70%, var(--nacht) 30%);
}
.plan-schritt-nav:hover { border-color: var(--petrol-tief); }
.plan-schritt-nav[aria-current='step'] {
  border-color: var(--petrol);
  background: color-mix(in srgb, var(--petrol) 8%, var(--weiss));
  color: var(--nacht);
}
.plan-schritt-nav[aria-current='step'] .plan-schritt-nav__nr { color: var(--petrol); }
.plan-schritt-nav:disabled { opacity: .45; cursor: not-allowed; }
/* Im Vollbild zählt jeder Zentimeter Höhe für die eigentliche Arbeitsfläche
   — dieselbe Schrittleiste, deutlich kompakter statt großer Kacheln. */
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) .plan-schritte { margin-bottom: .6rem; }

/* Auf schmalen Bildschirmen ersetzt eine einzeilige "Schritt X von 6"-Leiste
   die scrollende Kachelreihe — dieselben sechs Positionen bleiben über den
   Ausklapp-Knopf erreichbar, verbrauchen aber nicht dauerhaft Fläche. */
.plan-schritt-kompakt { display: none; }
@media (max-width: 36rem) {
  .plan-schritt-kompakt {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: .6rem .9rem;
    margin-bottom: .6rem;
    background: var(--weiss);
    border: 1.5px solid var(--linie);
    font: inherit;
    font-variation-settings: 'wdth' 108;
    font-weight: 800;
    font-size: var(--text-xs);
    color: var(--nacht);
    cursor: pointer;
  }
  .plan-schritt-kompakt .plan-inspektor__pfeil { transition: transform .18s var(--ease-weich); flex: 0 0 auto; }
  .plan-schritt-kompakt[aria-expanded='false'] .plan-inspektor__pfeil { transform: rotate(-90deg); }
  .plan-schritte { display: none; flex-direction: column; }
  .plan-schritte.ist-offen { display: flex; }
  .plan-schritte .plan-schritt-nav { width: 100%; min-height: 44px; }
}
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) .plan-schritt-nav { padding: .35rem .6rem; gap: .3rem; font-size: var(--text-micro); }

/* min-width:0 ist Pflicht: <fieldset> verweigert in Grid-/Flex-Kontexten
   sonst das Schrumpfen unter die Content-Breite (bekannter Browser-Fallstrick)
   und reißt hier bei drei Maßfeldern nebeneinander die Seite mobil auf. */
.plan-abschnitt { min-width: 0; padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.4rem, 2.6vw, 2rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.plan-abschnitt[hidden] { display: none; }
.plan-abschnitt__kopf { display: flex; align-items: baseline; gap: .9rem; }
.plan-abschnitt__nr { font-variation-settings: 'wdth' 116; font-weight: 800; font-size: var(--text-headline-3xs); color: var(--petrol); font-variant-numeric: tabular-nums; }
.plan-abschnitt__titel { font-variation-settings: 'wdth' 108; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; margin: 0; }
.plan-abschnitt__hinweis { font-variation-settings: 'wdth' 90; font-size: var(--text-meta); color: var(--schiefer); margin: 0; }

.plan-schrittfuss { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   Raummaße (Schritt 1)
   --------------------------------------------------------------------------- */
.plan-massfelder { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.1rem; max-width: 40rem; }

/* ---------------------------------------------------------------------------
   Ausstattungs-Vorauswahl (Schritt 2)
   --------------------------------------------------------------------------- */
.plan-ausstattung-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .6rem; }

/* ---------------------------------------------------------------------------
   Gesamtbühne — Vollbild-Ziel. Im Normalzustand ein unauffälliger Rahmen um
   Werkstatt + Katalog + Inspektor; im Vollbild deckt sie den ganzen
   Bildschirm ab (nativ per Fullscreen-API oder als CSS-Fallback), während
   Kopfzeile, Fußzeile, Aktionsleiste und Fortschritt-Siegel dahinter
   zurücktreten.
   --------------------------------------------------------------------------- */
.plan-buehne-gesamt { display: grid; gap: 1.1rem; }
.plan-buehne-gesamt.ist-vollbild-fallback {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--wand);
  padding: clamp(.8rem, 2vw, 1.4rem);
  overflow-y: auto;
}
/* Auch im nativen Vollbild (:fullscreen) übernimmt der Browser die gesamte
   Fläche automatisch — hier nur Innenabstand und Hintergrund nachziehen,
   damit es nicht wie ein technischer Ausschnitt wirkt. */
.plan-buehne-gesamt:fullscreen { background: var(--wand); padding: clamp(.8rem, 2vw, 1.4rem); overflow-y: auto; }

.plan-vollbild-leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.plan-vollbild-knopf {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: var(--nacht-marke);
  color: var(--weiss);
  border: 0;
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-xs);
  min-height: 2.75rem;
}
.plan-vollbild-knopf:hover { background: var(--nacht); }
.plan-vollbild-knopf[aria-pressed='true'] { background: var(--petrol-tief); }

.plan-layout-umschalter { display: flex; gap: .3rem; }
.plan-buehne-gesamt:not(.ist-vollbild-fallback):not(:fullscreen) .plan-layout-umschalter { display: none; }
.plan-layout-knopf {
  padding: .5rem .7rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--schiefer);
}
.plan-layout-knopf[aria-pressed='true'] { border-color: var(--petrol); color: var(--nacht); background: color-mix(in srgb, var(--petrol) 8%, var(--weiss)); }

.plan-quer-hinweis {
  display: none;
  padding: .6rem .9rem;
  background: color-mix(in srgb, var(--petrol) 10%, var(--weiss));
  border: 1px dashed var(--petrol-tief);
  font-size: var(--text-xs);
  color: var(--nacht);
}
@media (max-width: 61.99rem) and (max-height: 34rem) and (orientation: landscape) {
  .plan-buehne-gesamt.ist-vollbild-fallback .plan-quer-hinweis,
  .plan-buehne-gesamt:fullscreen .plan-quer-hinweis { display: none; }
}
@media (max-width: 61.99rem) and (orientation: portrait) {
  .plan-buehne-gesamt.ist-vollbild-fallback .plan-quer-hinweis[data-zeigen='true'],
  .plan-buehne-gesamt:fullscreen .plan-quer-hinweis[data-zeigen='true'] { display: block; }
}

/* ---------------------------------------------------------------------------
   Werkstatt — reiner Rahmen um die Fläche; die eigentliche 2D/3D-Aufteilung
   sitzt an .plan-flaeche selbst, damit die Trennlinie zwischen beiden Bereichen
   ein echtes drittes Rasterelement sein kann (2D-Anteil / Trennlinie /
   3D-Anteil) statt eine zweite, konkurrierende Rasterebene zu benötigen.
   --------------------------------------------------------------------------- */
.plan-werkstatt { display: block; }

.plan-ansicht-umschalter { display: flex; gap: .4rem; }
@media (min-width: 62rem) { .plan-ansicht-umschalter { display: none; } }
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) .plan-ansicht-umschalter { display: none; }
.plan-ansicht-knopf {
  flex: 1 1 0;
  padding: .6rem .8rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: .04em;
  color: var(--schiefer);
}
.plan-ansicht-knopf[aria-pressed='true'] { border-color: var(--petrol); color: var(--nacht); background: color-mix(in srgb, var(--petrol) 8%, var(--weiss)); }

.plan-konflikt-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  background: color-mix(in srgb, var(--fehler) 8%, var(--weiss));
  border: 1.5px solid var(--fehler);
  color: var(--nacht);
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-xs);
}
.plan-konflikt-leiste[hidden] { display: none; }
.plan-konflikt-leiste #plan-konflikt-leiste-zeigen { border-color: var(--fehler); color: var(--fehler); flex: 0 0 auto; }

.plan-flaeche {
  background: var(--weiss);
  box-shadow: 0 1px 0 var(--linie), 0 14px 28px rgba(26, 37, 51, .08);
  /* Feste Höhe statt min-height: verhindert eine zirkuläre Prozent-Kette
     (Canvas height:100% -> .plan-3d auto -> .plan-flaeche auto -> ...),
     die sonst je nach Browser auf mehrere zehntausend Pixel "explodiert". */
  height: 24rem;
  display: grid;
  position: relative;
  overflow: hidden;
}
.plan-ansicht-inhalt { min-height: 0; position: relative; }
@media (max-width: 61.99rem) {
  .plan-buehne-gesamt:not(.ist-vollbild-fallback):not(:fullscreen) .plan-flaeche[data-ansicht='grundriss'] .plan-ansicht-inhalt--3d,
  .plan-buehne-gesamt:not(.ist-vollbild-fallback):not(:fullscreen) .plan-flaeche[data-ansicht='3d'] .plan-ansicht-inhalt--grundriss { display: none; }
}
@media (min-width: 62rem) {
  .plan-flaeche { grid-template-columns: 1fr 1fr; height: 26rem; }
}
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) .plan-flaeche { height: min(60vh, 42rem); grid-template-columns: 1fr 1fr; }
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen)[data-layout='2d'] .plan-flaeche,
.plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen)[data-layout='3d'] .plan-flaeche { grid-template-columns: 1fr; }
.plan-buehne-gesamt[data-layout='2d'] .plan-3d-block { display: none; }
.plan-buehne-gesamt[data-layout='3d'] .plan-2d-block { display: none; }

.plan-trennlinie {
  display: none;
  width: .6rem;
  background: var(--linie);
  cursor: col-resize;
  align-self: stretch;
}
.plan-trennlinie:hover, .plan-trennlinie:focus-visible { background: var(--petrol-tief); }
.plan-trennlinie:focus-visible { outline-offset: -2px; }
/* "Geteilt" war bis hierhin ein eigener vierter Modus, der sich von
   "Nebeneinander" nur durch die verschiebbare Trennlinie unterschied —
   keine eigenständige Funktion, also zusammengeführt: Nebeneinander trägt
   die Trennlinie jetzt immer. */
.plan-buehne-gesamt[data-layout='nebeneinander']:is(.ist-vollbild-fallback, :fullscreen) .plan-trennlinie { display: block; }
@media (min-width: 62rem) {
  .plan-buehne-gesamt[data-layout='nebeneinander']:is(.ist-vollbild-fallback, :fullscreen) .plan-flaeche { grid-template-columns: var(--plan-2d-anteil, 1fr) auto var(--plan-3d-anteil, 1fr); }
}

/* ---------------------------------------------------------------------------
   Grundriss — echte Bühne mit Zoom/Pan statt starr eingepasster Fläche.
   Objekte bleiben fokussierbare DOM-Elemente (Ziehen UND Zahlenfelder in
   der Objektliste bedienen denselben Datenbestand — kein separates
   "Barrierefreiheits-System").
   --------------------------------------------------------------------------- */
.plan-grundriss-rahmen { position: relative; overflow: hidden; touch-action: none; background: var(--wand); }
.plan-grundriss-buehne { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.plan-grundriss__gitter { position: absolute; top: 0; left: 0; display: block; pointer-events: none; }
/* Wände werden selbst gezeichnet (mit Lücken für Türen/Fenster), deshalb
   kein CSS-Rahmen mehr auf .plan-grundriss — ein einfacher Border könnte
   keine Öffnungen aussparen. */
.plan-raumgeometrie { position: absolute; top: 0; left: 0; display: block; overflow: visible; pointer-events: none; }
.plan-raumgeometrie__wand { stroke: var(--nacht); stroke-width: 2.5; fill: none; }
.plan-raumgeometrie__fenster { stroke: var(--petrol-tief); stroke-width: 5; fill: none; }
.plan-raumgeometrie__tuerblatt { stroke: var(--schiefer); stroke-width: 1.5; fill: none; }
.plan-raumgeometrie__tuerbogen { stroke: var(--schiefer); stroke-width: 1; stroke-dasharray: 3 3; fill: none; }
.plan-raumgeometrie__vorsprung { fill: color-mix(in srgb, var(--schiefer) 22%, var(--wand)); stroke: var(--nacht); stroke-width: 1.5; }
.plan-grundriss {
  position: relative;
  touch-action: none;
}
.plan-objekt {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--weiss);
  border: 1.5px solid var(--petrol-tief);
  color: var(--nacht);
  cursor: grab;
  font-variation-settings: 'wdth' 62;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--text-micro);
  letter-spacing: .04em;
  text-align: center;
  line-height: 1.15;
  padding-inline: .2rem;
  user-select: none;
}
.plan-objekt:active { cursor: grabbing; }
.plan-objekt[aria-pressed='true'] {
  border-color: var(--nacht);
  border-width: 2.5px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 40%, transparent);
  z-index: 3;
}
.plan-objekt.ist-kollision { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 10%, var(--weiss)); }
.plan-objekt.ist-wandmontage::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--schiefer) 0 4px, transparent 4px 7px);
}
.plan-objekt:focus-visible { outline: 2px solid var(--petrol-tief); outline-offset: 3px; }
.plan-objekt__mass {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -.25rem);
  background: var(--nacht);
  color: var(--weiss);
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-micro);
  letter-spacing: .02em;
  padding: .15rem .35rem;
  white-space: nowrap;
  pointer-events: none;
}

/* Wandabstände des ausgewählten Objekts — einfache, verlässliche Maßlinien
   zu den beiden nächsten Wänden statt einer unsicheren Abstandsberechnung
   zu jedem möglichen Nachbarobjekt. */
#plan-bewegungsflaechen { position: absolute; top: 0; left: 0; pointer-events: none; }
#plan-bewegungsflaechen[hidden] { display: none; }
.plan-bewegungsflaeche {
  position: absolute;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--petrol) 14%, transparent) 0 6px, transparent 6px 13px);
  border: 1.5px dashed color-mix(in srgb, var(--petrol-tief) 60%, transparent);
}
.plan-bewegungsflaechen-hinweis { font-variation-settings: 'wdth' 90; font-size: var(--text-micro); color: var(--schiefer); margin: -.5rem 0 0; }
#plan-abstand-lager { position: absolute; top: 0; left: 0; pointer-events: none; }
#plan-hilfslinien { position: absolute; top: 0; left: 0; pointer-events: none; }
.plan-hilfslinie { position: absolute; background: var(--petrol); }
.plan-hilfslinie--x { width: 1px; top: 0; }
.plan-hilfslinie--y { height: 1px; left: 0; }
.plan-abstand { position: absolute; pointer-events: none; }
.plan-abstand__linie { position: absolute; background: var(--petrol-tief); }
.plan-abstand__linie--x { height: 1px; top: 0; }
.plan-abstand__linie--y { width: 1px; left: 0; }
.plan-abstand__wert {
  position: absolute;
  background: var(--wand);
  color: color-mix(in srgb, var(--petrol-tief) 70%, var(--nacht) 30%);
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-micro);
  padding: .05rem .3rem;
  white-space: nowrap;
}

.plan-3d-block, .plan-2d-block { min-width: 0; }
.plan-3d { position: relative; }
.plan-3d__leinwand { display: block; width: 100%; height: 100%; }
.plan-3d__lage,
.plan-3d__fehler {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .6rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--wand);
  font-variation-settings: 'wdth' 90;
  color: var(--schiefer);
}
.plan-3d__fehler { display: none; }
.plan-3d[data-status='fehler'] .plan-3d__fehler { display: grid; }
.plan-3d[data-status='fehler'] .plan-3d__lage,
.plan-3d[data-status='bereit'] .plan-3d__lage { display: none; }

.plan-3d__hinweis {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  right: .6rem;
  padding: .5rem .7rem;
  background: rgba(26, 37, 51, .82);
  color: var(--weiss);
  font-size: var(--text-micro);
  font-variation-settings: 'wdth' 90;
  pointer-events: none;
}
.plan-3d__hinweis[hidden] { display: none; }

.plan-werkzeug-gruppe {
  position: absolute;
  /* Höher als das Bottom-Sheet (55) — Kamera-/Grundriss-Werkzeuge dürfen
     auf schmalen Bildschirmen nie darunter verschwinden. */
  z-index: 56;
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  max-width: calc(100% - 1.2rem);
}
.plan-werkzeug-gruppe--grundriss { right: .6rem; bottom: .6rem; }
.plan-werkzeug-gruppe--kamera { right: .6rem; bottom: .6rem; }
.plan-mini-werkzeug {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  padding: .3rem .5rem;
  background: rgba(255, 255, 255, .92);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--nacht);
}
.plan-mini-werkzeug:hover { border-color: var(--petrol-tief); }
.plan-mini-werkzeug[aria-pressed='true'] { border-color: var(--petrol); background: color-mix(in srgb, var(--petrol) 14%, var(--weiss)); }

/* ---------------------------------------------------------------------------
   Werkzeugleiste — Rückgängig/Wiederholen/Zurücksetzen, zurückhaltend.
   --------------------------------------------------------------------------- */
.plan-werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.plan-werkzeug {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--nacht);
  min-height: 2.75rem;
}
.plan-werkzeug:hover:not(:disabled) { border-color: var(--petrol-tief); }
.plan-werkzeug:disabled { opacity: .4; cursor: not-allowed; }
.plan-werkzeug--warnung { border-color: var(--fehler); color: var(--fehler); }

/* ---------------------------------------------------------------------------
   Objektkatalog — Kategorien als Tabs, Varianten als Karten mit
   proportionalem Grundriss-Vorschausymbol statt reiner Textschaltfläche.
   --------------------------------------------------------------------------- */
.plan-katalog__tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.plan-katalog__tab {
  padding: .55rem .9rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  font-variation-settings: 'wdth' 90;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--schiefer);
  min-height: 2.75rem;
}
.plan-katalog__tab[aria-selected='true'] { border-color: var(--petrol); color: var(--nacht); background: color-mix(in srgb, var(--petrol) 10%, var(--weiss)); }
.plan-katalog__karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; margin-top: .8rem; }
.plan-katalog__karte {
  position: relative;
  display: grid;
  gap: .4rem;
  padding: .8rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  text-align: left;
  color: var(--nacht);
  font: inherit;
}
.plan-katalog__karte:hover { border-color: var(--petrol-tief); }
.plan-katalog__karte:focus-visible { outline: 2px solid var(--petrol-tief); outline-offset: 2px; border-color: var(--petrol-tief); }
.plan-katalog__karte:active:not(:disabled) { background: color-mix(in srgb, var(--petrol) 7%, var(--weiss)); }
.plan-katalog__karte:disabled { opacity: .45; cursor: not-allowed; }
.plan-katalog__karte.ist-platziert { border-color: var(--petrol); }
.plan-katalog__anzahl {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .05rem .35rem;
  background: var(--petrol-tief);
  color: var(--weiss);
  font-variation-settings: 'wdth' 108;
  font-weight: 800;
  font-size: var(--text-micro);
}
.plan-katalog__vorschau { width: 100%; height: 4.4rem; background: var(--wand); border: 1px dashed var(--linie); display: grid; place-items: center; }
.plan-katalog__vorschau svg { display: block; }
.plan-katalog__form { fill: var(--petrol-tief); stroke: none; }
.plan-katalog__form-hell { fill: color-mix(in srgb, var(--petrol) 22%, var(--weiss)); stroke: var(--petrol-tief); stroke-width: 1.2; }
.plan-katalog__form-strich { fill: none; stroke: var(--petrol-tief); stroke-width: 1.6; stroke-linecap: round; }
.plan-katalog__form-wand { stroke: var(--schiefer); stroke-width: 1.2; stroke-dasharray: 2 2; }
.plan-katalog__name { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: var(--text-xs); }
.plan-katalog__masse { font-variation-settings: 'wdth' 90; font-size: var(--text-micro); color: var(--schiefer); }
.plan-katalog__material { display: flex; gap: .3rem; align-items: center; }
.plan-katalog__material-punkt { width: .55rem; height: .55rem; border: 1px solid color-mix(in srgb, var(--nacht) 30%, transparent); flex: 0 0 auto; }
.plan-katalog__merkmale { display: flex; flex-wrap: wrap; gap: .25rem; }
.plan-katalog__merkmal { font-size: var(--text-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: color-mix(in srgb, var(--petrol-tief) 70%, var(--nacht) 30%); background: color-mix(in srgb, var(--petrol) 10%, var(--weiss)); padding: .1rem .35rem; }

/* ---------------------------------------------------------------------------
   Kompakter Inspektor — ersetzt die frühere, weitläufige Objektliste durch
   ein- und ausklappbare Karten mit exakt den geforderten Feldern.
   --------------------------------------------------------------------------- */
.plan-inspektor { border: 1px solid var(--linie); }
.plan-inspektor__kopf {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem .9rem;
  background: var(--wand);
  border: 0;
  cursor: pointer;
  font-variation-settings: 'wdth' 108;
  font-weight: 800;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--nacht);
}
.plan-inspektor__pfeil { transition: transform .18s var(--ease-weich); }
.plan-inspektor__kopf[aria-expanded='false'] .plan-inspektor__pfeil { transform: rotate(-90deg); }
.plan-inspektor__koerper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s var(--ease-weich);
}
.plan-inspektor__kopf[aria-expanded='false'] + .plan-inspektor__koerper { grid-template-rows: 0fr; }
.plan-inspektor__innen { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .plan-inspektor__koerper { transition: none; } }

.plan-objektliste { display: grid; gap: .5rem; list-style: none; margin: 0; padding: .7rem; }
.plan-objektliste__leer { color: var(--schiefer); font-variation-settings: 'wdth' 90; padding: .3rem 0; }
.plan-objektliste__eintrag {
  display: grid;
  gap: .4rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--linie);
  background: var(--weiss);
}
.plan-objektliste__eintrag.ist-kollision { border-color: var(--fehler); }
.plan-objektliste__eintrag[data-ausgewaehlt='true'] { border-color: var(--petrol); box-shadow: inset 3px 0 0 var(--petrol); }
.plan-objektliste__zeile1 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.plan-objektliste__name { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: var(--text-xs); }
.plan-objektliste__variante { font-variation-settings: 'wdth' 90; font-size: var(--text-micro); color: var(--schiefer); }
.plan-objektliste__aktionen { display: flex; gap: .35rem; flex: 0 0 auto; }
.plan-objektliste__aktion {
  padding: .3rem .55rem;
  background: none;
  border: 1px solid var(--linie);
  color: var(--schiefer);
  cursor: pointer;
  font-size: var(--text-micro);
  font-weight: 700;
}
.plan-objektliste__aktion:hover { border-color: var(--petrol-tief); color: var(--nacht); }
.plan-objektliste__loeschen {
  padding: .3rem .55rem;
  background: none;
  border: 1px solid var(--linie);
  color: var(--fehler);
  cursor: pointer;
  font-size: var(--text-micro);
  font-weight: 700;
  flex: 0 0 auto;
}
.plan-objektliste__loeschen:hover { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 8%, var(--weiss)); }
.plan-objektliste__felder { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; }
.plan-objektliste__feld { display: grid; gap: .15rem; }
.plan-objektliste__feld--breit { flex: 1 1 100%; }
.plan-objektliste__feld--breit select { width: 100%; }
.plan-objektliste__feld label { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-micro); letter-spacing: .08em; color: var(--schiefer); }
.plan-objektliste__feld input,
.plan-objektliste__feld select { font: inherit; font-variation-settings: 'wdth' 92; width: 4.4rem; padding: .3rem; border: 0; border-bottom: 2px solid var(--linie); background: var(--wand); color: var(--nacht); font-size: var(--text-micro); }
.plan-objektliste__feld input:focus-visible,
.plan-objektliste__feld select:focus-visible { border-bottom-color: var(--petrol-tief); outline: 2px solid var(--petrol-tief); outline-offset: 2px; }
.plan-objektliste__warnung { color: var(--fehler); font-variation-settings: 'wdth' 90; font-size: var(--text-micro); margin: 0; display: none; }
.plan-objektliste__eintrag.ist-kollision .plan-objektliste__warnung { display: block; }

/* ---------------------------------------------------------------------------
   Farbwahl (Schritt 4) — kleine, ausdrücklich benannte Palette, kein Free-Picker.
   --------------------------------------------------------------------------- */
.plan-farbgruppe { display: grid; gap: .6rem; }
.plan-farbgruppe__titel { font-variation-settings: 'wdth' 70; font-weight: 700; font-size: var(--text-meta); margin: 0; }
.plan-farbwahl { display: flex; flex-wrap: wrap; gap: .6rem; }
.plan-farbe {
  display: grid;
  gap: .35rem;
  justify-items: center;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  width: 4.4rem;
}
.plan-farbe__muster { width: 2.6rem; height: 2.6rem; border: 1.5px solid var(--linie); }
.plan-farbe[aria-pressed='true'] .plan-farbe__muster { border: 2.5px solid var(--nacht); box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 35%, transparent); }
.plan-farbe__name { font-variation-settings: 'wdth' 90; font-size: var(--text-micro); color: var(--schiefer); text-align: center; }
.plan-farbe:focus-visible { outline: 2px solid var(--petrol-tief); outline-offset: 3px; }
.plan-farbe:active .plan-farbe__muster { box-shadow: 0 0 0 2px color-mix(in srgb, var(--petrol) 45%, transparent); }

/* Größere Kacheln in Schritt 4 — deutlicher als die kompakte Grundform, weil
   hier die Live-3D-Vorschau daneben steht und Material/Farbe die einzige
   Aufgabe des Schritts sind (kein Platzdruck durch Formularfelder). */
.plan-farbwahl--gross .plan-farbe { width: 5.6rem; }
.plan-farbwahl--gross .plan-farbe__muster { width: 3.6rem; height: 3.6rem; }
/* Sichtbare Oberflächenstruktur bei Holz statt reiner Flächenfarbe — Lack-
   und Steinoptik bleiben bewusst glatt, weil das ihre reale Oberfläche ist. */
.plan-farbe__muster[data-struktur='holz'] { background-image: repeating-linear-gradient(95deg, color-mix(in srgb, var(--nacht) 10%, transparent) 0 2px, transparent 2px 7px); }
.plan-farbe__muster[data-struktur='stein'] { background-image: radial-gradient(color-mix(in srgb, var(--nacht) 8%, transparent) 1px, transparent 1.2px); background-size: 5px 5px; }

/* ---------------------------------------------------------------------------
   Gestaltungsschritt (Schritt 4) — Regler links, große Live-3D-Vorschau
   rechts. Dieselbe .plan-3d-Fläche wird per DOM-Umhängung (siehe
   dreiD3DVorschauVerschieben) aus Schritt 3 hierher versetzt statt einen
   zweiten WebGL-Kontext aufzubauen — auf Mobilgeräten ist ein zweiter
   Renderer unnötiger Speicher- und Akkuverbrauch für dieselbe Szene.
   --------------------------------------------------------------------------- */
.plan-gestaltung { display: grid; gap: 1.3rem; }
/* Unter 58rem steht die Vorschau zuerst: eine Auswahl weiter unten zu
   treffen und die Wirkung erst nach dem Zurückscrollen zu sehen, widerspricht
   "sofortige Aktualisierung bei jeder Auswahl" auf einem Telefon. */
.plan-gestaltung__vorschau { order: -1; }
@media (min-width: 58rem) {
  .plan-gestaltung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .plan-gestaltung__vorschau { order: 0; }
}
.plan-gestaltung__regler { display: grid; gap: 1.3rem; }
.plan-gestaltung__vorschau {
  height: 26rem;
  position: relative;
  overflow: hidden;
  background: var(--weiss);
  box-shadow: 0 1px 0 var(--linie), 0 14px 28px rgba(26, 37, 51, .08);
}
/* .plan-3d landet hier per JS als direktes Kind — feste Höhe des Elternteils
   plus absolute Einpassung vermeidet dieselbe zirkuläre Prozent-Kette wie
   beim ursprünglichen .plan-flaeche-Fund (siehe CONTENT_REQUIRED.md). */
.plan-gestaltung__vorschau .plan-3d { position: absolute; inset: 0; }

.plan-stilvorlagen { display: grid; gap: .6rem; }
.plan-stilvorlage-liste { display: flex; flex-wrap: wrap; gap: .6rem; }
.plan-stilvorlage {
  display: grid;
  gap: .3rem;
  padding: .6rem .8rem;
  background: var(--weiss);
  border: 1.5px solid var(--linie);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--nacht);
}
.plan-stilvorlage:hover { border-color: var(--petrol-tief); }
.plan-stilvorlage:focus-visible { outline: 2px solid var(--petrol-tief); outline-offset: 2px; }
.plan-stilvorlage__name { font-variation-settings: 'wdth' 108; font-weight: 800; font-size: var(--text-xs); }
.plan-stilvorlage__muster { display: flex; gap: .2rem; }
.plan-stilvorlage__muster span { width: 1.1rem; height: 1.1rem; border: 1px solid var(--linie); display: block; }

/* ---------------------------------------------------------------------------
   Zusammenfassung (Schritt 5)
   --------------------------------------------------------------------------- */
.plan-zusammenfassung { background: var(--wand); border: 1px dashed var(--linie); padding: clamp(1.1rem, 2.4vw, 1.6rem); margin: 0; max-width: 68ch; }
.plan-zsf-titel { font-variation-settings: 'wdth' 104; font-weight: 800; font-size: var(--text-emphasis); color: var(--nacht); margin: 0 0 1rem; }
.plan-zsf-vorschauen { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem; }
.plan-zsf-vorschau { margin: 0; background: var(--weiss); border: 1.5px solid var(--linie); padding: .6rem; }
.plan-zsf-vorschau__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.plan-zsf-vorschau svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.plan-zsf-vorschau__ersatz { margin: 0; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--text-xs); color: var(--schiefer); }
.plan-zsf-vorschau figcaption { margin-top: .4rem; font-variation-settings: 'wdth' 70; font-weight: 700; text-transform: uppercase; font-size: var(--text-micro); letter-spacing: .1em; color: var(--schiefer); text-align: center; }
.plan-zsf-grundriss__raum { fill: var(--weiss); stroke: var(--nacht); stroke-width: 1.5; }
.plan-zsf-grundriss__wand { stroke: var(--nacht); stroke-width: 2; fill: none; }
.plan-zsf-grundriss__fenster { stroke: var(--petrol-tief); stroke-width: 3; fill: none; }
.plan-zsf-grundriss__tuer { stroke: var(--schiefer); stroke-width: 2.5; fill: none; }
.plan-zsf-grundriss__vorsprung { fill: color-mix(in srgb, var(--schiefer) 22%, var(--wand)); stroke: var(--nacht); stroke-width: 1; }
.plan-zsf-grundriss__objekt { fill: color-mix(in srgb, var(--petrol) 30%, var(--weiss)); stroke: var(--petrol-tief); stroke-width: 1.2; }
.plan-zsf-grundriss__objekt.ist-kollision { fill: color-mix(in srgb, var(--fehler) 25%, var(--weiss)); stroke: var(--fehler); }
.plan-zsf-daten { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0 0 1rem; font-size: var(--text-meta); }
.plan-zsf-daten dt { font-variation-settings: 'wdth' 70; font-weight: 700; color: var(--schiefer); }
.plan-zsf-daten dd { margin: 0; color: var(--nacht); display: flex; align-items: center; gap: .4rem; }
.plan-zsf-farbe { width: 1rem; height: 1rem; border: 1px solid var(--linie); flex: 0 0 auto; display: inline-block; }
.plan-zsf-objekte-titel { font-variation-settings: 'wdth' 70; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .1em; color: var(--schiefer); margin: 0 0 .5rem; }
.plan-zsf-objekte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.plan-zsf-objekte__eintrag { display: flex; gap: .7rem; align-items: center; background: var(--weiss); border: 1.5px solid var(--linie); padding: .5rem .7rem; }
.plan-zsf-objekte__eintrag.ist-kollision { border-color: var(--fehler); background: color-mix(in srgb, var(--fehler) 6%, var(--weiss)); }
.plan-zsf-objekte__icon { flex: 0 0 auto; width: 2.6rem; height: 2rem; }
.plan-zsf-objekte__icon svg { width: 100%; height: 100%; }
.plan-zsf-objekte__daten { display: flex; flex-direction: column; gap: .1rem; }
.plan-zsf-objekte__name { font-variation-settings: 'wdth' 96; font-weight: 700; font-size: var(--text-xs); color: var(--nacht); }
.plan-zsf-objekte__masse { font-size: var(--text-micro); color: var(--schiefer); }
.plan-zsf-objekte__warnung { font-size: var(--text-micro); color: var(--fehler); font-variation-settings: 'wdth' 90; }
.plan-zsf-objekte-leer { color: var(--schiefer); font-size: var(--text-xs); margin: 0; }
.plan-zusammenfassung .plan-konflikt-leiste { margin-bottom: 1rem; }
.plan-export-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.plan-erweiterte-optionen { display: flex; align-items: center; }
.plan-erweiterte-optionen summary { cursor: pointer; font-variation-settings: 'wdth' 90; font-size: var(--text-xs); color: var(--schiefer); list-style: none; }
.plan-erweiterte-optionen summary::-webkit-details-marker { display: none; }
.plan-erweiterte-optionen[open] summary { margin-bottom: .5rem; }
.plan-erweiterte-optionen[open] { flex-direction: column; align-items: flex-start; }

@media (max-width: 36rem) {
  .plan-zsf-vorschauen { grid-template-columns: 1fr; }
}

@media print {
  body * { visibility: hidden; }
  #plan-zusammenfassung, #plan-zusammenfassung * { visibility: visible; }
  #plan-zusammenfassung { position: absolute; top: 0; left: 0; width: 100%; max-width: none; border: none; }
  .plan-zsf-vorschauen { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Übergabe (Schritt 6)
   --------------------------------------------------------------------------- */
.plan-uebergabe-hinweis { max-width: 60ch; }

/* ---------------------------------------------------------------------------
   Status- und Sicherheitszustände
   --------------------------------------------------------------------------- */
.plan-status-zeile { display: flex; align-items: center; gap: .5rem; font-variation-settings: 'wdth' 90; font-size: var(--text-xs); color: var(--schiefer); }
.plan-status-punkt { width: .5rem; height: .5rem; background: var(--petrol); flex: 0 0 auto; }

.plan-einfuehrung { border: 2px dashed var(--petrol); background: var(--weiss); padding: clamp(1.2rem, 2.6vw, 1.8rem); display: grid; gap: .7rem; margin-bottom: clamp(1.25rem, 2.6vw, 1.9rem); }
.plan-einfuehrung__titel { font-variation-settings: 'wdth' 62; font-weight: 700; text-transform: uppercase; font-size: var(--text-label); letter-spacing: .17em; color: color-mix(in srgb, var(--petrol-tief) 70%, var(--nacht) 30%); margin: 0; }
.plan-einfuehrung[hidden] { display: none; }

.plan-alt-hinweis { font-variation-settings: 'wdth' 90; font-size: var(--text-xs); color: var(--schiefer); }

/* Rückgängig-machbare Löschung: statt einer Sicherheitsabfrage je Objekt ein
   kurz sichtbarer Hinweis mit direktem Rückgängig-Zugriff. */
.plan-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 0);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  background: var(--nacht);
  color: var(--weiss);
  font-variation-settings: 'wdth' 90;
  font-size: var(--text-xs);
  box-shadow: 0 10px 24px rgba(26, 37, 51, .3);
  opacity: 0;
  pointer-events: none;
}
.plan-toast.ist-sichtbar { opacity: 1; pointer-events: auto; }
.plan-toast__aktion { background: none; border: 1px solid rgba(255, 255, 255, .5); color: var(--weiss); padding: .3rem .6rem; cursor: pointer; font-weight: 700; font-size: var(--text-xs); }
.plan-toast__aktion:hover { border-color: var(--weiss); }
@media (prefers-reduced-motion: no-preference) {
  .plan-toast { transition: opacity .2s var(--ease-weich); }
}

@media (prefers-reduced-motion: no-preference) {
  .plan-objekt { transition: box-shadow .15s var(--ease-weich), border-color .15s var(--ease-weich); }
  .plan-objekt.ist-eingerastet { animation: plan-einrasten .3s var(--ease-weich); }
  @keyframes plan-einrasten {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--petrol) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--petrol) 55%, transparent); }
  }
  .plan-objekt.ist-kollision-puls { animation: plan-kollision .3s var(--ease-weich); }
  @keyframes plan-kollision {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
  }
  .plan-katalog__karte.ist-hinzugefuegt { animation: plan-hinzugefuegt .35s var(--ease-weich); }
  @keyframes plan-hinzugefuegt {
    0% { background: color-mix(in srgb, var(--petrol) 22%, var(--weiss)); }
    100% { background: var(--weiss); }
  }
  .plan-ansicht-inhalt { transition: opacity .18s var(--ease-weich); }
  .plan-buehne-gesamt { transition: background-color .2s var(--ease-weich); }
}

/* Reine 2D-/Formular-Bedienbarkeit: kein WebGL, keine besondere Layoutstufe
   nötig — .plan-3d__fehler ersetzt die Fläche vollständig durch Text. */
@media (max-width: 26rem) {
  .plan-objektliste__felder { gap: .4rem .6rem; }
  .plan-objektliste__feld input,
  .plan-objektliste__feld select { width: 3.8rem; }
}

/* ---------------------------------------------------------------------------
   Mobile Bedienung (360-430px) — getrennt vom Vollbild-Block oben, weil
   diese Regeln unabhängig von Vollbild greifen: die normale Seite muss auf
   einem Telefon für sich funktionieren, nicht nur im Vollbildmodus.
   --------------------------------------------------------------------------- */
@media (max-width: 36rem) {
  /* Kategorien als einzeilig scrollende Reihe statt umbrechender Kacheln —
     spart auf 360-430px mehrere Zeilen Höhe. */
  .plan-katalog__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
  .plan-katalog__tab { flex: 0 0 auto; }
  /* Zwei Spalten statt einer einzigen sehr breiten Karte je Zeile. */
  .plan-katalog__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Mindestens 44×44px für alle kleinen Werkzeug-Schaltflächen (Grundriss-
     und Kamera-Werkzeuge waren mit 2.2rem/35px darunter). */
  .plan-mini-werkzeug { min-width: 44px; min-height: 44px; }
  .plan-farbe { width: auto; min-width: 44px; }
  /* Das Fortschritt-Siegel verfolgt Lesefortschritt auf einer Fließtext-
     Seite — im Planer gibt es das nicht, und es würde nur mit der neuen
     Objektliste als Bottom Sheet (siehe unten) kollidieren. */
  .fortschritt-siegel { display: none; }
}

/* Objektinspektor als Bottom Sheet: fest über der Notdienst-/Projektleiste
   verankert (deren Höhe ca. 3.25rem + Rahmen, siehe formular.css
   .aktionsleiste), damit die Leiste keine Funktionen der Liste verdeckt und
   umgekehrt die Liste die Leiste nicht verdeckt. Eingeklappt nur der Reiter
   sichtbar, ausgeklappt wächst die Fläche nach oben (bottom bleibt fix),
   mit eigenem Scroll statt die ganze Seite zu verschieben. */
@media (max-width: 36rem) {
  #plan-inspektor {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 3.4rem;
    z-index: 55;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 24px rgba(26, 37, 51, .22);
  }
  #plan-inspektor .plan-inspektor__koerper { overflow-y: auto; }
  /* Reserviert Platz am Fußende von Schritt 3, damit "Zurück"/"Weiter"
     nicht dauerhaft hinter dem fixierten Reiter + der Aktionsleiste liegen. */
  .plan-abschnitt[data-schritt='3'] { padding-bottom: 6.5rem; }
  .plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) #plan-inspektor,
  .plan-buehne-gesamt:is(.ist-vollbild-fallback, :fullscreen) .plan-abschnitt[data-schritt='3'] {
    /* Im Vollbild gibt es keine Aktionsleiste (die tritt dort ohnehin
       zurück) und die eigene Vollbild-Werkstatt-Höhensteuerung übernimmt —
       das Bottom-Sheet-Verhalten bleibt auf die normale Seite beschränkt. */
    position: static;
    max-height: none;
    box-shadow: none;
    padding-bottom: 0;
  }
}