/* 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; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.pf-kopf { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-inline: 4px; }
.pf-schalter { padding: 4px 10px 4px 8px; font-size: calc(13px * var(--fs, 1)); 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: calc(13px * var(--fs, 1)); color: var(--muted); border-color: var(--rule); }
.pf-groesse::before { content: "⇕"; margin-right: 5px; }
.pf-vollbild-knopf { padding: 4px 10px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); border-color: var(--rule); }
.pf-vollbild-knopf::before { content: "⤢"; margin-right: 5px; }
.pf-groesse[aria-pressed="true"] { color: var(--brand-fg); }
.pf-info { flex: 1 1 260px; min-width: 0; margin: 0; font-size: calc(13px * var(--fs, 1)); line-height: 1.4; color: var(--text); }
/* Desktop: Kopf einzeilig (Zusammenfassung notfalls gekürzt, voller Text im title); sie ändert sich nur mit der Route */
@media (min-width: 961px) { .pf-info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.pf-info small { color: var(--muted); font-family: var(--f-num); }
/* Werte an der Messlinie: schwebend über dem Diagramm, ohne Einfluss auf das Layout */
.pf-mess { position: absolute; z-index: 2; max-width: 280px; max-height: calc(100% - 8px); overflow: hidden; padding: 5px 9px; pointer-events: none;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .35); color: var(--text); font: calc(12px * var(--fs, 1))/1.4 var(--f-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-mess[hidden] { display: none; }
.pf-mess.t-bad { border-color: var(--profil-rot); }
.pf-mess small { color: var(--muted); font-family: var(--f-num); }
.pf-mess .asp-dot { margin-right: 4px; }
.profil:is(.gross, .vollbild) .pf-mess { font-size: calc(13.5px * var(--fs, 1)); max-width: 340px; }
/* Fußzeile: „Legende“ links, Hinweis zur Luftraum-Anzeigegrenze rechts; die aufgeklappte Legende nimmt die ganze Breite */
.pf-fuss { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.pf-fuss .pf-legende { flex: 0 0 auto; }
.pf-fuss .pf-legende[open] { flex-basis: 100%; order: 2; }
.pf-fuss .lr-hinweis { flex: 1 1 240px; min-width: 0; text-align: right; }
@media (max-width: 599px) { .pf-fuss .lr-hinweis { flex-basis: 100%; text-align: left; } }
.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: calc(10px * var(--fs, 1)) 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: calc(13px * var(--fs, 1)); color: var(--muted); }
.pf-legende { padding-inline: 4px; font-size: calc(13px * var(--fs, 1)); }
.pf-legende summary { cursor: pointer; color: var(--muted); font: 600 calc(13px * var(--fs, 1))/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); }
.pf-lg-gelb { height: 4px; vertical-align: 2px; background: var(--warn-strong); }

/* ---------- Zeichnung ---------- */
.pf-gitter { stroke: var(--profil-gitter); stroke-width: 1; }
.pf-achse { fill: var(--profil-achse); font: calc(10px * var(--fs, 1)) 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 calc(10px * var(--fs, 1)) 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 calc(10px * var(--fs, 1)) 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 calc(10px * var(--fs, 1)) 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-bahn-gelb { fill: none; stroke: var(--warn-strong); stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 2 3; }
.pf-marke { fill: var(--surface); stroke: var(--profil-route); stroke-width: 2; }
.pf-marke-text { fill: var(--profil-route); font: 700 calc(10px * var(--fs, 1)) 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 calc(12px * var(--fs, 1)) 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: kompakt unten angedockt (Zeichenhöhe aus profil.js), ein- und ausklappbar, „Größer“ und Vollbild im Kopf.
   Legende und Luftraum-Hinweis entfallen hier (Hinweis steht in der Kartenecke, Legende im Vollbild). */
.pf-wind-knopf { display: none; padding: 4px 10px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); border-color: var(--rule); }
.pf-wind-knopf[aria-pressed="true"] { color: var(--brand-fg); }
.workspace-side.expanded .profil-card { max-height: 50vh; overflow-y: auto; padding: 6px 10px; box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .35); }
.workspace-side.expanded .pf-fuss { display: none; }
.workspace-side.expanded .profil:not(.zu):has(.pf-inhalt.mit-wind) .pf-wind-knopf { display: inline-block; }
.workspace-side.expanded .pf-kopf { flex-wrap: nowrap; align-items: center; }
.workspace-side.expanded .pf-info { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-side.expanded .pf-groesse { margin-left: 0; }
.workspace-side.expanded .profil.wind-zu .pf-wind { display: none; }
.workspace-side.expanded .profil.wind-zu .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr); }
/* Winddreieck kompakt: schmaler, Figur füllt die Profilhöhe, nur die WCA-Zeile als Text */
.workspace-side.expanded .profil:not(.gross) .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr) 210px; column-gap: 8px; }
.workspace-side.expanded .profil:not(.gross) .pf-wind { grid-template-rows: auto minmax(0, 1fr) auto; padding: 3px 8px 4px; }
.workspace-side.expanded .profil:not(.gross) .wk-legende li:not(.wd-wca) { display: none; }
.workspace-side.expanded .profil:not(.gross) .wk-gering { font-size: calc(11px * var(--fs, 1)); line-height: 1.25; }
/* Stellung „Größer“: größere Beschriftung, kräftigere Linien (die Zeichnung skaliert Abstände mit, profil.js) */
.profil:is(.gross, .vollbild) .pf-achse { font-size: calc(12.5px * var(--fs, 1)); }
.profil:is(.gross, .vollbild) .pf-asp-text, .profil:is(.gross, .vollbild) .pf-msa-text, .profil:is(.gross, .vollbild) .pf-platz-text, .profil:is(.gross, .vollbild) .pf-marke-text { font-size: calc(12.5px * var(--fs, 1)); }
.profil:is(.gross, .vollbild) .pf-stopp { font-size: calc(15px * var(--fs, 1)); }
.profil:is(.gross, .vollbild) .pf-bahn, .profil:is(.gross, .vollbild) .pf-bahn-rot { stroke-width: 4.5; }
.profil:is(.gross, .vollbild) .pf-halo { stroke-width: 14; }
.profil:is(.gross, .vollbild) .pf-gelaende { stroke-width: 1.6; }
.profil:is(.gross, .vollbild) .pf-msa, .profil:is(.gross, .vollbild) .pf-asp-rand { stroke-width: 2; }
.profil:is(.gross, .vollbild) .pf-hindernis { stroke-width: 1.5; }
.profil:is(.gross, .vollbild) .pf-marke { stroke-width: 2.5; }
@media (max-width: 480px) {
  .pf-info { font-size: calc(12px * var(--fs, 1)); }
  .pf-legende summary { font-size: calc(12px * var(--fs, 1)); }
}

