/* ═══════════════════════════════════════════════════════════════════
   /30 — Jubiläumskonzept (Phase 5)
   Nur auf dieser Route geladen. Alles auf Tokens (PRINCIPLES §3);
   Ausnahmen sind SVG-Geometriewerte des Jahresrings, die im Kommentar
   hergeleitet sind.

   Zwei Abweichungen von Gewohnheiten, beide bewusst (DESIGN §13):
   1. Diese Seite ist ein SCHAUSTÜCK, kein Manual. Die Regel „Konzept-
      seiten laufen auf Weiß und ohne Einstiegs-Animationen" (DESIGN §6)
      gilt für /marke und die Platzhalter — hier ist die Bewegung der
      Inhalt des Auftrags („visuelles Jubiläumskonzept").
   2. Der Kopf trägt eine grosse dunkle Fläche. Sie kommt aus der
      Rot-Leiter (--red-900), nicht aus --c-deep: DESIGN §2 hat die
      Rolle „dunkle Fläche" am 16.08. der Marke zugeschlagen. Weiss auf
      --red-900 misst > 12:1.

   Kein eigenes Skript: Ring, Zeitstrahl-Linie und Zahlen hängen an
   `[data-anim]` / `[data-count]` aus app.js. Jede Bewegungsregel ist
   deshalb auf `.js` gestellt — ohne Skript steht alles fertig da
   (PRINCIPLES §5).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Kopf ─────────────────────────────────────────────────────────
   Die Nav schwebt über dieser Fläche (data-e="hero" im Markup),
   deshalb hält der Kopf ihre Höhe selbst frei: 5,5rem sind die
   schwebende Leiste plus ihr Abstand von der Oberkante.
   Die Mindesthöhe ist dieselbe Bauart wie beim Startseiten-Hero —
   app.js schaltet die Leiste erst auf `is-solid`, wenn das
   data-e="hero"-Element die unteren 10 % des Fensters verlässt. Ein
   niedrigerer Kopf heisst: die Leiste steht schon beim Laden solid,
   und ihr weisses Feld liegt dann als 4-%-Schleier über der roten
   Fläche. Auf sehr hohen Fenstern (> ~1150px) greift die 54rem-Kappe
   und die Leiste startet solid — genau wie auf der Startseite. */
.ju-hero{background:var(--red-900);color:#fff;
  padding-block:calc(var(--s-12) + 5.5rem) var(--section-y);
  display:flex;align-items:center;min-height:min(94svh,54rem)}
/* Die Ringspalte hat ein festes Mass. Mit `auto` fiel sie auf die
   Textbreite ihres Innenteils zusammen — `width:min(22rem,100%)` gegen
   eine automatische Spalte ist zirkulär, und der Ring stand dann als
   Briefmarke am rechten Rand. */
