/*!
 * Inverta — bundled stylesheet.
 * Generated by tools/build-css.php from news.css.
 * Do not edit: change the module under assets/css/ and rebuild.
 * Modules inlined: 1
 */
/* =============================================================
   Inverta — Sektion: Blog & News

   Die Karte selbst steht in pages/blog.css: dieselbe Karte steht in der
   Blog-Übersicht und hier, und zwei Kartenbilder für eine Karte wären zwei
   Dinge, die auseinanderlaufen können. Hier steht, was die Sektion aus ihnen
   macht — die Kapsel, die Oberfläche der Karten, das Verhalten unter dem
   Zeiger, die Abstände und der Knopf darunter.

   Der Einzug der Karten kommt aus modules/reveal.js: .vf-post-card steht dort
   schon in der Liste der Elemente, die gestaffelt hereinkommen, also braucht es
   hier nichts weiter als eine Sektion, die der Beobachter findet.
   ============================================================= */

.vf-section-news {
  --vf-news-ease: var(--inv-ease, cubic-bezier(.22, .61, .36, 1));
  --vf-news-dur: var(--inv-motion, 400ms);

  /* Derselbe Randabstand wie bei FAQ, Kontakt und CTA: die Sektion hält
     Abstand zum Bildschirmrand, die Kapsel darin nicht noch einmal. Vorher
     stand hier ein .vf-container dazwischen, der seinen eigenen Abstand
     mitbrachte — die Kapsel war dadurch 78 px schmaler als jede andere. */
  padding-inline: var(--inv-section-px, var(--inv-edge, 10px));
}

/* -------------------------------------------------------------
   Die Kapsel
   ------------------------------------------------------------- */
.vf-news-capsule {
  position: relative;
  isolation: isolate;
  border-radius: var(--inv-radius-capsule, 20px);
  /* "Maximale Breite" der Sektion, 0 heißt voll — wie bei FAQ. */
  max-width: min(var(--vf-news-max-w, 100%), var(--inv-shell-max, 100%));
  margin-inline: auto;
}

.vf-news-capsule-mode .vf-news-capsule {
  padding: clamp(26px, 3.6vw, 56px) var(--inv-gutter, clamp(20px, 3vw, 48px));
  border: 1px solid rgba(15, 23, 42, .08);
  border-top-color: color-mix(in srgb, var(--inv-surface, #fff) 90%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--inv-surface, #fff) 74%, transparent) 0%, color-mix(in srgb, var(--inv-surface, #fff) 44%, transparent) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--inv-shadow-capsule, 0 24px 60px -30px rgba(15, 23, 42, .28));
}

/* Von der Kapsel selbst zugeschnitten, nicht vom Elternteil: overflow dort
   würde position:sticky an allem darin abschalten. */
.vf-news-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  /* Kein filter: blur() — Safari rechnet ihn auf dieser Fläche beim Scrollen
     jedes Bild neu (1.7.23). Der Verlauf läuft ohnehin weich aus. */
  clip-path: inset(0 round var(--inv-radius-capsule, 20px));
  background:
    radial-gradient(ellipse 42% 46% at 88% 16%, color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 30%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 88%, color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 18%, transparent) 0%, transparent 72%);
}

.vf-news-capsule-mode .vf-news-glow { opacity: .5; }

/* -------------------------------------------------------------
   Kopf und Raster
   ------------------------------------------------------------- */
/* Die Überschrift hatte keinen Abstand nach unten: die erste Karte begann
   unmittelbar unter der Zeile, während jede andere Sektion Luft lässt. */
.vf-section-news .vf-section-title-area {
  margin-bottom: clamp(22px, 2.8vw, 40px);
}

.vf-section-news .vf-posts-grid {
  display: grid;
  grid-template-columns: repeat(var(--vf-news-cols, 3), minmax(0, 1fr));
  gap: var(--vf-news-gap, 24px);
}

/* Die Spalten stehen auch hier, in der eigenen Datei der Sektion, und nicht
   nur in base/section-vars.css. Beim Freund standen auf dem Computer alle drei
   Karten untereinander über die volle Breite (Screenshot 22.10.2026): genau
   das Bild, das die Telefon-Regel aus section-vars.css ergibt, wenn sie ohne
   ihre Medienabfrage gilt — etwa nach dem Zusammenfassen und Verkleinern der
   Stylesheets durch ein Cache-Plugin. Mit zwei Klassen gewinnen diese Regeln
   gegen die eine Klasse dort, an jeder Stelle im Stapel. */
