/* Kopfnavigation fuer 6 Reiter — Better Safe — v5, Stand 2026-07-22 ================================================================== NEUER DATEINAME. Im Theme v4 abwaehlen, v5 anhaken. FIX ggue. v4: Der Scrim (dunkler Verlauf) hing an JEDEM ".main_navigation". Das Dropdown-Untermenue steckt aber in einem ZWEITEN .main_navigation- Container -> es bekam denselben Verlauf und lugte als graues Kaestchen unter "Leistungen" hervor, auch wenn das Menue zu war. v5 haengt Scrim + position:relative NUR an die AEUSSERE Kopfzeile (#nav_main > .main_navigation), nicht ans innere Dropdown. Graues Kaestchen weg. Umsetzung des Council-Urteils ("freigabereif nach kleinen Korrekturen"): (A) Der Farb-Mix rechts (dunkel/weiss/weiss) wirkte wie ein Fehler und Leistungen war ungeschuetzt dunkel. FIX AN DER WURZEL: ein dezenter dunkler VERLAUF ("Scrim") hinter der ganzen Kopfzeile -> danach sind ALLE Reiter EINHEITLICH WEISS und ueberall lesbar, egal wo die Foto/Lila-Kante gerade steht. Keine .auf-lila-Sonderfaerbung mehr noetig. (B) Typo eine Stufe leiser (CI "nie laut"): Gewicht 700 -> 600, Sperrung moderat. Grossbuchstaben bleiben. Bleibt aus v3: Flex-Reihe (nur level_1) + Dropdown fest an Leistungen. CONTAO: Die CSS-Klasse "auf-lila" bei Service/Kontakt kann bleiben (wirkt jetzt nicht mehr, stoert aber nicht) oder entfernt werden. ⚠️ Der Scrim dunkelt den oberen Hero-Rand leicht ab (uebliche, ruhige Hero-Technik). In der Vorschau bei mehreren Breiten pruefen, dann Freigabe. */ /* 1) LAYOUT: nur die oberste Reihe flexibel (NICHT das Dropdown) */ #nav_main .main_navigation ul.level_1.desktop_nav{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important; gap:clamp(14px, 2.2vw, 36px) !important; } #nav_main .main_navigation ul.level_1.desktop_nav > li{ width:auto !important; margin:0 !important; flex:0 0 auto !important; white-space:nowrap !important; } #nav_main .main_navigation ul.level_1.desktop_nav > li:nth-child(3){ margin-top:-14px !important; } #nav_main .main_navigation ul.level_1.desktop_nav > li:nth-child(4){ position:static !important; right:auto !important; } /* 2) DROPDOWN fest unter "Leistungen" verankern (aus v3) */ #nav_main .main_navigation ul.level_1.desktop_nav > li.submenu{ position:relative !important; } #nav_main .main_navigation ul.level_1.desktop_nav > li.submenu > .main_navigation > ul.level_2{ left:0 !important; right:auto !important; } /* 3) SCRIM: dezenter dunkler Verlauf hinter der Kopfzeile -> weisser Text ueberall lesbar. NUR die AEUSSERE Kopfzeile (direktes Kind von #nav_main), damit das innere Dropdown-.main_navigation KEINEN Verlauf bekommt. */ #nav_main > .main_navigation{ position:relative !important; } #nav_main > .main_navigation::before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:200px !important; background:linear-gradient(180deg, rgba(22,11,38,.42) 0%, rgba(22,11,38,.22) 45%, rgba(22,11,38,0) 100%) !important; z-index:0 !important; pointer-events:none !important; } /* Nav-Inhalt ueber den Scrim heben */ #nav_main .main_navigation ul.level_1.desktop_nav{ position:relative !important; z-index:1 !important; } /* Im gescrollten weissen Header KEIN Scrim */ #nav_main > .main_navigation.scroll::before{ display:none !important; } /* 4) ALLE Reiter einheitlich WEISS (+ knapper Schatten als Zusatz-Sicherung) */ #nav_main .main_navigation ul.level_1.desktop_nav > li > a, #nav_main .main_navigation ul.level_1.desktop_nav > li > strong{ color:#ffffff !important; text-shadow:0 1px 2px rgba(20,10,35,.40) !important; /* Typo leiser: nicht Fett+Grossschrift+weite Sperrung stapeln */ font-weight:600 !important; letter-spacing:1px !important; } /* 5) Gescrollter weisser Header: alle Reiter dunkel, kein Schatten */ #nav_main .main_navigation.scroll ul.level_1.desktop_nav > li > a, #nav_main .main_navigation.scroll ul.level_1.desktop_nav > li > strong{ color:#592c82 !important; text-shadow:none !important; } /* Dropdown-Menue Leistungen (Better Safe) — v12, Stand 2026-07-23 ================================================================== NEUER DATEINAME (Safari cacht nach Name -> v12 laedt garantiert frisch). Im Theme die externe Stylesheet-Zuweisung von v11 auf v12 umstellen. NEU ggue. v10: HOVER-SLIDE ENTFERNT. Der DOM-Inspektor hat gezeigt: v10s Einzug-Haertung greift (Ruhezustand ist buendig). Der verbleibende "leichte Einzug" war der GEHOVERTE Punkt, den der Hover-Effekt 4px nach rechts schob. v11 laesst den Text beim Hover exakt stehen (nur Hintergrund + gruene Kante aendern sich) -> keine scheinbare Verschiebung mehr, auch nicht bei Zutrittskontrolle. ------------------------------------------------------------------------ NEU ggue. v9: ALIGNMENT-HAERTUNG (Abschnitt 6c weiter unten). "Zutrittskontrolle" blieb leicht eingerueckt, obwohl der Balken schon ein Innenschatten ist. Ursache liegt im Markup dieses einen Eintrags (Contao baut dort ein zusaetzliches Element ein). v10 erzwingt den Einzug mit hoeherer Spezifitaet als jede Theme-Regel UND neutralisiert alle inneren span/strong-Elemente -> alle 6 Punkte starten garantiert exakt gleich. ------------------------------------------------------------------------ v9 = v8 (Geist weg + bleibt offen) + Alignment-Fix + CI-Politur aus dem Experten-Panel (Marke / UX / Conversion / Accessibility). Alles CSS-only, kein Markup-Umbau. Kalibriert auf die CI: "ruhig, seriös, nie werblich, nicht nach Agentur/KI". NEU ggue. v8: (1) ALIGNMENT-FIX: der Akzentbalken ist jetzt ein INNENSCHATTEN statt eines Rahmens -> "Zutrittskontrolle" (als /aktive Seite gerendert) sitzt exakt gleich wie die Links. Verschachteltes wird zusaetzlich neutralisiert. (2) CI-GRUEN korrigiert: #7cbf3f -> kanonisch #80BC00. Gruen NUR als schmale Interaktions-Kante, nie als Text/Flaeche. (3) LILA-OBERKANTE 3px #592C82 als Marken-Signatur; uebrige Kanten fast weg. (4) MEHR LUFT: ~44px Zeilen (Padding rauf, 15px Schrift). (5) :focus-visible-Outline in CI-Lila (Tastatur-Fokus sichtbar, WCAG 2.4.7). (6) prefers-reduced-motion: Bewegung aus, Farbwechsel bleibt (WCAG 2.3.3). (7) white-space:normal statt nowrap (kein Abschneiden bei Text-Zoom, 1.4.4). (8) "Wartung & Service" per Haarlinie abgesetzt (Hierarchie). Nachlauf-Dauer aendern: die Werte ".5s"/".68s" in Punkt 2 anpassen (z. B. "1s"/"1.18s" fuer eine ganze Sekunde). */ /* 1) Hauptpunkte = Positionsanker; gehoverter Punkt nach ganz oben stapeln */ #nav_main ul.level_1 > li, .main_navigation ul.level_1 > li, .mod_navigation ul.level_1 > li { position: relative !important; } #nav_main ul.level_1 > li:hover, #nav_main ul.level_1 > li:focus-within, .main_navigation ul.level_1 > li:hover, .main_navigation ul.level_1 > li:focus-within { z-index: 2147483647 !important; } /* 1b) UNSICHTBARE BRUECKE am Hauptpunkt (nicht an der Karte -> nicht abgeschnitten) */ #nav_main ul.level_1 > li:hover::after, #nav_main ul.level_1 > li:focus-within::after, .main_navigation ul.level_1 > li:hover::after, .main_navigation ul.level_1 > li:focus-within::after, .mod_navigation ul.level_1 > li:hover::after, .mod_navigation ul.level_1 > li:focus-within::after { content: "" !important; position: absolute !important; top: 100% !important; right: 0 !important; width: 360px !important; height: 20px !important; background: transparent !important; z-index: 2147483646 !important; } /* 2) Die Dropdown-Karte — bleibt im DOM, Sichtbarkeit ein/aus mit Nachlauf. GESCHLOSSEN: */ #nav_main ul.level_1 li ul, .main_navigation ul.level_1 li ul, .mod_navigation ul.level_1 li ul { display: block !important; visibility: hidden !important; opacity: 0 !important; transform: translateY(-6px) !important; pointer-events: none !important; transition: opacity .18s ease .5s, transform .18s ease .5s, visibility 0s linear .68s !important; position: absolute !important; top: 100% !important; right: 0 !important; left: auto !important; margin: 14px 0 0 0 !important; padding: 10px 0 !important; min-width: 280px !important; width: max-content !important; max-width: 360px !important; background: #ffffff !important; /* (3) Marken-Signatur: satte Lila-Oberkante, uebrige Kanten fast unsichtbar */ border: 1px solid rgba(89, 44, 130, 0.06) !important; border-top: 3px solid #592C82 !important; border-radius: 12px !important; /* neutraler, weicher Zwei-Lagen-Schatten (near-black, kein lila Glow) */ box-shadow: 0 6px 16px rgba(20, 18, 28, 0.10), 0 2px 4px rgba(20, 18, 28, 0.06) !important; z-index: 2147483647 !important; text-align: left !important; letter-spacing: normal !important; list-style: none !important; overflow: hidden !important; /* Hover-Ecken + Innenschatten sauber runden */ } /* OFFEN bei Hover/Fokus — sofort sichtbar (kein Nachlauf) */ #nav_main ul.level_1 > li:hover ul, #nav_main ul.level_1 > li:focus-within ul, .main_navigation ul.level_1 > li:hover ul, .main_navigation ul.level_1 > li:focus-within ul, .mod_navigation ul.level_1 > li:hover ul, .mod_navigation ul.level_1 > li:focus-within ul { visibility: visible !important; opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; transition: opacity .18s ease, transform .18s ease, visibility 0s !important; } /* 4) Eintraege — Theme-Vorgaben hart zuruecksetzen (gleiche Zeilenhoehe) */ #nav_main ul.level_1 li ul li, .main_navigation ul.level_1 li ul li, .mod_navigation ul.level_1 li ul li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; float: none !important; text-align: left !important; letter-spacing: normal !important; } /* 5) GEISTER-ZEILE ENTFERNEN (Logo-/Leer-/Startseiten-Element im Dropdown) */ #nav_main ul.level_1 li ul li:has(.main-nav-logo), #nav_main ul.level_1 li ul li:has(> a[href="/"]), #nav_main ul.level_1 li ul li:has(> a[href="index.html"]), #nav_main ul.level_1 li ul li:has(> a:empty), #nav_main ul.level_1 li ul li:empty, .main_navigation ul.level_1 li ul li:has(.main-nav-logo), .main_navigation ul.level_1 li ul li:has(> a[href="/"]), .main_navigation ul.level_1 li ul li:has(> a[href="index.html"]), .main_navigation ul.level_1 li ul li:has(> a:empty), .main_navigation ul.level_1 li ul li:empty, .mod_navigation ul.level_1 li ul li:has(.main-nav-logo), .mod_navigation ul.level_1 li ul li:has(> a[href="/"]), .mod_navigation ul.level_1 li ul li:has(> a[href="index.html"]), .mod_navigation ul.level_1 li ul li:has(> a:empty), .mod_navigation ul.level_1 li ul li:empty { display: none !important; } /* 6) Links UND aktive Seite () — EXAKT gleich behandeln. KEIN border-left mehr (der verursachte den Zutrittskontrolle-Versatz); der Akzent kommt als Innenschatten -> null Layout-Verschiebung. */ #nav_main ul.level_1 li ul a, #nav_main ul.level_1 li ul strong, .main_navigation ul.level_1 li ul a, .main_navigation ul.level_1 li ul strong, .mod_navigation ul.level_1 li ul a, .mod_navigation ul.level_1 li ul strong { display: block !important; position: relative !important; box-sizing: border-box !important; padding: 12px 24px !important; /* ~44px Zeile */ margin: 0 !important; border: 0 !important; color: #2b2b3a !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.35 !important; text-transform: none !important; letter-spacing: .1px !important; text-decoration: none !important; white-space: normal !important; /* kein Abschneiden bei Text-Zoom */ background: transparent !important; box-shadow: inset 0 0 0 0 transparent !important; transition: background .16s ease, color .16s ease, box-shadow .16s ease, padding-left .16s ease !important; } /* Falls die aktive Seite als verschachtelt kommt: inneres neutralisieren, damit es keinen zweiten Kasten aufbaut */ #nav_main ul.level_1 li ul a strong, .main_navigation ul.level_1 li ul a strong, .mod_navigation ul.level_1 li ul a strong { display: inline !important; padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; font-weight: inherit !important; font-size: inherit !important; color: inherit !important; background: transparent !important; } /* HOVER + Maus-Fokus: zart-lila Flaeche, lila Text, GRUENE Interaktions-Kante (als Innenschatten, kein Layout-Sprung), Text rueckt 4px nach rechts */ #nav_main ul.level_1 li ul a:hover, .main_navigation ul.level_1 li ul a:hover, .mod_navigation ul.level_1 li ul a:hover { background: #f5f1fa !important; color: #592c82 !important; box-shadow: inset 3px 0 0 0 #80BC00 !important; /* CI-Gruen, nur als Kante */ padding-left: 24px !important; /* KEIN Slide mehr -> Text bleibt buendig */ } /* TASTATUR-Fokus sichtbar (WCAG 2.4.7). :focus-visible = nur bei Tab, nicht bei Maus. outline-offset MUSS negativ sein, sonst schneidet overflow:hidden den Ring ab. */ #nav_main ul.level_1 li ul a:focus-visible, .main_navigation ul.level_1 li ul a:focus-visible, .mod_navigation ul.level_1 li ul a:focus-visible { outline: 2px solid #592c82 !important; outline-offset: -2px !important; background: #f5f1fa !important; color: #592c82 !important; box-shadow: inset 3px 0 0 0 #80BC00 !important; } /* Theme-Unterstrich-Balken im Dropdown entfernen */ #nav_main ul.level_1 li ul a:after, #nav_main ul.level_1 li ul strong:after, .main_navigation ul.level_1 li ul a:after, .main_navigation ul.level_1 li ul strong:after { display: none !important; } /* 6c) ALIGNMENT-HAERTUNG — erzwingt exakt gleichen Texteinzug fuer ALLE Punkte. Hoehere Spezifitaet (html body ...) als jede spaeter geladene Theme-Regel; der Hover-Slide (padding-left:28px) hat durch :hover eine hoehere Klassen- Spezifitaet und bleibt daher wirksam. */ html body #nav_main ul.level_1 li ul li > a, html body #nav_main ul.level_1 li ul li > strong, html body .main_navigation ul.level_1 li ul li > a, html body .main_navigation ul.level_1 li ul li > strong, html body .mod_navigation ul.level_1 li ul li > a, html body .mod_navigation ul.level_1 li ul li > strong { padding-left: 24px !important; padding-right: 24px !important; text-indent: 0 !important; margin: 0 !important; text-align: left !important; } /* Innen liegende Elemente (span itemprop="name", verschachteltes strong) duerfen den Text NICHT verschieben */ html body #nav_main ul.level_1 li ul li a > *, html body #nav_main ul.level_1 li ul li strong > *, html body .main_navigation ul.level_1 li ul li a > *, html body .main_navigation ul.level_1 li ul li strong > *, html body .mod_navigation ul.level_1 li ul li a > *, html body .mod_navigation ul.level_1 li ul li strong > * { margin: 0 !important; padding: 0 !important; text-indent: 0 !important; border: 0 !important; display: inline !important; float: none !important; letter-spacing: inherit !important; } /* 7) "Wartung & Service" (letzter Punkt = Betrieb, nicht Produkt) dezent absetzen */ #nav_main ul.level_1 li ul li:last-child, .main_navigation ul.level_1 li ul li:last-child, .mod_navigation ul.level_1 li ul li:last-child { border-top: 1px solid rgba(89, 44, 130, 0.10) !important; margin-top: 5px !important; padding-top: 5px !important; } /* 8) Defensiv: Logo/Bilder in der Box zusaetzlich ausblenden (Zeile ist eh weg) */ #nav_main ul.level_1 li ul .main-nav-logo, #nav_main ul.level_1 li ul img, .main_navigation ul.level_1 li ul .main-nav-logo, .main_navigation ul.level_1 li ul img { display: none !important; } /* 9) Reduzierte Bewegung respektieren — Farbwechsel als Signal bleibt erhalten */ @media (prefers-reduced-motion: reduce) { #nav_main ul.level_1 li ul, .main_navigation ul.level_1 li ul, .mod_navigation ul.level_1 li ul { transform: none !important; transition: visibility 0s !important; } #nav_main ul.level_1 > li:hover ul, #nav_main ul.level_1 > li:focus-within ul, .main_navigation ul.level_1 > li:hover ul, .main_navigation ul.level_1 > li:focus-within ul, .mod_navigation ul.level_1 > li:hover ul, .mod_navigation ul.level_1 > li:focus-within ul { transform: none !important; } #nav_main ul.level_1 li ul a, .main_navigation ul.level_1 li ul a, .mod_navigation ul.level_1 li ul a { transition: none !important; } #nav_main ul.level_1 li ul a:hover, .main_navigation ul.level_1 li ul a:hover, .mod_navigation ul.level_1 li ul a:hover { padding-left: 24px !important; /* kein Verschieben bei reduzierter Bewegung */ } } /* ============================================================ v12 (2026-07-23): ZWANGS-AUSRICHTUNG — endgueltiger Fix fuer den "Zutrittskontrolle"-Versatz. Diagnose per Live-DOM (Dev-Tools): der Eintrag ist STRUKTURELL identisch zu den anderen fuenf ( li > a in ul.level_2.desktop_nav ). In KEINER CSS-Ebene (v11 / nav-header v5 / custom.css / Theme-lessphp) wurde eine Einzel-Regel gefunden, die genau diesen Punkt anders behandelt. Der Versatz entsteht also aus einer Kaskaden-/Spezifitaets-Interaktion. Loesung: eine Regel, die die EXAKTE Live-Struktur trifft und per hoher Spezifitaet + !important fuer ALLE 6 Eintraege denselben Einzug erzwingt (schlaegt auch eine evtl. per JS gesetzte NON-important Inline-Angabe). */ html body #nav_main ul.level_1.desktop_nav li.submenu .main_navigation ul.level_2.desktop_nav > li { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } html body #nav_main ul.level_1.desktop_nav li.submenu .main_navigation ul.level_2.desktop_nav > li > a, html body #nav_main ul.level_1.desktop_nav li.submenu .main_navigation ul.level_2.desktop_nav > li > strong { padding-left: 24px !important; padding-right: 24px !important; margin-left: 0 !important; text-indent: 0 !important; box-sizing: border-box !important; display: block !important; } html body #nav_main ul.level_1.desktop_nav li.submenu .main_navigation ul.level_2.desktop_nav > li > a > *, html body #nav_main ul.level_1.desktop_nav li.submenu .main_navigation ul.level_2.desktop_nav > li > strong > * { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; display: inline !important; } /* custom.css */ name{/* Dropdown Leistungen — v3 (2026-07-21) */#nav_main ul.level_2,.mod_navigation ul.level_2.level_2.level_2,.main_navigation ul.level_2.level_2.level_2 { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; background-color: #ffffff !important; padding: 15px 20px !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; z-index: 99999 !important; min-width: 250px !important; width: auto !important; text-align: left !important;}#nav_main ul.level_1 > li,.mod_navigation ul.level_1 > li,.main_navigation ul.level_1 > li { position: relative !important;}#nav_main ul.level_1 > li:hover > ul.level_2,.mod_navigation ul.level_1 > li:hover > ul.level_2.level_2.level_2,.main_navigation ul.level_1 > li:hover > ul.level_2.level_2.level_2 { display: block !important;}#nav_main ul.level_2 li,.mod_navigation ul.level_2 li,.main_navigation ul.level_2 li { display: block !important; width: 100% !important; margin: 0 0 10px 0 !important; float: none !important; text-align: left !important;}#nav_main ul.level_2 a,.mod_navigation ul.level_2 a,.main_navigation ul.level_2 a { color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; text-decoration: none !important; display: block !important; white-space: nowrap !important;}#nav_main ul.level_2 a:hover,.mod_navigation ul.level_2 a:hover,.main_navigation ul.level_2 a:hover { color: #72b22f !important;}} .rsce_accordions_container .tabber { position: relative; } .rsce_accordions_container .tabber .tabtitles { display: block; overflow: auto; position: relative; z-index: 2; } .rsce_accordions_container .tabber .tabtitles ul { display: flex; justify-content: flex-start; align-items: stretch; column-gap: 5px; color: #fff; } .rsce_accordions_container .tabber .tabtitles ul li { position: relative; display: flex; min-width: 140px; min-height: 50px; padding: 10px 30px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 0; justify-content: center; align-items: center; background-color: #fff; border: 2px solid #f1f1f1; border-bottom: none; color: #535353; cursor: pointer; font-size: 18px; border-top-left-radius: 8px; border-top-right-radius: 8px; } .rsce_accordions_container .tabber .tabtitles ul li:after { content: ""; display: block; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 3; background-color: #f1f1f1; } .rsce_accordions_container .tabber .tabtitles ul li:hover { background-color: #f1f1f1; } .rsce_accordions_container .tabber .tabtitles ul li.active { background-color: #fff; font-weight: bold; } .rsce_accordions_container .tabber .tabtitles ul li.active:after { background-color: #fff; } .rsce_accordions_container .tabber .tabcontents { position: relative; z-index: 1; border: 2px solid #f1f1f1; padding: 20px 30px; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: -2px; line-height: 1.5; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .rsce_accordions_container .tabber .tabcontents strong, .rsce_accordions_container .tabber .tabcontents b { font-weight: bold; } .rsce_accordions_container .tabber .tabcontents p { margin: 0 0 1em 0; } .rsce_accordions_container .tabber .tabcontents p:last-of-type { margin: 0; }