/* =========================================================================
   Inhaltsseiten: Artikel (Wissen) und Leistungsseite.
   Ergänzt base.css + arbeitsvariante.css + modus-hell.css.
   Muster für das mitlaufende Inhaltsverzeichnis nach Vorbild Eltropuls,
   erweitert um die Mitlauf-Markierung, die dort fehlt.
   ========================================================================= */

/* ---------- Artikelkopf --------------------------------------------------- */
.artikelkopf { padding-block: clamp(36px, 5vw, 64px) clamp(36px, 5vw, 56px); }
.artikelkopf__raster {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
}
@media (max-width: 940px) { .artikelkopf__raster { grid-template-columns: 1fr; } }

.brotkrumen {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #5a5a5a;
  margin-bottom: 18px;
}
.brotkrumen a { color: #5a5a5a; text-decoration: none; }
.brotkrumen a:hover { color: #000; }
/* Nur das Trennzeichen einfaerben, nicht den aktuellen Seitennamen.
   Ohne [aria-hidden] traf die Regel auch den <span> mit dem Seitentitel und
   setzte ihn auf die Rahmenfarbe: 1,27:1 gegen Weiss, klar unter AA.
   Gefunden am 07.09.2026 beim Kontrastlauf ueber die gebaute Leistungsseite. */
.brotkrumen span[aria-hidden] { margin-inline: 6px; color: var(--hell-rahmen); }

.artikelkopf .h-hero { font-size: clamp(30px, 3.8vw, 48px); max-width: 20ch; }

.artikelmeta {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 30px);
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--hell-rahmen);
  font-size: 14.5px; color: #5a5a5a;
}
.artikelmeta li { display: flex; align-items: center; gap: 8px; }
.artikelmeta svg { color: var(--gelb-gross); flex: 0 0 16px; }

.artikelkopf__medien {
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden;
}
.artikelkopf__medien img {
  /* QA 08.10.2026 (S7): Die Titelbilder sind fast alle Video-Thumbnails mit
     Schrift (16:9). Im 4:3-Ausschnitt fehlten links und rechts Buchstaben.
     single.php setzt das echte Seitenverhaeltnis als Inline-Stil, 16:9 ist
     nur der Rueckfall. */
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: grayscale(0.42) contrast(1.10) brightness(0.62);
}
.artikelkopf__medien .hero-schleier {
  width: 100%; border-radius: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0) 55%);
}

/* ---------- Artikelkörper mit Inhaltsverzeichnis -------------------------- */
.artikel {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
  padding-bottom: clamp(48px, 6vw, 80px);
}
@media (max-width: 940px) {
  .artikel { grid-template-columns: 1fr; gap: 28px; }
}

.artikel__toc { position: sticky; top: 100px; }
@media (max-width: 940px) {
  .artikel__toc {
    position: static;
    background: var(--hell-karte);
    border: 1px solid var(--hell-rahmen);
    border-radius: 12px;
    padding: 20px 22px;
  }
}
.artikel__toc-titel {
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: #5a5a5a;
  margin-bottom: 14px;
}
.artikel__toc nav { display: grid; }
.artikel__toc a {
  display: block;
  padding: 9px 0 9px 16px;
  border-left: 2px solid var(--hell-rahmen);
  font-size: 15px; line-height: 1.35;
  color: #4a4a4a; text-decoration: none;
  transition: color var(--schnell), border-color var(--schnell);
}
.artikel__toc a:hover { color: #000; border-left-color: #9a9a9a; }
/* Mitlauf-Markierung: zeigt, wo man gerade ist. Fehlt bei Eltropuls. */
.artikel__toc a[aria-current='true'] {
  color: #000; font-weight: 700;
  border-left-color: var(--gelb);
  border-left-width: 3px;
}

.artikel__fortschritt { margin-top: 22px; }
.artikel__balken {
  display: block; height: 3px; width: 100%;
  background: var(--hell-rahmen); border-radius: 2px; overflow: hidden;
}
.artikel__balken span {
  display: block; height: 100%; width: 0;
  background: var(--gelb);
  transition: width 120ms linear;
}
@media (max-width: 940px) { .artikel__fortschritt { display: none; } }

/* ---------- Fließtext ----------------------------------------------------- */
.artikel__text { max-width: 68ch; font-size: 18px; line-height: 1.7; }
.artikel__vorspann {
  font-size: clamp(19px, 1.9vw, 21px);
  line-height: 1.6; font-weight: 500;
  padding-bottom: 24px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hell-rahmen);
}
.artikel__text h2 {
  font-size: clamp(24px, 2.6vw, 31px);
  margin-top: 52px; margin-bottom: 16px;
  scroll-margin-top: 110px;
}
/* Gelber Strich vor der Zwischenüberschrift statt Marker im Text */
.artikel__text h2::before {
  content: ''; display: block;
  width: 44px; height: 4px; margin-bottom: 18px;
  background: var(--gelb); border-radius: 2px;
}
.artikel__text h3 {
  font-size: clamp(19px, 2vw, 22px);
  margin-top: 36px; margin-bottom: 12px;
  scroll-margin-top: 110px;
}
.artikel__text p { margin-bottom: 20px; }
.artikel__text .liste-check { margin: 26px 0 30px; }

