/* =====================================================================
   GLOBALIST BLOG STYLESHEET
   Dark editorial template — blog posts + blog overview
   Overrides Webflow / eine-neue-welt.webflow.css light-mode defaults.
   ===================================================================== */

/* ── 1. Body & page atmosphere ──────────────────────────────────────── */
.blogbody {
  background:
    radial-gradient(circle at 12% 8%,  rgba(0,237,179,.11), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(0,237,179,.08), transparent 48%),
    radial-gradient(circle at 50% 55%, rgba(0,237,179,.03), transparent 65%),
    #020c09 !important;
  background-attachment: fixed !important;
  color: #e0e7e5;
}
.blog-bersicht {
  background:
    radial-gradient(circle at 12% 8%,  rgba(0,237,179,.11), transparent 42%),
    radial-gradient(circle at 88% 82%, rgba(0,237,179,.08), transparent 48%),
    radial-gradient(circle at 50% 55%, rgba(0,237,179,.03), transparent 65%),
    #020c09 !important;
  background-attachment: fixed !important;
}

/* ── 2. Reading-progress bar ────────────────────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: #00EDB3;
  box-shadow: 0 0 12px rgba(0,237,179,.6);
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}

/* ── 3. Blog post hero header ───────────────────────────────────────── */
.section_blog-post3-header {
  background-image: none !important;
  background: transparent !important;
  padding-top: clamp(40px,6vw,88px);
  padding-bottom: 0;
}
.padding-section-large.blogpost {
  padding-top:   clamp(40px,5vw,72px) !important;
  padding-bottom: clamp(40px,5vw,72px) !important;
}
.blog-post3-header_component {
  gap: clamp(28px,4vw,72px) !important;
  align-items: start !important;
}

