/* cb03 · Urteil — je Urteil eine Vollbild-Bühne: Etikett, Fritte mit Spruch, Regel, Screenshot */
.ff-urteil__vorspann {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.1;
  margin-bottom: var(--space-6);
}
.ff-urteil__titel {
  font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.3rem);
  line-height: 1;
  margin-bottom: var(--space-7);
}
.ff-urteil__etikett {
  white-space: normal;
  text-wrap: balance;
  max-width: 100%;
  padding: .26em .62em .4em;
  border-width: 7px;
  border-radius: var(--radius-l);
}
.ff-urteil__etikett.ff-etikett--auf-keinen-fall { border-width: 0; padding: .4em .9em .52em; }
.ff-urteil__etikett.ff-etikett--wer-bitte { outline-offset: -12px; }
.ff-urteil__blase {
  --tilt: -2deg;
  max-width: 24ch;
  padding: var(--space-5) var(--space-6);
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem);
  line-height: 1.25;
  rotate: var(--tilt);
}
.ff-urteil__regel {
  margin-top: var(--space-6);
  max-width: 40ch;
  padding-left: var(--space-5);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .ff-urteil__titel { margin-bottom: var(--space-6); }
  .ff-urteil__blase { padding: var(--space-4) var(--space-5); }
  .ff-urteil__regel { padding-left: var(--space-2); font-size: 1rem; }
}

/* ---------- Strecke: die fünf Urteile als Tafeln von genau einer Bildschirmhöhe ----------
   Grundzustand (ohne JS, reduzierte Bewegung, zu niedrig, fehlende Technik): Tafeln untereinander.
   Mit [data-ff-quer]: Bühne bleibt stehen, das Band fährt waagrecht, Fortschritt aus der Scrollposition.
   Höhen: Tafel-Layout und Fahrweg in svh (steht still), Bühne in lvh; der Streifen dazwischen zeigt mehr iPhone. */
.ff-strecke {
  --strecke-fuge: calc(var(--stanz-h) + var(--stanz-kante));
  position: relative;
  z-index: 0;
}
/* waagrecht schneidet die Bühne selbst (clip, kein Scrollcontainer), nie ein Vorfahr: sonst bricht sticky */
.ff-strecke__buehne {
  overflow-x: clip;
}

.ff-strecke__panel {
  --buehne-phone-h: min(calc(var(--strecke-h) * 1.08), 1040px);
  height: var(--strecke-h);
  min-height: 0;
  padding-block: var(--strecke-pad) 0;
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  /* das iPhone läuft unten aus der Tafel: unten hart schneiden, oben, links und rechts bleibt Luft für Stanzkante und Fuge */
  clip-path: inset(calc(var(--stanz-h) * -3) calc(var(--strecke-fuge) * -1) 0 calc(var(--stanz-h) * -3));
}
/* Layout immer auf den kleinen Viewport: Tafelhöhe minus Kopfabstand */
.ff-strecke__panel .ff-buehne__grid {
  height: calc(var(--strecke-h) - var(--strecke-pad));
  align-items: start;
}
.ff-strecke__panel .ff-buehne__text {
  align-self: center;
  padding-bottom: var(--strecke-pad);
}
.ff-strecke__panel .ff-buehne__fritte {
  top: calc(var(--strecke-h) * .38);
  bottom: auto;
}

/* Fortschritt: eine kleine Pommes-Schale, die sich Tafel für Tafel füllt.
   Sitzt am unteren Rand des kleinen Viewports, damit die Safari-Leiste sie nie verdeckt. */
.ff-strecke__fortschritt {
  display: none;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(var(--strecke-h) - var(--space-6));
  align-items: flex-end;
  gap: 10px;
  padding: 12px 18px 12px;
  background: var(--surface-sticker);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sticker);
  transform: translate(-50%, -100%) rotate(-2deg);
  pointer-events: none;
}
.ff-strecke__pommes {
  --i: 0;
  position: relative;
  overflow: hidden;
  width: 12px;
  height: 34px;
  border: 2.5px solid var(--ff-pflaume);
  border-radius: 4px;
  background: var(--surface-sticker);
  transition: scale var(--dauer-kurz) var(--ease-pop), rotate var(--dauer-kurz) var(--ease-pop);
}
.ff-strecke__pommes:nth-child(2) { --i: 1; }
.ff-strecke__pommes:nth-child(3) { --i: 2; }
.ff-strecke__pommes:nth-child(4) { --i: 3; }
.ff-strecke__pommes:nth-child(5) { --i: 4; }
.ff-strecke__pommes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ff-gold) 68%, var(--ff-gold-schatten) 68%);
  box-shadow: inset 0 4px 0 var(--ff-kruste);
  transform-origin: 50% 100%;
  transform: scaleY(clamp(0, calc(var(--ff-strecke-x, 0) + 1 - var(--i)), 1));
}
.ff-strecke__pommes[data-ff-aktiv] {
  scale: 1.22;
  rotate: -8deg;
}

