/* ===========================================================================
   heimwerken.at – Unterseiten und Beiträge
   Setzt basis.css voraus. Gilt überall außer auf der Startseite.
   ======================================================================== */

/* --------------------------------------------------------------------------
   1. Seitenkopf
   Titel und Einleitung sitzen auf getöntem Grund und heben sich damit vom
   Fließtext ab – ohne dass dafür ein Bild nötig wäre.
   ----------------------------------------------------------------------- */

.hw:not(.home) main.site-main{
  background:var(--papier);
}

/* Der Titel kommt aus einem Elementor-Widget. Dessen eigene Typografie stammt
   aus dem Global Kit; hier wird nur Größe und Abstand geführt. */
.hw:not(.home) .elementor-widget-theme-post-title{
  margin-bottom:.6rem;
}
.hw:not(.home) .elementor-widget-theme-post-title h1{
  font-size:clamp(2.1rem,4.4vw,3.4rem);
  text-wrap:balance;
  max-width:26ch;
}

/* --------------------------------------------------------------------------
   2. Fließtext
   Die Textspalte wird auf gut lesbare Zeilenlänge begrenzt. Bilder, Tabellen
   und eigene Kästen dürfen breiter laufen – deshalb sitzt die Begrenzung an
   den Textelementen und nicht am Container.
   ----------------------------------------------------------------------- */

.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > p,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > ul,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > ol,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > h2,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > h3,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > h4,
.hw:not(.home) .elementor-widget-theme-post-content > .elementor-widget-container > blockquote{
  max-width:72ch;
}

.hw:not(.home) .elementor-widget-theme-post-content{
  font-size:1.05rem;
  line-height:1.7;
}
.hw:not(.home) .elementor-widget-theme-post-content h2{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin:2.6rem 0 .9rem;
  text-wrap:balance;
}
.hw:not(.home) .elementor-widget-theme-post-content h3{
  font-size:clamp(1.2rem,1.8vw,1.45rem);
  margin:2rem 0 .7rem;
}
.hw:not(.home) .elementor-widget-theme-post-content p{margin:0 0 1.15rem}
.hw:not(.home) .elementor-widget-theme-post-content ul,
.hw:not(.home) .elementor-widget-theme-post-content ol{
  margin:0 0 1.4rem;
  padding-left:1.3rem;
}
.hw:not(.home) .elementor-widget-theme-post-content li{margin-bottom:.5rem}

/* Verweise im Text sollen als Verweise erkennbar sein, ohne zu schreien. */
.hw:not(.home) .elementor-widget-theme-post-content a{
  color:var(--akzent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.hw:not(.home) .elementor-widget-theme-post-content a:hover{
  text-decoration-thickness:2px;
}

/* Tabellen brechen sonst die Seite auf. */
.hw .elementor-widget-theme-post-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.6rem 0 2rem;
  font-size:.95rem;
}
.hw .elementor-widget-theme-post-content :is(th,td){
  border-bottom:1px solid var(--linie);
  padding:.7rem .9rem;
  text-align:left;
  vertical-align:top;
}
.hw .elementor-widget-theme-post-content th{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinte-3);
  font-weight:500;
}
/* Zahlenspalten untereinander ausrichten. */
.hw .elementor-widget-theme-post-content td{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   3. Beitragsbild
   Wird vom Kindtheme vor den Inhalt gesetzt, samt Bildnachweis.
   ----------------------------------------------------------------------- */

.hw .hw-postmedia,
.hw .hw-hubmedia{
  margin:0 0 2.2rem;
  max-width:none;
}
.hw .hw-postmedia img,
.hw .hw-hubmedia img{
  width:100%;
  height:auto;
  border-radius:6px;
  display:block;
}
.hw .hw-postmedia figcaption,
.hw .hw-hubmedia figcaption{
  margin-top:.6rem;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tinte-3);
}

/* --------------------------------------------------------------------------
   4. Quellenzeile unter Meldungen
   Sie ist das sichtbare Versprechen der Methodik-Seite und steht deshalb
   abgesetzt, nicht als Fußnote im Kleingedruckten.
   ----------------------------------------------------------------------- */

.hw .hw-quelle{
  margin:2.4rem 0 0;
  padding:1.1rem 1.3rem;
  background:var(--papier-2);
  border-left:3px solid var(--akzent);
  border-radius:0 4px 4px 0;
  font-size:.94rem;
  max-width:72ch;
}
.hw .hw-quelle .hw-label{margin-bottom:.35rem}
.hw .hw-quelle a{color:var(--akzent)}

/* --------------------------------------------------------------------------
   5. Listen auf den Übersichtsseiten
   ----------------------------------------------------------------------- */

.hw .hw-liste-raster{
  margin-top:2rem;
  max-width:none;
}

/* Archivliste: dichte Zeilen mit Datum und Quelle, wie eine Meldungsübersicht. */
.hw .hw-archiv{
  list-style:none;
  margin:2rem 0 0;
  padding:0;
  border-top:1px solid var(--linie);
  max-width:none;
}
.hw .hw-archiv li{
  padding:1.4rem 0;
  border-bottom:1px solid var(--linie);
  margin:0;
  max-width:none;
}
.hw .hw-archiv h3{
  margin:.35rem 0 .45rem;
  font-size:clamp(1.15rem,1.7vw,1.4rem);
  max-width:44ch;
}
.hw .hw-archiv h3 a{color:var(--tinte);text-decoration:none}
.hw .hw-archiv h3 a:hover{color:var(--akzent)}
.hw .hw-archiv p{margin:0;color:var(--tinte-2);max-width:78ch;font-size:.96rem}

