/* opus-magnum.css - Seitenspezifische Stile fuer opus-magnum.html
   Teil des Alchemysto-Projekts (AMY_7)
   Eingebunden nach css/style.css
*/

/* ==========================================================================
   OPUS MAGNUM PAGE - FULL-WIDTH BEREICHE (SECTIONS) FOR TILES
   Exakt gleiche Struktur wie .page-irrglaube - Bereiche 01/03 dunkel, 02/04 hell
   ========================================================================== */

/* Remove constraints on the opus explorer section container */
.page-opus-magnum #opus-bereich {
    padding: 0;
    margin: 0;
}

.page-opus-magnum .myth-contents {
    max-width: 100% !important;
    width: 100% !important;
    gap: 0 !important;
}

/* Transform myth-tile into a full-width section/area */
.page-opus-magnum .myth-tile {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.15) !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 0.4s ease, border-color 0.4s ease !important;
}

/* Border on top of first area for a beautiful frame */
.page-opus-magnum .myth-tile:first-of-type {
    border-top: 1px solid rgba(168, 140, 103, 0.15) !important;
}

.page-opus-magnum .myth-tile:hover {
    background: rgba(255, 255, 255, 0.55) !important;
    border-color: rgba(27, 99, 138, 0.3) !important;
}

.page-opus-magnum .myth-tile.open {
    background: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(27, 99, 138, 0.4) !important;
}

/* Centered vertical header structure */
.page-opus-magnum .myth-tile-header {
    width: 100% !important;
    display: block !important;
    padding: 3rem 0 !important;
    text-align: center !important;
    background: none !important;
    border: none !important;
}

/* Inside container to keep it aligned and centered */
.page-opus-magnum .myth-header-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem !important;
    gap: 1.75rem !important;
    text-align: center !important;
}

.page-opus-magnum .myth-title-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
}

/* Heading title adjustment - centered */
.page-opus-magnum .myth-tile-title {
    display: block !important;
    font-size: clamp(1.4rem, 1.3vw + 1.1rem, 2rem) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    font-family: var(--font-serif) !important;
    color: var(--text-primary) !important;
    text-align: center !important;
    margin: 0 !important;
}

/* Number badge adjustment - centered above title */
.page-opus-magnum .tile-num {
    font-family: var(--font-sans) !important;
    font-size: clamp(1rem, 0.4vw + 0.85rem, 1.25rem) !important;
    font-weight: 700 !important;
    color: var(--gold-dark) !important;
    opacity: 0.85 !important;
    letter-spacing: 0.2em !important;
    margin: 0 auto !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Chevron positioning - centered below title */
.page-opus-magnum .myth-tile-chevron {
    margin: 0 auto !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.2, 1), background-color 0.4s ease, color 0.4s ease !important;
}

/* Inner content alignment to site container */
.page-opus-magnum .myth-tile-inner {
    padding: 1.5rem 0 4rem 0 !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .page-opus-magnum #opus-bereich {
        margin: 0;
    }

    .page-opus-magnum .myth-tile-header {
        padding: 2.25rem 0 !important;
    }

    .page-opus-magnum .myth-title-left {
        gap: 0.85rem !important;
    }

    .page-opus-magnum .myth-header-container {
        padding: 0 1.5rem !important;
        gap: 1.25rem !important;
    }

    .page-opus-magnum .myth-tile-inner {
        padding: 1rem 0 3rem 0 !important;
    }
}

/* ==========================================================================
   OPUS MAGNUM BEREICHE 01 und 03 SPECIFIC DARK THEME (DUNKELBLAU und GOLD)
   Exakt gleiche Farben wie bei .page-irrglaube #myth-1, #myth-3, #myth-5
   ========================================================================== */

/* Spezifisches Farbschema fuer die Bereiche 01 und 03 - Edles Dunkelblau mit 90% weissen Schriften */
.page-opus-magnum #opus-1,
.page-opus-magnum #opus-3 {
    position: relative;
    background: #030c1b !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.25) !important;
    z-index: 1;
    overflow: hidden;
    transition: border-color 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Pseudo-Elemente fuer absolut flussige, hardwarebeschleunigte Hintergrund-Transitions */
.page-opus-magnum #opus-1::before,
.page-opus-magnum #opus-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #030c1b 0%, #0a1c36 50%, #030c1b 100%);
    z-index: -1;
    opacity: 1;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-opus-magnum #opus-1::after,
.page-opus-magnum #opus-3::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #06142c 0%, #10284c 50%, #06142c 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-opus-magnum #opus-1:hover::after,
.page-opus-magnum #opus-3:hover::after {
    opacity: 1;
}

