/* ==========================================================
   SILK PAVILION

   Historisch ostasiatische Premium-Ästhetik
   Lackrot · Schwarzbraun · Elfenbein · Antikgold · Kerzenlicht

   Kein Blau
   Kein Lila
   Kein Cyber
   ========================================================== */

:root {

    --sp-max: 1480px;

    --sp-black: #17100d;
    --sp-black-soft: #241713;
    --sp-brown: #342019;

    --sp-red-dark: #591311;
    --sp-red: #851c17;
    --sp-red-light: #a93427;

    --sp-gold: #c79852;
    --sp-gold-soft: #e1c18d;
    --sp-gold-dark: #8e662e;

    --sp-ivory: #f5ead7;
    --sp-paper: #efe1ca;
    --sp-paper-light: #fbf4e8;

    --sp-text: #31231d;
    --sp-muted: #7f6b5d;

    --sp-border: #cfb994;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--sp-text);
    background: #e8dac5;
}


/* ==========================================================
   BASIS
   ========================================================== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    color: var(--sp-text);

    background:
        linear-gradient(
            180deg,
            #f5ead9 0,
            #eadbc5 520px,
            #dfceb5 100%
        );

    line-height: 1.65;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--sp-red);
    text-underline-offset: .18em;
}

a:hover {
    color: var(--sp-red-light);
}

::selection {
    background: var(--sp-gold-soft);
    color: var(--sp-black);
}


/* ==========================================================
   HEADER
   ========================================================== */

.site-header {
    position: relative;
    z-index: 20;

    background:
        linear-gradient(
            180deg,
            var(--sp-black) 0,
            var(--sp-black-soft) 42px,
            var(--sp-red-dark) 42px,
            var(--sp-red) 137px,
            var(--sp-paper-light) 137px,
            var(--sp-paper-light) 202px
        );

    border-top:
        4px solid
        var(--sp-gold);

    border-bottom:
        1px solid
        var(--sp-border);

    box-shadow:
        0 10px 30px
        rgba(35, 19, 12, .18);
}

.site-header .wrap {
    max-width: var(--sp-max);
    min-height: 202px;

    margin: 0 auto;
    padding: 0 1.7rem;

    display: grid;

    grid-template-columns:
        1fr;

    grid-template-rows:
        42px
        95px
        65px;
}


/* obere kleine Zeile */

.site-header .wrap::before {
    content: "ADULT LIFE · GAY ASIA";

    grid-row: 1;

    align-self: center;

    color:
        var(--sp-gold-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: .68rem;

    font-weight: 700;

    letter-spacing:
        .14em;
}


/* Seitentitel */

.site-header strong {
    grid-row: 2;

    align-self: center;

    display: inline-block;

    width: max-content;

    color:
        #fff4df;

    font-size:
        clamp(
            2.1rem,
            3vw,
            3.4rem
        );

    font-weight:
        400;

    font-style:
        normal;

    letter-spacing:
        -.035em;

    text-shadow:
        0 2px 4px
        rgba(0,0,0,.35);
}

.site-header strong::after {
    content: "";

    display: block;

    width: 70px;
    height: 2px;

    margin-top: .7rem;

    background:
        linear-gradient(
            90deg,
            var(--sp-gold),
            transparent
        );
}


/* ==========================================================
   NAVIGATION
   ========================================================== */

.site-navigation {
    grid-row: 3;

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    gap: .1rem;
}

.site-navigation a {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 65px;

    padding:
        0
        1rem;

    color:
        #4b382c;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .86rem;

    font-weight:
        700;

    text-decoration:
        none;

    letter-spacing:
        .025em;

    transition:
        color .18s ease,
        background .18s ease;
}

.site-navigation a::after {
    content: "";

    position: absolute;

    left: 1rem;
    right: 1rem;
    bottom: 0;

    height: 3px;

    background:
        var(--sp-red);

    transform:
        scaleX(0);

    transition:
        transform .18s ease;
}

.site-navigation a:hover {
    color:
        var(--sp-red);

    background:
        rgba(199,152,82,.08);
}

.site-navigation a:hover::after {
    transform:
        scaleX(1);
}


/* ohne Navigation keine leere weiße Leiste */

.site-header:not(:has(.site-navigation a)) {
    background:
        linear-gradient(
            180deg,
            var(--sp-black) 0,
            var(--sp-black-soft) 42px,
            var(--sp-red-dark) 42px,
            var(--sp-red) 137px
        );
}

.site-header:not(:has(.site-navigation a))
.site-header .wrap {
    min-height: 137px;
}

.site-header:not(:has(.site-navigation a))
.site-navigation {
    display: none;
}


/* ==========================================================
   MAIN
   ========================================================== */

main.wrap {
    max-width:
        var(--sp-max);

    margin:
        0 auto;

    padding:
        2rem
        1.5rem
        4rem;
}


/* ==========================================================
   HERO
   ========================================================== */

.site-hero {
    position: relative;

    display: block;

    min-height: 420px;

    margin:
        .5rem
        0
        2.4rem;

    overflow: hidden;

    background:
        var(--sp-black);

    border:
        1px solid
        #5c3f2d;

    box-shadow:
        0 25px 60px
        rgba(34,18,10,.24);

    isolation: isolate;
}


/* keine Kreise oder Geometrie */

.site-hero::before,
.site-hero::after {
    content: none !important;
    display: none !important;
}


/* eigentlicher Hero-Inhalt */

.site-hero-content {
    position: relative;

    min-height:
        420px;

    overflow:
        hidden;

    padding:
        clamp(
            2rem,
            5vw,
            5rem
        );

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        flex-end;

    background:
        linear-gradient(
            135deg,
            #261711,
            #120c09
        );

    color:
        #fff2dc;
}


/* ----------------------------------------------------------
   HERO-BILD AUS DEM WYSIWYG

   Das erste Bild wird automatisch vollflächig.
   ---------------------------------------------------------- */

.site-hero-content > img:first-child {
    position: absolute;

    inset: 0;

    z-index: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    object-position:
        center center;
}


/* falls Editor <p><img></p> erzeugt */

.site-hero-content > p:first-child:has(img) {
    position: absolute;

    inset: 0;

    z-index: 0;

    margin: 0;
    padding: 0;
}

.site-hero-content > p:first-child:has(img) img {
    width: 100%;
    height: 100%;

    margin: 0;

    object-fit: cover;

    object-position:
        center center;
}


/* warmer Verlauf über Bild */

.site-hero-content::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(15,8,5,.88) 0%,
            rgba(28,13,7,.66) 35%,
            rgba(60,25,13,.24) 64%,
            rgba(0,0,0,.06) 100%
        );

    pointer-events:
        none;
}


