/* Generated by tools/build-astro-styles.mjs. Edit the source stylesheets, then regenerate. */

/* Source: src/styles.css */
:root {
  color-scheme: light;
  --navy: #031420;
  --navy-soft: #0a2435;
  --cyan: #00b2c2;
  --cyan-bright: #35d4e8;
  --pink: #ff2e88;
  --petrol: #006479;
  --bronze: #b8935a;
  --bg: #eaedf1;
  --panel: #ffffff;
  --ink: #031420;
  --muted: #504b5d;
  --line: #dde6ea;
  --line-strong: #bfced5;
  /* Kuehle Eingabeflaechen fuer Astro-Geografie, Radix und Transite.
     Die festen Fallbacks in site-bridge.css halten sie auch ohne site.css stabil. */
  --field-bg: #f6f9fa;
  --field-bg-hover: #fbfdfe;
  --field-bg-focus: #ffffff;
  --field-bg-disabled: #e9f0f2;
  --field-text: #090d1c;
  --field-placeholder: #56616d;
  --field-disabled-text: #606a75;
  --red: #c44536;
  --gold: #bb8a21;
  --violet: #645185;
  --sky: #4e78a0;
  --green: #5f7d3f;
  --grad: linear-gradient(115deg, #00b2c2 0%, #35d4e8 100%);
  --shadow: 0 2px 14px rgba(3, 20, 32, 0.08);
  /* Porzellan-Tokens 14.07.2026 (Freigabe Daniel 13./14.07. nachts):
     die EINE helle Glas-Fassung der drei interaktiven Seiten. Kanon ist das
     Relocation-Panel (weiter unten, ~.map-relocation-panel). Hier zentral als
     literale Werte definiert (keine var-Referenzen) -> immun gegen die dokumentierte
     site-bridge :root-Ueberschreibung von --bg, und ueberall (styles.css,
     site-bridge.css spaeter geladen, ortskompass.css) per var() erreichbar, weil
     Custom Properties erst zur Computed-Value-Zeit aufloesen. backdrop-filter
     bleibt BEWUSST draussen (MEMORY: kein neues backdrop-filter). */
  --porzellan-bg:
    radial-gradient(ellipse 88% 68% at 10% 6%, rgba(127, 233, 244, 0.1), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(234, 237, 241, 0.92));
  --porzellan-border: 1px solid rgba(0, 174, 187, 0.2);
  --porzellan-radius: 16px;
  --porzellan-shadow:
    0 16px 32px rgba(3, 20, 32, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}


@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.woff2") format("woff2"),
       url("fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.woff2") format("woff2"),
       url("fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-SemiBold.woff2") format("woff2"),
       url("fonts/DMSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Bold.woff2") format("woff2"),
       url("fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  overflow-y: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

body.map-fullscreen-active {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  transform: translateY(-180%);
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(3, 20, 32, 0.22);
  transition: transform 0.15s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline-color: rgba(0, 174, 187, 0.7);
}

button,
input,
select {
  font: inherit;
}

h1,
h2,
.map-relocation-panel h3 {
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.map-relocation-panel h3 {
  font-weight: 600;
}

.btn {
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 10px 22px;
  font-weight: 700;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    filter 0.2s ease,
    transform 0.05s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Barrierefreiheit (Audit Juli 2026, Kontrast-Befund): Weisse Schrift auf dem hellen
   Tuerkis-Verlauf erreichte nur 1.79:1 (Verlaufsende #35d4e8) bis 2.58:1 (Verlaufsanfang
   #00b2c2) und blieb damit unter WCAG AA 4.5:1. Dunkle Schrift #06070f - identisch zum
   astro-page-Primaerbutton - hebt den Kontrast auf 7.80:1 (Anfang) bis 11.23:1 (Ende);
   der Tuerkis-Akzent des Buttons bleibt unveraendert erhalten. */
.btn.primary {
  /* Rezept wie site.css .btn-gold; --cyan-bright = dortiges --neon */
  background: linear-gradient(120deg, var(--cyan) 0%, var(--cyan-bright) 100%);
  color: #06070f;
  text-shadow: none;
  box-shadow: 0 2px 12px rgba(0, 178, 194, 0.45);
}

.btn.primary:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(0, 178, 194, 0.58);
}

.btn.big {
  min-height: 46px;
  padding: 12px 30px;
}

/* „Eingaben zurücksetzen" (iPhone-Livetest 12.07.): dezenter Sekundär-Button unter dem
   Formular, bewusst KEIN Primärstil – lehnt sich an die gedämpften Feld-Hinweise an.
   grid-column: 1/-1 legt ihn in beiden Grids (astro/radix) auf eine eigene Zeile darunter. */
.birth-reset-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  margin-top: 2px;
  padding: 10px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.birth-reset-button:hover,
.birth-reset-button:focus-visible {
  color: var(--ink);
}

.app-shell.astro-page .birth-reset-button {
  color: #b9c4d6;
}

.app-shell.astro-page .birth-reset-button:hover,
.app-shell.astro-page .birth-reset-button:focus-visible {
  color: #f4f7fb;
}

.app-shell {
  width: min(100%, 1800px);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(420px, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: 24px;
  padding: 24px;
}

.app-shell.astro-page {
  /* Die helle Kartenfamilie baut auf dem kuehl-cyanen Verlauf der
     Ortskompass-Einladung auf. Die zusaetzliche
     Weisslage gleicht aus, dass die schmaleren Karten sonst deutlich cyaniger
     wirken als die breite Einladung. Radix und Transite behalten bewusst die
     ruhigere globale Porzellan-Fassung. */
  --porzellan-bg:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.22)),
    radial-gradient(ellipse 78% 68% at 8% 4%, rgba(127, 233, 244, 0.16), transparent 68%),
    radial-gradient(ellipse 62% 72% at 100% 100%, rgba(0, 174, 187, 0.07), transparent 72%),
    linear-gradient(150deg, #ffffff 0%, #edf7f9 40%, #c9e3ea 100%);
  width: min(100%, 1920px);
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(380px, 500px);
  gap: 22px;
}

.app-shell.astro-page .chart-data {
  grid-column: 1 / -1;
}

.app-shell.astro-page .control-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  max-height: none;
  overflow: visible;
}

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

.app-shell.astro-page .input-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}

.app-shell.astro-page .place-field {
  grid-column: span 2;
}

.app-shell.astro-page .advanced-options,
.app-shell.astro-page .input-grid .btn {
  align-self: end;
}

.app-shell.transit-page {
  width: min(100%, 1400px);
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.transit-page .chart-stage {
  width: 100%;
  max-width: 1080px;
  justify-self: center;
}

.app-shell.transit-page .chart-wrap {
  max-width: min(100%, 800px);
}

.app-shell.transit-page .planet-label {
  font-size: 25px;
  stroke-width: 3.6px;
}

.app-shell.transit-page .planet-node.minor-body .planet-label {
  font-size: 17px;
}

.page-hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(320px, 1.1fr);
  align-items: end;
  gap: 24px;
  border: 1px solid rgba(0, 100, 121, 0.12);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 252, 253, 0.84)),
    #fff;
  box-shadow: var(--shadow);
  padding: 24px 30px;
}

.page-hero p {
  margin: 0;
  color: var(--muted);
}

.page-hero > div > p {
  margin: 0 0 8px;
  color: var(--petrol);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  line-height: 0.98;
}

.page-hero > p {
  max-width: 660px;
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  line-height: 1.65;
}

.page-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 1px solid rgba(0, 100, 121, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--petrol);
  padding: 7px 14px;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(3, 20, 32, 0.05);
}

.page-nav a:hover,
.page-nav a:focus-visible,
.page-nav a.is-active {
  border-color: rgba(0, 174, 187, 0.36);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 16px rgba(0, 174, 187, 0.13);
  outline: none;
}

.control-panel,
.data-panel {
  /* Porzellan-Familie 14.07.2026: Flaeche + Radius aus den Tokens (radix/transite).
     Rand + Schatten kommen fuer .control-panel aus site-bridge.css (dortige
     ungegatete Schwebe-Fassung gewinnt); .data-panel wird spaeter unsichtbar
     ueberschrieben (reiner Layout-Wrapper). Auf astro-page faerbt site-bridge
     die control-panel-Flaeche bewusst dunkel. */
  background: var(--porzellan-bg);
  border: 1px solid var(--line);
  border-radius: var(--porzellan-radius);
  box-shadow: var(--shadow);
}

.control-panel {
  position: relative;
  overflow: visible;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.control-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 20px 20px 0 0;
  background: var(--grad);
}

.brand-block p,
.chart-header p {
  margin: 0 0 6px;
  color: var(--petrol);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-block h1,
.brand-block h2,
.chart-header h2,
.data-card h2 {
  margin: 0;
}

.brand-block h1,
.brand-block h2 {
  max-width: 100%;
  font-size: clamp(1.72rem, 2.35vw, 2.55rem);
  line-height: 1.02;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.app-shell.astro-page .control-panel .brand-block h1,
.app-shell.astro-page .control-panel .brand-block h2 {
  font-size: clamp(1.58rem, 2vw, 2.28rem);
}

.brand-block span {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.input-grid {
  display: grid;
  gap: 13px;
}

.input-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.input-grid input,
.input-grid select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field-bg);
  color: var(--field-text);
  padding: 10px 11px;
  font-size: 16px;
  outline: none;
}

.input-grid input:focus,
.input-grid select:focus {
  border-color: var(--cyan);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px rgba(0, 174, 187, 0.16);
}

.input-grid input::placeholder,
.map-search-field input::placeholder,
.transit-controls input[type="date"]::placeholder,
.transit-controls input[type="time"]::placeholder {
  color: var(--field-placeholder);
  opacity: 1;
}

@media (hover: hover) {
  .input-grid input:hover:not(:focus):not(:disabled),
  .input-grid select:hover:not(:focus):not(:disabled),
  .map-search-field input:hover:not(:focus):not(:disabled),
  .transit-controls input[type="date"]:hover:not(:focus):not(:disabled),
  .transit-controls input[type="time"]:hover:not(:focus):not(:disabled) {
    background: var(--field-bg-hover);
  }
}

.input-grid input:disabled,
.input-grid select:disabled,
.map-search-field input:disabled,
.transit-controls input[type="date"]:disabled,
.transit-controls input[type="time"]:disabled {
  background: var(--field-bg-disabled);
  color: var(--field-disabled-text);
  opacity: 1;
}

.app-shell.astro-page .map-aspect-controls button:disabled,
.app-shell.astro-page .map-axis-legend button:disabled,
.app-shell.astro-page .map-action-buttons button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.input-grid input:-webkit-autofill,
.map-search-field input:-webkit-autofill,
.transit-controls input[type="date"]:-webkit-autofill,
.transit-controls input[type="time"]:-webkit-autofill {
  -webkit-text-fill-color: var(--field-text);
  box-shadow: 0 0 0 1000px var(--field-bg-focus) inset;
  caret-color: var(--field-text);
}

.birth-date-parts {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.birth-date-parts > legend {
  margin: 0 0 6px;
  padding: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.birth-date-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.45fr);
  align-items: end;
  gap: 8px;
}

.input-grid .birth-date-part {
  min-width: 0;
  grid-template-rows: auto minmax(0, auto);
  align-items: end;
  gap: 4px;
}

.input-grid .birth-date-part > span {
  font-size: 0.7rem;
  font-weight: 700;
}

.input-grid .birth-date-part input {
  min-width: 0;
  padding-inline: 6px;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Astro-Geografie: Die drei weissen Datumskontrollen fluchten mit Name und
   Geburtszeit. Tag/Monat/Jahr bleiben sichtbar, stehen aber als Captions unter
   den Zifferfeldern statt eine zusaetzliche Zeile vor ihnen aufzuspannen. */
.app-shell.astro-page #birth-form .birth-date-parts {
  gap: 4px;
}

.app-shell.astro-page #birth-form .birth-date-parts > legend {
  margin-bottom: 4px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.app-shell.astro-page #birth-form > .birth-field-place {
  gap: 4px;
}

.app-shell.astro-page #birth-form .birth-date-part > span {
  grid-row: 2;
  line-height: 1.2;
  text-align: center;
}

.app-shell.astro-page #birth-form .birth-date-part > input {
  grid-row: 1;
}

/* mobile-form.css wird spaeter geladen. Die zusaetzliche input-grid-Klasse gibt
   diesem inhaltssensitiven Raster bewusst Vorrang: Name | Datum, danach
   Geburtszeit | Geburtsort. Unter 621px bleibt die ruhige Einspaltenfolge. */
@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.astro-page #birth-form.input-grid {
    grid-template-columns: var(
      --astro-layout-phi-reverse,
      minmax(0, 1fr) minmax(0, 1.618fr)
    );
  }

  .app-shell.astro-page #birth-form.input-grid > .birth-field-name,
  .app-shell.astro-page #birth-form.input-grid > .birth-field-date,
  .app-shell.astro-page #birth-form.input-grid > .birth-field-time,
  .app-shell.astro-page #birth-form.input-grid > .birth-field-place {
    grid-column: auto;
  }
}

.birth-date-error:empty {
  display: none;
}

.birth-date-error.is-error {
  color: #a63b34;
  font-weight: 700;
}

.birth-date-parts [data-birth-date-part][aria-invalid="true"] {
  border-color: #c44536;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.16);
}

/* Geburtszeit 15.07.2026 (Daniel-Wunsch, iPhone-Test): zwei Zifferfelder Stunde/Minute im
   selben weißen Datumsmuster, nur als ruhiges Zwei-Spalten-Raster statt drei. */
.birth-time-parts .birth-date-fields {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.birth-date-parts [data-birth-time-part][aria-invalid="true"] {
  border-color: #c44536;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.16);
}

#birth-form input[name="time"][aria-invalid="true"] {
  border-color: #c44536;
  box-shadow: 0 0 0 3px rgba(196, 69, 54, 0.16);
}

.advanced-options {
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.advanced-options summary {
  cursor: pointer;
  list-style: none;
  color: var(--petrol);
  padding: 9px 11px;
  font-size: 0.78rem;
  font-weight: 800;
}

.advanced-options summary::-webkit-details-marker {
  display: none;
}

.advanced-options summary::after {
  content: "+";
  float: right;
  color: var(--muted);
  font-weight: 900;
}

.advanced-options[open] summary::after {
  content: "-";
}

.advanced-options label {
  padding: 0 11px 11px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  /* vorher rgba(0,174,187,.48): auf hellen Flaechen zu blass (A11y-Audit 12.07.) */
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
}

.place-field {
  position: relative;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 600;
}

.place-list {
  position: absolute;
  z-index: 30;
  top: 72px;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(3, 20, 32, 0.16);
}

.place-list button {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.place-list button:hover {
  background: #eef7f8;
}

.place-list button span,
.place-list button small {
  color: var(--muted);
}

.place-list button small {
  grid-column: 1 / -1;
  font-size: 0.72rem;
}

.place-empty,
.field-hint {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.place-empty {
  padding: 10px 14px;
}

.chart-stage {
  min-width: 0;
  scroll-margin-top: 96px;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px;
  /* Porzellan-Familie 14.07.2026: Flaeche + Radius aus den Tokens; Rand + Schatten
     via site-bridge.css (Schwebe-Fassung). */
  border: 1px solid var(--line);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  box-shadow: var(--shadow);
  padding: 20px;
}

.chart-header {
  min-height: 76px;
  min-width: 0;
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 12px;
}

.chart-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.chart-header > * {
  min-width: 0;
}

.chart-tools {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.chart-tool-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  padding-block: 1px 2px;
}

.layout-toggle,
.minor-body-toggle {
  flex: 0 0 auto;
}

.layout-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  background: transparent;
  border: 1px solid rgba(0, 96, 117, 0.18);
  border-radius: 999px;
  padding: 2px;
  box-shadow: none;
}

.view-switch {
  order: 1;
}

.layout-toggle button,
.aspect-filter-switch button,
.tool-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 27px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px 5px;
  font-size: 0.58rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.aspect-control-cluster {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  flex-wrap: wrap;
  order: 3;
  gap: 2px;
  max-width: 100%;
  border: 1px solid rgba(0, 96, 117, 0.18);
  border-radius: 999px;
  background: transparent;
  padding: 2px;
  box-shadow: none;
}

.view-switch #exact-degree-toggle {
  --tool-accent: var(--petrol);
}

.view-switch #transit-toggle {
  --tool-accent: var(--cyan);
}

.aspect-master,
#aspect-harmony-toggle {
  --tool-accent: var(--cyan);
}

#aspect-tension-toggle {
  --tool-accent: var(--red);
}

#aspect-minor-toggle {
  --tool-accent: var(--violet);
}

.aspect-master {
  position: relative;
  padding-inline: 9px 10px;
  color: var(--petrol);
}

.aspect-master::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(0, 100, 121, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0, 96, 117, 0.08);
}

.aspect-master.active {
  background: rgba(0, 174, 187, 0.08);
  border-color: rgba(0, 174, 187, 0.42);
  color: var(--petrol);
  box-shadow: none;
}

.aspect-master.active::before {
  background: var(--cyan);
  box-shadow: 0 0 0 2px rgba(0, 174, 187, 0.12);
}

.aspect-filter-switch {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 2px;
  max-width: min(100%, 380px);
}

.aspect-filter-switch button {
  min-height: 25px;
  padding: 5px 8px 4px;
  font-size: 0.54rem;
  color: rgba(80, 75, 93, 0.9);
}

.aspect-filter-switch.is-disabled {
  opacity: 0.56;
}

.layout-toggle button:disabled,
.aspect-filter-switch button:disabled {
  cursor: not-allowed;
}

.layout-toggle button::before,
.aspect-filter-switch button::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 96, 117, 0.28);
}

.layout-toggle button.active,
.aspect-filter-switch button.active {
  background: rgba(0, 174, 187, 0.07);
  border-color: rgba(0, 174, 187, 0.34);
  color: var(--petrol);
  box-shadow: none;
}

.layout-toggle button.active::before,
.aspect-filter-switch button.active::before {
  background: var(--cyan);
  box-shadow: none;
}

.layout-toggle button:hover,
.aspect-filter-switch button:hover,
.tool-pill:hover {
  transform: translateY(-1px);
}

.minor-body-toggle {
  display: inline-flex;
  order: 2;
  gap: 6px;
  justify-content: flex-end;
}

.minor-body-toggle button {
  --tool-accent: var(--cyan);
  border: 1px solid rgba(0, 96, 117, 0.18);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  min-height: 27px;
  padding: 6px 10px 5px;
  font-size: 0.56rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    color 0.15s ease;
}

.minor-body-toggle button:hover,
.minor-body-toggle button.active {
  background: rgba(0, 174, 187, 0.07);
  border-color: rgba(0, 174, 187, 0.34);
  color: var(--petrol);
  box-shadow: none;
  transform: translateY(-1px);
}

.transit-planet-picker {
  position: relative;
  order: 3;
  flex: 0 0 auto;
}

.transit-planet-filter-toggle {
  min-width: 128px;
  border-color: rgba(0, 96, 117, 0.18);
  color: var(--muted);
  justify-content: space-between;
}

.transit-planet-filter-toggle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 96, 117, 0.28);
}

.transit-planet-filter-toggle.active,
.transit-planet-picker.is-open .transit-planet-filter-toggle {
  background: rgba(0, 174, 187, 0.07);
  border-color: rgba(0, 174, 187, 0.34);
  color: var(--petrol);
}

.transit-planet-filter-toggle.active::before,
.transit-planet-picker.is-open .transit-planet-filter-toggle::before {
  background: var(--cyan);
}

.transit-planet-filter-toggle span:last-child {
  color: color-mix(in srgb, var(--petrol) 72%, var(--muted));
  font-size: 0.52rem;
}

.transit-planet-filter-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: min(330px, calc(100vw - 36px));
  border: 1px solid rgba(0, 96, 117, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 34px rgba(3, 20, 32, 0.14);
  padding: 8px;
}

.transit-planet-filter-panel[hidden] {
  display: none;
}

.transit-planet-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.transit-planet-choice {
  min-width: 0;
  display: grid;
  grid-template-columns: 16px 22px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 5px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.transit-planet-choice:hover,
.transit-planet-choice:focus-within,
.transit-planet-choice.is-active {
  border-color: color-mix(in srgb, var(--planet-color) 42%, rgba(0, 96, 117, 0.16));
  background: color-mix(in srgb, var(--planet-color) 9%, #fff);
}

.transit-planet-choice:hover {
  transform: translateY(-1px);
}

.transit-planet-choice input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--petrol);
}

.transit-planet-glyph {
  color: var(--planet-color);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

.chart-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  justify-self: center;
  aspect-ratio: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 174, 187, 0.08), rgba(0, 174, 187, 0) 44%),
    radial-gradient(circle at 50% 50%, rgba(0, 100, 121, 0.06), rgba(0, 100, 121, 0) 60%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 247, 248, 0.88)),
    #fff;
  border: 1px solid rgba(0, 100, 121, 0.1);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  overflow: visible;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.chart-wrap.is-zoomed {
  z-index: 4;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.lunar-phase-panel {
  display: grid;
  grid-template-columns: minmax(310px, 1.2fr) repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.lunar-phase-now,
.lunation-event-card {
  min-width: 0;
  /* Starkes Familienmitglied auf den Kanon gezogen (14.07.2026): war schon nah
     (Cyan-Radial, Radius 16), jetzt Rand/Flaeche/Schatten aus den Tokens. */
  border: var(--porzellan-border);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  box-shadow: var(--porzellan-shadow);
}

.lunar-phase-now {
  overflow: hidden;
}

.lunar-disclosure > summary {
  position: relative;
  display: block;
  list-style: none;
  padding: 12px 40px 12px 14px;
  cursor: pointer;
}

.lunar-disclosure > summary::-webkit-details-marker {
  display: none;
}

.lunar-disclosure > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 14px;
  color: var(--petrol);
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1;
  transform: translateY(-50%);
}

.lunar-disclosure[open] > summary::after {
  content: "−";
}

.lunar-disclosure > summary:focus-visible {
  border-radius: var(--porzellan-radius);
  outline: 2px solid rgba(0, 174, 187, 0.58);
  outline-offset: -3px;
}

.lunar-disclosure[open] > summary {
  border-bottom: 1px solid rgba(0, 96, 117, 0.1);
  margin-bottom: 10px;
}

.lunar-disclosure-body {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.lunar-phase-now-main {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.lunar-phase-disc {
  width: 52px;
  height: 52px;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(3, 20, 32, 0.2));
}

.lunar-phase-disc-night {
  fill: #0e2633;
}

.lunar-phase-disc-light {
  fill: #fff8d8;
}

.lunar-phase-disc-outline {
  fill: none;
  stroke: rgba(0, 96, 117, 0.34);
  stroke-width: 1.6;
}

.lunar-phase-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lunar-eyebrow,
.lunation-eyebrow {
  display: block;
  margin: 0;
  color: var(--petrol);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lunar-phase-copy > strong {
  color: var(--ink);
  font-size: 1.12rem;
  line-height: 1.18;
}

.lunar-phase-copy > span {
  color: var(--petrol);
  font-size: 0.78rem;
  font-weight: 780;
}

.lunar-phase-copy small {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.3;
}

.lunar-current-position {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-top: 1px solid rgba(0, 96, 117, 0.1);
  padding-top: 9px;
  font-size: 0.7rem;
}

.lunar-current-position > span:first-child {
  color: var(--muted);
  font-weight: 760;
}

.lunar-current-position > strong {
  min-width: 0;
  color: var(--lunar-sign-color, var(--petrol));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lunar-cycle {
  display: grid;
  gap: 7px;
  border-top: 1px solid rgba(0, 96, 117, 0.1);
  padding-top: 9px;
}

.lunar-cycle-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.lunar-cycle-heading strong {
  color: var(--petrol);
  font-size: 0.63rem;
  font-weight: 880;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lunar-cycle-heading span {
  color: var(--muted);
  font-size: 0.57rem;
  font-weight: 700;
}

.lunar-cycle-slider-shell {
  position: relative;
  height: 59px;
}

.lunar-cycle-range {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 28px;
  z-index: 2;
  width: calc(100% - 56px);
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: ew-resize;
  outline: none;
}

.lunar-cycle-range::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #102a36 0%, #fff7d7 25%, #102a36 50%, #fff7d7 75%, #102a36 100%);
  box-shadow: inset 0 1px 2px rgba(3, 20, 32, 0.22);
}

.lunar-cycle-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -5px;
  border: 3px solid var(--bronze);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(184, 147, 90, 0.56);
  cursor: grab;
  transition:
    width 0.16s ease,
    height 0.16s ease,
    margin-top 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.lunar-cycle-range:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.08);
}

.lunar-cycle-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #102a36 0%, #fff7d7 25%, #102a36 50%, #fff7d7 75%, #102a36 100%);
  box-shadow: inset 0 1px 2px rgba(3, 20, 32, 0.22);
}

.lunar-cycle-range::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 3px solid var(--bronze);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(184, 147, 90, 0.56);
  cursor: grab;
  transition:
    width 0.16s ease,
    height 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.lunar-cycle-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(184, 147, 90, 0.2), 0 2px 8px rgba(184, 147, 90, 0.56);
}

.lunar-cycle-range.is-snapped::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -8px;
  border-width: 4px;
  border-color: var(--cyan);
  background: radial-gradient(circle at 38% 32%, #1a3c4b 0 18%, #0d2532 54%, #071923 100%);
  box-shadow:
    0 0 0 6px rgba(0, 174, 187, 0.16),
    0 3px 12px rgba(0, 96, 117, 0.42);
}

.lunar-cycle-slider-shell.is-snapped-full .lunar-cycle-range::-webkit-slider-thumb {
  border-width: 2px;
  border-color: #d6b76d;
  background:
    radial-gradient(circle at 34% 34%, rgba(166, 129, 57, 0.2) 0 5%, transparent 6%),
    radial-gradient(circle at 65% 59%, rgba(166, 129, 57, 0.17) 0 7%, transparent 8%),
    radial-gradient(circle at 35% 27%, #fffef2 0, #fff6c9 56%, #efd991 100%);
  box-shadow:
    inset -3px -3px 5px rgba(159, 116, 37, 0.15),
    0 0 0 6px rgba(255, 231, 158, 0.22),
    0 0 14px rgba(184, 147, 90, 0.58);
}

.lunar-cycle-range.is-snapped::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border-width: 4px;
  border-color: var(--cyan);
  background: radial-gradient(circle at 38% 32%, #1a3c4b 0 18%, #0d2532 54%, #071923 100%);
  box-shadow:
    0 0 0 6px rgba(0, 174, 187, 0.16),
    0 3px 12px rgba(0, 96, 117, 0.42);
}

.lunar-cycle-slider-shell.is-snapped-full .lunar-cycle-range::-moz-range-thumb {
  border-width: 2px;
  border-color: #d6b76d;
  background:
    radial-gradient(circle at 34% 34%, rgba(166, 129, 57, 0.2) 0 5%, transparent 6%),
    radial-gradient(circle at 65% 59%, rgba(166, 129, 57, 0.17) 0 7%, transparent 8%),
    radial-gradient(circle at 35% 27%, #fffef2 0, #fff6c9 56%, #efd991 100%);
  box-shadow:
    inset -3px -3px 5px rgba(159, 116, 37, 0.15),
    0 0 0 6px rgba(255, 231, 158, 0.22),
    0 0 14px rgba(184, 147, 90, 0.58);
}

.lunar-cycle-event-layer {
  position: absolute;
  top: 24px;
  right: 28px;
  left: 28px;
  height: 34px;
}

.lunar-cycle-event {
  position: absolute;
  top: 0;
  width: 54px;
  display: grid;
  justify-items: center;
  gap: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0;
  font-family: inherit;
  line-height: 1.05;
  text-align: center;
  transform: translateX(-50%);
  cursor: pointer;
}

.lunar-cycle-event::before {
  content: "";
  position: absolute;
  top: -27px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 174, 187, 0.17), rgba(0, 174, 187, 0) 68%);
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}

