/* ===========================================================================
   werkzeugmarkt.at – Beiträge und redaktionelle Seiten
   Gestaltung der Bausteine, die in Ratgebern, Kaufberatungen und auf der
   Methodikseite vorkommen: Vorspann, Methodikhinweis, Formelzeile,
   Weiterlesen-Zeile, Werbelink-Block und KI-Kennzeichnung.

   Bewusst zurückhaltend: die Grundtypografie liefert weiterhin Astra.
   Hier stehen nur die eigenen Klassen, damit Astra-Aktualisierungen nichts
   überschreiben und nichts überschrieben wird.

   Die Farbtoken sind mit startseite.css und news.css identisch. Sie werden
   hier erneut gesetzt, weil beitrag.css auf Einzelbeiträgen und Seiten
   läuft, wo startseite.css nicht geladen wird.

   Geladen von mu-plugins/werkzeugmarkt-core.php.
   ======================================================================== */

: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;
}

/* ---------------------------------------------------------------------------
   0. Standardseiten und automatisch ergaenzte Seitentitel
   ------------------------------------------------------------------------ */

.entry-content .wm-auto-title{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(54px,7vw,88px) clamp(20px,5vw,64px) 28px;
}
.entry-content .wm-auto-title h1{ margin:0; }

.entry-content .wm-standardseite{
  max-width:1040px;
  margin:0 auto;
  padding:clamp(54px,7vw,88px) clamp(20px,5vw,64px) clamp(72px,9vw,120px);
}
.entry-content .wm-standardseite h1{ margin:0 0 28px; }
.entry-content .wm-standardseite h2{ margin:46px 0 18px; }
.entry-content .wm-standardseite p{ max-width:74ch; }
.entry-content .wm-standardseite p + p{ margin-top:1.15em; }
.entry-content .wm-standardseite a:not(.wm-kategorie-card){
  color:var(--ink);
  border-bottom:1px solid var(--orange);
}
.entry-content .wm-standardseite a:not(.wm-kategorie-card):hover,
.entry-content .wm-standardseite a:not(.wm-kategorie-card):focus-visible{ color:var(--orange); }

.entry-content .wm-kategorie-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.entry-content .wm-kategorie-card{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-height:132px;
  padding:24px 26px;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s,transform .18s;
}
.entry-content .wm-kategorie-card:hover,
.entry-content .wm-kategorie-card:focus-visible{
  border-color:var(--orange);
  transform:translateY(-2px);
}
.entry-content .wm-kategorie-card strong{
  font-family:Fraunces,Georgia,serif;
  font-size:1.35rem;
  line-height:1.15;
}
.entry-content .wm-kategorie-card span{ color:var(--ink-2); line-height:1.5; }

@media(max-width:680px){
  .entry-content .wm-kategorie-grid{ grid-template-columns:1fr; }

  /* Astra setzt globale Seitentitel und H2 auf kleinen Displays zu gross.
     Die engere Stufung verhindert unschoene Einzelbuchstaben-Zeilen auf
     Impressum, Datenschutz und den eigenen Standardseiten. */
  .entry-content .wm-auto-title{
    padding:44px 20px 22px;
  }
  .entry-content .wm-auto-title h1,
  .entry-content .wm-standardseite h1{
    font-size:clamp(2.2rem,11vw,2.65rem);
    line-height:1.08;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }
  .entry-content .wm-standardseite h2,
  .entry-content #impressum h2,
  .entry-content #datenschutz h2{
    font-size:clamp(1.75rem,8vw,1.9rem);
    line-height:1.18;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:auto;
  }
}

/* ---------------------------------------------------------------------------
   1. Vorspann
   Der erste Absatz trägt den Einstieg und ist deshalb größer gesetzt.
   ------------------------------------------------------------------------ */

.entry-content p.vorspann{
  font-size:1.16rem;
  line-height:1.62;
  font-weight:400;
  color:var(--ink);
  margin-bottom:1.5em;
}

/* ---------------------------------------------------------------------------
   2. Methodikhinweis
   Steht früh im Beitrag und sagt, worauf die Aussagen beruhen. Er ist
   Bestandteil der redaktionellen Transparenz, kein Randhinweis, und wird
   deshalb sichtbar abgesetzt statt kleingedruckt.
   ------------------------------------------------------------------------ */

