/* ============================================================
   cd_blogteaser — Blogausgabe
   ============================================================
   Drei Darstellungen aus einem Bauteil:

     .cd-blog--teaser     Kopfzeile mit Knopf plus drei Karten
     .cd-blog--aufmacher  ein Beitrag quer darueber
     .cd-blog--raster     nur die Karten

   Werte aus „Startseite Marketing v3 dunkel": freistehende
   Karten mit 28px Abstand und eigenem Rahmen. Die frueher hier
   gebaute Haarlinien-Variante aus v12 ist damit abgeloest — die
   Karten sollen als einzelne Objekte lesbar sein und nicht als
   geteilte Flaeche.
   ============================================================ */

.cd-blog {
  background: var(--cd-flaeche-2);
  border-block-start: 1px solid var(--cd-linie-2);
}

/* Auf der Blogseite steht die Bahn auf Weiss — dort traegt schon
   der Seitenkopf die getoente Flaeche. */
.cd-blog--aufmacher,
.cd-blog--raster {
  background: var(--cd-weiss);
  border-block-start: 0;
}

/* ------------------------------------------------------------
   Kopfzeile
   ------------------------------------------------------------
   .cd-kopfzeile kommt aus komponenten.css und stellt die zweite
   Spalte bereit. Hier wird nur der Knopf darin ausgerichtet.
   ------------------------------------------------------------ */
/* Umrandet und nicht gefuellt: Der gefuellte Knopf gehoert dem
   Hauptweg („Angebot anfordern"). Ein zweiter gefuellter Knopf
   auf derselben Seite nimmt ihm das Gewicht. */
.cd-blog__mehr {
  justify-self: end;
  align-self: end;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--cd-tinte);
  color: var(--cd-tinte);
  padding: 14px 22px;
  font-family: var(--cd-schrift-display);
  font-weight: 600;
  font-size: 15.5px;
}
.cd-blog__mehr:hover {
  background: var(--cd-tinte);
  color: var(--cd-weiss);
}

/* ------------------------------------------------------------
   Kartenraster
   ------------------------------------------------------------ */