/* Im geoeffneten Zustand bleibt das edle Dunkelblau stabil bestehen */
.page-opus-magnum #opus-1.open::after,
.page-opus-magnum #opus-3.open::after {
    opacity: 0 !important;
}

.page-opus-magnum #opus-1.open,
.page-opus-magnum #opus-3.open {
    border-color: rgba(201, 169, 124, 0.4) !important;
}

.page-opus-magnum #opus-1 .myth-tile-title,
.page-opus-magnum #opus-3 .myth-tile-title {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-opus-magnum #opus-1 .myth-paragraph,
.page-opus-magnum #opus-3 .myth-paragraph {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-opus-magnum #opus-1 .table-title,
.page-opus-magnum #opus-3 .table-title {
    color: rgba(255, 255, 255, 0.9) !important;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-opus-magnum #opus-1 .myth-tile-chevron,
.page-opus-magnum #opus-3 .myth-tile-chevron {
    color: var(--gold-light) !important;
    background: rgba(201, 169, 124, 0.1) !important;
}

.page-opus-magnum #opus-1.open .myth-tile-chevron,
.page-opus-magnum #opus-3.open .myth-tile-chevron {
    background: var(--gold-dark) !important;
    color: var(--white) !important;
}

/* Spezifisches Styling fuer die Quote-Callouts in den dunklen Bereichen */
.page-opus-magnum #opus-1 .myth-quote-callout,
.page-opus-magnum #opus-3 .myth-quote-callout {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(168, 140, 103, 0.08) !important;
    transition: color 0.8s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Spezifisches Styling fuer revealed-quote Blockquote in dunklen Bereichen */
.page-opus-magnum #opus-1 .revealed-quote,
.page-opus-magnum #opus-3 .revealed-quote {
    color: rgba(255, 255, 255, 0.9) !important;
    border-left-color: var(--gold-dark) !important;
}

.page-opus-magnum #opus-1 .revealed-quote cite,
.page-opus-magnum #opus-3 .revealed-quote cite {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Paracelsus-Zitat: Montserrat Font */
.revealed-quote {
    font-family: var(--font-montserrat);
    font-weight: 300;
}

.revealed-quote cite {
    font-family: var(--font-montserrat);
    font-weight: 500;
}

/* Cascade Grafik in hellerem Stil fuer den dunklen Hintergrund */
.page-opus-magnum #opus-1 .cascade-graphic {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 16px;
    background: rgba(4, 16, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.page-opus-magnum #opus-1 .cascade-header-title {
    font-family: var(--font-montserrat);
    font-size: clamp(1rem, 3vw + 0.2rem, 1.35rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.3rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.page-opus-magnum #opus-1 .cascade-header-sub,
.page-opus-magnum #opus-1 .cascade-phase-desc,
.page-opus-magnum #opus-1 .cascade-ref-label,
.page-opus-magnum #opus-1 .cascade-row-vol {
    font-family: var(--font-montserrat);
}

.page-opus-magnum #opus-1 .cascade-phase-name--koerper,
.page-opus-magnum #opus-1 .cascade-phase-name--geist,
.page-opus-magnum #opus-1 .cascade-phase-name--seele,
.page-opus-magnum #opus-1 .cascade-ref-tag {
    color: rgba(255, 255, 255, 0.70);
}

.page-opus-magnum #opus-1 .cascade-sum-label {
    display: block;
    font-family: var(--font-montserrat);
    font-size: clamp(0.48rem, 1.3vw + 0.01rem, 0.56rem);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.32);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.page-opus-magnum #opus-1 .cascade-sum-value {
    color: rgba(255, 255, 255, 0.9) !important;
}

.page-opus-magnum #opus-1 .cascade-row-num {
    font-family: var(--font-montserrat);
    font-size: clamp(0.56rem, 1.6vw + 0.02rem, 0.68rem);
    color: rgba(255, 255, 255, 0.28);
    min-width: clamp(1.6rem, 4vw, 2.2rem);
    text-align: right;
    font-weight: 500;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ==========================================================================
   OPUS MAGNUM BEREICH 01 - CASCADE GRAFIK VOLLBREITE AUF MOBILE
   Problem: .container hat padding: 0 2rem, .myth-tile-content hat overflow:hidden.
   Loesung: Container-Padding fuer Bereich 01 auf Mobile aufheben und
   Paragraphen mit eigenem Innen-Abstand versehen. Cascade-Graphic bekommt
   volle Breite ohne Border-Radius und seitliche Borders.
   ========================================================================== */
