/* LYVOR STUDIO · Verkaufsseite (Blueprint 16.08.2026)
   Regeln aus dem Rollen-Panel: Kaufrelevantes bei 0svh · Bewegung nie
   scroll-gekoppelt · Preis/Frist/CTA ab Frame 0 lesbar · 100svh statt 100vh
   · alles Bewegte hinter IntersectionObserver · Reduced Motion = Endzustand. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/InstrumentSerif-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #101014;
  --ink-soft: #191920;
  --ink-line: #2c2c36;
  --paper: #f3ead9;
  --paper-dim: #b9b2a5;
  --accent: #e2653f;
  --accent-soft: #eb8a63;
  --white: #ffffff;

  --font: 'Space Grotesk', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-em: 'Instrument Serif', ui-serif, Georgia, serif;

  --edge: clamp(1.25rem, 4vw, 4.5rem);
  --pad: clamp(3.5rem, 9vh, 7rem);
  --maxw: 76rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:target { scroll-margin-top: 5rem; }

/* Ohne JavaScript verkauft die Seite trotzdem: Buehne ausgeleuchtet, Vergleich
   halb/halb sichtbar, nur der Regler verschwindet (er braucht JS). */
html:not(.js) .stage-light,
html:not(.js) .stage-haze,
html:not(.js) .stage-floor { opacity: 1; }
html:not(.js) .stage-subject { transform: none; opacity: 1; }
html:not(.js) .stage { cursor: default; }
html:not(.js) .compare-range,
html:not(.js) .stage-hint { display: none; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--white); text-wrap: balance; }
h1 em, h2 em { font-family: var(--font-em); font-style: italic; font-weight: 400; letter-spacing: 0; color: var(--accent-soft); }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; left: -999px; top: 0; z-index: 60; background: var(--paper); color: var(--ink); padding: 0.6rem 1rem; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.section-head { max-width: 46rem; margin: 0 auto clamp(2rem, 5vh, 3.2rem); text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); margin-bottom: 1rem; }
.section-head p { color: var(--paper-dim); }

/* ---------- S0 Miniheader ---------- */

/* Brand-Freeze 2026-08-20 (Opus-C4-Auflage): Kopf ist ab dem ersten Paint da —
   Wortmarke, Rückweg zur Dachmarke und Navigation dürfen nicht vom Scrollen
   oder von JavaScript abhängen. Deckende Tinte statt Glas (Brand-Core-Regel). */
.mini-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem var(--edge);
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}
.mini-header.is-on { border-bottom-color: var(--ink-line); }
/* Die Kopfzeile braucht sonst 379 CSS-px; bei 360 px ragt der CTA 19 px hinaus,
   bei 320 px 59 px. Am gerenderten Element gemessen, beide Stufen geprueft. */
@media (max-width: 420px) {
  .mini-header { padding-left: 0.9rem; padding-right: 0.9rem; }
  .mini-nav { gap: 0.7rem; }
  .mini-nav a { font-size: 0.78rem; }
}
@media (max-width: 380px) {
  .mini-nav a:not(.mini-cta) { display: none; }
}
.mini-header .mark { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.32em; color: var(--white); }
.mini-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); font-size: 0.85rem; }
.mini-nav a { text-decoration: none; color: var(--paper-dim); }
.mini-nav a:hover { color: var(--white); }
.mini-cta {
  color: var(--ink) !important; background: var(--paper);
  border-radius: 999px; padding: 0.4rem 0.95rem; font-weight: 600;
}

/* ---------- S1 Hero ---------- */

.hero { padding: clamp(4.5rem, 9vh, 7rem) var(--edge) var(--pad); position: relative; }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.hero-copy h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); margin-bottom: 1.2rem; }
.hero-sub { color: var(--paper-dim); margin-bottom: 1.1rem; max-width: 34rem; }
.hero-facts {
  font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent-soft); margin-bottom: 1.8rem;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.8rem;
  background: var(--paper); color: var(--ink);
  font-weight: 650; font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  border: 0; border-radius: 999px; padding: 0.95rem 1.6rem;
  /* <button> erbt die Schrift nicht: der einzige Absende-Knopf der Seite stand
     in Arial, waehrend jeder andere CTA Space Grotesk trug. Am 18.08. am
     gerenderten Knopf gemessen, nicht aus dem Stylesheet geschlossen. */
  font-family: inherit;
  text-decoration: none; cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease;
}
.cta:hover { background: var(--white); transform: translateY(-2px); }
.cta i { font-style: normal; }
.cta-solid { background: var(--accent); color: var(--ink); }
.cta-solid:hover { background: var(--accent-soft); }
.cta-note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--paper-dim); }
/* Der Reifegrad gehoert nach oben, nicht auf 75 % Seitentiefe. */
.hero-reife {
  margin: -1.1rem 0 1.5rem; font-size: 0.82rem; color: var(--paper-dim);
  border-left: 2px solid var(--ink-line); padding-left: 0.7rem;
}
.label-opt { text-transform: none; letter-spacing: 0; color: var(--paper-dim); }

