/* RE-PUBLIC-ARCHIVE-V1 */

body.re-archive-page {
    background: #03090d;
}

.re-archive-page #main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.re-archive-stage {
    position: relative;
    min-height: calc(100vh - 110px);
    padding: 42px 22px 72px;
    overflow: hidden;
    isolation: isolate;
    background: #03090d;
}

.re-archive-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.24),
            rgba(0,0,0,.70)
        ),
        url("/media/bilder/re-archiv-sound-wave.jpg")
        center center / cover no-repeat;

    opacity: .96;
}

.re-archive-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at 50% 28%,
            rgba(0,217,235,.10),
            transparent 35%
        );
}

.re-archive-shell {
    width: min(1380px, 100%);
    margin: 0 auto;
}

.re-archive-head {
    text-align: center;
    margin: 0 0 30px;
}

.re-archive-head h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(46px, 6vw, 88px);
    line-height: .98;
    letter-spacing: .03em;
    text-shadow: 0 5px 30px rgba(0,0,0,.65);
}

.re-archive-head p {
    margin: 12px auto 0;
    max-width: 760px;
    color: #e2edf0;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.45;
}

.re-archive-player {
    display: grid;
    grid-template-columns: 190px minmax(0,1fr);
    gap: 24px;

    padding: 24px;
    margin-bottom: 24px;

    border: 1px solid rgba(71,220,236,.36);
    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            rgba(5,20,29,.92),
            rgba(2,11,17,.96)
        );

    box-shadow:
        0 22px 55px rgba(0,0,0,.50),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.re-archive-cover {
    width: 190px;
    height: 190px;

    border-radius: 13px;
    overflow: hidden;

    border: 1px solid rgba(71,220,236,.30);
    background: rgba(0,0,0,.36);
}

.re-archive-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-archive-player-main {
    min-width: 0;
}

.re-archive-upper {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(330px,440px);
    gap: 26px;
    align-items: start;
}

.re-archive-current-title {
    margin: 0 0 6px;
    color: #fff;
    font-size: 29px;
    line-height: 1.1;
}

.re-archive-current-meta {
    color: #c2d5da;
    font-size: 16px;
}

.re-archive-current-description {
    margin-top: 12px;
    max-width: 670px;

    color: #aebfc5;
    font-size: 15px;
    line-height: 1.5;
}

.re-vu {
    padding: 13px 14px 10px;

    border: 1px solid rgba(71,220,236,.18);
    border-radius: 11px;

    background: rgba(1,18,27,.72);
}

.re-vu-row {
    display: grid;
    grid-template-columns: 20px minmax(0,1fr) 66px;
    gap: 9px;
    align-items: center;

    margin-bottom: 7px;
}

.re-vu-label {
    color: #d8faff;
    font-size: 13px;
    font-weight: 700;
}

.re-vu-bars {
    display: grid;
    grid-template-columns: repeat(30,1fr);
    gap: 2px;
    height: 18px;
}

.re-vu-bars span {
    display: block;
    min-width: 2px;

    border-radius: 1px;

    background: rgba(121,151,160,.25);
}

.re-vu-bars span.active {
    background: #32dce9;
    box-shadow: 0 0 6px rgba(50,220,233,.22);
}

.re-vu-bars span.warn {
    background: #d5aa2f;
}

.re-vu-bars span.hot {
    background: #d05243;
}

.re-vu-db {
    color: #b9d4da;
    font-size: 11px;
    text-align: right;
}

.re-vu-scale {
    display: flex;
    justify-content: space-between;

    padding-left: 28px;
    color: #73939c;
    font-size: 10px;
}

.re-archive-controls {
    display: grid;
    grid-template-columns: auto auto auto minmax(220px,1fr) 210px;
    gap: 14px;
    align-items: center;

    margin-top: 20px;
}

.re-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid rgba(133,171,182,.35);
    border-radius: 50%;

    color: #fff;
    background: rgba(5,16,23,.88);

    font: inherit;
    font-size: 17px;

    cursor: pointer;
    transition: .18s ease;
}

