/* ==========================================================================
   ctc-guide.css — Design-System fuer die Ratgeber-/Guide-Seiten
   --------------------------------------------------------------------------
   Wird AUSSCHLIESSLICH auf Seiten der `pages`-Collection mit template:"guide"
   geladen (siehe src/layouts/GuidePage.astro). Kein Einfluss auf die 1878
   bestehenden Seiten unter public/ — die laden diese Datei nicht.

   Alles ist unter .ctc-guide verschachtelt, damit nichts in das Mercury-/
   Elementor-Chrome (Header, Footer, Sprachumschalter) durchschlaegt.

   Bewusst EIN Theme (hell). Header und Footer der Site sind hell und haben
   keine Dark-Variante; eine nur hier vorhandene Dark-Variante wuerde auf
   halber Seite umschlagen. Jede Farbe wird explizit gesetzt, keine erbt vom
   Host.

   Farben stammen aus dem Bestand (novamira-components.css / ctc-components.css):
   Blau #223AB1, Mint #4CFDC8, Tinte #0A1635. Neutralgrau ist bewusst leicht
   blaustichig (Hue-Bias Richtung Primaerfarbe), kein reines Grau.
   Schriften: Poppins + Open Sans — beide laedt die Site ohnehin schon, es
   kommt kein zusaetzlicher Font-Request dazu.
   ========================================================================== */

.ctc-guide {
  /* --- Farbe --- */
  --g-blue: #223ab1;
  --g-blue-deep: #1a2d8c;
  --g-blue-ink: #0a1635;
  --g-mint: #4cfdc8;
  --g-mint-deep: #0fbf90;

  --g-ink: #101728;
  --g-body: #333a4a;
  --g-muted: #626b80;
  --g-faint: #8b93a5;

  --g-paper: #ffffff;
  --g-tint: #f4f7ff;
  --g-tint-2: #eaf0ff;
  --g-line: #e1e8ff;
  --g-line-soft: #eef2fb;

  --g-warn: #b45309;
  --g-warn-bg: #fff7ed;
  --g-good: #067a5b;
  --g-good-bg: #eefaf5;

  /* --- Raster & Radius --- */
  --g-measure: 68ch;
  --g-wide: 1140px;
  --g-r-sm: 8px;
  --g-r: 14px;
  --g-r-lg: 20px;

  /* --- Typo-Skala (1.25) --- */
  --g-fs-micro: 0.6875rem;
  --g-fs-cap: 0.8125rem;
  --g-fs-sm: 0.9375rem;
  --g-fs-base: 1.0625rem;
  --g-fs-lead: 1.1875rem;
  --g-fs-h3: 1.375rem;
  --g-fs-h2: 1.75rem;
  --g-fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.1rem);

  --g-shadow: 0 1px 2px rgba(16, 23, 40, 0.04), 0 8px 24px rgba(34, 58, 177, 0.06);
  --g-shadow-lift: 0 2px 4px rgba(16, 23, 40, 0.05), 0 16px 40px rgba(34, 58, 177, 0.12);

  color: var(--g-body);
  background: var(--g-paper);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--g-fs-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Lesefortschritt — haarfeine Leiste am oberen Rand
   -------------------------------------------------------------------------- */
.ctc-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.ctc-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--g-blue) 0%, var(--g-mint-deep) 100%);
  transition: width 0.08s linear;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ctc-guide__hero {
  position: relative;
  overflow: hidden;
  background: var(--g-tint);
  color: var(--g-ink);
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.25rem clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom: 1px solid var(--g-line);
  isolation: isolate;
}
/* Zwei sehr helle Radialverlaeufe in Markenblau/-mint statt Bilddatei — 0 kB,
   kein zusaetzlicher Request. Deutlich zurueckhaltender als die fruehere
   dunkle Fassung, damit der Hero zum hellen Chrome der uebrigen Site passt
   (Header/Footer haben keine Dark-Variante, siehe Datei-Kopf). */
