/* === Basis / Reset === */

.exo-menu { margin: 2px 0 0 0; padding: 0 !important; }

.exo-menu .navilo,

.exo-menu .navilo ul { margin: 0 !important; padding: 0 !important; list-style: none; }



/* === Ebene 1 (ul.navilo) – horizontal & rechtsbündig === */

.exo-menu .navilo {

  display: flex;

  justify-content: flex-end;   /* rechts ausrichten */

  gap: 6px;

}

.exo-menu .navilo > li { position: relative; }

.exo-menu .navilo > li > a {

  display: block;

  padding: 8px 12px;

  font-size: 1.2rem;

  text-decoration: none;       /* kein Unterstreichen */

  color: #fff;

}

.exo-menu .navilo > li > a:hover,

.exo-menu .navilo > li.active > a,

.exo-menu .navilo > li.aktiv-item > a {

  background: #f06f16;

  color: #fff !important;

}



/* === Dropdowns – gemeinsame Regeln (Ebene 2 & 3) === */

.exo-menu .navilo li ul {

  position: absolute;

  display: none;

  z-index: 300;

  text-align: left;            /* linksbündig */

  min-width: 240px;

}

.exo-menu .navilo li:hover > ul { display: block; }



/* Ebene 2 (.sub2) */

.exo-menu .navilo > li > ul.sub2 {

  position: absolute;

  top: 100%;

  left: 0;

  background: #e96c07;

  border-top: 2px solid #000;

}

.exo-menu .navilo > li > ul.sub2 > li > a {

  display: block;

  padding: 9px 14px;

  text-decoration: none;       /* kein Unterstreichen */

  color: #fff;

}

.exo-menu .navilo > li > ul.sub2 > li > a:hover {

  background: #000;

  color: #fff !important;

}



/* FIX: Anker für sub3-Positionierung */

.exo-menu .navilo ul.sub2 > li {

  position: relative;

}



/* Ebene 3 (.sub3) */

.exo-menu .navilo ul.sub2 > li > ul.sub3 {

  top: 0;

  left: 100%;

  min-width: 200px;

  background: #fff;

}

.exo-menu .navilo ul.sub2 > li > ul.sub3 > li > a {

  display: block;

  padding: 8px 12px;

  font-size: 13px;

  text-decoration: none;       /* kein Unterstreichen */

  color: #323232;

}

.exo-menu .navilo ul.sub2 > li > ul.sub3 > li > a:hover {

  background: #f06f16;

  color: #fff;

}



/* === Pfeile automatisch bei LI, die ein UL enthalten (ohne HTML-Änderung) === */

@supports selector(li:has(> ul)) {

  .exo-menu .navilo li:has(> ul) > a {

    position: relative;

    padding-right: 24px;       /* Platz für Pfeil */

  }

  .exo-menu .navilo li:has(> ul) > a::after {

    content: "▾";              /* Level 1/2 nach unten */

    position: absolute;

    right: 8px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 0.8em;

    opacity: 0.85;

  }

  /* Bei verschachtelten Menüs (Level 3) Pfeil nach rechts */

  .exo-menu .navilo ul.sub2 > li:has(> ul.sub3) > a::after { content: "▸"; }



  .exo-menu .navilo li:hover:has(> ul) > a::after {

    transform: translateY(-50%) rotate(180deg); /* klappt um */

  }

}



/* === Active-Zustände in Submenüs === */

.exo-menu .navilo ul.sub2 > li.active > a,

.exo-menu .navilo ul.sub2 > li.aktiv-item > a {

  background: #e96c07;

  color: #fff !important;

}

.exo-menu .navilo ul.sub3 > li.active > a,

.exo-menu .navilo ul.sub3 > li.aktiv-item > a {

  background: #f06f16 !important;

  color: #fff !important;

}









.iconmenu {padding: 0px 0 0px;}

.iconmenu .grafikelement { flex-grow: 1; padding: 4px 0 0;}



.iconmenu .col {display: inline-flex; padding: 0 20%;}



.iconmenu .ce-bodytext {text-align: center; font-size: 15px;}


