.detail { display: grid; grid-template-columns: 1fr minmax(340px, 42%); min-height: calc(100vh - 120px); }
.detail-karte { border-radius: 0; border: 0; min-height: 420px; }
.detail-text { padding: 16px 20px; overflow-y: auto; }
.detail-text h1 { margin: 0 0 4px; font-size: 24px; }
.meta { color: var(--sf-muted); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; }
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.kennzahlen div { background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius-md); padding: 8px 4px; text-align: center; }
.kennzahlen b { display: block; font-family: var(--sf-font-display); font-size: 16px; }
.kennzahlen span { font-size: 11px; color: var(--sf-muted); }
.label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--sf-muted); margin: 14px 0 6px; }
.profil { position: relative; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); padding: 8px; }
.profil-svg { width: 100%; height: 160px; display: block; touch-action: pan-y; }
.profil-svg .zeiger { stroke: var(--sf-accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.profil-svg .marke { cursor: pointer; font-size: 13px; }
.profil-tipp { position: absolute; top: 2px; background: var(--sf-surface); color: var(--sf-text); border: 1px solid var(--sf-line);
  border-radius: var(--sf-radius-sm); padding: 1px 6px; font-size: 12px; white-space: nowrap; pointer-events: none; }
.profil-tipp[hidden] { display: none; }
.positions-marke { width: 16px; height: 16px; border-radius: 50%; background: var(--sf-accent); border: 3px solid var(--sf-surface);
  box-shadow: 0 1px 5px rgb(0 0 0 / 0.4); pointer-events: none; }
.positions-marke[hidden] { display: none; }
.punkt-marke { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--sf-accent); color: var(--sf-accent-text);
  border: 2px solid var(--sf-surface); box-shadow: 0 1px 5px rgb(0 0 0 / 0.35); display: grid; place-items: center;
  cursor: pointer; padding: 0; font: 700 13px/1 var(--sf-font); }
.punkt-marke .foto { position: absolute; right: -7px; top: -7px; font-size: 11px; line-height: 1; background: var(--sf-surface);
  border-radius: 50%; padding: 1px; }
.punkt-popup b { display: block; }
.punkt-popup .art { font-size: 11px; text-transform: uppercase; color: var(--sf-muted); }
.punkt-popup img { display: block; max-width: 220px; width: 100%; height: auto; border-radius: var(--sf-radius-md); margin-top: 6px; }
.punkt-popup p { margin: 4px 0 0; }
.profil-svg .linie { stroke: var(--sf-route); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.profil-svg .flaeche { fill: var(--sf-route); opacity: .18; }
.profil-svg .achse, .profil-svg .marke { fill: var(--sf-muted); font-size: 11px; font-family: var(--sf-font); }
.profil-svg rect.b-glatt { fill: var(--sf-good); } .profil-svg rect.b-pflaster { fill: var(--sf-mid); }
.profil-svg rect.b-unbefestigt { fill: var(--sf-bad); } .profil-svg rect.b-unbekannt { fill: var(--sf-unknown); }
.aeste { display: flex; gap: 6px; margin-bottom: 6px; }
.warnung { background: var(--sf-surface); border-left: 4px solid var(--sf-bad); border-radius: var(--sf-radius-md); padding: 8px 10px; margin-top: 8px; font-size: 13px; }
button.warnung { display: block; width: 100%; text-align: left; font-family: inherit; color: inherit; border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
button.warnung:hover { background: var(--sf-surface-2); }
button.warnung:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; }
button.warnung[aria-pressed="true"] { background: var(--sf-surface-2); border-left-color: var(--sf-accent); box-shadow: inset 0 0 0 1px var(--sf-accent); }
.profil-svg .bereich { fill: var(--sf-accent); opacity: .3; stroke: var(--sf-accent); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.punkte { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.punkte img { border-radius: var(--sf-radius-md); margin: 4px 4px 0 0; vertical-align: top; }
.punkt-art { font-size: 11px; text-transform: uppercase; color: var(--sf-muted); margin-right: 6px; }
.km { color: var(--sf-muted); margin-right: 6px; }
.quelle { color: var(--sf-muted); font-size: 12px; }
@media (max-width: 760px) {
  .detail { grid-template-columns: 1fr; }
  .detail-karte { min-height: 45vh; }
  .kennzahlen { grid-template-columns: repeat(2, 1fr); }
}