.cd-blog__raster {
  display: grid;
  /* auto-fit statt drei festen Spalten: Bei zwei Beitraegen fallen
     die leeren Spuren zusammen und die Karten fuellen die Breite.
     min(320px, 100%) statt blossem 320px — sonst schiebt eine
     Karte auf einem 320-px-Geraet die Seite waagerecht auf
     (WCAG 1.4.10).

     WARUM 320 UND NICHT 340. Drei Spalten brauchen 3 x Mindestmass
     plus zwei Luecken. Mit 340 sind das 1076 px — auf dem iPad Air
     in Querlage (1112 px Fenster, 1048 px Inhalt) fehlten also 28 px,
     und das Raster fiel auf ZWEI Spalten mit 510 px breiten Karten
     zurueck. Die Karten sind fuer diese Breite nicht entworfen: Bild,
     Titel und Anriss stehen dann verloren nebeneinander.

     Mit 320 sind es 1016 px — drei Spalten passen ab rund 1020 px
     Inhaltsbreite und damit auf jedem Tablet in Querlage. Die Karten
     werden dort rund 330 px breit, also genau das Mass des Entwurfs.

     Unterhalb aendert sich nichts: Zwei Spalten brauchen weiterhin
     668 px, eine Karte allein passt ab 320 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}

/* BEIM BLAETTERN AUTO-FILL STATT AUTO-FIT.

   Die beiden unterscheiden sich nur bei leeren Spuren: auto-fit
   laesst sie zusammenfallen, die uebrigen Karten ziehen sich
   ueber die Breite. Ohne Blaetterfunktion ist das genau richtig
   (zwei Beitraege sollen die Bahn fuellen und nicht ein Drittel
   leer lassen) — mit Blaetterfunktion ist es ein Fehler.

   Denn dann traegt jede Seite eine andere Kartenzahl: Bei sieben
   Beitraegen und drei je Seite stehen im Raster 2, dann 3, dann 1
   Karte, weil der Aufmacher einen Platz der ersten Seite belegt.
   Mit auto-fit hiesse das 586, 381 und 1200 Pixel Kartenbreite —
   die Liste wechselt bei jedem Klick ihr Aussehen, und der
   letzte, aelteste Beitrag stuende breiter da als der Aufmacher.

   auto-fill haelt die Spuren offen. Die Karte bleibt gleich
   breit, und die letzte Seite hat rechts eine Luecke — das ist
   die ehrlichere Auskunft: Hier ist die Liste zu Ende.
   ------------------------------------------------------------ */
[data-blaettern] .cd-blog__raster {
  /* Dasselbe Mindestmass wie oben — 320 statt 340 px. Diese Regel
     gewinnt auf der Blogseite gegen die Grundregel; stuende hier
     weiter 340, faende die Aenderung dort nicht statt und das
     Raster bliebe auf dem Tablet in Querlage zweispaltig. Genau
     das war am 04.09.2026 zunaechst der Fall: Die Grundregel war
     schon umgestellt, die Blogseite zeigte trotzdem zwei Karten. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.cd-blog__karte {
  /* Traeger fuer den ueber die Karte gezogenen Titel-Link. */
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  transition: border-color var(--cd-zeit) ease, transform var(--cd-zeit) ease;
}
.cd-blog__karte:hover {
  border-color: var(--cd-rot);
  transform: translateY(-3px);
}
/* Wer Bewegung abbestellt hat, bekommt nur den Farbwechsel. */
@media (prefers-reduced-motion: reduce) {
  .cd-blog__karte { transition: border-color var(--cd-zeit) ease; }
  .cd-blog__karte:hover { transform: none; }
}

/* Verhaeltnis statt fester Hoehe: So bleibt der Bildausschnitt
   in jeder Spaltenbreite derselbe. */
.cd-blog__bild {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--cd-flaeche-3);
}
.cd-blog__bild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .5s var(--cd-kurve);
}
.cd-blog__karte:hover .cd-blog__bild img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .cd-blog__karte:hover .cd-blog__bild img { transform: none; }
}

.cd-blog__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 28px 28px 30px;
}

/* ------------------------------------------------------------
   Meta-Zeile
   ------------------------------------------------------------ */
.cd-blog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-block-end: 16px;
  /* basis.css gibt jedem Absatz 68ch Hoechstbreite — fuer die
     Zeile aus Kategorie Datum und Dauer waere das ein Umbruch an
     der falschen Stelle. */
  max-inline-size: none;
  font-family: var(--cd-schrift-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cd-text-3);
}

/* Trennung zwischen Kategorie und Zeitangabe ist ein kurzer
   Strich, kein Punkt — Punkte stehen im Entwurf nur INNERHALB
   der Zeitangabe („Datum · 6 Min."). */
.cd-blog__kategorie {
  color: var(--cd-rot);
}
.cd-blog__kategorie + *::before,
.cd-blog__abzeichen + .cd-blog__datum::before {
  content: "";
  display: inline-block;
  inline-size: 14px;
  block-size: 1px;
  margin-inline-end: 12px;
  vertical-align: middle;
  background: var(--cd-linie-3);
}
/* Zwischen Datum und Lesedauer der Mittelpunkt. */
.cd-blog__datum + .cd-blog__dauer::before {
  content: "\00B7";
  margin-inline-end: 8px;
}

.cd-blog__abzeichen {
  padding: var(--cd-a1) var(--cd-a2);
  background: var(--cd-rot);
  color: var(--cd-weiss);
}

/* ------------------------------------------------------------
   Text der Karte
   ------------------------------------------------------------ */
.cd-blog__karteTitel {
  font-size: 22px;
  font-weight: 700;
  margin-block-end: 14px;
}

/* Der Link liegt auf dem Titel und wird ueber die ganze Karte
   gezogen. Der zugaengliche Name bleibt damit der Titel — bei
   einem Link um die ganze Karte waere er Kategorie plus Datum
   plus Dauer plus Titel plus Anriss am Stueck. */