/* Zitat */
.zitat {
  margin: 36px 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--gelb);
}
.zitat p {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700; line-height: 1.4;
  color: var(--hell-text); margin: 0;
}

/* Hinweiskasten */
.hinweis {
  margin: 32px 0;
  background: var(--hell-karte);
  border-left: 4px solid var(--gelb);
  border-radius: 0 10px 10px 0;
  padding: 22px 26px;
}
.hinweis__titel {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #5a5a5a;
  margin-bottom: 8px;
}
.hinweis p:last-child { margin: 0; font-size: 17px; line-height: 1.6; }

/* Bild im Text */
.bild { margin: 38px 0; }
.bild img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 12px;
  filter: grayscale(0.42) contrast(1.10) brightness(0.62);
}
.bild figcaption {
  margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: #5a5a5a;
}

/* Nummerierte Schritte */
.schrittliste { display: grid; gap: 20px; margin: 30px 0 34px; }
.schrittliste li {
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: start;
}
.schrittliste h3 { margin: 0 0 6px; font-size: 19px; }
.schrittliste p { margin: 0; font-size: 17px; color: var(--hell-text-sek); }

/* ---------- Autorbox ------------------------------------------------------ */
.autorbox { border-top: 1px solid var(--hell-rahmen); }
.autorbox__raster {
  display: grid; grid-template-columns: 132px 1fr;
  gap: clamp(22px, 3vw, 40px); align-items: center;
  max-width: 820px;
}
@media (max-width: 620px) {
  .autorbox__raster { grid-template-columns: 1fr; }
  .autorbox__bild { max-width: 132px; }
}
.autorbox__bild {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
}
.autorbox__raster--ohne-bild { grid-template-columns: 1fr; }

/* =========================================================================
   Leistungsseite
   ========================================================================= */
