/* ============================================================
   INHALTS-BLÖCKE (Blog / Richtext) — EINE gemeinsame Optik
   ------------------------------------------------------------
   Vorher wurde dieselbe Optik an 4 Stellen parallel gepflegt:
     · .post-content        (Client-Rendering, public/js/main.js)
     · .blog-post .post-body (Server-Rendering, server/lib/seoContent.js)
     · .rich-editor          (Admin: kompakte Richtext-/Übersetzungs-Editoren)
     · .be-area              (Admin: Blog-Editor, admin/js/blog-editor.js)
     · .pb-richtext          (Page-Builder: richtext-Blöcke, blocks-render.js)
   Jetzt steht sie nur noch hier; Referenz ist die Public-Optik aus
   style.css (damit auch bewusst behoben: .post-content img hatte einen
   box-shadow, .blog-post .post-body img nicht — jetzt überall gleich).
   Eingebunden in public/index.html UND admin/index.html (Pfad /css/…).

   Wichtig: Wurzel-Kontexte als KOMMA-LISTEN, nicht :is() — so behält
   jeder Selektor seine eigene Spezifität wie zuvor.
   Editor-Chrome (Auswahl-Rahmen, Cursor, Placeholder, Fokus …) bleibt
   in admin.css / blog-editor.css.
   ============================================================ */

/* ── Token-Brücke ─────────────────────────────────────────────
   Public (style.css) und Admin (admin.css) haben unterschiedliche
   Token-Welten. Die --cb-*-Variablen greifen das jeweils vorhandene
   Token und fallen sonst auf den Public-Wert zurück. Bewusst auf den
   Wurzel-Kontexten definiert (nicht :root), damit nichts kollidiert.
   .pb-section steht mit in der Liste, damit auch die Layout-Regeln des
   Page-Builders unten (Hintergründe, Buttons) die Token erben — die
   pb-btn/pb-bg-*-Elemente liegen außerhalb von .pb-richtext. */
