/* ============================================================
   AI Mindflow – basis.css (Elke)
   EINZIGE Wahrheit für Schriften, Farben, Typo-Skala und Buttons.
   Vorlage liegt in: Resources/Context/Design System/basis.css
   Jede Website bekommt eine KOPIE nach /assets/basis.css,
   die Schriftdateien liegen daneben in /assets/fonts/.
   Seiten-eigenes CSS hängt seine Größen an diese Variablen
   (var(--fs-h2), var(--fs-body) …) statt eigene px-Werte zu setzen.
   Stand: 14.10.2026
   ============================================================ */

/* ---------- Schriften (lokal, kein Google-Server → DSGVO) ----------
   Jede Datei ist eine variable Schrift und enthält alle Stärken. */
@font-face{font-family:"Inter";font-weight:400 700;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:"Mulish";font-weight:600 900;font-display:swap;src:url(fonts/mulish-900.woff2) format("woff2")}
@font-face{font-family:"Permanent Marker";font-weight:400;font-display:swap;src:url(fonts/permanentmarker-400.woff2) format("woff2")}

:root{
  /* ===== Typo-Skala: hier zentral ändern, alle Seiten ziehen mit =====
     Werte: clamp(Handy, mitwachsend, Desktop) */
  --fs-h1:clamp(38px,5vw,60px);    --fw-h1:900;   /* nur Hero */
  --fs-h2:clamp(32px,4vw,48px);    --fw-h2:900;   /* Sektions-Überschriften */
  --fs-h3:clamp(26px,3vw,36px);    --fw-h3:800;   /* Unterüberschriften in Sektionen */
  --fs-h4:clamp(22px,2.4vw,28px);  --fw-h4:800;   /* Beispiele, Kundenstimmen-Titel, Hero-Unterzeile */
  --fs-h5:clamp(20px,1.9vw,22px);  --fw-h5:800;   /* Karten, FAQ-Fragen, Stufen */
  --fs-lead:19px;                                 /* Einleitung unter einer H2, grau */
  --fs-body:16px;                                 /* jeder normale Absatz, Farbe --fg-body */
  --fs-small:14px;                                /* Labels, Hinweise, Eyebrows */

  /* Schriftfamilien: Überschriften Mulish, Text Inter, Marker nur als Akzent */
  --font-display:"Mulish",system-ui,-apple-system,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-marker:"Permanent Marker","Bradley Hand",cursive;

  /* ---------- Markenfarben ---------- */
  --violet-900:#2d1854; --violet-700:#5b329b; --violet-500:#8a5cd4; --violet-300:#c798f3; --violet-100:#ede1fb; --violet-50:#f8f3ff;
  --orange-600:#d95a00; --orange-500:#ff6b00; --orange-100:#ffe4d1; --orange-50:#fff5ec;
  --pink-400:#ec5cb6;
  --neutral-light:#f4f4f4; --neutral-warm:#dbd6d2; --ink:#1c1424;
  --gradient-warm:linear-gradient(135deg,#5b329b 0%,#c798f3 35%,#ec5cb6 65%,#ff6b00 100%);
  --gradient-soft:linear-gradient(135deg,#ede1fb 0%,#ffe4d1 100%);

  /* ---------- Semantische Farben ---------- */
  --bg:var(--neutral-light); --bg-elevated:#fff; --bg-inverse:var(--violet-700); --bg-deep:var(--ink);
  --fg:var(--ink); --fg-body:#1D1524; --fg-muted:#54475f; --fg-subtle:#847891; --fg-on-violet:#fff; --fg-on-orange:#fff;
  --border:#e6e1de; --border-strong:var(--neutral-warm); --divider:#ece8e5;
  --accent:var(--orange-500); --accent-hover:var(--orange-600);
  --link:var(--violet-700); --link-hover:var(--violet-500);

  /* ---------- Zeilenhöhen ---------- */
  --lh-tight:1.05; --lh-snug:1.2; --lh-base:1.5; --lh-loose:1.65;

  /* ---------- Abstände, Radien, Schatten, Layout, Bewegung ---------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-32:128px;
  --radius-xs:4px; --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(28,20,36,.06);
  --shadow-sm:0 4px 12px rgba(91,50,155,.08);
  --shadow-md:0 10px 28px rgba(91,50,155,.12);
  --shadow-lg:0 24px 56px rgba(91,50,155,.18);
  --shadow-glow-orange:0 12px 36px rgba(255,107,0,.28);
  --container-max:1200px; --container-pad:24px;
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur-base:240ms; --dur-slow:400ms;

  /* Alte Namen aus dem früheren Designsystem, zeigen jetzt auf die Skala */
  --fs-xs:var(--fs-small); --fs-sm:var(--fs-small); --fs-base:var(--fs-body); --fs-md:var(--fs-body);
  --fs-lg:var(--fs-lead); --fs-xl:var(--fs-h4); --fs-2xl:var(--fs-h3); --fs-3xl:var(--fs-h2); --fs-4xl:var(--fs-h2); --fs-5xl:var(--fs-h1);
}

/* ---------- Grundwerte (Seiten-CSS darf alles überschreiben) ---------- */
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-loose);color:var(--fg-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5{font-family:var(--font-display);text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:1.08;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);font-weight:var(--fw-h2);line-height:1.12;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:var(--fw-h3);line-height:1.2}
h4{font-size:var(--fs-h4);font-weight:var(--fw-h4);line-height:1.25}
h5{font-size:var(--fs-h5);font-weight:var(--fw-h5);line-height:1.3}
.lead{font-size:var(--fs-lead);line-height:1.4;color:var(--fg-muted)}
.eyebrow{font-family:var(--font-body);font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-500)}
.marker{font-family:var(--font-marker);font-weight:400}
small,.caption{font-size:var(--fs-small)}

/* ---------- Buttons: orange, Großbuchstaben, fett ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--orange-500);color:#fff;text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.3;padding:20px 36px;border:0;border-radius:999px;box-shadow:var(--shadow-glow-orange);cursor:pointer;transition:all 150ms ease-out}
.btn:hover{background:var(--orange-600);color:#fff}
.btn:active{transform:scale(.98)}
.btn--white,.btn-on-dark{background:#fff;color:var(--violet-700);box-shadow:none}
.btn--white:hover,.btn-on-dark:hover{background:var(--violet-50);color:var(--violet-700)}
.btn-accent{background:var(--orange-500);color:#fff}
.btn-primary{background:var(--violet-700);color:#fff;box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--violet-500);color:#fff}
.btn-ghost{background:transparent;color:var(--violet-700);box-shadow:none;border:2px solid var(--violet-700)}
.btn-ghost:hover{background:var(--violet-50);color:var(--violet-700)}