—
damit ist die Tastaturbedienung (Tab → Enter/Leertaste) ohne
eigenes JS gegeben; das Skript im Nav-Block schliesst nur
Nachbarmenues, den Klick nach draussen und Escape.
Reihenfolge im Quelltext: dieser Block steht am ENDE der Datei
und schlaegt deshalb die aelteren Nav-Regeln (Z. 73-81, 367-385)
bei gleicher Spezifitaet.
============================================================ */
/* ---- Antippflaechen: die alten Navi-Links waren 24 px hoch ---- */
.navlinks > a{display:inline-flex;align-items:center;min-height:44px}
.nav-toggle{min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center;padding:0}
/* Der Knopf war auf dem Handy nur 36 px hoch (Zeile 377 kuerzt das Polster). */
.nav-right .btn{min-height:44px}
/* ---- Aufklapp-Menue (Desktop) ---- */
.nav-dd{position:relative}
.nav-dd > summary{display:inline-flex;align-items:center;gap:7px;min-height:44px;
cursor:pointer;list-style:none;font-weight:500;color:var(--muted);
-webkit-tap-highlight-color:transparent}
.nav-dd > summary::-webkit-details-marker{display:none}
.nav-dd > summary::after{content:"";width:6px;height:6px;flex:none;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:translateY(-2px) rotate(45deg);transition:transform .15s ease}
.nav-dd > summary:hover,.nav-dd[open] > summary,.nav-dd.aktiv > summary{color:var(--ink)}
.nav-dd[open] > summary::after{transform:translateY(1px) rotate(-135deg)}
/* Aktive Seite: der Elternpunkt bekommt einen Unterstrich. */
.navlinks .aktiv > summary,.navlinks a[aria-current="page"]{color:var(--ink);
box-shadow:inset 0 -2px 0 0 var(--teal)}
.nav-dd-menu{position:absolute;top:calc(100% + 12px);left:-14px;z-index:60;
min-width:280px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r);box-shadow:var(--shadow);padding:8px;
display:flex;flex-direction:column;gap:2px}
.nav-dd-menu a{display:flex;align-items:center;min-height:44px;padding:9px 14px;
border-radius:12px;font-size:14.5px;font-weight:500;color:var(--muted);
line-height:1.35;transition:background .12s ease,color .12s ease}
.nav-dd-menu a:hover,.nav-dd-menu a:focus-visible{background:var(--teal-2);color:var(--teal)}
/* „Alle Funktionen im Ueberblick" fuehrt die Liste an. */
.nav-dd-menu a.nav-dd-top{color:var(--ink);font-weight:600;
border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;margin-bottom:4px}
/* Gruppen im „Fuer dein Studio"-Menue (Keramik / Werkstatt & Genuss /
Anlaesse), je als fuer Screenreader — die sichtbare
Ueberschrift (.nav-dd-group-h) bleibt darin. Kein eigener Fall im
Burger-Breakpoint noetig — Flex-Spalte bleibt dort erhalten. */
.nav-dd-group{display:flex;flex-direction:column;gap:2px}
.nav-dd-group-h{display:block;padding:10px 14px 4px;font:600 11px/1 var(--body);
letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.nav-dd-menu>.nav-dd-group:first-child .nav-dd-group-h{padding-top:4px}
/* „Umstieg von anderen Systemen" ist kein Anlass — steht bewusst ausserhalb
der Gruppen, abgesetzt durch eine Trennlinie statt einer Ein-Link-Gruppe. */
.nav-dd-menu a.nav-dd-sep{margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
/* ---- Burger frueher: die Kopfzeile brach ab ~1060 px dreizeilig um ----
(gemessen 13.08.: bei 768 px war „Was ist neu" 72 px hoch = 3 Zeilen;
mit zwei zusaetzlichen Menuepunkten wuerde das schlimmer.)
Korrigiert 13.08.: Umbruchzone lag bei 1061–1159 px (Burger endete bei
1060, Vollnav passte erst ab 1160 — „Fuer dein Studio"/„Was ist neu"
brachen zweizeilig, betrifft z. B. 1152er-Notebooks). Breakpoint auf
1160 angehoben; gekoppelte Stelle: update-nav.py matchMedia.
Neu gemessen 14.08. (nach Entfernen von „Was ist neu" aus der Nav, per
Playwright-Feinsweep in 1px-Schritten gegen public-next, Kriterium:
distinkte top-Werte gerenderter .navlinks-Kinder mit width>0&&height>0 —
Kopfhoehe allein zeigt den Umbruch nicht): 2-zeilig bis 1105px, ab 1106px
einzeilig. Breakpoint auf 1120 gesenkt (1106 + kleine Reserve, auf 20er
gerundet); gekoppelte Stelle: update-nav.py matchMedia.
Erneut gemessen 14.08. (nach Entfernen von „Vorteile" aus der Nav, gleiche
Feinsweep-Methode gegen public-next): 2-zeilig bis 1022px, ab 1023px
einzeilig. Breakpoint auf 1040 gesenkt (1023 + kleine Reserve, auf 20er
gerundet); gekoppelte Stelle: update-nav.py matchMedia. */
@media(max-width:1040px){
.navlinks{display:none}
.nav-toggle{display:inline-flex}
.nav.open .navlinks{display:flex;position:absolute;top:76px;left:0;right:0;
flex-direction:column;gap:0;background:var(--bg);
border-bottom:1px solid var(--line);padding:8px 18px 18px;
max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain}
.nav.open .navlinks > a{padding:12px 0;border-bottom:1px solid var(--line);width:100%}
/* Gruppen werden zu Ueberschriften mit eingerueckten Links — kein Hover. */
.nav.open .nav-dd{position:static;width:100%}
.nav.open .nav-dd > summary{width:100%;padding:16px 0 6px;cursor:default;
font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:var(--muted);opacity:.75}
.nav.open .nav-dd > summary::after{display:none}
.nav.open .nav-dd.aktiv > summary,.nav.open .navlinks .aktiv > summary{box-shadow:none;color:var(--teal)}
.nav.open .nav-dd-menu{position:static;min-width:0;background:none;border:0;
box-shadow:none;padding:0;gap:0}
.nav.open .nav-dd-menu a{padding:11px 0 11px 14px;border-radius:0;
border-bottom:1px solid var(--line);font-size:15px}
.nav.open .nav-dd-menu a:hover{background:none;color:var(--muted)}
.nav.open .nav-dd-menu a.nav-dd-top{color:var(--ink);margin-bottom:0;border-radius:0}
/* Der vorherige Link hat schon eine Trennlinie (border-bottom) — hier reicht
der zusaetzliche Abstand, keine zweite Linie direkt daneben. */
.nav.open .nav-dd-menu a.nav-dd-sep{border-top:0;padding-top:11px;margin-top:10px}
}
@media(hover:none){
.nav-dd-menu a:hover{background:none;color:var(--muted)}
.nav-dd-menu a.nav-dd-top:hover{color:var(--ink)}
}
/* ---- Sprungleiste: bei schmalen Fenstern lief der linke Rand ins Aus ----
justify-content:center + overflow-x:auto schneidet den Anfang ab, wenn die
Leiste breiter ist als das Fenster (gemessen 390 px: erster Knopf bei
-282 px, 768 px: -93 px — beide unerreichbar). Unterhalb 1200 px linksbuendig. */
@media(max-width:1200px){
.feature-jump .wrap{justify-content:flex-start;scroll-padding-inline:var(--gut)}
}
/* Ganz ans Dateiende, mit Absicht: der Burger-Block bei 1040px setzt weiter
oben `.logo img{height:28px}`. Bei gleicher Spezifitaet gewinnt die spaetere
Regel — stuende dieser Block frueher, waere er wirkungslos (05.09.2026 genau
so passiert).
Unter 400px wird es eng: Logo (143px) + Knopf + Burger passen sonst nicht
nebeneinander. Statt das Logo zu stauchen, wird der Knopf kuerzer und die
Abstaende enger — das Logo behaelt sein Verhaeltnis. */
@media(max-width:380px){
.nav{gap:12px}
.nav-right{gap:8px}
.btn-lang{display:none}
.btn-kurz{display:inline}
.logo img{width:132px;height:auto}
}