/*
 Theme Name:   LOKAGO Child Theme
 Theme URI:    https://lokago.de
 Description:  GeneratePress Child Theme für LOKAGO — "Clean Tech meets Organic" Design System
 Author:       LOKAGO
 Author URI:   https://lokago.de
 Template:     generatepress
 Version:      3.7.0
 License:      GNU General Public License v2 or later
 Text Domain:  lokago
*/


/* ========================================
   LOKAGO Design System v3.0
   "Clean Tech meets Organic" — Modern SaaS Landing Page
   ======================================== */


/* ----------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ---------------------------------------- */

:root {
  /* --- LOKAGO BRAND VARIABLES --- */

  /* Core Brand Colors */
  --clr-text-main: #022a3a;       /* Primary Dark — Use for all standard text */
  --clr-brand-primary: #94c11f;   /* Brand Green — Identity */
  --clr-accent-hot: #E65536;      /* Accent Coral — Conversion only */
  --clr-accent-deep: #183066;     /* Secondary Navy — Footer, secondary */
  --clr-bg-surface: #F2F9E8;      /* Surface Mint — Standard page background */
  --clr-status-success: #009931;  /* Success Green — Confirmations */

  /* Neutral Colors */
  --clr-bg-white: #FAFAF9;        /* Warm Off-White */
  --clr-border: rgba(2, 42, 58, 0.08);
  --clr-text-muted: rgba(2, 42, 58, 0.65); /* WCAG AA ≥ 4.5:1 on white */
  --clr-text-light: rgba(2, 42, 58, 0.7);

  /* Structural Variables (Modern UI) */
  --lokago-bg-white: #ffffff;     /* For cards sitting on the mint background */
  --lokago-radius-btn: 8px;       /* Structured tech buttons */
  --lokago-radius-card: 16px;     /* Smooth cards */
  --lokago-shadow-card: 0 8px 24px rgba(2, 42, 58, 0.08); /* Tinted shadow using Primary Dark */

  /* Typography */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* 8pt Spacing Scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Semantic Spacing (mapped to 8pt scale) */
  --section-padding: clamp(var(--space-8), 8vw, var(--space-12));
  --section-padding-sm: clamp(var(--space-5), 5vw, var(--space-8));
  --container-max: 1120px;
  --container-narrow: 720px;
  --gap-lg: var(--space-6);
  --gap-md: var(--space-4);
  --gap-sm: var(--space-3);
  --gap-xs: var(--space-2);

  /* Modular Type Scale (rem-based) */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.75rem;   /* 28px */
  --text-4xl: 2.5rem;    /* 40px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 4rem;      /* 64px */
  --text-7xl: 5rem;      /* 80px */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.15;
  --leading-heading: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.7;
  --leading-loose: 1.7;

  /* Radii (8pt-aligned) */
  --radius-sm: var(--space-1);    /* 8px */
  --radius-md: var(--space-2);    /* 16px */
  --radius-lg: var(--space-3);    /* 24px */
  --radius-xl: var(--space-5);    /* 40px */
  --radius-full: 999px;

  /* Shadows */
  --shadow-soft: 0 20px 40px -10px rgba(2, 42, 58, 0.08);
  --shadow-card: 0 4px 24px rgba(2, 42, 58, 0.06);
  --shadow-btn: 0 8px 24px rgba(2, 42, 58, 0.2);
  --shadow-btn-hover: 0 12px 32px rgba(2, 42, 58, 0.25);

  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(148, 193, 31, 0.5);
  --focus-ring-offset: 0 0 0 2px var(--clr-bg-white), var(--focus-ring);

  /* Transitions */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.2s var(--ease-out);
  --transition-med: 0.3s var(--ease-out);
  --transition-slow: 0.5s var(--ease-out);
}


/* ----------------------------------------
   2. GLOBAL BASE STYLES
   ---------------------------------------- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--clr-text-main);
  background-color: var(--clr-bg-surface); /* Mint background by default */
  line-height: var(--leading-loose);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02", "cv01";
  overflow-x: hidden;
}

/* Never use pure black */
* {
  border-color: var(--clr-border);
}

/* Selection — Brand Green */
::selection {
  background-color: var(--clr-brand-primary);
  color: var(--clr-text-main);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--clr-text-main);
  letter-spacing: -0.02em;
}

h1 {
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 600;
  line-height: var(--leading-tight);
}

h2 {
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: 600;
  line-height: var(--leading-snug);
}

h3 {
  font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: 700;
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-heading);
}

p {
  color: var(--clr-text-light);
  line-height: var(--leading-relaxed);
  max-width: 65ch; /* Optimal reading line width */
}

/* Ensure all text elements use Primary Dark, NEVER pure black */
h1, h2, h3, h4, h5, h6, p, span {
  color: var(--clr-text-main);
}

/* Re-apply muted color for paragraphs (overridden above) */
p {
  color: var(--clr-text-light);
}

/* Lead Text (large paragraphs) */
.lok-lead {
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--clr-text-light);
}

/* Overline / Category Label */
.lok-overline {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--clr-text-muted);
  max-width: none; /* Override p { max-width: 65ch } so overlines span full width for centering */
}

/* Hero centered content — override p max-width for all children */
.lok-hero-centered p,
.lok-hero-centered h1,
.lok-hero-centered h2 {
  max-width: none;
}

