/* ===================================================================== RAE MENU – das Untermenue der Kopfzeile ===================================================================== Eigene Datei, weil sie auf JEDER Seite NACH dem uebrigen Stil stehen muss – auch auf der Startseite, die ihren Stil noch im Kopf mitfuehrt. Einbindung, immer als LETZTES Stylesheet: Der Aufbau der Klappe entsteht in assets/js/site-config.js aus config/site.js (RAE_HAUPTMENU). ===================================================================== */ /* ===================================================================== KOPFMENUE – UNTERMENUE (Desktop) 2026 ===================================================================== Loest die frueheren Zwei-Spalten-Kacheln ab. Der Aufbau kommt aus assets/js/site-config.js (baueDesktopMenu): .dropdown-content .dd-kopf nur noch die Kleinzeile .dd-grid die Eintraege (eine oder zwei Spalten) .dd-fuss kurze Ansprache + Weg ins Kontaktformular .dropdown-link .dd-ico Symbolflaeche .dd-text .dd-label + .dd-sub .dd-pfeil Winkel, faehrt bei Hover ein Ecken bleiben scharf – das ist die Handschrift der Seite. Neu sind Tiefe, Zweizeiligkeit, die einlaufende Kante links und das gestaffelte Erscheinen der Eintraege. ===================================================================== */ nav.desktop-nav .dropdown-content { /* Position: buendig unter der Kopfzeile, ohne Luecke fuer die Maus */ top: 100%; left: 50%; display: block !important; width: max-content; min-width: 380px !important; max-width: min(94vw, 780px); padding: 0 !important; grid-template-columns: none !important; gap: 0 !important; overflow: hidden; /* Glas, seit 2026-08 um ein Fuenftel durchsichtiger: Der Abschnitt darunter bleibt erkennbar, die Unschaerfe traegt die Lesbarkeit. Deshalb steigt mit der Durchsicht auch die Blende (blur/saturate) leicht an – sonst wuerde die Schrift auf unruhigen Bildern flimmern. Frueher 0.80 / 0.62. */ background: linear-gradient(180deg, rgba(255,255,255,0.64) 0%, rgba(255,255,255,0.50) 100%) !important; backdrop-filter: blur(48px) saturate(210%); -webkit-backdrop-filter: blur(48px) saturate(210%); border: 1px solid rgba(255,255,255,0.55) !important; border-top: none !important; box-shadow: 0 1px 0 rgba(255,255,255,0.65) inset, 0 40px 90px -24px rgba(13,37,48,0.34) !important; transform: translateX(calc(-50% + var(--dd-shift, 0px))) translateY(8px) !important; transition: opacity 0.24s ease, transform 0.34s cubic-bezier(0.2,0.9,0.25,1), visibility 0.24s; } header.dark-mode nav.desktop-nav .dropdown-content { /* Gleiche Rechnung ueber dunklem Abschnitt: frueher 0.86 / 0.72. */ background: linear-gradient(180deg, rgba(13,37,48,0.69) 0%, rgba(13,37,48,0.58) 100%) !important; border-color: rgba(255,255,255,0.14) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 44px 100px -26px rgba(0,0,0,0.60) !important; } nav.desktop-nav .dropdown.open .dropdown-content { transform: translateX(calc(-50% + var(--dd-shift, 0px))) translateY(0) !important; } /* Feiner Verlaufsfaden auf der Oberkante – die Verbindung zum Menuepunkt */ nav.desktop-nav .dropdown-content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(69,191,112,0) 0%, rgba(69,191,112,0.85) 18%, rgba(0,134,180,0.85) 52%, rgba(214,176,88,0.85) 82%, rgba(214,176,88,0) 100%); opacity: 0; transform: scaleX(0.4); transform-origin: center; transition: opacity 0.4s ease 0.05s, transform 0.6s cubic-bezier(0.2,0.9,0.25,1) 0.05s; pointer-events: none; z-index: 2; } nav.desktop-nav .dropdown.open .dropdown-content::before { opacity: 1; transform: scaleX(1); } /* ---------- Kopfzeile des Untermenues ---------- */ nav.desktop-nav .dd-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; padding: 0.95rem 1.15rem 0.6rem; } nav.desktop-nav .dd-kicker { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(64,104,119,0.55); } header.dark-mode nav.desktop-nav .dd-kicker { color: rgba(255,255,255,0.5); } /* Der fruehere Verweis oben rechts in der Klappe (.dd-uebersicht, "Übersicht Mietrecht") ist 2026-08 entfallen. Der Hauptpunkt selbst fuehrt schon dorthin; die Klappe endet stattdessen unten mit einer kurzen Ansprache und dem Weg ins Kontaktformular (.dd-fuss). */ /* ---------- Raster der Eintraege ---------- */ nav.desktop-nav .dd-grid { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 0 0.5rem 0.55rem; } nav.desktop-nav .dropdown-content[data-spalten="2"] .dd-grid { grid-template-columns: 1fr 1fr; } nav.desktop-nav .dropdown-content[data-spalten="2"] { min-width: 620px !important; } /* ---------- Ein Eintrag ---------- */ nav.desktop-nav .dropdown-link { position: relative; display: grid !important; grid-template-columns: 26px 1fr 14px; align-items: center; gap: 0.72rem; padding: 0.56rem 0.65rem !important; background: transparent !important; border: none !important; text-decoration: none; font-weight: 500 !important; letter-spacing: 0 !important; color: rgba(13,37,48,0.92) !important; transform: none !important; transition: background 0.24s ease, color 0.24s ease; /* gestaffeltes Erscheinen */ opacity: 0; translate: 0 -6px; } header.dark-mode nav.desktop-nav .dropdown-link { color: rgba(255,255,255,0.9) !important; } nav.desktop-nav .dropdown.open .dropdown-link { animation: raeDdEin 0.42s cubic-bezier(0.2,0.9,0.25,1) forwards; animation-delay: calc(60ms + var(--i, 0) * 26ms); } @keyframes raeDdEin { to { opacity: 1; translate: 0 0; } } /* Einlaufende Kante links – dieselbe Idee wie beim Anruf-Button */ nav.desktop-nav .dropdown-link::after { content: '' !important; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--color-neon-green, #51e184), rgba(0,134,180,0.9)); transform: scaleY(0); transform-origin: top; transition: transform 0.38s cubic-bezier(0.2,0.9,0.25,1); } nav.desktop-nav .dropdown-link:hover, nav.desktop-nav .dropdown-link:focus-visible { background: rgba(255,255,255,0.72) !important; border-color: transparent !important; transform: none !important; } header.dark-mode nav.desktop-nav .dropdown-link:hover, header.dark-mode nav.desktop-nav .dropdown-link:focus-visible { background: rgba(255,255,255,0.09) !important; } nav.desktop-nav .dropdown-link:hover::after, nav.desktop-nav .dropdown-link:focus-visible::after { transform: scaleY(1); } /* Symbol – frei stehend, ohne Kasten */ nav.desktop-nav .dropdown-link .dd-ico { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; background: none !important; border: none !important; box-shadow: none !important; color: rgba(64,104,119,0.72); transition: color 0.28s ease, transform 0.34s cubic-bezier(0.2,0.9,0.25,1); } header.dark-mode nav.desktop-nav .dropdown-link .dd-ico { color: rgba(255,255,255,0.72); } nav.desktop-nav .dropdown-link .dd-ico svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; } nav.desktop-nav .dropdown-link:hover .dd-ico, nav.desktop-nav .dropdown-link:focus-visible .dd-ico, nav.desktop-nav .dropdown-link.dd-aktiv .dd-ico { color: var(--color-neon-green-dark, #45bf70); transform: translateX(1px); } header.dark-mode nav.desktop-nav .dropdown-link:hover .dd-ico, header.dark-mode nav.desktop-nav .dropdown-link:focus-visible .dd-ico, header.dark-mode nav.desktop-nav .dropdown-link.dd-aktiv .dd-ico { color: var(--color-neon-green, #51e184); } /* Beschriftung */ nav.desktop-nav .dropdown-link .dd-text { display: grid; gap: 1px; min-width: 0; } nav.desktop-nav .dropdown-link .dd-label { font-size: 0.88rem; font-weight: 650; line-height: 1.25; letter-spacing: 0.005em; white-space: nowrap; } nav.desktop-nav .dropdown-link .dd-sub { font-size: 0.715rem; font-weight: 400; line-height: 1.35; color: rgba(64,104,119,0.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } header.dark-mode nav.desktop-nav .dropdown-link .dd-sub { color: rgba(255,255,255,0.55); } /* Winkel rechts */ nav.desktop-nav .dropdown-link .dd-pfeil { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0; translate: -4px 0; transition: opacity 0.24s ease, translate 0.3s cubic-bezier(0.2,0.9,0.25,1); } nav.desktop-nav .dropdown-link:hover .dd-pfeil, nav.desktop-nav .dropdown-link:focus-visible .dd-pfeil { opacity: 0.75; translate: 0 0; } /* Zweite Ebene: leicht eingerueckt und kleiner (z. B. Unterpunkte des Unfallrechts). Bleibt bewusst im selben Raster. */ nav.desktop-nav .dropdown-link.dd-ebene2 { grid-template-columns: 22px 1fr 14px; padding-left: 1.5rem !important; } nav.desktop-nav .dropdown-link.dd-ebene2 .dd-ico { width: 22px; height: 22px; } nav.desktop-nav .dropdown-link.dd-ebene2 .dd-ico svg { width: 18px; height: 18px; } nav.desktop-nav .dropdown-link.dd-ebene2 .dd-label { font-size: 0.825rem; font-weight: 550; } nav.desktop-nav .dropdown-link.dd-ebene2::after { left: 0.85rem; } /* Die aktuelle Seite */ nav.desktop-nav .dropdown-link.dd-aktiv { background: rgba(255,255,255,0.68) !important; } nav.desktop-nav .dropdown-link.dd-aktiv::after { transform: scaleY(1); } header.dark-mode nav.desktop-nav .dropdown-link.dd-aktiv { background: rgba(255,255,255,0.08) !important; } /* Trennlinie vor einer Gruppe */ nav.desktop-nav .dd-trenner { grid-column: 1 / -1; height: 1px; margin: 0.35rem 0.65rem; background: linear-gradient(90deg, rgba(64,104,119,0.16), rgba(64,104,119,0.02)); } header.dark-mode nav.desktop-nav .dd-trenner { background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02)); } /* ---------- Fusszeile des Untermenues ---------- */ nav.desktop-nav .dd-fuss { display: flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1.15rem 0.75rem; border-top: 1px solid rgba(64,104,119,0.10); font-size: 0.755rem; color: rgba(64,104,119,0.68); } header.dark-mode nav.desktop-nav .dd-fuss { border-top-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.62); } nav.desktop-nav .dd-fuss a { display: inline-flex; align-items: center; gap: 0.34rem; font-weight: 650; text-decoration: none; color: rgba(13,37,48,0.9); transition: color 0.25s ease; } header.dark-mode nav.desktop-nav .dd-fuss a { color: rgba(255,255,255,0.92); } nav.desktop-nav .dd-fuss a:hover { color: var(--color-neon-green-dark, #45bf70); } nav.desktop-nav .dd-fuss svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; } /* Der unsichtbare Steg zwischen Menuepunkt und Klappe: verhindert, dass sich das Untermenue schliesst, waehrend die Maus hinunterfaehrt. */ nav.desktop-nav .dropdown-content::after { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } @media (max-width: 1200px) { nav.desktop-nav .dropdown-content[data-spalten="2"] { min-width: 560px !important; } nav.desktop-nav .dropdown-link .dd-sub { display: none; } } @media (prefers-reduced-motion: reduce) { nav.desktop-nav .dropdown-content, nav.desktop-nav .dropdown-content::before, nav.desktop-nav .dropdown-link, nav.desktop-nav .dropdown-link::after, nav.desktop-nav .dropdown-link .dd-ico, nav.desktop-nav .dropdown-link .dd-pfeil { transition: none !important; animation: none !important; } nav.desktop-nav .dropdown-link { opacity: 1; translate: none; } } /* ===================================================================== MOBILES UNTERMENUE – zweite Ebene und Beschreibungszeile ===================================================================== */ .mobile-submenu-link.dd-ebene2 { padding-left: 2.4rem; opacity: 0.92; } .mobile-submenu-link .sub-sub { display: block; font-size: 0.72rem; opacity: 0.6; margin-top: 1px; } /* --------------------------------------------------------------------- Bis 1180 px rueckt das Logo auf 150 px zusammen, damit die Menuepunkte Platz behalten. Schriftgroesse und Innenabstand der Punkte stehen ganz unten in dieser Datei ("FLIESSENDE MENUELEISTE"). --------------------------------------------------------------------- */ @media (min-width: 993px) and (max-width: 1180px) { .logo-container { width: 150px; } } /* --------------------------------------------------------------------- DIE AKTUELLE SEITE IM KOPFMENUE ----------------------------------------------------------------- Kein Strich, sondern eine eigene Schriftfarbe: ein langsam wandernder Verlauf. Er richtet sich nach dem Zustand der Kopfzeile – heller Abschnitt Gruen -> Gold dunkler Abschnitt Weiss -> helles Kanzleiblau -> helles Gold Der Verlauf endet in derselben Farbe, in der er beginnt. Dadurch laeuft er ohne sichtbaren Sprung im Kreis. Der Menuepunkt ist auch dann markiert, wenn nur eine Unterseite seiner Klappe geoeffnet ist. --------------------------------------------------------------------- */ @keyframes raeAktivDrift { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } @media (min-width: 993px) { @supports (-webkit-background-clip: text) { nav.desktop-nav > a.ist-aktiv, nav.desktop-nav > .dropdown > a.ist-aktiv, nav.desktop-nav > a.ist-aktiv:hover, nav.desktop-nav > .dropdown > a.ist-aktiv:hover, nav.desktop-nav > .dropdown.open > a.ist-aktiv { background-image: linear-gradient(90deg, #45bf70 0%, #c9a227 25%, #45bf70 50%, #c9a227 75%, #45bf70 100%) !important; background-size: 200% 100% !important; background-repeat: repeat !important; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: raeAktivDrift 9s linear infinite !important; transition: none !important; font-weight: 600; } /* Heller Text auf dunklem Abschnitt: derselbe Gedanke, nur in lichten Toenen, damit die Schrift lesbar bleibt. */ header.dark-mode nav.desktop-nav > a.ist-aktiv, header.dark-mode nav.desktop-nav > .dropdown > a.ist-aktiv, header.dark-mode nav.desktop-nav > a.ist-aktiv:hover, header.dark-mode nav.desktop-nav > .dropdown > a.ist-aktiv:hover, header.dark-mode nav.desktop-nav > .dropdown.open > a.ist-aktiv { background-image: linear-gradient(90deg, #ffffff 0%, #a2c5d3 20%, #f0dca6 40%, #ffffff 60%, #a2c5d3 80%, #ffffff 100%) !important; } } /* Ohne background-clip: schlicht eine andere Farbe. */ @supports not (-webkit-background-clip: text) { nav.desktop-nav > a.ist-aktiv, nav.desktop-nav > .dropdown > a.ist-aktiv { color: var(--color-neon-green-dark, #45bf70); font-weight: 600; } header.dark-mode nav.desktop-nav > a.ist-aktiv, header.dark-mode nav.desktop-nav > .dropdown > a.ist-aktiv { color: var(--color-turquoise-light, #a2c5d3); } } } @media (prefers-reduced-motion: reduce) { nav.desktop-nav > a.ist-aktiv, nav.desktop-nav > .dropdown > a.ist-aktiv { animation: none !important; } } /* ===================================================================== KOPFZEILE – KORREKTUREN 2026-08 ===================================================================== Steht bewusst hier: menu.css ist auf JEDER Seite (auch der Startseite mit ihrem eingebetteten Stil) das letzte Stylesheet und darf deshalb die aelteren Regeln aus chrome.css bzw. dem Seitenkopf ueberstimmen. 1) Logo verweist auf die Startseite (includes/header.html) 2) Menue-Button: dickere Striche, SVG-Morph Hamburger -> X, als X im Hover-Verlauf der Desktop-Menuepunkte 3) Handy-Menue: Logo-Raute neben den Hauptpunkten 4) Handy-Menue: aktuelle Seite als wandernder Gruenverlauf ===================================================================== */ /* ---------- 0) Kopfzeile nutzt die Luft nach aussen ---------- */ /* Statt fester 2rem Seitenabstand: Logo rueckt nach links, die Symbolgruppe nach rechts. Am Handy ~11px, am Schreibtisch 20px. */ header { padding-left: clamp(0.7rem, 2vw, 1.25rem); padding-right: clamp(0.7rem, 2vw, 1.25rem); } /* ---------- 1) Logo -> Startseite ---------- */ /* Der Verweis fuellt den Logo-Rahmen (200x50); .logo-mark liegt darin und fuellt ihn wie bisher per position:absolute. */ .logo-container .logo-link { position: absolute; inset: 0; display: block; } /* ---------- 2) Menue-Button: Hamburger -> X (SVG-Morph) ---------- */ /* Das SVG steht in includes/header.html (viewBox 0 0 100 100). Jeder aeussere Pfad enthaelt den geraden Strich UND den Bogen zur Diagonalen; das Dash-Fenster zeigt geschlossen nur die geraden 60 Einheiten und wandert geoeffnet auf die Diagonalen (25/25-75/75): ein echtes, symmetrisches X. */ .mobile-menu-btn { padding: 0 !important; } .mobile-menu-btn .menu-icon { width: 100% !important; height: 100% !important; display: block !important; transform-origin: 50% 50%; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } /* Als X etwas kleiner (~13%), damit es zur Groesse der Kopf-Icons passt */ .mobile-menu-btn.active .menu-icon { transform: scale(0.86); } .mobile-menu-btn .menu-icon .line { fill: none; /* Strichton wie das Mail-Icon daneben; Staerke 7/100 ergibt beim 46-50px-Button ~3,2px – die Strichstaerke der Kopf-Icons. */ stroke: rgba(64,104,119,0.92); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease; } header.dark-mode .mobile-menu-btn .menu-icon .line { stroke: rgba(255,255,255,0.92); } /* Dash-Fenster: Gesamtlaenge der aeusseren Pfade ~207, die Diagonale beginnt bei ~136 – das offene Fenster 134..224 zeigt genau sie. */ .mobile-menu-btn .menu-icon .line1, .mobile-menu-btn .menu-icon .line3 { stroke-dasharray: 60 207; } .mobile-menu-btn .menu-icon .line2 { stroke-dasharray: 60 60; } .mobile-menu-btn.active .menu-icon .line1, .mobile-menu-btn.active .menu-icon .line3 { stroke-dasharray: 90 207; stroke-dashoffset: -134; } .mobile-menu-btn.active .menu-icon .line2 { stroke-dasharray: 1 60; stroke-dashoffset: -30; } /* Solange das X steht (Menue offen): wandernder Verlauf in Gruentoenen (raeMenuXGrad im Button-SVG, per SMIL animiert). Gilt auch ueber dunklen Abschnitten. */ .mobile-menu-btn.active .menu-icon .line, header.dark-mode .mobile-menu-btn.active .menu-icon .line { stroke: url(#raeMenuXGrad); } /* ---------- 3) Handy-Menue: Bild neben den Hauptpunkten ---------- */ /* Die Rechtsgebiete (Mietrecht, Immobilienrecht, Unfallregulierung, Rechtsgebiete) tragen ihr Themensymbol – dasselbe Bild wie am Schreibtisch. Es ist gezeichnet, nicht gefuellt; Groesse und Farbe wie die Symbole im Aufklapper darunter. Home, Team, Karriere und Kontakt behalten die Logo-Raute (Regeln direkt darunter). */ .mobile-menu svg.nav-thema-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: rgba(255,255,255,0.92); opacity: 0.95; } .mobile-menu.light svg.nav-thema-ico { stroke: rgba(13,37,48,0.82); } /* ---------- 3) Handy-Menue: Logo-Raute neben den Hauptpunkten ---------- */ .mobile-menu svg.nav-logo-ico { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; opacity: 0.95; } /* Punkte OHNE Klappe (Home, Team, Karriere, Kontakt): Raute in sehr hellem Grau, damit die Klapp-Punkte staerker hervortreten. */ .mobile-menu nav > a > svg.nav-logo-ico { fill: rgba(214,222,226,0.55); } .mobile-menu.light nav > a > svg.nav-logo-ico { fill: rgba(13,37,48,0.22); } /* ---------- 4) Handy-Menue: aktuelle Seite im Gruenverlauf ---------- */ /* Gleiche Technik wie die Markierung im Desktop-Menue (raeAktivDrift weiter oben), nur in Gruentoenen. Beginn- und Endfarbe sind gleich, dadurch laeuft der Verlauf ohne Sprung im Kreis. */ @supports (-webkit-background-clip: text) { .mobile-menu a.ist-aktiv .nav-wort, .mobile-menu .mobile-menu-toggle.ist-aktiv .nav-wort, .mobile-menu .mobile-submenu-link.dd-aktiv .sub-label { background-image: linear-gradient(90deg, #45bf70 0%, #51e184 30%, #9df2b9 50%, #51e184 70%, #45bf70 100%) !important; background-size: 200% 100% !important; background-repeat: repeat !important; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: raeAktivDrift 9s linear infinite; font-weight: 600; } /* Helle Fassung des Menues: dunklere Gruentoene, damit die Schrift auf dem hellen Glas lesbar bleibt. */ .mobile-menu.light a.ist-aktiv .nav-wort, .mobile-menu.light .mobile-menu-toggle.ist-aktiv .nav-wort, .mobile-menu.light .mobile-submenu-link.dd-aktiv .sub-label { background-image: linear-gradient(90deg, #2f9e57 0%, #45bf70 30%, #51e184 50%, #45bf70 70%, #2f9e57 100%) !important; } } /* Ohne background-clip: schlicht Gruen. */ @supports not (-webkit-background-clip: text) { .mobile-menu a.ist-aktiv .nav-wort, .mobile-menu .mobile-menu-toggle.ist-aktiv .nav-wort, .mobile-menu .mobile-submenu-link.dd-aktiv .sub-label { color: var(--color-neon-green, #51e184); font-weight: 600; } .mobile-menu.light a.ist-aktiv .nav-wort, .mobile-menu.light .mobile-menu-toggle.ist-aktiv .nav-wort, .mobile-menu.light .mobile-submenu-link.dd-aktiv .sub-label { color: var(--color-neon-green-dark, #45bf70); } } @media (prefers-reduced-motion: reduce) { .mobile-menu-btn .menu-icon { transition: none !important; } .mobile-menu-btn .menu-icon .line { transition: none !important; } .mobile-menu a.ist-aktiv .nav-wort, .mobile-menu .mobile-menu-toggle.ist-aktiv .nav-wort, .mobile-menu .mobile-submenu-link.dd-aktiv .sub-label { animation: none !important; } } /* ===================================================================== KOPFZEILE – FLIESSENDE MENUELEISTE (Schreibtisch) 2026-08 ===================================================================== Frueher stand die Menueleiste als absolut positionierter Block in der Mitte der Kopfzeile. Sie war damit so breit wie ihre Woerter – links und rechts blieb Luft stehen, und bei knapper Fensterbreite lief sie in das Logo bzw. in die Symbole hinein. Jetzt ist die Kopfzeile eine Reihe aus drei Gliedern: [ Logo ] [ ------------ Menue ------------ ] [ Brief · Hoerer ] ^ nimmt den gesamten Rest ein Das Menue verteilt seine Punkte mit "space-between" ueber diesen Rest. Dadurch waechst der Abstand zwischen den Punkten mit dem Fenster mit, und der erste bzw. letzte Punkt steht immer bis an den Rand – mit genau einem kleinen Sicherheitsabstand (--nav-luft) zum Logo und zur Symbolgruppe. Schriftgroesse und Innenabstand der Punkte sind Rechnungen, keine Stufen: Beide wachsen linear mit der Fensterbreite und stehen an ihren Enden still (clamp). Von 993 px bis rund 1500 px geht die Schrift von 0,80 rem auf 0,98 rem. Wird es trotzdem zu eng, verschwinden Punkte – in dieser Reihenfolge: unter 1230 px Karriere (.rae-weg-1) unter 1060 px Kontakt (.rae-weg-2) Welcher Punkt welche Klasse traegt, steht in config/site.js (weglassbar: 1 bzw. 2). Beide bleiben im Handy-Menue und in der Fusszeile erreichbar; Brief- und Hoerersymbol daneben fuehren ohnehin direkt zur Kanzlei. ===================================================================== */ @media (min-width: 993px) { /* Die drei Glieder der Reihe. .header-inner ist schon ein Flexbox- Container (chrome.css); hier bekommt er nur den Abstand und die Verteilung, die zur neuen Aufteilung passt. */ .header-inner { --nav-luft: clamp(0.45rem, 1.1vw, 1.15rem); justify-content: flex-start; gap: var(--nav-luft); } .logo-container { flex: 0 0 auto; } .header-right { flex: 0 0 auto; } /* Das Menue nimmt den ganzen Rest ein. min-width:0 ist noetig, damit es in einer Flexbox auch wirklich schmaler werden darf. */ nav.desktop-nav { --nav-pad: clamp(0.32rem, 0.95vw, 1.35rem); position: static; left: auto; transform: none; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0; } /* Innenabstand und Schrift atmen mit dem Fenster. Der Innenabstand steckt in --nav-pad, weil der Hover-Strich darunter (::after) genau dieselbe Breite braucht. */ nav.desktop-nav > a, nav.desktop-nav > .dropdown > a { padding: 0.75rem var(--nav-pad); font-size: clamp(0.80rem, 0.60vw + 0.43rem, 0.98rem); } nav.desktop-nav > a::after, nav.desktop-nav > .dropdown > a::after { left: var(--nav-pad); right: var(--nav-pad); } /* Punkte, die bei knapper Kopfzeile weichen. Die beiden Schwellen sind gemessen, nicht geraten: Sie liegen dort, wo der Abstand zwischen zwei Menuewoertern unter rund 18 px faellt – ab da stehen die Woerter zu dicht beieinander. mit acht Punkten reicht der Platz bis 1230 px mit sieben Punkten bis hinunter zu 993 px Unter 993 px uebernimmt ohnehin das Handy-Menue. */ @media (max-width: 1229.98px) { nav.desktop-nav > .rae-weg-1, nav.desktop-nav > .dropdown.rae-weg-1 { display: none; } } @media (max-width: 1059.98px) { nav.desktop-nav > .rae-weg-2, nav.desktop-nav > .dropdown.rae-weg-2 { display: none; } } } /* Bis 1180 px rueckt das Logo schon bisher auf 150 px zusammen (Regel weiter oben). Darunter wird auch die Symbolgruppe knapper, damit das Menue seine Punkte behaelt. */ @media (min-width: 993px) and (max-width: 1120px) { .header-right { gap: 0.5rem; } .header-actions { gap: 0.35rem; } .header-icon-btn { width: 42px; height: 42px; } } /* ===================================================================== FUSSZEILE DER KLAPPE – ANSPRACHE UND WEG INS KONTAKTFORMULAR ===================================================================== Aufbau aus assets/js/site-config.js (baueFuss): .dd-fuss .dd-fuss-text kurze Ansprache, laeuft um .dd-fuss-link "Zum Kontaktformular Mietrecht" + Pfeil Der Verweis steht rechts und bricht nie um. ===================================================================== */ nav.desktop-nav .dd-fuss-text { flex: 1 1 auto; min-width: 0; line-height: 1.4; } nav.desktop-nav .dd-fuss-link { flex: 0 0 auto; white-space: nowrap; } /* Der Pfeil ruckt beim Zeigen ein Stueck weiter – dieselbe Bewegung wie im Eintrag darueber. */ nav.desktop-nav .dd-fuss-link svg { transition: transform 0.25s ease; } nav.desktop-nav .dd-fuss-link:hover svg { transform: translateX(3px); } /* ===================================================================== KOPFZEILE UND HANDY-MENUE – KORREKTUREN 2026-08 (zweiter Durchgang) ===================================================================== Steht wie der Rest dieser Datei ganz unten, weil menu.css auf JEDER Seite das letzte Stylesheet ist – auch auf der Startseite, die ihren Stil noch im Kopf mitfuehrt. 1) Brief- und Hoerersymbol: kein Anheben mehr, mehr Luft dazwischen, die obere Klappe des Briefes klappt auf 2) mehr Luft zwischen dem letzten Menuewort und dem Briefsymbol 3) Handy-Menue: das Wort fuehrt auf die Uebersichtsseite, nur das rechte Fuenftel klappt das Untermenue auf 4) Handy-Menue: das Symbol der aktuellen Seite laeuft im selben Gruenverlauf mit wie ihr Wort 5) Handy-Menue: die kleine zweite Zeile bleibt auch bei der aktuellen Seite lesbar ===================================================================== */ /* ---------- 1a) Kein Anheben beim Ueberfahren ---------- */ /* Frueher fuhren beide Symbole bei Hover einen Pixel nach oben. Die Bewegung steckt jetzt allein im Symbol selbst: der Hoerer dreht sich leicht (chrome.css, --phone-rotate), der Brief klappt auf. */ .header-icon-btn:hover, .header-icon-btn:focus-visible, .header-icon-btn:active, .header-icon-btn.is-press { transform: none !important; } /* ---------- 1b) Der Brief rueckt vom Hoerer ab ---------- */ @media (min-width: 993px) { .header-actions { gap: clamp(1rem, 1.6vw, 1.5rem) !important; } } /* ---------- 1c) Die Klappe des Briefsymbols ---------- */ /* Markup: includes/header.html (svg.mail-emblem). Die Klappe dreht sich um ihre Oberkante nach oben – am Schreibtisch beim Ueberfahren, am Handy beim Tippen (assets/js/chrome.js setzt dafuer .is-press). overflow:visible, weil die aufgeklappte Falte ueber den Rahmen des Symbols hinausragt; Platz dafuer ist im 46px grossen Knopf. */ .header-icon-btn .mail-emblem { display: block; overflow: visible; } .header-icon-btn .mail-emblem .mail-klappe { transform-box: fill-box; transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.34, 1.25, 0.5, 1); } .header-icon-btn.header-mail:hover .mail-klappe, .header-icon-btn.header-mail:focus-visible .mail-klappe, .header-icon-btn.header-mail:active .mail-klappe, .header-icon-btn.header-mail.is-press .mail-klappe { transform: scaleY(-1); } /* Der waagerechte Steg zwischen den Enden der beiden Schraegen. Zwei Haelften, jede mit ihrem Drehpunkt am AEUSSEREN Ende: beim Aufklappen wachsen sie aus den Enden der Schraegen zur Mitte hin und treffen sich dort. Geschlossen stehen beide auf Breite null, sonst raendern sie links und rechts unter der Klappe hervor. Dauer bewusst die HALBE der Klappe: 0,25 s gegen 0,5 s. Nach 0,25 s ist der Steg geschlossen; die Klappe braucht bis dahin nur noch ihr Nachfedern (ihre Kurve ist vorn sehr schnell, nach 0,25 s steht sie schon fast ganz offen). Kurve ohne Ueberschwinger: mit dem federnden Takt der Klappe waeren die Haelften vorzeitig zusammen und haetten sich danach ueberlappt. So treffen sie sich genau am Ende ihrer Bewegung. */ .header-icon-btn .mail-emblem .mail-steg { transform-box: view-box; transform: scaleX(0); transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } .header-icon-btn .mail-emblem .mail-steg-l { transform-origin: 6.8px 11.6px; } .header-icon-btn .mail-emblem .mail-steg-r { transform-origin: 17.2px 11.6px; } .header-icon-btn.header-mail:hover .mail-steg, .header-icon-btn.header-mail:focus-visible .mail-steg, .header-icon-btn.header-mail:active .mail-steg, .header-icon-btn.header-mail.is-press .mail-steg { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { .header-icon-btn .mail-emblem .mail-klappe, .header-icon-btn .mail-emblem .mail-steg { transition: none !important; } } /* ---------- 2) Luft zwischen letztem Menuewort und Briefsymbol ---------- */ /* Bisher stand "Kontakt" fast am Briefsymbol. Der Abstand betraegt jetzt ungefaehr so viel wie der Abstand zweier Menuewoerter zueinander: dort sind es zweimal --nav-pad plus die verteilte Restbreite. */ @media (min-width: 993px) { nav.desktop-nav { margin-right: calc(var(--nav-pad) * 1.3); } } /* ---------- 3) Handy-Menue: geteilte Zeile ---------- */ /* Aufbau aus assets/js/site-config.js (baueMobilMenu): .mobile-menu-toggle a.toggle-title Raute + Wort -> Uebersichtsseite .toggle-icon Winkel -> klappt das Untermenue auf Die Tippflaeche des Winkels ist bewusst groesser als er selbst: das rechte Fuenftel der Zeile (::after) klappt auf, die uebrigen vier Fuenftel fuehren auf die Seite. Der Aufklapper enthaelt deshalb keinen Eintrag "Übersicht …" mehr. */ .mobile-menu .mobile-menu-toggle { position: relative; padding: 0 !important; } .mobile-menu .mobile-menu-toggle .toggle-title { flex: 1 1 auto; min-width: 0; padding: 0.95rem 0.25rem; color: inherit; font-size: inherit; font-weight: inherit; text-decoration: none; background: none; border-bottom: none; } .mobile-menu .mobile-menu-toggle .toggle-title:hover { background: none; color: inherit; transform: none; } .mobile-menu .mobile-menu-toggle .toggle-icon { position: relative; z-index: 1; margin-right: 0.25rem; cursor: pointer; } .mobile-menu .mobile-menu-toggle::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20%; cursor: pointer; } /* ---------- 4) Symbol der aktuellen Seite laeuft mit ---------- */ /* Die Verlaufsdefinitionen stehen in includes/header.html (raeNavAktivGrad fuer die Logo-Raute, raeNavAktivGradKlein fuer die Themensymbole). Die Toene kommen von hier, damit die helle Fassung des Menues dunklere Gruentoene bekommt – wie beim Wort daneben. */ .mobile-menu { --nav-grad-a: #45bf70; --nav-grad-b: #51e184; --nav-grad-c: #9df2b9; } .mobile-menu.light { --nav-grad-a: #2f9e57; --nav-grad-b: #45bf70; --nav-grad-c: #51e184; } .mobile-menu a.ist-aktiv > svg.nav-logo-ico, .mobile-menu .mobile-menu-toggle.ist-aktiv .toggle-title > svg.nav-logo-ico { fill: url(#raeNavAktivGrad) !important; opacity: 1 !important; } .mobile-menu .mobile-submenu-link.dd-aktiv > svg { stroke: url(#raeNavAktivGradKlein) !important; opacity: 1 !important; } /* Themensymbol eines Hauptpunkts: gezeichnet statt gefuellt, deshalb der Verlauf auf dem Strich – und im kleinen Netz (0-24) wie die Symbole im Aufklapper. */ .mobile-menu a.ist-aktiv > svg.nav-thema-ico, .mobile-menu .mobile-menu-toggle.ist-aktiv .toggle-title > svg.nav-thema-ico { stroke: url(#raeNavAktivGradKlein) !important; opacity: 1 !important; } .mobile-menu .rae-menu-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- 5) Die kleine zweite Zeile bleibt lesbar ---------- */ /* Das Wort der aktuellen Seite traegt den Verlauf als Schriftfarbe – dazu gehoert -webkit-text-fill-color: transparent. Das vererbt sich auf die zweite Zeile INNERHALB der Beschriftung; sie verschwand dadurch. Hier bekommt sie ihre Farbe zurueck. */ .mobile-menu .mobile-submenu-link.dd-aktiv .sub-label .sub-sub { -webkit-text-fill-color: currentColor; background: none; background-image: none; font-weight: 400; animation: none; }