/* ================== Angepasste Classen der BootstrapBibliothekKomponenten ======== */ 


@import url("bootstrap-icons.css");





/* ====TickerAnimation Laufband===== */ 
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#tickerTrack:hover { animation-play-state: paused; }



/* ==============================
   Joomla 6 Smart Search
   ============================== */

/* Suchformular */
.com-finder__search .form-inline {
    display: flex;
    flex-wrap: wrap;
}

.com-finder__search .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    width: 100%;
}

.com-finder__search label {
    display: block;
    width: 100%;
    margin: 0;
    font-weight: 600;
    color: #fff;
}

.com-finder__search .awesomplete {
    flex: 1 1 320px;
}

.com-finder__search .form-control {
    width: 100%;
    height: 48px;
}

.com-finder__search .btn {
    height: 48px;
    white-space: nowrap;
    padding: 0 1.5rem;
}

.com-finder__search .btn-primary {
    min-width: 150px;
}

.com-finder__search .btn-secondary {
    min-width: 190px;
}

/* Mobil */
@media (max-width:768px){

    .com-finder__search .awesomplete,
    .com-finder__search .btn{
        width:100%;
        flex:0 0 100%;
    }

    .com-finder__search .btn{
        margin-top:.5rem;
    }

}


/* ==============================
   Joomla 6 Smart Search Ende
   ============================== */




/* ==============================
  FilterNavigation für Phones + Desktop
   ============================== */


/* Desktop-Modul auf Smartphones ausblenden */
@media (max-width: 767.98px) {
    .mobile-hide {
        display: none !important;
    }
}

/* Smartphone-Modul standardmäßig ausblenden */
.mobile-only {
    display: none;
}

/* Smartphone-Modul nur auf Smartphones anzeigen */
@media (max-width: 767.98px) {
    .mobile-only {
        display: block !important;
    }
}






/* ==============================
   Datumsanzeigen im Einzelbeitrag
   ============================== */

.text-muted {
  --text-opacity: 1;
  color: #ccc !important;
  font-size: 1.1rem;
}

/*    Datumsanzeigen ende  */



/* ==============================
   Farben lesbarkeit in Beiträgen
   ============================== */

.bg-white {
  --bg-opacity: 1;
  background-color: rgb(255, 255, 255) !important;
}






/* ==============================
   ======= */

/* Ändert die Hintergrundfarbe der card-body in dieser spezifischen Struktur */
.col .card.shadow-none .card-body {
    background-color: #0f172a; /* Ersetzen Sie dies durch Ihre Wunschfarbe (z.B. #f8f9fa für Hellgrau) */
    color: #ccc; /* Textfarbe innerhalb der Card bei Bedarf anpassen */
}

/* Optional: Setzt die Hintergrundfarbe der gesamten Card, falls Ecken weiß hervorblitzen */
.col .card.shadow-none {
    background-color: #000; 
}



/* ==============================
   Eyecatcher „Roby" – zentriert über Sektionsgrenze
   ============================== */

.container-below-top {
  position: relative;
  z-index: 0;
}

/* Basis: immer exakt horizontal + vertikal auf der Grenze zentriert */
.header-eyecatcher {
  position: absolute;
  top: 0;
  left: 70%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-decoration: none;
  pointer-events: auto;      /* für Hover/blog-hint; auf none setzen, falls Klicks stören */
}

.header-eyecatcher img {
  display: block;
  max-width: 290px;          /* Desktop-Standard */
  height: auto;
  animation: robyGlow 4s ease-in-out infinite;
  transition: transform 0.35s ease;
}

/* Hover-Effekt */
.header-eyecatcher:hover img {
  transform: scale(1.03);
}

/* Sprechblase */
.blog-hint {
  position: absolute;
  top: 20px;
  left: -150px;
  background: #ffffff;
  color: #0f172a;
  border: 2px solid #009ee3;
  border-radius: 30px;
  padding: 0.45rem 0.9rem;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateX(15px);
  transition: all 0.35s ease;
  z-index: 101;
}

.blog-hint i {
  color: #ff9800;
  margin-right: 0.35rem;
}

.header-eyecatcher:hover .blog-hint {
  opacity: 1;
  transform: translateX(0);
}

/* ==============================
   Responsive: NUR die Bildgröße ändern
   Position bleibt exakt zentriert
   ============================== */

/* Notebooks/Laptops (< 1200px) */
@media (max-width: 1199.98px) {
  .header-eyecatcher img { max-width: 240px; }
}

/* Tablets (< 992px) */
@media (max-width: 991.98px) {
  .header-eyecatcher img { max-width: 200px; }
}

/* Smartphones (< 768px) */
@media (max-width: 767.98px) {
  .header-eyecatcher img { max-width: 160px; }
}










/* == Containerbreite (mobile first) == */
.site-grid > [class^=container-],
.site-grid > [class*=" container-"] {
  width: 100%;
  padding-inline: 12px;   /* Abstand zum Rand (mobil) */
  max-width: none;
  column-gap: 1em;
}

/* Tablet */
@media (min-width: 768px){
  .site-grid > [class^=container-],
  .site-grid > [class*=" container-"] {
    width: 100%;
    padding-inline: 20px;
  }
}

/* Desktop */
@media (min-width: 1200px){
  .site-grid > [class^=container-],
  .site-grid > [class*=" container-"] {
    width: 100%;
    padding-inline: 40px;
  }
}

