/* ==========================================================================
   Blog: Uebersicht und Einzelbeitrag

   Die Werte stammen nicht aus dem Bauch, sondern aus dem Elementor-Kit der
   Seite (Beitrag 7, _elementor_page_settings): Dark Blue #014CB1, Light Blue
   #049AED, Text #262630, Grau #5A5B68, Hellgrau #F7F7F7, Schrift Kind Sans.
   Wer die Farben im Kit aendert, aendert sie hier mit.

   Die Breiten folgen der Startseite: Abschnitt bis 1440px, seitlich 64px
   Polsterung (mobil 20px). Die Lesespalte ist mit 760px bewusst schmaler -
   Fliesstext ueber die volle Breite liest sich schlecht.
   ========================================================================== */

:root {
  --blog-blau-dunkel: #014CB1;
  --blog-blau-hell: #0378B8;
  --blog-text: #262630;
  --blog-grau: #5A5B68;
  --blog-hellgrau: #F7F7F7;
  --blog-rand: #E4E5EA;
  --blog-breite: 1440px;
  --blog-lesespalte: 760px;
  --blog-polster: 64px;
}

@media (max-width: 767px) {
  :root {
    --blog-polster: 20px;
  }
}

.analysit-blog,
.analysit-beitrag {
  font-family: "Kind Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--blog-text);
}

.analysit-blog__innen,
.analysit-beitrag__innen {
  max-width: var(--blog-breite);
  margin-inline: auto;
  padding-inline: var(--blog-polster);
}

.analysit-lesespalte {
  max-width: var(--blog-lesespalte);
  margin-inline: auto;
}

/* --- Kopf der Uebersicht ------------------------------------------------ */

.analysit-blog__kopf {
  padding-block: 72px 40px;
  text-align: center;
}

.analysit-blog .analysit-blog__titel {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--blog-text);
  letter-spacing: normal;
}

.analysit-blog__einleitung {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--blog-grau);
  margin: 0 auto;
  max-width: var(--blog-lesespalte);
}

.analysit-blog__einleitung p:last-child {
  margin-bottom: 0;
}

/* --- Kartenraster ------------------------------------------------------- */

/* Das Raster fuellt die Breite, solange genug Beitraege da sind, und
   zentriert, solange es wenige sind.

   Vorher stand hier repeat(3, 1fr). Bei einem einzigen Beitrag ergab das
   eine 416px schmale Karte ganz links in einer 1440px breiten Reihe - der
   Rest leer. Das sah nicht nach Absicht aus, sondern nach Fehler.

   auto-fit mit einer Obergrenze je Spalte plus justify-content: center
   loest beides: eine Karte steht mittig, drei fuellen die Reihe, ab vier
   wird umgebrochen. Die Karte wird nie breiter als 420px, weil eine
   Karte, die ueber die halbe Bildschirmbreite laeuft, keine Karte mehr
   ist. */
/* NACHTRAG 14.09.2026: die Breite gehoert an das Raster, nicht an die Karte.

   Zuvor stand hier auto-fit mit einer Obergrenze je Spalte plus
   justify-content: center, und die Leitkarte zentrierte sich per
   margin-inline: auto selbst. Gemessen kam dabei heraus: Karte 872px
   breit, 284px Luft links, 364px rechts. Also 40px aus der Mitte, und
   zwar weil auto-fit je nach verfuegbarer Breite mal zwei, mal drei
   Spalten erzeugt und der Ueberhang nicht symmetrisch aufgeht.

   Jetzt bekommt das Raster selbst eine feste Maximalbreite und zentriert
   sich. Die Spalten teilen diese Breite mit 1fr auf, die Leitkarte nimmt
   mit grid-column: 1 / -1 alle davon ein. Damit sitzt beides zwangslaeufig
   mittig - bei einem Beitrag wie bei zwanzig, ohne Rechnerei.

   Die Polsterung von .analysit-blog__innen (64px je Seite) kommt oben
   drauf, deshalb der calc-Ausdruck: innen bleiben exakt 1080px. */
.analysit-blog__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
  padding-block: 24px 88px;
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  max-width: calc(1080px + 2 * var(--blog-polster));
}

@media (max-width: 1024px) {
  .analysit-blog__raster {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .analysit-blog__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 16px 56px;
  }
}

.analysit-karte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--blog-rand);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.analysit-karte:hover,
.analysit-karte:focus-within {
  box-shadow: 0 12px 32px rgba(38, 38, 48, 0.1);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .analysit-karte {
    transition: none;
  }
  .analysit-karte:hover,
  .analysit-karte:focus-within {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Die Leitkarte: der neueste Beitrag ueber die volle Breite

   Sie nimmt beide Rasterspalten ein und legt Bild und Text nebeneinander.
   Unter 900px faellt sie auf dieselbe Form zurueck wie jede andere Karte -
   nebeneinander ergibt auf einem Telefon keinen Sinn.
   -------------------------------------------------------------------------- */
.analysit-karte--gross {
  grid-column: 1 / -1;
  width: 100%;
}

@media (min-width: 900px) {
  .analysit-karte--gross {
    display: grid;
    grid-template-columns: 55% 45%;
    align-items: stretch;
  }

  .analysit-karte--gross .analysit-karte__bild {
    aspect-ratio: auto;
    height: 100%;
    min-height: 320px;
  }

  .analysit-karte--gross .analysit-karte__inhalt {
    padding: 40px;
    justify-content: center;
    gap: 12px;
  }

  .analysit-blog .analysit-karte--gross .analysit-karte__titel,
  .analysit-blog .analysit-karte--gross .analysit-karte__titel a {
    font-size: 1.625rem;
    line-height: 1.3;
  }

  .analysit-blog .analysit-karte--gross .analysit-karte__anriss {
    font-size: 1.0625rem;
  }
}

.analysit-karte__bild {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--blog-hellgrau);
  overflow: hidden;
}

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

.analysit-karte__inhalt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  flex: 1 1 auto;
}

