/* ==========================================================================
   ct-* — Content-Tool (Scalium) im fonds-news-Design
   --------------------------------------------------------------------------
   Deckt das komplette ct-Klassenset ab (Stand AMON-CSS 1.0.0): Header, Takeaways,
   TOC, Sections, Text, Listen, Kacheln, Prozess, Tabelle, Bild, FAQ, CTA, Highlight,
   Typeform sowie die Module Kernantwort (ct-answer), Vergleich (ct-compare),
   Case-Study (ct-case), Testimonial (ct-quote) und Zahlen-Highlight (ct-metric).
   Geladen auf Einzelbeiträgen NACH theme.css (inc/setup.php).

   Grundregeln:
   - ct-Blöcke füllen die Textspalte (.beitragstext, 42rem) voll aus —
     kein eigenes max-width/padding des Tools (sonst schmale Spalte).
   - Titel, Autor:in und Inhaltsverzeichnis kommen vom Theme:
     ct-header / ct-author-box / ct-toc-wrap werden serverseitig entfernt
     (inc/content-tool.php) und hier zusätzlich ausgeblendet.
   - Listen behalten sichtbare Aufzählungszeichen (Tailwind-Reset!).
   ========================================================================== */

.beitragstext {
  --ct-primary: #0d7d71;       /* teal-600 */
  --ct-primary-dark: #0b655c;  /* teal-700 */
  --ct-light: #f1fdf8;         /* mint-50  */
  --ct-mint: #DDFBEF;          /* mint-100 */
  --ct-mint-line: #c1f3e0;     /* mint-200 */
  --ct-ocean: #2F4858;         /* ocean-800 */
  --ct-heading: #122029;       /* ocean-950 */
  --ct-strong: #1b303a;        /* ocean-900 */
  --ct-text: #3a5666;          /* ocean-700 */
  --ct-muted: #688492;         /* ocean-500 */
  --ct-border: #e0ebe9;        /* line-200 */
  --ct-radius: 16px;
}

/* ---------- Basis: volle Spaltenbreite, kein Überlauf ---------- */
.beitragstext [class*="ct-"] { box-sizing: border-box; max-width: 100%; }
.beitragstext .ct-inner { max-width: none; margin: 0; padding: 0; font: inherit; color: inherit; }
.beitragstext > [class*="ct-"], .beitragstext .ct-inner > [class*="ct-"] { width: 100%; }
.beitragstext [class*="ct-"] img { max-width: 100%; height: auto; }
.beitragstext .ct-inner > br, .beitragstext .ct-section > br { display: none; }

/* Vom Theme ersetzt (Fallback, falls das Markup nicht entfernt werden konnte) */
.beitragstext .ct-header,
.beitragstext .ct-header-image-placeholder,
.beitragstext .ct-toc-wrap { display: none !important; }