.re-control:hover {
    border-color: #35dce9;
    box-shadow: 0 0 18px rgba(53,220,233,.22);
    transform: translateY(-1px);
}

.re-control-main {
    width: 68px;
    height: 68px;

    border: 2px solid #33dce9;
    color: #55effa;

    font-size: 24px;

    box-shadow: 0 0 22px rgba(53,220,233,.25);
}

.re-seek {
    min-width: 0;
}

.re-time {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    color: #b8eef3;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.re-range {
    width: 100%;
    height: 8px;

    border: 0;
    border-radius: 999px;

    background: #4d5c62;

    accent-color: #31dce8;
    cursor: pointer;
}

.re-volume {
    display: grid;
    grid-template-columns: 27px minmax(0,1fr);
    gap: 9px;
    align-items: center;

    color: #fff;
}

.re-spectrum {
    margin-top: 18px;

    padding: 10px 12px 12px;

    border: 1px solid rgba(71,220,236,.15);
    border-radius: 10px;

    background: rgba(0,14,22,.64);
}

.re-spectrum-head {
    display: flex;
    justify-content: space-between;

    margin-bottom: 7px;

    color: #789ba5;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

#re-archive-spectrum {
    display: block;

    width: 100%;
    height: 105px;

    border-radius: 8px;
}

.re-archive-list {
    overflow: hidden;

    border: 1px solid rgba(71,220,236,.25);
    border-radius: 15px;

    background:
        linear-gradient(
            180deg,
            rgba(4,16,23,.90),
            rgba(1,10,15,.96)
        );

    box-shadow: 0 18px 48px rgba(0,0,0,.43);
}

.re-archive-table-head,
.re-archive-row {
    display: grid;
    grid-template-columns: 100px 120px minmax(0,1fr) 145px;
    align-items: center;
}

.re-archive-table-head {
    min-height: 48px;
    padding: 0 18px;

    color: #ccd9dd;
    background: rgba(255,255,255,.035);

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.re-archive-row {
    min-height: 102px;
    padding: 10px 18px;

    border-top: 1px solid rgba(255,255,255,.07);

    transition:
        background .18s ease,
        box-shadow .18s ease;
}

.re-archive-row:hover {
    background: rgba(34,196,216,.055);
}

.re-archive-row.active {
    background: rgba(24,190,210,.115);

    box-shadow:
        inset 3px 0 0 #31dce8,
        inset 0 0 28px rgba(32,204,225,.045);
}

.re-row-play {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.re-row-play button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 1px solid rgba(189,216,224,.38);
    border-radius: 50%;

    color: #fff;
    background: rgba(3,14,20,.90);

    font-size: 19px;
    cursor: pointer;
}

.re-row-play button.playing {
    border-color: #37e0ed;
    color: #4ef1fb;

    box-shadow: 0 0 18px rgba(55,224,237,.24);
}

.re-row-moderator img {
    width: 80px;
    height: 80px;

    object-fit: cover;

    border: 1px solid rgba(65,212,228,.22);
    border-radius: 10px;

    background: #071820;
}

.re-row-title {
    padding-right: 25px;
}

.re-row-title strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;
    font-size: 19px;
    line-height: 1.2;
}

.re-row-title .moderator {
    display: block;

    margin-bottom: 4px;

    color: #35dce9;
    font-size: 13px;
    font-weight: 700;
}

.re-row-title .description {
    display: block;

    color: #acbdc3;
    font-size: 14px;
    line-height: 1.38;
}

