/**************************************************
 * News Detail v2 – Clean CSS
 * Scope: .news-detail--v2
 **************************************************/

:root{
  --news-accent: #b22222;
  --news-bg-dark: #0f0f0f;

  --news-card-radius: 14px;
  --news-card-shadow: 0 10px 28px rgba(0,0,0,.10);

  /* Hero height */
  --news-hero-min: 460px;
  --news-hero-vh: 72vh;
  --news-hero-max: 880px;

  /* Hero overlay padding */
  --hero-pad-top: 2rem;
  --hero-pad-bottom: 2.5rem;

  /* Carousel blur */
  --carousel-blur: 18px;
}

/* -----------------------------------------------
   HERO
------------------------------------------------ */
.news-detail--v2 .news-detail-hero{
  position: relative;
  overflow: hidden;
}

.news-detail--v2 .news-detail-hero-img{
  width: 100%;
  display: block;
  height: clamp(var(--news-hero-min), var(--news-hero-vh), var(--news-hero-max));
  object-fit: cover;
  object-position: 50% 22%;
}

.news-detail--v2 .news-detail-hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--hero-pad-top) 0 var(--hero-pad-bottom);

  /* Schleier: startet ab Mitte und wird nach unten dunkler */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 50%,
    rgba(0,0,0,.25) 62%,
    rgba(0,0,0,.70) 85%,
    rgba(0,0,0,.92) 100%
  );
}

.news-detail--v2 .news-detail-hero-content{
  color: #fff;
  max-width: 58rem;
}

.news-detail--v2 .news-detail-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: .95rem;
  opacity: .95;
  margin-bottom: .6rem;
}

.news-detail--v2 .news-detail-sep{ opacity: .6; }

.news-detail--v2 .news-detail-badge{
  background: var(--news-accent) !important;
}

.news-detail--v2 .news-detail-title{
  margin: 0 0 .75rem;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.news-detail--v2 .news-detail-lead{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: .95;
  max-width: 52rem;
}

/* Hero Bild-Caption (Titel/Credit) */
.news-detail--v2 .news-detail-hero-media-caption{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  max-width: min(42rem, 92vw);
  padding: .55rem .75rem;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.92);
  font-size: .92rem;
  line-height: 1.35;
}

.news-detail--v2 .news-detail-hero-media-caption-title{
  display: block;
  font-weight: 800;
  margin-bottom: .15rem;
}

.news-detail--v2 .news-detail-hero-media-caption-text{
  display: block;
  opacity: .88;
}

/* -----------------------------------------------
   BODY / CONTENT
------------------------------------------------ */
.news-detail--v2 .news-detail-body{
  padding-top: 1.75rem;
}

.news-detail--v2 .news-detail-content{
  font-size: 1.02rem;
  line-height: 1.75;
}

/* -----------------------------------------------
   CARDS / SIDEBAR BOXES
------------------------------------------------ */
.news-detail--v2 .news-detail-card{
  border: 0;
  border-radius: var(--news-card-radius);
  overflow: hidden;
  box-shadow: var(--news-card-shadow);
}

/* Sidebar/Related Box Look */
.news-detail--v2 .news-related.news-related-news{
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--news-card-shadow);
  padding: 1rem;
}

.news-detail--v2 .news-related h4{
  margin: 0 0 .85rem !important;
  font-weight: 800;
  font-size: 1.05rem;
  color: #111;
  letter-spacing: 0 !important;
  text-align: left !important;
}

/* -----------------------------------------------
   CAROUSEL (Mixed aspect, FULL image visible, NO spring)
   Markup:
   <div class="ratio ratio-16x9 news-carousel-ratio">
     <div class="news-carousel-frame">
       <img class="news-carousel-bg">
       <img class="news-carousel-fg">
       <div class="news-carousel-caption">...</div>
     </div>
   </div>
------------------------------------------------ */

.news-detail--v2 .news-detail-carousel{
  border-radius: var(--news-card-radius);
  overflow: hidden;
}

.news-detail--v2 .news-detail-carousel .carousel-inner{
  background: var(--news-bg-dark);
  position: relative;
  z-index: 1;
}

.news-detail--v2 .news-carousel-ratio{
  background: var(--news-bg-dark);
  overflow: hidden;
  border-radius: var(--news-card-radius);
}

