/* =====================================================================
   home.css — Startseite (Project Overview)  +  work.php (gleiche Klassen)
   Enthält: Hero (typografisch), Feed (kategoriegruppiert),
   Feed-Item (Text + asymmetrisches Visual-Raster).
   ===================================================================== */

/* Hero – rein typografisch -------------------------------------------- */
.hero {
  margin-bottom: clamp(4rem, 10vh, 7.5rem);
  margin-top: clamp(10rem, 10vh, 15rem);
}

/* Lead/Body füllen die (bereits flush eingefasste) .shell → linke Kante bündig
   mit dem übrigen Content; der Text darin bleibt linksbündig. */
.hero__lead,
.hero__body {
  width: 100%;
}

.hero__headline,
.feed-title {
  font-size: clamp(1rem, 4.5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--color-brand);
}
/* eingefärbte Headline (wie Referenz) */
.feed-title { max-width: 22em; }

/* Hero-Headline: Mobile volle Breite, Desktop max. 2/3 der Containerbreite
   (.hero-intro.shell--narrow). */
.hero__headline { max-width: 100%; }
@media (min-width: 60rem) {
  .hero__headline { max-width: 66.6667%; }
}

/* Überschrift oben links über dem Projekt-Feed (Format wie Hero-Headline). */
.feed-title {
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}

.hero__subline {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-top: 1rem;
}

/* Intro-Block sitzt (wie im Original nach dem Type-Specimen) tiefer */
.hero__intro {
  margin-top: clamp(3rem, 8vh, 6rem);
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  max-width: 34rem;
}

/* Text links, Button-Paar rechts, unten bündig zueinander (Referenz:
   thekids.eu) – .hero__intro behält sein eigenes margin-top (auch von
   work.php genutzt, dort OHNE .hero__body); align-items:flex-end richtet
   die (kürzeren) Buttons an der Unterkante des Textblocks aus, unabhängig
   von dessen margin-top (das zählt nur zur Oberkante der Zeile). */
.hero__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}

/* Button-Paar "Angebot" + "Projekte", beide als Outline (.hero__btn). Beide
   verlinken auf Anker dieser Seite (#angebot/#projects). Hier nur das Layout
   des Paars – Form/Farben kommen aus .btn/.hero__btn. */
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  flex: none;
  gap: 1rem;
}

/* Outline-Variante (Größe/Form aus .btn) – nur lokale Farben/Rahmen + hier
   etwas mehr Höhe als der Standard-.btn (padding-block override). */
.hero__btn {
  flex: none;
  padding-block: 1rem;
  border: 1.5px solid var(--color-brand);
  color: var(--color-brand);
  background: transparent;
}
.hero__btn:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero--compact {
  margin-bottom: clamp(2.5rem, 8vh, 5rem);
}

/* === Hero-Video: statischer, eingefasster Videoblock oben ============ *
   Oberkante = 50 % hinter der Header-Pille (--card-top). Header schwebt als
   Pille → main ohne Top-Padding, damit die Oberkante auf der Pillen-Mitte sitzt.

   Hero-Video und Feed-Karten tragen beide die Klasse .viewport-bleed (unten):
   deren Breite ist IMMER Viewport-Breite minus fixer Randdistanz --feed-max
   auf beiden Seiten – kein max-width-Cap, sie skalieren auf jeder Screengröße
   mit. Eine Stelle ändern (--feed-max) → Feed UND Hero-Video wandern gemeinsam.
   Feed-spezifisch bleibt außerdem --card-top (Oberkante hinter der Header-Pille). */
:root {
  --card-top: calc(clamp(0.75rem, 2vw, 1.25rem) + 2.25rem);
  --feed-max: 3rem;   /* Randdistanz zu den Viewport-Seiten (NICHT die max-Breite!) */
  /* --section-gap (Abstand zwischen den "Boxen") ist site-weit in index.css
     definiert, weil der Footer auf jeder Seite erscheint – s. dort. */
}
@media (max-width: 60rem) {
  :root { --feed-max: 0.3rem; }   /* auf schmalen Screens weniger Rand, mehr Inhaltsbreite */
}
/* Smartphone: Hero-Video + Feed-Karten randlos bis an die Viewport-Kanten,
   Oberkante bis ganz nach oben (0) – die Boxen liegen dort komplett HINTER
   der schwebenden Header-Pille (die per z-index darüber bleibt), statt mit
   Abstand darunter zu beginnen. */
