/* Cord Media Lesezeichen — Scroll-Erzählung (v0.3.1)
   Bühne + Karten-Deck, Divi-4-tauglich. Farbwelt: gedeckt, PL-grüner Akzent. */

/* --- Seite im Ton der Bühne ---------------------------------
   Egmont (Trello 31.07.): "Unter der Animation ist die Seite noch ziemlich
   viel weiß. Wenn es geht, bitte die gesamte Seite in dem Hintergrundton
   der Animation."
   Die Bühne ist nur so hoch wie ihr Inhalt; rund um sie herum — vor allem
   als Streifen unter der klebenden Bühne — stand die weiße Seitenfläche.
   #ebe5dc ist exakt der Ton, auf dem der Verlauf der Bühne unten endet,
   dadurch ist der Übergang nahtlos bis zum Footer.
   Die Klasse setzt das Plugin nur auf Seiten mit dem Shortcode. */
body.cm-lz-seite { background-color: #ebe5dc; }

body.cm-lz-seite #main-content,
body.cm-lz-seite #et-main-area,
body.cm-lz-seite article,
body.cm-lz-seite .et_pb_section { background-color: transparent; }
/* .et_pb_section war der eigentliche Träger des weißen Rands: Divi legt sie
   pauschal auf #fff, sie umschließt die komplette Erzählung (12.000 px) und
   liegt damit HINTER allem, was die Bühne nicht selbst abdeckt. */

.cm-lz-wrap {
    --cm-lz-akzent: #47705f;          /* PL-Grün (Counter-Projekt Juliane) */
    --cm-lz-tinte: #18242a;
    --cm-lz-gedeckt: #6e7477;
    --cm-lz-papier: #fffdf8;
    --cm-lz-schatten: 0 24px 70px rgba(28, 35, 38, .16);
    color: var(--cm-lz-tinte);
}

.cm-lz-story { position: relative; }

.cm-lz-stage {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(240px, .9fr) minmax(300px, 1.3fr) minmax(140px, .5fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    /* Höhe ergibt sich aus dem Inhalt (kein min-height:100vh) — oben/unten nur
       30px Luft. Graue Fläche bleibt 100% breit (Hintergrund + Fortschrittsbalken
       über die ganze Breite), NUR der Inhalt sitzt im 1400px-Korridor. */
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: max(clamp(1.5rem, 4vw, 4rem), (100% - 1400px) / 2);
    padding-right: max(clamp(1.5rem, 4vw, 4rem), (100% - 1400px) / 2);
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, .75), transparent 30%),
        linear-gradient(180deg, #f6f2eb 0%, #ebe5dc 100%);
}

/* --- Meta links --- */
.cm-lz-eyebrow {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--cm-lz-akzent);
    font-size: .78rem;
    font-weight: 700;
}

/* Egmont 31.07.: "Die rote Schrift der Lesezeichenüberschrift auch etwas
   kleiner." — von max 2.8rem auf 2.4rem (~14 %), Zwischenwerte mitgezogen. */
.cm-lz-meta h2.cm-lz-titel {
    margin: .5rem 0 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 2.8vw, 2.4rem);
    line-height: 1.08;
    font-weight: 500;
    padding: 0;
}

.cm-lz-text {
    margin: 0;
    max-width: 30rem;
    color: #596267;
    line-height: 1.65;
    font-size: 1rem;
}

.cm-lz-unter {
    margin-top: 1.1rem;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cm-lz-akzent);
}

/* --- "ZUM BUCH AUF PLANET LYRIK" (steht in der Untertitel-Zeile) ---
   Farbe = die offizielle Linkfarbe der Seite aus den Divi-Optionen
   (link_color #0e6073) — Egmont: "Schriftfarbe wie bei all unseren
   Verlinkungen". Typografie bleibt die der Zeile, damit sich nur die
   Bedeutung ändert, nicht das Layout. */
.cm-lz-unter-link {
    color: #0e6073;
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 96, 115, .35);
    padding-bottom: .1em;
    transition: border-color .2s ease;
}

.cm-lz-unter-link:hover,
.cm-lz-unter-link:focus-visible {
    color: #0e6073;
    border-bottom-color: #0e6073;
}