/* Bootstrap .ratio setzt: .ratio > * { position:absolute; inset:0; }
   -> Frame MUSS absolut sein, sonst springt/verschiebt sich alles */
.news-detail--v2 .news-carousel-ratio > .news-carousel-frame{
  position: absolute !important;
  inset: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  background: var(--news-bg-dark);
}

/* Blur background fills whole frame */
.news-detail--v2 .news-carousel-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: blur(var(--carousel-blur)) saturate(1.08) brightness(0.72);
  opacity: 1;
  pointer-events: none;
}

/* Cinematic overlay */
.news-detail--v2 .news-carousel-ratio > .news-carousel-frame::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 55%,
    rgba(0,0,0,.55) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Foreground: IMMER komplett sichtbar (Letterbox durch BG) */
.news-detail--v2 .news-carousel-fg{
  position: relative;
  z-index: 2;
  display: block;

  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
}

/* Caption im Carousel (unten) */
.news-detail--v2 .news-carousel-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;

  padding: .85rem 3.25rem .95rem 1rem; /* rechts Platz für + */
  color: #fff;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,0) 100%
  );
}

.news-detail--v2 .news-carousel-caption-title{
  font-weight: 750;
  font-size: 1rem;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.news-detail--v2 .news-carousel-caption-text{
  margin-top: .25rem;
  font-size: .92rem;
  line-height: 1.35;
  opacity: .92;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Controls/Indicators */
.news-detail--v2 .news-detail-carousel .carousel-control-prev,
.news-detail--v2 .news-detail-carousel .carousel-control-next{
  width: 3.25rem;
  z-index: 20; /* immer über Bild */
}

.news-detail--v2 .news-detail-carousel .carousel-control-prev-icon,
.news-detail--v2 .news-detail-carousel .carousel-control-next-icon{
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background-color: rgba(0,0,0,.45);
  background-size: 1.1rem 1.1rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.news-detail--v2 .news-detail-carousel .carousel-indicators{
  margin-bottom: .75rem;
}

.news-detail--v2 .news-detail-carousel .carousel-indicators [data-bs-target]{
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  opacity: 1;
  border: 0;
  background: rgba(255,255,255,.40);
}

.news-detail--v2 .news-detail-carousel .carousel-indicators .active{
  background: rgba(255,255,255,.88);
}

/* Plus-Icon-Hint */
.news-detail--v2 .news-lightbox-trigger{ position: relative; z-index: 1; }

.news-detail--v2 .news-lightbox-hint{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 5;
}

/* -----------------------------------------------
   SIDE-IMAGE: quadratisch + sauber
------------------------------------------------ */
.news-detail--v2 .news-detail-sideimage-thumb{
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

.news-detail--v2 .news-detail-sideimage-img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* Thumb darf croppen – Full kommt in Lightbox */
  display: block;
}

.news-detail--v2 .news-detail-sideimage-caption{
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(0,0,0,.75);
}

.news-detail--v2 .news-detail-sideimage-title{
  font-weight: 750;
  color: rgba(0,0,0,.88);
}

.news-detail--v2 .news-detail-sideimage-text{
  margin-top: .2rem;
  opacity: .9;
}

/* -----------------------------------------------
   LIGHTBOX (Bootstrap Modal)
   ACHTUNG: Modal hängt meist außerhalb .news-detail--v2 (Body)
------------------------------------------------ */
.news-lightbox-dialog{
  width: 80vw;
  max-width: 80vw;
  margin: 0 auto;
}

.news-lightbox-modal{
  height: 80vh;
  max-height: 80vh;
  background: var(--news-bg-dark);
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  display: block;
}

.news-lightbox-body{
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 80vh;
  background: var(--news-bg-dark);
  display: grid;
  place-items: center;
  padding: .5rem;
}

.news-lightbox-img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.news-lightbox-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .9rem 1rem 1rem;
  color: rgba(255,255,255,.92);
  background: linear-gradient(
    to top,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,0) 100%
  );
}

.news-lightbox-title{
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: .25rem;
  color: rgba(255,255,255,.92);
}

.news-lightbox-text{
  font-size: .95rem;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-lightbox-close{
  position: absolute;
  right: .75rem;
  top: .75rem;
  z-index: 10;
  filter: invert(1);
}

/* -----------------------------------------------
   Kaderathleten (HTML ist fix, daher Overrides)
   Ziel: Grid statt Floats + Portrait Cards in Sidebar
------------------------------------------------ */
.news-detail--v2 #news-related-athletes{
  margin-top: 1rem;
}

/* Wrapper als Card */
.news-detail--v2 #news-related-athletes .personen-bios{
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--news-card-shadow);
  padding: 1rem;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* default */
  gap: .55rem;
  align-items: start;
}

