/* Neue Abschnitte der Seiten von The Rift Run und Rift Crawl (vorlagen/rift-reihe.mjs).
   Die Bausteine kommen aus turm.css (Crystal Keep); hier stehen nur die Farben der
   jeweiligen Produktseite und was bei Rift anders ist. */
.reihe {
  --ck-bg: var(--detail-bg); --ck-deep: color-mix(in srgb, var(--detail-bg) 72%, #000); --ck-ink: var(--detail-ink); --ck-muted: var(--detail-muted);
  --ck-line: var(--detail-line); --ck-gold: var(--detail-accent); --ck-violet: var(--detail-accent); --ck-card: color-mix(in srgb, var(--detail-bg) 88%, #fff);
  position: relative; background: var(--ck-bg); color: var(--ck-ink);
}
.reihe .rb { position: relative; isolation: isolate; padding-block: var(--la-section, clamp(3rem, 7vw, 6rem)); scroll-margin-top: calc(var(--product-bar) + 1rem); }
.reihe .rb:nth-child(even) { background: var(--ck-deep); }
.reihe .eyebrow { margin: 0; color: var(--ck-gold); }
.reihe .ck-head h2 { color: var(--ck-ink); }

/* Dreierreihe: eine Form fehlt, dann erscheint sie. */
.rb-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1.4rem); max-width: 56rem; }
.rb-reihe[data-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 44rem; }
.rb-reihe p { display: grid; gap: .5rem; margin: 0; padding: clamp(.9rem, 2.6vw, 1.8rem); border: 1px solid var(--ck-line); border-radius: var(--la-radius-m, 16px); background: var(--ck-card); }
.rb-reihe small { color: var(--ck-muted); font: 700 clamp(.6rem, 1.3vw, .75rem)/1.3 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.rb-reihe b { min-height: 1.1em; font: 700 clamp(1.6rem, 6vw, 4.2rem)/1.05 var(--heading); letter-spacing: -.04em; color: #fff; transition: color .4s ease, opacity .3s ease; }
.rb-reihe .ist-luecke { border-color: var(--ck-gold); box-shadow: 0 0 0 1px var(--ck-gold); }
.rb-reihe .ist-luecke b { color: var(--ck-gold); }
.rb-reihe .ist-offen b { opacity: .55; }
.rb-stufen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.7rem, 1.8vw, 1.4rem); margin: clamp(1.4rem, 3vw, 2.4rem) 0 0; padding: 0; list-style: none; }
.rb-stufen li { padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--ck-line); border-radius: var(--la-radius-m, 16px); background: var(--ck-card); }
.rb-stufen h3 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.04em; color: var(--ck-gold); }
.rb-stufen p { margin: .4rem 0 .8rem; color: var(--ck-muted); font-size: .98rem; line-height: 1.4; }
.rb-stufen span { font: 700 .95rem/1.2 var(--heading); }

/* Welten: Die gewählte Welt steht scharf als Kulisse hinter dem ganzen Abschnitt.
   Das große Bild entfällt deshalb; Name und Abschnitt stehen groß davor. */
.reihe .ck-welt-kulisse img { filter: none; transform: none; }
.reihe .ck-welten::before { background: linear-gradient(180deg, var(--ck-bg) 0, color-mix(in srgb, var(--ck-bg) 30%, transparent) 10rem, color-mix(in srgb, var(--ck-bg) 55%, transparent) 60%, var(--ck-bg) 100%); }
.reihe .ck-welten { min-height: 100vh; }
.reihe .ck-welt-bild { display: none; }
.reihe .ck-welt-buehne { position: static; min-height: clamp(8rem, 30vh, 20rem); display: flex; align-items: flex-end; }
.reihe .ck-welt-buehne strong { font-size: clamp(2.4rem, 7vw, 5.4rem); }
.reihe .ck-bereiche button img { aspect-ratio: 16 / 9; }
.reihe .ck-welt-buehne { max-width: 66rem; }
.reihe .ck-welt-bild { aspect-ratio: 16 / 9; }
.reihe .ck-welt-bild img { animation: none; }
.reihe .ck-bereiche { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.8rem, 2vw, 1.6rem); }
.reihe .ck-bereiche h3 { color: var(--ck-gold); }
.reihe .ck-bereiche ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reihe .ck-bereiche button img { aspect-ratio: 16 / 9; }
.reihe .ck-bereiche button[aria-current] { border-color: var(--ck-gold); box-shadow: 0 0 0 2px var(--ck-gold); }

/* Teams und Kräfte in den Farben der Seite. */
.reihe .rb-teams .ck-head, .reihe .rb-saison .ck-head { margin-inline: auto; text-align: center; }
.reihe .ck-haus h3 { color: var(--haus); }
.reihe .ck-haus-wappen { width: auto; height: clamp(11rem, 26vw, 19rem); }
.reihe .ck-haus li { background: color-mix(in srgb, var(--ck-bg) 70%, transparent); }
.reihe .ck-kraefte li { background: var(--ck-card); }
.reihe .ck-kraefte li:hover { border-color: var(--ck-gold); }
.reihe .rb-saison { text-align: center; }
.reihe .ck-stufen li { background: linear-gradient(180deg, color-mix(in srgb, var(--ck-gold) 85%, transparent), color-mix(in srgb, var(--ck-gold) 25%, transparent)); }

