/* KW Atelier – Hülle: Navigation (inkl. Burger, Off-Canvas, Bottom-Bar). Bedingt geladen (nav_enabled). Gescoped .kwat-*. Doku: assets/css/frontend/CLAUDE.md */ /* ── Navigation: volle Breite, sticky ────────────────────────────────── */ .kwat-nav { position: sticky; top: var(--kwat-adminbar, 0px); z-index: 100; width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--kwat-color-surface) 88%, var(--kwat-color-secondary)), color-mix(in srgb, var(--kwat-color-bg) 92%, var(--kwat-color-secondary))); border-top: var(--kwat-nav-rule) solid color-mix(in srgb, var(--kwat-color-accent) 55%, transparent); border-bottom: var(--kwat-nav-rule) solid color-mix(in srgb, var(--kwat-color-accent) 55%, transparent); font-family: var(--kwat-font-body); transition: background var(--kwat-transition), box-shadow var(--kwat-transition), top var(--kwat-transition); } /* Liegt die Info-Leiste darüber, klebt die Navigation um deren Höhe versetzt; beim Scrollen blendet die PreNav aus und die Navigation rückt nach ganz oben. */ body.kwat-has-prenav .kwat-nav { top: calc(var(--kwat-adminbar, 0px) + var(--kwat-prenav-h, 42px)); } body.kwat-has-prenav.kwat-scrolled .kwat-nav { top: var(--kwat-adminbar, 0px); } /* `stretch` statt `center`: die Menüpunkte werden dadurch LEISTENHOCH. Vorher war das `

` nur textgroß, `top: 100%` der Karte begann also rund 20px INNERHALB der Leiste – daher der „aufgeklebt"-Eindruck. Logo und Werkzeuge zentrieren ihren Inhalt selbst. */ .kwat-nav__inner { display: flex; align-items: stretch; gap: clamp(1rem, 2.5vw, 2.4rem); width: 100%; max-width: var(--kwat-shell-max); min-height: var(--kwat-nav-h); margin-inline: auto; padding-inline: var(--kwat-shell-pad); transition: min-height var(--kwat-transition); } /* ── Sticky-Schrumpfen (JS setzt body.kwat-scrolled per Scroll-Hysterese) ─ */ body.kwat-scrolled .kwat-nav { background: color-mix(in srgb, var(--kwat-color-surface) 90%, transparent); box-shadow: var(--kwat-shadow-md); backdrop-filter: blur(10px); } body.kwat-scrolled .kwat-nav__inner { min-height: var(--kwat-nav-h-scrolled); } body.kwat-scrolled .kwat-nav__logo-img { height: 40px; } /* Eingeloggte Vorschau: WP-Adminleisten-Höhe als Variable setzen. Sie vererbt sich an Navigation UND Info-Leiste (egal ob `.admin-bar` an oder hängt), sodass beide korrekt darunter kleben. Besucher haben keine `.admin-bar` → 0px. */ .admin-bar { --kwat-adminbar: 32px; } @media screen and (max-width: 782px) { .admin-bar { --kwat-adminbar: 46px; } } /* ── Logo ────────────────────────────────────────────────────────────── */ .kwat-nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; } .kwat-nav__logo-img { display: block; width: auto; height: clamp(48px, 5vw, 62px); transition: height var(--kwat-transition); } .kwat-nav__brand-text { font-family: var(--kwat-font-heading); font-size: var(--kwat-text-lg); font-weight: 700; color: var(--kwat-color-text); } /* ── Menü ────────────────────────────────────────────────────────────── */ .kwat-nav__menu { display: flex; flex: 1; flex-wrap: wrap; align-items: stretch; gap: clamp(0.125rem, 0.6vw, 0.5rem); margin: 0; padding: 0; list-style: none; } .kwat-nav__item { position: relative; display: flex; margin: 0; } .kwat-nav__link { position: relative; display: inline-flex; align-items: center; gap: var(--kwat-space-1); padding-inline: clamp(0.5rem, 1vw, 0.875rem); color: var(--kwat-color-text); font-size: var(--kwat-text-base); font-weight: 500; text-decoration: none; } /* Der Unterstrich sagt AUSSCHLIESSLICH „hier bist du" (Auftraggeber-Entscheidung). Dass ein Menü offen ist, zeigen der gedrehte Pfeil und die Karte am Messingreiter – zwei Signale für denselben Zustand wären eine Dopplung. Alle Leisten-Regeln hängen bewusst an `.kwat-nav__menu > .kwat-nav__item` – ohne diesen Anker greifen sie über die gleichen Klassennamen bis in die Karte und ins Mobil-Menü hinein. */ .kwat-nav__menu > .kwat-nav__item > .kwat-nav__link::after { content: ""; position: absolute; left: clamp(0.5rem, 1vw, 0.875rem); right: clamp(0.5rem, 1vw, 0.875rem); bottom: 0; height: 3px; background: var(--kwat-color-accent-hover); transform: scaleX(0); transform-origin: left; transition: transform var(--kwat-duration-base) var(--kwat-ease-emphasis); } /* Gilt auch für `current-menu-ancestor` (der Walker setzt `is-active` dafür mit): auf einer Unterseite sieht man dadurch, in welchem Bereich man steckt. */ .kwat-nav__menu > .kwat-nav__item > .kwat-nav__link.is-active::after { transform: scaleX(1); } /* Ein Punkt mit Karte endet vor seinem Aufklapp-Knopf. */ .kwat-nav__menu > .kwat-nav__item--has-children > .kwat-nav__link::after { right: 0; } @media (hover: hover) { /* Der Hover-Unterstrich bleibt den Punkten OHNE Karte vorbehalten – bei den anderen wäre er das zweite Signal für dasselbe. */ .kwat-nav__menu > .kwat-nav__item:not(.kwat-nav__item--has-children) > .kwat-nav__link:hover::after { transform: scaleX(1); } } /* ── Aufklapp-Knopf (Disclosure für Touch/Tastatur) ──────────────────── */ /* `flex: 0 0 auto` ist Pflicht: ohne das schrumpft der Knopf bei vielen Menüpunkten unter die 24px-Mindestfläche (WCAG 2.2, 2.5.8 – gemessen 24×34 statt 34×34). */ .kwat-nav__toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; align-self: center; margin-inline-end: var(--kwat-space-2); padding: 0; color: var(--kwat-color-accent); background: transparent; border: 0; border-radius: var(--kwat-radius-sm); cursor: pointer; transition: background var(--kwat-duration-base) var(--kwat-ease-standard); } .kwat-nav__caret { width: 0.8em; height: 0.8em; opacity: 0.75; transition: transform var(--kwat-duration-base) var(--kwat-ease-emphasis), opacity var(--kwat-duration-base); } .kwat-nav__toggle[aria-expanded="true"] { background: color-mix(in srgb, var(--kwat-color-accent) 14%, transparent); } .kwat-nav__toggle[aria-expanded="true"] .kwat-nav__caret { transform: rotate(180deg); opacity: 1; } @media (hover: hover) { .kwat-nav__toggle:hover { background: color-mix(in srgb, var(--kwat-color-accent) 14%, transparent); } .kwat-nav__toggle:hover .kwat-nav__caret { opacity: 1; } } /* ── Die Karteikarte (Entwurf `mockups/navigation-2.html`) ───────────── Warmes Papier am Messingreiter – dieselbe Sprache wie der Zettelkasten der Suchergebnisse. Kante, Abschnittslinie und Seitenmarke sind bewusst als `border` gebaut: im Windows-Kontrastmodus fallen Flächen und Schatten ersatzlos weg, Rahmen bleiben. Deshalb braucht die Karte dort keinen Sonderblock. */ .kwat-nav__card { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 16rem; max-width: 23rem; background: linear-gradient(160deg, var(--kwat-paper), var(--kwat-paper-2)); color: var(--kwat-paper-ink); border: 1px solid var(--kwat-paper-rule); border-radius: 3px 3px 10px 10px; box-shadow: 0 2px 0 color-mix(in srgb, #000 30%, transparent), 0 18px 42px color-mix(in srgb, #000 62%, transparent); } /* Messingreiter – die sichtbare Verbindung zur Leiste. */ .kwat-nav__card::before { content: ""; position: absolute; top: -7px; left: 22px; width: 74px; height: 9px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--kwat-color-accent-hi) 60%, #fff), var(--kwat-color-accent) 55%, color-mix(in srgb, var(--kwat-color-accent) 60%, #000)); } /* Eselsohr unten rechts. */ .kwat-nav__card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 0 0 10px 0; background: linear-gradient(135deg, transparent 48%, color-mix(in srgb, var(--kwat-paper-ink) 16%, transparent) 50%, var(--kwat-paper-2) 52%); } /* Am rechten Rand kippt die Karte an ihre rechte Kante, statt aus dem Bild zu laufen. Bewusst als feste Regel statt über die CSS-Ankerpositionierung: deren Ausweich- Fallbacks können den Messingreiter nicht mitführen, er säße dann auf der falschen Seite. Die Bedingung „ab dem vierten Punkt" schützt kurze Menüs, in denen die letzten Punkte noch links stehen. */ .kwat-nav__menu > .kwat-nav__item:nth-child(n + 4):nth-last-child(-n + 2) > .kwat-nav__card { left: auto; right: 0; } .kwat-nav__menu > .kwat-nav__item:nth-child(n + 4):nth-last-child(-n + 2) > .kwat-nav__card::before { left: auto; right: 22px; } .kwat-nav__card-body { padding: 16px 18px 18px; } .kwat-nav__card .kwat-nav__submenu, .kwat-nav__card .kwat-nav__group-list { margin: 0; padding: 0; list-style: none; } .kwat-nav__card .kwat-nav__item { display: block; } .kwat-nav__card .kwat-nav__item + .kwat-nav__item { border-top: 1px solid color-mix(in srgb, var(--kwat-paper-rule) 55%, transparent); } /* Der Abschnitt bringt seine eigene Linie mit – zwischen ihm und dem Eintrag darüber stünden sonst zwei. */ .kwat-nav__card .kwat-nav__item--group + .kwat-nav__item, .kwat-nav__card .kwat-nav__item--group { border-top: 0; } .kwat-nav__card .kwat-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; margin-inline: -8px; border-radius: var(--kwat-radius-sm); color: var(--kwat-paper-ink); font-size: var(--kwat-text-base); font-weight: 400; transition: background var(--kwat-duration-base), color var(--kwat-duration-base); } /* Der Text nimmt die Restbreite. Ohne das schiebt `space-between` ihn zwischen Seitenmarke und Wegweiser in die MITTE der Karte, sobald einer von beiden da ist. */ .kwat-nav__card .kwat-nav__text { flex: 1 1 auto; } /* Wegweiser nach rechts, erscheint erst bei Hover. Der leere Alternativtext (`/ ""`) hält das Zeichen aus der Vorlesereihenfolge heraus. */ .kwat-nav__card .kwat-nav__link::after { content: "\203A" / ""; color: var(--kwat-color-secondary); opacity: 0; transition: opacity var(--kwat-duration-base), transform var(--kwat-duration-base) var(--kwat-ease-emphasis); } /* Aktuelle Seite: Marine-Stempel. Gold hätte auf dem Papier nur 1,8:1. */ .kwat-nav__card .kwat-nav__link.is-active { color: var(--kwat-color-secondary); font-weight: 700; } .kwat-nav__card .kwat-nav__link.is-active::before { content: ""; width: 0; height: 18px; margin-left: -6px; margin-right: 2px; border-left: 4px solid var(--kwat-color-secondary); } .kwat-nav__card .kwat-nav__link:focus-visible { outline: 3px solid var(--kwat-color-secondary); outline-offset: 1px; } @media (hover: hover) { .kwat-nav__card .kwat-nav__link:hover { background: color-mix(in srgb, var(--kwat-color-secondary) 9%, transparent); color: var(--kwat-color-secondary); } .kwat-nav__card .kwat-nav__link:hover::after { opacity: 1; transform: translateX(3px); } } /* Rückmeldung beim Antippen. Ein Finger kennt keinen Schwebezustand – ohne `:active` quittiert die Fläche eine Berührung gar nicht und fühlt sich tot an. Bewusst AUSSERHALB von `@media (hover: hover)`: genau die Geräte ohne Hover brauchen es. */ .kwat-nav__card .kwat-nav__link:active, .kwat-nav__card .kwat-nav__group--link:active { background: color-mix(in srgb, var(--kwat-color-secondary) 16%, transparent); color: var(--kwat-color-secondary); } /* Abschnitt („Essen", „Trinken") = zweite Menü-Ebene mit eigenen Kindern. */ .kwat-nav__group { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--kwat-color-secondary); font-size: var(--kwat-text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; } .kwat-nav__group::after { content: ""; flex: 1; height: 0; border-top: 1px solid var(--kwat-paper-rule); } .kwat-nav__item--group:first-child .kwat-nav__group { margin-top: 2px; } .kwat-nav__group--link:focus-visible { outline: 3px solid var(--kwat-color-secondary); outline-offset: 2px; } /* Handschriftliche Notiz am Kartenfuß – gepflegt im Feld „Beschreibung" des Menüpunkts (Ansicht anpassen → Beschreibung). Ohne Eintrag entfällt sie, mit ihr kommt die Zicklinde aus dem Tab „Seite" (leer wählbar). */ .kwat-nav__note { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--kwat-paper-rule); color: var(--kwat-paper-ink-soft); font-family: var(--kwat-paper-hand); font-size: 1.2rem; line-height: 1.3; } /* `flex: 0 0 auto` hält die Figur bei langer Notiz auf ihrer Breite – als Flex-Kind würde sie sonst zusammengedrückt. */ .kwat-nav__note-img { width: 34px; height: auto; flex: 0 0 auto; } /* Desktop: Hover blendet die Karte sanft ein – die Autorregel `display: block` schlägt das UA-`[hidden]{display:none}`. `allow-discrete` + `@starting-style` animieren auch den display-Wechsel. Tastatur/Touch öffnen über den Knopf (JS entfernt `hidden`), `:not([hidden])` hält es dann offen. ⚠️ KEIN `:focus-within` mehr: das öffnete die Karte, ohne dass `aria-expanded` mitkam – ein Screenreader meldete „zugeklappt" über einem offenen Menü. Den Tastaturfall übernimmt jetzt `navigation.js` (focusin/focusout), der den Zustand echt setzt statt ihn nur anzuzeigen. */ @media (min-width: 1024px) { .kwat-nav__card { opacity: 0; transform: translateY(-6px) rotate(-0.4deg); transition: opacity var(--kwat-duration-base) var(--kwat-ease-entrance), transform var(--kwat-duration-base) var(--kwat-ease-entrance), display var(--kwat-duration-base) allow-discrete; } .kwat-nav__item--has-children:hover > .kwat-nav__card, .kwat-nav__item--has-children > .kwat-nav__card:not([hidden]) { display: block; opacity: 1; transform: none; } @starting-style { .kwat-nav__item--has-children:hover > .kwat-nav__card, .kwat-nav__item--has-children > .kwat-nav__card:not([hidden]) { opacity: 0; transform: translateY(-6px) rotate(-0.4deg); } } } /* ── Tools / Reservieren-CTA ─────────────────────────────────────────── */ .kwat-nav__tools { display: flex; align-items: center; gap: var(--kwat-space-3); flex: 0 0 auto; margin-left: auto; } /* Die geteilte CTA-Basis-Optik (`.kwat-nav__cta`/`-icon`/`:hover`) liegt in shell-base.css (auch vom Hero genutzt); hier bleiben nur die Nav-/Botbar- spezifischen Varianten (`.kwat-nav__cta--bar`, `.kwat-botbar__book …`). */ /* ── Burger (Mobil-Auslöser) ─────────────────────────────────────────── */ /* Beschriftet statt reines Symbol: drei Striche allein sind gelernte Konvention, kein Wort. Das `aria-label` („Menü öffnen") enthält den sichtbaren Text – sonst verfehlt es WCAG 2.5.3 (Label in Name). */ .kwat-nav__burger { display: none; align-items: center; gap: var(--kwat-space-2); height: 44px; flex: 0 0 auto; padding: 0 14px; color: var(--kwat-color-accent-hover); background: color-mix(in srgb, var(--kwat-color-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--kwat-color-accent) 40%, transparent); border-radius: 22px; font-family: inherit; font-size: var(--kwat-text-sm); font-weight: 600; cursor: pointer; } .kwat-nav__burger-icon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: var(--kwat-color-accent); } /* ── Mobil-Off-Canvas (