/* Heading über volle Breite, konsistent zu "Verwandte Nachrichten" */
.news-detail--v2 #news-related-athletes .personen-bios > h4{
  grid-column: 1 / -1;
  margin: 0 0 .6rem !important;
  font-weight: 800;
  font-size: 1.05rem;
  color: #111;
  text-align: left !important;
}

/* Clearfix-DIV ausblenden */
.news-detail--v2 #news-related-athletes .personen-bios > div[style*="clear:both"]{
  display: none !important;
}

/* Desktop: 5 nebeneinander (Sidebar) */
@media (min-width: 992px){
  .news-detail--v2 #news-related-athletes .personen-bios{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .45rem;
  }
}

/* Items: Float kill + Card */
.news-detail--v2 #news-related-athletes .person-athlet{
  float: none !important;
  margin: 0 !important;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/* Portrait-Bildbox (3:4) – keine schwarzen Blitzer */
.news-detail--v2 #news-related-athletes .dfbperson-image{
  height: auto !important;             /* überschreibt inline height:100px */
  aspect-ratio: 3 / 4;                 /* Portrait */
  width: 100%;
  overflow: hidden !important;
  background: #f3f4f6 !important;
}

.news-detail--v2 #news-related-athletes .dfbperson-image a{
  display: block;
  width: 100%;
  height: 100%;
}

.news-detail--v2 #news-related-athletes .dfbperson-image img{
  width: 100%;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: 50% 20%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Names: kompakt + weniger "fett" */
.news-detail--v2 #news-related-athletes .dfbperson-name{
  padding: .35rem .35rem .45rem;
  text-align: center;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}

.news-detail--v2 #news-related-athletes .dfbperson-name .vorname,
.news-detail--v2 #news-related-athletes .dfbperson-name .name{
  display: block;
}

.news-detail--v2 #news-related-athletes .dfbperson-name .vorname{
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.1;
  color: rgba(17,17,17,.70);
}

.news-detail--v2 #news-related-athletes .dfbperson-name .name{
  margin-top: .08rem;
  font-size: .72rem;
  font-weight: 650;
  line-height: 1.15;
  color: #111;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -----------------------------------------------
   RESPONSIVE
------------------------------------------------ */
@media (max-width: 991.98px){
  .news-detail--v2 .news-detail-hero-img{
    height: 82vh;
    max-height: 900px;
    object-position: 50% 18%;
  }

  .news-detail--v2 .news-detail-hero-overlay{
    padding: 1.25rem 0 1.75rem;
  }
}

@media (max-width: 767.98px){
  .news-detail--v2 .news-detail-hero-overlay{
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 55%,
      rgba(0,0,0,.28) 66%,
      rgba(0,0,0,.76) 86%,
      rgba(0,0,0,.94) 100%
    );

    /* Mobile: genug Platz, damit die Hero-Bildcaption nicht über den Text liegt */
    padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
  }

  .news-detail--v2 .news-detail-hero-media-caption{
    left: .75rem;
    right: .75rem;
    bottom: calc(.75rem + env(safe-area-inset-bottom));
    max-width: none;
    font-size: .88rem;
  }

  .news-detail--v2 .news-detail-title{
    font-size: clamp(1.45rem, 5.2vw, 2.1rem);
  }

  .news-detail--v2 .news-detail-lead{
    font-size: 1rem;
  }

  /* Mobile: etwas mehr Höhe für Hochkant, ohne Layout-Sprung */
  .news-detail--v2 .news-carousel-ratio{
    --bs-aspect-ratio: 70%;
  }

  /* Athleten auf Mobile: 3 Spalten */
  .news-detail--v2 #news-related-athletes .personen-bios{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    padding: .9rem;
  }
}

@media (max-width: 575.98px){
  .news-detail--v2 .news-carousel-bg{
    filter: blur(14px) saturate(1.06) brightness(0.72);
  }
}

/* =========================================================
   SIDEBAR: Headings angleichen + linke Flucht fixen
   (ans ENDE der CSS-Datei)
========================================================= */

