/* ==========================================================================
   MIRA – MODERN URBAN FANTASY OVERRIDE
   Speichern als: /assets/mirrith/modern.css
   Wird NACH der bestehenden style.css geladen und ersetzt diese NICHT.
   ========================================================================== */

:root {
    --mira-cyan: #67d9ff;
    --mira-cyan-soft: rgba(103, 217, 255, .20);
    --mira-violet: #9167ff;
    --mira-violet-soft: rgba(145, 103, 255, .16);
    --mira-gold: #d8b477;
    --mira-ink: #050912;
    --mira-panel: rgba(7, 14, 26, .78);
    --mira-panel-strong: rgba(5, 10, 20, .93);
    --mira-border: rgba(113, 213, 255, .24);
    --mira-text-soft: rgba(238, 248, 255, .76);
    --mira-shadow: 0 24px 70px rgba(0, 0, 0, .48);
}

html { scroll-behavior: smooth; }
body.mirrith-modern-page {
    background:
        radial-gradient(circle at 14% 22%, rgba(83, 184, 255, .11), transparent 27%),
        radial-gradient(circle at 82% 24%, rgba(137, 83, 255, .10), transparent 25%),
        #04070d;
}

.mirrith-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.mirrith-ambient-grid {
    position: absolute;
    inset: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(103,217,255,.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103,217,255,.038) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,.6) 58%, transparent 100%);
}
.mirrith-ambient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(12px);
    animation: miraFloat 13s ease-in-out infinite;
}
.mirrith-orb-one {
    width: 420px; height: 420px; left: -170px; top: 24vh;
    background: radial-gradient(circle, rgba(103,217,255,.15), transparent 68%);
}
.mirrith-orb-two {
    width: 360px; height: 360px; right: -150px; top: 48vh;
    background: radial-gradient(circle, rgba(145,103,255,.14), transparent 68%);
    animation-delay: -5s;
}
.mirrith-ambient-sigil {
    position: absolute;
    width: 240px;
    height: 240px;
    border: 1px solid rgba(216,180,119,.09);
    border-radius: 50%;
    opacity: .35;
}
.mirrith-sigil-left { left: -110px; top: 42vh; }
.mirrith-sigil-right { right: -130px; top: 68vh; border-color: rgba(103,217,255,.08); }

body.mirrith-modern-page > main,
body.mirrith-modern-page > footer,
body.mirrith-modern-page > .top-lang-switch,
body.mirrith-modern-page > .hamburger-btn,
body.mirrith-modern-page > .mobile-sidebar { position: relative; z-index: 1; }