/* Vergleich Handyfoto → Werbebild */
.compare {
  position: relative; border-radius: 10px; overflow: hidden;
  background: var(--ink-soft); isolation: isolate;
}
.compare img { width: 100%; }
/* Standard-Wipe: Das "Vorher" liegt oben und wird von rechts her weggeschnitten.
   Die Trennkante steht exakt bei --split — links davon immer das Handyfoto,
   rechts immer das Werbebild. Bei 0 % ist das Vorher vollstaendig weg, bei
   100 % deckt es alles. NICHT umdrehen: geprueft 16.08., die Richtung stimmt. */
.compare-before {
  position: absolute; inset: 0; height: 100%; object-fit: cover;
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
}
.compare-note {
  margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.5;
  color: var(--paper-dim);
}
.compare-spot {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--spot-x, 50%) 22%, rgba(255,255,255,0.20), rgba(255,255,255,0) 42%);
  opacity: 0;
}
/* Volle Breite, damit Griff und Trennkante deckungsgleich laufen — bei
   left/right: 6% wichen sie um bis zu 6 % voneinander ab. */
.compare-range {
  position: absolute; left: 0; right: 0; bottom: 1rem; width: 100%;
  padding: 0 13px; /* halbe Thumb-Breite, haelt den Griff im Bild */
  appearance: none; background: transparent; z-index: 3; cursor: ew-resize;
}
.compare-range::-webkit-slider-runnable-track { height: 3px; background: rgba(243,234,217,0.5); border-radius: 2px; }
.compare-range::-moz-range-track { height: 3px; background: rgba(243,234,217,0.5); border-radius: 2px; }
.compare-range::-webkit-slider-thumb {
  appearance: none; width: 26px; height: 26px; margin-top: -12px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
.compare-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink);
}
/* Traeger statt text-shadow: gemessen 1,12:1 auf der hellen Bildhaelfte —
   ausgerechnet die Zeile, die die Seite ehrlich macht, war die unlesbarste. */
.compare-labels {
  position: absolute; top: 0.8rem; left: 0.9rem; right: 0.9rem;
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.compare-labels span {
  color: var(--white);
  background: rgba(11, 11, 13, 0.78);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

.ai-badge {
  position: absolute; left: var(--edge); bottom: 1rem;
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-dim); border: 1px solid rgba(185,178,165,0.4);
  border-radius: 999px; padding: 0.3rem 0.8rem;
}

/* Zweispaltig: Bild und seine Erklaerzeile stapeln links, der Verkaufstext
   steht rechts daneben. Ohne die Zuweisung wandert die Zeile als drittes
   Grid-Item nach rechts oben und schiebt den Text unter das Bild. */
@media (min-width: 901px) {
  .compare { grid-column: 1; grid-row: 1; }
  .compare-note { grid-column: 1; grid-row: 2; }
  .hero-copy { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* Bild, dann Headline und CTA, erst danach die Erklaerzeile — sonst liest
     ein Handy-Nutzer die Fussnote vor dem Angebot. */
  .compare { order: -1; }
  .hero-copy { order: 0; }
  .compare-note { order: 1; margin-top: 1.4rem; }
  .ai-badge { position: static; display: inline-block; margin-top: 1.6rem; }
}

/* Randlos auf dem Handy: ein Bild in einer 350-px-Spalte mit Rand liest sich
   wie ein Absatz mit Farbe. Ohne Rand wird es zum Bild. */
@media (max-width: 780px) {
  /* Kopf ist jetzt immer sichtbar: das randlose Hero-Bild beginnt UNTER ihm. */
  .hero { padding-top: 2.9rem; }
  /* Negative Raender statt 100vw: 100vw ignoriert das Container-Padding und
     erzeugt dadurch waagerechten Ueberlauf. */
  .compare {
    margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge));
    border-radius: 0;
  }
  .work-grid, .katalog-bilder {
    margin-left: calc(-1 * var(--edge)); margin-right: calc(-1 * var(--edge));
    gap: 3px;
  }
  .work-grid img, .work-grid video,
  .katalog-bilder img, .katalog-bilder video { border-radius: 0; }
  .work-grid figcaption { padding: 0 var(--edge); }
  /* Spaltenaufteilung des Katalogs steht weiter unten beim Katalog selbst. */
}

