.elementor-4912 .elementor-element.elementor-element-372131f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4912 .elementor-element.elementor-element-605b2e8 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}body.elementor-page-4912:not(.elementor-motion-effects-element-type-background), body.elementor-page-4912 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#111827;}/* Start custom CSS *//* ===== Single Blogpost Layout (bereinigt) ===== */

/* Seite/Hintergrund auf volle Breite legen */
html, body, body.single-post {
  background: #0b1320;
  color: #F9FAFB;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  overflow-x: hidden; /* Sicherheitsnetz gegen horizontales Scrollen */
}

/* Allgemeiner Artikelwrap – KEIN Hintergrund mehr, nur Zentrierung */
.ks-article {
  background: transparent;               /* <— war die "schmale Balken"-Ursache */
  padding: clamp(28px,5vw,56px) clamp(20px,6vw,60px);
  max-width: 980px;
  margin: 0 auto;
}

/* ---------- HERO ---------- */
.ks-article__hero {
  text-align: center;
  margin-bottom: clamp(26px,4vw,44px);
}

/* Optionales Beitragsbild (nicht full-bleed) */
.ks-article__thumb {
  margin: 0 auto clamp(20px,3vw,30px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.ks-article__thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/9;
}

/* Full-Bleed Shortcode/Embed im Hero – ohne Scrollbar */
.ks-article__hero .ks-hero-embed {
  display: block;
  padding: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  max-width: 100vw !important;
  width: auto !important;                /* kein hartes 100vw -> verhindert Scrollbalken */
}
.ks-article__hero .ks-hero-embed .elementor-widget-container,
.ks-article__hero .ks-hero-embed .elementor-shortcode,
.ks-article__hero .ks-hero-embed .wp-block-shortcode {
  margin: 0 !important;
  padding: 0 !important;
}
.ks-article__hero .ks-hero-embed img,
.ks-article__hero .ks-hero-embed video,
.ks-article__hero .ks-hero-embed iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Meta + Titel + Excerpt */
.ks-article__meta {
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
  font-size:14px; color:#94a3b8; margin-bottom:10px;
}
.ks-article__meta a.cat { color:#3B82F6; text-decoration:none; font-weight:600; }
.ks-article__meta a.cat:hover { text-decoration:underline; }

.ks-article__title {
  font-size: clamp(24px,3vw,36px);
  margin: 0 0 12px;
  font-weight: 700;
  color: #fff;
}
.ks-article__excerpt {
  max-width: 720px;
  margin: 0 auto clamp(20px,3vw,32px);
  color: #CBD5E1;
  line-height: 1.65;
  font-size: 16px;
}

/* ---------- CONTENT ---------- */
.ks-article__content {
  text-align: left;
  line-height: 1.7;
  font-size: 16px;
  color: #E2E8F0;
}
.ks-article__content h2 {
  font-size: clamp(20px,2.6vw,28px);
  margin: 28px 0 14px;
  color: #fff;
}
.ks-article__content h3 {
  font-size: clamp(17px,2vw,22px);
  margin: 22px 0 10px;
  color: #e5eefb;
}
.ks-article__content p { margin: 0 0 16px; }
.ks-article__content ul,
.ks-article__content ol { margin: 0 0 20px 22px; }
.ks-article__content li { margin-bottom: 8px; }
.ks-article__content blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  background: #0f1722;
  border-left: 4px solid #3B82F6;
  border-radius: 6px;
  font-style: italic;
  color: #CBD5E1;
}

/* ---------- FOOTER: Share + Tags ---------- */
.ks-article__footer {
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: clamp(32px,5vw,48px);
  padding-top: clamp(22px,3vw,32px);
}
.ks-article__share {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.ks-article__share .label { font-weight:600; color:#E2E8F0; }
.ks-article__share .ksb-btn {
  background:#0f1722; border:1px solid rgba(255,255,255,.15);
  color:#e7edf9; padding:8px 12px; border-radius:8px;
  text-decoration:none; font-size:14px;
  transition: background .15s, border-color .15s;
}
.ks-article__share .ksb-btn:hover { background:#1a2436; border-color:rgba(255,255,255,.25); }

.ks-article__tags { display:flex; flex-wrap:wrap; gap:8px; }
.ks-article__tags .tag {
  background:#0d1b28; border:1px solid rgba(16,185,129,.35);
  color:#9fe8d1; padding:4px 10px; border-radius:999px;
  font-size:13px; text-decoration:none;
}
.ks-article__tags .tag:hover { background:#10B981; color:#fff; border-color:#10B981; }

/* Prev / Next */
.ks-prevnext { display:flex; justify-content:space-between; margin-top: clamp(28px,4vw,42px); }
.ks-prevnext a { color:#3B82F6; text-decoration:none; font-weight:600; }
.ks-prevnext a:hover { text-decoration:underline; }

/* ---------- RELATED ---------- */
.ks-related { margin-top: clamp(36px,5vw,56px); }
.ks-more__h3 { margin:0 0 16px; font-size:clamp(18px,2.2vw,26px); color:#fff; }
.ks-more__grid { display:grid; gap:16px; }
@media (min-width:720px){ .ks-more__grid { grid-template-columns: repeat(3, 1fr); } }
.ks-mini .box {
  display:block; padding:16px 18px; background:#0f1722; border:1px solid rgba(255,255,255,.1);
  border-radius:12px; text-decoration:none;
  transition: transform .12s, border-color .15s, box-shadow .15s;
}
.ks-mini .box:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.ks-mini .t { font-size:16px; margin:0 0 6px; color:#fff; }
.ks-mini .d { font-size:14px; color:#CBD5E1; line-height:1.5; }

/* Breadcrumbs – optional */
.ks-breadcrumbs { font-size:13px; margin-bottom:10px; color:#94a3b8; }
.ks-breadcrumbs a { color:#3B82F6; text-decoration:none; }
.ks-breadcrumbs a:hover { text-decoration:underline; }

/* ---------- Eltern-Container „entboxen“ (Frontend & Editor) ---------- */
body.single-post .container,
body.single-post .site-content,
body.single-post .content-area,
body.single-post .entry-content,
body.single-post .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}

/* Nach dem Hero wieder angenehm einschränken */
.ks-article__meta,
.ks-article__title,
.ks-article__excerpt,
.ks-article__content,
.ks-article__footer,
.ks-article__more,
.ks-related {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* === Wrapper entsperren (hat aktuell max-width: 980px) === */
body.single-post .ks-article{
  max-width: 100% !important;  /* oder: max-width: none */
  width: 100%;
  box-sizing: border-box;
}

/* Alle Hauptbereiche auf größere, zentrierte Breite bringen */
body.single-post .ks-article__meta,
body.single-post .ks-article__title,
body.single-post .ks-article__excerpt,
body.single-post .ks-article__content,
body.single-post .ks-article__footer,
body.single-post .ks-article__more,
body.single-post .ks-related{
  /* Breiter als bisher (1120px) – passe bei Bedarf an (1200–1320 px) */
  max-width: min(1280px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px;   /* angenehme Seitenluft beibehalten */
  padding-right: 16px;
}

/* Nur Fließtext weiten (falls du NUR Text größer willst) */
body.single-post .ks-article__content{
  max-width: min(1280px, 92vw) !important;
}

/* Mobil wieder vollbreit */
@media (max-width: 980px){
  body.single-post .ks-article__meta,
  body.single-post .ks-article__title,
  body.single-post .ks-article__excerpt,
  body.single-post .ks-article__content,
  body.single-post .ks-article__footer,
  body.single-post .ks-article__more,
  body.single-post .ks-related{
    max-width: 100% !important;
  }
}

/* === RESET: Hero-Embed nicht mehr Full-Bleed, sondern wie Content zentriert === */
body.single-post .ks-article__hero .ks-hero-embed{
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(1120px, 92vw) !important; /* wie dein Contentbereich */
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Innenliegende Elementor/Gutenberg-Wrapper ebenfalls entboxen */
body.single-post .ks-article__hero .ks-hero-embed .elementor-widget-container,
body.single-post .ks-article__hero .ks-hero-embed .elementor-shortcode,
body.single-post .ks-article__hero .ks-hero-embed .wp-block-shortcode{
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Medien im Hero sauber skaliert und optisch wie dein Thumbnail */
body.single-post .ks-article__hero .ks-hero-embed img,
body.single-post .ks-article__hero .ks-hero-embed video,
body.single-post .ks-article__hero .ks-hero-embed iframe{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  border: 0;
  border-radius: 14px;                 /* optional: wie Thumbnail */
  box-shadow: 0 10px 26px rgba(0,0,0,.35); /* optional: wie Thumbnail */
}

/* Sicherstellen, dass evtl. alte Full-Bleed-Margen keine Wirkung mehr haben */
body.single-post .ks-article__hero .ks-hero-embed{
  /* hebt calc(50% - 50vw) aus früherer Version auf */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Links im Blog-Content untereinander, immer blau */
.ks-product-links {
  display: block;
  margin: 6px 0;
  padding: 0;
}

.ks-product-links a {
  display: block;                /* Jeder Link nimmt eine eigene Zeile */
  margin: 4px 0;
  color: #3B82F6;
  text-decoration: underline;
  font-weight: 500;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.ks-product-links a:hover {
  color: #60A5FA;
  text-decoration-color: #60A5FA;
}

/* ===== Links im Blog-Content einheitlich stylen ===== */
.ks-article__content a {
  color: #3B82F6;                 /* Blau (wie Produktlinks) */
  text-decoration: underline;
  font-weight: 500;
  transition: color .15s ease, text-decoration-color .15s ease;
}

.ks-article__content a:hover {
  color: #60A5FA;                 /* helleres Blau beim Hover */
  text-decoration-color: #60A5FA;
}

.ks-article__content a:visited {
  color: #2563eb;                 /* leicht dunkleres Blau für besuchte Links */
}/* End custom CSS */