/* Langula Relaunch — Ergänzungen zum Designsystem für die echte Website.
   Ebenen (Menü, Sprachwahl, Konto), Werbeflächen mit dem bestehenden ads.js, Weiterlernen-Knopf.
   Nur Tokens aus tokens.css, keine eigenen Farbwerte. */

html { scroll-behavior: smooth; overflow-x: clip; }
body.lg { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
body.lg .lg-page { min-height: 100vh; display: flex; flex-direction: column; }
body.lg .lg-main { flex: 1 0 auto; }
body.lg :where(h1, h2, h3, h4) { font-family: var(--font-display); }
:lang(ar) body.lg, body.lg :lang(ar), :lang(ar-SY) body.lg { --font-display: var(--font-arabic); --font-text: var(--font-arabic); }
body.lg :where(:lang(ja), :lang(zh), :lang(ko)) { font-family: var(--font-cjk); }
body.lg img { max-width: 100%; height: auto; }
.lg-icon--flip:dir(rtl), [dir="rtl"] .lg-icon--flip { transform: scaleX(-1); }

/* Hauptspalte + Seitenspalte (lg_split) */
.lg-split__main { min-width: 0; display: grid; gap: var(--space-8); align-content: start; }

/* ---------- Ebenen: Bottom-Sheet mobil, Dialog am Desktop ---------- */
.lg-layer { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: flex-end; justify-content: center; }
.lg-layer[hidden] { display: none; }
.lg-layer .lg-scrim { position: absolute; inset: 0; background: rgba(11, 13, 17, 0.5); }
.lg-layer .lg-sheet2 { width: 100%; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin: 0; animation: lg-up var(--dur-base) var(--ease-out); }
.lg-layer .lg-sheet2--adaptive .lg-sheet2__grab { display: grid; }
@media (min-width: 960px) {
  .lg-layer { align-items: center; padding: var(--space-6); }
  .lg-layer .lg-sheet2 { width: min(640px, 100%); max-height: 86vh; border-radius: var(--radius-md); animation: lg-fade var(--dur-base) var(--ease-out); }
  .lg-layer .lg-sheet2--adaptive .lg-sheet2__grab { display: none; }
  .lg-layer .lg-sheet2__head { padding-top: var(--space-4); }
  #lgAcct .lg-sheet2 { width: min(380px, 100%); }
}
@keyframes lg-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-layer .lg-sheet2 { animation: none; } }
body.lg-layer-open { overflow: hidden; }
.lg-layer .lg-langswitch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .lg-layer .lg-langswitch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lg-layer .lg-langswitch__grid li[hidden] { display: none; }
.lg-layer .lg-resume { text-decoration: none; padding: 14px; grid-template-columns: auto minmax(0, 1fr); }
.lg-layer .lg-resume[hidden] { display: none; }

/* Weiterlernen-Knopf im Header (site.js füllt ihn aus dem Lernstand) */
.lg-resume-btn[hidden] { display: none; }
.lg-resume-btn__b:empty { display: none; }

