/* =========================================================
   system.html — Düsen-Automatisationssystem (page-scoped)
   Accent: Elektro-Cyan (--color-accent-cyan), used sparingly.
   Reuses tokens from design-system.css + patterns from style.css.
   ========================================================= */

/* ---------- Seiten-Canvas: EIN durchgehender Blauverlauf ----------
   Der Verlauf liegt genau einmal auf <main class="sys-page"> und laeuft
   ununterbrochen vom Hero bis zum Abschluss-CTA. Jede Sektion, die einen
   eigenen Hintergrund setzt, erzeugt an ihrer Grenze eine sichtbare Kante —
   deshalb sind sie hier alle transparent. Kein background-attachment: fixed
   (ruckelt auf Mobile).

   Konvention fuer Flaechen auf diesem Blau:
     Kartenflaeche   rgba(255,255,255,0.05)  ·  Hover rgba(255,255,255,0.09)
     Rahmen          rgba(255,255,255,0.14)  ·  aktiv --color-accent-cyan
     Ueberschriften  var(--color-text-light)
     Fliesstext      rgba(255,255,255,0.75)
   --color-surface / --color-background / --color-text-main haben auf dieser
   Seite nichts zu suchen. Kontraste sind gegen BEIDE Extremwerte des Verlaufs
   geprueft (#0a1c3d und #143977); der helle Endwert #143977 ist der kritische:
   rgba(255,255,255,0.75) auf der Kartenflaeche = 6.2:1, auf Hover = 5.7:1. */
.sys-page {
    background: var(--color-primary);
    background-image: var(--gradient-navy);
    color: rgba(255, 255, 255, 0.75);
}

.sys-page .section,
.sys-hero,
.sys-config,
.sys-options,
.sys-closing {
    background: transparent;
}

/* ---------- Shared page primitives ---------- */
.sys-eyebrow {
    display: inline-block;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent-cyan);
    margin-bottom: var(--spacing-sm);
}

.sys-section-header {
    max-width: 720px;
    margin-bottom: var(--spacing-xl);
}

/* Konfigurator-Header: nur Eyebrow + H2 (kein Lead-Absatz), H2 soll einzeilig
   stehen. Bei 48px braucht der Titel ~1056px; Container-Innenbreite liegt
   bei 1296px. Hebt die globale 720px-Begrenzung auf. */
.sys-config .sys-section-header {
    max-width: none;
}

.sys-section-title {
    font-size: var(--font-size-h2);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-light);
}

.sys-lead {
    margin-top: var(--spacing-sm);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.75);
}

/* ===============================================================
   1. HERO — full-height dark navy, flagship -LR image + scan-line
   =============================================================== */
.sys-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Kein eigener Hintergrund — der Verlauf kommt von .sys-page. */
    color: var(--color-text-light);
    padding-top: 120px;
    padding-bottom: var(--spacing-xl);
}

.sys-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    width: 100%;
}

.sys-hero-eyebrow {
    color: var(--color-accent-cyan);
}

.sys-hero-copy {
    container-type: inline-size;
}

.sys-hero-title {
    /* Fallback fuer Browser ohne Container-Queries; bei 1440px -> 51.84px ~ cqw-Wert */
    font-size: clamp(2.25rem, 3.6vw, 3.25rem);
    /* Skaliert mit der Textspalte -> umbrechen auf mehrere Zeilen */
    font-size: clamp(2.25rem, 8.6cqw, 4rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.sys-hero-lead {
    max-width: 560px;
    margin: 0 0 var(--spacing-lg);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-light);
    opacity: 0.9;
}

.sys-hero-cta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
    max-width: 520px;
}

.sys-hero-cta .btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Hero image slot + scan-line overlay. Glasrahmen: der Verlauf der .sys-page
   scheint durch, backdrop-filter legt Blur + leichte Saettigung darunter.
   Keine aspect-ratio noetig — das <img> traegt width/height (1280x720),
   daraus leitet der Browser die Hoehe schon vor dem Laden ab. */
.sys-hero-media {
    position: relative;
    padding: var(--spacing-md);
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    border: 1px solid rgba(46, 196, 255, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 24px 48px rgba(10, 28, 61, 0.45);
    overflow: hidden;
}

.sys-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: saturate(0.9) contrast(1.05);
}

/* Scan-line that sweeps once on load */
.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 2;
    background: linear-gradient(90deg, transparent, var(--color-accent-cyan), transparent);
    box-shadow: 0 0 12px 2px rgba(46, 196, 255, 0.6);
    opacity: 0;
    pointer-events: none;
}