.mm-menu_theme-dark {background: #55565a !important; --mm-color-background: #1e92a7 !important;}



.mm-menu_theme-dark {background: #55565a !important; --mm-color-background: #55565a !important;}





/* Hauptmenü-Container */

.topmenu {

    float: right;

    margin-top: 4px;

    position: relative;

}





.topmenu .sub2 li {width: 100%;}



.topmenu::after {

    content: "";

    display: table;

    clear: both;

}



/* Hauptmenü-Listen */

.topmenu ul {

    color: #000;

    float: right;

    margin: 0px 0 14px 0;

    padding: 0;

    list-style: none;

    background: none;

}



/* Hauptmenü-Einträge */

.topmenu li {

    position: relative;

    float: left;

    margin: 0 10px 0 0;

    width: fit-content;

    list-style: none;

}



/* Hauptmenü-Links */

.topmenu a {

    font-size: 1rem;

    padding: 4px 10px;

    color: #fff;

    text-decoration: none;

    border: 1px solid #e96c07;

    display: block;

}



/* Hover auf Hauptmenü */

.topmenu a:hover {

    background: #e96c07;

    color: #fff;

}



/* ▼ Pfeil beim Menüpunkt mit Untermenü */

.topmenu li:has(ul.sub2) > a::after {

    content: " ▼";

    font-size: 0.7em;

    color: #fff;

    margin-left: 5px;

}



/* Untermenü */

.topmenu li ul.sub2 {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background: #f06f16; /* Orange Hintergrund */

    padding: 0;

    margin: 0;

    width: 100%;          /* gleiche Breite wie Eltern-Menüpunkt */

    font-size: 0.9rem;    /* Schrift kleiner */

    z-index: 1000;

}



/* Untermenü bei Hover sichtbar */

.topmenu li:hover ul.sub2 {

    display: block;

}



/* Untermenü-Einträge */

.topmenu li ul.sub2 li {

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

}



.topmenu li ul.sub2 li:last-child {

    border-bottom: none;

}



/* Untermenü-Links */

.topmenu li ul.sub2 li a {

    display: block;

    width: 100%;

    padding: 8px 12px;

    color: #fff;

    text-decoration: none;

    box-sizing: border-box;

    white-space: nowrap;

	font-size: 0.9rem;

}



/* Hover auf Untermenü-Links */

.topmenu li ul.sub2 li a:hover {

    background-color: #e96c07; /* dunkleres Orange beim Hover */

    color: #fff;

}





.exo-menu{

		list-style: none;

	position:relative;

	background: none;

}

.exo-menu > li {	display: inline-block;float:left;}







#hamburger {



    opacity: .95;

    display: block;

    width: auto;

    height: 45px;

    position: absolute;

    top: -4px;

    left: 0;

    z-index: 15;

}





.mburger:hover {color:#454545 !important;}

.mburger {

 --mb-button-size:60px;

 --mb-bar-width:0.6;

 --mb-bar-height:4px;

 --mb-bar-spacing:10px;

 --mb-cross-timeout:0.4s;

 background:0 0;

 border:none;

 border-radius:0;

 color:inherit;

 display:inline-block;

 position:relative;

 box-sizing:border-box;

 height:var(--mb-button-size);

 padding:0 0 0 var(--mb-button-size);

 margin:0;

 line-height:var(--mb-button-size);

 vertical-align:middle;

 appearance:none;

 outline:0;

 cursor:pointer;

	 color:#fff;

}

.mburger b {

 display:block;

 position:absolute;

 left:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2));

 width:calc(var(--mb-button-size) * var(--mb-bar-width));

 height:var(--mb-bar-height);

 border-radius:calc(var(--mb-bar-height)/ 2);

 background:currentColor;

 color:inherit;

 opacity:1

}

.mburger b:nth-of-type(1) {

 bottom:calc(50% + var(--mb-bar-spacing));

 transition:bottom .2s ease,transform .2s ease

}

.mburger b:nth-of-type(2) {

 top:calc(50% - (var(--mb-bar-height)/ 2));

 transition:opacity .2s ease

}

.mburger b:nth-of-type(3) {

 top:calc(50% + var(--mb-bar-spacing));

 transition:top .2s ease,transform .2s ease

}

.mburger span:not(:empty) {

 padding-right:calc(var(--mb-button-size) * ((1 - var(--mb-bar-width))/ 2))

}

.mm-wrapper_opened .mburger b:nth-of-type(1) {

 bottom:calc(50% - (var(--mb-bar-height)/ 2));

 transform:rotate(45deg)

}

.mm-wrapper_opened .mburger b:nth-of-type(2) {

 opacity:0

}

.mm-wrapper_opened .mburger b:nth-of-type(3) {

 top:calc(50% - (var(--mb-bar-height)/ 2));

 transform:rotate(-45deg)

}

.mburger--collapse b:nth-of-type(1) {

 transition:bottom .2s ease,margin .2s ease,transform .2s ease;

 transition-delay:.2s,0s,0s

}

.mburger--collapse b:nth-of-type(2) {

 transition:top .2s ease,opacity 0s ease;

 transition-delay:.3s,.3s

}

