/* ==========================================================================
   Cablesport Arena Pinneberg — Design System
   Prefix: cs | Theme: Sporty Modern Fresh
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Tokens)
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --primary: #0A1628;
  --secondary: #1A2D4A;
  --accent: #DF1D84;
  --accent-hover: #C4176F;
  --cyan: #00b4d8;
  --cyan-dark: #0096b7;
  --gold: #f0c040;
  --base: #4A5568;
  --base-dark: #2D3748;
  --base-medium: #718096;
  --base-light: #E2E8F0;
  --base-ultra-light: #F7FAFC;
  --neutral: #FFFFFF;
  --shade: #000000;
  --white: #FFFFFF;
  --black: #000000;

  /* Functional Colors */
  --success: #38A169;
  --warning: #D69E2E;
  --error: #E53E3E;

  /* Typography */
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --heading-weight: 700;
  --heading-line-height: 1.2;
  --body-line-height: 1.7;
  --body-weight: 400;

  /* Type Scale (Major Third 1.25) */
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.125rem;
  --text-xl: 1.25rem;
  --heading-xs: 1.25rem;
  --heading-s: 1.563rem;
  --heading-m: 1.953rem;
  --heading-l: 2.441rem;
  --heading-xl: 3.052rem;
  --heading-xxl: 3.815rem;

  /* Spacing Scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* Section Spacing */
  --section-space-s: var(--space-2xl);
  --section-space-m: var(--space-3xl);
  --section-space-l: var(--space-4xl);

  /* Layout */
  --content-width: 1200px;
  --content-width-narrow: 800px;
  --content-width-wide: 1400px;
  --gutter: var(--space-m);
  --gutter-mobile: var(--space-s);

  /* Radius */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-s: 0 1px 3px rgba(10, 22, 40, 0.1);
  --shadow-m: 0 4px 12px rgba(10, 22, 40, 0.1);
  --shadow-l: 0 8px 24px rgba(10, 22, 40, 0.12);
  --shadow-xl: 0 16px 48px rgba(10, 22, 40, 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;

  /* Z-Index Scale */
  --z-below: -1;
  --z-base: 0;
  --z-above: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --------------------------------------------------------------------------
   2. Global Resets & Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  color: var(--primary);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  line-height: var(--heading-line-height);
  color: var(--primary);
  margin: 0;
}

h1 { font-size: var(--heading-xxl); }
h2 { font-size: var(--heading-xl); }
h3 { font-size: var(--heading-l); }
h4 { font-size: var(--heading-m); }
h5 { font-size: var(--heading-s); }
h6 { font-size: var(--heading-xs); }

p {
  font-size: var(--text-m);
  line-height: var(--body-line-height);
  color: var(--base);
  margin: 0 0 var(--space-s);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

/* Responsive Typography */
@media (max-width: 991px) {
  :root {
    --heading-xxl: 2.8rem;
    --heading-xl: 2.2rem;
    --heading-l: 1.8rem;
    --heading-m: 1.5rem;
  }
}

@media (max-width: 767px) {
  :root {
    --heading-xxl: 2.2rem;
    --heading-xl: 1.8rem;
    --heading-l: 1.5rem;
    --heading-m: 1.25rem;
    --heading-s: 1.125rem;
  }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  background-color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn--primary:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn--outline:hover {
  background-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.btn--accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--white);
  background-color: var(--secondary);
  border: 2px solid var(--secondary);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn--accent:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.btn--white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  font-family: var(--font-body);
  font-size: var(--text-m);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background-color: var(--white);
  border: 2px solid var(--white);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn--white:hover {
  background-color: transparent;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

/* Small Button Variant */
.btn--s {
  padding: 0.6em 1.5em;
  font-size: var(--text-s);
}

/* Large Button Variant */
.btn--l {
  padding: 1em 2.5em;
  font-size: var(--text-l);
}

/* --------------------------------------------------------------------------
   5. Section Utilities
   -------------------------------------------------------------------------- */

.section--light {
  background-color: var(--white);
  color: var(--primary);
}

.section--neutral {
  background-color: var(--base-ultra-light);
  color: var(--primary);
}

.section--dark {
  background-color: var(--primary);
  color: var(--white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--white);
}

.section--dark p {
  color: var(--base-light);
}

.section--dark a {
  color: var(--accent);
}

.section--accent {
  background-color: var(--accent);
  color: var(--white);
}

.section--accent h1,
.section--accent h2,
.section--accent h3,
.section--accent h4 {
  color: var(--white);
}

.section--accent p {
  color: rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   6. Layout Utilities
   -------------------------------------------------------------------------- */

.content-width {
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.content-width--narrow {
  max-width: var(--content-width-narrow);
}

.content-width--wide {
  max-width: var(--content-width-wide);
}

/* --------------------------------------------------------------------------
   7. Card Styles
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--white);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  overflow: hidden;
  transition: all var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-l);
  transform: translateY(-4px);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--base-light);
}

.card--flat:hover {
  box-shadow: var(--shadow-m);
  border-color: transparent;
}

/* --------------------------------------------------------------------------
   8. Table Styles (Preistabellen)
   -------------------------------------------------------------------------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-m);
}

.price-table th {
  background-color: var(--primary);
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1em 1.25em;
  text-align: left;
}

.price-table td {
  padding: 0.85em 1.25em;
  border-bottom: 1px solid var(--base-light);
  color: var(--base-dark);
}

.price-table tr:nth-child(even) td {
  background-color: var(--base-ultra-light);
}

.price-table tr:hover td {
  background-color: rgba(223, 29, 132, 0.05);
}

.price-table .price-table__highlight {
  background-color: rgba(223, 29, 132, 0.08);
  font-weight: 600;
}

.price-table .price-table__price {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Tooltip Styles (fuer Preistabellen-Infos)
   -------------------------------------------------------------------------- */

[data-tooltip] {
  position: relative;
  cursor: help;
  border-bottom: 1px dashed var(--base-medium);
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5em 0.75em;
  background-color: var(--primary);
  color: var(--white);
  font-size: var(--text-s);
  font-weight: 400;
  line-height: 1.4;
  border-radius: var(--radius-s);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: var(--z-above);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. Responsive Helpers
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --gutter: var(--gutter-mobile);
    --section-space-s: var(--space-xl);
    --section-space-m: var(--space-2xl);
    --section-space-l: var(--space-3xl);
  }

  .btn--primary,
  .btn--outline,
  .btn--accent,
  .btn--white {
    width: 100%;
    text-align: center;
  }
}