/* --------------------------------------------------------------------------
   7. Spezifitätskorrektur
   Die Regel für Verweise im Fließtext (Abschnitt 2) trifft mit .hw:not(.home)
   .elementor-widget-theme-post-content a auch die Überschriften der Listen –
   dort sollen Titel aber nicht unterstrichen und nicht eingefärbt sein.
   Deshalb hier dieselbe Verankerung plus die Listenklasse.
   ----------------------------------------------------------------------- */

.hw:not(.home) .elementor-widget-theme-post-content .hw-archiv h3 a,
.hw:not(.home) .elementor-widget-theme-post-content .hw-liste-raster h3 a{
  color:var(--tinte);
  text-decoration:none;
}
.hw:not(.home) .elementor-widget-theme-post-content .hw-archiv h3 a:hover,
.hw:not(.home) .elementor-widget-theme-post-content .hw-liste-raster h3 a:hover{
  color:var(--akzent);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Der stille Verweis behält seine Unterkante statt einer Unterstreichung. */
.hw:not(.home) .elementor-widget-theme-post-content a.hw-btn-still{
  color:var(--tinte);
  text-decoration:none;
  border-bottom:2px solid var(--akzent);
}
.hw:not(.home) .elementor-widget-theme-post-content a.hw-btn-still:hover{
  color:var(--akzent);
  text-decoration:none;
}

/* --------------------------------------------------------------------------
   8. Werbeblock einer Themenwelt
   Sitzt im Fließtext, soll aber als eigener Bereich lesbar sein – abgesetzt
   durch Fläche und Linien, nicht durch Rahmen und Schatten.
   ----------------------------------------------------------------------- */

.hw .hw-weltwerbung{
  margin:3rem 0;
  padding:clamp(22px,3vw,34px);
  background:var(--papier-2);
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  max-width:none;
}
.hw .hw-weltwerbung .hw-neu-raster{
  grid-template-columns:repeat(3,1fr);
}
.hw .hw-weltwerbung .hw-karte h3{font-size:1.02rem}
.hw .hw-weltwerbung .hw-stand{margin-top:1.3rem}

/* Im Werbeblock sollen die Produkttitel nicht wie Textverweise aussehen. */
.hw:not(.home) .elementor-widget-theme-post-content .hw-weltwerbung a.hw-btn{
  color:#fff;
  text-decoration:none;
}

@media (max-width:1000px){
  .hw .hw-weltwerbung .hw-neu-raster{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .hw .hw-weltwerbung{
    padding-inline:clamp(16px,4vw,22px);
    margin-inline:calc(var(--rand) * -0.5);
  }
  .hw .hw-weltwerbung .hw-neu-raster{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   Werbeblock am Beitragsende

   Er steht bewusst außerhalb der Textspalte und in einem eigenen Kasten:
   Wer den Beitrag liest, soll erkennen, wo der redaktionelle Teil aufhört.
   Meldungen bekommen keinen – das regelt der Filter, nicht das Stylesheet.
   ----------------------------------------------------------------------- */

.hw .hw-beitrag-werbung{
  margin:3rem 0 0;
  padding:1.6rem clamp(18px,3vw,28px) 1.8rem;
  background:var(--papier-2);
  border:1px solid var(--linie);
  border-left:3px solid var(--akzent);
  border-radius:4px;
  max-width:none;
}
.hw .hw-beitrag-werbung .hw-werbehinweis{margin-bottom:.8rem}
.hw .hw-beitrag-werbung h2{
  font-family:var(--serif);
  font-size:1.22rem;
  margin:0 0 .5rem;
  color:var(--tinte);
}
.hw .hw-beitrag-werbung p{
  font-size:.95rem;
  line-height:1.6;
  color:var(--tinte-2);
  margin:0 0 1.1rem;
  max-width:62ch;
}
.hw .hw-beitrag-werbung strong{color:var(--tinte)}
.hw .hw-beitrag-werbung a.hw-btn{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  background:var(--akzent);
  color:#fff !important;
  text-decoration:none !important;
  font-family:var(--sans);
  font-weight:600;
  font-size:.95rem;
  padding:.7em 1.3em;
  border-radius:3px;
}
.hw .hw-beitrag-werbung a.hw-btn:hover{background:var(--akzent-2)}

/* Kennzeichnung vor dem ersten Werbelink. Steht über dem Beitrag, nicht
   darin: Sie gilt für den ganzen Text und soll vor der ersten Zeile gelesen
   werden, nicht zwischen zwei Absätzen auftauchen. */

.hw .hw-werbehinweis-oben{
  margin:0 0 2rem;
  padding:.85rem 1.1rem;
  background:var(--papier-2);
  border-left:3px solid var(--tinte-3);
  border-radius:3px;
  font-size:.86rem;
  line-height:1.5;
  color:var(--tinte-2);
  max-width:none;
}
.hw .hw-werbehinweis-oben strong{
  color:var(--tinte);
  font-family:var(--sans);
}
.hw .hw-werbehinweis-oben a{color:var(--akzent)}