/* ============================================================ AUTOMOTIF — Kopfleiste und Ausklappmenü ⚠ EINE Datei für ALLE Seiten, seit 11.08.2026. Vorher hatte nur die Startseite das Burger-Menü. Galerie, Produkte, Kontakt, die Rechtsseiten und „Meine Bilder" zeigten stattdessen eine Reihe kleiner Links — und auf dem Handy fielen die meisten davon weg. Calvins Kritik: Wer vom Menü aus auf „Meine Bilder" geht, steht plötzlich vor einer anderen Navigation und findet nicht zurück. Deshalb gehört das hier in EINE Datei und nicht kopiert in sieben. Wer den Menüpunkt „Galerie" umbenennt, benennt ihn einmal um. Die Farben kommen aus den Variablen der jeweiligen Seite. Jede hat einen Rückfallwert, damit die Datei auch auf einer Seite funktioniert, die eine Variable nicht kennt — sonst wäre die Schrift dort unsichtbar, und das merkt man erst live. ============================================================ */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ ⚠ `position: fixed` MUSS hier stehen bleiben — die Startseite baut darauf auf (geprueft 17.08.2026). Am 17.08. war das hier kurz auf `sticky` umgestellt, um in EINEM Griff alle Seiten zu versorgen, auf denen der Kopf die Ueberschrift verdeckt. Das war falsch: index.html setzt `position` NICHT selbst. Sie setzt nur `header.kopf { top: var(--balken-hoch) }`, weil ueber der Kopfzeile der Versandbalken sitzt — und sie rechnet an mehreren Stellen damit, dass der Kopf AUS DEM FLUSS ist (siehe den Kommentar bei --balken-hoch, „68 px Kopfzeile plus der Balken darueber"). Mit `sticky` nimmt er 68 px Platz ein, und die Startseite verschiebt sich. Das Hero-Video soll ausdruecklich hinter dem Kopf durchlaufen. Wer den verdeckten-Ueberschrift-Fehler beheben will, tut das JE SEITE mit `header.kopf { position: sticky; top: 0 }` — so machen es produkte.html, galerie.html, warenkorb.php und recht-1708.css. Nicht hier. ⚠ `bezahlen.php` laedt diese Datei seit dem 17.08. GAR NICHT MEHR (Begruendung im dort). Nicht wieder einhaengen, ohne den Kommentar dort gelesen zu haben. ============================================================ */ .kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 68px; display: flex; align-items: center; background: rgba(11, 11, 12, .55); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease; } .kopf[data-gescrollt="ja"] { background: rgba(11, 11, 12, .92); border-bottom-color: var(--line, rgba(255,255,255,.12)); } @media (prefers-reduced-transparency: reduce) { .kopf { background: rgba(11, 11, 12, .97); backdrop-filter: none; -webkit-backdrop-filter: none; } } .kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .marke { display: inline-flex; align-items: center; gap: 10px; color: var(--text, #f0eeea); text-decoration: none; font-weight: 700; letter-spacing: -.02em; font-size: 19px; } .marke svg { flex: none; } /* Der Hamburger: drei Striche, auf allen Größen gleich — auch am Rechner. Das ist Absicht: Ein Menü, das je nach Fensterbreite anders aussieht, muss man zweimal lernen. */ .menue-knopf { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line-strong, rgba(255,255,255,.22)); border-radius: var(--r-pill, 999px); cursor: pointer; transition: border-color .25s ease, background .25s ease; } .menue-knopf:hover { border-color: var(--text-dim, #a8a49d); background: rgba(255,255,255,.04); } .menue-knopf:active { transform: scale(.96); } .menue-knopf i { display: block; width: 18px; height: 2px; background: var(--text, #f0eeea); border-radius: 2px; position: absolute; transition: transform .35s ease, opacity .2s linear; } .menue-knopf i:nth-child(1) { transform: translateY(-6px); } .menue-knopf i:nth-child(3) { transform: translateY(6px); } .menue-knopf[aria-expanded="true"] i:nth-child(1) { transform: rotate(45deg); } .menue-knopf[aria-expanded="true"] i:nth-child(2) { opacity: 0; } .menue-knopf[aria-expanded="true"] i:nth-child(3) { transform: rotate(-45deg); } .menue { position: fixed; inset: 0; z-index: 45; background: rgba(11, 11, 12, .97); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; } .menue[data-offen="ja"] { opacity: 1; visibility: visible; } .menue nav { display: grid; gap: 8px; text-align: center; } .menue a { color: var(--text, #f0eeea); text-decoration: none; font-size: clamp(30px, 8vw, 56px); font-weight: 700; letter-spacing: -.035em; line-height: 1.15; padding: 6px 20px; opacity: 0; transform: translateY(14px); transition: color .25s ease, opacity .45s ease, transform .45s ease; } .menue[data-offen="ja"] a { opacity: 1; transform: none; } .menue[data-offen="ja"] a:nth-child(1) { transition-delay: .06s; } .menue[data-offen="ja"] a:nth-child(2) { transition-delay: .12s; } .menue a:hover { color: var(--accent-hi, #e8834a); } /* Wo man gerade ist. Ohne das klickt man auf der Galerieseite im Menü noch einmal auf Galerie und wundert sich, dass nichts passiert. */ .menue a[aria-current="page"] { color: var(--accent-hi, #e8834a); } /* Die Zahl am Warenkorb. Solange nichts drinliegt, steht data-leer="ja" und sie bleibt unsichtbar — der Punkt selbst bleibt stehen, denn ein Menü, dessen Einträge wandern, verwirrt mehr als ein leerer Korb stört. */ .menue-zahl { display: inline-block; margin-left: 10px; padding: 2px 10px; background: var(--accent, #d4652a); color: var(--accent-ink, #0b0b0c); border-radius: var(--r-pill, 999px); font-size: .42em; font-weight: 700; vertical-align: middle; } .menue a[data-leer="ja"] .menue-zahl { display: none; }