/* ============================================================
   OELRICHS BLOG – Magazin, Ratgeber, Archive, Suche, 404
   (+ Grundgerüst für Gutenberg-Seiten .oel-page, Social-Strip, Bewertungsfenster)

   2026-10-17: Design-Umbau nach dem verbindlichen Design-System (Maßstab apple.com/de, Grau/Weiß):
   - Token-Werte = Design-System Abschnitt 1 (design.css setzt sie zentral noch einmal, gleiche Werte).
   - Keine Großbuchstaben-Labels, keine Emojis, keine Farbverläufe, keine farbigen Seitenbalken,
     kein transition:all, Hover nur mit Maus (@media (hover:hover)).
   - Tabellen/Buttons/Hinweiskästen liefert design.css (Kern). Die Regeln hier sind bewusst niedrig
     spezifisch (ohne body.oel-ds) und nur Rückfall mit denselben Werten – Kern gewinnt immer.
   - Alte Regeln, die Tabellen abgeschnitten haben (figure overflow:hidden, .oel-page__body .wp-block-table
     overflow:hidden), schwarze Tabellenköpfe und blaue Zitatbalken sind entfernt.
   Rückweg: ~/backups/design-20261017/magazin/assets_blog.css.vor zurückkopieren, danach wp litespeed-purge all.
   2026-10-17 (Nachbesserung „Inhalte“): totes CSS der alten Seitenvorlage entfernt – .oel-page .oel-container (1100 px),
   .oel-page__hero/__title/__dek, .oel-page .oel-cta-band{margin-top:72px} (von page.css überstimmt) und
   .oel-cta-band .oel-btn--primary/--ghost. page.php nutzt jetzt .oel-seite__kopf/.oel-seite-cta (page.css). Geprüft: Theme-grep
   und Live-HTML aller 156 Sitemap-Seiten. Rückweg: ~/backups/design-20261017/nachbesserung/inhalte/blog.css.vor zurückkopieren.
   2026-10-17 (Fehlerrunde nach der Gegenprüfung, v2.1.0): Karte mit Titel-Link über die ganze Fläche und Fußgruppe
   (Urheberzeile + Datum, B77), Querkarte statt verwaister letzter Karte (B19), Eyebrow grau (B80), Chips 44 px (B83),
   Beitragskopf wie die Ratgeber-Seiten (Brotkrume zentriert, lange Titel, Meta ohne verwaisten Punkt, B26/B76),
   FAQ-Akkordeon und Abschlussband wie page.css (B26), Suchliste + Suchfeld (B25/B78).
   Rückweg: ~/backups/design-20261017/fehlerrunde/magazin/assets_blog.css.vor zurückkopieren.
   2026-10-17 (Feinschliff): Querkarte – Bild füllt die Zeile absolut, die Höhe kommt vom Text bzw. der Mindesthöhe
   (Hochformatbilder machen die Karte nicht mehr hoch); grauer Suchpfad einzeilig mit Ellipse statt Umbruch im Slug.
   Rückweg: ~/backups/design-20261017/feinschliff/blog.css.vor zurückkopieren.
   ============================================================ */

:root {
  --oel-bg: #ffffff;
  --oel-bg-soft: #f5f5f7;
  --oel-fill: #e8e8ed;
  --oel-bg-dark: #1d1d1f;
  --oel-ink: #1d1d1f;
  --oel-ink-2: #424245;
  --oel-ink-3: #6e6e73;
  --oel-muted: #86868b;
  --oel-on-dark: #f5f5f7;
  --oel-on-dark-2: #a1a1a6;
  --oel-line: #d2d2d7;
  --oel-line-soft: #e8e8ed;
  --oel-accent: #0066cc;
  --oel-accent-on-dark: #2997ff;
  --oel-focus: #0071e3;
  --oel-btn: #1d1d1f;
  --oel-btn-hover: #000000;
  --oel-radius-s: 10px;
  --oel-radius-card: 18px;
  --oel-radius-l: 28px;
  --oel-radius-pill: 980px;
  --oel-max: 1200px;
  --oel-max-text: 720px;
  --oel-gutter: max(20px, env(safe-area-inset-left));
  --oel-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --oel-ease: cubic-bezier(.25,.1,.25,1);
  --oel-ease-out: cubic-bezier(.2,.8,.2,1);
  --oel-t-1: 150ms;
  --oel-t-2: 300ms;
  --oel-t-3: 600ms;
}

