/* =====================================================================
   K&H Solutions — Design System
   CI-Quelle: projects/kh-solutions/assets/ci.md
   Tokens-first. Fluid Type. Motion-Tokens (LCP-/A11y-bewusst).
   ===================================================================== */

/* ---- Fonts (self-hosted, DSGVO) — Barlow + Barlow Condensed, latin (inkl. äöüß) ---- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/barlow-300.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/barlow-condensed-800.woff2") format("woff2"); }

:root {
  /* ---- Brand-Farben (ci.md) ---- */
  --brand-gold: #e5a800;
  --brand-gold-deep: #c8920a;      /* abgedunkelt für große Flächen/Hover */
  --brand-gold-ink: #a87c07;       /* Gold-TEXT auf hellem Grund — 3.57:1 auf --bg-footer (AA large).
                                      #e5a800 erreicht dort nur 1.99:1, #c8920a nur 2.61:1.
                                      Auf dunklem Grund weiter --brand-gold verwenden. */
  --brand-blue: #046bd2;
  --brand-blue-dark: #045cb4;

  /* ---- Neutrale Skala ---- */
  --ink-900: #0f1722;              /* fast schwarz, Headlines auf hell */
  --ink-800: #1e293b;             /* Slate 800 — Primärtext */
  --ink-700: #334155;             /* Slate 700 — Body */
  --ink-500: #5b6b7f;             /* gedämpft — 5.14:1 auf --bg-footer.
                                     Vorher #64748b: 4.49:1 und damit knapp unter AA (4.5). */
  --line: #d1d5db;               /* Borders */
  --bg: #ffffff;
  --bg-soft: #f0f5fa;             /* alternierende Sections */
  --bg-footer: #faf8f4;
  --ink-on-dark: #f4f6fb;
  --dark: #111418;               /* Dark Sections / Hero-Grund */
  --dark-2: #161b22;

  /* ---- Semantische Rollen ---- */
  --c-bg: var(--bg);
  --c-text: var(--ink-700);
  --c-heading: var(--ink-900);
  --c-accent: var(--brand-gold);
  --c-link: var(--brand-blue);
  --c-link-hover: var(--brand-blue-dark);

  /* ---- Typografie ---- */
  --font-sans: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  /* Fluid Type Scale (min .. max via clamp; Basis 16px) */
  --fs-50: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --fs-100: clamp(0.94rem, 0.90rem + 0.18vw, 1.05rem);  /* body */
  --fs-200: clamp(1.10rem, 1.02rem + 0.40vw, 1.35rem);
  --fs-300: clamp(1.35rem, 1.18rem + 0.85vw, 1.95rem);
  --fs-400: clamp(1.75rem, 1.40rem + 1.75vw, 2.85rem);
  --fs-500: clamp(2.25rem, 1.65rem + 3.0vw, 4.0rem);
  --fs-600: clamp(2.9rem, 1.9rem + 5.0vw, 6.0rem);      /* Hero */

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.62;
  --tracking-head: -0.01em;
  --tracking-caps: 0.08em;

  /* ---- Spacing (4px-Raster, fluид für Sections) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 0.6rem + 2.2vw, 2.5rem);

  /* ---- Radius / Elevation ---- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 10px 30px -10px rgba(15, 23, 42, 0.18);
  --shadow-gold: 0 8px 30px -8px rgba(229, 168, 0, 0.45);

  /* ---- Motion (zentral, damit reduced-motion alles greift) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms;
  --dur-2: 320ms;
  --dur-3: 600ms;
  --reveal-y: 24px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-100);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--c-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--c-link-hover); }

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--c-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-head);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--fs-600); }
h2 { font-size: var(--fs-400); }
h3 { font-size: var(--fs-300); line-height: var(--lh-snug); }
p { max-width: 68ch; }

/* Caps-Label (z.B. Section-Übertitel, anti-buzzword Marken-Look) */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-50);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-gold-deep);
}

/* ---- Layout-Primitive ---- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--dark); color: var(--ink-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-sans); font-weight: 600;
  padding: 0.95em 1.6em; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1);
}
.btn--primary { background: var(--brand-gold); color: #1a1300; box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--brand-gold-deep); box-shadow: var(--shadow-gold); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: currentColor; color: inherit; }
.btn--ghost:hover { background: rgba(255,255,255,0.06); }

/* ---- Scroll-Reveal (JS togglet .is-in) ---- */
[data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- A11y ---- */
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 2px; }
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; padding: 0.75em 1em; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; }
.skip-link:focus { left: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Reduced Motion: schaltet alle Wow-Effekte ab ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Druck / PDF ----
   Ohne diese Regeln bleibt jeder Bereich, zu dem der Nutzer vor dem Drucken nicht
   gescrollt hat, bei opacity: 0 — die gedruckte Seite wäre über weite Strecken leer.
   Das betrifft jeden, der eine Leistungs- oder Fallseite als Angebotsanlage ausdruckt. */
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; }

  body { background: #fff; color: #000; }
  .site-header { position: static; }
  .skip-link, .hero__grain, #hero-canvas, .hero__bg, .page-hero__bg { display: none !important; }
  .hero, .page-hero { min-height: auto; background: none; color: #000; }

  /* Ziel eines Links ist auf Papier sonst nicht erkennbar */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  a[href^="/"]::after { content: " (krummel-haensel.solutions" attr(href) ")"; font-size: 0.85em; }

  .section, .cta-band, .quote-card, .case-result { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  @page { margin: 1.5cm; }
}