/**
 * UPTOMADE DESIGN SYSTEM
 * Extrahiert aus de/index.html + de/automation.html + style.css
 * Stand: 2026-03-14
 *
 * Verwendung: @import './design-system.css';
 * Referenz-Klassen kommen von Tailwind CDN — diese Variablen
 * ermöglichen eine spätere Migration zu Build-Step-Tailwind oder
 * reinem CSS ohne Abhängigkeit vom CDN.
 */

/* ─────────────────────────────────────────────
   1. FARBEN
   ───────────────────────────────────────────── */

:root {
  /* Hintergründe */
  --color-bg:           #ffffff;      /* Heller Seiten-Hintergrund */
  --color-surface:      #f8f8f8;      /* Leicht grauer Surface (Cards, Sektion-BG) */
  --color-surface-mid:  #f1f1f1;      /* Border-Farbe auf hellem BG */
  --color-bg-dark:      #0a0a0a;      /* Primärer dunkler Seiten-Hintergrund */
  --color-bg-darkest:   #050505;      /* Root-Redirect / dunklste Fläche */
  --color-surface-dark: #0f0f0f;      /* Dunkle Card-Oberfläche (Mockup) */
  --color-surface-dark-2: #111111;    /* Chat-Karte, Konnektivitätskarten */
  --color-surface-dark-3: #1a1a1a;    /* Chat-Bubble-BG bot-seitig */
  --color-surface-dark-4: #222222;    /* Chat-Bubble-BG user-seitig */

  /* Text */
  --color-text:         #000000;      /* Primärer Text auf hellem BG */
  --color-text-white:   #ffffff;      /* Text auf dunklem BG */
  --color-text-muted:   #6b7280;      /* Gedämpft (gray-500) — Fließtext sekundär */
  --color-text-subtle:  #9ca3af;      /* Sehr gedämpft (gray-400) — Timestamps, Labels */
  --color-text-faint:   #6b7280;      /* Footer-Links inaktiv, Legal-Fließtext */
  --color-text-legal:   #374151;      /* Legal-Seiten-Fließtext (gray-700) */

  /* Akzent */
  --color-accent:       #FF3B30;      /* Primärfarbe — Buttons, Links, Hover-States */
  --color-accent-hover: #e6352b;      /* Hover-Zustand des Akzents */

  /* Status */
  --color-success:      #22c55e;      /* Online-Indikatoren, Floating-Phone-CTA (green-500) */
  --color-success-dark: #16a34a;      /* Text-Variante grün auf hellem BG (green-700) */
  --color-success-bg:   #dcfce7;      /* Badge-Hintergrund grün hell (green-100) */
  --color-error:        #ef4444;      /* Live-Indikator rot, Pulse-Ring (red-500) */

  /* Overlay / Transparenz (CSS-Alpha-Varianten) */
  --color-white-5:      rgba(255,255,255,0.05);   /* Subtile helle Border auf Dark */
  --color-white-10:     rgba(255,255,255,0.10);   /* Standard helle Border auf Dark */
  --color-white-20:     rgba(255,255,255,0.20);   /* Hover-States auf Dark */
  --color-black-80:     rgba(0,0,0,0.80);         /* Hero-Gradient Mitte */
  --color-black-95:     rgba(0,0,0,0.95);         /* Navbar-Hintergrund */
  --color-accent-20:    rgba(255,59,48,0.20);     /* Blur-Glow um Mic-Kreis */
  --color-accent-30:    rgba(255,59,48,0.30);     /* Ping-Ring um Mic-Kreis */
  --color-accent-50:    rgba(255,59,48,0.50);     /* Scan-Linie auf Dokument */

  /* Schatten-Farben */
  --shadow-dark:        rgba(0,0,0,0.18);         /* CTA-Button-Schatten */
  --shadow-slate:       rgba(15,23,42,0.14);      /* Link-Schatten (CTA-Unifier) */
}

/* ─────────────────────────────────────────────
   2. TYPOGRAFIE
   ───────────────────────────────────────────── */

