/* ============================================================
   Gemeinsame Distanzskala fuer Astro-Geografie

   Farbe zeigt die Gewichtung der Liniennaehe, nicht die Qualitaet
   eines Planeten. Textlabel, Balkenlaenge und Linienmuster tragen
   dieselbe Information zusaetzlich ohne Farbe.
   ============================================================ */

:root {
  --distance-core: #0b7f72;
  --distance-core-dark: #65e0bd;
  --distance-core-soft: #e7f5f1;
  --distance-strong: #007a86;
  --distance-strong-dark: #7ff0ff;
  --distance-strong-soft: #e4f6f7;
  --distance-clear: #4f7078;
  --distance-clear-dark: #9acbd0;
  --distance-clear-soft: #f0f4f5;
  --distance-subtle: #94654f;
  --distance-subtle-dark: #ddb29b;
  --distance-subtle-soft: #f7f1ec;
  --distance-outside: #9b544b;
  --distance-outside-dark: #e09a91;
  --distance-outside-soft: #f8efed;
}

.distance-band,
.distance-band-row,
.distance-band-key > span,
.app-shell.astro-page .map-summary-line,
.app-shell.astro-page .map-summary-focus-heading,
.app-shell.astro-page .map-summary-distance-note,
.app-shell.astro-page .map-hover-label,
.app-shell.astro-page .location-line,
.app-shell.astro-page .location-crossing,
.app-shell.astro-page .relocation-side-line {
  --distance-accent: var(--distance-clear);
  --distance-accent-on-dark: var(--distance-clear-dark);
  --distance-surface: var(--distance-clear-soft);
  --distance-strength: 52%;
  --distance-edge: 2px;
}

.distance-band.is-core,
.distance-band-row.is-core,
.distance-band-key > .is-core,
.app-shell.astro-page .map-summary-line.is-core,
.app-shell.astro-page .map-summary-focus-heading.is-core,
.app-shell.astro-page .map-summary-distance-note.is-core,
.app-shell.astro-page .map-hover-label.is-core,
.app-shell.astro-page .location-line.is-core,
.app-shell.astro-page .location-crossing.is-core,
.app-shell.astro-page .relocation-side-line.is-core {
  --distance-accent: var(--distance-core);
  --distance-accent-on-dark: var(--distance-core-dark);
  --distance-surface: var(--distance-core-soft);
  --distance-strength: 100%;
  --distance-edge: 4px;
}

.distance-band.is-strong,
.distance-band-row.is-strong,
.distance-band-key > .is-strong,
.app-shell.astro-page .map-summary-line.is-strong,
.app-shell.astro-page .map-summary-focus-heading.is-strong,
.app-shell.astro-page .map-summary-distance-note.is-strong,
.app-shell.astro-page .map-hover-label.is-strong,
.app-shell.astro-page .location-line.is-strong,
.app-shell.astro-page .location-crossing.is-strong,
.app-shell.astro-page .relocation-side-line.is-strong {
  --distance-accent: var(--distance-strong);
  --distance-accent-on-dark: var(--distance-strong-dark);
  --distance-surface: var(--distance-strong-soft);
  --distance-strength: 78%;
  --distance-edge: 3px;
}

.distance-band.is-clear,
.distance-band-row.is-clear,
.distance-band-key > .is-clear,
.app-shell.astro-page .map-summary-line.is-clear,
.app-shell.astro-page .map-summary-focus-heading.is-clear,
.app-shell.astro-page .map-summary-distance-note.is-clear,
.app-shell.astro-page .map-hover-label.is-clear,
.app-shell.astro-page .location-line.is-clear,
.app-shell.astro-page .location-crossing.is-clear,
.app-shell.astro-page .relocation-side-line.is-clear {
  --distance-accent: var(--distance-clear);
  --distance-accent-on-dark: var(--distance-clear-dark);
  --distance-surface: var(--distance-clear-soft);
  --distance-strength: 52%;
  --distance-edge: 2px;
}

.distance-band.is-subtle,
.distance-band-row.is-subtle,
.distance-band-key > .is-subtle,
.app-shell.astro-page .map-summary-line.is-subtle,
.app-shell.astro-page .map-summary-focus-heading.is-subtle,
.app-shell.astro-page .map-summary-distance-note.is-subtle,
.app-shell.astro-page .map-hover-label.is-subtle,
.app-shell.astro-page .location-line.is-subtle,
.app-shell.astro-page .location-crossing.is-subtle,
.app-shell.astro-page .relocation-side-line.is-subtle {
  --distance-accent: var(--distance-subtle);
  --distance-accent-on-dark: var(--distance-subtle-dark);
  --distance-surface: var(--distance-subtle-soft);
  --distance-strength: 18%;
  --distance-edge: 2px;
}

