/* ################################################################## */
/* NAVI ADD */
/* ################################################################## */

.cls-1 {
  animation: fill-animation 3s infinite;
  transition: fill 0.3s ease-in-out;
  stroke-width: 20;
  stroke: rgba(50, 50, 50, 0);
}
.cls-2 {
  fill: rgba(255, 255, 255, 1) !important;
}
@media screen and (max-width: 959px) {
  .cls-2 {
    fill: rgba(0, 0, 0, 1) !important;
  }
}
@keyframes fill-animation {
  0% { fill: rgba(172, 69, 72, 0.7); }
  50% { fill: rgba(172, 69, 72, 1); }
  100% { fill: rgba(172, 69, 72, 0.7); }
}
#OverTopHtmlContDIV {
  max-height: 200px;
  margin-top: 100px;
  padding: 0;
}
#OverTopHtmlContDIV svg {
  max-height: 100px;
}
#navigationV4 {
  margin-top: -40px;
}
@media screen and (max-width: 1268px) {
  #navigationV4 { margin-top: -60px; }
}
@media screen and (max-width: 1074px) {
  #navigationV4 { margin-top: -80px; }
}

/* ################################################################## */
/* #      TEIL 2: DARK-THEME - NUR AUF EBENE 1 ANGEWENDET           # */
/* ################################################################## */

/* 1. Nur der äußere Container wird dunkel gemacht */
#NavigationContainer {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 2. Standard-Aussehen NUR für die Listenelemente der ERSTEN EBENE. */
/* Der ">" Selektor stellt sicher, dass dies NICHT auf Ebene 2/3 wirkt. */
ul.FM_CSS_navigationV4 > li {
  width: 80%;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 2px auto;
  border-radius: 7px;
  outline: 1px dotted rgba(255, 255, 255, 0.3);
  outline-offset: -5px;
  transition: background-color 0.3s ease-in-out;
}

/* 3. Textfarbe NUR für die Links der ERSTEN EBENE */
ul.FM_CSS_navigationV4 > li > a,
ul.FM_CSS_navigationV4 > li > a span,
ul.FM_CSS_navigationV4 > li > a font {
  color: white;
  text-align: left;
  font-size: 1em;
  transition: color 0.2s ease-in-out;
}

/* 4. Hover-Effekt NUR für die Listenelemente der ERSTEN EBENE */
ul.FM_CSS_navigationV4 > li:hover {
  background-color: white;
}

/* 5. Schriftfarbe beim Hovern NUR für die Links der ERSTEN EBENE */
ul.FM_CSS_navigationV4 > li:hover > a,
ul.FM_CSS_navigationV4 > li:hover > a span,
ul.FM_CSS_navigationV4 > li:hover > a font {
  color: black;
}

/*
  WICHTIG: Es werden absichtlich KEINE Stile für die Untermenüs (ul ul, ul li, etc.) definiert.
  Dadurch wird sichergestellt, dass das ursprüngliche CSS für die zweite und
  dritte Ebene ohne Störungen funktioniert und alle Figuren, Hintergründe
  und Verhaltensweisen wie im Original erhalten bleiben.
*/

/* --- Aktiver Navigationspunkt (unverändert) --- */
#navactive {
  background-color: rgba(255, 255, 255, 0.25);
  background-image: url(/lib/imgAllg/dreieckUn.svg);
  background-position: 50% 5px;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.pnact1 {
  background-color: rgba(172, 69, 72, 0.8);
}


/*PfadNav überschreiben*/

#PFADnav {
  top:0px;

}

#PFADnav UL {
  margin:0.04em;
}
#PFADnav li {
  margin:0.1em
}


/* ###################Navigations-Symbole svg einbinden ueberschreiben Sass02 */


#navactive #icon-symbol1, #navactive #icon-symbol2, #icon-symbol1, #icon-symbol2 {
 /* -webkit-mask-image: url('/lib/202103/ms02Pics/icon-symbol.svg');
  mask-image: url('/lib/202103/ms02Pics/icon-symbol.svg');*/

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size: contain;
  mask-size: contain;

  background-color: currentColor; /* oder eine feste Farbe */
}


