/* ============================================================
   Greyt × Telekom Co-Branded LP – Base Stylesheet
   ============================================================
   Design Tokens, Reset, Typography, Button-Basis, Form-Basis.
   Greyt-Styleguide (greyt.de): monochrom Schwarz/Weiß, ITC Avant
   Garde Gothic Pro, weiße Uppercase-Pill-Buttons. Telekom-Magenta
   bleibt als Token erhalten – einziger Konsument ist das
   Co-Branded-Element (Magenta-Insel im Hero) + sparsame Akzente.
   ============================================================ */

/* ------------------------------------------------------------
   1. FONT FACE – ITC Avant Garde Gothic Pro
   (Self-hosted, DSGVO-konform, Subset latin + Umlaute,
   Quelle: Greyt-Webflow-CDN, Lizenz Greyt)
   ------------------------------------------------------------ */

@font-face {
  font-family: 'Avant Garde Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/avantgarde-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Avant Garde Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/avantgarde-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Avant Garde Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/avantgarde-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Avant Garde Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/avantgarde-700.woff2') format('woff2');
}

/* ------------------------------------------------------------
   2. DESIGN TOKENS – Greyt (monochrom) + Telekom-Magenta-Insel
   ------------------------------------------------------------
   Quelle: greyt.de live (Webflow), extrahiert 2026-06-10.
   ------------------------------------------------------------ */