/* Hero-Ignition (nur .cine, nie scroll-gekoppelt) */
@media (prefers-reduced-motion: no-preference) {
  /* Ignition: startet als volles Handyfoto, Licht wischt zum Werbebild */
  .cine .compare-before { animation: wipe-out 1100ms cubic-bezier(0.22, 0.9, 0.3, 1) 220ms forwards; }
  .cine .compare-spot { animation: spot-sweep 1300ms ease-out 120ms forwards; }
  @keyframes wipe-out {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 50% 0 0); }
  }
  @keyframes spot-sweep {
    0% { opacity: 0; }
    35% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ---------- S2 Formatband ---------- */

.band { padding: var(--pad) var(--edge); background: var(--ink-soft); text-align: center; }
.band-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 2rem; }
/* Auf dem Handy ist das Formatband nur die Vorrede zum Materialbeweis —
   es darf keine zwei Bildschirme kosten. */
@media (max-width: 780px) {
  .band { padding: 2.4rem var(--edge); }
  .band-title { font-size: 1.35rem; margin-bottom: 1.2rem; }
  .band-list { flex-wrap: nowrap; gap: 0.5rem; align-items: stretch; }
  .band-list li { max-width: none; flex: 1 1 0; gap: 0.35rem; }
  .band-list img { height: 100%; object-fit: cover; }
  .band-list span { font-size: 0.6rem; letter-spacing: 0.08em; }
  .band-note { margin-top: 1.2rem; font-size: 0.82rem; }
}
.band-list {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-end; gap: clamp(1rem, 3vw, 2.4rem);
}
.band-list li { display: grid; gap: 0.6rem; max-width: 240px; }
.band-list img { border-radius: 6px; }
.band-list span { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.band-note { margin-top: 2rem; color: var(--paper-dim); }

/* ---------- S3 Arbeitswand ---------- */

.work { padding: var(--pad) var(--edge); }
.work-grid {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(0.6rem, 1.5vw, 1rem);
}
.work-grid img, .work-grid video { width: 100%; border-radius: 8px; object-fit: cover; }
.work-film { grid-column: span 4; }
.work-motion { grid-column: span 2; }
.work-grid > img:nth-of-type(1) { grid-column: span 2; }
.work-grid > img:nth-of-type(2) { grid-column: span 2; }
.work-grid > img:nth-of-type(3) { grid-column: span 2; }
.work-grid figcaption {
  margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--paper-dim);
}
@media (max-width: 780px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .work-film, .work-motion, .work-grid > img { grid-column: span 2 !important; }
}

/* ---------- S3b Material-Katalog ---------- */

.katalog { padding: var(--pad) var(--edge); }
.katalog-liste { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(2.5rem, 6vh, 4rem); }
.katalog-welt { display: grid; gap: 1rem; }
.katalog-kopf { display: grid; gap: 0.35rem; }
.katalog-kopf h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700;
  color: var(--white); letter-spacing: -0.01em;
}
.katalog-schwer { font-size: 0.88rem; color: var(--paper-dim); }
/* Der Etikett-Nachweis ist der eigentliche Beweis — er steht wie ein Pruefprotokoll,
   nicht wie eine Bildunterschrift. */