/* Text Gradient (for Hero Headlines) */
.lok-text-gradient {
  background: linear-gradient(135deg, var(--clr-text-main), var(--clr-accent-deep), var(--clr-brand-primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text Highlights (For dark backgrounds) */
.text-highlight-green {
  color: var(--clr-brand-primary);
}

/* Links */
a {
  color: var(--clr-accent-deep);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--clr-text-main);
}
a:focus-visible {
  outline: 2px solid var(--clr-brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}


/* ----------------------------------------
   4. SECTION SYSTEM
   ---------------------------------------- */

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

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

/* Background Variants */
.lok-section--surface {
  background: var(--clr-bg-surface);
}

.lok-section--dark {
  background: var(--clr-text-main);
  color: #fff;
}
.lok-section--dark h2,
.lok-section--dark h3,
.lok-section--dark h4 {
  color: #fff;
}
.lok-section--dark p {
  color: rgba(255, 255, 255, 0.75); /* WCAG AA on #022a3a */
}

.lok-section--navy {
  background: var(--clr-accent-deep);
  color: #fff;
}
.lok-section--navy h2,
.lok-section--navy h3 {
  color: #fff;
}
.lok-section--navy p {
  color: rgba(255, 255, 255, 0.8);
}

/* New Section Wrapper Utilities — Modern SaaS alternating sections */
.section-dark-teal {
  background-color: var(--clr-text-main);
  color: #ffffff;
}

.section-dark-navy {
  background-color: var(--clr-accent-deep);
  color: #ffffff;
}

/* Override text color inside dark sections */
.section-dark-teal h1, .section-dark-teal h2, .section-dark-teal h3,
.section-dark-teal h4, .section-dark-teal p,
.section-dark-navy h1, .section-dark-navy h2, .section-dark-navy h3,
.section-dark-navy h4, .section-dark-navy p {
  color: #ffffff;
}

/* Structured Section Divider */
.lok-section--slant {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Structured Dot Grid Background (Hero) */
.lok-mesh-bg {
  background-color: var(--lokago-bg-white);
  background-image: radial-gradient(var(--clr-border) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
  overflow: hidden;
}


/* ----------------------------------------
   5. CONTAINER
   ---------------------------------------- */

.lok-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap-sm);
  padding-right: var(--gap-sm);
}

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


/* ----------------------------------------
   6. BUTTONS — Strict Hierarchy System
   ---------------------------------------- */

/* --- 6a. LOKAGO Design System Buttons (lok-btn) --- */

.lok-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--lokago-radius-btn);
  transition: all var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  border: none;
  line-height: var(--leading-normal);
  white-space: nowrap;
}
.lok-btn:active {
  transform: scale(0.96);
}
.lok-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* Primary — Dark background, white text
   Main button, 1-2x per Viewport
   Contrast: #fff on #022a3a = 15.7:1 ✓ WCAG AAA */
.lok-btn--primary {
  background: var(--clr-text-main);
  color: #fff;
  padding: var(--space-2) var(--space-4); /* 16 32 */
  font-size: var(--text-base);
  box-shadow: var(--shadow-btn);
}
.lok-btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-btn-hover);
}
.lok-btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-btn), var(--focus-ring-offset);
}

/* Secondary — White with Border */
.lok-btn--secondary {
  background: #fff;
  color: var(--clr-text-main);
  padding: var(--space-2) var(--space-3); /* 16 24 */
  border: 1px solid var(--clr-border);
}
.lok-btn--secondary:hover {
  background: #f5f5f4;
  color: var(--clr-text-main);
}

/* Coral — Conversion CTA, use sparingly! Max 1x per View
   Contrast: #fff on #E65536 = 3.5:1 — large text only, meets AA-large */
.lok-btn--coral {
  background: var(--clr-accent-hot);
  color: #fff;
  padding: var(--space-2) var(--space-4); /* 16 32 */
  font-size: var(--text-base);
}
.lok-btn--coral:hover {
  color: #fff;
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(230, 85, 54, 0.3);
}
.lok-btn--coral:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--clr-accent-hot);
}

/* Green — Navigation ("Mehr erfahren")
   Contrast: #022a3a on #94c11f = 5.8:1 ✓ WCAG AA */
.lok-btn--green {
  background: var(--clr-brand-primary);
  color: var(--clr-text-main); /* NEVER white on Brand Green! */
  padding: var(--space-2) var(--space-3); /* 16 24 */
}
.lok-btn--green:hover {
  color: var(--clr-text-main);
  filter: brightness(1.06);
  transform: translateY(-2px);
}

/* Ghost — Transparent with Border */
.lok-btn--ghost {
  background: transparent;
  color: var(--clr-accent-deep);
  padding: var(--space-2) var(--space-3); /* 16 24 */
  border: 2px solid var(--clr-accent-deep);
}
.lok-btn--ghost:hover {
  background: var(--clr-accent-deep);
  color: #fff;
  transform: translateY(-2px);
}

/* Link-Style Button */
.lok-btn--link {
  background: none;
  color: var(--clr-text-main);
  padding: 0;
  font-weight: 600;
  border-bottom: 2px solid var(--clr-text-main);
  border-radius: 0;
  padding-bottom: 2px;
}
.lok-btn--link:hover {
  opacity: 0.7;
}
.lok-btn--link:focus-visible {
  outline: 2px solid var(--clr-brand-primary);
  outline-offset: 4px;
}

/* Button Sizes */
.lok-btn--lg {
  padding: var(--space-2) var(--space-5); /* 16 40 */
  font-size: var(--text-lg);
}
.lok-btn--sm {
  padding: var(--space-1) var(--space-2); /* 8 16 */
  font-size: var(--text-sm);
}


/* --- 6b. NEW Button Priority Hierarchy (Brand Palette) --- */

/* 1. High Priority (Conversion — Limit 1 per view) */
.btn-high-priority {
  background-color: var(--clr-accent-hot);
  color: #ffffff !important;
  border-radius: var(--lokago-radius-btn);
  padding: 14px 28px;
  font-weight: 700;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
}
.btn-high-priority:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(230, 85, 54, 0.4); /* Coral glow */
  color: #ffffff !important;
}
.btn-high-priority:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--clr-accent-hot);
}
.btn-high-priority:active {
  transform: scale(0.96);
}

/* 2. Medium Priority (Navigation / Learn More) */
.btn-medium-priority {
  background-color: var(--clr-brand-primary);
  color: var(--clr-text-main) !important; /* Accessibility: Dark text on Green */
  border-radius: var(--lokago-radius-btn);
  padding: 14px 28px;
  font-weight: 700;
  border: none;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
}
.btn-medium-priority:hover {
  background-color: #85ad1c; /* Slightly darker green */
  color: var(--clr-text-main) !important;
}
.btn-medium-priority:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}
.btn-medium-priority:active {
  transform: scale(0.96);
}

/* 3. Low Priority (Alternative / Log In) */
.btn-low-priority {
  background-color: transparent;
  color: var(--clr-accent-deep) !important;
  border: 2px solid var(--clr-accent-deep);
  border-radius: var(--lokago-radius-btn);
  padding: 12px 26px; /* Adjusted for border width */
  font-weight: 700;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-base);
  cursor: pointer;
}
.btn-low-priority:hover {
  background-color: rgba(24, 48, 102, 0.05); /* Slight navy tint on hover */
  color: var(--clr-accent-deep) !important;
}
.btn-low-priority:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--lokago-bg-white), 0 0 0 4px var(--clr-accent-deep);
}
.btn-low-priority:active {
  transform: scale(0.96);
}


/* ----------------------------------------
   7. CARDS
   ---------------------------------------- */

/* --- 7a. LOKAGO Design System Cards (lok-card) --- */