.sys-hero-media.is-scanning .scanline {
    animation: scanline-sweep 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s 1 forwards;
}

@keyframes scanline-sweep {
    0% { top: 0; opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* ===============================================================
   4. TOOL-KONFIGURATOR (Herzstück)
   =============================================================== */
.sys-config {
    padding-bottom: var(--spacing-lg);
}

/* Variant button row */
.sys-config-tabs {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-lg);
}

.sys-config-tab {
    position: relative;
    padding: 14px 28px;
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.sys-config-tab:hover {
    color: var(--color-text-light);
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.09);
}

.sys-config-tab.is-active {
    color: var(--color-text-light);
    border-color: var(--color-accent-cyan);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 -3px 0 var(--color-accent-cyan);
}

/* Factsheet download — sits in the tab row, not a variant switch.
   Outline-Weiss statt Blau: auf dem blauen Canvas waere ein blauer Button
   unsichtbar. Hover invertiert zu Weiss auf Blau (wie .btn-outline). */
.sys-config-factsheet {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-light);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.sys-config-factsheet:hover {
    background: var(--color-text-light);
    color: var(--color-primary);
    border-color: var(--color-text-light);
}

/* ROI-CTA — rechtsbündig unter der Stage-Box */
.sys-config-cta {
    grid-column: 1 / -1;
    justify-self: end;
}

/* Footer: aufklappbare Beschreibung (links) + ROI-CTA (rechts) */
.sys-config-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

/* Textfeld wächst nach rechts, endet aber vor dem Button (Gap) */
.sys-config-details {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===============================================================
   DETAIL TOGGLE — shared expandable "Details" component.
   Used by the DieTool configurator AND the Optionen cards.
   Chevron ">" grey, morphs to "−" maku-blue on hover / open;
   panel expands with a soft height + opacity animation (0fr→1fr).
   =============================================================== */
.detail-toggle {
    background: none;
    border: 0;
    padding: var(--spacing-xs) 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    transition: color var(--transition-base);
}

/* "Details"-Label neben dem Icon */
.detail-toggle-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.detail-toggle:hover,
.detail-toggle.is-open {
    color: var(--color-accent-cyan);
}

.detail-toggle-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
}

.detail-toggle-icon::before,
.detail-toggle-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    width: 12px;
    height: 2.5px;
    background: currentColor;
    transform-origin: right center;
    transition: transform var(--transition-base);
}

.detail-toggle-icon::before {
    transform: translateY(-50%) rotate(-45deg);
}

.detail-toggle-icon::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Hover ODER geöffnet: beide Balken werden flach → Minuszeichen */
.detail-toggle:hover .detail-toggle-icon::before,
.detail-toggle:hover .detail-toggle-icon::after,
.detail-toggle.is-open .detail-toggle-icon::before,
.detail-toggle.is-open .detail-toggle-icon::after {
    transform: translateY(-50%) rotate(0deg);
}

/* Ausklapp-Panel: weiche Höhen- + Opacity-Animation (0fr → 1fr) */
.detail-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows var(--transition-base), opacity var(--transition-base);
}

.detail-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.detail-panel > * {
    overflow: hidden;
    min-height: 0;
    margin-bottom: 0;
}

/* Stage: image slot (left) + info (right) */
.sys-config-stage {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--spacing-lg);
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-lg);
}

.sys-config-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.sys-config-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    transition: opacity var(--transition-base);
    /* Die Renderings sind grosszuegig freigestellt — alle Varianten (L, LR, R, M2)
       werden herangezoomt, damit die Maschine das Bildfeld fuellt. 1.35 ist an den
       Bilddaten geprueft: es wird nur leerer Rand beschnitten, auch bei M2. */
    transform: scale(1.35);
}

.sys-config-media.is-swapping .sys-config-img {
    opacity: 0;
}

.sys-config-variant-title {
    font-size: var(--font-size-h3);
    color: var(--color-text-light);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-xs);
}

.sys-config-variant-tag {
    display: inline-block;
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-accent-cyan);
    margin-bottom: var(--spacing-sm);
}

.sys-config-descs {
    transition: opacity var(--transition-base);
}

.sys-config-descs.is-swapping {
    opacity: 0;
}

.sys-config-desc {
    color: rgba(255, 255, 255, 0.75);
    transition: opacity var(--transition-base);
    margin-bottom: var(--spacing-md);
}