.re-row-duration {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.re-archive-empty {
    padding: 52px 24px;

    color: #c2d2d7;
    text-align: center;
}

.re-archive-empty strong {
    display: block;

    margin-bottom: 8px;

    color: #fff;
    font-size: 20px;
}

.re-archive-note {
    margin-top: 15px;
    padding: 11px 14px;

    border: 1px solid rgba(71,220,236,.14);
    border-radius: 10px;

    color: #8fa9b1;
    background: rgba(1,14,21,.68);

    font-size: 12px;
    text-align: center;
}

@media (max-width: 1050px) {

    .re-archive-player {
        grid-template-columns: 150px minmax(0,1fr);
    }

    .re-archive-cover {
        width: 150px;
        height: 150px;
    }

    .re-archive-upper {
        grid-template-columns: 1fr;
    }

    .re-archive-controls {
        grid-template-columns:
            auto auto auto minmax(160px,1fr);
    }

    .re-volume {
        grid-column: 1 / -1;
        max-width: 280px;
    }
}

@media (max-width: 760px) {

    .re-archive-stage {
        padding:
            28px 12px
            60px;
    }

    .re-archive-player {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .re-archive-cover {
        width: 130px;
        height: 130px;
    }

    .re-archive-controls {
        grid-template-columns:
            auto auto auto;
    }

    .re-seek,
    .re-volume {
        grid-column: 1 / -1;
    }

    .re-archive-table-head {
        display: none;
    }

    .re-archive-row {
        grid-template-columns:
            68px 96px minmax(0,1fr);
        gap: 8px;

        padding: 10px 12px;
    }

    .re-row-duration {
        grid-column: 3;
        text-align: left;
        font-size: 15px;
        color: #bcd5dc;
    }

    .re-row-title {
        padding-right: 0;
    }
}


/* ==========================================================
   RE-ARCHIVE-UI-V13
   ========================================================== */


/*
 * E-Mail-Feld oben rechts:
 * gleiche Hintergrundwirkung wie Header.
 */

.re-archive-page a[href^="mailto:"] {
    background: transparent !important;
    color: #d8dcde !important;
    box-shadow: none !important;
}

.re-archive-page a[href^="mailto:"] * {
    background: transparent !important;
    color: inherit !important;
}

.re-archive-page *:has(> a[href^="mailto:"]) {
    background-color: #070909 !important;
}


/*
 * ARCHIV weiter unterhalb des festen Headers.
 */

.re-archive-stage {
    padding-top: 105px !important;
}

.re-archive-head {
    margin-bottom: 22px !important;
}

.re-archive-head h1 {
    font-size: clamp(
        48px,
        5.2vw,
        76px
    ) !important;
}

.re-archive-head p {
    margin-top: 10px !important;
    font-size: clamp(
        17px,
        1.65vw,
        22px
    ) !important;
}


/*
 * Player kompakter.
 */

.re-archive-player {
    grid-template-columns:
        150px
        minmax(0, 1fr)
        !important;

    gap: 18px !important;

    padding: 18px !important;

    margin-bottom: 18px !important;

    border-radius: 15px !important;
}


.re-archive-cover {
    width: 150px !important;
    height: 150px !important;

    border-radius: 11px !important;
}


.re-archive-upper {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(310px, 400px)
        !important;

    gap: 18px !important;
}


.re-archive-current-title {
    font-size: 25px !important;
    margin-bottom: 5px !important;
}


.re-archive-current-meta {
    font-size: 15px !important;
}


.re-archive-current-description {
    margin-top: 8px !important;

    font-size: 14px !important;

    line-height: 1.4 !important;
}


.re-archive-controls {
    margin-top: 13px !important;

    grid-template-columns:
        auto
        auto
        auto
        minmax(220px, 1fr)
        190px
        !important;

    gap: 11px !important;
}


.re-control {
    width: 46px !important;
    height: 46px !important;

    font-size: 15px !important;
}


.re-control-main {
    width: 60px !important;
    height: 60px !important;

    font-size: 21px !important;
}


.re-spectrum {
    margin-top: 12px !important;

    padding: 9px 11px 10px !important;
}


#re-archive-spectrum {
    height: 86px !important;
}


/*
 * VU kompakter.
 */

.re-vu {
    padding:
        11px
        12px
        8px
        !important;
}


.re-vu-row {
    grid-template-columns:
        18px
        minmax(0, 1fr)
        62px
        !important;

    gap: 8px !important;

    margin-bottom: 6px !important;
}


.re-vu-bars {
    height: 15px !important;
}


/*
 * VU:
 * grün bis zum roten Peak-Bereich.
 */

.re-vu-bars span {
    background:
        rgba(
            40,
            64,
            55,
            .45
        )
        !important;
}


.re-vu-bars span.active {
    background:
        #26dc6c
        !important;

    box-shadow:
        0 0 5px
        rgba(
            38,
            220,
            108,
            .30
        )
        !important;
}


.re-vu-bars span.active.hot {
    background:
        #f04444
        !important;

    box-shadow:
        0 0 7px
        rgba(
            240,
            68,
            68,
            .42
        )
        !important;
}


/*
 * Alte gelbe Warnfarbe bewusst entfernen.
 */

.re-vu-bars span.warn {
    background:
        #26dc6c
        !important;
}


/*
 * Spectrum-Steuerung.
 */

.re-spectrum-head {
    align-items: center !important;

    gap: 14px;

    min-height: 30px;
}


.re-spectrum-controls {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 7px;
}


.re-spectrum-range {
    color: #83a5ae;

    font-size: 10px;

    white-space: nowrap;
}


.re-spectrum-mode {
    min-width: 54px;

    padding:
        4px
        8px;

    border:
        1px solid
        rgba(
            71,
            220,
            236,
            .22
        );

    border-radius: 6px;

    color: #a8bdc3;

    background:
        rgba(
            0,
            14,
            21,
            .76
        );

    font-size: 10px;

    font-family: inherit;

    cursor: pointer;
}


.re-spectrum-mode:hover {
    border-color:
        rgba(
            71,
            220,
            236,
            .60
        );

    color: #fff;
}


.re-spectrum-mode.active {
    border-color:
        var(
            --re-spectrum-color,
            #37ddeb
        );

    color:
        var(
            --re-spectrum-color,
            #37ddeb
        );

    background:
        rgba(
            255,
            255,
            255,
            .045
        );
}


.re-spectrum-color-wrap {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #829fa7;

    font-size: 10px;
}


.re-spectrum-color {
    width: 29px;
    height: 22px;

    padding: 0;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .20
        );

    border-radius: 5px;

    background: transparent;

    cursor: pointer;
}


