/* =========================================================
   ELDRUNA - Viking Music
   Dark nordic design system
   ========================================================= */

:root {
  --bg: #0a0c0f;
  --bg-2: #0f1319;
  --panel: #141a22;
  --panel-2: #1a212b;
  --line: rgba(233, 230, 223, 0.08);
  --text: #e9e6df;
  --muted: #98a1ac;
  --accent: #d9a55a;
  --accent-soft: rgba(217, 165, 90, 0.14);
  --ice: #8fb6bd;
  --font-display: "Cinzel", "Noto Sans Runic", serif;
  --font-body: "Inter", "Noto Sans Runic", system-ui, -apple-system, sans-serif;
  --max: 1180px;
  --radius: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* scroll-padding-top: Anker-Spruenge landen unterhalb der fixen Nav (ersetzt den alten Smooth-Scroll-Offset) */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #10121a; }

/* subtle film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E");
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- typography ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.kicker::before, .kicker::after {
  content: "";
  height: 1px;
  width: 34px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.kicker::after { background: linear-gradient(90deg, var(--accent), transparent); }

.section-title {
  font-size: clamp(30px, 4.4vw, 46px);
  margin-bottom: 14px;
}

.section-sub {
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
}

.center { text-align: center; }

section { padding: 110px 0; position: relative; }

.rune-divider {
  text-align: center;
  color: rgba(233, 230, 223, 0.22);
  letter-spacing: 0.9em;
  font-size: 15px;
  padding-left: 0.9em;
  user-select: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.btn-primary {
  background: linear-gradient(135deg, #e4b76f, var(--accent));
  color: #14100a;
  box-shadow: 0 10px 34px rgba(217, 165, 90, 0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(217, 165, 90, 0.36); }

.btn-ghost {
  border-color: rgba(233, 230, 223, 0.25);
  color: var(--text);
  background: rgba(10, 12, 15, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

.btn-small { padding: 10px 18px; font-size: 12px; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.nav.scrolled {
  /* solide Fuellung statt backdrop-filter: kein Re-Blur pro Scroll-Frame */
  background: rgba(10, 12, 15, 0.95);
  box-shadow: 0 1px 0 var(--line);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.28em;
  color: var(--text);
}
.brand span { color: var(--accent); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
}
.nav-links a {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

.lang-toggle {
  background: none;
  border: 1px solid rgba(233, 230, 223, 0.25);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 8px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.lang-toggle:hover { color: var(--accent); border-color: var(--accent); }
.mobile-menu .lang-toggle { font-size: 15px; padding: 10px 20px; }

.burger {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  width: 40px; height: 40px;
  cursor: pointer;
}
.burger svg { width: 26px; height: 26px; }

/* mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(8, 10, 13, 0.97);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.18em;
  color: var(--text);
}
.mobile-menu a:hover { color: var(--accent); }
.mobile-close {
  position: absolute;
  top: 22px; right: 26px;
  background: none; border: none;
  color: var(--muted);
  font-size: 30px;
  cursor: pointer;
}

/* ---------- hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 140px 24px 90px;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -60px 0 0 0;
  z-index: -2;
  background-image: url("../img/hero-booth.jpg");
  background-size: cover;
  background-position: center 30%;
  will-change: transform;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at center 45%, rgba(10, 12, 15, 0.18) 0%, rgba(10, 12, 15, 0.78) 72%),
    linear-gradient(180deg, rgba(10, 12, 15, 0.62) 0%, rgba(10, 12, 15, 0.25) 40%, var(--bg) 96%);
}
.hero-runes {
  font-size: 15px;
  letter-spacing: 1.1em;
  padding-left: 1.1em;
  color: rgba(233, 230, 223, 0.4);
  margin-bottom: 26px;
}
.hero h1 {
  font-size: clamp(52px, 11vw, 118px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-shadow: 0 8px 60px rgba(0, 0, 0, 0.6);
}
.hero .tagline {
  margin-top: 18px;
  font-size: clamp(16px, 2.2vw, 21px);
  color: rgba(233, 230, 223, 0.88);
  letter-spacing: 0.04em;
}
.hero .tagline strong { color: var(--accent); font-weight: 600; }
.hero-sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-actions {
  margin-top: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: floaty 2.6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50% { transform: translate(-50%, 8px); opacity: 1; }
}

/* ---------- countdown (optional) ---------- */
.countdown {
  margin-top: 34px;
  display: none;
  justify-content: center;
  gap: 18px;
}
.countdown.visible { display: flex; }
.count-box {
  min-width: 74px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(10, 12, 15, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.count-box b { display: block; font-size: 26px; font-family: var(--font-display); color: var(--accent); }
.count-box span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ---------- latest release ---------- */
.latest {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.latest-card {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 54px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 44px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.latest-cover {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
}
.latest-cover:hover { transform: rotate(0deg) scale(1.02); }
.latest-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.latest-info .type-badge { margin-bottom: 16px; }
.latest-info h3 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-bottom: 10px;
}
.latest-info .date { color: var(--muted); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.latest-info p { color: var(--muted); margin-bottom: 28px; max-width: 480px; }
.latest-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* pre-save countdown (in the latest/pre-save section) */
.presave-countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 28px;
}
.presave-card .type-badge {
  color: var(--ice);
  background: rgba(143, 182, 189, 0.12);
  border-color: rgba(143, 182, 189, 0.4);
}
.presave-card .latest-info p { margin-bottom: 20px; }

.type-badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(217, 165, 90, 0.35);
  padding: 6px 14px;
  border-radius: 999px;
}

/* ---------- music / players ---------- */
.players {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 56px;
}
.player-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.player-card .player-head {
  padding: 18px 22px;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.player-card iframe { display: block; width: 100%; border: 0; }
.video-frame { position: relative; padding-top: 56.25%; }
.video-frame iframe { position: absolute; inset: 0; height: 100%; }

/* ---------- music videos ---------- */
.videos { background: var(--bg-2); }
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.video-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.video-card:hover { transform: translateY(-6px); border-color: rgba(217, 165, 90, 0.4); }
.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.video-card:hover .video-thumb img { transform: scale(1.06); }
.play-badge {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(10, 12, 15, 0.15), rgba(10, 12, 15, 0.45));
  color: #fff;
  transition: background 0.3s ease;
}
.play-badge svg {
  width: 54px; height: 54px;
  padding: 14px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(10, 12, 15, 0.65);
  border: 1px solid rgba(233, 230, 223, 0.3);
  transition: background 0.3s ease, transform 0.3s ease;
}
.video-card:hover .play-badge svg { background: var(--accent); color: #14100a; transform: scale(1.06); }
.video-body { padding: 20px; }
.video-body h3 { font-size: 18px; letter-spacing: 0.04em; }
.video-body .v-sub { color: var(--muted); font-size: 13px; margin-top: 5px; }
.video-body .v-stats {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.video-body .v-stats span { display: inline-flex; align-items: center; gap: 7px; }
.video-body .v-stats svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }

/* ---------- saga / roadmap ---------- */
.saga {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 12, 15, 0.82) 18%, rgba(10, 12, 15, 0.82) 82%, var(--bg) 100%),
    url("../img/saga-coast.jpg") center/cover no-repeat;
}
.timeline {
  position: relative;
  margin-top: 70px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, rgba(217, 165, 90, 0.5) 8%, rgba(217, 165, 90, 0.5) 92%, transparent);
}
.t-item {
  position: relative;
  width: 50%;
  padding: 0 54px 64px;
}
.t-item:nth-child(odd) { left: 0; text-align: right; }
.t-item:nth-child(even) { left: 50%; }
/* the diamond marker sits centered on the middle line, not at the card edge */
.t-item::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 13px; height: 13px;
  background: var(--bg);
  border: 2px solid var(--accent);
}
.t-item:nth-child(odd)::before { right: 0; transform: translateX(50%) rotate(45deg); }
.t-item:nth-child(even)::before { left: 0; transform: translateX(-50%) rotate(45deg); }

.t-card {
  display: inline-block;
  position: relative;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  max-width: 400px;
  width: 100%;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.t-card:hover { transform: translateY(-4px); border-color: rgba(217, 165, 90, 0.4); }
.t-card .t-top { display: flex; gap: 16px; align-items: center; }
.t-card h3 { font-size: 19px; letter-spacing: 0.04em; }
.t-card img {
  width: 86px; height: 86px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}
.t-card .chapter {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ice);
  margin-bottom: 4px;
}
.t-card .t-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.t-card .t-note { color: var(--muted); font-size: 13.5px; margin-top: 14px; }
.t-card .t-links { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }
.t-card .t-links a {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(217, 165, 90, 0.35);
  padding: 6px 13px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.t-card .t-links a:hover { background: var(--accent); color: #14100a; }

.t-item.upcoming .t-card { border-style: dashed; border-color: rgba(143, 182, 189, 0.4); }
.t-item.upcoming::before { border-color: var(--ice); }

/* ---------- stats ---------- */
.stats { background: var(--bg-2); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 24px;
  margin-top: 64px;
}
.stat-card {
  text-align: center;
  padding: 10px 8px;
}
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #f4e2b8 0%, var(--accent) 55%, #a8763a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stats-note { margin-top: 34px; text-align: center; color: var(--muted); font-size: 13px; }
.stats-note a { color: var(--ice); }
.stats-note a:hover { text-decoration: underline; }
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: 1px;
}

/* platform buttons */
.platforms {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid rgba(233, 230, 223, 0.22);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.platform-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.platform-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }

/* ---------- about ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 70px;
  align-items: center;
}
.about-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.about-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(233, 230, 223, 0.12);
  border-radius: var(--radius);
  pointer-events: none;
}
.about-photo img { width: 100%; aspect-ratio: 896 / 1200; object-fit: cover; transition: transform 0.6s ease; }
.about-photo:hover img { transform: scale(1.03); }
.about-text h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 22px; }
.about-text p { color: var(--muted); margin-bottom: 18px; }
.about-text p strong { color: var(--text); font-weight: 600; }
.facts {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 26px;
  list-style: none;
}
.facts li {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 16px;
}
.facts b { display: block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.facts span { font-size: 15px; }

/* ---------- ravnir collab ---------- */
.collab { background: var(--bg-2); }
.collab-grid {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 70px;
  align-items: center;
}
.collab-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.collab-text h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 20px; }
.collab-text p { color: var(--muted); margin-bottom: 26px; }
.collab-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.collab-videos a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.collab-videos a:hover { border-color: var(--accent); color: var(--accent); }
.collab-videos svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; }

