/*
Theme Name: Hello Elementor Child – All Dead
Theme URI: https://theyarealldead.com
Description: Child Theme für They Are All Dead
Author: Kindly Solutions
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ============================================
   FONTS
   ============================================ */

/* Archivo */
@font-face {
  font-display: swap;
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/archivo-v25-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/archivo-v25-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  src: url('fonts/archivo-v25-latin-800.woff2') format('woff2');
}

/* Spectral */
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/spectral-v15-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/spectral-v15-latin-300italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/spectral-v15-latin-italic.woff2') format('woff2');
}

/* JetBrains Mono */
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  --char: #16161A;
  --char2: #1E1E23;
  --paper: #E8E3D7;
  --blood: #8B1A15;
  --bile: #5F6B4A;
  --ash: #55555E;

  --display: 'Archivo', system-ui, sans-serif;
  --body: 'Spectral', Georgia, serif;
  --mono: 'JetBrains Mono', monospace;
}

/* ============================================
   BASE
   ============================================ */

body {
  background: var(--char);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Headings – Override Elementor Kit */
body h1, body h2, body h3,
.elementor-kit-10 h1, .elementor-kit-10 h2, .elementor-kit-10 h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .86;
  text-transform: uppercase;
}

/* ============================================
   OVERLAYS
   ============================================ */

/* Grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Struktur-Raster */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.15) 0 1px, transparent 1px 9px);
}

/* Torch */
#torch {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 997;
  background: radial-gradient(circle 135px at var(--mx, -999px) var(--my, -999px),
    rgba(232, 227, 215, .26), rgba(232, 227, 215, .09) 52%, transparent 76%);
  mix-blend-mode: screen;
}

@media (hover: none) {
  #torch { display: none; }
}

/* ============================================
   LAYOUT / CONTAINER
   ============================================ */

.e-con-inner,
.elementor-container {
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
  position: relative;
  z-index: 2;
}

/* ============================================
   SHARED ELEMENTS
   ============================================ */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ash);
}

.eyebrow--blood { color: var(--blood); }

.ghost {
  position: absolute;
  pointer-events: none;
  filter: invert(1) contrast(1.35);
  mix-blend-mode: screen;
  opacity: .22;
  z-index: 1;
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 52% 46%, #000 8%, rgba(0,0,0,.55) 42%, transparent 68%);
          mask-image: radial-gradient(ellipse 46% 50% at 52% 46%, #000 8%, rgba(0,0,0,.55) 42%, transparent 68%);
}

.crack {
  position: absolute;
  height: 1px;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(90deg, transparent, #6A6A74 18%, #6A6A74 82%, transparent);
}

.crack--blood {
  background: linear-gradient(90deg, transparent, var(--blood) 20%, var(--blood) 80%, transparent);
  opacity: .65;
}

.tag {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #8F8F98;
  white-space: nowrap;
}

/* Scroll-Reveal */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.2,.6,.2,1),
              transform .9s cubic-bezier(.2,.6,.2,1);
}

.rv.in { opacity: 1; transform: none; }

/* ============================================
   NAV
   ============================================ */

.ad-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px clamp(20px, 5vw, 80px);
  mix-blend-mode: difference;
}

.ad-nav .brand {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.ad-nav .links {
  display: flex;
  gap: 28px;
  list-style: none;
}

.ad-nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s;
}

.ad-nav a:hover { opacity: 1; }

/* Menu-Reset */
.ad-nav .links li,
.foot-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ad-nav .links li::before,
.foot-links li::before {
  content: none;
}

/* ============================================
   BURGER
   ============================================ */

.ad-burger {
  display: none;
  position: relative;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 102;
  -webkit-appearance: none;
          appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* Elementor-Kit-Button-Styling in allen States abschalten */
body .ad-burger,
body .ad-burger:hover,
body .ad-burger:focus,
body .ad-burger:active,
.elementor-kit-10 .ad-burger,
.elementor-kit-10 .ad-burger:hover,
.elementor-kit-10 .ad-burger:focus,
.elementor-kit-10 .ad-burger:active {
  background: none;
  border: none;
  box-shadow: none;
  color: inherit;
  outline: none;
}

/* Tastaturbedienung bleibt sichtbar */
.ad-burger:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 6px;
}

.ad-burger span {
  position: absolute;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #fff 18%, #fff 82%, transparent);
  transition: transform .35s cubic-bezier(.7,0,.3,1), opacity .2s;
}

.ad-burger span:nth-child(1) {
  top: 2px;
  width: 100%;
  transform: rotate(-2.5deg);
}