.lok-card {
  background: var(--lokago-bg-white);
  border: 1px solid rgba(2, 42, 58, 0.05);
  border-radius: var(--lokago-radius-card);
  padding: var(--space-5) clamp(var(--space-4), 4vw, var(--space-5));
  box-shadow: var(--lokago-shadow-card);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
}
.lok-card:hover {
  box-shadow: 0 16px 40px rgba(2, 42, 58, 0.12), 0 4px 12px rgba(2, 42, 58, 0.06);
  transform: translateY(-4px);
}

/* Baseline-lock: 2-line h3 keeps cards aligned horizontally */
.lok-card h3 {
  min-height: calc(var(--leading-heading) * 2em);
  margin-bottom: var(--gap-sm);
}

/* Dark Card (Feature Highlight) */
.lok-card--dark {
  background: var(--clr-text-main);
  background-image: radial-gradient(at 100% 0%, rgba(148, 193, 31, 0.15) 0%, transparent 60%);
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}
.lok-card--dark h3,
.lok-card--dark h4 {
  color: #fff;
}
.lok-card--dark p {
  color: rgba(255, 255, 255, 0.75); /* WCAG AA on dark bg */
}

/* Muted Card (gray background) */
.lok-card--muted {
  background: #F3F4F6;
  border: none;
}

/* Article link cards (Wissen hub) */
a.gb-element.lok-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
a.gb-element.lok-card h3 {
  color: var(--clr-text-main);
  min-height: auto;
  transition: color var(--transition-med);
}
a.gb-element.lok-card:hover h3 {
  color: var(--clr-green);
}

/* Small radius card (for blog cards etc.) */
.lok-card--sm {
  border-radius: var(--radius-lg);
  padding: var(--space-4); /* 32px */
}

/* Icon container in Cards */
.lok-card-icon {
  width: var(--space-6);  /* 48px */
  height: var(--space-6);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--gap-sm);
  font-size: var(--text-xl);
  transition: transform var(--transition-slow);
}
.lok-card:hover .lok-card-icon {
  transform: rotate(12deg);
}
.lok-card-icon--green {
  background: rgba(148, 193, 31, 0.15);
  color: var(--clr-text-main);
}
.lok-card-icon--white {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}


/* --- 7b. NEW Brand Palette Cards (lokago-card) --- */

/* Clean Tech Card (Sits on Surface Mint background) */
.lokago-card {
  background-color: var(--lokago-bg-white);
  border-radius: var(--lokago-radius-card);
  padding: 32px;
  box-shadow: var(--lokago-shadow-card);
  border: 1px solid rgba(2, 42, 58, 0.05);
  transition: box-shadow var(--transition-med), transform var(--transition-med);
}
.lokago-card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-4px);
}

/* Highlighted Pricing/Feature Card (Dark) */
.lokago-card-dark {
  background-color: var(--clr-text-main);
  color: #ffffff;
  border-radius: var(--lokago-radius-card);
  padding: 40px 32px;
  box-shadow: 0 15px 40px rgba(2, 42, 58, 0.3);
}
.lokago-card-dark h3, .lokago-card-dark p {
  color: #ffffff;
}


/* ----------------------------------------
   8. TRUST BAR (Scrolling Partner Logos)
   ---------------------------------------- */

.lok-trust-bar {
  overflow: hidden;
  padding: var(--gap-sm) 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  background: var(--lokago-bg-white);
}

.lok-trust-track {
  display: flex;
  gap: 4rem;
  align-items: center;
  white-space: nowrap;
  animation: lok-scroll 30s linear infinite;
  opacity: 0.5;
  filter: grayscale(1);
  transition: all var(--transition-slow);
}
.lok-trust-track:hover {
  opacity: 1;
  filter: grayscale(0);
}

.lok-trust-track span,
.lok-trust-track img {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  flex-shrink: 0;
}
.lok-trust-track img {
  height: var(--space-5); /* 40px */
  width: auto;
}

@keyframes lok-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ----------------------------------------
   9. STATS / KEY METRICS
   ---------------------------------------- */

.lok-stat {
  text-align: center;
  padding: 0 var(--gap-sm);
}

.lok-stat-number {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-5xl));
  font-weight: 700;
  color: var(--clr-brand-primary);
  line-height: var(--leading-none);
}

.lok-stat-label {
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
  margin-top: var(--space-1);
}

/* Stats with Divider */
.lok-stats-divider {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
}
.lok-stats-divider > * + * {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .lok-stats-divider {
    grid-template-columns: repeat(2, 1fr);
  }
  .lok-stats-divider > *:nth-child(3) {
    border-left: none;
  }
}


/* ----------------------------------------
   10. FAQ ACCORDION
   ---------------------------------------- */

.lok-faq details {
  background: var(--lokago-bg-white);
  border-radius: var(--lokago-radius-card);
  border: 1px solid rgba(2, 42, 58, 0.06);
  padding: var(--space-3); /* 24px */
  margin-bottom: var(--space-2); /* 16px */
  transition: box-shadow var(--transition-med);
  cursor: pointer;
}
.lok-faq details[open] {
  box-shadow: var(--lokago-shadow-card);
}

.lok-faq summary {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--clr-text-main);
}
.lok-faq summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
  border-radius: var(--radius-md);
}
.lok-faq summary::-webkit-details-marker {
  display: none;
}

/* Chevron rotates on open */
.lok-faq summary .lok-faq-chevron {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.lok-faq details[open] summary .lok-faq-chevron {
  transform: rotate(180deg);
}

.lok-faq details p {
  color: var(--clr-text-light);
  margin-top: var(--space-2); /* 16px */
  line-height: var(--leading-loose);
}


/* ----------------------------------------
   11. ANNOUNCEMENT BADGE
   ---------------------------------------- */

.lok-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--lokago-bg-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--lokago-radius-btn); /* 8px — consistent with card system */
  padding: var(--space-1) var(--space-2); /* 8 16 */
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--clr-text-main);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color var(--transition-fast);
}
.lok-badge:hover {
  border-color: rgba(2, 42, 58, 0.2);
  color: var(--clr-text-main);
}

/* Badge inside dark cards — ensure text stays visible on white bg */
.lok-card--dark .lok-badge,
.lok-price-card--premium .lok-badge {
  color: var(--clr-text-main);
  background: var(--lokago-bg-white);
}

.lok-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-brand-primary);
  flex-shrink: 0;
}


/* ----------------------------------------
   12. DASHBOARD MOCKUP (Hero Image)
   ---------------------------------------- */

