/* ==========================================================
   EVERYONE ASSEMBLE
   REGELWERK
   ========================================================== */

/* ==========================================================
   GRUNDLAGEN UND FARBEN
   ========================================================== */

.regelwerk-wrap{
    --rw-bg:#020d18;
    --rw-bg-deep:#010914;
    --rw-panel:#04192b;
    --rw-panel-soft:#082b45;
    --rw-panel-light:#0b3150;
    --rw-line:#1d5f8f;
    --rw-line-soft:rgba(33,139,208,.16);
    --rw-accent:#218bd0;
    --rw-accent-light:#75d0ff;
    --rw-text:#c4d8e4;
    --rw-text-light:#e1f1fa;
    --rw-muted:#8fa9bc;
    --rw-danger:#d47f87;
    --rw-warning:#e0b26d;
    --rw-success:#74c5a3;

    width:100%;
    max-width:1180px;
    margin:24px auto 40px;

    color:var(--rw-text);

    font-family:Arial,sans-serif;
    font-size:13px;
    line-height:1.65;
}

.regelwerk-wrap,
.regelwerk-wrap *,
.regelwerk-wrap *:before,
.regelwerk-wrap *:after{
    box-sizing:border-box;
}

.regelwerk-wrap a{
    color:var(--rw-accent-light);

    text-decoration:none;

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

.regelwerk-wrap a:hover{
    color:var(--rw-text-light);

    text-decoration:none;
}

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

.rw-hero{
    position:relative;

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

    min-height:155px;
    padding:28px 22px;

    overflow:hidden;

    color:var(--rw-text);

    background:
        radial-gradient(
            circle at 50% 145%,
            rgba(33,139,208,.24),
            transparent 52%
        ),
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 50%,
            rgba(33,139,208,.045)
        ),
        var(--rw-bg-deep);

    border:1px solid rgba(33,139,208,.31);
    border-left:5px solid var(--rw-accent);
    border-bottom:2px solid #1674b5;

    box-shadow:
        0 18px 42px rgba(0,0,0,.31),
        inset 0 1px rgba(255,255,255,.025);

    text-align:center;
}

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

    position:absolute;
    top:0;
    left:50%;

    width:240px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--rw-accent-light),
            transparent
        );

    transform:translateX(-50%);
}

.rw-hero:after{
    content:"RULE DATABASE";

    position:absolute;
    right:18px;
    bottom:10px;

    color:rgba(117,208,255,.055);

    font-family:Antonio,Arial,sans-serif;
    font-size:20px;
    font-weight:700;
    line-height:1;

    letter-spacing:4px;

    pointer-events:none;
}

.rw-hero-kicker{
    display:block;

    margin-bottom:5px;

    color:var(--rw-muted);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:2.4px;
    text-transform:uppercase;
}

.rw-hero-title{
    display:block;

    max-width:100%;

    color:var(--rw-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:2px;
    text-transform:uppercase;

    overflow-wrap:anywhere;

    text-shadow:0 0 20px rgba(33,139,208,.22);
}

.rw-hero-subtitle{
    display:block;

    max-width:720px;
    margin-top:8px;

    color:var(--rw-muted);

    font-size:12px;
    line-height:1.65;
}

/* Kompatibilität mit altem Hero-Template */

.rw-hero h4{
    display:block;

    margin:0;

    color:var(--rw-accent-light);
    background:transparent;

    border:0;

    font-family:Antonio,Arial,sans-serif;
    font-size:30px;
    font-weight:700;
    line-height:1.2;

    letter-spacing:2px;
    text-align:center;
    text-transform:uppercase;

    text-shadow:0 0 20px rgba(33,139,208,.22);
}

.rw-hero h4:before,
.rw-hero h4:after{
    display:none;
}

.rw-hero h14{
    display:block;

    margin-top:8px;

    color:var(--rw-muted);

    font-family:Arial,sans-serif;
    font-size:12px;
    font-weight:400;
    line-height:1.65;

    letter-spacing:0;
    text-transform:none;
}

/* ==========================================================
   HAUPTLAYOUT
   ========================================================== */

.rw-layout{
    display:grid;
    grid-template-columns:285px minmax(0,1fr);
    gap:18px;
    align-items:start;

    width:100%;
    margin-top:18px;
}

.rw-main{
    min-width:0;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.rw-sidebar{
    position:sticky;
    top:10px;

    min-width:0;
    padding:11px;

    color:var(--rw-text);

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.58),
            rgba(2,13,24,.88)
        );

    border:1px solid rgba(33,139,208,.23);
    border-left:3px solid #1674b5;

    box-shadow:0 11px 27px rgba(0,0,0,.22);
}

