/* =========================================================================
   SynQai.razor.css – Scoped styles for the SynQaiPro product page
   Same dark design system as Home. Prefix: sq-
   ========================================================================= */

/* ---------- Local design tokens ---------- */
.sq {
    --sq-orange:        #FF8C2A;
    --sq-orange-d:      #E07A1A;
    --sq-orange-bright: #FFB366;
    --sq-mint:          #4ADFAF;
    --sq-bg-dark:       #0B0D10;
    --sq-bg-card:       #12141A;
    --sq-text:          #E8E6E1;
    --sq-text-sub:      #9AA0A8;
    --sq-font:          'DM Sans', "Inter", system-ui, sans-serif;
    --sq-mono:          'JetBrains Mono', ui-monospace, Consolas, monospace;

    background: var(--sq-bg-dark);
    color: var(--sq-text);
    font-family: var(--sq-font);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Hero ---------- */
.sq-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 2rem 3rem;
    text-align: center;
}

.sq-hero__inner {
    max-width: 900px;
    margin: 0 auto;
}

.sq-tagline {
    font-family: var(--sq-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sq-text-sub);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.sq-hero__title {
    margin: 0 0 1.5rem;
}

.sq-hero__logo {
    height: 4rem;
    width: auto;
}

.sq-hero__sub {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.85;
    color: var(--sq-text-sub);
}

/* ---------- Section frame ---------- */
.sq-section {
    padding: 5rem 2rem;
    scroll-margin-top: 5rem;
}

.sq {
    scroll-behavior: smooth;
}

.sq-container {
    max-width: 1080px;
    margin: 0 auto;
}

.sq-section__label {
    font-family: var(--sq-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sq-orange);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    text-align: center;
}

.sq-section__label--muted {
    color: var(--sq-text-sub);
}

.sq-section__title {
    font-family: var(--sq-font);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 200;
    letter-spacing: -0.3px;
    line-height: 1.3;
    color: var(--sq-text);
    margin: 0 0 1.5rem;
    text-align: center;
}

.sq-section__title strong {
    font-weight: 700;
    color: var(--sq-orange);
}

/* Erste Sektion = visueller Hero-Titel: größer + Gradient */
.sq-hotkeys-section .sq-section__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: -1px;
}

.sq-hotkeys-section .sq-section__title strong {
    background: linear-gradient(135deg, var(--sq-orange), var(--sq-orange-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: unset;
}

.sq-lead {
    max-width: 720px;
    color: var(--sq-text-sub);
    font-size: 1.05rem;
    margin: 0 auto 2rem;
    text-align: center;
}

/* ---------- Alternating section backgrounds ---------- */
.sq-hotkeys-section,
.sq-analyse-section,
.sq-organizer-section,
.sq-shredder-section,
.sq-logging-section,
.sq-galaxy-section {
    background: var(--sq-bg-card);
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Galaxien-Outro: Abschlusszeile unter den Karten, ohne Folgeabstand. */
.sq-galaxy__outro {
    margin: 2.5rem auto 0;
}

.sq-intro-section,
.sq-surface-section,
.sq-sync-section,
.sq-imgcompare-section,
.sq-recovery-section {
    background: var(--sq-bg-dark);
}

.sq-cta-section {
    background: var(--sq-bg-card);
    border-top: 1px solid rgba(255,255,255,0.06);
    text-align: center;
}

/* ---------- Intro / Story section (oberste Sektion, narrativer Einstieg) ---------- */
.sq-intro-section {
    position: relative;
    overflow: hidden;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.sq-intro-section::before {
    content: '';
    position: absolute;
    top: -25%;
    left: 50%;
    width: 900px;
    height: 900px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255,140,42,0.09), rgba(255,140,42,0) 60%);
    pointer-events: none;
    z-index: 0;
}

.sq-intro-section .sq-container {
    position: relative;
    z-index: 1;
}

.sq-intro-section .sq-section__title {
    font-size: clamp(2rem, 5vw, 3.6rem);
    letter-spacing: -1px;
    margin: 0 0 0.4rem;
}

.sq-intro-section .sq-section__title strong {
    background: linear-gradient(135deg, var(--sq-orange), var(--sq-orange-bright));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: unset;
}

.sq-intro__subtitle {
    text-align: center;
    color: var(--sq-text-sub);
    font-family: var(--sq-mono);
    font-size: 0.95rem;
    letter-spacing: 1px;
    margin: 0 auto 2.5rem;
}

.sq-intro__lead {
    max-width: 760px;
    margin: 0 auto 1.4rem;
    color: var(--sq-text);
    font-size: 1.05rem;
    line-height: 1.85;
    text-align: center;
}

.sq-intro__lead--muted {
    color: var(--sq-text-sub);
}

.sq-intro__highlight {
    max-width: 820px;
    margin: 4rem auto 1.6rem;
    padding: 2rem 2.2rem;
    background: linear-gradient(135deg, rgba(74,223,175,0.08), rgba(74,223,175,0.02));
    border: 1px solid rgba(74,223,175,0.32);
    border-left: 3px solid var(--sq-mint);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}

.sq-intro__highlight h3 {
    font-family: var(--sq-font);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--sq-mint);
    margin: 0 0 1rem;
    letter-spacing: -0.2px;
}

.sq-intro__highlight p {
    margin: 0;
    color: var(--sq-text);
    font-size: 1rem;
    line-height: 1.8;
}

.sq-intro__outro {
    max-width: 760px;
    margin: 1.4rem auto 0;
    color: var(--sq-text-sub);
    font-size: 0.98rem;
    line-height: 1.75;
    text-align: center;
}

.sq-intro__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2.2rem;
}