.lunar-cycle-event.is-full::before {
  background: radial-gradient(circle, rgba(184, 147, 90, 0.22), rgba(184, 147, 90, 0) 68%);
}

.lunar-cycle-event-dot {
  position: absolute;
  top: -21px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #102a36;
  box-shadow: 0 1px 4px rgba(3, 20, 32, 0.3);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.lunar-cycle-event.is-full .lunar-cycle-event-dot {
  border-width: 1px;
  border-color: #d5b46c;
  background:
    radial-gradient(circle at 32% 35%, rgba(166, 129, 57, 0.22) 0 7%, transparent 8%),
    radial-gradient(circle at 68% 58%, rgba(166, 129, 57, 0.18) 0 9%, transparent 10%),
    radial-gradient(circle at 35% 28%, #fffef2 0, #fff5c5 60%, #ecd589 100%);
  box-shadow:
    inset -2px -2px 3px rgba(135, 95, 29, 0.15),
    0 0 5px rgba(184, 147, 90, 0.48);
}

.lunar-cycle-event strong {
  color: var(--ink);
  font-size: 0.61rem;
  font-weight: 880;
}

.lunar-cycle-event small {
  color: var(--muted);
  font-size: 0.5rem;
  font-weight: 700;
}

.lunar-cycle-event:hover strong,
.lunar-cycle-event:focus-visible strong {
  color: var(--petrol);
}

.lunar-cycle-event:hover::before,
.lunar-cycle-event:focus-visible::before,
.lunar-cycle-event.is-active::before {
  opacity: 1;
  transform: scale(1.25);
}

.lunar-cycle-event.is-active .lunar-cycle-event-dot {
  border-color: #fff;
  background: radial-gradient(circle at 38% 32%, #1a3c4b 0 18%, #0d2532 54%, #071923 100%);
  box-shadow:
    0 0 0 5px rgba(0, 174, 187, 0.2),
    0 2px 8px rgba(0, 96, 117, 0.42);
  transform: scale(1.42);
}

.lunar-cycle-event.is-active.is-full .lunar-cycle-event-dot {
  border-width: 1px;
  border-color: #fff4c3;
  background:
    radial-gradient(circle at 32% 35%, rgba(166, 129, 57, 0.22) 0 7%, transparent 8%),
    radial-gradient(circle at 68% 58%, rgba(166, 129, 57, 0.18) 0 9%, transparent 10%),
    radial-gradient(circle at 35% 28%, #fffef2 0, #fff5c5 60%, #ecd589 100%);
  box-shadow:
    inset -2px -2px 3px rgba(135, 95, 29, 0.15),
    0 0 0 5px rgba(255, 229, 150, 0.24),
    0 0 12px rgba(184, 147, 90, 0.72);
  transform: scale(1.58);
}

.lunar-cycle-event.is-active strong {
  color: var(--petrol);
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lunar-cycle-event.is-active.is-full strong {
  color: #8a641f;
}

.lunar-cycle-event:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(0, 174, 187, 0.38);
  outline-offset: 2px;
}

.lunar-cycle-snap-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Barrierefreiheit (Befund #17): visuell verborgener Live-Node fuer die knappe
   Status-Meldung nach einer frischen Chart-Berechnung. */
.chart-status-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.lunar-cycle-slider-shell.is-snap-pulse .lunar-cycle-event.is-active .lunar-cycle-event-dot {
  animation: lunar-snap-lock 0.34s ease-out;
}

@keyframes lunar-snap-lock {
  0% {
    transform: scale(0.96);
  }
  55% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

.lunation-event-card {
  position: relative;
  overflow: hidden;
}

.lunation-event-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--lunation-accent, var(--cyan));
}

.lunation-event-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.lunation-event-heading {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.lunation-event-heading strong {
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.3;
}

.lunation-event-symbol {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  isolation: isolate;
}

.lunation-event-symbol::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 96, 117, 0.22);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #1b3c4a 0 17%, #102a36 54%, #071923 100%);
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.06),
    0 2px 7px rgba(3, 20, 32, 0.28);
}

.lunation-event-symbol.is-new::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 174, 187, 0.18), transparent 68%);
}

.lunation-event-symbol.is-full::before {
  border-color: #d6b76d;
  background:
    radial-gradient(circle at 31% 32%, rgba(156, 119, 52, 0.18) 0 5%, transparent 6%),
    radial-gradient(circle at 66% 58%, rgba(156, 119, 52, 0.17) 0 7%, transparent 8%),
    radial-gradient(circle at 48% 76%, rgba(156, 119, 52, 0.13) 0 4%, transparent 5%),
    radial-gradient(circle at 35% 27%, #fffef2 0, #fff6ca 56%, #edd78e 100%);
  box-shadow:
    inset -3px -3px 5px rgba(141, 101, 31, 0.17),
    inset 2px 2px 3px rgba(255, 255, 255, 0.72),
    0 0 0 4px rgba(255, 235, 174, 0.2),
    0 0 11px rgba(184, 147, 90, 0.46),
    0 3px 8px rgba(118, 83, 27, 0.2);
}

.lunation-event-symbol.is-full::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 225, 139, 0.26), transparent 68%);
}

.lunation-position {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.lunation-sign-glyph {
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.lunation-position > div {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.lunation-position strong {
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.25;
}

.lunation-position span,
.lunation-gate-row > span:last-child,
.lunation-opposition > span:first-child {
  color: var(--muted);
  font-size: 0.66rem;
  line-height: 1.3;
}

.lunation-gate-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lunation-gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--lunation-accent, var(--cyan)) 35%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lunation-accent, var(--cyan)) 9%, white);
  color: var(--petrol);
  padding: 4px 7px;
  font-size: 0.64rem;
  font-weight: 850;
  line-height: 1;
}

.lunar-current-position .lunation-gate-badge {
  --lunation-accent: var(--lunar-sign-color, var(--cyan));
}

.lunation-gate-badge > span {
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 0.88rem;
}

.lunation-opposition {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 7px;
  border-top: 1px solid rgba(0, 96, 117, 0.1);
  padding-top: 8px;
}

.lunation-opposition > span:first-child {
  grid-column: 1 / -1;
}

.lunation-opposition strong {
  min-width: 0;
  color: var(--ink);
  font-size: 0.7rem;
}

.lunation-countdown {
  justify-self: start;
  border-radius: 999px;
  background: rgba(0, 96, 117, 0.07);
  color: var(--petrol);
  padding: 4px 8px;
  font-size: 0.64rem;
  font-weight: 820;
}

.lunation-jump-button {
  justify-self: start;
  border: 1px solid rgba(0, 96, 117, 0.17);
  border-radius: 999px;
  background: #fff;
  color: var(--petrol);
  padding: 6px 9px;
  font-size: 0.6rem;
  font-weight: 820;
  cursor: pointer;
}

.lunation-jump-button:hover,
.lunation-jump-button:focus-visible {
  border-color: rgba(0, 174, 187, 0.45);
  background: rgba(0, 174, 187, 0.07);
  outline: none;
}

.transit-controls {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(180px, 1fr) 150px 112px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 96, 117, 0.13);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(3, 20, 32, 0.07);
}

.transit-controls[hidden] {
  display: none;
}

.transit-controls p {
  margin: 0 0 2px;
  color: var(--petrol);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.transit-controls strong {
  font-size: 0.86rem;
}

.transit-stepper {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.transit-step-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.transit-step-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0, 96, 117, 0.18);
  border-radius: 999px;
  background: linear-gradient(145deg, #ffffff, #f4fbfc);
  color: var(--petrol);
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(3, 20, 32, 0.07);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}

.transit-step-button.calendar-step {
  width: 46px;
  border-radius: 12px;
  font-size: 0.7rem;
  letter-spacing: 0.01em;
}

.transit-step-button.day-step {
  font-size: 1.45rem;
}

.transit-step-button:hover,
.transit-step-button:focus-visible {
  border-color: rgba(0, 174, 187, 0.42);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0, 174, 187, 0.15);
  outline: none;
  transform: translateY(-1px);
}

.transit-step-button:focus-visible {
  outline: 3px solid #006479;
  outline-offset: 2px;
}

.transit-step-button:disabled {
  cursor: not-allowed;
  color: rgba(3, 20, 32, 0.28);
  box-shadow: none;
  transform: none;
}

.transit-controls input[type="range"] {
  --transit-today-position: 50%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0a4d68 0%,
    #00aebb calc(var(--transit-today-position) - 18%),
    #dbeef2 var(--transit-today-position),
    #00aebb calc(var(--transit-today-position) + 18%),
    #0a4d68 100%
  );
  cursor: pointer;
  outline: none;
}

.transit-controls input[type="range"]:focus-visible {
  outline: 3px solid #006479;
  outline-offset: 4px;
}

.transit-controls input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid var(--cyan);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 174, 187, 0.5);
  cursor: grab;
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease;
}

.transit-controls input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 10px rgba(0, 174, 187, 0.7);
}

.transit-controls input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.transit-controls input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #0a4d68 0%,
    #00aebb calc(var(--transit-today-position) - 18%),
    #dbeef2 var(--transit-today-position),
    #00aebb calc(var(--transit-today-position) + 18%),
    #0a4d68 100%
  );
}

.transit-controls input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 3px solid var(--cyan);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 174, 187, 0.5);
  cursor: grab;
}

.transit-controls input[type="date"],
.transit-controls input[type="time"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--field-text);
  padding: 7px 10px;
  font-weight: 700;
}

.transit-controls input[type="date"]:focus,
.transit-controls input[type="time"]:focus {
  background: var(--field-bg-focus);
}

.chart-hover-label {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 8;
  min-height: 30px;
  max-width: min(100%, 620px);
  border: 1px solid rgba(0, 96, 117, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--petrol);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(3, 20, 32, 0.12);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
}

.chart-hover-label.is-visible {
  opacity: 1;
  visibility: visible;
}

.map-hover-label {
  position: absolute;
  z-index: 6;
  /* 13.07.2026: Startoffset folgt der tatsaechlich belegten oberen Chip-Zone
     (--map-top-edge-extent wird in app.js/renderMapEdgeLabels aus dem hoechsten
     --edge-offset der Linien-Chips gesetzt), damit das Label die Chips nie
     verdeckt. Fallback 12px greift, solange die Randbeschriftung noch nicht
     gerendert wurde. Wirkt in Normal-, Vollbild- und Mobilansicht identisch. */
  top: var(--map-top-edge-extent, 12px);
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(0, 96, 117, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--petrol);
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(3, 20, 32, 0.12);
  pointer-events: none;
}

.chart-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.chart-svg [data-select] {
  cursor: pointer;
  outline: none;
}

.chart-svg [data-select]:focus-visible {
  filter: drop-shadow(0 0 6px rgba(0, 174, 187, 0.7));
}

.zodiac-segment {
  stroke: rgba(3, 20, 32, 0.28);
  stroke-width: 1.15;
  transition:
    fill-opacity 0.16s ease,
    stroke 0.16s ease,
    filter 0.16s ease;
}

.zodiac-segment:hover,
.zodiac-segment.is-selected,
.zodiac-segment.is-related {
  fill-opacity: 0.52;
  stroke: rgba(3, 20, 32, 0.62);
  stroke-width: 2.2;
  filter: saturate(1.16);
}

.house-line {
  stroke: rgba(31, 42, 50, 0.38);
  stroke-width: 1.2;
}

.house-field {
  fill: rgba(255, 255, 255, 0.01);
  stroke: transparent;
  cursor: pointer;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease,
    filter 0.15s ease;
}

.house-field:hover,
.house-field:focus-visible,
.house-field.is-selected,
.house-field.is-related {
  fill: rgba(0, 174, 187, 0.08);
  stroke: rgba(0, 174, 187, 0.26);
  stroke-width: 1.2;
  filter: drop-shadow(0 1px 4px rgba(0, 174, 187, 0.16));
}

.house-click {
  transition: opacity 0.16s ease;
}

.house-click:hover .house-line,
.house-click.is-selected .house-line,
.house-click.is-related .house-line,
.house-click:hover .axis-line,
.house-click.is-selected .axis-line,
.house-click.is-related .axis-line {
  stroke: var(--cyan);
  stroke-width: 2.35;
}

.house-click:hover .house-label,
.house-click.is-selected .house-label,
.house-click.is-related .house-label {
  fill: var(--petrol);
  font-size: 14px;
}

.axis-line {
  stroke: var(--red);
  stroke-width: 3;
}

.cardinal-axis {
  stroke-linecap: round;
  stroke-width: 3;
  opacity: 0.82;
}

.ac-dc-axis {
  stroke: var(--red);
}

.mc-ic-axis {
  stroke: var(--cyan);
}

.ring-line {
  fill: none;
  stroke: rgba(31, 42, 50, 0.5);
  stroke-width: 1.3;
}

.hd-gate-ring {
  pointer-events: auto;
}

.hd-gate-ring-line {
  fill: none;
  stroke: rgba(3, 20, 32, 0.5);
  stroke-width: 1.45;
  pointer-events: none;
}

.hd-gate-ring-line.inner {
  stroke: rgba(31, 42, 50, 0.32);
  stroke-width: 1.15;
}

.hd-gate-node {
  cursor: pointer;
  outline: none;
}

