/* ===========================================================================
   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;
}

/* ---------------------------------------------------------------------------
   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);
}

/* ---------------------------------------------------------------------------
   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; }
}