/* ============================================================================
   TEAMDROP · DESIGN SYSTEM v1 — WEB FOUNDATION
   ----------------------------------------------------------------------------
   Quelle der Wahrheit für alle TEAMDROP-Oberflächen (Website → CRM → Shop).
   Farbwerte sind durch die finale TEAMDROP-Brand-Spezifikation fixiert:
     DEEP BLUE #242672 · LIME #93C11C · LIGHT #E9EDF9 · DARK BLUE #232167
     WHITE #F5F5F5
   Die 500er-Stufen SIND die Markenwerte — nie eine Annäherung.
   Ältere Definitionen (Midnight Ink, Electric Blue, frühere Blau-/Lime-Werte)
   sind hiermit abgelöst.
   ========================================================================= */

/* ════════════════════════════ 1 · COLOR ═══════════════════════════════ */
:root{
  /* ---- Core brand (final) ---- */
  --td-blue:#242672;        /* TEAMDROP Deep Blue — Primary / Brandflächen */
  --td-blue-dark:#232167;   /* TEAMDROP Dark Blue — tiefe Flächen, Verläufe */
  --td-lime:#93C11C;        /* TEAMDROP Lime — Primary CTA, Akzent, Status */
  --td-light:#E9EDF9;       /* TEAMDROP Light — helle Sections, Cards */
  --td-white:#F5F5F5;       /* TEAMDROP White — Seiten-Canvas, Text auf Dunkel */
  --td-pure:#FFFFFF;        /* Reines Weiß — Karten auf TD-White */

  /* ---- Blue scale (500 = Deep Blue, 600 = Dark Blue) ---- */
  --blue-50:#F2F2F7; --blue-100:#E0E1EB; --blue-200:#C2C2D8;
  --blue-300:#9697BB; --blue-400:#616399; --blue-500:#242672;
  --blue-600:#232167; --blue-700:#1C1B54; --blue-800:#161543;
  --blue-900:#111035;

  /* ---- Lime scale (500 = Brand Lime) ---- */
  --lime-50:#F7FBEF; --lime-100:#EEF5DB; --lime-200:#DAEAB2;
  --lime-300:#C3DC80; --lime-400:#ABCF4E; --lime-500:#93C11C;
  --lime-600:#7DA418; --lime-700:#678713; --lime-800:#4E670F;
  --lime-900:#384A0A;

  /* ---- Neutral scale (50 = TD White, 100 = TD Light, kühl abgestimmt) ---- */
  --neutral-0:#FFFFFF;  --neutral-50:#F5F5F5;  --neutral-100:#E9EDF9;
  --neutral-200:#D4D7E4; --neutral-300:#BABDCB; --neutral-400:#9497A5;
  --neutral-500:#727483; --neutral-600:#585A6A; --neutral-700:#414252;
  --neutral-800:#2E2F3F; --neutral-900:#1F2031; --neutral-950:#141526;

  /* ---- Semantic status ---- */
  --success-500:#3FAE4B; --success-100:#E2F4E4;
  --warning-500:#E8A317; --warning-100:#FDF1D9;
  --error-500:#D93A3A;   --error-100:#FBE4E4;
  --info-500:#3A6FD9;    --info-100:#E3EBFB;

  /* ---- Alpha helpers (Ink = neutral-950) ---- */
  --alpha-ink-04:rgba(20,21,38,.04);
  --alpha-ink-08:rgba(20,21,38,.08);
  --alpha-ink-16:rgba(20,21,38,.16);
  --alpha-ink-60:rgba(20,21,38,.60);
  --alpha-ink-88:rgba(20,21,38,.88);
  --alpha-white-06:rgba(255,255,255,.06);
  --alpha-white-10:rgba(255,255,255,.10);
  --alpha-white-16:rgba(255,255,255,.16);
  --alpha-white-64:rgba(255,255,255,.64);
  --alpha-lime-12:rgba(147,193,28,.12);
  --alpha-lime-24:rgba(147,193,28,.24);
  --alpha-blue-12:rgba(36,38,114,.12);

  /* ---- Gradients — die einzigen zwei sanktionierten ---- */
  --gradient-brand:linear-gradient(180deg,#242672 0%,#232167 100%);
  --gradient-protect:linear-gradient(180deg,rgba(20,21,38,0) 0%,rgba(20,21,38,.55) 55%,rgba(20,21,38,.92) 100%);

  /* ══ SEMANTIC ALIASES — LIGHT ist der Default-Scope ══ */
  --surface-page:var(--td-white);
  --surface-card:var(--td-pure);
  --surface-soft:var(--td-light);
  --surface-brand:var(--td-blue);
  --surface-inverse:var(--neutral-950);

  --text-primary:var(--neutral-900);
  --text-secondary:var(--neutral-600);
  --text-tertiary:var(--neutral-500);
  --text-accent:var(--td-blue);
  --text-inverse:var(--td-white);
  --text-on-lime:var(--td-blue);
  --text-on-brand:var(--td-white);

  --border-hairline:var(--alpha-ink-08);
  --border-default:var(--alpha-ink-16);
  --border-strong:var(--neutral-400);

  --state-hover-surface:var(--alpha-ink-04);
  --state-active-surface:var(--alpha-ink-08);
  --state-brand-hover:var(--blue-600);
  --state-brand-active:var(--blue-700);
  --state-accent-hover:var(--lime-400);
  --state-accent-active:var(--lime-600);

  --link:var(--td-blue);
  --link-hover:var(--blue-600);
}

/* ── Dunkler Scope: Deep-Blue-Flächen (Hero, Header, Footer, Brand-Sections) ── */
.td-dark{
  --surface-page:var(--td-blue);
  --surface-card:var(--alpha-white-06);
  --surface-soft:var(--blue-600);
  --text-primary:var(--td-white);
  --text-secondary:var(--blue-200);
  --text-tertiary:var(--blue-300);
  --text-accent:var(--td-lime);
  --border-hairline:var(--alpha-white-10);
  --border-default:var(--alpha-white-16);
  --border-strong:var(--blue-300);
  --state-hover-surface:var(--alpha-white-06);
  --state-active-surface:var(--alpha-white-10);
  --link:var(--td-lime);
  --link-hover:var(--lime-300);
  background:var(--surface-page);
  color:var(--text-primary);
}

/* ═══════════════════════════ 2 · TYPOGRAPHY ═══════════════════════════ */
:root{
  --font-display:"Guton",system-ui,sans-serif;
  --font-text:"Inter",system-ui,sans-serif;
  --font-alt:"Archivo",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,monospace;

  --display-weight:900;   /* Guton Black */
  --heading-weight:900;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fw-bold:700;    --fw-extrabold:800; --fw-black:900;

  /* ---- DISPLAY (Guton Black, Uppercase) ---- */
  --fs-display-xxl:112px; --lh-display-xxl:0.90;
  --fs-display-xl:88px;   --lh-display-xl:0.92;
  --fs-display:72px;      --lh-display:0.94;
  --fs-hero:56px;         --lh-hero:0.98;

  /* Fluid-Varianten für responsive Marketing-Seiten */
  --fs-display-xxl-fluid:clamp(48px,9vw,112px);
  --fs-display-xl-fluid:clamp(40px,7vw,88px);
  --fs-display-fluid:clamp(34px,5.5vw,72px);
  --fs-hero-fluid:clamp(30px,4.2vw,56px);

  /* ---- HEADINGS (Guton, Uppercase) ---- */
  --fs-h1:44px; --lh-h1:1.06;
  --fs-h2:34px; --lh-h2:1.10;
  --fs-h3:26px; --lh-h3:1.16;
  --fs-h4:20px; --lh-h4:1.25;
  --fs-h5:17px; --lh-h5:1.30;
  --fs-h6:15px; --lh-h6:1.35;

  /* ---- TEXT (Inter) ---- */
  --fs-subtitle:20px; --lh-subtitle:1.45;
  --fs-lead:19px;     --lh-lead:1.58;
  --fs-body-lg:17px;  --lh-body-lg:1.60;
  --fs-body:15px;     --lh-body:1.60;
  --fs-small:13px;    --lh-small:1.52;
  --fs-caption:12px;  --lh-caption:1.45;
  --fs-micro:11px;    --lh-micro:1.40;

  /* ---- LABELS & CONTROLS ---- */
  --fs-label:12px;     --lh-label:1.2;
  --fs-button:13px;    --fs-button-lg:15px; --lh-button:1;

  /* ---- Letterspacing (Guton läuft breit → nur leicht verdichten) ---- */
  --ls-display:-0.015em;
  --ls-heading:-0.01em;
  --ls-body:0;
  --ls-label:0.14em;
  --ls-button:0.08em;

  --measure:62ch;        /* max. Zeilenlänge Fließtext */
  --measure-narrow:46ch;
}

/* ═════════════════════════════ 3 · SPACING ════════════════════════════ */
/* 4px-Baseline. Jeder vertikale Rhythmus ist ein Vielfaches von 4. */
:root{
  --space-0:0;    --space-1:4px;   --space-2:8px;   --space-3:12px;
  --space-4:16px; --space-5:20px;  --space-6:24px;  --space-7:32px;
  --space-8:40px; --space-9:48px;  --space-10:64px; --space-11:80px;
  --space-12:96px;--space-13:128px;--space-14:160px;--space-15:200px;

  --baseline:4px;
  --baseline-text:24px;

  --section-y:clamp(64px,7vw,128px);
  --section-y-lg:clamp(96px,10vw,200px);
  --section-y-sm:clamp(40px,4.5vw,72px);

  /* Control-Geometrie — Pill-Radius leitet sich aus diesen Höhen ab */
  --control-h-xs:28px; --control-h-sm:34px; --control-h-md:44px;
  --control-h-lg:52px; --control-h-xl:60px;
  --control-px-xs:12px; --control-px-sm:16px; --control-px-md:24px;
  --control-px-lg:32px; --control-px-xl:40px;

  --row-h-compact:36px; --row-h-default:48px; --row-h-comfy:60px;
}

/* ═════════════════════════════ 4 · RADIUS ═════════════════════════════ */
/* Radius folgt dem TD-Monogramm-Stadion: Controls sind VOLLE Pills,
   Container kantig mit kleiner, bewusster Rundung. Nie ein weicher Blob. */
:root{
  --radius-none:0; --radius-xs:2px; --radius-sm:4px;
  --radius-md:8px; --radius-lg:12px; --radius-xl:20px;
  --radius-pill:999px;

  --stadium-ring:3px;
  --stadium-ring-lg:5px;

  --border-w-hair:1px; --border-w:1.5px; --border-w-strong:2px;
}

/* ════════════════════════════ 5 · ELEVATION ═══════════════════════════ */
/* Elevation ist leise. Helle Flächen: enge, kühle, alpha-schwache Schatten;
   dunkle Flächen tragen Elevation über Hairlines & Flächenaufhellung.
   Fokus ist immer ein harter Lime-Ring, nie ein Blur. */
:root{
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(20,21,38,.06);
  --shadow-sm:0 2px 6px rgba(20,21,38,.07);
  --shadow-md:0 8px 20px rgba(20,21,38,.09);
  --shadow-lg:0 18px 44px rgba(20,21,38,.13);
  --shadow-xl:0 32px 80px rgba(20,21,38,.18);
  --shadow-brand:0 12px 32px rgba(36,38,114,.24);
  --shadow-accent:0 12px 32px rgba(147,193,28,.26);
  --shadow-inset-hair:inset 0 0 0 1px var(--border-hairline);

  --elevation-0:none;
  --elevation-1:var(--shadow-xs);  /* ruhende Card */
  --elevation-2:var(--shadow-sm);  /* Hover-Card, Sticky-Bar */
  --elevation-3:var(--shadow-md);  /* Dropdown, Popover, Toast */
  --elevation-4:var(--shadow-lg);  /* Drawer */
  --elevation-5:var(--shadow-xl);  /* Modal */

  --ring-focus:0 0 0 3px rgba(147,193,28,.55);
  --ring-focus-strong:0 0 0 3px var(--td-lime);
  --ring-error:0 0 0 3px rgba(217,58,58,.30);
  --ring-brand:0 0 0 3px rgba(36,38,114,.24);

  --blur-nav:saturate(160%) blur(16px);
  --blur-scrim:blur(4px);
}

/* ═════════════════════════════ 6 · MOTION ═════════════════════════════ */
/* Motion ist athletisch und kontrolliert: schnell aus den Blöcken, weich
   ins Ziel. Kein Bounce, kein Overshoot, kein Spring. Nichts wackelt. */
:root{
  --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms;
  --dur-slow:320ms;   --dur-reveal:560ms; --dur-page:400ms;

  --ease-out:cubic-bezier(.16,.84,.44,1);
  --ease-in:cubic-bezier(.55,0,1,.45);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --ease-linear:linear;

  --stagger:60ms;

  --t-control:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),transform var(--dur-instant) var(--ease-out);
  --t-surface:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
  --t-media:transform var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out);

  --press-scale:0.975;
  --hover-lift:-2px;
  --media-zoom:1.04;
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-instant:0ms; --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms;
    --dur-reveal:0ms; --dur-page:0ms;
    --press-scale:1; --hover-lift:0px; --media-zoom:1;
  }
}