/* Hero – vorhandenen Übergang bewusst behalten */
.mirrith-modern-page .hero-banner-container {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.mirrith-modern-page .hero-banner-container::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0; right: 0; bottom: -2px;
    height: 32%;
    background: linear-gradient(to bottom, transparent 0%, rgba(3,7,13,.58) 48%, #04070d 100%);
    pointer-events: none;
}
.mirrith-modern-page .hero-banner-container picture img {
    transform: translate3d(var(--mira-parallax-x,0), var(--mira-parallax-y,0),0) scale(1.012);
    transition: transform .22s ease-out, filter .3s ease;
}
.mirrith-modern-page .hero-banner-container::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,5,10,.24), transparent 22%, transparent 78%, rgba(2,5,10,.24)),
        radial-gradient(circle at 50% 46%, transparent 22%, rgba(1,4,8,.2) 100%);
    pointer-events: none;
}
.mirrith-hero-tags {
    position: absolute;
    z-index: 4;
    top: clamp(70px, 7vw, 112px);
    left: 50%;
    width: min(calc(100% - 40px), 900px);
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.mirrith-hero-tags span,
.mirrith-experience-ribbon span {
    padding: 8px 13px;
    border: 1px solid rgba(103,217,255,.24);
    border-radius: 999px;
    background: rgba(3,10,18,.60);
    backdrop-filter: blur(12px);
    color: rgba(238,248,255,.82);
    font-size: .76rem;
    letter-spacing: .07em;
    box-shadow: inset 0 0 16px rgba(103,217,255,.035), 0 8px 22px rgba(0,0,0,.22);
}
.mirrith-modern-page .banner-overlay-cta {
    z-index: 4;
    padding: 14px 16px;
    border: 1px solid rgba(103,217,255,.30);
    border-radius: 16px;
    background: rgba(3,9,17,.64);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 42px rgba(0,0,0,.35), 0 0 30px rgba(103,217,255,.07);
}

/* Typografie und Content-Flächen */
.mirrith-kicker,
.mirrith-modal-kicker {
    margin: 0 0 8px;
    color: var(--mira-cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: .74rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.mirrith-modern-page .site-header { position: relative; }
.mirrith-modern-page .site-header h1 { text-shadow: 0 0 22px rgba(103,217,255,.24); }

.mirrith-modern-page .card,
.mirrith-modern-page .side-card,
.mirrith-modern-page #hardcover-presentation,
.mirrith-contact-panel {
    border-color: rgba(103,217,255,.18) !important;
    box-shadow: var(--mira-shadow), inset 0 1px 0 rgba(255,255,255,.035);
}
.mirrith-modern-page .card,
.mirrith-modern-page #hardcover-presentation,
.mirrith-contact-panel {
    background:
        linear-gradient(145deg, rgba(9,18,32,.88), rgba(3,8,16,.88)) !important;
    backdrop-filter: blur(12px);
}
.mirrith-modern-page .side-card {
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.mirrith-modern-page .side-card:hover {
    transform: translateY(-6px);
    border-color: rgba(103,217,255,.40) !important;
    box-shadow: 0 24px 46px rgba(0,0,0,.42), 0 0 24px rgba(103,217,255,.09);
}

/* CTA: modern, aber nicht überladen */
.mirrith-modern-page .cta-button {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.mirrith-modern-page .cta-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--button-x,50%) var(--button-y,50%), rgba(103,217,255,.15), transparent 35%);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}
.mirrith-modern-page .cta-button:hover::before { opacity: 1; }
.mirrith-modern-page .cta-button:hover { transform: translateY(-2px); }

.mirrith-experience-ribbon {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 4px auto 22px;
}

/* Nutzenblöcke als ruhige Kaufverstärker */
.mirrith-benefits {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 18px;
    max-width: 1200px;
    margin: 48px auto 14px;
    padding: 0 20px;
}
.mirrith-benefits article {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(103,217,255,.16);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(9,18,32,.72), rgba(4,9,17,.82));
    box-shadow: 0 18px 34px rgba(0,0,0,.25);
}
.mirrith-benefit-index {
    display: inline-block;
    margin-bottom: 14px;
    color: rgba(103,217,255,.48);
    font-family: 'Orbitron',sans-serif;
    font-size: .72rem;
    letter-spacing: .18em;
}
.mirrith-benefits h3 {
    margin: 0 0 10px;
    font-family: 'Orbitron',sans-serif;
    font-size: 1rem;
    color: #ecfaff;
}
.mirrith-benefits p { margin: 0; color: var(--mira-text-soft); line-height: 1.7; }

/* Generelle Modals */
.mirrith-modern-page .modal {
    backdrop-filter: blur(14px);
}
.mirrith-modern-page .modal-content {
    border-radius: 22px;
    border: 1px solid rgba(103,217,255,.22);
    background:
        radial-gradient(circle at 85% 10%, rgba(145,103,255,.08), transparent 28%),
        linear-gradient(165deg, rgba(8,16,29,.98), rgba(3,8,15,.98));
    box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 40px rgba(103,217,255,.05);
}

/* Release Update */
.mirrith-release-modal { max-width: 820px; }
.mirrith-release-modal h2 {
    margin: 0 58px 14px 0;
    font-family: 'Orbitron',sans-serif;
    color: #f2fbff;
    text-shadow: 0 0 18px rgba(103,217,255,.24);
}
.mirrith-release-date {
    display: inline-flex;
    margin: 2px 0 20px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(103,217,255,.28);
    color: var(--mira-cyan);
    background: rgba(103,217,255,.07);
    font-family: 'Orbitron',sans-serif;
    font-size: .82rem;
}
.mirrith-release-copy {
    padding: 22px;
    border: 1px solid rgba(103,217,255,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.022);
}
.mirrith-release-copy p { line-height: 1.72; color: var(--mira-text-soft); }
.mirrith-release-signoff { color: #fff !important; font-size: 1.05rem; }

/* Leseprobe – eigener Wow-Moment ohne Effekt-Overkill */
.mirrith-sample-modal {
    width: min(1180px, 94vw) !important;
    max-height: 92vh !important;
    padding: 28px !important;
}
.mirrith-sample-header { padding: 2px 60px 22px 2px; }
.mirrith-sample-header h2 {
    margin: 0 0 8px;
    font-family: 'Orbitron',sans-serif;
    font-size: clamp(1.5rem,3vw,2.3rem);
    color: #f2fbff;
    text-shadow: 0 0 20px rgba(103,217,255,.22);
}
.mirrith-sample-header > p:last-child { margin: 0; color: var(--mira-text-soft); line-height: 1.6; }
.mirrith-sample-layout {
    display: grid;
    grid-template-columns: 270px minmax(0,1fr);
    gap: 22px;
    align-items: start;
}
.mirrith-sample-aside {
    position: sticky;
    top: 0;
    padding: 22px;
    border: 1px solid rgba(103,217,255,.15);
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(103,217,255,.055), rgba(145,103,255,.04));
}
.mirrith-sample-signal {
    margin-bottom: 16px;
    color: var(--mira-cyan);
    font-family: 'Orbitron',sans-serif;
    font-size: .72rem;
    letter-spacing: .18em;
}
.mirrith-sample-aside h3 { margin: 0 0 10px; color: #fff; }
.mirrith-sample-aside p,
.mirrith-sample-aside li { color: var(--mira-text-soft); line-height: 1.62; }
.mirrith-sample-aside ul { padding-left: 1.15rem; margin-bottom: 20px; }
.mirrith-reading-page {
    position: relative;
    padding: clamp(24px,4vw,46px);
    border: 1px solid rgba(216,180,119,.16);
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(216,180,119,.03), transparent 11%, transparent 89%, rgba(103,217,255,.025)),
        rgba(7,12,20,.88);
    box-shadow: inset 0 0 55px rgba(0,0,0,.30), 0 22px 48px rgba(0,0,0,.28);
}
.mirrith-reading-page::before {
    content: '';
    position: absolute;
    left: 0; top: 26px; bottom: 26px;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--mira-gold), var(--mira-cyan), transparent);
    opacity: .55;
}
.mirrith-reading-page p {
    max-width: 760px;
    margin: 0 auto 1.15em;
    color: rgba(245,247,250,.88);
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1rem,1.3vw,1.12rem);
    line-height: 1.9;
}
.mirrith-reading-page p:first-child::first-letter {
    float: left;
    margin: .04em .10em 0 0;
    color: var(--mira-cyan);
    font-family: 'Playfair Display',serif;
    font-size: 4.7em;
    line-height: .75;
    text-shadow: 0 0 18px rgba(103,217,255,.28);
}
.mirrith-sample-end {
    max-width: 760px;
    margin: 34px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(103,217,255,.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.mirrith-sample-end span {
    color: var(--mira-cyan);
    font-family: 'Orbitron',sans-serif;
    font-size: .78rem;
    letter-spacing: .06em;
}

/* Animationen */
.mirrith-modern-page .pop-in-on-load,
.mirrith-modern-page .animate-on-scroll {
    will-change: opacity, transform;
}
.mirrith-modern-page .pop-in-on-load { opacity: 0; transform: translateY(18px); }
.mirrith-modern-page .pop-in-on-load.is-visible { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
.mirrith-modern-page .animate-on-scroll { opacity: 0; transform: translateY(22px); }
.mirrith-modern-page .animate-on-scroll.is-visible { opacity: 1; transform: none; transition: opacity .58s ease, transform .58s ease; }

@keyframes miraFloat {
    0%,100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-18px,0); }
}

@media (max-width: 980px) {
    .mirrith-benefits { grid-template-columns: 1fr; }
    .mirrith-sample-layout { grid-template-columns: 1fr; }
    .mirrith-sample-aside { position: static; }
    .mirrith-hero-tags { top: 76px; }
}

@media (max-width: 720px) {
    .mirrith-hero-tags { display: none; }
    .mirrith-sample-modal { width: 96vw !important; padding: 18px !important; }
    .mirrith-reading-page { padding: 24px 20px; }
    .mirrith-sample-end { flex-direction: column; align-items: stretch; }
    .mirrith-sample-end .cta-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .mirrith-modern-page *,
    .mirrith-modern-page *::before,
    .mirrith-modern-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   V2 – HERO CARD / CARD SYSTEM / READABILITY FIXES
   ========================================================================== */

/* Sprachumschalter: alte Basisregeln vollständig neutralisieren */
.mirrith-modern-page .top-lang-switch {
    position: fixed !important;
    top: 18px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border: 1px solid rgba(103, 217, 255, .30) !important;
    border-radius: 12px !important;
    background: rgba(3, 9, 17, .78) !important;
    backdrop-filter: blur(14px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .30) !important;
    z-index: 1100 !important;
}

.mirrith-modern-page .top-lang-switch a {
    margin: 0 !important;
    padding: 4px 6px !important;
    color: rgba(235, 247, 255, .58) !important;
    text-decoration: none !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: .76rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .08em !important;
    opacity: 1 !important;
    border-radius: 7px !important;
    transition: color .18s ease, background .18s ease !important;
}

.mirrith-modern-page .top-lang-switch a.active {
    color: #eafaff !important;
    background: rgba(103, 217, 255, .12) !important;
    text-shadow: 0 0 12px rgba(103, 217, 255, .32) !important;
}

.mirrith-modern-page .top-lang-switch .lang-divider {
    color: rgba(235, 247, 255, .25) !important;
    font-size: .72rem !important;
}

/* Desktop: Hero als edle, eigenständige Karte. Mobile bleibt bewusst unverändert. */
@media (min-width: 769px) {
    .mirrith-modern-page .hero-banner-container {
        width: min(calc(100% - 52px), 1540px) !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 2.86 / 1 !important;
        margin: 28px auto 54px !important;
        border: 1px solid rgba(103, 217, 255, .22) !important;
        border-radius: 28px !important;
        background: #030811 !important;
        box-shadow:
            0 34px 80px rgba(0, 0, 0, .46),
            0 0 0 1px rgba(255, 255, 255, .018) inset,
            0 0 54px rgba(103, 217, 255, .055) !important;
        overflow: hidden !important;
    }

    .mirrith-modern-page .hero-banner-container picture {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }

    .mirrith-modern-page .hero-banner-container picture img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        border-radius: 0 !important;
    }

    .mirrith-modern-page .hero-banner-container::before {
        z-index: 2 !important;
        background:
            linear-gradient(90deg, rgba(1, 5, 10, .24) 0%, transparent 20%, transparent 80%, rgba(1, 5, 10, .24) 100%),
            radial-gradient(circle at 50% 44%, transparent 32%, rgba(1, 5, 10, .20) 100%) !important;
    }

    /* Das Bild läuft unten weich in exakt die Seitenfarbe aus. */
    .mirrith-modern-page .hero-banner-container::after {
        z-index: 3 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: 45% !important;
        background: linear-gradient(
            to bottom,
            rgba(4, 7, 13, 0) 0%,
            rgba(4, 7, 13, .10) 24%,
            rgba(4, 7, 13, .58) 66%,
            #04070d 100%
        ) !important;
        pointer-events: none !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase {
        position: absolute !important;
        z-index: 5 !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 22px !important;
        width: auto !important;
        min-width: 310px !important;
        max-width: min(420px, calc(100% - 48px)) !important;
        height: auto !important;
        margin: 0 !important;
        padding: 12px 14px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        border: 1px solid rgba(103, 217, 255, .26) !important;
        border-radius: 16px !important;
        background: rgba(3, 9, 17, .78) !important;
        backdrop-filter: blur(14px) !important;
        box-shadow: 0 14px 34px rgba(0, 0, 0, .34) !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase .banner-price {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        color: rgba(245, 250, 255, .92) !important;
        font-size: .90rem !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase .cta-button {
        width: auto !important;
        min-width: 240px !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Die Buchfakten werden nur noch an einer Stelle gezeigt. Alte Reste vorsichtshalber ausblenden. */
.mirrith-modern-page .mirrith-hero-tags,
.mirrith-modern-page .mirrith-experience-ribbon {
    display: none !important;
}

/* Karten erhalten eigenständige Flächen statt mit dem Seitenhintergrund zu verschmelzen. */
.mirrith-modern-page .card,
.mirrith-modern-page .gateway-intro,
.mirrith-modern-page .gateway-card,
.mirrith-modern-page .side-card,
.mirrith-modern-page #hardcover-presentation,
.mirrith-modern-page .mirrith-benefits article {
    border-radius: 18px !important;
    border: 1px solid rgba(103, 217, 255, .18) !important;
    background:
        radial-gradient(circle at 88% 8%, rgba(103, 217, 255, .055), transparent 28%),
        linear-gradient(155deg, rgba(12, 22, 38, .96), rgba(6, 11, 22, .94)) !important;
    box-shadow:
        0 20px 48px rgba(0, 0, 0, .34),
        inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

/* Countdown-Hauptkarte bewusst etwas satter und violett-blau abgesetzt. */
.mirrith-modern-page #countdown-section {
    border-color: rgba(137, 112, 255, .30) !important;
    background:
        radial-gradient(circle at 90% 12%, rgba(118, 92, 255, .15), transparent 34%),
        radial-gradient(circle at 8% 92%, rgba(72, 190, 235, .07), transparent 34%),
        linear-gradient(155deg, #10162a 0%, #0b1020 54%, #080d19 100%) !important;
}

.mirrith-modern-page #countdown-section .card-inner-bg {
    background: transparent !important;
    border-radius: inherit !important;
}

.mirrith-modern-page .side-card {
    background:
        linear-gradient(155deg, rgba(18, 28, 48, .96), rgba(10, 17, 31, .96)) !important;
}

.mirrith-modern-page .gateway-card {
    overflow: hidden !important;
}

.mirrith-modern-page .gateway-card img,
.mirrith-modern-page .gateway-card video,
.mirrith-modern-page .side-card img,
.mirrith-modern-page .hc-display-img {
    border-radius: 13px !important;
}

/* Buttons insgesamt ruhiger; keine automatisch laufenden Glow-/Pulse-Effekte. */
.mirrith-modern-page .cta-button,
.mirrith-modern-page #preorder-btn,
.mirrith-modern-page #preorder-btn-top,
.mirrith-modern-page #hardcover-presentation .cta-button {
    animation: none !important;
}

.mirrith-modern-page .purchase-cta,
.mirrith-modern-page #preorder-btn,
.mirrith-modern-page #preorder-btn-top {
    border-color: rgba(126, 224, 255, .74) !important;
    background: linear-gradient(135deg, #8be6ff 0%, #65c7ef 48%, #7ab8f3 100%) !important;
    color: #04101a !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    box-shadow:
        0 10px 28px rgba(68, 180, 224, .19),
        inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

.mirrith-modern-page .purchase-cta::before,
.mirrith-modern-page #preorder-btn::before,
.mirrith-modern-page #preorder-btn-top::before {
    display: none !important;
}

.mirrith-modern-page .purchase-cta:hover,
.mirrith-modern-page #preorder-btn:hover,
.mirrith-modern-page #preorder-btn-top:hover {
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, #a5edff 0%, #78d2f3 50%, #8ac5f7 100%) !important;
    box-shadow: 0 14px 34px rgba(68, 180, 224, .24) !important;
}

/* Kontakt: nur der Button, kein breiter Balken/Panel mehr. */
.mirrith-modern-page .mirrith-contact-action {
    width: min(calc(100% - 32px), 1180px) !important;
    margin: 12px auto 44px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Leseprobe: feste, hohe Lesbarkeit trotz alter Basis-CSS-Regeln. */
.mirrith-modern-page #virtual-book-modal .modal-content,
.mirrith-modern-page #virtual-book-modal .mirrith-sample-modal {
    color: #edf6fb !important;
    opacity: 1 !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-sample-header h2 {
    color: #f5fbff !important;
    opacity: 1 !important;
    text-shadow: 0 0 18px rgba(103, 217, 255, .20) !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-sample-header p,
.mirrith-modern-page #virtual-book-modal .mirrith-sample-aside p,
.mirrith-modern-page #virtual-book-modal .mirrith-sample-aside li {
    color: rgba(234, 244, 250, .78) !important;
    opacity: 1 !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-reading-page {
    background:
        linear-gradient(90deg, rgba(216, 180, 119, .035), transparent 10%, transparent 90%, rgba(103, 217, 255, .025)),
        #0b111a !important;
    border-color: rgba(216, 180, 119, .18) !important;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, .20),
        0 20px 45px rgba(0, 0, 0, .28) !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-reading-page p {
    color: #e7edf2 !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: none !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: clamp(1.02rem, 1.18vw, 1.12rem) !important;
    font-weight: 400 !important;
    line-height: 1.92 !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-reading-page p:first-child::first-letter {
    color: #80ddff !important;
}

.mirrith-modern-page #virtual-book-modal .mirrith-sample-end span {
    color: #85dcff !important;
    opacity: 1 !important;
}

/* Kleine optische Korrekturen für sichtbare Content-Bereiche. */
.mirrith-modern-page .site-header {
    margin-top: 12px !important;
}

.mirrith-modern-page .new-button-bar {
    gap: 12px !important;
}

.mirrith-modern-page #hardcover-presentation {
    padding: 34px 26px 38px !important;
}

@media (max-width: 768px) {
    /* Mobile Hero bewusst nicht in das Desktop-Card-Konzept hineinziehen. */
    .mirrith-modern-page .top-lang-switch {
        top: 12px !important;
        right: 12px !important;
        padding: 6px 8px !important;
    }

    .mirrith-modern-page .hero-banner-container {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .mirrith-modern-page .mirrith-contact-action {
        width: calc(100% - 28px) !important;
        margin-bottom: 34px !important;
    }

    .mirrith-modern-page #virtual-book-modal .mirrith-sample-modal {
        width: calc(100vw - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        padding: 18px !important;
    }

    .mirrith-modern-page #virtual-book-modal .mirrith-reading-page {
        padding: 24px 20px !important;
    }

    .mirrith-modern-page #virtual-book-modal .mirrith-reading-page p {
        font-size: 1rem !important;
        line-height: 1.82 !important;
    }
}

/* ==========================================================================
   V3 – TABLET HERO + SIDEBAR POLISH
   ========================================================================== */

/* Tablet / schmaler Desktop: Hero bewusst höher, damit die Kauf-Card niemals
   die Schriftgrafik im Banner überlagert. Mobile (<769px) bleibt unangetastet. */
@media (min-width: 769px) and (max-width: 1366px) {
    .mirrith-modern-page .hero-banner-container {
        width: min(calc(100% - 34px), 1120px) !important;
        aspect-ratio: 2.18 / 1 !important;
        margin-top: 20px !important;
        margin-bottom: 48px !important;
        border-radius: 24px !important;
    }

    .mirrith-modern-page .hero-banner-container picture img {
        object-fit: cover !important;
        object-position: center center !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase {
        bottom: 16px !important;
        min-width: 280px !important;
        max-width: calc(100% - 36px) !important;
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase .banner-price {
        font-size: .82rem !important;
    }

    .mirrith-modern-page .mirrith-hero-purchase .purchase-cta {
        min-height: 46px !important;
        padding: .78rem 1.2rem !important;
    }
}

/* Sidebar als eigenes modernes Panel statt violetter Alt-Cards. */
.mirrith-modern-page .mobile-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background:
        radial-gradient(circle at 0% 15%, rgba(24, 166, 211, .12), transparent 30%),
        radial-gradient(circle at 100% 80%, rgba(112, 59, 190, .11), transparent 32%),
        linear-gradient(180deg, rgba(4, 10, 18, .985), rgba(5, 8, 17, .99)) !important;
    border-right: 1px solid rgba(103, 217, 255, .22) !important;
    box-shadow: 24px 0 70px rgba(0, 0, 0, .48) !important;
    backdrop-filter: blur(20px) !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-actions {
    margin: 0 0 12px !important;
    gap: 10px !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-action {
    width: 100% !important;
    min-height: 50px !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, rgba(8, 18, 31, .92), rgba(4, 10, 18, .96)) !important;
    border: 1px solid rgba(103, 217, 255, .33) !important;
    color: #dff8ff !important;
    box-shadow: inset 0 0 18px rgba(103, 217, 255, .035), 0 8px 18px rgba(0, 0, 0, .18) !important;
}

.mirrith-modern-page .mobile-sidebar .share-button {
    border-color: rgba(149, 88, 255, .42) !important;
    color: #b88cff !important;
    box-shadow: inset 0 0 18px rgba(149, 88, 255, .045), 0 8px 18px rgba(0, 0, 0, .18) !important;
}

.mirrith-modern-page .sidebar-card-stack {
    display: grid !important;
    gap: 14px !important;
    margin: 8px 0 18px !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-card {
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 11px !important;
    min-height: 108px !important;
    overflow: hidden !important;
    border: 1px solid rgba(103, 217, 255, .20) !important;
    border-radius: 16px !important;
    background:
        linear-gradient(135deg, rgba(10, 22, 38, .96), rgba(6, 11, 22, .95)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 12px 26px rgba(0, 0, 0, .22) !important;
    transition: transform .22s ease, border-color .22s ease, background .22s ease !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-card:hover {
    transform: translateX(3px) !important;
    border-color: rgba(103, 217, 255, .40) !important;
    background:
        linear-gradient(135deg, rgba(11, 27, 46, .98), rgba(7, 13, 25, .97)) !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, .28), 0 0 20px rgba(103, 217, 255, .06) !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-card img {
    width: 86px !important;
    height: 86px !important;
    min-width: 86px !important;
    object-fit: cover !important;
    margin: 0 !important;
    border: 1px solid rgba(103, 217, 255, .20) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .30) !important;
}

.mirrith-modern-page .sidebar-card-copy {
    min-width: 0 !important;
    text-align: left !important;
}

.mirrith-modern-page .sidebar-card-eyebrow {
    display: block !important;
    margin-bottom: 5px !important;
    color: rgba(103, 217, 255, .58) !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: .58rem !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

.mirrith-modern-page .mobile-sidebar .sidebar-card h4 {
    margin: 0 !important;
    color: #e5f9ff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.25 !important;
    letter-spacing: .035em !important;
    text-shadow: 0 0 14px rgba(103, 217, 255, .16) !important;
}

/* Widerruf bewusst als letzte Aktion am Ende der Sidebar. */
.mirrith-modern-page .sidebar-bottom-actions {
    margin-top: auto !important;
    padding: 18px 0 4px !important;
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}

.mirrith-modern-page .sidebar-withdraw-link {
    display: flex !important;
    text-decoration: none !important;
    border-color: rgba(232, 95, 103, .42) !important;
    color: #ff9ca3 !important;
    background: linear-gradient(180deg, rgba(48, 14, 20, .38), rgba(18, 7, 12, .72)) !important;
    box-shadow: inset 0 0 18px rgba(232, 95, 103, .035), 0 8px 20px rgba(0, 0, 0, .18) !important;
}

.mirrith-modern-page .sidebar-withdraw-link:hover {
    border-color: rgba(255, 126, 135, .68) !important;
    background: linear-gradient(180deg, rgba(62, 18, 25, .48), rgba(22, 8, 13, .78)) !important;
    color: #ffc0c4 !important;
}

@media (max-width: 520px) {
    .mirrith-modern-page .mobile-sidebar .sidebar-card {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        min-height: 96px !important;
        padding: 10px !important;
    }

    .mirrith-modern-page .mobile-sidebar .sidebar-card img {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
    }
}