/* Gemeinsame Designsprache der Spezialrechner.
 * Opt-in über .calc-system; Bodygraph und Homepage bleiben unverändert.
 * Nach neu-theme.css und den Seitenstyles laden. Visuals und Chart-Farben
 * gehören weiterhin zum jeweiligen Rechner, die typografischen Rollen hierher.
 */
body.calc-system{
  --calc-title:clamp(1.5rem,1.35rem + .6vw,1.75rem);
  --calc-section:1.5rem;
  --calc-card:1.25rem;
  --calc-copy:.9375rem;
  --calc-label:.6875rem;
  --calc-stage:linear-gradient(150deg,#fdfbf6,#f8f3ea 65%,#f3ece1);
  --calc-line:rgba(61,56,51,.12);
  --calc-shadow:0 24px 60px -36px rgba(67,44,62,.24);
  font-family:var(--font-sans);
}

/* Einstieg: die Schriftfamilien der Homepage, ein gemeinsamer Maßstab. */
body.calc-system .calc-hero{padding:44px 24px 32px;text-align:center}
body.calc-system .calc-hero h1{font-family:var(--font-serif);font-size:clamp(2rem,2.5vw + 1rem,3rem);font-weight:400;line-height:1.14;letter-spacing:-.02em}
body.calc-system .calc-hero .eyebrow{font-family:var(--font-sans);font-size:var(--calc-label);line-height:1.5;letter-spacing:.16em;margin-bottom:12px}
body.calc-system .calc-hero p:not(.eyebrow){font-size:1rem;line-height:1.65;max-width:620px}
body.calc-system .calc-wrap{max-width:1440px;padding-inline:24px}
body.calc-system .recalc-bar{border-radius:16px;padding:14px 20px;box-shadow:var(--calc-shadow)}
body.calc-system .recalc-bar__summary{font-size:1rem;line-height:1.5;overflow-wrap:anywhere}
body.calc-system .recalc-bar__eyebrow{font-size:var(--calc-label);letter-spacing:.12em}
body.calc-system .form-panel{border-radius:24px;box-shadow:var(--calc-shadow)}
body.calc-system .form-panel h2{font-size:var(--calc-card);font-weight:400}
body.calc-system :is(.form-group input,.form-group select){font-size:1rem}
body.calc-system :is(.ghost-btn,.calc-btn,.kk-next){font-family:var(--font-sans);font-size:.8125rem;min-height:42px}

/* Gleiche Rollen, auch wenn ein Rechner andere HTML-Komponenten benutzt. */
body.calc-system .results-below h2{font-family:var(--font-serif);font-size:var(--calc-section);font-weight:400;line-height:1.25;letter-spacing:-.015em}
body.calc-system .results-below h3{font-family:var(--font-serif);font-size:var(--calc-card);font-weight:400;line-height:1.3;letter-spacing:0}
body.calc-system :is(.chart-panel__head h2,.design-summary h2,.kk-missions h2){font-size:var(--calc-section)}
body.calc-system :is(.fam-section-head,.kid-section-head,.cycle-section-head,.moon-stage-head,.section-head){text-align:left}
body.calc-system :is(.fam-section-head,.kid-section-head,.cycle-section-head,.moon-stage-head,.section-head)>p{font-size:var(--calc-copy);line-height:1.65;margin-inline:0;max-width:70ch}
body.calc-system :is(.fam-section-head,.kid-section-head,.cycle-section-head,.moon-stage-head,.section-head)>p:is(.eyebrow,.cycle-eyebrow){font-size:var(--calc-label)}
body.calc-system :is(.fam-glance,.kid-glance,.conn-glance,.ik-glance,.dr-glance)>p:not(.summary-kicker):not(.ik-glance__kicker){font-size:var(--calc-copy);line-height:1.65}
body.calc-system :is(.guide__text,.result-reveal__sub,.ik-glance__theme,.ast-rhead>p:not(.ast-kick),.ast-read>p:not(.ast-kick),.kk-detail__lead,.kk-reflect p){font-size:var(--calc-copy);line-height:1.7}
body.calc-system :is(.kk-choice strong,.ast-name,.ast-mcard .ast-name){font-family:var(--font-serif);font-size:var(--calc-card);font-weight:400;line-height:1.3}
body.calc-system :is(.kk-detail h2,.ast-read h3){font-size:var(--calc-section)}

/* Eine Bühne umfasst Orientierung UND Visual. Keine gestapelten Intro-Karten. */
body.calc-system :is(.calc-stage,.chart-flank,.kk-stage){width:100%;max-width:1200px;margin:24px auto 0;border:1px solid var(--calc-line);border-radius:28px;background:var(--calc-stage);box-shadow:var(--calc-shadow);color:var(--color-text)}
body.calc-system .calc-stage{padding:28px 32px}
body.calc-system .calc-stage>.chart-flank{margin:20px auto 0;padding:16px 0 0;background:none;border:0;border-radius:0;box-shadow:none;max-width:none}
body.calc-system .calc-stage>.chart-flank::before{display:none}
body.calc-system .calc-stage :is(.result-reveal,.ik-reveal){width:100%;max-width:none;height:auto;padding:0 0 22px;margin:0;text-align:left;border:0;border-bottom:1px solid var(--calc-line);border-radius:0;background:none;box-shadow:none}
body.calc-system :is(.calc-stage .result-reveal__title,.calc-stage .ik-reveal__name,.calc-stage>.cycle-section-head h2,.calc-stage>.moon-stage-head h2,.calc-stage>.kid-section-head h2,.kk-stage h2,.ast-rhead h2){font-family:var(--font-serif);font-size:var(--calc-title);font-weight:400;line-height:1.25;letter-spacing:-.015em;color:var(--color-warm-dark)}
body.calc-system .calc-stage .result-reveal__sub{max-width:76ch;margin:10px 0 0}
body.calc-system :is(.calc-stage>.moon-stage-head,.calc-stage>.cycle-section-head,.calc-stage>.kid-section-head){max-width:none;margin:0 0 20px;text-align:left}
body.calc-system :is(.design-summary,.ik-glance,.kk-detail,.ast-read){border-color:var(--calc-line);border-radius:20px;box-shadow:0 12px 30px -24px rgba(67,44,62,.18)}
body.calc-system :is(.path-fork,.guide,.discover){margin-top:40px}
body.calc-system .chart-panel__head{gap:12px;padding-bottom:12px}
body.calc-system .chart-panel__head h2{font-size:1.375rem}

/* KarmaKeys: dieselbe helle Bühne, markante Auswahl durch Aubergine. */
body.calc-system.kk-page{--kk-ink:var(--color-text);--kk-gold:#92713d}
body.calc-system.kk-page .calc-hero .container{display:block;max-width:900px}
body.calc-system.kk-page .calc-hero p{margin-inline:auto}
body.calc-system.kk-page .kk-emblem{display:none}
body.calc-system .kk-stage{padding:28px 32px;overflow:hidden}
body.calc-system .kk-stage::before{border-color:rgba(139,154,130,.1);opacity:.5}
body.calc-system .kk-stage__intro{color:var(--color-text-soft);font-size:var(--calc-copy);max-width:74ch}
body.calc-system .kk-stage__note{color:var(--color-text-muted);font-size:.8125rem}
body.calc-system .kk-choice{color:var(--color-text);background:rgba(255,255,255,.52);border:1px solid var(--calc-line);border-radius:16px;min-height:154px}
body.calc-system .kk-choice:hover{background:#fffdf8;border-color:rgba(92,61,84,.35)}
body.calc-system .kk-choice[aria-pressed="true"]{background:rgba(92,61,84,.07);border-color:var(--color-plum);box-shadow:inset 0 3px var(--color-plum)}
body.calc-system .kk-choice__meta{font-size:.75rem;color:var(--color-text-soft);opacity:1}
body.calc-system .kk-choice__open,body.calc-system .kk-choice[aria-pressed="true"] .kk-choice__open{color:var(--color-plum)}
body.calc-system .kk-detail{max-width:1000px;margin:28px auto;padding:32px;background:var(--color-surface)}
body.calc-system .kk-question{background:rgba(139,154,130,.1);border:1px solid rgba(139,154,130,.2)}
body.calc-system .kk-question blockquote{font-size:var(--calc-card)}
body.calc-system .kk-empty-link{color:var(--color-plum)}

/* Bestehende Visuals behalten ihr eigenes Format. */
body.calc-system .ast-result{max-width:1200px;padding:28px 32px;border:1px solid var(--calc-line);border-radius:28px;background:var(--calc-stage);box-shadow:var(--calc-shadow);margin-top:24px}
body.calc-system .ast-cards{margin-top:26px}
body.calc-system .ast-card{border-radius:16px}
body.calc-system .ast-read{max-width:none}
body.calc-system .ast-more{max-width:1136px}
body.calc-system .ast-more .ast-rhead h2{font-size:var(--calc-section)}
body.calc-system .calc-stage .ik-stage{max-width:none;padding:8px 0 0;margin-top:20px;gap:32px}
body.calc-system .calc-stage .ik-chips{justify-content:flex-start}
body.calc-system .calc-stage .ik-reveal__lead{font-size:1rem;line-height:1.65;max-width:75ch;margin-inline:0}
body.calc-system .calc-stage .ik-glance{padding:24px}
body.calc-system .calc-stage .tr-lage{max-width:none;margin:0;padding:0 0 20px;background:none;border:0;border-bottom:1px solid var(--calc-line);border-radius:0;box-shadow:none}
body.calc-system .tr-lage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 24px}
body.calc-system .tr-lage__who{grid-column:1/3}
body.calc-system .tr-lage__sun{grid-column:3;grid-row:1}
body.calc-system :is(.tr-lage__level,.tr-lage__rel,.tr-lage__world){min-width:0}
body.calc-system .tr-lage__hint{grid-column:1/-1}
body.calc-system .tr-lage__ebene{font-size:var(--calc-label);margin-bottom:8px}
body.calc-system :is(.tr-lage__rel,.tr-lage__world) small{font-size:.75rem;line-height:1.5}
body.calc-system .tr-lage__level b{font-size:var(--calc-title);font-weight:400}
body.calc-system .tr-lage__who .k{font-size:var(--calc-label)}
body.calc-system .tr-lage__sun .theme{white-space:normal;line-height:1.5;text-align:left}
body.calc-system .tr-lage__hint{font-size:.8125rem;line-height:1.6;font-style:normal}
body.calc-system .calc-stage .tr-daynav{max-width:none;margin:16px 0}
body.calc-system .cycle-block.calc-stage{max-width:1200px}
body.calc-system .calc-stage .gz-sum{max-width:none;margin:0}

/* Traum-Rave: beide Charts sind der Einstieg; die Bedeutung steht daneben. */
body.calc-system .calc-stage--dream{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:32px;align-items:start}
body.calc-system .calc-stage--dream .dr-daynight{max-width:none;margin:0;padding:0}
body.calc-system .calc-stage--dream .dr-daynight>h2{font-size:var(--calc-title);text-align:left}
body.calc-system .calc-stage--dream .dr-daynight__intro{font-size:var(--calc-copy);text-align:left;margin:8px 0 20px}
body.calc-system .calc-stage--dream .dr-glance{display:block;width:100%;max-width:none;height:auto;padding:24px;margin:0;text-align:left;overflow:visible}
body.calc-system .dr-glance .dr-title{font-size:var(--calc-section)}
body.calc-system .dr-glance .dr-benefit{font-family:var(--font-serif);font-size:var(--calc-card);line-height:1.35}
body.calc-system .dr-meaning{max-width:none;margin-top:16px}
body.calc-system .dr-meaning :is(.dr-meaning__lead,.dr-meaning__extra,.dr-meaning__tip){font-size:var(--calc-copy);line-height:1.65}
body.calc-system .calc-stage--dream .dr-chartcard{padding:14px;border-radius:16px}

/* Einheitliche Label-Rolle. Die Kontextselektoren schlagen die allgemeinen
 * Absatzregeln der Seiten; sonst wurde etwa .ast-kick wieder zu 15-px-Fließtext.
 * Echte Überschriften behalten ihre eigene Rolle (z. B. .moon-card__kicker).
 */
body.calc-system :is(.summary-kicker,.chart-panel__kicker,.result-reveal__kicker,.ik-reveal__kicker,.ik-glance__kicker,.cycle-eyebrow,.rave-section__eyebrow,.kk-eyebrow,.ast-kick,.ast-rhead>.ast-kick,.ast-read>.ast-kick,.kid-section-head>.eyebrow,.moon-stage-head>.eyebrow,.cycle-section-head>.cycle-eyebrow,.tr-lage__who>.k,.tr-lage__ebene,.fam-switch__kicker,.kid-switch__kicker,.kid-card__kicker,.moon-chart-kicker,.moon-day__kicker){font-family:var(--font-sans);font-size:var(--calc-label);font-weight:600;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;color:var(--color-taupe)}
body.calc-system :is(.result-reveal__kicker,.ik-reveal__kicker,.kk-stage>.kk-eyebrow,.ast-rhead>.ast-kick,.ast-read>.ast-kick,.kid-section-head>.eyebrow,.moon-stage-head>.eyebrow,.cycle-section-head>.cycle-eyebrow){display:block;margin:0 0 12px}
body.calc-system .moon-flank #moonRing>.summary-kicker{font-size:var(--calc-label);font-weight:600;line-height:1.5;letter-spacing:.13em}
body.calc-system .ast-kick::before{content:none}

@media(max-width:900px){
  body.calc-system .calc-stage--dream{grid-template-columns:minmax(0,1fr)}
  body.calc-system .calc-stage--dream .dr-glance{max-width:none}
}
@media(max-width:650px){
  body.calc-system{--calc-section:1.375rem;--calc-card:1.125rem}
  body.calc-system .calc-wrap{padding-inline:14px}
  body.calc-system .calc-hero{padding:30px 20px 26px}
  body.calc-system .calc-hero h1{font-size:2rem}
  body.calc-system :is(.calc-stage,.kk-stage,.ast-result){padding:22px 18px;border-radius:22px}
  body.calc-system .calc-stage>.chart-flank{padding-inline:0}
  body.calc-system .chart-flank{border-radius:22px}
  body.calc-system .kk-detail{padding:24px 20px}
  body.calc-system .kk-choice{min-height:0}
  body.calc-system .recalc-bar{gap:12px;padding:14px 16px}
  body.calc-system .calc-stage--dream{gap:24px}
  body.calc-system .calc-stage--dream .dr-glance{padding:20px}
  body.calc-system .ast-cards{gap:12px}
  body.calc-system .ast-card{padding:24px 12px 18px}
  body.calc-system .ast-short{font-size:.875rem}
  body.calc-system .tr-lage{grid-template-columns:minmax(0,1fr);gap:16px}
  body.calc-system :is(.tr-lage__who,.tr-lage__sun,.tr-lage__hint){grid-column:auto;grid-row:auto;text-align:left;margin:0}
}
@media(max-width:420px){
  body.calc-system .ast-cards{grid-template-columns:minmax(0,1fr)}
}