/* =========================================================
   IWWIT – Related Posts
   Kompakte Karten
   Inhalt exakt an Bildhöhe ausgerichtet
   ========================================================= */

:root {
  --font-family: 'Barlow Semi Condensed', Arial, sans-serif;
}


/* =========================================================
   HAUPTBLOCK
   ========================================================= */

.iwwit-related-posts {
  --card-bg: #ffffff;

  --primary-color: #2c3e50;
  --accent-color: #5084ab;

  --text-main: #333333;
  --text-muted: #666666;

  --border-color: #e6e8ea;

  --badge-bg: #eef5f8;
  --badge-text: #38617B;

  --card-shadow:
    0 7px 22px rgba(0, 0, 0, 0.045);

  --card-shadow-hover:
    0 11px 28px rgba(0, 0, 0, 0.075);

  padding: 0 !important;

  color: var(--text-main);

  font-family:
    var(
      --wp--preset--font-family--barlow-semi-condensed,
      var(--font-family, inherit)
    );

  scroll-margin-top: 160px;
}


/* =========================================================
   CONTENT-BREITE / AUSSENABSTÄNDE
   Desktop: max. 1200px
   Tablet: 24px Seitenabstand
   Mobile: 15px Seitenabstand
   ========================================================= */

.iwwit-related-posts,
.iwwit-article-content > .iwwit-related-posts,
.wp-block-post-content > .iwwit-related-posts,
.entry-content > .iwwit-related-posts,
main .iwwit-related-posts {
  width: min(calc(100% - 48px), 1200px) !important;
  max-width: 1000px !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .iwwit-related-posts,
  .iwwit-article-content > .iwwit-related-posts,
  .wp-block-post-content > .iwwit-related-posts,
  .entry-content > .iwwit-related-posts,
  main .iwwit-related-posts {
    width: calc(100% - 48px) !important;
    max-width: 1000px !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .iwwit-related-posts,
  .iwwit-article-content > .iwwit-related-posts,
  .wp-block-post-content > .iwwit-related-posts,
  .entry-content > .iwwit-related-posts,
  main .iwwit-related-posts {
    width: calc(100% - 30px) !important;
    max-width: none !important;
  }
}


/* =========================================================
   BOX-SIZING
   ========================================================= */

.iwwit-related-posts,
.iwwit-related-posts *,
.iwwit-related-posts *::before,
.iwwit-related-posts *::after {
  box-sizing: border-box;
}


/* =========================================================
   DARKMODE
   ========================================================= */

body.pcdark-mode .iwwit-related-posts,
html.pcdark-mode body .iwwit-related-posts {
  --card-bg: #1c1c1e;

  --primary-color: #ffffff;
  --accent-color: #78a9c8;

  --text-main: #e1e1e1;
  --text-muted: #a1a1a6;

  --border-color: #333333;

  --badge-bg: #78a9c8;
  --badge-text: #ffffff;

  --card-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22);

  --card-shadow-hover:
    0 12px 30px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   INTRO
   ========================================================= */

.iwwit-related-posts__intro {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 24px;

  width: 100%;

  margin:
    0 0 18px 0 !important;

  padding:
    0 !important;
}


.iwwit-related-posts__intro-text {
  width: 100%;

  max-width: 820px;
}


.iwwit-related-posts__title {
  margin:
    0 0 8px 0 !important;

  padding:
    0 !important;

  color:
    var(--primary-color) !important;

  font-family:
    inherit !important;

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.75rem
    ) !important;

  line-height:
    1.1 !important;

  font-weight:
    600 !important;

  letter-spacing:
    -0.015em;
}


.iwwit-related-posts__description {
  margin:
    0 !important;

  padding:
    0 !important;

  max-width:
    820px;

  color:
    var(--text-muted) !important;

  font-family:
    inherit !important;

  font-size:
    clamp(
      0.98rem,
      1.2vw,
      1.08rem
    ) !important;

  line-height:
    1.5 !important;

  font-weight:
    400 !important;
}


