/* wort.schule — design system (F1 foundation).
   Hand-authored modern CSS: semantic design tokens, logical properties for automatic
   LTR/RTL, light/dark. Served by Propshaft (no build step); one file, ordered by cascade
   (tokens → reset → base → layout → components). School fonts + Silbenbögen arrive in F2. */

/* ============================ tokens ============================ */
:root {
  color-scheme: light dark;

  /* primitives (oklch — warm paper, green ink, amber accent; not used directly by components) */
  --c-ink-900:oklch(.27 .02 152); --c-ink-700:oklch(.40 .02 152); --c-ink-500:oklch(.47 .018 152); --c-ink-300:oklch(.62 .016 152);
  --c-paper-0:oklch(1 0 0); --c-paper-50:oklch(.985 .008 110); --c-paper-100:oklch(.972 .009 110); --c-paper-200:oklch(.95 .012 110);
  --c-brand-800:oklch(.46 .13 152); --c-brand-700:oklch(.55 .13 152); --c-brand-600:oklch(.64 .13 152); --c-brand-100:oklch(.95 .035 152);
  --c-accent-700:oklch(.52 .12 64); --c-accent-600:oklch(.62 .13 66); --c-accent-100:oklch(.95 .045 75);
  --c-sky-700:oklch(.5 .12 245); --c-berry-700:oklch(.46 .14 350);

  /* semantic roles — components use ONLY these */
  --bg:var(--c-paper-50); --surface:var(--c-paper-0); --surface-2:var(--c-paper-100);
  --border:color-mix(in oklab, var(--c-ink-500) 26%, transparent);
  --text:var(--c-ink-900); --text-muted:var(--c-ink-500); --text-faint:var(--c-ink-300); --text-on-brand:var(--c-paper-0);
  --brand:var(--c-brand-700); --brand-strong:var(--c-brand-800); --brand-surface:var(--c-brand-100);
  --accent:var(--c-accent-700); --accent-surface:var(--c-accent-100);
  --link:var(--c-brand-800); --focus:oklch(.55 .19 252);

  /* spacing */
  --sp-2xs:.25rem; --sp-xs:.5rem; --sp-sm:.75rem; --sp-md:1rem; --sp-lg:1.5rem;
  --sp-xl:2rem; --sp-2xl:3rem; --sp-3xl:4.5rem;

  /* fluid type */
  /* the smallest step — tiny tags/badges (provenance „KI · ungeprüft", phonetic „klanglich ähnlich").
     It was referenced before it existed, so those tags silently fell back to the inherited body size and
     rendered far too large; defining it restores their intended small size. */
  --step--2:clamp(.72rem,.68rem + .18vw,.82rem);
  --step--1:clamp(.84rem,.8rem + .2vw,.95rem);
  --step-0:clamp(1rem,.95rem + .25vw,1.13rem);
  --step-1:clamp(1.2rem,1.1rem + .45vw,1.45rem);
  --step-2:clamp(1.45rem,1.3rem + .8vw,1.9rem);
  --step-3:clamp(1.75rem,1.5rem + 1.3vw,2.5rem);
  --step-4:clamp(2.1rem,1.7rem + 2vw,3rem);
  --step-5:clamp(2.5rem,1.9rem + 3vw,3.6rem);
  --lemma:clamp(2.4rem,1.8rem + 3vw,3.8rem);
  --measure:62ch;

  --radius-sm:.6rem; --radius-md:1rem; --radius-lg:1.6rem; --radius-pill:999px;
  --shadow-sm:0 1px 2px color-mix(in oklab,var(--c-ink-900) 9%,transparent);
  --shadow-md:0 8px 24px color-mix(in oklab,var(--c-ink-900) 12%,transparent);
  --ring:3px solid var(--focus);
  --dur:200ms; --ease:cubic-bezier(.2,.7,.3,1);

  --font-ui:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Nunito",var(--font-ui);
  --font-lexical:"Charis SIL","Gentium Plus","Iowan Old Style",Palatino,Georgia,serif;
}

:root[data-theme="dark"] {
  --bg:oklch(.205 .014 152); --surface:oklch(.25 .016 152); --surface-2:oklch(.29 .017 152);
  --border:oklch(.41 .015 152);
  --text:oklch(.95 .01 110); --text-muted:oklch(.78 .012 110); --text-faint:oklch(.64 .012 110); --text-on-brand:oklch(.18 .02 150);
  --brand:oklch(.74 .12 152); --brand-strong:oklch(.82 .1 152); --brand-surface:oklch(.33 .05 152);
  --accent:oklch(.78 .11 70); --accent-surface:oklch(.35 .05 70);
  --link:oklch(.8 .1 152); --focus:oklch(.72 .16 252);
  --shadow-md:0 8px 24px oklch(0 0 0 / .5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:oklch(.205 .014 152); --surface:oklch(.25 .016 152); --surface-2:oklch(.29 .017 152);
    --border:oklch(.41 .015 152);
    --text:oklch(.95 .01 110); --text-muted:oklch(.78 .012 110); --text-faint:oklch(.64 .012 110); --text-on-brand:oklch(.18 .02 150);
    --brand:oklch(.74 .12 152); --brand-strong:oklch(.82 .1 152); --brand-surface:oklch(.33 .05 152);
    --accent:oklch(.78 .11 70); --accent-surface:oklch(.35 .05 70); --link:oklch(.8 .1 152);
    --focus:oklch(.72 .16 252); --shadow-md:0 8px 24px oklch(0 0 0 / .5);
  }
}

/* UI + display web fonts — self-hosted (no third-party request; Hard Rule 9). Atkinson Hyperlegible
   (body/UI, accessibility-first) + Nunito (display headings). OFL; served from public/fonts so the
   url() stays stable across deploys. School fonts (Silbenbögen) live further down, unchanged. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/fonts/Nunito-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/fonts/Nunito-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Nunito";src:url("/fonts/Nunito-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ============================ reset / base ============================ */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,p,ul,ol,figure{margin:0}
ul{padding:0}
img,video{max-inline-size:100%;display:block}

