/* Augusta Raurica – Ludus-Forschung */

:root {
  --bg: #f6f1e7;
  --surface: #fffaf0;
  --ink: #2b2118;
  --ink-soft: #5c4d3f;
  --line: #d9ccb4;
  --accent: #9c3b1f;       /* Terrakotta */
  --accent-soft: #e9cdbf;
  --gold: #b08530;
  --water: #7fa7b8;
  --water-deep: #5d8ba0;
  --land: #ece3cf;
  --land-high: #e2d5b8;
  --grid: #cbb994;
  --focus: #1f5f8b;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1713;
    --surface: #25201a;
    --ink: #efe6d6;
    --ink-soft: #bfb09b;
    --line: #463c30;
    --accent: #e0805d;
    --accent-soft: #4a2b1f;
    --gold: #d4a94f;
    --water: #33566a;
    --water-deep: #4d7890;
    --land: #2b251e;
    --land-high: #332c23;
    --grid: #5a4d3b;
    --focus: #7fb6de;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.65 Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

img, svg { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}

/* Kopf */
.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1rem;
}
.brand {
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-title {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-sub {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Inhalt */
main { padding-block: 2.5rem 4rem; }

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--accent);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1, h2, h3 { line-height: 1.2; font-weight: normal; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); margin: 0 0 1rem; }
h2 { font-size: 1.6rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: 42rem; margin-top: 0; }
.prose { max-width: 42rem; }
.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* Karte */
.map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2rem;
}
@media (max-width: 56rem) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
}
.map-frame {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem;
}
.map-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem;
}
.map-panel h2 { margin-top: 0; font-size: 1.35rem; }
.map-panel .kind {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.legend { list-style: none; padding: 0; margin: 1rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.legend li { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex: none; background: var(--surface); }
.swatch.arena { background: var(--accent); border-color: var(--accent); }
.swatch.hypo { background: var(--gold); border-color: var(--gold); }

.poi-list { columns: 2 16rem; column-gap: 2rem; padding-left: 1.25rem; }
.poi-list li { break-inside: avoid; margin-bottom: 0.75rem; }

/* Karten / Abschnitte */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem 1.25rem 1rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.callout {
  border-left: 4px solid var(--gold);
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  max-width: 42rem;
}
.callout p { margin: 0.25rem 0; }

/* Zeitleiste */
.timeline { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 46rem; }
.timeline li {
  position: relative;
  padding: 0 0 1.75rem 7.5rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: 6rem;
  top: 0.55rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}
.timeline li::after {
  content: "";
  position: absolute;
  left: 6rem;
  top: 1.2rem;
  bottom: -0.2rem;
  width: 1px;
  background: var(--line);
}
.timeline li:last-child::after { display: none; }
.timeline .date {
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 5rem;
  text-align: right;
  font-size: 0.9rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timeline h3 { margin: 0 0 0.25rem; }
.timeline p { margin: 0; }
@media (max-width: 36rem) {
  .timeline li { padding-left: 1.75rem; }
  .timeline li::before, .timeline li::after { left: 0.35rem; }
  .timeline .date { position: static; display: block; text-align: left; width: auto; }
}

/* Amphitheater */
.arena {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
}
.arena:last-of-type { border-bottom: 1px solid var(--line); }
.arena-num {
  font-size: 4rem;
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.arena-meta { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.arena h2 { margin-top: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 1rem 0; font-size: 0.95rem; }
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; }
@media (max-width: 40rem) {
  .arena { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .arena-num { font-size: 2.75rem; }
}

.phases {
  width: 100%;
  margin: 1.5rem 0 0.5rem;
}
.phases svg { display: block; width: 100%; height: auto; }
.phase-bar { rx: 4; }
.phase-scene { fill: var(--land-high); stroke: var(--grid); }
.phase-arena { fill: var(--accent); }
.phase-late { fill: var(--gold); }
.phase-text { fill: var(--ink); font: 13px Georgia, serif; }
.phase-text-light { fill: #fff; font: 13px Georgia, serif; }
.phase-axis { fill: var(--ink-soft); font: 12px system-ui, sans-serif; text-anchor: middle; }
.phase-tick { stroke: var(--line); }

/* Fuss */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .wrap { padding-block: 1.5rem; }
.site-footer p { margin: 0.25rem 0; }

/* Interaktive Karte */
.map-canvas {
  height: min(72vh, 44rem);
  min-height: 22rem;
  border-radius: 4px;
  background: var(--land);
  z-index: 0;
}
.map-note { font-size: 0.85rem; color: var(--ink-soft); margin: 0.5rem 0.25rem 0; }
.map-panel { max-height: min(72vh, 44rem); overflow-y: auto; }
@media (max-width: 56rem) { .map-panel { max-height: none; } }

.layer-group { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.layer-group legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.layer-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.35;
  padding-block: 0.2rem;
  cursor: pointer;
}
.layer-row input { margin: 0.15rem 0 0; accent-color: var(--accent); flex: none; }
.layer-item { margin-bottom: 0.35rem; }
.opacity {
  display: block;
  width: calc(100% - 1.5rem);
  margin: 0.1rem 0 0.2rem 1.5rem;
  accent-color: var(--accent);
}
.opacity:disabled { opacity: 0.35; }

.swatch.approx { background: transparent; border: 2px dashed var(--accent); }

.pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #9c3b1f;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  color: #fff;
  font: bold 13px Georgia, serif;
}
.pin.pin-hypo { background: #b08530; }
.area-hypo { fill: #b08530; fill-opacity: 0.2; stroke: #b08530; stroke-width: 2; stroke-dasharray: 6 5; }
.area-approx { fill: #9c3b1f; fill-opacity: 0.08; stroke: #9c3b1f; stroke-width: 2; stroke-dasharray: 4 6; }

.leaflet-container { font: 0.9rem/1.45 Georgia, serif; }
.leaflet-container a { color: #9c3b1f; }
.popup h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.popup p { margin: 0; }
.popup .kind {
  display: block;
  margin: 0.5rem 0 0.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c3b1f;
}
.popup .kind:first-child { margin-top: 0; }
.popup dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.75rem; margin: 0 0 0.25rem; }
.popup dt { color: #6b5a49; }
.popup dd { margin: 0; }

#project-points strong[role="button"] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 0.2em; }

/* Intro: Schwertduell (nur Startseite, einmal pro Sitzung) */
.intro { display: none; }
html.has-intro { overflow: hidden; }
html.has-intro .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  cursor: pointer;
  background: radial-gradient(ellipse at 50% 58%, #4a3522 0%, #22180f 45%, #0e0a07 100%);
  color: #efe6d6;
  animation: intro-out 5s linear forwards;
}
.intro-stage { position: relative; width: 100%; height: 100%; animation: intro-shake 5s linear forwards; }
.duel { position: absolute; left: 50%; top: 44%; width: 0; height: 0; }
@media (max-width: 34rem) { .duel { scale: 0.72; } }

.sword {
  position: absolute;
  left: -30px;
  top: -210px;
  width: 60px;
  height: 330px;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.55));
}
.sword svg { display: block; width: 100%; height: 100%; }
.sword-left { animation: sword-left 5s cubic-bezier(.3,.7,.4,1) forwards; }
.sword-right { animation: sword-right 5s cubic-bezier(.3,.7,.4,1) forwards; }

@keyframes sword-left {
  0%   { transform: translateX(-75vw) rotate(-20deg); opacity: 0; }
  6%   { opacity: 1; }
  15%  { transform: translateX(-150px) rotate(12deg); }
  20%  { transform: translateX(-128px) rotate(46deg); }
  23%  { transform: translateX(-140px) rotate(34deg); }
  30%  { transform: translateX(-215px) rotate(8deg); }
  38%  { transform: translateX(-128px) rotate(42deg); }
  40%  { transform: translateX(-134px) rotate(37deg); }
  43%, 100% { transform: translateX(-128px) rotate(40deg); opacity: 1; }
}
@keyframes sword-right {
  0%   { transform: translateX(75vw) rotate(20deg); opacity: 0; }
  6%   { opacity: 1; }
  15%  { transform: translateX(150px) rotate(-12deg); }
  20%  { transform: translateX(128px) rotate(-46deg); }
  23%  { transform: translateX(140px) rotate(-34deg); }
  30%  { transform: translateX(215px) rotate(-8deg); }
  38%  { transform: translateX(128px) rotate(-42deg); }
  40%  { transform: translateX(134px) rotate(-37deg); }
  43%, 100% { transform: translateX(128px) rotate(-40deg); opacity: 1; }
}

/* Funken am Kreuzungspunkt */
.sparks { position: absolute; left: 0; top: -33px; width: 0; height: 0; }
.sparks i {
  position: absolute;
  left: -1.5px;
  top: -8px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(#fff6d8, #ffb347);
  box-shadow: 0 0 8px 2px rgba(255, 190, 90, 0.85);
  opacity: 0;
  transform: rotate(var(--a)) translateY(0);
}
.sparks-1 i { animation: spark-1 5s ease-out forwards; }
.sparks-2 i { animation: spark-2 5s ease-out forwards; }
@keyframes spark-1 {
  0%, 19.5% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(1); }
  20%  { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scaleY(3); }
  27%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scaleY(1); }
}
@keyframes spark-2 {
  0%, 37.5% { opacity: 0; transform: rotate(var(--a)) translateY(0) scaleY(1); }
  38%  { opacity: 1; transform: rotate(var(--a)) translateY(-8px) scaleY(4); }
  48%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scaleY(1); }
}
.flash {
  position: absolute;
  left: -60px;
  top: -93px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,190,0.95) 0%, rgba(255,190,90,0.4) 35%, rgba(255,190,90,0) 70%);
  opacity: 0;
  animation: flash 5s ease-out forwards;
}
@keyframes flash {
  0%, 19.5% { opacity: 0; transform: scale(0.3); }
  20%  { opacity: 0.7; transform: scale(0.8); }
  25%  { opacity: 0; transform: scale(1.1); }
  37.5% { opacity: 0; transform: scale(0.3); }
  38%  { opacity: 1; transform: scale(1.2); }
  46%, 100% { opacity: 0; transform: scale(1.8); }
}
@keyframes intro-shake {
  0%, 37.9% { transform: none; }
  38.5% { transform: translate(-5px, 3px); }
  39.2% { transform: translate(4px, -3px); }
  40%   { transform: translate(-2px, 1px); }
  41%, 100% { transform: none; }
}

.intro-title {
  position: absolute;
  left: 50%;
  top: calc(44% + 150px);
  width: min(94vw, 54rem);
  translate: -50% 0;
  text-align: center;
  opacity: 0;
  animation: intro-title 5s ease-out forwards;
}
.intro-title strong {
  display: block;
  font-weight: normal;
  font-size: clamp(1.3rem, 0.9rem + 2.4vw, 2.3rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4a94f;
}
.intro-title span { display: block; margin-top: 0.4rem; font-style: italic; color: #bfb09b; }
@keyframes intro-title {
  0%, 46% { opacity: 0; transform: translateY(12px); }
  60%, 100% { opacity: 1; transform: none; }
}
@media (max-width: 34rem) { .intro-title { top: calc(44% + 110px); } }

.intro-skip {
  position: absolute;
  right: 1.25rem;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(239, 230, 214, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  color: #efe6d6;
  font: 0.85rem Georgia, serif;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.intro-skip:hover { border-color: #d4a94f; color: #d4a94f; }

@keyframes intro-out {
  0%, 88% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
html.has-intro .intro.is-leaving { animation: intro-leave 0.35s ease-out forwards; }
@keyframes intro-leave { to { opacity: 0; visibility: hidden; } }