/* Theme Name: fasnacht2027 Theme URI: https://fasnacht.ch Author: Ivo Birrer, fasnacht.ch Author URI: https://fasnacht.ch Description: Neues Theme für fasnacht.ch, löst branfordmagazine ab. Version: 0.34.3 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fasnacht2027 Domain Path: /languages Requires at least: 6.4 Requires PHP: 8.0 Update URI: https://github.com/plusmail-ch/fasnacht2027 */ /* ========================================================================== Schriften (selbst gehostet, kein Google-Fonts-Request) ========================================================================== */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/inter-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/inter-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('assets/fonts/inter-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('assets/fonts/inter-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/courier-prime-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/courier-prime-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/courier-prime-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/courier-prime-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================== Variablen (Grundlage fuer den spaeter nachgeruesteten Dark Mode: ausschliesslich ueber diese Custom Properties gehen, keine verstreuten Hex-Werte im restlichen Stylesheet) ========================================================================== */ :root { --fasnacht-color-text: #1a1a1a; --fasnacht-color-black: #000000; --fasnacht-color-accent: #006699; --fasnacht-color-accent-hover: #005580; --fasnacht-color-accent-active: #004466; --fasnacht-color-text-muted: #666666; --fasnacht-color-meta: #707070; --fasnacht-color-bg: #f6f5f2; --fasnacht-color-surface: #ffffff; --fasnacht-color-border: #e0ded8; --fasnacht-color-subnav-bg: #ececec; --fasnacht-font-body: 'Inter', system-ui, sans-serif; --fasnacht-font-tagline: 'Courier Prime', monospace; --fasnacht-radius: 4px; /* Eigene, grosszuegigere Rundung nur fuer Buttons (Pillenform wie beim Morgenstraich-Rechner-Button) -- bewusst von --fasnacht-radius getrennt, das weiterhin fuer alles andere (Such-Panel, Eingabefelder, Tooltip) gilt. Bild-/Karten-Rahmen bleiben wie entschieden ohne jeden Radius (siehe CI-Manual Abschnitt 7). */ --fasnacht-radius-button: 999px; --fasnacht-container-width: 1100px; --fasnacht-gutter: 40px; --fasnacht-header-navs-max-height: 100px; /* Partner-Werbung im rechten Seitenrand (Plugin fasnacht-ch-bloecke, Bereich "fasn8-partner-seitenrand"): Breite der Fläche, Abstand zum Content-Rahmen, Restabstand zum Fensterrand, Mindest-Abstand links. Zusammen bestimmen sie, ab welcher Fensterbreite die Werbung im Rand Platz hat (siehe --fasnacht-frame-left unten und den 1464px-Breakpoint bei .fasn8-partner-seitenrand). */ --fasnacht-partner-width: 300px; --fasnacht-partner-gap: 24px; --fasnacht-partner-edge: 8px; --fasnacht-frame-min-left: 16px; /* Linker Rand des gesamten Seiten-Rahmens (Header-Inhalt, Navi, Main, Footer, Werbe-Block). Standard: zentriert, wie zuvor per "margin: 0 auto". Prozent beziehen sich beim Verwenden auf die Breite des jeweiligen Elternelements (= Seitenbreite), max(0px, ...) verhindert einen negativen Rand bei schmalen Fenstern (das hatte "auto" bisher von selbst abgefangen). Ab 1464px wird dieser Wert unten ueberschrieben, damit der Rahmen nach links rueckt und rechts Platz fuer die Werbung bleibt. */ --fasnacht-frame-left: max(0px, calc((100% - var(--fasnacht-container-width)) / 2)); } /* Ab 1464px Fensterbreite hat die Partner-Werbung rechts neben dem Rahmen Platz: 16px links + 1100px Rahmen + 24px Abstand + 300px Werbung + 8px Rand = 1448px Seitenbreite, plus ca. 15px klassische Scrollbar (Media Queries zaehlen sie mit, die Seitenbreite nicht) = 1464px. Der Rahmen rueckt dann nur so weit nach links wie noetig (Untergrenze 16px) und bleibt oberhalb von ca. 1750px, wo links und rechts ohnehin genug Platz ist, wieder zentriert (Obergrenze = zentrierter Wert). Header, Navi, Main und Footer nutzen alle dieselbe Variable und ruecken dadurch gemeinsam mit. */ @media (min-width: 1464px) { :root { --fasnacht-frame-left: clamp( var(--fasnacht-frame-min-left), calc(100% - var(--fasnacht-container-width) - var(--fasnacht-partner-gap) - var(--fasnacht-partner-width) - var(--fasnacht-partner-edge)), calc((100% - var(--fasnacht-container-width)) / 2) ); } } /* ========================================================================== Basis ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Keine automatische Silbentrennung (Ivo, 2026-10-31): Das Basis-Plugin liefert seit dem ersten Commit global "body, p, div { hyphens: auto; }" (assets/css/fasnacht_ch_styles.css, Altlast aus der Zeit des alten Themes). Der Browser trennte damit mit seinem eingebauten Woerterbuch falsch ("Archi-vquellen") und mitten in Webadressen ("fasnacht.di-gital"). "html" davor erhoeht die Spezifitaet (0,0,2/0,0,3 gegen 0,0,1), die Regel gewinnt damit unabhaengig von der Ladereihenfolge der Stylesheets. Wer an einer Stelle trennen will, setzt dort gezielt "hyphens: auto". */ html body, html body p, html body div { -webkit-hyphens: manual; hyphens: manual; } html { -webkit-text-size-adjust: 100%; /* Der Header aendert waehrend der Navi-Ein-/Ausblend-Animation seine eigene Hoehe. Browser mit "Scroll Anchoring" (Chrome u.a. default an) waehlen dabei ein Element im sichtbaren Bereich unterhalb des Headers als Anker und passen window.scrollY an, um dessen Position auszu- gleichen -- das wiederum loest ein neues scroll-Event aus, das sticky-nav.js als Richtungswechsel liest und die Navi-Klasse erneut umschaltet: sichtbares Flackern in beide Richtungen. overflow-anchor nur auf .site-header haette lediglich den Header selbst als moeglichen Anker ausgeschlossen, nicht aber den eigentlich gewaehlten Anker darunter -- daher hier global deaktiviert. */ overflow-anchor: none; /* Verdacht (2026-10-17, noch nicht bestaetigt): seit dem Partner- Seitenrand-Bereich (.fasn8-partner-seitenrand, position:fixed am rechten Rand) meldete Ivo erneutes Navi-"Pumpen" in Chrome, nicht in Safari. Sprengt dessen Inhalt (z.B. ein zu breites Testbild) die eigene max-width, kann ein fixiertes Element am Viewport-Rand die Seite horizontal ueberlaufen lassen -- Chrome und Safari behandeln das unterschiedlich, was zum Chrome-only-Muster passen wuerde. overflow-x:hidden als Sicherheitsnetz, verhindert jeden horizontalen Seiten-Scrollbalken unabhaengig von der Ursache. */ overflow-x: hidden; /* Zweiter Verdacht (2026-10-17, noch nicht bestaetigt): das Pumpen kam zurueck, seit body per min-height:100vh (Sticky-Footer-Fix) kurze Seiten exakt auf Viewport-Hoehe wachsen laesst. Aendert sich waehrend der Navi-Ein-/Ausblend-Animation (.site-header__navs, max-height-Uebergang) dadurch, ob die Seite insgesamt scrollbar ist, kann Chromes vertikale Scrollbar ein-/ausblenden -- das aendert die effektive Breite, loest Reflow aus, was die Hoehe erneut knapp ueber/unter die Viewport-Grenze verschieben kann (Rueckkopplungsschleife). Safari nutzt standardmaessig Overlay- Scrollbars (beeinflussen die Breite nicht), Chrome nicht -- passt zum Chrome-only-Muster. scrollbar-gutter reserviert den Platz der vertikalen Scrollbar dauerhaft, unabhaengig davon ob sie gerade gebraucht wird, verhindert das Ein-/Ausblenden und damit den Ausloeser der Schleife komplett. */ scrollbar-gutter: stable; } /* 1rem = 16px, da html keine eigene font-size setzt (Browser-Default, respektiert aber die Schriftgrössen-Praeferenz der Nutzer:in). Alle font-size-Werte im Theme sind bewusst in rem statt px (2026-10-17 site-weit umgestellt) -- rem skaliert mit, wenn jemand in den Browser-Einstellungen die Standard-Schriftgroesse erhoeht (reine Textvergroesserung, ohne das ganze Layout zu zoomen), px ignoriert das. Browser-Zoom (Cmd/Ctrl +/-) funktioniert mit beiden Einheiten gleich gut, der Unterschied betrifft nur diesen spezifischeren Fall -- WCAG 2.1, Kriterium 1.4.4 "Resize Text". Abstaende/Breiten/Radien bleiben grundsaetzlich in px (Seiten- Layout/-Rhythmus, unabhaengig von einzelnen Textgroessen) -- MIT einer gezielten Ausnahme: padding, das direkt eine einzelne Text-Komponente umschliesst (Buttons, Eingabefelder, Navi-Links, Tooltip, Tabellenzellen), ist zusaetzlich in em statt px gesetzt, jeweils relativ zur font-size genau dieser Regel -- waechst die Schrift (z.B. ueber die Browser-Standard-Schriftgroesse), waechst dieser Innenabstand proportional mit, statt dass der Text gegen den Rand gedraengt wirkt. em (anders als rem) bewusst nur fuer genau diesen Fall verwendet, nie fuer font-size selbst (compoundiert sich sonst unvorhersehbar bei Verschachtelung). Grossflaechigere, nicht text-umschliessende Innenabstaende (Seitenraender, Karten/Panels, Widget-Flaechen) bleiben bewusst px. */ body { margin: 0; background: var(--fasnacht-color-bg); color: var(--fasnacht-color-text); font-family: var(--fasnacht-font-body); font-size: 1rem; line-height: 1.5; } /* "Sticky Footer"-Muster, Anlauf 2 (0.20.3): verhindert, dass kurze Seiten/Beitraege (z.B. eine knappe Service-Seite) den Footer mit einer grossen, unbeabsichtigt wirkenden Luecke "schweben" lassen. Gilt fuer jedes Template gleichermassen (id="main-content" bei Single/Seite/Startseite, class="fasn8-container" bei Archiv/Index/ Redaktoren-Archiv) -- bewusst der Element-Selektor, nicht eine der beiden Klassen/IDs, damit kuenftige Templates das automatisch erben. Anlauf 1 (0.20.0, body als Flex-Spalte + flex-grow auf
) verursachte zwei Regressionen: (a) #main-content/.fasn8-container schrumpften als Flex-Kind auf die Breite ihres Inhalts (margin:auto + kein eigenes width loest "Shrink-to-fit" statt "Stretch" aus), (b) staerkerer Verdacht: flex-grow berechnete sich LIVE anhand der aktuellen Header-Hoehe -- waehrend der 0.25s-Transition von .site-header__navs (Ein-/Ausblenden der Navi-Balken) musste
dadurch kontinuierlich mitwachsen/ -schrumpfen, was in Chrome das zuvor schon einmal beobachtete Navi-"Pumpen" reaktivierte (vermutlich darueber ausgeloeste Scroll-Events waehrend der laufenden Animation). Anlauf 2 (0.20.3) koppelte
nicht mehr live an die Header- Hoehe, sondern gab ihm eine feste, HANDGESCHAETZTE Mindesthoehe (100vh minus 320px) -- einmalig in CSS, nicht bei jedem Animationsframe neu berechnet. Die Schaetzung war zu grosszuegig (main zu kurz), sichtbar als graue Luecke unterhalb der Fusszeile in Safari (Ivo-Screenshot, privates Fenster, 2026-10-17) -- eine von Hand gepflegte Pixel-Konstante kann aber grundsaetzlich nie zuverlaessig zur tatsaechlichen Header-/Footer-Hoehe passen, schon gar nicht dauerhaft ueber kuenftige Design-Anpassungen hinweg. Anlauf 3 (0.20.5): min-height kommt jetzt per JavaScript (assets/js/main-min-height.js) aus ECHT GEMESSENEN Pixel-Werten (Header-Markenzeile + reservierte Navi-Hoehe + Fusszeile), gesetzt als Inline-Style auf
. Bewusst nur bei Laden/Resize gemessen, nie bei Scroll/Navi-Umschalten -- exakt diese Kopplung an den animierten/wechselnden Zustand war in beiden vorigen Anlaeufen die Ursache der Probleme (Chrome-Pumpen bzw. haengende Navi in Safari, siehe Kommentar bei .site-footer unten). 100vh als CSS-Fallback, falls JavaScript deaktiviert ist -- grosszuegig, aber immerhin ohne Lücke oberhalb des Footers (auf Kosten von etwas Leerraum darunter, in diesem Ausnahmefall unvermeidbar ohne echte Messung). */ main { min-height: 100vh; box-sizing: border-box; } /* Editor-Vorschau (add_editor_style() in functions.php laedt dieses Stylesheet komplett): die graue Seiten-Randfarbe oben ist fuer die Seitenraender gedacht, sickert ohne eine Gegenregel aber auch in die Schreibbereiche durch (grau statt weiss) -- Klassenselektoren gewinnen automatisch gegen die obige body-Regel, kein !important noetig. Bewusst in zwei getrennte Regeln aufgeteilt (bis 0.18.3 eine gemeinsame Regel mit max-width:680px fuer beide): .editor-styles-wrapper (Block-Editor) bleibt auf 680px begrenzt, damit Bloecke unter Design -> Widgets in ihrer echten, schmalen Breite erscheinen (TinyMCE wird dort nicht verwendet). .mce-content- body (Classic Editor, fuer normale Beitraege im Einsatz) bekommt dieselbe max-width NICHT mehr -- schraenkte dort nur versehentlich die Schreibbreite ein, ohne den eigentlichen Zweck (Widgets-Vorschau) je zu erfuellen. Innenabstand dort bewusst auf --fasnacht-gutter (40px statt vorher 24px) erhoeht: bei voller Breite (statt 680px) wirkte derselbe Abstand proportional kaum noch sichtbar. !important auf padding noetig (Ausnahme nach AGENTS.md-Vorgabe, sachlich begruendet, per Chrome-DevTools-Computed-Panel verifiziert statt nur vermutet): WordPress' eigenes Editor-Stylesheet enthaelt `body.wp-autoresize { padding-top/-bottom: 1px !important; padding-left/-right: 0 !important; ... }` (TinyMCEs Autoresize- Plugin, nicht unser Code). Kein Inline-Style wie urspruenglich vermutet, sondern eine echte Regel mit HOEHERER Spezifitaet (Element+Klasse) als eine blosse `.mce-content-body`-Regel (nur Klasse) -- bei beidseitigem !important gewinnt die hoehere Spezifitaet unabhaengig von der Ladereihenfolge. Fix: zweiter, spezifischerer Selektor ergaenzt (Element + beide tatsaechlich vorhandenen Body-Klassen), damit unsere Regel die WordPress-Regel sicher schlaegt. Einfache .mce-content-body-Variante bleibt zusaetzlich bestehen fuer den (unwahrscheinlichen) Fall, dass wp-autoresize einmal fehlt -- dann greift ohnehin keine konkurrierende Regel. */ .mce-content-body, body.mce-content-body.wp-autoresize { background: var(--fasnacht-color-surface); padding: var(--fasnacht-gutter) !important; box-sizing: border-box; } .editor-styles-wrapper { background: var(--fasnacht-color-surface); max-width: 680px; margin: 0 auto; padding: 24px; } a { color: var(--fasnacht-color-accent); } img { max-width: 100%; height: auto; } /* padding:0 explizit noetig: eine andernorts im Projekt geladene, globale Fremd-Regel "img { padding: 1px; }" (alter Browser-Rahmen-Reset, nicht Teil dieses Themes) hat dieselbe Spezifitaet wie ein blosser img- Selektor und wuerde je nach Ladereihenfolge gewinnen -- verursachte einen Luftspalt zwischen Bild und Rahmen, unabhaengig vom Seitenverhaeltnis des Bilds. Darum hier mit einer garantiert spezifischeren Klassen-Regel ueberschrieben statt mit einem blossen img-Selektor. */ .fasn8-container img, .fasn8-media img, .fasn8-strom-widget-slot img, .fasn8-strom-einstieg img, .fasn8-strom-ausklang img, .fasn8-strom-widget-full img { padding: 0; } :focus-visible { outline: 3px solid var(--fasnacht-color-accent); outline-offset: 2px; } /* Im Editor (Block-Editor/.editor-styles-wrapper und Classic Editor/ .mce-content-body, beide laden style.css per add_editor_style() mit) wieder auf den Browser-Standard zurueck -- die generische Regel oben ist fuers Frontend gedacht. Im Editor kann sie an einem leeren/ whitespace-only verlinkten Element (z.B. ein uebrig gebliebenes " " direkt nach einem verlinkten Bild) wie eine durchgehende blaue Linie quer durchs Editor-Feld wirken, weil die Link-Box dort extrem flach und volle Breite wird (Ivo, 2026-10-20). Hoehere Spezifitaet (1 Klasse + Pseudoklasse) gewinnt zuverlaessig gegen die Regel oben, kein !important noetig. */ :is(.editor-styles-wrapper, .mce-content-body) :focus-visible { outline: revert; outline-offset: revert; } .fasn8-container { max-width: var(--fasnacht-container-width); margin-left: var(--fasnacht-frame-left); margin-right: auto; padding: var(--fasnacht-gutter); box-sizing: border-box; } /* ========================================================================== Header ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--fasnacht-color-surface); /* Inset statt normalem box-shadow: Haupt- und Sub-Navi sitzen ohne Abstand direkt ueber dem Content, ein nach aussen bleender Schatten wuerde vom opaken Hintergrund darunter komplett verdeckt. Inset zeichnet den weichen Verlauf stattdessen innerhalb des Headers selbst, am unteren Rand -- sichtbar unabhaengig davon, was folgt bzw. davon, ob die Navi-Balken gerade ein- oder ausgeblendet sind (Header ist IN BEIDEN Faellen dieselbe einzelne sticky-Box, nur deren Gesamthoehe aendert sich). */ box-shadow: inset 0 -8px 8px -8px rgba(0, 0, 0, 0.18); } /* Die WordPress-Admin-Leiste ist "position: fixed; top: 0;" mit sehr hohem z-index und steht ausserhalb unseres Markups -- WordPress gleicht sie nur per "margin-top" auf aus, davon weiss unser eigener sticky Header nichts. Mit "top: 0" klebt er beim Scrollen sonst genau hinter der Admin-Leiste, deren oberste ~32px werden dauerhaft verdeckt. Fix: Sticky-Offset um die (von WordPress selbst vergebene) Admin-Leisten-Hoehe ergaenzen, inkl. deren eigenem Breakpoint (gleiche Werte/Grenze wie WordPress' admin-bar.css, nicht mit dem Mobile-Breakpoint dieses Themes zu verwechseln). Betrifft nur angemeldete Redaktor:innen -- Besuchende sehen keine Admin-Leiste. */ body.admin-bar .site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .site-header { top: 46px; } } /* Beide Navi-Balken als gemeinsame, kollabierbare Einheit -- beim Scrollen nach unten blendet assets/js/sticky-nav.js per Body-Klasse die Hoehe auf 0, Logo/Tagline-Zeile (.site-header__brand) bleibt immer sichtbar. max-height statt z.B. display:none, damit der Uebergang animiert werden kann; 100px liegt deutlich ueber der tatsaechlichen Hoehe beider Balken zusammen. overflow:hidden ist dabei NUR waehrend des Ein-/Ausblendens noetig, um den auf 0 schrumpfenden Inhalt sichtbar abzuschneiden -- im eingeblendeten Ruhezustand schneidet es sonst permanent auch die Hover-Dropdown-Untermenues ab (.site-nav ul ul, oeffnet sich NACH UNTEN ueber die Balken-Hoehe hinaus), die dann wie "hinter" der Unter-Navi/dem Content verschwunden wirken, obwohl technisch nicht die Stapelreihenfolge (z-index) das Problem ist, sondern das harte Abschneiden durch overflow. Fix: overflow wechselt verzoegert (diskrete Eigenschaft, CSS-Spec-Standardverhalten, kein Spezialfall) erst NACH Abschluss der max-height-Animation auf "visible", beim Ausblenden dagegen sofort zurueck auf "hidden" -- Dropdowns bleiben dadurch ausserhalb der kurzen Animationsphase frei sichtbar. */ .site-header__navs { overflow: visible; max-height: var(--fasnacht-header-navs-max-height); transition: max-height 0.25s ease, overflow 0s linear 0.25s; } body.fasn8-nav-hidden .site-header__navs { overflow: hidden; max-height: 0; transition: max-height 0.25s ease, overflow 0s linear 0s; } @media (prefers-reduced-motion: reduce) { .site-header__navs { transition: none; } } .site-header__brand { max-width: var(--fasnacht-container-width); margin-left: var(--fasnacht-frame-left); margin-right: auto; padding: 8px var(--fasnacht-gutter) 20px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; } .site-logo { display: block; width: 300px; max-width: 70vw; color: var(--fasnacht-color-black); } .site-logo svg { display: block; width: 100%; height: auto; } .site-tagline { font-family: var(--fasnacht-font-tagline); font-size: 0.875rem; line-height: 1.5; color: var(--fasnacht-color-text); margin: 0 0 4px; text-align: right; } /* Navi-Balken auf Content-Breite begrenzt (wie die weisse Lesespalte), statt ueber die volle Viewport-Breite zu laufen -- der Hintergrund (schwarz/grau) der Balken selbst ist dadurch schmaler, nicht nur deren Inhalt. */ .site-nav { max-width: var(--fasnacht-container-width); margin-left: var(--fasnacht-frame-left); margin-right: auto; box-sizing: border-box; } .site-nav > ul { margin: 0; padding: 0 var(--fasnacht-gutter); box-sizing: border-box; display: flex; flex-wrap: wrap; gap: 24px; list-style: none; } .site-nav li { position: relative; } .site-nav a { display: inline-block; text-decoration: none; } .site-nav a:hover { text-decoration: underline; } .site-nav--primary { background: var(--fasnacht-color-black); /* Platz fuer die Suche am rechten Rand (.fasn8-nav-search, als zweites Flex-Kind nach dem Menue): das Menue behaelt seinen eigenen linken Gutter-Abstand (ueber .site-nav > ul), der rechte Gutter-Abstand kommt stattdessen von .fasn8-nav-search selbst -- sonst gaebe es zwischen letztem Menuepunkt und Suche-Icon einen unnoetigen Doppel-Abstand on top von justify-content: space-between. */ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .site-nav--primary > ul { padding-right: 0; } .site-nav--primary > ul > li > a { color: #ffffff; font-size: 0.875rem; line-height: 1.35; padding: 0.7857em 0; } .site-nav--primary > ul > li > a:focus-visible { outline-color: #ffffff; } /* Aktiver Menuepunkt: WordPress setzt current-menu-item/-parent/-ancestor automatisch anhand der aktuellen URL -- bei einem Punkt mit Submenue bekommen so Haupt- UND Unterpunkt gleichzeitig ihre Markierung. */ .site-nav--primary > ul > li.current-menu-item > a, .site-nav--primary > ul > li.current-menu-parent > a, .site-nav--primary > ul > li.current-menu-ancestor > a { font-weight: 700; box-shadow: inset 0 -3px 0 0 #ffffff; } /* Fasnacht-Live/Notfall-Badges: saisonale Hervorhebung einzelner Menüpunkte waehrend der Fasnacht (Ivo setzt die Klassen manuell im Menü-Editor, Feld "CSS-Klassen (optional)"). Betrifft sowohl die Hauptnavi direkt (z.B. "Fasnacht Live!") als auch Dropdown-Punkte (z.B. "Notreparaturdienste" unter "Service") -- Selektoren darum mit .site-nav--primary vorangestellt, um in beiden Kontexten genug Spezifitaet gegenueber den jeweiligen Grundstilen zu haben, ohne !important (das machte die alte, inzwischen abgeloeste Basis- Plugin-Version schwer ueberschreibbar). Kleines, abgerundetes Badge statt vollflaechiger Farbe ueber den ganzen Menuepunkt -- passte nicht zum sonst reduzierten Navi-Stil. Im "aktiv"-Zustand (Hover/aktuelle Seite) wird das Rot dunkler statt heller: die bisherige Variante hellte dort auf #ff9090 auf, was gegen weisse Schrift nur 2.18:1 Kontrast ergab (WCAG-Minimum fuer Normaltext: 4.5:1). Werte hier eigens gegen Weiss nachgerechnet: #d32f2f = 4.98:1, #991b1b = 8.31:1. */ .site-nav--primary .fasn8-menu-live, .site-nav--primary .fasn8-menu-notfall { display: flex; align-items: center; } .site-nav--primary .fasn8-menu-live > a, .site-nav--primary .fasn8-menu-notfall > a { background: #d32f2f; color: #ffffff; font-weight: 700; padding: 0.2857em 0.8571em; border-radius: 999px; text-decoration: none; } .site-nav--primary .fasn8-menu-live:hover > a, .site-nav--primary .fasn8-menu-live.current-menu-item > a, .site-nav--primary .fasn8-menu-live.current-menu-parent > a, .site-nav--primary .fasn8-menu-notfall:hover > a, .site-nav--primary .fasn8-menu-notfall.current-menu-item > a { background: #991b1b; /* Farbe hier nochmals explizit setzen (nicht nur in der Basis-Badge-Regel oben): fuer aktuelle Dropdown-Punkte existiert bereits eine Blau-Regel (.site-nav ul ul li.current-menu-item > a), deren Spezifitaet hoeher ist als die der Basis-Badge-Regel allein -- ohne diese Wiederholung hier gewinnt sie und der Text wird blau statt weiss. */ color: #ffffff; box-shadow: none; text-decoration: none; } .site-nav--secondary { background: var(--fasnacht-color-subnav-bg); } .site-nav--secondary a { color: var(--fasnacht-color-text); font-size: 0.8125rem; padding: 0.7692em 0; } .site-nav--secondary li.current-menu-item > a, .site-nav--secondary li.current-menu-parent > a, .site-nav--secondary li.current-menu-ancestor > a { color: var(--fasnacht-color-accent); font-weight: 700; } /* Suche: Icon am rechten Rand der Hauptnavi, oeffnet ein schwebendes Suchfeld (assets/js/nav-search.js nur fuer Komfort -- Fokus/Escape/ Klick-aussen, die Grundfunktion auf/zu ist natives
/ ). Der Browser blendet den Inhalt dadurch von sich aus zu, solange kein "open"-Attribut gesetzt ist -- kein Aufblitzen beim Laden, kein JS fuer die Grundfunktion noetig (anders als der erste Versuch mit einer JS-gesetzten Klasse). Das Formular selbst ist "position: absolute" und schwebt ueber dem Content, statt als normales Flex-Kind der Navi-Zeile mitzuwirken -- sonst bricht die Zeile bei wenig Platz auf zwei Zeilen um (genau das war der zweite gemeldete Bug). Gleiches Prinzip wie die Hover-Dropdown-Untermenues weiter unten (.site-nav ul ul). */ .fasn8-nav-search { position: relative; flex-shrink: 0; padding-right: var(--fasnacht-gutter); } .fasn8-nav-search-toggle { list-style: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #ffffff; cursor: pointer; } .fasn8-nav-search-toggle::-webkit-details-marker { display: none; } .fasn8-nav-search-toggle:hover { background: rgba(255, 255, 255, 0.15); } .fasn8-nav-search-toggle:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } .fasn8-nav-search-form { position: absolute; top: 100%; right: 0; margin-top: 8px; display: flex; /* Neutrales Chrome-Grau statt Weiss -- liegt tonal zwischen dem Schwarz der Hauptnavi und dem helleren Grau der Sub-Navi, bindet das schwebende Panel damit optisch an die Navi an. Reines Weiss liess den Weissraum zwischen blauem Fokus-Rahmen (Input) und Panel-Rand wie einen unbeabsichtigten Doppelrahmen wirken. */ background: var(--fasnacht-color-meta); border-radius: var(--fasnacht-radius); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); padding: 8px; z-index: 10; } .fasn8-nav-search-form input[type="search"] { width: 220px; max-width: 60vw; box-sizing: border-box; border: 1px solid var(--fasnacht-color-border); border-radius: var(--fasnacht-radius); padding: 0.5em 0.8571em; font-family: inherit; font-size: 0.875rem; color: var(--fasnacht-color-text); } .fasn8-nav-search-form input[type="search"]:focus-visible { /* Abweichend vom generischen, blauen Fokus-Rahmen (Akzentfarbe, sonst ueberall im Theme): auf dem neuen Grau-Panel wirkte Blau als Fremd- koerper. Dunkles Nahe-Schwarz passt zum Schwarz-Grau-Weiss-Look dieses Panels, bleibt aber klar sichtbar (hoher Kontrast zu Weiss). */ outline: 2px solid var(--fasnacht-color-text); outline-offset: 1px; } /* Dropdown-Untermenues (z.B. "Service") -- WordPress gibt fuer Menuepunkte mit Kindern automatisch ein verschachteltes