/* unterer Schatten für Textlesbarkeit */

.site-hero-content::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(10,5,3,.54)
        );

    pointer-events:
        none;
}


/* Text über dem Hero-Bild */

.site-hero-content > *:not(img) {
    position:
        relative;

    z-index:
        2;
}

.site-hero-content h1,
.site-hero-content h2 {
    max-width:
        880px;

    margin:
        0
        0
        1rem;

    color:
        #fff4df;

    font-size:
        clamp(
            2.7rem,
            5.5vw,
            5.8rem
        );

    font-weight:
        400;

    line-height:
        .98;

    letter-spacing:
        -.045em;

    text-shadow:
        0 3px 14px
        rgba(0,0,0,.7);
}

.site-hero-content p {
    max-width:
        720px;

    margin:
        0;

    color:
        #f0dcc0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        1.05rem;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.85);
}


/* ==========================================================
   GRID
   ========================================================== */

.site-content-grid {
    display: grid;

    grid-template-columns:
        255px
        minmax(0, 1fr)
        325px;

    gap:
        1.5rem;

    align-items:
        stretch;
}


/* ==========================================================
   LINKE BOX
   ========================================================== */

.site-sidebar-left {
    position:
        relative;

    min-height:
        410px;

    padding:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #fff8eb,
            #efe0c9
        );

    border:
        1px solid
        var(--sp-border);

    border-top:
        5px solid
        var(--sp-black);

    box-shadow:
        0 16px 34px
        rgba(42,24,14,.12);
}

.site-sidebar-left::before {
    content:
        "RUBRIKEN";

    display:
        block;

    padding:
        1rem
        1.1rem;

    background:
        linear-gradient(
            90deg,
            var(--sp-black),
            var(--sp-brown)
        );

    color:
        var(--sp-gold-soft);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

    border-bottom:
        1px solid
        var(--sp-gold-dark);
}

.site-sidebar-left > * {
    margin:
        0;

    padding:
        1rem
        1.1rem;
}


/* ==========================================================
   MITTELBEREICH
   ========================================================== */

.site-main-content {
    min-width:
        0;

    width:
        100%;
}

.site-main-surface {
    position:
        relative;

    min-height:
        410px;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #fffaf0,
            #f7ead8
        );

    border:
        1px solid
        var(--sp-border);

    box-shadow:
        0 22px 48px
        rgba(42,24,14,.14);
}

.site-main-surface::before {
    content: "";

    position:
        absolute;

    left: 0;
    right: 0;
    top: 0;

    height:
        7px;

    background:
        linear-gradient(
            90deg,
            var(--sp-red) 0%,
            var(--sp-red) 22%,
            var(--sp-gold) 22%,
            var(--sp-gold) 28%,
            #d4b47e 28%,
            #d4b47e 100%
        );
}


/* ==========================================================
   SEITENTITEL
   ========================================================== */

.page-title {
    margin:
        0;

    padding:
        2rem
        2rem
        1.4rem;

    color:
        var(--sp-black);

    background:
        rgba(255,250,240,.96);

    border-bottom:
        1px solid
        var(--sp-border);

    font-size:
        clamp(
            2.2rem,
            4vw,
            4.1rem
        );

    font-weight:
        400;

    line-height:
        1.03;

    letter-spacing:
        -.04em;
}

.page-title::after {
    content: "";

    display:
        block;

    width:
        80px;
    height:
        2px;

    margin-top:
        1rem;

    background:
        var(--sp-red);

    box-shadow:
        28px 0 0
        var(--sp-gold);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.page-content {
    padding:
        2rem;

    background:
        transparent;
}

.page-content h2,
.page-content h3,
.page-content h4 {
    color:
        var(--sp-red-dark);

    font-weight:
        400;
}

.page-content h2 {
    margin:
        2.4rem
        0
        1rem;

    font-size:
        2rem;
}

.page-content h3 {
    font-size:
        1.45rem;
}

.page-content p {
    margin:
        0
        0
        1.3rem;
}

.page-content .page-empty {
    margin: 0;
    padding: 1rem 1.2rem;
    color: #765844;
    background: #f8ecd8;
    border: 1px solid #d8bb86;
    border-left: 4px solid var(--sp-red);
    border-radius: 8px;
    font-style: italic;
}

.page-content a {
    color:
        var(--sp-red);

    font-weight:
        700;
}

.page-content blockquote {
    margin:
        2rem
        0;

    padding:
        1.3rem
        1.6rem;

    background:
        rgba(133,28,23,.055);

    border-left:
        4px solid
        var(--sp-red);

    color:
        #51372c;

    font-style:
        italic;
}


/* Bilder im normalen Content */

.page-content img {
    max-width:
        100%;

    border:
        1px solid
        var(--sp-border);

    box-shadow:
        0 10px 24px
        rgba(45,25,14,.10);
}


/* ==========================================================
   EXTENSION AUSGABE
   ========================================================== */

.site-extension-output {
    padding:
        0
        2rem
        2rem;

    background:
        transparent;
}

.site-extension-output .extension-notice {
    position:
        relative;

    min-height:
        72px;

    margin:
        0;

    padding:
        1.2rem
        5rem
        1.2rem
        1.4rem;

    display:
        flex;

    align-items:
        center;

    background:
        linear-gradient(
            90deg,
            #f5e7d1,
            #ead6b8
        );

    border:
        1px solid
        #c8a97a;

    border-left:
        5px solid
        var(--sp-red);

    color:
        #463026;

    box-shadow:
        0 9px 20px
        rgba(50,29,17,.09);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .92rem;
}

.site-extension-output .extension-notice::after {
    content:
        "INFO";

    position:
        absolute;

    right:
        1.2rem;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--sp-red-dark);

    font-size:
        .65rem;

    font-weight:
        800;

    letter-spacing:
        .13em;
}