/* Main-Bereich Joomla 6 Cassiopeia */
/* Desktop */
.grid-child.container-component main{
    background: #040914;
    padding: 50px;
    color: #fff;
}

/* Tablet (ab < 992px): schmaleres Padding links & rechts */
@media (max-width: 991.98px) {
    .grid-child.container-component main{
        padding: 50px 30px;
    }
}

/* Kleinere Tablets / große Smartphones (ab < 768px) */
@media (max-width: 767.98px) {
    .grid-child.container-component main{
        padding: 40px 20px;
    }
}

/* Smartphones (ab < 576px) */
@media (max-width: 575.98px) {
    .grid-child.container-component main{
        padding: 30px 15px;
    }
}

/* Erreicht Tablet- und kleinere Desktop-Größen (unter 992px) */
@media (max-width: 991.98px) {
    
    /* Hauptbereich (Kategorie-Blog / Einzelbeiträge) auf volle Breite zwingen */
    .site-grid .grid-child.container-component {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    /* Optionale Optimierung: Die Blog-Beiträge in der Grid-Liste ebenfalls untereinander brechen */
    .com-content-category-blog__items {
        grid-template-columns: 1fr !important;
    }
    
    /* Sorgt dafür, dass einzelne Beitragsboxen nicht über den Bildschirmrand ragen */
    .com-content-category-blog__item {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

.bg-light {
  --bg-opacity:1;
  background-color:rgb(0, 158, 227) !important;
}



/* =========== */


.breadcrumb {
  background-color:#cccccc;
  margin-bottom:0
}

/* Sidebar Right */
body.wrapper-fluid .grid-child {
  max-width: none;
  
}




body {
  margin: 0;
  min-height: 100vh;

  background: linear-gradient(351deg, #ffffff 0%, #ffffff 29%, #969696 100%);
  position: relative;
}

/* SVG darüberlegen */
body::before {
  content: "";
  position: fixed; /* wichtig → bleibt sichtbar */
  inset: 0;

  background: url('/images/svg/print.svg') left -280px center / 1000px no-repeat;

  opacity: 1;
  pointer-events: none;
  z-index: 0;
}



/* LogoContainer vorbereiten */
#mod-custom112 {
  position: relative; /* Dient als Ankerpunkt für die absolute Positionierung */
}

/* 2. Das Logo frei positionieren und Platz sparen */
#mod-custom112 img.logo {
  position: absolute;
  top: 0px;         /* Abstand von der Oberkante des Headers */
  left: 5px;        /* Abstand von der linken Kante */
  z-index: 100;      /* Stellt sicher, dass das Logo über anderen Elementen liegt */
  max-height: 50px;  /* Optional: Verkleinert das Logo leicht, um noch mehr Platz zu sparen */
  width: auto;       /* Behält das korrekte Seitenverhältnis bei */
}



/* Blocksatz Texte */
p.text-blocksatz {
  margin-top:0;
  margin-bottom:1rem;
  margin-right: 2rem;
  text-align: justify;       /* Richtet den Text im Blocksatz aus */
  hyphens: auto;             /* Aktiviert die automatische Silbentrennung */
  text-justify: inter-word;  /* Optimiert den Wortabstand (optional) */
  line-height: 1.9;          /* Zeilenabstand 1,5-fache der Schriftgröße */
}

/* SucheIndex */

.finder-toggle {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    
}

.finder-icon {
    background: none;
    border: 0;
    font-size: 1.8rem;
    cursor: pointer;
    padding-top: 1px;
    padding-right: 5px;
    padding-bottom: 1px;
    padding-left: 3px;
    margin-left: auto;
  
}

.finder-form {
    position: absolute;
    right: 0;
    top: 100%;
    width: 250px;
    z-index: 99999;

    opacity: 0;
    visibility: hidden;

    transition: all .3s ease;
}

.finder-form.active {
    opacity: 1;
    visibility: visible;
}






/* ==========================
   Styling rechte Sidebar
========================== */

/* 1. Bullets und Abstände der Liste in der Sidebar entfernen */
.sidebar-right .mod-tagspopular ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Abstand zwischen den Kästchen */
}

/* 2. Die Listenelemente nebeneinander anordnen */
.sidebar-right .mod-tagspopular ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

/* 3. Die Schlagwörter als schicke Kästchen/Buttons stylen */
.sidebar-right .mod-tagspopular ul li a {
    display: inline-block;
    padding: 6px 12px;
    background-color: #0b111e; /* Dunkler Hintergrund passend zu Ihren News-Boxen */
    border: 1px solid #1e293b; /* Dezenter Rahmen */
    color: #ffffff; /* Weiße Schrift */
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

/* 4. Hover-Effekt: Wenn man mit der Maus über ein Thema fährt */
.sidebar-right .mod-tagspopular ul li a:hover {
    background-color: #1a233a; /* Etwas helleres Dunkelblau beim Hovern */
    border-color: #00adef; /* Leuchtend blauer Rahmen aus Ihrem Design */
    color: #00adef; /* Blaue Schrift beim Hovern */
}

/* 5. Optional: Falls die Anzahl der Beiträge (Counter) im Modul aktiv ist */
.sidebar-right .mod-tagspopular ul li .tag-count {
    margin-left: 5px;
    background-color: #1e293b !important;
    color: #00adef;
}





/* ==========================
   FOOTER LOGIN BEREICH
========================== */

.footer-login-area{
  background:#36454f;
  color:#fff;
  padding:40px;
}

.footer-info h3{
  margin-bottom:25px;
}

.footer-info ul{
  list-style:none;
  padding:0;
}

.footer-info li{
  margin-bottom:12px;
}

.footer-info a{
  color:#fff;
  text-decoration:none;
}

.footer-info a:hover{
  color:#009ee3;
}


/* ==========================
   LOGIN MODUL VERKLEINERN
========================== */

.login-wrapper .login{
  background:#fff;
  padding:25px;
  border-radius:6px;
}

.login-wrapper h3,
.login-wrapper h2{
  font-size:1.8rem;
}

.login-wrapper .form-control{
  height:42px;
  font-size:0.95rem;
}

.login-wrapper .btn{
  width:100%;
  padding:10px;
}


/* Eingabefelder kleiner */

.login-wrapper input{
  font-size:.95rem;
}


/* Abstand */

.login-wrapper{
  padding-left:40px;
}


/* Tablet */

@media (max-width:991px){

  .login-wrapper{
    padding-left:0;
    margin-top:40px;
  }

}


/* Smartphone */

@media (max-width:768px){

  .footer-login-area{
    padding:25px;
  }

}







/* ---------------------HAUPTMENÜ------------------------------ */
/* LOGO Abstand oben unten */
.container-header .container-nav {
  flex-wrap:wrap;
  justify-content:space-between;
  padding-bottom:1em;
  padding-top: 0em;
  position: relative; /* wichtig für pseudo-element */
  background-color: #fff;  /* weiß für Logo-Hintergrund */
  z-index: 1;              /* Inhalte vor Pseudo-Element */
}

.container-header .container-nav::after{
  content:"Zuhören. Verstehen. Lösen. Weil echte Lösungen im Gespräch beginnen.";
  position:absolute;
  left:170px; /* leicht rechts von deiner Schräge */
  bottom:0px;
  color:#fff;
  font-size:1.0rem;
  font-weight:300;
  z-index:2;
}

/* ab Tablet ausblenden */
@media (max-width: 991.98px){
  .container-header .container-nav::after{
    content:none;
  }
}

/* Blauer halb-hoher Hintergrund mit fixem Winkel */
.container-header .container-nav::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 120px; /* links wie padding */
  width: calc(100% - 120px); /* Breite angepasst */       
  height: 55%; /* nur die Hälfte vertical */
  background-color: #009ee3;
 clip-path: polygon(75px 0, 100% 0, 100% 100%, 0 100%); /* Winkel bleibt unverändert */
  z-index: -1; /* hinter den Inhalten */
 
}


/* Tablet: kleine Bildschirme */
@media (max-width: 1024px) {
  .container-header .container-nav::before {
    clip-path: polygon(75px 0, 100% 0, 100% 100%, 0 100%);
  }
}

/* Smartphone: sehr schmal */
@media (max-width: 768px) {
  .container-header .container-nav::before {
    clip-path: polygon(75px 0, 100% 0, 100% 100%, 0 100%);
    height: 35%; /* optional etwas niedriger */
  }
}


/* gibt dem Hamburger Button Aussehen u Position */
.container-header .navbar-toggler {
  color: #009ee3;
  cursor: pointer;
  border: 1px solid #000;
  border-radius: 0;
  padding: 20px;
  position: fixed;
  right: 16px; /* Abstand zum rechten Bildschirmrand */
  z-index: 10;
  background-color: #000;
}




/* --- Hamburger: eigenen Icon aus dem Icon-Font-Span bauen --- */

/* 1. Originalen Icon-Font-Glyph unterdrücken */
.navbar-toggler .icon-menu::before {
    content: "" !important;   /* entfernt das Font-Zeichen */
}

/* 2. .icon-menu als 24x24-Bühne für die drei Striche */
.navbar-toggler .icon-menu {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}

/* 3. Mittlerer Strich (der span selbst per box-shadow-Trick oder eigener Balken) */
.navbar-toggler .icon-menu {
    background: transparent;
}

/* Oberer + unterer Strich via Pseudo-Elemente, mittlerer via zusätzlichem Balken */
.navbar-toggler .icon-menu::before,
.navbar-toggler .icon-menu::after {
    content: "";
    position: absolute;
    left: 0;
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background-color: #fff;                 /* an Button-Farbe anpassen */
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}

/* mittlerer Strich */
.navbar-toggler .icon-menu {
    /* nutzt einen zentralen Balken über box-shadow des eigenen Hintergrunds */
}
.navbar-toggler .icon-menu::before { top: 5px; }
.navbar-toggler .icon-menu::after  { top: 17px; }

/* Mittelbalken separat: kleines i-Element simulieren wir über den span-Hintergrund */
.navbar-toggler .icon-menu {
    background-image: linear-gradient(#fff, #fff);
    background-size: 24px 3px;
    background-position: 0 11px;            /* Mitte */
    background-repeat: no-repeat;
    transition: background 0.3s ease;
}

/* --- Geöffneter Zustand: aria-expanded="true" => X --- */
.navbar-toggler[aria-expanded="true"] .icon-menu {
    background-image: none;                 /* mittlerer Strich verschwindet */
}
.navbar-toggler[aria-expanded="true"] .icon-menu::before {
    top: 11px;
    transform: rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .icon-menu::after {
    top: 11px;
    transform: rotate(-45deg);
}



/* --- Header-Menü Anpassungen --- */
.container-header .mod-menu {
  flex: 0 1 auto;
  margin-right: 43px;
  background-color: #eee; 
  list-style-image: none;
  border: 0px solid #0f172a;
}

/* Schrift im Ruhezustand gut lesbar und edel */
.container-header .mod-menu .metismenu-item > * {
  color: #040914; 
  font-size: 16px; /* Empfohlen statt 8px für Barrierefreiheit */
  transition: color 0.2s ease;
}

/* Hover-Effekt nutzt eure Branding-Farbe */
.container-header .mod-menu .metismenu-item > *:hover {
  color: #000; /* HIER EURE GENAUE BRANDING-FARBE (HEX) EINTRAGEN */
}





/* 1. Menü absolut positionieren (Verhindert das Verschieben des Logos, setzt Hintergrund transparent) */
/* ------testen------ */



/* 2. Nur das GEÖFFNETE Menü im MOBILEN Zustand anpassen (Media Query) */
@media (max-width: 991.98px) {
  #navbar110.collapse.show {
    position: absolute;
    top: 45px;                 /* Verschiebt NUR die Liste unter den Button */
    right: 35px;
    width: 200px;              /* Begrenzt die Breite der Liste, damit sie kompakt bleibt */
    background-color: #c6c6c6; /* Hintergrundfarbe NUR mobil im geöffneten Zustand */
    z-index: 9999;
    padding: 10px;
    box-shadow: -2px 5px 10px rgba(0,0,0,0.15); /* Schattierung für den "schwebenden" Look */
  }
}




/* -------Hauptmenü----- ende ----------- */



/*------ neues Layout auf Basis Beiträge im Main WechselHintergrund als Sectionen ------- */

/* Globale Sektions-Einstellungen für Onepager */
.onepager-section {
    position: relative;
    padding-top: 80px;
    padding-bottom: 40px;
    scroll-margin-top: 100px; /* Schützt Überschriften vor fixierten Menüs beim Springen */
}

/* Hintergrundfarben laut Layout-Vorgabe */
.section-light-gray {
    background-color: #009ee3;
    color: #fff;
    padding-top: 80px;
    padding-bottom: 40px;
}

.section-white {
    background-color: #ffffff;
    color: #333333;
    padding-top: 80px;
    padding-bottom: 40px;
}

.section-dark-blue {
    background-color: #0f172a;
    color: #ffffff;
    padding-top: 80px;
    padding-bottom: 40px;
}





/*------ Ende neues Layout auf Basis Beiträge im Main WechselHintergrund als Sectionen ------- */


/* Standardbeiträge aus Override Newsbereich */

/* Blendet die Standard-Listenpunkte aus */
.custom-news-body ul {
    list-style: none;
    padding-left: 0;
}

/* Erzeugt das Bootstrap-Icon (arrow-right-circle) vor jedem Listenpunkt */
.custom-news-body ul li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.5rem;
}

.custom-news-body ul li::before {
    content: "\F138"; /* Hex-Code für Bootstrap-Icon arrow-right-circle */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #009ee3; 
}














/* --- accordion ----- */

.accordion-button::after {
  content: '+';
  font-size: 1.4rem;
  color: #ddd;
  margin-left: auto;
  transform: none !important;
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
  content: '−';
  transform: none !important;
}

.accordion-button {
  font-weight: 400;
  background-color: #fff;
  color: #888;
  border-radius: 0 !important;
  transition: background-color 0.3s ease;
}


/* entfernt das Standard-Pfeil-Symbol */
.accordion-button::after {
  content: '+' !important;
  font-size: 1.5rem;
  color: #888;
  margin-left: auto;
  background-image: none !important;
  transform: none !important;
}

/* wenn aufgeklappt: Minuszeichen anzeigen */
.accordion-button:not(.collapsed)::after {
  content: '−' !important;
}

.accordion-item {
  border: 1px solid #ddd;
  border-radius: 0 !important;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.accordion-body {
  padding: 1rem;
  background-color: #f9f9f9;
}

/* Hintergrund im geöffneten Bereich */
.custom-accordion .accordion .accordion-body {
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(145,168,186,1)),
              url('../images/svg/logo-digas.svg') center/cover no-repeat;
  color: #36454f;
}


@media (min-width: 769px) and (max-width: 1024px) {
  /* Accordion-Spalten untereinander */
  .accordion-columns {
    flex-direction: column;
    gap: 20px;
  }

  /* Inhalt im geöffneten Accordion untereinander */
  .accordion-body .row {
    flex-direction: column;
  }

  .accordion-body .col-text,
  .accordion-body .col-image {
    width: 100%;
    padding: 0 !important;
    margin-bottom: 1rem;
    text-align: center;
  }

  .accordion-body .col-image img {
    max-width: 100%;
    height: auto;
  }
}


@media (max-width: 768px) {
  /* Accordion-Spalten untereinander */
  .accordion-columns {
    flex-direction: column;
    gap: 20px;
  }

  /* Inhalt im geöffneten Accordion untereinander */
  .accordion-body .row {
    flex-direction: column;
  }

  .accordion-body .col-text,
  .accordion-body .col-image {
    width: 100%;
    padding: 0 !important;
    margin-bottom: 1rem;
    text-align: center;
  }

  .accordion-body .col-image img {
    max-width: 100%;
    height: auto;
  }
}




/* ===== Newsflash Neuigkeiten=========*/


/* =====================================
NEWSFLASH / NEUIGKEITEN
===================================== */

.newsflash-wrapper{
  position:relative;
  overflow:hidden;
}

/* ==========================
ÄUSSERES LAYOUT
========================== */

.news-track{
  display:flex;
  transition:transform .4s ease;
}

.news-item{

  min-width:33.333%;

  padding:5px;
}

/* ==========================
BOX
========================== */

.news-inner{

  display:flex;

  align-items:flex-start;

  gap:20px;

  background:#0f172a;

  border:1px solid #009ee3;

  padding:20px;

  color:#fff;

  height:100%;
}

/* ==========================
BILD
========================== */

.news-image-wrapper{

  flex:0 0 100px;

  width:100px;

  height:100px;
}

.news-image-wrapper img{

  width:100%;

  height:100%;

  object-fit:contain;

  display:block;
}

/* ==========================
TEXT
========================== */

.news-content-body{

  flex:1;

  display:flex;

  flex-direction:column;

  min-width:0;
}

.news-content-body h3{

  word-break:break-word;
}

/* ==========================
DOTS
========================== */

.news-dots{

  text-align:right;

  margin-top:10px;
}

.news-dots button{

  width:20px;

  height:20px;

  border:none;

  border-radius:50%;

  margin:0 4px;

  background:#777;

  cursor:pointer;
}

.news-dots button.active{

  background:#009ee3;
}

/* =====================================
TABLET
ab hier alles einspaltig
===================================== */

@media (max-width:992px){

  /* 3 Spalten -> 1 Spalte */

  .news-item{

    min-width:100%;
  }

  /* Bild + Text -> untereinander */

  .news-inner{

    flex-direction:column;

    align-items:center;

    text-align:center;
  }

  .news-image-wrapper{

    flex:0 0 auto;

    width:120px;

    height:120px;
  }

}

/* =====================================
SMARTPHONE
===================================== */

@media (max-width:768px){

  .news-inner{

    padding:15px;
  }

  .news-image-wrapper{

    width:90px;

    height:90px;
  }

}

/* =====================================
KLEINE HANDYS
===================================== */

@media (max-width:480px){

  .news-inner{

    gap:15px;
  }

  .news-image-wrapper{

    width:80px;

    height:80px;
  }

}

/* Ende Newsflash Neuigkeiten */










/* =========== Sectionen Layout edel ornament ========= */

/* ==========================================
1. GRAFIK-ANIMATION
========================================== */

.edel-ornament {
    width: 550px;
    height: auto;
    display: inline-block;

    opacity: 0;

    animation: cubeDrehen 1.8s cubic-bezier(0.25,1,0.5,1) forwards;
}

@keyframes cubeDrehen {

    0% {
        opacity: 0;
        transform: scale(.92) rotate(-58deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }

}

/* ==========================================
2. TEXT-ANIMATION
========================================== */

.edel-text-1,
.edel-text-2 {

    opacity: 0;

    animation: textVonUnten 1.5s cubic-bezier(0.25,1,0.5,1) forwards;
}

.edel-text-1 {
    animation-delay: .4s;
}

.edel-text-2 {
    animation-delay: .8s;
}

@keyframes textVonUnten {

    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/* ==========================================
3. SCHRIFTGRÖSSEN DESKTOP
========================================== */

.edel-title {
    color: #fff;
    font-size: 3rem;
}

.edel-subtitle {
    color: #009ee3;
    font-size: 2rem;
}

/* ==========================================
4. NOTEBOOK
========================================== */

@media (max-width:1200px){

    .edel-title{
        font-size:2.5rem;
    }

    .edel-subtitle{
        font-size:1.7rem;
    }

}

/* ==========================================
5. TABLET
========================================== */

@media (max-width:992px){

    .edel-title{
        font-size:2rem;
    }

    .edel-subtitle{
        font-size:1.4rem;
    }

}

/* ==========================================
6. SMARTPHONE
========================================== */

@media (max-width:768px){

    .edel-title{
        font-size:1.6rem;
    }

    .edel-subtitle{
        font-size:1.15rem;
    }

    .edel-ornament{
        width:240px;
    }

}





/* =========== Sectionen Layout edel ornament ende ========= */


/* =========== Farbgebung BTN Buttons ========= */
:root {
  --cassiopeia-color-primary:#112855;
  --cassiopeia-color-link:#224faa;
  --link-color:#009ee3;
  --link-color-rgb:34,
  79,
  170;
  --cassiopeia-color-hover:#00648F;
  --link-hover-color:#00648F;
  --link-hover-color-rgb:66,
  64,
  119
}




  
  /* Eigene Alert Box Einstellungen */

:root {
  --success-bg-subtle: #94a189;
  --success-text-emphasis: #fff;
  --success-border-subtle: #009ee3;
  /* Border */
  --border-width: 1px;
  --alert-border-radius: 0px;
}
.alert {
  --border-width: 0px;
  --alert-border-radius: 0px;
  --alert-bg: #009ee3;
}


/* =======Style Text Schalter ========== */













/* ================== TYPOGRAFIE – Roboto ================== */
/* Basis */
:root {
  --h1-size: 3rem;
  --h2-size: 2.4rem;
  --h3-size: 1.9rem;
  --h4-size: 1.5rem;
  --h5-size: 1.2rem;
  --h6-size: 1rem;

  --lh-tight: 1.2;
  --lh-normal: 1.35;
}

/* Tablet */
@media (max-width:992px){
  :root{
    --h1-size:2.4rem;
    --h2-size:2rem;
    --h3-size:1.6rem;
  }

}

/* Smartphone */
@media (max-width:768px){
  :root{
    --h1-size:2rem;
    --h2-size:1.7rem;
    --h3-size:1.4rem;
  }

}

/* Headings */
h1.text-dark {
  font-family: "Roboto", sans-serif;
  font-size: var(--h1-size);
  font-weight: 300;
  line-height: var(--lh-tight);
  color: #009ee3 !important;
}

h2.text-dark {
  font-family: "Roboto", sans-serif;
  font-size: var(--h2-size);
  font-weight: 300; /* SemiBold */
  line-height: var(--lh-tight);
  color: #009ee3 !important;
}

h3 {
  font-family: "Roboto", sans-serif;
  font-size: var(--h3-size);
  font-weight: 300; /* Medium */
  line-height: var(--lh-normal);
  color: #009ee3;
}

h4 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  }

/* Styling für den eigentlichen Link im h4 (Farbe & Unterstreichung) */
h4 a {
  color: #009ee3;            
  text-decoration: none !important;  
}

/* Optional: Farbe ändern, wenn man mit der Maus darüber fährt */
h4 a:hover {
  color: #fff;         
  text-decoration: none;
}





h5 {
  font-family: "Roboto", sans-serif;
  font-size: var(--h5-size);
  font-weight: 400; /* Regular */
  line-height: var(--lh-normal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h6 {
  font-family: "Roboto", sans-serif;
  font-size: var(--h6-size);
  font-weight: 400;
  line-height: var(--lh-normal);
  letter-spacing: 0.02em;
  opacity: 0.8;
}

/* --------------------------------------------------- */

.header {
    background: #fff;
	}

.topbar {
  padding: 0.4rem 1rem;
}

.container-topbar {
  color: #000000;
  padding-top: 1rem;
  padding-right: 1rem;
  padding-bottom: 0rem;
  padding-left: 1rem;
}

/* TOPBAR LAYOUT (Desktop) */
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1320px;
  margin: auto;
}

/* Kontakt links */
.top-contact {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: .9rem;
}

.top-contact span {
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* Neue Schalter Mitte (Desktop) */
.top-buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Social rechts */
.top-social {
  display: flex;
  gap: 1rem;
  align-items: center;
}
/* ===================================================
   Tablet + Smartphone (Ab 768px und kleiner)
   =================================================== */
@media (max-width: 768px) {

  /* Macht die Topbar extrem schlank (Abstände auf ein Minimum reduzieren) */
  .container-topbar {
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
  
  .topbar {
    padding: 0.2rem 0.5rem;
  }

  /* Zwingt alle 3 Hauptblöcke (Kontakt, Schalter, Socials) strikt in EINE Zeile */
  .topbar-inner {
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap; /* Verhindert das Umbrechen in eine zweite Zeile */
  }

  /* Telefonnummern komplett ausblenden */
  .top-contact .tel,
  .top-contact span::text { 
    display: none !important; 
  }
  
  /* Falls die Nummern reiner Text im span sind, blenden wir den Text aus, behalten aber das Icon */
  .top-contact span {
    font-size: 0; /* Versteckt eventuellen Text-Rest */
    gap: 0;
  }
  
  /* Stellt sicher, dass die Icons (Support / Vertrieb) sichtbar bleiben */
  .top-contact span i, 
  .top-contact span svg,
  .top-contact span img {
    font-size: 1rem; /* Holt die Icon-Größe zurück */
  }

  /* Platzhalter für Ihre 3 Schalter in der Mitte (kleiner skaliert) */
  .top-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.3rem;
  }
  
  /* Macht die Schalter kompakt, damit sie testweise in die Zeile passen */
  .top-buttons input,
  .top-buttons button,
  .top-buttons select {
    transform: scale(0.8); /* Verkleinert die Schalter um 20% */
    margin: 0 -2px;
    max-width: 50px;       /* Begrenzt die Breite im Testmodus */
  }

  /* Social-Media-Icons rechts bündig halten */
  .top-social {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }
}




/* Fixiert den Header NUR auf Mobilgeräten und löst das Cassiopeia-Grid-Problem */
@media (max-width: 991.98px) {
  /* Hebt die Grid-Beschränkung für den Header auf Mobilgeräten auf */
  .site-grid {
    display: block !important;
  }

  .header {
    position: sticky !important;
    top: 0;
    z-index: 1040;
    width: 100%;
    background: #fff; /* Garantiert, dass der Header beim Scrollen deckend weiß bleibt */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional: Erzeugt eine feine Linie zum Content */
  }
}


















  



/* ======== SECTIONEN - ROWS – ab Tablet alles einspaltig====== */
@media (max-width: 991.98px) {
  .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ======== SECTIONEN - ROWS – Abstände über padding für Tablet====== */

@media (max-width: 991.98px) {
  .row {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ======== SECTIONEN - ROWS – Abstände über padding für Smartphones====== */

@media (max-width: 575.98px) {
  .row {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ======== SECTIONEN - ROWS – Abstände über padding gezielt nur Spalten====== */
@media (max-width: 991.98px) {
  .row > [class*="col-"] {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}



/* ======== Formular====== */

.contact-form-custom{
    max-width:900px;
    margin:auto;
}

.contact-form-custom .form-control{
    border-radius:.5rem;
    padding:.75rem 1rem;
}

.contact-form-custom textarea{
    min-height:220px;
}

.contact-form-custom .btn{
    min-width:220px;
}



/* ======== Formular ende====== */





/* ===== GLOBAL FULLWIDTH SECTION OHNE RÄNDER =====*/ 
.no-padding-fullwidth {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding: 0 !important;
  overflow-x: hidden;
}

/* Footer spezifisch */
#section-footer {
  background-color: #7E909C;
  color: #fff;
  padding: 20px 0;
}

#section-footer .footer-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 40px;
}

/* Footer Links */
#section-footer a {
  color: #fff;
  text-decoration: none;
}

#section-footer a:hover {
  text-decoration: none;
}

/* Nav optimieren */
#section-footer .nav-link {
  padding: 0 10px;
  color: #fff;
}

/* Mobile: Logo oben, Navigation mittig */
@media (max-width: 767.98px) {
  #section-footer .footer-container {
    text-align: center;
  }
  #section-footer .footer-left {
    margin-bottom: 15px;
  }
  #section-footer .nav {
    flex-direction: column;
  }
  #section-footer .nav-link {
    padding: 5px 0;
  }
}


/* ===== Effekt Bildergalerie ===== */
.gallery-img {
    transition: transform .3s ease;
    border-radius: 2px;
    cursor: pointer;
}

.gallery-img:hover {
    transform: scale(1.1);
    z-index: 2;
}


/* ===== Bildslider ===== */
/* Rahmenbox */
.slider-box {
    border: 4px solid #ffffff;
    padding: 0;
    overflow: hidden;
    border-radius: 4px;
}

/* Slider Grundlayout */
.slider {
    position: relative;
    width: 100%;
    height: 260px; /* kannst du anpassen */
    overflow: hidden;
}

.slider img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    opacity: 0;
    animation: sliderFade 8s infinite;
}