.mburger--collapse b:nth-of-type(3) {

 transition:top .2s ease,transform .2s ease

}

.mm-wrapper_opened .mburger--collapse b:nth-of-type(1) {

 bottom:calc(50% - var(--mb-bar-spacing) - var(--mb-bar-height));

 margin-bottom:calc(var(--mb-bar-spacing) + (var(--mb-bar-height)/ 2));

 transform:rotate(45deg);

 transition-delay:calc(var(--mb-cross-timeout) + .1s),calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)

}

.mm-wrapper_opened .mburger--collapse b:nth-of-type(2) {

 top:calc(50% + var(--mb-bar-spacing));

 opacity:0;

 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)

}

.mm-wrapper_opened .mburger--collapse b:nth-of-type(3) {

 top:calc(50% - (var(--mb-bar-height)/ 2));

 transform:rotate(-45deg);

 transition-delay:calc(var(--mb-cross-timeout) + .3s),calc(var(--mb-cross-timeout) + .3s)

}

.mburger--spin b:nth-of-type(1) {

 transition-delay:.2s,0s

}

.mburger--spin b:nth-of-type(2) {

 transition-duration:0s;

 transition-delay:.2s

}

.mburger--spin b:nth-of-type(3) {

 transition-delay:.2s,0s

}

.mm-wrapper_opened .mburger--spin b:nth-of-type(1) {

 transform:rotate(135deg);

 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)

}

.mm-wrapper_opened .mburger--spin b:nth-of-type(2) {

 transition-delay:calc(var(--mb-cross-timeout) + 0s)

}

.mm-wrapper_opened .mburger--spin b:nth-of-type(3) {

 transform:rotate(225deg);

 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .2s)

}

.mburger--squeeze b:nth-of-type(1) {

 transition-delay:.1s,0s

}

.mburger--squeeze b:nth-of-type(2) {

 transition-delay:.1s

}

.mburger--squeeze b:nth-of-type(3) {

 transition-delay:.1s,0s

}

.mm-wrapper_opened .mburger--squeeze b:nth-of-type(1) {

 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)

}

.mm-wrapper_opened .mburger--squeeze b:nth-of-type(2) {

 transition-delay:calc(var(--mb-cross-timeout) + 0s)

}

.mm-wrapper_opened .mburger--squeeze b:nth-of-type(3) {

 transition-delay:calc(var(--mb-cross-timeout) + 0s),calc(var(--mb-cross-timeout) + .1s)

}

.mburger--tornado b:nth-of-type(1) {

 transition:bottom .2s ease,transform .2s ease;

 transition-delay:.2s

}

.mburger--tornado b:nth-of-type(2) {

 transition:opacity 0s ease,transform .2s ease;

 transition-delay:.1s,.1s

}

.mburger--tornado b:nth-of-type(3) {

 transition:top .2s ease,transform .2s ease;

 transition-delay:0s

}

.mm-wrapper_opened .mburger--tornado b:nth-of-type(1) {

 transform:rotate(-135deg);

 transition-delay:calc(var(--mb-cross-timeout) + 0s)

}

.mm-wrapper_opened .mburger--tornado b:nth-of-type(2) {

 opacity:0;

 transform:rotate(-135deg);

 transition-delay:calc(var(--mb-cross-timeout) + .4s),calc(var(--mb-cross-timeout) + .1s)

}

.mm-wrapper_opened .mburger--tornado b:nth-of-type(3) {

 transform:rotate(-225deg);

 transition-delay:calc(var(--mb-cross-timeout) + .2s)

}







.mobieposition {font-size: 30px; }

.mobieposition a {float: left; color:#404040; }

.mobieposition p {position: absolute; left: 39px; top: 9px;}





.mobieposition {

z-index: 1000000;

position: absolute;

margin: 0px 6px 1px 13px;

 

}



.exo-menu .navilo > li > ul.sub2 {

    margin-top: 2px;

}



/* === Design-Upgrade: Schatten & Tiefenwirkung === */

.exo-menu .navilo > li > ul.sub2 {

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}

.exo-menu .navilo ul.sub2 > li > ul.sub3 {

  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.2);

}



/* === Design-Upgrade: Typografie === */

.exo-menu .navilo > li > ul.sub2 > li > a {

  font-size: 0.95rem;

  letter-spacing: 0.02em;

  font-weight: 500;

}

.exo-menu .navilo ul.sub2 > li > ul.sub3 > li > a {

  font-size: 0.875rem;

  letter-spacing: 0.01em;

  color: #444;

}