.ctc-guide__hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 160%;
  z-index: -1;
  background:
    radial-gradient(58% 70% at 14% 18%, rgba(34, 58, 177, 0.07) 0%, rgba(34, 58, 177, 0) 62%),
    radial-gradient(40% 52% at 88% 92%, rgba(76, 253, 200, 0.12) 0%, rgba(76, 253, 200, 0) 64%);
}
.ctc-guide__hero-inner {
  max-width: var(--g-wide);
  margin: 0 auto;
}
.ctc-guide__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: "Poppins", "Open Sans", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g-blue);
  background: rgba(34, 58, 177, 0.08);
  border: 1px solid rgba(34, 58, 177, 0.22);
  border-radius: 999px;
  padding: 0.45em 0.95em;
  margin: 0 0 1.1rem;
}
.ctc-guide__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g-blue);
  box-shadow: 0 0 0 0 rgba(34, 58, 177, 0.5);
  animation: ctc-pulse 2.6s ease-out infinite;
}
@keyframes ctc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 58, 177, 0.4); }
  70% { box-shadow: 0 0 0 9px rgba(34, 58, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 58, 177, 0); }
}
.ctc-guide__h1 {
  font-family: "Poppins", "Open Sans", sans-serif;
  font-size: var(--g-fs-h1);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--g-ink);
  margin: 0 0 1rem;
  max-width: 20ch;
  text-wrap: balance;
}
.ctc-guide__lead {
  font-size: var(--g-fs-lead);
  line-height: 1.55;
  color: var(--g-body);
  max-width: 60ch;
  margin: 0 0 1.6rem;
}
.ctc-guide__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  font-size: var(--g-fs-cap);
  color: var(--g-muted);
}
.ctc-guide__meta a { color: var(--g-blue); text-decoration: underline; text-underline-offset: 3px; }
.ctc-guide__meta a:hover { color: var(--g-blue-deep); }
.ctc-guide__meta-item { display: inline-flex; align-items: center; gap: 0.45em; }
.ctc-guide__meta-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--g-line);
}

/* Hero-Kennzahlen */
.ctc-hero-facts {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  max-width: 900px;
}
.ctc-hero-facts li {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-sm);
  padding: 0.85rem 1rem;
}
.ctc-hero-facts b {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--g-blue);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.ctc-hero-facts span {
  display: block;
  font-size: var(--g-fs-cap);
  color: var(--g-muted);
  margin-top: 0.15rem;
}

/* Brotkrumen */
.ctc-crumbs {
  max-width: var(--g-wide);
  margin: 0 auto 1.1rem;
  font-size: var(--g-fs-cap);
  color: var(--g-muted);
}
.ctc-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35em; margin: 0; padding: 0; }
.ctc-crumbs li:not(:last-child)::after { content: "›"; margin-left: 0.4em; opacity: 0.55; }
.ctc-crumbs a { color: var(--g-muted); text-decoration: none; }
.ctc-crumbs a:hover { color: var(--g-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Grundlayout: Inhalt + klebendes Inhaltsverzeichnis
   -------------------------------------------------------------------------- */
.ctc-guide__shell {
  max-width: var(--g-wide);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
/* Rasterkinder duerfen schrumpfen. Ohne dieses min-width:0 gilt fuer sie
   min-width:auto, und ein einziges breites Kind (Tabelle, langes Wort,
   Diagramm) zieht die ganze Spalte ueber die Viewportbreite. */
.ctc-guide__shell > * { min-width: 0; }
@media (min-width: 1080px) {
  .ctc-guide__shell {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

.ctc-toc { font-size: var(--g-fs-sm); }
@media (min-width: 1080px) {
  .ctc-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
}
.ctc-toc__title {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-faint);
  margin: 0 0 0.75rem;
}
.ctc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--g-line); }
.ctc-toc li { margin: 0; }
.ctc-toc a {
  display: block;
  padding: 0.4rem 0 0.4rem 0.9rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: var(--g-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.ctc-toc a:hover { color: var(--g-blue); }
.ctc-toc a[aria-current="true"] {
  color: var(--g-blue);
  border-left-color: var(--g-blue);
  font-weight: 600;
}
.ctc-toc li[data-depth="3"] a { padding-left: 1.7rem; font-size: var(--g-fs-cap); }

/* --------------------------------------------------------------------------
   Fliesstext
   -------------------------------------------------------------------------- */
/* Der Fliesstext-Container nimmt die volle Spaltenbreite; das Lesemass liegt
   auf den Textelementen selbst. Nur so koennen Tabellen und die vom Skript
   eingesetzten Diagramme breiter werden als der Text, ohne aus dem Raster zu
   fallen. */
.ctc-prose { max-width: 100%; }
.ctc-prose > * + * { margin-top: 1.15em; }
.ctc-prose > p,
.ctc-prose > ul,
.ctc-prose > ol,
.ctc-prose > h2,
.ctc-prose > h3,
.ctc-prose > h4,
.ctc-prose > blockquote,
.ctc-prose > dl { max-width: var(--g-measure); }
.ctc-prose > .ctc-tablewrap,
.ctc-prose > .ctc-chart-slot,
.ctc-prose > figure { max-width: min(100%, 860px); }
.ctc-prose p { color: var(--g-body); }
.ctc-prose > p:first-of-type { font-size: var(--g-fs-lead); color: var(--g-ink); line-height: 1.6; }

/* .ctc-prose-h2 ist dieselbe Ueberschrift ausserhalb des Fliesstext-Containers
   (Schrittfolge, FAQ, verwandte Seiten) — gleiche Optik, gleiche Hierarchie. */
.ctc-prose h2,
.ctc-guide .ctc-prose-h2 {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-h2);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--g-ink);
  margin-top: 2.8em;
  margin-bottom: 0.55em;
  scroll-margin-top: 1.5rem;
  text-wrap: balance;
  position: relative;
  padding-top: 1.4rem;
}
/* Kurzer Strich statt voller Trennlinie — markiert den Abschnitt, ohne die
   Seite in Kaesten zu zerlegen. */
.ctc-prose h2::before,
.ctc-guide .ctc-prose-h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--g-blue), var(--g-mint-deep));
}