/* ---------- discography grid ---------- */
.disco-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.disco-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.disco-card:hover { transform: translateY(-6px); border-color: rgba(217, 165, 90, 0.4); }
.disco-cover { position: relative; overflow: hidden; }
.disco-cover img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.5s ease; }
.disco-card:hover .disco-cover img { transform: scale(1.06); }
.disco-cover .type-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(10, 12, 15, 0.78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.disco-body { padding: 18px 18px 20px; }
.disco-body h3 { font-size: 17px; letter-spacing: 0.04em; }
.disco-body .d-meta { color: var(--muted); font-size: 12.5px; margin-top: 5px; }

/* optional streams badge (shown when a release has a "streams" number in data.js) */
.streams-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(217, 165, 90, 0.32);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.streams-badge svg { width: 13px; height: 13px; flex: 0 0 auto; }
.t-card .streams-badge { margin-top: 8px; }
.disco-body .d-links { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.disco-body .d-links a {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(217, 165, 90, 0.35);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.disco-body .d-links a:hover { background: var(--accent); color: #14100a; }

/* ---------- shop teaser ---------- */
.shop-teaser {
  background:
    linear-gradient(90deg, rgba(10, 12, 15, 0.94) 30%, rgba(10, 12, 15, 0.55)),
    url("../img/lambo-wide.jpg") center 40%/cover no-repeat;
}
.shop-teaser-inner { max-width: 560px; }
.shop-teaser h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.shop-teaser p { color: var(--muted); margin-bottom: 30px; }

/* ---------- newsletter ---------- */
.join { background: var(--bg-2); }
.join-box {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}
.join-form {
  margin-top: 34px;
  display: flex;
  gap: 12px;
}
.join-form input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 15px 24px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease;
}
.join-form input:focus { border-color: var(--accent); }
.join-msg { margin-top: 16px; font-size: 14px; color: var(--ice); min-height: 22px; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 64px 0 40px;
  background: var(--bg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 44px;
}
.footer-brand .brand { font-size: 24px; }
.footer-brand p { color: var(--muted); font-size: 14px; margin-top: 14px; max-width: 320px; }
.footer-col .footer-h {
  font-family: var(--font-body);
}
.footer-col .footer-h,
.footer-col h5 {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--text); font-size: 14.5px; opacity: 0.85; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--accent); opacity: 1; }
.footer-bottom {
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 13px;
}

.footer-legal { display: inline-flex; gap: 10px; align-items: center; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--accent); }
.footer-legal span { color: var(--line); }

/* ---------- social icons ---------- */
.socials { display: flex; gap: 12px; margin-top: 22px; }
.socials a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.socials a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- shop page ---------- */
.page-hero {
  padding: 190px 24px 90px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10, 12, 15, 0.82), var(--bg)),
    url("../img/hero-booth.jpg") center 26%/cover no-repeat;
}
.page-hero h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: 0.12em; }
.page-hero p { color: var(--muted); margin-top: 16px; max-width: 560px; margin-inline: auto; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 60px;
}
.product {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.product:hover { transform: translateY(-6px); border-color: rgba(217, 165, 90, 0.4); }
.product-media {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(217, 165, 90, 0.12), transparent 62%),
    var(--panel-2);
  position: relative;
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media .glyph {
  font-size: 64px;
  color: rgba(233, 230, 223, 0.4);
  font-family: var(--font-display);
}
.soon-badge {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(10, 12, 15, 0.82);
  border: 1px solid rgba(143, 182, 189, 0.45);
  color: var(--ice);
  padding: 6px 12px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.product-body { padding: 20px; }
.product-body h3 { font-size: 17px; letter-spacing: 0.03em; }
.product-body .p-type { color: var(--muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 5px; }
.product-body .p-price { margin-top: 12px; font-family: var(--font-display); font-size: 19px; color: var(--accent); }
.product-body .btn { margin-top: 16px; width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { transform: none; box-shadow: none; }

.shop-note {
  margin-top: 56px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .disco-grid, .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .latest-card { grid-template-columns: 300px 1fr; gap: 36px; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-photo { max-width: 460px; margin: 0 auto; }
  .collab-grid { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  section { padding: 84px 0; }
  .nav-links, .nav-cta .btn { display: none; }
  .burger { display: block; }
  .players { grid-template-columns: 1fr; }
  .latest-card { grid-template-columns: 1fr; padding: 28px; }
  .latest-cover { max-width: 320px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 14px; }
  .saga { background-attachment: scroll; }
  .videos-grid { grid-template-columns: 1fr; }
  .platform-btn { padding: 11px 16px; }
  /* timeline collapses to a single left-aligned column */
  .timeline::before { left: 10px; margin-left: 0; }
  .t-item { width: 100%; padding: 0 0 46px 44px; }
  .t-item:nth-child(odd) { left: 0; text-align: left; }
  .t-item:nth-child(even) { left: 0; }
  .t-item:nth-child(odd)::before,
  .t-item:nth-child(even)::before { left: 10px; right: auto; transform: translateX(-50%) rotate(45deg); }
}

@media (max-width: 640px) {
  .disco-grid, .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .join-form { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; }
  .stats-grid { gap: 14px; }
  .facts { grid-template-columns: 1fr; }
  .collab-videos { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .disco-grid, .shop-grid { grid-template-columns: 1fr; }
}

/* touch devices: fixed background-attachment is broken on iOS/iPadOS */
@media (hover: none) {
  .saga { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; opacity: 1; transform: none; }
  .scroll-cue { animation: none; }
}

/* =========================================================
   MOTION v3 + PHONE-SEKTION (Scroll-3D-Handy)
   ========================================================= */

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), #f0d9a8);
  transform: scaleX(0); transform-origin: 0 50%; z-index: 300; pointer-events: none;
}

.phone-sek { position: relative; height: 320vh; background: var(--bg-2); }
/* Desktop: Hoehe ist explizit (320vh), darum kann der Browser Layout+Paint des
   3D-Handys ueberspringen, solange die Sektion weit ausserhalb des Viewports ist,
   ohne dass sich die Seitenhoehe (und damit die ScrollTrigger-Positionen) aendert. */
@media (min-width: 861px) {
  .phone-sek { content-visibility: auto; contain-intrinsic-size: auto 320vh; }
}
.phone-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.phone-wrap { display: grid; grid-template-columns: 1fr minmax(280px, 420px); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: 100%; }

.phone-text .section-title { margin-bottom: 1.2rem; }
.phone-steps { position: relative; min-height: 240px; }
.phone-step {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.phone-step.ist-aktiv { opacity: 1; transform: none; pointer-events: auto; }
.phone-step h3 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.9rem); color: var(--text); margin-bottom: 0.6rem; }
.phone-step p { color: var(--muted); max-width: 44ch; margin-bottom: 1.1rem; }

.phone-buehne { perspective: 1200px; display: flex; justify-content: center; }
.phone { position: relative; will-change: transform; transform-style: preserve-3d; }
.phone-rahmen {
  position: relative; width: clamp(220px, 26vw, 300px); aspect-ratio: 9 / 19;
  border-radius: 44px; padding: 12px;
  background: linear-gradient(160deg, #2a2f38, #10141a 60%, #1d232c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.06), 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}
.phone-notch {
  position: absolute; top: 22px; left: 50%; translate: -50% 0;
  width: 34%; height: 22px; border-radius: 12px; background: #05070a; z-index: 3;
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #05070a; }
.p-screen { position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s ease; }
.p-screen.ist-aktiv { opacity: 1; }
.p-screen img { width: 100%; height: 100%; object-fit: cover; }

/* TikTok-Look */
.p-tiktok .p-ui-unten { position: absolute; left: 14px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.p-handle { font-weight: 600; font-size: 13px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.p-caption { font-size: 12px; color: #eee; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.p-ui-rechts { position: absolute; right: 10px; bottom: 60px; display: flex; flex-direction: column; gap: 16px; font-size: 20px; z-index: 2; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.7)); }
.p-tiktok::after { content: ""; position: absolute; inset: 55% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65)); }

/* Spotify-Look */
.p-sp-verlauf { position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, transparent, #05070a 78%); }
.p-sp-info { position: absolute; left: 16px; right: 16px; bottom: 26px; z-index: 2; }
.p-sp-name { display: block; font-family: var(--font-display); font-size: 26px; color: #fff; letter-spacing: 0.03em; }
.p-sp-hoerer { display: block; font-size: 11.5px; color: #b8c0ba; margin-top: 4px; }
.p-sp-play {
  position: absolute; right: 0; bottom: 4px; width: 44px; height: 44px; border-radius: 50%;
  background: #1ed760; color: #05070a; display: grid; place-items: center; font-size: 16px; padding-left: 3px;
}

/* YouTube-Look */
.p-youtube img { object-position: center 30%; }
.p-yt-balken { position: absolute; left: 0; right: 0; bottom: 64px; height: 3px; background: rgba(255,255,255,0.25); }
.p-yt-balken::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 62%; background: #f00; }
.p-yt-punkt { position: absolute; left: 62%; top: 50%; translate: -50% -50%; width: 11px; height: 11px; border-radius: 50%; background: #f00; }
.p-yt-titel { position: absolute; left: 14px; bottom: 34px; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
.p-youtube::after { content: ""; position: absolute; inset: 50% 0 0 0; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7)); }

.phone-glanz {
  position: absolute; inset: 0; border-radius: 44px; pointer-events: none; z-index: 4;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 45%, transparent 60%);
}
.phone-schatten {
  position: absolute; left: 8%; right: 8%; bottom: -34px; height: 40px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(6px); transform: translateZ(-60px);
}

@media (max-width: 860px) {
  .phone-sek { height: auto; }
  .phone-sticky { position: relative; height: auto; overflow: visible; padding: 4rem 0; }
  .phone-wrap { grid-template-columns: 1fr; }
  .phone-buehne { order: -1; margin-bottom: 2rem; }
  .phone-steps { min-height: 0; }
  .phone-step { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .phone-sek { height: auto; }
  .phone-sticky { position: relative; height: auto; padding: 4rem 0; }
  .phone-step { position: relative; opacity: 1; transform: none; margin-bottom: 2rem; }
}

/* ========== FROM THE NORTH - Merch-Sektion (monochrom, Anton) ========== */
.ftn-merch {
  background: #000;
  color: #fff;
  padding: clamp(4rem, 9vw, 7rem) 0;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
}
.ftn-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #888;
  display: block;
  margin-bottom: 0.9rem;
}
.ftn-titel {
  font-family: "Anton", Impact, sans-serif !important;
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff !important;
  margin: 0 0 0.7rem;
}
.ftn-sub {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.9rem;
  color: #9a9a9a;
  margin: 0 0 2.6rem;
}
.ftn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 2.4rem;
}
.ftn-karte {
  display: block;
  background: #0a0a0a;
  border: 1px solid #222;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.ftn-karte:hover { border-color: #fff; transform: translateY(-5px); }
.ftn-karte img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ftn-karte:hover img { transform: scale(1.05); }
.ftn-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid #222;
}
.ftn-name {
  font-family: "Anton", Impact, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.ftn-preis {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  color: #bbb;
  white-space: nowrap;
}
.ftn-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.ftn-knopf {
  font-family: "Anton", Impact, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  background: #fff;
  padding: 0.85rem 2.2rem;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease;
}
.ftn-knopf:hover { transform: translateY(-2px); background: #e8e8e8; color: #000; }
.ftn-promo {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: #777;
}


/* ========== MOTION v3: Konturwoerter, SplitText, Cursor ========== */
html, body { overflow-x: clip; }
.st-wort { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.st-zeichen { display: inline-block; }
.giant-word {
  position: absolute;
  top: -0.26em;
  left: 50%;
  translate: -50% 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 20vw, 16rem);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 165, 90, 0.13);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
section { position: relative; }
section > .wrap { position: relative; z-index: 1; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
.cursor-dot {
  position: fixed; top: -4px; left: -4px; width: 8px; height: 8px;
  border-radius: 50%; background: #e9d3a0;
  pointer-events: none; z-index: 400;
}
.cursor-ring {
  position: fixed; top: -18px; left: -18px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(217, 165, 90, 0.55);
  pointer-events: none; z-index: 399;
  transition: width 0.3s ease, height 0.3s ease, top 0.3s ease, left 0.3s ease,
    background 0.3s ease, border-color 0.3s ease;
}
.cursor-ring.ist-gross {
  width: 64px; height: 64px; top: -32px; left: -32px;
  background: rgba(217, 165, 90, 0.08);
  border-color: rgba(217, 165, 90, 0.85);
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
  .giant-word { display: none; }
}

/* =========================================================
   YOUTUBE-TOR - Abo-Popup, Handy zuerst
   ========================================================= */

/* Scroll-Sperre. Lenis wird auf dieser Seite nicht mehr geladen, motion.js
   haengt direkt am nativen Scroll, deshalb genuegt overflow:hidden.
   --eld-sbw gleicht die verschwindende Scrollleiste aus, sonst springen
   Seite und fixe Nav beim Oeffnen um deren Breite. Auf dem Handy ist der
   Wert 0, dort passiert nichts. */
html.eld-modal-auf,
html.eld-modal-auf body { overflow: hidden; }
html.eld-modal-auf body,
html.eld-modal-auf .nav { padding-right: var(--eld-sbw, 0px); }
/* Der eigene Mauszeiger der Seite liegt auf z-index 400 und wuerde hinter
   dem Tor verschwinden. Da html.has-cursor den echten Zeiger ausblendet,
   haette der Desktop-Besucher sonst gar keinen Zeiger mehr. */
html.eld-modal-auf .cursor-dot { z-index: 620; }
html.eld-modal-auf .cursor-ring { z-index: 619; }
/* Ueber dem fremden Google-Rahmen zeigt das System seinen eigenen Pfeil,
   dort blenden wir den gezeichneten Zeiger aus statt beide zu zeigen. */
html.yt-cursor-aus .cursor-dot,
html.yt-cursor-aus .cursor-ring { opacity: 0; }

.yt-tor { display: none; }
.yt-tor:not([hidden]) { display: flex; }
.yt-tor {
  position: fixed;
  inset: 0;
  z-index: 500;                /* ueber Nav 50, Menue 60, Fortschritt 300 */
  align-items: flex-end;       /* Handy: Blatt von unten, Daumenreichweite */
  justify-content: center;
  overscroll-behavior: contain;
  /* KEIN touch-action hier. Der Browser verschneidet touch-action ueber die
     ganze Vorfahrenkette: "none" auf diesem Kasten wuerde das "pan-y" der
     Karte ausloeschen (none & pan-y = none) und die Karte liesse sich am
     Finger nicht mehr scrollen, sobald ihr Inhalt hoeher wird als das
     Fenster. Die Sperre sitzt deshalb auf dem Schleier, der ein Geschwister
     der Karte ist und nicht ihr Vorfahre. */
}
.yt-tor-schleier {
  position: absolute; inset: 0;
  touch-action: none;          /* Wischen auf dem Schleier scrollt nichts */
  background: rgba(5, 7, 10, 0.76);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.yt-tor.ist-auf .yt-tor-schleier { opacity: 1; }

.yt-tor-karte {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 94vh;
  max-height: 94dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;         /* die Karte selbst darf scrollen */
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -20px 70px rgba(0, 0, 0, 0.62);
  outline: none;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.28s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.yt-tor.ist-auf .yt-tor-karte { opacity: 1; transform: none; }

/* Bildband: portrait-front.jpg liegt durch die Handy-Sektion schon im
   Cache, kostet also keine zusaetzliche Anfrage. */
.yt-tor-bild {
  height: 120px;
  border-radius: 21px 21px 0 0;
  background: url("../img/portrait-front.jpg") center 30% / cover no-repeat;
  position: relative;
}
.yt-tor-bild::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 21px 21px 0 0;
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.05) 0%, rgba(20, 26, 34, 0.8) 78%, var(--panel) 100%);
}

.yt-tor-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px;               /* volle Daumenflaeche */
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(233, 230, 223, 0.18);
  background: rgba(10, 12, 15, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.yt-tor-x svg { width: 16px; height: 16px; }
.yt-tor-x:hover { color: var(--accent); border-color: var(--accent); }

/* Das Blatt sitzt am Handy buendig auf der Unterkante. Ohne den sicheren
   Bereich landen die beiden Ausstiege im Streifen der Wischgeste. */
.yt-tor-inhalt {
  padding: 14px 22px 22px;
  padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.yt-tor-kicker { margin-bottom: 8px; font-size: 11px; letter-spacing: 0.26em; }
.yt-tor-h {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.2;
}
/* steht vor der Ueberschrift, gehoert optisch zum Kicker */
.yt-tor-bezug { color: var(--accent); font-size: 14.5px; margin-bottom: 9px; }
.yt-tor-text { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-top: 10px; }

.yt-tor-beleg {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px;
  font-size: 12.5px; color: var(--ice); letter-spacing: 0.04em;
}
.yt-tor-beleg b { color: var(--text); font-weight: 600; }

.yt-tor-cta { width: 100%; margin-top: 18px; min-height: 56px; }
.yt-tor-hinweis { margin-top: 11px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.yt-tor-hinweis a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Stufe 2 ---- */
.yt-tor-schritt { margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ice); }
/* Googles Abo-Knopf kommt als fester Rahmen von rund 450 mal 24 Pixeln und
   ist darin links ausgerichtet. Die Schale schneidet den leeren Rest ab und
   gibt dem kleinen Knopf eine ruhige, grosse Flaeche. */
.yt-tor-schale {
  margin-top: 10px;
  min-height: 60px;
  display: flex; align-items: center;
  padding: 0 14px;
  overflow: hidden;
  background: rgba(233, 230, 223, 0.05);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.yt-tor-schale.laedt::before {
  content: "";
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: yt-dreh 0.8s linear infinite;
}
@keyframes yt-dreh { to { transform: rotate(360deg); } }
.yt-tor-direkt { display: flex; width: 100%; margin-top: 12px; min-height: 52px; }

/* ---- beide Ausstiege ---- */
.yt-tor-exits {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 4px 10px;
  margin-top: 10px;
}
.yt-tor-textknopf {
  min-height: 44px; padding: 10px 8px;
  background: none; border: 0;
  color: var(--muted);
  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em;
  cursor: pointer;
}
.yt-tor-textknopf:hover { color: var(--text); }
.yt-tor-trenner { color: var(--line); }

/* Sichtbarer Fokus, die Seite blendet sonst den Zeiger aus */
.yt-tor-karte :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Elemente, die das Skript aus- und einblendet */
.yt-tor-bezug[hidden], .yt-tor-beleg[hidden],
.yt-tor-stufe1[hidden], .yt-tor-stufe2[hidden],
.yt-tor-schale[hidden], .yt-tor-cta[hidden],
.yt-tor-hinweis[hidden] { display: none; }

/* ab Tablet: mittige Karte statt Blatt von unten */
@media (min-width: 720px) {
  .yt-tor { align-items: center; padding: 28px; }
  .yt-tor-karte {
    border-radius: 20px;
    border-bottom: 1px solid var(--line);
    max-height: 88vh; max-height: 88dvh;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  }
  .yt-tor-bild { height: 150px; border-radius: 19px 19px 0 0; }
  .yt-tor-bild::after { border-radius: 19px 19px 0 0; }
  .yt-tor-inhalt { padding: 18px 30px 26px; }
}

/* Handy quer und sehr flache Fenster: Bildband weg, alles bleibt erreichbar */
@media (max-height: 620px) {
  .yt-tor-bild { display: none; }
  .yt-tor-inhalt { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .yt-tor-schleier, .yt-tor-karte { transition: none; }
  .yt-tor-karte { transform: none; }
  .yt-tor-schale.laedt::before { animation: none; }
}

/* Sehr schmale Handys: Knopfbeschriftung bleibt einzeilig und der Trenner
   zwischen den beiden Ausstiegen haengt nicht am Zeilenende. */
@media (max-width: 360px) {
  .yt-tor-cta { padding-left: 16px; padding-right: 16px; font-size: 13px; letter-spacing: 0.05em; }
  .yt-tor-trenner { display: none; }
  .yt-tor-exits { gap: 0 14px; }
}