/* ---------------------------------------------------------------------
   Blog-Übersicht und Artikelarchiv, W24

   Diese Datei hängt an `.public-blog-übersicht`, NICHT an `.public-blog`.

   Der Grund ist gemessen, nicht vermutet: `software-baumschule-bewerber
   management.html` ist eine Landingpage ohne Bezug zum Blog und trägt
   trotzdem `class="entwurf public-page public-blog"`. Sie benutzt 44
   Klassen aus `public-blog.css`. Wer dort umbaut, verändert diese
   Landingpage still mit, und niemand prüft sie, weil niemand sie in
   einem Blog-Test öffnet.

   Die Messung zeigt aber auch, wo die Grenze verläuft: die Landingpage
   nutzt die ARTIKEL-Klassen (blog-article-hero, blog-prose, blog-toc,
   blog-related). Die ÜBERSICHTS-Klassen (blog-hero, blog-feature,
   blog-index, article-teaser, blog-list) nutzt sie nicht. Vier Klassen
   sind wirklich geteilt und werden hier nur unter der neuen Seitenklasse
   angefasst: blog-cta, blog-meta, blog-topic, blog-breadcrumb.

   `public-blog.css` bleibt deshalb unberührt.

   Reihenfolge: diese Datei wird NACH public-blog.css geladen. Die
   dortigen Regeln stehen als `.public-blog .x` und haben dieselbe
   Spezifität wie `.public-blog-übersicht .x`. Bei Gleichstand gewinnt
   die spätere Datei. Spezifität hochzudrehen ist deshalb nicht nötig,
   und das ist gut so: die Lehre aus W23 war, dass ein Spezifitätsrennen
   an jedem einzelnen Element wiederholt werden muss.
   --------------------------------------------------------------------- */

.public-blog-übersicht {
  /* Nur zwei eigene Werte. Alles andere kommt aus den Marken-Tokens.

     --blog-kachel-bild ist die Bildhöhe der Rasterkarte. Sie steht hier,
     weil sie an zwei Stellen gebraucht wird (Karte und Archivzeile) und
     zwischen den Bildschirmgrößen wandert.

     --blog-hub ist der Weg, den eine Karte beim Zeigen nach oben geht.
     Der Entwurf nennt 6px für Karten. */
  --blog-kachel-bild: 208px;
  --blog-hub: -6px;
}

/* ---------------------------------------------------------------------
   1. Kopfbereich mit der Titelgeschichte
   --------------------------------------------------------------------- */

/* Der grüne Vorspann bekommt auf Dunkel die helle Grünstufe. Auf dem
   Sand darunter wäre derselbe Wert zu schwach; dort steht --gc-link. */
.public-blog-übersicht .blog-hero .blog-topic {
  color: var(--gc-mint);
}

/* WEB-030: Die Übersicht bleibt ein eigener Seitentyp, startet aber
   kompakter. Die bestehenden Artikelkarten erreichen dadurch früher den
   Viewport; Inhalt und gemeinsame Hero-Typografie bleiben unverändert. */
.public-page.public-blog-übersicht .blog-hero.aligned-hero {
  padding-block: clamp(72px, 7vw, 104px) clamp(48px, 5vw, 72px);
}

.public-blog-übersicht .blog-index {
  padding-top: clamp(42px, 6vw, 72px);
}

/* Der grüne Teilsatz bleibt nach Patrics Entscheidung vom 24.08.
   aufrecht. Eine synthetische Schrägstellung kommt nicht zum Einsatz. */
.public-blog-übersicht .blog-klausel {
  color: var(--gc-mint);
}

/* Die Titelgeschichte wird zur Glaskarte. Glas ist laut Entwurf
   ausschließlich in dunklen Bereichen erlaubt, und genau hier steht es. */
.public-blog-übersicht .blog-feature {
  display: flex;
  min-width: 0;
  overflow: hidden;
  grid-column: 1 / -1;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--gc-line-dark);
  border-radius: var(--gc-radius-card);
  background: rgb(244 241 232 / 0.04);
  backdrop-filter: blur(10px);
  transition:
    transform 350ms var(--gc-ease),
    border-color 350ms var(--gc-ease),
    box-shadow 350ms var(--gc-ease);
  /* Nachtrag 1, 17.09.2026: Glaskarte auf dunklem Grund, Rolle statt
     Fläche. .blog-feature__media (Bildlink) und .blog-arrow-link
     nutzten sonst den globalen hellen --fokus, gemessen 1,61:1 bzw.
     1,84:1. --fokus-dunkel hält hier wie auf .dunkel (app.css:448-458). */
  --fokus: var(--fokus-dunkel);
}