.lok-dashboard-frame {
  background: var(--lokago-bg-white);
  border-radius: 2rem;
  box-shadow: 0 25px 50px -12px rgba(2, 42, 58, 0.15);
  border: 1px solid var(--clr-border);
  padding: 8px;
  transform: perspective(1200px) rotateX(6deg);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lok-dashboard-frame:hover {
  transform: perspective(1200px) rotateX(0deg);
}

.lok-dashboard-inner {
  background: var(--clr-bg-white);
  border-radius: 1.5rem;
  border: 1px solid var(--clr-border);
  overflow: hidden;
}

/* Browser Dots */
.lok-browser-dots {
  display: flex;
  gap: 6px;
  padding: 12px 16px;
  background: var(--lokago-bg-white);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.lok-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.lok-browser-dots span:nth-child(1) { background: rgba(239, 68, 68, 0.8); }
.lok-browser-dots span:nth-child(2) { background: rgba(251, 191, 36, 0.8); }
.lok-browser-dots span:nth-child(3) { background: rgba(74, 222, 128, 0.8); }

/* Dashboard Stat Cards */
.lok-dash-stat {
  background: var(--lokago-bg-white);
  border-radius: var(--lokago-radius-card);
  border: 1px solid rgba(0,0,0,0.05);
  padding: var(--gap-xs);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.lok-dash-stat--highlight {
  background: var(--clr-brand-primary);
  border-color: rgba(148, 193, 31, 0.5);
}


/* ----------------------------------------
   13. GRAINY TEXTURE OVERLAY
   ---------------------------------------- */

.lok-grain {
  position: relative;
}
.lok-grain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.lok-grain > * {
  position: relative;
  z-index: 2;
}


/* ----------------------------------------
   14. NAVIGATION (GeneratePress + Glassmorphism)
   ---------------------------------------- */

/* ---- Fix header + Glassmorphism ---- */
.site-header {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 1px solid rgba(2, 42, 58, 0.06);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

.site-header.lok-scrolled {
  box-shadow: 0 1px 8px rgba(2, 42, 58, 0.06);
  background: rgba(255, 255, 255, 0.95) !important;
}

/* Body padding for fixed header */
body {
  padding-top: 80px;
}

/* ---- .inside-header: Logo left, Nav right ---- */
.inside-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gap-sm);
  min-height: 80px;
  flex-wrap: nowrap;
}

/* Logo container */
.site-branding-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
}

/* ---- Logo ---- */
.site-header .site-logo {
  flex-shrink: 0;
  line-height: 0;
}

.site-header .site-logo img,
.site-header .header-image {
  max-height: 40px;
  width: auto;
}

/* ---- Navigation: right-aligned ---- */
#site-navigation {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  position: static !important;
  background: transparent !important;
  border: none;
}

.inside-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  margin: 0;
  width: auto;
}

/* ---- Menu Links ---- */
.main-navigation .main-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation .main-nav ul li a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(2, 42, 58, 0.7); /* WCAG AA ≥ 4.5:1 on white */
  text-decoration: none;
  padding: var(--space-1) 14px; /* 8 14 */
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.main-navigation .main-nav ul li a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--clr-text-main);
  background: rgba(2, 42, 58, 0.04);
}

/* ---- CTA Button in Menu ---- */
.main-navigation .main-nav ul li.lok-menu-cta > a {
  background: var(--clr-text-main) !important;
  color: #fff !important;
  padding: var(--space-1) 20px !important; /* 8 20 */
  border-radius: var(--lokago-radius-btn);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-left: var(--space-1);
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-block;
}
.main-navigation .main-nav ul li.lok-menu-cta > a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

.main-navigation .main-nav ul li.lok-menu-cta > a:hover {
  background: #0a3f54 !important;
  transform: translateY(-1px);
}

/* ---- Mobile Toggle: hide on Desktop ---- */
#mobile-menu-control-wrapper {
  display: none;
}

/* Desktop: hide menu toggle in #site-navigation */
#site-navigation > .inside-navigation > .menu-toggle {
  display: none;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
  body {
    padding-top: 60px;
  }

  .inside-header {
    min-height: 60px;
    flex-wrap: wrap;
  }

  /* Mobile: Logo + Burger side by side */
  .site-branding-container {
    flex: 1;
  }

  /* Show mobile toggle */
  #mobile-menu-control-wrapper {
    display: flex;
    align-items: center;
  }

  /* Hide desktop nav (GP handles Mobile Toggle) */
  #site-navigation {
    width: 100%;
    flex-basis: 100%;
  }

  /* Mobile menu: full width */
  .main-navigation .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 16px 0;
    align-items: stretch;
  }

  .main-navigation .main-nav ul li a {
    font-size: 1rem;
    padding: 12px var(--gap-sm);
    display: block;
    border-radius: 0;
  }

  .main-navigation .main-nav ul li.lok-menu-cta {
    padding: 8px var(--gap-sm) 16px;
  }

  .main-navigation .main-nav ul li.lok-menu-cta a {
    display: block;
    text-align: center;
    margin-left: 0;
    border-radius: var(--lokago-radius-btn);
  }
}

/* ---- Burger Button Styling ---- */
.menu-toggle {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 8px;
  color: var(--clr-text-main);
}

.menu-toggle .gp-icon svg {
  width: 22px;
  height: 22px;
  fill: var(--clr-text-main);
}


/* ----------------------------------------
   15. LEAD MAGNET BOX
   ---------------------------------------- */

.lok-lead-magnet {
  background: var(--clr-bg-surface);
  border-radius: var(--lokago-radius-card);
  padding: var(--gap-lg);
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
}

@media (max-width: 768px) {
  .lok-lead-magnet {
    flex-direction: column;
    text-align: center;
  }
}


/* ----------------------------------------
   16. BLOG CARDS
   ---------------------------------------- */

.lok-blog-card {
  background: var(--lokago-bg-white);
  border-radius: var(--lokago-radius-card);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  transition: box-shadow var(--transition-med), transform var(--transition-med);
}
.lok-blog-card:hover {
  box-shadow: var(--lokago-shadow-card);
  transform: translateY(-4px);
}

.lok-blog-card-body {
  padding: var(--gap-sm);
}

.lok-blog-tag {
  display: inline-block;
  background: rgba(148, 193, 31, 0.15);
  color: var(--clr-text-main);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px var(--space-1);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}


/* ----------------------------------------
   17. TAGS / BADGES (Format Labels)
   ---------------------------------------- */

