/* Brand portal + shared sheets, brand v3. v2 sheets kept (cover = v2 split hero), v3 sheets at the end.
   Mobile-first. Grounds come from tokens.css ([data-ground]). */
@layer lg.portal {
	.lg-v2, .lg-v3, .lg-home { --lg-sheet: clamp(72px, 12vw, 168px); }
	.lg-v2 > section, .lg-v3 > section, .lg-v2 > div > section { position: relative; }
	html { scroll-padding-top: 88px; }
	body.lg-root { margin: 0; background: var(--lg-white); }
	:is(.lg-v2, .lg-v3) :where(h2) { font-size: var(--lg-fs-7); font-weight: 900; line-height: .92; letter-spacing: -0.05em; max-width: 14ch; }

	/* ================= 1 · Split hero (Frans Hals: one half reads, the other waits upside down) ================= */
	.lg-cover { display: grid; grid-template-rows: auto auto auto; }
	.lg-cover__top { display: flex; align-items: flex-end; min-height: 52svh; padding-block: var(--lg-s-7) 0; overflow: hidden; }
	.lg-cover__inner { display: grid; gap: var(--lg-s-6); }
	.lg-cover__meta { max-width: 34ch; font: 500 var(--lg-fs-3)/1.4 var(--lg-font-text); color: var(--lg-text); justify-self: end; text-align: left; }
	.lg-welcome { justify-self: end; max-width: 34ch; display: grid; gap: 2px; font: 600 var(--lg-fs-3)/1.35 var(--lg-font-text); }
	.lg-welcome[hidden] { display: none; }
	.lg-welcome span:first-child { justify-self: start; font: 900 var(--lg-fs-5)/1 var(--lg-font-display); letter-spacing: -0.03em; }
	.lg-welcome a { color: inherit; }
	.lg-cover__de { font: 900 var(--lg-fs-8)/.86 var(--lg-font-display); letter-spacing: var(--lg-track-poster); color: var(--lg-de); max-width: none; margin-bottom: -.09em; text-wrap: balance; }
	.lg-cover__bottom { display: flex; align-items: flex-start; width: 100%; min-height: 40svh; padding: 0 0 var(--lg-s-7); border: 0; margin: 0; text-align: left; cursor: pointer; overflow: hidden; color: var(--lg-text); }
	.lg-cover__en { display: block; font: 800 calc(var(--lg-fs-8) / 1.16)/.9 var(--lg-font-display); letter-spacing: -0.05em; color: var(--lg-text); transform: rotate(180deg); transform-origin: 50% 50%; padding-top: .06em; transition: transform calc(700ms * var(--lg-motion)) cubic-bezier(.7, 0, .2, 1); text-wrap: balance; }
	.lg-cover__bottom[aria-pressed="true"] .lg-cover__en { transform: none; }
	.lg-cover__hint { display: block; margin-top: var(--lg-s-5); font: 600 var(--lg-fs-2)/1.3 var(--lg-font-text); }
	.lg-cover__hint [data-when="up"], .lg-cover__bottom[aria-pressed="true"] [data-when="down"] { display: none; }
	.lg-cover__bottom[aria-pressed="true"] [data-when="up"] { display: inline; }
	.lg-cover__bottom:focus-visible { outline-offset: -6px; }
	@media (hover: hover) { .lg-cover__bottom:not([aria-pressed="true"]):hover .lg-cover__en { transform: rotate(172deg); } }
	.lg-cover__pick { padding-block: var(--lg-s-5); border-bottom: 2px solid #000; }
	.lg-cover__pick p { font-weight: 600; margin-bottom: var(--lg-s-3); }
	.lg-cover__top, .lg-cover__bottom { transition: background-color calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }

	/* ================= Contents: a book's Inhalt ================= */
	.lg-toc-btn { position: fixed; z-index: 60; right: var(--lg-s-4); bottom: var(--lg-s-4); display: grid; justify-items: end; text-align: right; gap: 2px; min-height: 52px; padding: 8px 16px 8px 14px; border: 2px solid #000; background: #fff; color: #000; box-shadow: 4px 4px 0 var(--lg-ink-s); cursor: pointer; text-align: left; }
	.lg-toc-btn__now { font: 800 var(--lg-fs-3)/1 var(--lg-font-display); letter-spacing: -0.02em; }
	.lg-toc-btn__label { font: 600 11px/1 var(--lg-font-text); }
	.lg-toc { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: var(--lg-s-5) var(--lg-gutter); border: 0; overflow: auto; }
	.lg-toc::backdrop { background: rgba(0, 0, 0, .6); }
	.lg-toc[open] { animation: lg-toc-in calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease-out); }
	@keyframes lg-toc-in { from { clip-path: inset(100% 0 0 0); } }
	.lg-toc__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--lg-s-6); }
	.lg-toc__head h2 { font-size: var(--lg-fs-7); }
	.lg-toc__list { list-style: none; padding: 0; margin: 0 auto; max-width: 1100px; }
	.lg-toc__list a { display: flex; align-items: baseline; gap: var(--lg-s-3); padding: .18em 0; text-decoration: none; font: 800 var(--lg-fs-5)/1.15 var(--lg-font-display); letter-spacing: -0.03em; }
	.lg-toc__list i { flex: 1; border-bottom: 3px dotted currentColor; transform: translateY(-.2em); }
	.lg-toc__list b { font-weight: 800; min-width: 2ch; text-align: right; }
	.lg-toc__list a:hover span, .lg-toc__list a[aria-current] span { background: var(--lg-slab); color: var(--lg-on-slab); }

	/* ================= 2 · 1,16 ================= */
	.lg-ratio-sheet { padding-block: var(--lg-sheet); overflow: hidden; }
	.lg-ratio-sheet__grid { display: grid; gap: var(--lg-s-6); align-items: end; }
	@media (min-width: 900px) { .lg-ratio-sheet__grid { grid-template-columns: 1.25fr 1fr; } }
	.lg-ratio-sheet__num { font: 900 var(--lg-fs-9)/.78 var(--lg-font-display); letter-spacing: -0.07em; margin-left: -.06em; white-space: nowrap; font-variant-numeric: tabular-nums; }
	.lg-ratio-sheet__text { display: grid; gap: var(--lg-s-4); padding-bottom: .4em; }
	.lg-ratio-sheet__text h2 { font-size: var(--lg-fs-6); max-width: 16ch; }
	.lg-bars { display: grid; gap: 0; margin-top: var(--lg-s-8); }
	.lg-bars > div { width: calc(var(--w) * 100%); height: clamp(56px, 9vw, 120px); display: flex; align-items: center; padding-inline: var(--lg-s-4); transition: width calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); min-width: 9.5em; }
	.lg-bars__de { background: #000; color: #fff; }
	.lg-bars__en { background: var(--lg-ink-s); color: var(--lg-ink-s-on); }
	.lg-bars span { font: 700 var(--lg-fs-3)/1 var(--lg-font-display); white-space: nowrap; }
	.lg-bars b { font-weight: 500; margin-left: .4em; }
	.lg-own { display: grid; gap: var(--lg-s-3); margin-top: var(--lg-s-6); max-width: 980px; }
	.lg-own__ask { font-weight: 600; }
	.lg-own input { width: 100%; padding: .2em 0; border: 0; border-bottom: 3px solid #000; background: none; font: 800 var(--lg-fs-5)/1.15 var(--lg-font-display); letter-spacing: -0.03em; border-radius: 0; }
	.lg-own input[lang="en"] { font: 500 var(--lg-fs-4)/1.3 var(--lg-font-text); border-bottom-color: var(--lg-ink-s); border-bottom-width: 6px; }
	.lg-own input::placeholder { color: #8a8a8a; }
	.lg-own input:focus { outline: none; background: rgba(0, 0, 0, .04); }
	.lg-own__out { font: 600 var(--lg-fs-4)/1.35 var(--lg-font-text); }

	/* ================= 3 · Reading: lift the bars ================= */
	.lg-reading { padding-block: var(--lg-sheet); }
	.lg-reading .lg-wrap { display: grid; gap: var(--lg-s-7); }
	@media (min-width: 1000px) { .lg-reading .lg-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .lg-reading__foot { grid-column: 2; } }
	.lg-reading__head { display: grid; gap: var(--lg-s-5); align-content: start; }
	@media (min-width: 1000px) { .lg-reading__head { position: sticky; top: 100px; } }
	.lg-reading__head h2 { font-size: var(--lg-fs-6); }
	.lg-reading__page { display: grid; gap: var(--lg-s-7); padding: clamp(24px, 4vw, 56px); background: #fff; color: #000; --lg-de: #000; --lg-text: #000; --lg-quiet: var(--lg-grey); --lg-ground: #fff; box-shadow: 12px 12px 0 var(--lg-ink-s); }
	.lg-pair--page { --lg-pair-size: var(--lg-fs-5); gap: .35em; }
	.lg-pair--page .lg-pair__de { max-width: 26ch; }
	.lg-pair--page .lg-pair__reveal { display: none !important; }
	.lg-pair--page[data-mode="tap"] .lg-pair__en { cursor: pointer; }
	.lg-pair--page[data-mode="tap"]:not([data-open]) .lg-pair__en { background: #000; color: transparent; }
	.lg-pair--page[data-mode="tap"]:not([data-open]) .lg-pair__en:hover { background: #333; }
	.lg-pair--page[data-mode="tap"][data-open] .lg-pair__en { animation: lg-lift calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	@keyframes lg-lift { from { clip-path: inset(0 100% 0 0); } }
	.lg-reading__count { font: 600 var(--lg-fs-2)/1 var(--lg-font-text); color: var(--lg-grey); }

	/* ================= 4 · Joints (Museum Ludwig) ================= */
	.lg-joints { padding-block: var(--lg-sheet); overflow: hidden; }
	.lg-joints .lg-wrap { display: grid; gap: var(--lg-s-7); }
	@media (min-width: 1000px) { .lg-joints .lg-wrap { grid-template-columns: 7fr 5fr; align-items: end; } }
	.lg-joints__stage { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; min-height: clamp(260px, 42vw, 560px); font: 900 var(--lg-fs-8)/.82 var(--lg-font-display); letter-spacing: -0.06em; color: #000; }
	.lg-joints__a { grid-area: 1 / 1; align-self: start; view-transition-name: lg-joint-a; }
	.lg-joints__b { grid-area: 2 / 3; align-self: end; justify-self: end; view-transition-name: lg-joint-b; }
	.lg-joints__rule { grid-area: 1 / 2 / 3 / 3; align-self: stretch; margin: .38em .08em .38em .1em; border-top: .09em solid #000; border-right: .09em solid #000; view-transition-name: lg-joint-rule; }
	.lg-joints__article { position: absolute; left: 0; bottom: 0; font: 800 var(--lg-fs-5)/1 var(--lg-font-display); letter-spacing: -0.02em; white-space: nowrap; background: var(--lg-slab); color: var(--lg-on-slab); padding: .15em .4em; opacity: 0; transform: translateY(8px); transition: opacity calc(var(--lg-d-3) * var(--lg-motion)), transform calc(var(--lg-d-3) * var(--lg-motion)); }
	.lg-joints__stage[data-state="joined"] { grid-template-columns: auto auto 1fr; grid-template-rows: auto; align-content: center; min-height: clamp(200px, 30vw, 420px); }
	.lg-joints__stage[data-state="joined"] .lg-joints__a { grid-area: 1 / 1; align-self: center; }
	.lg-joints__stage[data-state="joined"] .lg-joints__b { grid-area: 1 / 2; align-self: center; justify-self: start; }
	.lg-joints__stage[data-state="joined"] .lg-joints__rule { display: none; }
	.lg-joints__stage[data-state="joined"] .lg-joints__article { opacity: 1; transform: none; position: static; grid-area: 2 / 1; justify-self: start; margin-top: var(--lg-s-4); }
	.lg-joints__side { display: grid; gap: var(--lg-s-4); }
	.lg-joints__side h2 { font-size: var(--lg-fs-6); }
	.lg-joints__link { background: #fff; padding: 0 .04em; }

	/* ================= 5 · Shelf: series as spines ================= */
	.lg-shelf { padding-block: var(--lg-sheet) 0; }
	.lg-shelf__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-shelf__head { grid-template-columns: 1fr 1fr; align-items: end; } }
	.lg-shelf__row { list-style: none; margin: 0; padding: 0 0 0; display: flex; align-items: flex-end; gap: 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 14px solid #000; padding-top: 24px; }
	.lg-shelf__row::-webkit-scrollbar { display: none; }
	.lg-spine { position: relative; flex: 1 0 auto; display: grid; align-items: end; transition: transform calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease); }
	.lg-spine button { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; min-width: 78px; height: clamp(320px, 42vw, 500px); padding: 18px 0 14px; border: 0; background: var(--sp); color: var(--sp-on); cursor: pointer; }
	.lg-spine[data-live="0"] button { background: repeating-linear-gradient(-45deg, var(--sp) 0 10px, #fff 10px 12px); height: clamp(260px, 34vw, 400px); }
	.lg-spine:nth-child(3n+2) button { height: clamp(280px, 37vw, 430px); }
	.lg-spine__title { writing-mode: vertical-rl; transform: rotate(180deg); font: 900 clamp(1rem, 1.7vw, 1.55rem)/1.02 var(--lg-font-display); letter-spacing: -0.02em; text-transform: uppercase; text-align: left; max-height: 85%; }
	.lg-spine[data-live="0"] .lg-spine__title { background: var(--sp); padding: .3em .1em; }
	.lg-spine__meta { font: 600 11px/1.1 var(--lg-font-text); text-align: center; padding: 0 4px; }
	.lg-spine[data-live="0"] .lg-spine__meta { background: var(--sp); padding: 3px; }
	.lg-spine:hover { transform: translateY(-14px); }
	.lg-spine:has([aria-pressed="true"]) { transform: translateY(-24px); }
	.lg-spine:has([aria-pressed="true"]) button { box-shadow: inset 0 0 0 4px #000; }
	.lg-spine__books { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: #000; color: #fff; padding: 8px 10px; font: 700 var(--lg-fs-1)/1 var(--lg-font-display); text-decoration: none; opacity: 0; pointer-events: none; transition: opacity calc(var(--lg-d-2) * var(--lg-motion)); }
	.lg-spine:has([aria-pressed="true"]) .lg-spine__books, .lg-spine:focus-within .lg-spine__books { opacity: 1; pointer-events: auto; }

	/* ================= 6 · Studio: the print shop ================= */
	.lg-press-shop { padding-block: var(--lg-sheet); }
	.lg-press-shop__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-press-shop__head { grid-template-columns: 1.2fr 1fr; align-items: end; } }
	.lg-licence { margin-top: var(--lg-s-6); max-width: 70ch; font-size: var(--lg-fs-2); color: var(--lg-quiet); }

	/* ================= 7 · Der, die, das ================= */
	.lg-game-sheet { padding-block: var(--lg-sheet); border-top: 2px solid #000; }
	.lg-game-sheet__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-game-sheet__head { grid-template-columns: 1fr 1fr; align-items: end; } }
	.lg-game-sheet__head h2 { font-size: var(--lg-fs-7); max-width: 9ch; }

	/* ================= 8 · Logo ================= */
	.lg-logo-sheet { padding-block: var(--lg-sheet); border-top: 2px solid #000; overflow: hidden; }
	.lg-construct { position: relative; margin: var(--lg-s-7) 0 var(--lg-s-8); display: grid; gap: var(--lg-s-6); }
	.lg-construct__logo { position: relative; padding: 2.4em 0 2.6em; }
	.lg-construct__logo .lg-logo { background-image: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px calc(100% / 1.16 / 10)); }
	.lg-construct__dim { position: absolute; left: 0; height: 2px; background: #000; display: flex; justify-content: center; }
	.lg-construct__dim::before, .lg-construct__dim::after { content: ""; position: absolute; top: -8px; width: 2px; height: 18px; background: #000; }
	.lg-construct__dim::before { left: 0; } .lg-construct__dim::after { right: 0; }
	.lg-construct__dim span { position: absolute; top: -1.6em; background: #fff; padding: 0 .4em; font: 800 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-construct__dim--de { top: 1.2em; width: calc(clamp(2.2rem, 10.4vw, 9.6rem) * 8.1); max-width: 100%; }
	.lg-construct__dim--en { top: auto; bottom: 1.2em; width: calc(clamp(2.2rem, 10.4vw, 9.6rem) * 8.1 / 1.16); max-width: 86.2%; }
	.lg-construct__dim--en span { top: .6em; }
	.lg-construct figcaption { max-width: 60ch; }
	.lg-logo-grounds { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
	@media (min-width: 700px) { .lg-logo-grounds { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1100px) { .lg-logo-grounds { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
	.lg-logo-grounds li { display: grid; align-content: space-between; gap: var(--lg-s-7); min-height: clamp(220px, 24vw, 320px); padding: var(--lg-s-5); }
	.lg-logo-grounds li > span:last-child { font-size: var(--lg-fs-2); font-weight: 600; max-width: 26ch; }
	.lg-donts { list-style: none; padding: 0; margin: var(--lg-s-8) 0 0; display: grid; gap: var(--lg-s-5); }
	@media (min-width: 900px) { .lg-donts { grid-template-columns: repeat(4, 1fr); } }
	.lg-donts li { display: grid; gap: var(--lg-s-3); font-size: var(--lg-fs-2); font-weight: 600; }
	.lg-dont { position: relative; display: grid; align-content: center; height: 110px; padding: 0 22px; background: #f2f2f2; overflow: hidden; }
	.lg-dont i { display: block; height: 22px; background: #000; }
	.lg-dont i + i { background: var(--lg-ink-s); }
	.lg-dont--grad i + i { background: linear-gradient(90deg, var(--lg-magenta), var(--lg-lime)); }
	.lg-dont--tilt i { transform: rotate(-9deg); }
	.lg-dont::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 2px), #000 calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)); }

	/* ================= 9 · Inks: paint-chip strips ================= */
	.lg-inks { padding-block: var(--lg-sheet); border-top: 2px solid #000; }
	.lg-inks__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-inks__head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
	.lg-inks__head h2 { font-size: var(--lg-fs-6); max-width: 18ch; }
	.lg-inks__strips { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
	.lg-inks__strips button { display: grid; grid-template-columns: 1fr auto; align-content: end; gap: 4px var(--lg-s-4); width: 100%; min-height: 96px; padding: var(--lg-s-4); border: 0; background: none; color: var(--lg-text); text-align: left; cursor: copy; }
	.lg-inks__name { font: 900 var(--lg-fs-6)/.9 var(--lg-font-display); letter-spacing: -0.05em; color: var(--lg-de); grid-column: 1 / -1; }
	.lg-inks__hex { font: 700 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-inks__use, .lg-inks__cr { font: 500 var(--lg-fs-1)/1.3 var(--lg-font-text); }
	@media (min-width: 900px) {
		.lg-inks__strips { display: flex; height: clamp(420px, 44vw, 600px); }
		.lg-inks__strips li { flex: 1; transition: flex calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); min-width: 0; overflow: hidden; }
		.lg-inks__strips li:hover, .lg-inks__strips li:focus-within { flex: 2.6; }
		.lg-inks__strips button { height: 100%; grid-template-columns: 1fr; }
		.lg-inks__name { writing-mode: vertical-rl; transform: rotate(180deg); align-self: start; font-size: var(--lg-fs-7); margin-bottom: auto; }
		.lg-inks__strips button { align-content: stretch; grid-template-rows: 1fr auto auto auto; }
	}

	/* ================= 10 · Type ================= */
	.lg-type-sheet { padding-block: var(--lg-s-7) var(--lg-sheet); overflow: hidden; }
	.lg-type-sheet__giant { font: 900 clamp(4rem, 17.5vw, 22rem)/.8 var(--lg-font-display); letter-spacing: -0.07em; white-space: nowrap; margin-left: -.04em; color: #000; cursor: pointer; transition: letter-spacing calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-type-sheet__giant:hover { letter-spacing: -0.06em; }
	.lg-type-sheet__giant .lg-type-sheet__joint { display: inline-block; width: .12em; height: .62em; margin: 0 .06em; background: #fff; vertical-align: baseline; }
	.lg-type-sheet__grid { display: grid; gap: var(--lg-s-6); margin-top: var(--lg-s-8); }
	@media (min-width: 900px) { .lg-type-sheet__grid { grid-template-columns: 1fr 1.2fr; } }
	.lg-type-sheet__spec { display: grid; gap: var(--lg-s-4); max-width: 60ch; font-size: var(--lg-fs-4); line-height: 1.45; }

	/* ================= 11 · Voice ================= */
	.lg-voice-sheet { display: grid; }
	@media (min-width: 1000px) { .lg-voice-sheet { grid-template-columns: 1.5fr 1fr; } }
	.lg-voice-sheet > div { padding-block: var(--lg-sheet); }
	.lg-voice-sheet h2 { font-size: var(--lg-fs-6); margin-bottom: var(--lg-s-7); }
	.lg-voice-sheet ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--lg-s-5); }
	.lg-voice-sheet__say li { font: 800 var(--lg-fs-5)/1.08 var(--lg-font-display); letter-spacing: -0.03em; max-width: 24ch; }
	.lg-voice-sheet__label { font-weight: 600; margin-bottom: var(--lg-s-6); color: var(--lg-quiet); }
	.lg-voice-sheet__not li { font: 900 var(--lg-fs-6)/1 var(--lg-font-display); letter-spacing: -0.04em; }
	.lg-voice-sheet__not s { text-decoration-thickness: .14em; text-decoration-color: var(--lg-ink-s); }

	/* ================= 12 · Companies ================= */
	.lg-company { padding-block: var(--lg-sheet); }
	.lg-company h2 { color: #000; font-size: var(--lg-fs-7); max-width: 13ch; margin-bottom: var(--lg-s-8); }
	.lg-company__grid { display: grid; gap: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-company__grid { grid-template-columns: repeat(3, 1fr); } }
	.lg-company h3 { font-size: var(--lg-fs-5); color: #000; margin-bottom: var(--lg-s-4); padding-top: var(--lg-s-3); border-top: 6px solid #000; }
	.lg-company ul { margin: 0 0 var(--lg-s-5); padding-left: 1.1em; display: grid; gap: var(--lg-s-2); }

	/* ================= 13 · Downloads as objects ================= */
	.lg-objects { padding-block: var(--lg-sheet); }
	.lg-objects__title { font-size: var(--lg-fs-6); margin: var(--lg-s-9) 0 var(--lg-s-6); }
	.lg-objects__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
	@media (min-width: 800px) { .lg-objects__grid { grid-template-columns: repeat(6, 1fr); } .lg-object--logo { grid-column: span 4; } .lg-object--mark { grid-column: span 2; } .lg-object--inks { grid-column: span 3; } .lg-object--type { grid-column: span 3; } }
	.lg-object { display: grid; grid-template-rows: 1fr auto auto auto; gap: var(--lg-s-3); min-height: 340px; padding: var(--lg-s-5); }
	.lg-object--inks { box-shadow: inset 0 0 0 2px #000; }
	.lg-object__show { display: grid; place-items: center start; min-height: 160px; }
	.lg-object h4 { font-size: var(--lg-fs-5); }
	.lg-object p { max-width: 36ch; }
	.lg-object__stripes { display: flex; place-items: stretch; height: 160px; }
	.lg-object__stripes i { flex: 1; transition: flex calc(var(--lg-d-3) * var(--lg-motion)) var(--lg-ease); }
	.lg-object__stripes:hover i:hover { flex: 3; }
	.lg-object--type .lg-object__show span { font: 900 clamp(6rem, 16vw, 12rem)/.8 var(--lg-font-display); letter-spacing: -0.06em; }
	.lg-object--mark .lg-mark { width: min(160px, 60%); height: auto; }

	/* ================= 14 · Colophon ================= */
	.lg-colophon { padding-block: var(--lg-sheet); border-top: 2px solid #000; }
	.lg-colophon__grid { display: grid; gap: var(--lg-s-8); }
	@media (min-width: 1000px) { .lg-colophon__grid { grid-template-columns: 1.1fr 1fr; } }
	.lg-colophon h2 { font-size: var(--lg-fs-6); max-width: 16ch; margin-bottom: var(--lg-s-6); }
	.lg-colophon__about { position: relative; padding-right: 100px; }
	.lg-colophon__about p { font: 700 var(--lg-fs-5)/1.25 var(--lg-font-display); letter-spacing: -0.02em; }
	.lg-stamp { position: absolute; right: 0; top: 0; display: grid; place-items: center; align-content: center; width: 88px; height: 88px; border: 3px solid #000; border-radius: 50%; background: var(--lg-ink-s); color: var(--lg-ink-s-on); font: 800 var(--lg-fs-3)/1 var(--lg-font-display); transform: rotate(-12deg); cursor: pointer; }
	.lg-stamp small { font: 600 10px/1.2 var(--lg-font-text); }
	.lg-stamp:hover { transform: rotate(0) scale(1.05); }
	.lg-colophon__facts { margin: 0; display: grid; border-top: 2px solid #000; }
	.lg-colophon__facts div { display: grid; grid-template-columns: 8.5em 1fr; gap: var(--lg-s-4); padding: var(--lg-s-3) 0; border-bottom: 1px solid #000; }
	.lg-colophon__facts dt { font-weight: 700; }
	.lg-colophon__facts dd { margin: 0; }
}

/* ================= Der, die, das: the game ================= */
@layer lg.portal {
	.lg-game { display: grid; gap: 4px; }
	@media (min-width: 1000px) { .lg-game:has(.lg-game__choices) { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; } .lg-game__choices { grid-row: span 2; } }
	.lg-game__card { display: grid; align-content: space-between; gap: var(--lg-s-5); min-height: clamp(240px, 30vw, 380px); padding: var(--lg-s-5); background: #000; color: #fff; }
	.lg-game__dots { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; }
	.lg-game__dots li { width: 34px; height: 10px; border: 2px solid #fff; }
	.lg-game__dots li.now { background: #fff; }
	.lg-game__dots li.r { background: var(--lg-ink-s); border-color: var(--lg-ink-s); }
	.lg-game__dots li.w { background: repeating-linear-gradient(-45deg, #fff 0 2px, transparent 2px 6px); }
	.lg-game__again { font-weight: 700; color: var(--lg-ink-s); }
	.lg-game__word { font: 900 var(--lg-fs-7)/.9 var(--lg-font-display); letter-spacing: -0.05em; overflow-wrap: anywhere; hyphens: manual; }
	.lg-game__en { font: 500 var(--lg-fs-4)/1.3 var(--lg-font-text); color: var(--lg-grey-on-black); }
	.lg-game__choices { display: grid; gap: 4px; }
	.lg-game__choices button { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: clamp(76px, 9vw, 124px); padding: 0 var(--lg-s-5); border: 0; color: #000; font: 900 var(--lg-fs-7)/1 var(--lg-font-display); letter-spacing: -0.05em; cursor: pointer; text-align: left; overflow: hidden; }
	.lg-game__choices [data-a="der"] { background: var(--lg-cobalt); color: #fff; }
	.lg-game__choices [data-a="die"] { background: var(--lg-magenta); }
	.lg-game__choices [data-a="das"] { background: var(--lg-lime); }
	.lg-game__choices button span { position: relative; z-index: 1; transition: transform calc(var(--lg-d-2) * var(--lg-motion)) var(--lg-ease); }
	.lg-game__choices button:not(:disabled):hover span { transform: translateX(.15em); }
	.lg-game__choices button::after { content: ""; position: absolute; inset: 0; background: #000; transform: scaleX(0); transform-origin: left; transition: transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-game__choices button[data-state="right"] { box-shadow: inset 0 0 0 8px #000; }
	.lg-game__choices button[data-state="right"]::before { content: "✓"; position: absolute; right: var(--lg-s-5); font-size: .7em; }
	.lg-game__choices button[data-state="wrong"] span { text-decoration: line-through; text-decoration-thickness: .1em; }
	.lg-game__choices button:disabled:not([data-state]) { opacity: .25; }
	.lg-game__choices button:disabled { cursor: default; }
	.lg-game__after { display: grid; gap: var(--lg-s-4); align-content: start; padding: var(--lg-s-4) 0; }
	.lg-game__after:empty, .lg-game__after:has(.lg-game__rule:empty):not(:has(button)) { display: none; }
	.lg-game__rule { font-size: var(--lg-fs-4); line-height: 1.4; max-width: 46ch; }
	.lg-game__start { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--lg-s-5) var(--lg-s-8); }
	.lg-game__stack { display: grid; font: 900 var(--lg-fs-8)/.82 var(--lg-font-display); letter-spacing: -0.06em; }
	.lg-game__stack span:nth-child(1) { color: var(--lg-cobalt); }
	.lg-game__stack span:nth-child(2) { color: var(--lg-magenta); }
	.lg-game__stack span:nth-child(3) { color: #000; text-decoration: underline; text-decoration-color: var(--lg-lime); text-decoration-thickness: .16em; text-underline-offset: .04em; }
	.lg-game__result { display: grid; gap: var(--lg-s-5); }
	@media (min-width: 900px) { .lg-game__result { grid-template-columns: auto 1fr; align-items: end; } .lg-game__result .lg-row, .lg-game__verdict { grid-column: 1 / -1; } }
	.lg-game__score { font: 900 var(--lg-fs-9)/.8 var(--lg-font-display); letter-spacing: -0.07em; }
	.lg-game__score span { font-size: .35em; letter-spacing: -0.03em; }
	.lg-game__score small { display: block; margin-top: .3em; font: 600 var(--lg-fs-3)/1.2 var(--lg-font-text); letter-spacing: 0; }
	.lg-game__go { display: grid; gap: var(--lg-s-3); justify-items: start; max-width: 32ch; }
	.lg-game__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font: 800 var(--lg-fs-5)/1.1 var(--lg-font-display); }
	.lg-game__list li { display: inline-flex; gap: .3em; }
	.lg-game__list li.r b { background: var(--lg-ink-s); color: var(--lg-ink-s-on); padding: 0 .15em; }
	.lg-game__list li.w { color: var(--lg-grey); text-decoration: line-through; }
	.lg-game__verdict { font-size: var(--lg-fs-4); max-width: 60ch; }

	/* Hard mode (press E): every English line disappears */
	.lg-hard :is(.lg-pair__en, .lg-cover__en, .lg-game__en, .lg-cover__hint) { visibility: hidden; }
}

/* ================= Studio: proof sheet + numbered steps ================= */
@layer lg.portal {
	.lg-studio { display: grid; gap: var(--lg-s-6); }
	@media (min-width: 1000px) { .lg-studio { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } .lg-studio__proof { position: sticky; top: 90px; } }
	.lg-studio__mat { position: relative; display: grid; place-items: center; padding: clamp(28px, 5vw, 64px); background: #1b1b1b; background-image: linear-gradient(#262626 1px, transparent 1px), linear-gradient(90deg, #262626 1px, transparent 1px); background-size: 32px 32px; }
	.lg-studio__sheet { position: relative; line-height: 0; }
	.lg-studio__sheet canvas { width: auto; height: auto; max-width: 100%; max-height: min(64vh, 640px); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
	.lg-crop { position: absolute; width: 18px; height: 18px; border-color: #8a8a8a; border-style: solid; border-width: 0; }
	.lg-crop--tl { left: -26px; top: -26px; border-right-width: 1px; border-bottom-width: 1px; }
	.lg-crop--tr { right: -26px; top: -26px; border-left-width: 1px; border-bottom-width: 1px; }
	.lg-crop--bl { left: -26px; bottom: -26px; border-right-width: 1px; border-top-width: 1px; }
	.lg-crop--br { right: -26px; bottom: -26px; border-left-width: 1px; border-top-width: 1px; }
	.lg-studio__actions { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); margin-top: var(--lg-s-4); }
	.lg-studio__note { margin-top: var(--lg-s-3); font-size: var(--lg-fs-1); color: var(--lg-quiet); }
	.lg-studio__steps { display: grid; gap: 0; border-top: 2px solid #fff; }
	.lg-step { display: grid; gap: var(--lg-s-3); padding: var(--lg-s-5) 0; border-bottom: 2px solid #fff; }
	.lg-step[hidden] { display: none; }
	.lg-step__t { display: flex; align-items: center; gap: var(--lg-s-3); font: 800 var(--lg-fs-4)/1 var(--lg-font-display); letter-spacing: -0.02em; color: #fff; }
	.lg-step__t span { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; background: var(--lg-ink-s); color: var(--lg-ink-s-on); font-size: .8em; }
	.lg-sheets { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lg-s-2); }
	@media (min-width: 600px) { .lg-sheets { grid-template-columns: repeat(4, 1fr); } }
	.lg-sheet { display: grid; gap: 4px; align-content: start; padding: 6px; border: 2px solid #444; background: none; color: #fff; text-align: left; cursor: pointer; }
	.lg-sheet canvas { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #111; }
	.lg-sheet b { font: 800 var(--lg-fs-2)/1.1 var(--lg-font-display); }
	.lg-sheet small { font-size: 11px; line-height: 1.25; color: #b3b3b3; }
	.lg-sheet[aria-pressed="true"] { border-color: var(--lg-ink-s); box-shadow: 0 0 0 2px var(--lg-ink-s); }
	.lg-sheet:disabled { opacity: .35; cursor: not-allowed; }
	.lg-formats, .lg-grounds { display: flex; flex-wrap: wrap; gap: var(--lg-s-2); }
	.lg-format, .lg-ground-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px 0 10px; border: 2px solid #444; background: none; color: #fff; font: 600 var(--lg-fs-2)/1 var(--lg-font-text); cursor: pointer; }
	.lg-format i { display: block; max-width: 34px; max-height: 34px; border: 2px solid currentColor; }
	.lg-format[aria-pressed="true"], .lg-ground-chip[aria-pressed="true"] { border-color: #fff; background: #fff; color: #000; }
	.lg-ground-chip i { width: 30px; height: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
	.lg-ground-chip[data-g="split"] i { background: linear-gradient(var(--lg-ink-s) 0 55%, var(--lg-ink-p) 55%); }
	.lg-ground-chip[data-g="ink"] i { background: var(--lg-ink-s); }
	.lg-ground-chip[data-g="white"] i { background: #fff; box-shadow: inset 0 0 0 2px #000; }
	.lg-ground-chip[data-g="black"] i { background: #000; box-shadow: inset 0 0 0 2px #fff; }
	.lg-field { display: grid; gap: 6px; }
	.lg-field + .lg-field { margin-top: var(--lg-s-3); }
	.lg-field > label { font: 600 var(--lg-fs-2)/1.2 var(--lg-font-text); color: #fff; }
	.lg-studio select, .lg-studio input[type="text"] { width: 100%; min-height: 48px; padding: 0 12px; border: 2px solid #fff; border-radius: 0; background: #000; color: #fff; font: 500 var(--lg-fs-3)/1.2 var(--lg-font-text); }
	.lg-studio select:focus-visible, .lg-studio input:focus-visible { outline: 3px solid var(--lg-ink-s); outline-offset: 2px; }
	.lg-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--lg-target); font: 600 var(--lg-fs-2)/1 var(--lg-font-text); color: #fff; cursor: pointer; }
	.lg-toggle input { width: 20px; height: 20px; accent-color: var(--lg-ink-s); }
	.lg-file { display: grid; gap: 4px; padding: 14px 16px; border: 2px dashed #fff; cursor: pointer; }
	.lg-file span { font: 800 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-file small { color: #b3b3b3; font-weight: 500; }
	.lg-field:has(input[type="file"]:focus-visible) .lg-file { outline: 3px solid var(--lg-ink-s); outline-offset: 2px; }
	@media (max-width: 999px) { .lg-studio__proof { position: sticky; top: 64px; z-index: 5; background: #000; padding-bottom: 8px; } .lg-studio__mat { padding: 12px; } .lg-studio__sheet canvas { max-height: 30vh; } .lg-crop { display: none; } .lg-studio__actions { margin-top: 8px; } .lg-studio__actions .lg-btn { min-height: 44px; padding: 0 .8em; } .lg-studio__note { display: none; } }
}
@layer lg.portal {
	:is(.lg-v2, .lg-v3) :where(h1, h2, h3, .lg-game__word, .lg-pair__de) { overflow-wrap: break-word; hyphens: auto; }
}

/* =====================================================================================
   v3 sheets: "Auf Stoß. Die Seite antwortet." Mobile first; hover only on real pointers.
   ===================================================================================== */
@layer lg.portal {
	.lg-small { font-size: var(--lg-fs-2); }
	.lg-folio-num { font: 800 var(--lg-fs-1)/1 var(--lg-font-display); letter-spacing: .08em; margin-bottom: var(--lg-s-4); display: inline-flex; align-items: center; gap: .6em; color: var(--lg-text); }
	.lg-folio-num::after { content: ""; width: 2.4em; height: .5em; background: var(--lg-slab); }

	/* ---------- Cover: the English field meets the German one edge to edge ---------- */
	.lg-cover__pickgrid { display: grid; gap: var(--lg-s-5); }
	.lg-cover__q { font-weight: 600; margin-bottom: var(--lg-s-3); }
	.lg-cover__q .lg-quiet { font-weight: 500; }
	.lg-cover__anrede { display: grid; gap: var(--lg-s-2); justify-items: start; }
	@media (min-width: 960px) { .lg-cover__pickgrid { grid-template-columns: 1fr auto; align-items: start; } .lg-cover__anrede { max-width: 26ch; } }

	/* ---------- Contents v3: folio number, German name, dotted leader, English ---------- */
	.lg-toc__list a { display: grid; grid-template-columns: 2.2ch auto 1fr auto; align-items: baseline; gap: var(--lg-s-3); }
	.lg-toc__list b { text-align: left; font-size: .5em; letter-spacing: .04em; }
	.lg-toc__list small { font: 500 var(--lg-fs-2)/1 var(--lg-font-text); letter-spacing: 0; }
	.lg-toc__foot { max-width: 1100px; margin: var(--lg-s-6) auto 0; font-size: var(--lg-fs-2); color: var(--lg-quiet); }
	@media (max-width: 599px) { .lg-toc__list small { display: none; } .lg-toc__list a { grid-template-columns: 2.2ch auto 1fr; } }

	/* ---------- Reading: Folie (transparency) ---------- */
	.lg-reading__page { position: relative; }
	.lg-folie { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
	.lg-folie__sheet { position: absolute; left: 0; right: 0; bottom: 0; top: var(--fy, 92%); border-top: 4px solid var(--lg-ink-s); background: transparent; transition: top calc(500ms * var(--lg-motion)) var(--lg-ease-snap); }
	.lg-folie.is-dragging .lg-folie__sheet { position: absolute; left: 0; right: 0; bottom: 0; top: var(--fy, 92%); border-top: 4px solid var(--lg-ink-s); background: transparent; transition: top calc(500ms * var(--lg-motion)) var(--lg-ease-snap); }
	.lg-folie__handle { position: absolute; left: 50%; top: var(--fy, 92%); translate: -50% -50%; pointer-events: auto; display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 1.2em; border: 2px solid #000; background: #fff; color: #000; font: 800 var(--lg-fs-2)/1 var(--lg-font-display); cursor: grab; touch-action: none; box-shadow: 4px 4px 0 #000; transition: top calc(500ms * var(--lg-motion)) var(--lg-ease-snap); }
	.lg-folie.is-dragging .lg-folie__handle { transition: none; cursor: grabbing; }
	.lg-folie__handle i { width: 18px; height: 10px; border-top: 2px solid; border-bottom: 2px solid; }
	.lg-pair--page[data-mode="folie"] .lg-pair__en { visibility: hidden; }
	.lg-pair--page[data-mode="folie"][data-under] .lg-pair__en { visibility: visible; background: transparent; color: #000; font-weight: 600; padding-inline: 0; }

	/* ---------- Werkbank ---------- */
	.lg-werkbank { padding-block: var(--lg-sheet); }
	.lg-werkbank__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	.lg-werkbank__head h2 { max-width: 18ch; }
	.lg-werkbank__grid { display: grid; gap: var(--lg-s-6); }
	@media (min-width: 1100px) { .lg-werkbank__grid { grid-template-columns: 1fr 380px; align-items: start; } .lg-werkbank__card { position: sticky; top: 96px; } }
	.lg-tools { list-style: none; padding: 0; margin: 0; display: grid; gap: 3px; grid-template-columns: 1fr; background: #000; border: 3px solid #000; }
	@media (min-width: 640px) { .lg-tools { grid-template-columns: 1fr 1fr; } }
	@media (min-width: 1300px) { .lg-tools { grid-template-columns: repeat(3, 1fr); } }
	.lg-tool-card button { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--lg-s-2); width: 100%; height: 100%; min-height: 210px; padding: var(--lg-s-5); border: 0; background: #fff; color: #000; text-align: left; cursor: pointer; transition: background-color calc(var(--lg-d-2) * var(--lg-motion)); }
	@media (hover: hover) { .lg-tool-card button:hover { background: #000; color: #fff; } .lg-tool-card button:hover .lg-tool-card__go span { background: var(--lg-ink-s); color: var(--lg-ink-s-on); } }
	.lg-tool-card button:active { background: #000; color: #fff; }
	.lg-tool-card__n { font: 800 var(--lg-fs-1)/1 var(--lg-font-display); letter-spacing: .08em; }
	.lg-tool-card__t { font: 900 var(--lg-fs-5)/.98 var(--lg-font-display); letter-spacing: -0.04em; }
	.lg-tool-card__d { font: 500 var(--lg-fs-2)/1.4 var(--lg-font-text); }
	.lg-tool-card__p { font: 500 var(--lg-fs-1)/1.4 var(--lg-font-text); opacity: .75; }
	.lg-tool-card__go { display: flex; justify-content: space-between; align-items: center; margin-top: var(--lg-s-3); }
	.lg-tool-card__go span { font: 800 var(--lg-fs-1)/1 var(--lg-font-display); padding: .35em .5em; border: 2px solid currentColor; }
	.lg-tool-card__go i { font: 800 var(--lg-fs-1)/1 var(--lg-font-display); font-style: normal; }
	.lg-tool-card[data-done] .lg-tool-card__go i::before { content: attr(data-stamp); display: inline-block; padding: .3em .5em; border: 2px solid var(--lg-ink-s); color: var(--lg-ink-s); transform: rotate(-6deg); }
	[data-ground="series"] .lg-tool-card[data-done] .lg-tool-card__go i::before { color: #000; border-color: #000; }

	/* ---------- Logo lab ---------- */
	.lg-logo-lab { display: grid; gap: var(--lg-s-6); margin-block: var(--lg-s-8); padding-block: var(--lg-s-6); border-block: 2px solid #000; }
	@media (min-width: 900px) { .lg-logo-lab { grid-template-columns: 1fr 1fr; } }
	.lg-logo-lab > div { display: grid; gap: var(--lg-s-3); align-content: start; }
	.lg-logo-lab h3 { font-size: var(--lg-fs-5); }
	.lg-logo-lab label { font-weight: 600; font-size: var(--lg-fs-2); }
	.lg-logo-lab__demo { padding: var(--lg-s-6) 0; }
	.lg-logo-lab__scaled { min-height: 120px; display: flex; align-items: center; }
	.lg-logo-lab__scaled .lg-logo { --lg-logo-size: calc(.6rem + var(--t, 1) * 2.2rem); }
	.lg-logo-lab__step { display: none; }
	.lg-logo-lab__scaled[data-step="step"] .lg-logo-lab__full { display: none; }
	.lg-logo-lab__scaled[data-step="step"] .lg-logo-lab__step { display: block; }
	.lg-logo-lab input[type="range"] { accent-color: #000; width: 100%; min-height: 44px; }


	/* ---------- Type tester + rules ---------- */
	.lg-tester { display: grid; gap: var(--lg-s-3); align-content: start; min-width: 0; }
	.lg-tester label { font-weight: 600; font-size: var(--lg-fs-2); }
	.lg-tester input[type="text"] { background: #fff; }
	.lg-range--inline { min-width: 200px; flex: 1; }
	.lg-tester__out { font: var(--w, 900) clamp(2.2rem, 8vw, 6rem)/.95 var(--lg-font-display); letter-spacing: -0.05em; overflow-wrap: anywhere; hyphens: manual; min-height: 1em; }
	.lg-tester[data-fam="text"] .lg-tester__out { font-family: var(--lg-font-text); letter-spacing: -0.02em; }
	.lg-type-rules { list-style: none; padding: 0; margin: var(--lg-s-8) 0 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	.lg-type-rules li { display: grid; gap: var(--lg-s-2); padding: var(--lg-s-4) 0; border-top: 3px solid #000; }
	.lg-type-rules b { font: 900 var(--lg-fs-6)/1 var(--lg-font-display); letter-spacing: -0.04em; }

	/* ---------- Components lab ---------- */
	.lg-parts { padding-block: var(--lg-sheet); }
	.lg-parts__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-6); }
	.lg-lab { display: grid; gap: var(--lg-s-4); border: 3px solid #000; padding: var(--lg-s-5); }
	@media (min-width: 1000px) { .lg-lab { grid-template-columns: 1fr 1.3fr; grid-template-areas: "c s" "p s"; } .lg-lab__controls { grid-area: c; } .lg-lab__stage { grid-area: s; } .lg-lab__spec { grid-area: p; } }
	.lg-lab__controls { display: grid; gap: var(--lg-s-4); align-content: start; }
	.lg-seg--wrap { flex-wrap: wrap; }
	.lg-lab__stage { display: grid; place-items: center; min-height: 260px; padding: var(--lg-s-6); background-color: #fff; background-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); background-size: 24px 24px; background-position: -1px -1px; }
	.lg-lab__stage > * { position: relative; }
	.lg-lab__stage::before { content: ""; position: absolute; }
	.lg-lab__stage { position: relative; }
	.lg-lab__stage::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.92); pointer-events: none; }
	.lg-lab__stage > * { z-index: 1; }
	.lg-lab__spec { display: grid; gap: var(--lg-s-3); align-content: start; }
	.lg-lab__note { font-size: var(--lg-fs-2); max-width: 52ch; }
	.lg-lab__code { display: block; padding: var(--lg-s-3); background: #000; color: #fff; font: 500 var(--lg-fs-1)/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
	/* Forced states for the lab */
	.lg-lab__stage .is-hover.lg-btn { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lg-slab); }
	.lg-lab__stage .is-hover.lg-chip { background: var(--lg-text); color: var(--lg-ground); }
	.lg-lab__stage .is-focus { outline: 3px solid #000; outline-offset: 3px; box-shadow: 0 0 0 6px #fff; }
	.lg-lab__stage .is-pressed.lg-btn { transform: translate(1px, 1px); box-shadow: none; }
	.lg-lab__stage .is-pressed.lg-chip { transform: scale(.97); background: var(--lg-text); color: var(--lg-ground); }
	.lg-lab__stage input.is-focus { box-shadow: 4px 4px 0 var(--lg-slab); outline-offset: 0; }
	.lg-lab__stage .lg-toast { position: static; animation: none; }
	.lg-parts__worse { margin-top: var(--lg-s-5); text-align: right; font-size: var(--lg-fs-1); }
	/* Verschlimmbesserung: the page gets "improved" (worse) for a few seconds */
	.lg-worse { animation: lg-worse 0s; }
	.lg-worse :is(h1, h2) { font-family: Georgia, serif !important; color: #8a2be2 !important; text-shadow: 2px 2px 4px #ff0, -1px -1px 6px #0ff !important; letter-spacing: .1em !important; }
	.lg-worse .lg-btn { border-radius: 30px !important; background: linear-gradient(90deg, #ff00cc, #3333ff) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(0,0,0,.4) !important; }
	.lg-worse section { filter: saturate(.4) blur(.3px); }

	/* ---------- Motion ---------- */
	.lg-motion-sheet { padding-block: var(--lg-sheet); }
	.lg-motion-sheet h2 { margin-bottom: var(--lg-s-4); }
	.lg-durations { list-style: none; padding: 0; margin: var(--lg-s-7) 0 var(--lg-s-4); display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
	.lg-durations button { display: grid; gap: var(--lg-s-2); width: 100%; min-height: 220px; padding: var(--lg-s-5); border: 2px solid #fff; background: #000; color: #fff; text-align: left; cursor: pointer; align-content: start; }
	.lg-durations b { font: 900 var(--lg-fs-6)/1 var(--lg-font-display); letter-spacing: -0.05em; }
	.lg-durations span { font: 800 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-durations small { font-size: var(--lg-fs-2); color: var(--lg-grey-on-black); }
	.lg-durations i { display: grid; gap: 4px; margin-top: auto; padding-top: var(--lg-s-4); }
	.lg-durations em { display: block; height: 16px; background: #fff; transform-origin: left; }
	.lg-durations em + em { width: 86%; background: var(--lg-ink-s); }
	.lg-durations button.is-play em { animation: lg-bar-in var(--ms) var(--lg-ease) both; }
	.lg-durations button.is-play em + em { animation-delay: var(--lg-pass); }

	/* ---------- Voice checker ---------- */
	.lg-voicecheck { display: grid; gap: var(--lg-s-3); margin-top: var(--lg-s-7); max-width: 760px; }
	.lg-voicecheck label { font-weight: 600; }
	.lg-voicecheck textarea { background: #000; color: #fff; border-color: #fff; min-height: 110px; }
	.lg-voicecheck__out { font-size: var(--lg-fs-2); display: grid; gap: var(--lg-s-2); }
	.lg-voicecheck__out mark { background: var(--lg-ink-s); color: var(--lg-ink-s-on); padding: 0 .2em; }
	.lg-voicecheck__out ul { padding-left: 1.1em; display: grid; gap: 4px; }

	/* ---------- Scenes ---------- */
	.lg-scenes { padding-block: var(--lg-sheet); }
	.lg-scenes__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-6); }
	.lg-scenes__tabs { margin-bottom: var(--lg-s-5); }
	.lg-scenes__tabs [aria-selected="true"] { background: var(--lg-text); color: var(--lg-ground); }
	.lg-scenes__stage { display: grid; gap: var(--lg-s-6); align-items: center; min-height: 420px; }
	@media (min-width: 900px) { .lg-scenes__stage { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
	.lg-scene { display: grid; place-items: center; padding: var(--lg-s-6) var(--lg-s-4); background: #F2F2F2; min-height: 420px; }
	.lg-scene canvas { width: 100%; height: auto; display: block; }
	.lg-scene__phone { width: min(300px, 80vw); padding: 12px; background: #000; border-radius: 34px; }
	.lg-scene__screen { border-radius: 24px; overflow: hidden; background: #fff; }
	.lg-scene__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font: 600 12px/1 var(--lg-font-text); color: #000; }
	.lg-scene__bar i { width: 26px; height: 26px; border-radius: 50%; background: #000; }
	.lg-scene__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
	.lg-scene__grid > * { aspect-ratio: 3 / 4; background: #ddd; overflow: hidden; }
	.lg-scene__grid canvas { width: 100%; height: 100%; object-fit: cover; }
	.lg-scene__grid span:nth-child(odd) { background: #cfcfcf; }
	.lg-scene__story { position: relative; aspect-ratio: 9 / 16; }
	.lg-scene__story canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
	.lg-scene__safe { position: absolute; left: 6%; right: 6%; top: 14%; bottom: 35%; border: 2px dashed rgba(255,255,255,.9); outline: 2px dashed rgba(0,0,0,.5); pointer-events: none; }
	.lg-scene__li { width: min(520px, 100%); background: #fff; border: 1px solid #ddd; font: 400 14px/1.4 var(--lg-font-text); color: #000; }
	.lg-scene__li p { padding: 12px 14px; }
	.lg-scene__store { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: min(560px, 100%); }
	.lg-scene__store > div { display: grid; gap: 6px; font: 500 11px/1.3 var(--lg-font-text); color: #000; }
	.lg-scene__store .lg-fake { aspect-ratio: 2 / 3; }
	.lg-scene__store canvas { aspect-ratio: 2 / 3; width: 100%; height: auto; }
	.lg-scene__poster { width: min(340px, 90%); background: #fff; padding: 10px; box-shadow: 0 0 0 1px #ccc; }
	.lg-scene__mail { width: min(560px, 100%); background: #fff; padding: 20px; border: 1px solid #ddd; font: 400 14px/1.5 var(--lg-font-text); color: #000; }
	.lg-scene__mail canvas { max-width: 300px; margin-top: 12px; }
	.lg-scene__rules { display: grid; gap: var(--lg-s-3); }
	.lg-scene__rules h3 { font-size: var(--lg-fs-5); }
	.lg-scene__rules ul { padding-left: 1.1em; display: grid; gap: 6px; }
	.lg-scene__rules .lg-btn { justify-self: start; }

	/* ---------- Darf ich? ---------- */
	.lg-mayi { display: grid; gap: var(--lg-s-3); align-content: start; }
	.lg-mayi select { background: #fff; color: #000; border-color: #000; }
	.lg-mayi__out { min-height: 6em; }
	.lg-mayi__out p:first-child { font: 900 var(--lg-fs-5)/1 var(--lg-font-display); letter-spacing: -0.03em; margin-bottom: var(--lg-s-2); }
	.lg-mayi__out [data-v="yes"] { background: #fff; color: #000; display: inline-block; padding: .1em .3em; }
	.lg-mayi__out [data-v="ask"] { background: #000; color: #fff; display: inline-block; padding: .1em .3em; }
	.lg-mayi__out [data-v="no"] { text-decoration: line-through; text-decoration-thickness: .12em; }

	/* ---------- Bios ---------- */
	.lg-bios { display: grid; gap: var(--lg-s-4); justify-items: start; margin-top: var(--lg-s-5); }
	.lg-bios p { font: 700 var(--lg-fs-4)/1.35 var(--lg-font-display); letter-spacing: -0.01em; max-width: 46ch; }
	.lg-colophon { padding-block: var(--lg-sheet); }
	.lg-colophon__grid { display: grid; gap: var(--lg-s-7); }
	@media (min-width: 1000px) { .lg-colophon__grid { grid-template-columns: 1.1fr 1fr; } }

	/* ---------- Werkbank card on the series ground: stays black-on-white like a real card ---------- */
	.lg-werkbank__card { min-width: 0; }

	/* Hard mode also hides v3 English */
	.lg-hard :is(.lg-cover__en, .lg-cover__hint, .lg-runhead__en, .lg-tool-card__d) { visibility: hidden; }
}
@layer lg.portal {
	.lg-type-rules b { font-size: var(--lg-fs-5); overflow-wrap: anywhere; }
	.lg-bios .lg-stamp { position: relative; inset: auto; transform: rotate(-8deg); }
	.lg-tester__out { font-size: var(--fs, clamp(2.2rem, 8vw, 6rem)); overflow-wrap: normal; white-space: nowrap; }
	@media (min-width: 1000px) { .lg-studio__proof { position: sticky; top: 84px; align-self: start; } }
	.lg-joints__b { transform: translate(calc(var(--pull, 0) * -18%), calc(var(--pull, 0) * -22%)); transition: transform calc(500ms * var(--lg-motion)) var(--lg-ease-snap); }
}

/* ===================== v3.1: audience doors, ink pairs (edge to edge) ===================== */
@layer lg.portal {
	.lg-doors { padding-block: var(--lg-s-6) var(--lg-s-7); }
	.lg-doors__q { font-weight: 700; margin-bottom: var(--lg-s-4); }
	.lg-doors__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 2px solid #000; }
	@media (min-width: 900px) { .lg-doors__list { grid-template-columns: repeat(4, 1fr); border-top: 0; } }
	.lg-doors__list a { position: relative; display: grid; gap: var(--lg-s-2); align-content: start; height: 100%; padding: var(--lg-s-4) var(--lg-s-6) var(--lg-s-4) 0; border-bottom: 2px solid #000; color: #000; text-decoration: none; }
	@media (min-width: 900px) { .lg-doors__list a { padding: var(--lg-s-5) var(--lg-s-5) var(--lg-s-6); border: 2px solid #000; border-right-width: 0; } .lg-doors__list li:last-child a { border-right-width: 2px; } }
	.lg-doors__list b { font: 900 var(--lg-fs-5)/1 var(--lg-font-display); letter-spacing: -0.04em; }
	.lg-doors__list span { font-size: var(--lg-fs-2); max-width: 30ch; }
	.lg-doors__list i { position: absolute; right: var(--lg-s-3); top: var(--lg-s-4); font: 800 var(--lg-fs-5)/1 var(--lg-font-display); font-style: normal; transition: transform calc(var(--lg-d-2) * var(--lg-motion)) var(--lg-ease); }
	@media (hover: hover) { .lg-doors__list a:hover { background: var(--lg-ink-s); color: var(--lg-ink-s-on); } .lg-doors__list a:hover i { transform: translateX(4px); } }
	.lg-doors__list a:active { background: #000; color: #fff; }

	.lg-pairs { display: grid; gap: var(--lg-s-6); margin-top: var(--lg-s-8); align-items: start; }
	@media (min-width: 900px) { .lg-pairs { grid-template-columns: 1fr 1.3fr; } }
	.lg-pairs__text h3 { font: 900 var(--lg-fs-6)/.95 var(--lg-font-display); letter-spacing: -0.05em; margin-bottom: var(--lg-s-3); }
	.lg-pairs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lg-s-3); }
	.lg-pairs__list li { display: grid; grid-template-columns: 64px 64px 1fr; grid-template-rows: auto auto; column-gap: 0; align-items: center; }
	.lg-pairs__a, .lg-pairs__b { grid-row: 1 / span 2; height: 48px; }
	.lg-pairs__b { width: calc(64px / 1.16); }
	.lg-pairs__list b { padding-left: var(--lg-s-4); font: 800 var(--lg-fs-3)/1.1 var(--lg-font-display); }
	.lg-pairs__list small { grid-column: 3; padding-left: var(--lg-s-4); font-size: var(--lg-fs-1); color: var(--lg-quiet); }
}
@layer lg.portal {
	/* v3.1: nothing overlaps. The German line ends inside its field; the English field starts at the edge. */
	.lg-cover__de { margin-bottom: 0; padding-bottom: .08em; }
	.lg-cover__top { padding-bottom: var(--lg-s-5); }
	.lg-cover__bottom { min-height: 30svh; padding-top: var(--lg-s-5); }
	.lg-cover--home .lg-cover__bottom { min-height: 0; }
}