/* ════════════════════════════ 7 · OPACITY ═════════════════════════════ */
:root{
  --opacity-disabled:0.40;
  --opacity-hover-img:0.90;
  --opacity-scrim:0.60;
}

/* ════════════════════════════ 8 · Z-INDEX ═════════════════════════════ */
:root{
  --z-base:0; --z-raised:10; --z-sticky:100; --z-nav:200;
  --z-dropdown:300; --z-drawer:400; --z-modal:500;
  --z-toast:600; --z-tooltip:700;
}

/* ════════════════════════════ 9 · LAYOUT ══════════════════════════════ */
:root{
  /* Breakpoints (min-width) */
  --bp-xs:390px; --bp-sm:640px; --bp-md:834px;
  --bp-lg:1200px; --bp-xl:1440px; --bp-2xl:1920px;

  /* Container */
  --container-xs:640px; --container-sm:840px; --container-md:1080px;
  --container-lg:1280px; --container-xl:1440px;
  --container-full:1760px;   /* Dashboards / CRM */
  --container-prose:720px;

  /* Gutter */
  --gutter-mobile:20px; --gutter-tablet:32px; --gutter-desktop:48px;
  --gutter:clamp(20px,4vw,48px);

  /* Grid */
  --grid-cols-mobile:4; --grid-cols-tablet:8; --grid-cols-desktop:12;
  --grid-gap:24px; --grid-gap-tight:16px; --grid-gap-wide:32px;

  /* Fixes Chrome */
  --nav-h:72px; --nav-h-compact:60px;
  --topbar-h:64px; --sidebar-w:264px; --sidebar-w-collapsed:76px;
  --drawer-w:440px;

  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
}