/* Diagramm-Vorrat: liegt hinter dem Fliesstext und wird von ctc-guide.js an
   die Marker im Text verschoben. Ohne JavaScript bleibt er als eigener
   Abschnitt stehen — sichtbar, nur an anderer Stelle. */
.ctc-charts { display: grid; gap: 1.5rem; }
.ctc-charts > div { min-width: 0; }
.ctc-chart-slot { margin: 2.4rem 0; }
.ctc-chart-slot:empty { display: none; margin: 0; }
.ctc-prose h3 {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-h3);
  line-height: 1.3;
  font-weight: 700;
  color: var(--g-ink);
  margin-top: 2em;
  margin-bottom: 0.4em;
  scroll-margin-top: 1.5rem;
  text-wrap: balance;
}
.ctc-prose h4 {
  font-family: "Poppins", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--g-ink);
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}
.ctc-prose a {
  color: var(--g-blue);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
  text-decoration-color: rgba(34, 58, 177, 0.35);
  transition: text-decoration-color 0.16s ease, color 0.16s ease;
}
.ctc-prose a:hover { text-decoration-color: var(--g-blue); color: var(--g-blue-deep); }
.ctc-prose strong { color: var(--g-ink); font-weight: 700; }
.ctc-prose ul, .ctc-prose ol { padding-left: 1.35em; }
.ctc-prose li { margin-top: 0.4em; }
.ctc-prose li::marker { color: var(--g-blue); }
.ctc-prose blockquote {
  margin-left: 0; margin-right: 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 3px solid var(--g-mint-deep);
  color: var(--g-ink);
  font-size: var(--g-fs-lead);
  line-height: 1.55;
}
.ctc-prose code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--g-tint-2);
  color: var(--g-blue-deep);
  border-radius: 4px;
  padding: 0.12em 0.4em;
}
.ctc-prose img { max-width: 100%; height: auto; border-radius: var(--g-r); }
.ctc-prose hr { border: 0; border-top: 1px solid var(--g-line); margin: 2.5em 0; }

/* Tabellen im Fliesstext — scrollen in eigenem Container, nie die Seite */
.ctc-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--g-fs-sm);
  margin: 0;
}
.ctc-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  background: var(--g-paper);
  -webkit-overflow-scrolling: touch;
}
.ctc-prose th, .ctc-prose td {
  padding: 0.7rem 0.95rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--g-line-soft);
}
.ctc-prose thead th {
  background: var(--g-blue);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--g-fs-cap);
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.ctc-prose tbody tr:nth-child(even) { background: var(--g-tint); }
.ctc-prose tbody tr:hover { background: var(--g-tint-2); }
.ctc-prose tbody td:first-child { font-weight: 600; color: var(--g-ink); }
.ctc-prose td[data-num], .ctc-prose th[data-num] { font-variant-numeric: tabular-nums; text-align: right; }