.public-blog-übersicht .blog-feature__media {
  flex: 0 0 auto;
  aspect-ratio: auto;
  min-height: 200px;
  height: clamp(200px, 42vw, 300px);
  border-radius: 0;
}

.public-blog-übersicht .blog-feature__media img {
  object-position: 50% 30%;
}

.public-blog-übersicht .blog-feature .blog-meta {
  color: var(--gc-on-dark-faint);
}

.public-blog-übersicht .blog-feature__title {
  color: var(--gc-on-dark);
}

.public-blog-übersicht .blog-feature .blog-arrow-link {
  color: var(--gc-mint);
}

.public-blog-übersicht .blog-feature__content {
  padding: var(--karten-pad);
}

/* ---------------------------------------------------------------------
   2. Das Kartenraster

   Vorher war die Liste eine gestapelte Folge breiter Zeilen mit
   wechselnder Bildseite, getrennt durch Haarlinien. Der Entwurf will ein
   dreispaltiges Raster aus weißen Karten. Beide Trennlinien der alten
   Fassung müssen deshalb ausdrücklich weg, sonst stehen sie quer durch
   das Raster.
   --------------------------------------------------------------------- */

.public-blog-übersicht .blog-list {
  display: grid;
  gap: 20px;
  border-bottom: 0;
}

/* Das Archiv ist eine Leseliste, keine Kartenübersicht. Der Selektor grenzt
   ihn über seine eigenen Zeilen ab, damit blog.html sein Kartenraster behält. */
.public-blog-übersicht .blog-list:has(> .archiv-zeile) {
  grid-template-columns: minmax(0, 1fr);
}

/* 02.10.2026 (Patric): blog-mehr.js zeigt zuerst neun Artikel. Die
   Karten tragen display:flex, darum braucht [hidden] hier eine eigene
   Regel. Ohne JavaScript bleibt alles sichtbar, der Knopf versteckt. */
.public-blog-übersicht .article-teaser[hidden],
.public-blog-übersicht .blog-mehr .btn[hidden] {
  display: none;
}

.public-blog-übersicht .blog-mehr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
}

.public-blog-übersicht .blog-mehr .btn {
  min-height: 44px;
}

.public-blog-übersicht .blog-mehr__stand {
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
}

/* Gedruckt wird die ganze Liste, ohne Knopf und Zähler. Steht nach den
   Regeln für .blog-mehr, damit display:none dort gewinnt. */
@media print {
  .public-blog-übersicht .article-teaser[hidden] {
    display: flex;
  }
  .public-blog-übersicht .blog-mehr {
    display: none;
  }
}

.public-blog-übersicht .article-teaser {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  padding-block: 0;
  border: 1px solid var(--gc-line);
  border-top: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-feature);
  background: var(--gc-surface);
  gap: 0;
  transition:
    transform 350ms var(--gc-ease),
    border-color 350ms var(--gc-ease),
    box-shadow 350ms var(--gc-ease);
}

/* Das Bild sitzt randlos oben und trägt keine eigene Rundung mehr: die
   Karte schneidet es mit `overflow: hidden` ab.

   `min-height: 0` ist hier kein Schmuck, sondern die eigentliche Reparatur.
   Die Medienfläche trägt zusätzlich die Klasse `blog-demo-media`, und
   `public-supabase.css` gibt der `min-height: 100%`. In der alten
   Rasterfassung war das harmlos. In einer Flex-Spalte bezieht sich die
   100 % auf die Karte, das Bild füllte sie damit ganz und schob Titel und
   Text unter die abgeschnittene Kante.

   Sichtbar wurde das erst im Bildschirmfoto: Struktur, Token und Kontraste
   hatten vorher alle gehalten. Fünf leere Karten, und keine Messung hatte
   angeschlagen. */
.public-blog-übersicht .article-teaser__media {
  aspect-ratio: auto;
  min-height: 0;
  height: var(--blog-kachel-bild);
  border-radius: 0;
}

.public-blog-übersicht .article-teaser__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  padding: 26px 26px 28px;
}