/* ==========================================================
   RECHTE BOX
   ========================================================== */

.site-sidebar-right {
    position:
        relative;

    min-height:
        410px;

    padding:
        0;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #fff8eb,
            #efe0c9
        );

    border:
        1px solid
        var(--sp-border);

    border-top:
        5px solid
        var(--sp-red);

    box-shadow:
        0 16px 34px
        rgba(42,24,14,.12);
}

.site-sidebar-right::before {
    content:
        "WEITERE INHALTE";

    display:
        block;

    padding:
        1rem
        1.1rem;

    background:
        linear-gradient(
            90deg,
            var(--sp-red-dark),
            var(--sp-red)
        );

    color:
        #ffe9c9;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        .76rem;

    font-weight:
        800;

    letter-spacing:
        .1em;

    border-bottom:
        1px solid
        var(--sp-gold-dark);
}

.site-sidebar-right > * {
    margin:
        0;

    padding:
        1rem
        1.1rem;
}


/* ==========================================================
   SIDEBAR-TYPOGRAFIE
   ========================================================== */

.site-sidebar h1,
.site-sidebar h2,
.site-sidebar h3,
.site-sidebar h4 {
    color:
        var(--sp-red-dark);

    font-weight:
        400;
}

.site-sidebar a {
    color:
        var(--sp-text);

    text-decoration:
        none;
}

