/* ============================================================
   GENUG SEIN — eine horizontale Scroll-Erfahrung
   Ein Tag mit der Stimme im Kopf: 06:30 bis 02:47 und zurück.
   Struktur inspiriert von cinematic scrollytelling:
   horizontale Panels, Uhrzeiten als Kapiteltrenner,
   einfliegende Bilder, Ton. Akzent: Terracotta statt Gelb.
   ============================================================ */

:root {
  --dark: #101013;
  --black: #08080a;
  --warm: #f4ede3;
  --ink: #1e1a16;
  --paper: #eceae6;
  --accent: #e07a5f;

  --font-display: "Anton", sans-serif;
  --font-text: "Inter", sans-serif;
  --font-soft: "Cormorant Garamond", serif;
}

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

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--dark);
  color: var(--paper);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }

/* grain + vignette */
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  pointer-events: none; z-index: 95; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.85s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); }
  50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,2%); }
  100% { transform: translate(2%,-1%); }
}
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.25) 100%);
}

/* ============ SOUND-AUSWAHL (liquid glass popup) ============ */
.sound-gate {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(8, 8, 10, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6vw;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.sound-gate.done { opacity: 0; visibility: hidden; }

.sg-inner {
  max-width: 560px;
  padding: 3rem 3.2rem 2.4rem;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0.09));
  -webkit-backdrop-filter: blur(26px) saturate(1.5);
  backdrop-filter: blur(26px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
.sg-mark {
  position: static;
  transform: none;
  display: inline-block;
  margin-bottom: 2.2rem;
  mix-blend-mode: normal;
}
.sg-title {
  font-family: var(--font-soft);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.25;
  color: var(--paper);
  margin-bottom: 1.1rem;
}
.sg-sub {
  font-size: 0.95rem;
  color: rgba(236, 234, 230, 0.75);
  max-width: 42ch;
  margin: 0 auto 2.4rem;
}
.sg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1.7rem;
}
.sg-ghost {
  border: 1.5px solid rgba(236, 234, 230, 0.35);
  color: var(--paper);
}
.sg-ghost:hover { background: rgba(236, 234, 230, 0.1); }
.sg-note {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(236, 234, 230, 0.5);
}
@media (max-width: 640px) {
  .sg-inner { padding: 2.2rem 1.5rem 1.8rem; border-radius: 20px; }
  .sg-btns { flex-direction: column; align-items: stretch; }

  /* uhren duerfen nie breiter als der bildschirm werden */
  .div-time { font-size: min(22vh, 33vw); }

  .hero-kicker { font-size: 0.6rem; padding: 0 6vw; }
  .hero-hint { width: 88vw; text-align: center; line-height: 1.7; }

  /* karteikarten: zwei oben, zwei unten, headline bleibt frei */
  .cost-card { width: clamp(160px, 46vw, 220px); padding: 1.9rem 1rem 1.1rem; }
  .cost-card p { font-size: 0.88rem; }
  .cc-1 { left: 3%; top: 5%; }
  .cc-2 { left: auto; right: 3%; top: 19%; }
  .cc-3 { left: 3%; top: 60%; }
  .cc-4 { left: auto; right: 3%; top: 75%; }
}

/* ============ CHROME ============ */
.chrome { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.chrome a, .chrome button { pointer-events: auto; }

.corner {
  position: absolute;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--paper);
  opacity: 0.9;
  mix-blend-mode: difference;
}
.corner-tl { top: 26px; left: 30px; }
.corner-tr { top: 26px; right: 30px; }
.corner-bl { bottom: 24px; left: 30px; }
.corner-br { bottom: 24px; right: 30px; }
.corner-tl:hover, .corner-tr:hover { color: var(--accent); }

.wordmark {
  position: absolute;
  top: 22px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--paper);
  mix-blend-mode: difference;
}
.wordmark i { font-style: normal; color: var(--accent); }

.progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0%;
  background: var(--accent);
}

/* ============ SHARED TYPO ============ */
.mega {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0.01em;
}

.p-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  opacity: 0.75;
  margin-bottom: 2rem;
}

.p-text {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  max-width: 44ch;
  text-indent: 3ch;
}