/* 1) h3 und h4 exakt gleich stylen (Verwandte + Athleten) */
.news-detail--v2 .news-related.news-related-news > h3,
.news-detail--v2 .news-related.news-related-news > h4,
.news-detail--v2 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .6rem !important;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.25;
  color: #111;
  text-align: left !important;
  letter-spacing: 0 !important;
}

/* 2) Box-Padding überall gleich */
.news-detail--v2 .news-related.news-related-news,
.news-detail--v2 #news-related-athletes .personen-bios{
  padding: 1rem;
}

/* 3) "Verwandte Nachrichten": Extra Padding links entfernen
      (Box hat schon padding:1rem -> list-group-item darf nicht nochmal einrücken) */
.news-detail--v2 .news-related.news-related-news .list-group{
  margin: 0;
  padding: 0;
}

.news-detail--v2 .news-related.news-related-news .list-group-item{
  padding: .65rem 0;           /* <- vorher war links/rechts extra */
  border-left: 0;
  border-right: 0;
  background: transparent;
}

/* optional: Datum nicht umbrechen */
.news-detail--v2 .news-related.news-related-news .news-related-news-date{
  white-space: nowrap;
}

/* =========================================================
   SIDEBAR: "Verwandte Nachrichten" + "Kaderathleten"
   - Headings identisch (h3/h4)
   - gleiche linke Flucht (Padding)
   (GANZ ANS ENDE)
========================================================= */

/* Box-Padding für beide gleich */
.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news,
.news-detail--v2 #news-content > .row > .col-md-4 #news-related-athletes .personen-bios{
  padding: 1rem !important;
}

/* Überschrift: h3 (Related) soll wie h4 (Athleten) aussehen */
.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news h3,
.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news h4,
.news-detail--v2 #news-content > .row > .col-md-4 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .6rem !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  color: #111 !important;
}

/* Related: die Einrückung kommt fast immer von .list-group-item */
.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news .list-group{
  margin: 0 !important;
  padding: 0 !important;
}

.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news .list-group-item,
.news-detail--v2 #news-content > .row > .col-md-4 .news-related.news-related-news a.list-group-item{
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

/* =========================================================
   SIDEBAR: Related + Kaderathleten (Heading + Flucht)
   (GANZ ANS ENDE)
========================================================= */

/* 1) Container-Padding angleichen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body{
  padding: 1rem !important;
}

.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  padding: 1rem !important;
}

/* 2) Überschrift angleichen (h3 hat h6-Klasse -> überschreiben) */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .85rem !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  line-height: 1.25 !important;
  color: #111 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}

/* 3) Flucht der Inhalte: List-Items nicht weiter einrücken als die Headline */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group{
  margin: 0 !important;
  padding: 0 !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   SIDEBAR: Related News ohne "weißen Kasten" + Headings softer
   (GANZ ANS ENDE)
========================================================= */

/* Headings (Related h3 + Athleten h4) weniger fett */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  font-weight: 650 !important;      /* vorher 800 */
  font-size: 1.02rem !important;
  letter-spacing: 0 !important;
  color: #111 !important;
  margin: 0 0 .75rem !important;
}

/* Related News: Card-Look entfernen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 1rem !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body{
  background: transparent !important;
  padding: 0 !important;            /* kein "extra" left padding */
}

/* Related List: clean + fluchtet links */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group{
  background: transparent !important;
  border: 0 !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  padding: .65rem 0 !important;     /* links bündig */
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item:first-child{
  border-top: 0 !important;
}

/* optional: Related Titel etwas ruhiger */
.news-detail--v2 .news-detail-related-title{
  color: #b22222;
  font-weight: 500;
}

/* =========================================================
   SIDEBAR PANELS (Related + Athletes) – unified soft cards
   (GANZ ANS ENDE)
========================================================= */

:root{
  --news-panel-bg: #fff;
  --news-panel-border: rgba(0,0,0,.07);
  --news-panel-shadow: 0 10px 26px rgba(0,0,0,.08);
  --news-panel-radius: 16px;
}

/* 1) Beide Boxen bekommen denselben Panel-Look */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  background: var(--news-panel-bg) !important;
  border: 1px solid var(--news-panel-border) !important;
  border-radius: var(--news-panel-radius) !important;
  box-shadow: var(--news-panel-shadow) !important;
}