.site-sidebar a:hover {
    color:
        var(--sp-red);
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.page-content .btn,
.page-content .button,
.site-hero-content .btn,
.site-hero-content .button {
    display:
        inline-block;

    padding:
        .8rem
        1.25rem;

    background:
        linear-gradient(
            180deg,
            var(--sp-red-light),
            var(--sp-red-dark)
        );

    color:
        #fff4df;

    border:
        1px solid
        var(--sp-gold);

    box-shadow:
        0 7px 18px
        rgba(70,20,13,.24);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight:
        700;

    text-decoration:
        none;

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

.page-content .btn:hover,
.page-content .button:hover,
.site-hero-content .btn:hover,
.site-hero-content .button:hover {
    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 11px 24px
        rgba(70,20,13,.30);
}


/* ==========================================================
   TABELLEN
   ========================================================== */

.page-content table {
    width:
        100%;

    margin:
        2rem 0;

    border-collapse:
        collapse;

    background:
        #fff8eb;
}

.page-content th {
    padding:
        .85rem
        1rem;

    background:
        var(--sp-red-dark);

    color:
        #ffeacb;

    text-align:
        left;
}

.page-content td {
    padding:
        .85rem
        1rem;

    border-bottom:
        1px solid
        var(--sp-border);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer {
    position:
        relative;

    margin-top:
        3rem;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #17100d 0%,
            #291812 55%,
            #351d15 100%
        );

    color:
        #d7c0a0;

    border-top:
        5px solid
        var(--sp-gold);

    box-shadow:
        0 -8px 25px
        rgba(30,15,9,.10);
}

.site-footer-inner {
    max-width:
        var(--sp-max);

    min-height:
        185px;

    margin:
        0 auto;

    padding:
        3rem
        1.7rem;
}

.site-footer:not(:has(.site-footer-inner > *))
.site-footer-inner {
    min-height:
        90px;

    padding:
        1.4rem;
}

.site-footer h1,
.site-footer h2,
.site-footer h3 {
    color:
        #f6e7cc;

    font-weight:
        400;
}

.site-footer a {
    color:
        var(--sp-gold-soft);
}


/* ==========================================================
   HOVER
   ========================================================== */

.site-sidebar-left,
.site-sidebar-right,
.site-main-surface {
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.site-sidebar-left:hover,
.site-sidebar-right:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 22px 42px
        rgba(42,24,14,.17);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

    .site-content-grid {
        grid-template-columns:
            225px
            minmax(0,1fr);
    }

    .site-sidebar-right {
        grid-column:
            1 / -1;

        min-height:
            180px;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    .site-header {
        background:
            linear-gradient(
                180deg,
                var(--sp-black) 0,
                var(--sp-black) 38px,
                var(--sp-red) 38px,
                var(--sp-red) 125px
            );
    }

    .site-header .wrap {
        min-height:
            125px;

        padding:
            0 1rem;

        grid-template-rows:
            38px
            87px;
    }

    .site-header .wrap::before {
        font-size:
            .58rem;
    }

    .site-header strong {
        font-size:
            2rem;
    }

    .site-navigation {
        grid-row:
            auto;

        background:
            var(--sp-paper-light);
    }

    main.wrap {
        padding:
            1rem;
    }

    .site-hero,
    .site-hero-content {
        min-height:
            300px;
    }

    .site-hero-content {
        padding:
            2rem
            1.4rem;
    }

    .site-content-grid {
        grid-template-columns:
            1fr;
    }

    .site-main-content {
        order:
            1;
    }

    .site-sidebar-left {
        order:
            2;

        min-height:
            180px;
    }

    .site-sidebar-right {
        order:
            3;

        grid-column:
            auto;

        min-height:
            180px;
    }

    .page-content {
        padding:
            1.4rem;
    }

    .site-extension-output {
        padding:
            0
            1.4rem
            1.4rem;
    }

}


/* ==========================================================
   HERO – KEIN SCHWARZ
   ========================================================== */

.site-hero {
    background:
        linear-gradient(
            180deg,
            #f7ead6 0%,
            #ead6b8 100%
        ) !important;

    border-color:
        #c8a97a !important;
}

.site-hero-content {
    background:
        linear-gradient(
            135deg,
            #f8ecd8 0%,
            #e8d0ad 100%
        ) !important;

    color:
        #3b241b !important;
}

/* dunkle/schwarze Overlays entfernen */
.site-hero-content::before,
.site-hero-content::after {
    content:
        none !important;

    display:
        none !important;

    background:
        none !important;
}

/* Hero-Texte ebenfalls nicht schwarz/dunkel überziehen */
.site-hero-content h1,
.site-hero-content h2,
.site-hero-content h3 {
    color:
        #6f1714 !important;

    text-shadow:
        none !important;
}

.site-hero-content p {
    color:
        #5a4032 !important;

    text-shadow:
        none !important;
}

/* Bild bleibt unverändert sichtbar */
.site-hero-content > img:first-child,
.site-hero-content > p:first-child:has(img) img {
    filter:
        none !important;
}


/* CMS_HERO_IMAGE_FINAL */

.site-hero {
    position: relative !important;
    overflow: hidden !important;
}

.site-hero-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    z-index: 0;

    border: 0;
    margin: 0;
    padding: 0;

    box-shadow: none;
}

.site-hero-content {
    position: relative !important;
    z-index: 1 !important;

    background: transparent !important;
}

/* END CMS_HERO_IMAGE_FINAL */

/* DARKWOLF_BOX_RADIUS_START */

.site-sidebar-left,
.site-main-surface,
.site-sidebar-right {
    border-radius: 12px !important;
}

/* DARKWOLF_BOX_RADIUS_END */

/* CMS_HEADER_FINAL */

.site-header {
    background: linear-gradient(
        180deg,
        var(--sp-black) 0 34px,
        var(--sp-red-dark) 34px,
        var(--sp-red) 130px,
        var(--sp-paper-light) 130px 188px
    );
}

.site-header .wrap {
    min-height: 188px;
    grid-template-rows: 34px 96px 58px;
}

.site-header .wrap::before {
    grid-row: 1;
    align-self: center;
}

.site-header .site-brand {
    grid-row: 2;
    align-self: stretch;
    min-width: 0;
    padding: .8rem 0;
}

.site-header .site-brand-copy {
    justify-content: center;
}

.site-header .site-brand-name {
    color: #fff4df;
    font-size: clamp(2rem, 3vw, 3.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.025em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}

.site-header .site-brand-name::after {
    width: 72px;
    margin-top: .55rem;
}

.site-header .site-brand-slogan {
    color: var(--sp-gold-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .08em;
    opacity: 1;
}

.site-header .site-navigation {
    grid-row: 3;
    min-width: 0;
}

.site-header .site-navigation a {
    min-height: 58px;
}

@media (max-width: 760px) {
    .site-header {
        background: linear-gradient(
            180deg,
            var(--sp-black) 0 30px,
            var(--sp-red-dark) 30px,
            var(--sp-red) 112px,
            var(--sp-paper-light) 112px 100%
        );
    }

    .site-header .wrap {
        min-height: 164px;
        padding: 0 1rem;
        grid-template-rows: 30px 82px 52px;
    }

    .site-header .site-brand {
        align-items: center;
        padding: .55rem 0;
    }

    .site-header .site-brand-name {
        font-size: clamp(1.55rem, 8vw, 2.1rem);
        line-height: 1.05;
    }

    .site-header .site-brand-name::after {
        width: 48px;
        margin-top: .35rem;
    }

    .site-header .site-brand-slogan {
        font-size: .68rem;
    }

    .site-header .site-navigation {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .site-header .site-navigation a {
        flex: 0 0 auto;
        min-height: 52px;
        padding: 0 .85rem;
    }
}

/* END CMS_HEADER_FINAL */

/* ==========================================================
   DW_ASIAN_DESIGN_SYSTEM_V1
   Adult Life – durchgängige asiatische Gestaltungssprache

   Prinzip:
   - Bordeaux / Gold / Creme
   - feine geometrische Muster
   - wiederkehrende Goldlinien
   - kleine Siegelakzente
   - keine Änderungen an Funktionalität
   ========================================================== */

:root {
    --dw-asian-bordeaux-950: #21070b;
    --dw-asian-bordeaux-900: #2d090f;
    --dw-asian-bordeaux-800: #4b1018;
    --dw-asian-bordeaux-700: #71181f;
    --dw-asian-red: #8b1e26;

    --dw-asian-gold-500: #c9a45d;
    --dw-asian-gold-400: #d9ba78;
    --dw-asian-gold-300: #e7cf9b;
    --dw-asian-gold-soft: rgba(201, 164, 93, .28);

    --dw-asian-cream-50: #fffaf0;
    --dw-asian-cream-100: #f8eedc;
    --dw-asian-cream-200: #efe0c5;

    --dw-asian-ink: #381416;
    --dw-asian-muted: #765d4f;

    --dw-asian-radius: 12px;
    --dw-asian-shadow:
        0 10px 26px rgba(54, 25, 18, .10);
}


/* ----------------------------------------------------------
   ZENTRALE INHALTSFLÄCHE
   ---------------------------------------------------------- */

.site-main-surface {
    position: relative;
}

.site-main-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(113, 24, 31, .017) 0,
            rgba(113, 24, 31, .017) 1px,
            transparent 1px,
            transparent 24px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(201, 164, 93, .018) 0,
            rgba(201, 164, 93, .018) 1px,
            transparent 1px,
            transparent 24px
        );
}

.site-main-surface > * {
    position: relative;
    z-index: 1;
}


/* ----------------------------------------------------------
   ÜBERSCHRIFTEN
   ---------------------------------------------------------- */

.site-main-surface h1,
.site-main-surface h2,
.site-main-surface h3 {
    color: var(--dw-asian-ink);
}

.site-main-surface h1 {
    position: relative;

    margin-bottom: 1.4rem;
    padding-bottom: .72rem;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing: .015em;
}

.site-main-surface h1::after {
    content: "";

    display: block;

    width: min(190px, 48%);
    height: 2px;

    margin-top: .7rem;

    background:
        linear-gradient(
            90deg,
            var(--dw-asian-gold-500),
            rgba(201, 164, 93, .18),
            transparent
        );
}

.site-main-surface h2 {
    position: relative;

    padding-left: 15px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

.site-main-surface h2::before {
    content: "";

    position: absolute;

    top: .18em;
    bottom: .18em;
    left: 0;

    width: 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            180deg,
            var(--dw-asian-red),
            var(--dw-asian-gold-500)
        );
}


/* ----------------------------------------------------------
   GENERISCHE KARTEN / BOXEN
   Nur innerhalb der eigentlichen Inhaltsfläche
   ---------------------------------------------------------- */

.site-main-surface .card,
.site-main-surface .cms-card,
.site-main-surface .content-card,
.site-main-surface .info-box,
.site-main-surface .notice,
.site-main-surface .extension-notice {
    position: relative;
    overflow: hidden;

    border:
        1px solid
        rgba(201, 164, 93, .64);

    border-radius:
        var(--dw-asian-radius);

    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 240, .98),
            rgba(248, 238, 220, .96)
        );

    box-shadow:
        var(--dw-asian-shadow);
}


/* feine obere Goldlinie */

.site-main-surface .card::before,
.site-main-surface .cms-card::before,
.site-main-surface .content-card::before,
.site-main-surface .info-box::before,
.site-main-surface .notice::before,
.site-main-surface .extension-notice::before {
    content: "";

    position: absolute;

    top: 0;
    left: 18px;
    right: 18px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 93, .92) 18%,
            rgba(201, 164, 93, .92) 82%,
            transparent
        );

    pointer-events: none;
}