.hd-gate-hit-area {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.hd-gate-segment {
  fill-opacity: 0.24;
  stroke: rgba(255, 255, 255, 0.74);
  stroke-width: 0.65;
  transition:
    fill-opacity 0.15s ease,
    stroke 0.15s ease,
    stroke-width 0.15s ease,
    filter 0.15s ease;
}

.hd-line-tick {
  stroke: rgba(3, 20, 32, 0.42);
  stroke-linecap: round;
  stroke-width: 0.7;
  opacity: 0.78;
  pointer-events: none;
}

.hd-line-tick.gate-boundary {
  stroke: rgba(3, 20, 32, 0.66);
  stroke-width: 1.12;
  opacity: 0.92;
  pointer-events: none;
}

.hd-gate-node.is-activated .hd-gate-segment {
  fill-opacity: 0.68;
  stroke: rgba(3, 20, 32, 0.68);
  stroke-width: 1.85;
  filter: saturate(1.35) drop-shadow(0 2px 5px rgba(3, 20, 32, 0.18));
}

.hd-gate-node.is-activated .hd-gate-label {
  fill: var(--petrol);
  font-size: 9.6px;
  font-weight: 950;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 2px;
}

.hd-gate-node.is-activated .hd-hexagram-label {
  fill: #031420;
  font-weight: 950;
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 1.15px;
  filter: drop-shadow(0 2px 4px rgba(0, 96, 117, 0.22));
}

.hd-gate-node:hover .hd-gate-segment,
.hd-gate-node:focus-visible .hd-gate-segment,
.hd-gate-node.is-selected .hd-gate-segment,
.hd-gate-node.is-related .hd-gate-segment {
  fill-opacity: 0.5;
  stroke: rgba(3, 20, 32, 0.56);
  stroke-width: 1.35;
  filter: saturate(1.18);
}

.hd-gate-node.is-activated:hover .hd-gate-segment,
.hd-gate-node.is-activated:focus-visible .hd-gate-segment,
.hd-gate-node.is-activated.is-selected .hd-gate-segment,
.hd-gate-node.is-activated.is-related .hd-gate-segment {
  fill-opacity: 0.82;
  stroke: rgba(3, 20, 32, 0.82);
  stroke-width: 2.15;
  filter: saturate(1.4) drop-shadow(0 3px 7px rgba(3, 20, 32, 0.24));
}

.hd-gate-node:hover .hd-gate-label,
.hd-gate-node:focus-visible .hd-gate-label,
.hd-gate-node.is-selected .hd-gate-label,
.hd-gate-node.is-related .hd-gate-label {
  fill: var(--petrol);
  font-size: 9.8px;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 2.05px;
}

.hd-gate-node:hover .hd-hexagram-label,
.hd-gate-node:focus-visible .hd-hexagram-label,
.hd-gate-node.is-selected .hd-hexagram-label,
.hd-gate-node.is-related .hd-hexagram-label {
  fill: var(--petrol);
  stroke: rgba(255, 255, 255, 0.96);
  stroke-width: 1.25px;
}

.hd-gate-quarter-marker {
  stroke: rgba(3, 20, 32, 0.92);
  stroke-linecap: round;
  stroke-width: 3.15;
  pointer-events: none;
}

.hd-gate-label {
  dominant-baseline: central;
  text-anchor: middle;
  fill: rgba(31, 42, 50, 0.74);
  font-size: 8.6px;
  font-weight: 880;
  letter-spacing: 0;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-linejoin: round;
  stroke-width: 1.6px;
  paint-order: stroke fill;
}

.hd-hexagram-label {
  dominant-baseline: central;
  text-anchor: middle;
  fill: rgba(3, 20, 32, 0.84);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-linejoin: round;
  stroke-width: 0.8px;
  paint-order: stroke fill;
  transition:
    fill 0.15s ease,
    stroke 0.15s ease,
    stroke-width 0.15s ease,
    filter 0.15s ease;
}

.zodiac-degree-tick {
  stroke: rgba(31, 42, 50, 0.18);
  stroke-linecap: round;
}

.zodiac-degree-tick.one {
  stroke-width: 0.42;
}

.zodiac-degree-tick.five {
  stroke: rgba(31, 42, 50, 0.28);
  stroke-width: 0.7;
}

.zodiac-degree-tick.ten {
  stroke: rgba(31, 42, 50, 0.42);
  stroke-width: 1.05;
}

.zodiac-degree-tick.sign-boundary {
  stroke: rgba(3, 20, 32, 0.62);
  stroke-width: 1.35;
}

.transit-gate-guide-line {
  stroke: rgba(3, 20, 32, 0.17);
  stroke-linecap: round;
  stroke-width: 0.72;
  pointer-events: none;
}

.transit-gate-guide-line.is-quarter {
  stroke: rgba(3, 20, 32, 0.3);
  stroke-width: 1.05;
}

.chart-svg:not(.precision-mode) .zodiac-degree-tick.one,
.chart-svg:not(.precision-mode) .zodiac-degree-tick.five {
  opacity: 0;
}

.aspect-field {
  fill: rgba(255, 255, 255, 0.62);
  stroke: rgba(3, 20, 32, 0.13);
  stroke-width: 1;
}

.aspect-line {
  stroke-linecap: round;
  opacity: 0.38;
  mix-blend-mode: multiply;
  transition:
    opacity 0.16s ease,
    filter 0.16s ease;
}

.aspect-line:hover,
.aspect-line.is-selected,
.aspect-line.is-related {
  opacity: 1;
  filter: drop-shadow(0 1px 3px rgba(3, 20, 32, 0.18));
}

.aspect-line.major-harmony {
  opacity: 0.46;
}

.aspect-line.major-hard {
  opacity: 0.52;
}

.aspect-line.major-neutral {
  opacity: 0.34;
  stroke-dasharray: 2 5;
}

.aspect-line.minor-hard {
  stroke-dasharray: 3 9;
  opacity: 0.22;
}

.aspect-line.minor-learning {
  stroke-dasharray: 1 8;
  opacity: 0.28;
}

.app-shell.transit-page .aspect-line.transit-aspect-line {
  opacity: 0.58;
}

.app-shell.transit-page .aspect-line.transit-aspect-line.major-harmony {
  opacity: 0.62;
}

.app-shell.transit-page .aspect-line.transit-aspect-line.major-hard,
.app-shell.transit-page .aspect-line.transit-aspect-line.minor-hard,
.app-shell.transit-page .aspect-line.transit-aspect-line.minor-learning {
  opacity: 0.7;
}

.app-shell.transit-page .aspect-line.transit-aspect-line:hover,
.app-shell.transit-page .aspect-line.transit-aspect-line.is-selected,
.app-shell.transit-page .aspect-line.transit-aspect-line.is-related {
  opacity: 0.96;
}

.glyph {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 23px;
  font-weight: 700;
}

.planet-dot {
  fill: transparent;
  stroke: transparent;
  pointer-events: none;
}

.planet-hit-line {
  stroke: transparent;
  stroke-width: 26;
  pointer-events: stroke;
}

.planet-hit-circle {
  fill: transparent;
  pointer-events: all;
}

.planet-degree-anchor {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.55;
  opacity: 0.86;
  pointer-events: none;
}

.planet-degree-anchor.minor-body {
  stroke-dasharray: 2 3;
  opacity: 0.5;
}

.planet-node:hover .planet-dot,
.planet-node.is-selected .planet-dot,
.planet-node.is-related .planet-dot {
  fill: transparent;
  stroke: transparent;
}

.planet-node.minor-body .planet-dot {
  fill: transparent;
  stroke: transparent;
}

.planet-node.minor-body .planet-label {
  font-size: 14.8px;
  opacity: 0.76;
}

.planet-node.minor-body:hover .planet-dot,
.planet-node.minor-body.is-selected .planet-dot {
  fill: transparent;
  stroke: transparent;
}

.planet-node:hover .planet-label,
.planet-node.is-selected .planet-label,
.planet-node.is-related .planet-label,
.zodiac-label:hover,
.zodiac-label.is-selected,
.zodiac-label.is-related {
  filter: drop-shadow(0 2px 5px rgba(3, 20, 32, 0.24));
}

.planet-label {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 21.6px;
  font-weight: 400;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-linejoin: round;
  stroke-width: 3.25px;
  paint-order: stroke fill;
  filter: drop-shadow(0 1px 1px rgba(3, 20, 32, 0.16));
}

.custom-body-glyph {
  overflow: visible;
}

svg.custom-body-glyph {
  display: block;
  width: 1em;
  height: 1.25em;
  overflow: visible;
}

.custom-body-glyph .pluto-glyph-circle,
.custom-body-glyph .pluto-glyph-crescent,
.custom-body-glyph .pluto-glyph-stem,
.custom-body-glyph .pluto-glyph-cross {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
  vector-effect: non-scaling-stroke;
}

.planet-label.custom-body-glyph {
  filter: drop-shadow(0 1px 1px rgba(3, 20, 32, 0.16));
  pointer-events: none;
}

.transit-label.custom-body-glyph,
.relocation-planet-label.custom-body-glyph {
  pointer-events: none;
}

.body-mark svg.custom-body-glyph,
.location-line-mark svg.custom-body-glyph,
.map-summary-line svg.custom-body-glyph {
  width: 1.08em;
  height: 1.28em;
}

.transit-planet-glyph svg.custom-body-glyph,
.map-legend-item svg.custom-body-glyph,
.map-line-picker svg.custom-body-glyph {
  width: 1em;
  height: 1.2em;
}

.planet-degree-readout {
  dominant-baseline: central;
  font-size: 10.4px;
  font-weight: 850;
  letter-spacing: 0;
  opacity: 0.82;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linejoin: round;
  stroke-width: 2.2px;
  paint-order: stroke fill;
}

.planet-degree-readout.is-exact {
  font-size: 9.2px;
  font-weight: 900;
  opacity: 0.9;
}

.planet-node:hover .planet-degree-anchor,
.planet-node.is-selected .planet-degree-anchor,
.planet-node.is-related .planet-degree-anchor {
  opacity: 0.96;
  stroke-width: 2.05;
}

.planet-node:hover .planet-degree-readout,
.planet-node.is-selected .planet-degree-readout,
.planet-node.is-related .planet-degree-readout {
  opacity: 1;
}

.transit-orbit {
  fill: none;
  stroke: rgba(0, 96, 117, 0.22);
  stroke-dasharray: 2 8;
  stroke-width: 1.2;
}

.transit-node {
  cursor: pointer;
  outline: none;
  transition: opacity 0.16s ease;
}

.transit-hit-circle {
  fill: transparent;
  pointer-events: all;
}

.transit-dot {
  fill: currentColor;
  stroke: #fff;
  stroke-width: 2;
  filter: drop-shadow(0 2px 4px rgba(3, 20, 32, 0.18));
}

.transit-label {
  dominant-baseline: central;
  text-anchor: middle;
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 17px;
  font-weight: 400;
}

.transit-node:hover .transit-dot,
.transit-node:focus-visible .transit-dot,
.transit-node.is-selected .transit-dot,
.transit-node.is-related .transit-dot {
  fill: currentColor;
  stroke-width: 3.2;
  filter: drop-shadow(0 4px 8px rgba(0, 174, 187, 0.24));
}

.degree-label,
.house-label,
.axis-label {
  dominant-baseline: central;
  text-anchor: middle;
  fill: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.house-cusp-degree {
  dominant-baseline: central;
  fill: rgba(3, 20, 32, 0.56);
  font-size: 8.2px;
  font-weight: 760;
  opacity: 0;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.88);
  stroke-linejoin: round;
  stroke-width: 1.75px;
  paint-order: stroke fill;
  transition:
    fill 160ms ease,
    opacity 160ms ease;
}

.house-click:hover .house-cusp-degree,
.house-click.is-selected .house-cusp-degree,
.house-click.is-related .house-cusp-degree {
  fill: var(--petrol);
  opacity: 1;
}

.axis-degree-readout {
  dominant-baseline: central;
  font-size: 9.4px;
  font-weight: 900;
  opacity: 0.88;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-linejoin: round;
  stroke-width: 2.4px;
  paint-order: stroke fill;
}

.axis-badge rect {
  filter: drop-shadow(0 3px 5px rgba(3, 20, 32, 0.2));
}

.axis-badge:hover rect,
.axis-badge.is-selected rect,
.axis-badge.is-related rect {
  filter: drop-shadow(0 5px 10px rgba(0, 174, 187, 0.34));
  stroke: #fff;
  stroke-width: 2;
}

.axis-badge text {
  dominant-baseline: central;
  text-anchor: middle;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.chart-svg .planet-node,
.chart-svg .axis-badge,
.chart-svg .zodiac-label {
  transition:
    opacity 0.16s ease,
    filter 0.16s ease;
}

.chart-svg.has-chart-selection .is-selected,
.chart-svg.has-chart-selection .is-related {
  opacity: 1;
}

.data-panel {
  grid-column: 3;
  padding: 0;
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  max-height: calc(100vh - 48px);
  overflow: visible;
}

.chart-data {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.positions-card {
  grid-column: 1 / -1;
}

.astro-map-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow);
}

.collapsible-card {
  grid-column: 1 / -1;
}

.astro-map-panel.is-fullscreen {
  position: fixed;
  z-index: 900;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: none;
  padding: clamp(10px, 1.3vw, 20px);
}

.astro-map-panel.is-fullscreen .astro-map {
  height: 100%;
  min-height: 0;
}

.astro-map-panel.is-fullscreen .astro-map-svg {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
}

.astro-map-panel.is-fullscreen .map-workspace {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: stretch;
  overflow: hidden;
}

.astro-map-panel.is-fullscreen .map-main-column {
  min-height: 0;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto auto auto;
  align-content: stretch;
}

.map-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.map-heading p {
  margin: 0 0 4px;
  color: var(--petrol);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-heading h2 {
  margin: 0;
  font-size: 1.24rem;
}

.map-heading-actions,
.map-heading > span,
.map-note {
  color: var(--muted);
  font-size: 0.84rem;
}

.map-heading-actions {
  max-width: 410px;
  display: grid;
  justify-items: end;
  gap: 8px;
  text-align: right;
}

.map-heading-actions span {
  display: block;
}

.map-aspect-controls {
  position: absolute;
  z-index: 7;
  top: 9px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2px;
  border: 1px solid rgba(0, 96, 117, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 4px 12px rgba(3, 20, 32, 0.07);
  padding: 2px;
  backdrop-filter: blur(8px);
}

.map-aspect-controls button {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 24px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 4px 7px 4px 5px;
  font-size: 0.54rem;
  font-weight: 820;
  box-shadow: none;
}

.map-aspect-controls .aspect-line-sample {
  display: none;
}

.map-aspect-controls button::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid rgba(0, 96, 117, 0.28);
  border-radius: 2px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(3, 20, 32, 0.06);
}

.map-aspect-controls button:hover,
.map-aspect-controls button:focus-visible,
.map-aspect-controls button[aria-pressed="true"] {
  background: rgba(247, 251, 252, 0.96);
  color: var(--petrol);
  outline: none;
  transform: none;
}

.map-aspect-controls button[aria-pressed="true"]::before {
  border-color: var(--cyan);
  background:
    linear-gradient(135deg, transparent 44%, #fff 45% 55%, transparent 56%),
    linear-gradient(45deg, transparent 48%, #fff 49% 58%, transparent 59%),
    var(--cyan);
}

.map-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.map-search-field {
  position: relative;
  width: min(100%, 330px);
  display: grid;
  gap: 4px;
  text-align: left;
}

.map-search-field label {
  color: var(--petrol);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.map-search-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(0, 96, 117, 0.16);
  border-radius: 999px;
  background: var(--field-bg);
  color: var(--field-text);
  padding: 8px 13px;
  font-size: 0.82rem;
  font-weight: 700;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(3, 20, 32, 0.04);
}

.map-search-field input:focus {
  border-color: var(--cyan);
  background: var(--field-bg-focus);
  box-shadow: 0 0 0 3px rgba(0, 174, 187, 0.14);
}

.map-search-list {
  position: absolute;
  z-index: 16;
  top: 61px;
  left: 0;
  right: 0;
  max-height: 250px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(3, 20, 32, 0.16);
}

.map-search-list button,
.map-search-empty {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  padding: 9px 12px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 800;
}

.map-search-list button {
  cursor: pointer;
}

.map-search-list button:hover {
  background: #f2fafb;
}

.map-search-list span,
.map-search-list small,
.map-search-empty {
  color: var(--muted);
  font-size: 0.74rem;
}

.map-search-list small {
  grid-column: 1 / -1;
  font-weight: 600;
}

.map-heading-actions button {
  border: 1px solid rgba(0, 96, 117, 0.14);
  border-radius: 999px;
  background: #fff;
  color: var(--petrol);
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(3, 20, 32, 0.05);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease,
    background 0.15s ease;
}

.map-heading-actions button:hover,
.map-heading-actions button[aria-pressed="true"] {
  border-color: rgba(0, 174, 187, 0.34);
  background: #f7fbfc;
  box-shadow: 0 4px 13px rgba(0, 174, 187, 0.13);
  transform: translateY(-1px);
}

.map-heading > span {
  max-width: 320px;
  text-align: right;
}

.map-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 14px;
  align-items: start;
}

.app-shell.astro-page .map-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 18px;
}

.map-main-column {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.map-side-stack {
  position: relative;
  top: auto;
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: 100%;
  align-self: start;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  scrollbar-gutter: auto;
}

.astro-map-panel.is-fullscreen .map-side-stack {
  top: 0;
  max-height: 100%;
  overflow: auto;
}

.map-side-stack .map-relocation-panel {
  position: static;
  top: auto;
}

.map-side-stack .data-panel {
  grid-column: auto;
  max-height: none;
  overflow: visible;
}

.map-side-stack .detail-panel {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
}

.map-reading-panel .detail-panel {
  /* Rand war bereits Kanon; Flaeche auf die Porzellan-Toenung gehoben
     (14.07.2026), damit die Lesekarte wie ihre Geschwister liest. */
  border-color: rgba(0, 174, 187, 0.2);
  background: var(--porzellan-bg);
}

.map-anchor-panel {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  padding: 10px 11px;
}

.map-anchor-panel > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-anchor-panel > h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.12;
}

.map-anchor-panel > h3 span {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid color-mix(in srgb, var(--line) 38%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 12%, #ffffff);
  color: var(--line);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-weight: 400;
}

.map-anchor-panel > h3 small {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
}

.map-anchor-panel > span,
.anchor-loads span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.42;
}

.anchor-score {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.anchor-score strong,
.anchor-score span {
  border: 1px solid rgba(0, 100, 121, 0.1);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(0, 174, 187, 0.045);
  color: var(--ink);
  font-size: 0.64rem;
  font-weight: 850;
}

.anchor-score span {
  background: rgba(100, 81, 133, 0.08);
  color: var(--violet);
}

.map-anchor-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.map-anchor-panel li {
  position: relative;
  padding-left: 14px;
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
}

.map-anchor-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--cyan);
}

.anchor-loads {
  display: grid;
  gap: 3px;
  border-top: 1px solid rgba(0, 96, 117, 0.08);
  padding-top: 8px;
}

.anchor-loads strong {
  color: var(--petrol);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.anchor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anchor-actions button {
  min-height: 26px;
  border: 1px solid rgba(0, 100, 121, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--petrol);
  padding: 4px 8px;
  font-size: 0.64rem;
  font-weight: 850;
  cursor: pointer;
}

.anchor-actions button:hover,
.anchor-actions button:focus-visible,
.anchor-actions button.is-active {
  border-color: rgba(0, 174, 187, 0.35);
  background: rgba(0, 174, 187, 0.08);
  color: var(--ink);
  outline: none;
}

.map-result-summary {
  display: grid;
  align-content: start;
  gap: 11px;
  min-width: 0;
  /* Auf den Kanon gezogen (14.07.2026): Rand-Ton + Radius aus den Tokens;
     die 42%-Cyan-Kante bleibt als bewusster Neon-Akzent erhalten. */
  border: var(--porzellan-border);
  border-left: 2px solid rgba(53, 212, 232, 0.42);
  border-radius: var(--porzellan-radius);
  padding: 15px;
}

/* Auswertungs-Kachel veredelt (Venus-DC-Leitmuster, E): Eyebrow in der Cyan-
   Familie. Panel auf hellem Glas -> Petrol (AA-lesbar) statt hellem Neon; die
   42%-Cyan-Kante bleibt Neon-Akzent. Gilt auch fuer den leeren Zustand. */
.map-result-summary > p {
  margin: 0;
  color: var(--petrol);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-summary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.map-summary-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.map-summary-title > p {
  margin: 0;
  color: var(--petrol);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.map-summary-title > h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.06rem;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.map-summary-coordinates {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.35;
}

.place-country-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(0, 100, 121, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--petrol);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.2;
}

.place-country-badge.is-compact {
  flex: 0 0 auto;
  padding: 3px 7px;
  font-size: 0.68rem;
}

.place-country-flag {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.15em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05em;
  line-height: 1;
}

.map-summary-nearby {
  display: grid;
  gap: 8px;
  min-width: 0;
  border-top: 1px solid rgba(0, 96, 117, 0.1);
  padding-top: 11px;
}

.map-summary-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.map-summary-section-heading > strong {
  color: var(--petrol);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.map-summary-section-heading > small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.map-summary-lines {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.map-summary-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  padding: 8px 9px;
  font: inherit;
  text-align: left;
}

button.map-summary-line {
  cursor: pointer;
}

.map-summary-line:hover,
.map-summary-line:focus-visible,
.map-summary-line.is-selected {
  border-color: rgba(0, 174, 187, 0.32);
  box-shadow: 0 6px 16px rgba(0, 100, 121, 0.1);
  outline: none;
}

.map-summary-line-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mark, var(--cyan)), #ffffff 88%);
  color: var(--mark, var(--cyan));
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-weight: 400;
}

.map-summary-line-copy,
.map-summary-line-distance {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.map-summary-line-copy > strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.77rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-summary-line-copy > small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-summary-line-distance {
  justify-items: end;
  text-align: right;
}

.map-summary-line-distance > strong {
  color: var(--petrol);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

.map-summary-line-distance > small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 750;
  white-space: nowrap;
}

.map-summary-line.is-muted .map-summary-line-copy > strong,
.map-summary-line.is-muted .map-summary-line-distance > strong,
.map-summary-line.is-subtle .map-summary-line-copy > strong,
.map-summary-line.is-subtle .map-summary-line-distance > strong {
  color: var(--muted);
}

.map-summary-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.map-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.map-summary-meta span {
  border: 1px solid rgba(0, 96, 117, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--muted);
  padding: 4px 7px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 820;
}

.map-summary-focus {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid rgba(0, 96, 117, 0.1);
  padding-top: 10px;
}

.map-summary-back {
  justify-self: start;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--petrol);
  padding: 4px 5px;
  font: inherit;
  font-size: 0.71rem;
  font-weight: 850;
  cursor: pointer;
}

.map-summary-back:hover,
.map-summary-back:focus-visible {
  background: rgba(0, 174, 187, 0.07);
  outline: none;
}

@media (pointer: coarse) {
  .map-summary-back {
    min-height: 44px;
  }
}

.map-summary-focus-heading {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.map-summary-focus-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.map-summary-focus-heading > div > small {
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.map-summary-focus-heading h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.25;
}

.map-summary-focus-heading h4:focus-visible {
  border-radius: 4px;
  outline: 2px solid rgba(0, 174, 187, 0.42);
  outline-offset: 2px;
}

.map-summary-focus > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.5;
}

.map-summary-focus > .map-summary-axis-description {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border-top: 1px solid rgba(0, 96, 117, 0.08);
  padding-top: 9px;
}

.map-summary-axis-description > strong {
  border-radius: 999px;
  background: rgba(0, 174, 187, 0.09);
  color: var(--petrol);
  padding: 2px 7px;
  font-size: 0.66rem;
  font-weight: 900;
}

.map-summary-line-reading {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.map-summary-reading-block,
.map-summary-distance-note,
.map-summary-reflection {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.map-summary-reading-block {
  border: 0;
  border-top: 1px solid rgba(0, 96, 117, 0.09);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 8px 0 0;
}

.map-summary-distance-note,
.map-summary-reflection {
  border: 1px solid rgba(0, 96, 117, 0.09);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
  padding: 9px 10px;
}

.map-summary-reading-block.is-axis {
  background: transparent;
  box-shadow: none;
}

.map-summary-reading-block.is-chance {
  background: transparent;
  box-shadow: none;
}

.map-summary-reading-block.is-watch {
  border-top-color: rgba(182, 110, 74, 0.15);
  background: transparent;
  box-shadow: none;
}

.map-summary-line-reading h5 {
  margin: 0;
  color: var(--petrol);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.3;
  text-transform: uppercase;
}

.map-summary-line-reading p {
  margin: 0;
  color: color-mix(in srgb, var(--ink) 76%, #ffffff);
  font-size: 0.8rem;
  font-weight: 640;
  line-height: 1.52;
  overflow-wrap: anywhere;
}

.map-summary-distance-note {
  --distance-accent: rgba(0, 96, 117, 0.26);
  background: rgba(247, 251, 252, 0.92);
  box-shadow: inset 3px 0 0 var(--distance-accent);
}

.map-summary-distance-note.is-core {
  --distance-accent: rgba(0, 174, 187, 0.72);
}

.map-summary-distance-note.is-strong {
  --distance-accent: rgba(0, 150, 159, 0.55);
}

.map-summary-distance-note.is-clear {
  --distance-accent: rgba(0, 120, 134, 0.4);
}

.map-summary-distance-note.is-subtle,
.map-summary-distance-note.is-muted {
  --distance-accent: rgba(108, 138, 145, 0.32);
}

.map-summary-reflection {
  border-color: rgba(0, 174, 187, 0.15);
  background: linear-gradient(145deg, rgba(0, 174, 187, 0.075), rgba(255, 255, 255, 0.82));
}

.map-summary-reflection p {
  color: var(--ink);
  font-weight: 730;
}

.map-summary-line-reading > .map-summary-method-note {
  border-top: 1px solid rgba(0, 96, 117, 0.09);
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.48;
}

.map-summary-method-note > summary {
  width: fit-content;
  color: var(--petrol);
  font-size: 0.7rem;
  font-weight: 850;
  cursor: pointer;
}

.map-summary-method-note[open] > summary {
  margin-bottom: 6px;
}

.map-summary-method-note > p {
  color: var(--muted, #504b5d);
  font-size: 0.72rem;
}

.astro-map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 96, 117, 0.14);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 36%, rgba(0, 174, 187, 0.07), rgba(0, 174, 187, 0) 54%),
    linear-gradient(145deg, #f8fcfd, #edf6f7);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.astro-map.is-dragging {
  cursor: grabbing;
}

.astro-map.maplibre-map {
  min-height: clamp(600px, 62vh, 780px);
  cursor: auto;
  touch-action: pan-x pan-y;
  background:
    radial-gradient(circle at 50% 32%, rgba(0, 174, 187, 0.08), rgba(0, 174, 187, 0) 55%),
    #eef6f7;
}

.astro-map.has-load-state {
  min-height: clamp(420px, 62vh, 780px);
  display: grid;
  place-items: center;
  cursor: default;
  touch-action: auto;
}

.map-load-state {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  background: rgba(238, 246, 247, 0.96);
  padding: 24px;
}

.map-load-state-card {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 96, 117, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 42px rgba(3, 20, 32, 0.12);
  color: var(--ink);
  padding: 24px;
  text-align: center;
}

.map-load-state-card > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 174, 187, 0.24);
  border-radius: 11px;
  background: rgba(0, 174, 187, 0.07);
  color: var(--petrol);
  font-size: 1rem;
  font-weight: 850;
}

.map-load-state-card > .map-load-emblem {
  width: clamp(120px, 37.5vw, 164px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 42%;
  background:
    radial-gradient(circle at 50% 44%, rgba(53, 212, 232, 0.15), transparent 57%),
    linear-gradient(145deg, #091d32, #051020);
  box-shadow:
    inset 0 0 0 1px rgba(53, 212, 232, 0.2),
    0 18px 46px rgba(53, 212, 232, 0.12);
}

.map-load-emblem img {
  width: clamp(88px, 27.7vw, 124px);
}

.map-load-state-card strong {
  font-size: 1rem;
}

.map-load-state-card p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.map-load-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid rgba(0, 174, 187, 0.28);
  border-radius: 12px;
  background: rgba(0, 174, 187, 0.09);
  color: var(--petrol);
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 820;
  text-decoration: none;
}

button.map-load-retry {
  font-family: inherit;
  cursor: pointer;
}

.map-load-retry:hover,
.map-load-retry:focus-visible {
  border-color: rgba(0, 174, 187, 0.5);
  background: rgba(0, 174, 187, 0.14);
  outline: 2px solid rgba(0, 174, 187, 0.2);
  outline-offset: 2px;
}

.map-load-retry:focus-visible {
  outline-color: #006479;
}

button.map-load-retry:disabled {
  cursor: wait;
  opacity: 0.58;
}

.map-relocation-panel {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 10px;
  align-self: start;
  /* Kanon der Porzellan-Familie -> zentrale Tokens (14.07.2026), Optik pixelgleich. */
  border: var(--porzellan-border);
  border-radius: var(--porzellan-radius);
  padding: 14px;
}

.map-result-summary,
.map-relocation-panel {
  background: var(--porzellan-bg);
  box-shadow: var(--porzellan-shadow);
  backdrop-filter: blur(5px);
}

.app-shell.astro-page .map-relocation-panel {
  top: 18px;
  gap: 12px;
  padding: 18px;
}

.map-relocation-panel > p {
  margin: 0;
  color: var(--petrol);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.map-relocation-panel > h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.12;
}

.map-relocation-panel > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.42;
}

.map-relocation-panel .relocation-chart-shell {
  margin: 0;
}

.map-relocation-panel .relocation-chart-svg {
  width: min(100%, 300px);
}

.app-shell.astro-page .map-relocation-panel .relocation-chart-svg {
  width: min(100%, 320px);
}

@media (min-width: 621px) {
  .app-shell.astro-page .map-relocation-panel .relocation-chart-svg {
    width: min(100%, 340px);
  }
}

@media (min-width: 901px) {
  .app-shell.astro-page .map-relocation-panel .relocation-chart-svg {
    width: min(100%, 360px);
  }
}

@media (min-width: 1321px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-relocation-panel .relocation-chart-svg {
    width: min(100%, 380px);
  }
}

.map-relocation-panel .relocation-chart-shell figcaption {
  display: none;
}

.relocation-side-axes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.relocation-side-axes button {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.relocation-side-axes button {
  border: 1px solid rgba(0, 100, 121, 0.12);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 8px 9px;
  font-size: 0.72rem;
  font-weight: 800;
}

.relocation-side-axes button > span {
  display: block;
  color: var(--petrol); /* vorher --cyan: 2,58:1 auf Weiss; Petrol = 6,78:1 (A11y-Audit 12.07.) */
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.relocation-side-axes button > em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.2;
}

.relocation-axis-sign {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.1;
}

.relocation-axis-sign b {
  color: var(--petrol);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 0.95rem;
  line-height: 1;
}

.relocation-axis-degree {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 780;
}

.relocation-side-axes button:hover,
.relocation-side-axes button:focus-visible,
.relocation-side-axes button.is-selected,
.relocation-side-aspect:hover,
.relocation-side-aspect:focus-visible,
.relocation-side-aspect.is-selected {
  border-color: rgba(0, 178, 194, 0.32);
  box-shadow: 0 6px 16px rgba(0, 100, 121, 0.1);
  outline: none;
}

.relocation-side-axes button[aria-expanded="true"] {
  border-color: rgba(0, 178, 194, 0.48);
  background: linear-gradient(135deg, #ffffff, #e8f7f9);
  box-shadow:
    0 6px 16px rgba(0, 100, 121, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.relocation-side-goals {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(0, 100, 121, 0.1);
  border-radius: 12px;
  background: rgba(247, 251, 252, 0.72);
  padding: 10px;
}

.relocation-side-goals h4 {
  margin: 0;
  color: var(--ink);
  font-size: 0.78rem;
}

.relocation-side-goals p {
  margin: 0;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 650;
  line-height: 1.42;
}

.relocation-goal-list {
  display: grid;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.relocation-goal-list button {
  display: grid;
  grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.relocation-goal-list button:hover,
.relocation-goal-list button:focus-visible,
.relocation-goal-list button.is-selected {
  color: var(--petrol);
  outline: none;
}

.relocation-goal-list button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.relocation-goal-list button i {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 96, 117, 0.09);
}

.relocation-goal-list button i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--goal);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-bright));
}

.relocation-side-aspects {
  display: grid;
  gap: 7px;
}

.relocation-side-aspects h4 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 0.78rem;
}

/* Aufklappbare AC-/MC-/DC-/IC-Erklaerung: Das Relocation-Panel steht auf einer
   hellen Porzellan-Flaeche, waehrend der ungerahmte Text zuvor die helle
   Schriftfarbe der dunklen Kartenbuehne erbte. Eine eigene Lesekarte stellt
   Typografie, Kontrast und Zeilenlaenge unabhaengig von dieser Vererbung sicher. */
#relocation-axis-info {
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(0, 174, 187, 0.22);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 252, 0.94));
  color: var(--ink);
  padding: 12px 14px 13px;
  box-shadow:
    0 7px 18px rgba(3, 20, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#relocation-axis-info h4 {
  margin: 0;
  color: var(--petrol);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#relocation-axis-info p {
  max-width: 76ch;
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.55;
}

.relocation-side-aspects.is-muted {
  border: 1px solid rgba(0, 100, 121, 0.08);
  border-radius: 10px;
  background: rgba(247, 251, 252, 0.78);
  padding: 8px 9px;
}

.relocation-side-aspects.is-muted p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.relocation-side-aspect {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  border: 1px solid rgba(0, 100, 121, 0.1);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 7px;
}

.relocation-side-aspect {
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.relocation-side-aspect span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--mark), #ffffff 88%);
  color: var(--mark);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-weight: 900;
}

.relocation-side-aspect.harmony span {
  background: rgba(47, 129, 120, 0.11);
  color: #2f8178;
}

.relocation-side-aspect.tension span {
  background: rgba(196, 69, 54, 0.1);
  color: #c44536;
}

.relocation-side-aspect strong {
  min-width: 0;
  font-size: 0.76rem;
}

.astro-map-gl {
  position: absolute;
  inset: 0;
}

.astro-map.maplibre-map .maplibregl-canvas {
  outline: none;
}

.astro-map.maplibre-map .maplibregl-ctrl-top-left {
  top: 12px;
  left: 12px;
}

.astro-map.maplibre-map .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 18px rgba(3, 20, 32, 0.08);
}

.astro-map.maplibre-map .maplibregl-ctrl-group button {
  width: 32px;
  height: 32px;
}

.astro-map.maplibre-map .maplibregl-ctrl-attrib {
  border-radius: 8px 0 0 0;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(3, 20, 32, 0.64);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.66rem;
}

.astro-map.maplibre-map .maplibregl-ctrl-attrib a {
  color: var(--petrol);
}

.map-data-badge {
  position: absolute;
  z-index: 2;
  left: 14px;
  bottom: 14px;
  max-width: min(460px, calc(100% - 28px));
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 6px 18px rgba(3, 20, 32, 0.08);
  color: rgba(3, 20, 32, 0.64);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 6px 10px;
  pointer-events: none;
}

.map-fullscreen-float {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  border: 1px solid rgba(0, 100, 121, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--petrol);
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 900;
  box-shadow: 0 6px 18px rgba(3, 20, 32, 0.11);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.map-fullscreen-float:hover,
.map-fullscreen-float:focus-visible {
  border-color: rgba(0, 174, 187, 0.38);
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 174, 187, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.map-zoom-controls {
  position: absolute;
  z-index: 5;
  right: 14px;
  bottom: 58px;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 100, 121, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(3, 20, 32, 0.12);
  backdrop-filter: blur(8px);
}

.map-zoom-controls button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border: 0;
  border-bottom: 1px solid rgba(0, 100, 121, 0.1);
  background: transparent;
  color: var(--petrol);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.map-zoom-controls button:last-child {
  border-bottom: 0;
  color: rgba(3, 20, 32, 0.52);
}

.map-zoom-controls button:hover,
.map-zoom-controls button:focus-visible {
  background: rgba(0, 174, 187, 0.08);
  color: var(--petrol);
  outline: none;
}

.astro-map-panel.is-fullscreen .map-fullscreen-float {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
  z-index: 8;
  padding: 6px 10px;
}

.map-edge-labels {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.map-edge-labels * {
  pointer-events: none;
}

.map-edge-row {
  position: absolute;
  right: 0;
  left: 0;
  height: 112px;
  pointer-events: none;
}

.map-edge-row.top {
  top: 6px;
}

.map-edge-row.bottom {
  bottom: 6px;
}

.map-edge-label {
  position: absolute;
  left: var(--edge-x);
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 0;
  width: 26px;
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--line) 50%, rgba(255, 255, 255, 0.72));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  padding: 2px;
  font: inherit;
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 0.9;
  box-shadow: 0 4px 12px rgba(3, 20, 32, 0.08);
  cursor: default;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.map-edge-row.top .map-edge-label {
  top: calc(3px + var(--edge-offset));
}

.map-edge-row.bottom .map-edge-label {
  bottom: calc(3px + var(--edge-offset));
}

.map-edge-label::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  width: 1px;
  height: var(--edge-connector);
  background: linear-gradient(180deg, var(--line), rgba(255, 255, 255, 0));
  opacity: 0.82;
  transform: translateX(-50%);
  pointer-events: none;
}

.map-edge-label::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 18%, transparent);
  transform: translateX(-50%);
}

.map-edge-row.top .map-edge-label::after {
  top: calc(100% - 1px);
}

.map-edge-row.top .map-edge-label::before {
  top: calc(100% + var(--edge-dot));
}

.map-edge-row.bottom .map-edge-label::after {
  bottom: calc(100% - 1px);
  background: linear-gradient(0deg, var(--line), rgba(255, 255, 255, 0));
}

.map-edge-row.bottom .map-edge-label::before {
  bottom: calc(100% + var(--edge-dot));
}

.map-edge-label:hover,
.map-edge-label:focus-visible,
.map-edge-label.is-selected,
.map-edge-label.is-hovered {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--line) 18%, rgba(3, 20, 32, 0.1));
  outline: none;
  transform: translateX(-50%) translateY(-1px);
}

.map-edge-label.is-hovered::before {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--line) 22%, transparent),
    0 0 14px color-mix(in srgb, var(--line) 42%, transparent);
}

.map-edge-label.is-nearby {
  border-style: dashed;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--line) 12%, rgba(3, 20, 32, 0.08));
}

.map-edge-label.is-nearby::after {
  opacity: 0.46;
}

.map-edge-label.is-nearby::before {
  background: #fff;
  border: 1px solid var(--line);
}

.map-edge-label span {
  color: var(--line);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1;
}

.map-edge-label small {
  color: var(--petrol);
  font-size: 0.43rem;
  font-weight: 950;
  letter-spacing: 0.02em;
}

.map-edge-label em {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.astro-map-svg {
  width: 100%;
  aspect-ratio: 2 / 1;
  min-height: 560px;
  display: block;
}

.map-ocean {
  fill: url(#map-ocean-gradient);
}

.map-grid-line {
  stroke: rgba(0, 96, 117, 0.1);
  stroke-width: 0.8;
}

.map-grid-line.equator {
  stroke: rgba(184, 147, 90, 0.28);
}

.map-land {
  fill: url(#map-land-gradient);
  stroke: rgba(45, 88, 74, 0.5);
  stroke-width: 0.85;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.42));
}

.map-relief {
  fill: url(#map-relief-pattern);
  opacity: 0.22;
  pointer-events: none;
}

.map-region-label {
  pointer-events: none;
  fill: rgba(3, 20, 32, 0.35);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-anchor: middle;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.66);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.map-region-label.country {
  fill: rgba(3, 20, 32, 0.48);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.map-region-label.region {
  fill: rgba(0, 96, 117, 0.6);
  font-size: 6.8px;
  letter-spacing: 0.04em;
}

.map-city-label {
  pointer-events: none;
}

.map-city-label[data-map-city] {
  cursor: pointer;
  pointer-events: auto;
  outline: none;
}

.map-city-label .map-city-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.map-city-label circle {
  fill: #fff;
  stroke: rgba(3, 20, 32, 0.46);
  stroke-width: 0.8;
}

.map-city-label text {
  fill: rgba(3, 20, 32, 0.78);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.map-city-label[data-map-city]:hover .map-city-dot,
.map-city-label[data-map-city]:focus-visible .map-city-dot {
  fill: rgba(0, 174, 187, 0.2);
  stroke: var(--cyan);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 5px rgba(0, 174, 187, 0.55));
}

.map-city-label.birth-place circle {
  fill: var(--cyan);
  stroke: #fff;
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 4px rgba(0, 96, 117, 0.32));
}

.map-city-label.detail-place circle {
  fill: #fff;
  stroke: var(--bronze);
  stroke-width: 1.1;
  filter: drop-shadow(0 1px 4px rgba(184, 147, 90, 0.22));
}

.map-city-label.selected-place circle {
  fill: var(--petrol);
  stroke: #fff;
  stroke-width: 1.4;
  filter: drop-shadow(0 2px 6px rgba(0, 96, 117, 0.35));
}

.map-city-label.birth-place text {
  fill: var(--petrol);
  font-weight: 900;
}

.map-city-label.detail-place text,
.map-city-label.selected-place text {
  fill: var(--petrol);
  font-weight: 900;
}

.astro-geo-target {
  cursor: pointer;
  outline: none;
}

.astro-map-svg [data-select]:focus-visible {
  outline: none;
}

.astro-geo-hit-path {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
}

.astro-geo-hit-rect {
  fill: transparent;
  pointer-events: all;
}

.astro-geo-line {
  fill: none;
  stroke: var(--line);
  stroke-width: var(--map-line-width, 2px);
  stroke-linecap: round;
  opacity: 0.86;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    stroke-width 0.15s ease,
    filter 0.15s ease;
}

.astro-mc {
  stroke-width: var(--map-meridian-width, 2.2px);
}

.astro-geo-target:hover .astro-geo-line,
.astro-geo-target:focus-visible .astro-geo-line,
.astro-geo-target.is-selected .astro-geo-line {
  opacity: 1;
  stroke-width: var(--map-focus-width, 3.4px);
  filter: drop-shadow(0 2px 4px rgba(3, 20, 32, 0.18));
}

.astro-geo-aspect-target {
  cursor: pointer;
  outline: none;
}

.astro-geo-aspect-line {
  fill: none;
  stroke: var(--line);
  stroke-width: max(0.52px, calc(var(--map-line-width, 2px) * 0.48));
  stroke-linecap: round;
  opacity: 0.58;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    stroke-width 0.15s ease,
    filter 0.15s ease;
}

.astro-geo-aspect-target.harmony .astro-geo-aspect-line {
  stroke-dasharray: 5 5;
  opacity: 0.46;
}

.astro-geo-aspect-target.tension .astro-geo-aspect-line {
  stroke-dasharray: 2 4;
  opacity: 0.58;
}

.astro-geo-aspect-target:hover .astro-geo-aspect-line,
.astro-geo-aspect-target:focus-visible .astro-geo-aspect-line,
.astro-geo-aspect-target.is-selected .astro-geo-aspect-line {
  opacity: 0.94;
  stroke-width: max(1.1px, calc(var(--map-focus-width, 3.4px) * 0.58));
  filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--line) 28%, transparent));
}

