/* =========================================================
   RETROBASS R-26
   Phase 2: Grundkörper
   ========================================================= */

.receiver {
    position: relative;

    width: min(82vw, 900px);
    padding-top: clamp(58px, 7vw, 82px);

    perspective: 1200px;

}

/* ---------------------------------------------------------
   Tragegriff
   --------------------------------------------------------- */

.receiver__handle {
    position: absolute;
    z-index: 1;

    top: 0;
    left: 50%;

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

    width: 72%;
    height: clamp(74px, 8vw, 92px);

    overflow: visible;
    isolation: isolate;

    transform: translateX(-50%);
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.1a
   Gepolsterter Ledergriff – Form und Proportionen
   ========================================================= */

.receiver__handle-grip {
    position: absolute;
    z-index: 2;

    top: 0;
    left: 50%;

    width:
        calc(
            100% - 72px
        );

    height:
        clamp(
            25px,
            3vw,
            31px
        );

    overflow: hidden;

    border:
        1px solid
        rgba(
            27,
            14,
            7,
            0.96
        );

    border-radius:
        13px 13px 10px 10px
        /
        10px 10px 8px 8px;

    background:
        linear-gradient(
            180deg,

            #33231c 0%,
            #241712 20%,
            #1b100d 54%,
            #120a08 82%,
            #0a0605 100%
        );

    box-shadow:
        inset 0 2px 2px
        rgba(
            255,
            226,
            194,
            0.075
        ),

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

        inset 5px 0 8px
        rgba(
            255,
            210,
            172,
            0.025
        ),

        inset -5px 0 8px
        rgba(
            0,
            0,
            0,
            0.28
        ),

        0 4px 7px
        rgba(
            0,
            0,
            0,
            0.34
        ),

        0 9px 15px
        rgba(
            0,
            0,
            0,
            0.18
        );

    transform:
        translateX(-50%)
        perspective(420px)
        rotateX(-2deg);

    transform-origin:
        center bottom;
}

.receiver__handle-grip::before {
    content: "";

    position: absolute;

    z-index: 1;

    top: 2px;
    right: 8%;
    bottom: 4px;
    left: 8%;

    border-radius:
        50%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at 50% 20%,

            rgba(
                255,
                226,
                197,
                0.055
            ) 0%,

            rgba(
                126,
                78,
                55,
                0.028
            ) 38%,

            transparent 72%
        );

    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            229,
            202,
            0.030
        );

    opacity:
        0.92;
}

.receiver__handle-grip::after {
    content: "";

    position: absolute;

    z-index: 1;

    right: 4%;
    bottom: 2px;
    left: 4%;

    height:
        4px;

    border-radius:
        50%;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,

            transparent,
            rgba(
                0,
                0,
                0,
                0.42
            )
        );

    filter:
        blur(1px);
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.1b
   Vollnarbenleder – Poren, Tiefe und Materialvariation
   ========================================================= */


/* ---------------------------------------------------------
   Feine Lederporen und unregelmäßige Narbung
   --------------------------------------------------------- */

.receiver__handle-grip::before {
    background:
        /* sehr feine, unregelmäßige Poren */
        radial-gradient(
            circle at 12% 28%,
            rgba(255, 235, 210, 0.032) 0 0.7px,
            transparent 0.9px
        ),

        radial-gradient(
            circle at 26% 64%,
            rgba(0, 0, 0, 0.050) 0 0.8px,
            transparent 1px
        ),

        radial-gradient(
            circle at 41% 22%,
            rgba(255, 229, 199, 0.025) 0 0.6px,
            transparent 0.9px
        ),

        radial-gradient(
            circle at 58% 71%,
            rgba(0, 0, 0, 0.046) 0 0.8px,
            transparent 1px
        ),

        radial-gradient(
            circle at 73% 35%,
            rgba(255, 236, 210, 0.028) 0 0.7px,
            transparent 1px
        ),

        radial-gradient(
            circle at 89% 66%,
            rgba(0, 0, 0, 0.052) 0 0.8px,
            transparent 1px
        ),

        /* feine Längsstruktur */
        repeating-linear-gradient(
            103deg,
            transparent 0,
            transparent 4px,
            rgba(255, 230, 203, 0.012) 5px,
            transparent 6px
        ),

        repeating-linear-gradient(
            77deg,
            transparent 0,
            transparent 7px,
            rgba(0, 0, 0, 0.018) 8px,
            transparent 9px
        ),

        /* Polsterung bleibt erhalten */
        radial-gradient(
            ellipse at 50% 20%,
            rgba(255, 226, 197, 0.052) 0%,
            rgba(126, 78, 55, 0.026) 38%,
            transparent 72%
        );

    background-size:
        17px 13px,
        19px 15px,
        23px 17px,
        21px 16px,
        18px 14px,
        25px 19px,
        auto,
        auto,
        auto;

    background-position:
        0 0,
        7px 4px,
        3px 9px,
        11px 2px,
        5px 6px,
        13px 8px,
        0 0,
        0 0,
        0 0;

    mix-blend-mode:
        soft-light;

    opacity:
        0.78;

    filter:
        contrast(1.04);
}


