/* DE: Theme-Toggle, Buttons, Grammatik-Tabellen (Komparation/Prinzipalformen/Perfekt), Varietaeten-Kontrast, Info-Hints.
   EN: Theme toggle, buttons, grammar tables (comparison/principal parts/perfect), variety contrast, info hints. */

/* ============================ 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__icon{margin-inline-end:.35rem;font-size:.95em;line-height:1}
/* „⚙ Einstellungen"-Menü (#87): natives <details>-Aufklappmenü im Header (no-JS, tastaturbedienbar), Muster
   wie .nav-more. Bündelt Seitensprache + Darstellung; die Wörterbuch-Sprache ist bewusst NICHT hier. */
.settings-menu{position:relative}
.settings-menu__summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.35rem;
  min-block-size:44px;min-inline-size:44px;padding:.3rem .5rem}
.settings-menu__summary::-webkit-details-marker{display:none}
.settings-menu__icon{inline-size:1.3em;block-size:1.3em;flex:none;fill:currentColor}
.settings-menu__label{font-size:var(--step--1)}
.settings-menu__panel{display:flex;flex-direction:column;gap:var(--sp-sm);padding:var(--sp-sm) 0}
.settings-menu__heading{margin:0 0 .35rem;font-size:var(--step--1);color:var(--text-muted);letter-spacing:.04em}
.settings-menu__row{display:flex;align-items:center;gap:.5rem}
.settings-menu__row-label{font-size:var(--step--1)}
@media (min-width:48rem){
  .settings-menu__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .settings-menu__panel{position:absolute;inset-block-start:100%;inset-inline-end:0;z-index:30;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
    padding:var(--sp-md);min-inline-size:15rem;box-shadow:0 6px 18px rgb(0 0 0 / 12%)}
}
.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)}
/* Adjective comparison (Positiv · Komparativ · Superlativ) — a two-column grid so the degrees align in a clean
   column (matching the verb principal parts), which also keeps the multi-word periphrastic forms („more
   beautiful") tidy instead of wrapping mid-row. `display:contents` lets each dt/dd pair flow into the grid. */
.comparison{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.4ch;margin-block:.5rem;padding:0;font-size:var(--step--1)}
.comparison__item{display:contents}
.comparison dt{font-weight:700;color:var(--text-muted)}
.comparison dt::after{content:":"}
.comparison__form{margin:0;font-family:var(--font-lexical);font-weight:600}
.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)}
/* English verb principal parts (Grundform · 3. Person · Simple Past · Partizip · -ing). A two-column grid so
   the labels and the forms each align in a clean column (the form in the lexical font so the word stands out)
   — `display:contents` lets each dt/dd pair flow into the shared grid. */
.verb-forms{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.4ch;margin-block:.5rem;padding:0;font-size:var(--step--1)}
.verb-forms__item{display:contents}
.verb-forms__label{font-weight:700;color:var(--text-muted)}
.verb-forms__label::after{content:":"}
.verb-forms__form{margin:0;font-family:var(--font-lexical);font-weight:600}
/* Perfekt block under the conjugation table — shows HOW the perfect is formed (auxiliary haben/sein + Partizip II).
   The auxiliary choice is the didactic point, so it gets a quiet brand-accent emphasis; the example reads as a
   small worked phrase („er hat gespielt") in the lexical font. */
.perfect{margin-block:.7rem;padding:.6rem .8rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.perfect__heading{margin:0 0 .25rem;font-size:var(--step-0);font-weight:700;color:var(--text)}
.perfect__sub{font-weight:400;color:var(--text-muted);font-size:var(--step--1)}
.perfect__formed{margin:0 0 .15rem;font-size:var(--step--1);color:var(--text-muted)}
.perfect__auxiliary{color:var(--brand,var(--accent,var(--text)));font-weight:700}
.perfect__example{margin:0;font-size:var(--step-0)}
.perfect__pronoun{color:var(--text-muted)}
.perfect__aux-form{color:var(--brand,var(--accent,var(--text)))}
.perfect__participle{font-family:var(--font-lexical);font-weight:600}
/* Pluricentric contrast (sitzen/liegen/stehen: de-AT/de-CH „ist gesessen") — a quieter line under the lead. */
.perfect__regional{margin:.3rem 0 0;font-size:var(--step--1)}
.perfect__regional-label{color:var(--text-muted)}
.perfect__regional .perfect__example{font-size:var(--step--1)}
/* „The same thing, a different word in another variety" (British lift ↔ American elevator) — a label : linked-word
   grid like the verb principal parts; a quiet ✦ provenance note below when an entry is AI-unreviewed. */
.variety-synonyms__list{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1.4ch;margin-block:.5rem;padding:0;font-size:var(--step--1)}
.variety-synonyms__item{display:contents}
.variety-synonyms__label{font-weight:700;color:var(--text-muted)}
.variety-synonyms__label::after{content:":"}
.variety-synonyms__word{margin:0;font-family:var(--font-lexical);font-weight:600}
.variety-synonyms__provenance{color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--sp-sm)}
/* British „colour" vs American „color" — the same word written differently per national variety (label : form) */
/* „Aktiv führt + Kontrast": the active variety's spelling leads (larger), the rest fold into a muted „auch:"
   line. Nothing is hidden — contrast is the lesson. */
