/* Bereich „landing“: Sprach-Landingpages, Browser-App-, App-Store- und Schlaf-Seite (app/Views/v2/landing.php). Nur Tokens. */

.lgl-pill { justify-self: start; }
.lgl-applink { margin-top: var(--space-3); flex-wrap: wrap; font-size: 15px; }
.lgl-applink .app-rating { color: var(--text-muted); font-weight: 600; }
.lgl-word__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.lgl-panel0 { padding: 0; overflow: hidden; border: 0; background: none; }
.lgl-tile--hero .lg-tile__title { font-size: 26px; }
.lgl-tile--hero .lg-tile__icon { background: var(--highlight); color: var(--on-highlight); }
.lgl-tile--hero .lg-tile__meta { color: inherit; opacity: .85; }
.lgl .lg-bento h3.lg-tile__title, .lgl .lg-features h3.lg-tile__title, .lgl .lg-platforms h3.lg-tile__title { margin: 0; }
.lgl .lg-tile > p.lg-tile__meta { margin: 0; }

/* Mini-Lektion (Klassen ml-* steuert js/main.js: .on = umgedreht) */
.lgl-ml-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.lgl .ml-card { position: relative; }
.lgl .ml-card .ml-audio { position: absolute; inset-block-start: var(--space-2); inset-inline-end: var(--space-2); z-index: 2; }
.lgl .ml-card .ml-audio.playing { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.lgl .ml-card .lg-flip__face { padding-inline-end: calc(var(--space-4) + 36px); }
.lgl .ml-card.on .lg-flip__inner { transform: rotateY(180deg); }
.lgl .ml-term { font: 700 22px/1.2 var(--font-display); overflow-wrap: break-word; hyphens: auto; word-break: keep-all; }
.lgl .ml-ph { font-size: 13px; color: var(--text-muted); }
.lgl .ml-tr { font: 700 19px/1.25 var(--font-display); overflow-wrap: break-word; hyphens: auto; }
.lgl .ml-card .lg-flip__face--back .ml-tr { color: inherit; }
/* Ohne JavaScript bleibt die Übersetzung sichtbar */
html:not(.js) .lgl [data-mini-lesson] .lg-flip__inner { display: flex; flex-direction: column; transform: none; }
html:not(.js) .lgl [data-mini-lesson] .lg-flip__face--back { transform: none; backface-visibility: visible; }
.lgl .ml-hint { margin: var(--space-4) 0 0; font-size: 14px; }
.lgl-done { margin-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--success-soft, var(--accent-soft)); border: 1px solid var(--line); }
.lgl .ml-done-t { font: 700 18px/1.3 var(--font-display); }

/* Lernpfad: Ziel-Karte */
.lgl-goal__t { font: 750 20px/1.2 var(--font-display); margin: 0; }
.lgl-goal__s { margin: 4px 0 0; color: var(--text-muted); font-size: 15px; }
.lgl .lg-sechead + .lg-facts { margin-bottom: var(--space-6); }

/* Langtext-Spalte */
.lgl-first { margin-top: 0 !important; }
.lgl-block { margin-top: var(--space-8); max-width: var(--measure); }
.lgl-block h2 { font: 750 clamp(22px, 3cqi, 28px)/1.15 var(--font-display); margin: 0 0 var(--space-3); }
.lgl-block h3 { font: 700 19px/1.25 var(--font-display); margin: var(--space-5) 0 var(--space-2); }
.lgl-block p { margin: 0 0 var(--space-3); line-height: 1.6; }
.lgl-lead { font-size: 18px; color: var(--text-muted); }
.lgl .lg-prose .lg-table-wrap { margin: 0 0 var(--space-6); }
.lgl-more .lg-tile__title { font-size: 17px; }
.lgl-more .lg-chips { margin: 0; }

/* Browser-App */
.lgl-tirs { display: grid; gap: var(--space-10); }
.lgl-tipsmore { margin: var(--space-5) 0 0; color: var(--text-muted); }
.lgl-row { display: flex; justify-content: space-between; align-items: center; }
.lgl-mini { font-size: 11px; padding: 2px 8px; }
.lgl-phone-term { font: 800 26px/1.1 var(--font-display); overflow-wrap: anywhere; }
.lgl-phone-ipa { font-size: 12px; }
.lgl-phone-tr { justify-self: start; background: var(--highlight); color: var(--on-highlight); border-radius: var(--radius-xs); padding: 4px 8px; font-size: 12px; }
.lgl-fcdemo { display: grid; gap: var(--space-3); width: min(280px, 100%); }
.lgl-fcdemo .lg-flip__face { grid-area: auto; position: static; transform: none; backface-visibility: visible; min-height: 88px; font: 700 22px/1.2 var(--font-display); }
.lgl-prdemo { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.lgl-prdemo b { font: 800 28px/1.1 var(--font-display); }
.lgl-lvdemo { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.lgl-langgrid { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }
.lgl-langtile { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; }
.lgl-langtile .lg-tile__title { font-size: 15px; }

/* App Store */
.lgl-stars { align-self: center; }
.lgl-stars b { color: var(--text); }
.lgl-shot { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.lgl-shot--hero { width: min(280px, 100%); justify-self: center; align-self: center; }
.lgl-tirs--shots .lg-tir__art img { display: block; width: min(220px, 100%); height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.lgl-center { display: flex; justify-content: center; margin-top: var(--space-8); }
.lgl .lg-platforms .lg-tile > .lg-btn { align-self: flex-start; margin-top: auto; }

/* Schlaf-Ratgeber */
.lgl-sleep { background: var(--gray-1000); color: var(--gray-50); border-color: var(--gray-1000); }
.lgl-sleep .lg-icon { color: var(--highlight); }
.lgl-sleep__term { font: 800 32px/1.1 var(--font-display); }
.lgl-sleep__tr { color: var(--gray-300); }
.lgl-guide { padding-block: var(--space-10); }
.lgl-guide .lg-split__main { display: grid; gap: var(--space-8); align-content: start; }
.lgl-gsec h2 { font: 750 clamp(22px, 3cqi, 28px)/1.15 var(--font-display); margin: 0 0 var(--space-3); }
.lgl-gsec p { margin: 0; font-size: 17px; line-height: 1.6; max-width: var(--measure); }
.lgl-guide .lg-split__main > .lg-ad { margin: 0; }
.lgl-fb__h { margin: 0; font: 800 24px/1.1 var(--font-display); color: inherit; }
.lgl-fb__p { margin: 0; line-height: 1.6; }
.lgl-fb__btn { justify-self: start; }

.lgl .lgl-more-link { white-space: normal; }