/* ==========================================================
   RHENUS
   REFERENZ-BIBLIOTHEK
   ========================================================== */

html {
    overflow-y: scroll;
}

/* ==========================================================
   BIBLIOTHEK
   ========================================================== */

.rb-bibliothek {

    max-width: 1100px;
    margin: 60px auto 100px;
    padding-inline: 22px;
    box-sizing: border-box;
}

/* ==========================================================
   LAYOUT-HEADER
   ========================================================== */

.layout-header {

    --header-pad-y: clamp(12px, 1.6vw, 32px);

}

/* ==========================================================
   BIBLIOTHEKS-HEADER
========================================================== */

.rb-header{

    position: sticky;
    top: 80px;

    z-index: 20;

    width: 100%;
    
    margin: 0;

    box-sizing:border-box;

 

    background: linear-gradient(
    180deg,
    var(--bg-main),
    var(--bg-soft)

  );

}

/* ==========================================================
   TAGMODUS
   ========================================================== */

body.light-theme .rb-header{

    background: linear-gradient(
        180deg,
        rgba(250,250,248,1),
        rgba(241,242,239,1)
    );

}

/* ==========================================================
   BIBLIOTHEKS-NAVIGATION - Container
   ========================================================== */

.rb-nav{

    display:flex;

    flex-wrap: wrap;

    justify-content: stretch;

    align-items:stretch;

    

    width:100%;

    margin:0 auto;
    margin-bottom:1px;

    background:none;

    border-radius:0;

    /*overflow:hidden;*/

}




/* ==========================================================
   Kategorien
   ========================================================== */

.rb-category{
 
    position:relative;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:1 1 auto;

    min-width:max-content;
    max-width:none;

    height:60px;

    padding:0 22px;

    margin-right:-1px;
    margin-bottom:-1px;

    background:none;

    border-top:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
    border-left:1px solid rgba(255,255,255,.10);
    border-right:1px solid rgba(255,255,255,.10);

    color:rgba(220,224,228,1);

    font-family:"Inter",sans-serif;

    font-size:20px;

    font-weight:500;

    letter-spacing:.03em;

    white-space:nowrap;

    box-sizing:border-box;

    cursor:pointer;

    transition:background .15s,color .15s;

}

body.light-theme .rb-category{

    background: rgba(245,245,242,1);

    color: rgba(45, 70, 110, 1);

    border-color: rgba(0,0,0,.14);

}





.rb-category:hover{

    background:rgba(255,255,255,.05);

     color:rgba(255,255,255,1);

}

body.light-theme .rb-category:hover{

    background: rgba(236,236,232,1);

    color: rgba(45, 70, 110, 1);

}

.rb-category.active{

    position:relative;

    background:rgba(255,255,255,.05);

    color:rgba(255,255,255,1);

}

body.light-theme .rb-category.active{

    background: rgba(232,232,228,1);

    color: rgba(45, 70, 110, 1);

}

.rb-category.active::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-1px;

    height:2px;

    background:rgba(255,160,0,1);

}


button.rb-category{

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    
    outline:none;

}

button.rb-category::-moz-focus-inner{

    border:0;
    padding:0;

}

button.rb-category:focus{

    outline:none;

}

/* ==========================================================
   PANEL
   ========================================================== */

.rb-panel{

    display:none;

    gap:40px;

    width:100%;

    min-height:420px;

    padding:32px 22px;

    background: rgba(32,36,42,1);

    /*background:rgba(255,255,255,.025);*/

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

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

    box-sizing:border-box;



}


.rb-panel.active{

    display:flex;

}

body.light-theme .rb-panel{

    background: rgba(250,250,248,1);

    border-color: rgba(0,0,0,.12);

}

/* ==========================================================
   UNTERMENÜ – TOGGLE
   ========================================================== */

.rb-submenu-toggle{
    appearance:none;
    -webkit-appearance:none;

    border:none;
    background:none;

    padding:0;
    margin:0;

    font:inherit;
    color:inherit;

    text-align:left;
    cursor:pointer;
}

.rb-submenu-arrow{
    display:inline-block;
    margin-left:8px;
    font-size:18px;
    color:rgba(255,255,255,.45);
    transition:.18s;
}

body.light-theme .rb-submenu-arrow{
    color:rgba(0,0,0,.45);
}