/* sehr dezente Ecke */

.site-main-surface .card::after,
.site-main-surface .cms-card::after,
.site-main-surface .content-card::after,
.site-main-surface .info-box::after {
    content: "◆";

    position: absolute;

    top: 6px;
    right: 9px;

    color:
        rgba(139, 30, 38, .30);

    font-size: 10px;
    line-height: 1;

    pointer-events: none;
}


/* ----------------------------------------------------------
   EXTENSION-AUSGABEN
   ---------------------------------------------------------- */

.site-extension-output {
    position: relative;
}

.site-extension-output .extension-notice {
    border-left:
        4px solid
        var(--dw-asian-red) !important;
}

.site-extension-output .extension-notice strong,
.site-extension-output .extension-notice b {
    color:
        var(--dw-asian-bordeaux-700);
}


/* ----------------------------------------------------------
   FORMULARE
   ---------------------------------------------------------- */

.site-main-surface input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="range"]
):not(
    [type="submit"]
):not(
    [type="button"]
),
.site-main-surface select,
.site-main-surface textarea {
    border:
        1px solid
        rgba(162, 127, 68, .62);

    border-radius:
        8px;

    background:
        rgba(255, 252, 245, .97);

    color:
        var(--dw-asian-ink);

    box-shadow:
        inset 0 1px 2px
        rgba(60, 27, 17, .045);

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.site-main-surface input:not(
    [type="checkbox"]
):not(
    [type="radio"]
):not(
    [type="range"]
):not(
    [type="submit"]
):not(
    [type="button"]
):focus,
.site-main-surface select:focus,
.site-main-surface textarea:focus {
    outline: none;

    border-color:
        var(--dw-asian-gold-500);

    background:
        #fffdf8;

    box-shadow:
        0 0 0 3px
        rgba(201, 164, 93, .16);
}

.site-main-surface label {
    color:
        #5a342c;

    font-weight:
        650;
}


/* ----------------------------------------------------------
   BUTTONS
   Bewusst keine WebPlayer-Klassen überschreiben
   ---------------------------------------------------------- */

.site-main-surface button:not(
    .dw-webplayer-play
),
.site-main-surface input[type="submit"],
.site-main-surface .button,
.site-main-surface .btn-primary {
    border:
        1px solid
        #bc9550;

    border-radius:
        8px;

    background:
        linear-gradient(
            180deg,
            #8f252c,
            #71181f
        );

    color:
        #fff3d4;

    box-shadow:
        0 5px 13px
        rgba(80, 14, 20, .18);

    transition:
        transform .14s ease,
        filter .14s ease,
        box-shadow .14s ease;
}

.site-main-surface button:not(
    .dw-webplayer-play
):hover,
.site-main-surface input[type="submit"]:hover,
.site-main-surface .button:hover,
.site-main-surface .btn-primary:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:
        0 7px 16px
        rgba(80, 14, 20, .22);
}

