/* ==========================================================
   RPG RELATIONS 1.0.0-beta5
   SMOKE ON THE WATER – 1970er Zaubererwelt
   ========================================================== */

.rrel-ucp,
.rrel-profile{
    --rr-bg:#130b06;
    --rr-dark:#0d0704;

    --rr-panel:#1b0f09;
    --rr-panel-2:#24130b;
    --rr-panel-3:#2c180d;

    --rr-line:#472f1c;
    --rr-line-light:#765027;
    --rr-line-soft:rgba(197,125,37,.16);

    --rr-accent:#c27d25;
    --rr-accent-light:#e5aa50;
    --rr-accent-dark:#7d4517;

    --rr-light:#ead8b4;
    --rr-light-soft:#cfb98d;
    --rr-muted:#a88763;

    --rr-positive:#8da06c;
    --rr-danger:#b86450;

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
}

.rrel-ucp *,
.rrel-profile *{
    box-sizing:border-box;
}

/* ==========================================================
   GEMEINSAME FLÄCHEN
   ========================================================== */

.rrel-hero,
.rrel-panel,
.rrel-profile{
    position:relative;
    border:1px solid var(--rr-line);
    border-radius:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(197,125,37,.08),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            var(--rr-panel-3),
            var(--rr-panel) 66%
        );

    box-shadow:
        0 16px 45px rgba(0,0,0,.30),
        inset 0 0 45px rgba(0,0,0,.15);
}

.rrel-hero:before,
.rrel-profile:before{
    content:"";
    position:absolute;
    top:6px;
    right:6px;
    left:6px;
    height:1px;
    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(229,170,80,.32),
        transparent
    );
}

/* ==========================================================
   KOPFBEREICH
   ========================================================== */

.rrel-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;

    padding:29px 31px 26px;
    margin-bottom:18px;
}

.rrel-hero span,
.rrel-profile-head span{
    display:block;

    color:var(--rr-accent);
    font-size:10px;
    font-weight:700;
    letter-spacing:.20em;
    line-height:1.4;
    text-transform:uppercase;
}

.rrel-hero h1,
.rrel-profile-head h2{
    margin:6px 0 8px;

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:29px;
    font-variant:small-caps;
    font-weight:normal;
    letter-spacing:.055em;

    text-shadow:
        0 1px 0 #000,
        0 0 12px rgba(197,125,37,.12);
}

.rrel-hero p{
    max-width:700px;
    margin:0;

    color:var(--rr-muted);
    font-size:12px;
    line-height:1.65;
}

.rrel-stats{
    display:grid;
    grid-template-columns:auto auto;
    gap:5px 11px;

    min-width:145px;
    padding-left:22px;

    border-left:1px solid var(--rr-line);
    text-align:right;
}

.rrel-stats b{
    color:var(--rr-accent-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    font-weight:normal;

    text-shadow:0 1px 4px rgba(0,0,0,.6);
}

.rrel-stats small{
    align-self:center;

    color:var(--rr-muted);
    font-size:11px;
}

/* ==========================================================
   GRUNDRASTER UND PANELS
   ========================================================== */

.rrel-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.rrel-panel{
    padding:21px;
}

.rrel-panel-wide{
    grid-column:1/-1;
}

.rrel-panel-head{
    position:relative;

    margin:-2px 0 17px;
    padding:0 0 11px;

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

.rrel-panel-head:after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;

    width:82px;
    height:1px;

    background:var(--rr-accent);
}

.rrel-panel-head h2{
    margin:0;

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    font-variant:small-caps;
    font-weight:normal;
    letter-spacing:.055em;
}

/* ==========================================================
   FORMULARE
   ========================================================== */

.rrel-form{
    display:grid;
    gap:9px;
}

.rrel-form label{
    margin-top:5px;

    color:var(--rr-muted);
    font-size:11px;
    font-weight:700;
    letter-spacing:.10em;
    line-height:1.4;
    text-transform:uppercase;
}

.rrel-form label small{
    color:var(--rr-muted);
    font-size:10px;
    font-weight:normal;
    letter-spacing:0;
    line-height:1.5;
    text-transform:none;
}

.rrel-form input,
.rrel-form select,
.rrel-form textarea,
.rrel-manage-row input,
.rrel-manage-row select,
.rrel-manage-row textarea,
.rrel-request-answer input,
.rrel-request-answer select,
.rrel-request-answer textarea{
    width:100%;
    padding:9px 11px;

    border:1px solid var(--rr-line);
    border-radius:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.13),
            rgba(0,0,0,.25)
        ),
        var(--rr-panel);

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;

    outline:none;

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.32),
        0 1px 0 rgba(229,170,80,.03);

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

