/* ==========================================================================
   Gussasphalt-Szene (Vorschau, Varianten A–C, seit 11.10.2026)
   Soll „Tradition trifft Fortschritt“ auf der Startseite ersetzen.
   Mit 3D (<html class="teer-3d">): lange Scrollstrecke mit stehender Bühne. Auf die weiße
   Seite wird Gussasphalt gegossen und verstrichen, am Ende stehen die vier
   Leistungen auf der frischen Fläche (js/teer/).
   Ohne JS, auf dem Handy und bei reduzierter Bewegung: ruhiger Abschnitt mit
   dem Endbild (Leistungen auf dunkler Gussasphaltfläche).
   Eigene Variablennamen (--end, --box-*, --s0 …), damit nach der Übernahme
   nichts mit der übrigen Seite kollidiert.
   ========================================================================== */

.teer {
  --end: 1;
  position: relative;
  background: var(--color-hero-bg);
}

.teer__canvas,
.teer__steps,
.teer__labels,
.teer__infos {
  display: none;
}

/* ---------------------------------------------------------------- Ruhig -- */

/* Ohne 3D (Handy, reduzierte Bewegung, kein WebGL 2): ruhige Fläche mit
   genau demselben Gussasphalt wie Band 01–04 (seit 12.10.2026, vorher das
   Foto teer-szene-ende.jpg mit Abdunklung, das grauer und gröber wirkte):
   Grundton und Kachel aus js/asphalt.js (--asphalt-korn, 640 px, nie
   gestreckt). Statt der elementweiten Licht-Verläufe gleichmäßig die Tiefe
   vom unteren Bandrand (--asphalt-tiefe), sonst wäre der hohe Abschnitt
   oben heller als das Band direkt darüber (Messung 12.10.2026). */
.teer__stage {
  position: relative;
  padding: var(--section-pad-y) var(--container-pad);
  color: var(--color-on-dark);
  background-color: var(--asphalt-grund);
  background-image: linear-gradient(var(--asphalt-tiefe), var(--asphalt-tiefe)), var(--asphalt-korn, none);
  background-size: 100% 100%, 640px 640px;
  background-repeat: no-repeat, repeat;
}

.teer__end {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
  max-width: var(--container-max);
  margin-inline: auto;
}

.teer__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(20px, 3vw, 56px);
}

.teer__eyebrow {
  margin-bottom: 14px;
  color: var(--color-on-dark-soft);
}

.teer__title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: var(--ls-title);
  line-height: 1;
  font-size: clamp(2rem, 0.9rem + 3vw, 4.25rem);
  color: #fff;
}

.teer__aside {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.teer__lead {
  margin: 0;
  max-width: 36ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: rgba(244, 244, 244, 0.76);
}

.teer__all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.teer__all svg,
.teer__more svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.teer__all:hover svg,
.teer__all:focus-visible svg,
.teer__link:hover .teer__more svg,
.teer__link:focus-visible .teer__more svg {
  transform: translateX(4px);
}

.teer__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 36px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.teer__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid rgba(244, 244, 244, 0.24);
  color: inherit;
  text-decoration: none;
}

.teer__link::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.teer__link:hover::before,
.teer__link:focus-visible::before {
  width: 100%;
}

.teer__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.teer__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 244, 244, 0.6);
}

.teer__name {
  font-size: clamp(1.25rem, 0.9rem + 0.9vw, 1.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
}

.teer__text {
  font-size: clamp(0.9rem, 0.84rem + 0.18vw, 1rem);
  line-height: 1.55;
  color: rgba(244, 244, 244, 0.74);
}

.teer__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

@media (max-width: 1100px) {
  .teer__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(28px, 4vw, 44px);
  }
}

@media (max-width: 760px) {
  .teer__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .teer__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------ Bewegt ---- */

.teer-3d .teer {
  --end: 0;
  height: var(--teer-len, 520vh);
}

.teer-3d .teer .teer__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--color-hero-bg);
}