/* ---------- Sections & Text ---------- */
.beitragstext .ct-section { margin-top: 3rem; scroll-margin-top: 6rem; }
.beitragstext .ct-inner > .ct-section:first-child,
.beitragstext .ct-takeaways-wrap + .ct-section,
.beitragstext .ct-open-questions-wrap + .ct-section { margin-top: 2.5rem; }
.beitragstext h2.ct-h2 { margin-top: 0; }              /* Abstand kommt von .ct-section */
.beitragstext .ct-text { margin-top: 1.4rem; text-align: left; }
.beitragstext .ct-h2 + .ct-text { margin-top: 1.1rem; }
.beitragstext .ct-section > .ct-text:first-child { margin-top: 0; }
.beitragstext .ct-text a, .beitragstext .ct-bullet-item a, .beitragstext .ct-faq-a a,
.beitragstext .ct-takeaway a, .beitragstext .ct-tile-desc a, .beitragstext .ct-step-desc a,
.beitragstext .ct-table a { color: var(--ct-primary-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Aufzählungen (sichtbar!) ---------- */
.beitragstext .ct-bullet-list { margin-top: 1.1rem; padding-left: 0; list-style: none; }
.beitragstext .ct-bullet-item { position: relative; padding-left: 1.5rem; margin-top: .6rem; }
.beitragstext .ct-bullet-item::before { content: ''; position: absolute; left: .1rem; top: .62rem; width: 7px; height: 7px; border-radius: 9999px; background: var(--ct-primary); }
.beitragstext ol.ct-bullet-list { list-style: decimal; padding-left: 1.7rem; }
.beitragstext ol.ct-bullet-list > .ct-bullet-item { padding-left: .35rem; }
.beitragstext ol.ct-bullet-list > .ct-bullet-item::before { display: none; }
.beitragstext ol.ct-bullet-list > .ct-bullet-item::marker { color: var(--ct-primary); font-weight: 600; }

/* ---------- Kernaussagen (Takeaways) — wie der Antwort-Kasten im Design ---------- */
.beitragstext .ct-takeaways-wrap { margin: 2rem 0; padding: 1.5rem 1.75rem; border: 1px solid #a2ddd4; border-radius: var(--ct-radius); background: var(--ct-light); }
.beitragstext .ct-takeaways-label,
.beitragstext .ct-open-questions-label { font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--ct-primary); }
.beitragstext .ct-takeaways { margin-top: .9rem; padding: 0; list-style: none; }
.beitragstext .ct-takeaway { position: relative; padding-left: 1.75rem; margin-top: .7rem; font-size: .98rem; line-height: 1.65; color: var(--ct-strong); }
.beitragstext .ct-takeaway:first-child { margin-top: 0; }
.beitragstext .ct-takeaway::before { content: ''; position: absolute; left: 0; top: .3rem; width: 1.1rem; height: 1.1rem; border-radius: 9999px; background: var(--ct-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b655c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center / .62rem no-repeat; }

/* ---------- Offene Fragen ("Wonach Sie suchen") ---------- */
.beitragstext .ct-open-questions-wrap { margin: 2rem 0; padding: 1.5rem 1.75rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: #fff; }
.beitragstext .ct-open-questions { margin-top: .9rem; padding: 0; list-style: none; }
.beitragstext .ct-open-q { position: relative; padding-left: 1.2rem; margin-top: .5rem; font-size: .96rem; line-height: 1.55; color: var(--ct-strong); }
.beitragstext .ct-open-q::before { content: '›'; position: absolute; left: .1rem; top: -.05rem; color: var(--ct-primary); font-weight: 700; }

/* ---------- Kacheln ---------- */
.beitragstext .ct-tiles-wrap { margin: 2rem 0; }
.beitragstext .ct-tiles-intro { margin-bottom: 1.1rem; }
.beitragstext .ct-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.beitragstext .ct-tile { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: #fff; box-shadow: 0 1px 2px rgba(18,32,41,.04), 0 12px 30px -18px rgba(18,32,41,.18); counter-increment: ct-tile; }
.beitragstext .ct-tiles { counter-reset: ct-tile; }
.beitragstext .ct-tile::before { content: counter(ct-tile); display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .8rem; border-radius: 9999px; background: var(--ct-mint); color: var(--ct-primary-dark); font-size: .85rem; font-weight: 700; }
.beitragstext .ct-tile-headline { font-family: 'Space Grotesk','Inter',sans-serif; letter-spacing: -0.02em; font-size: 1.05rem; font-weight: 600; line-height: 1.3; color: var(--ct-heading); }
.beitragstext .ct-tile-desc { margin-top: .4rem; font-size: .9rem; line-height: 1.6; color: #4d6b7b; }

/* ---------- Prozessschritte ---------- */
.beitragstext .ct-process { margin: 2rem 0; padding: 0; list-style: none; counter-reset: ct-step; }
.beitragstext .ct-process-step { position: relative; display: grid; grid-template-columns: 2rem 1fr; column-gap: 1rem; margin-top: 1.25rem; counter-increment: ct-step; }
.beitragstext .ct-process-step:first-child { margin-top: 0; }
.beitragstext .ct-process-step::before { content: counter(ct-step); grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9999px; background: var(--ct-ocean); color: #fff; font-size: .875rem; font-weight: 600; }
.beitragstext .ct-step-headline { grid-column: 2; font-weight: 600; color: var(--ct-heading); line-height: 1.4; padding-top: .2rem; }
.beitragstext .ct-step-desc { grid-column: 2; margin-top: .25rem; font-size: .95rem; line-height: 1.65; color: #4d6b7b; }

/* ---------- Tabelle (scrollt horizontal in ihrem Rahmen, nie die Seite) ---------- */
.beitragstext .ct-table-wrap { margin: 2rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); }
.beitragstext .ct-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .95rem; }
.beitragstext .ct-table th, .beitragstext .ct-table td { text-align: left; vertical-align: top; padding: .8rem 1rem; border-bottom: 1px solid var(--ct-border); }
.beitragstext .ct-table thead th { background: var(--ct-light); color: #4d6b7b; font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--ct-mint-line); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.beitragstext .ct-table tbody tr:last-child td { border-bottom: 0; }
.beitragstext .ct-table tbody tr:hover { background: var(--ct-light); }
.beitragstext .ct-table tbody td:first-child { font-weight: 600; color: var(--ct-heading); }

/* ---------- Bild ---------- */
.beitragstext .ct-bild { margin: 2rem 0; }
.beitragstext .ct-bild-img { display: block; width: 100%; border-radius: var(--ct-radius); }
.beitragstext .ct-bild-unterschrift { margin-top: .6rem !important; font-size: .78rem !important; line-height: 1.55 !important; color: var(--ct-muted) !important; }
.beitragstext .ct-bild-unterschrift strong { color: #4d6b7b; }
.beitragstext .ct-bild-quelle { color: #8ca4b0 !important; }

/* ---------- Highlight & CTA ---------- */
.beitragstext .ct-highlight-box { margin: 2rem 0; padding: 1.1rem 1.4rem; border-left: 3px solid var(--ct-primary); border-radius: 0 12px 12px 0; background: var(--ct-light); color: var(--ct-strong); line-height: 1.7; }
.beitragstext a.ct-cta-button { display: inline-flex; align-items: center; margin-top: 1.4rem; padding: .75rem 1.5rem; border-radius: 9999px; background: var(--ct-primary); color: #fff !important; font-size: .9rem; font-weight: 600; text-decoration: none !important; transition: background .2s; }
.beitragstext a.ct-cta-button:hover { background: var(--ct-primary-dark); }

/* ---------- FAQ (wie .faq im Design; funktioniert mit <details> und statischen <p>) ---------- */
.beitragstext .ct-faq-wrap { margin-top: 3rem; scroll-margin-top: 6rem; }
.beitragstext .ct-faq { margin-top: 1.2rem; border-top: 1px solid var(--ct-border); }
.beitragstext .ct-faq-item { border-bottom: 1px solid var(--ct-border); }
.beitragstext .ct-faq-q,
.beitragstext .ct-faq-item > summary { position: relative; margin: 0; padding: 1.1rem 2rem 0 0; font-weight: 600; color: var(--ct-strong); line-height: 1.45; list-style: none; }
.beitragstext .ct-faq-item > summary { padding-bottom: 1.1rem; cursor: pointer; }
.beitragstext .ct-faq-item > summary::-webkit-details-marker { display: none; }
.beitragstext .ct-faq-item > summary::after { content: '+'; position: absolute; right: .2rem; top: .8rem; font-size: 1.5rem; line-height: 1; color: var(--ct-primary); }
.beitragstext .ct-faq-item[open] > summary::after { content: '–'; }
.beitragstext .ct-faq-a { margin: .5rem 0 1.1rem; color: var(--ct-text); line-height: 1.7; text-align: left; }
.beitragstext .ct-faq-item > summary + .ct-faq-a { margin-top: 0; }

/* ---------- Typeform-Einbettung ---------- */
.beitragstext .ct-typeform { margin: 2rem 0; height: 520px; overflow: hidden; border-radius: var(--ct-radius); }
.beitragstext .ct-typeform iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Kernantwort ("Kurz gesagt") · .ct-answer ---------- */
.beitragstext .ct-answer { margin: 1.5rem 0 2rem; padding: 1.4rem 1.6rem; border: 1px solid #a2ddd4; border-radius: var(--ct-radius); background: var(--ct-light); }
.beitragstext .ct-answer-label { display: flex; align-items: center; gap: .55rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--ct-primary); }
.beitragstext .ct-answer-label::before { content: 'i'; display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--ct-mint); color: var(--ct-primary-dark); font: italic 700 .8rem/1 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; }
.beitragstext .ct-answer-text { margin-top: .6rem; font-size: 1.02rem; line-height: 1.7; color: var(--ct-strong); }

/* ---------- Vergleich (zwei gleichwertige Seiten) · .ct-compare ---------- */
.beitragstext .ct-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin: 2rem 0 0; }
.beitragstext .ct-compare-side { padding: 1.25rem 1.35rem; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: #fff; box-shadow: 0 1px 2px rgba(18,32,41,.04), 0 12px 30px -18px rgba(18,32,41,.18); }
.beitragstext .ct-compare-title { padding-bottom: .7rem; border-bottom: 1px solid var(--ct-border); font-family: 'Space Grotesk','Inter',sans-serif; letter-spacing: -0.02em; font-size: 1.08rem; font-weight: 600; color: var(--ct-heading); }
.beitragstext .ct-compare-list { margin-top: .9rem; padding: 0; list-style: none; }
.beitragstext .ct-compare-list li { position: relative; padding-left: 1.2rem; margin-top: .55rem; font-size: .95rem; line-height: 1.6; color: var(--ct-text); }
.beitragstext .ct-compare-list li::before { content: '›'; position: absolute; left: .1rem; top: -.05rem; color: var(--ct-primary); font-weight: 700; }
.beitragstext .ct-compare-note { margin-top: .9rem; font-size: .85rem; line-height: 1.6; color: var(--ct-muted); }

/* ---------- Case-Study ("Aus der Praxis") · .ct-case ---------- */
.beitragstext .ct-case { margin: 2rem 0 0; overflow: hidden; border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: #fff; }
.beitragstext .ct-case-head { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--ct-border); background: var(--ct-light); }
.beitragstext .ct-case-label { display: block; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .72rem; color: var(--ct-primary); }
.beitragstext .ct-case-title { margin-top: .35rem; font-family: 'Space Grotesk','Inter',sans-serif; letter-spacing: -0.02em; font-size: 1.12rem; font-weight: 600; line-height: 1.35; color: var(--ct-heading); }
.beitragstext .ct-case-body { padding: 1.25rem 1.5rem .25rem; }
.beitragstext .ct-case-step { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; margin: 0 0 1rem; }
.beitragstext .ct-case-step dt { padding-top: .2rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: .7rem; color: #4d6b7b; }
.beitragstext .ct-case-step dd { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--ct-text); }
.beitragstext .ct-case-numbers { display: flex; flex-wrap: wrap; gap: 1px; border-top: 1px solid var(--ct-border); background: var(--ct-border); }
.beitragstext .ct-case-number { flex: 1 1 9rem; padding: 1rem; background: #fff; text-align: center; }
.beitragstext .ct-case-number b { display: block; font-family: 'Space Grotesk','Inter',sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--ct-primary); font-variant-numeric: tabular-nums lining-nums; }
.beitragstext .ct-case-number span { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.45; color: var(--ct-muted); }

/* ---------- Testimonial · .ct-quote ---------- */
.beitragstext .ct-quote { display: flex; align-items: center; gap: 1.1rem; margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--ct-primary); border-radius: 0 var(--ct-radius) var(--ct-radius) 0; background: var(--ct-light); }
.beitragstext .ct-quote-photo { flex: none; width: 4rem; height: 4rem; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 2px var(--ct-mint-line); }
.beitragstext .ct-quote-body { min-width: 0; }
.beitragstext .ct-quote-text { font-size: 1.06rem; line-height: 1.6; color: var(--ct-strong); }
.beitragstext .ct-quote-name { display: block; margin-top: .6rem; font-size: .88rem; font-weight: 600; color: var(--ct-heading); }
.beitragstext .ct-quote-role { display: block; font-size: .78rem; color: var(--ct-muted); }

/* ---------- Zahlen-Highlight · .ct-metric ---------- */
.beitragstext .ct-metric { display: flex; align-items: center; gap: 1.4rem; margin: 2rem 0; padding: 1.1rem 1.5rem; border: 1px solid var(--ct-border); border-left: 3px solid var(--ct-primary); border-radius: 0 var(--ct-radius) var(--ct-radius) 0; background: #fff; }
.beitragstext .ct-metric-value { flex: none; font-family: 'Space Grotesk','Inter',sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--ct-primary); font-variant-numeric: tabular-nums lining-nums; }
.beitragstext .ct-metric-body { min-width: 0; }
.beitragstext .ct-metric-label { display: block; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: .7rem; color: #4d6b7b; }
.beitragstext .ct-metric-text { margin-top: .25rem; font-size: .95rem; line-height: 1.65; color: var(--ct-text); }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .beitragstext .ct-takeaways-wrap, .beitragstext .ct-open-questions-wrap { padding: 1.25rem; }
  .beitragstext .ct-tiles { grid-template-columns: 1fr; }
  .beitragstext .ct-metric, .beitragstext .ct-quote { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .beitragstext .ct-case-step { grid-template-columns: 1fr; gap: .2rem; }
  .beitragstext .ct-case-head, .beitragstext .ct-case-body { padding-left: 1.15rem; padding-right: 1.15rem; }
}