/* umbau-v5 Schriftebene: Outfit 400/500/600, exakte Skala aus Masterdatei V2
   Abschnitt 1.2/1.3. Laedt NACH styles.css und umbau.css und ersetzt die
   Schriftentscheidungen des Kanons (SF-Pro-Stack, h1-h3 mit 700). Nur lokale
   Dateien, keine Anfrage an fremde Hosts. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-ext-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-sans: "Outfit", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--font-sans);

  /* Skala 1.2: Mobil bis 767 -> Desktop ab 1024, dazwischen fliessend */
  --type-display: clamp(2.5rem, 1.75rem + 3.2vw, 4rem);        /* 40 -> 64 */
  --type-section: clamp(2rem, 1.5rem + 2vw, 3rem);             /* 32 -> 48 */
  --type-subsection: clamp(1.5rem, 1.25rem + 1vw, 2rem);       /* 24 -> 32 */
  --type-card-title: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem); /* 20 -> 24 */
  --type-lead: clamp(1.0625rem, 0.98rem + 0.32vw, 1.25rem);    /* 17 -> 20 */
  --type-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);       /* 16 -> 17 */
  --type-card-copy: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);  /* 15 -> 16 */
  --type-nav: 1rem;                                            /* 16 */
  --type-button: 1rem;                                         /* 16 */
  --type-preis: clamp(1.125rem, 1.08rem + 0.18vw, 1.25rem);    /* 18 -> 20 */
  --type-label: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);  /* 13 -> 14 */
  --type-meta: 0.75rem;                                        /* 12 */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Kanon-Variablen auf die neue Skala mappen, damit Bestandsregeln mitziehen */
  --fs-h1: var(--type-display);
  --fs-h2: var(--type-section);
  --fs-h3: var(--type-subsection);
  --fs-subhead: var(--type-card-title);
  --fs-body-lg: var(--type-lead);
  --fs-body: var(--type-body);
  --fs-caption: var(--type-card-copy);
  --fs-micro: var(--type-meta);
}

html, body {
  font-family: var(--font-sans);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  letter-spacing: 0;
}

/* Ueberschriften: Gewicht 500, nie 700 (1.4) */
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-medium); }
h1 { font-size: var(--type-display); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-size: var(--type-section); line-height: 1.1; letter-spacing: -0.025em; }
h3 { font-size: var(--type-subsection); line-height: 1.15; letter-spacing: -0.02em; }

/* Kartentitel (semantische Ebene und sichtbare Groesse getrennt, 1.4) */
.card h3, .pcard h3, .world h3, .dash-karte h3, .katalog-welt h3,
.login-karte h1, .konfig-schritt h3 {
  font-size: var(--type-card-title);
  font-weight: var(--weight-medium);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.lead, .card p.lead {
  /* auch .card p.lead: die Kanon-Regel .card p (0,1,1) wuerde den Lead der
     Login-/Hero-Karte sonst auf Fliesstextgroesse druecken (gemessen 14.08.) */
  font-size: var(--type-lead);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* Kartenbeschreibung 15 -> 16 / 400 */
.karte-beschreibung, .pcard-text, .card p:not(.lead), .bundle-feld, .bundle-links,
.faq-item p, .feld-liste li, .feld p {
  font-size: var(--type-card-copy);
  font-weight: var(--weight-regular);
  line-height: 1.55;
  letter-spacing: 0;
}
.karte-beschreibung { color: var(--ink); }

/* Navigation und Eingaben: 16px / 500 */
.site-nav a, .login-link, .menu-toggle, .scan-input, input, select, textarea, label {
  font-size: var(--type-nav);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Buttons: 16px / 600 */
.btn, button.btn, .scan-btn {
  font-size: var(--type-button);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Preis / wichtige Zahl: 18 -> 20 / 600.
   Auch .card p.pcard-preis: die verschaerfte Regel .card p:not(.lead) (0,2,1)
   wuerde die Preiszeile sonst auf Kartentext druecken (gemessen 14.08.). */
.pcard-preis, .card p.pcard-preis, .konfig-option-preis, .card p.konfig-option-preis, .tnum {
  font-size: var(--type-preis);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

/* Label / Kategorie: 13 -> 14 / 500 */
.eyebrow, .kicker, .chip, .slot-tag, .footer-col-title {
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

/* Metadaten / Status: 12 / 600 */
.badge, .vorschau-band, .vorschau-fuss {
  font-size: var(--type-meta);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0.04em;
}

/* Kein kuenstliches Fett, nirgends 700 fuer normalen UI-Text (1.4) */
strong, b, th, dt, summary, .detail-name, .feld-titel, .scan-meldung,
.drawer-hinweis, .sperr-text p, .login-form label, .step-num,
.korb-summen dt, .footer-col-title, .pcard-status {
  font-weight: var(--weight-semibold);
}

/* Formulareingaben mobil nie unter 16px (3.3) */
@media (max-width: 767px) {
  .scan-input, input, select, textarea { font-size: 1rem; }
}