/* Dauer: ein Schneidermaßband mit Tagen statt Zentimetern. Rechts
   liegt der Rest noch aufgerollt, links die Metallkappe. Beim ersten
   Sichtbarwerden rollt es sich von rechts nach links aus, dann stecken
   die Nadeln nacheinander — Glasköpfe in Garn-Gold und Perlmutt. */
.massband {
  --links: 4%;   /* Tag 0 */
  --rechts: 92%; /* Tag 11 */
  position: relative;
  margin-top: var(--raum-4);
  padding-top: 214px;
}

.massband__band {
  position: relative;
  height: 72px;
  border-radius: 4px;
  background-color: #f2e6c6;
  /* Feinstriche jeden ¼ Tag, Hauptstrich jeden Tag — als Verlauf über
     11 Tage Breite: 1 Tag = (rechts - links) / 11 */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc((88% / 11) / 4 - 1px),
      rgba(43, 29, 21, 0.55) calc((88% / 11) / 4 - 1px),
      rgba(43, 29, 21, 0.55) calc((88% / 11) / 4),
      transparent calc((88% / 11) / 4)
    );
  background-size: calc(88% / 11) 14px;
  background-position: var(--links) 0;
  background-repeat: repeat-x;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.5) inset, 0 -1px 0 rgba(43, 29, 21, 0.18) inset,
    0 18px 30px -14px rgba(0, 0, 0, 0.6);
  clip-path: inset(0 0 0 0);
}
/* Hauptstriche: ein Strich pro Tag, höher */
.massband__band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(43, 29, 21, 0.85) 0 1.5px, transparent 1.5px calc(88% / 11));
  background-position: var(--links) 0;
  background-size: 100% 24px;
  background-repeat: no-repeat;
}

/* Metallkappe am freien Ende (links) */
.massband__kappe {
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  width: 14px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #6c737d, #d9dee5 45%, #8f959c);
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.35);
}
/* Die Rolle rechts: der Rest des Bandes, noch aufgewickelt */
.massband__rolle {
  position: absolute;
  right: -10px;
  top: -12px;
  bottom: -12px;
  width: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #7a5a2c 0 5px, #f2e6c6 6px 9px, #e6d7b0 10px 13px, #f2e6c6 14px 17px, #dccb9f 18px 21px, #f2e6c6 22px 100%);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(43, 29, 21, 0.25);
}

.massband__zahl {
  position: absolute;
  bottom: 8px;
  left: calc(var(--links) + (88% / 11) * var(--tag));
  transform: translateX(-50%);
  font-family: var(--schrift-sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--tinte);
  letter-spacing: 0.02em;
}
.massband__einheit {
  position: absolute;
  right: 44px;
  bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinte-leise);
}

/* ---- Eingang: ausrollen von rechts, dann Nadeln stecken ---- */
/* Ruhe VOR dem Eingang (eingang.js setzt „wartet"): Band noch in der
   Rolle, Nadeln noch in der Hand — sonst stünde alles fertig da und
   spränge beim Startschuss zurück. Beobachtet wird das Band selbst,
   damit es erst rollt, wenn es wirklich im Bild ist. */
/* visibility statt clip-path: einen weggeclippten Zielkörper sieht der
   IntersectionObserver nie (Schnittfläche null) — unsichtbar aber schon */