.distance-band.is-muted,
.distance-band-row.is-muted,
.distance-band-key > .is-muted,
.app-shell.astro-page .map-summary-line.is-muted,
.app-shell.astro-page .map-summary-focus-heading.is-muted,
.app-shell.astro-page .map-summary-distance-note.is-muted,
.app-shell.astro-page .map-hover-label.is-muted,
.app-shell.astro-page .location-line.is-muted,
.app-shell.astro-page .location-crossing.is-muted,
.app-shell.astro-page .relocation-side-line.is-muted {
  --distance-accent: var(--distance-outside);
  --distance-accent-on-dark: var(--distance-outside-dark);
  --distance-surface: var(--distance-outside-soft);
  --distance-strength: 4%;
  --distance-edge: 1px;
}

/* Kompakte Skala in den FAQ-Bereichen. */

.distance-band-key {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px;
  margin-top: 15px;
}

.distance-band-key > span {
  position: relative;
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--distance-accent-on-dark) 28%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--distance-accent-on-dark) 7%, rgba(16, 22, 44, 0.9));
  padding: 10px 10px 9px 13px;
}

.distance-band-key > span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--distance-edge);
  background: var(--distance-accent-on-dark);
}

.distance-band-key > .is-subtle::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.distance-band-key > .is-muted::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.distance-band-key b {
  color: var(--star, #f4efe4);
  font-size: 0.72rem;
  line-height: 1.25;
}

.distance-band-key small {
  color: var(--distance-accent-on-dark);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.distance-band-key-note {
  margin-top: 11px !important;
  color: var(--text-muted, #b7b8c6) !important;
  font-size: 0.76rem !important;
  line-height: 1.55 !important;
}

/* Distanzzeilen auf der Methodenseite. */

.guide-table .distance-band-row > * {
  transition: background 0.2s ease;
}

.guide-table .distance-band-row:hover > * {
  background: color-mix(in srgb, var(--distance-accent-on-dark) 5%, rgba(12, 18, 38, 0.72));
}

.guide-table .distance-band-row > :first-child {
  position: relative;
  padding-left: 30px;
}

.guide-table .distance-band-row > :first-child::before {
  content: "";
  position: absolute;
  inset: 12px auto 12px 14px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent-on-dark);
}

.guide-table .distance-band-row.is-subtle > :first-child::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.guide-table .distance-band-row.is-muted > :first-child::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.distance-band-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--distance-accent-on-dark) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--distance-accent-on-dark) 9%, transparent);
  color: var(--distance-accent-on-dark);
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.distance-band-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

/* Dunkle Lerntabelle auf der Rechnerseite. */

.app-shell.astro-page .distance-table > .distance-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-left: 23px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--distance-accent-on-dark) 8%, transparent),
    transparent 46%
  );
  transition: background 0.2s ease;
}

.app-shell.astro-page .distance-table > .distance-band:hover {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--distance-accent-on-dark) 13%, transparent),
    transparent 55%
  );
}

.app-shell.astro-page .distance-table > .distance-band::before {
  content: "";
  position: absolute;
  inset: 9px auto 9px 8px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent-on-dark);
}

.app-shell.astro-page .distance-table > .distance-band.is-subtle::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 7px,
    transparent 7px 11px
  );
}

.app-shell.astro-page .distance-table > .distance-band.is-muted::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--distance-accent-on-dark) 0 2px,
    transparent 2px 6px
  );
}

.app-shell.astro-page .distance-table .distance-band b,
.app-shell.astro-page .distance-table .distance-band span > strong {
  color: var(--distance-accent-on-dark);
}

.app-shell.astro-page .distance-table .distance-band span > strong {
  margin-right: 0.25em;
  font-weight: 800;
}

/* Sichtbare Ortskarte rechts beziehungsweise unter der Karte. */

.app-shell.astro-page .map-summary-line,
.app-shell.astro-page .map-summary-focus-heading {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 28%, #dde6ea);
  background: linear-gradient(90deg, var(--distance-surface), rgba(255, 255, 255, 0.94) 54%);
}

.app-shell.astro-page .map-summary-line {
  padding-left: 13px;
}