@media (max-width: 40rem) {
  :root {
    --card-top: 0px;
    --feed-max: 0px;
  }
}

/* Gemeinsame Breitenregel für Hero-Video + Feed-Karten (s. Kommentar oben). */
.viewport-bleed { width: calc(100% - 2 * var(--feed-max)); }

.main:has(.hero-video) { padding-top: 0; }

.hero-video {
  aspect-ratio: 16 / 8;        /* etwas höher als 16:9 */
  margin: var(--card-top) auto var(--section-gap);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-accent);
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-video--embed { background: none; }
/* Smartphone: feste Höhe statt Seitenverhältnis – Hero füllt die halbe
   Viewport-Höhe, Video/Embed werden per object-fit:cover zugeschnitten. */
@media (max-width: 40rem) {
  .hero-video { aspect-ratio: none; height: 70svh; position: relative; }
  /* .video (index.css) sizt sich sonst per padding-bottom-Trick anhand der
     eigenen --w/--h – hier stattdessen die volle Höhe der Hero-Box füllen. */
  .hero-video--embed .video { position: absolute; inset: 0; height: 100%; padding-bottom: 0; }
}

/* Textbereich (Headline + Intro) unter der Hero-Box. */
.hero-intro {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-bottom: clamp(1rem, 5vh, 2rem);
}
/* Ohne Hero-Video steht die Section allein oben → großer Kopfabstand. */
.hero-intro--solo {
  margin-top: clamp(10rem, 10vh, 15rem);
}

/* Intro + CTA: zwischen Headline und Feed. */
.hero-intro .hero__body {
  padding-top: clamp(1.5rem, 2vh, 2.2rem);
  padding-bottom: clamp(2.5rem, 7vh, 3.2rem);

}
.hero-intro .hero__intro {
  margin-top: 0;
}

/* Feed ----------------------------------------------------------------- */
/* Ohne eigene Hintergrundfarbe – liegt direkt auf dem Seitenhintergrund. */
.feed {
  position: relative;
  /* großzügiger Weißraum oben/unten */
  padding-block: clamp(2.5rem, 6vh, 8rem);
}

/* Projekte: nur durch Weißraum getrennt (keine Trennlinien). */
.feed-item {
  padding-top: clamp(3rem, 7vh, 5.5rem);
  margin-bottom: clamp(5.5rem, 15vh, 6rem);
}
/* erstes Projekt: kein zusätzlicher Kopfabstand (Weißraum kommt aus dem Feed). */
.feed-item:first-of-type {
  padding-top: 0;
}
/* letztes Projekt: kein doppelter Abstand vor dem „Alle Arbeiten"-Abschluss */
.feed-item:last-of-type {
  margin-bottom: clamp(3.5rem, 9vh, 7rem);
}

/* Tile-Bild oben (erstes Visual): einheitliches Format wie thekids.eu, der
   Text-Container folgt darunter. */
.feed-item__media {
  display: block;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.feed-item__media img,
.feed-item__media video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* breiteres Tile-Format; für noch breiter z. B. 2 / 1 */
  object-fit: cover;
  transition: transform 0.6s var(--motion-ease);
}
.feed-item__media:hover img,
.feed-item__media:hover video { transform: scale(1.03); }

/* Text-Container unter dem Bild: Kategorie + Titel, darunter Excerpt + Link. */
.feed-item__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.feed-item__lead {
  align-self: start;
}

/* Kategorie-Badge: Basis in index.css; im Feed unter dem Titel mit Abstand darüber */
.feed-item .badge {
  display: inline-block;
  margin-top: 1rem;
}

.feed-item__title {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-brand);
}

.feed-item__title a {
  color: inherit;
}

.feed-item__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.1em;
}

.feed-item__tagline {
  font-weight: 400;
}

.feed-item__meta {
  align-self: start;
}

.feed-item__excerpt {
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 32rem;
  color: var(--color-muted);
}

/* Farbe/Pfeil/Hover kommen aus .arrow-link (Akzentfarbe). */
.feed-item__link {
  display: inline-block;
  margin-top: 1.75rem;
}

/* „Alle Arbeiten ansehen" am Ende des Feeds (Farbe/Pfeil aus .arrow-link). */
.feed-all {
  display: inline-block;
  padding-top: clamp(3rem, 7vh, 5rem);
  width: 100%;
  font-size: 1.15rem;
}

