/* ============================================================
   Die Matcha-Party — Unterseite (party.ihatematchabut.com)
   ============================================================
   Lädt HINTER css/matcha.css der Hauptseite (per nginx-Alias aus
   /var/www/ihatematchabut): Tokens, Nav, Hero, Knöpfe, Chips,
   Drinks, Adresskarte und Fuß kommen von dort. Hier steht NUR,
   was die Party selbst hat: die Zeitleiste, der Bagel-Ring, der
   Countdown-Zustand „offen" und der Jetzt-Marker.
   Regel 1 (ein Besitzer): die Sichtbarkeit der Programmpunkte
   gehört der Engine ([data-scroll]); dieses CSS setzt darauf
   kein opacity/transform. Regel 3: Easing/Dauern nur aus den
   DDL-Tokens.
   ============================================================ */

/* Countdown-Zustand „offen": kein Datum → Uhr aus, Satz an.
   Die übrigen Zustände (vorher/laeuft/vorbei) regelt matcha.css. */
.ihm-count[data-zustand='offen'] .ihm-count__uhr {
    opacity: 0; transform: translateY(-0.5rem) scale(0.98); filter: blur(6px);
    pointer-events: none;
}
.ihm-count[data-zustand='offen'] .ihm-count__wort--offen {
    opacity: 1; transform: none; filter: none; pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════
   DER TAG — Zeitleiste
   Die Linie wächst mit dem Scroll: die Engine schreibt
   --scroll-progress (0 = Liste kommt unten rein, 1 = oben raus)
   an die <ol>, daraus wird --p über das Fenster 0,10…0,80 — die
   Linie ist voll, bevor der letzte Punkt oben aus dem Bild läuft.
   ════════════════════════════════════════════════════════════ */
.pt-zeit {
    --p: clamp(0, calc((var(--scroll-progress, 0) - 0.1) / 0.7), 1);
    --pt-linie: 0.6rem;            /* x der Linie, schmal: links */
    list-style: none; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: 0;
    position: relative; max-width: 54rem;
    display: grid; gap: 1.25rem;
}
@media (min-width: 56.25rem) {
    .pt-zeit { --pt-linie: 6.75rem; gap: 1.5rem; }
}
/* Grundlinie (leise) und darüber die wachsende, farbige Linie */
.pt-zeit::before,
.pt-zeit::after {
    content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem;
    left: calc(var(--pt-linie) - 1px); width: 2px; border-radius: 2px;
}
.pt-zeit::before { background: var(--ihm-linie-stark); }
.pt-zeit::after {
    background: linear-gradient(to bottom, var(--ihm-matcha-hell), var(--ihm-ube));
    transform-origin: top; transform: scaleY(var(--p));
}

.pt-slot {
    position: relative;
    display: grid; grid-template-columns: minmax(0, 1fr);
    padding-left: calc(var(--pt-linie) + 1.75rem);
}
@media (min-width: 56.25rem) {
    .pt-slot { grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: 3.75rem; padding-left: 0; }
}
/* Der Punkt auf der Linie: leer, bis die Karte da ist (.in-view
   setzt die Engine) — dann leuchtet er in Matcha. */
.pt-slot::before {
    content: ''; position: absolute; z-index: 1;
    left: calc(var(--pt-linie) - 0.45rem); top: 1.55rem;
    width: 0.9rem; height: 0.9rem; border-radius: 50%;
    background: var(--ihm-bg); border: 2px solid var(--ihm-linie-stark);
    transition: background-color var(--ddl-dur-morph) var(--ddl-ease),
                border-color var(--ddl-dur-morph) var(--ddl-ease),
                box-shadow var(--ddl-dur-morph) var(--ddl-ease);
}
.pt-slot.in-view::before {
    background: var(--ihm-matcha); border-color: var(--ihm-matcha-hell);
    box-shadow: 0 0 0 4px rgba(143, 182, 90, 0.25);
}
.pt-slot--highlight.in-view::before {
    background: var(--ihm-ube); border-color: var(--ihm-ube-hell);
    box-shadow: 0 0 0 4px rgba(155, 107, 224, 0.3);
}

.pt-slot__zeit {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.6rem;
    margin: 0 0 0.6rem;
    font-family: var(--ddl-font-mono); font-weight: 700;
    font-size: 1rem; letter-spacing: -0.02em; color: var(--ihm-matcha-hell);
    font-variant-numeric: tabular-nums;
}
.pt-slot__zeit span {
    font-family: var(--ddl-font-sans, 'Century Gothic', 'Avenir Next', Avenir, system-ui, sans-serif);
    font-weight: 500; font-size: 0.75rem; letter-spacing: 0;
    color: var(--ihm-text-mute);
}
@media (min-width: 56.25rem) {
    .pt-slot__zeit {
        flex-direction: column; align-items: flex-end; gap: 0.2rem;
        margin: 0; padding-top: 1.35rem; text-align: right;
        font-size: 1.125rem;
    }
}
.pt-slot--highlight .pt-slot__zeit { color: var(--ihm-ube-hell); }

.pt-slot__karte {
    border: 1px solid var(--ihm-linie); border-radius: var(--ddl-radius-lg);
    background: var(--ihm-bg-3);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}
.pt-slot__karte .ihm-eyebrow { margin-bottom: 0.5rem; }
.pt-slot__karte h3 {
    margin: 0; font-size: var(--ddl-fs-h3, 1.375rem); font-weight: 700;
    letter-spacing: var(--ddl-track-tight); line-height: 1.2;
    text-wrap: balance;
}
.pt-slot__karte h3 + p {
    margin: 0.6rem 0 0; color: var(--ihm-text-soft);
    font-size: var(--ddl-fs-body); line-height: 1.5; max-width: 52ch; text-wrap: pretty;
}
.pt-slot__karte .ihm-chips { margin-top: 1rem; }
.pt-slot__karte .ihm-chip { padding: 0.5rem 0.85rem 0.5rem 0.7rem; font-size: 0.8125rem; }
.pt-slot__klein {
    margin: 0.9rem 0 0; font-size: 0.75rem; color: var(--ihm-text-mute);
}

/* Das Highlight: Verlaufsrand Matcha → Ube, weiches Licht darunter */
.pt-slot--highlight .pt-slot__karte {
    border-color: transparent;
    background:
        linear-gradient(var(--ihm-bg-3), var(--ihm-bg-3)) padding-box,
        linear-gradient(135deg, var(--ihm-matcha), var(--ihm-ube)) border-box;
    box-shadow: 0 1.5rem 3rem rgba(155, 107, 224, 0.16);
}
.pt-slot--highlight .pt-slot__karte .ihm-eyebrow { color: var(--ihm-ube-hell); }
.pt-slot__stern {
    display: inline-flex; align-items: center; gap: 0.5rem;
    margin: 0 0 0.9rem; padding: 0.35rem 0.8rem 0.35rem 0.65rem;
    border-radius: var(--ddl-radius-pill);
    background: linear-gradient(90deg, rgba(143, 182, 90, 0.18), rgba(155, 107, 224, 0.22));
    font-size: 0.75rem; font-weight: 600; letter-spacing: -0.01em; color: #fff;
}
.pt-slot__stern i {
    width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none;
    background: var(--ihm-ube-hell);
    box-shadow: 0 0 0 3px rgba(205, 179, 247, 0.3);
}

/* Regel 11 — am Tag selbst: die Karte sagt „Jetzt", kein neues
   Element. party.js setzt .is-jetzt über data-tag/-von/-bis. */
.pt-slot.is-jetzt .pt-slot__karte { border-color: var(--ihm-matcha); }
.pt-slot.is-jetzt .pt-slot__zeit::after {
    content: 'Jetzt';
    display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--ddl-radius-pill);
    background: var(--ihm-matcha); color: var(--ihm-bg);
    font-family: var(--ddl-font-sans, 'Century Gothic', 'Avenir Next', Avenir, system-ui, sans-serif);
    font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--ddl-track-caps);
    text-transform: uppercase;
}
.pt-slot.is-jetzt::before { animation: ptPuls 2.4s ease-in-out infinite; }
@keyframes ptPuls {
    0%, 100% { box-shadow: 0 0 0 4px rgba(143, 182, 90, 0.25); }
    50%      { box-shadow: 0 0 0 9px rgba(143, 182, 90, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
    .pt-slot.is-jetzt::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   BAGELS — Text links, gezeichneter Ring rechts
   ════════════════════════════════════════════════════════════ */
.pt-bagel {
    display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 56.25rem) {
    .pt-bagel { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.pt-bagel__text .ihm-chips { margin-top: 1.5rem; }
.pt-bagel__bild { display: grid; place-items: center; }
/* Ein Ring aus Verläufen: Kruste außen, hell in der Mitte, Loch.
   Ein Element, ein Kind — das Kind ist das Glanzlicht. */
.pt-bagel__ring {
    position: relative; display: block;
    width: clamp(11rem, 28vw, 16rem); aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0 29%,
            #6a4523 29.5% 31.5%,
            #c98a3e 32% 36%,
            #f2c07a 40% 46%,
            #e6ad62 52% 58%,
            #bb7a35 63% 66.5%,
            #5c391a 67% 68%,
            transparent 68.5%);
    filter: drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.55));
}
.pt-bagel__ring i {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(ellipse 34% 18% at 38% 30%, rgba(255, 244, 220, 0.55), transparent 70%),
        radial-gradient(circle at 50% 50%, transparent 0 66%, rgba(0, 0, 0, 0.35) 68%, transparent 69%);
    -webkit-mask: radial-gradient(circle, transparent 0 29%, #000 30% 68%, transparent 69%);
            mask: radial-gradient(circle, transparent 0 29%, #000 30% 68%, transparent 69%);
}

/* ── Wo: Knopf unter dem Lead ─────────────────────────────── */
.pt-wo__mehr { margin-top: 1.5rem; }

/* ── Druck ───────────────────────────────────────────────── */
@media print {
    .pt-zeit::after, .pt-bagel__bild { display: none; }
}