.site-main-surface button:not(
    .dw-webplayer-play
):focus-visible,
.site-main-surface input[type="submit"]:focus-visible,
.site-main-surface .button:focus-visible,
.site-main-surface .btn-primary:focus-visible {
    outline:
        2px solid
        var(--dw-asian-gold-500);

    outline-offset:
        2px;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

.site-main-surface a:not(
    .dw-webplayer-play
) {
    text-decoration-color:
        rgba(113, 24, 31, .28);

    text-underline-offset:
        3px;
}


/* ----------------------------------------------------------
   TABELLEN
   ---------------------------------------------------------- */

.site-main-surface table {
    border-collapse:
        separate;

    border-spacing:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(201, 164, 93, .42);

    border-radius:
        10px;
}

.site-main-surface thead th {
    background:
        linear-gradient(
            180deg,
            #4a1118,
            #341016
        );

    color:
        #f4dfae;

    border-color:
        rgba(201, 164, 93, .40);
}

.site-main-surface tbody tr:nth-child(even) {
    background:
        rgba(201, 164, 93, .055);
}


/* ----------------------------------------------------------
   SIDEBARS / INFOMODULE
   ---------------------------------------------------------- */

.site-sidebar-left,
.site-sidebar-right,
.site-plugin-navigation {
    position: relative;
}

.site-sidebar-left > *,
.site-sidebar-right > *,
.site-plugin-navigation {
    border-color:
        rgba(201, 164, 93, .54);
}


/* Kopfbereiche der Sidebars leicht vereinheitlichen */

.site-sidebar-left::before,
.site-sidebar-right::before,
.site-plugin-navigation-title {
    color:
        var(--dw-asian-bordeaux-700);

    letter-spacing:
        .09em;
}


/* ----------------------------------------------------------
   PLUGIN-NAVIGATION
   ---------------------------------------------------------- */

.site-plugin-navigation {
    overflow:
        hidden;

    border-radius:
        var(--dw-asian-radius);

    box-shadow:
        var(--dw-asian-shadow);
}

.site-plugin-navigation-title {
    position:
        relative;

    border-bottom:
        1px solid
        rgba(201, 164, 93, .45);
}

.site-plugin-navigation-title::after {
    content: "◆";

    margin-left:
        .55rem;

    color:
        var(--dw-asian-red);

    font-size:
        .62em;

    vertical-align:
        middle;
}


/* ----------------------------------------------------------
   HORIZONTALE TRENNER
   ---------------------------------------------------------- */

.site-main-surface hr {
    height:
        1px;

    border:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(201, 164, 93, .72),
            transparent
        );
}


/* ----------------------------------------------------------
   AUSWAHLFARBE
   ---------------------------------------------------------- */

.site-main-surface ::selection {
    background:
        #71181f;

    color:
        #fff2ce;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    .site-main-surface h1 {
        padding-bottom:
            .55rem;
    }

    .site-main-surface h1::after {
        width:
            130px;
    }

    .site-main-surface h2 {
        padding-left:
            11px;
    }

}


/* END DW_ASIAN_DESIGN_SYSTEM_V1 */

/* ==========================================================
   DW_ASIAN_HEADER_CONTRAST_V1
   Sidebar-Titel und Hauptüberschrift korrigieren
   ========================================================== */


/* ----------------------------------------------------------
   SIDEBAR-KÖPFE
   ---------------------------------------------------------- */

.site-sidebar-left::before,
.site-sidebar-right::before {
    color: #f4dca6 !important;

    font-weight: 700 !important;

    letter-spacing: .11em !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .55) !important;
}


/* linke Sidebar etwas wärmer */

.site-sidebar-left::before {
    border-bottom:
        1px solid
        rgba(211, 173, 93, .72) !important;
}


/* rechte Sidebar ebenfalls */

.site-sidebar-right::before {
    border-bottom:
        1px solid
        rgba(211, 173, 93, .72) !important;
}


/* ----------------------------------------------------------
   HAUPTÜBERSCHRIFT
   Nur eine saubere Dekorlinie
   ---------------------------------------------------------- */

.site-main-surface h1 {
    border-bottom: 0 !important;

    padding-bottom: .72rem !important;
}


.site-main-surface h1::before {
    content: none !important;
}


.site-main-surface h1::after {
    content: "" !important;

    display: block !important;

    width: 220px !important;
    max-width: 55% !important;

    height: 2px !important;

    margin-top: .72rem !important;

    background:
        linear-gradient(
            90deg,
            #c99d48 0%,
            #c99d48 72%,
            #8b1e26 72%,
            #8b1e26 84%,
            transparent 84%
        ) !important;

    border: 0 !important;
}


/* Plugin-Navigation bleibt auf hellem Grund dunkel */

.site-plugin-navigation-title {
    color: #71181f !important;

    text-shadow: none !important;
}


/* END DW_ASIAN_HEADER_CONTRAST_V1 */


/* ==========================================================
   DW_FRONTEND_FINISH_V2
   Kontakt / WebPlayer / Karten / SiteSearch
   ========================================================== */


/* ==========================================================
   WEBPLAYER
   Adult Life Radio + Rot/Gold-Lautstärke
   Keine Änderung der Player-Logik.
   ========================================================== */

.dw-webplayer-card {
    position:
        relative !important;

    padding-top:
        3.15rem !important;
}


/*
 * Bestehende Goldlinie wird zur kleinen Senderkopfzeile.
 * Das vorhandene 音-Siegel auf ::after bleibt erhalten.
 */

.dw-webplayer-card::before {
    content:
        "◆  ADULT LIFE RADIO" !important;

    position:
        absolute !important;

    top:
        .78rem !important;

    left:
        .95rem !important;

    right:
        50px !important;

    width:
        auto !important;

    height:
        auto !important;

    padding-bottom:
        .45rem !important;

    border-bottom:
        1px solid
        rgba(201, 164, 93, .70) !important;

    background:
        none !important;

    color:
        #71181f !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:
        .72rem !important;

    font-weight:
        800 !important;

    letter-spacing:
        .13em !important;

    line-height:
        1.2 !important;

    text-align:
        left !important;

    pointer-events:
        none !important;
}


.dw-webplayer-volume-wrap {
    width:
        100%;
}


.dw-webplayer-volume-wrap input[type="range"] {
    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    width:
        100% !important;

    height:
        20px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    cursor:
        pointer;
}


.dw-webplayer-volume-wrap
input[type="range"]::-webkit-slider-runnable-track {
    height:
        6px !important;

    border:
        1px solid
        #a77c38 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            90deg,
            #71181f 0%,
            #98262d 40%,
            #c9a45d 100%
        ) !important;

    box-shadow:
        inset 0 1px 2px
        rgba(0, 0, 0, .18) !important;
}