/* --------------------------------------------------------------------------
   Breite Datenbaender — brechen aus dem Lesemass aus
   -------------------------------------------------------------------------- */
.ctc-band { max-width: var(--g-measure); margin: 2.4rem 0; }
@media (min-width: 1080px) {
  .ctc-band--wide { max-width: min(100%, 860px); }
}

/* Scroll-Reveal: nur Datenbaender, nicht der Fliesstext.
   Der Startzustand haengt an .js (wird synchron im <head> gesetzt). Ohne
   JavaScript wird nichts versteckt — sonst waeren Schrittfolge, FAQ und
   Autorenbox bei einem Skriptfehler unsichtbar, und das ist ein zu hoher
   Preis fuer eine Einblendung. */
.js .ctc-reveal { opacity: 0; transform: translateY(14px); }
.js .ctc-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* --------------------------------------------------------------------------
   „Auf einen Blick" — die zitierfaehige Antwortbox (GEO)
   -------------------------------------------------------------------------- */
.ctc-answer {
  background: linear-gradient(180deg, var(--g-tint) 0%, var(--g-paper) 100%);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  padding: 1.5rem 1.6rem;
  box-shadow: var(--g-shadow);
  margin: 0 0 2.4rem;
}
.ctc-answer__label {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.ctc-answer__label::after { content: ""; flex: 1; height: 1px; background: var(--g-line); }
.ctc-answer__text {
  font-size: var(--g-fs-lead);
  line-height: 1.55;
  color: var(--g-ink);
  font-weight: 500;
  margin: 0 0 1rem;
}
.ctc-answer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.ctc-answer li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--g-fs-sm);
  color: var(--g-body);
  line-height: 1.5;
}
.ctc-answer li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--g-mint);
  box-shadow: inset 0 0 0 1px var(--g-mint-deep);
}
.ctc-answer li::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 0.68em;
  width: 6px; height: 3px;
  border-left: 1.8px solid var(--g-blue-ink);
  border-bottom: 1.8px solid var(--g-blue-ink);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Kennzahlen-Raster
   -------------------------------------------------------------------------- */
.ctc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 0; padding: 0;
}
.ctc-stat {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  padding: 1.15rem 1.25rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.ctc-stat::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--g-blue), var(--g-mint-deep));
  transform: scaleY(0.35);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ctc-stat:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lift); border-color: var(--g-tint-2); }
.ctc-stat:hover::before { transform: scaleY(1); }
.ctc-stat__value {
  font-family: "Poppins", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--g-blue);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.ctc-stat__label {
  display: block;
  font-size: var(--g-fs-sm);
  color: var(--g-ink);
  font-weight: 600;
  margin-top: 0.35rem;
  line-height: 1.35;
}
.ctc-stat__note { display: block; font-size: var(--g-fs-cap); color: var(--g-muted); margin-top: 0.3rem; line-height: 1.4; }
.ctc-stat__src { display: block; font-size: var(--g-fs-micro); color: var(--g-faint); margin-top: 0.45rem; }
.ctc-stat__src a { color: var(--g-faint); text-decoration: underline; }
.ctc-stat__src a:hover { color: var(--g-blue); }

/* --------------------------------------------------------------------------
   Diagramme (inline SVG, vom Layout aus Daten gezeichnet)
   -------------------------------------------------------------------------- */
.ctc-figure {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--g-shadow);
}
.ctc-figure__head { margin-bottom: 1.1rem; }
.ctc-figure__kicker {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-mint-deep);
  margin: 0 0 0.3rem;
}
.ctc-figure__title {
  font-family: "Poppins", sans-serif;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--g-ink);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.ctc-figure__caption {
  font-size: var(--g-fs-cap);
  color: var(--g-muted);
  line-height: 1.5;
  margin: 1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--g-line-soft);
}
.ctc-figure__caption a { color: var(--g-blue); text-decoration: underline; }
.ctc-figure svg { display: block; width: 100%; height: auto; overflow: visible; }
.ctc-figure__scroll { overflow-x: auto; }

.ctc-chart-label { font-family: "Open Sans", sans-serif; font-size: 12px; fill: var(--g-muted); }
.ctc-chart-value { font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 700; fill: var(--g-ink); font-variant-numeric: tabular-nums; }
.ctc-chart-axis { stroke: var(--g-line); stroke-width: 1; }
.ctc-chart-grid { stroke: var(--g-line-soft); stroke-width: 1; }