/* ============================================================
   Mobile Hamburger-Menü (mmenu, #my-menu) – Struktur-Update 07/2026
   Das Overlay wird von mmenu.js automatisch aus der Haupt-Navigation
   (ul.navilo) generiert -> Reihenfolge entspricht bereits 1:1 der
   Desktop-Navigation. Es ist daher keine TYPO3-/HTML-Änderung nötig,
   nur die folgenden CSS-Ergänzungen.
   ============================================================ */

/* --- Impressum, AGB, Datenschutzerklärung aus dem Menü-Overlay
   entfernen. Bleiben unverändert im Footer sichtbar. --- */
#my-menu .navilo.mm-listview > li:has(> a.mm-listitem__text[href="/impressum"]),
#my-menu .navilo.mm-listview > li:has(> a.mm-listitem__text[href="/agb"]),
#my-menu .navilo.mm-listview > li:has(> a.mm-listitem__text[href="/datenschutzerklaerung"]) {
  display: none !important;
}

/* --- Produktgruppe (Maschinen, Brenner, Automatikschweißhelme,
   Absaugtechnik) als kräftige, farbige Blöcke absetzen. Die Farbe
   übernimmt die Gruppierung – keine zusätzliche Trennlinie nötig
   (vermeidet den "doppelte Linie"-Effekt der Vorversion). --- */
#my-menu .navilo.mm-listview > li:has(> a.mm-btn--next) {
  background: #e96c07;
}

#my-menu .navilo.mm-listview > li:has(> a.mm-btn--next) > a.mm-listitem__text {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Pfeil-Icon der Produktkategorien in Weiß (statt Standard-Grau) */
#my-menu .navilo.mm-listview > li:has(> a.mm-btn--next) > a.mm-btn--next::after {
  border-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.95) rgba(255, 255, 255, 0.95) rgba(255, 255, 255, 0.55) !important;
}

/* Tap-/Hover-Feedback: sichtbar dunkler als der Grundton */
#my-menu .navilo.mm-listview > li:has(> a.mm-btn--next):hover,
#my-menu .navilo.mm-listview > li:has(> a.mm-btn--next):active {
  background: #c9560f;
}

/* Dezente Trennlinien zwischen den 4 Produktkategorien selbst
   (Maschinen/Brenner/Automatikschweißhelme, nicht nach Absaugtechnik –
   dort übernimmt der Schatten unten den Übergang). --- */
#my-menu .navilo.mm-listview > li:nth-child(-n+3):has(> a.mm-btn--next) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

/* Schatten-Übergang am Ende der Produktgruppe (Absaugtechnik) statt einer
   harten Linie zur zweiten Gruppe – etwas kräftiger als zuvor, damit er
   sichtbarer ist. --- */
#my-menu .navilo.mm-listview > li:nth-child(4) {
  box-shadow: inset 0 -6px 10px -3px rgba(0, 0, 0, 0.5);
}

/* --- Etwas Luft vor der zweiten Gruppe (Unternehmen, Partner,
   Ansprechpartner, Service, Kontakt/Anfahrt, Download Center).
   Hinweis: nth-child(5) setzt die aktuelle, live geprüfte Reihenfolge
   voraus – bei Änderung der Hauptnavigation ggf. anpassen. --- */
#my-menu .navilo.mm-listview > li:nth-child(5) {
  margin-top: 8px;
}

/* --- Restliche Punkte (Unternehmen, Partner, Ansprechpartner, Service,
   Kontakt/Anfahrt, Download Center): dunkles Grau statt Schwarz, mit
   Trennlinien zwischen den Zeilen und einem Schatten ähnlich der
   Produkt-Untermenüs, damit sie sich als eigener Block absetzen. Schrift
   genauso fett wie bei den 4 Produktkategorien oben. --- */
#my-menu .navilo.mm-listview > li:not(:has(> a.mm-btn--next)) {
  background: #333333;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#my-menu .navilo.mm-listview > li:not(:has(> a.mm-btn--next)):last-child {
  border-bottom: none;
}

#my-menu .navilo.mm-listview > li:not(:has(> a.mm-btn--next)) > a.mm-listitem__text {
  color: #fff;
  font-weight: 700;
}

/* Hover UND Active, damit der Farbwechsel wie bei den 4 Produktkategorien
   auch beim reinen Drüberfahren (nicht nur beim Antippen) sichtbar wird. */
#my-menu .navilo.mm-listview > li:not(:has(> a.mm-btn--next)):hover,
#my-menu .navilo.mm-listview > li:not(:has(> a.mm-btn--next)):active {
  background: #555555;
}

/* --- Mobile Untermenüs (Level 2) der Produktkategorien: gleiches
   helleres Orange wie am Desktop. --- */