.post-content, .blog-post .post-body, .rich-editor, .be-area, .pb-richtext, .pb-section {
  --cb-accent: var(--accent, #c20f2f);
  /* radius/shadow/border FEST auf die Public-Werte verdrahtet: im Admin
     existieren gleichnamige Token mit anderen Werten (--radius:16px,
     weicherer --shadow, helleres --border-2) — über var()-Ketten sähen
     Bilder/Callouts im Editor anders aus als auf der Website. WYSIWYG
     geht hier vor Token-Dynamik. */
  --cb-radius: 5px;
  --cb-shadow: 0 8px 24px rgba(12, 13, 17, .08);
  --cb-border: #dad8d2;
  --cb-body: var(--body, #3c3f47);
  --cb-muted: var(--muted, #6a6f78);
  --cb-text: var(--text, #14151a);
  --cb-bg-soft: var(--bg-soft, #f5f4f1);
  /* Checkbox-Grund: Admin hat --white (#fff), Public nutzt --bg (#fff);
     Admins graues --bg (#eef0f2) darf hier nicht durchschlagen. */
  --cb-bg: var(--white, var(--bg, #ffffff));
  /* Callout-Farben fest (Public-Werte) — im Admin gäbe es zwar
     --info/--success/--warning, aber die Optik soll identisch sein. */
  --cb-info: #2a6fb0;      --cb-info-soft: #eef4fa;
  --cb-tip:  #1c8a4d;      --cb-tip-soft:  #edf7f0;
  --cb-warn: #b7791f;      --cb-warn-soft: #fbf4e4;
}

/* ── Wurzel-Container (nur Public — die Editor-Container sind Chrome
      und bleiben in admin.css / blog-editor.css; der Page-Builder regelt
      Breite/Abstände über .pb-inner/.pb-pad-* weiter unten) ── */
.post-content {
  max-width: 720px; margin: 0 auto; padding: 64px 0 96px;
  font-size: 16.5px; line-height: 1.85; color: var(--cb-body);
}
.blog-post .post-body {
  max-width: 720px; margin: 0 auto; padding: 40px 0 72px;
  font-size: 16.5px; line-height: 1.85; color: var(--cb-body);
}
/* Der richtext-Block selbst bekommt nur die Text-Grundwerte (Breite und
   Außenabstände macht das Section-Layout) */
.pb-richtext { font-size: 16.5px; line-height: 1.85; color: var(--cb-body); }

/* ── Grundtypografie ── */
.post-content h2, .blog-post .post-body h2, .rich-editor h2, .be-area h2, .pb-richtext h2 {
  font-size: 1.7rem; font-weight: 600; margin: 44px 0 16px; text-transform: none; letter-spacing: 0;
}
.post-content h3, .blog-post .post-body h3, .rich-editor h3, .be-area h3, .pb-richtext h3 {
  font-size: 1.35rem; font-weight: 600; margin: 32px 0 12px;
}
/* Im Builder soll eine Section nicht mit 44px Leerraum beginnen */
.pb-richtext > h2:first-child, .pb-richtext > h3:first-child { margin-top: 0; }
.post-content p, .blog-post .post-body p, .rich-editor p, .be-area p, .pb-richtext p { margin-bottom: 20px; }
.post-content ul, .post-content ol,
.blog-post .post-body ul, .blog-post .post-body ol,
.rich-editor ul, .rich-editor ol,
.be-area ul, .be-area ol,
.pb-richtext ul, .pb-richtext ol { margin: 0 0 20px 24px; }
.post-content li, .blog-post .post-body li, .rich-editor li, .be-area li, .pb-richtext li { margin-bottom: 7px; }
.post-content a, .blog-post .post-body a, .rich-editor a, .be-area a, .pb-richtext a {
  color: var(--cb-accent); font-weight: 500;
}
.post-content img, .blog-post .post-body img, .rich-editor img, .be-area img, .pb-richtext img {
  max-width: 100%; border-radius: var(--cb-radius); margin: 16px 0; box-shadow: var(--cb-shadow);
}
/* Clearfix: umflossene Bilder dürfen nicht aus dem Container ragen */
.post-content::after, .blog-post .post-body::after, .rich-editor::after, .be-area::after, .pb-richtext::after {
  content: ""; display: block; clear: both;
}
/* Blocksatz: ohne Silbentrennung reißen im Deutschen große Lücken auf */
.post-content [style*="justify"], .blog-post .post-body [style*="justify"],
.rich-editor [style*="justify"], .be-area [style*="justify"], .pb-richtext [style*="justify"] {
  -webkit-hyphens: auto; hyphens: auto;
}

/* ── Bilder mit Untertitel (figure/figcaption) ── */
.post-content figure, .blog-post .post-body figure, .rich-editor figure, .be-area figure, .pb-richtext figure {
  max-width: 100%; margin: 28px auto;
}
.post-content figure img, .blog-post .post-body figure img,
.rich-editor figure img, .be-area figure img, .pb-richtext figure img {
  display: block; width: 100%; height: auto; margin: 0;
}
.post-content figcaption, .blog-post .post-body figcaption,
.rich-editor figcaption, .be-area figcaption, .pb-richtext figcaption {
  margin-top: 10px; font-size: 14px; line-height: 1.6;
  color: var(--cb-muted); font-style: italic; text-align: center;
}

/* ── Bild-Galerie: mehrere Bilder nebeneinander, Spaltenzahl kommt
      inline aus dem Editor ── */
.post-content .post-gallery, .blog-post .post-body .post-gallery,
.rich-editor .post-gallery, .be-area .post-gallery, .pb-richtext .post-gallery {
  display: grid; gap: 18px; margin: 28px 0; clear: both; align-items: start; max-width: 100%;
}
.post-content .post-gallery figure, .blog-post .post-body .post-gallery figure,
.rich-editor .post-gallery figure, .be-area .post-gallery figure, .pb-richtext .post-gallery figure {
  width: 100%; margin: 0; float: none;
}
/* Einheitliches Format, damit Bilder und Untertitel im Raster auf einer Linie liegen */
.post-content .post-gallery figure img, .blog-post .post-body .post-gallery figure img,
.rich-editor .post-gallery figure img, .be-area .post-gallery figure img, .pb-richtext .post-gallery figure img {
  aspect-ratio: 4 / 3; object-fit: cover;
}
.post-content .post-gallery figcaption, .blog-post .post-body .post-gallery figcaption,
.rich-editor .post-gallery figcaption, .be-area .post-gallery figcaption, .pb-richtext .post-gallery figcaption {
  margin-top: 8px; font-size: 13.5px;
}

/* Auf dem Handy sind schmale und umflossene Bilder unlesbar → volle Breite, untereinander */
@media (max-width: 640px) {
  .post-content figure, .blog-post .post-body figure, .rich-editor figure, .be-area figure, .pb-richtext figure {
    width: 100% !important; margin: 22px auto !important; float: none !important;
  }
  .post-content .post-gallery, .blog-post .post-body .post-gallery,
  .rich-editor .post-gallery, .be-area .post-gallery, .pb-richtext .post-gallery {
    grid-template-columns: 1fr !important; width: 100% !important; margin: 22px 0 !important;
  }
  .post-content .post-gallery figure, .blog-post .post-body .post-gallery figure,
  .rich-editor .post-gallery figure, .be-area .post-gallery figure, .pb-richtext .post-gallery figure { margin: 0 !important; }
}
/* Tablet: höchstens zwei Spalten, sonst werden die Bilder zu klein */
@media (min-width: 641px) and (max-width: 900px) {
  .post-content .post-gallery, .blog-post .post-body .post-gallery,
  .rich-editor .post-gallery, .be-area .post-gallery, .pb-richtext .post-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Zitat ── */
.post-content blockquote, .blog-post .post-body blockquote,
.rich-editor blockquote, .be-area blockquote, .pb-richtext blockquote {
  border-left: 3px solid var(--cb-accent); background: var(--cb-bg-soft);
  padding: 16px 22px; margin: 0 0 20px;
  color: var(--cb-muted); font-style: italic;
}

/* ── Textmarker ── */
.post-content mark, .blog-post .post-body mark, .rich-editor mark, .be-area mark, .pb-richtext mark {
  background: #ffe9a8; color: inherit; padding: 0 3px; border-radius: 3px;
}

/* ── Trennlinie ── */
.post-content hr, .blog-post .post-body hr, .rich-editor hr, .be-area hr, .pb-richtext hr {
  border: 0; height: 1px; background: var(--cb-border); margin: 40px 0;
}

/* ── Tabellen ── */
.post-content table, .blog-post .post-body table, .rich-editor table, .be-area table, .pb-richtext table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  font-size: 15px; line-height: 1.6;
}
.post-content th, .post-content td,
.blog-post .post-body th, .blog-post .post-body td,
.rich-editor th, .rich-editor td,
.be-area th, .be-area td,
.pb-richtext th, .pb-richtext td {
  border: 1px solid var(--cb-border); padding: 10px 14px;
  text-align: left; vertical-align: top;
}
.post-content th, .blog-post .post-body th, .rich-editor th, .be-area th, .pb-richtext th {
  background: var(--cb-bg-soft); font-weight: 600; color: var(--cb-text);
}
.post-content tbody tr:nth-child(even) td,
.blog-post .post-body tbody tr:nth-child(even) td,
.rich-editor tbody tr:nth-child(even) td,
.be-area tbody tr:nth-child(even) td,
.pb-richtext tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
@media (max-width: 640px) {
  /* Breite Tabellen scrollen seitlich statt das Layout zu sprengen */
  .post-content table, .blog-post .post-body table, .rich-editor table, .be-area table, .pb-richtext table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ── Infoboxen (Callouts) ── */
.post-content .post-callout, .blog-post .post-body .post-callout,
.rich-editor .post-callout, .be-area .post-callout, .pb-richtext .post-callout {
  padding: 16px 20px; margin: 0 0 24px;
  border-left: 4px solid; border-radius: var(--cb-radius);
}
.post-content .post-callout > :last-child, .blog-post .post-body .post-callout > :last-child,
.rich-editor .post-callout > :last-child, .be-area .post-callout > :last-child,
.pb-richtext .post-callout > :last-child { margin-bottom: 0; }
.post-content .post-callout--info, .blog-post .post-body .post-callout--info,
.rich-editor .post-callout--info, .be-area .post-callout--info, .pb-richtext .post-callout--info {
  background: var(--cb-info-soft); border-color: var(--cb-info);
}
.post-content .post-callout--tip, .blog-post .post-body .post-callout--tip,
.rich-editor .post-callout--tip, .be-area .post-callout--tip, .pb-richtext .post-callout--tip {
  background: var(--cb-tip-soft); border-color: var(--cb-tip);
}
.post-content .post-callout--warn, .blog-post .post-body .post-callout--warn,
.rich-editor .post-callout--warn, .be-area .post-callout--warn, .pb-richtext .post-callout--warn {
  background: var(--cb-warn-soft); border-color: var(--cb-warn);
}

/* ── Video-Einbettungen (YouTube/Vimeo, 16:9) ── */
.post-content .post-video, .blog-post .post-body .post-video,
.rich-editor .post-video, .be-area .post-video, .pb-richtext .post-video {
  position: relative; aspect-ratio: 16 / 9; margin: 28px 0;
  border-radius: var(--cb-radius); overflow: hidden;
  background: #000; box-shadow: var(--cb-shadow);
}
.post-content .post-video iframe, .blog-post .post-body .post-video iframe,
.rich-editor .post-video iframe, .be-area .post-video iframe, .pb-richtext .post-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* ── Checklisten (Haken kommen aus dem Editor, data-checked) ── */
.post-content ul.post-checklist, .blog-post .post-body ul.post-checklist,
.rich-editor ul.post-checklist, .be-area ul.post-checklist, .pb-richtext ul.post-checklist {
  list-style: none; margin: 0 0 24px; padding: 0;
}
.post-content ul.post-checklist > li, .blog-post .post-body ul.post-checklist > li,
.rich-editor ul.post-checklist > li, .be-area ul.post-checklist > li,
.pb-richtext ul.post-checklist > li {
  position: relative; padding-left: 32px; margin-bottom: 9px;
}
.post-content ul.post-checklist > li::before,
.blog-post .post-body ul.post-checklist > li::before,
.rich-editor ul.post-checklist > li::before,
.be-area ul.post-checklist > li::before,
.pb-richtext ul.post-checklist > li::before {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 16px; height: 16px; border: 2px solid var(--cb-border);
  border-radius: 4px; background: var(--cb-bg);
}
.post-content ul.post-checklist > li[data-checked="true"]::before,
.blog-post .post-body ul.post-checklist > li[data-checked="true"]::before,
.rich-editor ul.post-checklist > li[data-checked="true"]::before,
.be-area ul.post-checklist > li[data-checked="true"]::before,
.pb-richtext ul.post-checklist > li[data-checked="true"]::before {
  background: var(--cb-accent); border-color: var(--cb-accent);
}
.post-content ul.post-checklist > li[data-checked="true"]::after,
.blog-post .post-body ul.post-checklist > li[data-checked="true"]::after,
.rich-editor ul.post-checklist > li[data-checked="true"]::after,
.be-area ul.post-checklist > li[data-checked="true"]::after,
.pb-richtext ul.post-checklist > li[data-checked="true"]::after {
  content: ""; position: absolute; left: 8px; top: 7px;
  width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ============================================================
   PAGE-BUILDER-LAYOUT (Sections, Spalten, Buttons, Abstände)
   ------------------------------------------------------------
   Markup kommt aus dem geteilten Renderer public/js/blocks-render.js
   (öffentliche Seite UND Admin-Vorschau). Die Inhalts-Typografie der
   richtext-Blöcke liefert der .pb-richtext-Kontext oben — hier stehen
   nur Raster, Hintergründe, Abstände und die Button-Blöcke.
   ============================================================ */
.pb-section { display: block; }

/* Hintergründe je Section */
.pb-bg-none { background: transparent; }
.pb-bg-soft { background: var(--cb-bg-soft, #f5f4f1); }
/* Dunkle Section: fester dunkler Ton (wie das Public-Token --text #14151a),
   helle Schrift — Kontrast #e9eaec auf #14151a ≈ 15:1 (WCAG AA erfüllt) */
.pb-bg-dark { background: #14151a; color: #e9eaec; }
/* Inhalts-Token für dunklen Grund überschreiben (alle ≥ 4.5:1 auf #14151a) */
.pb-bg-dark .pb-richtext {
  --cb-body: #d8dade;
  --cb-text: #ffffff;
  --cb-muted: #aab0b8;
  --cb-border: #3a3d45;
  --cb-bg-soft: #1f2128;
  color: var(--cb-body);
}

/* Vertikales Padding je Stufe — mobil reduziert, damit kurze Seiten
   nicht zu 80 % aus Leerraum bestehen */
.pb-pad-none { padding: 0; }
.pb-pad-sm   { padding: 24px 0; }
.pb-pad-md   { padding: 48px 0; }
.pb-pad-lg   { padding: 80px 0; }
@media (max-width: 767px) {
  .pb-pad-sm { padding: 16px 0; }
  .pb-pad-md { padding: 32px 0; }
  .pb-pad-lg { padding: 48px 0; }
}

/* Inhaltsspalte: schmal für Lesetexte, breit bei mehrspaltigen Sections */
.pb-inner { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.pb-inner--wide { max-width: 1120px; }

/* Spaltenraster; unter 768px stapelt alles einspaltig */
.pb-cols { display: grid; gap: 32px; }
.pb-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pb-cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
  .pb-cols-2, .pb-cols-3 { grid-template-columns: 1fr; }
}

/* Abstand zwischen Blöcken einer Spalte */
.pb-block + .pb-block { margin-top: 24px; }

/* Button-Block: mind. 44px hoch (Touch-Ziel), sichtbarer Fokus-Ring */
.pb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 26px;
  border-radius: var(--cb-radius, 5px);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.pb-btn:focus-visible {
  outline: 3px solid var(--cb-accent, #c20f2f); outline-offset: 3px;
}
.pb-btn--primary {
  background: var(--cb-accent, #c20f2f); color: #fff;
  border: 2px solid transparent;
}
.pb-btn--primary:hover { filter: brightness(1.12); }
.pb-btn--secondary {
  background: transparent; color: var(--cb-accent, #c20f2f);
  border: 2px solid currentColor;
}
/* Auf dunklem Grund wäre das Akzent-Rot zu kontrastarm → helle Variante */
.pb-bg-dark .pb-btn--secondary { color: #fff; }
.pb-bg-dark .pb-btn:focus-visible { outline-color: #fff; }

/* Feste Abstandshalter (spacer-Block) */
.pb-spacer--sm { height: 16px; }
.pb-spacer--md { height: 40px; }
.pb-spacer--lg { height: 80px; }