/* ============================================================
   site-bridge.css — Dunkler Marken-Rahmen fuer die Werkzeug-Seiten
   (radix.html, astro-geografie.html, transite.html)

   Prinzip: "Dunkles Etui, helles Zifferblatt".
   Kopfzone und Footer werden nachtdunkel und edel wie die
   Nachthimmel-Startseite, die hellen Arbeits-/Chart-Flaechen
   (control-panel, chart-stage, data-panel, Karten, Formulare)
   bleiben UNVERAENDERT.

   Wird NACH src/styles.css eingebunden. Neue Bausteine tragen
   das Praefix .bridge-; nur die reinen Rahmen-Selektoren
   .page-hero und .legal-note werden gezielt ueberschrieben.
   Keine externen Ressourcen, keine Layout-/Funktionsaenderung.

   Marken-Akzente: Gold abgeschafft. Neu = Neon-Cyan
   (#00b2c2 / hell #35d4e8) auf Nachtschwarz, Neon-Pink
   (#ff2e88) nur als einzelner, gezielter Akzent.
   ============================================================ */

:root {
  --bridge-night: #090d1c;
  --bridge-night-2: #10162c;
  --bridge-cyan: #00b2c2;
  --bridge-cyan-bright: #35d4e8;
  --bridge-cyan-hi: #7ff0ff;
  --bridge-pink: #ff2e88;
  --bridge-pink-soft: #ff5ec4;
  --bridge-star: #f4efe4;
  --bridge-text: #e8e6df;
  --bridge-text-muted: #b7b8c6;
  --bridge-line: rgba(53, 212, 232, 0.20);
  --focus-ring: var(--bridge-pink-soft);
  --bridge-icon-surface-start: #134457;
  --bridge-icon-surface-end: #1a5364;
  --bridge-icon-surface-strong-start: #0b667a;
  --bridge-icon-surface-strong-end: #047686;
}

/* Gemeinsame Typografie- und Interaktionsregeln der Inhaltsseiten. */
:where(a, button, input, select, summary):focus-visible {
  outline-color: var(--focus-ring);
}

.text-link,
.app-shell.astro-page .landing-content :where(p, li) > a:not(.btn) {
  color: var(--bridge-cyan-bright);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(53, 212, 232, 0.48);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.22s ease, text-decoration-color 0.22s ease;
}

.text-link:hover,
.app-shell.astro-page .landing-content :where(p, li) > a:not(.btn):hover {
  color: var(--bridge-pink-soft);
  text-decoration-color: rgba(255, 94, 196, 0.62);
}

.site-quote {
  margin-block: 0;
  margin-inline: 0;
  quotes: "„" "“" "‚" "‘";
  font-style: italic;
}

.site-quote > p { margin: 0; }
.site-quote > p:first-child::before { content: open-quote; }
.site-quote > p:last-child::after { content: close-quote; }

/* Der Tastatur-Sprunglink sieht in beiden CSS-Familien gleich aus. */
.skip-link {
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--bridge-night);
  background: var(--bridge-star);
  font-weight: 700;
  box-shadow: none;
  transform: translateY(-150%);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: var(--focus-ring);
}

/* ---------- Marken-Header (schlank, sticky, wie Startseite) ---------- */

.bridge-header {
  position: sticky;
  top: 0;
  z-index: 60; /* ueber dem Seiteninhalt, unter dem Vollbild-Karten-Overlay (z-index 900) */
  /* KEIN backdrop-filter: gleiche Bug-Familie wie der Startseiten-Header -
     sticky + backdrop-filter + gehaltener :hover am Scroll-Ende laesst Chromium
     den geblurrten Backdrop-Snapshot flackern (diagnostiziert 13.07.).
     Angehobene Deckkraft ersetzt den Blur. */
  background: rgba(9, 13, 28, 0.95);
  border-bottom: 1px solid var(--bridge-line);
}

.bridge-header-inner {
  width: min(100%, 1400px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 24px;
}

.bridge-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  color: var(--bridge-star);
  text-decoration: none;
  white-space: nowrap;
}

/* Einheitliche Kopfzeile wie auf den Marketing-Seiten (Daniel 12.07.):
   Diamant-Logomark links, Name ueber "Astro-Geografie". */
.bridge-wordmark .wordmark-text {
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  font-size: 1.02rem;
}
.bridge-wordmark .wordmark-sub {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-style: italic; /* Claim-Variante E (Daniel 12.07.): kursiv + kleingeschrieben */
  color: var(--bridge-cyan-bright);
}
/* Logo-Finale V1a (Daniel 13.07.): Claim-Verlauf Cyan -> Pink, identisch zu
   site.css (.wordmark-sub) — Bridge-Seiten laden site.css nicht, darum hier.
   @supports-Gate: ohne background-clip:text bleibt die einfarbige Fassung. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .bridge-wordmark .wordmark-sub {
    background: linear-gradient(97deg, #35d4e8, #ff5ec4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.bridge-sigil {
  display: block;
  width: 26px;
  height: 40px;
  flex: 0 0 auto;
}

.bridge-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.bridge-nav a {
  position: relative;
  color: var(--bridge-text-muted);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  padding: 2px 0;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.bridge-nav a:hover {
  color: var(--bridge-cyan-hi);
}

.bridge-nav a:focus-visible {
  color: var(--bridge-cyan-hi);
  outline: 3px solid #ff5ec4;
  outline-offset: 4px;
}

.bridge-nav a.is-active,
.bridge-nav a[aria-current="page"],
.bridge-nav a[aria-current="location"] {
  color: var(--bridge-cyan-bright);
}

/* Marker der aktiven Seite: schmaler Mini-Verlauf Cyan -> Pink
   (der einzige, gezielte Pink-Akzent — 1px, nicht flaechig). */
.bridge-nav a.is-active::after,
.bridge-nav a[aria-current="page"]::after,
.bridge-nav a[aria-current="location"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, var(--bridge-cyan), var(--bridge-pink));
}

/* ---------- Nacht-Kopfzone: Override der bestehenden .page-hero ---------- */
/* Dunkles, edles Kopf-Panel mit dezenten CSS-Sternen. Der weiche
   Uebergang zur hellen Arbeitsflaeche entsteht durch das leichte
   Aufhellen am unteren Rand plus einen weichen Schlagschatten. */