/* ----- Intro: Hero-Screenshot ----- */
.sq-intro__hero-img {
    margin: 2.5rem auto 0;
    max-width: 820px;
    padding: 0;
    text-align: center;
    cursor: zoom-in;
    position: relative;
}

.sq-intro__hero-img img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55),
                0 0 0 1px rgba(255,140,42,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: block;
}

.sq-intro__hero-img:hover img {
    transform: translateY(-3px);
    /* Vereinheitlichter Hover-Rahmen: 1px @ alpha 0.5 (gleiche Linienstaerke
       wie .sq-diff-preview / .sq-theme-screenshot / .sq-hero__screenshot).
       Bewusst KEIN zusaetzlicher 0 0 0 1px-Schatten-Ring -- der ergaebe
       optisch eine doppelte Linie. */
    border-color: rgba(255,140,42,0.5);
    box-shadow: 0 28px 80px rgba(0,0,0,0.65);
}

@media (max-width: 560px) {
    .sq-intro-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    .sq-intro__highlight {
        padding: 1.5rem 1.4rem;
    }

    .sq-intro__hero-img {
        margin-top: 1.8rem;
    }

    .sq-intro__hero-img img {
        border-radius: 10px;
    }

    .sq-intro__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .sq-intro__buttons .sq-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- Screenshots ---------- */
.sq-hero__screenshot {
    margin: 2.5rem 0;
    text-align: center;
}

.sq-hero__screenshot img {
    max-width: 100%;
    width: 720px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    /* Alle Screenshots sind per Klick vergroesserbar -- Cursor + Hover-Hint
       signalisieren das visuell. Transform/Border bleiben dezent, damit das
       Bild im Layout nicht "huepft". */
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    border: 1px solid transparent;
}

.sq-hero__screenshot img:hover {
    transform: translateY(-2px);
    /* Vereinheitlichter Hover-Rahmen (siehe .sq-intro__hero-img:hover img). */
    border-color: rgba(255,140,42,0.5);
    box-shadow: 0 22px 70px rgba(0,0,0,0.6);
}

.sq-hero__screenshot--sm {
    margin: 1.5rem 0;
}

.sq-hero__screenshot--sm img {
    width: 560px;
}

.sq-screenshot-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.sq-screenshot-duo .sq-hero__screenshot {
    margin: 0;
}

.sq-screenshot-duo .sq-hero__screenshot img {
    width: 100%;
}

/* Zwei Screenshots mit ungleichem Seitenverhaeltnis in einen gemeinsamen
   Rahmen zwingen: gleiche Breite UND gleiche Hoehe, buendig unter den
   Karten darueber (die dasselbe 1fr-1fr-Raster mit gleichem Abstand
   nutzen).

   Beide Spalten bleiben also gleich breit; damit die Bilder trotzdem gleich
   hoch enden, bekommen sie ein gemeinsames Seitenverhaeltnis aufgezwungen.
   Das flachere Bild behaelt seine Proportionen, das hoehere wird in die
   Breite gezogen — object-fit: fill verzerrt bewusst, statt zu beschneiden.
   Ein sichtbarer Verlust entsteht dabei nicht, weil es um Programmfenster
   geht und nicht um Fotos; ein paar Prozent Streckung fallen dort nicht auf.

   Den Zielwert setzt die Seite als --duo-format (Breite geteilt durch Hoehe
   des flacheren Bildes). Er gehoert dorthin, weil nur die Seite weiss,
   welche Bilder sie zeigt — deutsche und englische Aufnahmen unterscheiden
   sich um einige Pixel. */
.sq-screenshot-duo--gleich-hoch .sq-hero__screenshot img {
    aspect-ratio: var(--duo-format);
    height: auto;
    object-fit: fill;
}

/* ---------- Function Tags Grid ---------- */
.sq-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.sq-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: rgba(255,140,42,0.06);
    border: 1px solid rgba(255,140,42,0.4);
    font-family: var(--sq-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--sq-text);
    transition: all 0.25s ease;
    cursor: default;
}

