/* ═══════════════════════════════════════════════════════════════════
   Fallstudien-Seiten — baut auf styles.css auf.
   Jede Seite bekommt über eine Klasse am <html> ihre eigene Akzentfarbe.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Akzentfarben je Projekt ─────────────────────────────────────── */
.case-track-attack     { --accent: #1f9d55; --accent-soft: rgba(31, 157, 85, 0.10); }
.case-patchnotes  { --accent: #a8541f; --accent-soft: rgba(168, 84, 31, 0.10); }
.case-rollenkarten{ --accent: #b0432a; --accent-soft: rgba(176, 67, 42, 0.10); }
.case-videos      { --accent: #3d5488; --accent-soft: rgba(61, 84, 136, 0.10); }
/* Die Seite über die Seite trägt das Violett des gläsernen „moin“. */
.case-website     { --accent: #5b52d6; --accent-soft: rgba(91, 82, 214, 0.10); }
/* Riftle: das Türkis der Riss-Optik aus dem Spiel. */
.case-riftle      { --accent: #0f7c8a; --accent-soft: rgba(15, 124, 138, 0.10); }

@media (prefers-color-scheme: dark) {
  .case-track-attack:not([data-theme="light"])     { --accent: #4ade80; --accent-soft: rgba(74, 222, 128, 0.12); }
  .case-patchnotes:not([data-theme="light"])  { --accent: #f0a35e; --accent-soft: rgba(240, 163, 94, 0.12); }
  .case-rollenkarten:not([data-theme="light"]){ --accent: #f08163; --accent-soft: rgba(240, 129, 99, 0.12); }
  .case-videos:not([data-theme="light"])      { --accent: #8fa8e0; --accent-soft: rgba(143, 168, 224, 0.12); }
  .case-website:not([data-theme="light"])     { --accent: #a99cff; --accent-soft: rgba(169, 156, 255, 0.12); }
  .case-riftle:not([data-theme="light"])      { --accent: #5fd0e0; --accent-soft: rgba(95, 208, 224, 0.12); }
}
.case-track-attack[data-theme="dark"]     { --accent: #4ade80; --accent-soft: rgba(74, 222, 128, 0.12); }
.case-patchnotes[data-theme="dark"]  { --accent: #f0a35e; --accent-soft: rgba(240, 163, 94, 0.12); }
.case-rollenkarten[data-theme="dark"]{ --accent: #f08163; --accent-soft: rgba(240, 129, 99, 0.12); }
.case-videos[data-theme="dark"]      { --accent: #8fa8e0; --accent-soft: rgba(143, 168, 224, 0.12); }
.case-website[data-theme="dark"]     { --accent: #a99cff; --accent-soft: rgba(169, 156, 255, 0.12); }
.case-riftle[data-theme="dark"]      { --accent: #5fd0e0; --accent-soft: rgba(95, 208, 224, 0.12); }

/* ── Hero ────────────────────────────────────────────────────────── */
.case-hero {
  padding: clamp(9rem, 22vh, 14rem) var(--pad) clamp(3rem, 8vh, 5rem);
}

.case-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-kicker .dot { color: var(--accent); }

.case-title {
  margin: 0;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.case-hook {
  margin: clamp(1.5rem, 4vw, 2.25rem) 0 0;
  max-width: 30ch;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: var(--muted);
}

/* Worterklärung direkt unter dem Aufhänger: absichtlich kleiner als der
   Fließtext, damit sie niemanden aufhält, der den Begriff kennt. */
.case-hook-note {
  margin: clamp(1rem, 2vw, 1.5rem) 0 0;
  max-width: 44ch;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
  opacity: 0.75;
}

/* ── Meta-Leiste ─────────────────────────────────────────────────── */
.case-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0;
  margin: clamp(3rem, 7vw, 4.5rem) var(--pad) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.case-meta > div {
  padding: 1.25rem 0.75rem;
}
.case-meta dt {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
}

/* ── Kennzahlen ──────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
}

.stat-value {
  display: block;
  font-size: clamp(2.75rem, 7vw, 5rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 0.4em;
  letter-spacing: -0.01em;
  margin-left: 0.15em;
}
.stat-label {
  display: block;
  margin-top: 0.9rem;
  max-width: 22ch;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ── Zweispaltiger Block (Vorher / Jetzt) ────────────────────────── */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  border-top: 1px solid var(--line);
}
.split > div {
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad);
}
.split > div + div {
  border-left: 1px solid var(--line);
  background: var(--accent-soft);
}

.block-label {
  margin: 0 0 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.split p, .prose p {
  margin: 0 0 1rem;
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.65;
}

/* ── Abschnitte allgemein ────────────────────────────────────────── */
.case-section {
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
  border-top: 1px solid var(--line);
}
.case-h2 {
  margin: 0 0 2.5rem;
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* ── Ablauf als Zeitleiste ───────────────────────────────────────── */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 58ch;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.75rem 3.5rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.1em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--accent);
}
/* durchgehende Linie zwischen den Schritten */
.steps li::after {
  content: "";
  position: absolute;
  left: 0.62rem; top: 1.8em;
  width: 1px; height: calc(100% - 1.8em);
  background: var(--line);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }

/* ── Prompt-Zitat ────────────────────────────────────────────────── */
.prompt {
  margin: 0 0 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  max-width: 62ch;
}
.prompt::before {
  content: "Gefragt";
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.prompt p { margin: 0; }
.prompt p + p { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* ── Pull-Quote ──────────────────────────────────────────────────── */
.pull {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.pull-source {
  display: block;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Eigene Worte ────────────────────────────────────────────────── */
.own-words p {
  max-width: 50ch;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* ── Kapitel-Raster (Feature-Übersicht) ──────────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;                      /* die Lücke selbst bildet die Linie */
  background: var(--line);
  border: 1px solid var(--line);
}
.feature {
  background: var(--bg);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
}
.feature-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.feature-n { color: var(--accent); }
.feature-note { color: var(--muted); }
.feature h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.feature p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.feature p b { color: var(--fg); font-weight: 500; }

/* ── Technik-Chips ───────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 62ch;
}
.chip {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ── Hinweis-Kasten (offene Fragen, Warnungen) ───────────────────── */
.note {
  max-width: 58ch;
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px dashed var(--line);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.note strong { color: var(--fg); font-weight: 500; }

/* ── Aktionen am Seitenende ──────────────────────────────────────── */
.case-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(4rem, 10vh, 7rem) var(--pad);
  border-top: 1px solid var(--line);
}
/* Trockener Nachsatz unter den Knöpfen. Er steht bewusst NEBEN dem
   Knopfblock im Markup und nicht darin: Als Flex-Kind mit Maximalbreite
   würde er sich neben die Knöpfe setzen statt darunter. Der Knopfblock
   gibt dafür seinen unteren Abstand ab. */
.case-cta-mit-notiz { padding-bottom: 1.5rem; }
.case-cta-note {
  margin: 0 var(--pad) clamp(4rem, 10vh, 7rem);
  max-width: 52ch;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.35s var(--ease);
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Screenshot ──────────────────────────────────────────────────── */
.shot {
  margin: 0;
  padding: clamp(3rem, 8vh, 6rem) var(--pad);
  border-top: 1px solid var(--line);
}
.shot img,
.shot video {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}

/* Breiter Ausschnitt für das Bewegtbild — das ist der Hingucker. */
.shot-wide img,
.shot-wide video { max-width: 1400px; }
.shot figcaption {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
/* ── Tonhinweis am Video ─────────────────────────────────────────
   Klebt rechts am Videorand und erscheint erst beim Abspielen. Die
   Bühne ist nur so breit wie das Video selbst, damit der Zettel am
   Bild hängt und nicht irgendwo im Seitenrand steht.
   ──────────────────────────────────────────────────────────────── */
.video-buehne {
  position: relative;
  width: 100%;
  max-width: 1400px;
}

.ton-tipp {
  position: absolute;
  /* Auf halber Höhe rechts — oben in der Ecke geht der Hinweis unter. */
  top: 50%;
  right: 0;
  translate: 42% -50%;       /* ragt über die Kante hinaus */
  z-index: 2;
  display: grid;
  gap: 0.3rem;
  width: max-content;
  max-width: 13rem;
  padding: 0.85rem 1rem;
  background: #06070a;
  border: 1px solid var(--neon);
  box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.ton-tipp.is-da { opacity: 1; transform: none; }
/* Ein Zeiger zur Videokante hin, damit klar ist, worauf sich der
   Hinweis bezieht. */
.ton-tipp::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.5rem;
  width: 0.5rem;
  height: 1px;
  background: var(--neon);
}
.ton-tipp[hidden] { display: none; }

.ton-tipp-kopf {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neon);
}
.ton-tipp-text {
  font-size: 0.875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}

/* Fünf Balken, die wie ein Pegel tanzen — dasselbe Motiv wie die
   Schallwelle im Headset. */
.ton-tipp-welle {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 1rem;
}
.ton-tipp-welle i {
  width: 3px;
  background: var(--neon);
  animation: pegel 1s ease-in-out infinite;
}
.ton-tipp-welle i:nth-child(1) { height: 40%; animation-delay: 0s; }
.ton-tipp-welle i:nth-child(2) { height: 75%; animation-delay: 0.15s; }
.ton-tipp-welle i:nth-child(3) { height: 100%; animation-delay: 0.3s; }
.ton-tipp-welle i:nth-child(4) { height: 65%; animation-delay: 0.45s; }
.ton-tipp-welle i:nth-child(5) { height: 35%; animation-delay: 0.6s; }
@keyframes pegel {
  0%, 100% { transform: scaleY(0.4); }
  50%      { transform: scaleY(1); }
}

/* Ist der Ton schon an, wird aus der Aufforderung eine Bestätigung. */
.ton-tipp.ist-an { border-color: var(--line); }
.ton-tipp.ist-an .ton-tipp-kopf { color: var(--muted); }
.ton-tipp.ist-an .ton-tipp-welle i { background: var(--muted); }

@media (max-width: 1100px) {
  .ton-tipp { translate: 0 -50%; right: 0.75rem; max-width: 11rem; }
  .ton-tipp::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ton-tipp-welle i { animation: none; }
}

/* Platzhalter, solange kein Bild da ist */
.shot-placeholder {
  display: grid;
  place-items: center;
  max-width: 1100px;
  aspect-ratio: 16 / 10;
  border: 1px dashed var(--line);
  background: var(--accent-soft);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 2rem;
}

/* ── Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .split > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ── Rundgang: eine Ansicht nach der anderen ─────────────────────────
   Links der Text, rechts das Bild. Auf dem Handy untereinander.
   ──────────────────────────────────────────────────────────────── */
.rundgang-intro { padding-bottom: 0; }
.station {
  display: grid;
  grid-template-columns: minmax(15rem, 1fr) minmax(0, 2.3fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad);
  border-top: 1px solid var(--line);
}
.station-text h3 {
  margin: 0.6rem 0 0.9rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.15;
}
.station-text p {
  margin: 0 0 0.9rem;
  max-width: 40ch;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
}
.station-text p b { color: var(--fg); font-weight: 500; }
.station-n {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.station figure { margin: 0; }
.station img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
}
.station figcaption {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.station-klein { grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.4fr); }
.nicht-liste { margin: 0; padding: 0; list-style: none; max-width: 60ch; }
.nicht-liste li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2rem;
  border-top: 1px solid var(--line);
  line-height: 1.6;
}
.nicht-liste li::before {
  content: "✕";
  position: absolute; left: 0; top: 0.85rem;
  color: var(--accent);
  font-family: var(--font-mono);
}
.nicht-liste b { font-weight: 500; }
@media (max-width: 860px) {
  .station, .station-klein { grid-template-columns: 1fr; }
}