.lok-format-tag {
  display: inline-block;
  padding: 4px var(--space-2); /* 4 16 */
  background: var(--lokago-bg-white);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  color: #6b7280;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}


/* ----------------------------------------
   17b. CHECKMARK FEATURE LIST
   ---------------------------------------- */

.lok-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2); /* 16px between items */
}

.lok-checklist li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--clr-text-light);
}

/* Green checkmark icon (inline SVG mask) */
.lok-checklist li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background: var(--clr-brand-primary);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Coral checkmark variant (for dark cards / emphasis) */
.lok-checklist--coral li::before {
  background: var(--clr-accent-hot);
}

/* Dark-card override: white text, brand-green checks */
.lok-card--dark .lok-checklist li {
  color: rgba(255, 255, 255, 0.8);
}

/* Compact variant: tighter gap for small cards */
.lok-checklist--compact {
  gap: var(--space-1); /* 8px */
}
.lok-checklist--compact li {
  font-size: var(--text-xs);
}
.lok-checklist--compact li::before {
  width: 16px;
  height: 16px;
}


/* ----------------------------------------
   17c. ARROW LINK ("Mehr erfahren →")
   ---------------------------------------- */

.lok-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--clr-text-main);
  text-decoration: none;
  border-bottom: 2px solid var(--clr-text-main);
  padding-bottom: 2px;
  transition: gap var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  margin-top: auto; /* push to bottom of flex card */
}

.lok-link-arrow::after {
  content: '→';
  font-size: 1.1em;
  transition: transform var(--transition-fast);
}

.lok-link-arrow:hover {
  color: var(--clr-accent-deep);
  border-color: var(--clr-accent-deep);
}
.lok-link-arrow:hover::after {
  transform: translateX(4px);
}

.lok-link-arrow:focus-visible {
  outline: 2px solid var(--clr-brand-primary);
  outline-offset: 4px;
  border-radius: 2px;
}

/* White variant for dark backgrounds */
.lok-link-arrow--white {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.lok-link-arrow--white:hover {
  color: #fff;
  border-color: #fff;
}

/* Brand Green variant */
.lok-link-arrow--green {
  color: var(--clr-brand-primary);
  border-color: var(--clr-brand-primary);
}
.lok-link-arrow--green:hover {
  color: var(--clr-text-main);
  border-color: var(--clr-text-main);
}


/* ----------------------------------------
   18. ANIMATED BLOBS (Hero Background)
   ---------------------------------------- */

.lok-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(72px);
  animation: lok-blob 7s infinite;
  pointer-events: none;
}

.lok-blob--green {
  background: var(--clr-brand-primary);
  opacity: 0.05;
}

.lok-blob--purple {
  background: #c4b5fd;
  opacity: 0.05;
}

@keyframes lok-blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* Blob positioning variants (no styles attribute dependency) */
.lok-blob--tl { top: -10%; left: 20%; width: 400px; height: 400px; }
.lok-blob--tr { top: 0; right: 20%; width: 400px; height: 400px; animation-delay: 2s; }
.lok-blob--br { bottom: -5%; right: 10%; width: 350px; height: 350px; animation-delay: 3s; }
.lok-blob--bl { top: 10%; left: -5%; width: 300px; height: 300px; animation-delay: 5s; }


/* ----------------------------------------
   HERO DASHBOARD MOCKUP (CSS-only)
   ---------------------------------------- */

.lok-hero-mockup {
  max-width: 900px;
  margin: var(--space-6) auto 0;
  border-radius: var(--lokago-radius-card);
  background: linear-gradient(145deg, var(--clr-text-main) 0%, #0a3d52 50%, var(--clr-accent-deep) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 32px 80px rgba(2, 42, 58, 0.22), 0 12px 24px rgba(2, 42, 58, 0.10);
  padding: var(--space-4) var(--space-5);
  position: relative;
  overflow: hidden;
}

/* Top bar with fake window dots */
.lok-hero-mockup::before {
  content: '';
  display: block;
  width: 100%;
  height: 28px;
  margin-bottom: var(--space-3);
  background:
    radial-gradient(circle 5px at 16px 14px, #ff5f57 6px, transparent 6px),
    radial-gradient(circle 5px at 36px 14px, #febc2e 6px, transparent 6px),
    radial-gradient(circle 5px at 56px 14px, #28c840 6px, transparent 6px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Glow overlay */
.lok-hero-mockup::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(ellipse at 80% 20%, rgba(148,193,31,0.12), transparent 70%);
  pointer-events: none;
}

.lok-mockup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

.lok-mockup-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-2);
}

.lok-mockup-card-label {
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.lok-mockup-card-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.lok-mockup-card-value--green {
  color: var(--clr-brand-primary);
}

.lok-mockup-bar {
  grid-column: 1 / -1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  display: flex;
  gap: var(--space-1);
  align-items: flex-end;
  height: 80px;
}

.lok-mockup-bar-col {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}

.lok-mockup-bar-col:nth-child(odd) {
  background: var(--clr-brand-primary);
  opacity: 0.6;
}
.lok-mockup-bar-col:nth-child(even) {
  background: rgba(255,255,255,0.12);
}

@media (max-width: 600px) {
  .lok-hero-mockup {
    padding: var(--space-3);
    margin-top: var(--space-4);
  }
  .lok-mockup-grid {
    grid-template-columns: 1fr 1fr;
  }
  .lok-mockup-bar { height: 50px; }
}


/* ----------------------------------------
   19. PULSE DOT (Status Indicator)
   ---------------------------------------- */

.lok-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-status-success);
  animation: lok-pulse 2s infinite;
}

@keyframes lok-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 153, 49, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 153, 49, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 153, 49, 0); }
}


/* ----------------------------------------
   20. UTILITY CLASSES
   ---------------------------------------- */