@media (max-width: 768px) {
    /* Container-Padding aufheben - Grafik laeuft dann randlos */
    .page-opus-magnum #opus-1 .myth-tile-content .container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Texte ueber der Grafik: Innen-Abstand direkt auf die Paragraphen */
    .page-opus-magnum #opus-1 .myth-paragraph {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Cascade-Graphic: volle Breite, keine abgerundeten Ecken, keine seitlichen Borders */
    .page-opus-magnum #opus-1 .cascade-graphic {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 16px;
    background: rgba(4, 16, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

    /* Summary-Box ebenfalls vollbreit */
    .page-opus-magnum #opus-1 .cascade-summary {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .page-opus-magnum #opus-1 .cascade-graphic {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 2rem);
    border-radius: 16px;
    background: rgba(4, 16, 32, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.09);
    margin-top: 2.5rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

    .page-opus-magnum #opus-1 .myth-paragraph {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}
.Value -replace 'font-size: 0\.54rem;', 'font-size: 0.594rem;' 
        letter-spacing: 0.12em;
        max-width: 92%;
    }
}

/* ═══════════════════════════════════════════════════════
   PHYSIK SEITE – VOLLBREITE BÄNDER-SYSTEM
   Edles Design: Gold, Anthrazit, Ivory
   Bereiche laufen von Seitenrand zu Seitenrand
════════════════════════════════════════════════════════ */

/* Umgebende Section: keine Innenabstände, volle Breite */
.physik-baender-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(168, 140, 103, 0.20);
}

/* ─── Jedes Band: volle Seitenbreite, Kachel-Stil deaktiviert ─── */
.physik-band {
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    transition: background 0.5s ease !important;
}

.physik-band:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ─── Band 1: Warm Ivory ─── */
.physik-band--1 {
    background: var(--ivory-2) !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.15) !important;
}

.physik-band--1:hover {
    background: var(--ivory-3) !important;
}

.physik-band--1.open {
    background: var(--ivory-5) !important;
}

/* ─── Band 2: Warmes Anthrazit (Link-Band) ─── */
.physik-band--2 {
    background: linear-gradient(135deg, var(--dark-espresso-3) 0%, var(--dark-walnut-2) 40%, var(--dark-espresso-4) 100%) !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.20) !important;
}

.physik-band--2:hover {
    background: linear-gradient(135deg, var(--dark-walnut-1) 0%, var(--dark-walnut-4) 40%, var(--dark-walnut-3) 100%) !important;
}

.physik-band--2 .physics-title {
    color: var(--gold-light) !important;
}

.physik-band--2 .physics-subtitle {
    color: rgba(247, 244, 239, 0.70) !important;
}

.physik-band--2 .myth-tile-chevron {
    color: var(--gold-light) !important;
    background: rgba(201, 169, 124, 0.12) !important;
}

/* ─── Band 3: Wärmeres Ivory ─── */
.physik-band--3 {
    background: var(--warm-white-5) !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.15) !important;
}

.physik-band--3:hover {
    background: var(--ivory-1) !important;
}

.physik-band--3.open {
    background: var(--bg-base) !important;
}

/* ─── Band 4: Tiefes Anthrazit ─── */
.physik-band--4 {
    background: linear-gradient(135deg, var(--dark-charcoal) 0%, var(--dark-espresso-2) 50%, var(--dark-charcoal) 100%) !important;
    border-bottom: none !important;
}

.physik-band--4:hover {
    background: linear-gradient(135deg, var(--dark-espresso-1) 0%, var(--dark-espresso-4) 50%, var(--dark-espresso-1) 100%) !important;
}

.physik-band--4 .physics-title {
    color: var(--gold-light) !important;
}

.physik-band--4 .physics-subtitle {
    color: rgba(247, 244, 239, 0.70) !important;
}

.physik-band--4 .myth-tile-chevron {
    color: var(--gold-light) !important;
    background: rgba(201, 169, 124, 0.10) !important;
}

.physik-band--4.open .myth-tile-chevron {
    background: var(--gold-light) !important;
    color: var(--dark-charcoal) !important;
}

/* Texte in dunklen Bändern */
.physik-band--2 .myth-paragraph,
.physik-band--4 .myth-paragraph {
    color: rgba(247, 244, 239, 0.80);
}

.physik-band--2 .table-title,
.physik-band--4 .table-title {
    color: var(--gold-light);
}

.physik-band--2 h3,
.physik-band--4 h3 {
    color: var(--ivory-2);
}

/* ─── Header-Zeile der Bänder: zentrierter Text, volle Breite ─── */
.physik-band .myth-tile-header,
.physik-band a.myth-tile-header {
    padding: 4rem 8vw !important;
    justify-content: center !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 1.25rem !important;
    border-bottom: 1px solid rgba(168, 140, 103, 0.10);
    transition: border-color 0.4s ease;
}

.physik-band.open .myth-tile-header {
    border-bottom: 1px solid rgba(168, 140, 103, 0.18);
}

/* physics-header-content: zentriert */
.physik-band .physics-header-content {
    flex: none;
    width: 100%;
    max-width: 820px;
    text-align: center;
}

