/* ==========================================================================
   Lernida — Komponenten (Startseite [lernida_landing] + Generator [lernida_generator])
   Wird nur auf Seiten mit diesen Shortcodes geladen (functions.php,
   lernida_page_uses_components()). Alle Selektoren beginnen mit .lernida- —
   keine globalen Selektoren, andere WP-Seiten bleiben unverändert.

   Tokens: packages/tokens/colors.css (--lernida-*). Raster 8 px.
   Breakpoints: Basis = Smartphone (390 px), ab 768 px Tablet, ab 1200/1440 px Desktop.
   Kontrast-Regeln + Werte: docs/architecture/UI_UX_REDESIGN.md §3.
   ========================================================================== */

.lernida-page,
.lernida-generator,
.lernida-dialog {
  font-family: var(--font-body);
  color: var(--lernida-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.lernida-page *,
.lernida-page *::before,
.lernida-page *::after,
.lernida-generator *,
.lernida-generator *::before,
.lernida-generator *::after { box-sizing: border-box; }

.lernida-page {
  background: var(--lernida-background);
  overflow-x: clip; /* Sicherheitsnetz gegen horizontales Scrollen */
}
.lernida-page a { color: var(--lernida-link); }
.lernida-page h1, .lernida-page h2, .lernida-page h3,
.lernida-generator h2, .lernida-generator h3 {
  font-family: var(--font-display);
  color: var(--lernida-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
.lernida-page p { margin: 0; }
/* Kadence: .single-content ul/ol { padding-left: 2em; margin: 0 0 … } (0,1,1) — mit
   .lernida-page-Präfix (0,2,0) gezielt für die eigenen Listen zurücksetzen. */
.lernida-page .lernida-steps,
.lernida-page .lernida-checks,
.lernida-page .lernida-sheet__sections,
.lernida-page .lernida-gallery,
.lernida-page .lernida-packages,
.lernida-page .lernida-nav__list,
.lernida-page .lernida-footer__links { padding-left: 0; margin-left: 0; margin-right: 0; list-style: none; }
.lernida-page .lernida-steps,
.lernida-page .lernida-gallery,
.lernida-page .lernida-packages { margin-top: var(--lernida-space-4); }
.lernida-page .lernida-checks { margin-top: var(--lernida-space-3); margin-bottom: 0; }
.lernida-page .lernida-sheet__sections,
.lernida-page .lernida-nav__list,
.lernida-page .lernida-footer__links,
.lernida-page .lernida-steps,
.lernida-page .lernida-packages { margin-bottom: 0; }
.lernida-page .lernida-gallery { margin-bottom: var(--lernida-space-2); }

@media (prefers-reduced-motion: no-preference) {
  html:has(.lernida-page) { scroll-behavior: smooth; }
}
.lernida-page [id] { scroll-margin-top: var(--lernida-space-3); }

/* --- Fokus: 3 px Türkis (--lernida-accent-teal) mit dunklem Rand innen und außen.
       Türkis allein hat auf Off-White nur ≈ 2,3:1; gegen den Marineblau-Rand 6,44:1. --- */
.lernida-page :focus-visible,
.lernida-generator :focus-visible,
.lernida-dialog :focus-visible {
  outline: 3px solid var(--lernida-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--lernida-focus-ring);
}
.lernida-chip__input:focus-visible + .lernida-chip__text {
  outline: 3px solid var(--lernida-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--lernida-focus-ring);
}

/* --- Layout ---------------------------------------------------------------- */
.lernida-container {
  width: 100%;
  max-width: calc(var(--lernida-container) + 2 * var(--lernida-gutter));
  margin: 0 auto;
  padding: 0 var(--lernida-gutter);
}
.lernida-container--narrow { max-width: calc(800px + 2 * var(--lernida-gutter)); }

.lernida-section { padding: var(--lernida-space-8) 0; }
.lernida-section--surface { background: var(--lernida-surface); }
@media (min-width: 768px) { .lernida-section { padding: var(--lernida-space-12) 0; } }

.lernida-eyebrow {
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lernida-secondary-ink);
  margin-bottom: var(--lernida-space-1) !important;
}
.lernida-h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.2; }
.lernida-h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.35; }
.lernida-lead { margin-top: var(--lernida-space-2) !important; color: var(--lernida-muted-strong); font-size: 1.0625rem; max-width: 65ch; }

/* --- Buttons --------------------------------------------------------------- */
.lernida-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lernida-space-1);
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--lernida-radius-button);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none !important;
  cursor: pointer;
  background: var(--lernida-surface);
  color: var(--lernida-text) !important;
  border-color: var(--lernida-border);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lernida-btn:hover { border-color: var(--lernida-muted); }
.lernida-btn--accent { background: var(--lernida-accent); border-color: var(--lernida-accent); color: var(--lernida-on-accent) !important; box-shadow: var(--lernida-shadow-sm); }
.lernida-btn--accent:hover { background: var(--lernida-accent-hover); border-color: var(--lernida-accent-hover); }
.lernida-btn--primary { background: var(--lernida-primary); border-color: var(--lernida-primary); color: #fff !important; }
.lernida-btn--primary:hover { background: var(--lernida-primary-hover); border-color: var(--lernida-primary-hover); }
.lernida-btn--ghost { background: transparent; border-color: var(--lernida-border); color: var(--lernida-text) !important; }
.lernida-btn--ghost:hover { background: var(--lernida-surface); border-color: var(--lernida-muted); }
.lernida-btn--lg { min-height: 56px; padding: 14px 28px; font-size: 1.0625rem; }
.lernida-btn--small { min-height: 44px; padding: 8px 16px; font-size: .9375rem; }
.lernida-btn--block { width: 100%; }
.lernida-btn:disabled,
.lernida-btn[aria-disabled="true"] {
  background: var(--lernida-disabled-bg);
  border-color: var(--lernida-disabled-bg);
  color: var(--lernida-disabled-text) !important;
  cursor: not-allowed;
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .lernida-btn--accent:hover:not(:disabled), .lernida-btn--primary:hover:not(:disabled) { transform: translateY(-1px); }
}
.lernida-btn__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; }
.lernida-btn.is-loading .lernida-btn__spinner { display: inline-block; }
.lernida-btn.is-loading { cursor: progress; }
@media (prefers-reduced-motion: no-preference) {
  .lernida-btn.is-loading .lernida-btn__spinner { animation: lernida-spin .8s linear infinite; }
}
@keyframes lernida-spin { to { transform: rotate(360deg); } }