.page-hero {
  border: 1px solid rgba(53, 212, 232, 0.20);
  background:
    radial-gradient(1px 1px at 12% 26%, rgba(244, 239, 228, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 62%, rgba(244, 239, 228, 0.5) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 54% 20%, rgba(53, 212, 232, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 44%, rgba(244, 239, 228, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 16%, rgba(244, 239, 228, 0.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 22% 82%, rgba(53, 212, 232, 0.4) 50%, transparent 51%),
    radial-gradient(ellipse 120% 80% at 50% -30%, #1b2447 0%, rgba(27, 36, 71, 0) 70%),
    linear-gradient(180deg, #090d1c 0%, #0b1022 55%, #101a30 82%, #1c2740 100%);
  box-shadow: 0 22px 48px -20px rgba(9, 13, 28, 0.55);
  color: var(--bridge-star);
}

/* Kicker (kleine Zeile ueber der Ueberschrift) in Neon-Cyan */
.page-hero > div > p {
  color: var(--bridge-cyan-bright);
}

/* Ueberschrift in Sternweiss */
.page-hero h1 {
  color: var(--bridge-star);
}

/* Beschreibungstext in gedaempftem Hell */
.page-hero p {
  color: rgba(232, 230, 223, 0.7);
}

.page-hero > p {
  color: rgba(232, 230, 223, 0.82);
}

/* ---------- Marken-Footer: Override der bestehenden .legal-note ---------- */

.legal-note {
  margin: 16px auto 40px;
  padding: 30px 28px 30px;
  border: 1px solid var(--bridge-line);
  border-radius: 20px;
  background: linear-gradient(180deg, #090d1c 0%, #10162c 100%);
  color: var(--bridge-text-muted);
  box-shadow: 0 22px 48px -22px rgba(9, 13, 28, 0.5);
}

.legal-note a {
  color: var(--bridge-cyan-bright);
}

.legal-note a:hover {
  color: var(--bridge-cyan-hi);
}

.legal-note summary {
  color: var(--bridge-cyan-bright);
}

.legal-note details p {
  color: var(--bridge-text-muted);
}

/* ---------- Responsiv: Header auf schmalen Screens ---------- */

@media (max-width: 680px) {
  .bridge-header-inner {
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 11px 18px;
  }

  .bridge-wordmark {
    font-size: 1.02rem;
  }

  .bridge-nav {
    gap: 16px;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
  }

  .bridge-nav a {
    flex: 0 0 auto;
    font-size: 0.86rem;
  }
}

#main-content { scroll-margin-top: 120px; }

/* ============================================================
   NACHTBUEHNE — Zweite Ausbaustufe: die ganze Arbeitsflaeche
   wird Nachthimmel. Bisher waren nur Header, .page-hero und
   .legal-note dunkel; dazwischen lag die Flaeche auf hellem
   Grau (--bg #eaedf1). Jetzt wird der komplette Seitengrund
   nachtblau. Die hellen Arbeits-Panels (Formulare, Chart-,
   Karten- und Info-Flaechen) BLEIBEN hell und voll lesbar,
   schweben aber als praezise, scharf gerandete Karten auf
   dunklem Grund. Bild: "Instrumente auf der Nachtbuehne".
   ============================================================ */

/* ---------- 1) Seiten-Grund auf Nachtblau ----------
   In src/styles.css wird --bg AUSSCHLIESSLICH von body genutzt.
   Ein einziger Variablen-Override faerbt also die ganze Buehne,
   ohne Panels, Texte oder Formular-Innenleben anzufassen.
   --panel (#fff), --ink und --muted bleiben unangetastet, damit
   die hellen Karten hell und ihr Text dunkel-lesbar bleiben. */

:root {
  --bg: #090d1c;
  /* Fassung der schwebenden hellen Panels 14.07.2026: Rand + Schatten kommen
     jetzt aus den zentralen Porzellan-Tokens (--porzellan-border/-shadow,
     definiert in src/styles.css :root). Die frueheren --bridge-panel-line/-shadow
     Variablen sind entfallen; die Schwebe-Fassung unten nutzt direkt die Tokens,
     damit die helle Familie ueber alle drei Seiten wie aus einem Guss liest. */
}

/* Ruhiger, crisper Verlauf ueber die ganze Buehne — keine
   Blur-Blobs, viewport-fest, damit auch lange Seiten ein
   gleichmaessiges Nachtfeld behalten. */
body {
  background-color: #090d1c;
  background-image: linear-gradient(180deg, #090d1c 0%, #0b1122 52%, #0c1226 100%);
  background-attachment: fixed;
}

/* ---------- 2) Schwebende Panels: helle Karten, edle Fassung ----------
   Nur die Panels, deren Aussenkante direkt an die dunkle Buehne
   grenzt. Verschachtelte Karten auf weissem Elternteil (z. B.
   .seo-card, .faq-list details, die Karten-Seitenpanels, Mond-
   phasen-Karten, .transit-controls, .distance-table) behalten
   bewusst ihre bestehende, dezentere Fassung. */

.control-panel,
.chart-stage,
.detail-panel,
.data-card,
.astro-map-panel,
.trust-panel,
.seo-section {
  border: var(--porzellan-border);
  box-shadow: var(--porzellan-shadow);
}

/* Der Vollbild-Kartenmodus deckt die ganze Buehne ab und bringt
   seinen eigenen hellen Grund mit — dort keine schwebende
   Fassung, sonst Rahmen/Schatten mitten im Vollbild. */
.astro-map-panel.is-fullscreen {
  border: 0;
  box-shadow: none;
}

/* Hinweis: Kein globaler Farb-Override auf den transparenten
   Struktur-Containern (.chart-data, .landing-content, .data-panel).
   Ihr Text steht ausnahmslos in hellen Panels, die ihre eigene
   dunkle Schriftfarbe setzen bzw. das dunkle --ink von body erben.
   Ein heller Vererbungs-Default hier wuerde ueber die weissen
   Karten laufen (helle Schrift auf Weiss) und wurde bewusst
   entfernt. Nackte Buehnentexte gibt es in diesem Markup nicht;
   der einzige Text auf dunklem Grund (Hero, Footer) ist bereits
   oben in .page-hero / .legal-note hell gesetzt. */

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
  .bridge-nav a {
    transition: none;
  }
}

/* ---------- Marken-Scrollleiste (Neon auf Nachtschwarz) ---------- */
/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: #35d4e8 rgba(9, 13, 28, 0.9);
}
/* Chrome/Safari/Edge */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #090d1c; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00b2c2 0%, #35d4e8 45%, #ff2e88 100%);
  border-radius: 999px;
  border: 2px solid #090d1c;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #35d4e8 0%, #7ff0ff 45%, #ff5ec4 100%);
}
::-webkit-scrollbar-corner { background: #090d1c; }

/* ============================================================
   ASTRO-GEOGRAFIE — kostenlose Ansicht

   Die Relocation Chart ist Teil der kostenlosen Anwendung. Der
   Zugriffsmodus wird im Markup explizit angegeben und ist nicht an
   die Sichtbarkeit einzelner Module gekoppelt. Das restliche UI
   uebernimmt die Nacht-, Cyan- und Pink-Sprache der Hauptwebsite.
   Alle Regeln sind auf .astro-page begrenzt, damit Radix und
   Transite unabhaengig weiterbearbeitet werden koennen.
   ============================================================ */

.app-shell.astro-page {
  --astro-night-panel: rgba(21, 29, 56, 0.88);
  --astro-night-soft: rgba(16, 22, 44, 0.92);
  --astro-inner-night: rgba(9, 13, 28, 0.52);
  --astro-border: rgba(53, 212, 232, 0.2);
  --astro-border-strong: rgba(53, 212, 232, 0.42);
  --astro-surface: linear-gradient(155deg, var(--astro-night-panel), var(--astro-night-soft));
}

/* Author-CSS setzt fuer beide Module display:grid. Deshalb wird
   das native hidden-Verhalten hier gezielt und robust abgesichert. */
.app-shell.astro-page #map-anchor-panel[hidden],
.app-shell.astro-page #map-relocation-panel[hidden] {
  display: none !important;
}

/* ---------- Dunkle Flaechen statt der alten weissen Grosskarten ---------- */

.app-shell.astro-page .control-panel,
.app-shell.astro-page .astro-map-panel,
.app-shell.astro-page .trust-panel,
.app-shell.astro-page .seo-section {
  border-color: var(--astro-border);
  background: var(--astro-surface);
  color: var(--bridge-text);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen {
  border: 0;
  border-radius: 0;
  background: linear-gradient(160deg, #151d38, #090d1c);
  box-shadow: none;
}

.app-shell.astro-page .control-panel::before {
  background: linear-gradient(90deg, var(--bridge-cyan), var(--bridge-cyan-bright) 52%, var(--bridge-pink));
}

.app-shell.astro-page .brand-block h1,
.app-shell.astro-page .map-heading h2,
.app-shell.astro-page .trust-panel h2,
.app-shell.astro-page .seo-section h2 {
  color: var(--bridge-star);
}

.app-shell.astro-page .brand-block p,
.app-shell.astro-page .map-heading p,
.app-shell.astro-page .section-heading p {
  color: var(--bridge-cyan-bright);
}

.app-shell.astro-page .brand-block span,
.app-shell.astro-page .input-grid label,
.app-shell.astro-page .place-field,
.app-shell.astro-page .field-hint,
.app-shell.astro-page .map-heading-actions,
.app-shell.astro-page .map-note,
.app-shell.astro-page .trust-panel p:not(.eyebrow),
.app-shell.astro-page .section-heading span,
.app-shell.astro-page .seo-card p,
.app-shell.astro-page .step-list,
.app-shell.astro-page .faq-list p {
  color: var(--bridge-text-muted);
}

/* Formulare bleiben als helle, hochlesbare Instrumente erhalten. Die kuehle
   Flaeche entspricht Radix und Transite; feste Fallbacks gelten ohne site.css. */
.app-shell.astro-page .input-grid input,
.app-shell.astro-page .input-grid select,
.app-shell.astro-page .map-search-field input {
  border-color: rgba(53, 212, 232, 0.25);
  background: var(--field-bg, #f6f9fa);
  color: var(--field-text, #090d1c);
  box-shadow: inset 0 1px 2px rgba(9, 13, 28, 0.08);
}

.app-shell.astro-page .input-grid input:focus,
.app-shell.astro-page .input-grid select:focus,
.app-shell.astro-page .map-search-field input:focus {
  border-color: var(--bridge-cyan-bright);
  background: var(--field-bg-focus, #ffffff);
  box-shadow: 0 0 0 3px rgba(53, 212, 232, 0.16);
}

.app-shell.astro-page .input-grid input::placeholder,
.app-shell.astro-page .map-search-field input::placeholder {
  color: var(--field-placeholder, #56616d);
  opacity: 1;
}

.app-shell.astro-page .input-grid input:disabled,
.app-shell.astro-page .input-grid select:disabled,
.app-shell.astro-page .map-search-field input:disabled {
  background: var(--field-bg-disabled, #e9f0f2);
  color: var(--field-disabled-text, #606a75);
  opacity: 1;
}

.app-shell.astro-page .input-grid input:-webkit-autofill,
.app-shell.astro-page .map-search-field input:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text, #090d1c);
  box-shadow: 0 0 0 1000px var(--field-bg-focus, #ffffff) inset;
  caret-color: var(--field-text, #090d1c);
}

.app-shell.astro-page .birth-date-parts > legend,
.app-shell.astro-page .birth-date-part > span {
  color: var(--bridge-text-muted);
}

.app-shell.astro-page .birth-date-parts [data-birth-date-part][aria-invalid="true"] {
  border-color: #ff7a8a;
  box-shadow: 0 0 0 3px rgba(255, 84, 112, 0.18);
}

.app-shell.astro-page .birth-date-error.is-error {
  color: #ff9aaa;
}

.app-shell.astro-page .advanced-options {
  border-color: var(--astro-border);
  background: var(--astro-inner-night);
}

.app-shell.astro-page .advanced-options summary,
.app-shell.astro-page .map-search-field label {
  color: var(--bridge-cyan-bright);
}

.app-shell.astro-page .advanced-options summary::after {
  color: var(--bridge-pink);
}

/* ---------- Buttons: derselbe Neon-Verlauf wie auf der Hauptseite ---------- */

.app-shell.astro-page .btn.primary {
  border: 0;
  background: linear-gradient(120deg, var(--bridge-cyan) 0%, var(--bridge-cyan-bright) 100%);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #06070f;
  text-shadow: none;
  box-shadow: 0 3px 12px rgba(0, 178, 194, 0.45);
  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.2s ease,
    background-position 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell.astro-page .btn.primary:hover {
  filter: brightness(1.05);
  background-position: 100% 50%;
  box-shadow: 0 5px 18px rgba(0, 178, 194, 0.58);
  transform: translateY(-2px);
}

.app-shell.astro-page .btn.primary:active {
  transform: translateY(0) scale(0.985);
}

.app-shell.astro-page .btn.primary:focus-visible {
  outline: 2px solid var(--bridge-cyan-bright);
  outline-offset: 2px;
}

.app-shell.astro-page .btn.primary:disabled,
.app-shell.astro-page .btn.primary[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.app-shell.astro-page .map-heading-actions button {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bridge-night-2), var(--bridge-night-2)) padding-box,
    linear-gradient(120deg, var(--bridge-cyan-bright), var(--bridge-pink)) border-box;
  color: var(--bridge-star);
  box-shadow: none;
}

.app-shell.astro-page .map-heading-actions button:hover,
.app-shell.astro-page .map-heading-actions button[aria-pressed="true"] {
  border-color: transparent;
  background:
    linear-gradient(rgba(21, 29, 56, 0.96), rgba(21, 29, 56, 0.96)) padding-box,
    linear-gradient(120deg, var(--bridge-cyan-hi), var(--bridge-pink)) border-box;
  color: var(--bridge-cyan-hi);
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22);
}

.app-shell.astro-page #map-fullscreen {
  background: linear-gradient(120deg, var(--bridge-cyan), var(--bridge-cyan-bright) 48%, var(--bridge-pink));
  background-size: 180% 100%;
  color: #06070f;
  box-shadow:
    0 3px 10px rgba(0, 178, 194, 0.34),
    0 2px 7px rgba(255, 46, 136, 0.2);
}

.app-shell.astro-page #map-fullscreen:hover,
.app-shell.astro-page #map-fullscreen[aria-pressed="true"] {
  background-position: 100% 50%;
  color: #06070f;
}

/* ---------- Kartenfilter auf dem dunklen Karten-Chrome ---------- */

.app-shell.astro-page .map-axis-legend,
.app-shell.astro-page .map-legend {
  border-color: var(--astro-border);
  background: rgba(9, 13, 28, 0.28);
}

.app-shell.astro-page .map-axis-legend button,
.app-shell.astro-page .map-legend-item {
  color: var(--bridge-text-muted);
}

.app-shell.astro-page .map-axis-legend button:hover,
.app-shell.astro-page .map-axis-legend button.is-selected,
.app-shell.astro-page .map-axis-legend button.is-active,
.app-shell.astro-page .map-legend-item:hover,
.app-shell.astro-page .map-legend-item.is-selected,
.app-shell.astro-page .map-legend-item.is-active {
  border-color: var(--astro-border-strong);
  background: rgba(53, 212, 232, 0.1);
  color: var(--bridge-star);
}

.app-shell.astro-page .map-axis-legend button.is-hidden,
.app-shell.astro-page .map-legend-item.is-hidden {
  background: rgba(9, 13, 28, 0.22);
  color: rgba(183, 184, 198, 0.72);
}

.app-shell.astro-page .map-legend-actions button,
.app-shell.astro-page .map-line-picker summary,
.app-shell.astro-page .map-line-picker button {
  border-color: var(--astro-border);
  background: rgba(9, 13, 28, 0.42);
  color: var(--bridge-text-muted);
}

.app-shell.astro-page .map-legend-actions button:hover,
.app-shell.astro-page .map-legend-actions button:focus-visible,
.app-shell.astro-page .map-line-picker summary:hover,
.app-shell.astro-page .map-line-picker summary:focus-visible,
.app-shell.astro-page .map-line-picker button:hover,
.app-shell.astro-page .map-line-picker button:focus-visible,
.app-shell.astro-page .map-line-picker button.is-active {
  border-color: var(--astro-border-strong);
  background: rgba(53, 212, 232, 0.1);
  color: var(--bridge-star);
}

/* ---------- Inhaltsbereiche: dunkle Karten und ruhige Neon-Hairlines ---------- */

.app-shell .trust-mark {
  border-color: rgba(155, 234, 241, 0.1);
  border-radius: 14px;
  background: linear-gradient(145deg, var(--bridge-icon-surface-start), var(--bridge-icon-surface-end));
  color: var(--bridge-cyan-hi);
  box-shadow: 0 9px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.app-shell .trust-mark img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.app-shell.astro-page .seo-card,
.app-shell.astro-page .faq-list details {
  border-color: var(--astro-border);
  background: rgba(9, 13, 28, 0.34);
}

.app-shell.astro-page .seo-card h3,
.app-shell.astro-page .location-section h3 {
  color: var(--bridge-cyan-bright);
}

.app-shell.astro-page .step-list li {
  border-color: rgba(53, 212, 232, 0.14);
}

.app-shell.astro-page .step-list li::before {
  background: linear-gradient(135deg, var(--bridge-cyan), var(--bridge-pink));
  color: #06070f;
  box-shadow:
    0 6px 16px rgba(0, 178, 194, 0.24),
    0 3px 10px rgba(255, 46, 136, 0.16);
}

.app-shell.astro-page .step-list b,
.app-shell.astro-page .faq-list summary {
  color: var(--bridge-star);
}

.app-shell.astro-page .faq-list summary::after {
  color: var(--bridge-pink);
}

.app-shell.astro-page .distance-table {
  border-color: var(--astro-border);
  background: linear-gradient(155deg, #151d38, #090d1c);
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .btn.primary,
  .app-shell.astro-page .map-heading-actions button,
  .text-link {
    transition: none;
  }

  .app-shell.astro-page .btn.primary:active { transform: none; }
}

/* ============================================================
   ASTRO-GEOGRAFIE — geordnete Kartenlegende

   Die bisherigen kleinen Pill-Reihen werden zu einer einzigen,
   semantisch gegliederten Filterflaeche. Lebensbereiche,
   Planeten, Orientierung und Feinauswahl bleiben funktional
   getrennt und sind dadurch schneller erfassbar.
   ============================================================ */

.app-shell.astro-page .map-filter-panel {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 15px;
  border: 1px solid rgba(53, 212, 232, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 46, 136, 0.08), transparent 34%),
    linear-gradient(150deg, rgba(21, 29, 56, 0.94), rgba(9, 13, 28, 0.82));
  padding: 17px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.app-shell.astro-page .map-filter-panel::before {
  content: "";
  position: absolute;
  inset: 0 28px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bridge-cyan-bright), var(--bridge-pink), transparent);
  opacity: 0.72;
  pointer-events: none;
}

.app-shell.astro-page .map-filter-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.app-shell.astro-page .map-filter-header p,
.app-shell.astro-page .map-filter-header h3,
.app-shell.astro-page .map-filter-header span,
.app-shell.astro-page .map-filter-group-heading h4,
.app-shell.astro-page .map-filter-group-heading p {
  margin: 0;
}

.app-shell.astro-page .map-filter-header p {
  margin-bottom: 3px;
  color: var(--bridge-cyan-bright);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.app-shell.astro-page .map-filter-header h3 {
  color: var(--bridge-star);
  font-size: 1.12rem;
  line-height: 1.15;
}

.app-shell.astro-page .map-filter-header > span {
  max-width: 480px;
  color: var(--bridge-text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
  text-align: right;
}

.app-shell.astro-page .map-filter-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.12fr);
  gap: 12px;
  align-items: start;
}

.app-shell.astro-page .map-filter-group {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid rgba(53, 212, 232, 0.14);
  border-radius: 14px;
  background: rgba(9, 13, 28, 0.34);
  padding: 13px;
}

.app-shell.astro-page .map-filter-group-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.app-shell.astro-page .map-filter-group-heading > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(53, 212, 232, 0.38);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(53, 212, 232, 0.16), rgba(255, 46, 136, 0.08));
  color: var(--bridge-cyan-hi);
  font-size: 0.7rem;
  font-weight: 800;
}

.app-shell.astro-page .map-filter-group-heading h4 {
  color: var(--bridge-star);
  font-size: 0.88rem;
  line-height: 1.2;
}

.app-shell.astro-page .map-filter-group-heading p {
  margin-top: 2px;
  color: var(--bridge-text-muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

/* ---------- Lebensbereiche und Orientierung ---------- */

.app-shell.astro-page .map-axis-legend {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.app-shell.astro-page .map-axis-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.app-shell.astro-page .map-axis-options > button,
.app-shell.astro-page .map-orientation-tools button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(53, 212, 232, 0.15);
  border-radius: 11px;
  background: rgba(16, 22, 44, 0.72);
  color: var(--bridge-text-muted);
  padding: 8px 10px;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  opacity: 0.62;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.app-shell.astro-page .map-axis-options > button:hover,
.app-shell.astro-page .map-axis-options > button:focus-visible,
.app-shell.astro-page .map-axis-options > button.is-active,
.app-shell.astro-page .map-orientation-tools button:hover,
.app-shell.astro-page .map-orientation-tools button:focus-visible,
.app-shell.astro-page .map-orientation-tools button.is-active {
  border-color: rgba(53, 212, 232, 0.48);
  background: linear-gradient(145deg, rgba(53, 212, 232, 0.13), rgba(255, 46, 136, 0.045));
  color: var(--bridge-star);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.app-shell.astro-page .map-axis-options > button.is-hidden,
.app-shell.astro-page .map-orientation-tools button.is-hidden {
  border-color: rgba(53, 212, 232, 0.11);
  background: rgba(9, 13, 28, 0.34);
  color: rgba(183, 184, 198, 0.7);
  opacity: 0.54;
}

.app-shell.astro-page .map-axis-options i,
.app-shell.astro-page .map-orientation-tools i {
  justify-self: center;
}

.app-shell.astro-page .map-axis-options .axis-line-sample {
  width: 18px;
}

.app-shell.astro-page .map-axis-options button > span,
.app-shell.astro-page .map-orientation-tools button > span {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.app-shell.astro-page .map-axis-options strong,
.app-shell.astro-page .map-orientation-tools strong {
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.app-shell.astro-page .map-axis-options small,
.app-shell.astro-page .map-orientation-tools small {
  color: var(--bridge-text-muted);
  font-size: 0.59rem;
  font-weight: 600;
  line-height: 1.25;
}

.app-shell.astro-page .map-orientation-tools {
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(53, 212, 232, 0.12);
  padding-top: 10px;
}

.app-shell.astro-page .map-orientation-tools > span,
.app-shell.astro-page .map-legend-actions > span {
  color: var(--bridge-text-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-shell.astro-page .map-orientation-tools > div {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.app-shell.astro-page .map-orientation-tools button {
  min-height: 44px;
  opacity: 1;
}

/* ---------- Planetenlinien ---------- */

.app-shell.astro-page .map-legend {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* Erstblick-Hinweis: der jungfräuliche Start zeigt nur den stärksten Anker
   (app.js mapErstblick). Diese Zeile erklärt es statisch bei der Legende. */
.app-shell.astro-page .map-legend-hint {
  margin: 0 0 9px;
  color: var(--bridge-text-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.app-shell.astro-page .map-planet-options,
.app-shell.astro-page .map-extra-point-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.app-shell.astro-page .map-legend-item {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: flex-start;
  gap: 6px;
  border: 1px solid rgba(53, 212, 232, 0.12);
  border-radius: 11px;
  background: rgba(9, 13, 28, 0.34);
  color: rgba(183, 184, 198, 0.74);
  padding: 7px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  opacity: 0.56;
  overflow: hidden;
}

.app-shell.astro-page .map-legend-item:hover,
.app-shell.astro-page .map-legend-item:focus-visible,
.app-shell.astro-page .map-legend-item.is-selected,
.app-shell.astro-page .map-legend-item.is-active {
  border-color: color-mix(in srgb, var(--line) 62%, var(--bridge-cyan-bright));
  background: color-mix(in srgb, var(--line) 13%, rgba(16, 22, 44, 0.92));
  color: var(--bridge-star);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.app-shell.astro-page .map-legend-item.is-hidden {
  border-color: rgba(53, 212, 232, 0.1);
  background: rgba(9, 13, 28, 0.28);
  color: rgba(183, 184, 198, 0.68);
  opacity: 0.5;
}

.app-shell.astro-page .map-legend-item > span {
  flex: 0 0 auto;
  color: var(--line);
  font-size: 0.92rem;
}

.app-shell.astro-page .map-legend-item small {
  width: 7px;
  min-width: 7px;
  height: 7px;
  margin-left: auto;
  border-color: color-mix(in srgb, var(--line) 55%, transparent);
  background: transparent;
}

.app-shell.astro-page .map-legend-item.is-active small {
  background: var(--line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 18%, transparent);
}

.app-shell.astro-page .map-extra-points {
  border-top: 1px solid rgba(53, 212, 232, 0.1);
  padding-top: 9px;
}

.app-shell.astro-page .map-extra-points summary {
  cursor: pointer;
  color: var(--bridge-text-muted);
  font-size: 0.65rem;
  font-weight: 750;
}

.app-shell.astro-page .map-extra-point-options {
  padding-top: 8px;
}

/* ---------- Schnellauswahl und geordnete Feinauswahl ---------- */

.app-shell.astro-page .map-legend-actions {
  display: grid;
  gap: 6px;
  border-top: 1px solid rgba(53, 212, 232, 0.12);
  padding-top: 10px;
}

.app-shell.astro-page .map-legend-actions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.app-shell.astro-page .map-legend-actions button {
  min-height: 34px;
  border: 1px solid rgba(53, 212, 232, 0.2);
  border-radius: 999px;
  background: rgba(9, 13, 28, 0.38);
  color: var(--bridge-text-muted);
  padding: 7px 12px;
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: none;
}

.app-shell.astro-page .map-legend-actions button[data-map-show-all-lines] {
  border-color: rgba(53, 212, 232, 0.42);
  background: rgba(53, 212, 232, 0.1);
  color: var(--bridge-cyan-hi);
}

.app-shell.astro-page .map-legend-actions button:hover,
.app-shell.astro-page .map-legend-actions button:focus-visible {
  border-color: rgba(53, 212, 232, 0.54);
  background: rgba(53, 212, 232, 0.14);
  color: var(--bridge-star);
  outline: none;
}

.app-shell.astro-page .map-line-picker {
  width: 100%;
  display: block;
  margin: 0;
  border-top: 1px solid rgba(53, 212, 232, 0.12);
  padding-top: 10px;
}

.app-shell.astro-page .map-line-picker summary {
  width: 100%;
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(53, 212, 232, 0.16);
  border-radius: 11px;
  background: rgba(9, 13, 28, 0.38);
  color: var(--bridge-star);
  padding: 8px 11px;
  cursor: pointer;
}

.app-shell.astro-page .map-line-picker summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(53, 212, 232, 0.1);
  color: var(--bridge-cyan-bright);
  font-weight: 800;
}

.app-shell.astro-page .map-line-picker[open] summary::after {
  content: "−";
}

.app-shell.astro-page .map-line-picker summary > span {
  color: var(--bridge-pink);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-shell.astro-page .map-line-picker summary > strong {
  font-size: 0.7rem;
  font-weight: 750;
}

.app-shell.astro-page .map-line-picker > p {
  margin: 8px 2px 0;
  color: var(--bridge-text-muted);
  font-size: 0.64rem;
}

.app-shell.astro-page .map-line-picker > .map-line-picker-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 9px;
}

.app-shell.astro-page .map-line-picker-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(78px, 0.75fr) minmax(0, 1.25fr);
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(53, 212, 232, 0.11);
  border-radius: 10px;
  background: rgba(9, 13, 28, 0.3);
  padding: 7px;
}

.app-shell.astro-page .map-line-picker-planet {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--bridge-star);
  font-size: 0.63rem;
}

.app-shell.astro-page .map-line-picker-planet > span {
  color: var(--line);
  font-size: 0.84rem;
}

.app-shell.astro-page .map-line-picker-planet strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.astro-page .map-line-picker-axes {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.app-shell.astro-page .map-line-picker-axes button {
  min-width: 0;
  min-height: 29px;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(53, 212, 232, 0.12);
  border-radius: 7px;
  background: rgba(16, 22, 44, 0.72);
  color: var(--bridge-text-muted);
  padding: 4px;
  font-size: 0.54rem;
}

.app-shell.astro-page .map-line-picker-axes button > span {
  color: var(--line);
  font-size: 0.7rem;
}

.app-shell.astro-page .map-line-picker-axes button:hover,
.app-shell.astro-page .map-line-picker-axes button:focus-visible,
.app-shell.astro-page .map-line-picker-axes button.is-active {
  border-color: color-mix(in srgb, var(--line) 60%, var(--bridge-cyan-bright));
  background: color-mix(in srgb, var(--line) 12%, rgba(16, 22, 44, 0.92));
  color: var(--bridge-star);
  outline: none;
}

/* ---------- Responsive und Vollbild ---------- */

@media (max-width: 900px) {
  .app-shell.astro-page .map-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .app-shell.astro-page .map-filter-panel {
    gap: 12px;
    padding: 13px;
  }

  .app-shell.astro-page .map-filter-header {
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .app-shell.astro-page .map-filter-header > span {
    max-width: none;
    text-align: left;
  }

  .app-shell.astro-page .map-axis-options,
  .app-shell.astro-page .map-orientation-tools > div {
    grid-template-columns: 1fr;
  }

  .app-shell.astro-page .map-planet-options,
  .app-shell.astro-page .map-extra-point-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.astro-page .map-line-picker > .map-line-picker-grid {
    grid-template-columns: 1fr;
  }
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel {
  max-height: 132px;
  gap: 7px;
  overflow: auto;
  border-radius: 12px;
  padding: 8px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-header {
  display: none;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-grid {
  grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
  gap: 7px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group {
  gap: 6px;
  border-radius: 9px;
  padding: 7px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group-heading {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group-heading > span {
  width: 22px;
  height: 22px;
  font-size: 0.58rem;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group-heading h4 {
  font-size: 0.68rem;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group-heading p,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-orientation-tools,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-legend-actions,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-line-picker,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-extra-points {
  display: none;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-legend,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-legend {
  max-height: none;
  overflow: visible;
  padding: 0;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options > button {
  min-height: 32px;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px;
  border-radius: 7px;
  padding: 4px 5px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options small {
  display: none;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options strong {
  font-size: 0.59rem;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-planet-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-legend-item {
  min-height: 32px;
  border-radius: 7px;
  padding: 4px 5px;
  font-size: 0.58rem;
}

@media (max-width: 700px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel {
    max-height: 220px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel {
    display: none;
  }
}

@media (pointer: coarse) {
  .app-shell.astro-page .map-axis-options > button,
  .app-shell.astro-page .map-orientation-tools button,
  .app-shell.astro-page .map-legend-item,
  .app-shell.astro-page .map-line-picker summary {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .map-axis-options > button,
  .app-shell.astro-page .map-orientation-tools button,
  .app-shell.astro-page .map-legend-item {
    transition: none;
  }
}


/* ============================================================
   Frame-Feinschliff der Astro-Geografie-Werkzeugseite
   (rein additiv ueber src/styles.css, damit die App-Dateien
   unberuehrt bleiben - dort arbeitet parallel Codex).
   ============================================================ */

/* Karten-Panel-Kopf: Ueberschrift oben ausrichten. Vorher klebte
   "Deine Linien auf der Weltkarte" per align-items:end am Boden der
   hohen Aktionsspalte und wirkte tief/seltsam gesetzt. */
.app-shell.astro-page .map-heading {
  align-items: flex-start;
}

/* Karten-Bedienelemente: sanftes Cyan-Aufleuchten + minimaler Lift beim
   Ueberfahren, damit sie sich premium anfuehlen wie die Startseiten-Buttons.
   REIN ADDITIV: Ruhezustand, Fuellungen, Datenfarben (Planeten-Punkte,
   Achsenfarben) und Aktiv-Zustaende bleiben unveraendert. */
.app-shell.astro-page .map-action-buttons button,
.app-shell.astro-page .map-axis-options > button,
.app-shell.astro-page .map-planet-options .map-legend-item {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.app-shell.astro-page .map-action-buttons button:hover,
.app-shell.astro-page .map-axis-options > button:hover,
.app-shell.astro-page .map-planet-options .map-legend-item:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(53, 212, 232, 0.28);
  transform: translateY(-1px);
}

/* ============================================================
   ASTRO-GEOGRAFIE — kompakte Eingabe und klare Typografie

   Die Geburtsdaten stehen auf grossen Bildschirmen in einer
   ruhigen Zeile. Auf Tablet und Mobil werden die Felder in
   wenige, gut lesbare Reihen umgebrochen. Alle Regeln bleiben
   auf dieser Werkzeugseite begrenzt.
   ============================================================ */

.app-shell.astro-page .page-hero h1 {
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.04;
}

.app-shell.astro-page .control-panel {
  grid-template-columns: minmax(170px, 190px) minmax(0, 1fr);
  gap: 18px;
  padding: 16px 18px;
}

.app-shell.astro-page .control-panel::before {
  height: 3px;
}

.app-shell.astro-page .control-panel .brand-block h2 {
  margin: 0;
  color: var(--bridge-star);
  font-size: clamp(1.2rem, 1.45vw, 1.45rem);
  line-height: 1.12;
}

.app-shell.astro-page .control-panel .brand-block p {
  margin-bottom: 5px;
  font-size: 0.68rem;
}

.app-shell.astro-page .control-panel .brand-block span {
  max-width: 205px;
  margin-top: 6px;
  font-size: 0.74rem;
  line-height: 1.42;
}

.app-shell.astro-page #birth-form {
  grid-template-columns:
    minmax(105px, 0.75fr)
    minmax(135px, 0.95fr)
    minmax(105px, 0.7fr)
    minmax(190px, 1.45fr)
    minmax(145px, 0.95fr)
    minmax(145px, 0.95fr);
  align-items: start;
  gap: 8px 10px;
}

.app-shell.astro-page #birth-form .place-field {
  grid-column: auto;
}

.app-shell.astro-page #birth-form label,
.app-shell.astro-page #birth-form .place-field > label {
  gap: 4px;
  font-size: 0.78rem;
}

.app-shell.astro-page #birth-form .field-label {
  display: inline;
  color: inherit;
}

.app-shell.astro-page #birth-form .field-label small {
  color: rgba(183, 184, 198, 0.78);
  font-size: 0.68rem;
  font-weight: 600;
}

.app-shell.astro-page #birth-form input,
.app-shell.astro-page #birth-form select {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 10px;
}

.app-shell.astro-page #birth-form .field-hint {
  margin-top: 3px;
  font-size: 0.66rem;
  line-height: 1.3;
}

.app-shell.astro-page #birth-form .advanced-options,
.app-shell.astro-page #birth-form > .btn {
  align-self: start;
  min-height: 40px;
  margin-top: 22px;
}

.app-shell.astro-page #birth-form .advanced-options summary {
  min-height: 40px;
  padding: 10px 11px;
  white-space: nowrap;
}

.app-shell.astro-page #birth-form > .btn {
  padding: 8px 15px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.app-shell.astro-page .map-heading h2 {
  font-size: clamp(1.25rem, 1.55vw, 1.5rem);
  line-height: 1.16;
}

.app-shell.astro-page .trust-panel h2,
.app-shell.astro-page .seo-section h2 {
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  line-height: 1.15;
}

.app-shell.astro-page .seo-card h3 {
  font-size: 1.02rem;
  line-height: 1.25;
}

.app-shell.astro-page .axis-seo-grid,
.app-shell.astro-page .planet-seo-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.app-shell.astro-page .detail-panel h3 {
  display: block;
  margin: 0 24px 6px 0;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.2;
}

.app-shell.astro-page #map-result-summary[hidden] {
  display: none !important;
}

@media (max-width: 1240px) {
  .app-shell.astro-page .control-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .app-shell.astro-page .control-panel .brand-block {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: baseline;
    gap: 8px 14px;
  }

  .app-shell.astro-page .control-panel .brand-block p,
  .app-shell.astro-page .control-panel .brand-block span {
    margin: 0;
  }

  .app-shell.astro-page .control-panel .brand-block span {
    max-width: none;
  }
}

@media (max-width: 1100px) {
  .app-shell.astro-page .axis-seo-grid,
  .app-shell.astro-page .planet-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .app-shell.astro-page #birth-form > label:nth-child(1),
  .app-shell.astro-page #birth-form > label:nth-child(2),
  .app-shell.astro-page #birth-form > label:nth-child(3) {
    grid-column: span 4;
  }

  .app-shell.astro-page #birth-form .place-field {
    grid-column: span 6;
  }

  .app-shell.astro-page #birth-form .advanced-options,
  .app-shell.astro-page #birth-form > .btn {
    grid-column: span 3;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .app-shell.astro-page .page-hero {
    gap: 18px;
    padding: 20px;
  }

  .app-shell.astro-page .page-hero h1 {
    font-size: clamp(1.9rem, 9vw, 2.65rem);
  }

  .app-shell.astro-page .control-panel {
    gap: 14px;
    padding: 15px;
  }

  .app-shell.astro-page .control-panel .brand-block {
    display: block;
  }

  .app-shell.astro-page .control-panel .brand-block p {
    margin-bottom: 5px;
  }

  .app-shell.astro-page .control-panel .brand-block span {
    margin-top: 6px;
  }

  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .app-shell.astro-page #birth-form > label:nth-child(1),
  .app-shell.astro-page #birth-form .place-field {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page #birth-form > label:nth-child(2),
  .app-shell.astro-page #birth-form > label:nth-child(3),
  .app-shell.astro-page #birth-form .advanced-options,
  .app-shell.astro-page #birth-form > .btn {
    grid-column: auto;
  }

  .app-shell.astro-page #birth-form input,
  .app-shell.astro-page #birth-form select {
    font-size: 16px;
  }

  .app-shell.astro-page .axis-seo-grid,
  .app-shell.astro-page .planet-seo-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .app-shell.astro-page #birth-form .advanced-options,
  .app-shell.astro-page #birth-form > .btn {
    grid-column: 1 / -1;
  }
}

@media (pointer: coarse) {
  .app-shell.astro-page #birth-form input,
  .app-shell.astro-page #birth-form select,
  .app-shell.astro-page #birth-form .advanced-options summary,
  .app-shell.astro-page #birth-form > .btn {
    min-height: 44px;
  }
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .detail-panel h3 {
  font-size: 0.98rem;
  line-height: 1.16;
}

/* ============================================================
   ASTRO-GEOGRAFIE — sichere Seitenraender und Kartenbreite

   Auf schmaleren Desktop-Fenstern war die rechte Karten-Spalte
   bis 1181 px noch neben der Karte aktiv. In Kombination mit dem
   global ausgeblendeten Horizontal-Overflow konnte das wie eine
   abgeschnittene rechte Seite wirken. Die Werkzeugseite bekommt
   deshalb einen echten Aussenrand und bricht die Infospalte
   frueher in eine volle Zeile um.
   ============================================================ */

@media (min-width: 901px) {
  .app-shell.astro-page {
    width: min(calc(100% - 32px), 1920px);
  }
}

@media (max-width: 1320px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-side-stack,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-reading-panel,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .detail-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* Mobile Navigation: ausreichend grosse Touchflaechen ohne Markup-Aenderung. */
@media (max-width: 680px) {
  .bridge-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - ruhiger Eingabefluss und eigene Ortssuche

   Pflichtdaten stehen in einer klaren Hauptreihe. Die selten
   benoetigte Berechnungsmethode und die Hauptaktion bilden eine
   zweite Ebene. Die Kartensuche sitzt direkt vor der Karte.
   ============================================================ */

.app-shell.astro-page #birth-form {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 12px 10px;
}

.app-shell.astro-page #birth-form .birth-field-name,
.app-shell.astro-page #birth-form .birth-field-date,
.app-shell.astro-page #birth-form .birth-field-time {
  grid-column: span 2;
}

.app-shell.astro-page #birth-form .birth-field-place {
  grid-column: span 6;
}

.app-shell.astro-page #birth-form .advanced-options {
  grid-column: 1 / span 8;
}

.app-shell.astro-page #birth-form > .calculate-button {
  grid-column: 9 / -1;
}

.app-shell.astro-page #birth-form .advanced-options,
.app-shell.astro-page #birth-form > .calculate-button {
  align-self: start;
  min-height: 52px;
  margin-top: 0;
}

.app-shell.astro-page #birth-form > .calculate-button {
  width: 100%;
  height: 52px;
  padding-inline: 22px;
  font-size: 0.88rem;
}

.app-shell.astro-page #birth-form .advanced-options summary {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 13px;
  white-space: normal;
}

.app-shell.astro-page #birth-form .advanced-options summary::after {
  flex: 0 0 auto;
  float: none;
}

.app-shell.astro-page #birth-form .advanced-summary {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.app-shell.astro-page #birth-form .advanced-summary strong {
  color: var(--bridge-cyan-hi);
  font-size: 0.78rem;
  line-height: 1.25;
}

.app-shell.astro-page #birth-form .advanced-summary small {
  color: rgba(183, 184, 198, 0.82);
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.25;
}

.app-shell.astro-page #birth-form .advanced-options-body {
  display: grid;
  grid-template-columns: minmax(230px, 0.78fr) minmax(280px, 1.22fr);
  align-items: start;
  gap: 14px;
  border-top: 1px solid rgba(127, 233, 244, 0.1);
  padding: 12px 13px 13px;
}

.app-shell.astro-page #birth-form .advanced-options-body label {
  padding: 0;
}

.app-shell.astro-page #birth-form .advanced-help {
  margin: 1px 0 0;
  color: var(--bridge-text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.5;
}

.app-shell.astro-page .map-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 28px;
}

.app-shell.astro-page .map-heading-hint {
  max-width: 360px;
  margin: 0;
  color: var(--bridge-text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
  text-align: right;
}

.app-shell.astro-page .map-location-toolbar {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: minmax(300px, 520px) minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  border: 1px solid rgba(127, 233, 244, 0.13);
  border-radius: 14px;
  background: rgba(7, 11, 24, 0.32);
  padding: 10px 12px;
}

.app-shell.astro-page .map-location-toolbar .map-search-field {
  width: 100%;
  max-width: none;
}

.app-shell.astro-page .map-location-toolbar .map-search-field input {
  min-height: 42px;
  border-radius: 11px;
  padding-inline: 12px;
}

.app-shell.astro-page .map-location-toolbar > p {
  max-width: 620px;
  margin: 0 0 4px;
  color: var(--bridge-text-muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.app-shell.astro-page .map-location-toolbar .map-action-buttons {
  align-self: end;
  justify-content: flex-end;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-location-toolbar .map-action-buttons button {
  min-height: 42px;
  white-space: nowrap;
}

.app-shell.astro-page .map-location-toolbar .map-search-list {
  top: 65px;
}

@media (max-width: 1240px) {
  .app-shell.astro-page #birth-form .birth-field-name,
  .app-shell.astro-page #birth-form .birth-field-date,
  .app-shell.astro-page #birth-form .birth-field-time {
    grid-column: span 2;
  }

  .app-shell.astro-page #birth-form .birth-field-place {
    grid-column: span 6;
  }
}

@media (max-width: 1050px) {
  .app-shell.astro-page #birth-form .birth-field-name,
  .app-shell.astro-page #birth-form .birth-field-date,
  .app-shell.astro-page #birth-form .birth-field-time {
    grid-column: span 4;
  }

  .app-shell.astro-page #birth-form .birth-field-place {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page #birth-form .advanced-options {
    grid-column: 1 / span 8;
  }

  .app-shell.astro-page #birth-form > .calculate-button {
    grid-column: 9 / -1;
  }
}

@media (max-width: 900px) {
  .app-shell.astro-page .map-heading {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .app-shell.astro-page .map-heading-hint {
    max-width: none;
    text-align: left;
  }

  .app-shell.astro-page .map-location-toolbar {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 7px;
  }

  .app-shell.astro-page .map-location-toolbar > p {
    margin: 0;
  }

  .app-shell.astro-page .map-location-toolbar .map-action-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.astro-page #birth-form .birth-field-name,
  .app-shell.astro-page #birth-form .birth-field-place,
  .app-shell.astro-page #birth-form .advanced-options,
  .app-shell.astro-page #birth-form > .calculate-button {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page #birth-form > .birth-field-date,
  .app-shell.astro-page #birth-form > .birth-field-time {
    grid-column: span 1;
  }

  .app-shell.astro-page #birth-form .advanced-options-body {
    grid-template-columns: 1fr;
    gap: 9px;
  }

}

@media (max-width: 520px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.astro-page #birth-form > .birth-field-date,
  .app-shell.astro-page #birth-form > .birth-field-time {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page .map-location-toolbar {
    padding: 10px;
  }

  .app-shell.astro-page .map-location-toolbar .map-action-buttons,
  .app-shell.astro-page .map-location-toolbar .map-action-buttons button {
    width: 100%;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - einheitliche Mikrointeraktionen

   Echte Bedienelemente bleiben klar als solche erkennbar. Rein
   informative Symbole und Karten reagieren nur mit Licht, Farbe
   und Kontur, damit kein falscher Klickhinweis entsteht.
   ============================================================ */

.app-shell .trust-mark,
.app-shell.astro-page .seo-card,
.app-shell.astro-page .location-guide-principle,
.app-shell.astro-page .location-guide .step-list li,
.app-shell.astro-page .location-guide .step-number,
.app-shell.astro-page .map-filter-group,
.app-shell.astro-page .map-filter-group-heading > span,
.app-shell.astro-page #birth-form input,
.app-shell.astro-page #birth-form select,
.app-shell.astro-page .map-search-field input,
.app-shell.astro-page .advanced-options summary,
.app-shell.astro-page .advanced-options summary::after,
.app-shell.astro-page .distance-table > .distance-band::before {
  transition:
    border-color 0.22s ease,
    background 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease,
    filter 0.22s ease,
    opacity 0.22s ease,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell.astro-page .map-action-buttons button,
.app-shell.astro-page .map-aspect-controls button,
.app-shell.astro-page .map-fullscreen-float,
.app-shell.astro-page .map-zoom-controls button,
.app-shell.astro-page .map-filter-toggle,
.app-shell.astro-page .map-summary-line,
.app-shell.astro-page .map-summary-back,
.app-shell.astro-page .advanced-options summary {
  cursor: pointer;
}

.app-shell.astro-page .map-filter-group:focus-within,
.app-shell.astro-page .advanced-options:focus-within {
  border-color: rgba(127, 233, 244, 0.38);
  box-shadow:
    0 0 0 1px rgba(127, 233, 244, 0.08),
    inset 0 0 18px rgba(127, 233, 244, 0.045);
}

.app-shell.astro-page
  :is(
    .btn,
    .map-action-buttons button,
    .map-aspect-controls button,
    .map-fullscreen-float,
    .map-zoom-controls button,
    .map-filter-toggle,
    .map-summary-line,
    .map-summary-back,
    .advanced-options summary,
    #map-axis-legend button,
    #astro-map-legend button,
    #astro-map-legend summary
  ):focus-visible {
  outline: 2px solid rgba(127, 233, 244, 0.9);
  outline-offset: 3px;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell .trust-panel:hover .trust-mark,
  .app-shell .trust-mark:hover {
    border-color: rgba(155, 234, 241, 0.15);
    background: linear-gradient(145deg, var(--bridge-icon-surface-strong-start), var(--bridge-icon-surface-strong-end));
    color: var(--bridge-star);
    box-shadow: 0 11px 23px rgba(0, 0, 0, 0.23), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    filter: none;
  }

  .app-shell.astro-page .seo-card:hover,
  .app-shell.astro-page .seo-card:focus-within {
    border-color: rgba(127, 233, 244, 0.3);
    background: linear-gradient(145deg, rgba(21, 29, 56, 0.64), rgba(9, 13, 28, 0.44));
    box-shadow:
      0 9px 24px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .app-shell.astro-page .location-guide-principle:hover {
    border-color: rgba(127, 233, 244, 0.32);
    background: rgba(16, 24, 47, 0.52);
    box-shadow: inset 0 0 18px rgba(127, 233, 244, 0.045);
  }

  .app-shell.astro-page .location-guide .step-list li:hover {
    border-color: rgba(127, 233, 244, 0.28);
    background: linear-gradient(145deg, rgba(24, 34, 62, 0.74), rgba(10, 15, 31, 0.52));
    box-shadow:
      0 7px 20px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.035);
  }

  .app-shell.astro-page .location-guide .step-list li:hover .step-number,
  .app-shell.astro-page .location-guide .step-number:hover {
    border-color: rgba(127, 233, 244, 0.72);
    background: linear-gradient(145deg, rgba(53, 212, 232, 0.24), rgba(9, 13, 28, 0.86));
    color: #c9fbff;
    box-shadow:
      0 0 0 3px rgba(127, 233, 244, 0.08),
      0 0 18px rgba(53, 212, 232, 0.2);
    filter: brightness(1.1);
  }

  .app-shell.astro-page .map-filter-group:hover .map-filter-group-heading > span,
  .app-shell.astro-page .map-filter-group-heading > span:hover {
    border-color: rgba(127, 233, 244, 0.58);
    background: linear-gradient(145deg, rgba(41, 58, 92, 0.96), rgba(14, 21, 39, 0.96));
    color: #c8faff;
    box-shadow:
      0 0 0 2px rgba(127, 233, 244, 0.06),
      0 0 15px rgba(53, 212, 232, 0.15);
    filter: brightness(1.08);
  }

  .app-shell.astro-page #birth-form input:hover:not(:focus):not(:disabled):not([aria-invalid="true"]),
  .app-shell.astro-page #birth-form select:hover:not(:focus):not(:disabled),
  .app-shell.astro-page .map-search-field input:hover:not(:focus):not(:disabled) {
    border-color: rgba(127, 233, 244, 0.56);
    background: var(--field-bg-hover, #fbfdfe);
    box-shadow:
      inset 0 1px 2px rgba(9, 13, 28, 0.08),
      0 0 0 2px rgba(127, 233, 244, 0.055);
  }

  .app-shell.astro-page .advanced-options summary:hover {
    background: rgba(127, 233, 244, 0.065);
    color: var(--bridge-star);
  }

  .app-shell.astro-page .advanced-options summary:hover::after {
    color: var(--bridge-cyan-hi);
    filter: drop-shadow(0 0 5px rgba(53, 212, 232, 0.36));
  }

  .app-shell.astro-page .distance-table > .distance-band:hover::before {
    filter: brightness(1.18) drop-shadow(0 0 4px color-mix(in srgb, var(--distance-accent-on-dark) 48%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .trust-mark,
  .app-shell.astro-page .seo-card,
  .app-shell.astro-page .axis-dial,
  .app-shell.astro-page .location-guide-principle,
  .app-shell.astro-page .location-guide .step-list li,
  .app-shell.astro-page .location-guide .step-number,
  .app-shell.astro-page .map-filter-group,
  .app-shell.astro-page .map-filter-group-heading > span,
  .app-shell.astro-page .map-action-buttons button,
  .app-shell.astro-page .map-aspect-controls button,
  .app-shell.astro-page .map-fullscreen-float,
  .app-shell.astro-page .map-zoom-controls button,
  .app-shell.astro-page #map-axis-legend button,
  .app-shell.astro-page #astro-map-legend button,
  .app-shell.astro-page #astro-map-legend summary {
    animation: none !important;
    transition: none !important;
  }

  .app-shell.astro-page .landing-content .axis-seo-card:hover .axis-dial,
  .app-shell.astro-page .map-action-buttons button:hover,
  .app-shell.astro-page .map-aspect-controls button:hover,
  .app-shell.astro-page .map-fullscreen-float:hover,
  .app-shell.astro-page .map-zoom-controls button:hover,
  .app-shell.astro-page #map-axis-legend button:hover,
  .app-shell.astro-page #astro-map-legend button:hover,
  .app-shell.astro-page #astro-map-legend summary:hover {
    transform: none !important;
  }
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
  gap: 12px;
  padding: 6px 8px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-search-field {
  width: 100%;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-search-field input {
  min-height: 34px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar > p {
  font-size: 0.68rem;
}

@media (orientation: landscape) and (max-height: 520px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    display: none;
  }
}

@media (pointer: coarse) {
  .app-shell.astro-page .map-location-toolbar .map-search-field input,
  .app-shell.astro-page .map-location-toolbar .map-action-buttons button {
    min-height: 44px;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - Geburtsdaten wie im Human-Design-Rechner

   Vier gleichwertige Felder, Datum und Uhrzeit als robuste
   Auswahlgruppen. Die fuer die Linienkarte nicht benoetigte
   Hausmethode bleibt technisch erhalten, aber unsichtbar.
   ============================================================ */

.app-shell.astro-page .control-panel {
  width: min(100%, 1280px);
  justify-self: center;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 20px 22px;
}

.app-shell.astro-page .control-panel .brand-block {
  display: block;
}

.app-shell.astro-page .control-panel .brand-block span {
  max-width: 680px;
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.42;
}

.app-shell.astro-page #birth-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 16px 18px;
}

.app-shell.astro-page #birth-form > .birth-field,
.app-shell.astro-page #birth-form .birth-field-place,
.app-shell.astro-page #birth-form > .calculate-button {
  grid-column: auto;
  min-width: 0;
}

/* iPhone-Räder 14.07.: Das Datum besteht aus drei statischen nativen Selects;
   Optionslisten und Werte bleiben während der Bedienung unberührt. Die
   Geburtszeit bleibt als stabiles natives Feld erhalten. */

.app-shell.astro-page #birth-form .field-hint {
  min-height: 0;
  margin-top: 1px;
  font-size: 0.7rem;
  line-height: 1.35;
}

.app-shell.astro-page #birth-form .advanced-options[hidden] {
  display: none !important;
}

.app-shell.astro-page #birth-form > .calculate-button {
  grid-column: 1 / -1;
  justify-self: start;
  width: auto;
  min-width: 210px;
  min-height: 46px;
  height: auto;
  margin: 0;
  padding: 10px 24px;
  font-size: 0.84rem;
}

@media (max-width: 1050px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .app-shell.astro-page .control-panel {
    gap: 13px;
    padding: 17px;
  }

  .app-shell.astro-page #birth-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
  }

  .app-shell.astro-page #birth-form > .calculate-button {
    justify-self: stretch;
    width: 100%;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - eindeutige Interaktion der Kartenlegende

   Die meisten Filter sind beim Start bereits aktiv. Deshalb muss
   der Hover-/Fokuszustand den Aktivzustand sichtbar überlagern.
   ============================================================ */

.app-shell.astro-page .map-filter-panel button,
.app-shell.astro-page .map-filter-panel summary {
  cursor: pointer;
  touch-action: manipulation;
  will-change: transform;
}

.app-shell.astro-page #map-axis-legend .map-axis-options > button,
.app-shell.astro-page #map-axis-legend .map-orientation-tools button,
.app-shell.astro-page #astro-map-legend .map-planet-options .map-legend-item,
.app-shell.astro-page #astro-map-legend .map-legend-actions button,
.app-shell.astro-page #astro-map-legend .map-line-picker summary,
.app-shell.astro-page #astro-map-legend .map-line-picker-axes button {
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease,
    filter 0.2s ease;
}

.app-shell.astro-page #map-axis-legend .axis-line-sample,
.app-shell.astro-page #map-axis-legend .birth-sample,
.app-shell.astro-page #map-axis-legend .crossing-sample,
.app-shell.astro-page #astro-map-legend .map-legend-item > span,
.app-shell.astro-page #astro-map-legend .map-line-picker-axes button > span {
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell.astro-page #map-axis-legend .map-axis-options > button:hover,
  .app-shell.astro-page #map-axis-legend .map-orientation-tools button:hover,
  .app-shell.astro-page #astro-map-legend .map-planet-options .map-legend-item:hover,
  .app-shell.astro-page #astro-map-legend .map-legend-actions button:hover,
  .app-shell.astro-page #astro-map-legend .map-line-picker summary:hover,
  .app-shell.astro-page #astro-map-legend .map-line-picker-axes button:hover {
    border-color: rgba(127, 233, 244, 0.68);
    background: linear-gradient(158deg, #223150 0%, #17233d 58%, #1b2039 100%);
    color: var(--bridge-star, #f4efe4);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.34),
      0 0 0 1px rgba(127, 233, 244, 0.08),
      inset 0 0 14px rgba(127, 233, 244, 0.09);
    opacity: 1;
    filter: brightness(1.08);
    transform: translateY(-2px) scale(1.012);
  }

  .app-shell.astro-page #map-axis-legend .map-axis-options > button:hover .axis-line-sample,
  .app-shell.astro-page #map-axis-legend .map-orientation-tools button:hover .birth-sample,
  .app-shell.astro-page #map-axis-legend .map-orientation-tools button:hover .crossing-sample,
  .app-shell.astro-page #astro-map-legend .map-planet-options .map-legend-item:hover > span,
  .app-shell.astro-page #astro-map-legend .map-line-picker-axes button:hover > span {
    filter: brightness(1.14) drop-shadow(0 0 6px rgba(127, 233, 244, 0.2));
    transform: scale(1.09);
  }
}

.app-shell.astro-page #map-axis-legend .map-axis-options > button:focus-visible,
.app-shell.astro-page #map-axis-legend .map-orientation-tools button:focus-visible,
.app-shell.astro-page #astro-map-legend .map-planet-options .map-legend-item:focus-visible,
.app-shell.astro-page #astro-map-legend .map-legend-actions button:focus-visible,
.app-shell.astro-page #astro-map-legend .map-line-picker summary:focus-visible,
.app-shell.astro-page #astro-map-legend .map-line-picker-axes button:focus-visible {
  border-color: rgba(127, 233, 244, 0.78);
  background: linear-gradient(158deg, #223150 0%, #17233d 58%, #1b2039 100%);
  color: var(--bridge-star, #f4efe4);
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.32),
    0 0 0 3px rgba(127, 233, 244, 0.16),
    inset 0 0 14px rgba(127, 233, 244, 0.09);
  opacity: 1;
  outline: 2px solid rgba(127, 233, 244, 0.88);
  outline-offset: 3px;
  transform: translateY(-2px) scale(1.012);
}

.app-shell.astro-page #map-axis-legend .map-axis-options > button:active,
.app-shell.astro-page #map-axis-legend .map-orientation-tools button:active,
.app-shell.astro-page #astro-map-legend .map-planet-options .map-legend-item:active,
.app-shell.astro-page #astro-map-legend .map-legend-actions button:active,
.app-shell.astro-page #astro-map-legend .map-line-picker summary:active,
.app-shell.astro-page #astro-map-legend .map-line-picker-axes button:active {
  box-shadow:
    0 3px 9px rgba(0, 0, 0, 0.28),
    inset 0 0 12px rgba(127, 233, 244, 0.12);
  filter: brightness(1.03);
  transform: translateY(0) scale(0.985);
  transition-duration: 0.07s;
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .map-filter-panel button,
  .app-shell.astro-page .map-filter-panel summary,
  .app-shell.astro-page .map-filter-panel button i,
  .app-shell.astro-page .map-filter-panel .map-legend-item > span,
  .app-shell.astro-page .map-filter-panel .map-line-picker-axes button > span {
    transition: none;
  }

  .app-shell.astro-page #map-axis-legend .map-axis-options > button:hover,
  .app-shell.astro-page #map-axis-legend .map-axis-options > button:focus-visible,
  .app-shell.astro-page #map-axis-legend .map-orientation-tools button:hover,
  .app-shell.astro-page #map-axis-legend .map-orientation-tools button:focus-visible,
  .app-shell.astro-page #astro-map-legend .map-legend-item:hover,
  .app-shell.astro-page #astro-map-legend .map-legend-item:focus-visible,
  .app-shell.astro-page #astro-map-legend .map-legend-actions button:hover,
  .app-shell.astro-page #astro-map-legend .map-legend-actions button:focus-visible,
  .app-shell.astro-page #astro-map-legend .map-line-picker summary:hover,
  .app-shell.astro-page #astro-map-legend .map-line-picker summary:focus-visible,
  .app-shell.astro-page #astro-map-legend .map-line-picker-axes button:hover,
  .app-shell.astro-page #astro-map-legend .map-line-picker-axes button:focus-visible,
  .app-shell.astro-page #map-axis-legend button:active,
  .app-shell.astro-page #astro-map-legend button:active,
  .app-shell.astro-page #astro-map-legend summary:active,
  .app-shell.astro-page #map-axis-legend button:hover i,
  .app-shell.astro-page #astro-map-legend button:hover > span {
    transform: none;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - gemeinsames Seitenraster

   Die Werkzeugseite folgt demselben ruhigen Prinzip wie die
   Startseite: ein begrenzter, zentrierter Inhaltsrahmen und
   wiederkehrende Radien. Formular, Karte und Inhaltskarten
   liegen dadurch auf einer gemeinsamen linken und rechten Kante.
   ============================================================ */

.app-shell.astro-page {
  --astro-page-max: 1400px;
  --astro-card-radius: 20px;
  --astro-inner-radius: 16px;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.app-shell.astro-page .page-hero,
.app-shell.astro-page .control-panel,
.app-shell.astro-page .chart-data,
.app-shell.astro-page .astro-map-panel,
.app-shell.astro-page .landing-content {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.app-shell.astro-page .page-hero,
.app-shell.astro-page .control-panel,
.app-shell.astro-page .astro-map-panel,
.app-shell.astro-page .trust-panel,
.app-shell.astro-page .seo-section {
  border-radius: var(--astro-card-radius);
}

.app-shell.astro-page .map-location-toolbar,
.app-shell.astro-page .astro-map,
.app-shell.astro-page .map-result-summary,
.app-shell.astro-page .detail-panel {
  border-radius: var(--astro-inner-radius);
}

.app-shell.astro-page .map-result-summary {
  padding: 16px;
}

.app-shell.astro-page .map-side-stack:not(:has(> :not([hidden]))) {
  display: none;
}

@media (min-width: 901px) {
  .app-shell.astro-page {
    width: min(calc(100% - 32px), var(--astro-page-max));
  }

  .app-shell.astro-page .control-panel,
  .app-shell.astro-page .astro-map-panel {
    padding: 20px 22px;
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.astro-page .control-panel,
  .app-shell.astro-page .astro-map-panel {
    padding: 18px;
  }
}

@media (max-width: 620px) {
  .app-shell.astro-page {
    --astro-card-radius: 18px;
    --astro-inner-radius: 14px;
    gap: 16px;
  }

  .app-shell.astro-page .control-panel,
  .app-shell.astro-page .astro-map-panel {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .app-shell.astro-page {
    gap: 14px;
  }
}

@media (min-width: 1321px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 380px);
    gap: 16px;
  }

  .app-shell.astro-page
    .astro-map-panel:not(.is-fullscreen)
    .map-workspace:not(:has(.map-side-stack > :not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - klare Schrittfolge fuer die Ortsauswertung

   Die Anleitung trennt Handlung und Erklaerung sichtbar. Ruhige
   Nummern und eine feine Verbindungslinie zeigen die Reihenfolge,
   ohne wie weitere interaktive Kartenfilter zu wirken.
   ============================================================ */

.app-shell.astro-page .location-guide {
  grid-template-columns: minmax(360px, 0.42fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(28px, 3vw, 48px);
}

.app-shell.astro-page .location-guide-heading {
  display: grid;
  gap: 10px;
  max-width: 360px;
}

.app-shell.astro-page .location-guide-heading .eyebrow {
  margin-bottom: 0;
}

.app-shell.astro-page .location-guide-intro {
  max-width: 34ch;
  margin: 2px 0 0;
  color: var(--bridge-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.app-shell.astro-page .location-guide-principle {
  display: grid;
  gap: 5px;
  margin: 5px 0 0;
  border: 1px solid rgba(127, 233, 244, 0.13);
  border-radius: 12px;
  background: rgba(9, 13, 28, 0.3);
  padding: 11px 13px;
}

.app-shell.astro-page .location-guide-principle span {
  color: var(--bridge-cyan-bright);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-shell.astro-page .location-guide-principle strong {
  color: var(--bridge-star);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

.app-shell.astro-page .location-guide .step-list {
  gap: 10px;
  counter-reset: none;
}

.app-shell.astro-page .location-guide .step-list li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  min-height: 0;
  border: 1px solid rgba(127, 233, 244, 0.12);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(21, 29, 56, 0.66), rgba(9, 13, 28, 0.42));
  padding: 13px 15px;
  line-height: 1.5;
}

.app-shell.astro-page .location-guide .step-list li[hidden] {
  display: none !important;
}

.app-shell.astro-page .location-guide .step-list li::before {
  content: none;
}

.app-shell.astro-page .location-guide .step-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 31px;
  top: 48px;
  bottom: -12px;
  width: 1px;
  background: linear-gradient(rgba(127, 233, 244, 0.3), rgba(127, 233, 244, 0.05));
  pointer-events: none;
}

.app-shell.astro-page .location-guide .step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(127, 233, 244, 0.38);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(53, 212, 232, 0.14), rgba(9, 13, 28, 0.88));
  color: var(--bridge-cyan-hi);
  font-size: 0.76rem;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 5px 14px rgba(0, 0, 0, 0.2);
}

.app-shell.astro-page .location-guide .step-content {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.app-shell.astro-page .location-guide .step-content > strong {
  color: var(--bridge-star);
  font-size: 0.94rem;
  font-weight: 720;
  line-height: 1.35;
}

.app-shell.astro-page .location-guide .step-content > span {
  max-width: 72ch;
  color: var(--bridge-text-muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.app-shell.astro-page .location-guide .step-note {
  display: block;
  margin-top: 2px;
  color: rgba(183, 184, 198, 0.76);
  font-size: 0.76rem;
  line-height: 1.45;
}

.app-shell.astro-page .location-guide .step-note a {
  color: var(--bridge-cyan-hi);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: rgba(127, 233, 244, 0.42);
  text-underline-offset: 3px;
}

.app-shell.astro-page .location-guide .step-note a:hover,
.app-shell.astro-page .location-guide .step-note a:focus-visible {
  color: var(--bridge-star);
  text-decoration-color: currentColor;
}

@media (max-width: 900px) {
  .app-shell.astro-page .location-guide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }

  .app-shell.astro-page .location-guide-heading {
    max-width: 620px;
  }

  .app-shell.astro-page .location-guide-intro {
    max-width: 62ch;
  }

  .app-shell.astro-page .location-guide-principle {
    max-width: 520px;
  }
}

@media (max-width: 520px) {
  .app-shell.astro-page .location-guide {
    row-gap: 16px;
  }

  .app-shell.astro-page .location-guide .step-list {
    gap: 8px;
  }

  .app-shell.astro-page .location-guide .step-list li {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    border-radius: 12px;
    padding: 12px;
  }

  .app-shell.astro-page .location-guide .step-list li:not(:last-child)::after {
    left: 27px;
    top: 45px;
    bottom: -10px;
  }

  .app-shell.astro-page .location-guide .step-number {
    width: 32px;
    height: 32px;
  }

  .app-shell.astro-page .location-guide .step-content > strong {
    font-size: 0.91rem;
  }

  .app-shell.astro-page .location-guide .step-content > span {
    font-size: 0.84rem;
  }

  .app-shell.astro-page .map-summary-line {
    align-items: start;
  }

  .app-shell.astro-page .map-summary-line-copy > small {
    overflow: visible;
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
  }
}

/* ============================================================
   Astro-Geografie — ruhigere, kompaktere Kartenlegende

   Alle Filter bleiben unmittelbar sichtbar und auswählbar. Die
   Verdichtung entfernt nur doppelte Signale: Schrittnummern,
   Statuspunkte, starke Schatten und vermeidbare Leerzeilen.
   ============================================================ */

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel {
  gap: 10px;
  padding: 13px;
  border-color: rgba(127, 233, 244, 0.12);
  background: linear-gradient(150deg, rgba(18, 25, 47, 0.96), rgba(9, 13, 28, 0.92));
  box-shadow: none;
}

.app-shell.astro-page .control-panel::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 233, 244, 0.42), transparent);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel::before {
  content: none;
  display: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-header {
  align-items: center;
  gap: 12px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-header > span {
  max-width: 370px;
  color: rgba(183, 184, 198, 0.78);
  font-size: 0.7rem;
  line-height: 1.35;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-grid {
  grid-template-columns: minmax(360px, 0.64fr) minmax(0, 1.36fr);
  gap: 10px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group {
  gap: 8px;
  padding: 10px;
  border-color: rgba(127, 233, 244, 0.085);
  background: rgba(7, 11, 24, 0.24);
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group-heading {
  display: block;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group-heading > span,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group-heading p {
  display: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group-heading h4 {
  color: rgba(244, 239, 228, 0.9);
  font-size: 0.78rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-axis-legend,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-legend {
  gap: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-axis-options {
  grid-template-columns: repeat(4, 48px);
  justify-content: start;
  gap: 8px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options > button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button {
  min-height: 46px;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  padding: 6px 7px;
  border-radius: 11px;
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options > button {
  position: relative;
  width: 48px;
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 6px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button {
  position: relative;
  width: auto;
  min-height: 38px;
  grid-template-columns: 22px auto;
  padding: 6px 10px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools strong {
  white-space: nowrap;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options > button::after,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button::after {
  content: attr(data-hover-label);
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: min(230px, calc(100vw - 32px));
  padding: 6px 9px;
  border: 1px solid rgba(127, 233, 244, 0.3);
  border-radius: 8px;
  background: rgba(9, 13, 28, 0.97);
  color: var(--bridge-star, #f4efe4);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options > button:hover::after,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options > button:focus-visible::after,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button:hover::after,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .axis-line-sample,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .birth-sample,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .crossing-sample {
  width: 22px;
  height: 22px;
  border-radius: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options .axis-line-sample {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-axis-legend .map-axis-options > button {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-axis-options small,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools small {
  font-size: 0.54rem;
  line-height: 1.15;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-orientation-tools {
  gap: 6px;
  padding-top: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-orientation-tools > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-orientation-tools > span {
  font-size: 0.55rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend {
  grid-template-columns: auto minmax(250px, 1fr);
  align-items: end;
  column-gap: 10px;
  row-gap: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-planet-options {
  grid-column: 1 / -1;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-planet-options .map-legend-item {
  min-height: 40px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 5px;
  padding: 5px 7px;
  border-radius: 10px;
  font-size: 0.63rem;
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-item > span {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  font-size: 0.8rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-item small {
  display: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-optional-divider {
  display: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-actions {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-actions > span {
  display: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-actions > div {
  flex-wrap: nowrap;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-actions button {
  min-height: 34px;
  padding: 5px 9px;
  border-radius: 10px;
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-line-picker {
  grid-column: 2;
  padding-top: 7px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-line-picker summary {
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 10px;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel button:hover,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel summary:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    filter: brightness(1.04);
    transform: translateY(-1px);
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel button:hover i,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel .map-legend-item:hover > span {
    filter: brightness(1.08) drop-shadow(0 0 4px rgba(127, 233, 244, 0.14));
    transform: scale(1.04);
  }
}

@media (max-width: 900px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel {
    gap: 8px;
    padding: 10px;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-header > span {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-axis-options {
    grid-template-columns: repeat(4, 48px);
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-planet-options,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-legend-actions,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-line-picker {
    grid-column: 1;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-planet-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #astro-map-legend .map-optional-divider {
    display: block;
    grid-column: 1 / -1;
    padding-top: 3px;
    color: rgba(183, 184, 198, 0.64);
    font-size: 0.53rem;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel summary {
    min-height: 44px;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel #astro-map-legend .map-planet-options .map-legend-item,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel #astro-map-legend .map-legend-actions button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel #astro-map-legend .map-line-picker summary {
    min-height: 44px;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button {
    min-height: 44px;
  }
}

@media (pointer: coarse) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-axis-legend .map-orientation-tools button {
    min-height: 44px;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE - harmonisches Proportionssystem

   Erzaehlerische Zweiteilungen folgen dem Goldenen Schnitt
   (1 : 1.618), funktionale Haupt-/Nebenflaechen der Drittelregel
   (2 : 1). Abstaende und Radien stammen aus einer ruhigen
   Fibonacci-Folge. Gleichwertige Filter und Karten bleiben gleich
   breit; Formfelder folgen ihrem Platzbedarf. Die Verhaeltnisse
   werden nicht gegen Inhalt oder Bedienbarkeit erzwungen.
   ============================================================ */

.app-shell.astro-page {
  --astro-layout-phi: minmax(0, 1.618fr) minmax(0, 1fr);
  --astro-layout-phi-reverse: minmax(0, 1fr) minmax(0, 1.618fr);
  --astro-layout-thirds: minmax(0, 2fr) minmax(0, 1fr);
  --astro-fib-5: 5px;
  --astro-fib-8: 8px;
  --astro-fib-13: 13px;
  --astro-fib-21: 21px;
  --astro-fib-34: 34px;
  --astro-fib-55: 55px;
  --astro-card-radius: 21px;
  --astro-inner-radius: 13px;
  gap: var(--astro-fib-21);
  padding: var(--astro-fib-21);
}

.app-shell.astro-page .control-panel,
.app-shell.astro-page .astro-map-panel {
  padding: var(--astro-fib-21);
}

.app-shell.astro-page .astro-map-panel {
  gap: var(--astro-fib-13);
}

.app-shell.astro-page #birth-form {
  gap: var(--astro-fib-13) var(--astro-fib-21);
}

.app-shell.astro-page #birth-form > .calculate-button {
  min-width: 233px;
  padding-inline: var(--astro-fib-21);
}

.app-shell.astro-page .map-main-column {
  gap: var(--astro-fib-8);
}

.app-shell.astro-page .map-side-stack {
  gap: var(--astro-fib-13);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel {
  gap: var(--astro-fib-13);
  border-radius: var(--astro-inner-radius);
  padding: var(--astro-fib-13);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group {
  gap: var(--astro-fib-8);
  border-radius: var(--astro-inner-radius);
  padding: var(--astro-fib-13);
}

.app-shell.astro-page .landing-content {
  gap: var(--astro-fib-21);
}

.app-shell.astro-page .trust-panel,
.app-shell.astro-page .seo-section {
  padding: var(--astro-fib-34);
}

.app-shell.astro-page .trust-panel {
  grid-template-columns: var(--astro-fib-55) minmax(0, 1fr);
  gap: var(--astro-fib-21);
}

.app-shell.astro-page .trust-mark {
  width: var(--astro-fib-55);
  height: var(--astro-fib-55);
  border-radius: var(--astro-fib-13);
}

.app-shell.astro-page .seo-section {
  gap: var(--astro-fib-21);
}

.app-shell.astro-page .seo-grid {
  gap: var(--astro-fib-13);
}

.app-shell.astro-page .seo-card {
  border-radius: var(--astro-inner-radius);
  padding: var(--astro-fib-21);
}

.app-shell.astro-page .location-guide-heading,
.app-shell.astro-page .location-guide .step-list {
  gap: var(--astro-fib-13);
}

.app-shell.astro-page .location-guide .step-list li {
  grid-template-columns: var(--astro-fib-34) minmax(0, 1fr);
  gap: var(--astro-fib-13);
  border-radius: var(--astro-inner-radius);
  padding: var(--astro-fib-13) var(--astro-fib-21) var(--astro-fib-13) var(--astro-fib-13);
}

.app-shell.astro-page .distance-table {
  border-radius: var(--astro-inner-radius);
}

@media (min-width: 901px) {
  .app-shell.astro-page .page-hero {
    grid-template-columns: var(--astro-layout-phi);
    gap: var(--astro-fib-34);
    padding: var(--astro-fib-34);
  }

  .app-shell.astro-page .control-panel .brand-block {
    display: grid;
    grid-template-columns: var(--astro-layout-phi);
    grid-template-rows: auto auto;
    gap: var(--astro-fib-8) var(--astro-fib-34);
    align-items: center;
  }

  .app-shell.astro-page .control-panel .brand-block > p,
  .app-shell.astro-page .control-panel .brand-block > h2 {
    grid-column: 1;
  }

  .app-shell.astro-page .control-panel .brand-block > span {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: 55ch;
    margin: 0;
  }

  .app-shell.astro-page .map-heading {
    grid-template-columns: var(--astro-layout-phi);
    gap: var(--astro-fib-21);
  }

  .app-shell.astro-page .map-location-toolbar {
    grid-template-columns: minmax(300px, 1.618fr) minmax(220px, 1fr) auto;
    gap: var(--astro-fib-13);
    padding: var(--astro-fib-13);
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-grid {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 1.618fr);
    gap: var(--astro-fib-13);
  }

  .app-shell.astro-page
    .astro-map-panel:not(.is-fullscreen)
    #map-axis-legend
    .map-orientation-tools > div {
    display: grid;
    grid-template-columns: minmax(118px, 3fr) minmax(150px, 5fr);
    gap: var(--astro-fib-8);
  }

  .app-shell.astro-page
    .astro-map-panel:not(.is-fullscreen)
    #map-axis-legend
    .map-orientation-tools button {
    width: 100%;
  }

  .app-shell.astro-page .location-guide {
    grid-template-columns: var(--astro-layout-phi-reverse);
    column-gap: var(--astro-fib-34);
  }

  .app-shell.astro-page .location-guide-heading {
    max-width: none;
  }
}

@media (min-width: 1051px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns:
      minmax(0, 3fr)
      minmax(0, 5fr)
      minmax(0, 5fr)
      minmax(0, 8fr);
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: var(--astro-layout-phi-reverse);
  }

  .app-shell.astro-page #birth-form > .birth-field-name,
  .app-shell.astro-page #birth-form > label.birth-field-name:nth-child(1),
  .app-shell.astro-page #birth-form > .birth-field-date,
  .app-shell.astro-page #birth-form > .birth-field-time,
  .app-shell.astro-page #birth-form > .birth-field-place {
    grid-column: auto;
  }

  .app-shell.astro-page #birth-form > .calculate-button {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1101px) {
  .app-shell.astro-page .section-heading {
    max-width: 61.8%;
  }
}

@media (min-width: 1321px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-workspace,
  .app-shell.astro-page
    .astro-map-panel:not(.is-fullscreen)
    .map-workspace:not(:has(.map-side-stack > :not([hidden]))) {
    grid-template-columns: var(--astro-layout-thirds);
    gap: var(--astro-fib-21);
  }

  .app-shell.astro-page
    .astro-map-panel:not(.is-fullscreen)
    .map-workspace:not(:has(.map-side-stack > :not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 761px) {
  .app-shell.astro-page .distance-table > .distance-band {
    grid-template-columns: minmax(160px, 1fr) minmax(0, 2fr);
    gap: var(--astro-fib-21);
    padding: var(--astro-fib-13) var(--astro-fib-21) var(--astro-fib-13) 23px;
  }

  body:has(.app-shell.astro-page) .legal-note {
    width: min(calc(100% - 42px), 1358px);
    max-width: 1358px;
    margin: var(--astro-fib-21, 21px) auto var(--astro-fib-34, 34px);
    padding: var(--astro-fib-21, 21px) var(--astro-fib-34, 34px);
  }
}

.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-axis-options > button:first-child::after,
.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-orientation-tools button:first-child::after {
  left: 0;
  transform: translateY(3px);
}

.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-axis-options > button:first-child:hover::after,
.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-axis-options > button:first-child:focus-visible::after,
.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-orientation-tools button:first-child:hover::after,
.app-shell.astro-page
  .astro-map-panel:not(.is-fullscreen)
  #map-axis-legend
  .map-orientation-tools button:first-child:focus-visible::after {
  transform: translateY(0);
}

@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.astro-page .trust-panel,
  .app-shell.astro-page .seo-section {
    padding: var(--astro-fib-21);
  }
}

@media (max-width: 620px) {
  .app-shell.astro-page {
    --astro-card-radius: 13px;
    gap: var(--astro-fib-13);
    padding: var(--astro-fib-13);
  }

  .app-shell.astro-page .page-hero {
    gap: var(--astro-fib-13);
    padding: var(--astro-fib-21);
  }

  .app-shell.astro-page .control-panel,
  .app-shell.astro-page .astro-map-panel {
    padding: var(--astro-fib-13);
  }

  .app-shell.astro-page .trust-panel,
  .app-shell.astro-page .seo-section {
    padding: var(--astro-fib-21);
  }

  .app-shell.astro-page .landing-content,
  .app-shell.astro-page .seo-section {
    gap: var(--astro-fib-13);
  }

  .app-shell.astro-page .seo-card {
    padding: var(--astro-fib-13);
  }

  body:has(.app-shell.astro-page) .legal-note {
    width: calc(100% - 26px);
    margin: var(--astro-fib-13, 13px) auto var(--astro-fib-21, 21px);
    padding: var(--astro-fib-21, 21px);
  }
}

@media (max-width: 480px) {
  .app-shell.astro-page {
    padding: var(--astro-fib-8);
  }
}

/* SEO-Paket-Hotfix 29.08.2026 (Daniels Reklamation): Die Kacheltitel des Ratgeber-Verteilers
   (#karte-themen) sind Links; ohne diese Regel faerbte sie das Browser-Standardblau/-lila
   statt der Karten-Optik der uebrigen seo-card-Ueberschriften. */
.app-shell.astro-page #karte-themen .seo-card h3 a,
.app-shell.astro-page #karte-themen .seo-card h3 a:visited {
  color: var(--bridge-cyan-bright);
  text-decoration: none;
}
.app-shell.astro-page #karte-themen .seo-card h3 a:hover,
.app-shell.astro-page #karte-themen .seo-card h3 a:focus-visible {
  color: var(--bridge-cyan-hi);
  text-decoration: underline;
}

/* ============================================================
   Voller Site-Footer fuer die App-Seiten (Daniels Auftrag 29.08.2026:
   "grundsaetzlich haben wir doch einen tollen Footer-Bereich auf
   unserer Startseite" — die Karte trug als letzte Seite noch die
   schmale legal-note-Fusszeile). Portiert aus site.css (Abschnitt
   "Fussbereich"), weil die App-Seiten site.css nicht laden.
   Variablen-Aliasse unten machen die kopierten Regeln quelltreu;
   Wortmarke nutzt die vorhandene .bridge-wordmark dieser Datei.
   ============================================================ */
.site-footer {
  --text-muted: var(--bridge-text-muted);
  --neon: var(--bridge-cyan-bright);
  --line-soft: rgba(53, 212, 232, 0.12);
  position: relative;
  z-index: 1;
  border-top: 1px solid transparent;
  padding: 72px 0 52px;
  color: var(--text-muted);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  line-height: 1.65;
  background: linear-gradient(180deg, rgba(9, 13, 28, 0) 0%, rgba(16, 22, 44, 0.5) 100%);
}
/* Footer-Hairline als Neon-Verlauf statt harter Kante (wie site.css) */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(53, 212, 232, 0.5) 30%,
    rgba(255, 46, 136, 0.4) 55%,
    rgba(53, 212, 232, 0.5) 70%,
    transparent
  );
  pointer-events: none;
}
.site-footer [hidden] { display: none !important; }
.site-footer a { color: var(--neon); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer .wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.site-footer .footer-brand .bridge-wordmark { font-size: 1.1rem; }
.site-footer .footer-brand p { margin-top: 12px; max-width: 34ch; color: var(--text-muted); }
.site-footer .footer-col h4,
.site-footer .footer-col .footer-heading {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neon);
  font-weight: 600;
  margin-bottom: 14px;
}
.site-footer .footer-col nav { display: flex; flex-direction: column; gap: 9px; }
.site-footer .footer-col nav a { color: var(--text-muted); }
.site-footer .footer-col nav a:hover { color: var(--neon); text-decoration: none; }
.site-footer .footer-col nav a[aria-current="page"],
.site-footer .footer-col nav a[aria-current="location"] { color: var(--neon); }

.site-footer .footer-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer .footer-nav a { color: var(--text-muted); }
.site-footer .footer-nav a:hover { color: var(--neon); }
.site-footer .footer-nav a[aria-current="page"],
.site-footer .footer-nav a[aria-current="location"] { color: var(--neon); }

.site-footer .footer-social {
  display: flex;
  gap: 8px;
  align-items: center;
}
.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 12px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible {
  color: var(--neon);
  border-color: rgba(53, 212, 232, 0.3);
  background: rgba(53, 212, 232, 0.08);
}
.site-footer .footer-social svg {
  width: 22px;
  height: 22px;
  display: block;
}

.site-footer details summary { cursor: pointer; color: var(--text-muted); }
.site-footer details summary:hover { color: var(--neon); }
.site-footer details p { margin-top: 10px; max-width: 75ch; }

/* Footer mobil: identisch zur site.css-Fassung (Betreiberin-Feedback 12.07.) */
@media (max-width: 820px) {
  .site-footer { padding: 48px 0 40px; }
  .site-footer .wrap { gap: 20px; }
  .site-footer .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
    padding-bottom: 18px;
  }
  .site-footer .footer-brand { grid-column: 1 / -1; }
  .site-footer .footer-brand p { max-width: 48ch; }
  .site-footer .footer-col .footer-heading { margin-bottom: 6px; }
  .site-footer .footer-col nav { gap: 0; }
  .site-footer .footer-col nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.85rem;
  }
  .site-footer .footer-nav { gap: 2px 18px; }
  .site-footer .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.85rem;
  }
}