.katalog-etikett {
  font-size: 0.76rem; letter-spacing: 0.04em; color: var(--accent-soft);
  border-left: 2px solid var(--accent); padding-left: 0.7rem; margin-top: 0.2rem;
}
.katalog-etikett span {
  display: inline-block; margin-right: 0.5rem;
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.68rem; color: var(--paper-dim);
}
.katalog-bilder {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.4vw, 0.9rem); align-items: start;
}
.katalog-bilder img, .katalog-bilder video {
  width: 100%; border-radius: 8px; background: var(--ink-soft);
}
.katalog-note {
  max-width: 46rem; margin: clamp(2rem, 5vh, 3rem) auto 0;
  text-align: center; font-size: 0.9rem; color: var(--paper-dim);
}
.katalog-note em { font-style: normal; color: var(--paper); }
@media (max-width: 780px) {
  .katalog-bilder { grid-template-columns: repeat(2, 1fr); }
  /* Leitmotiv oben ueber beide Spalten, darunter Beleg-Still und Film
     nebeneinander. Der Film darf NICHT ebenfalls ueber beide Spalten laufen —
     sonst bleibt neben dem zweiten Bild eine leere halbe Spalte stehen,
     ausgerechnet in der Sektion, die Praezision beweisen soll. */
  .katalog-bilder img:first-child { grid-column: 1 / -1; }
  .katalog-bilder video { grid-column: auto; }
}

/* ---------- S4 Geometrie-Beweis ---------- */

.proof { padding: var(--pad) var(--edge); background: var(--ink-soft); }
.proof-row { max-width: min(56rem, 100%); margin: 0 auto; border-radius: 10px; }
.proof-trio {
  max-width: 56rem; margin: clamp(1rem, 3vh, 2rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 2vw, 1.4rem);
}
.proof-trio img { border-radius: 8px; }

/* ---------- S5 Rechnung ---------- */

.math { padding: var(--pad) var(--edge); }
.math-grid {
  max-width: 62rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: 12px; overflow: hidden;
}
.math-col { background: var(--ink); padding: clamp(1.5rem, 4vw, 2.6rem); display: grid; gap: 0.8rem; align-content: start; }
.math-col-us { background: var(--ink-soft); }
.math-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-dim); }
.math-col-us .math-label { color: var(--accent-soft); }
.math-punch { font-family: var(--font-em); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--white); }
@media (max-width: 700px) { .math-grid { grid-template-columns: 1fr; } }

/* ---------- S6 Bühne + Formular ---------- */