/* Balkendiagramm — HTML statt SVG: passt sich der Containerbreite ohne
   viewBox-Rechnerei an und laesst lange Beschriftungen umbrechen. */
.ctc-bars { display: grid; gap: 0.85rem; }
.ctc-bars__row { display: grid; grid-template-columns: 1fr; gap: 0.3rem; }
@media (min-width: 560px) {
  .ctc-bars__row { grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: 0.9rem; align-items: center; }
}
.ctc-bars__label { font-size: var(--g-fs-sm); color: var(--g-ink); font-weight: 600; line-height: 1.35; }
.ctc-bars__label em { display: block; font-style: normal; font-size: var(--g-fs-micro); color: var(--g-muted); font-weight: 400; margin-top: 0.1rem; }
.ctc-bars__tracks { display: grid; gap: 0.28rem; min-width: 0; }
.ctc-bars__track { display: flex; align-items: center; gap: 0.6rem; background: var(--g-line-soft); border-radius: 999px; height: 26px; padding-right: 0.2rem; }
.ctc-bars__track--2 { height: 18px; }
.ctc-bars__val {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-cap);
  font-weight: 700;
  color: var(--g-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: none;
}

/* Balken wachsen beim Eintreten. Ohne JavaScript stehen sie sofort auf
   Endbreite — die Grafik ist dann vollstaendig lesbar, nur ohne Bewegung. */
.ctc-bar {
  width: var(--w);
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
  flex: none;
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ring */
.ctc-donut { display: grid; gap: 1.2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 560px) { .ctc-donut { grid-template-columns: 190px minmax(0, 1fr); gap: 1.8rem; } }
.ctc-donut > svg { max-width: 190px; margin: 0 auto; }
.ctc-donut__big { font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 700; fill: var(--g-ink); font-variant-numeric: tabular-nums; }
.ctc-donut__small { font-family: "Open Sans", sans-serif; font-size: 11px; fill: var(--g-muted); }
.ctc-chart-legend--stack { flex-direction: column; gap: 0.5rem; align-items: stretch; }
.ctc-chart-legend--stack li { justify-content: flex-start; gap: 0.6em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--g-line-soft); }
.ctc-chart-legend--stack li:last-child { border-bottom: 0; padding-bottom: 0; }
.ctc-chart-legend--stack span { flex: 1; color: var(--g-body); }
.ctc-chart-legend--stack b { font-family: "Poppins", sans-serif; color: var(--g-ink); font-variant-numeric: tabular-nums; }

.ctc-figure__src { display: inline; }
.js .ctc-figure[data-animate] .ctc-bar { width: 0; }
.js .ctc-figure[data-animate].is-in .ctc-bar { width: var(--w); }

.ctc-donut-track { fill: none; stroke: var(--g-line); }
.ctc-donut-value { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(0.22, 1, 0.36, 1); }
.js .ctc-figure[data-animate] .ctc-donut-value { stroke-dashoffset: var(--dash-full); }
.js .ctc-figure[data-animate].is-in .ctc-donut-value { stroke-dashoffset: var(--dash); }

