/* Hallmark · macrostructure: 11 Catalogue + live exercise · genre: modern-minimal · design-system: design.md · designed-as-app
 * theme: custom albanisch-lernen-online.de · nav: N1b (preserved brand navigation) · footer: Ft2
 * paper: oklch(19% .025 260) · accent: oklch(84% .085 235) · display: IBM Plex Mono · body: Manrope
 * pre-emit critique: P4 H4 E3 S5 R4 V5 · V2 source review; visual QA delegated to root
 * contrast: pass (semantic ink, muted, accent and focus pairs) · no fabricated proof or imagery
 */

.site-header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4);align-items:center}.site-tagline{display:none}.site-brand{font-size:1.35rem}.site-header{border:0}.hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-6)}.hero h1{font-size:clamp(2.1rem,4vw,3.8rem);line-height:1.1}.exercise{border:1px solid var(--color-rule);background:var(--color-paper-2);color:var(--color-ink);padding:var(--space-5)}.exercise h2{font-size:var(--text-xl);margin-block-start:0}.exercise fieldset{border:0;padding:0;margin:0 0 var(--space-4)}.exercise legend{margin-block-end:var(--space-3);font-size:var(--text-lg)}.exercise label{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);min-height:44px;border-block-start:1px solid var(--color-rule)}.exercise input[type=radio]{accent-color:var(--color-accent);width:1.1rem;height:1.1rem;min-height:0}.exercise-result{min-height:4lh;margin-block-end:0}.article-item{padding:var(--space-4);border:1px solid var(--color-rule)}.site-footer-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}.footer-note{max-width:44ch}
@media(max-width:48rem){.hero{grid-template-columns:minmax(0,1fr)}.site-header-inner{grid-template-columns:minmax(0,1fr)}}