/* =========================================================
   ALLE ANSEHEN
   ========================================================= */

.iwwit-related-posts__all-link {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  flex: 0 0 auto;

  margin-top:
    5px;

  color:
    var(--accent-color);

  font-size:
    0.92rem;

  font-weight:
    600;

  line-height:
    1;

  text-decoration:
    none;

  white-space:
    nowrap;
}


.iwwit-related-posts__all-link:hover {
  text-decoration:
    underline;

  text-underline-offset:
    0.18em;
}


/* =========================================================
   GRID
   ========================================================= */

.iwwit-related-posts__grid {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    ) !important;

  gap:
    14px 16px !important;

  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* =========================================================
   ARTICLE WRAPPER
   ========================================================= */

.iwwit-related-posts__card {
  display:
    block;

  width:
    100%;

  min-width:
    0;

  margin:
    0 !important;

  padding:
    0 !important;
}


/* =========================================================
   KARTE
   ========================================================= */

.iwwit-related-posts__card-link {
  position:
    relative;

  display:
    grid !important;

  /*
   * Bild | Text | Pfeil
   */
  grid-template-columns:
    84px minmax(0, 1fr) 18px !important;

  align-items:
    center !important;

  column-gap:
    8px;

  width:
    100% !important;

  min-width:
    0;

  /*
   * Bild = 84px
   * oben 12px
   * unten 12px
   * Gesamthöhe = 108px
   */
  height:
    108px !important;

  min-height:
    108px !important;

  max-height:
    108px !important;

  margin:
    0 !important;

  padding:
    12px !important;

  overflow:
    hidden;

  border:
    1px solid var(--border-color) !important;

  border-radius:
    16px !important;

  background:
    var(--card-bg) !important;

  color:
    inherit !important;

  text-decoration:
    none !important;

  box-shadow:
    var(--card-shadow);

  transform:
    translateY(0);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}


.iwwit-related-posts__card-link:hover {
  transform:
    translateY(-2px);

  box-shadow:
    var(--card-shadow-hover);

  border-color:
    #a9c7da !important;
}


/* =========================================================
   BILD
   ========================================================= */

.iwwit-related-posts__media {
  display:
    block !important;

  width:
    84px !important;

  height:
    84px !important;

  min-width:
    84px !important;

  min-height:
    84px !important;

  max-width:
    84px !important;

  max-height:
    84px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden;

  border-radius:
    12px !important;

  background:
    #edf1f3;
}


.iwwit-related-posts__image-bg,
.iwwit-related-posts__placeholder {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;
}


.iwwit-related-posts__image-bg {
  background-size:
    cover !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;

  transform:
    scale(1);

  transition:
    transform 0.35s ease;
}


.iwwit-related-posts__card-link:hover
.iwwit-related-posts__image-bg {
  transform:
    scale(1.07);
}


.iwwit-related-posts__placeholder {
  background:
    linear-gradient(
      135deg,
      #eef3f5,
      #dfe8ec
    );
}


/* =========================================================
   TEXTBEREICH
   WICHTIG:
   exakt so hoch wie das Bild
   ========================================================= */

.iwwit-related-posts__content {
  display:
    flex !important;

  flex-direction:
    column;

  /*
   * Badge ganz oben,
   * Titel ganz unten.
   */
justify-content: flex-start !important;
  align-items:
    flex-start;

  align-self:
    center;

  /*
   * EXAKT gleiche Höhe wie Bild
   */
  height:
    84px !important;

  min-height:
    84px !important;

  max-height:
    84px !important;

  min-width:
    0;

  width:
    100%;

  margin:
    0 !important;

  padding:
    0 0 0 12px !important;

  gap:
    6px !important;

  overflow:
    hidden;
}


/* =========================================================
   BADGES
   Oberkante = Oberkante Bild
   ========================================================= */