:root {
  /* Schriftfamilien */
  --font-sans:  'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont,
                'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Schriftgewichte */
  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;
  --fw-black:      900;

  /* ── Responsive Schriftgrößen (clamp) ──────── */

  /* Seitenübergreifende H1 (Standard) */
  --fs-h1:      clamp(2rem, 5vw, 3.5rem);
  /* H1 global (leicht kleiner, z. B. Unterseiten-Hero via index.css) */
  --fs-h1-sub:  clamp(1.85rem, 4.8vw, 3.2rem);
  /* H1 Mobile-Override */
  --fs-h1-mobile: clamp(1.45rem, 6.4vw, 1.75rem);

  /* Hero H1 (Automation, großes Display) */
  --fs-hero:    clamp(2.2rem, 4.8vw, 4.8rem);
  /* Hero H1 (index.css Override) */
  --fs-hero-override: clamp(2rem, 4.6vw, 3.8rem);

  /* H2 – sektionsüberschriften groß */
  --fs-h2:      clamp(1.5rem, 3vw, 2.25rem);
  /* H2 xl (z. B. "Voice Agent – Ihr Telefon schläft nie") */
  --fs-h2-xl:   clamp(3rem, 7vw, 4.5rem);   /* text-7xl ≈ 4.5rem */
  /* H2 8xl (Brücken-Sektion Konnektivität) */
  --fs-h2-2xl:  clamp(3rem, 8vw, 6rem);     /* text-8xl ≈ 6rem */
  /* H2 6xl (Warum Uptomade) */
  --fs-h2-lg:   clamp(2.5rem, 6vw, 3.75rem); /* text-6xl ≈ 3.75rem */

  /* H3 */
  --fs-h3:      clamp(1.25rem, 2.4vw, 1.6rem);
  /* H3 in Cards */
  --fs-h3-card: 1.5rem;                     /* text-2xl */

  /* H4 – Footer-Kategorietitel, Eyebrows */
  --fs-h4:      0.75rem;                    /* text-xs */

  /* Body */
  --fs-body:    clamp(1rem, 1.2vw, 1.125rem);
  /* Body groß (Fließtext Abschnitte) */
  --fs-body-lg: clamp(1.125rem, 2vw, 1.5rem); /* text-lg bis text-2xl */
  /* Body Standard */
  --fs-body-sm: 1rem;
  /* Labels, Mono-Tags */
  --fs-label:   0.75rem;                    /* text-xs */
  /* Tiny (z. B. "10px"-Tag in Mockup) */
  --fs-tiny:    0.625rem;                   /* text-[10px] */

  /* Global-CTA (aus style.css) */
  --fs-cta-title: clamp(1.5rem, 2.7vw, 1.98rem);
  --fs-cta-text:  clamp(1rem, 0.94vw, 1.06rem);
  --fs-cta-btn:   clamp(1rem, 0.83vw, 1rem);

  /* ── Zeilenhöhen ────────────────────────────── */
  --lh-tight:     0.9;    /* Große Display-Headings */
  --lh-heading:   1.1;    /* Standard-Headings */
  --lh-snug:      1.25;   /* Subheadings */
  --lh-normal:    1.5;    /* Allgemeiner Text */
  --lh-relaxed:   1.625;  /* Beschreibungstext */
  --lh-loose:     1.7;    /* Legal-Fließtext */

  /* ── Letter-Spacing ─────────────────────────── */
  --ls-tighter:   -0.05em;  /* tracking-tighter — Nav-Logo, Display-Headings */
  --ls-tight:     -0.03em;  /* tracking-tight — Abschnitts-Headings */
  --ls-snug:      -0.02em;  /* leicht eng — Hero-H1 (index.css) */
  --ls-normal:     0;
  --ls-wide:       0.02em;  /* CTA-Buttons */
  --ls-wider:      0.05em;  /* tracking-wider — Buttons, Eyebrow */
  --ls-widest:     0.1em;   /* tracking-widest — Footer-Labels, Mono-Tags */
  --ls-mono-tag:   0.26em;  /* Legal-Hero-Eyebrow */
}

/* ─────────────────────────────────────────────
   3. BORDER RADIUS
   ───────────────────────────────────────────── */

:root {
  --radius-none:   0;
  --radius-sm:     4px;      /* rounded — kleinste Elemente */
  --radius-md:     8px;      /* rounded-lg — kleine Karten */
  --radius-lg:     12px;     /* rounded-xl — Sprachumschalter Mobile */
  --radius-xl:     16px;     /* rounded-2xl — Chat-Bubbles, innere Cards */
  --radius-2xl:    24px;     /* rounded-3xl — mittlere Karten */
  --radius-3xl:    32px;     /* rounded-[2rem] — Feature-Cards, Grid-Karten */
  --radius-4xl:    40px;     /* rounded-[2.5rem] — Device-Mockups */
  --radius-5xl:    48px;     /* rounded-[3rem] — Footer oben, große Cards */
  --radius-full:   9999px;   /* rounded-full — Nav-Pill, Buttons, Avatare, Social-Icons */
}

/* ─────────────────────────────────────────────
   4. ABSTÄNDE (Spacing Scale)
   ───────────────────────────────────────────── */