/* Related: Card-body Padding definieren (damit gleiche Flucht) */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body{
  padding: 1rem 1rem 1.05rem !important;
}

/* Athletes: Padding + Grid-Gap sauber */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  padding: 1rem 1rem 1.05rem !important;
  gap: .55rem !important;
}

/* 2) Überschriften: H3 & H4 gleich, weniger fett + kleiner Accent */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .85rem !important;
  font-weight: 650 !important;              /* weniger “wuchtig” */
  font-size: 1.02rem !important;
  line-height: 1.2 !important;
  color: #111 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  position: relative;
  padding-left: .8rem;                      /* Flucht + Platz für Accent */
}

/* Accent-Bar links */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::before,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::before{
  content: "";
  position: absolute;
  left: 0;
  top: .15rem;
  width: .22rem;
  height: 1.05rem;
  border-radius: 99px;
  background: var(--news-accent);
}

/* 3) Related-Liste: clean inside panel + gleiche linke Kante */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group{
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  padding: .7rem 0 !important;            /* links bündig im Panel */
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item:first-child{
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Related Titel etwas ruhiger (nicht “schreiend”) */
.news-detail--v2 .news-detail-related-title{
  font-weight: 500 !important;
  color: rgba(178,34,34,.95);
}

/* 4) Athleten: Panel-Grundlayout bleibt Grid (5 Spalten auf Desktop) */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Desktop: 5 nebeneinander */
@media (min-width: 992px){
  .news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem !important;
  }
}

/* Athleten Cards minimal softer (nicht zu “fett”) */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .person-athlet{
  box-shadow: 0 6px 16px rgba(0,0,0,.07) !important;
  border-radius: 12px !important;
}

/* Bilder Portrait (3:4) + keine schwarzen Blitzer */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .dfbperson-image{
  height: auto !important;
  aspect-ratio: 3 / 4;
  background: #f3f4f6 !important;
  overflow: hidden !important;
}

/* Name: kompakter & weniger fett */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .dfbperson-name .name{
  font-weight: 650 !important; /* statt 800 */
  letter-spacing: 0 !important;
}

/* Clearfix-DIV aus JS/HTML ausblenden */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > div[style*="clear:both"]{
  display: none !important;
}

/* ================================
   Sidebar-Headings: kein Left-Bar,
   stattdessen roter Punkt rechts
================================== */

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  padding-left: 0 !important;          /* vorher Platz für Bar */
  padding-right: 1.1rem !important;    /* Platz für Punkt rechts */
  position: relative;
}

/* Left-Bar AUS */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::before,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::before{
  content: none !important;
}

/* Roter Punkt rechts EIN */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::after,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::after{
  content: "";
  position: absolute;
  right: 0;
  top: .55em;                          /* sitzt optisch mittig zur ersten Zeile */
  transform: translateY(-50%);
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: var(--news-accent);
}

/* =========================================================
   Sidebar Headings: roter Punkt rechts (stabil, immer rund)
========================================================= */

/* Beide Überschriften gleich behandeln */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  /* volle Breite erzwingen + Punkt rechts “in der Flucht” */
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  gap: .75rem;
  margin: 0 0 .85rem !important;

  /* optional: weniger fett */
  font-weight: 650;
}

/* ggf. alten Left-Bar/Accent komplett killen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::before,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::before{
  content: none !important;
}

/* Punkt rechts */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::after,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::after{
  content: "";
  flex: 0 0 auto;

  width: .5rem;
  height: .5rem;
  aspect-ratio: 1 / 1;        /* extra safety */
  border-radius: 999px;

  background: var(--news-accent);
}

/* =========================================================
   Sidebar Headings: roter Punkt exakt in rechter Box-Flucht
========================================================= */

/* 1) Offset-Variable je Box setzen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card{
  /* Card-Body nutzt Bootstrap CSS-Var: --bs-card-spacer-x (meist 1rem) */
  --news-dot-offset: calc(-1 * var(--bs-card-spacer-x, 1rem) + .35rem);
}

.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  /* unsere eigene Box hat padding: 1rem */
  --news-dot-offset: calc(-1 * 1rem + .35rem);
}

/* 2) Headings als volle Breite Flex-Zeile */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  width: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;

  gap: .75rem;
  margin: 0 0 .85rem !important;

  font-weight: 600;          /* weniger fett */
  padding-right: 0 !important;
}