/* Angebot-Liste (nummeriert, großzügiger Weißraum, ohne Trennstriche) ---- */
.offer {
  position: relative;
  padding-block: clamp(4rem, 11vh, 8rem);
}
/* Vollbreite Hintergrundfläche (100vw), Farbe aus dem Panel (--offer-bg). */
.offer--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: calc(50% - 50vw);   /* bis zum Viewport-Rand */
  z-index: -1;
  background: var(--offer-bg);
}
/* Schriftfarbe der Section: Titel voll, Zahlen/Beschreibung/Label gleiche Farbe
   mit etwas Transparenz. --offer-fg kommt aus dem Panel (designColorStyle(),
   Default-Fallback: Textfarbe des Themes). */
.offer {
  --offer-fg: var(--color-text);
}
.offer__label {
  color: color-mix(in srgb, var(--offer-fg) 60%, transparent);
  font-size: 0.95rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.offer__list {
  display: flex;
  flex-direction: column;
}
.offer__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: start;
}
/* dünne Trennlinie zwischen den Punkten (nur hier), symmetrisch umrahmt */
.offer__item + .offer__item {
  margin-top: clamp(1.25rem, 3vh, 2.25rem);
  padding-top: clamp(1.25rem, 3vh, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--offer-fg) 22%, transparent);
}
.offer__num {
  color: color-mix(in srgb, var(--offer-fg) 60%, transparent);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: 0.35em;           /* optisch an die große Headline angleichen */
  font-variant-numeric: tabular-nums;
}
.offer__title {
  color: var(--offer-fg);
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.offer__text {
  margin-top: 0.85rem;
  max-width: 100%;   /* Smartphone: volle Breite */
  color: color-mix(in srgb, var(--offer-fg) 60%, transparent);
  font-size: 1.0625rem;
  line-height: 1.6;
}
@media (min-width: 48rem) {
  .offer__text { max-width: 66.6667%; }
}


/* Testimonials-Slider (Kund:innen-Stimmen) ---------------------------- */
.testimonials {
  position: relative;
  padding-block: clamp(2.75rem, 7.5vh, 5.5rem);
  --tm-ink: var(--tm-fg, var(--color-text));
}
/* Vollbreite Hintergrundfläche (100vw), Farbe aus dem Panel (--tm-bg). */
.testimonials--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: calc(50% - 50vw);
  z-index: -1;
  background: var(--tm-bg);
}
/* Titel in der gleichen Formatierung wie das „Angebot"-Label (klein, gedämpft). */
.testimonials__title {
  color: color-mix(in srgb, var(--tm-ink) 60%, transparent);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: clamp(1.25rem, 3vh, 2.25rem);
}

/* ein Testimonial pro Fenster (wie das Feed-Ein-Bild-Fenster) */
.testimonials .slider__slide { flex-basis: 100%; }

.testimonial {
  display: grid;
  grid-template-columns: 1fr;
  /* gleicher schmaler Abstand wie zwischen den Boxen in .case__body
     (--media-row-gap, site-weit in index.css). */
  gap: var(--media-row-gap);
  align-items: center;
  margin: 0;
  color: var(--tm-ink);
}
/* zweispaltig (Bild | Zitat) nur, wenn ein Bild vorhanden ist – beide
   Spalten gleich breit (je 50 %). */
@media (min-width: 48rem) {
  .testimonial:has(.testimonial__media) {
    grid-template-columns: minmax(0, 1fr) 1fr;
  }
}
.testimonial__media {
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}
.testimonial__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.testimonial__quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
}
/* Nur neben einem Bild: eigene Fläche in derselben Form/Höhe wie das Bild
   (align-self:stretch = Zeilenhöhe, die vom quadratischen Bild vorgegeben
   wird; gleicher --radius, --surface-tint als dezente Kartenfarbe). */
