/* ============================================================
   webraketen Design System — bundled for WordPress
   Sources:
     1) docs/design-system/.../project/colors_and_type.css
     2) docs/design-system/.../project/ui_kits/website/tokens.css
        (@import statement stripped — already inlined)
     3) docs/design-system/.../project/ui_kits/website/google-ads.css
     4) Inline WP / Elementor / Hello-Theme overrides at end
   ============================================================ */

/* ============================================================
   webraketen Design System — Foundations
   Colors, Typography, Spacing, Radii, Shadows, Easing
   "Klinische Präzision trifft auf neugieriges Weltraum-Pathos."
   ============================================================ */

/* ----- Webfonts (Google Fonts substitutions documented in README) ----- */
/* Webfonts kommen NICHT mehr von fonts.googleapis.com (DSGVO: Besucher-IP an Google).
   Geist, Geist Mono und Fraunces liegen self-hosted unter
   wp-content/uploads/wr-design/fonts/ und werden site-weit vom mu-plugin
   wr-fonts.php per @font-face im wp_head eingebunden. Ersetzt am 2026-07-21. */

/* Telegrafico — WORDMARK ONLY. Never use for body or headlines.
   Sourced from the user-supplied font file. */
@font-face {
  font-family: "Telegrafico";
  src: url("/wp-content/uploads/wr-design/telegrafico.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- Geist + Geist Mono — SELF-HOSTED (variable, OFL) -----
   Der @import oben wird beim Ausliefern gestrippt (WP Rocket inlinet das Bundle),
   und Elementor kennt "Geist" nicht als Google-Font → ohne Self-Host fielen Besucher
   ohne lokal installiertes Geist auf system-ui zurück. Ein Variable-File pro Subset,
   Gewichts-Range 100–900. Build ersetzt url("fonts/…") durch absolute Pfade. */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url("/wp-content/uploads/wr-design/fonts/geist-latinext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url("/wp-content/uploads/wr-design/fonts/geist-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url("/wp-content/uploads/wr-design/fonts/geistmono-latinext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url("/wp-content/uploads/wr-design/fonts/geistmono-latin.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  /* ============================================================
     COLORS — Brand "Atmospheric Limb"
     80% Dark, 15% Light, 5% Magenta accent. Never invert.
     ============================================================ */

  /* Brand primaries — gradient stops */
  --wr-magenta:       #C73B7E;   /* Treibstoff — ignition, energy */
  --wr-magenta-deep:  #7E2A5A;   /* Wine — gradient midpoint */
  --wr-violet-deep:   #1E1A3E;   /* Weltraum — space, mystery */

  /* Brand accent — sparingly */
  --wr-magenta-glow:  #FF4F9D;   /* hover / active glow only */
  --wr-accent-glow:   var(--wr-magenta-glow); /* Legacy-Alias — ältere Bundle-Regeln nutzen diesen Namen */
  --wr-accent:        var(--wr-magenta);      /* Legacy-Alias */

  /* Surface neutrals */
  --wr-black:         #0B0814;   /* App / section background */
  --wr-violet-900:    #14102A;   /* Elevated surface on dark */
  --wr-violet-800:    #1E1A3E;   /* = deep violet */
  --wr-violet-700:    #2A2452;   /* Surface 2 / hover */
  --wr-violet-600:    #3A3268;   /* Border on dark */

  /* Text on dark */
  --wr-white:         #FFFFFF;   /* Headlines, logo */
  --wr-cool-white:    #E8E6F0;   /* Body — tinted violet */
  --wr-muted:         #8A85A0;   /* Sublines, meta, disabled — Typo-Handoff 2026-07-10 (Muted-Token, AA auf dark BG) */
  --wr-muted-dim:     #5C5774;   /* Disabled fg / hairlines */

  /* Hairlines / dividers */
  --wr-line:          rgba(255, 255, 255, 0.08);
  --wr-line-strong:   rgba(255, 255, 255, 0.16);
  --wr-line-magenta:  rgba(199, 59, 126, 0.32);

  /* Glass panels */
  --wr-glass:         rgba(255, 255, 255, 0.04);
  --wr-glass-strong:  rgba(255, 255, 255, 0.08);

  /* Light-mode exceptions (rare — only when contractually required).
     IMPORTANT: never wash light surfaces with pink gradients. Use solid
     off-white. Magenta is for accents only (border, icon, eyebrow), never
     as a background tint. */
  --wr-light-bg:      #FAFAF7;
  --wr-light-fg:      #1E1A3E;
  --wr-light-muted:   #6B6680;  /* Typo-Handoff 2026-07-10 (Muted auf hell #FAFAF7) */

  /* Semantic */
  --wr-success:       #4FD1A1;
  --wr-warning:       #F2B85A;
  --wr-danger:        #F25A6A;
  --wr-info:          #6BA8FF;

  /* ============================================================
     GRADIENTS — Atmospheric Limb
     ============================================================ */
  --wr-gradient-brand:
    linear-gradient(135deg, #C73B7E 0%, #7E2A5A 50%, #1E1A3E 100%);
  --wr-gradient-brand-soft:
    linear-gradient(135deg, rgba(199,59,126,.30) 0%, rgba(126,42,90,.20) 50%, rgba(30,26,62,.00) 100%);
  --wr-gradient-rim:
    radial-gradient(120% 80% at 0% 100%, rgba(199,59,126,.45) 0%, rgba(126,42,90,.20) 35%, rgba(11,8,20,0) 70%);
  --wr-gradient-text:
    linear-gradient(90deg, #C73B7E 0%, #1E1A3E 100%);
  --wr-glow-magenta:   0 0 24px rgba(199, 59, 126, 0.40);
  --wr-glow-magenta-lg:0 0 48px rgba(199, 59, 126, 0.55);

  /* ============================================================
     TYPOGRAPHY
     Geist (sans), Geist Mono (mono) — Fraunces entfernt, Serif = Geist
     Telegrafico is the WORDMARK ONLY — never set running text in it.
     ============================================================ */
  --wr-font-sans:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wr-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* per Design-Anweisung: NUR Tags/Indizes/Labels/Legal */
  --wr-font-serif:   "Fraunces", "Iowan Old Style", Georgia, serif; /* per Design-Anweisung: NUR die Final-CTA-Subline */
  --wr-font-display: "Geist", system-ui, sans-serif;   /* uppercase + Black for hero */
  --wr-font-wordmark:"Telegrafico", "Geist", system-ui, sans-serif; /* WORDMARK ONLY */

  /* Type scale (1.250 ratio, anchored at 16px) */
  --wr-text-2xs:  11px;
  --wr-text-xs:   12px;
  --wr-text-sm:   14px;
  --wr-text-base: 16px;
  --wr-text-md:   18px;
  --wr-text-lg:   22px;
  --wr-text-xl:   28px;
  --wr-text-2xl:  36px;
  --wr-text-3xl:  48px;
  --wr-text-4xl:  64px;
  --wr-text-5xl:  88px;
  --wr-text-6xl:  120px;

  /* Tracking — uppercase display gets opened up */
  --wr-track-tight:  -0.02em;
  --wr-track-normal: 0;
  --wr-track-wide:   0.04em;
  --wr-track-wider:  0.12em;     /* eyebrow / pills */
  --wr-track-widest: 0.22em;     /* wordmark-style */

  /* Line height */
  --wr-leading-tight:   1.05;
  --wr-leading-snug:    1.18;
  --wr-leading-normal:  1.45;
  --wr-leading-relaxed: 1.6;

  /* ============================================================
     SPACING — 8px base
     ============================================================ */
  --wr-space-0:  0;
  --wr-space-1:  4px;
  --wr-space-2:  8px;
  --wr-space-3:  12px;
  --wr-space-4:  16px;
  --wr-space-5:  20px;
  --wr-space-6:  24px;
  --wr-space-8:  32px;
  --wr-space-10: 40px;
  --wr-space-12: 48px;
  --wr-space-16: 64px;
  --wr-space-20: 80px;
  --wr-space-24: 96px;
  --wr-space-32: 128px;

  /* ============================================================
     RADII — slightly soft, never pillowy
     ============================================================ */
  --wr-radius-none: 0;
  --wr-radius-xs:   2px;
  --wr-radius-sm:   4px;
  --wr-radius-md:   6px;     /* default button / input */
  --wr-radius-lg:   10px;    /* cards */
  --wr-radius-xl:   16px;    /* hero capsules */
  --wr-radius-2xl:  24px;
  --wr-radius-pill: 9999px;  /* eyebrow pills */

  /* ============================================================
     ELEVATION — restrained, magenta-tinted glow is the signature
     ============================================================ */
  --wr-shadow-xs: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.40);
  --wr-shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 2px 8px rgba(0,0,0,.50);
  --wr-shadow-md: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px rgba(0,0,0,.55);
  --wr-shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 64px rgba(0,0,0,.65);
  --wr-shadow-glow: 0 0 24px rgba(199, 59, 126, 0.40);
  --wr-shadow-glow-lg: 0 0 60px rgba(199, 59, 126, 0.55);

  /* ============================================================
     MOTION — cinematic, never bouncy
     ============================================================ */
  --wr-ease-out:   cubic-bezier(.22, 1, .36, 1);
  --wr-ease-in:    cubic-bezier(.55, 0, .68, .15);
  --wr-ease-inout: cubic-bezier(.65, 0, .35, 1);
  --wr-dur-fast:    140ms;
  --wr-dur-base:    240ms;
  --wr-dur-slow:    420ms;
  --wr-dur-cinematic: 800ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --wr-content-max: 1240px;
  --wr-gutter:      24px;
  --wr-grid-cols:   12;
}

/* ============================================================
   SEMANTIC ROLE STYLES — drop-in classes / element rules
   ============================================================ */

.wr-bg-dark       { background: var(--wr-black); color: var(--wr-cool-white); }
.wr-bg-violet     { background: var(--wr-violet-deep); color: var(--wr-cool-white); }
.wr-bg-gradient   { background: var(--wr-gradient-brand); color: var(--wr-white); }
.wr-bg-light      { background: var(--wr-light-bg); color: var(--wr-light-fg); }

/* Headlines — UPPERCASE display per brand spec */
.wr-h1, .wr-display-1 {
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(48px, 6.5vw, var(--wr-text-5xl));
  line-height: var(--wr-leading-tight);
  letter-spacing: var(--wr-track-wide);
  text-transform: uppercase;
  color: var(--wr-white);
}
.wr-h2 {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, var(--wr-text-3xl));
  line-height: var(--wr-leading-tight);
  letter-spacing: var(--wr-track-wide);
  text-transform: uppercase;
  color: var(--wr-white);
}
.wr-h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: var(--wr-text-2xl);
  line-height: var(--wr-leading-snug);
  letter-spacing: var(--wr-track-wide);
  text-transform: uppercase;
  color: var(--wr-white);
}
.wr-h4 {
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: var(--wr-text-xl);
  line-height: var(--wr-leading-snug);
  letter-spacing: var(--wr-track-normal);
  color: var(--wr-white);
}

/* Body — Fließtext site-wide (Bernd-Spec 2026-06):
   17px / 1.7 / Geist 400; Absatzabstand 36px OBEN (margin-top-Rhythmus).
   Farbe läuft über --wr-text-fg: dunkle Flächen cool-white,
   helle Flächen (is-light & Co.) Ink #1E1A3E. */
.wr-body, p {
  font-family: var(--wr-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--wr-text-fg, var(--wr-cool-white));
  text-wrap: pretty;
  margin: 0;
}
p + p { margin-block-start: 36px; }
.wr-body-lg {
  font-size: var(--wr-text-md);
  line-height: var(--wr-leading-relaxed);
}
.wr-body-sm {
  font-size: var(--wr-text-sm);
  line-height: var(--wr-leading-normal);
  color: var(--wr-muted);
}

/* Eyebrow / sub-label — black pill, white uppercase */
.wr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--wr-space-2);
  padding: 6px 12px;
  background: var(--wr-black);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-size: var(--wr-text-xs);
  font-weight: 600;
  letter-spacing: var(--wr-track-wider);
  text-transform: uppercase;
  border-radius: var(--wr-radius-pill);
  border: 1px solid var(--wr-line);
}
.wr-eyebrow--magenta {
  background: var(--wr-magenta);
  border-color: transparent;
}

/* Editorial / serif accent */
.wr-editorial {
  font-family: var(--wr-font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: var(--wr-text-xl);
  line-height: var(--wr-leading-snug);
  color: var(--wr-cool-white);
}

/* Mono / tag */
.wr-mono, code, kbd, pre, samp {
  font-family: var(--wr-font-mono);
  font-size: var(--wr-text-sm);
  letter-spacing: -0.01em;
}
.wr-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--wr-font-mono);
  font-size: var(--wr-text-xs);
  letter-spacing: var(--wr-track-wide);
  text-transform: uppercase;
  color: var(--wr-cool-white);
  background: var(--wr-glass);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-sm);
}

/* Hero gradient text — used sparingly */
.wr-gradient-text {
  background: var(--wr-gradient-brand);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* Linework divider */
.wr-divider {
  height: 1px;
  background: var(--wr-line);
  border: 0;
  margin: var(--wr-space-8) 0;
}

/* === tokens.css === */
/* Local kit-level overrides on top of the global tokens. */

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

html, body {
  background: var(--wr-black);
  color: var(--wr-cool-white);
  font-family: var(--wr-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wr-container {
  max-width: var(--wr-content-max);
  margin: 0 auto;
  padding: 0 var(--wr-gutter);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--wr-radius-md);
  border: 1px solid transparent;
  transition: box-shadow var(--wr-dur-base) var(--wr-ease-out),
              background var(--wr-dur-base) var(--wr-ease-out),
              border-color var(--wr-dur-base) var(--wr-ease-out);
  white-space: nowrap;
}
.wr-btn--primary {
  background: var(--wr-magenta);
  color: var(--wr-white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.wr-btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--wr-shadow-glow-lg);
}
.wr-btn--primary:active {
  background: #A92F6B;
}
.wr-btn--secondary {
  background: transparent;
  color: var(--wr-white);
  border-color: rgba(255,255,255,.5);
}
.wr-btn--secondary:hover {
  border-color: var(--wr-white);
  box-shadow: var(--wr-shadow-glow);
}
.wr-btn--ghost {
  background: var(--wr-glass);
  color: var(--wr-white);
  border-color: var(--wr-line);
}
.wr-btn--ghost:hover {
  background: var(--wr-glass-strong);
  border-color: var(--wr-line-strong);
}
.wr-btn--link {
  background: transparent;
  color: var(--wr-white);
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.wr-btn--link:hover { color: var(--wr-magenta-glow); }

/* ============================================================
   EYEBROWS
   ============================================================ */
.wr-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--wr-black);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: var(--wr-radius-pill);
  border: 1px solid var(--wr-line);
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
}
.wr-eyebrow-pill--magenta {
  background: var(--wr-magenta);
  border-color: transparent;
}
.wr-eyebrow-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--wr-magenta-glow);
}

/* ============================================================
   SECTION RHYTHM
   ============================================================ */
section {
  position: relative;
  padding: 96px 0;
}

/* ============================================================
   HEADER
   ============================================================ */
.wr-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: rgba(11, 8, 20, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--wr-line-strong);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
}
.wr-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}
.wr-header__brand .icon {
  height: 32px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(199,59,126,.35));
}
.wr-header__brand .word {
  font-family: var(--wr-font-wordmark);
  font-size: 22px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1;
  padding-top: 2px;
}
.wr-header__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.wr-header__link {
  position: relative;
  font-family: var(--wr-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-cool-white);
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--wr-dur-fast) var(--wr-ease-out);
}
.wr-header__link:hover { color: var(--wr-white); }
.wr-header__link.is-active { color: var(--wr-white); }
.wr-header__link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--wr-magenta);
  box-shadow: 0 0 12px rgba(199,59,126,.7);
}
.wr-header__link .chev {
  margin-left: 4px;
  font-size: 8px;
  opacity: .5;
  position: relative;
  top: -1px;
}
/* Header CTA gets a contrast ring so it survives over the magenta hero gradient. */
.wr-header .wr-btn--primary {
  background: var(--wr-magenta);
  color: var(--wr-white);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(11,8,20,.5),
    0 0 24px rgba(199,59,126,.35);
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
}
.wr-header .wr-btn--primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 0 0 1px rgba(11,8,20,.5),
    0 0 32px rgba(255,79,157,.7);
}

/* ============================================================
   ANIMATION — pulse (genutzt von .wr-ga-* Dot-Indikatoren)
   Alt-Hero-Block (.wr-hero*) entfernt — war in keiner Seite genutzt.
   ============================================================ */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ============================================================
   CLIENT LOGOS
   ============================================================ */
.wr-clients {
  background: var(--wr-black);
  padding: 56px 0;
  border-top: 1px solid var(--wr-line);
  border-bottom: 1px solid var(--wr-line);
}
.wr-clients__label {
  text-align: center;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin-bottom: 24px;
}
.wr-clients__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--wr-line);
  border-top: 1px solid var(--wr-line);
  border-bottom: 1px solid var(--wr-line);
}
.wr-clients__cell {
  background: var(--wr-black);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--wr-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--wr-dur-base) var(--wr-ease-out);
  min-height: 88px;
}
.wr-clients__cell.serif { font-family: var(--wr-font-serif); font-style: italic; font-weight: 500; text-transform: none; }
.wr-clients__cell.mono { font-family: var(--wr-font-mono); font-size: 12px; letter-spacing: 0.1em; }
.wr-clients__cell:hover { color: var(--wr-cool-white); }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.wr-services { background: var(--wr-violet-900); }
.wr-services--dark { background: var(--wr-black); }
.wr-services__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}
.wr-services__title {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.05;
  text-wrap: balance;
  max-width: 720px;
}
.wr-services__intro {
  font-size: 15px;
  color: var(--wr-muted);
  max-width: 360px;
  line-height: 1.6;
}
.wr-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.wr-service {
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--wr-dur-base) var(--wr-ease-out),
              box-shadow var(--wr-dur-base) var(--wr-ease-out),
              transform var(--wr-dur-base) var(--wr-ease-out);
}
.wr-services--dark .wr-service { background: var(--wr-violet-900); }
.wr-service:hover {
  border-color: rgba(199,59,126,.5);
  box-shadow: var(--wr-shadow-glow);
}
.wr-service:hover::before {
  opacity: 1;
}
.wr-service::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 0% 100%, rgba(199,59,126,.18), rgba(0,0,0,0) 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wr-dur-base) var(--wr-ease-out);
}
.wr-service__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wr-radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wr-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wr-magenta-glow);
}
.wr-service__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.wr-service__title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
}
.wr-service__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--wr-cool-white);
  flex: 1;
}
.wr-service__more {
  font-size: 13px;
  color: var(--wr-white);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.wr-service__more .arrow { transition: transform var(--wr-dur-base) var(--wr-ease-out); }
.wr-service:hover .arrow { transform: translateX(4px); color: var(--wr-magenta-glow); }

/* ============================================================
   CTA BLOCK
   ============================================================ */
.wr-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--wr-gradient-brand);
}
.wr-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 70% at 50% 100%, rgba(255,79,157,.4), rgba(0,0,0,0) 60%);
}
.wr-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.wr-cta__title {
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.0;
  text-wrap: balance;
  max-width: 880px;
}
.wr-cta__sub {
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-size: 20px;
  color: rgba(255,255,255,.85);
}

/* ============================================================
   FOOTER
   ============================================================ */
.wr-footer {
  background: var(--wr-black);
  border-top: 1px solid var(--wr-line);
  padding: 64px 0 32px;
}
.wr-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}
.wr-footer__brand .tag {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-top: 16px;
  line-height: 1.1;
}
.wr-footer__brand .desc {
  margin-top: 12px;
  font-size: 13px;
  color: var(--wr-muted);
  line-height: 1.6;
  max-width: 280px;
}
.wr-footer__col h4 {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.wr-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wr-footer__col a { font-size: 14px; color: var(--wr-cool-white); }
.wr-footer__col a:hover { color: var(--wr-magenta-glow); }
.wr-footer__badges {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--wr-line);
  flex-wrap: wrap;
}
.wr-footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--wr-glass);
  border: 1px solid var(--wr-line);
  border-radius: 9999px;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wr-cool-white);
}
.wr-footer__legal {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--wr-muted);
  flex-wrap: wrap;
  gap: 12px;
}
.wr-footer__legal a { color: var(--wr-muted); }
.wr-footer__legal a:hover { color: var(--wr-cool-white); }

/* ============================================================
   MISSION MODAL
   ============================================================ */
.wr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11,8,20,.78);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn var(--wr-dur-base) var(--wr-ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.wr-modal {
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line-strong);
  border-radius: var(--wr-radius-xl);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-shadow: var(--wr-shadow-lg), var(--wr-shadow-glow);
}
.wr-modal__head {
  padding: 32px 32px 0;
  position: relative;
}
.wr-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--wr-glass);
  border: 1px solid var(--wr-line);
  color: var(--wr-cool-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.wr-modal__close:hover { background: var(--wr-glass-strong); }
.wr-modal__title {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-top: 16px;
  line-height: 1.1;
}
.wr-modal__sub {
  margin-top: 10px;
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--wr-cool-white);
}
.wr-modal__form {
  padding: 24px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wr-field { display: flex; flex-direction: column; gap: 6px; }
.wr-field label {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-muted);
}
.wr-field input, .wr-field textarea, .wr-field select {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wr-line);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--wr-radius-md);
  outline: none;
  transition: border var(--wr-dur-fast) var(--wr-ease-out), box-shadow var(--wr-dur-fast);
}
.wr-field input::placeholder, .wr-field textarea::placeholder { color: var(--wr-muted-dim); }
.wr-field input:focus, .wr-field textarea:focus, .wr-field select:focus {
  border-color: var(--wr-magenta);
  box-shadow: 0 0 0 3px rgba(199,59,126,.18);
}
.wr-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wr-field--checkbox {
  display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding-top: 4px;
}
.wr-check {
  width: 18px; height: 18px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}
.wr-check.checked { background: var(--wr-magenta); border-color: var(--wr-magenta); }
.wr-check.checked::after {
  content: ''; position: absolute;
  left: 5px; top: 2px;
  width: 4px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.wr-field--checkbox span { font-size: 13px; color: var(--wr-cool-white); line-height: 1.5; }

.wr-modal__success {
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.wr-modal__success .icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--wr-gradient-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wr-shadow-glow-lg);
}
.wr-modal__success .icon svg { color: #fff; width: 32px; height: 32px; stroke-width: 2; }

/* ============================================================
   QUOTE BLOCK (light section — used for rhythm between dark blocks)
   No gradients, no light-pink washes. Off-white surface + deep
   violet ink + saturated magenta as accent only.
   ============================================================ */
.wr-quote {
  background: #FAFAF7;
  color: var(--wr-light-fg);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(30,26,62,.06);
  border-bottom: 1px solid rgba(30,26,62,.06);
}
.wr-quote__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: center;
}
.wr-quote__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--wr-light-fg);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 9999px;
  width: max-content;
  white-space: nowrap;
  margin-bottom: 28px;
}
.wr-quote__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--wr-magenta);
}
.wr-quote__text {
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  color: var(--wr-light-fg);
  text-wrap: balance;
  margin-bottom: 32px;
}
.wr-quote__text mark {
  background: transparent;
  color: var(--wr-magenta);
  font-style: italic;
  font-weight: 500;
  border-bottom: 2px solid var(--wr-magenta);
  padding-bottom: 2px;
}
.wr-quote__attrib {
  display: flex;
  align-items: center;
  gap: 16px;
}
.wr-quote__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wr-violet-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--wr-white);
}
.wr-quote__who {
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: 15px;
  color: var(--wr-light-fg);
  line-height: 1.3;
}
.wr-quote__role {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wr-light-muted);
  margin-top: 4px;
}
.wr-quote__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border-left: 2px solid var(--wr-magenta);
  padding-left: 28px;
}
.wr-quote__stat { padding: 18px 0; border-bottom: 1px solid rgba(30,26,62,.1); }
.wr-quote__stat:last-child { border-bottom: 0; }
.wr-quote__stat .v {
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: 44px;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--wr-magenta);
}
.wr-quote__stat .l {
  display: block;
  margin-top: 8px;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wr-light-muted);
}
.wr-app {
  min-height: 100vh;
  background: var(--wr-black);
}

/* === google-ads.css === */
/* Page-specific styles for the Google Ads landing page.
   Builds on tokens.css; everything is prefixed wr-ga-. */
@import url("tokens.css");

/* ============================================================
   HERO with stat strip
   ============================================================ */
.wr-ga-hero {
  position: relative;
  background: var(--wr-black);
  padding: 120px 0 0;
  overflow: hidden;
  border-bottom: 1px solid var(--wr-line);
}
.wr-ga-hero__bg {
  position: absolute;
  inset: 0;
  background: var(--wr-gradient-brand);
  opacity: .35;
  z-index: 0;
}
.wr-ga-hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(11,8,20,.9), rgba(0,0,0,0) 60%),
    radial-gradient(40% 60% at 10% 100%, rgba(255,79,157,.32), rgba(0,0,0,0) 60%);
}
.wr-ga-hero__inner {
  position: relative;
  z-index: 1;
}
.wr-ga-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}
.wr-ga-hero__claim {
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin: 24px 0 22px;
  text-wrap: balance;
}
.wr-ga-hero__claim mark {
  background: none;
  color: var(--wr-magenta);
  -webkit-text-fill-color: currentColor;
}
.wr-ga-hero__sub {
  font-family: var(--wr-font-sans);
  font-size: 18px;
  line-height: 1.6;
  color: var(--wr-cool-white);
  max-width: 560px;
}
.wr-ga-hero__ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.wr-ga-hero__sidecard {
  border: 1px solid var(--wr-line-strong);
  background: rgba(20, 16, 42, .65);
  backdrop-filter: blur(12px);
  border-radius: var(--wr-radius-lg);
  padding: 28px;
  position: relative;
}
.wr-ga-hero__sidecard .head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-magenta-glow);
  margin-bottom: 14px;
}
.wr-ga-hero__sidecard .head .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wr-magenta-glow);
  box-shadow: 0 0 8px var(--wr-magenta-glow);
}
.wr-ga-hero__sidecard h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-bottom: 16px;
}
.wr-ga-hero__sidecard ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.wr-ga-hero__sidecard li {
  display: flex; align-items: start; gap: 10px;
  font-size: 14px; color: var(--wr-cool-white); line-height: 1.5;
}
.wr-ga-hero__sidecard li svg { flex-shrink: 0; color: var(--wr-magenta-glow); margin-top: 2px; }

/* ----- Stat strip ----- */
.wr-ga-stats {
  position: relative;
  z-index: 1;
  margin-top: 80px;
  padding: 36px 0;
  border-top: 1px solid var(--wr-line);
  background: rgba(11,8,20,.92);
}
.wr-ga-stats__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wr-line);
  border-radius: var(--wr-radius-md);
  overflow: hidden;
  border: 1px solid var(--wr-line);
}
.wr-ga-stats__cell {
  background: var(--wr-black);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wr-ga-stats__cell .v {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--wr-white);
  line-height: 1;
}
.wr-ga-stats__cell .v .unit { color: var(--wr-magenta-glow); margin-left: 2px; }
.wr-ga-stats__cell .l {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wr-muted);
}

/* ============================================================
   PROBLEMS — "Wenn das bekannt klingt"
   2x2 grid, dark cards, magenta-warn icon
   ============================================================ */
.wr-ga-problems { background: var(--wr-violet-900); }
.wr-ga-problems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.wr-ga-problem {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  padding: 28px;
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  align-items: start;
}
.wr-ga-problem__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wr-radius-md);
  border: 1px solid rgba(242, 90, 106, .35);
  background: rgba(242, 90, 106, .08);
  color: var(--wr-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wr-ga-problem__icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.wr-ga-problem h4 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-bottom: 8px;
  line-height: 1.2;
}
.wr-ga-problem p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wr-cool-white);
}

