/* Seitenprofil unter der Karte (profil.js). Alle Farben als Variablen; der Nachtmodus (nur per Knopf, data-theme="dark")
   setzt nur die Werte um, gedruckt wird immer hell (die dunklen Werte gelten nur @media screen). */
:root {
  --profil-route: #b0007a;
  --profil-gelaende: #b9c99a; --profil-gelaende-rand: #6f8248;
  --profil-streifen: #e4ead6;
  --profil-gitter: var(--rule);
  --profil-achse: var(--muted);
  --profil-rot: var(--bad);
}
@media screen {
  :root[data-theme="dark"] {
    --profil-route: #e05bb8; --profil-gelaende: #4a5a35; --profil-gelaende-rand: #9ab56a; --profil-streifen: #2c3424;
  }
}

/* ---------- Rahmen ---------- */
.profil { display: grid; gap: 4px; min-width: 0; }
.pf-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-inline: 4px; }
.pf-schalter { padding: 4px 10px 4px 8px; font-size: 13px; letter-spacing: .12em; color: var(--brand-fg); border-color: var(--rule); }
.pf-schalter::before { content: "▾"; display: inline-block; margin-right: 6px; transition: transform .15s; }
.profil.zu .pf-schalter::before { transform: rotate(-90deg); }
.profil.zu .pf-inhalt { display: none; }
.pf-inhalt { display: grid; gap: 4px; min-width: 0; }
.pf-groesse { margin-left: auto; padding: 4px 10px; font-size: 13px; color: var(--muted); border-color: var(--rule); }
.pf-groesse::before { content: "⇕"; margin-right: 5px; }
.pf-groesse[aria-pressed="true"] { color: var(--brand-fg); }
.pf-info { flex: 1 1 260px; margin: 0; min-height: 1.4em; font-size: 13px; line-height: 1.4; color: var(--text); }
.pf-info.aktiv { font-family: var(--f-body); }
.pf-info small { color: var(--muted); font-family: var(--f-num); }
.pf-flaeche { position: relative; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); }
.pf-svg { display: block; width: 100%; max-width: none; height: auto; touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; cursor: crosshair; font: 10px var(--f-body); }
.pf-svg:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: -3px; border-radius: 12px; }
.pf-leer { margin: 0; padding: 14px 12px; font-size: 13px; color: var(--muted); }
.pf-legende { padding-inline: 4px; font-size: 13px; }
.pf-legende summary { cursor: pointer; color: var(--muted); font: 600 13px/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; }
.pf-legende p { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; }
.pf-legende p.hint { display: block; }
.pf-lg { display: inline-block; width: 18px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 2px; }
.pf-lg-bahn { height: 4px; vertical-align: 2px; background: var(--profil-route); }
.pf-lg-gelaende { background: var(--profil-gelaende); border-top: 2px solid var(--profil-gelaende-rand); }
.pf-lg-streifen { background: var(--profil-streifen); }
.pf-lg-msa { height: 0; border-top: 2px dashed var(--warn); vertical-align: 3px; }
.pf-lg-ctl { background: color-mix(in srgb, var(--asp-ctl) 16%, transparent); border: 1.5px solid var(--asp-ctl); }
.pf-lg-res { background: repeating-linear-gradient(45deg, var(--asp-res) 0 1.5px, transparent 1.5px 5px); border: 1.5px solid var(--asp-res); }
.pf-lg-zone { border: 1.5px dashed var(--asp-zone); }
.pf-lg-rot { height: 4px; vertical-align: 2px; background: var(--profil-rot); }

/* ---------- Zeichnung ---------- */
.pf-gitter { stroke: var(--profil-gitter); stroke-width: 1; }
.pf-achse { fill: var(--profil-achse); font: 10px var(--f-num); }
.pf-asp { stroke: none; }
.pf-asp-controlled { fill: color-mix(in srgb, var(--asp-ctl) 13%, transparent); }
.pf-asp-restricted { fill: color-mix(in srgb, var(--asp-res) 10%, transparent); }
.pf-asp-zone { fill: color-mix(in srgb, var(--asp-zone) 9%, transparent); }
.pf-asp-other { fill: color-mix(in srgb, var(--asp-zone) 6%, transparent); }
.pf-asp-rand { fill: none; stroke-width: 1.5; }
.pf-asp-rand.pf-asp-controlled { stroke: var(--asp-ctl); }
.pf-asp-rand.pf-asp-restricted { stroke: var(--asp-res); }
.pf-asp-rand.pf-asp-zone, .pf-asp-rand.pf-asp-other { stroke: var(--asp-zone); stroke-dasharray: 4 3; }
.pf-schraffur { stroke: color-mix(in srgb, var(--asp-res) 45%, transparent); stroke-width: 1.5; }
.pf-asp-text { font: 600 10px var(--f-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pf-asp-t-controlled { fill: var(--asp-ctl); }
.pf-asp-t-restricted { fill: var(--asp-res); }
.pf-asp-t-zone, .pf-asp-t-other { fill: var(--asp-zone); }
.pf-streifen { fill: var(--profil-streifen); }
.pf-gelaende { fill: var(--profil-gelaende); stroke: var(--profil-gelaende-rand); stroke-width: 1.2; stroke-linejoin: round; }
.pf-msa { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pf-msa-text { fill: var(--warn); font: 600 10px var(--f-num); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pf-hindernis { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.pf-platz { fill: var(--surface); stroke: var(--map-label); stroke-width: 1.8; }
.pf-platz-text { fill: var(--map-label); font: 600 10px var(--f-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pf-halo { fill: none; stroke-width: 11; stroke-linecap: butt; stroke-linejoin: round; opacity: .45; }
.pf-halo-controlled { stroke: var(--asp-ctl); }
.pf-halo-restricted { stroke: var(--asp-res); }
.pf-halo-zone { stroke: var(--warn-strong); }
.pf-bahn { fill: none; stroke: var(--profil-route); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.pf-bahn-rot { fill: none; stroke: var(--profil-rot); stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 6 3; }
.pf-marke { fill: var(--surface); stroke: var(--profil-route); stroke-width: 2; }
.pf-marke-text { fill: var(--profil-route); font: 700 10px var(--f-display); letter-spacing: .06em; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pf-stopp-linie { stroke: var(--rule-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.pf-stopp { fill: var(--ink); font: 700 12px var(--f-display); letter-spacing: .04em; }
.pf-kreuz-linie { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.pf-kreuz-bahn { fill: var(--profil-route); stroke: var(--surface); stroke-width: 2; }
.pf-kreuz-boden { fill: var(--profil-gelaende-rand); stroke: var(--surface); stroke-width: 1.5; }
.pf-kreuz[hidden] { display: none; }

/* Stelle aus dem Profil auf der Leaflet-Karte */
.leaflet-interactive.profil-marker, .profil-marker { fill: var(--profil-route); stroke: var(--surface); }

/* Eigene Fläche unter der Karte (volle Breite der Übersichtsspalte); die Karte darüber behält mindestens 320 px */
.profil-card { padding: 10px 12px 8px; min-width: 0; }
/* Große Karte: unten angedockt, höchstens rund 30 % der Höhe (Zeichenhöhe aus profil.js), ein- und ausklappbar */
.workspace-side.expanded .profil-card { max-height: 32vh; overflow-y: auto; padding: 8px 12px 6px; box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .35); }
.workspace-side.expanded .pf-groesse, .workspace-side.expanded .pf-legende { display: none; }
@media (max-width: 480px) {
  .pf-info { font-size: 12px; }
  .pf-legende summary { font-size: 12px; }
}