/* ==========================================================================
   PALLMANN — Base element styles + typography utilities
   Maps the Styleguide text roles onto HTML elements and `.pm-*` classes.

   ROLE MAPPING
   h1, h2  → HEADLINE  · Kapra Neue Pro Medium, VERSAL, PALLMANN orange
   h3, h4  → SUBLINE   · Kapra Neue Pro Medium, VERSAL, schwarz (≈50 % of headline)
   p, li   → COPY      · IBM Plex Sans Light, 100 % schwarz
   strong  → SUBLINE COPY / Hervorhebung · IBM Plex Sans Bold
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking);
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Kapra Neue Pro: ALWAYS uppercase (Versalschreibweise, p. 40) ------- */
h1, h2, h3, h4, h5, h6,
.pm-headline, .pm-slogan, .pm-subline, .pm-nav, .pm-eyebrow, .pm-stoerer,
button, .pm-btn, .pm-badge, .pm-card-title, .pm-table-head, .pm-label {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  line-height: var(--lh-display);
  margin: 0;
}

h1, .pm-headline { font-size: var(--fs-h1); color: var(--color-text-heading); }
.pm-slogan       { font-size: var(--fs-slogan); color: var(--color-text-heading); }
h2               { font-size: var(--fs-h2); color: var(--color-text-heading); }
h3, .pm-subline  { font-size: var(--fs-h3); color: var(--color-text-subline); }
h4               { font-size: var(--fs-h4); color: var(--color-text-subline); }
h5               { font-size: var(--fs-subline-3); color: var(--color-text-subline); }
h6               { font-size: var(--fs-body); color: var(--color-text-subline); }

/* On brand surfaces (gradient / orange / black) the headline flips to white
   and the subline stays black — Styleguide p. 121. */
.pm-on-brand h1, .pm-on-brand h2, .pm-on-brand .pm-headline { color: var(--pm-white); }
.pm-on-brand h3, .pm-on-brand h4, .pm-on-brand .pm-subline  { color: var(--pm-black); }
.pm-on-dark h1, .pm-on-dark h2, .pm-on-dark h3, .pm-on-dark h4,
.pm-on-dark p, .pm-on-dark li, .pm-on-dark .pm-copy { color: var(--pm-white); }
.pm-on-dark h1, .pm-on-dark h2 { color: var(--pm-orange); }

/* ---- IBM Plex Sans: NEVER transformed ---------------------------------- */
p, li, td, th, dd, dt, figcaption, label, input, textarea, select, button,
.pm-copy, .pm-caption, .pm-quote {
  font-family: var(--font-body);
}
p, li, td, dd, .pm-copy {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking);
  color: var(--color-text-body);
  text-transform: none;
}
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }
strong, b, .pm-copy-bold { font-weight: var(--fw-bold); }
small, .pm-caption {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  line-height: var(--lh-loose);
  letter-spacing: var(--tracking);
  text-transform: none;
}
.pm-copy-sm { font-size: var(--fs-body-sm); }
.pm-copy-tight { line-height: var(--lh-body); }

/* ---- Bullet list: UNICODE 2022 (Styleguide p. 122) --------------------- */
ul.pm-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
ul.pm-list > li { position: relative; padding-left: 1.1em; margin-bottom: var(--space-2); }
ul.pm-list > li::before { content: "\2022"; position: absolute; left: 0; color: var(--pm-orange); }

/* ---- Quote (Zitat, p. 122) -------------------------------------------- */
.pm-quote {
  font-weight: var(--fw-bold);
  font-size: var(--fs-quote);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking);
  color: var(--pm-black);
  text-transform: none;
}

/* ---- Links ------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pm-orange);
  outline-offset: 2px;
}

/* ---- Navigation + structural labels ------------------------------------ */
.pm-nav      { font-size: var(--fs-nav); color: var(--pm-black); }
.pm-eyebrow  { font-size: var(--fs-caption); color: var(--pm-orange); letter-spacing: 0.08em; }
.pm-label    { font-size: 13px; letter-spacing: 0.05em; color: var(--pm-black); }

/* ---- Brand surfaces ---------------------------------------------------- */
.pm-gradient   { background: var(--pm-gradient); }
.pm-surface    { background: var(--color-bg-alt); }
.pm-hairline   { border: var(--border-hairline); }

/* ---- Container / 12-col grid ------------------------------------------ */
.pm-container { width: 100%; max-width: var(--container-standard); margin-inline: auto; padding-inline: var(--space-5); }
.pm-grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gutter); }

/* ---- Bootstrap-compatible resets used by the components ---------------- */
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: var(--border-hairline); margin: var(--space-6) 0; }