.ctc-line-path { fill: none; stroke: var(--g-blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ctc-line-area { fill: url(#ctcAreaFill); }
.js .ctc-figure[data-animate] .ctc-line-path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .ctc-figure[data-animate].is-in .ctc-line-path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.js .ctc-figure[data-animate] .ctc-line-area { opacity: 0; }
.js .ctc-figure[data-animate].is-in .ctc-line-area { opacity: 1; transition: opacity 0.7s ease 0.5s; }
.ctc-line-dot { fill: var(--g-paper); stroke: var(--g-blue); stroke-width: 2.5; }
.ctc-line-dot--last { fill: var(--g-blue); stroke: var(--g-mint); stroke-width: 3; }

.ctc-chart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0.9rem 0 0;
  padding: 0;
  font-size: var(--g-fs-cap);
  color: var(--g-body);
}
.ctc-chart-legend li { display: inline-flex; align-items: center; gap: 0.45em; }
.ctc-chart-legend i { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* --------------------------------------------------------------------------
   Ablauf-Diagramm / Schrittfolge (HowTo)
   -------------------------------------------------------------------------- */
.ctc-steps { list-style: none; margin: 0; padding: 0; counter-reset: ctcstep; display: grid; gap: 0; }
.ctc-step {
  counter-increment: ctcstep;
  position: relative;
  padding: 0 0 1.9rem 3.4rem;
}
.ctc-step:last-child { padding-bottom: 0; }
.ctc-step::before {
  content: counter(ctcstep);
  position: absolute;
  left: 0; top: 0;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--g-blue);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 0 0 4px var(--g-tint);
  z-index: 1;
}
/* Verbindungslinie zwischen den Schritten */
.ctc-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(1.15rem - 1px);
  top: 2.3rem; bottom: 0.35rem;
  width: 2px;
  background: linear-gradient(180deg, var(--g-blue) 0%, var(--g-line) 100%);
}
.ctc-step h3, .ctc-step__title {
  font-family: "Poppins", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--g-ink);
  margin: 0.25rem 0 0.35rem;
  line-height: 1.35;
}
.ctc-step p { margin: 0; font-size: var(--g-fs-sm); color: var(--g-body); }
.ctc-step__note {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: var(--g-fs-cap);
  color: var(--g-blue-deep);
  background: var(--g-tint);
  border: 1px solid var(--g-line);
  border-radius: 999px;
  padding: 0.25em 0.75em;
}

/* --------------------------------------------------------------------------
   Vergleichstabelle mit Hervorhebung
   -------------------------------------------------------------------------- */
.ctc-compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--g-fs-sm); }
.ctc-compare th, .ctc-compare td { padding: 0.8rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--g-line-soft); }
.ctc-compare thead th {
  background: var(--g-blue-ink);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-cap);
  font-weight: 600;
  white-space: nowrap;
}
.ctc-compare thead th:first-child { border-radius: var(--g-r-sm) 0 0 0; }
.ctc-compare thead th:last-child { border-radius: 0 var(--g-r-sm) 0 0; }
.ctc-compare thead th.is-highlight { background: var(--g-blue); position: relative; }
.ctc-compare tbody th { font-weight: 600; color: var(--g-ink); background: var(--g-tint); }
.ctc-compare td.is-highlight { background: rgba(76, 253, 200, 0.09); font-weight: 600; color: var(--g-ink); }
.ctc-compare tbody tr:last-child td, .ctc-compare tbody tr:last-child th { border-bottom: 0; }
.ctc-yes { color: var(--g-good); font-weight: 700; }
.ctc-no { color: var(--g-faint); font-weight: 700; }

/* --------------------------------------------------------------------------
   Pro/Contra
   -------------------------------------------------------------------------- */
