/* ============================================================================= * RH HEADER – TAO-BASIERTE GESAMTLÖSUNG * RockSolid TAO 1.6.7 / Contao * * GRUNDSATZ * --------------------------------------------------------------------------- * Diese Datei ergänzt TAO, sie ersetzt dessen Header-Logik nicht. * * TAO script.js bleibt unverändert und steuert weiterhin: * - Fixed Header * - dynamische Header-/Navigationshöhe beim Scrollen * - Mobile Navigation * - Hamburger-Erzeugung * - Öffnen/Schliessen der Mobile Navigation * - Untermenü-Buttons * * Responsive Grenze wie TAO: * - Desktop: 901px und grösser * - Compact-Desktop: 901–1023px * - Standard-Desktop: ab 1024px * - Tablet/Mobile: 900px und kleiner * * Mega-Menü: * - Struktur, Positionierung und Animation bleiben TAO. * * ============================================================================= */ :root { /* ========================================================================= * ZENTRALE GESTALTUNG * * Wie bei rh_buttons.css können Typografie und Farben hier angepasst werden. * Die darunterliegenden Selektoren greifen auf diese Variablen zu. * ========================================================================= */ /* ------------------------------------------------------------------------- * Header-Grundwerte * ---------------------------------------------------------------------- */ --rh-header-max-width: 1188px; /* ------------------------------------------------------------------------- * FARBEN – HEADER ALLGEMEIN * ---------------------------------------------------------------------- */ --rh-header-color: #284258; --rh-header-border: #e5e8ee; --rh-header-bg: #ffffff; --rh-header-bar-bg: #f5f5f5; /* ------------------------------------------------------------------------- * HEADER-BAR OBEN – FARBEN * ---------------------------------------------------------------------- */ /* Header-Bar und Auslöser: Standort / Kundenservice / Anmelden / Sprache / Suche */ --rh-header-bar-color: #98a0ab; --rh-header-bar-hover-color: #284258; /* Dropdown-Menüs: Kundenservice / Sprache */ --rh-header-dropdown-color: #284258; --rh-header-dropdown-hover-color: #007de6; /* Login-Panel: Links innerhalb des geöffneten Anmeldebereichs */ --rh-header-login-color: #284258; --rh-header-login-hover-color: #007de6; /* ------------------------------------------------------------------------- * DESKTOP-HAUPTNAVIGATION – TYPOGRAFIE + FARBEN * * Diese Werte können zentral angepasst werden. * Achtung: font-weight und letter-spacing beeinflussen die Gesamtbreite. * ---------------------------------------------------------------------- */ --rh-nav-font-family: "Montserrat", Arial, sans-serif; /* Standard-Desktop ab 1024px */ --rh-nav-font-size-min: 12.5px; --rh-nav-font-size-max: 14.5px; --rh-nav-font-size: clamp( var(--rh-nav-font-size-min), calc(10px + .35vw), var(--rh-nav-font-size-max) ); --rh-nav-font-weight: 400; --rh-nav-letter-spacing: 0em; --rh-nav-text-transform: uppercase; /* Compact-Desktop 901–1023px Alle Werte laufen bei 1024px nahtlos in die Standardwerte über. */ --rh-nav-compact-font-size: clamp( 12px, calc(0.396878px + 1.287805vw), 13.584px ); --rh-nav-compact-font-weight: 400; --rh-nav-compact-item-padding-x: clamp( 3px, calc(-11.650407px + 1.626016vw), 5px ); --rh-nav-compact-search-gap: clamp( 5px, calc(-16.975610px + 2.439024vw), 8px ); --rh-nav-compact-search-box: clamp( 32px, calc(3.871220px + 3.121951vw), 35.84px ); /* Logo: 901px -> ca. 252px 1024px -> ca. 290px Danach übernimmt wieder --rh-logo-responsive. */ --rh-logo-compact-width: clamp( 252.28px, calc(-23.733659px + 30.634146vw), 289.96px ); --rh-nav-color: #284258; --rh-nav-hover-color: #284258; --rh-nav-active-color: #284258; /* ------------------------------------------------------------------------- * HEADER CTA * ---------------------------------------------------------------------- */ --rh-header-cta-bg: #ff1515; --rh-header-cta-hover-bg: #284258; --rh-header-cta-color: #ffffff; --rh-header-cta-hover-color: #ffffff; --rh-header-cta-padding-y: 11px; --rh-header-cta-padding-x: 20px; --rh-header-cta-radius: 999px; --rh-header-cta-gap: 8px; --rh-header-cta-margin-left: 18px; --rh-header-cta-font-size: var(--rh-nav-font-size); --rh-header-cta-font-weight: 500; /* ------------------------------------------------------------------------- * NORMALE DROPDOWN-UNTERMENÜS * ---------------------------------------------------------------------- */ --rh-subnav-color: #284258; --rh-subnav-hover-color: #007de6; --rh-subnav-active-color: #017adf; --rh-subnav-hover-bg: transparent; /* ------------------------------------------------------------------------- * MEGA-MENÜ * * Standardwerte orientieren sich an TAO und können hier geändert werden. * ---------------------------------------------------------------------- */ --rh-mega-text-color: #284258; --rh-mega-heading-color: #284258; --rh-mega-link-color: #284258; --rh-mega-link-hover-color: #007de6; /* Icons der Mega-Menü-Linklisten separat steuerbar. Standardmässig folgen sie den Linkfarben. */ --rh-mega-icon-color: var(--rh-mega-link-color); --rh-mega-icon-hover-color: var(--rh-mega-link-hover-color); /* ------------------------------------------------------------------------- * SUCHE IN DER DESKTOP-NAVIGATION * * Die Lupe folgt automatisch der Farblogik der Hauptnavigation. * ---------------------------------------------------------------------- */ --rh-nav-search-color: var(--rh-nav-color); --rh-nav-search-hover-color: var(--rh-nav-hover-color); /* Feiner Trennstrich vor der Suche. Da er am Suchmodul hängt, verschwindet er automatisch, wenn die Suche im Layout deaktiviert wird. */ --rh-nav-search-separator-color: var(--rh-header-border); --rh-nav-search-separator-width: 1px; --rh-nav-search-separator-height: 24px; /* Horizontale Position des Trennstrichs innerhalb des Suchmoduls. 0px positioniert den Trennstrich mittig zwischen Portfolio und Lupe. */ --rh-nav-search-separator-offset: 0px; /* Lupengrösse folgt standardmässig der Schriftgrösse der Hauptnavigation */ --rh-nav-search-icon-size: var(--rh-nav-font-size); /* ========================================================================= * HEADER-HÖHEN * ========================================================================= */ /* Desktop ab 901px: Höhe des normalen Headers mit Logo, Navigation und Suche */ --rh-header-nav-height: 120px; /* Sticky Header ab 901px: minimale Höhe, bis zu der TAO beim Scrollen verkleinert */ --rh-header-nav-min-height: 70px; /* Tablet / Mobile bis 900px: Header mit Logo und Hamburger */ --rh-mobile-header-height: 104px; /* Smartphone bis 599px: kompaktere Headerhöhe */ --rh-mobile-header-height-small: 84px; /* Header-Bar oben: Standort / Kundenservice / Anmelden / Sprache / Suche */ --rh-header-bar-height: 38px; /* Logo Stufenlos responsiv: 390px Viewport -> 225px Logo 1024px Viewport -> 290px Logo ab 1024px -> max. 290px Die Formel vermeidet Sprünge zwischen Mobile, Tablet und Desktop. */ --rh-logo-min: 225px; --rh-logo-max: 290px; --rh-logo-responsive: clamp( var(--rh-logo-min), calc(10.25vw + 185px), var(--rh-logo-max) ); /* 40.5% der TAO-Navigationshöhe: 92px normal -> durch max-width auf 290px begrenzt 50px kompakt -> ca. 165px breit Dadurch folgt das Logo direkt der TAO-Scrollanimation, ohne zusätzliches JavaScript. */ --rh-logo-height-factor: 40.5%; /* Desktop-Navigation: feste Abstände */ --rh-nav-item-padding-x: 5px; --rh-nav-search-gap: 8px; /* Expand-Linie der obersten Desktop-Navigation */ --rh-nav-line-color: #284258; --rh-nav-line-width: 1px; --rh-nav-line-inset: 5px; /* Mobile Navigation */ --rh-mobile-nav-bg: #ffffff; --rh-mobile-nav-sub-bg: #f7f8f9; --rh-mobile-nav-hover: #f1f4f6; --rh-mobile-nav-active: #e9eef1; } /* ============================================================================= * HEADER-NAVIGATION – EINHEITLICH ALLE VIEWPORTS * * TAO setzt standardmässig zusätzlich einen Box-Shadow. * Dieser wird hier bewusst entfernt. * ========================================================================== */ .header-navigation { border-bottom: 1px solid var(--rh-header-border); background: var(--rh-header-bg); box-shadow: none; } /* ============================================================================= * 1. HEADER-BAR * * Die Modulreihenfolge kommt ausschliesslich aus dem Contao-Seitenlayout. * Keine CSS-order-Regeln. * ========================================================================== */ .header-bar { border-bottom: 1px solid var(--rh-header-border); background: var(--rh-header-bar-bg); } .header-bar-inner { display: flex; align-items: center; flex-wrap: nowrap; gap: .25rem; width: 100%; max-width: var(--rh-header-max-width); min-height: var(--rh-header-bar-height); margin-right: auto; margin-left: auto; padding-right: var(--page-padding-right); padding-left: var(--page-padding-left); color: var(--rh-header-bar-color); } /* Erstes sichtbares Header-Link-Modul = linker Bereich */ .header-bar-inner > .header-links:first-child { flex: 0 1 auto; margin: 0 auto 0 0; padding: 0; white-space: nowrap; } /* Alle weiteren Header-Module folgen rechts in Contao-Reihenfolge */ .header-bar-inner > .header-links, .header-bar-inner > .header-login, .header-bar-inner > .header-dropdown { float: none; flex: 0 0 auto; margin-top: 0; margin-bottom: 0; } /* Header-Link-Module */ .header-bar-inner > .header-links { padding-top: 0; padding-bottom: 0; } .header-bar-inner > .header-links li { line-height: 1; } /* Einheitliche Höhe: Kundenservice / Login / Sprache */ .header-login > h1, .header-login > h2, .header-login > h3, .header-login > h4, .header-login > h5, .header-login > h6, .header-dropdown > h1, .header-dropdown > h2, .header-dropdown > h3, .header-dropdown > h4, .header-dropdown > h5, .header-dropdown > h6 { display: flex; align-items: center; min-height: var(--rh-header-bar-height); margin: 0; padding: 0 .35em; line-height: 1; text-decoration: none; } .header-login > h1:hover, .header-login > h1:focus, .header-login > h2:hover, .header-login > h2:focus, .header-login > h3:hover, .header-login > h3:focus, .header-login > h4:hover, .header-login > h4:focus, .header-login > h5:hover, .header-login > h5:focus, .header-login > h6:hover, .header-login > h6:focus, .header-dropdown > h1:hover, .header-dropdown > h1:focus, .header-dropdown > h2:hover, .header-dropdown > h2:focus, .header-dropdown > h3:hover, .header-dropdown > h3:focus, .header-dropdown > h4:hover, .header-dropdown > h4:focus, .header-dropdown > h5:hover, .header-dropdown > h5:focus, .header-dropdown > h6:hover, .header-dropdown > h6:focus { text-decoration: none; } /* Header-Bar-Links generell ohne Underline */ .header-bar a { color: var(--rh-header-bar-color); text-decoration: none; } .header-bar a:hover, .header-bar a:focus { color: var(--rh-header-bar-hover-color); text-decoration: none; } /* ----------------------------------------------------------------------------- * KUNDENSERVICE + ANMELDEN + SPRACHE * * TAO verbindet die Trigger standardmässig als umrandete Registerkarten * mit dem geöffneten Panel. Diese Tab-Optik wird entfernt. * * Wichtig: * - keine dynamische Linie * - Trigger ohne Rahmen * - normale Farbe über --rh-header-bar-color * - Hover / Focus / aktiver Login über --rh-header-bar-hover-color * - geöffnetes Panel mit einfacher Header-Linie * - kein Box-Shadow * -------------------------------------------------------------------------- */ /* Normalzustand */ .header-login > h1, .header-login > h2, .header-login > h3, .header-login > h4, .header-login > h5, .header-login > h6, .header-dropdown > h1, .header-dropdown > h2, .header-dropdown > h3, .header-dropdown > h4, .header-dropdown > h5, .header-dropdown > h6 { border: 0; color: var(--rh-header-bar-color); background: transparent; box-shadow: none; } /* Hover / Focus / geöffnet */ .header-login:hover > h1, .header-login:hover > h2, .header-login:hover > h3, .header-login:hover > h4, .header-login:hover > h5, .header-login:hover > h6, .header-login:focus-within > h1, .header-login:focus-within > h2, .header-login:focus-within > h3, .header-login:focus-within > h4, .header-login:focus-within > h5, .header-login:focus-within > h6, .header-login.is-active > h1, .header-login.is-active > h2, .header-login.is-active > h3, .header-login.is-active > h4, .header-login.is-active > h5, .header-login.is-active > h6, .header-dropdown:hover > h1, .header-dropdown:hover > h2, .header-dropdown:hover > h3, .header-dropdown:hover > h4, .header-dropdown:hover > h5, .header-dropdown:hover > h6, .header-dropdown:focus > h1, .header-dropdown:focus > h2, .header-dropdown:focus > h3, .header-dropdown:focus > h4, .header-dropdown:focus > h5, .header-dropdown:focus > h6, .header-dropdown:focus-within > h1, .header-dropdown:focus-within > h2, .header-dropdown:focus-within > h3, .header-dropdown:focus-within > h4, .header-dropdown:focus-within > h5, .header-dropdown:focus-within > h6 { border: 0; color: var(--rh-header-bar-hover-color); background: transparent; box-shadow: none; } /* Aufgeklappte Panels: schlichte 1px-Kontur wie die übrigen Header-Linien. */ .header-login .formbody, .header-dropdown > ul { margin-top: 0; border: 1px solid var(--rh-header-border); border-radius: 0; background: var(--rh-header-bg); box-shadow: none; } /* ============================================================================= * LINKS INNERHALB DER HEADER-BAR-PANELS * * Die Farben der Auslöser, Dropdown-Menüs und des Login-Panels * sind unabhängig voneinander steuerbar. * * TAOs Unterstreichung bei Hover und Focus wird entfernt. * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1. DROPDOWN-MENÜS * Kundenservice / Sprache * -------------------------------------------------------------------------- */ .header-dropdown > ul a, .header-dropdown > ul strong, .header-dropdown > ul span.active, .header-dropdown > ul span.trail, .header-dropdown > ul span.forward { color: var(--rh-header-dropdown-color); text-decoration: none; } .header-dropdown > ul a:hover, .header-dropdown > ul a:focus { color: var(--rh-header-dropdown-hover-color); text-decoration: none; } /* ----------------------------------------------------------------------------- * 2. LOGIN-PANEL * -------------------------------------------------------------------------- */ .header-login .formbody a { color: var(--rh-header-login-color); text-decoration: none; } .header-login .formbody a:hover, .header-login .formbody a:focus { color: var(--rh-header-login-hover-color); text-decoration: none; } /* Suche in der Header-Bar */ .header-search-link { margin: 0; padding: 0; list-style: none; } .header-search-link li { display: flex; align-items: center; margin: 0; padding: 0; } .header-search-link a { display: flex; align-items: center; gap: .4em; min-height: var(--rh-header-bar-height); margin: 0; padding: 0 .35em; color: inherit; line-height: 1; white-space: nowrap; text-decoration: none; } /* TAO setzt .icon-links-label standardmässig auf #879eac und unterstreicht den span beim Hover. Für die Suche in der Header-Bar soll stattdessen die zentrale Header-Bar-Farbe des Links gelten. */ .header-search-link .icon-links-label { color: inherit; text-decoration: none; } .header-search-link a:hover .icon-links-label, .header-search-link a:focus .icon-links-label { color: inherit; text-decoration: none; } /* ============================================================================= * 2. DESKTOP AB 901PX * * Dieser Breakpoint entspricht TAO script.js. * ========================================================================== */ @media screen and (min-width: 901px) { /* ------------------------------------------------------------------------- * TAO Header-Navigation * * TAO script.js verändert die HEIGHT dieses Elements beim Scrollen. * Wir lassen genau diese Mechanik bestehen. * ---------------------------------------------------------------------- */ .header-navigation-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; container-type: size; container-name: rh-header-nav; column-gap: 0; width: 100%; max-width: var(--rh-header-max-width); height: var(--rh-header-nav-height); min-height: var(--rh-header-nav-min-height); margin-right: auto; margin-left: auto; padding-right: var(--page-padding-right); padding-left: var(--page-padding-left); color: var(--rh-nav-color); } /* ------------------------------------------------------------------------- * LOGO * * Kein eigener Sticky-Zustand. * Das Logo folgt direkt der von TAO berechneten Navigationshöhe. * * Normal: * Navigation 92px -> Logo max. 290px * * Kompakt: * Navigation 50px -> Logo ca. 165px * ---------------------------------------------------------------------- */ .header-navigation-inner > .logo { position: static; top: auto; right: auto; bottom: auto; left: auto; display: flex; align-items: center; grid-column: 1; width: auto; min-width: 0; max-width: none; height: 100%; margin: 0; padding: 0; font-size: 0; line-height: 0; } .header-navigation-inner > .logo a { display: flex; align-items: center; width: auto; height: 100%; } .header-navigation-inner > .logo img { display: block; width: auto; height: var(--rh-logo-height-factor); max-width: var(--rh-logo-responsive); max-height: none; margin: 0; } /* ------------------------------------------------------------------------- * HAUPTNAVIGATION * ---------------------------------------------------------------------- */ .header-navigation-inner > .main-navigation { position: static; float: none; /* * Wichtig: * TAO ordnet die direkten li der Hauptnavigation mit float:left an. * Der Navigationsblock darf deshalb im Flex-Header nicht schmaler * als sein Inhalt werden, sonst springt der letzte Menüpunkt * (z. B. Portfolio) in eine zweite Zeile. */ grid-column: 2; justify-self: end; min-width: max-content; height: 100%; margin: 0; padding: 0; } /* Nur oberste Navigationsebene. Mega-Menü und Unterseiten bleiben TAO. */ .header-navigation-inner > .main-navigation > ul > li > a, .header-navigation-inner > .main-navigation > ul > li > strong, .header-navigation-inner > .main-navigation > ul > li > span.active, .header-navigation-inner > .main-navigation > ul > li > span.trail, .header-navigation-inner > .main-navigation > ul > li > span.forward { padding-right: var(--rh-nav-item-padding-x); padding-left: var(--rh-nav-item-padding-x); color: var(--rh-nav-color); font-family: var(--rh-nav-font-family); font-size: var(--rh-nav-font-size); font-weight: var(--rh-nav-font-weight); letter-spacing: var(--rh-nav-letter-spacing); white-space: nowrap; text-transform: var(--rh-nav-text-transform); } .header-navigation-inner > .main-navigation > ul > li > a:hover, .header-navigation-inner > .main-navigation > ul > li > a:focus { color: var(--rh-nav-hover-color); } .header-navigation-inner > .main-navigation > ul > li > a.active, .header-navigation-inner > .main-navigation > ul > li > a.trail, .header-navigation-inner > .main-navigation > ul > li > a.forward, .header-navigation-inner > .main-navigation > ul > li > strong, .header-navigation-inner > .main-navigation > ul > li > span.active, .header-navigation-inner > .main-navigation > ul > li > span.trail, .header-navigation-inner > .main-navigation > ul > li > span.forward { color: var(--rh-nav-active-color); } /* ------------------------------------------------------------------------- * EXPAND-LINIE DER OBERSTEN DESKTOP-NAVIGATION * * TAOs vorhandenes :after bleibt die technische Basis. * Nur Position, Farbe, Stärke und Endbreite werden an unsere * festen Navigationsabstände angepasst. * * Dropdowns, Mega-Menü und Mobile sind nicht betroffen. * ---------------------------------------------------------------------- */ .header-navigation-inner > .main-navigation > ul > li > a:after, .header-navigation-inner > .main-navigation > ul > li > strong:after, .header-navigation-inner > .main-navigation > ul > li > span.active:after, .header-navigation-inner > .main-navigation > ul > li > span.trail:after, .header-navigation-inner > .main-navigation > ul > li > span.forward:after { top: 68%; bottom: auto; right: 50%; left: 50%; border-top: 0; border-bottom: var(--rh-nav-line-width) solid var(--rh-nav-line-color); transition: right .4s ease-out, left .4s ease-out; } /* Hover / Tastaturfokus: Linie bis auf den gleichen Innenabstand wie die Navigation expandieren. */ .header-navigation-inner > .main-navigation > ul > li:hover > a:after, .header-navigation-inner > .main-navigation > ul > li:hover > strong:after, .header-navigation-inner > .main-navigation > ul > li:hover > span.active:after, .header-navigation-inner > .main-navigation > ul > li:hover > span.trail:after, .header-navigation-inner > .main-navigation > ul > li:hover > span.forward:after, .header-navigation-inner > .main-navigation > ul > li > a:focus:after { right: var(--rh-nav-line-inset); left: var(--rh-nav-line-inset); } /* Aktiver / Trail-Zustand bleibt ebenfalls vollständig sichtbar. */ .header-navigation-inner > .main-navigation > ul > li > a.active:after, .header-navigation-inner > .main-navigation > ul > li > a.trail:after, .header-navigation-inner > .main-navigation > ul > li > a.forward:after, .header-navigation-inner > .main-navigation > ul > li > strong.active:after, .header-navigation-inner > .main-navigation > ul > li > strong.trail:after, .header-navigation-inner > .main-navigation > ul > li > strong.forward:after, .header-navigation-inner > .main-navigation > ul > li > span.active:after, .header-navigation-inner > .main-navigation > ul > li > span.trail:after, .header-navigation-inner > .main-navigation > ul > li > span.forward:after { right: var(--rh-nav-line-inset); left: var(--rh-nav-line-inset); } /* Mega-Menü: nur Text-Unterstreichung bei Hover entfernen. Struktur, Position und Animation bleiben TAO. */ .mega-dropdown a:hover, .mega-dropdown a:focus { text-decoration: none; } /* Mega-Menü: gleicher 1px-Rahmen wie Header-Unterkante, ohne TAO-Inset-Schatten. */ .header-navigation-inner .mega-dropdown { border: 1px solid var(--rh-header-border); box-shadow: none; } .modernizr-no-pointerevents .header-navigation-inner .mega-dropdown, .modernizr-no-pointerevents .header-navigation-inner li:hover > .mega-dropdown { border-width: 1px; border-color: var(--rh-header-border); box-shadow: none; } /* Mega-Menü-Farben bewusst nach Inhaltstyp trennen. Keine globale color-Regel auf .mega-dropdown, damit Textfarbe nicht mehr auf Links oder deren Icons vererbt wird. */ /* Fliesstext */ .header-navigation-inner .mega-dropdown-text, .header-navigation-inner .mega-dropdown-text p, .header-navigation-inner .mega-dropdown-column > p { color: var(--rh-mega-text-color); } /* Überschriften */ .header-navigation-inner .mega-dropdown-column h1, .header-navigation-inner .mega-dropdown-column h2, .header-navigation-inner .mega-dropdown-column h3, .header-navigation-inner .mega-dropdown-column h1 a, .header-navigation-inner .mega-dropdown-column h2 a, .header-navigation-inner .mega-dropdown-column h3 a { color: var(--rh-mega-heading-color); } /* Links in den Linklisten */ .header-navigation-inner .mega-dropdown-column ul a { color: var(--rh-mega-link-color); } .header-navigation-inner .mega-dropdown-column ul a:hover, .header-navigation-inner .mega-dropdown-column ul a:focus { color: var(--rh-mega-link-hover-color); } /* Icons der Linklisten */ .header-navigation-inner .mega-dropdown-column ul li[data-icon]::before, .header-navigation-inner .mega-dropdown-column ul li[class^="icon-"]::before, .header-navigation-inner .mega-dropdown-column ul li[class*=" icon-"]::before { color: var(--rh-mega-icon-color); } .header-navigation-inner .mega-dropdown-column ul li[data-icon]:hover::before, .header-navigation-inner .mega-dropdown-column ul li[class^="icon-"]:hover::before, .header-navigation-inner .mega-dropdown-column ul li[class*=" icon-"]:hover::before { color: var(--rh-mega-icon-hover-color); } /* ------------------------------------------------------------------------- * NORMALE DROPDOWN-UNTERMENÜS * * Nur die optische Darstellung wird überschrieben. * Struktur, Positionierung und TAO-Animation bleiben unverändert. * Mega-Menüs (-mega) sind ausdrücklich nicht betroffen. * ---------------------------------------------------------------------- */ .main-navigation > ul > li:not(.-mega) > ul { border: 1px solid var(--rh-header-border); box-shadow: none; } .main-navigation > ul > li:not(.-mega) > ul li { border-bottom-color: #ffffff; } .main-navigation > ul > li:not(.-mega) > ul a, .main-navigation > ul > li:not(.-mega) > ul strong, .main-navigation > ul > li:not(.-mega) > ul span.active, .main-navigation > ul > li:not(.-mega) > ul span.trail, .main-navigation > ul > li:not(.-mega) > ul span.forward { color: var(--rh-subnav-color); } .main-navigation > ul > li:not(.-mega) > ul a:hover, .main-navigation > ul > li:not(.-mega) > ul a:focus { color: var(--rh-subnav-hover-color); text-decoration: none; background-color: var(--rh-subnav-hover-bg); transition-duration: 0.05s; } /* Icons der normalen Dropdown-Unternavigation folgen den Linkfarben. */ .main-navigation > ul > li:not(.-mega) > ul li[data-icon]::before, .main-navigation > ul > li:not(.-mega) > ul li[class^="icon-"]::before, .main-navigation > ul > li:not(.-mega) > ul li[class*=" icon-"]::before { color: var(--rh-subnav-color); } .main-navigation > ul > li:not(.-mega) > ul li[data-icon]:hover::before, .main-navigation > ul > li:not(.-mega) > ul li[data-icon]:focus-within::before, .main-navigation > ul > li:not(.-mega) > ul li[class^="icon-"]:hover::before, .main-navigation > ul > li:not(.-mega) > ul li[class^="icon-"]:focus-within::before, .main-navigation > ul > li:not(.-mega) > ul li[class*=" icon-"]:hover::before, .main-navigation > ul > li:not(.-mega) > ul li[class*=" icon-"]:focus-within::before { color: var(--rh-subnav-hover-color); } .main-navigation > ul > li:not(.-mega) > ul strong, .main-navigation > ul > li:not(.-mega) > ul span.active, .main-navigation > ul > li:not(.-mega) > ul span.trail, .main-navigation > ul > li:not(.-mega) > ul span.forward { color: var(--rh-subnav-active-color); } /* ------------------------------------------------------------------------- * HEADER CTA * * Das Modul "Eigener HTML-Code" enthält: * * * Mehr erfahren * * * Der Contao-Modulwrapper wird über :has() eindeutig erkannt. * ---------------------------------------------------------------------- */ .header-navigation-inner > .rh-header-cta__link { display: inline-flex; align-items: center; justify-content: center; grid-column: 4; justify-self: start; align-self: center; gap: 0; margin: 0 0 0 var(--rh-header-cta-margin-left); padding: var(--rh-header-cta-padding-y) var(--rh-header-cta-padding-x); border: 0; border-radius: var(--rh-header-cta-radius); background: var(--rh-header-cta-bg); color: var(--rh-header-cta-color); font-family: var(--rh-nav-font-family); font-size: var(--rh-header-cta-font-size); font-weight: var(--rh-header-cta-font-weight); line-height: 1; text-decoration: none; white-space: nowrap; box-shadow: none; transition: background-color .25s ease, color .25s ease; } .header-navigation-inner > .rh-header-cta__link > span[aria-hidden="true"] { display: none; } .header-navigation-inner .rh-header-cta__link:hover, .header-navigation-inner .rh-header-cta__link:focus { background: var(--rh-header-cta-hover-bg); color: var(--rh-header-cta-hover-color); text-decoration: none; } /* ------------------------------------------------------------------------- * MAIN NAVIGATION SEARCH * * TAO-Formular bleibt technisch erhalten. * Sichtbar ist ausschliesslich die Lupe. * * Das verhindert auch, dass der Text "Suchen" irgendwo sichtbar wird. * ---------------------------------------------------------------------- */ .header-navigation-inner > .main-navigation-search { position: relative; /* TAO setzt für sein absolut positioniertes Suchformular top/right-Werte. Da wir position:relative für den Trennstrich benötigen, müssen diese Positionswerte ausdrücklich neutralisiert werden, sonst verschiebt sich die Suche nach unten/rechts. */ top: auto; right: auto; bottom: auto; left: auto; grid-column: 3; justify-self: start; align-self: center; width: clamp(34px, 3.5vw, 40px); min-width: clamp(34px, 3.5vw, 40px); height: clamp(34px, 3.5vw, 40px); margin: 0 0 0 var(--rh-nav-search-gap); padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; } /* Feiner vertikaler Trennstrich zwischen letztem Navigationspunkt und Lupe. Er existiert nur zusammen mit dem Suchmodul. */ .header-navigation-inner > .main-navigation-search::before { content: ""; position: absolute; top: 50%; left: var(--rh-nav-search-separator-offset); width: var(--rh-nav-search-separator-width); height: var(--rh-nav-search-separator-height); background: var(--rh-nav-search-separator-color); transform: translateY(-50%); pointer-events: none; } .header-navigation-inner > .main-navigation-search:after { content: none; } .header-navigation-inner > .main-navigation-search input { display: none !important; } .header-navigation-inner > .main-navigation-search button { position: static; display: block; width: clamp(34px, 3.5vw, 40px); height: clamp(34px, 3.5vw, 40px); overflow: hidden; margin: 0; padding: 0; border: 0; color: var(--rh-nav-search-color); font-size: 0; line-height: 0; text-align: left; text-indent: -9999px; white-space: nowrap; background: transparent; box-shadow: none; cursor: pointer; } .header-navigation-inner > .main-navigation-search button:after { display: block; width: clamp(34px, 3.5vw, 40px); height: clamp(34px, 3.5vw, 40px); font-family: "RockSolid Icons"; font-size: var(--rh-nav-search-icon-size); line-height: clamp(34px, 3.5vw, 40px); content: "\e0cb"; color: var(--rh-nav-search-color); text-align: center; text-indent: 0; } .header-navigation-inner > .main-navigation-search:hover, .header-navigation-inner > .main-navigation-search.focus { margin: 0 0 0 var(--rh-nav-search-gap); border: 0; background: transparent; } .header-navigation-inner > .main-navigation-search button:hover:after, .header-navigation-inner > .main-navigation-search button:focus:after { color: var(--rh-nav-search-hover-color); } /* Hamburger auf Desktop aus */ .main-navigation-mobile-open { display: none; } } /* ============================================================================= * 2A. HEADER CTA – STICKY-ZUSTAND OHNE ZUSÄTZLICHES JAVASCRIPT * * TAO verkleinert .header-navigation-inner beim Scrollen. * Sobald die Höhe 90px oder kleiner ist, wird der CTA ausgeblendet. * ========================================================================== */ @container rh-header-nav (max-height: 90px) { .rh-header-cta__link { display: none; } } /* ============================================================================= * HEADER CTA – SCROLL-FALLBACK OHNE JAVASCRIPT * * Der CTA wird nach den ersten 20px Scrollweg ausgeblendet und die * zusätzliche Grid-Spalte vollständig geschlossen. * ========================================================================== */ @supports (animation-timeline: scroll()) { @media screen and (min-width: 901px) { .header-navigation-inner > .rh-header-cta__link { overflow: hidden; animation-name: rh-header-cta-scroll-hide; animation-duration: 1ms; animation-timing-function: steps(1, end); animation-fill-mode: both; animation-timeline: scroll(root block); animation-range: 20px 21px; } } } @keyframes rh-header-cta-scroll-hide { from { opacity: 1; visibility: visible; max-width: 400px; margin-left: var(--rh-header-cta-margin-left); } to { opacity: 0; visibility: hidden; max-width: 0; margin-left: 0; pointer-events: none; } } /* ============================================================================= * 3. COMPACT-DESKTOP 901–1023PX * * TAOs Desktopmodus bleibt ab 901px vollständig erhalten. * Logo, Hauptnavigation und Suchsymbol starten bei 901px kompakt und * wachsen bis 1024px kontinuierlich in die Standard-Desktopwerte hinein. * So gibt es weder Kollision noch sichtbaren Sprung bei 1023/1024px. * * Mega-Menü, Dropdowns, Sticky-Mechanik und TAO-JavaScript bleiben unverändert. * ========================================================================== */ @media screen and (min-width: 901px) and (max-width: 1023px) { /* Lokale Variablen: gelten nur innerhalb des Desktop-Headers in diesem Zwischenbereich. */ .header-navigation-inner { --rh-nav-font-size: var(--rh-nav-compact-font-size); --rh-nav-font-weight: var(--rh-nav-compact-font-weight); --rh-nav-item-padding-x: var(--rh-nav-compact-item-padding-x); --rh-nav-search-gap: var(--rh-nav-compact-search-gap); /* Expand-Linie bleibt bündig mit den kompakteren Linkabständen. */ --rh-nav-line-inset: var(--rh-nav-compact-item-padding-x); } /* Logo kompakter, Sticky-Verkleinerung über die TAO-Höhe bleibt erhalten. */ .header-navigation-inner > .logo img { max-width: var(--rh-logo-compact-width); } /* Suchfeld / Lupe kompakter */ .header-navigation-inner > .main-navigation-search { width: var(--rh-nav-compact-search-box); min-width: var(--rh-nav-compact-search-box); height: var(--rh-nav-compact-search-box); } .header-navigation-inner > .main-navigation-search button, .header-navigation-inner > .main-navigation-search button:after { width: var(--rh-nav-compact-search-box); height: var(--rh-nav-compact-search-box); } .header-navigation-inner > .main-navigation-search button:after { line-height: var(--rh-nav-compact-search-box); } } /* ============================================================================= * 4. TABLET / MOBILE BIS 900PX * * Entspricht exakt TAOs Fixed-Header-Breakpoint. * TAO script.js deaktiviert hier seine Fixed-Header-Berechnung. * ========================================================================== */ @media screen and (max-width: 900px) { /* Header-Bar aus */ .header-bar { display: none; } /* Header */ .header-navigation-inner { position: relative; display: flex; align-items: center; width: 100%; max-width: none; height: var(--rh-mobile-header-height); min-height: var(--rh-mobile-header-height); margin: 0; padding-right: var(--page-padding-right); padding-left: var(--page-padding-left); color: var(--rh-header-color); } /* Logo: dieselbe stufenlose Breitenformel wie auf Desktop. Dadurch gibt es auch am TAO-Breakpoint 900/901px keinen Grössensprung. */ .header-navigation-inner > .logo { position: static; display: block; width: var(--rh-logo-responsive); min-width: 0; max-width: calc(100% - 80px); height: auto; margin: 0; padding: 0; text-align: left; } .header-navigation-inner > .logo a { display: block; width: 100%; height: auto; } .header-navigation-inner > .logo img { display: block; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; } /* Desktopnavigation vollständig aus */ .main-navigation, .main-navigation-search, .header-navigation-inner > .rh-header-cta__link { display: none; } /* Hamburger: TAO erzeugt den Link per script.js und fügt ihn direkt in .page ein. */ .main-navigation-mobile-open { display: block; top: calc(var(--rh-mobile-header-height) / 2); right: var(--page-padding-right); left: auto; width: 44px; height: 39px; margin: 0; padding: 11px; transform: translateY(-50%); z-index: 200; } .main-navigation-mobile-open:after { height: 2px; border-radius: 0; background: var(--rh-header-color); box-shadow: 0 7px var(--rh-header-color), 0 14px var(--rh-header-color); } /* TAO erzeugt .is-enabled selbst. Wir erweitern nur die sichtbare Mobile-Navigation auf <=900px. */ .modernizr-js .main-navigation-mobile.is-enabled, .main-navigation-mobile.is-enabled { display: block; } } /* ============================================================================= * 5. SMARTPHONE BIS 599PX * ========================================================================== */ @media screen and (max-width: 599px) { .header-navigation-inner { height: var(--rh-mobile-header-height-small); min-height: var(--rh-mobile-header-height-small); } .header-navigation-inner > .logo { width: var(--rh-logo-responsive); max-width: calc(100% - 76px); } .main-navigation-mobile-open { top: calc(var(--rh-mobile-header-height-small) / 2); } } /* ============================================================================= * 6. MOBILE NAVIGATION – HELLE VARIANTE * * TAO-Struktur und TAO-JavaScript bleiben unverändert. * Nur das visuelle Erscheinungsbild wird überschrieben. * ========================================================================== */ .main-navigation-mobile { color: var(--rh-header-color); border-top-color: var(--rh-header-border); background: var(--rh-mobile-nav-bg); } .main-navigation-mobile.is-active { box-shadow: 0 0 14px rgba(40, 66, 88, .18); } .main-navigation-mobile ul ul { background: var(--rh-mobile-nav-sub-bg); box-shadow: none; } .main-navigation-mobile a, .main-navigation-mobile strong, .main-navigation-mobile span.active, .main-navigation-mobile span.trail, .main-navigation-mobile span.forward { border-bottom-color: var(--rh-header-border); color: var(--rh-header-color); background-color: var(--rh-mobile-nav-bg); box-shadow: none; } .main-navigation-mobile li li { color: var(--rh-header-color); } .main-navigation-mobile li li a, .main-navigation-mobile li li strong, .main-navigation-mobile li li span.active, .main-navigation-mobile li li span.trail, .main-navigation-mobile li li span.forward { background-color: var(--rh-mobile-nav-sub-bg); } .main-navigation-mobile a:hover, .main-navigation-mobile a:focus, .main-navigation-mobile strong:hover, .main-navigation-mobile strong:focus, .main-navigation-mobile span.active:hover, .main-navigation-mobile span.active:focus, .main-navigation-mobile span.trail:hover, .main-navigation-mobile span.trail:focus, .main-navigation-mobile span.forward:hover, .main-navigation-mobile span.forward:focus { outline: none; text-decoration: none; background-color: var(--rh-mobile-nav-hover); } .main-navigation-mobile a.active, .main-navigation-mobile strong.active, .main-navigation-mobile span.active { background-color: var(--rh-mobile-nav-active); box-shadow: none; } .main-navigation-mobile .main-navigation-mobile-expand { color: var(--rh-header-color); box-shadow: inset 1px 0 var(--rh-header-border); } /* ============================================================================= * 7. MOBILE SUCHE * ========================================================================== */ .main-navigation-mobile-search { margin: 5%; } .main-navigation-mobile-search input, .main-navigation-mobile-search input:hover, .main-navigation-mobile-search input:focus { width: 100%; color: var(--rh-header-color); border: 1px solid #cfd6dc; background: #ffffff; box-shadow: none; } .main-navigation-mobile-search button { color: var(--rh-header-color); } /* ============================================================================= * 8. MOBILE ICON LINKS * ========================================================================== */ .main-navigation-mobile-icons.main-navigation-mobile-icons a:before { color: currentColor !important; } .main-navigation-mobile-icons.main-navigation-mobile-icons a:hover:before, .main-navigation-mobile-icons.main-navigation-mobile-icons a:focus:before { color: currentColor !important; } /* ============================================================================= * 9. LINKE SEITENNAVIGATION * * Farbgebung wie die normalen Dropdown-Untermenüs im Header. * Die vorhandenen TAO-Trennlinien, Abstände und Einrückungen bleiben * unverändert. * ========================================================================== */ /* Titel der Seitennavigation */ .sub-navigation > h1 a, .sub-navigation > h2 a, .sub-navigation > h3 a, .sub-navigation > h4 a, .sub-navigation > h5 a, .sub-navigation > h6 a { color: var(--rh-subnav-color); text-decoration: none; } .sub-navigation > h1 a:hover, .sub-navigation > h1 a:focus, .sub-navigation > h2 a:hover, .sub-navigation > h2 a:focus, .sub-navigation > h3 a:hover, .sub-navigation > h3 a:focus, .sub-navigation > h4 a:hover, .sub-navigation > h4 a:focus, .sub-navigation > h5 a:hover, .sub-navigation > h5 a:focus, .sub-navigation > h6 a:hover, .sub-navigation > h6 a:focus { color: var(--rh-subnav-hover-color); text-decoration: none; } /* Standardfarbe */ .sub-navigation > ul > li > a, .sub-navigation ul a, .sub-navigation ul strong, .sub-navigation ul span.trail, .sub-navigation ul span.active, .sub-navigation ul span.forward { color: var(--rh-subnav-color); } /* Hover / Tastaturfokus */ .sub-navigation ul a:hover, .sub-navigation ul a:focus, .sub-navigation ul strong:hover, .sub-navigation ul span.trail:hover, .sub-navigation ul span.active:hover, .sub-navigation ul span.forward:hover { color: var(--rh-subnav-hover-color); text-decoration: none; background-color: transparent; } /* Aktive Seite */ .sub-navigation ul a.active, .sub-navigation ul strong.active, .sub-navigation ul span.active { color: var(--rh-subnav-active-color); } /* Übergeordneter aktiver Pfad */ .sub-navigation ul a.trail, .sub-navigation ul strong.trail, .sub-navigation ul span.trail { color: var(--rh-subnav-active-color); } /* ============================================================================= * 10. BREADCRUMB * * Farbgebung wie die normalen Untermenüs und die linke Seitennavigation. * TAOs Unterstreichung wird entfernt. * ========================================================================== */ .mod_breadcrumb { color: var(--rh-subnav-color); } .mod_breadcrumb a { color: var(--rh-subnav-color); text-decoration: none; } .mod_breadcrumb a:hover, .mod_breadcrumb a:focus { color: var(--rh-subnav-hover-color); text-decoration: none; } /* ============================================================================= * ENDE RH HEADER * ========================================================================== */