/*
 * REVO Magazin: Kästen in Beiträgen (FameHub-Bausteine cb-*) und Autorenzeile.
 * Wird vom mu-plugin revo-magazin.php auf Beitragsseiten geladen (wp-content/mu-plugins/revo-magazin/magazin.css).
 * Farben aus dem Theme „R.Evo“ (--color-accent-primary #8E9FBC, --color-background-alt #F9F6E7).
 */

.single-post .cb-bluf,
.single-post .cb-keypoint,
.single-post .cb-takeaway,
.single-post .cb-autor {
  --mag-akzent: var(--color-accent-primary, #8e9fbc);
  --mag-flaeche: var(--color-background-alt, #f9f6e7);
  --mag-linie: var(--color-background-10, rgba(0, 0, 0, 0.1));
}

/* Kurz gesagt */
.single-post .cb-bluf {
  display: block;
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--mag-flaeche);
  border-left: 4px solid var(--mag-akzent);
  border-radius: 0 10px 10px 0;
}
.single-post .cb-bluf__label,
.single-post .cb-keypoint__label,
.single-post .cb-takeaway__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.single-post .cb-bluf__body > :first-child,
.single-post .cb-keypoint__body > :first-child,
.single-post .cb-takeaway__body > :first-child { margin-top: 0; }
.single-post .cb-bluf__body > :last-child,
.single-post .cb-keypoint__body > :last-child,
.single-post .cb-takeaway__body > :last-child { margin-bottom: 0; }

/* Unser Tipp */
.single-post .cb-keypoint {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  border: 1px dashed var(--mag-akzent);
  border-radius: 10px;
}

/* Das Wichtigste in zwei Sätzen */
.single-post .cb-takeaway {
  position: relative;
  margin: 2.25rem 0;
  padding: 1.3rem 1.5rem;
  border: 1.5px solid var(--mag-akzent);
  border-radius: 12px;
}
.single-post .cb-takeaway::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  height: 5px;
  background: var(--mag-akzent);
  border-radius: 12px 12px 0 0;
}

/* Häufige Fragen */
.single-post details.cb-faq {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-background-10, rgba(0, 0, 0, 0.1));
}
.single-post details.cb-faq:first-of-type { border-top: 1px solid var(--color-background-10, rgba(0, 0, 0, 0.1)); }
.single-post .cb-faq__q {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.single-post .cb-faq__q::-webkit-details-marker { display: none; }
.single-post .cb-faq__q::before { content: "+"; color: var(--color-accent-primary, #8e9fbc); font-weight: 700; }
.single-post details.cb-faq[open] .cb-faq__q::before { content: "\2212"; }
.single-post .cb-faq__a { padding: 0.5rem 0 0.1rem 1.2rem; }

/* Quellen */
.single-post ul.cb-sources { font-size: 0.9em; }
.single-post ul.cb-sources a { word-break: break-word; }

/* Tabellen im Beitrag (Inhaltsbereich des Themes: main.blog-post) */
.single-post .blog-post table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.95em;
}
.single-post .blog-post th,
.single-post .blog-post td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-background-10, rgba(0, 0, 0, 0.1));
}
@media (max-width: 640px) {
  .single-post .blog-post table { display: block; overflow-x: auto; }
}

/* Autorenzeile (mu-plugin revo-magazin.php) */
.single-post .cb-autor {
  margin: 2.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mag-linie);
  font-size: 0.92em;
}
.single-post .cb-autor__name { margin: 0; font-weight: 700; }
.single-post .cb-autor__bio,
.single-post .cb-autor__stand { margin: 0.35rem 0 0; opacity: 0.75; }

/* ==========================================================
 * Boxed-Layout: Kästen, FAQ und Autorenzeile in die Textspalte
 * Ergänzung für wp-content/mu-plugins/revo-magazin/magazin.css
 * Spaltenbreite wie im Theme: .blog-post p { max-width: 50rem }
 * ========================================================== */

.single-post .blog-post {
  --mag-spalte: 50rem;
}
@media (max-width: 48em) {
  .single-post .blog-post { --mag-spalte: calc(100vw - 4rem); }
}

.single-post .blog-post > .cb-bluf,
.single-post .blog-post > .cb-keypoint,
.single-post .blog-post > .cb-takeaway,
.single-post .blog-post > details.cb-faq,
.single-post .blog-post > .cb-autor {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--mag-spalte);
  margin-left: auto;
  margin-right: auto;
}

/* Kurz gesagt */
.single-post .blog-post > .cb-bluf {
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding: 1.4rem 1.75rem;
  background: rgba(255, 255, 255, 0.6);
  border-left: 4px solid var(--mag-akzent);
  border-radius: 0 12px 12px 0;
}
.single-post .cb-bluf__label { color: color-mix(in srgb, var(--mag-akzent) 65%, #000); }
.single-post .cb-bluf__body p { max-width: none; }

/* Häufige Fragen: Karten statt Linien */
.single-post .blog-post > details.cb-faq {
  margin-top: 0;
  margin-bottom: 0.75rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-background-10, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.single-post .blog-post > details.cb-faq:first-of-type { border-top: 1px solid var(--color-background-10, rgba(0, 0, 0, 0.1)); }
.single-post .blog-post > details.cb-faq:hover,
.single-post .blog-post > details.cb-faq[open] {
  border-color: var(--color-accent-primary, #8e9fbc);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
}
.single-post .blog-post > details.cb-faq + h2 { margin-top: 3.5rem; }

.single-post .cb-faq__q {
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.25rem;
  line-height: 1.4;
}
.single-post .cb-faq__q::before {
  flex: 0 0 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--color-accent-primary, #8e9fbc);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
}
.single-post .cb-faq__q:focus-visible {
  outline: 2px solid var(--color-accent-primary, #8e9fbc);
  outline-offset: 2px;
  border-radius: 12px;
}
.single-post .cb-faq__a {
  padding: 0 1.25rem 1.15rem calc(1.25rem + 1.6rem + 0.9rem);
}
.single-post .cb-faq__a p { max-width: none; margin: 0; }
.single-post .cb-faq__a p + p { margin-top: 0.6rem; }

/* Autorenzeile */
.single-post .blog-post > .cb-autor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--mag-linie);
}
.single-post .cb-autor__name {
  margin: 0;
  max-width: none;
  font-weight: 700;
}
.single-post .cb-autor__name::before {
  content: "Ein Beitrag von ";
  font-weight: 400;
  opacity: 0.75;
}
.single-post .cb-autor__stand {
  margin: 0;
  max-width: none;
  font-size: 0.9em;
  opacity: 0.7;
}
.single-post .cb-autor__bio {
  flex-basis: 100%;
  max-width: none;
}