.cd-blog__link { color: inherit; }
.cd-blog__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.cd-blog__link:hover { color: var(--cd-rot); }

.cd-blog__anriss {
  flex: 1;
  margin-block-end: 24px;
  font-size: 16px;
  line-height: 1.66;
  color: var(--cd-text-2);
}

/* „Weiterlesen" ist bewusst KEIN eigener Link, sondern eine
   Beschriftung: Der Titel traegt den Link bereits ueber die
   ganze Karte. Ein zweiter Link mit demselben Ziel waere fuer
   Vorleseprogramme eine Dopplung ohne Mehrwert. */
.cd-blog__zeile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cd-schrift-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cd-tinte);
  transition: color var(--cd-zeit) ease;
}
.cd-blog__karte:hover .cd-blog__zeile { color: var(--cd-rot); }
/* ------------------------------------------------------------
   Aufmacher
   ------------------------------------------------------------
   Verhaeltnis 23 : 17 (im Entwurf 1.15fr : .85fr).
   ------------------------------------------------------------ */
.cd-blog__aufmacher {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 23fr) minmax(0, 17fr);
  margin-block-end: 28px;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie-2);
  transition: box-shadow var(--cd-zeit) ease;
}
/* Der Rahmen liegt INNEN: ein aeusserer Schatten wuerde die
   Haarlinie zum Raster darunter aufreissen. */
.cd-blog__aufmacher:hover { box-shadow: inset 0 0 0 2px var(--cd-rot); }

.cd-blog__aufmacherBild {
  position: relative;
  min-block-size: 380px;
  overflow: hidden;
  background: var(--cd-dunkel);
}
.cd-blog__aufmacherBild img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.cd-blog__bildhinweis {
  position: absolute;
  inset-inline-start: var(--cd-a3);
  inset-block-end: var(--cd-a3);
  padding: 6px 9px;
  border-radius: var(--cd-r-feld);
  background: color-mix(in srgb, var(--cd-dunkel) 88%, transparent);
  color: var(--cd-weiss);
  font-family: var(--cd-schrift-mono);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

.cd-blog__aufmacherText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cd-a4);
  padding: var(--cd-a7);
}
.cd-blog__aufmacherTitel { font-size: var(--cd-gr-h3); }
.cd-blog__aufmacherAnriss { color: var(--cd-text-2); }

/* ============================================================
   Bis 900 px
   ============================================================
   Die Spaltenzahl des Rasters regelt auto-fit von selbst — hier
   steht deshalb nichts dazu.
   ============================================================ */
@media (max-width: 900px) {
  .cd-blog__aufmacher { grid-template-columns: minmax(0, 1fr); }
  .cd-blog__aufmacherBild { min-block-size: 240px; }
  .cd-blog__aufmacherText { padding: var(--cd-a6); }
  .cd-blog__mehr { justify-self: start; }
}

/* ============================================================
   Bis 600 px
   ============================================================ */
@media (max-width: 600px) {
  .cd-blog__text { padding: var(--cd-a5); }
  .cd-blog__aufmacherText { padding: var(--cd-a5); }
}

/* ------------------------------------------------------------
   Blätterfunktion
   ------------------------------------------------------------
   Geblättert wird im Browser über die bereits gerenderten Karten.
   OHNE SKRIPT bleibt alles sichtbar: Die Leiste steht auf
   hidden, und keine Karte wird versteckt. Wer kein JavaScript
   hat, bekommt die vollständige Liste — das ist der bessere
   Ausfall als eine Seite mit drei Beiträgen und ohne Weiterweg.
   ------------------------------------------------------------ */
.cd-blog__blaetterleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cd-a3);
  margin-block-start: var(--cd-a6);
}

.cd-blog__blaetterleiste[hidden] { display: none; }