/* Breadcrumb */
.blog-post3-header_breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}
.breadcrumb-link {
  color: #5c7c75 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color .2s;
}
.breadcrumb-link:hover { color: #00EDB3 !important; }
.breadcrumb-divider { color: #3e5852 !important; }
.breadcrumb-divider svg path { stroke: #3e5852; }
.breadcrump-link { font-size: 11px; font-weight: 500; color: #e0e7e5; letter-spacing: .04em; }

/* H1 — article title */
.blog-post3-header_title-wrapper h1,
h1.heading-style-h2-2,
.heading-style-h2-2 {
  color: #ffffff !important;
  font-size: clamp(26px,4vw,52px) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

/* Author meta */
.blog-post3-header_content-top {
  border-top: 1px solid rgba(0,237,179,.12);
  padding-top: 18px;
  margin-top: 18px;
}
.text-weight-semibold,
.blog-post3-header_author-text strong { color: #ffffff !important; }
.text-size-small { color: #5c7c75 !important; font-size: 12px; }
.blog-post-header3_text-divider { color: #3e5852 !important; }
.autorinfo { color: #5c7c75 !important; font-size: 13px; margin-top: 4px; }

/* LinkedIn share icon */
.icon-embed-small-4 { color: #00EDB3 !important; }

/* Hero image */
.blog-post3-header_image-wrapper {
  border-radius: 20px !important;
  border: 1px solid rgba(0,237,179,.15) !important;
  box-shadow:
    0 0 60px -12px rgba(0,237,179,.12),
    0 24px 60px rgba(0,0,0,.55) !important;
  overflow: hidden !important;
  background: #041410;
}
.blog-post3-header_image {
  border-radius: 0 !important;
  display: block;
  width: 100%;
}

/* ── 4. Content area wrapper ────────────────────────────────────────── */
.section_content31,
.padding-global-3 {
  background: transparent !important;
}

/* ── 5. TOC sidebar ─────────────────────────────────────────────────── */
.content31_newsletter {
  background: #051a15 !important;
  border: 1px solid rgba(0,237,179,.15) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  position: sticky;
  top: 5rem;
}
.content31_newsletter .contents,
.content31_newsletter strong {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tableofcontent {
  color: #5c7c75 !important;
  font-size: 13px !important;
  line-height: 1.55;
  padding: 5px 0 !important;
  display: block;
  transition: color .2s;
  border-left: 2px solid transparent;
  padding-left: 8px !important;
}
.tableofcontent:hover,
.tableofcontent.w--current {
  color: #00EDB3 !important;
  border-left-color: rgba(0,237,179,.4);
}
.tableofcontent p.paragraph-3 {
  color: inherit !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Sidebar spotify widget */
.content31_newsletter .heading-style-h6-2 { color: #ffffff !important; }
.content31_newsletter p { color: rgba(255,255,255,.6) !important; font-size: 13px; line-height: 1.5; }
.content31_newsletter .text-weight-semibold { color: rgba(255,255,255,.75) !important; }
.spotify { color: #1db954 !important; }

/* ── 6. Article body text ───────────────────────────────────────────── */
.blogtext {
  color: rgba(255,255,255,.82) !important;
  font-size: 16px !important;
  line-height: 1.78 !important;
}
.blogtext strong { color: #ffffff !important; }

.blogh2 {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(20px,2.6vw,30px) !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
  line-height: 1.2 !important;
  margin-top: 2.8em !important;
  margin-bottom: .7em !important;
  border-bottom: none !important;
}
.blogh3,
.heading-9 {
  color: rgba(255,255,255,.92) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(16px,1.8vw,20px) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  margin-top: 2.2em !important;
  margin-bottom: .4em !important;
}

.text-rich-text {
  color: rgba(255,255,255,.82) !important;
  padding: 0 !important;
}
.text-rich-text p { color: rgba(255,255,255,.82) !important; }
.text-rich-text strong { color: #ffffff !important; }
.text-rich-text ul li,
.text-rich-text ol li { color: rgba(255,255,255,.78) !important; margin-bottom: .5em; line-height: 1.7; }
.liblog li { color: rgba(255,255,255,.78) !important; line-height: 1.7 !important; margin-bottom: .5em; }

/* ── 7. Key-takeaways box (wasduwissenmusst) ────────────────────────── */
.wasduwissenmusst {
  background: #051a15 !important;
  border: 1px solid rgba(0,237,179,.22) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
  position: relative;
  overflow: hidden;
}
.wasduwissenmusst::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00EDB3 0%, transparent 70%);
}
.wasduwissenmusst-headline {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
}
.wasduwissenmusst-eintrag {
  border-bottom: 1px solid rgba(0,237,179,.08) !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
  margin-top: 12px !important;
}
.wasduwissenmusst-eintrag:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.wasduwissenmusst-eintrag .blogtext { color: rgba(255,255,255,.72) !important; }

/* ── 8. Callout boxes (tip / definition) ────────────────────────────── */
.code-embed-2 > div,
.code-embed-3 > div {
  background: #041410 !important;
  border-left: 2px solid #00EDB3 !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.85) !important;
  padding: 14px 18px !important;
}
.code-embed-2 > div strong,
.code-embed-3 > div strong { color: #ffffff !important; }

/* ── 9. Lesetipp ────────────────────────────────────────────────────── */
.lesetipp {
  background: rgba(0,237,179,.06) !important;
  border-left: 3px solid #00EDB3 !important;
  border-radius: 0 10px 10px 0 !important;
  margin: 2.5em 0 !important;
}
.lesetipp-content {
  padding: 16px 20px !important;
  margin: 0 !important;
}
.globalist-lesetipp {
  color: #00EDB3 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}
.lesetipp-link {
  color: rgba(255,255,255,.85) !important;
  font-weight: 600;
  text-decoration: none !important;
}
.lesetipp-link:hover { color: #00EDB3 !important; }
.lesetippimage { filter: none; }

/* ── 10. Tables ─────────────────────────────────────────────────────── */
.tablecontainer { background: transparent !important; }
.fs-table_table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 14px;
}
.fs-table_head { background: rgba(0,237,179,.07) !important; }
.fs-table_header {
  color: #00EDB3 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(0,237,179,.15) !important;
  padding: 12px 16px !important;
}
.fs-table_cell {
  color: rgba(255,255,255,.75) !important;
  border: 1px solid rgba(0,237,179,.09) !important;
  padding: 11px 16px !important;
  line-height: 1.55 !important;
  vertical-align: top;
}
.fs-table_row:nth-child(even) .fs-table_cell {
  background: rgba(0,237,179,.03) !important;
}

/* ── 11. Paragraph utility / FAQ ────────────────────────────────────── */
.paragraph-3 {
  color: rgba(255,255,255,.78) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
.pfaq { color: rgba(255,255,255,.78) !important; font-size: 15px; line-height: 1.72; }

/* ── 12. FAQ accordion (if present) ────────────────────────────────── */
.faq-accordion,
.faq-accordion_item {
  background: #051a15 !important;
  border-color: rgba(0,237,179,.12) !important;
  border-radius: 12px;
}
.faq-accordion_question { color: #ffffff !important; }
.faq-accordion_answer { color: rgba(255,255,255,.75) !important; }

/* ── 13. Blog overview — section_blog67 ────────────────────────────── */
.section_blog67 {
  background-image: none !important;
  background: transparent !important;
}
.blog67_heading,
.blog67_heading-wrapper { color: #ffffff !important; }
.heading-style-h2-3 {
  color: #ffffff !important;
  font-size: clamp(30px,5vw,52px) !important;
  font-weight: 900 !important;
  letter-spacing: -.025em !important;
  line-height: 1.06 !important;
}
.text-style-tagline {
  color: #5c7c75 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .4em !important;
  text-transform: uppercase !important;
}
.text-size-medium-2 {
  color: rgba(255,255,255,.5) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Blog grid cards */
.blog67_item {
  background: #051a15 !important;
  border: 1px solid rgba(0,237,179,.12) !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform .32s cubic-bezier(0.16,1,0.3,1),
    border-color .25s,
    box-shadow .32s !important;
}
.blog67_item:hover {
  border-color: rgba(0,237,179,.35) !important;
  transform: translateY(-4px) !important;
  box-shadow:
    0 20px 48px -12px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,237,179,.07) !important;
}
.blog67_item-content {
  background: transparent !important;
  flex: 1;
  padding: 20px 22px !important;
}
.blog67_image-wrapper {
  aspect-ratio: 16/10;
  overflow: hidden !important;
  flex-shrink: 0;
}
.blog67_image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 16/10;
  transition: transform .4s cubic-bezier(0.16,1,0.3,1) !important;
  display: block;
}
.blog67_item:hover .blog67_image {
  transform: scale(1.05) !important;
}
.heading-style-h5-4 {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  letter-spacing: -.01em !important;
}

/* Slider controls */
.blog-wrapping-hold .splide__arrow {
  background: rgba(0,237,179,.1) !important;
  border: 1px solid rgba(0,237,179,.25) !important;
  border-radius: 50% !important;
  transition: background .2s !important;
}
.blog-wrapping-hold .splide__arrow:hover {
  background: rgba(0,237,179,.22) !important;
}
.blog-wrapping-hold .splide__arrow svg { fill: #00EDB3 !important; }
.blog-slider .splide__pagination__page {
  background: rgba(0,237,179,.25) !important;
}
.blog-slider .splide__pagination__page.is-active {
  background: #00EDB3 !important;
}

/* Webflow slider (blog67 group) */
.blog67_group .w-slider-dot {
  background: rgba(0,237,179,.2) !important;
}
.blog67_group .w-slider-dot.w-active {
  background: #00EDB3 !important;
}
.blog67_group .w-icon-slider-left,
.blog67_group .w-icon-slider-right { color: #00EDB3 !important; }

/* ── 14. Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .content31_component {
    grid-template-columns: .45fr 1fr !important;
    gap: 3rem !important;
  }
}
@media (max-width: 991px) {
  .content31_component {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .content31_newsletter {
    position: static !important;
    top: auto !important;
    order: -1;
  }
  .blog-post3-header_component {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .blog-post3-header_image-wrapper {
    order: -1;
  }
}
@media (max-width: 767px) {
  .heading-style-h2-2 {
    font-size: clamp(24px,7vw,34px) !important;
  }
  .content31_newsletter {
    display: none !important;
  }
  .wasduwissenmusst { padding: 18px !important; }
  .blog67_image-wrapper { aspect-ratio: 4/3; }
}
@media (max-width: 480px) {
  .section_blog-post3-header { padding-top: 28px; }
  .blog67_image-wrapper { aspect-ratio: 3/2; }
  .heading-style-h5-4 { font-size: 15px !important; }
}
@media (hover: none) {
  .blog67_item:hover { transform: none !important; }
  .blog67_item:hover .blog67_image { transform: none !important; }
}