.rb-submenu-toggle:hover .rb-submenu-arrow{
    color:rgba(255,160,0,1);
}

/* ==========================================================
   UNTERMENÜ
   ========================================================== */

.rb-submenu{
    display:none;

    grid-template-columns:1fr 44px;

    margin:0 14px 0 60px;
    padding:0;

    width:calc(100% - 74px);
}

.rb-submenu.active{
    display:grid;
}

.rb-submenu a{
    display:flex;
    align-items:center;

    width:100%;
    min-height:52px;

    padding:0 0 0 30px;

    box-sizing:border-box;

    border-bottom:1px solid rgba(255,255,255,.06);

    color:var(--text-main);

    font-size:17px;
    font-weight:400;

    text-decoration:none;
    cursor:pointer;
}

body.light-theme .rb-submenu a{
    border-bottom:1px solid rgba(0,0,0,.08);
}

.rb-submenu a:hover{
    color:rgba(255,160,0,1);
}

.rb-submenu > .rb-open{
    width:44px;
    height:52px;

    border-bottom:1px solid rgba(255,255,255,.06);
}

body.light-theme .rb-submenu > .rb-open{
    border-bottom:1px solid rgba(0,0,0,.08);
}


/* ==========================================================
   REFERENZLISTE
   ========================================================== */

.rb-list{

    flex:1;

}

.rb-list ul{

    margin:0;

    padding:0;

    list-style:none;

}


/* ==========================================================
   REFERENZ
   ========================================================== */

.rb-item{

    display:grid;
position:relative;
    grid-template-columns:75px 1fr 44px;

    align-items:center;

    min-height:52px;

    padding:0 12px;

    border-bottom:1px solid rgba(255,255,255,.06);

    transition:
        background .18s ease,
        padding-left .18s ease;

}

.rb-item:has(.rb-lock)::before{
    content:"🔒";
    position:absolute;

    left:62px;
    top:50%;
    transform:translateY(-50%);

    font-size:13px;
    line-height:1;
    opacity:.55;
}

body.light-theme .rb-item{

    border-bottom: 1px solid rgba(0,0,0,.08);

}

.rb-item:hover{

    background:rgba(255,255,255,.03);

    

}

body.light-theme .rb-item:hover{

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

}

.rb-number{

    width:42px;

    font-size:15px;

    color:rgba(255,255,255,.45);

    text-align:right;

}

body.light-theme .rb-number{

    color: rgba(0,0,0,.45);

}

.rb-title{

    flex:1;

    font-size:17px;

    font-weight:400;

    color:var(--text-main);

    /*padding-left:13px;
    text-indent:-13px;*/

    padding-left:0;
text-indent:0;
}

.rb-title:hover{
    color:rgba(255,160,0,1);
}

.rb-title a{

    color:inherit;

    text-decoration:none;

}

.rb-title a:hover{

    color:rgba(255,160,0,1);

}

/* ==========================================================
   Referenz-Karte öffnen
   ========================================================== */

.rb-open{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    width:40px;

    height:40px;

    background:none;

    border:none;

    color:rgba(255,255,255,.45);

    cursor:pointer;

    transition:.18s;

}

body.light-theme .rb-open{

    color: rgba(0,0,0,.45);

}

.rb-open:hover{

    color:rgba(255,160,0,1);

}

body.light-theme .rb-open:hover{

    color:rgba(255,160,0,1);

}

/* ===== offen markiert ====== */

.rb-open.active{

    color:rgba(255,160,0,1);

}

body.light-theme .rb-open.active{

    color:rgba(255,160,0,1);

}

/* ==========================================================
   DETAILKARTE
   ========================================================== */

.rb-card{
    display:none;

    grid-column:1 / -1;

    margin:0;

    padding:8px 24px 10px 90px;

    box-sizing:border-box;

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

    border-top:1px solid rgba(0,0,0,.06);
    border-bottom:1px solid rgba(0,0,0,.06);
}

.rb-card.active{
    display:block;
}

body.light-theme .rb-card{
    background:rgba(0,0,0,.018);

    border-top:1px solid rgba(0,0,0,.07);
    border-bottom:1px solid rgba(0,0,0,.07);
}


/* ==========================================================
   CARD-ZEILEN
   ========================================================== */

.rb-card-item{
    display:grid;

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

    column-gap:20px;

    align-items:center;

    padding:3px 0;
}