/* Header: Burger unter 960 px, Navigation darüber (Container Queries des Systems gelten über .lg-page) */
@container lg (max-width: 959px) { .lg-header__nav { display: none; } .lg-header__burger { display: inline-flex !important; } }
@container lg (min-width: 960px) { .lg-header__burger { display: none !important; } }
.lg-header__logo img { flex: none; }
html:not(.ios) .lg-header__iosbar { display: none; }
.lg-footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: start; }
.lg-footer__bottom nav { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.lg-footer__bottom nav a, .lg-footer__bottom nav button { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Werbung: das Design-Gefäß um den bestehenden ad_slot() ---------- */
.lg-ad { margin-block: 32px; }
.lg-ad__row { display: flex; gap: var(--space-3); align-items: baseline; justify-content: center; }
.lg-ad__nofree { font: 600 12px/1 var(--font-text); color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.lg-ad__slot { position: relative; overflow: hidden; display: grid; place-items: center; }
.lg-ad .ad-slot { max-height: none !important; height: 100% !important; width: 100%; padding: 0 !important; margin: 0 !important; overflow: hidden !important; display: grid !important; place-items: center; text-align: center; background: none; }
.lg-ad .ad-slot > .ad-label { display: none !important; }
.lg-ad .ad-slot > div[id^="google_ads"], .lg-ad .ad-slot iframe { margin: 0 auto; }
.lg-ad .ad-slot.is-filled ~ *, .lg-ad__slot:has(.ad-slot.is-filled) { border-style: solid; }
.lg-ad--learn { --_w: 728px; --_h: 90px; margin-block: var(--space-3) var(--space-4); }
@container lg (max-width: 599px) { .lg-ad--learn .lg-ad__slot { --_w: 320px; --_h: 50px; } }
.lg-ad--wide { --_w: 970px; --_h: auto; }
.lg-ad--wide .lg-ad__slot { height: auto; min-height: 96px; border: 0; background: none; }
.no-ads .lg-ad, .no-ads .lg-anchor { display: none !important; }
/* Eigenwerbung aus house_ad()/ads.js im Design der Eigenwerbung (lg-house) */
.lg-ad .lg-house { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); height: 100%; max-width: none; box-sizing: border-box; padding: var(--space-3) var(--space-5); text-align: start; }
.lg-ad .lg-house[hidden] { display: none; }
.lg-ad .lg-house__mark, .lg-anchor .lg-house__mark { display: none; }
.lg-ad .lg-house__body { display: grid; gap: 6px; min-width: 0; }
.lg-ad .lg-house__h { font: 750 18px/1.2 var(--font-display); color: var(--text); }
.lg-ad .lg-house__items { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--text-muted); }
.lg-ad .lg-house__i { display: inline-flex; align-items: center; gap: 6px; }
.lg-ad .lg-house__dot { width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
.lg-ad .lg-house__cta { display: inline-flex; align-items: center; min-height: var(--control-s); padding: 0 var(--space-4); border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font: 700 14px/1 var(--font-text); white-space: nowrap; }
.lg-ad .lg-house__stars { color: var(--warning-500); font-size: 14px; }
.lg-ad--mpu .lg-house, .lg-ad--halfpage .lg-house { grid-template-columns: 1fr; align-content: center; justify-items: start; padding: var(--space-5); }
.lg-ad .lg-aff { display: flex; align-items: center; gap: var(--space-3); height: 100%; padding: var(--space-3); text-decoration: none; color: var(--text); }
.lg-ad .lg-slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 100%; padding: 0 var(--space-3); text-decoration: none; color: var(--text); background: var(--warm-soft); }
.lg-ad .lg-slim[hidden] { display: none; }
.lg-ad .lg-slim__cta { font-weight: 700; color: var(--accent-text); }

/* Anker unten: nur mobil, nur wenn gefüllt, höchstens einer (Werberegel 7) */
.lg-anchor { display: none; }
@media (max-width: 959px) {
  .lg-anchor.is-filled { display: flex; align-items: center; gap: var(--space-2); position: fixed; inset-inline: 0; bottom: 0; z-index: var(--z-anchor); padding: 4px var(--space-2) calc(6px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-2); }
  .lg-anchor .ad-wrap { flex: 1; display: grid; place-items: center; min-height: 50px; }
  .lg-anchor .ad-label { display: none; }
  .lg-anchor .ad-close { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); cursor: pointer; flex: none; padding: 0; }
  body.lg:has(.lg-anchor.is-filled) .lg-footer { padding-bottom: 80px; }
}
body.sheet-open .lg-anchor, body.lg-layer-open .lg-anchor { display: none !important; }

/* Audio-Knopf (lg_audio): Zustand während der Wiedergabe */
.lg-say.playing, .lg-say.is-playing { background: var(--accent); color: var(--on-accent); }
.lg-say.is-na { opacity: .5; }

/* Druck */
@media print { .lg-header, .lg-footer, .lg-layer, .lg-ad, .lg-anchor, .lg-header__iosbar { display: none !important; } }
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@container lg (max-width: 599px) { .lg-qa__item { padding: var(--space-4); } .lg-qa__item dd { padding-inline-start: 0; } }
/* Seitenspalte so hoch wie die Hauptspalte, damit die 300×600 mitläuft (Regel 10) */
.lg-split > .lg-rail { align-self: stretch; }
/* Eigenwerbung im mobilen Anker (ads.js füllt .lg-house bzw. .lg-slim) */
.lg-anchor .lg-house { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; min-height: 50px; padding: 4px var(--space-3); border-radius: var(--radius-sm); background: var(--warm-soft); color: var(--text); text-decoration: none; box-shadow: inset 0 0 0 1px var(--warm); }
.lg-anchor .lg-house[hidden], .lg-anchor .lg-house__items { display: none; }
.lg-anchor .lg-house__h { font: 700 14px/1.25 var(--font-display); }
.lg-anchor .lg-house__cta { flex: none; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--font-text); }
.lg-anchor .lg-slim { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 50px; padding: 0 var(--space-3); text-decoration: none; color: var(--text); }
.lg-anchor .lg-slim[hidden] { display: none; }
/* Eigenwerbung im leer gebliebenen Platz: Googles leerer Container darf sie nicht verschieben (alle Seiten). */
.lg-ad .ad-slot.is-house > div[id^="google_ads"], .lg-ad .ad-slot.is-aff > div[id^="google_ads"] { display: none; }
/* Haken der gewählten Sprachkachel: im Dark Mode war der Kreis hell und der weiße Haken unsichtbar. */
.lg-pick label:has(input:checked)::after, .lg-pick label.is-selected::after { background-color: var(--gray-950); box-shadow: 0 0 0 1.5px var(--gray-0); }
/* Anzeigen nie beschneiden: Google liefert je Fläche mehrere Größen (z. B. 970×90 im Leaderboard,
   336×280 im 300×250-Platz, 160×600 / 300×250 in der Seitenspalte). Die Höhe aus dem Design bleibt
   als Mindesthöhe reserviert (kein Layout-Springen), wächst aber mit dem Werbemittel mit. */
