/* Home page ([lg_home]), brand v2. Builds on portal.css (split hero, reading page, game, shelf). Mobile-first. */
@layer lg.portal {
	/* Hero: English upright here; the home page explains before it plays */
	.lg-cover--home .lg-cover__bottom--static { display: block; cursor: default; padding-top: var(--lg-s-5); }
	.lg-cover__en--up { transform: none !important; margin-bottom: var(--lg-s-6); max-width: 18ch; }
	.lg-cover--home .lg-btn--ghost { color: var(--lg-text); border-color: var(--lg-text); }

	/* ---------- Books: each card prints in its cover ink ---------- */
	.lg-books { padding-block: var(--lg-sheet); }
	.lg-books__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-books__head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
	.lg-books__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
	@media (min-width: 700px) { .lg-books__grid { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 1100px) { .lg-books__grid { grid-template-columns: repeat(4, 1fr); } }
	.lg-book { position: relative; }
	.lg-book__link { display: grid; gap: var(--lg-s-2); height: 100%; padding: var(--lg-s-4) var(--lg-s-4) var(--lg-s-5); color: var(--lg-text); text-decoration: none; }
	.lg-book__cover { display: block; aspect-ratio: 1; overflow: hidden; margin: calc(var(--lg-s-4) * -1) calc(var(--lg-s-4) * -1) var(--lg-s-3); }
	.lg-book__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-book__link:hover .lg-book__cover img { transform: scale(1.04) rotate(-1deg); }
	.lg-book__series { font: 800 var(--lg-fs-1)/1.2 var(--lg-font-display); text-transform: uppercase; letter-spacing: .02em; }
	.lg-book__title { font: 900 var(--lg-fs-5)/.98 var(--lg-font-display); letter-spacing: -0.035em; color: var(--lg-de); text-wrap: balance; }
	.lg-book__price { justify-self: start; margin-top: var(--lg-s-2); padding: .3em .6em; background: var(--lg-slab); color: var(--lg-on-slab); font: 800 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-book__price del { opacity: .6; margin-right: .3em; }
	.lg-book__price ins { text-decoration: none; }
	.lg-book__mine { display: none; position: absolute; z-index: 2; top: var(--lg-s-3); left: var(--lg-s-3); padding: 6px 10px; background: #000; color: #fff; font: 800 var(--lg-fs-1)/1 var(--lg-font-display); }
	.lg-books__none { display: none; margin-bottom: var(--lg-s-5); padding: var(--lg-s-4) var(--lg-s-5); background: #000; color: #fff; max-width: 70ch; box-shadow: 8px 8px 0 var(--lg-ink-s); }

	[data-series="ux"] .lg-book[data-book-series="ux"],
	[data-series="mk"] .lg-book[data-book-series="mk"],
	[data-series="pm"] .lg-book[data-book-series="pm"],
	[data-series="it"] .lg-book[data-book-series="it"],
	[data-series="en"] .lg-book[data-book-series="en"],
	[data-series="ld"] .lg-book[data-book-series="ld"],
	[data-series="hr"] .lg-book[data-book-series="hr"] { order: -1; }
	[data-series-chosen][data-series="ux"] .lg-book[data-book-series="ux"] .lg-book__mine,
	[data-series-chosen][data-series="mk"] .lg-book[data-book-series="mk"] .lg-book__mine { display: inline-block; }
	[data-series-chosen][data-series="pm"] [data-none-for="pm"],
	[data-series-chosen][data-series="it"] [data-none-for="it"],
	[data-series-chosen][data-series="en"] [data-none-for="en"],
	[data-series-chosen][data-series="ld"] [data-none-for="ld"],
	[data-series-chosen][data-series="hr"] [data-none-for="hr"] { display: block; }

	/* ---------- How: three sheets in sequence ---------- */
	.lg-steps { padding-top: var(--lg-sheet); }
	.lg-steps__head { margin-bottom: var(--lg-s-7); }
	.lg-steps__list { list-style: none; margin: 0; padding: 0; display: grid; }
	@media (min-width: 1000px) { .lg-steps__list { grid-template-columns: repeat(3, 1fr); } }
	.lg-steps__list > li { position: relative; display: grid; align-content: start; gap: var(--lg-s-4); min-height: clamp(420px, 40vw, 600px); padding: var(--lg-s-6) var(--lg-gutter) var(--lg-s-8); overflow: hidden; }
	.lg-steps__no { position: absolute; right: -.06em; bottom: -.2em; font: 900 clamp(12rem, 26vw, 24rem)/.8 var(--lg-font-display); letter-spacing: -0.08em; color: var(--lg-slab); pointer-events: none; }
	.lg-steps__list h3 { font-size: var(--lg-fs-6); font-weight: 900; letter-spacing: -0.04em; max-width: 11ch; position: relative; }
	.lg-steps__list p { max-width: 34ch; position: relative; font-size: var(--lg-fs-4); line-height: 1.4; }
	.lg-steps__demo { position: relative; display: grid; gap: 6px; min-height: 120px; align-content: start; margin-bottom: var(--lg-s-4); }
	.lg-steps__demo span { font: 800 var(--lg-fs-4)/1.1 var(--lg-font-display); color: var(--lg-de); max-width: 22ch; }
	.lg-steps__demo i { display: block; width: 72%; height: 1.1em; background: var(--lg-slab); }
	.lg-steps__demo--notes span { justify-self: start; background: var(--lg-slab); color: var(--lg-on-slab); padding: .1em .3em; }
	.lg-steps__demo--notes small { font-size: var(--lg-fs-2); color: var(--lg-quiet); max-width: 36ch; border-left: 4px solid var(--lg-slab); padding-left: 10px; }
	.lg-steps__demo--forward { grid-auto-flow: row; }
	.lg-steps__demo--forward i { height: 12px; background: var(--lg-de); }
	.lg-steps__demo--forward i:nth-child(1) { width: 92%; } .lg-steps__demo--forward i:nth-child(2) { width: 80%; } .lg-steps__demo--forward i:nth-child(3) { width: 96%; } .lg-steps__demo--forward i:nth-child(4) { width: 70%; } .lg-steps__demo--forward i:nth-child(5) { width: 40%; }
	@media (prefers-reduced-motion: no-preference) {
		.lg-steps__demo--forward i { animation: lg-forward calc(3.2s / max(var(--lg-motion), .01)) linear infinite; transform-origin: left; }
		.lg-steps__demo--forward i:nth-child(2) { animation-delay: .25s; } .lg-steps__demo--forward i:nth-child(3) { animation-delay: .5s; } .lg-steps__demo--forward i:nth-child(4) { animation-delay: .75s; } .lg-steps__demo--forward i:nth-child(5) { animation-delay: 1s; }
	}
	@keyframes lg-forward { 0% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
	html[data-lg-motion="off"] .lg-steps__demo--forward i { animation: none; }

	/* ---------- Magazine: rows of German headlines ---------- */
	.lg-mag { padding-block: var(--lg-sheet); }
	.lg-mag__head { display: grid; gap: var(--lg-s-4); margin-bottom: var(--lg-s-7); }
	@media (min-width: 900px) { .lg-mag__head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
	.lg-mag__list { list-style: none; margin: 0; padding: 0; border-top: 3px solid #000; }
	.lg-mag__list a { position: relative; display: grid; gap: var(--lg-s-2); padding: var(--lg-s-5) 0; border-bottom: 3px solid #000; color: #000; text-decoration: none; }
	.lg-mag__title { font: 900 var(--lg-fs-6)/.98 var(--lg-font-display); letter-spacing: -0.04em; max-width: 24ch; }
	.lg-mag__meta { font: 600 var(--lg-fs-2)/1 var(--lg-font-text); }
	.lg-mag__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }
	.lg-mag__list a:hover::after, .lg-mag__list a:focus-visible::after { transform: none; }
	.lg-mag__list a:hover .lg-mag__title { background: #fff; box-shadow: .1em 0 0 #fff, -.1em 0 0 #fff; }

	/* ---------- FAQ ---------- */
	.lg-faq { padding-block: var(--lg-sheet); }
	.lg-faq__grid { display: grid; gap: var(--lg-s-7); }
	@media (min-width: 1000px) { .lg-faq__grid { grid-template-columns: 1fr 1.6fr; align-items: start; } .lg-faq h2 { position: sticky; top: 100px; } }
	.lg-faq__list { border-top: 3px solid #000; }
	.lg-faq__item { border-bottom: 3px solid #000; }
	.lg-faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--lg-s-4); min-height: var(--lg-target); padding: var(--lg-s-4) 0; font: 900 var(--lg-fs-5)/1.05 var(--lg-font-display); letter-spacing: -0.03em; }
	.lg-faq__item summary::-webkit-details-marker { display: none; }
	.lg-faq__item summary::after { content: ""; flex: none; width: 22px; height: 22px; background: linear-gradient(#000 0 0) center / 22px 4px no-repeat, linear-gradient(#000 0 0) center / 4px 22px no-repeat; }
	.lg-faq__item[open] summary::after { background: linear-gradient(#000 0 0) center / 22px 4px no-repeat; }
	.lg-faq__item[open] summary { color: #000; }
	.lg-faq__item p { margin: 0 0 var(--lg-s-5); max-width: 60ch; font-size: var(--lg-fs-4); line-height: 1.45; }
	.lg-faq__item[open] p { animation: lg-lift calc(var(--lg-d-4) * var(--lg-motion)) var(--lg-ease); }

	.lg-news { padding-block: var(--lg-sheet); }
	.lg-news__form { max-width: 560px; margin-top: var(--lg-s-6); }
}
@layer lg.portal {
	/* Long German compounds: break at a hyphenation point instead of running off a phone screen */
	.lg-mag__list a { min-width: 0; }
	.lg-mag__title, .lg-book__title, .lg-faq__item summary { overflow-wrap: break-word; hyphens: auto; }
}

/* ===================== Home v3 ===================== */
@layer lg.portal {
	.lg-cover__ctas { padding-block: var(--lg-s-5); }
	.lg-cover--home[data-variant="light"] .lg-cover__top { min-height: 46svh; }
	.lg-book__flat { display: grid; align-content: space-between; height: 100%; padding: var(--lg-s-4); background: var(--lg-ground); color: var(--lg-de); font: 900 var(--lg-fs-5)/.95 var(--lg-font-display); letter-spacing: -0.04em; text-transform: uppercase; border: 3px solid var(--lg-de); }
	.lg-book__flat b { font-size: var(--lg-fs-1); letter-spacing: .02em; color: var(--lg-text); }
	.lg-book__stores { display: flex; flex-wrap: wrap; gap: 4px var(--lg-s-3); padding: 0 var(--lg-s-4) var(--lg-s-4); font: 600 var(--lg-fs-1)/1 var(--lg-font-text); }
	.lg-book__stores a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .7em; background: #000; color: #fff; text-decoration: none; }
	.lg-book__link:hover .lg-book__cover img { transform: none; }
	@media (hover: hover) { .lg-book__link:hover .lg-book__cover img { transform: scale(1.04) rotate(-1deg); } }
	.lg-werkbank--home .lg-tools { grid-template-columns: 1fr; }
	@media (min-width: 900px) { .lg-werkbank--home .lg-tools { grid-template-columns: repeat(3, 1fr); } }
	.lg-ausweis-sheet { padding-block: var(--lg-sheet); }
	.lg-ausweis-sheet__grid { display: grid; gap: var(--lg-s-7); align-items: center; }
	.lg-ausweis-sheet h2 { max-width: 16ch; margin-bottom: var(--lg-s-4); }
	.lg-ausweis-sheet .lg-body { margin-bottom: var(--lg-s-5); }
	@media (min-width: 960px) { .lg-ausweis-sheet__grid { grid-template-columns: 1.1fr 400px; } }
	.lg-ausweis-sheet [data-lg-ausweis-embed] .lg-btn { display: none; }
}

/* ===================== v3.1: the role panel (the page answers your field) ===================== */
@layer lg.portal {
	.lg-role { padding-block: var(--lg-s-8); border-bottom: 2px solid #000; }
	.lg-role__grid { display: grid; gap: var(--lg-s-6); }
	@media (min-width: 960px) { .lg-role__grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
	.lg-role__who { display: grid; gap: var(--lg-s-4); align-content: start; }
	.lg-role__kicker { font: 700 var(--lg-fs-1)/1 var(--lg-font-text); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .6em; }
	.lg-role__kicker::before { content: ""; width: 2.4em; height: .6em; background: var(--lg-ink-s); }
	.lg-role h2 { font-size: var(--lg-fs-7); font-weight: 900; letter-spacing: -0.05em; line-height: .92; max-width: 12ch; }
	.lg-role__facts { font-size: var(--lg-fs-4); line-height: 1.4; max-width: 40ch; min-height: 2.8em; }
	.lg-role__label { font-weight: 700; margin-bottom: var(--lg-s-3); }
	.lg-role__label .lg-quiet { display: block; font-weight: 500; font-size: var(--lg-fs-2); }
	.lg-role__list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid #000; }
	.lg-role__list button { display: grid; grid-template-columns: 3.4em 1fr; grid-template-rows: auto auto; column-gap: var(--lg-s-3); align-items: center; width: 100%; min-height: 64px; padding: 10px 0; border: 0; border-bottom: 2px solid #000; background: none; color: #000; text-align: left; cursor: pointer; }
	.lg-role__art { grid-row: 1 / span 2; display: grid; place-items: center; height: 2em; background: var(--sw); font: 900 var(--lg-fs-3)/1 var(--lg-font-display); }
	.lg-role__art[data-a="der"] { color: #fff; }
	.lg-role__w { font: 800 var(--lg-fs-4)/1.1 var(--lg-font-display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
	.lg-role__en { font-size: var(--lg-fs-2); color: var(--lg-quiet); }
	@media (hover: hover) { .lg-role__list button:hover .lg-role__w { text-decoration: underline; text-decoration-thickness: .08em; } }
	.lg-role__list button[aria-pressed="true"] .lg-role__w::after { content: " ✓"; font-size: .7em; }
	.lg-role__list button:active { background: #f2f2f2; }
}