.sq-tag:hover {
    background: rgba(255,140,42,0.12);
    border-color: rgba(255,140,42,0.65);
    background: rgba(74,223,175,0.06);
    border-color: rgba(74,223,175,0.4);
}

.sq-tag--mint:hover {
    background: rgba(74,223,175,0.12);
    border-color: rgba(74,223,175,0.65);
}

.sq-tag__icon {
    font-size: 0.9rem;
    line-height: 1;
}

/* ---------- Subsections ---------- */
.sq-subsection {
    margin-top: 3rem;
}

.sq-subsection__title {
    font-family: var(--sq-font);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--sq-text);
    margin: 0 0 0.7rem;
}

.sq-subsection__text {
    color: var(--sq-text-sub);
    font-size: 0.98rem;
    line-height: 1.75;
    margin: 0 0 1rem;
    max-width: 720px;
}

/* Freistehende Abschnitte folgen der Mittelachse der Sektion (wie
   .sq-section__title und .sq-lead). Karten sind ausgenommen: Sie stehen
   nebeneinander im Raster und brauchen die Mittelachse nicht.

   Zentriert wird nur die Ueberschrift; der Textblock sitzt zwar mittig, sein
   Satz bleibt aber linksbuendig — siehe .sq-details__body > p. */
.sq-subsection:not(.sq-subsection--card) .sq-subsection__title {
    text-align: center;
}

.sq-subsection:not(.sq-subsection--card) .sq-subsection__text {
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Oberfläche-Karten (wie Home-Stats) ---------- */
.sq-surface-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.sq-subsection--card {
    margin-top: 0;
    padding: 1.8rem;
    background: #1a1d24;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.3);
}

.sq-subsection--card .sq-subsection__title {
    color: var(--sq-orange);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.sq-subsection--card .sq-subsection__text {
    font-size: 0.9rem;
    margin: 0 0 0.8rem;
    max-width: 100%;
}


@media (max-width: 640px) {
    .sq-surface-cards {
        grid-template-columns: 1fr;
    }
}

/* ---------- Collapsible details ---------- */
.sq-details {
    margin-top: 1rem;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.sq-surface-cards + .sq-details {
    margin-top: 2rem;
}

.sq-details:hover {
    border-color: rgba(255,140,42,0.4);
}

.sq-details[open] {
    border-color: rgba(255,140,42,0.6);
}

.sq-details__summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 1.2rem;
    font-family: var(--sq-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--sq-text);
    cursor: pointer;
    background: rgba(255,255,255,0.02);
    list-style: none;
    transition: background 0.2s;
}

.sq-details__summary::-webkit-details-marker {
    display: none;
}

.sq-details__summary::after {
    content: '▸';
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--sq-orange);
    transition: transform 0.25s;
}

.sq-details[open] > .sq-details__summary::after {
    transform: rotate(90deg);
}

.sq-details__summary:hover {
    background: rgba(255,140,42,0.06);
}

.sq-details__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(255,140,42,0.1);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sq-details__body {
    /* Symmetrisches Polster statt Einzug unter dem Summary-Symbol: Der Inhalt
       steht jetzt auf der Mittelachse, ein linker Einzug wuerde ihn kippen. */
    padding: 0.5rem 1.2rem 1.2rem;
    color: var(--sq-text-sub);
    font-size: 0.92rem;
    line-height: 1.75;
}



/* Der Textblock sitzt mittig im Rahmen und in derselben Zeilenbreite wie der
   Einleitungstext darueber; der Satz darin bleibt linksbuendig. Zentrierter
   Satz flattert auf beiden Seiten und laesst das Auge bei jeder Zeile den
   Anfang neu suchen — bei Absaetzen dieser Laenge unruhig. */
.sq-details__body p {
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- Diff-Preview Snippets ---------- */
.sq-diff-previews {
    display: flex;
    gap: 1rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
    overflow: visible;
    /* Vorschaubilder mittig statt am linken Rand — gilt auch fuer die Reihen
       in den Klappbereichen. */
    justify-content: center;
}

.sq-diff-preview {
    flex: 1 1 220px;
    max-width: 320px;
    margin: 0;
    position: relative;
    z-index: 0;
    /* Als Spalte gesetzt, damit die Beschriftung immer am unteren Rand sitzt.
       Die Vorschauen einer Reihe sind durch das Flex-Standardverhalten
       (stretch) gleich hoch; unterschiedlich hohe Bilder wuerden ihre
       Beschriftungen sonst auf verschiedenen Hoehen stehen lassen. */
    display: flex;
    flex-direction: column;
}

.sq-diff-preview img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 4px 20px rgba(0,0,0,0.45);
    display: block;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: zoom-in;
    /* Der freie Platz verteilt sich gleichmaessig ueber und unter das Bild:
       Es steht mittig im Raum oberhalb der Beschriftung, die dadurch bei
       allen Vorschauen der Reihe auf einer Linie liegt. */
    margin: auto 0;
}

.sq-diff-preview:hover img {
    border-color: rgba(255,140,42,0.5);
    box-shadow: 0 6px 28px rgba(0,0,0,0.6);
}

.sq-diff-preview figcaption {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--sq-mint);
    text-align: center;
    font-family: var(--sq-mono);
    letter-spacing: 1px;
}