.rrel-form input:hover,
.rrel-form select:hover,
.rrel-form textarea:hover,
.rrel-manage-row input:hover,
.rrel-manage-row select:hover,
.rrel-manage-row textarea:hover,
.rrel-request-answer input:hover,
.rrel-request-answer select:hover,
.rrel-request-answer textarea:hover{
    border-color:var(--rr-line-light);
}

.rrel-form input:focus,
.rrel-form select:focus,
.rrel-form textarea:focus,
.rrel-manage-row input:focus,
.rrel-manage-row select:focus,
.rrel-manage-row textarea:focus,
.rrel-request-answer input:focus,
.rrel-request-answer select:focus,
.rrel-request-answer textarea:focus{
    border-color:var(--rr-accent);

    background:
        linear-gradient(
            180deg,
            rgba(197,125,37,.05),
            rgba(0,0,0,.22)
        ),
        var(--rr-panel);

    box-shadow:
        inset 0 1px 4px rgba(0,0,0,.32),
        0 0 0 2px rgba(197,125,37,.08);
}

.rrel-form input::placeholder,
.rrel-form textarea::placeholder,
.rrel-manage-row input::placeholder,
.rrel-manage-row textarea::placeholder,
.rrel-request-answer input::placeholder,
.rrel-request-answer textarea::placeholder{
    color:#7f674e;
    opacity:1;
}

.rrel-form select option,
.rrel-manage-row select option,
.rrel-request-answer select option{
    background:var(--rr-panel);
    color:var(--rr-light);
}

.rrel-required{
    margin-left:3px;
    color:var(--rr-accent-light);
}

.rrel-form textarea,
.rrel-manage-row textarea,
.rrel-request-answer textarea{
    min-height:72px;
    resize:vertical;
    font:inherit;
    line-height:1.55;
}

.rrel-form .button{
    margin-top:8px;
}

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

.rrel-ucp .button,
.rrel-profile .button{
    min-height:36px;
    padding:8px 15px;

    border:1px solid var(--rr-accent-dark);
    border-radius:0;

    background:
        linear-gradient(
            180deg,
            var(--rr-accent),
            var(--rr-accent-dark)
        );

    color:#1a0d06;
    font-family:Georgia,"Times New Roman",serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-decoration:none;
    text-transform:uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,235,190,.18),
        0 3px 8px rgba(0,0,0,.20);

    cursor:pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        color .18s ease,
        transform .18s ease;
}

.rrel-ucp .button:hover,
.rrel-profile .button:hover{
    border-color:var(--rr-accent-light);

    background:
        linear-gradient(
            180deg,
            var(--rr-accent-light),
            var(--rr-accent)
        );

    color:var(--rr-dark);
}

.rrel-ucp .button:active,
.rrel-profile .button:active{
    transform:translateY(1px);
}

.rrel-danger{
    opacity:.86;
}

.rrel-danger:hover{
    border-color:#9d4c3d !important;

    background:
        linear-gradient(
            180deg,
            #b86450,
            #763328
        ) !important;

    color:#f5e3c7 !important;
}

/* ==========================================================
   AUTOVERVOLLSTÄNDIGUNG
   ========================================================== */