.lernida-actions { display: flex; flex-wrap: wrap; gap: var(--lernida-space-2); }
.lernida-link { display: inline-block; margin-top: var(--lernida-space-2); font-weight: 700; color: var(--lernida-link); text-underline-offset: 3px; }

/* --- Badges / Pills / Nummern ------------------------------------------------ */
.lernida-pill,
.lernida-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--lernida-radius-chip);
  font-weight: 700;
  line-height: 1.2;
}
.lernida-pill { padding: 8px 16px; font-size: .875rem; background: var(--lernida-primary-soft); color: var(--lernida-text); }
.lernida-badge { padding: 4px 12px; font-size: .8125rem; }
.lernida-badge--ok { background: var(--lernida-secondary-soft); color: var(--lernida-secondary-ink); }
.lernida-badge--soon { background: var(--lernida-accent-soft); color: var(--lernida-accent-ink); }
.lernida-badge--ai { background: var(--lernida-primary-soft); color: var(--lernida-text); }

.lernida-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-weight: 800;
  font-size: .875rem;
  color: #fff;
}
.lernida-num--verstehen { background: var(--lernida-m-verstehen); }
.lernida-num--beispiel  { background: var(--lernida-m-beispiel); }
.lernida-num--ueben     { background: var(--lernida-m-ueben); }
.lernida-num--alltag    { background: var(--lernida-m-alltag); }
.lernida-num--loesung   { background: var(--lernida-m-loesung); }

/* --- Header ---------------------------------------------------------------- */
.lernida-header { background: var(--lernida-surface); border-bottom: 1px solid var(--lernida-border); }
.lernida-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lernida-space-1) var(--lernida-space-3);
  padding-top: var(--lernida-space-2);
  padding-bottom: var(--lernida-space-2);
}
.lernida-logo { display: inline-flex; align-items: center; gap: var(--lernida-space-1); text-decoration: none; margin-right: auto; }
/* Logo-Bild (wp/child-theme/assets/logo/): Höhe 40 px mobil, 52 px Desktop; Breite folgt dem Seitenverhältnis */
.lernida-logo__img { display: block; height: 40px; width: auto; }
@media (min-width: 1024px) { .lernida-logo__img { height: 52px; } }
.lernida-nav { order: 3; width: 100%; }
.lernida-nav__list { display: flex; flex-wrap: wrap; gap: 0 var(--lernida-space-2); list-style: none; margin: 0; padding: 0; }
.lernida-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font-weight: 600; font-size: .9375rem; color: var(--lernida-muted-strong) !important; text-decoration: none;
}
.lernida-nav__link:hover { color: var(--lernida-text) !important; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .lernida-header__inner { flex-wrap: nowrap; }
  .lernida-nav { order: 0; width: auto; }
  .lernida-nav__list { flex-wrap: nowrap; gap: var(--lernida-space-1); }
  .lernida-nav__link { white-space: nowrap; }
  .lernida-header__cta { white-space: nowrap; }
}
@media (min-width: 1024px) {
  .lernida-nav__list { gap: var(--lernida-space-3); }
}

/* --- Beta-Banner ----------------------------------------------------------- */
.lernida-beta-banner {
  background: var(--lernida-primary);
  color: #fff;
  text-align: center;
  padding: 10px 16px;
  font-size: .875rem;
  line-height: 1.4;
}
.lernida-beta-banner strong { font-weight: 700; }