/* ============================================================
   PRINCIPLES — 3 cards on dark
   ============================================================ */
.wr-ga-principles { background: var(--wr-black); }
.wr-ga-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.wr-ga-principle {
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wr-ga-principle__num {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--wr-magenta-glow);
}
.wr-ga-principle h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
}
.wr-ga-principle p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--wr-cool-white);
}

/* ============================================================
   AUDIT — 12-point checklist + rhythm timeline
   ============================================================ */
.wr-ga-audit { background: var(--wr-violet-900); }
.wr-ga-audit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.wr-ga-audit__panel {
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 32px;
}
.wr-ga-audit__panel h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
  margin-bottom: 8px;
}
.wr-ga-audit__panel .desc {
  font-size: 14px;
  color: var(--wr-muted);
  margin-bottom: 24px;
}
.wr-ga-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.wr-ga-checklist li {
  display: flex;
  align-items: start;
  gap: 10px;
  font-family: var(--wr-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wr-cool-white);
  line-height: 1.45;
  padding: 8px 0;
  border-bottom: 1px solid var(--wr-line);
}
.wr-ga-checklist li:nth-last-child(-n+2) { border-bottom: 0; }
.wr-ga-checklist .num {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--wr-magenta-glow);
  font-weight: 600;
  min-width: 18px;
}
.wr-ga-rhythm {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.wr-ga-rhythm li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wr-line);
  position: relative;
}
.wr-ga-rhythm li:last-child { border-bottom: 0; }
.wr-ga-rhythm__cadence {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wr-magenta-glow);
  padding-top: 3px;
}
.wr-ga-rhythm__what {
  font-family: var(--wr-font-sans);
  font-size: 14px;
  color: var(--wr-cool-white);
  line-height: 1.5;
}
.wr-ga-rhythm__what b {
  display: block;
  color: var(--wr-white);
  font-weight: 600;
  margin-bottom: 4px;
}

/* ============================================================
   PROCESS — 3 steps with connecting line
   ============================================================ */
.wr-ga-process { background: var(--wr-black); }
.wr-ga-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
  position: relative;
}
.wr-ga-process__grid::before {
  content: '';
  position: absolute;
  top: 36px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--wr-magenta) 20%, var(--wr-magenta) 80%, transparent);
  z-index: 0;
}
.wr-ga-process__step {
  position: relative;
  z-index: 1;
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wr-ga-process__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wr-magenta);
  color: var(--wr-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 4px solid var(--wr-black);
  box-shadow: 0 0 20px rgba(199,59,126,.45);
  align-self: flex-start;
}
.wr-ga-process__step h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
}
.wr-ga-process__step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wr-cool-white);
}

/* ============================================================
   CASES — 3 case studies
   ============================================================ */
.wr-ga-cases { background: var(--wr-violet-900); }
.wr-ga-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.wr-ga-case {
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
}
.wr-ga-case__tag {
  display: inline-flex;
  width: max-content;
  padding: 4px 10px;
  background: rgba(199,59,126,.1);
  color: var(--wr-magenta-glow);
  border: 1px solid rgba(199,59,126,.3);
  border-radius: var(--wr-radius-sm);
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wr-ga-case h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.2;
}
.wr-ga-case p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wr-cool-white);
  flex: 1;
}

/* ============================================================
   AD TYPES — 6-grid
   ============================================================ */
.wr-ga-types { background: var(--wr-black); }
.wr-ga-types__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.wr-ga-type {
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--wr-dur-base) var(--wr-ease-out),
              box-shadow var(--wr-dur-base) var(--wr-ease-out);
}
.wr-ga-type:hover {
  border-color: rgba(199,59,126,.5);
  box-shadow: var(--wr-shadow-glow);
}
.wr-ga-type__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--wr-radius-md);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wr-line);
  color: var(--wr-magenta-glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wr-ga-type__icon svg { stroke-width: 1.75; }
.wr-ga-type h4 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
}
.wr-ga-type p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-cool-white);
}

/* ============================================================
   PRICING — 3 cards + side warning
   ============================================================ */
.wr-ga-pricing { background: var(--wr-violet-900); }
.wr-ga-pricing__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.wr-ga-pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.wr-ga-pricing__card {
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wr-ga-pricing__card h4 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.15;
}
.wr-ga-pricing__card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-cool-white);
}
.wr-ga-pricing__card .num {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wr-magenta-glow);
}
.wr-ga-pricing__aside {
  background: var(--wr-gradient-brand);
  border-radius: var(--wr-radius-lg);
  padding: 28px;
  color: var(--wr-white);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.wr-ga-pricing__aside::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 80% at 100% 100%, rgba(11,8,20,.4), rgba(0,0,0,0));
  pointer-events: none;
}
.wr-ga-pricing__aside .v {
  position: relative;
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: 64px;
  letter-spacing: 0.02em;
  line-height: 1;
}
.wr-ga-pricing__aside .l {
  position: relative;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.wr-ga-pricing__aside h4 {
  position: relative;
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wr-ga-pricing__aside p {
  position: relative;
  font-size: 13.5px;
  line-height: 1.55;
}
.wr-ga-pricing__aside ul {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.wr-ga-pricing__aside li {
  display: flex; align-items: start; gap: 10px;
  font-size: 13px; line-height: 1.5;
}
.wr-ga-pricing__aside li svg { flex-shrink: 0; margin-top: 2px; }

/* ============================================================
   RED FLAGS — 6 anti-pattern cards on dark
   ============================================================ */
.wr-ga-flags { background: var(--wr-black); }
.wr-ga-flags__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 48px;
}
.wr-ga-flag {
  background: var(--wr-violet-900);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.wr-ga-flag::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--wr-danger), transparent 60%);
  opacity: .5;
}
.wr-ga-flag__num {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--wr-danger);
  margin-bottom: 4px;
}
.wr-ga-flag h4 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.2;
}
.wr-ga-flag p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--wr-cool-white);
}

/* ============================================================
   AUDIT PDF — light section, off-white
   ============================================================ */
.wr-ga-pdf {
  background: #FAFAF7;
  color: var(--wr-light-fg);
  border-top: 1px solid rgba(30,26,62,.06);
  border-bottom: 1px solid rgba(30,26,62,.06);
}
.wr-ga-pdf__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.wr-ga-pdf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--wr-light-fg);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 9999px;
  width: max-content;
  margin-bottom: 28px;
}
.wr-ga-pdf__eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wr-magenta);
}
.wr-ga-pdf__title {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wr-light-fg);
  line-height: 1.0;
  text-wrap: balance;
  margin-bottom: 16px;
}
.wr-ga-pdf__lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--wr-light-fg);
  margin-bottom: 20px;
}
.wr-ga-pdf__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.wr-ga-pdf__list li {
  display: flex; align-items: start; gap: 10px;
  font-family: var(--wr-font-sans);
  font-size: 14px;
  color: var(--wr-light-fg);
  line-height: 1.5;
}
.wr-ga-pdf__list li svg { flex-shrink: 0; color: var(--wr-magenta); margin-top: 2px; }
.wr-ga-pdf__form {
  background: var(--wr-white);
  border: 1px solid rgba(30,26,62,.1);
  border-radius: var(--wr-radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 64px rgba(30,26,62,.06);
}
.wr-ga-pdf__form h4 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-light-fg);
  margin-bottom: 4px;
}
.wr-ga-pdf__form .note {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--wr-light-muted);
  margin-bottom: 4px;
}
.wr-ga-pdf__form label {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-light-muted);
  display: block;
  margin-bottom: 6px;
}
.wr-ga-pdf__form input {
  background: var(--wr-white);
  border: 1px solid rgba(30,26,62,.18);
  color: var(--wr-light-fg);
  font-family: var(--wr-font-sans);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--wr-radius-md);
  outline: none;
  width: 100%;
}
.wr-ga-pdf__form input:focus {
  border-color: var(--wr-magenta);
  box-shadow: 0 0 0 3px rgba(199,59,126,.12);
}
.wr-ga-pdf__form .submit {
  background: var(--wr-magenta);
  color: var(--wr-white);
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--wr-radius-md);
  cursor: pointer;
  margin-top: 4px;
}
.wr-ga-pdf__form .submit:hover { box-shadow: var(--wr-shadow-glow); }
.wr-ga-pdf__form .legal {
  font-size: 11px;
  color: var(--wr-light-muted);
  font-family: var(--wr-font-mono);
  letter-spacing: 0.04em;
}

/* ============================================================
   STRATEGY CALL — final CTA / form on dark
   ============================================================ */
.wr-ga-call { background: var(--wr-violet-900); position: relative; overflow: hidden; }
.wr-ga-call::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 60% at 100% 0%, rgba(199,59,126,.12), rgba(0,0,0,0) 60%);
}
.wr-ga-call__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-top: 48px;
}
.wr-ga-bio {
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 32px;
}
.wr-ga-bio dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 20px;
  margin-bottom: 24px;
}
.wr-ga-bio dt {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wr-magenta-glow);
  padding-top: 3px;
}
.wr-ga-bio dd {
  font-size: 14px;
  color: var(--wr-cool-white);
  line-height: 1.5;
}
.wr-ga-form {
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
  padding: 32px;
}
.wr-ga-form h3 {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-bottom: 6px;
}
.wr-ga-form .lead {
  font-size: 14px;
  color: var(--wr-cool-white);
  margin-bottom: 22px;
  line-height: 1.55;
}
.wr-ga-form__fields {
  display: flex; flex-direction: column; gap: 12px;
}

/* ============================================================
   FINAL CTA — magenta-gradient hero band
   ============================================================ */
.wr-ga-final { background: var(--wr-gradient-brand); position: relative; overflow: hidden; }
.wr-ga-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 70% at 50% 100%, rgba(255,79,157,.45), rgba(0,0,0,0) 60%);
}
.wr-ga-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.wr-ga-final h2 {
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(40px, 5.5vw, 72px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.0;
  text-wrap: balance;
  max-width: 1000px;
}
.wr-ga-final p {
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,.9);
  max-width: 640px;
  line-height: 1.4;
}

/* ============================================================
   Section heads (shared)
   ============================================================ */
.wr-ga-section__head {
  display: flex; flex-direction: column; gap: 16px; max-width: 880px;
}
.wr-ga-section__head h2 {
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  line-height: 1.05;
  text-wrap: balance;
}
.wr-ga-section__head p {
  font-size: 16px;
  color: var(--wr-cool-white);
  line-height: 1.6;
  /* Keine feste Lese-Cap mehr (Bernd-Linie: Content-Breiten nativ steuern,
     nicht versteckt im Bundle). Text füllt die Widget-Breite; eine
     Begrenzung setzt man per Elementor → Erweitert → Breite. */
}
.wr-ga-section__head--centered {
  margin: 0 auto;
  text-align: center;
  align-items: center;
}
.wr-ga-section__head--centered p { max-width: 720px; }

/* ============================================================
   Responsive: collapse multi-col grids on narrow viewports
   ============================================================ */
@media (max-width: 1100px) {
  .wr-ga-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .wr-ga-stats__row { grid-template-columns: repeat(2, 1fr); }
  .wr-ga-problems__grid,
  .wr-ga-principles__grid,
  .wr-ga-process__grid,
  .wr-ga-cases__grid,
  .wr-ga-flags__grid,
  .wr-ga-types__grid { grid-template-columns: repeat(2, 1fr); }
  .wr-ga-audit__grid,
  .wr-ga-pricing__grid,
  .wr-ga-pdf__grid,
  .wr-ga-call__grid { grid-template-columns: 1fr; gap: 32px; }
  .wr-ga-pricing__cards { grid-template-columns: repeat(3, 1fr); }
  .wr-ga-process__grid::before { display: none; }
}
@media (max-width: 720px) {
  .wr-ga-stats__row,
  .wr-ga-problems__grid,
  .wr-ga-principles__grid,
  .wr-ga-process__grid,
  .wr-ga-cases__grid,
  .wr-ga-types__grid,
  .wr-ga-flags__grid,
  .wr-ga-pricing__cards { grid-template-columns: 1fr; }
  .wr-ga-checklist { grid-template-columns: 1fr; }
}

/* ============================================================
   LIGHT-MODE OVERRIDES
   Apply ".is-light" to any section root and its surface flips to
   off-white with dark violet ink. Magenta stays as accent only —
   no pink washes, no gradients on the surface (per brand rule).
   ============================================================ */
.wr-ga-problems.is-light,
.wr-ga-principles.is-light,
.wr-ga-audit.is-light,
.wr-ga-process.is-light,
.wr-ga-cases.is-light,
.wr-ga-types.is-light,
.wr-ga-pricing.is-light,
.wr-ga-flags.is-light {
  background: #FAFAF7;
  color: var(--wr-light-fg);
  border-top: 1px solid rgba(30,26,62,.06);
  border-bottom: 1px solid rgba(30,26,62,.06);
}

/* Section heads */
.is-light .wr-ga-section__head h2 { color: var(--wr-light-fg); }
.is-light .wr-ga-section__head p { color: var(--wr-light-muted); }

/* Eyebrow pills retain dark fill, white text — works on light too. */

/* Generic card surface on light = white with light hairline */
.is-light .wr-ga-problem,
.is-light .wr-ga-principle,
.is-light .wr-ga-audit__panel,
.is-light .wr-ga-process__step,
.is-light .wr-ga-case,
.is-light .wr-ga-type,
.is-light .wr-ga-pricing__card,
.is-light .wr-ga-flag {
  background: var(--wr-white);
  border: 1px solid rgba(30,26,62,.08);
  box-shadow: 0 1px 0 rgba(30,26,62,.02), 0 8px 24px rgba(30,26,62,.04);
}

/* Card text on light */
.is-light .wr-ga-problem h4,
.is-light .wr-ga-principle h3,
.is-light .wr-ga-audit__panel h3,
.is-light .wr-ga-process__step h3,
.is-light .wr-ga-case h3,
.is-light .wr-ga-type h4,
.is-light .wr-ga-pricing__card h4,
.is-light .wr-ga-flag h4 { color: var(--wr-light-fg); }

.is-light .wr-ga-problem p,
.is-light .wr-ga-principle p,
.is-light .wr-ga-process__step p,
.is-light .wr-ga-case p,
.is-light .wr-ga-type p,
.is-light .wr-ga-pricing__card p,
.is-light .wr-ga-flag p { color: var(--wr-light-fg); }

.is-light .wr-ga-audit__panel .desc { color: var(--wr-light-muted); }

/* Problem icon on light: keep danger color tint */
.is-light .wr-ga-problem__icon {
  background: rgba(242, 90, 106, .08);
  border-color: rgba(242, 90, 106, .25);
}

/* Type icon on light */
.is-light .wr-ga-type__icon {
  background: rgba(199,59,126,.06);
  border-color: rgba(199,59,126,.18);
  color: var(--wr-magenta);
}

/* Principle "// 01" + pricing num */
.is-light .wr-ga-principle__num,
.is-light .wr-ga-pricing__card .num { color: var(--wr-magenta); }

/* Process numbered circle (light bg around magenta circle) */
.is-light .wr-ga-process__num {
  border-color: #FAFAF7;
  box-shadow: 0 0 0 1px rgba(30,26,62,.08), 0 8px 24px rgba(199,59,126,.25);
}
.is-light .wr-ga-process__grid::before {
  background: linear-gradient(90deg, transparent, rgba(199,59,126,.5) 20%, rgba(199,59,126,.5) 80%, transparent);
}

/* Audit checklist + rhythm on light */
.is-light .wr-ga-checklist li {
  color: var(--wr-light-fg);
  border-bottom-color: rgba(30,26,62,.08);
}
.is-light .wr-ga-checklist .num { color: var(--wr-magenta); }
.is-light .wr-ga-rhythm li {
  border-bottom-color: rgba(30,26,62,.08);
}
.is-light .wr-ga-rhythm__cadence { color: var(--wr-magenta); }
.is-light .wr-ga-rhythm__what { color: var(--wr-light-fg); }
.is-light .wr-ga-rhythm__what b { color: var(--wr-light-fg); }

/* Case tag on light */
.is-light .wr-ga-case__tag {
  background: rgba(199,59,126,.08);
  color: var(--wr-magenta);
  border-color: rgba(199,59,126,.25);
}

/* Type hover on light */
.is-light .wr-ga-type:hover {
  border-color: rgba(199,59,126,.4);
  box-shadow: 0 0 20px rgba(199,59,126,.18), 0 8px 24px rgba(30,26,62,.06);
}

/* Pricing aside stays a magenta gradient — that's our bold accent moment.
   No change needed there. */

/* Red flags on light */
.is-light .wr-ga-flag__num { color: var(--wr-danger); }
.is-light .wr-ga-flag::before {
  background: linear-gradient(90deg, var(--wr-danger), transparent 60%);
  opacity: .75;
}

/* ============================================================
   PRELAUNCH-FIXES 2026-07-10 (Scan-Befunde B21/B25/B26/B27)
   ============================================================ */
/* B25 ENTFERNT 2026-07-18: Die Sidecard ist inzwischen ueberall dunkel-glass
   (rgba(20,16,42,.65)) — der Hell-Fix machte den Ghost-CTA auf 88849/87091/742
   unlesbar (Ink auf Dunkel). Es gilt wieder die normale Ghost-Regel (weiss). */
/* Auto-Links (Internal Links Manager) INNERHALB von Icon-List-Texten:
   Elementors `.elementor-icon-list-item a { display:flex }` ist fuer
   Ganz-Item-Links gedacht und reisst Inline-Links mitten im Satz in eine
   eigene Zeile (z. B. "GEO\n: Sichtbarkeit..."). Inline erzwingen —
   (0,3,1) ohne !important, Editor bleibt frei. */
body.wr-app .elementor-icon-list-text a { display: inline; }
/* B26: Blog-Template — Autoren-Box lesbar (eine spezifischere Regel gewinnt
   sonst gegen .wr-bt-author) */