/* 3) Falls irgendwo eine linke Deko war: killen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::before,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::before{
  content: none !important;
}

/* 4) Punkt rechts + in die Box-Flucht schieben */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::after,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::after{
  content: "";
  flex: 0 0 auto;
  display: inline-block;

  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--news-accent);

  /* der Trick: Punkt nach rechts Richtung Box-Kante schieben */
  margin-left: auto;
  margin-right: var(--news-dot-offset, 0);
}

/* =========================================================
   Sidebar Boxes: gleiche Flucht (Heading, Inhalt, Datum) + Punkt rechts
========================================================= */

/* 1) Related-News: ListGroup “entkernen” (kein Extra-Padding/kein weißer Kasten) */
.news-detail--v2 aside .news-detail-card .list-group{
  margin: 0 !important;
}

.news-detail--v2 aside .news-detail-card .list-group-item{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: .55rem;
  padding-bottom: .55rem;

  background: transparent !important;
  border: 0 !important;
}

.news-detail--v2 aside .news-detail-card .list-group-item + .list-group-item{
  border-top: 1px solid rgba(0,0,0,.07) !important; /* dezente Trennlinie */
}

/* 2) Headings: h3 und h4 gleich stylen */
.news-detail--v2 aside .news-detail-card > .card-body > h3,
.news-detail--v2 aside #news-related-athletes .personen-bios > h4{
  position: relative !important;
  display: block !important;

  margin: 0 0 .85rem !important;
  padding-right: 1.25rem !important; /* Platz für Punkt */

  font-weight: 600 !important;       /* weniger fett */
  font-size: 1rem !important;        /* h4 wie h3 */
  line-height: 1.25;
  color: #111;
}

/* 3) Roter Punkt: exakt in rechter Content-Flucht (gleich wie Datum!) */
.news-detail--v2 aside .news-detail-card > .card-body > h3::after,
.news-detail--v2 aside #news-related-athletes .personen-bios > h4::after{
  content: "";
  position: absolute;
  right: 0 !important;               /* <- DAS ist die Flucht */
  top: 50%;
  transform: translateY(-50%);

  width: .5rem;
  height: .5rem;
  border-radius: 999px;
  background: var(--news-accent);
}

/* 4) Falls irgendwo noch alte Deko links war */
.news-detail--v2 aside .news-detail-card > .card-body > h3::before,
.news-detail--v2 aside #news-related-athletes .personen-bios > h4::before{
  content: none !important;
}


/* =========================================================
   Sidebar: einheitliche Box-Titles + saubere Flucht (ohne Punkt)
   Scope: .news-detail--v2
========================================================= */

/* 1) Keine Deko-Punkte / Linien mehr (falls irgendwo noch drin) */
.news-detail--v2 aside h3::before,
.news-detail--v2 aside h3::after,
.news-detail--v2 aside h4::before,
.news-detail--v2 aside h4::after,
.news-detail--v2 aside h5::before,
.news-detail--v2 aside h5::after{
  content: none !important;
}

/* 2) Box-Padding angleichen (Related-Card & andere Cards) */
.news-detail--v2 aside .news-detail-card .card-body{
  padding: 1rem !important;
}

/* 3) Headings in Sidebar (Related + Side-Image + sonstige) */
.news-detail--v2 aside .news-detail-card .card-body > h3,
.news-detail--v2 aside .news-detail-card .card-body > h4,
.news-detail--v2 aside .news-detail-card .card-body > h5{
  margin: 0 0 .75rem !important;
  font-weight: 600 !important;     /* weniger fett */
  font-size: 1rem !important;
  line-height: 1.25 !important;
  color: #111 !important;
  letter-spacing: 0 !important;
}

/* 4) Kaderathleten-Heading (ist h4 im JS-HTML) exakt gleich */
.news-detail--v2 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  color: #111 !important;
  letter-spacing: 0 !important;
}

/* 5) Flucht fixen: Related-News List-Items ohne Extra-Einrückung */
.news-detail--v2 aside .news-detail-card .list-group{
  margin: 0 !important;
  padding: 0 !important;
}

.news-detail--v2 aside .news-detail-card .list-group-item{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: .55rem !important;
  padding-bottom: .55rem !important;

  background: transparent !important;
  border: 0 !important;
}

