/***************************************************************/
/*                   Allgemeine Definitionen                   */
/***************************************************************/

/*****************************************************/
/*                    Colors                         */
/*****************************************************/
:root {
    /* Fonts */
    --ro-red: #910d14;
    --ro-white: #fff;
    --ro-dark: #111;
    --ro-dark2: #444;
    --ro-lightdark: #7a7a7a;
    --ro-grey: #ddd;
    /* Links */
    --ro-link-hover: #408cd3;
    /* Backgrounds */
    --ro-bg-dark: #111;
    --ro-bg-white: #fff;
    --ro-bg-red: #e41821;
    --ro-bg-red2: rgb(139, 0, 0);
    --ro-bg-nav-hover: #ececec; 
    --ro-bg-darkgrey: #484848;
    --ro-bg-darkergrey: #555;
    --ro-bg-grey: #e0e0e0;
    --ro-bg-darkgrey2: #505050;
    --ro-bg-lightgrey: #ececec;
    --ro-bg-acc-col: rgba(238, 214, 214, 0.1);
    --ro-bg-acc-notcol: rgb(108,117,125,0.1);
    --ro-bg-tab-notactive: rgb(108,117,125,0.1);
    --ro-bg-tab-active: #fff;
    --ro-bg-portfolio-active: #fafafa;
    --ro-bg-portfolio-notactive: #ececec;
    /* Background Images */
    --url-front-01: url(/images/front/back_01.jpg);
    --url-front-02: url(/images/front/bk_front_2.jpg);
    --url-ro-map: url(/images/sonstiges/map2.png);
    /* Border */
    --ro-border-red: #e41821;
    --ro-border-grey: #ddd;
    --ro-border-grey2: #bbb;
    --ro-border-midgrey: #7e7e7e;
    --ro-border-grey-hover: #ccc;
    --ro-border-white: #fff;
    --ro-border-ral: #ddd;
    --ro-border-dark: #111;
    /* Scrollbar */
    --ro-scroll-bg: #f1f1f1;
    --ro-scroll-thumb-hover-bg: #af3d43;
    /* Sidebar */
    --ro-sidenav-label-hover: #e6e6e6;
    /* Tables */
    --ro-table-bg-head: #E9E9E9;   
    /* Links */
    --ro-link-extern: #0303b6; 
    --ro-link-extern-hover: #e41821;

}

/*****************************************************/
/*                     HIDDEN                        */
/*****************************************************/
#puppy {
    display:none;
    opacity: 0;
    visibility: hidden;
}




/*****************************************************/
/*              Font Awesome 5 Free                  */
/*****************************************************/
@font-face {
    font-family: "Font Awesome 5 Free";
    src: url("/webfonts/fa-solid-900.ttf") format("truetype");
}

/*****************************************************/
/*                    Standard                       */
/*****************************************************/
a {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.font10 {
    font-size: 10pt;
}

.table-folien-height {
    height: 37px;
}

.fontsize1 {
    font-size: 1rem;
}

.fontsize125 {
    font-size: 1.25rem;
}

.fontsize15 {
    font-size: 1.5rem;
}

.ro-text-muted {
    color: var(--ro-dark2);
}



/*****************************************************/
/*                 ORDER & MediaQueries              */
/*****************************************************/
.order-6 {
    order: 6 !important;
}
.order-7 {
    order: 7 !important;
}
.order-8 {
    order: 8 !important;
}
.order-9 {
    order: 9 !important;
}
.order-10 {
    order: 10 !important;
}
.order-11 {
    order: 11 !important;
}
.order-12 {
    order: 12 !important;
}
.order-last {
    order: 12 !important;
}

@media (min-width: 576px) {
    .order-sm-6 {
        order: 6 !important;
    }
    .order-sm-7 {
        order: 7 !important;
    }
    .order-sm-8 {
        order: 8 !important;
    }
    .order-sm-9 {
        order: 9 !important;
    }
    .order-sm-10 {
        order: 10 !important;
    }
    .order-sm-11 {
        order: 11 !important;
    }
    .order-sm-12 {
        order: 12 !important;
    }
    .order-sm-last {
        order: 12 !important;
    }
}

@media (min-width: 768px) {
    .order-md-6 {
        order: 6 !important;
    }
    .order-md-7 {
        order: 7 !important;
    }
    .order-md-8 {
        order: 8 !important;
    }
    .order-md-9 {
        order: 9 !important;
    }
    .order-md-10 {
        order: 10 !important;
    }
    .order-md-11 {
        order: 11 !important;
    }
    .order-md-12 {
        order: 12 !important;
    }
    .order-md-last {
        order: 12 !important;
    }
}

@media (min-width: 992px) {
    .order-lg-6 {
        order: 6 !important;
    }
    .order-lg-7 {
        order: 7 !important;
    }
    .order-lg-8 {
        order: 8 !important;
    }
    .order-lg-9 {
        order: 9 !important;
    }
    .order-lg-10 {
        order: 10 !important;
    }
    .order-lg-11 {
        order: 11 !important;
    }
    .order-lg-12 {
        order: 12 !important;
    }
    .order-lg-last {
        order: 12 !important;
    }
}

@media (min-width: 1200px) {
    .order-xl-6 {
        order: 6 !important;
    }
    .order-xl-7 {
        order: 7 !important;
    }
    .order-xl-8 {
        order: 8 !important;
    }
    .order-xl-9 {
        order: 9 !important;
    }
    .order-xl-10 {
        order: 10 !important;
    }
    .order-xl-11 {
        order: 11 !important;
    }
    .order-xl-12 {
        order: 12 !important;
    }
    .order-xl-last {
        order: 12 !important;
    }
}

@media (min-width: 1400px) {
    .order-xxl-6 {
        order: 6 !important;
    }
    .order-xxl-7 {
        order: 7 !important;
    }
    .order-xxl-8 {
        order: 8 !important;
    }
    .order-xxl-9 {
        order: 9 !important;
    }
    .order-xxl-10 {
        order: 10 !important;
    }
    .order-xxl-11 {
        order: 11 !important;
    }
    .order-xxl-12 {
        order: 12 !important;
    }
    .order-xxl-last {
        order: 12 !important;
    }
}

/**************************************************************************************************/


/***************************************************************/
/*                         Bereiche                            */
/***************************************************************/

/*****************************************************/
/*                    Header                         */
/*****************************************************/
#header {
    height: 60px;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 99;
}
.header-left,
.header-right {
    position: absolute;
}

.header-right {
    margin-left: auto;
    margin-right: 0;
}

#header .logo {
    height: 60px;
    display: inline-flex;
    margin: 0;
    align-items: center;
}

.logo-image {
    height: 36px;
}


/*****************************************************/
/*                                                   */
/*       Wird aktuell nicht/teilweise benutzt        */
/*                                                   */
/*****************************************************/
/*                    Breadcrump                     */
/*            Style to change separator              */
/*****************************************************/
/*.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: var(--ro-white);
}

.ro-breadcrump {
    background: var(--ro-bg-red);
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding-top: 20px;
}

.ro-breadcrump-titel {
    color: var(--ro-white);
    font-size: 22px;
    font-weight: bold;
}

.ro-breadcrump li.active {
    color: var(--ro-white);
}

.ro-breadcrump a {
    color: var(--ro-white);
    text-decoration: none;
}

.ro-breadcrump a:hover {
    color: var(--ro-white);
    font-weight: bold;
}

.breadcrump-cat {
    color: var(--ro-white);
    text-decoration: none;
}*/