/* Die Kategorie steht bei 10px. Das ist kleiner Text und braucht 4,5:1.
   Der Entwurf nennt dafür #2B7F2B, das ist unser --gc-green-deep, und
   der hält auf Sand nur 4,46:1. Deshalb steht hier --gc-link.

   Das ist keine Geschmacksfrage: --gc-green-deep ist bei uns ausdrücklich
   für große Schrift und Fokusringe freigegeben (Grenze 3,0), nicht für
   Kleingedrucktes. */
.public-blog-übersicht .article-teaser .blog-meta > :first-child {
  color: var(--gc-link);
}

.public-blog-übersicht .article-teaser__title {
  max-width: none;
  margin-top: 13px;
  margin-bottom: 11px;
  font-size: clamp(1.4rem, 1rem + 0.85vw, 1.85rem);
}

/* Die Fußzeile wird nach unten gedrückt, damit die Verweise aller Karten
   einer Reihe auf derselben Höhe stehen, auch bei ungleich langen Titeln. */
.public-blog-übersicht .article-teaser .blog-arrow-link {
  margin-top: auto;
  padding-top: 22px;
}

/* ---------------------------------------------------------------------
   2b. Die Metazeile

   Vorher stand sie bei 0,98rem, also 15,68 px. Der Entwurf will ein
   Mikro-Label: Kategorie 10 px in Versalien, dann ein Mittelpunkt, dann
   die Lesezeit.

   Die Klasse .blog-meta tragen auch die Artikelseite und die fremde
   Landingpage. Deshalb steht das hier unter der Seitenklasse und nicht
   in public-blog.css. Die Artikelseite zieht in W25 nach; bis dahin
   sehen Übersicht und Artikel unterschiedlich aus, und das ist der
   normale Zwischenstand eines schrittweisen Rollouts.

   Zwei Farbabweichungen vom Entwurf, beide gemessen:

   1. Die Kategorie soll laut Entwurf #2B7F2B sein. Das ist unser
      --gc-green-deep und hält auf Sand nur 4,46:1. Bei 10 px ist das
      kleiner Text, der 4,5:1 braucht. Deshalb --gc-link mit 5,58:1.
   2. Die Lesezeit soll #7A7A7A sein. Auf Sand liegt das unter 4,5:1.
      Deshalb --gc-ink-soft, gemessen 7,86:1.

   Beides ist keine Geschmacksfrage. --gc-green-deep ist bei uns
   ausdrücklich nur für große Schrift und Fokusringe freigegeben. */

.public-blog-übersicht .blog-meta {
  align-items: baseline;
  gap: 0 10px;
  font-size: 0.875rem;
}