.p-shout {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.1;
  margin-top: 2.6rem;
}

.p-soft {
  font-family: var(--font-soft);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.9rem);
  line-height: 1.3;
  color: var(--accent);
  margin-top: 2.6rem;
}

/* ============ HERO (overlay über der bühne) ============ */
.hero.hero-overlay {
  position: absolute;
  inset: 0;
  height: auto;
  z-index: 20;
  pointer-events: none;
}
.hero {
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.62);
}
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,5,7,0.6), rgba(5,5,7,0.2) 45%, rgba(5,5,7,0.7));
}
.hero-kicker {
  position: relative; z-index: 2;
  font-size: 0.64rem; font-weight: 500; letter-spacing: 0.22em;
  margin-bottom: 3vh; opacity: 0.85;
}
.hero-title {
  position: relative; z-index: 2;
  font-size: clamp(4.2rem, 16.5vw, 14.5rem);
  display: flex; gap: 0.18em; flex-wrap: wrap; justify-content: center;
  color: var(--paper);
}
.hero-title span { display: inline-block; }
.hero-hint {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-size: 0.56rem; font-weight: 500; letter-spacing: 0.2em; opacity: 0.55;
}
.hero-fade {
  position: absolute;
  inset: 0;
  background: #0b0b0e;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* die erste uhr erscheint mitten im gezoomten bild */
.hero-clock {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  opacity: 0;
  pointer-events: none;
}
.hero-clock .div-time { color: var(--accent); }
.hero-clock .div-day, .hero-clock .div-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--paper);
  opacity: 0.85;
}

/* ============ EXPERIENCE (horizontal stage) ============ */
.experience {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.stage {
  display: flex;
  height: 100vh;
  width: max-content;
  will-change: transform;
}

.panel {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex-shrink: 0;
  overflow: hidden;
}
.panel.wide { width: 135vw; }
.panel.wider { width: 185vw; }

/* moods */
.mood-dark { background: var(--dark); color: var(--paper); }
.mood-black { background: var(--black); color: var(--paper); }
.mood-accent { background: var(--accent); color: var(--ink); }
.mood-warm { background: var(--warm); color: var(--ink); }
.mood-accent .p-soft, .mood-warm .p-shout { color: var(--ink); }
.mood-warm .p-soft { color: var(--accent); }

/* --- divider panels (Uhrzeiten) --- */
.divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}
.div-day {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.24em;
  opacity: 0.8;
}
.div-time {
  font-family: var(--font-display);
  font-size: clamp(9rem, 34vh, 24rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
}
.mood-dark .div-time, .mood-black .div-time { color: var(--accent); }
.mood-accent .div-time { color: var(--ink); }
.mood-warm .div-time { color: var(--accent); }
.div-dim { opacity: 0.85; }
.div-label {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em;
  opacity: 0.75;
}

/* --- geisterwörter: die stimme treibt durch den hintergrund --- */
.ghost-word {
  position: absolute;
  font-family: var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 234, 230, 0.14);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}
.mood-warm .ghost-word, .ghost-word.soft {
  font-family: var(--font-soft);
  font-style: italic;
  -webkit-text-stroke: 0;
  color: rgba(224, 122, 95, 0.16);
}
.mood-accent .ghost-word {
  -webkit-text-stroke: 1px rgba(30, 26, 22, 0.14);
}

/* inhaltsebenen liegen über den geistern */
.split-body, .strip, .p-huge, .riss-body, .num-col, .num-huge,
.div-day, .div-time, .div-label, .st-small, .st-big, .st-soft,
.echo-card, .fly, .collage-body { position: relative; z-index: 2; }

/* kritiker-buchstaben schlagen einzeln ein; wörter bleiben beim umbruch ganz */
.p-shout .word { display: inline-block; white-space: nowrap; }
.p-shout .ch { display: inline-block; will-change: transform; }

/* --- die rechnung: verpasste momente, durchgestrichen --- */
.cost {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cost-inner {
  padding: 0 8vw;
  max-width: 980px;
  position: relative;
  z-index: 2;
}
.cost-head {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vh, 6.5rem);
  line-height: 1;
  margin-top: 2.4rem;
}

