/* =========================================================
   RETROBASS R-26
   Lautsprecheroptik Version 3

   Sichtbarer HiFi-Tieftöner ohne Metallgitter.
   ========================================================= */


/* ---------------------------------------------------------
   Lautsprecherbereich
   --------------------------------------------------------- */

.receiver__speaker-area {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    border-right:
        1px solid rgba(177, 121, 55, 0.52);

    background:
        radial-gradient(
            circle at 49% 46%,
            rgba(67, 55, 43, 0.16),
            transparent 56%
        ),
        linear-gradient(
            145deg,
            #11100e 0%,
            #080706 70%,
            #040403 100%
        );

    box-shadow:
        inset -3px 0 8px rgba(0, 0, 0, 0.62),
        inset 0 0 24px rgba(0, 0, 0, 0.88);
}


/* ---------------------------------------------------------
   Dezente Frontstruktur hinter dem Lautsprecher
   --------------------------------------------------------- */

.receiver__speaker-area::before {
    content: "";

    position: absolute;
    z-index: 0;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background-image:
        radial-gradient(
            circle,
            rgba(0, 0, 0, 0.78) 0 1px,
            transparent 1.25px
        );

    background-size:
        5px 5px;
}


/* ---------------------------------------------------------
   Lautsprecher-Grundkörper
   --------------------------------------------------------- */

.speaker {
    position: relative;
    z-index: 2;

    width:
        min(93%, 380px);

    aspect-ratio:
        1;

    border-radius:
        50%;

    filter:
        drop-shadow(
            0 12px 16px
            rgba(0, 0, 0, 0.62)
        );
}


/* ---------------------------------------------------------
   Chassis / Korb
   --------------------------------------------------------- */

.speaker__chassis {
    position: absolute;

    inset: 2.5%;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 48% 44%,
            #302d28 0%,
            #171512 38%,
            #090807 72%,
            #030303 100%
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.025),

        inset 0 0 22px
        rgba(0, 0, 0, 0.98),

        0 0 0 4px
        #080706,

        0 0 0 6px
        rgba(106, 71, 34, 0.66),

        0 8px 15px
        rgba(0, 0, 0, 0.72);
}


/* ---------------------------------------------------------
   Gummisicke
   --------------------------------------------------------- */

.speaker__surround {
    position: absolute;

    inset: 3.5%;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
    radial-gradient(
        circle at 50% 48%,
        transparent 0 56%,
        rgba(24, 23, 21, 0.96) 57% 63%,
        #090908 64% 69%,
        #34312d 70% 77%,
        #171513 78% 84%,
        #050504 85% 100%
    );

    box-shadow:
        inset 0 5px 9px
        rgba(255, 255, 255, 0.035),

        inset 0 -11px 18px
        rgba(0, 0, 0, 0.92),

        0 0 0 1px
        rgba(255, 255, 255, 0.018);
}


/* ---------------------------------------------------------
   Membran / Konus
   --------------------------------------------------------- */

.speaker__cone {
    position: relative;

    width: 89%;
    aspect-ratio: 1;

    overflow: hidden;

    border-radius: 50%;

    background:
    radial-gradient(
        circle at 50% 50%,
        #1b1916 0%,
        #2b2823 18%,
        #3a3630 38%,
        #28241f 60%,
        #141210 80%,
        #070605 100%
    );

    box-shadow:
        inset 0 3px 8px
        rgba(255, 255, 255, 0.045),

        inset 0 -28px 48px
        rgba(0, 0, 0, 0.82),

        inset 0 0 38px
        rgba(0, 0, 0, 0.48),

        0 0 0 1px
        rgba(255, 255, 255, 0.018);
}


/* ---------------------------------------------------------
   Papier- und Faserstruktur
   --------------------------------------------------------- */

.speaker__cone::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0.46;

    background:
        repeating-radial-gradient(
            circle at center,

            transparent 0,
            transparent 3px,

            rgba(
                255,
                255,
                255,
                0.024
            ) 4px,

            transparent 5px
        ),

        repeating-linear-gradient(
            118deg,

            transparent 0,
            transparent 2px,

            rgba(
                255,
                255,
                255,
                0.018
            ) 3px,

            transparent 4px
        );
}


/* ---------------------------------------------------------
   Konustiefe und Licht
   --------------------------------------------------------- */

.speaker__cone::after {
    content: "";

    position: absolute;

    inset: 2%;

    border-radius: inherit;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 34% 27%,

            rgba(
                255,
                244,
                221,
                0.07
            ),

            transparent 25%
        ),

        radial-gradient(
            circle at 72% 76%,

            rgba(
                0,
                0,
                0,
                0.58
            ),

            transparent 50%
        ),

        radial-gradient(
            circle at center,

            transparent 0 42%,

            rgba(
                0,
                0,
                0,
                0.10
            ) 58%,

            rgba(
                0,
                0,
                0,
                0.38
            ) 100%
        );
}


/* ---------------------------------------------------------
   Staubschutzkalotte

   Exakt mittig im Konus.
   Ohne zusätzlichen translate-Konflikt.
   --------------------------------------------------------- */

.speaker__dust-cap {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;

    width: 19%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 37% 31%,
            #413d37 0%,
            #2c2925 25%,
            #1b1916 50%,
            #0f0e0c 74%,
            #050504 100%
        );

    box-shadow:
        inset 1px 2px 4px rgba(255, 255, 255, 0.045),
        inset -3px -4px 8px rgba(0, 0, 0, 0.72),
        0 2px 5px rgba(0, 0, 0, 0.54);

    transform:
        translate(-50%, -50%);
}


