/* landing-blocks.css — Conversion-Block-Styles (.pub-*) für die Phase-5-Blöcke
   cta, guarantee, countdown, bonus, optin (Templates in templates/landing/blocks/).
   Unconditional geladen von landing/page.html, lms/public_course_landing.html und
   lms/public_courses.html — Member sehen die Blöcke, daher kein Editor-Gate.
   Konventionen wie landing-public.css: CSS-Variablen (mit Fallbacks), Varianten
   als --modifier, Gold var(--color-accent, #c39641) für Wert-/Akzent-Elemente.
   Editor-Klassen (.lp-* / .edit-*) leben ausschließlich in edit.css. */

/* ── CTA (Call-to-Action) ── */
.pub-cta-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--color-cream, #f8f4ef);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-10, 2.5rem) var(--space-6, 1.5rem);
}

.pub-cta-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 1.75rem);
    color: var(--color-primary-dark, #1a4352);
    margin: 0 0 var(--space-3, 0.75rem);
}

.pub-cta-reason {
    max-width: 480px;
    margin: 0 auto var(--space-6, 1.5rem);
    color: var(--color-text-muted, #555);
    line-height: 1.6;
}

.pub-cta-risk {
    margin: var(--space-4, 1rem) 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #777);
}

/* ── Garantie (Risiko-Umkehr) ── */
.pub-guarantee-card {
    display: flex;
    align-items: center;
    gap: var(--space-6, 1.5rem);
    max-width: 720px;
    margin: 0 auto;
    background: var(--color-white, #fff);
    border: 2px solid var(--color-accent, #c39641);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.pub-guarantee-badge,
.pub-guarantee-badge-empty {
    flex-shrink: 0;
    width: 110px;
    height: 110px;
}

.pub-guarantee-badge {
    object-fit: contain;
}

/* Ghost-Platzhalter (nur Edit-Modus): Klick öffnet den Bild-Picker (data-lp-img). */
.pub-guarantee-badge-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2, 0.5rem);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent, #c39641);
    background: rgba(195, 150, 65, 0.06);
    border: 2px dashed var(--color-accent, #c39641);
    border-radius: 50%;
    cursor: pointer;
}

.pub-guarantee-body {
    flex: 1;
    min-width: 0;
}

.pub-guarantee-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-primary-dark, #1a4352);
    margin: 0 0 var(--space-3, 0.75rem);
}

.pub-guarantee-statement {
    margin: 0 0 var(--space-3, 0.75rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-text, #333);
}

.pub-guarantee-reason {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-muted, #666);
}

/* ── Countdown / Verknappung ── */
.pub-countdown {
    text-align: center;
}

.pub-countdown-label {
    margin: 0 0 var(--space-4, 1rem);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #333);
}

/* Variante deadline: Ticker-Boxen (T:H:M:S) */
.pub-countdown-timer {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-3, 0.75rem);
    flex-wrap: wrap;
}

.pub-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
    background: var(--color-primary-dark, #1a4352);
    color: var(--color-white, #fff);
    border-radius: var(--radius-lg, 12px);
}

.pub-countdown-num {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.pub-countdown-unit-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
}

/* „⏰ abgelaufen"-Badge — sehen nur Admins (Member-Render lässt den Block weg). */
.pub-countdown-expired-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    margin-bottom: var(--space-3, 0.75rem);
    padding: 2px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #8a6d1f;
    background: rgba(195, 150, 65, 0.15);
    border: 1px solid rgba(195, 150, 65, 0.4);
    border-radius: var(--radius-full, 999px);
}

.pub-countdown--expired .pub-countdown-label {
    color: var(--color-text-muted, #777);
}

/* Variante plaetze: „Noch X von Y Plätzen frei" */
.pub-countdown-seats {
    margin: 0;
    font-size: 1.15rem;
    color: var(--color-text, #333);
}

.pub-countdown-num-inline {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-primary, #276378);
}

/* Ehrlicher Ausgebucht-Zustand: bleibt sichtbar, kein falsches „noch frei". */
.pub-countdown-soldout {
    margin: 0 0 var(--space-2, 0.5rem);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-danger, #b91c1c);
}

.pub-countdown--soldout .pub-countdown-seats {
    color: var(--color-text-muted, #777);
}

/* Variante kapazitaet: Fortschrittsbalken „X% belegt" */
.pub-countdown-bar {
    max-width: 480px;
    height: 14px;
    margin: 0 auto;
    background: var(--color-border-light, #eee);
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
}

.pub-countdown-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-accent, #c39641);
    border-radius: var(--radius-full, 999px);
    transition: width 0.3s ease;
}

.pub-countdown-bar-label {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: 1.05rem;
    color: var(--color-text, #333);
}

.pub-countdown-bar-label strong {
    color: var(--color-primary-dark, #1a4352);
}

/* Edit-Hinweis (nur Admin-Render der kapazitaet-Variante) */
.pub-countdown-edit-hint {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: 0.8rem;
    color: var(--color-text-muted, #888);
}

/* ── Bonus-Stack ── */
.pub-bonus-list {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.pub-bonus-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    border-bottom: 1px dashed var(--color-border, #e5e0d8);
}

.pub-bonus-row:last-of-type {
    border-bottom: none;
}

.pub-bonus-row-main {
    flex: 1;
    min-width: 0;
}

.pub-bonus-name {
    display: block;
    font-weight: 700;
    color: var(--color-text, #333);
    line-height: 1.4;
}

.pub-bonus-desc {
    display: block;
    margin-top: 2px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-muted, #666);
}

/* Wert-Label rechts — Gold, wie die Akzent-Labels in landing-public.css. */
.pub-bonus-value {
    flex-shrink: 0;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-accent, #c39641);
}

.pub-bonus-total {
    margin: var(--space-3, 0.75rem) 0 0;
    padding-right: var(--space-5, 1.25rem);
    text-align: right;
    font-weight: 700;
    color: var(--color-primary-dark, #1a4352);
}

/* Editor-Zeilen-Controls (nur im Edit-Modus gerendert) */
.pub-bonus-remove {
    flex-shrink: 0;
    padding: 2px 6px;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-muted, #999);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
}

.pub-bonus-remove:hover {
    color: var(--color-danger, #b91c1c);
    background: rgba(185, 28, 28, 0.08);
}

.pub-bonus-add {
    display: block;
    width: 100%;
    padding: var(--space-3, 0.75rem);
    font: inherit;
    font-weight: 600;
    color: var(--color-text-muted, #777);
    background: transparent;
    border: none;
    border-top: 2px dashed var(--color-border, #ccc);
    cursor: pointer;
}

.pub-bonus-add:hover {
    color: var(--color-accent, #c39641);
    background: rgba(195, 150, 65, 0.06);
}

/* ── Opt-in (E-Mail-Eintragung) ── */
/* Karte an die .pub-preview-optin-Optik angelehnt (goldgetönt, zentriert). */
.pub-optin-card {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: rgba(195, 150, 65, 0.08);
    border: 1px solid var(--color-accent, #c39641);
    border-radius: var(--radius-xl, 16px);
    padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
}

.pub-optin-title {
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    color: var(--color-primary-dark, #1a4352);
    margin: 0 0 var(--space-3, 0.75rem);
}

.pub-optin-text {
    max-width: 540px;
    margin: 0 auto var(--space-5, 1.25rem);
    color: var(--color-text-muted, #555);
    line-height: 1.6;
}

.pub-optin-form {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    max-width: 520px;
    margin: 0 auto;
}

.pub-optin-input {
    flex: 1;
    min-width: 200px;
    padding: 0.7rem 1rem;
    font: inherit;
    color: var(--color-text, #333);
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #ccc);
    border-radius: 10px;
}

.pub-optin-input:focus {
    outline: 2px solid var(--color-primary, #276378);
    outline-offset: 1px;
}

.pub-optin-msg {
    margin: var(--space-4, 1rem) 0 0;
    font-weight: 600;
}

.pub-optin-privacy {
    max-width: 480px;
    margin: var(--space-4, 1rem) auto 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted, #888);
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .pub-guarantee-card {
        flex-direction: column;
        text-align: center;
    }

    .pub-countdown-unit {
        min-width: 60px;
    }

    .pub-countdown-num {
        font-size: 1.5rem;
    }

    .pub-bonus-row {
        flex-wrap: wrap;
    }

    .pub-bonus-row-main {
        flex-basis: 100%;
    }

    .pub-bonus-value {
        margin-left: auto;
    }
}

/* ── Disziplin-Switcher (Kampagne Jahresmitgliedschaft) ── */
.pub-switcher--chips {
    text-align: center;
}

.pub-switcher-question {
    margin: 0 0 var(--space-4, 1rem);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #333);
}

.pub-switcher-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
}

/* Pill-Buttons; Aktiv-Zustand in Primärfarbe (Muster .pub-optin-input-Fokus). */
.pub-switcher-chip {
    padding: 0.55rem 1.25rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary, #276378);
    background: var(--color-white, #fff);
    border: 1.5px solid var(--color-primary, #276378);
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pub-switcher-chip:hover {
    background: rgba(39, 99, 120, 0.08);
}

.pub-switcher-chip--active {
    color: var(--color-white, #fff);
    background: var(--color-primary, #276378);
}

.pub-switcher-panel {
    line-height: 1.65;
    color: var(--color-text, #333);
}

/* Disziplin-Überschrift über jedem Panel — nur im Edit-Modus gerendert. */
.pub-switcher-panel-label {
    margin: var(--space-4, 1rem) 0 var(--space-1, 0.25rem);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #888);
}

/* Testimonials in den Panels: dezentes Blockquote (linker Rand, kursiv). */
.pub-switcher blockquote {
    margin: var(--space-4, 1rem) 0;
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    border-left: 3px solid var(--color-accent, #c39641);
    font-style: italic;
    color: var(--color-text, #333);
}

.pub-switcher blockquote cite {
    display: block;
    margin-top: var(--space-1, 0.25rem);
    font-size: 0.85rem;
    font-style: normal;
    color: var(--color-text-muted, #777);
}

/* ── Mitgliedschafts-Preise (3-Karten-Grid Monat/Jahr/Lifetime) ── */
.pub-mpricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: var(--space-5, 1.25rem);
    margin-top: var(--space-6, 1.5rem);
}

.pub-mpricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-6, 1.5rem);
    text-align: center;
    background: var(--color-white, #fff);
    border: 1px solid var(--color-border, #e5e0d8);
    border-radius: var(--radius-xl, 16px);
}

/* Jahr-Karte hervorgehoben: Gold-Rahmen, leicht größer, Badge oben. */
.pub-mpricing-card--year {
    border: 2px solid var(--color-accent, #c39641);
    transform: scale(1.03);
    box-shadow: 0 8px 28px rgba(26, 67, 82, 0.1);
}

.pub-mpricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-white, #fff);
    background: var(--color-accent, #c39641);
    border-radius: var(--radius-full, 999px);
}

.pub-mpricing-card-title {
    margin: 0 0 var(--space-2, 0.5rem);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-primary-dark, #1a4352);
}

.pub-mpricing-price {
    margin: 0 0 var(--space-4, 1rem);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text, #333);
}

/* flex:1 drückt CTA + Zähler an die Kartenunterkante (gleiche Höhe im Grid). */
.pub-mpricing-features {
    flex: 1;
    margin: 0 0 var(--space-5, 1.25rem);
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text, #444);
}

.pub-mpricing-features ul {
    margin: 0;
    padding-left: 1.2rem;
}

.pub-mpricing-features li {
    margin-bottom: var(--space-1, 0.25rem);
}

/* Zähler-Zeile „Noch X von Y Plätzen" — Gold wie die Wert-Labels im Bonus. */
.pub-mpricing-seats {
    margin: 0 0 var(--space-3, 0.75rem);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent, #c39641);
}

.pub-mpricing-btn {
    width: 100%;
}

/* Coming-soon-Hinweis unter dem Dummy-CTA — dezent. */
.pub-mpricing-soon {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted, #777);
}

/* Kleingedrucktes unter der Jahr-Karte. */
.pub-mpricing-note {
    margin: var(--space-3, 0.75rem) 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted, #888);
}

/* Mikro-Zitate unter dem Grid. */
.pub-mpricing-quotes {
    margin-top: var(--space-6, 1.5rem);
    text-align: center;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--color-text-muted, #666);
}

/* ── Sekundär-Links (Hero + CTA, Kampagne) — dezente Textlinks unter dem
      Primär-Button; nur gerendert, wenn Text UND Ziel gesetzt sind. ── */
.pub-hero-secondary {
    display: block;
    margin-top: var(--space-3, 0.75rem);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pub-hero-secondary:hover {
    color: var(--color-white, #fff);
}

.pub-cta-secondary-row {
    margin: var(--space-3, 0.75rem) 0 0;
}

.pub-cta-secondary {
    font-size: 0.9rem;
    color: var(--color-text-muted, #666);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.pub-cta-secondary:hover {
    color: var(--color-primary, #276378);
}

/* Mobile: Karten untereinander, Jahr-Karte ZUERST (CSS order). */
@media (max-width: 767px) {
    .pub-mpricing-grid {
        grid-template-columns: 1fr;
        margin-top: var(--space-8, 2rem); /* Platz für das überstehende Badge */
    }

    .pub-mpricing-card--year {
        order: 1;
        transform: none;
    }

    .pub-mpricing-card--month {
        order: 2;
    }

    .pub-mpricing-card--life {
        order: 3;
    }
}