.ad-burger span:nth-child(2) {
  top: 11px;
  width: 78%;
  transform: rotate(1.5deg);
}

.ad-burger span:nth-child(3) {
  top: 20px;
  width: 92%;
  transform: rotate(-1deg);
}

.ad-burger[aria-expanded="true"] span:nth-child(1) {
  top: 11px;
  transform: rotate(41deg);
}

.ad-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}

.ad-burger[aria-expanded="true"] span:nth-child(3) {
  top: 11px;
  width: 100%;
  transform: rotate(-38deg);
}

/* ============================================
   MOBILE OVERLAY
   ============================================ */

.ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 101;
  background: var(--char);
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}

.ad-overlay[hidden] { display: none; }
.ad-overlay.is-open { opacity: 1; }

.ad-overlay-nav {
  width: 100%;
  padding: 0 clamp(20px, 8vw, 60px);
  position: relative;
  z-index: 2;
}

.ad-overlay-nav ol {
  list-style: none;
  counter-reset: navitem;
  margin: 0;
  padding: 0;
}

.ad-overlay-nav li {
  counter-increment: navitem;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(14px);
}

.ad-overlay.is-open .ad-overlay-nav li {
  animation: navin .5s cubic-bezier(.2,.7,.3,1) forwards;
}

.ad-overlay.is-open li:nth-child(1) { animation-delay: .06s; }
.ad-overlay.is-open li:nth-child(2) { animation-delay: .12s; }
.ad-overlay.is-open li:nth-child(3) { animation-delay: .18s; }
.ad-overlay.is-open li:nth-child(4) { animation-delay: .24s; }
.ad-overlay.is-open li:nth-child(5) { animation-delay: .30s; }

@keyframes navin {
  to { opacity: 1; transform: translateY(0); }
}

.ad-overlay-nav a {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: 1;
  font-size: clamp(30px, 9vw, 56px);
  color: var(--paper);
  text-decoration: none;
  padding: 8px 0 8px 52px;
  position: relative;
}

.ad-overlay-nav a::before {
  content: '0' counter(navitem);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--blood);
}

.ad-overlay-nav li:nth-child(2n) a { transform: rotate(-.8deg); }
.ad-overlay-nav li:nth-child(3n) a { transform: rotate(.6deg); }

.ad-overlay-nav a:active { color: var(--blood); }

/* NAV – MOBILE */
@media (max-width: 960px) {
  .ad-nav .links { display: none; }
  .ad-burger { display: block; }
  .ad-nav {
    mix-blend-mode: normal;
    z-index: 102;
  }
  body.nav-open { overflow: hidden; }
}

/* ============================================
   HERO
   ============================================ */

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(40px, 7vh, 80px);
  overflow: hidden;
}

.hero .ghost {
  right: -12%;
  top: -14%;
  width: min(66vw, 940px);
  opacity: .30;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  width: 100%;
}

body .hero h1,
.elementor-kit-10 .hero h1 {
  font-size: clamp(64px, 13.5vw, 208px);
  line-height: .82;
}

.hero h1 .dead {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--paper);
  padding-left: .1em;
  transform: rotate(-1.6deg);
  transform-origin: left bottom;
}

.hero .sub {
  margin-top: 30px;
  font-size: clamp(15px, 1.15vw, 18px);
  color: #9A9A9F;
  max-width: 42ch;
}

.hero .sub em {
  color: var(--paper);
  font-style: italic;
}

.hero-book {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
  padding-bottom: 6px;
}

.hero-book img {
  width: min(15vw, 168px);
  height: auto;
  box-shadow: 0 24px 50px rgba(0,0,0,.65);
  transform: rotate(4.5deg);
}

.hero-book a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--blood);
  color: var(--paper);
  padding: 14px 24px;
  text-decoration: none;
  border: 1px solid var(--blood);
  transition: .2s;
  white-space: nowrap;
  transform: rotate(-2deg);
}

.hero-book a:hover {
  background: transparent;
  color: var(--blood);
}

.scrollhint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--ash);
  text-transform: uppercase;
}

/* HERO – MOBILE */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }

  .hero .ghost { width: min(86vw, 940px); }

  .hero-book {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .hero-book img { width: 90px; }

  /* Tags im Hero ausblenden, laufen sonst über den Text */
  .hero .tag { display: none; }

  .scrollhint {
    position: static;
    transform: none;
    margin-top: 30px;
    text-align: center;
  }
}

/* ============================================
   EPISODE INDEX
   ============================================ */

.index {
  padding: clamp(90px, 12vh, 150px) 0 clamp(60px, 8vh, 110px);
  border-top: 1px solid #26262C;
  position: relative;
  z-index: 2;
}

