.contact-icon {
    text-align: center;
    margin-bottom: 15px;
  color: #ec620a;
}

.contact-icon::before {
    content: "\f086";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 42px;
}

#mod-custom110 {
    background-position: center 100%;
}

/* Smartphones */
@media (max-width: 767px) {
   .container-banner .banner-overlay {
    height: 55vh
}
}

/* Kacheln im oberen Bereich beim Scrollen einblenden */
/* Umgestellt von animation-timeline: view() auf IntersectionObserver + Transition,
   da die scroll-gebundene Animation auf Windows/Chrome beim Scrollen mit
   Multi-Finger-Touchpad-Gesten zu hängendem Scrollen führen kann. */
.container-top-a .mod-articles-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.container-top-a .mod-articles-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Beiträge beim Scrollen einblenden */
.com-content-category-blog__item.blog-item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.com-content-category-blog__item.blog-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.grid-child.container-nav{
    position: relative;
    padding-top: 1%;
    border-bottom: 1px solid #e5e5e5;
}

.com-content-article.item-page {
    margin-top: 2%;
}

.com-content-category-blog__item.blog-item{
    position: relative;
    padding-top: 6%;
    border-top: 1px solid #e5e5e5;
}

.com-content-category-blog__item.blog-item::after{
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #ec620a;
}
.mod-languages {
    margin-top: .5em;
}

@media (max-width: 767px) {

    /* Das mobile Menü */
    #navbar1 {
        position: fixed !important;
        top: 0;
        left: 0 !important;
        right: auto !important;

        width: 320px;
        max-width: 60vw;
        height: 100vh;

        background: #fff;
        z-index: 9999;

        overflow-y: auto;

        padding: 80px 25px 30px;

        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.15);

        /* geschlossen */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* geöffnet */
    #navbar1.show {
        transform: translateX(0);
    }

}
/* #################### */
.metismenu.mod-menu .mm-toggler::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: 0 !important;
    border-right: 2px solid #333 !important;
    border-bottom: 2px solid #333 !important;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    margin: 0 !important;
}

/* geöffnet */
.metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after {
    transform: rotate(225deg);
}

.metismenu.mod-menu .mm-toggler {
    margin-left: 12px !important;
}

/* Footer */
.footer {
    color: white;
    background-color: #ec620a;
  background-image: none;

}

/* Kategorie Block Willkommensseite */
.grid-child.container-component{
  width: 70%;
}

/* Smartphones */
@media (max-width: 767px) {
   .grid-child.container-component {
  width: 100%;
}
}


.left.item-image{
  width: 25%;
  margin-right: 5%;
}

/* Smartphones */
@media (max-width: 767px) {
   .left.item-image{
  width: 100%;
}
  body.welcome .com-content-category-blog .item-image {
    display:none;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}
}

.right.item-image{
  width: 25%;
  margin-left: 5%;
}

/* Smartphones */
@media (max-width: 767px) {
   .right.item-image{
  width: 100%;
}
   figure.item-image.right {
    display:none;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}
}

.blog-item {
  display: block;
}

.item-content{
  /* width:70%; */
  /* float:left; */
  overflow: hidden;
}

/* Smartphones */
@media (max-width: 767px) {
   .item-content{
  float:none;
     width:100%;
}
}

.com-content-category-blog__item.blog-item{
  margin-top:5%;
  width:100%;

}

/* Newsflash */

.mod-articles-items.mod-articles-grid.grid-cols-3.mod-list{
  padding-left: 12rem;
  padding-right: 12rem;
}

/* Smartphones */
@media (max-width: 767px) {
    .mod-articles-items.mod-articles-grid.grid-cols-3.mod-list{
  padding-left: 0rem;
  padding-right: 0rem;
}
}

.mod-articles-grid{
  --grid-layout-gap: 7rem;
}