.ju-hero__grid{width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) 22rem;gap:var(--s-16);align-items:center}
.ju-pill{color:var(--c-signal-l)}
.ju-hero__h1{margin-top:var(--s-5);max-width:22ch;color:#fff}
.ju-hero__lead{margin-top:var(--s-6);max-width:56ch;font-size:var(--t-md);
  color:rgba(255,255,255,.86)}
.ju-hero__note{margin-top:var(--s-6);max-width:52ch;font-size:var(--t-sm);
  color:rgba(255,255,255,.72)}
.ju-hero__note .tag--demo{margin-right:var(--s-2);
  border-color:rgba(255,255,255,.38);color:rgba(255,255,255,.86)}
.ju-hero__cta{margin-top:var(--s-10)}

/* ── Jahresring ───────────────────────────────────────────────────
   30 Striche, einer je Jahr, der dreissigste trägt das Jubiläum.
   Eigene Seitengrafik, kein zweites Markenzeichen — die fünf Entwürfe
   stehen in Abschnitt 01.
   Geometrie: viewBox 320, Mittelpunkt 160/160, Radius 142.
   Der Umfang ist deshalb 2 × π × 142 = 892,2 — dieser Wert ist die
   stroke-dasharray des Bogens und muss mit r mitgeändert werden. */
.ju-ring{position:relative;width:100%;max-width:22rem;aspect-ratio:1;
  justify-self:end;display:grid;place-items:center;
  margin-bottom:var(--s-8)}   /* Platz für die Zeile unter dem Ring */
.ju-ring__svg{position:absolute;inset:0;width:100%;height:100%;
  fill:none;overflow:visible}
.ju-ring__base{stroke:rgba(255,255,255,.18);stroke-width:1}
.ju-ring__arc{stroke:#fff;stroke-width:2;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:160px 160px}
.ju-ring__tick{stroke:rgba(255,255,255,.5);stroke-width:2;stroke-linecap:round}
.ju-ring__tick.is-jub{stroke:var(--c-signal-l);stroke-width:3}
.ju-ring__inner{position:relative;text-align:center}
.ju-ring__num{font-size:var(--t-num);line-height:.9;letter-spacing:-.05em;
  font-weight:var(--fw-strong);font-variant-numeric:tabular-nums;color:#fff}
.ju-ring__label{margin-top:var(--s-2);font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.ju-ring__span{margin-top:var(--s-4);font-size:var(--t-sm);
  font-weight:var(--fw-strong);color:var(--c-signal-l);
  font-variant-numeric:tabular-nums}
.ju-ring__foot{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--s-6) * -1);width:max-content;max-width:100%;
  text-align:center;font-size:var(--t-xs);color:rgba(255,255,255,.6)}

/* Der Bogen zeichnet sich, die Striche kommen gestaffelt nach. Beides
   nur mit Skript — ohne steht der Ring fertig. */
.js .ju-ring__arc{stroke-dasharray:892.2;stroke-dashoffset:892.2;
  transition:stroke-dashoffset calc(var(--dur) * 2) var(--ease)}
.js .ju-ring.is-in .ju-ring__arc{stroke-dashoffset:0}
.js .ju-ring__tick{opacity:0;transition:opacity var(--dur-ui) linear;
  transition-delay:calc(var(--i) * 40ms)}
.js .ju-ring.is-in .ju-ring__tick{opacity:1}

/* ── Sektionsgerüst ── */
.ju-sec{padding-block:var(--section-y);border-top:1px solid var(--c-line)}
.ju-sec--tint{background:var(--c-cream);border-top-color:transparent}
.ju-note{margin-top:var(--s-10);max-width:72ch;font-size:var(--t-sm);
  color:var(--c-muted)}
.ju-note .tag--demo{margin-right:var(--s-2)}
.ju-link{color:var(--c-signal);font-weight:var(--fw-strong);
  border-bottom:1px solid var(--c-signal);
  transition:color var(--dur-ui),border-color var(--dur-ui)}
.ju-link:hover{color:var(--c-signal-d);border-color:var(--c-signal-d)}

/* ── 01 · Die fünf Entwürfe ───────────────────────────────────────
   Sechs Spalten: A und B stehen gross und als Paar (das ist die
   Empfehlung), C bis E kleiner darunter. Die Gewichtung im Raster ist
   das Argument, bevor es im Text steht. */
.ju-marks{display:grid;grid-template-columns:repeat(6,1fr);
  gap:var(--s-10) var(--s-5)}
.ju-mark:nth-child(-n+2){grid-column:span 3}
.ju-mark:nth-child(n+3){grid-column:span 2}
.ju-mark img{display:block;width:100%;height:auto;border-radius:var(--r-img);
  border:1px solid var(--c-line)}
.ju-mark figcaption{margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.ju-mark__label{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-signal)}
.ju-mark__name{font-size:var(--t-lg);font-weight:var(--fw-title);
  letter-spacing:-.02em}
.ju-mark__text{font-size:var(--t-sm);color:var(--c-muted);line-height:1.6;
  max-width:52ch}
.ju-mark__flag{margin-top:var(--s-2);font-size:var(--t-xs);
  color:var(--c-muted);line-height:1.5}
.ju-mark__flag .tag--demo{margin-right:var(--s-2)}

/* Empfehlung: eine Karte, zwei Spalten — links die Begründung, rechts
   was mit den übrigen Entwürfen passiert. */
.ju-pick{margin-top:var(--s-16);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-card);
  padding:var(--s-10);display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s-12)}
.ju-pick__kicker{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-signal)}
.ju-pick__title{margin-top:var(--s-4);max-width:32ch;font-size:var(--t-xl);
  line-height:1.15;letter-spacing:-.025em;font-weight:var(--fw-title)}
.ju-pick .ticks li{font-weight:var(--fw-body)}
.ju-pick .ticks strong{font-weight:var(--fw-strong)}
.ju-pick__side{align-self:end;display:grid;gap:var(--s-4);
  font-size:var(--t-sm);color:var(--c-muted);line-height:1.6}
.ju-pick__side strong{color:var(--c-ink);font-weight:var(--fw-strong)}