.astro-ic,
.astro-dc {
  stroke-dasharray: 7 7;
  opacity: 0.62;
}

.astro-ac,
.astro-dc {
  stroke-width: var(--map-curve-width, 1.2px);
}

.map-crossing-node {
  cursor: pointer;
  outline: none;
}

.map-crossing-hit {
  fill: transparent;
  pointer-events: all;
}

.map-crossing-field {
  fill: color-mix(in srgb, var(--first) 18%, transparent);
  stroke: color-mix(in srgb, var(--first) 38%, transparent);
  stroke-width: 0.8;
  stroke-dasharray: 2.4 2.8;
  opacity: 0.65;
  filter: drop-shadow(0 0 5px rgba(0, 174, 187, 0.22));
}

.map-crossing-aura {
  fill: none;
  stroke-width: 1.1;
  opacity: 0.78;
  filter: drop-shadow(0 0 4px rgba(0, 174, 187, 0.3));
}

.map-crossing-aura.first {
  stroke: var(--first);
}

.map-crossing-aura.second {
  stroke: var(--second);
  stroke-dasharray: 1.6 2.4;
}

.map-crossing-core {
  fill: #fff;
  stroke: var(--second);
  stroke-width: 0.9;
}

.map-crossing-node:hover .map-crossing-field,
.map-crossing-node:focus-visible .map-crossing-field,
.map-crossing-node.is-selected .map-crossing-field {
  opacity: 0.9;
  stroke-width: 1.1;
  filter: drop-shadow(0 0 10px rgba(0, 174, 187, 0.36));
}

.map-crossing-node:hover .map-crossing-aura,
.map-crossing-node:focus-visible .map-crossing-aura,
.map-crossing-node.is-selected .map-crossing-aura {
  opacity: 1;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 8px rgba(0, 174, 187, 0.45));
}

.map-astro-point {
  cursor: pointer;
  outline: none;
}

.map-zenith-radius path {
  fill: none;
  stroke: var(--point);
  stroke-width: max(0.65px, calc(var(--map-line-width, 2px) * 0.55));
  opacity: 0.48;
  pointer-events: none;
}

.map-astro-point-hit {
  fill: transparent;
  pointer-events: all;
}

.map-astro-point-mark {
  fill: rgba(255, 255, 255, 0.62);
  stroke: var(--point);
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 3px rgba(3, 20, 32, 0.16));
}

.map-astro-point.nadir .map-astro-point-mark {
  stroke-dasharray: 2 3;
  fill: rgba(255, 255, 255, 0.36);
}

.map-astro-point-axis {
  stroke: var(--point);
  stroke-width: 1.2;
  stroke-linecap: round;
  pointer-events: none;
}

.map-astro-point:hover .map-astro-point-mark,
.map-astro-point:focus-visible .map-astro-point-mark,
.map-astro-point.is-selected .map-astro-point-mark {
  fill: rgba(255, 255, 255, 0.88);
  stroke-width: 2.4;
  filter: drop-shadow(0 3px 8px rgba(0, 174, 187, 0.24));
}

.map-axis-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: transparent;
  padding: 2px;
  box-shadow: none;
}

.map-axis-legend button,
.map-legend-item {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  padding: 4px 7px 3px;
  color: var(--muted);
  font-size: 0.54rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.map-axis-legend button:hover,
.map-axis-legend button.is-selected,
.map-axis-legend button.is-active,
.map-legend-item:hover,
.map-legend-item.is-selected {
  border-color: rgba(0, 174, 187, 0.3);
  background: rgba(0, 174, 187, 0.06);
  box-shadow: none;
  color: var(--ink);
  transform: translateY(-1px);
}

.map-axis-legend button[data-select="mapAxis:MC"] {
  --legend-accent: var(--cyan);
}

.map-axis-legend button[data-select="mapAxis:IC"] {
  --legend-accent: var(--petrol);
}

.map-axis-legend button[data-select="mapAxis:AC"] {
  --legend-accent: var(--red);
}

.map-axis-legend button[data-select="mapAxis:DC"] {
  --legend-accent: var(--violet);
}

.map-axis-legend button[data-map-birth-focus] {
  --legend-accent: var(--bronze);
}

.map-axis-legend button[data-select="mapPointType:crossing"] {
  --legend-accent: var(--cyan);
}

.map-axis-legend button.is-hidden {
  opacity: 0.48;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: none;
}

.map-axis-legend button.is-hidden i {
  filter: saturate(0.35);
}

.axis-line-sample {
  width: 10px;
  height: 0;
  border-top: 1.25px solid var(--petrol);
}

.axis-line-sample.ic,
.axis-line-sample.dc {
  border-top-style: dashed;
}

.axis-line-sample.mc {
  border-color: var(--cyan);
}

.axis-line-sample.ac {
  border-color: var(--red);
}

.aspect-line-sample {
  position: relative;
  width: 12px;
  height: 8px;
}

.aspect-line-sample::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  border-top: 1.5px solid currentColor;
}

.aspect-line-sample.harmony {
  color: #2f8178;
}

.aspect-line-sample.tension {
  color: #c44536;
}

.aspect-line-sample.tension::before {
  border-top-style: dashed;
}

.crossing-sample {
  position: relative;
  width: 7px;
  height: 7px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  box-shadow:
    0 0 0 3px rgba(0, 174, 187, 0.12),
    inset 0 0 0 3px rgba(184, 147, 90, 0.14);
}

.crossing-sample::before,
.crossing-sample::after {
  display: none;
}

.birth-sample {
  position: relative;
  width: 9px;
  height: 9px;
  border: 1.3px solid var(--bronze);
  border-radius: 999px;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(184, 147, 90, 0.12),
    inset 0 0 0 3px rgba(0, 174, 187, 0.1);
}

.birth-sample::before,
.birth-sample::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1px;
  border-radius: 999px;
  background: var(--bronze);
  transform: translate(-50%, -50%);
}

.birth-sample::after {
  width: 1px;
  height: 11px;
}

.zenith-sample {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1.4px solid var(--petrol);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(0, 174, 187, 0.12);
}

.zenith-sample::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 50%;
  width: 1.4px;
  border-radius: 999px;
  background: var(--petrol);
  transform: translateX(-50%);
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: transparent;
  padding: 2px;
  box-shadow: none;
}

.map-legend-item {
  gap: 4px;
  --legend-accent: var(--line);
}

.map-legend-item small {
  display: inline-grid;
  place-items: center;
  width: 6px;
  min-width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  color: var(--muted);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 48%, #ffffff);
  font-size: 0;
  font-weight: 900;
}

.map-legend-item.is-active {
  border-color: rgba(0, 174, 187, 0.24);
  background: rgba(0, 174, 187, 0.045);
  color: var(--ink);
  box-shadow: none;
}

.map-legend-item.is-hidden {
  opacity: 0.55;
}

.map-legend-item.is-hidden small {
  background: transparent;
}

.map-legend-item.is-hidden span {
  filter: saturate(0.3);
}

.map-legend-item.is-optional {
  border-style: dashed;
}

.map-legend-item span {
  color: var(--line);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 0.74rem;
  font-weight: 400;
  line-height: 1;
}

.map-legend-actions,
.map-line-picker {
  flex-basis: 100%;
}

.map-legend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 3px;
}

.map-legend-actions button,
.map-line-picker summary,
.map-line-picker button {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  padding: 4px 7px 3px;
  font-size: 0.54rem;
  font-weight: 820;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.map-legend-actions button:hover,
.map-legend-actions button:focus-visible,
.map-line-picker summary:hover,
.map-line-picker summary:focus-visible,
.map-line-picker button:hover,
.map-line-picker button:focus-visible,
.map-line-picker button.is-active {
  border-color: rgba(0, 174, 187, 0.3);
  background: rgba(0, 174, 187, 0.06);
  color: var(--ink);
  outline: none;
}

.map-line-picker {
  display: block;
  margin-top: 1px;
}

.map-line-picker summary {
  width: fit-content;
  list-style: none;
}

.map-line-picker summary::-webkit-details-marker {
  display: none;
}

.map-line-picker > div {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding-top: 4px;
}

.map-line-picker button {
  gap: 4px;
}

.map-line-picker button span {
  color: var(--line);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1;
}

.map-note {
  margin: 0;
}

.detail-panel {
  position: relative;
  overflow: visible;
  /* Porzellan-Familie 14.07.2026: Flaeche + Radius (14->16) aus den Tokens;
     Rand + Schatten via site-bridge.css (Schwebe-Fassung). */
  border: 1px solid var(--line);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  padding: 18px 18px 16px 22px;
  box-shadow: var(--shadow);
}

@media (min-width: 1180px) {
  .detail-panel {
    position: sticky;
    top: 24px;
  }
}

.data-card {
  /* Porzellan-Familie 14.07.2026: Flaeche + Radius (14->16) aus den Tokens;
     Rand + Schatten via site-bridge.css (Schwebe-Fassung). */
  border: 1px solid var(--line);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  padding: 18px;
  box-shadow: var(--shadow);
}

.landing-content {
  grid-column: 1 / -1;
  display: grid;
  gap: 18px;
}

.trust-panel,
.seo-section {
  /* Porzellan-Familie 14.07.2026: Radius (18->16) + Flaeche aus den Tokens
     (seo-section-Flaeche greift direkt; trust-panel setzt seine Flaeche unten neu).
     Rand + Schatten via site-bridge.css (Schwebe-Fassung); auf astro-page faerbt
     site-bridge trust-panel/seo-section bewusst dunkel. */
  border: 1px solid rgba(0, 100, 121, 0.12);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  box-shadow: var(--shadow);
}

.trust-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 3vw, 34px);
  /* Verlauf war schon nah am Kanon -> auf das Porzellan-Token vereinheitlicht. */
  background: var(--porzellan-bg);
}

.trust-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0, 174, 187, 0.22);
  border-radius: 16px;
  background: linear-gradient(155deg, rgba(0, 100, 121, 0.1), rgba(0, 174, 187, 0.16));
  color: var(--petrol);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
}

.trust-panel h2,
.seo-section h2 {
  margin: 0;
  color: var(--ink);
  line-height: 1.05;
}

.trust-panel p:not(.eyebrow),
.section-heading span,
.seo-card p,
.step-list,
.faq-list p,
.distance-table span {
  color: var(--muted);
}

.trust-panel p:not(.eyebrow) {
  max-width: 980px;
  margin: 10px 0 0;
  font-size: 1rem;
  line-height: 1.72;
}

.seo-section {
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px);
}

.section-heading {
  display: grid;
  gap: 8px;
  max-width: 980px;
}

.section-heading p {
  margin: 0;
  color: var(--petrol);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading span {
  max-width: 860px;
  line-height: 1.72;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.seo-card {
  /* Porzellan-Familie 14.07.2026: nicht in der site-bridge-Schwebe-Fassung,
     darum Rand/Radius/Flaeche direkt aus den Tokens. BEWUSST ohne Schatten-Token:
     dieselbe .seo-card ist auf astro-page dunkel (site-bridge 663), und deren
     Dunkel-Override setzt keinen Schatten -> ein Porzellan-Schatten (heller
     Inset-Glanz) wuerde auf die dunklen Karten durchschlagen. Als kompakte
     Rasterkarte bleibt sie darum flach. */
  border: var(--porzellan-border);
  border-radius: var(--porzellan-radius);
  background: var(--porzellan-bg);
  padding: 18px;
}

.seo-card h3 {
  margin: 0 0 8px;
  color: var(--petrol);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.seo-card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.65;
}

.split-section {
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

.step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: landingSteps;
}

.step-list li {
  position: relative;
  min-height: 46px;
  border-bottom: 1px solid rgba(0, 96, 117, 0.1);
  padding: 4px 0 14px 54px;
  line-height: 1.62;
}

.step-list li:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}

.step-list li::before {
  counter-increment: landingSteps;
  content: counter(landingSteps);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 174, 187, 0.22);
}

.step-list b {
  color: var(--ink);
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 14px;
  background: rgba(247, 251, 252, 0.78);
  overflow: hidden;
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 18px;
  color: var(--ink);
  font-weight: 800;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  float: right;
  color: var(--petrol);
  font-weight: 900;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  margin: 0;
  padding: 0 18px 18px;
  line-height: 1.66;
}

.distance-table {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 14px;
  background: linear-gradient(160deg, #12374a, #062233);
  box-shadow: 0 12px 26px rgba(3, 20, 32, 0.1);
}

.distance-table > div {
  display: grid;
  grid-template-columns: minmax(100px, 0.28fr) minmax(0, 1fr);
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 14px 18px;
}

.distance-table > div:last-child {
  border-bottom: 0;
}

.distance-table b {
  color: #7fe0e8;
}

.distance-table span {
  color: rgba(255, 255, 255, 0.86);
}

.detail-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #0a4d68, #00aebb, #3fd6e0);
}

.detail-panel .close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 6px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.detail-panel .close:hover {
  color: var(--ink);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--pink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.detail-panel h2 {
  display: block;
  margin: 0 24px 6px 0;
  font-size: 1.12rem;
}

.detail-body {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  white-space: pre-line;
}

.detail-body.is-rich {
  white-space: normal;
}

.location-analysis {
  display: grid;
  gap: 13px;
  min-width: 0;
  max-width: 100%;
}

.location-hero,
.location-section {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(247, 251, 252, 0.96), rgba(255, 255, 255, 0.96));
  padding: 12px;
}

.location-hero {
  border-color: rgba(0, 174, 187, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.location-hero > span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid rgba(0, 174, 187, 0.22);
  border-radius: 999px;
  background: #fff;
  color: var(--petrol);
  padding: 4px 9px;
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.location-hero p,
.location-section p {
  margin: 8px 0 0;
  line-height: 1.56;
}

.location-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  margin-top: 10px;
}

.location-tags em,
.location-goal-chip {
  max-width: 100%;
  min-width: 0;
  border: 1px solid rgba(0, 96, 117, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-align: left;
  white-space: normal;
}

.location-goal-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: inherit;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.location-goal-chip[data-tooltip]::after,
.location-goal-list li[data-tooltip]::after,
.relocation-goal-list button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: min(260px, 72vw);
  border: 1px solid rgba(0, 100, 121, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(3, 20, 32, 0.14);
  padding: 9px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.location-goal-list li[data-tooltip]::after {
  left: 16px;
  bottom: calc(100% + 10px);
  width: min(320px, calc(100vw - 48px));
  transform: translate(0, 4px);
}

.relocation-goal-list button[data-tooltip] {
  position: relative;
}

.relocation-goal-list button[data-tooltip]::after {
  left: 0;
  bottom: calc(100% + 8px);
  width: min(300px, calc(100vw - 48px));
  transform: translate(0, 4px);
}

.location-goal-chip[data-tooltip]:hover::after,
.location-goal-chip[data-tooltip]:focus-visible::after,
.location-goal-list li[data-tooltip]:hover::after,
.location-goal-list li[data-tooltip]:focus-visible::after,
.relocation-goal-list button[data-tooltip]:hover::after,
.relocation-goal-list button[data-tooltip]:focus-visible::after {
  opacity: 1;
}

.location-goal-chip[data-tooltip]:hover::after,
.location-goal-chip[data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

.location-goal-list li[data-tooltip]:hover::after,
.location-goal-list li[data-tooltip]:focus-visible::after,
.relocation-goal-list button[data-tooltip]:hover::after,
.relocation-goal-list button[data-tooltip]:focus-visible::after {
  transform: translate(0, 0);
}

.location-goal-chip:hover,
.location-goal-chip:focus-visible,
.location-goal-chip.is-selected {
  border-color: rgba(0, 174, 187, 0.34);
  color: var(--petrol);
  box-shadow: 0 4px 12px rgba(0, 174, 187, 0.1);
  transform: translateY(-1px);
  outline: none;
}

.location-section h3 {
  margin: 0 0 9px;
  color: var(--petrol);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.location-section h4 {
  margin: 12px 0 6px;
  color: var(--ink);
  font-size: 0.82rem;
}

.location-line-list,
.location-crossing-list,
.location-mini-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.location-line,
.location-crossing,
.location-mini-list li {
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 9px;
}

.location-line {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 9px;
  cursor: pointer;
}

.location-crossing {
  cursor: pointer;
}

.location-line:hover,
.location-line:focus-visible,
.location-line.is-selected,
.location-crossing:hover,
.location-crossing:focus-visible,
.location-crossing.is-selected,
.location-goal-list li:hover,
.location-goal-list li:focus-visible,
.location-goal-list li.is-selected {
  border-color: rgba(0, 174, 187, 0.3);
  box-shadow: 0 6px 16px rgba(0, 96, 117, 0.1);
  outline: none;
}

.location-line-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--mark), #ffffff 62%);
  border-radius: 10px;
  background: color-mix(in srgb, var(--mark), #ffffff 88%);
  color: var(--mark);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.location-line strong,
.location-crossing strong,
.location-mini-list strong {
  display: block;
  font-size: 0.86rem;
}

.location-line small,
.location-crossing small,
.location-mini-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
}

.location-line p,
.location-crossing p {
  margin-top: 7px;
  color: var(--ink);
  font-size: 0.82rem;
}

.location-line.is-muted {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
}

.location-line.is-muted:hover,
.location-line.is-muted:focus-visible {
  border-color: rgba(0, 96, 117, 0.1);
  box-shadow: none;
}

.location-advanced-section {
  padding: 0;
  overflow: hidden;
}

.location-advanced-section summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 12px;
  cursor: pointer;
  list-style: none;
}

.location-advanced-section summary::-webkit-details-marker {
  display: none;
}

.location-advanced-section summary span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.location-advanced-section summary strong {
  color: var(--petrol);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
}

.location-advanced-section summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 100, 121, 0.12);
  border-radius: 999px;
  background: #fff;
  color: var(--petrol);
  font-weight: 900;
}

.location-advanced-section[open] summary::after {
  content: "−";
}

.location-advanced-section > p,
.location-advanced-section > ul {
  margin-inline: 12px;
}

.location-advanced-section > ul {
  margin-bottom: 12px;
}

.location-reading-note {
  padding-top: 7px;
  border-top: 1px solid rgba(0, 96, 117, 0.08);
}

.location-reading p b {
  color: var(--petrol);
}

.location-focus-card {
  margin-top: 10px;
  border: 1px solid rgba(0, 178, 194, 0.24);
  border-radius: 10px;
  background: rgba(240, 250, 251, 0.72);
  padding: 10px;
}

.location-focus-card strong {
  display: block;
  color: var(--petrol);
  font-size: 0.82rem;
}

.location-focus-card small {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

.location-goal-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.location-goal-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  padding: 10px;
  cursor: pointer;
}

.location-goal-list span {
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.location-goal-list i {
  position: relative;
  display: block;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 96, 117, 0.08);
}

.location-goal-list i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--goal);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--petrol), var(--cyan), var(--cyan-bright));
}

.location-line.is-core,
.location-crossing.is-core {
  border-color: rgba(0, 174, 187, 0.32);
  box-shadow: 0 0 0 3px rgba(0, 174, 187, 0.08);
}

.location-line.is-strong,
.location-crossing.is-strong {
  border-color: rgba(0, 100, 121, 0.3);
  background: rgba(240, 250, 251, 0.82);
}

.location-line.is-subtle {
  border-color: rgba(0, 96, 117, 0.1);
  background: rgba(247, 250, 251, 0.72);
}

.location-line.is-muted,
.location-crossing.is-muted {
  opacity: 0.72;
}

.relocation-chart-shell {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 2px 0 12px;
  overflow: visible;
  transition: filter 0.16s ease;
}

.relocation-chart-shell figcaption {
  max-width: 31rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
  text-align: center;
}

.relocation-chart-svg {
  display: block;
  width: min(100%, 330px);
  aspect-ratio: 1;
  overflow: visible;
}

.relocation-chart-svg [data-select] {
  cursor: pointer;
  outline: none;
}

.relocation-chart-svg [data-select]:focus-visible {
  filter: drop-shadow(0 0 6px rgba(0, 174, 187, 0.58));
}

.relocation-zodiac-segment {
  fill-opacity: 0.38;
  stroke: rgba(3, 20, 32, 0.28);
  stroke-width: 0.42;
}

.relocation-zodiac-segment:hover,
.relocation-zodiac-segment.is-selected,
.relocation-zodiac-segment.is-related {
  fill-opacity: 0.52;
  stroke: rgba(3, 20, 32, 0.62);
  stroke-width: 0.81;
}

.relocation-ring,
.relocation-inner-field {
  fill: none;
  stroke: rgba(31, 42, 50, 0.5);
  stroke-width: 0.48;
}

.relocation-inner-field {
  fill: rgba(247, 251, 252, 0.76);
  stroke: rgba(3, 20, 32, 0.12);
}

.relocation-degree-tick {
  stroke: rgba(31, 42, 50, 0.24);
  stroke-linecap: round;
  stroke-width: 0.16;
}

.relocation-degree-tick.one {
  opacity: 0.16;
}

.relocation-degree-tick.five {
  opacity: 0.32;
  stroke-width: 0.26;
}

.relocation-degree-tick.ten {
  opacity: 0.5;
  stroke-width: 0.39;
}

.relocation-degree-tick.sign-boundary {
  opacity: 1;
  stroke: rgba(3, 20, 32, 0.62);
  stroke-width: 0.5;
}

.relocation-chart-svg:not(.precision-mode) .relocation-degree-tick.one,
.relocation-chart-svg:not(.precision-mode) .relocation-degree-tick.five {
  opacity: 0;
}

.relocation-zodiac-label,
.relocation-planet-label,
.relocation-house-label,
.relocation-axis-marker text {
  dominant-baseline: central;
  text-anchor: middle;
}

.relocation-zodiac-label {
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 8.5px;
  font-weight: 700;
}

.relocation-zodiac-label:hover,
.relocation-zodiac-label.is-selected,
.relocation-zodiac-label.is-related {
  filter: drop-shadow(0 2px 5px rgba(3, 20, 32, 0.2));
}

.relocation-house-line {
  stroke: rgba(31, 42, 50, 0.3);
  stroke-width: 0.45;
}

.relocation-house-node:hover .relocation-house-line,
.relocation-house-node.is-selected .relocation-house-line,
.relocation-house-node.is-related .relocation-house-line {
  stroke: var(--cyan);
  stroke-width: 0.86;
}

.relocation-house-label {
  fill: rgba(31, 42, 50, 0.72);
  font-size: 5px;
  font-weight: 800;
}

.relocation-house-node:hover .relocation-house-label,
.relocation-house-node.is-selected .relocation-house-label,
.relocation-house-node.is-related .relocation-house-label {
  fill: var(--petrol);
}

.relocation-house-cusp-degree {
  dominant-baseline: central;
  fill: rgba(3, 20, 32, 0.62);
  font-size: 5.2px;
  font-weight: 820;
  opacity: 0;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-linejoin: round;
  stroke-width: 1.15px;
  paint-order: stroke fill;
  transition:
    fill 160ms ease,
    opacity 160ms ease;
}

.relocation-house-node:hover .relocation-house-cusp-degree,
.relocation-house-node.is-selected .relocation-house-cusp-degree,
.relocation-house-node.is-related .relocation-house-cusp-degree {
  fill: var(--petrol);
  opacity: 1;
}

.relocation-axis-line {
  stroke-linecap: round;
  stroke-width: 1.1;
  opacity: 0.82;
}

.relocation-axis-line.ac-dc {
  stroke: var(--red);
}

.relocation-axis-line.mc-ic {
  stroke: var(--cyan);
}

.relocation-angle-aspect {
  stroke: var(--aspect);
  stroke-linecap: round;
  stroke-width: 1.15;
  opacity: 0.48;
  transition:
    opacity 0.16s ease,
    stroke-width 0.16s ease;
}

.relocation-angle-aspect.harmony {
  stroke-dasharray: 3 2;
}

.relocation-angle-aspect.tension {
  stroke-width: 1.35;
}

.relocation-angle-aspect:hover,
.relocation-angle-aspect.is-selected {
  stroke-width: 2.2;
  opacity: 0.96;
}

.relocation-axis-marker circle {
  fill: var(--axis);
  stroke: #fff;
  stroke-width: 0.75;
  filter: drop-shadow(0 3px 6px rgba(3, 20, 32, 0.18));
}

.relocation-axis-marker:hover circle,
.relocation-axis-marker.is-selected circle,
.relocation-axis-marker.is-related circle {
  stroke-width: 2.2;
  filter: drop-shadow(0 5px 10px rgba(0, 174, 187, 0.28));
}

