/* Stellplatz — Stile des grafischen Plans (plan.js), des Editors (anpassen.js, Präfix .anp-) und des Druck-SVGs.
   Status-Tokens kommen aus app.css :root; hier stehen Fallbacks. Längen im SVG sind Nutzereinheiten (dm). */

/* ---- SVG-Grundgerüst ---- */
svg.plan {
  display: block; width: 100%; height: 100%;
  background: var(--card, #FFFFFF);
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; outline: none;
}
svg.plan.pannt { cursor: grabbing; }
svg.plan:focus-visible { outline: 2px solid var(--auswahl, #1F4E79); outline-offset: -2px; }

/* Muster (Pattern-Inhalte) */
.plan .muster-grund { fill: var(--plan-flaeche, #EEF0F3); }
.plan .muster-strich { fill: #D3D8DE; }
.plan .muster-linie { stroke: #C9CED5; stroke-width: .5; }
.plan .muster-gesperrt-grund { fill: var(--gesperrt-bg, #E9E9E9); }
.plan .muster-gesperrt-strich { fill: #C4C4C4; }
.plan .muster-raster { fill: none; stroke: #E4E7EB; stroke-width: .35; }
.plan .raster { fill: var(--muster-raster, none); pointer-events: none; }

/* Ebenen, Flächen, Achsen */
.plan .ebene-rahmen { fill: var(--plan-flaeche, #EEF0F3); stroke: var(--plan-linie, #9AA3AE); stroke-width: .8; }
.plan .ebene-label { font-size: 6px; font-weight: 700; fill: var(--muted-foreground, #5B6470); letter-spacing: .02em; }
.plan .flaeche { fill: var(--plan-flaeche, #EEF0F3); stroke: var(--plan-linie, #9AA3AE); stroke-width: .5; }
.plan .flaeche[data-typ="gang"] { fill: #F8F9FB; stroke-dasharray: 2 1.5; }
.plan .flaeche[data-typ="technik"] { fill: #E1E5EA; }
.plan .flaeche[data-typ="rampe"] { fill: var(--muster-rampe, #E6E9ED); }
.plan .flaeche[data-typ="gitterrost"] { fill: var(--muster-gitter, #E6E9ED); }
.plan .flaeche[data-typ="wand"] { fill: none; stroke: #6B7280; stroke-width: 1.2; }
.plan .flaeche-label { font-size: 4.5px; fill: var(--muted-foreground, #5B6470); pointer-events: none; }
.plan .achse { font-size: 4px; fill: var(--plan-linie, #9AA3AE); }
.plan .achse-linie { stroke: var(--plan-linie, #9AA3AE); stroke-width: .3; }

/* Ebenen-Filter: die andere Hälfte dimmen */
svg.plan[data-ebene="-1"] .ebene[data-ebene="-2"],
svg.plan[data-ebene="-2"] .ebene[data-ebene="-1"] { opacity: .35; }

/* ---- Kacheln ---- */
.plan .platz { cursor: pointer; outline: none; }
.plan .platz .kachel { fill: var(--frei-bg, #DDF3E4); stroke: #FFFFFF; stroke-width: .6; }
.plan .platz[data-status="belegt"] .kachel { fill: var(--belegt-bg, #DCE9F5); }
.plan .platz[data-status="reserviert"] .kachel { fill: var(--reserviert-bg, #FBE9C6); }
.plan .platz[data-status="gesperrt"] .kachel { fill: var(--muster-gesperrt, var(--gesperrt-bg, #E9E9E9)); }
.plan .platz:hover .kachel { filter: brightness(.94); }
.plan .platz .balken { fill: var(--frei-fg, #009E73); }
.plan .platz[data-status="belegt"] .balken { fill: var(--belegt-fg, #0072B2); }
.plan .platz[data-status="reserviert"] .balken { fill: var(--reserviert-fg, #B8770A); }
.plan .platz[data-status="gesperrt"] .balken { fill: var(--gesperrt-fg, #5F5F5F); }
.plan .platz .nr { font-size: 5.5px; font-weight: 600; fill: var(--foreground, #1F2328); pointer-events: none; }
.plan .platz .name { font-size: 5px; fill: var(--foreground, #1F2328); pointer-events: none; }
.plan .platz .kz { font-size: 3.8px; fill: var(--muted-foreground, #5B6470); font-variant-numeric: tabular-nums; pointer-events: none; }
.plan .platz[data-status="gesperrt"] .name,
.plan .platz[data-status="gesperrt"] .kz { fill: var(--gesperrt-fg, #5F5F5F); }
.plan .platz .glyph { pointer-events: none; }
.plan .platz[data-status="frei"] .glyph { display: none; }
.plan .platz[data-status="belegt"] .glyph { fill: var(--belegt-fg, #0072B2); }
.plan .platz[data-status="reserviert"] .glyph { fill: var(--reserviert-fg, #B8770A); fill-rule: evenodd; stroke: var(--reserviert-fg, #B8770A); stroke-width: .7; }
.plan .platz[data-status="gesperrt"] .glyph { fill: none; stroke: var(--gesperrt-fg, #5F5F5F); stroke-width: 1.3; stroke-linecap: round; }
.plan .platz .frist { display: none; pointer-events: none; }
.plan .platz[data-frist="bald"] .frist { display: inline; fill: var(--frist, #D55E00); }
.plan .platz[data-frist="vorbei"] .frist { display: inline; fill: var(--fehler, #B3261E); stroke: #FFFFFF; stroke-width: .6; }
.plan .platz.ausgewaehlt .nr { fill: var(--auswahl, #1F4E79); }

/* Detailstufen: s = nur Kurznummer, m = Nummer, l = Nummer + Name + Kennzeichen */
svg.plan[data-zoom="s"] .platz .nr { font-size: 7px; }
svg.plan[data-zoom="s"] .platz .name, svg.plan[data-zoom="s"] .platz .kz,
svg.plan[data-zoom="m"] .platz .name, svg.plan[data-zoom="m"] .platz .kz { visibility: hidden; }

/* Auswahl, Fokus, Pulsieren (Overlay-Rechtecke, damit Nachbarkacheln den Rahmen nicht überdecken) */
.plan .overlay { pointer-events: none; }
.plan .auswahl-rahmen { fill: none; stroke: var(--auswahl, #1F4E79); stroke-width: 1.6; stroke-linejoin: round; }
.plan .fokus-rahmen { fill: none; stroke: var(--auswahl, #1F4E79); stroke-width: 1; stroke-dasharray: 2 1.2; stroke-linejoin: round; }
.plan .puls-rahmen { fill: var(--frist, #D55E00); fill-opacity: .18; stroke: var(--frist, #D55E00); stroke-width: 1.5; animation: plan-puls .9s ease-in-out infinite; }
@keyframes plan-puls {
  0%, 100% { stroke-width: 1.2; stroke-opacity: 1; fill-opacity: .12; }
  50% { stroke-width: 3; stroke-opacity: .45; fill-opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .plan .puls-rahmen { animation: none; stroke-width: 2.4; }
}

/* Tooltip (HTML-Element außerhalb des SVG; Position setzt plan.js per CSSOM) */
.tooltip .tt-status { display: inline-block; font-size: .75rem; font-weight: 600; padding: 0 .4em; border-radius: 3px; margin: .1rem 0 .25rem; background: rgba(255,255,255,.14); }
.tooltip .tt-status[data-status="belegt"] { background: var(--belegt-fg, #0072B2); }
.tooltip .tt-status[data-status="reserviert"] { background: var(--reserviert-fg, #B8770A); }
.tooltip .tt-status[data-status="gesperrt"] { background: var(--gesperrt-fg, #5F5F5F); }
.tooltip .tt-status[data-status="frei"] { background: var(--frei-fg, #009E73); }
.tooltip .tt-kz { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; opacity: .9; }
.tooltip .tt-frist { margin-top: .2rem; }
.tooltip .tt-frist.bald { color: #FFC08A; font-weight: 600; }
.tooltip .tt-frist.vorbei { color: #FFA3A3; font-weight: 600; }
.tooltip .tt-notiz { opacity: .8; font-style: italic; }

/* ---- Editor-Modus (svg.plan.bearbeiten) ---- */
svg.plan.bearbeiten { cursor: default; }
svg.plan.bearbeiten.pannt { cursor: grabbing; }
svg.plan.bearbeiten .platz { cursor: move; }
svg.plan.bearbeiten .platz .name, svg.plan.bearbeiten .platz .kz, svg.plan.bearbeiten .platz .glyph, svg.plan.bearbeiten .platz .frist { display: none; }
svg.plan.bearbeiten .platz .nr { font-size: 5.5px; }
svg.plan.bearbeiten .flaeche { cursor: move; }
svg.plan.bearbeiten .flaeche[data-typ="wand"] { pointer-events: stroke; stroke-width: 2; }
svg.plan.bearbeiten .ebene-rahmen { stroke-dasharray: 3 2; stroke: var(--auswahl, #1F4E79); stroke-width: .6; }
svg.plan.bearbeiten .ebene-label { fill: var(--auswahl, #1F4E79); }
.plan .anp-auswahl rect { fill: var(--auswahl, #1F4E79); fill-opacity: .08; stroke: var(--auswahl, #1F4E79); stroke-width: 1.2; stroke-dasharray: 2.4 1.4; pointer-events: none; }
.plan .anp-vorschau rect { fill: var(--belegt-bg, #DCE9F5); fill-opacity: .6; stroke: var(--belegt-fg, #0072B2); stroke-width: .6; stroke-dasharray: 1.5 1; pointer-events: none; }
.plan .anp-vorschau text { font-size: 5px; fill: var(--belegt-fg, #0072B2); pointer-events: none; }
.plan .anp-startpunkt { fill: none; stroke: var(--frist, #D55E00); stroke-width: .8; pointer-events: none; }
.plan .anp-nummer { font-size: 4px; font-weight: 700; fill: #FFFFFF; paint-order: stroke; stroke: var(--auswahl, #1F4E79); stroke-width: 2; pointer-events: none; }

/* Werkzeugleiste */
.anp-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .4rem 0 .5rem; }
.anp-gruppe { display: inline-flex; gap: .2rem; align-items: center; }
.anp-gruppe + .anp-gruppe { margin-left: .4rem; padding-left: .6rem; border-left: 1px solid var(--border, #CBD1D8); }
.anp-rechts { margin-left: auto; }
.anp-knopf { font: inherit; padding: .35rem .7rem; border-radius: var(--radius, 6px); border: 1px solid var(--border, #CBD1D8); background: var(--card, #fff); color: var(--foreground, #1F2328); cursor: pointer; line-height: 1.2; }
.anp-knopf:hover { background: var(--muted, #E8EBEF); }
.anp-knopf:disabled { opacity: .45; cursor: default; }
.anp-knopf.aktiv { background: var(--primary-hell, #E6EEF6); border-color: var(--primary, #1F4E79); color: var(--primary, #1F4E79); font-weight: 600; }
.anp-knopf.primaer { background: var(--primary, #1F4E79); border-color: var(--primary, #1F4E79); color: #fff; font-weight: 600; }
.anp-knopf.primaer:hover { filter: brightness(1.1); }
.anp-knopf.gefahr { color: var(--fehler, #B3261E); border-color: var(--fehler, #B3261E); }
.anp-knopf.gefahr:hover { background: var(--fehler-hell, #F9DEDC); }
.anp-knopf.klein { padding: .2rem .5rem; font-size: .85rem; }
.anp-werkzeugbox { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: end; gap: .4rem .7rem; padding: .55rem .7rem; background: var(--primary-hell, #E6EEF6); border: 1px solid var(--primary, #1F4E79); border-radius: var(--radius, 6px); }
.anp-werkzeugbox .anp-feld { margin: 0; min-width: 5.5rem; }
.anp-werkzeugbox .anp-feld input, .anp-werkzeugbox .anp-feld select { width: 100%; }
.anp-werkzeugbox .anp-hinweis { flex-basis: 100%; font-size: .88rem; color: var(--primary, #1F4E79); font-weight: 600; }
.anp-werkzeugbox .anp-frage { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem .6rem; background: #FFF7E6; border: 1px solid var(--warn, #B8770A); border-radius: var(--radius, 6px); }
.anp-meldung { flex-basis: 100%; min-height: 1.2rem; font-size: .88rem; color: var(--muted-foreground, #5B6470); }
.anp-meldung.fehler { color: var(--fehler, #B3261E); font-weight: 600; }
.anp-meldung.ok { color: var(--ok, #009E73); font-weight: 600; }
.anp-konflikt { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .6rem .8rem; background: #FFF7E6; border: 1px solid var(--warn, #B8770A); border-radius: var(--radius, 6px); font-weight: 600; }
.anp-konflikt small { flex-basis: 100%; font-weight: 400; color: var(--muted-foreground, #5B6470); }

/* Editor-Fläche: Plan links, Eigenschaften rechts */
.anp-flaeche { flex: 1; display: flex; gap: .75rem; min-height: 0; }
.anp-flaeche .plan-wrap { flex: 1; min-width: 0; }
.anp-eigenschaften { width: 19rem; flex: none; overflow: auto; background: var(--card, #fff); border: 1px solid var(--border, #CBD1D8); border-radius: var(--radius, 6px); padding: .8rem .9rem 1rem; font-size: .92rem; }
.anp-eigenschaften h2 { font-size: 1rem; margin: 0 0 .5rem; }
.anp-eigenschaften h3 { font-size: .8rem; margin: .9rem 0 .3rem; color: var(--muted-foreground, #5B6470); text-transform: uppercase; letter-spacing: .03em; }
.anp-eigenschaften p { margin: .3rem 0 .6rem; color: var(--muted-foreground, #5B6470); }
.anp-eigenschaften kbd { font-family: ui-monospace, Consolas, monospace; font-size: .85em; padding: 0 .3em; border: 1px solid var(--border, #CBD1D8); border-bottom-width: 2px; border-radius: 3px; background: var(--muted, #E8EBEF); }
.anp-feld { display: flex; flex-direction: column; gap: .15rem; margin-bottom: .55rem; }
.anp-feld > span { font-size: .8rem; color: var(--muted-foreground, #5B6470); font-weight: 600; }
.anp-feld input, .anp-feld select { font: inherit; color: inherit; padding: .3rem .45rem; border: 1px solid var(--input, #CBD1D8); border-radius: var(--radius, 6px); background: #fff; width: 100%; }
.anp-feld input:focus, .anp-feld select:focus { outline: 2px solid var(--ring, #1F4E79); outline-offset: 0; }
.anp-feld input:invalid, .anp-feld input.ungueltig { border-color: var(--fehler, #B3261E); outline-color: var(--fehler, #B3261E); }
.anp-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.anp-zeile-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.anp-eigenschaften .anp-knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.anp-eigenschaften .anp-fehler { color: var(--fehler, #B3261E); font-size: .85rem; font-weight: 600; }
.anp-liste { list-style: none; padding: 0; margin: .3rem 0; }
.anp-liste li { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-top: 1px solid var(--border, #CBD1D8); }
@media (max-width: 1100px) {
  .anp-flaeche { flex-direction: column; }
  .anp-eigenschaften { width: auto; max-height: 40vh; }
}

/* ---- Druck-SVG (planFuerDruck): Stile sind Präsentationsattribute im SVG; hier nur Einbettung ---- */
svg.plan-druck { display: block; width: 100%; height: auto; background: #fff; font-family: system-ui, "Segoe UI", Arial, sans-serif; }
@media print {
  svg.plan-druck { page-break-inside: avoid; }
}