@media (min-width: 48rem) {
  .testimonial:has(.testimonial__media) .testimonial__quote {
    align-self: stretch;
    background: var(--surface-tint);
    border-radius: var(--radius);
    padding: clamp(1.5rem, 4vw, 3rem);
  }
}
.testimonial__text {
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  line-height: 1.3;
  font-weight: 500;
}
.testimonial__by {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.testimonial__who { display: flex; flex-direction: column; gap: 0.15rem; }
.testimonial__name { font-weight: 700; }
.testimonial__role { color: color-mix(in srgb, var(--tm-ink) 70%, transparent); }
.testimonial__logo {
  height: 2.25rem;
  width: auto;
  padding-left: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid color-mix(in srgb, var(--tm-ink) 30%, transparent);
}

/* Steuerzeile unter dem Slide: Dots links, Pfeile rechts */
.testimonials__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
}
.testimonials .slider__dots { margin-top: 0; }
.testimonials .slider__dot { background: color-mix(in srgb, var(--tm-ink) 35%, transparent); }
.testimonials .slider__dot.is-active { background: var(--tm-ink); }
/* Eine einzelne Pille (wie .btn: border-radius:999px), kein Trennstrich, kein
   eigener Rahmen auf den Buttons – stattdessen das Glas-Design der Header-
   Pille (s. .site-header::before), nur OHNE backdrop-filter/Blur. Rundung +
   Fläche liegen auf der Gruppe; overflow:hidden clippt die Hover-Flächen der
   Buttons an die Pillenform. */
.testimonials__nav-group {
  display: flex;
  gap: 0;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-header) 55%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
:root[data-theme="dark"] .testimonials__nav-group {
  background: rgba(12, 16, 28, 0.45);
  border-color: rgba(255, 255, 255, 0.2);
}
[data-slider]:not(.is-ready) .testimonials__nav-group { display: none; }
.testimonials__nav {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-ink);
  background: transparent;
  transition: background-color 0.25s ease, transform 0.2s var(--motion-ease);
}
.testimonials__nav svg { width: 1.1rem; height: 1.1rem; }
/* Hover: NUR die gehoverte Seite blendet auf 0 Transparenz (voll deckend,
   dieselbe Farbe wie die Pille selbst) – die andere Seite bleibt transparent. */
.testimonials__nav:hover { background: var(--color-header); }
:root[data-theme="dark"] .testimonials__nav:hover { background: rgb(12, 16, 28); }
.testimonials__nav:active { transform: scale(0.94); }

/* CTA-Box (Breite wie Articles, invertierte Farben des INAKTIVEN Modus) -- */
.box-section {
  padding-block: var(--section-gap);
}
.box {
  /* Light-Theme aktiv → Dark-Farben verwenden */
  --box-bg: var(--color-bg-dark);
  --box-fg: var(--color-text-dark);
  position: relative;
  overflow: hidden;                 /* schneidet das PNG am rechten Rand ab */
  border-radius: var(--radius-lg);
  background: var(--box-bg);
  color: var(--box-fg);
  padding: clamp(2rem, 5vw, 4rem);
}
:root[data-theme="dark"] .box {
  /* Dark-Theme aktiv → Light-Farben verwenden */
  --box-bg: var(--color-bg-light);
  --box-fg: var(--color-text-light);
}
.box__content {
  position: relative;               /* über dem PNG */
  z-index: 1;
  max-width: 40rem;
}
.box__headline {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.box__text {
  margin-top: clamp(1rem, 2.5vh, 1.5rem);
  max-width: 34rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--box-fg) 75%, transparent);
}
/* Form/Farben aus .btn.cta (Kontakt-Button-Blueprint) – hier nur der Abstand. */
.box__cta {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}
/* PNG unten rechts, ragt aus dem Kasten und wird durch overflow:hidden gekappt */
.box__image {
  position: absolute;
  right: 0;
  bottom: 0;
  height: min(95%, 20rem);
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: right bottom;
  transform: translateX(18%);
  pointer-events: none;
}
@media (max-width: 40rem) {
  .box__image { display: none; }    /* schmale Screens: kein Überlappen */
}

/* Fotobox über dem Footer: EIN Foto, per object-fit:cover vollständig in der
   Box, Seitenverhältnis aus dem Panel-Feld `ratio` (photobox-section.php,
   --photobox-ratio). Kein Text/Overlay, keine Farblogik nötig. */
.photobox-section {
  padding-block: var(--section-gap);
}
.photobox {
  aspect-ratio: var(--photobox-ratio, 16 / 9);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photobox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fokuspunkt aus dem Kirby-Panel (Bildvorschau → Fokuspunkt setzen), s.
     photobox-section.php – schon fertige "X% Y%"-Syntax. */
  object-position: var(--photobox-focus, center);
}

/* Horizontaler, scrollbarer Slider der Feed-Visuals ------------------- */
.feed-slider {
  position: relative;
}

