/* FFL-Entwürfe · Wissen (Teil 3) · Stand 15.10.2026
   Hell und ruhig wie die Beratung, gedacht als Lab-Notizbuch (Entscheidung 27): viel Weißraum, Lesebreite 60 Zeichen,
   Punktformen der Kulturen als Erkennungszeichen oben, echte Mikroskop-Fotos unten (Entscheidung 30).
   Ergänzt basis.css und events.css (Nachbarn, Kopf, Fußzeile), ändert dort nichts. */

/* Bereichszeile: kurze Wörter („Koji“) bekommen trotzdem 44 px Zielbreite */
.bereich a { min-width: 2.75rem; justify-content: center; }

/* ---------- Kopf einer Wissensseite: Thema, Kurzantwort, Notizkopf, Punkt-Grafik der Kultur ---------- */
.wkopf { padding-top: var(--s48); padding-bottom: var(--s64); }
.wkopf .innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s32) var(--s64); align-items: center; }
.wkopf h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); letter-spacing: -.012em; }
.kurzantwort { margin-top: var(--s24); font-size: clamp(1.1875rem, 1.8vw, 1.4375rem); line-height: 1.5; max-width: 36rem; color: var(--color-ink); }
.notiz { display: flex; flex-wrap: wrap; gap: var(--s12) var(--s32); margin: var(--s32) 0 0; padding-top: var(--s16); border-top: 1px solid var(--color-mist); font-size: var(--font-size-small); }
.notiz div { display: grid; gap: 2px; }
.notiz dt { color: var(--nebentext); }
.notiz dd { margin: 0; font-weight: 600; color: var(--color-navy); }
.notiz a { color: inherit; }
.kultur { margin: 0; justify-self: center; width: min(100%, 30rem); }
.kultur canvas { display: block; width: 100%; aspect-ratio: 1; }
.kultur figcaption { text-align: center; margin-top: 0; }
@media (max-width: 47.99rem) {
  .wkopf { padding-top: var(--s24); padding-bottom: var(--s48); }
  /* Handy: Pfad zuerst, die Punktform steht klein rechts neben dem Titel */
  .wkopf .innen { grid-template-columns: minmax(0, 1fr) 7.5rem; column-gap: var(--s8); row-gap: 0; }
  .wkopf .innen > div:first-child { display: contents; }
  .wkopf .pfad { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--s8); }
  .wkopf h1 { font-size: 2.75rem; grid-column: 1; grid-row: 2; align-self: center; }
  .kultur { grid-column: 2; grid-row: 2; width: 7.5rem; justify-self: end; }
  .kurzantwort, .notiz { grid-column: 1 / -1; }
  .kurzantwort { font-size: 1.125rem; margin-top: var(--s16); }
  .kultur figcaption { display: none; }
  .notiz { gap: var(--s8) var(--s24); margin-top: var(--s24); }
}

/* ---------- Körper: Inhaltsverzeichnis links (nur Rechner), Text rechts in Lesebreite ---------- */
.wkoerper { padding-top: var(--s48); border-top: 1px solid var(--color-mist); }
.wkoerper .innen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--s48) var(--s64); align-items: start; }
.inhalt { position: sticky; top: calc(var(--kopf-hoehe) + var(--s32)); font-size: var(--font-size-small); }
.inhalt p { font-weight: 600; color: var(--nebentext); margin-bottom: var(--s8); }
.inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--color-mist); }
.inhalt a { display: block; padding: var(--s8) var(--s16); margin-left: -2px; border-left: 2px solid transparent; color: var(--color-navy); text-decoration: none; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) { .inhalt a:hover { border-left-color: var(--color-pink); } }
.artikel { max-width: 42rem; }
.artikel > section + section { margin-top: var(--s64); }
.artikel h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.12; scroll-margin-top: calc(var(--kopf-hoehe) + var(--s24)); }
.artikel p { margin-top: var(--s16); }
.artikel p:first-of-type { margin-top: var(--s16); }
.artikel figure { margin-top: var(--s32); }
.artikel figure img { aspect-ratio: 4 / 3; }
.artikel figure.hoch img { aspect-ratio: 4 / 5; max-width: 22rem; }
.artikel .textlink { font-weight: 600; }
@media (max-width: 63.99rem) {
  .wkoerper .innen { grid-template-columns: minmax(0, 1fr); }
  .inhalt { display: none; }
}

/* Häufige Fehler: Fehler links, was hilft rechts (wie eine Zeile im Laborbuch) */
.fehler { margin: var(--s24) 0 0; display: grid; }
.fehler div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s8) var(--s24); padding: var(--s16) 0; border-top: 1px solid var(--color-mist); }
.fehler div:last-child { border-bottom: 1px solid var(--color-mist); }
.fehler dt { font-weight: 600; color: var(--color-navy); }
.fehler dd { margin: 0; }
@media (max-width: 47.99rem) { .fehler div { grid-template-columns: minmax(0, 1fr); gap: var(--s4); } }