.teer-3d .teer .teer__canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Endbild: liegt auf der Fläche; das Skript misst deren unteren Rand (--box-b) */
.teer-3d .teer .teer__end {
  position: absolute;
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  top: calc(var(--nav-height) + clamp(18px, 5vh, 56px));
  bottom: calc(100% - var(--box-b, 85%) + clamp(28px, 6vh, 64px));
  margin: 0;
  max-width: none;
  justify-content: space-between;
  gap: clamp(20px, 3.4vh, 48px);
  pointer-events: none;
  z-index: 2;
}

.teer-3d .teer.is-end .teer__end {
  pointer-events: auto;
}

.teer-3d .teer .teer__head,
.teer-3d .teer .teer__item {
  opacity: var(--e);
  transform: translate3d(0, calc((1 - var(--e)) * 22px), 0);
}

.teer-3d .teer .teer__head {
  --e: clamp(0, calc(var(--end) * 2.2), 1);
}

.teer-3d .teer .teer__item {
  --e: clamp(0, calc(var(--end) * 2.2 - 0.4 - var(--i, 0) * 0.2), 1);
}

/* Schritte während der Szene (passen sich Weiß und Schwarz an) */
.teer-3d .teer .teer__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  left: var(--container-pad);
  bottom: clamp(28px, 6vh, 64px);
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  mix-blend-mode: difference;
  opacity: calc(1 - var(--end) * 4);
  pointer-events: none;
}

.teer__step {
  --on: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: calc(0.3 + var(--on) * 0.7);
}

.teer__step::before {
  content: '';
  width: calc(14px + var(--on) * 26px);
  height: 2px;
  background: currentColor;
}

/* Leistungen während der Szene (seit 12.10.2026): je Phase ein Block im
   freien Weiß neben dem Geschehen, ein- und ausgeblendet über --on (aus
   js/teer/szene.js). Nie zwei gleichzeitig; im Endbild weg. */
.teer-3d .teer .teer__infos {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: calc(1 - var(--end) * 4);
}

.teer__info {
  --on: 0;
  position: absolute;
  top: 50%;
  width: min(31rem, 36vw);
  color: var(--color-ink);
  opacity: var(--on);
  visibility: hidden;
  transform: translate3d(0, calc(-50% + (1 - var(--on)) * 14px), 0);
}

.teer-3d .teer .teer__info {
  visibility: visible;
}

.teer__info--rechts {
  right: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
}

.teer__info--links {
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
}

.teer__info--oben {
  top: 31%;
}

.teer__info--unten {
  top: auto;
  bottom: clamp(36px, 9vh, 96px);
  transform: translate3d(0, calc((1 - var(--on)) * 14px), 0);
}

.teer__info-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}

.teer__info-kicker::before {
  content: '';
  width: 28px;
  height: 2px;
  background: currentColor;
}

.teer__info-title {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 0.9rem + 2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.teer__info-text {
  margin: 0 0 18px;
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

.teer__info-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(1rem, 0.94rem + 0.2vw, 1.12rem);
  font-weight: 700;
  color: var(--color-ink);
}

.teer__info-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.teer__info-list li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 2px;
  transform: translateY(-4px);
  background: var(--color-accent);
}

@media (max-height: 780px) {
  .teer-3d .teer .teer__title {
    font-size: clamp(1.8rem, 0.6rem + 2.6vw, 3.2rem);
  }

  .teer-3d .teer .teer__text {
    font-size: 0.86rem;
    line-height: 1.45;
  }

  .teer-3d .teer .teer__lead {
    font-size: 0.98rem;
  }
}

/* ------------------------------------------- Beschriftungen (B und C) -- */
/* Weiß mit „Differenz“: auf dem Papier schwarz, auf dem Gussasphalt weiß */
.teer-3d .teer .teer__labels {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
  mix-blend-mode: difference;
  opacity: var(--lab, 1);
  pointer-events: none;
}

.teer__label {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-size: clamp(0.72rem, 0.6rem + 0.3vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  will-change: transform;
}

/* ------------------------------------- Variante B: Bahnen als Zeilen -- */
.teer-3d .teer--b .teer__end,
.teer-3d .teer--c .teer__end {
  inset: 0;
  display: block;
}

.teer-3d .teer--b .teer__head {
  position: absolute;
  left: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  width: calc(var(--fl, 30%) - max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad))) - clamp(24px, 3vw, 56px));
  top: var(--ft, 20%);
  height: var(--fh, 70%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3vh, 32px);
  container-type: inline-size;
}