.ctc-procon { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .ctc-procon { grid-template-columns: 1fr 1fr; } }
.ctc-procon__col { border: 1px solid var(--g-line); border-radius: var(--g-r); padding: 1.15rem 1.25rem; background: var(--g-paper); }
.ctc-procon__col--pro { background: var(--g-good-bg); border-color: #cdeadf; }
.ctc-procon__col--con { background: #fbfcff; }
.ctc-procon h3 {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  display: flex; align-items: center; gap: 0.5em;
}
.ctc-procon__col--pro h3 { color: var(--g-good); }
.ctc-procon__col--con h3 { color: var(--g-muted); }
.ctc-procon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ctc-procon li { font-size: var(--g-fs-sm); line-height: 1.5; padding-left: 1.4rem; position: relative; color: var(--g-body); }
.ctc-procon__col--pro li::before { content: "+"; position: absolute; left: 0; color: var(--g-good); font-weight: 700; }
.ctc-procon__col--con li::before { content: "–"; position: absolute; left: 0; color: var(--g-faint); font-weight: 700; }

/* --------------------------------------------------------------------------
   Hinweisboxen
   -------------------------------------------------------------------------- */
.ctc-callout {
  border-radius: var(--g-r);
  padding: 1.05rem 1.25rem;
  font-size: var(--g-fs-sm);
  line-height: 1.6;
  border: 1px solid var(--g-line);
  background: var(--g-tint);
  color: var(--g-body);
}
.ctc-callout strong { color: var(--g-ink); }
.ctc-callout__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--g-fs-sm);
  color: var(--g-ink);
  margin: 0 0 0.35rem;
  display: flex; align-items: center; gap: 0.5em;
}
.ctc-callout--warn { background: var(--g-warn-bg); border-color: #fed7aa; }
.ctc-callout--warn .ctc-callout__title { color: var(--g-warn); }
.ctc-callout--good { background: var(--g-good-bg); border-color: #cdeadf; }
.ctc-callout--good .ctc-callout__title { color: var(--g-good); }
.ctc-callout p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   FAQ-Akkordeon
   -------------------------------------------------------------------------- */
.ctc-faq { display: grid; gap: 0.6rem; }
.ctc-faq details {
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ctc-faq details[open] { border-color: rgba(34, 58, 177, 0.35); box-shadow: var(--g-shadow); }
.ctc-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 3rem 0.95rem 1.2rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: var(--g-fs-sm);
  color: var(--g-ink);
  position: relative;
  line-height: 1.45;
}
.ctc-faq summary::-webkit-details-marker { display: none; }
.ctc-faq summary::after {
  content: "";
  position: absolute;
  right: 1.2rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--g-blue);
  border-bottom: 2px solid var(--g-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.ctc-faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.ctc-faq summary:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 2px; border-radius: var(--g-r); }
.ctc-faq__body { padding: 0 1.2rem 1.1rem; font-size: var(--g-fs-sm); color: var(--g-body); line-height: 1.65; }
.ctc-faq__body > :first-child { margin-top: 0; }
.ctc-faq__body a { color: var(--g-blue); text-decoration: underline; font-weight: 600; }

/* --------------------------------------------------------------------------
   Autorenbox (E-E-A-T)
   -------------------------------------------------------------------------- */
.ctc-author {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  background: var(--g-tint);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r-lg);
  padding: 1.5rem;
}
@media (min-width: 620px) { .ctc-author { grid-template-columns: 96px 1fr; gap: 1.4rem; } }
.ctc-author__photo {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--g-paper);
  box-shadow: 0 0 0 1px var(--g-line), var(--g-shadow);
}
.ctc-author__name {
  font-family: "Poppins", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--g-ink);
  margin: 0 0 0.15rem;
}
.ctc-author__name a { color: inherit; text-decoration: none; }
.ctc-author__name a:hover { color: var(--g-blue); text-decoration: underline; }
.ctc-author__role {
  font-size: var(--g-fs-cap);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-blue);
  margin: 0 0 0.6rem;
}
.ctc-author__bio { font-size: var(--g-fs-sm); color: var(--g-body); margin: 0 0 0.8rem; line-height: 1.6; }
.ctc-author__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.ctc-author__tags li {
  font-size: var(--g-fs-micro);
  font-weight: 600;
  color: var(--g-blue-deep);
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: 999px;
  padding: 0.3em 0.75em;
}
.ctc-author__rev { font-size: var(--g-fs-cap); color: var(--g-muted); margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--g-line); }

/* --------------------------------------------------------------------------
   Quellen + Zitierblock (GEO)
   -------------------------------------------------------------------------- */
.ctc-sources { border-top: 1px solid var(--g-line); padding-top: 1.4rem; }
.ctc-sources h2 {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-faint);
  margin: 0 0 0.9rem;
  padding: 0;
}
.ctc-sources h2::before { display: none; }
.ctc-sources ol { margin: 0; padding-left: 1.35em; display: grid; gap: 0.5rem; }
.ctc-sources li { font-size: var(--g-fs-cap); color: var(--g-muted); line-height: 1.55; }
.ctc-sources a { color: var(--g-blue); text-decoration: underline; }
.ctc-sources cite { font-style: normal; color: var(--g-ink); font-weight: 600; }

