/* ============================================================
   BONANTE ACADEMY — Spoke-Seiten (Schulungs-Detailseiten)
   Scoped Add-on zu tokens.css + styles.css. Berührt Homepage NICHT.
   Reuse: .container .btn .section-head .eyebrow .section--ink/--sunken
          .method/.phase .ctable .acc .tiers/.tierc .final .reveal
   Neu hier: .crumb .chero .facts .sec .curric/.mod .pak/.pakc .related
   ============================================================ */

/* ---- generische Sektions-Rhythmik (wie Homepage-Sektionen) ---- */
.sec { padding: clamp(72px, 9vw, 120px) 0; }
.sec--tight { padding: clamp(52px, 6vw, 84px) 0; }

/* ---- Breadcrumb ---- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; }
.crumb a { color: rgba(255,255,255,0.62); transition: color var(--duration-fast); }
.crumb a:hover { color: #fff; }
.crumb__sep { color: rgba(255,255,255,0.3); }
.crumb__cur { color: rgba(255,255,255,0.9); }

/* ============================ COURSE-HERO (dunkel, split) ============================ */
.chero { position: relative; background: var(--ink-900); color: var(--text-on-dark);
  padding-top: calc(var(--nav-h) + clamp(48px, 8vh, 96px));
  padding-bottom: clamp(56px, 8vw, 104px); overflow: hidden; }
.chero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px); align-items: center; }
.chero__copy { min-width: 0; }
.chero__eyebrow { color: rgba(255,255,255,0.7); margin: 22px 0 0; }
.chero__h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1.0; letter-spacing: -0.015em;
  color: #fff; margin: 14px 0 0; text-wrap: balance; }
.chero__h1 em { color: #fff; }
.chero__sub { margin: 22px 0 0; max-width: 48ch; font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.65; color: rgba(255,255,255,0.82); }

/* Fakten-Chips */
.facts { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 0; }
.fact { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-label);
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--radius-pill); padding: 8px 15px; }
.fact svg { width: 15px; height: 15px; flex: none; color: rgba(255,255,255,0.9); }

/* Preis + CTA-Zeile */
.chero__price { margin: 28px 0 0; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.chero__price-num { font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 42px); color: #fff; line-height: 1; }
.chero__price-lbl { font-size: 13.5px; color: rgba(255,255,255,0.7); }
.chero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }
.chero__reassure { margin: 18px 0 0; font-size: 12.5px; letter-spacing: 0.01em; color: rgba(255,255,255,0.72); }
.chero__reassure .stars { color: #fff; letter-spacing: 1px; }

/* Primär-CTA auf dem dunklen Course-Hero: weiß mit schwarzer Schrift (invertiert, wie .hero/.section--ink) */
.chero .btn--primary { background: var(--white); color: var(--ink-900); border-color: var(--white); }
.chero .btn--primary:hover { background: var(--gray-100); border-color: var(--gray-100); }
.chero .btn--lg.btn--glow::before { background: var(--ink-900); color: var(--white); }

/* Hero-Media */
.chero__media { position: relative; min-width: 0; }
.chero__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.chero__media .chero__seal { position: absolute; bottom: -22px; left: -22px;
  width: clamp(88px, 10vw, 118px); height: auto; aspect-ratio: auto; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.4)); }

/* ============================ CURRICULUM ============================ */
.curric__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
.mod { min-width: 0; border-top: 1.5px solid var(--ink-900); padding: 22px 0 0; }
.mod__idx { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.14em;
  color: var(--text-muted); }
.mod__title { font-family: var(--font-sans); font-size: 19px; font-weight: var(--weight-semibold);
  margin: 10px 0 8px; }
.mod__txt { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ============================ PAKETE / PREISE ============================ */
.pak__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px);
  align-items: stretch; }
.pakc { display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  padding: 30px 26px 28px; min-width: 0; transition: transform var(--duration-base) var(--ease-out),
  box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base); }
.pakc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gray-300); }
.pakc--featured { border: 1.5px solid var(--ink-900); box-shadow: var(--shadow-md); position: relative; }
.pakc__flag { position: absolute; top: -12px; left: 26px; background: var(--ink-900); color: #fff;
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--radius-pill); }
.pakc__name { font-family: var(--font-sans); font-size: 15px; font-weight: var(--weight-semibold);
  letter-spacing: 0.02em; margin: 0; }