:root {
  /* Horizontale Container-Padding */
  --px-xs:    1rem;     /* px-4 — Mobile Nav */
  --px-sm:    1.5rem;   /* px-6 — Sektion-Standard */
  --px-md:    3rem;     /* px-12 — Tablet Nav, mittlere Sektionen */
  --px-lg:    6rem;     /* px-24 — Desktop große Sektionen */

  /* Container max-widths */
  --max-w-content:   1440px;  /* max-w-[1440px] — Standard Content-Breite */
  --max-w-wide:      1600px;  /* max-w-[1600px] — breite Layout-Sektionen */
  --max-w-hero:      1800px;  /* max-w-[1800px] — Hero-Grid */
  --max-w-text:       896px;  /* max-w-4xl — Legal, CTA-Text-Blöcke */
  --max-w-cta:        980px;  /* max-w ~980px — Global-CTA-Container */
  --max-w-card:       448px;  /* max-w-md — Chat-Karte, Dokument-Karte */

  /* Vertikale Sektion-Abstände */
  --py-section-sm:  clamp(4rem, 6vw, 6rem);    /* py-16/py-24 */
  --py-section-md:  clamp(6rem, 10vw, 12rem);  /* py-24/py-48 */
  --py-section-lg:  clamp(8rem, 12vw, 12rem);  /* py-32/py-48 groß */

  /* Card-interne Abstände */
  --p-card:    2rem;    /* p-8 */
  --p-card-lg: 2.5rem;  /* p-10 */

  /* Grid-Abstände */
  --gap-sm:  1.5rem;    /* gap-6 */
  --gap-md:  3rem;      /* gap-12 */
  --gap-lg:  8rem;      /* gap-32 — große 2-Spalten-Layouts */

  /* Interne Element-Abstände */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
}

/* ─────────────────────────────────────────────
   5. SCHATTEN
   ───────────────────────────────────────────── */

:root {
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-2xl:  0 25px 50px rgba(0,0,0,0.25);  /* shadow-2xl — Cards, Mockups */

  /* Spezifische Schatten aus style.css */
  --shadow-cta-btn:    0 22px 42px rgba(0,0,0,0.18);        /* Global-CTA Button */
  --shadow-cta-link:   0 18px 40px rgba(15,23,42,0.14);     /* CTA-Links (global-cta-unifier) */
  --shadow-nav-btn:    0 4px 20px rgba(0,0,0,0.20);         /* Floating-CTA Knöpfe */
  --shadow-nav-btn-hover: 0 6px 30px rgba(0,0,0,0.30);
}

/* ─────────────────────────────────────────────
   6. ANIMATIONEN & ÜBERGÄNGE
   ───────────────────────────────────────────── */

:root {
  /* Dauer */
  --duration-fast:    200ms;
  --duration-normal:  300ms;
  --duration-slow:    500ms;
  --duration-slower:  700ms;
  --duration-page:    800ms;   /* fade-in-up */

  /* Easing */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);   /* fade-in-up — overshoot-free */
  --ease-in-out:      cubic-bezier(0.4, 0, 0.6, 1);    /* pulse-slow */
  --ease-linear:      linear;

  /* Transition-Shorthand */
  --transition-colors:    color var(--duration-normal) ease,
                          background-color var(--duration-normal) ease;
  --transition-all:       all var(--duration-normal) ease;
  --transition-transform: transform var(--duration-fast) ease;
}

@keyframes upto-fade-in-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes upto-scan {
  0%   { top: 0%; }
  100% { top: 100%; }
}

/* ─────────────────────────────────────────────
   7. Z-INDEX SCHICHTEN
   ───────────────────────────────────────────── */

:root {
  --z-base:          0;
  --z-above:         10;
  --z-nav-content:   20;
  --z-floating-cta:  9990;
  --z-grain:         9999;
  --z-nav:           100;
  --z-mobile-menu:   110;
  --z-page-exit:     99999;
}

/* ─────────────────────────────────────────────
   8. HREFLANG / SPRACHVARIANTEN-HINWEIS
   (kein CSS — nur Kommentar zur Erinnerung)

   DE: /de/ — Tailwind-Config accent = #FF3B30
   IT: /it/ — gleiche Config, kein Design-Unterschied
   ───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   9. HÄUFIGE KOMPOSITUM-TOKENS
   (Kombinationen, die überall verwendet werden)
   ───────────────────────────────────────────── */