/* ---------------------------------------------------------
   Kalottenstruktur
   --------------------------------------------------------- */

.speaker__dust-cap::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0.34;

    background:
        repeating-radial-gradient(
            circle at center,

            transparent 0,
            transparent 2px,

            rgba(
                255,
                255,
                255,
                0.028
            ) 3px,

            transparent 4px
        ),

        radial-gradient(
            circle at 36% 27%,

            rgba(
                255,
                255,
                255,
                0.08
            ),

            transparent 32%
        );
}


/* ---------------------------------------------------------
   Messingring
   --------------------------------------------------------- */

.speaker__ring {
    position: absolute;
    z-index: 7;

    inset: 0;

    border:
        1.8px solid transparent;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,

            #4a2b11 0%,
            #9b692f 13%,
            #dfb867 27%,
            #754317 44%,
            #c79447 61%,
            #edc87b 76%,
            #5b3415 100%
        )
        border-box;

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 226, 168, 0.16),

        0 0 0 1px
        rgba(17, 9, 4, 0.92),

        0 4px 10px
        rgba(0, 0, 0, 0.72);

    mask:
        linear-gradient(
            #fff 0 0
        )
        padding-box,

        linear-gradient(
            #fff 0 0
        );

    mask-composite:
        exclude;
}


/* ---------------------------------------------------------
   Dezente Glas-/Lichtreflexion
   --------------------------------------------------------- */

.speaker__reflection {
    position: absolute;
    z-index: 8;

    top: 7%;
    left: 13%;

    width: 42%;
    height: 22%;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.12;

    background:
        radial-gradient(
            ellipse at center,

            rgba(
                255,
                232,
                194,
                0.42
            ),

            transparent 68%
        );

    filter:
        blur(6px);

    transform:
        rotate(-18deg);
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 720px) {
    .speaker {
        width: 80%;
    }

    .receiver__speaker-area::before {
        background-size:
            4px 4px;
    }
}

/* =========================================================
   Phase 3.5a
   Materialtiefe der Lautsprechermembran
   ========================================================= */

/* Feine Papierfasern und minimale Oberflächenvariation */
.speaker__cone::before {
    opacity: 0.58;

    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.022) 4px,
            transparent 5px
        ),

        repeating-linear-gradient(
            116deg,
            transparent 0,
            transparent 2px,
            rgba(255, 255, 255, 0.016) 3px,
            transparent 4px
        ),

        repeating-linear-gradient(
            28deg,
            transparent 0,
            transparent 5px,
            rgba(0, 0, 0, 0.022) 6px,
            transparent 7px
        ),

        radial-gradient(
            circle at 42% 36%,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        );
}

/* Leicht ungleichmäßige Materialdichte */
.speaker__cone::after {
    background:
        radial-gradient(
            circle at 34% 27%,
            rgba(255, 244, 221, 0.075),
            transparent 24%
        ),

        radial-gradient(
            circle at 72% 76%,
            rgba(0, 0, 0, 0.56),
            transparent 50%
        ),

        radial-gradient(
            circle at 48% 52%,
            rgba(255, 255, 255, 0.018),
            transparent 42%
        ),

        radial-gradient(
            circle at center,
            transparent 0 40%,
            rgba(0, 0, 0, 0.11) 57%,
            rgba(0, 0, 0, 0.40) 100%
        );
}

/* Kalotte mit ähnlicher, aber feinerer Materialstruktur */
.speaker__dust-cap::before {
    opacity: 0.42;

    background:
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 2px,
            rgba(255, 255, 255, 0.026) 3px,
            transparent 4px
        ),

        repeating-linear-gradient(
            132deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.015) 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 36% 27%,
            rgba(255, 255, 255, 0.085),
            transparent 31%
        );
}

/* Sehr dezente Materialkante am Konus */
.speaker__cone {
    outline:
        1px solid
        rgba(255, 255, 255, 0.012);

    outline-offset:
        -1px;
}

/* =========================================================
   Phase 3.7
   Mechanische Einbautiefe des Lautsprechers
   ========================================================= */

/* Tiefe Montagefuge hinter dem gesamten Treiber */
.speaker::before {
    content: "";

    position: absolute;
    z-index: -2;

    inset: -2.8%;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 46%,
            transparent 0 70%,
            rgba(0, 0, 0, 0.28) 74%,
            rgba(0, 0, 0, 0.82) 84%,
            rgba(4, 3, 2, 0.96) 100%
        );

    box-shadow:
        inset 0 8px 13px rgba(255, 219, 167, 0.018),
        inset 0 -14px 22px rgba(0, 0, 0, 0.94),
        0 8px 18px rgba(0, 0, 0, 0.58);
}

/* Sehr schmale Schattenfuge unmittelbar am Außenring */
.speaker::after {
    content: "";

    position: absolute;
    z-index: -1;

    inset: -1.15%;

    border-radius: 50%;

    pointer-events: none;

    border:
        1px solid
        rgba(0, 0, 0, 0.82);

    box-shadow:
        inset 0 3px 5px rgba(255, 224, 177, 0.025),
        inset 0 -5px 8px rgba(0, 0, 0, 0.88),
        0 1px 2px rgba(157, 100, 43, 0.10);
}

/* Chassis bekommt mehr Masse am Außenrand */
.speaker__chassis {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        inset 0 0 22px rgba(0, 0, 0, 0.98),
        inset 0 9px 14px rgba(255, 230, 196, 0.018),
        inset 0 -16px 25px rgba(0, 0, 0, 0.72),

        0 0 0 4px #080706,
        0 0 0 6px rgba(106, 71, 34, 0.66),

        0 8px 15px rgba(0, 0, 0, 0.72),
        0 14px 25px rgba(0, 0, 0, 0.34);
}