.relocation-axis-marker text {
  fill: #fff;
  font-size: 5.2px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

.relocation-axis-marker .relocation-axis-degree-readout {
  display: none;
}

.relocation-planet-guide {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 0.45;
  opacity: 0.34;
}

.relocation-planet-degree-tick {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 0.56;
  opacity: 0.72;
  pointer-events: none;
}

.relocation-planet-degree-tick.minor-body {
  stroke-dasharray: 2 3;
  opacity: 0.48;
}

.relocation-planet-hit {
  fill: transparent;
  pointer-events: all;
}

.relocation-planet-dot {
  fill: transparent;
  stroke: transparent;
  pointer-events: none;
}

.relocation-planet-label {
  fill: currentColor;
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 10.2px;
  font-weight: 400;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-linejoin: round;
  stroke-width: 1.32px;
  paint-order: stroke fill;
  filter: drop-shadow(0 1px 1px rgba(3, 20, 32, 0.16));
}

.relocation-planet-degree-readout {
  dominant-baseline: central;
  fill: currentColor;
  font-size: 6.8px;
  font-weight: 850;
  opacity: 0.78;
  pointer-events: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-linejoin: round;
  stroke-width: 1.35px;
  paint-order: stroke fill;
}

.relocation-planet-degree-readout.is-exact {
  font-size: 6.1px;
  font-weight: 900;
}

.relocation-planet-node.minor-body .relocation-planet-guide {
  stroke-dasharray: 2 4;
  opacity: 0.4;
}

.relocation-planet-node.minor-body .relocation-planet-dot {
  fill: transparent;
  stroke: transparent;
}

.relocation-planet-node.minor-body:not([data-select$="Node"]) .relocation-planet-label {
  font-size: 8.25px;
  opacity: 0.9;
}

.relocation-planet-label.pluto-body-glyph .pluto-glyph-circle,
.relocation-planet-label.pluto-body-glyph .pluto-glyph-crescent,
.relocation-planet-label.pluto-body-glyph .pluto-glyph-stem,
.relocation-planet-label.pluto-body-glyph .pluto-glyph-cross {
  stroke-width: 0.9;
}

.relocation-planet-node:hover .relocation-planet-dot,
.relocation-planet-node.is-selected .relocation-planet-dot,
.relocation-planet-node.is-related .relocation-planet-dot {
  fill: transparent;
  stroke: transparent;
}

.relocation-planet-node.minor-body:hover .relocation-planet-dot,
.relocation-planet-node.minor-body.is-selected .relocation-planet-dot,
.relocation-planet-node.minor-body.is-related .relocation-planet-dot {
  stroke: transparent;
}

.relocation-planet-node:hover .relocation-planet-degree-tick,
.relocation-planet-node.is-selected .relocation-planet-degree-tick,
.relocation-planet-node.is-related .relocation-planet-degree-tick {
  opacity: 0.96;
  stroke-width: 0.75;
}

.relocation-planet-node:hover .relocation-planet-degree-readout,
.relocation-planet-node.is-selected .relocation-planet-degree-readout,
.relocation-planet-node.is-related .relocation-planet-degree-readout {
  opacity: 1;
}

.relocation-chart-svg .relocation-planet-node,
.relocation-chart-svg .relocation-axis-marker,
.relocation-chart-svg .relocation-house-node,
.relocation-chart-svg .relocation-zodiac-label,
.relocation-chart-svg .relocation-angle-aspect {
  transition:
    opacity 0.16s ease,
    filter 0.16s ease;
}

.relocation-chart-svg.has-relocation-selection .is-selected,
.relocation-chart-svg.has-relocation-selection .is-related {
  opacity: 1;
}

.relocation-center-dot {
  fill: var(--ink);
}

.relocation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.relocation-grid div {
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.relocation-grid span {
  display: block;
  color: var(--petrol); /* vorher --cyan: 2,58:1 auf Weiss; Petrol = 6,78:1 (A11y-Audit 12.07.) */
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.relocation-grid strong {
  display: block;
  margin-top: 2px;
}

.relocation-grid .relocation-axis-sign {
  font-size: 0.88rem;
}

.relocation-grid .relocation-axis-degree {
  font-size: 0.7rem;
}

.data-card h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 1rem;
  margin-bottom: 12px;
}

.collapsible-card {
  padding: 0;
  overflow: hidden;
}

.collapsible-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.collapsible-card summary::-webkit-details-marker {
  display: none;
}

.collapsible-card summary h2 {
  margin: 0;
}

.collapsible-card .summary-action {
  border: 1px solid rgba(0, 96, 117, 0.13);
  border-radius: 999px;
  background: #fbfdfe;
  color: var(--petrol);
  padding: 5px 10px;
  font-size: 0.74rem;
  font-weight: 800;
}

.collapsible-card[open] .summary-action::before {
  content: "weniger ";
}

.collapsible-card:not([open]) .summary-action::before {
  content: "";
}

.collapsible-card .aspects-list {
  padding: 0 18px 18px;
}

.data-card h2 span {
  min-width: 26px;
  border-radius: 999px;
  background: #eef7f8;
  color: var(--petrol);
  padding: 2px 8px;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 800;
}

.positions-list,
.aspects-list {
  display: grid;
  gap: 8px;
}

.positions-card .positions-list {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.position-row,
.aspect-row {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 11px;
  border: 1px solid rgba(0, 96, 117, 0.1);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f8fbfc);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.aspect-row {
  grid-template-columns: 30px minmax(0, 1fr) minmax(48px, auto);
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #fbfdfe);
  box-shadow: none;
}

.position-row:hover,
.aspect-row:hover,
.position-row.is-selected,
.aspect-row.is-selected {
  background: #f7fbfc;
  border-color: rgba(0, 174, 187, 0.28);
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba(0, 174, 187, 0.12);
  transform: translateY(-1px);
}

.aspect-row:hover,
.aspect-row.is-selected {
  box-shadow: 0 3px 10px rgba(0, 174, 187, 0.09);
}

.tension-row {
  margin: 0;
  border-left: 2px solid rgba(196, 69, 54, 0.36);
  background: #fff;
}

.aspect-row.harmony {
  border-left: 2px solid rgba(47, 129, 120, 0.34);
}

.aspect-row.tension {
  border-left: 2px solid rgba(196, 69, 54, 0.34);
}

.aspect-row.learning {
  border-left: 2px solid rgba(135, 81, 77, 0.3);
}

.aspect-row.neutral {
  border-left: 2px solid rgba(108, 111, 120, 0.26);
}

.aspect-row.minor-aspect {
  opacity: 0.9;
}

.position-row:first-child,
.aspect-row:first-child {
  border-top: 1px solid transparent;
}

.body-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-size: 1.05rem;
  font-weight: 400;
}

.planet-seal {
  position: relative;
  background: linear-gradient(145deg, #ffffff, #f5fafb);
  border: 1px solid rgba(0, 96, 117, 0.14);
  color: var(--mark);
  box-shadow: 0 2px 8px rgba(3, 20, 32, 0.06);
  font-size: 1.25rem;
}

.planet-seal::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 6px;
  left: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--mark);
  opacity: 0.5;
}

.position-row.minor-body {
  background: linear-gradient(145deg, #ffffff, #fbfdfe);
  border-style: dashed;
}

.position-row.minor-body .planet-seal {
  font-size: 1.05rem;
  color: var(--petrol);
  opacity: 0.86;
}

.aspect-mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  position: relative;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 252, 0.96));
  border: 1px solid rgba(0, 96, 117, 0.11);
  color: var(--mark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
}

.aspect-mark::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 4px;
  left: 6px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--mark);
  opacity: 0.52;
}

.body-copy strong,
.aspect-row strong {
  display: block;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.body-copy span,
.aspect-copy span,
.position-row > span {
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 0;
}

.position-row > span:last-child {
  justify-self: end;
  white-space: nowrap;
}

.aspect-row > span:last-child {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: right;
}

.muted-copy {
  margin: 0;
  color: var(--muted);
}

.error-note {
  padding: 16px;
  color: var(--red);
  font-weight: 800;
}

.legal-note {
  max-width: 1180px;
  margin: -4px auto 28px;
  padding: 0 24px;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}

.legal-note a {
  color: var(--petrol);
  font-weight: 600;
}

.legal-note details {
  display: inline-block;
  max-width: 860px;
}

.legal-note summary {
  cursor: pointer;
  color: var(--petrol);
  font-weight: 700;
}

.legal-note p {
  margin: 8px 0 0;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 12px;
  margin: 0 0 10px;
}

.legal-links a {
  text-decoration: none;
}

.legal-links a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 320px minmax(420px, 1fr);
  }

  .app-shell.astro-page {
    grid-template-columns: 1fr;
  }

  .data-panel {
    grid-column: 1 / -1;
    max-height: none;
  }

  .chart-data {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }

  .positions-card,
  .collapsible-card {
    grid-column: 1 / -1;
  }

  .astro-map-panel {
    grid-column: 1 / -1;
  }
}