.pakc__price { font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 54px); line-height: 1;
  margin: 14px 0 2px; }
.pakc__rate { font-size: 13px; color: var(--text-tertiary); }
.pakc__note { font-size: 13px; color: var(--text-secondary); margin: 6px 0 0; }
.pakc__list { list-style: none; margin: 20px 0 24px; padding: 0; display: flex; flex-direction: column;
  gap: 11px; flex: 1; }
.pakc__list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5;
  color: var(--text-secondary); }
.pakc__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ink-900);
  font-weight: 700; }
.pakc__list li.is-muted { color: var(--text-muted); }
.pakc__list li.is-muted::before { content: "—"; color: var(--gray-300); font-weight: 400; }

/* Preis-Hinweis */
.pak__note { max-width: 760px; margin: clamp(28px,3vw,40px) auto 0; text-align: center;
  font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ============================ RELATED / SPEZIALISIERUNG ============================ */
.related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }
.relc { display: flex; gap: 18px; align-items: center; background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 20px 22px;
  min-width: 0; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base); }
.relc:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.relc__media { flex: none; width: 84px; height: 84px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--gray-100); }
.relc__media img { width: 100%; height: 100%; object-fit: cover; }
.relc__body { min-width: 0; }
.relc__name { font-family: var(--font-sans); font-size: 17px; font-weight: var(--weight-semibold); margin: 0; }
.relc__txt { font-size: 13.5px; color: var(--text-secondary); margin: 5px 0 0; line-height: 1.5; }
.relc__price { font-size: 13px; color: var(--text-tertiary); margin: 7px 0 0; display: block; }

/* ============================ TECHNIKEN (Bild-Karten) ============================ */
.tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.techc { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--white);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.techc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.techc__media { aspect-ratio: 4/5; overflow: hidden; background: var(--gray-100); }
.techc__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out); }
.techc:hover .techc__media img { transform: scale(1.05); }
.techc__body { padding: 22px 24px 26px; }
.techc__tag { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-muted); }
.techc__name { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 30px); font-weight: 400;
  line-height: 1.08; margin: 8px 0 10px; }
.techc__txt { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ============================ TESTIMONIALS ============================ */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 18px); }
.tproof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: clamp(28px,3vw,40px) 0 0; }
.tproof__seal { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label);
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 9px 16px; background: var(--white); }
.tproof__seal strong { color: var(--ink-900); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 900px) {
  .tech__grid { grid-template-columns: repeat(2, 1fr); }
  .tgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .techc__body { padding: 16px 16px 20px; }
  .tgrid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  /* Bild als visueller Anker oben, CTA direkt darunter (above the fold) */
  .chero { padding-top: calc(var(--nav-h) + 20px); }
  .chero__grid { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 30px); }
  .chero__copy { display: flex; flex-direction: column; }
  .chero__media { order: -1; max-width: 560px; margin-inline: auto; }
  .chero__media img { aspect-ratio: 4/3; }
  .crumb { display: none; }
  .chero__eyebrow { order: 1; margin-top: 18px; }
  .chero__h1 { order: 2; margin-top: 8px; }
  .chero__cta { order: 3; margin-top: 20px; }
  .chero__sub { order: 4; margin-top: 20px; }
  .facts { order: 5; margin-top: 20px; }
  .chero__price { order: 6; margin-top: 22px; }
  .chero__reassure { order: 7; }
  .curric__grid { grid-template-columns: repeat(2, 1fr); }
  .pak__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
@media (max-width: 480px) {
  .chero__h1 { font-size: clamp(33px, 9vw, 40px); }
  .chero__cta .btn { width: 100%; }
}
@media (max-width: 640px) {
  .curric__grid { grid-template-columns: 1fr; }
  .related__grid { grid-template-columns: 1fr; }
  .chero__seal { width: 74px; left: -8px; bottom: -14px; }
}

/* ============================================================
   SPOKE REDESIGN v2 — Editorial-Uplift (scoped: body.spoke)
   Rollout: Seite für Seite via <body class="spoke">.
   Monochrom — bewusst KEIN Rot (Entscheidung Felix, Juli 2026).
   Neu: .marquee .currix .modl .gal .pullq .chero__frame .shead__meta
   ============================================================ */