.rrel-autocomplete-wrap{
    position:relative;
}

.rrel-suggestions{
    position:absolute;
    right:0;
    left:0;
    z-index:50;

    max-height:220px;
    overflow:auto;

    border:1px solid var(--rr-line);

    background:var(--rr-panel);

    box-shadow:
        0 15px 30px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(229,170,80,.04);
}

.rrel-suggestions button{
    display:block;

    width:100%;
    padding:10px 11px;

    border:0;
    border-bottom:1px solid var(--rr-line);

    background:transparent;

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:12px;
    text-align:left;

    cursor:pointer;
}

.rrel-suggestions button:last-child{
    border-bottom:0;
}

.rrel-suggestions button:hover{
    background:
        linear-gradient(
            90deg,
            rgba(197,125,37,.13),
            rgba(197,125,37,.03)
        );

    color:var(--rr-accent-light);
}

/* ==========================================================
   RELATIONS VERWALTEN
   ========================================================== */

.rrel-manage-category{
    margin-bottom:19px;
}

.rrel-manage-category:last-child{
    margin-bottom:0;
}

.rrel-manage-category h3{
    display:flex;
    justify-content:space-between;
    gap:15px;

    margin:0 0 9px;
    padding:9px 11px;

    border:1px solid var(--rr-line);
    border-left:4px solid var(--rr-accent);

    background:
        linear-gradient(
            90deg,
            rgba(197,125,37,.10),
            rgba(0,0,0,.14)
        );

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    font-variant:small-caps;
    font-weight:normal;
    letter-spacing:.04em;
}

.rrel-manage-category h3 span{
    color:var(--rr-muted);
    font-size:11px;
    font-variant:normal;
}

.rrel-manage-list{
    display:grid;
    gap:9px;
}

.rrel-manage-row{
    display:grid;
    grid-template-columns:
        minmax(170px,.8fr)
        minmax(240px,1.5fr)
        auto;
    align-items:center;
    gap:12px;

    padding:11px;

    border:1px solid var(--rr-line);

    background:
        linear-gradient(
            135deg,
            rgba(197,125,37,.035),
            rgba(0,0,0,.17)
        );
}

.rrel-manage-person{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.rrel-manage-person img,
.rrel-request-person img{
    width:42px;
    height:50px;
    object-fit:cover;

    border:1px solid var(--rr-line-light);

    filter:
        sepia(.10)
        saturate(.90)
        contrast(1.03);

    box-shadow:
        0 0 0 3px rgba(19,11,6,.75),
        0 0 0 4px rgba(197,125,37,.10);
}

.rrel-manage-person strong,
.rrel-request-person strong{
    display:block;

    color:var(--rr-light);
    font-size:13px;
    font-weight:normal;
}

.rrel-manage-person small,
.rrel-request-person small{
    display:block;

    margin-top:4px;

    color:var(--rr-muted);
    font-size:10px;
    line-height:1.4;
}

.rrel-manage-fields{
    display:grid;
    grid-template-columns:
        minmax(130px,.65fr)
        minmax(150px,1fr);
    gap:8px;
}

.rrel-description-field{
    grid-column:1/-1;
}

.rrel-npc-fields{
    grid-column:1/-1;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.rrel-manage-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
}

.rrel-icon{
    min-width:36px;
}

.rrel-empty{
    padding:18px;

    border:1px dashed var(--rr-line-light);

    background:rgba(0,0,0,.08);

    color:var(--rr-muted);
    font-size:12px;
    line-height:1.55;
    text-align:center;
}

/* ==========================================================
   ANFRAGEN
   ========================================================== */

.rrel-request-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

    margin-bottom:9px;
    padding:12px;

    border:1px solid var(--rr-line);

    background:
        linear-gradient(
            135deg,
            rgba(197,125,37,.035),
            rgba(0,0,0,.17)
        );
}

.rrel-request-person{
    display:flex;
    align-items:center;
    gap:11px;
}