.dw-webplayer-volume-wrap
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:
        none !important;

    appearance:
        none !important;

    width:
        18px !important;

    height:
        18px !important;

    margin-top:
        -7px !important;

    border:
        2px solid
        #f1d591 !important;

    border-radius:
        50% !important;

    background:
        #811b22 !important;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .32) !important;
}


.dw-webplayer-volume-wrap
input[type="range"]::-moz-range-track {
    height:
        6px !important;

    border:
        1px solid
        #a77c38 !important;

    border-radius:
        999px !important;

    background:
        #c9a45d !important;
}


.dw-webplayer-volume-wrap
input[type="range"]::-moz-range-progress {
    height:
        6px !important;

    border-radius:
        999px !important;

    background:
        #811b22 !important;
}


.dw-webplayer-volume-wrap
input[type="range"]::-moz-range-thumb {
    width:
        15px !important;

    height:
        15px !important;

    border:
        2px solid
        #f1d591 !important;

    border-radius:
        50% !important;

    background:
        #811b22 !important;

    box-shadow:
        0 2px 7px
        rgba(0, 0, 0, .32) !important;
}


/* ==========================================================
   KONTAKT
   ========================================================== */

.al-contact-page {
    display:
        grid;

    gap:
        1.35rem;
}


.al-contact-intro,
.al-contact-help {
    border:
        1px solid
        rgba(201, 164, 93, .58);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f6e9d0
        );

    box-shadow:
        0 9px 24px
        rgba(58, 30, 20, .09);
}


.al-contact-intro {
    display:
        grid;

    grid-template-columns:
        auto minmax(0, 1fr);

    gap:
        1rem;

    align-items:
        center;

    padding:
        1.25rem 1.35rem;
}


.al-contact-seal {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        #d2ad62;

    border-radius:
        50%;

    background:
        #7d1820;

    color:
        #f5dfae;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.45rem;

    box-shadow:
        0 5px 13px
        rgba(70, 15, 20, .22);
}


.al-contact-intro h2 {
    margin:
        0 0 .35rem !important;

    padding-left:
        0 !important;
}


.al-contact-intro h2::before {
    display:
        none !important;
}


.al-contact-intro p {
    margin:
        0;

    color:
        #61483c;

    line-height:
        1.65;
}


.al-contact-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        1rem;
}


.al-contact-channel {
    position:
        relative;

    overflow:
        hidden;

    padding:
        1.2rem;

    border:
        1px solid
        rgba(201, 164, 93, .62);

    border-radius:
        14px;

    background:
        #fffaf0;

    box-shadow:
        0 8px 21px
        rgba(58, 30, 20, .085);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


.al-contact-channel::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        16px;

    right:
        16px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c9a45d,
            transparent
        );
}


.al-contact-channel:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(139, 30, 38, .58);

    box-shadow:
        0 14px 28px
        rgba(58, 30, 20, .13);
}


.al-contact-channel-mark {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    margin-bottom:
        .7rem;

    border:
        1px solid
        #c9a45d;

    border-radius:
        50%;

    background:
        #71181f;

    color:
        #f4dca6;

    font-weight:
        800;
}


.al-contact-channel h3 {
    margin:
        0 0 .45rem;

    color:
        #4b1118;
}


.al-contact-channel p {
    min-height:
        4.6em;

    margin:
        0 0 1rem;

    color:
        #6e5849;

    line-height:
        1.55;
}


.al-contact-action {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        .62rem .9rem;

    border:
        1px solid
        #c39b51;

    border-radius:
        8px;

    background:
        linear-gradient(
            180deg,
            #8f252c,
            #71181f
        );

    color:
        #fff1ce !important;

    font-weight:
        750;

    text-decoration:
        none !important;

    box-shadow:
        0 5px 12px
        rgba(75, 15, 20, .18);
}


.al-contact-action:hover {
    color:
        #fff !important;

    filter:
        brightness(1.08);
}


.al-contact-help {
    padding:
        1.25rem;
}


.al-contact-help-head {
    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;

    margin-bottom:
        1rem;
}


.al-contact-help-head > span {
    color:
        #8b1e26;

    font-size:
        .7rem;
}


.al-contact-help-head h2 {
    margin:
        0 !important;
}


.al-contact-help-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        .8rem;
}


.al-contact-help-grid article {
    padding:
        .9rem 1rem;

    border-left:
        3px solid
        #c9a45d;

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


.al-contact-help-grid h3 {
    margin:
        0 0 .35rem;

    color:
        #5a161b;
}


.al-contact-help-grid p {
    margin:
        0;

    color:
        #6c5749;

    line-height:
        1.5;
}


/* ==========================================================
   EINHEITLICHE KARTEN
   Aktuell real verwendete Klassen.
   ========================================================== */

.site-main-surface .al-card,
.site-main-surface .al-contact-card,
.site-main-surface .osw-card,
.site-main-surface .podcast-card,
.site-main-surface .dw-search-result {
    overflow:
        hidden;

    border:
        1px solid
        rgba(201, 164, 93, .58) !important;

    border-radius:
        14px !important;

    box-shadow:
        0 8px 22px
        rgba(58, 30, 20, .085) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease !important;
}


.site-main-surface .al-card:hover,
.site-main-surface .al-contact-card:hover,
.site-main-surface .osw-card:hover,
.site-main-surface .podcast-card:hover,
.site-main-surface .dw-search-result:hover {
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(139, 30, 38, .58) !important;

    box-shadow:
        0 14px 29px
        rgba(58, 30, 20, .135) !important;
}


/* ==========================================================
   SITESEARCH
   ========================================================== */

.site-main-surface
.site-extension-output
.dw-search-box {
    border:
        1px solid
        rgba(201, 164, 93, .62) !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            145deg,
            #fffaf0,
            #f6e9d0
        ) !important;

    box-shadow:
        0 9px 24px
        rgba(58, 30, 20, .09) !important;
}