#icon-news, #navactive #icon-news,
#icon-warenkorb, #navactive #icon-warenkorb
{
  background-color: rgba(153,0,0,1); /* eigene Farbe */
}

/* -------UEBERSCHREIBEN ALLG VERSION FUER SASS02-VERSION ---- */

#navigationV4 li a > span {
  /* Erzwingt das Flexbox-Layout für die Ausrichtung */
  display: inline-flex;

  /* Richtet das Icon sauber an der ersten Textzeile aus (wichtig für Mehrzeiler) */
  align-items: flex-start;

  /* Definiert einen neuen, einheitlichen Abstand zwischen Icon und Text */
  gap: 0.4em;
  
  /* ERLAUBT explizit Zeilenumbrüche, indem 'nowrap' überschrieben wird */
  white-space: normal;

  /* Setzt eventuell vorhandene Innen- oder Außenabstände zurück */
  padding: 0;
  margin: 0;
}

/* Basis-Stile der Icons ueberschreiben
-------------------------------------------------------------------- */
#navigationV4 li a span [id^="icon-"] {
  /* Definiert eine feste, skalierbare Groeße, die für ALLE Icons gilt */
  width: 1.2rem;
  height: 1.2rem;

  /* Verhindert, dass das Icon schrumpft */
  flex-shrink: 0;
  
  /* Setzt explizit alle alten Abstaende zurueck, damit nur noch 'gap' wirkt */
  margin: 0;
  
  /* Setzt die alte vertikale Ausrichtung zurueck, da Flexbox dies nun steuert */
  vertical-align: initial; 
}

/*###################### Navigations-Symbole svg einbinden ueberschreiben Sass02 ENDE */



/*NAVI ADD ENDE*/




#SlideShowContainer {
    margin-bottom: 2%;
}
#SlideShowContDiv {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#TopLogo img {
    margin-left: auto;
    margin-right: auto;
  max-width: 80%;
}

/* ===== SLOGAN ===== */
#Slogan {
    display: flex;
    flex-direction: row;       /* Standard: nebeneinander */
    gap: 1em;                  /* Abstand nebeneinander */
    padding: 0.5em;
}

/* gemeinsame Basis für die drei Divs */
#SloganButton,
#SloganEmail,
#SloganTel {
    flex: 1;
    max-height: 40px;
    box-sizing: border-box;
    display: flex;             /* für Textzentrierung */
    align-items: center;       /* vertikal zentrieren */
    justify-content: center;   /* horizontal zentrieren */
    text-align: center;
    padding: 5px 20px;
}

/* Button spezifisch */
#SloganButton {
    background: #000;
    color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
}

/* Link im Button */
#SloganButton a {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

/* Untereinander für Bildschirme kleiner 959px */
@media (max-width: 1140px) {
    #Slogan {
        flex-direction: column;
        gap: 4px;            /* Abstand untereinander */
        min-width: 300px;
    }

    #SloganButton,
    #SloganEmail,
    #SloganTel,
    #SloganButton a,
    #SloganEmail a,
    #SloganTel a{
        background-color: white;
        color: black;
        width: 100%;          /* volle Breite */
        border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
      
    }
}
/*SLOGAN ENDE*/

/*HINTERGRUENDE */
.primaryContainer0,
.primaryContainer2,
.primaryContainer3,
.primaryContainer6,
.primaryContainer10,
.primaryContainer21,
.primaryContainer99
{
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 100%;
/*	background: url("../ms02Pics/hint2.jpg") no-repeat center center fixed;*/
      background-color: rgba(100,100,100,1); /*blau gerastert*/
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
    position: relative;
    
    
      -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    
    -webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
    
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
  animation-name: fadeIn;
    
   
}


/*HINTERGRUENDE ENDE */


#ContStartseiteHTMLDiv {
    clear: both;
    padding: 1%;
    font-size: 1.1em;
    line-height: 1.4em;
	background-color: rgba(255,255,255,0.2);
	
}



/*############################################# 959 */
/*mobile HINTERGRÜNDE*/
@media screen and (max-width: 959px) {
   
	body {
		background-color: #000;
	}
    
  #TOP {
    background-color: rgba(50,50,50,1)
  }
 
}

/*mobile HINTERGRUENDE ENDE */