/* =========================================================
   Phase 3.8
   Unikat-Merkmale und Fertigungskennung
   ========================================================= */

.speaker__chassis::after {
    content:
        "R26-001";

    position: absolute;
    z-index: 9;

    right: 11%;
    bottom: 10%;

    color:
        rgba(
            191,
            137,
            76,
            0.22
        );

    font-size:
        clamp(
            0.18rem,
            0.34vw,
            0.28rem
        );

    font-weight:
        500;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

    text-shadow:
        0 1px 1px
        rgba(
            0,
            0,
            0,
            0.78
        );

    transform:
        rotate(-7deg);

    pointer-events:
        none;
}

.speaker__chassis::before {
    content: "";

    position: absolute;
    z-index: 1;

    inset: 0;

    border-radius:
        inherit;

    pointer-events:
        none;

    opacity:
        0.22;

    background:
        repeating-linear-gradient(
            121deg,
            transparent 0,
            transparent 7px,
            rgba(
                255,
                255,
                255,
                0.010
            ) 8px,
            transparent 9px
        ),

        repeating-linear-gradient(
            37deg,
            transparent 0,
            transparent 11px,
            rgba(
                0,
                0,
                0,
                0.018
            ) 12px,
            transparent 13px
        ),

        radial-gradient(
            circle at 31% 24%,
            rgba(
                255,
                232,
                198,
                0.018
            ),
            transparent 28%
        ),

        radial-gradient(
            circle at 74% 73%,
            rgba(
                0,
                0,
                0,
                0.045
            ),
            transparent 38%
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.1a
   Mechanische Korbaufnahme
   ========================================================= */

.speaker{

    isolation:isolate;

}

/* =========================================================
   RETROBASS R-26
   Phase B.1b
   Gefräste Aufnahme, Dichtung und Druckguss-Korbträger
   ========================================================= */


/* ---------------------------------------------------------
   Gefräste Einlassung im Gehäuse
   --------------------------------------------------------- */

.speaker__mount {
    position: absolute;
    z-index: -3;

    inset: -4.6%;

    border:
        1px solid
        rgba(
            47,
            27,
            14,
            0.88
        );

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 47%,

            transparent 0 76%,

            rgba(
                104,
                65,
                35,
                0.18
            ) 78%,

            rgba(
                48,
                27,
                14,
                0.58
            ) 84%,

            rgba(
                18,
                10,
                6,
                0.90
            ) 92%,

            rgba(
                7,
                4,
                3,
                0.98
            ) 100%
        );

    box-shadow:
        inset 0 4px 5px
        rgba(
            255,
            222,
            178,
            0.040
        ),

        inset 0 -8px 12px
        rgba(
            0,
            0,
            0,
            0.84
        ),

        0 3px 5px
        rgba(
            0,
            0,
            0,
            0.42
        );
}


/* ---------------------------------------------------------
   Matte Graphit-Dichtung
   --------------------------------------------------------- */

.speaker__gasket {
    position: absolute;
    z-index: -2;

    inset: -2.65%;

    border:
        2px solid
        rgba(
            25,
            25,
            23,
            0.94
        );

    border-radius: 50%;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            115deg,

            transparent 0,
            transparent 3px,

            rgba(
                255,
                255,
                255,
                0.012
            ) 4px,

            transparent 5px
        );

    box-shadow:
        inset 0 1px 1px
        rgba(
            255,
            255,
            255,
            0.028
        ),

        inset 0 -3px 4px
        rgba(
            0,
            0,
            0,
            0.68
        ),

        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.48
        );
}


/* ---------------------------------------------------------
   Tragender Druckguss-Korbring
   --------------------------------------------------------- */