.stage-section { padding: var(--pad) var(--edge); background: #08080b; }
.stage {
  position: relative; max-width: 46rem; margin: 0 auto;
  aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse 120% 90% at 50% 120%, #1b1b22 0%, #08080b 70%);
  display: grid; place-items: center;
}
.stage-light {
  position: absolute; inset: -20% -10% 0;
  background:
    conic-gradient(from 180deg at 32% -10%, rgba(255,246,230,0) 42%, rgba(255,246,230,0.16) 50%, rgba(255,246,230,0) 58%),
    conic-gradient(from 180deg at 68% -10%, rgba(255,246,230,0) 42%, rgba(255,246,230,0.12) 50%, rgba(255,246,230,0) 58%);
  opacity: 0;
  transition: opacity 900ms ease;
}
.stage.is-live .stage-light { opacity: 1; }
.stage-haze {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(226,101,63,0.10), transparent 70%),
    radial-gradient(ellipse 50% 35% at 72% 78%, rgba(243,234,217,0.07), transparent 70%);
  opacity: 0;
  transition: opacity 1200ms ease;
}
.stage.is-live .stage-haze { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stage.is-live .stage-haze { animation: haze-drift 14s ease-in-out infinite alternate; }
  @keyframes haze-drift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, -1%, 0); } }
}
.stage-floor {
  position: absolute; left: 8%; right: 8%; bottom: 12%; height: 34%;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(255,246,230,0.14), transparent 70%);
  filter: blur(6px);
  opacity: 0; transition: opacity 900ms ease 200ms;
}
.stage.is-live .stage-floor { opacity: 1; }
.stage-subject {
  position: relative; z-index: 2; max-height: 88%; width: auto;
  border-radius: 8px;
  /* Motiv kommt mit eigenem dunklem Studiogrund — weich in die Buehne blenden */
  -webkit-mask-image: radial-gradient(ellipse 78% 82% at 50% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 82% at 50% 46%, #000 55%, transparent 100%);
  transform: translateY(8px) scale(0.98); opacity: 0.9;
  transition: transform 800ms cubic-bezier(0.22,0.9,0.3,1), opacity 700ms ease;
}
.stage.is-live .stage-subject { transform: none; opacity: 1; }
.stage { cursor: pointer; }
.stage.is-drop { outline: 2px dashed rgba(226,101,63,0.7); outline-offset: -10px; }
.stage-hint {
  position: absolute; z-index: 3; bottom: 0.9rem; left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; color: var(--paper);
  background: rgba(8, 8, 11, 0.75); border-radius: 999px;
  padding: 0.42rem 0.9rem;
}
/* Auf Zeigergeraeten ist Ziehen moeglich, auf Touch nicht — Text folgt dem Geraet. */
@media (pointer: fine) {
  .stage-hint[data-stage-hint]::after { content: " oder Foto hierher ziehen"; }
}

.probe-form {
  max-width: 46rem; margin: clamp(1.6rem, 4vh, 2.6rem) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
/* P0-3 (Brand-Freeze-Fix 2026-08-21): Das ab Markup disabled Fieldset traegt
   Felder + Submit und uebernimmt das 3-Spalten-Raster des Formulars. UA-Reset
   inkl. min-inline-size (sonst min-content-Overflow auf schmalen Viewports). */
.probe-felder {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
  grid-column: 1 / -1; border: 0; margin: 0; padding: 0; min-inline-size: 0;
}
.probe-hinweis { display: none; grid-column: 1 / -1; font-size: 0.85rem; color: var(--paper-dim); }
/* Sichtbares Sperr-Signal NUR bei kaputtem JS (html.js gesetzt, Init kam nie an);
   bei deaktiviertem JS uebernimmt der <noscript>-Mailweg darunter. */
html.js .probe-felder:disabled .probe-hinweis { display: block; }
/* Release-Hygiene 2026-08-21: gesperrter Zustand ist auch VISUELL eindeutig —
   die Custom-Styles der Felder ueberdecken sonst das UA-Disabled-Grau. Gilt fuer
   No-JS UND kaputtes JS gleichermassen (reines Zustandsstyling, keine Logik). */
.probe-felder:disabled .field,
.probe-felder:disabled .field-file,
.probe-felder:disabled .cta { opacity: 0.45; filter: grayscale(0.6); }
.probe-felder:disabled .field input,
.probe-felder:disabled .field select,
.probe-felder:disabled .file-button,
.probe-felder:disabled .cta { cursor: not-allowed; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-dim); }
.field input, .field select {
  font: inherit; font-size: 0.95rem; color: var(--paper);
  background: var(--ink-soft); border: 1px solid var(--ink-line);
  border-radius: 8px; padding: 0.75rem 0.9rem;
}
.field select { appearance: none; cursor: pointer; }
/* Nativer Datei-Knopf zeigt auf deutschen Seiten "Choose File / No file chosen"
   — Text ist nicht setzbar, also eigenes Label als Knopf. Input bleibt
   fokussierbar, nur unsichtbar. */
.file-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.file-button {
  justify-self: start;
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--ink) !important;
  background: var(--paper); border-radius: 8px;
  padding: 0.7rem 1.1rem; cursor: pointer;
}
.file-button:hover { background: var(--white); }
.file-input:focus-visible + .file-button { outline: 2px solid var(--accent); outline-offset: 3px; }
.file-input[aria-invalid="true"] + .file-button { box-shadow: 0 0 0 2px var(--accent); }
.file-name { font-size: 0.78rem; color: var(--paper-dim); }
.field input[aria-invalid="true"] { border-color: var(--accent); }
.field-note { font-size: 0.72rem; color: var(--paper-dim); }
.probe-form .cta { grid-column: 1 / -1; justify-self: start; }
.form-note, .form-status { grid-column: 1 / -1; font-size: 0.85rem; color: var(--paper-dim); }
/* Nicht display:none — eine Live-Region, die beim Statuswechsel erst gerendert
   wird, sagen Screenreader unzuverlaessig an. */
.form-status:empty { visibility: hidden; min-height: 1lh; }
.form-status.is-error { color: var(--accent-soft); font-weight: 600; }
.form-privacy { font-size: 0.75rem; line-height: 1.55; }
@media (max-width: 780px) { .probe-form, .probe-felder { grid-template-columns: 1fr; } }

/* ---------- S7 Preise ---------- */

.pricing { padding: var(--pad) var(--edge); }
.table-wrap { max-width: var(--maxw); margin: 0 auto; overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.price-table th, .price-table td {
  text-align: left; padding: 1.1rem 1rem; border-bottom: 1px solid var(--ink-line); vertical-align: top;
}
.price-table thead th { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-dim); }
.price-table tbody th { font-weight: 650; color: var(--white); white-space: nowrap; }
.price-table td { color: var(--paper-dim); }
.price { color: var(--white) !important; font-weight: 650; white-space: nowrap; }
.price span { display: block; font-size: 0.78rem; font-weight: 500; color: var(--accent-soft); }
.row-main { background: var(--ink-soft); }
/* Unter 780px wird die Tabelle zu Karten: horizontal geschoben waere der Preis
   — das staerkste Vertrauenssignal der Seite — auf dem Handy unsichtbar.
   Steht bewusst NACH den Zellenregeln oben, sonst gewinnen deren Rahmen. */
