/* ==========================================================================
   Festival · Weltrekord: „1.000 Plätze auf dem Schlossplatz“
   Oben das Bühnenfoto mit Countdown, darunter der Platzplan mit 1.000 Punkten.
   Ohne JavaScript steht der Endzustand da, rekord.js spielt das Füllen einmal ab.
   ========================================================================== */

.rekord { --rp-alt: #9A8E80; --rp-leer: rgba(246, 239, 226, .17); overflow: clip; }

/* ---------- Teil 1: Bühnenfoto, läuft unten ins Holz aus ---------- */
.rekord-buehne { background: transparent; }
.rekord-foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 97%); mask-image: linear-gradient(180deg, #000 56%, transparent 97%); }
.rekord-buehne::after { -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 97%); mask-image: linear-gradient(180deg, #000 56%, transparent 97%); }
.rekord-buehne > .innen { padding-bottom: clamp(120px, 14vw, 200px); }
.rekord-buehne .buehne-quelle { bottom: auto; top: calc(var(--kopf-h) + 18px); }

/* ---------- Teil 2: der Platzplan ---------- */
.rekord-platz { position: relative; padding-block: 0 var(--abschnitt); margin-top: clamp(-96px, -6vw, -40px); }
.rp-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". bild" "kopf bild" "aktion bild" ". bild"; column-gap: clamp(40px, 5.5vw, 104px); }
.rp-kopf { grid-area: kopf; }
.rp-bild { grid-area: bild; margin: 0; min-width: 0; }
.rp-aktion { grid-area: aktion; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; }
.rp-aktion .hinweis-klein { margin: 0; font-size: 15px; }

.rekord-platz .zeile { margin-bottom: 18px; }
.rp-titel { font-size: clamp(34px, 3.3vw, 52px); line-height: .94; margin: 0 0 22px; }
.rp-zahl { display: block; margin: 0 0 6px -.04em; font-size: clamp(104px, 10.4vw, 168px); line-height: .8; letter-spacing: -.02em; color: var(--gruen-licht); font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.rp-einleitung { margin: 0; max-width: 36ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.5; color: var(--hell-2); }

/* Raster: quer am Rechner, hochkant am Handy */
.rp-variante { position: relative; }
.rp-variante--quer { container: rp-quer / inline-size; }
.rp-variante--hoch { display: none; }
.rp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rp-svg path { fill: none; stroke-linecap: round; }
.rp-leer path { stroke: var(--rp-leer); }
.rp-svg .rp-alt { stroke: var(--rp-alt); }
.rp-svg .rp-neu { stroke: var(--gruen); }
.rp-svg .rp-umriss { fill: rgba(246, 239, 226, .035); stroke: rgba(246, 239, 226, .3); stroke-width: 1.4; stroke-dasharray: .1 6; }
.rp-svg .rp-buehne { fill: rgba(246, 239, 226, .1); stroke: rgba(246, 239, 226, .45); stroke-width: 1.5; stroke-linejoin: round; }
.rp-318-kern { fill: var(--weiss); }
.rp-318-ring { fill: none; stroke: var(--gruen-licht); stroke-width: 2.5; }
.rp-318-welle { fill: none; stroke: var(--gruen-licht); stroke-width: 2; opacity: 0; }
.rp-318 circle { transform-box: fill-box; transform-origin: center; }

/* Beschriftungen auf dem Plan (Lage kommt als --x/--y aus dem HTML) */
.rp-zettel > * { position: absolute; left: var(--x); top: var(--y); }
.rp-name { translate: -50% -50%; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; color: var(--hell-2); white-space: nowrap; }
.rp-name--platz { translate: 0 0; font-weight: 700; letter-spacing: .18em; color: rgba(246, 239, 226, .55); }

.rp-stempel { translate: -50% -50%; }
.rp-stempel > span { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 14px; border: 2.5px solid var(--hell); border-radius: 9px; background: rgba(30, 21, 16, .88); box-shadow: inset 0 0 0 3px rgba(30, 21, 16, .88), inset 0 0 0 4.5px rgba(246, 239, 226, .55), 0 18px 30px -14px rgba(0, 0, 0, .8); color: var(--hell); rotate: -6deg; white-space: nowrap; }
.rp-stempel b { font-family: var(--display); font-weight: 900; font-size: 44px; line-height: .8; letter-spacing: -.01em; padding-top: 2px; }
.rp-stempel b + span { font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.1; letter-spacing: .1em; text-transform: uppercase; }

.rp-marke { translate: calc(-100% + 24px) calc(-100% - 15px); }
.rp-marke > span { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--hell); color: var(--tinte); font-family: var(--display); font-weight: 800; font-size: 15.5px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 14px 24px -12px rgba(0, 0, 0, .8); }
.rp-marke > span::after { content: ""; position: absolute; right: 17px; top: 100%; border: 7px solid transparent; border-top-color: var(--hell); border-bottom: 0; }
.rp-marke b { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 1px 9px 0; border-radius: 999px; background: var(--gruen-tief); color: var(--weiss); font-weight: 900; font-size: 17px; letter-spacing: .02em; }
.rp-marke--ziel { translate: calc(-100% + 24px) 17px; }
.rp-marke--ziel > span { padding: 5px 5px 5px 14px; background: var(--gruen); color: var(--weiss); }
.rp-marke--ziel > span::after { top: auto; bottom: 100%; border: 7px solid transparent; border-bottom-color: var(--gruen); border-top: 0; }
.rp-marke--ziel b { background: var(--weiss); color: var(--gruen-tief); }

/* ---------- Ablauf (rekord.js setzt die Klassen) ---------- */
/* Der fertige Plan ist der Normalzustand. Solange das Füllen läuft, warten die Beschriftungen auf ihren Moment. */
.rp--bereit:not(.ist-neu) .rp-zahl { color: var(--hell-2); }
.rp--bereit:not(.ist-stempel) .rp-stempel > span,
.rp--bereit:not(.ist-neu) .rp-marke--318 > span,
.rp--bereit:not(.ist-neu) .rp-318,
.rp--bereit:not(.ist-ziel) .rp-marke--ziel > span { opacity: 0; }
.rp--bereit.ist-stempel .rp-stempel > span { animation: rp-stempel .5s var(--ease) both; }
.rp--bereit.ist-stempel .rp-variante { animation: rp-ruck .3s ease-out .2s; }
.rp--bereit.ist-neu .rp-318-kern, .rp--bereit.ist-neu .rp-318-ring { animation: rp-pop .6s var(--ease-feder) both; }
.rp--bereit.ist-neu .rp-318-welle { animation: rp-welle 1.3s var(--ease) .1s both; }
.rp--bereit.ist-neu .rp-marke--318 > span { animation: rp-zettel .45s var(--ease) .12s both; }
.rp--bereit.ist-ziel .rp-marke--ziel > span { animation: rp-zettel-hoch .45s var(--ease) both; }
@keyframes rp-stempel { 0% { opacity: 0; transform: scale(1.8) rotate(-9deg); } 55% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes rp-ruck { 0%, 100% { transform: none; } 35% { transform: translateY(2px); } }
@keyframes rp-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes rp-welle { from { opacity: .9; transform: none; } to { opacity: 0; transform: scale(3); } }
@keyframes rp-zettel { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes rp-zettel-hoch { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }

/* Schmaler Querplan (Tablet, kleine Laptops): Beschriftungen rücken zusammen, damit sie sich nicht berühren */
@container rp-quer (max-width: 660px) {
  .rp-stempel { left: 26%; }
  .rp-stempel > span { gap: 8px; padding: 6px 11px 6px 10px; }
  .rp-stempel b { font-size: 34px; }
  .rp-stempel b + span { font-size: 13.5px; letter-spacing: .08em; }
  .rp-marke > span { gap: 7px; font-size: 14px; }
  .rp-marke b { min-width: 28px; height: 24px; padding: 1px 8px 0; font-size: 15.5px; }
  .rp-name { font-size: 14px; letter-spacing: .18em; }
}

/* ---------- Kleinere Bildschirme ---------- */
@media (max-width: 999px) {
  .rp-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "kopf" "bild" "aktion"; }
  .rp-bild { margin-top: 44px; }
  .rp-titel { max-width: none; }
}
@media (max-width: 559px) {
  .rp-variante--quer { display: none; }
  .rp-variante--hoch { display: block; }
  .rp-bild { margin-top: 36px; }
  .rp-name { font-size: 14px; letter-spacing: .18em; }
  .rekord-platz .zeile { gap: 0; font-size: 15px; letter-spacing: .12em; }
  .rekord-platz .zeile::before { display: none; }
  .rp-stempel > span { gap: 9px; padding: 6px 12px 6px 10px; }
  .rp-stempel b { font-size: 36px; }
  .rp-stempel b + span { font-size: 14px; }
  .rp-marke > span { font-size: 14.5px; gap: 7px; }
  .rp-marke b { font-size: 16px; height: 24px; min-width: 28px; padding: 1px 8px 0; }
  .rp-aktion { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-zahl { transition: none; }
}