.speaker__basket-ring {
    position: absolute;
    z-index: -1;

    inset: -1.55%;

    border:
        2px solid
        rgba(
            46,
            44,
            40,
            0.96
        );

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,

            transparent 0 78%,

            rgba(
                69,
                67,
                62,
                0.70
            ) 80%,

            rgba(
                32,
                31,
                29,
                0.96
            ) 88%,

            rgba(
                12,
                12,
                11,
                0.98
            ) 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset 0 -5px 7px
        rgba(
            0,
            0,
            0,
            0.76
        ),

        0 0 0 1px
        rgba(
            4,
            4,
            3,
            0.92
        ),

        0 5px 8px
        rgba(
            0,
            0,
            0,
            0.50
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.1c
   Druckguss-Struktur und minimale Fertigungsspuren
   ========================================================= */

.speaker__basket-ring {
    background:
        /* feine, unregelmäßige Gusskörnung */
        radial-gradient(
            circle at 14% 22%,
            rgba(255, 255, 255, 0.020) 0 0.6px,
            transparent 0.9px
        ),

        radial-gradient(
            circle at 37% 68%,
            rgba(0, 0, 0, 0.045) 0 0.7px,
            transparent 1px
        ),

        radial-gradient(
            circle at 62% 31%,
            rgba(255, 255, 255, 0.016) 0 0.5px,
            transparent 0.8px
        ),

        radial-gradient(
            circle at 84% 72%,
            rgba(0, 0, 0, 0.050) 0 0.8px,
            transparent 1.1px
        ),

        /* minimale Formspuren des Druckgusses */
        repeating-linear-gradient(
            112deg,
            transparent 0,
            transparent 5px,
            rgba(255, 255, 255, 0.010) 6px,
            transparent 7px
        ),

        repeating-linear-gradient(
            24deg,
            transparent 0,
            transparent 8px,
            rgba(0, 0, 0, 0.018) 9px,
            transparent 10px
        ),

        /* eigentliche Korbring-Tiefe */
        radial-gradient(
            circle,
            transparent 0 78%,
            rgba(72, 70, 65, 0.72) 80%,
            rgba(35, 34, 31, 0.96) 88%,
            rgba(12, 12, 11, 0.98) 100%
        );

    background-size:
        19px 17px,
        23px 21px,
        17px 19px,
        25px 23px,
        auto,
        auto,
        auto;

    background-position:
        0 0,
        8px 6px,
        3px 11px,
        12px 4px,
        0 0,
        0 0,
        0 0;

    box-shadow:
        inset 0 2px 2px
        rgba(255, 255, 255, 0.045),

        inset 0 -5px 7px
        rgba(0, 0, 0, 0.76),

        /* feine obere Gusskante */
        inset 0 0 0 1px
        rgba(137, 132, 122, 0.055),

        /* leichte Druckguss-Tiefe */
        inset 3px 0 5px
        rgba(255, 255, 255, 0.016),

        inset -4px 0 6px
        rgba(0, 0, 0, 0.14),

        0 0 0 1px
        rgba(4, 4, 3, 0.92),

        0 5px 8px
        rgba(0, 0, 0, 0.50);
}

/* =========================================================
   RETROBASS R-26
   Phase B.1d
   Druckguss-Korbstreben und Lastverteilung
   ========================================================= */

.speaker__basket-ring {
    overflow: visible;
    isolation: isolate;
}


/* ---------------------------------------------------------
   Gemeinsame Form der Korbstreben
   --------------------------------------------------------- */

.speaker__basket-spoke {
    position: absolute;
    z-index: -1;

    top: 50%;
    left: 50%;

    width: 45%;
    height: 4.5%;

    border:
        1px solid
        rgba(17, 16, 14, 0.86);

    border-radius:
        45% 8px 8px 45%
        /
        50%;

    pointer-events: none;

    transform-origin:
        0 50%;

    background:
        /* feine Gusskörnung */
        repeating-linear-gradient(
            112deg,
            transparent 0,
            transparent 4px,
            rgba(255, 255, 255, 0.012) 5px,
            transparent 6px
        ),

        linear-gradient(
            180deg,
            #55524c 0%,
            #302f2b 31%,
            #1b1a18 67%,
            #0c0c0b 100%
        );

    box-shadow:
        inset 0 1px 1px
        rgba(255, 255, 255, 0.045),

        inset 0 -2px 3px
        rgba(0, 0, 0, 0.72),

        inset -5px 0 6px
        rgba(0, 0, 0, 0.30),

        0 2px 4px
        rgba(0, 0, 0, 0.48);
}


/* ---------------------------------------------------------
   Vier konstruktive Lastpfade
   --------------------------------------------------------- */

.speaker__basket-spoke--one {
    transform:
        translateY(-50%)
        rotate(42deg);
}

.speaker__basket-spoke--two {
    transform:
        translateY(-50%)
        rotate(138deg);
}

.speaker__basket-spoke--three {
    transform:
        translateY(-50%)
        rotate(222deg);
}

.speaker__basket-spoke--four {
    transform:
        translateY(-50%)
        rotate(318deg);
}

.speaker__chassis {
    z-index: 2;
}

.speaker__basket-ring {
    z-index: 1;
}

.speaker__ring {
    z-index: 7;
}

/* =========================================================
   RETROBASS R-26
   Phase B.1e
   Komprimierte Dichtung und mechanische Anpresskante
   ========================================================= */

.speaker__gasket {
    background:
        /* feine matte Gummistruktur */
        radial-gradient(
            circle at 18% 26%,
            rgba(255, 255, 255, 0.014) 0 0.55px,
            transparent 0.85px
        ),

        radial-gradient(
            circle at 68% 72%,
            rgba(0, 0, 0, 0.060) 0 0.7px,
            transparent 1px
        ),

        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.010) 4px,
            transparent 5px
        ),

        radial-gradient(
            circle,
            transparent 0 82%,
            rgba(37, 37, 34, 0.96) 84%,
            rgba(21, 21, 19, 0.98) 91%,
            rgba(9, 9, 8, 1) 100%
        );

    box-shadow:
        /* obere, leicht belastete Gummikante */
        inset 0 1px 1px
        rgba(255, 255, 255, 0.026),

        /* Kompression unter dem Korbring */
        inset 0 -3px 4px
        rgba(0, 0, 0, 0.78),

        /* leichte seitliche Materialspannung */
        inset 3px 0 4px
        rgba(255, 255, 255, 0.010),

        inset -3px 0 4px
        rgba(0, 0, 0, 0.16),

        /* Kontaktfuge zur Fräsung */
        0 0 0 1px
        rgba(4, 4, 3, 0.90),

        /* Gewicht des Korbträgers */
        0 2px 3px
        rgba(0, 0, 0, 0.58);
}

.speaker__gasket::before {
    content: "";

    position: absolute;

    inset: 2px;

    border:
        1px solid
        rgba(7, 7, 6, 0.78);

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        inset 0 1px 1px
        rgba(255, 255, 255, 0.018),

        inset 0 -2px 2px
        rgba(0, 0, 0, 0.62);
}

.speaker__gasket::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 30% 18%,
            rgba(255, 255, 255, 0.018),
            transparent 24%
        ),

        radial-gradient(
            ellipse at 72% 82%,
            rgba(0, 0, 0, 0.14),
            transparent 30%
        );

    opacity: 0.76;
}