.rrel-request-answer{
    display:grid;
    grid-template-columns:
        minmax(120px,.7fr)
        minmax(140px,1fr)
        auto
        auto;
    align-items:center;
    gap:7px;
}

.rrel-request-description-input{
    grid-column:1/-1;
}

.rrel-request-description{
    max-width:520px;
    margin-top:8px;

    color:var(--rr-muted);
    font-size:11px;
    line-height:1.55;
    white-space:normal;
}

/* ==========================================================
   IMPORTIERTE RELATIONS
   ========================================================== */

.rrel-migration-note{
    display:inline-block;

    margin-top:8px;
    padding:5px 8px;

    border:1px solid var(--rr-accent);

    background:rgba(197,125,37,.05);

    color:var(--rr-accent-light);
    font-size:9px;
    letter-spacing:.07em;
    line-height:1.4;
    text-transform:uppercase;
}

.rrel-migration-wait{
    max-width:200px;

    color:var(--rr-muted);
    font-size:11px;
    line-height:1.45;
    text-align:right;
}

/* ==========================================================
   PROFILANZEIGE
   ========================================================== */

.rrel-profile{
    margin:22px 0;
    padding:26px;
}

.rrel-profile-head{
    position:relative;

    margin-bottom:19px;
    padding-bottom:14px;

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

.rrel-profile-head:after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;

    width:110px;
    height:1px;

    background:var(--rr-accent);
}

.rrel-profile-head h2{
    font-size:25px;
}

.rrel-profile-categories{
    display:grid;
    gap:20px;
}

.rrel-profile-category h3{
    position:relative;

    margin:0 0 11px;
    padding:9px 12px;

    border:1px solid var(--rr-line);
    border-left:4px solid var(--rr-accent);

    background:
        linear-gradient(
            90deg,
            rgba(197,125,37,.11),
            rgba(0,0,0,.15)
        );

    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    font-variant:small-caps;
    font-weight:normal;
    letter-spacing:.055em;
}

.rrel-profile-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;

    overflow-x:hidden;
    overflow-y:visible;

    scrollbar-gutter:stable;
}

.rrel-card{
    position:relative;

    display:flex;
    gap:14px;
    min-width:0;
    padding:12px;

    border:1px solid var(--rr-line);

    background:
        radial-gradient(
            circle at top left,
            rgba(197,125,37,.055),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            rgba(44,24,13,.92),
            rgba(19,11,6,.92)
        );

    box-shadow:
        inset 0 0 22px rgba(0,0,0,.16),
        0 5px 14px rgba(0,0,0,.12);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.rrel-card:hover{
    border-color:var(--rr-line-light);

    background:
        radial-gradient(
            circle at top left,
            rgba(197,125,37,.09),
            transparent 44%
        ),
        linear-gradient(
            145deg,
            rgba(49,27,14,.96),
            rgba(19,11,6,.96)
        );
}

.rrel-card:after{
    content:"";
    position:absolute;
    right:8px;
    bottom:7px;

    width:32px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(197,125,37,.26)
    );
}

.rrel-card > img{
    width:var(--rrel-avatar-w,70px);
    height:var(--rrel-avatar-h,85px);
    flex:0 0 auto;
    object-fit:cover;

    border:1px solid var(--rr-line-light);

    filter:
        sepia(.10)
        saturate(.90)
        contrast(1.04);

    box-shadow:
        0 0 0 3px rgba(19,11,6,.78),
        0 0 0 4px rgba(197,125,37,.11);
}

.rrel-card-content{
    min-width:0;
}

.rrel-card-name{
    color:var(--rr-light);
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    font-weight:normal;
    letter-spacing:.02em;
    line-height:1.3;
}

.rrel-card-name a{
    text-decoration:none;
}

.rrel-card-name a:hover{
    text-decoration:underline;
    text-decoration-color:var(--rr-accent);
    text-underline-offset:3px;
}