.app-shell.astro-page .map-summary-focus-heading {
  border: 1px solid color-mix(in srgb, var(--distance-accent) 28%, #dde6ea);
  border-radius: 10px;
  padding: 9px 10px 9px 13px;
}

.app-shell.astro-page .map-summary-line::before,
.app-shell.astro-page .map-summary-focus-heading::before,
.app-shell.astro-page .relocation-side-line::before,
.app-shell.astro-page .location-line::before,
.app-shell.astro-page .location-crossing::before {
  content: "";
  position: absolute;
  inset: 7px auto 7px 4px;
  width: var(--distance-edge);
  border-radius: 999px;
  background: var(--distance-accent);
}

.app-shell.astro-page :is(
    .map-summary-line,
    .map-summary-focus-heading,
    .relocation-side-line,
    .location-line,
    .location-crossing
  ).is-subtle::before {
  background: repeating-linear-gradient(to bottom, var(--distance-accent) 0 7px, transparent 7px 11px);
}

.app-shell.astro-page :is(
    .map-summary-line,
    .map-summary-focus-heading,
    .relocation-side-line,
    .location-line,
    .location-crossing
  ).is-muted::before {
  background: repeating-linear-gradient(to bottom, var(--distance-accent) 0 2px, transparent 2px 6px);
}

.app-shell.astro-page .map-summary-line:hover,
.app-shell.astro-page .map-summary-line:focus-visible,
.app-shell.astro-page .map-summary-line.is-selected {
  border-color: color-mix(in srgb, var(--distance-accent) 58%, #bfced5);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--distance-accent) 15%, transparent);
}

.app-shell.astro-page .map-summary-line-distance > small {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--distance-accent) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--distance-surface) 78%, #ffffff);
  color: color-mix(in srgb, var(--distance-accent) 78%, #031420);
  padding: 3px 7px;
  font-size: 0.61rem;
  font-weight: 850;
}

.app-shell.astro-page .map-summary-line-distance > small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--distance-accent);
}

.app-shell.astro-page .map-summary-line-distance::after {
  content: "";
  width: 62px;
  height: 4px;
  justify-self: end;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--distance-accent) 0 var(--distance-strength),
    rgba(80, 75, 93, 0.12) var(--distance-strength) 100%
  );
}

.app-shell.astro-page .map-summary-line.is-subtle .map-summary-line-copy > strong,
.app-shell.astro-page .map-summary-line.is-subtle .map-summary-line-distance > strong,
.app-shell.astro-page .map-summary-line.is-muted .map-summary-line-copy > strong,
.app-shell.astro-page .map-summary-line.is-muted .map-summary-line-distance > strong {
  color: var(--ink, #031420);
}

.app-shell.astro-page .map-summary-distance-note {
  border-color: color-mix(in srgb, var(--distance-accent) 24%, #dde6ea);
  background: linear-gradient(145deg, var(--distance-surface), rgba(255, 255, 255, 0.9));
  box-shadow: inset var(--distance-edge) 0 0 var(--distance-accent);
}

.app-shell.astro-page .map-summary-distance-note h5 {
  color: color-mix(in srgb, var(--distance-accent) 78%, #031420);
}

.app-shell.astro-page .map-hover-label.is-core,
.app-shell.astro-page .map-hover-label.is-strong,
.app-shell.astro-page .map-hover-label.is-clear,
.app-shell.astro-page .map-hover-label.is-subtle,
.app-shell.astro-page .map-hover-label.is-muted {
  max-width: min(92%, 720px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 34%, #bfced5);
  background: color-mix(in srgb, var(--distance-surface) 82%, rgba(255, 255, 255, 0.96));
  color: color-mix(in srgb, var(--distance-accent) 74%, #031420);
  box-shadow:
    inset var(--distance-edge) 0 0 var(--distance-accent),
    0 8px 20px rgba(3, 20, 32, 0.14);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spaeter wieder nutzbare Detail-/Relocation-Zeilen folgen demselben Modell. */

.app-shell.astro-page .relocation-side-line,
.app-shell.astro-page .location-line,
.app-shell.astro-page .location-crossing {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--distance-accent) 25%, #dde6ea);
  background: linear-gradient(90deg, var(--distance-surface), rgba(255, 255, 255, 0.94) 58%);
}

.app-shell.astro-page .location-line.is-muted,
.app-shell.astro-page .location-crossing.is-muted {
  opacity: 1;
}

@media (max-width: 640px) {
  .app-shell.astro-page .map-summary-line-distance::after {
    width: 44px;
  }

  .app-shell.astro-page .map-summary-line-distance > small {
    max-width: 18ch;
    white-space: normal;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell.astro-page .distance-table > .distance-band,
  .guide-table .distance-band-row > * {
    transition: none;
  }
}