.rw-nav-subtitle{
    position:relative;

    display:flex;
    align-items:center;

    min-height:42px;
    margin:12px 0 6px;
    padding:8px 10px;

    color:var(--rw-accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 72%
        ),
        var(--rw-bg-deep);

    border-bottom:1px solid rgba(33,139,208,.18);

    font-family:Antonio,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:1px;
    text-transform:uppercase;
}

.rw-nav-subtitle:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:10px;

    width:52px;
    height:2px;

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

/* ==========================================================
   SUCHE
   ========================================================== */

.rw-search{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;

    width:100%;
    margin:0 0 12px;
}

.rw-search input{
    width:100%;
    min-width:0;
    min-height:40px;
    margin:0;
    padding:8px 10px;

    color:var(--rw-text-light);
    background:var(--rw-bg-deep);

    border:1px solid rgba(33,139,208,.25);
    border-radius:0;

    font-family:Arial,sans-serif;
    font-size:12px;
    line-height:1.4;

    outline:none;
}

.rw-search input:focus{
    background:#031426;

    border-color:var(--rw-accent);

    box-shadow:0 0 0 1px rgba(33,139,208,.18);
}

.rw-search button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:40px;
    padding:8px 11px;

    color:var(--rw-accent-light);
    background:var(--rw-bg-deep);

    border:1px solid rgba(33,139,208,.28);
    border-radius:0;

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.3;

    letter-spacing:.7px;
    text-transform:uppercase;

    cursor:pointer;

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

.rw-search button:hover{
    color:var(--rw-text-light);
    background:var(--rw-panel-light);

    border-color:var(--rw-accent);
}

/* ==========================================================
   DOKUMENTNAVIGATION
   ========================================================== */

.rw-doc-group{
    width:100%;

    border-bottom:1px solid rgba(33,139,208,.10);
}

.rw-doc-group:last-child{
    border-bottom:0;
}

.rw-doc-group summary{
    position:relative;

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

    min-height:42px;
    padding:8px 9px 8px 25px;

    color:var(--rw-text);

    list-style:none;

    font-family:Antonio,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.5px;
    text-transform:uppercase;

    cursor:pointer;

    transition:
        color .2s ease,
        background-color .2s ease;
}

.rw-doc-group summary::-webkit-details-marker{
    display:none;
}

.rw-doc-group summary:before{
    content:"›";

    position:absolute;
    top:50%;
    left:9px;

    color:var(--rw-accent);

    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1;

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

    transition:transform .2s ease;
}

.rw-doc-group[open] summary:before{
    transform:
        translateY(-50%)
        rotate(90deg);
}

.rw-doc-group summary:hover{
    color:var(--rw-accent-light);
    background:rgba(8,43,69,.62);
}

.rw-doc-group.active > summary{
    color:var(--rw-accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.14),
            transparent 75%
        ),
        var(--rw-bg-deep);

    border-left:2px solid var(--rw-accent);
}

.rw-doc-group summary em{
    margin-left:auto;

    color:var(--rw-muted);

    font-family:Arial,sans-serif;
    font-size:10px;
    font-weight:400;
    font-style:normal;
    line-height:1.4;

    letter-spacing:0;
    text-transform:none;
}

.rw-category-list{
    display:flex;
    flex-direction:column;

    padding:0 0 7px 17px;
}

.rw-nav-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    min-height:35px;
    padding:7px 9px;

    color:var(--rw-text);
    background:rgba(2,13,24,.35);

    border-bottom:1px solid rgba(33,139,208,.07);
    border-left:2px solid transparent;

    font-size:11px;
    line-height:1.45;

    text-decoration:none;
}

.rw-nav-item:hover,
.rw-nav-item.active{
    color:var(--rw-accent-light);
    background:rgba(8,43,69,.67);

    border-left-color:var(--rw-accent);
}

