/* ============================================================
   FREDDIE Typografie-System  (Owner-Freigabe 30.09.2026)
   Eine Skala fuer alle Seiten. Jede Rolle hat genau eine
   Groesse und ein Gewicht; innerhalb einer Seite variieren
   nur die Rollen, nie die Werte einer Rolle.
   Einbindung: auf jeder Seite direkt nach freddie-fonts.css.
   Die Rollen-Regeln tragen !important, damit sie die
   seiteneigenen Regeln (inline <style>, Media Queries)
   unabhaengig von Ladereihenfolge und Spezifitaet
   ueberschreiben. Typografie wird nur hier geaendert. Layout, Farben, Abstaende bleiben Sache der
   Seite; hier stehen nur Schriftfamilie, Groesse, Gewicht,
   Zeilenhoehe, Laufweite und Versalien.
   Vorschau der Skala: design-exploration/typo-system-vorschlag.html
   ============================================================ */

:root{
  --t-serif:"Cormorant Garamond",Georgia,serif;
  --t-sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* Display  - Hero-H1 */
  --t-display-size:clamp(38px,5vw,68px);   --t-display-lh:1.05;
  /* Headline - Abschnitts-H2 */
  --t-h2-size:clamp(30px,3.8vw,50px);      --t-h2-lh:1.1;
  /* Headline S - Unterabschnitt, Teaser, App-Ueberschrift */
  --t-h3-size:clamp(24px,2.8vw,36px);      --t-h3-lh:1.12;
  /* Title - Karten- und Schritt-Titel (Serif) */
  --t-title-size:22px;                     --t-title-lh:1.2;
  /* Title S - funktionale Listen: FAQ, Features, Checklisten (Sans) */
  --t-title-s-size:15px;                   --t-title-s-lh:1.4;
  /* Claim - Aussage-Satz, Zitat (einziges Gewicht 600) */
  --t-claim-size:clamp(20px,2.2vw,26px);   --t-claim-lh:1.35;
  /* Number - Kennzahl, Preis in Stat-Bloecken */
  --t-num-size:clamp(36px,3.6vw,48px);     --t-num-lh:1;
  /* Number S - Kennzahl/Preis innerhalb von Karten und Zeilen */
  --t-num-s-size:26px;
  /* Eyebrow - Vorzeile ueber Ueberschriften */
  --t-eyebrow-size:11px;   --t-eyebrow-ls:.2em;
  /* Tag - Etikett in Karten, Badges, Tabellenkoepfe */
  --t-tag-size:10.5px;     --t-tag-ls:.14em;
  /* Lead - Hero-Subline */
  --t-lead-size:clamp(16px,1.8vw,18px);    --t-lead-lh:1.6;
  /* Body / Body S / Caption */
  --t-body-size:16px;      --t-body-lh:1.65;
  --t-body-s-size:14px;    --t-body-s-lh:1.6;
  --t-caption-size:12.5px; --t-caption-lh:1.5;
}

/* ---------- Rollen als Klassen (fuer neue Elemente) ---------- */
.t-display{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-display-size)!important;line-height:var(--t-display-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-h2{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-h2-size)!important;line-height:var(--t-h2-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-h3{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-h3-size)!important;line-height:var(--t-h3-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-title{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-title-size)!important;line-height:var(--t-title-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-title-s{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-title-s-size)!important;line-height:var(--t-title-s-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-claim{font-family:var(--t-serif)!important;font-weight:600!important;font-size:var(--t-claim-size)!important;line-height:var(--t-claim-lh)!important;letter-spacing:0!important;text-transform:none!important}
.t-num{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-num-size)!important;line-height:var(--t-num-lh)!important;letter-spacing:0!important}
.t-num-s{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-num-s-size)!important;line-height:1!important;letter-spacing:0!important}
.t-eyebrow{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-eyebrow-size)!important;line-height:1.4!important;letter-spacing:var(--t-eyebrow-ls)!important;text-transform:uppercase!important}
.t-tag{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-tag-size)!important;line-height:1.4!important;letter-spacing:var(--t-tag-ls)!important;text-transform:uppercase!important}
.t-lead{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-lead-size)!important;line-height:var(--t-lead-lh)!important}
.t-body{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-body-size)!important;line-height:var(--t-body-lh)!important}
.t-body-s{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-body-s-size)!important;line-height:var(--t-body-s-lh)!important}
.t-caption{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-caption-size)!important;line-height:var(--t-caption-lh)!important}

/* ============================================================
   Rollen-Mapping: bestehende Selektoren -> Rolle
   ============================================================ */