@media (max-width: 780px) {
  .price-table { min-width: 0; }
  .price-table thead {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .price-table, .price-table tbody, .price-table tr,
  .price-table th, .price-table td { display: block; }
  .price-table tr {
    border: 1px solid var(--ink-line); border-radius: 10px;
    padding: 0.9rem 1.1rem; margin-bottom: 0.8rem;
  }
  .price-table th, .price-table td { border-bottom: 0; padding: 0; }
  .price-table tbody th { font-size: 1.05rem; margin-bottom: 0.4rem; white-space: normal; }
  .price-table td.price { font-size: 1.5rem; margin-top: 0.6rem; }
}

/* Der ehrliche Vergleich gegen fuenf Einzelsets — ohne ihn liest sich 5.900 €
   wie ein 38-%-Rabatt, tatsaechlich sind es 3,4 % je Bild. */
/* Die Preisangabenverordnung gilt nur gegenueber Verbrauchern — die Befreiung
   greift aber nur, wenn ein Verbraucher das auf den ersten Blick erkennt. */
.b2b-hinweis { font-size: 0.82rem; color: var(--paper-dim); margin-top: 0.8rem; }
.serie-note { max-width: var(--maxw); margin: 1.4rem auto 0; color: var(--paper-dim); font-size: 0.9rem; }
.price-terms { max-width: var(--maxw); margin: 1.4rem auto 0; color: var(--paper-dim); font-size: 0.9rem; }
/* Der Tag-1-Ausstieg ist die einzige echte Risikoumkehr einer Seite ohne
   Referenzen — er gehoert nicht ins Kleingedruckte. */
.price-exit {
  max-width: var(--maxw); margin: 1rem auto 0;
  border-left: 3px solid var(--accent);
  padding: 0.7rem 0 0.7rem 1rem;
  color: var(--paper);
}
.price-exit strong { color: var(--white); }
.excluded { max-width: var(--maxw); margin: 1.6rem auto 0; color: var(--paper-dim); font-size: 0.9rem; }
.excluded-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper); margin-bottom: 0.3rem; }
.first-client { max-width: var(--maxw); margin: 1.2rem auto 0; color: var(--paper-dim); font-size: 0.9rem; }

/* ---------- S8 Ablauf ---------- */

.flow { padding: var(--pad) var(--edge); background: var(--ink-soft); }
.flow-list { list-style: none; max-width: 52rem; margin: 0 auto; display: grid; gap: 1px; background: var(--ink-line); border: 1px solid var(--ink-line); border-radius: 12px; overflow: hidden; }
.flow-list li { background: var(--ink-soft); display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: 1.1rem clamp(1rem, 3vw, 1.8rem); }
.day { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-soft); }
.flow-list p { color: var(--paper-dim); }
.flow-list strong { color: var(--white); font-weight: 600; }
.flow-note { max-width: 52rem; margin: 1rem auto 0; font-size: 0.85rem; color: var(--paper-dim); }
@media (max-width: 620px) { .flow-list li { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ---------- S9 Grenzen + Ausschuss ---------- */

.limits { padding: var(--pad) var(--edge); }
.limits-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.limits h2, .reject-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1.2rem; }
.limit-list { list-style: none; display: grid; gap: 0.8rem; }
.limit-list li { color: var(--paper-dim); padding-left: 1.2rem; position: relative; }
.limit-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
/* Rahmung statt Selbstzweck: Der Ausschuss wird Kontrastmittel fuer die
   Auswahlquote, nicht ein Gestaendnis. */
.reject-quote { font-size: 0.9rem; color: var(--paper-dim); margin-bottom: 1.2rem; }
.reject-list { list-style: none; display: grid; gap: 1.2rem; }
.reject-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: start; }
/* Kein Filter auf dem eigenen Ehrlichkeitsbeweis: Verworfenes zeigt man
   unveraendert oder gar nicht. */