.public-blog-übersicht .blog-meta > :first-child {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* D5b, 17.09.2026: die Verkleinerung unter 340 px auf 0,6875rem (11 px)
   fiel bei der Abnahme durch (kein Text unter 12 px). Gemessen auf
   blog.html und blog-archiv.html bei 320 px: fünf Kategorie-Kicker
   ("Karriere", "Gehalt" ...) auf 11 px. Gleiche Entscheidung wie beim
   .gc-label-Mindestgrad in den anderen fünf D5b-Dateien: die Regel
   entfällt, 12 px gelten auch hier unter 340 px. */

/* Der Mittelpunkt ist reine Zeichensetzung und wird nicht vorgelesen. */
.public-blog-übersicht .blog-meta > :first-child + *::before {
  margin-right: 10px;
  content: "\00B7";
  speak: never;
}

.public-blog-übersicht .article-teaser .blog-meta > :last-child,
.public-blog-übersicht .archiv-zeile .blog-meta > :last-child {
  color: var(--gc-ink-soft);
}

/* Im dunklen Kopf trägt die Kategorie das helle Grün, nicht --gc-link:
   der ist für Sand gedacht und stünde auf Dunkel viel zu schwach. */
.public-blog-übersicht .blog-feature .blog-meta > :first-child {
  color: var(--gc-mint);
}

/* ---------------------------------------------------------------------
   3. Die Archivkachel

   Sechste Kachel des Rasters, dunkel, führt ins Archiv. Sie liegt im
   Markup INNERHALB von .blog-list, damit sie im Raster mitläuft.

   Achtung, das ist der Grund für die zwei Zeilen in supabase-public.js:
   hydrateBlog() ruft list.replaceChildren() und löscht damit alle Kinder,
   sobald echte Serverdaten ankommen. Ohne die Rettung dort wäre diese
   Kachel im Betrieb lautlos verschwunden und beim Ansehen der Datei
   trotzdem da gewesen.
   --------------------------------------------------------------------- */

.public-blog-übersicht .blog-archiv-kachel {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  padding: 34px 30px 32px;
  border: 1px solid color-mix(in srgb, var(--gc-action) 18%, transparent);
  border-radius: var(--gc-radius-feature);
  background: linear-gradient(160deg, var(--gc-dark-deep) 0%, var(--gc-dark) 100%);
  color: var(--gc-on-dark);
  text-decoration: none;
  transition:
    transform 350ms var(--gc-ease),
    border-color 350ms var(--gc-ease),
    box-shadow 350ms var(--gc-ease);
  /* Nachtrag 1, 17.09.2026: Die Kachel selbst ist der Link (a.blog-
     archiv-kachel), ihr eigener :focus-visible-Ring braucht deshalb
     die dunkle Rolle direkt am Element, nicht nur an Nachfahren. */
  --fokus: var(--fokus-dunkel);
}

/* Der globale Ring (app.css:388-391) sitzt mit outline-offset: 2px
   AUSSERHALB der Kachel, im 20-px-Rasterabstand (.blog-list, gap) auf
   der hellen Seitenfläche: der helle --fokus-dunkel-Ring stand dort
   gegen Hell auf Hell, 1,21:1 statt gegen die eigene dunkle Fläche.
   Negativer Versatz zieht ihn auf die Kachel selbst, wie an anderer
   Stelle im System bereits üblich (etwa public-jobs.css:812/830,
   public-home.css:230, app.css:4007). -3px hätte die Ringaußenkante
   genau auf die Kartenkante gelegt (outline-offset + outline-width =
   0 Rand), -10px lässt mindestens 7 px Fläche der Kachel außerhalb
   des Rings stehen, bei 260 px Mindesthöhe unauffällig. */
.public-blog-übersicht .blog-archiv-kachel:focus-visible {
  outline-offset: -10px;
}

/* Der grüne Schimmer oben rechts. Er liegt hinter dem Text, deshalb
   `z-index: 0` am Schimmer und `position: relative` am Inhalt. */
.public-blog-übersicht .blog-archiv-kachel::before {
  position: absolute;
  z-index: 0;
  top: -120px;
  right: -100px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, color-mix(in srgb, var(--gc-action) 16%, transparent) 0%, transparent 65%);
  content: "";
  pointer-events: none;
}

.public-blog-übersicht .blog-archiv-kachel > * {
  position: relative;
  z-index: 1;
}

.public-blog-übersicht .blog-archiv-kachel__label {
  color: var(--gc-mint);
}

.public-blog-übersicht .blog-archiv-kachel__titel {
  margin: 10px 0 0;
  color: var(--gc-on-dark);
  font-family: var(--gc-font-display);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: var(--gc-ls-title);
}

.public-blog-übersicht .blog-archiv-kachel__weg {
  margin-top: 18px;
  color: var(--gc-mint);
  font-size: 0.875rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
   4. Archivseite: Filterreihe, Ergebniszeile, Liste
   --------------------------------------------------------------------- */

.public-blog-übersicht .archiv-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-blog-übersicht .archiv-chip {
  /* Der Entwurf nennt nur 12px 22px Innenabstand. Gemessen ergab das ein
     Tippziel von 43 px, unser Hausmaß sind 46. Die Mindesthöhe hebt es an,
     ohne den Innenabstand des Entwurfs zu verändern. */
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-pill);
  background: var(--gc-surface);
  color: var(--gc-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 280ms var(--gc-ease),
    border-color 280ms var(--gc-ease),
    color 280ms var(--gc-ease);
}

/* Der aktive Chip trägt Weiß auf dem dunklen Verlauf, dazu eine grüne
   Innenlinie statt eines zweiten Rahmens. */
.public-blog-übersicht .archiv-chip[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--gc-dark-deep), var(--gc-dark));
  box-shadow:
    var(--gc-shadow-card-strong),
    inset 0 0 0 1.5px var(--gc-action);
  color: var(--gc-on-dark);
  /* Nachtrag 1, 17.09.2026: blog-archiv.html öffnet mit dem Chip
     "Alle" bereits aria-pressed="true" (blog-archiv.html:183), also
     dunkel beim ersten Tab-Stopp. Ohne diese Bindung ringt der Chip
     hell auf dunkel. */
  --fokus: var(--fokus-dunkel);
}

