/* ============================================================ Nuernberger Schule — Header- & Navigations-Redesign (v4) ============================================================ */ :root { --ns-green: #5DA441; --ns-green-dark: #3A6729; --ns-green-deep: #264D1B; --ns-green-soft: #A8C99A; --ns-green-tint: #EAF1E2; --ns-online: #7BC242; --ns-ink: #1E1E1C; --ns-ink-2: #3A3A36; --ns-ink-3: #6B675C; --ns-rule: #D8D3C2; --ns-paper-2: #F2EFE5; --ns-rust: #B65A2A; --ns-green-deep2:#264D1B; /* KEINE neue Schrift: bestehende Seiten-Schrift (Open Sans) verwenden. Nur explizit gesetzt, damit der ganze Header EINHEITLICH dieselbe Familie nutzt. */ /* Zusaetzliche Logo-Luft ueber #header_main. Enfold rechnet diese px NICHT in seinen Platzhalter (#main padding-top) ein — die Kompensation unten muss denselben Wert benutzen, sonst rutscht der Content unter den Header. */ --ns-header-extra: 20px; /* Hoehe des Logo-SVG. Ergibt sich aus Enfolds header_custom_size (100px, per avf_header_setting_filter in functions.php) — das Logo fuellt davon ~78 %. Beide Werte gehoeren zusammen: aendert sich der eine, muss der andere folgen. */ --ns-logo-height: 78px; --ns-font-head: 'open-sans-v34-latin', "Open Sans", Helvetica, Arial, sans-serif; } /* ============================================================ v4 — einheitliche Header-Schrift (Open Sans) in Top-Leiste, Logo-Zeile, Pillars und Mega (verhindert gemischte Font-Familien im Header) ============================================================ */ #top #header_meta, #top #header_meta a, #top .ns-secondary-nav, #top .ns-secondary-nav a, #top #header_main_alternate .av-main-nav > li > a, #top #header .avia_mega_div, #top #header .avia_mega_div .mega_menu_title, #top #header .avia_mega_div .mega_menu_title a, #top #header .avia_mega_div li > a, #top #header .avia_mega_div .ns-mega-foot, #top #header .avia_mega_div .ns-mega-foot a { font-family: var(--ns-font-head) !important; } /* ============================================================ v4 — Top-Utility-Streifen GRÜN (nur Umfärbung, Layout unangetastet) ============================================================ */ #top #header_meta { background: var(--ns-green-deep2) !important; border-bottom: 0 !important; } /* v7 — Telefonnummer LINKS in der Top-Leiste (Enfold floatet sie per av_phone_active_right sonst nach rechts zu den Meta-Links) + green-soft Dot davor. */ #top #header_meta .phone-info { float: left !important; margin: 0 !important; } /* Dot als INLINE-Element im inneren
(nicht flex auf .phone-info -> das hatte die native line-height:30px-Zentrierung zerstört, Nummer klebte oben). */ #top #header_meta .phone-info > div::before { content: ''; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-radius: 50%; background: var(--ns-green-soft) !important; margin-right: 8px; position: relative; top: -1px; } #top #header_meta, #top #header_meta .sub_menu a, #top #header_meta a, #top #header_meta .phone-info, #top #header_meta .phone-info *, #top #header_meta span { color: #fff !important; } #top #header_meta .sub_menu a:hover, #top #header_meta a:hover { color: var(--ns-green-soft) !important; } /* Social-Icons + sonstige Glyphen weiß */ #top #header_meta .social_bookmarks li a, #top #header_meta .social_bookmarks li a::before, #top #header_meta [class*="icon"]::before { color: #fff !important; } #top #header_meta svg { fill: #fff !important; color: #fff !important; } /* v7 — Header-Zeilen DECKEND WEISS. #header ist position:fixed + transparent; durch die 20px Logo-Luft ist der Header ~20px höher als der Enfold-Content-Spacer → der LayerSlider unterlappt die Pillar-Zeile und schimmert durch. Weisser BG auf Logo- und Pillar-Zeile deckt das ab → Slider schliesst bündig unter der Navi ab. (#header_meta behält seine grüne Farbe von oben.) */ #top #header_main, #top #header_main_alternate { background-color: #fff !important; } /* ============================================================ Weg 1 — Sekundaernav in die Logo-Zeile (oben rechts) ============================================================ */ /* Logo klebte direkt an der gruenen Top-Leiste (Abstand 0) → Luft nach oben wie im v4-Design (~20px). */ #top #header_main { position: relative; padding-top: var(--ns-header-extra) !important; } /* Sekundaernav vertikal zentriert in der Logo-Zeile, rechtsbuendig an der Content-Kante (gleicher Gutter wie Logo/Content). */ #top .ns-secondary-nav-wrap { position: absolute; top: calc(var(--ns-header-extra) + var(--ns-logo-height) / 2); transform: translateY(-50%); right: calc(50px + max(0px, (100vw - 1310px) / 2)); z-index: 30; display: flex; align-items: center; gap: 20px; } /* Berechnet statt Festwert (war 67px, als das Logo noch 94px hoch war): #header_main ist höher als das Logo (Leerraum darunter) -> top:50% zentrierte die Navi ~29px zu tief. Die Logo-Mitte liegt bei Padding + halbe Logo-Höhe; als calc() aus denselben Variablen wandert die Navi automatisch mit, wenn sich die Logo-Höhe ändert. */ /* Such-Box (v4): umrandeter Kasten, klappt bei Klick auf. Enfolds native Suche in der Pillar-Zeile wird ausgeblendet (nur eine Suche). */ #top #header_main_alternate .menu-item-search, #top #header_main_alternate #menu-item-search { display: none !important; } #top .ns-search-box { display: flex; align-items: center; height: 38px; border: 1px solid var(--ns-rule); background: #fff; margin: 0; } /* Enfold gibt jedem Formularfeld ein graues Fuellmuster (#E6E6E6) und margin-bottom:20px. Im Flex-Container schob dieser Rand das Input 9px nach oben aus dem weissen Kasten heraus, und das Grau blieb sichtbar, weil Enfolds Regel ueber input[type="search"] spezifischer war als ein blosses `background`. Deshalb hier: Rand auf 0, Hintergrund explizit transparent, und die Browser-Eigenoptik des search-Typs abschalten (sonst zeichnet Safari/WebKit eigene Innenraender). vertical-align + align-self halten es in der Mitte. */ #top .ns-search-box .ns-search-input, #top .ns-search-box input[type="search"].ns-search-input { width: 0; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent !important; background-image: none !important; box-shadow: none !important; border-radius: 0; -webkit-appearance: none; appearance: none; margin: 0 !important; align-self: center; vertical-align: middle; font-size: 13px; color: var(--ns-ink); line-height: 36px; height: 36px; transition: width 180ms ease, padding 180ms ease; } /* WebKit-Eigenteile des search-Inputs (Clear-Button, Dekoration) ausblenden. */ #top .ns-search-box .ns-search-input::-webkit-search-decoration, #top .ns-search-box .ns-search-input::-webkit-search-cancel-button, #top .ns-search-box .ns-search-input::-webkit-search-results-button { -webkit-appearance: none; display: none; } #top .ns-search-box .ns-search-input::placeholder { color: var(--ns-ink-3); opacity: 1; } #top .ns-search-box.is-open .ns-search-input, #top .ns-search-box:focus-within .ns-search-input { width: 170px; padding: 0 10px; } #top .ns-search-box .ns-search-btn { flex: 0 0 auto; width: 36px; height: 36px; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ns-ink); } #top .ns-search-box .ns-search-btn:hover { color: var(--ns-green-dark); } #top nav.ns-secondary-nav ul.ns-secondary-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; align-items: center; } #top nav.ns-secondary-nav ul.ns-secondary-menu > li { position: relative; } #top nav.ns-secondary-nav a { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ns-ink-2); text-decoration: none; white-space: nowrap; } #top nav.ns-secondary-nav a:hover { color: var(--ns-green-dark); } #top nav.ns-secondary-nav ul ul { display: none; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; margin: 0; padding: 6px 0; box-shadow: 0 8px 24px rgba(30,30,28,.12); } #top nav.ns-secondary-nav li:hover > ul { display: block; } #top nav.ns-secondary-nav ul ul li { display: block; } #top nav.ns-secondary-nav ul ul a { display: block; padding: 7px 16px; font-weight: 500; } #top nav.ns-secondary-nav ul ul a:hover { background: var(--ns-green-tint); } /* ============================================================ Phase 2b — v4-Optik fuers Mega-Menue ============================================================ */ /* Akzentfarbe EINHEITLICH fuer alle Pillars. Vorher per-Pillar unterschiedlich (Baum/Umwelt #3A6729, Arbeit #5DA441, E-Learning #7BC242 lime) → der gruene Strich/Mega-Akzent wirkte je Bereich anders. Jetzt durchgaengig green-dark. */ #top #menu-item-3647, #top #menu-item-12016, #top #menu-item-12020, #top #menu-item-12037 { --pillar-accent: var(--ns-green-dark); } /* AGGRESSIVER Reset gegen die Linie durch die Header-Texte (#top #header = 2 IDs, schlaegt Enfolds eigene Title-Regeln) */ #top #header .avia_mega_div .mega_menu_title, #top #header .avia_mega_div .mega_menu_title a { text-decoration: none !important; text-decoration-line: none !important; border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; } /* Panel VOLLE BREITE + ALLE Spalten in EINER Reihe (6/4/3 je Pillar) ---------- Enfold ankert das Mega-Panel am
  • (alle Vorfahren bis zur av-main-nav sind position:relative) und teilt 6 Spalten in zwei