/* ==========================================================================
   Websulting – Designsystem (Tokens)
   Alle Farben, Schriften, Abstände, Radien, Schatten und Bewegungswerte
   werden hier zentral definiert. Änderungen an dieser Datei wirken auf
   die gesamte Startseite.
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, SIL Open Font License) ---------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Markenfarben aus dem Websulting-Logo ---------- */
  --c-purple: #8a388d;
  --c-orange: #e9540d;
  --c-green: #95c11f;

  /* Abgeleitete Töne */
  --c-orange-text: #d24509;     /* große orange Überschriften: 3:1 auch auf den Farbwolken */
  --c-orange-strong: #c9410a;   /* Schaltflächen und kleiner Text: 4,9:1 auf Weiß */
  --c-orange-hover: #ad3707;
  --c-orange-tint: #fde9dc;
  --c-orange-glow: #ffc79a;
  --c-purple-deep: #4b1c52;
  --c-purple-tint: #f3e6f4;
  --c-green-bright: #b9e23a;    /* Akzent auf dunklen Flächen */
  --c-green-deep: #4c6608;      /* Text auf hellen Flächen */
  --c-green-tint: #edf4d8;

  /* ---------- Neutrale Töne (warm, leicht ins Aubergine getönt) ---------- */
  --c-paper: #f6f4f1;           /* Seitengrund */
  --c-paper-2: #edeae5;         /* abgesetzte Flächen */
  --c-white: #ffffff;
  --c-ink: #1e1a22;             /* Überschriften und Fließtext */
  --c-ink-2: #4b4652;           /* Sekundärtext, 7:1 auf Papier */
  --c-ink-3: #57515e;           /* Metaangaben, 5:1 auf Papier */
  --c-ink-warm: #5a3c30;        /* Sekundärtext auf pfirsichfarbenen Flächen */
  --c-line: rgba(30, 26, 34, 0.12);
  --c-line-strong: rgba(30, 26, 34, 0.22);

  --c-night: #1f1823;           /* dunkle Sektionen */
  --c-night-2: #2c2231;
  --c-on-night: #f6f1f7;
  --c-on-night-2: #c9bdce;
  --c-line-night: rgba(246, 241, 247, 0.16);

  /* ---------- Einzeltöne für bestimmte Bausteine ---------- */
  --c-brand-base: #7a2d78;      /* Grundfarbe unter dem Markenverlauf */
  --c-night-3: #32273a;         /* Knoten und Kacheln auf dunklen Flächen */
  --c-veil: rgba(31, 12, 36, 0.32);   /* dunkler Schleier auf dem Verlauf (Themen, Icon-Kreise) */
  --c-signal: #ff8a4c;          /* leuchtendes Orange für Linien auf dunklem Grund */
  --c-field: #fbfaf8;           /* Formularfelder */
  --c-error: #b3261e;           /* Fehlermeldungen und Fehlerrahmen */
  --c-error-tint: #fff8f7;
  --c-browser-bar: #f1eeea;     /* Leiste des Browser-Rahmens */
  --c-browser-dot: #d3ccd2;
  --c-selection: #ffd2b3;       /* Textauswahl */
  --c-stage-peach: #f9d9c3;
  --c-stage-orange: #fbd3b6;    /* kräftigere helle Orange-Bühne */     /* Bühnen hinter Projektbildern */
  --c-stage-lilac: #e6d3e8;
  --c-stage-green: #dfe9bd;
  --c-stage-paper: #e4dfd8;

  /* ---------- Verläufe ---------- */
  /* Kräftiger, klarer Verlauf für Hero und Kontaktbereich (ohne Körnung) */
  --mesh-brand:
    radial-gradient(52% 62% at 100% 0%, rgba(233, 84, 13, 0.92) 0%, rgba(233, 84, 13, 0) 68%),
    radial-gradient(40% 55% at 100% 100%, rgba(149, 193, 31, 0.85) 0%, rgba(149, 193, 31, 0) 66%),
    radial-gradient(60% 75% at 0% 100%, rgba(190, 52, 60, 0.9) 0%, rgba(190, 52, 60, 0) 70%),
    radial-gradient(70% 80% at 0% 0%, #8a388d 0%, rgba(138, 56, 141, 0) 72%),
    linear-gradient(125deg, #6f2a78 0%, #8f3566 45%, #a8403f 100%);

  /* Weiche Farbwolken in den drei Logofarben. Sie liegen als sich wiederholende
     Kachel (Höhe --clouds-tile) hinter der gesamten Seite, beginnen am
     Seitenanfang und wechseln die Seite: Orange, Violett, Grün, Orange, Violett.
     Die erste und die letzte Wolke sind identisch, damit die Kachel nahtlos
     an sich selbst anschließt. Stärke: jeweils der Alpha-Wert der Farbe. */
  --cloud-orange: rgba(255, 186, 134, 0.7);
  --cloud-purple: rgba(204, 146, 210, 0.5);
  --cloud-green: rgba(186, 218, 104, 0.5);
  --clouds-tile: 2800px;
  --page-clouds:
    radial-gradient(ellipse max(44vw, 360px) 560px at 90% 0px, var(--cloud-orange) 0%, transparent 70%),
    radial-gradient(ellipse max(40vw, 340px) 600px at 6% 520px, var(--cloud-purple) 0%, transparent 70%),
    radial-gradient(ellipse max(38vw, 320px) 540px at 94% 1120px, var(--cloud-green) 0%, transparent 70%),
    radial-gradient(ellipse max(40vw, 340px) 560px at 8% 1700px, var(--cloud-orange) 0%, transparent 70%),
    radial-gradient(ellipse max(38vw, 320px) 560px at 92% 2260px, var(--cloud-purple) 0%, transparent 70%),
    radial-gradient(ellipse max(44vw, 360px) 560px at 90% 2800px, var(--cloud-orange) 0%, transparent 70%);
  /* Weiße Sektionen lassen die Wolken abgeschwächt durchscheinen */
  --c-white-veil: rgba(255, 255, 255, 0.52);

  --glow-night:
    radial-gradient(40% 50% at 85% 20%, rgba(138, 56, 141, 0.55) 0%, rgba(138, 56, 141, 0) 70%),
    radial-gradient(34% 44% at 10% 90%, rgba(233, 84, 13, 0.28) 0%, rgba(233, 84, 13, 0) 70%);

  /* ---------- Typografie ---------- */
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem, min(5vw, 9vh), 4.5rem);
  --fs-h2: clamp(2.125rem, 1.2rem + 3.1vw, 4rem);
  --fs-h3: clamp(1.5rem, 1.15rem + 1.3vw, 2.375rem);
  --fs-h4: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-meta: 0.8125rem;

  --lh-tight: 1.02;
  --lh-heading: 1.1;
  --lh-body: 1.65;
  --tracking-display: -0.018em;
  --tracking-heading: -0.012em;
  --measure: 64ch;

  /* ---------- Abstände ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4.5rem, 2.5rem + 7.5vw, 10rem);

  /* ---------- Layout ---------- */
  --container: 1800px;                           /* maximale Inhaltsbreite */
  --gutter: clamp(1.25rem, 0.4rem + 3.4vw, 4.5rem);
  --header-h: 104px;
  --subnav-h: 64px;
  --anchor-offset: calc(var(--header-h) + var(--subnav-h) + 1rem);

  /* ---------- Radien ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-frame: 14px;              /* Browser-Rahmen */
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  /* Unter 640px werden --r-lg auf 22px und --r-xl auf 28px verkleinert (responsive.css) */

  /* ---------- Schatten ---------- */
  --sh-1: 0 1px 2px rgba(31, 24, 35, 0.06), 0 6px 16px -6px rgba(31, 24, 35, 0.12);
  --sh-2: 0 2px 6px rgba(31, 24, 35, 0.06), 0 22px 44px -18px rgba(31, 24, 35, 0.28);
  --sh-3: 0 4px 10px rgba(31, 24, 35, 0.08), 0 44px 80px -30px rgba(31, 24, 35, 0.42);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-1: 150ms;   /* Druck-Feedback */
  --dur-2: 220ms;   /* Hover, Dropdowns */
  --dur-3: 420ms;   /* Panels, Menü */
  --dur-4: 900ms;   /* erzählende Animationen */

  /* ---------- Ebenen ---------- */
  --z-subnav: 40;
  --z-header: 50;
  --z-progress: 60;
}

/* Breakpoints (in Media Queries nicht als Variable nutzbar, daher hier dokumentiert):
   640px  – große Smartphones
   900px  – Tablets, ab hier Kapsel-Navigation und Sektionsleiste
   1100px – Desktop, ab hier gestapelte Leistungspanels
   1400px – große Bildschirme */

@media (max-width: 899px) {
  :root {
    --header-h: 76px;
    --subnav-h: 0px;
  }
}