/* ============================================================
   Polier.Behr — Scroll-Demo „Aufbereitung im Scrollen"
   Farben und Schriften aus brand/BRAND.md des Projekts.
   ============================================================ */

@font-face { font-family:'Enfonix';  src:url('fonts/enfonix-latin.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Oxanium';  src:url('fonts/oxanium-v21-latin_latin-ext-600.woff2') format('woff2');
             font-weight:600; font-display:swap; }
@font-face { font-family:'Oxanium';  src:url('fonts/oxanium-v21-latin_latin-ext-700.woff2') format('woff2');
             font-weight:700; font-display:swap; }
@font-face { font-family:'Basic';    src:url('fonts/basic-v18-latin_latin-ext-regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }
@font-face { font-family:'Yellowtail';src:url('fonts/yellowtail-v25-latin_latin-ext-regular.woff2') format('woff2');
             font-weight:400; font-display:swap; }

:root {
  --ink:        #06080B;
  --carbon:     #0B0D0A;
  --olive-deep: #0E110C;
  --olive-pale: #9AA673;
  --gold-deep:  #79542F;
  --gold:       #CFA749;
  --gold-bright:#EDD98A;
  --line-gold:  rgba(207, 167, 73, 0.22);
  --paper:      #F4F3EC;
  --paper-dim:  #C2C4B8;
  --paper-faint:#8F927F;

  --font-display:'Enfonix','Oxanium','Arial Narrow',sans-serif;
  --font-ui:     'Oxanium','Arial Narrow',sans-serif;
  --font-body:   'Basic','Helvetica Neue',Arial,sans-serif;
  --font-script: 'Yellowtail',cursive;

  --wrap: 1280px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ease-pounce: cubic-bezier(0.16, 0.85, 0.2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0 0 0.6em;
  /* Enfonix baut breit: Ueberschriften muessen umbrechen duerfen */
  overflow-wrap: anywhere;
  hyphens: auto;
  hyphenate-limit-chars: 14 5 5;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.glow {
  color: var(--gold);
  text-shadow: 0 0 18px rgba(207,167,73,0.42), 0 0 46px rgba(207,167,73,0.16);
}

/* ---------- Einstieg ---------- */
.einstieg {
  min-height: 100vh;
  min-height: 100svh;          /* niemals dvh: die Adressleiste skaliert sonst mit */
  display: grid; align-content: center;
  padding-block: 6rem 4rem;
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 10%, rgba(207,167,73,0.07) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--olive-deep) 100%);
}
.kicker {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  color: var(--gold);
  margin-bottom: 0.4rem;
}
.einstieg h1 { font-size: clamp(2.1rem, 6.4vw, 4.4rem); }
.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--paper-dim);
  max-width: 54ch;
}
.hinweis {
  margin-top: 3.2rem;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper-faint);
  display: flex; align-items: center; gap: 0.8rem;
  transition: opacity 500ms ease;
}
.hinweis::before {
  content: ''; width: 46px; height: 1px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
}
.hinweis.is-weg { opacity: 0; }

/* ---------- Die Buehne ---------- */
.buehne { position: relative; height: 560vh; background: var(--ink); }
.kleber {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
  contain: paint;
}

.rahmen {
  position: absolute; inset: 0;
  background: var(--ink);
}
.rahmen .poster,
.rahmen .clip {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
}
.rahmen .clip { opacity: 0; }
.rahmen .clip.is-an { opacity: 1; }
/* Das Standbild bleibt liegen, bis der erste Clip wirklich ein Bild zeigt */
.rahmen.hat-bild .poster { opacity: 0; transition: opacity 240ms ease; }

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 50%, transparent 38%, rgba(4,6,3,0.72) 100%),
    linear-gradient(180deg, rgba(4,6,3,0.5) 0%, transparent 22%, transparent 70%, rgba(4,6,3,0.72) 100%);
}

