/* Website-Film „YearAtlas in 3 Minuten“: Abschnitt auf der Startseite, der Film spielt direkt im abgerundeten Kasten.
   Nutzt die Farb-Variablen der jeweiligen Seite (hell/dunkel); der Kasten selbst ist immer dunkel wie der Film. */
.tour-link { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--space-lg); padding: 0; border: 0; background: none;
  color: var(--gold); font: 600 15.5px var(--font-body); cursor: pointer; }
.tour-link .tour-play { width: 30px; height: 30px; }
.tour-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

section.tour { padding: var(--space-xxl) 0; }
.tour-intro { max-width: var(--prose-width); color: var(--text-dim); margin: 0 0 var(--space-lg); }
.tour-poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--line); border-radius: 22px;
  overflow: hidden; cursor: pointer; background: #0b1420; }
.tour-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.tour-poster:hover img { transform: scale(1.015); }
.tour-poster .tour-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: #ece7dc; font: 600 17px var(--font-body); letter-spacing: .02em; }
.tour-poster .tour-cta > span { padding: 8px 18px; border-radius: 20px; background: rgba(5, 10, 17, .78); white-space: nowrap; }
.tour-poster::after { content: ''; position: absolute; inset: 0; background: rgba(5, 10, 17, .28); transition: background .3s ease; }
.tour-poster:hover::after { background: rgba(5, 10, 17, .12); }
.tour-poster .tour-cta { z-index: 1; }
.tour-poster .tour-play { width: 92px; height: 92px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5)); transition: transform .3s ease; }
.tour-poster:hover .tour-play { transform: scale(1.06); }
.tour-play circle { fill: #c6a15b; } .tour-play path { fill: #0b1420; }

.tour-chapters { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 28px; counter-reset: ch; }
.tour-chapters button { width: 100%; display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); font: 15.5px var(--font-body); text-align: left; cursor: pointer; }
.tour-chapters button:hover .ch-title { color: var(--gold); }
.tour-chapters .ch-num { font: 600 12.5px var(--font-body); letter-spacing: .14em; color: var(--gold); min-width: 22px; }
.tour-chapters .ch-title { flex: 1; }
.tour-chapters .ch-time { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 14px; }
@media (max-width: 900px) { .tour-chapters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tour-chapters { grid-template-columns: 1fr; } .tour-poster .tour-play { width: 64px; height: 64px; } .tour-poster .tour-cta { font-size: 15px; gap: 12px; } }

/* Kasten: Vorschaubild und Video an derselben Stelle, Video erst nach dem Klick sichtbar */
.tour-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: #0b1420;
  /* Safari und manche Grafikkarten legen das laufende Video auf eine eigene Ebene und ignorieren dann overflow + Rundung:
     die Maske erzwingt den Zuschnitt auch für diese Ebene, die Ecken bleiben beim Abspielen rund. */
  isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); }
.tour-frame .tour-poster { position: absolute; inset: 0; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.tour-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; background: #0b1420; border-radius: 21px;
  opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.tour-frame.playing video { opacity: 1; pointer-events: auto; }
.tour-frame.playing .tour-poster { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.tour-frame video::cue { font: 500 19px 'Inter', -apple-system, sans-serif; background: rgba(5, 10, 17, .72); color: #ece7dc; }
.tour-chapters button.on .ch-title, .tour-chapters button.on .ch-time { color: var(--gold); }
.tour-chapters button.on { border-bottom-color: var(--gold); }

/* „Atlas“ in der Überschrift wie im Logo: kursiv und gold */
section.tour h2.section-title em { font-style: italic; color: var(--gold); }