/* Startseite: Bruch (Hero), Theke (Wärmebrücke), Laufband, Fuß. Besitzer: Haupt-Session. */

/* ============ 1 · DER BRUCH ============ */
.bruch { height: 290svh; position: relative; padding: 0; }
.bruch-buehne {
  position: sticky; top: var(--kopf-h); height: calc(100svh - var(--kopf-h) - var(--hinweis-h, 0px)); overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: clamp(18px, 4svh, 48px) var(--rand) calc(18px + var(--sicher-unten));
  background:
    radial-gradient(60% 55% at 50% 58%, oklch(0.66 0.22 32 / .9), transparent 70%),
    radial-gradient(120% 90% at 50% 120%, oklch(0.42 0.17 26), transparent 60%),
    var(--rot);
  isolation: isolate;
}
.bruch-siegel {
  position: absolute; z-index: -1; width: min(120vw, 1100px); aspect-ratio: 1; left: 50%; top: 52%;
  background: url("../bilder/marke/siegel-weiss.svg") center / contain no-repeat;
  opacity: .07; transform: translate(-50%, -50%) rotate(var(--dreh, 0deg)); will-change: transform;
}
.bruch-zeile { color: oklch(0.97 0.03 30); margin: 0 0 clamp(8px, 2svh, 20px); text-align: center; justify-content: center; font-size: clamp(.78rem, 2.6vw, 1rem); flex-wrap: wrap; max-width: 100%; row-gap: 4px; }
.bruch-titel { position: absolute; z-index: 1; left: 0; right: 0; top: calc(clamp(18px, 4svh, 48px) + 1.6rem); bottom: calc(84px + var(--sicher-unten)); margin: 0; text-align: center;
  font-size: clamp(2.8rem, 13.2vw, 9.6rem); line-height: 1.02; color: var(--weiss); pointer-events: none; }
.bruch-a, .bruch-b { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; will-change: transform, opacity; }
.bruch-titel .oben, .bruch-titel .unten { display: block; white-space: nowrap; }
.bruch-titel .unten { position: relative; z-index: 3; }
.bruch-b { opacity: 0; }
.bruch-filet {
  position: absolute; z-index: 2; left: 50%; top: 49%; width: min(96vw, 1180px); aspect-ratio: 1280 / 612;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 40px oklch(0.25 0.12 27 / .45));
  will-change: transform;
}
.bruch-filet canvas, .bruch-filet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.bruch-filet canvas { opacity: 0; }
.bruch-filet.bereit canvas { opacity: 1; }
.bruch-filet.bereit img { opacity: 0; }
.bruch-kruemel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.bruch-aktionen { grid-row: 3; position: relative; z-index: 4; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bruch-scroll {
  position: absolute; right: calc(var(--rand) + var(--sicher-rechts)); bottom: calc(22px + var(--sicher-unten)); margin: 0;
  writing-mode: vertical-rl; font-family: var(--eng); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem;
  color: oklch(0.97 0.03 30 / .85); display: none; align-items: center; gap: 10px;
}
.bruch-scroll span { width: 2px; height: 46px; background: linear-gradient(currentColor 50%, transparent 0) 0 0 / 2px 12px; animation: rieseln 1.2s linear infinite; }
@keyframes rieseln { to { background-position: 0 12px; } }
@media (min-width: 900px) {
  .bruch-scroll { display: flex; }
  .bruch-filet { width: min(64vw, 980px, 118svh); top: 49%; }
}
@media (max-width: 899px) {
  .bruch { height: 250svh; }
  .bruch-filet { width: 122vw; top: 48%; }
  .bruch-aktionen { width: 100%; }
  .bruch-aktionen .knopf { flex: 1 1 0; min-width: 0; padding: 0 .6em; font-size: .98rem; white-space: nowrap; }
}
@media (max-height: 700px) and (max-width: 899px) {
  .bruch-titel { font-size: 11.5vw; }
  .bruch-filet { width: 104vw; }
}

/* ============ 8 · LAUFBAND ============ */
.qualitaet { padding: 0; overflow: hidden; border-block: 0; }
.laufband { overflow: hidden; padding: clamp(18px, 3vw, 30px) 0; }
.laufband-spur { display: flex; width: max-content; align-items: center; gap: clamp(18px, 3vw, 40px); animation: laufen 38s linear infinite; }
.laufband-spur span { font-family: var(--slab); text-transform: uppercase; font-size: clamp(1.8rem, 5vw, 3.6rem); line-height: 1.05; white-space: nowrap; }
.laufband-spur b { width: clamp(30px, 5vw, 54px); aspect-ratio: 1; background: url("../bilder/marke/siegel.svg") center / contain no-repeat; flex: none; }
@keyframes laufen { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }