/* ==========================================================================
   wordpress-hosting.blog — Design Tokens
   Editorial-Tech-Mix · Anti-AI-Slop · DSGVO (Fonts lokal)
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------
     FARBEN — Forest + Amber statt Tech-Blau-Klischee
     ---------------------------------------------------------------- */

  /* Primärpalette — Warmes Anthrazit / Charcoal (kein Forest Green mehr) */
  --color-primary-50:  #F4F3F1;
  --color-primary-100: #E5E3DF;
  --color-primary-200: #C7C4BC;
  --color-primary-300: #9C988E;
  --color-primary-400: #6F6B62;
  --color-primary-500: #4A4844;   /* Mittel */
  --color-primary-600: #1F1E1C;   /* HAUPT-Primary - tiefes warmes Anthrazit */
  --color-primary-700: #131211;
  --color-primary-800: #0A0A09;
  --color-primary-900: #050505;

  /* Akzent — Electric Blue Gradient (Cobalt → Cyan) */
  --color-accent-50:  #ECF1FF;
  --color-accent-100: #D2DDFF;
  --color-accent-200: #A4BAFF;
  --color-accent-300: #6E8FFF;
  --color-accent-400: #4361FF;
  --color-accent-500: #2548FF;   /* HAUPT-Accent (Electric Cobalt) */
  --color-accent-600: #1733D9;
  --color-accent-700: #1024A8;

  /* Cyan-Komponente für Gradient */
  --color-accent-cyan-300: #5EE7F2;
  --color-accent-cyan-500: #00C8FF;
  --color-accent-cyan-700: #0086C9;

  /* Gradient-Variablen */
  --gradient-accent:        linear-gradient(135deg, #2548FF 0%, #00C8FF 100%);
  --gradient-accent-soft:   linear-gradient(135deg, #ECF1FF 0%, #E0F7FB 100%);
  --gradient-accent-dark:   linear-gradient(135deg, #1733D9 0%, #0086C9 100%);
  --gradient-radial-accent: radial-gradient(ellipse at top right, rgba(37,72,255,0.10), transparent 50%),
                             radial-gradient(ellipse at bottom left, rgba(0,200,255,0.08), transparent 50%);

  /* Neutrale (cool) — Pures Weiß als Page-BG mit subtilem Blue-Tint in Tieferen */
  --color-neutral-50:  #F8FAFC;
  --color-neutral-100: #F1F5F9;
  --color-neutral-200: #E2E8F0;
  --color-neutral-300: #CBD5E1;
  --color-neutral-400: #94A3B8;
  --color-neutral-500: #64748B;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1E293B;
  --color-neutral-900: #0F172A;

  /* Semantik */
  --color-success: #059669;       /* Emerald-600 */
  --color-success-bg: #D1FAE5;
  --color-warning: #D97706;
  --color-warning-bg: #FDE6C2;
  --color-danger: #DC2626;        /* Rot-600 */
  --color-danger-bg: #FEE2E2;
  --color-info: #2548FF;

  /* Tier-Auszeichnungen (bei Hostern) */
  --color-rating-gold:    #C9A84A;
  --color-rating-silver:  #A8A8A8;
  --color-rating-bronze:  #B07042;

  /* ----------------------------------------------------------------
     SEMANTISCHE TOKENS (ALIASE) — verwende diese im UI-Code
     ---------------------------------------------------------------- */

  --bg-page:        #FFFFFF;                    /* Pures Weiß */
  --bg-card:        #FFFFFF;
  --bg-elevated:    #FFFFFF;
  --bg-muted:       var(--color-neutral-50);
  --bg-inverse:     var(--color-primary-600);
  --bg-accent:      var(--color-accent-500);

  --text-primary:   var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary:  var(--color-neutral-500);
  --text-muted:     var(--color-neutral-400);
  --text-inverse:   var(--color-neutral-50);
  --text-link:      var(--color-primary-600);
  --text-link-hover:var(--color-primary-700);
  --text-accent:    var(--color-accent-600);

  --border-default: var(--color-neutral-200);
  --border-subtle:  var(--color-neutral-100);
  --border-strong:  var(--color-neutral-300);
  --border-focus:   var(--color-primary-500);

  /* ----------------------------------------------------------------
     TYPOGRAFIE — Editorial Serif + Modern Sans + Mono
     ---------------------------------------------------------------- */

  --font-display: 'Ubuntu', -apple-system, BlinkMacSystemFont, sans-serif;  /* Headlines */
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Fluid Typography — clamp(min, vw-based, max) */
  --fs-display-xl: clamp(3rem,    2.5rem + 2.5vw, 5.5rem);   /* Hero H1 */
  --fs-display-lg: clamp(2.5rem,  2rem   + 2vw,   4rem);     /* Sektion-H1 */
  --fs-h1:         clamp(2rem,    1.75rem+ 1.25vw,3rem);     /* Page H1 */
  --fs-h2:         clamp(1.5rem,  1.3rem + 0.8vw, 2.25rem);
  --fs-h3:         clamp(1.25rem, 1.15rem+ 0.4vw, 1.625rem);
  --fs-h4:         clamp(1.125rem,1.075rem+0.2vw, 1.25rem);
  --fs-body-lg:    clamp(1.0625rem,1.025rem+0.15vw,1.1875rem);
  --fs-body:       1rem;          /* 16px Basis */
  --fs-body-sm:    0.9375rem;     /* 15px */
  --fs-caption:    0.8125rem;     /* 13px */
  --fs-micro:      0.75rem;       /* 12px Labels */

  --lh-tight:   1.05;     /* Display */
  --lh-snug:    1.2;      /* Headlines */
  --lh-normal:  1.5;      /* Body */
  --lh-relaxed: 1.7;      /* Long-form Lese-Content */

  --tracking-tight:  -0.025em;   /* Display */
  --tracking-snug:   -0.015em;   /* Headlines */
  --tracking-normal: 0;
  --tracking-wide:   0.06em;     /* Labels */
  --tracking-wider:  0.12em;     /* Caps Labels */

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

  /* ----------------------------------------------------------------
     SPACING — 8px-Grid
     ---------------------------------------------------------------- */

  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* Sektion-Padding (responsive über clamp) */
  --section-py: clamp(3rem, 2rem + 4vw, 8rem);
  --section-px: clamp(1.25rem, 0.75rem + 2vw, 3rem);

  /* Container-Breiten */
  --container-narrow: 800px;
  --container-default: 1200px;
  --container-wide: 1440px;
  --container-full: 100%;
  --reading-width: 65ch;

  /* ----------------------------------------------------------------
     RADIEN — variabel je nach Kontext
     ---------------------------------------------------------------- */

  --radius-xs: 4px;
  --radius-sm: 6px;        /* Badges, Tags */
  --radius-md: 8px;        /* Inputs, Buttons */
  --radius-lg: 12px;       /* Cards */
  --radius-xl: 16px;       /* Modals, große Cards */
  --radius-2xl: 24px;      /* Hero-Elemente */
  --radius-full: 9999px;   /* Pills */

  /* ----------------------------------------------------------------
     SCHATTEN — IMMER mehrschichtig (kein flacher Single-Shadow)
     ---------------------------------------------------------------- */

  --shadow-1: 0 1px 2px rgba(19, 18, 17, 0.05);
  --shadow-2: 0 4px 6px -1px rgba(19, 18, 17, 0.07),
              0 2px 4px -1px rgba(19, 18, 17, 0.04);
  --shadow-3: 0 10px 15px -3px rgba(19, 18, 17, 0.08),
              0 4px 6px -2px rgba(19, 18, 17, 0.04);
  --shadow-4: 0 20px 25px -5px rgba(19, 18, 17, 0.1),
              0 10px 10px -5px rgba(19, 18, 17, 0.04);
  --shadow-5: 0 25px 50px -12px rgba(19, 18, 17, 0.15);

  /* Inset-Schatten für aktive States */
  --shadow-inset: inset 0 2px 4px 0 rgba(19, 18, 17, 0.06);

  /* Focus-Ring (statt browser-default) */
  --shadow-focus: 0 0 0 3px rgba(37, 72, 255, 0.22);    /* Electric Blue Alpha */

  /* ----------------------------------------------------------------
     TIMING & ANIMATION
     ---------------------------------------------------------------- */

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 700ms;

  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* Apple */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);       /* Vercel */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);       /* Stripe */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-snappy:    cubic-bezier(0.2, 0, 0, 1);

  /* ----------------------------------------------------------------
     Z-INDEX-LAYER (sortiert)
     ---------------------------------------------------------------- */

  --z-below:     -1;
  --z-base:       0;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-overlay:    30;
  --z-modal:      40;
  --z-popover:    50;
  --z-tooltip:    60;
  --z-notification: 70;
}

/* ==========================================================================
   GLOBAL RESET & BASE STYLES
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background-color: var(--bg-page);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
}

/* Spezifisch: Display-Klasse für Hero (richtige Serif-Wirkung nur bei großer Größe) */
.display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p {
  margin: 0 0 var(--space-4);
  max-width: var(--reading-width);
  line-height: var(--lh-relaxed);
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out-cubic);
}
a:hover { color: var(--text-link-hover); }

/* Mono für Daten/Specs */
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 0;
}

/* Caps-Label (Eyebrow) */
.label {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--text-tertiary);
}

/* ==========================================================================
   COMPONENTS — Basis (für HTML-Previews)
   ========================================================================== */

/* Button — Primary */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out-expo),
              background-color var(--duration-fast) var(--ease-out-cubic);
}
.btn-primary {
  background-color: var(--color-primary-600);
  color: var(--text-inverse);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover {
  background-color: var(--color-primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
}
.btn-accent {
  background-color: var(--color-accent-500);
  color: var(--text-inverse);
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}
.btn-accent:hover {
  background-color: var(--color-accent-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 119, 6, 0.45);
}
.btn-ghost {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.btn-ghost:hover { background-color: var(--bg-muted); }

.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-2); }

/* Card */
.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out-expo);
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  background-color: var(--bg-muted);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.badge-primary { background-color: var(--color-primary-50); color: var(--color-primary-700); border-color: var(--color-primary-100); }
.badge-accent  { background-color: var(--color-accent-50);  color: var(--color-accent-700);  border-color: var(--color-accent-100); }
.badge-success { background-color: var(--color-success-bg); color: var(--color-success); }
.badge-danger  { background-color: var(--color-danger-bg);  color: var(--color-danger); }

/* Spec-Row (für Tarif-Tabellen, Hoster-Listings) */
.spec {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  font-feature-settings: "tnum" 1;   /* Tabular numbers */
}

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

.container { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--section-px); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--section-px); }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--section-px); }

.section { padding: var(--section-py) 0; }

/* Sichtbarkeits-Helper */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   SCROLL-DRIVEN ANIMATIONS (Chrome 115+, Safari 26+)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes revealUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   FOCUS — sichtbar für Tastaturnutzer
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   PRINT — minimal
   ========================================================================== */

@media print {
  body { background: white; color: black; }
  .btn, nav, footer { display: none !important; }
}