/* Reihen, die dasselbe Fenster in verschiedenen Zustaenden zeigen: Gleiche
   Breite laesst unterschiedliche Seitenverhaeltnisse verschieden hoch werden,
   und die flachere Aufnahme wirkt dann kleiner als ihre Nachbarn. Hier gibt
   stattdessen die HOEHE das Mass vor, die Breite folgt dem Seitenverhaeltnis
   — alle Aufnahmen bekommen so dasselbe optische Gewicht. */
.sq-diff-previews--uniform .sq-diff-preview {
    flex: 0 1 auto;
    max-width: none;
}

.sq-diff-previews--uniform .sq-diff-preview img {
    height: 175px;
    width: auto;
    max-width: 100%;
}

/* Sobald der Platz fuer eine Reihe knapp wird, gilt wieder das normale
   Verhalten: gleiche Breite, umbrechend, Bildunterschriften in Flucht.
   Eine feste Hoehe wuerde hier zusammen mit max-width das Bild stauchen. */
@media (max-width: 1024px) {
    .sq-diff-previews--uniform .sq-diff-preview {
        flex: 1 1 220px;
        max-width: 320px;
    }

    .sq-diff-previews--uniform .sq-diff-preview img {
        height: auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .sq-diff-previews {
        flex-direction: column;
        gap: 0.75rem;
        /* In der Spalte richtet align-items waagerecht aus. Das
           justify-content: center der Grundregel steuert hier die Hoehe und
           liefe ins Leere — ohne diese Zeile stehen die Bilder am linken Rand. */
        align-items: center;
    }

    /* Der zweite Selektor hebt die 320-px-Grenze der --uniform-Reihe auf.
       Sie ist spezifischer als .sq-diff-preview und wuerde sonst auch hier
       gelten, sodass die Aufnahmen die schmale Spalte nicht ausnutzen. */
    .sq-diff-preview,
    .sq-diff-previews--uniform .sq-diff-preview {
        max-width: 100%;
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ---------- Detail list ---------- */
/* Dieselbe Zeilenbreite wie Fliesstext (.sq-lead, .sq-subsection__text,
   Absaetze im Klappbereich) und ueber auto-Raender mittig gesetzt. Damit
   stehen Absaetze und Aufzaehlungen ueberall in derselben Flucht — innerhalb
   der Klappbereiche wie ausserhalb.

   Bewusst ueber eine feste Breite statt display:inline-block: Ein
   Inline-Block ist so breit wie sein laengster Eintrag; kurze Listen ruecken
   dann weit in die Mitte, lange bleiben am linken Rand. Zwei solche Listen
   untereinander sehen aus wie ein Fehler. */
.sq-detail-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 720px;
}

.sq-detail-list li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.4rem;
    color: var(--sq-text-sub);
    font-size: 0.9rem;
    line-height: 1.65;
}

.sq-detail-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--sq-orange);
    font-weight: 700;
    font-size: 1rem;
}