/* karteikarten, über den ganzen bildschirm verteilt */
.cost-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(230px, 24vw, 350px);
  padding: 2.4rem 1.6rem 1.7rem;
  text-align: left;
  color: #1a1a1e;
  background:
    repeating-linear-gradient(transparent 0 25px, rgba(26, 26, 30, 0.09) 25px 26px),
    linear-gradient(168deg, #f6efe4, #ece1cf);
  border-radius: 5px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--r));
  z-index: 3;
}
.cost-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 1.9rem;
  height: 2px;
  background: rgba(206, 60, 44, 0.5);
}
.cc-tag {
  position: absolute;
  top: 0.55rem; left: 1.6rem;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(26, 26, 30, 0.45);
}
.cost-card p {
  font-family: var(--font-soft);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.45;
}
.cc-x {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* bleistift-gekritzel: hin und her, der text bleibt lesbar */
.cc-x path {
  fill: none;
  stroke: #3c3c42;
  stroke-width: 2.4px;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  mix-blend-mode: multiply;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* --- statement panels (große aussagen) --- */
.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4vh;
  padding: 0 8vw;
}
.st-small {
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  max-width: 52ch;
  opacity: 0.85;
}
.st-big {
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 11vh, 8rem);
  line-height: 0.98;
}
.st-accent { color: var(--accent); }
.st-soft { margin-top: 0; }
.st-below { letter-spacing: 0.18em; font-size: 0.7rem; font-weight: 600; opacity: 0.75; }

/* blinkender doppelpunkt in den uhren */
.colon { font-style: normal; animation: colon-blink 1s steps(1) infinite; }
@keyframes colon-blink { 50% { opacity: 0.25; } }

/* 02:47 pulsiert wie ein zu lauter herzschlag */
.pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.015); }
  24% { transform: scale(1); }
  36% { transform: scale(1.012); }
}

/* --- echo-karten (die kleinen aufstände) --- */
.echoes { }
.echo-card {
  position: absolute;
  width: clamp(240px, 22vw, 340px);
  background: #fff;
  color: var(--ink);
  padding: 1.6rem 1.7rem 1.5rem;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(30, 22, 16, 0.18);
  will-change: transform;
}
.echo-card p { font-size: 0.95rem; line-height: 1.55; }
.ec-time {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
.ec-1 { right: 128vw; top: 16vh; transform: rotate(-3deg); }
.ec-2 { right: 106vw; top: 54vh; transform: rotate(2deg); }
.ec-3 { right: 84vw; top: 14vh; transform: rotate(-2deg); }
.ec-4 { right: 62vw; top: 50vh; transform: rotate(3deg); }
.ec-5 { right: 42vw; top: 18vh; transform: rotate(-2.5deg); }
.ec-6 { right: 24vw; top: 56vh; transform: rotate(2deg); }
.ec-7 { right: 5vw; top: 26vh; transform: rotate(-3deg); }

/* --- split panels --- */
.split { display: flex; }
.split .strip {
  width: 34%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}
.split .strip img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.9) contrast(1.05) brightness(0.8);
  will-change: transform;
}
.split-body {
  padding: 16vh 6vw 0;
  max-width: 720px;
}
.split-rev { justify-content: space-between; }
.split-rev .split-body { padding-top: 18vh; }

.p-huge {
  position: absolute;
  bottom: 6vh;
  left: 38%;
  font-family: var(--font-display);
  font-size: clamp(5rem, 17vh, 12rem);
  line-height: 0.95;
  white-space: nowrap;
  will-change: transform;
}
.p-huge-warm { color: var(--accent); left: auto; right: -4vw; bottom: 4vh; }

/* --- collage panels (Bilder fliegen ein) --- */
.collage { }
.collage-body {
  position: absolute;
  top: 14vh; left: 6vw;
  z-index: 5;
  max-width: 620px;
}
.fly {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  will-change: transform;
}
.fly img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage .fly img { filter: grayscale(0.85) contrast(1.05) brightness(0.85); }
.genug .fly img { filter: none; }