.site-main-surface
.site-extension-output
.dw-search-summary {
    border-left:
        4px solid
        #8b1e26 !important;

    background:
        rgba(201, 164, 93, .15) !important;

    color:
        #5c3528 !important;
}


/* Adult-Life-interne Treffer */

.site-main-surface
.site-extension-output
.dw-search-result:has(
    h2 a[href^="https://adult-life.de/"]
) {
    border-left:
        4px solid
        #8b1e26 !important;

    background:
        linear-gradient(
            150deg,
            #fffaf0,
            #f7ead4
        ) !important;
}


.site-main-surface
.site-extension-output
.dw-search-result:has(
    h2 a[href^="https://adult-life.de/"]
)
.dw-search-source {
    border:
        1px solid
        #c9a45d !important;

    background:
        #71181f !important;

    color:
        #f5dfae !important;
}


.site-main-surface
.site-extension-output
.dw-search-result:has(
    h2 a[href^="https://adult-life.de/"]
)
.dw-search-source::before {
    content:
        "Intern · ";
}


/* Externe Treffer */

.site-main-surface
.site-extension-output
.dw-search-result:not(
    :has(
        h2 a[href^="https://adult-life.de/"]
    )
) {
    border-left:
        4px solid
        #c9a45d !important;

    background:
        linear-gradient(
            150deg,
            #fffdf7,
            #f3ead8
        ) !important;
}


.site-main-surface
.site-extension-output
.dw-search-result:not(
    :has(
        h2 a[href^="https://adult-life.de/"]
    )
)
.dw-search-source {
    border:
        1px solid
        #b28a43 !important;

    background:
        #e4ca91 !important;

    color:
        #4b2c20 !important;
}


.site-main-surface
.site-extension-output
.dw-search-result:not(
    :has(
        h2 a[href^="https://adult-life.de/"]
    )
)
.dw-search-source::before {
    content:
        "Extern · ";
}


.site-main-surface
.site-extension-output
.dw-search-host {
    border:
        1px solid
        rgba(130, 94, 58, .18) !important;

    background:
        rgba(255, 255, 255, .62) !important;

    color:
        #715747 !important;
}


.site-main-surface
.site-extension-output
.dw-search-result h2 {
    padding-left:
        0 !important;
}


.site-main-surface
.site-extension-output
.dw-search-result h2::before {
    display:
        none !important;
}


.site-main-surface
.site-extension-output
.dw-search-result h2 a {
    color:
        #671820 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-weight:
        700 !important;
}


.site-main-surface
.site-extension-output
.dw-search-url {
    color:
        #8a6a48 !important;

    font-size:
        .78rem !important;
}


.site-main-surface
.site-extension-output
.dw-search-result > p {
    color:
        #51433b !important;

    line-height:
        1.62 !important;
}


.site-main-surface
.site-extension-output
.dw-search-result mark {
    padding:
        .05em .18em;

    border-radius:
        3px;

    background:
        #ead19a !important;

    color:
        #71181f !important;

    font-weight:
        750;
}


.site-main-surface
.site-extension-output
.dw-search-arrow {
    border:
        1px solid
        rgba(201, 164, 93, .42) !important;

    background:
        rgba(139, 30, 38, .08) !important;

    color:
        #811b22 !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 820px) {

    .al-contact-grid {
        grid-template-columns:
            1fr;
    }

    .al-contact-channel p {
        min-height:
            0;
    }

}


@media (max-width: 620px) {

    .al-contact-intro {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }

    .al-contact-seal {
        margin:
            0 auto;
    }

    .al-contact-help-grid {
        grid-template-columns:
            1fr;
    }

}


/* END DW_FRONTEND_FINISH_V2 */


/* ==========================================================
   DW_CONTACT_POLISH_V1
   Kontaktkarten – Layout- und Lesbarkeitskorrektur
   ========================================================== */


/* ----------------------------------------------------------
   Karten auf gleiche innere Struktur bringen
   ---------------------------------------------------------- */

.al-contact-channel {
    display:
        flex !important;

    flex-direction:
        column !important;

    height:
        100% !important;
}


/* Beschreibung darf wachsen */

.al-contact-channel p {
    flex:
        1 1 auto !important;

    min-height:
        0 !important;
}


/* ----------------------------------------------------------
   Alle Aktionsbuttons gleich groß und sauber ausgerichtet
   ---------------------------------------------------------- */

.al-contact-action {
    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    min-width:
        0 !important;

    min-height:
        52px !important;

    margin-top:
        auto !important;

    padding:
        .65rem .75rem !important;

    box-sizing:
        border-box !important;

    text-align:
        center !important;

    line-height:
        1.3 !important;

    white-space:
        normal !important;

    overflow-wrap:
        anywhere !important;

    word-break:
        normal !important;
}


/* Lange E-Mail-Adresse etwas kompakter */

.al-contact-channel:first-child
.al-contact-action {
    font-size:
        .88rem !important;

    letter-spacing:
        -.01em !important;
}


/* ----------------------------------------------------------
   Hilfe-Bereich: nur noch EINE Dekoration
   Wir behalten die globale rote H2-Linie.
   Der zusätzliche Diamant entfällt.
   ---------------------------------------------------------- */

.al-contact-help-head > span {
    display:
        none !important;
}


.al-contact-help-head {
    gap:
        0 !important;
}


.al-contact-help-head h2 {
    padding-left:
        15px !important;
}


.al-contact-help-head h2::before {
    display:
        block !important;
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 820px) {

    .al-contact-action {
        min-height:
            48px !important;
    }

    .al-contact-channel:first-child
    .al-contact-action {
        font-size:
            .92rem !important;
    }

}


/* END DW_CONTACT_POLISH_V1 */