/* * Altersabfrage. * * Sichtbar wird sie ueber das Attribut data-age-gate am , das * InitAgeGate.js im Kopfbereich setzt - also vor dem ersten Zeichnen. Deshalb * muss diese Datei frueh eingebunden sein (file005 in 150-Page-Styles bzw. * 160-Page-AgeGate). * * Sie liegt als erstes Element im (page.5) und deckt die Seite mit einem * deckenden Hintergrund zu. Deshalb genuegt display - der Rumpf muss nicht * unsichtbar geschaltet werden, was auch eine Suchmaschine mit JavaScript * ausgesperrt haette. * * Angelegt am 2026-09-25. */ .age-gate { display: none; } html[data-age-gate] .age-gate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; background: #f8f6ee; overflow-y: auto; } /* Hinter der Abfrage wird nicht gescrollt. */ html[data-age-gate] body { overflow: hidden; } .age-gate__panel { width: 100%; max-width: 560px; text-align: center; } /* * Der Fokus liegt beim Oeffnen auf der Tafel, nicht auf dem ersten Knopf - * sonst zeigt "Ja" seine Fokusfarben und sieht neben dem schwarzen "Nein" * schwaecher aus, als es gemeint ist. Die Tafel selbst braucht dafuer keinen * sichtbaren Rahmen; sie ist kein Bedienelement. */ .age-gate__panel:focus { outline: none; } .age-gate__logo { width: 220px; height: auto; margin: 0 auto 30px; } .age-gate__title { font-family: 'Laila Bold', Georgia, serif; font-weight: normal; font-size: 30px; line-height: 1.25; color: #cc2650; margin: 0 0 16px; } .age-gate__text { font-family: 'Laila', Georgia, serif; font-size: 16px; line-height: 1.7; color: #535353; margin: 0; } /* * Die Trennlinie mit der Traube ist das Gliederungszeichen dieser Seite. Sie * kommt unveraendert aus Typography.css; hier stehen nur die Abstaende, weil * die Tafel enger sitzt als der Seiteninhalt. */ .age-gate hr { margin: 30px 0; } .age-gate__text { margin-bottom: 0; } .age-gate__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 0 0 28px; } .age-gate__actions .button-pink, .age-gate__actions .button-black { margin: 0; padding: 8px 24px; font-size: 16px; min-height: 44px; } .age-gate__note { font-family: 'Laila', Georgia, serif; font-size: 12px; line-height: 1.6; /* #8a857a war 3,40:1 auf dem cremefarbenen Grund. #6f6a64 erreicht 4,95:1 -- derselbe Ton wie bei den Hinweiszeilen im Shop. */ color: #6f6a64; margin: 0; } @media (max-width: 575.98px) { .age-gate__logo { width: 170px; margin-bottom: 22px; } .age-gate__title { font-size: 24px; } .age-gate__actions .button-pink, .age-gate__actions .button-black { width: 100%; } }