/* ---- HERO: H1 zähmen, Bild als volle architektonische Spalte ---- */
.spoke .chero__grid { grid-template-columns: 1fr 0.92fr; align-items: stretch; }
.spoke .chero__h1 { font-size: clamp(36px, 4.4vw, 62px); line-height: 1.04; }
.spoke .crumb { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.spoke .chero__sub { max-width: 52ch; }

/* Fakten-Chips: feiner, ruhiger */
.spoke .fact { border-color: rgba(255,255,255,0.16); padding: 7px 13px; font-size: 10.5px;
  color: rgba(255,255,255,0.78); }

/* Preis + CTA als gefasstes „Ticket" — der Conversion-Anker */
.spoke .chero__panel { margin-top: 30px; border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md); padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255,255,255,0.03); }
.spoke .chero__panel .chero__price { margin: 0; }
.spoke .chero__panel .chero__price-num { font-size: clamp(34px, 3.6vw, 48px); }
.spoke .chero__panel .chero__cta { margin: 20px 0 0; }
.spoke .chero__panel .chero__reassure { margin: 16px 0 0; }

/* Bild füllt die Spaltenhöhe; Parallax-Frame clippt, Seal bleibt frei */
.spoke .chero__frame { position: relative; height: 100%; min-height: 520px; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.spoke .chero__frame img { position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; border-radius: 0; box-shadow: none; }

/* ---- MARQUEE: langsames Editorial-Laufband (dekorativ) ---- */
.marquee { overflow: hidden; background: var(--white); border-bottom: 1px solid var(--border-subtle);
  padding: 20px 0; }
.marquee__track { display: flex; align-items: baseline; gap: clamp(28px, 4vw, 56px);
  width: max-content; animation: mq-slide 38s linear infinite; will-change: transform; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1; color: var(--ink-900); white-space: nowrap; }
.marquee__track .mq-dot { color: var(--gray-300); font-size: 0.7em; }
@keyframes mq-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---- CURRIX: Curriculum als Signatur-Moment (Head sticky, Liste rechts) ---- */
.currix { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px);
  align-items: start; }
.currix__head { position: sticky; top: calc(var(--nav-h) + 56px); }
.currix__head .section-head { margin: 0; }
.currix__list { min-width: 0; }
.modl { display: grid; grid-template-columns: clamp(56px, 6vw, 84px) 1fr; gap: clamp(14px, 2vw, 24px);
  align-items: start; padding: clamp(22px, 2.6vw, 30px) 0; border-top: 1px solid var(--border-default); }
.currix__list .modl:last-child { border-bottom: 1px solid var(--border-default); }
.modl__idx { font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); line-height: 1;
  color: var(--gray-300); transition: color var(--duration-base) var(--ease-out); }
.modl:hover .modl__idx { color: var(--ink-900); }
.modl__title { font-family: var(--font-sans); font-size: 19px; font-weight: var(--weight-semibold);
  margin: 2px 0 8px; }
.modl__txt { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* ---- SECTION-HEAD: faktische Meta-Zeile füllt die rechte Leere ---- */
.spoke .section-head { position: relative; max-width: none; }
.spoke .section-head h2 { max-width: 760px; }
.shead__meta { position: absolute; right: 0; top: 6px; font-family: var(--font-label);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary);
  border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 9px 16px;
  background: var(--white); }