/* ==========================================================
   LABEL
   ========================================================== */

.rb-card-label{
    font-size:12px;

    line-height:1.3;

    letter-spacing:.04em;

    color:rgba(31,46,61,.52);
}


/* ==========================================================
   WERT
   ========================================================== */

.rb-card-value{
    min-width:0;

    font-size:14px;

    line-height:1.35;

    color:rgba(31,46,61,1);
}


/* ==========================================================
   AUDIO
   ========================================================== */

.rb-card-item audio{
    display:block;
    height:30px;
    margin:0;
}

.rb-card-item:nth-child(3){
    padding-bottom:16px;
}

.rb-card-item:nth-child(4){
    padding-bottom:16px;
}

/* ==========================================================
   LESEDAUER
   ========================================================== */

.rb-card-duration{
    display:flex;

    align-items:baseline;

    gap:6px;

    white-space:nowrap;
}


/* ==========================================================
   CARD OHNE HOVER-EFFEKT
   ========================================================== */

/*.rb-card:hover{
    background:rgba(0,0,0,.018);
}*/


/* ==========================================================
   EIGENSTÄNDIGE BIBLIOTHEKS-HEADER
   ========================================================== */

/* HEADER 1 — RHENUS / SEITENIDENTITÄT */

.rb-site-header{
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    background:var(--bg-main);

  
}

body.light-theme .rb-site-header {
    box-shadow: none !important;
}

.rb-header-top{
    position:relative;
    width:100%;
    background:var(--bg-main);
    
border-bottom:none;
}

body.light-theme .rb-header-top{
    background:rgba(250,250,248,1);
}

.rb-page-title{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
    pointer-events:none;
    font-family:"Inter",sans-serif;
    font-size:36px;
    font-weight:500;
    letter-spacing:.02em;
    line-height:1;
    color:var(--text-main);
}

body.light-theme .rb-page-title{
    color:rgba(31,46,61,1);
}

/* Die drei Bedienelemente stehen rechts in der gewünschten Reihenfolge:
   H-Menü → Sprache → Tag/Nacht. */
.rb-main-controls{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:18px;
    margin-left:auto;
}


.rb-main-controls .language-switch,
.rb-main-controls .ui-theme-toggle,
.rb-main-controls .nav-toggle{
    flex:0 0 auto;
}

.rb-main-controls .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:0;
    margin:0;
}

/* ==========================================================
   HEADER — EINZELNE POSITIONIERUNG
   ========================================================== */

.rb-main-controls .language-switch{
    position:relative;
    top:0px;
}

.rb-main-controls .ui-theme-toggle{
    position:relative;
    top:-1px;
}

.rb-main-controls .nav-toggle{
    position:relative;
    top:-1px;
}

/* Das bisherige Hauptmenü ist nicht mehr Teil der sichtbaren
   Kopfzeile. Es bleibt im DOM und wird über das H-Menü geöffnet. */


/* ==========================================================
   H-MENÜ — NAVIGATIONSPANEL
   ========================================================== */

.rb-main-controls .nav-menu {
    display: none;
    position: fixed;
    top: var(--header-height);
    right: max(0px, calc((100vw - 1340px) / 2));

    width: 270px;
    max-width: calc(100vw - 32px);

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    background: rgba(250,250,248,1);

    border: 1px solid rgba(31,46,61,.14);

    box-shadow:
        0 12px 28px rgba(0,0,0,.12);

    z-index: 1500;
}

.rb-main-controls .nav-menu.nav-open {
    display: block;
}


/* ==========================================================
   H-MENÜ — HAUPTEINTRÄGE
   ========================================================== */

.rb-main-controls .nav-menu > li{
    display:block;

    margin:0;
    padding:0;

    border:0;
}

.rb-main-controls .nav-menu > li::before,
.rb-main-controls .nav-menu > li::after{
    display:none !important;
}

.rb-main-controls .nav-menu > li + li{
    border-top:1px solid rgba(31,46,61,.10);
}