/* Keep the transit time controls clear at the compact desktop/tablet width. */
@media (min-width: 761px) and (max-width: 1080px) {
  .app-shell.transit-page .transit-controls {
    grid-template-columns: minmax(150px, 1fr) 150px 112px;
  }

  .app-shell.transit-page .transit-stepper {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 900px) {
  .app-shell,
  .app-shell.astro-page,
  .app-shell.transit-page {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .lunar-phase-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lunar-phase-now {
    grid-column: 1 / -1;
  }

  .control-panel,
  .chart-stage,
  .data-panel,
  .chart-data,
  .app-shell.astro-page .data-panel,
  .app-shell.astro-page .chart-data {
    grid-column: 1 / -1;
  }

  .app-shell.astro-page .control-panel {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .app-shell.astro-page .input-grid {
    grid-template-columns: 1fr;
  }

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

  .control-panel,
  .data-panel,
  .app-shell.astro-page .detail-panel {
    max-height: none;
  }
}

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

  .map-anchor-panel,
  .map-relocation-panel,
  .map-side-stack {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .astro-map-panel.is-fullscreen {
    overflow: auto;
  }

  .astro-map-panel.is-fullscreen .map-workspace {
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: visible;
  }

  .astro-map-panel.is-fullscreen .map-main-column {
    height: auto;
    min-height: 0;
    grid-template-rows: auto auto auto auto;
  }

  .astro-map-panel.is-fullscreen .astro-map {
    height: min(64vh, 720px);
    min-height: min(64vh, 720px);
  }

  .astro-map-panel.is-fullscreen .map-side-stack,
  .astro-map-panel.is-fullscreen .map-anchor-panel,
  .astro-map-panel.is-fullscreen .map-relocation-panel {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  .map-relocation-panel .relocation-chart-svg {
    width: min(100%, 360px);
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .page-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .chart-stage {
    grid-template-rows: auto auto;
  }

  .lunar-phase-panel {
    grid-template-columns: 1fr;
  }

  .lunar-phase-now {
    grid-column: auto;
  }

  .chart-header {
    gap: 12px;
  }

  .chart-tools {
    align-self: stretch;
  }

  .aspect-control-cluster,
  .layout-toggle,
  .minor-body-toggle,
  .transit-planet-picker {
    flex: 0 0 auto;
  }

  .aspect-filter-switch {
    flex-wrap: nowrap;
  }

  .transit-planet-picker {
    position: static;
  }

  .layout-toggle button,
  .aspect-filter-switch button,
  .tool-pill,
  .transit-planet-filter-toggle,
  .minor-body-toggle button,
  .map-aspect-controls button,
  .map-axis-legend button,
  .map-legend-item {
    min-height: 30px;
  }

  .map-axis-legend button,
  .map-legend-item {
    padding: 5px 8px;
    font-size: 0.62rem;
  }

  .map-heading {
    align-items: start;
    flex-direction: column;
  }

  .map-heading-actions {
    max-width: none;
    justify-items: start;
    text-align: left;
  }

  .map-aspect-controls {
    justify-content: flex-start;
  }

  .map-action-buttons {
    justify-content: flex-start;
  }

  .map-heading > span {
    max-width: none;
    text-align: left;
  }

  .astro-map-panel {
    padding: 14px;
  }

  .astro-map.maplibre-map {
    min-height: clamp(430px, 68vh, 540px);
  }

  .astro-map-panel.is-fullscreen {
    gap: 10px;
    padding: 10px;
  }

  .astro-map-panel.is-fullscreen .map-heading {
    gap: 10px;
  }

  .astro-map-panel.is-fullscreen .astro-map {
    height: min(64vh, 560px);
    min-height: min(64vh, 560px);
  }

  .distance-table > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .chart-wrap {
    min-height: 0;
  }

  .transit-controls {
    grid-template-columns: 1fr;
  }

  .transit-stepper {
    grid-template-columns: 1fr 1fr;
    gap: 9px 8px;
  }

  .transit-stepper > input[type="range"] {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .transit-step-group {
    grid-row: 2;
    gap: 4px;
  }

  .transit-step-button {
    height: 36px;
  }

  .transit-step-button.calendar-step {
    width: 42px;
  }

  .transit-step-button.day-step {
    width: 36px;
  }

  .transit-step-group-back {
    justify-self: end;
  }

  .transit-step-group-forward {
    justify-self: start;
  }

  .data-panel {
    max-height: none;
  }

  .seo-grid,
  .split-section {
    grid-template-columns: 1fr;
  }

  .trust-panel {
    grid-template-columns: 1fr;
  }

  .positions-card .positions-list {
    grid-template-columns: 1fr;
  }

  .control-panel {
    max-height: none;
  }
}

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

  .page-hero { min-width: 0; }
  .page-hero h1 { hyphens: auto; overflow-wrap: anywhere; }

  .astro-map-panel {
    gap: 12px;
    border-radius: 14px;
    padding: 10px;
  }

  .map-heading {
    gap: 12px;
  }

  .map-heading-actions,
  .map-search-field,
  .map-action-buttons {
    width: 100%;
  }

  .map-action-buttons {
    gap: 6px;
  }

  .map-action-buttons button {
    flex: 1 1 136px;
    padding-inline: 10px;
  }

  .location-goal-chip[data-tooltip]::after,
  .location-goal-list li[data-tooltip]::after,
  .relocation-goal-list button[data-tooltip]::after {
    left: 0;
    width: min(100%, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    transform: translate(0, 4px);
  }

  .location-goal-chip[data-tooltip]:hover::after,
  .location-goal-chip[data-tooltip]:focus-visible::after,
  .location-goal-list li[data-tooltip]:hover::after,
  .location-goal-list li[data-tooltip]:focus-visible::after,
  .relocation-goal-list button[data-tooltip]:hover::after,
  .relocation-goal-list button[data-tooltip]:focus-visible::after {
    transform: translate(0, 0);
  }
}

@media (orientation: landscape) and (max-height: 900px) and (max-width: 1400px) {
  .astro-map-panel.is-fullscreen {
    gap: 8px;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    padding: clamp(6px, 1.4vw, 12px);
  }

  .astro-map-panel.is-fullscreen .map-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
  }

  .astro-map-panel.is-fullscreen .map-heading h2 {
    font-size: clamp(0.98rem, 2vw, 1.18rem);
    line-height: 1.1;
  }

  .astro-map-panel.is-fullscreen .map-heading p {
    margin-bottom: 1px;
    font-size: 0.62rem;
  }

  .astro-map-panel.is-fullscreen .map-heading-actions {
    grid-template-columns: minmax(150px, 28vw) auto;
    align-items: end;
    gap: 6px 8px;
    max-width: min(58vw, 610px);
    justify-items: end;
    text-align: right;
  }

  .astro-map-panel.is-fullscreen .map-heading-actions > span {
    display: none;
  }

  .astro-map-panel.is-fullscreen .map-aspect-controls {
    justify-content: flex-start;
    gap: 5px;
  }

  .astro-map-panel.is-fullscreen .map-aspect-controls button {
    min-height: 28px;
    padding: 4px 8px 4px 6px;
    font-size: 0.58rem;
  }

  .astro-map-panel.is-fullscreen .map-search-field {
    width: min(34vw, 260px);
  }

  .astro-map-panel.is-fullscreen .map-search-field label {
    font-size: 0.58rem;
  }

  .astro-map-panel.is-fullscreen .map-search-field input {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.74rem;
  }

  .astro-map-panel.is-fullscreen .map-action-buttons {
    align-items: end;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
  }

  .astro-map-panel.is-fullscreen .map-heading-actions button {
    padding: 5px 9px;
    font-size: 0.68rem;
    white-space: nowrap;
  }

  .astro-map-panel.is-fullscreen .map-workspace,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-workspace {
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(224px, 31vw);
    grid-template-rows: minmax(0, 1fr);
    gap: 8px;
    overflow: hidden;
  }

  .astro-map-panel.is-fullscreen .map-main-column {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 5px;
    overflow: hidden;
  }

  .astro-map-panel.is-fullscreen .astro-map,
  .astro-map-panel.is-fullscreen .astro-map.maplibre-map {
    height: 100%;
    min-height: 0;
  }

  .astro-map-panel.is-fullscreen .map-axis-legend,
  .astro-map-panel.is-fullscreen .map-legend {
    max-height: 46px;
    overflow: auto;
    padding-bottom: 2px;
    scrollbar-gutter: stable;
  }

  .astro-map-panel.is-fullscreen .map-note {
    display: none;
  }

  .astro-map-panel.is-fullscreen .map-side-stack,
  .astro-map-panel.is-fullscreen .map-anchor-panel,
  .astro-map-panel.is-fullscreen .map-relocation-panel {
    position: relative;
    top: auto;
    max-height: 100%;
    overflow: auto;
  }

  .astro-map-panel.is-fullscreen .map-side-stack {
    gap: 8px;
    scrollbar-gutter: stable;
  }

  .astro-map-panel.is-fullscreen .detail-panel,
  .astro-map-panel.is-fullscreen .map-anchor-panel,
  .astro-map-panel.is-fullscreen .map-result-summary,
  .astro-map-panel.is-fullscreen .map-relocation-panel {
    padding: 10px;
  }

  .astro-map-panel.is-fullscreen .detail-panel h2,
  .astro-map-panel.is-fullscreen .map-anchor-panel h3,
  .astro-map-panel.is-fullscreen .map-result-summary h3 {
    font-size: 0.98rem;
    line-height: 1.16;
  }

  .astro-map-panel.is-fullscreen .detail-body,
  .astro-map-panel.is-fullscreen .map-anchor-panel span,
  .astro-map-panel.is-fullscreen .map-result-summary span {
    font-size: 0.78rem;
    line-height: 1.38;
  }

  .astro-map-panel.is-fullscreen .map-relocation-panel .relocation-chart-svg {
    width: min(100%, 218px);
  }

}

@media (orientation: landscape) and (max-height: 520px) {
  .astro-map-panel.is-fullscreen {
    grid-template-rows: minmax(0, 1fr);
  }

  .astro-map-panel.is-fullscreen .map-heading {
    display: none;
  }

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

  .astro-map-panel.is-fullscreen .map-main-column {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .astro-map-panel.is-fullscreen .map-axis-legend,
  .astro-map-panel.is-fullscreen .map-legend,
  .astro-map-panel.is-fullscreen .map-side-stack {
    display: none;
  }
}

@media (pointer: coarse) {
  .layout-toggle button,
  .aspect-filter-switch button,
  .tool-pill,
  .minor-body-toggle button,
  .transit-planet-choice,
  .lunation-jump-button,
  .transit-step-button,
  .anchor-actions button,
  .relocation-goal-list button,
  .relocation-side-aspect,
  .location-goal-chip,
  .map-load-retry {
    min-height: 44px;
  }

  .transit-step-button {
    width: 44px;
    height: 44px;
  }

  .transit-step-button.calendar-step {
    width: 50px;
  }

  .transit-controls input[type="range"] {
    height: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 8px;
  }

  .map-aspect-controls {
    gap: 4px;
    padding: 4px;
  }

  .map-aspect-controls button {
    min-height: 32px;
    padding: 5px 10px 5px 8px;
    font-size: 0.65rem;
  }

  .map-axis-legend {
    gap: 6px;
  }

  .map-axis-legend button,
  .map-legend-item {
    min-height: 32px;
    padding: 5px 8px;
    font-size: 0.66rem;
  }

  .map-heading-actions button {
    min-height: 34px;
  }

  .map-zoom-controls button {
    width: 44px;
    height: 44px;
  }

  .detail-panel .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .legal-note a,
  .legal-note summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 2px 4px;
  }
}

@media (max-width: 420px) {
  .transit-stepper {
    grid-template-columns: 1fr;
  }

  .transit-stepper > input[type="range"],
  .transit-step-group {
    grid-column: 1;
  }

  .transit-step-group-back {
    grid-row: 2;
    justify-self: center;
  }

  .transit-step-group-forward {
    grid-row: 3;
    justify-self: center;
  }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .map-aspect-controls button {
    min-height: 30px;
    padding: 4px 8px;
  }
}

/* ============================================================
   ASTRO-GEOGRAFIE — Premium-Instrumente nach Claude-Uebergabe

   Vorhandene Planeten- und Achsensymbole bekommen dieselbe
   dunkle Glasfassung wie die Vorteil-Chips der Startseite.
   Datenfarben und Zustandslogik bleiben dabei unveraendert.
   Die hoehere Spezifitaet ist bewusst gesetzt, weil der spaeter
   geladene Marken-Rahmen nur den Hover ergaenzen soll.
   ============================================================ */

.app-shell.astro-page {
  --map-instrument-fill: linear-gradient(158deg, rgba(22, 30, 56, 0.96), rgba(10, 15, 30, 0.98));
  --map-instrument-border: linear-gradient(
    145deg,
    rgba(127, 233, 244, 0.32),
    rgba(127, 233, 244, 0.14)
  );
  --map-instrument-border-soft: linear-gradient(
    145deg,
    rgba(127, 233, 244, 0.16),
    rgba(127, 233, 244, 0.07)
  );
  --map-instrument-shadow:
    0 5px 14px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
  --map-instrument-shadow-hover:
    0 8px 18px rgba(0, 0, 0, 0.3),
    inset 0 0 10px rgba(127, 233, 244, 0.06);
}

/* Die Legende bleibt klar gegliedert, verzichtet aber auf Pink-Glows und bunte Flaechen. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel {
  border-color: rgba(127, 233, 244, 0.14);
  background: linear-gradient(150deg, rgba(20, 27, 50, 0.96), rgba(9, 13, 28, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel::before {
  background: linear-gradient(90deg, transparent, rgba(127, 233, 244, 0.28), transparent);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group {
  border-color: rgba(127, 233, 244, 0.1);
  background: rgba(7, 11, 24, 0.3);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-group-heading > span {
  border-color: rgba(127, 233, 244, 0.22);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(27, 38, 66, 0.9), rgba(11, 16, 31, 0.94));
  color: rgba(127, 233, 244, 0.82);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-line-picker summary > span {
  color: rgba(127, 233, 244, 0.7);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button {
  border: 1px solid rgba(127, 173, 196, 0.22);
  background: var(--map-instrument-fill);
  color: var(--bridge-text-muted, #b7b8c6);
  box-shadow: var(--map-instrument-shadow);
  opacity: 0.88;
  transition:
    transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.26s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button:focus-visible {
  border-color: rgba(127, 233, 244, 0.46);
  background: linear-gradient(158deg, #1b2642 0%, #121b31 58%, #171a31 100%);
  color: var(--bridge-star, #f4efe4);
  box-shadow: var(--map-instrument-shadow-hover);
  opacity: 1;
  outline: none;
  transform: translateY(-1px);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel button:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel summary:focus-visible {
  outline: 2px solid rgba(127, 233, 244, 0.78);
  outline-offset: 3px;
}

/* Kartenkopf: klare, rechteckige Instrumente statt alter Pills. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button {
  min-height: 40px;
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 0.74rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-fullscreen {
  border-color: rgba(127, 233, 244, 0.46);
  background: linear-gradient(158deg, #192540 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-cyan-hi, #7ff0ff);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.28),
    inset 0 0 10px rgba(127, 233, 244, 0.07);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-fullscreen:hover,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-fullscreen:focus-visible,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-fullscreen[aria-pressed="true"] {
  border-color: rgba(127, 233, 244, 0.64);
  background: linear-gradient(158deg, #1d2b48 0%, #142039 58%, #191c33 100%);
  color: #f4efe4;
  box-shadow: var(--map-instrument-shadow-hover);
}

/* AC, DC, MC, IC: Datenfarbe bleibt in der Linienminiatur erhalten. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button {
  min-height: 54px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  border-radius: 15px;
  padding: 9px 11px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button.is-active,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button[aria-pressed="true"],
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button.is-active,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button[aria-pressed="true"] {
  border-color: rgba(127, 233, 244, 0.4);
  background: linear-gradient(158deg, #19243e 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-star, #f4efe4);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.26),
    inset 0 0 9px rgba(127, 233, 244, 0.055);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button.is-hidden,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-orientation-tools button.is-hidden {
  color: rgba(183, 184, 198, 0.68);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22), inset 0 0 10px rgba(53, 212, 232, 0.05);
  opacity: 0.46;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .axis-line-sample,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .birth-sample,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample {
  position: relative;
  justify-self: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--axis-symbol, #35d4e8) 68%, #7ff0ff);
  border-radius: 9px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.96), rgba(9, 13, 28, 0.96));
  box-shadow: inset 0 0 7px rgba(127, 233, 244, 0.04);
}

.app-shell.astro-page .astro-map-panel .map-filter-panel .axis-line-sample.mc {
  --axis-symbol: #00aebb;
  --axis-rgb: 0, 174, 187;
}

.app-shell.astro-page .astro-map-panel .map-filter-panel .axis-line-sample.ic {
  --axis-symbol: #006075;
  --axis-rgb: 0, 96, 117;
}

.app-shell.astro-page .astro-map-panel .map-filter-panel .axis-line-sample.ac {
  --axis-symbol: #c44536;
  --axis-rgb: 196, 69, 54;
}

.app-shell.astro-page .astro-map-panel .map-filter-panel .axis-line-sample.dc {
  --axis-symbol: #87514d;
  --axis-rgb: 135, 81, 77;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .axis-line-sample::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--axis-rgb), 0.46);
  border-radius: 50%;
  background:
    linear-gradient(rgba(var(--axis-rgb), 0.24), rgba(var(--axis-rgb), 0.24)) center / 1px 100% no-repeat,
    linear-gradient(rgba(var(--axis-rgb), 0.24), rgba(var(--axis-rgb), 0.24)) center / 100% 1px no-repeat;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .axis-line-sample::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--axis-symbol);
  box-shadow:
    0 0 0 3px rgba(var(--axis-rgb), 0.18),
    0 0 7px rgba(var(--axis-rgb), 0.72);
}

.app-shell.astro-page .map-filter-panel .axis-line-sample.mc::after {
  top: 4px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.app-shell.astro-page .map-filter-panel .axis-line-sample.ic::after {
  bottom: 4px;
  left: 50%;
  transform: translate(-50%, 50%);
}

.app-shell.astro-page .map-filter-panel .axis-line-sample.ac::after {
  top: 50%;
  left: 4px;
  transform: translate(-50%, -50%);
}

.app-shell.astro-page .map-filter-panel .axis-line-sample.dc::after {
  top: 50%;
  right: 4px;
  transform: translate(50%, -50%);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-axis-options > button {
  grid-template-columns: 20px minmax(0, 1fr);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .axis-line-sample {
  position: relative;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(var(--axis-rgb), 0.42);
  border-radius: 6px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.96), rgba(9, 13, 28, 0.96));
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .axis-line-sample::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(var(--axis-rgb), 0.42);
  border-radius: 50%;
  background:
    linear-gradient(rgba(var(--axis-rgb), 0.22), rgba(var(--axis-rgb), 0.22)) center / 1px 100% no-repeat,
    linear-gradient(rgba(var(--axis-rgb), 0.22), rgba(var(--axis-rgb), 0.22)) center / 100% 1px no-repeat;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .axis-line-sample::after {
  width: 3px;
  height: 3px;
  box-shadow:
    0 0 0 2px rgba(var(--axis-rgb), 0.16),
    0 0 5px rgba(var(--axis-rgb), 0.66);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button:hover .axis-line-sample,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-axis-options > button:focus-visible .axis-line-sample {
  box-shadow:
    inset 0 0 8px rgba(var(--axis-rgb), 0.08),
    0 0 10px rgba(var(--axis-rgb), 0.2);
}

/* Geburtsort und Kreuzung: Bronze-Rest durch die neue Marke ersetzen. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .birth-sample {
  --axis-symbol: #35d4e8;
  border-color: rgba(53, 212, 232, 0.72);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .birth-sample::before,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .birth-sample::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: rgba(127, 233, 244, 0.82);
  transform: translate(-50%, -50%);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .birth-sample::after {
  width: 2px;
  height: 16px;
  background: rgba(127, 233, 244, 0.82);
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample {
  --axis-symbol: #35d4e8;
  border-color: rgba(53, 212, 232, 0.72);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample::before,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample::after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 999px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample::before {
  inset: 6px;
  border: 1.5px solid rgba(127, 233, 244, 0.76);
  box-shadow: none;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .crossing-sample::after {
  inset: 11px;
  background: rgba(127, 233, 244, 0.74);
  box-shadow: none;
}

/* Planeten: farbige Glyphe in einer ruhigen Mini-Glasfassung. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item {
  min-height: 50px;
  grid-template-columns: 24px minmax(0, 1fr) 7px;
  align-items: center;
  gap: 5px;
  border-radius: 14px;
  padding: 7px;
  font-size: 0.66rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, #7ff0ff);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.98), rgba(9, 13, 28, 0.98));
  color: var(--line);
  font-size: 0.92rem;
  line-height: 1;
  box-shadow: inset 0 0 7px rgba(127, 233, 244, 0.035);
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item.is-active,
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item[aria-pressed="true"] {
  border-color: rgba(127, 233, 244, 0.4);
  background: linear-gradient(158deg, #19243e 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-star, #f4efe4);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.25),
    inset 0 0 9px rgba(127, 233, 244, 0.05);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item.is-hidden {
  color: rgba(183, 184, 198, 0.64);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2), inset 0 0 9px rgba(53, 212, 232, 0.04);
  opacity: 0.44;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-planet-options .map-legend-item small {
  width: 7px;
  min-width: 7px;
  height: 7px;
  margin-left: 0;
}

/* Schnell- und Feinauswahl folgen derselben Formensprache. */
.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button {
  min-height: 38px;
  border-radius: 13px;
  padding: 7px 12px;
  font-size: 0.62rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button[data-map-show-all-lines] {
  border-color: rgba(127, 233, 244, 0.36);
  background: linear-gradient(158deg, #19243e 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-cyan-hi, #7ff0ff);
  box-shadow:
    0 6px 15px rgba(0, 0, 0, 0.25),
    inset 0 0 9px rgba(127, 233, 244, 0.05);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary {
  min-height: 44px;
  border-radius: 14px;
  padding: 8px 11px;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button {
  min-height: 32px;
  border-radius: 9px;
  padding: 4px;
  font-size: 0.55rem;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button.is-active {
  border-color: rgba(127, 233, 244, 0.4);
  background: linear-gradient(158deg, #19243e 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-star, #f4efe4);
  opacity: 1;
}

.app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-planet > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 58%, #7ff0ff);
  border-radius: 8px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.96), rgba(9, 13, 28, 0.96));
  color: var(--line);
  font-family: "Apple Symbols", "Noto Sans Symbols 2", "Segoe UI Symbol", serif;
  font-weight: 400;
  box-shadow: inset 0 0 7px rgba(127, 233, 244, 0.035);
}

/* Pluto bleibt auch in kleinen Kartenchips eine offene, feine Kontur. */
:is(.map-edge-label, .map-legend-item, .map-line-picker)
  :is(.pluto-glyph-circle, .pluto-glyph-crescent, .pluto-glyph-stem, .pluto-glyph-cross) {
  stroke-width: 1.05;
}

:is(.map-summary-line-mark, .location-line-mark, .body-mark, .transit-planet-glyph)
  :is(.pluto-glyph-circle, .pluto-glyph-crescent, .pluto-glyph-stem, .pluto-glyph-cross) {
  stroke-width: 1.15;
}

.app-shell.astro-page .map-optional-divider {
  grid-column: 1 / -1;
  display: block;
  border-top: 1px solid rgba(127, 233, 244, 0.1);
  color: rgba(183, 184, 198, 0.68);
  padding-top: 8px;
  font-size: 0.58rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-shell.astro-page #birth-form .compact-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.56rem;
  font-weight: 620;
  line-height: 1.3;
}

.app-shell.astro-page .calculator-faq-link {
  margin: 16px 0 0;
  color: var(--bridge-text-muted, #b7b8c6);
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: right;
}

.app-shell.astro-page .calculator-faq-link a {
  color: var(--bridge-cyan-hi, #7ff0ff);
  font-weight: 760;
  text-underline-offset: 3px;
}

.app-shell.astro-page .landing-content .axis-seo-card {
  --axis-symbol: #00aebb;
  --axis-rgb: 0, 174, 187;
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--axis-rgb), 0.2);
  background:
    radial-gradient(circle at 46px 42px, rgba(var(--axis-rgb), 0.11), transparent 82px),
    rgba(9, 13, 28, 0.34);
}

.app-shell.astro-page .landing-content .axis-seo-card.axis-ic {
  --axis-symbol: #006075;
  --axis-rgb: 0, 96, 117;
}

.app-shell.astro-page .landing-content .axis-seo-card.axis-ac {
  --axis-symbol: #c44536;
  --axis-rgb: 196, 69, 54;
}

.app-shell.astro-page .landing-content .axis-seo-card.axis-dc {
  --axis-symbol: #87514d;
  --axis-rgb: 135, 81, 77;
}

.app-shell.astro-page .landing-content .axis-seo-card .axis-dial {
  width: 58px;
  height: 58px;
  display: block;
  margin: 0 0 9px;
  overflow: visible;
  color: var(--axis-symbol);
  filter: drop-shadow(0 0 5px rgba(var(--axis-rgb), 0.16));
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.3s ease;
}

.app-shell.astro-page .landing-content .axis-seo-card .dial-ring {
  fill: none;
  stroke: rgba(var(--axis-rgb), 0.46);
  stroke-width: 1;
}

.app-shell.astro-page .landing-content .axis-seo-card .dial-cross {
  stroke: rgba(var(--axis-rgb), 0.22);
  stroke-width: 1;
}

.app-shell.astro-page .landing-content .axis-seo-card .dot-core,
.app-shell.astro-page .landing-content .axis-seo-card .dot-halo,
.app-shell.astro-page .landing-content .axis-seo-card .dot-halo2 {
  fill: currentColor;
}

.app-shell.astro-page .landing-content .axis-seo-card .dot-halo {
  opacity: 0.22;
}

.app-shell.astro-page .landing-content .axis-seo-card .dot-halo2 {
  opacity: 0.1;
}

.app-shell.astro-page .landing-content .axis-seo-card:hover {
  border-color: rgba(var(--axis-rgb), 0.4);
}

.app-shell.astro-page .landing-content .axis-seo-card:hover .axis-dial {
  filter: drop-shadow(0 0 10px rgba(var(--axis-rgb), 0.34));
  transform: translateY(-2px) scale(1.05);
}

@media (max-width: 600px) {
  .app-shell.astro-page .calculator-faq-link {
    text-align: left;
  }
}

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

@media (min-width: 701px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

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

/* ============================================================
   VOLLBILD-LEGENDE: dunkles Instrument-Theme wiederherstellen
   13.07.2026

   Der dunkle Legenden-Hintergrund bleibt im Vollbild erhalten
   (site-bridge.css .map-filter-panel, ungegated). Die Ruhefarben
   der Kacheln und vor allem die dunkle Glyph-Fassung der
   Planetensymbole sind im uebrigen Stylesheet jedoch an
   :not(.is-fullscreen) gebunden und fehlen im Vollbild komplett.
   Ohne sie stehen die mitteltonigen Planetenfarben nackt auf dem
   dunklen Panel und werden unlesbar ("dunkler und anders als in
   der Normalansicht"). Hier werden ausschliesslich Farb-/
   Fuellungswerte - mit denselben Werten wie in der Normalansicht -
   auch fuer .is-fullscreen gesetzt. Die kompakte Vollbild-Geometrie
   (Raster, Groessen, ausgeblendete Sektionen) bleibt unberuehrt.
   Hover-/Fokuszustaende sind bereits ungegated (site-bridge.css)
   und greifen im Vollbild ohnehin. Sichtbar sind im Vollbild nur
   Lebensbereiche (map-axis-options) und Planetenlinien
   (map-planet-options); die uebrigen Sektionen sind ausgeblendet. */

/* Panel-Grundton exakt wie Normalansicht (site-bridge #map-filter-panel);
   die ID im Selektor sichert den Vorrang gegenueber dem ungegateten
   Basiston in site-bridge.css auch im Vollbild. */
.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel {
  border-color: rgba(127, 233, 244, 0.12);
  background: linear-gradient(150deg, rgba(18, 25, 47, 0.96), rgba(9, 13, 28, 0.92));
}

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

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group {
  border-color: rgba(127, 233, 244, 0.085);
  background: rgba(7, 11, 24, 0.24);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-group-heading > span {
  border: 1px solid rgba(127, 233, 244, 0.22);
  background: linear-gradient(155deg, rgba(27, 38, 66, 0.9), rgba(11, 16, 31, 0.94));
  color: rgba(127, 233, 244, 0.82);
}

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

/* Ruhefuellung der Kacheln (Lebensbereiche + Planetenlinien) wie normal;
   box-shadow bewusst none, da site-bridge.css den Schatten auch in der
   Normalansicht entfernt (identische Optik). */
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-axis-options > button,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item {
  border: 1px solid rgba(127, 173, 196, 0.22);
  background: var(--map-instrument-fill);
  color: var(--bridge-text-muted, #b7b8c6);
  box-shadow: none;
  opacity: 0.88;
}

/* Aktive (eingeblendete) Kacheln hervorheben wie in der Normalansicht. */
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-axis-options > button.is-active,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-axis-options > button[aria-pressed="true"],
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item.is-active,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item[aria-pressed="true"] {
  border-color: rgba(127, 233, 244, 0.4);
  background: linear-gradient(158deg, #19243e 0%, #111a2e 58%, #17192e 100%);
  color: var(--bridge-star, #f4efe4);
  opacity: 1;
}

/* Ausgeblendete Kacheln gedimmt wie in der Normalansicht. */
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-axis-options > button.is-hidden,
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item.is-hidden {
  color: rgba(183, 184, 198, 0.66);
  opacity: 0.46;
}

/* Kernfix: farbige Planetenglyphe in dunkler Glasfassung -> wieder lesbar.
   Groesse 20px entspricht der kompakten Normal-Legende (site-bridge
   #astro-map-legend .map-legend-item > span), keine Geometrieaenderung
   des Vollbild-Rasters. */
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item > span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--line) 62%, #7ff0ff);
  border-radius: 7px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.98), rgba(9, 13, 28, 0.98));
  color: var(--line);
  font-size: 0.8rem;
  line-height: 1;
}

/* Kleiner Farbpunkt wie in der Normalansicht ausblenden (redundant zum Glyph). */
.app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel .map-planet-options .map-legend-item small {
  display: none;
}

/* Absicherung gegen schwarzes Durchscheinen des nativen Fullscreen-Backdrops:
   das ~2 % transparente Panel (styles.css .astro-map-panel.is-fullscreen)
   zeigt sonst den UA-schwarzen ::backdrop; hier auf den hellen Seitenton. */
.app-shell.astro-page .astro-map-panel.is-fullscreen::backdrop {
  background: var(--bg, #eaedf1);
}

/* ============================================================
   VOLLBILD-LEGENDE: Normalgeometrie statt Kompaktzeilen
   14.07.2026

   Der Farbblock vom 13.07. bleibt unveraendert. Diese spaetere,
   bewusst ID-spezifische Geometrieschicht neutralisiert nur die
   alten 32px-/18px-Vollbildwerte aus styles.css und der danach
   geladenen site-bridge.css. Kurze Querformate behalten das
   scrollbare Werkzeug-Overlay aus mobile-map.css. */

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

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

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

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

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

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

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

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

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #map-axis-legend .map-axis-options > button {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  gap: 6px;
  border-radius: 11px;
  padding: 6px;
  font-size: 0.7rem;
  line-height: 1.15;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #map-axis-legend .axis-line-sample {
  position: relative;
  justify-self: center;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--axis-symbol, #35d4e8) 68%, #7ff0ff);
  border-radius: 9px;
  background: linear-gradient(155deg, rgba(28, 39, 72, 0.96), rgba(9, 13, 28, 0.96));
  box-shadow: inset 0 0 7px rgba(127, 233, 244, 0.04);
}

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #map-axis-legend .axis-line-sample::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(var(--axis-rgb), 0.46);
  border-radius: 50%;
  background:
    linear-gradient(rgba(var(--axis-rgb), 0.24), rgba(var(--axis-rgb), 0.24)) center / 1px 100% no-repeat,
    linear-gradient(rgba(var(--axis-rgb), 0.24), rgba(var(--axis-rgb), 0.24)) center / 100% 1px no-repeat;
}

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #map-axis-legend .axis-line-sample::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--axis-symbol);
  box-shadow:
    0 0 0 3px rgba(var(--axis-rgb), 0.18),
    0 0 7px rgba(var(--axis-rgb), 0.72);
}

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

.app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #astro-map-legend .map-planet-options .map-legend-item {
  min-height: 40px;
  gap: 5px;
  border-radius: 10px;
  padding: 5px 7px;
  font-size: 0.7rem;
  line-height: 1.15;
}

/* Auch die Normalansicht bleibt bei sichtbaren Planetennamen oberhalb
   der 11px-Untergrenze; die Achsenkacheln enthalten nur ihr 30px-Symbol. */
.app-shell.astro-page #map-filter-panel #map-axis-legend .map-axis-options > button,
.app-shell.astro-page #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 #map-axis-legend .map-axis-options > button::after {
  font-size: 0.7rem;
}

@media (min-width: 701px) and (min-height: 521px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel {
    min-height: min(174px, 32dvh);
    max-height: min(190px, 36dvh);
  }
}

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

@media (max-width: 600px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #astro-map-legend .map-planet-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px), (pointer: coarse) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen #map-filter-panel #astro-map-legend .map-planet-options .map-legend-item {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-action-buttons button,
  .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 {
    transition: none;
  }

  .app-shell.astro-page .landing-content .axis-seo-card .axis-dial {
    transition: none;
  }
}

/* Mobile Formulare: 16px verhindert den automatischen iOS-Zoom beim Fokus. */
@media (max-width: 760px), (pointer: coarse) {
  .input-grid input,
  .input-grid select,
  .transit-controls input[type="date"],
  .transit-controls input[type="time"],
  .map-search-field input {
    font-size: 16px;
    min-height: 48px;
  }
}

/* Intent-Chips „fragen statt erklären" (M5 Phase 1). Nachtfläche wie
   .control-panel; Pills im Muster der .guide-jump-Sprungmarken. Variablen aus
   site-bridge.css (.app-shell.astro-page). Mobile-first, Antworten nach unten. */
.intent-chips {
  display: grid;
  gap: 14px;
  border: 1px solid var(--astro-border);
  border-radius: var(--astro-card-radius, 20px);
  background: var(--astro-surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  padding: 16px;
}
.intent-chips-head p {
  margin: 0 0 4px;
  color: var(--bridge-cyan-bright);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.intent-chips-head h2 {
  margin: 0;
  color: var(--bridge-star);
  font-size: 1.14rem;
  line-height: 1.2;
}
.intent-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.intent-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--astro-border);
  border-radius: 999px;
  background: rgba(53, 212, 232, 0.06);
  color: var(--bridge-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.intent-chip:hover,
.intent-chip:focus-visible {
  color: var(--bridge-cyan-hi);
  border-color: var(--astro-border-strong);
  background: rgba(53, 212, 232, 0.12);
}
.intent-chip[aria-expanded="true"] {
  color: var(--bridge-night);
  border-color: transparent;
  background: linear-gradient(115deg, var(--bridge-cyan), var(--bridge-cyan-bright));
}
/* Gemeinsamer Fokus-Ring der Chip-Familie (C3), Cyan wie .guide-jump. */
.intent-chip:focus-visible {
  outline: 2px solid var(--bridge-cyan-bright);
  outline-offset: 2px;
}
.intent-chip[data-remembered] {
  border-color: var(--astro-border-strong);
}
.intent-answer {
  border-left: 2px solid var(--astro-border-strong);
  border-radius: 6px;
  background: var(--astro-inner-night);
  padding: 12px 14px;
}
.intent-answer p {
  margin: 0;
  color: var(--bridge-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Einladungs-Slot unter der Auswertungs-Kachel (Auftrag D, per Flag AUS). */
.ortskompass-invite {
  display: grid;
  gap: 8px;
  border: 1px solid var(--astro-border-strong);
  border-radius: 14px;
  background: var(--astro-surface);
  padding: 16px;
}
.ortskompass-invite[hidden] {
  display: none;
}
.ortskompass-invite > p {
  margin: 0;
  color: var(--bridge-cyan-bright);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ortskompass-invite h3 {
  margin: 0;
  color: var(--bridge-star);
  font-size: 1.02rem;
  line-height: 1.2;
}
.ortskompass-invite span {
  color: var(--bridge-text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}
.ortskompass-invite-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 2px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(115deg, var(--bridge-cyan), var(--bridge-cyan-bright));
  color: var(--bridge-night);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

/* Die Vorderseiten-Signatur darf im umgedrehten Zustand nicht durch die Rueckseite scheinen. */
#ortskompass-optin .ok-flip.is-flipped .ok-art-name {
  display: none;
}


/* Source: site-bridge.css */
/* ============================================================
   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;
  }
}


/* Source: distance-bands.css */
/* ============================================================
   Gemeinsame Distanzskala fuer Astro-Geografie

   Farbe zeigt die Gewichtung der Liniennaehe, nicht die Qualitaet
   eines Planeten. Textlabel, Balkenlaenge und Linienmuster tragen
   dieselbe Information zusaetzlich ohne Farbe.
   ============================================================ */

:root {
  --distance-core: #0b7f72;
  --distance-core-dark: #65e0bd;
  --distance-core-soft: #e7f5f1;
  --distance-strong: #007a86;
  --distance-strong-dark: #7ff0ff;
  --distance-strong-soft: #e4f6f7;
  --distance-clear: #4f7078;
  --distance-clear-dark: #9acbd0;
  --distance-clear-soft: #f0f4f5;
  --distance-subtle: #94654f;
  --distance-subtle-dark: #ddb29b;
  --distance-subtle-soft: #f7f1ec;
  --distance-outside: #9b544b;
  --distance-outside-dark: #e09a91;
  --distance-outside-soft: #f8efed;
}

.distance-band,
.distance-band-row,
.distance-band-key > span,
.app-shell.astro-page .map-summary-line,
.app-shell.astro-page .map-summary-focus-heading,
.app-shell.astro-page .map-summary-distance-note,
.app-shell.astro-page .map-hover-label,
.app-shell.astro-page .location-line,
.app-shell.astro-page .location-crossing,
.app-shell.astro-page .relocation-side-line {
  --distance-accent: var(--distance-clear);
  --distance-accent-on-dark: var(--distance-clear-dark);
  --distance-surface: var(--distance-clear-soft);
  --distance-strength: 52%;
  --distance-edge: 2px;
}

.distance-band.is-core,
.distance-band-row.is-core,
.distance-band-key > .is-core,
.app-shell.astro-page .map-summary-line.is-core,
.app-shell.astro-page .map-summary-focus-heading.is-core,
.app-shell.astro-page .map-summary-distance-note.is-core,
.app-shell.astro-page .map-hover-label.is-core,
.app-shell.astro-page .location-line.is-core,
.app-shell.astro-page .location-crossing.is-core,
.app-shell.astro-page .relocation-side-line.is-core {
  --distance-accent: var(--distance-core);
  --distance-accent-on-dark: var(--distance-core-dark);
  --distance-surface: var(--distance-core-soft);
  --distance-strength: 100%;
  --distance-edge: 4px;
}

.distance-band.is-strong,
.distance-band-row.is-strong,
.distance-band-key > .is-strong,
.app-shell.astro-page .map-summary-line.is-strong,
.app-shell.astro-page .map-summary-focus-heading.is-strong,
.app-shell.astro-page .map-summary-distance-note.is-strong,
.app-shell.astro-page .map-hover-label.is-strong,
.app-shell.astro-page .location-line.is-strong,
.app-shell.astro-page .location-crossing.is-strong,
.app-shell.astro-page .relocation-side-line.is-strong {
  --distance-accent: var(--distance-strong);
  --distance-accent-on-dark: var(--distance-strong-dark);
  --distance-surface: var(--distance-strong-soft);
  --distance-strength: 78%;
  --distance-edge: 3px;
}

.distance-band.is-clear,
.distance-band-row.is-clear,
.distance-band-key > .is-clear,
.app-shell.astro-page .map-summary-line.is-clear,
.app-shell.astro-page .map-summary-focus-heading.is-clear,
.app-shell.astro-page .map-summary-distance-note.is-clear,
.app-shell.astro-page .map-hover-label.is-clear,
.app-shell.astro-page .location-line.is-clear,
.app-shell.astro-page .location-crossing.is-clear,
.app-shell.astro-page .relocation-side-line.is-clear {
  --distance-accent: var(--distance-clear);
  --distance-accent-on-dark: var(--distance-clear-dark);
  --distance-surface: var(--distance-clear-soft);
  --distance-strength: 52%;
  --distance-edge: 2px;
}

.distance-band.is-subtle,
.distance-band-row.is-subtle,
.distance-band-key > .is-subtle,
.app-shell.astro-page .map-summary-line.is-subtle,
.app-shell.astro-page .map-summary-focus-heading.is-subtle,
.app-shell.astro-page .map-summary-distance-note.is-subtle,
.app-shell.astro-page .map-hover-label.is-subtle,
.app-shell.astro-page .location-line.is-subtle,
.app-shell.astro-page .location-crossing.is-subtle,
.app-shell.astro-page .relocation-side-line.is-subtle {
  --distance-accent: var(--distance-subtle);
  --distance-accent-on-dark: var(--distance-subtle-dark);
  --distance-surface: var(--distance-subtle-soft);
  --distance-strength: 18%;
  --distance-edge: 2px;
}

.distance-band.is-muted,
.distance-band-row.is-muted,
.distance-band-key > .is-muted,
.app-shell.astro-page .map-summary-line.is-muted,
.app-shell.astro-page .map-summary-focus-heading.is-muted,
.app-shell.astro-page .map-summary-distance-note.is-muted,
.app-shell.astro-page .map-hover-label.is-muted,
.app-shell.astro-page .location-line.is-muted,
.app-shell.astro-page .location-crossing.is-muted,
.app-shell.astro-page .relocation-side-line.is-muted {
  --distance-accent: var(--distance-outside);
  --distance-accent-on-dark: var(--distance-outside-dark);
  --distance-surface: var(--distance-outside-soft);
  --distance-strength: 4%;
  --distance-edge: 1px;
}

/* Kompakte Skala in den FAQ-Bereichen. */

.distance-band-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
  margin-top: 15px;
}

.distance-band-key > span {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--distance-accent-on-dark) 28%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--distance-accent-on-dark) 7%, rgba(16, 22, 44, 0.9));
  padding: 10px 10px 9px 13px;
}

.distance-band-key > span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--distance-edge);
  background: var(--distance-accent-on-dark);
}

.distance-band-key > .is-subtle::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.distance-band-key > .is-muted::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.distance-band-key b {
  color: var(--star, #f4efe4);
  font-size: 0.72rem;
  line-height: 1.25;
}

.distance-band-key small {
  color: var(--distance-accent-on-dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.distance-band-key-note {
  margin-top: 11px !important;
  color: var(--text-muted, #b7b8c6) !important;
  font-size: 0.76rem !important;
  line-height: 1.55 !important;
}

/* Distanzzeilen auf der Methodenseite. */

.guide-table .distance-band-row > * {
  transition: background 0.2s ease;
}

.guide-table .distance-band-row:hover > * {
  background: color-mix(in srgb, var(--distance-accent-on-dark) 5%, rgba(12, 18, 38, 0.72));
}

.guide-table .distance-band-row > :first-child {
  position: relative;
  padding-left: 30px;
}

.guide-table .distance-band-row > :first-child::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 14px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent-on-dark);
}

.guide-table .distance-band-row.is-subtle > :first-child::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.guide-table .distance-band-row.is-muted > :first-child::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.distance-band-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--distance-accent-on-dark) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--distance-accent-on-dark) 9%, transparent);
  color: var(--distance-accent-on-dark);
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.distance-band-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

/* Dunkle Lerntabelle auf der Rechnerseite. */

.app-shell.astro-page .distance-table > .distance-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-left: 23px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--distance-accent-on-dark) 8%, transparent),
    transparent 46%
  );
  transition: background 0.2s ease;
}

.app-shell.astro-page .distance-table > .distance-band:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--distance-accent-on-dark) 13%, transparent),
    transparent 55%
  );
}

.app-shell.astro-page .distance-table > .distance-band::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 8px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent-on-dark);
}

.app-shell.astro-page .distance-table > .distance-band.is-subtle::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.app-shell.astro-page .distance-table > .distance-band.is-muted::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.app-shell.astro-page .distance-table .distance-band b,
.app-shell.astro-page .distance-table .distance-band span > strong {
  color: var(--distance-accent-on-dark);
}

.app-shell.astro-page .distance-table .distance-band span > strong {
  margin-right: 0.25em;
  font-weight: 800;
}

/* Sichtbare Ortskarte rechts beziehungsweise unter der Karte. */

.app-shell.astro-page .map-summary-line,
.app-shell.astro-page .map-summary-focus-heading {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 28%, #dde6ea);
  background: linear-gradient(90deg, var(--distance-surface), rgba(255, 255, 255, 0.94) 54%);
}

.app-shell.astro-page .map-summary-line {
  padding-left: 13px;
}

.app-shell.astro-page .map-summary-focus-heading {
  border: 1px solid color-mix(in srgb, var(--distance-accent) 28%, #dde6ea);
  border-radius: 10px;
  padding: 9px 10px 9px 13px;
}

.app-shell.astro-page .map-summary-line::before,
.app-shell.astro-page .map-summary-focus-heading::before,
.app-shell.astro-page .relocation-side-line::before,
.app-shell.astro-page .location-line::before,
.app-shell.astro-page .location-crossing::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 4px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent);
}

.app-shell.astro-page :is(
    .map-summary-line,
    .map-summary-focus-heading,
    .relocation-side-line,
    .location-line,
    .location-crossing
  ).is-subtle::before {
  background: repeating-linear-gradient(to bottom, var(--distance-accent) 0 7px, transparent 7px 11px);
}

.app-shell.astro-page :is(
    .map-summary-line,
    .map-summary-focus-heading,
    .relocation-side-line,
    .location-line,
    .location-crossing
  ).is-muted::before {
  background: repeating-linear-gradient(to bottom, var(--distance-accent) 0 2px, transparent 2px 6px);
}

.app-shell.astro-page .map-summary-line:hover,
.app-shell.astro-page .map-summary-line:focus-visible,
.app-shell.astro-page .map-summary-line.is-selected {
  border-color: color-mix(in srgb, var(--distance-accent) 58%, #bfced5);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--distance-accent) 15%, transparent);
}

.app-shell.astro-page .map-summary-line-distance > small {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--distance-accent) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--distance-surface) 78%, #ffffff);
  color: color-mix(in srgb, var(--distance-accent) 78%, #031420);
  padding: 3px 7px;
  font-size: 0.61rem;
  font-weight: 850;
}

.app-shell.astro-page .map-summary-line-distance > small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--distance-accent);
}

.app-shell.astro-page .map-summary-line-distance::after {
  content: "";
  width: 62px;
  height: 4px;
  justify-self: end;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--distance-accent) 0 var(--distance-strength),
    rgba(80, 75, 93, 0.12) var(--distance-strength) 100%
  );
}

