/* ============================================================ Mobile Navigation — Burger und Schublade ============================================================ Warum eine eigene Datei: Die Seite hat zwei Einstiegspunkte mit unterschiedlichen Haupt-Stylesheets. index.php laedt rmn-2026.css, alle uebrigen Seiten laufen ueber includes/header.php und laden main.css. Burger und Schublade standen nur in rmn-2026.css. Auf den Unterseiten gab es deshalb GAR KEINE mobile Navigation: Gemessen bei 390px Breite standen dort alle neun Verweise nebeneinander in der Leiste, waehrend die Startseite korrekt einen Burger zeigte. Verschaerft hat sich das durch den Divisions-Umbau — die Leiste waechst von fuenf auf neun Eintraege. Was bei fuenf gerade noch ging, geht bei neun nicht mehr. Dieselbe Loesung wie beim Einwilligungsbanner und der Projektkarte: eine Fassung, von beiden Einstiegspunkten geladen. Die Werte stammen aus rmn-2026.css, damit die Startseite sich nicht veraendert. ============================================================ */ /* Das !important ist hier nicht Bequemlichkeit, sondern noetig: main.css enthaelt eine spaetere Regel .nav-ctas a, .nav-ctas button { display:inline-flex !important } die den Burger auch auf breiten Bildschirmen sichtbar liess — neben der vollen Leiste. Diese Regel mit dem Burger zu entschaerfen waere riskanter: Sie haelt die Handlungsaufforderung daneben in Form. Deshalb wird sie hier gezielt fuer den Burger uebersteuert. */ .burger, .nav-ctas .burger{ display:none !important; width:38px; height:38px; border:1px solid var(--line-2, var(--hairline-2, #2c2c30)); background:transparent; color:var(--paper, var(--fg, #fafafa)); cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto; } /* Der Burger ist ein Symbolknopf, kein Textknopf. Die Regel .nav-ctas a, .nav-ctas button { height:36px !important; padding:8px 14px !important; gap:6px !important; } ist fuer die Handlungsaufforderung daneben gedacht. Auf den Burger angewendet frassen die 14px Innenabstand je Seite 28 der 38px Breite — fuer das 17px-Symbol blieben 10, und als Flex-Kind schrumpfte es auf 8px. Die drei Striche wurden so eng zusammengedrueckt, dass sie sich als zwei lasen. Deshalb hier auf die Werte der Startseite zurueckgesetzt: 38x38, ohne Innenabstand, Symbol 17x17 und nicht schrumpfbar. */ .nav-ctas .burger{ height:38px !important; width:38px !important; padding:0 !important; gap:0 !important; border:1px solid var(--line-2, #2c2c30) !important; border-radius:0 !important; } .burger svg, .nav-ctas .burger svg{ width:17px !important; height:17px !important; flex:0 0 auto; } /* Ab dieser Breite passt die Leiste nicht mehr: Menue in die Schublade, Zweitknopf raus, Burger sichtbar. */ @media (max-width:940px){ .nav-links, .nav-actions .btn--ghost, .nav-ctas .btn--ghost{ display:none; } .burger, .nav-ctas .burger{ display:inline-flex !important; } } .drawer{ position:fixed; inset:var(--nav-h, 64px) 0 0 0; z-index:55; background:var(--ink, var(--bg, #0a0a0a)); transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); display:flex; flex-direction:column; padding:var(--pad, 24px); overflow-y:auto; } .drawer.open{ transform:translateX(0); } .drawer a{ font-size:32px; font-weight:500; letter-spacing:-.02em; padding:16px 0; border-bottom:1px solid var(--line, var(--hairline, #1c1c1c)); display:flex; align-items:baseline; gap:16px; text-decoration:none; color:inherit; } .drawer a .n{ font-family:var(--mono); font-size:12px; color:var(--signal, var(--orange, #ff6a00)); letter-spacing:.1em; } .drawer .btn{ margin-top:26px; justify-content:center; font-size:13px; padding:16px; } /* Bei geoeffneter Schublade darf der Seiteninhalt nicht mitscrollen — sonst verliert man beim Schliessen die Position. Das Skript setzt diese Klasse auf . */ body.drawer-open{ overflow:hidden; }