body{
  margin:0;font-family:var(--font-ui);color:var(--text);background:var(--bg);
  font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased;
  min-block-size:100dvh;display:flex;flex-direction:column;
  background-image:radial-gradient(120% 80% at 100% 0,color-mix(in oklab,var(--brand) 9%,transparent),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3{font-family:var(--font-display);line-height:1.13;letter-spacing:-.02em;font-weight:800}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.12em}
:focus-visible{outline:var(--ring);outline-offset:2px;border-radius:.2rem}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Honour an explicit request for more contrast: darken borders + muted text, thicken underlines. */
@media (prefers-contrast:more){
  :root,:root[data-theme="light"]{--border:color-mix(in oklab,var(--c-ink-900) 60%,transparent);--text-muted:var(--c-ink-700)}
  :root[data-theme="dark"]{--border:oklch(.7 .02 110);--text-muted:oklch(.88 .012 110)}
  a{text-decoration-thickness:.12em}
  .badge,.language-card,.feature-card,.search-result,.concept-sibling,.didactics-panel{border-color:var(--text)}
}

/* Skip link: off-screen until focused (keyboard users reach <main> first). */
.skip-link{position:absolute;inset-inline-start:-9999px;inset-block-start:0;z-index:1000;
  padding:.6rem 1rem;background:var(--brand-strong);color:var(--text-on-brand);
  border-radius:0 0 var(--radius-md) 0;font-weight:700}
.skip-link:focus{inset-inline-start:0}

/* ============================ layout chrome ============================ */
/* centre content of the real <header>/<main>/<footer> without markup changes */
body > header > *, body > main, body > footer > *{
  max-inline-size:72rem;margin-inline:auto;padding-inline:var(--sp-lg);inline-size:100%}

body > header{position:sticky;inset-block-start:0;z-index:200;
  background:color-mix(in oklab,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.2) blur(8px);border-block-end:1px solid var(--border)}
body > header nav{display:flex;align-items:center;gap:var(--sp-md);min-block-size:4rem;flex-wrap:wrap}
body > header nav a{color:var(--text-muted);text-decoration:none;font-weight:600}
body > header nav a:hover{color:var(--brand)}
body > header nav a.brand{font-size:var(--step-1);font-weight:800;color:var(--text);
  letter-spacing:-.01em;margin-inline-end:auto}

body > main{flex:1;padding-block:var(--sp-2xl) var(--sp-3xl)}
body > footer{border-block-start:1px solid var(--border);color:var(--text-muted);
  font-size:var(--step--1);padding-block:var(--sp-lg)}
/* footer (adapted from wort.schule): tagline, links, CC0 licence, partners — child-safe, no tracking.
   Each row stays inside the same centred 72rem column as the header (body > footer > * handles that —
   so DON'T override margin-inline here). */
body > footer{display:flex;flex-direction:column;gap:var(--sp-sm)}
body > footer p{margin-block:0}
body > footer a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
body > footer a:hover{color:var(--brand)}
.footer__tagline{font-weight:600;color:var(--text)}
.footer__links{display:flex;flex-wrap:wrap;gap:var(--sp-2xs) var(--sp-md);align-items:baseline}
/* the partner row sits on an always-light shelf so the logos read in BOTH themes (wort.schule's footer
   is light-only); text on it is fixed-dark since the shelf never follows the dark theme */
.footer__partners{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-sm) var(--sp-md);
  background:#fbfaf7;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:var(--sp-sm) var(--sp-md)}
.footer__partners-label{font-weight:600;color:#444}
.footer__license a{white-space:nowrap}
/* quiet build/deploy stamp at the very bottom — informational, not a link (child-safe, Hard Rule 9) */
.footer__build{color:var(--text-muted);font-size:var(--step--2);margin-block-start:var(--sp-sm);
  font-variant-numeric:tabular-nums}
/* Partner logos — the wort.schule treatment: greyscale + reduced opacity by default (a quiet credit),
   full brand colour + opacity on hover/focus. NOT brightness(0): that blackens the dense/filled logos
   (the bold red Aktion-Mensch mark, the Humboldt seal) into unrecognisable blobs; only clean line-marks
   survive it. The logos sit on the light shelf above, so they read in both themes. */
.footer__partner{display:inline-flex;align-items:center}
.footer__partner-logo{height:2.6rem;width:auto;filter:grayscale(1);opacity:.55;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.footer__partner:hover .footer__partner-logo,
.footer__partner:focus-visible .footer__partner-logo{filter:none;opacity:1}

/* sectioning + prose rhythm */
main h1{font-size:var(--step-3);margin-block-end:var(--sp-sm)}
main section{margin-block-start:var(--sp-2xl)}
main section > h2{font-size:var(--step-1);margin-block-end:var(--sp-md);
  display:flex;align-items:baseline;gap:var(--sp-sm)}
main section > h2::after{content:"";flex:1;block-size:1px;background:var(--border)}
main p{max-inline-size:var(--measure)}
/* imprint (legal page): semantic <address> without the browser italic, calm prose rhythm */
.impressum address{font-style:normal;margin-block:.1rem 0}
.impressum h3{font-size:var(--step-0);margin-block:var(--sp-md) .2rem}
.impressum__funders{margin-block:.4rem 0;padding-inline-start:var(--sp-lg)}

/* ============================ components (existing markup hooks) ============================ */
/* word page */
article[lang]{display:block}
article > h1{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;
  letter-spacing:-.01em;line-height:1.05;margin-block:var(--sp-sm)}
.pos{display:inline-block;font-weight:700;color:var(--accent);background:var(--accent-surface);
  padding:.3rem .8rem;border-radius:var(--radius-pill);font-size:var(--step-0)}
.properties{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin-block:var(--sp-2xs)}
.property{font-size:var(--step--1);font-weight:600;color:var(--text-muted);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:.2rem .7rem}
.word-card{background:linear-gradient(135deg,var(--brand-surface),
    color-mix(in oklab,var(--accent-surface) 55%,var(--surface)));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg);box-shadow:var(--shadow-sm)}

/* forms + senses lists */
article section ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
article section[aria-labelledby="forms-heading"] li{
  font-family:var(--font-lexical);font-size:var(--step-1);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.5rem .9rem;box-shadow:var(--shadow-sm)}
article section[aria-labelledby="meanings-heading"] ul{flex-direction:column;
  max-inline-size:var(--measure)}
article section[aria-labelledby="meanings-heading"] li{
  background:var(--surface);border-inline-start:.28rem solid var(--brand);
  border-radius:var(--radius-sm);padding:.7rem 1rem}
.meaning__long{display:block;margin-block-start:.2rem;color:var(--text-muted);font-size:var(--step--1)}

/* Silbenbögen — German school fonts carry width-fitted arc glyphs (^NN); rendered by
   SyllableArcsComponent. Two alternating colours (red/blue, Silbenmethode). Served from
   public/fonts (not fingerprinted), so the @font-face url() stays stable. */
@font-face{font-family:"GS";src:url("/fonts/GS-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"GS";src:url("/fonts/GS-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"SAS";src:url("/fonts/SAS-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"SAS";src:url("/fonts/SAS-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"VA";src:url("/fonts/VA-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"VA";src:url("/fonts/VA-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"DRBuch";src:url("/fonts/DRBuch-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DRBuch";src:url("/fonts/DRBuch-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"DRHand";src:url("/fonts/DRHand-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"DRHand";src:url("/fonts/DRHand-Bold.woff") format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"LA";src:url("/fonts/LA-Regular.woff") format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"LA";src:url("/fonts/LA-Bold.woff") format("woff");font-weight:700;font-display:swap}

/* The school fonts draw each arc as an OpenType ligature on the `^NN` code; enable common AND
   discretionary ligatures explicitly so every font's arcs fire (not just the default-on ones). */
.syllables{line-height:1.7;font-variant-ligatures:common-ligatures discretionary-ligatures contextual;
  font-feature-settings:"liga" 1,"dlig" 1,"calt" 1}
.font-GS{font-family:"GS",var(--font-lexical)}
.font-SAS{font-family:"SAS",var(--font-lexical)}
.font-VA{font-family:"VA",var(--font-lexical)}
.font-DRBuch{font-family:"DRBuch",var(--font-lexical)}
.font-DRHand{font-family:"DRHand",var(--font-lexical)}
.font-LA{font-family:"LA",var(--font-lexical)}
.syllable-color1{color:#d7263d}                 /* rot */
.syllable-color2{color:#1d4ed8}                 /* blau */
:root[data-theme="dark"] .syllable-color1{color:#ff7480}
:root[data-theme="dark"] .syllable-color2{color:#6ea8ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .syllable-color1{color:#ff7480}
  :root:not([data-theme="light"]) .syllable-color2{color:#6ea8ff}}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.surface-tokens .token{display:inline-block}
.surface-tokens .token + .token{margin-inline-start:.35ch}

/* search — the generic stacked-label search form (advanced search etc.). The home hero search is a
   bespoke pill (.home-search) that ALSO carries role="search" for the a11y landmark; without the :not()
   guards these element/attribute selectors (specificity 0,1,1) would beat the component classes (0,1,0)
   and drag the icon to the bottom (align-items:end), wrap the row, and re-border the input. */
form[role="search"]:not(.home-search){display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:end;
  margin-block:var(--sp-lg);max-inline-size:42rem}
form[role="search"]:not(.home-search) label{flex-basis:100%;font-weight:600}
input[type="search"]:not(.home-search__input){flex:1;min-inline-size:14rem;font:inherit;
  padding:.7rem .9rem;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);color:var(--text)}
form[role="search"] input[type="submit"]{font:inherit;font-weight:700;cursor:pointer;
  padding:.7rem 1.2rem;border:1px solid transparent;border-radius:var(--radius-md);
  background:var(--brand);color:var(--text-on-brand)}
form[role="search"] input[type="submit"]:hover{background:var(--brand-strong)}
section[aria-labelledby="search-heading"] > ul{list-style:none;display:flex;
  flex-direction:column;gap:var(--sp-xs);margin-block-start:var(--sp-lg)}
section[aria-labelledby="search-heading"] > ul li{display:flex;align-items:baseline;gap:var(--sp-sm)}
section[aria-labelledby="search-heading"] > ul a{font-family:var(--font-lexical);
  font-size:var(--step-1);text-decoration:none;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:.5rem .9rem;color:var(--text)}
section[aria-labelledby="search-heading"] > ul a:hover{border-color:var(--brand)}
.hint{color:var(--text-muted);font-size:var(--step--1);font-style:italic}

/* ============================ languages directory ============================ */
.language-grid{list-style:none;display:grid;gap:var(--sp-md);margin-block-start:var(--sp-xl);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.language-card{display:flex;flex-direction:column;gap:var(--sp-2xs);position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-md);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.language-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.language-card__link{text-decoration:none;color:var(--text)}
/* Whole-card click target: the autonym stays the single semantic link, but its hit-area stretches over the
   entire card (accessible "stretched link" — one link per card for screen readers). The pin button is raised
   above it (z-index) so it stays independently clickable. */
.language-card__link::after{content:"";position:absolute;inset:0}
.language-card__autonym{display:block;font-family:var(--font-lexical);font-size:var(--step-2);
  font-weight:600;line-height:1.1;color:var(--brand-strong);padding-inline-end:1.9rem}
/* Pin toggle: FAINT at rest (discoverable, never fully hidden), and full on hover / keyboard focus /
   once pinned. The pin/pin-slash icons (SidekickIcons) swap on aria-pressed. It is a JS-only affordance:
   the `hidden` attribute MUST win over our display below until the Stimulus controller reveals it
   (progressive enhancement) — a class selector would otherwise override the UA `[hidden]`, restored here. */
.language-card__pin[hidden]{display:none}
.language-card__pin{position:absolute;z-index:1;inset-block-start:var(--sp-xs);inset-inline-end:var(--sp-xs);
  display:inline-flex;align-items:center;justify-content:center;inline-size:1.6rem;block-size:1.6rem;padding:0;
  border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);
  color:var(--text-muted);cursor:pointer;opacity:.45;
  transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.language-card__pin-svg{inline-size:0.95rem;block-size:0.95rem;display:block}
.language-card__pin .icon-unpin{display:none}
.language-card__pin[aria-pressed="true"] .icon-pin{display:none}
.language-card__pin[aria-pressed="true"] .icon-unpin{display:block}
.language-card:hover .language-card__pin,
.language-card__pin:focus-visible,
.language-card__pin[aria-pressed="true"]{opacity:1}
.language-card__pin:hover,.language-card__pin:focus-visible{color:var(--brand);border-color:var(--brand);background:var(--surface-2)}
.language-card__pin[aria-pressed="true"]{color:var(--brand-strong);border-color:var(--brand)}
.language-card__link:hover .language-card__autonym{text-decoration:underline;text-decoration-thickness:.06em}
.language-card__exonym{color:var(--text-muted);font-size:var(--step--1)}
.language-card__meta{margin-block-start:auto;color:var(--text-muted);font-size:var(--step--1);
  display:flex;gap:.5ch;align-items:baseline}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* trait badges — glyph + text, never colour alone */
.badges{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin-block:var(--sp-2xs)}
.badge{display:inline-flex;align-items:center;gap:.35em;font-size:var(--step--1);font-weight:600;
  padding:.2rem .65rem;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--surface-2);color:var(--text)}
.badge__glyph{font-size:1.05em;line-height:1}
.badge--rtl{background:var(--c-sky-700);color:#fff;border-color:transparent}
.badge--sign{background:var(--c-berry-700);color:#fff;border-color:transparent}
.badge--disjunctive{background:var(--accent-surface);color:var(--accent);border-color:transparent}
.badge--clicks{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}

/* language profile (show) */
.language-profile__head{display:flex;flex-direction:column;gap:var(--sp-sm)}
.language-profile h1{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;line-height:1.05;margin-block:0}
.language-profile__exonym{color:var(--text-muted);font-size:var(--step-1)}
.data-grid{display:grid;gap:var(--sp-sm) var(--sp-lg);margin:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}
.data-grid > div{display:flex;flex-direction:column;gap:.1rem}
.data-grid dt{color:var(--text-muted);font-size:var(--step--1)}
.data-grid dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.language-profile__actions{display:flex;flex-wrap:wrap;gap:var(--sp-md);margin-block-start:var(--sp-xl)}

/* Public language profile (SP-2): „shared vs. specific", layperson-friendly, with real examples. Logical
   properties throughout so RTL languages (arb …) mirror correctly; example words use --font-lexical so
   non-Latin scripts render in a fitting face. The whole core is JS-free (only the native <details> ⓘ). */
.language-profile__intro{color:var(--text-muted);max-inline-size:var(--measure);margin-block:calc(-1 * var(--sp-sm)) var(--sp-md)}
.language-profile__items{display:grid;gap:var(--sp-sm);padding:0;margin:0}
.language-profile__item{display:flex;flex-direction:column;gap:.3rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md)}
.language-profile__section--specific .language-profile__item{border-inline-start:.28rem solid var(--accent)}
.language-profile__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5ch var(--sp-sm)}
/* The ⓘ explanation is a full-width disclosure: when open it wraps to its own line so the body aligns with
   the card's left edge, instead of floating indented under the icon (the inline-block default did that). */
.language-profile__row .info-hint[open]{flex-basis:100%;margin-block-start:.3rem}
.language-profile__row .info-hint__body{margin-inline:0}
.language-profile__term{font-weight:700;font-size:var(--step-0)}
.language-profile__inventory{font-size:var(--step--1);font-weight:700;color:var(--accent);
  background:var(--accent-surface);border-radius:var(--radius-pill);padding:.05rem .6rem}
.language-profile__example{margin:0;color:var(--text-muted);font-size:var(--step--1);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5ch}
.language-profile__example-lead{font-style:italic}
.language-profile__example-link{font-family:var(--font-lexical);font-weight:600;text-decoration:none;
  color:var(--link)}
.language-profile__example-link:hover{text-decoration:underline}
.language-profile__example-value{color:var(--text-muted)}
.language-profile__ai{font-size:var(--step--2);font-weight:700;color:var(--accent);
  background:var(--accent-surface);border-radius:var(--radius-pill);padding:.05rem .5rem;white-space:nowrap}
.language-profile__gap{color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md);max-inline-size:var(--measure)}
.language-profile__contribute-wrap{margin-block-start:var(--sp-md)}
.language-profile__contribute{font-weight:600}
.language-profile__section--contribute{background:var(--brand-surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-lg)}
.language-profile__section--contribute .section-head{margin-block-start:0}
.language-profile__meta{margin-block-start:var(--sp-2xl)}
.language-profile__meta dt{text-transform:none}
/* Reviewer-pool prose (SP-3): readable editorial paragraphs/lists, measure-capped. */
.language-profile__prose-item{margin-block-end:var(--sp-md)}
.language-profile__prose-title{font-size:var(--step-0);margin-block:var(--sp-sm) .2rem}
.language-profile__prose-item p{margin-block:.4rem;max-inline-size:var(--measure)}
.language-profile__prose-item ul{margin-block:.4rem;padding-inline-start:var(--sp-lg)}
.language-profile__prose-item li{list-style:disc}

/* ============================ theme toggle ============================ */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  inline-size:2.4rem;block-size:2.4rem;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  font-size:var(--step-0);line-height:1;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.theme-toggle:hover{border-color:var(--brand);background:var(--surface-2)}
.theme-toggle__icon{pointer-events:none}

/* ============================ buttons ============================ */
.btn{display:inline-flex;align-items:center;gap:.5ch;font-weight:700;text-decoration:none;
  padding:.7rem 1.3rem;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--surface);color:var(--text);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn--primary{background:var(--brand);color:var(--text-on-brand);border-color:transparent}
.btn--primary:hover{background:var(--brand-strong)}
.listen-btn{margin-block-start:.4rem}
.listen-btn__icon{font-size:1.1em;line-height:1}
.locale-switcher{display:inline-flex;align-items:center}
.locale-switcher select{padding:.4rem .6rem;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);color:var(--text);font-size:var(--step--1)}
.word-image{display:block;max-inline-size:min(100%,320px);height:auto;margin-block:.6rem;
  border:1px solid var(--border);border-radius:var(--radius-lg)}
.declension__table,.conjugation__table{border-collapse:collapse;margin-block:.5rem;font-size:var(--step--1)}
.declension__table caption,.conjugation__table caption{text-align:start;font-weight:700;color:var(--text);font-size:var(--step-0);margin-block-end:.3rem}
.declension__table th,.declension__table td,.conjugation__table th,.conjugation__table td{border:1px solid var(--border);padding:.35rem .8rem;text-align:start}
.declension__table thead th,.declension__table tbody th,.conjugation__table thead th,.conjugation__table tbody th{background:var(--surface);font-weight:700;color:var(--text-muted)}
.declension__article{color:var(--text-muted)}
.comparison{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin-block:.5rem;padding:0;font-size:var(--step--1)}
.comparison__item{display:flex;gap:.4ch}
.comparison dt{font-weight:700;color:var(--text-muted)}
.comparison dt::after{content:":"}
.number-forms{margin-block:.5rem;padding:0;font-size:var(--step--1)}
.number-forms__item{display:flex;gap:.6ch;margin-block:.2rem}
.number-forms dt{font-weight:700;color:var(--text-muted);min-inline-size:8ch}
.number-forms dt::after{content:":"}
.number-forms__article{color:var(--text-muted)}
.relations__group{margin-block:.5rem}
.relations__group h3{font-size:var(--step--1);color:var(--text-muted);margin-block:.3rem .2rem}
.relations__list{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .7rem;padding:0;font-size:var(--step--1)}
.example-sentences{margin-block-start:.3rem;color:var(--text-muted);font-size:var(--step--1)}
.example-sentences__sense{margin-block:.6rem .2rem;font-size:var(--step--1);font-weight:700;color:var(--text-muted)}
.grammar{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-block:.5rem;padding:0}
.grammar__item{display:flex;gap:.4ch}
.grammar dt{font-weight:700;color:var(--text-muted)}
.grammar dt::after{content:":"}
.grammar dd{margin:0;font-weight:600}
.info-hint{display:inline-block}
/* Global show/hide of all info-„i" hints (the header toggle flips [data-info-hints] on <html>). */
:root[data-info-hints="off"] .info-hint{display:none}
.info-toggle{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  inline-size:2.2rem;block-size:2.2rem;border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-muted);font-size:1.1rem;line-height:1;padding:0}
.info-toggle:hover{border-color:var(--brand);color:var(--text)}
.info-toggle[aria-pressed="false"]{background:var(--surface-2);color:var(--text-muted);opacity:.7}
.info-hint__icon{cursor:pointer;display:inline-grid;place-items:center;inline-size:1.25em;block-size:1.25em;
  border:1px solid var(--border);border-radius:var(--radius-pill);font-size:.72em;font-weight:700;
  font-style:italic;color:var(--text-muted);list-style:none}
.info-hint__icon::-webkit-details-marker{display:none}
.info-hint[open] .info-hint__icon{background:var(--brand);color:var(--text-on-brand);border-color:transparent}
.info-hint__body{margin-block-start:.4rem;padding:.6rem .8rem;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--step--1);font-weight:400;
  max-inline-size:34rem}
.browse{display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;gap:1.5rem;align-items:start}
@media (max-width:40rem){.browse{grid-template-columns:1fr}}
.browse > h1{grid-column:1 / -1}
.facets{display:flex;flex-direction:column;gap:1rem}
.facet__title{font-size:var(--step-0);margin-block-end:.3rem}
.facets ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.15rem}
.facets a{text-decoration:none;color:var(--text)}
.facets a.is-active{font-weight:700;color:var(--brand)}
.facet__count{color:var(--text-muted);font-size:var(--step--1)}
.browse-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.browse-list a{display:inline-block;padding:.4rem .8rem;border:1px solid var(--border);
  border-radius:var(--radius-md);background:var(--surface);text-decoration:none;color:var(--text)}
.browse-list a:hover{border-color:var(--brand)}

/* ============================ home / hero ============================ */
.hero{display:flex;flex-direction:column;gap:var(--sp-md);
  padding-block:var(--sp-xl) var(--sp-lg);max-inline-size:54rem}
.hero__eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:var(--step--1);
  font-weight:700;color:var(--brand);margin:0}
.hero__title{font-size:var(--step-3);line-height:1.05;margin:0;
  background:linear-gradient(120deg,var(--brand-strong),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__intro{font-size:var(--step-1);color:var(--text-muted);margin:0;max-inline-size:var(--measure)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);margin-block-start:var(--sp-xs)}
.stats{display:flex;flex-wrap:wrap;gap:var(--sp-xl);margin-block-start:var(--sp-md)}
.stat{display:flex;flex-direction:column}
.stat__num{font-size:var(--step-2);font-weight:800;color:var(--brand-strong);line-height:1;margin:0}
.stat__label{order:1;color:var(--text-muted);font-size:var(--step--1);margin-block-start:.2rem}

.feature-grid{list-style:none;display:grid;gap:var(--sp-md);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.feature-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg);box-shadow:var(--shadow-sm);
  border-block-start:.28rem solid var(--brand)}
.feature-card__title{font-size:var(--step-1);margin-block-end:var(--sp-xs)}
.feature-card__body{color:var(--text-muted);margin:0}

/* ============================ search refinements ============================ */
.search input[type="search"]{font-size:var(--step-1)}
.search-results{list-style:none;display:flex;flex-direction:column;gap:var(--sp-xs);
  margin-block-start:var(--sp-lg);padding:0}
.search-result{display:flex;align-items:baseline;gap:var(--sp-sm);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.5rem .9rem;transition:border-color var(--dur) var(--ease)}
.search-result:hover{border-color:var(--brand)}
.search-result__link{font-family:var(--font-lexical);font-size:var(--step-1);
  text-decoration:none;color:var(--text)}
.search-result__lang{color:var(--text-muted);font-size:var(--step--1)}
.search-result__gloss{color:var(--text-muted);font-size:var(--step--1)}
.search__empty{color:var(--text-muted);margin-block-start:var(--sp-lg)}
/* single-language search: selector + box, then the "Erweiterte Suche" disclosure */
.search-bar{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:end}
.search-bar select{font:inherit;padding:.5rem .7rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.search-bar input[type="search"]{flex:1;min-inline-size:12rem}
.advanced-search{margin-block-start:var(--sp-sm);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.advanced-search > summary{cursor:pointer;padding:var(--sp-sm) var(--sp-md);font-weight:600}
.advanced-search__panel{display:flex;flex-direction:column;gap:var(--sp-md);padding:var(--sp-md);border-block-start:1px solid var(--border)}
.field--feature{position:relative}
.search-total{color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--sp-md)}
.search-phonetic{margin-block-start:var(--sp-lg)}
.search-phonetic h2{font-size:var(--step-1)}

/* ============================ didactic panel (word page) ============================ */
.didactics-panel{margin-block:var(--sp-md);border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface);max-inline-size:42rem}
.didactics-panel > summary{cursor:pointer;padding:.6rem .9rem;font-weight:600;color:var(--text);
  list-style-position:inside}
.didactics-panel[open] > summary{border-block-end:1px solid var(--border)}
.didactics-form{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:end;padding:var(--sp-md)}
.didactics-field{display:flex;flex-direction:column;gap:.25rem}
.didactics-field label{font-size:var(--step--1);color:var(--text-muted);font-weight:600}
.didactics-field input[type="checkbox"]{inline-size:1.1rem;block-size:1.1rem}
.didactics-field:has(input[type="checkbox"]){flex-direction:row;align-items:center;gap:.5ch}
.didactics-field select{font:inherit;padding:.4rem .5rem;border:1px solid var(--border);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.didactics-form__apply{padding:.5rem 1rem}

/* ============================ "this word in other languages" ============================ */
.concept-siblings{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-sm);padding:0}
.concept-sibling{display:flex;flex-direction:column;gap:.1rem;position:relative;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.5rem .9rem;transition:border-color var(--dur) var(--ease)}
.concept-sibling:hover{border-color:var(--brand)}
.concept-sibling__lang{color:var(--text-muted);font-size:var(--step--1)}
/* The UI-language name (exonym) under the autonym — a readable anchor for a child who cannot read the
   native script. Same muted treatment as the autonym; the autonym stays first (autonyms first). */
.concept-sibling__exonym{color:var(--text-muted);font-size:var(--step--1)}
.concept-sibling__link{font-family:var(--font-lexical);font-size:var(--step-1);
  text-decoration:none;color:var(--text)}
/* Whole-card click target: the lemma link's hit-area stretches over the entire sibling card (the language
   name + exonym become part of the click), so the whole card opens that language's word page. */
.concept-sibling__link::after{content:"";position:absolute;inset:0}
.concept-sibling__link:hover{text-decoration:underline;text-decoration-thickness:.06em}
/* Hard Rule 11: one honest „KI-Vorschläge, ungeprüft" note for the whole cross-language section — quiet
   and calm, not a badge repeated on every card. */
.concept-siblings__provenance{color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--sp-sm)}
.concept-siblings__empty{color:var(--text-muted);font-style:italic}

/* ============================ Redaktion (editorial backend) ============================ */
[data-redaktion-nav]{align-items:center}
.redaktion-user{display:inline-flex;align-items:center;gap:var(--sp-sm);margin-inline-start:auto}
.redaktion-user__email{color:var(--text-muted);font-size:var(--step--1)}
.redaktion-nav__link{color:var(--text-muted);text-decoration:none;font-weight:600}
.redaktion-nav__link:hover,.redaktion-nav__link[aria-current="page"]{color:var(--brand)}
.redaktion-role{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}

.workqueue{list-style:none;display:grid;gap:var(--sp-md);margin-block-start:var(--sp-xl);padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.workqueue-card{display:flex;flex-direction:column;gap:.2rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-lg);
  box-shadow:var(--shadow-sm);border-block-start:.28rem solid var(--border)}
.workqueue-card__num{font-size:var(--step-3);font-weight:800;line-height:1;color:var(--text)}
.workqueue-card__label{color:var(--text-muted);font-size:var(--step--1);font-weight:600}
.workqueue-card--draft{border-block-start-color:var(--text-muted)}
.workqueue-card--review{border-block-start-color:var(--accent)}
.workqueue-card--gap{border-block-start-color:var(--c-berry-700)}
.workqueue-card--published{border-block-start-color:var(--brand)}

.flash{padding:.7rem 1rem;border-radius:var(--radius-md);border:1px solid var(--border);
  background:var(--surface);margin-block-end:var(--sp-md);max-inline-size:var(--measure)}
.flash--notice{background:var(--brand-surface);border-color:transparent}
.flash--alert{background:var(--accent-surface);border-color:transparent}

/* Redaktion — faceted word list */
.facet-bar{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:end;margin-block:var(--sp-lg);
  padding:var(--sp-md);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md)}
.facet-field{display:flex;flex-direction:column;gap:.25rem}
.facet-field--grow{flex:1;min-inline-size:12rem}
.facet-field label{font-size:var(--step--1);color:var(--text-muted);font-weight:600}
.facet-field select,.facet-field input[type="search"]{font:inherit;padding:.45rem .6rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}

.pos-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2xs);margin-block-end:var(--sp-sm)}
.pos-tab{text-decoration:none;color:var(--text-muted);font-weight:600;font-size:var(--step--1);
  padding:.3rem .7rem;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface)}
