/** * Sprach-Hinweisleiste (#1239) * * WAS: Dezente, schließbare Leiste am unteren Rand, wenn die * Browser-Sprache des Besuchers nicht zur Seitensprache passt. * Markup baut js/lang-hint.js clientseitig (ohne JS: keine Leiste). * DESIGN: wie .kw-i18n-fallback (#991): Sand-Light als Fläche, Bordeaux als * einziger Akzent (Tag + Link). Kein Grün, keine Warn-Optik — das ist * ein Angebot, kein Fehler. * CLS: position:fixed = kein Layout-Sprung; nichts wird verschoben. * Z-INDEX: 900 = über Inhalt und Sticky-CTA (var(--kw-z-sticky, 60)), unter * Mobile-Drawer (1500/1600) und Modalen (1700+). */ .kw-lang-hint { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--kw-sand-light); border-top: 1px solid var(--kw-border); color: var(--kw-body-text); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); padding-bottom: env(safe-area-inset-bottom, 0); /* Ausweichen vor der Sticky-CTA läuft über transform (CLS-frei, JS). */ transition: transform 0.25s ease; } @media (prefers-reduced-motion: reduce) { .kw-lang-hint { transition: none; } } /** * #1329-Nachbesserung: Reserve gegen Verdeckung durch die fixe Leiste. * * js/lang-hint.js setzt beim Einblenden die Klasse .kw-lang-hint-active auf * und misst die tatsächliche Banner-Höhe in --kw-lang-hint-space * (offsetHeight, inkl. safe-area-Padding oben). Zwei Wirkungen: * - padding-bottom auf body schafft echten Scroll-Raum unter dem letzten * Element, damit man sich frei daran vorbeischeben kann. * - scroll-padding-bottom auf sorgt dafür, dass native * scrollIntoView()/Fokus-Sprünge (z.B. Tab zum Absende-Knopf) VOR der * Leiste stoppen, statt dahinter zu landen — reines padding wirkt hier * nicht, das ist der eigentliche Grund, warum der erste Anlauf (statisches * body-padding in kw-konfigurator.css, #1329) den Knopf nicht befreite. * Ohne Leiste (keine Klasse) ist beides inaktiv: keine Leerfläche. * * Die Selektor-Spezifität (html.kw-lang-hint-active body / * html:not(.kw-lang-hint-active) body — je 2 Elemente + 1 Klasse) übersticht * das ältere, seitengebundene ".kw-konfigurator.css: body{padding-bottom: * 100px}" (nur 1 Element) unabhängig von der Ladereihenfolge und ersetzt * dessen alleinigen Zweck (Banner-Freiraum, siehe dortiger Kommentar) durch * diesen zentralen, seitenunabhängigen Mechanismus — kein !important nötig. */ html.kw-lang-hint-active { scroll-padding-bottom: var(--kw-lang-hint-space, 0px); } html.kw-lang-hint-active body { padding-bottom: var(--kw-lang-hint-space, 0px); } html:not(.kw-lang-hint-active) body { padding-bottom: 0; } .kw-lang-hint__inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 8px 60px 8px 24px; /* rechts Platz für den Schließen-Knopf */ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--kw-font-body); font-size: 15px; line-height: 1.4; } .kw-lang-hint__tag { flex: 0 0 auto; display: inline-block; background: var(--kw-bordeaux); color: #fff; font-family: var(--kw-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; line-height: 1; padding: 5px 8px; border-radius: var(--kw-radius-sm); } .kw-lang-hint__text { flex: 1 1 auto; min-width: 0; } /* Link + Schließen: Touch-Ziele mindestens 44px hoch. */ .kw-lang-hint__link { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--kw-bordeaux); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .kw-lang-hint__link:hover, .kw-lang-hint__link:focus { color: var(--kw-bordeaux-dark); text-decoration: none; } .kw-lang-hint__close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--kw-body-text); } .kw-lang-hint__close:hover, .kw-lang-hint__close:focus { color: var(--kw-bordeaux); } @media (max-width: 767px) { .kw-lang-hint__inner { padding: 8px 52px 8px 16px; font-size: 14px; gap: 4px 10px; } /* Tag + Text in einer Zeile, Link darunter — hält die Leiste flach und bricht auf 375px sauber um (kein horizontales Scrollen). */ .kw-lang-hint__text { flex: 1 1 200px; } .kw-lang-hint__link { flex: 1 0 100%; min-height: 44px; } }