/* Blog-Artikel (/blog/<slug>) -- kein eigener Nav-Punkt, Artikel werden
   kontextuell auf Format-/Service-Seiten verlinkt. scripts/blog-build.py */
.sfx-blog { background: #1F1F1F; color: #fff; }
.sfx-blog-inner { max-width: 44rem; margin: 0 auto; padding: 0 clamp(1.4rem, 6vw, 2rem); }

/* Die Breadcrumb gehoert zum Artikel-Hero, nicht in die Navigationszeile.
   Die Inline-Styles des gemeinsamen Helpers werden nur hier ueberschrieben. */
.sfx-blog-hero .sfx-lp-breadcrumb {
  max-width: 44rem !important;
  margin: 0 auto 1.7rem !important;
  padding: 0 clamp(1.4rem, 6vw, 2rem) !important;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sfx-blog-hero { padding-top: clamp(3.5rem, 7vw, 5.5rem); padding-bottom: 2.5rem; }
/* .sfx-lp-hero-eyebrow ist in landing-page.css inline-flex -- margin:auto
   zentriert nur Block-Boxen, auf inline-flex bleibt es wirkungslos und die
   Zeile klebt links. display:flex macht die Box wieder eine Block-Ebene. */
.sfx-blog-hero .sfx-lp-hero-eyebrow { display: flex; max-width: 44rem; margin: 0 auto 1.2rem; padding: 0 clamp(1.4rem, 6vw, 2rem); }
.sfx-blog h1 {
  max-width: 44rem; margin: 0 auto 1.1rem; padding: 0 clamp(1.4rem, 6vw, 2rem);
  font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 300; line-height: 1.12; letter-spacing: -.015em;
}
.sfx-blog-dek {
  max-width: 44rem; margin: 0 auto 1.6rem; padding: 0 clamp(1.4rem, 6vw, 2rem);
  font-size: 1.12rem; line-height: 1.6; color: rgba(255,255,255,.75);
}
.sfx-blog-meta {
  max-width: 44rem; margin: 0 auto; padding: 0 clamp(1.4rem, 6vw, 2rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  font-size: .85rem; color: rgba(255,255,255,.5);
}
.sfx-blog-meta .dot { width: .3rem; height: .3rem; border-radius: 50%; background: rgba(255,255,255,.3); }

.sfx-blog-hero-img { margin: 2rem 0 0; }
.sfx-blog-hero-img img { width: 100%; display: block; border-radius: 1rem; object-fit: cover; max-height: 26rem; }

.sfx-blog-body { padding: 2.5rem 0 1rem; }
.sfx-blog-body p { font-size: 1.06rem; line-height: 1.75; color: rgba(255,255,255,.85); margin: 0 0 1.5rem; }
.sfx-blog-section { margin: 2.6rem 0; }
.sfx-blog-section h2 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -.01em; margin: 0 0 1.1rem; }
.sfx-blog-section img { width: 100%; border-radius: .85rem; display: block; margin: 0 0 1.3rem; object-fit: cover; max-height: 24rem; }
.sfx-blog-section ul { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.sfx-blog-section li {
  padding: .7rem 0 .7rem 1.4rem; position: relative; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 1rem; color: rgba(255,255,255,.85);
}
.sfx-blog-section li::before { content: "→"; position: absolute; left: 0; color: #FF8585; }

.sfx-blog-quote {
  margin: 2.6rem 0; padding: 1.8rem 2rem; border-left: 3px solid #FF8585;
  background: rgba(255,255,255,.03); border-radius: 0 .7rem .7rem 0;
}
.sfx-blog-quote p { font-style: italic; font-size: 1.1rem; line-height: 1.6; color: #fff; margin: 0 0 .9rem; }
.sfx-blog-quote cite { font-style: normal; font-size: .9rem; color: rgba(255,255,255,.55); }
.sfx-blog-quote cite strong { color: rgba(255,255,255,.85); }

.sfx-blog-share {
  display: flex; align-items: center; gap: .8rem; margin: 2.5rem 0;
  padding: 1.2rem 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);
}
.sfx-blog-share span { font-size: .85rem; color: rgba(255,255,255,.5); margin-right: .3rem; }
/* .elementor-kit-4 button (Theme-Kit-CSS) setzt ein sehr grosses, asymmetrisches
   padding (2.625rem 3.125rem .625rem .625rem) mit gleicher Selektor-Spezifitaet
   wie unsere Regel -- ohne eigenes padding gewinnt das per Default und blaeht
   die <button>-Varianten (native/copy) weit ueber 2.4rem auf, verschoben nach
   unten-links (das genau bekannte Muster aus den Format-Seiten-Tabs/Pfeilen:
   "Kit-CSS ueberschreibt Hintergrund/Radius/Padding sonst"). <a>-Varianten
   (linkedin/x) sind davon nicht betroffen, padding:0 schadet ihnen aber nicht. */
.sfx-blog-share button, .sfx-blog-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem !important; height: 2.4rem !important; padding: 0 !important;
  border-radius: 50% !important; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff;
  cursor: pointer; transition: border-color 200ms ease, background 200ms ease; text-decoration: none;
}
.sfx-blog-share button:hover, .sfx-blog-share a:hover { border-color: #FF8585; background: rgba(255,133,133,.1); }
.sfx-blog-share svg { width: 1.1rem; height: 1.1rem; min-width: 1.1rem; min-height: 1.1rem; flex-shrink: 0; }
.sfx-blog-share .sfx-copied { font-size: .8rem; color: #FF8585; opacity: 0; transition: opacity 200ms ease; }
.sfx-blog-share .sfx-copied.is-visible { opacity: 1; }

.sfx-blog-closing { background: #FF8585; color: #191b1f; margin: 3rem 0 0; padding: 2.6rem clamp(1.4rem, 6vw, 2rem); border-radius: 1.25rem; }
.sfx-blog-closing-inner { max-width: 40rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; }
.sfx-blog-closing h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.01em; margin: 0 0 .6rem; max-width: 26ch; }
.sfx-blog-closing p { margin: 0 0 1.2rem; font-size: 1rem; line-height: 1.55; color: rgba(25,27,31,.82); max-width: 34rem; }
.sfx-blog-closing-contact { display: flex; align-items: center; gap: .9rem; }
.sfx-blog-closing-contact img { width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; }
.sfx-blog-closing-contact div { font-size: .92rem; line-height: 1.4; color: rgba(25,27,31,.85); }
.sfx-blog-closing-contact strong { display: block; }
.sfx-blog-closing .sfx-lp-cta { background: #191b1f !important; color: #fff !important; margin-top: .5rem; }
.sfx-blog-closing .sfx-lp-cta:hover { background: #2a2d33 !important; }

.sfx-blog-tags { max-width: 44rem; margin: 2.5rem auto 0; padding: 0 clamp(1.4rem, 6vw, 2rem); display: flex; flex-wrap: wrap; gap: .6rem; }
.sfx-blog-tags a {
  display: inline-block; padding: .45rem .95rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  color: rgba(255,255,255,.7); font-size: .85rem; text-decoration: none; transition: border-color 200ms ease, color 200ms ease;
}
.sfx-blog-tags a:hover { border-color: #FF8585; color: #FF8585; }

/* Kontextuelle "Weiterführend"-Karte auf Format-/Service-Seiten (blog-crosslink.py) */
.sfx-blog-related { background: rgba(255,255,255,.03); }
.sfx-blog-related-inner { max-width: 68rem; margin: 0 auto; }
.sfx-blog-related-kicker { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin: 0 0 1.1rem; }
.sfx-blog-related-card {
  display: grid; grid-template-columns: 14rem 1fr; gap: 1.6rem; align-items: center;
  border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.2rem; text-decoration: none; color: inherit;
  transition: border-color 200ms ease, transform 200ms ease;
}
.sfx-blog-related-card:hover { border-color: rgba(255,133,133,.5); transform: translateY(-2px); }
.sfx-blog-related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: .6rem; display: block; }
.sfx-blog-related-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 500; color: #fff; }
.sfx-blog-related-card p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.6); line-height: 1.5; }
.sfx-blog-related-card .sfx-blog-related-cta { display: inline-block; margin-top: .6rem; font-size: .85rem; color: #FF8585; }

@media (max-width: 640px) {
  .sfx-blog-related-card { grid-template-columns: 1fr; }
  .sfx-blog-closing-inner { flex-direction: column; align-items: flex-start; }
}

/* Uebersicht /blog -- Magazin, kein Newsticker: keine Datumsangaben, dafuer
   Thema und Lesezeit. Der oberste Artikel liegt gross ueber der Breite,
   danach ein ruhiges Raster. */
.sfx-blogindex-liste { padding-top: 0 !important; }
.sfx-blogindex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.2rem); }
.sfx-blogindex-karte { position: relative; }
.sfx-blogindex-karte.is-gross { grid-column: 1 / -1; }
.sfx-blogindex-karte a {
  display: grid; grid-template-columns: 1fr; gap: 1.1rem;
  padding: 0 0 1.4rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: border-color 260ms ease;
}
.sfx-blogindex-karte.is-gross a {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem); align-items: center;
  padding-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.sfx-blogindex-karte a:hover { border-color: rgba(255,133,133,.55); }
.sfx-blogindex-bild {
  display: block; overflow: hidden; border-radius: 1rem; background: #14161c;
  aspect-ratio: 16 / 10;
}
.sfx-blogindex-karte.is-gross .sfx-blogindex-bild { aspect-ratio: 16 / 9; }
.sfx-blogindex-bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(85%) brightness(.86);
  transition: transform 500ms ease, filter 500ms ease;
}
.sfx-blogindex-karte a:hover .sfx-blogindex-bild img { transform: scale(1.03); filter: none; }
.sfx-blogindex-text { display: block; }
.sfx-blogindex-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.sfx-blogindex-chips span {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #FF8585; border: 1px solid rgba(255,133,133,.32); border-radius: 999px;
  padding: .28rem .7rem;
}
.sfx-blogindex-karte h2 {
  margin: 0 0 .7rem; font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 500;
  line-height: 1.22; letter-spacing: -.015em; color: #fff;
}
.sfx-blogindex-karte.is-gross h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); line-height: 1.12; }
.sfx-blogindex-karte p {
  margin: 0 0 1.1rem; font-size: .98rem; line-height: 1.66; color: rgba(255,255,255,.72);
}
.sfx-blogindex-karte.is-gross p { font-size: 1.06rem; max-width: 34rem; }
.sfx-blogindex-mehr {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9rem; font-weight: 500; color: #fff;
}
.sfx-blogindex-mehr i { font-style: normal; transition: transform 260ms ease; }
.sfx-blogindex-karte a:hover .sfx-blogindex-mehr i { transform: translateX(.3rem); }
.sfx-blogindex-mehr em {
  margin-left: auto; font-style: normal; font-size: .8rem; color: rgba(255,255,255,.5);
}
@media (max-width: 800px) {
  .sfx-blogindex-grid { grid-template-columns: 1fr; }
  .sfx-blogindex-karte.is-gross a { grid-template-columns: 1fr; }
}