.pos-tab:hover{border-color:var(--brand);color:var(--brand)}
.pos-tab--active{background:var(--brand);color:var(--text-on-brand);border-color:transparent}
.pos-tab__count{opacity:.75;font-variant-numeric:tabular-nums}
.facet-total{color:var(--text-muted);font-size:var(--step--1)}

.word-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-xs);padding:0;margin-block:var(--sp-md)}
.word-panel{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-sm);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:.5rem .9rem}
.word-panel:hover{border-color:var(--brand)}
.word-panel__lemma{font-family:var(--font-lexical);font-size:var(--step-1);font-weight:600}
.word-panel__meta{display:inline-flex;gap:.6ch;align-items:baseline;color:var(--text-muted);font-size:var(--step--1)}
.word-panel__pos{font-style:italic}
.word-panel__badges{display:inline-flex;flex-wrap:wrap;gap:var(--sp-2xs);margin-inline-start:auto;align-items:center}
.word-list__empty{color:var(--text-muted);font-style:italic}

.review-state-badge,.provenance-badge,.marker-chip{display:inline-flex;align-items:center;gap:.3em;
  font-size:var(--step--1);font-weight:600;padding:.12rem .5rem;border-radius:var(--radius-pill);
  border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted)}
.review-state-badge--draft{color:var(--text-muted)}
.review-state-badge--needs_source,.review-state-badge--needs_linguistic_review,
.review-state-badge--needs_community_review{background:var(--accent-surface);color:var(--accent);border-color:transparent}
.review-state-badge--published{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
.provenance-badge--ai{background:var(--c-berry-700);color:#fff;border-color:transparent}
.provenance-badge--imported{background:var(--c-sky-700);color:#fff;border-color:transparent}
.marker-chip{background:var(--accent-surface);color:var(--accent);border-color:transparent;font-family:ui-monospace,Menlo,monospace}

.pager{display:flex;gap:var(--sp-md);align-items:center;margin-block:var(--sp-lg)}
.pager__info{color:var(--text-muted);font-size:var(--step--1)}

/* Redaktion — word editor */
.words-header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-md);flex-wrap:wrap}
.word-panel__link{text-decoration:none;color:inherit}
.word-panel__link:hover .word-panel__lemma{text-decoration:underline;text-decoration-thickness:.06em}

.word-editor{display:flex;flex-direction:column;gap:var(--sp-lg);margin-block-start:var(--sp-lg)}
.tc-card{display:grid;gap:var(--sp-sm) var(--sp-xl);grid-template-columns:1fr;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-lg)}
@media (min-width:52rem){.tc-card{grid-template-columns:minmax(11rem,1fr) 2.2fr}}
.tc-card__title{font-size:var(--step-1);margin:0}
.tc-card__desc{color:var(--text-muted);font-size:var(--step--1);margin-block-start:.3rem}
.tc-card__body{display:flex;flex-direction:column;gap:var(--sp-md);min-inline-size:0}

