/* Shared visual system for the four public languages.
   Build interface: copy this file byte-for-byte to
   /public/css/frontend-system.css and link /css/frontend-system.css once
   after each page's own styles and before injected navigation styles.

   Existing page art direction remains authoritative. These tokens and
   low-specificity roles only align type, readable measure and controls. */

:root {
  --ui-ink: var(--tinte, #141210);
  --ui-paper: #fffdf8;
  --ui-accent: var(--cta, #d81577);
  --ui-display: var(--f-display, 'Outfit', system-ui, sans-serif);
  --ui-body: var(--f-body, 'Karla', system-ui, sans-serif);
  --ui-radius-sm: 14px;
  --ui-radius-md: 22px;
  --ui-measure: 68ch;
  --ui-space-1: .5rem;
  --ui-space-2: .8rem;
  --ui-space-3: 1.2rem;
  --ui-space-4: clamp(1.6rem, 4vw, 3rem);
}

:where(body) {
  font-family: var(--ui-body);
  font-size: clamp(1rem, .97rem + .12vw, 1.075rem);
  line-height: 1.6;
}

:where(h1, h2, h3, .ui-display) {
  font-family: var(--ui-display);
  text-wrap: balance;
}

:where(.ui-kicker) {
  margin: 0 0 .35rem;
  color: color-mix(in srgb, var(--ui-ink) 72%, transparent);
  font: 800 .76rem/1.2 var(--ui-body);
  letter-spacing: .09em;
  text-transform: uppercase;
}

:where(.ui-section-title) {
  margin: 0;
  color: var(--ui-ink);
  font: 900 clamp(1.7rem, 3.2vw, 2.8rem)/1.04 var(--ui-display);
  letter-spacing: -.035em;
}

:where(.ui-copy, main article > p, main section > p) {
  max-width: var(--ui-measure);
}

:where(button, input, select, textarea) {
  font: inherit;
}

:where(.ui-action, .navpille, .rechnerzu, .rechnerkarte) {
  min-height: 44px;
}

:where(.ui-action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .72rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 800 .9rem/1.1 var(--ui-body);
  text-decoration: none;
}

:where(.ui-action--primary) {
  background: var(--ui-accent);
  color: #fff;
}

:where(.ui-action--secondary) {
  border-color: color-mix(in srgb, var(--ui-ink) 28%, transparent);
  background: color-mix(in srgb, var(--ui-paper) 72%, transparent);
  color: var(--ui-ink);
}

:where(.ui-action, button, a):focus-visible {
  outline: 3px solid var(--ui-ink);
  outline-offset: 3px;
}

@media (max-width: 40rem) {
  :root { --ui-measure: 100%; }
  :where(.ui-section-title) { letter-spacing: -.02em; }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ui-action) { transition: none !important; }
}

/* Page roles are assigned by the final content pass. Explicit selectors
   keep legacy page skins from making every paragraph as heavy as a label. */
body[data-page]:not([data-vorzimmer]) { font-weight: 400; line-height: 1.65; }
body[data-page] :is(.laut, .vorspann, .unter) { font-weight: 500; line-height: 1.6; }
body[data-page] :is(.fussnote, .quelle-kurz, .lesestand) { font-weight: 400; }
body[data-page] .zeile small { font-weight: 400; line-height: 1.55; }
body[data-page] .zeile > span > b { font-weight: 650; }
body[data-page] #rechner .blatt { rotate: 0deg; }
body[data-page] .blatt .summe dt { font-weight: 600; }
body[data-page] .blatt .summe.gross dt { font-weight: 700; }
body[data-page] #rechner { padding-block: 2rem 3.5rem; }
body[data-page] #rechner > .innen { max-width: 70rem; }
body[data-page] #rechner .kopf { text-align: left; margin: 0 0 1.5rem; }
body[data-page] #rechner .kopf h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem); line-height: 1.18;
  max-width: 100%; margin: 0 0 .65rem;
}
body[data-page] #rechner .kopf .laut {
  font-size: 1rem; max-width: 64ch; margin: 0; line-height: 1.65;
}
body[data-page="home"] .auftakt.kopf .unter {
  font-size: clamp(1.05rem, 1.35vw, 1.2rem); max-width: 40ch;
}
body[data-page="home"] .auftakt .notiz {
  font: 400 .9rem/1.6 var(--f-body); color: #4b4032;
  rotate: 0deg; margin: .85rem 0 0; max-width: 46ch;
}
body[data-page="home"] .gruppen-kopf { max-width: none; }
body[data-page="home"] .gruppen-kopf p:last-child { font-weight: 400; }
body[data-page="home"] .werkzeugkarte strong { font-weight: 750; line-height: 1.35; }
body[data-page="home"] .werkzeugkarte span { font-size: .9rem; font-weight: 400; line-height: 1.6; }
body[data-page="home"] .werkzeugkarte span b { font-weight: 600; }
body[data-page="investieren"] .auftakt { min-height: min(42rem, 78svh); }
body[data-page="investieren"] .auftakt .innen { min-height: 0; }
body[data-page="investieren"] .auftakt h1 {
  font-size: clamp(2.5rem, 5.8vw, 5.4rem); line-height: 1.05;
  max-width: 19ch; letter-spacing: -.035em;
}
body[data-page="investieren"] .auftakt .vorspann { max-width: 42ch; }
body[data-page="investieren"] .auftakt .hero-line { display: block; }
body[data-page] .leseweg { box-shadow: none; }
body[data-page] .leseaufgaben a { font-weight: 500; }
@media (max-width: 40rem) {
  body[data-page] #rechner { padding: 1.4rem 1rem 2.5rem; }
  body[data-page] #rechner .kopf { margin-bottom: 1.2rem; }
  body[data-page] #rechner .blatt { padding: 1.1rem; border-radius: 20px; }
  body[data-page="home"] .auftakt { padding-top: 1.4rem; padding-bottom: .3rem; }
  body[data-page="home"] .auftakt .innen { gap: .4rem; }
  body[data-page="home"] .auftakt .waage { width: min(100%, 18rem); }
  body[data-page="home"] .werkzeugkarte { min-height: 10rem; padding: .9rem; }
  body[data-page="home"] .gruppen-kopf p:last-child { font-size: .95rem; }
  body[data-page="investieren"] .auftakt { min-height: 32rem; padding-block: 3rem; }
}