/* [hidden] WIRD HIER AUSDRUECKLICH DURCHGESETZT.

   Karte und Aufmacher tragen weiter oben display: flex und
   display: grid. Das sind Autorenregeln, und die schlagen das
   [hidden] { display: none } aus dem Browser-Stylesheet — nicht
   ueber die Spezifitaet, sondern ueber den Rang der Herkunft.

   Ohne diese zwei Zeilen setzt das Blaettern das Attribut
   vollkommen richtig, und auf dem Schirm aendert sich nichts:
   alle Beitraege stehen weiter untereinander, ein Klick auf eine
   Seitenzahl bewegt nur die laufende Markierung. Der Fehler ist
   von aussen nicht als CSS-Frage zu erkennen — im Elementbaum
   sieht alles richtig aus. Gemessen wird er nur ueber
   getComputedStyle, nicht ueber element.hidden.

   Nicht [hidden] pauschal fuer die ganze Bahn: Es gibt Bausteine,
   die hidden tragen und ihre eigene Regel mitbringen (die Leiste
   selbst, eine Zeile darueber).
   ------------------------------------------------------------ */
.cd-blog__karte[hidden],
.cd-blog__aufmacher[hidden] { display: none; }

.cd-blog__blaetterzahl {
  min-inline-size: 40px;
  min-block-size: 40px;
  padding: 8px 12px;
  background: none;
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-feld);
  font: inherit;
  font-size: var(--cd-gr-klein);
  color: var(--cd-tinte);
  cursor: pointer;
}

.cd-blog__blaetterzahl:hover { border-color: var(--cd-rot); color: var(--cd-rot); }

/* Die laufende Seite ist nicht nur farbig markiert — sie trägt
   aria-current, und der Rahmen macht sie auch ohne Farbe
   erkennbar. */
.cd-blog__blaetterzahl[aria-current="page"] {
  background: var(--cd-rot);
  border-color: var(--cd-rot);
  color: var(--cd-weiss);
  font-weight: 600;
}

.cd-blog__blaetterzahl:disabled { opacity: .45; cursor: default; }

.cd-blog__blaetterstand {
  font-size: var(--cd-gr-klein);
  color: var(--cd-text-3);
}

/* Auf dunklem Grund kehren sich Rahmen und Schrift um. */
.cd-auf-dunkel .cd-blog__blaetterzahl {
  border-color: var(--cd-linie-auf-dunkel);
  color: var(--cd-text-auf-dunkel);
}
.cd-auf-dunkel .cd-blog__blaetterstand { color: var(--cd-text-auf-dunkel-2); }

/* ------------------------------------------------------------
   Der Knopf „Mehr Beiträge lesen“
   ------------------------------------------------------------
   Ein gefüllter Knopf in der Hausfarbe und kein Umrissknopf: Er
   ist an dieser Stelle die einzige Handlung, und eine Liste, die
   sich fortsetzen lässt, soll das auch aussehen. Der Umriss stand
   vorher gleichwertig neben den Karten und verschwand darin.

   Die Restzahl steht als zweite Zeile IM Knopf statt daneben. Sie
   beantwortet die Frage, die den Klick auslöst — „lohnt sich das
   noch?" —, und ein Satz daneben wäre eine zweite Stelle, die das
   Skript nachziehen müsste.

   Der zugängliche Name enthält beides („Mehr Beiträge lesen noch
   4 Beiträge"). Das ist länger als nötig, aber vollständig: Wer
   nur den Namen hört, weiss auch, wie viel noch kommt.
   ------------------------------------------------------------ */
.cd-blog__mehrknopf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block: 14px;
  padding-inline: 32px;
}

.cd-blog__mehrzahl {
  font-size: var(--cd-gr-mini, .78rem);
  font-weight: 400;
  opacity: .82;
}

/* Die Leiste der Fassung „mehr“ steht mittig und braucht Luft
   nach oben — sie schliesst die Liste ab, statt neben ihr zu
   stehen. */
.cd-blog__blaetterleiste[data-art="mehr"] {
  flex-direction: column;
  gap: var(--cd-a3);
}