.rrel-card-relation{
    margin:5px 0 9px;
    padding-bottom:7px;

    border-bottom:1px solid var(--rr-line-soft);

    color:var(--rr-accent-light);
    font-size:10px;
    font-weight:700;
    letter-spacing:.10em;
    line-height:1.4;
    text-transform:uppercase;
}

.rrel-card-description{
    margin:-1px 0 10px;

    color:var(--rr-light-soft);
    font-size:11px;
    line-height:1.6;
}

.rrel-card-facts{
    display:grid;
    gap:4px;

    color:var(--rr-muted);
    font-size:11px;
    line-height:1.45;
}

.rrel-card-facts b{
    color:var(--rr-light);
    font-weight:normal;
}

.rrel-card.rrel-no-avatar{
    padding-left:15px;
}

/* ==========================================================
   UCP-TABS
   ========================================================== */

.rrel-tabs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;

    margin:0 0 19px;
}

.rrel-tab{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    min-height:48px;
    padding:10px 13px;

    border:1px solid var(--rr-line);

    background:
        linear-gradient(
            180deg,
            rgba(44,24,13,.85),
            rgba(19,11,6,.92)
        );

    color:var(--rr-muted);
    font-family:Georgia,"Times New Roman",serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.07em;
    line-height:1.4;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;

    box-shadow:inset 0 1px 0 rgba(229,170,80,.025);

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

.rrel-tab:after{
    content:"";
    position:absolute;
    right:12px;
    bottom:6px;
    left:12px;

    height:1px;

    background:transparent;

    transition:background .18s ease;
}

.rrel-tab:hover,
.rrel-tab.is-active{
    border-color:var(--rr-accent);

    background:
        linear-gradient(
            180deg,
            rgba(78,42,18,.95),
            rgba(30,16,9,.96)
        );

    color:var(--rr-light);
}

.rrel-tab:hover:after,
.rrel-tab.is-active:after{
    background:linear-gradient(
        90deg,
        transparent,
        var(--rr-accent),
        transparent
    );
}

.rrel-tab b{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:23px;
    height:23px;
    padding:0 6px;

    border:1px solid var(--rr-line-light);
    border-radius:50%;

    background:rgba(0,0,0,.28);

    color:var(--rr-accent-light);
    font-size:10px;
    font-weight:normal;
}

.rrel-tab-panel{
    display:none;
}

.rrel-tab-panel.is-active{
    display:block;
}

.rrel-create-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.rrel-tab-panel > .rrel-panel{
    width:100%;
}

/* ==========================================================
   PROFIL-SCROLLBEREICH
   ========================================================== */

.rrel-profile-list.rrel-has-overflow{
    max-height:var(--rrel-visible-row-height);
    padding-right:7px;
    overflow-y:auto;
}

.rrel-profile-list{
    scrollbar-color:var(--rr-line-light) rgba(0,0,0,.15);
    scrollbar-width:thin;
}

.rrel-profile-list::-webkit-scrollbar,
.rrel-suggestions::-webkit-scrollbar{
    width:7px;
}

.rrel-profile-list::-webkit-scrollbar-track,
.rrel-suggestions::-webkit-scrollbar-track{
    background:rgba(0,0,0,.18);
}

.rrel-profile-list::-webkit-scrollbar-thumb,
.rrel-suggestions::-webkit-scrollbar-thumb{
    border:1px solid var(--rr-panel);

    background:
        linear-gradient(
            180deg,
            var(--rr-line-light),
            var(--rr-line)
        );
}

.rrel-profile-list::-webkit-scrollbar-thumb:hover,
.rrel-suggestions::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            var(--rr-accent),
            var(--rr-accent-dark)
        );
}

/* ==========================================================
   RESPONSIVE DARSTELLUNG
   ========================================================== */