/* Chevron unter dem Titelblock, ebenfalls zentriert */
.physik-band .myth-tile-header .myth-tile-chevron {
    margin-top: 0.5rem;
}

/* ─── Absolute Zentrierung aller Texte im Band-Header ─── */
.physik-band .physics-title,
.physik-band .hero-title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.physik-band .physics-subtitle,
.physik-band .hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 680px;
}

/* Titelfarben helle Bänder */
.physik-band--1 .physics-title,
.physik-band--3 .physics-title {
    color: var(--dark-espresso-3) !important;
}

.physik-band--1 .physics-subtitle,
.physik-band--3 .physics-subtitle {
    color: var(--warm-stone) !important;
}

/* Chevron helle Bänder */
.physik-band--1 .myth-tile-chevron,
.physik-band--3 .myth-tile-chevron {
    color: var(--gold-dark) !important;
    background: rgba(168, 140, 103, 0.08) !important;
}

.physik-band--1.open .myth-tile-chevron,
.physik-band--3.open .myth-tile-chevron {
    background: var(--gold-dark) !important;
    color: var(--white) !important;
}

/* Goldener Akzentstreifen links – helle Bänder */
.physik-band--1 .myth-tile-header,
.physik-band--3 .myth-tile-header {
    border-left: 3px solid rgba(168, 140, 103, 0);
    transition: border-left-color 0.5s ease, border-bottom 0.4s ease;
}

.physik-band--1.open .myth-tile-header,
.physik-band--3.open .myth-tile-header {
    border-left: 3px solid var(--gold-dark);
}

/* Goldener Akzentstreifen links – dunkle Bänder */
.physik-band--2 .myth-tile-header,
.physik-band--4 .myth-tile-header {
    border-left: 3px solid rgba(201, 169, 124, 0);
    transition: border-left-color 0.5s ease;
}

.physik-band--2.open .myth-tile-header,
.physik-band--4.open .myth-tile-header {
    border-left: 3px solid var(--gold-light);
}

/* ─── Inhaltsbereich der Bänder ─── */
.physik-band .myth-tile-inner {
    padding: 3rem 8vw 4.5rem 8vw !important;
    max-width: none !important;
}

.physik-band .myth-article-body {
    max-width: 860px;
    margin: 0 auto;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {

    .physik-band .myth-tile-header,
    .physik-band a.myth-tile-header {
        padding: 2.5rem 6vw !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .physik-band .physics-title {
        font-size: clamp(1.5rem, 5vw, 2.2rem) !important;
    }

    .physik-band .physics-subtitle {
        font-size: clamp(0.88rem, 2.8vw, 1rem) !important;
    }

    .physik-band .myth-tile-inner {
        padding: 2rem 6vw 3rem 6vw !important;
    }

    .physik-band .myth-tile-chevron {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
}

/* ═══════════════════════════════════════════════════════
   PHYSIK INTRO – Entrance Animation
   Wird von js/physik-intro.js gesteuert.
════════════════════════════════════════════════════════ */

/* ── 1. Preload-Zustand: Bänder vor der Animation unsichtbar ── */
.physik-band--preload {
    opacity: 0;
    transform: translateY(42px);
    /* Keine Transition im preload-Zustand – sofortiger Ausgangspunkt */
    transition: none !important;
}

/* ── 2. Entered-Zustand: fluides Einblenden ── */
.physik-band--entered {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 1.15s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── 3. Video-Banner: zusätzlicher Zoom-Impuls beim Laden ── */
@keyframes physikVideoPulse {
    0% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1.0);
    }
}

.physik-video--intro video {
    animation: physikVideoPulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 4. Respektiere Reduzierten-Bewegung-Modus ── */
@media (prefers-reduced-motion: reduce) {
    .physik-band--preload {
        opacity: 1 !important;
        transform: none !important;
    }

    .physik-band--entered {
        transition: none !important;
    }

    .physik-video--intro video {
        animation: none !important;
    }
}

/* ═══ CUSTOM STYLES FOR ACCORDION SUB-CARDS IN EINSATZ 2 ═══ */
.restart-card-header-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    flex-grow: 1;
    padding-right: 1.5rem;
}

.restart-card-header-vertical .restart-card-title {
    font-size: 1.5rem;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-primary);
}

.restart-card-header-vertical .restart-card-subtitle {
    font-size: 0.95rem;
    font-family: var(--font-sans);
    color: var(--text-secondary);
    font-weight: 300;
    line-height: 1.45;
}

/* Custom styling for "Die Facetten der Reinheit" header */
.facetten-title {
    font-family: var(--font-montserrat) !important;
    font-style: normal !important;
    font-weight: 300 !important;
}