.teer-3d .teer--b .teer__title,
.teer-3d .teer--c .teer__title {
  color: var(--color-ink);
}

.teer-3d .teer--b .teer__title {
  font-size: clamp(1.7rem, 11cqw, 3.8rem);
}

.teer-3d .teer--b .teer__eyebrow,
.teer-3d .teer--c .teer__eyebrow,
.teer-3d .teer--b .teer__lead,
.teer-3d .teer--c .teer__lead {
  color: var(--color-ink-soft);
}

.teer-3d .teer--b .teer__all,
.teer-3d .teer--c .teer__all {
  color: var(--color-ink);
}

.teer-3d .teer--b .teer__list,
.teer-3d .teer--c .teer__list {
  display: block;
}

.teer-3d .teer--b .teer__item {
  position: absolute;
  left: var(--fl, 35%);
  width: calc(var(--fr, 95%) - var(--fl, 35%));
  height: var(--rh, 15%);
}

.teer-3d .teer--b .teer__item:nth-child(1) { top: var(--r0t, 20%); }
.teer-3d .teer--b .teer__item:nth-child(2) { top: var(--r1t, 37%); }
.teer-3d .teer--b .teer__item:nth-child(3) { top: var(--r2t, 54%); }
.teer-3d .teer--b .teer__item:nth-child(4) { top: var(--r3t, 71%); }

.teer-3d .teer--b .teer__link {
  display: grid;
  grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.5fr) auto;
  grid-template-areas: 'kicker text more' 'name text more';
  align-content: center;
  column-gap: clamp(18px, 2.4vw, 44px);
  row-gap: 6px;
  height: 100%;
  padding: 0 clamp(18px, 2.4vw, 44px);
  border-top: 0;
}