.reject-list img { border-radius: 6px; }
.reject-list p { font-size: 0.9rem; color: var(--paper-dim); }
.reject-note { margin-top: 1.2rem; font-family: var(--font-em); font-style: italic; font-size: 1.2rem; color: var(--white); }
@media (max-width: 860px) { .limits-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .reject-list li { display: block; }
  .reject-list img { width: 100%; height: auto; margin-bottom: 0.6rem; }
}

/* ---------- S10 Case ---------- */

.case { padding: var(--pad) var(--edge); background: var(--ink-soft); }
.case { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.case img { border-radius: 10px; }
.case h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1rem; }
.case p { color: var(--paper-dim); margin-bottom: 1rem; }
.text-link { font-weight: 600; color: var(--accent-soft); text-decoration-color: rgba(226,101,63,0.5); text-underline-offset: 4px; }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; } }

/* ---------- S11 Wer + FAQ ---------- */

.about { padding: var(--pad) var(--edge); }
.about-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); }
.about h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1rem; }
.about p { color: var(--paper-dim); margin-bottom: 0.8rem; }
.faq dt { font-weight: 650; color: var(--white); margin-top: 1.2rem; }
.faq dt:first-of-type { margin-top: 0; }
.faq dd { color: var(--paper-dim); margin-top: 0.35rem; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- S12 Abschluss + Footer ---------- */

.closing { padding: var(--pad) var(--edge); text-align: center; background: var(--ink-soft); }
.closing h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 1.6rem; }
footer { padding: 2.2rem var(--edge) 3.5rem; text-align: center; font-size: 0.82rem; color: var(--paper-dim); display: grid; gap: 0.4rem; }
footer a { color: var(--paper); }

/* ---------- Aufklapper ----------
   Absicherungstext bleibt vollstaendig im Dokument, redet aber erst auf
   Nachfrage. Das war der Kern des Problems: 1.400 Woerter Kleingedrucktes
   standen mitten im Verkaufsfluss. */

.klapp {
  max-width: var(--maxw); margin: 1rem auto 0;
  border-top: 1px solid var(--ink-line);
}
.klapp summary {
  cursor: pointer; list-style: none;
  padding: 0.9rem 0; font-size: 0.9rem; font-weight: 600; color: var(--paper);
  display: flex; align-items: center; gap: 0.6rem;
}
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary::before {
  content: "+"; flex: none;
  width: 1.15rem; height: 1.15rem; line-height: 1.05rem; text-align: center;
  border: 1px solid var(--ink-line); border-radius: 50%;
  font-weight: 400; color: var(--accent-soft);
}
.klapp[open] summary::before { content: "−"; }
.klapp summary:hover { color: var(--white); }
.klapp-inhalt { padding-bottom: 1.2rem; }
.klapp-inhalt > * + * { margin-top: 0.8rem; }
.klapp-inhalt p { font-size: 0.88rem; color: var(--paper-dim); }

.faq { max-width: var(--maxw); }
.faq .klapp { margin-top: 0; }
.faq .klapp:last-child { border-bottom: 1px solid var(--ink-line); }
.klapp-form { max-width: 46rem; }

.form-kurz { font-size: 0.8rem; }
.hero-reife { color: var(--paper-dim); }

/* ---------- Eigene Filmsteuerung statt nativer Bedienleiste ----------
   Erfuellt WCAG 2.2.2 (Bewegung anhaltbar), ohne eine graue Browser-Leiste
   ueber das Vorzeigematerial zu legen. */