.field{display:flex;flex-direction:column;gap:.3rem}
.field > label{font-weight:600;font-size:var(--step--1);color:var(--text-muted)}
.word-editor input[type="text"],.word-editor select,.word-editor textarea{
  font:inherit;padding:.5rem .7rem;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);max-inline-size:38rem}
.field-row{display:flex;flex-wrap:wrap;gap:var(--sp-md)}
.field-row .field{flex:1;min-inline-size:8rem}
.field-readonly{color:var(--text-muted)}

.nested-rows{display:flex;flex-direction:column;gap:var(--sp-xs)}
.nested-row{display:flex;gap:var(--sp-xs);align-items:center}
.nested-row__field{flex:1;min-inline-size:0}
.nested-row__remove{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-sm);
  inline-size:2rem;block-size:2rem;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1}
.nested-row__remove:hover{border-color:var(--accent);color:var(--accent)}

.markers-field{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md);
  display:flex;flex-wrap:wrap;gap:var(--sp-md)}
.markers-field legend{font-weight:600;font-size:var(--step--1);color:var(--text-muted);padding-inline:.3rem}
.marker-check{display:inline-flex;align-items:center;gap:.4ch;font-family:ui-monospace,Menlo,monospace;font-size:var(--step--1)}
.word-editor__actions{display:flex;gap:var(--sp-md);flex-wrap:wrap;margin-block-start:var(--sp-sm)}

