/* ============================================================
   euronetz.de — Design System v1.0
   Logo: Variante C (Space Grotesk, Gradient Underline)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  color-scheme: light;

  /* BRAND — Primär (Cyan-Blau) */
  --brand-50:  #ECFEFF;
  --brand-100: #CFFAFE;
  --brand-200: #A5F3FC;
  --brand-400: #0891B2;
  --brand-600: #0E7490;
  --brand-800: #155E75;
  --brand-900: #164E63;

  /* ACCENT — Orange */
  --accent-50:  #FFF7ED;
  --accent-100: #FFEDD5;
  --accent-200: #F97316;
  --accent-400: #EA580C;
  --accent-600: #C2410C;
  --accent-800: #9A3412;
  --accent-900: #7C2D12;

  /* NEUTRAL — Cool Gray (Soft Light) */
  --neutral-0:   #F7F9FB;
  --neutral-50:  #EEF2F7;
  --neutral-100: #E2E8F0;
  --neutral-200: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-600: #475569;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;

  /* STATUS */
  --status-success:      #1D9E75;
  --status-success-bg:   #E1F5EE;
  --status-success-text: #085041;
  --status-warning:      #EF9F27;
  --status-warning-bg:   #FAEEDA;
  --status-warning-text: #633806;
  --status-danger:       #E24B4A;
  --status-danger-bg:    #FCEBEB;
  --status-danger-text:  #791F1F;
  --status-info:         #378ADD;
  --status-info-bg:      #E6F1FB;
  --status-info-text:    #0C447C;

  /* DEAL-SPEZIFISCH */
  --deal-badge-bg:       #E24B4A;
  --deal-badge-text:     #FFFFFF;
  --cashback-badge-bg:   #F97316;
  --cashback-badge-text: #7C2D12;
  --new-badge-bg:        #0891B2;
  --new-badge-text:      #FFFFFF;

  /* LOGO */
  --logo-font:             'Space Grotesk', sans-serif;
  --logo-weight-light:     500;
  --logo-weight-bold:      700;
  --logo-color-euro:       var(--neutral-900);
  --logo-color-netz:       var(--brand-400);
  --logo-color-de:         var(--neutral-200);
  --logo-underline:        linear-gradient(90deg, var(--brand-400) 0%, var(--accent-200) 100%);
  --logo-underline-height: 4px;
  --logo-tagline-font:     'DM Sans', sans-serif;
  --logo-tagline-color:    var(--neutral-400);
  --logo-tagline-spacing:  1px;

  /* TYPOGRAFIE */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.15em;

  /* SPACING */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;

  /* BORDER RADIUS */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 44, 42, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 44, 42, 0.10);
  --shadow-xl: 0 16px 48px rgba(44, 44, 42, 0.12);

  /* BORDERS */
  --border-color:       var(--neutral-100);
  --border-color-hover: var(--neutral-200);
  --border-width:       1px;
  --border:             1px solid var(--neutral-100);

  /* Z-INDEX */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* TRANSITIONS */
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:      var(--duration-normal) var(--ease-default);

  /* SEMANTIC SURFACE TOKENS */
  --color-bg-page:        var(--neutral-50);
  --color-bg-surface:     var(--neutral-0);
  --color-bg-elevated:    var(--neutral-0);
  --color-bg-subtle:      var(--neutral-50);
  --color-bg-brand:       var(--brand-400);
  --color-bg-brand-light: var(--brand-50);

  --color-text-primary:   var(--neutral-900);
  --color-text-secondary: var(--neutral-600);
  --color-text-muted:     var(--neutral-400);
  --color-text-disabled:  var(--neutral-200);
  --color-text-inverse:   var(--neutral-0);
  --color-text-brand:     var(--brand-400);
  --color-text-price:     var(--brand-400);
  --color-text-cashback:  var(--accent-200);

  --color-border:       var(--neutral-100);
  --color-border-hover: var(--neutral-200);
  --color-border-focus: var(--brand-400);
  --color-border-brand: var(--brand-400);
}

/* ============================================================
   DARK MODE — deaktiviert, Design ist nur für Light Mode ausgelegt
   ============================================================ */
/* @media (prefers-color-scheme: dark) { ... } */

/* ============================================================
   UTILITY KLASSEN
   ============================================================ */