.sq-detail-list li:has(strong) {
    padding-left: 0;
    margin-top: 1rem;
    color: var(--sq-text);
}

.sq-detail-list li:has(strong)::before {
    content: '';
}

.sq-detail-list li strong {
    color: var(--sq-orange);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: var(--sq-mono);
}

/* ---------- Buttons ---------- */
.sq-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border-radius: 8px;
    font-family: var(--sq-font);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.sq-btn--primary {
    background: var(--sq-orange);
    color: #0B0D10;
}

.sq-btn--primary:hover {
    background: #FFA040;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255,140,42,0.25);
    text-decoration: none;
    color: #0B0D10;
}

.sq-btn--ghost {
    background: transparent;
    color: var(--sq-text);
    border: 1px solid rgba(255,255,255,0.15);
}

.sq-btn--ghost:hover {
    border-color: var(--sq-orange);
    color: var(--sq-orange);
    text-decoration: none;
}

/* ---------- Navigation Pills (Sektionen) – kompakt, horizontal, wrap-fähig ---------- */
.sq-navtags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.sq-navtag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: var(--sq-bg-card, #12141A);
    font-family: var(--sq-font);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--sq-text-sub, #9AA0A8);
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
}

a.sq-navtag:hover {
    color: var(--sq-text, #E8E6E1);
    border-color: rgba(255, 140, 42, 0.6);
    transform: translateY(-1px);
    text-decoration: none;
}

.sq-navtag--soon {
    opacity: 0.45;
    cursor: default;
    border-style: dashed;
}

.sq-navtag__icon {
    font-size: 0.78rem;
    line-height: 1;
}

.sq-navtag__label {
    line-height: 1;
}

.sq-navtag__arrow {
    font-size: 0.7rem;
    opacity: 0.55;
    transition: transform 0.2s;
}

a.sq-navtag:hover .sq-navtag__arrow {
    transform: translateY(2px);
    opacity: 1;
    color: var(--sq-orange, #FF8C2A);
}

.sq-navtag__badge {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.07);
    border-radius: 6px;
    padding: 0.05rem 0.35rem;
    color: var(--sq-text-sub);
}

/* ---------- Theme Switcher ---------- */
.sq-theme-switcher {
    display: inline-flex;
    background: #1a1c23;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 3px;
    gap: 3px;
    margin: 1.5rem 0 0;
}

.sq-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--sq-text-sub);
    font-family: var(--sq-font);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.sq-theme-btn--active {
    background: var(--sq-orange);
    color: #fff;
    box-shadow: 0 2px 12px rgba(255,140,42,0.4);
}

.sq-theme-btn:not(.sq-theme-btn--active):hover {
    background: rgba(255,255,255,0.06);
    color: var(--sq-text);
}

.sq-theme-btn__icon {
    font-size: 0.9rem;
    line-height: 1;
    display: inline-block;
}

.sq-theme-screenshot img {
    width: 820px;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.5);
    border: 1px solid transparent;
    transition: opacity 0.3s ease, border-color 0.2s ease;
    cursor: zoom-in;
}

.sq-theme-screenshot img:hover {
    /* Vereinheitlichter Hover-Rahmen (siehe .sq-intro__hero-img:hover img). */
    border-color: rgba(255,140,42,0.5);
}

.sq-theme-screenshot.is-loading img {
    cursor: progress;
}

.sq-theme-screenshot {
    margin-bottom: 4rem;
    position: relative;
}

/* Lade-Overlay fuer das Theme/Sprach-Screenshot. Wird nur nach einem
   interaktiven Wechsel sichtbar (siehe SynQaiContentDe/En.razor) und
   verschwindet, sobald das neue Bild geladen wurde. */
.sq-theme-screenshot.is-loading img {
    opacity: 0.35;
    filter: blur(2px);
}

.sq-img-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--sq-mint, #00d4a0);
    animation: sq-img-spin 0.9s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes sq-img-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sq-img-spinner { animation-duration: 1.8s; }
}

/* Bundles theme + language switchers in a column whose width matches the
   centered screenshot (720px / 100%), so the switchers' left edge lines up
   with the screenshot's left edge while the screenshot itself stays
   horizontally centered in the section. */
.sq-theme-controls {
    width: 820px;
    max-width: 100%;
    margin: 1.5rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
}

    .sq-theme-controls .sq-theme-switcher,
    .sq-theme-controls .sq-lang-switcher {
        margin: 0;
    }