.spelling-variants{margin-block:.5rem;padding:0}
.spelling-variants__group + .spelling-variants__group{margin-block-start:.5rem}
.spelling-variants__active{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.6ch;font-size:var(--step-0)}
.spelling-variants__line{margin:.15rem 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:.6ch;font-size:var(--step--1)}
.spelling-variants__also{margin:.15rem 0 0;color:var(--text-muted);font-size:var(--step--1)}
.spelling-variants__form{font-family:var(--font-lexical)}
.spelling-variants__active .spelling-variants__form{font-weight:600}
.spelling-variants__label{color:var(--text-muted);font-size:var(--step--1)}
/* the variety switcher in the hero — the active variety is marked, the others are a one-tap ?variety= switch.
   Real GET links (progressive enhancement); the active one is a filled pill, the rest plain. */
.word-variety{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4ch .6ch;margin:calc(-1 * var(--sp-2xs)) 0 var(--sp-xs)}
.word-variety__cue{color:var(--text-muted);font-size:var(--step--1);font-weight:600}
.word-variety__option{display:inline-flex;align-items:center;min-block-size:1.5rem;padding:.3rem .6rem;
  border-radius:var(--radius-pill);font-size:var(--step--1);text-decoration:none;color:var(--link)}
.word-variety__option:hover{background:var(--surface-2)}
.word-variety__option--active{background:var(--brand-surface);color:var(--brand-strong);font-weight:700}
.word-variety__option--active:hover{background:var(--brand-surface)}
/* inline lexeme lead: the active variety uses a different WORD (en-US „elevator" for „lift") — shown prominently
   inline, no redirect. A quiet brand-tinted line; the word itself is the lexical font + link. */