.rb-expedition { max-width: 58rem; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--ck-line); border-radius: var(--la-radius-l, 28px); box-shadow: 0 60px 120px -60px #000; }
.rb-expedition img { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes rb-up { from { opacity: 0; transform: translateY(2.5rem); } }
    .rb-stufen li, .rb-reihe p { animation: rb-up linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@media (max-width: 900px) {
  .reihe .ck-bereiche { grid-template-columns: 1fr; }
  .reihe .ck-bereiche ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rb-stufen { grid-template-columns: 1fr; }
  .reihe .ck-bereiche ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe .ck-bereiche li:last-child { grid-column: auto; }
  .reihe .ck-bereiche li:last-child img { aspect-ratio: 16 / 9; }
  .reihe .ck-welt-bild { aspect-ratio: 16 / 9; }
}

/* ── Großer Auftritt (Codex-Auftrag 17 · B5): Auftaktbild, Schriftzug, Abschnittsbilder ── */
.auftritt-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.detail-schriftzug { display: block; width: min(100%, 31rem); height: auto; margin-block: .2rem .6rem; filter: drop-shadow(0 8px 26px #000a); }
.detail-page:has(.detail-schriftzug) .detail-figure { display: none; }
@media (min-width: 901px) {
  .detail-page:has(.detail-schriftzug) .detail-art { opacity: 1; }
  .detail-page:has(.detail-schriftzug) .detail-hero::before {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--detail-shade) 92%, transparent) 0%, color-mix(in srgb, var(--detail-shade) 70%, transparent) 30%, color-mix(in srgb, var(--detail-shade) 12%, transparent) 62%, transparent 100%),
      linear-gradient(0deg, var(--detail-bg), transparent 26%);
  }
}
@media (max-width: 900px) {
  .detail-page:has(.detail-schriftzug) .detail-art { opacity: .7; }
  .detail-schriftzug { width: min(88%, 22rem); }
}
.reihe .rb[style*="--rb-bild"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--ck-bg) 0%, color-mix(in srgb, var(--ck-bg) 70%, transparent) 20%, color-mix(in srgb, var(--ck-bg) 78%, transparent) 72%, var(--ck-bg) 100%),
    var(--rb-bild) center / cover no-repeat;
}
@media (max-width: 760px) and (orientation: portrait) {
  .reihe .rb[style*="--rb-bild"]::before {
    background:
      linear-gradient(180deg, var(--ck-bg) 0%, color-mix(in srgb, var(--ck-bg) 74%, transparent) 16%, color-mix(in srgb, var(--ck-bg) 82%, transparent) 76%, var(--ck-bg) 100%),
      var(--rb-bild-hoch) center / cover no-repeat;
  }
}

/* Tipp-Probe: selbst eintippen, der Läufer rückt zum Portal. */
.rb-probe { max-width: 56rem; margin-top: clamp(1.6rem, 4vw, 3rem); padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--ck-line); border-radius: var(--la-radius-m, 16px); background: color-mix(in srgb, var(--ck-bg) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.rb-probe h3 { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -.03em; color: var(--ck-ink); }
.rb-probe-zeile { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1.4rem; }
.rb-probe-zeile p { display: grid; gap: .3rem; margin: 0; }
.rb-probe-zeile small { color: var(--ck-muted); font: 700 .68rem/1.3 var(--heading); letter-spacing: .14em; text-transform: uppercase; }
.rb-probe-zeile b, .rb-probe-zeile input { font: 700 clamp(1.5rem, 4.6vw, 2.6rem)/1.1 var(--heading); letter-spacing: -.03em; color: #fff; }
.rb-probe-zeile input { width: 8.5ch; max-width: 100%; padding: .1em .15em; border: 0; border-bottom: 3px solid var(--ck-gold); border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--ck-gold) 12%, transparent); color: var(--ck-gold); }
.rb-probe-zeile input:focus-visible { outline: 3px solid var(--ck-gold); outline-offset: 3px; }
.rb-probe-zeile button { align-self: center; }
.rb-probe-meldung { min-height: 1.5em; margin: .9rem 0 0; color: var(--ck-ink); font-weight: 700; }
.rb-probe-bahn { --stand: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: end; gap: .5rem; height: 6.5rem; margin-top: .6rem; padding-left: 3.4rem; }
.rb-probe-bahn span { height: .55rem; border-radius: 99px; background: var(--ck-line); transition: background-color .4s ease; }
.rb-probe-bahn[data-stand="1"] span:nth-child(-n+1), .rb-probe-bahn[data-stand="2"] span:nth-child(-n+2), .rb-probe-bahn[data-stand="3"] span { background: var(--ck-gold); }
.rb-probe-bahn i { align-self: end; width: 1.5rem; height: 1.5rem; margin: 0 .5rem -.45rem .3rem; border: 3px solid var(--ck-muted); border-radius: 4px; rotate: 45deg; transition: border-color .4s ease, background-color .4s ease, scale .4s ease; }
.rb-probe-bahn[data-stand="3"] i { border-color: var(--ck-gold); background: color-mix(in srgb, var(--ck-gold) 45%, transparent); scale: 1.25; }
.rb-probe-bahn img { position: absolute; bottom: .5rem; left: calc(var(--stand) * (100% - 6.6rem) / 3); width: auto; height: 5.6rem; transition: left .7s cubic-bezier(.3, .8, .3, 1); }
.rb-probe-weiter { margin: 1rem 0 0; }
@media (prefers-reduced-motion: reduce) { .rb-probe-bahn img, .rb-probe-bahn span, .rb-probe-bahn i { transition: none; } }