/* --- Hero ------------------------------------------------------------------ */
.lernida-hero { padding: var(--lernida-space-6) 0 var(--lernida-space-8); }
.lernida-hero__inner { display: grid; gap: var(--lernida-space-6); align-items: center; }
.lernida-hero__title {
  margin-top: var(--lernida-space-3) !important;
  font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.lernida-hero__lead { margin: var(--lernida-space-3) 0 var(--lernida-space-4) !important; font-size: 1.125rem; color: var(--lernida-muted-strong); max-width: 56ch; }
.lernida-checks { display: flex; flex-wrap: wrap; gap: var(--lernida-space-1) var(--lernida-space-3); list-style: none; margin: var(--lernida-space-3) 0 0; padding: 0; }
.lernida-checks li { display: inline-flex; align-items: center; gap: var(--lernida-space-1); font-weight: 600; color: var(--lernida-muted-strong); }
.lernida-checks li::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--lernida-secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
@media (min-width: 768px) { .lernida-hero { padding: var(--lernida-space-10) 0 var(--lernida-space-12); } }
@media (min-width: 1024px) { .lernida-hero__inner { grid-template-columns: 1.1fr .9fr; gap: var(--lernida-space-8); } }

/* Blatt-Vorschau (HTML, kein Bild → kein LCP-Bild nötig) */
.lernida-sheet { margin: 0; }
.lernida-sheet__paper {
  position: relative;
  background: #fff;
  color: #172033;
  border-radius: var(--lernida-radius-card-lg);
  border: 1px solid var(--lernida-border);
  box-shadow: var(--lernida-shadow-lg);
  padding: var(--lernida-space-3);
  max-width: 480px;
  margin: 0 auto;
}
.lernida-sheet__label {
  position: absolute; top: -14px; right: var(--lernida-space-3);
  background: var(--lernida-accent); color: var(--lernida-on-accent);
  font-size: .75rem; font-weight: 800; padding: 4px 12px; border-radius: var(--lernida-radius-chip);
}
.lernida-sheet__title { font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
.lernida-sheet__meta { font-size: .875rem; color: #3a465e; }
.lernida-sheet__fields { display: grid; grid-template-columns: 2fr 1fr; gap: var(--lernida-space-2); margin: var(--lernida-space-2) 0; font-size: .75rem; color: #3a465e; }
.lernida-sheet__fields span { border-bottom: 1px solid #c9ceda; padding-bottom: 2px; }
.lernida-sheet__sections { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lernida-sheet__sections li { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.45; }
.lernida-sheet__sections strong { display: block; font-size: .8125rem; }
.lernida-sheet__caption { margin-top: var(--lernida-space-2); text-align: center; font-size: .8125rem; color: var(--lernida-muted); }

/* --- So funktioniert's ------------------------------------------------------- */
.lernida-steps { list-style: none; margin: var(--lernida-space-4) 0 0; padding: 0; display: grid; gap: var(--lernida-space-2); counter-reset: none; }
.lernida-step {
  position: relative;
  background: var(--lernida-surface);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card);
  padding: var(--lernida-space-3);
  box-shadow: var(--lernida-shadow-sm);
}
.lernida-step p { margin-top: var(--lernida-space-1); color: var(--lernida-muted-strong); }
.lernida-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--lernida-space-2);
  background: var(--lernida-primary-soft); color: var(--lernida-link); font-weight: 800; font-size: 1.125rem;
}
@media (min-width: 768px) { .lernida-steps { grid-template-columns: repeat(2, 1fr); gap: var(--lernida-space-3); } }
@media (min-width: 1200px) { .lernida-steps { grid-template-columns: repeat(4, 1fr); } }

/* --- Methode (Tabs) ---------------------------------------------------------- */
.lernida-tabs { margin-top: var(--lernida-space-4); display: grid; gap: var(--lernida-space-3); }
.lernida-tabs__list { display: grid; gap: var(--lernida-space-1); }
.lernida-tabs__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num name" "num sub";
  column-gap: 12px;
  align-items: center;
  text-align: left;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border-radius: var(--lernida-radius-card);
  border: 2px solid var(--lernida-border);
  background: var(--lernida-surface);
  color: var(--lernida-text);
  font: inherit;
  cursor: pointer;
}
.lernida-tabs__tab .lernida-num { grid-area: num; }
.lernida-tabs__name { grid-area: name; font-weight: 800; }
.lernida-tabs__sub { grid-area: sub; font-size: .8125rem; color: var(--lernida-muted); }
.lernida-tabs__tab:hover { border-color: var(--lernida-muted); }
.lernida-tabs__tab.is-active,
.lernida-tabs__tab[aria-selected="true"] { border-color: var(--lernida-primary); background: var(--lernida-primary-soft); }
.lernida-tabs:not(.is-enhanced) .lernida-tabs__tab { cursor: default; }
.lernida-tabs__panel {
  background: var(--lernida-background);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  padding: var(--lernida-space-3);
}
.lernida-tabs__panel p { margin-top: var(--lernida-space-1); color: var(--lernida-muted-strong); }
.lernida-tabs__panel-sub { display: block; font-size: .9375rem; font-weight: 600; color: var(--lernida-muted); margin-top: 4px; }
.lernida-tabs:not(.is-enhanced) .lernida-tabs__panel + .lernida-tabs__panel { margin-top: 0; }
.lernida-example {
  margin-top: var(--lernida-space-3);
  background: var(--lernida-surface);
  border-radius: var(--lernida-radius-card);
  border-left: 4px solid var(--lernida-m-verstehen);
  padding: var(--lernida-space-2) var(--lernida-space-3);
}
.lernida-example--beispiel { border-left-color: var(--lernida-m-beispiel); }
.lernida-example--ueben    { border-left-color: var(--lernida-m-ueben); }
.lernida-example--alltag   { border-left-color: var(--lernida-m-alltag); }
.lernida-example--loesung  { border-left-color: var(--lernida-m-loesung); }
.lernida-example__label { font-size: .8125rem; font-weight: 700; color: var(--lernida-muted); }
.lernida-tabs__panel .lernida-example__text { color: var(--lernida-text); font-weight: 600; font-size: 1.0625rem; }
@media (min-width: 768px) {
  .lernida-tabs.is-enhanced .lernida-tabs__list { grid-template-columns: repeat(5, 1fr); }
  .lernida-tabs.is-enhanced .lernida-tabs__tab { grid-template-columns: 1fr; grid-template-areas: "num" "name" "sub"; row-gap: 6px; align-content: start; padding: 16px; }
  .lernida-tabs__panel { padding: var(--lernida-space-4); }
}

/* --- Karten / Leerzustand -------------------------------------------------- */
.lernida-card {
  background: var(--lernida-surface);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  box-shadow: var(--lernida-shadow-md);
  padding: var(--lernida-space-3) var(--lernida-space-2);
  margin-top: var(--lernida-space-4);
}
@media (min-width: 768px) { .lernida-card { padding: var(--lernida-space-4); } }
.lernida-empty {
  margin-top: var(--lernida-space-4);
  background: var(--lernida-surface);
  border: 1px dashed var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  padding: var(--lernida-space-4) var(--lernida-space-3);
  display: grid; gap: var(--lernida-space-2); justify-items: start;
}
.lernida-empty p { color: var(--lernida-muted-strong); max-width: 60ch; }

/* --- Generator --------------------------------------------------------------- */
.lernida-generator__form { display: grid; gap: var(--lernida-space-4); }
.lernida-generator__fields { display: grid; gap: var(--lernida-space-3); min-width: 0; }
@media (min-width: 1024px) { .lernida-generator__form { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.lernida-field { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--lernida-space-1); }
.lernida-field__label { font-weight: 700; font-size: .9375rem; padding: 0; color: var(--lernida-text); }
.lernida-field__optional { font-weight: 500; color: var(--lernida-muted); }
.lernida-field--narrow { max-width: 220px; }
.lernida-field[hidden], .lernida-field__hint[hidden] { display: none; }
.lernida-field__hint { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--lernida-space-2); font-size: .8125rem; color: var(--lernida-muted); margin: 0; }
.lernida-field__count { font-variant-numeric: tabular-nums; }

.lernida-select,
.lernida-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--lernida-radius-button);
  border: 1.5px solid var(--lernida-border-strong); /* 3,76:1 (WCAG 1.4.11) */
  background: var(--lernida-surface);
  color: var(--lernida-text);
  font: inherit;
  font-size: 1rem;
}
.lernida-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%233a465e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.lernida-select:hover, .lernida-input:hover { border-color: var(--lernida-muted); }
.lernida-input::placeholder { color: var(--lernida-muted); opacity: 1; }