.teer-3d .teer--b .teer__link::before {
  left: 0;
  top: 50%;
  width: 3px;
  height: 26px;
  transform: translateY(-50%);
  transition: height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.teer-3d .teer--b .teer__link:hover::before,
.teer-3d .teer--b .teer__link:focus-visible::before {
  width: 3px;
  height: 64%;
}

.teer-3d .teer--b .teer__kicker { grid-area: kicker; align-self: end; }
.teer-3d .teer--b .teer__name { grid-area: name; align-self: start; }
.teer-3d .teer--b .teer__text { grid-area: text; align-self: center; }
.teer-3d .teer--b .teer__more { grid-area: more; align-self: center; margin: 0; padding: 0; font-size: 0; }
.teer-3d .teer--b .teer__more svg { width: 22px; height: 22px; }

/* In B und C erscheint nur der Inhalt; die Zeilen selbst bleiben stehen */
.teer-3d .teer--b .teer__item,
.teer-3d .teer--c .teer__item {
  opacity: 1;
  transform: none;
}

.teer-3d .teer--b .teer__link > *,
.teer-3d .teer--c .teer__link > * {
  opacity: var(--e);
  transform: translate3d(0, calc((1 - var(--e)) * 14px), 0);
}

.teer-3d .teer--b .teer__link,
.teer-3d .teer--c .teer__link {
  --e: clamp(0, calc(var(--end) * 2.2 - 0.3 - var(--i, 0) * 0.2), 1);
}

.teer-3d .teer--b .teer__link::before,
.teer-3d .teer--c .teer__link::before {
  opacity: var(--e);
}

/* ------------------------------------ Variante C: vier Felder (2 × 2) -- */
.teer-3d .teer--c .teer__head {
  position: absolute;
  left: var(--fl, 15%);
  width: var(--fw, 70%);
  top: calc(var(--nav-height) + clamp(10px, 2.5vh, 28px));
  height: calc(var(--ft, 25%) - var(--nav-height) - clamp(10px, 2.5vh, 28px) - clamp(26px, 4.5vh, 52px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 56px);
}

.teer-3d .teer--c .teer__title {
  font-size: clamp(1.5rem, 0.6rem + 2.1vw, 3rem);
}

.teer-3d .teer--c .teer__title br {
  display: none;
}

.teer-3d .teer--c .teer__eyebrow {
  margin-bottom: 8px;
}

.teer-3d .teer--c .teer__aside {
  justify-items: end;
  text-align: right;
}

.teer-3d .teer--c .teer__lead {
  max-width: 30ch;
  font-size: clamp(0.92rem, 0.8rem + 0.3vw, 1.08rem);
}

.teer-3d .teer--c .teer__item {
  position: absolute;
  width: var(--qw, 35%);
  height: var(--qh, 30%);
}

.teer-3d .teer--c .teer__item:nth-child(1) { left: var(--q0l); top: var(--q0t); }
.teer-3d .teer--c .teer__item:nth-child(2) { left: var(--q1l); top: var(--q1t); }
.teer-3d .teer--c .teer__item:nth-child(3) { left: var(--q2l); top: var(--q2t); }
.teer-3d .teer--c .teer__item:nth-child(4) { left: var(--q3l); top: var(--q3t); }

.teer-3d .teer--c .teer__link {
  justify-content: center;
  height: 100%;
  padding: clamp(16px, 3vh, 36px) clamp(20px, 3vw, 52px);
  border-top: 0;
}

.teer-3d .teer--c .teer__link::before {
  left: clamp(20px, 3vw, 52px);
  top: auto;
  bottom: clamp(16px, 3vh, 36px);
}

.teer-3d .teer--c .teer__text {
  max-width: 40ch;
}

.teer-3d .teer--c .teer__more {
  margin-top: 4px;
}

/* Folgeabschnitt „Ihr nächster Schritt“: Beide Flächen sind weiß, die
   Trennlinie oben (styles.css) wirkte hier wie ein Strich mitten im Weiß
   (Domenic, 11.10.2026). Nur direkt nach der Szene ohne Linie. */
.teer + .next-step {
  border-top: 0;
}

/* ------------------------------------------------- Scroll-Hinweis ---- */
/* „Jetzt scrollen“ mit Pfeil (seit 12.10.2026). Nur mit 3D (ohne 3D gibt es
   nichts zu starten). Ausgangslage: Unterkante am unteren Rand der Bühne,
   waagerecht mittig. Bei --hint 0 steht die Einheit groß mittig unter dem
   Eimer: js/teer/szene.js setzt --hint-dx/--hint-dy (Punkt unter dem Eimer
   relativ zur Bühnenmitte bzw. Unterkante), translate schiebt die Oberkante
   dorthin. Bei --hint 1 steht sie unten mittig, auf 40 % verkleinert
   (Ursprung unten Mitte). --hint folgt dem Fortschritt der Szene, nicht dem
   allgemeinen Scrollen; rückwärts genauso. Weiß mit „difference“: dunkel
   auf Weiß, hell auf Asphalt. Nur Transform und Opacity. */
.teer__hint {
  display: none;
}

.teer-3d .teer .teer__hint {
  --h: var(--hint, 0);
  --hint-abstand: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  position: absolute;
  left: 50%;
  bottom: var(--hint-abstand);
  z-index: 3;
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  transform-origin: 50% 100%;
  transform:
    translate3d(
      calc(-50% + (1 - var(--h)) * var(--hint-dx, 0px)),
      calc((1 - var(--h)) * (var(--hint-dy, -50vh) + var(--hint-abstand) + 100%)),
      0)
    scale(calc(1 - var(--h) * 0.6));
  opacity: calc(1 - var(--hint-aus, 0));
  will-change: transform;
}

.teer__hint-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 1.1rem + 1.9vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.teer__hint-pfeil {
  display: block;
  width: clamp(22px, 1.4vw + 8px, 32px);
  height: auto;
}

/* Pfeil sinkt ruhig ein Stück und kommt zurück (kein Hüpfen, kein Blinken) */
@media (prefers-reduced-motion: no-preference) {
  .teer-3d .teer .teer__hint-pfeil {
    animation: teer-hint-pfeil 2.8s ease-in-out infinite;
  }
}

@keyframes teer-hint-pfeil {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, 7px, 0); }
}