/* ---------------------------------------------------------
   Natürliche, leicht ungleichmäßige Lederfärbung
   --------------------------------------------------------- */

.receiver__handle-grip {
    background:
        radial-gradient(
            ellipse at 18% 28%,
            rgba(112, 68, 47, 0.14),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 74% 62%,
            rgba(69, 38, 26, 0.16),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 51% 18%,
            rgba(157, 101, 72, 0.055),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #38261f 0%,
            #2b1b16 18%,
            #21130f 48%,
            #170d0a 76%,
            #0b0705 100%
        );
}


/* ---------------------------------------------------------
   Leicht geglättete Kanten durch Benutzung
   --------------------------------------------------------- */

.receiver__handle-grip {
    box-shadow:
        inset 0 2px 2px
        rgba(255, 226, 194, 0.085),

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

        inset 6px 0 9px
        rgba(255, 210, 172, 0.030),

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

        inset 0 0 0 1px
        rgba(255, 221, 190, 0.020),

        0 4px 7px
        rgba(0, 0, 0, 0.34),

        0 9px 15px
        rgba(0, 0, 0, 0.18);
}


/* ---------------------------------------------------------
   Sehr dezente matte Materialreaktion
   --------------------------------------------------------- */

.receiver__handle-grip {
    filter:
        saturate(0.94)
        brightness(0.98);
}

.receiver__handle-grip{

    transform:
        translateX(-50%)
        perspective(420px)
        rotateX(-2deg)
        translateY(0.4px);

}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.1c
   Handwerkliche Ledernaht
   ========================================================= */

.receiver__handle-stitch {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 8%;

    width: 84%;
    height: 6px;

    pointer-events: none;

    transform:
        translateY(-50%)
        rotate(-0.18deg);

    opacity: 0.82;
}

.receiver__handle-stitch {
    clip-path:
        polygon(
            0% 46%,
            8% 44%,
            17% 48%,
            29% 45%,
            41% 49%,
            55% 46%,
            68% 50%,
            82% 47%,
            100% 49%,
            100% 100%,
            0% 100%
        );
}

/* einzelne Nahtstiche */
.receiver__handle-stitch::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            90deg,

            rgba(
                213,
                177,
                132,
                0.86
            ) 0 4px,

            transparent 4px 9px,

            rgba(
                201,
                162,
                116,
                0.74
            ) 9px 13px,

            transparent 13px 19px
        );

    border-radius: 50%;

    mask:
        linear-gradient(
            180deg,
            transparent 0 34%,
            #000 35% 64%,
            transparent 65% 100%
        );

    filter:
        blur(0.08px);

    box-shadow:
        0 1px 0
        rgba(
            0,
            0,
            0,
            0.34
        );
}

/* minimale Vertiefung der Naht im Leder */
.receiver__handle-stitch::after {
    content: "";

    position: absolute;

    top: 50%;
    right: -1%;
    left: -1%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,

            rgba(
                0,
                0,
                0,
                0.34
            ) 8%,

            rgba(
                0,
                0,
                0,
                0.42
            ) 50%,

            rgba(
                0,
                0,
                0,
                0.28
            ) 92%,

            transparent 100%
        );

    transform:
        translateY(-50%);

    filter:
        blur(0.3px);
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3f.2
   Materialdialog Champagner-Aluminium ↔ Messing
   ========================================================= */

