/* learngerman.school components, brand v3.1 "Auf Stoß. Die Seite antwortet." Scoped to .lg-root (canvas pages) and our shortcodes.
   One rule runs through everything: the German line is ink; its second line is printed on a slab.
   Inks meet edge to edge, never overlap. Hover only exists on real pointers; touch gets pressed states. */

@layer lg.base {
	html { background: var(--lg-white); }
	.lg-root { font: 400 var(--lg-fs-3)/1.55 var(--lg-font-text); color: var(--lg-text); background: var(--lg-ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; font-variant-numeric: lining-nums; -webkit-tap-highlight-color: transparent; }
	.lg-root *, .lg-root *::before, .lg-root *::after { box-sizing: border-box; }
	.lg-root :where(h1, h2, h3, h4) { font-family: var(--lg-font-display); font-weight: 800; line-height: 1; letter-spacing: -0.035em; margin: 0; color: var(--lg-de); text-wrap: balance; }
	.lg-root :where(p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
	.lg-root :where(a) { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
	.lg-root :where(img, svg, canvas) { max-width: 100%; display: block; }
	.lg-root :where(button, input, select, textarea) { font: inherit; color: inherit; }
	.lg-root :where(button) { touch-action: manipulation; }
	.lg-root ::selection { background: var(--lg-slab); color: var(--lg-on-slab); }
	.lg-root :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; box-shadow: 0 0 0 6px var(--lg-ground); }
	.lg-root [hidden] { display: none !important; }
	.lg-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
	.lg-skip { position: absolute; left: var(--lg-s-4); top: -100px; z-index: 300; padding: var(--lg-s-3) var(--lg-s-4); background: #000; color: #fff; font-weight: 600; }
	.lg-skip:focus { top: var(--lg-s-4); }
	.lg-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--lg-gutter); }
	.lg-body { max-width: var(--lg-measure); }
	.lg-lead { font-size: var(--lg-fs-4); line-height: 1.45; max-width: 46ch; }
	.lg-quiet { color: var(--lg-quiet); }
	.lg-root :where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], select, textarea) { width: 100%; min-height: 48px; padding: .6em .75em; border: 2px solid var(--lg-de); border-radius: 0; background: var(--lg-ground); color: var(--lg-text); font: 500 var(--lg-fs-3)/1.3 var(--lg-font-text); }
	.lg-root :where(input, select, textarea):focus-visible { outline-offset: 0; box-shadow: 4px 4px 0 var(--lg-slab); }
	.lg-root :where(input)::placeholder { color: var(--lg-quiet); opacity: 1; }
}