/*****************************************************/
/*                   Headline                        */
/*****************************************************/
.ro-headline {
    background: var(--ro-bg-red);
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 70px;
    margin-bottom: 20px;
}

.ro-headline-titel {
    color: var(--ro-white);
}



/*****************************************************/
/*                   TOP-BAR                         */
/*****************************************************/
.ro-top-bar {
    background: var(--ro-bg-dark);
    padding: 8px 0;
    font-size: 0.875rem;
}

#ro-top1 {
    color: var(--ro-grey);
}

#ro-top2 {
    color: var(--ro-grey);
}

.contact-info-top {
    list-style: none;
    padding: 0;
    margin: 0 -10px;
}

.contact-info-top li {
    display: inline-block;
    margin: 0 30px;
    font-size: 90%;
    white-space: normal;
}


/*****************************************************/
/*                Navigation                         */
/*****************************************************/
.ro-navigation a {text-decoration: none;}

.ul-reset {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
	list-style: none;
}

/* #Navigation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ro-navigation nav {
	background: var(--ro-bg-white);
	font-size: 0;
	position: relative;
    height: 60px;
    text-align: right;
}
.ro-navigation nav > ul {
    height: 60px;
}

.ro-navigation nav > ul > li {
	display: inline-block;
  	font-size: 14px;
  	padding: 0 15px;
  	position: relative;
    margin: 0 auto;
    height: 60px;
}
.ro-navigation nav > ul > li:first-child {padding-left: 0;}
.ro-navigation nav > ul > li:last-child {padding-right: 0;}
.ro-navigation nav > ul > li > a {
	color: var(--ro-dark);
  	display: block;
  	position: relative;
  	padding: 17px 5px;
    height: 60px;
}
.ro-navigation nav > ul > li:hover > a {
	color: var(--ro-red); 
  	
}


/* #Mega Menu Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ro-navigation .mega-menu {
	background: var(--ro-bg-white);
  	display: none;
  	left: auto;
    right: 0;
    padding-top: 20px;
  	position: absolute;
  	text-align: left;
  	width: 100%;
    border-top: 3px solid var(--ro-border-red);
    border-left: 1px solid var(--ro-border-midgrey);
    border-right: 1px solid var(--ro-border-midgrey);
    border-bottom: 1px solid var(--ro-border-midgrey);
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
    }
    @keyframes fadeInDown {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}


.ro-navigation .mega-menu p {
    color: var(--ro-dark);
    font-size: 16px; 
    font-weight: bold;
    text-decoration: underline;
}
.ro-navigation .mega-menu ul {
	float: left;
  	margin-bottom: 20px;
  	margin-left: 10px;
    margin-right: 0px;
    width: 100%;
}
.ro-navigation .mega-menu ul:last-child {
    margin-right: 0;
}
.ro-navigation .mega-menu a {
	
  	color: var(--ro-dark);
  	display: block;
  	padding: 10px 0;
}
.ro-navigation .mega-menu a:hover { 
    background: var(--ro-bg-nav-hover);
}


/* Small Menü */
.ro-navigation .small-menu {
	background: var(--ro-bg-white);
  	display: none;
  	left: auto;
    right: 0;
    padding-top: 20px;
  	position: absolute;
  	text-align: left;
  	width: 40%;
    border-top: 3px solid var(--ro-border-red);
    border-left: 1px solid var(--ro-border-midgrey);
    border-right: 1px solid var(--ro-border-midgrey);
    border-bottom: 1px solid var(--ro-border-midgrey);
}

.ro-navigation .small-menu ul {
	float: left;
  	margin-bottom: 20px;
  	margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

.ro-navigation .small-menu ul:last-child {
    margin-right: 0;
}
.ro-navigation .small-menu a {
	
  	color: var(--ro-dark);
  	display: block;
  	padding: 10px 0;
}
.ro-navigation .small-menu a:hover { 
    background: var(--ro-bg-nav-hover);
}


/* #Droppable Class Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ro-navigation .droppable {position: static;}

.ro-navigation .nav-icon {
    font-size: 18px;
    padding-left: 6px;
    position: relative;
    top: 2px;
}

.ro-navigation .droppable:hover .mega-menu {
    display: block;
}

.ro-navigation .droppable:hover .small-menu {
    display: block;
}

.mega-menu-full {
    left: auto;
    right: 0;
}

.small-menu-full {
    left: auto;
    right: 0;
}

@media (min-width: 576px) {
    .mega-menu-full.container {
        width: 540px;
        box-shadow: 0 3px 5px 0 rgb(0 0 0 / 20%);
    }
}

@media (min-width: 768px) {
    .mega-menu-full.container {
        width: 720px;
        box-shadow: 0 3px 5px 0 rgb(0 0 0 / 20%);
    }
}

@media (min-width: 992px) {
    .mega-menu-full.container {
        width: 960px;
        box-shadow: 0 3px 5px 0 rgb(0 0 0 / 20%);
    }
}

@media (min-width: 1200px) {
    .mega-menu-full.container {
        width: 1140px;
        box-shadow: 0 3px 5px 0 rgb(0 0 0 / 20%);
    }
}

@media (min-width: 1400px) {
    .mega-menu-full.container {
        width: 1320px;
        box-shadow: 0 3px 5px 0 rgb(0 0 0 / 20%);
    }
}





/* #Browser Clearfix
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.ro-navigation .cf:before,
.ro-navigation .cf:after {
	content: " "; /* 1 */
    display: table; /* 2 */
    margin: 0 auto;
}
.ro-navigation .cf:after {
    clear: both;
}




/*****************************************************/
/*                  Offcanvas                        */
/*****************************************************/
.ro-offcanvas-icon {
    font-size: 22px;
}

.ro-offcanvas-icon a {
    font-size: 22px;
    color: var(--ro-dark);
}

.ro-offcanvas-icon a:hover {
    font-size: 22px;
    color: var(--ro-red);
    cursor: pointer;
}

/* Styling top level menu items */
.sidenavcontainer {
    overflow: auto;
    max-height: calc(100% - 135px);
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--ro-scroll-bg); 
  }
   
  /* Handle */
::-webkit-scrollbar-thumb {
    background: var(--ro-bg-red);
  }
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--ro-scroll-thumb-hover-bg); 
  }

  .sidenavcontainer {
    margin-right: 20px;
    margin-left: 20px;
}

.offcanvas .sidenavcontainer .sidenav {
    margin-left: 0;
}

.offcanvas .sidenavcontainer .sidenav a, 
.offcanvas .sidenavcontainer .sidenav label {
    display: block;
    padding: .85rem;
    color: var(--ro-dark);
    background-color: var(--ro-bg-white);
    /*box-shadow: inset 0 -1px var(--ro-red);*/
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
    border-left: 5px solid transparent;
    /*border-bottom: 1px solid #ccc;*/
}
  