.massband.wartet .massband__band { visibility: hidden; }
.massband.wartet .nadel-marke { opacity: 0; }
.massband.ist-da .massband__band {
  animation: band-rollt 2s cubic-bezier(0.25, 0.6, 0.2, 1) both;
}
@keyframes band-rollt {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Die Nadeln mit ihren Zetteln */
.massband__nadeln {
  position: absolute;
  inset: 0 0 72px 0;
}
.nadel-marke {
  position: absolute;
  bottom: 0;
  left: calc(var(--links) + (88% / 11) * var(--tag));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
}
.massband.ist-da .nadel-marke {
  animation: nadel-steckt 0.7s cubic-bezier(0.2, 0.8, 0.3, 1.05) both;
  animation-delay: calc(1.5s + var(--i) * 220ms);
}
@keyframes nadel-steckt {
  from { transform: translateX(-50%) translateY(-28px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

/* Zettel: klein, auf Papier, in zwei Höhen versetzt */
.nadel-marke__zettel {
  position: absolute;
  bottom: calc(var(--hoehe) * 88px + 12px);
  min-width: 180px;
  padding: 10px 14px 11px;
  background: #fdfbf5;
  border: 1px solid rgba(74, 44, 24, 0.18);
  border-radius: 6px;
  font-size: 17px;
  line-height: 1.35;
  color: var(--tinte-leise);
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.6);
}
.nadel-marke__zettel strong {
  display: block;
  margin-top: 3px;
  font-family: var(--schrift-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--tinte);
}

/* Die Stecknadel: Schaft aus Stahl, Glaskopf — steckt schräg im Band */
.nadel-marke__nadel {
  --kopf: #c9992e;
  position: relative;
  display: block;
  width: 2px;
  height: calc(var(--hoehe) * 88px + 8px);
  background: linear-gradient(180deg, #e9ecef, #8f959c 60%, #5b6169);
  transform-origin: 50% 100%;
  transform: rotate(-9deg);
  border-radius: 1px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform var(--dauer-kurz) var(--kurve);
}
.nadel-marke__nadel--perl { --kopf: #efe6d8; }
.nadel-marke__nadel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.9) 0, var(--kopf) 42%, color-mix(in srgb, var(--kopf) 55%, black) 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.nadel-marke:nth-child(even) .nadel-marke__nadel {
  transform: rotate(7deg);
}
/* Berühren: die Nadel neigt sich, ein Markierstrich erscheint im Band */
.nadel-marke:hover .nadel-marke__nadel { transform: rotate(-12deg); }
.nadel-marke:nth-child(even):hover .nadel-marke__nadel { transform: rotate(10deg); }
.nadel-marke::after {
  content: "";
  position: absolute;
  bottom: -30px;
  width: 2px;
  height: 22px;
  background: var(--akzent);
  opacity: 0;
  transition: opacity var(--dauer-kurz) ease-out;
}
.nadel-marke:hover::after { opacity: 0.7; }

.dauer__hinweis {
  margin-top: var(--raum-3);
  font-size: var(--t-body);
  color: var(--hell);
  opacity: 0.85;
}
/* Das Sternchen davor: klein, gesperrt, eine Stufe leiser als der Satz —
   die Info soll auffallen, nicht schreien */
.dauer__wichtig {
  display: inline-block;
  margin-right: 0.5em;
  font-family: var(--schrift-sans);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hell-leise);
}

/* Schmal: Zettel würden sich stapeln — dann liest sich's als Liste,
   die Nadeln bleiben als Marke; das Band rollt trotzdem aus */
@media (max-width: 760px) {
  .massband { padding-top: 0; }
  .massband__nadeln {
    position: static;
    display: grid;
    gap: 10px;
    margin-bottom: var(--raum-3);
  }
  .nadel-marke {
    position: static;
    transform: none;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 12px;
    justify-items: start;
  }
  .massband.ist-da .nadel-marke { animation: nadel-liste 0.6s ease-out both; animation-delay: calc(var(--i) * 160ms); }
  @keyframes nadel-liste { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .nadel-marke::after { display: none; }
  .nadel-marke__zettel {
    position: static;
    min-width: 0;
    white-space: normal;
    text-align: left;
    order: 2;
    width: 100%;
  }
  .nadel-marke__zettel br { display: none; }
  .nadel-marke__zettel strong { display: inline; margin-left: 6px; }
  .nadel-marke__nadel {
    order: 1;
    height: 26px;
    transform: rotate(-9deg);
    margin-top: 12px;
  }
  .massband__einheit { display: none; }
  .massband__rolle { width: 36px; right: -8px; }
}