/* ==========================================================================
   Utopian Founders — Colors & Type Foundations
   ========================================================================== */

/* -------- Fonts -------- */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Onest-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Onest-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Onest-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Onest-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Onest-800.woff2') format('woff2');
}

/* -------- Tokens -------- */
:root {
  /* ——— Brand colors ——— */
  /* Primär */
  --uf-dunkelblau: #142931;     /* Primary dark — the base of almost every surface */
  --uf-mint:       #D4EEC3;     /* Primary mint — soft highlights, cards, chips */

  /* Sekundär */
  --uf-white:      #FFFFFF;
  --uf-neongelb:   #D3F700;     /* Accent — CTAs, hover states, focus */
  --uf-pink:       #C20079;     /* Accent — rare, used for emphasis & contrast */

  /* Tertiär */
  --uf-grau:       #69777F;     /* Supporting grey */

  /* Verlauf (gradient stops, in order) */
  --uf-grad-1: #C20079;
  --uf-grad-2: #D4EEC3;
  --uf-grad-3: #142931;
  --uf-grad-4: #5F7B1F;
  --uf-grad-5: #D3F700;
  --uf-grad-6: #FFFFFF;

  /* Extended neutrals derived from Dunkelblau (for layered surfaces) */
  --uf-ink-950: #0B181D;         /* deepest surface, behind-everything black */
  --uf-ink-900: #142931;         /* = Dunkelblau */
  --uf-ink-800: #1C343D;
  --uf-ink-700: #24404B;
  --uf-ink-600: #2E4E59;
  --uf-ink-500: #3A5D69;
  --uf-ink-400: #69777F;         /* = Grau */
  --uf-ink-300: #97A3A9;
  --uf-ink-200: #C1C9CD;
  --uf-ink-100: #E4E8EA;
  --uf-ink-050: #F3F5F6;

  /* ——— Semantic color roles (dark default) ——— */
  --bg:          var(--uf-dunkelblau);
  --bg-elev-1:   var(--uf-ink-800);
  --bg-elev-2:   var(--uf-ink-700);
  --bg-inverse:  var(--uf-white);

  --fg:          var(--uf-white);
  --fg-muted:    #B9C4C8;
  --fg-subtle:   var(--uf-grau);
  --fg-inverse:  var(--uf-dunkelblau);

  --accent:      var(--uf-neongelb);
  --accent-ink:  var(--uf-dunkelblau);   /* text on accent */
  --highlight:   var(--uf-mint);
  --danger:      var(--uf-pink);

  --border:      rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.22);
  --border-on-light: rgba(20,41,49,0.10);

  /* ——— Gradient presets ——— */
  --grad-hero: linear-gradient(
    90deg,
    var(--uf-grad-1) 0%,
    var(--uf-grad-2) 25%,
    var(--uf-grad-3) 50%,
    var(--uf-grad-4) 65%,
    var(--uf-grad-5) 85%,
    var(--uf-grad-6) 100%
  );
  --grad-mint-to-yellow: linear-gradient(90deg, var(--uf-mint), var(--uf-neongelb));
  --grad-pink-to-dark:   linear-gradient(135deg, var(--uf-pink), var(--uf-dunkelblau));

  /* ——— Type scale ——— */
  --font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid display sizes (clamp: min, preferred, max) */
  --fs-display-xl: clamp(56px, 8vw, 120px);
  --fs-display-l:  clamp(44px, 6vw, 88px);
  --fs-display-m:  clamp(36px, 4.5vw, 64px);
  --fs-h1:         clamp(32px, 3.8vw, 52px);
  --fs-h2:         clamp(26px, 2.8vw, 38px);
  --fs-h3:         22px;
  --fs-h4:         18px;
  --fs-body-l:     20px;
  --fs-body:       16px;
  --fs-body-s:     14px;
  --fs-micro:      12px;
  --fs-eyebrow:    13px;

  /* Line heights & tracking */
  --lh-tight: 1.02;
  --lh-snug:  1.12;
  --lh-body:  1.55;
  --lh-long:  1.7;

  --tr-tight:  -0.02em;
  --tr-snug:   -0.01em;
  --tr-body:   0em;
  --tr-eyebrow: 0.08em;

  /* ——— Spacing scale ——— */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ——— Radii ——— */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  12px;
  --radius-l:  20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ——— Shadows & effects ——— */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
  --shadow-lift: 0 24px 60px rgba(0,0,0,0.35);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.08);
  --glow-accent: 0 0 0 4px rgba(211,247,0,0.25);

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-quick: 160ms;
  --dur-med:   260ms;
  --dur-slow:  420ms;
}

/* Light-surface override (use on .uf-light blocks) */
.uf-light {
  --bg:         var(--uf-white);
  --bg-elev-1:  var(--uf-ink-050);
  --bg-elev-2:  var(--uf-ink-100);
  --fg:         var(--uf-dunkelblau);
  --fg-muted:   #2E4E59;
  --fg-subtle:  var(--uf-grau);
  --fg-inverse: var(--uf-white);
  --border:     rgba(20,41,49,0.12);
  --border-strong: rgba(20,41,49,0.22);
}

/* Mint surface (common marketing panel) */
.uf-mint {
  --bg: var(--uf-mint);
  --fg: var(--uf-dunkelblau);
  --fg-muted: #2E4E59;
  --border: rgba(20,41,49,0.12);
}