:root {
  /* Eyebrow-Label (Mitarbeiter #01, Konnektivität, etc.) */
  --eyebrow-font-size:     var(--fs-label);
  --eyebrow-font-weight:   var(--fw-black);
  --eyebrow-color:         var(--color-accent);
  --eyebrow-letter-spacing: var(--ls-widest);

  /* Nav-Pill */
  --nav-bg:                var(--color-black-95);
  --nav-border:            var(--color-white-10);
  --nav-radius:            var(--radius-full);
  --nav-shadow:            var(--shadow-2xl);

  /* Primär-Button (Kontakt, CTA) */
  --btn-primary-bg:        var(--color-accent);
  --btn-primary-color:     var(--color-text-white);
  --btn-primary-bg-hover:  var(--color-text-white);
  --btn-primary-color-hover: var(--color-text);
  --btn-primary-radius:    var(--radius-full);
  --btn-primary-shadow:    var(--shadow-xl);

  /* Sekundär-Button (invertiert auf Dark) */
  --btn-secondary-bg:      var(--color-text-white);
  --btn-secondary-color:   var(--color-text);
  --btn-secondary-bg-hover: var(--color-accent);
  --btn-secondary-color-hover: var(--color-text-white);

  /* Helle Feature-Card */
  --card-light-bg:         var(--color-surface);
  --card-light-border:     1px solid #e5e7eb;  /* gray-200 */
  --card-light-radius:     var(--radius-3xl);
  --card-light-padding:    var(--p-card);

  /* Dunkle Feature-Card */
  --card-dark-bg:          var(--color-surface-dark-2);
  --card-dark-border:      1px solid var(--color-white-10);
  --card-dark-radius:      var(--radius-3xl);
  --card-dark-padding:     var(--p-card);

  /* Floating CTA */
  --floating-cta-phone-bg:   var(--color-success);
  --floating-cta-contact-bg: var(--color-accent);
  --floating-cta-size:       56px;
  --floating-cta-radius:     var(--radius-full);
}

/* ─────────────────────────────────────────────
   10. BODY TEXT LETTER-SPACING RESET
   Fließtexte dürfen NIE letter-spacing haben.
   Headings, Nav, Buttons, Labels behalten ihre Werte.
   ───────────────────────────────────────────── */

p, li, td, dd, blockquote, figcaption, address,
.static-content p, .static-content li,
.static-seo-content p, .static-seo-content li,
.utm-global-cta-text,
body > main p,
#root p,
main p {
  letter-spacing: 0 !important;
}

/* ─────────────────────────────────────────────
   11. GLOBAL ENHANCEMENTS
   Smooth scroll, font smoothing, micro-interactions
   ───────────────────────────────────────────── */

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Font smoothing for crisp text */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Button & link micro-interactions ── */

/* Primary buttons: lift + scale on hover */
a[class*="bg-[#FF3B30]"],
a[class*="bg-accent"],
button[class*="bg-[#FF3B30]"],
button[class*="bg-accent"],
.utm-global-cta a,
a[class*="rounded-full"][class*="bg-"] {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s ease,
              background-color 0.25s ease,
              color 0.25s ease !important;
}

a[class*="bg-[#FF3B30]"]:hover,
a[class*="bg-accent"]:hover,
button[class*="bg-[#FF3B30]"]:hover,
button[class*="bg-accent"]:hover,
.utm-global-cta a:hover,
a[class*="rounded-full"][class*="bg-"]:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(255, 59, 48, 0.25) !important;
}

a[class*="bg-[#FF3B30]"]:active,
a[class*="bg-accent"]:active,
button[class*="bg-[#FF3B30]"]:active,
button[class*="bg-accent"]:active {
  transform: translateY(0) scale(0.98) !important;
  transition-duration: 0.1s !important;
}

/* ── Link underline grow animation ── */
main a:not([class*="bg-"]):not([class*="rounded"]):not([class*="flex"]):not(nav a) {
  position: relative;
  text-decoration: none;
}

main a:not([class*="bg-"]):not([class*="rounded"]):not([class*="flex"]):not(nav a)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-accent, #FF3B30);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

main a:not([class*="bg-"]):not([class*="rounded"]):not([class*="flex"]):not(nav a):hover::after {
  width: 100%;
}

/* ── Card hover lift ── */
[class*="rounded-"][class*="bg-"][class*="p-"] {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

[class*="rounded-"][class*="bg-"][class*="p-"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

/* ── Scroll-triggered entrance animations ── */
@keyframes upto-reveal-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes upto-reveal-scale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.upto-reveal {
  opacity: 0;
  transform: translateY(40px);
}

.upto-reveal.is-visible {
  animation: upto-reveal-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.upto-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
}

.upto-reveal-scale.is-visible {
  animation: upto-reveal-scale 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Accent glow on focus-visible (accessibility) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent, #FF3B30);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Prefers reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .upto-reveal,
  .upto-reveal-scale {
    opacity: 1;
    transform: none;
  }

  a, button, [class*="rounded-"] {
    transition-duration: 0.01ms !important;
  }
}

/* ── iOS Safari scroll lock fix ── */
body.menu-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

/* ── Touch target minimum size ── */
@media (pointer: coarse) {
  a, button, [role="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}