/* ---- PAKETE: Featured invertiert (Ink) — klare Blickführung ---- */
.spoke .pakc__price { font-size: clamp(44px, 4.6vw, 62px); }
.spoke .pakc--featured { background: var(--ink-900); border-color: var(--ink-900);
  transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.spoke .pakc--featured:hover { transform: translateY(-10px); border-color: var(--ink-900); }
.spoke .pakc--featured .pakc__name { color: var(--white); }
.spoke .pakc--featured .pakc__price { color: var(--white); }
.spoke .pakc--featured .pakc__rate { color: var(--gray-400); }
.spoke .pakc--featured .pakc__note { color: var(--gray-300); }
.spoke .pakc--featured .pakc__list li { color: var(--gray-300); }
.spoke .pakc--featured .pakc__list li::before { color: var(--white); }
.spoke .pakc--featured .pakc__flag { background: var(--white); color: var(--ink-900); }
.spoke .pakc--featured .btn--primary { background: var(--white); color: var(--ink-900);
  border-color: var(--white); }
.spoke .pakc--featured .btn--primary:hover { background: var(--gray-100); border-color: var(--gray-100); }
.spoke .pakc--featured .btn--glow::before { background: var(--ink-900); color: var(--white); }

/* ---- GAL: Ergebnisse als Editorial-Masonry ---- */
.gal { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(36px, 4vw, 52px); }
.gal__item { margin: 0; overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: var(--gray-100); }
.gal__item img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-slow) var(--ease-out); }
.gal__item:hover img { transform: scale(1.04); }
.gal__item--lg { grid-row: 1 / span 2; }
.gal__item--wide { grid-column: 2 / span 2; }
.gal__item--wide img { aspect-ratio: 2.35/1; }
.gal__item:not(.gal__item--lg):not(.gal__item--wide) img { aspect-ratio: 4/3; }
/* Varianten für Seiten mit 2 bzw. 3 Ergebnis-Bildern */
.gal--duo, .gal--trio { grid-template-columns: 1.35fr 1fr; }
.gal--duo .gal__item--lg { grid-row: auto; }
.gal--duo .gal__item--lg img { aspect-ratio: 4/5; height: auto; }
.gal--duo .gal__item:not(.gal__item--lg) { align-self: center; }

/* ---- PULLQ: große Serif-Pull-Quote als emotionaler Anker ---- */
.pullq { max-width: 920px; margin: 0 0 clamp(40px, 5vw, 64px); }
.pullq blockquote { margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.14; letter-spacing: -0.01em;
  color: var(--ink-900); text-wrap: balance; }
.pullq blockquote em { font-style: italic; }
.pullq figcaption { margin-top: 18px; font-family: var(--font-label); font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.spoke .tgrid { grid-template-columns: repeat(3, 1fr); }

/* ---- VERGLEICH: Bonante-Spalte körperlich hervorheben (ohne Rot) ---- */
.spoke .ctable__row > .ctable__bon { background: var(--gray-50); }
.spoke .ctable__row--head > .ctable__bon { background: var(--ink-900); color: var(--white); }
.spoke .ctable__bon[data-yes]::before { color: var(--ink-900); }

/* ---- FINAL: mehr Bühne ---- */
.spoke .final { padding: clamp(110px, 14vw, 190px) 0; }
.spoke .final__h2 { font-size: clamp(40px, 6.4vw, 84px); letter-spacing: -0.015em; }
.spoke .final .stars { color: var(--white); }

/* ---- RECHTSSEITEN (impressum/datenschutz) ---- */
.legal-hero { padding: calc(var(--nav-h) + clamp(56px, 8vw, 96px)) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border-subtle); }
.legal-hero h1 { font-size: clamp(38px, 5vw, 64px); margin: 12px 0 0; }
.legal-body { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); }
.legal { max-width: 760px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: clamp(36px, 5vw, 52px) 0 12px; }
.legal h3 { font-size: 17px; font-weight: var(--weight-semibold); margin: 26px 0 8px; }
.legal p { font-size: 15.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 14px;
  overflow-wrap: break-word; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-src { font-size: 13px; color: var(--text-muted); margin-top: clamp(28px, 4vw, 40px); }

/* ---- MAGAZIN (Artikel + Übersicht) ---- */
.mag-hero { padding: calc(var(--nav-h) + clamp(56px, 8vw, 96px)) 0 clamp(32px, 5vw, 52px);
  border-bottom: 1px solid var(--border-subtle); }
.mag-hero .crumb a { color: var(--text-tertiary); }
.mag-hero .crumb a:hover { color: var(--ink-900); }
.mag-hero .crumb__sep { color: var(--gray-300); }
.mag-hero .crumb__cur { color: var(--text-secondary); }
.mag-hero .crumb { border: 0; padding-bottom: 0; margin-bottom: 22px; }
.mag-hero h1 { font-size: clamp(34px, 4.6vw, 58px); max-width: 20ch; margin: 14px 0 0;
  text-wrap: balance; }
.mag-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px;
  font-family: var(--font-label); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); }
.mag-body { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); }
.mag { max-width: 720px; }
.mag-lead { font-size: clamp(17px, 1.8vw, 20px); line-height: 1.65; color: var(--text-primary);
  margin: 0 0 clamp(28px, 4vw, 40px); }
.mag h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em;
  font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin: clamp(40px, 6vw, 60px) 0 14px; }