.rw-doc-all{
    color:var(--rw-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-weight:700;

    letter-spacing:.5px;
    text-transform:uppercase;
}

.rw-category-item{
    font-size:11px;
}

.rw-nav-item em{
    flex:0 0 auto;

    color:var(--rw-muted);

    font-size:10px;
    font-style:normal;
}

/* ==========================================================
   DOKUMENTKOPF UND ABSCHNITTE
   ========================================================== */

.rw-document-head,
.rw-section{
    width:100%;
    margin-bottom:20px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.48),
            rgba(2,13,24,.81)
        );

    border:1px solid rgba(33,139,208,.18);
    border-left:3px solid #1674b5;

    box-shadow:0 9px 22px rgba(0,0,0,.18);
}

.rw-document-title,
.rw-section-title,
.rw-document-head h14,
.rw-section h14{
    position:relative;

    display:flex;
    align-items:center;

    min-height:52px;
    margin:0;
    padding:11px 14px;

    color:var(--rw-accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 72%
        ),
        var(--rw-bg-deep);

    border:0;
    border-bottom:1px solid rgba(33,139,208,.20);

    font-family:Antonio,Arial,sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:1px;
    text-transform:uppercase;
}

.rw-document-title:after,
.rw-section-title:after,
.rw-document-head h14:after,
.rw-section h14:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:14px;

    width:65px;
    height:2px;

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

.rw-document-subtitle,
.rw-document-desc,
.rw-section-desc{
    padding:11px 14px;

    color:var(--rw-muted);
    background:rgba(2,13,24,.48);

    border-top:0;

    font-size:12px;
    line-height:1.7;
}

.rw-document-subtitle + .rw-document-desc{
    border-top:1px solid rgba(33,139,208,.09);
}

/* ==========================================================
   EINTRÄGE
   ========================================================== */

.rw-entry{
    width:100%;
    min-width:0;
    margin:14px 0;

    overflow:hidden;

    color:var(--rw-text);

    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.50),
            rgba(2,13,24,.86)
        );

    border:1px solid rgba(33,139,208,.18);
    border-left:3px solid #1674b5;

    box-shadow:0 10px 24px rgba(0,0,0,.20);
}

.rw-entry-title,
.rw-entry > h8{
    position:relative;

    display:flex;
    align-items:center;

    min-height:50px;
    margin:0;
    padding:10px 13px;

    color:var(--rw-accent-light);

    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent 72%
        ),
        var(--rw-bg-deep);

    border:0;
    border-bottom:1px solid rgba(33,139,208,.19);

    font-family:Antonio,Arial,sans-serif;
    font-size:16px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.9px;
    text-transform:uppercase;

    overflow-wrap:anywhere;
}

.rw-entry-title:after,
.rw-entry > h8:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:13px;

    width:58px;
    height:2px;

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

.rw-entry-body{
    padding:13px;
}

/* ==========================================================
   INHALT
   ========================================================== */

.rw-content{
    display:block;

    min-width:0;
    margin:4px 0 10px;

    color:var(--rw-text);

    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:400;
    line-height:1.75;

    overflow-wrap:anywhere;
}

.rw-content:last-child{
    margin-bottom:0;
}

.rw-content p{
    margin:0 0 12px;
}

.rw-content p:last-child{
    margin-bottom:0;
}

.rw-content strong,
.rw-content b{
    color:var(--rw-text-light);

    font-weight:700;
}

.rw-content h1,
.rw-content h2,
.rw-content h3,
.rw-content h4,
.rw-content h5{
    position:relative;

    display:block;

    margin:20px 0 8px;
    padding:0 0 7px;

    color:var(--rw-accent-light);
    background:transparent;

    border:0;
    border-bottom:1px solid rgba(33,139,208,.20);

    font-family:Antonio,Arial,sans-serif;
    font-size:15px;
    font-weight:700;
    line-height:1.4;

    letter-spacing:.8px;
    text-align:left;
    text-transform:uppercase;

    text-shadow:none;
}

.rw-content h1:before,
.rw-content h2:before,
.rw-content h3:before,
.rw-content h4:before,
.rw-content h5:before{
    display:none;
}