@layer lg.components {
	/* ---------- The logo: two lines of a page. Line 1 (German) is 1.16 × line 2 (English). The bar hides a word. ---------- */
	.lg-logo { --lg-logo-w: 8.1em; display: inline-grid; width: var(--lg-logo-w); font: 800 var(--lg-logo-size, 1.375rem)/.9 var(--lg-font-display); letter-spacing: -0.045em; text-decoration: none; color: var(--lg-de); vertical-align: top; -webkit-touch-callout: none; user-select: none; }
	.lg-logo__l1, .lg-logo__l2 { display: flex; align-items: stretch; min-height: 1.02em; }
	.lg-logo__l2 { width: calc(var(--lg-logo-w) / var(--lg-ratio)); background: var(--lg-slab); color: var(--lg-on-slab); }
	.lg-logo__t { padding: .07em .1em .1em 0; white-space: nowrap; }
	.lg-logo__l2 .lg-logo__t { padding-left: .1em; }
	.lg-logo__bar { position: relative; flex: 1; display: flex; align-items: center; overflow: hidden; background: currentColor; margin: .2em 0 .17em .12em; transform-origin: left; }
	/* The context word: printed inside the bar in the ground colour, read left to right */
	.lg-logo__ctx { position: absolute; left: .16em; top: 50%; translate: 0 -52%; font: 800 .5em/1 var(--lg-font-display); letter-spacing: -0.01em; color: var(--lg-ground, #fff); white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-logo[data-ctx="open"] .lg-logo__ctx { clip-path: inset(0 0 0 0); }
	@media (hover: hover) { .lg-logo:hover .lg-logo__bar { animation: lg-bar-read calc(var(--lg-d-4) * 2 * var(--lg-motion)) var(--lg-ease); } }
	.lg-logo[data-ctx="open"] .lg-logo__bar { animation: none; }
	@keyframes lg-bar-read { 50% { transform: scaleX(.18); } }
	.lg-logo[data-intro] .lg-logo__bar { animation: lg-bar-in calc(700ms * var(--lg-motion)) var(--lg-ease) both; }
	.lg-logo[data-intro] .lg-logo__l2 { animation: lg-slab-in calc(500ms * var(--lg-motion)) calc(220ms * var(--lg-motion)) var(--lg-ease) both; }
	@keyframes lg-bar-in { from { transform: scaleX(0); } }
	@keyframes lg-slab-in { from { clip-path: inset(0 100% 0 0); } }

	/* ---------- Announcement bar (settings → Header) ---------- */
	.lg-announce { position: relative; z-index: calc(var(--lg-z-header) + 1); display: flex; align-items: center; gap: var(--lg-s-3); min-height: 44px; padding: .5rem var(--lg-gutter); background: var(--lg-ann, var(--lg-ink-s)); color: var(--lg-ann-on, var(--lg-ink-s-on)); font: 600 var(--lg-fs-2)/1.35 var(--lg-font-text); transition: margin calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease), opacity calc(var(--lg-d-2) * var(--lg-motion)); }
	.lg-announce a { color: inherit; flex: 1; display: flex; flex-wrap: wrap; gap: .1em .6em; text-decoration: none; min-height: 32px; align-items: center; }
	.lg-announce b { font: 800 1.06em/1.1 var(--lg-font-display); letter-spacing: -0.02em; }
	.lg-announce a:hover span, .lg-announce a:focus-visible span { text-decoration: underline; }
	.lg-announce button { width: 40px; height: 40px; flex: none; border: 0; background: none; color: inherit; font-size: 22px; cursor: pointer; }
	.lg-announce.is-gone { margin-top: -44px; opacity: 0; }

	/* ---------- Header: the logo starts big and settles into the bar; a running head names the chapter ---------- */
	.lg-header { --lg-hl: 1.375rem; position: sticky; top: 0; z-index: var(--lg-z-header); background: var(--lg-white); --lg-ground: var(--lg-white); --lg-de: #000; --lg-text: #000; --lg-slab: var(--lg-ink-s); --lg-on-slab: var(--lg-ink-s-on); --k: 0; }
	.lg-header::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: #000; transform: scaleX(calc(1 - var(--k))); transform-origin: left; }
	.lg-header__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lg-s-4); padding-block: var(--lg-s-3); }
	.lg-header .lg-logo { --lg-logo-size: calc(var(--lg-hl) * (1 + var(--k) * (var(--S, 1) - 1))); flex: none; }
	@media (max-width: 480px) { .lg-header { --lg-hl: 1.12rem; } }
	.lg-root[data-big-logo] .lg-header__bar { height: calc(var(--lg-hl) * 0.9 * 2.27 + 2 * var(--lg-s-3)); overflow: visible; }
	.lg-bigspace { height: var(--lg-bigspace, 0px); }
	.lg-header__actions { display: flex; align-items: center; gap: var(--lg-s-2); flex: none; }
	/* Folio: reading progress as a thin second line under the header (in the series ink) */
	.lg-folio { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; transform: scaleX(var(--p, 0)); transform-origin: left; background: var(--lg-ink-s); z-index: 1; }
	/* Running head (Kolumnentitel): chapter number, German name, English on its slab */
	.lg-runhead { display: none; align-self: center; align-items: baseline; gap: .5em; margin-right: auto; margin-left: var(--lg-s-6); min-width: 0; font-size: var(--lg-fs-2); opacity: calc(1 - var(--k) * 3); }
	.lg-runhead__n { font: 800 var(--lg-fs-1)/1 var(--lg-font-display); font-variant-numeric: tabular-nums; }
	.lg-runhead__de { font: 800 var(--lg-fs-3)/1 var(--lg-font-display); letter-spacing: -0.02em; white-space: nowrap; }
	.lg-runhead__en { font: 500 var(--lg-fs-1)/1.2 var(--lg-font-text); background: var(--lg-slab); color: var(--lg-on-slab); padding: .15em .4em; white-space: nowrap; }
	.lg-runhead.is-new .lg-runhead__de { animation: lg-pass-de calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease) both; }
	.lg-runhead.is-new .lg-runhead__en { animation: lg-slab-in calc(var(--lg-d-3) * var(--lg-motion)) calc(var(--lg-pass) * var(--lg-motion)) var(--lg-ease) both; }
	@keyframes lg-pass-de { from { opacity: 0; transform: translateY(.3em); } }
	@media (min-width: 900px) { .lg-runhead { display: flex; } .lg-runhead[hidden] { display: none !important; } }
	@media (max-width: 599px) { .lg-root[data-big-logo] .lg-header__bar { position: relative; } .lg-root[data-big-logo] .lg-header__actions { position: absolute; right: var(--lg-gutter); top: var(--lg-s-3); opacity: calc(1 - var(--k) * 2); pointer-events: var(--lg-actions-pe, auto); } }

	/* ---------- Buttons: a square block (action) and a round pill (going elsewhere) ---------- */
	.lg-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 1.15em; background: var(--lg-de); color: var(--lg-btn-on, var(--lg-ground)); border: 2px solid var(--lg-de); border-radius: 0; font: 700 var(--lg-fs-3)/1 var(--lg-font-display); letter-spacing: -0.01em; text-decoration: none; cursor: pointer; user-select: none; transition: transform calc(var(--lg-d-1) * var(--lg-motion)) var(--lg-ease), box-shadow calc(var(--lg-d-1) * var(--lg-motion)) var(--lg-ease); }
	@media (hover: hover) { .lg-btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lg-slab); } }
	.lg-btn:active { transform: translate(1px, 1px); box-shadow: none; transition-duration: 0ms; }
	.lg-btn--ghost { background: transparent; color: var(--lg-de); }
	.lg-btn--slab { background: var(--lg-slab); color: var(--lg-on-slab); border-color: var(--lg-slab); }
	@media (hover: hover) { .lg-btn--slab:hover { box-shadow: 4px 4px 0 var(--lg-de); } }
	.lg-btn--small { min-height: var(--lg-target); padding: 0 .9em; font-size: var(--lg-fs-2); }
	.lg-btn--pill { border-radius: 999px; }
	.lg-btn--wide { width: 100%; }
	.lg-btn[disabled], .lg-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
	.lg-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
	.lg-btn[aria-busy="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; top: calc(50% - 3px); height: 6px; background: var(--lg-ground); transform-origin: left; animation: lg-busy calc(900ms / max(var(--lg-motion), .01)) var(--lg-ease) infinite; }
	.lg-btn--ghost[aria-busy="true"]::after { background: var(--lg-de); }
	@keyframes lg-busy { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
	.lg-btn svg { width: .8em; height: .8em; flex: none; }
	.lg-row { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); align-items: center; }
	.lg-linkbtn { display: inline; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 0; }

	/* ---------- Chips: choices. Pressed = printed on the slab ---------- */
	.lg-chips { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); }
	.lg-chip { display: inline-flex; align-items: center; gap: .5em; min-height: var(--lg-target); padding: 0 .95em; border: 2px solid currentColor; border-radius: 999px; background: transparent; color: var(--lg-text); font: 600 var(--lg-fs-2)/1 var(--lg-font-text); cursor: pointer; text-decoration: none; user-select: none; transition: background-color calc(var(--lg-d-1) * var(--lg-motion)), color calc(var(--lg-d-1) * var(--lg-motion)); }
	@media (hover: hover) { .lg-chip:hover { background: var(--lg-text); color: var(--lg-ground); } }
	.lg-chip:active { transform: scale(.97); }
	.lg-chip[aria-pressed="true"] { background: var(--lg-text); color: var(--lg-ground); }
	.lg-chip__swatch { width: .8em; height: .8em; background: var(--sw, currentColor); box-shadow: 0 0 0 1.5px currentColor; flex: none; }
	.lg-chip[disabled] { opacity: .4; cursor: not-allowed; }
	/* Segmented switch (du | Sie, modes) */
	.lg-seg { display: inline-flex; border: 2px solid var(--lg-de); }
	.lg-seg button { min-height: 40px; min-width: 52px; padding: 0 .9em; border: 0; background: none; color: var(--lg-de); font: 700 var(--lg-fs-2)/1 var(--lg-font-display); cursor: pointer; }
	.lg-seg button + button { border-left: 2px solid var(--lg-de); }
	.lg-seg button[aria-pressed="true"] { background: var(--lg-slab); color: var(--lg-on-slab); }

	/* ---------- The mark (SVG): German block over English block ---------- */
	.lg-mark .de { fill: var(--lg-de); }
	.lg-mark .en { fill: var(--lg-slab); }
	.lg-mark[data-assemble] .de { animation: lg-bar-in calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease) both; transform-box: fill-box; }
	.lg-mark[data-assemble] .en { animation: lg-bar-in calc(var(--lg-d-3) * var(--lg-motion)) calc(120ms * var(--lg-motion)) var(--lg-ease) both; transform-box: fill-box; }

	/* ---------- Sentence pair: German in ink, English on the slab ---------- */
	.lg-pair { display: grid; gap: .25em; justify-items: start; font-size: var(--lg-pair-size, var(--lg-fs-5)); }
	.lg-pair [data-lg-mark] { margin-bottom: .4em; }
	.lg-pair__de { font: 800 1em/1.02 var(--lg-font-display); letter-spacing: -0.035em; color: var(--lg-de); text-wrap: balance; max-width: 22ch; }
	.lg-pair__en { display: inline; justify-self: start; font: 500 .52em/1.5 var(--lg-font-text); color: var(--lg-on-slab); background: var(--lg-slab); padding: .12em .4em; -webkit-box-decoration-break: clone; box-decoration-break: clone; max-width: 46ch; transition: opacity calc(var(--lg-d-3) * var(--lg-motion)), transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease), background-color calc(var(--lg-d-2) * var(--lg-motion)), color calc(var(--lg-d-2) * var(--lg-motion)); }
	.lg-pair__note { font-size: var(--lg-fs-2); color: var(--lg-quiet); }
	.lg-pair__reveal { display: none; font-size: var(--lg-fs-2); }
	.lg-pair[data-mode="tap"] .lg-pair__reveal, .lg-pair[data-mode="flip"] .lg-pair__reveal { display: inline-flex; }
	.lg-pair[data-mode="fading"] .lg-pair__en { opacity: var(--lg-support, .45); }
	.lg-pair[data-mode="tap"]:not([data-open]) .lg-pair__en { background: var(--lg-text); color: transparent; user-select: none; }
	.lg-pair[data-mode="flip"]:not([data-open]) .lg-pair__en { transform: rotate(180deg); }
	.lg-hard .lg-pair__en, .lg-hard [data-en-line] { visibility: hidden; }

	/* ---------- Textmarker: a flat ink stroke under the word (no blending; the black type sits above it) ---------- */
	[data-lg-marker] .lg-w, .lg-pair__de[data-lg-marker] .lg-w { cursor: pointer; border-radius: 0; background-image: linear-gradient(var(--lg-ink-s), var(--lg-ink-s)); background-repeat: no-repeat; background-size: 0% 46%; background-position: 0 88%; transition: background-size calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease); }
	.lg-w.is-marked { background-size: 100% 46%; }
	[data-ground="black"] .lg-w.is-marked { color: #fff; background-size: 100% 22%; }
	@media (hover: hover) { [data-lg-marker] .lg-w:hover { background-size: 100% 10%; } }

	/* ---------- Compound split: the word opens at its joints ---------- */
	.lg-split { display: inline-flex; align-items: flex-end; gap: 0; padding: 0; border: 0; background: none; font: 800 var(--lg-fs-6)/1 var(--lg-font-display); letter-spacing: -0.035em; color: var(--lg-de); cursor: pointer; text-align: left; }
	.lg-split__part { display: inline-grid; transition: margin calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease); }
	.lg-split__part small { font: 500 var(--lg-fs-2)/1.2 var(--lg-font-text); letter-spacing: 0; opacity: 0; transform: translateY(-4px); transition: opacity calc(var(--lg-d-2) * var(--lg-motion)), transform calc(var(--lg-d-2) * var(--lg-motion)); }
	.lg-split__part--link { color: var(--lg-on-slab); background: var(--lg-slab); }
	.lg-split[aria-expanded="true"] .lg-split__part + .lg-split__part { margin-left: .45em; }
	.lg-split[aria-expanded="true"] .lg-split__part small { opacity: 1; transform: none; }
	.lg-split-verdict { margin-top: var(--lg-s-3); font-size: var(--lg-fs-3); }

	/* ---------- Stamp (Stempel): a library-card date stamp, slightly turned ---------- */
	.lg-stamp-mark { display: inline-grid; place-items: center; gap: .1em; min-width: 6.2em; padding: .45em .7em .4em; border: 3px solid currentColor; color: var(--lg-stamp, var(--lg-ink-s)); font: 800 var(--lg-fs-2)/1 var(--lg-font-display); letter-spacing: .02em; text-transform: uppercase; transform: rotate(var(--rot, -6deg)); }
	.lg-stamp-mark small { font: 700 var(--lg-fs-1)/1 var(--lg-font-text); letter-spacing: .04em; }
		.lg-stamp-mark.is-new { animation: lg-stamp calc(420ms * var(--lg-motion)) var(--lg-ease-stamp) both; }
	@keyframes lg-stamp { 0% { transform: rotate(var(--rot, -6deg)) scale(1.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(var(--rot, -6deg)) scale(1); } }

	/* ---------- Toasts ---------- */
	.lg-toasts { position: fixed; z-index: var(--lg-z-toast); left: var(--lg-s-4); right: var(--lg-s-4); bottom: calc(var(--lg-s-4) + 72px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: end; gap: var(--lg-s-2); pointer-events: none; }
	.lg-toast { pointer-events: auto; display: grid; grid-template-columns: 1fr auto; gap: var(--lg-s-3); align-items: start; width: min(440px, 100%); padding: var(--lg-s-4) var(--lg-s-3) var(--lg-s-4) var(--lg-s-5); background: #000; color: #fff; border-left: 10px solid var(--lg-ink-s); font-size: var(--lg-fs-2); line-height: 1.45; box-shadow: 6px 6px 0 var(--lg-ink-s); animation: lg-toast-in calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease-out) both; }
	.lg-toast:not(:last-child) { display: none; }
	.lg-toast b { color: #fff; }
	.lg-toast__small { margin-top: 6px; font-size: var(--lg-fs-1); opacity: .85; }
	.lg-toast__close { width: 36px; height: 36px; border: 0; background: none; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
	.lg-toast__ribbon { float: left; width: 12px; height: 28px; margin: 0 10px 0 -4px; background: var(--lg-ink-s); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
	.lg-toast__case { display: flex; gap: 3px; margin-top: 10px; }
	.lg-toast__case i, .lg-case i { display: inline-grid; place-items: center; width: 1.6em; height: 1.9em; border: 1.5px solid currentColor; font: 900 .9em/1 var(--lg-font-display); font-style: normal; }
	.lg-toast__case i.on { background: #fff; color: #000; }
	.lg-toast__case i.new { background: var(--lg-ink-s); color: var(--lg-ink-s-on); border-color: var(--lg-ink-s); animation: lg-stamp calc(420ms * var(--lg-motion)) var(--lg-ease-stamp) both; --rot: 0deg; }
	@keyframes lg-toast-in { from { transform: translateY(12px); opacity: 0; } }

	/* ---------- Sheet: bottom sheet on phones (grip, drag down), dialog on larger screens ---------- */
	.lg-panel { position: fixed; inset: auto 0 0 0; z-index: var(--lg-z-panel); width: 100%; max-width: none; max-height: min(88vh, 88dvh); margin: 0; padding: 0; border: 0; border-top: 3px solid var(--lg-de); background: var(--lg-ground); color: var(--lg-text); overflow: auto; overscroll-behavior: contain; animation: lg-panel-in calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease-out) both; touch-action: pan-y; }
	.lg-panel::backdrop { background: rgba(0, 0, 0, .55); animation: lg-fade calc(var(--lg-d-3) * var(--lg-motion)) both; }
	.lg-panel.is-dragging { transition: none; animation: none; }
	.lg-panel:not(.is-dragging) { transition: transform calc(500ms * var(--lg-motion)) var(--lg-ease-snap); }
	.lg-panel.is-closing { transform: translateY(100%); }
	.lg-panel__grip { display: grid; place-items: center; height: 28px; cursor: grab; }
	.lg-panel__grip i { width: 44px; height: 5px; background: var(--lg-de); }
	.lg-panel__body { padding: var(--lg-s-2) var(--lg-gutter) calc(var(--lg-s-7) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--lg-s-4); }
	.lg-panel__body h2 { font-size: var(--lg-fs-6); letter-spacing: -0.045em; }
	.lg-panel__close { position: absolute; top: 6px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--lg-de); font-size: 28px; cursor: pointer; }
	@keyframes lg-panel-in { from { transform: translateY(100%); } }
	@keyframes lg-fade { from { opacity: 0; } }
	@media (min-width: 760px) {
		.lg-panel { inset: 0; margin: auto; width: min(640px, calc(100% - 48px)); max-height: min(86vh, 900px); height: fit-content; border: 3px solid var(--lg-de); box-shadow: 10px 10px 0 var(--lg-ink-s); animation-name: lg-pop; }
		.lg-panel.is-closing { transform: none; opacity: 0; transition: opacity calc(var(--lg-d-2) * var(--lg-motion)); }
		.lg-panel__grip { visibility: hidden; height: 16px; }
		.lg-panel__body { padding-bottom: var(--lg-s-6); }
	}
	@keyframes lg-pop { from { opacity: 0; transform: translateY(16px); } }
	.lg-found-list { list-style: none; padding: 0; display: grid; gap: var(--lg-s-3); }
	.lg-found-list li { display: grid; grid-template-columns: 2.2em 1fr; gap: var(--lg-s-3); align-items: start; padding-top: var(--lg-s-3); border-top: 2px solid var(--lg-rule); }
	.lg-case__l { display: grid; place-items: center; width: 1.9em; height: 2.2em; background: var(--lg-slab); color: var(--lg-on-slab); font: 900 1.1em/1 var(--lg-font-display); }

	/* ---------- Dock: contents + Leseausweis, in the thumb zone ---------- */
	.lg-dock { position: fixed; z-index: calc(var(--lg-z-header) + 2); left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 0; translate: -50% calc(100% + 24px); transition: translate calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease-out); background: #000; color: #fff; box-shadow: 5px 5px 0 var(--lg-ink-s); }
	.lg-dock[data-show] { translate: -50% 0; }
	.lg-dock button { display: inline-flex; align-items: center; gap: .55em; min-height: 52px; padding: 0 1.1em; border: 0; background: none; color: inherit; font: 700 var(--lg-fs-2)/1 var(--lg-font-display); cursor: pointer; white-space: nowrap; }
	.lg-dock button + button { border-left: 2px solid #333; }
	.lg-dock button:active { background: #222; }
	.lg-dock__now { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; }
	.lg-dock__n { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .3em; background: var(--lg-ink-s); color: var(--lg-ink-s-on); font-size: var(--lg-fs-1); }
	.lg-dock .lg-mark .de { fill: #fff; }
	@media (min-width: 900px) { .lg-dock { left: auto; right: var(--lg-gutter); translate: 0 calc(100% + 24px); } .lg-dock[data-show] { translate: 0 0; } }

	/* ---------- Social links ---------- */
	.lg-social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--lg-s-2); }
	.lg-social a { display: inline-flex; align-items: center; gap: .5em; min-height: var(--lg-target); padding: 0 1em; border-radius: 999px; background: #000; color: #fff; font: 700 var(--lg-fs-2)/1 var(--lg-font-display); text-decoration: none; }
	.lg-social a svg { width: 12px; height: 12px; }
	@media (max-width: 899px) { .lg-header .lg-social li:has(a:not([data-featured])) { display: none; } }
	@media (max-width: 420px) { .lg-header .lg-social a svg { display: none; } }
	/* Footer: each network is a line of text that gets its second line when you point at it (or when featured) */
	.lg-social--footer { display: grid; gap: 0; border-top: 2px solid var(--lg-rule); }
	.lg-social--footer li { border-bottom: 2px solid var(--lg-rule); }
	.lg-social--footer a { position: relative; display: flex; align-items: center; gap: var(--lg-s-4); width: 100%; min-width: 0; min-height: 0; padding: .12em 0 .08em; border-radius: 0; background: none; color: var(--lg-de); font: 800 var(--lg-fs-7)/1 var(--lg-font-display); letter-spacing: -0.05em; overflow: hidden; }
	.lg-social--footer a span { position: relative; z-index: 1; }
	.lg-social--footer a::after { content: ""; flex: 1; align-self: stretch; margin: .2em 0 .16em; background: var(--lg-slab); transform: scaleX(0); transform-origin: left; transition: transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	@media (hover: hover) { .lg-social--footer a:hover::after { transform: none; } }
	.lg-social--footer a:focus-visible::after, .lg-social--footer a:active::after, .lg-social--footer a[data-featured]::after { transform: none; }
	.lg-social--footer a svg { order: 3; width: .4em; height: .4em; flex: none; }
	.lg-social--footer a small { order: 2; font: 600 var(--lg-fs-2)/1 var(--lg-font-text); letter-spacing: 0; color: var(--lg-quiet); white-space: nowrap; }
	@media (max-width: 699px) { .lg-social--footer a small { display: none; } .lg-social--footer a { font-size: clamp(2.2rem, 13vw, 3.4rem); } }

	/* ---------- Footer ---------- */
	.lg-footer { padding-block: var(--lg-s-9) calc(var(--lg-s-9) + 40px); }
	.lg-footer__sign { display: grid; justify-items: start; gap: .1em; margin-bottom: var(--lg-s-8); }
	.lg-footer__sign p:first-child { font: 900 var(--lg-fs-8)/var(--lg-lead-poster) var(--lg-font-display); letter-spacing: var(--lg-track-poster); color: var(--lg-de); }
	.lg-footer__sign p:last-child { font: 600 var(--lg-fs-5)/1.2 var(--lg-font-text); background: var(--lg-slab); color: var(--lg-on-slab); padding: .1em .35em; }
	.lg-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--lg-s-6); margin-top: var(--lg-s-8); }
	.lg-footer__cols h3 { font-size: var(--lg-fs-3); letter-spacing: -0.01em; margin-bottom: var(--lg-s-3); }
	.lg-footer__cols ul { list-style: none; padding: 0; display: grid; gap: 2px; }
	.lg-footer__cols a { display: inline-block; padding-block: 8px; text-decoration: none; font-weight: 500; }
	@media (hover: hover) { .lg-footer__cols a:hover { text-decoration: underline; } }
	.lg-footer__tag { margin-top: var(--lg-s-6); max-width: 40ch; color: var(--lg-quiet); }
	.lg-footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--lg-s-4); margin-top: var(--lg-s-7); padding-top: var(--lg-s-4); border-top: 2px solid var(--lg-rule); font: 500 var(--lg-fs-2)/1.4 var(--lg-font-text); }
	.lg-footer__meta ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lg-s-2) var(--lg-s-4); list-style: none; padding: 0; margin: 0; }
	.lg-footer__meta li:has(> [hidden]) { display: none; }
	.lg-footer__meta a { display: inline-block; padding-block: 12px; }
	.lg-found { display: inline-flex; align-items: center; gap: 8px; min-height: var(--lg-target); padding: 0 .7em; border: 2px solid currentColor; background: none; color: inherit; font: 600 var(--lg-fs-1)/1 var(--lg-font-text); cursor: pointer; }
	.lg-case { display: inline-flex; gap: 2px; }
	.lg-case i { width: 1.35em; height: 1.6em; border-width: 1px; font-size: .78rem; }
	.lg-case i.on { background: var(--lg-slab); color: var(--lg-on-slab); border-color: var(--lg-slab); }

	/* ---------- Range ---------- */
	.lg-range { display: grid; gap: var(--lg-s-2); max-width: 420px; font-weight: 600; font-size: var(--lg-fs-2); }
	.lg-range input { accent-color: var(--lg-de); width: 100%; min-height: var(--lg-target); }

	/* ---------- Evening mode (Feierabend): the page goes dark, the second line is the light ---------- */
	.lg-evening, .lg-evening [data-ground] { --lg-ground: #000 !important; --lg-de: #fff !important; --lg-text: #fff !important; --lg-quiet: var(--lg-grey-on-black) !important; --lg-slab: var(--lg-ink-s) !important; --lg-on-slab: var(--lg-ink-s-on) !important; --lg-rule: #fff !important; }
	.lg-evening .lg-header { --lg-ground: #000; background: #000; --lg-de: #fff; }
	.lg-evening .lg-header::after { background: #fff; }
}

@layer lg.motion {
	/* The second line prints as its pair scrolls into view (scroll-driven where supported; static otherwise) */
	@supports (animation-timeline: view()) {
		html:not([data-lg-motion="off"]) .lg-pair--scroll .lg-pair__en { animation: lg-slab-in linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
	}
	/* Reprint: the new ink rolls in from the left */
	html.lg-reprinting::view-transition-old(root) { animation: none; }
	html.lg-reprinting::view-transition-new(root) { animation: lg-reprint 620ms cubic-bezier(.7, 0, .2, 1) both; }
	@keyframes lg-reprint { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
	.lg-js .lg-reveal { opacity: calc(1 - var(--lg-motion)); transform: translateY(calc(24px * var(--lg-motion))); transition: opacity calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease), transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-js .lg-reveal.is-in, .lg-js .lg-reveal:focus-within { opacity: 1; transform: none; }
	/* Two print passes: a heading prints first, its slab follows (IntersectionObserver adds .is-in) */
	.lg-js [data-lg-print] .lg-print-de { clip-path: inset(0 0 calc(100% * var(--lg-motion)) 0); transition: clip-path calc(500ms * var(--lg-motion)) var(--lg-ease); }
	.lg-js [data-lg-print] .lg-print-en { clip-path: inset(0 calc(100% * var(--lg-motion)) 0 0); transition: clip-path calc(420ms * var(--lg-motion)) calc(var(--lg-pass) * 1.4 * var(--lg-motion)) var(--lg-ease); }
	.lg-js [data-lg-print].is-in .lg-print-de, .lg-js [data-lg-print].is-in .lg-print-en { clip-path: inset(0 0 0 0); }
	@media (prefers-reduced-motion: reduce) { .lg-js [data-lg-print] .lg-print-de, .lg-js [data-lg-print] .lg-print-en { clip-path: none !important; } }
}

/* ---------- In-page navigation (v3.1): sticky under the header. Chapters on /brand, roles on the home page ---------- */
@layer lg.components {
	.lg-subnav { position: sticky; top: var(--lg-subnav-top, 64px); z-index: calc(var(--lg-z-header) - 1); background: #fff; color: #000; border-bottom: 2px solid #000; --lg-ground: #fff; --lg-de: #000; --lg-text: #000; }
	.lg-subnav__inner { display: flex; align-items: center; gap: var(--lg-s-3); min-height: 56px; }
	.lg-subnav__track { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; margin: 0; padding: 6px 0; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
	.lg-subnav__track::-webkit-scrollbar { display: none; }
	.lg-subnav__track > * { flex: none; scroll-snap-align: start; }
	.lg-subnav__progress { position: absolute; left: 0; bottom: -2px; height: 4px; width: 100%; background: var(--lg-ink-s); transform: scaleX(var(--p, 0)); transform-origin: left; }
	.lg-has-subnav .lg-runhead, .lg-has-subnav [data-lg-dock-toc] { display: none !important; }
	.lg-has-subnav .lg-header::after { display: none; }
	html.lg-has-subnav { scroll-padding-top: calc(var(--lg-subnav-top, 64px) + var(--lg-subnav-h, 56px) + 8px); }

	/* Chapters: group labels (small caps) and German chapter names; current = printed on the slab */
	.lg-subnav__group { padding: 0 4px 0 12px; font: 700 var(--lg-fs-1)/1 var(--lg-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--lg-grey); }
	.lg-subnav__group:first-child { padding-left: 0; }
	.lg-subnav--chapters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .75em; font: 800 var(--lg-fs-2)/1 var(--lg-font-display); letter-spacing: -0.01em; color: #000; text-decoration: none; transition: background-color calc(var(--lg-d-2) * var(--lg-motion)), color calc(var(--lg-d-2) * var(--lg-motion)); }
	@media (hover: hover) { .lg-subnav--chapters a:hover { box-shadow: inset 0 -3px 0 #000; } }
	.lg-subnav--chapters a:active { background: #000; color: #fff; }
	.lg-subnav--chapters a[aria-current="true"] { background: var(--lg-ink-s); color: var(--lg-ink-s-on); }

	/* Roles: the sentence "Deutsch für …" completed by your profession */
	.lg-subnav__lead { flex: none; font: 900 var(--lg-fs-4)/1 var(--lg-font-display); letter-spacing: -0.03em; }
	.lg-subnav__role { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; padding: 0 .85em; border: 2px solid #000; border-radius: 999px; background: #fff; color: #000; font: 700 var(--lg-fs-2)/1 var(--lg-font-display); cursor: pointer; white-space: nowrap; transition: background-color calc(var(--lg-d-2) * var(--lg-motion)); }
	.lg-subnav__role i { width: .8em; height: .8em; background: var(--sw); box-shadow: 0 0 0 1.5px #000; }
	.lg-subnav__role[data-soon]::after { content: "soon"; font: 600 10px/1 var(--lg-font-text); letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
	@media (hover: hover) { .lg-subnav__role:hover { background: #000; color: #fff; } }
	.lg-subnav__role:active { transform: scale(.97); }
	.lg-subnav__role[aria-pressed="true"] { background: var(--sw); color: #000; border-color: #000; }
	.lg-subnav__role[aria-pressed="true"] i { box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #fff; }
	[data-series="mk"] .lg-subnav__role[aria-pressed="true"] { color: #fff; }
	.lg-subnav__anrede { flex: none; }
	.lg-subnav__anrede button { min-height: 36px; min-width: 44px; }
	@media (max-width: 699px) {
		.lg-subnav--roles .lg-subnav__inner { flex-wrap: wrap; gap: 0 var(--lg-s-3); padding-top: 8px; }
		.lg-subnav--roles .lg-subnav__lead { font-size: var(--lg-fs-3); order: 1; }
		.lg-subnav--roles .lg-subnav__anrede { order: 2; margin-left: auto; }
		.lg-subnav--roles .lg-subnav__track { order: 3; flex-basis: 100%; }
	}
}