/* Bild 1 */
.slider img:nth-child(1) {
    animation-delay: 0s;
}

/* Bild 2 */
.slider img:nth-child(2) {
    animation-delay: 4s;
}

/* einfache Fade-Animation */
@keyframes sliderFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Optional: Typografie */
.two-cols-sliders h3 {
    font-size: 1.6rem;
    margin-top: 1rem;
}

/* FADE-IN */
.fade-in {
  opacity:0;
  transform:translateY(40px);
  transition:all .6s ease;
}

.fade-in.visible {
  opacity:1;
  transform:none;
}


.two-cols-sliders ul {
    padding-left: 1.2rem;
}







/* Footer-Info-Bereich */
.footer-info {
    background-color: #36454F; /*  */
    padding: 0rem 0; /* vertikale Abstände */
    font-size: 1.0rem;
    color: #fff; /* gruen */
}

/* Überschriften der Spalten */
.footer-info h6 {
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #54a505; /* gruen */
}

/* Links */
.footer-info a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-info a:hover {
    color: #888; /* Akzentfarbe beim Hover*/
    text-decoration: underline;
}

/* Abstand zwischen Links */
.footer-info .mb-1 {
    margin-bottom: 0.25rem !important;
}

/* Mobile: Text zentrieren, ab Medium links */
@media (max-width: 767.98px) {
    .footer-info .text-center {
        text-align: center !important;
    }
}