/* Redaktion — word detail (show) */
.word-show__head{display:flex;flex-direction:column;gap:var(--sp-sm);margin-block-end:var(--sp-lg)}
.word-show h1{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;line-height:1.05;margin:0}
.word-show__badges{display:flex;flex-wrap:wrap;gap:var(--sp-2xs);align-items:center}
.word-show__actions{display:flex;gap:var(--sp-md);flex-wrap:wrap;align-items:center;margin-block-start:var(--sp-xl)}
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0}
.chip-list li{font-family:var(--font-lexical);background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:.4rem .8rem}
.meaning-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2xs);max-inline-size:var(--measure)}
.meaning-list li{background:var(--surface);border-inline-start:.28rem solid var(--brand);border-radius:var(--radius-sm);padding:.5rem .8rem}

/* Classroom — teacher "Meine Klassen" + the no-login pupil-view banner */
.classroom-banner{display:flex;flex-wrap:wrap;gap:var(--sp-md);align-items:center;justify-content:space-between;
  background:var(--brand);color:var(--text-on-brand);border-radius:var(--radius-md);
  padding:var(--sp-sm) var(--sp-md);margin-block-end:var(--sp-md)}
.classroom-banner__label{font-weight:700}
.classroom-banner__actions{display:flex;gap:var(--sp-sm);align-items:center}
.classroom-banner__leave{background:var(--surface);color:var(--text);border-color:transparent}
.classroom-banner__dismiss{background:transparent;border:0;color:var(--text-on-brand);font-size:1.4rem;
  line-height:1;cursor:pointer;padding:.1rem .4rem;border-radius:var(--radius-sm)}