.index-head { margin-bottom: 60px; }

body .index-head h2,
.elementor-kit-10 .index-head h2 {
  font-size: clamp(30px, 3.4vw, 54px);
  line-height: .86;
  transform: rotate(-1deg);
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #26262C;
  border: 1px solid #26262C;
  position: relative;
  z-index: 2;
}

.ep-cell {
  position: relative;
  background: var(--char);
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  cursor: pointer;
  --nudge: 0px;
  --skew: 0deg;
  transform: translateY(var(--nudge)) skewX(var(--skew));
  transition: background .3s;
}

.ep-cell:hover { background: #1C1C21; }

.ep-cell:nth-child(1) { --nudge: -3px; --skew: .25deg; }
.ep-cell:nth-child(2) { --nudge: 5px;  --skew: -.35deg; }
.ep-cell:nth-child(3) { --nudge: -6px; --skew: .2deg; }
.ep-cell:nth-child(4) { --nudge: 4px;  --skew: -.2deg; }
.ep-cell:nth-child(5) { --nudge: -2px; --skew: .3deg; }
.ep-cell:nth-child(6) { --nudge: 7px;  --skew: -.3deg; }
.ep-cell:nth-child(7) { --nudge: -5px; --skew: .15deg; }
.ep-cell:nth-child(8) { --nudge: 3px;  --skew: -.25deg; }
.ep-cell:nth-child(9) { --nudge: -4px; --skew: .35deg; }

.ep-cell .ep-num {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  letter-spacing: .14em;
}

.ep-icon {
  width: clamp(52px, 7vw, 92px);
  height: auto;
  color: var(--paper);
  opacity: .75;
  transform: rotate(var(--rot, 0deg));
  transition: transform .5s cubic-bezier(.2,.6,.2,1), color .3s, opacity .3s;
}

.ep-icon--ink {
  display: block;
  width: clamp(76px, 10vw, 132px);
  aspect-ratio: 1/1;
  background-color: var(--paper);
  -webkit-mask-image: var(--icon);
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-image: var(--icon);
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
  transition: background-color .3s, transform .5s cubic-bezier(.2,.6,.2,1), opacity .3s;
}

.ep-cell:hover .ep-icon--ink { background-color: #FF3B30; }
.ep-cell.final .ep-icon { color: var(--blood); opacity: .85; }

.ep-cell-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s, transform .3s;
}

.ep-cell:hover .ep-cell-label { opacity: 1; transform: none; }

.ep-cell-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(12px, 1.25vw, 18px);
  text-transform: uppercase;
  line-height: 1.15;
}

.ep-cell-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blood);
}

.ep-cell.free .ep-cell-tag { color: var(--paper); }

/* Fractures */
.ep-fractures {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

.ep-fractures svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.frac {
  fill: none;
  stroke: #3A3A42;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.frac--hair { stroke: #2E2E36; }
.frac--blood { stroke: var(--blood); opacity: .5; stroke-width: 1.2; }

/* EPISODE INDEX – MOBILE */
@media (max-width: 960px) {
  .ep-cell {
    aspect-ratio: auto;
    min-height: 150px;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
    padding: 34px 8px 16px;
  }

  .ep-cell .ep-num { top: 10px; left: 12px; font-size: 10px; }
  .ep-icon { width: 46px; }
  .ep-icon--ink { width: 62px; }

  .ep-cell-label {
    position: static;
    opacity: 1;
    transform: none;
    text-align: center;
    gap: 4px;
    margin-top: auto;
  }

  .ep-cell-title { font-size: 10.5px; letter-spacing: .02em; }
  .ep-cell-tag { font-size: 8px; letter-spacing: .14em; }
}

@media (max-width: 640px) {
  .ep-cell { --nudge: 0px !important; --skew: 0deg !important; }
}

/* ============================================
   EPISODE 01 – FULL READ
   ============================================ */

.ep-full {
  position: relative;
  padding: clamp(90px, 13vh, 170px) 0;
  border-top: 1px solid #26262C;
  overflow: hidden;
}

.ep-full .ghost {
  left: -18%;
  top: 0;
  width: min(62vw, 820px);
  opacity: .20;
}

.ep-full-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

body .ep-full h2,
.elementor-kit-10 .ep-full h2 {
  font-size: clamp(38px, 5.4vw, 86px);
  line-height: .86;
  margin: 14px 0 30px;
}

.ep-body {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.85;
  color: #C9C5BB;
}

.ep-body p {
  margin-bottom: 1.15em;
  max-width: none;
}

.ep-body p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 800;
  float: left;
  font-size: 4.1em;
  line-height: .78;
  margin: .04em .1em 0 0;
  color: var(--blood);
}

.ep-body .shout {
  color: var(--paper);
  font-style: italic;
}

.plate {
  position: relative;
  background: var(--paper);
  padding: 22px;
  margin: 0;
  transform: rotate(1.8deg);
}

.plate img {
  width: 100%;
  height: auto;
  display: block;
}

.plate figcaption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7A776E;
  margin-top: 16px;
}