.wr-bt-author.elementor-widget-author-box .elementor-author-box__bio { color: rgba(30,26,62,.66); }
.wr-bt-author.elementor-widget-author-box .elementor-author-box__name { color: #1E1A3E; }
/* B27: Kontakt-Hero mobil — H1 lief randlos bis an die Displaykante */
@media (max-width: 767px) {
  .wr-ct-hero { padding-left: 22px !important; padding-right: 22px !important; }
}
/* Insel-zu-Nativ-Bruecke (wr-poaas): Kit-Widget-Farben neutralisieren,
   damit native Widgets die Sektionsfarben des Insel-CSS erben */
.wr-poaas .elementor-widget-text-editor { color: inherit; }
.wr-poaas .elementor-widget-heading .elementor-heading-title { color: inherit; }
/* B21: Bild-Captions in Blog-Posts auf Token statt WP-Default */
.wr-bt-prose figcaption, .wp-element-caption { color: #6B6680; }
/* B29: Mobile Überläufe — Weblog-Grid (min-content-Blowout: 1fr → minmax(0,1fr))
   + Glossar-Body (Plugin-CSS setzt mobil max-width:none → Kind erzwingt Überbreite) */
@media (max-width: 1000px) { .wr-wl-grid .bdt-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 680px) { .wr-wl-grid .bdt-grid { grid-template-columns: minmax(0,1fr) !important; } }
.wr-wl-grid .bdt-grid > * { min-width: 0 !important; }
.wr-wl-grid .bdt-post-grid-item, .wr-wl-grid .bdt-post-grid-desc, .wr-wl-grid .bdt-post-grid-title, .wr-wl-grid .bdt-post-grid-excerpt { min-width: 0; max-width: 100% !important; }
@media (max-width: 767px) {
  .wr-gl-main, .wr-gl-content { max-width: 100% !important; min-width: 0; }
  .wr-gl-content img { max-width: 100% !important; height: auto; }
  .wr-gl-content table { display: block; overflow-x: auto; }
  .wr-gl-content pre { max-width: 100%; overflow-x: auto; }
}

/* ============================================================
   SPEZIFIZITÄTS-STRATEGIE
   ------------------------------------------------------------
   Elementor schreibt Editor-Settings als per-element CSS mit
   Selektor `.elementor-{post-id} .elementor-element.elementor-element-{eid}`
   = Specificity (0,3,0). Unsere Bundle-Defaults müssen DARUNTER
   liegen, damit Editor-Overrides gewinnen. Aber sie müssen
   ÜBER Elementor's Framework-Default `.e-con` (Spec (0,1,0))
   liegen, damit unsere 96/96 statt der 10/10 default greift.

   Ziel-Specificity für Bundle-Defaults: (0,2,0) bis (0,2,1).
   Wir setzen Werte über CSS-Variablen (--padding-top etc.),
   die Elementor selbst nutzt — so kann die Editor-Override sie
   sauber ersetzen.

   @layer haben wir bewusst NICHT verwendet, weil Elementor's
   Framework-CSS unlayered ist und unlayered IMMER gegen
   layered gewinnt (unabhängig von Specificity) — Editor-CSS
   ist auch unlayered, also gewinnt nur Specificity + Cascade.
   ============================================================ */

body.wr-app  { background: var(--wr-black); }
body.wr-app a { text-decoration: none; color: inherit; }
body.wr-app main { display: block; }

/* Body-Background dunkel — fixt den weißen Streifen hinter dem
   Theme-Builder-Header (der vor unserer .wr-app liegt und sonst auf
   dem default-weißen Body sitzt). Da das Bundle nur via HTML-Widget
   auf unseren Brand-Pages enqueued wird, betrifft das keine anderen
   Seiten. */
html, body {
  background-color: var(--wr-black) !important;
}

/* Re-assert image constraints over hello-theme / elementor img-resets */
.wr-app .wr-header__brand .icon {
  height: 32px !important;
  width: auto !important;
  max-width: none !important;
}

/* Re-assert header layout (hello-theme sets <header> to display:block) */
.wr-app .wr-header        { display: flex !important; position: sticky !important; top: 0 !important; z-index: 50 !important; }
.wr-app .wr-header__brand { display: flex !important; align-items: var(--align-items, center); --gap: 12px; --row-gap: 12px; --column-gap: 12px; }
.wr-app .wr-header__nav   { display: flex !important; align-items: var(--align-items, center); --gap: 32px; --row-gap: 32px; --column-gap: 32px; }

/* Hello-Theme rendert den Page-Title (.entry-title) automatisch vor
   dem Content. Auf Brand-Pages mit .wr-app haben wir bereits einen
   Hero mit eigenem H1 — der Theme-Title ist redundant und stört das
   Layout (riesiges "Page-Title-Banner" oberhalb des Heros). */
body.wr-app .entry-title,
body.wr-app .page-header {
  display: none !important;
}

/* ============================================================
   BRAND TYPOGRAPHY DEFAULTS
   ------------------------------------------------------------
   Elementor/Plugins setzen Headings default auf Bebas Neue oder
   Avenir Next LT Pro. Diese Regel SETZT die Brand-Schrift als
   Default — ohne !important, damit Editor-Typography (per-element
   Spec ~ 0,4,0) zuverlässig gewinnen kann.

   Specificity: body.wr-app + element-tag/class = (0,2,1) — schlägt
   typische Plugin-Selektoren (.theme-x h1 = 0,1,1) und Elementor-
   Framework-Defaults (.elementor-heading-title = 0,1,0), verliert
   sauber gegen Editor-per-Element-CSS.
   ============================================================ */
body.wr-app h1, body.wr-app h2, body.wr-app h3,
body.wr-app h4, body.wr-app h5, body.wr-app h6,
body.wr-app .elementor-heading-title {
  font-family: var(--wr-font-display);
}
body.wr-app, body.wr-app p, body.wr-app li,
body.wr-app .elementor-widget-text-editor,
body.wr-app .elementor-widget-text-editor p {
  font-family: var(--wr-font-sans);
}

/* ============================================================
   TEXT-EDITOR — EINHEITLICHER, EDITOR-STEUERBARER STANDARD
   ------------------------------------------------------------
   Typo-Defaults sitzen am WIDGET, der innere <p> ERBT alles.
   Dadurch gewinnt deine Elementor-Editor-Typo (Größe/Gewicht/
   Zeilenhöhe/Laufweite/Farbe/Umwandlung — Elementor schreibt sie
   ans Widget, Spec 0,3,0) IMMER gegen die Bundle-Defaults (0,2,0).
   Zwei gleich eingestellte Text-Blöcke rendern damit identisch.
   Farbe adaptiv via --wr-text-fg (dunkel auf hellen, hell auf
   dunklen Sektionen). Komponenten-Defaults (Cards/Leads/…) sitzen
   ebenfalls am Widget (weiter unten) und bleiben als Ausgangspunkt.
   ============================================================ */
/* NIEDRIGSTER Default (Spec 0,1,0) → JEDE Komponenten-Regel (Cards/Leads,
   0,1,0–0,2,0 weiter unten) gewinnt und behält ihre designte Größe/Farbe als
   Ausgangspunkt. Editor (0,3,0) gewinnt über alles. Plain-Text-Editoren ohne
   Komponenten-Klasse fallen auf diesen 16px-Standard. (Bundle nur auf Brand-
   Pages geladen → unscoped `.elementor-widget-text-editor` ist ok.) */
.elementor-widget-text-editor {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--wr-text-fg, var(--wr-cool-white));
}
body.wr-app .elementor-widget-text-editor p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Hero-Subtext — explizite Größe (Widget-Typography greift nicht
   zuverlässig durch Elementor-Page-CSS-Cache).
   Spec (0,3,0) ohne !important → Editor-Override gewinnt. */
/* Hero-Subtext: Defaults auf dem WIDGET (Spec 0,2,0), damit Elementors
   Text-Widget-Typo (.elementor-{pid} .elementor-element-{eid}, Spec 0,3,0)
   sie überschreibt — Größe/Zeilenhöhe/Farbe also nativ im Editor änderbar.
   Der innere <p> ERBT vom Widget (inherit) statt selbst font-size/color zu
   setzen; ein direktes `p { font-size }` (auch das globale `.wr-body, p`,
   0,0,1) würde sonst Elementors Vererbung blockieren.
   Breite weiterhin nativ steuerbar (kein max-width). */
.wr-ga-hero .elementor-widget-text-editor {
  font-size: 22px;
  line-height: 1.45;
  color: var(--wr-cool-white);
}
.wr-app .wr-ga-hero .elementor-widget-text-editor p {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}


/* ============================================================
   ELEMENTOR-WIDGET-WRAPPER ADAPTER
   ------------------------------------------------------------
   Elementor wraps each widget like:
     <div class="elementor-element {our-classes} elementor-widget-{type}">
       <div class="elementor-widget-container">
         <h1 class="elementor-heading-title ..."/>  ← actual element
       </div>
     </div>
   Our design-classes land on the outer `.elementor-element`. To style
   the inner element (the <h1>/<a>/<p>), we re-target through descendants.
   ============================================================ */

/* — Hero claim — */
.elementor-widget-heading.wr-ga-hero__claim .elementor-heading-title {
  /* display:block macht den Umbruch tag-unabhängig — egal ob der HTML-Tag
     h1/p/div (block) ODER span (inline) ist, das Heading verhält sich immer
     wie ein Block (füllt die Breite, bricht sauber um). Ohne das bricht ein
     span-Tag inline um ("Unsauberheit"). Empfehlung bleibt aber: HTML-Tag = H1
     (SEO: genau eine H1 pro Seite, der Hero-Claim ist sie). */
  display: block;
  font-family: var(--wr-font-display);
  font-weight: 900;
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  /* text-wrap ist VERERBT — das Design-System setzt `balance` auf diverse
     Heading-Vorfahren, das Hero-Heading erbt es. `balance` balanciert beide
     Zeilen gleich lang → Zeile 1 füllt NICHT die volle Breite. Explizit auf
     `wrap` (=normal) setzen, damit Zeile 1 bis zum rechten Rand läuft und
     erst dann umbricht. Direkt am Element gesetzt → schlägt die Vererbung. */
  text-wrap: wrap;
}
.elementor-widget-heading.wr-ga-hero__claim mark {
  /* CI: NUR Gradient-Text — die frühere halbtransparente Box-Ebene (Marker)
     ist entfernt. Heller Verlauf (Glow→Magenta→Wine) statt Brand-Gradient:
     der endete auf Dark-Violett und machte das Wortende auf dunklem
     Video-Hintergrund unlesbar. */
  background-image: linear-gradient(90deg, #FF4F9D 0%, #C73B7E 55%, #7E2A5A 100%);
  /* Alt-Marker-Reste neutralisieren: irgendeine generische mark-Regel legt
     sonst eine helle BG-Fläche + Padding hinter das Wort (Startseite). */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* — Section-Head: eyebrow + h2 + sub —
   WICHTIG (Bernds Regel: Styling ans Ziel-Element, nie an den Wrapper):
   Der Heading-Stil hängt an der HEADING-EIGENEN Klasse `.wr-section-title`
   (der alte Wrapper-Selektor `.wr-ga-section__head …` bleibt nur als Fallback,
   damit Headings ohne Klasse nicht nackt sind). Dadurch sieht die Überschrift
   IDENTISCH aus, egal ob sie in einem Container hängt oder nicht.
   Die hell/dunkel-Farbe läuft über die vererbte Variable `--wr-heading-fg`,
   die Light-Sections setzen — Kontextfarbe ohne den Stil an den Container zu
   binden. display:block macht den Umbruch tag-unabhängig. */
.wr-ga-section__head .elementor-heading-title,
.elementor-widget-heading.wr-section-title .elementor-heading-title {
  display: block;
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-heading-fg, var(--wr-white));
  line-height: 1.05;
  text-wrap: wrap;
}
.wr-ga-section__head .elementor-widget-text-editor,
.elementor-widget-text-editor.wr-section-sub p {
  font-size: 15px;
  color: var(--wr-heading-sub, var(--wr-muted));
  /* max-width entfernt 2026-06-12 — Content-Breite nativ steuerbar (Bernd) */
  line-height: 1.6;
  margin: 0;
}

/* ADAPTIVE HEADLINE-FARBE FÜR ALLE HEADINGS — auch ohne .wr-section-title und
   ohne section__head-Hülle (z.B. Founder-Name oder ein frisch eingefügtes
   natives H2). Weiß auf Dunkel (Default), dunkel in Light-Sections (die setzen
   --wr-heading-fg). NUR color, Specificity (0,2,0): Editor-Per-Widget-Farbe
   (0,3,0) UND spätere Card-Title-Regeln gewinnen weiterhin. Die Schrift selbst
   (Family/Größe/Weight/Uppercase) kommt global aus dem Theme-Style. So sieht
   jede native Headline – egal wo eingefügt – kontextrichtig aus. */
.elementor-widget-heading .elementor-heading-title {
  color: var(--wr-heading-fg, var(--wr-white));
}
/* Light-Sections setzen die Farb-Variablen → Kontextfarbe via Vererbung,
   der Stil bleibt aber an der jeweiligen Klasse/am Element. --wr-text-fg
   sorgt dafür, dass AUCH simpler Plain-Text (Text-Editor ohne Klasse) in
   einer Light-Section lesbar dunkel wird statt cool-white (unsichtbar). */
.is-light,
.wr-home-founder,
.wr-home-arbeit,
.wr-ga-pdf {
  --wr-heading-fg: var(--wr-light-fg);
  --wr-heading-sub: var(--wr-light-muted);
  --wr-text-fg: var(--wr-light-fg);
}
/* Dunkle Karten INNERHALB heller Sektionen (z.B. .wr-ga-problem auf .is-light):
   Vars zurück auf Dark-Mode → Titel/Text wieder hell + lesbar auf dem dunklen
   Karten-BG. Sonst zieht der Section-Light-Kontext den Text dunkel-auf-dunkel. */
.is-light .wr-ga-problem {
  --wr-heading-fg: var(--wr-white);
  --wr-heading-sub: var(--wr-muted);
  --wr-text-fg: var(--wr-cool-white);
  background: #0B0814;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--wr-radius-lg);
}
/* Audit-Panels (is-light, weiß): Checklisten-/Listen-Text war cool-white =
   unsichtbar auf Weiß → auf Ink. Die .wr-ga-checklist-Regel (cool-white, für den
   DUNKLEN Hero korrekt) braucht hier eine spezifischere is-light-Override (0,5,0). */
.is-light .wr-ga-audit__panel .elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-text,
.is-light .wr-ga-audit__panel .elementor-icon-list-text { color: var(--wr-light-fg); }

/* Approach-Section Hintergrund via Bundle (statt nativ wie Founder/Arbeit):
   das native Speichern (update-container) sprengt aktuell das PHP-Memory-
   Limit der Local-Site. Spec (0,1,0) → ein nativer Editor-BG (0,2,0) gewinnt
   weiterhin → bleibt editor-pflegbar. (Sobald PHP-Memory erhöht ist, kann der
   BG nativ gesetzt + diese Zeile entfernt werden.) */
.wr-home-approach { background-color: var(--wr-light-bg); }

/* GLOBALE Body-Text-Farbe über Variable — adaptiert an Light/Dark-Sections.
   Vorher: `.wr-body, p { color: cool-white }` (fix für Dark) machte Plain-Text
   in Light-Sections unsichtbar. Jetzt: Default cool-white (Dark), Light-Sections
   setzen --wr-text-fg auf dunkel. Spezifische Element-Farben (Cards, Hero etc.)
   gewinnen weiterhin per höherer Specificity. */
body.wr-app p {
  color: var(--wr-text-fg, var(--wr-cool-white));
}

/* — Generic h3 / h4 inside card-like containers — einheitliche Card-Title-Skala
   (site-wide konsistent mit den wr-home-* Cards: 20px @ 600) — */
.wr-ga-principle .elementor-heading-title,
.wr-ga-process__step .elementor-heading-title,
.wr-ga-case .elementor-heading-title,
.wr-ga-audit__panel .elementor-heading-title,
.wr-ga-type .elementor-heading-title,
.wr-ga-flag .elementor-heading-title,
.wr-ga-pricing__card .elementor-heading-title,
.wr-ga-pdf__title.elementor-widget-heading .elementor-heading-title {
  font-family: var(--wr-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--wr-white);
  line-height: 1.2;
}
.is-light .wr-ga-case .elementor-heading-title,
.is-light .wr-ga-audit__panel .elementor-heading-title,
.is-light .wr-ga-pricing__card .elementor-heading-title,
.is-light .wr-ga-pdf__title .elementor-heading-title { color: var(--wr-light-fg); }

/* — Card text bodies — einheitliche Body-Skala (site-wide konsistent: 15px) — */
.wr-ga-principle .elementor-widget-text-editor,
.wr-ga-process__step .elementor-widget-text-editor,
.wr-ga-case .elementor-widget-text-editor,
.wr-ga-type .elementor-widget-text-editor,
.wr-ga-flag .elementor-widget-text-editor {
  font-size: 15px;
  line-height: 1.55;
  color: var(--wr-cool-white);
  margin: 0;
}
.is-light .wr-ga-case .elementor-widget-text-editor { color: var(--wr-light-muted); }

/* ============================================================
   Button-Wrapper-Reset — wichtig für Elementor-Kontext.
   tokens.css definiert .wr-btn als Plain-HTML-Button mit padding,
   bg und border. In Elementor landet die Klasse aber auf dem
   WIDGET-Container (.elementor-element.elementor-widget.wr-btn) —
   dadurch hat der Widget-Wrapper das Button-Styling UND das
   innere .elementor-button bekommt nochmal Styling von den
   .elementor-widget-button.wr-btn .elementor-button-Regeln unten.
   → Doppelt-gestylte Schichten ("Container um Button").
   Lösung: Widget-Wrapper komplett transparent + kein Padding.
   Alles Visuelle (bg, border, padding, hover) gehört NUR an
   das innere .elementor-button.
   ============================================================ */
.wr-app .elementor-widget.wr-btn,
.wr-app .elementor-widget.wr-btn--primary,
.wr-app .elementor-widget.wr-btn--secondary,
.wr-app .elementor-widget.wr-btn--ghost,
.wr-app .elementor-widget.wr-btn--link {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* — Native buttons → re-style inner <a class="elementor-button"> — */
.elementor-widget-button.wr-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--wr-font-sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--wr-radius-md);
  border: 1px solid transparent;
  transition: box-shadow var(--wr-dur-base) var(--wr-ease-out),
              background var(--wr-dur-base) var(--wr-ease-out),
              border-color var(--wr-dur-base) var(--wr-ease-out);
  white-space: nowrap;
  background: transparent;
}
.elementor-widget-button.wr-btn--primary .elementor-button {
  background: var(--wr-magenta) !important;
  color: var(--wr-white) !important;
}
/* CI: feiner weißer Kontrast-Ring am HERO-Primary, damit er über dem weichen
   Verlaufs-Scrim nicht „absäuft". Nur im Hero (auf hellen Sektionen würde ein
   weißer Ring stören). */
.wr-ga-hero .wr-btn--primary .elementor-button {
  border: 1px solid rgba(255,255,255,.65) !important;
}
.elementor-widget-button.wr-btn--primary .elementor-button:hover {
  background: var(--wr-magenta) !important;
  /* Exakt der Header-Button-Hover (Bernds Vorbild „Missionsanfrage"):
     inset-Highlight + 1px-Kontur + Rundum-Glow */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 0 1px rgba(11,8,20,.5), 0 0 32px rgba(255,79,157,.7) !important;
}
.elementor-widget-button.wr-btn--secondary .elementor-button {
  background: transparent !important;
  color: var(--wr-white) !important;
  border-color: rgba(255,255,255,.6) !important;
}
.elementor-widget-button.wr-btn--secondary .elementor-button:hover {
  border-color: var(--wr-white) !important;
  background: rgba(255,255,255,.04) !important;
  box-shadow: 0 0 36px 6px rgba(255,79,157,.45) !important;
}
/* Ghost button — translucent fill, subtle border */
.elementor-widget-button.wr-btn--ghost .elementor-button {
  background: var(--wr-glass) !important;
  color: var(--wr-white) !important;
  border-color: var(--wr-line) !important;
}
.elementor-widget-button.wr-btn--ghost .elementor-button:hover {
  background: var(--wr-glass-strong) !important;
  border-color: var(--wr-line-strong) !important;
  box-shadow: 0 0 24px 4px rgba(255,79,157,.3) !important;
}
/* Ghost-Button auf heller Sektion: dunkle Outline + Magenta-Text statt weiß (sonst unsichtbar) */
.is-light .wr-btn--ghost .elementor-button {
  background: transparent !important; color: var(--wr-magenta-deep) !important; border-color: rgba(30,26,62,.28) !important;
}
.is-light .wr-btn--ghost .elementor-button:hover {
  border-color: var(--wr-magenta) !important; color: var(--wr-magenta) !important; box-shadow: 0 0 24px 4px rgba(199,59,126,.18) !important;
}
/* Final-CTA: weisser Button auf Magenta-Gradient */
.elementor-widget-button.wr-btn--onwhite .elementor-button {
  background: #FFFFFF !important; color: #7E2A5A !important; border-color: #FFFFFF !important;
}
.elementor-widget-button.wr-btn--onwhite .elementor-button:hover {
  box-shadow: 0 14px 40px -12px rgba(0,0,0,.5) !important;
}
/* Button auf Magenta-Flaeche (Plugin-Card): weisser Outline-Button */
.elementor-widget-button.wr-btn--onmag .elementor-button {
  background: rgba(255,255,255,.12) !important; color: #FFFFFF !important; border-color: rgba(255,255,255,.6) !important;
}
.elementor-widget-button.wr-btn--onmag .elementor-button:hover {
  background: rgba(255,255,255,.2) !important; border-color: #FFFFFF !important;
}
/* Elementor wraps the button label in span.elementor-button-text — make
   sure it inherits the uppercase / spacing styles from the parent. */
.elementor-widget-button.wr-btn .elementor-button-text {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

/* CTA-Gruppen: zwei Buttons nebeneinander in einer Reihe. Wichtig: Das
   build-page-Tool wickelt jedes Button-Widget in einen zusätzlichen
   `.e-con`-Wrapper ein, dem Elementor dann `--width:50%` zuweist. Das
   stapelt vertikal in engen Spalten, weil die 50%-Wrapper jeweils mehr
   Breite einfordern als verfügbar. Wir zwingen alle direkten Kinder
   (Widget oder Wrapper-Container) auf `width:auto` und nehmen die
   CSS-Variable `--width` mit, weil Elementor die in seiner generierten
   per-page-CSS konsumiert. */
.elementor-element.wr-ga-hero__ctas,
.elementor-element.wr-home-hero__ctas,
.elementor-element.wr-std-hero__ctas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  --gap: 12px; --row-gap: 12px; --column-gap: 12px;
  align-items: var(--align-items, center);
  /* Reiner Layout-Wrapper → 0 Padding als Default (über Variablen, also
     editor-überschreibbar). Sonst gibt Elementors .e-con-Default (10px)
     der Button-Reihe Innenabstand und die zwei Buttons brechen in engeren
     Spalten um (Content-Breite zu knapp). margin-top ebenfalls als Variable. */
  --padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
  --margin-top: 8px;
}
.elementor-element.wr-ga-hero__ctas > .elementor-element,
.elementor-element.wr-home-hero__ctas > .elementor-element,
.elementor-element.wr-std-hero__ctas > .elementor-element {
  width: auto !important;
  --width: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Button-Refinements — etwas mehr Atmen, leicht angehobenes Padding,
   subtile Letter-Spacing-Korrektur. Vorher wirkten die Buttons
   gedrungen ("komisch"). Bundle-owned Brand-Defaults — Editor-Settings
   am Button überschreiben per höherer Specificity ohne !important
   Wettkampf. */
.elementor-widget-button.wr-btn .elementor-button {
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.08em;
  min-height: 48px;
  line-height: 1;
}
/* secondary state refinements are above in the wr-btn--secondary block */

/* ============================================================
   EYEBROW-PILL — Native Heading-Widget-Variante
   ------------------------------------------------------------
   Eyebrows sind native Elementor-Heading-Widgets mit Class
   `wr-eyebrow-pill` (+ optional `wr-eyebrow-pill--magenta`).
   Vorteil ggü. HTML-Widget: Bernd kann den Label-Text direkt
   im Editor pflegen.

   Pattern analog zum wr-btn: Widget-Wrapper bleibt visuell leer,
   die ganze Pill (BG, Border, Padding, Mono-Font) sitzt auf der
   inneren `.elementor-heading-title`. Der Dot ist `::before`.

   Specificity:
     - Widget-Wrapper-Reset: .wr-app + .elementor-widget.wr-eyebrow-pill
       = (0,3,0) — Editor per-element CSS (0,3,0) gewinnt via Cascade-Order.
     - Pill auf Heading-Title: .elementor-widget-heading.wr-eyebrow-pill
       + .elementor-heading-title = (0,3,0); Magenta-Variante (0,4,0).
       Editor-Color/Font-Picker (Spec ≥ (0,3,1) via per-element-Selektor)
       gewinnt sauber.
   ============================================================ */
.wr-app .elementor-widget.wr-eyebrow-pill {
  padding: 0;
  background: transparent;
  border: none;
}
.elementor-widget-heading.wr-eyebrow-pill .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--wr-black);
  color: var(--wr-white);
  font-family: var(--wr-font-mono); /* Design-Anweisung: Eyebrow = Geist Mono 11px */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--wr-radius-pill);
  border: 1px solid var(--wr-line);
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  margin: 0;
  line-height: 1.2;
}
.elementor-widget-heading.wr-eyebrow-pill .elementor-heading-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wr-magenta-glow);
  flex-shrink: 0;
}
.elementor-widget-heading.wr-eyebrow-pill.wr-eyebrow-pill--magenta .elementor-heading-title {
  background: var(--wr-magenta);
  border-color: transparent;
}

/* Hero __claim: Default ohne !important — Editor-Color-Picker MUSS gewinnen.
   Specificity (0,3,0); Editor per-element CSS (0,4,0) überschreibt. */
.elementor-widget-heading.wr-ga-hero__claim .elementor-heading-title {
  color: var(--wr-white);
  /* Max so bemessen, dass "KONSUMGÜTERMARKEN." (längstes Wort) in die
     1.6fr-Spalte passt — sonst Umbruch mitten im Wort. */
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.02;
  letter-spacing: 0.015em;
}

/* Hero kompakt (SOLL-Abgleich): Subline 18px/560px statt 22px/voll,
   Stat-Band näher an den Hero — mehr Inhalt above the fold. */
.elementor-element.wr-ga-hero__sub,
.elementor-element.wr-ga-hero__sub p,
.elementor-element.wr-ga-hero__sub .elementor-heading-title {
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
}
.wr-ga-stats { margin-top: 24px; }

/* Constrain hero-claim and the entire left column so long compound
   words (Konsumgütermarken) can't push into the side-card. */
.elementor-element.wr-ga-hero__grid > *:first-child {
  min-width: 0 !important;
  max-width: 100% !important;
  /* overflow:hidden NICHT auf der Spalte — clippte sonst den Button-Glow der
     CTAs (Bernd 2026-06-12). Wort-Überlauf-Schutz sitzt jetzt am Claim selbst. */
}
.wr-ga-hero__claim .elementor-heading-title { overflow-wrap: anywhere; }
.elementor-element.wr-ga-hero__grid > *:first-child .elementor-heading-title,
.elementor-element.wr-ga-hero__grid > *:first-child .elementor-widget-container {
  max-width: 100% !important;
  /* KEIN break-word: brach mitten in "KONSUMGÜTERMARKEN" (User-Report).
     Ganze Wörter umbrechen; die Claim-Größe ist so bemessen, dass das
     längste Wort in die Spalte passt. */
  overflow-wrap: normal !important;
}

/* ============================================================
   .wr-container — zentrierter Inhalts-Container (max 1240px).
   Setzt Centering + Gutter über die CSS-VARIABLEN, die Elementor
   selbst konsumiert (--margin-left/right → margin-inline,
   --padding-left/right → padding-inline). Dadurch:
     • Default: zentriert, 24px Gutter.
     • Editor-Override (Innen-/Außenabstand am Container) gewinnt,
       weil Elementor per-Element-CSS Spec (0,3,0) > unsere (0,2,0).
   KEIN !important auf margin/padding mehr — sonst würde jede
   Editor-Eingabe stumm überschrieben (Bernds Befund).
   max-width bleibt direkte Property (== --wr-content-max default),
   ohne !important, damit auch das überschreibbar bleibt.
   ============================================================ */
.elementor-element.wr-container,
.wr-app .wr-container {
  /* Defaults als Variablen — Editor (Spec 0,3,0) überschreibt unsere (0,2,0).
     Elementor schreibt Innen-/Außenabstand exakt in diese --padding-* /
     --margin-*-Variablen. */
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: var(--wr-gutter);
  --padding-right: var(--wr-gutter);
  --margin-top: 0;
  --margin-bottom: 0;
  --margin-left: auto;
  --margin-right: auto;
  max-width: var(--wr-content-max);
  /* tokens.css setzt padding/margin als physische Shorthand (Spec 0,1,0)
     und hebelt damit Elementors Variablen-Boxmodell aus. Wir re-deklarieren
     die Shorthand hier (Spec 0,2,0 > tokens.css) gespeist aus den Elementor-
     Variablen — so greifen Editor-Innen-/Außenabstand wieder durch. */
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

/* ============================================================
   FOOTER (Theme-Builder #467) — „Hintergrund full-width, Inhalt boxed".
   Der dunkle BG (#0B0814) sitzt am ÄUSSEREN .e-con und bleibt randlos über
   die volle Viewport-Breite. Nur der INHALT (.e-con-inner) wird auf die
   Site-Content-Breite (--wr-content-max, 1240) zentriert begrenzt — sonst
   läuft er auf Kit-1300 und steht 30px weiter links als der restliche
   Seiteninhalt (linke Kante fluchtet dann nicht). Höhere Spezifität als
   Elementors Boxed-Default → kein !important nötig (editor-überschreibbar).
   24px-Gutter liefert das vorhandene Footer-Außen-Padding.
   ============================================================ */
body.wr-app .elementor-location-footer .e-con-boxed > .e-con-inner {
  max-width: var(--wr-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* CTA-Eyebrow: Linie davor wie im Hero (Review D1). Klasse .wr-cta-eyebrow
   am Eyebrow-Heading; Linie 32×1px rgba(255,255,255,.4), gap 14px. */
.wr-cta-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wr-cta-eyebrow .elementor-heading-title::before {
  content: "";
  flex: 0 0 32px;
  height: 1px;
  background: rgba(255,255,255,.4);
}

/* ============================================================
   GRID LAYOUTS — Elementor's .e-flex is direct on the container,
   so display:grid from our CSS classes needs !important.
   ============================================================ */
.elementor-element.wr-ga-hero__grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr !important;
  --gap: 64px; --row-gap: 24px; --column-gap: 64px;
  /* Spalten füllen die Zeilenhöhe → vertikale Ausrichtung steuerbar je Spalte
     über deren natives justify-content (Editor gewinnt), statt hier hart oben zu pinnen. */
  align-items: var(--align-items, stretch);
}
.elementor-element.wr-ga-problems__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-principles__grid {
  display: grid !important;
  /* auto-fit statt fester 3 Spalten: die Spaltenzahl folgt der Kartenzahl
     (2 Karten → 2×50%, 4 → 4×25%), immer randbündig & gleichbreit. In einem
     Grid bestimmt das Template die Breite, NICHT die Item-width — darum greift
     ein 50%-Container-Setting hier prinzipbedingt nicht (Bernd, 2026-06-12). */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-audit__grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.elementor-element.wr-ga-process__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-cases__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-types__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-flags__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  --gap: 12px; --row-gap: 12px; --column-gap: 12px;
}
.elementor-element.wr-ga-pricing__grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.elementor-element.wr-ga-pdf__grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  --gap: 64px; --row-gap: 64px; --column-gap: 64px;
  align-items: var(--align-items, center);
}
.elementor-element.wr-ga-call__grid {
  display: grid !important;
  grid-template-columns: 1fr 1.4fr !important;
  --gap: 64px; --row-gap: 64px; --column-gap: 64px;
  align-items: var(--align-items, start);
}
.elementor-element.wr-ga-pricing__cards {
  display: grid !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}

/* Grid children: allow them to fill the cell. Elementor's build spec
   sets `--width: 33.33%` (or similar) on each child via flex-row math;
   that 33.33% then applies inside the grid cell and shrinks the card
   visibly. We force `--width: 100%` so the variable resolves to cell-
   width, and add `min-width: 0` to allow proper grid-sizing.
   ALLE Grid-Containers müssen hier auflisten, sonst Cards verschwinden. */
.elementor-element.wr-ga-hero__grid > *,
.elementor-element.wr-ga-problems__grid > *,
.elementor-element.wr-ga-principles__grid > *,
.elementor-element.wr-ga-audit__grid > *,
.elementor-element.wr-ga-process__grid > *,
.elementor-element.wr-ga-cases__grid > *,
.elementor-element.wr-ga-types__grid > *,
.elementor-element.wr-ga-flags__grid > *,
.elementor-element.wr-ga-pricing__grid > *,
.elementor-element.wr-ga-pdf__grid > *,
.elementor-element.wr-ga-call__grid > *,
.elementor-element.wr-home-cases__grid > *,
.elementor-element.wr-home-methods__grid > *,
.elementor-element.wr-home-clusters__grid > *,
.elementor-element.wr-home-entries__grid > *,
.elementor-element.wr-home-trust__grid > *,
.elementor-element.wr-home-founder__grid > *,
.elementor-element.wr-home-limit-args > *,
.elementor-element.wr-std-map-legend > *,
.elementor-element.wr-std-cost-grid > *,
.elementor-element.wr-std-stack-grid > *,
.elementor-element.wr-std-dna-grid > *,
.elementor-element.wr-std-compare > * {
  --width: 100% !important;
  min-width: 0 !important;
  width: auto !important;
}


/* ============================================================
   STARTSEITE — Section-specific classes (.wr-home-*)
   ============================================================ */

/* Hero meta-row under the CTAs */
.wr-home-hero__meta {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 48px;
  font-family: var(--wr-font-mono);
  font-size: 13px;
  color: rgba(255,255,255,.78);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-wrap: wrap;
}
.wr-home-hero__meta span { display: flex; align-items: center; gap: 8px; }
.wr-home-hero__meta .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wr-magenta);
  box-shadow: 0 0 12px var(--wr-magenta);
  animation: pulse 2s ease-in-out infinite;
}

/* Logo wall */
.wr-home-logo-wall-section { border-top: 1px solid var(--wr-line); border-bottom: 1px solid var(--wr-line); background: var(--wr-black); }
/* Padding der Logo-Wall als VARIABLEN (48px kompakt als Default) → editor-
   steuerbar (Innen-/Außenabstand am Container greifen). Darum auch aus der
   96px-Section-Spacing-Liste genommen. */
/* Spezifität BEWUSST niedrig (0,1,0): Elementor schreibt Editor-Padding mit
   (0,2,0) ans Element — der Editor-Regler MUSS gewinnen (Bernd 2026-06-11).
   Default 48px schlägt trotzdem den Framework-Default (Kaskade: Bundle lädt
   nach dem Elementor-Head-CSS). */
.wr-home-logo-wall-section {
  /* NUR die physischen Vars setzen — Elementor mappt selbst auf die
     logischen (--padding-block-start: var(--padding-top)). Wer die
     logischen hier direkt setzt, kappt die Editor-Kette: der Regler
     schreibt --padding-top, gerendert wird aber --padding-block-start. */
  --padding-top: 48px; --padding-bottom: 48px;
  --padding-left: var(--wr-gutter); --padding-right: var(--wr-gutter);
}
/* `.wr-app` + !important auf font-family, weil der globale Brand-Typo-Default
   `.wr-app p { font-family: sans !important }` (0,1,1) sonst die intendierte
   Mono-Schrift des Labels überschreibt. (0,2,0)+!important gewinnt. */
.wr-app .wr-home-logo-wall__label {
  text-align: center; font-family: var(--wr-font-mono) !important;
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--wr-muted); margin-bottom: 24px;
}
/* Uppercase NUR fürs alte HTML-Label (Klasse direkt am <p>). Bei Text-Editor-
   Widgets sitzt die Klasse am Widget-DIV → kein erzwungenes Uppercase, sodass
   die Editor-„Umwandlung" am Text-Editor frei greift (über Vererbung). */
.wr-app p.wr-home-logo-wall__label {
  text-transform: uppercase;
}
/* Label-Stil auch verwendbar, wenn die Klasse auf einem nativen
   Text-Editor-Widget sitzt (statt HTML-Widget). Wichtig: ein globales
   `p { color; font-size }` (colors_and_type.css) + der Sans-Default für
   text-editor-p setzen Farbe/Größe/Font DIREKT am <p> und schlagen die
   Vererbung von der Label-Klasse. Daher hier ALLE Label-Props explizit am
   inneren <p> (Spec 0,3,1 schlägt globales `p` 0,0,1; font-family braucht
   !important gegen den 0,2,1-!important-Sans-Default). */
/* Label-Defaults am WIDGET (Größe/Laufweite) → der <p> erbt sie (globale
   p-inherit-Regel) → Editor-Typo am Widget gewinnt. Font-Mono/Farbe/Zentrierung
   bleiben am <p> (Mono muss den globalen Sans-Default schlagen). text-transform
   bleibt frei → über Editor → Umwandlung steuerbar. */