/* Text Alignment — !important to override GB defaults + p max-width */
.lok-text-center {
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* All children inside lok-text-center must also center themselves */
.lok-text-center > .gb-text,
.lok-text-center > .gb-element > .gb-text,
.lok-text-center .gb-text {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Flex containers inside lok-text-center need centering */
.lok-text-center > .gb-element.lok-flex,
.lok-text-center .lok-flex {
  justify-content: center !important;
}
.lok-text-left  { text-align: left !important; }

/* Overline + section-header children need full width for centering */
.lok-section-header .lok-overline,
.lok-section-header h2,
.lok-section-header h3,
.lok-section-header p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Text Color Utility */
.lok-text-muted { color: var(--clr-text-muted); }

/* Max Width for Text */
.lok-max-prose { max-width: 65ch; }
.lok-max-narrow { max-width: var(--container-narrow); }
.lok-mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing */
.lok-mt-sm { margin-top: var(--gap-sm); }
.lok-mt-md { margin-top: var(--gap-md); }
.lok-mt-lg { margin-top: var(--gap-lg); }
.lok-mb-sm { margin-bottom: var(--gap-sm); }
.lok-mb-md { margin-bottom: var(--gap-md); }
.lok-mb-lg { margin-bottom: var(--gap-lg); }

/* Flex */
.lok-flex { display: flex; }
.lok-flex-center { display: flex; align-items: center; justify-content: center; }
.lok-flex-wrap { flex-wrap: wrap; }
.lok-gap-sm { gap: var(--gap-sm); }
.lok-gap-md { gap: var(--gap-md); }

/* Hide on Mobile */
@media (max-width: 768px) {
  .lok-hide-mobile { display: none !important; }
}

/* Hide on Desktop */
@media (min-width: 769px) {
  .lok-hide-desktop { display: none !important; }
}


/* ----------------------------------------
   21. WORDPRESS BLOCK OVERRIDES
   ---------------------------------------- */

/* GenerateBlocks Container Reset */
.gb-container {
  box-sizing: border-box;
}

/* WordPress Core Buttons */
.wp-block-button__link {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--lokago-radius-btn);
  transition: all var(--transition-fast);
}

/* Gutenberg Columns Spacing */
.wp-block-columns {
  gap: var(--gap-sm) !important; /* 24px */
}

/* Equal-Height Cards in WordPress Columns */
.wp-block-columns > .wp-block-column {
  display: flex;
  flex-direction: column;
}

/* Cards fill full column height */
.wp-block-column > .gb-element.lok-card,
.wp-block-column > .lok-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Push CTA buttons to bottom of cards */
.lok-card > .gb-text.lok-btn,
.lok-card > a.lok-btn {
  margin-top: auto;
}

/* Standard paragraph max-width in editor */
.entry-content > p {
  max-width: 65ch;
}


/* ----------------------------------------
   21b. GENERATEBLOCKS INTEGRATION
   ---------------------------------------- */

/* GB Container: inner containers centered with max-width */
.gb-container .gb-container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap-sm);
  padding-right: var(--gap-sm);
}

/* GB Grid: column gaps */
.gb-grid-wrapper {
  display: grid;
  gap: var(--gap-md);
}
.gb-grid-wrapper[class*="lok30g"],
.gb-grid-wrapper[class*="lok40g"] {
  grid-template-columns: repeat(3, 1fr);
}
.gb-grid-wrapper[class*="lok10g"],
.gb-grid-wrapper[class*="lok70g"] {
  grid-template-columns: 1fr 1fr;
}
.gb-grid-wrapper[class*="lok60g"] {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .gb-grid-wrapper {
    grid-template-columns: 1fr !important;
  }
  .gb-grid-wrapper[class*="lok60g"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* GB Grid Column: vertical centering */
.gb-grid-column {
  display: flex;
  flex-direction: column;
}

/* GB Headline: Font System */
.gb-headline {
  font-family: var(--font-display);
  color: var(--clr-text-main);
  letter-spacing: -0.02em;
}

/* GB Buttons: Base Styles */
.gb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--lokago-radius-btn);
  transition: all var(--transition-fast);
  text-decoration: none;
  cursor: pointer;
  line-height: var(--leading-normal);
  white-space: nowrap;
}
.gb-button:active {
  transform: scale(0.96);
}
.gb-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-offset);
}

/* GB Button: Coral */
.gb-button.lok-btn--coral {
  background: var(--clr-accent-hot);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
}
.gb-button.lok-btn--coral:hover {
  color: #fff;
  filter: brightness(1.08);
}

/* GB Button: Green */
.gb-button.lok-btn--green {
  background: var(--clr-brand-primary);
  color: var(--clr-text-main);
  padding: var(--space-2) var(--space-3);
}
.gb-button.lok-btn--green:hover {
  color: var(--clr-text-main);
  filter: brightness(1.06);
}

/* GB Button: Outline */
.gb-button.lok-btn--outline {
  background: transparent;
  color: var(--clr-text-main);
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--clr-border);
}
.gb-button.lok-btn--outline:hover {
  background: rgba(2, 42, 58, 0.04);
}

/* GB Button: Large */
.gb-button.lok-btn--lg {
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-lg);
}

/* GB Button Wrapper: center for CTA sections */
.lok-section--navy .gb-button-wrapper {
  display: flex;
  justify-content: center;
}

/* Lead Magnet Cover Box */
.lok-leitfaden-cover {
  background: linear-gradient(135deg, #022a3a, #183066);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.lok-leitfaden-cover p {
  color: #fff;
  font-weight: 700;
  font-size: var(--text-lg);
  max-width: none;
}
.lok-leitfaden-sub p,
p.lok-leitfaden-sub {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: var(--text-sm);
  font-weight: 400;
}

/* Lead Magnet Card */
.lok-card--lead-magnet {
  padding: clamp(var(--space-4), 5vw, var(--space-6));
}

/* Disclaimer Text */
.lok-disclaimer,
p.lok-disclaimer {
  color: var(--clr-text-muted) !important;
  font-size: var(--text-xs);
  margin-top: var(--space-2);
}

/* CTA Section Styles */
.lok-cta-headline {
  color: #fff !important;
}
.lok-cta-text {
  color: rgba(255, 255, 255, 0.8) !important;
}
.lok-cta-email {
  color: rgba(255, 255, 255, 0.5) !important;
  margin-top: var(--space-3);
}
.lok-cta-email a {
  color: rgba(255, 255, 255, 0.8);
}
.lok-cta-email a:hover {
  color: #fff;
}

/* Stats in dark section */
.lok-section--dark .lok-stat-number {
  color: var(--clr-brand-primary);
}
.lok-section--dark .lok-stat-label,
.lok-section--dark p.lok-stat-label {
  color: rgba(255, 255, 255, 0.7) !important;
}


/* ----------------------------------------
   22. HIDE SCROLLBAR (for Trust Ticker)
   ---------------------------------------- */

.lok-no-scrollbar::-webkit-scrollbar {
  display: none;
}
.lok-no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ----------------------------------------
   22b. VISUAL ENHANCEMENTS
   ---------------------------------------- */

/* Hero Centered Layout */
.lok-hero-centered {
  text-align: center;
  position: relative;
  z-index: 1;
}
.lok-hero-centered h1 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.lok-hero-centered p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.lok-hero-centered .lok-flex {
  justify-content: center;
}
.lok-hero-centered .wp-block-image {
  margin-top: var(--gap-lg);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA Box — Rounded Brand Green Container */
.lok-cta-box {
  background: var(--clr-brand-primary);
  border-radius: clamp(2rem, 4vw, 3rem);
  padding: clamp(var(--space-6), 8vw, var(--space-10)) clamp(var(--space-4), 6vw, var(--space-8));
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lok-cta-box h2 {
  color: var(--clr-text-main);
}
.lok-cta-box p {
  color: rgba(2, 42, 58, 0.8);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.lok-cta-box .lok-btn {
  margin-top: var(--gap-sm);
}

/* Featured Card — Extra visual accent */
.lok-card--featured {
  position: relative;
  overflow: hidden;
}
.lok-card--featured::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 33%;
  height: 100%;
  background: linear-gradient(to left, rgba(148, 193, 31, 0.06), transparent);
  pointer-events: none;
}

/* Dark card inner elements above glow */
.lok-card--dark > * {
  position: relative;
  z-index: 2;
}

/* Sync/Status Indicator */
.lok-status-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--gap-xs);
  backdrop-filter: blur(4px);
  margin-top: auto;
}
.lok-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clr-status-success);
  display: inline-block;
  animation: lok-pulse 2s infinite;
}