.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px rgba(0,0,0,.09);
}

body .ep-full .cont,
.elementor-kit-10 .ep-full .cont {
  margin-top: 44px;
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--blood);
  padding-bottom: 6px;
}

body .ep-full .cont:hover,
.elementor-kit-10 .ep-full .cont:hover {
  color: var(--blood);
}

/* EPISODE 01 – MOBILE */
@media (max-width: 960px) {
  .ep-full-grid { grid-template-columns: 1fr; gap: 44px; }
  .ep-full .tag { display: none; }
  .plate { transform: none; padding: 14px; }
}

/* ============================================
   EPITAPH
   ============================================ */

.epitaph {
  background: #050506;
  min-height: 70svh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.epitaph h2 {
  font-size: clamp(40px, 9vw, 150px);
  text-align: center;
  line-height: .9;
  background: radial-gradient(circle 170px at var(--ex, -500px) var(--ey, -500px),
    var(--paper) 0%, #3A2A28 45%, #0E0E10 72%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
}

@media (hover: none) {
  .epitaph h2 {
    background: none;
    color: #26262C;
    -webkit-text-stroke: 1px #33333B;
  }
}

.epitaph .hint {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #5A5A63;
}

/* ============================================
   FOOTER
   ============================================ */

.ad-footer {
  background: #0B0B0D;
  padding: 70px 0 40px;
  border-top: 1px solid var(--char2);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.ad-footer .wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 80px);
}

.foot-bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-bar span,
.foot-bar a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
  text-decoration: none;
}

.foot-bar a:hover { color: var(--blood); }

.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  list-style: none;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .ad-overlay.is-open .ad-overlay-nav li {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
   THE BOOK
   ============================================ */

.book {
  position: relative;
  padding: clamp(90px, 13vh, 170px) 0;
  border-top: 1px solid #26262C;
  background: var(--char2);
  overflow: hidden;
}

.book .ghost {
  right: -6%;
  bottom: -30%;
  width: min(72vw, 1020px);
  opacity: .18;
}

.book-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}

.book-cover {
  width: min(28vw, 320px);
  box-shadow: 0 40px 90px rgba(0,0,0,.7);
}

.book-cover img {
  width: 100%;
  height: auto;
  display: block;
}

.tilt-l { transform: rotate(-1.4deg); }
.tilt-r { transform: rotate(1.6deg); }

body .book h2,
.elementor-kit-10 .book h2 {
  font-size: clamp(38px, 5.4vw, 84px);
  line-height: .86;
  margin: 16px 0 26px;
}

.book h2 .thin {
  display: block;
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: .42em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blood);
  margin-top: 14px;
  line-height: 1.3;
}

.book p {
  font-size: 17px;
  color: #A5A29A;
  margin-bottom: 34px;
}

.btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

body .btn,
.elementor-kit-10 .btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 16px 30px;
  text-decoration: none;
  transition: .2s;
  cursor: pointer;
  border-radius: 0;
}

body .btn-primary,
.elementor-kit-10 .btn-primary {
  background: var(--blood);
  color: var(--paper);
  border: 1px solid var(--blood);
}

body .btn-primary:hover,
.elementor-kit-10 .btn-primary:hover {
  background: transparent;
  color: var(--blood);
}

body .btn-ghost,
.elementor-kit-10 .btn-ghost {
  background: none;
  border: 1px solid #3A3A42;
  color: var(--paper);
}

body .btn-ghost:hover,
.elementor-kit-10 .btn-ghost:hover {
  border-color: var(--paper);
  color: var(--paper);
}

/* THE BOOK – MOBILE */
@media (max-width: 960px) {
  .book-grid { grid-template-columns: 1fr; gap: 44px; }
  .book-cover { width: min(64vw, 300px); }
  .book .tag { display: none; }
}

/* ============================================
   AUTHOR
   ============================================ */

.author {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0;
  border-top: 1px solid #26262C;
  overflow: hidden;
  z-index: 2;
}

.author .ghost {
  right: -14%;
  top: -10%;
  width: min(54vw, 720px);
  opacity: .14;
}