/* Der Jahres-Widerspruch. Gestaltet wie der Screening-Hinweis der
   Bewerbung (DESIGN §13, Phase 4): gedämpfter Text an einer roten
   Randlinie — eine Einordnung, keine Fehlermeldung. */
.ju-check{margin-top:var(--s-10);border-left:2px solid var(--c-signal);
  padding-left:var(--s-6);max-width:72ch}
.ju-check__head{font-size:var(--t-md);font-weight:var(--fw-title)}
.ju-check__head .tag--demo{margin-right:var(--s-3)}
.ju-check__text{margin-top:var(--s-3);font-size:var(--t-sm);
  color:var(--c-muted);line-height:1.6}
.ju-check__text strong{color:var(--c-ink);font-weight:var(--fw-strong);
  font-variant-numeric:tabular-nums}

/* ── 02 · Zeitstrahl ──────────────────────────────────────────────
   Eine Linie je Station, die mit der Station aufwächst — kein
   Scroll-Rechnen, damit nichts springt und reduced-motion sofort
   fertig ist. */
.ju-time{display:grid}
/* Der Abstand zwischen den Stationen sitzt am __body, nicht am <li>:
   die Schiene ist ein Rasterelement und wird nur so hoch wie die
   Rasterzeile — ein padding am <li> läge ausserhalb und die Linie
   bekäme an jeder Stationsgrenze eine Lücke. */
.ju-st{display:grid;grid-template-columns:1.1rem minmax(0,1fr);
  gap:var(--s-8)}
.ju-st__body{padding-bottom:var(--s-12)}
.ju-st:last-child .ju-st__body{padding-bottom:0}
.ju-st__rail{position:relative}
.ju-st__line{position:absolute;left:50%;top:0;bottom:0;width:2px;
  margin-left:-1px;background:var(--c-signal)}
.ju-st:last-child .ju-st__line{bottom:auto;height:1.1rem}
.ju-st__dot{position:absolute;left:50%;top:.5rem;width:1.1rem;height:1.1rem;
  margin-left:-.55rem;border-radius:var(--r-pill);background:var(--c-cream);
  box-shadow:inset 0 0 0 2px var(--c-signal)}
.ju-st--next .ju-st__dot{background:var(--c-signal)}
.ju-st__kicker{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.ju-st__year{font-size:var(--t-2xl);line-height:1;letter-spacing:-.04em;
  font-weight:var(--fw-display);font-variant-numeric:tabular-nums}
.ju-st__text{margin-top:var(--s-5);max-width:68ch;font-size:var(--t-md);
  color:var(--c-muted);line-height:1.6}
.ju-st__text .tag--demo{margin-left:var(--s-2);vertical-align:.1em}
.ju-st--next .ju-st__year{color:var(--c-signal)}

.js .ju-st__line{transform:scaleY(0);transform-origin:top;
  transition:transform calc(var(--dur) * 1.6) var(--ease)}
.js .ju-st.is-in .ju-st__line{transform:scaleY(1)}

/* Die Zahlen der Station „Heute" — dieselbe Count-up-Mechanik wie die
   Kennzahlen der Startseite, nur kleiner gesetzt. */
.ju-nums{margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid var(--c-line);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:var(--s-6)}
.ju-num{font-size:var(--t-xl);line-height:1;letter-spacing:-.035em;
  font-weight:var(--fw-strong);font-variant-numeric:tabular-nums}
.ju-num span{color:var(--c-signal)}
.ju-num__label{margin-top:var(--s-2);font-size:var(--t-xs);
  color:var(--c-muted);line-height:1.45;max-width:22ch}

/* ── 03 · In Anwendung ────────────────────────────────────────────
   Jede Anwendung steht auf einer Bühne aus --c-stone, damit das weisse
   Blatt darauf als Blatt lesbar ist (§2: Stone ist der Flächenton für
   verschachtelte Kästen). */
.ju-apps{display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s-12) var(--s-5)}
.ju-app--wide{grid-column:1 / -1}
.ju-app__stage{background:var(--c-stone);border-radius:var(--r-card);
  padding:var(--s-10);display:grid;place-items:center}
.ju-app__stage--rows{place-items:stretch;gap:var(--s-2)}
.ju-app figcaption{margin-top:var(--s-5);max-width:64ch;
  font-size:var(--t-sm);color:var(--c-muted);line-height:1.6}
.ju-app figcaption strong{color:var(--c-ink);font-weight:var(--fw-strong)}