.classroom-banner__dismiss:hover{background:rgba(255,255,255,.18)}
.group-list{list-style:none;padding:0;display:grid;gap:var(--sp-md);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.group-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-md);
  display:flex;flex-direction:column;gap:var(--sp-sm)}
.group-card__name{margin:0;font-size:var(--step-1)}
.group-card__actions{display:flex;gap:var(--sp-sm);flex-wrap:wrap;margin-block-start:auto}
.group-code,.share-link code{font-weight:700;letter-spacing:.05em;
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.1rem .45rem}
.share-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:var(--sp-md);margin-block:var(--sp-md);max-inline-size:var(--measure)}
.share-link{font-size:var(--step-1);overflow-wrap:anywhere}

/* Friendly error pages */
.error-page{text-align:center;max-inline-size:var(--measure);margin-inline:auto;padding-block:var(--sp-2xl)}
.error-page__code{font-size:var(--step-5,4rem);font-weight:800;color:var(--brand);margin:0;line-height:1}
.error-page h1{margin-block:var(--sp-sm) var(--sp-md)}
.error-page__body{color:var(--text-muted)}
.error-page__actions{display:flex;flex-wrap:wrap;gap:var(--sp-sm);justify-content:center;margin-block-start:var(--sp-lg)}

/* forced-colors safety */
@media (forced-colors:active){
  .pos,.word-card,article section[aria-labelledby="forms-heading"] li,
  .language-card,.badge,.btn,.feature-card,.theme-toggle,.search-result,.concept-sibling,
  .workqueue-card,.flash,.word-panel,.pos-tab,.review-state-badge,.provenance-badge,.marker-chip,
  .tc-card,.markers-field,.nested-row__remove,.chip-list li{border:1px solid CanvasText}
  .hero__title{-webkit-text-fill-color:CanvasText;color:CanvasText}
}

/* editorial 4-eyes review queue */
.review-queue{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--sp-2xs);max-inline-size:var(--measure)}
.review-queue__item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);padding:.6rem 1rem}
.review-queue__word{display:flex;align-items:center;gap:.5rem;font-weight:600}
.review-queue__lang{color:var(--text-muted);font-size:var(--step--1);font-weight:400}
.review-queue__progress{color:var(--text-muted);font-size:var(--step--1);margin:0;margin-inline-start:auto}
.review-queue__actions{display:flex;gap:.4rem}

/* ============================ learner home ============================ */
.home-hero{max-inline-size:46rem;margin-inline:auto;text-align:center;padding-block:var(--sp-lg) 0}
.home-hero__title{font-size:var(--step-4);line-height:1.08;margin:0}
.home-hero__intro{color:var(--text-muted);font-size:var(--step-1);margin:var(--sp-sm) auto 0;max-inline-size:36rem}
.home-search{position:relative;display:flex;align-items:center;gap:var(--sp-xs);max-inline-size:40rem;
  margin:var(--sp-lg) auto 0;background:var(--surface);border:2px solid var(--border);
  border-radius:var(--radius-pill);padding:.4rem .4rem .4rem 1rem;box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease)}
.home-search:focus-within{border-color:var(--brand)}
.home-search__icon{font-size:1.2rem;line-height:1;flex:none}
.home-search__input{flex:1;min-inline-size:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:var(--step-1);padding-block:.5rem}
.home-search__input:focus{outline:none}
.home-search__submit{flex:none;border-radius:var(--radius-pill)}
.home-hero__advanced{text-align:center;margin-block-start:var(--sp-sm)}

/* live suggestions (progressive enhancement; hidden until the controller fills it) */
.suggestions{position:absolute;inset-inline:0;inset-block-start:calc(100% + var(--sp-2xs));z-index:20;
  list-style:none;margin:0;padding:var(--sp-2xs);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:start}
.suggestions[hidden]{display:none}
.suggestion{border-radius:var(--radius-sm)}
.suggestion > a{display:flex;align-items:center;gap:var(--sp-xs);padding:.5rem .7rem;min-block-size:44px;
  text-decoration:none;color:var(--text);border-radius:var(--radius-sm)}
.suggestion[aria-selected=true] > a,.suggestion > a:hover{background:var(--brand-surface);color:var(--brand-strong)}
/* a gate-safe published thumbnail on the leading side; honest absence (no <img>) when the word has none (HR3) */
.suggestion__thumb{flex:0 0 auto;inline-size:40px;block-size:40px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface-2)}
.suggestion__text{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-xs);min-inline-size:0}
.suggestion__lemma{font-weight:600}
/* the typed search string, highlighted inside each suggestion (not the browser's default yellow mark) */
.suggestion__match{background:var(--brand-surface);color:var(--brand-strong);border-radius:2px;
  padding-inline:1px;font-weight:800}
.suggestion[aria-selected=true] .suggestion__match{background:var(--surface);color:var(--brand-strong)}
/* an inflected form routes to its lemma (besser → gut); a fault-tolerant hit is tagged „klanglich ähnlich" */
.suggestion__base{color:var(--text-muted);font-size:var(--step--1);font-weight:400;margin-inline-start:.35ch}
.suggestion__sounds{color:var(--brand-strong);font-size:var(--step--2);font-weight:600;
  background:var(--brand-surface);border-radius:999px;padding:.05em .6ch;margin-inline-start:.35ch;white-space:nowrap}
.suggestion[aria-selected=true] .suggestion__base{color:inherit}
.suggestion[aria-selected=true] .suggestion__sounds{background:var(--surface)}
.suggestion__gloss{color:var(--text-muted);font-size:var(--step--1)}
.suggestion[aria-selected=true] .suggestion__gloss{color:inherit}

.wotd{max-inline-size:46rem;margin-inline:auto;position:relative}
/* dismiss (×, JS-only) sits in the card's top-inline-end corner; restore replaces the card when hidden */
.wotd__dismiss{position:absolute;inset-block-start:.6rem;inset-inline-end:.6rem;z-index:1;
  inline-size:2.5rem;block-size:2.5rem;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-muted);font-size:1.3rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.wotd__dismiss:hover{border-color:var(--brand);color:var(--brand-strong)}
.wotd__restore{display:inline-flex;align-items:center;gap:var(--sp-2xs);font:inherit;cursor:pointer;
  color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);
  border-radius:var(--radius-pill);padding:.55rem 1.1rem}
.wotd__restore:hover{border-color:var(--brand);color:var(--brand-strong)}
/* honour the hidden attribute — the display rules above would otherwise override the UA default */
.wotd__dismiss[hidden],.wotd__restore[hidden]{display:none}
.wotd-card{background:linear-gradient(135deg,var(--brand-surface),var(--surface));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm);text-align:center}
.wotd-card__badge{color:var(--brand-strong);font-weight:700;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.04em;margin:0}
.wotd-card__lemma-link{text-decoration:none}
.wotd-card__lemma{display:inline-block;font-family:var(--font-lexical);font-size:var(--step-4);
  font-weight:600;color:var(--text);margin-block:.2rem}
/* The computed article (der/die/das · la) leads the lemma, smaller and muted (mirrors the word hero). */
.wotd-card__article{color:var(--text-muted);font-weight:400;font-size:.5em}
.wotd-card__lemma-link:hover .wotd-card__lemma{text-decoration:underline;text-decoration-thickness:.06em}
.wotd-card__gloss{color:var(--text-muted);margin:.2rem auto 0;max-inline-size:30rem}
.wotd-card__more{display:inline-block;margin-block-start:var(--sp-sm);font-weight:700}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-md);flex-wrap:wrap}
.section-head__link{font-weight:700;text-decoration:none;white-space:nowrap}
.section-head__link:hover{text-decoration:underline}