/* Newsflash Button */
.hero-image {
    position: relative;
    display: block;
    width: 100%;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Button immer unten, mit Abstand zum Kartenrand */
.mod-articles-item .hero-button-newsflash {
    margin-top: auto;
    padding-bottom: 20px;   /* Abstand nach unten */
}


/* Smartphones */
@media (max-width: 767px) {
    .hero-button-newsflash {
    width:100%;
    }
}


.hero-button-newsflash a {
    padding: 0.9rem 1.8rem;
    /* background: rgba(255, 255, 255, 0.92); 
    color: #222 !important; */
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 
    color: white !important;
    background: #ec620a;
}

.hero-button-newsflash a:hover {
    background: #fff;
    color: #000 !important;
}
/* Bildseite Button */

.container-banner.full-width{
  margin-top:2%;    
}
.grid-child.container-top-a{
  margin-top:2%;  
}

.hero-image {
    position: relative;
    display: block;
    width: 100%;
}

.hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.hero-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14%;
}

/* Smartphones */
@media (max-width: 767px) {
    .hero-button {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 65%;
    width:100%;
    }
}


.hero-button a {
    padding: 0.9rem 1.8rem;
    /* background: rgba(255, 255, 255, 0.92); 
    color: #222 !important; */
    border: 1px solid #ddd;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  
    color: white !important;
    background: #ec620a;
}

.hero-button a:hover {
    background: #fff;
    color: #000 !important;
}

/* Karten für die Beiträge */
.mod-articles-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.25rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    height: 100%;
}

/* Karte als Flex-Spalte, damit der Button unten ausgerichtet werden kann */
.mod-articles-item .mod-articles-item-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Bild bündig mit dem Kartenrand */
.mod-articles-item .mod-articles-image {
    margin: 0 auto;         /* Container selbst horizontal zentrieren */
    padding: 20px;          /* Abstand zwischen Bild und Rahmenkante */
    width: 100%;
    max-width: 300px;      /* Obergrenze für die Breite */
    aspect-ratio: 1 / 1;    /* Höhe folgt automatisch der Breite */
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mod-articles-item .mod-articles-image img {
    /* display: block;*/
    width: 100%;
    height: 100%;
    object-fit: cover;      /* füllt den Rahmen, schneidet ggf. Ränder ab, kein Verzerren */
    object-position: center center;
}

/* Textbereich */
.mod-articles-item-content > p {
    margin-left: 1rem;
    margin-right: 1rem;
}

.mod-articles-item-content > p:first-of-type {
    margin-top: 1rem;
}

.mod-articles-item-content > p:last-child {
    margin-bottom: 1.25rem;
}

.mod-articles-image {
    text-align: center;
}

.banner-overlay {
    min-height: 250px;
    max-height: 600px;
}


.brand-logo img {
  width:60%;
}

/* Header und Banner Hintergrund weiß */
.header .grid-child,
.container-banner {
    background-color: #ffffff !important;
}

.container-header .grid-child {
    padding: 0em;
}

.grid-child.container-nav {
  padding-bottom:.5em;
}
.navbar-brand{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* Navbar Hintergrund weiß */
.navbar {
    background-color: #ffffff !important;   
    margin-left: auto;
    margin-right: auto;
}

/* Smartphones */
@media (max-width: 767px) {
    .navbar {   
    margin-left: unset;
}
}


/* Menü-Links - dunkler Text */
.mod-menu .metismenu-item > a {
    color: #1a1a1a !important;
}

.mod-menu .metismenu-item > a:hover {
    color: #0056b3 !important;
}

.mod-menu .metismenu-item.active > a {
    color: #0056b3 !important;
}

/* Untermenu */
.mod-menu .mm-collapse .metismenu-item > a {
    color: #1a1a1a !important;
}

.mod-menu .mm-collapse .metismenu-item > a:hover {
    color: #0056b3 !important;
}

/* Toggle Button */
.navbar-toggler {
    color: #1a1a1a !important;
}

/* MetisMenu Styling */
.metismenu .active > a {
    color: #0056b3 !important;
}