/* Optionaler Platz für kleine theme-spezifische Overrides. */

/* Blog-Artikel-Illustrationen (Contao news_full.html5 -> image.html5,
   .image_container) -- Finding 14.08.2026: ohne diese Regel rendert das
   News-Cover-Bild volle Breite VOR dem Text, man musste erst scrollen, um
   an den Artikeltext zu kommen. Fliesst jetzt rechts neben den Text ein,
   analog zu den zweiten (im Fliesstext eingebetteten) Bildern, die per
   ".wpc-inline-image"-Klasse links fliessen -- Wechsel der Seite sorgt
   fuer Abwechslung, statt dass beide Bilder auf derselben Seite haengen. */
.post-body .image_container,
.ce_text .image_container {
  float: right;
  max-width: 42%;
  margin: 0 0 1.25rem 1.75rem;
}

/* wpc-inline-image ist die cssID-Klasse auf dem AEUSSEREN Content-Element-
   Wrapper-Div (siehe PublishArticleCommand.php, $ceImg->cssID) -- die
   eigentliche Bild-Figure (.image_container) liegt DARIN verschachtelt,
   deshalb Nachfahren-Selektor statt der Klasse direkt. */
.post-body .wpc-inline-image .image_container {
  float: left;
  max-width: 42%;
  margin: .25rem 1.75rem 1.25rem 0;
  border-radius: 8px;
}

@media (max-width: 720px) {
  .post-body .image_container,
  .ce_text .image_container,
  .post-body .wpc-inline-image .image_container {
    float: none;
    max-width: 100%;
    margin: 0 0 1.25rem;
  }
}

/* Inhaltsverzeichnis links neben dem Artikeltext (14.08.2026, Nutzerwunsch)
   -- news_full.html5 baut ".wa-toc" aus den <h2 id="..."> im Artikeltext.
   Sticky, damit es beim Lesen laengerer Artikel sichtbar bleibt; aktiver
   Eintrag wird per Scrollspy (script.js) markiert. */
.wa-article-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.wa-toc {
  /* .wa-header ist selbst "position: sticky; top: 0" mit ~90px Hoehe
     (style.css) -- ohne Versatz wandert die TOC-Ueberschrift darunter und
     wirkt beim Scrollen "verschwunden". */
  position: sticky;
  top: 106px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
.wa-toc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--wa-brand);
  font-size: .95rem;
}
.wa-toc-icon { color: var(--wa-accent); flex: none; }
.wa-toc ol {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--wa-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wa-toc a {
  display: block;
  color: var(--wa-ink-soft);
  font-size: .9rem;
  line-height: 1.35;
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -16px;
  padding-left: 14px;
}
.wa-toc a:hover { color: var(--wa-brand); }
.wa-toc a.is-active {
  color: var(--wa-accent);
  border-left-color: var(--wa-accent);
  font-weight: 600;
}

/* Versatz beim Anspringen einer Ueberschrift (TOC-Klick oder direkter
   #anker-Link) -- ohne das landet die Ueberschrift unter dem sticky
   .wa-header (siehe .wa-toc { top: 106px } oben, gleiche Ursache). */
.wa-article-content h2[id] {
  scroll-margin-top: 106px;
}

@media (max-width: 900px) {
  .wa-article-layout { grid-template-columns: 1fr; }
  .wa-toc {
    position: static;
    order: -1;
    background: var(--wa-surface);
    border: 1px solid var(--wa-line);
    border-radius: var(--wa-radius);
    padding: 16px 18px;
    margin-bottom: 8px;
  }
  .wa-toc ol { max-height: 260px; overflow-y: auto; }
}

/* Blog-Uebersicht als Kartenraster (14.08.2026, Nutzerwunsch, Vorbild
   IONOS Digital Guide) -- nutzt .wa-card/.wa-card-image aus style.css als
   Basis (gleiche Optik wie die Themenkarten auf der Startseite), ergaenzt
   um Tags/Meta/"Mehr lesen" fuer den Blog-Anwendungsfall. */
.wa-blog-card {
  display: flex;
  flex-direction: column;
}
.wa-blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.wa-blog-tag {
  background: var(--wa-accent-soft);
  color: var(--wa-brand-2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .75rem;
  font-weight: 600;
}
.wa-blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
}
.wa-blog-card-meta {
  color: var(--wa-muted);
  font-size: .8rem;
}
.wa-blog-card-more {
  color: var(--wa-brand-2);
  font-weight: 600;
  font-size: .9rem;
  white-space: nowrap;
  text-decoration: none;
}
.wa-blog-card-more:hover { color: var(--wa-brand); }