.elementor-widget-text-editor.wr-home-logo-wall__label {
  font-size: 12px;          /* Spec (0,2,0) → Editor (0,3,0) gewinnt */
  letter-spacing: 0.12em;
}
.wr-app .elementor-widget-text-editor.wr-home-logo-wall__label p {
  font-family: var(--wr-font-mono) !important;
  color: var(--wr-muted);
  text-align: center;
  margin: 0;
}
.wr-app .wr-home-logo-wall,
.elementor-widget-container > .wr-home-logo-wall {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
  align-items: var(--align-items, center);
  width: 100% !important;
}
@media (max-width: 980px) {
  .wr-app .wr-home-logo-wall,
  .elementor-widget-container > .wr-home-logo-wall {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
.wr-home-logo {
  text-align: center; font-family: var(--wr-font-mono);
  font-size: 13px; color: var(--wr-muted); letter-spacing: 0.04em;
  padding: 16px; opacity: .6;
  transition: opacity .3s, color .3s;
}
.wr-home-logo:hover { opacity: 1; color: var(--wr-white); }

/* Limit section */
.wr-home-limit-section { background: radial-gradient(900px 500px at 10% 20%, rgba(199,59,126,.12), transparent 70%); }
.wr-home-limit-section .wr-ga-section__head { text-align: center; align-items: center; }
.wr-home-slots {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 0;
}
.wr-home-slot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wr-font-mono); font-size: 11px; color: var(--wr-magenta);
}
.wr-home-slot.filled {
  background: var(--wr-magenta); color: var(--wr-white);
  box-shadow: 0 0 0 2px rgba(255,79,157,.25), 0 0 12px rgba(255,79,157,.45);
}
.wr-home-slot.talk {
  border: 1px solid var(--wr-magenta-glow);
  background: rgba(199,59,126,.25);
  animation: wr-pulse10 2.2s ease-in-out infinite;
}
.wr-home-slot.open { border: 1px solid rgba(255,79,157,.55); }
@keyframes wr-pulse10 {
  0%,100% { background: rgba(199,59,126,.12); box-shadow: 0 0 4px rgba(255,79,157,.2); }
  50%     { background: rgba(199,59,126,.5);  box-shadow: 0 0 18px rgba(255,79,157,.65); }
}
@media (prefers-reduced-motion: reduce) { .wr-home-slot.talk { animation: none; } }
/* Slot „in Verhandlung" — schattierter Kreis (zwischen belegt und frei);
   sanftes Pulsieren signalisiert die aktive Verhandlung. */
.wr-home-slot.negotiating {
  background: rgba(199,59,126,.32);
  border-color: var(--wr-magenta);
  color: var(--wr-white);
  animation: wr-slot-pulse 1.9s ease-in-out infinite;
}
@keyframes wr-slot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,59,126,0); opacity: .8; }
  50%      { box-shadow: 0 0 14px 2px rgba(199,59,126,.45); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .wr-home-slot.negotiating { animation: none; } }
.wr-home-limit-section .wr-home-limit-lead { font-size: 20px; font-weight: 500; color: var(--wr-text); max-width: 700px; margin: 0 auto; line-height: 1.5; }
.wr-home-limit-section .wr-home-limit-detail { color: var(--wr-cool-white); margin: 24px auto 0; max-width: 700px; }
.elementor-element.wr-home-limit-args {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  --gap: 32px; --row-gap: 32px; --column-gap: 32px;
  text-align: left; margin-top: 64px;
}
.wr-home-limit-arg .elementor-heading-title {
  color: var(--wr-white);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
  margin-bottom: 8px;
}
.wr-home-limit-arg .elementor-widget-text-editor { color: var(--wr-cool-white); font-size: 15px; }
/* Card-Look für die Limit-Args (Senior-Sparring … Ergebnisverantwortung) —
   wie die Entry-Cards: Rahmen, dezenter Hintergrund, Padding, Radius, Hover. */
.wr-home-limit-arg {
  background: var(--wr-surface-glow);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s, transform .3s;
}
.wr-home-limit-arg:hover { border-color: rgba(199,59,126,.45); box-shadow: 0 0 24px rgba(255,79,157,.18); }

/* ============================================================
   STERNEN-ANIMATION — dezente, langsam driftende weiße Punkte
   (zwei Ebenen für Tiefe) als Hintergrund-Layer in ALLEN dunklen
   Sektionen. Marker-Klasse .wr-has-stars an der Sektion, Inhalt
   liegt drüber (z-index:1). Nur im Viewport aktiv (.wr-on via
   IntersectionObserver, JS); reduced-motion = statisch.
   ============================================================ */
.wr-has-stars { position: relative; overflow: hidden; }
.wr-has-stars > .e-con-inner > .elementor-element:not(.wr-st-widget),
.wr-has-stars > .elementor-element:not(.wr-st-widget) { position: relative; z-index: 1; }
.wr-st-widget { position: absolute !important; inset: 0; margin: 0 !important; z-index: 0; pointer-events: none; }
.wr-stars { position: absolute; inset: 0; overflow: hidden; animation: wr-st-tw 8s ease-in-out infinite; animation-play-state: paused; }
.wr-stars::before, .wr-stars::after { content: ""; position: absolute; inset: -50%; background-repeat: repeat; animation-play-state: paused; }
.wr-stars::before { background-image: radial-gradient(2.4px 2.4px at 20% 30%, #fff 0%, rgba(255,255,255,.55) 28%, transparent 60%), radial-gradient(2.8px 2.8px at 68% 58%, #fff 0%, rgba(255,255,255,.55) 26%, transparent 58%), radial-gradient(2px 2px at 42% 82%, #fff 0%, rgba(255,255,255,.5) 30%, transparent 62%), radial-gradient(2.6px 2.6px at 85% 20%, #fff 0%, rgba(255,255,255,.55) 26%, transparent 58%), radial-gradient(1.8px 1.8px at 55% 44%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 34%, transparent 66%), radial-gradient(2.4px 2.4px at 12% 66%, #fff 0%, rgba(255,255,255,.5) 28%, transparent 60%), radial-gradient(2.8px 2.8px at 90% 76%, #fff 0%, rgba(255,255,255,.55) 26%, transparent 58%), radial-gradient(2px 2px at 33% 14%, #fff 0%, rgba(255,255,255,.5) 30%, transparent 62%), radial-gradient(2.2px 2.2px at 76% 38%, #fff 0%, rgba(255,255,255,.5) 28%, transparent 60%); background-size: 440px 440px; }
.wr-stars::after { background-image: radial-gradient(1.6px 1.6px at 15% 50%, rgba(255,255,255,.7), transparent 64%), radial-gradient(1.4px 1.4px at 60% 25%, rgba(255,255,255,.6), transparent 66%), radial-gradient(1.6px 1.6px at 80% 65%, rgba(255,255,255,.6), transparent 64%), radial-gradient(1.4px 1.4px at 45% 90%, rgba(255,255,255,.6), transparent 66%), radial-gradient(1.6px 1.6px at 28% 72%, rgba(255,255,255,.55), transparent 64%), radial-gradient(1.4px 1.4px at 92% 38%, rgba(255,255,255,.55), transparent 66%), radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.6), transparent 64%); background-size: 300px 300px; }
@keyframes wr-st-zoom { 0% { transform: scale(.85); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes wr-st-tw { 0%,100%{opacity:.95} 50%{opacity:.72} }
/* „Flug durch den Raum": sanfter Zoom-Crossfade (zwei Ebenen, halber Versatz -> nahtlos) ersetzt den seitlichen Drift */
.wr-stars::before, .wr-stars::after { transform-origin: center; animation: wr-st-zoom 26s linear infinite; animation-play-state: paused; }
.wr-stars::after { animation-delay: -13s; }
.wr-stars.wr-on, .wr-stars.wr-on::before, .wr-stars.wr-on::after { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .wr-stars, .wr-stars::before, .wr-stars::after { animation: none; } .wr-stars::before, .wr-stars::after { opacity: .9; transform: none; } }
.wr-app .e-con.wr-home-limit-arg {
  --padding-top: 32px; --padding-right: 32px; --padding-bottom: 32px; --padding-left: 32px;
  --padding-block-start: 32px; --padding-block-end: 32px;
  --padding-inline-start: 32px; --padding-inline-end: 32px;
  border-radius: var(--wr-radius-lg);
}

/* Founder — minimal responsive grid (only thing the global reset block blocks
   from doing natively: width is locked to 100% inside .wr-app). Mobile stack
   ensured. */
.elementor-element.wr-home-founder__grid {
  display: grid !important;
  grid-template-columns: 380px 1fr !important;
  --gap: 64px; --row-gap: 64px; --column-gap: 64px;
  align-items: var(--align-items, start);
}
@media (max-width: 768px) {
  .elementor-element.wr-home-founder__grid {
    grid-template-columns: 1fr !important;
    --gap: 32px; --row-gap: 32px; --column-gap: 32px;
  }
  .wr-home-founder__portrait {
    width: 280px;
    height: 280px;
    margin: 0 auto;
  }
}
.wr-home-founder__portrait {
  position: relative; aspect-ratio: 1; width: 100%; border-radius: var(--wr-radius-md);
  background:
    radial-gradient(circle at 30% 30%, rgba(199,59,126,.6) 0%, rgba(126,42,90,.3) 50%, transparent 80%),
    linear-gradient(135deg, var(--wr-violet-deep), var(--wr-black));
  border: 1px solid rgba(199,59,126,.3);
  box-shadow: 0 0 40px rgba(199,59,126,.15);
  overflow: hidden;
}
.wr-home-founder__portrait::after {
  content: 'BK'; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--wr-font-display); font-style: normal; /* MD: kein Italic-Akzent */
  font-size: 96px; color: rgba(255,255,255,.4); font-weight: 800;
}
.wr-home-founder__portrait .placeholder-note {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-family: var(--wr-font-mono); font-size: 10px;
  color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .1em;
}
.wr-home-founder__lead { font-size: 20px; font-weight: 500; color: var(--wr-text); line-height: 1.5; }
.wr-home-founder__detail { color: var(--wr-muted); margin-top: 24px; }
/* Founder-Creds = native Elementor Icon-List (inline), Items als Pills.
   Elementor-Defaults (Inline-Margin, Divider, Icon-Span) neutralisiert. */
.wr-home-founder__creds .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; }
.wr-home-founder__creds .elementor-icon-list-item {
  margin: 0; padding: 6px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-pill);
}
.wr-home-founder__creds .elementor-icon-list-item:after { display: none; content: none; }
.wr-home-founder__creds .elementor-icon-list-icon { display: none; }
.wr-home-founder__creds .elementor-icon-list-text {
  padding: 0; font-family: var(--wr-font-mono); font-size: 11px;
  color: var(--wr-text); letter-spacing: 0.04em;
}
/* Founder-Links = native Icon-List (inline), Items als Text-Links */
.wr-home-founder__links .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 24px; margin: 32px 0 0; padding: 0; }
.wr-home-founder__links .elementor-icon-list-item { margin: 0; }
.wr-home-founder__links .elementor-icon-list-item:after { display: none; content: none; }
.wr-home-founder__links .elementor-icon-list-icon { display: none; }
.wr-home-founder__links .elementor-icon-list-item > a,
.wr-home-founder__links .elementor-icon-list-text {
  color: var(--wr-accent-glow); text-decoration: none;
  font-family: var(--wr-font-mono); font-size: 13px; letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
}
.wr-home-founder__links .elementor-icon-list-item > a:hover { border-color: var(--wr-magenta-glow); }

/* Cases */
.elementor-element.wr-home-cases__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.wr-home-case {
  background: var(--wr-surface-glow);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: border-color .3s, transform .3s;
}
.wr-home-case:hover { border-color: rgba(199,59,126,.4); box-shadow: 0 0 24px rgba(255,79,157,.14); }
.wr-home-case .elementor-heading-title { font-size: 20px; font-weight: 600; }
.wr-home-case__logo {
  font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--wr-muted); margin-bottom: 12px;
}
.wr-home-case__meta {
  font-family: var(--wr-font-mono); font-size: 12px; color: var(--wr-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin: 8px 0 16px;
}
.wr-home-case .elementor-widget-text-editor { font-size: 15px; color: var(--wr-text); }
.wr-home-case__result {
  padding: 12px 16px; background: rgba(199,59,126,.08);
  border-left: 2px solid var(--wr-magenta);
  border-radius: 0 var(--wr-radius-sm) var(--wr-radius-sm) 0;
  margin: 16px 0;
}
.wr-home-case__result .result-label {
  font-family: var(--wr-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wr-accent-glow); margin-bottom: 4px;
}
.wr-home-case__result .result-value {
  font-family: var(--wr-font-display); font-size: 24px;
  font-weight: 800; font-style: normal; color: var(--wr-white); /* MD: Zahlen Geist 800, kein Italic */
}
.wr-home-case__link {
  color: var(--wr-accent-glow); text-decoration: none;
  font-family: var(--wr-font-mono); font-size: 13px;
  letter-spacing: 0.04em;
}
.wr-home-cases__note {
  text-align: center; margin-top: 48px;
  font-family: var(--wr-font-mono); font-size: 13px;
  letter-spacing: 0.04em; color: var(--wr-muted);
}

/* Methods (Arbeitsweise) */
.elementor-element.wr-home-methods__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.wr-home-method {
  position: relative;
  border: 1px solid var(--wr-line);
  background: rgba(255,255,255,.02);
  text-align: left;
  align-items: flex-start;  /* override Elementor's default centering of flex-items */
}
.wr-home-method__num {
  font-family: var(--wr-font-mono); font-style: normal; /* MD: Indizes = Mono klein, keine 48px-Ziffern */
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--wr-magenta); line-height: 1;
  font-weight: 600; margin-bottom: 16px;
}
.wr-home-method .elementor-heading-title { font-size: 20px; font-weight: 600; }
.wr-home-method .elementor-widget-text-editor { font-size: 15px; color: var(--wr-muted); }

/* Clusters (Leistungen) */
.elementor-element.wr-home-clusters__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.wr-home-cluster {
  background: var(--wr-surface-glow);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.wr-home-cluster__num {
  font-family: var(--wr-font-mono); font-size: 11px;
  color: var(--wr-magenta); letter-spacing: 0.12em; margin-bottom: 16px;
}
.wr-home-cluster .elementor-heading-title { font-size: 20px; font-weight: 600; }
.wr-home-cluster .elementor-widget-text-editor { font-size: 15px; color: var(--wr-text); }
.wr-home-cluster__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.wr-home-cluster__pill {
  color: var(--wr-accent-glow); text-decoration: none;
  font-family: var(--wr-font-mono); font-size: 12px;
  letter-spacing: 0.04em; padding: 6px 12px;
  border: 1px solid rgba(255,79,157,.3);
  border-radius: var(--wr-radius-pill);
  transition: all .3s;
}
.wr-home-cluster__pill:hover { background: var(--wr-magenta); color: var(--wr-white); }
.wr-home-cluster-note {
  text-align: center; margin-top: 48px;
  font-family: var(--wr-font-sans); font-style: normal; /* MD: kein Italic */
  font-size: 16px; color: var(--wr-muted);
}
.wr-home-cluster-note .accent { color: var(--wr-accent-glow); }

/* Disqualifikation */
.wr-home-disqualify__box {
  background: rgba(0,0,0,.3);
  border: 1px solid var(--wr-line);
  margin-top: 32px;
}
.wr-app .e-con.wr-home-disqualify__box {
  --padding-top: 48px;
  --padding-right: 48px;
  --padding-bottom: 48px;
  --padding-left: 48px;
  --padding-block-start: 48px;
  --padding-block-end: 48px;
  --padding-inline-start: 48px;
  --padding-inline-end: 48px;
  border-radius: var(--wr-radius-lg);
}
.wr-home-disqualify__lead { color: var(--wr-muted); margin-bottom: 24px; }
/* Disqualifikation-Liste — Native Icon-List Rebuild.
   Bernd pflegt Items im Icon-List-Repeater. Text-Format pro Item:
     <strong>Title</strong>Body
   CSS rendert <strong> als block (uppercase mono), Body als muted body-text. */
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--wr-line);
  align-items: flex-start;
  gap: 24px;
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-item:last-child {
  border-bottom: none;
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-icon {
  color: var(--wr-magenta);
  margin-top: 2px;
  flex-shrink: 0;
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-icon i,
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-icon svg {
  color: var(--wr-magenta);
  font-size: 20px;
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text {
  font-size: 15px;
  color: var(--wr-muted);
  line-height: 1.55;
  font-family: var(--wr-font-sans);
}
.elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text strong {
  display: block;
  font-family: var(--wr-font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin-bottom: 6px;
  font-weight: 600;
}

/* Entry points */
.elementor-element.wr-home-entries__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
/* Card-Surface: klar abgesetztes Panel auf Near-Black (#0B0814). Auf Dark
   wirken Schatten nicht → Elevation kommt über Flächenhelligkeit + Rahmen +
   feinen Top-Highlight. --wr-surface = Brand-Violett (#1E1A3E). */
:root {
  --wr-surface: #1E1A3E;
  /* Surface mit Magenta-Wash oben — auf ALLEN dunklen Karten (Bernd-Wunsch) */
  --wr-surface-glow: linear-gradient(180deg, rgba(199,59,126,.18) 0%, rgba(199,59,126,0) 60%), var(--wr-surface);
}
.wr-home-entry {
  background: var(--wr-surface-glow);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: all .3s;
}
.wr-home-entry:hover { border-color: rgba(199,59,126,.45); box-shadow: 0 0 24px rgba(255,79,157,.18); }
.wr-home-entry.featured {
  border-color: var(--wr-magenta);
  /* etwas stärkerer Wash → bleibt trotz gleichem Look klar die Hero-Karte */
  background: linear-gradient(180deg, rgba(199,59,126,.28) 0%, rgba(199,59,126,0) 60%), var(--wr-surface);
}
.wr-home-entry__tag {
  font-family: var(--wr-font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wr-magenta); margin-bottom: 16px;
}
.wr-home-entry .elementor-heading-title { font-size: 20px; font-weight: 600; }
.wr-home-entry .elementor-widget-text-editor { color: var(--wr-cool-white); font-size: 15px; }
.wr-home-entry__cta {
  position: relative;
  color: var(--wr-accent-glow); text-decoration: none;
  font-family: var(--wr-font-mono); font-size: 14px; font-weight: 500;
  letter-spacing: 0.04em; padding-bottom: 4px;
  display: inline-block; margin-top: 16px;
  transition: color .2s;
}
/* Unterstrich als ::after-Balken — border-bottom wird vom Theme/Elementor auf 0
   zurückgesetzt (deshalb wirkte der CTA schwach). Der Balken rendert zuverlässig
   und ist animierbar (Basis für die Einblend-Animation). */
.wr-home-entry__cta::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1.5px; background-color: currentColor;
}
/* currentColor → Unterstrich folgt der Textfarbe automatisch (auch im Hover) */
.wr-home-entry__cta:hover { color: #fff; }
/* ── Scroll-Einblend-Animation (Prototyp) ──────────────────────────────
   Unterstrich zeichnet sich beim Einscrollen links→rechts ein. Nur aktiv,
   wenn JS läuft (.js-anim am <body>) → ohne JS bleibt der Strich sichtbar.
   transform:scaleX statt width = GPU-freundlich, kein Layout-Thrash
   (entspricht P7 der UI-UX-Skill). Respektiert prefers-reduced-motion. */
.js-anim .wr-home-entry__cta::after { transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.js-anim .wr-home-entry__cta.in-view::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .js-anim .wr-home-entry__cta::after { transform: none; transition: none; }
}

/* Trust */
.elementor-element.wr-home-trust__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.wr-home-trust {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--wr-line);
  text-align: left;
  align-items: flex-start;
}
.wr-home-trust__icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(199,59,126,.15); border: 1px solid var(--wr-magenta);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--wr-magenta); font-family: var(--wr-font-mono);
  margin-bottom: 16px;
}
.wr-home-trust .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--wr-white);
  font-weight: 600;
}
.wr-home-trust .elementor-widget-text-editor { font-size: 15px; color: var(--wr-muted); margin-top: 4px; }

/* Final CTA */
.wr-home-final {
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(199,59,126,.15) 0%, transparent 60%);
}
.wr-home-final .wr-container { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.wr-home-final .elementor-heading-title { font-size: clamp(36px, 4.5vw, 64px); font-weight: 800; }
.wr-home-final__lead { font-size: 1.2em; max-width: 50ch; margin: 0 auto; }
.wr-home-slot-counter {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--wr-font-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wr-accent-glow); padding: 6px 14px;
  background: rgba(255,79,157,.08);
  border: 1px solid rgba(255,79,157,.3);
  border-radius: var(--wr-radius-pill);
  margin-top: 16px;
}
.wr-home-slot-counter::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--wr-accent-glow);
  box-shadow: 0 0 8px var(--wr-accent-glow);
  animation: pulse 2s ease-in-out infinite;
}
.wr-home-final__sub {
  font-family: var(--wr-font-mono); font-size: 13px;
  color: var(--wr-muted); letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 16px;
}

/* Headline-Akzent: gleicher Schnitt, NUR Farbe (MD Regel 1) */
.elementor-heading-title .serif-accent {
  font-family: inherit;
  font-style: normal;
  text-transform: inherit;
  font-weight: inherit;
  color: var(--wr-magenta);
  color: var(--wr-accent-glow);
}

/* ============================================================
   STANDORTE — Section-specific classes (.wr-std-*)
   ============================================================ */

/* Hero strike-through */
.wr-std-strike {
  text-decoration: line-through;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--wr-magenta);
  color: var(--wr-muted);
}

/* Map section */
.wr-std-map-section {
  background: linear-gradient(180deg, transparent 0%, rgba(30,26,62,.3) 50%, transparent 100%);
}
.wr-std-map-wrapper {
  position: relative; width: 100%; margin: 48px 0;
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-md);
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1A1530 0%, var(--wr-black) 70%);
}
.wr-std-map-wrapper svg { width: 100%; height: auto; display: block; }
.wr-std-orbit { stroke-dasharray: 4 4; animation: wr-std-orbit 60s linear infinite; }
@keyframes wr-std-orbit { to { stroke-dashoffset: 200; } }
.wr-std-sektor-core { transform-origin: center; transform-box: fill-box; animation: wr-std-pulse 3s ease-in-out infinite; }
@keyframes wr-std-pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

.wr-app .wr-std-map-legend,
.elementor-element.wr-std-map-legend {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--wr-line);
}
.wr-app .e-con.wr-std-map-legend {
  --padding-top: 32px;
  --padding-right: 32px;
  --padding-bottom: 32px;
  --padding-left: 32px;
  --padding-block-start: 32px;
  --padding-block-end: 32px;
  --padding-inline-start: 32px;
  --padding-inline-end: 32px;
  border-radius: var(--wr-radius-md);
}
.wr-std-legend-item {
  display: flex !important; --gap: 16px; --row-gap: 16px; --column-gap: 16px; align-items: var(--align-items, flex-start);
}
.wr-std-legend-icon {
  flex-shrink: 0; width: 20px; height: 20px; margin-top: 6px; border-radius: 50%;
}
.wr-std-legend-icon.active { background: var(--wr-magenta); box-shadow: 0 0 12px var(--wr-magenta); }
.wr-std-legend-icon.avoid { background: transparent; border: 2px dashed var(--wr-muted); }
.wr-std-legend-icon.zone { background: rgba(199,59,126,.2); border: 1px solid var(--wr-magenta); }
.wr-std-legend-item .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wr-white);
  font-weight: 500;
}
.wr-std-legend-item .elementor-widget-text-editor { font-size: 14px; color: var(--wr-muted); margin: 4px 0 0; }

/* Cost cards */
.wr-app .wr-std-cost-grid,
.elementor-element.wr-std-cost-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.wr-std-cost-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--wr-line);
  position: relative;
  transition: border-color .3s, transform .3s;
}
.wr-app .e-con.wr-std-cost-card {
  --padding-top: 32px;
  --padding-right: 32px;
  --padding-bottom: 32px;
  --padding-left: 32px;
  --padding-block-start: 32px;
  --padding-block-end: 32px;
  --padding-inline-start: 32px;
  --padding-inline-end: 32px;
  border-radius: var(--wr-radius-md);
}
.wr-std-cost-card::before {
  content: '✕'; position: absolute; top: 20px; right: 24px;
  color: var(--wr-magenta); font-size: 24px; font-weight: 300; opacity: .5;
}
.wr-std-cost-card:hover { border-color: rgba(199,59,126,.4); box-shadow: 0 0 24px rgba(255,79,157,.18); }
.wr-std-cost-card .elementor-heading-title {
  font-size: 16px;
  font-family: var(--wr-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wr-std-cost-card .elementor-widget-text-editor { font-size: 15px; color: var(--wr-muted); }

/* DNA Story */
.wr-app .wr-std-dna-grid,
.elementor-element.wr-std-dna-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr !important;
  --gap: 64px; --row-gap: 64px; --column-gap: 64px;
  align-items: var(--align-items, center);
}
.wr-std-dna-timeline {
  --padding-left: 32px;            /* Editor-Innenabstand überschreibt */
  border-left: 1px solid rgba(199,59,126,.3);
}
.wr-std-dna-event {
  position: relative;
  --margin-bottom: 32px;           /* Editor-Außenabstand überschreibt */
}
.wr-std-dna-event::before {
  content: '';
  position: absolute; left: -36px; top: 8px;
  width: 8px; height: 8px;
  background: var(--wr-magenta); border-radius: 50%;
  box-shadow: 0 0 8px var(--wr-magenta);
}
.wr-std-dna-event__year {
  font-family: var(--wr-font-mono); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wr-accent-glow); margin-bottom: 4px;
}
.wr-std-dna-event .elementor-widget-text-editor { font-size: 15px; margin: 0; }
.wr-std-dna-big { text-align: center; }
.wr-std-big-number {
  font-family: var(--wr-font-display);
  font-size: clamp(80px, 12vw, 160px);
  line-height: 1; font-weight: 800; font-style: normal; /* MD: Zahlen aufrecht */
  background: linear-gradient(180deg, var(--wr-white) 0%, var(--wr-magenta) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.wr-std-big-number__label p {
  font-family: var(--wr-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 13px; color: var(--wr-muted);
  margin-top: 16px;
}

/* Comparison table (native rows) */
.wr-app .wr-std-compare,
.elementor-element.wr-std-compare {
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-md);
  overflow: hidden;
  --margin-top: 24px;              /* Editor-Außenabstand überschreibt */
}
.wr-app .wr-std-compare__row,
.elementor-element.wr-std-compare__row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  --gap: 0; --row-gap: 0; --column-gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.wr-app .wr-std-compare__row:last-child { border-bottom: none !important; }
.wr-app .wr-std-compare__row--head {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--wr-line);
}
.wr-std-compare__cell {
  padding: 20px 24px;
  font-size: 15px;
}
.wr-std-compare__cell--label,
.wr-std-compare__th {
  font-family: var(--wr-font-mono);
  font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wr-muted);
}
.wr-std-compare__th--us {
  color: var(--wr-white);
  background: rgba(199,59,126,.08);
}
.wr-std-compare__cell--them { color: var(--wr-muted); }
.wr-std-compare__cell--us {
  background: rgba(199,59,126,.04);
  color: var(--wr-text);
  border-left: 2px solid var(--wr-magenta);
}
@media (max-width: 768px) {
  .wr-app .wr-std-compare__row,
  .elementor-element.wr-std-compare__row {
    grid-template-columns: 1fr !important;
  }
}

/* Stack */
.wr-app .wr-std-stack-grid,
.elementor-element.wr-std-stack-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  --gap: 24px; --row-gap: 24px; --column-gap: 24px;
}
.wr-std-stack-item {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--wr-line);
  text-align: center;
}
.wr-app .e-con.wr-std-stack-item {
  --padding-top: 24px;
  --padding-right: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 24px;
  --padding-inline-end: 24px;
  border-radius: var(--wr-radius-md);
}
.wr-std-stack-item .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  font-weight: 500;
  margin-bottom: 4px;
}
.wr-std-stack-item .elementor-widget-text-editor { font-size: 12px; color: var(--wr-muted); margin: 0; }