.lernida-chips { display: flex; flex-wrap: wrap; gap: var(--lernida-space-1); }
.lernida-chip { position: relative; display: inline-flex; }
.lernida-chip[hidden] { display: none; }
.lernida-chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lernida-chip__text,
.lernida-chip--button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px 16px;
  border-radius: var(--lernida-radius-chip);
  border: 1.5px solid var(--lernida-border-strong);
  background: var(--lernida-surface);
  color: var(--lernida-text);
  font: inherit; font-weight: 600; font-size: .9375rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.lernida-chip:hover .lernida-chip__text, .lernida-chip--button:hover { border-color: var(--lernida-primary); }
.lernida-chip__input:checked + .lernida-chip__text,
.lernida-chip--button[aria-pressed="true"] {
  background: var(--lernida-primary);
  border-color: var(--lernida-primary);
  color: #fff;
}
.lernida-chip__input:checked + .lernida-chip__text::before,
.lernida-chip--button[aria-pressed="true"]::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.lernida-chip__input:disabled + .lernida-chip__text { background: var(--lernida-disabled-bg); color: var(--lernida-disabled-text); cursor: not-allowed; }

.lernida-summary {
  background: var(--lernida-background);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card);
  padding: var(--lernida-space-3);
  display: grid; gap: var(--lernida-space-2);
}
@media (min-width: 1024px) { .lernida-summary { position: sticky; top: var(--lernida-space-3); } }
.lernida-summary__title { font-weight: 800; }
.lernida-summary__list { margin: 0; display: grid; gap: 6px; }
.lernida-summary__list div { display: grid; grid-template-columns: 110px 1fr; gap: var(--lernida-space-1); font-size: .9375rem; }
.lernida-summary__list dt { color: var(--lernida-muted); }
.lernida-summary__list dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.lernida-summary__note { font-size: .875rem; color: var(--lernida-muted-strong); }
.lernida-ai-note { font-size: .8125rem; color: var(--lernida-muted-strong); line-height: 1.5; }
.lernida-ai-note .lernida-badge { margin-right: 4px; }

.lernida-status { margin-top: var(--lernida-space-3); border-radius: var(--lernida-radius-card); font-weight: 600; }
.lernida-status:empty { display: none; }
.lernida-status.is-loading,
.lernida-status.is-success,
.lernida-status.is-error,
.lernida-status.is-guest { padding: var(--lernida-space-2) var(--lernida-space-3); border: 1px solid; }
.lernida-status.is-loading { background: var(--lernida-primary-soft); border-color: var(--lernida-primary); }
.lernida-status.is-success { background: var(--lernida-secondary-soft); border-color: var(--lernida-secondary); color: var(--lernida-text); }
.lernida-status.is-error { background: var(--lernida-danger-soft); border-color: var(--lernida-danger); color: var(--lernida-text); }
.lernida-status.is-guest { background: var(--lernida-accent-soft); border-color: var(--lernida-accent); color: var(--lernida-text); }
.lernida-status__actions { display: flex; flex-wrap: wrap; gap: var(--lernida-space-2); margin-top: var(--lernida-space-2); }
.lernida-status__actions[hidden] { display: none; }

.lernida-generator__result:not(:empty) {
  margin-top: var(--lernida-space-3);
  border-top: 1px solid var(--lernida-border);
  padding-top: var(--lernida-space-3);
}
.lernida-generator__result h3 { margin-top: var(--lernida-space-3); font-size: 1.0625rem; }
.lernida-generator__result:focus { outline: none; }
.lernida-result__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lernida-space-2); }
.lernida-result__head h2 { font-size: 1.375rem; }
.lernida-generator__result .lernida-badge--ai { margin-top: var(--lernida-space-2); }
.lernida-progress { font-weight: 700; margin-top: var(--lernida-space-1); }
.lernida-quiz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lernida-space-1); margin: var(--lernida-space-1) 0 var(--lernida-space-2); }
.lernida-quiz .lernida-input { width: 160px; min-height: 44px; }
.lernida-quiz__out { font-weight: 600; }
.lernida-feedback { margin-top: var(--lernida-space-4); display: grid; gap: var(--lernida-space-2); max-width: 560px; }
.lernida-check { display: flex; gap: var(--lernida-space-1); align-items: flex-start; font-size: .9375rem; }
.lernida-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }

.lernida-generator--login { display: grid; gap: var(--lernida-space-2); }

.lernida-dialog {
  max-width: 34rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  padding: var(--lernida-space-3);
  background: var(--lernida-surface);
  box-shadow: var(--lernida-shadow-lg);
}
.lernida-dialog::backdrop { background: rgba(23, 32, 51, .5); }
.lernida-dialog > .lernida-btn { margin: var(--lernida-space-1) var(--lernida-space-1) 0 0; }

/* --- Klassenstufen ------------------------------------------------------------ */
.lernida-stages { display: grid; gap: var(--lernida-space-3); margin-top: var(--lernida-space-4); }
@media (min-width: 768px) { .lernida-stages { grid-template-columns: repeat(2, 1fr); } }
.lernida-stage {
  background: var(--lernida-surface);
  border: 1px solid var(--lernida-border);
  border-top: 4px solid var(--accent); /* dezenter Alterstier-Akzent */
  border-radius: var(--lernida-radius-card-lg);
  padding: var(--lernida-space-3);
  display: grid; gap: var(--lernida-space-2); align-content: start;
  box-shadow: var(--lernida-shadow-sm);
}
.lernida-stage__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lernida-space-1); }
.lernida-stage__range { color: var(--lernida-muted-strong); }
.lernida-stage .lernida-link { margin-top: 0; }
.lernida-stage.is-disabled { background: var(--lernida-disabled-bg); border-top-color: var(--lernida-border); box-shadow: none; }
.lernida-stage.is-disabled .lernida-h3,
.lernida-stage.is-disabled .lernida-stage__range,
.lernida-stage__note { color: var(--lernida-disabled-text); }