/*
 * Tabelle ebenfalls etwas kompakter.
 */

.re-archive-row {
    min-height: 92px !important;
}


@media (max-width: 1050px) {

    .re-archive-stage {
        padding-top:
            92px
            !important;
    }

    .re-archive-upper {
        grid-template-columns:
            1fr
            !important;
    }

    .re-archive-controls {
        grid-template-columns:
            auto
            auto
            auto
            minmax(
                160px,
                1fr
            )
            !important;
    }

    .re-volume {
        grid-column:
            1 / -1;

        max-width:
            270px;
    }
}


@media (max-width: 760px) {

    .re-archive-stage {
        padding-top:
            82px
            !important;
    }

    .re-archive-player {
        grid-template-columns:
            1fr
            !important;
    }

    .re-archive-cover {
        width:
            125px
            !important;

        height:
            125px
            !important;
    }

    .re-spectrum-head {
        align-items:
            flex-start
            !important;

        flex-direction:
            column;
    }

    .re-spectrum-controls {
        justify-content:
            flex-start;
    }
}


/* RE-ARCHIVE-UI-V13-END */


/* ==========================================================
   RE-ARCHIVE-FOOTER-SAFEAREA-V1

   Der globale Radio-Player ist position:fixed
   und liegt dadurch über dem normalen Seiteninhalt.

   Auf der Archivseite reservieren wir am Ende
   ausreichend Platz, damit Footer und Footer-Ende
   vollständig sichtbar bleiben.
   ========================================================== */


body.re-archive-page {

    --re-radio-player-safe-height:
        115px;

}


/*
 * Der Footer erhält unter seinem normalen Inhalt
 * einen echten scrollbaren Sicherheitsbereich.
 */

body.re-archive-page footer::after {

    content: "";

    display: block;

    width: 100%;

    height:
        var(
            --re-radio-player-safe-height
        );

    min-height:
        var(
            --re-radio-player-safe-height
        );

    clear: both;

    background: #000;

}