/* Merkregel für alle Platzierungen des Zeichens: die Bilddateien sind
   3:2 und das Motiv liegt darin mittig — es nimmt rund 84 % der Breite
   und nur rund 52 % der Höhe ein. Wer das Zeichen h hoch haben will,
   gibt dem Bild deshalb eine Box h × (h × 1,5 / 0,52) ≈ h × 2,88h und
   `object-fit:cover`; damit wird die Luft oben und unten
   weggeschnitten, statt das Zeichen auf Briefmarkengrösse zu drücken.
   `mix-blend-mode:multiply` lässt den weissen Bildgrund auf jeder
   Fläche verschwinden (Muster von .seal-tile). */

/* (a) Seitenkopf — Zeichen 3rem hoch, also 8,6rem breit. Gemessen:
   unter etwa 3rem sind „JAHRE" und „GRUPPE" im Lockup nicht mehr zu
   lesen. Die Leiste wird dadurch höher als die echte Nav (dort ist die
   Wortmarke 1,9rem) — im Jubiläumsjahr ist das vertretbar, und es ist
   der Grund, warum es Anwendung (d) gibt. */
.ju-topbar{width:100%;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:.7rem 1.5rem;display:flex;
  align-items:center;gap:var(--s-8)}
.ju-topbar__mark{flex:none;height:3rem;width:8.6rem;object-fit:cover;
  mix-blend-mode:multiply}
.ju-topbar__nav{display:flex;gap:var(--s-6);font-size:var(--t-sm);
  font-weight:var(--fw-strong);color:var(--c-muted)}
.ju-topbar__cta{margin-left:auto;flex:none;background:var(--c-signal);
  color:#fff;border-radius:var(--r-sm);padding:.8rem 1.3rem;
  font-size:var(--t-xs);font-weight:var(--fw-strong)}

/* (b) Teilnahmebescheinigung ── */
.ju-urk{width:100%;background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--s-10) var(--s-8);text-align:center}
.ju-urk__mark{display:block;height:4rem;width:11.5rem;margin:0 auto var(--s-6);
  object-fit:cover;mix-blend-mode:multiply}
.ju-urk__kind{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.ju-urk__name{margin-top:var(--s-4);font-size:var(--t-xl);
  letter-spacing:-.025em;font-weight:var(--fw-title)}
.ju-urk__name .tag--demo{margin-left:var(--s-3);vertical-align:.35em}
.ju-urk__text{margin-top:var(--s-3);font-size:var(--t-sm);color:var(--c-muted)}
.ju-urk__course{margin-top:var(--s-3);font-size:var(--t-md);
  font-weight:var(--fw-strong);color:var(--c-signal)}
.ju-urk__meta{margin-top:var(--s-2);font-size:var(--t-sm);color:var(--c-muted)}
.ju-urk__sign{margin-top:var(--s-10);font-size:var(--t-xs);color:var(--c-muted)}
.ju-urk__sign span{display:block;width:12rem;height:1px;
  background:var(--c-field);margin:0 auto var(--s-3)}

/* (c) Aufsteller. Das rote Feld ist das Bild selbst (Entwurf A bringt
   seinen Grund mit) — object-fit:cover schneidet nur die rote Luft
   oben und unten weg, das Motiv bleibt mittig. */
.ju-roll{width:min(20rem,100%);background:var(--c-white);
  border:1px solid var(--c-line);border-radius:var(--r-sm);overflow:hidden}
.ju-roll__mark{display:block;width:100%;height:7rem;object-fit:cover}
.ju-roll__body{padding:var(--s-8) var(--s-6);text-align:center}
.ju-roll__claim{font-size:var(--t-lg);line-height:1.15;letter-spacing:-.025em;
  font-weight:var(--fw-title)}
.ju-roll__lead{margin-top:var(--s-4);font-size:var(--t-sm);
  color:var(--c-muted);line-height:1.55}
.ju-roll__row{margin-top:var(--s-6);font-size:var(--t-xs);
  font-weight:var(--fw-strong);letter-spacing:.06em;color:var(--c-signal)}
.ju-roll__addr{margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--c-line);font-size:var(--t-xs);
  color:var(--c-muted);line-height:1.55}

/* (d) Die Beizeile ohne Bilddatei — reine Schrift plus Haarlinie. */
.ju-line-demo{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-sm);padding:var(--s-6);display:flex;
  align-items:center;gap:var(--s-6)}
.ju-line-demo img{flex:none;height:1.9rem;width:auto}
.ju-line-demo--sig{display:grid;gap:var(--s-3);font-size:var(--t-sm);
  color:var(--c-muted);line-height:1.55}