/* --- Beispielblätter -------------------------------------------------------------- */
.lernida-gallery { list-style: none; margin: var(--lernida-space-4) 0 var(--lernida-space-2); padding: 0; display: grid; gap: var(--lernida-space-3); }
@media (min-width: 768px) { .lernida-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lernida-gallery { grid-template-columns: repeat(3, 1fr); } }
.lernida-sample {
  background: var(--lernida-surface);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--lernida-shadow-sm);
}
.lernida-gallery__more { margin: var(--lernida-space-3) 0 0; text-align: center; }
.ld-sample-card .lernida-package p { color: var(--lernida-muted-strong); }
.lernida-package__meta { font-weight: 700; font-size: .9375rem; }
.lernida-package .lernida-btn { margin-top: var(--lernida-space-1); }

/* --- FAQ (Accordion) ---------------------------------------------------------- */
.lernida-accordion { margin-top: var(--lernida-space-4); display: grid; gap: var(--lernida-space-1); }
.lernida-accordion__item { background: var(--lernida-surface); border: 1px solid var(--lernida-border); border-radius: var(--lernida-radius-card); }
.lernida-accordion__heading { font-size: 1rem !important; }
.lernida-accordion__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--lernida-space-2);
  min-height: 56px; padding: 12px var(--lernida-space-3);
  background: transparent; border: 0; border-radius: var(--lernida-radius-card);
  color: var(--lernida-text); font: inherit; font-weight: 700; font-size: 1rem; text-align: left; cursor: pointer;
}
.lernida-accordion__icon { position: relative; width: 16px; height: 16px; flex: none; }
.lernida-accordion__icon::before,
.lernida-accordion__icon::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.lernida-accordion__icon::after { transform: rotate(90deg); }
.lernida-accordion__trigger[aria-expanded="true"] .lernida-accordion__icon::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) { .lernida-accordion__icon::after { transition: transform .2s ease; } }
.lernida-accordion__panel { padding: 0 var(--lernida-space-3) var(--lernida-space-3); color: var(--lernida-muted-strong); }

/* --- Footer --------------------------------------------------------------- */
.lernida-footer { background: var(--lernida-surface); border-top: 1px solid var(--lernida-border); padding: var(--lernida-space-4) 0; }
.lernida-footer__inner { display: flex; flex-wrap: wrap; gap: var(--lernida-space-2) var(--lernida-space-4); align-items: center; justify-content: space-between; }
.lernida-footer__brand { color: var(--lernida-muted-strong); margin: 0; }
.lernida-footer__logo { display: block; width: 220px; height: auto; }
.lernida-chrome .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lernida-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--lernida-space-3); margin: 0; padding: 0; }
.lernida-footer__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lernida-muted-strong); font-size: .9375rem; }
.lernida-footer__links a:hover { color: var(--lernida-text); }

/* ==========================================================================
   Kadence-Schutz: Kadence färbt button:hover/:focus/:active global
   (color: --global-palette-btn-hover = Weiß, eigener Hintergrund, Schatten;
   Spezifität 0,1,1). Ohne diese Regeln stand z. B. weiße Schrift auf
   hellblauem Tab (1,14:1, Axe-Befund). Hier je Button-Typ die eigenen
   Zustände mit höherer Spezifität — nur innerhalb der Lernida-Bereiche.
   ========================================================================== */
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn:is(:hover, :focus, :active) {
  background: var(--lernida-surface); color: var(--lernida-text); border-color: var(--lernida-muted);
}
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn--accent:is(:hover, :focus, :active) {
  background: var(--lernida-accent-hover); border-color: var(--lernida-accent-hover); color: var(--lernida-on-accent);
}
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn--primary:is(:hover, :focus, :active) {
  background: var(--lernida-primary-hover); border-color: var(--lernida-primary-hover); color: #fff;
}
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn--ghost:is(:hover, :focus, :active) {
  background: var(--lernida-surface); color: var(--lernida-text);
}
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn:disabled,
:is(.lernida-page, .lernida-generator, .lernida-dialog) .lernida-btn:disabled:is(:hover, :focus, :active) {
  background: var(--lernida-disabled-bg); border-color: var(--lernida-disabled-bg); color: var(--lernida-disabled-text);
  box-shadow: none; transform: none;
}
.lernida-page .lernida-tabs__tab:is(:hover, :focus, :active) { background: var(--lernida-surface); color: var(--lernida-text); }
.lernida-page .lernida-tabs__tab:is(.is-active, [aria-selected="true"]) { background: var(--lernida-primary-soft); color: var(--lernida-text); }
.lernida-page .lernida-accordion__trigger:is(:hover, :focus, :active) { background: transparent; color: var(--lernida-text); }
.lernida-page .lernida-accordion__trigger:hover { background: var(--lernida-background); }
.lernida-page .lernida-chip--button:is(:hover, :focus, :active) { background: var(--lernida-surface); color: var(--lernida-text); }
.lernida-page .lernida-chip--button[aria-pressed="true"] { background: var(--lernida-primary); border-color: var(--lernida-primary); color: #fff; }
:is(.lernida-page, .lernida-generator, .lernida-dialog) button:is(:hover, :active) { box-shadow: none; }

/* Kadence: input[type=text]/select (0,1,1) setzen Hintergrund/Farbe/Rahmen —
   ohne diese Regel blieb das Lernziel-Feld im Dark Mode weiß mit heller Schrift. */
:is(.lernida-generator, .lernida-dialog) :is(input.lernida-input, select.lernida-select),
:is(.lernida-generator, .lernida-dialog) :is(input.lernida-input, select.lernida-select):focus {
  background-color: var(--lernida-surface);
  color: var(--lernida-text);
  border: 1.5px solid var(--lernida-border-strong);
  border-radius: var(--lernida-radius-button);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lernida-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23b9c1d3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
/* Kadence: .single-content h2 + * { margin-top: 0 } — Abstand nach Abschnittsüberschriften erhalten. */
.lernida-page .lernida-h2 + :not(.lernida-lead) { margin-top: var(--lernida-space-4); }

/* --- Gemeinsamer Header/Footer (Lernida_SiteChrome) ------------------------ */
.lernida-chrome { background: transparent; }
.lernida-page .lernida-nav__link[aria-current="page"] {
  color: var(--lernida-text) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--lernida-accent);
}
.lernida-footer__social { display: flex; gap: var(--lernida-space-1); }
.lernida-page .lernida-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  color: var(--lernida-muted-strong);
}
.lernida-page .lernida-footer__social a:hover { color: var(--lernida-link); background: var(--lernida-primary-soft); }