.author-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.3fr;
  gap: clamp(40px, 7vw, 110px);
  align-items: start;
}

body .author-left h2,
.elementor-kit-10 .author-left h2 {
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: .86;
  margin: 14px 0 26px;
}

.author-left h2 .thin {
  display: block;
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: .44em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blood);
  margin-top: 12px;
  line-height: 1.3;
}

/* Fakten */
body .author-facts {
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid #26262C;
}

.author-fact {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #26262C;
  align-items: baseline;
}

body .author-fact dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash);
}

body .author-fact dd {
  margin: 0;
  font-size: 15px;
  color: #B9B5AB;
}

/* Bio */
.author-bio {
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.9;
  color: #C9C5BB;
}

.author-bio p {
  margin-bottom: 1.2em;
  max-width: none;
}

.author-bio p:first-child::first-letter {
  font-family: var(--display);
  font-weight: 800;
  float: left;
  font-size: 4.1em;
  line-height: .78;
  margin: .04em .1em 0 0;
  color: var(--blood);
}

.author-sig {
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ash);
}

.author-sig b {
  color: var(--paper);
  font-weight: 500;
}

/* AUTHOR – MOBILE */
@media (max-width: 960px) {
  .author-grid { grid-template-columns: 1fr; gap: 44px; }
  .author .ghost { width: min(80vw, 720px); }
  .author .tag { display: none; }
  .author-fact { grid-template-columns: 92px 1fr; gap: 14px; }
}

/* ============================================
   MERCH
   ============================================ */

.merch {
  position: relative;
  padding: clamp(90px, 13vh, 160px) 0;
  border-top: 1px solid #26262C;
  overflow: hidden;
  z-index: 2;
}

.merch .ghost {
  left: -16%;
  bottom: -25%;
  width: min(60vw, 800px);
  opacity: .14;
}

.merch-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 56px;
}

body .merch-head h2,
.elementor-kit-10 .merch-head h2 {
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: .86;
}

body .merch-head a,
.elementor-kit-10 .merch-head a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--blood);
  padding-bottom: 6px;
}

body .merch-head a:hover,
.elementor-kit-10 .merch-head a:hover {
  color: var(--blood);
}

/* Grid */
.merch-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.merch-grid .product:nth-child(1) { transform: rotate(-1.2deg); }
.merch-grid .product:nth-child(2) { transform: rotate(.8deg) translateY(18px); }
.merch-grid .product:nth-child(3) { transform: rotate(-.6deg) translateY(-8px); }
.merch-grid .product:nth-child(4) { transform: rotate(1.4deg) translateY(10px); }

body .product,
.elementor-kit-10 .product {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Kleidungsstück */
.garment {
  position: relative;
  background: #101013;
  border: 1px solid #26262C;
  aspect-ratio: 4/5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .25s;
}

.product:hover .garment { border-color: var(--ash); }

.garment-shape {
  width: 78%;
  height: auto;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}

.product:hover .garment-shape { transform: translateY(-4px); }

/* Print auf der Silhouette (Fallback ohne Produktfoto) */
.garment-print {
  position: absolute;
  width: 23%;
  height: auto;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.6,.2,1);
}

.garment-print--tee { top: 41%; }
.garment-print--hoodie { top: 38%; }

.product:hover .garment-print { transform: translateY(-4px); }

/* Echtes Produktfoto */
.garment--photo { padding: 0; }

.garment-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}

.product:hover .garment-photo { transform: scale(1.03); }

/* Meta */
.p-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
}

.p-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
}

.p-price {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ash);
  white-space: nowrap;
}

/* MERCH – MOBILE */
@media (max-width: 960px) {
  .merch-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .merch-grid .product { transform: none !important; }
  .merch .tag { display: none; }
  .merch .ghost { width: min(90vw, 800px); }
}

@media (max-width: 480px) {
  .merch-grid { grid-template-columns: 1fr; }
  .p-meta { flex-direction: column; gap: 4px; }
}

/* ============================================
   FANFIC / WRITE YOUR OWN
   Einzige helle Section – eigene Textfarben,
   da --paper hier unlesbar wäre.
   ============================================ */

.fanfic {
  position: relative;
  z-index: 2;
  padding: clamp(90px, 13vh, 160px) 0;
  background: var(--bile);
  color: #1C1F16;
  border-top: 1px solid #26262C;
  overflow: hidden;
}

/* Ghost: heller Untergrund, also kein invert – multiply statt screen */
.fanfic .ghost {
  right: -10%;
  top: -14%;
  width: min(50vw, 640px);
  height: auto;
  filter: none;
  mix-blend-mode: multiply;
  opacity: .10;
}