.sys-config-desc.is-swapping {
    opacity: 0;
}

/* Zone indicator — Lippe / Staubalken */
.sys-zones {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.sys-zone {
    flex: 1;
    text-align: center;
    padding: 14px var(--spacing-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--transition-base), border-color var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.sys-zone.is-active {
    color: var(--color-text-light);
    border-color: var(--color-accent-cyan);
    background: rgba(255, 255, 255, 0.09);
    box-shadow: inset 0 0 0 1px var(--color-accent-cyan), 0 0 14px rgba(46, 196, 255, 0.25);
}

/* Eigene Farbe statt opacity: 0.7 — vererbte Deckkraft auf einen bereits
   transluzenten Text haette den 11px-Zustand auf 3.9:1 gedrueckt.
   text-transform: none — die Zustandstexte sind ganze Wortgruppen; in
   11px Versalien waeren sie unlesbar. */
.sys-zone-state {
    display: block;
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.7);
}

/* ===============================================================
   6. ROI-BRÜCKE + ABSCHLUSS-CTA
   =============================================================== */
.sys-closing {
    /* Kein eigener Hintergrund — der Verlauf kommt von .sys-page. */
    color: var(--color-text-light);
    text-align: center;
    /* Kompakter Abschluss: nur Titel + ein Knopf. Ueberschreibt das
       120px-Polster von .section, damit der CTA nah an den Optionen sitzt. */
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-xl);
}

.sys-closing h2 {
    font-size: var(--font-size-h2);
    color: var(--color-text-light);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-md);
}

/* ===============================================================
   OPTIONEN (Add-ons — statische Karten, keine Auswahl-Logik)
   =============================================================== */
.sys-options {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.sys-options .sys-section-header {
    margin-bottom: 0;
}

/* Titelzeile: Titel links, Factsheet-Button rechts (bündig zum ROI-Button) */
.sys-options-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    /* rechte Kante bündig zum ROI-Button (Stage border 1px + padding lg) */
    padding-right: calc(var(--spacing-lg) + 1px);
}

.sys-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.sys-option-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: var(--spacing-lg);
}

.sys-option-media {
    position: relative;
    aspect-ratio: 16 / 9;   /* war 4 / 3 — niedrigeres Bildfeld, damit die 2×2-Karten kompakt bleiben */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.sys-option-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Twin-Drive zeigt ein sehr flaches Bauteil mit viel Rand — dieses eine
   Bildfeld wird herangezoomt, damit die Option gleich praesent wirkt wie
   die drei anderen Karten. */
.sys-option-media.is-zoomed .sys-option-img {
    transform: scale(1.35);
}

.sys-option-title {
    font-size: var(--font-size-h3);
    color: var(--color-text-light);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-xs);
}

.sys-option-text {
    color: rgba(255, 255, 255, 0.75);
}

/* ===============================================================
   BILDSCHUTZ — Produktrenderings nicht ziehbar / nicht markierbar.
   Zusammen mit den contextmenu-/dragstart-Handlern in js/system.js.
   Kein echter Kopierschutz, aber es unterbindet den beilaeufigen Griff.
   =============================================================== */
.sys-config-img,
.sys-option-img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 900px) {
    .sys-hero-grid,
    .sys-config-stage {
        grid-template-columns: 1fr;
    }

    .sys-hero-cta {
        grid-template-columns: 1fr;
    }

    /* Footer stapeln: Button unter die Beschreibung */
    .sys-config-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .sys-options-grid {
        grid-template-columns: 1fr;
    }

    .sys-options-head {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 0;
    }

    .sys-hero {
        min-height: auto;
    }

    .sys-hero-media {
        order: -1;
        max-width: 480px;
    }
}

@media (max-width: 540px) {
    .sys-config-tabs .sys-config-tab,
    .sys-config-tabs .sys-config-factsheet {
        flex: 1;
        justify-content: center;
        padding: 12px 16px;
        text-align: center;
    }
}

/* ===============================================================
   REDUCED MOTION — neutralise page animations
   (count-up is additionally guarded in js/main.js)
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .sys-hero-media.is-scanning .scanline {
        animation: none !important;
        opacity: 0 !important;
    }

    .sys-config-img,
    .sys-config-descs,
    .sys-config-desc,
    .detail-panel,
    .detail-toggle,
    .detail-toggle-icon::before,
    .detail-toggle-icon::after,
    .card-sweep::after {
        transition: none !important;
    }
}