.ctc-cite {
  margin-top: 1.5rem;
  background: var(--g-blue-ink);
  border-radius: var(--g-r);
  padding: 1.1rem 1.25rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--g-fs-cap);
  line-height: 1.6;
}
.ctc-cite__label {
  font-family: "Poppins", sans-serif;
  font-size: var(--g-fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g-mint);
  margin: 0 0 0.5rem;
}
.ctc-cite__text { color: #fff; word-break: break-word; }

/* --------------------------------------------------------------------------
   Verwandte Seiten
   -------------------------------------------------------------------------- */
.ctc-related { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.ctc-related a {
  display: block;
  height: 100%;
  background: var(--g-paper);
  border: 1px solid var(--g-line);
  border-radius: var(--g-r);
  padding: 1rem 1.15rem;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.ctc-related a:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-lift); border-color: rgba(34, 58, 177, 0.3); }
.ctc-related__kicker { font-size: var(--g-fs-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-mint-deep); display: block; margin-bottom: 0.3rem; }
.ctc-related__title { font-family: "Poppins", sans-serif; font-size: var(--g-fs-sm); font-weight: 700; color: var(--g-ink); line-height: 1.4; display: block; }
.ctc-related__desc { font-size: var(--g-fs-cap); color: var(--g-muted); margin-top: 0.3rem; display: block; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Abschluss-CTA
   -------------------------------------------------------------------------- */
.ctc-cta {
  background: linear-gradient(120deg, var(--g-blue) 0%, var(--g-blue-deep) 55%, #12206b 100%);
  border-radius: var(--g-r-lg);
  padding: 1.9rem 1.8rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ctc-cta::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 253, 200, 0.22) 0%, rgba(76, 253, 200, 0) 68%);
}
.ctc-cta h2 {
  font-family: "Poppins", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem;
  padding: 0;
}
.ctc-cta h2::before { display: none; }
.ctc-cta p { color: rgba(255, 255, 255, 0.82); font-size: var(--g-fs-sm); margin: 0 0 1.2rem; max-width: 52ch; }
.ctc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--g-mint);
  color: var(--g-blue-ink);
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: var(--g-fs-sm);
  text-decoration: none;
  border-radius: 999px;
  padding: 0.75em 1.5em;
  box-shadow: 0 2px 0 var(--g-mint-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ctc-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 0 var(--g-mint-deep); color: var(--g-blue-ink); }
.ctc-btn:active { transform: translateY(0); box-shadow: 0 1px 0 var(--g-mint-deep); }

/* --------------------------------------------------------------------------
   Verantwortungsvolles Spielen / rechtlicher Fussbereich
   -------------------------------------------------------------------------- */
.ctc-legal {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--g-line);
  font-size: var(--g-fs-cap);
  color: var(--g-muted);
  line-height: 1.6;
}
.ctc-legal a { color: var(--g-blue); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Zugaenglichkeit
   -------------------------------------------------------------------------- */
.ctc-guide :focus-visible { outline: 2px solid var(--g-blue); outline-offset: 2px; border-radius: 3px; }
/* Nur fuer Screenreader sichtbar.
   Mit !important, weil das Mercury-Theme `table { width: 100% }` global setzt
   und die Datentabellen der Diagramme sonst als vollbreite Tabellen im Fluss
   landen -- gemessen am 21.08.2026: 45 px horizontaler Ueberlauf auf 375 px
   Viewport, verursacht genau dadurch. clip-path zusaetzlich zu clip, weil
   clip in modernen Engines nur noch aus Kompatibilitaetsgruenden greift. */
.ctc-guide .ctc-sr,
.ctc-guide table.ctc-sr {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ctc-guide *,
  .ctc-guide *::before,
  .ctc-guide *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .ctc-reveal { opacity: 1; transform: none; }
  .js .ctc-figure[data-animate] .ctc-bar { width: var(--w); }
  .js .ctc-figure[data-animate] .ctc-donut-value { stroke-dashoffset: var(--dash); }
  .js .ctc-figure[data-animate] .ctc-line-path { stroke-dashoffset: 0; }
  .js .ctc-figure[data-animate] .ctc-line-area { opacity: 1; }
}

@media print {
  /* Der Einblende-Startzustand darf im Druck nicht stehenbleiben. */
  .js .ctc-reveal { opacity: 1 !important; transform: none !important; }
  .js .ctc-figure[data-animate] .ctc-bar { width: var(--w) !important; }
  .js .ctc-figure[data-animate] .ctc-donut-value { stroke-dashoffset: var(--dash) !important; }
  .js .ctc-figure[data-animate] .ctc-line-path { stroke-dashoffset: 0 !important; }
  .js .ctc-figure[data-animate] .ctc-line-area { opacity: 1 !important; }
  .ctc-progress, .ctc-toc, .ctc-cta { display: none; }
  .ctc-guide__hero { background: #fff; color: #000; }
  .ctc-guide__h1, .ctc-guide__lead { color: #000; }
  .ctc-faq details { border: 1px solid #ccc; }
  .ctc-faq details:not([open]) .ctc-faq__body { display: block; }
}