/* ---------- Display: Hero-H1 ---------- */
html .hero h1,
html .shero h1,
html .hero-in h1,
html .kz-hero h1,
html .konfig-head h1,
html body > main > h1,
html body > h1{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-display-size)!important;line-height:var(--t-display-lh)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Headline: Abschnitts-H2 ---------- */
html .sec-h,
html .markt-h,
html .pk-h,
html .form-title,
html .pilot h2,
html .demo-strip h2,
html .teaser-text h2,
html .paths-head h2,
html .kz-end h2,
html .s-title,
html .manifest h2,
html .sec .head h2,
html .sec h2,
html .head h2,
html .bridge h2,
html.t-legal h1{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-h2-size)!important;line-height:var(--t-h2-lh)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Headline S: Unterabschnitt, Teaser, App-Kopf ---------- */
html .mk-sub-h,
html .ch h1,
html .rh h2,
html .karte h2,
html .success-wrap h2,
html .err h2,
html #success h3{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-h3-size)!important;line-height:var(--t-h3-lh)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Title: Karten-/Schritt-Titel (Serif) ---------- */
html .path h3,
html .step h3,
html .card h3,
html .pk h3,
html .uc h3,
html .tier h3,
html .stu-card h3,
html .bcard h3,
html .chain-card h3,
html .system h3,
html .term h3,
html .situation h3,
html .branch-title,
html .pilot-box h3,
html .fc-h,
html .cf-title,
html .pw-title,
html .ph-title,
html .role-h h3,
html .pkg-head,
html .pv-head,
html .ns-head,
html .tt,
html .kve strong,
html .cmp-col h3,
html .modepanel h3,
html #ov h3,
html .chain-mini li span,
html .cmp-badge b,
html.t-legal h2{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-title-size)!important;line-height:var(--t-title-lh)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Title S: funktionale Listen (Sans) ---------- */
html .step-item h4,
html .step h4,
html .bcard h4,
html .faq-item h4,
html .faq-item button,
html .faq summary,
html .feat-mini h5,
html .lopt h3,
html .pkg-name,
html .bo-title,
html .t-h,
html .pc-name,
html .ri-title,
html .step-t,
html .oh-title,
html .mk-t,
html .mcard-label,
html .bs-text,
html .bc-n,
html .db-top h3,
html .sec h4,
html .konzept h4,
html .ecard h4{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-title-s-size)!important;line-height:var(--t-title-s-lh)!important;letter-spacing:0!important;text-transform:none!important}

/* ---------- Claim: Aussage-Satz, Zitat ---------- */
html .markt-claim-text,
html .chain-sum,
html .pb-lead,
html .sz-quote,
html .pkg-versprechen,
html .tree-root strong,
html .cap{font-family:var(--t-serif)!important;font-weight:600!important;font-size:var(--t-claim-size)!important;line-height:var(--t-claim-lh)!important;letter-spacing:0!important;text-transform:none!important}
html .pb-lead em,html .markt-claim-text em,html .chain-sum em{font-weight:600!important}

/* ---------- Number: Kennzahl in Stat-Bloecken ---------- */
html .mk-num,
html .step-n,
html .chain-n,
html .mcard-num,
html .bs-num,
html .fz-n,
html .hero-facts strong,
html .sn,
html .steps .step-num,
html .how .step-num,
html .step-num.big,
html .pc-price,
html .pc-free,
html .pk-eur,
html .tier-price,
html .sb,
html .en .ev,
html .total-v,
html .ev-v,
html .bn-val,
html .ph-price,
html .konzept .strom .big,
html .ecard .big{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-num-size)!important;line-height:var(--t-num-lh)!important;letter-spacing:0!important}
/* Number S: Preis/Wert innerhalb von Karten und Zeilen */
html .bo-price,
html .pw-tier-price,
html .kz-body .pc-price,
html .seg .sg-v,
html .ov-p,
html .ro b,
html .feat-mini-icon b,
html .pv-tiefe-val,
html .kz-body .step-num{font-family:var(--t-serif)!important;font-weight:700!important;font-size:var(--t-num-s-size)!important;line-height:1!important;letter-spacing:0!important}

/* ---------- Eyebrow: Vorzeile ueber Ueberschriften ---------- */
html .kicker,
html .sec-label,
html .sec-l,
html .markt-kicker,
html .pk-kicker,
html .pb-kicker,
html .form-kicker,
html .pl,
html .pilot .pl,
html .subnav-l,
html .map-h span,
html .kve b,
html .hs-cap b,
html .chain-mini li b,
html .s-kicker,
html .eyebrow,
html .sec .eyebrow,
html .pkg-kicker,
html .pv-kicker,
html .ns-kicker,
html .k-kicker,
html .study-kicker,
html .scard-kicker,
html .bcard-kicker,
html .mnav-lang .lang-lbl,
html .kz-badge,
html .kz-paket,
html .hero .hint{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-eyebrow-size)!important;line-height:1.4!important;letter-spacing:var(--t-eyebrow-ls)!important;text-transform:uppercase!important}

