/* ============================================================
   euronetz.de — Design System v2.0
   Primär: Teal #1D9E75 · Akzent: Amber #F59E0B
   Stil: Vertrauenswürdig & professionell
   ============================================================ */

/* Lokal gehostete Web Fonts (DSGVO: kein Google-Fonts-CDN) */
@import url('fonts.css');

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

  /* BRAND — Teal (eine einheitliche Primärfarbe) */
  --brand-50:  #ECFAF4;
  --brand-100: #D0F5E5;
  --brand-200: #A1EBCB;
  --brand-300: #5DD4A6;
  --brand-400: #1D9E75;   /* ← Primärfarbe */
  --brand-500: #178A64;
  --brand-600: #0F6B50;
  --brand-700: #0A503C;
  --brand-800: #063629;
  --brand-900: #031F17;
  --brand-strong: #0F7A59;  /* ← Grün für weißen Text auf Fläche (WCAG AA, ~5.3:1) */

  /* AKZENT — Amber/Gold (professionell, warm) */
  --accent-50:  #FFFBEB;
  --accent-100: #FEF3C7;
  --accent-200: #FDE68A;
  --accent-300: #FCD34D;
  --accent-400: #F59E0B;  /* ← Akzentfarbe */
  --accent-500: #D97706;
  --accent-600: #B45309;
  --accent-700: #92400E;
  --accent-800: #78350F;
  --accent-900: #451A03;

  /* NEUTRAL — Warm Gray (angenehmer als reines Cool Gray) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* STATUS */
  --status-success:      #1D9E75;
  --status-success-bg:   #ECFAF4;
  --status-success-text: #065F46;
  --status-warning:      #F59E0B;
  --status-warning-bg:   #FFFBEB;
  --status-warning-text: #78350F;
  --status-danger:       #EF4444;
  --status-danger-bg:    #FEF2F2;
  --status-danger-text:  #7F1D1D;
  --status-info:         #3B82F6;
  --status-info-bg:      #EFF6FF;
  --status-info-text:    #1E3A8A;

  /* BADGES */
  --badge-deal-bg:      #EF4444;
  --badge-deal-text:    #FFFFFF;
  --badge-cashback-bg:  #F59E0B;
  --badge-cashback-text:#78350F;
  --badge-new-bg:       #1D9E75;
  --badge-new-text:     #FFFFFF;
  --badge-boost-bg:     #7C3AED;
  --badge-boost-text:   #FFFFFF;

  /* LOGO */
  --logo-font:         'Space Grotesk', sans-serif;
  --logo-color-euro:   var(--neutral-900);
  --logo-color-netz:   var(--brand-400);
  --logo-color-de:     var(--neutral-400);

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

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --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;

  --tracking-tight:  -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* 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 */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;

  /* BORDER RADIUS */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* SHADOWS */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl:  0 16px 48px rgba(0,0,0,.12);
  --shadow-brand: 0 4px 14px rgba(29,158,117,.25);

  /* BORDERS */
  --border:             1px solid var(--neutral-200);
  --border-color:       var(--neutral-200);
  --border-color-hover: var(--neutral-300);
  --border-color-focus: var(--brand-400);

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

  /* TRANSITIONS */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --transition:      var(--duration-normal) var(--ease);

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

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

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

  /* LEGACY COMPAT — alte Variablennamen werden gemapped */
  --color-primary:    var(--brand-400);
  --color-accent:     var(--accent-400);
  --color-success:    var(--status-success);
  --color-danger:     var(--status-danger);
  --color-warning:    var(--status-warning);
  --color-info:       var(--status-info);
  --color-white:      var(--neutral-0);
  --color-bg:         var(--color-bg-page);
  --color-bg-card:    var(--neutral-0);
  --color-text:       var(--color-text-primary);
  --color-muted:      var(--neutral-500);
  --radius:           var(--radius-lg);
  --shadow-card:      var(--shadow-md);
}

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

html { scroll-behavior: smooth; }

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; }

/* --- Barrierefreiheit: Skip-Link + sichtbarer Tastatur-Fokus --- */
.skip-link {
  position: absolute; left: 8px; top: -56px;
  z-index: var(--z-toast);
  background: var(--brand-strong); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-md);
  font-weight: var(--weight-semibold); text-decoration: none;
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: 8px; outline: 3px solid #fff; outline-offset: 2px; text-decoration: none; }
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
main:focus { outline: none; }