.offcanvas .sidenavcontainer .sidenav ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;
}
 
 .offcanvas .sidenavcontainer .sidenav a:focus, 
 .offcanvas .sidenavcontainer .sidenav a:hover, 
 .offcanvas .sidenavcontainer .sidenav label:focus, 
 .offcanvas .sidenavcontainer .sidenav label:hover {
    color: var(--ro-dark);
    background: var(--ro-sidenav-label-hover);
    border-left: 5px solid var(--ro-border-red);
}
  
.offcanvas .sidenavcontainer .sidenav label { 
    cursor: pointer; 
}


/*   Styling first level lists items */
.offcanvas .sidenavcontainer .group-list a, 
.offcanvas .sidenavcontainer .group-list label {
    padding-left: 2rem;
    background: rgb(240, 240, 240);
    /*box-shadow: inset 0 -1px #373737;*/
}

.offcanvas .sidenavcontainer .group-list a:focus, 
.offcanvas .sidenavcontainer .group-list a:hover, 
.offcanvas .sidenavcontainer .group-list label:focus, 
.offcanvas .sidenavcontainer .group-list label:hover { 
    background: rgb(215, 215, 215); 
}
  
/* Styling second level list items */
  
.offcanvas .sidenavcontainer .sub-group-list a, 
.offcanvas .sidenavcontainer .sub-group-list label {
    padding-left: 3rem;
    background: rgb(225, 225, 225);;
    /*box-shadow: inset 0 -1px #474747;*/
}
  
.offcanvas .sidenavcontainer .sub-group-list a:focus, 
.offcanvas .sidenavcontainer .sub-group-list a:hover, 
.offcanvas .sidenavcontainer .sub-group-list label:focus, 
.offcanvas .sidenavcontainer .sub-group-list label:hover { 
    background: rgb(200, 200, 200); 
}
  
/* Styling third level list items */
.offcanvas .sidenavcontainer .sub-sub-group-list a, .offcanvas .sub-sub-group-list label {
    padding-left: 4rem;
    background: rgb(210, 210, 210);
    /*box-shadow: inset 0 -1px #575757;*/
}
  
.offcanvas .sidenavcontainer .sub-sub-group-list a:focus, 
.offcanvas .sidenavcontainer .sub-sub-group-list a:hover, 
.offcanvas .sidenavcontainer .sub-sub-group-list label:focus, 
.offcanvas .sidenavcontainer .sub-sub-group-list label:hover { 
    background: rgb(185, 185, 185); 
}
  
/* Hide nested lists */
.offcanvas .sidenavcontainer .group-list, .offcanvas .sub-group-list, .offcanvas .sub-sub-group-list {
    height: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height .5s ease-in-out;
    transition: max-height .5s ease-in-out;
  }
  
.offcanvas .nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
    max-height: 100%; 
}

/* Rotating chevron icon on toggle */
label > span {
    float: right;
    -webkit-transition: -webkit-transform .65s ease;
    transition: transform .65s ease;
}
  
.nav__list input[type=checkbox]:checked + label > span {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.break {
    clear: both;
  }


.sidebottomcontainer {
    position: absolute;
    display: flex;
    bottom: 0;
    left: 0;
    height: 80px;
    
    width: 100%;
    padding: 0;
}

.sidebottom-row {
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   margin: 0;
}

.sidebottom-con-item  {
    border: 1px solid rgb(230, 230, 230);
    position: relative;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.sidebottom-con-item a {
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgb(245, 245, 245);
    color: var(--ro-dark);
}
.sidebottom-con-item a:hover {
    background: rgb(230, 230, 230);

}



/*****************************************************/
/*                  FOOTER                           */
/*****************************************************/
.ro-footer {
    background: var(--ro-bg-dark);
    padding: 40px 0;
    font-size: 0.875rem;
    color: var(--ro-grey);
    float: none;
}

.ro-footer a {
    color: var(--ro-grey);
}

.ro-footer a:hover {
    color: var(--ro-red);
    font-weight: bold;
}

.ro-footer2 {
    margin: 40px 0 -10px 0;
    padding: 10px 0 0 0;
    border-top: 1px solid var(--ro-border-grey2);
}

a.ro-text-footer {
    font-size: 12pt;
}


/**************************************************************************************************/



/***************************************************************/
/*                   Buttons, Tabellen, Cards                  */
/***************************************************************/

/*****************************************************/
/*                  Accordion                        */
/*****************************************************/
.accordion-item:first-of-type {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item:last-of-type {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid var(--ro-border-grey);
}

.accordion-item:not(:first-of-type) {
    border-top: 1px solid var(--ro-border-grey);
}

.accordion-button:not(.collapsed) {
    color: var(--ro-dark);
    font-weight: bold;
    background-color: var(--ro-bg-acc-notcol);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e41821'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
}

.accordion-button:is(.collapsed) {
    background-color: var(--ro-bg-acc-col);
}

.accordion-button:hover {
    color: var(--ro-red);
}

.accordion-button:focus {
    border-color: var(--ro-border-grey);
    box-shadow: none;
}



/*  Accordion Ersatzteile */
.acc-ersatzteile {
    height: 80px;
}

.acc-btn-ersatzteile {
    padding-left: 0px;
    padding-right: 10px;
}

.accordion-ersatzteile-button:hover {
    color: var(--ro-dark);
}



/*****************************************************/
/*                    Button                         */
/*****************************************************/
.btn-img {
    width: auto;
    max-width: 25px;
}

.btn-rombi {
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey);
    border-color: var(--ro-border-grey);
}

.btn-rombi-internal {
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey2);
    border-color: var(--ro-border-grey);
    width: 100%;
    max-width: 230px;
    text-align: left;
}

.btn-rombi-internal-white {
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey);
    border-color: var(--ro-border-grey);
    width: 180px;
    text-align: center;
}

.btn-rombi-external { 
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey2);
    border-color: var(--ro-border-grey);
    width: 280px;
    text-align: left;
}

.btn-rombi-download {
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey);
    border-color: var(--ro-border-grey);
    width: 100%;
    max-width: 230px;
    text-align: left;
}

.btn-margin {
    margin-bottom: 5px;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-rombi-internal:hover,
.btn-rombi-external:hover,
.btn-rombi-download:hover,
.btn-rombi-download-full-max300:hover,
.btn-rombi:hover {
    color: var(--ro-white);
    background-color: var(--ro-bg-red);
    border-color: var(--ro-border-grey);
}

.btn-rombi-internal:active,
.btn-rombi-internal:focus,
.btn-rombi-external:active,
.btn-rombi-external:focus,
.btn-rombi-download:active,
.btn-rombi-downalod:focus,
.btn-rombi-download-full-max300:active,
.btn-rombi-download-full-max300:focus,
.btn-rombi:active,
.btn-rombi:focus {
    outline: none !important;
    box-shadow: none;
}

.btn-rombi-internal-white:hover {
    color: var(--ro-white);
    background-color: var(--ro-bg-darkgrey2);
    border-color: var(--ro-border-white);
}


/*****************************************************/
/*                    Card                           */
/*****************************************************/
.rombi-card {background: var(--ro-bg-lightgrey);}

.ro-card-body-text {
    height: 160px;
}

.ro-card-body-2 {
    height: 255px;
}

.ro-card-margin-bot {
    margin-bottom: 20px;
}

.ro-card-subtitle {
    font-size: 0.9rem;
}

@media ( min-width: 768px) {
    .ro-card-border-left {
        border-left: 1px solid rgba(0,0,0,.125);
    }
}

/*****************************************************/
/*                   Carousel                        */
/*****************************************************/
.zoom-in {cursor: zoom-in;}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e41821'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e41821'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.carousel-control-next, .carousel-control-prev {
    opacity: .6;
    margin-bottom: 30px;
}

.carousel-control-next:hove, .carousel-control-prev:hover {
    opacity: 1;
}


.carousel-item {
    margin-bottom: 30px;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--ro-bg-dark);
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: var(--ro-red);
    text-decoration: none;
    outline:0;
    opacity:.9;
}