/* ---------- Winddreieck-Kasten (wind-kasten.js) rechts neben der Profilzeichnung, am Handy darunter ----------
   Feste Zeilenzahl; die Zeichnung füllt die freie Fläche (wind-kasten.js zeichnet sie passend zu deren Größe),
   wechselnde Teilstrecken ändern die Höhe nicht. Mit „Größer“ wächst die Fläche und damit die Figur. */
.pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr) 272px; column-gap: 10px; }
.pf-inhalt.mit-wind .pf-flaeche { grid-column: 1; grid-row: 1; }
.pf-inhalt.mit-wind .pf-fuss { grid-column: 1; grid-row: 2; }
.pf-inhalt.mit-wind .pf-wind { grid-column: 2; grid-row: 1 / span 2; }
.profil.gross .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr) 272px; }
.pf-wind { display: grid; grid-template-rows: auto minmax(60px, 1fr) auto; gap: 2px; min-width: 0; padding: 5px 9px 6px;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--zinc-50); color: var(--text); font-size: calc(12px * var(--fs, 1)); overflow: hidden; }
.pf-wind[hidden] { display: none; }
.wk-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; line-height: 1.3; }
.wk-kopf b { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-size: calc(13px * var(--fs, 1)); }
.wk-kopf span { overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.wk-bild { position: relative; min-height: 0; }
.wk-bild .wk-svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.wk-leer { align-self: center; margin: 0; color: var(--muted); line-height: 1.35; }
.wk-legende { margin: 0; gap: 0; font-size: calc(12px * var(--fs, 1)); line-height: 1.32; }
.wk-legende li { overflow-wrap: anywhere; }
.wk-legende span { overflow: hidden; text-overflow: ellipsis; }
.profil:is(.gross, .vollbild) .wk-legende, .profil:is(.gross, .vollbild) .pf-wind { font-size: calc(13px * var(--fs, 1)); }
@media (max-width: 599px) {
  .pf-inhalt.mit-wind, .profil.gross .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr); }
  .pf-inhalt.mit-wind .pf-wind { grid-column: 1; grid-row: 2; grid-template-rows: auto 150px auto; }
  .profil.gross .pf-inhalt.mit-wind .pf-wind { grid-template-rows: auto 210px auto; }
  .pf-inhalt.mit-wind .pf-fuss { grid-row: 3; }
  /* Große Karte am Handy: Kopf nur mit Schaltern, Winddreieck (falls eingeblendet) niedrig unter dem Profil */
  .workspace-side.expanded :is(.pf-info, .pf-groesse) { display: none; }
  .workspace-side.expanded .profil:not(.gross) .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr); }
  .workspace-side.expanded .profil .pf-inhalt.mit-wind .pf-wind { grid-template-rows: auto 96px auto; }
  .workspace-side.expanded .pf-kopf { justify-content: space-between; }
}
.wk-legende .wd-wca { padding-left: 0; }
.pf-wind:has(.wk-gering) { grid-template-rows: auto minmax(40px, 1fr) auto; }

