: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-size: 1.02rem;
  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: 900;
  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: 2.05;
  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: 900;
}

.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.is-relocation-zoomed {
  overflow: visible;
  z-index: 8;
}

.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;
}

.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: 950;
}

.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);
}

.map-relocation-panel.is-relocation-zoomed {
  overflow: visible;
  z-index: 9;
}

.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;
  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;
  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;
  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: 900;
}

.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.is-zoomed {
  z-index: 4;
}

.map-relocation-panel.is-relocation-zoomed .relocation-chart-shell {
  margin-inline: max(-68px, -7vw);
}

.map-relocation-panel.is-relocation-zoomed .relocation-chart-svg {
  width: min(440px, calc(100vw - 36px));
}

.app-shell.astro-page .map-relocation-panel.is-relocation-zoomed .relocation-chart-svg {
  width: min(440px, calc(100vw - 36px));
}

.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: 900;
  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 .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: 1.25;
}

.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: 850;
}

.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.is-relocation-zoomed,
  .astro-map-panel.is-fullscreen .map-relocation-panel.is-relocation-zoomed {
    overflow: visible;
  }

  .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);
  }

  .astro-map-panel.is-fullscreen .map-relocation-panel.is-relocation-zoomed .relocation-chart-svg,
  .app-shell.astro-page .astro-map-panel.is-fullscreen .map-relocation-panel.is-relocation-zoomed .relocation-chart-svg {
    width: min(360px, calc(100vw - 30px));
  }
}

@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);
  box-shadow: inset 0 0 7px rgba(127, 233, 244, 0.035);
}

.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;
}