.word-variety-lexeme{margin:calc(-1 * var(--sp-2xs)) 0 var(--sp-xs);color:var(--text-muted);font-size:var(--step--1)}
.word-variety-lexeme__word{font-family:var(--font-lexical);font-weight:700;color:var(--brand-strong);text-decoration:none}
.word-variety-lexeme__word:hover{text-decoration:underline;text-underline-offset:2px}
.word-variety-lexeme__ai{color:var(--text-muted)}
/* the link from the word page to the contrastive compare view */
.word-compare-link{margin-block:var(--sp-xs)}
.word-compare-link__a{font-weight:700;color:var(--link)}
/* „Varietäten vergleichen": the contrastive view — a per-variety spelling table + the lexical-sibling list */
.variety-compare{max-inline-size:var(--measure,42rem);margin-inline:auto}
.variety-compare__heading{font-size:var(--step-2);margin-block:var(--sp-sm) var(--sp-md)}
.variety-compare > section{margin-block-end:var(--sp-lg)}
.variety-compare__table{border-collapse:collapse;inline-size:100%;margin-block-start:var(--sp-xs)}
.variety-compare__table th,.variety-compare__table td{text-align:start;padding:.4rem .6rem;border-block-end:1px solid var(--border)}
.variety-compare__table thead th{font-size:var(--step--1);color:var(--text-muted)}
.variety-compare__table tbody th{font-weight:700;color:var(--brand-strong)}
.variety-compare__form{font-family:var(--font-lexical);font-size:var(--step-0)}
.variety-compare__list{display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-lg);margin:var(--sp-xs) 0 0;padding:0}
.variety-compare__item{display:flex;flex-direction:column}
.variety-compare__item dt{font-weight:700;color:var(--brand-strong);font-size:var(--step--1)}
.variety-compare__item dd{margin:0;font-family:var(--font-lexical)}
.variety-compare__here{font-family:var(--font-ui);color:var(--text-muted);font-size:var(--step--2)}
.variety-compare__provenance{color:var(--text-muted);font-size:var(--step--1);margin-block-start:var(--sp-xs)}
.variety-compare__back{margin-block-start:var(--sp-lg)}
/* Word relations + „typische Verbindungen" (collocations, ADR 0062) share the same compact grouped-list look. */
.relations__group,.collocations__group{margin-block:.5rem}
.relations__group h3,.collocations__question{font-size:var(--step--1);color:var(--text-muted);margin-block:.3rem .2rem}
.relations__list,.collocations__list,.word-field__list,.word-family__list{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem .7rem;padding:0;font-size:var(--step--1);font-family:var(--font-lexical)}
/* „Ähnliche Wörter" (co-hyponyms, ADR 0017) + „Wortfamilie" (stem family, ADR 0089): a gentle hint + the sibling row. */
.word-field__hint,.word-family__hint{color:var(--text-muted);font-size:var(--step--2);margin-block:.2rem}
/* Idiom / multiword decomposition (ADR 0010): the parts as chips + the non-compositionality callout. */
.expression-parts__list{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-xs);padding:0;margin-block:var(--sp-xs)}
.expression-parts__item{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-pill);padding:.1rem .65rem;font-size:var(--step--1);font-family:var(--font-lexical)}
.expression-parts__item a{text-decoration:none;color:var(--brand-strong)}
.expression-parts__warning{margin-block-start:var(--sp-sm);background:var(--brand-surface);border-inline-start:3px solid var(--brand);border-radius:var(--radius-md);padding:var(--sp-sm) var(--sp-md);font-size:var(--step--1);color:var(--text)}
/* an idiom's literal reading, secondary to the figurative gloss */
.meaning__literal{display:block;color:var(--text-muted);font-size:var(--step--1);font-style:italic;margin-block-start:.1rem}
.meaning__literal bdi{font-family:var(--font-lexical);font-style:normal}
/* a small „Redewendung" pill on an idiom concept-sibling (a similar saying, never a plain translation) */
.concept-sibling__idiom{display:inline-block;margin-inline-start:var(--sp-2xs);background:var(--brand-surface);color:var(--brand-strong);border-radius:var(--radius-pill);padding:0 .45rem;font-size:var(--step--2);vertical-align:middle}
/* example sentences are core learning content → full-contrast --text (not muted), lexical font for clicks/tone */
.example-sentences{margin-block-start:.3rem;color:var(--text);font-size:var(--step--1)}
.example-sentences li{font-family:var(--font-lexical)}
.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)}


/* Handoff 2b · Flexion mobil als Fall-Karten: CSS-only Numerus-Umschalter (Radios, fokussierbar),
   nie zwei Spalten zugleich. Desktop behält die echte Tabelle; je Viewport rendert genau EINE Form. */
.declension-cards { display: none; }
@media (max-width: 40rem) {
  .declension__table-wrap { display: none; }
  .declension-cards { display: block; }
}
.declension-cards__switch { display: flex; gap: .4rem; margin-block-end: .8rem; }
.declension-cards__label {
  flex: 1; text-align: center; padding: .55rem; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); font-weight: 700; font-size: var(--step--1);
}
.declension-cards__radio--1:checked ~ .declension-cards__switch .declension-cards__label--1,
.declension-cards__radio--2:checked ~ .declension-cards__switch .declension-cards__label--2,
.declension-cards__radio--3:checked ~ .declension-cards__switch .declension-cards__label--3 {
  border-color: var(--brand); background: var(--brand-surface); color: var(--brand-strong); font-weight: 800;
}
.declension-cards__radio:focus-visible ~ .declension-cards__switch { outline: var(--ring); outline-offset: 2px; border-radius: 12px; }
.declension-cards__panel { display: none; }
.declension-cards__radio--1:checked ~ .declension-cards__panel--1,
.declension-cards__radio--2:checked ~ .declension-cards__panel--2,
.declension-cards__radio--3:checked ~ .declension-cards__panel--3 { display: grid; gap: .55rem; }
.declension-cards__case {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-sm);
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.declension-cards__case-label { font-size: var(--step--2); font-weight: 700; color: var(--text-muted); }
.declension-cards__form { font-family: var(--font-lexical); font-size: 1.25rem; }
/* Fugenelement (B7): das Binde-Morphem nach einem Kompositions-Teil („Liebe·s·brief") — klein, gedämpft, in
   Punkte gerahmt, damit es als eigenes Element zwischen den Teilen lesbar ist. */
.expression-parts__joint{margin-inline-start:.35ch;color:var(--text-muted);font-size:var(--step--2);font-weight:600}
.expression-parts__joint::before{content:"·"}
.expression-parts__joint::after{content:"·"}