.fanfic .eyebrow { color: #3C4432; }

body .fanfic h2,
.elementor-kit-10 .fanfic h2 {
  font-size: clamp(36px, 5vw, 76px);
  line-height: .86;
  color: #14170F;
  margin: 14px 0 20px;
}

.fanfic h2 .thin {
  display: block;
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: .44em;
  letter-spacing: 0;
  text-transform: none;
  color: #2E3527;
  margin-top: 12px;
  line-height: 1.3;
}

/* Community-Zähler (aktuell per Flag aus) */
.community-pulse {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 56px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3C4432;
  position: relative;
  z-index: 2;
}

.community-pulse b {
  color: #14170F;
  font-weight: 500;
}

/* ---- Fragmente ---- */

.frags-note {
  position: relative;
  z-index: 2;
  margin: 0 0 34px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #3C4432;
}

.frags {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-bottom: 64px;
}

.frag { border-top: 1px solid #4A5439; padding-top: 22px; }

/* Beispielkarten deutlich als Platzhalter lesbar */
.frag--example {
  border-top-style: dashed;
  opacity: .82;
}

body .frag h3,
.elementor-kit-10 .frag h3 {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 23px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
  color: #14170F;
}

.frag .by {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #4A5439;
}

.frag-flag {
  border: 1px solid #4A5439;
  padding: 2px 8px;
  letter-spacing: .2em;
  color: #4A5439;
  white-space: nowrap;
}

.frag p {
  font-size: 15.5px;
  line-height: 1.6;
  color: #333A2B;
  margin: 0;
}

/* ---- Submit-Box ---- */

.submit-box {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 5vw, 80px);
  border-top: 1px solid #4A5439;
  padding-top: 44px;
}

body .submit-box h3,
.elementor-kit-10 .submit-box h3 {
  font-family: var(--body);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0;
  text-transform: none;
  color: #14170F;
  margin-bottom: 12px;
}

.submit-box p {
  font-size: 15px;
  color: #333A2B;
  margin-bottom: 26px;
  max-width: 42ch;
}

body .fanfic .btn-dark,
.elementor-kit-10 .fanfic .btn-dark {
  display: inline-block;
  background: #14170F;
  color: var(--bile);
  border: 1px solid #14170F;
}

body .fanfic .btn-dark:hover,
.elementor-kit-10 .fanfic .btn-dark:hover {
  background: transparent;
  color: #14170F;
}

/* Ablauf-Liste */
body .submit-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.submit-steps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #4A5439;
  align-items: baseline;
  list-style: none;
}

.submit-steps li::before { content: none; }
.submit-steps li:first-child { padding-top: 0; }
.submit-steps li:last-child { border-bottom: none; }

.step-n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: #14170F;
}

.step-body {
  font-size: 15px;
  line-height: 1.65;
  color: #333A2B;
}

.step-body b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #14170F;
  margin-bottom: 6px;
}