/* Derselbe Versatzfehler wie bei .blog-archiv-kachel: der Chip ist
   klein (rund 46 px hoch) und trägt 10 px Abstand zum nächsten Chip
   (.archiv-filter, gap), der globale 2-px-Versatz reicht dort bis in
   die helle Seitenfläche. Negativer Versatz zieht den Ring auf den
   Chip selbst. Schmalere Ringbreite (2px statt 3px) und -9px Versatz,
   damit bei 46 px Höhe und 12 px Innenabstand noch 3 px Fläche zur
   Beschriftung bleiben; -3px hätte die Ringaußenkante wie bei der
   Archivkachel auf die Chipkante gelegt. */
.public-blog-übersicht .archiv-chip[aria-pressed="true"]:focus-visible {
  outline-width: 2px;
  outline-offset: -9px;
}

.public-blog-übersicht .archiv-ergebnis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gc-line);
  margin-top: 36px;
  gap: 12px;
}

.public-blog-übersicht .archiv-ergebnis__zahl {
  color: var(--gc-ink-muted);
}

.public-blog-übersicht .archiv-ergebnis__sortierung {
  color: var(--gc-ink-muted);
  font-size: 0.8125rem;
}

.public-blog-übersicht .archiv-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.public-blog-übersicht .archiv-zeile {
  display: grid;
  min-width: 0;
  align-items: center;
  padding: 26px 8px;
  border-bottom: 1px solid var(--gc-line);
  gap: 30px;
  grid-template-columns: 1fr;
  text-decoration: none;
  transition:
    transform 350ms var(--gc-ease),
    background-color 350ms var(--gc-ease);
}

/* Alle Bausteine der Zeile sind <span>, weil die ganze Zeile ein <a> ist.
   Spans sind inline. Ohne die ausdrücklichen display-Angaben laufen Titel
   und Text in EINER Zeile ineinander, und die Bildfläche nimmt weder
   Breite noch Höhe an.

   Das hat keine meiner Messungen gefunden: Struktur, Token, Kontraste und
   Rasterspalten hielten alle. Sichtbar wurde es erst im Bildschirmfoto. */
.public-blog-übersicht .archiv-zeile__mitte,
.public-blog-übersicht .archiv-zeile__titel,
.public-blog-übersicht .archiv-zeile__text {
  display: block;
}

.public-blog-übersicht .archiv-zeile__bild {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 180px;
  border-radius: 14px;
  background: var(--gc-canvas-2);
}

.public-blog-übersicht .archiv-zeile__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wie bei der Rasterkarte: 10px sind kleiner Text, also --gc-link. */
.public-blog-übersicht .archiv-zeile .blog-meta > :first-child {
  color: var(--gc-link);
}

.public-blog-übersicht .archiv-zeile__titel {
  margin: 12px 0 8px;
  color: var(--gc-ink-strong);
  font-family: var(--gc-font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: var(--gc-ls-title);
  overflow-wrap: normal;
  hyphens: auto;
}

.public-blog-übersicht .archiv-zeile__text {
  max-width: 62ch;
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}

/* Der runde Pfeilknopf steht erst ab der zweispaltigen Breite. Auf dem
   Telefon nimmt er nur Platz weg, ohne etwas zu sagen: die ganze Zeile
   ist ohnehin der Verweis. */
.public-blog-übersicht .archiv-zeile__pfeil {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-pill);
  color: var(--gc-link);
  place-items: center;
}

.public-blog-übersicht .archiv-leer {
  padding: 40px 8px;
  margin: 0;
  color: var(--gc-ink-soft);
  font-size: 0.9375rem;
}

/* Der Rückweg trägt einen echten Linkspfeil statt des geerbten Winkels.

   Der Winkel aus .blog-arrow-link ist ein um 45 Grad gedrehtes Kästchen mit
   zwei Rändern. Auf einem Rückweg zeigt er in die falsche Richtung, und die
   Unterstreichung des Links lief mitten hindurch: sichtbar blieb ein
   senkrechter Strich hinter dem Wort. Genau so hat Codex ihn am 24.08.
   gemeldet.

   Deshalb: der geerbte Winkel entfällt, der Pfeil steht als SVG im Markup,
   und die Unterstreichung trägt nur noch der Text. */