.tile-grid{list-style:none;display:grid;gap:var(--sp-sm);padding:0;margin-block-start:var(--sp-md);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr))}
.tile{display:flex;align-items:center;gap:var(--sp-sm);text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:.7rem .9rem;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.tile:hover{transform:translateY(-2px);border-color:var(--brand)}
.tile__icon{font-size:1.6rem;line-height:1;flex:none}
.tile__label{font-weight:700;flex:1}
.tile__count{color:var(--text-muted);font-size:var(--step--1);font-variant-numeric:tabular-nums}

.letter-grid{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0;margin-block-start:var(--sp-md)}
.letter-tile{display:inline-grid;place-items:center;inline-size:2.8rem;block-size:2.8rem;text-decoration:none;
  color:var(--text);font-weight:700;font-size:var(--step-0);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-md);
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.letter-tile:hover{transform:translateY(-2px);border-color:var(--brand);background:var(--brand-surface)}

.home-shield{margin-block-start:var(--sp-2xl);text-align:center;color:var(--text-muted);font-size:var(--step--1)}
.home-shield p{max-inline-size:none;margin:0}

@media (max-width:40rem){
  .home-search{flex-wrap:wrap}
  .home-search__submit{inline-size:100%}
}

/* ============================ word page v2 ============================ */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.5ch;align-items:center;color:var(--text-muted);
  font-size:var(--step--1);margin-block-end:var(--sp-md)}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.breadcrumb__current{color:var(--text);font-weight:600}

.word-hero{display:flex;flex-wrap:wrap;gap:var(--sp-lg);align-items:flex-start;justify-content:space-between;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm)}
.word-hero__body{flex:1 1 16rem;min-inline-size:0}
.word-hero__body .pos{margin-block-end:var(--sp-sm)}
.word-hero__lemma{font-family:var(--font-lexical);font-size:var(--lemma);font-weight:600;
  line-height:1.05;letter-spacing:-.01em;margin:0 0 var(--sp-sm);overflow-wrap:break-word;min-inline-size:0}
/* the German article (das Kind) leads the lemma, muted + smaller — a helper word, not the headword itself */
.word-hero__article{color:var(--text-muted);font-weight:400;font-size:.5em}

/* Lineatur — a handwriting aid behind the lemma (Schreiblinien / Karo). Display only; the lemma text is
   untouched (Hard Rule 2). CSS-drawn (the prototype's approach) until real Schreiblinien assets ship. */
.lineatur--lines,.lineatur--grid{
  display:inline-block;padding:.28em .4em;border-radius:var(--radius-sm);
  background-color:var(--surface-2);background-repeat:no-repeat}
.lineatur--lines{
  --rule:color-mix(in oklab,var(--brand) 55%,transparent);
  --rule-soft:color-mix(in oklab,var(--brand) 30%,transparent);
  background-image:linear-gradient(var(--rule),var(--rule)),
    repeating-linear-gradient(90deg,var(--rule-soft) 0 7px,transparent 7px 14px),
    linear-gradient(var(--rule),var(--rule));
  background-size:100% 2px,100% 1px,100% 2px;
  background-position:0 .28em,0 50%,0 calc(100% - .28em)}
.lineatur--grid{
  --rule:color-mix(in oklab,var(--brand) 28%,transparent);
  background-image:repeating-linear-gradient(0deg,var(--rule) 0 1px,transparent 1px .92em),
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px .92em)}
/* The image column is constrained to the picture's display width — never the image's larger INTRINSIC
   width, which `flex:0 0 auto` (basis auto) used to adopt, starving the lemma column so a long word like
   „Eichhörnchen" overflowed under the picture. The picture stays inline-end (right on LTR pages) and
   stacks below on narrow screens (see the @media block). */
.word-hero__media{flex:0 0 auto;inline-size:min(220px,40%)}
.word-image{max-inline-size:min(100%,220px);height:auto;display:block;
  border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff}
.word-image--pending{display:grid;place-items:center;inline-size:clamp(150px,28vw,210px);aspect-ratio:1;
  background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 10px,transparent 10px,transparent 20px);
  border:2px dashed var(--border);color:var(--text-muted);font-size:var(--step--1);text-align:center;padding:1rem}

/* content sections as cards — but NOT the reused home blocks (search hero, word-of-the-day, discover
   tiles). On /languages/:iso those sit as article > section and would otherwise get a card around them,
   boxing the search pill / the green WoTD card / the tiles (a box-in-box) — unlike the home page, where
   the same blocks sit card-less on the page background. Excluding them makes both pages render them the
   same. (The article > section > h2 rules below still apply to them on purpose: they suppress the
   decorative underline on the centred search heading.) */
article > section:not(.home-hero):not(.wotd):not(.home-discover){
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);box-shadow:var(--shadow-sm);margin-block-start:var(--sp-lg)}
article > section > h2{margin-block-start:0}
article > section > h2::after{display:none}

/* chips (themes / categories / keywords) */
.chip-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0;margin:0}
.chip{display:inline-block;padding:.3rem .8rem;border-radius:var(--radius-pill);font-weight:600;
  font-size:var(--step--1);background:var(--surface-2);border:1px solid var(--border);color:var(--text);text-decoration:none}
a.chip:hover{border-color:var(--brand);color:var(--brand-strong)}
.chip--theme{background:var(--brand-surface);color:var(--brand-strong);border-color:transparent}
.chip--category{background:var(--accent-surface);color:var(--accent);border-color:transparent}
.belongs__group{margin-block:.5rem}
.belongs__group h3{font-size:var(--step--1);color:var(--text-muted);margin-block:.4rem .3rem}

@media (max-width:40rem){
  .word-hero{flex-direction:column}
  .word-hero__media{align-self:center}
}

/* ============================ search filter rail ============================ */
.search-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--sp-xl);align-items:start;margin-block-start:var(--sp-lg)}
@media (max-width:52rem){
  .search-layout{grid-template-columns:1fr}
  .filter-rail{order:2} /* results before filters on mobile */
}
.filter-rail{display:flex;flex-direction:column;gap:var(--sp-sm);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-md);
  box-shadow:var(--shadow-sm);position:sticky;inset-block-start:5rem}
.filter-rail__title{font-size:var(--step-1);margin:0}
.active-filters{display:flex;flex-wrap:wrap;gap:var(--sp-2xs);align-items:center}
.chip--removable{display:inline-flex;align-items:center;gap:.4ch;background:var(--brand);
  color:var(--text-on-brand);border-color:transparent}
.chip--removable .chip__x{font-size:1.15em;line-height:1;opacity:.85}
/* Solid-brand "active filter" pills (per the handoff): hover darkens to brand-strong like the primary
   button, a clear "click to remove" affordance. `a.` matches a.chip:hover's specificity so this wins. */
a.chip--removable:hover{background:var(--brand-strong);color:var(--text-on-brand);border-color:transparent}
a.chip--removable:hover .chip__x{opacity:1}
.active-filters__clear{font-size:var(--step--1);font-weight:600;margin-inline-start:auto}
.filter-group{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2)}
.filter-group > summary{cursor:pointer;padding:.5rem .7rem;font-weight:700;font-size:var(--step--1);list-style-position:inside}
.filter-group__body{display:flex;flex-direction:column;gap:var(--sp-sm);padding:.7rem;border-block-start:1px solid var(--border)}
.filter-group .field{display:flex;flex-direction:column;gap:.25rem}
.filter-group .field label{font-size:var(--step--1);color:var(--text-muted);font-weight:600}
.filter-group .field input,.filter-group .field select{font:inherit;padding:.4rem .6rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);inline-size:100%}
.filter-rail__apply{inline-size:100%;justify-content:center}
.search-main{min-inline-size:0}

/* ===================== advanced search (handoff redesign) ===================== */
.search-hero{max-inline-size:46rem;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--sp-sm)}
.search-hero__lang{align-self:center}
.search-hero__lang select{font:inherit;padding:.4rem .8rem;border:1px solid var(--border);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.search-pill{display:flex;align-items:center;gap:var(--sp-xs);background:var(--surface);border:2px solid var(--border);
  border-radius:var(--radius-pill);padding:.35rem .35rem .35rem .9rem;box-shadow:var(--shadow-sm)}
.search-pill:focus-within{border-color:var(--brand)}
.search-pill__icon{font-size:1.2rem;line-height:1;flex:none}
.search-pill__input{flex:1;min-inline-size:0;border:0;background:transparent;color:var(--text);font-size:var(--step-1);padding:.4rem .2rem}
.search-pill__input:focus{outline:none}
.search-pill__submit{flex:none;border-radius:var(--radius-pill)}
.search-didyoumean{color:var(--text-muted);min-block-size:1.5em;margin:0}
.search-didyoumean__link{font-weight:800;color:var(--brand-strong);text-decoration:underline;text-underline-offset:2px;margin-inline:.3ch}

.pos-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-xs);margin-block:var(--sp-lg) var(--sp-md)}
.pos-pill{display:inline-flex;align-items:center;gap:.5ch;text-decoration:none;color:var(--text);font-weight:700;
  font-size:var(--step--1);padding:.45rem .9rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface)}