/* FANFIC – MOBILE */
@media (max-width: 960px) {
  .frags { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .submit-box { grid-template-columns: 1fr; gap: 40px; }
  .fanfic .ghost { width: min(88vw, 640px); }
  .fanfic .tag { display: none; }
  .community-pulse { gap: 16px; }
}

@media (max-width: 480px) {
  .submit-steps li { grid-template-columns: 34px 1fr; gap: 12px; }
}

/* ============================================
   FINALE
   ============================================ */

.finale {
  position: relative;
  z-index: 2;
  min-height: 105svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0B0B0D;
  text-align: center;
  overflow: hidden;
}

/* Ghost blendet als Erstes auf */
.finale .ghost {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 900px);
  height: auto;
  opacity: 0;
  filter: invert(1) contrast(1.5);
  mix-blend-mode: screen;
  transition: opacity 2.2s cubic-bezier(.2,.6,.2,1);
  -webkit-mask-image: radial-gradient(ellipse 44% 50% at 50% 48%, #000 6%, rgba(0,0,0,.55) 42%, transparent 70%);
          mask-image: radial-gradient(ellipse 44% 50% at 50% 48%, #000 6%, rgba(0,0,0,.55) 42%, transparent 70%);
}

.finale.lit .ghost { opacity: .46; }

.finale-inner {
  position: relative;
  z-index: 3;
  padding: 0 clamp(20px, 5vw, 80px);
}

/* Zeile 1 – Spectral italic, bewusst nicht der Display-Font */
body .finale h2,
.elementor-kit-10 .finale h2 {
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  text-transform: none;
  letter-spacing: .04em;
  line-height: 1.25;
  font-size: clamp(30px, 4.6vw, 64px);
  color: var(--paper);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.4s .5s, transform 1.4s .5s;
}

.finale.lit h2 {
  opacity: 1;
  transform: none;
}

/* Zeile 2 – das Echo, kommt eine Sekunde später */
.finale .echo {
  display: block;
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: 1.15em;
  color: var(--blood);
  opacity: 0;
  transition: opacity 1.6s 1.3s;
}

.finale.lit .echo { opacity: 1; }

/* FINALE – MOBILE */
@media (max-width: 960px) {
  .finale { min-height: 92svh; }
  .finale .tag { display: none; }
  .finale .ghost { width: min(92vw, 900px); }
  .finale .echo { margin-top: 16px; }
}

/* REDUCED MOTION – alles sofort sichtbar, keine Staffelung */
@media (prefers-reduced-motion: reduce) {
  .finale .ghost {
    opacity: .46;
    transition: none;
  }
  .finale h2,
  .finale .echo {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   TORCH – FLACKERN & NÄHE-REVEAL
   Überschreibt bewusst die Basiswerte von
   .tag / .crack weiter oben in dieser Datei.
   ============================================ */

/* ---- Flackern des Lichtkegels ---- */

#torch { animation: torchflicker 5.3s infinite; }

@keyframes torchflicker {
  0%   { opacity: 1; }
  4%   { opacity: .84; }
  5%   { opacity: 1; }
  21%  { opacity: .96; }
  22%  { opacity: .62; }
  24%  { opacity: .99; }
  43%  { opacity: 1; }
  44%  { opacity: .78; }
  45%  { opacity: .95; }
  46%  { opacity: .7; }
  48%  { opacity: 1; }
  69%  { opacity: 1; }
  70%  { opacity: .55; }
  72%  { opacity: .92; }
  73%  { opacity: 1; }
  88%  { opacity: .97; }
  89%  { opacity: .74; }
  91%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ---- Elemente, die auf Lichtnähe reagieren ---- */

.reveal,
.tag,
.crack {
  --lit: 0;
  opacity: calc(.10 + var(--lit) * .90);
  transition: opacity .22s ease-out;
  will-change: opacity;
}

/* Blutrisse bleiben auch im Dunkeln eine Spur präsenter */
.crack--blood {
  opacity: calc(.16 + var(--lit) * .74);
}

/* Tags bekommen im Licht zusätzlich etwas Glut */
.tag {
  color: #8F8F98;
  text-shadow: 0 0 calc(var(--lit) * 14px) rgba(232, 227, 215, calc(var(--lit) * .5));
}

/* Auf der hellen Fanfic-Section wäre der Effekt sinnlos –
   dort gibt es kein Dunkel, aus dem etwas auftauchen könnte */
.fanfic .tag,
.fanfic .crack {
  opacity: .5;
  transition: none;
  text-shadow: none;
}

/* ---- Touch: kein Cursor, also kein Nähe-Licht ---- */

@media (hover: none) {
  .reveal,
  .tag,
  .crack {
    opacity: .5;
    animation: ghostflicker 6.5s infinite;
    transition: none;
    will-change: auto;
  }

  .crack--blood { opacity: .55; }
  .tag { text-shadow: none; }
}

@keyframes ghostflicker {
  0%, 100% { opacity: .5; }
  17%      { opacity: .28; }
  19%      { opacity: .52; }
  46%      { opacity: .34; }
  48%      { opacity: .5; }
  77%      { opacity: .22; }
  80%      { opacity: .48; }
}

/* ---- Reduced Motion: alles ruhig und sichtbar ---- */

@media (prefers-reduced-motion: reduce) {
  #torch { animation: none; }

  .reveal,
  .tag,
  .crack {
    opacity: .5;
    animation: none;
    transition: none;
    text-shadow: none;
  }
}

/* ============================================
   FLOATING BUY BUTTON
   Aufbau in zwei Ebenen: .floatbuy schaltet
   sichtbar/unsichtbar, .floatbuy-btn klingelt.
   Sonst würden sich die transform-Werte
   gegenseitig überschreiben.
   ============================================ */

.floatbuy {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 200;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.2,.6,.2,1),
              transform .45s cubic-bezier(.2,.6,.2,1);
}

.floatbuy.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floatbuy-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  background: var(--blood);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-1.5deg);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: fb-ring 4.6s infinite;
  will-change: transform, box-shadow;
}

/* Der Punkt blinkt weiter, auch wenn niemand abnimmt */
.floatbuy .dot {
  width: 7px;
  height: 7px;
  background: var(--paper);
  border-radius: 50%;
  flex: none;
  animation: fb-blink 1.4s infinite;
}

/* ---- Hover: es klingelt ernsthaft ---- */

.floatbuy:hover .floatbuy-btn,
.floatbuy:focus-visible .floatbuy-btn {
  animation: fb-ring 1.05s infinite, fb-judder 1.9s infinite;
}

.floatbuy:hover .dot,
.floatbuy:focus-visible .dot {
  animation: fb-blink .42s infinite;
}

.floatbuy:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 8px;
}

/* ---- Keyframes ---- */

@keyframes fb-ring {
  0%   { box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(139,26,21,.65); }
  55%  { box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 18px rgba(139,26,21,0); }
  100% { box-shadow: 0 12px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(139,26,21,0); }
}

@keyframes fb-blink {
  0%, 58%   { opacity: 1; }
  59%, 100% { opacity: .15; }
}

/* Zwei kurze Schübe, dann Ruhe. Die Werte sind absichtlich
   krumm, gleichmäßige Zahlen lesen sich sofort als Schleife. */
@keyframes fb-judder {
  0%   { transform: rotate(-1.5deg) translate(0, 0); }
  2%   { transform: rotate(-4.6deg) translate(-2px, 1px); }
  4%   { transform: rotate(1.9deg)  translate(3px, -2px); }
  6%   { transform: rotate(-3.4deg) translate(-1px, -1px); }
  9%   { transform: rotate(2.7deg)  translate(2px, 2px); }
  12%  { transform: rotate(-2.2deg) translate(-3px, 0); }
  15%  { transform: rotate(.6deg)   translate(1px, -1px); }
  18%  { transform: rotate(-1.5deg) translate(0, 0); }

  38%  { transform: rotate(-1.5deg) translate(0, 0); }
  40%  { transform: rotate(3.8deg)  translate(2px, -2px); }
  42%  { transform: rotate(-4.1deg) translate(-3px, 1px); }
  45%  { transform: rotate(2.2deg)  translate(1px, 2px); }
  47%  { transform: rotate(-2.9deg) translate(-2px, -1px); }
  51%  { transform: rotate(1.1deg)  translate(3px, 0); }
  54%  { transform: rotate(-1.5deg) translate(0, 0); }

  100% { transform: rotate(-1.5deg) translate(0, 0); }
}

/* ---- Mobile Menü offen: Button verschwindet ---- */

body.nav-open .floatbuy {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

body.nav-open .floatbuy-btn,
body.nav-open .floatbuy .dot {
  animation: none;
}

/* ---- MOBILE ---- */

@media (max-width: 640px) {
  .floatbuy { right: 16px; bottom: 16px; }
  .floatbuy-btn { padding: 13px 18px; font-size: 9.5px; letter-spacing: .14em; }
}

/* ---- REDUCED MOTION ---- */

@media (prefers-reduced-motion: reduce) {
  .floatbuy,
  .floatbuy-btn,
  .floatbuy .dot,
  .floatbuy:hover .floatbuy-btn,
  .floatbuy:hover .dot {
    animation: none;
    transition: opacity .2s;
  }
  .floatbuy-btn { transform: rotate(-1.5deg); }
}

/* ============================================
   EPISODE INDEX – LINKFARBEN-FIX
   Elementors Kit setzt .elementor-kit-10 a und
   schlägt damit das color:inherit auf .ep-cell.
   Sichtbar wird das erst, wenn ein Link besucht
   wurde – deshalb violette Kapitelnamen.
   ============================================ */

body .ep-cell,
body .ep-cell:link,
body .ep-cell:visited,
body .ep-cell:hover,
body .ep-cell:focus,
body .ep-cell:active,
.elementor-kit-10 .ep-cell,
.elementor-kit-10 .ep-cell:link,
.elementor-kit-10 .ep-cell:visited,
.elementor-kit-10 .ep-cell:hover,
.elementor-kit-10 .ep-cell:focus,
.elementor-kit-10 .ep-cell:active {
  color: var(--paper);
  text-decoration: none;
}

body .ep-cell .ep-cell-title,
.elementor-kit-10 .ep-cell .ep-cell-title {
  color: var(--paper);
}

body .ep-cell .ep-num,
.elementor-kit-10 .ep-cell .ep-num {
  color: var(--ash);
}

body .ep-cell .ep-cell-tag,
.elementor-kit-10 .ep-cell .ep-cell-tag {
  color: var(--blood);
}

body .ep-cell.free .ep-cell-tag,
.elementor-kit-10 .ep-cell.free .ep-cell-tag {
  color: var(--paper);
}