/* =============================================================
   GRÜNDUNGSVISION — Design-Tokens & Basis-Styles (statisch gebündelt)
   Quelle: _ds/colors_and_type.css + ui_kits/website/site.css
   Fonts: Satoshi + General Sans via Fontshare CDN
   ============================================================= */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=general-sans@300,400,500,600,700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --brand-navy:        #143C66;
  --brand-navy-600:    #1E4E80;
  --brand-navy-700:    #163F6B;
  --brand-navy-800:    #0F2F52;
  --brand-navy-900:    #0A2340;

  --brand-teal:        #00776C;
  --brand-teal-500:    #0B8C80;
  --brand-teal-600:    #00776C;
  --brand-teal-700:    #005E56;
  --brand-teal-800:    #004640;

  --brand-mist:        #E6EEF5;
  --brand-seafoam:     #D9EBE8;
  --brand-gold:        #C9A24B;

  /* ---------- NEUTRAL SCALE ---------- */
  --n-0:   #FFFFFF;
  --n-25:  #FAFBFC;
  --n-50:  #F5F7F9;
  --n-100: #EDEFF3;
  --n-200: #DDE2E8;
  --n-300: #C4CBD4;
  --n-400: #9AA4B2;
  --n-500: #6B7684;
  --n-600: #4A5362;
  --n-700: #303846;
  --n-800: #1D2430;
  --n-900: #0E131C;

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg:         var(--n-0);
  --bg-subtle:  var(--n-50);
  --bg-muted:   var(--n-100);
  --bg-inverse: var(--brand-navy);

  --surface:    var(--n-0);
  --surface-raised: var(--n-0);
  --surface-sunken: var(--n-50);

  --border:     var(--n-200);
  --border-strong: var(--n-300);
  --border-focus:  var(--brand-teal);

  --fg:         var(--n-900);
  --fg-1:       var(--n-900);
  --fg-2:       var(--n-700);
  --fg-3:       var(--n-500);
  --fg-4:       var(--n-400);
  --fg-on-brand:#FFFFFF;
  --fg-link:    var(--brand-navy);
  --fg-link-hover: var(--brand-teal);

  --success:    #167C52;
  --success-bg: #E4F4EC;
  --warning:    #A66A00;
  --warning-bg: #FBF1DA;
  --danger:     #B3261E;
  --danger-bg:  #FBE9E7;
  --info:       var(--brand-teal);
  --info-bg:    var(--brand-seafoam);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  68px;
  --text-6xl:  88px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  --fw-light:  300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  900;

  /* ---------- SPACING ---------- */
  --s-0: 0; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* ---------- RADIUS ---------- */
  --r-xs:  4px; --r-sm:  6px; --r-md:  10px; --r-lg:  14px;
  --r-xl:  20px; --r-2xl: 28px; --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 60, 102, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 60, 102, 0.08), 0 1px 2px rgba(20, 60, 102, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 60, 102, 0.10), 0 2px 6px rgba(20, 60, 102, 0.06);
  --shadow-lg: 0 20px 48px rgba(20, 60, 102, 0.14), 0 4px 12px rgba(20, 60, 102, 0.06);
  --shadow-xl: 0 32px 80px rgba(20, 60, 102, 0.18), 0 8px 24px rgba(20, 60, 102, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-focus: 0 0 0 4px rgba(0, 119, 108, 0.22);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0.0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms;
  --dur-slow: 400ms; --dur-slower: 640ms;

  /* ---------- LAYOUT ---------- */
  --container-sm: 640px;
  --container-md: 800px;
  --container-lg: 1080px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* ---------- BRAND GRADIENTS ---------- */
  --grad-hero:    linear-gradient(135deg, #143C66 0%, #1A527A 48%, #00776C 100%);
  --grad-mark:    linear-gradient(180deg, #00776C 0%, #143C66 100%);
  --grad-subtle:  linear-gradient(180deg, #F5F9FC 0%, #EEF4F8 100%);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* Reset & base (from site.css) */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #fff; color: var(--fg-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-normal);
}

img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

h1, .h1 { font-family: var(--font-display); font-size: var(--text-5xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); color: var(--fg-1); text-wrap: balance; }
h2, .h2 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semi); color: var(--fg-1); text-wrap: balance; }
h3, .h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); font-weight: var(--fw-semi); color: var(--fg-1); }
h4, .h4 { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: var(--fw-semi); color: var(--fg-1); }
h5, .h5 { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--lh-snug); font-weight: var(--fw-semi); color: var(--fg-1); }
h6, .h6 { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-snug); font-weight: var(--fw-semi); color: var(--fg-1); }

p { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-2); text-wrap: pretty; }

small, .text-meta { font-size: var(--text-sm); color: var(--fg-3); }

.eyebrow, .kicker {
  font-family: 'Satoshi';
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-teal);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-link-hover); }

::selection { background: var(--brand-teal); color: #fff; }

.lead { font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: var(--fw-regular); color: var(--fg-2); letter-spacing: var(--tracking-snug); }
.display { font-family: var(--font-display); font-size: var(--text-6xl); line-height: 1.02; letter-spacing: -0.03em; font-weight: var(--fw-bold); color: var(--fg-1); }

/* Höhere Spezifität (body .container), damit die Tailwind-eigene .container-Klasse
   – width:100% + responsive max-widths ohne Zentrierung – NICHT die seitliche
   Begrenzung der Seiteninhalte überschreibt. */
body .container { max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
@media (max-width: 640px) {
  body .container { padding-left: 20px; padding-right: 20px; }
}

/* ===== Logo-Leiste / Proof-Carousel (Durchlaufeffekt, wie businessplan.html) ===== */
.proof-carousel-wrapper {
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
}
@media (min-width: 768px) {
  .proof-carousel-wrapper {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12rem, black calc(100% - 12rem), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 12rem, black calc(100% - 12rem), transparent 100%);
  }
}
.proof-carousel-track {
  display: flex;
  animation: proofCarouselScroll 30s linear infinite;
  will-change: transform;
}
.proof-carousel-item { flex-shrink: 0; }
@keyframes proofCarouselScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .proof-carousel-track { animation: none; }
}

/* Statistik-Leiste (99 % / 1450+ / fester Ansprechpartner): auf Mobile/kleinem
   Tablet horizontal zentrieren, sobald das Grid nicht mehr 3-spaltig ist. */
@media (max-width: 680px) {
  .gz-proof-stats { text-align: center; }
}