/* Fähnchen */
@media (max-width: 1199px){
  .flag-ci{
    display: none;
  }
}
@media (min-width: 1200px){
  .flag-ci{
    position: relative;
    left: 1000px;
    z-index: 5;
    width: 132px;
    height: 161px;
  }
}
@media (min-width: 1400px){
  .flag-ci{
    position: relative;
    left: 1180px;
    z-index: 5;
    width: 132px;
    height: 161px;
  }
}
.bs5 hr { opacity: 1;}
.text-middle { margin-top:auto; margin-bottom: auto;}
body.cl-toxid_curl .bs5 .column-container-left img, body.cl-toxid_curl .column-container-right img {
  width: auto;
}
.bs5 .inlineBox { padding: 2 2 2 2; }
.flag.flag-ci.flag-ci-orange{
  background-image: url("//www.rehm-verlag.de/__STATIC__/themen/rehm-eline/rehm-eline-q4-2022/self/hjr-website-fahne-blanko_1669907109000.png");
  color: #fff;
}

.flag.flag-ci.flag-ci-orange > p{ color: #fff; }

.flag.flag-ci p{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 140px;
  font-size: 20px;
  line-height: 24px;
  font-family: "Source Serif Pro", "Times New Roman", serif;
}

.bs5 .inlineBox { padding: 2 2 2 2; }
.flag.flag-ci.flag-ci-blue-smart{
  background-image: url("//www.rehm-verlag.de/__STATIC__/self/hjr-website-fahne-blue_smart.png");
  color: #fff;
}

.flag.flag-ci.flag-ci-blue-smart > p{ color: #fff; }

.flag.flag-ci p{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 140px;
  font-size: 20px;
  line-height: 24px;
  font-family: "Source Serif Pro", "Times New Roman", serif;
}

.flag.flag-ci.flag-ci-obv{ margin-top:2px; }

/* Hintergrundbilder */
.bg-image {
  position: relative;
}
.bg-image > .bg-image-container-mobile, .bg-image > .bg-image-container-desktop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
}
.teaser > .bg-image > .bg-image-container-desktop {
  left:-100px !important;
}

.teaser.rounded-ci.bg-image > .bg-image-container-desktop {
  border-radius: 0 0 400px/200px 0;
}
.bg-image .inlineBox {
  position: relative;
} 
.sxBlogPagination{ text-align: center; }
img.img-roudned-ci, .img-roudned-ci img {
  border-radius: 0 0 100px;
  max-width: 100%;
} 


.produkttip .info .price, .produkttip .info .priceInfo{display:none}
.produkttip .image{
  margin-bottom: 10px;
}
.produkttip .image img{
  max-width: 100%;
  max-height: 189px;
}
.produkttip h4{
  margin: 13px auto;
}
.produkttip .desc{
  margin-bottom: 20px;
}

/* Modul-Navi */
.nav-ci .navbar{
  padding-top: 0;
  border: 0;
}
.nav-ci .navbar .navbar-wrapper{
  padding: 0;
}
.nav-ci .navbar-nav{
  border-bottom-left-radius: 40px;
  margin-right: 0;
}
.nav-ci .navbar-nav | li {
  padding: 2px 10px 6px 0; 
}
.nav-ci .navbar-nav > li:first-child {
  padding-left: 24px;
}
.nav-ci .navbar-nav > li > a.nav-link{
  color: #090D0D;
  font-size: 20px;
  font-weight: 400;
}
.nav-ci .navbar-nav > li a.nav-link > i.fas {
  padding-left: 10px;
  padding-right: 10px;
}
.nav-ci .navbar-nav > li a.nav-link:hover > i.fas {
  padding-left: 20px;
  padding-right:0px;
}
.nav-ci.nav-ci-fond-beige .navbar-nav{
  background-color: #EAE3D5;
}
.nav-ci.nav-ci-typo-beige .navbar-nav{
  background-color: var(--hjr-typo-beige);
}

/* Modul-Sub-Navi-Startseite 2025 */
/* Allgemeine Stile für die Navigationsleiste */
.nav-ci-custom .navbar {
  padding-top: 0;       /* Entfernt zusätzlichen oberen Abstand */
  padding-left: 0;      /* Kein Abstand links – Navbar ist ganz am linken Rand */
  border: 0;           /* Entfernt den Rahmen */
  margin-left: 0;       /* Sicherstellen, dass kein äußerer linker Abstand vorhanden ist */
}

/* Entfernt das Padding des Navbar-Wrappers */
.nav-ci-custom .navbar .navbar-wrapper {
  padding: 0;
}

/* Anpassung der Navigationsleiste */
/* Flexbox sorgt dafür, dass die Elemente immer links ausgerichtet sind */
.nav-ci-custom .navbar-nav {
  border-bottom-right-radius: 40px; /* Abrundung der rechten unteren Ecke */
  margin-left: 0;                   /* Kein zusätzlicher Abstand links */
  display: flex;                    /* Nutzt Flexbox zur Ausrichtung der Listenelemente */
  justify-content: flex-start;      /* Richtet alle Elemente am linken Rand aus */
}

/* Stile für Listenelemente innerhalb der Navigation */
.nav-ci-custom .navbar-nav > li {
  padding: 2px 20px 6px 0; /* Sorgt für ein ausgewogenes Innenlayout */
}

/* Spezielle Anpassung für das erste Listenelement */
/* Entfernt den linken Padding, damit das erste Element direkt am linken Rand beginnt */
.nav-ci-custom .navbar-nav > li:first-child {
  padding-left: 0;
}

/* Styling für die Navigationslinks */
.nav-ci-custom .navbar-nav > li > a.nav-link {
  color: #090D0D;                     /* Standard-Textfarbe */
  font-size: 20px;                    /* Gut lesbare Schriftgröße */
  font-weight: 400;                   /* Mittlere Schriftstärke */
  text-decoration: none;              /* Entfernt Unterstreichungen */
  transition: color 0.3s ease-in-out;   /* Weicher Übergang bei Farbänderungen */
}

/* Styling für das Icon, das das fa-angle-right Symbol aus Font Awesome darstellt */
.nav-ci-custom .navbar-nav > li a.nav-link > i.fas {
  padding-left: 10px; /* Abstand links vom Icon */
  padding-right: 10px;/* Abstand rechts vom Icon */
}

/* Hover-Effekt für das Icon */
/* Verändert den Abstand beim Hover für einen dynamischen Effekt */
.nav-ci-custom .navbar-nav > li a.nav-link:hover > i.fas {
  padding-left: 20px; /* Erhöhter Abstand beim Hover */
  padding-right: 0;   /* Reduzierter rechter Abstand beim Hover */
}

/* Hover-Effekt für Links */
/* Ändert die Textfarbe beim Überfahren mit der Maus */
.nav-ci-custom .navbar-nav > li a.nav-link:hover {
  color: #EC6608; /* Wechselt beim Hover zu Orange */
}

/* Hintergrundfarben für spezielle Navigationstypen */
.nav-ci-custom.nav-ci-fond-beige .navbar-nav {
  background-color: #EAE3D5; /* Beiger Hintergrund für diese Variante */
}

.nav-ci-custom.nav-ci-typo-beige .navbar-nav {
  background-color: var(--hjr-typo-beige); /* Dynamische Hintergrundfarbe */
}


/* accordion */

.accordion .accordion-item { 
  border-width: 0 0 2px 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
}
.accordion .accordion-button{ font-size:inherit }

/* box */
.border-box-ci .container {
  border: 2px solid #d3d3d3;
  border-radius: 0 0 100px;
  padding: 10px;
}

.border-box-ci-lexlohn-1 .container {
  border: none;
  border-radius: 0 0 0px;
  padding: 30px;
  background-color: #33404b;

}

.border-box-ci-lexlohn .container {
  border: none;
  border-radius: 0 0 100px;
  padding: 30px;
  background-color: #33404b;

}

.border-box-ci-smart-assist .container {
  border: none;
  border-radius: 0 0 100px;
  padding: 30px;
  background-color: #009EE3;

}


.border-box-ci-campus .container {
  border: none;
  border-radius: 0 0 100px;
  padding: 30px;
  background-color: #BFCDC3;

}

/* grid */
:root{
  --hjr-space-width: 1rem;
  --hjr-space-w0: 0;
  --hjr-space-w1: var(--hjr-space-width);
  --hjr-space-w2: calc(var(--hjr-space-width) * 2);
  --hjr-space-w3: calc(var(--hjr-space-width) * 3);
  --hjr-space-w4: calc(var(--hjr-space-width) * 4);
  --hjr-space-w5: calc(var(--hjr-space-width) * 5);
  --hjr-space-w6: calc(var(--hjr-space-width) * 6);
  --hjr-space-w7: calc(var(--hjr-space-width) * 7);
  --hjr-space-w8: calc(var(--hjr-space-width) * 8);

  --bs-body-font-size: 17px;

}
@media (min-width: 992px) {
.col-space-x0 .col-first { padding-right: var(--hjr-space-w0); }
.col-space-x0 .col-between { padding-right: var(--hjr-space-w0); padding-left: var(--hjr-space-w0); }
.col-space-x0 .col-last { padding-left: var(--hjr-space-w0); }
.col-space-x1 .col-first { padding-right: var(--hjr-space-w1); }
.col-space-x1 .col-between { padding-right: calc(var(--hjr-space-w1)/2); padding-left: calc(var(--hjr-space-w4)/1); }
.col-space-x1 .col-last { padding-left: var(--hjr-space-w1); }
.col-space-x2 .col-first { padding-right: var(--hjr-space-w2); }
.col-space-x2 .col-between { padding-right: calc(var(--hjr-space-w2)/2); padding-left: calc(var(--hjr-space-w2)/2); }
.col-space-x2 .col-last { padding-left: var(--hjr-space-w3); }
.col-space-x3 .col-first { padding-right: var(--hjr-space-w3); }
.col-space-x3 .col-between { padding-right: calc(var(--hjr-space-w3)/2); padding-left: calc(var(--hjr-space-w3)/2); }
.col-space-x3 .col-last { padding-left: var(--hjr-space-w3); }
.col-space-x4 .col-first { padding-right: var(--hjr-space-w4); }
.col-space-x4 .col-between { padding-right: calc(var(--hjr-space-w4)/2); padding-left: calc(var(--hjr-space-w4)/2); }
.col-space-x4 .col-last { padding-left: var(--hjr-space-w4); }
.col-space-x5 .col-first { padding-right: var(--hjr-space-w5); }
.col-space-x5 .col-between { padding-right: calc(var(--hjr-space-w5)/2); padding-left: calc(var(--hjr-space-w5)/2); }
.col-space-x5 .col-last { padding-left: var(--hjr-space-w5); }
.col-space-x6 .col-first { padding-right: var(--hjr-space-w6); }
.col-space-x6 .col-between { padding-right: calc(var(--hjr-space-w6)/2); padding-left: calc(var(--hjr-space-w6)/2); }
.col-space-x6 .col-last { padding-left: var(--hjr-space-w6); }
}

/* stopper */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .bs5 .border-box-ci.stopper-p6 div.container {
    padding-left: 100px;
    padding-right: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .bs5 .border-box-ci.stopper-p6 div.container {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .bs5 .border-box-ci.stopper-p6 div.container {
    padding-left: 10px;
    padding-right: 10px;
  }
  .bs5 .border-box-ci.stopper { display: none; }
}
@media only screen and (max-width: 575px) {
  .bs5 .border-box-ci.stopper-p6 div.container {
    padding-left: 3px;
    padding-right: 3px;
  }
  .bs5 .border-box-ci.stopper { display: none; }
}

/* boxen */
.bs5 .container.hintergrund-helllachs .container,
.bs5 .container.hintergrund-fond-beige .container
    { padding:20px 10px 14px 10px;}
@media (min-width: 768px){
  .bs5 .container.hintergrund-helllachs, .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige, .bs5 .container.hintergrund-fond-beige .container
    { width: 720px; }
  .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige .container
    { width: 692px; padding:20px 10px 14px 10px;}
}
@media (min-width: 992px){
  .bs5 .container.hintergrund-helllachs, .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige, .bs5 .container.hintergrund-fond-beige .container
    { width: 970px; }
  .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige .container
    { width: 933px; padding:20px 10px 14px 10px;}
}
@media (min-width: 1200px){
  .bs5 .container.hintergrund-helllachs, .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige, .bs5 .container.hintergrund-fond-beige .container
    { width: 1140px; }
  .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige .container
    { width: 1110px; padding:20px 15px 14px 15px; }
}
@media (min-width: 1400px){
  .bs5 .container.hintergrund-helllachs, .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige, .bs5 .container.hintergrund-fond-beige .container
    { width: 1290px; }
  .bs5 .container.hintergrund-helllachs .container,
  .bs5 .container.hintergrund-fond-beige .container
    { width: 1260px; padding:20px 15px 14px 15px; }
}

/* video startseite */

.border-video-ci.container img{
  border: 0,1 px solid #090D0D;
  border-radius: 0px 0px 100px 0px;
}