/* Cookie-Hinweis (core/partials/cookie_hinweis.html). base.html lädt diese Datei nur, solange der Hinweis erscheint — wer ihn bestätigt hat, bekommt sie gar nicht erst. Nur Tokens aus dem Design-System (var(--…)), keine neuen Farben. Platz: Der Hinweis steht als letztes Element im und klebt per `position: sticky` am unteren Rand. Am Seitenende rastet er unter dem Footer ein, statt ihn zu überdecken — Impressum und Datenschutz bleiben damit immer erreichbar, ohne dass die Seite einen Leerraum für ihn freihalten muss. Stapelung (Leiter aus input.css und warenkorb-menue.css): .header-suche 39, .site-header 40, .mobile-menu 60 und die Warenkorb-Tafeln 45/50 (alle drei innerhalb der Kopfzeile, wirken also auf Höhe 40), .tk-schleier 70, .skip-link 100. Der Hinweis liegt mit 30 über dem Seiteninhalt und unter allem anderen: Das geöffnete mobile Menü und der Kalender-Schleier decken ihn mit ab, wie den Rest der Seite. */ .cookie-hinweis { position: sticky; bottom: 0; z-index: 30; padding: 0 24px 16px; /* Die Hülle ist so breit wie die Seite, anklickbar ist nur die Karte — sonst schluckte der durchsichtige Rand Klicks auf den Inhalt darunter. */ pointer-events: none; } .cookie-hinweis-karte { pointer-events: auto; /* Bündig mit dem Inhalt: .container-shop ist 1248 px breit, abzüglich seiner 24 px Innenabstand je Seite. */ max-width: 1200px; margin-inline: auto; display: flex; align-items: center; gap: 16px 20px; padding: 16px 20px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hover); } .cookie-hinweis-symbol { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-xl); background: var(--color-muted); color: var(--color-notice); } .cookie-hinweis-text { flex: 1; min-width: 0; } /* Überschreibt die h2-Grundschrift (Cormorant 36 px) — der Hinweis soll sich unterordnen, nicht mit der Seite um die Aufmerksamkeit konkurrieren. */ .cookie-hinweis-titel { font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 22px; color: var(--color-foreground); } .cookie-hinweis-text p { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--color-muted-foreground); /* Kein einzelnes Wort allein in der letzten Zeile. */ text-wrap: pretty; } .cookie-hinweis-text a { color: var(--color-foreground); text-decoration: underline; text-underline-offset: 2px; } .cookie-hinweis-form { flex: none; } /* Tastatur: Ein Element, das beim Weitertabben unten ins Bild rückt, darf nicht hinter dem Hinweis verschwinden (WCAG 2.4.11). Der Abstand entspricht der gemessenen Höhe des Hinweises samt Rand (114 px bei 1024–1440 px Breite, 226 px bei 375 px) plus etwas Luft. */ html:has(#cookie-hinweis) { scroll-padding-bottom: 120px; } @media (max-width: 639.98px) { .cookie-hinweis { padding: 0 12px 12px; } .cookie-hinweis-karte { flex-wrap: wrap; align-items: flex-start; gap: 12px; padding: 16px; } /* Schmaler, damit dem Text eine Zeile mehr Breite bleibt — jede gesparte Zeile ist Seite, die der Hinweis nicht verdeckt. */ .cookie-hinweis-symbol { width: 32px; height: 32px; } .cookie-hinweis-symbol svg { width: 18px; height: 18px; } /* Knopf in eigener Zeile, volle Breite — gut mit dem Daumen zu treffen. */ .cookie-hinweis-form { flex-basis: 100%; } .cookie-hinweis-knopf { width: 100%; } html:has(#cookie-hinweis) { scroll-padding-bottom: 232px; } } @media print { .cookie-hinweis { display: none; } }