/* Meruna Experience: Marke und eigenes Markup. Die Engine (scrollcraft.css) bleibt unverändert,
   hier stehen nur die Tokens der Marke und die Klassen dieser Seite (Präfix x-).
   Regeln: docs/BAUPLAN.md (hell, Orange #FF7900, IBM Plex) und der Skill scroll-craft (taste.md). */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/experience/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 100 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/experience/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/experience/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --sc-canvas:     #e4e8ec;   /* kühler Morgen. Wandert per data-sc-drift zu warmem Weiß. */
  --sc-surface:    #ffffff;
  --sc-ink:        #262626;
  --sc-ink-soft:   #555a60;
  --sc-accent:     #ff7900;
  --sc-accent-ink: #ffffff;

  --sc-font-display: "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-text:    "IBM Plex Sans", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Deutsche Großbuchstaben mit Umlaut brauchen Luft über der Zeile, sonst schneidet die Maske
     der Zeilen-Animation die Punkte ab. */
  --sc-leading-none: 1.04;

  /* Schatten für hellen Grund: gleiche Form wie in der Engine, deutlich weniger Deckung. */
  --sc-shadow-color: 214 24% 26%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.07), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.07);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.06), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.12);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.05), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.14),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.8);

  --x-r-knopf: 10px;
  --x-r-flaeche: 18px;
  --x-rand: max(var(--sc-gutter), calc((100vw - var(--sc-maxw)) / 2 + var(--sc-gutter)));
}

.sc-display { font-weight: 600; }
.sc-display--lg { font-size: clamp(2.3rem, 1.5rem + 3.3vw, 4.2rem); }
.sc-label { font-weight: 500; margin: 0 0 var(--sc-4); }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

/* ------------------------------------------------------------------ Leiste -- */
.x-bar {
  position: fixed; top: var(--sc-3); left: 50%; translate: -50% 0;
  z-index: var(--sc-z-chrome);
  width: min(calc(100% - 2 * var(--sc-4)), 74rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: var(--sc-2) var(--sc-2) var(--sc-2) var(--sc-4);
  background: rgb(255 255 255 / 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgb(38 38 38 / 0.08);
  border-radius: 14px;
  box-shadow: var(--sc-e2);
  color: #262626;
}
.x-bar__marke img { height: 1.75rem; width: auto; }
.x-bar__wege { display: flex; align-items: center; gap: var(--sc-4); }
.x-bar__tel {
  display: inline-flex; align-items: center; gap: var(--sc-2);
  min-height: 2.5rem; padding-inline: var(--sc-2);
  font-weight: 500; font-size: var(--sc-t-sm); text-decoration: none; white-space: nowrap;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.x-bar__tel svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.x-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 var(--sc-5);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  border-radius: var(--x-r-knopf);
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.25);
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), scale 120ms var(--sc-ease-out);
}
.x-knopf--klein { min-height: 2.5rem; padding: 0 var(--sc-4); font-size: var(--sc-t-sm); }
.x-knopf:active { scale: 0.97; }
@media (hover: hover) and (pointer: fine) {
  .x-knopf:hover { background: #e96e00; }
  .x-bar__tel:hover, .x-fuss a:hover, .x-karte__tel a:hover { color: #c45c00; }
}

/* ------------------------------------------------------- Bühnen mit Foto -- */
/* Über Fotos liegt weiße Schrift auf einem dunklen Eck- oder Bandverlauf. Die Verläufe der Engine
   lesen --sc-canvas, deshalb wird das Token hier für den Teilbaum dunkel gesetzt (und color gleich
   mit, weil geerbte Farbe schon am body aufgelöst ist). */
.x-foto {
  --sc-canvas: #0d1217; --sc-ink: #ffffff; --sc-ink-soft: #dde2e7;
  background: #0d1217; color: var(--sc-ink);
}
.x-foto .sc-copy { text-shadow: 0 1px 18px rgb(13 18 23 / 0.35); }
.x-foto .sc-lede { margin-top: var(--sc-4); }
.x-hero { max-width: min(60rem, 88vw); }
.x-hero h1 span { display: block; }

/* -------------------------------------------- Fluss-Abschnitte (2 und 6) -- */
/* Vor und nach einem angepinnten Akt weniger Luft: die Bühne braucht ohnehin einen ganzen
   Bildschirm zum Ein- und Ausfahren, volle Abschnittsluft obendrauf liest sich als Leerlauf. */
.x-nach-pin { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: clamp(2rem, 4vw, 4rem); }
.x-spalten {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 7vw, 7rem); align-items: center;
}
.x-spalten--oben { align-items: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.x-versuche { margin-top: var(--sc-6); border-bottom: 1px solid var(--sc-hairline-strong); }
.x-versuche li {
  padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink-soft); max-width: 34rem;
}
.x-versuche strong { display: block; color: var(--sc-ink); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: var(--sc-track-snug); }
.x-versuche + .sc-lede { margin-top: var(--sc-6); }
.x-bild { aspect-ratio: 4 / 5; border-radius: var(--x-r-flaeche); overflow: hidden; box-shadow: var(--sc-e3); }
.x-bild img { width: 100%; height: 100%; object-fit: cover; }

.x-tatsachen { border-bottom: 1px solid var(--sc-hairline-strong); }
.x-tatsache { padding: var(--sc-5) 0; border-top: 1px solid var(--sc-hairline-strong); }
.x-tatsache h3 { font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.3; }
.x-tatsache p { margin-top: var(--sc-2); color: var(--sc-ink-soft); max-width: var(--sc-measure); text-wrap: pretty; }

/* ------------------------------------------- Bühnen mit Liste (3 und 5) -- */
.x-buehne {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 35rem);
  align-items: center; gap: clamp(2rem, 6vw, 6rem);
  padding: 6rem var(--x-rand) 3rem;
}
.x-buehne__text .sc-lede { margin-top: var(--sc-4); }
.x-stille {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding-inline: var(--sc-gutter); text-align: center; pointer-events: none;
}