/* Section header spacing — centered by default */
.lok-section-header {
  margin-bottom: var(--space-6); /* 48px */
  text-align: center;
}
.lok-section-header .lok-overline,
.lok-section-header h2,
.lok-section-header h3 {
  text-align: center;
}

/* Hide page title on pages */
.page .entry-header {
  display: none !important;
}

/* Scroll-Entrance Animation (triggered by JS IntersectionObserver) */
.lok-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.lok-animate.lok-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ---- Page Spacing Fixes ---- */

/* Hero section: less top padding */
.lok-mesh-bg.lok-section {
  padding-top: clamp(24px, 3vw, 48px);
}

/* Last section before footer: less bottom padding */
.entry-content > .gb-element.lok-section:last-child {
  padding-bottom: var(--gap-md);
}

/* Kill WP-default bottom margin on entry content */
.entry-content {
  padding-bottom: 0;
}
.entry-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Lead Magnet: dark cover box internal padding */
.lok-lead-magnet > .gb-element.lok-card--dark {
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  min-width: 180px;
  flex-shrink: 0;
}

/* Tighten the Lead Magnet wrapper section */
.gb-element.lok-section:has(.lok-lead-magnet) {
  padding-top: var(--section-padding-sm);
  padding-bottom: var(--section-padding-sm);
}


/* ----------------------------------------
   23. RESPONSIVE ADJUSTMENTS
   ---------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --section-padding: clamp(var(--space-6), 6vw, var(--space-8)); /* 48-64px on tablet */
    --gap-lg: var(--space-4); /* 32px */
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding: var(--space-6); /* 48px */
    --gap-lg: var(--space-3);  /* 24px */
    --gap-md: var(--space-3);  /* 24px */
  }

  h1 { font-size: clamp(2rem, 8vw, var(--text-4xl)); }
  h2 { font-size: clamp(var(--text-2xl), 6vw, 2rem); }

  .lok-card {
    padding: var(--space-3); /* 24px uniform on mobile */
    border-radius: var(--lokago-radius-card);
  }

  /* Single-column: no need for baseline-lock */
  .lok-card h3 {
    min-height: auto;
  }

  /* New brand cards responsive */
  .lokago-card {
    padding: var(--space-3);
  }
  .lokago-card-dark {
    padding: var(--space-4) var(--space-3);
  }

  /* Button priority responsive */
  .btn-high-priority,
  .btn-medium-priority,
  .btn-low-priority {
    padding: 12px 24px;
    font-size: var(--text-sm);
    width: 100%;
    text-align: center;
  }

  /* Timeline responsive */
  .lok-timeline-line { display: none; }
  .lok-timeline-step { gap: 16px; }
  .lok-timeline-num {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 18px;
  }
}


/* ========================================
   NAVY QUOTE / MANIFESTO BAND
   ======================================== */

.lok-quote-band {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.lok-quote-band h2 {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
  font-weight: 600;
  line-height: var(--leading-snug);
  color: #fff;
  margin-bottom: var(--space-3);
}

.lok-quote-band .text-highlight-green {
  color: var(--clr-brand-primary);
}

.lok-quote-band p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.lok-section--navy .lok-btn {
  margin-top: var(--space-4);
}

/* Section with blobs needs relative + overflow hidden */
.lok-section--has-blobs {
  position: relative;
  overflow: hidden;
}


/* ========================================
   HERO DASHBOARD FRAME
   ======================================== */

.lok-dashboard-frame img {
  border-radius: var(--lokago-radius-card);
  box-shadow: 0 24px 80px rgba(2, 42, 58, 0.18), 0 8px 24px rgba(2, 42, 58, 0.08);
  border: 1px solid rgba(2, 42, 58, 0.06);
}

/* ========================================
   ASYMMETRIC SECTION (2-column: story + cards)
   ======================================== */

.lok-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: start;
}

.lok-split-story {
  position: sticky;
  top: 120px;
}

.lok-split-story .lok-overline {
  margin-bottom: var(--space-2);
}

.lok-split-story h2 {
  margin-bottom: var(--space-3);
}

.lok-split-story .lok-lead {
  margin-bottom: var(--space-4);
}

