/* DE: Startseite/Hero, Such-Verfeinerungen, didaktisches Panel und der Cross-Language-Block der Wortseite.
   EN: Home/hero, search refinements, didactic panel and the word page's cross-language block. */

/* ============================ 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{letter-spacing:.08em;font-size:var(--step--1);
  font-weight:700;color:var(--brand);margin:0}

/* DE: „Du suchst gerade in: <Sprache>" unter dem Suchfeld. Ruhig gesetzt — es ist eine Auskunft, kein Angebot;
   der Sprachname trägt die Betonung, nicht die Zeile. Zentriert wie der Rest des Hero.
   EN: The quiet line naming the language the search runs in. The language name carries the emphasis. */
.home-language{text-align:center;margin-block-start:var(--sp-sm);color:var(--text-muted);font-size:.95rem}
.home-language a{color:var(--text);font-weight:600}
.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)}
.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-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 */
.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) ============================ */

/* ============================ "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}
/* Periphrasis: a culture-specific concept with no single-word equivalent — the description bridges the languages. */
.concept-siblings__periphrasis{margin:0;display:flex;flex-direction:column;gap:.1rem}
.concept-siblings__periphrasis-label{color:var(--text-muted);font-size:var(--step--1)}
.concept-siblings__periphrasis-text{font-weight:600}

/* Satzbausteine (ADR 0063): feste Satzanfänge mit einer Lücke, nach kommunikativer Funktion gruppiert.
   Die Lücke wird als Ausfülllinie sichtbar; Text und Füllwörter stehen wörtlich in <bdi lang dir> (HR2). */
.frame-group{margin-block-start:var(--sp-xl)}
.frame-group__label{font-size:var(--step-1);margin-block-end:var(--sp-md)}
.frame-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-md)}
.frame{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-md)}
.frame__pattern{margin:0;font-size:var(--step-1);line-height:1.7;
  display:flex;flex-wrap:wrap;gap:.35em;align-items:baseline}
.frame__text{font-family:var(--font-lexical)}
/* Die Lücke: eine gestrichelte Ausfülllinie, keine Fläche — Kinder sehen sofort „hier kommt ein Wort hin". */
.frame__slot{min-inline-size:3.5em;border-block-end:2px dashed var(--accent);
  color:var(--text-muted);text-align:center;font-size:var(--step--1)}
.frame__fills{margin:var(--sp-sm) 0 0;display:flex;flex-wrap:wrap;gap:.4em;align-items:baseline}
.frame__fills-label{color:var(--text-muted);font-size:var(--step--1)}
.frame__fill{font-family:var(--font-lexical);font-size:var(--step--1);
  background:var(--accent-surface);border-radius:var(--radius-pill);padding:.1em .6em}

/* „Inhaltlichen Fehler melden" — a calm, low-key disclosure at the foot of the word page. */
.content-report{margin-block-start:var(--sp-xl);padding-block-start:var(--sp-lg);border-top:1px solid var(--border)}
.content-report__summary{cursor:pointer;color:var(--text-muted);font-size:var(--step--1)}
.content-report__intro{color:var(--text-muted);font-size:var(--step--1);margin-block:var(--sp-sm)}
.content-report__form{display:flex;flex-direction:column;gap:var(--sp-sm);max-width:40rem}
.content-report__submit{align-self:start}
/* Honeypot: off-screen for people (a bot still sees it in the DOM and fills it). Never make this visible. */
.content-report__trap{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}


/* Handoff 4a · feste Daumen-Navigation (nur Telefon; >=40rem übernimmt die Kopfzeile). */
.tabbar { display: none; }
@media (max-width: 40rem) {
  body { padding-block-end: 68px; } /* der Inhalt endet nie unter der Leiste */
  .tabbar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 40;
    display: flex;
    background: var(--surface);
    border-block-start: 1px solid var(--border);
    padding-block: .35rem calc(.35rem + env(safe-area-inset-bottom));
  }
  .tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    min-block-size: 48px;
    justify-content: center;
    font-size: var(--step--2);
    font-weight: 700;
    text-decoration: none;
    color: var(--text-muted);
  }
  .tabbar__icon { font-size: 1.25rem; }
  .tabbar__item[aria-current="page"] { color: var(--brand-strong); }
}