.iwwit-related-posts__badges {
  display:
    flex;

  flex-wrap:
    nowrap;

  align-items:
    flex-start;

  gap:
    6px;

  width:
    100%;

  min-height:
    24px;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden;
}


.iwwit-related-posts__badge {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    auto;

  max-width:
    130px;

  min-height:
    24px;

  height:
    24px;

  margin:
    0 !important;

  padding:
    4px 12px !important;

  border:
    0;

  border-radius:
    999px;

  background:
    var(--badge-bg);

  color:
    var(--badge-text);

  font-family:
    inherit;

  font-size:
    0.82rem !important;

  line-height:
    1 !important;

  font-weight:
    500 !important;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


/* =========================================================
   TITEL
   Unterkante = Unterkante Bild
   ========================================================= */

.iwwit-related-posts__card-title {
  display:
    -webkit-box !important;

  width:
    100%;

  max-width:
    100%;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  color:
    var(--primary-color) !important;

  font-family:
    inherit !important;

  font-size:
    1.06rem !important;

  line-height:
    1.16 !important;

  font-weight:
    400 !important;

  letter-spacing:
    0 !important;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;
}


/* =========================================================
   PFEIL
   ========================================================= */

.iwwit-related-posts__arrow {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  align-self:
    center;

  width:
    18px;

  height:
    84px;

  margin:
    0;

  color:
    var(--accent-color);

  font-size:
    1.45rem;

  line-height:
    1;

  opacity:
    0.78;

  transform:
    translateX(0);

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}


.iwwit-related-posts__card-link:hover
.iwwit-related-posts__arrow {
  transform:
    translateX(2px);

  opacity:
    1;
}


/* =========================================================
   BERATUNGSBOX
   ========================================================= */

.iwwit-related-posts__support {
  width:
    100%;

  margin:
    32px 0 0 0 !important;

  padding:
    22px 24px !important;

  border:
    1px solid var(--border-color);

  border-radius:
    18px;

  background:
    var(--card-bg);

  box-shadow:
    var(--card-shadow);
}


.iwwit-related-posts__support-title {
  margin:
    0 0 10px 0 !important;

  padding:
    0 !important;

  color:
    var(--primary-color) !important;

  font-family:
    inherit !important;

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.75rem
    ) !important;

  line-height:
    1.1 !important;

  font-weight:
    600 !important;
}


.iwwit-related-posts__support-text {
  max-width:
    820px;

  color:
    var(--text-muted);

  font-family:
    inherit;

  font-size:
    clamp(
      0.98rem,
      1.2vw,
      1.08rem
    );

  line-height:
    1.55;
}


.iwwit-related-posts__support-text p {
  margin:
    0 0 0.7em 0 !important;
}


.iwwit-related-posts__support-text ul {
  margin:
    0.75em 0 0 1.1em !important;

  padding:
    0 !important;
}


.iwwit-related-posts__support-text li {
  margin:
    0 0 0.35em 0 !important;

  padding:
    0 !important;
}


/* =========================================================
   LEERER BLOCK
   ========================================================= */