/* =========================================================
   RETROBASS R-26
   Phase B.2a
   Materialspannung und matte Gummioberfläche
   ========================================================= */

.speaker__surround {
    background:
        /* feine matte Gummiporen */
        radial-gradient(
            circle at 18% 24%,
            rgba(255, 255, 255, 0.014) 0 0.55px,
            transparent 0.85px
        ),

        radial-gradient(
            circle at 66% 72%,
            rgba(0, 0, 0, 0.055) 0 0.7px,
            transparent 1px
        ),

        radial-gradient(
            circle at 82% 32%,
            rgba(255, 255, 255, 0.010) 0 0.45px,
            transparent 0.75px
        ),

        /* leichte radiale Materialspannung */
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 5px,
            rgba(255, 255, 255, 0.010) 6px,
            transparent 7px
        ),

        /* eigentliche Roll- und Tiefenstruktur */
        radial-gradient(
            circle at 50% 48%,
            transparent 0 56%,
            rgba(28, 27, 25, 0.97) 57% 63%,
            #0b0b0a 64% 69%,
            #3a3732 70% 77%,
            #1a1816 78% 84%,
            #050504 85% 100%
        );

    box-shadow:
        /* weiche obere Materialspannung */
        inset 0 5px 9px
        rgba(255, 255, 255, 0.030),

        /* tiefer unterer Rollschatten */
        inset 0 -12px 19px
        rgba(0, 0, 0, 0.94),

        /* seitliche elastische Spannung */
        inset 6px 0 9px
        rgba(255, 255, 255, 0.012),

        inset -7px 0 10px
        rgba(0, 0, 0, 0.18),

        /* feine Trennung zum Chassis */
        0 0 0 1px
        rgba(255, 255, 255, 0.016);

    filter:
        saturate(0.88)
        contrast(1.04)
        brightness(0.96);
}

.speaker__surround::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    opacity: 0.48;

    background:
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 4px,
            rgba(255, 255, 255, 0.008) 5px,
            transparent 6px
        ),

        repeating-linear-gradient(
            34deg,
            transparent 0,
            transparent 7px,
            rgba(0, 0, 0, 0.014) 8px,
            transparent 9px
        ),

        radial-gradient(
            ellipse at 34% 24%,
            rgba(255, 255, 255, 0.022),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 71% 76%,
            rgba(0, 0, 0, 0.12),
            transparent 34%
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.2b
   Innere Rollkante der Gummisicke
   ========================================================= */

.speaker__surround::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 8.6%;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 46%,

            transparent 0 67%,

            rgba(
                255,
                255,
                255,
                0.018
            ) 68%,

            rgba(
                57,
                54,
                49,
                0.42
            ) 71%,

            rgba(
                21,
                20,
                18,
                0.92
            ) 76%,

            rgba(
                8,
                8,
                7,
                0.98
            ) 82%,

            transparent 87%
        );

    box-shadow:
        inset 0 3px 4px
        rgba(
            255,
            255,
            255,
            0.022
        ),

        inset 0 -5px 7px
        rgba(
            0,
            0,
            0,
            0.72
        ),

        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.26
        );

    opacity: 0.96;
}