.fly-1 { width: 34vw; height: 58vh; right: 44vw; bottom: 8vh; transform: rotate(-4deg); }
.fly-2 { width: 26vw; height: 42vh; right: 14vw; top: 12vh; transform: rotate(3deg); }
.fly-3 { width: 20vw; height: 34vh; right: 8vw; bottom: 6vh; transform: rotate(-2deg); }

.genug .fly-1 { right: 40vw; bottom: 12vh; }
.genug .fly-2 { right: 10vw; top: 10vh; }

/* --- number panel --- */
.number { display: flex; align-items: center; }
.num-huge {
  font-family: var(--font-display);
  font-size: clamp(18rem, 78vh, 42rem);
  line-height: 0.8;
  margin-left: -4vw;
  color: var(--ink);
  will-change: transform;
}
.num-col { max-width: 420px; padding: 0 3vw; }
.num-col-1 { align-self: flex-start; padding-top: 16vh; }
.num-col-2 { align-self: flex-end; padding-bottom: 14vh; }
.num-of small {
  font-family: var(--font-display);
  font-size: 0.32em;
  vertical-align: baseline;
  opacity: 0.75;
}

/* --- riss panel --- */
.riss { display: flex; align-items: center; }
.riss-media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.riss-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.3) brightness(0.9);
  will-change: transform;
}
.riss-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(8,8,10,0.85), rgba(8,8,10,0.25) 55%, rgba(8,8,10,0.1));
}
.riss-body {
  position: relative;
  z-index: 2;
  padding: 0 8vw;
  max-width: 760px;
}

/* ============ BUCH (vertikal) ============ */
.kap-buch {
  background: var(--warm);
  color: var(--ink);
  padding: 18vh 6vw 12vh;
}
.buch-head { max-width: 1200px; margin: 0 auto 10vh; }
.buch-head .p-label { color: rgba(30,26,22,0.6); }
.buch-title { font-size: clamp(2.6rem, 7vw, 6rem); }

.buch-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5vw;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.book-stage { perspective: 1400px; display: flex; justify-content: center; }
.book {
  position: relative;
  width: min(300px, 62vw);
  aspect-ratio: 0.671;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(4deg);
  transition: transform 0.6s cubic-bezier(.2,.8,.3,1);
}
.book:hover { transform: rotateY(-12deg) rotateX(2deg); }
.book-cover {
  position: absolute; inset: 0;
  border-radius: 3px 10px 10px 3px;
  overflow: hidden;
  box-shadow: 0 40px 70px rgba(30, 22, 16, 0.35);
  transform: translateZ(14px);
  background: #f4efe4;
}
.book-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.book-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 28px;
  background: linear-gradient(90deg, #ded7c7, #f0eadc);
  transform: rotateY(-90deg) translateZ(14px) translateX(-14px);
  transform-origin: left;
}
.book-pages {
  position: absolute; right: 0; top: 5px; bottom: 5px; width: 26px;
  background: repeating-linear-gradient(90deg, #f6efe6 0 2px, #e4dccf 2px 3px);
  transform: rotateY(90deg) translateZ(-8px) translateX(13px);
  transform-origin: right;
}

.buch-intro { font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.6; margin-bottom: 3rem; max-width: 46ch; }
.buch-list { list-style: none; margin-bottom: 3.2rem; }
.buch-list li {
  padding: 1.3rem 0;
  border-top: 1px solid rgba(30, 26, 22, 0.18);
  font-size: 1.02rem;
  max-width: 52ch;
}
.buch-list li:last-child { border-bottom: 1px solid rgba(30, 26, 22, 0.18); }
.buch-list b { font-weight: 600; }

/* 30-tage-meilensteine */
.miles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: rgba(30,26,22,0.15);
  border: 1px solid rgba(30,26,22,0.15);
  max-width: 1200px;
  margin: 12vh auto 0;
}
.mile { background: var(--warm); padding: 2.2rem 1.8rem; }
.mile-day {
  display: block;
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.mile p { font-size: 0.95rem; color: rgba(30,26,22,0.85); max-width: 30ch; }

/* stimmen */
.voices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3vw;
  max-width: 1200px;
  margin: 10vh auto 0;
}
.voices blockquote {
  font-family: var(--font-soft);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
}
.voices blockquote span {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--font-text);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.buch-final {
  max-width: 1200px;
  margin: 12vh auto 0;
  text-align: center;
}
.buch-final .buch-ctas { justify-content: center; }

