/* =========================================================================
   musea.css – Farb-Override für die MuSéa-Produktseite.

   MuSéa teilt sich das komplette Struktur- und Layout-System mit SynQai
   (siehe css/synqai.css, Klassen-Präfix sq-). Damit kein redundanter Code
   entsteht, wird hier KEINE Struktur dupliziert. Stattdessen wird die
   MuSéa-Seite zusätzlich mit der Scope-Klasse .ms ausgezeichnet
   (<div class="sq ms">) und dieses Stylesheet überschreibt ausschließlich
   die orangene Akzentfarbe von SynQai durch das Violett aus dem
   MuSéa-Logo (img/Musea_tr.webp).

   WICHTIG: Muss NACH css/synqai.css geladen werden (siehe App.razor),
   damit die Token-Overrides bei gleicher Spezifität greifen.
   ========================================================================= */

/* ---------- Token-Override: orange → violett ----------
   Alle .sq-Regeln, die var(--sq-orange*) verwenden, werden dadurch
   automatisch violett. Der sekundäre Mint-Akzent bleibt unverändert. */
.ms {
    --sq-orange:        #8B7BE8; /* Hauptakzent – Lavendel/Violett aus dem Logo */
    --sq-orange-d:      #6F5FD6; /* dunklere Variante */
    --sq-orange-bright: #B6A9F7; /* hellere Variante für Verläufe */
}

/* ---------- Hardcodierte Orange-Werte (rgba 255,140,42 / Hex) ----------
   In synqai.css sind einige Glow-, Rahmen- und Schatten-Töne als feste
   rgba/Hex-Werte hinterlegt (nicht über die Variable). Diese werden hier
   im .ms-Scope auf das Violett-Pendant (rgba 139,123,232) umgestellt. */

/* Intro: radialer Glow hinter dem Story-Block */
.ms .sq-intro-section::before {
    background: radial-gradient(circle, rgba(139,123,232,0.10), rgba(139,123,232,0) 60%);
}

/* Intro: Hero-Bild Schatten-Ring + Hover-Rahmen */
.ms .sq-intro__hero-img img {
    box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                0 0 0 1px rgba(139,123,232,0.06);
}

.ms .sq-intro__hero-img:hover img {
    border-color: rgba(139,123,232,0.5);
    box-shadow: 0 28px 80px rgba(0,0,0,0.65);
}

/* Screenshots: Hover-Rahmen */
.ms .sq-hero__screenshot img:hover,
.ms .sq-theme-screenshot img:hover,
.ms .sq-diff-preview:hover img {
    border-color: rgba(139,123,232,0.5);
}

/* Funktions-Tags */
.ms .sq-tag {
    background: rgba(139,123,232,0.06);
    border-color: rgba(139,123,232,0.4);
}

/* Buttons: Primary-Hover (Hex-Werte) */
.ms .sq-btn--primary:hover {
    background: #9C8DEF;
    box-shadow: 0 8px 30px rgba(139,123,232,0.25);
}

/* Navigations-Pills: Hover-Rahmen */
.ms a.sq-navtag:hover {
    border-color: rgba(139,123,232,0.6);
}

/* Collapsible-Details */
.ms .sq-details:hover {
    border-color: rgba(139,123,232,0.4);
}

.ms .sq-details[open] {
    border-color: rgba(139,123,232,0.6);
}

.ms .sq-details__summary:hover {
    background: rgba(139,123,232,0.06);
}

.ms .sq-details__icon {
    background: rgba(139,123,232,0.1);
}

/* Theme-/Sprach-Switcher Aktiv-Glow */
.ms .sq-theme-btn--active,
.ms .sq-lang-btn--active {
    box-shadow: 0 2px 12px rgba(139,123,232,0.4);
}

/* Lightbox-Close Hover (Hex) */
.ms .sq-lightbox__close:hover {
    background: #8B7BE8;
    border-color: #8B7BE8;
}

/* ---------- Bild-Platzhalter ----------
   Provisorische, themenkonforme Box anstelle eines Screenshots. Sobald die
   echten Bilder vorliegen, wird der <div class="ms-shot-ph"> einfach durch
   das in SynQai übliche <img> im selben <div class="sq-hero__screenshot">
   ersetzt (siehe TODO-Kommentare in MuseaContentDe/En.razor). */
.ms .ms-shot-ph {
    width: 820px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border-radius: 12px;
    border: 1px dashed rgba(139,123,232,0.55);
    background: linear-gradient(135deg, rgba(139,123,232,0.08), rgba(139,123,232,0.02));
    color: var(--sq-text-sub);
    text-align: center;
    padding: 1.5rem;
}

.ms .ms-shot-ph__icon {
    font-size: 2.4rem;
    line-height: 1;
    opacity: 0.85;
}

.ms .ms-shot-ph__label {
    font-family: var(--sq-mono);
    font-size: 0.82rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--sq-orange);
}

.ms .ms-shot-ph__hint {
    font-family: var(--sq-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    opacity: 0.55;
}

/* ---------- Sprach-Leiste (rein informative Fahnen-Icons unter dem Teaser-Bild) ----------
   Bewusst NICHT interaktiv: kein Pointer-Cursor, kein Hover-Effekt — sie zeigt
   nur, in welchen Sprachen die Software verfügbar ist. */
.ms .ms-langbar-wrap {
    margin: 1.4rem auto 0;
    text-align: center;
}

.ms .ms-langbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.ms .ms-langbar__item {
    display: inline-flex;
    line-height: 0;
    cursor: default;
}

.ms .ms-langbar__flag {
    width: 26px;
    height: 17px;
    border-radius: 2px;
    opacity: 0.9;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
    display: block;
    flex: none;
}

.ms .ms-langbar__note {
    margin: 0.7rem 0 0;
    font-family: var(--sq-mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--sq-text-sub);
}