/* ═══════════════════════════════════════════════════════════════
   johannaweiermann — Blog („Notizen“)

   Kommt NACH styles.css. Farben, Schriften, Fußzeile, .pill, .mark
   und .footbtn stammen von dort; hier steht nur, was der Blog anders
   braucht. Ändert sich eine Farbe, also nur in styles.css ändern.

   Beiträge haben eine Vorlage: .tpl-karte (C) – links die Karte mit
   Titelbild, die beim Scrollen stehen bleibt, rechts der Text.
   ═══════════════════════════════════════════════════════════════ */

/* Die Startseite ist genau einen Bildschirm hoch und scrollt nicht.
   Der Blog scrollt senkrecht – das hebt die Sperre aus styles.css auf. */
html, body { height: auto; }
body { overflow: visible; }

.blog {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: var(--pad);
}

/* ── Kopf: kleine Wortmarke, rechts der Weg zurück ─────────── */

.blog-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: var(--pad);
}

.blog-head .wordmark { font-size: clamp(1.75rem, 4.6vw, 3.1rem); }

.backlink {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  white-space: nowrap;
  transition: opacity .2s;
}

.backlink:hover { opacity: .55; }

/* ── Fußzeile ──────────────────────────────────────────────────
   Auf der Startseite steht sie von allein immer im Bild. Hier
   scrollt die Seite, also klebt sie unten fest – „Termin“ bleibt
   so auch mitten im Text erreichbar. Der orange Grund deckt ab,
   was darunter durchläuft. */

.blog .footbar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: auto;
  padding-bottom: calc(var(--pad) * .6);
  background: var(--orange);
}

/* ── Papierbogen ───────────────────────────────────────────────
   Dieselbe Papierfarbe wie die Rückseite von Karte 1, rundum gerundet
   wie jede Karte. Unten bleibt ein Streifen Orange bis zur Fußzeile,
   damit auch die unteren Ecken zu sehen sind. */