.app-shell.astro-page .map-summary-line.is-subtle .map-summary-line-copy > strong,
.app-shell.astro-page .map-summary-line.is-subtle .map-summary-line-distance > strong,
.app-shell.astro-page .map-summary-line.is-muted .map-summary-line-copy > strong,
.app-shell.astro-page .map-summary-line.is-muted .map-summary-line-distance > strong {
  color: var(--ink, #031420);
}

.app-shell.astro-page .map-summary-distance-note {
  border-color: color-mix(in srgb, var(--distance-accent) 24%, #dde6ea);
  background: linear-gradient(145deg, var(--distance-surface), rgba(255, 255, 255, 0.9));
  box-shadow: inset var(--distance-edge) 0 0 var(--distance-accent);
}

.app-shell.astro-page .map-summary-distance-note h5 {
  color: color-mix(in srgb, var(--distance-accent) 78%, #031420);
}

.app-shell.astro-page .map-hover-label.is-core,
.app-shell.astro-page .map-hover-label.is-strong,
.app-shell.astro-page .map-hover-label.is-clear,
.app-shell.astro-page .map-hover-label.is-subtle,
.app-shell.astro-page .map-hover-label.is-muted {
  max-width: min(92%, 720px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 34%, #bfced5);
  background: color-mix(in srgb, var(--distance-surface) 82%, rgba(255, 255, 255, 0.96));
  color: color-mix(in srgb, var(--distance-accent) 74%, #031420);
  box-shadow:
    inset var(--distance-edge) 0 0 var(--distance-accent),
    0 8px 20px rgba(3, 20, 32, 0.14);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spaeter wieder nutzbare Detail-/Relocation-Zeilen folgen demselben Modell. */

.app-shell.astro-page .relocation-side-line,
.app-shell.astro-page .location-line,
.app-shell.astro-page .location-crossing {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 25%, #dde6ea);
  background: linear-gradient(90deg, var(--distance-surface), rgba(255, 255, 255, 0.94) 58%);
}

.app-shell.astro-page .location-line.is-muted,
.app-shell.astro-page .location-crossing.is-muted {
  opacity: 1;
}

@media (max-width: 640px) {
  .app-shell.astro-page .map-summary-line-distance::after {
    width: 44px;
  }

  .app-shell.astro-page .map-summary-line-distance > small {
    max-width: 18ch;
    white-space: normal;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .distance-table > .distance-band,
  .guide-table .distance-band-row > * {
    transition: none;
  }
}


/* Source: ortskompass.css */
/* Personalisierte Ortskompass-Einladung und Danke-Seite.
   astro-geografie.html lädt site.css nicht. Darum brauchen alle var()-Werte
   feste Fallbacks aus src/styles.css; die Schrift bleibt lokal bei DM Sans.
   Konzept und Änderungshistorie: docs/LEADFUNNEL_INHALTE.md und
   docs/TEXT-ARBEITSSTAND-2026-07-12.md. */

.ortskompass-optin {
  /* Fluss-Karte im astro-page-Grid: spannt über alle Spalten, sitzt direkt am Ergebnis. */
  grid-column: 1 / -1;
  margin: 28px 0 8px;
  scroll-margin-top: 96px;
  padding: 26px 28px 24px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /* Runde 4 (14.07.2026): Weiss oben links laeuft jetzt sichtbar in kuehles Tuerkis
     aus. Die zwei Radiallichter geben dem Verlauf Tiefe, ohne die Porzellan-Tokens
     der uebrigen Kartenfamilie zu veraendern. Bewusst ohne backdrop-filter wegen
     der bekannten Chromium-Flackerklasse. */
  background:
    radial-gradient(ellipse 78% 68% at 8% 4%, rgba(127, 233, 244, 0.16), transparent 68%),
    radial-gradient(ellipse 62% 72% at 100% 100%, rgba(0, 174, 187, 0.07), transparent 72%),
    linear-gradient(150deg, #ffffff 0%, #edf7f9 40%, #c9e3ea 100%);
  border: var(--porzellan-border);
  border-radius: var(--porzellan-radius);
  box-shadow: var(--porzellan-shadow);
  color: var(--ink, #031420);
}

/* Oberer Zier-Faden: Petrol -> Cyan, seitlich eingerückt, an den Rändern ausblendend. */
.ortskompass-optin::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--petrol, #006479) 22%,
    var(--cyan, #00b2c2) 78%,
    transparent
  );
  border-radius: 2px;
}

/* Vor der Berechnung unsichtbar (app.js entfernt hidden nach „Karte berechnen"). */
.ortskompass-optin[hidden] {
  display: none;
}

/* Sanftes Einblenden nur, wenn Bewegung erwünscht ist; reduziert-Motion zeigt sofort. */
@media (prefers-reduced-motion: no-preference) {
  .ortskompass-optin:not([hidden]) {
    animation: ok-fade-in 0.5s ease both;
  }
}

@keyframes ok-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Zweispaltig: Funnel-Text links, Porzellan-Kunstkarte rechts, vertikal zentriert. */
.ok-inner {
  display: flex;
  gap: 26px;
  align-items: center;
}

.ok-content {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.ok-eyebrow {
  margin: 0 0 8px;
  color: var(--petrol, #006479);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Ruhige Anrede: „DM Sans" Medium (TOPLUXURY ist auf dieser Seite nicht geladen). */
.ok-lead {
  margin: 0 0 6px;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 1.34rem;
  line-height: 1.28;
  letter-spacing: 0.01em;
  color: var(--ink, #031420);
  text-wrap: balance;
}

.ok-sub {
  margin: 0 0 16px;
  /* 16.07. (Daniel): weitläufiger setzen, damit die Kachel flacher wird — 74ch bleibt lesbar. */
  max-width: 74ch;
  color: var(--muted, #504b5d);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Formular: keine eigene Optik mehr, nur ein schlanker, klarer Fluss. */
.ortskompass-form {
  margin: 0;
}

.ok-turnstile-note {
  margin: 7px 0 0;
  max-width: 58ch;
  color: #596a74;
  font-size: 0.7rem;
  line-height: 1.4;
}

.ok-turnstile-note a,
.ok-birth-edit {
  color: var(--petrol, #006479);
  text-underline-offset: 2px;
}

.ok-form-open {
  margin-top: 4px;
}

.ok-form-open:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ok-birth-review {
  margin: 16px 0;
  padding: 16px 18px;
  max-width: 760px;
  border: 1px solid rgba(0, 100, 121, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
}

.ok-birth-review h3 {
  margin: 0 0 12px;
  color: #063d46;
  font-size: 1rem;
  font-weight: 600;
}

.ok-birth-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}

.ok-birth-details dt {
  color: #596a74;
  font-size: 0.75rem;
  margin-bottom: 3px;
}

.ok-birth-details dd {
  margin: 0;
  color: #031420;
  font-size: 0.9rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ok-birth-edit {
  display: inline-block;
  padding: 6px 0;
  margin-bottom: 8px;
  font-size: 0.85rem;
}

#birth-form-title { scroll-margin-top: 120px; }

.ok-birth-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  color: #063d46;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

.ok-birth-confirm input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #006479;
}

.ok-birth-confirm input:focus-visible {
  outline: 2px solid #006479;
  outline-offset: 3px;
}

.ok-birth-note {
  margin: 2px 0 0;
  color: #596a74;
  font-size: 0.75rem;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .ok-birth-review { padding: 14px; }
  .ok-birth-details { grid-template-columns: 1fr; gap: 10px; }
}

.ok-form-open[hidden],
.ok-form-open[hidden] + .ok-turnstile-note {
  display: none;
}

.ortskompass-form-panel {
  min-width: 0;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 100, 121, 0.22);
}

/* Schlanker Petrol-Kicker über der Pillen-Eingabe (analog den Panel-Kickern der Seite). */
.ok-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;
  align-items: end;
  max-width: 760px;
}

.ok-email-field {
  min-width: 0;
}

.ok-email-label {
  display: block;
  margin: 0 0 7px;
  color: var(--petrol, #006479);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Das E-Mail-Feld bleibt ruhig und begrenzt; der Submit folgt nach der Einwilligung. */
.ok-email-line {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 420px;
}

.ok-email-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 18px;
  border: 1px solid var(--line, #dde6ea);
  border-radius: 33px;
  background: var(--field-bg, #f6f9fa);
  color: var(--field-text, #090d1c);
  color-scheme: light;
  font: inherit;
  font-size: 16px;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ok-email-input::placeholder {
  color: var(--field-placeholder, #56616d);
  opacity: 1;
}

.ok-email-input:focus {
  outline: none;
  border-color: var(--petrol, #006479);
  background: var(--field-bg-focus, #ffffff);
  box-shadow: 0 0 0 3px rgba(0, 100, 121, 0.12);
}

@media (hover: hover) {
  .ok-email-input:hover:not(:focus):not(:disabled) {
    border-color: var(--petrol, #006479);
    background: var(--field-bg-hover, #fbfdfe);
    box-shadow: 0 4px 14px rgba(0, 100, 121, 0.12);
    transform: translateY(-1px);
  }
}

/* Tastatur-Fokus braucht mehr als den dezenten Maus-Schein (outline:none oben überstimmt sonst). */
.ok-email-input:focus-visible {
  outline: 3px solid var(--cyan, #00b2c2);
  outline-offset: 2px;
}

.ok-email-input:disabled {
  background: var(--field-bg-disabled, #e9f0f2);
  color: var(--field-disabled-text, #606a75);
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}

.ok-email-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);
}

/* Runde 4 (14.07.2026): Eine gemeinsame Petrol-Quelle fuer Primaer-CTAs auf hellen
   Karten. Das Ende #0a7688 haelt Weiss auch mit brightness(1.08) bei 4.70:1. */
.btn-petrol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 12px 24px;
  font-family: inherit;
  background: linear-gradient(100deg, #0a4d68 0%, #006479 45%, #0a7688 100%);
  color: #fff;
  border: none;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  font-weight: 600;
  font-size: 0.74rem;
  border-radius: 33px;
  transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn-petrol:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 14px rgba(0, 96, 117, 0.28);
  transform: translateY(-1px);
}

.btn-petrol:focus-visible {
  outline: 3px solid var(--petrol, #006479);
  outline-offset: 2px;
}

.btn-petrol:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  filter: none;
  transform: none;
}

/* FOKUS-Auswahl: seit 16.07.2026 EIN natives Select im Look der Formfelder
   (.ok-email-input als Vorbild), statt der frueheren Radio-Pillen. Der Pfeil ist
   ein eingebetteter Data-URI (Petrol), kein externer Request. */
.ortskompass-fokus {
  min-width: 0;
  margin: 0;
}

.ok-fokus-label {
  display: block;
  margin: 0 0 8px;
  color: var(--petrol, #006479);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ok-fokus-select {
  display: block;
  width: min(100%, 340px);
  padding: 11px 46px 11px 18px;
  border: 1px solid var(--line, #dde6ea);
  border-radius: 33px;
  background-color: var(--field-bg, #f6f9fa);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23006479' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  color: var(--field-text, #090d1c);
  color-scheme: light;
  font: inherit;
  font-size: 16px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ok-fokus-select:focus {
  outline: none;
  border-color: var(--petrol, #006479);
  background-color: var(--field-bg-focus, #ffffff);
  box-shadow: 0 0 0 3px rgba(0, 100, 121, 0.12);
}

@media (hover: hover) {
  .ok-fokus-select:hover:not(:focus) {
    border-color: var(--petrol, #006479);
    background-color: var(--field-bg-hover, #fbfdfe);
    box-shadow: 0 4px 14px rgba(0, 100, 121, 0.12);
  }
}

.ok-fokus-select:focus-visible {
  outline: 3px solid var(--cyan, #00b2c2);
  outline-offset: 2px;
}

/* Hinweis + Datenschutz: AA-Farbe mit Reserve auch auf dem kraeftigsten Mischton
   #bbdfe7 aus Endverlauf + rechtem Radiallicht (4.75:1). */
.ortskompass-hinweis {
  margin: 10px 0 0;
  /* 16.07. (Daniel): weitläufiger setzen, siehe .ok-sub. */
  max-width: 74ch;
  color: #4d5e69;
  font-size: 0.74rem;
  line-height: 1.5;
}

.ok-legal-footnote {
  margin: 12px 0 0;
  padding-top: 8px;
  max-width: 760px;
  border-top: 1px solid rgba(0, 100, 121, 0.16);
  color: #4d5e69;
  font-size: 0.72rem;
  line-height: 1.45;
}

.ok-legal-footnote a {
  color: var(--petrol, #006479);
  text-underline-offset: 2px;
}

.ok-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ok-turnstile {
  width: min(100%, 420px);
  min-height: 65px;
  margin: 0;
}

.ok-form-status {
  grid-area: status;
  min-height: 1.5em;
  margin: 6px 0 0;
  color: #4d5e69;
  font-size: 0.78rem;
  line-height: 1.45;
}

.ok-action-row {
  display: grid;
  grid-template-columns: minmax(300px, 420px) max-content;
  grid-template-areas:
    "turnstile submit"
    "status status";
  gap: 0 14px;
  align-items: center;
  max-width: 760px;
  margin-top: 12px;
}

.ok-action-row .ok-turnstile {
  grid-area: turnstile;
}

.ok-action-row .ok-submit {
  grid-area: submit;
  margin: 0;
}

/* Zweitweg: abgesetzt mit feiner Trennlinie – gibt der Karte unten einen sauberen Abschluss. */
.ok-alt {
  margin: 16px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line, #dde6ea);
  color: #4d5e69;
  font-size: 0.86rem;
}

.ok-content:has(.ortskompass-form-panel:not([hidden])) > .ok-alt {
  display: none;
}

/* Porzellan-Kunstkarte (rechte Spalte): schwebt mit mehrstufigem 3D-Schatten + Hover-Lift. */
.ok-art {
  flex: 0 0 225px;
  width: 225px;
  height: 300px;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  align-self: center;
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  perspective: 1200px;
  box-shadow:
    0 1px 2px rgba(3, 20, 32, 0.08),
    0 12px 28px rgba(3, 20, 32, 0.14),
    0 30px 60px rgba(3, 20, 32, 0.11),
    0 46px 86px rgba(3, 20, 32, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ok-art:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(3, 20, 32, 0.09),
    0 18px 38px rgba(3, 20, 32, 0.18),
    0 38px 72px rgba(3, 20, 32, 0.15),
    0 58px 104px rgba(3, 20, 32, 0.1);
}

.ok-art:focus-visible {
  outline: 3px solid var(--cyan, #00b2c2);
  outline-offset: 4px;
}

/* Flip-Buehne nach dem HD-Rechner: Vorder- und Rueckseite liegen deckungsgleich,
   die Guilloche-Seite ist vorab um 180 Grad gedreht. */
.ok-flip {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ok-flip.is-flipped {
  transform: rotateY(180deg);
}

.ok-flip-front,
.ok-flip-back {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border-radius: inherit;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.ok-flip-front {
  padding: 9px;
  border: var(--porzellan-border);
  background: var(--porzellan-bg);
  justify-content: flex-end;
}

.ok-flip-back {
  padding: 9px;
  border: var(--porzellan-border);
  background: var(--porzellan-bg);
  justify-content: center;
  transform: rotateY(180deg);
}

.ok-flip-field {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(165deg, #0a2635 0%, #051a28 55%, #031420 100%);
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--ok-sign-color, #00b2c2) 34%, transparent) 0,
      color-mix(in srgb, var(--ok-sign-color, #00b2c2) 34%, transparent) 1px,
      transparent 1px,
      transparent 9px
    ),
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--ok-sign-color, #00b2c2) 22%, transparent),
      transparent 60%
    ),
    linear-gradient(165deg, #0a2635 0%, #051a28 55%, #031420 100%);
}

.ok-flip-field::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid color-mix(in srgb, var(--ok-sign-color, #00b2c2) 58%, #ffffff);
  border-radius: 4px;
  opacity: 0.62;
  pointer-events: none;
}

.ok-flip-emblem {
  position: relative;
  width: 55%;
  aspect-ratio: 1 / 1;
  border: 1px solid color-mix(in srgb, var(--ok-sign-color, #00b2c2) 48%, #ffffff);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef5f7 100%);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.35),
    inset 0 1px 3px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ok-flip-emblem img {
  display: block;
  width: 70%;
  height: 70%;
  object-fit: contain;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .ok-email-input,
  .ok-fokus-select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .ok-email-input:hover,
  .ok-art:hover {
    transform: none;
  }

  .ok-art {
    transition: box-shadow 0.18s ease;
  }

  .ok-flip {
    transition: none;
  }
}

/* Das Artwork füllt die Kartenfront; der Porzellanrand entspricht der Rückseite. */
.ok-glyph {
  position: absolute;
  inset: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: radial-gradient(circle at 50% 40%, #ffffff 0%, #eef5f7 100%);
  box-shadow:
    inset 0 0 0 1px rgba(3, 20, 32, 0.08),
    0 1px 4px rgba(3, 20, 32, 0.08);
  font-size: 6rem;
  line-height: 1;
  color: var(--petrol, #006479);
}

.ok-glyph img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Zweistufige Kartensignatur: feine Typografie auf einer weich auslaufenden Lesekante. */
.ok-art-name {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 38px 10px 9px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(
    180deg,
    rgba(3, 20, 32, 0) 0%,
    rgba(3, 20, 32, 0.18) 42%,
    rgba(3, 20, 32, 0.7) 100%
  );
  box-shadow: none;
  color: #ffffff;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.86);
  pointer-events: none;
}

.ok-art-label {
  display: block;
  margin-bottom: 2px;
  color: rgba(223, 247, 249, 0.9);
  font-size: 0.4rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.ok-art-name [data-invite-signature] {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Schlanke Auffang-Zeile am Artikelende (kein zweites Formular). */
.ortskompass-sekundaer {
  grid-column: 1 / -1;
  margin: 24px auto 4px;
  max-width: 640px;
  font-size: 0.92rem;
  text-align: center;
  color: var(--text-muted, #b8b7c6);
}

.ortskompass-sekundaer a {
  color: var(--neon, #35d4e8);
  font-weight: 600;
}

/* Danke-Seite */

.ortskompass-danke-cta {
  margin-top: 26px;
  text-decoration: none;
}

/* Mobil: einspaltig, Kunstkarte NICHT ausblenden. 16.07.2026 (Daniel): Karte rueckt
   per order:-1 GANZ NACH OBEN (kompakt, zentriert), erst danach Anrede, Formular und
   Datenschutz-/Zweitweg-Text. aspect-ratio ist Pflicht, weil .ok-flip-front absolut
   positioniert ist (sonst Höhe 0). */
@media (max-width: 700px) {
  .ok-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .ok-art {
    order: -1;
    align-self: center;
    flex: 0 0 auto;
    width: 156px;
    height: auto;
    aspect-ratio: 225 / 300;
    margin: 0 auto 14px;
  }

  .ok-inner:has(.ortskompass-form-panel:not([hidden])) .ok-art {
    width: 120px;
    margin-bottom: 8px;
  }
}

@media (max-width: 620px) {
  .ok-content:has(.ortskompass-form-panel:not([hidden])) > .ok-sub {
    display: none;
  }

  .ok-fields,
  .ok-action-row {
    grid-template-columns: 1fr;
  }

  .ok-action-row {
    grid-template-areas:
      "turnstile"
      "status"
      "submit";
    gap: 0;
  }

  .ok-action-row .ok-submit {
    width: 100%;
    margin-top: 8px;
  }
}

@media (max-width: 520px) {
  .ortskompass-optin {
    padding: 22px 18px 20px;
  }

  .ok-glyph {
    width: auto;
    height: auto;
    font-size: 5.2rem;
  }

  /* Feld + Button stapeln voll breit, bleiben bedienbar; das Select folgt voll breit. */
  .ok-email-input,
  .ok-email-btn {
    flex: 1 1 100%;
  }

  .ok-fokus-select {
    width: 100%;
  }

  .ok-submit {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .ok-turnstile {
    min-height: 140px;
  }
}

/* V2-Personalisierung (Betreiber-Entscheid 23.07.2026): sichtbare Karten-Kennwerte
   in der Einladungskarte. Feste Farbwerte der Hellcyan-Kachel-Palette, damit die
   Zeile auch ohne site.css-Tokens auf den Karten-Seiten korrekt rendert. */
.ok-profil {
  margin: 2px 0 14px;
}

.ok-profil-label {
  display: block;
  margin: 0 0 6px;
  color: #0a7c8b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ok-profil-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ok-profil-badge {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #cfeef2;
  border-radius: 999px;
  background: #eef9fb;
  color: #063d46;
  font-size: 13px;
  font-weight: 600;
}


/* Source: site-menu.css */
/* ============================================================
   Mobile Vollbild-Navigation

   Uebernimmt den Klappeffekt der Human-Design-Seite: schlanker
   Header, Drei-Linien-Schalter oben rechts, X-Zustand und eine
   bildschirmfuellende Linkliste. Die Optik bleibt in der
   Nacht-/Cyan-Sprache dieser Website.

   Progressive Enhancement: Alle mobilen Regeln greifen erst,
   nachdem site-menu.js erfolgreich initialisiert wurde.
   ============================================================ */

.site-menu-toggle,
.site-menu-panel {
  display: none;
}

/* Die bestehenden Nav-Regeln setzen teilweise selbst display:flex bzw.
   display:inline-flex. Deshalb muss das native hidden-Verhalten explizit
   staerker bleiben — fuer das Quellmenue und spaeter startende Seiten. */
html.site-menu-enhanced .site-nav[hidden],
html.site-menu-enhanced .bridge-nav[hidden],
html.site-menu-enhanced .site-nav [hidden],
html.site-menu-enhanced .bridge-nav [hidden],
html.site-menu-enhanced .site-menu-nav [hidden] {
  display: none !important;
}

@media (max-width: 820px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  /* src/styles.css nutzt auf den Werkzeugseiten overflow-x:hidden auf
     body. Dadurch wird body zum Scrollcontainer und der sticky Header
     scrollt weg. clip verhindert nur den Ueberstand, ohne Sticky zu
     zerbrechen. */
  html.site-menu-enhanced body {
    overflow-x: clip;
  }

  html.site-menu-enhanced .site-header,
  html.site-menu-enhanced .bridge-header {
    isolation: isolate;
  }

  html.site-menu-enhanced .site-header .wrap,
  html.site-menu-enhanced .bridge-header-inner {
    min-height: 60px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 18px;
  }

  html.site-menu-enhanced .wordmark,
  html.site-menu-enhanced .bridge-wordmark {
    position: relative;
    z-index: 822;
    min-width: 0;
    font-size: 1rem;
  }

  html.site-menu-enhanced .site-menu-toggle {
    position: relative;
    z-index: 823;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    margin: 0 -9px 0 0;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #35d4e8;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  html.site-menu-enhanced .site-menu-toggle:hover {
    color: #7ff0ff;
    background: rgba(53, 212, 232, 0.08);
  }

  html.site-menu-enhanced .site-menu-toggle:focus-visible {
    outline: 3px solid #ff5ec4;
    outline-offset: 1px;
  }

  .site-menu-icon {
    position: relative;
    display: block;
    width: 30px;
    height: 24px;
  }

  .site-menu-icon > span {
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition:
      top 240ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 160ms ease;
  }

  .site-menu-icon > span:nth-child(1) { top: 3px; }
  .site-menu-icon > span:nth-child(2) { top: 11px; }
  .site-menu-icon > span:nth-child(3) { top: 19px; }

  .site-menu-toggle[aria-expanded="true"] .site-menu-icon > span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
  }

  .site-menu-toggle[aria-expanded="true"] .site-menu-icon > span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.35);
  }

  .site-menu-toggle[aria-expanded="true"] .site-menu-icon > span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
  }

  html.site-menu-enhanced .site-menu-panel {
    position: fixed;
    z-index: 800;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: block;
    overflow: hidden auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    color: #e8e6df;
    background:
      radial-gradient(1px 1px at 13% 23%, rgba(244, 239, 228, 0.72) 50%, transparent 52%),
      radial-gradient(1px 1px at 31% 9%, rgba(244, 239, 228, 0.42) 50%, transparent 52%),
      radial-gradient(1.5px 1.5px at 58% 27%, rgba(53, 212, 232, 0.62) 50%, transparent 52%),
      radial-gradient(1px 1px at 78% 15%, rgba(244, 239, 228, 0.52) 50%, transparent 52%),
      radial-gradient(1px 1px at 89% 41%, rgba(255, 94, 196, 0.38) 50%, transparent 52%),
      radial-gradient(ellipse 110% 78% at 50% -14%, #182041 0%, #090d1c 68%);
    transition:
      opacity 240ms ease,
      visibility 240ms step-end;
  }

  html.site-menu-enhanced .site-menu-panel::before,
  html.site-menu-enhanced .site-menu-panel::after {
    content: "";
    position: fixed;
    z-index: -1;
    right: clamp(-190px, -29vw, -96px);
    bottom: clamp(-190px, -22vw, -92px);
    width: clamp(290px, 78vw, 470px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
  }

  html.site-menu-enhanced .site-menu-panel::before {
    border: 1px solid rgba(53, 212, 232, 0.2);
    box-shadow:
      0 0 0 34px rgba(53, 212, 232, 0.035),
      0 0 0 72px rgba(255, 46, 136, 0.025),
      0 0 80px rgba(53, 212, 232, 0.08);
  }

  html.site-menu-enhanced .site-menu-panel::after {
    width: clamp(190px, 51vw, 310px);
    right: clamp(-122px, -18vw, -62px);
    bottom: clamp(-114px, -14vw, -54px);
    border: 1px dashed rgba(255, 94, 196, 0.2);
  }

  html.site-menu-enhanced .site-menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 240ms ease,
      visibility 0s step-start;
  }

  html.site-menu-enhanced .site-menu-panel[hidden] {
    display: none !important;
  }

  .site-menu-panel-inner {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding:
      clamp(100px, 15vh, 132px)
      max(24px, env(safe-area-inset-right))
      max(42px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
  }

  .site-menu-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .site-menu-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    max-width: min(100%, 390px);
    padding: 10px 18px;
    color: #e8e6df;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 4.4vw, 1.16rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.075em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    touch-action: manipulation;
    transition:
      color 180ms ease,
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 220ms ease;
  }

  .site-menu-nav a::after {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 7px;
    left: 18px;
    height: 1px;
    background: linear-gradient(90deg, #35d4e8, #ff2e88);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .site-menu-nav a:hover,
  .site-menu-nav a:focus-visible,
  .site-menu-nav a[aria-current="page"],
  .site-menu-nav a[aria-current="location"],
  .site-menu-nav a.is-active {
    color: #35d4e8;
    text-decoration: none;
  }

  .site-menu-nav a:hover::after,
  .site-menu-nav a:focus-visible::after,
  .site-menu-nav a[aria-current="page"]::after,
  .site-menu-nav a[aria-current="location"]::after,
  .site-menu-nav a.is-active::after {
    transform: scaleX(1);
  }

  .site-menu-nav a:focus-visible {
    outline: 3px solid #ff5ec4;
    outline-offset: 2px;
    border-radius: 6px;
  }

  .site-menu-panel:not(.is-open) .site-menu-nav a {
    opacity: 0;
    transform: translateY(-8px);
  }

  .site-menu-panel.is-open .site-menu-nav a {
    opacity: 1;
    transform: translateY(0);
  }

  .site-menu-panel.is-open .site-menu-nav a:nth-child(2) { transition-delay: 24ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(3) { transition-delay: 48ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(4) { transition-delay: 72ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(5) { transition-delay: 96ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(6) { transition-delay: 120ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(7) { transition-delay: 144ms; }
  .site-menu-panel.is-open .site-menu-nav a:nth-child(8) { transition-delay: 168ms; }

  html.site-menu-open,
  html.site-menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  html.site-menu-open .site-header,
  html.site-menu-open .bridge-header {
    z-index: 820;
    background: #090d1c;
    border-bottom-color: rgba(53, 212, 232, 0.14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 360px) {
  html.site-menu-enhanced .wordmark,
  html.site-menu-enhanced .bridge-wordmark {
    gap: 6px;
    font-size: 0.92rem;
  }

  .site-menu-panel-inner {
    padding-top: 90px;
  }

  .site-menu-nav a {
    min-height: 51px;
    font-size: 0.98rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .site-menu-panel-inner {
    padding-top: 70px;
    padding-bottom: 20px;
  }

  .site-menu-nav a {
    min-height: 44px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.92rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-icon > span,
  .site-menu-panel,
  .site-menu-nav a,
  .site-menu-nav a::after {
    transition: none !important;
  }
}

/* ============================================================
   Ruhige Navigation

   Der aktuelle Menüpunkt wird über Farbe und Schriftgewicht
   markiert. Die früheren Cyan-Pink-Unterstreichungen entfallen
   auf Desktop und Mobil; Hover und Tastaturfokus bleiben erhalten.
   ============================================================ */

.site-nav a::after,
.bridge-nav a::after,
.site-menu-nav a::after {
  content: none;
  display: none;
}

.site-nav a[aria-current="page"],
.site-nav a[aria-current="location"],
.site-nav a.is-active {
  color: var(--star, #f4efe4);
  font-weight: 650;
}

.bridge-nav a[aria-current="page"],
.bridge-nav a[aria-current="location"],
.bridge-nav a.is-active {
  color: var(--bridge-star, #f4efe4);
  font-weight: 700;
}

.site-menu-nav a[aria-current="page"],
.site-menu-nav a[aria-current="location"],
.site-menu-nav a.is-active {
  font-weight: 700;
}

/* ============================================================
   Sanftes Leuchten unter der Kopfleiste (Daniel, 12.07.2026)

   Die harte Unterkante beider Header-Varianten weicht einer
   zarten Cyan-Linie mit weichem Schein. Zentral hier, weil
   site-menu.css auf allen Seiten als letztes Stylesheet laedt.
   ============================================================ */

.site-header,
.bridge-header {
  border-bottom: 1px solid rgba(53, 212, 232, 0.16);
  box-shadow: 0 6px 24px rgba(53, 212, 232, 0.12);
}

/* ============================================================
   Orientierung-Mega-Panel (Desktop) — 13.07.2026, Wunsch Daniel
   Vorbild: „Reading buchen" auf daniel-bayer.net — headerbreites
   Panel, drei Spalten mit Versalien-Titel + Trennlinie.
   Markup wird von site-menu.js in die Desktop-Nav injiziert:
   .nav-dropdown > a + button.nav-dropdown-toggle
   + div.nav-dropdown-menu > .nav-dropdown-gruppe (p.titel + ul)
   ============================================================ */

/* Anker: Das Panel positioniert sich an der ganzen Header-Zeile,
   nicht am einzelnen Nav-Punkt (darum .nav-dropdown static). */
.site-header .wrap,
.bridge-header-inner {
  position: relative;
}

.nav-dropdown {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #b8b7c6;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-dropdown-toggle svg {
  transition: transform 0.2s ease;
}

.nav-dropdown-toggle:hover,
.nav-dropdown-toggle:focus-visible {
  color: #35d4e8;
  background: rgba(53, 212, 232, 0.08);
}

.nav-dropdown-toggle:focus-visible {
  outline: 2px solid #35d4e8;
  outline-offset: 2px;
}

.nav-dropdown.is-open .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

/* Panel = dunkle Glasflaeche, darin drei durchlaessige Kacheln (Daniel
   13.07. nachts). BEWUSST ohne backdrop-filter: der loeste am 13.07. im
   sticky Header Chromium-Flackern aus (siehe UEBERGABE) — die Glas-Optik
   kommt stattdessen aus geschichteten rgba-Verlaeufen + Lichtkanten. */
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
  padding: 16px;
  background: linear-gradient(180deg, rgba(16, 23, 47, 0.985), rgba(9, 13, 28, 0.99));
  border: 1px solid rgba(53, 212, 232, 0.18);
  border-radius: 20px;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.45),
    0 0 22px rgba(53, 212, 232, 0.08),
    inset 0 1px 0 rgba(244, 239, 228, 0.05);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* Unsichtbare Hover-Bruecke ueber die Luecke zwischen Nav-Punkt und Panel,
   damit das Menue beim Ueberqueren nicht zuklappt (Weg: Nav-Punkt ->
   Header-Unterkante -> Panel; Rest deckt die Schliessverzoegerung ab). */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -26px;
  left: 0;
  right: 0;
  height: 26px;
}

.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Durchlaessige Glas-Kachel je Gruppe: transparente Verlaufsfuellung,
   feiner Rahmen, Lichtkante oben — der Panelgrund scheint durch. */
.nav-dropdown-gruppe {
  min-width: 0;
  padding: 16px 16px 12px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(53, 212, 232, 0.07),
    rgba(53, 212, 232, 0.02) 55%,
    rgba(255, 94, 196, 0.025)
  );
  border: 1px solid rgba(53, 212, 232, 0.13);
  box-shadow: inset 0 1px 0 rgba(244, 239, 228, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.nav-dropdown-gruppe:hover {
  border-color: rgba(53, 212, 232, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(244, 239, 228, 0.08),
    0 0 18px rgba(53, 212, 232, 0.07);
}

.nav-dropdown-gruppen-titel {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #35d4e8;
  opacity: 0.9;
}

.nav-dropdown-gruppe ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-dropdown-gruppe li + li {
  margin-top: 2px;
}

.nav-dropdown-menu a {
  display: block;
  padding: 8px 10px;
  margin: 0 -6px;
  border-radius: 9px;
  color: #e8e6df;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible {
  color: #fff;
  background: rgba(53, 212, 232, 0.12);
}

.nav-dropdown-menu a[aria-current="page"] {
  color: #35d4e8;
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-toggle svg,
  .nav-dropdown-menu {
    transition: none;
  }
}

/* Auf Mobilviewports uebernimmt das Vollbildmenue; Dropdown-Bauteile
   der Desktop-Nav dort hart ausblenden. */
@media (max-width: 820px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .nav-dropdown-toggle,
  .nav-dropdown-menu {
    display: none !important;
  }
}

/* ============================================================
   Orientierung mobil: Akkordeon-Karte (13.07.2026, Wunsch Daniel)
   Vorbild: Mobilmenü daniel-bayer.net — Menüpunkt klappt eine
   weich gerundete Karte mit den Themen-Gruppen auf.
   Markup von site-menu.js im Mobilpanel:
   .menu-akkordeon > button.menu-akkordeon-toggle
   + div.menu-akkordeon-panel > .menu-akkordeon-gruppe (p.titel + ul)
   ============================================================ */
@media (max-width: 820px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 980px) {
  .menu-akkordeon {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .menu-akkordeon-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    max-width: min(100%, 390px);
    padding: 10px 18px;
    border: 0;
    background: transparent;
    color: #e8e6df;
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1rem, 4.4vw, 1.16rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition:
      color 180ms ease,
      transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
      opacity 220ms ease;
  }

  .menu-akkordeon-toggle svg {
    flex: 0 0 auto;
    transition: transform 200ms ease;
  }

  .menu-akkordeon-toggle:hover,
  .menu-akkordeon-toggle:focus-visible,
  .menu-akkordeon-toggle.is-active,
  .menu-akkordeon.is-open .menu-akkordeon-toggle {
    color: #35d4e8;
  }

  .menu-akkordeon.is-open .menu-akkordeon-toggle svg {
    transform: rotate(180deg);
  }

  .menu-akkordeon-toggle:focus-visible {
    outline: 3px solid #ff5ec4;
    outline-offset: 2px;
    border-radius: 6px;
  }

  .site-menu-panel:not(.is-open) .menu-akkordeon-toggle {
    opacity: 0;
    transform: translateY(-8px);
  }

  .site-menu-panel.is-open .menu-akkordeon-toggle {
    opacity: 1;
    transform: translateY(0);
  }

  .menu-akkordeon-panel {
    width: min(100%, 360px);
    margin: 4px 0 12px;
    padding: 4px 16px 18px;
    border-radius: 18px;
    background: rgba(53, 212, 232, 0.05);
    border: 1px solid rgba(53, 212, 232, 0.16);
  }

  .menu-akkordeon-gruppen-titel {
    margin: 16px 0 2px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: #35d4e8;
    opacity: 0.85;
  }

  .menu-akkordeon-gruppe ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Unterpunkte: gleiche Sprache wie die Hauptpunkte, eine Stufe kleiner */
  .site-menu-nav .menu-akkordeon-panel a {
    min-height: 44px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    font-weight: 500;
  }
}


/* Source: site-consent.css */
/* Consent-Panel im Marken-Nachtlook. Läuft auch auf den Karten-Seiten, die
   site.css NICHT laden — darum bewusst feste Farbwerte statt var(--…)-Tokens
   (Lektion AGENTS.md §6). Kein backdrop-filter: die Chromium-Flacker-Klasse
   vom 13.07.2026 (sticky + backdrop-filter) bleibt gebannt. Beide Wahl-Buttons
   sind absichtlich exakt gleich gestaltet (gleichwertige Einwilligung). */

.site-consent {
  box-sizing: border-box;
  color: #eef4ff;
  font-family: "DM Sans", "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.6;
}

.site-consent[hidden] {
  display: none;
}

.site-consent {
  position: fixed;
  z-index: 10000;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  width: min(30rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgb(53 212 232 / 32%);
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 15% 0%, rgb(0 178 194 / 14%), transparent 55%),
    linear-gradient(180deg, #0d1730 0%, #0a101f 100%);
  box-shadow:
    0 24px 70px rgb(2 6 18 / 65%),
    0 2px 0 rgb(255 255 255 / 4%) inset;
}

/* Cyan→Pink-Zierfaden als Markensignatur am oberen Rand */
.site-consent::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #00b2c2 0%, #35d4e8 45%, #ff2e88 100%);
}

.site-consent__content {
  min-height: 0;
  padding: 1.6rem 1.7rem 0.7rem;
  overflow: auto;
  overscroll-behavior: contain;
}

.site-consent__brand {
  display: block;
  width: 26px;
  height: 40px;
  margin: 0 auto 0.7rem;
}

.site-consent__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.site-consent__title {
  margin: 0 0 0.6rem;
  color: #ffffff;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
}

/* Kleine Themen-Zeile über dem Titel, rein dekorativ aus CSS */
.site-consent__title::before {
  content: "Datenschutz";
  display: block;
  margin-bottom: 0.55rem;
  color: #35d4e8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.site-consent__text {
  margin: 0 0 0.85rem;
  color: #c7d3e8;
  font-size: 0.9rem;
  font-weight: 400;
}

.site-consent__link {
  display: inline-block;
  margin-bottom: 0.35rem;
  color: #7fe3f2;
  font-size: 0.88rem;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}

.site-consent__link:hover {
  color: #b5f0f9;
}

.site-consent__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  padding: 0.8rem 1.7rem 1.5rem;
  border-top: 1px solid rgb(127 227 242 / 16%);
  background: #0a101f;
  box-shadow: 0 -12px 24px rgb(2 6 18 / 28%);
}

/* Beide Auswahl-Buttons: identische Gestalt, bewusst kein Hervorheben einer Option */
.site-consent__choice {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgb(53 212 232 / 55%);
  border-radius: 999px;
  color: #f3f9ff;
  background: linear-gradient(180deg, rgb(23 51 78 / 85%), rgb(13 30 50 / 85%));
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: normal;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.site-consent__choice:hover {
  border-color: #8ee9ff;
  box-shadow: 0 0 0 1px rgb(142 233 255 / 35%), 0 8px 24px rgb(0 178 194 / 22%);
  transform: translateY(-1px);
}

.site-consent__choice:active {
  transform: translateY(0);
}

.site-consent__status {
  margin: -0.15rem 0 0.65rem;
  color: #b8c7dc;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
}

.site-consent__close {
  position: absolute;
  z-index: 2;
  top: 0.35rem;
  right: 0.35rem;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  color: #7fe3f2;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
}

.site-consent__close[hidden] {
  display: none;
}

.site-consent__close:hover {
  color: #b5f0f9;
}

/* Schwebe-Knopf entfernt (30.08.2026, Daniels Auftrag): Wiederoeffnung laeuft
   ueber die Footer-Links a[data-consent-settings], gestylt von den Footern. */
.site-consent__choice:focus-visible,
.site-consent__close:focus-visible,
.site-consent__link:focus-visible,
.site-consent__title:focus-visible {
  outline: 3px solid #8ee9ff;
  outline-offset: 3px;
}

@media (max-width: 36rem) {
  .site-consent {
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
    width: min(30rem, calc(100% - 1.5rem));
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .site-consent__content {
    padding: 1.2rem 1.05rem 0.6rem;
  }

  .site-consent__actions {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 0.7rem 1.05rem 1rem;
  }

}

@media (max-height: 32rem) {
  .site-consent__brand {
    display: none;
  }

  .site-consent__title::before {
    margin-bottom: 0.25rem;
  }

  .site-consent__text {
    font-size: 0.84rem;
    line-height: 1.48;
  }
}

@media (max-width: 20rem) and (max-height: 25rem) {
  .site-consent {
    right: max(0.35rem, env(safe-area-inset-right));
    bottom: max(0.35rem, env(safe-area-inset-bottom));
    left: max(0.35rem, env(safe-area-inset-left));
    width: calc(100% - 0.7rem);
    max-height: calc(100vh - 0.7rem);
    max-height: calc(100dvh - 0.7rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 12px;
  }

  .site-consent__content {
    padding: 0.7rem 0.75rem 0.4rem;
  }

  .site-consent__title {
    margin-bottom: 0.3rem;
    font-size: 1rem;
  }

  .site-consent__title::before {
    display: none;
  }

  .site-consent__status {
    margin-bottom: 0.35rem;
  }

  .site-consent__actions {
    gap: 0.4rem;
    padding: 0.45rem 0.75rem 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-consent__choice {
    transition: none;
  }

  .site-consent__choice:hover {
    transform: none;
  }
}

@media (forced-colors: active) {
  .site-consent,
  .site-consent__choice,
  .site-consent__close {
    border: 1px solid CanvasText;
  }

  .site-consent::before {
    background: CanvasText;
  }
}


/* Source: mobile-map.css */
/* ============================================================
   Mobile Kartenkorrekturen

   Stark auf den Vollbildmodus der Astro-Geografie-Karte begrenzt.
   Die Berechnung, MapLibre und die Desktopdarstellung bleiben
   unberuehrt. Wird nach site-bridge.css geladen.
   ============================================================ */

/* Ein geschlossenes details darf keine unsichtbaren Tab-Ziele behalten.
   Eine spaetere Grid-Regel in site-bridge.css hatte das native Verhalten
   versehentlich ueberschrieben. */
.app-shell.astro-page .map-line-picker:not([open]) > :not(summary) {
  display: none !important;
}

.app-shell.astro-page .map-search-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.app-shell.astro-page .map-search-list button[aria-selected="true"] {
  background: #dff3f5;
  color: #002f38;
}

/* MapLibre wird erst kurz vor dem Kartenbereich nachgeladen. Sein spaeter
   eingefuegtes Vendor-CSS setzt den Karten-Root sonst wieder auf
   position:relative und damit auf 0px Hoehe. Die hoehere Spezifitaet haelt
   den Root unabhaengig von der Ladereihenfolge deckungsgleich zum Rahmen. */
.app-shell.astro-page .astro-map-gl,
.app-shell.astro-page .astro-map-gl.maplibregl-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.app-shell.astro-page .astro-map.maplibre-map .maplibregl-canvas:focus-visible {
  outline: 3px solid rgba(255, 46, 136, 0.9);
  outline-offset: -4px;
}

.app-shell.astro-page .map-mobile-tools-toggle {
  display: none;
}

.app-shell.astro-page .map-filter-toggle {
  display: none;
}

/* ============================================================
   Reihenfolge unter der Falz (Design-Pass 13.07.): die Deutungs-Panels
   gehoeren direkt hinter die Karte, Legende und Filter danach. Gilt nur
   fuer die einspaltige Karte (≤1320, Mobil/Tablet); Desktop (≥1321) und
   der Vollbildmodus bleiben unveraendert.

   Technik: .map-main-column wird display:contents, alles sortiert per
   order im Flex der .map-workspace (position:relative als Bezugsrahmen
   fuer den Aspekt-Umschalter). ============ */
@media (max-width: 1320px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-workspace {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-main-column {
    display: contents;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .astro-map {
    order: 1;
    min-width: 0;
    /* Pflicht: ohne Breite kollabiert die Karte im Spalten-Flex (13.07.). */
    width: 100%;
  }

  /* 13.07.: Filter direkt unter der Karte (Daniel), Deutung danach. */
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel {
    order: 2;
    width: 100%;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-filter-panel .map-filter-toggle {
    display: block;
    width: 100%;
    text-align: center;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-side-stack {
    order: 3;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) #map-result-summary {
    order: 4;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-note {
    order: 5;
  }
}

@media (max-width: 900px),
       (pointer: coarse) and (max-width: 1180px) {
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-header {
    position: sticky;
    z-index: 6;
    top: calc(61px + env(safe-area-inset-top, 0px));
    border-radius: 10px;
    background: rgba(13, 18, 39, 0.97);
    padding: 6px;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-toggle {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 212, 232, 0.34);
    border-radius: 10px;
    background: rgba(53, 212, 232, 0.1);
    color: #7ff0ff;
    padding: 10px 14px;
    font: 800 0.82rem/1.2 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 94, 196, 0.45);
    background: rgba(255, 46, 136, 0.1);
    color: #ff9bdd;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel:not(.is-mobile-open) {
    gap: 0;
  }

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

@media (max-width: 600px) {
  /* Im Vollbild ist die Bedienidee bereits durch Karte und Suche klar.
     Der lange Hinweis wuerde oberhalb der Karte wertvolle Hoehe belegen. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-heading {
    gap: 3px;
  }

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

  /* Die spaetere Desktopregel in site-bridge.css erzwingt sonst drei
     Spalten. Bei 390 px kollabiert die mittlere auf 0 px, waehrend ihr
     Hilfetext ueber 200 px hoch wird. Mobil bleiben Suche und Aktion
     deshalb in zwei stabilen Spalten. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    padding: 7px 8px;
  }

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

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

  /* Der Erklaertext bleibt fuer Screenreader als aria-describedby
     erhalten, nimmt visuell aber keine eigene Nullbreiten-Spalte ein. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar > p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons {
    width: auto;
    align-self: end;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons button {
    flex: 0 0 auto;
    width: auto;
    min-width: 104px;
    min-height: 44px;
    padding-inline: 12px;
    white-space: nowrap;
  }
}

/* MapLibre zeigt diesen Hinweis nur nach einer unabsichtlichen
   Ein-Finger-Geste im eingebetteten Modus. Die Karte bleibt damit
   verständlich, waehrend ein Finger weiterhin die Seite scrollt. */
.app-shell.astro-page .astro-map[data-gesture-mode="cooperative"] .maplibregl-cooperative-gesture-screen {
  border-radius: inherit;
  background: rgba(9, 13, 28, 0.72);
  color: #f4efe4;
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.95rem, 3.8vw, 1.12rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

/* Fingerziele: Die Desktopregeln verkleinern mehrere Kartenknöpfe auf
   28–36px. Auf Telefonen und in kurzen Querformaten bleiben alle
   zentralen Kartenaktionen mindestens 44px hoch bzw. breit. */
@media (max-width: 900px),
       (pointer: coarse),
       (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .map-fullscreen-float,
  .app-shell.astro-page #map-fullscreen {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-zoom-controls button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-aspect-controls button,
  .app-shell.astro-page .map-axis-legend button,
  .app-shell.astro-page .map-axis-options > button,
  .app-shell.astro-page .map-legend-item,
  .app-shell.astro-page .map-legend-actions button,
  .app-shell.astro-page .map-line-picker summary,
  .app-shell.astro-page .map-line-picker-axes button,
  .app-shell.astro-page .map-search-field input,
  .app-shell.astro-page .map-action-buttons button,
  .app-shell.astro-page .maplibregl-ctrl-attrib-button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .map-search-field input {
    font-size: 16px;
  }

  .app-shell.astro-page .maplibregl-ctrl-attrib-button {
    width: 44px;
    height: 44px;
  }

  .app-shell.astro-page .map-filter-panel button,
  .app-shell.astro-page .map-filter-panel summary {
    will-change: auto;
  }

  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-location-toolbar .map-search-field input,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-location-toolbar .map-action-buttons button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-legend-actions button,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker summary,
  .app-shell.astro-page .astro-map-panel:not(.is-fullscreen) .map-filter-panel .map-line-picker-axes button {
    min-width: 44px;
    min-height: 44px;
  }

  .app-shell.astro-page .astro-map[data-map-status="hydrated"] .map-data-badge {
    display: none;
  }

  /* Vollbildregeln in site-bridge.css sind absichtlich sehr spezifisch
     und reduzieren die Filterinstrumente auf 32px. Fuer Fingerbedienung
     beziehungsweise kompakte Viewports werden sie hier gezielt ueberboten. */
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-aspect-controls button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel summary,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-axis-options > button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-legend-item,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-search-field input,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-action-buttons button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-fullscreen-float,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-zoom-controls button,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-attrib-button {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-attrib-button {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    padding: 8px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    gap: 6px;
    padding-inline: 7px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar .map-action-buttons button {
    min-width: 100px;
    padding-inline: 9px;
  }
}

/* Im Hochformat bleibt die Karte im Vollbild gross. Der lange Filter liegt
   als einklappbares Bottom-Sheet darueber, statt auf 16–54px zusammenzufallen
   und nur angeschnittene Ziele zu zeigen. */
@media (max-width: 700px) and (orientation: portrait) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-main-column {
    position: relative;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel {
    position: absolute;
    z-index: 30;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    width: auto;
    max-height: min(420px, 55dvh);
    display: grid;
    overflow: auto;
    border-color: rgba(0, 174, 187, 0.34);
    background: rgba(9, 13, 28, 0.96);
    padding: 6px;
    box-shadow: 0 -14px 34px rgba(3, 9, 24, 0.28);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-header {
    display: block;
    padding: 0;
    background: transparent;
  }

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

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-toggle {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 212, 232, 0.34);
    border-radius: 10px;
    background: rgba(53, 212, 232, 0.12);
    color: #7ff0ff;
    padding: 10px 14px;
    font: 800 0.82rem/1.2 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-toggle[aria-expanded="true"] {
    border-color: rgba(255, 94, 196, 0.5);
    background: rgba(255, 46, 136, 0.14);
    color: #ff9bdd;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel:not(.is-mobile-open) {
    max-height: 60px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel:not(.is-mobile-open) .map-filter-grid {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-filter-panel.is-mobile-open .map-filter-grid {
    display: grid;
  }
}

/* In kurzen Querformaten soll ausschliesslich die Karte die verfuegbare
   Hoehe nutzen. site-bridge.css wird nach den urspruenglichen Regeln aus
   src/styles.css geladen und setzte versehentlich wieder drei Rasterzeilen;
   dadurch kollabierte die eigentliche Karte auf 2px. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    padding: 8px;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-heading,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar {
    display: none;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-main-column {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .astro-map,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .astro-map.maplibre-map {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .maplibregl-ctrl-bottom-right {
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-mobile-tools-toggle {
    position: absolute;
    z-index: 32;
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(124px, calc(env(safe-area-inset-right, 0px) + 124px));
    min-width: 92px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 100, 121, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #003b48;
    padding: 8px 12px;
    font: 800 0.75rem/1 "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: 0 6px 18px rgba(3, 20, 32, 0.12);
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-mobile-tools-toggle[aria-expanded="true"] {
    border-color: rgba(0, 174, 187, 0.55);
    background: #dff3f5;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar {
    position: absolute;
    z-index: 31;
    top: max(62px, calc(env(safe-area-inset-top, 0px) + 62px));
    right: max(8px, env(safe-area-inset-right, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
    border-color: rgba(0, 174, 187, 0.28);
    background: rgba(9, 13, 28, 0.94);
    padding: 8px;
    box-shadow: 0 14px 34px rgba(3, 9, 24, 0.28);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar > p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-search-field,
  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-search-field input {
    width: 100%;
    min-width: 0;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-action-buttons,
  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-location-toolbar .map-action-buttons button {
    width: auto;
  }

  .app-shell.astro-page .astro-map-panel.is-fullscreen.is-mobile-tools-open .map-filter-panel {
    position: absolute;
    z-index: 30;
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: max(8px, env(safe-area-inset-left, 0px));
    max-height: min(132px, 34dvh);
    display: grid;
    overflow: auto;
    border-color: rgba(0, 174, 187, 0.28);
    background: rgba(9, 13, 28, 0.94);
    box-shadow: 0 -14px 34px rgba(3, 9, 24, 0.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-location-toolbar * {
    scroll-behavior: auto;
  }
}

/* Notch, Dynamic Island und Home-Indikator duerfen im Karten-Vollbild
   keine Bedienelemente verdecken. */
.app-shell.astro-page .astro-map-panel.is-fullscreen {
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
  padding-left: max(10px, env(safe-area-inset-left, 0px));
}

@media (max-width: 360px),
       (orientation: landscape) and (max-height: 520px) and (max-width: 1400px) {
  .app-shell.astro-page .astro-map-panel.is-fullscreen {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    padding-left: max(8px, env(safe-area-inset-left, 0px));
  }
}


/* Source: mobile-form.css */
/* ============================================================
   Mobile Geburtsdaten-Eingabe

   Nur fuer die Astro-Geografie-Werkzeugseite. Vergroessert native
   Eingabefelder und begrenzt die Ortsvorschlaege auf die wirklich
   sichtbare Hoehe, insbesondere bei eingeblendeter Bildschirmtastatur.
   ============================================================ */

@media (max-width: 760px) {
  .app-shell.astro-page #birth-form input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select,
  .app-shell.astro-page #birth-form > .calculate-button {
    min-height: 48px;
  }

  .app-shell.astro-page #birth-form .place-list {
    max-height: min(280px, 40dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .app-shell.astro-page #birth-form .place-list button {
    min-height: 52px;
    touch-action: manipulation;
  }

  .app-shell.astro-page .astro-map-panel {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
  }

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

  .app-shell.astro-page #birth-form .field-hint.is-error {
    color: #ff9aaa;
    font-weight: 700;
  }

  .app-shell.astro-page #birth-form .place-list button[aria-selected="true"] {
    background: #dff3f5;
    color: #002f38;
  }
}

/* Klassische Tabletbreiten lagen oberhalb des bisherigen kompakten
   Formularrasters und fielen dadurch in gequetschte Spalten. Zwischen
   621 und 900px bleiben Datum und Zeit in zwei ruhigen Spalten;
   Ort und Aktion erhalten jeweils eine volle Zeile. */
@media (min-width: 621px) and (max-width: 900px) {
  .app-shell.astro-page #birth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell.astro-page #birth-form > label.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 input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select,
  .app-shell.astro-page #birth-form > .calculate-button {
    min-height: 48px;
  }

  .app-shell.astro-page #birth-form input:not([type="hidden"]),
  .app-shell.astro-page #birth-form select {
    font-size: 16px;
  }

  .app-shell.astro-page #birth-form .place-list {
    max-height: min(280px, 40dvh);
    overscroll-behavior: contain;
  }

  .app-shell.astro-page #birth-form .place-list button {
    min-height: 52px;
    touch-action: manipulation;
  }
}

/* iPhone-Räder 14.07.: Tag, Monat und Jahr bleiben native Einzel-Selects. Ihre
   Optionslisten sind statisch; Groesse und 16px-Schrift kommen aus den Regeln oben
   beziehungsweise src/styles.css, ohne die native Rad-Bedienung umzubauen. */

/* Themen-Block als <details class="intent-fold"> (Daniel 16.07.2026): mobil EINE
   geschlossene Zeile, oeffnet per Tipp; im Offen-Zustand brechen die Chips normal um.
   Die fruehere Wischleiste (Commit 103e8c9) ist zurueckgebaut, der Anschnitt wirkte
   verwirrend. Desktop haelt src/intent-chips.js den Block dauerhaft offen. */
.app-shell.astro-page .intent-fold > summary {
  list-style: none;
  position: relative;
  cursor: pointer;
}
.app-shell.astro-page .intent-fold > summary::-webkit-details-marker {
  display: none;
}
.app-shell.astro-page .intent-fold > summary:focus-visible {
  outline: 2px solid var(--bridge-cyan-bright, #35d4e8);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Kicker war ein <p> in .intent-chips-head (src/styles.css); als <span> im <summary>
   bekommt er dieselbe Optik hier. */
.app-shell.astro-page .intent-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--bridge-cyan-bright, #35d4e8);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Ersetzt den Grid-gap der Sektion, der Kopf, Chip-Zeile und Antworten trennte,
   bevor alle drei in das <details> wanderten. */
.app-shell.astro-page .intent-fold > .intent-chips-row,
.app-shell.astro-page .intent-fold > .intent-answers {
  margin-top: 14px;
}

@media (max-width: 620px) {
  /* Summary-Zeile kompakt, klar antippbar, mit dezentem Chevron rechts. */
  .app-shell.astro-page .intent-fold > summary {
    min-height: 44px;
    padding-right: 34px;
  }
  .app-shell.astro-page .intent-fold > summary::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--bridge-cyan-bright, #35d4e8);
    border-bottom: 2px solid var(--bridge-cyan-bright, #35d4e8);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .app-shell.astro-page .intent-fold[open] > summary::after {
    transform: translateY(-25%) rotate(225deg);
  }
  .app-shell.astro-page #birth-form.input-grid {
    gap: 10px;
  }
}

@media (min-width: 621px) {
  /* Desktop ist dauerhaft offen: summary nicht wie ein Button wirken lassen. */
  .app-shell.astro-page .intent-fold > summary {
    cursor: default;
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .intent-fold > summary::after {
    transition: none;
  }
}