.iwwit-related-posts--empty {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  padding:
    14px 16px;

  border:
    1px dashed var(--border-color);

  border-radius:
    14px;

  color:
    var(--text-muted);

  background:
    var(--card-bg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .iwwit-related-posts__grid {
    gap:
      12px !important;
  }


  .iwwit-related-posts__card-link {
    grid-template-columns:
      76px minmax(0, 1fr) 16px !important;

    column-gap:
      14px;

    /*
     * 76px Bild
     * + 12px oben
     * + 12px unten
     */
    height:
      100px !important;

    min-height:
      100px !important;

    max-height:
      100px !important;

    padding:
      12px !important;
  }


  .iwwit-related-posts__media {
    width:
      76px !important;

    height:
      76px !important;

    min-width:
      76px !important;

    min-height:
      76px !important;

    max-width:
      76px !important;

    max-height:
      76px !important;

    border-radius:
      10px !important;
  }


  .iwwit-related-posts__content {
    height:
      76px !important;

    min-height:
      76px !important;

    max-height:
      76px !important;

    padding-left:
      10px !important;
  }


  .iwwit-related-posts__arrow {
    height:
      76px;
  }


  .iwwit-related-posts__card-title {
    font-size:
      1rem !important;

    line-height:
      1.16 !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .iwwit-related-posts__intro {
    display:
      block;

    margin-bottom:
      16px !important;
  }


  .iwwit-related-posts__all-link {
    margin-top:
      12px;
  }


  .iwwit-related-posts__grid {
    grid-template-columns:
      1fr !important;

    gap:
      10px !important;
  }


  .iwwit-related-posts__card-link {
    grid-template-columns:
      72px minmax(0, 1fr) 15px !important;

    column-gap:
      12px;

    /*
     * 72px Bild
     * + 10px oben
     * + 10px unten
     */
    height:
      92px !important;

    min-height:
      92px !important;

    max-height:
      92px !important;

    padding:
      10px !important;

    border-radius:
      14px !important;
  }


  .iwwit-related-posts__media {
    width:
      72px !important;

    height:
      72px !important;

    min-width:
      72px !important;

    min-height:
      72px !important;

    max-width:
      72px !important;

    max-height:
      72px !important;

    border-radius:
      10px !important;
  }


  .iwwit-related-posts__content {
    height:
      72px !important;

    min-height:
      72px !important;

    max-height:
      72px !important;

    padding-left:
      8px !important;
  }


  .iwwit-related-posts__badge {
    height:
      22px;

    min-height:
      22px;

    max-width:
      120px;

    padding:
      4px 10px !important;

    font-size:
      0.76rem !important;
  }


  .iwwit-related-posts__card-title {
    font-size:
      0.98rem !important;

    line-height:
      1.14 !important;
  }


  .iwwit-related-posts__arrow {
    width:
      15px;

    height:
      72px;

    font-size:
      1.25rem;
  }


  .iwwit-related-posts__support {
    margin-top:
      26px !important;

    padding:
      18px !important;

    border-radius:
      16px;
  }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 380px) {

  .iwwit-related-posts__card-link {
    grid-template-columns:
      66px minmax(0, 1fr) 14px !important;

    column-gap:
      10px;

    height:
      86px !important;

    min-height:
      86px !important;

    max-height:
      86px !important;

    padding:
      10px !important;
  }


  .iwwit-related-posts__media {
    width:
      66px !important;

    height:
      66px !important;

    min-width:
      66px !important;

    min-height:
      66px !important;

    max-width:
      66px !important;

    max-height:
      66px !important;
  }


  .iwwit-related-posts__content {
    height:
      66px !important;

    min-height:
      66px !important;

    max-height:
      66px !important;

    padding-left:
      6px !important;
  }


  .iwwit-related-posts__arrow {
    height:
      66px;
  }


  .iwwit-related-posts__badge {
    max-width:
      105px;

    font-size:
      0.72rem !important;
  }


  .iwwit-related-posts__card-title {
    font-size:
      0.92rem !important;
  }

}

.iwwit-article-content h3.iwwit-related-posts__card-title {
  margin: 0 !important;
}





/* =========================================================
   IWWIT RELATED POSTS – CONTENT-BREITE
   Desktop max. 1200px
   Tablet 24px Seitenabstand
   Mobile 15px Seitenabstand
   ========================================================= */

.iwwit-related-posts {
  width: calc(100% - 48px) !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* TABLET */
@media (max-width: 900px) {

  .iwwit-related-posts {
    width: calc(100% - 48px) !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}


/* MOBILE */
@media (max-width: 700px) {

  .iwwit-related-posts {
    width: calc(100% - 30px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

}