.x-liste {
  position: relative;
  background: var(--sc-surface); color: #262626;
  border: 1px solid rgb(38 38 38 / 0.08); border-radius: var(--x-r-flaeche);
  box-shadow: var(--sc-e3), var(--sc-edge);
  overflow: hidden; font-size: var(--sc-t-base); line-height: 1.35;
}
/* Akt 3: Die Liste verschwindet vor der Stille, getrieben vom Fortschritt des Akts. */
[data-x-liste="agentur"] .x-liste { opacity: clamp(0, calc((0.78 - var(--sc-p, 0)) / 0.06), 1); }

.x-liste__kopf, .x-liste__fuss {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4);
  padding: var(--sc-3) var(--sc-4);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.02em; color: #555a60;
}
.x-liste__kopf { border-bottom: 1px solid rgb(38 38 38 / 0.08); }
.x-liste__kopf span:first-child { display: inline-flex; align-items: center; gap: var(--sc-2); color: #262626; font-weight: 500; }
.x-liste__fuss { background: #f6f7f8; font-variant-numeric: tabular-nums; }
.x-liste__fuss b { color: #262626; font-weight: 500; }
.x-marke {
  padding: 0.1rem 0.5rem; border: 1px solid rgb(38 38 38 / 0.14); border-radius: var(--sc-r-pill);
  text-transform: uppercase; letter-spacing: var(--sc-track-wide); font-size: 0.68rem;
}

.x-zeile {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sc-3);
  padding: 0.85rem var(--sc-4);
  border-bottom: 1px solid rgb(38 38 38 / 0.08);
  transition: background-color var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out);
}
.x-zeile__bild {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: #eef0f2; color: #555a60;
  font-family: var(--sc-font-mono); font-size: 0.7rem; font-weight: 500;
}
.x-zeile__wer b { display: block; font-weight: 600; }
.x-zeile__wer i { display: block; font-style: normal; color: #555a60; font-size: 0.86em; }
.x-zeile__stand { max-width: 12.5rem; text-align: right; color: #555a60; font-size: 0.86em; text-wrap: balance; }

/* Akt 3, Signature Move: der Scroll wählt. Unter der aktiven Zeile läuft das Rufzeichen mit
   (--x-t kommt aus experience.js), danach kippt die Zeile in ihr Ergebnis. */
.x-zeile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: #262626; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
}
[data-x-liste="agentur"] .x-zeile.is-aktiv { background: #f3f5f7; }
[data-x-liste="agentur"] .x-zeile.is-aktiv::after { transform: scaleX(var(--x-t, 0)); opacity: 0.55; }
[data-x-liste="agentur"] .x-zeile.is-aktiv .x-zeile__stand { color: #262626; }
[data-x-liste="agentur"] .x-zeile.is-fertig .x-zeile__wer,
[data-x-liste="agentur"] .x-zeile.is-fertig .x-zeile__bild { opacity: 0.45; }
[data-x-liste="agentur"] .x-zeile.is-fertig .x-zeile__wer b { text-decoration: line-through; text-decoration-thickness: 1px; }
[data-x-liste="agentur"] .x-zeile.is-fertig .x-zeile__stand { color: #262626; font-weight: 500; }

/* Akt 5: dieselbe Liste, diesmal kommen Zeilen an. Die ankommende Zeile ist an den Scroll
   gebunden (--x-t), fertige Zeilen stehen. */
.x-liste--meruna .x-zeile { opacity: 0; }
.x-liste--meruna .x-zeile.is-aktiv {
  opacity: clamp(0, calc(var(--x-t, 0) * 3), 1);
  transform: translate3d(0, calc((1 - clamp(0, var(--x-t, 0) * 3, 1)) * 12px), 0);
  transition: none;
}
.x-liste--meruna .x-zeile.is-fertig { opacity: 1; }
.x-liste--meruna .x-zeile__bild { background: #fff1e3; color: #9a4a00; }
.x-liste--meruna .x-zeile__stand { display: inline-flex; align-items: center; gap: 0.4rem; color: #262626; font-weight: 500; }
.x-liste--meruna .x-zeile__stand::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--sc-accent); flex: none;
}
.x-liste--meruna .x-zeile.is-fertig .x-zeile__stand::before {
  width: 0.95rem; height: 0.95rem; border-radius: 0; background: none;
  /* Häkchen als Maske, damit es die Akzentfarbe trägt */
  background-color: var(--sc-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.x-liste__leer {
  position: absolute; inset: 3rem 0 3rem; display: grid; place-items: center;
  padding-inline: var(--sc-6); text-align: center; color: #555a60; text-wrap: balance;
  transition: opacity var(--sc-d-base) var(--sc-ease-out);
}
[data-x-schritt="3"] .x-liste__leer { opacity: 0; }

.x-schritte { margin-top: var(--sc-6); counter-reset: schritt; border-bottom: 1px solid var(--sc-hairline-strong); max-width: 30rem; }
.x-schritte li {
  counter-increment: schritt; display: flex; align-items: baseline; gap: var(--sc-3);
  padding: var(--sc-3) 0; border-top: 1px solid var(--sc-hairline-strong);
  color: var(--sc-ink-soft); transition: color var(--sc-d-base) var(--sc-ease-out);
}
.x-schritte li::before {
  content: counter(schritt); font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 500;
  color: var(--sc-ink-soft); min-width: 1ch; transition: color var(--sc-d-base) var(--sc-ease-out);
}
[data-x-schritt="1"] .x-schritte li:nth-child(1),
[data-x-schritt="2"] .x-schritte li:nth-child(-n + 2),
[data-x-schritt="3"] .x-schritte li { color: var(--sc-ink); font-weight: 500; }
[data-x-schritt="1"] .x-schritte li:nth-child(1)::before,
[data-x-schritt="2"] .x-schritte li:nth-child(-n + 2)::before,
[data-x-schritt="3"] .x-schritte li::before { color: #c45c00; }

/* ----------------------------------------------------------- Abschluss -- */
.x-schluss { background: #0d1217; }
.x-schluss__vorher, .x-schluss__nachher, .x-schluss__nachher img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
}
.x-schluss__nachher img { object-position: 50% 30%; }
.x-karte {
  position: absolute; z-index: var(--sc-z-copy);
  left: var(--x-rand); bottom: clamp(5rem, 11vh, 7.5rem);
  width: min(36rem, calc(100% - 2 * var(--sc-4)));
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-radius: var(--x-r-flaeche);
  box-shadow: var(--sc-e3), var(--sc-edge);
  color: #262626;
}
.x-karte > p { margin-top: var(--sc-3); color: #555a60; }
.x-karte__wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-4); margin-top: var(--sc-5); }
.x-karte__micro { font-size: var(--sc-t-sm); color: #555a60; }
.x-karte .x-karte__tel { margin-top: var(--sc-5); padding-top: var(--sc-4); border-top: 1px solid rgb(38 38 38 / 0.1); font-size: var(--sc-t-sm); }
.x-karte__tel a { color: #262626; font-weight: 600; white-space: nowrap; }
.x-karte__tel span { display: block; }

.x-fuss {
  position: absolute; z-index: var(--sc-z-copy); inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-2) var(--sc-5);
  padding: var(--sc-3) var(--x-rand);
  background: #f9f9f9; color: #555a60; font-size: var(--sc-t-xs);
  border-top: 1px solid rgb(38 38 38 / 0.08);
}
.x-fuss a { text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out); }
.x-fuss__hinweis { margin-left: auto; }

/* --------------------------------------------------------------- Handy -- */
@media (max-width: 860px) {
  .x-bar { padding-left: var(--sc-3); gap: var(--sc-2); }
  .x-bar__marke img { height: 1.5rem; }
  .x-bar__wege { gap: var(--sc-1); }
  .x-bar__tel span { display: none; }
  .x-bar__tel { min-width: 2.75rem; justify-content: center; }
  .x-bar__tel svg { width: 1.25rem; height: 1.25rem; }
  .x-knopf--klein { min-height: 2.75rem; padding: 0 var(--sc-3); }

  .x-hero h1 { font-size: var(--sc-t-2xl); }
  .x-foto .sc-copy { bottom: clamp(2rem, 7vh, 4rem); }
  .x-foto .sc-display--md { font-size: var(--sc-t-xl); }

  .x-spalten, .x-spalten--oben { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }

  .x-buehne {
    grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--sc-5);
    padding: 5rem var(--sc-gutter) 1.25rem;
  }
  .x-buehne .sc-display--lg { font-size: var(--sc-t-xl); }
  .x-buehne .sc-lede { font-size: var(--sc-t-base); margin-top: var(--sc-2); }
  .x-buehne .sc-label { margin-bottom: var(--sc-2); }
  .x-schritte { margin-top: var(--sc-4); }
  .x-schritte li { padding: var(--sc-2) 0; font-size: var(--sc-t-sm); }
  .x-liste { font-size: var(--sc-t-sm); }
  .x-zeile { padding: 0.5rem var(--sc-3); gap: var(--sc-2); }
  .x-zeile__bild { width: 2rem; height: 2rem; }
  .x-zeile__stand { max-width: 8.25rem; font-size: 0.82em; }
  .x-liste__kopf, .x-liste__fuss { padding: var(--sc-2) var(--sc-3); }
  .x-stille { font-size: var(--sc-t-2xl); }

  .x-karte { left: var(--sc-4); bottom: 6.75rem; }
  .x-karte .sc-display--md { font-size: var(--sc-t-xl); }
  .x-fuss { padding: var(--sc-2) var(--sc-gutter); gap: var(--sc-1) var(--sc-4); }
  .x-fuss__hinweis { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .x-liste--meruna .x-zeile.is-aktiv { transform: none; }
  .x-zeile, .x-schritte li, .x-knopf { transition: none; }
}