/* ---------- Screenshot Language Switcher (flags only) ---------- */
.sq-lang-switcher {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    background: #1a1c23;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 50px;
    padding: 3px;
    margin: 0.6rem 0 0;
}

.sq-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.42rem;
    border: 0;
    background: transparent;
    border-radius: 999px;
    cursor: pointer;
    line-height: 0;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}

    .sq-lang-btn:hover {
        background: rgba(255,255,255,0.08);
    }

    .sq-lang-btn:focus-visible {
        outline: 2px solid var(--sq-orange);
        outline-offset: 2px;
    }

    .sq-lang-btn--active {
        background: var(--sq-orange);
        box-shadow: 0 2px 12px rgba(255,140,42,0.4);
    }

.sq-lang-btn__flag {
    width: 20px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
    display: block;
    flex: none;
}

/* ---------- Responsive: Navtags & Switcher ---------- */
@media (max-width: 600px) {
    .sq-navtags {
        gap: 0.3rem;
    }

    .sq-theme-switcher {
        width: 100%;
        justify-content: center;
    }

    .sq-theme-btn {
        flex: 1;
        justify-content: center;
        padding: 0.3rem 0.6rem;
    }

    .sq-theme-screenshot img {
        width: 100%;
    }

    .sq-lang-switcher {
        width: 100%;
        justify-content: center;
    }

    .sq-lang-btn {
        padding: 0.35rem 0.45rem;
    }

    .sq-lang-btn__flag {
        width: 20px;
        height: 13px;
    }
}

/* ---------- CTA section ---------- */
.sq-cta {
    text-align: center;
}

.sq-cta .sq-section__title,
.sq-cta .sq-lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sq-cta__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 560px) {
    .sq-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .sq-cta__buttons .sq-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
    .sq-screenshot-duo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .sq-section {
        padding: 3.5rem 1.5rem;
    }

    .sq-hero {
        padding: 3.5rem 1.5rem 2rem;
    }

    .sq-tags {
        gap: 0.5rem;
    }
}

@media (max-width: 560px) {
    .sq-tags {
        gap: 0.4rem;
    }

    .sq-tag {
        font-size: 0.8rem;
        padding: 0.45rem 0.9rem;
    }

    .sq-section__title br {
        display: none;
    }

    .sq-hero__screenshot--sm img {
        width: 100%;
    }

    /* Hinweis: Frueher hatte .sq-subsection hier ein padding-left: 1rem.
       Das hat aber dazu gefuehrt, dass die in einer .sq-subsection
       verschachtelten <details>-Buttons (z.B. Schnell-Modus, SpotProbe,
       SHA-256) sichtbar schmaler/eingerueckt wurden als der parallele
       Top-Level-Button "Technische Details", der direkt unter
       .sq-container haengt. Beide Ebenen sollen aber buendig sein. */
}

/* ---------- Lightbox ---------- */
.sq-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: sq-lb-in 0.22s ease;
}

@keyframes sq-lb-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sq-lightbox__inner {
    position: relative;
    cursor: default;
    /* Mindestmasse, damit waehrend der Bildladung (img opacity:0, intrinsische
       Groesse 0x0) der absolut positionierte Close-Button nicht in die Mitte
       auf den Spinner rutscht. */
    min-width: 280px;
    min-height: 180px;
    animation: sq-lb-scale 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes sq-lb-scale {
    from { transform: scale(0.82); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.sq-lightbox__inner img {
    max-width: 72vw;
    max-height: 72vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 80px rgba(0,0,0,0.8),
                0 0 0 1px rgba(255,255,255,0.08);
    display: block;
}

/* Lightbox-Lade-Spinner: liegt unter dem Bild und wird durch das geladene
   (opake) Bild visuell ueberdeckt. Toggling der is-loaded-Klasse erfolgt
   rein per nativem DOM-onload-Event - KEIN SignalR-Roundtrip. */
.sq-lightbox__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--sq-mint, #00d4a0);
    animation: sq-img-spin 0.9s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.sq-lightbox__img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.sq-lightbox__img.is-loaded {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .sq-lightbox__spinner { animation-duration: 1.8s; }
    .sq-lightbox__img { transition: none; }
}

.sq-lightbox__close {
    position: absolute;
    top: -1.1rem;
    right: -1.1rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
    background: #252830;
    color: #E8E6E1;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}

.sq-lightbox__close:hover {
    background: #FF8C2A;
    color: #fff;
    border-color: #FF8C2A;
    transform: scale(1.12);
}