/* Workshop card */
.wr-std-workshop {
  background: linear-gradient(135deg, rgba(199,59,126,.08) 0%, rgba(126,42,90,.04) 100%);
  border: 1px solid rgba(199,59,126,.2);
}
.wr-app .e-con.wr-std-workshop {
  --padding-top: 64px;
  --padding-right: 64px;
  --padding-bottom: 64px;
  --padding-left: 64px;
  --padding-block-start: 64px;
  --padding-block-end: 64px;
  --padding-inline-start: 64px;
  --padding-inline-end: 64px;
  border-radius: var(--wr-radius-md);
}
@media (max-width: 768px) {
  .wr-app .e-con.wr-std-workshop {
    --padding-top: 32px;
    --padding-right: 32px;
    --padding-bottom: 32px;
    --padding-left: 32px;
    --padding-block-start: 32px;
    --padding-block-end: 32px;
    --padding-inline-start: 32px;
    --padding-inline-end: 32px;
  }
}
.wr-std-workshop .elementor-widget-text-editor { color: var(--wr-text); margin-bottom: 16px; }
.wr-std-workshop .wr-std-workshop__cities {
  font-family: var(--wr-font-mono);
  font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--wr-muted);
  margin-top: 24px !important;
}

/* ============================================================
   Light-Mode Sections — alternierende Light/Dark-Pacing.
   Selektoren listen die 5 light sections direkt, weil Elementor
   das _css_classes-Multi-Class auf nur die erste Klasse reduziert
   (`is-light` als zweite Klasse landet nicht im Output).
   Background-Color wird zusätzlich nativ via Elementor-Setting
   gesetzt — diese CSS-Regeln invertieren nur Text/Card-Farben.
   ============================================================ */

/* Logo Wall — Light-Mode Override.
   `!important` nur dort, wo Bundle ZWINGEND winnen muss (Logo-Wall-Section
   hat hardcoded `background: var(--wr-black)` von einer früheren Regel
   die wir zwingend overriden). Sonst Editor-pflegbar via Spec. */
.wr-home-logo-wall-section {
  background-color: #0B0814;  /* CI: Leiste DUNKEL → fügt sich in den cinematischen Fluss (vorher hell) */
  border-top-color: rgba(255,255,255,.06);
  border-bottom-color: rgba(255,255,255,.06);
}
.wr-home-logo-wall-section .wr-home-logo-wall__label,
.wr-home-logo-wall-section .elementor-widget-text-editor.wr-home-logo-wall__label p { color: var(--wr-muted); }
/* Kundenlogos MONOCHROM WEISS auf dunkel (CI: keine Originalfarben). Sauber bei
   transparenten Logos; Logos mit opaker Hintergrundfläche werden zu weißen
   Flächen → brauchen dann transparente PNG-Assets (Asset-Aufgabe, nicht CSS). */
.wr-home-logo-wall-section img {
  /* Bundle setzt KEINEN filter/opacity mehr — CSS-Filter & Co. steuert
     Bernd am Widget (Editor wins, niemals !important auf Editor-Props). */
  max-height: 32px;
  width: auto;
  object-fit: contain;
}
.wr-home-logo-wall-section .wr-home-logo { color: var(--wr-white); }

/* Section heads in light sections — Spec (0,3,0) reicht via Cascade-Order */
.wr-home-founder .wr-ga-section__head .elementor-heading-title,
.wr-home-arbeit .wr-ga-section__head .elementor-heading-title {
  color: var(--wr-light-fg);
}
/* …ABER der Eyebrow-Pill ist immer ein dunkler/magenta Chip → Text bleibt
   weiß, auch in Light-Sections. Schlägt den Section-Head-Override (0,3,0) mit
   (0,4,0). Vorher: dunkler Text auf schwarzem Pill = unlesbar (Arbeit/Disqualify/
   Trust waren betroffen). */
/* [2026-06-22 entfernt] Eyebrow-Farbe wird jetzt kontext-getrieben + niedrig-spezifisch
   im Anti-Slop-Block gesetzt (var(--wr-heading-fg)), damit der Editor sie überschreiben kann. */
.wr-home-founder .wr-ga-section__head .elementor-widget-text-editor,
.wr-home-arbeit .wr-ga-section__head .elementor-widget-text-editor {
  color: var(--wr-light-muted);
}

/* Founder on light */
.wr-home-founder .wr-home-founder__lead { color: var(--wr-light-fg); }
.wr-home-founder .wr-home-founder__detail { color: var(--wr-light-muted); }
.wr-home-founder .wr-home-founder__creds .elementor-icon-list-item {
  background: #FFFFFF;
  border-color: rgba(30,26,62,.12);
}
.wr-home-founder .wr-home-founder__creds .elementor-icon-list-text { color: var(--wr-light-fg); }
.wr-home-founder .wr-home-founder__links .elementor-icon-list-item > a,
.wr-home-founder .wr-home-founder__links .elementor-icon-list-text { color: var(--wr-magenta); }
.wr-home-founder .wr-home-founder__links .elementor-icon-list-item > a:hover { border-color: var(--wr-magenta); }

/* P4b: Founder-Kennzahlen-Band (rechte Spalte) — füllt den Weißraum + Credibility.
   Magenta-Zahlen (Akzent) + ruhige Ink-Labels, dezenter Trenner oben. */
.wr-home-founder__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(30,26,62,.1); }
.wr-home-founder__stat { display: flex; flex-direction: column; }
.wr-home-founder__stat-num { font-family: var(--wr-font-display); font-style: normal; font-weight: 800; font-size: 40px; line-height: 1; color: var(--wr-light-fg); } /* MD: Zahlen Ink, nur Akzent magenta */
.wr-home-founder__stat-num .num { color: var(--wr-magenta); }
.wr-home-founder__stat-label { margin-top: 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-light-muted); line-height: 1.3; }
@media (max-width: 768px) { .wr-home-founder__stats { gap: 16px; } .wr-home-founder__stat-num { font-size: 32px; } }
/* Porträt füllt seine Spalte (vorher ~190px statt 320px → wirkte zu klein) */
.wr-home-founder__grid > .elementor-element:first-child img,
.wr-home-founder__grid > div:first-child img { width: 100%; height: auto; display: block; border-radius: var(--wr-radius-md); }

/* Arbeitsweise + Approach (Method cards) on light — beide Sektionen hell.
   CI: reines Weiß auf Off-White (klarer Abstand), Violett-Border + weicher
   Schatten; Überschrift + Body in Ink (nicht grau → kraftvoller). */
.wr-home-arbeit .wr-home-method,
.wr-home-approach .wr-home-method {
  background: var(--wr-white);
  border-color: rgba(30,26,62,.08);
  box-shadow: 0 8px 24px rgba(30,26,62,.05);
}
.wr-home-arbeit .wr-home-method .elementor-heading-title,
.wr-home-approach .wr-home-method .elementor-heading-title { color: var(--wr-light-fg); }
.wr-home-arbeit .wr-home-method .elementor-widget-text-editor,
.wr-home-approach .wr-home-method .elementor-widget-text-editor { color: var(--wr-light-fg); }

/* Disqualifikation on light */
.wr-home-disqualify .wr-home-disqualify__box {
  background: rgba(0,0,0,.02);
  border-color: rgba(0,0,0,.08);
}
.wr-home-disqualify .wr-home-disqualify__lead { color: var(--wr-light-muted); }
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-item {
  border-bottom-color: rgba(0,0,0,.08);
}
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text strong { color: var(--wr-light-fg); }
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text { color: var(--wr-light-muted); }

/* Trust Signals on light */
.wr-home-trust-section .wr-home-trust {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}
.wr-home-trust-section .wr-home-trust .elementor-heading-title { color: var(--wr-light-fg); }
.wr-home-trust-section .wr-home-trust .elementor-widget-text-editor { color: var(--wr-light-muted); }
.wr-home-trust-section .wr-home-trust__icon {
  background: rgba(199,59,126,.1);
}

/* ============================================================
   Section-Spacing — natürliche Luft zwischen Top-Level-Sektionen.
   Unlayered, Spec (0,2,1) per Selektor (body.wr-app + section-class).
   Elementor per-element-CSS (0,3,0) gewinnt → Editor-Padding-
   Setting überschreibt zuverlässig. Bundle-Default (96/96)
   gewinnt gegen Elementor-Framework-Default (10/10, Spec (0,1,0)).
   Section-Klassen müssen explizit gelistet werden — generischer
   Descendant-Selektor (`body.wr-app .elementor > .e-con > .e-con`)
   hätte zu hohe Spezifizität (8+) und Editor würde nie gewinnen.
   ============================================================ */
body.wr-app .wr-ga-hero,
body.wr-app .wr-home-hero,
body.wr-app .wr-std-hero,
body.wr-app .wr-home-limit-section,
body.wr-app .wr-home-founder,
  body.wr-app .wr-home-approach,
body.wr-app .wr-home-cases,
body.wr-app .wr-home-arbeit,
body.wr-app .wr-home-ki,
body.wr-app .wr-home-leistungen,
body.wr-app .wr-home-disqualify,
body.wr-app .wr-home-entries,
body.wr-app .wr-home-trust-section,
body.wr-app .wr-home-final,
body.wr-app .wr-ga-problems,
body.wr-app .wr-ga-principles,
body.wr-app .wr-ga-audit,
body.wr-app .wr-ga-process,
body.wr-app .wr-ga-cases,
body.wr-app .wr-ga-types,
body.wr-app .wr-ga-flags,
body.wr-app .wr-ga-pricing,
body.wr-app .wr-ga-pdf,
body.wr-app .wr-ga-call,
body.wr-app .wr-std-map-section,
body.wr-app .wr-std-cost,
body.wr-app .wr-std-dna,
body.wr-app .wr-std-compare-section,
body.wr-app .wr-std-stack-section,
body.wr-app .wr-std-workshop-section {
  /* NUR physische Vars — die logischen mappt Elementor selbst
     (--padding-block-start: var(--padding-top)). Direktes Setzen der
     logischen Vars kappt den Editor-Padding-Regler (siehe Logo-Wall-Fix). */
  --padding-top: 96px;
  --padding-bottom: 96px;
  /* Seitlicher Gutter: seit die Sektionen NATIV Boxed sind (Inhalt in
     .e-con-inner zentriert bei 1240), braucht der Inhalt auf schmalen
     Viewports Abstand zum Rand. Editor-überschreibbar (Spec 0,2,1). */
  --padding-inline-start: var(--wr-gutter);
  --padding-inline-end: var(--wr-gutter);
  --padding-left: var(--wr-gutter);
  --padding-right: var(--wr-gutter);
}
@media (max-width: 768px) {
  body.wr-app .wr-ga-hero,
  body.wr-app .wr-home-hero,
  body.wr-app .wr-std-hero,
  body.wr-app .wr-home-limit-section,
  body.wr-app .wr-home-founder,
  body.wr-app .wr-home-approach,
  body.wr-app .wr-home-cases,
  body.wr-app .wr-home-arbeit,
  body.wr-app .wr-home-ki,
  body.wr-app .wr-home-leistungen,
  body.wr-app .wr-home-disqualify,
  body.wr-app .wr-home-entries,
  body.wr-app .wr-home-trust-section,
  body.wr-app .wr-home-final,
  body.wr-app .wr-ga-problems,
  body.wr-app .wr-ga-principles,
  body.wr-app .wr-ga-audit,
  body.wr-app .wr-ga-process,
  body.wr-app .wr-ga-cases,
  body.wr-app .wr-ga-types,
  body.wr-app .wr-ga-flags,
  body.wr-app .wr-ga-pricing,
  body.wr-app .wr-ga-pdf,
  body.wr-app .wr-ga-call,
  body.wr-app .wr-std-map-section,
  body.wr-app .wr-std-cost,
  body.wr-app .wr-std-dna,
  body.wr-app .wr-std-compare-section,
  body.wr-app .wr-std-stack-section,
  body.wr-app .wr-std-workshop-section {
    --padding-block-start: 64px;
    --padding-block-end: 64px;
    --padding-top: 64px;
    --padding-bottom: 64px;
  }
}

/* Hero-Padding-DEFAULTS (oben 120 / unten 0 gegen schwarzen Gradient-
   Balken). NUR physische Vars, KEIN !important — Editor-Innenabstand
   gewinnt IMMER (Bernd-Direktive 2026-06-12). */
.wr-home-hero {
  --padding-top: 120px;
  --padding-bottom: 0px;
}
body.wr-app .wr-home-hero {
  /* google-ads.css setzt physisches Padding und blockt den Variablen-Gutter —
     hier die LOGISCHEN Padding-Properties aus den Variablen re-applizieren. */
  padding-block-start: var(--padding-block-start);
  padding-block-end: var(--padding-block-end);
  padding-inline-start: var(--padding-inline-start);
  padding-inline-end: var(--padding-inline-end);
}
body.wr-app .wr-ga-hero {
  /* Doppel-Padding-Fix (User-Report "viel zu viel Abstand"): Elementor wendet
     das native Padding bereits auf der INNER-Ebene an — die Re-Applikation am
     Outer ergab 2× Luft über dem Hero-Content. Outer bleibt padding-frei;
     das Editor-Padding wirkt einmal, innen (Hero ist boxed). Ohne
     !important — schlägt google-ads.css (0,1,0) per Spezifität. */
  padding: 0;
}

/* ============================================================
   Logo-Carousel — uniforme Höhe, contain-Fit, zentrierte Slides.
   Verhindert dass unterschiedliche Logo-Aspect-Ratios in den
   Slot-Boxen verzerrt/abgeschnitten werden.
   ============================================================ */
.wr-home-logo-wall-section .swiper-slide,
.wr-home-logo-wall-section .elementor-image-carousel-wrapper .swiper-slide {
  display: flex !important;
  align-items: center !important; /* Karussell-intern (kein Elementor-Container) → literal, sonst erbt es --align-items */
  justify-content: center !important;
  min-height: 80px;
}
.wr-home-logo-wall-section .swiper-slide img,
.wr-home-logo-wall-section .elementor-image-carousel-wrapper img {
  /* Defaults OHNE !important — Editor-Größen-/Stil-Regler am Widget
     müssen gewinnen (Bernd 2026-06-11). */
  max-height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* ============================================================
   Card-Padding + Border-Radius — unlayered, Spec (0,2,0) via
   `.wr-app .e-con.wr-home-XXX`. Elementor per-element (0,3,0)
   gewinnt → Editor-Padding-Setting auf einzelner Card ist
   überschreibbar. CSS-Variablen sind die, die Elementor selbst
   nutzt — Editor-Override kommt sauber durch.
   ============================================================ */
.wr-app .e-con.wr-home-case,
.wr-app .e-con.wr-home-method,
.wr-app .e-con.wr-home-entry {
  --padding-top: 32px;
  --padding-right: 32px;
  --padding-bottom: 32px;
  --padding-left: 32px;
  --padding-block-start: 32px;
  --padding-block-end: 32px;
  --padding-inline-start: 32px;
  --padding-inline-end: 32px;
  border-radius: var(--wr-radius-lg);
}
.wr-app .e-con.wr-home-cluster {
  --padding-top: 48px;
  --padding-right: 32px;
  --padding-bottom: 48px;
  --padding-left: 32px;
  --padding-block-start: 48px;
  --padding-block-end: 48px;
  --padding-inline-start: 32px;
  --padding-inline-end: 32px;
  border-radius: var(--wr-radius-lg);
}
.wr-app .e-con.wr-home-trust {
  --padding-top: 24px;
  --padding-right: 24px;
  --padding-bottom: 24px;
  --padding-left: 24px;
  --padding-block-start: 24px;
  --padding-block-end: 24px;
  --padding-inline-start: 24px;
  --padding-inline-end: 24px;
  border-radius: var(--wr-radius-lg);
}

/* wr-ga-pdf als Light-Section — direkter Selektor (kein .is-light),
   da Elementor _css_classes-Multi-Class via MCP-Update strippt.
   Background-Color kommt über Container-Setting.
   Spec (0,3,0)+ ohne !important → Editor-Color-Picker gewinnt sauber. */
.wr-ga-pdf .wr-ga-pdf__title .elementor-heading-title,
.wr-ga-pdf .wr-ga-section__head .elementor-heading-title {
  color: var(--wr-light-fg);
}
.wr-ga-pdf .elementor-widget-text-editor,
.wr-ga-pdf .wr-ga-section__head .elementor-widget-text-editor {
  color: var(--wr-light-muted);
}

/* Card-Padding für wr-ga-* Cards — unlayered, Spec (0,2,0).
   Editor-Container-Settings per-element (0,3,0) gewinnen sauber. */
.wr-app .e-con.wr-ga-principle,
.wr-app .e-con.wr-ga-process__step,
.wr-app .e-con.wr-ga-case,
.wr-app .e-con.wr-ga-audit__panel,
.wr-app .e-con.wr-ga-type,
.wr-app .e-con.wr-ga-flag,
.wr-app .e-con.wr-ga-pricing__card {
  --padding-top: 32px;
  --padding-right: 32px;
  --padding-bottom: 32px;
  --padding-left: 32px;
  --padding-block-start: 32px;
  --padding-block-end: 32px;
  --padding-inline-start: 32px;
  --padding-inline-end: 32px;
  border-radius: var(--wr-radius-lg);
}

/* ============================================================
   PROBLEMS-CARDS (Google-Ads) — Native Widgets Rebuild
   ------------------------------------------------------------
   Ersetzt das <div class="wr-ga-problems__grid"> HTML-Widget
   durch native Container + 4 Card-Container, jeweils mit:
     - Icon-widget .wr-ga-problem__icon (Font Awesome)
     - Heading .wr-ga-problem__title (h4)
     - Text-editor .wr-ga-problem__body
   ============================================================ */

/* Problems-Grid Container — 2 columns desktop, 1 column mobile */
.elementor-element.wr-ga-problems__grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  --gap: 16px; --row-gap: 16px; --column-gap: 16px;
}
.elementor-element.wr-ga-problems__grid > * {
  --width: 100% !important;
  min-width: 0 !important;
  width: auto !important;
}

/* Card Container — full card with icon + title + body.
   Referenz-Layout (google-ads.css): grid 48px/1fr — Icon links, Titel + Text
   rechts, kompakte Karte. Mit den 3 nativen Widgets: Icon spannt beide
   Zeilen (Spalte 1), Titel Zeile 1 / Body Zeile 2 in Spalte 2. */
.wr-app .e-con.wr-ga-problem {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  align-items: var(--align-items, start);
  column-gap: 20px;
  row-gap: 8px;
  --padding-top: 28px;
  --padding-right: 28px;
  --padding-bottom: 28px;
  --padding-left: 28px;
  --padding-block-start: 28px;
  --padding-block-end: 28px;
  --padding-inline-start: 28px;
  --padding-inline-end: 28px;
  background: var(--wr-black);
  border: 1px solid var(--wr-line);
  border-radius: var(--wr-radius-lg);
}
.wr-app .e-con.wr-ga-problem > .elementor-widget-icon { grid-column: 1; grid-row: 1 / 3; }
.wr-app .e-con.wr-ga-problem > .elementor-widget-heading { grid-column: 2; grid-row: 1; align-self: center; }
.wr-app .e-con.wr-ga-problem > .elementor-widget-text-editor { grid-column: 2; grid-row: 2; }

/* Icon — square chip mit subtilem Danger-Tint */
.elementor-widget-icon.wr-ga-problem__icon .elementor-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--wr-radius-md);
  border: 1px solid rgba(242, 90, 106, .35);
  background: rgba(242, 90, 106, .08);
  color: var(--wr-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.elementor-widget-icon.wr-ga-problem__icon .elementor-icon i {
  color: var(--wr-danger);
}

/* Title h4 */
.elementor-widget-heading.wr-ga-problem__title .elementor-heading-title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin: 12px 0 8px;
  line-height: 1.2;
}

/* Body text */
.elementor-widget-text-editor.wr-ga-problem__body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wr-cool-white);
  margin: 0;
}

/* Mobile: stack to single column */
@media (max-width: 768px) {
  .elementor-element.wr-ga-problems__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   HERO-SIDECARD (Google-Ads) — Native Widgets Rebuild
   ------------------------------------------------------------
   Ersetzt das alte <aside class="wr-ga-hero__sidecard"> HTML-Widget
   durch native Elementor-Widgets:
     - Container .wr-ga-hero__sidecard
       - Heading .wr-ga-hero__sidecard-eyebrow (war .head)
       - Heading .wr-ga-hero__sidecard-title (war <h3>)
       - Icon-list .wr-ga-hero__sidecard-list (war <ul>)
       - Button .wr-btn .wr-btn--ghost (war <a>)
   ============================================================ */

/* Sidecard Container — Card-Background, Glass-Look */
.wr-app .e-con.wr-ga-hero__sidecard {
  --padding-top: 28px;
  --padding-right: 28px;
  --padding-bottom: 28px;
  --padding-left: 28px;
  --padding-block-start: 28px;
  --padding-block-end: 28px;
  --padding-inline-start: 28px;
  --padding-inline-end: 28px;
  --gap: 14px;
  background: rgba(20, 16, 42, .65);
  border: 1px solid var(--wr-line-strong);
  backdrop-filter: blur(12px);
  border-radius: var(--wr-radius-lg);
}

/* Eyebrow (Heading widget mit class) — Magenta-Mono-Pill mit Dot via ::before */
.elementor-widget-heading.wr-ga-hero__sidecard-eyebrow .elementor-heading-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--wr-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wr-magenta);
  margin: 0;
}
.elementor-widget-heading.wr-ga-hero__sidecard-eyebrow .elementor-heading-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wr-magenta-glow);
  box-shadow: 0 0 8px var(--wr-magenta-glow);
  flex-shrink: 0;
}

/* Title h3 */
.elementor-widget-heading.wr-ga-hero__sidecard-title .elementor-heading-title {
  font-family: var(--wr-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wr-white);
  margin: 0;
}

/* Icon-list — kompakt, Magenta-Check, Cool-White-Text */
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-item {
  align-items: flex-start;
}
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-icon {
  color: var(--wr-magenta);
  margin-top: 2px;
}
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-icon i,
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-icon svg {
  color: var(--wr-magenta);
  font-size: 14px;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.elementor-widget-icon-list.wr-ga-hero__sidecard-list .elementor-icon-list-text {
  font-family: var(--wr-font-sans);
  font-size: 14px;
  color: var(--wr-cool-white);
  line-height: 1.5;
}

/* ============================================================
   NUMBER-BADGES — Native Heading-Widgets (header_size: p)
   ------------------------------------------------------------
   Ersetzt die früheren HTML-Widgets der Form
     <div class="wr-XYZ__num">…</div>
   durch native Elementor-Heading-Widgets mit BEM-Klasse am
   Widget-Wrapper, sodass Bernd die Nummerierung im Editor pflegen
   kann (Title-Feld + Text-Input). Specificity (0,3,0) ohne
   !important — Editor-Color/Typography überschreiben sauber.
   ============================================================ */

/* Startseite: Method-Cards — Fraunces italic 48px Magenta */
.elementor-widget-heading.wr-home-method__num .elementor-heading-title {
  font-family: var(--wr-font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--wr-magenta);
  margin-bottom: 16px;
}

/* Startseite: Cluster-Cards — Mono 11px Magenta, Caps-Spacing */
.elementor-widget-heading.wr-home-cluster__num .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--wr-magenta);
  margin-bottom: 16px;
  line-height: 1.4;
}

/* Google-Ads: Principle-Cards — Mono 11px Magenta-Glow */
.elementor-widget-heading.wr-ga-principle__num .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--wr-magenta);
  line-height: 1.4;
}

/* Google-Ads: Process-Cards — Circle 40×40 Magenta-BG, weiße Zahl.
   Der <p>-Tag bekommt die Circle-Optik direkt, nicht der Wrapper. */
.elementor-widget-heading.wr-ga-process__num .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wr-magenta);
  color: var(--wr-white);
  font-family: var(--wr-font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  border: 4px solid var(--wr-black);
  box-shadow: 0 0 20px rgba(199,59,126,.45);
  line-height: 1;
  margin: 0;
}

/* Google-Ads: Pricing/Konditionen-Cards — Mono 11px Magenta-Glow */
.elementor-widget-heading.wr-ga-pricing__num .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--wr-magenta);
  line-height: 1.4;
}

/* Google-Ads: Flag-Cards — Mono 10px Danger-Red */
.elementor-widget-heading.wr-ga-flag__num .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--wr-danger);
  margin-bottom: 4px;
  line-height: 1.4;
}

/* ============================================================
   Mobile-Grids: wr-ga-* Grid-Templates haben keine Media-Query
   und bleiben sonst auch auf 390-px-Viewport 2-/3-spaltig
   (Cards zu schmal, Titel brechen auf 3 Zeilen, Buttons clippen).
   Diese Regel stackt sie unter 768px auf eine Spalte.
   ============================================================ */
@media (max-width: 768px) {
  .elementor-element.wr-ga-hero__grid,
  .elementor-element.wr-ga-problems__grid,
  .elementor-element.wr-ga-principles__grid,
  .elementor-element.wr-ga-audit__grid,
  .elementor-element.wr-ga-process__grid,
  .elementor-element.wr-ga-cases__grid,
  .elementor-element.wr-ga-types__grid,
  .elementor-element.wr-ga-flags__grid,
  .elementor-element.wr-ga-pricing__grid,
  .elementor-element.wr-ga-pdf__grid,
  .elementor-element.wr-ga-call__grid {
    grid-template-columns: 1fr !important;
    --gap: 24px; --row-gap: 24px; --column-gap: 24px;
  }
}

/* ============================================================
   METHODIK-CHECKLIST — Native Icon-List Rebuild
   ------------------------------------------------------------
   Ersetzt: <ul class="wr-ga-checklist"><li><span class="num">01</span>...</ul>
   Native: Icon-List-Widget, je Item nur Plain-Text. CSS-Counter
   nummeriert automatisch — Bernd kann Items im Repeater
   hinzufügen/entfernen/umsortieren, ohne sich um Nummern zu kümmern.
   Selektor-Spec (0,2,0) schlägt die google-ads.css-Source
   `.wr-ga-checklist {}` (0,1,0).
   ============================================================ */
/* Das Widget-DIV traegt die Klasse selbst — die Insel-Altregel
   `.wr-ga-checklist { display:grid }` (0,1,0) machte das WIDGET zum
   2-Spalten-Grid und das zentrierende Panel liess es auf Inhaltsbreite
   schrumpfen (396px-Squeeze, Text rutschte unter die Nummern). */