@media (max-width: 1024px) {
  .vf-section-news .vf-posts-grid {
    grid-template-columns: repeat(var(--vf-news-cols-tab, 2), minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vf-section-news .vf-posts-grid {
    grid-template-columns: repeat(var(--vf-news-cols-mob, var(--vf-news-cols-tab, 1)), minmax(0, 1fr));
  }
}

/* Ein einziger Beitrag ist eine Karte, kein Band.
 *
 * Die Spaltenzahl wird im Renderer auf die Zahl der Beiträge gedeckelt — bei
 * einem Beitrag also eine Spalte. Über die volle Kapselbreite gezogen wäre das
 * eine Karte mit drei Zeilen Text auf 1280 px; auf Lesebreite gebracht sieht
 * sie aus, als sollte sie so aussehen. */
.vf-section-news .vf-posts-grid:has(> .vf-post-card:only-child) {
  max-width: 46rem;
  margin-inline: auto;
}

/* -------------------------------------------------------------
   Die Karten

   Drei Oberflächen. "card" ist das, was pages/blog.css ohnehin zeichnet, also
   steht hier nichts dafür — nur die beiden anderen.
   ------------------------------------------------------------- */
.vf-section-news .vf-post-card {
  display: flex;
  flex-direction: column;
  transition:
    transform var(--vf-news-dur) var(--vf-news-ease),
    box-shadow var(--vf-news-dur) var(--vf-news-ease),
    border-color var(--vf-news-dur) var(--vf-news-ease);
}

.vf-newscard-glass .vf-post-card {
  border-color: var(--vf-news-card-line, rgba(255, 255, 255, .55));
  background: var(--vf-news-card-bg, linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .34) 100%));
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .7);
}

.vf-newscard-plain .vf-post-card {
  background: var(--vf-news-card-bg, none);
  border: 0;
  box-shadow: none;
}

.vf-newscard-plain .vf-post-body {
  padding-inline: 0;
}

/* ---- was unter dem Zeiger passiert ---- */
.vf-newshov-lift .vf-post-card:hover {
  transform: translateY(calc(var(--inv-hover-lift, 4px) * -1));
  box-shadow: var(--inv-shadow-card, 0 18px 40px -22px rgba(15, 23, 42, .3));
}

.vf-newshov-glow .vf-post-card:hover {
  border-color: color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 12%, transparent);
}