/* V2 — guided writing practice; V1 rules remain for existing archive layouts. */
.exercise-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-xl);align-items:start;padding-block:var(--space-lg) var(--space-2xl)}
.exercise-hero h1{font-size:var(--text-display);line-height:1.1;max-width:19ch}
.exercise-intro .lede{max-width:45ch;margin-block-end:var(--space-md)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md)}
.hero-actions .text-link{display:inline-flex;align-items:center;min-height:var(--control-height)}
.button .atelier-icon,.text-link .atelier-icon,.button svg,.text-link svg{width:1.1rem;height:1.1rem;flex:none;vertical-align:middle}
.button,.text-link{gap:var(--space-xs)}
.letter-board{margin:var(--space-lg) 0 var(--space-sm);max-width:26rem}
.learning-visual{display:block;width:100%;height:auto}
.letter-board figcaption{font-size:var(--text-sm);max-width:45ch;color:var(--color-muted);margin-block-start:var(--space-xs)}
.visual-rule{fill:none;stroke:var(--color-rule);stroke-width:1;stroke-linecap:round}
.visual-dashed{stroke-dasharray:4 8}
.visual-paper{fill:var(--color-paper-2);stroke:var(--color-muted);stroke-width:1}
.visual-glyph{font-family:var(--font-display);font-size:88px;font-weight:var(--display-weight);fill:var(--color-ink)}
.visual-glyph-large{font-size:115px}
.visual-accent{fill:var(--color-accent)}
.visual-accent-stroke{fill:none;stroke:var(--color-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.visual-ink-stroke{fill:none;stroke:var(--color-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.visual-number{font-family:var(--font-display);font-size:53px;fill:var(--color-ink)}
.visual-word{font-family:var(--font-display);font-size:31px;fill:var(--color-ink)}
.visual-word.visual-accent{fill:var(--color-accent)}
.exercise{padding:var(--space-md);border-radius:var(--radius-card);border:var(--rule-hair) solid var(--color-rule)}
.exercise-heading{display:flex;align-items:start;gap:var(--space-sm);margin-block-end:var(--space-md)}
.exercise-heading h2{font-size:var(--text-lg);margin:0;max-width:22ch}
.exercise-mark{color:var(--color-accent);flex:none}
.exercise-mark svg{width:1.5rem;height:1.5rem}
.exercise legend{font-size:var(--text-base);margin-block-end:var(--space-md);color:var(--color-muted);max-width:33ch}
.exercise label{min-height:56px;padding:var(--space-sm) var(--space-xs);gap:var(--space-md);cursor:pointer;border-block-start:var(--rule-hair) solid var(--color-rule)}
.exercise label [lang=sq]{font-family:var(--font-display);font-size:var(--text-lg)}
.exercise label:has(input:checked){background:var(--color-paper);color:var(--color-ink)}
.exercise label:focus-within{outline:var(--rule-fine) solid var(--color-focus);outline-offset:2px}
.exercise label input{flex:none}
.exercise .button{width:100%}
.exercise-result{min-height:4lh;padding-block:var(--space-sm);font-size:var(--text-sm);margin:0}
.exercise details{border-block-start:var(--rule-hair) solid var(--color-rule);padding-block:var(--space-xs)}
.exercise summary{font-size:var(--text-sm);padding-block:var(--space-xs)}
.exercise details p{font-size:var(--text-sm);margin-block:var(--space-xs)}
.exercise-source{min-height:var(--control-height);display:inline-flex;align-items:center;font-size:var(--text-sm)}
.practice-nav{border-block:var(--rule-hair) solid var(--color-rule);padding-block:var(--space-md)}
.practice-nav>p{margin:0 0 var(--space-sm);color:var(--color-muted)}
.practice-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-xs)}
.practice-nav a{min-height:52px;display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:var(--color-ink);padding:var(--space-xs);white-space:nowrap}
.practice-nav a svg{width:1.2rem;height:1.2rem;flex:none;color:var(--color-accent)}
.practice-nav a>svg:last-child{margin-inline-start:auto}
.practice-symbol{font-family:var(--font-display);color:var(--color-accent);min-width:2.8rem}
.section-intro{max-width:51ch;margin-block-end:var(--space-xl)}
.section-intro h2{margin-block:0 var(--space-sm);font-size:var(--text-xl)}
.section-intro p{margin:0;color:var(--color-muted)}
.practice-library .article-item{border:var(--rule-hair) solid var(--color-rule);padding:0 0 var(--space-md);border-radius:var(--radius-card);overflow:clip}
.practice-library .article-body{padding-inline:var(--space-md)}
.practice-library .article-title{font-size:var(--text-lg);margin-block:var(--space-sm)}
.practice-library .article-excerpt{font-size:var(--text-sm)}
.practice-library .article-category{margin-block-start:var(--space-md)}
.practice-library .article-visual,.practice-library .article-cover{background:var(--color-paper-2);color:var(--color-ink)}
.correction-layout{display:grid;gap:var(--space-xl)}
.correction-layout h2{margin-block-start:0;max-width:19ch}
.correction-layout>div>p{max-width:48ch}
.correction-sequence{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-md)}
.correction-sequence li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-xs) var(--space-sm)}
.correction-sequence span{grid-row:span 2;display:block;color:var(--color-accent)}
.correction-sequence svg{width:1.7rem;height:1.7rem}
.correction-sequence h3{font-size:var(--text-base);margin:0}
.correction-sequence p{margin:0;color:var(--color-muted);font-size:var(--text-sm)}
@media(hover:hover) and (pointer:fine){.exercise label:hover{background:var(--color-paper);color:var(--color-ink)}.practice-nav a:hover{background:var(--color-paper-2);color:var(--color-ink)}.hero-actions a:hover{text-decoration:none}}
@media(min-width:40rem){.exercise{padding:var(--space-lg)}}
@media(min-width:60rem){.exercise-hero{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--space-2xl)}.exercise-intro{padding-block-start:var(--space-md)}.practice-nav ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}.practice-nav a{font-size:var(--text-sm)}.practice-library .article-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md)}.correction-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-2xl)}}
@media(max-width:39.999rem){.letter-board{max-width:20rem}.exercise-source{font-size:var(--text-sm)}.practice-nav a{font-size:var(--text-base)}}