.receiver__handle-mount {
    position: absolute;
    z-index: 4;

    top: 10px;

    width: 20px;
    height: 63px;

    overflow: visible;

    border:
        1px solid
        rgba(54, 44, 34, 0.94);

    border-radius:
        10px 10px 4px 4px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 68%,
            rgba(183, 121, 44, 0.055) 84%,
            rgba(110, 67, 24, 0.075) 100%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.022) 0,
            rgba(255, 255, 255, 0.022) 1px,
            rgba(67, 56, 44, 0.010) 1px,
            rgba(67, 56, 44, 0.010) 2px,
            transparent 2px,
            transparent 4px
        ),

        linear-gradient(
            90deg,
            #625a51 0%,
            #aaa095 18%,
            #d8d0c3 35%,
            #9b9185 56%,
            #e2d9cc 76%,
            #6a6158 100%
        );

    box-shadow:
        inset 1px 0 1px rgba(255, 250, 240, 0.24),
        inset -2px 0 3px rgba(39, 31, 24, 0.40),
        inset 0 -7px 9px rgba(231, 223, 211, 0.038),
        inset 0 -3px 5px rgba(178, 116, 39, 0.070),
        0 4px 8px rgba(0, 0, 0, 0.36),
        0 8px 13px rgba(0, 0, 0, 0.14);

    transform-origin:
        bottom center;
}

.receiver__handle-mount::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 2px;
    left: 50%;

    width: 12px;
    aspect-ratio: 1;

    border:
        1px solid
        rgba(70, 43, 14, 0.88);

    border-radius: 50%;

    background:
        linear-gradient(
            180deg,
            rgba(236, 231, 220, 0.10) 0%,
            transparent 34%
        ),

        radial-gradient(
            circle at 34% 28%,
            #f1d58f 0%,
            #c28d3f 34%,
            #895a22 64%,
            #4f2f0d 100%
        );

    box-shadow:
        inset 0 1px 1px rgba(255, 242, 201, 0.44),
        inset -1px -1px 2px rgba(45, 22, 4, 0.34),
        inset 0 0 0 1px rgba(224, 219, 209, 0.045),
        0 1px 2px rgba(0, 0, 0, 0.38);

    transform:
        translateX(-50%)
        rotate(1deg);
}

.receiver__handle-mount::after {
    content: "";

    position: absolute;
    z-index: 1;

    bottom: -9px;
    left: 50%;

    width: 31px;
    height: 16px;

    pointer-events: none;

    border:
        1px solid
        rgba(55, 34, 12, 0.88);

    border-radius:
        50% 50% 5px 5px
        /
        42% 42% 22% 22%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 240, 196, 0.025) 0,
            rgba(255, 240, 196, 0.025) 1px,
            transparent 1px,
            transparent 3px
        ),

        linear-gradient(
            180deg,
            #e3dacf 0%,
            #c6bdb2 17%,
            #a79d91 31%,
            #a88e68 39%,
            #392818 43%,
            #1d130c 48%,
            #d8b46e 49%,
            #c3944f 57%,
            #9a6728 72%,
            #754615 88%,
            #2a1607 100%
        );

    box-shadow:
        inset 0 1px 1px rgba(255, 252, 244, 0.38),
        inset 0 -8px 3px rgba(231, 223, 211, 0.035),
        inset 0 -3px 3px rgba(65, 31, 6, 0.44),
        inset 2px 0 2px rgba(255, 238, 202, 0.12),
        inset -2px 0 3px rgba(34, 21, 11, 0.28),
        0 0 0 1px rgba(101, 62, 19, 0.24),
        0 2px 0 rgba(29, 14, 6, 0.72),
        0 4px 5px rgba(0, 0, 0, 0.34);

    transform:
        translateX(-50%);
}

.receiver__handle-mount--left {

    left:18px;

    transform:
        rotate(-1.2deg);
}

.receiver__handle-mount--right {

    right:18px;

    transform:
        rotate(1.2deg);
}

/* ---------------------------------------------------------
   Hauptgehäuse
   --------------------------------------------------------- */

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

    aspect-ratio: 48 / 30;

    border: 1px solid rgba(16, 8, 4, 0.95);
    border-radius: clamp(18px, 2vw, 28px);

    background:
        linear-gradient(
            90deg,
            rgba(255, 218, 171, 0.08),
            transparent 12%,
            transparent 86%,
            rgba(0, 0, 0, 0.18)
        ),
        repeating-linear-gradient(
            2deg,
            rgba(255, 230, 195, 0.025) 0,
            rgba(255, 230, 195, 0.025) 1px,
            transparent 1px,
            transparent 8px
        ),
        linear-gradient(
            135deg,
            #75421f 0%,
            #4d2915 23%,
            #6b3b1e 48%,
            #35190d 72%,
            #5d3017 100%
        );

    box-shadow:
        inset 1px 0 0 rgba(255, 247, 231, 0.05),
        inset -1px 0 0 rgba(40, 27, 16, 0.18),

        inset 0 1px 0 rgba(255, 231, 196, 0.18),
        inset 0 -4px 8px rgba(0, 0, 0, 0.40),
        inset 4px 0 8px rgba(255, 208, 151, 0.035),

        0 26px 36px rgba(0, 0, 0, 0.48),
        0 10px 14px rgba(0, 0, 0, 0.42);

    transform: translateZ(0);
}