:root {
  /* --- Brand Colors (Telekom CI) --- */
  --color-magenta:          #e20074;
  --color-magenta-dark:     #b8005d;
  --color-magenta-darker:   #93004a;
  --color-magenta-light:    #ffe5f1;
  --color-magenta-text:     #c20063;
  --color-magenta-on-dark:  #ff5fb0;  /* helleres Magenta für Text auf dunklem Bild (Kontrast) */
  --color-magenta-rgb:      226, 0, 116;

  /* Aliase auf Brand-System (für Greyt-Komponenten-Kompatibilität) */
  --color-primary:          var(--color-magenta);
  --color-primary-dark:     var(--color-magenta-dark);
  --color-primary-darker:   var(--color-magenta-darker);
  --color-primary-light:    var(--color-magenta-light);
  --color-primary-text:     var(--color-magenta-text);
  --color-primary-rgb:      var(--color-magenta-rgb);

  /* --- Partner Accent (Streaming-LP: Netflix) --- */
  --color-netflix-red:      #e50914;
  --color-netflix-black:    #000000;

  /* --- Neutral Palette (Greyt-Grauskala, greyt.de) --- */
  --color-white:            #fdfdfd;
  --color-black:            #000000;
  --color-dark:             #151515;
  --color-gray-900:         #171717;
  --color-gray-800:         #262626;
  --color-gray-700:         #3a3a3c;
  --color-gray-600:         #5a5a5e;
  --color-gray-500:         #919297;
  --color-gray-400:         #a9aaae;
  --color-gray-300:         #cecece;
  --color-gray-200:         #e4e4e7;
  --color-gray-100:         #f0f0f2;
  --color-gray-50:          #f7f7f8;

  /* Semantische Text-Tokens folgen der dunklen Default-Surface.
     Helle Insel-Kontexte (Comparison-Canvas, Form-Card) überschreiben
     diese drei Tokens lokal per Scoping. */
  --color-text-dark:        var(--on-dark-heading);
  --color-text-body:        var(--on-dark-body);
  --color-text-muted:       var(--on-dark-muted);

  /* --- Surface-System (dunkel-dominant mit Weiß-Inseln) --- */
  --surface-page:           #151515;   /* globaler Hintergrund (greyt.de) */
  --surface-deep:           #0a0a0a;   /* Hero / Footer */
  --surface-raised:         #171717;   /* Cards auf Dunkel */
  --surface-black:          #000000;   /* Kontrastband (Statband) */
  --surface-light:          #fdfdfd;   /* Weiß-Inseln (Vergleich, Leadform) */
  --surface-card-on-dark:   rgba(245, 245, 245, 0.06);

  --on-dark-heading:        #fdfdfd;
  --on-dark-body:           rgba(253, 253, 253, 0.78);
  --on-dark-muted:          #919297;
  --on-dark-border:         rgba(255, 255, 255, 0.14);
  --on-light-heading:       #151515;
  --on-light-body:          #3a3a3c;
  --on-light-muted:         #6b6b70;
  --on-light-border:        rgba(21, 21, 21, 0.14);

  /* --- Semantic Colors --- */
  --color-success:          #00a14b;
  --color-success-bg:       #eaf7ef;
  --color-error:            #d40023;
  --color-error-bg:         #fde8eb;
  --color-error-on-dark:    #ff6b7d;   /* AA-taugliches Fehlerrot auf Dunkel */
  --color-warning:          #f1a61b;
  --color-warning-bg:       #fdf2dc;
  --color-info:             #919297;
  --color-info-bg:          #f0f0f2;

  /* Links: monochrom (Greyt), Hover greyt.de #b5b9c8 */
  --color-link:             #fdfdfd;
  --color-link-hover:       #b5b9c8;

  /* --- Section Backgrounds (Legacy-Aliase → Surface-System) --- */
  --color-bg-soft:          var(--surface-raised);
  --color-bg-light:         var(--surface-raised);
  --color-bg-strong:        var(--surface-deep);
  --color-bg-dark:          var(--surface-deep);
  --color-bg-darkest:       var(--surface-black);

  /* --- Gradients (monochrom dunkel) --- */
  --gradient-primary:        linear-gradient(135deg, #1f1f1f 0%, #151515 50%, #0a0a0a 100%);
  --gradient-primary-hover:  linear-gradient(135deg, #262626 0%, #1a1a1a 50%, #101010 100%);
  --gradient-primary-subtle: linear-gradient(180deg, #171717 0%, #101010 100%);
  --gradient-dark:           linear-gradient(160deg, #171717 0%, #111111 55%, #0a0a0a 100%);
  --gradient-netflix:        linear-gradient(160deg, #171717 0%, #111111 55%, #0a0a0a 100%);

  /* --- Typography --- */
  --font-family:            'Avant Garde Pro', Futura, 'Century Gothic', 'Segoe UI', -apple-system, sans-serif;
  --font-family-fallback:   Futura, 'Century Gothic', 'Segoe UI', -apple-system, sans-serif;

  /* Fluid Type-Scale (mobile → desktop) */
  --font-size-eyebrow:      clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem); /* 13–15px */
  --font-size-xs:           clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);  /* 13–14px */
  --font-size-sm:           clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem); /* 14–15px */
  --font-size-base:         clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);      /* 16–19px */
  --font-size-lg:           clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);  /* 19–22px */
  --font-size-xl:           clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);    /* 22–28px */
  --font-size-h4:           clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);     /* 20–26px */
  --font-size-h3:           clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);     /* 24–34px */
  --font-size-h2:           clamp(2rem, 1.55rem + 2.1vw, 3.25rem);        /* 32–52px */
  --font-size-h1:           clamp(2.5rem, 1.85rem + 3.2vw, 4.5rem);       /* 40–72px */
  --font-size-display:      clamp(3rem, 2.1rem + 4.4vw, 5.5rem);          /* 48–88px */

  --font-weight-thin:       400;
  --font-weight-light:      400;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       600;
  /* Headline-System wie greyt.de: Avant Garde Demi (600) für alle
     Headlines, die Hierarchie trägt die Schriftgröße. 700 (Bold)
     bleibt für gezielte Hervorhebungen verfügbar. */
  --font-weight-extrabold:  600;
  --font-weight-ultra:      600;

  --line-height-tight:      1.12;
  --line-height-heading:    1.2;
  --line-height-snug:       1.35;
  --line-height-body:       1.5;
  --line-height-loose:      1.65;

  /* Avant Garde ist geometrisch-breit: nur leicht verdichten */
  --letter-spacing-tighter: -0.018em;
  --letter-spacing-tight:   -0.008em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.04em;
  --letter-spacing-label:   0.1em;

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

  /* Section padding (responsive via clamp) */
  --section-padding-y:      clamp(3rem, 2rem + 3vw, 6rem);  /* 48–96px */
  --section-padding-x:      clamp(1rem, 0.5rem + 2vw, 2rem); /* 16–32px */

  /* --- Layout --- */
  --container-max:          1280px;
  --container-narrow:       720px;
  --container-wide:         1440px;

  /* --- Radii --- */
  --radius-xs:              4px;
  --radius-sm:              8px;
  --radius-md:              12px;
  --radius-lg:              16px;
  --radius-xl:              24px;
  --radius-2xl:             32px;
  --pill:                   999px;

  /* --- Shadows (monochrom, auf Dunkel tiefer) --- */
  --shadow-xs:              0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:              0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:              0 6px 20px rgba(0,0,0,0.3);
  --shadow-lg:              0 14px 40px rgba(0,0,0,0.4);
  --shadow-xl:              0 24px 64px rgba(0,0,0,0.5);
  --shadow-magenta:         0 12px 32px rgba(226, 0, 116, 0.28); /* nur Magenta-Insel */
  --glow-soft:              0 0 80px rgba(255, 255, 255, 0.06);  /* greyt.de Glow-Muster, monochrom */
  --shadow-focus:           0 0 0 3px rgba(181, 185, 200, 0.55);
  --shadow-card:            0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.28);
  --shadow-hover:           0 2px 4px rgba(0,0,0,0.22), 0 18px 44px rgba(0,0,0,0.4);

  /* --- Borders --- */
  --border-width:           1px;
  --border-color:           var(--on-dark-border);
  --border-color-strong:    rgba(255, 255, 255, 0.24);
  --border-color-focus:     var(--color-white);

  /* --- Transitions (greyt.de: 0.4s cubic-bezier) --- */
  --ease-greyt:             cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:        0.15s ease;
  --transition-base:        0.2s ease;
  --transition-slow:        0.4s var(--ease-greyt);

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

  /* --- Breakpoints (für JS-Auslesen via getComputedStyle) --- */
  --bp-sm:                  481px;
  --bp-md:                  768px;
  --bp-lg:                  901px;
  --bp-xl:                  1101px;
  --bp-2xl:                 1440px;
}

/* ------------------------------------------------------------
   3. RESET & BASE STYLES
   ------------------------------------------------------------ */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}
body { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  color: var(--on-dark-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
  vertical-align: middle;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.05em;
  transition: color var(--transition-fast);
}

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

a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  text-wrap: balance;
  color: var(--on-dark-heading);
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-ultra);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-display);
}

h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-display);
}

h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
}

h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

[hidden] {
  display: none !important;
}

/* Skip-Link für Accessibility */
.skip-link {
  position: fixed;
  top: 0;
  left: 8px;
  z-index: var(--z-toast);
  padding: 0.5rem 1rem;
  background: var(--color-white);
  color: var(--color-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  transform: translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(8px);
  color: var(--color-dark);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Visually Hidden, accessible to screen readers */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ------------------------------------------------------------
   4. CONTAINERS & LAYOUT HELPERS
   ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

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

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

.section {
  padding-block: var(--section-padding-y);
}

.section--tight {
  padding-block: clamp(2rem, 1.5rem + 2vw, 4rem);
}

/* Ruhige Neutral-Sektion – max. 1 pro Seite zur Gliederung */
.section--soft {
  background: var(--color-bg-soft);
}

/* Das EINE dunkle Fokus-Band pro Seite */
.section--dark {
  background: var(--gradient-dark);
  color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark .section-head__title { color: var(--color-white); }
.section--dark .lede, .section--dark p { color: rgba(255,255,255,0.78); }

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

.section--magenta-subtle {
  background: var(--color-bg-soft);
}

/* ------------------------------------------------------------
   5. BUTTONS
   ------------------------------------------------------------ */

/* Greyt-Buttonsystem (greyt.de): weiße Uppercase-Pill,
   Hover #b5b9c8, Outline-Variante invertiert bei Hover. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.875rem 2rem;
  background: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-white);
  border-radius: var(--pill);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transition-slow), color var(--transition-slow), border-color var(--transition-slow), transform var(--transition-fast);
  min-height: 44px; /* WCAG Touch-Target */
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-black);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

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

/* Outline-Pill auf Dunkel (greyt.de cc-white-outline) */
.btn--secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

/* Invertierte Pill für Weiß-Inseln: schwarz auf hell */
.btn--dark {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.btn--light {
  background: var(--color-white);
  color: var(--color-dark);
  border-color: var(--color-gray-300);
}

.btn--light:hover,
.btn--light:focus-visible {
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
}

.btn--full {
  display: flex;
  width: 100%;
}

.btn--small {
  padding: 0.5rem 1.25rem;
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.btn--large {
  padding: 1.125rem 2.5rem;
  font-size: var(--font-size-lg);
  min-height: 56px;
}

/* Pill-CTA für Floating-Pill-Header (weiß, greyt.de "Get in touch") */
.btn--pill-magenta {
  background: var(--color-white);
  color: var(--color-black);
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

/* ------------------------------------------------------------
   6. FORMS
   ------------------------------------------------------------ */

.form-field {
  position: relative;
  margin-bottom: var(--space-4);
}

/* Greyt-Form-Stil (greyt.de): transparente Felder, nur Border-Bottom.
   Farben für helle Surface (Leadform = Weiß-Insel). */
.form-input,
.form-textarea,
.form-select {
  display: block;
  width: 100%;
  padding: 1rem 0.125rem;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  color: var(--on-light-heading);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(21, 21, 21, 0.3);
  border-radius: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 56px;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--on-light-muted);
}

.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: rgba(21, 21, 21, 0.55);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 1px 0 0 var(--color-black);
}

.form-input:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--on-light-heading);
}

.form-help {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form-error {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  accent-color: var(--color-black);
  cursor: pointer;
}

/* Honeypot (hidden from real users) */
.form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ------------------------------------------------------------
   7. UTILITY CLASSES
   ------------------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 1.75em;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
/* Akzent-Strich nur bei links-bündigen Intros; in zentrierten
   Headern (Section-Head/Feature-Grid/Tabs/Process/FAQ/Stats) ohne Strich */
.eyebrow--nomark::before,
.section-head--center .eyebrow::before,
.feature-grid__header .eyebrow::before,
.tabs__header .eyebrow::before,
.process__header .eyebrow::before,
.faq__header .eyebrow::before,
.stats__header .eyebrow::before,
.cta-banner__eyebrow::before { display: none; }
.section-head--center .eyebrow,
.eyebrow--nomark,
.feature-grid__header .eyebrow,
.tabs__header .eyebrow,
.process__header .eyebrow,
.faq__header .eyebrow,
.stats__header .eyebrow,
.cta-banner__eyebrow { display: inline-block; }

.eyebrow--light {
  color: rgba(253, 253, 253, 0.64);
}

.eyebrow--dark {
  color: var(--on-light-muted);
}

.text-magenta { color: var(--color-magenta); }
.text-dark    { color: var(--color-dark); }
.text-muted   { color: var(--color-text-muted); }

/* Reveal-on-Scroll Helper (für IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------------------
   8. FOCUS-VISIBLE GLOBAL
   ------------------------------------------------------------ */

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* ============================================================
   9. ELEVATED EDITORIAL LAYER (append-only, non-breaking)
   ------------------------------------------------------------
   Best-in-Class B2C Niveau (Referenzen: hugo.ai, Shopify,
   Webflow). Hierarchie über Größenkontrast statt Farbe,
   großzügiger Whitespace, dezente Motion, Magenta als
   Atmosphäre/Licht. Deckt sich mit Präsi-DOs
   (docs/strategie/06-design-prinzipien.md).
   ============================================================ */

:root {
  /* Mutigere Display-Skala (große, ruhige Headlines) */
  --font-size-display-lg:   clamp(2.75rem, 1.9rem + 4.2vw, 5rem);   /* 44–80px  */
  --font-size-display-xl:   clamp(3rem, 1.8rem + 5.6vw, 5.5rem);    /* 48–88px  */
  --letter-spacing-display: -0.015em;  /* Avant Garde nur leicht verdichten */

  /* Editoriale Whitespace-Skala (mehr vertikale Ruhe) */
  --section-padding-spacious: clamp(3.25rem, 2.4rem + 3.6vw, 6.5rem); /* 52–104px */
  --space-editorial:          clamp(2rem, 1.4rem + 3vw, 4.5rem);
  --container-reading:        62ch;

  /* Monochromes Licht statt Magenta-Aurora (greyt.de-Anmutung) */
  --glow-magenta:   radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  --glow-magenta-strong: radial-gradient(120% 95% at 78% -5%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 58%);
  --shadow-editorial: 0 24px 64px -20px rgba(0, 0, 0, 0.5);

  /* Dezente, hochwertige Motion-Kurven */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 28px;
}

/* Display-Typo: Größenkontrast trägt die Hierarchie */
.display-lg {
  font-size: var(--font-size-display-lg);
  line-height: 1.04;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-extrabold);
  text-wrap: balance;
}
.display-xl {
  font-size: var(--font-size-display-xl);
  line-height: 1.0;
  letter-spacing: var(--letter-spacing-display);
  font-weight: var(--font-weight-extrabold);
  text-wrap: balance;
}

/* Lede: großer ruhiger Intro-Absatz unter der Headline */
.lede {
  font-size: var(--font-size-lg);
  line-height: 1.45;
  color: inherit;
  font-weight: var(--font-weight-regular);
  max-width: 46ch;
  text-wrap: pretty;
}
.lede--center { margin-inline: auto; text-align: center; }

/* Editoriale Container & Spacing */
.container--reading { max-width: var(--container-reading); margin-inline: auto; }
.section--spacious  { padding-block: var(--section-padding-spacious); }

/* Magenta als Atmosphäre (kein Flächen-Fill) */
.bg-aurora {
  position: relative;
  isolation: isolate;
}
.bg-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--glow-magenta);
  pointer-events: none;
}
.bg-aurora--strong::before { background: var(--glow-magenta-strong); }

/* Hairline-Divider (editoriale Trennung statt harter Block) */
.rule-hairline {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--on-dark-border) 18%, var(--on-dark-border) 82%, transparent);
}

/* Verfeinerte Reveal-Varianten + Stagger (Default: .reveal bleibt) */
.reveal--up    { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity 0.7s var(--ease-editorial), transform 0.7s var(--ease-editorial); }
.reveal--scale { opacity: 0; transform: scale(0.965); transition: opacity 0.7s var(--ease-editorial), transform 0.7s var(--ease-editorial); }
.reveal--right { opacity: 0; transform: translateX(clamp(40px, 9vw, 80px)); transition: opacity 0.7s var(--ease-editorial), transform 0.7s var(--ease-editorial); }
.reveal--up.is-visible,
.reveal--scale.is-visible,
.reveal--right.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal--up, .reveal--scale, .reveal--right { opacity: 1; transform: none; transition: none; }
}
.reveal[data-reveal-delay="1"],
.reveal--up[data-reveal-delay="1"],
.reveal--scale[data-reveal-delay="1"] { transition-delay: 0.08s; }
.reveal[data-reveal-delay="2"],
.reveal--up[data-reveal-delay="2"],
.reveal--scale[data-reveal-delay="2"] { transition-delay: 0.16s; }
.reveal[data-reveal-delay="3"],
.reveal--up[data-reveal-delay="3"],
.reveal--scale[data-reveal-delay="3"] { transition-delay: 0.24s; }

/* Editoriale Button-Größe (großzügiger, ruhiger) */
.btn--editorial {
  padding: 1.125rem 2.25rem;
  font-size: var(--font-size-base);
  border-radius: var(--pill);
  letter-spacing: -0.005em;
}

/* Pay-Moment-Stoerer (eine Zahl, Rule of 100) */
.stoerer-100 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-magenta);
  color: var(--color-white);
  border-radius: var(--pill);
  box-shadow: var(--shadow-editorial);
  line-height: 1.05;
}
.stoerer-100 b { font-size: 1.6em; font-weight: var(--font-weight-extrabold); letter-spacing: -0.02em; }
.stoerer-100 small { font-size: 0.72em; font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); opacity: 0.92; }

@media (prefers-reduced-motion: reduce) {
  .reveal--up,
  .reveal--scale { opacity: 1; transform: none; transition: none; }
}