.entry-content p.beitrag-methodik{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--paper-2);
  border-left:3px solid var(--orange);
  padding:14px 18px;
  margin:0 0 2em;
}
.entry-content p.beitrag-methodik a{
  color:var(--ink);
  border-bottom:1px solid var(--orange);
}
.entry-content p.beitrag-methodik a:hover{ color:var(--orange); }

/* ---------------------------------------------------------------------------
   3. Formelzeile
   ------------------------------------------------------------------------ */

.entry-content p.formel{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:1.1rem;
  text-align:center;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:16px 18px;
  margin:1.6em 0;
}

/* ---------------------------------------------------------------------------
   4. Weiterlesen-Zeile
   ------------------------------------------------------------------------ */

.entry-content p.weiterlesen{
  font-size:.95rem;
  color:var(--ink-2);
  border-top:1px solid var(--line);
  padding-top:18px;
  margin-top:2.4em;
}
.entry-content p.weiterlesen a{
  color:var(--ink);
  font-weight:500;
  border-bottom:1px solid var(--orange);
}
.entry-content p.weiterlesen a:hover{ color:var(--orange); }

/* ---------------------------------------------------------------------------
   5. Werbelink
   Die Kennzeichnung „Anzeige“ muss vor dem Link stehen und ohne Scrollen,
   ohne Aufklappen und ohne Farbwahrnehmung erkennbar sein. Sie ist deshalb
   Text im Fluss, nicht nur eine Farbe oder ein Symbol.
   ------------------------------------------------------------------------ */

.entry-content p.amzn-hinweis{
  display:block;
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:18px 20px;
  margin:2em 0;
  font-size:.97rem;
  line-height:1.55;
}
.entry-content .amzn-label{
  display:inline-block;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--ink-2);
  padding:3px 8px;
  margin-right:10px;
  vertical-align:.1em;
}
.entry-content a.amzn-suche{
  font-weight:600;
  color:var(--ink);
  border-bottom:2px solid var(--orange);
}
.entry-content a.amzn-suche:hover{ color:var(--orange); }
.entry-content .amzn-fuss{
  display:block;
  margin-top:10px;
  font-size:.85rem;
  line-height:1.5;
  color:var(--ink-2);
}

/* ---------------------------------------------------------------------------
   6. KI-Kennzeichnung
   Gleiche Gestalt wie auf der Startseite: echter Text im Dokument, immer
   sichtbar, nie nur im Dateinamen oder im Alternativtext.
   ------------------------------------------------------------------------ */

.entry-content p.ki-zeile{
  margin:0 0 1.4em;
}
.entry-content .ki-hinweis{
  display:inline-block;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------------------------------------------------------------------------
   6a. Ratgeberbeitraege
   Eigenstaendiges Magazinlayout fuer lange Kaufberatungen. Das Beitragsbild
   ist Teil des Artikels und die KI-Kennzeichnung liegt direkt darauf.
   ------------------------------------------------------------------------ */

body.wm-ratgeber-einzel .site-content{ background:var(--paper); }
body.wm-ratgeber-einzel .site-content > .ast-container{
  width:100%;
  max-width:none;
  padding:0;
}
body.wm-ratgeber-einzel .content-area{
  width:100%;
  max-width:none;
  margin:0;
}
body.wm-ratgeber-einzel .ast-article-single{
  padding:0;
  background:transparent;
}
body.wm-ratgeber-einzel .entry-header{
  max-width:1120px;
  margin:0 auto;
  padding:clamp(64px,8vw,112px) clamp(22px,5vw,64px) clamp(34px,4vw,54px);
}
body.wm-ratgeber-einzel .entry-title{
  max-width:17ch;
  margin:0 0 24px;
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(2.8rem,5.3vw,5.25rem);
  font-weight:600;
  line-height:1.01;
  letter-spacing:-.04em;
  color:var(--ink);
  text-wrap:balance;
}
body.wm-ratgeber-einzel .entry-meta{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--ink-3);
}
body.wm-ratgeber-einzel .entry-meta a{ color:var(--ink); }
body.wm-ratgeber-einzel .entry-content{ margin:0; }