.lok-split-cards {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.lok-split-cards .lok-card {
  /* Slightly smaller padding for stacked cards */
  padding: var(--space-4) clamp(var(--space-3), 3vw, var(--space-4));
}

/* Compact card icon for split layout */
.lok-card-icon--inline {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none !important;
  margin-bottom: var(--space-1);
  color: var(--clr-brand-primary);
}

@media (max-width: 768px) {
  .lok-split {
    grid-template-columns: 1fr;
    gap: var(--gap-md);
  }
  .lok-split-story {
    position: static;
  }
}


/* ========================================
   TIMELINE COMPONENT
   ========================================
   Reusable vertical timeline with numbered steps.
   Usage:
     section.lok-section  (use lok-section--navy or custom bg)
       div.lok-container
         div.lok-timeline
           div.lok-timeline-line
           div.lok-timeline-step.lok-fade-in
             p.lok-timeline-num.lok-timeline-num--active   "1"
             div.lok-timeline-content
               h3.lok-timeline-title
               p.lok-timeline-subtitle
               p.lok-timeline-desc
               p.lok-timeline-time
   ======================================== */

.lok-timeline {
  position: relative;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.lok-timeline-line {
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 56px;
  width: 2px;
  background: rgba(148, 193, 31, 0.2);
  z-index: 0;
}

.lok-timeline-step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.lok-timeline-num {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.lok-timeline-num--active {
  color: var(--clr-bg-navy);
  background: var(--clr-green);
}

.lok-timeline-num--inactive {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.lok-timeline-content {
  flex: 1;
}

.lok-timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.lok-timeline-header .lok-timeline-title {
  margin: 0;
}

.lok-timeline-title {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}

.lok-timeline-subtitle {
  font-size: 14px;
  color: var(--clr-green);
  font-weight: 600;
  margin-bottom: 8px;
}

.lok-timeline-desc {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
}

.lok-timeline-time {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.lok-timeline-optional {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(148, 193, 31, 0.15);
  color: var(--clr-green);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ========================================
   SCROLL FADE-IN ANIMATION
   ========================================
   Universal scroll-triggered animation.
   Add .lok-fade-in to any element.
   Use data-delay="150" for stagger (ms).
   JS in lokago.js handles IntersectionObserver.
   ======================================== */

/* ========================================
   PRICING CARDS COMPONENT
   ========================================
   Reusable pricing card system for service pages.
   Usage:
     wp:columns (2-col grid)
       wp:column
         div.lok-price-card                  (basis card)
           p.lok-price-label                 "BASISPAKET"
           h3                                "Pflichtschulung"
           p.lok-price-subtitle              "Modul 1 + 2 — ..."
           div.lok-price-amount
             span.lok-price-number           "500"
             span.lok-price-unit             "€ netto"
           ul.lok-checklist                  (feature list)
           a.lok-btn.lok-btn--outline        "Basispaket anfragen"
       wp:column
         div.lok-price-card.lok-price-card--premium
           div.lok-price-ribbon              "Empfohlen"
           p.lok-price-label                 "GESAMTPAKET"
           h3                                "Pflichtschulung + Praxis"
           p.lok-price-subtitle              ...
           div.lok-price-amount              ...
           p.lok-price-savings               "Sie sparen ..."
           ul.lok-checklist                  ...
           a.lok-btn.lok-btn--green          "Gesamtpaket anfragen"
   ======================================== */

.lok-price-card {
  border-radius: var(--radius-xl, 20px);
  padding: clamp(var(--space-4, 32px), 4vw, var(--space-5, 40px)) clamp(var(--space-3, 24px), 3vw, var(--space-4, 32px));
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 2px solid rgba(2, 42, 58, 0.1);
  background: #fff;
}

.lok-price-card h3 {
  font-size: clamp(18px, 2vw, 20px);
  font-weight: 700;
  margin: 8px 0 4px;
  min-height: auto;
}

/* Premium variant — dark background with glow */
.lok-price-card--premium {
  background: var(--clr-text-main, #022a3a);
  background-image: radial-gradient(at 100% 0%, rgba(148, 193, 31, 0.12) 0%, transparent 60%);
  border-color: transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(2, 42, 58, 0.25);
}

.lok-price-card--premium h3 {
  color: #fff;
}

.lok-price-card--premium p {
  color: rgba(255, 255, 255, 0.75);
}

/* Corner ribbon */
.lok-price-ribbon {
  position: absolute;
  top: 22px;
  right: -32px;
  transform: rotate(45deg);
  padding: 5px 42px;
  background: var(--clr-accent, #E65536);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 3;
}

/* Package label (BASISPAKET / GESAMTPAKET) */
.lok-price-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-green, #94c11f);
  margin-bottom: 0;
}

/* Subtitle */
.lok-price-subtitle {
  font-size: 14px;
  color: rgba(2, 42, 58, 0.5);
  margin-bottom: var(--space-3, 24px);
}

.lok-price-card--premium .lok-price-subtitle {
  color: rgba(255, 255, 255, 0.45);
}

/* Price amount row */
.lok-price-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--space-3, 24px);
}

.lok-price-number {
  font-family: var(--ff-heading, 'Outfit', sans-serif);
  font-size: clamp(40px, 5vw, 48px);
  font-weight: 800;
  line-height: 1;
  color: var(--clr-text-main, #022a3a);
}

.lok-price-card--premium .lok-price-number {
  color: #fff;
}

.lok-price-unit {
  font-size: 16px;
  font-weight: 400;
  color: rgba(2, 42, 58, 0.5);
}

.lok-price-card--premium .lok-price-unit {
  color: rgba(255, 255, 255, 0.45);
}

/* Savings callout */
.lok-price-savings {
  font-size: 13px;
  color: var(--clr-green, #94c11f);
  margin: -16px 0 var(--space-3, 24px);
}

/* Checklist inside pricing cards — override min-height */
.lok-price-card .lok-checklist {
  flex: 1;
  margin-bottom: var(--space-3, 24px);
}

/* Push button to bottom */
.lok-price-card > .gb-text.lok-btn,
.lok-price-card > a.lok-btn {
  margin-top: auto;
}

/* Dark card checklist text */
.lok-price-card--premium .lok-checklist li {
  color: rgba(255, 255, 255, 0.85);
}

/* Price note below cards */
.lok-price-note {
  text-align: center;
  font-size: 13px;
  color: rgba(2, 42, 58, 0.4);
  margin-top: var(--space-3, 24px);
}

/* Button: Outlined (for basis cards) */
.lok-btn--outline {
  display: block;
  text-align: center;
  border: 2px solid var(--clr-text-main, #022a3a);
  color: var(--clr-text-main, #022a3a);
  background: transparent;
}
.lok-btn--outline:hover {
  background: rgba(2, 42, 58, 0.04);
}

/* Button: Green (for premium cards) */
.lok-btn--green {
  display: block;
  text-align: center;
  background: var(--clr-green, #94c11f);
  color: var(--clr-text-main, #022a3a);
  box-shadow: 0 4px 20px rgba(148, 193, 31, 0.2);
}
.lok-btn--green:hover {
  box-shadow: 0 8px 30px rgba(148, 193, 31, 0.3);
}

/* Full-height column support */
.wp-block-column > .gb-element.lok-price-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media (max-width: 768px) {
  .lok-price-card {
    padding: var(--space-3, 24px);
  }
}


/* ========================================
   SCROLL ANIMATIONS
   ========================================
   JS in lokago.js handles IntersectionObserver.
   ======================================== */

.lok-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.lok-fade-in.lok-visible {
  opacity: 1;
  transform: none;
}