/* --- Navigation --- */
.cm-lz-nav { margin-top: 1.4rem; display: flex; gap: .6rem; }

.cm-lz-btn {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .95rem;
    line-height: 1;
    padding: .7rem 1.05rem;
    border: 1px solid rgba(71, 112, 95, .4);
    border-radius: 999px;
    background: rgba(255, 255, 255, .65);
    color: var(--cm-lz-akzent);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.cm-lz-btn:hover,
.cm-lz-btn:focus-visible {
    background: var(--cm-lz-akzent);
    color: #fff;
    outline: none;
}

/* --- Deck + Karten --- */
.cm-lz-deck {
    position: relative;
    height: min(72vh, 720px);
    display: grid;
    place-items: center;
    perspective: 1400px;
}

.cm-lz-karte {
    position: absolute;
    height: min(64vh, 640px);
    aspect-ratio: var(--cm-lz-ratio, 1 / 4.33);
    border-radius: 7px;
    background: var(--cm-lz-papier);
    box-shadow: var(--cm-lz-schatten);
    border: 1px solid rgba(60, 60, 60, .12);
    overflow: hidden;
    transform-origin: center 85%;
    transition: transform .6s cubic-bezier(.22, .8, .2, 1), opacity .5s ease, filter .5s ease;
    will-change: transform, opacity;
}

.cm-lz-karte img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Anklickbare Karte (öffnet die Lightbox) */
.cm-lz-karte .cm-lz-link {
    display: block;
    height: 100%;
    cursor: zoom-in;
}

.cm-lz-karte .cm-lz-link:focus-visible {
    outline: 3px solid var(--cm-lz-akzent);
    outline-offset: 3px;
}

/* Dezenter Hinweis, dass sich die vorderste Karte öffnen lässt */
.cm-lz-klickbar .cm-lz-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(24, 36, 42, 0);
    transition: background .3s ease;
    pointer-events: none;
}

.cm-lz-klickbar .cm-lz-link:hover::after {
    background: rgba(24, 36, 42, .12);
}

/* Platzhalter-Karten (bis alle Scans da sind) */
.cm-lz-karte.cm-lz-platzhalter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.1rem .9rem;
    color: #fff;
}

.cm-lz-platzhalter .cm-lz-ph-nr {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    letter-spacing: .14em;
    font-size: .75rem;
}

.cm-lz-platzhalter .cm-lz-ph-fuss {
    font-family: Arial, Helvetica, sans-serif;
    font-size: .62rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

/* --- Zähler + Fortschritt --- */
.cm-lz-counter {
    justify-self: end;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
}

/* Egmont 31.07.: "Große Zahl rechts ca. 25% kleiner" — 5.5rem → 4.1rem,
   Zwischenwerte im gleichen Verhältnis. Führende Null entfällt im JS. */
.cm-lz-counter strong {
    display: block;
    font-size: clamp(2rem, 4.5vw, 4.1rem);
    line-height: .9;
    color: var(--cm-lz-akzent);
}

.cm-lz-counter span {
    display: block;
    margin-top: .6rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    color: var(--cm-lz-gedeckt);
}

.cm-lz-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: rgba(71, 112, 95, .12);
}

.cm-lz-progress-bar {
    width: 0;
    height: 100%;
    background: var(--cm-lz-akzent);
    transition: width .15s linear;
}

/* Scroll-Weg — Höhe setzt das JS aus Kartenzahl × scroll-Attribut */
.cm-lz-scrollraum { height: 1200vh; }

/* --- Mobil --- */
@media (max-width: 900px) {
    .cm-lz-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        text-align: center;
        padding: 1.25rem;
    }

    .cm-lz-text { display: none; }
    .cm-lz-nav { justify-content: center; }
    .cm-lz-deck { height: 56vh; }
    .cm-lz-karte { height: min(52vh, 520px); }

    .cm-lz-counter {
        justify-self: center;
        text-align: center;
        display: flex;
        align-items: baseline;
        gap: .5rem;
    }

    .cm-lz-counter strong { font-size: 2rem; }
    .cm-lz-counter span { margin-top: 0; }
}

/* --- Bewegung reduzieren --- */
@media (prefers-reduced-motion: reduce) {
    .cm-lz-karte { transition: none; }
    .cm-lz-progress-bar { transition: none; }
}