.mag h3 { font-size: 18px; font-weight: var(--weight-semibold); margin: 28px 0 10px; }
.mag p { font-size: 16px; line-height: 1.72; color: var(--text-secondary); margin: 0 0 16px; }
.mag ul, .mag ol { margin: 0 0 18px; padding-left: 22px; }
.mag li { font-size: 16px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 9px; }
.mag li::marker { color: var(--ink-900); }
.mag a { text-decoration: underline; text-underline-offset: 3px; }
.mag strong { color: var(--text-primary); }
/* Fakten-Box (Zahlen, Checklisten) */
.mag-box { background: var(--gray-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 22px 24px; margin: 26px 0; }
.mag-box p:last-child, .mag-box ul:last-child { margin-bottom: 0; }
.mag-box__label { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: 10px; }
/* CTA-Box (Conversion im Artikel) */
.mag-cta { background: var(--ink-900); color: var(--gray-300); border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 40px); margin: clamp(36px, 5vw, 56px) 0; }
.mag-cta h3 { color: var(--white); font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 10px; line-height: 1.15; }
.mag-cta p { color: var(--gray-300); margin: 0 0 20px; }
.mag-cta .btn--primary { background: var(--white); color: var(--ink-900); border-color: var(--white); }
.mag-cta .btn--primary:hover { background: var(--gray-100); border-color: var(--gray-100); }
/* Autoren-/E-E-A-T-Box */
.mag-author { display: flex; gap: 18px; align-items: center; border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default); padding: 22px 0; margin: clamp(36px, 5vw, 52px) 0 0; }
.mag-author img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.mag-author strong { display: block; font-size: 15px; }
.mag-author span { font-size: 13.5px; color: var(--text-tertiary); line-height: 1.5; }
/* Autoren-Byline (Artikelkopf) */
.mag-byline { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.mag-byline__img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--border-default); }
.mag-byline__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mag-byline__name { font-family: var(--font-sans); font-size: 14.5px; font-weight: var(--weight-semibold);
  color: var(--ink-900); letter-spacing: 0.01em; }
.mag-byline__meta { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); }
/* Titelbild */
.mag-coverwrap { padding: clamp(28px, 4vw, 44px) 0 0; }
.mag-cover { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100);
  box-shadow: var(--shadow-sm); }
.mag-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
/* FAQ im Artikel nutzt .acc aus styles.css */
.mag .acc { margin-top: 8px; }
/* Verwandte Artikel */
.mag-related { padding: 0 0 clamp(72px, 9vw, 110px); }
.mag-related .blog__grid { margin-top: clamp(24px, 3vw, 36px); }
/* Übersichtsseite */
.mag-index-body { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); }
@media (max-width: 640px) {
  .mag-author { align-items: flex-start; }
}

/* ---- RESPONSIVE (Redesign) ---- */
@media (max-width: 960px) {
  .spoke .chero__grid { grid-template-columns: 1fr; align-items: start; }
  .spoke .chero__frame { height: auto; min-height: 0; }
  .spoke .chero__frame img { position: static; height: auto; aspect-ratio: 4/3; }
  .spoke .crumb { display: none; }
  /* Mobile-Order: Bild → Eyebrow → H1 → Ticket (Preis+CTA) → Sub → Facts */
  .spoke .chero__panel { order: 3; margin-top: 24px; }
  .currix { grid-template-columns: 1fr; }
  .currix__head { position: static; margin-bottom: clamp(28px, 5vw, 44px); }
  .shead__meta { display: none; }
  .spoke .pakc--featured { order: -1; transform: none; }
  .spoke .pakc--featured:hover { transform: translateY(-4px); }
  .spoke .tgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .gal { grid-template-columns: 1fr 1fr; }
  .gal__item--lg { grid-row: auto; grid-column: 1 / -1; }
  .gal__item--lg img { aspect-ratio: 4/3; }
  .gal--duo .gal__item--lg img { aspect-ratio: 4/3; }
  .gal__item--wide { grid-column: 1 / -1; }
  .gal--duo, .gal--trio { grid-template-columns: 1fr 1fr; }
  .gal--duo .gal__item:not(.gal__item--lg) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .spoke .tgrid { grid-template-columns: 1fr; }
  .spoke .chero__panel { padding: 18px 16px; }
}