#my-menu .sub2.mm-listview > li {
  background: #f5a35a;
}

#my-menu .sub2.mm-listview > li > a.mm-listitem__text {
  color: #2c1400;
  font-weight: 600;
}

#my-menu .sub2.mm-listview > li:hover,
#my-menu .sub2.mm-listview > li:active {
  background: #ef8f3a;
}

/* --- Mobile Untermenüs (Level 3, z. B. einzelne Modelle unter einer
   Marke): dieselben Features wie Level 2 – gleiches Orange, gleiche
   Schrift, gleicher Tap-Zustand. --- */
#my-menu .sub3.mm-listview > li {
  background: #f5a35a;
}

#my-menu .sub3.mm-listview > li > a.mm-listitem__text {
  color: #2c1400;
  font-weight: 600;
}

#my-menu .sub3.mm-listview > li:hover,
#my-menu .sub3.mm-listview > li:active {
  background: #ef8f3a;
}


/* ============================================================
   Desktop-Hauptmenü (.exo-menu .navilo) – dieselbe Farblogik wie
   im mobilen Menü: Produktkategorien mit Untermenü sind dauerhaft
   farbig hinterlegt statt nur bei Hover, damit die Menüleiste
   insgesamt präsenter wirkt.
   ============================================================ */
@supports selector(li:has(> ul)) {
  .exo-menu .navilo > li:has(> ul) > a {
    background: #e96c07;
    color: #fff;
    font-weight: 700;
  }

  /* Deutlich sichtbarer Hover-/Active-Zustand, abgesetzt vom Grundton */
  .exo-menu .navilo > li:has(> ul) > a:hover,
  .exo-menu .navilo > li:has(> ul).active > a,
  .exo-menu .navilo > li:has(> ul).aktiv-item > a {
    background: #f06f16;
  }
}

/* Die 4 Produktkategorien liegen im DOM in .exo-menu; die übrigen Punkte
   (Unternehmen, Partner, Ansprechpartner, Service, Kontakt/Anfahrt,
   Download Center) liegen in einer eigenen Liste .topmenu direkt daneben.
   Auch diese bekommen jetzt ein explizites Schwarz + weiße Schrift, statt
   sich nur auf den Hintergrund der Kopfzeile zu verlassen. Selektor
   entspricht bewusst der Basisregel .topmenu a, damit der bestehende
   Hover-Zustand (.topmenu a:hover, höhere Spezifität) weiterhin greift. */
.topmenu a {
  background: #333333;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* --- Desktop-Untermenüs (Level 2) der Produktkategorien: helleres
   Orange als die 4 Hauptkategorien, damit die Ebenen klar auseinander-
   gehalten werden können. --- */
.exo-menu .navilo > li > ul.sub2 {
  background: #f5a35a;
}

.exo-menu .navilo > li > ul.sub2 > li > a {
  color: #2c1400;
}

/* --- Desktop-Untermenüs (Level 3): dieselben Features wie Level 2 –
   gleiches Orange, gleiche Schriftfarbe. Der bestehende Hover-Zustand
   (siehe weiter oben, .sub3 > li > a:hover { background:#f06f16 }) bleibt
   als Feedback erhalten. --- */
.exo-menu .navilo ul.sub2 > li > ul.sub3 {
  background: #f5a35a;
}

.exo-menu .navilo ul.sub2 > li > ul.sub3 > li > a {
  color: #2c1400;
}

/* ============================================================
   Mobile Menü-Kopfzeile: "Menu" -> "Menü", etwas sichtbarer.
   mmenu.js schreibt den Panel-Titel per JS in <span> hinein, ein
   HTML-/JS-Zugriff auf das Wort selbst ist uns hier nicht möglich –
   daher per CSS ersetzt. Der Titel-Link hat nur auf der Startebene
   (Wurzel-Panel, Beschriftung "Menü") kein href-Attribut; sobald man
   in eine Kategorie/Untermenü wechselt, bekommt er href="#mm-x" und
   zeigt dort korrekt den jeweiligen Kategorienamen (z. B. "Maschinen")
   – der Selektor :not([href]) trifft daher wirklich nur auf "Menü". */
#my-menu .mm-navbars--top .mm-navbar__title:not([href]) {
  color: rgba(0, 0, 0, 0.75);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
}

#my-menu .mm-navbars--top .mm-navbar__title:not([href]) span {
  visibility: hidden;
  position: relative;
  display: inline-block;
}

#my-menu .mm-navbars--top .mm-navbar__title:not([href]) span::before {
  content: "Menü";
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}