/**
 * CÍRCULO ORIGEM — Components
 * CTAs: schwarzer Block, weisse Schrift (nicht auf der Schwelle).
 */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.85rem 2.25rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  border: none;
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
}

.btn:hover,
.btn:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible {
  opacity: 0.88;
  color: var(--bg);
}

.path-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

/* Footer-Links: ruhig als Text (nicht schwarze Blöcke) */
.footer-links a {
  display: inline;
  min-height: 0;
  padding-block: 0.35rem;
  padding-inline: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  text-decoration: none;
  background: none;
  color: var(--text-muted);
  box-sizing: border-box;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
  opacity: 1;
}

/* Mailto-CTAs im Fliesstext wie Button (nicht Header, nicht Schwelle) */
.run-credits > p > a[href^="mailto:"],
.contact-body a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.85rem 2.25rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-nav);
  letter-spacing: 0.02em;
  text-transform: none;
  text-decoration: none;
  border: none;
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
  box-sizing: border-box;
}

.run-credits > p > a[href^="mailto:"]:hover,
.contact-body a[href^="mailto:"]:hover {
  opacity: 0.88;
  color: var(--bg);
}

/* Abspann (weiss): Mail als Textlink; Footer-Links Text */
.scene-contact .run-credits > p > a[href^="mailto:"] {
  display: inline;
  min-height: 0;
  padding-block: 12px;
  padding-inline: 0;
  background: none;
  color: var(--text, #1d1d1f);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow: none;
}

.scene-contact .run-credits > p > a[href^="mailto:"]:hover {
  color: var(--text, #1d1d1f);
  opacity: 0.88;
}

.scene-contact .footer-links a {
  display: inline;
  min-height: 0;
  padding-block: 12px;
  padding-inline: 0;
  background: none;
  color: #6e6e73;
}

.status {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}

.status[data-state="belegt"] {
  color: var(--text);
}

.origin-chapter {
  padding-block: var(--space-chapter);
}

.origin-chapter + .origin-chapter {
  border-top: 1px solid var(--border);
}

.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.chapter-grid.is-reverse {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.lead {
  max-width: var(--measure);
}

.chapter-image {
  margin: 0;
}

.chapter-image img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.chapter-image figcaption,
.evidence-note {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 36rem;
}

.evidence-note {
  border-left: 1px solid var(--border);
  padding-left: 14px;
  margin-top: 1.75rem;
}

.image-pending {
  aspect-ratio: 3 / 2;
  background: var(--bg-cream);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.origin-table {
  width: 100%;
  max-width: none;
  border-collapse: collapse;
  font-size: 11px;
  margin-top: 0.35rem;
  table-layout: fixed;
}

/* Gleiche Spalten-Fluchten in beiden Tabellen */
.origin-col-ebene { width: 26%; }
.origin-col-angabe { width: 50%; }
.origin-col-status { width: 24%; }

.origin-table th,
.origin-table td {
  text-align: left;
  vertical-align: baseline;
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  line-height: 1.4;
  box-sizing: border-box;
}

.origin-table thead th {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-muted);
  padding-top: 0;
  padding-bottom: 0.35rem;
  border-bottom-color: var(--border);
}

/* Zweite Tabelle: thead nur für Spaltenbreite, nicht sichtbar */
.origin-table thead.origin-thead-repeat {
  visibility: collapse;
  height: 0;
  line-height: 0;
  font-size: 0;
}

.origin-table thead.origin-thead-repeat th {
  padding: 0;
  border: 0;
  height: 0;
  overflow: hidden;
}

.origin-table tbody th {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
}

/* Fluchten: Ebene links, Angabe links, Status rechts — gleiche Kanten */
.origin-table thead th:nth-child(1),
.origin-table tbody th {
  width: 26%;
  padding-left: 0;
  text-align: left;
}

.origin-table thead th:nth-child(2),
.origin-table tbody td:nth-child(2) {
  width: 50%;
  text-align: left;
}

.origin-table thead th:nth-child(3),
.origin-table tbody td:nth-child(3),
.origin-table thead th:last-child,
.origin-table tbody td:last-child {
  width: 24%;
  text-align: right;
  padding-right: 0;
  color: var(--text-muted);
  font-size: 10px;
}

.tile-note {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  /* Herkunft: Zeilenkarten statt 11-px-Tabelle mit Quer-Scroll */
  .origin-table {
    display: block;
    width: 100%;
    max-width: none;
    table-layout: auto;
    font-size: var(--fs-body);
    overflow: visible;
    margin-top: 0.15rem;
  }

  .origin-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .origin-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .origin-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
    row-gap: 0.2rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--border);
  }

  .origin-table th,
  .origin-table td {
    display: block;
    width: auto;
    max-width: none;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: 1.45;
  }

  .origin-table tbody th {
    grid-column: 1;
    grid-row: 1;
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--text);
  }

  .origin-table tbody td:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: var(--fs-body);
    color: var(--text);
  }

  .origin-table tbody td:last-child {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    font-size: var(--fs-kicker);
    letter-spacing: var(--track-kicker);
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--text-muted);
    align-self: start;
    text-align: right;
  }

  .origin-chapter {
    padding-block: var(--space-chapter);
  }

  .chapter-grid,
  .chapter-grid.is-reverse {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .chapter-image {
    margin-inline: calc(-1 * var(--gutter));
  }

  .chapter-image img,
  .image-pending {
    aspect-ratio: 4 / 3;
  }

  .chapter-image figcaption {
    padding-inline: var(--gutter);
  }
}

/* ——— Grund umschalten: kleines Zeichen unten rechts ——— */
.theme-toggle {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.5;
  -webkit-appearance: none;
  appearance: none;
  transition:
    opacity 0.35s var(--ease),
    color 0.35s var(--ease),
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 1;
  color: var(--text);
}

.theme-toggle svg {
  display: block;
  width: 15px;
  height: 15px;
}

/* Über Fotoszenen ohne Kreis, damit nichts stört */
.home:not(.home-over-ground) .theme-toggle {
  background: transparent;
  border-color: rgba(245, 245, 247, 0.45);
  color: #f5f5f7;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle {
    transition: none;
  }
}