.pos-pill:hover{border-color:var(--brand);color:var(--brand-strong)}
.pos-pill--active{background:var(--brand);color:var(--text-on-brand);border-color:transparent;font-weight:800}
.pos-pill__count{opacity:.75;font-variant-numeric:tabular-nums}
.pos-pill--active .pos-pill__count{opacity:.9}

.search-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--sp-xl);align-items:start;margin-block-start:var(--sp-sm)}
@media (max-width:52rem){
  .search-grid{grid-template-columns:1fr}
  .search-rail{order:2} /* results before filters on mobile */
}
.search-rail{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);position:sticky;inset-block-start:5rem;overflow:hidden}
.search-rail__head{display:flex;align-items:center;gap:.5ch;margin:0;padding:.6rem .8rem;font-weight:800;
  background:var(--surface-2);border-block-end:1px solid var(--border)}
.search-rail__body{display:flex;flex-direction:column;gap:var(--sp-sm);padding:var(--sp-sm)}
.search-rail__apply{inline-size:100%;justify-content:center;margin-block-start:.2rem}

.topic-search{font:inherit;inline-size:100%;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text)}
.topic-empty{color:var(--text-muted);font-size:var(--step--1);margin:.2rem 0 0}
/* „Wo im Wort?" segmented control: pick one position; :has(:checked) fills it natively (works no-JS) */
.segmented{display:flex;border:1px solid var(--border);border-radius:var(--radius-pill);overflow:hidden;margin:0;padding:0;min-inline-size:0}
.seg{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;text-align:center;
  font-size:var(--step--1);font-weight:600;padding:.4rem .3rem;color:var(--text-muted);background:var(--surface)}
.seg + .seg{border-inline-start:1px solid var(--border)}
.seg:hover{color:var(--brand-strong)}
.seg:has(:checked){background:var(--brand);color:var(--text-on-brand)}
.seg:has(:focus-visible){outline:3px solid var(--focus);outline-offset:-3px}
.chip-choice-list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2xs);padding:0;margin:.4rem 0 0;max-block-size:13rem;overflow:auto}
.chip-choice{display:inline-flex;align-items:center;gap:.3ch;cursor:pointer;font-size:var(--step--1);font-weight:600;
  padding:.35rem .7rem;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.chip-choice:hover{border-color:var(--brand)}
.chip-choice:has(:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.chip-choice--on{background:var(--brand-surface);border-color:var(--brand);color:var(--brand-strong)}
.chip-choice__count{opacity:.7;font-variant-numeric:tabular-nums}

.search-results__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-sm);margin-block-end:var(--sp-md)}
.search-results__count{font-size:var(--step-2);margin:0}
.search-results__lang{color:var(--text-muted);margin:0}
.result-cards{list-style:none;display:flex;flex-direction:column;gap:var(--sp-sm);padding:0;margin:0}
.result-card{display:flex;align-items:center;gap:var(--sp-md);text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-sm) var(--sp-md);box-shadow:var(--shadow-sm);transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.result-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.result-card__text{flex:1;min-inline-size:0;display:flex;flex-direction:column;gap:.15rem}
.result-card__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5ch}
.result-card__lemma{font-family:var(--font-lexical);font-weight:600;font-size:var(--step-1)}
.result-card__pos{font-size:var(--step--2);font-weight:700;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-pill);padding:.05rem .5rem}
.result-card__gloss{color:var(--text-muted);font-size:var(--step--1);overflow-wrap:anywhere}
/* picture to the RIGHT — not every word has one, so the lemmas stay left-aligned and consistent */
.result-card__thumb{flex:none;inline-size:3.5rem;block-size:3.5rem;border-radius:var(--radius-md);overflow:hidden;
  background:var(--brand-surface);display:grid;place-items:center}
.result-card__thumb img{inline-size:100%;block-size:100%;object-fit:cover}

.search-empty{text-align:center;color:var(--text-muted);border:2px dashed var(--border);border-radius:var(--radius-lg);padding:var(--sp-2xl) var(--sp-md)}
.search-empty__icon{font-size:2rem;margin:0}
.search-empty__title{font-weight:700;margin-block:.4rem 0}

/* ============================ Themen browse (Stöbern) ============================ */
.themes-layout{display:grid;grid-template-columns:1fr 16rem;gap:var(--sp-xl);align-items:start;margin-block-start:var(--sp-lg)}
@media (max-width:52rem){.themes-layout{grid-template-columns:1fr}}
.themes-main{min-inline-size:0}
.tile--active{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.theme-words{margin-block-start:var(--sp-xl)}
.theme-words__count{color:var(--text-muted);font-weight:400;font-size:var(--step-0)}
.themes-categories{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-md);box-shadow:var(--shadow-sm);position:sticky;inset-block-start:5rem}
.themes-categories h2{font-size:var(--step-1);margin-block:0 var(--sp-sm)}
.category-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.category-link{display:flex;justify-content:space-between;gap:.5ch;text-decoration:none;color:var(--text);
  padding:.3rem .5rem;border-radius:var(--radius-sm)}
.category-link:hover{background:var(--surface-2);color:var(--brand-strong)}
.category-link.is-active{background:var(--brand-surface);color:var(--brand-strong);font-weight:700}
.category-link__count{color:var(--text-muted);font-size:var(--step--1);font-variant-numeric:tabular-nums}

/* ============================ language directory: filter + word count ============================ */
.language-filter__input{inline-size:min(100%,28rem);font:inherit;font-size:var(--step-0);
  margin-block:var(--sp-md) var(--sp-sm);padding:.7rem 1rem;border:2px solid var(--border);
  border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.language-filter__input:focus-visible{border-color:var(--brand)}
.language-card__count{margin:0;color:var(--brand-strong);font-weight:700;font-size:var(--step--1);
  font-variant-numeric:tabular-nums}
/* „noch in Vorbereitung" — registrierte, aber leere Sprache (von der Community zu befüllen, HR3) /
   "in preparation" — a registered but empty language, awaiting the community's own words. */
.language-card__pending{margin:0;color:var(--text-muted);font-size:var(--step--1);font-style:italic;
  display:flex;gap:.4ch;align-items:baseline}
.language-profile__count{color:var(--brand-strong);font-weight:700;font-variant-numeric:tabular-nums;margin:0}

/* ============================ teacher dashboard ============================ */
.group-form{max-inline-size:48rem;display:flex;flex-direction:column;gap:var(--sp-lg)}
.group-form fieldset{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-md);margin:0}
.group-form legend{font-weight:700;padding-inline:.4rem}
.group-form__grid{display:grid;gap:var(--sp-md);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.group-form .field select,.group-form .field input[type=text]{font:inherit;inline-size:100%;padding:.5rem .7rem;
  border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--text)}
.badge--internal{background:var(--surface-2);color:var(--text-muted);margin-inline-start:.5ch}
.preset-cards{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-block:var(--sp-xs)}
.preset-card{font:inherit;font-weight:700;cursor:pointer;padding:.5rem 1rem;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.preset-card:hover{border-color:var(--brand)}
.preset-card--active{border-color:var(--brand);background:var(--brand-surface);color:var(--brand-strong)}
.share-card__qr{inline-size:fit-content;background:#fff;padding:.6rem;border-radius:var(--radius-md);
  border:1px solid var(--border);margin-block:var(--sp-sm)}
.share-card__qr svg{display:block;inline-size:clamp(120px,40vw,160px);block-size:auto}
.share-card__link{display:flex;flex-wrap:wrap;gap:var(--sp-xs);align-items:center;margin-block:var(--sp-sm)}
.share-link{flex:1;min-inline-size:0;overflow-wrap:anywhere;background:var(--surface-2);
  border:1px dashed var(--border);border-radius:var(--radius-sm);padding:.4rem .6rem;
  font-family:ui-monospace,Menlo,monospace;font-size:var(--step--1)}
.group-detail__preset{color:var(--text-muted)}
.pupil-preview__frame{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-lg) var(--sp-xl);text-align:center;max-inline-size:32rem;box-shadow:var(--shadow-sm) inset}
.pupil-preview__lemma{font-size:var(--lemma);line-height:1.25;margin-block:var(--sp-sm)}