/* Holzmaserung */

.receiver__body::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    opacity: 0.66;

    background:
        radial-gradient(
            ellipse at 13% 24%,
            transparent 0 24px,
            rgba(31, 13, 5, 0.30) 26px 28px,
            transparent 31px
        ),
        radial-gradient(
            ellipse at 69% 14%,
            transparent 0 42px,
            rgba(29, 12, 5, 0.20) 44px 46px,
            transparent 50px
        ),
        repeating-linear-gradient(
            174deg,
            transparent 0,
            transparent 13px,
            rgba(27, 11, 4, 0.16) 14px,
            transparent 16px,
            transparent 23px
        );

    mix-blend-mode: multiply;
}

.receiver__body::after {
    content: "";

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

    border-radius: inherit;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 3px rgba(255, 208, 149, 0.035),
        inset 0 0 0 8px rgba(29, 12, 5, 0.24);
}

.receiver__top-highlight {
    position: absolute;
    z-index: 4;

    top: 4px;
    left: 5%;

    width: 90%;
    height: 2px;

    border-radius: 50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 222, 181, 0.22),
            transparent
        );
}

/* ---------------------------------------------------------
   Front
   --------------------------------------------------------- */

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

    inset:
        clamp(17px, 2vw, 25px)
        clamp(19px, 2.2vw, 28px)
        clamp(19px, 2.2vw, 27px);

    display: grid;
    grid-template-rows: minmax(0, 1fr) 28%;

    overflow: hidden;

    border:
        1px solid
        rgba(8, 5, 3, 0.92);

    border-radius:
        clamp(11px, 1.4vw, 17px);

    outline:
        1px solid
        rgba(38, 27, 17, 0.22);

    outline-offset:
        -1px;

    background:
        #0b0908;

    /*
     * Phase 4.3f.1 – Materialdialog Holz ↔ Front
     *
     * Außen:
     * - warmer Reflex vom Walnussholz
     * - dunkle, glaubwürdige Montagefuge
     *
     * Innen:
     * - feine Lichtkante
     * - ruhige technische Tiefe
     */
    box-shadow:
        0 0 0 1px rgba(224, 166, 93, 0.16),
        0 0 0 4px rgba(18, 9, 5, 0.44),
        0 2px 4px rgba(0, 0, 0, 0.20),
        0 8px 14px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 244, 222, 0.055),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16),
        inset 0 2px 8px rgba(0, 0, 0, 0.88),
        inset 0 0 0 1px rgba(255, 224, 185, 0.035);
}

.receiver__upper {
    display: grid;
    grid-template-columns: 53% 47%;

    min-height: 0;
}

/* Nur Grundflächen – Details kommen später */

.receiver__speaker-area {
    position: relative;

    min-width: 0;

    border-right: 1px solid rgba(205, 143, 68, 0.46);

    background:
        radial-gradient(
            circle at center,
            rgba(38, 34, 30, 0.30),
            transparent 58%
        ),
        linear-gradient(
            145deg,
            #13110f,
            #070605
        );

    box-shadow:
        inset -2px 0 5px rgba(0, 0, 0, 0.54);
}

.receiver__display-area {
    position: relative;

    min-width: 0;

    background:
        radial-gradient(
            circle at 52% 38%,
            rgba(82, 47, 19, 0.10),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            #100e0d,
            #040403
        );

    box-shadow:
        inset 2px 0 5px rgba(255, 255, 255, 0.015);
}

/* ---------------------------------------------------------
   Aluminiumleiste
   Phase 4.3d.1 – gebürstetes Champagner-Aluminium
   mit Lichtführung und Materialtiefe
   --------------------------------------------------------- */

