/* ─────────────────────────────────────────────
   Wrapper & Layout (nur für Blog-Posts!)
─────────────────────────────────────────────── */
.posting-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem 2.2rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
  color: #212529 !important;
}

.post-content-wrapper,
.post-content-wrapper .post-body,
.post-content-wrapper .post-body p,
.post-content-wrapper .post-body span,
.post-content-wrapper .post-body li {
  color: #212529 !important;
}

.post-content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ─────────────────────────────────────────────
   Wrapper Weitere Posts
─────────────────────────────────────────────── */
/* Wrapper mit Rahmen */
.related-articles-wrapper {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

/* Header */
.related-header {
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: .75rem;
    margin-bottom: 1.5rem;
}

.related-header .related-title {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Card */
.related-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex;
    flex-direction: column;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* Cover */
.related-cover-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
}

.related-cover {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.related-card:hover .related-cover {
    transform: scale(1.08);
}

/* Body */
.related-body {
    padding: 1rem 1.2rem 1.2rem 1.2rem;
}

.related-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.related-teaser {
    font-size: .9rem;
    color: #666;
    margin-bottom: .75rem;
}

/* Zoom-Overlay */
.zoom-wrapper { display:inline-block; cursor:zoom-in; }
.zoom-wrapper .zoom-overlay {
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.6);
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.9rem;
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}
.zoom-wrapper:hover .zoom-overlay { opacity:1; }

/* ─────────────────────────────────────────────
   Wrapper Blogger
─────────────────────────────────────────────── */


/* Nur Blogger-Content: Schrift schwarz, linksbündig, Standard-Font */
/* 1. Nur Text schwarz machen – NICHT Bilder, NICHT Buttons */
.blogger-content p,
.blogger-content span,
.blogger-content div,
.blogger-content li,
.blogger-content h1,
.blogger-content h2,
.blogger-content h3,
.blogger-content h4,
.blogger-content h5,
.blogger-content h6 {
  color:#000 !important;
  text-align:left !important;
  font-family: inherit !important;
}

/* 2. Inline text-align von Blogger überschreiben */
.blogger-content [style*="text-align"] {
  text-align:left !important;
}

/* 3. Weiße Blogger-Hintergründe entfernen */
.blogger-content [style*="background"],
.blogger-content [style*="background-color"] {
    background: transparent !important;
    background-color: transparent !important;
}