.elementor-widget-icon-list.wr-ga-checklist {
  display: block;
  width: 100%;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-items {
  display: grid;
  /* minmax(0,1fr) statt 1fr: kein min-content-Zwang -> gleich breite Spalten */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  width: 100%;
  counter-reset: wr-ga-checklist 0;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-item {
  counter-increment: wr-ga-checklist;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--wr-line);
  font-family: var(--wr-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wr-cool-white);
  line-height: 1.45;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-item:nth-last-child(-n+2) {
  border-bottom: 0;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-icon {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 0;
  flex-shrink: 0;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-icon i,
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-icon svg {
  color: var(--wr-magenta);
  font-size: 11px;
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-icon::after {
  content: counter(wr-ga-checklist, decimal-leading-zero);
  font-family: var(--wr-font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--wr-magenta);
  font-weight: 600;
  min-width: 18px;
}
.elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-text {
  flex: 1 1 auto;
  min-width: 0;
  /* Elementor-Basis setzt align-self:center -> 1-zeilige Texte hingen
     unter der Nummern-Zeile */
  align-self: flex-start;
  font-family: var(--wr-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--wr-cool-white);
  line-height: 1.45;
}
@media (max-width: 768px) {
  .elementor-widget-icon-list.wr-ga-checklist .elementor-icon-list-items {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   RHYTHM-LISTE — Native Container-Pattern Rebuild
   ------------------------------------------------------------
   Ersetzt: <ul class="wr-ga-rhythm"><li><div class="wr-ga-rhythm__cadence">...
   Native: 1x Container.wr-ga-rhythm (column)
              → 5x Container.wr-ga-rhythm__item (grid 110px/1fr)
                  → Heading.wr-ga-rhythm__cadence ("Täglich")
                  → Text-Editor.wr-ga-rhythm__what (<b>Title</b>Body)
   Bernd pflegt jede Zeile als eigenen Container, kann Items duplizieren.
   ============================================================ */
.wr-app .e-con.wr-ga-rhythm {
  display: flex !important;
  flex-direction: column !important;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-left: 0;
  --padding-right: 0;
  --padding-block-start: 0;
  --padding-block-end: 0;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  --gap: 0;
}
.wr-app .e-con.wr-ga-rhythm__item {
  display: grid !important;
  grid-template-columns: 110px 1fr !important;
  gap: 18px;
  --padding-top: 14px;
  --padding-bottom: 14px;
  --padding-left: 0;
  --padding-right: 0;
  --padding-block-start: 14px;
  --padding-block-end: 14px;
  --padding-inline-start: 0;
  --padding-inline-end: 0;
  border-bottom: 1px solid var(--wr-line);
  align-items: start;
}
.wr-app .e-con.wr-ga-rhythm__item:last-child {
  border-bottom: none;
}
.wr-app .e-con.wr-ga-rhythm__item > * {
  --width: 100% !important;
  min-width: 0 !important;
  width: auto !important;
}
.elementor-widget-heading.wr-ga-rhythm__cadence .elementor-heading-title {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wr-magenta);
  padding-top: 3px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}
.elementor-widget-text-editor.wr-ga-rhythm__what,
.elementor-widget-text-editor.wr-ga-rhythm__what p {
  font-family: var(--wr-font-sans);
  font-size: 14px;
  color: var(--wr-cool-white);
  line-height: 1.5;
  margin: 0;
}
.elementor-widget-text-editor.wr-ga-rhythm__what b,
.elementor-widget-text-editor.wr-ga-rhythm__what strong {
  display: block;
  color: var(--wr-white);
  font-weight: 600;
  margin-bottom: 4px;
}
/* Helle Sektionen: fetter Vorspann („Übergabe-Call" etc.) sichtbar machen.
   Gleichstand (0,2,1) mit der weißen Regel oben → höhere Spezifität (0,3,1). */
.is-light .elementor-widget-text-editor.wr-ga-rhythm__what b,
.is-light .elementor-widget-text-editor.wr-ga-rhythm__what strong {
  color: var(--wr-light-fg);
}

/* ============================================================
   GA/SEO-Audit KONTAKT-FORMULAR — natives Elementor-Pro-Form
   auf dunkler Sektion (Widget-Klasse .wr-ga-eform).
   Ersetzt das statische HTML-Mockup, Felder dunkel wie im Design.
   ============================================================ */
.wr-ga-call .wr-ga-eform .elementor-field-group > label {
  font-family: var(--wr-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wr-muted);
  margin-bottom: 8px;
}
.wr-ga-call .wr-ga-eform input[type="text"],
.wr-ga-call .wr-ga-eform input[type="email"],
.wr-ga-call .wr-ga-eform input[type="tel"],
.wr-ga-call .wr-ga-eform textarea,
.wr-ga-call .wr-ga-eform select {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  color: #fff;
  padding: 13px 15px;
  font-size: 15px;
  font-family: var(--wr-font-sans);
  transition: border-color .2s, background .2s;
}
.wr-ga-call .wr-ga-eform ::placeholder { color: rgba(255, 255, 255, .32); opacity: 1; }
.wr-ga-call .wr-ga-eform input[type="text"]:focus,
.wr-ga-call .wr-ga-eform input[type="email"]:focus,
.wr-ga-call .wr-ga-eform input[type="tel"]:focus,
.wr-ga-call .wr-ga-eform textarea:focus,
.wr-ga-call .wr-ga-eform select:focus {
  outline: none;
  border-color: #FF4F9D;
  background: rgba(255, 255, 255, .05);
  box-shadow: none;
}
.wr-ga-call .wr-ga-eform select option { color: #1E1A3E; }
.wr-ga-call .wr-ga-eform .elementor-field-type-submit .elementor-button {
  width: 100%;
  justify-content: center;
  background: #FF4F9D;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px 24px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 13px;
  transition: filter .2s, transform .2s;
}
.wr-ga-call .wr-ga-eform .elementor-field-type-submit .elementor-button:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.wr-ga-call .wr-ga-eform .elementor-field-type-acceptance .elementor-field-subgroup {
  gap: 10px;
  align-items: flex-start;
}
.wr-ga-call .wr-ga-eform .elementor-field-type-acceptance label {
  color: var(--wr-muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.wr-ga-call .wr-ga-eform input[type="checkbox"] { accent-color: #FF4F9D; width: 17px; height: 17px; }
.wr-ga-call .wr-ga-eform .elementor-message { color: #fff; }

/* ============================================================
   RESPONSIVE-FIXES (Audit Abschnitt 4)
   ============================================================ */
/* Hero: Seitenabstand auf Tablet/Mobil (fehlte unter 1100px → Text klebte am Rand) */
@media (max-width: 1100px) {
  .wr-ga-hero .e-con-inner { padding-inline: 24px; }
}
/* Hero-Headline mobil: saubere Silbentrennung statt Wort-Abriss / Überlauf (lang=de gesetzt) */
@media (max-width: 767px) {
  .wr-ga-hero__claim { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
}
/* Mobile-Menü offen: Body-Scroll sperren (Panel scrollte bisher mit) */
body:has(.elementor-menu-toggle.elementor-active) { overflow: hidden; }
/* Blog-Inhaltsverzeichnis: aktiver Eintrag war fast weiß (unsichtbar) → Magenta + fett.
   Klasse sitzt am Text-Element selbst (nicht am Eltern-li), daher .wr-bt-toc + kombinierter Selektor. */
.wr-bt-toc .elementor-toc__list-item-text.elementor-item-active { color: var(--wr-magenta) !important; font-weight: 600; }

/* ============================================================
   TYPO-HANDOFF Phase 3 — Zeilenhöhe als VERHÄLTNIS (unitless).
   Kit setzt body line-height in em (1.6em => fixe px, die ALLE
   Kinder erben → überall ~28px egal Schriftgröße). Unitless auf
   body.wr-app => Kinder erben das Verhältnis 1.6 und skalieren korrekt.
   ============================================================ */
:root { --wr-lh-tight: 1.05; --wr-lh-snug: 1.2; --wr-lh-body: 1.6; --wr-lh-meta: 1.45; }
body.wr-app { line-height: var(--wr-lh-body); }

/* ============================================================
   PDF-LISTE — Native Icon-List Rebuild
   ------------------------------------------------------------
   Ersetzt: <ul class="wr-ga-pdf__list"><li><i data-lucide>...
   Native: Icon-List mit fas fa-check, je Item Plain-Text.
   Sitzt in einer .is-light-Sektion → magenta-Icon + dark-fg-Text.
   ============================================================ */
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--wr-font-sans);
  font-size: 14px;
  color: var(--wr-light-fg);
  line-height: 1.5;
}
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-icon {
  color: var(--wr-magenta);
  margin-top: 2px;
  flex-shrink: 0;
}
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-icon i,
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-icon svg {
  color: var(--wr-magenta);
  font-size: 14px;
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.elementor-widget-icon-list.wr-ga-pdf__list .elementor-icon-list-text {
  color: var(--wr-light-fg);
  font-family: var(--wr-font-sans);
  font-size: 14px;
  line-height: 1.5;
}
/* ============================================================
   FIXES (User-Report GA-Header/Hero)
   ============================================================ */
/* Schwarze Linie unter dem Header: irgendein Layer macht den BODY zum
   Flex-Container mit gap (~20px) -> Lücke zwischen Header und main, in der
   der schwarze Body durchscheint. Gap hart auf 0. */
body.wr-app { gap: 0 !important; row-gap: 0 !important; }

/* Die eigentliche Quelle der Linie: Hello-Theme rendert <header class=
   "page-header"> als erstes Kind von <main>; dessen (unsichtbarer) Titel-
   Margin KOLLABIERT aus dem main heraus -> 20px Spalt zwischen Header und
   Content. Auf wr-app-Seiten ist die H1 im Hero -> page-header ganz weg. */
body.wr-app .page-header { display: none !important; margin: 0 !important; padding: 0 !important; }

/* Rest-Lücke (exakt 20px) zwischen Header-Wrapper und main: Quelle nach
   erschöpfender Analyse nicht identifizierbar (kein Margin/Float/Gap/
   Pseudo/Text-Node — anonymer Theme-/UA-Quirk). Kompensation: main um
   20px hochziehen. Header liegt opak mit z-index 100 darüber.
   Falls die Lücke je verschwindet: diesen Block entfernen. */
body.wr-app main.site-main { margin-top: -20px !important; }

/* Hero-Rhythmus-DEFAULT (48 oben / 0 unten, Video endet am Stat-Band).
   Spezifität bewusst (0,1,0) + nur physische Vars — der Editor-Regler
   (0,2,0) gewinnt IMMER (Bernd-Direktive 2026-06-12). */
.wr-ga-hero {
  --padding-top: 48px;
  --padding-bottom: 0px;
}

/* ============================================================
   Startseiten-Umbau: Sektions-Wechsel dunkel/hell
   - Disqualify + Trust jetzt DUNKEL: Light-Overrides neutralisieren
   - Cases jetzt HELL (is-light): weiße Karten + Ink
   ============================================================ */
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text strong { color: var(--wr-white); }
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-text { color: var(--wr-cool-white); }
.wr-home-disqualify .elementor-widget-icon-list.wr-home-disqualify__list .elementor-icon-list-item { border-bottom-color: var(--wr-line); }
.wr-home-trust-section .wr-home-trust { background: var(--wr-glass); border-color: var(--wr-line); }
.wr-home-trust-section .wr-home-trust .elementor-heading-title { color: var(--wr-white); }
.wr-home-trust-section .wr-home-trust .elementor-widget-text-editor { color: var(--wr-muted); }
.wr-home-trust-section .wr-home-trust__icon { background: rgba(199,59,126,.15); }

/* Cases-Sektion (hell) — SOLL-Design 2026-06-11:
   zentrierter Kopf, weiße Karten mit Brand-Pill, Meta-Zeile,
   Ausgangslage/Maßnahme, rosa Ergebnis-Box (+XX % magenta) und
   Fallstudien-Link. Defaults ohne !important — Editor gewinnt. */
.wr-home-cases .wr-ga-section__head { align-items: center; text-align: center; margin-inline: auto; }
.wr-home-cases .wr-ga-section__head .elementor-heading-title { text-align: center; }
.is-light .wr-home-case {
  background: #FFFFFF;
  border: 1px solid rgba(30,26,62,.08);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(30,26,62,.07);
}
.is-light .wr-home-case__logo {
  font-family: var(--wr-font-mono);
  display: inline-block;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(199,59,126,.08);
  border: 1px solid rgba(199,59,126,.25);
  color: var(--wr-magenta);
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.is-light .wr-home-case .elementor-heading-title {
  color: var(--wr-light-fg);
  font-size: 20px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em;
  line-height: 1.2;
}
.is-light .wr-home-case__meta {
  font-family: var(--wr-font-mono);
  color: var(--wr-light-muted);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.6;
}
.is-light .wr-home-case .elementor-widget-text-editor,
.is-light .wr-home-case .elementor-widget-text-editor p { color: var(--wr-light-fg); font-size: 15px; line-height: 1.6; }
.wr-home-case p + p { margin-block-start: 14px; } /* Karten-Rhythmus statt globalem 36px-Fließtext */
.is-light .wr-home-case__result {
  background: rgba(199,59,126,.06);
  border: 1px solid rgba(199,59,126,.18);
  border-radius: 12px;
  padding: 14px 18px;
}
.is-light .wr-home-case__result .result-label {
  display: block;
  color: var(--wr-light-muted);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.is-light .wr-home-case__result .result-value {
  color: var(--wr-light-fg);
  font-size: 25px; font-weight: 800; line-height: 1.15;
}
.is-light .wr-home-case__result .result-value .num { color: var(--wr-magenta); }
.is-light a.wr-home-case__link, .is-light .wr-home-case__link {
  font-family: var(--wr-font-mono);
  color: var(--wr-magenta);
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.is-light a.wr-home-case__link:hover { color: var(--wr-magenta-glow); }
.is-light .wr-home-cases__note {
  font-family: var(--wr-font-mono);
  display: block; text-align: center;
  color: var(--wr-light-muted);
  font-size: 12px; letter-spacing: .1em;
  margin-top: 8px;
}

/* Footer-Badges (Auszeichnungen): Pill-Optik als DEFAULT (kein !important —
   alles weitere steuert der Editor am Icon-List-Widget). */
.wr-ftr-badges .elementor-icon-list-items { display: flex; flex-direction: column; gap: 10px; }
.elementor-widget-icon-list.wr-ftr-badges .elementor-icon-list-item { border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 8px 16px; width: fit-content; }

/* Design-Anweisung: Abschluss-Elemente in Karten nach unten pinnen */
.wr-home-case > .elementor-element:last-child { margin-top: auto; }

/* Final-CTA-Subline = der EINE Fraunces-Moment (Design-Anweisung).
   !important nötig, weil der globale Sans-Default auf <p> selbst mit
   !important sitzt (gleiche Ausnahme wie beim Logo-Wall-Label). */
.wr-ga-final .elementor-widget-text-editor,
.wr-ga-final .elementor-widget-text-editor p,
.wr-home-final__lead,
.wr-home-final__lead p {
  font-family: var(--wr-font-serif) !important;
  font-style: italic;
}

/* Arbeit-Sektion: Mono-Indizes mit //-Präfix + zentrierter Kopf (SOLL) */
.wr-home-method__num .elementor-heading-title::before { content: '// '; }
.wr-home-arbeit .wr-ga-section__head { align-items: center; text-align: center; }
.wr-home-arbeit .wr-ga-section__head .elementor-heading-title { text-align: center; }

/* Headline-Akzent: sattes Magenta (überschreibt Legacy-accent-glow in der Regel oben) */
.elementor-heading-title .serif-accent { color: var(--wr-magenta); }

/* Founder-SOLL (2026-06-11): Bild-Karte-Caption, Ansatz-Karte, Pills/Links */
.wr-founder-photo-cap p {
  display: flex; align-items: center; justify-content: space-between;
  /* !important: globaler Sans-Default auf <p> hat !important (gleiche
     dokumentierte Ausnahme wie Logo-Label/Final-Subline) */
  font-family: var(--wr-font-mono) !important; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wr-light-muted); margin: 0;
}
.wr-founder-photo-cap .cap-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wr-magenta); display: inline-block;
}
.wr-founder-ansatz {
  background: #FFFFFF;
  border: 1px solid rgba(30,26,62,.08);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(30,26,62,.04);
  padding: 24px;
}
.wr-founder-ansatz::before {
  content: 'ANSATZ';
  display: block;
  font-family: var(--wr-font-mono); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wr-magenta); margin-bottom: 10px;
}
.wr-home-founder .wr-founder-ansatz,
.wr-home-founder .wr-founder-ansatz p { color: var(--wr-light-fg); }
.wr-home-founder .wr-home-founder__creds .elementor-icon-list-text {
  font-family: var(--wr-font-mono); font-size: 12px; letter-spacing: .04em;
}
.wr-home-founder .wr-home-founder__links .elementor-icon-list-text {
  font-family: var(--wr-font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Leistungen-Sektion (SOLL 2026-06-11): Manifest-Liste.
   Nur Layout-Komponenten + Pill-Look — Farben/Typo/Borders sind NATIV. */
.elementor-element.wr-lst-grid {
  display: grid !important; /* Layout-Insel wie Founder-Grid */
  grid-template-columns: 380px 1fr !important;
  --gap: 72px; --row-gap: 48px; --column-gap: 72px;
  align-items: var(--align-items, start);
}
.elementor-element.wr-lst-row {
  display: grid !important;
  grid-template-columns: 96px 1fr !important;
  --gap: 28px; --row-gap: 12px; --column-gap: 28px;
  transition: background .18s ease;
}
.wr-lst-row:hover { background: rgba(199,59,126,.04); }
@media (max-width: 900px) {
  .elementor-element.wr-lst-grid { grid-template-columns: 1fr !important; --gap: 40px; }
  .elementor-element.wr-lst-row { grid-template-columns: 1fr !important; --gap: 10px; }
}
/* Eyebrow-Pill, Magenta-Border-Variante (auf Dunkel — Design-Anweisung) */
.elementor-widget-heading.wr-pill-magenta .elementor-heading-title {
  background: rgba(199,59,126,.1);
  border-color: rgba(199,59,126,.4);
}
/* Tag-Pills (dunkel): Icon-List-Items als Hairline-Pills */
.elementor-widget-icon-list.wr-tag-pills .elementor-icon-list-items {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.elementor-widget-icon-list.wr-tag-pills .elementor-icon-list-item {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 7px 13px;
  width: fit-content;
  margin: 0;
}

/* Cases v2 „Ergebnis-Poster" (SOLL-Screenshot 2026-06-11):
   nur Grid + Poster-Details — Farben/Typo/Radius/Borders NATIV. */
.elementor-element.wr-cs2-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  --gap: 48px; --row-gap: 48px; --column-gap: 48px;
  align-items: var(--align-items, stretch);
}
@media (max-width: 980px) {
  .elementor-element.wr-cs2-grid { grid-template-columns: 1fr !important; --gap: 32px; }
}
/* Pill auf dunkler Karte */
.elementor-widget-heading.wr-cs2-pill .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  white-space: nowrap; width: fit-content;
}
.elementor-widget-heading.wr-cs2-pill .elementor-heading-title::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--wr-magenta-glow); box-shadow: 0 0 8px rgba(255,79,157,.9);
}
/* %-Akzent im Riesenwert */
.wr-cs2-value .pct { color: var(--wr-magenta); }
/* Poster-Karten-BG: kleiner Magenta-Schimmer oben auf Dunkel — Elementors
   nativer Radial-Gradient kennt keine Größenangabe, daher Bundle-Default
   (Editor-BG am Container überschreibt: element-Regel gewinnt Kaskade). */
.e-con.wr-cs2-card {
  background:
    radial-gradient(64% 38% at 50% -6%, rgba(199,59,126,.28), rgba(14,10,28,0) 100%),
    #0E0A1C;
}
/* Mittelblock vertikal zentrieren (flex-grow hat kein natives Pendant am e-con) */
.e-con.wr-cs2-mid { flex-grow: 1; }
/* Glow-Strich unter dem Projekt-Label */
.wr-cs2-name .elementor-heading-title::after {
  content: ''; display: block; width: 72px; height: 4px;
  margin: 16px auto 0; border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255,79,157,.9), rgba(255,79,157,0));
}
/* Ganze Case-Karte klickbar: vorhandenen Button-Link über die komplette Karte strecken */
.wr-cs2-link { position: relative; cursor: pointer; }
.wr-cs2-link .e-con, .wr-cs2-link .elementor-widget-button { position: static !important; }
.wr-cs2-link a.elementor-button { position: static; }
.wr-cs2-link a.elementor-button::after { content: ''; position: absolute; inset: 0; z-index: 5; }
.wr-cs2-link .wr-cs2-name .elementor-heading-title, .wr-cs2-link .wr-cs2-value { transition: color .2s ease; }
.wr-cs2-link:hover { transform: translateY(-3px); transition: transform .2s ease; }
.wr-cs2-link:hover .elementor-button { color: var(--wr-magenta-glow); }

/* Mandate-Sektion Variante C (Design-Handoff 2026-06-12):
   Layout-Grids + Karten-Hover — Farben/Typo/Borders NATIV am Element. */
.elementor-element.wr-mdl-grid {
  display: grid !important;
  /* feste 2 Spalten (5:8 wie SOLL) — auto-fit erzeugte eine leere
     Phantom-Spur (596px 596px 0px) + verlorenen Gap */
  grid-template-columns: minmax(340px, 5fr) minmax(0, 8fr) !important;
  --gap: 48px; --row-gap: 48px; --column-gap: 48px;
  align-items: var(--align-items, start);
}
@media (max-width: 900px) {
  .elementor-element.wr-mdl-grid { grid-template-columns: 1fr !important; }
}
/* Erbregel gibt Heading-Titles 1em margin-bottom — bei der 150px-Zahl
   bläht das die Box um 150px auf. Abstände macht hier der Flex-Gap. */
.wr-home-limit-section .elementor-heading-title { margin: 0; }
.elementor-element.wr-mdl-cards {
  display: grid !important;
  /* FESTES 2x2 — Bernd im Design-Chat: „nie 3+1" (auto-fit kippte
     bei breiter Spalte auf 3 Spuren) */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  --gap: 20px; --row-gap: 20px; --column-gap: 20px;
  align-items: var(--align-items, stretch);
}
@media (max-width: 620px) {
  .elementor-element.wr-mdl-cards { grid-template-columns: 1fr !important; }
}
.wr-mdl-card { transition: border-color .18s ease, box-shadow .18s ease; }
.wr-mdl-card:hover { border-color: rgba(199,59,126,.5); box-shadow: 0 0 32px rgba(199,59,126,.18); }
.wr-mdl-cta .elementor-button { transition: background .18s ease, box-shadow .18s ease; }
.wr-mdl-cta .elementor-button:hover { box-shadow: 0 0 24px rgba(255,79,157,.4); }

/* Belege-Sektion Variante C (Design-Handoff 2026-06-12) */
.wr-home-trust-section { background: radial-gradient(900px 420px at 50% -10%, rgba(199,59,126,.12), transparent 70%); }
/* Quellenzeile: ans Kartenende gepinnt (margin-top:auto hat kein natives Pendant) */
.wr-belege-quelle { margin-top: auto; }
.wr-belege-quelle .elementor-heading-title {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
}

/* Case-Study-Seite Variante D (Design-Handoff 2026-06-12) */
.wr-cshero {
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(199,59,126,.3), transparent 70%),
    linear-gradient(135deg, rgba(199,59,126,.22) 0%, rgba(126,42,90,.22) 50%, rgba(30,26,62,.22) 100%),
    #0B0814;
}
.wr-cscta {
  background:
    radial-gradient(700px 240px at 50% 115%, rgba(255,79,157,.35), transparent 70%),
    linear-gradient(135deg, #C73B7E 0%, #7E2A5A 50%, #1E1A3E 100%);
}
/* Tag-Pill (neutral, Hairline) — Gegenstück zur Magenta-Pill */
.elementor-widget-heading.wr-tag-pill .elementor-heading-title {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap; width: fit-content;
}
.elementor-element.wr-cs-2col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  --gap: 48px; --row-gap: 32px; --column-gap: 48px;
  align-items: var(--align-items, start);
}
.elementor-element.wr-cstile-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  --gap: 12px; --row-gap: 12px; --column-gap: 12px;
  align-items: var(--align-items, stretch);
}
.elementor-element.wr-cs-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
}
.wr-cs-stats > .e-con { border-right: 1px solid rgba(255,255,255,.12); }
.wr-cs-stats > .e-con:last-child { border-right: 0; }
/* 4er-Variante (Stat-Band der Service-Seiten) */
.elementor-element.wr-cs-stats--4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
/* Hero-Stat-Band der Service-Seiten: contained Box (wie GA wr-ga-stats) statt Full-width-Strip */
.wr-cs-stats.wr-ws-statband { max-width: 1180px; margin-left: auto !important; margin-right: auto !important; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; background: rgba(14,10,28,.72); }
@media (max-width: 980px) {
  .elementor-element.wr-cs-stats--4 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .wr-cs-stats--4 > .e-con:nth-child(2) { border-right: 0; }
  .wr-cs-stats--4 > .e-con:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 900px) {
  .elementor-element.wr-cs-2col { grid-template-columns: 1fr !important; }
  .elementor-element.wr-cstile-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 680px) {
  .elementor-element.wr-cstile-grid { grid-template-columns: 1fr !important; }
  .elementor-element.wr-cs-stats { grid-template-columns: 1fr !important; }
  .wr-cs-stats > .e-con { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
  .wr-cs-stats > .e-con:last-child { border-bottom: 0; }
}

/* Text-Editor-Absätze ERBEN die Schrift vom Widget — sonst schlägt die
   globale p-Regel jede native Editor-Typografie (Bernd-Direktive:
   Editor-Settings müssen IMMER greifen). Default bleibt Sans via
   Vererbungskette body -> Widget -> p. */
body.wr-app .elementor-widget-text-editor p { font-family: inherit; }

/* Keyword-Recherche-Seite (Hybrid GA-Gerüst + Content, 2026-06-12) */
.elementor-element.wr-kr-2col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  --gap: 48px; --row-gap: 32px; --column-gap: 48px;
  align-items: var(--align-items, start);
}
@media (max-width: 900px){ .elementor-element.wr-kr-2col{ grid-template-columns:1fr !important; } }
/* Pricing-Aside (nativ statt HTML-Insel) */
.wr-kr-aside { position: relative; overflow: hidden; }
.wr-kr-aside::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(199,59,126,.16), transparent 60%);
  pointer-events:none;
}
.wr-kr-aside > * { position: relative; }

/* Process-Karten hell-tauglich (wr-ga-process__step fehlte in is-light —
   nötig seit SEO-CRO-Umbau Process→hell, 2026-06-12) */
.is-light .wr-ga-process__step {
  background: #FFFFFF;
  border-color: rgba(30,26,62,.08);
  box-shadow: 0 8px 24px rgba(30,26,62,.04);
}
.is-light .wr-ga-process__step .elementor-heading-title { color: var(--wr-light-fg); }
.is-light .wr-ga-process__step .elementor-widget-text-editor,
.is-light .wr-ga-process__step .elementor-widget-text-editor p { color: var(--wr-light-muted); }
.is-light .wr-ga-process__num .elementor-heading-title { border-color: #FFFFFF; }

/* ============================================================
   NEUKUNDENGEWINNUNG-REDESIGN (Design-Handoff 2026-06-16):
   durchgaengiges dunkles Karten-Vokabular (.wr-dcard) auf hellen
   + dunklen Sektionen, Trust als dunkle Split-Sektion. Cases/FAQ
   wechseln per Widget-Settings auf hell.
   ============================================================ */

/* --- dunkle Diagnose/Leistungs-Karte (Verlauf + Magenta-Top + Glow) --- */
.e-con.wr-dcard {
  position: relative; overflow: hidden;
  background:
    radial-gradient(130% 75% at 50% 0%, rgba(199,59,126,.30) 0%, rgba(199,59,126,0) 58%),
    linear-gradient(180deg, #1E1A3E 0%, #0B0814 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 24px 64px rgba(11,8,20,.24);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.wr-dcard::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, #C73B7E 0%, rgba(199,59,126,0) 65%);
}
.wr-dcard:hover {
  transform: translateY(-4px); border-color: rgba(199,59,126,.42);
  box-shadow: 0 28px 72px rgba(11,8,20,.4), 0 0 30px rgba(199,59,126,.2);
}
/* Flagship-Karte (Proof): staerkere Magenta-Kante + Glow */
.e-con.wr-dcard--flag { border-color: rgba(199,59,126,.55); box-shadow: 0 24px 64px rgba(11,8,20,.3), inset 0 0 0 1px rgba(199,59,126,.25); }
.wr-dcard--flag::before { height: 3px; background: linear-gradient(90deg, #FF4F9D 0%, rgba(199,59,126,.2) 80%); }
/* Karten-Text hell — Bundle-Default (0,2,0), Editor uebersteuert pro Widget */
.wr-dcard .elementor-heading-title { color: #FFFFFF; }
.wr-dcard .elementor-widget-text-editor,
.wr-dcard .elementor-widget-text-editor p { color: var(--wr-cool-white); }
.wr-dcard .wr-dcard__num .elementor-heading-title { color: var(--wr-magenta); }
/* Icon-Kachel im Kanal-Mix (icon-Widget) */
.wr-dcard .wr-dcard__ic .elementor-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(199,59,126,.14); border: 1px solid var(--wr-line-magenta);
  color: var(--wr-magenta); font-size: 19px;
}
.wr-dcard .wr-dcard__ic .elementor-icon svg { width: 20px; height: 20px; fill: var(--wr-magenta-glow); }

/* --- dunkle Karten-Grids (4er Problem / 3er Kanal-Mix) --- */
.elementor-element.wr-dcards { display: grid !important; --gap: 22px; --row-gap: 22px; --column-gap: 22px; align-items: var(--align-items, stretch); }
.elementor-element.wr-dcards--4 { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
.elementor-element.wr-dcards--3 { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
@media (max-width: 1080px) { .elementor-element.wr-dcards--4, .elementor-element.wr-dcards--3 { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 600px) { .elementor-element.wr-dcards--4, .elementor-element.wr-dcards--3 { grid-template-columns: 1fr !important; } }

/* --- Trust dark-split ("Wer pitcht, liefert auch") --- */
.elementor-element.wr-nk-trust__grid {
  display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr) !important;
  --gap: 56px; --column-gap: 56px; --row-gap: 36px; align-items: var(--align-items, center);
}
@media (max-width: 980px) { .elementor-element.wr-nk-trust__grid { grid-template-columns: 1fr !important; --gap: 32px; } }
.elementor-element.wr-nk-trust__list {
  display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  --gap: 14px; --column-gap: 14px; --row-gap: 14px; align-items: var(--align-items, stretch);
}
@media (max-width: 600px) { .elementor-element.wr-nk-trust__list { grid-template-columns: 1fr !important; } }
.e-con.wr-nk-trust__item {
  background: var(--wr-glass); border: 1px solid var(--wr-line); border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.e-con.wr-nk-trust__item:hover { border-color: var(--wr-line-magenta); box-shadow: 0 0 24px rgba(199,59,126,.12); }
.wr-nk-trust__item .elementor-heading-title { color: #FFFFFF; }
.wr-nk-trust__item .elementor-widget-text-editor,
.wr-nk-trust__item .elementor-widget-text-editor p { color: var(--wr-cool-white); }
/* Tick-Kachel (icon-Widget) in Trust + Check-Items */
.wr-tick .elementor-icon {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: rgba(199,59,126,.14); border: 1px solid var(--wr-line-magenta);
  color: var(--wr-magenta); font-size: 12px;
}

/* ============================================================
   MISSIONSANFRAGE / KONTAKT (Design-Handoff 2026-06-16, V1):
   Hero zentriert + Trust-Pills, heller Logo-Strip, helle Main
   (Off-White) mit dunkler Person-Card + dunklem Panel. Echtes
   TidyCal-Embed + Elementor-Form bleiben nativ, im dunklen Panel.
   ============================================================ */
/* Hero zentriert */
.wr-ct-hero .wr-eyebrow-pill .elementor-heading-title { margin-left: auto; margin-right: auto; }
.wr-ct-hero .elementor-heading-title em { color: var(--wr-magenta); font-style: normal; }
.wr-ct-pills { display: flex !important; flex-wrap: wrap; justify-content: center; --gap: 10px; --row-gap: 10px; --column-gap: 10px; }
.e-con.wr-ct-pill { flex-direction: row !important; align-items: center; width: auto; padding: 9px 16px; border-radius: 999px; background: var(--wr-glass); border: 1px solid var(--wr-line); }
.wr-ct-pill .elementor-icon { color: var(--wr-magenta); font-size: 14px; }
.wr-ct-pill .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--wr-cool-white); }

/* Logo-Strip (hell) */
.wr-ct-logos__row { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: center; --gap: 16px; --row-gap: 12px; --column-gap: 36px; }
.wr-ct-logos__lbl .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wr-light-muted); }
.wr-ct-logo .elementor-heading-title { font-family: var(--wr-font-display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: rgba(30,26,62,.62); }
.wr-ct-logo .elementor-heading-title::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--wr-magenta); margin-right: 9px; vertical-align: middle; }

/* Main-Grid */
.elementor-element.wr-ct-grid { display: grid !important; grid-template-columns: 0.82fr 1.18fr !important; --gap: 28px; --column-gap: 28px; --row-gap: 28px; align-items: var(--align-items, start); }
@media (max-width: 1024px) { .elementor-element.wr-ct-grid { grid-template-columns: 1fr !important; } .wr-ct-aside { order: 2; } .wr-ct-panelcol { order: 1; } }

/* Person-Card (dunkel auf hell) */
.e-con.wr-ct-person { position: relative; overflow: hidden; border-radius: var(--wr-radius-xl); background: radial-gradient(130% 90% at 50% 0%, rgba(199,59,126,.20) 0%, rgba(199,59,126,0) 55%), linear-gradient(180deg, #1E1A3E 0%, #0B0814 100%); border: 1px solid var(--wr-line-strong); box-shadow: 0 24px 64px rgba(11,8,20,.3); }
.wr-ct-person::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--wr-magenta) 0%, rgba(199,59,126,0) 65%); z-index: 2; }
.wr-ct-person .elementor-heading-title { color: #FFFFFF; }
.wr-ct-prole .elementor-heading-title { font-family: var(--wr-font-mono); color: var(--wr-magenta); }
.wr-ct-pquote .elementor-widget-container, .wr-ct-pquote p { color: var(--wr-cool-white); font-size: 15px; line-height: 1.55; }
/* Avatar (icon-widget im Magenta-Kreis) */
.wr-ct-avatar .elementor-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--wr-gradient-brand); box-shadow: var(--wr-glow-magenta); color: #fff; font-size: 22px; }

/* Benefits (ink auf hell) */
.wr-ct-benefits .elementor-icon-list-item { align-items: flex-start; padding: 13px 2px; border-bottom: 1px solid rgba(30,26,62,.1); }
.wr-ct-benefits .elementor-icon-list-item:last-child { border-bottom: 0; }
.wr-ct-benefits .elementor-icon-list-icon { color: var(--wr-magenta); }
.wr-ct-benefits .elementor-icon-list-text { color: var(--wr-light-fg); font-size: 14px; }
.wr-ct-benefits .elementor-icon-list-text b { font-weight: 700; }
.wr-ct-benefits .elementor-icon-list-text span { display: block; margin-top: 3px; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--wr-light-muted); }

/* Direkt-Kontakt-Methoden (hell auf Off-White) */
.wr-ct-dlbl .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wr-light-muted); }
.e-con.wr-ct-method { flex-direction: row !important; align-items: center; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid rgba(30,26,62,.12); box-shadow: 0 14px 30px -22px rgba(30,26,62,.4); transition: border-color .24s ease, transform .24s ease; }
.e-con.wr-ct-method { position: relative; }
.e-con.wr-ct-method:hover { border-color: var(--wr-magenta); transform: translateX(3px); }
.wr-ct-method__v a { color: inherit; text-decoration: none; }
.wr-ct-method__v a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wr-ct-method .elementor-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(199,59,126,.08); border: 1px solid rgba(199,59,126,.25); color: var(--wr-magenta); font-size: 16px; }
.wr-ct-method__k .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-light-muted); }
.wr-ct-method__v .elementor-heading-title { font-size: 14.5px; font-weight: 600; color: var(--wr-light-fg); }