.ju-line-demo--sig strong{color:var(--c-ink);font-weight:var(--fw-strong)}
.ju-line-demo__add{padding-top:var(--s-3);border-top:1px solid var(--c-line);
  font-size:var(--t-xs);font-weight:var(--fw-strong);letter-spacing:.06em;
  color:var(--c-signal)}
.ju-line-demo__cap{font-size:var(--t-xs);color:var(--c-muted)}
.ju-line-demo__cap:not(:last-child){margin-bottom:var(--s-5)}
.ju-badge{display:inline-flex;align-items:center;gap:var(--s-3);
  padding-left:var(--s-6);border-left:1px solid var(--c-line)}
.ju-badge__no{font-size:var(--t-xl);line-height:1;letter-spacing:-.045em;
  font-weight:var(--fw-strong);color:var(--c-signal);
  font-variant-numeric:tabular-nums}
.ju-badge__txt{font-size:var(--t-xs);font-weight:var(--fw-strong);
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);
  line-height:1.35}

/* ── 04 · Das Jubiläumsjahr ── */
.ju-ideas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.ju-idea{background:var(--c-white);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:var(--s-8);display:grid;
  grid-template-columns:2.5rem minmax(0,1fr);gap:var(--s-5)}
.ju-idea:last-child{grid-column:1 / -1}
.ju-idea__no{font-size:var(--t-sm);font-weight:var(--fw-strong);
  letter-spacing:.06em;color:var(--c-signal);
  font-variant-numeric:tabular-nums}
.ju-idea__title{font-size:var(--t-lg);line-height:1.2;letter-spacing:-.02em;
  font-weight:var(--fw-title)}
.ju-idea__text{margin-top:var(--s-3);max-width:64ch;font-size:var(--t-sm);
  color:var(--c-muted);line-height:1.6}

/* ── Abschluss ── */
.ju-outro{padding-block:var(--section-y);border-top:1px solid var(--c-line)}
.ju-outro__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s-16);align-items:end}
.ju-outro__lead{margin-top:var(--s-6);max-width:60ch;font-size:var(--t-md);
  color:var(--c-muted)}
.ju-outro__cta{display:grid;gap:var(--s-5);justify-items:start}
.ju-outro__alt{font-size:var(--t-sm);color:var(--c-muted)}

/* ── Breakpoints: 1140 / 900 / 760 / 520 (DESIGN §5) ─────────────── */
@media (max-width:1140px){
  .ju-hero__grid{grid-template-columns:1fr;gap:var(--s-12)}
  .ju-ring{justify-self:start}
  .ju-marks{grid-template-columns:repeat(2,1fr)}
  .ju-mark:nth-child(-n+2),
  .ju-mark:nth-child(n+3){grid-column:span 1}
  .ju-pick{grid-template-columns:1fr;gap:var(--s-8)}
  .ju-pick__side{align-self:start}
  .ju-outro__grid{grid-template-columns:1fr;gap:var(--s-10);align-items:start}
}
@media (max-width:900px){
  .ju-apps{grid-template-columns:1fr}
  .ju-ideas{grid-template-columns:1fr}
  .ju-idea:last-child{grid-column:auto}
  .ju-topbar__nav{display:none}
}
@media (max-width:760px){
  .ju-hero{min-height:0;padding-block:calc(var(--section-y) + 5rem) var(--section-y)}
  .ju-marks{grid-template-columns:1fr}
  .ju-pick{padding:var(--s-8) var(--s-6)}
  .ju-st{grid-template-columns:1.1rem minmax(0,1fr);gap:var(--s-5)}
  .ju-app__stage{padding:var(--s-6)}
  .ju-line-demo{flex-wrap:wrap;gap:var(--s-4)}
  .ju-badge{padding-left:0;border-left:0}
}
@media (max-width:520px){
  .ju-idea{grid-template-columns:1fr;gap:var(--s-2)}
  .ju-urk{padding:var(--s-8) var(--s-5)}
}

/* Bewegungsarm: base.css kürzt jede Dauer, aber keine Verzögerung —
   ohne diesen Block liefen die 30 Ringstriche trotzdem über gut eine
   Sekunde ein. Wer eine neue Staffelung ergänzt, trägt sie hier nach. */
@media (prefers-reduced-motion:reduce){
  .js .ju-ring__tick,
  .ju-mark,
  .ju-idea,
  .ju-st{transition-delay:0s!important;animation-delay:0s!important}
}