/*
 * Beim Scrollen zu Elementen am Seitenende
 * den festen Player ebenfalls berücksichtigen.
 */

html {

    scroll-padding-bottom:
        115px;

}


/*
 * Auf kleinen Displays ist der globale
 * Audioplayer gegebenenfalls etwas höher.
 */

@media (
    max-width: 760px
) {

    body.re-archive-page {

        --re-radio-player-safe-height:
            140px;

    }


    html {

        scroll-padding-bottom:
            140px;

    }

}


/* RE-ARCHIVE-FOOTER-SAFEAREA-V1-END */




/* ==========================================================
   RE-ARCHIVE-MAIL-CONTAINER-FIX-V2-BEGIN
   ========================================================== */


/*
 * Diese Klasse wird ausschließlich auf der
 * Archivseite per JavaScript an die tatsächlichen
 * Container der E-Mail-Adresse gesetzt.
 */

body.re-archive-page
.re-archive-mail-bgfix {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    background-image:
        none
        !important;

    box-shadow:
        none
        !important;

    filter:
        none
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;

    border-color:
        transparent
        !important;
}


/*
 * Entscheidend:
 * Manche Bereiche der Originalseite erzeugen
 * die dunkle Fläche über ::before / ::after.
 */

body.re-archive-page
.re-archive-mail-bgfix::before,

body.re-archive-page
.re-archive-mail-bgfix::after {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    background-image:
        none
        !important;

    box-shadow:
        none
        !important;

    filter:
        none
        !important;

    backdrop-filter:
        none
        !important;

    -webkit-backdrop-filter:
        none
        !important;

    border-color:
        transparent
        !important;
}


/*
 * Mail-Link selbst:
 * gleiche Helligkeit wie die übrige Navigation.
 */

body.re-archive-page
#header
a[href^="mailto:"] {

    color:
        rgba(
            255,
            255,
            255,
            .90
        )
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    text-shadow:
        none
        !important;

    opacity:
        1
        !important;
}


/*
 * Auch Icons innerhalb des Links übernehmen
 * die gleiche Farbe.
 */

body.re-archive-page
#header
a[href^="mailto:"]
* {

    color:
        inherit
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

}


/* RE-ARCHIVE-MAIL-CONTAINER-FIX-V2-END */


/* ==========================================================
   RE-ARCHIVE-MAIL-NEWS-TICKER-FIX-V3-BEGIN

   Ursache:
   Globales CSS:
       header              -> rgba(16,16,16,.7)
       header .news-ticker -> #101010

   Auf der Archivseite wird der news-ticker transparent,
   damit exakt der Header-Hintergrund durchscheint.
   ========================================================== */


body.re-archive-page
#header
.news-ticker {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    background-image:
        none
        !important;

    box-shadow:
        none
        !important;

}


/*
 * Auch die darunterliegenden Elemente bekommen
 * keinen eigenen Hintergrund.
 */

body.re-archive-page
#header
.news-ticker
.ticker-text,

body.re-archive-page
#header
.news-ticker
.schnellkontakt,

body.re-archive-page
#header
.news-ticker
.schnellkontakt
li {

    background:
        transparent
        !important;

    background-color:
        transparent
        !important;

    box-shadow:
        none
        !important;

}


/*
 * Tatsächlicher Mail-Link der Website.
 * Er heißt .mymaillink und verwendet aus
 * Spam-Schutzgründen kein normales mailto:.
 */

body.re-archive-page
#header
.news-ticker
.mymaillink {

    color:
        rgba(
            255,
            255,
            255,
            .90
        )
        !important;

    background:
        transparent
        !important;

    box-shadow:
        none
        !important;

    text-shadow:
        none
        !important;

}


/*
 * Mail-Icon gleiche Transparenz wie Text.
 */

body.re-archive-page
#header
.news-ticker
.mymaillink
.icon-mail {

    color:
        inherit
        !important;

    opacity:
        .90;

}


/* RE-ARCHIVE-MAIL-NEWS-TICKER-FIX-V3-END */