@media(max-width:900px){

    .rrel-grid{
        grid-template-columns:1fr;
    }

    .rrel-panel-wide{
        grid-column:auto;
    }

    .rrel-manage-row{
        grid-template-columns:1fr;
    }

    .rrel-manage-actions{
        justify-content:flex-start;
    }

    .rrel-request-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .rrel-request-answer{
        width:100%;
        grid-template-columns:1fr 1fr;
    }

    .rrel-profile-list{
        grid-template-columns:1fr;
    }

    .rrel-tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .rrel-create-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){

    .rrel-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:24px 20px;
    }

    .rrel-stats{
        width:100%;
        padding-top:14px;
        padding-left:0;

        border-top:1px solid var(--rr-line);
        border-left:0;

        text-align:left;
    }

    .rrel-manage-fields,
    .rrel-npc-fields,
    .rrel-request-answer{
        grid-template-columns:1fr;
    }

    .rrel-profile{
        padding:17px;
    }

    .rrel-profile-head h2{
        font-size:22px;
    }
}

@media(max-width:520px){

    .rrel-tabs{
        grid-template-columns:1fr;
    }

    .rrel-tab{
        justify-content:space-between;
    }

    .rrel-card{
        gap:11px;
    }

    .rrel-card > img{
        width:58px;
        height:72px;
    }
}

/* ==========================================================
   RPG RELATIONS – FESTE BESCHREIBUNGSHÖHE UND KATEGORIE-SCROLL
   ========================================================== */

/*
 * Beschreibung innerhalb der Relationskarte:
 * feste Höhe, längere Texte werden scrollbar
 */
.rrel-card-description{
    height:96px;
    min-height:96px;
    max-height:96px;

    margin:-1px 0 10px;
    padding:0 7px 0 0;

    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;

    color:var(--rr-light-soft);
    font-size:11px;
    line-height:1.6;

    scrollbar-width:thin;
    scrollbar-color:
        var(--rr-line-light)
        rgba(0,0,0,.15);
}

.rrel-card-description::-webkit-scrollbar{
    width:6px;
}

.rrel-card-description::-webkit-scrollbar-track{
    background:rgba(0,0,0,.15);
}

.rrel-card-description::-webkit-scrollbar-thumb{
    border:1px solid var(--rr-panel);

    background:
        linear-gradient(
            180deg,
            var(--rr-line-light),
            var(--rr-line)
        );
}

.rrel-card-description::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            var(--rr-accent),
            var(--rr-accent-dark)
        );
}

/*
 * Auf dem Desktop bleibt pro Kategorie eine Reihe
 * mit zwei Relationskarten sichtbar.
 *
 * Die vom Plugin berechnete Höhe wird verwendet.
 * Falls sie fehlt, greifen 265px als feste Ersatzhöhe.
 */
.rrel-profile-list,
.rrel-profile-list.rrel-has-overflow{
    max-height:var(--rrel-visible-row-height,265px);

    padding-right:7px;

    overflow-x:hidden;
    overflow-y:auto;

    scrollbar-gutter:stable;
    scrollbar-width:thin;
    scrollbar-color:
        var(--rr-line-light)
        rgba(0,0,0,.15);
}

.rrel-profile-list::-webkit-scrollbar{
    width:7px;
}

.rrel-profile-list::-webkit-scrollbar-track{
    background:rgba(0,0,0,.15);
}

.rrel-profile-list::-webkit-scrollbar-thumb{
    border:1px solid var(--rr-panel);

    background:
        linear-gradient(
            180deg,
            var(--rr-line-light),
            var(--rr-line)
        );
}

.rrel-profile-list::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            var(--rr-accent),
            var(--rr-accent-dark)
        );
}

/*
 * In der einspaltigen Darstellung bleiben zwei Karten
 * untereinander sichtbar, bevor gescrollt werden muss.
 */
@media(max-width:900px){

    .rrel-profile-list,
    .rrel-profile-list.rrel-has-overflow{
        max-height:calc(
            (var(--rrel-visible-row-height,265px) * 2) + 11px
        );
    }
}