/* =====================================================================
   BRANDING-TOKENS – einzige Quelle für Farben, Schriften, Abstände, Radien.
   Regel: KEINE Hex-Farben und KEINE font-family-Deklarationen außerhalb
   dieser Datei. Komponenten verwenden ausschließlich var(--token).
   Markenfarbe (Primär): #002c6b
   ===================================================================== */

/* ---- Schrift zentral (self-hosted) --------------------------------- */
@font-face {
  font-family: "Helvetica Now Text";
  src: url("/assets/fonts/HelveticaNowText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("/assets/fonts/HelveticaNowText-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica Now Text";
  src: url("/assets/fonts/HelveticaNowText-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Marke */
  --color-primary:        #002c6b;
  --color-primary-hover:  #013a8a;
  --color-primary-dark:   #001b42;
  --color-on-primary:     #ffffff;

  /* Analogous-Palette aus #002c6b (Hue ±30°) */
  --color-secondary:      #00626b; /* Teal  (Hue -30°) – Weiß darauf 7,1:1 */
  --color-tertiary:       #09006b; /* Indigo (Hue +30°) – Weiß darauf 17,2:1 */

  --color-accent:         #00626b; /* Akzent (Häkchen, Balken, Badges) – Teal */
  --color-accent-hover:   #004a52; /* Teal dunkler (Hover) */
  --color-on-accent:      #ffffff;
  --color-whatsapp:       #128c7e; /* WhatsApp-Grün (Icon) */

  /* CTA-Buttons – Goldton (dunkle Schrift wegen Kontrast) */
  --color-cta:       #d3af37;
  --color-on-cta:    #0f1c33;
  /* Metallic-Gold für den Haupt-CTA (Verlauf + Lichtreflex) */
  --color-cta-light: #ecd58a;
  --color-cta-deep:  #a9862a;
  --color-cta-glow:  rgba(211, 175, 55, .35);
  --color-cta-sheen: rgba(255, 255, 255, .55);

  /* Flächen & Text */
  --color-bg:         #ffffff;
  --color-surface:    #f4f7fb;
  --color-foreground: #0f1c33;
  --color-muted:      #5a6b82;
  --color-border:     #dde5ef;
  --color-ring:       #1a4f9c;
  --color-destructive:    #c0271f; /* Fehler/Validierung */
  --color-destructive-bg: #fdecea;
  --color-tint:       #e9f3f4; /* zarter Teal-Ton für Sektionsrhythmus */

  --shadow-soft: 0 1px 2px rgba(15, 28, 51, .04), 0 6px 18px rgba(15, 28, 51, .07);
  --shadow-lift: 0 12px 32px rgba(15, 28, 51, .14);

  /* Auf dunklem Grund (Footer) */
  --color-footer-text:   #cdd8ea;
  --color-footer-muted:  #9fb0cc;
  --color-on-dark:       #ffffff;
  --color-border-on-dark: rgba(255, 255, 255, .15);
  --color-overlay-light:  rgba(255, 255, 255, .12);

  /* Hero-Overlay (Primärfarben mit Transparenz) */
  --color-overlay-primary:      rgba(0, 44, 107, .90);
  --color-overlay-primary-dark: rgba(0, 27, 66, .90);

  /* Hinweis-/Platzhalter-Markierung (nur Entwicklung) */
  --color-warn-text:   #8a5a00;
  --color-warn-bg:     #fff4e0;
  --color-warn-border: #f0d199;

  /* Typografie */
  --font-base: "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;
  --fs-hero: clamp(2.25rem, 5vw, 3.5rem);
  --lh-body: 1.6;
  --lh-head: 1.2;

  /* Abstände (4/8-Raster) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radien, Schatten, Layout */
  --radius:    10px;
  --radius-lg: 16px;
  --radius-sm: 6px;
  --shadow:    0 1px 2px rgba(15, 28, 51, .06), 0 4px 16px rgba(15, 28, 51, .08);
  --container: 1200px;
  --transition: 200ms ease;

  /* z-Ebenen */
  --z-header: 100;
  --z-skip:   1000;
}

/* ---- Apple-Redesign (apple.css) ------------------------------------
   Typografie: Laufweite/Zeilenabstand sind größenabhängig (große Schrift
   enger, Fließtext neutral). Bewegung: kritisch gedämpfte Kurven, kein
   Überschwingen. Materialien: halbtransparente Glasflächen. */
:root {
  /* Schriftgrößen-Skala (fluid) mit passender Laufweite + Zeilenhöhe */
  --fs-display:   clamp(2.5rem, 1.6rem + 4.4vw, 5rem);
  --lh-display:   1.04;
  --ls-display:   -0.035em;
  --fs-display-page: clamp(2.25rem, 1.55rem + 3.4vw, 4.25rem); /* H1 der Unterseiten */
  --fs-headline:  clamp(2rem, 1.45rem + 2.6vw, 3.5rem);
  --lh-headline:  1.08;
  --ls-headline:  -0.028em;
  --fs-title:     clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --lh-title:     1.18;
  --ls-title:     -0.016em;
  --fs-statement: clamp(1.375rem, 1.1rem + 1.3vw, 2.125rem);
  --lh-statement: 1.32;
  --ls-statement: -0.014em;
  --fs-body:      1.0625rem;
  --lh-body-a:    1.55;
  --fs-caption:   0.875rem;
  --ls-caption:   0.01em;

  /* Zusätzliche Abstände für großzügigen Weißraum */
  --space-5:  1.25rem;
  --space-10: 2.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* Radien */
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* Layout */
  --container-wide: 1280px;
  --measure:        44rem;
  --header-h:       5rem;   /* Desktop: 6.5rem, siehe unten */

  /* Glas-Materialien (Kopfleiste, Menüs) */
  --glass-bg:         rgba(255, 255, 255, .74);
  --glass-bg-strong:  rgba(255, 255, 255, .92);
  --glass-bg-sheet:   rgba(255, 255, 255, .97);
  --glass-edge:       rgba(15, 28, 51, .08);
  --glass-blur:       saturate(180%) blur(20px);
  --scroll-edge:      0 1px 0 rgba(15, 28, 51, .06), 0 8px 24px rgba(15, 28, 51, .06);

  /* Kacheln & Tiefe */
  --color-tile:       #f2f5fa;
  --color-hairline:   rgba(15, 28, 51, .10);
  --shadow-tile:      0 1px 1px rgba(15, 28, 51, .03), 0 10px 30px rgba(15, 28, 51, .06);
  --shadow-tile-lift: 0 2px 4px rgba(15, 28, 51, .04), 0 22px 48px rgba(15, 28, 51, .12);
  --shadow-stage:     0 30px 80px rgba(0, 27, 66, .18);

  /* Bewegung – kritisch gedämpft (Apple-Default, kein Überschwingen) */
  --ease-spring:   cubic-bezier(.32, .72, 0, 1);
  --ease-standard: cubic-bezier(.25, .1, .25, 1);
  --dur-press:     100ms;
  --dur-ui:        320ms;
  --dur-reveal:    800ms;
  /* Rückweg = gespiegelte Kurve (gleicher Pfad zurück), etwas kürzer */
  --ease-spring-reverse: cubic-bezier(1, 0, .68, .28);
  --dur-ui-out:    240ms;

  /* Weicher Fokus-Hof um Formularfelder */
  --ring-soft:     rgba(26, 79, 156, .18);

  /* Abdunkelung hinter modalen Ebenen (mobiles Menü) */
  --scrim:         rgba(0, 27, 66, .32);
  --z-scrim:       99;
}

/* Basis-Schrift anwenden (einzige font-family-Anwendung im Projekt) */
html {
  font-family: var(--font-base);
}

/* Kopfleiste auf großen Bildschirmen höher (orientiert an der bisherigen Website) */
@media (min-width: 900px) { :root { --header-h: 6.5rem; } }