.feed-slider .slider__slide {
  /* Ein-Bild-Fenster: jeder Slide füllt das Fenster (= Inhaltsbreite) komplett,
     sodass immer genau ein Bild mittig sichtbar ist. Nachbarn werden am
     Fensterrand abgeschnitten und erscheinen nur während des Slidens. */
  flex-basis: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg-accent);
}

.feed-slider .slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: zweispaltige Kopfzeile – breite Titelspalte, schmale Textspalte */
@media screen and (min-width: 60rem) {
  .feed-item__head {
    grid-template-columns: 1fr 0.7fr;
    gap: clamp(2.5rem, 6vw, 6.5rem);
    align-items: start;
  }
}

/* === Article-Fokus: der zentrierte Artikel wird hervorgehoben ========= *
   JS (initFeedFocus in index.js) markiert den Artikel nahe der Viewport-Mitte
   mit .is-active. Reihenfolge der Hervorhebung: ERST skaliert das Bild, DANN
   schiebt sich der Text (Titel, Excerpt, Link) von unten ein und blendet sich
   ein. Sobald der nächste Artikel zentriert ist, geht der vorige zurück.
   Nur bei erlaubter Bewegung (html.feed-focus-enabled); ohne JS / Reduced
   Motion bleiben alle Artikel normal sichtbar. */
html.feed-focus-enabled .feed-item__media {
  transition: transform 0.55s var(--motion-ease);
  transform-origin: center;
  will-change: transform;
}
html.feed-focus-enabled .feed-item.is-active .feed-item__media {
  transform: scale(1.55);                 /* Bild skaliert zuerst */
}
html.feed-focus-enabled .feed-item__head {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.55s ease, transform 0.55s var(--motion-ease);
  transition-delay: 0.35s;                /* … erst danach der Text von unten */
  will-change: opacity, transform;
}
html.feed-focus-enabled .feed-item.is-active .feed-item__head {
  opacity: 1;
  transform: none;
}

/* =====================================================================
   „Stacked Cards"-Feed (.feed-stack / .feed-card)
   ---------------------------------------------------------------------
   Karten bleiben per REINEM CSS (position: sticky; top: var(--card-top))
   nacheinander oben stehen und stapeln sich; die nächste Karte schiebt sich in
   voller Größe darüber, die darunterliegende skaliert via --card-scale (JS:
   initFeedStack, index.js) stufenlos leicht herunter. KEINE Overlays/Abdunklung
   – nur Skalierung.

   Progressive Enhancement: das Stacking ist reines CSS und läuft OHNE JS. Bei
   Reduced Motion oder aktivem Motion-Toggle (data-motion="reduced") bleibt es
   eine statische, gestapelte Kartenliste (--card-scale bleibt 1, kein sticky).

   WICHTIG – Sticky-Fallstrick: Weder .feed-stack noch <body>/<html> dürfen
   overflow: hidden|auto|scroll bekommen. Das macht den Vorfahren zum Scroll-
   Container; position: sticky bezieht sich dann auf DIESEN statt auf den Viewport
   und wird ausgehebelt bzw. abgeschnitten. `overflow-x: clip` am <html> ist ok
   (clip erzeugt KEINEN Scroll-Container) – hidden nicht.
   ===================================================================== */

/* Titel/Link-Bänder um den Feed. */
.feed--intro { padding-bottom: clamp(1.5rem, 4vh, 3rem); }
.feed--outro { padding-top: clamp(2rem, 5vh, 4rem); }

/* Container: nur Fluss, KEIN overflow (s. Fallstrick oben). */
.feed-stack { position: relative; }

/* --- Karte: großes, abgerundetes Bild-Panel mit Text ---------------- */
.feed-card {
  position: relative;                 /* Basis: statisch gestapelt (ohne JS / Reduced Motion) */
  margin-inline: auto;
  height: calc(100svh - var(--card-top) - 3.5rem);   /* passt unter dem Header in den Viewport */
  border-radius: var(--radius-lg);
  overflow: hidden;                   /* nur die KARTE clippt ihr Bild – NICHT der Stack! */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;          /* Text unten */
  background: #000;
  color: #fff;
  text-decoration: none;              /* .feed-card ist jetzt selbst der Link (ganze Karte) */
  /* Skaliert oben bündig an der Sticky-Kante; JS setzt --card-scale (1 … 0.90).
     KEINE transition hier – --card-scale wird pro Scroll-Frame direkt gesetzt,
     eine transition würde dem Scrollen spürbar hinterherhinken. */
  transform-origin: top center;
  transform: scale(var(--card-scale, 1));
  will-change: transform;
}
/* Abstand = Scrollweg pro Karte (wie lange die nächste zum Rüberschieben braucht). */
.feed-card + .feed-card { margin-top: clamp(2.5rem, 7vh, 5rem); }