.vf-section-news .vf-post-title a:hover {
  color: var(--vf-accent, var(--inv-accent, #24a9b3));
}

/* Die orange Konstante aus pages/blog.css gilt hier nicht: die Sektion hat eine
   eigene Akzentfarbe, und sie soll sie auch benutzen. */
.vf-section-news .vf-post-card:hover {
  border-color: color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 50%, transparent);
}

/* ---- Bild ---- */
.vf-section-news .vf-post-thumbnail img {
  width: 100%;
  /* Mit einer Bildhoehe sind alle Bilder gleich hoch, egal welches Format das
     Beitragsbild hat; ohne sie entscheidet das Seitenverhaeltnis. */
  height: var(--vf-news-img-h, auto);
  aspect-ratio: var(--vf-news-img-ratio, 16 / 10);
  /* „Bild im Rahmen“, ab Werk „Ganz zeigen“ (1.7.30): ein quadratisches
     Beitragsbild verlor in 16:10 beim Freund 38 % seiner Höhe. */
  object-fit: var(--vf-news-img-fit, contain);
  background: color-mix(in srgb, var(--inv-fg, #0f172a) 4%, var(--inv-surface, #fff));
  display: block;
  transition: transform calc(var(--vf-news-dur) * 2) var(--vf-news-ease);
}

.vf-newshov-lift .vf-post-card:hover .vf-post-thumbnail img,
.vf-newshov-glow .vf-post-card:hover .vf-post-thumbnail img {
  transform: scale(1.04);
}

/* ---- Kategorie-Chip ---- */
.vf-post-cat {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: .5rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--vf-accent, var(--inv-accent, #24a9b3)) 14%, transparent);
  color: var(--vf-accent, var(--inv-accent, #24a9b3));
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Der Link unter einem Beitrag ---- */
.vf-post-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--vf-accent, var(--inv-accent, #24a9b3));
  text-decoration: none;
}

.vf-post-link svg {
  width: 15px;
  height: 15px;
  transition: transform var(--vf-news-dur) var(--vf-news-ease);
}

.vf-post-link:hover svg { transform: translateX(3px); }

.vf-post-link .txt-anim { display: block; }

.vf-post-link:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* Der Text der Karte schiebt den Link nach unten, damit er in einer Reihe von
   Karten mit verschieden langen Auszügen auf einer Linie steht. */
.vf-section-news .vf-post-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* -------------------------------------------------------------
   Der Knopf schließt die Sektion ab
   ------------------------------------------------------------- */
.vf-section-news .vf-read-more {
  display: flex;
  width: fit-content;
  margin-top: clamp(22px, 2.6vw, 36px);
  margin-inline: auto;
}

/* Die vier Knopf-Tokens der Sektion. Ohne diese Regel stünden vier Regler in
   "Weitere Einstellungen", die nichts anfassen — css_wiring meldet genau das.
   --inv-btn-ink ist der Weg, auf dem die Textfarbe auch einen gewählten
   Button-Stil erreicht: dessen Regel wiegt drei Klassen, eine Farbe hier zwei. */
.vf-section-news {
  --inv-btn-ink: var(--vf-news-btn-ink);
}

.vf-section-news .vf-read-more.vf-btn {
  font-size: var(--vf-news-btn-size, .9rem);
  font-weight: var(--vf-news-btn-weight, 600);
  border-radius: var(--vf-news-btn-radius, var(--inv-radius-sm, 10px));
}

.vf-section-news .vf-read-more .txt-anim { display: block; }

.vf-section-news .vf-read-more:hover .txt-anim__inner:not([data-gsap-roll]) {
  transform: translateY(-130%);
}

/* -------------------------------------------------------------
   Ohne Bewegung
   ------------------------------------------------------------- */
.inv-no-motion .vf-section-news .txt-anim__inner::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .vf-section-news .txt-anim__inner::after { content: none; }
  .vf-section-news .txt-anim__inner,
  .vf-section-news .vf-post-card,
  .vf-section-news .vf-post-thumbnail img { transition: none; transform: none; }
}

/* -------------------------------------------------------------
   Schmale Fenster
   ------------------------------------------------------------- */
@media (max-width: 767px) {
  .vf-news-capsule-mode .vf-news-capsule {
    padding: 20px 14px;
  }
}

/* Telefon: zum Wischen statt untereinander.

   Bis 640 px stand jede Karte über die volle Breite unter der vorigen — drei
   Beiträge waren drei Bildschirme Bild und Text, und die Karten wirkten
   auseinandergezogen (beim Freund, 22.10.2026). Jetzt eine Reihe, die man mit
   dem Finger schiebt: jede Karte vier Fünftel breit, die nächste schaut rechts
   heraus und sagt so, dass es weitergeht. Die Reihe läuft bis an den Rand der
   Kapsel, eingerastet wird an ihrem Innenrand. Ein einzelner Beitrag bleibt
   eine Karte. „Untereinander“ (vf-news-mob-stapel) lässt alles beim Alten. */
@media (max-width: 640px) {
  .vf-section-news.vf-news-mob-wischen {
    --vf-news-bleed: 0px;
  }

  .vf-section-news.vf-news-mob-wischen.vf-news-capsule-mode {
    --vf-news-bleed: 14px;
  }

  .vf-section-news.vf-news-mob-wischen .vf-posts-grid:not(:has(> .vf-post-card:only-child)) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 320px);
    align-items: stretch;
    margin-inline: calc(var(--vf-news-bleed) * -1);
    padding: 4px var(--vf-news-bleed) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--vf-news-bleed);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .vf-section-news.vf-news-mob-wischen .vf-posts-grid::-webkit-scrollbar {
    display: none;
  }

  .vf-section-news.vf-news-mob-wischen .vf-posts-grid > .vf-post-card {
    scroll-snap-align: start;
    min-width: 0;
  }
}


/* -------------------------------------------------------------
   Was an einer Karte eingestellt werden kann

   Farbe, Rahmen, Innenabstand, Maße und die beiden Schriftgrößen. Jede Regel
   faellt auf genau das zurueck, was vorher dastand — in pages/blog.css, die
   dieselbe Karte fuer die Blog-Seite zeichnet. Ungesetzt aendert sich also
   nichts, und das ist der Sinn: diese Sektion und die Blog-Uebersicht sollen
   gleich aussehen, solange niemand hier etwas anderes will.
   ------------------------------------------------------------- */
.vf-section-news .vf-post-card {
  min-height: var(--vf-news-card-min-h, auto);
  max-width: var(--vf-news-card-max-w, none);
  background: var(--vf-news-card-bg, var(--inv-surface, #fff));
  border-color: var(--vf-news-card-line, var(--inv-border, #e2e8f0));
}

.vf-section-news .vf-post-body {
  padding: var(--vf-news-card-pad, 1.5rem);
}

.vf-section-news .vf-post-title {
  font-size: var(--vf-news-title-size, 1.25rem);
  font-weight: var(--vf-news-title-weight, 700);
}

.vf-section-news .vf-post-excerpt {
  font-size: var(--vf-news-text-size, .95rem);
  font-weight: var(--vf-news-text-weight, 400);
}

/* Die Flaeche des Knopfes, auf demselben Weg wie seine Schriftfarbe darueber. */
.vf-section-news {
  --inv-btn-bg: var(--vf-news-btn-bg);
}