/*****************************************************/
/*                   Flipbook                        */
/*****************************************************/

/*****************************************************/
/*                     Map                           */
/*****************************************************/
.ro-map {
    background-image: var(--url-ro-map);
    height: 350px;
    background-color: var(--ro-bg-white);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.ro-map-quelle {
    position: relative;
    top: 320px;
    background-color: var(--ro-bg-white);
    width: 170px;
}


/*****************************************************/
/*                     Modal                         */
/*****************************************************/
.ro-modal-dialog {
    max-width: 900px;    
}

.ro-modal {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

img.ro-modal-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 850px;
}

.modal-dialog{
    position: relative;
    display: table; /* This is important */ 
    overflow-y: auto;    
    overflow-x: auto;
    width: auto;
    min-width: 250px;   
}

.modal-header {
    border-bottom: 0px;
}

.ro-modal-content {
    cursor: default;
}

.ro-modal-vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}

.ro-modal-vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}

.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    max-width:inherit; /* For Bootstrap 4 - to avoid the modal window stretching 
    full width */
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events:all;
}


/*****************************************************/
/*            Tables für Briefkästen etc.            */
/*****************************************************/
table.kasten-table {
    background-color: var(--ro-bg-white);
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

table.kasten-table thead {
    background: var(--ro-table-bg-head);
    background: -moz-linear-gradient(top, #eeeeee 0%, #ebebeb 66%, #E9E9E9 100%);
    background: -webkit-linear-gradient(top, #eeeeee 0%, #ebebeb 66%, #E9E9E9 100%);
    background: linear-gradient(to bottom, #eeeeee 0%, #ebebeb 66%, #E9E9E9 100%);
    border-bottom: 2px solid var(--ro-border-midgrey);   /* #7B7B7B */
}

table.kasten-table thead th {
    font-size: 14px;
    font-weight: bold;
    color: var(--ro-dark);
}
table.kasten-table td, table.kasten-table th {
    border: 0px solid #E5E5E5;
    padding: 0px 2px;
}
table.kasten-table tbody td {
    font-size: 14px;
}
table.kasten-table tr:nth-child(even) {
    background-color: var(--ro-bg-lightgrey);     /* F3F3F3 */
}

.kasten-table-font-line2 {
    color: var(--ro-lightdark);
}

table.ral {
    width: 100%;
    border-spacing: 1px;
}
  
table.ral thead th {
    width: 9%;
    height: 40px;
    vertical-align: middle;
}
  
table.ral tbody td {
    width: 9%;
    padding: 0px 0px 6px 0px;
    text-align: center;
    font-size: 14pt;
    vertical-align: top;
}


/*****************************************************/
/*                      Tabs                         */
/*****************************************************/
.nav-tabs {
    border-bottom: 0px solid var(--ro-border-grey);
}

.nav-tabs li {
    margin-right: -1px;
}

.nav-item-50 {
    width: 50%;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--ro-dark);
    border-color: var(--ro-border-grey);
    background-color: var(--ro-bg-white);
    border-bottom: 1px solid var(--ro-border-dark);
    font-weight: bold;
}

.nav-tabs .nav-link {
    background-color: var(--ro-bg-tab-notactive);
    border: 1px solid var(--ro-border-grey);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 2px;
}

.nav-link {
    color: var(--ro-dark);
}

.nav-tabs .nav-link:hover {
    border-color: var(--ro-border-grey-hover);
    color: var(--ro-red);
    border-bottom: 1px solid var(--ro-border-dark);
}

.nav-tabs .nav-link.active:hover {
    border-color: var(--ro-border-grey);
    color: var(--ro-dark);
    background-color: var(--ro-bg-white);
    border-bottom: 1px solid var(--ro-border-dark);
}

/*****************************************************/
/*                 Tabs Content                      */
/*****************************************************/
.ro-tabs-content {
    padding-left: 20px;
    padding-right: 20px;
    color: var(--ro-dark);
}

.ro-tab-info-icon {
    font-size: 22px;
    color: var(--ro-bg-red);
}

.ro-tab-info-icon-small {
    font-size: 18px;
    color: var(--ro-bg-red);
}








/**************************************************************************************************/



/***************************************************************/
/*                         Content                             */
/***************************************************************/

ul.agb-square {
    list-style-type: square;
}

ol.agb-a {
    list-style-type: lower-alpha;
}


.ro-text-red {
    color: var(--ro-red);
}


.ro-content-start {
    padding: 35px 0 35px 0;
}

/*  Backgrounds  */
.ro-content-white {
    background-color: var(--ro-bg-white);
    color: var(--ro-dark);
    display: block;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
}

.ro-content-grey {
    background-color: var(--ro-bg-grey);
    color: var(--ro-white);
    display: block;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
}

.ro-content-lightgrey {
    background-color: var(--ro-bg-lightgrey);
    color: var(--ro-dark);
    display: block;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
}

.ro-content-darkgrey {
    background-color: var(--ro-bg-darkgrey);
    color: var(--ro-white);
    display: block;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
}

.ro-content-dark {
    background-color: var(--ro-bg-dark);
    color: var(--ro-white);
    display: block;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
}

.ro-content-1 {
    background-image: var(--url-front-01);
    background-size: cover;
    background-position: 20% 20%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding-top: 280px;
    padding-bottom: 250px;
}

#ro-front-content-1 {
    background-color: var(--ro-bg-white);
    opacity: 95%;
    color: var(--ro-dark);
    position: relative;
    margin-top: 150px;
    width: 420px;
}

/*
.ro-content-2 {
    background-image: url(/images/front/bk_front_1.jpg);
    background-size: cover;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 0px;
}

#ro-front-content-2 {
    background-color: var(--ro-bg-white);
    opacity: 60%;
    color: var(--ro-dark);
    position: relative;
    margin-top: 120px;
    margin-bottom: 120px;
    margin-left: 15%;
    width: 70%;
}
*/


/*  Border  */
.ro-bottom-border-red {
    border-bottom: var(--ro-border-red) solid 3px;
}

.ro-content-border-top-red {
    border-top: var(--ro-border-red) 6px solid;
}


/* Front Picture as Background */
.ro-bg-pic1 {
    background-image: var(--url-front-02);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding-top: 80px;
    padding-bottom: 80px;
}

/*  Text  */
.ro-text-white {
    color: var(--ro-white);
}

.ro-text-dark {
    color: var(--ro-dark);
}

.ro-text-dark2 {
    color: var(--ro-dark2);
}


/*  Links  */
.ro-content a.extern,
.ro-content a.extern:visited {
    color: var(--ro-link-extern);
    
}

.ro-content a.extern:hover {
    color: var(--ro-red);
    font-weight: bold;
    
}

.ro-content-section {
    padding: 0 0 0 0;
}

a.modal-internal {
    color: var(--ro-red);
    border-bottom: 0;
}

a.modal-internal:hover {
    color: var(--ro-red);
    border-bottom: 0;
}

a.icon {
    border-bottom: 0;
    color: transparent;
}

a.icon:hover {
    border-bottom: 0;
    color: transparent;
}



/*  Padding, Margin  */
.ro-content-padding-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ro-content-padding-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ro-text-vertical-center {
    margin-top: 0;
    margin-bottom: 0;
}


/*  Logo Express-Line  */
.express-line-logo {
    max-width: 100%;
    height: auto;
}



/*  Eloxal / Edelstahl  */
div.eloxal-va {
    width: 100%;
    border-spacing: 0px;
}

.eloxal-va-item {
    width: auto;
    min-width: 60px;
    max-width: 110px;
    vertical-align: middle;
    padding-left: 0;
    padding-right: 0;
    font-size: 10pt;
    text-align: center;
}

.eloxal-va-item-content {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2px;
}

.eloxal-va-item-content img {
    width: 90%;
}




/*  RAL-Palette  */
div.ral {
    width: 100%;
    border-spacing: 0px;
}

.ral-item {
    width: 9%;
    min-width: 60px;
    vertical-align: middle;
    padding-left: 0;
    padding-right: 0;
    font-size: 10pt;
    text-align: center;
}

.ral-item-content {
    display: block;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2px;
}

.ral-color {
    height: 40px;
}

/*  Standardfarben  */
.ral9016 {background: rgb(247, 251, 245);}      /* RAL 9016 */
.ral9006 {background: rgb(165, 168, 166);}      /* RAL 9006 */
.ral9007 {background: rgb(143, 143, 140);}      /* RAL 9007 */
 
.ral9016 a, .ral9006 a, .ral9007 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Sonderfarben */

/* Start - RAL Gruppe 1 */
.ral1000 {background: rgb(204, 197, 143);}      /* RAL 1000 */
.ral1001 {background: rgb(209, 188, 138);}      /* RAL 1001 */
.ral1002 {background: rgb(210, 183, 115);}      /* RAL 1002 */
.ral1003 {background: rgb(247, 186, 11);}       /* RAL 1003 */
.ral1004 {background: rgb(226, 176, 7);}        /* RAL 1004 */
.ral1005 {background: rgb(200, 159, 4);}        /* RAL 1005 */
.ral1006 {background: rgb(225, 161, 0);}        /* RAL 1006 */
.ral1007 {background: rgb(231, 156, 0);}        /* RAL 1007 */
.ral1011 {background: rgb(175, 138, 84);}       /* RAL 1011 */
.ral1012 {background: rgb(217, 192, 34);}       /* RAL 1012 */
.ral1013 {background: rgb(233, 229, 206);}      /* RAL 1013 */
.ral1014 {background: rgb(222, 208, 159);}      /* RAL 1014 */
.ral1015 {background: rgb(234, 222, 189);}      /* RAL 1015 */
.ral1016 {background: rgb(234, 240, 68);}       /* RAL 1016 */
.ral1017 {background: rgb(244, 183, 82);}       /* RAL 1017 */
.ral1018 {background: rgb(243, 224, 59);}       /* RAL 1018 */
.ral1019 {background: rgb(164, 149, 125);}      /* RAL 1019 */
.ral1020 {background: rgb(154, 148, 100);}      /* RAL 1020 */
.ral1021 {background: rgb(238, 201, 0);}        /* RAL 1021 */
.ral1023 {background: rgb(240, 202, 0);}        /* RAL 1023 */
.ral1024 {background: rgb(184, 156, 80);}       /* RAL 1024 */
.ral1027 {background: rgb(163, 140, 21);}       /* RAL 1027 */
.ral1028 {background: rgb(255, 171, 0);}        /* RAL 1028 */
.ral1032 {background: rgb(221, 178, 15);}       /* RAL 1032 */
.ral1033 {background: rgb(250, 171, 33);}       /* RAL 1033 */
.ral1034 {background: rgb(237, 171, 86);}       /* RAL 1034 */
.ral1037 {background: rgb(238, 162, 5);}        /* RAL 1037 */
  
.ral1000 a, .ral1001 a, .ral1002 a,
.ral1003 a, .ral1004 a, .ral1005 a,
.ral1006 a, .ral1007 a, .ral1011 a,
.ral1012 a, .ral1013 a, .ral1014 a,
.ral1015 a, .ral1016 a, .ral1017 a,
.ral1018 a, .ral1019 a, .ral1020 a,
.ral1021 a, .ral1023 a, .ral1024 a,
.ral1027 a, .ral1028 a, .ral1032 a, 
.ral1033 a, .ral1034 a, .ral1037 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 1 */
  
  
/* Start - RAL Gruppe 2 */
.ral2000 {background: rgb(221, 121, 7);}        /* RAL 2000 */
.ral2001 {background: rgb(190, 78, 36);}        /* RAL 2001 */
.ral2002 {background: rgb(198, 57, 39);}        /* RAL 2002 */
.ral2003 {background: rgb(250, 132, 43);}       /* RAL 2003 */
.ral2004 {background: rgb(231, 91, 18);}        /* RAL 2004 */
.ral2008 {background: rgb(243, 117, 44);}       /* RAL 2008 */
.ral2009 {background: rgb(225, 85, 1);}         /* RAL 2009 */
.ral2010 {background: rgb(212, 101, 47);}       /* RAL 2010 */
.ral2011 {background: rgb(236, 124, 37);}       /* RAL 2011 */
.ral2012 {background: rgb(219, 106, 80);}       /* RAL 2012 */
  
.ral2000 a, .ral2001 a, .ral2002 a,
.ral2003 a, .ral2004 a, .ral2008 a,
.ral2009 a, .ral2010 a, .ral2011 a,
.ral2012 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 2 */
  
/* Start - RAL Gruppe 3 */ 
.ral3000 {background: rgb(171, 37, 36);}        /* RAL 3000 */
.ral3001 {background: rgb(160, 33, 40);}        /* RAL 3001 */
.ral3002 {background: rgb(161, 35, 43);}        /* RAL 3002 */
.ral3003 {background: rgb(141, 29, 44);}        /* RAL 3003 */
.ral3004 {background: rgb(112, 31, 41);}        /* RAL 3004 */
.ral3005 {background: rgb(94, 32, 40);}         /* RAL 3005 */
.ral3007 {background: rgb(64, 34, 37);}         /* RAL 3007 */
.ral3009 {background: rgb(112, 55, 49);}        /* RAL 3009 */
.ral3011 {background: rgb(126, 41, 44);}        /* RAL 3011 */
.ral3012 {background: rgb(203, 141, 115);}      /* RAL 3012 */
.ral3013 {background: rgb(156, 50, 46);}        /* RAL 3013 */
.ral3014 {background: rgb(212, 116, 121);}      /* RAL 3014 */
.ral3015 {background: rgb(225, 166, 173);}      /* RAL 3015 */
.ral3016 {background: rgb(172, 64, 52);}        /* RAL 3016 */
.ral3017 {background: rgb(211, 84, 95);}        /* RAL 3017 */
.ral3018 {background: rgb(209, 65, 82);}        /* RAL 3018 */
.ral3020 {background: rgb(193, 18, 28);}        /* RAL 3020 */
.ral3022 {background: rgb(213, 109, 86);}       /* RAL 3022 */
.ral3027 {background: rgb(180, 32, 65);}        /* RAL 3027 */
.ral3028 {background: rgb(204, 44, 36);}        /* RAL 3028 */
.ral3031 {background: rgb(172, 50, 59);}        /* RAL 3031 */
    
.ral3000 a, .ral3001 a, .ral3002 a,
.ral3003 a, .ral3004 a, .ral3005 a,
.ral3007 a, .ral3009 a, .ral3011 a,
.ral3012 a, .ral3013 a, .ral3014 a,
.ral3015 a, .ral3016 a, .ral3017 a,
.ral3018 a, .ral3020 a, .ral3022 a,
.ral3027 a, .ral3028 a, .ral3031 a  {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 3 */
  
/* Start - RAL Gruppe 4 */ 
.ral4001 {background: rgb(138, 90, 131);}       /* RAL 4001 */
.ral4002 {background: rgb(147, 61, 80);}        /* RAL 4002 */
.ral4003 {background: rgb(209, 91, 143);}       /* RAL 4003 */
.ral4004 {background: rgb(105, 22, 57);}        /* RAL 4004 */
.ral4005 {background: rgb(131, 99, 157);}       /* RAL 4005 */
.ral4006 {background: rgb(153, 37, 114);}       /* RAL 4006 */
.ral4007 {background: rgb(74, 32, 59);}         /* RAL 4007 */
.ral4008 {background: rgb(144, 70, 132);}       /* RAL 4008 */
.ral4009 {background: rgb(163, 137, 149);}      /* RAL 4009 */
.ral4010 {background: rgb(198, 54, 120);}       /* RAL 4010 */
  
.ral4001 a, .ral4002 a, .ral4003 a,
.ral4004 a, .ral4005 a, .ral4006 a,
.ral4007 a, .ral4008 a, .ral4009 a, .ral4010 a  {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 4 */
  
/* Start - RAL Gruppe 5 */ 
.ral5000 {background: rgb(56, 76, 112);}        /* RAL 5000 */
.ral5001 {background: rgb(31, 71, 100);}        /* RAL 5001 */
.ral5002 {background: rgb(0, 5, 74);}           /* RAL 5002 */
.ral5003 {background: rgb(42, 55, 86);}         /* RAL 5003 */
.ral5004 {background: rgb(29, 31, 42);}         /* RAL 5004 */
.ral5005 {background: rgb(21, 72, 137);}        /* RAL 5005 */
.ral5007 {background: rgb(65, 103, 141);}       /* RAL 5007 */
.ral5008 {background: rgb(49, 60, 72);}         /* RAL 5008 */
.ral5009 {background: rgb(46, 89, 120);}        /* RAL 5009 */
.ral5010 {background: rgb(19, 68, 124);}        /* RAL 5010 */
.ral5011 {background: rgb(35, 44, 63);}         /* RAL 5011 */
.ral5012 {background: rgb(52, 129, 184);}       /* RAL 5012 */
.ral5013 {background: rgb(35, 45, 83);}         /* RAL 5013 */
.ral5014 {background: rgb(108, 124, 152);}      /* RAL 5014 */
.ral5015 {background: rgb(40, 116, 178);}       /* RAL 5015 */
.ral5017 {background: rgb(14, 81, 141);}        /* RAL 5017 */
.ral5018 {background: rgb(33, 136, 143);}       /* RAL 5018 */
.ral5019 {background: rgb(26, 87, 132);}        /* RAL 5019 */
.ral5020 {background: rgb(11, 65, 81);}         /* RAL 5020 */
.ral5021 {background: rgb(7, 115, 122);}        /* RAL 5021 */
.ral5022 {background: rgb(47, 42, 90);}         /* RAL 5022 */
.ral5023 {background: rgb(77, 102, 142);}       /* RAL 5023 */
.ral5024 {background: rgb(106, 147, 176);}      /* RAL 5024 */
  
.ral5000 a, .ral5001 a, .ral5002 a,
.ral5003 a, .ral5004 a, .ral5005 a,
.ral5007 a, .ral5008 a, .ral5009 a,
.ral5010 a, .ral5011 a, .ral5012 a,
.ral5013 a, .ral5014 a, .ral5015 a,
.ral5017 a, .ral5018 a, .ral5019 a,
.ral5020 a, .ral5021 a, .ral5022 a,
.ral5023 a, .ral5024 a  {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 5 */
  
/* Start - RAL Gruppe 6 */ 
.ral6000 {background: rgb(50, 118, 98);}        /* RAL 6000 */
.ral6001 {background: rgb(40, 113, 62);}        /* RAL 6001 */
.ral6002 {background: rgb(39, 98, 53);}         /* RAL 6002 */
.ral6003 {background: rgb(75, 87, 62);}         /* RAL 6003 */
.ral6004 {background: rgb(14, 66, 67);}         /* RAL 6004 */
.ral6005 {background: rgb(15, 67, 54);}         /* RAL 6005 */
.ral6006 {background: rgb(64, 67, 59);}         /* RAL 6006 */
.ral6007 {background: rgb(40, 52, 36);}         /* RAL 6007 */
.ral6008 {background: rgb(53, 56, 46);}         /* RAL 6008 */
.ral6009 {background: rgb(38, 57, 47);}         /* RAL 6009 */
.ral6010 {background: rgb(62, 117, 59);}        /* RAL 6010 */
.ral6011 {background: rgb(102, 130, 91);}       /* RAL 6011 */
.ral6012 {background: rgb(49, 64, 61);}         /* RAL 6012 */
.ral6013 {background: rgb(121, 124, 90);}       /* RAL 6013 */
.ral6014 {background: rgb(68, 67, 55);}         /* RAL 6014 */
.ral6015 {background: rgb(61, 64, 58);}         /* RAL 6015 */
.ral6016 {background: rgb(2, 106, 82);}         /* RAL 6016 */
.ral6017 {background: rgb(70, 134, 65);}        /* RAL 6017 */
.ral6018 {background: rgb(72, 164, 63);}        /* RAL 6018 */
.ral6019 {background: rgb(183, 217, 177);}      /* RAL 6019 */
.ral6020 {background: rgb(53, 71, 51);}         /* RAL 6020 */
.ral6021 {background: rgb(134, 164, 124);}      /* RAL 6021 */
.ral6022 {background: rgb(62, 60, 50);}         /* RAL 6022 */
.ral6024 {background: rgb(0, 135, 84);}         /* RAL 6024 */
.ral6025 {background: rgb(83, 117, 60);}        /* RAL 6025 */
.ral6026 {background: rgb(0, 93, 82);}          /* RAL 9026 */
.ral6027 {background: rgb(129, 192, 187);}      /* RAL 6027 */
.ral6028 {background: rgb(45, 85, 70);}         /* RAL 6028 */
.ral6029 {background: rgb(0, 114, 67);}         /* RAL 6029 */
.ral6032 {background: rgb(15, 133, 88);}        /* RAL 6032 */
.ral6033 {background: rgb(71, 138, 132);}       /* RAL 6033 */
.ral6034 {background: rgb(127, 176, 178);}      /* RAL 6034 */
.ral6037 {background: rgb(0, 139, 41);}         /* RAL 6037 */
  
.ral6000 a, .ral6001 a, .ral6002 a,
.ral6003 a, .ral6004 a, .ral6005 a,
.ral6006 a, .ral6007 a, .ral6008 a,
.ral6009 a, .ral6010 a, .ral6011 a,
.ral6012 a, .ral6013 a, .ral6014 a,
.ral6015 a, .ral6016 a, .ral6017 a,
.ral6018 a, .ral6019 a, .ral6020 a,
.ral6021 a, .ral6022 a, .ral6024 a,
.ral6025 a, .ral6026 a, .ral6027 a,
.ral6028 a, .ral6029 a, .ral6032 a,
.ral6033 a, .ral6034 a, .ral6037 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 6 */
  
/* Start - RAL Gruppe 7 */ 
.ral7000 {background: rgb(126, 139, 146);}      /* RAL 7000 */
.ral7001 {background: rgb(143, 153, 159);}      /* RAL 7001 */
.ral7002 {background: rgb(129, 127, 104);}      /* RAL 7002 */
.ral7003 {background: rgb(122, 123, 109);}      /* RAL 7003 */
.ral7004 {background: rgb(159, 160, 161);}      /* RAL 7004 */
.ral7005 {background: rgb(107, 113, 111);}      /* RAL 7005 */
.ral7006 {background: rgb(117, 111, 97);}       /* RAL 7006 */
.ral7008 {background: rgb(116, 102, 67);}       /* RAL 7008 */
.ral7009 {background: rgb(91, 98, 89);}         /* RAL 7009 */
.ral7010 {background: rgb(87, 93, 87);}         /* RAL 7010 */
.ral7011 {background: rgb(85, 93, 97);}         /* RAL 7011 */
.ral7012 {background: rgb(89, 97, 99);}         /* RAL 7012 */
.ral7013 {background: rgb(85, 85, 72);}         /* RAL 7013 */
.ral7015 {background: rgb(81, 86, 92);}         /* RAL 7015 */
.ral7016 {background: rgb(55, 63, 67);}         /* RAL 7016 */
.ral7021 {background: rgb(46, 50, 52);}         /* RAL 7021 */
.ral7022 {background: rgb(75, 77, 70);}         /* RAL 7022 */
.ral7023 {background: rgb(129, 132, 121);}      /* RAL 7023 */
.ral7024 {background: rgb(71, 74, 80);}         /* RAL 7024 */
.ral7026 {background: rgb(55, 68, 71);}         /* RAL 7026 */
.ral7030 {background: rgb(147, 147, 136);}      /* RAL 7030 */
.ral7031 {background: rgb(93, 105, 112);}       /* RAL 7031 */
.ral7032 {background: rgb(185, 185, 168);}      /* RAL 7032 */
.ral7033 {background: rgb(129, 137, 121);}      /* RAL 7033 */
.ral7034 {background: rgb(147, 145, 118);}      /* RAL 7034 */
.ral7035 {background: rgb(203, 208, 204);}      /* RAL 7035 */
.ral7036 {background: rgb(154, 150, 151);}      /* RAL 7036 */
.ral7037 {background: rgb(124, 127, 126);}      /* RAL 7037 */
.ral7038 {background: rgb(180, 184, 176);}      /* RAL 7038 */
.ral7039 {background: rgb(107, 105, 95);}       /* RAL 7039 */
.ral7040 {background: rgb(157, 163, 166);}      /* RAL 7040 */
.ral7042 {background: rgb(143, 150, 149);}      /* RAL 7042 */
.ral7043 {background: rgb(78, 84, 81);}         /* RAL 7043 */
.ral7044 {background: rgb(189, 189, 178);}      /* RAL 7044 */
.ral7045 {background: rgb(145, 150, 154);}      /* RAL 7045 */
.ral7046 {background: rgb(130, 137, 142);}      /* RAL 7046 */
.ral7047 {background: rgb(207, 208, 207);}      /* RAL 7047 */
    
.ral7000 a, .ral7001 a, .ral7002 a, .ral7003 a,
.ral7004 a, .ral7005 a, .ral7006 a, .ral7008 a,
.ral7009 a, .ral7010 a, .ral7011 a, .ral7012 a,
.ral7013 a, .ral7015 a, .ral7016 a, .ral7021 a,
.ral7022 a, .ral7023 a, .ral7024 a, .ral7026 a,
.ral7030 a, .ral7031 a, .ral7032 a, .ral7033 a,
.ral7034 a, .ral7035 a, .ral7036 a, .ral7037 a,
.ral7038 a, .ral7039 a, .ral7040 a, .ral7042 a,
.ral7043 a, .ral7044 a, .ral7045 a, .ral7046 a,
.ral7047 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 7 */
  
/* Start - RAL Gruppe 8 */ 
.ral8000 {background: rgb(136, 113, 66);}       /* RAL 8000 */
.ral8001 {background: rgb(156, 107, 48);}       /* RAL 8001 */
.ral8002 {background: rgb(123, 81, 65);}        /* RAL 8002 */
.ral8003 {background: rgb(128, 84, 47);}        /* RAL 8003 */
.ral8004 {background: rgb(143, 78, 53);}        /* RAL 8004 */
.ral8007 {background: rgb(111, 74, 47);}        /* RAL 8007 */
.ral8008 {background: rgb(111, 79, 40);}        /* RAL 8008 */
.ral8011 {background: rgb(90, 58, 41);}         /* RAL 8011 */
.ral8012 {background: rgb(103, 56, 49);}        /* RAL 8012 */
.ral8014 {background: rgb(73, 57, 45);}         /* RAL 8014 */
.ral8015 {background: rgb(99, 58, 52);}         /* RAL 8015 */
.ral8016 {background: rgb(76, 47, 38);}         /* RAL 8016 */
.ral8017 {background: rgb(68, 50, 45);}         /* RAL 8017 */
.ral8019 {background: rgb(63, 58, 58);}         /* RAL 8019 */
.ral8022 {background: rgb(33, 31, 32);}         /* RAL 8022 */
.ral8023 {background: rgb(166, 94, 47);}        /* RAL 8023 */
.ral8024 {background: rgb(121, 85, 60);}        /* RAL 8024 */
.ral8025 {background: rgb(117, 92, 73);}        /* RAL 8025 */
.ral8028 {background: rgb(78, 59, 43);}         /* RAL 8028 */
  
.ral8000 a, .ral8001 a, .ral8002 a,
.ral8003 a, .ral8004 a, .ral8007 a,
.ral8008 a, .ral8011 a, .ral8012 a,
.ral8014 a, .ral8015 a, .ral8016 a,
.ral8017 a, .ral8019 a, .ral8022 a,
.ral8023 a, .ral8024 a, .ral8025 a,
.ral8028 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 8 */
  
/* Start - RAL Gruppe 9 */ 
.ral9001 {background: rgb(239, 235, 220);}      /* RAL 9001 */
.ral9002 {background: rgb(221, 222, 212);}      /* RAL 9002 */
.ral9003 {background: rgb(244, 248, 244);}      /* RAL 9003 */
.ral9004 {background: rgb(46, 48, 50);}         /* RAL 9004 */
.ral9005 {background: rgb(10, 10, 13);}         /* RAL 9005 */
.ral9010 {background: rgb(247, 249, 239);}      /* RAL 9010 */
.ral9011 {background: rgb(41, 44, 47);}         /* RAL 9011 */
.ral9017 {background: rgb(42, 45, 47);}         /* RAL 9017 */
.ral9018 {background: rgb(207, 211, 205);}      /* RAL 9018 */
    
.ral9001 a, .ral9002 a, .ral9003 a,
.ral9004 a, .ral9005 a, .ral9010 a, 
.ral9011 a, .ral9017 a, .ral9018 a {
    display: block;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
/* Ende - RAL Gruppe 9 */
  
/* ENDE */


/*  Folien - Renolit, Cova, Hornschuch/skai  */
div.folien {
    width: 100%;
    border-spacing: 0px;
}

.folien-item {
    font-size: 10pt;
    margin-bottom: 5px;
}

.folien-item-content {
    display: block;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2px;
    text-align: left;
}

.folien-item-content img {
    width: 90%;
    min-width: 100px;
    max-width: 200px;
    height: 140px;
}

.folien-alert-icon {
    font-size: 12px;
    color: var(--ro-dark);
}


/**************************************************************************************************/


/***************************************************************/
/*                           Special                           */
/***************************************************************/

/*****************************************************/
/*          Express-Line Portfolio                   */
/*****************************************************/

.expressline-portfolio input[type="radio"] {
    display:none;
}

.expressline-portfolio label {
    width:210px;
    max-width: 30%;
    float:left;
    text-align:center;
    background: var(--ro-bg-portfolio-notactive);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
}


/*.expressline-portfolio input[type="radio"][id="blue"]:checked + label {
    background:#6666ff;
}*/

/*.expressline-portfolio input[type="radio"][id="blue"]:checked ~ .rahmen, input[type="radio"][id="blue"]:checked ~ .rahmenlos {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}*/

.expressline-portfolio input[type="radio"][id="reset"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.expressline-portfolio input[type="radio"][id="mitrahmen"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.expressline-portfolio input[type="radio"][id="mitrahmen"]:checked ~ .rahmenlos {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.expressline-portfolio input[type="radio"][id="rahmenlos"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.expressline-portfolio input[type="radio"][id="rahmenlos"]:checked ~ .mitrahmen {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.expressline-portfolio .tile {
    width:200px;
    max-width: 80%;
    height:380px;
    float: left;
    transition: all .4s ease-in-out;
    margin:0.5%;
    padding:0.5%;
}
/*.expressline-portfolio .rahmenlos {
    background:#66dd99;
}*/

/*.expressline-portfolio .blue {
    background:#6666ff;
}*/

/*.expressline-portfolio .red {
    background:#ff4466;
}*/

.expressline-images {
      text-align: center;
      position: relative;
}
  
.expressline-images img {
    height: 275px;
    border: var(--ro-border-grey) .5px solid;
}

.expressline-image-footer {
      text-align: center;
      height: 80px;
      margin-top: 10px;
      padding-top: 2px;
      background: var(--ro-bg-lightgrey);
}

.expressline-image-title {
    letter-spacing: 0.3em;
}


/*****************************************************/
/*          HTF Portfolio                   */
/*****************************************************/

.htf-portfolio input[type="radio"] {
    display:none;
}

.htf-portfolio label {
    width:210px;
    max-width: 30%;
    float:left;
    text-align:center;
    background: var(--ro-bg-portfolio-notactive);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    color:#222222;
    padding:0.5%;
    margin:0.5%;
    margin-bottom:30px;
    cursor:pointer;
}

.htf-portfolio input[type="radio"][id="reset"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.htf-portfolio input[type="radio"][id="mitrahmen"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.htf-portfolio input[type="radio"][id="mitsteine"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.htf-portfolio input[type="radio"][id="mitrahmen"]:checked ~ .rahmenlos {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.htf-portfolio input[type="radio"][id="mitsteine"]:checked ~ .ohnesteine {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.htf-portfolio input[type="radio"][id="rahmenlos"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.htf-portfolio input[type="radio"][id="ohnesteine"]:checked + label {
    background: var(--ro-bg-portfolio-active);
}

.htf-portfolio input[type="radio"][id="rahmenlos"]:checked ~ .mitrahmen {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.htf-portfolio input[type="radio"][id="ohnesteine"]:checked ~ .mitsteine {
    width:0;
    height:0;
    padding:0;
    margin:0;
    opacity:0;
}

.htf-portfolio .tile {
    width:200px;
    max-width: 80%;
    height:380px;
    float: left;
    transition: all .4s ease-in-out;
    margin:0.5%;
    padding:0.5%;
}

.htf-portfolio .tile-h4 {
    width:200px;
    max-width: 80%;
    height:430px;
    float: left;
    transition: all .4s ease-in-out;
    margin:0.5%;
    padding:0.5%;
}

.htf-images {
      text-align: center;
      position: relative;
}
  
.htf-images img {
    height: 275px;
    border: var(--ro-border-grey) .5px solid;
}

/* Kasten für 3 Zeilen*/
.htf-image-footer {
      text-align: center;
      height: 80px;
      margin-top: 10px;
      padding-top: 2px;
      background: var(--ro-bg-lightgrey);
}
/* Kasten für 4 Zeilen */
.htf-image-footer-h4 {
    text-align: center;
    height: 130px;
    margin-top: 10px;
    padding-top: 2px;
    background: var(--ro-bg-lightgrey);
}

/*Kasten für 5 Zeilen*/
.htf-image-footer-h5 {
    text-align: center;
    height: 80px;
    margin-top: 10px;
    padding-top: 2px;
    background: var(--ro-bg-lightgrey);
}

.htf-image-title {
    letter-spacing: 0.3em;
}


/*****************************************************/
/*           Back to Back Button                     */
/*****************************************************/
#backbutton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--ro-bg-red); /* Set a background color */
    color: var(--ro-white); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px 18px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 22px; /* Increase font size */
  }
  
  #backbutton:hover {
    background-color: var(--ro-bg-darkergrey); /* Add a dark-grey background on hover */
  }

  #backbutton:focus,
  #backbutton:active {      
    background-color: var(--ro-bg-red); /* Add a dark-grey background on hover */
  }