/** * Fullscreen-Menue (Simon-Auftrag 2026-08-16, Vorbild constanze-buttmann.de: runder->jetzt * kreisloser Button morpht zu X, Overlay reveal't per clip-path-Kreis ab Button-Mitte, * Nav-Links faden/rutschen gestaffelt ein). Faerben/Schrift aus Grace's eigenen main.css- * Tokens (--font-heading = Cormorant, wie im Logo-Schriftzug .site-header__logo-title). * * Nachbesserung 1 (selber Tag): kein Kreis-Hintergrund mehr, weisse statt dunkle Striche * (minimal kuerzer/dicker), Button exakt vertikal im 70px-Header zentriert, Overlay-BG * testweise #404040, Sprachumschalter als staendig sichtbare DE/EN-Reihe statt Dropdown. * * Nachbesserung 2 (selber Tag, "insbes. auf Mobilgeraeten soll das Constanze-Style Menue * sein"): war bisher NUR @media(min-width:768px) aktiv, das alte, in mehreren Fix-Runden * pixelgenau ans Bricks-Original angeglichene Offcanvas-Panel (.mobile-menu-toggle/ * .mobile-menu-overlay, <=767px) blieb bewusst unangetastet stehen. Jetzt auf expliziten * Simon-Wunsch aufgehoben: dieses Stylesheet ist ab sofort UNGATED (kein min-width mehr), * das alte Mobile-Panel wird stattdessen hier hart auf display:none gesetzt (PHP-Markup + * main.js-Listener bleiben unangetastet liegen, sind aber unerreichbar -- kein Restrisiko, * volle Rueckbaubarkeit falls je wieder gewuenscht). Overlay-BG auf reines Schwarz (#000) * final gesetzt, Nav-Links minimal mehr Letter-Spacing + Font-Weight 700 (vorher 600). * Zusaetzlich responsive Feinschliff fuer sehr kleine/kurze Viewports (Schriftgroesse * @media(max-width:480px), Overflow-Scroll-Fallback fuer Querformat-Handys mit wenig * Hoehe) -- auf ausdruecklichen Wunsch "auf allen Zwischenaufloesungen" getestet. */ :root{ --gk-fs-bg:#000; } .site-header__inner{padding:0 var(--header-edge);justify-content:center;} /* Altes Offcanvas-System (<=767px, mehrere Fix-Runden pixelgenau ans Original angeglichen) UND die alten Desktop-Inline-Nav-Gruppen (>=768px, main.css .site-header__nav{display:flex} default) sitewide ausser Dienst -- ersetzt durch das hier ungated aktive Fullscreen-Menue. */ .site-header__nav, .mobile-menu-toggle, .mobile-menu-overlay, .mobile-lang-switcher{display:none;} #gk-fs-toggle{ position:fixed; top:35px;right:16px; transform:translateY(-50%); width:56px;height:56px; background:none; border:none;padding:0;margin:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; cursor:pointer; z-index:1000000; transition:transform .35s ease; } #gk-fs-toggle:hover,#gk-fs-toggle:focus-visible{ transform:translateY(-50%) scale(1.08); } #gk-fs-toggle span{ display:block;width:20px;height:2.5px;background:var(--white);border-radius:2px; transition:transform .3s ease,opacity .3s ease; } #gk-fs-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg);} #gk-fs-toggle.is-open span:nth-child(2){opacity:0;} #gk-fs-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);} #gk-fs-overlay{ position:fixed;inset:0; background:var(--gk-fs-bg); z-index:999999; display:flex;flex-direction:column;align-items:center;justify-content:center; overflow-y:auto; padding:90px 24px 40px; pointer-events:none; clip-path:circle(0% at calc(100% - 44px) 35px); transition:clip-path .65s cubic-bezier(.65,0,.35,1); } #gk-fs-overlay.is-open{ pointer-events:auto; clip-path:circle(150% at calc(100% - 44px) 35px); } #gk-fs-overlay nav{ display:flex;flex-direction:column;align-items:center;gap:26px; } #gk-fs-overlay nav a{ font-family:var(--font-heading); font-weight:700; letter-spacing:.6px; font-size:2.75rem; color:var(--primary); text-decoration:none; text-align:center; opacity:0; transform:translateY(18px); transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1),color .3s; } #gk-fs-overlay.is-open nav a{opacity:1;transform:translateY(0);} #gk-fs-overlay.is-open nav a:nth-child(1){transition-delay:.08s;} #gk-fs-overlay.is-open nav a:nth-child(2){transition-delay:.14s;} #gk-fs-overlay.is-open nav a:nth-child(3){transition-delay:.20s;} #gk-fs-overlay.is-open nav a:nth-child(4){transition-delay:.26s;} #gk-fs-overlay.is-open nav a:nth-child(5){transition-delay:.32s;} #gk-fs-overlay nav a.is-active, #gk-fs-overlay nav a:hover, #gk-fs-overlay nav a:focus{color:var(--secondary);} #gk-fs-overlay .gk-fs-lang{ margin-top:36px; opacity:0; transform:translateY(18px); transition:opacity .5s,transform .5s cubic-bezier(.22,1,.36,1); } #gk-fs-overlay.is-open .gk-fs-lang{opacity:1;transform:translateY(0);transition-delay:.38s;} /* Toggle-Button+Chevron ausblenden, stattdessen das ohnehin vorhandene