/* ---------- Tag: Etikett in Karten, Badges, Tabellenkoepfe ---------- */
html .path-tag,
html .pk-name,
html .pk-pre,
html .pc-label,
html .pc-num,
html .uc-badge,
html .fc-badge,
html .tier-badge,
html .tier-pre,
html .branch-badge,
html .chain-tag,
html .sys-tag,
html .sys-need b,
html .situation .fit b,
html .b2b-badge,
html .bo-tier,
html .pkg-badge,
html .pkg-zwei-kicker,
html .s4-var-k,
html .ts,
html .tip-label,
html .n1-cl,
html .n1-head-c,
html .n1-modus-b,
html .n1-auto,html .n1-pers,
html .pv-lbl,
html .pv-tiefe-lbl,
html .pv-ins-lbl,
html .pv-warn-lbl,
html .lbl,
html .kz-body .tag,
html .seg .sg-t,
html .ov-t,
html .oh-badge,
html .node .nl,
html .ch-l,
html .ri-lbl,
html .kz-body th,
html .sec-head,
html .teaser-block h4,
html .blk-h,
html .chat-qs-label,
html .trust,
html .mh,
html .cmp-side,
html .chip small,
html .more .mi b,
html .modes button,
html .tabs button,
html .tab,
html .hold,
html .sec h5,
html .konzept h5,
html .ecard h5,
html #audio .panel label,
html .pc-tag,
html .steps .st .n,
html .cmp-col h3 span,
html .ro small,
html .frame .badge span,
html .kh,
html.t-erlebe li > span > b{font-family:var(--t-sans)!important;font-weight:700!important;font-size:var(--t-tag-size)!important;line-height:1.4!important;letter-spacing:var(--t-tag-ls)!important;text-transform:uppercase!important}

/* ---------- Lead: Hero-Subline ---------- */
html .hero .sub,
html .shero .sub,
html .hero-in .sub,
html .kz-sub{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-lead-size)!important;line-height:var(--t-lead-lh)!important}

/* ---------- Body: Abschnittstext ---------- */
html .sec-b,
html .pk-sub,
html .markt-sub,
html .mk-sub-p,
html .paths-head p,
html .teaser-text p,
html .demo-strip p,
html .pilot p,
html .form-sub,
html .manifest p,
html .sec .head p,
html .bridge p{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-body-size)!important;line-height:var(--t-body-lh)!important}

/* ---------- Body S: Kartentext ---------- */
html .path p,
html .step p,
html .card p,
html .pk p,
html .uc p,
html .bcard p,
html .mcard-desc,
html .mk-d,
html .kve p,
html .step-item p,
html .faq-item p,
html .faq p,
html .pc-desc,
html .branch-sub,
html .stu-card p,
html .pilot-box p,
html .hint-box,
html .chain-card li,
html .tier li,
html .feat-mini p,
html .bc-d,
html blockquote{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-body-s-size)!important;line-height:var(--t-body-s-lh)!important}

/* ---------- Caption: Quellen, Hinweise, Stat-Labels ---------- */
html .mcard-src,
html .mk-src,
html .bs-src,
html .pc-note,
html .tier-note,
html .form-note,
html .study-note,
html cite,
html .hero-note,
html .src,
html .pilot-terms span,
html .pilot-terms2 span,
html .chat-footer,
html .db-top p,
html .sl,
html .sl2,
html .fz-l,
html .hero-facts span,
html .bn-lbl,
html .uc-note{font-family:var(--t-sans)!important;font-weight:400!important;font-size:var(--t-caption-size)!important;line-height:var(--t-caption-lh)!important}
html .mk-num small,html .pk-eur small,html .sb .unit,html .bn-val small,html .ev-v small,html .pc-price small{font-family:var(--t-sans)!important;font-weight:600!important;font-size:14px!important;line-height:1!important}

/* ---------- Versal-Buttons der Erlebe-Seite: Gewicht wie alle Buttons (700), Groesse bleibt ---------- */
html.t-erlebe .cmp-btns button,
html.t-erlebe .views button,
html.t-erlebe .exfoot .mark,
html.t-erlebe .cta .btn{font-weight:700!important}