.public-blog-übersicht .archiv-zurück {
  display: inline-flex;
  margin-top: 44px;
  text-decoration: none;
}

.public-blog-übersicht .archiv-zurück::after {
  content: none;
}

.public-blog-übersicht .archiv-zurück__pfeil {
  flex: 0 0 16px;
  transition: transform 280ms var(--gc-ease);
}

.public-blog-übersicht .archiv-zurück__text {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ---------------------------------------------------------------------
   5. Zeigen. Nur mit echtem Zeiger, nie auf dem Telefon.
   --------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .public-blog-übersicht .blog-feature:hover {
    border-color: color-mix(in srgb, var(--gc-action) 55%, transparent);
    box-shadow: var(--gc-shadow-frame-dark);
    transform: translateY(var(--blog-hub));
  }

  .public-blog-übersicht .article-teaser:hover {
    border-color: var(--gc-green-deep);
    box-shadow: var(--gc-shadow-card-strong);
    transform: translateY(var(--blog-hub));
  }

  .public-blog-übersicht .blog-archiv-kachel:hover {
    border-color: color-mix(in srgb, var(--gc-action) 55%, transparent);
    box-shadow: var(--gc-shadow-frame-dark);
    transform: translateY(var(--blog-hub));
  }

  .public-blog-übersicht .archiv-chip:hover:not([aria-pressed="true"]) {
    border-color: var(--gc-green-deep);
    color: var(--gc-ink-strong);
    transform: translateY(-1px);
  }

  .public-blog-übersicht .archiv-zurück:hover .archiv-zurück__pfeil {
    transform: translateX(-4px);
  }

  /* Der einzige waagerechte Hub im System, laut Entwurf für Listenzeilen
     reserviert. */
  .public-blog-übersicht .archiv-zeile:hover {
    background-color: rgb(255 255 255 / 0.55);
    transform: translateX(4px);
  }
}

/* ---------------------------------------------------------------------
   6. Breiten
   --------------------------------------------------------------------- */

@media (min-width: 700px) {
  .public-blog-übersicht .blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Die alte Fassung drehte jede zweite Zeile um. Im Raster gibt es
     nichts mehr zu drehen, beides muss zurückgesetzt werden. */
  .public-blog-übersicht .article-teaser,
  .public-blog-übersicht .article-teaser:nth-child(even) {
    grid-template-columns: none;
    gap: 0;
  }

  .public-blog-übersicht .article-teaser:nth-child(even) .article-teaser__media {
    order: 0;
  }

  .public-blog-übersicht .article-teaser__media {
    aspect-ratio: auto;
  }

  .public-blog-übersicht .archiv-zeile {
    grid-template-columns: 148px minmax(240px, 1fr);
  }

  .public-blog-übersicht .archiv-zeile__bild {
    width: 148px;
    height: 100px;
  }

  .public-blog-übersicht .archiv-zeile__pfeil {
    display: grid;
  }
}

@media (max-width: 699px) {
  .public-blog-übersicht .blog-list:has(> .archiv-zeile) .article-teaser__body {
    padding-inline: 0;
  }
}

@media (min-width: 1024px) {
  .public-blog-übersicht .blog-feature {
    grid-column: 9 / span 4;
    align-self: stretch;
  }

  .public-blog-übersicht .blog-feature__media {
    flex: 1 1 auto;
    min-height: 150px;
    height: auto;
  }

  .public-blog-übersicht .blog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-blog-übersicht .blog-feature,
  .public-blog-übersicht .article-teaser,
  .public-blog-übersicht .blog-archiv-kachel,
  .public-blog-übersicht .archiv-chip,
  .public-blog-übersicht .archiv-zeile {
    transition: none;
  }

  .public-blog-übersicht .blog-feature:hover,
  .public-blog-übersicht .article-teaser:hover,
  .public-blog-übersicht .blog-archiv-kachel:hover,
  .public-blog-übersicht .archiv-chip:hover,
  .public-blog-übersicht .archiv-zeile:hover,
  .public-blog-übersicht .archiv-zurück:hover .archiv-zurück__pfeil {
    transform: none;
  }
}