/* ==========================================================================
   Themenseite [lernida_themen] — geführte Auswahl Klasse → Fach → Thema → Aktion
   Listen-Resets mit .lernida-page-Präfix, weil Kadence .single-content ul/ol einrückt.
   ========================================================================== */
.lernida-page .lernida-flow,
.lernida-page .lernida-picks,
.lernida-page .lernida-topics { list-style: none; margin: 0; padding: 0; }

.lernida-catalog-hero {
  background: linear-gradient(180deg, var(--lernida-primary-soft) 0%, var(--lernida-background) 100%);
  padding: var(--lernida-space-6) 0 var(--lernida-space-4);
}
.lernida-catalog-hero__title {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 800; line-height: 1.12; letter-spacing: -0.03em;
}
.lernida-catalog-hero__lead { margin-top: var(--lernida-space-2) !important; color: var(--lernida-muted-strong); font-size: 1.0625rem; max-width: 62ch; }
@media (min-width: 768px) { .lernida-catalog-hero { padding: var(--lernida-space-8) 0 var(--lernida-space-5); } }

.lernida-catalog { padding: var(--lernida-space-3) 0 var(--lernida-space-10); }
.lernida-flow { display: grid; gap: var(--lernida-space-2); }

.lernida-flow__step {
  background: var(--lernida-surface);
  border: 1px solid var(--lernida-border);
  border-radius: var(--lernida-radius-card-lg);
  padding: var(--lernida-space-3);
}
.lernida-flow__step.is-current { box-shadow: var(--lernida-shadow-md); border-color: var(--lernida-border-strong); }
.lernida-flow__step.is-upcoming { background: transparent; border-style: dashed; }
.lernida-flow__step.is-done { background: var(--lernida-secondary-soft); border-color: transparent; padding: var(--lernida-space-2) var(--lernida-space-3); }
@media (min-width: 768px) { .lernida-flow__step { padding: var(--lernida-space-4); } }

.lernida-flow__title { display: flex; align-items: center; gap: 12px; font-size: 1.25rem !important; font-weight: 800; }
.lernida-flow__step.is-upcoming .lernida-flow__title { color: var(--lernida-muted); }
.lernida-flow__title--done { font-size: .875rem !important; font-weight: 700; color: var(--lernida-secondary-ink); text-transform: uppercase; letter-spacing: .06em; }
.lernida-flow__num {
  display: inline-flex; flex: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--lernida-primary); color: #fff; font-size: .9375rem; font-weight: 800; text-transform: none; letter-spacing: 0;
}
.lernida-flow__step.is-upcoming .lernida-flow__num { background: var(--lernida-disabled-bg); color: var(--lernida-disabled-text); }
.lernida-flow__title--done .lernida-flow__num { background: var(--lernida-secondary-ink); }
.lernida-flow__hint { margin: 6px 0 0 44px !important; color: var(--lernida-muted); font-size: .9375rem; }
.lernida-flow__chosen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--lernida-space-2); margin: 4px 0 0 44px !important; }
.lernida-flow__chosen strong { font-size: 1.25rem; color: var(--lernida-text); }
.lernida-flow__change { font-weight: 700; font-size: .9375rem; color: var(--lernida-link); text-underline-offset: 3px; }

/* Kacheln (Klasse, Fach) */
.lernida-tiergroup { margin-top: var(--lernida-space-3); border-left: 4px solid var(--accent); padding-left: var(--lernida-space-2); }
.lernida-tiergroup__label { font-weight: 800; margin-bottom: var(--lernida-space-1) !important; }
.lernida-tiergroup__label span { margin-left: 8px; font-weight: 600; color: var(--lernida-muted); }
.lernida-picks { display: grid; gap: var(--lernida-space-1); grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); margin-top: var(--lernida-space-2) !important; }
.lernida-tiergroup .lernida-picks { margin-top: 0 !important; }
.lernida-picks--subjects { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.lernida-page .lernida-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  min-height: 76px; padding: 12px 16px;
  border: 1.5px solid var(--lernida-border-strong); border-radius: var(--lernida-radius-card);
  background: var(--lernida-surface); color: var(--lernida-text);
  text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.lernida-page .lernida-pick:hover { border-color: var(--lernida-primary); background: var(--lernida-primary-soft); color: var(--lernida-text); }
.lernida-pick__main { font-size: 1.375rem; font-weight: 800; line-height: 1.2; }
.lernida-pick--subject .lernida-pick__main { font-size: 1.125rem; }
.lernida-pick__sub { font-size: .8125rem; font-weight: 600; color: var(--lernida-muted-strong); }
@media (prefers-reduced-motion: no-preference) { .lernida-page .lernida-pick:hover { transform: translateY(-2px); } }

/* Themen-Karten: ganze Karte klickbar (Link im Titel, ::after spannt die Karte auf) */
.lernida-catalog__count { margin: var(--lernida-space-1) 0 0 !important; font-weight: 700; color: var(--lernida-muted-strong); }
.lernida-topics { display: grid; gap: var(--lernida-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); margin-top: var(--lernida-space-3) !important; }
.lernida-topic {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: var(--lernida-background); border: 1px solid var(--lernida-border); border-top: 4px solid var(--accent);
  border-radius: var(--lernida-radius-card); padding: var(--lernida-space-3);
  transition: box-shadow .15s ease, transform .15s ease;
}
.lernida-topic:hover { box-shadow: var(--lernida-shadow-md); }
.lernida-topic__title { font-size: 1.0625rem !important; font-weight: 800; }
.lernida-page .lernida-topic__link { color: var(--lernida-text); text-decoration: none; outline: none; box-shadow: none; }
.lernida-page .lernida-topic__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--lernida-radius-card); }
.lernida-page .lernida-topic__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lernida-page .lernida-topic__link:focus-visible::after { outline: 3px solid var(--lernida-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lernida-focus-ring); }
.lernida-topic__desc { flex: 1; color: var(--lernida-muted-strong); font-size: .9375rem; }
.lernida-topic__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 !important; }
.lernida-topic__cta { margin-left: auto; font-weight: 700; font-size: .9375rem; color: var(--lernida-link); }
@media (prefers-reduced-motion: no-preference) { .lernida-topic:hover { transform: translateY(-2px); } }