/* Primärer Button */

.btn-primary {
  background: #FF8800;
  border-radius: 0px;
  border: 1px;
  padding-top: 15px;
  padding-right: 25px;
  padding-bottom: 15px;
  padding-left: 25px;
  font-size: 22px;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #0f172a;
}

.btn-primary:hover {
  background: #009ee3;
  border-radius: 0px;
  border: none;
}

.btn-outline-light {
--btn-border-radius: 0rem;
}





/* HERO WRAPPER */
.hero-video-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* VIDEO */
.hero-video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  display: block;
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  z-index: 2;
  padding: 2rem;
  background: linear-gradient(
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.25)
  );
  
}

/* MOBILE */
@media (max-width: 768px) {
  .hero-video {
    height: 85vh;
  }

  .hero-overlay {
    justify-content: flex-start;
    padding-top: 3rem;
  }
}


/* ===== Feature-Bereich Modul ===== */




/* ===== BACKTOTOP ===== */


.back-to-top-link {
  /* eigene Farb-Variablen */
  --cassiopeia-color-hover: #000;
  --link-hover-color: #000;

  z-index: 10;
  color: #fff;
  background: #009ee3;
  pointer-events: all;
  border: 0;
  opacity: 1;
  inset-inline-end: 1rem;
  border-radius: 0;
  padding: 20px;
  position: fixed;
  bottom: 1rem;

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

/* Hover */
.back-to-top-link:hover {
  background-color: var(--cassiopeia-color-hover);
  transform: scale(1.05);
  opacity: 1;
}






/* ---------------------------------------------------
   ICON BARRIEREFREIHEIT 
--------------------------------------------------- */





i._access-icon._access {

    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
  

    background-image: url('/images/svg/barrierefrei.svg'); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;

    display: inline-block;
    width: 50px;
    height: 50px;

    transform: none !important;
}


/* ===================================================
   BOTTOM-B FOOTER + LOGIN
=================================================== */

.grid-child.container-bottom-b{
  /* Zentrale Padding-Variablen – hier bei Bedarf anpassen */
  --bottom-b-padding-y: 50px;  /* Desktop: oben/unten */
  --bottom-b-padding-x: 40px;  /* Desktop: links/rechts */

  padding: var(--bottom-b-padding-y) var(--bottom-b-padding-x);
  display: flex;
  gap: 80px;
  align-items: flex-start;
  justify-content: space-between;
}

/* Tablet (< 992px): volle Breite + gestapelte Spalten */
@media (max-width: 991.98px) {
  .grid-child.container-bottom-b {
    /* Padding für Tablet zentral steuern */
    --bottom-b-padding-y: 50px;
    --bottom-b-padding-x: 30px;

    padding: var(--bottom-b-padding-y) var(--bottom-b-padding-x);
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;              /* etwas kleinerer Abstand beim Stapeln */
    box-sizing: border-box;
  }

  .grid-child.container-bottom-b > * {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    box-sizing: border-box;
  }
}

/* Smartphone (< 768px): schmaleres Padding */
@media (max-width: 767.98px) {
  .grid-child.container-bottom-b {
    /* Padding für Smartphone zentral steuern */
    --bottom-b-padding-y: 40px;
    --bottom-b-padding-x: 20px;

    padding: var(--bottom-b-padding-y) var(--bottom-b-padding-x);
    gap: 30px;
  }
}

/* ===================================================
   LINKE INFO-SPALTE
=================================================== */

.footer-info{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

height:100%;

}


.footer-card{

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

padding:25px;

display:flex;

flex-direction:column;

height:100%;

}


.footer-card i{

font-size:2rem;

color:#009ee3;

margin-bottom:15px;

}


.footer-card h4{

color:#fff;

margin-bottom:20px;

font-size:1.4rem;

}


.footer-card p,
.footer-card li{

color:#fff;

line-height:1.8;

}


.footer-card ul{

list-style:none;

padding:0;

margin:0;

}


.footer-card a{

color:#fff;

text-decoration:none;

}


.footer-card a:hover{

color:#009ee3;

}


/* Tablet */

@media(max-width:992px){

.footer-info{

grid-template-columns:repeat(2,1fr);

}

}


/* Smartphone */

@media(max-width:768px){

.footer-info{

grid-template-columns:1fr;

}

}






/* ===================================================
   LOGIN
=================================================== */

.mod-login{
background:#0f172a;
max-width:340px;
margin:0 auto;
padding:5px;
}
/* Fomular */
.mod-login form{
display:flex;
flex-direction:column;
gap:10px;
}

/* Eingabefelder */
.mod-login .form-control{
height:45px;
padding:0 12px;
font-size:.95rem;

border:1px solid rgba(255,255,255,.15);
border-radius:0px;
background:#fff;
box-shadow:none;
}

/* Iconfelder */
.mod-login .input-group-text{
width:42px;
border:1px solid rgba(255,255,255,.15);
background:#fff;

}


/* Passwort anzeigen */
.mod-login .btn-secondary{
background:#fff;
border:1px solid rgba(255,255,255,.15);
}

/* Checkbox */
.mod-login .form-check{
margin:8px 0;
font-size:.9rem;
color: #fff;
}


/* Loginbutton */
.mod-login .btn-primary{
font-size:14px;
background:#009ee3;
}


/* Passkey ausblenden */
.mod-login .passkey-login{
display:none;
}

/* Passwort vergessen */
.mod-login .mod-login__options{
margin-top:15px;
}


.mod-login .mod-login__options ul{
list-style:none;
padding:0;
margin:0;
}


.mod-login .mod-login__options li{
margin:6px 0;
font-size:.9rem;
}

/* Links */
.mod-login a{
text-decoration:none;
}

/* Tablet */
@media(max-width:992px){
.mod-login{
max-width:100%;
}

}

/* Entfernt Firefox-Autofill-Hintergrund */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
    background-color: #cccccc !important; /* oder gewünschte Farbe */
    color: inherit !important;               /* Schriftfarbe beibehalten */
    
}