.entry-content .wm-ratgeber-hero{
  position:relative;
  width:min(1280px,100%);
  aspect-ratio:16/8.6;
  margin:0 auto;
  overflow:hidden;
  background:var(--paper-2);
}
.entry-content .wm-ratgeber-hero__bild{
  display:block;
  width:100%;
  height:100%!important;
  object-fit:cover;
}
.entry-content .wm-ratgeber-hero__ki{
  position:absolute;
  left:clamp(16px,3vw,34px);
  bottom:clamp(16px,3vw,30px);
  padding:7px 10px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.09em;
  line-height:1.3;
  text-transform:uppercase;
  color:#fff;
  background:rgba(16,33,43,.86);
}
.entry-content .wm-ratgeber-artikeltext{
  max-width:790px;
  margin:0 auto;
  padding:clamp(54px,7vw,88px) clamp(22px,4vw,38px) clamp(78px,10vw,132px);
  font-size:1.08rem;
  line-height:1.76;
  color:var(--ink-2);
}
.entry-content .wm-ratgeber-artikeltext > :first-child{ margin-top:0; }
.entry-content .wm-ratgeber-artikeltext p{ margin:0 0 1.35em; }
.entry-content .wm-ratgeber-artikeltext h2{
  margin:clamp(48px,7vw,74px) 0 20px;
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(2rem,3.4vw,3rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}
.entry-content .wm-ratgeber-artikeltext ul,
.entry-content .wm-ratgeber-artikeltext ol{
  margin:0 0 1.8em;
  padding-left:1.3em;
}
.entry-content .wm-ratgeber-artikeltext li{ margin:.58em 0; padding-left:.25em; }
.entry-content .wm-ratgeber-artikeltext strong{ color:var(--ink); }
.entry-content .wm-ratgeber-artikeltext a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--orange);
}
.entry-content .wm-ratgeber-artikeltext a:hover,
.entry-content .wm-ratgeber-artikeltext a:focus-visible{ color:var(--orange); }
.entry-content .wm-ratgeber-artikeltext .vorspann{
  margin-bottom:30px;
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(1.35rem,2.1vw,1.72rem);
  font-weight:400;
  line-height:1.48;
  color:var(--ink);
}
.entry-content .wm-ratgeber-artikeltext .beitrag-methodik{
  margin:0 0 48px;
  padding:20px 22px;
}
.entry-content .wm-ratgeber-artikeltext .quellen-stand{
  padding:20px 22px;
  border-left:3px solid var(--orange);
  background:var(--paper-2);
}
.entry-content .wm-ratgeber-artikeltext .quellenliste{
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.entry-content .wm-ratgeber-artikeltext .quellenliste li{
  margin:0;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:.94rem;
  line-height:1.62;
}
body.wm-ratgeber-einzel .post-navigation{
  max-width:790px;
  margin:0 auto clamp(68px,9vw,116px);
  padding:0 clamp(22px,4vw,38px);
}

@media(max-width:680px){
  body.wm-ratgeber-einzel .entry-header{ padding-top:54px; }
  body.wm-ratgeber-einzel .entry-title{
    font-size:clamp(2.25rem,11vw,3.2rem);
    line-height:1.04;
  }
  .entry-content .wm-ratgeber-hero{ aspect-ratio:4/3; }
  .entry-content .wm-ratgeber-artikeltext{ font-size:1rem; line-height:1.7; }
}

/* ---------------------------------------------------------------------------
   6b. Themen-Hubs
   Wiederverwendbares Magazinlayout fuer die Hauptkategorien. Jede Hubseite
   bleibt durch .wm-hubseite vollstaendig vom uebrigen Seiteninhalt getrennt.
   ------------------------------------------------------------------------ */

.entry-content .wm-hubseite{
  width:100%;
  max-width:none;
  margin:0;
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
}
body:has(.wm-hubseite) .ast-article-single{ padding:0!important; }
.entry-content .wm-hubseite *{ box-sizing:border-box; }
.entry-content .wm-hubseite h1,
.entry-content .wm-hubseite h2,
.entry-content .wm-hubseite h3{
  margin-top:0;
  color:inherit;
  overflow-wrap:normal;
  word-break:normal;
}
.entry-content .wm-hubseite p{ line-height:1.68; }
.entry-content .wm-hub-kicker{
  margin:0 0 14px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.13em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--orange);
}
.entry-content .wm-hub-hero{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr);
  min-height:720px;
  background:var(--navy);
  color:#fff;
}
.entry-content .wm-hub-hero__media{ position:relative; min-height:620px; }
.entry-content .wm-hub-hero__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.entry-content .wm-hub-ki{
  position:absolute;
  left:22px;
  bottom:20px;
  display:inline-block;
  padding:6px 9px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.65rem;
  letter-spacing:.08em;
  line-height:1.25;
  text-transform:uppercase;
  color:#fff;
  background:rgba(16,33,43,.84);
}
.entry-content .wm-hub-hero__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(64px,7vw,112px) clamp(34px,6vw,96px);
}
.entry-content .wm-hub-hero h1{
  max-width:11ch;
  margin-bottom:26px;
  font-size:clamp(3.25rem,5.5vw,6.3rem);
  line-height:.98;
  letter-spacing:-.045em;
  color:#fff;
}
.entry-content .wm-hub-lead{
  max-width:61ch;
  margin:0;
  font-size:clamp(1.06rem,1.35vw,1.28rem);
  color:rgba(255,255,255,.82);
}
.entry-content .wm-hub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:34px;
}
.entry-content .wm-hub-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 20px;
  font-weight:650;
  line-height:1.25;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.36);
}
.entry-content .wm-hub-button--primary{ color:#fff; background:var(--orange); border-color:var(--orange); }
.entry-content .wm-hub-button--primary:hover,
.entry-content .wm-hub-button--primary:focus-visible{ color:#fff; background:#bd5700; }
.entry-content .wm-hub-button--ghost{ color:#fff; }
.entry-content .wm-hub-button--ghost:hover,
.entry-content .wm-hub-button--ghost:focus-visible{ color:#fff; border-color:#fff; }
.entry-content .wm-hub-trust{
  max-width:62ch;
  margin:30px 0 0;
  font-size:.82rem;
  color:rgba(255,255,255,.58);
}
.entry-content .wm-hub-section{
  display:grid;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);
  gap:clamp(42px,7vw,112px);
  max-width:1360px;
  margin:0 auto;
  padding:clamp(78px,9vw,132px) clamp(22px,5vw,68px);
}
.entry-content .wm-hub-section--sand{
  max-width:none;
  padding-left:max(clamp(22px,5vw,68px),calc((100vw - 1360px)/2 + 68px));
  padding-right:max(clamp(22px,5vw,68px),calc((100vw - 1360px)/2 + 68px));
  background:var(--paper-2);
}
.entry-content .wm-hub-section--navy{
  max-width:none;
  padding-left:max(clamp(22px,5vw,68px),calc((100vw - 1360px)/2 + 68px));
  padding-right:max(clamp(22px,5vw,68px),calc((100vw - 1360px)/2 + 68px));
  background:var(--navy);
  color:#fff;
}
.entry-content .wm-hub-section__heading h2{
  max-width:14ch;
  margin-bottom:0;
  font-size:clamp(2.35rem,4vw,4.5rem);
  line-height:1.04;
  letter-spacing:-.035em;
}
.entry-content .wm-hub-section__heading--wide{ grid-column:1/-1; }
.entry-content .wm-hub-section__heading--wide h2{ max-width:18ch; }
.entry-content .wm-hub-section__heading--wide > p:last-child{ max-width:72ch; color:var(--ink-2); }
.entry-content .wm-hub-section--navy .wm-hub-section__heading--wide > p:last-child{ color:rgba(255,255,255,.7); }
.entry-content .wm-hub-prose{ max-width:74ch; font-size:1.06rem; }
.entry-content .wm-hub-prose p:first-child{ margin-top:0; }
.entry-content .wm-hub-prose p + p{ margin-top:1.2em; }
.entry-content .wm-hub-choice-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.entry-content .wm-hub-choice{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:32px;
  border:1px solid var(--line);
  background:var(--white);
}
.entry-content .wm-hub-choice--featured{ border-top:4px solid var(--orange); padding-top:29px; }
.entry-content .wm-hub-choice__number{
  position:absolute;
  top:20px;
  right:22px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.74rem;
  color:var(--ink-3);
}
.entry-content .wm-hub-choice__eyebrow{
  margin:0 0 8px;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--orange);
}
.entry-content .wm-hub-choice h3{ margin-bottom:18px; font-size:1.75rem; }
.entry-content .wm-hub-choice p{ color:var(--ink-2); }
.entry-content .wm-hub-choice ul{ margin:10px 0 28px; padding-left:1.15em; }
.entry-content .wm-hub-choice li{ margin:.45em 0; }
.entry-content a.wm-hub-affiliate{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:auto;
  padding:12px 15px;
  font-size:.92rem;
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
  text-decoration:none;
  border:1px solid var(--orange);
}
.entry-content a.wm-hub-affiliate:hover,
.entry-content a.wm-hub-affiliate:focus-visible{ color:#fff; background:var(--orange); }
.entry-content .wm-hub-affiliate-note{
  grid-column:1/-1;
  max-width:85ch;
  margin:0;
  font-size:.84rem;
  color:var(--ink-2);
}
.entry-content .wm-hub-criteria-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.18);
  border-left:1px solid rgba(255,255,255,.18);
}
.entry-content .wm-hub-criteria-grid article{
  min-height:230px;
  padding:26px;
  border-right:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
}
.entry-content .wm-hub-criteria-grid article > span{
  display:block;
  margin-bottom:32px;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--orange);
}
.entry-content .wm-hub-criteria-grid h3{ margin-bottom:11px; font-size:1.26rem; color:#fff; }
.entry-content .wm-hub-criteria-grid p{ margin:0; font-size:.94rem; color:rgba(255,255,255,.68); }
.entry-content .wm-hub-feature{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  background:var(--orange);
  color:#fff;
}
.entry-content .wm-hub-feature__media{ position:relative; min-height:580px; margin:0; }
.entry-content .wm-hub-feature__media img{ width:100%; height:100%; display:block; object-fit:cover; }

/* Kreissaege in beiden Motiven sichtbar halten: Die Originale haben das Werkzeug links. */
.entry-content .wm-hub-kreissaegen .wm-hub-hero__media img,
.entry-content .wm-hub-kreissaegen .wm-hub-feature__media img{
  transform:scaleX(-1);
  object-position:left center;
}

/* Werkzeug-Ratgeber: Hauptwerkzeug in den breiten Motiven vollständig zeigen. */
.entry-content .wm-hub-werkzeug-ratgeber .wm-hub-hero__media img,
.entry-content .wm-hub-werkzeug-ratgeber .wm-hub-feature__media img{
  object-position:12% center;
}
.entry-content .wm-hub-feature__copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(58px,7vw,110px) clamp(34px,6vw,90px);
}
.entry-content .wm-hub-feature .wm-hub-kicker{ color:#fff; opacity:.74; }
.entry-content .wm-hub-feature h2{ max-width:12ch; margin-bottom:24px; font-size:clamp(2.5rem,4vw,4.6rem); line-height:1.02; color:#fff; }
.entry-content .wm-hub-feature p{ color:rgba(255,255,255,.86); }
.entry-content a.wm-hub-affiliate--light{ margin-top:20px; color:#fff; border-color:#fff; }
.entry-content a.wm-hub-affiliate--light:hover,
.entry-content a.wm-hub-affiliate--light:focus-visible{ color:var(--orange); background:#fff; }
.entry-content .wm-hub-table-wrap{ min-width:0; overflow-x:auto; }
.entry-content .wm-hub-table{ width:100%; min-width:720px; margin:0; border-collapse:collapse; }
.entry-content .wm-hub-table th,
.entry-content .wm-hub-table td{ padding:18px; text-align:left; vertical-align:top; border:0; border-bottom:1px solid var(--line); }
.entry-content .wm-hub-table thead th{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.entry-content .wm-hub-table tbody th{ color:var(--ink); }
.entry-content .wm-hub-table tbody td{ color:var(--ink-2); }
.entry-content .wm-hub-section--split{ align-items:start; }
.entry-content .wm-hub-checklist{ margin:28px 0 0; padding:0; list-style:none; }
.entry-content .wm-hub-checklist li{ position:relative; padding:14px 0 14px 34px; border-bottom:1px solid var(--line); }
.entry-content .wm-hub-checklist li::before{ content:"✓"; position:absolute; left:0; color:var(--orange); font-weight:800; }
.entry-content .wm-hub-reading{ padding:34px; color:#fff; background:var(--navy-2); }
.entry-content .wm-hub-reading h3{ margin-bottom:14px; font-size:2rem; color:#fff; }
.entry-content .wm-hub-reading p{ color:rgba(255,255,255,.72); }
.entry-content .wm-hub-reading a{ display:inline-block; margin-top:12px; font-weight:700; color:#fff; border-bottom:2px solid var(--orange); }
.entry-content .wm-hub-faq{ grid-template-columns:1fr; gap:0; }
.entry-content .wm-hub-faq details{ border-bottom:1px solid var(--line); }
.entry-content .wm-hub-faq details:first-of-type{ margin-top:38px; border-top:1px solid var(--line); }
.entry-content .wm-hub-faq summary{ padding:21px 48px 21px 0; font-size:1.18rem; font-weight:700; cursor:pointer; }
.entry-content .wm-hub-faq details p{ max-width:76ch; margin:0 0 22px; color:var(--ink-2); }

@media(max-width:1100px){
  .entry-content .wm-hub-hero{ grid-template-columns:1fr 1fr; min-height:650px; }
  .entry-content .wm-hub-hero h1{ font-size:clamp(3.1rem,6vw,4.8rem); }
  .entry-content .wm-hub-choice-grid{ grid-template-columns:1fr; }
  .entry-content .wm-hub-choice{ min-height:0; }
  .entry-content .wm-hub-criteria-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .entry-content .wm-hub-feature{ grid-template-columns:1fr 1fr; }
}
@media(max-width:760px){
  .entry-content .wm-hub-hero{ grid-template-columns:1fr; min-height:0; }
  .entry-content .wm-hub-hero__media{ min-height:58vw; order:1; }
  .entry-content .wm-hub-hero__copy{ order:2; padding:50px 22px 58px; }
  .entry-content .wm-hub-hero h1{
    max-width:12ch;
    font-size:clamp(2.35rem,11.5vw,3.7rem);
    hyphens:none;
  }
  .entry-content .wm-hub-winkelschleifer .wm-hub-hero h1{
    max-width:100%;
    font-size:clamp(2.15rem,10vw,3.4rem);
    overflow-wrap:anywhere;
  }
  .entry-content .wm-hub-actions{ align-items:stretch; flex-direction:column; }
  .entry-content .wm-hub-button{ width:100%; }
  .entry-content .wm-hub-section,
  .entry-content .wm-hub-section--sand,
  .entry-content .wm-hub-section--navy{ grid-template-columns:1fr; gap:34px; padding:68px 22px; }
  .entry-content .wm-hub-section__heading h2{ font-size:clamp(2.2rem,11vw,3.3rem); }
  .entry-content .wm-hub-choice{ padding:27px 23px; }
  .entry-content .wm-hub-criteria-grid{ grid-template-columns:1fr; }
  .entry-content .wm-hub-criteria-grid article{ min-height:0; }
  .entry-content .wm-hub-feature{ grid-template-columns:1fr; }
  .entry-content .wm-hub-feature__media{ min-height:62vw; }
  .entry-content .wm-hub-feature__copy{ padding:54px 22px 64px; }
  .entry-content .wm-hub-feature h2{ font-size:clamp(2.35rem,11vw,3.4rem); }
  .entry-content .wm-hub-reading{ padding:28px 24px; }
  .entry-content .wm-hub-ki{ left:14px; bottom:14px; }
}

/* ---------------------------------------------------------------------------
   7. Überschriften mit Sprungmarke
   Die Startseite verlinkt gezielt einzelne Abschnitte. Der Sprung darf
   nicht unter einem klebenden Kopfbereich verschwinden.
   ------------------------------------------------------------------------ */

.entry-content h2[id]{ scroll-margin-top:110px; }

@media(max-width:782px){
  .entry-content h2[id]{ scroll-margin-top:70px; }
}

/* ---------------------------------------------------------------------------
   8. Aktualisierungsdatum
   Steht vor dem Text, weil es zur Einordnung gehört: Wer einen Ratgeber
   liest, will wissen, wie alt die Angaben sind, bevor er sie verwendet.
   ------------------------------------------------------------------------ */

.entry-content p.beitrag-aktualisiert{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  margin:0 0 1.6em;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.entry-content p.beitrag-aktualisiert time{
  font-weight:600;
  color:var(--ink);
}
.entry-content .beitrag-erstfassung{
  color:var(--ink-3);
  font-weight:400;
}

/* ---------------------------------------------------------------------------
   9. Quellen und Stand
   Belege gehören sichtbar in den Beitrag, nicht in eine Fußnote, die
   niemand aufklappt.
   ------------------------------------------------------------------------ */

.entry-content p.quellen-stand{
  font-size:.95rem;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 1.1em;
}
.entry-content ul.quellenliste{
  margin:0 0 2em;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
}
.entry-content ul.quellenliste li{
  margin:0;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:.94rem;
  line-height:1.55;
  color:var(--ink-2);
}
.entry-content ul.quellenliste a{
  font-weight:600;
  color:var(--ink);
  border-bottom:1px solid var(--orange);
}
.entry-content ul.quellenliste a:hover,
.entry-content ul.quellenliste a:focus-visible{ color:var(--orange); }