/* Gewähltes Thema: Aktion + Beispielblatt */
.lernida-detail {
  margin-top: var(--lernida-space-3);
  background: var(--lernida-surface); border: 1px solid var(--lernida-border); border-top: 6px solid var(--accent);
  border-radius: var(--lernida-radius-card-lg); box-shadow: var(--lernida-shadow-md); padding: var(--lernida-space-3);
  display: grid; gap: var(--lernida-space-1);
}
@media (min-width: 768px) { .lernida-detail { padding: var(--lernida-space-5); } }
.lernida-detail__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important; font-weight: 800; }
.lernida-detail__meta { font-weight: 700; color: var(--lernida-secondary-ink); }
.lernida-detail__desc { color: var(--lernida-muted-strong); max-width: 70ch; }
.lernida-detail__ask { margin-top: var(--lernida-space-2) !important; font-weight: 800; }
.lernida-detail__note { font-size: .9375rem; color: var(--lernida-muted-strong); }
.lernida-detail .lernida-actions { margin-top: 4px; }
.lernida-examplesheet {
  margin-top: var(--lernida-space-3); padding-top: var(--lernida-space-3); border-top: 1px solid var(--lernida-border);
  display: grid; gap: var(--lernida-space-3); align-items: start;
}
.lernida-examplesheet__img { width: 100%; max-width: 360px; height: auto; border: 1px solid var(--lernida-border); border-radius: 12px; background: #fff; box-shadow: var(--lernida-shadow-md); }
.lernida-examplesheet__body { display: grid; gap: var(--lernida-space-1); align-content: start; }
.lernida-examplesheet__hint { font-size: .9375rem; color: var(--lernida-muted-strong); }
@media (min-width: 768px) { .lernida-examplesheet { grid-template-columns: 360px 1fr; } }
.lernida-catalog__empty { color: var(--lernida-muted-strong); margin: var(--lernida-space-2) 0 0 !important; }

/* Abgeschlossene Schritte: eine kompakte Zeile (Label · Wert · ändern) statt einer hohen Karte */
.lernida-flow__step.is-done { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--lernida-space-2); padding: 12px var(--lernida-space-3); }
.lernida-page .lernida-flow__step.is-done .lernida-flow__chosen { margin: 0 !important; }
@media (min-width: 768px) { .lernida-page .lernida-flow__step.is-done .lernida-flow__title--done { min-width: 104px; } }