/* ---------- Vollbild (profil-vollbild.js): #profil liegt in einem modalen Dialog über fast dem ganzen Fenster ---------- */
html.pf-vollbild-offen { overflow: hidden; }
.profil-card.pf-platzhalter { display: grid; place-items: center; }
.profil-card.pf-platzhalter::after { content: "Seitenprofil im Vollbild geöffnet"; color: var(--muted); font-size: calc(13px * var(--fs, 1)); }
dialog.pf-dialog { width: 95vw; height: 85vh; max-width: none; max-height: none; margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 20px 60px -20px rgba(0, 0, 0, .5); }
dialog.pf-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.pf-dialog::backdrop { background: rgba(10, 10, 10, .6); }
.pf-dialog-kopf { display: flex; align-items: center; gap: 6px 16px; padding: 8px 8px 6px 18px; border-bottom: 1px solid var(--rule); }
.pf-dialog-kopf h2 { margin: 0; font: 700 calc(20px * var(--fs, 1))/1.2 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-fg); }
.pf-dialog-hinweis { flex: 1 1 auto; min-width: 0; margin: 0; font-size: calc(12.5px * var(--fs, 1)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-dialog .pf-dialog-zu { display: grid; place-items: center; flex: none; width: 44px; height: 44px; min-height: 0; margin-left: auto; padding: 0; border: 0; border-radius: 10px;
  background: none; box-shadow: none; color: var(--muted); font: 400 calc(28px * var(--fs, 1))/1 var(--f-body); letter-spacing: 0; text-transform: none; cursor: pointer; }
.pf-dialog .pf-dialog-zu:hover { background: var(--zinc-50); color: var(--ink); }
.pf-dialog .pf-dialog-zu:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: -2px; }
.profil.vollbild { min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 8px 16px 12px; }
.profil.vollbild .pf-schalter, .profil.vollbild .pf-groesse, .profil.vollbild .pf-vollbild-knopf { display: none; }
.profil.vollbild .pf-info { font-size: calc(14px * var(--fs, 1)); white-space: normal; }
.profil.vollbild.zu .pf-inhalt, .profil.vollbild .pf-inhalt { display: grid; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
.profil.vollbild .pf-flaeche { min-height: 0; }
.profil.vollbild .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 14px; }
.profil.vollbild .pf-legende[open] { max-height: 30vh; overflow-y: auto; }
.profil.vollbild .pf-mess { font-size: calc(14px * var(--fs, 1)); max-width: 380px; }
.profil.vollbild .pf-achse, .profil.vollbild .pf-asp-text, .profil.vollbild .pf-msa-text, .profil.vollbild .pf-platz-text, .profil.vollbild .pf-marke-text { font-size: calc(13.5px * var(--fs, 1)); }
.profil.vollbild .pf-stopp { font-size: calc(16px * var(--fs, 1)); }
/* Handy: ganzer Bildschirm; Profil oben, Winddreieck darunter, der Inhalt scrollt bei Bedarf (quer: Winddreieck rechts) */
@media (max-width: 599px), (max-height: 480px) {
  dialog.pf-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .pf-dialog-kopf { padding: calc(env(safe-area-inset-top, 0px) + 4px) 4px 4px 14px; }
  .pf-dialog-hinweis { display: none; }
  .profil.vollbild { overflow-y: auto; padding: 6px 10px calc(env(safe-area-inset-bottom, 0px) + 10px); }
  .profil.vollbild .pf-info { font-size: calc(12.5px * var(--fs, 1)); }
}
@media (max-width: 599px) {
  .profil.vollbild .pf-inhalt, .profil.vollbild.zu .pf-inhalt { grid-template-rows: minmax(260px, 1fr) auto auto; }
  .profil.vollbild .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr); }
  .profil.vollbild .pf-inhalt.mit-wind .pf-wind { grid-template-rows: auto 210px auto; }
}
@media (max-height: 480px) and (min-width: 600px) {
  .profil.vollbild .pf-inhalt.mit-wind { grid-template-columns: minmax(0, 1fr) 260px; }
  .profil.vollbild .pf-info { display: none; }
}