/* Aktions-Panel (dunkel) */
.e-con.wr-ct-panel { position: relative; overflow: hidden; border-radius: var(--wr-radius-2xl); background: linear-gradient(180deg, rgba(30,26,62,.72) 0%, rgba(11,8,20,.92) 100%); border: 1px solid var(--wr-line-strong); box-shadow: 0 40px 100px -40px rgba(11,8,20,.6); }
.wr-ct-panel::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--wr-magenta) 0%, var(--wr-magenta-glow) 30%, rgba(199,59,126,0) 75%); z-index: 2; }
/* Panel view-head */
.wr-ct-vhead { border-bottom: 1px solid var(--wr-line); }
.wr-ct-vtitle .elementor-heading-title { color: #FFFFFF; }
.wr-ct-vmeta .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.wr-ct-vmeta .elementor-icon-list-text { font-family: var(--wr-font-mono); font-size: 11px; color: var(--wr-muted); }
.wr-ct-vmeta .elementor-icon-list-icon { color: var(--wr-magenta); }
/* TidyCal-Embed-Wrapper */
.wr-ct-cal .tidycal-embed { min-height: 320px; }

/* Elementor-Form im dunklen Panel */
.wr-ct-panel .elementor-field-group > label, .wr-ct-form .elementor-field-group > label { font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-muted); }
.wr-ct-panel .elementor-field-textual { background: rgba(11,8,20,.5) !important; border: 1px solid var(--wr-line-strong) !important; border-radius: var(--wr-radius-md) !important; color: #fff !important; padding: 14px 16px !important; }
.wr-ct-panel .elementor-field-textual::placeholder { color: var(--wr-muted-dim) !important; }
.wr-ct-panel .elementor-field-textual:focus { border-color: var(--wr-magenta) !important; box-shadow: 0 0 0 3px rgba(199,59,126,.2) !important; }
.wr-ct-panel textarea.elementor-field-textual { min-height: 120px; line-height: 1.55; }
.wr-ct-panel .elementor-button[type=submit] { background: var(--wr-magenta); color: #fff; border-radius: 999px; font-weight: 600; letter-spacing: .03em; padding: 14px 26px; transition: box-shadow .2s ease; }
.wr-ct-panel .elementor-button[type=submit]:hover { box-shadow: var(--wr-glow-magenta); }

/* ============================================================
   WEBLOG / FORSCHUNGSPAPIERE — Index (Design-Handoff 2026-06-16):
   heller editorialer Card-Grid. bdt-post-grid (Skin alite) ans
   wb-card angeglichen: weisse Karten, Bild oben, Body unten.
   ============================================================ */
/* Header */
.wr-wl-hero .wr-eyebrow-pill .elementor-heading-title { display: inline-flex; align-items: center; }
.wr-wl-rule { height: 1px !important; min-height: 1px; background: linear-gradient(90deg, rgba(199,59,126,.45), rgba(30,26,62,.08) 55%) !important; }

/* Karten-Grid (bdt-post-grid Skin alite) */
/* UIkit-Flex-Grid → festes CSS-Grid (3 Spalten); alite setzt keine child-width */
.wr-wl-grid .bdt-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 24px !important; margin: 0 !important; }
.wr-wl-grid .bdt-grid > * { width: auto !important; max-width: none !important; padding-left: 0 !important; margin: 0 !important; }
@media (max-width: 1000px) { .wr-wl-grid .bdt-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 680px) { .wr-wl-grid .bdt-grid { grid-template-columns: 1fr !important; } }
.wr-wl-grid .bdt-post-grid-item { display: flex !important; flex-direction: column; height: 100%; }
.wr-wl-grid .bdt-post-grid-img-wrap, .wr-wl-grid .bdt-post-grid-img-wrap a { width: 100% !important; }
.wr-wl-grid .bdt-post-grid-desc { flex: 1; display: flex; flex-direction: column; }
.wr-wl-grid .bdt-post-grid-item {
  background: #fff; border: 1px solid rgba(30,26,62,.1); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(30,26,62,.03), 0 24px 50px -34px rgba(30,26,62,.4);
  transition: transform .24s ease, box-shadow .24s ease;
}
.wr-wl-grid .bdt-post-grid-item:hover { transform: translateY(-4px); box-shadow: 0 32px 64px -30px rgba(30,26,62,.5); }
.wr-wl-grid .bdt-post-grid-img-wrap, .wr-wl-grid .bdt-post-grid-img-wrap a { aspect-ratio: 16/10; display: block; }
.wr-wl-grid .bdt-post-grid-desc { padding: 22px 22px 24px !important; background: #fff; }
.wr-wl-grid .bdt-post-grid-category { display: none !important; }
.wr-wl-grid .bdt-post-grid-title, .wr-wl-grid .bdt-post-grid-title a {
  font-family: var(--wr-font-display) !important; font-weight: 800 !important; font-size: 19px !important;
  line-height: 1.16 !important; letter-spacing: .01em !important; text-transform: uppercase !important;
  color: var(--wr-light-fg) !important; text-wrap: balance; transition: color .18s ease;
}
.wr-wl-grid .bdt-post-grid-item:hover .bdt-post-grid-title a { color: var(--wr-magenta) !important; }
.wr-wl-grid .bdt-post-grid-excerpt, .wr-wl-grid .bdt-post-grid-excerpt p {
  font-family: var(--wr-font-sans) !important; font-size: 13.5px !important; line-height: 1.55 !important;
  color: rgba(30,26,62,.62) !important; text-transform: none !important; letter-spacing: 0 !important;
}
/* Teaser einheitlich auf 3 Zeilen begrenzen (manuelle vs. Auto-Excerpts uneinheitlich) */
.wr-wl-grid .bdt-post-grid-excerpt {
  display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(13.5px * 1.55 * 3); margin-bottom: 18px !important;
}
.wr-wl-grid .bdt-post-grid-meta, .wr-wl-grid .bdt-post-grid-meta * {
  font-family: var(--wr-font-mono) !important; font-size: 11px !important; letter-spacing: .04em !important;
  color: rgba(30,26,62,.5) !important; text-transform: none !important;
}
.wr-wl-grid .bdt-post-grid-readmore, .wr-wl-grid .bdt-readmore-button {
  color: var(--wr-magenta) !important; background: transparent !important; padding: 0 !important;
  font-family: var(--wr-font-mono) !important; font-size: 12px !important; letter-spacing: .04em !important;
}
/* Footer-Block (Weiterlesen + Datum) einheitlich an die Kartenunterkante */
.wr-wl-grid .bdt-post-grid-desc > *:last-child { margin-top: auto !important; }
.wr-wl-grid .bdt-post-grid-meta { margin-top: 14px !important; }
/* Pager (bdt-pagination) → wb-pager-Look */
.wr-wl-grid .bdt-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; list-style: none; padding: 0; }
.wr-wl-grid .bdt-pagination a, .wr-wl-grid .bdt-pagination span {
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(30,26,62,.14); color: rgba(30,26,62,.7);
  font-family: var(--wr-font-mono); font-size: 13px; text-decoration: none; transition: border-color .18s ease, color .18s ease;
}
.wr-wl-grid .bdt-pagination a:hover { border-color: var(--wr-magenta); color: var(--wr-light-fg); }
.wr-wl-grid .bdt-pagination .bdt-active span, .wr-wl-grid .bdt-pagination .bdt-active a { background: var(--wr-magenta); border-color: transparent; color: #fff; }

/* ============================================================
   BLOG-BEITRAG / Single Post (Design-Handoff 2026-06-16):
   dunkler Gradient-Hero + heller Artikel (bt-prose) + sticky
   Aside (TOC/Share/CTA) + Author-Box + Related. Theme-Widgets
   (theme-post-title/-content, post-info, table-of-contents,
   author-box, posts) ans bt-Design angeglichen.
   ============================================================ */
/* Hero (dunkel + Gradient) */
.e-con.wr-bt-hero { position: relative; overflow: hidden; background: #0B0814 !important; }
.wr-bt-hero::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(135deg, #C73B7E 0%, #7E2A5A 45%, #1E1A3E 100%); opacity:.22; }
.wr-bt-hero::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 420px at 18% 0%, rgba(199,59,126,.32), transparent 70%); }
.wr-bt-hero > .e-con-inner, .wr-bt-hero > * { position: relative; z-index: 1; }
.wr-bt-hero .elementor-widget-theme-post-title .elementor-heading-title { font-family: var(--wr-font-display); font-weight: 900; font-size: clamp(36px,4.6vw,56px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.wr-bt-hero .elementor-widget-post-info { color: rgba(255,255,255,.6); }
.wr-bt-hero .elementor-widget-post-info .elementor-icon-list-text, .wr-bt-hero .elementor-widget-post-info .elementor-icon-list-icon i { color: rgba(255,255,255,.6) !important; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.wr-bt-back .elementor-heading-title, .wr-bt-back a { font-family: var(--wr-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6) !important; }
.wr-bt-cat .elementor-heading-title { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--wr-magenta); color: #fff; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }

/* Artikel-Content (hell, prose) */
.wr-bt-main { background: var(--wr-light-bg) !important; }
.wr-bt-prose .elementor-widget-container { font-size: 16.5px; line-height: 1.72; color: #1E1A3E; }
.wr-bt-prose .elementor-widget-container, .wr-bt-prose p, .wr-bt-prose li, .wr-bt-prose td, .wr-bt-prose h4, .wr-bt-prose strong, .wr-bt-prose b, .wr-bt-prose span:not([style*="color"]) { color: #1E1A3E !important; }
.wr-bt-prose h2 { margin: 52px 0 0; font-family: var(--wr-font-display); font-weight: 800; font-size: 28px; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; color: #1E1A3E; scroll-margin-top: 92px; }
.wr-bt-prose h3 { margin: 32px 0 0; font-family: var(--wr-font-display); font-weight: 700; font-size: 19px; line-height: 1.2; text-transform: uppercase; color: #1E1A3E; }
.wr-bt-prose p { margin: 18px 0 0; max-width: 72ch; }
.wr-bt-prose a, .wr-bt-prose a span { color: var(--wr-magenta) !important; text-decoration: underline; text-decoration-color: rgba(199,59,126,.35); text-underline-offset: 3px; }
.wr-bt-prose a:hover { color: var(--wr-magenta-glow); }
.wr-bt-prose ul, .wr-bt-prose ol { margin: 18px 0 0; max-width: 72ch; padding-left: 22px; display: grid; gap: 10px; }
.wr-bt-prose li { line-height: 1.6; }
.wr-bt-prose img { border-radius: 12px; margin: 24px 0 0; }
.wr-bt-prose blockquote { margin: 32px 0 0; padding: 22px 26px; border-left: 3px solid var(--wr-magenta); background: rgba(199,59,126,.06); border-radius: 0 12px 12px 0; font-family: var(--wr-font-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: #1E1A3E; }
.wr-bt-prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 24px 0 0; border: 1px solid rgba(30,26,62,.1); border-radius: 14px; overflow: hidden; }
.wr-bt-prose table th, .wr-bt-prose table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid rgba(30,26,62,.08); vertical-align: top; }
.wr-bt-prose table thead th { background: #0B0814; color: #fff; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.wr-bt-prose table td:first-child { font-weight: 600; color: #1E1A3E; }
.wr-bt-prose table td { color: rgba(30,26,62,.7); }

/* Aside (TOC / Share / CTA) */
.wr-bt-aside { position: sticky; top: 92px; }
.wr-bt-toc .elementor-widget-container { background: #fff; border: 1px solid rgba(30,26,62,.08); border-radius: 14px; padding: 22px 24px; }
.wr-bt-toc .elementor-toc__header-title { font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(30,26,62,.55); }
.wr-bt-toc .elementor-toc__list-item-text { font-size: 13.5px; color: rgba(30,26,62,.7); }
.wr-bt-toc .elementor-toc__list-item.elementor-item-active > .elementor-toc__list-item-text-wrapper .elementor-toc__list-item-text, .wr-bt-toc .elementor-item-active .elementor-toc__list-item-text { color: var(--wr-magenta) !important; font-weight: 600; }
.wr-bt-cta { position: relative; overflow: hidden; border-radius: 14px; background: radial-gradient(120% 90% at 50% 0%, rgba(199,59,126,.22) 0%, rgba(199,59,126,0) 55%), linear-gradient(180deg, #1E1A3E 0%, #0B0814 100%); border: 1px solid var(--wr-line-strong); }
.wr-bt-cta::before { content:""; position:absolute; left:0; top:0; right:0; height:2px; background: linear-gradient(90deg, var(--wr-magenta), rgba(199,59,126,0) 65%); }
.wr-bt-cta .elementor-heading-title { color: #fff; }
.wr-bt-cta .elementor-widget-text-editor { color: var(--wr-muted); }
.wr-bt-share .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(30,26,62,.5); }
.e-con.wr-bt-sidecard { background: #fff; border: 1px solid rgba(30,26,62,.08); border-radius: 14px; }

/* Author-Box */
.wr-bt-author .elementor-author-box { padding: 24px; border-radius: 14px; background: #fff; border: 1px solid rgba(30,26,62,.1); box-shadow: 0 8px 24px rgba(30,26,62,.04); }
.wr-bt-author .elementor-author-box__name { font-family: var(--wr-font-display); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #1E1A3E; }
.wr-bt-author .elementor-author-box__bio { font-size: 13.5px; line-height: 1.55; color: rgba(30,26,62,.65); }

/* Related (posts-widget) */
.wr-bt-related { background: var(--wr-light-bg) !important; }
.wr-bt-related .elementor-heading-title { font-family: var(--wr-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(30,26,62,.5); }
.wr-bt-related .elementor-post { background: #fff; border: 1px solid rgba(30,26,62,.1); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 50px -36px rgba(30,26,62,.4); transition: transform .24s ease; }
.wr-bt-related .elementor-post:hover { transform: translateY(-4px); }
.wr-bt-related .elementor-post__thumbnail { aspect-ratio: 16/10; padding-bottom: 0 !important; }
.wr-bt-related .elementor-post__text { padding: 18px 20px 20px; }
.wr-bt-related .elementor-post__title, .wr-bt-related .elementor-post__title a { font-family: var(--wr-font-display); font-weight: 800; font-size: 16px; line-height: 1.18; text-transform: uppercase; color: #1E1A3E; }
.wr-bt-related .elementor-post:hover .elementor-post__title a { color: var(--wr-magenta); }
.wr-bt-related .elementor-post__meta-data { font-family: var(--wr-font-mono); font-size: 11px; color: rgba(30,26,62,.5); }

/* Reading-Progress + Layout */
.elementor-element.wr-bt-grid { --gap: 60px; --column-gap: 60px; align-items: var(--align-items, start); }

/* ============================================================
   RE-LAYOUT der Bestands-Ranking-Seiten (strategieworkshop,
   design-sprint-agentur, product-owner-as-a-service) 2026-06-16:
   struktur-erhaltend ans Brand. Texte/Reihenfolge UNVERAENDERT,
   nur Hell/Dunkel-Rhythmus, Lesbarkeit, Magenta-Akzente.
   ============================================================ */
/* Sektion-Hintergruende */
.elementor-element.wr-rl-dark { background-color: #0B0814 !important; }
.elementor-element.wr-rl-light { background-color: #FAFAF7 !important; }
.elementor-element.wr-rl-violet { background-color: #14102A !important; }
/* Text-Farben dunkle Sektion */
.wr-rl-dark .elementor-heading-title, .wr-rl-dark .elementor-heading-title span { color: #FFFFFF !important; }
.wr-rl-dark .elementor-widget-text-editor, .wr-rl-dark .elementor-widget-text-editor p, .wr-rl-dark .elementor-widget-text-editor li,
.wr-rl-dark .elementor-icon-list-text, .wr-rl-dark .elementor-icon-list-item a { color: var(--wr-cool-white) !important; }
.wr-rl-dark .elementor-widget-text-editor b, .wr-rl-dark .elementor-widget-text-editor strong { color: #FFFFFF !important; }
/* dunkle Sektion: Widget-Titel weiß, Beschreibungen cool-white (icon-box/image-box/step-flow/testimonial) */
.wr-rl-dark .elementor-icon-box-title, .wr-rl-dark .elementor-icon-box-title a,
.wr-rl-dark .elementor-image-box-title, .wr-rl-dark .elementor-image-box-title a,
.wr-rl-dark .bdt-step-flow-title, .wr-rl-dark .bdt-step-flow-title a,
.wr-rl-dark .elementor-testimonial-name { color: #FFFFFF !important; }
.wr-rl-dark .elementor-icon-box-description, .wr-rl-dark .elementor-image-box-description,
.wr-rl-dark .bdt-step-flow-description, .wr-rl-dark .bdt-step-flow-content,
.wr-rl-dark .elementor-testimonial-content, .wr-rl-dark .elementor-testimonial-job { color: var(--wr-cool-white) !important; }
.wr-rl-dark .elementor-icon-box-icon i, .wr-rl-dark .elementor-icon-box-icon svg,
.wr-rl-dark .bdt-step-flow-icon i, .wr-rl-dark .bdt-step-flow-icon svg { color: var(--wr-magenta) !important; fill: var(--wr-magenta) !important; }
/* Text-Farben helle Sektion */
.wr-rl-light .elementor-heading-title, .wr-rl-light .elementor-heading-title span { color: #1E1A3E !important; }
.wr-rl-light .elementor-widget-text-editor, .wr-rl-light .elementor-widget-text-editor p, .wr-rl-light .elementor-widget-text-editor li,
.wr-rl-light .elementor-icon-list-text, .wr-rl-light .elementor-icon-list-item a { color: rgba(30,26,62,.74) !important; }
.wr-rl-light .elementor-widget-text-editor b, .wr-rl-light .elementor-widget-text-editor strong { color: #1E1A3E !important; }
/* helle Sektion: Widget-Titel ink, Beschreibungen ink-muted (icon-box/image-box/step-flow/testimonial) */
.wr-rl-light .elementor-icon-box-title, .wr-rl-light .elementor-icon-box-title a,
.wr-rl-light .elementor-image-box-title, .wr-rl-light .elementor-image-box-title a,
.wr-rl-light .bdt-step-flow-title, .wr-rl-light .bdt-step-flow-title a,
.wr-rl-light .elementor-testimonial-name { color: #1E1A3E !important; }
.wr-rl-light .elementor-icon-box-description, .wr-rl-light .elementor-image-box-description,
.wr-rl-light .bdt-step-flow-description, .wr-rl-light .bdt-step-flow-content,
.wr-rl-light .elementor-testimonial-content, .wr-rl-light .elementor-testimonial-job { color: rgba(30,26,62,.74) !important; }
/* Accordion/Toggle/FAQ (Element-Pack bdt + nativ) — Titel + Antworttext einfärben */
.wr-rl-dark .bdt-ep-accordion-title, .wr-rl-dark .bdt-ep-accordion-title-text, .wr-rl-dark .bdt-ep-accordion-title span,
.wr-rl-dark .elementor-accordion-title, .wr-rl-dark .elementor-toggle-title { color: #FFFFFF !important; }
.wr-rl-dark .bdt-ep-accordion-content, .wr-rl-dark .bdt-ep-accordion-content p, .wr-rl-dark .bdt-ep-accordion-content li,
.wr-rl-dark .elementor-tab-content, .wr-rl-dark .elementor-tab-content p { color: var(--wr-cool-white) !important; }
.wr-rl-light .bdt-ep-accordion-title, .wr-rl-light .bdt-ep-accordion-title-text, .wr-rl-light .bdt-ep-accordion-title span,
.wr-rl-light .elementor-accordion-title, .wr-rl-light .elementor-toggle-title { color: #1E1A3E !important; }
.wr-rl-light .bdt-ep-accordion-content, .wr-rl-light .bdt-ep-accordion-content p, .wr-rl-light .bdt-ep-accordion-content li,
.wr-rl-light .elementor-tab-content, .wr-rl-light .elementor-tab-content p { color: rgba(30,26,62,.74) !important; }
/* Icon-List Häkchen/Icons → Magenta (beide) */
.wr-rl-dark .elementor-icon-list-icon i, .wr-rl-light .elementor-icon-list-icon i,
.wr-rl-dark .elementor-icon-list-icon svg, .wr-rl-light .elementor-icon-list-icon svg { color: var(--wr-magenta) !important; fill: var(--wr-magenta) !important; }
/* Buttons → Brand-Magenta */
.wr-rl-dark .elementor-button, .wr-rl-light .elementor-button {
  background-color: var(--wr-magenta) !important; color: #FFFFFF !important; border-radius: 999px !important;
  font-family: var(--wr-font-sans) !important; font-weight: 600 !important; letter-spacing: .03em !important; border: 0 !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
.wr-rl-dark .elementor-button:hover, .wr-rl-light .elementor-button:hover { box-shadow: var(--wr-glow-magenta) !important; transform: translateY(-1px); }
/* Karten-Container (Boxen mit Rahmen/Hintergrund) ans dunkle Karten-Vokabular */
.e-con.wr-rl-card, .elementor-element.wr-rl-card {
  background: radial-gradient(130% 75% at 50% 0%, rgba(199,59,126,.22) 0%, rgba(199,59,126,0) 58%), linear-gradient(180deg, #1E1A3E 0%, #0B0814 100%) !important;
  border: 1px solid rgba(255,255,255,.09) !important; border-radius: 16px !important; box-shadow: 0 24px 64px rgba(11,8,20,.24) !important; overflow: hidden; position: relative;
}
.wr-rl-card .elementor-heading-title { color: #FFFFFF !important; }
.wr-rl-card .elementor-widget-text-editor, .wr-rl-card .elementor-widget-text-editor p { color: var(--wr-cool-white) !important; }
/* Eyebrow-/Section-Label als Pill */
.wr-rl-eyebrow .elementor-heading-title { display: inline-block; padding: 7px 14px; border-radius: 999px; background: var(--wr-magenta); color: #FFFFFF !important; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.wr-rl-light .wr-rl-eyebrow .elementor-heading-title { background: #0B0814; }
/* Final-CTA-Band (Magenta-Gradient) */
.elementor-element.wr-rl-cta { background: linear-gradient(135deg, #C73B7E 0%, #7E2A5A 50%, #1E1A3E 100%) !important; }
.wr-rl-cta .elementor-heading-title { color: #FFFFFF !important; }
.wr-rl-cta .elementor-widget-text-editor, .wr-rl-cta .elementor-widget-text-editor p { color: rgba(255,255,255,.92) !important; }
.wr-rl-cta .elementor-button { background-color: #FFFFFF !important; color: var(--wr-magenta-deep) !important; }
/* Hero-Button (auf Video) Magenta erzwingen, Sektion ohne bg-Override */
.wr-rl-herobtn .elementor-button { background-color: var(--wr-magenta) !important; color: #fff !important; border-radius: 999px !important; border: 0 !important; }
.wr-rl-herobtn .elementor-button:hover { box-shadow: var(--wr-glow-magenta) !important; }


/* ============================================================
   STANDORTE v2 (st-*) — Remote-First · Missionskarte
   Sektions-Padding nativ in Elementor (editor-steuerbar); hier:
   Wrapper, Typo, Komponenten, Modifier. Tokens aus colors_and_type.
   ============================================================ */
.st-wrap { max-width: 1180px; margin: 0 auto; padding: 0 48px; }
.st-center { text-align: center; }
.st-kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--wr-magenta); }
.st-kicker::before, .st-kicker::after { content: ""; width: 28px; height: 1px; background: var(--wr-line-magenta); }
.st-h2 { margin: 18px 0 0; font-family: var(--wr-font-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.st-lead { margin: 16px auto 0; font-size: 17px; line-height: 1.7; color: var(--wr-muted); max-width: 62ch; }

/* HERO (Padding nativ) */
.st-hero { position: relative; overflow: hidden; background: var(--wr-light-bg); color: var(--wr-light-fg); }
/* Decor-Insel (Grid + Konstellations-SVG) als absolut-deckender Layer hinter dem Hero-Inhalt. */
.elementor-element.st-hero__decor { position: absolute; inset: 0; z-index: 0; margin: 0; pointer-events: none; }
.st-hero__grid { position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: linear-gradient(rgba(30,26,62,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(30,26,62,.055) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 92% at 50% 4%, #000 38%, transparent 86%); mask-image: radial-gradient(120% 92% at 50% 4%, #000 38%, transparent 86%); }
.st-hero__chart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.st-hero__in { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; text-align: center; }
.st-hero h1 { margin: 28px auto 0; font-family: var(--wr-font-display); font-weight: 900; font-size: clamp(40px, 6vw, 82px); line-height: .96; letter-spacing: .005em; text-transform: uppercase; color: var(--wr-light-fg); max-width: 15ch; text-wrap: balance; }
.st-hero h1 .strike { color: #8A85A0; text-decoration: line-through; text-decoration-color: var(--wr-magenta); text-decoration-thickness: 5px; text-decoration-skip-ink: none; }
.st-hero h1 .accent { display: block; margin-top: 8px; color: transparent; background: linear-gradient(96deg, #C73B7E 0%, #7E2A5A 60%, #1E1A3E 100%); -webkit-background-clip: text; background-clip: text; }
.st-hero__sub { margin: 24px auto 0; font-size: 18px; line-height: 1.65; color: var(--wr-light-muted); max-width: 60ch; }
.st-hero__sub b { color: var(--wr-light-fg); font-weight: 600; }
.st-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; justify-content: center; }
/* Ghost-Button auf hellem Hero → dunkle Outline */
.st-hero .wr-btn--ghost .elementor-button { color: var(--wr-light-fg) !important; border-color: rgba(30,26,62,.22) !important; background: transparent !important; }
.st-hero .wr-btn--ghost .elementor-button:hover { border-color: var(--wr-magenta) !important; background: rgba(199,59,126,.05) !important; }

/* hero proof stats (light) */
.st-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 60px; background: rgba(30,26,62,.12); border: 1px solid rgba(30,26,62,.12); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -42px rgba(30,26,62,.4); }
.st-proof__c { background: #fff; padding: 26px 24px; text-align: left; }
.st-proof__n { font-family: var(--wr-font-display); font-weight: 800; font-size: 36px; line-height: 1; color: var(--wr-light-fg); }
.st-proof__n em { font-style: normal; color: var(--wr-magenta); }
.st-proof__l { margin-top: 12px; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-light-muted); line-height: 1.45; }

/* SECTION SHELL (Padding nativ) */
.st-sec { position: relative; overflow: hidden; }
.st-sec--light { background: var(--wr-light-bg); color: var(--wr-light-fg); }
.st-sec--light .st-kicker { color: var(--wr-magenta); }
.st-sec--light .st-kicker::before, .st-sec--light .st-kicker::after { background: rgba(199,59,126,.4); }
.st-sec--light .st-h2 { color: var(--wr-light-fg); }
.st-sec--light .st-lead { color: var(--wr-light-muted); }
.st-sec--light .st-ohcard { background: #fff; border-color: rgba(30,26,62,.12); box-shadow: 0 20px 40px -30px rgba(30,26,62,.35); }
.st-sec--light .st-ohcard:hover { border-color: rgba(199,59,126,.4); background: #fff; }
.st-sec--light .st-ohcard h3 { color: #1E1A3E; }
.st-sec--light .st-ohcard p { color: #4A4666; }
.st-sec--light .st-ohcard__cost { color: #1E1A3E; border-top-color: rgba(30,26,62,.1); }
.st-sec--light .st-ohcard__cost s { text-decoration-color: var(--wr-magenta); }
.st-sec--light .st-cmp { border-color: rgba(30,26,62,.14); background: #fff; box-shadow: 0 20px 40px -30px rgba(30,26,62,.35); }
.st-sec--light .st-cmp__head > div { border-bottom-color: rgba(30,26,62,.1); }
.st-sec--light .st-cmp__h-dim { color: #8A85A0; }
.st-sec--light .st-cmp__h-old { color: #6B6680; background: rgba(30,26,62,.02); }
.st-sec--light .st-cmp__h-new { color: #1E1A3E; background: linear-gradient(180deg, rgba(199,59,126,.12), rgba(199,59,126,.04)); }
.st-sec--light .st-cmp__dim { border-bottom-color: rgba(30,26,62,.08); color: #8A85A0; }
.st-sec--light .st-cmp__old { border-bottom-color: rgba(30,26,62,.08); background: rgba(30,26,62,.02); color: #6B6680; }
.st-sec--light .st-cmp__new { border-bottom-color: rgba(30,26,62,.08); background: linear-gradient(180deg, rgba(199,59,126,.06), rgba(199,59,126,.02)); color: #1E1A3E; }
.st-sec--light .st-cmp__new svg { color: var(--wr-magenta); }
.st-sec__glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(199,59,126,.12) 0%, rgba(199,59,126,0) 68%); }

/* MISSIONSKARTE CONSOLE (Insel) */
.mapconsole { position: relative; margin: 0 auto; max-width: 1080px; border: 1px solid var(--wr-line-strong); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #100B22 0%, #08050F 100%); box-shadow: 0 50px 120px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.mapconsole__bar { position: relative; z-index: 3; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--wr-line); background: rgba(8,5,15,.6); backdrop-filter: blur(8px); }
.mapconsole__live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wr-magenta); }
.mapconsole__live .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--wr-magenta-glow); box-shadow: 0 0 0 0 rgba(255,79,157,.6); animation: mc-pulse 2.4s var(--wr-ease-out) infinite; }
@keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,79,157,.55); } 70% { box-shadow: 0 0 0 9px rgba(255,79,157,0); } 100% { box-shadow: 0 0 0 0 rgba(255,79,157,0); } }
.mapconsole__title { font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
.mapconsole__coords { margin-left: auto; font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-muted-dim); white-space: nowrap; }
.mapconsole__stage { position: relative; aspect-ratio: 1080 / 660; }
.mapconsole__stage::before { content: ""; position: absolute; inset: 0; opacity: .55; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(120% 100% at 50% 42%, #000 38%, transparent 92%); }
.mc-stars { position: absolute; inset: 0; pointer-events: none; }
.mc-stars span { position: absolute; border-radius: 50%; background: #E8E6F0; }
@media (prefers-reduced-motion: no-preference) { .mc-stars span { animation: mc-twinkle var(--dur,4s) ease-in-out infinite; animation-delay: var(--dly,0s); } }
@keyframes mc-twinkle { 0%,100% { opacity: var(--min,.18); } 50% { opacity: var(--max,.9); } }
.mapconsole__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapconsole__legend { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 16px 22px; border-top: 1px solid var(--wr-line); background: rgba(8,5,15,.6); font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-muted); }
.mc-leg { display: inline-flex; align-items: center; gap: 9px; }
.mc-leg__dot { width: 9px; height: 9px; border-radius: 50%; }
.mc-leg__dot.is-major { background: var(--wr-magenta-glow); box-shadow: 0 0 8px var(--wr-magenta-glow); }
.mc-leg__planet { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 64%, #FF7AB6, #7E2A5A 75%, #2A1430); box-shadow: 0 0 8px rgba(199,59,126,.5); }
.mc-leg__line { width: 22px; height: 0; border-top: 1.5px solid var(--wr-magenta); }
.mc-leg__line.is-dashed { border-top: 1.5px dashed var(--wr-muted-dim); }
.mc-leg__sep { color: var(--wr-muted-dim); }
.mapconsole__cap { margin: 24px auto 0; max-width: 70ch; text-align: center; font-size: 15px; line-height: 1.7; color: var(--wr-muted); }
.mapconsole__cap b { color: var(--wr-cool-white); font-weight: 500; }

/* OVERHEAD CARDS */
.st-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.st-ohcard { position: relative; padding: 26px 24px 24px; border-radius: 16px; background: var(--wr-glass); border: 1px solid var(--wr-line); overflow: hidden; transition: border-color var(--wr-dur-base) var(--wr-ease-out), background var(--wr-dur-base) var(--wr-ease-out); }
.st-ohcard:hover { border-color: var(--wr-line-strong); background: var(--wr-glass-strong); }
.st-ohcard h3 { margin: 0; font-family: var(--wr-font-display); font-weight: 700; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: #fff; line-height: 1.2; }
.st-ohcard p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--wr-muted); }
.st-ohcard__cost { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wr-line); font-family: var(--wr-font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; color: var(--wr-cool-white); }
.st-ohcard__cost s { text-decoration: line-through; text-decoration-color: var(--wr-magenta); text-decoration-thickness: 2px; }

/* SINCE 2016 (Padding nativ; bg dunkel) */
.st-since { background: #06040D; color: var(--wr-cool-white); }
.st-since .st-kicker { color: var(--wr-magenta); }
.st-since .st-kicker::before, .st-since .st-kicker::after { background: var(--wr-line-magenta); }
.st-since .st-h2 { color: #fff; }
.st-since .st-h2 .accent { color: var(--wr-magenta); }
.st-since__layout { display: grid; grid-template-columns: 1fr 280px; gap: 52px; margin-top: 56px; align-items: center; }
.st-tl { position: relative; display: grid; gap: 0; }
.st-tl__row { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--wr-line); }
.st-tl__row:last-child { border-bottom: 1px solid var(--wr-line); }
.st-tl__yr { font-family: var(--wr-font-mono); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--wr-magenta); padding-top: 2px; }
.st-tl__b h4 { margin: 0; font-family: var(--wr-font-display); font-weight: 700; font-size: 16px; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.st-tl__b p { margin: 7px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--wr-muted); max-width: 56ch; }
.st-bigstat { text-align: center; padding: 36px 24px; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, rgba(199,59,126,.16) 0%, rgba(199,59,126,0) 60%), linear-gradient(180deg, #1E1A3E 0%, #0B0814 100%); border: 1px solid var(--wr-line-strong); box-shadow: 0 30px 60px -36px rgba(0,0,0,.7); }
.st-bigstat__n { font-family: var(--wr-font-display); font-weight: 900; font-size: 92px; line-height: .9; color: transparent; background: linear-gradient(180deg, #FF4F9D, #C73B7E); -webkit-background-clip: text; background-clip: text; }
.st-bigstat__l { margin-top: 14px; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--wr-cool-white); line-height: 1.5; }

/* COMPARISON */
.st-cmp { display: grid; grid-template-columns: 200px 1fr 1fr; border: 1px solid var(--wr-line); border-radius: 18px; overflow: hidden; background: var(--wr-glass); }
.st-cmp__head { display: contents; }
.st-cmp__head > div { padding: 22px 24px; border-bottom: 1px solid var(--wr-line); font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.st-cmp__h-dim { color: var(--wr-muted-dim); }
.st-cmp__h-old { color: var(--wr-muted); background: rgba(255,255,255,.015); }
.st-cmp__h-new { color: #fff; background: linear-gradient(180deg, rgba(199,59,126,.18), rgba(199,59,126,.06)); display: flex; align-items: center; gap: 8px; }
.st-cmp__h-new .d { width: 6px; height: 6px; border-radius: 50%; background: var(--wr-magenta-glow); box-shadow: 0 0 8px var(--wr-magenta-glow); }
.st-cmp__dim { padding: 20px 24px; border-bottom: 1px solid var(--wr-line); font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-muted-dim); display: flex; align-items: center; }
.st-cmp__old { padding: 20px 24px; border-bottom: 1px solid var(--wr-line); background: rgba(255,255,255,.015); font-size: 14.5px; line-height: 1.5; color: var(--wr-muted); display: flex; align-items: center; }
.st-cmp__new { padding: 20px 24px; border-bottom: 1px solid var(--wr-line); background: linear-gradient(180deg, rgba(199,59,126,.07), rgba(199,59,126,.02)); font-size: 14.5px; line-height: 1.5; color: var(--wr-cool-white); display: flex; align-items: flex-start; gap: 10px; }
.st-cmp__new svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--wr-magenta); }
.st-cmp > div:nth-last-child(-n+3) { border-bottom: 0; }

/* TOOLS STACK */
.st-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-tool { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; border-radius: 14px; background: var(--wr-glass); border: 1px solid var(--wr-line); transition: border-color var(--wr-dur-base) var(--wr-ease-out), transform var(--wr-dur-base) var(--wr-ease-out); }
.st-tool:hover { border-color: var(--wr-line-magenta); transform: translateY(-3px); }
.st-tool__name { display: flex; align-items: center; gap: 10px; font-family: var(--wr-font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.st-tool__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--wr-magenta-glow); box-shadow: 0 0 8px rgba(255,79,157,.6); }
.st-tool__role { font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--wr-muted); }

/* ON-SITE */
.st-onsite { position: relative; overflow: hidden; border-radius: 22px; padding: 48px; background: radial-gradient(120% 100% at 0% 0%, rgba(199,59,126,.16), transparent 55%), linear-gradient(180deg, #14102A 0%, #0B0814 100%); border: 1px solid var(--wr-line-strong); }
.st-onsite__grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: center; }
.st-onsite h2 { margin: 0; font-family: var(--wr-font-display); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.08; letter-spacing: .01em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.st-onsite p { margin: 18px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--wr-cool-white); max-width: 54ch; }
.st-cities { display: grid; gap: 10px; }
.st-city { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: var(--wr-glass); border: 1px solid var(--wr-line); }
.st-city__pin { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: rgba(199,59,126,.14); color: var(--wr-magenta); }
.st-city__pin svg { width: 15px; height: 15px; }
.st-city__name { font-family: var(--wr-font-display); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.st-city__meta { margin-left: auto; font-family: var(--wr-font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-muted); }

/* CTA (Padding nativ; bg dunkel) */
.st-cta { position: relative; overflow: hidden; text-align: center; background: #06040D; }
.st-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 360px at 50% 112%, rgba(199,59,126,.28), transparent 70%); }
.st-cta__in { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.st-cta h2 { margin: 18px 0 0; font-family: var(--wr-font-display); font-weight: 900; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: #fff; }
.st-cta p { margin: 18px auto 0; font-size: 17px; line-height: 1.6; color: var(--wr-muted); max-width: 54ch; }
.st-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.st-cta__note { margin-top: 22px; font-family: var(--wr-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--wr-muted-dim); }

/* Elementor-Brücke: st-* Heading-Klassen sitzen am Widget → Titel erbt Widget-Typo
   (sonst gewinnt die Kit-Default-Farbe/Größe). Lädt nach dem Kit → gewinnt den 0,2,0-Gleichstand. */
.st-kicker .elementor-heading-title, .st-h2 .elementor-heading-title,
.st-proof__n .elementor-heading-title, .st-proof__l .elementor-heading-title,
.st-tl__yr .elementor-heading-title, .st-bigstat__l .elementor-heading-title,
.st-tool__name .elementor-heading-title, .st-tool__role .elementor-heading-title,
.st-city__name .elementor-heading-title, .st-city__meta .elementor-heading-title,
.st-cta__note .elementor-heading-title {
  color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit;
}
.st-bigstat__n .elementor-heading-title { font-family: var(--wr-font-display); font-weight: 900; font-size: 92px; line-height: .9; background: linear-gradient(180deg, #FF4F9D, #C73B7E); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* H2 in Section-Heads: Größe/Transform am Titel (Farbe via .st-h2/.st-sec--light .st-h2 vererbt) */
.st-h2 .elementor-heading-title { font-family: var(--wr-font-display); font-weight: 900; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.04; letter-spacing: .01em; text-transform: uppercase; }

/* RESPONSIVE (Komponenten-Grids; Sektions-Padding läuft nativ) */
@media (max-width: 1000px) {
  .st-proof { grid-template-columns: 1fr 1fr; }
  .st-grid3 { grid-template-columns: 1fr 1fr; }
  .st-tools { grid-template-columns: 1fr 1fr; }
  .st-since__layout, .st-onsite__grid { grid-template-columns: 1fr; }
  .st-bigstat { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .st-wrap { padding-left: 22px; padding-right: 22px; }
  .st-proof, .st-grid3, .st-tools { grid-template-columns: 1fr; }
  .mapconsole__coords { display: none; }
  .mapconsole__stage { aspect-ratio: 1 / 1.12; }
  .st-cmp { grid-template-columns: 1fr; }
  .st-cmp__head { display: none; }
  .st-cmp__dim { background: rgba(255,255,255,.03); border-bottom: 0; font-size: 10.5px; padding-bottom: 6px; }
  .st-onsite { padding: 32px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   KI-Benefit-Rollout (additiv, 2026-06-17)
   (a) Inline-Callout .wr-ki-note — eine KI-Zeile auf den Service-Seiten,
       hell/dunkel über Modifier .wr-ki-note--light / --dark (NICHT vom
       Section-Kontext abhängig, damit es auch in wr-rl-light greift).
   (b) Startseiten-Sektion „Wo wir KI einsetzen": 2-Spalten-Karten-Grid.
   ═══════════════════════════════════════════════════════════════════ */
.wr-ki-note { max-width: 980px; margin: 34px auto 2px; padding: 20px 24px; border-radius: 14px; border: 1px solid transparent; }
.wr-ki-note .elementor-widget-container { margin: 0; }
.wr-ki-note p { margin: 0; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.62; }
.wr-ki-note__tag { display: inline-block; margin-right: 11px; transform: translateY(-1px); vertical-align: middle; font-family: var(--wr-font-display, inherit); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--wr-magenta, #C73B7E); padding: 4px 10px; border-radius: 999px; }
.wr-ki-note--dark { color: var(--wr-cool-white, #E7E3F1); background: rgba(255,255,255,.045); border-color: rgba(199,59,126,.34); }
.wr-ki-note--dark p { color: var(--wr-cool-white, #E7E3F1); }
.wr-ki-note--light { color: var(--wr-light-fg, #221C3D); background: #fff; border-color: rgba(199,59,126,.22); box-shadow: 0 12px 34px rgba(30,26,62,.07); }
.wr-ki-note--light p { color: var(--wr-light-fg, #221C3D); }

.elementor-element.wr-ki-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap, 18px); width: 100%; }
@media (max-width: 781px) { .elementor-element.wr-ki-grid { grid-template-columns: 1fr; } }
.wr-ki-card .elementor-heading-title { color: #fff; font-family: var(--wr-font-display, inherit); font-weight: 800; font-size: 19px; line-height: 1.25; letter-spacing: 0; text-transform: none; }
.wr-ki-card .elementor-widget-text-editor, .wr-ki-card p { color: var(--wr-cool-white, #C9C4DB); font-size: 15px; line-height: 1.58; margin: 6px 0 0; }

/* ═══════════════════════════════════════════════════════════════════
   ANTI-SLOP RULE 1 (Brand v2) — Eyebrow/Kicker site-weit entsloppen.
   War: Pill (Off-Black-BG + Border + Radius) + Punkt-::before + Geist MONO.
   Neu: Konstruktionslinie + Label in Geist, kein Pill/Punkt/Monospace.
   Greift global auf .wr-eyebrow-pill (lädt nach Basis → gewinnt per Cascade).
   ═══════════════════════════════════════════════════════════════════ */
.elementor-widget-heading.wr-eyebrow-pill .elementor-heading-title {
  padding: 0; background: transparent; border: 0; border-radius: 0;
  gap: 14px; width: max-content; max-width: 100%;
  font-family: "Geist", system-ui, sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wr-heading-fg, var(--wr-cool-white)); /* folgt Section-Kontext: ink in hellen, cool-white in dunklen Sektionen. Spez. (0,3,0) → Editor-Farbe (0,4,0) gewinnt. */
}
/* Punkt-::before → führende Konstruktionslinie (Magenta → transparent) */
.elementor-widget-heading.wr-eyebrow-pill .elementor-heading-title::before {
  width: 42px; height: 1px; border-radius: 0; flex-shrink: 0;
  background: linear-gradient(90deg, var(--wr-magenta), transparent);
}
.elementor-widget-heading.wr-eyebrow-pill.wr-eyebrow-pill--magenta .elementor-heading-title {
  background: transparent; border-color: transparent;
}
/* Farbe kommt aus der Haupt-Regel oben (var(--wr-heading-fg) → ink in hellen
   Sektionen inkl. wr-home-arbeit/founder/ga-pdf, cool-white in dunklen). Keine
   (0,4,0)-Override mehr → Editor-Per-Element-Farbe (0,4,0) gewinnt sauber. */

/* ═══════════════════════════════════════════════════════════════════
   ANTI-SLOP RULE 2 (Brand v2) — Display-Headlines in Archivo (Expanded,
   wdth 125, Black). Geist bleibt für Body/UI/Labels/Eyebrows.
   Trick: Display-Headlines sind <h1>/<h2>; Eyebrows rendern als <p>
   (header_size=p) und Card-Titel als <h3> → bleiben automatisch Geist.
   Hero-Claim/Section-Title brauchen höhere Spez. (eigene Klassen-Regeln
   sind (0,3,0)). Font lädt per <link> im Boot jeder Seite.
   ═══════════════════════════════════════════════════════════════════ */
/* Spez. (0,3,2) — schlägt die per-Sektion-Headline-Regeln (0,3,0), die
   var(--wr-font-display)=Geist pinnen. h1/h2 = Display; Eyebrows (<p>),
   Card-Titel (<h3>) und Stat-Zahlen (<p>) bleiben dadurch Geist. */
body.wr-app .elementor-widget-heading:not(.wr-eyebrow-pill) h1.elementor-heading-title,
body.wr-app .elementor-widget-heading:not(.wr-eyebrow-pill) h2.elementor-heading-title,
.elementor-widget-heading.wr-ga-hero__claim .elementor-heading-title,
.elementor-widget-heading.wr-section-title .elementor-heading-title,
.st-hero h1, .st-h2, .st-onsite h2, .st-cta h2, .st-bigstat__n {
  font-family: var(--wr-font-display);
}

/* ═══════════════════════════════════════════════════════════════════
   ANTI-SLOP — KI-Sektion „Editorial-Split" (Brand v2, Option B).
   Ersetzt das 2×2-Kachel-Grid: linke Spalte sticky (Eyebrow+H2+Sub+CTA),
   rechte Spalte = Hairline-Liste; Abschlusssatz als Fußzeile. Max 1040px.
   ═══════════════════════════════════════════════════════════════════ */
.elementor-element.wr-ki-b-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; width: 100%; }
.wr-ki-b-left { position: sticky; top: 40px; }
/* Eyebrow: Index + gesperrtes Label (Geist) + Magenta-Hairline, kein Mono/Pill/Dot */
.wr-ki-b-eyebrow .elementor-heading-title { display: flex; align-items: center; gap: 12px; font-family: "Geist", system-ui, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--wr-cool-white); }
.wr-ki-b-eyebrow__rule { flex: 0 0 42px; height: 1px; background: linear-gradient(90deg, var(--wr-magenta), transparent); }
.wr-ki-b-eyebrow__no { color: var(--wr-magenta); }
/* Headline (Archivo kommt aus der globalen h2-Regel) — nur Größe/Ausrichtung */
.wr-ki-b-head .elementor-heading-title { text-align: left; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; color: #fff; margin-top: 18px; }
.wr-ki-b-sub .elementor-widget-container, .wr-ki-b-sub p { margin: 16px 0 0; max-width: 38ch; color: var(--wr-muted); font-size: 16px; line-height: 1.62; }
.wr-ki-b-left .wr-btn { margin-top: 28px; }
/* Hairline-Liste rechts */
.wr-ki-b-item { padding: 22px 0; border-top: 1px solid var(--wr-line); }
.wr-ki-b-list .wr-ki-b-item:last-child { border-bottom: 1px solid var(--wr-line); }
.wr-ki-b-item__h .elementor-heading-title { display: flex; align-items: baseline; gap: 14px; font-family: "Geist", system-ui, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.wr-ki-b-item__no { flex: 0 0 auto; font-family: var(--wr-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--wr-magenta); }
.wr-ki-b-item__p .elementor-widget-container { margin: 6px 0 0 32px; max-width: 52ch; color: var(--wr-muted); font-size: 14px; line-height: 1.55; }
.wr-ki-b-item__p p { margin: 0; }  /* Box-Modell nur am Container — sonst doppelter 32px-Einzug bei <p>-Inhalt */
/* Fußzeile unter beiden Spalten */
.elementor-element.wr-ki-b-foot { max-width: 1040px; margin: 44px auto 0; }
.wr-ki-b-foot .elementor-widget-container { margin: 0; border-top: 1px solid var(--wr-line); padding-top: 24px; max-width: 54ch; color: var(--wr-muted); font-size: 14px; line-height: 1.6; }
.wr-ki-b-foot p { margin: 0; }  /* Linie nur am Container — sonst doppelte Linie (Container + p) */
@media (max-width: 860px) {
  .elementor-element.wr-ki-b-grid { grid-template-columns: 1fr; gap: 40px; }
  .wr-ki-b-left { position: static; }
}

/* Mobile Lesbarkeit (Pixel-Report 2026-07-20): 10px-Mono-Labels sind auf
   Geräten zu klein. Mindestgrößen mobil — ohne !important, Editor-Werte
   (0,4,0) übersteuern weiterhin. */
@media (max-width: 767px) {
  .elementor-widget-heading.wr-eyebrow-pill .elementor-heading-title { font-size: 12px; }
  .elementor-widget-heading.wr-cs2-pill .elementor-heading-title { font-size: 11px; }
}