/* ═══════════════════════════ 10 · BASE ════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface-page);color:var(--text-primary);
  font-family:var(--font-text);font-size:var(--fs-body);
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  margin:0;font-family:var(--font-display);font-weight:var(--heading-weight);
  letter-spacing:var(--ls-heading);text-transform:uppercase;color:inherit;
}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
h5{font-size:var(--fs-h5);line-height:var(--lh-h5)}
h6{font-size:var(--fs-h6);line-height:var(--lh-h6)}
p{margin:0;text-wrap:pretty}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;letter-spacing:inherit}
a{color:var(--link);text-decoration:none;border-bottom:1px solid transparent;transition:var(--t-control)}
a:hover{color:var(--link-hover);border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--td-lime);outline-offset:2px;border-radius:var(--radius-sm);
}
::selection{background:var(--td-lime);color:var(--td-blue)}
hr{border:none;border-top:1px solid var(--border-hairline);margin:0}

/* ---- Brand-Type-Utilities ---- */
.td-display{
  font-family:var(--font-display);font-weight:var(--display-weight);
  text-transform:uppercase;letter-spacing:var(--ls-display);
  line-height:var(--lh-display);
}
.td-oblique{font-style:oblique 8deg}         /* sportliche Schräge, sparsam */
.td-eyebrow{
  font-family:var(--font-alt);font-weight:var(--fw-bold);
  font-size:var(--fs-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--text-accent);
}
.td-lead{
  font-size:var(--fs-lead);line-height:var(--lh-lead);
  color:var(--text-secondary);max-width:var(--measure);
}
.td-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---- Layout-Utilities ---- */
.td-container{width:100%;max-width:var(--container-xl);margin-inline:auto;padding-inline:var(--gutter)}
.td-section{padding-block:var(--section-y)}
.td-grid{display:grid;grid-template-columns:repeat(var(--grid-cols-desktop),minmax(0,1fr));gap:var(--grid-gap)}
@media (max-width:1199px){.td-grid{grid-template-columns:repeat(var(--grid-cols-tablet),minmax(0,1fr))}}
@media (max-width:639px){.td-grid{grid-template-columns:repeat(var(--grid-cols-mobile),minmax(0,1fr))}}

/* ---- Stadium (Markenform als Rahmen) ---- */
.td-stadium{
  display:inline-flex;align-items:center;justify-content:center;
  border:var(--stadium-ring) solid var(--td-blue);
  border-radius:var(--radius-pill);overflow:hidden;
}
.td-dark .td-stadium{border-color:var(--td-lime)}

/* ---- Keyframes ---- */
@keyframes td-spin{to{transform:rotate(360deg)}}
@keyframes td-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes td-reveal-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}