.news-detail--v2 aside .news-detail-card .list-group-item + .list-group-item{
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* 6) Falls das Side-Image nicht in einer .news-detail-card steckt,
      sondern in .news-related (alte Struktur): Überschrift ebenfalls angleichen */
.news-detail--v2 aside .news-related > h3,
.news-detail--v2 aside .news-related > h4{
  margin: 0 0 .75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  color: #111 !important;
}

/* -----------------------------------------------
   SIDE-IMAGE (Detail v2): Einzeiler-Layout
   - links: quadratisches Bild (~1/4)
   - rechts: Titel + Caption
------------------------------------------------ */
.news-detail--v2 .news-detail-sideimage{
  /* optional: falls du gleiche Panel-Optik wie andere Sidebar-Boxen willst,
     ansonsten weglassen (du nutzt aktuell .news-detail-card p-3) */
}

/* Überschrift im Side-Image (Info) wie die anderen Sidebar-Headlines */
.news-detail--v2 .news-detail-sideimage > h4{
  margin: 0 0 .75rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #111 !important;
}

/* Figure wird zur 2-Spalten-Zeile */
.news-detail--v2 .news-detail-sideimage-item{
  display: grid;
  grid-template-columns: clamp(96px, 25%, 140px) 1fr; /* ~1/4 */
  gap: .9rem;
  align-items: start;

  /* Bootstrap mb-3 bleibt ok (Spacing zwischen mehreren Bildern) */
}

/* Link/Thumb links – keine Zusatzränder */
.news-detail--v2 .news-detail-sideimage-item .news-lightbox-trigger{
  display: block;
  width: 100%;
}

/* Thumb bleibt quadratisch (hast du schon, wir sichern nur ab) */
.news-detail--v2 .news-detail-sideimage-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
}

/* Bild füllt Thumb sauber */
.news-detail--v2 .news-detail-sideimage-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 25%;
}

/* Figcaption rechts – mt-2 entfernen (sonst hängt es zu tief) */
.news-detail--v2 .news-detail-sideimage-item .news-detail-sideimage-caption{
  margin-top: 0 !important; /* überschreibt .mt-2 */
}

/* Titel + Text rechts */
.news-detail--v2 .news-detail-sideimage-title{
  margin: 0 0 .2rem;
  font-weight: 600;
  color: #111;
}

.news-detail--v2 .news-detail-sideimage-text{
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(0,0,0,.75);

  /* optional: nicht unendlich lang */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Plus-Hint sitzt sauber im Thumb */
.news-detail--v2 .news-detail-sideimage-thumb .news-lightbox-hint{
  right: .6rem;
  bottom: .6rem;
}

/* Mobile Feintuning */
@media (max-width: 575.98px){
  .news-detail--v2 .news-detail-sideimage-item{
    grid-template-columns: 104px 1fr;
    gap: .8rem;
  }

  .news-detail--v2 .news-detail-sideimage-text{
    -webkit-line-clamp: 5;
  }
}

/* =========================================================
   SIDEBAR PANELS – unified look (Related + Athletes + SideImage)
   Scope: .news-detail--v2
   -> am besten GANZ ans Ende der CSS-Datei
========================================================= */
:root{
  --news-panel-bg: #fff;
  --news-panel-border: rgba(0,0,0,.07);
  --news-panel-shadow: 0 10px 26px rgba(0,0,0,.08);
  --news-panel-radius: 16px;
  --news-panel-pad: 1rem;
  --news-panel-gap: .55rem;
}

/* 1) Alle Sidebar-Boxen bekommen denselben Panel-Look */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card,
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  background: var(--news-panel-bg) !important;
  border: 1px solid var(--news-panel-border) !important;
  border-radius: var(--news-panel-radius) !important;
  box-shadow: var(--news-panel-shadow) !important;
}

/* Related-News ist eine Bootstrap-Card -> Padding nur im Body */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card{
  overflow: hidden;
}

/* Card-Body-Padding angleichen */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body{
  padding: var(--news-panel-pad) !important;
}

/* Side-Image ist ein <aside class="news-detail-card p-3 ..."> ohne card-body
   -> wir setzen Panel-Padding direkt am Container (p-3 überschreiben) */
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage{
  padding: var(--news-panel-pad) !important;
}

/* Athletes Panel: Padding + Grid-Gap angleichen */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  padding: var(--news-panel-pad) !important;
  gap: var(--news-panel-gap) !important;
}