.rb-main-controls .nav-menu > li > a,
.rb-main-controls .nav-menu > li > button{

    display:flex;
    align-items:center;

    width:100%;
    min-height:50px;

    box-sizing:border-box;

    margin:0;
    padding:11px 16px;

    border:0;
    background:transparent;

    color:rgba(31,46,61,1);

    text-decoration:none;
    text-align:left;

    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:400;
    line-height:1.35;
    letter-spacing:.025em;

    cursor:pointer;

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


/* ==========================================================
   H-MENÜ — HOVER
   ========================================================== */

.rb-main-controls .nav-menu > li > a:hover,
.rb-main-controls .nav-menu > li > button:hover{

    background:rgba(31,46,61,.045);

    color:rgba(31,46,61,1);
}


/* ==========================================================
   H-MENÜ — AKTIVER EINTRAG
   ========================================================== */

.rb-main-controls .nav-menu > li.active > a,
.rb-main-controls .nav-menu > li.active > button{

    background:rgba(31,46,61,.035);

    color:rgba(31,46,61,1);
}


/* ==========================================================
   H-MENÜ — UNTERMENÜ
   ========================================================== */

.rb-main-controls .nav-menu .has-submenu{
    position:relative;
}


/* Der geöffnete Hauptpunkt bleibt als Ursprung erkennbar */

.rb-main-controls .nav-menu .has-submenu.submenu-open > a,
.rb-main-controls .nav-menu .has-submenu.submenu-open > button{

    background:rgba(31,46,61,.07);
    color:rgba(31,46,61,1);

}

/* Untermenü schert harmonisch nach links aus */

.rb-main-controls .nav-menu .submenu{
    position:absolute;
    top:100%;
    left:50%;
    right:auto;
    transform:translateX(-50%);

    display:none;

    width:270px;
    min-width:270px;

    margin:0;
    padding:0;

    box-sizing:border-box;

    background:rgb(250,250,248);
    border:1px solid rgba(31,46,61,.14);

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

    z-index:130;
}


.rb-main-controls .nav-menu .has-submenu.submenu-open > .submenu{
    display:block;
}


/* ==========================================================
   H-MENÜ — UNTERMENÜ-EINTRÄGE
   ========================================================== */

.rb-main-controls .nav-menu .submenu li{

    display:block;

    margin:0;
    padding:0;
}


.rb-main-controls .nav-menu .submenu li + li{
    border-top:0;
}

.rb-main-controls .nav-menu .submenu a{
    margin-left:12px;
    margin-right:12px;
    width:calc(100% - 24px);
}
    
.rb-main-controls .nav-menu .submenu li + li a{
    border-top:1px solid rgba(31,46,61,.10);
}

.rb-main-controls .nav-menu .submenu a{
    display:flex;
    align-items:center;

    width:100%;
    min-height:44px;

    box-sizing:border-box;
    margin:0;

    padding:8px 16px 8px 22px;

    color:rgba(31,46,61,.85);

    text-decoration:none;

    font-family:"Inter",sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1.3;
    letter-spacing:.02em;
}


.rb-main-controls .nav-menu .submenu a:hover{

    background:rgba(31,46,61,.045);

    color:rgba(31,46,61,1);

}

.rb-main-controls .nav-menu .submenu li:nth-child(2) a{
    white-space:normal;
    line-height:1.25;
    min-height:70px;
}

.rb-main-controls .nav-menu .submenu li:nth-child(3) a{
    white-space:normal;
    line-height:1.25;
    min-height:70px;
}

/* ==========================================================
   H-MENÜ — LICHTMODUS
   ========================================================== */

body.light-theme .rb-main-controls .nav-menu .has-submenu.submenu-open > a,
body.light-theme .rb-main-controls .nav-menu .has-submenu.submenu-open > button{

    background:rgba(31,46,61,.07);

    color:rgba(31,46,61,1);

}


body.light-theme .rb-main-controls .nav-menu .submenu{

    background: rgb(242, 235, 223);

    border-color:rgba(31,46,61,.14);

}


body.light-theme .rb-main-controls .nav-menu .submenu li + li{

    border-top-color:rgba(31,46,61,.10);

}


body.light-theme .rb-main-controls .nav-menu .submenu a{

    color:rgba(31,46,61,1);

}


body.light-theme .rb-main-controls .nav-menu .submenu a:hover{

    background:rgba(31,46,61,.045);

    color:rgba(31,46,61,1);

}


/* ==========================================================
   ENDE H-MENÜ
   ========================================================== */

/* HEADER 2 — ausschließlich Bibliotheksmenü */

.rb-library-header{
    position:sticky;
    top:var(--header-height);
    z-index:99;
    width:100%;
    background:var(--bg-main);
    border-top:2px solid rgba(210,210,210,.7);
    border-bottom:2px solid rgba(180,180,180,.4);



    }


body.light-theme .rb-library-header{
    background:rgba(250,250,248,1);
    border-top:1.5px solid rgba(0,0,0,.20);
    border-bottom:3px solid rgba(0,0,0,.20);
    box-shadow:none;

}

.rb-library-header .rb-nav{
    display:grid;
    grid-template-columns:repeat(5, minmax(max-content, 1fr));
    width:100%;
    max-width:none;
    margin:0;
    padding:0 22px;
    box-sizing:border-box;
}

.rb-library-header .rb-category{
    min-width:0;
    width:100%;
}

/* Der Bibliotheksinhalt selbst bleibt unabhängig vom Menü. */
.rb-bibliothek{
    max-width:1100px;
    margin:40px auto 100px;
    padding-inline:22px;
    box-sizing:border-box;
}

/* =============================
      GESPERRTE ARTIKELSEITEN
   ============================= */

/* =============================
   GESPERRTE ARTIKELSEITEN
   ============================= */















/* ======================================================
   ARTIKELSEITEN — ANKER-SPRUNG
   Doppelheader der Referenz-Bibliothek berücksichtigen
   ====================================================== */

.section-block {
    scroll-margin-top: 200px;
}

 /* ======================================================
       ARTIKELSEITEN —
       REFERENZ-BIBLIOTHEK ALS OVERLAY
       ====================================================== */

  .rb-article-library-overlay {
    position: fixed;

    left: 50%;
    right: auto;

    width: 950px;
    max-width: calc(100vw - 40px);

    transform: translateX(-50%);

    z-index: 98;

    max-height: calc(100vh - 164px);
    overflow-y: auto;

    padding: 20px 0 40px;

    box-sizing: border-box;

    background: rgba(32,36,42,1);
    border: 1px solid rgba(255,255,255,.14);

    display: none;
}

.rb-article-library-overlay.active {
    display: block;
}

body.light-theme .rb-article-library-overlay {
    background: rgba(250,250,248,1);
    border: 1px solid rgba(0,0,0,.14);
}

.rb-article-library-panel {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}


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

@media (max-width:1180px){
    .rb-page-title{
        font-size:27px;
    }

    .rb-library-header .rb-nav{
        padding-inline:12px;

        
    }

    .rb-library-header .rb-category{
        height:54px;
        padding-inline:12px;
        font-size:17px;
    }
}

/* ===================================================== */
/* GLOSSAR — BUTTON                                      */
/* ===================================================== */

.rb-glossar-anchor {
    position: fixed;

    right: max(20px, calc((100vw - 900px) / 2));

    width: min(900px, calc(100vw - 40px));

    margin: 0;

    display: flex;
    justify-content: flex-end;

    z-index: 120;

    transform: translateY(-100px);
}

.rb-glossar-button {
    position: relative;

    z-index: 20;

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

    margin: 0;
    padding: 8px 14px;

    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;

    color: inherit;
    background: rgba(250, 250, 250, 1);

    border: 1px solid currentColor;
    border-radius: 6px;

    cursor: pointer;
}

.rb-glossar-button:hover {
    opacity: 0.78;
}

/* ==========================================================
   GLOSSAR — PANEL
   ========================================================== */

.rb-glossar-panel {
    position: fixed;

    z-index: 120;
display: none;
flex-direction: column;

    display: none;

    width: 520px;
    max-width: calc(100vw - 40px);

    max-height: calc(100vh - 60px);
    box-sizing: border-box;

    background: var(--bg-main);

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

    box-shadow:
        0 14px 32px rgba(0,0,0,.22);

    overflow: hidden;
}

.rb-glossar-panel.active {
    display: flex;
}

body.light-theme .rb-glossar-panel {
    background: rgba(250,250,248,1);
    border-color: rgba(0,0,0,.14);

    box-shadow:
        0 14px 32px rgba(0,0,0,.14);
}


/* ==========================================================
   GLOSSAR — SUCHBEREICH
   ========================================================== */

.rb-glossar-search {
    width: 100%;

    padding: 14px 16px;

    box-sizing: border-box;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);

    background: transparent;

    color: var(--text-main);

    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;

    outline: none;
}