.leistung-hero { padding-block: clamp(40px, 5vw, 72px) clamp(30px, 4vw, 52px); }
.leistung-hero__raster {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
@media (max-width: 1000px) { .leistung-hero__raster { grid-template-columns: 1fr; } }

.fuerwen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
@media (max-width: 820px) { .fuerwen { grid-template-columns: 1fr; } }
.fuerwen__spalte { border-top: 3px solid var(--gelb); padding-top: 24px; }
.fuerwen__spalte--nicht { border-top-color: var(--hell-rahmen); }
.fuerwen__spalte h3 { font-size: 20px; margin-bottom: 16px; }
.fuerwen__spalte li {
  display: flex; gap: 12px; align-items: flex-start;
  margin-bottom: 12px; font-size: 17px; line-height: 1.5;
  color: var(--hell-text-sek);
}
.fuerwen__spalte svg { flex: 0 0 20px; margin-top: 3px; }
.fuerwen__spalte--passt svg { color: #000; background: var(--gelb); border-radius: 50%; padding: 3px; }
.fuerwen__spalte--nicht svg { color: #8a8a8a; }

.umfang { display: grid; gap: 0; }
.umfang li {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--hell-rahmen);
}
.umfang li:first-child { border-top: 1px solid var(--hell-rahmen); }
.umfang h3 { font-size: clamp(19px, 2vw, 22px); margin-bottom: 8px; }
.umfang p { margin: 0; font-size: 17px; color: var(--hell-text-sek); max-width: 62ch; }
.umfang__menge {
  font-size: 14px; font-weight: 700; color: #000;
  background: var(--gelb); padding: 5px 11px; border-radius: 5px;
  white-space: nowrap; align-self: center;
}
@media (max-width: 760px) {
  .umfang li { grid-template-columns: auto 1fr; }
  .umfang__menge { grid-column: 2; justify-self: start; margin-top: 12px; }
}


/* =========================================================================
   Standardseite (Impressum, Datenschutz) und 404.
   Unveraendert aus design/css/uebersichtsseite.css. Beides sind Templates,
   keine Bloecke, deshalb hier im Theme.
   ========================================================================= */

/* ---------- Standardseite ------------------------------------------------- */
.standard {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
  padding-block: clamp(34px, 4vw, 56px) clamp(48px, 6vw, 80px);
}

.standard__text h1 { margin-bottom: 6px; }

.standard__text h1::before { display: none; }

.standard__stand {
  font-size: 14.5px; color: #5a5a5a;
  padding-bottom: 22px; margin-bottom: 8px;
  border-bottom: 1px solid var(--hell-rahmen);
}

.standard__text a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 404 ----------------------------------------------------------- */
.fehler { padding-block: clamp(44px, 6vw, 84px); }

.fehler__raster {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 4vw, 64px); align-items: center;
}

.fehler .h-hero { max-width: 16ch; }

.fehler__wege { display: grid; gap: 10px; max-width: 520px; }

.fehler__wege a {
  display: block; padding: 16px 20px;
  background: #fff; border: 1px solid var(--hell-rahmen);
  border-radius: 10px; text-decoration: none;
  transition: border-color var(--schnell), transform var(--schnell) var(--kurve);
}

.fehler__wege a:hover { border-color: var(--gelb); transform: translateY(-1px); }

.fehler__wege strong { display: block; font-size: 16.5px; color: var(--hell-text); }

.fehler__wege span { display: block; margin-top: 3px; font-size: 14.5px; color: #5a5a5a; }

.fehler__hinweis { margin-top: 26px; font-size: 15px; color: #5a5a5a; }

.fehler__hinweis a { color: #000; text-decoration: underline; text-underline-offset: 3px; }

.fehler__bild img { aspect-ratio: 1 / 1; }
@media (max-width: 940px) {
.standard { grid-template-columns: 1fr; gap: 26px; }

.fehler__raster { grid-template-columns: 1fr; }
}

/* Funnel-Seiten: Regeln stehen in base.css (14.10.2026). inhalt.css wird
   auf Funnel-Seiten nicht geladen, die Regeln hier griffen nie. */

/* ---------- Listen, Tabellen, Code im Fliesstext (07.10.2026) -------------
   base.css setzt ul global auf list-style none. Die core/list-Bloecke der
   Beitraege und der Rechtstexte standen dadurch ohne Aufzaehlungszeichen da.
   Tabellen (Cookie-Tabelle der Datenschutzerklaerung) hatten keine Gestalt,
   weil die Block-Bibliothek nicht geladen wird. */
.artikel__text ul.wp-block-list,
.artikel__text ol.wp-block-list { margin: 0 0 22px; padding-left: 1.3em; }
.artikel__text ul.wp-block-list { list-style: disc; }
.artikel__text ol.wp-block-list { list-style: decimal; }
.artikel__text .wp-block-list li { margin-bottom: 8px; padding-left: 4px; }
.artikel__text .wp-block-list li::marker { color: #5a5a5a; }
.artikel__text .wp-block-table { margin: 26px 0 30px; overflow-x: auto; }
.artikel__text .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.artikel__text .wp-block-table th,
.artikel__text .wp-block-table td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hell-rahmen); }
.artikel__text .wp-block-table th { font-weight: 700; border-bottom-width: 2px; }
.artikel__text code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86em; background: var(--hell-karte); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }

/* ---------- Knöpfe aus migrierten Beiträgen (Audit 08.10.2026, N4) --------
   Core-Knopf im Fließtext sieht aus wie .btn--primaer (Schwarz auf Gelb,
   15,9:1). Vorher Weiß auf #52a256 aus dem Altbestand (3,15:1, axe-Fund). */
.artikel__text .wp-block-button__link {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-s);
  font-weight: 700; font-size: 17px; line-height: 1.3;
  text-decoration: none;
  background: var(--gelb); color: #000;
  border: 2px solid transparent;
  transition: transform var(--schnell) var(--kurve), background-color var(--schnell);
}
.artikel__text .wp-block-button__link:hover { background: #ffe14f; color: #000; transform: translateY(-2px); }
.artikel__text .wp-block-button__link:focus-visible { outline: 3px solid #000; outline-offset: 3px; }

/* ---------- Video in Beitraegen (QA 08.10.2026, S6) ------------------------
   Eigene Vorschau statt Borlabs-Kachel, Markup aus inc/video.php. 16:9, die
   Hoehe steht vor dem Laden fest, der Tausch gegen das iframe verschiebt
   nichts. Abspielknopf in der CI: Schwarz auf Gelb. */
.artikel__text .video { margin: 28px 0 32px; }
.video__start,
.video__rahmen {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border: 0; border-radius: 12px; overflow: hidden;
  background: #141414;
}
.video__start { color: #000; text-decoration: none; }
.video__bild { width: 100%; height: 100%; object-fit: cover; }
.video__knopf {
  position: absolute; left: 50%; top: 50%;
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--gelb);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--schnell) var(--kurve), background-color var(--schnell);
}
.video__knopf svg { margin-left: 4px; }
.video__start:hover .video__knopf { transform: scale(1.06); background: #ffe14f; }
.video__start:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.video__start:focus-visible .video__knopf { box-shadow: 0 0 0 4px #000, 0 10px 30px rgba(0, 0, 0, 0.35); }
.video__hinweis { margin-top: 10px; font-size: 14px; line-height: 1.5; color: #5a5a5a; }
.video__hinweis a { color: inherit; }
@media (max-width: 520px) {
  .video__knopf { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
}

/* ---------- Suchfeld (404 und Suche) und Blaetterleiste der Suche ----------
   QA 08.10.2026 (S9). Vorher Browser-Standardfeld (153 x 21 px, 1-px-Kante)
   neben einem Knopf in voller Hoehe. Jetzt wie die Formularfelder: 48 px
   hoch, Kante mit 3:1 Kontrast (WCAG 1.4.11), Knopf gleich hoch. */
.suchfeld {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 10px; max-width: 560px; align-items: end;
}
.suchfeld label { grid-column: 1 / -1; font-size: 14px; font-weight: 600; color: var(--hell-text); }
.suchfeld input {
  width: 100%; min-height: 48px; margin: 0; padding: 10px 14px;
  font: inherit; font-size: 16px; color: var(--hell-text);
  background: #fff; border: 1px solid var(--rahmen-ui); border-radius: var(--radius-s);
  -webkit-appearance: none; appearance: none;
}
.suchfeld input:focus-visible { outline: 2px solid var(--gelb-klein); outline-offset: 1px; border-color: #000; }
.suchfeld .btn { min-height: 48px; padding-block: 0; }
@media (max-width: 420px) {
  .suchfeld { grid-template-columns: 1fr; }
  .suchfeld .btn { justify-self: start; }
}
/* Blaetterleiste der Suche: dieselbe Gestalt wie auf /wissen/ (Block
   beitragsraster). Die Regeln stehen dort im Block-CSS, das auf der Suche
   nicht geladen wird, deshalb hier gespiegelt. */
.blaettern--suche {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--hell-rahmen);
}
.blaettern--suche .blaettern__knopf {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 11px 20px; border-radius: 8px;
  border: 2px solid var(--rahmen-ui); background: #fff;
  font-size: 15.5px; font-weight: 700; color: var(--hell-text); text-decoration: none;
  transition: border-color var(--schnell);
}
.blaettern--suche a.blaettern__knopf:hover { border-color: #000; }
.blaettern--suche span.blaettern__knopf { opacity: 0.35; }
.blaettern--suche .blaettern__stand { margin: 0; font-size: 14.5px; color: #5a5a5a; }