/* 2) Sidebar-Headings: einheitlich, weniger fett (kein Punkt/Bar) */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3,
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h4,
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage > h4,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4{
  margin: 0 0 .85rem !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: #111 !important;
  text-align: left !important;
}

/* zur Sicherheit: alte Deko aus */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::before,
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card > .card-body > h3::after,
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage > h4::before,
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage > h4::after,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::before,
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > h4::after{
  content: none !important;
}

/* 3) Related-News: List sauber, keine Extra-Einrückung, dezente Trenner */
.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item{
  padding: .65rem 0 !important; /* links bündig zum Heading */
  border: 0 !important;
  background: transparent !important;
}

.news-detail--v2 aside.col-lg-4 section.card.news-detail-card .list-group-item + .list-group-item{
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* Related Title ruhiger */
.news-detail--v2 .news-detail-related-title{
  font-weight: 500 !important;
  color: rgba(178,34,34,.95) !important;
}

/* 4) Side-Image: Figure-Abstände (falls mehrere Bilder) */
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage-item{
  margin: 0 0 .9rem;
}
.news-detail--v2 aside.col-lg-4 .news-detail-sideimage-item:last-child{
  margin-bottom: 0;
}

/* 5) Athletes: Panel bleibt Grid (5 Spalten Desktop), clear-div ausblenden */
.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 992px){
  .news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios{
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .5rem !important;
  }
}

.news-detail--v2 aside.col-lg-4 #news-related-athletes .personen-bios > div[style*="clear:both"]{
  display: none !important;
}

/* HERO ohne Bild: Header darf nicht kollabieren */
.news-detail--v2 .news-detail-hero--noimg{
  background: linear-gradient(135deg, #101010 0%, #1b1b1b 45%, #101010 100%);
}

/* Overlay bei noimg NICHT absolut, sonst 0px-Problem */
.news-detail--v2 .news-detail-hero-overlay--noimg{
  position: relative;
  inset: auto;
  background: none;
  padding: 3.25rem 0 2.25rem;
}

/* Falls eine Bild-Caption irgendwo noch existiert: aus */
.news-detail--v2 .news-detail-hero--noimg .news-detail-hero-media-caption{
  display: none !important;
}

/* Mobile: kein extra “Caption-Sicherheits-Padding” */
@media (max-width: 767.98px){
  .news-detail--v2 .news-detail-hero-overlay--noimg{
    padding-bottom: 1.75rem;
  }
}

/* =========================================================
   HERO – No-Image Variante (hell, modern, "Content-Header")
   Greift, wenn <header class="news-detail-hero news-detail-hero--noimg">
========================================================= */

.news-detail--v2 .news-detail-hero.news-detail-hero--noimg{
  /* heller Header-Block statt Bild */
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: visible; /* damit nichts "abgeschnitten" wirkt */
}

/* Overlay ist im No-Image Fall KEIN absoluter Schleier */
.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-hero-overlay,
.news-detail--v2 .news-detail-hero .news-detail-hero-overlay.news-detail-hero-overlay--noimg{
  position: relative !important;
  inset: auto !important;
  display: block;            /* kein flex-bottom nötig */
  background: none !important;

  /* typischer moderner Content-Header */
  padding: 2.25rem 0 1.35rem !important;
}

/* Textfarben: dunkel statt weiß */
.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-hero-content{
  color: #111;
}

.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-meta{
  color: rgba(17,17,17,.72);
  opacity: 1;
}

.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-sep{
  opacity: .45;
}

.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-title{
  color: #111 !important;
  text-shadow: none !important;
}

.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-lead{
  color: rgba(17,17,17,.78);
  opacity: 1;
}

/* Badge bleibt "accent", aber ohne Bootstrap-blau */
.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-badge{
  background: var(--news-accent) !important;
  color: #fff !important;
}

/* Falls irgendwo eine Hero-Bildcaption drin wäre: im No-Image ausblenden */
.news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-hero-media-caption{
  display: none !important;
}

/* Mobile: etwas kompakter */
@media (max-width: 767.98px){
  .news-detail--v2 .news-detail-hero.news-detail-hero--noimg .news-detail-hero-overlay,
  .news-detail--v2 .news-detail-hero .news-detail-hero-overlay.news-detail-hero-overlay--noimg{
    padding: 1.6rem 0 1.05rem !important;
  }
}