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

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



/* == 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: #979797;
    padding: 50px;
    color: #fff;
}

/* Tablet */
@media (max-width:992px){

  .grid-child.container-component main{
      padding:30px;
  }

}

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

  .grid-child.container-component main{
      padding:20px;
  }

}


.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%;
    background-color: #ccc;
}

.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;
}


/* --- Eyecatcher 'Roby' exakt positionieren + schwebend machen--- */
/* --- Eyecatcher Basis-Setup (Große Desktop-Monitore ab 1200px) --- */

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

.header-eyecatcher {
  position: absolute !important;
  left: 50%;                  
  transform: translate(-50%, -40%);
  top: -25px;                 
  z-index: 2;   
  pointer-events: none;       
  
}

.header-eyecatcher img {
  max-width: 290px; /* Standardgröße Desktop */
  height: auto;
  display: block;
}


/* ==========================================================================
   Eyecatcher 'Robby' MEDIA QUERIES FÜR VERSCHIEDENE GERÄTECLASSEN
   ========================================================================== */

/* 1. NOTEBOOKS & LAPTOPS (Bildschirme von 992px bis 1199px) */
@media (max-width: 1199.98px) {
  .header-eyecatcher {
    /* Hier die Margins oder Top-Werte für Notebooks anpassen */
    margin-left: 60px;
    margin-top: 0px;
    top: 0px;
  }
  .header-eyecatcher img {
    max-width: 240px; /* Grafik auf Notebooks leicht verkleinern */
  }
}

/* 2. TABLETS (Bildschirme von 768px bis 991px) */
@media (max-width: 991.98px) {
  .header-eyecatcher {
    /* Auf Tablets verschiebt sich oft das Menü (Hamburger-Button) */
    margin-left: 80px;
    margin-top: 80px;
    top: -15px;
  }
  .header-eyecatcher img {
    max-width: 190px; /* Grafik für Tablets optimieren */
  }
}

/* 3. SMARTPHONES (Kleine Bildschirme unter 768px) */
@media (max-width: 767.98px) {
  .header-eyecatcher {
    /* Auf dem Smartphone empfiehlt sich meistens eine komplett zentrierte Position ohne großen Links-Versatz */
    margin-left: 0px; 
    margin-top: 50px;
    top: -10px;
  }
  .header-eyecatcher img {
    max-width: 200px; /* Deutlich kleiner auf Handys, um nichts zu verdecken */
  }
}




/* ==========================
   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:220px; /* leicht rechts von deiner Schräge */
  bottom:10px;
  color:#fff;
  font-size:1.5rem;
  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;
}


.container-header .mod-menu {
  color: rgb(3, 51, 71);
  list-style-image: none;
  flex: 0 1 auto;      /* Verhindert, dass die Liste 100% Breite erzwingt */
  margin-right: 60px;  /* Schafft Platz auf der rechten Seite für den Button */
  background-color: #c6c6c6;
}



/* 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 ------- */






/* --- 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 {
  font-family: "Roboto", sans-serif;
  font-size: var(--h1-size);
  font-weight: 300; /* Bold */
  line-height: var(--lh-tight);
}

h2 {
  font-family: "Roboto", sans-serif;
  font-size: var(--h2-size);
  font-weight: 300; /* SemiBold */
  line-height: var(--lh-tight);
}

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

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 Styling==== */



/* Spezifischer Selektor, um template.min.css zu dominieren */
div.contact-form-custom form#contact-form-2.form-validate {
    background: #f9f9f947;
    padding: 20px;
    border-radius: 0px;
    border: 1px solid #e0e0e0;
}

/* Styling der Label */
.contact-form-custom .form-label label {
    font-family: "Roboto", sans-serif;
    font-size: var(--h5-size);
    font-weight: 300; /* Medium */
    line-height: var(--lh-normal);
    margin-bottom: 5px;
    display: block;
    color: #333;
}

/* Eingabefelder anpassen und Bootstrap-Overrides */
.contact-form-custom .form-control-wrap input,
.contact-form-custom .form-control-wrap textarea,
.contact-form-custom .form-control-wrap select {
    width: 100% !important; /* Erzwingt volle Breite gegen Tmpl-Defaults */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 0px;
    transition: border-color 0.3s ease;
}

/* Fokus-Effekt */
.contact-form-custom .form-control-wrap input:focus,
.contact-form-custom .form-control-wrap textarea:focus {
    border-color: #007bff; /* Deine Wunschfarbe */
    outline: none;
    box-shadow: 0 0 5px rgba(0,123,255,0.25);
}

/* Button-Styling (spezifisch für das Modul in bottom-a) */
[class*="parent-bottom-a"] .contact-form-custom .btn-primary {
    background-color: #0056b3;
    border: none;
    padding: 10px 25px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Fehlermeldungen bei Validierung */
.contact-form-custom .invalid {
    border-color: #dc3545 !important;
}





/* ====Ende Formular Styling==== */











/* ===== 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: 40px;
  margin-bottom: 20px;
  color: #0f172a;
}

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





/* 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{
  background:#36454f;
  padding:50px 40px;

  display:flex;
  gap:80px;
  align-items:flex-start;
  justify-content:space-between;
}

/* Linke Spalte */
.grid-child.container-bottom-b > .mod-custom{
  flex:1.2;
}

/* Rechte Spalte */
.grid-child.container-bottom-b > .mod-login{
  flex:0 0 420px;
}


/* ===================================================
   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 {
  display: flex;
  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) { ... }