/* Overview first. The graph keeps its canvas; optional chrome is grouped. */
.view-options { position: relative; font-size: 0.85rem; }
.view-options > summary { cursor: pointer; padding: 0.6rem 0.8rem; min-height: 44px; color: var(--text); }
.view-options-body {
  position: absolute; top: 100%; right: 0; width: min(280px, calc(100vw - 24px));
  padding: 1.2rem; background: var(--surface-strong); border: 1px solid var(--surface-border-color);
  border-radius: var(--surface-radius); box-shadow: var(--surface-shadow);
}
.view-options-body > * { margin: 0 0 0.85rem; }
.view-options-body label { display: block; }
.view-options .gold-slider { width: 100%; min-width: 0; }
.view-options .meta-readout { display: block; font-family: var(--font-body); letter-spacing: 0; }
.search-box { top: 88px; width: min(360px, calc(100vw - 44px)); }
.graph-intro {
  margin-bottom: 0.8rem; padding: 1rem 1.1rem;
  background: var(--surface-strong); border: 1px solid var(--surface-border-color); border-radius: var(--surface-radius);
}
.graph-intro summary { cursor: pointer; }
.graph-intro h1 { display: inline; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.graph-intro p { margin-top: 0.65rem; font-size: 0.9rem; line-height: 1.55; }
.search-input { font-family: var(--font-body); font-size: 1rem; min-height: 44px; }
.dataset-btn, .theme-toggle, .tour-btn, .about-toggle, .legend-toggle {
  font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.85rem; min-height: 44px;
}
.about-body { background: var(--surface-strong); }
.about-body h2 { font-family: var(--font-display); font-size: 1.2rem; text-transform: none; letter-spacing: 0; }
.modal { z-index: 35; }
.modal:not(.open) { visibility: hidden; }
.ctrl-legal a { color: var(--text); }
body.plate-mode .about { visibility: hidden; }
@media (max-width: 760px) {
  .topbar { flex-wrap: wrap; gap: 0.3rem; padding: 10px 12px; background: var(--surface-strong); }
  .topbar-right { order: 3; width: 100%; justify-content: space-between; gap: 0.4rem; }
  .search-box { top: 116px; left: 12px; width: calc(100vw - 24px); }
  .graph-intro { padding: 0.75rem 1rem; }
  .graph-intro h1 { font-size: 1.2rem; }
  .graph-intro p { font-size: 0.85rem; }
  .about { right: 12px; bottom: 82px; }
  .legend { left: 12px; bottom: 82px; }
  .control-panel { padding: 12px; gap: 8px; }
  .ctrl-legal { gap: 10px; }
  .modal { height: 48dvh; bottom: 72px; }
}

/* WP C2: Liste statt 3D-Ansicht, wenn WebGL fehlt oder die Initialisierung scheitert */
.webgl-fallback {
  margin-top: 0.8rem; padding: 1rem 1.1rem;
  background: var(--surface-strong); border: 1px solid var(--surface-border-color); border-radius: var(--surface-radius);
}
.webgl-fallback[hidden] { display: none; }
.webgl-fallback-hint { margin: 0 0 0.75rem; font-size: 0.9rem; line-height: 1.55; }
.webgl-fallback-status { margin: 0.5rem 0; font-size: 0.8rem; color: var(--text-muted); }
.webgl-fallback-list { list-style: none; margin: 0; padding: 0; max-height: min(44vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.webgl-fallback-list button {
  display: flex; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 44px;
  padding: 0.5rem 0.25rem; text-align: left; background: transparent; border: 0;
  border-bottom: 1px solid var(--surface-border-color); color: var(--text); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.webgl-fallback-list button:hover { color: var(--brand-glyph-color, #98e8ff); }
.fallback-cat { flex: none; font-size: 0.75rem; color: var(--text-muted); }
body.no-webgl .intro-overlay, body.no-webgl .graph-container, body.no-webgl .label-layer,
body.no-webgl .cmb-layer, body.no-webgl .reticle, body.no-webgl .legend, body.no-webgl .tour-btn,
body.no-webgl #search-input, body.no-webgl #search-results, body.no-webgl .graph-intro p { display: none; }
/* Der fixe Knopf "Ueber diese Seite" (unten rechts) darf die letzte Listenzeile nicht ueberdecken: Platz = Knopfhoehe + Abstand */
body.no-webgl .webgl-fallback-list { padding-bottom: 64px; }

/* WP C3: Kopfzeile mit Profil, Systeme, Kontakt (Rueck-Link bleibt .parent-link) */
.site-links { display: flex; align-items: center; gap: 2px; }
.site-link {
  display: inline-flex; align-items: center; min-height: 30px; padding: 6px 8px;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--text-muted, rgba(200, 210, 230, 0.6));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-decoration: none;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.site-link:hover { color: var(--brand-glyph-color, #98e8ff); border-color: var(--border-soft, rgba(152, 232, 255, 0.3)); }
/* Zwischenbereich: dieselbe zweizeilige Kopfzeile wie auf dem Handy, damit nichts ueberlappt */
@media (min-width: 761px) and (max-width: 900px) {
  .parent-link-text { display: none; }
  .topbar { flex-wrap: wrap; gap: 0.3rem; padding: 10px 22px; background: var(--surface-strong); }
  .topbar-right { order: 3; width: 100%; justify-content: space-between; gap: 0.4rem; }
  .search-box { top: 116px; }
}
/* Kleine Handys: der Markenname weicht den vier Zielen (Glyph bleibt, Datensatz-Wahl und H1 nennen die Seite) */
@media (max-width: 480px) { .brand-name { display: none; } }

/* Fokus-Zeile (IOS-C6, 2026-10-05): lag nach dem Antippen eines Punktes in jeder Groesse ueber "Rundgang starten".
   Jetzt in der Mitte der Fusszeile, auf Handys als eine Zeile ueber den Fussknoepfen (Bloecke unten). */
.status-bar {
  left: 50%; bottom: 32px; transform: translateX(-50%); max-width: calc(100vw - 460px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}

/* Touch-Geraete kennen kein Schweben: der Tooltip bliebe sonst nach einem Tipp neben dem Finger stehen */
@media (hover: none) and (pointer: coarse) { .tooltip { display: none; } }

/* Handy: schlanke Raender (IOS-C3, 2026-10-04). Graph in der Mitte frei, Bedienung in schmalen Leisten oben und unten.
   Die Einfuehrung bleibt fuer Screenreader und Suche im HTML (h1, WEB-037), ist auf dem Handy aber unsichtbar.
   Maus-Geraete ueber 760 px bleiben unveraendert (tests/e2e/mobil-raender.spec.ts). */
@media (max-width: 760px), (max-height: 500px) and (hover: none) and (pointer: coarse) {
  /* Mit Tastaturfokus wird die Einfuehrung sichtbar, sonst waere der Tab-Stopp unsichtbar (WCAG 2.4.7) */
  .graph-intro:not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .search-box .search-input { height: 40px; margin: 0; }
  .tour-btn { font-size: 12px; padding: 4px 10px; }
  .legend-toggle, .about-toggle { font-size: 11px; padding: 4px 10px; min-height: 34px; }
  /* Legende und "Ueber diese Seite" sitzen in der Fussleiste, liegen aber in anderen Stapelkontexten darunter:
     die Leiste selbst laesst Tipps durch, ihre eigenen Knoepfe und Links bleiben antippbar. */
  .control-panel { pointer-events: none; }
  .control-panel > * { pointer-events: auto; }
  /* Aus demselben Grund wuerde der Verlauf der Fussleiste beide abdunkeln: die Buehne malt ihn unter allen Bedienelementen */
  .control-panel { background: none; }
  .stage::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; pointer-events: none;
    height: calc(73px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(2, 1, 10, 0.95), rgba(2, 1, 10, 0));
  }
  body.plate-mode .stage::before { display: none; }
  .status-bar {
    left: max(12px, env(safe-area-inset-left)); bottom: calc(70px + env(safe-area-inset-bottom)); transform: none;
    z-index: 21; max-width: calc(100vw - 24px); font-size: 10px; text-shadow: 0 0 6px rgba(2, 1, 10, 0.95);
  }
  /* Wird es eng, heisst der Knopf nur "Ueber" (scripts/footer-fit.js misst und setzt .fuss-kurz) */
  .fuss-kurz .about-rest { display: none; }
}
@media (max-width: 760px) {
  .topbar { padding: 6px 12px; row-gap: 4px; }
  .search-box { top: 106px; left: 12px; width: calc(100vw - 24px); }
  .control-panel { padding: 6px 12px calc(4px + env(safe-area-inset-bottom)); gap: 4px 8px; flex-wrap: wrap; }
  .ctrl-legal { width: 100%; justify-content: center; font-size: 10px; gap: 12px; }
  /* Legende direkt hinter dem Rundgang-Knopf: --tour-r ist dessen gemessene rechte Kante (scripts/footer-fit.js) */
  .legend { left: calc(var(--tour-r, 143px) + 7px); bottom: calc(30px + env(safe-area-inset-bottom)); }
  .about { right: 12px; bottom: calc(30px + env(safe-area-inset-bottom)); }
  .label-layer { clip-path: inset(154px 0 calc(88px + env(safe-area-inset-bottom)) 0); }
  /* Passen die drei Knoepfe auch mit kurzem "Ueber" nicht nebeneinander (grosse Schrift auf schmalem Bild),
     ruecken Legende und "Ueber" eine Zeile hoeher. footer-fit.js setzt .fuss-zwei nur im Hochformat. */
  .fuss-zwei .legend { left: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); }
  .fuss-zwei .about { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .fuss-zwei .status-bar { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .fuss-zwei .label-layer { clip-path: inset(154px 0 calc(128px + env(safe-area-inset-bottom)) 0); }
  .fuss-zwei .stage::before { height: calc(113px + env(safe-area-inset-bottom)); }
}
/* Handy quer (IOS-C5 bis C9, 2026-10-05). Messbasis: Safari laesst im Querformat mit Adress- und Tab-Leiste etwa
   277 px Hoehe, nicht 390 px. Deshalb flache Leisten, die Suche in der Kopfzeile (scripts/topbar-search.js misst die
   Luecke und setzt .search-in-topbar, --search-l, --search-w, --topbar-h), die Erklaerung ueber die ganze Hoehe unter
   der Kopfzeile, Legende und "Ueber" scrollen innen, seitlich gelten die Sicherheitsabstaende (Notch, runde Ecken).
   min-width: ein Hochformat mit wenig Hoehe (Tastatur offen, Splitscreen) behaelt das Hochformat-Layout. */
@media (min-width: 560px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  :root {
    --quer-l: max(16px, env(safe-area-inset-left)); --quer-r: max(16px, env(safe-area-inset-right));
    --quer-unten: calc(48px + env(safe-area-inset-bottom));
  }
  .stage::before { height: var(--quer-unten); }
  .topbar { flex-wrap: nowrap; padding: 6px var(--quer-r) 6px var(--quer-l); }
  .topbar-right { order: 0; width: auto; gap: 8px; }
  .brand, .parent-link-text { display: none; }
  .dataset-btn, .tour-btn { min-height: 36px; }
  .view-options > summary { min-height: 36px; padding: 0.35rem 0.5rem; }
  /* Ohne Platz in der Kopfzeile (und in der Liste ohne WebGL) bleibt die Suche in einer eigenen Zeile darunter */
  .search-box { top: calc(var(--topbar-h, 54px) + 6px); left: var(--quer-l); width: min(560px, calc(100vw - var(--quer-l) - var(--quer-r))); }
  .search-box .search-input { height: 36px; min-height: 36px; }
  .control-panel { padding: 6px var(--quer-r) calc(6px + env(safe-area-inset-bottom)) var(--quer-l); flex-wrap: nowrap; }
  .ctrl-legal { width: auto; }
  .legend { left: calc(var(--tour-r, 147px) + 23px); bottom: calc(7px + env(safe-area-inset-bottom)); }
  .about { right: calc(var(--quer-r) + 214px); bottom: calc(7px + env(safe-area-inset-bottom)); }
  /* vh meint in Safari die Hoehe ohne Leisten: erst dvh trifft das sichtbare Bild */
  .legend-body, .about-body {
    max-height: calc(100vh - var(--topbar-h, 54px) - 56px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--topbar-h, 54px) - 56px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .legend-body > * { flex: none; }
  .status-bar { left: var(--quer-l); bottom: calc(var(--quer-unten) + 2px); max-width: calc(100vw - var(--quer-l) - var(--quer-r)); }
  .label-layer { clip-path: inset(calc(var(--topbar-h, 54px) + 48px) 0 calc(var(--quer-unten) + 18px) 0); }
  /* Erklaerung: rechts, von der Kopfzeile bis zum unteren Rand, scrollt innen.
     Fast deckend, weil sie hier ueber "Ueber diese Seite" und den Rechtslinks liegt (Farbe wie --surface-strong). */
  .modal {
    background: rgba(9, 12, 22, 0.97);
    top: var(--topbar-h, 54px); right: 0; bottom: 0; left: auto; height: auto;
    width: min(calc(338px + max(22px, env(safe-area-inset-right))), 58vw);
    padding: 16px max(22px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 20px;
    border-top: 0; border-left: 1px solid var(--surface-border-color);
    transform: translateX(110%); overscroll-behavior: contain;
  }
  .modal.open { transform: translateX(0); }

  /* Suche in der Kopfzeile. Die Buehne malt den Verlauf der Kopfzeile, sonst laege deren Hintergrund ueber dem Suchfeld */
  .search-in-topbar body:not(.no-webgl) .topbar { background: none; }
  .search-in-topbar body:not(.no-webgl) .stage::before {
    top: 0; height: auto;
    background:
      linear-gradient(180deg, rgba(2, 1, 10, 0.92) 55%, rgba(2, 1, 10, 0)) top / 100% calc(var(--topbar-h, 54px) + 12px) no-repeat,
      linear-gradient(0deg, rgba(2, 1, 10, 0.95), rgba(2, 1, 10, 0)) bottom / 100% var(--quer-unten) no-repeat;
  }
  .search-in-topbar body:not(.no-webgl) .search-box {
    top: calc((var(--topbar-h, 54px) - 36px) / 2); left: var(--search-l); width: var(--search-w);
  }
  .search-in-topbar body:not(.no-webgl) .search-results {
    width: min(420px, calc(100vw - var(--search-l) - var(--quer-r)));
    max-height: calc(100dvh - var(--topbar-h, 54px) - 12px);
  }
  .search-in-topbar body:not(.no-webgl) .label-layer {
    clip-path: inset(calc(var(--topbar-h, 54px) + 4px) 0 calc(var(--quer-unten) + 18px) 0);
  }
}
/* Schmales Querformat (kleine Handys): "Darstellung" weicht der Suche, Farben und Leuchten bleiben im Hochformat erreichbar */
@media (min-width: 560px) and (max-width: 759px) and (max-height: 500px) and (hover: none) and (pointer: coarse) {
  .view-options { display: none; }
}