.feed-card__media { position: absolute; inset: 0; z-index: 0; }
.feed-card__media img,
.feed-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

.feed-card__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--feed-text-max);    /* Textspaltenbreite unten links */
  margin-inline: 0;
  padding: clamp(1.5rem, 5vw, 4rem);
  padding-block-end: clamp(2rem, 8vh, 5rem);
  /* Keine Abdunklungsfläche/Overlay – Lesbarkeit über Textschatten. */
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.feed-card .badge {
  display: inline-block;
  margin-bottom: 1rem;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.65);
  text-shadow: none;
}
.feed-card__title {
  max-width: 18ch;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.feed-card__tagline { font-weight: 400; }
.feed-card__text {
  margin-top: 1rem;
  max-width: 42rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}
.feed-card__link { display: inline-block; margin-top: 1.5rem; color: #fff; }

/* --- Fortschritts-Punkte: „Karte X von X" ---------------------------- *
   Fixed + vertikal im Viewport zentriert (nicht relativ zu einer Karte).
   Position rechts leitet sich aus --feed-max ab (dieselbe Variable wie bei
   .viewport-bleed) – dieselbe Randdistanz wie Hero-Video/Feed-Karten, damit
   sich beide automatisch mitverschieben, falls --feed-max angepasst wird:
     Mobile (--feed-max klein, 1.5rem)  → Punkte INNERHALB der Karte
       (rechter Rand weiter von der Viewport-Kante weg als die Karte selbst).
     Desktop (--feed-max groß, 5rem)    → Punkte AUSSERHALB der Karte, mit
       kleinem Abstand zu deren Außenkante (näher an der Viewport-Kante).
   Sichtbarkeit + aktiver Punkt kommen von initFeedStack() (index.js), das
   .is-visible auf .feed-progress und .is-active auf den jeweiligen Punkt
   setzt, solange irgendein Teil von .feed-stack im Viewport sichtbar ist. */
.feed-progress {
  /* Umgekehrte Header-Farbe: Light-Mode aktiv → Farbe, die die Header-Pille
     im Dark-Mode hätte (dunkles Blau-Schwarz, s. :root[data-theme="dark"]
     .site-header::before) und umgekehrt. --color-header ist das Panel-Feld
     hinter der HELLEN Header-Pille (header.php); die dunkle Variante ist dort
     als fester Wert hinterlegt – hier 1:1 gespiegelt. */
  --dot-color: rgb(12, 16, 28);
  position: fixed;
  top: 50%;
  right: calc(var(--feed-max) + 1rem);
  transform: translateY(-50%) translateX(1rem);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="dark"] .feed-progress {
  --dot-color: var(--color-header);
}
@media (min-width: 60rem) {
  .feed-progress { right: calc(var(--feed-max) - 1.25rem); }
}
.feed-progress.is-visible {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .feed-progress {
    transition: opacity 0.45s var(--motion-ease), transform 0.45s var(--motion-ease);
  }
}

.feed-progress__dot {
  width: 0.4rem;
  height: 0.4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot-color) 25%, transparent);
  /* --dot-scale kommt von initFeedStack() (index.js): 1, solange der Punkt
     nicht aktiv ist, sonst der aktuelle Fokus-Wert der zugehörigen Karte
     (1 → 1.45, am größten exakt wenn die Karte zentriert im Viewport steht).
     Kein Timer/Loop – die Größe folgt direkt der Scroll-Position, wie das
     --card-scale der Karten selbst. */
  transform: scale(var(--dot-scale, 1));
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .feed-progress__dot {
    transition: border-radius 0.3s var(--motion-ease), background-color 0.3s var(--motion-ease);
  }
}
.feed-progress__dot.is-active {
  border-radius: 2px;
  background: color-mix(in srgb, var(--dot-color) 65%, transparent);
}

/* --- Das Stacking selbst: nur wenn Bewegung erlaubt ----------------- *
   Reines CSS (kein JS nötig). Bei Reduced Motion (OS) oder Motion-Toggle
   (data-motion="reduced") bleiben die Karten statisch im normalen Fluss. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduced"]) .feed-card {
    position: sticky;
    top: var(--card-top);
  }
}