/* --- Beispielblätter: stufenweise Auswahl und Lernida-Ansicht (/beispiele/) ------ */
.ld-library, .ld-viewer { max-width: 960px; margin: 0 auto; padding: var(--lernida-space-3) 16px; }
.ld-library__step { margin-bottom: var(--lernida-space-3); }
.ld-library__step-title { font-size: 1.125rem; margin: 0 0 var(--lernida-space-1); }
.ld-library__choices, .ld-library__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--lernida-space-1); }
.ld-chip { display: inline-block; min-height: 44px; padding: 10px 16px; border: 2px solid #7a8499; border-radius: 999px; background: var(--lernida-surface); color: var(--lernida-ink); font-weight: 600; text-decoration: none; }
.ld-chip:hover { border-color: var(--lernida-primary); }
.ld-chip[aria-current="true"] { background: var(--lernida-primary); border-color: var(--lernida-primary); color: #fff; }
.ld-library__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ld-sample-card { background: var(--lernida-surface); border: 1px solid var(--lernida-border); border-radius: 16px; padding: var(--lernida-space-3); display: grid; gap: var(--lernida-space-1); align-content: start; overflow-wrap: anywhere; }
.ld-sample-card__title { font-size: 1.0625rem; margin: 0; }
.ld-sample-card__meta { font-size: .8125rem; font-weight: 700; color: var(--lernida-secondary-ink); margin: 0; }
.ld-sample-card__review { font-size: .8125rem; font-weight: 700; background: var(--lernida-accent-soft); color: var(--lernida-accent-ink); padding: 4px 8px; border-radius: 8px; }
.ld-btn { display: inline-block; min-height: 44px; padding: 10px 18px; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; }
.ld-btn--primary { background: var(--lernida-primary); color: #fff; }
.ld-btn--primary:hover { background: var(--lernida-primary-strong); }
.ld-viewer__title { margin: 0 0 var(--lernida-space-1); }
.ld-viewer__pdf { display: block; width: 100%; height: 80vh; min-height: 480px; border: 1px solid var(--lernida-border); border-radius: 12px; background: #fff; }
.lernida-catalog__hint { margin: var(--lernida-space-2) 0; padding: var(--lernida-space-2) var(--lernida-space-3); background: var(--lernida-surface); border: 1px solid var(--lernida-border); border-radius: var(--lernida-radius, 8px); color: var(--lernida-ink); }

/* --- Alterstier-Farbakzente ------------------------------------------------
   [data-current-age] setzt --accent/--accent-soft/--accent-deep/--accent-ink
   in colors.css. Hier nutzen wir sie als dezente Akzente auf Karten, Chips
   und dem Generator — Grundschule warm-orange, Sek I kühl-türkis.
   Regel: Auf den Stufenflächen immer dunkler Text (#1f1d36), nie Weiß.     */

/* Generator-Karte: tier-farbiger Top-Border */
.lernida-card--generator {
  border-top: 4px solid var(--accent);
  transition: border-color .25s ease;
}

/* Klassen-Chips im Generator: selektierter Chip in Tier-Farbe */
[data-current-age] .lernida-chip__input[data-tier]:checked + .lernida-chip__text {
  background: var(--accent);
  border-color: var(--accent-deep);
  color: var(--accent-on, #1f1d36);
}
[data-current-age] .lernida-chip__input[data-tier]:checked + .lernida-chip__text::before {
  color: inherit;
}

/* Beispielblatt-Karten auf der Startseite: tier-farbiger Top-Border */
.lernida-sample[data-current-age] {
  border-top: 4px solid var(--accent);
}

/* Beispielblatt-Karten auf /beispiele/: tier-farbiger Top-Border */
.ld-sample-card[data-current-age] {
  border-top: 4px solid var(--accent);
}

/* Badge "Verfügbar"/"In Vorbereitung" in Klassenstufen-Karten */
[data-current-age] .lernida-badge--ok {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Pill (Hero "Für Eltern von…"): dezent in Tier-Farbe */
[data-current-age] .lernida-pill {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Themen-Tiergruppen-Label: Tier-Akzent */
.lernida-tiergroup[data-current-age] .lernida-tiergroup__label {
  color: var(--accent-deep);
}

/* Layout 390 px: Tippflächen >= 44 px, Chips linksbündig, Viewer-Höhe auf dem Handy */
.lernida-link, .lernida-flow__change { min-height: 44px; align-items: center; }
.lernida-link { display: inline-flex; }
.lernida-flow__change { display: inline-flex; padding-inline: 4px; }
.ld-library__choices, .ld-library__list { justify-content: flex-start; }
.ld-viewer__pdf a { display: inline-block; min-height: 44px; line-height: 44px; }
@media (max-width: 480px) {
  .ld-viewer__pdf { height: 70vh; min-height: 420px; }
}

/* ==========================================================================
   Photo-Exercise Widget (F16)
   ========================================================================== */

.lernida-photo-exercise {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Stepper */
.lernida-photo-stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  gap: 4px;
}
.lernida-photo-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--lernida-border, #e3e6ee);
  color: var(--lernida-muted, #626b7e);
  font-size: 0.85rem;
  transition: background 0.2s, color 0.2s;
}
.lernida-photo-step--active {
  background: var(--lernida-primary, #0b6e5a);
  color: #fff;
}
.lernida-photo-step--done {
  background: var(--lernida-bg-soft, #dff5f0);
  color: var(--lernida-primary-strong, #0b4f43);
}
.lernida-photo-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.8rem;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.lernida-photo-step--active .lernida-photo-step__num { background: rgba(255,255,255,0.3); }
.lernida-photo-step--done .lernida-photo-step__num { background: var(--lernida-primary, #0b6e5a); color: #fff; }
.lernida-photo-step__label { display: none; }
@media (min-width: 600px) {
  .lernida-photo-step__label { display: inline; }
}

/* Dropzone */
.lernida-photo-dropzone {
  border: 2px dashed var(--lernida-border, #e3e6ee);
  border-radius: 12px;
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lernida-photo-dropzone:hover,
.lernida-photo-dropzone:focus-visible,
.lernida-photo-dropzone--hover {
  border-color: var(--lernida-primary, #0b6e5a);
  background: var(--lernida-bg-soft, #dff5f0);
}
.lernida-photo-dropzone:focus-visible {
  outline: 3px solid var(--lernida-accent-teal, #1fb5b0);
  outline-offset: 2px;
}
.lernida-photo-dropzone__icon { font-size: 2.5rem; margin-bottom: 12px; }
.lernida-photo-dropzone__title { font-weight: 600; margin: 0 0 4px; color: var(--lernida-ink, #1f1d36); }
.lernida-photo-dropzone__formats { font-size: 0.85rem; color: var(--lernida-muted, #626b7e); margin: 0; }
.lernida-photo-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Confirm Form */
.lernida-photo-confirm { display: flex; flex-direction: column; gap: 16px; }
.lernida-photo-confirm h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--lernida-ink, #1f1d36); }
.lernida-photo-field { display: flex; flex-direction: column; gap: 4px; }
.lernida-photo-field label { font-size: 0.85rem; font-weight: 600; color: var(--lernida-muted, #3a465e); }
.lernida-photo-select,
.lernida-photo-input,
.lernida-photo-textarea {
  padding: 10px 12px;
  border: 1px solid var(--lernida-border-ctrl, #7a8499);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--lernida-ink, #1f1d36);
  background: var(--lernida-surface, #fff);
}
.lernida-photo-select:focus,
.lernida-photo-input:focus,
.lernida-photo-textarea:focus {
  outline: 3px solid var(--lernida-accent-teal, #1fb5b0);
  outline-offset: 1px;
  border-color: var(--lernida-primary, #0b6e5a);
}

/* Difficulty Slider */
.lernida-photo-difficulty { margin: 8px 0; }
.lernida-photo-difficulty > label { font-size: 0.85rem; font-weight: 600; color: var(--lernida-muted, #3a465e); display: block; margin-bottom: 8px; }
.lernida-photo-diff-row { display: flex; align-items: center; gap: 12px; }
.lernida-photo-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--lernida-border, #e3e6ee);
  border-radius: 3px;
  outline: none;
}
.lernida-photo-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lernida-primary, #0b6e5a);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.lernida-photo-slider:focus-visible { outline: 3px solid var(--lernida-accent-teal, #1fb5b0); outline-offset: 2px; }
.lernida-photo-diff-label { font-weight: 600; white-space: nowrap; color: var(--lernida-primary, #0b6e5a); min-width: 120px; }
.lernida-photo-diff-desc { font-size: 0.85rem; color: var(--lernida-muted, #626b7e); margin: 4px 0 0; }

/* Loading / Spinner */
.lernida-photo-loading { text-align: center; padding: 48px 16px; }
.lernida-photo-spinner {
  width: 40px; height: 40px; margin: 0 auto 16px;
  border: 3px solid var(--lernida-border, #e3e6ee);
  border-top-color: var(--lernida-primary, #0b6e5a);
  border-radius: 50%;
  animation: lernida-spin 0.8s linear infinite;
}
@keyframes lernida-spin { to { transform: rotate(360deg); } }

/* Error */
.lernida-photo-error {
  background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px;
  padding: 16px; margin-bottom: 16px; text-align: center;
}
.lernida-photo-error p { margin: 0 0 12px; color: #991b1b; }

/* Download */
.lernida-photo-download { text-align: center; padding: 32px 16px; }
.lernida-photo-success-icon { font-size: 3rem; margin-bottom: 16px; }
.lernida-photo-download h3 { margin: 0 0 24px; color: var(--lernida-ink, #1f1d36); }
.lernida-photo-download .lernida-btn { margin: 0 8px 12px; }

/* Coming soon / Login */
.lernida-photo-coming-soon,
.lernida-photo-login { text-align: center; padding: 48px 16px; }
.lernida-photo-login .lernida-btn { margin-top: 16px; }