.lg-ad__slot { height: auto !important; min-height: var(--_h); max-width: 100%; width: auto; min-width: min(var(--_w), 100%); overflow: visible; }
.lg-ad .ad-slot { height: auto !important; min-height: inherit; overflow: visible !important; }
.lg-ad .ad-slot iframe { max-width: none; display: block; }
.lg-ad--leaderboard .lg-ad__slot { min-width: min(970px, 100%); }
.lg-ad:has(.ad-slot.is-filled:not(.is-house):not(.is-aff)) .lg-ad__slot { border-color: transparent; background: none; }

/* Eigenwerbung in Leaderboard- und Lern-Flächen: Weltblase · Überschrift + Vorteile · Knopf (Vorlage AdSlot, house --row) */
.lg-ad .lg-house { grid-template-columns: auto minmax(0, 1fr) auto; }
.lg-ad .lg-house::before { content: ""; width: 44px; height: 44px; background: url("img/langula-mark.svg") center / contain no-repeat; }
.lg-ad--mpu .lg-house::before, .lg-ad--halfpage .lg-house::before { width: 56px; height: 56px; }
.lg-ad--mpu .lg-house, .lg-ad--halfpage .lg-house { grid-template-columns: 1fr; }
.lg-ad--mpu .lg-house__items, .lg-ad--halfpage .lg-house__items { flex-direction: column; }
@container lg (max-width: 599px) { .lg-ad .lg-house::before { display: none; } .lg-ad--leaderboard .lg-house, .lg-ad--learn .lg-house { grid-template-columns: minmax(0, 1fr) auto; } .lg-ad--leaderboard .lg-house__items, .lg-ad--learn .lg-house__items { display: none; } }
.lg-ad .lg-slim { background: var(--warm-soft); box-shadow: inset 0 0 0 1px var(--warm); border-radius: var(--radius-sm); }
.lg-ad .lg-slim__h { font: 700 15px/1.25 var(--font-display); }