/* ──────────── Scope-Reset für Blog-Bereiche ──────────── */
.oel-blog, .oel-blog *, .oel-blog *::before, .oel-blog *::after { box-sizing: border-box; }
.oel-blog {
  font-family: var(--oel-font);
  color: var(--oel-ink, #1d1d1f);
  background: var(--oel-bg, #fff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.oel-blog a { color: inherit; text-decoration: none; }
.oel-blog img { max-width: 100%; height: auto; display: block; }
.oel-blog :focus-visible { outline: 2px solid var(--oel-focus, #0071e3); outline-offset: 3px; }

/* 2026-10-17: Inhaltsbreite 1200 px + seitlicher Rand nach Design-System */
.oel-container {
  max-width: calc(var(--oel-max, 1200px) + 2 * var(--oel-gutter, 20px));
  margin: 0 auto;
  padding: 0 var(--oel-gutter, 20px);
}
/* 2026-10-17: Hello Elementor begrenzt .site-main ohne Elementor auf 500/600/800/1140 px und gibt 10 px Innenrand.
   Für Magazin, Beiträge, Archive, Suche und 404 übernimmt .oel-container die Breite (1200 px + Rand 20 px). */
body:not([class*=elementor-page-]) .site-main.oel-blog:not(.oel-page) { max-width: none; padding-inline: 0; }

/* ──────────── Breadcrumbs ──────────── */
.oel-breadcrumbs {
  font-size: 13px;
  line-height: 1.4;
  color: var(--oel-ink-3, #6e6e73);
  margin: 24px 0 0;
}
.oel-breadcrumbs a { color: var(--oel-ink-3, #6e6e73); transition: color var(--oel-t-1) var(--oel-ease); }
.oel-breadcrumbs a:hover { color: var(--oel-ink, #1d1d1f); }
.oel-breadcrumbs .sep { margin: 0 8px; color: var(--oel-line, #d2d2d7); }

/* ──────────── Eyebrow (Satzschreibung, grau) ──────────── */
/* 2026-10-17: keine Versalien, kein Blau – Design-System Abschnitt 2 */
.oel-eyebrow {
  display: inline-block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oel-ink-3, #6e6e73);
  margin: 0 0 12px;
}
/* 2026-10-17 (B80): .oel-blog a{color:inherit} hatte das Label über der H1 schwarz gemacht */
.oel-blog a.oel-eyebrow { color: var(--oel-ink-3, #6e6e73); transition: color var(--oel-t-1) var(--oel-ease); }
.oel-blog a.oel-eyebrow:hover { color: var(--oel-ink, #1d1d1f); }

/* ──────────── Magazin-Index / Archive / Suche ──────────── */
.oel-blog-index {
  padding: 0 0 clamp(64px, 9vw, 112px);
  background: var(--oel-bg, #fff);
}
.oel-index-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) 0 clamp(28px, 4vw, 40px);
}
.oel-archive-header { padding-top: clamp(32px, 5vw, 56px); }
.oel-index-title {
  font-size: clamp(40px, 5.6vw, 64px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--oel-ink, #1d1d1f);
  margin: 0;
  overflow-wrap: break-word;
}
.oel-index-lead {
  font-size: 21px;
  line-height: 1.38;
  color: var(--oel-ink-3, #6e6e73);
  max-width: 640px;
  margin: 16px auto 0;
}
.oel-index-lead p { margin: 0; }

/* Kategorien: dezente graue Chips (2026-10-17) */
.oel-cat-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 clamp(40px, 5vw, 56px);
}
.oel-cat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* 2026-10-17 (B83): Tippfläche 44 px, Optik über das Padding */
  padding: 0 18px;
  border-radius: var(--oel-radius-pill, 980px);
  background: var(--oel-bg-soft, #f5f5f7);
  color: var(--oel-ink, #1d1d1f);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--oel-t-1) var(--oel-ease), color var(--oel-t-1) var(--oel-ease);
}
.oel-blog .oel-cat-chip[aria-current="page"] { background: var(--oel-ink, #1d1d1f); color: #fff; }

/* Aufmacher: Text unter dem Bild, keine Schrift auf Fotos, keine Verläufe (2026-10-17) */
.oel-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 48px;
}
.oel-featured .oel-card { border-radius: var(--oel-radius-l, 28px); }
.oel-featured .oel-card--gross { grid-column: 1 / -1; }
.oel-blog .oel-featured .oel-card-title { font-size: clamp(21px, 2vw, 24px); line-height: 1.2; }
.oel-featured .oel-card-body { padding: 24px 28px 28px; }
.oel-featured .oel-card-excerpt { -webkit-line-clamp: 2; }
.oel-featured .oel-card:not(.oel-card--gross) .oel-card-visual { aspect-ratio: 16 / 9; }
.oel-blog .oel-featured .oel-card--gross .oel-card-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
.oel-featured .oel-card--gross .oel-card-excerpt { font-size: 17px; line-height: 1.47; -webkit-line-clamp: 6; }

/* Raster */
.oel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 56px;
}

/* ──────────── Karte ──────────── */
/* 2026-10-17 (Fehlerrunde): Der Link sitzt auf dem Titel und deckt per ::after die ganze Karte ab. Urheberzeile und
   Datum stehen in einer Fußgruppe am unteren Rand (margin-top:auto), das Datum immer zuletzt → in einer Reihe auf einer
   Höhe, auch wenn eine Urheberzeile zweizeilig ist (B77). Urheberlinks liegen über dem Kartenlink (z-index 2). */
.oel-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--oel-radius-card, 18px);
  overflow: hidden;
  background: var(--oel-bg-soft, #f5f5f7);
  isolation: isolate;
  transition: transform var(--oel-t-2) var(--oel-ease), background-color var(--oel-t-2) var(--oel-ease);
}
.oel-blog .oel-card__link { color: inherit; text-decoration: none; }
.oel-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.oel-blog .oel-card__link:focus-visible { outline: none; }
.oel-blog .oel-card:has(.oel-card__link:focus-visible) { outline: 2px solid var(--oel-focus, #0071e3); outline-offset: 3px; }

/* Bildfläche mit festem Seitenverhältnis; <picture> aus oelrichs-fixes muss mitgestylt werden */
.oel-card-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--oel-fill, #e8e8ed);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oel-card-visual > picture { display: block; width: 100%; height: 100%; }
.oel-blog .oel-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--oel-bildpos, 50% 50%);
  transition: transform var(--oel-t-3) var(--oel-ease-out);
}
/* Karte ohne Beitragsbild: ruhige hellgraue Fläche mit feinem Linien-Icon (nimmt später ein Foto auf) */
.oel-card-visual--leer { color: var(--oel-ink-3, #6e6e73); }
.oel-card-visual--leer .oel-icon { width: 24px; height: 24px; display: block; }

.oel-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  padding: 20px 24px 24px;
}
.oel-card-tag {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: var(--oel-ink-3, #6e6e73);
}
.oel-blog .oel-card-title {
  font-size: clamp(19px, 1.6vw, 21px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--oel-ink, #1d1d1f);
  margin: 0;
  overflow-wrap: break-word;
}
.oel-card-excerpt {
  font-size: 15px;
  line-height: 1.47;
  color: var(--oel-ink-2, #424245);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.oel-card-fuss { margin-top: auto; padding-top: 6px; display: flex; flex-direction: column; gap: 6px; }
/* Trennpunkt als ::before am Folgeelement; am Zeilenanfang schneidet overflow:hidden ihn ab (kein verwaister Punkt) */
.oel-card-meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 17px;
  row-gap: 2px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  color: var(--oel-ink-3, #6e6e73);
}
.oel-card-meta > span { position: relative; white-space: nowrap; }
.oel-card-meta > span + span::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}

/* Bildnachweis (Wikimedia, CC-Lizenz) – über dem Kartenlink, damit die Lizenzlinks klickbar bleiben */
.oel-card-credit {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--oel-ink-3, #6e6e73);
}
.oel-blog .oel-card-credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(110,110,115,.45); text-underline-offset: 2px; }
.oel-blog .oel-card-credit a:hover { color: var(--oel-ink, #1d1d1f); }
.oel-card-credit a:last-child { white-space: nowrap; }

@media (hover: hover) {
  .oel-card:hover { transform: translateY(-2px); background: var(--oel-fill, #e8e8ed); }
  .oel-card:hover .oel-card-visual--img img { transform: scale(1.03); }
  .oel-cat-chip:hover { background: var(--oel-fill, #e8e8ed); }
  .oel-blog .oel-cat-chip[aria-current="page"]:hover { background: var(--oel-btn-hover, #000); }
}

/* 2026-10-17 (B19): Bleibt in der letzten Reihe eine einzelne Karte, wird sie zur Querkarte über die ganze Breite
   (Bild links, Text rechts) statt neben zwei leeren Spalten zu stehen. 3 Spalten ab 901 px, 2 Spalten 601–900 px. */
@media (min-width: 901px) {
  .oel-grid > .oel-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 601px) and (max-width: 900px) {
  .oel-grid > .oel-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 901px) {
  .oel-grid > .oel-card:last-child:nth-child(3n+1) .oel-card-visual { aspect-ratio: auto; min-height: 320px; }
  .oel-grid > .oel-card:last-child:nth-child(3n+1) .oel-card-body { justify-content: center; padding: 32px 40px; }
  .oel-grid > .oel-card:last-child:nth-child(3n+1) .oel-card-fuss { margin-top: 8px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .oel-grid > .oel-card:last-child:nth-child(odd) .oel-card-visual { aspect-ratio: auto; min-height: 260px; }
  .oel-grid > .oel-card:last-child:nth-child(odd) .oel-card-body { justify-content: center; padding: 24px 28px; }
  .oel-grid > .oel-card:last-child:nth-child(odd) .oel-card-fuss { margin-top: 8px; }
}
/* 2026-10-17 (Feinschliff): Das Bild der Querkarte bestimmt die Höhe nicht mehr mit. Es liegt absolut in der Bildfläche;
   die Fläche hat ein festes Mindestmaß relativ zur Kartenbreite (Container-Einheit cqw): ab 901 px 3:2 der Bildhälfte
   (33,333cqw, mind. 320 px), 601–900 px 4:3 (37,5cqw, mind. 260 px). Ist der Text höher, wächst die Zeile mit.
   Vorher wurde die Karte mit einem Hochformatbild (z. B. „Lederschuhe pflegen“ in „Weiterlesen“ auf
   /schuhweiten-erklaert/) bei 768 px 546 px hoch, rechts blieb viel leere graue Fläche. */
@media (min-width: 901px) {
  .oel-grid > .oel-card:last-child:nth-child(3n+1) { container-type: inline-size; }
  .oel-grid > .oel-card:last-child:nth-child(3n+1) .oel-card-visual { min-height: max(320px, 33.333cqw); }
  .oel-grid > .oel-card:last-child:nth-child(3n+1) .oel-card-visual > :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .oel-grid > .oel-card:last-child:nth-child(odd) { container-type: inline-size; }
  .oel-grid > .oel-card:last-child:nth-child(odd) .oel-card-visual { min-height: max(260px, 37.5cqw); }
  .oel-grid > .oel-card:last-child:nth-child(odd) .oel-card-visual > :is(picture, img) { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* ──────────── Seitennavigation ──────────── */
/* 2026-10-17: Desktop kurze Zahlenreihe ohne Rahmen, Handy „‹ Zurück  Seite X von Y  Weiter ›“ */
.oel-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
}
.oel-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--oel-radius-pill, 980px);
  font-size: 15px;
  line-height: 1;
  color: var(--oel-ink, #1d1d1f);
  white-space: nowrap;
  transition: background-color var(--oel-t-1) var(--oel-ease);
}
.oel-pagination .page-numbers.dots { min-width: 24px; padding: 0 4px; color: var(--oel-ink-3, #6e6e73); }
.oel-pagination .prev, .oel-pagination .next { background: var(--oel-bg-soft, #f5f5f7); padding: 0 18px; }
.oel-pagination .prev { margin-right: 8px; }
.oel-pagination .next { margin-left: 8px; }
.oel-blog .oel-pagination .current { background: var(--oel-ink, #1d1d1f); color: #fff; font-weight: 600; }
.oel-pagination .oel-pagination__status { display: none; }
@media (hover: hover) {
  .oel-pagination a.page-numbers:hover { background: var(--oel-fill, #e8e8ed); }
}
@media (max-width: 600px) {
  .oel-pagination { flex-wrap: nowrap; gap: 12px; }
  .oel-pagination .page-numbers:not(.prev):not(.next) { display: none; }
  .oel-pagination .prev, .oel-pagination .next { margin: 0; }
  .oel-pagination .oel-pagination__status {
    display: inline;
    font-size: 15px;
    line-height: 1.3;
    color: var(--oel-ink-3, #6e6e73);
    white-space: nowrap;
  }
}

/* ──────────── Einzelbeitrag (single.php) ──────────── */
.oel-article { padding: 0 0 clamp(64px, 9vw, 112px); }

/* Ratgeber-Kopf: große Überschrift, graue Meta-Zeile.
   2026-10-17 (B26): Maße wie der Kopf der Ratgeber-Seiten (page.css .oel-seite__kopf): Brotkrume zentriert 14 px über
   der H1, H1 = --oel-h1, lange Titel (> 34 Zeichen) clamp(36px, 4.4vw, 56px). */
.oel-article__hero {
  background: var(--oel-bg, #fff);
  padding: clamp(28px, 4vw, 52px) 0 clamp(32px, 4vw, 48px);
  text-align: center;
}
.oel-article__hero .oel-breadcrumbs {
  margin: 0 0 clamp(18px, 2.2vw, 26px);
  font-size: 14px;
  line-height: 1.43;
  text-wrap: balance;
}
.oel-article__hero .oel-breadcrumbs .breadcrumb_last { color: var(--oel-ink-2, #424245); }
.oel-article__title {
  font-size: var(--oel-h1, clamp(40px, 5.6vw, 64px));
  font-weight: 700;
  color: var(--oel-ink, #1d1d1f);
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0 auto 20px;
  max-width: 980px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.oel-article__title--lang { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; max-width: 900px; }
.oel-article__dek {
  font-size: clamp(19px, 1.8vw, 21px);
  color: var(--oel-ink-3, #6e6e73);
  line-height: 1.42;
  max-width: var(--oel-max-text, 720px);
  margin: 0 auto 24px;
}
/* 2026-10-17 (B76): Autor · Datum · Lesezeit ohne verwaisten Punkt. Desktop eine Zeile; Handy zwei Zeilen
   (Autor / „Datum · Lesezeit“), die Teile brechen nicht in sich um. */
.oel-article__meta {
  font-size: 14px;
  line-height: 1.43;
  color: var(--oel-ink-3, #6e6e73);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 0;
}
.oel-meta__autor, .oel-meta__rest, .oel-meta__rest > * { white-space: nowrap; }
.oel-meta__rest::before,
.oel-meta__lesezeit::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  vertical-align: middle;
}

/* Beitragsbild mit Bildnachweis darunter (2026-10-17: figure/figcaption, kein negativer Versatz mehr) */
.oel-article__media {
  max-width: calc(var(--oel-max, 1200px) + 2 * var(--oel-gutter, 20px));
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--oel-gutter, 20px);
}
.oel-article__figure {
  margin: 0;
  border-radius: var(--oel-radius-l, 28px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--oel-bg-soft, #f5f5f7);
}
.oel-article__figure > picture { display: block; width: 100%; height: 100%; }
.oel-blog .oel-article__figure img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--oel-bildpos, 50% 50%); }
.oel-article__credit {
  font-style: normal;
  margin: 10px 0 0;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--oel-ink-3, #6e6e73);
  text-align: right;
}
.oel-blog .oel-article__credit a { color: inherit; text-decoration: underline; text-decoration-color: rgba(110,110,115,.45); text-underline-offset: 2px; }
.oel-blog .oel-article__credit a:hover { color: var(--oel-ink, #1d1d1f); }

/* Lesespalte.
   2026-10-17 (Fehlerrunde, B26): gleiche Werte wie die Lesespalte der Ratgeber-Seiten (page.css .oel-seite__inhalt):
   760 px, 18/1,6 (Handy 17/1,55), Absätze 1em, H2 clamp(26–32) mit 48–68 px Abstand, H3 = --oel-h3,
   Textlinks blau ohne Unterstreichung, beim Überfahren unterstrichen (Design-System „Textlink“; Kontrast Link/Text 3,0:1).
   Vorher 720 px, 19/1,68, Links immer unterstrichen. */
.oel-article__body {
  box-sizing: border-box;
  width: min(760px, calc(100% - 2 * var(--oel-gutter, 20px)));
  max-width: none;
  margin: 0 auto;
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--oel-ink, #1d1d1f);
  letter-spacing: -0.003em;
  overflow-wrap: break-word;
}
.oel-article__body > :first-child { margin-top: 0; }
.oel-article__body > * + * { margin-top: 0; }
.oel-article__body p { margin: 0 0 1em; }
.oel-article__body h2 {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin: clamp(48px, 5.4vw, 68px) 0 14px;
  color: var(--oel-ink, #1d1d1f);
  text-wrap: balance;
}
.oel-article__body > h2:first-child { margin-top: 0; }
.oel-article__body h3 {
  font-size: var(--oel-h3, clamp(21px, 2vw, 24px));
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 32px 0 8px;
  color: var(--oel-ink, #1d1d1f);
}
.oel-article__body strong { font-weight: 600; }
.oel-article__body a {
  color: var(--oel-accent, #0066cc);
  text-decoration: none;
  text-underline-offset: 3px;
}
@media (hover: hover) { .oel-article__body a:hover { text-decoration: underline; } }
.oel-article__body a strong { color: inherit; }
.oel-article__body .oel-hinweis { margin: 40px 0; }
.oel-article__body .oel-hinweis + h2 { margin-top: 40px; }
/* Zitat ohne farbigen Seitenbalken (2026-10-17) */
.oel-article__body blockquote {
  border: 0;
  padding: 0;
  margin: 1.6em 0;
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 500;
  color: var(--oel-ink-2, #424245);
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.oel-article__body blockquote p { margin: 0 0 .6em; }
.oel-article__body blockquote cite { display: block; font-size: 14px; font-style: normal; font-weight: 400; color: var(--oel-ink-3, #6e6e73); }
.oel-article__body ul, .oel-article__body ol { padding-left: 1.25em; margin: 0 0 1.1em; }
.oel-article__body li { margin: 0 0 .45em; padding-left: .15em; }
.oel-article__body li::marker { color: var(--oel-ink-3, #6e6e73); }
/* Bilder im Text: Radius, Abstand. Tabellen-Hüllen sind ausgenommen (sonst wird abgeschnitten). */
.oel-article__body img,
.oel-article__body figure:not(.wp-block-table) {
  border-radius: var(--oel-radius-card, 18px);
  overflow: hidden;
  margin: 1.6em 0;
}
.oel-article__body code {
  background: var(--oel-bg-soft, #f5f5f7);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.9em;
}
.oel-article__body hr {
  border: 0;
  height: 1px;
  background: var(--oel-line-soft, #e8e8ed);
  margin: 2.4em 0;
}

/* ──────────── Tabellen in Beiträgen und Gutenberg-Seiten ────────────
   2026-10-17: Das Aussehen liefert design.css (Kern, body.oel-ds …, höhere Spezifität).
   Hier nur ein Rückfall mit denselben Werten aus dem Design-System, damit die Tabellen auch ohne
   design.css nicht schwarz/gerahmt/abgeschnitten sind. Hülle wischbar, kein overflow:hidden. */
.oel-article__body .wp-block-table,
.oel-page__body .wp-block-table {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 1.6em 0;
  border: 0;
  border-radius: 0;
}
.oel-article__body .wp-block-table table,
.oel-page__body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  background: none;
}
.oel-article__body .wp-block-table thead,
.oel-page__body .wp-block-table thead { border: 0; }
.oel-article__body .wp-block-table :is(th, td),
.oel-page__body .wp-block-table :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--oel-line-soft, #e8e8ed);
  padding: 12px 20px 12px 0;
  background: none;
  color: var(--oel-ink, #1d1d1f);
  text-align: left;
  vertical-align: top;
}
.oel-article__body .wp-block-table thead tr:first-child > :is(th, td),
.oel-page__body .wp-block-table thead tr:first-child > :is(th, td) { border-top: 0; }
.oel-article__body .wp-block-table th,
.oel-page__body .wp-block-table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--oel-ink-3, #6e6e73);
  border-bottom-color: var(--oel-line, #d2d2d7);
}
.oel-article__body .wp-block-table tbody tr > :first-child,
.oel-page__body .wp-block-table tbody tr > :first-child { font-weight: 600; }
.oel-article__body .wp-block-table tbody tr:is(:nth-child(odd), :hover) > :is(td, th),
.oel-page__body .wp-block-table tbody tr:is(:nth-child(odd), :hover) > :is(td, th) { background: none; }
.oel-article__body .wp-block-table figcaption,
.oel-page__body .wp-block-table figcaption { font-size: 13px; color: var(--oel-ink-3, #6e6e73); margin-top: 8px; }

/* Ballenumfang-Tabelle (4082): hochkant gesetzt, Zahlen rechtsbündig in gleicher Breite */
.oel-tabelle--weiten table { max-width: 420px; }
.oel-tabelle--weiten td:last-child { font-variant-numeric: tabular-nums; }

/* ──────────── Teilen ──────────── */
.oel-share {
  width: min(760px, calc(100% - 2 * var(--oel-gutter, 20px))); /* 2026-10-17: Breite der Lesespalte */
  margin: 48px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--oel-line-soft, #e8e8ed);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.oel-share__label { font-size: 14px; font-weight: 600; color: var(--oel-ink-2, #424245); }
.oel-share__links { display: flex; gap: 8px; flex-wrap: wrap; }
.oel-share__links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--oel-radius-pill, 980px);
  background: var(--oel-bg-soft, #f5f5f7);
  font-size: 14px;
  color: var(--oel-ink, #1d1d1f);
  transition: background-color var(--oel-t-1) var(--oel-ease);
}
@media (hover: hover) { .oel-share__links a:hover { background: var(--oel-fill, #e8e8ed); } }

/* ──────────── Autorenkarte ──────────── */
.oel-author {
  width: min(760px, calc(100% - 2 * var(--oel-gutter, 20px))); /* 2026-10-17: Breite der Lesespalte */
  margin: 32px auto 0;
  padding: 28px 32px;
  background: var(--oel-bg-soft, #f5f5f7);
  border-radius: var(--oel-radius-card, 18px);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
/* 2026-10-17: Flex-Kind ist das <picture> aus dem WebP-Puffer (oelrichs-fixes) – sonst schrumpft das Foto auf 18 px */
.oel-author > picture { flex: 0 0 64px; width: 64px; height: 64px; display: block; }
.oel-blog .oel-author__img {
  width: 64px;
  height: 64px;
  max-width: none;
  border-radius: 50%;
  flex: 0 0 64px;
  object-fit: cover;
  background: var(--oel-fill, #e8e8ed);
}
.oel-author__avatar {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--oel-fill, #e8e8ed);
  color: var(--oel-ink-2, #424245);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 24px;
}
.oel-author__body { min-width: 0; }
.oel-author__name { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--oel-ink, #1d1d1f); margin: 0 0 6px; }
.oel-author__role { font-weight: 400; color: var(--oel-ink-3, #6e6e73); }
.oel-author__bio { font-size: 15px; color: var(--oel-ink-2, #424245); line-height: 1.5; margin: 0; }
.oel-author__check { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--oel-ink-3, #6e6e73); }
.oel-author__check strong { font-weight: 600; color: var(--oel-ink-2, #424245); }
.oel-author__sep { display: none; }
.oel-author__note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--oel-ink-3, #6e6e73); }
.oel-blog .oel-author__note a { color: inherit; text-decoration: underline; text-decoration-color: rgba(110,110,115,.45); text-underline-offset: 2px; }

/* ──────────── Weiterlesen ──────────── */
.oel-related {
  max-width: calc(var(--oel-max, 1200px) + 2 * var(--oel-gutter, 20px));
  margin: clamp(64px, 8vw, 96px) auto 0;
  padding: 0 var(--oel-gutter, 20px);
}
.oel-related__title {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin: 0 0 24px;
  color: var(--oel-ink, #1d1d1f);
}
.oel-related .oel-grid { margin-bottom: 0; }

/* ──────────── Abschlussband (dunkel) ──────────── */
/* 2026-10-17 (B26): gleicher Baustein und gleiche Maße wie auf den Ratgeber-Seiten (oelrichs_seite_cta_html, page.css
   .oel-seite-cta): H2 = --oel-h2, Text 17–21 px, weiße Pille „Filialen & Öffnungszeiten“ + „Kontakt aufnehmen ›“.
   page.css lädt nur auf Seiten; hier dieselben Werte für Magazin und Beiträge. */
.oel-seite-cta-wrap {
  box-sizing: border-box;
  width: min(var(--oel-max, 1200px), calc(100% - 2 * var(--oel-gutter, 20px)));
  margin: clamp(72px, 9vw, 112px) auto 0;
  padding: 0;
  background: none;
}
.oel-cta-band {
  margin: 0;
  padding: clamp(56px, 7vw, 96px) clamp(24px, 5vw, 72px);
  background: var(--oel-bg-dark, #1d1d1f);
  color: var(--oel-on-dark, #f5f5f7);
  border-radius: var(--oel-radius-l, 28px);
  text-align: center;
}
.oel-blog .oel-cta-band h2 {
  font-size: var(--oel-h2, clamp(30px, 4vw, 48px));
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--oel-on-dark, #f5f5f7);
  margin: 0 0 14px;
  text-wrap: balance;
}
.oel-blog .oel-cta-band p {
  color: var(--oel-on-dark-2, #a1a1a6);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.38;
  max-width: 600px;
  margin: 0 auto 32px;
  text-wrap: pretty;
}
.oel-cta-band__actions { display: flex; gap: 14px 28px; justify-content: center; align-items: center; flex-wrap: wrap; }
/* auf dunklem Grund weiße Pille + Textlink › (eigene Klassen, unabhängig von .oel-btn) */
.oel-blog .oel-cta-band__btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--oel-radius-pill, 980px);
  background: #fff;
  color: var(--oel-ink, #1d1d1f);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.18;
  text-decoration: none;
  transition: background-color var(--oel-t-1) var(--oel-ease), transform var(--oel-t-1) var(--oel-ease);
}
.oel-blog .oel-cta-band__btn:active { transform: scale(.97); }
.oel-blog .oel-cta-band__link { color: var(--oel-accent-on-dark, #2997ff); font-size: 17px; line-height: 1.18; text-decoration: none; }
@media (hover: hover) {
  .oel-blog .oel-cta-band__btn:hover { background: var(--oel-fill, #e8e8ed); }
  .oel-blog .oel-cta-band__link:hover { text-decoration: underline; }
}

/* ──────────── Buttons (Rückfall; design.css/Kern definiert .oel-btn verbindlich) ──────────── */
.oel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--oel-radius-pill, 980px);
  background: var(--oel-btn, #1d1d1f);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.18;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--oel-t-1) var(--oel-ease), transform var(--oel-t-1) var(--oel-ease);
}
.oel-btn:active { transform: scale(.97); }
.oel-btn--sek { background: var(--oel-bg-soft, #f5f5f7); color: var(--oel-ink, #1d1d1f); }
.oel-blog .oel-btn { color: #fff; }
.oel-blog .oel-btn--sek { color: var(--oel-ink, #1d1d1f); }
@media (hover: hover) {
  .oel-btn:hover { background: var(--oel-btn-hover, #000); }
  .oel-btn--sek:hover { background: var(--oel-fill, #e8e8ed); }
}

/* ──────────── Archive / leer ──────────── */
.oel-leer { text-align: center; color: var(--oel-ink-3, #6e6e73); padding: 64px 0; }

/* ──────────── 404 / keine Treffer ──────────── */
.oel-404 {
  padding: clamp(64px, 10vw, 120px) var(--oel-gutter, 20px) clamp(64px, 9vw, 112px);
  text-align: center;
  min-height: 60vh;
}
.oel-404__code {
  font-size: clamp(80px, 14vw, 160px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--oel-fill, #e8e8ed);
  margin: 0 0 16px;
}
.oel-blog .oel-404__title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--oel-ink, #1d1d1f);
  margin: 0 0 12px;
}
.oel-404__lead {
  font-size: 19px;
  color: var(--oel-ink-3, #6e6e73);
  max-width: 540px;
  margin: 0 auto 32px;
  line-height: 1.42;
}
.oel-404__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ──────────── Kommentare (abgeschaltet, Stil bleibt minimal) ──────────── */
.oel-comments { max-width: var(--oel-max-text, 720px); margin: 64px auto 0; padding: 0 var(--oel-gutter, 20px); }
.oel-comments h3 { font-size: clamp(21px, 2vw, 24px); font-weight: 600; margin: 0 0 24px; color: var(--oel-ink, #1d1d1f); }
.oel-comments .comment-list { list-style: none; padding: 0; margin: 0 0 40px; }
.oel-comments .comment { padding: 20px 0; border-bottom: 1px solid var(--oel-line-soft, #e8e8ed); }
.oel-comments .comment-meta { font-size: 13px; color: var(--oel-ink-3, #6e6e73); margin-bottom: 8px; }
.oel-comments .comment-author { font-weight: 600; color: var(--oel-ink, #1d1d1f); }

/* ──────────── Responsive ──────────── */
@media (max-width: 900px) {
  .oel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .oel-featured { gap: 20px; }
  .oel-author { flex-direction: column; gap: 16px; }
}
@media (min-width: 901px) {
  /* Großer Aufmacher: Bild links, Text rechts auf Hellgrau */
  .oel-featured .oel-card--gross { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .oel-featured .oel-card--gross .oel-card-visual { width: 100%; height: 100%; aspect-ratio: auto; min-height: clamp(400px, 34vw, 480px); }
  .oel-featured .oel-card--gross .oel-card-body { justify-content: center; gap: 12px; padding: 48px 48px 56px 44px; }
  .oel-featured .oel-card--gross .oel-card-fuss { margin-top: 4px; }
}
@media (max-width: 600px) {
  .oel-grid, .oel-featured { grid-template-columns: 1fr; gap: 16px; }
  .oel-featured { margin-bottom: 40px; }
  .oel-index-lead { font-size: 19px; }
  .oel-article__media { padding: 0 var(--oel-gutter, 20px); }
  .oel-article__figure { border-radius: var(--oel-radius-card, 18px); aspect-ratio: 4 / 3; }
  .oel-article__credit { text-align: left; }
  .oel-share { flex-direction: column; align-items: flex-start; }
  .oel-author { padding: 24px; }
  .oel-article__meta { flex-direction: column; }
  .oel-meta__rest::before { display: none; }
  /* Kategorien als wischbare Reihe statt drei Zeilen */
  .oel-cat-strip {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--oel-gutter, 20px));
    margin-right: calc(-1 * var(--oel-gutter, 20px));
    padding: 0 var(--oel-gutter, 20px);
  }
  .oel-cat-strip::-webkit-scrollbar { display: none; }
  .oel-cat-chip { flex: 0 0 auto; }
}

/* ──────────── 2026-10-17 (Fehlerrunde): Weiterlesen-Zeile, FAQ-Akkordeon, Suche ──────────── */
/* „Mehr zum Thema“ geht in „Weiterlesen“ auf (B27): Seiten-Ziele als eine Textlink-Zeile unter den Karten */
.oel-related__links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 24px;
  margin: 28px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--oel-line-soft, #e8e8ed);
  font-size: 17px;
  line-height: 1.35;
}
.oel-related__links-titel { flex: 0 0 100%; font-size: 14px; font-weight: 600; color: var(--oel-ink-3, #6e6e73); }
.oel-blog .oel-related__links a { color: var(--oel-accent, #0066cc); text-decoration: none; }
.oel-blog .oel-related__links a::after { content: "\00a0\203A"; }
@media (hover: hover) { .oel-blog .oel-related__links a:hover { text-decoration: underline; } }

/* FAQ in Beiträgen als Akkordeon (B26) – gleiche Maße wie details.oel-faq-item in page.css */
.oel-article__body .oel-faq,
.oel-article__body .schema-faq { margin: 8px 0 32px; padding: 0; border-top: 1px solid var(--oel-line, #d2d2d7); }
.oel-article__body details.oel-faq-item { margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--oel-line-soft, #e8e8ed); }
.oel-article__body details.oel-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 2px;
  list-style: none;
  cursor: pointer;
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.32;
  font-weight: 600;
  color: var(--oel-ink, #1d1d1f);
}
.oel-article__body details.oel-faq-item > summary::-webkit-details-marker { display: none; }
.oel-article__body details.oel-faq-item > summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.oel-article__body details.oel-faq-item[open] > summary::after { transform: rotate(45deg); }
.oel-article__body details.oel-faq-item > summary:focus-visible { outline: 2px solid var(--oel-focus, #0071e3); outline-offset: 2px; border-radius: 6px; }
.oel-article__body .oel-faq-a { padding: 0 40px 22px 2px; font-size: 17px; line-height: 1.5; color: var(--oel-ink-2, #424245); }
.oel-article__body .oel-faq-a p { margin: 0 0 .6em; }
.oel-article__body .oel-faq-a > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .oel-article__body details.oel-faq-item > summary::after { transition: transform var(--oel-t-2, 300ms) var(--oel-ease, ease); }
}

/* Suchfeld (Suche und 404, B78) nach Design-System: 52 px, Radius 10, Fokusring blau, Senden = schwarze Pille */
.oel-suche { display: flex; gap: 12px; width: 100%; max-width: 600px; margin: 28px auto 0; }
.oel-blog .oel-suche__feld {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--oel-line, #d2d2d7);
  border-radius: var(--oel-radius-s, 10px);
  background: #fff;
  color: var(--oel-ink, #1d1d1f);
  font-family: var(--oel-font);
  font-size: 17px;
  line-height: 1.3;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--oel-t-1) var(--oel-ease), box-shadow var(--oel-t-1) var(--oel-ease);
}
.oel-blog .oel-suche__feld::placeholder { color: var(--oel-muted, #86868b); }
.oel-blog .oel-suche__feld:focus { border-color: var(--oel-focus, #0071e3); box-shadow: 0 0 0 4px rgba(0,113,227,.18); }
.oel-blog .oel-suche__knopf { flex: 0 0 auto; min-height: 52px; }
.oel-404 .oel-suche { margin: 0 auto 28px; max-width: 520px; }

/* Suchergebnisse als Liste (B25, B78): Titel, Auszug, grauer Pfad, kleines Bild nur wenn vorhanden */
.oel-such-kopf { padding-bottom: clamp(24px, 3vw, 36px); }
.oel-such-anzahl { margin: 14px 0 0; font-size: 14px; line-height: 1.43; color: var(--oel-ink-3, #6e6e73); }
.oel-suchliste { list-style: none; max-width: 800px; margin: 0 auto clamp(40px, 5vw, 56px); padding: 0; }
.oel-treffer {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--oel-line-soft, #e8e8ed);
}
.oel-treffer:last-child { border-bottom: 1px solid var(--oel-line-soft, #e8e8ed); }
.oel-treffer__text { flex: 1 1 auto; min-width: 0; }
.oel-treffer__art { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--oel-ink-3, #6e6e73); }
.oel-blog .oel-treffer__titel { margin: 0 0 6px; font-size: var(--oel-h3, clamp(21px, 2vw, 24px)); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: var(--oel-ink, #1d1d1f); overflow-wrap: break-word; }
.oel-blog .oel-treffer__link { color: inherit; text-decoration: none; }
.oel-treffer__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.oel-blog .oel-treffer__link:focus-visible { outline: none; }
.oel-blog .oel-treffer:has(.oel-treffer__link:focus-visible) { outline: 2px solid var(--oel-focus, #0071e3); outline-offset: 4px; border-radius: 6px; }
.oel-treffer__auszug {
  margin: 0 0 6px;
  font-size: 17px;
  line-height: 1.47;
  color: var(--oel-ink-2, #424245);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 2026-10-17 (Feinschliff): einzeilig mit Ellipse – auf dem Handy brach der Pfad sonst mitten im Slug um („rieker-“ / „norddeich“) */
.oel-treffer__pfad { margin: 0; font-size: 14px; line-height: 1.43; color: var(--oel-ink-3, #6e6e73); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oel-treffer__bild {
  flex: 0 0 160px;
  width: 160px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--oel-radius-s, 10px);
  background: var(--oel-fill, #e8e8ed);
}
.oel-treffer__bild > picture { display: block; width: 100%; height: 100%; }
.oel-blog .oel-treffer__bild img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--oel-bildpos, 50% 50%); }
@media (hover: hover) { .oel-blog .oel-treffer:hover .oel-treffer__link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } }
.oel-suchseite .oel-pagination { margin-top: 8px; }
.oel-404.oel-404--suche { min-height: 0; padding-top: clamp(24px, 4vw, 48px); }
@media (max-width: 734px) {
  .oel-article__hero .oel-breadcrumbs { font-size: 13px; }
  .oel-article__body { font-size: 17px; line-height: 1.55; }
  .oel-seite-cta-wrap .oel-cta-band { border-radius: var(--oel-radius-card, 18px); padding: 48px 24px; }
  .oel-cta-band__actions { flex-direction: column; gap: 18px; }
}
@media (max-width: 600px) {
  .oel-suche { gap: 8px; }
  .oel-blog .oel-suche__knopf { padding-inline: 18px; }
  .oel-treffer { gap: 16px; padding: 20px 0; }
  .oel-treffer__bild { flex-basis: 88px; width: 88px; aspect-ratio: 1 / 1; }
  .oel-blog .oel-treffer__titel { font-size: 19px; line-height: 1.24; }
  .oel-treffer__auszug { font-size: 15px; }
  .oel-article__body .oel-faq-a { padding-right: 8px; font-size: 16px; }
}

/* ──────────── Bewegung (Design-System Abschnitt 3) ──────────── */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Bild-Reveal: Magazinbild zieht sich beim Erscheinen von 1,04 auf 1 zusammen (nur Karten außerhalb des
       ersten Bildschirms, erkennbar an .oel-reveal). Eigene Eigenschaft „scale“, damit der Hover-Zoom (transform) bleibt. */
    .oel-reveal .oel-card-visual--img img {
      animation: oel-bild-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    @keyframes oel-bild-reveal { from { scale: 1.04; } to { scale: 1; } }
  }
  @supports (animation-timeline: scroll()) {
    /* Feine Lesefortschritts-Linie oben im Einzelbeitrag (reines CSS) */
    .oel-article::before {
      content: "";
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--oel-ink-3, #6e6e73);
      transform-origin: 0 50%;
      transform: scaleX(0);
      z-index: 100001;
      pointer-events: none;
      animation: oel-lesefortschritt linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes oel-lesefortschritt { to { transform: scaleX(1); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .oel-card, .oel-card-visual img, .oel-cat-chip, .oel-btn, .oel-cta-band__btn { transition: none; }
}

/* ============================================================
   OELRICHS PAGE – Grundgerüst für Gutenberg-Seiten (page.php, Paket Seitentypen)
   2026-10-17: nur Tabellen (oben), Zitat, Bild-Hüllen, H2-Größe und Buttons angepasst.
   ============================================================ */

.oel-page { padding: 24px 0 80px; }

.oel-page__body {
  font-family: var(--oel-font);
  font-size: 18px;
  line-height: 1.68;
  color: var(--oel-ink, #1d1d1f);
  letter-spacing: -0.003em;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px;
}
.oel-page__body > * + * { margin-top: 1.1em; }
.oel-page__body p { margin: 0 0 1.1em; }
.oel-page__body strong { font-weight: 600; color: var(--oel-ink, #1d1d1f); }
.oel-page__body a {
  color: var(--oel-accent, #0066cc);
  text-decoration: underline;
  text-decoration-color: rgba(0,102,204,0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--oel-t-1) var(--oel-ease);
}
.oel-page__body a:hover { text-decoration-color: var(--oel-accent, #0066cc); }

.oel-page__body h1,
.oel-page__body h2 {
  font-size: clamp(26px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.16;
  margin: 2em 0 0.55em;
  color: var(--oel-ink, #1d1d1f);
}
.oel-page__body h3 {
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin: 1.6em 0 0.45em;
  color: var(--oel-ink, #1d1d1f);
}
.oel-page__body h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 1.4em 0 0.4em;
  color: var(--oel-ink, #1d1d1f);
}

.oel-page__body ul,
.oel-page__body ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.oel-page__body li { margin-bottom: 0.4em; }

/* Zitat ohne farbigen Seitenbalken (2026-10-17) */
.oel-page__body blockquote {
  border: 0;
  padding: 0;
  margin: 1.6em 0;
  font-size: clamp(21px, 2vw, 24px);
  font-weight: 500;
  color: var(--oel-ink-2, #424245);
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.oel-page__body hr {
  border: 0;
  height: 1px;
  background: var(--oel-line-soft, #e8e8ed);
  margin: 2.4em 0;
}

.oel-page__body code {
  background: var(--oel-bg-soft, #f5f5f7);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.9em;
}

/* ── Gutenberg-Block-Overrides ── */
.oel-page__body .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 24px;
  margin: 1.8em 0;
}
.oel-page__body .wp-block-columns.is-style-two { --cols: 2; }
.oel-page__body .wp-block-columns.is-style-three { --cols: 3; }
.oel-page__body .wp-block-column {
  background: var(--oel-bg-soft, #f5f5f7);
  padding: 24px 26px;
  border-radius: var(--oel-radius-card, 18px);
  margin: 0 !important;
}
.oel-page__body .wp-block-column > :first-child { margin-top: 0; }
.oel-page__body .wp-block-column > :last-child { margin-bottom: 0; }
.oel-page__body .wp-block-column h3,
.oel-page__body .wp-block-column h4 {
  margin-top: 0;
  margin-bottom: 0.3em;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.oel-page__body .wp-block-column p { margin-bottom: 0; font-size: 16px; color: var(--oel-ink-2, #424245); line-height: 1.6; }

/* Buttons im Design-System (Primär schwarz, Hover dunkler; Umriss = Sekundär hellgrau) */
.oel-page__body .wp-block-button { margin: 0.4em 0; }
.oel-page__body .wp-block-button__link {
  display: inline-block;
  background: var(--oel-btn, #1d1d1f);
  color: #fff;
  padding: 12px 22px;
  border-radius: var(--oel-radius-pill, 980px);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.18;
  text-decoration: none;
  border: none;
  transition: background-color var(--oel-t-1) var(--oel-ease);
}
.oel-page__body .wp-block-button__link:hover { background: var(--oel-btn-hover, #000); color: #fff; text-decoration: none; }
.oel-page__body .wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--oel-bg-soft, #f5f5f7);
  color: var(--oel-ink, #1d1d1f);
  border: 0;
}
.oel-page__body .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--oel-fill, #e8e8ed);
  color: var(--oel-ink, #1d1d1f);
}

/* Bilder (Tabellen-Hüllen ausgenommen – sonst abgeschnitten, 2026-10-17) */
.oel-page__body .wp-block-image,
.oel-page__body figure:not(.wp-block-table) {
  margin: 1.6em 0;
  border-radius: var(--oel-radius-card, 18px);
  overflow: hidden;
}
.oel-page__body .wp-block-image img,
.oel-page__body figure:not(.wp-block-table) img {
  display: block;
  width: 100%;
  height: auto;
}

.oel-page__body .wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--oel-line-soft, #e8e8ed);
  margin: 2.4em 0;
  max-width: none;
}

/* Faktenkasten (Gutenberg-Gruppe mit Hintergrund) – Hinweiskasten-Stil */
.oel-page__body .wp-block-group.has-background,
.oel-page__body .wp-block-group.is-style-card,
.oel-page__body .oel-infobox {
  background: var(--oel-bg-soft, #f5f5f7);
  padding: 24px 28px;
  border-radius: var(--oel-radius-card, 18px);
  margin: 1.8em 0;
}
.oel-page__body .wp-block-group.has-background > :first-child { margin-top: 0; }
.oel-page__body .wp-block-group.has-background > :last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 720px) {
  .oel-page__body { font-size: 17px; padding: 0 20px; }
  .oel-page__body .wp-block-columns { grid-template-columns: 1fr !important; gap: 16px; }
}

/* ============================================================
   SOCIAL-STRIP – „Folgen Sie uns“ vor dem Footer (unverändert bis auf Übergänge)
   ============================================================ */
.oel-social-strip {
  background: var(--oel-bg, #fff);
  border-top: 1px solid var(--oel-line, #d2d2d7);
  padding: 36px 24px 44px;
  font-family: var(--oel-font);
  -webkit-font-smoothing: antialiased;
}
.oel-social-strip__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.oel-social-strip__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--oel-ink-2, #424245);
  letter-spacing: -0.005em;
  text-transform: none;
}
.oel-social-strip__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.oel-social-strip__links li { margin: 0; }
.oel-social-strip__links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  border-radius: var(--oel-radius-pill, 980px);
  border: 1px solid var(--oel-line, #d2d2d7);
  font-size: 14px;
  font-weight: 500;
  color: var(--oel-ink, #1d1d1f);
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
  background: var(--oel-bg, #fff);
}
.oel-social-strip__links a:hover {
  background: var(--oel-ink, #1d1d1f);
  color: #fff;
  border-color: var(--oel-ink, #1d1d1f);
}
.oel-social-strip__icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oel-social-strip__icon svg { width: 18px; height: 18px; display: block; }
.oel-social-strip__name { letter-spacing: -0.005em; }
@media (max-width: 600px) {
  .oel-social-strip__inner { flex-direction: column; align-items: flex-start; }
  .oel-social-strip__links { width: 100%; }
}
/* Hard-Override damit globale img/svg-Regeln den Social-Strip nicht aufblasen */
.oel-social-strip svg,
.oel-social-strip__icon svg,
.oel-social-strip__links a svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  flex: 0 0 18px !important;
}
.oel-social-strip__links { list-style: none !important; padding: 0 !important; }
.oel-social-strip__links li::before { content: none !important; }

/* ============================================================
   REVIEW-MODAL – Filiale auswählen (unverändert)
   ============================================================ */
.oel-review-modal {
  position: fixed;
  inset: 0;
  background: rgba(29,29,31,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 20px;
  font-family: var(--oel-font);
  -webkit-font-smoothing: antialiased;
}
.oel-review-modal.is-open { display: flex; }
.oel-review-modal__card {
  background: #fff;
  border-radius: 24px;
  padding: 36px 28px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,0.32);
  position: relative;
}
.oel-review-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border: 0;
  background: #f5f5f7;
  border-radius: 50%;
  font-size: 18px;
  color: #424245;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s;
}
.oel-review-modal__close:hover { background: #e5e5e7; }
.oel-review-modal__title {
  font-size: 22px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  text-align: center;
}
.oel-review-modal__lead {
  font-size: 15px;
  color: #424245;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.5;
}
.oel-review-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0; margin: 0;
}
.oel-review-modal__list li { margin: 0; }
.oel-review-modal__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f5f5f7;
  border-radius: 14px;
  text-decoration: none;
  color: #1d1d1f;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
}
.oel-review-modal__list a:hover {
  background: #1d1d1f;
  color: #fff;
  transform: translateX(2px);
}
.oel-review-modal__list .label { display: flex; flex-direction: column; gap: 2px; }
.oel-review-modal__list .label small {
  font-size: 12px;
  color: #86868b;
  font-weight: 400;
  letter-spacing: 0;
}
.oel-review-modal__list a:hover .label small { color: rgba(255,255,255,0.7); }
.oel-review-modal__list .arrow { font-size: 18px; opacity: 0.5; }

/* ============================================================
   TOUCH – keine Hover-Transforms auf Touch-Geräten, dezentes Antippen
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  .oel-card:active { transform: scale(.98); transition: transform var(--oel-t-1) var(--oel-ease); }
  a, button { -webkit-tap-highlight-color: rgba(29,29,31,0.06); }
  .oel-card__link { -webkit-touch-callout: none; }
}
.oel-btn,
.oel-card__link,
.oel-cat-chip,
.oel-pagination a,
.oel-share__links a,
.oel-cta-band__btn,
.oel-review-modal__list a { touch-action: manipulation; }