.film-huelle { position: relative; }
.film-huelle video { cursor: pointer; }
.film-knopf {
  position: absolute; left: 0.7rem; bottom: 0.7rem; z-index: 3;
  width: 2.4rem; height: 2.4rem; padding: 0;
  display: grid; place-items: center;
  background: rgba(11,11,13,0.72); color: var(--paper);
  border: 1px solid rgba(243,234,217,0.28); border-radius: 50%;
  cursor: pointer; transition: background-color 160ms ease;
}
.film-knopf:hover { background: rgba(11,11,13,0.9); }
/* Dreieck = abspielen, Doppelbalken = anhalten, rein per CSS */
.film-knopf span {
  width: 0; height: 0;
  border-left: 0.62rem solid currentColor;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  margin-left: 0.16rem;
}
.film-huelle.is-playing .film-knopf span {
  width: 0.62rem; height: 0.72rem; margin-left: 0;
  border: 0; border-left: 0.2rem solid currentColor; border-right: 0.2rem solid currentColor;
  background: transparent;
}
.katalog .film-knopf { background: rgba(255,255,255,0.86); color: #101014; border-color: rgba(16,16,20,0.18); }
.katalog .film-knopf:hover { background: #fff; }

/* ---------- Mitlaufender Handlungsbalken (nur Handy) ----------
   Loest den Konflikt "Bilder frueh" gegen "Formular frueh": Das Formular ist
   ab dem ersten Wischer durchgehend einen Tipp entfernt, also muss es nicht
   weit oben in der Seite stehen. */
.tap-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; justify-content: space-between;
  gap: 0.8rem; padding: 0.7rem var(--edge) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(16,16,20,0.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--ink-line);
  transform: translateY(110%); transition: transform 240ms ease;
}
.tap-bar.is-on { transform: none; }
.tap-bar span { font-size: 0.78rem; color: var(--paper-dim); }
.tap-bar .cta { padding: 0.6rem 1.1rem; font-size: 0.85rem; }
@media (max-width: 780px) {
  .tap-bar { display: flex; }
  /* Ohne Ausgleich schneidet die feste Leiste den Seitenfuss ab — auf einer
     Seite, deren letzte Zeile die Rechtslinks sind. */
  body { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .tap-bar { transition: none; } }

/* ---------- Helle Inseln fuer die Arbeitsproben ----------
   Zwei Wechsel im dunklen Fluss, genau dort, wo Bildmaterial steht. Bilder auf
   hellem Grund bekommen eine Kante — auf Fast-Schwarz hatten sie keine. */
.work, .katalog {
  background: var(--paper);
  color: #23232a;
}
.work h2, .katalog h2, .katalog-kopf h3 { color: #101014; }
.work .section-head p, .katalog .section-head p,
.katalog-schwer, .katalog-note { color: #5a5750; }
.work figcaption { color: #6a665e; }
.katalog-etikett { color: #9a4a26; border-left-color: var(--accent); }
.katalog-etikett span { color: #6a665e; }
.katalog-note em { color: #101014; }
.work-grid img, .work-grid video,
.katalog-bilder img, .katalog-bilder video { background: #e6ddcc; }

/* ---------- Reduced Motion: Endzustand statt Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .compare-before { animation: none !important; }
  .stage-light, .stage-haze, .stage-floor, .stage-subject { transition: none !important; animation: none !important; }
  .mini-header { transition: none !important; }
}

/* ── Brand-Freeze 2026-08-20: Kürzung + sichtbare Bewegtbild-Kennzeichnung ── */
/* Endorsement: Wortmarke im Miniheader führt zurück zur Dachmarke. */
.mini-header .mark a { color: inherit; text-decoration: none; }
.mini-header .mark a:hover { color: var(--accent-soft); }

/* Katalog-Kürzung: eine Welt sichtbar, drei auf Abruf — Inhalte bleiben im DOM. */
.katalog-klapp { max-width: var(--maxw); margin: 0 auto; border-top: 1px solid rgba(16, 16, 20, 0.22); border-bottom: 1px solid rgba(16, 16, 20, 0.22); }
.katalog-klapp > summary { cursor: pointer; list-style: none; padding: 1rem 0; font-size: 0.95rem; font-weight: 600; color: #23232a; display: flex; align-items: center; gap: 0.6rem; }
.katalog-klapp > summary::-webkit-details-marker { display: none; }
.katalog-klapp > summary::before { content: "+"; flex: none; width: 1.15rem; height: 1.15rem; line-height: 1.05rem; text-align: center; border: 1px solid rgba(16, 16, 20, 0.32); border-radius: 50%; font-weight: 400; color: #9a4a26; }
.katalog-klapp[open] > summary::before { content: "−"; }
.katalog-klapp .katalog-innen { display: grid; gap: clamp(2.5rem, 6vh, 4rem); padding: 1.2rem 0 1.6rem; }

/* Sichtbare KI-Kennzeichnung am Bewegtbild (Art. 50 Abs. 4 KI-VO): das Label
   liegt am Motiv selbst und bleibt während der Wiedergabe stehen. */
.film-fig { position: relative; margin: 0; }
.film-fig video { width: 100%; height: auto; display: block; }
.film-tag { position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2; margin: 0; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); background: rgba(16, 16, 20, 0.74); padding: 0.35rem 0.5rem; border-radius: 3px; pointer-events: none; }
@media (max-width: 780px) {
  .katalog-bilder .film-fig { grid-column: auto; }
}