/* ---------------------------------------------------
   Sectionen + Sectionen Faden
--------------------------------------------------- */

.section-structure {
  background-color: #d1d1d1;
  border-top: 0px solid rgba(0,0,0,.05);
}

.section-spacing {
  padding-left: 3rem;
  padding-right: 2rem;
  }



/* Smooth Scroll für Anker */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Abstand wegen Header */
section {
  scroll-margin-top: 120px; /* ggf. an Headerhöhe anpassen */
}


/* ===== Fade-In beim Scroll ===== */
.fade-in{
  opacity:0;
  transform:translateY(40px);
  transition:all .8s ease;
}

.fade-in.visible{
  opacity:1;
  transform:translateY(0);
}



/* ===== Bootstrap Icon Bibliothek ===== */
.list-unstyled li {
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bi {
  color: #009ee3;
  font-size: 26px;
}



.btn i {
  margin-left: 6px;
  
}


.icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}




/* ===== Bootstrap ende Icon Bibliothek ===== */








/* ===== ANIMATIONEN ===== */
[data-animate] {
  opacity: 1;
  transform: none;

  .js [data-animate] {
  opacity: 0;
  transform: translateY(140px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s cubic-bezier(.2,.6,.2,1);
}

.js [data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}


  // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }



                             /* ===== bildposition testen Andra ===== */