.receiver__controls-area {
    position: relative;

    overflow: hidden;
    isolation: isolate;

    border-top:
        1px solid
        rgba(
            24,
            16,
            10,
            0.92
        );

    background:
        /* warmer Reflex vom Walnussholz an den Seiten */
        linear-gradient(
            90deg,
            rgba(116, 70, 35, 0.055) 0%,
            rgba(255, 244, 222, 0.028) 3%,
            transparent 14%,
            transparent 86%,
            rgba(78, 48, 28, 0.040) 97%,
            rgba(31, 20, 13, 0.055) 100%
        ),

        linear-gradient(
            180deg,
            transparent 0%,
            rgba(255, 250, 239, 0.026) 28%,
            rgba(255, 244, 224, 0.048) 43%,
            rgba(123, 101, 78, 0.020) 58%,
            transparent 76%
        ),

        linear-gradient(
            90deg,
            rgba(255, 252, 244, 0.085) 0%,
            transparent 13%,
            transparent 84%,
            rgba(75, 55, 37, 0.12) 100%
        ),

        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.024) 0,
            rgba(255, 255, 255, 0.024) 1px,
            rgba(75, 61, 47, 0.010) 1px,
            rgba(75, 61, 47, 0.010) 2px,
            transparent 2px,
            transparent 4px
        ),

        linear-gradient(
            180deg,
            #d8d0c3 0%,
            #c8beb0 18%,
            #aaa092 49%,
            #8d8274 76%,
            #756b5e 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 253, 246, 0.42),
        inset 0 2px 5px rgba(255, 245, 226, 0.055),
        inset 0 -3px 6px rgba(42, 30, 20, 0.30),
        inset 0 -8px 14px rgba(62, 45, 31, 0.075),
        inset 0 0 0 1px rgba(255, 236, 204, 0.035),
        0 -1px 0 rgba(255, 230, 190, 0.040);
}

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

    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    opacity: 0.46;

    background:
        repeating-linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.020) 0,
            rgba(255, 255, 255, 0.020) 1px,
            rgba(67, 52, 39, 0.010) 1px,
            rgba(67, 52, 39, 0.010) 2px,
            transparent 2px,
            transparent 5px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 0%,
            transparent 24%,
            rgba(255, 246, 226, 0.022) 52%,
            transparent 76%,
            rgba(47, 34, 24, 0.025) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 248, 235, 0.030);
}

.receiver__controls-area::after {
    content: "";

    position: absolute;
    z-index: 0;

    inset: 0;

    pointer-events: none;

    opacity: 0.16;

    background:
        radial-gradient(
            ellipse at 16% 18%,
            rgba(255, 249, 236, 0.10),
            transparent 29%
        ),

        radial-gradient(
            ellipse at 72% 72%,
            rgba(255, 238, 208, 0.055),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 48% 40%,
            rgba(73, 56, 42, 0.040),
            transparent 42%
        );
}