body.light-theme .rb-glossar-search {
    border-bottom-color: rgba(0,0,0,.10);
}

.rb-glossar-search::placeholder {
    color: var(--text-muted);
}


/* ==========================================================
   GLOSSAR — INHALT
   ========================================================== */

.rb-glossar-content {
    height: auto;
    flex: 1;
    min-height: 0;
    overflow-y: auto;

    padding: 16px;

    box-sizing: border-box;

    overflow-y: auto;

    overscroll-behavior: contain;

    -webkit-overflow-scrolling: touch;
}


/* ==========================================================
   TABLET / MOBILE — BIS 768px
   ========================================================== */

@media (max-width:768px){

    /* ======================================================
       HAUPT-HEADER
       ====================================================== */
     
 

    .rb-site-header .layout-header{
        min-height:114px;
        flex-wrap:wrap;
    }

    .rb-site-header .layout-header .logo{
        flex:0 0 auto;
    }

    .rb-site-header .layout-header > nav{
        flex:0 0 auto;
        margin-left:auto;
    }

    .rb-page-title{
        position:static;
        transform:none;

        order:3;

        width:100%;
        box-sizing:border-box;

        padding:10px 12px 14px;

        text-align:center;

        font-size:23px;
        line-height:1.15;

        white-space:nowrap;
    }

    .rb-main-controls{
        gap:12px;
    }


    /* ======================================================
       HAUPTMENÜ
       ====================================================== */

    .rb-main-controls .nav-menu .submenu{
        max-height:calc(100svh - var(--header-height) - 150px);

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

        -webkit-overflow-scrolling:touch;
    }




    /* ======================================================
       BIBLIOTHEKS-NAVIGATION
       ====================================================== */

    .rb-library-header{
    top:var(--header-height);

    width:100%;
    margin:0px;
  

    padding-left:6px;
    padding-right:6px;

    box-sizing:border-box;
}

    .rb-library-header .rb-nav{
    display:flex;
    flex-wrap:wrap;

    width:100%;
    padding:0;
}

.rb-library-header .rb-category{
    flex:1 1 auto;

    min-width:max-content;
    width:auto;

    height:46px;

    padding-inline:12px;

    font-size:15px;
}


    /* ======================================================
       BIBLIOTHEKSINHALT — VOLLE BREITE
       ====================================================== */

    .rb-bibliothek{
        width:100%;
        max-width:none;

        margin:20px 0 70px;

        padding-inline:0;

        box-sizing:border-box;
    }

    .rb-panel{
    width:100vw;
    margin-left:calc(50% - 50vw);

    padding:16px 0;

    box-sizing:border-box;
}

/* ========================
       library-overlay
   ======================== */


    .rb-article-library-overlay{
    width:100vw;
    max-width:none;

    left:0;
    right:0;

    transform:none;

    max-height:calc(100vh - 164px);
}

    /* ======================================================
       REFERENZLISTE
       ====================================================== */

    .rb-item{
        display:grid;

        grid-template-columns:
            32px
            minmax(0,1fr)
            38px;

        column-gap:29px;

        align-items:center;

        min-height:0;

        padding:8px 2px;

        box-sizing:border-box;
    }



.rb-item:has(.rb-lock)::before{
    left:39px;
}


    /* ======================================================
       NUMMERIERUNG
       ====================================================== */

    .rb-number{
        width:auto;

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

        text-align:right;
    }


    /* ======================================================
       TITEL
       ====================================================== */

    .rb-title{
        min-width:0;

        font-size:16px;
        line-height:1.4;

        letter-spacing:.01em;

        overflow-wrap:normal;
        word-break:normal;
    }


    /* ======================================================
       REFERENZ-KARTE ÖFFNEN
       ====================================================== */

    .rb-open{
        width:38px;
        height:38px;

        font-size:23px;
    }


    /* ======================================================
       UNTERMENÜ DER REFERENZEN
       ====================================================== */

    .rb-submenu{
        grid-template-columns:
            minmax(0,1fr)
            38px;

        width:calc(100% - 46px);

        margin:0 2px 0 32px;

        padding:0;
    }

    .rb-submenu a{
        min-height:48px;

        padding:8px 0 8px 14px;

        font-size:15px;
        line-height:1.35;
    }

    .rb-submenu > .rb-open{
        width:38px;
        height:48px;
    }


   

    .rb-article-library-panel{
        padding:12px;
    }

    .rb-article-library-content .rb-item{
        grid-template-columns:
            32px
            minmax(0,1fr)
            38px !important;

        column-gap:14px;
    }

    .rb-article-library-content .rb-title{
        min-width:0;
        font-size:16px;
        line-height:1.4;
    }

    .rb-article-library-content .rb-submenu{
        width:calc(100% - 46px);
        margin:0 2px 0 32px;
    }

    .rb-article-library-content .rb-submenu a{
        min-height:48px;
        padding:8px 0 8px 14px;
    }

/* =============================================
   Anker-Sprung - Überschriftsabstand zum Header
   ============================================= */

.section-block {
    scroll-margin-top: 240px;
}

}

 /* ==========================================================
   SMARTPHONE — BIS 480px
   ========================================================== */