/* Fortschritt als feine Kratzspur am unteren Rand */
.spur {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(207,167,73,0.12);
  z-index: 4;
}
.spur span {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
}

/* ---------- Punkte links und rechts ---------- */
.punkte { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.punkt {
  position: absolute;
  top: 50%;
  /* Gemessen: „Keramikversiegelung" braucht bei 27px Enfonix 454px.
     Box und Schriftgrad sind darauf ausgelegt, damit nie mitten im
     Wort gebrochen wird. */
  width: min(30rem, 34vw);
  padding: 1.6rem 1.7rem;
  background: rgba(8, 11, 7, 0.82);
  border: 1px solid var(--line-gold);
  border-radius: 14px;
  opacity: 0;
  transition: opacity 420ms ease, transform 620ms var(--ease-pounce);
}
.punkt.links  { left:  var(--gutter); transform: translate(-28px, -50%); }
.punkt.rechts { right: var(--gutter); transform: translate( 28px, -50%); }
.punkt.links.is-da, .punkt.rechts.is-da { opacity: 1; transform: translate(0, -50%); }

.punkt .nr {
  display: block;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.punkt h2 {
  font-size: clamp(1.05rem, 1.5vw, 1.38rem);
  margin-bottom: 0.45rem;
  /* Diese Titel passen in die Box - sie duerfen nicht „irgendwo" brechen */
  overflow-wrap: normal;
  hyphenate-limit-chars: 12 4 4;
}
.punkt p {
  font-size: 0.93rem; line-height: 1.55;
  color: var(--paper-dim);
  margin: 0;
}
/* Goldkante links als Akzent, wie die Hinweisbox der Hauptseite */
.punkt::before {
  content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
}
.punkt.rechts::before { left: auto; right: 0; }

/* ---------- Abbinder ---------- */
.abbinder {
  min-height: 86vh; min-height: 86svh;
  display: grid; align-content: center;
  padding-block: 7rem 5rem;
  background: linear-gradient(180deg, var(--olive-deep) 0%, var(--ink) 70%);
}
.script {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.abbinder h2 { font-size: clamp(1.8rem, 5vw, 3.4rem); }
.fuss {
  margin-top: 3rem;
  font-family: var(--font-ui); font-weight: 600;
  font-size: 0.85rem; letter-spacing: 0.08em;
  color: var(--paper-faint);
}
.fuss small { font-weight: 400; letter-spacing: 0.02em; font-size: 0.78rem; }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  .buehne { height: 480vh; }

  /* Hochkant wuerde ein 16:9-Clip auf Vollbild so stark beschnitten,
     dass vom Auto nur Scheibe und Rad bleiben. Deshalb mobil ein Band:
     3:2 statt Vollformat laesst den ganzen Wagen stehen. */
  .rahmen {
    inset: auto 0 auto 0;
    top: 46%;
    transform: translateY(-50%);
    height: auto;
    aspect-ratio: 3 / 2;
    border-block: 1px solid var(--line-gold);
  }
  .vignette {
    background:
      radial-gradient(130% 110% at 50% 50%, transparent 46%, rgba(4,6,3,0.6) 100%);
  }

  .punkt {
    width: calc(100% - var(--gutter) * 2);
    left: var(--gutter); right: var(--gutter);
    top: auto; bottom: 6vh;
    padding: 1.2rem 1.3rem;
  }
  .punkt.links, .punkt.rechts { transform: translateY(22px); }
  .punkt.links.is-da, .punkt.rechts.is-da { transform: translateY(0); }
  .punkt.rechts::before { left: 0; right: auto; }
  .punkt p { font-size: 0.88rem; }
  .rahmen .poster, .rahmen .clip { object-position: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .punkt { transition: opacity 200ms ease; }
  .punkt.links, .punkt.rechts { transform: translate(0, -50%); }
  @media (max-width: 860px) { .punkt.links, .punkt.rechts { transform: none; } }
}