/* Mikroskop: echtes Foto als Beleg, mit Namensnennung (02_Fotos/Mikroskop/LIZENZEN.md) */
.mikroskop { margin: 0; padding-top: var(--s32); border-top: 2px solid var(--color-navy); }
.mikroskop h2 { margin-bottom: var(--s24); }
.artikel .mikroskop img { aspect-ratio: auto; width: 100%; border-radius: var(--radius-image); }
.mikroskop figcaption { max-width: 40rem; }
.mikroskop figcaption a { color: inherit; }

/* Quellen, Prüfvermerk, Lizenz: klein, aber vollständig */
.quellen ol { margin: var(--s16) 0 0; padding-left: 1.25rem; display: grid; gap: var(--s8); font-size: var(--font-size-small); }
.vermerk { display: grid; gap: var(--s8); margin-top: var(--s48); padding-top: var(--s24); border-top: 1px solid var(--color-mist); font-size: var(--font-size-small); color: var(--nebentext); }
.vermerk strong { color: var(--color-navy); }
.vermerk a { color: var(--color-navy); }

/* Anschluss: was passt als Nächstes (Konzept Abschnitt 2) */
.anschluss .innen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s32) var(--s64); align-items: center; }
.anschluss p { margin-top: var(--s16); max-width: 36rem; font-size: var(--font-size-lead); }
.anschluss .knopfreihe { margin-top: var(--s32); }
.anschluss .wahl-zwei { display: grid; gap: var(--s24); margin-top: var(--s32); }
.anschluss .wahl-zwei > div { padding-top: var(--s16); border-top: 2px solid var(--color-navy); }
.anschluss .wahl-zwei h3 { font-size: var(--font-size-title-2); }
.anschluss .wahl-zwei p { font-size: var(--font-size-body); margin-top: var(--s8); }
.anschluss .wahl-zwei .knopfreihe { margin-top: var(--s16); }
.anschluss .form { width: min(100%, 20rem); justify-self: center; }
@media (max-width: 47.99rem) {
  .anschluss .innen { grid-template-columns: minmax(0, 1fr); }
  .anschluss .form { width: 9rem; justify-self: start; order: -1; }
  .anschluss .knopf { width: 100%; }
}

/* ---------- Übersicht: Türen zu den Themen, jede mit der Punktform ihrer Kultur ---------- */
.wuebersicht .einleitung { margin-top: var(--s24); max-width: 40rem; }
.tueren { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--s24); margin-top: var(--s48); }
.tuer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: var(--s16) var(--s24); align-items: start; padding: var(--s24); border-radius: var(--radius-image); background: var(--color-surface-soft); color: inherit; text-decoration: none; transition: transform 160ms var(--ease-out); }
.tuer:active { transform: scale(0.99); }
.tuer canvas { width: 9rem; aspect-ratio: 1; grid-column: 2; grid-row: 1 / span 3; }
.tuer h2 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); hyphens: manual; overflow-wrap: break-word; }
.tuer--gross h2 { font-size: var(--font-size-title-1); }
.tuer p { max-width: 30rem; }
.tuer .tuer__weiter { font-weight: 600; color: var(--color-navy); text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tuer--gross { grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-content: space-between; }
.tuer--gross canvas { grid-column: 1; grid-row: auto; width: min(100%, 22rem); justify-self: center; order: -1; }
.tuer--breit { grid-column: 1 / -1; background: #fff; border: 1.5px solid var(--color-mist); }
@media (hover: hover) and (pointer: fine) { .tuer:hover .tuer__weiter { text-decoration-color: currentColor; } }
@media (max-width: 63.99rem) { .tueren { grid-template-columns: minmax(0, 1fr); } .tuer--gross { grid-row: auto; } }
@media (max-width: 47.99rem) {
  .tuer { grid-template-columns: minmax(0, 1fr) 6rem; padding: var(--s16); }
  .tuer canvas { width: 6rem; }
  .tuer--gross { grid-template-columns: minmax(0, 1fr) 6rem; }
  .tuer--gross canvas { grid-column: 2; grid-row: 1 / span 3; width: 6rem; order: 0; }
}
.wlizenz { margin-top: var(--s48); max-width: 44rem; font-size: var(--font-size-small); color: var(--nebentext); }

/* Ausgeblendete Plätze (data-entwurf="spaeter") bleiben aus, auch wenn die Zeile sonst grid ist */
.notiz [hidden], .vermerk [hidden] { display: none; }

/* Punktform im Anschluss: quadratische Fläche */
.anschluss canvas.form { aspect-ratio: 1; display: block; }