/* ========= Basis ========= */
body { background: #f8f9fa; }

header { 
  padding: 5px;
  margin: 0;
}

.text-justify {
  text-align: justify;
  hyphens: auto;
}

main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

figure figcaption {
  border: 0;           /* sicherstellen, dass keine Linie da ist */
  margin-top: 0.25rem; /* nur kleiner Abstand */
  font-size: 0.8rem;
  color: #6c757d;      /* Bootstrap-muted */
}

/* Mobil: Bild 100% Breite */
.step-img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Ab md: Bild wieder auf 480px begrenzen (wie vorher) */
@media (min-width: 768px) {
  .step-img {
    width: auto;
    max-width: 480px;
  }
}


.article-shell { 
  max-width: 100%; 
  margin-inline: auto; 
}

.article p { 
  line-height: 1.7; 
}

.article::after { 
  content: ""; 
  display: block; 
  clear: both; 
}

.article ul,
.article ol {
  padding: 1rem;
  margin: 0;
  list-style-position: outside;
  text-align: left;
}

/* Artikel-Bild */
.article-img {
  max-width: 300px; 
  height: auto;     
}

.article-img figcaption {
  margin-bottom: 0;
  line-height: 1.2;
}

/* Artikel-Figur */
.article-figure { 
  width: 100%; 
  margin: 0 0 1rem 0; 
}

/* Sonstiges */
.article-fixed {
  height: 300px;      /* feste Höhe */
  overflow: hidden;   /* Text abschneiden */
}

/* Für Browser mit :has-Support */
.article-shell a:has(> img)::before,
.article-shell a:has(> img)::after {
  content: none !important;
  background: none !important;
}


/* Nur für diesen Artikel */
.fullwidth-article img {
  width: 100% !important;   /* volle Containerbreite */
  height: auto;             /* Höhe proportional */
  display: block;           /* verhindert kleine Lücken */
}

.hr-1px { 
  border: 0; 
  border-top: 1px solid rgba(0,0,0,.15); 
  margin: 1.25rem 0; 
}

.byline { 
  font-size: .95rem; 
  color: #6c757d; 
}

.pullquote { 
  font-size: 1.1rem; 
  font-style: italic; 
  border-left: 3px solid #dee2e6; 
  padding-left: .75rem; 
}

.law-box { 
  border-left: 4px solid #dc3545; 
  background: #fff; 
}

.law-box h3 { 
  color: #dc3545; 
  font-size: 1.1rem; 
  margin-bottom: .25rem; 
}

/* ========= Media Queries ========= */

/* Ab md: Text im Artikel ausrichten */
@media (min-width: 768px) {
  .article p { 
    text-align: justify; 
    hyphens: auto; 
  }
  .article-figure {
    float: left;
    width: clamp(220px, 30%, 360px);
    margin: .25rem 1rem 1rem 0;
  }
}

@media (min-width: 992px) {
  .article-figure { width: clamp(240px, 28%, 380px); }
}

@media (min-width: 1200px) {
  .article-figure { width: clamp(260px, 26%, 400px); }
}

/* Mobile (xs) */
@media (max-width: 767.98px) {
  .article-img {
    float: none;
    display: block;
    max-width: 100%;
    margin: 0 auto 1rem auto; /* zentriert + Abstand unten */
  }
}

@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  .article { 
    padding-left: 2px !important; 
    padding-right: 2px !important; 
  }
  .article-figure { 
    width: 100%; 
    margin: 0 0 1rem 0; 
  }
}

/* Print */
@media print {
  body { background: #fff; }
  header { padding: 0; }
  .shadow-sm { box-shadow: none !important; }
  a[href]:after { content: ""; }
}

/* Feinjustierung: Überschriften im Artikel */
main.article-shell h2 { 
  margin-top: 0 !important; 
  line-height: 1.15; 
}

main.article-shell .article > header { 
  padding-top: 0 !important; 
  margin-top: 0 !important; 
}

main.article-shell > *:first-child h2:first-child { 
  margin-top: -6px !important; 
}

/* 1) Bilder ohne Baseline-Gap rendern */
.article img { display: block; }

/* 2) Keine Linie/Divider unter der Meta-Zeile */
.article header p.small,
.article header p.small.text-muted {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: .25rem !important;
}

/* 3) Falls irgendwo Borders auf Header/Absätze liegen: neutralisieren */
.article header p { border: 0 !important; }
.article header { border-bottom: 0 !important; }

/* 4) Float sauber beenden, damit nichts optisch „anklebt“ */
@media (min-width: 768px) {
  .article header::after { content: ""; display: block; clear: both; }
}