.analysit-karte__datum {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blog-blau-hell);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Warum diese Regeln zwei Klassen tief stehen

   Gemessen am 14.09.2026 auf /blog/: der Kartentitel wurde mit
   font-size 48px und line-height 57.6px ausgegeben, obwohl hier
   1.25rem und 1.3 stand. Die Schrift im Link war 20px, die Zeilenhoehe
   blieb bei 57.6px - daher klafften zwischen den drei Titelzeilen
   Luecken von fast vier Zentimetern.

   Die Ursache ist Spezifitaet, nicht ein Tippfehler. Elementors Kit
   setzt seine Typografie als ".elementor-kit-7 h2", also eine Klasse
   plus ein Element. ".analysit-karte__titel" ist nur eine Klasse und
   verliert. Zwei Klassen gewinnen wieder.

   Dasselbe gilt fuer die uebrigen Textelemente der Karte: sie stehen
   deshalb ebenfalls unter .analysit-blog.
   -------------------------------------------------------------------------- */
.analysit-blog .analysit-karte__titel,
.analysit-blog .analysit-karte__titel a {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0;
  letter-spacing: normal;
}

.analysit-blog .analysit-karte__datum {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.analysit-blog .analysit-karte__anriss {
  font-size: 1rem;
  line-height: 1.6;
}

.analysit-blog .analysit-karte__mehr {
  font-size: 1rem;
  line-height: 1.4;
}

.analysit-karte__titel a {
  color: var(--blog-text);
  text-decoration: none;
}

.analysit-karte__titel a:hover,
.analysit-karte__titel a:focus {
  color: var(--blog-blau-dunkel);
  text-decoration: underline;
}

.analysit-karte__anriss {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--blog-grau);
  margin: 0;
}

.analysit-karte__mehr {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 600;
  color: var(--blog-blau-dunkel);
  text-decoration: none;
}

.analysit-karte__mehr:hover,
.analysit-karte__mehr:focus {
  text-decoration: underline;
}

/* --- Leerer Zustand ----------------------------------------------------- */

.analysit-blog__leer {
  text-align: center;
  padding: 48px 24px 96px;
  color: var(--blog-grau);
  font-size: 1.0625rem;
}

/* --- Blaetterleiste ----------------------------------------------------- */

.analysit-blog__blaettern {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-bottom: 88px;
}

.analysit-blog__blaettern .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--blog-rand);
  border-radius: 10px;
  color: var(--blog-text);
  text-decoration: none;
}

.analysit-blog__blaettern .page-numbers.current {
  background: var(--blog-blau-dunkel);
  border-color: var(--blog-blau-dunkel);
  color: #fff;
}

/* ==========================================================================
   Einzelbeitrag
   ========================================================================== */

.analysit-beitrag__bild {
  display: block;
  width: 100%;
  max-width: var(--blog-breite);
  margin: 0 auto;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--blog-hellgrau);
}

@media (max-width: 767px) {
  .analysit-beitrag__bild {
    aspect-ratio: 4 / 3;
  }
}

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

.analysit-beitrag__kopf {
  padding-block: 48px 8px;
}

.analysit-beitrag__meta {
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blog-blau-hell);
  margin: 0 0 12px;
}

.analysit-beitrag__titel {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1.15;
  font-weight: 600;
  margin: 0;
}

/* --- Fliesstext --------------------------------------------------------- */

.analysit-beitrag__text {
  padding-block: 32px 72px;
  font-size: 1.125rem;
  line-height: 1.7;
}

.analysit-beitrag__text > * + * {
  margin-top: 1.25em;
}

.analysit-beitrag__text h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1.25;
  font-weight: 600;
  margin-top: 2em;
}

.analysit-beitrag__text h3 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 600;
  margin-top: 1.75em;
}

.analysit-beitrag__text a {
  color: var(--blog-blau-dunkel);
}

.analysit-beitrag__text ul,
.analysit-beitrag__text ol {
  padding-left: 1.4em;
}

.analysit-beitrag__text li + li {
  margin-top: 0.5em;
}

.analysit-beitrag__text img,
.analysit-beitrag__text figure {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.analysit-beitrag__text figcaption {
  font-size: 0.9375rem;
  color: var(--blog-grau);
  margin-top: 8px;
}

/* Claim: das grosse Zitat zwischen den Absaetzen. Im Editor ist das ein
   gewoehnliches Zitat (Blockquote) - dafuer braucht niemand eine Anleitung. */
.analysit-beitrag__text blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 28px;
  border: 0;
  border-left: 4px solid var(--blog-blau-hell);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--blog-blau-dunkel);
}

.analysit-beitrag__text blockquote p {
  margin: 0;
}

.analysit-beitrag__text blockquote cite {
  display: block;
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  color: var(--blog-grau);
}

/* --- Fuss des Beitrags -------------------------------------------------- */

.analysit-beitrag__fuss {
  border-top: 1px solid var(--blog-rand);
  padding-block: 28px 88px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
}

.analysit-beitrag__zurueck {
  font-weight: 600;
  color: var(--blog-blau-dunkel);
  text-decoration: none;
}

.analysit-beitrag__zurueck:hover,
.analysit-beitrag__zurueck:focus {
  text-decoration: underline;
}

.analysit-beitrag__naechster {
  color: var(--blog-grau);
  text-decoration: none;
}

.analysit-beitrag__naechster:hover,
.analysit-beitrag__naechster:focus {
  color: var(--blog-blau-dunkel);
  text-decoration: underline;
}