.receiver__controls-area > .controls {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------
   Sockel und Füße
   --------------------------------------------------------- */

.receiver__foot {
    position: absolute;
    z-index: -1;

    bottom: -13px;

    width: 9%;
    height: 20px;

    border-radius: 3px 3px 9px 9px;

    background:
        linear-gradient(
            180deg,
            #211b17,
            #090807
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 10px rgba(0, 0, 0, 0.38);
}

.receiver__foot--left {
    left: 9%;
}

.receiver__foot--right {
    right: 9%;
}

/* Geräteschatten auf dem Tisch */

.receiver::after {
    content: "";

    position: absolute;
    z-index: -2;

    bottom: -30px;
    left: 50%;

    width: 88%;
    height: 58px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.62);

    filter: blur(19px);
    transform: translateX(-50%);
}

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

@media (max-width: 720px) {
    .receiver {
        width: min(94vw, 640px);
        padding-top: 48px;
    }

    .receiver__handle {
        width: 75%;
        height: 62px;
    }

    .receiver__handle-grip {
    width:
        calc(
            100% - 54px
        );

    height:
        clamp(
            20px,
            4vw,
            25px
        );

    border-radius:
        11px 11px 8px 8px
        /
        8px 8px 6px 6px;
}

    .receiver__handle-mount {
        top: 8px;

        width: 14px;
        height: 45px;
    }

.receiver__handle-mount::after {
    bottom: -7px;

    width: 23px;
    height: 12px;

    border-radius:
        50% 50% 4px 4px
        /
        42% 42% 22% 22%;

    box-shadow:
        inset 0 1px 1px
        rgba(
            255,
            252,
            244,
            0.32
        ),

        inset 0 -2px 2px
        rgba(
            42,
            21,
            5,
            0.46
        ),

        0 1px 0
        rgba(
            29,
            14,
            6,
            0.68
        ),

        0 3px 4px
        rgba(
            0,
            0,
            0,
            0.30
        );
}

    .receiver__handle-mount--left {
        left: 13px;
    }

    .receiver__handle-mount--right {
        right: 13px;
    }

    .receiver__front {
        inset: 14px 15px 16px;
    }
}

@media (max-width: 480px) {
    .receiver__front {
        grid-template-rows: minmax(0, 1fr) 30%;
    }

    .receiver__body {
        border-radius: 16px;
    }

    .receiver__front {
        border-radius: 9px;
    }
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.1d
   Geglättete Lederkanten und minimale Gebrauchsspuren
   ========================================================= */


/* ---------------------------------------------------------
   Oberkante:
   leicht geglättet durch Berührung
   --------------------------------------------------------- */

.receiver__handle-grip {
    border-color:
        rgba(
            30,
            15,
            8,
            0.98
        );

    box-shadow:
        inset 0 2px 2px
        rgba(
            255,
            228,
            198,
            0.095
        ),

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

        inset 7px 0 10px
        rgba(
            255,
            214,
            177,
            0.032
        ),

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

        inset 0 0 0 1px
        rgba(
            255,
            224,
            194,
            0.024
        ),

        0 4px 7px
        rgba(
            0,
            0,
            0,
            0.34
        ),

        0 9px 15px
        rgba(
            0,
            0,
            0,
            0.18
        );
}


/* ---------------------------------------------------------
   Dezente Handkontakt-Zone in der Mitte

   Nicht sichtbar wie ein Fleck –
   nur minimal glatter und wärmer.
   --------------------------------------------------------- */

.receiver__handle-grip::before {
    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            229,
            202,
            0.034
        ),

        inset 0 -1px 2px
        rgba(
            0,
            0,
            0,
            0.12
        );

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


/* ---------------------------------------------------------
   Weiche Kantenpolitur
   --------------------------------------------------------- */

.receiver__handle-grip::after {
    right: 3%;
    bottom: 1px;
    left: 3%;

    height: 5px;

    background:
        linear-gradient(
            180deg,

            rgba(
                111,
                70,
                49,
                0.035
            ),

            rgba(
                0,
                0,
                0,
                0.46
            )
        );

    filter:
        blur(1.2px);
}


/* ---------------------------------------------------------
   Naht reagiert minimal auf die geglättete Oberfläche
   --------------------------------------------------------- */

.receiver__handle-stitch {
    opacity:
        0.78;

    filter:
        saturate(0.88)
        brightness(0.98);
}


/* ---------------------------------------------------------
   Sehr kleine Unregelmäßigkeit an den Enden

   Dort wird Leder häufig stärker gespannt.
   --------------------------------------------------------- */

.receiver__handle-grip {
    background:
        radial-gradient(
            ellipse at 5% 52%,
            rgba(
                0,
                0,
                0,
                0.18
            ),
            transparent 18%
        ),

        radial-gradient(
            ellipse at 95% 52%,
            rgba(
                0,
                0,
                0,
                0.20
            ),
            transparent 18%
        ),

        radial-gradient(
            ellipse at 18% 28%,
            rgba(
                112,
                68,
                47,
                0.14
            ),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 74% 62%,
            rgba(
                69,
                38,
                26,
                0.16
            ),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 51% 18%,
            rgba(
                157,
                101,
                72,
                0.055
            ),
            transparent 40%
        ),

        linear-gradient(
            180deg,

            #39271f 0%,
            #2c1c16 18%,
            #21130f 48%,
            #170d0a 76%,
            #0b0705 100%
        );
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.3a.1
   Messing-Schraubenkopf
   ========================================================= */

.mount-screw {
    position: absolute;
    z-index: 5;

    left: 50%;

    display: block;

    width: 7px;
    height: 7px;

    border:
        1px solid
        rgba(
            78,
            46,
            14,
            0.82
        );

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 32% 28%,
            #f6dda1 0%,
            #ddb15d 24%,
            #b17832 54%,
            #7b4c18 82%,
            #4d2d0d 100%
        );

    box-shadow:
        inset 0 0.8px 0.8px
        rgba(
            255,
            244,
            210,
            0.55
        ),

        inset -0.8px -1px 1.6px
        rgba(
            58,
            33,
            10,
            0.42
        ),

        0 0.8px 1.5px
        rgba(
            0,
            0,
            0,
            0.35
        );

    transform:
        translateX(-50%);
}

.mount-screw--top {
    top: 20px;
}

.mount-screw--bottom {
    top: 39px;
}

.receiver__handle-mount--left
.mount-screw::after {
    transform:
        translate(-50%, -50%)
        rotate(-1deg);
}

.receiver__handle-mount--right
.mount-screw::after {
    transform:
        translate(-50%, -50%)
        rotate(1deg);
}

.mount-screw {
    box-shadow:
        inset 0 0.8px 0.8px
        rgba(
            255,
            244,
            210,
            0.55
        ),

        inset -0.8px -1px 1.6px
        rgba(
            58,
            33,
            10,
            0.42
        ),

        0 0 0 1px
        rgba(
            52,
            31,
            11,
            0.42
        ),

        0 1px 1.5px
        rgba(
            0,
            0,
            0,
            0.36
        );
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.3a.2
   Schlitz der Messingschrauben
   ========================================================= */

.mount-screw::before {
    content: "";

    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: 4.5px;
    height: 1.2px;

    border-radius: 1px;

    background:
        linear-gradient(
            180deg,
            #241204 0%,
            #60320d 100%
        );

    box-shadow:
        inset 0 1px 0
        rgba(
            255,
            221,
            158,
            0.08
        ),

        0 1px 0
        rgba(
            255,
            234,
            190,
            0.10
        );

    transform:
        translate(-50%, -50%)
        rotate(-7deg);
}

.receiver__handle-mount--left
.mount-screw--top::before {
    transform:
        translate(-50%, -50%)
        rotate(-8deg);
}

.receiver__handle-mount--left
.mount-screw--bottom::before {
    transform:
        translate(-50%, -50%)
        rotate(-4deg);
}

.receiver__handle-mount--right
.mount-screw--top::before {
    transform:
        translate(-50%, -50%)
        rotate(5deg);
}

.receiver__handle-mount--right
.mount-screw--bottom::before {
    transform:
        translate(-50%, -50%)
        rotate(8deg);
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3e.3b
   Gefräste Senkung für die Messing-Schlitzschrauben
   ========================================================= */

/* ---------------------------------------------------------
   Senkkranz unter dem Schraubenkopf
   --------------------------------------------------------- */

.mount-screw::after {
    content: "";

    position: absolute;
    z-index: -1;

    top: 50%;
    left: 50%;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 38% 32%,

            rgba(
                255,
                248,
                232,
                0.12
            ) 0%,

            rgba(
                174,
                162,
                145,
                0.10
            ) 18%,

            rgba(
                61,
                49,
                37,
                0.36
            ) 48%,

            rgba(
                22,
                16,
                11,
                0.78
            ) 72%,

            rgba(
                8,
                6,
                4,
                0.94
            ) 100%
        );

    box-shadow:
        inset 0 1px 1px
        rgba(
            255,
            249,
            238,
            0.10
        ),

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

        0 0 0 1px
        rgba(
            53,
            42,
            31,
            0.38
        ),

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

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

/* =========================================================
   RETROBASS R-26
   Phase 4.3f.3a
   Warmer Lederreflex auf der Messingachse
   ========================================================= */

.receiver__handle-mount::before {
    background:
        /* weicher Reflex des dunklen Leders */
        radial-gradient(
            ellipse at 50% 18%,

            rgba(
                79,
                45,
                31,
                0.15
            ) 0%,

            rgba(
                52,
                28,
                19,
                0.075
            ) 28%,

            transparent 58%
        ),

        /* neutraler Reflex des Champagner-Aluminiums */
        linear-gradient(
            180deg,

            rgba(
                236,
                231,
                220,
                0.095
            ) 0%,

            transparent 36%
        ),

        /* eigentlicher Messingkörper */
        radial-gradient(
            circle at 34% 28%,

            #f1d58f 0%,
            #c28d3f 34%,
            #895a22 64%,
            #4f2f0d 100%
        );

    box-shadow:
        inset 0 1px 1px
        rgba(
            255,
            242,
            201,
            0.42
        ),

        inset -1px -1px 2px
        rgba(
            45,
            22,
            4,
            0.34
        ),

        /* dunkler Leder-Gegenschein an der oberen Achsenzone */
        inset 0 2px 2px
        rgba(
            55,
            29,
            19,
            0.075
        ),

        /* feiner Aluminium-Präzisionsreflex */
        inset 0 0 0 1px
        rgba(
            224,
            219,
            209,
            0.042
        ),

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

/* =========================================================
   RETROBASS R-26
   Phase 4.3f.3b
   Feiner Messingreflex an den Ledergriff-Enden
   ========================================================= */

.receiver__handle-grip {
    background:
        /* linker warmer Messingreflex */
        radial-gradient(
            ellipse at 3% 48%,
            rgba(191, 132, 55, 0.055) 0%,
            rgba(133, 82, 31, 0.028) 24%,
            transparent 48%
        ),

        /* rechter warmer Messingreflex */
        radial-gradient(
            ellipse at 97% 48%,
            rgba(191, 132, 55, 0.050) 0%,
            rgba(133, 82, 31, 0.026) 24%,
            transparent 48%
        ),

        /* bisherige dunkle Endspannung */
        radial-gradient(
            ellipse at 5% 52%,
            rgba(0, 0, 0, 0.18),
            transparent 18%
        ),

        radial-gradient(
            ellipse at 95% 52%,
            rgba(0, 0, 0, 0.20),
            transparent 18%
        ),

        /* vorhandene natürliche Lederfärbung */
        radial-gradient(
            ellipse at 18% 28%,
            rgba(112, 68, 47, 0.14),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 74% 62%,
            rgba(69, 38, 26, 0.16),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 51% 18%,
            rgba(157, 101, 72, 0.055),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #39271f 0%,
            #2c1c16 18%,
            #21130f 48%,
            #170d0a 76%,
            #0b0705 100%
        );
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3f.3c
   Feine Schattenfuge zwischen Ledergriff und Messingachse
   ========================================================= */

/* ---------------------------------------------------------
   Kleine Kontaktfuge an den Griffenden
   --------------------------------------------------------- */

.receiver__handle-grip {
    box-shadow:
        inset 0 2px 2px
        rgba(
            255,
            228,
            198,
            0.095
        ),

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

        inset 7px 0 10px
        rgba(
            255,
            214,
            177,
            0.032
        ),

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

        /* linke Kontaktfuge zur Messingachse */
        inset 3px 0 3px
        rgba(
            23,
            12,
            7,
            0.22
        ),

        /* rechte Kontaktfuge zur Messingachse */
        inset -3px 0 3px
        rgba(
            23,
            12,
            7,
            0.24
        ),

        inset 0 0 0 1px
        rgba(
            255,
            224,
            194,
            0.024
        ),

        0 4px 7px
        rgba(
            0,
            0,
            0,
            0.34
        ),

        0 9px 15px
        rgba(
            0,
            0,
            0,
            0.18
        );
}

.receiver__handle-grip::before {
    box-shadow:
        inset 0 1px 2px
        rgba(
            255,
            229,
            202,
            0.034
        ),

        inset 0 -1px 2px
        rgba(
            0,
            0,
            0,
            0.12
        ),

        inset 5px 0 4px
        rgba(
            18,
            9,
            5,
            0.13
        ),

        inset -5px 0 4px
        rgba(
            18,
            9,
            5,
            0.15
        );
}

/* =========================================================
   RETROBASS R-26
   Phase 4.3f.3d
   Leichte Materialspannung an den Lederenden
   ========================================================= */

.receiver__handle-grip {
    background:
        /* linke gespannte Lederzone */
        radial-gradient(
            ellipse at 4% 50%,
            rgba(16, 8, 5, 0.22) 0%,
            rgba(44, 24, 15, 0.12) 28%,
            transparent 52%
        ),

        /* rechte gespannte Lederzone */
        radial-gradient(
            ellipse at 96% 50%,
            rgba(16, 8, 5, 0.24) 0%,
            rgba(44, 24, 15, 0.13) 28%,
            transparent 52%
        ),

        /* Messingreflex bleibt erhalten */
        radial-gradient(
            ellipse at 3% 48%,
            rgba(191, 132, 55, 0.050) 0%,
            rgba(133, 82, 31, 0.026) 24%,
            transparent 48%
        ),

        radial-gradient(
            ellipse at 97% 48%,
            rgba(191, 132, 55, 0.046) 0%,
            rgba(133, 82, 31, 0.024) 24%,
            transparent 48%
        ),

        /* natürliche Lederfärbung */
        radial-gradient(
            ellipse at 18% 28%,
            rgba(112, 68, 47, 0.14),
            transparent 28%
        ),

        radial-gradient(
            ellipse at 74% 62%,
            rgba(69, 38, 26, 0.16),
            transparent 34%
        ),

        radial-gradient(
            ellipse at 51% 18%,
            rgba(157, 101, 72, 0.055),
            transparent 40%
        ),

        linear-gradient(
            180deg,
            #39271f 0%,
            #2c1c16 18%,
            #21130f 48%,
            #170d0a 76%,
            #0b0705 100%
        );
}

.receiver__handle-grip::before {
    transform:
        scaleX(0.992);

    transform-origin:
        center;
}