/* Höhenwechsel und Halbkreisflugregel (profil-hoehen.js) */
.pf-kreuz, .pf-marke, .pf-marke-text { pointer-events: none; } /* Fadenkreuz und TOC/TOD dürfen die Flugbahn nicht verdecken */
.pf-lg-hw { width: 9px; height: 9px; margin-left: 4px; transform: rotate(45deg); border-radius: 1px; background: var(--surface); border: 2px solid var(--profil-route); }
.pf-lg-hk { height: 0; border-top: 3px dashed var(--warn-strong); vertical-align: 3px; }
.pf-hk { stroke: var(--warn-strong); stroke-width: 3; stroke-dasharray: 5 4; stroke-linecap: round; opacity: .9; }
.pf-hk-text { fill: var(--warn); font: 600 calc(9.5px * var(--fs, 1)) var(--f-body); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; pointer-events: none; }
.pf-hw-linie { stroke: var(--profil-route); stroke-width: 1; stroke-dasharray: 1 3; opacity: .7; pointer-events: none; }
.pf-hw-punkt path { fill: var(--surface); stroke: var(--profil-route); stroke-width: 2.2; }
.pf-hw-punkt[tabindex] { cursor: ew-resize; outline: none; touch-action: none; }
.pf-hw-punkt[tabindex]:hover path, .pf-hw-punkt:focus-visible path { fill: var(--profil-route); }
.pf-hw-punkt:focus-visible path { stroke: var(--ink); stroke-width: 3; }
.pf-hw-text { fill: var(--profil-route); font: 700 calc(10px * var(--fs, 1)) var(--f-num); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; pointer-events: none; }
.pf-hw-weg { cursor: pointer; touch-action: none; }
.pf-hw-weg circle { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1; }
.pf-hw-weg text { fill: var(--muted); font: 700 calc(11px * var(--fs, 1)) var(--f-body); pointer-events: none; }
.pf-hw-weg:hover circle { fill: var(--bad-bg); stroke: var(--bad); }
.pf-hw-treffer { stroke: transparent; stroke-width: 18; cursor: ns-resize; touch-action: none; pointer-events: stroke; }
.pf-hw-treffer:hover { stroke: color-mix(in srgb, var(--profil-route) 14%, transparent); }
.pf-hw-vorschau[hidden] { display: none; }
.pf-hw-neu { stroke: var(--profil-route); stroke-width: 3; stroke-dasharray: 7 4; }
.pf-hw-neu-senk { stroke: var(--profil-route); stroke-width: 2; stroke-dasharray: 4 3; }
.pf-hw-rast { stroke: var(--ok); stroke-width: 3; stroke-linecap: round; }
.pf-hw-rast-text { fill: var(--ok); font: 700 calc(9.5px * var(--fs, 1)) var(--f-num); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.pf-hw-info { position: absolute; z-index: 3; max-width: 300px; padding: 5px 9px; pointer-events: none; font-size: calc(12px * var(--fs, 1)); line-height: 1.4;
  background: var(--surface); border: 1px solid var(--profil-route); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.pf-hw-info[hidden] { display: none; }
.pf-hw-info .t-bad { color: var(--bad); }
.profil:is(.gross, .vollbild) .pf-hw-info { font-size: calc(13.5px * var(--fs, 1)); max-width: 360px; }
.profil:is(.gross, .vollbild) .pf-hw-treffer { stroke-width: 22; }

/* Höhen je Abschnitt im Navigationslog und Hinweis an der Reiseflughöhe (hoehen-ui.js) */
.hw-zeile td { padding-top: 6px; padding-bottom: 6px; font-weight: 600; color: var(--profil-route); background: color-mix(in srgb, var(--profil-route) 6%, transparent); }
.hw-raute { display: inline-block; width: 8px; height: 8px; margin-right: 8px; transform: rotate(45deg); border: 2px solid var(--profil-route); background: var(--surface); }
.hk-verstoss { color: var(--warn-ink); background: var(--warn-bg); }
.hk-mark { display: inline-block; padding: 0 4px; border-radius: 4px; font: 700 calc(10.5px * var(--fs, 1)) var(--f-num); color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line); }
.hoehen-editor:empty { display: none; }
.hoehen-editor { margin-bottom: 18px; }
.hw-etappe { margin: 10px 0 14px; }
.hw-titel { margin: 0 0 6px; }
.hw-tab input { width: 7.5em; max-width: 100%; }
.hw-tab .unit { display: inline-block; }
.hw-tab td { vertical-align: middle; }
.hw-neu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-top: 8px; }
.hw-neu label { display: grid; gap: 3px; font-size: calc(13px * var(--fs, 1)); color: var(--muted); }
.hw-neu input { width: 8em; }
.hw-neu .field-error { flex-basis: 100%; }
.hw-hinweis { margin: 2px 0 0; }
.hw-hinweis .linkish { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
  table.cards tr.hw-zeile { display: block; }
  .hw-tab.cards tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
  .hw-neu input { width: 7em; }
}