.rw-content h1:after,
.rw-content h2:after,
.rw-content h3:after,
.rw-content h4:after,
.rw-content h5:after{
    content:"";

    position:absolute;
    bottom:-1px;
    left:0;

    display:block;

    width:48px;
    height:2px;
    margin:0;
    padding:0;

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

.rw-content h4,
.rw-content h5{
    margin-top:15px;

    font-size:13px;
}

.rw-content ul,
.rw-content ol{
    margin:7px 0 14px 22px;
    padding:0;
}

.rw-content li{
    margin:5px 0;

    break-inside:avoid;
}

.rw-content li::marker{
    color:var(--rw-accent);
}

.rw-content blockquote{
    margin:13px 0;
    padding:10px 12px;

    color:var(--rw-muted);
    background:rgba(2,13,24,.50);

    border:1px solid rgba(33,139,208,.12);
    border-left:3px solid var(--rw-accent);

    font-style:italic;
}

/* ==========================================================
   HINWEISE INNERHALB DER REGELN
   ========================================================== */

.rw-content .rw-notice,
.rw-content .rw-warning,
.rw-content .rw-important{
    margin:12px 0;
    padding:10px 12px;

    color:var(--rw-text);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 75%
        ),
        rgba(2,13,24,.52);

    border:1px solid rgba(33,139,208,.16);
    border-left:3px solid var(--rw-accent);

    font-size:12px;
    line-height:1.65;
}

.rw-content .rw-warning{
    background:
        linear-gradient(
            90deg,
            rgba(224,178,109,.09),
            transparent 75%
        ),
        rgba(2,13,24,.52);

    border-color:rgba(224,178,109,.25);
    border-left-color:var(--rw-warning);
}

.rw-content .rw-important{
    background:
        linear-gradient(
            90deg,
            rgba(212,127,135,.09),
            transparent 75%
        ),
        rgba(2,13,24,.52);

    border-color:rgba(212,127,135,.25);
    border-left-color:var(--rw-danger);
}

/* ==========================================================
   SPALTEN UND FAKTEN
   ========================================================== */

.rw-content .rw-columns{
    columns:2 250px;
    column-gap:30px;

    margin:8px 0;
}

.rw-content .rw-facts{
    display:grid;
    grid-template-columns:minmax(150px,220px) minmax(0,1fr);
    gap:1px;

    margin:6px 0 18px;

    background:rgba(33,139,208,.07);

    border:1px solid rgba(33,139,208,.11);
}

.rw-content .rw-facts dt,
.rw-content .rw-facts dd{
    margin:0;
    padding:7px 9px;

    background:rgba(2,13,24,.54);
}

.rw-content .rw-facts dt{
    color:var(--rw-accent-light);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1.5;

    letter-spacing:.6px;
    text-transform:uppercase;
}

.rw-content .rw-facts dd{
    color:var(--rw-text);

    font-size:12px;
    line-height:1.55;
}

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

.rw-content table{
    width:100%;
    margin:12px 0;

    border-collapse:collapse;

    color:var(--rw-text);
    background:rgba(2,13,24,.45);

    font-size:12px;
}

.rw-content th,
.rw-content td{
    padding:8px 10px;

    border:1px solid rgba(33,139,208,.14);

    text-align:left;
    vertical-align:top;
}

.rw-content th{
    color:var(--rw-accent-light);
    background:var(--rw-bg-deep);

    font-family:Antonio,Arial,sans-serif;
    font-size:10px;
    font-weight:700;

    letter-spacing:.6px;
    text-transform:uppercase;
}

.rw-content tr:nth-child(even) td{
    background:rgba(8,43,69,.18);
}

/* ==========================================================
   EINKLAPPBARE BEREICHE
   ========================================================== */

.rw-fold{
    width:100%;
    margin:9px 0;

    overflow:hidden;

    background:rgba(2,13,24,.45);

    border:1px solid rgba(33,139,208,.14);
    border-left:2px solid rgba(33,139,208,.40);
}

.rw-fold summary,
.rw-entry summary{
    position:relative;

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

    min-height:41px;
    margin:0;
    padding:8px 34px 8px 10px;

    color:var(--rw-text-light);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.09),
            transparent 75%
        ),
        var(--rw-bg-deep);

    border:0;

    list-style:none;

    cursor:pointer;
}