/* ---------- waagrechter Modus ---------- */
.ff-strecke[data-ff-quer] {
  /* Bühne (lvh) plus vier Tafelhöhen (svh) Fahrweg: der Fahrweg bleibt konstant, auch wenn die Leiste wechselt */
  height: calc(var(--strecke-buehne-h) + var(--strecke-h) * 4);
}
.ff-strecke[data-ff-quer] .ff-strecke__buehne {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: var(--strecke-buehne-h);
}
.ff-strecke[data-ff-quer] .ff-strecke__band {
  display: flex;
  gap: var(--strecke-fuge);
  height: 100%;
  /* je Tafel eine Breite plus Fuge: in Ruhe liegt der Stanzrand der nächsten Tafel knapp außerhalb.
     transform statt translate: läuft auch in Browsern ohne die Einzeleigenschaft */
  transform: translate3d(calc(var(--ff-strecke-x, 0) * (-100% - var(--strecke-fuge))), 0, 0);
}
/* eigene Ebene nur, solange die Strecke in der Nähe ist */
.ff-strecke[data-ff-quer][data-ff-nah] .ff-strecke__band { will-change: transform; }
.ff-strecke[data-ff-quer] .ff-strecke__panel {
  flex: 0 0 100%;
  height: 100%;
}
/* die Fläche läuft unter der Fuge weiter, darauf stanzt die nächste Tafel ihren Rand */
.ff-strecke[data-ff-quer] .ff-strecke__panel::after { right: calc(var(--strecke-fuge) * -1); }
/* ab der zweiten Tafel sitzt der Stanzrand links statt oben */
.ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::before,
.ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::after {
  inset: 0 calc(var(--strecke-fuge) * -1) 0 calc(var(--stanz-h) * -1);
  -webkit-mask: var(--stanz-maske-links);
  mask: var(--stanz-maske-links);
}
.ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::before {
  translate: none;
  transform: translate3d(calc(var(--stanz-kante) * -1), 0, 0);
}
.ff-strecke[data-ff-quer] .ff-strecke__fortschritt { display: flex; }

/* Inhalt passt nicht in eine Tafel (Zoom, große Schrift): untereinander und so hoch wie nötig */
.ff-strecke[data-ff-eng] .ff-strecke__panel {
  height: auto;
  min-height: var(--strecke-h);
  clip-path: none;
}
.ff-strecke[data-ff-eng] .ff-strecke__panel .ff-buehne__grid { height: auto; }

@media (max-width: 900px) {
  .ff-strecke__panel {
    --buehne-phone-h: min(calc(var(--strecke-h) * .8), 620px);
  }
  .ff-strecke__panel .ff-buehne__grid,
  .ff-strecke__panel.ff-buehne--mockup-links .ff-buehne__grid {
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--space-7);
  }
  .ff-strecke__panel .ff-buehne__text {
    align-self: start;
    padding-bottom: 0;
  }
  /* Figur kleiner an der linken Rahmenkante, unter der App-Kopfzeile; mit Stickerrand mindestens 16 px zum Rand */
  .ff-strecke__panel { --buehne-fritte: 88px; }
  .ff-strecke__panel .ff-buehne__fritte { top: 108px; left: -10px; }
  .ff-strecke__panel .ff-urteil__vorspann { margin-bottom: var(--space-4); }
  .ff-strecke__panel .ff-urteil__titel { margin-bottom: var(--space-5); }
  .ff-strecke__panel .ff-urteil__regel { margin-top: var(--space-4); }
  .ff-strecke__fortschritt {
    top: calc(var(--strecke-h) - var(--space-5));
    gap: 8px;
    padding: 10px 14px;
  }
  .ff-strecke__pommes { width: 10px; height: 28px; }
}

/* Druck: Tafeln untereinander, nichts klebt, nichts fährt */
@media print {
  .ff-strecke[data-ff-quer] { height: auto; }
  .ff-strecke[data-ff-quer] .ff-strecke__buehne { position: static; height: auto; }
  .ff-strecke[data-ff-quer] .ff-strecke__band { display: block; height: auto; transform: none; will-change: auto; }
  .ff-strecke[data-ff-quer] .ff-strecke__panel { height: var(--strecke-h); }
  .ff-strecke[data-ff-quer] .ff-strecke__panel::after { right: 0; }
  .ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::before,
  .ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::after {
    inset: calc(var(--stanz-h) * -1) 0 0;
    -webkit-mask: var(--stanz-maske);
    mask: var(--stanz-maske);
  }
  .ff-strecke[data-ff-quer] .ff-strecke__panel + .ff-strecke__panel::before {
    transform: translate3d(0, calc(var(--stanz-kante) * -1), 0);
  }
  .ff-strecke__panel { break-inside: avoid; }
  .ff-strecke__fortschritt,
  .ff-strecke[data-ff-quer] .ff-strecke__fortschritt { display: none; }
}