/* Logo (Variante C — CSS-basiert) */
.en-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.en-logo__wordmark {
  font-family: var(--logo-font);
  letter-spacing: -0.04em;
  line-height: 1;
}
.en-logo__wordmark .part-euro { font-weight: var(--logo-weight-light); color: var(--logo-color-euro); }
.en-logo__wordmark .part-netz { font-weight: var(--logo-weight-bold);  color: var(--logo-color-netz); }
.en-logo__wordmark .part-de   { font-weight: var(--logo-weight-light); color: var(--logo-color-de);   }
.en-logo__bar {
  height: var(--logo-underline-height);
  width: 100%;
  background: var(--logo-underline);
  border-radius: 2px;
  margin-top: 3px;
}
.en-logo__tagline {
  font-family: var(--logo-tagline-font);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--logo-tagline-color);
  letter-spacing: var(--logo-tagline-spacing);
  margin-top: var(--space-2);
}

.en-logo--sm .en-logo__wordmark { font-size: 1.25rem; }
.en-logo--sm .en-logo__tagline  { display: none; }
.en-logo--md .en-logo__wordmark { font-size: 1.75rem; }
.en-logo--lg .en-logo__wordmark { font-size: 2.5rem; }
.en-logo--xl .en-logo__wordmark { font-size: 3.5rem; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}
.badge--deal     { background: var(--deal-badge-bg);       color: var(--deal-badge-text); }
.badge--cashback { background: var(--cashback-badge-bg);   color: var(--cashback-badge-text); }
.badge--new      { background: var(--new-badge-bg);        color: var(--new-badge-text); }
.badge--success  { background: var(--status-success-bg);   color: var(--status-success-text); }
.badge--warning  { background: var(--status-warning-bg);   color: var(--status-warning-text); }
.badge--danger   { background: var(--status-danger-bg);    color: var(--status-danger-text); }
.badge--info     { background: var(--status-info-bg);      color: var(--status-info-text); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
}
.btn--primary   { background: var(--brand-400); color: #fff; border-color: var(--brand-400); }
.btn--primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn--secondary { background: transparent; color: var(--brand-400); border-color: var(--brand-400); }
.btn--secondary:hover { background: var(--brand-50); }
.btn--ghost     { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--color-bg-subtle); border-color: var(--color-border-hover); }
.btn--danger    { background: var(--status-danger); color: #fff; border-color: var(--status-danger); }
.btn--sm { padding: 7px 14px; font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn--lg { padding: 13px 28px; font-size: var(--text-lg); }
.btn--full { width: 100%; }

/* Price Card */
.price-card {
  background: var(--color-bg-surface);
  border: var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-4) var(--space-5);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.price-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-hover); }
.price-card__price     { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-price); letter-spacing: var(--tracking-tight); }
.price-card__old-price { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: line-through; }
.price-card__shop      { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); }
.price-card__cashback  { display: inline-block; background: var(--accent-50); color: var(--accent-800); border-radius: var(--radius-full); padding: 4px 12px; font-size: var(--text-xs); font-weight: var(--weight-semibold); font-family: var(--font-body); margin-top: var(--space-2); }

/* Cards */
.card { background: var(--color-bg-surface); border: var(--border); border-radius: var(--radius-xl); padding: var(--space-5) var(--space-6); }

/* Inputs */
.input {
  width: 100%;
  background: var(--color-bg-surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  transition: border-color var(--duration-fast);
  outline: none;
}
.input:hover  { border-color: var(--color-border-hover); }
.input:focus  { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15); }
.input::placeholder { color: var(--color-text-muted); }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--text-sm); }
.table th { text-align: left; font-weight: var(--weight-medium); color: var(--color-text-secondary); padding: var(--space-3) var(--space-4); border-bottom: var(--border); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-bg-subtle); color: var(--color-text-primary); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-subtle); }

/* Navigation */
.nav { display: flex; align-items: center; gap: var(--space-6); height: 60px; padding: 0 var(--space-6); background: var(--color-bg-surface); border-bottom: var(--border); }
.nav__link { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-fast); }
.nav__link:hover, .nav__link--active { color: var(--brand-400); }

/* Typo Helfer */
.text-price     { font-family: var(--font-display); color: var(--color-text-price); font-weight: var(--weight-bold); }
.text-cashback  { color: var(--color-text-cashback); font-weight: var(--weight-semibold); }
.text-muted     { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-brand     { color: var(--color-text-brand); }
.text-danger    { color: var(--status-danger); }
.text-success   { color: var(--status-success); }

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

a { color: var(--color-text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; display: block; }
button { font-family: var(--font-body); cursor: pointer; }