/* iOS Safari: vh zählt die eingeklappte Adressleiste mit — das Sheet ragte oben aus dem Bild. */
.lg-layer { height: 100vh; height: 100dvh; }
.lg-layer .lg-sheet2 { max-height: calc(100vh - 48px); max-height: calc(100dvh - 24px); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.lg-layer .lg-sheet2__body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
/* Mobil: Header passt immer in die Breite — Konto steckt im Menü, Weiterlernen nur als Badge + kurzes Wort */
@container lg (max-width: 599px) {
  .lg-header__in { gap: var(--space-2); }
  .lg-header .lg-account { display: none; }
  .lg-header__end { gap: var(--space-2); min-width: 0; }
  .lg-header .lg-resume-btn { min-width: 0; max-width: 46vw; overflow: hidden; padding-inline-end: var(--space-3); }
  .lg-header .lg-resume-btn > span:last-child { overflow: hidden; text-overflow: ellipsis; }
}
@container lg (max-width: 379px) { .lg-header__logo { font-size: 0; gap: 0; } .lg-header .lg-resume-btn .lg-langbadge { display: none; } }
/* Lern-Screens mobil: Standardformat 320×100 (Rolle learntop), Eigenwerbung mit zwei Zeilen + Knopf */
@container lg (max-width: 599px) {
  .lg-ad--learn .lg-ad__slot { --_w: 320px; --_h: 100px; width: 320px; max-width: 100%; min-width: 0; }
  .lg-ad--learn .lg-house { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 6px; padding: 8px 12px; }
  .lg-ad--learn .lg-house__h { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .lg-ad--learn .lg-house__cta { justify-self: start; min-height: 30px; font-size: 13px; }
}
/* Eigenwerbung robust für alle Varianten (Registrierung, Freunde werben, App-Bewertung mit Sternen):
   Flex mit Umbruch statt starrem Raster — Knopf nie schmaler als sein Text. */
.lg-ad .lg-house { display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lg-ad .lg-house::before { flex: none; }
.lg-ad .lg-house__stars { flex: none; display: inline-flex; align-items: baseline; gap: 6px; color: var(--warning-500); font-size: 15px; letter-spacing: 1px; }
.lg-ad .lg-house__score { color: var(--text); font: 700 14px/1 var(--font-text); letter-spacing: 0; }
.lg-ad .lg-house__body { flex: 1 1 200px; min-width: 0; }
.lg-ad .lg-house__cta { flex: none; white-space: nowrap; }
.lg-ad--mpu .lg-house, .lg-ad--halfpage .lg-house { flex-direction: column; align-items: flex-start; justify-content: center; }
.lg-ad--mpu .lg-house__body, .lg-ad--halfpage .lg-house__body { flex: none; }
@container lg (max-width: 599px) { .lg-ad .lg-house__cta { display: inline-flex !important; } }
/* Bento mobil einspaltig: zwei Spalten à ~170 px sind für Kacheltexte zu schmal. */
@container lg (max-width: 599px) {
  .lg-bento { grid-template-columns: minmax(0, 1fr); }
  .lg-bento .is-wide { grid-column: auto; }
  .lg-bento .is-tall { grid-row: auto; }
}
@container lg (max-width: 599px) { #languages .lg-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Keine Kachel in der Kachel: Hauptspalte bzw. Abschnitt wird nur dann selbst zur Kachel, wenn darin
   keine eigenen Kacheln/Karten stehen (FAQ-Karten, Kacheln, Wortkarten, Quiz, Übungen, Pfad, Fragen …). */
.lg-split > :first-child:has(.lg-qa__item, .lg-tile, .lg-card2, .lg-word, .lg-quiz, .lg-exercise, .lg-cta, .lg-chart, .lg-flip, .lg-path, .lg-path__card, .lg-steps3, .lg-resume, .lg-vocab, .lg-dialogue, .lg-notice, .lg-facts, .lg-factgrid, .lg-material, .lg-table--cards, .tv2-q, .tv2-panel, .lg-qa),
.lg-split > :first-child > section:has(.lg-qa__item, .lg-tile, .lg-card2, .lg-word, .lg-quiz, .lg-exercise, .lg-cta, .lg-chart, .lg-flip, .lg-path, .lg-steps3, .lg-resume, .lg-vocab, .lg-dialogue, .tv2-q, .tv2-panel) {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; }
.lg-split > :first-child .lg-tile, .lg-split > :first-child .lg-qa__item { background: var(--surface); }
/* Listen in einer Kachel (Grammatik-Blöcke, Ratgeber-Abschnitte) tragen keinen eigenen Rahmen mehr. */
:is(.grv2-block, .gd-sec, .lg-tile, .lg-prose) .lg-vocab { border: 0; box-shadow: none; background: none; }
.w2-mods > section .lg-vocab { border: 0; box-shadow: none; background: none; }
.lg-quiz.tv2-switch { background: none; border: 0; padding: 0; box-shadow: none; }
/* Kennzahlen (lg-factgrid) mobil nebeneinander statt untereinander — es sind kurze Zahlen. */
@container lg (max-width: 599px) {
  .lg-factgrid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important; gap: var(--space-2); }
  .lg-factgrid > div { padding: var(--space-3); min-width: 0; }
  .lg-factgrid dt { font-size: 11px; line-height: 1.3; letter-spacing: .04em; hyphens: auto; overflow-wrap: anywhere; }
  .lg-factgrid dd { font-size: 26px; }
}
/* Falls ein Browser trotzdem Datenerkennung anwendet: Links der Erkennung nicht als Link darstellen. */
a[x-apple-data-detectors], a[href^="x-apple-data-detectors:"] { color: inherit !important; text-decoration: none !important; pointer-events: none; }
/* Kein Doppeltipp-Zoom auf Knöpfen, Kacheln und Karten (schnelles Tippen in Lern-Screens). */
body.lg :is(a, button, [role="button"], .lg-tile, .lg-card2, label, summary) { touch-action: manipulation; }
body.lg { touch-action: manipulation; }
/* Knopftexte nicht mitten im Wort trennen („Nicht ge-wusst“). */
.lg-btn { hyphens: manual; }
/* Knöpfe brechen nie mitten im Wort um und werden in Zeilen mit Eingabefeld nicht zusammengedrückt —
   das Feld gibt nach. Umbruch nur zwischen Wörtern (lange Beschriftungen in Kacheln). */
.lg-btn { overflow-wrap: normal; word-break: normal; hyphens: manual; flex-shrink: 0; }
:is(.lg-field, form, div):has(> .lg-input + .lg-btn, > .lg-input ~ .lg-btn) > .lg-input { min-width: 0; flex: 1 1 auto; }
.lg-menu-lang { justify-content: flex-start; gap: var(--space-2); font-weight: 600; } .lg-menu-lang b { font-weight: 800; }
/* Quicklinks (lg_linklist): Link-Kacheln mit Pfeil, mobil einspaltig, ab Tablet im Raster */
.lg-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.lg-linklist a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 650 16px/1.3 var(--font-text); text-decoration: none; box-shadow: var(--shadow-1); }
.lg-linklist a:hover { border-color: var(--accent); background: var(--surface-raised); }
.lg-linklist a .lg-icon { flex: none; color: var(--accent-text); }
.lg-linklist a span { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
/* Kachel mit Icon: Icon und Kicker (bzw. Titel) stehen nebeneinander statt in eigenen Zeilen — spart Höhe. */
.lg-tile:has(> .lg-tile__icon) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-items: center; align-content: start; }
.lg-tile:has(> .lg-tile__icon) > * { grid-column: 1 / -1; }
.lg-tile:has(> .lg-tile__icon) > .lg-tile__icon { grid-column: 1; }
.lg-tile:has(> .lg-tile__icon) > .lg-tile__icon + :is(.lg-eyebrow, .lg-tile__title) { grid-column: 2; margin: 0; }
.lg-tile:has(> .lg-tile__icon) > .lg-tile__arrow { grid-column: auto; }
.lg-tile__title { overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }

/* Lighthouse 26.10.: Footer-Überschriften als h2 (Gliederung), Aussehen wie bisher h4; „Ohne Werbung“-Link mit 24-px-Ziel */
.lg-footer .lg-footer__h { font: 700 12px/1.2 var(--font-text); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 var(--space-3); opacity: .8; }
.lg-ad__nofree { display: inline-flex; align-items: center; min-height: 24px; padding-inline: 4px; margin-inline: -4px; }

/* Lighthouse 26.10.: lange Fragenlisten (Einbürgerungstest: 300 Fragen) erst rendern, wenn sie in Sicht kommen */
.tv2-q { content-visibility: auto; contain-intrinsic-size: auto 320px; }
/* Arabisch/Syrisch: keine lateinische Webfont in der Kette — ihr Nachladen ließ Zeilenhöhen springen */
:root { --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif; }

/* Unterrichtsmaterial: Karten-Titel sind h2 (kein Abschnittstitel darüber) */
.lg-material__body h2 { font: 750 18px/1.25 var(--font-display); margin: 0; }

/* 26.10.: Textlinks in Petrol statt Browser-Blau. Null-Spezifität (:where), damit jede Komponente
   (Buttons, Kacheln, Navigation) ihre eigene Farbe behält; gilt auch für besuchte Links. */
:where(.lg) :where(a) { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
:where(.lg) :where(a):hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Geführte Tour (lg/site.js): Hinweis oben rechts unter dem Kopf, nicht modal, ohne Werbung */
.lg-tour { position: fixed; top: calc(var(--header-height, 64px) + 12px); inset-inline-end: 16px; z-index: calc(var(--z-header, 50) + 1); width: min(380px, calc(100% - 32px)); display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.lg-tour h2 { margin: 0; font: 750 19px/1.25 var(--font-display); }
.lg-tour p { margin: 0; font-size: 15px; line-height: 1.45; }
.lg-tour__top { display: flex; align-items: center; justify-content: space-between; }
.lg-tour__x { border: 0; background: none; font-size: 22px; line-height: 1; padding: 2px 6px; cursor: pointer; color: var(--text-muted); }
.lg-tour__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.lg-tour__dots { display: flex; gap: 6px; }
.lg-tour__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.lg-tour__dots span.on { background: var(--accent); box-shadow: none; }
@media (max-width: 600px) { .lg-tour { inset-inline: 16px; width: auto; top: calc(var(--header-height, 56px) + 8px); } }