@media (max-width:480px){

    /* ===========================
       BIBLIOTHEKS-NAVIGATION
       =========================== */

     .rb-library-header{
        top:var(--header-height);
    }

    .rb-library-header .rb-nav{
    display:flex;
    flex-wrap:wrap;

    width:100%;
    padding:0;
}

    .rb-library-header .rb-category{
    flex:1 0 auto;

    width:auto;
    min-width:max-content;

    height:44px;

    padding-inline:8px;

    font-size:14px;
}


    /* ======================================
       BIBLIOTHEKSINHALT — KOMPLETT AUSNUTZEN
       ====================================== */

    .rb-bibliothek{
        width:100%;
        max-width:none;

        margin:16px 0 60px;

        padding:0;

        box-sizing:border-box;
    }


    /* ====================================
       PANEL — KEIN SEITLICHER INNENABSTAND
       ==================================== */

    .rb-panel{
        width:100%;

        padding:12px 0;

        box-sizing:border-box;
    }


    /* ====================
       REFERENZLISTE
       ==================== */

    .rb-list{
        width:100%;
        margin:0;
        padding:0;
    }


    /* ==========================
       EINZELNER REFERENZEINTRAG
       ========================== */

    .rb-item{
        display:grid;

        grid-template-columns:
            28px
            minmax(0,1fr)
            34px;

        column-gap:22px;

        width:100%;

        min-height:46px;

        padding:7px 0;

        box-sizing:border-box;
    }



.rb-item:has(.rb-lock)::before{
    left:30px;
}



    /* ===============
       NUMMER
       =============== */

    .rb-number{
        width:auto;

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

        text-align:right;
    }

    /* =============
       TITEL
       ============= */

    .rb-title{
        min-width:0;

        font-size:16px;
        line-height:1.35;

        letter-spacing:.01em;

        overflow-wrap:break-word;
        word-break:normal;
    }

    
    /* ===============
       REFERENZ-KARTE
       =============== */

    .rb-open{
        width:34px;
        height:34px;

        font-size:21px;
    }


.page-legal{
    margin-top:25px;
}


    /* ==================
       REFERENZ-UNTERMENÜ
       ================== */

    .rb-submenu{
        grid-template-columns:
            minmax(0,1fr)
            34px;

        width:calc(100% - 36px);

        margin:0 0 0 28px;

        padding:0;
    }

    .rb-submenu a{
        min-height:46px;

        padding:7px 0 7px 10px;

        font-size:14px;
        line-height:1.35;
    }

    .rb-submenu > .rb-open{
        width:34px;
        height:46px;
    }


    /* =================================
       ARTIKELSEITEN —
       REFERENZ-BIBLIOTHEK ALS OVERLAY
       ================================= */

    .rb-article-library-overlay{
        max-height:calc(100vh - 164px);
    }

    .rb-article-library-panel{
        width:100%;

        padding:10px 0;
    }

    .rb-article-library-content{
        width:100%;
    }

    .rb-article-library-content .rb-item{
        grid-template-columns:
            28px
            minmax(0,1fr)
            34px !important;

        column-gap:8px;

        width:100%;

        padding:7px 0;
    }

    .rb-article-library-content .rb-title{
        min-width:0;

        font-size:14px;
        line-height:1.35;
    }

    .rb-article-library-content .rb-submenu{
        width:calc(100% - 36px);

        margin:0 0 0 28px;
    }

/* =============================================
   Anker-Sprung - Überschriftsabstand zum Header
   ============================================= */    

.section-block {
    scroll-margin-top: 240px;
}



}