/* ===========================================================================
   werkzeugmarkt.at – News
   Startseiten-Sektion, Archiv unter /news/ und Einzelmeldung.

   Bewusst bildlos und rein typografisch: Meldungen sollen sich auf den
   ersten Blick von den Produktkarten unterscheiden und beanspruchen keine
   Bildrechte. Geladen von mu-plugins/werkzeugmarkt-news.php.

   Die Farbtoken sind mit startseite.css identisch. Sie werden hier erneut
   gesetzt, weil news.css auch auf Archiv und Einzelmeldung laeuft, wo
   startseite.css nicht geladen wird.
   ======================================================================== */

:root{
  --paper:#FAF8F5;
  --paper-2:#F1EDE7;
  --ink:#15181A;
  --ink-2:#4A5155;
  --ink-3:#7C8489;
  --navy:#10212B;
  --navy-2:#1B3644;
  --orange:#E06A00;
  --line:#DED8CF;
  --white:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111416; --paper-2:#181C1F; --ink:#F0EDE8; --ink-2:#B6BDC1; --ink-3:#8A9298;
    --navy:#0A141A; --navy-2:#162A34; --orange:#FF8A2B; --line:#2A3035; --white:#1C2124;
  }
}
:root[data-theme="dark"]{
  --paper:#111416; --paper-2:#181C1F; --ink:#F0EDE8; --ink-2:#B6BDC1; --ink-3:#8A9298;
  --navy:#0A141A; --navy-2:#162A34; --orange:#FF8A2B; --line:#2A3035; --white:#1C2124;
}

/* ---------------------------------------------------------------------------
   1. Startseiten-Sektion
   ------------------------------------------------------------------------ */

/* Die Flaechenfarbe sitzt am Elementor-Container, nicht an der Sektion.
   Nur so laeuft sie randlos durch, waehrend der Text dem 1360er-Raster
   der uebrigen Startseite folgt. */
.wm-abschnitt-news{
  padding:0 !important;
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.wm-abschnitt-news > .e-con-inner,
.wm-abschnitt-news .elementor-widget-shortcode,
.wm-abschnitt-news .elementor-shortcode{ width:100%; max-width:none; }

/* Nur senkrechte Abstaende setzen. Eine padding-Kurzschreibweise wuerde die
   seitlichen Abstaende aus .k auf null setzen - der Text klebte dann auf
   schmalen Geraeten am Bildschirmrand. */
.wm-news{
  padding-top:clamp(58px,7vw,104px);
  padding-bottom:clamp(58px,7vw,104px);
}

/* Sicherheitsnetz gegen fremde Regeln, die .k den Abstand nehmen. */
.elementor-widget-shortcode .k.wm-news{
  padding-left:clamp(20px,5vw,64px);
  padding-right:clamp(20px,5vw,64px);
}

.news-liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
}

.news-eintrag{
  border-right:1px solid var(--line);
  display:flex;
}
.news-eintrag:last-child{ border-right:0; }

.news-link{
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(24px,2.6vw,34px) clamp(20px,2.4vw,32px) clamp(28px,3vw,38px) 0;
  color:inherit; text-decoration:none;
  transition:opacity .2s;
}
.news-eintrag + .news-eintrag .news-link{ padding-left:clamp(20px,2.4vw,32px); }
.news-link:hover{ opacity:.72; }
.news-link:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; }

.news-kopf{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-2);
}
/* Der Quellenname traegt Information und ist kein Schmuck. In Signalfarbe
   erreicht er auf der hellen Flaeche nur 2,89:1 und faellt bei 12 px durch
   die Kontrastanforderung. Deshalb Textfarbe mit staerkerem Schnitt. */
.news-herkunft{ color:var(--ink); font-weight:600; }

.news-link h3{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(1.12rem,1.5vw,1.34rem); line-height:1.16;
  letter-spacing:-.018em; color:var(--ink); margin:0; text-wrap:balance;
}
.news-link p{
  font-size:.92rem; line-height:1.55; color:var(--ink-2); margin:0; font-weight:300;
}

.news-fuss{ margin:clamp(26px,3vw,38px) 0 0; }
.news-alle{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.93rem; font-weight:500; color:var(--ink);
  text-decoration:none; padding-bottom:5px;
  border-bottom:1px solid var(--line);
  transition:border-color .2s,gap .2s;
}
.news-alle:hover{ border-color:var(--orange); gap:14px; }
.news-alle span{ color:var(--orange); }

@media (max-width:900px){
  .news-liste{ grid-template-columns:1fr; }
  .news-eintrag{ border-right:0; border-bottom:1px solid var(--line); }
  .news-eintrag:last-child{ border-bottom:0; }
  .news-link,
  .news-eintrag + .news-eintrag .news-link{ padding:24px 0 26px; }
  .news-kopf{ font-size:.72rem; letter-spacing:.09em; }
}

/* ---------------------------------------------------------------------------
   2. Archiv unter /news/ und Einzelmeldung
   Astra liefert das Grundgeruest; hier wird ausschliesslich die Typografie
   an das Magazin angeglichen. Keine Layoutuebernahme, damit ein spaeterer
   Theme-Wechsel nichts zerlegt.
   ------------------------------------------------------------------------ */

.category-news .site-content,
.single-post.category-news .site-content{ background:var(--paper); }

.category-news .ast-archive-description{
  max-width:60ch; margin-inline:auto; padding-bottom:8px;
}
.category-news .ast-archive-description .ast-archive-title,
.category-news h1.page-title{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.022em;
  color:var(--ink);
}
.category-news .ast-archive-description p{
  font-size:1.02rem; line-height:1.6; color:var(--ink-2); font-weight:300;
}

.category-news .ast-article-post .entry-title,
.category-news .blog-layout-1 .entry-title{
  font-family:Fraunces,Georgia,serif; font-weight:600;
  font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.14; letter-spacing:-.018em;
}
.category-news .ast-article-post .entry-title a{ color:var(--ink); text-decoration:none; }
.category-news .ast-article-post .entry-title a:hover{ color:var(--orange); }

.category-news .entry-meta,
.category-news .post-meta,
.category-news .ast-blog-meta-container{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.68rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3);
}

/* Quellenzeile unter der Einzelmeldung */
.news-quelle{
  margin-top:2.4em; padding-top:1.1em;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.72rem; font-weight:500; letter-spacing:.06em;
  line-height:1.7; color:var(--ink-2);
  overflow-wrap:anywhere;
}
/* Die Zweitquelle steht direkt unter der Primärquelle und teilt sich mit ihr
   den oberen Trennstrich. */
.news-quelle + .news-quelle{
  margin-top:.5em; padding-top:0; border-top:0;
}
.news-quelle-label{ text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); }
.news-quelle a{ color:var(--orange); text-decoration:none; border-bottom:1px solid var(--line); }
.news-quelle a:hover{ border-color:var(--orange); }
.news-quelldatum{ color:var(--ink-3); }

.punkt-trenner{ color:var(--ink-3); }