```css
/* ==========================================================================
   ZTI – Komplett-CSS Fix (Global + Hero Container)
   Ziel: Kein "Rausrutschen" nach links/rechts, Hero-Inhalt sauber zentriert,
         Layout wie Startseite (GeneratePress + Gutenberg)
   ========================================================================== */

/* =========================================================
   1) GLOBAL: verhindert horizontales Scrollen / Versatz
   (typisch bei 100vw, alignfull, transform/left:50% Hacks)
========================================================= */
html, body{
  overflow-x: hidden;
}

.wp-site-blocks,
.site,
.site-content,
#page,
#content{
  overflow-x: hidden;
}

/* Gutenberg alignfull kann minimal überstehen -> abfangen */
.alignfull{
  max-width: 100%;
}

/* =========================================================
   2) ZTI HERO: Container + Grid wie Startseite
   Voraussetzungen:
   - Hero-Wrapper nutzt .zti-hero
   - Innencontainer nutzt .zti-container
   - Grid nutzt .zti-hero-grid
========================================================= */
.zti-hero{
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
}

/* Innencontainer: fixiert die Contentbreite + Padding */
.zti-hero .zti-container{
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Grid: Text links, Info/Side-Box rechts */
.zti-hero-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

/* Mobile/Tablet: einspaltig */
@media (max-width: 980px){
  .zti-hero-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Linker Textblock darf nicht zu breit werden */
.zti-hero-content{
  max-width: 720px;
}

/* Headline darf umbrechen, nicht abschneiden */
.zti-hero-title{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Lead-Text ebenfalls sicher umbrechen */
.zti-hero-lead{
  white-space: normal;
  overflow-wrap: anywhere;
}

/* CTA & Pills sollen nicht überlaufen */
.zti-hero-cta,
.zti-hero-pills{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

/* Buttons: verhindern, dass sie "zu breit" werden */
.zti-hero-cta a{
  max-width: 100%;
}

/* Safety: verhindert, dass Kinder im Hero 100vw sprengen */
.zti-hero *{
  max-width: 100%;
}

/* =========================================================
   3) OPTIONAL: Falls du bei Fullwidth-Sections mit 100vw arbeitest
   (z.B. left:50% + translateX(-50%))
   -> verhindert den 1–2px Versatz, der oft entsteht
========================================================= */
.zti-fullbleed{
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* =========================================================
   4) OPTIONAL: GeneratePress "separate containers" – Abstand oben minimieren
   (nur falls du global weniger Luft unter dem Header willst)
========================================================= */
.separate-containers .site-main{
  margin-top: 0 !important;
}
.separate-containers .inside-article{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.separate-containers .entry-content > *:first-child{
  margin-top: 0 !important;
}

/* Header padding schlanker (global) */
.inside-header{
  padding-top: 10px !important;   /* bei Bedarf 6–14px */
  padding-bottom: 10px !important;
}
.site-logo,
.site-branding{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* =========================================================
   FIX: Hero rutscht nach rechts (Grid 2 Spalten aber nur 1 Inhalt)
   Lösung: Grid wird automatisch zu 1 Spalte, wenn kein Panel existiert
========================================================= */

/* Standard: 2 Spalten */
.zti-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 40px;
  align-items: center;
}

/* Wenn KEIN Panel vorhanden ist -> 1 Spalte */
.zti-hero-grid:not(:has(.zti-hero-panel)){
  grid-template-columns: minmax(0, 1fr);
}

/* Falls Inhalt fälschlich in "Spalte 2" landet -> auf volle Breite ziehen */
.zti-hero-grid > *{
  min-width: 0;
}
.zti-hero-grid:not(:has(.zti-hero-panel)) > *{
  grid-column: 1 / -1;
}

/* Mobile: immer 1 Spalte */
@media (max-width: 980px){
  .zti-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
}

/* =========================================================
   FIX: Hero-Hintergrund/Lesbarkeit (falls Hintergrund weg/hell ist)
========================================================= */
.zti-hero{
  background: radial-gradient(1200px 600px at 20% 20%, rgba(42,170,225,.18), transparent 60%),
              linear-gradient(135deg, #0b1220 0%, #0b2a3a 100%);
  color: #fff;
}
.zti-hero .zti-hero-title,
.zti-hero .zti-hero-lead,
.zti-hero p,
.zti-hero li{
  color: #fff;
}