.buch-ctas { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.8rem; }
.btn {
  display: inline-block;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 10px 30px rgba(224, 122, 95, 0.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(224, 122, 95, 0.45); }
.btn-ghost { border: 1.5px solid rgba(30, 26, 22, 0.4); color: var(--ink); }
.btn-ghost:hover { background: rgba(30, 26, 22, 0.08); }
.buch-fine { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; opacity: 0.55; }

.reveal-line { opacity: 0; transform: translateY(28px); }

/* ============ OUTRO ============ */
.outro {
  background: var(--warm);
  color: var(--ink);
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16vh;
  padding: 10vh 6vw 110px;
  text-align: center;
}
.outro-line { margin: 0; opacity: 0; transform: translateY(28px); }
.outro-bar {
  display: flex; justify-content: space-between; gap: 2rem; width: 100%;
  font-size: 0.58rem; font-weight: 500; letter-spacing: 0.16em; opacity: 0.6;
  border-top: 1px solid rgba(30, 26, 22, 0.2);
  padding-top: 1.4rem;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .corner-br { display: none; }
  .corner { font-size: 0.55rem; }

  .hero-title { font-size: clamp(3.2rem, 18vw, 7rem); }

  .panel.wide { width: 120vw; }
  .split .strip { width: 42%; }
  .split { flex-direction: column; }
  .split .strip { width: 100%; height: 38vh; }
  .split-body { padding: 6vh 8vw 0; }
  .split-rev { flex-direction: column-reverse; }
  .p-huge { font-size: clamp(3rem, 9vh, 6rem); left: 8vw; bottom: 4vh; }
  .div-time { font-size: clamp(5rem, 22vh, 11rem); }

  .collage-body { position: relative; top: 0; left: 0; padding: 8vh 8vw 0; }
  .fly-1 { width: 60vw; height: 34vh; right: 30vw; bottom: 4vh; }
  .fly-2 { width: 44vw; height: 26vh; right: 4vw; top: auto; bottom: 26vh; }
  .fly-3 { display: none; }
  .genug .fly-1 { right: 34vw; bottom: 6vh; }
  .genug .fly-2 { right: 4vw; bottom: 30vh; top: auto; }

  .num-huge { font-size: clamp(9rem, 40vh, 16rem); }
  .number { flex-direction: column; align-items: flex-start; }
  .num-col-1, .num-col-2 { padding: 4vh 8vw; align-self: flex-start; }

  .st-big { font-size: clamp(2.4rem, 8vh, 4.5rem); }

  /* headline skaliert nach breite, damit sie zweizeilig bleibt und nicht in die karten läuft */
  .cost-head { font-size: clamp(1.7rem, 10vw, 4rem); }
  .cost-card { width: clamp(180px, 40vw, 260px); padding: 2rem 1.1rem 1.2rem; }
  .cost-card p { font-size: 0.92rem; }

  /* fließtexte nie breiter als der bildschirm */
  .p-text { max-width: min(44ch, 84vw); }

  /* echo-karten starten erst NACH dem einleitungstext (erster viewport bleibt frei) */
  .panel.wider { width: 340vw; }
  .echo-card { width: clamp(200px, 38vw, 280px); padding: 1.2rem 1.3rem 1.1rem; }
  .echo-card p { font-size: 0.82rem; }
  .ec-1 { right: 189vw; top: 14vh; }
  .ec-2 { right: 158vw; top: 52vh; }
  .ec-3 { right: 127vw; top: 12vh; }
  .ec-4 { right: 96vw; top: 50vh; }
  .ec-5 { right: 65vw; top: 16vh; }
  .ec-6 { right: 34vw; top: 54vh; }
  .ec-7 { right: 3vw; top: 22vh; }

  .miles { grid-template-columns: 1fr 1fr; }

  .buch-grid { grid-template-columns: 1fr; gap: 8vh; }
  .outro-bar { flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
}