/* ==========================================================================
   KLS Typography System
   Central role layer loaded after legacy styles.
   ========================================================================== */

:root {
  --type-font-display: 'Fraunces', Georgia, serif;
  --type-font-voice: 'Cormorant Garamond', Georgia, serif;
  --type-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --type-font-label: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-font-signature: 'Caveat', cursive;

  --type-color-title: var(--ink-deep, #0f0a05);
  --type-color-body: var(--ink-strong, #2a1f12);
  --type-color-muted: var(--color-text-secondary, #5c4a36);
  --type-color-soft: rgba(92, 74, 54, 0.76);
  --type-color-kicker: var(--counter, #1e3a4c);
  --type-color-accent: var(--accent, #c4923b);
  --type-color-on-dark-title: var(--color-text-on-dark, #f4ece0);
  --type-color-on-dark-body: rgba(244, 236, 224, 0.86);
  --type-color-on-dark-muted: var(--color-text-muted-dark, #8c7b66);
  --type-color-on-accent: var(--ink-deep, #0f0a05);

  --type-hero-title-size: 42px;
  --type-hero-title-line: 1.07;
  --type-hero-title-weight: 500;

  --type-hero-description-size: 17px;
  --type-hero-description-line: 1.56;
  --type-hero-description-weight: 400;

  --type-section-kicker-size: 11px;
  --type-section-kicker-line: 1.35;
  --type-section-kicker-weight: 600;

  --type-section-title-size: 34px;
  --type-section-title-line: 1.06;
  --type-section-title-weight: 500;

  --type-section-description-size: 17px;
  --type-section-description-line: 1.58;
  --type-section-description-weight: 400;

  --type-card-title-size: 24px;
  --type-card-title-line: 1.12;
  --type-card-title-weight: 500;

  --type-card-description-size: 16px;
  --type-card-description-line: 1.58;
  --type-card-description-weight: 400;

  --type-body-size: 16px;
  --type-body-line: 1.62;
  --type-body-weight: 400;

  --type-muted-size: 14px;
  --type-muted-line: 1.5;
  --type-muted-weight: 400;

  --type-nav-size: 12px;
  --type-nav-line: 1.2;
  --type-nav-weight: 600;

  --type-button-size: 13px;
  --type-button-line: 1.1;
  --type-button-weight: 600;

  --type-caption-size: 11px;
  --type-caption-line: 1.45;
  --type-caption-weight: 600;

  --type-footer-size: 14px;
  --type-footer-line: 1.58;
  --type-footer-weight: 400;

  --type-voice-size: 29px;
  --type-voice-line: 1.16;
  --type-voice-weight: 500;

  --type-number-size: 52px;
  --type-number-line: 0.95;
  --type-number-weight: 400;

  --type-signature-size: 34px;
  --type-signature-line: 1;

  --font-display: var(--type-font-display);
  --font-body: var(--type-font-body);
  --font-mono: var(--type-font-label);
}

@media (min-width: 768px) {
  :root {
    --type-hero-title-size: 56px;
    --type-hero-description-size: 18px;
    --type-section-title-size: 48px;
    --type-card-title-size: 28px;
    --type-voice-size: 38px;
    --type-number-size: 72px;
    --type-signature-size: 42px;
  }
}

@media (min-width: 1180px) {
  :root {
    --type-hero-title-size: 68px;
    --type-section-title-size: 64px;
    --type-card-title-size: 32px;
    --type-voice-size: 48px;
    --type-number-size: 92px;
  }
}

.section--dark,
.hero--tall,
.hero--statement,
.statement,
.machine-hero,
.leistungen-hero,
.coffee-hero,
.coffee-package,
.about-contact,
.quiet-cta--dark,
.machine-final-cta,
.card--dark,
.home-final,
.final-cta,
.site-footer,
.mobile-menu {
  --type-context-title: var(--type-color-on-dark-title);
  --type-context-body: var(--type-color-on-dark-body);
  --type-context-muted: var(--type-color-on-dark-muted);
  --type-context-kicker: var(--type-color-accent);
}

.home-package .package-card {
  --type-context-title: var(--type-color-on-dark-title);
  --type-context-body: rgba(250, 247, 242, 0.94);
  --type-context-muted: rgba(244, 236, 224, 0.86);
  --type-context-kicker: rgba(244, 236, 224, 0.9);
}

body {
  font-family: var(--type-font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  color: var(--type-context-body, var(--type-color-body));
}

h1,
h2,
h3,
h4,
p,
li,
span,
a,
button,
input,
select,
textarea {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--type-font-display);
  color: var(--type-context-title, var(--type-color-title));
  font-weight: var(--type-section-title-weight);
  letter-spacing: 0 !important;
  text-wrap: balance;
}

p,
li {
  color: var(--type-context-body, var(--type-color-body));
}

.type-hero-title,
.hero__statement-h1,
.machine-hero__content h1,
.leistungen-hero__content h1,
.coffee-hero__content h1,
.hero--medium h1,
.hero--xs h1,
.configurator-surface .intro h1 {
  font-family: var(--type-font-display) !important;
  font-size: var(--type-hero-title-size) !important;
  line-height: var(--type-hero-title-line) !important;
  font-weight: var(--type-hero-title-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.type-hero-description,
.hero__statement-lead,
.machine-hero__content .body-l,
.leistungen-hero__content .body-l,
.coffee-hero__content .body-l,
.hero--medium .body-l,
.hero--xs .body-l {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-hero-description-size) !important;
  line-height: var(--type-hero-description-line) !important;
  font-weight: var(--type-hero-description-weight) !important;
  color: var(--type-context-body, var(--type-color-muted)) !important;
}

.type-section-kicker,
.eyebrow,
.kicker,
.row__meta,
.leistungen-card__kicker,
.leistungen-journey__label,
.machine-category-intro__label,
.featured-product__eyebrow,
#sortiment .featured-product__eyebrow,
.product-card__brand,
.brand-panel__note,
.process-step__phase,
.package-card__content span,
.stefan-facts span,
.example__label,
.form-field span,
.contact-form .form-field span,
.footer-pill,
.small-label,
.progress-head,
.form-note,
.machine-meta,
.map-card__steps li .num,
.featured-product__badge,
.featured-product__spec-label,
.product-card__specs li,
.machine-card__meta span,
.machine-card__chip,
.machine-compass__makers span {
  font-family: var(--type-font-label) !important;
  font-size: var(--type-section-kicker-size) !important;
  line-height: var(--type-section-kicker-line) !important;
  font-weight: var(--type-section-kicker-weight) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--type-context-kicker, var(--type-color-kicker)) !important;
}

.eyebrow,
.featured-product__eyebrow,
#sortiment .featured-product__eyebrow,
.type-section-kicker,
.configurator-surface .intro .kicker {
  color: var(--type-color-accent) !important;
}

.eyebrow::after,
.featured-product__eyebrow::after,
#sortiment .featured-product__eyebrow::after {
  background: var(--type-color-accent) !important;
}

.type-section-title,
h2,
.section-header h2,
.home-section__intro h2,
.markets-section-head h2,
.process-journey__intro h2,
.leistungen-overview__header h2,
.leistungen-faq__header h2,
.accessories-section__header h2,
.leistungen-partners__header h2,
.machine-compass__intro h2,
.machine-category__head h2,
.coffee-system__header h2,
.coffee-package__intro h2,
#sortiment .espresso-section-title,
.final-block h2,
.quiet-cta h2,
.machine-final-cta h2,
.leistungen-overview__cta-copy h3,
.contact-form h2,
.intro h1 {
  font-family: var(--type-font-display) !important;
  font-size: var(--type-section-title-size) !important;
  line-height: var(--type-section-title-line) !important;
  font-weight: var(--type-section-title-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.type-section-description,
.body-l,
.section-header p,
.home-section__intro p,
.markets-section-head p,
.process-journey__intro p,
.leistungen-overview__header p,
.leistungen-overview__cta-copy p,
.leistungen-card__text,
.leistungen-journey__copy p,
.accessories-section__header p,
.accessory-card p,
.machine-compass__intro p,
.machine-category__head p,
.machine-advice p,
.machine-final-cta p,
.coffee-system__header p,
.coffee-package__intro p,
.featured-product__intro,
#sortiment .featured-product__intro,
.featured-product__story,
.package-copy p,
.stefan-copy .body-l,
.final-block p,
.intro__copy,
.contact-intro,
.about-contact__copy p {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-section-description-size) !important;
  line-height: var(--type-section-description-line) !important;
  font-weight: var(--type-section-description-weight) !important;
  color: var(--type-context-body, var(--type-color-muted)) !important;
}

.type-card-title,
h3,
h4,
.card h3,
.market-list__title,
.process-list h3,
.package-card__content strong,
.package-card__content h3,
.featured-product__title,
#sortiment .featured-product__title,
.featured-product__name,
.product-card__name,
.coffee-system__benefit h3,
.coffee-package-card__body h3,
.leistungen-card h3,
.leistungen-journey__copy h3,
.accessory-card h3,
.machine-compass__path-copy strong,
.machine-maker__head h3,
.machine-card h3,
.question-title,
.option-title,
.ledger-panel h2,
.lead-panel h2,
.result-title,
.machine-name {
  font-family: var(--type-font-display) !important;
  font-size: var(--type-card-title-size) !important;
  line-height: var(--type-card-title-line) !important;
  font-weight: var(--type-card-title-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.configurator-surface .option-card .option-title {
  font-size: clamp(22px, calc(20px + 0.35vw), 26px) !important;
  line-height: 1.16 !important;
}

.type-card-description,
.card p,
.market-list__description,
.process-list p,
.package-card__content p,
.stefan-copy p,
.featured-product__copy,
.product-card__body,
.coffee-system__benefit p,
.coffee-package-card__body p,
.machine-compass__path-copy small,
.machine-card__description,
#sortiment .featured-product__benefits li,
.leistungen-journey__keywords span,
.leistungen-card__keywords span,
.machine-category__signals li,
.machine-card__pdf,
.machine-card__contact,
.question-copy,
.option-hint,
.answer-option__copy,
.summary-list span,
.teaser-row span,
.result-line span,
.assumption-row span,
.contact-aside__block p,
.map-card__address,
.map-card__address-sub,
.map-card__steps li .text,
.map-card__hours {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-card-description-size) !important;
  line-height: var(--type-card-description-line) !important;
  font-weight: var(--type-card-description-weight) !important;
  color: var(--type-context-body, var(--type-color-muted)) !important;
}

.type-body,
.legal p,
.legal li,
.contact-form input,
.contact-form select,
.contact-form textarea,
.form-field input,
.form-field select,
.form-field textarea,
.form-check,
.footer-list li,
.footer-list a {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  font-weight: var(--type-body-weight) !important;
  color: var(--type-context-body, var(--type-color-body)) !important;
}

.type-muted,
.small,
.form-hint,
.form-note,
.contact-aside__hours,
.legal__updated,
.footer-tagline,
.footer-bottom,
.detail-row span,
.kpi-card small,
.chart-caption,
.bar-label {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-muted-size) !important;
  line-height: var(--type-muted-line) !important;
  font-weight: var(--type-muted-weight) !important;
  color: var(--type-context-muted, var(--type-color-soft)) !important;
}

.type-nav,
.nav-link,
.header-phone,
.mobile-menu__nav a,
.mobile-bar a {
  font-family: var(--type-font-label) !important;
  font-size: var(--type-nav-size) !important;
  line-height: var(--type-nav-line) !important;
  font-weight: var(--type-nav-weight) !important;
  letter-spacing: 0 !important;
  color: inherit;
}

.type-button,
.btn,
.configurator-surface .btn,
.text-link,
.accessory-card__link,
.machine-compass__path-action,
.machine-card__pdf,
.machine-card__contact,
.row__cta {
  font-family: var(--type-font-label) !important;
  font-size: var(--type-button-size) !important;
  line-height: var(--type-button-line) !important;
  font-weight: var(--type-button-weight) !important;
  letter-spacing: 0 !important;
  color: inherit;
}

.btn--primary,
.site-header.is-scrolled .btn--primary {
  color: var(--type-color-on-accent) !important;
}

.type-caption,
.caption,
.pill,
.marquee__caption span,
.trust-strip__caption,
.hero__service-strip span,
.stefan-role,
.footer-pill,
.contact-row__label,
.machine-compass__makers a,
.machine-card__meta span,
.featured-product__spec-label,
.result-primary__label,
.kpi-card span {
  font-family: var(--type-font-label) !important;
  font-size: var(--type-caption-size) !important;
  line-height: var(--type-caption-line) !important;
  font-weight: var(--type-caption-weight) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
  color: var(--type-context-kicker, var(--type-color-kicker)) !important;
}

.type-footer,
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-footer-size) !important;
  line-height: var(--type-footer-line) !important;
  font-weight: var(--type-footer-weight) !important;
  color: var(--type-context-body, var(--type-color-on-dark-body)) !important;
}

.site-footer h4 {
  font-family: var(--type-font-label) !important;
  font-size: var(--type-caption-size) !important;
  line-height: var(--type-caption-line) !important;
  font-weight: var(--type-caption-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-color-accent) !important;
}

.trust-strip__pitch,
.statement__text,
.stefan-pull,
.example__quote,
.t-tile__quote,
.hero__card-lead,
.question-title {
  font-family: var(--type-font-voice) !important;
  font-size: var(--type-voice-size) !important;
  line-height: var(--type-voice-line) !important;
  font-weight: var(--type-voice-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.about-values .example__label {
  font-size: 10px !important;
  line-height: 1.35 !important;
}

.about-values .example__quote {
  font-size: clamp(21px, 1.75vw, 29px) !important;
  line-height: 1.18 !important;
  font-weight: 500 !important;
}

.row__num,
.process-step__num,
.leistungen-card__number,
.coffee-package-card__number,
.machine-compass__path-number,
.featured-product__spec-num,
.stefan-meta__num,
.statement__num,
.big-number,
.result-primary__value,
.kpi-card strong,
.step-mockup__num,
.stat__num {
  font-family: var(--type-font-voice) !important;
  font-size: var(--type-number-size) !important;
  line-height: var(--type-number-line) !important;
  font-weight: var(--type-number-weight) !important;
  letter-spacing: 0 !important;
  color: var(--type-context-kicker, var(--type-color-accent)) !important;
}

.stefan-signature {
  font-family: var(--type-font-signature) !important;
  font-size: var(--type-signature-size) !important;
  line-height: var(--type-signature-line) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.machine-compass__path-number {
  font-size: clamp(58px, 5.4vw, 78px) !important;
  line-height: 0.88 !important;
  font-weight: 400 !important;
}

.legal h2 {
  font-size: var(--type-card-title-size) !important;
  line-height: var(--type-card-title-line) !important;
}

.legal h3 {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  font-weight: 600 !important;
  color: var(--type-color-title) !important;
}

.legal__updated {
  margin-top: 48px;
}

.contact-intro {
  max-width: 560px;
}

.machine-card__chip {
  color: var(--type-color-accent) !important;
}

.coffee-crema-products .pill {
  color: var(--type-color-accent) !important;
  border-color: rgba(196, 146, 59, 0.42) !important;
  border-color: color-mix(in srgb, var(--type-color-accent) 42%, transparent) !important;
  background: rgba(196, 146, 59, 0.055) !important;
  background: color-mix(in srgb, var(--type-color-accent) 6%, transparent) !important;
}

.contact-aside__phone,
.final-phone,
.leistungen-overview__call {
  font-family: var(--type-font-display) !important;
  font-size: var(--type-card-title-size) !important;
  line-height: var(--type-card-title-line) !important;
  font-weight: var(--type-card-title-weight) !important;
  color: var(--type-color-accent) !important;
}

.leistungen-overview__cta-copy h3 {
  font-family: var(--type-font-display) !important;
  font-size: clamp(30px, 2.7vw, 40px) !important;
  line-height: 1.08 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.leistungen-overview__cta-copy p {
  font-family: var(--type-font-body) !important;
  font-size: clamp(15.5px, 1.05vw, 16.5px) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  color: rgba(92, 74, 54, 0.78) !important;
}

.leistungen-overview__cta-actions .btn {
  font-family: var(--type-font-label) !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
  font-weight: 650 !important;
  letter-spacing: 0.035em !important;
}

.leistungen-overview__call {
  font-family: var(--type-font-label) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  letter-spacing: 0.045em !important;
  color: rgba(42, 31, 18, 0.82) !important;
}

.marquee__caption strong,
.brand-panel a,
.summary-list strong,
.teaser-row strong,
.result-line strong,
.assumption-row strong,
.detail-row strong,
.contact-aside__block strong,
.map-card__steps li .text strong,
.map-card__hours strong {
  font-family: var(--type-font-body) !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--type-context-title, var(--type-color-title)) !important;
}

.contact-aside__block--accent strong {
  font-family: var(--type-font-display) !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  line-height: 1.12 !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--color-text-on-dark, #f4ece0) !important;
}

.contact-aside__block--accent p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(244, 236, 224, 0.78) !important;
}

.contact-aside__block--accent .btn {
  color: var(--ink-deep, #0f0a05) !important;
}

.home-package .package-card__content {
  text-shadow: 0 1px 18px rgba(15, 10, 5, 0.48);
}

.home-package .package-card__content span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: rgba(244, 236, 224, 0.92) !important;
}

.home-package .package-card__content p {
  font-size: 16px !important;
  line-height: 1.54 !important;
  font-weight: 500 !important;
  color: rgba(250, 247, 242, 0.95) !important;
}

.home-package .package-card--main .package-card__content p {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.leistungen-journey__copy {
  max-width: 600px;
}

.leistungen-journey__label {
  color: var(--type-color-accent) !important;
  font-family: var(--type-font-label) !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0.035em !important;
  max-width: 100%;
}

.leistungen-journey__copy h3 {
  max-width: 14ch;
  margin: clamp(20px, 2.2vw, 28px) 0 14px !important;
  color: var(--type-color-title) !important;
  font-family: var(--type-font-display) !important;
  font-size: clamp(44px, 5.1vw, 74px) !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.leistungen-journey__copy p {
  max-width: 39ch;
  color: rgba(92, 74, 54, 0.72) !important;
  font-size: clamp(15px, 1vw, 16.5px) !important;
  line-height: 1.68 !important;
  font-weight: 400 !important;
}

.leistungen-journey__keywords {
  margin-top: clamp(18px, 2.2vw, 26px);
}

.leistungen-journey__keywords span {
  color: rgba(42, 31, 18, 0.44) !important;
  font-family: var(--type-font-label) !important;
  font-size: 9.5px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase;
}

.leistungen-journey__keywords span + span::before {
  content: "\00B7";
  margin: 0 6px;
  color: rgba(196, 146, 59, 0.46);
}

@media (max-width: 767px) {
  .type-section-title,
  h2,
  .section-header h2,
  .home-section__intro h2,
  .markets-section-head h2,
  .process-journey__intro h2,
  .leistungen-overview__header h2,
  .accessories-section__header h2,
  .machine-compass__intro h2,
  .machine-category__head h2,
  .coffee-system__header h2,
  .coffee-package__intro h2,
  .final-block h2,
  .quiet-cta h2,
  .machine-final-cta h2 {
    line-height: 1.08 !important;
  }

  .type-hero-title,
  .hero__statement-h1,
  .machine-hero__content h1,
  .leistungen-hero__content h1,
  .coffee-hero__content h1,
  .hero--medium h1,
  .hero--xs h1,
  .configurator-surface .intro h1 {
    line-height: 1.09 !important;
  }

  .leistungen-journey__label {
    font-size: 10px !important;
    letter-spacing: 0.025em !important;
  }

  .leistungen-journey__copy h3 {
    max-width: 13ch;
    margin-top: 19px !important;
    font-size: clamp(36px, 10.6vw, 50px) !important;
    line-height: 1.02 !important;
  }

  .leistungen-journey__copy p {
    font-size: 15px !important;
    line-height: 1.66 !important;
  }

  .leistungen-journey__keywords {
    margin-top: 17px;
  }

  .leistungen-journey__keywords span {
    font-size: 9.5px !important;
    letter-spacing: 0.02em !important;
  }
}