/* Global Form-Elemente (Basis-Reset + Schrift) */
input, select, textarea, button {
  font-family: var(--font-body);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select, textarea {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  outline: none;
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus, textarea:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(29,158,117,.12);
}
input::placeholder, textarea::placeholder { color: var(--neutral-400); }
button { font-family: var(--font-body); cursor: pointer; }

/* ============================================================
   KOMPONENTEN
   ============================================================ */

/* --- Logo --- */
.en-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.en-logo:hover { text-decoration: none; }

.en-logo__icon {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--brand-400);
  display: flex; flex-direction: column;
  justify-content: center; gap: 4px;
  padding: 9px 8px;
  flex-shrink: 0;
}
.en-logo__bar { border-radius: 2px; background: white; height: 4px; }
.en-logo__bar--1 { width: 100%; opacity: 0.38; }
.en-logo__bar--2 { width: 74%; opacity: 0.70; }
.en-logo__bar--3 { width: 50%; opacity: 1; }

.en-logo__wordmark {
  font-family: var(--logo-font);
  font-size: 1.5rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.en-logo__wordmark .part-euro { font-weight: 500; color: var(--neutral-900); }
.en-logo__wordmark .part-netz { font-weight: 700; color: var(--brand-400); }
.en-logo__wordmark .part-de   { font-weight: 400; color: var(--neutral-500); }

.en-logo--sm .en-logo__icon     { width: 30px; height: 30px; border-radius: 7px; padding: 7px 6px; gap: 3px; }
.en-logo--sm .en-logo__bar      { height: 3px; }
.en-logo--sm .en-logo__wordmark { font-size: 1.2rem; }
.en-logo--lg .en-logo__icon     { width: 52px; height: 52px; border-radius: 12px; padding: 12px 11px; gap: 5px; }
.en-logo--lg .en-logo__bar      { height: 5px; }
.en-logo--lg .en-logo__wordmark { font-size: 2rem; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--radius-full);
  font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap;
}
.badge--deal     { background: var(--badge-deal-bg);     color: var(--badge-deal-text); }
.badge--cashback { background: var(--badge-cashback-bg); color: var(--badge-cashback-text); }
.badge--new      { background: var(--badge-new-bg);      color: var(--badge-new-text); }
.badge--boost    { background: var(--badge-boost-bg);    color: var(--badge-boost-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: 9px 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), box-shadow var(--transition);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary {
  background: var(--brand-strong); color: #fff; border-color: var(--brand-strong);
}
.btn--primary:hover {
  background: var(--brand-700); border-color: var(--brand-700);
  box-shadow: var(--shadow-brand);
}
.btn--secondary {
  background: transparent; color: var(--brand-400); border-color: var(--brand-400);
}
.btn--secondary:hover { background: var(--brand-50); }

.btn--outline {
  background: transparent; color: var(--brand-400); border-color: var(--brand-200);
}
.btn--outline:hover { background: var(--brand-50); border-color: var(--brand-400); }

.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--accent {
  background: var(--accent-400); color: var(--accent-900); border-color: var(--accent-400);
}
.btn--accent:hover { background: var(--accent-500); border-color: var(--accent-500); color: var(--accent-900); }

.btn--sm  { padding: 6px 14px; font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn--lg  { padding: 12px 28px; font-size: var(--text-lg); }
.btn--full { width: 100%; }

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

/* --- 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(--brand-400); letter-spacing: var(--tracking-tight); }
.price-card__old-price { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: line-through; }
.price-card__shop      { font-size: var(--text-sm); color: var(--color-text-secondary); }
.price-card__cashback  { display: inline-block; background: var(--accent-50); color: var(--accent-700); border-radius: var(--radius-full); padding: 3px 10px; font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-top: var(--space-2); }

/* --- Inputs --- */
.input {
  width: 100%;
  background: var(--color-bg-surface);
  border: 1.5px solid var(--color-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), box-shadow var(--duration-fast);
  outline: none;
}
.input:hover  { border-color: var(--color-border-hover); }
.input:focus  { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(29,158,117,.12); }
.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-semibold); 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); background: var(--color-bg-subtle); }
.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(--brand-50); }

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