/* ==========================================================================
   Semantic base styles
   ========================================================================== */
body, .uf {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.uf-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 500; }
.uf-display-l  { font-size: var(--fs-display-l);  line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: 500; }
.uf-display-m  { font-size: var(--fs-display-m);  line-height: var(--lh-snug);  letter-spacing: var(--tr-snug);  font-weight: 500; }

h1, .uf-h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: 600; margin: 0; }
h2, .uf-h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: 600; margin: 0; }
h3, .uf-h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; margin: 0; }
h4, .uf-h4 { font-size: var(--fs-h4); line-height: 1.3;  font-weight: 600; margin: 0; }

p, .uf-p { font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; color: var(--fg-muted); }
.uf-lead { font-size: var(--fs-body-l); line-height: var(--lh-long); color: var(--fg); }
.uf-small { font-size: var(--fs-body-s); }
.uf-micro { font-size: var(--fs-micro); }

.uf-eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-muted);
}

.uf-mono-kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
}

.uf-gradient-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Utility links */
a, .uf-link {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-quick) var(--ease-out);
}
a:hover, .uf-link:hover { opacity: 0.7; }

/* ==========================================================================
   Page styles (from Utopian Founders Site v3)
   ========================================================================== */
body { margin: 0; background: #FFFFFF; }
a { color: inherit; text-decoration: none; border-bottom: none; transition: opacity 160ms cubic-bezier(0.2,0.7,0.2,1); }
a:hover { opacity: 0.7; }
[data-scroller] { scrollbar-width: none; -ms-overflow-style: none; }
[data-scroller]::-webkit-scrollbar { display: none; }
img, svg { max-width: 100%; }
.carousel-btn:hover { border-color: rgba(255,255,255,0.6) !important; }
@media (max-width: 900px) {
  [data-r~="pad"] { padding-left: 24px !important; padding-right: 24px !important; }
  [data-r~="stack"] { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-r~="stack1"] { grid-template-columns: 1fr !important; }
  [data-r~="flexcol"] { flex-direction: column !important; align-items: flex-start !important; }
  [data-r~="hero"] { min-height: 0 !important; }
  [data-r~="herocopy"] { padding: 48px 0 120px !important; }
  [data-r~="h1"] { font-size: 52px !important; max-width: none !important; margin-bottom: 32px !important; }
  [data-r~="h2"] { font-size: 34px !important; }
  [data-r~="h3big"] { font-size: 30px !important; }
  [data-r~="p"] { font-size: 17px !important; }
  [data-r~="cardpad"] { padding: 36px 28px !important; border-radius: 20px !important; }
  [data-r~="inpad"] { margin-left: 26px !important; margin-right: 26px !important; }
  [data-r~="cardimg"] { height: 180px !important; }
  [data-r~="flow"] { grid-template-columns: 1fr !important; gap: 28px !important; }
  [data-r~="arrow"] { text-align: left !important; padding-top: 0 !important; transform: rotate(90deg); transform-origin: left center; }
  [data-r~="secpad"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [data-r~="contactwrap"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [data-r~="cta"] { padding: 40px 28px !important; flex-direction: column !important; align-items: flex-start !important; gap: 28px !important; }
  [data-r~="pcard"] { flex: 0 0 78% !important; padding: 32px 28px !important; }
  [data-r~="footer"] { flex-direction: column !important; align-items: flex-start !important; gap: 24px !important; }
}
@media (max-width: 560px) {
  [data-r~="pad"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r~="h1"] { font-size: 38px !important; }
  [data-r~="h2"] { font-size: 28px !important; }
  [data-r~="h3big"] { font-size: 25px !important; }
  [data-r~="logo"] { height: 30px !important; }
  [data-r~="navlink"] { display: none !important; }
  [data-r~="nav"] { gap: 0 !important; }
  [data-r~="herocopy"] { padding: 32px 0 96px !important; }
  [data-r~="pcard"] { flex: 0 0 86% !important; }
}

/* ==========================================================================
   Legal pages (imprint, privacy policy)
   ========================================================================== */
.legal-page { background: #FFFFFF; color: #142931; font-family: 'Onest', system-ui, sans-serif; }
.legal-wrap { max-width: 880px; margin: 0 auto; padding: 0 48px; }
.legal-header { display: flex; align-items: center; justify-content: space-between; padding: 32px 0 64px; }
.legal-page h1 { font-size: 48px; line-height: 1.08; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 48px; }
.legal-content h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; margin: 48px 0 16px; }
.legal-content h3 { font-size: 20px; line-height: 1.3; font-weight: 600; margin: 32px 0 12px; }
.legal-content h4 { font-size: 17px; line-height: 1.4; font-weight: 600; margin: 24px 0 10px; }
.legal-content p, .legal-content li { font-size: 17px; line-height: 1.65; color: rgba(20,41,49,0.75); margin: 0 0 16px; }
.legal-content ul { padding-left: 24px; margin: 0 0 16px; }
.legal-content a { text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(20,41,49,0.12); margin-top: 96px; padding: 40px 0 64px; color: rgba(20,41,49,0.55); font-size: 14px; }
@media (max-width: 900px) {
  .legal-wrap { padding-left: 24px; padding-right: 24px; }
  .legal-page h1 { font-size: 34px; }
  .legal-footer { flex-direction: column; align-items: flex-start; gap: 24px; }
}