/* Lernreise, Formate, kleine Schritte (KI-Kompetenz, seit 04.10.2026)
   Nur für learning.html. Farben, Schriften, Abstände aus tokens/*.css; die
   Grundklassen (sv-section, sv-wrap, sv-card, sv-button) kommen aus
   visibility.css. Karten ohne Schatten (Hairline), Schatten nur warm-braun. */

.lr-wrap-links { text-align: left; }

/* ── Auswahl ───────────────────────────────────────────────────────────
   Ein Kasten, drei Zeilen: links die Frage, rechts drei gleich breite
   Felder. Darunter hängt die Zusammenfassung als Fuss desselben Kastens. */
/* Schwebend steht die Frage neben den Feldern statt auf dem Rahmen. */
/* Format-Links unter den Stationen der Zeitleiste */
.lr-chip {
  display: inline-block; padding: 5px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  background: var(--peach-150); color: var(--terra-600);
  font-size: 13px; font-weight: var(--weight-bold); text-decoration: none; line-height: 1.3;
}
.lr-chip:hover, .lr-chip:focus-visible { background: var(--peach-200); }

/* ── Formate ─────────────────────────────────────────────────────────── */
.lr-formate {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-11);
}
.lr-format {
  --lr-spalten: 4;
  flex: 0 0 calc((100% - (var(--lr-spalten) - 1) * var(--space-4)) / var(--lr-spalten));
  min-width: 0;
  scroll-margin-top: 96px;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0 var(--space-5) var(--space-6);
  box-sizing: border-box;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  text-align: left;
  overflow: hidden;
}
.lr-format__bild {
  margin: 0 calc(-1 * var(--space-5)) var(--space-4);
  height: 190px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-top: var(--space-4);
  background: radial-gradient(70% 70% at 50% 60%, var(--peach-200) 0%, var(--peach-150) 55%, var(--sand-200) 100%);
  border-bottom: 1px solid var(--border-strong);
  box-sizing: border-box;
}
.lr-format__bild img { height: 100%; width: auto; max-width: 92%; object-fit: contain; object-position: center bottom; display: block; }
.lr-format h3 { margin: 0 0 var(--space-3); color: var(--text-strong); font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); }
.lr-format p { margin: 0 0 var(--space-3); color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body); }
.lr-format p strong { color: var(--terra-600); font-weight: var(--weight-bold); }
.lr-format__preis {
  margin: auto 0 0 !important;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-strong);
  font-family: var(--font-mono);
  font-size: var(--text-overline) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  text-transform: uppercase;
  color: var(--terra-600) !important;
  line-height: 1.55 !important;
}
.lr-format__preis span { white-space: nowrap; }
.lr-format__preis small { display: block; text-transform: none; letter-spacing: 0; font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }

.lr-satz { margin: var(--space-9) auto 0; max-width: 62ch; color: var(--text-body); font-size: var(--text-lead); line-height: var(--leading-relaxed); }
.lr-satz strong { color: var(--text-strong); }

/* ── Für wen / wie wir arbeiten ──────────────────────────────────────── */
.lr-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-11); text-align: left; }
.lr-zwei .sv-card { align-items: flex-start; text-align: left; }
.lr-liste-punkte { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lr-liste-punkte li { position: relative; padding-left: 26px; color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body); }
.lr-liste-punkte li::before { content: "→"; position: absolute; left: 0; color: var(--terra-500); font-weight: 700; }

/* ── Handy und Tablet ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lr-format { --lr-spalten: 3; }
}

@media (max-width: 860px) {
  .lr-format { --lr-spalten: 2; }
  .lr-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lr-format { --lr-spalten: 1; }
}


/* ── Formate: Zeilen über alle Kacheln gleich hoch (Ergänzung 2026-10-11) ──
   Bild, Titel, «Was es ist», «Wann es passt» und Preis liegen je auf einer
   gemeinsamen Zeile des Rasters, darum sitzen Trennlinie und Preis in jeder
   Kachelreihe auf gleicher Höhe. Ohne Subgrid bleibt die Flex-Fassung oben. */