.rw-fold summary::-webkit-details-marker,
.rw-entry summary::-webkit-details-marker{
    display:none;
}

.rw-fold summary:after,
.rw-entry summary:after{
    content:"›";

    position:absolute;
    top:50%;
    right:12px;

    color:var(--rw-accent);

    font-family:Arial,sans-serif;
    font-size:17px;
    font-weight:700;
    line-height:1;

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

    transition:transform .2s ease;
}

.rw-fold[open] summary:after,
.rw-entry details[open] summary:after{
    transform:
        translateY(-50%)
        rotate(90deg);
}

.rw-fold summary:hover,
.rw-entry summary:hover{
    color:var(--rw-accent-light);
    background:var(--rw-panel-soft);
}

.rw-fold-label,
.rw-fold summary h7,
.rw-entry summary h7{
    display:block;

    margin:0;
    padding:0;

    color:inherit;
    background:transparent;

    border:0;

    font-family:Antonio,Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    line-height:1.45;

    letter-spacing:.7px;
    text-transform:uppercase;
}

.rw-fold > .rw-content{
    margin:0;
    padding:11px 12px;

    border-top:1px solid rgba(33,139,208,.10);
}

.rw-entry details{
    width:100%;
    margin:8px 0;

    border-top:0;
}

.rw-entry details > .rw-content{
    margin:0;
    padding:10px 11px;

    border-top:1px solid rgba(33,139,208,.09);
}

/* ==========================================================
   TEAM- UND STAFFBEREICHE
   ========================================================== */

.rw-staff{
    margin:10px 0;
    padding:10px 12px;

    color:var(--rw-text);
    background:
        linear-gradient(
            90deg,
            rgba(212,127,135,.09),
            transparent 75%
        ),
        rgba(2,13,24,.50);

    border:1px solid rgba(212,127,135,.23);
    border-left:3px solid var(--rw-danger);
}

.rw-text-block{
    padding-top:4px;
}

/* ==========================================================
   LEERE BEREICHE UND STAFFHINWEISE
   ========================================================== */

.rw-empty,
.rw-staff-note{
    width:100%;
    margin-bottom:12px;
    padding:13px 14px;

    color:var(--rw-text);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.08),
            transparent 75%
        ),
        var(--rw-panel);

    border:1px solid rgba(33,139,208,.20);
    border-left:3px solid var(--rw-accent);

    font-size:12px;
    line-height:1.65;
}

.rw-empty{
    color:var(--rw-muted);

    border-style:dashed;

    text-align:center;
}

.rw-staff-note{
    background:
        linear-gradient(
            90deg,
            rgba(212,127,135,.08),
            transparent 75%
        ),
        var(--rw-panel);

    border-color:rgba(212,127,135,.25);
    border-left-color:var(--rw-danger);
}

/* ==========================================================
   SCROLLBARS
   ========================================================== */

.regelwerk-wrap *{
    scrollbar-width:thin;
    scrollbar-color:#1674b5 var(--rw-bg-deep);
}

.regelwerk-wrap *::-webkit-scrollbar{
    width:7px;
    height:7px;
}

.regelwerk-wrap *::-webkit-scrollbar-track{
    background:var(--rw-bg-deep);
}

.regelwerk-wrap *::-webkit-scrollbar-thumb{
    background:#1674b5;

    border:2px solid var(--rw-bg-deep);
}

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

@media screen and (max-width:850px){

    .rw-layout{
        grid-template-columns:1fr;
    }

    .rw-sidebar{
        position:relative;
        top:auto;
    }

    .rw-content .rw-columns{
        columns:1;
    }
}

@media screen and (max-width:600px){

    .regelwerk-wrap{
        margin:14px auto 30px;
    }

    .rw-hero{
        min-height:125px;
        padding:22px 14px;
    }

    .rw-hero-title,
    .rw-hero h4{
        font-size:24px;
    }

    .rw-hero:after{
        display:none;
    }

    .rw-entry-body{
        padding:10px;
    }

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

    .rw-content .rw-facts dt{
        padding-bottom:4px;
    }

    .rw-content .rw-facts dd{
        padding-top:4px;
    }

    .rw-content table{
        display:block;

        overflow-x:auto;
    }
}