/* ═══════════════════════════════════════════════════════════════
   DESIGN-SYNC BLOG ↔ STARTSEITE
   Gleicht Navigation und Hero-Verhalten der Blogseiten exakt an
   die Startseite (css/style.css) an. Wird als LETZTES Stylesheet
   geladen, damit es die Inline-<style>-Bloecke der Blogseiten
   ueberschreibt. Inhalte der Blogs bleiben unberuehrt.
   ═══════════════════════════════════════════════════════════════ */

/* ── NAVIGATION: schwebende Pill wie auf der Startseite ── */
.site-nav {
  background: transparent;
  position: fixed;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 1300px;
  max-width: 90%;
  z-index: 1000;
  height: 80px;
  display: flex;
  align-items: center;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav.scrolled {
  top: 15px;
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── HERO: gerundet eingerueckt, faehrt beim Scrollen auf 100% ── */
.hero {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  border-radius: 30px;
  overflow: hidden;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-radius 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero.is-scrolled {
  width: 100%;
  margin-top: 0;
  border-radius: 0;
}

/* ── BREADCRUMB im Hero statt als eigene Leiste darunter ── */
.hero .bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: none;
  margin: 0 0 18px;
  position: relative;
  z-index: 3;
}

.hero .bc a,
.hero .bc span {
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}

.hero .bc a {
  transition: color 0.2s ease;
}

.hero .bc a:hover {
  color: #fff;
}

.hero .bc .sep {
  color: rgba(255, 255, 255, 0.35);
}

.hero .bc .cur {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

/* Zentrierter Hero der Blog-Uebersicht */
.hero-centered .bc {
  justify-content: center;
}

/* ── TYPOGRAFIE: gleiche Schriften wie die Startseite ──
   Nunito fuer Fliesstext, Outfit fuer alle Ueberschriften.        */
body {
  font-family: 'Nunito', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

/* 'Visby' ist nirgends eingebunden und faellt ohnehin auf Nunito zurueck */
.fq {
  font-family: 'Outfit', sans-serif;
}

/* ── H1-AKZENT: gruen wie auf der Startseite, ohne Unterstrich ── */
.hero h1 em {
  display: inline;
  font-style: normal;
  color: var(--btn-green);
  text-decoration: none;
}

/* ── HERO-KOPF: Breadcrumb, dann Eyebrow, dann Headline ──
   Die Meta-Zeile (Datum/Autor/Lesezeit) sitzt jetzt unter der
   Subline, damit oben keine drei Kleintext-Zeilen stapeln.        */
.hero .bc {
  margin-bottom: 16px;
}

.hero-eyebrow {
  margin-bottom: 22px;
}

.hero-sub + .article-meta {
  margin-top: -14px;
  margin-bottom: 30px;
  gap: 18px;
}

/* ── CTA-Section vom Footer absetzen ──
   Lag bisher randlos auf dem Footer auf - beide dunkel, kein Schnitt. */
.funnel-teaser {
  width: 95%;
  max-width: 1240px;
  margin: 0 auto 88px;
  border-radius: 24px;
  overflow: hidden;
}

/* ── TEXT-HERVORHEBUNG ──
   Fliesstext laeuft auf font-weight 300. <strong> erbt vom Browser
   'bolder', was relativ zu 300 nur 400 ergibt - das Fett war also
   praktisch unsichtbar. Deshalb ein expliziter Wert.                */
.art strong,
.art b,
.bx-info strong,
.bx-dark strong,
.bx-warn strong,
.cl strong {
  font-weight: 700;
}

/* Schluesselaussagen zusaetzlich gruen unterstrichen - sparsam gesetzt */
.art .hl {
  text-decoration: underline;
  text-decoration-color: var(--btn-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
}

/* ── HERO-VIDEO: vollflaechig wie auf der Startseite ──
   Vorher lief das Video nur ueber die rechte Haelfte und lief links
   in eine deckende Flaeche aus. Jetzt fuellt es den ganzen Hero und
   liegt unter demselben Verlauf wie auf der Startseite.
   Als Blog erkennbar bleibt der Hero durch Breadcrumb, Themen-Pille,
   Meta-Zeile, Lesefortschritt und die gruene Abschlusskante.        */
.hero-video-bg {
  top: 0;
  left: 0;
  right: auto;
  width: 100%;
  height: 100%;
}

.hero-video-bg::before {
  width: 100%;
  height: 100%;
  background: linear-gradient(100deg,
      rgba(15, 23, 42, 0.90) 0%,
      rgba(15, 23, 42, 0.60) 40%,
      rgba(15, 23, 42, 0.20) 100%);
}

/* zusaetzlicher Grauschleier ueber dem Video entfaellt */
.hero-video-bg::after {
  background: transparent;
}

/* ── CTA-BAND: gleicher Untergrund wie der FAQ-Block darueber ──
   Die dunkle CTA-Karte stand vorher auf Weiss, direkt ueber dem
   dunklen Footer - harte Kante. Jetzt laeuft die Flaeche des
   FAQ-Blocks durch und traegt die Karte.                            */
.cta-band {
  background: var(--bagagreen-pale);
  padding-bottom: 88px;
}

.cta-band .funnel-teaser {
  margin-bottom: 0;
}

/* ── KLEINE DUNKLE BAUTEILE ETWAS ZURUECKNEHMEN ──
   Sidebar-Kopfzeilen und die Kurzfassungs-Box wirkten in vollem
   #0f172a zu hart. Gleiche Farbe, nur mit weniger Deckkraft, damit
   sie sich neben den grossen Flaechen (Hero, CTA, Footer) zurueck-
   nehmen. Die hellen Zweitzeilen werden mitgezogen, sonst faellt
   ihr Kontrast auf dem helleren Grund unter den Grenzwert.          */
.sc-head,
.bx-dark {
  background: rgba(15, 23, 42, 0.88);
}

.sc-head p {
  color: rgba(255, 255, 255, 0.72);
}

.bx-dark .ey {
  color: rgba(255, 255, 255, 0.7);
}

/* Blog-Uebersicht: Kartenbilder und das Bild der Aufmacher-Karte
   ebenso zuruecknehmen wie die Bauteile oben.                      */
.art-card-img.bg1,
.art-card-img.bg3,
.art-card-img.bg4,
.art-card-img.bg-feat-fallback,
.feat-img {
  background: rgba(15, 23, 42, 0.88);
}

.art-card-img.bg2,
.art-card-img.bg5 {
  background: rgba(9, 57, 147, 0.88);
}

.art-card-img.bg6 {
  background: rgba(15, 23, 42, 0.88);
}

/* ── HERO DER BLOG-UEBERSICHT ──
   Video statt Standbild, Zahlen statt Pillen, Absatz zentriert -
   damit die Uebersicht dieselbe Sprache spricht wie die Artikel.   */
.hero-centered .hero-video-bg {
  z-index: 0;
}

/* Das Abdunkeln uebernimmt .hero-centered::after, sonst wird es doppelt */
.hero-centered .hero-video-bg::before {
  background: transparent;
}

/* Hero-Video der Uebersicht: bildfuellend zuschneiden. Das Standbild
   dient als Poster, bis das Video geladen ist - beide bekommen denselben
   Ausschnitt, damit beim Umschalten nichts springt. Das quadratische
   Poster wird dabei etwas oberhalb der Mitte beschnitten, so bleiben
   Person und Tisch im Bild und das Logo in der Ecke faellt weg.       */
.hero-centered .hero-video-bg video,
.hero-centered .hero-video-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  display: block;
}

/* Der Text steht hier mittig ueber der ganzen Breite, nicht nur links wie
   auf den Artikelseiten. Der Schleier ist auf das Bild abgestimmt
   (sichtbarer Ausschnitt: mittlere Helligkeit ~149/255, Fensterflaechen
   bis 255) - deutlich heller als ein Video, daher etwas kraeftiger.   */
.hero-centered::after {
  background: linear-gradient(180deg,
      rgba(15, 23, 42, 0.72) 0%,
      rgba(15, 23, 42, 0.84) 100%);
}

/* Kleinschrift im Hero etwas kraeftiger - so bleibt sie auch auf den
   hellen Videostellen lesbar, ohne den ganzen Hero abzudunkeln.      */
.hero-centered .bc a,
.hero-centered .bc span {
  color: rgba(255, 255, 255, 0.85);
}

.hero-centered .bc .cur {
  color: #fff;
}

.hero-centered .bc .sep {
  color: rgba(255, 255, 255, 0.5);
}


.hero-content-centered p {
  text-align: center;
}

/* Zahlenblock wie in den Artikel-Heroes, nur mittig */
.hero-trust.hero-trust-centered {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 44px;
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.hero-trust-centered .t-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-trust-centered .t-num {
  font-weight: 700;
  font-size: 26px;
  color: #fff;
  line-height: 1;
}

.hero-trust-centered .t-lbl {
  font-weight: 300;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 5px;
}

/* ── TABELLEN IM ARTIKEL ──
   Im Blog-Stylesheet gab es keine, der Vergleichs-Ueberblick braucht eine.
   Auf schmalen Schirmen scrollt sie in ihrem eigenen Container.          */
.art table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grid-Elemente haben min-width:auto und wachsen sonst mit dem Inhalt -
   ohne das hier sprengt die Tabelle auf schmalen Schirmen die Seite. */
.page-wrap > .art,
.page-wrap > article {
  min-width: 0;
}

.art table thead th {
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap;
}

.art table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.6;
}

.art table tbody tr:nth-child(even) {
  background: var(--bagagreen-pale);
}

.art table tbody tr:last-child td {
  border-bottom: none;
}

/* ── NAVIGATION DER ANGEBOT-FUNNEL ──
   Bewusst reduziert (kein Menue, das vom Formular ablenkt), aber in
   Farbe, Hoehe und Wortmarke identisch zur Hauptnavigation. Vorher:
   schwarze 62px-Leiste mit abweichender Schreibweise des Namens.     */
.funnel-nav {
  background: #0f172a;
  height: 80px;
  display: flex;
  align-items: center;
  padding: 0 24px;
}

.funnel-nav-inner {
  width: 1300px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.funnel-nav .nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.funnel-nav .nav-logo img {
  height: 34px;
  width: auto;
}

.funnel-nav .nav-logo-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #fff;
  letter-spacing: -0.01em;
}

.funnel-nav .nav-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.funnel-nav .nav-back:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

@media (max-width: 600px) {
  .funnel-nav {
    height: 68px;
    padding: 0 5%;
  }

  .funnel-nav .nav-logo img {
    height: 28px;
  }

  .funnel-nav .nav-back {
    font-size: 12.5px;
    padding: 8px 14px;
  }
}

/* ── MOBILE: Nav und Hero full-bleed, identisch zur Startseite ── */
@media (max-width: 768px) {
  .site-nav {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  .site-nav.scrolled {
    top: 0 !important;
  }

  .hero,
  .hero.is-scrolled {
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  /* Doppelte Innenabstaende aufloesen - Text nutzt ~90% der Breite */
  .hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  .hero-inner {
    padding: 96px 5% 44px !important;
    max-width: none !important;
  }

  /* Blog-Uebersicht: Container (92%) + Eigenpadding stapelten sich auf 69% */
  .hero-centered .container {
    width: 100%;
    max-width: none;
    padding-left: 5%;
    padding-right: 5%;
  }

  .hero-centered .hero-content-centered {
    padding-left: 0;
    padding-right: 0;
  }

  /* Eyebrow soll einzeilig bleiben statt als zweizeilige Pille zu brechen */
  .hero-eyebrow {
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    margin-bottom: 18px;
  }

  .hero .bc,
  .hero .bc a,
  .hero .bc span {
    font-size: 11.5px;
  }

  /* Meta-Zeile einzeilig halten statt mit einem Waisen-Element umzubrechen */
  .hero-sub + .article-meta {
    gap: 8px;
  }

  .hero-sub + .article-meta .meta-item {
    font-size: 10px;
  }

  /* CTA-Section: schmalerer Rand, weniger Abstand nach unten */
  .funnel-teaser {
    width: 90%;
    margin-bottom: 56px;
    border-radius: 18px;
  }

  /* Video bleibt vollflaechig, flacher Schleier wie auf der Startseite */
  .hero-video-bg {
    opacity: 1;
    width: 100% !important;
  }

  .hero-video-bg::before {
    width: 100% !important;
    background: rgba(15, 23, 42, 0.82) !important;
  }

  .cta-band {
    padding-bottom: 56px;
  }

  /* Drei feste Spalten - sonst rutscht der dritte Wert in eine zweite Zeile */
  .hero-trust.hero-trust-centered {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 32px;
    padding-top: 22px;
    width: 100%;
  }

  .hero-trust-centered .t-num {
    font-size: 22px;
  }

  .hero-trust-centered .t-lbl {
    font-size: 10px;
    letter-spacing: 0.04em;
    text-align: center;
  }
}