@supports (grid-template-rows: subgrid) {
  .lr-formate { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
  .lr-format { display: grid; grid-template-rows: subgrid; grid-row: span 5; grid-column: span 2; row-gap: 0; flex: none; width: auto; }
  .lr-format > * { min-width: 0; }
  .lr-format:nth-child(5) { grid-column: 2 / span 2; }
  .lr-format__preis { margin-top: 0 !important; align-self: start; }
  .lr-format__preise { align-self: start; }
  .lr-format__preise .lr-format__preis + .lr-format__preis { margin-top: var(--space-3) !important; }
  @media (max-width: 1100px) {
    .lr-formate { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lr-format:nth-child(5) { grid-column: auto / span 2; }
    .lr-format:nth-child(7) { grid-column: 3 / span 2; }
  }
  @media (max-width: 860px) {
    .lr-formate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lr-format:nth-child(7) { grid-column: 2 / span 2; }
  }
  @media (max-width: 560px) {
    .lr-formate { grid-template-columns: minmax(0, 1fr); }
    .lr-format, .lr-format:nth-child(5), .lr-format:nth-child(7) { grid-column: auto / span 1; }
  }
}

/* ── Formate kompakt (Ergänzung 2026-10-13) ─────────────────────────────
   Sieben Kacheln mit Symbol im Stil der Branchen-Symbole
   (assets/formate/*.webp), ohne Roboter. */
.lr-fx { max-width: 960px; margin: var(--space-11) auto 0; }
.lr-fx__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); text-align: left; }
.lr-fx__item { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-card); scroll-margin-top: 96px; }
.lr-fx__item:target { border-color: var(--terra-500); box-shadow: 0 0 0 2px var(--peach-200); }
.lr-fx__ico { flex: none; width: 64px; height: 64px; object-fit: contain; }
.lr-fx__item h3 { margin: 0 0 2px; color: var(--text-strong); font-size: 16.5px; line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
.lr-fx__item p { margin: 0; color: var(--text-body); font-size: var(--text-body-sm); line-height: var(--leading-body); }
.lr-fx__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .lr-fx__liste { grid-template-columns: minmax(0, 1fr); }
  .lr-fx__ico { width: 52px; height: 52px; }
}

/* Themen Top 10 (Ergänzung 2026-10-13) */
.tm-raster { list-style: none; margin: var(--space-11) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
.tm-kachel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-lg, 16px); background: var(--surface-card); text-align: left; box-sizing: border-box; }
.tm-ico { width: 36px; height: 36px; flex: none; margin-bottom: var(--space-2); color: var(--ink-900); }
.tm-ico .tm-akz { stroke: var(--terra-500); }
.tm-kachel h3 { margin: 0; font-size: 1.0625rem; line-height: 1.25; font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: 0; }
.tm-kachel p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text-body); }
.tm-fehlt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); margin-top: var(--space-4); padding: var(--space-5) var(--space-6); border: 2px dashed var(--border-strong); border-radius: var(--radius-lg, 16px); background: var(--cream-card); text-align: left; }
.tm-fehlt h3 { margin: 0 0 4px; font-size: 1.125rem; font-weight: var(--weight-semibold); color: var(--text-strong); }
.tm-fehlt p { margin: 0; color: var(--text-body); max-width: 52ch; }
.tm-werkzeuge { margin-top: var(--space-11); text-align: center; }
.tm-werkzeuge h3 { margin: 0; font-size: 1.125rem; font-weight: var(--weight-semibold); color: var(--text-strong); }
.tm-logos { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-9); }
.tm-logos li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.tm-logo { display: block; flex: none; width: 24px; height: 24px; background: var(--brown-600); -webkit-mask: var(--tm-bild) center / contain no-repeat; mask: var(--tm-bild) center / contain no-repeat; }
.tm-logo--openai { --tm-bild: url(../../assets/werkzeuge/openai.svg); }
.tm-logo--googlegemini { --tm-bild: url(../../assets/werkzeuge/googlegemini.svg); }
.tm-logo--claude { --tm-bild: url(../../assets/werkzeuge/claude.svg); }
.tm-logo--perplexity { --tm-bild: url(../../assets/werkzeuge/perplexity.svg); }
.tm-logo--deepl { --tm-bild: url(../../assets/werkzeuge/deepl.svg); }
.tm-logo--notion { --tm-bild: url(../../assets/werkzeuge/notion.svg); }
.tm-name { font-weight: var(--weight-semibold); font-size: 1rem; line-height: 1; color: var(--brown-600); letter-spacing: 0; }
.tm-marken { margin: var(--space-5) 0 0; font-size: 0.8125rem; color: var(--text-body); }
@media (max-width: 1100px) { .tm-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .tm-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .tm-kachel { padding: var(--space-4) var(--space-3); }
  .tm-kachel h3 { overflow-wrap: anywhere; hyphens: auto; font-size: 1rem; }
  .tm-fehlt { padding: var(--space-4); }
  .tm-logos { gap: var(--space-4) var(--space-6); }
}