.sheet {
  flex: 1;
  margin: clamp(1.25rem, 3vh, 2.25rem) var(--pad) clamp(1rem, 2.5vh, 1.75rem);
  padding: clamp(1.4rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.sheet__in { max-width: 64rem; margin-inline: auto; }

/* ═══ Übersicht /blog ═══════════════════════════════════════ */

.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.sheet-title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(2.2rem, 4vw + 1rem, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}

.list-intro {
  max-width: 38rem;
  margin-top: 1rem;
  color: rgba(37, 62, 41, .72);
  font-size: clamp(1rem, .3vw + .95rem, 1.125rem);
  text-wrap: pretty;
}

/* Themen zum Filtern. Ohne Skript bleiben sie versteckt (hidden im
   HTML) – dann stehen einfach alle Beiträge da. */
.filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.sheet__in > .filters { margin-top: 2rem; }

.filters button {
  padding: .3rem .95rem;
  border: 1px solid rgba(37, 62, 41, .35);
  border-radius: 99px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}

.filters button:hover { background: rgba(37, 62, 41, .08); }

.filters button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.filters button:focus-visible,
.posts a:focus-visible,
.sheet a:focus-visible { outline-color: var(--ink); }

.postyear { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

.postyear__label {
  margin-bottom: .5rem;
  color: rgba(37, 62, 41, .55);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* Linien zwischen den Einträgen, keine nach dem letzten: Das Ende der
   Liste zeigt der runde Bogen selbst. */
.posts li { border-top: 1px solid rgba(37, 62, 41, .16); }

/* Die ganze Zeile ist der Link, nicht nur der Pfeil. */
.post {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto 4.2rem 1.25rem;
  grid-template-areas: "date title topic time arrow";
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.05rem 0;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s;
}

.post:hover { opacity: .6; }

.post__date  { grid-area: date;  color: rgba(37, 62, 41, .6); font-size: .9rem; font-variant-numeric: tabular-nums; }
.post__title { grid-area: title; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.3rem, 1vw + 1rem, 1.7rem); line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; }
.post__topic { grid-area: topic; }
.post__time  { grid-area: time;  color: rgba(37, 62, 41, .6); font-size: .9rem; text-align: right; white-space: nowrap; }
.post__arrow { grid-area: arrow; font-weight: 600; }

/* Thema als leise Pille mit Rand – die gefüllte .pill aus styles.css
   wäre in einer Liste mit vielen Zeilen zu laut. */
.topic {
  display: inline-block;
  padding: .12rem .7rem;
  border: 1px solid currentColor;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* Schmal: Datum und Lesezeit stehen klein über dem Titel. Das Thema
   fällt weg – solange alle Beiträge dasselbe haben, sagt es nichts. */
@media (max-width: 40em) {
  .post {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "date  time"
      "title title";
    gap: .3rem .45rem;
    padding: 1rem 0;
  }
  .post__arrow { display: none; }
  .post__date, .post__time { font-size: .8rem; letter-spacing: .02em; }
  .post__time { text-align: left; }
  .post__time::before { content: "·"; margin-right: .45rem; }
  .post__title { font-size: 1.22rem; line-height: 1.2; }
}

/* ═══ Gemeinsame Bausteine in Beiträgen ════════════════════ */

.prose {
  font-size: clamp(1.0625rem, .3vw + 1rem, 1.1875rem);
  line-height: 1.7;
  text-wrap: pretty;
}

.prose > * + * { margin-top: 1em; }

.prose h2 {
  margin-top: 2.1em;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.55rem, 1.2vw + 1.1rem, 2.05rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.012em;
  scroll-margin-top: 1.5rem;
  text-wrap: balance;
}

.prose h2 + * { margin-top: .7em; }

/* styles.css nimmt allen Listen die Punkte – im Fließtext braucht
   man sie wieder. */
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: rgba(37, 62, 41, .5); }

/* Nur schlichte Textlinks. Knöpfe und Weiterlesen-Karten tragen eine
   Klasse, bringen ihre eigene Farbe mit und bleiben ohne Unterstrich. */
.prose a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.prose strong { font-weight: 700; }

.lede {
  font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
}

/* „Kurz gesagt“: drei Sätze ganz oben. Genau solche Absätze
   übernehmen KI-Antworten am liebsten wörtlich. */
.tldr {
  padding: 1.1em 1.35em 1.2em;
  border: 1.5px solid currentColor;
  border-radius: 1rem;
  scroll-margin-top: 1.5rem;
}

.tldr__label {
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.tldr ul { margin-top: .5em; }

.meta {
  font-size: .95rem;
  opacity: .72;
  font-variant-numeric: tabular-nums;
}

/* ── Wer hier schreibt ───────────────────────────────────────
   Steht zweimal: oben als Zeile vor dem Text (.author--oben), unten
   am Ende. Dazu zwei Knöpfe, Newsletter und E-Mail. „Termin“ fehlt
   absichtlich, der steht ohnehin immer in der Fußzeile.
   Am Handy rücken die Knöpfe unter Foto und Text, über die volle
   Breite – neben dem Foto wäre für zwei Knöpfe kein Platz. */

.author {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  grid-template-areas:
    "img text"
    "img leiste";
  align-items: start;
  gap: 0 1.25rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(37, 62, 41, .18);
}

.author--oben {
  margin: 0 0 2rem;
  padding: 0 0 1.5rem;
  border-top: 0;
  border-bottom: 1px solid rgba(37, 62, 41, .18);
}

.author__img {
  grid-area: img;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 20%;
}

.author__text { grid-area: text; font-size: 1rem; line-height: 1.45; }
.author__text strong { font-weight: 700; }
.author .leiste { grid-area: leiste; }

@media (max-width: 40em) {
  .author {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    grid-template-areas:
      "img    text"
      "leiste leiste";
    gap: 0 1rem;
    align-items: center;
  }
  .author__img { width: 3.25rem; height: 3.25rem; }
}

/* ── Newsletter + E-Mail ─────────────────────────────────────
   „Newsletter abonnieren“ lädt das Anmeldeformular von Substack
   (iframe) erst nach dem Klick – vorher geht nichts dorthin. Das zählt
   doppelt: Das Formular holt sich selbst noch Schriften von Google und
   ein Skript von Sentry (geprüft am 6. 10. 2026). Ohne JavaScript ist
   der Knopf einfach ein Link auf die Abo-Seite bei Substack. */

.leiste { margin-top: .9rem; }
.sheet__in > .leiste { margin-top: 1.4rem; max-width: 38rem; }

.leiste__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Das Orange und die Randpille von .btn, so hoch wie „Termin“ */
.abo__knopf,
.mail__knopf {
  min-height: 2.75rem;
  padding: 0 1.3em;
  font-size: clamp(.95rem, .25vw + .9rem, 1.0625rem);
}

.abo__hinweis {
  max-width: 34rem;
  margin-top: .65rem;
  font-size: .8rem;
  line-height: 1.45;
  opacity: .72;
  text-wrap: pretty;
}

.abo__hinweis a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.abo__formular {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 150px;
  margin-bottom: .5rem;
  border: 0;
  background: transparent;
}

@media (max-width: 40em) {
  .leiste__knoepfe > * { flex: 1 1 auto; padding: 0 1em; }
}

/* Weiterlesen: zwei kleine Beitragskarten als Brücke zurück in die
   Kartenwelt. Farben kommen aus den .card--… Klassen in styles.css. */
.more { margin-top: 2.75rem; }

.more__label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .7;
}

.more__cards { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: .9rem; }

.minicard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(9.5rem, 34vw, 12.5rem);
  aspect-ratio: 5 / 7;
  padding: 1rem;
  border-radius: var(--radius);
  text-decoration: none;
  transition: box-shadow .3s var(--ease);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

.minicard:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .1); }

.minicard__title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.15rem, .8vw + .9rem, 1.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.minicard__meta { font-size: .85rem; font-weight: 600; opacity: .8; }

/* Platzhalter aus den Artikeln: [PLATZHALTER: …] im Markdown wird zu
   <span class="placeholder">. Absichtlich laut, damit keiner online
   geht. Suchen nach class="placeholder" findet alle offenen Stellen. */
.placeholder {
  padding: .05em .4em;
  border: 1.5px dashed currentColor;
  border-radius: .35em;
  background: rgba(219, 255, 133, .7);
  color: var(--ink);
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Prompt zum Kopieren, im Fließtext. Der Text steht in <pre id="…">,
   der Knopf zeigt mit data-copy auf dieselbe id.
   Aussehen wie der Code-Block bei Substack: flacher Kasten,
   Schreibmaschinenschrift, Zeilennummern, Kopier-Symbol oben rechts.
   Anders als dort brechen lange Zeilen um, statt seitlich zu
   scrollen; die Nummer steht vor dem Anfang der Zeile. */
.promptbox {
  position: relative;
  padding: .9rem 1.1rem 1rem .9rem;
  border-radius: 8px;
  background: var(--sand);
}

.promptbox__label {
  margin: 0 0 .55rem;
  padding: 0 2.5rem 0 .2rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .6;
}

.promptbox__code {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  counter-reset: zeile;
}

/* Die Zeilen setzt blog.js. Ohne Skript bleibt der Text ohne Nummern. */
.promptbox__zeile {
  display: block;
  position: relative;
  min-height: 1.55em;
  padding-left: 2.7em;
}

.promptbox__zeile::before {
  counter-increment: zeile;
  content: counter(zeile);
  position: absolute;
  left: 0;
  width: 1.7em;
  text-align: right;
  opacity: .4;
  -webkit-user-select: none;
  user-select: none;
}

/* Am Handy zählt jede Spalte: schmalerer Rand, Nummern enger. */
@media (max-width: 30rem) {
  .promptbox { padding: .8rem .8rem .9rem .55rem; }
  .promptbox__zeile { padding-left: 2.1em; }
  .promptbox__zeile::before { width: 1.3em; }
}

/* Beispiel aus dem Artikel (im Markdown ein > Zitat). */
.prose blockquote {
  margin: 0;
  padding: .9em 1.2em;
  border-left: 3px solid currentColor;
  background: rgba(37, 62, 41, .05);
  border-radius: 0 .8rem .8rem 0;
}

.prose blockquote p + p { margin-top: .8em; }

/* Hinweis auf einen Workshop: der Satz aus dem Artikel, die Adresse
   wird zum Knopf. */
.cta {
  padding: 1.1em 1.3em 1.25em;
  border-radius: 1rem;
  background: rgba(37, 62, 41, .07);
}

.cta .btn { margin-top: .9rem; font-size: 1rem; }

/* Quellenangaben am Ende: kleiner, sie gehören dazu, aber nicht in
   den Lesefluss. */
.sources { font-size: .9em; opacity: .85; }

/* Kopier-Symbol oben rechts im Prompt-Kasten (siehe blog.js). Mit
   Maus erscheint es, sobald man über den Kasten fährt; auf dem Handy
   steht es immer da. */
.copybtn {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .45rem;
  border: 1px solid rgba(37, 62, 41, .25);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s, border-color .2s;
}

.copybtn svg { flex: none; width: 16px; height: 16px; }
.copybtn:hover { border-color: var(--ink); }

/* Der Text im Knopf ist nur für Screenreader da, außer der Browser
   lässt nicht kopieren: dann steht dort „Markiert – jetzt kopieren“. */
.copybtn__text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.copybtn--markiert .copybtn__text { position: static; width: auto; height: auto; clip-path: none; }

@media (hover: hover) {
  .copybtn { opacity: 0; }
  .promptbox:hover .copybtn,
  .copybtn:focus-visible,
  .copybtn--kopiert,
  .copybtn--markiert { opacity: 1; }
}

/* ═══ C · Die Karte bleibt stehen ═══════════════════════════ */

.tpl-karte {
  display: grid;
  grid-template-columns: minmax(17rem, 25rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--gap);
  margin: clamp(1.25rem, 3vh, 2.25rem) var(--pad) clamp(1rem, 2.5vh, 1.75rem);
}

.tpl-karte__card {
  position: sticky;
  top: var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  /* Mindesthöhe statt fester Höhe: Ein langer Titel darf die Karte
     strecken, statt unten aus ihr herauszulaufen. Die 6rem halten
     beim ersten Blick Platz für den Kopf der Seite frei, sonst
     verdeckt die Fußzeile das untere Ende der Karte. */
  min-height: min(calc(100svh - var(--pad) * 2 - var(--foot-h) - 6rem), 42rem);
  padding: var(--body-pad);
  border-radius: var(--radius);
}

.pill--onDark { background: rgba(243, 236, 228, .16); }

.tpl-karte__title {
  margin-top: 1.1rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.9rem, 1.4vw + 1.25rem, 2.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.tpl-karte .meta { margin-top: .9rem; }

/* Ohne Zwischenüberschriften gibt es kein Inhaltsverzeichnis. Dann
   steht unten in der Karte der Auszug aus dem Frontmatter. */
.tpl-karte__excerpt {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  opacity: .85;
  text-wrap: pretty;
}

/* Inhaltsverzeichnis unten in der Karte. Der Abschnitt, in dem man
   gerade liest, bekommt aria-current (setzt blog.js). */
.cardtoc ol { margin: 0; padding: 0; list-style: none; }

.cardtoc li { border-top: 1px solid rgba(243, 236, 228, .2); }

.cardtoc a {
  display: flex;
  gap: .5em;
  padding: .5em 0;
  color: inherit;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  opacity: .62;
  transition: opacity .2s;
}

.cardtoc a:hover { opacity: 1; }
.cardtoc a[aria-current="true"] { opacity: 1; font-weight: 700; }
.cardtoc a[aria-current="true"]::before { content: "—"; }

.tpl-karte__text {
  min-height: 100%;
  padding: clamp(1.4rem, 4vw, 3.5rem) clamp(1.25rem, 4.5vw, 4rem) clamp(2rem, 6vw, 4rem);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.tpl-karte__text > * { max-width: 40rem; }

/* Schmal: Die Karte wird zum Kopf der Seite und scrollt mit weg.
   Das Inhaltsverzeichnis fällt weg – dafür ist kein Platz. */
@media (max-width: 60em) {
  .tpl-karte { grid-template-columns: 1fr; }
  .tpl-karte__card { position: static; min-height: 0; }
  .cardtoc { display: none; }
}

/* ═══ Bilder ════════════════════════════════════════════════
   Titelbilder liegen in assets/blog/<slug>.jpg. Quelle, Bildnachweis
   und Alt-Text stehen in assets/blog/bilder.txt. Fotos bleiben, wie
   sie sind (Bildstil S1), nur mit den runden Ecken der Karten.

   Fehlt eine Datei, nimmt blog.js das Bild heraus und die Seite sieht
   aus wie ohne Bild: kein kaputtes Bildsymbol, keine leere Fläche. */

/* Bildnachweis als kleines Etikett unten rechts auf dem Bild */
.credit {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  padding: .12rem .55rem;
  border-radius: 99px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Ü1 · Kleines Bild vorne in der Zeile ────────────────────
   Hochkant 5 : 7 wie jede Karte. Der Rahmen trägt die Kartenfarbe
   des Beitrags: Fehlt das Bild, bleibt eine Mini-Karte stehen. */

.post--bild {
  grid-template-columns: 2.6rem 4.5rem minmax(0, 1fr) auto 4.2rem 1.25rem;
  grid-template-areas: "bild date title topic time arrow";
  align-items: center;
}

.post__bild {
  grid-area: bild;
  display: block;
  width: 2.6rem;
  aspect-ratio: 5 / 7;
  border-radius: .45rem;
  overflow: hidden;
}

.post__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Am Handy: Bild größer und links über beide Zeilen, rechts oben
   Datum und Lesezeit, darunter der Titel. */
@media (max-width: 40em) {
  .post--bild {
    grid-template-columns: 4.6rem auto minmax(0, 1fr);
    grid-template-areas:
      "bild date  time"
      "bild title title";
    /* Das Bild ist höher als Datum und Titel zusammen. Den Rest soll die
       Titelzeile schlucken, sonst klafft zwischen Datum und Titel ein Loch. */
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: .3rem .45rem;
  }
  .post__bild { width: 4.6rem; grid-row: 1 / 3; margin-right: .55rem; border-radius: .6rem; }
}

/* Am Handy steht die Kategorie als Wort in der Zeile über dem Titel,
   ohne Rahmen: Datum · Lesezeit · Kategorie. */
@media (max-width: 40em) {
  .post {
    grid-template-areas:
      "date  time  topic"
      "title title title";
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .post--bild {
    grid-template-columns: 4.6rem auto auto minmax(0, 1fr);
    grid-template-areas:
      "bild date  time  topic"
      "bild title title title";
  }
  .post__topic .topic {
    padding: 0;
    border: 0;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(37, 62, 41, .75);
  }
  .post__topic::before { content: "·"; margin-right: .45rem; color: rgba(37, 62, 41, .6); font-size: .8rem; }
}

/* ── Ü4 · Bildkarten (Vergleichsversion) ─────────────────────── */

.bildkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--gap);
}

.bildkarte {
  display: flex;
  flex-direction: column;
  aspect-ratio: 5 / 7;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .3s var(--ease);
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0);
}

.bildkarte:hover { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .1); }

.bildkarte__bild { flex: 0 0 50%; min-height: 0; }
.bildkarte__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bildkarte__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .85rem .9rem;
}

.bildkarte__meta { font-size: .78rem; font-weight: 600; opacity: .75; }

.bildkarte__title {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.05rem, .5vw + .9rem, 1.25rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Ohne Bild wird die Karte zur Titelkarte. */
.bildkarte:not(:has(.bildkarte__bild)) .bildkarte__title { font-size: clamp(1.4rem, 1vw + 1rem, 1.8rem); }

/* Am Handy eine Karte pro Zeile: Bild quer oben, darunter Datum und
   Titel groß. Zwei Spalten wären für diese Titel zu schmal. */
@media (max-width: 40em) {
  .bildkarten { grid-template-columns: 1fr; gap: 1rem; }
  .bildkarte { aspect-ratio: auto; }
  .bildkarte__bild { flex: none; aspect-ratio: 3 / 2; }
  .bildkarte__text { padding: 1rem 1.1rem 1.2rem; gap: .4rem; }
  .bildkarte__title { font-size: 1.5rem; }
}

/* Umschalter Liste / Bildkarten – nur solange verglichen wird.
   Ein Schalter mit zwei Hälften statt zwei loser Pillen. */
.vergleich {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 99px;
  background: rgba(37, 62, 41, .08);
}

.vergleich a {
  padding: .32rem .9rem;
  border-radius: 99px;
  color: var(--ink);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s;
}

.vergleich a:hover { background: rgba(37, 62, 41, .08); }
.vergleich a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* ── C2 · Bild oben in der Karte ─────────────────────────────── */

.tpl-karte__card--bild { justify-content: flex-start; gap: 1.1rem; overflow: hidden; }

.tpl-karte__bild {
  position: relative;
  margin: calc(var(--body-pad) * -1) calc(var(--body-pad) * -1) 0;
}

.tpl-karte__bild img { display: block; width: 100%; height: min(17rem, 34svh); object-fit: cover; }

/* Datum rutscht nach unten, der Auszug hat neben dem Bild keinen Platz. */
.tpl-karte__card--bild > div { flex: 1; display: flex; flex-direction: column; }
.tpl-karte__card--bild > div .meta { margin-top: auto; padding-top: .9rem; }
.tpl-karte__card--bild .tpl-karte__title { font-size: clamp(1.7rem, 1.1vw + 1.15rem, 2.25rem); }
.tpl-karte__card--bild .tpl-karte__excerpt,
.tpl-karte__card--bild .cardtoc { display: none; }

@media (max-width: 60em) {
  .tpl-karte__bild img { height: auto; aspect-ratio: 3 / 2; }
}

/* ── C4 · Screenshot im Text, bei Bedarf ─────────────────────
   Fensterrahmen, damit jeder Screenshot gleich aussieht. Klick
   öffnet die volle Größe. HTML zum Kopieren steht in der README. */

.shot { margin: 0; }

.shot__win {
  overflow: hidden;
  border: 1px solid rgba(37, 62, 41, .18);
  border-radius: .8rem;
  background: #fff;
}

.shot__bar {
  display: flex;
  gap: .3rem;
  align-items: center;
  height: 1.1rem;
  padding: 0 .55rem;
  border-bottom: 1px solid rgba(37, 62, 41, .12);
  background: rgba(37, 62, 41, .06);
}

.shot__bar i { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(37, 62, 41, .25); }
.shot__win a { display: block; }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: .45rem; font-size: .85rem; opacity: .75; }

/* ── Notizen von Substack ──────────────────────────────────────
   Die Zeilen der Übersicht baut notizen.js. Substack liefert keine
   Kategorie, deshalb fehlt die Spalte; der Pfeil ↗ sagt, dass der
   Beitrag woanders aufgeht. */

.post--extern {
  grid-template-columns: 2.6rem 4.5rem minmax(0, 1fr) 4.2rem 1.25rem;
  grid-template-areas: "bild date title time arrow";
}

@media (max-width: 40em) {
  .post--extern {
    grid-template-columns: 4.6rem auto minmax(0, 1fr);
    grid-template-areas:
      "bild date  time"
      "bild title title";
  }
}

.notizen-hinweis {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  padding: 1.05rem 0;
  border-top: 1px solid rgba(37, 62, 41, .16);
  color: rgba(37, 62, 41, .72);
  font-size: clamp(1rem, .3vw + .95rem, 1.125rem);
}

.notizen-hinweis a { color: inherit; }