.speaker__cone {
    box-shadow:
        inset 0 3px 8px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset 0 -28px 48px
        rgba(
            0,
            0,
            0,
            0.82
        ),

        inset 0 0 38px
        rgba(
            0,
            0,
            0,
            0.48
        ),

        /* feiner Sitz in der inneren Sickenrolle */
        0 0 0 1px
        rgba(
            8,
            8,
            7,
            0.74
        ),

        0 2px 4px
        rgba(
            0,
            0,
            0,
            0.28
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.2c
   Minimale Falten und elastische Dehnung der Gummisicke
   ========================================================= */

.speaker__surround::before {
    background:
        /* sehr feine radiale Dehnungslinien */
        repeating-conic-gradient(
            from 2deg at 50% 50%,

            transparent 0deg,
            transparent 7deg,

            rgba(
                255,
                255,
                255,
                0.008
            ) 7.4deg,

            transparent 8deg
        ),

        /* minimale Materialstauchung oben links */
        radial-gradient(
            ellipse at 28% 22%,
            rgba(
                255,
                255,
                255,
                0.020
            ),
            transparent 18%
        ),

        /* minimale Materialspannung unten rechts */
        radial-gradient(
            ellipse at 74% 78%,
            rgba(
                0,
                0,
                0,
                0.16
            ),
            transparent 24%
        ),

        /* bestehende matte Gummihaut */
        repeating-linear-gradient(
            118deg,
            transparent 0,
            transparent 4px,
            rgba(
                255,
                255,
                255,
                0.008
            ) 5px,
            transparent 6px
        ),

        repeating-linear-gradient(
            34deg,
            transparent 0,
            transparent 7px,
            rgba(
                0,
                0,
                0,
                0.014
            ) 8px,
            transparent 9px
        );

    opacity:
        0.44;

    filter:
        blur(0.12px);
}

.speaker__surround::after {
    transform:
        scaleX(0.998)
        scaleY(1.002);

    transform-origin:
        50% 48%;
}

/* =========================================================
   RETROBASS R-26
   Phase B.2d
   Übergang Gummisicke ↔ Papiermembran
   ========================================================= */

/* ---------------------------------------------------------
   Feine Klebe- und Kontaktkante am Membranrand
   --------------------------------------------------------- */

.speaker__cone {
    border:
        1px solid
        rgba(
            12,
            11,
            10,
            0.82
        );

    box-shadow:
        inset 0 3px 8px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset 0 -28px 48px
        rgba(
            0,
            0,
            0,
            0.82
        ),

        inset 0 0 38px
        rgba(
            0,
            0,
            0,
            0.48
        ),

        /* innere Kontaktkante zur Sicke */
        0 0 0 1px
        rgba(
            5,
            5,
            4,
            0.78
        ),

        /* minimale Klebeschicht */
        0 0 0 2px
        rgba(
            31,
            28,
            24,
            0.28
        ),

        /* Sitz in der Gummisicke */
        0 2px 4px
        rgba(
            0,
            0,
            0,
            0.30
        );
}

.speaker__cone::after {
    background:
        /* feiner dunkler Kleberand */
        radial-gradient(
            circle at center,

            transparent 0 78%,

            rgba(
                12,
                11,
                10,
                0.12
            ) 80%,

            rgba(
                6,
                6,
                5,
                0.38
            ) 84%,

            transparent 88%
        ),

        radial-gradient(
            circle at 34% 27%,
            rgba(
                255,
                244,
                221,
                0.075
            ),
            transparent 24%
        ),

        radial-gradient(
            circle at 72% 76%,
            rgba(
                0,
                0,
                0,
                0.56
            ),
            transparent 50%
        ),

        radial-gradient(
            circle at 48% 52%,
            rgba(
                255,
                255,
                255,
                0.018
            ),
            transparent 42%
        ),

        radial-gradient(
            circle at center,
            transparent 0 40%,
            rgba(
                0,
                0,
                0,
                0.11
            ) 57%,
            rgba(
                0,
                0,
                0,
                0.40
            ) 100%
        );
}

.speaker__surround::after {
    box-shadow:
        inset 0 3px 4px
        rgba(
            255,
            255,
            255,
            0.022
        ),

        inset 0 -5px 7px
        rgba(
            0,
            0,
            0,
            0.72
        ),

        /* feiner Druck auf den Membranrand */
        inset 0 0 0 1px
        rgba(
            6,
            6,
            5,
            0.48
        ),

        0 1px 2px
        rgba(
            0,
            0,
            0,
            0.26
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.2e
   Vorbereitung der elastischen Lautsprecherbewegung
   ========================================================= */

/* ---------------------------------------------------------
   Gemeinsame Bewegungsparameter

   Noch neutral:
   Alle Werte stehen auf 1 und erzeugen keine sichtbare
   Bewegung. Später kann speaker-engine.js diese Variablen
   abhängig von Bass und Lautstärke verändern.
   --------------------------------------------------------- */

.speaker {
    --speaker-surround-scale: 1;
    --speaker-cone-scale: 1;
    --speaker-dust-cap-scale: 1;

    --speaker-motion-duration: 90ms;
    --speaker-motion-return: 150ms;
}


/* ---------------------------------------------------------
   Gummisicke

   Sie reagiert weich und etwas verzögert.
   --------------------------------------------------------- */

.speaker__surround {
    scale:
        var(--speaker-surround-scale);

    transform-origin:
        50% 50%;

    transition:
        scale
        var(--speaker-motion-return)
        cubic-bezier(
            0.22,
            0.72,
            0.28,
            1
        );

    will-change:
        scale;
}


/* ---------------------------------------------------------
   Papiermembran

   Sie folgt direkter als die elastische Sicke.
   --------------------------------------------------------- */

.speaker__cone {
    scale:
        var(--speaker-cone-scale);

    transform-origin:
        50% 50%;

    transition:
        scale
        var(--speaker-motion-duration)
        cubic-bezier(
            0.18,
            0.78,
            0.24,
            1
        );

    will-change:
        scale;
}


/* ---------------------------------------------------------
   Staubschutzkalotte

   Sie erhält später die kleinste, aber schnellste Reaktion.
   --------------------------------------------------------- */

.speaker__dust-cap {
    scale:
        var(--speaker-dust-cap-scale);

    transform-origin:
        50% 50%;

    transition:
        scale
        72ms
        cubic-bezier(
            0.16,
            0.82,
            0.26,
            1
        );

    will-change:
        scale;
}

@media (prefers-reduced-motion: reduce) {
    .speaker__surround,
    .speaker__cone,
    .speaker__dust-cap {
        scale: 1;
        transition: none;
    }
}

/* =========================================================
   RETROBASS R-26
   Phase B.3a
   Papierfasern und Pressstruktur der Membran
   ========================================================= */

.speaker__cone::before {
    opacity:
        0.62;

    background:
        /* sehr feine Papierfasern */
        repeating-linear-gradient(
            116deg,
            transparent 0,
            transparent 2px,
            rgba(
                255,
                255,
                255,
                0.018
            ) 3px,
            transparent 4px
        ),

        repeating-linear-gradient(
            29deg,
            transparent 0,
            transparent 5px,
            rgba(
                0,
                0,
                0,
                0.024
            ) 6px,
            transparent 7px
        ),

        repeating-linear-gradient(
            164deg,
            transparent 0,
            transparent 8px,
            rgba(
                255,
                255,
                255,
                0.010
            ) 9px,
            transparent 10px
        ),

        /* Pressringe der Papiermembran */
        repeating-radial-gradient(
            circle at center,
            transparent 0,
            transparent 3px,
            rgba(
                255,
                255,
                255,
                0.020
            ) 4px,
            transparent 5px
        ),

        /* leicht ungleichmäßige Faserverteilung */
        radial-gradient(
            ellipse at 36% 28%,
            rgba(
                255,
                255,
                255,
                0.026
            ),
            transparent 29%
        ),

        radial-gradient(
            ellipse at 69% 72%,
            rgba(
                0,
                0,
                0,
                0.055
            ),
            transparent 34%
        );

    background-size:
        auto,
        auto,
        auto,
        auto,
        auto,
        auto;

    mix-blend-mode:
        soft-light;

    filter:
        contrast(1.045)
        brightness(0.985);
}

.speaker__cone {
    outline:
        1px solid
        rgba(
            255,
            255,
            255,
            0.014
        );

    outline-offset:
        -2px;
}

/* =========================================================
   RETROBASS R-26
   Phase B.3b
   Materialdichte und matte Oberfläche der Papiermembran
   ========================================================= */

.speaker__cone {
    background:
        /* leicht hellere, weniger dichte Papierzone */
        radial-gradient(
            ellipse at 31% 26%,
            rgba(255, 255, 255, 0.028) 0%,
            rgba(255, 255, 255, 0.012) 24%,
            transparent 46%
        ),

        /* etwas dichter gepresste Zone */
        radial-gradient(
            ellipse at 72% 70%,
            rgba(0, 0, 0, 0.090) 0%,
            rgba(0, 0, 0, 0.040) 28%,
            transparent 52%
        ),

        /* minimale ungleichmäßige Papiermasse */
        radial-gradient(
            ellipse at 56% 38%,
            rgba(78, 73, 65, 0.055) 0%,
            transparent 36%
        ),

        /* Grundkörper der Membran */
        radial-gradient(
            circle at 50% 50%,
            #1b1916 0%,
            #2b2823 18%,
            #3a3630 38%,
            #28241f 60%,
            #141210 80%,
            #070605 100%
        );

    filter:
        saturate(0.82)
        contrast(1.035)
        brightness(0.965);
}

.speaker__cone::before {
    mix-blend-mode:
        soft-light;

    opacity:
        0.58;

    filter:
        contrast(1.03)
        brightness(0.98);
}

.speaker__cone::after {
    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            255,
            255,
            0.018
        ),

        inset 0 -2px 4px
        rgba(
            0,
            0,
            0,
            0.10
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.3c
   Radiale Spannung zur Staubschutzkalotte
   ========================================================= */

.speaker__cone::after {
    background:
        /* feine radiale Zuglinien zur Kalotte */
        repeating-conic-gradient(
            from 1deg at 50% 50%,

            transparent 0deg,
            transparent 8deg,

            rgba(
                255,
                255,
                255,
                0.009
            ) 8.35deg,

            transparent 9deg
        ),

        /* leicht gespannte Zone um die Kalotte */
        radial-gradient(
            circle at center,

            transparent 0 18%,

            rgba(
                255,
                255,
                255,
                0.018
            ) 20%,

            rgba(
                42,
                39,
                35,
                0.12
            ) 27%,

            transparent 34%
        ),

        /* dunklere Verdichtung zum inneren Konus */
        radial-gradient(
            circle at center,

            transparent 0 28%,

            rgba(
                0,
                0,
                0,
                0.10
            ) 42%,

            rgba(
                0,
                0,
                0,
                0.22
            ) 58%,

            transparent 72%
        ),

        /* bestehende Licht- und Tiefenwirkung */
        radial-gradient(
            circle at 34% 27%,
            rgba(
                255,
                244,
                221,
                0.075
            ),
            transparent 24%
        ),

        radial-gradient(
            circle at 72% 76%,
            rgba(
                0,
                0,
                0,
                0.56
            ),
            transparent 50%
        ),

        radial-gradient(
            circle at center,
            transparent 0 40%,
            rgba(
                0,
                0,
                0,
                0.11
            ) 57%,
            rgba(
                0,
                0,
                0,
                0.40
            ) 100%
        );

    opacity:
        0.98;
}

.speaker__dust-cap {
    box-shadow:
        inset 1px 2px 4px
        rgba(
            255,
            255,
            255,
            0.045
        ),

        inset -3px -4px 8px
        rgba(
            0,
            0,
            0,
            0.72
        ),

        /* feine Einfassung durch den Konus */
        0 0 0 1px
        rgba(
            10,
            9,
            8,
            0.72
        ),

        0 2px 5px
        rgba(
            0,
            0,
            0,
            0.54
        );
}

/* =========================================================
   RETROBASS R-26
   Phase B.3d
   Minimale Fertigungsunregelmäßigkeit der Papiermembran
   ========================================================= */

.speaker__cone::before {
    background:
        /* sehr feine, ungleichmäßige Faserverdichtung */
        radial-gradient(
            ellipse at 21% 34%,
            rgba(255, 255, 255, 0.016),
            transparent 17%
        ),

        radial-gradient(
            ellipse at 63% 19%,
            rgba(0, 0, 0, 0.030),
            transparent 20%
        ),

        radial-gradient(
            ellipse at 78% 64%,
            rgba(255, 255, 255, 0.012),
            transparent 18%
        ),

        radial-gradient(
            ellipse at 39% 78%,
            rgba(0, 0, 0, 0.034),
            transparent 22%
        ),

        /* leicht unregelmäßige Presslinien */
        repeating-conic-gradient(
            from 0.7deg at 49.8% 50.2%,

            transparent 0deg,
            transparent 10deg,

            rgba(
                255,
                255,
                255,
                0.006
            ) 10.35deg,

            transparent 11deg
        ),

        repeating-radial-gradient(
            circle at 50.3% 49.7%,

            transparent 0,
            transparent 4px,

            rgba(
                255,
                255,
                255,
                0.014
            ) 5px,

            transparent 6px
        ),

        /* bestehende Faserstruktur */
        repeating-linear-gradient(
            116deg,
            transparent 0,
            transparent 2px,
            rgba(
                255,
                255,
                255,
                0.016
            ) 3px,
            transparent 4px
        ),

        repeating-linear-gradient(
            29deg,
            transparent 0,
            transparent 5px,
            rgba(
                0,
                0,
                0,
                0.022
            ) 6px,
            transparent 7px
        );

    opacity:
        0.56;

    filter:
        contrast(1.035)
        brightness(0.985);
}

.speaker__cone {
    border-radius:
        50.1% 49.9% 50.2% 49.8%
        /
        49.9% 50.1% 49.8% 50.2%;
}

.speaker__cone::after {
    border-radius:
        49.9% 50.1% 49.8% 50.2%
        /
        50.2% 49.8% 50.1% 49.9%;
}

/* =========================================================
   RETROBASS R-26
   Phase B.3e
   Realistische Lichtreaktion der Papiermembran
   ========================================================= */

.speaker__cone {
    background:
        /* sehr weicher Raumlicht-Reflex oben links */
        radial-gradient(
            ellipse at 31% 24%,
            rgba(255, 241, 214, 0.040) 0%,
            rgba(255, 233, 202, 0.016) 28%,
            transparent 52%
        ),

        /* matter Gegenschatten unten rechts */
        radial-gradient(
            ellipse at 73% 76%,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.055) 34%,
            transparent 58%
        ),

        /* minimale Lichtstreuung über die Pressfläche */
        radial-gradient(
            circle at 48% 45%,
            rgba(92, 86, 76, 0.032) 0%,
            transparent 46%
        ),

        /* bestehender Membran-Grundkörper */
        radial-gradient(
            circle at 50% 50%,
            #1b1916 0%,
            #2b2823 18%,
            #3a3630 38%,
            #28241f 60%,
            #141210 80%,
            #070605 100%
        );

    box-shadow:
        /* sehr feine diffuse Lichtkante */
        inset 0 2px 5px rgba(255, 244, 221, 0.026),

        /* tiefer Konusschatten */
        inset 0 -30px 52px rgba(0, 0, 0, 0.84),

        /* innere Materialtiefe */
        inset 0 0 42px rgba(0, 0, 0, 0.46),

        /* Kontaktkante zur Sicke */
        0 0 0 1px rgba(7, 7, 6, 0.76),

        0 2px 4px rgba(0, 0, 0, 0.30);

    filter:
        saturate(0.80)
        contrast(1.035)
        brightness(0.97);
}

.speaker__cone::before {
    mix-blend-mode:
        soft-light;

    opacity:
        0.54;

    filter:
        contrast(1.04)
        brightness(0.99);
}

.speaker__cone::after {
    background:
        /* radiale Pressspannung */
        repeating-conic-gradient(
            from 1deg at 50% 50%,
            transparent 0deg,
            transparent 8deg,
            rgba(255, 255, 255, 0.007) 8.35deg,
            transparent 9deg
        ),

        /* weich gestreutes Licht auf der oberen Konusfläche */
        radial-gradient(
            ellipse at 33% 25%,
            rgba(255, 240, 214, 0.055),
            transparent 25%
        ),

        /* tiefere Schattenzone */
        radial-gradient(
            ellipse at 72% 77%,
            rgba(0, 0, 0, 0.54),
            transparent 51%
        ),

        /* gespannte Innenzone zur Kalotte */
        radial-gradient(
            circle at center,
            transparent 0 18%,
            rgba(255, 255, 255, 0.014) 21%,
            rgba(40, 37, 33, 0.10) 29%,
            transparent 36%
        ),

        /* Konustiefe */
        radial-gradient(
            circle at center,
            transparent 0 40%,
            rgba(0, 0, 0, 0.11) 58%,
            rgba(0, 0, 0, 0.41) 100%
        );

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.016),
        inset 0 -2px 4px rgba(0, 0, 0, 0.11);
}

/* =========================================================
   RETROBASS R-26
   Phase B.4a
   Form und Materialkörper der Staubschutzkalotte
   ========================================================= */

.speaker__dust-cap {
    background:
        /* weiche Materialwölbung oben links */
        radial-gradient(
            ellipse at 34% 28%,
            rgba(255, 242, 216, 0.055) 0%,
            rgba(255, 236, 207, 0.018) 28%,
            transparent 52%
        ),

        /* tiefer Gegenschatten unten rechts */
        radial-gradient(
            ellipse at 72% 76%,
            rgba(0, 0, 0, 0.32) 0%,
            rgba(0, 0, 0, 0.12) 36%,
            transparent 60%
        ),

        /* eigentlicher Kalottenkörper */
        radial-gradient(
            circle at 50% 48%,
            #47423b 0%,
            #312e29 24%,
            #211f1b 48%,
            #12110f 72%,
            #060605 100%
        );

    box-shadow:
        /* diffuse Lichtkante */
        inset 1px 2px 4px
        rgba(255, 255, 255, 0.042),

        /* tiefe Rundung */
        inset -4px -5px 9px
        rgba(0, 0, 0, 0.74),

        /* feine Materialkante */
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.012),

        /* Einfassung durch die Membran */
        0 0 0 1px
        rgba(8, 8, 7, 0.76),

        0 2px 5px
        rgba(0, 0, 0, 0.56);

    filter:
        saturate(0.78)
        contrast(1.045)
        brightness(0.965);
}