/* Schriften lokal eingebunden (latin, variable). Keine Verbindung zu Google beim Seitenaufruf. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-var.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;
}

/* ==========================================================================
   WEBsitelöwe — Strategische Websites & Verkaufsseiten
   Visual Architecture & High-Conversion Hero System
   100% Unified Design • 60fps GPU Animations • Core Web Vitals Optimized
   ========================================================================== */

:root {
  --wl-orange-text: #C2410C; /* Orange für Fließ- und Linktext unter 19px (Kontrast 5,2:1 auf Weiß) */
  /* WEBsitelöwe Signature CI Palette (70% Crisp White/Alabaster • 20% Forest/Charcoal • 10% Mint/Orange) */
  --wl-bg-sage-top: #F3FAF4;
  --wl-bg-sage-bottom: #ECF6EE;
  --wl-surface-white: #FFFFFF;
  --wl-surface-subtle: #F7FAF8;
  --wl-forest: #083A18;
  --wl-forest-hover: #0c4f22;
  --wl-forest-rich: #0B461E;
  --wl-charcoal: #111111;
  --wl-mint: #C6E9CE;
  --wl-orange: #FF5A1F;
  --wl-orange-hover: #E04812;

  /* Core Surfaces (70/20/10 Balance) */
  --bg-obsidian: #FFFFFF;
  --bg-elevated: #F7FAF8;
  --bg-card: #FFFFFF;
  --bg-glass: rgba(8, 58, 24, 0.04);
  --bg-glass-strong: rgba(8, 58, 24, 0.94);
  --bg-light-stage: #C6E9CE;

  /* Text Hierarchy (High-Contrast Charcoal & Forest for Effortless Reading) */
  --text-primary: #111111;
  --text-secondary: #374151;
  --text-muted: #6B7280;
  --text-dark: #083A18;

  /* Accents & Borders */
  --accent-gold: #FF5A1F;
  --accent-coral: #FF5A1F;
  --accent-teal: #083A18;
  --border-subtle: rgba(17, 24, 39, 0.08);
  --border-strong: rgba(8, 58, 24, 0.18);
  --border-card-crisp: #E5ECE7;

  /* Typography — #1 Inter (Body/UI) + #2 Plus Jakarta Sans (Display/Headings) */
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout & Spacing */
  --container-max: 1380px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad-y: clamp(3.5rem, 6vw, 5.5rem);
  --topbar-h: 32px;
  --header-h: 76px;

  /* Motion Curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --spring-gpu: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  background-color: #FFFFFF;
  color: #111111;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body {
  background-color: #FFFFFF;
  color: #111111;
  overflow-x: clip;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

p, li {
  text-wrap: pretty;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

button {
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  background: var(--text-primary);
  color: var(--text-dark);
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  transition: top 0.25s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   WEBSITELÖWE HIGH-CONVERSION HERO SECTION RULES & CTA MICRO-ANIMATION
   ========================================================================== */
.dv-hero {
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.dv-hero[data-show-hero-visuals="true"] #hero-ledge-slot-desktop {
  display: grid;
}

.dv-hero[data-show-hero-visuals="true"] #hero-ledge-slot-mobile {
  display: flex;
}



/* Aesthetic, Subtle & Magnetic Primary CTA Animation ("Projekt starten") */
.cta-projekt-starten {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: ctaWarmPulse 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.25s ease,
              box-shadow 0.35s ease;
}

.cta-projekt-starten::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -35%;
  width: 46%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-180%) skewX(-24deg);
  animation: ctaSilkSweep 4.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  pointer-events: none;
  z-index: 1;
}

.cta-projekt-starten:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 34px -4px rgba(255, 90, 31, 0.65),
              0 0 0 5px rgba(255, 90, 31, 0.18);
}

.cta-projekt-starten .cta-arrow-badge {
  position: relative;
  z-index: 2;
  animation: ctaArrowNudge 3.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-projekt-starten:hover .cta-arrow-badge {
  animation-play-state: paused;
  transform: translateX(3px) scale(1.06);
}

@keyframes ctaWarmPulse {
  0%, 100% {
    box-shadow: 0 8px 22px -4px rgba(255, 90, 31, 0.42),
                0 0 0 0px rgba(255, 90, 31, 0.22);
  }
  50% {
    box-shadow: 0 12px 30px -2px rgba(255, 90, 31, 0.64),
                0 0 0 6px rgba(255, 90, 31, 0.13);
  }
}

@keyframes ctaSilkSweep {
  0%, 22% {
    transform: translateX(-180%) skewX(-24deg);
  }
  58%, 100% {
    transform: translateX(420%) skewX(-24deg);
  }
}

@keyframes ctaArrowNudge {
  0%, 100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(2.5px);
  }
}













/* Smooth ~30% Scale-Up on Hover for the Entire Center Hero Block (Box + Text + Button + Center Lion) */
.dv-hero[data-show-hero-visuals="true"] #hero-ledge-center-desktop {
  display: flex;
}

.hero-center-cta-stage {
  position: relative;
  z-index: 30;
  transform-origin: center bottom;
  will-change: transform, box-shadow, border-radius;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-center-cta-stage:hover,
.hero-center-cta-stage:has(.cta-projekt-starten:hover) {
  z-index: 40;
  transform: scale(1.28);
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -18px 54px rgba(8, 58, 24, 0.32);
}

/* ==========================================================================
   2. FIXED AMBIENT IRIDESCENT RIBBON BACKGROUND (Creativeans Signature)
   ========================================================================== */
.ambient-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #17151e 0%, #0b0b0e 72%);
}

#ambient-ribbon-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.82;
  filter: blur(36px) saturate(1.25);
  transform: translateZ(0);
}

.ambient-frost {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(11, 11, 14, 0.25) 0%,
    rgba(11, 11, 14, 0.68) 85%
  );
}

.page-shell {
  position: relative;
  z-index: 2;
}

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

/* ==========================================================================
   3. TOP MARQUEE BAR & FLOATING GLASS PILL HEADER
   ========================================================================== */
.top-marquee-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  z-index: 110;
  background: rgba(11, 11, 14, 0.76);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  overflow: hidden;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 245, 241, 0.78);
}

.top-marquee-track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}

.top-marquee-bar:hover .top-marquee-track {
  animation-play-state: paused;
}

.top-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
}

.top-marquee-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 8px var(--accent-gold);
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Main Floating Header */
.site-header {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  left: 0;
  right: 0;
  z-index: 105;
  pointer-events: none;
  transition: transform 0.35s var(--ease-out-expo), top 0.35s var(--ease-out-expo);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Brand Emblem & Wordmark */
.brand-link {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 15, 20, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.brand-link:hover {
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f6f5f1 0%, #dfb476 100%);
  color: #0b0b0e;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  flex-shrink: 0;
}

.brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.brand-sub {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Center Floating Glass Pill Navigation (Creativeans Signature) */
.nav-pill-shell {
  pointer-events: auto;
  position: relative;
  border-radius: 999px;
  padding: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(201, 91, 76, 0.55) 35%,
    rgba(223, 180, 118, 0.55) 68%,
    rgba(60, 166, 158, 0.45) 100%
  );
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.45rem;
  border-radius: 999px;
  background: rgba(16, 16, 22, 0.84);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.nav-pill-link {
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(246, 245, 241, 0.82);
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav-pill-link:hover,
.nav-pill-link.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

/* Header Right Actions */
.header-actions {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.icon-circle-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.18);
  color: #083A18;
  box-shadow: 0 4px 12px rgba(8, 58, 24, 0.06);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.icon-circle-btn:hover {
  background: #083A18;
  color: #FFFFFF;
  border-color: #083A18;
  transform: translateY(-2px);
}

/* WEBsitelöwe Pill Button with Rotating Arrow Circle */
.btn-creative {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem 0.55rem 1.35rem;
  border-radius: 999px;
  background: #083A18;
  border: 1px solid #083A18;
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(8, 58, 24, 0.14);
  transition: background-color 0.3s var(--ease-out-expo),
    color 0.3s var(--ease-out-expo),
    border-color 0.3s var(--ease-out-expo),
    transform 0.3s var(--ease-out-expo);
}

.btn-creative:hover {
  background: #FF5A1F;
  color: #FFFFFF;
  border-color: #FF5A1F;
  transform: translateY(-2px);
}

.btn-creative-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #083A18;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: transform 0.35s var(--ease-out-expo), background-color 0.35s ease, color 0.35s ease;
}

.btn-creative:hover .btn-creative-arrow {
  transform: rotate(45deg);
  background: #FFFFFF;
  color: #FF5A1F;
}

.btn-creative--solid {
  background: #FF5A1F;
  color: #FFFFFF;
  border-color: #FF5A1F;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(255, 90, 31, 0.32);
}

.btn-creative--solid .btn-creative-arrow {
  background: #FFFFFF;
  color: #FF5A1F;
}

.btn-creative--solid:hover {
  background: #E04812;
  border-color: #E04812;
  color: #FFFFFF;
}

/* Inside dark forest sections, make default .btn-creative pop in Orange */
.acc-band .btn-creative,
.site-footer .btn-creative {
  background: #FF5A1F;
  border-color: #FF5A1F;
  color: #FFFFFF;
}

.acc-band .btn-creative .btn-creative-arrow,
.site-footer .btn-creative .btn-creative-arrow {
  background: #FFFFFF;
  color: #FF5A1F;
}

.acc-band .btn-creative:hover,
.site-footer .btn-creative:hover {
  background: #E04812;
  border-color: #E04812;
}

/* ==========================================================================
   FLOATING BOTTOM-RIGHT CORNER STACK (Lion-Silhouette KONTAKT + Video Card)
   Appears on Desktop & Mobile once scrolled past the Hero section (#home)
   ========================================================================== */
.sticky-site-header.is-scrolled {
  background: rgba(243, 250, 244, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(8, 58, 24, 0.08);
  box-shadow: 0 8px 24px rgba(8, 58, 24, 0.06);
}





/* 1. Top Element: "KONTAKT" in a Lion-Head & Mane Silhouette Design */
@keyframes floatingKontaktPulse5s {
  0%, 76%, 100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  81% {
    transform: translateY(-5px) scale(1.07) rotate(-2.5deg);
  }
  86% {
    transform: translateY(-3px) scale(1.05) rotate(2.2deg);
  }
  91% {
    transform: translateY(-4px) scale(1.06) rotate(-1.2deg);
  }
  95% {
    transform: translateY(0) scale(1.01) rotate(0deg);
  }
}

.floating-lion-kontakt {
  pointer-events: auto;
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  filter: drop-shadow(0 12px 24px rgba(8, 58, 24, 0.28));
  animation: floatingKontaktPulse5s 5s ease-in-out infinite;
  transition: transform 0.32s var(--spring-gpu), filter 0.32s ease;
}

.floating-lion-kontakt:hover {
  animation-play-state: paused;
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 16px 32px rgba(8, 58, 24, 0.38));
}

.floating-lion-kontakt-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}























/* ==========================================================================
   4. SECTION 1B — POSITIONING & 4 EXECUTIVE PROOF STANDARDS (#F3FAF4)
   ========================================================================== */
.hero-section {
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: clamp(2rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #F3FAF4;
  box-shadow: 0 0 0 100vmax #F3FAF4;
  clip-path: inset(0 -100vmax);
}

.hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
}

.hero-title-col {
  grid-column: 1 / 8;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  background: #C6E9CE;
  border: 1px solid rgba(8, 58, 24, 0.14);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #083A18;
  margin-bottom: 1.75rem;
  max-width: 100%;
}

.hero-display-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 6.8vw, 6.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #083A18;
}

/* Endless Reference Logo Marquee Banner (Above Positioning Card) */
.ref-logo-marquee {
  width: 100%;
  margin-bottom: 0.5rem;
  padding-block: 0.35rem 0.65rem;
  background: transparent;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.ref-logo-marquee-headline {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.15vw, 1.04rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(8, 58, 24, 0.82);
  text-align: center;
  max-width: none;
  white-space: nowrap;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media (max-width: 820px) {
  .ref-logo-marquee-headline {
    white-space: normal;
    font-size: 0.8rem;
    max-width: 36ch;
  }
}

.ref-logo-marquee-headline strong {
  font-weight: 800;
  color: #083A18;
}

.ref-logo-marquee-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 7%,
    #000000 18%,
    #000000 82%,
    rgba(0, 0, 0, 0.35) 93%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 7%,
    #000000 18%,
    #000000 82%,
    rgba(0, 0, 0, 0.35) 93%,
    transparent 100%
  );
}

.ref-logo-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: refLogoMarqueeScroll 32s linear infinite;
}

.ref-logo-marquee-group {
  display: flex;
  align-items: center;
  gap: clamp(2.75rem, 4.6vw, 4.5rem);
  padding-right: clamp(2.75rem, 4.6vw, 4.5rem);
  flex-shrink: 0;
}

.ref-logo-item {
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ref-logo-item:hover {
  opacity: 1;
  transform: scale(1.05);
}

.ref-logo-item--wide {
  height: clamp(28px, 2.7vw, 36px);
}

.ref-logo-item--medium {
  height: clamp(34px, 3.2vw, 44px);
}

.ref-logo-item--tall {
  height: clamp(42px, 4vw, 54px);
}

@keyframes refLogoMarqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.hero-copy-col {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #C6E9CE;
  border-radius: 28px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 12px 32px rgba(8, 58, 24, 0.05);
}

.hero-fomo-hook {
  grid-column: 1 / 7;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  line-height: 1.38;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #083A18;
  padding-left: 1.15rem;
  border-left: 4px solid #FF5A1F;
}

.hero-lead-wrap {
  grid-column: 7 / 13;
  position: relative;
  z-index: 1;
}

.hero-lead-box {
  position: relative;
  z-index: 1;
}

.hero-lead {
  position: relative;
  z-index: 2;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.65;
  color: rgba(8, 58, 24, 0.82);
  margin: 0;
}

.hero-lead strong {
  color: #083A18;
  font-weight: 700;
}

/* ==========================================================================
   UNIFIED PRIMARY CTA: "BookACallLink" 2-PHASE AVATAR + "SIE" MERGE BUTTON
   ========================================================================== */
.book-cta-btn {
  position: relative;
   isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 235px;
  padding-inline: 1.5rem;
  border-radius: 999px;
  background: #FF5A1F;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 10px 26px -4px rgba(255, 90, 31, 0.42);
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.book-cta-btn--dark {
  background: #083A18;
  box-shadow: 0 10px 26px -4px rgba(8, 58, 24, 0.28);
}

.book-cta-btn:hover {
  background: #E04812;
  box-shadow: 0 14px 32px -4px rgba(255, 90, 31, 0.55);
}

.book-cta-btn--dark:hover {
  background: #0B461E;
  box-shadow: 0 14px 32px -4px rgba(8, 58, 24, 0.38);
}

.book-cta-btn:active {
  transform: scale(0.98);
}

.book-cta-default {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding-inline: 1.25rem;
  white-space: nowrap;
  transition: opacity 0.24s cubic-bezier(0.2, 0, 0, 1),
              transform 0.24s cubic-bezier(0.2, 0, 0, 1),
              filter 0.24s cubic-bezier(0.2, 0, 0, 1);
}

.book-cta-btn[data-phase="start"] .book-cta-default,
.book-cta-btn[data-phase="end"] .book-cta-default {
  opacity: 0;
  transform: translateY(-28px);
  filter: blur(4px);
}

.book-cta-active {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.65rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s cubic-bezier(0.2, 0, 0, 1);
}

.book-cta-btn[data-phase="start"] .book-cta-active,
.book-cta-btn[data-phase="end"] .book-cta-active {
  opacity: 1;
}

.book-cta-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform: translateX(0);
  transition: transform 0.38s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.book-cta-avatar {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #FFFFFF;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-36px) rotate(-180deg);
  transition: opacity 0.32s var(--spring-gpu),
              transform 0.42s cubic-bezier(0.22, 1.35, 0.36, 1);
}

.book-cta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.book-cta-btn[data-phase="start"] .book-cta-avatar,
.book-cta-btn[data-phase="end"] .book-cta-avatar {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}

.book-cta-plus {
  display: inline-block;
  overflow: hidden;
  text-align: center;
  font-size: 1rem;
  font-weight: 800;
  width: 0;
  opacity: 0;
  margin-inline: 0;
  transform: scale(0.6);
  transition: all 0.26s var(--spring-gpu);
}

.book-cta-btn[data-phase="start"] .book-cta-plus {
  width: 18px;
  opacity: 1;
  margin-inline: 6px;
  transform: scale(1);
}

.book-cta-you {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #083A18;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  opacity: 0;
  margin-left: 0;
  transform: translateX(36px) rotate(180deg);
  transition: opacity 0.32s var(--spring-gpu),
              transform 0.42s cubic-bezier(0.22, 1.35, 0.36, 1),
              margin-left 0.32s var(--spring-gpu);
}

.book-cta-btn[data-phase="start"] .book-cta-you {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  margin-left: 0;
}

.book-cta-btn[data-phase="end"] .book-cta-you {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  margin-left: -10px;
}

.book-cta-hover-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 700;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transition: max-width 0.32s cubic-bezier(0.2, 0, 0, 1),
              opacity 0.26s cubic-bezier(0.2, 0, 0, 1),
              margin-left 0.28s cubic-bezier(0.2, 0, 0, 1);
}

.book-cta-btn[data-phase="end"] .book-cta-hover-text {
  max-width: 160px;
  opacity: 1;
  margin-left: 10px;
}

/* ==========================================================================
   5. SECTION 2 — FOLDER PEEK CASE STUDIES (#FFFFFF Crisp White Stage)
   ========================================================================== */
.works-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
}

.section-header-clean {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.section-kicker {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF5A1F;
  margin-bottom: 0.5rem;
}

.section-title-clean {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111111;
}

.works-header-clean {
  justify-content: center;
  text-align: center;
}

.works-header-clean .section-title-clean {
  max-width: none;
  text-align: center;
  margin-inline: auto;
}

.section-sub-clean {
  font-size: 1rem;
  color: #4B5563;
  max-width: 48ch;
  line-height: 1.55;
}

/* 4-Card FolderPeek Grid (Fits all 4 folders in a single horizontal row on Desktop) */
.folder-cards-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.folder-peek-wrap {
  position: relative;
  isolation: isolate;
  height: 430px;
  width: 292px;
  flex-shrink: 0;
}

.folder-peek-card {
  position: relative;
  display: block;
  width: 292px;
  height: 430px;
  border-radius: 32px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  text-align: left;
  box-sizing: border-box;
  box-shadow: 0 14px 34px rgba(17, 24, 39, 0.1);
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
  perspective: 1000px;
  transition: box-shadow 0.38s ease;
}

.folder-peek-card:hover {
  box-shadow: 0 24px 48px rgba(8, 58, 24, 0.16);
}

/* Layer 0: Background Card Graphic (Revealed in full when folder tab slides down on hover) */
.folder-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #FFFFFF;
  transform: translateY(0) scale(1);
  will-change: transform;
  transition: transform 0.52s var(--spring-gpu);
}

.folder-peek-card:hover .folder-bg-layer,
.folder-peek-card:focus-visible .folder-bg-layer,
.folder-peek-card.is-open-mobile .folder-bg-layer {
  transform: translateY(-8px) scale(1.05);
}

.folder-bg-layer picture {
  display: block;
  width: 100%;
  height: 100%;
}

.folder-bg-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

/* Layer 1: Compact KPI Pill (Sits discreetly at top-right on hover so the card graphic is 100% unobstructed) */
.folder-character-layer {
  display: none;
}

.folder-peek-card:hover .folder-character-layer,
.folder-peek-card:focus-visible .folder-character-layer,
.folder-peek-card.is-open-mobile .folder-character-layer {
  transform: translateX(-50%) translateY(-88px) scale(1.04);
}

.folder-character-float {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  animation: folderFloatIdle 4.8s ease-in-out infinite;
}

.folder-character-badge-box {
  width: 162px;
  height: 96px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  padding: 0.55rem 0.85rem;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.22);
  border: 2px solid #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
}

.folder-character-badge-box img {
  height: 36px;
  width: auto;
  max-width: 128px;
  object-fit: contain;
}

.folder-character-kpi {
  font-size: 0.68rem;
  font-weight: 800;
  color: #083A18;
  background: #E3F5E8;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes folderFloatIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  33% {
    transform: translateY(-4px) rotate(1.2deg);
  }
  66% {
    transform: translateY(-2px) rotate(-1.2deg);
  }
}

/* Layer 2: Sliding SVG Folder Front (top: 78px -> slides y: 72px to 150px on hover, zero overlap with badge or bottom text) */
.folder-tab-layer {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 78px;
  z-index: 20;
  height: 395px;
  transform: translateY(0);
  will-change: transform;
  transition: transform 0.52s var(--spring-gpu);
}

.folder-peek-card:hover .folder-tab-layer,
.folder-peek-card:focus-visible .folder-tab-layer,
.folder-peek-card.is-open-mobile .folder-tab-layer {
  transform: translateY(72px);
}

.folder-tab-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -10px 20px rgba(0, 0, 0, 0.15));
}

.folder-number {
  position: absolute;
  left: 1.35rem;
  top: 0.75rem;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.folder-arrow {
  position: absolute;
  right: 1.35rem;
  top: 2.35rem;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transform: translateX(0) scale(1);
  transition: transform 0.42s var(--spring-gpu), opacity 0.25s ease;
}

.folder-peek-card:hover .folder-arrow {
  transform: translateX(4px) scale(1.2);
  opacity: 1;
}

/* Layer 3: Bottom Folder Text Content (Identical Top & Bottom Alignment Across All 4 Cards) */
.folder-bottom-meta {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 242px;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.25rem;
  padding: 0 1.25rem 1.2rem;
  transform: translateY(0);
  transition: transform 0.52s var(--spring-gpu);
}

.folder-peek-card:hover .folder-bottom-meta,
.folder-peek-card:focus-visible .folder-bottom-meta,
.folder-peek-card.is-open-mobile .folder-bottom-meta {
  transform: translateY(4px);
}

.folder-industry-tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.folder-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.folder-desc {
  font-size: 0.85rem;
  line-height: 1.42;
}

.folder-cta-hint {
  margin-top: auto;
  padding-top: 0.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #FF5A1F;
}

/* ==========================================================================
   5B. SECTION 2B — ASYMMETRIC 7-CARD BENTO SERVICES GRID (#F3FAF4)
   ========================================================================== */
.bento-services-section {
  padding-block: var(--section-pad-y);
  background-color: #F3FAF4;
  border-top: 1px solid rgba(8, 58, 24, 0.06);
  border-bottom: 1px solid rgba(8, 58, 24, 0.06);
}

.bento-services-header {
  text-align: center;
  max-width: 980px;
  margin: 0 auto clamp(2.5rem, 4.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.bento-services-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.95rem;
  border-radius: 999px;
  background: #C6E9CE;
  color: #083A18;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.bento-services-title,
.unified-section-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.032em;
  color: #083A18;
  text-align: center;
  margin: 0;
}

.bento-title-accent {
  color: #FF5A1F;
}

.floating-lion-kontakt {
  display: none !important;
}

.bento-services-sub {
  font-size: clamp(0.92rem, 1.1vw, 1.04rem);
  line-height: 1.55;
  color: rgba(8, 58, 24, 0.78);
  max-width: none;
  margin: 0;
}

.bento-services-sub strong {
  font-weight: 700;
  color: #083A18;
}

.bento-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35rem;
}

.bento-service-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  border: 2px solid rgba(8, 58, 24, 0.08);
  box-shadow: 0 10px 30px rgba(8, 58, 24, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 356px;
  text-decoration: none;
  color: #111111;
  transition: transform 0.35s var(--spring-gpu),
              border-color 0.28s ease,
              box-shadow 0.35s ease;
}

.bento-service-card.is-featured {
  border-color: #083A18;
}

.bento-service-card:hover {
  transform: translateY(-4px);
  border-color: #083A18;
  box-shadow: 0 18px 42px rgba(8, 58, 24, 0.11);
}

.bento-service-card--wide {
  grid-column: span 2;
  flex-direction: row;
  align-items: stretch;
  height: 356px;
}

.bento-card-copy {
  position: relative;
  z-index: 2;
  padding: 1.85rem 1.8rem 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.bento-service-card--wide .bento-card-copy {
  flex: 0 0 46%;
  max-width: 46%;
  justify-content: center;
  padding: 2.15rem 1rem 2.15rem 2.15rem;
}

.bento-card-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #083A18;
  margin: 0;
}

.bento-card-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4B5563;
  margin: 0;
  text-wrap: pretty;
}

.bento-card-link {
  margin-top: 0.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: #FF5A1F;
  transition: gap 0.25s ease;
}

.bento-service-card:hover .bento-card-link {
  gap: 0.65rem;
}

/* ==========================================================================
   FRAMELESS TRANSPARENT LIVE-UI & SVG/CSS STAGES (ALL 7 BENTO CARDS)
   ========================================================================== */
.bento-card-visual {
  position: relative;
  z-index: 1;
  user-select: none;
  pointer-events: none;
}

.bento-card-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 55% 52%, rgba(226, 243, 230, 0.72) 0%, rgba(255, 255, 255, 0) 68%),
    radial-gradient(rgba(8, 58, 24, 0.09) 1px, transparent 1px);
  background-size: 100% 100%, 16px 16px;
  mask-image: radial-gradient(ellipse 72% 70% at 54% 54%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 54% 54%, #000 30%, transparent 78%);
  opacity: 0.85;
  transition: opacity 0.35s ease;
}

.bento-service-card:hover .bento-card-visual::before {
  opacity: 1;
}

.bento-card-visual--wide {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.35rem 1.75rem 1.35rem 0.5rem;
}

.bento-card-visual--single {
  width: 100%;
  height: 192px;
  flex-shrink: 0;
  margin-top: auto;
  padding: 0.35rem 1.45rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   CARD 1: WEBDESIGN (Editorial Design Studio Canvas + Mobile + Snap Guides)
   -------------------------------------------------------------------------- */
.bento-stage--webdesign {
  max-width: 344px;
  max-height: 256px;
}

.bw-design-toolbar {
  position: absolute;
  top: -2px;
  left: 6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(8, 58, 24, 0.13);
  box-shadow: 0 10px 22px rgba(8, 58, 24, 0.09);
  padding: 5px 10px;
  border-radius: 999px;
  animation: bwToolbarFloat 6s ease-in-out infinite;
}

.bw-swatch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.bw-swatch-dot--forest { background: #083A18; }
.bw-swatch-dot--orange { background: #FF5A1F; }
.bw-swatch-dot--mint { background: #86EFAC; }

.bw-toolbar-sep {
  width: 1px;
  height: 11px;
  background: rgba(8, 58, 24, 0.14);
  margin-inline: 2px;
}

.bw-toolbar-aa {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  color: #083A18;
}

.bw-toolbar-tag {
  font-size: 0.63rem;
  font-weight: 800;
  color: #FF5A1F;
  background: #FFF2EC;
  padding: 2px 7px;
  border-radius: 999px;
}

.bw-float-badge--rating {
  position: absolute;
  top: -2px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.12);
  box-shadow: 0 10px 22px rgba(8, 58, 24, 0.09);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.67rem;
  font-weight: 800;
  color: #083A18;
  animation: bwBadgeFloat 6s ease-in-out infinite;
}

.bw-stars {
  color: #F59E0B;
  font-size: 0.65rem;
  letter-spacing: 0.5px;
}

.bw-hero-card {
  position: relative;
  width: 294px;
  max-width: 100%;
  margin-top: 18px;
  margin-right: 14px;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  border: 1.5px solid rgba(8, 58, 24, 0.13);
  box-shadow: 0 18px 40px rgba(8, 58, 24, 0.09), 0 2px 6px rgba(8, 58, 24, 0.04);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: bwCardFloat 6s ease-in-out infinite;
}

.bw-hero-top {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(8, 58, 24, 0.07);
}

.bw-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 4px;
}

.bw-brand-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #083A18;
  box-shadow: 0 0 0 2px #ECF6EE;
}

.bw-brand-mark small {
  font-family: var(--font-display);
  font-size: 0.64rem;
  font-weight: 800;
  color: #083A18;
}

.bw-nav-pill {
  height: 5px;
  border-radius: 99px;
  background: rgba(8, 58, 24, 0.11);
}

.bw-nav-pill--w1 { width: 22px; }
.bw-nav-pill--w2 { width: 18px; }

.bw-verified-tag {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: #083A18;
  background: #ECF6EE;
  padding: 2px 8px;
  border-radius: 999px;
}

.bw-editorial-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
}

.bw-editorial-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.bw-mini-kicker {
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #FF5A1F;
}

.bw-mini-heading {
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #083A18;
}

.bw-sub-bar {
  display: block;
  width: 86%;
  height: 5px;
  border-radius: 6px;
  background: rgba(8, 58, 24, 0.13);
  margin-bottom: 3px;
}

.bw-cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #FF5A1F;
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.28);
  animation: bwCtaPulse 6s ease-in-out infinite;
}

.bw-click-ripple {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  border: 2px solid #FF5A1F;
  opacity: 0;
  animation: bwRipple 6s ease-out infinite;
}

.bw-art-frame {
  position: relative;
  width: 102px;
  height: 86px;
  padding: 4px;
  flex-shrink: 0;
}

.bw-snap-corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: #FF5A1F;
  border-style: solid;
  opacity: 0.45;
  animation: bwSnapPulse 6s ease-in-out infinite;
}

.bw-snap-corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; border-top-left-radius: 3px; }
.bw-snap-corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; border-top-right-radius: 3px; }
.bw-snap-corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; border-bottom-left-radius: 3px; }
.bw-snap-corner--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-bottom-right-radius: 3px; }

.bw-art-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(145deg, #083A18 0%, #146C32 100%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.bw-art-sun {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFB088 0%, #FF5A1F 100%);
  box-shadow: 0 0 12px rgba(255, 90, 31, 0.55);
}

.bw-art-arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.bw-art-sheen {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.32) 50%, transparent 62%);
  transform: translateX(-70%);
  animation: bwArtSheen 6s ease-in-out infinite;
}

.bw-mobile-preview {
  position: absolute;
  right: 4px;
  bottom: 8px;
  z-index: 3;
  width: 58px;
  height: 92px;
  background: #FFFFFF;
  border-radius: 13px;
  border: 2px solid #083A18;
  box-shadow: 0 14px 28px rgba(8, 58, 24, 0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: bwMobileFloat 6s ease-in-out infinite;
}

.bw-mobile-notch {
  width: 18px;
  height: 3px;
  border-radius: 99px;
  background: #083A18;
  margin-inline: auto;
  opacity: 0.7;
}

.bw-mobile-art {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #083A18 0%, #15803D 100%);
}

.bw-mobile-line {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: rgba(8, 58, 24, 0.2);
}

.bw-mobile-line--1 { width: 90%; background: #083A18; }
.bw-mobile-line--2 { width: 65%; }

.bw-mobile-btn {
  margin-top: auto;
  width: 100%;
  height: 11px;
  border-radius: 99px;
  background: #FF5A1F;
}

.bw-live-cursor {
  position: absolute;
  bottom: 22px;
  left: 96px;
  z-index: 5;
  filter: drop-shadow(0 6px 10px rgba(8, 58, 24, 0.25));
  animation: bwCursorStudio 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bwCardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes bwToolbarFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes bwBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes bwMobileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes bwSnapPulse {
  0%, 35%, 100% { opacity: 0.35; transform: scale(1); }
  14%, 26% { opacity: 1; transform: scale(1.08); }
}

@keyframes bwArtSheen {
  0%, 10% { transform: translateX(-75%); }
  42%, 100% { transform: translateX(75%); }
}

@keyframes bwCursorStudio {
  0%, 100% { transform: translate(118px, -52px) scale(1); }
  18% { transform: translate(118px, -52px) scale(0.9); }
  26% { transform: translate(118px, -52px) scale(1); }
  52% { transform: translate(0, 0) scale(1); }
  59% { transform: translate(0, 0) scale(0.86); }
  68% { transform: translate(0, 0) scale(1); }
}

@keyframes bwCtaPulse {
  0%, 53%, 73%, 100% { transform: scale(1); }
  60% { transform: scale(0.95); }
  66% { transform: scale(1.05); }
}

@keyframes bwRipple {
  0%, 57% { transform: scale(0.92); opacity: 0; }
  60% { transform: scale(1); opacity: 0.72; }
  78%, 100% { transform: scale(1.3); opacity: 0; }
}

/* --------------------------------------------------------------------------
   CARD 2: SICHERHEIT & PFLEGE (High-Trust Verified Seal & 24/7 Care Card)
   -------------------------------------------------------------------------- */
.bento-stage--pflege {
  justify-content: center;
}

.bp-trust-card {
  width: 100%;
  max-width: 294px;
  background: #FFFFFF;
  border-radius: 17px;
  border: 1.5px solid rgba(8, 58, 24, 0.13);
  box-shadow: 0 14px 32px rgba(8, 58, 24, 0.08);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.bp-trust-header {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bp-seal-wrap {
  position: relative;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-seal-halo {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.18);
  animation: bpHaloPulse 3.6s ease-in-out infinite;
}

.bp-seal-badge {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #ECF6EE;
  border: 1px solid rgba(8, 58, 24, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-trust-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.22;
}

.bp-trust-titles strong {
  font-size: 0.76rem;
  font-weight: 800;
  color: #083A18;
  white-space: nowrap;
}

.bp-trust-titles span {
  font-size: 0.65rem;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
}

.bp-uptime-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F0FDF4;
  border: 1px solid rgba(22, 163, 74, 0.24);
  color: #15803D;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.bp-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16A34A;
  animation: bpLiveDot 2.2s ease-in-out infinite;
}

.bp-monitor-box {
  background: #F7FBF8;
  border: 1px solid rgba(8, 58, 24, 0.08);
  border-radius: 11px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bp-monitor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62rem;
}

.bp-monitor-top span {
  color: #6B7280;
  font-weight: 600;
}

.bp-monitor-top strong {
  color: #15803D;
  font-weight: 800;
}

.bp-bars-row {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 3px;
  height: 14px;
  align-items: center;
}

.bp-bars-row span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: #22C55E;
  opacity: 0.72;
  transform-origin: bottom center;
  animation: bpBarScan 3.6s ease-in-out infinite;
}

.bp-bars-row span:nth-child(2)  { animation-delay: 0.12s; }
.bp-bars-row span:nth-child(3)  { animation-delay: 0.24s; }
.bp-bars-row span:nth-child(4)  { animation-delay: 0.36s; }
.bp-bars-row span:nth-child(5)  { animation-delay: 0.48s; }
.bp-bars-row span:nth-child(6)  { animation-delay: 0.60s; }
.bp-bars-row span:nth-child(7)  { animation-delay: 0.72s; }
.bp-bars-row span:nth-child(8)  { animation-delay: 0.84s; }
.bp-bars-row span:nth-child(9)  { animation-delay: 0.96s; }
.bp-bars-row span:nth-child(10) { animation-delay: 1.08s; }
.bp-bars-row span:nth-child(11) { animation-delay: 1.20s; }
.bp-bars-row span:nth-child(12) { animation-delay: 1.32s; }
.bp-bars-row span:nth-child(13) { animation-delay: 1.44s; }
.bp-bars-row span:nth-child(14) { animation-delay: 1.56s; }
.bp-bars-row span:nth-child(15) { animation-delay: 1.68s; }
.bp-bars-row span:nth-child(16) { animation-delay: 1.80s; }
.bp-bars-row span:nth-child(17) { animation-delay: 1.92s; }
.bp-bars-row span:nth-child(18) { animation-delay: 2.04s; }

.bp-guarantees {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bp-g-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: #ECF6EE;
  color: #083A18;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

@keyframes bpHaloPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.45; }
  50% { transform: scale(1.22); opacity: 0.9; }
}

@keyframes bpLiveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

@keyframes bpBarScan {
  0%, 40%, 100% { opacity: 0.65; transform: scaleY(0.82); background: #22C55E; }
  18% { opacity: 1; transform: scaleY(1.08); background: #15803D; }
}

/* --------------------------------------------------------------------------
   CARD 3: SEO & KI SICHTBARKEIT (3+3 Engine Grid + Seamless Query Ticker)
   -------------------------------------------------------------------------- */
.bento-stage--seo {
  flex-direction: column;
  gap: 9px;
  max-width: 334px;
}

.bs-query-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.12);
  box-shadow: 0 8px 20px rgba(8, 58, 24, 0.06);
  padding: 6px 12px;
  border-radius: 999px;
  width: 100%;
  max-width: 306px;
}

.bs-search-icon {
  flex-shrink: 0;
}

.bs-query-viewport {
  flex: 1;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  position: relative;
}

.bs-query-track {
  display: flex;
  flex-direction: column;
  animation: bsQueryCycle 9s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.bs-query-track span {
  height: 18px;
  line-height: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #083A18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.bs-caret {
  width: 1.8px;
  height: 13px;
  background: #FF5A1F;
  flex-shrink: 0;
  animation: bsCaretBlink 0.95s ease-in-out infinite;
}

.bs-rank-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 306px;
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.16);
  box-shadow: 0 12px 28px rgba(8, 58, 24, 0.09);
  padding: 9px 12px;
  border-radius: 15px;
  animation: bsRankLift 9s ease-in-out infinite;
}

.bs-rank-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bs-rank-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bs-rank-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bs-rank-name {
  font-size: 0.78rem;
  font-weight: 800;
  color: #083A18;
}

.bs-rank-tag {
  font-size: 0.61rem;
  font-weight: 700;
  color: #15803D;
  background: #ECF6EE;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.bs-rank-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.66rem;
  font-weight: 600;
  color: #6B7280;
}

.bs-rank-stars {
  color: #F59E0B;
  font-weight: 700;
}

.bs-engine-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 306px;
}

.bs-engine-chip {
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.11);
  box-shadow: 0 4px 12px rgba(8, 58, 24, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #1F2937;
  white-space: nowrap;
  animation: bsChipWave 7.2s ease-in-out infinite;
}

.bs-engine-chip svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: block;
}

.bs-engine-chip--2 { animation-delay: 1.2s; }
.bs-engine-chip--3 { animation-delay: 2.4s; }
.bs-engine-chip--4 { animation-delay: 3.6s; }
.bs-engine-chip--5 { animation-delay: 4.8s; }
.bs-engine-chip--6 { animation-delay: 6.0s; }

@keyframes bsQueryCycle {
  0%, 26%   { transform: translateY(0); }
  33%, 59%  { transform: translateY(-18px); }
  66%, 92%  { transform: translateY(-36px); }
  100%      { transform: translateY(-54px); }
}

@keyframes bsCaretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

@keyframes bsRankLift {
  0%, 26%, 35%, 59%, 68%, 92%, 100% { transform: translateY(0) scale(1); }
  30%, 63%, 96% { transform: translateY(-2.5px) scale(1.015); }
}

@keyframes bsChipWave {
  0%, 28%, 100% { transform: translateY(0) scale(1); border-color: rgba(8, 58, 24, 0.11); }
  12% { transform: translateY(-2.5px) scale(1.035); border-color: rgba(8, 58, 24, 0.34); }
}

/* --------------------------------------------------------------------------
   CARD 4: LANDINGPAGES & RECRUITING (Floating Lead & Applicant Cards)
   -------------------------------------------------------------------------- */
.bento-stage--leads {
  flex-direction: column;
  gap: 9px;
}

.bl-notif-card {
  width: 100%;
  max-width: 282px;
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.11);
  box-shadow: 0 10px 24px rgba(8, 58, 24, 0.07);
  border-radius: 14px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.bl-notif-card--lead {
  animation: blCardSwapA 6s ease-in-out infinite;
}

.bl-notif-card--applicant {
  animation: blCardSwapB 6s ease-in-out infinite;
}

.bl-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bl-icon-box--green { background: #ECF6EE; }
.bl-icon-box--orange { background: #FFF2EC; }

.bl-notif-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.bl-notif-text strong {
  font-size: 0.75rem;
  font-weight: 800;
  color: #083A18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bl-notif-text span {
  font-size: 0.66rem;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bl-badge {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

.bl-badge--orange {
  background: #FF5A1F;
  color: #FFFFFF;
}

.bl-badge--green {
  background: #ECF6EE;
  color: #15803D;
}

@keyframes blCardSwapA {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(2px) scale(0.975); opacity: 0.88; }
}

@keyframes blCardSwapB {
  0%, 100% { transform: translateY(0) scale(0.975); opacity: 0.88; }
  50% { transform: translateY(-2px) scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   CARD 5: WEBSITE-TEXTE (15 Min Voice Wave -> Highlighted Sales Copy)
   -------------------------------------------------------------------------- */
.bento-stage--content {
  flex-direction: column;
  gap: 10px;
}

.bc-voice-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bc-voice-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #083A18;
  color: #FFFFFF;
  padding: 5px 11px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(8, 58, 24, 0.16);
}

.bc-wave {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  height: 13px;
}

.bc-wave span {
  width: 2.4px;
  height: 12px;
  border-radius: 99px;
  background: #4ADE80;
  transform-origin: center;
  animation: bcWaveBar 1.3s ease-in-out infinite;
}

.bc-wave span:nth-child(2) { animation-delay: 0.18s; }
.bc-wave span:nth-child(3) { animation-delay: 0.35s; }
.bc-wave span:nth-child(4) { animation-delay: 0.52s; }
.bc-wave span:nth-child(5) { animation-delay: 0.7s; }

.bc-voice-label {
  font-size: 0.67rem;
  font-weight: 700;
  white-space: nowrap;
}

.bc-flow-arrow {
  font-size: 0.82rem;
  font-weight: 800;
  color: #FF5A1F;
}

.bc-zero-tag {
  font-size: 0.66rem;
  font-weight: 700;
  color: #083A18;
  background: #ECF6EE;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.bc-copy-sheet {
  width: 100%;
  max-width: 274px;
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.11);
  box-shadow: 0 10px 24px rgba(8, 58, 24, 0.07);
  border-radius: 14px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bc-highlight-wrap {
  position: relative;
  display: inline-block;
  padding: 1px 5px;
}

.bc-highlight-bg {
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: rgba(255, 90, 31, 0.15);
  transform-origin: left center;
  animation: bcMarkerSweep 5.6s ease-in-out infinite;
}

.bc-highlight-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  color: #083A18;
}

.bc-copy-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bc-line {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(8, 58, 24, 0.14);
}

.bc-line--1 { width: 92%; }
.bc-line--2 { width: 70%; }

@keyframes bcWaveBar {
  0%, 100% { transform: scaleY(0.38); }
  50% { transform: scaleY(1); }
}

@keyframes bcMarkerSweep {
  0%, 12% { transform: scaleX(0); }
  42%, 85% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}

/* --------------------------------------------------------------------------
   CARD 6: BRANDING (Fanning Color Swatches + Typography Specimen)
   -------------------------------------------------------------------------- */
.bb-brand-kit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.bb-swatch-fan {
  position: relative;
  width: 78px;
  height: 82px;
  flex-shrink: 0;
}

.bb-swatch {
  position: absolute;
  bottom: 4px;
  left: 14px;
  width: 50px;
  height: 66px;
  border-radius: 13px;
  border: 2px solid #FFFFFF;
  box-shadow: 0 10px 22px rgba(8, 58, 24, 0.14);
  transform-origin: bottom center;
}

.bb-swatch--mint {
  background: #CBEAD2;
  animation: bbFanLeft 5.8s ease-in-out infinite;
}

.bb-swatch--orange {
  background: #FF5A1F;
  animation: bbFanMid 5.8s ease-in-out infinite;
}

.bb-swatch--forest {
  background: #083A18;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 7px 8px;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  animation: bbFanRight 5.8s ease-in-out infinite;
}

.bb-typo-card {
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.11);
  box-shadow: 0 10px 24px rgba(8, 58, 24, 0.07);
  border-radius: 15px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bb-typo-top {
  display: flex;
  align-items: center;
  gap: 9px;
}

.bb-aa {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1;
  color: #083A18;
  letter-spacing: -0.03em;
}

.bb-grid-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: #083A18;
  background: #ECF6EE;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.bb-palette-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bb-pdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.bb-pdot--1 { background: #083A18; }
.bb-pdot--2 { background: #FF5A1F; }
.bb-pdot--3 { background: #4ADE80; }

.bb-palette-dots small {
  margin-left: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #4B5563;
  white-space: nowrap;
}

@keyframes bbFanLeft {
  0%, 100% { transform: rotate(-16deg) translateX(-6px); }
  50% { transform: rotate(-24deg) translateX(-10px); }
}

@keyframes bbFanMid {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(-5deg) translateY(-3px); }
}

@keyframes bbFanRight {
  0%, 100% { transform: rotate(10deg) translateX(6px); }
  50% { transform: rotate(16deg) translateX(10px); }
}

/* --------------------------------------------------------------------------
   CARD 7: ANIMATIONEN (3D Parallax Interactive Stack + Scroll & Glass Sheen)
   -------------------------------------------------------------------------- */
.bento-stage--motion {
  justify-content: center;
}

.bm-scene {
  position: relative;
  width: 100%;
  max-width: 298px;
  height: 154px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-aha-pill {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 800;
  color: #FF5A1F;
  background: #FFF3EE;
  border: 1px solid rgba(255, 90, 31, 0.24);
  box-shadow: 0 8px 18px rgba(255, 90, 31, 0.12);
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  animation: bmAhaBounce 5.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.bm-stack-3d {
  position: relative;
  width: 256px;
  height: 118px;
  margin-top: 14px;
  perspective: 720px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bm-layer {
  position: absolute;
  border-radius: 15px;
  backface-visibility: hidden;
}

/* Back-Left Visual Depth Layer */
.bm-layer--left {
  width: 96px;
  height: 86px;
  left: -4px;
  top: 16px;
  z-index: 1;
  background: linear-gradient(155deg, #ECF6EE 0%, #D3EED9 100%);
  border: 1.5px solid rgba(8, 58, 24, 0.14);
  box-shadow: 0 10px 22px rgba(8, 58, 24, 0.08);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: bmLayerLeft 5.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.bm-mini-orb {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #083A18 0%, #15803D 100%);
}

.bm-mini-bar {
  display: block;
  height: 5px;
  border-radius: 99px;
  background: rgba(8, 58, 24, 0.22);
}

.bm-mini-bar--1 { width: 85%; }
.bm-mini-bar--2 { width: 58%; }

/* Back-Right Rising Engagement Layer */
.bm-layer--right {
  width: 96px;
  height: 86px;
  right: -4px;
  top: 16px;
  z-index: 1;
  background: #FFFFFF;
  border: 1.5px solid rgba(8, 58, 24, 0.13);
  box-shadow: 0 10px 22px rgba(8, 58, 24, 0.08);
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  animation: bmLayerRight 5.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.bm-stat-num {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: #15803D;
  background: #F0FDF4;
  padding: 1px 5px;
  border-radius: 99px;
}

.bm-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 36px;
}

.bm-cbar {
  width: 9px;
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom center;
  animation: bmBarsGrow 5.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.bm-cbar--1 { height: 18px; background: #86EFAC; }
.bm-cbar--2 { height: 26px; background: #083A18; animation-delay: 0.1s; }
.bm-cbar--3 { height: 34px; background: #FF5A1F; animation-delay: 0.2s; }

/* Center Front Glass Hero Card */
.bm-layer--center {
  position: relative;
  z-index: 3;
  width: 166px;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid rgba(8, 58, 24, 0.16);
  box-shadow: 0 18px 38px rgba(8, 58, 24, 0.14);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  animation: bmLayerCenter 5.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}

.bm-glass-sheen {
  position: absolute;
  inset: -30% -70%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 90, 31, 0.12) 48%, rgba(255, 255, 255, 0.75) 52%, transparent 60%);
  pointer-events: none;
  animation: bmSheenSweep 5.6s ease-in-out infinite;
}

.bm-center-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bm-kinetic-ring {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #083A18;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bm-kinetic-ring span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2.2px solid #4ADE80;
  border-top-color: #FF5A1F;
  animation: bmRingSpin 2.8s linear infinite;
}

.bm-center-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bm-center-titles strong {
  font-size: 0.72rem;
  font-weight: 800;
  color: #083A18;
  white-space: nowrap;
}

.bm-center-titles span {
  font-size: 0.61rem;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
}

.bm-progress-rail {
  width: 100%;
  height: 5px;
  border-radius: 99px;
  background: #ECF6EE;
  overflow: hidden;
}

.bm-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #083A18 0%, #FF5A1F 100%);
  transform-origin: left center;
  animation: bmProgressSweep 5.6s ease-in-out infinite;
}

.bm-center-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.bm-live-btn {
  font-size: 0.62rem;
  font-weight: 800;
  color: #FFFFFF;
  background: #083A18;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Synchronized Vertical Scroll Thumb on Right */
.bm-scroll-guide {
  position: absolute;
  right: 2px;
  top: 34px;
  width: 5px;
  height: 92px;
  border-radius: 99px;
  background: rgba(8, 58, 24, 0.09);
  padding: 2px 0;
}

.bm-scroll-thumb {
  display: block;
  width: 5px;
  height: 26px;
  border-radius: 99px;
  background: #FF5A1F;
  box-shadow: 0 2px 8px rgba(255, 90, 31, 0.35);
  animation: bmScrollThumb 5.6s ease-in-out infinite;
}

@keyframes bmLayerCenter {
  0%, 14%, 90%, 100% { transform: translate3d(0, 2px, 0) rotateX(0deg) scale(0.98); }
  42%, 70% { transform: translate3d(0, -4px, 22px) rotateX(4deg) scale(1.03); }
}

@keyframes bmLayerLeft {
  0%, 14%, 90%, 100% { transform: translate3d(18px, 4px, -12px) rotateZ(0deg) scale(0.92); opacity: 0.72; }
  42%, 70% { transform: translate3d(-14px, -2px, -4px) rotateY(14deg) rotateZ(-7deg) scale(1); opacity: 1; }
}

@keyframes bmLayerRight {
  0%, 14%, 90%, 100% { transform: translate3d(-18px, 4px, -12px) rotateZ(0deg) scale(0.92); opacity: 0.72; }
  42%, 70% { transform: translate3d(14px, -2px, -4px) rotateY(-14deg) rotateZ(7deg) scale(1); opacity: 1; }
}

@keyframes bmBarsGrow {
  0%, 18%, 92%, 100% { transform: scaleY(0.38); }
  45%, 72% { transform: scaleY(1); }
}

@keyframes bmSheenSweep {
  0%, 24% { transform: translateX(-75%); }
  58%, 100% { transform: translateX(75%); }
}

@keyframes bmRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes bmProgressSweep {
  0%, 14% { transform: scaleX(0.22); }
  48%, 74% { transform: scaleX(1); }
  92%, 100% { transform: scaleX(0.22); }
}

@keyframes bmScrollThumb {
  0%, 14%, 92%, 100% { transform: translateY(0); }
  46%, 72% { transform: translateY(62px); }
}

@keyframes bmAhaBounce {
  0%, 20%, 88%, 100% { transform: translateX(-50%) translateY(2px) scale(0.95); opacity: 0.82; }
  44%, 72% { transform: translateX(-50%) translateY(-2px) scale(1.03); opacity: 1; }
}

/* Reduced-Motion Accessibility: keep crisp visuals static and comfortable */
@media (prefers-reduced-motion: reduce) {
  .bw-design-toolbar,
  .bw-hero-card,
  .bw-cta-pill,
  .bw-click-ripple,
  .bw-snap-corner,
  .bw-art-sheen,
  .bw-mobile-preview,
  .bw-float-badge--rating,
  .bw-live-cursor,
  .bp-seal-halo,
  .bp-live-dot,
  .bp-bars-row span,
  .bs-query-track,
  .bs-caret,
  .bs-rank-card,
  .bs-engine-chip,
  .bl-notif-card--lead,
  .bl-notif-card--applicant,
  .bc-wave span,
  .bc-highlight-bg,
  .bb-swatch--mint,
  .bb-swatch--orange,
  .bb-swatch--forest,
  .bm-aha-pill,
  .bm-layer--left,
  .bm-layer--right,
  .bm-layer--center,
  .bm-glass-sheen,
  .bm-kinetic-ring span,
  .bm-progress-fill,
  .bm-cbar,
  .bm-scroll-thumb {
    animation: none;
  }
}

@media (max-width: 1024px) {
  .bento-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bento-service-card--wide {
    grid-column: span 2;
  }
}

@media (max-width: 720px) {
  .bento-services-grid {
    grid-template-columns: 1fr;
  }
  .bento-service-card,
  .bento-service-card--wide {
    grid-column: span 1;
    flex-direction: column;
    height: auto;
    min-height: 342px;
  }
  .bento-service-card--wide .bento-card-copy {
    flex: none;
    max-width: 100%;
    padding: 1.65rem 1.5rem 0.75rem;
  }
  .bento-card-visual--wide {
    width: 100%;
    min-height: 232px;
    padding: 0.45rem 1.05rem 1.35rem;
  }
  .bento-card-visual--single {
    height: 196px;
    padding: 0.35rem 1.05rem 1.25rem;
  }
}

/* Case Study Detail Dialog Modal */
.case-study-dialog {
  margin: auto;
  width: min(860px, 94vw);
  max-height: 88vh;
  border-radius: 32px;
  background: #FFFFFF;
  color: #111111;
  border: 1px solid rgba(8, 58, 24, 0.14);
  padding: 0;
  box-shadow: 0 32px 90px rgba(8, 58, 24, 0.28);
  overflow: hidden;
}

.case-study-dialog::backdrop {
  background: rgba(8, 58, 24, 0.62);
  backdrop-filter: blur(8px);
}

.case-modal-inner {
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

/* ==========================================================================
   6. SECTION 3 — COMPACT ROUNDED STATEMENT & 4 EQUAL-LENGTH METRICS
   ========================================================================== */
.statement-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
}

.statement-compact-card {
  background: #083A18;
  color: #FFFFFF;
  border-radius: 36px;
  padding: clamp(2.25rem, 4.5vw, 3.75rem);
  box-shadow: 0 20px 50px rgba(8, 58, 24, 0.12);
}

.statement-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.statement-top-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.statement-top-cta-col {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.statement-intro {
  font-size: clamp(0.86rem, 1.02vw, 0.98rem);
  line-height: 1.55;
  color: #C6E9CE;
  max-width: none;
  margin-bottom: 1.15rem;
  font-weight: 600;
  text-wrap: pretty;
}

.scroll-reveal-paragraph {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.92vw, 1.74rem);
  line-height: 1.34;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 41ch;
  margin-bottom: 0;
  text-wrap: pretty;
}

/* Glowing Capsule CTA Button with Real Lion Silhouette Orb & Right-Slide Hover */
.lion-slide-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 282px;
  height: 76px;
  border-radius: 999px;
  background: linear-gradient(135deg, #052610 0%, #093E1B 100%);
  border: 2px solid #8BF3AC;
  box-shadow: 0 0 22px rgba(114, 238, 154, 0.46),
              inset 0 0 18px rgba(114, 238, 154, 0.22);
  text-decoration: none;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
  transition: background 0.38s ease,
              border-color 0.38s ease,
              box-shadow 0.38s ease,
              transform 0.32s var(--spring-gpu);
}

.lion-slide-cta:hover,
.lion-slide-cta:focus-visible {
  background: linear-gradient(135deg, #3A1204 0%, #7C2408 100%);
  border-color: #FF8C61;
  box-shadow: 0 0 28px rgba(255, 90, 31, 0.65),
              inset 0 0 20px rgba(255, 90, 31, 0.32);
  transform: translateY(-2px);
}

.lion-slide-orb {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 88%, #B8F8CC 0%, #2EC468 42%, #083A18 85%);
  border: 2px solid #DCFCFA;
  box-shadow: 0 0 16px rgba(139, 243, 172, 0.65),
              inset 0 -4px 10px rgba(217, 251, 227, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transform: translateX(0);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.38s ease,
              border-color 0.38s ease,
              box-shadow 0.38s ease;
}

.lion-slide-cta:hover .lion-slide-orb,
.lion-slide-cta:focus-visible .lion-slide-orb {
  transform: translateX(204px);
  background: radial-gradient(circle at 50% 88%, #FFE2D4 0%, #FF6B35 45%, #8F2504 88%);
  border-color: #FFF0E8;
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.78),
              inset 0 -4px 10px rgba(255, 226, 212, 0.6);
}

.lion-slide-orb-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) brightness(1.12);
  transition: filter 0.38s ease, transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

.lion-slide-cta:hover .lion-slide-orb-img,
.lion-slide-cta:focus-visible .lion-slide-orb-img {
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5)) brightness(1.38) sepia(0.35) hue-rotate(-38deg);
  transform: scale(1.06);
}

.lion-slide-text {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.lion-slide-text--default {
  left: 78px;
  right: 16px;
  justify-content: center;
  color: #D4FBE0;
  text-shadow: 0 0 12px rgba(139, 243, 172, 0.35);
  opacity: 1;
  transform: translateX(0);
}

.lion-slide-cta:hover .lion-slide-text--default,
.lion-slide-cta:focus-visible .lion-slide-text--default {
  opacity: 0;
  transform: translateX(-18px);
}

.lion-slide-text--hover {
  left: 18px;
  right: 78px;
  justify-content: center;
  color: #FFF0E8;
  text-shadow: 0 0 12px rgba(255, 140, 97, 0.45);
  opacity: 0;
  transform: translateX(18px);
}

.lion-slide-cta:hover .lion-slide-text--hover,
.lion-slide-cta:focus-visible .lion-slide-text--hover {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 980px) {
  .statement-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.65rem;
  }
}

.scroll-reveal-word {
  color: rgba(198, 233, 206, 0.28);
  transition: color 0.35s ease;
}

.scroll-reveal-word.is-lit {
  color: #FFFFFF;
}

/* 4 Equal-Length Executive Metrics Grid */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(198, 233, 206, 0.2);
  align-items: start;
}

.metric-cell {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.metric-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.1vw, 2.75rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #C6E9CE;
}

.metric-label {
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.3;
}

.metric-sub {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(243, 250, 244, 0.82);
  max-width: 32ch;
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   7. SECTION 4 — CENTERED SOLUTION OFFER + "LIQUID INDEX" IDENTIFICATION
   ========================================================================== */
.bausteine-section {
  padding-block: var(--section-pad-y);
  background: linear-gradient(180deg, #F3FAF4 0%, #FFFFFF 100%);
  border-top: 1px solid #E5ECE7;
}

.bausteine-offer-center {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 5vw, 4.25rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.liquid-index-stage {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 960px;
  margin-inline: auto;
  padding: 1.5rem 2rem;
  border-radius: 36px;
  background: #FFFFFF;
  border: 1px solid #E5ECE7;
  box-shadow: 0 20px 50px rgba(8, 58, 24, 0.05);
}

.liquid-preview-col {
  position: relative;
  width: 215px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.liquid-preview-card {
  position: relative;
  width: 215px;
  height: 255px;
  border-radius: 28px;
  overflow: hidden;
  background: #083A18;
  box-shadow: 0 24px 48px rgba(8, 58, 24, 0.18);
  transform: translateY(0);
  transition: transform 0.38s var(--spring-gpu), opacity 0.25s ease;
}

.liquid-preview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.liquid-preview-gradient {
  position: absolute;
  inset: 0;
  mix-blend-mode: soft-light;
  background: radial-gradient(circle at 30% 30%, #FF5A1F, #083A18 75%);
  transition: background 0.35s ease;
}

.liquid-preview-icon {
  position: absolute;
  inset-inline: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.liquid-preview-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(8, 58, 24, 0.88);
  color: #FFFFFF;
  backdrop-filter: blur(8px);
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 233, 206, 0.35);
}

.liquid-list-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

.liquid-rows-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.liquid-row-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 0.35rem;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.32s var(--spring-gpu);
}

.liquid-row-btn.is-active {
  padding-left: 8px;
}

.liquid-row-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  color: rgba(17, 24, 39, 0.24);
  transition: color 0.2s ease;
}

.liquid-row-btn.is-active .liquid-row-title {
  color: #083A18;
}

.liquid-row-btn.is-active .liquid-row-num {
  color: #FF5A1F;
}

.liquid-row-num {
  font-size: 0.95rem;
  font-weight: 800;
  margin-right: 0.65rem;
  color: rgba(17, 24, 39, 0.28);
  vertical-align: middle;
  transition: color 0.2s ease;
}

.liquid-row-mobile-desc {
  display: none;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #374151;
  margin-top: 0.35rem;
}

.liquid-desktop-desc-box {
  min-height: 68px;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(8, 58, 24, 0.1);
}

.liquid-desktop-desc {
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.5;
  color: #1F2937;
}

/* ==========================================================================
   8. SECTION 5 — "VERTICAL TABS" AUTO-PLAYING SOLUTIONS SHOWCASE (#F3FAF4)
   ========================================================================== */
.solutions-section {
  padding-block: var(--section-pad-y);
  background-color: #F3FAF4;
  border-block: 1px solid #DCECE0;
}

.vtabs-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}

.vtabs-left {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
}

.vtabs-list {
  display: flex;
  flex-direction: column;
  padding-left: 1.25rem;
}

.vtab-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(17, 24, 39, 0.1);
  text-align: left;
  cursor: pointer;
  color: rgba(17, 24, 39, 0.45);
  transition: color 0.2s ease;
}

.vtab-item:first-child {
  border-top: 0;
}

.vtab-item:hover,
.vtab-item.is-active {
  color: #111111;
}

.vtab-progress-track {
  position: absolute;
  left: -1.25rem;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(8, 58, 24, 0.1);
  border-radius: 999px;
  overflow: hidden;
}

.vtab-progress-fill {
  width: 100%;
  height: 0%;
  background: #FF5A1F;
  transform-origin: top;
}

.vtab-item.is-active .vtab-progress-fill {
  animation: vtabProgressFill 5s linear forwards;
}

.vtabs-stage-paused .vtab-item.is-active .vtab-progress-fill {
  animation-play-state: paused;
}

@keyframes vtabProgressFill {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

.vtab-num {
  font-size: 0.76rem;
  font-weight: 800;
  margin-top: 0.35rem;
  color: #FF5A1F;
  font-variant-numeric: tabular-nums;
}

.vtab-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vtab-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.48vw, 1.42rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.vtab-desc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s var(--spring-gpu);
}

.vtab-item.is-active .vtab-desc-wrap {
  grid-template-rows: 1fr;
}

.vtab-desc-inner {
  overflow: hidden;
}

.vtab-desc {
  padding-top: 0.65rem;
  font-size: 0.94rem;
  line-height: 1.58;
  color: #4B5563;
}

.vtabs-right {
  grid-column: span 7;
}

.vtab-gallery-frame {
  position: relative;
  aspect-ratio: 4 / 3.85;
  border-radius: 36px;
  overflow: hidden;
  background: #E8EFEA;
  border: 1px solid rgba(8, 58, 24, 0.1);
  box-shadow: 0 24px 54px rgba(8, 58, 24, 0.1);
}

.vtab-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.38s var(--spring-gpu), transform 0.38s var(--spring-gpu);
}

.vtab-slide.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.vtab-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vtab-slide-overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 2rem 1.5rem 8.5rem;
  background: linear-gradient(to top, rgba(8, 58, 24, 0.88) 10%, rgba(8, 58, 24, 0.42) 60%, transparent 100%);
  color: #FFFFFF;
  text-align: right;
}

.vtab-slide-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.vtab-slide-pill {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
  color: #083A18;
  padding: 0.24rem 0.72rem;
  border-radius: 999px;
}

.vtab-nav-btns {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 20;
  display: flex;
  gap: 0.55rem;
}

.vtab-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(8, 58, 24, 0.14);
  color: #083A18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.vtab-nav-btn:hover {
  background: #FF5A1F;
  color: #FFFFFF;
  transform: scale(1.06);
}

/* ==========================================================================
   9. SECTION 6 — "FEATURE CAROUSEL" TARGET NICHES & SCENARIOS (#FFFFFF)
   ========================================================================== */
.branchen-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
}

.fcarousel-shell {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 540px;
  border-radius: 48px;
  overflow: hidden;
  border: 1px solid rgba(8, 58, 24, 0.12);
  box-shadow: 0 22px 54px rgba(8, 58, 24, 0.08);
}

.fcarousel-left {
  position: relative;
  z-index: 30;
  width: 42%;
  background: #083A18;
  padding-inline: clamp(1.75rem, 3.5vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

.fcarousel-fade-top {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  height: 70px;
  background: linear-gradient(to bottom, #083A18 15%, transparent 100%);
}

.fcarousel-fade-bottom {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  height: 70px;
  background: linear-gradient(to top, #083A18 15%, transparent 100%);
}

.fcarousel-wheel-stage {
  position: relative;
  z-index: 20;
  width: 100%;
  height: 320px;
  display: flex;
  align-items: center;
}

.fcarousel-chip-wrap {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -31px;
  height: 62px;
  display: flex;
  align-items: center;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.fcarousel-chip-wrap[data-wheel-offset="0"] {
  transform: translateY(0px) scale(1);
  opacity: 1;
  z-index: 30;
}

.fcarousel-chip-wrap[data-wheel-offset="1"] {
  transform: translateY(74px) scale(0.92);
  opacity: 0.82;
  z-index: 25;
}

.fcarousel-chip-wrap[data-wheel-offset="-1"] {
  transform: translateY(-74px) scale(0.92);
  opacity: 0.82;
  z-index: 25;
}

.fcarousel-chip-wrap[data-wheel-offset="2"] {
  transform: translateY(148px) scale(0.84);
  opacity: 0.5;
  z-index: 20;
}

.fcarousel-chip-wrap[data-wheel-offset="-2"] {
  transform: translateY(-148px) scale(0.84);
  opacity: 0.5;
  z-index: 20;
}

.fcarousel-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(198, 233, 206, 0.34);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fcarousel-chip-btn:hover {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.fcarousel-chip-btn.is-active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #083A18;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.fcarousel-chip-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: currentColor;
}

.fcarousel-chip-btn.is-active .fcarousel-chip-icon {
  color: #FF5A1F;
}

.fcarousel-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.fcarousel-chip-btn.is-active .fcarousel-chip-dot {
  background: #FF5A1F;
}

.fcarousel-right {
  position: relative;
  flex: 1;
  background: #F4F8F5;
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.fcarousel-cards-stack {
  position: relative;
  width: 100%;
  max-width: 410px;
  aspect-ratio: 4 / 4.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcarousel-card {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  border: 6px solid #FFFFFF;
  background: #083A18;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(8, 58, 24, 0.16);
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.35s ease;
}

.fcarousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fcarousel-card[data-status="active"] {
  transform: translateX(0) scale(1) rotate(0deg);
  opacity: 1;
  z-index: 20;
  filter: grayscale(0) blur(0px);
}

.fcarousel-card[data-status="prev"] {
  transform: translateX(-95px) scale(0.85) rotate(-3deg);
  opacity: 0.42;
  z-index: 10;
  filter: grayscale(85%) blur(2px) brightness(0.8);
  pointer-events: none;
}

.fcarousel-card[data-status="next"] {
  transform: translateX(95px) scale(0.85) rotate(3deg);
  opacity: 0.42;
  z-index: 10;
  filter: grayscale(85%) blur(2px) brightness(0.8);
  pointer-events: none;
}

.fcarousel-card[data-status="hidden"] {
  transform: translateX(0) scale(0.7);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.fcarousel-card-caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 4rem 1.75rem 1.75rem;
  background: linear-gradient(to top, rgba(8, 58, 24, 0.96) 25%, rgba(8, 58, 24, 0.55) 70%, transparent 100%);
  color: #FFFFFF;
  transition: opacity 0.28s ease;
}

.fcarousel-card:not([data-status="active"]) .fcarousel-card-caption {
  opacity: 0;
  pointer-events: none;
}

.fcarousel-card-pill {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: #FFFFFF;
  color: #083A18;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fcarousel-card-desc {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 700;
  line-height: 1.32;
  color: #FFFFFF;
}

/* ==========================================================================
   10. SECTION 2 — PINNED KINETIC LETTER SCRUB & POP-IN PILLS (two26.studio Style)
       + INLINE HOVER-FOCUS & CURSOR TOOLTIP (#stimmen)
   ========================================================================== */
.testimonials-pin-runway {
  position: relative;
  width: 100%;
  height: calc(min(100lvh, 880px) + 1100px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAF8 50%, #FFFFFF 100%);
  border-top: 1px solid #E5ECE7;
  border-bottom: 1px solid #E5ECE7;
}

.testimonials-pinned-stage {
  position: sticky;
  top: 0;
  width: 100%;
  min-height: min(100lvh, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4.5rem;
  padding-bottom: 2rem;
  will-change: transform;
  backface-visibility: hidden;
}

.stimmen-header-wrap {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
  margin-bottom: clamp(1.35rem, 2.5vw, 2.1rem);
}

.stimmen-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(8, 58, 24, 0.14);
  background: #FFFFFF;
  padding: 0.36rem 0.95rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #083A18;
  margin-bottom: 0.75rem;
  box-shadow: 0 2px 8px rgba(8, 58, 24, 0.04);
}

.stimmen-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #FF5A1F;
}

.focus-testimonials-card {
  position: relative;
  border-radius: 32px;
  border: 1.5px solid rgba(8, 58, 24, 0.12);
  background: #FFFFFF;
  padding: clamp(1.75rem, 3.6vw, 3.15rem);
  box-shadow: 0 18px 48px rgba(8, 58, 24, 0.06);
}

.focus-quotes-flow {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 2.05vw, 1.82rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.022em;
  color: #111111;
}

.stimmen-word {
  display: inline-block;
  white-space: nowrap;
}

.stimmen-char {
  display: inline-block;
  color: rgba(255, 90, 31, 0.38);
  transform-origin: center center;
  will-change: transform, color;
  backface-visibility: hidden;
}

.stimmen-char--punct {
  margin-left: -0.06em;
}

.focus-quote-item {
  display: inline;
}

.focus-quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 0.45rem;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #F3FAF4;
  border: 1.5px solid #C6E9CE;
  padding: 4px;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out-expo), border-color 0.35s ease, background-color 0.35s ease;
}

.focus-quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.focus-quote-avatar.is-active-wave {
  transform: scale(1.14);
  border-color: #FF5A1F;
  background: #FFFFFF;
}

/* two26.studio Pop-In Floating Pills at Scroll Milestones (35%, 72%, 96%) */
.stimmen-pop-pill {
  position: absolute;
  z-index: 25;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(8, 58, 24, 0.18);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.stimmen-pop-pill--first {
  top: -18px;
  right: 5%;
  background: #FF5A1F;
  color: #FFFFFF;
  --pill-rot: -4deg;
  transform: translate3d(0, 24px, 0) scale(0.6) rotate(-4deg);
}

.stimmen-pop-pill--second {
  top: -18px;
  left: 5%;
  background: #083A18;
  color: #C6E9CE;
  border: 1.5px solid #C6E9CE;
  --pill-rot: 3.8deg;
  transform: translate3d(0, 24px, 0) scale(0.6) rotate(3.8deg);
}

.stimmen-pop-pill--third {
  bottom: -18px;
  right: 12%;
  background: #C6E9CE;
  color: #083A18;
  border: 1.5px solid #083A18;
  --pill-rot: -3.5deg;
  transform: translate3d(0, 24px, 0) scale(0.6) rotate(-3.5deg);
}

.stimmen-card-footer {
  margin-top: 1.6rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(17, 24, 39, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.stimmen-more-btn {
  font-size: 0.86rem;
  font-weight: 800;
  color: #083A18;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.stimmen-scroll-progress-wrap {
  flex: 1;
  max-width: 180px;
  margin-inline: 0;
}

.stimmen-scroll-progress-track {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #E5ECE7;
  overflow: hidden;
}

.stimmen-scroll-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF5A1F 0%, #083A18 100%);
}

.stimmen-cases-link {
  font-size: 0.86rem;
  font-weight: 700;
  color: #4B5563;
  transition: color 0.2s ease;
}

.stimmen-cases-link:hover {
  color: #FF5A1F;
}

@media (max-width: 820px) {
  .testimonials-pin-runway {
    height: calc(min(100lvh, 840px) + 820px);
  }

  .focus-quotes-flow {
    font-size: clamp(1.06rem, 4.1vw, 1.32rem);
    line-height: 1.48;
  }

  .stimmen-pop-pill {
    font-size: 0.7rem;
    padding: 0.36rem 0.82rem;
  }

  .stimmen-pop-pill--first {
    top: -14px;
    right: 3%;
  }

  .stimmen-pop-pill--second {
    top: -14px;
    left: 3%;
  }

  .stimmen-pop-pill--third {
    bottom: -14px;
    right: 6%;
  }

  .stimmen-scroll-progress-wrap {
    display: none;
  }
}

.focus-author-tooltip {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1rem 0.45rem 0.5rem;
  border-radius: 999px;
  background: rgba(8, 58, 24, 0.95);
  border: 1px solid rgba(198, 233, 206, 0.35);
  color: #FFFFFF;
  box-shadow: 0 20px 40px rgba(8, 58, 24, 0.28);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.88);
  transition: opacity 0.2s ease;
}

.focus-author-tooltip.is-visible {
  opacity: 1;
}

.focus-tooltip-logo {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  padding: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.focus-tooltip-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ==========================================================================
   11. SECTION 8 — "STACKED LIST" WHATSAPP & PROJEKT-TEAM + 5 ZUSAGEN
   ========================================================================== */
.expect-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
}

.whatsapp-split-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.promises-bento-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.promise-mini-card {
  background: #F7FAF8;
  border: 1px solid #E5ECE7;
  border-radius: 22px;
  padding: 1.25rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.promise-mini-card:hover {
  border-color: #C6E9CE;
  transform: translateY(-2px);
}

.promise-mini-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF5A1F;
  display: block;
  margin-bottom: 0.3rem;
}

.promise-mini-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.3rem;
}

.promise-mini-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #4B5563;
}





























































/* ==========================================================================
   12. SECTION 9 — EXECUTIVE FAQ (#F7FAF8 Subtle Alabaster)
   ========================================================================== */
.faq-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
  border-top: 1px solid #E5ECE7;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.faq-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #111111;
  margin-bottom: 1rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(17, 24, 39, 0.12);
}

.faq-item {
  border-bottom: 1px solid rgba(17, 24, 39, 0.12);
}

.faq-item summary {
  list-style: none;
  padding-block: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(17, 24, 39, 0.15);
  color: #083A18;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.faq-item[open] .faq-plus {
  transform: rotate(45deg);
  background: #FF5A1F;
  border-color: #FF5A1F;
  color: #FFFFFF;
}

.faq-answer {
  padding-bottom: 1.4rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #374151;
  max-width: 65ch;
}

/* ==========================================================================
   13. SECTION 10 — PERSONAL CONSULTATION CARD (#FFFFFF Stage + #083A18 Card)
   ========================================================================== */
.consultation-section {
  padding-block: var(--section-pad-y);
  background-color: #FFFFFF;
}

.gradient-border-card {
  border-radius: 32px;
  padding: 2px;
  background: linear-gradient(125deg, #C6E9CE 0%, #FF5A1F 50%, #083A18 100%);
  box-shadow: 0 24px 60px rgba(8, 58, 24, 0.14);
}

.consultation-card-inner {
  border-radius: 30px;
  background: #083A18;
  color: #FFFFFF;
  padding: clamp(1.75rem, 4vw, 3.75rem);
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
}

.consultation-visual-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.consultation-portrait-frame {
  border-radius: 22px;
  overflow: hidden;
  border: 2px solid #C6E9CE;
  aspect-ratio: 4 / 4.3;
  position: relative;
}

.consultation-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.consultation-host-badge {
  position: absolute;
  bottom: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(8, 58, 24, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(198, 233, 206, 0.35);
}

.consultation-host-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #FFFFFF;
}

.consultation-host-role {
  font-size: 0.76rem;
  color: #C6E9CE;
}

.consultation-form-col {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  min-width: 0;
}

.consultation-headline {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}

.consultation-sub {
  font-size: 0.98rem;
  color: rgba(243, 250, 244, 0.86);
  max-width: 56ch;
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 0.25rem;
}

.topic-pills-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.topic-pill-label {
  cursor: pointer;
}

.topic-pill-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.topic-pill-box {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(198, 233, 206, 0.3);
  color: #ECF6EE;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.topic-pill-label input:checked + .topic-pill-box {
  background: #FF5A1F;
  color: #FFFFFF;
  border-color: #FF5A1F;
  font-weight: 600;
}

.form-row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.form-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #C6E9CE;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1.05rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(198, 233, 206, 0.28);
  color: #FFFFFF;
  font-size: 0.92rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(243, 250, 244, 0.45);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #FF5A1F;
  background: rgba(255, 255, 255, 0.14);
}

.form-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.35rem;
}

.form-privacy-note {
  font-size: 0.78rem;
  color: #C6E9CE;
}

.form-feedback {
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: rgba(198, 233, 206, 0.16);
  border: 1px solid #C6E9CE;
  font-size: 0.9rem;
  color: #FFFFFF;
}

/* ==========================================================================
   14. MONUMENTAL LION-LEDGE FOOTER & INTEGRATED CTA (#083A18)
   ========================================================================== */
.site-footer {
  position: relative;
  margin-top: clamp(8.5rem, 14vw, 13.5rem);
  padding-top: clamp(4.2rem, 6.5vw, 6rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
  background-color: #083A18;
  color: #FFFFFF;
  overflow-x: clip;
  overflow-y: visible;
}

/* Majestic Hero Lion peeking with his front paws over the top edge of the footer */
.footer-lion-ledge-wrap {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  z-index: 30;
  width: min(74vw, 350px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
}

.footer-lion-ledge-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateY(22.37%);
  filter: drop-shadow(0 16px 32px rgba(4, 28, 11, 0.28));
}

.footer-inner-shell {
  position: relative;
  z-index: 20;
}

/* Centered Final CTA Stage inside Footer (two26.studio / gracefashion.ai Style) */
.footer-hero-cta-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 1020px;
  margin-inline: auto;
  padding-bottom: clamp(3.2rem, 5vw, 4.5rem);
  margin-bottom: clamp(3rem, 4.5vw, 4rem);
  border-bottom: 1px solid rgba(198, 233, 206, 0.18);
}

.footer-free-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 999px;
  background: rgba(198, 233, 206, 0.14);
  border: 1px solid rgba(198, 233, 206, 0.34);
  padding: 0.42rem 1.05rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C6E9CE;
  margin-bottom: 1.25rem;
}

.footer-free-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 10px #4ADE80;
}

.footer-hero-headline {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.6vw, 3.15rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #FFFFFF;
  margin: 0 0 1.1rem;
}

.footer-hero-headline-accent {
  color: #FF5A1F;
  white-space: nowrap;
}

.footer-hero-sub {
  font-size: clamp(0.98rem, 1.35vw, 1.14rem);
  line-height: 1.55;
  color: rgba(243, 250, 244, 0.86) !important;
  max-width: 56ch;
  margin: 0 0 1.85rem;
}

.footer-hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.footer-main-cta-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #FF5A1F;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  font-weight: 800;
  padding: 0.55rem 0.6rem 0.55rem 1.65rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(255, 90, 31, 0.32);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, box-shadow 0.28s ease;
}

.footer-main-cta-pill:hover {
  background: #E04812;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 22px 48px rgba(255, 90, 31, 0.44);
}

.footer-main-cta-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #FF5A1F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.28s ease;
}

.footer-main-cta-arrow svg {
  width: 18px;
  height: 18px;
}

.footer-main-cta-pill:hover .footer-main-cta-arrow {
  transform: translateX(3px) rotate(-12deg);
}

.footer-trust-pills-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.35rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #C6E9CE;
}

.footer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.15fr 0.9fr;
  gap: 2.5rem;
  margin-bottom: 2.75rem;
}

.footer-brand-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  margin-bottom: 0.95rem;
}

.footer-brand-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 3px;
  flex-shrink: 0;
}

.footer-brand-logo-text {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.footer-logo-web {
  color: #C6E9CE;
}

.footer-logo-site {
  color: #FFFFFF;
}

.footer-logo-loewe {
  color: #FF5A1F;
}

.footer-brand-summary {
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 36ch;
  color: rgba(243, 250, 244, 0.8) !important;
  margin: 0;
}

.site-footer p {
  color: rgba(243, 250, 244, 0.82) !important;
}

.footer-col-title {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C6E9CE;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: rgba(243, 250, 244, 0.84);
}

.footer-links a:hover,
.footer-links button:hover {
  color: #FF5A1F;
}

/* Monumental Full-Width Agency Wordmark at Footer Base (two26.studio / gracefashion.ai Style) */
.footer-giant-wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.35rem, 11.8vw, 10.8rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-align: center;
  color: rgba(198, 233, 206, 0.13);
  padding-block: clamp(1rem, 2vw, 1.75rem);
  border-top: 1px solid rgba(198, 233, 206, 0.14);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
}

.footer-giant-wordmark-mid {
  color: rgba(255, 255, 255, 0.16);
}

.footer-giant-wordmark-accent {
  color: rgba(255, 90, 31, 0.28);
}

.footer-bottom-bar {
  padding-top: 1.5rem;
  border-top: 1px solid rgba(198, 233, 206, 0.16);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: rgba(243, 250, 244, 0.7);
}

.legal-dialog {
  margin: auto;
  width: min(680px, 92vw);
  max-height: 84vh;
  border-radius: 24px;
  background: #FFFFFF;
  color: #111111;
  border: 2px solid #C6E9CE;
  padding: 2.25rem;
  box-shadow: 0 30px 90px rgba(8, 58, 24, 0.35);
}

.legal-dialog::backdrop {
  background: rgba(8, 58, 24, 0.68);
  backdrop-filter: blur(8px);
}

.legal-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(8, 58, 24, 0.14);
}

.legal-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.92rem;
  color: #374151;
  overflow-y: auto;
}

/* ==========================================================================
   15. RESPONSIVE & MOBILE PERFECTION
   ========================================================================== */
@media (max-width: 1120px) {
  .vtabs-left,
  .vtabs-right {
    grid-column: 1 / -1;
  }

  .fcarousel-shell {
    flex-direction: column;
    border-radius: 36px;
    min-height: auto;
  }

  .fcarousel-left {
    width: 100%;
    height: 220px;
    justify-content: center;
  }

  .fcarousel-wheel-stage {
    height: 220px;
    justify-content: center;
  }

  .fcarousel-chip-wrap {
    left: 50%;
  }

  .fcarousel-chip-wrap[data-wheel-offset="0"] {
    transform: translateX(-50%) translateY(0px) scale(1);
  }

  .fcarousel-chip-wrap[data-wheel-offset="1"] {
    transform: translateX(-50%) translateY(58px) scale(0.9);
  }

  .fcarousel-chip-wrap[data-wheel-offset="-1"] {
    transform: translateX(-50%) translateY(-58px) scale(0.9);
  }

  .fcarousel-chip-wrap[data-wheel-offset="2"] {
    transform: translateX(-50%) translateY(114px) scale(0.82);
    opacity: 0;
  }

  .fcarousel-chip-wrap[data-wheel-offset="-2"] {
    transform: translateX(-50%) translateY(-114px) scale(0.82);
    opacity: 0;
  }

  .fcarousel-right {
    min-height: 430px;
    padding: 2rem 1.25rem;
  }

  .fcarousel-cards-stack {
    max-width: 310px;
  }

  .fcarousel-card[data-status="prev"] {
    transform: translateX(-45px) scale(0.86) rotate(-3deg);
  }

  .fcarousel-card[data-status="next"] {
    transform: translateX(45px) scale(0.86) rotate(3deg);
  }

  .whatsapp-split-grid,
  .faq-grid,
  .consultation-card-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .works-header-clean {
    justify-content: center;
    text-align: center;
  }

  .works-header-clean > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-inline: auto;
  }

  .folder-cards-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    padding-block: 1.75rem;
    margin-block: -1.75rem;
  }

  .folder-cards-grid::-webkit-scrollbar {
    display: none;
  }

  .folder-peek-wrap {
    flex: 0 0 284px;
    width: 284px;
    height: 430px;
    scroll-snap-align: center;
    margin-inline: 0;
  }

  .folder-peek-card {
    width: 284px;
    height: 430px;
  }

  .hero-copy-col,
  .hero-fomo-hook,
  .hero-lead-wrap {
    grid-column: 1 / -1;
  }

  /* Mobile Horizontal Swipeable 4 USPs inside Statement Card */
  .metrics-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 0.35rem;
    margin-inline: -0.5rem;
    padding-inline: 0.5rem;
  }

  .metrics-row::-webkit-scrollbar {
    display: none;
  }

  .metric-cell {
    flex: 0 0 78%;
    max-width: 260px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(198, 233, 206, 0.18);
    border-radius: 20px;
    padding: 1.15rem 1.25rem;
  }

  .metric-sub {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    font-size: 0.81rem;
    min-height: 0;
  }

  .liquid-index-stage {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding: 1.35rem;
    border-radius: 28px;
  }

  .liquid-preview-col {
    width: 100%;
  }

  .liquid-preview-card {
    width: 100%;
    height: 195px;
    border-radius: 22px;
    transform: none !important;
  }

  .liquid-desktop-desc-box {
    display: none;
  }

  .liquid-row-btn.is-active .liquid-row-mobile-desc {
    display: block;
  }

  .vtab-gallery-frame {
    aspect-ratio: 4 / 3.4;
    border-radius: 26px;
  }

  .vtab-slide-overlay {
    padding: 1.5rem 1.1rem 1.2rem 7.6rem;
  }

  .vtab-slide-overlay strong {
    font-size: 0.88rem !important;
    line-height: 1.3;
  }

  .footer-top-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .promises-bento-list,
  .form-row-grid,
  .footer-top-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .fcarousel-right {
    min-height: 410px;
    padding: 1.5rem 1rem;
  }

  .fcarousel-cards-stack {
    max-width: 280px;
    aspect-ratio: 4 / 4.75;
  }

  .fcarousel-card[data-status="prev"] {
    transform: translateX(-28px) scale(0.86) rotate(-3deg);
  }

  .fcarousel-card[data-status="next"] {
    transform: translateX(28px) scale(0.86) rotate(3deg);
  }

  

  

  

  

  .floating-lion-kontakt {
    width: 80px;
    height: 80px;
  }

  

  
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   16. PRECOMPILED HERO UTILITY CLASSES (Replaces 350 KB Tailwind Play CDN)
   ========================================================================== */
*, ::before, ::after {--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:  ;--tw-pan-y:  ;--tw-pinch-zoom:  ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position:  ;--tw-gradient-via-position:  ;--tw-gradient-to-position:  ;--tw-ordinal:  ;--tw-slashed-zero:  ;--tw-numeric-figure:  ;--tw-numeric-spacing:  ;--tw-numeric-fraction:  ;--tw-ring-inset:  ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:  ;--tw-brightness:  ;--tw-contrast:  ;--tw-grayscale:  ;--tw-hue-rotate:  ;--tw-invert:  ;--tw-saturate:  ;--tw-sepia:  ;--tw-drop-shadow:  ;--tw-backdrop-blur:  ;--tw-backdrop-brightness:  ;--tw-backdrop-contrast:  ;--tw-backdrop-grayscale:  ;--tw-backdrop-hue-rotate:  ;--tw-backdrop-invert:  ;--tw-backdrop-opacity:  ;--tw-backdrop-saturate:  ;--tw-backdrop-sepia:  ;--tw-contain-size:  ;--tw-contain-layout:  ;--tw-contain-paint:  ;--tw-contain-style:  
}::backdrop {--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x:  ;--tw-pan-y:  ;--tw-pinch-zoom:  ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position:  ;--tw-gradient-via-position:  ;--tw-gradient-to-position:  ;--tw-ordinal:  ;--tw-slashed-zero:  ;--tw-numeric-figure:  ;--tw-numeric-spacing:  ;--tw-numeric-fraction:  ;--tw-ring-inset:  ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / 0.5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur:  ;--tw-brightness:  ;--tw-contrast:  ;--tw-grayscale:  ;--tw-hue-rotate:  ;--tw-invert:  ;--tw-saturate:  ;--tw-sepia:  ;--tw-drop-shadow:  ;--tw-backdrop-blur:  ;--tw-backdrop-brightness:  ;--tw-backdrop-contrast:  ;--tw-backdrop-grayscale:  ;--tw-backdrop-hue-rotate:  ;--tw-backdrop-invert:  ;--tw-backdrop-opacity:  ;--tw-backdrop-saturate:  ;--tw-backdrop-sepia:  ;--tw-contain-size:  ;--tw-contain-layout:  ;--tw-contain-paint:  ;--tw-contain-style:  
}.pointer-events-none {pointer-events: none
}.pointer-events-auto {pointer-events: auto
}.fixed {position: fixed
}.absolute {position: absolute
}.relative {position: relative
}.inset-0 {inset: 0px
}.inset-x-0 {left: 0px;right: 0px
}.-bottom-3\.5 {bottom: -0.875rem
}.bottom-full {bottom: 100%
}.left-0 {left: 0px
}.left-1\/2 {left: 50%
}.right-0 {right: 0px
}.right-\[4\%\] {right: 4%
}.top-0 {top: 0px
}.top-7 {top: 1.75rem
}.z-10 {z-index: 10
}.z-20 {z-index: 20
}.z-30 {z-index: 30
}.z-\[115\] {z-index: 115
}.m-auto {margin: auto
}.-my-1 {margin-top: -0.25rem;margin-bottom: -0.25rem
}.mx-auto {margin-left: auto;margin-right: auto
}.-mb-5 {margin-bottom: -1.25rem
}.mb-0\.5 {margin-bottom: 0.125rem
}.mb-2 {margin-bottom: 0.5rem
}.ml-0\.5 {margin-left: 0.125rem
}.mt-1 {margin-top: 0.25rem
}.mt-1\.5 {margin-top: 0.375rem
}.mt-16 {margin-top: 4rem
}.mt-3 {margin-top: 0.75rem
}.mt-4 {margin-top: 1rem
}.mt-5 {margin-top: 1.25rem
}.mt-auto {margin-top: auto
}.block {display: block
}.flex {display: flex
}.inline-flex {display: inline-flex
}.grid {display: grid
}.hidden {display: none
}.aspect-\[4\/3\] {aspect-ratio: 4/3
}.aspect-video {aspect-ratio: 16 / 9
}.h-10 {height: 2.5rem
}.h-14 {height: 3.5rem
}.h-20 {height: 5rem
}.h-3\.5 {height: 0.875rem
}.h-4 {height: 1rem
}.h-5 {height: 1.25rem
}.h-6 {height: 1.5rem
}.h-7 {height: 1.75rem
}.h-8 {height: 2rem
}.h-9 {height: 2.25rem
}.h-\[18px\] {height: 18px
}.h-\[60px\] {height: 60px
}.h-auto {height: auto
}.h-full {height: 100%
}.min-h-\[min\(100dvh\2c 900px\)\] {min-height: min(100svh,900px)
}.w-10 {width: 2.5rem
}.w-12 {width: 3rem
}.w-28 {width: 7rem
}.w-3\.5 {width: 0.875rem
}.w-4 {width: 1rem
}.w-5 {width: 1.25rem
}.w-6 {width: 1.5rem
}.w-7 {width: 1.75rem
}.w-8 {width: 2rem
}.w-9 {width: 2.25rem
}.w-\[152px\] {width: 152px
}.w-\[18px\] {width: 18px
}.w-\[50\%\] {width: 50%
}.w-\[62\%\] {width: 62%
}.w-\[74\%\] {width: 74%
}.w-full {width: 100%
}.max-w-3xl {max-width: 48rem
}.max-w-\[1120px\] {max-width: 1120px
}.max-w-\[1440px\] {max-width: 1440px
}.max-w-\[215px\] {max-width: 215px
}.max-w-\[245px\] {max-width: 245px
}.max-w-\[290px\] {max-width: 290px
}.max-w-\[295px\] {max-width: 295px
}.max-w-\[360px\] {max-width: 360px
}.max-w-md {max-width: 28rem
}.flex-1 {flex: 1 1 0%
}.shrink-0 {flex-shrink: 0
}.-translate-x-1\/2 {--tw-translate-x: -50%;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}.translate-y-\[22\.37\%\] {--tw-translate-y: 22.37%;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}.cursor-pointer {cursor: pointer
}.select-none {-webkit-user-select: none;user-select: none
}.grid-cols-1 {grid-template-columns: repeat(1, minmax(0, 1fr))
}.grid-cols-2 {grid-template-columns: repeat(2, minmax(0, 1fr))
}.grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr))
}.flex-col {flex-direction: column
}.items-start {align-items: flex-start
}.items-end {align-items: flex-end
}.items-center {align-items: center
}.justify-center {justify-content: center
}.justify-between {justify-content: space-between
}.gap-1 {gap: 0.25rem
}.gap-1\.5 {gap: 0.375rem
}.gap-2 {gap: 0.5rem
}.gap-2\.5 {gap: 0.625rem
}.gap-3 {gap: 0.75rem
}.gap-3\.5 {gap: 0.875rem
}.gap-8 {gap: 2rem
}.-space-x-2 > :not([hidden]) ~ :not([hidden]) {--tw-space-x-reverse: 0;margin-right: calc(-0.5rem * var(--tw-space-x-reverse));margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)))
}.-space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {--tw-space-x-reverse: 0;margin-right: calc(-0.625rem * var(--tw-space-x-reverse));margin-left: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)))
}.overflow-hidden {overflow: hidden
}.overflow-visible {overflow: visible
}.overflow-x-hidden {overflow-x: hidden
}.whitespace-nowrap {white-space: nowrap
}.rounded-2xl {border-radius: 1rem
}.rounded-3xl {border-radius: 1.5rem
}.rounded-\[24px\] {border-radius: 24px
}.rounded-\[28px\] {border-radius: 28px
}.rounded-full {border-radius: 9999px
}.rounded-xl {border-radius: 0.75rem
}.border {border-width: 1px
}.border-0 {border-width: 0px
}.border-\[\#083A18\]\/10 {border-color: rgb(8 58 24 / 0.1)
}.border-\[\#C6E9CE\] {--tw-border-opacity: 1;border-color: rgb(198 233 206 / var(--tw-border-opacity, 1))
}.bg-\[\#083A18\] {--tw-bg-opacity: 1;background-color: rgb(8 58 24 / var(--tw-bg-opacity, 1))
}.bg-\[\#083A18\]\/40 {background-color: rgb(8 58 24 / 0.4)
}.bg-\[\#C6E9CE\] {--tw-bg-opacity: 1;background-color: rgb(198 233 206 / var(--tw-bg-opacity, 1))
}.bg-\[\#ECF6EE\] {--tw-bg-opacity: 1;background-color: rgb(236 246 238 / var(--tw-bg-opacity, 1))
}.bg-\[\#FF5A1F\] {--tw-bg-opacity: 1;background-color: rgb(255 90 31 / var(--tw-bg-opacity, 1))
}.bg-transparent {background-color: transparent
}.bg-white {--tw-bg-opacity: 1;background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
}.bg-white\/90 {background-color: rgb(255 255 255 / 0.9)
}.bg-white\/95 {background-color: rgb(255 255 255 / 0.95)
}.bg-gradient-to-b {background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}.from-\[\#F3FAF4\] {--tw-gradient-from: #F3FAF4 var(--tw-gradient-from-position);--tw-gradient-to: rgb(243 250 244 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}.to-\[\#ECF6EE\] {--tw-gradient-to: #ECF6EE var(--tw-gradient-to-position)
}.fill-\[\#FF5A1F\] {fill: #FF5A1F
}.fill-white {fill: #fff
}.object-contain {object-fit: contain
}.object-cover {object-fit: cover
}.p-2 {padding: 0.5rem
}.p-2\.5 {padding: 0.625rem
}.p-3 {padding: 0.75rem
}.p-4 {padding: 1rem
}.p-6 {padding: 1.5rem
}.px-1 {padding-left: 0.25rem;padding-right: 0.25rem
}.px-2 {padding-left: 0.5rem;padding-right: 0.5rem
}.px-3 {padding-left: 0.75rem;padding-right: 0.75rem
}.px-3\.5 {padding-left: 0.875rem;padding-right: 0.875rem
}.px-4 {padding-left: 1rem;padding-right: 1rem
}.px-5 {padding-left: 1.25rem;padding-right: 1.25rem
}.px-6 {padding-left: 1.5rem;padding-right: 1.5rem
}.px-8 {padding-left: 2rem;padding-right: 2rem
}.py-1 {padding-top: 0.25rem;padding-bottom: 0.25rem
}.py-1\.5 {padding-top: 0.375rem;padding-bottom: 0.375rem
}.py-2 {padding-top: 0.5rem;padding-bottom: 0.5rem
}.py-2\.5 {padding-top: 0.625rem;padding-bottom: 0.625rem
}.py-3 {padding-top: 0.75rem;padding-bottom: 0.75rem
}.pb-3 {padding-bottom: 0.75rem
}.pb-36 {padding-bottom: 9rem
}.pb-5 {padding-bottom: 1.25rem
}.pb-6 {padding-bottom: 1.5rem
}.pl-4 {padding-left: 1rem
}.pl-5 {padding-left: 1.25rem
}.pr-1\.5 {padding-right: 0.375rem
}.pr-2 {padding-right: 0.5rem
}.pr-3 {padding-right: 0.75rem
}.pt-1 {padding-top: 0.25rem
}.pt-3 {padding-top: 0.75rem
}.pt-7 {padding-top: 1.75rem
}.pt-8 {padding-top: 2rem
}.pt-9 {padding-top: 2.25rem
}.text-left {text-align: left
}.text-center {text-align: center
}.font-sans {font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, sans-serif
}.text-2xl {font-size: 1.5rem;line-height: 2rem
}.text-5xl {font-size: 3rem;line-height: 1
}.text-6xl {font-size: 3.75rem;line-height: 1
}.text-\[11\.5px\] {font-size: 11.5px
}.text-\[11px\] {font-size: 11px
}.text-\[14\.5px\] {font-size: 14.5px
}.text-\[15px\] {font-size: 15px
}.text-\[21px\] {font-size: 21px
}.text-\[22px\] {font-size: 22px
}.text-\[42px\] {font-size: 42px
}.text-base {font-size: 1rem;line-height: 1.5rem
}.text-lg {font-size: 1.125rem;line-height: 1.75rem
}.text-sm {font-size: 0.875rem;line-height: 1.25rem
}.text-xs {font-size: 0.75rem;line-height: 1rem
}.font-bold {font-weight: 700
}.font-extrabold {font-weight: 800
}.font-medium {font-weight: 500
}.font-semibold {font-weight: 600
}.leading-\[1\.04\] {line-height: 1.04
}.leading-\[1\.05\] {line-height: 1.05
}.leading-\[1\.24\] {line-height: 1.24
}.leading-\[1\.26\] {line-height: 1.26
}.leading-\[1\.3\] {line-height: 1.3
}.leading-snug {line-height: 1.375
}.leading-tight {line-height: 1.25
}.tracking-\[-0\.03em\] {letter-spacing: -0.03em
}.tracking-tight {letter-spacing: -0.025em
}.text-\[\#083A18\] {--tw-text-opacity: 1;color: rgb(8 58 24 / var(--tw-text-opacity, 1))
}.text-\[\#083A18\]\/80 {color: rgb(8 58 24 / 0.8)
}.text-\[\#083A18\]\/85 {color: rgb(8 58 24 / 0.85)
}.text-\[\#111111\] {--tw-text-opacity: 1;color: rgb(17 17 17 / var(--tw-text-opacity, 1))
}.text-\[\#FF5A1F\] {--tw-text-opacity: 1;color: rgb(255 90 31 / var(--tw-text-opacity, 1))
}.text-white {--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}.text-white\/80 {color: rgb(255 255 255 / 0.8)
}.text-white\/95 {color: rgb(255 255 255 / 0.95)
}.no-underline {-webkit-text-decoration-line: none;text-decoration-line: none
}.opacity-85 {opacity: 0.85
}.shadow-2xl {--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}.shadow-lg {--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}.shadow-md {--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}.shadow-sm {--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}.ring-2 {--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}.ring-4 {--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}.ring-\[\#C6E9CE\] {--tw-ring-opacity: 1;--tw-ring-color: rgb(198 233 206 / var(--tw-ring-opacity, 1))
}.ring-white {--tw-ring-opacity: 1;--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1))
}.backdrop-blur {--tw-backdrop-blur: blur(8px);-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}.backdrop-blur-md {--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}.transition-all {transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms
}.transition-colors {transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms
}.transition-transform {transition-property: transform;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms
}.duration-200 {transition-duration: 200ms
}.duration-300 {transition-duration: 300ms
}.selection\:bg-\[\#083A18\] *::selection {--tw-bg-opacity: 1;background-color: rgb(8 58 24 / var(--tw-bg-opacity, 1))
}.selection\:text-white *::selection {--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}.selection\:bg-\[\#083A18\]::selection {--tw-bg-opacity: 1;background-color: rgb(8 58 24 / var(--tw-bg-opacity, 1))
}.selection\:text-white::selection {--tw-text-opacity: 1;color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}.backdrop\:bg-\[\#083A18\]\/70::backdrop {background-color: rgb(8 58 24 / 0.7)
}.backdrop\:backdrop-blur-sm::backdrop {--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}.hover\:scale-105:hover {--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}.hover\:bg-\[\#0c4f22\]:hover {--tw-bg-opacity: 1;background-color: rgb(12 79 34 / var(--tw-bg-opacity, 1))
}.hover\:bg-\[\#C6E9CE\]:hover {--tw-bg-opacity: 1;background-color: rgb(198 233 206 / var(--tw-bg-opacity, 1))
}.hover\:bg-\[\#E04812\]:hover {--tw-bg-opacity: 1;background-color: rgb(224 72 18 / var(--tw-bg-opacity, 1))
}.hover\:bg-\[\#ECF6EE\]:hover {--tw-bg-opacity: 1;background-color: rgb(236 246 238 / var(--tw-bg-opacity, 1))
}.hover\:text-\[\#FF5A1F\]:hover {--tw-text-opacity: 1;color: rgb(255 90 31 / var(--tw-text-opacity, 1))
}.hover\:shadow-md:hover {--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}.group:hover .group-hover\:scale-105 {--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}@media (min-width: 640px) {.sm\:text-\[48px\] {font-size: 48px
    }
}@media (min-width: 1024px) {.lg\:block {display: block
    }.lg\:flex {display: flex
    }.lg\:hidden {display: none
    }.lg\:h-\[100dvh\] {height: 100dvh
    }.lg\:max-h-\[900px\] {max-height: 900px
    }.lg\:min-h-\[700px\] {min-height: 700px
    }.lg\:grid-cols-3 {grid-template-columns: repeat(3, minmax(0, 1fr))
    }.lg\:flex-col {flex-direction: column
    }.lg\:justify-between {justify-content: space-between
    }.lg\:text-\[25px\] {font-size: 25px
    }
}@media (min-width: 1280px) {.xl\:right-\[5\.5\%\] {right: 5.5%
    }.xl\:top-9 {top: 2.25rem
    }.xl\:mt-20 {margin-top: 5rem
    }.xl\:w-\[160px\] {width: 160px
    }.xl\:w-\[52\%\] {width: 52%
    }.xl\:w-\[78\%\] {width: 78%
    }.xl\:gap-10 {gap: 2.5rem
    }.xl\:px-12 {padding-left: 3rem;padding-right: 3rem
    }.xl\:pb-40 {padding-bottom: 10rem
    }.xl\:pb-6 {padding-bottom: 1.5rem
    }.xl\:pt-8 {padding-top: 2rem
    }.xl\:pt-9 {padding-top: 2.25rem
    }.xl\:text-\[15px\] {font-size: 15px
    }.xl\:text-\[19px\] {font-size: 19px
    }.xl\:text-\[78px\] {font-size: 78px
    }
}

/* ==========================================================================
   17. SEO / GEO / AEO CRAWLABLE LAYER & FINAL CTA TRUST ITEMS
   ========================================================================== */

.final-cta-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block: 0.35rem;
}

.final-cta-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(198, 233, 206, 0.24);
  border-radius: 18px;
  padding: 0.95rem 1rem;
}

.final-cta-trust-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #4ADE80;
  color: #083A18;
  font-weight: 900;
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.final-cta-trust-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

.final-cta-trust-item span {
  display: block;
  font-size: 0.78rem;
  color: rgba(243, 250, 244, 0.82);
  line-height: 1.42;
}

/* ==========================================================================
   18. DEDICATED 2-STEP CONTACT PAGE (kontakt.html — Simplicity & 100% Free)
   ========================================================================== */
.kontakt-page-body {
  background: linear-gradient(180deg, #F3FAF4 0%, #FFFFFF 55%, #F7FAF8 100%);
  color: #111111;
  min-height: 100dvh;
}

.kontakt-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(243, 250, 244, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(8, 58, 24, 0.1);
}

.kontakt-header-inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.kontakt-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.kontakt-brand-text {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.kontakt-header-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.kontakt-header-nav a {
  color: #083A18;
  text-decoration: none;
  transition: color 0.2s ease;
}

.kontakt-header-nav a:hover {
  color: #FF5A1F;
}

.kontakt-header-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.kontakt-free-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.14);
  border-radius: 999px;
  padding: 0.38rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #083A18;
  box-shadow: 0 2px 8px rgba(8, 58, 24, 0.05);
}

.kontakt-free-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

.kontakt-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding-inline: 1rem;
  border-radius: 999px;
  background: #083A18;
  color: #FFFFFF;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.kontakt-back-btn:hover {
  background: #0c4f22;
}

.kontakt-main {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.kontakt-split-layout {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

.kontakt-trust-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.kontakt-form-col {
  min-width: 0;
}

.kontakt-free-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  background: #D9F2DF;
  border: 1px solid rgba(8, 58, 24, 0.18);
  color: #083A18;
  border-radius: 999px;
  padding: 0.42rem 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kontakt-main-title {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #083A18;
  text-wrap: balance;
}

.kontakt-main-sub {
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.56;
  color: #374151;
  max-width: 54ch;
  text-wrap: pretty;
}

@media (max-width: 520px) {
  .kontakt-free-hero-badge {
    font-size: 0.68rem;
    padding: 0.36rem 0.85rem;
    letter-spacing: 0.07em;
  }
}

.kontakt-guarantees-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.25rem;
}

.kontakt-guarantee-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.12);
  border-radius: 22px;
  padding: 1.15rem 1.3rem;
  box-shadow: 0 8px 24px rgba(8, 58, 24, 0.04);
}

.kontakt-guarantee-card.is-highlighted {
  background: #F3FAF4;
  border: 2px solid #083A18;
}

.kontakt-guarantee-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontakt-guarantee-card.is-highlighted .kontakt-guarantee-icon {
  background: #FF5A1F;
}

.kontakt-guarantee-card h2 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 0.2rem;
}

.kontakt-guarantee-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4B5563;
}

.kontakt-proof-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.1);
  border-radius: 20px;
  padding: 0.9rem 1.15rem;
  margin-top: 0.25rem;
}

.kontakt-proof-avatars {
  display: flex;
  align-items: center;
}

.kontakt-proof-avatars img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.kontakt-proof-avatars img + img {
  margin-left: -10px;
}

.kontakt-proof-copy {
  display: flex;
  flex-direction: column;
}

.kontakt-proof-copy strong {
  font-size: 0.84rem;
  font-weight: 800;
  color: #083A18;
}

.kontakt-proof-copy span {
  font-size: 0.75rem;
  color: #6B7280;
}

/* Right Column: 2-Step Wizard Card */
.kontakt-wizard-card {
  background: #FFFFFF;
  border: 2px solid #083A18;
  border-radius: 32px;
  padding: clamp(1.5rem, 3vw, 2.35rem);
  box-shadow: 0 26px 64px rgba(8, 58, 24, 0.12);
}

.kontakt-wizard-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.kontakt-step-badge {
  display: inline-flex;
  align-items: center;
  background: #083A18;
  color: #FFFFFF;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kontakt-wizard-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ECFDF3;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .kontakt-wizard-card {
    padding: 1.25rem;
    border-radius: 26px;
  }

  .kontakt-wizard-topbar {
    gap: 0.45rem;
  }

  .kontakt-step-badge,
  .kontakt-wizard-free-tag {
    font-size: 0.68rem;
    padding: 0.28rem 0.65rem;
  }
}

.kontakt-progress-track {
  width: 100%;
  height: 6px;
  background: #E5ECE7;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.kontakt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #083A18 0%, #FF5A1F 100%);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.kontakt-step-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  font-weight: 800;
  line-height: 1.2;
  color: #111111;
  margin-bottom: 0.35rem;
}

.kontakt-step-sub {
  font-size: 0.9rem;
  color: #4B5563;
  margin-bottom: 1.25rem;
}

.kontakt-choice-grid {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.35rem;
}

.kontakt-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.15rem;
  border-radius: 18px;
  border: 1.5px solid #D5E2D9;
  background: #F9FCFA;
  cursor: pointer;
  transition: all 0.18s ease;
}

.kontakt-choice-card:hover {
  border-color: #083A18;
  background: #F3FAF4;
}

.kontakt-choice-card.is-selected {
  border-color: #083A18;
  background: #ECF6EE;
  box-shadow: 0 6px 18px rgba(8, 58, 24, 0.08);
}

.kontakt-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kontakt-choice-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #9CA3AF;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.18s ease;
}

.kontakt-choice-card.is-selected .kontakt-choice-radio {
  border-color: #FF5A1F;
  background: #FF5A1F;
  box-shadow: inset 0 0 0 4px #FFFFFF;
}

.kontakt-choice-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.kontakt-choice-body strong {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  color: #083A18;
}

.kontakt-choice-body span {
  font-size: 0.8rem;
  color: #4B5563;
}

.kontakt-choice-arrow {
  font-weight: 800;
  color: #083A18;
  opacity: 0.45;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.kontakt-choice-card:hover .kontakt-choice-arrow,
.kontakt-choice-card.is-selected .kontakt-choice-arrow {
  opacity: 1;
  color: #FF5A1F;
  transform: translateX(3px);
}

.kontakt-next-btn,
.kontakt-submit-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 999px;
  background: #FF5A1F;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(255, 90, 31, 0.28);
  transition: background-color 0.2s ease, transform 0.18s ease;
}

.kontakt-next-btn:hover,
.kontakt-submit-btn:hover {
  background: #E04812;
  transform: translateY(-1px);
}

.kontakt-micro-reassurance {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #083A18;
}

.kontakt-selected-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #F3FAF4;
  border: 1px solid #C6E9CE;
  border-radius: 14px;
  padding: 0.7rem 1rem;
  margin-bottom: 1.15rem;
}

.kontakt-summary-label {
  font-size: 0.74rem;
  color: #4B5563;
  display: block;
}

.kontakt-selected-summary strong {
  font-size: 0.88rem;
  color: #083A18;
  font-weight: 800;
}

.kontakt-back-step-btn {
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.18);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #083A18;
  cursor: pointer;
}

.kontakt-inputs-stack {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  margin-bottom: 1.35rem;
}

.kontakt-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kontakt-input-group label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #111111;
}

.kontakt-input-group input {
  width: 100%;
  height: 50px;
  padding-inline: 1rem;
  border-radius: 14px;
  border: 1.5px solid #D1DBD4;
  background: #F9FCFA;
  font-size: 0.95rem;
  color: #111111;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.kontakt-input-group input:focus {
  outline: none;
  border-color: #083A18;
  background: #FFFFFF;
}

.kontakt-success-box {
  text-align: center;
  padding: 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.kontakt-success-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #D9F2DF;
  color: #083A18;
  font-size: 1.75rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

@media (max-width: 980px) {
  .kontakt-split-layout,
  .final-cta-trust-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-header-nav,
  .kontakt-free-top-pill {
    display: none;
  }
}

/* ==========================================================================
   19. "SO EINFACH LÄUFT DIE UMSETZUNG" — two26.studio ROADMAP PATH DRAW
       & PROXIMITY EXPANSION (#ablauf)
   ========================================================================== */
.roadmap-section {
  width: 100%;
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(3rem, 5vw, 5rem);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3FAF4 48%, #FFFFFF 100%);
  border-top: 1px solid #E5ECE7;
  border-bottom: 1px solid #E5ECE7;
  overflow: clip;
}

.roadmap-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3rem, 5vw, 4.75rem);
}

.roadmap-header {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.roadmap-main-heading {
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 3.8vw, 3.45rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #083A18;
  margin-bottom: 0.75rem;
}

.roadmap-body {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.roadmap-path {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.roadmap-path-svg {
  position: relative;
  z-index: 2;
  opacity: 0.22;
  width: 100%;
  padding: 0.2rem;
  display: block;
}

.roadmap-path-svg-dark {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0.2rem;
  display: block;
  pointer-events: none;
}

.roadmap-path-svg svg,
.roadmap-path-svg-dark svg,
.roadmap-path-mobile svg,
.roadmap-path-mobile-dark svg {
  overflow: visible !important;
  width: 100%;
  height: auto;
  display: block;
}

.roadmap-path-mobile,
.roadmap-path-mobile-dark {
  display: none;
}

.roadmap-portal-start {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.15rem;
  z-index: 4;
}

.roadmap-portal-end {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2.15rem;
  z-index: 4;
}

.roadmap-layers {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(6rem, 10.6vw, 10.8rem);
}

.roadmap-layer {
  position: relative;
  width: 100%;
  height: 5.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.roadmap-block {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
}

.roadmap-block.one {
  right: -23%;
}

.roadmap-block.two {
  left: -17%;
}

.roadmap-block.three {
  right: -5%;
}

.roadmap-block.four {
  right: -25%;
}

.roadmap-block.five {
  left: -11%;
}

.roadmap-block.six {
  right: -18%;
}

.roadmap-block.seven {
  left: -20%;
}

.roadmap-text {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.1vw, 4.15rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: #083A18;
  white-space: nowrap;
  -webkit-text-stroke: 7px #FFFFFF;
  paint-order: stroke fill;
}

.roadmap-text--goal {
  font-size: clamp(2.55rem, 4.8vw, 4.8rem);
}

.roadmap-text--goal-accent {
  color: #FF5A1F;
}

.roadmap-goal-kicker {
  position: absolute;
  bottom: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.85rem;
  border-radius: 999px;
  background: #083A18;
  border: 2px solid #FF5A1F;
  color: #C6E9CE;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(8, 58, 24, 0.16);
}

.roadmap-svg {
  width: 0px;
  height: 92px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  background: transparent;
  flex-shrink: 0;
  transform-origin: center center;
  will-change: transform, width, opacity;
  opacity: 0;
  transform: scale(0);
}

.roadmap-svg--goal {
  height: 108px;
}

.roadmap-3d-icon {
  width: 92px;
  height: 92px;
  display: block;
  overflow: visible;
  flex-shrink: 0;
}

.roadmap-3d-icon--goal {
  width: 108px;
  height: 108px;
}

.roadmap-para-wrapper {
  position: absolute;
  top: calc(100% - 0.35rem);
  right: -4.4rem;
  width: max-content;
  max-width: 22rem;
  padding: 0.72rem 1.25rem;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid #FF5A1F;
  box-shadow: 0 14px 34px rgba(8, 58, 24, 0.14);
  transform-origin: center center;
  will-change: transform, opacity;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  z-index: 6;
}

.roadmap-para-wrapper--goal {
  background: #083A18;
  border: 2.5px solid #FF5A1F;
  box-shadow: 0 18px 40px rgba(8, 58, 24, 0.24);
}

.roadmap-para {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.28;
  color: #083A18;
  margin: 0;
  text-align: left;
  white-space: nowrap;
}

.roadmap-para--goal {
  color: #FFFFFF;
}

/* Mobile Hero H1 ("Schnell, gut & einfach" noticeably larger, 2-line & in #FF5A1F Orange) */
.mobile-hero-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
  margin-top: 1.1rem;
  margin-bottom: -1.1rem;
  letter-spacing: -0.035em;
}

.mobile-hero-h1-top {
  display: block;
  white-space: nowrap;
  font-size: clamp(2.2rem, 9.2vw, 2.6rem);
  line-height: 1.08;
  color: #083A18;
  margin-bottom: 0.12rem;
}

.mobile-hero-h1-accent {
  display: block;
  white-space: nowrap;
  font-size: clamp(2.9rem, 12.6vw, 3.55rem);
  line-height: 1.01;
  color: #FF5A1F;
}

@media (max-width: 991px) {
  .roadmap-layers {
    gap: 5.5rem;
  }

  .roadmap-text {
    font-size: clamp(1.75rem, 4.6vw, 2.6rem);
  }

  .roadmap-text--goal {
    font-size: clamp(2.1rem, 5.4vw, 3.05rem);
  }

  .roadmap-3d-icon {
    width: 68px;
    height: 68px;
  }

  .roadmap-3d-icon--goal {
    width: 78px;
    height: 78px;
  }

  .roadmap-svg {
    height: 68px;
  }

  .roadmap-svg--goal {
    height: 78px;
  }

  .roadmap-para-wrapper {
    top: calc(100% - 0.25rem);
    right: -1.5rem;
    padding: 0.55rem 0.95rem;
  }

  .roadmap-para {
    font-size: 0.74rem;
  }
}

@media (max-width: 767px) {
  .roadmap-path-svg,
  .roadmap-path-svg-dark,
  .roadmap-portal-start,
  .roadmap-portal-end {
    display: none;
  }

  .roadmap-path-mobile {
    position: relative;
    z-index: 2;
    opacity: 0.24;
    width: 100%;
    display: block;
  }

  .roadmap-path-mobile-dark {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    display: block;
    pointer-events: none;
  }

  .roadmap-layers {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    justify-content: space-between;
    padding-top: 7.2%;
    padding-bottom: 5.4%;
    gap: 0;
  }

  .roadmap-text {
    font-size: clamp(1.38rem, 5.6vw, 1.85rem);
    -webkit-text-stroke: 5px #FFFFFF;
    paint-order: stroke fill;
  }

  .roadmap-text--goal {
    font-size: clamp(1.85rem, 7.4vw, 2.35rem);
  }

  .roadmap-3d-icon {
    width: 52px;
    height: 52px;
  }

  .roadmap-3d-icon--goal {
    width: 64px;
    height: 64px;
  }

  .roadmap-svg {
    height: 52px;
  }

  .roadmap-svg--goal {
    height: 64px;
  }

  /* Shift odd stops right (away from left bend at x=18) & even stops left (away from right bend at x=382) */
  .roadmap-block.one {
    left: 5%;
    right: auto;
  }

  .roadmap-block.two {
    left: -5%;
    right: auto;
  }

  .roadmap-block.three {
    left: 5%;
    right: auto;
  }

  .roadmap-block.four {
    left: -5%;
    right: auto;
  }

  .roadmap-block.five {
    left: 5%;
    right: auto;
  }

  .roadmap-block.six {
    left: -4%;
    right: auto;
  }

  .roadmap-block.seven {
    left: 0;
    right: auto;
  }

  .roadmap-goal-kicker {
    bottom: calc(100% + 0.25rem);
    font-size: 0.64rem;
    padding: 0.22rem 0.7rem;
  }

  .roadmap-para-wrapper {
    top: calc(100% + 0.1rem);
    left: 0;
    right: 0;
    margin-inline: auto;
    width: max-content;
    max-width: min(268px, 88vw);
    padding: 0.48rem 0.88rem;
  }

  .roadmap-para {
    font-size: 0.69rem;
    line-height: 1.26;
  }
}

/* ==========================================================================
   17. ANFALOVA.ART-INSPIRED PINNED WORKFLOW & NICHE-INDEPENDENT PROJECT
       SHOWCASE (#referenzen — "Einige unserer Website Projekte.")
   ========================================================================== */
#referenzen.works-section {
  padding-top: 0;
  padding-bottom: 0;
  background: #FFFFFF;
  overflow-x: clip;
}

.anf-workflow-runway {
  position: relative;
  height: 410vh;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2FAF4 48%, #FFFFFF 100%);
}

.anf-workflow-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Prominent Live Project Number + Title Banner directly above the 3 Lines */
.anf-niche-pill-wrap {
  position: relative;
  z-index: 4;
  margin-bottom: clamp(1.25rem, 2.6vh, 2.1rem);
  pointer-events: none;
}

.anf-niche-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  background: #FFFFFF;
  border: 2px solid #083A18;
  box-shadow:
    0 14px 32px rgba(8, 58, 24, 0.12),
    0 5px 0 #083A18;
  font-family: var(--font-display);
  color: #083A18;
  white-space: nowrap;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.anf-niche-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #FF5A1F;
  box-shadow: 0 0 10px rgba(255, 90, 31, 0.65);
  flex-shrink: 0;
  align-self: center;
}

.anf-pill-proj-label {
  font-size: clamp(0.82rem, 1.15vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #083A18;
}

.anf-pill-proj-num {
  font-size: clamp(1.35rem, 2.25vw, 2.05rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #FF5A1F;
  font-variant-numeric: tabular-nums;
}

.anf-pill-proj-title {
  font-size: clamp(0.95rem, 1.38vw, 1.26rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #083A18;
}

.anf-pill-proj-niche {
  align-self: center;
  margin-left: 0.25rem;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  background: #ECF6EE;
  border: 1px solid #C6E9CE;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #083A18;
}

/* 3-Line Background Heading (Jedes Unternehmen. / 2026 Top ausgestattet. / Endlich Jahre Ruhe.) */
.anf-workflow-heading {
  position: relative;
  z-index: 2;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 3.65vw, 3.45rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: #083A18;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

.anf-workflow-word {
  display: block;
  white-space: nowrap;
  padding-inline: 0.14em;
}

.anf-heading-space {
  display: inline-block;
  width: 0.28em;
}

.anf-heading-letter {
  display: inline-block;
  color: #083A18;
  transition: color 0.16s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), text-shadow 0.2s ease;
  will-change: transform, color;
}

.anf-heading-letter.is-cbi {
  color: #FF5A1F;
  font-style: italic;
  transform: translateY(-0.04em) skewX(-7deg) scale(1.03);
  text-shadow: 0 12px 28px rgba(255, 90, 31, 0.16);
}

/* Rising & Tilted Project Cards Container */
.anf-workflow-cards {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.anf-workflow-card {
  position: absolute;
  top: 50%;
  width: clamp(275px, 23vw, 335px);
  pointer-events: auto;
  will-change: transform;
  backface-visibility: hidden;
  transform: translate3d(0, 115vh, 0) rotate(-7deg);
}

.anf-workflow-card-0 {
  left: clamp(2%, 4vw, 5.8%);
}

.anf-workflow-card-1 {
  right: clamp(2%, 4vw, 5.8%);
}

.anf-workflow-card-2 {
  left: clamp(2.5%, 4.8vw, 6.8%);
}

.anf-workflow-card-3 {
  right: clamp(2.5%, 4.8vw, 6.8%);
}

.anf-card-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  perspective: 960px;
}

.anf-card-tilt {
  position: relative;
  width: 100%;
  border-radius: 26px;
  background: #FFFFFF;
  border: 2px solid #083A18;
  box-shadow:
    0 28px 64px rgba(8, 58, 24, 0.16),
    0 8px 0 #083A18;
  padding: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transform-style: preserve-3d;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.24s ease, box-shadow 0.24s ease;
}

.anf-card-trigger:hover .anf-card-tilt,
.anf-card-trigger:focus-visible .anf-card-tilt {
  border-color: #FF5A1F;
  box-shadow:
    0 34px 72px rgba(8, 58, 24, 0.22),
    0 8px 0 #FF5A1F;
}

.anf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.anf-card-num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.28rem 0.78rem;
  border-radius: 999px;
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.anf-card-num strong {
  font-size: 0.98rem;
  font-weight: 900;
  color: #FF5A1F;
  letter-spacing: -0.02em;
}

.anf-card-niche {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #083A18;
  background: #ECF6EE;
  border: 1px solid #C6E9CE;
  padding: 0.3rem 0.72rem;
  border-radius: 999px;
  white-space: nowrap;
}

.anf-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  border-radius: 18px;
  overflow: hidden;
  background: #083A18;
  border: 1.5px solid rgba(8, 58, 24, 0.12);
}

.anf-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.anf-card-trigger:hover .anf-card-media img {
  transform: scale(1.04);
}

.anf-card-badge-row {
  position: absolute;
  inset-inline: 0.65rem;
  bottom: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 2;
}

.anf-card-logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.anf-card-logo-pill img {
  height: 20px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
}

.anf-card-rating-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 0.72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #083A18;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.anf-card-kpi-pill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: #083A18;
  color: #C6E9CE;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(8, 58, 24, 0.22);
}

.anf-card-kpi-pill--orange {
  background: #FF5A1F;
  color: #FFFFFF;
}

.anf-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-inline: 0.2rem;
}

.anf-card-title {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #083A18;
  margin: 0;
}

.anf-card-desc {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #374151;
  margin: 0;
}

.anf-card-footer {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  border-top: 1px solid #E5ECE7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: #FF5A1F;
}

.anf-card-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFF2EC;
  color: #FF5A1F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease, background-color 0.22s ease, color 0.22s ease;
}

.anf-card-trigger:hover .anf-card-arrow {
  background: #FF5A1F;
  color: #FFFFFF;
  transform: translate(2px, -2px);
}

/* Outro Arrows + Statement + CTA (anfalova.art .workflow-outro) */
.anf-workflow-outro {
  position: absolute;
  top: calc(50% - 10vh);
  left: 50%;
  width: min(94vw, 800px);
  z-index: 14;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
  opacity: 0;
  transform: translate3d(-50%, 55vh, 0);
  will-change: transform, opacity;
}

.anf-outro-arrows {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 1.85rem);
  pointer-events: none;
  user-select: none;
  margin-bottom: -0.15rem;
}

.anf-outro-arrow-svg {
  display: block;
  overflow: visible;
  filter: drop-shadow(0 6px 14px rgba(255, 90, 31, 0.24));
  animation: anfArrowPointDown 2.1s cubic-bezier(0.42, 0, 0.25, 1) infinite;
}

.anf-outro-arrow-svg--left {
  width: clamp(54px, 6.2vw, 76px);
  height: auto;
  animation-delay: 0s;
}

.anf-outro-arrow-svg--center {
  width: clamp(26px, 3vw, 34px);
  height: auto;
  animation-delay: 0.18s;
}

.anf-outro-arrow-svg--right {
  width: clamp(54px, 6.2vw, 76px);
  height: auto;
  animation-delay: 0.34s;
}

@keyframes anfArrowPointDown {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.86;
  }
  50% {
    transform: translate3d(0, 8px, 0);
    opacity: 1;
  }
}

.anf-workflow-statement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.6vw, 1.35rem);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1.5px solid #C6E9CE;
  border-radius: 28px;
  padding: clamp(1.05rem, 2vw, 1.45rem) clamp(1.15rem, 2.5vw, 2.15rem);
  box-shadow: 0 20px 48px rgba(8, 58, 24, 0.09);
  max-width: 790px;
}

.anf-workflow-paren {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 3.8rem);
  font-weight: 300;
  line-height: 0.85;
  color: #FF5A1F;
  user-select: none;
}

.anf-workflow-statement-text {
  font-family: var(--font-display);
  font-size: clamp(0.94rem, 1.26vw, 1.15rem);
  font-weight: 700;
  line-height: 1.46;
  letter-spacing: -0.02em;
  color: #083A18;
  margin: 0;
}

.anf-outro-line {
  display: block;
  text-wrap: balance;
}

.anf-workflow-statement-highlight {
  display: block;
  margin-top: 0.5rem;
  color: #FF5A1F;
  font-weight: 800;
}

.anf-workflow-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Split-Pill Call Button (anfalova.art .workflow-call) */
.anf-workflow-call {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}

.anf-workflow-call--btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

.anf-workflow-call--btn:focus-visible .anf-workflow-call-label {
  outline: 3px solid #083A18;
  outline-offset: 3px;
}

.anf-workflow-call-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding-inline: 1.85rem;
  border-radius: 999px;
  background: #FF5A1F;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 16px 36px rgba(255, 90, 31, 0.28);
  transition: background-color 0.25s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.anf-workflow-call-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #083A18;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(8, 58, 24, 0.22);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}

.anf-workflow-call-icon svg {
  width: 21px;
  height: 21px;
}

.anf-workflow-call:hover .anf-workflow-call-label {
  background: #E04812;
  transform: translateY(-2px);
}

.anf-workflow-call:hover .anf-workflow-call-icon {
  background: #FF5A1F;
  transform: translateY(-2px) rotate(45deg);
}

@media (max-width: 820px) {
  .anf-workflow-runway {
    height: 390vh;
  }

  .anf-niche-pill-wrap {
    margin-bottom: 1rem;
  }

  .anf-niche-pill {
    padding: 0.44rem 0.95rem;
    gap: 0.38rem;
  }

  .anf-pill-proj-label {
    font-size: 0.72rem;
  }

  .anf-pill-proj-num {
    font-size: 1.18rem;
  }

  .anf-pill-proj-title {
    font-size: 0.84rem;
  }

  .anf-pill-proj-niche {
    display: none;
  }

  .anf-workflow-heading {
    font-size: clamp(1.36rem, 5.5vw, 1.9rem);
    line-height: 1.12;
    max-width: 100%;
    padding-inline: 0.5rem;
  }

  .anf-workflow-card,
  .anf-workflow-card-0,
  .anf-workflow-card-1,
  .anf-workflow-card-2,
  .anf-workflow-card-3 {
    left: 50%;
    right: auto;
    width: min(88vw, 336px);
    transform: translate3d(-50%, 115vh, 0) rotate(-7deg);
  }

  .anf-workflow-outro {
    top: calc(50% - 12vh);
    width: 92vw;
    gap: 0.85rem;
  }

  .anf-outro-arrows {
    gap: 0.95rem;
    margin-bottom: -0.25rem;
  }

  .anf-outro-arrow-svg--left,
  .anf-outro-arrow-svg--right {
    width: 52px;
  }

  .anf-outro-arrow-svg--center {
    width: 25px;
  }

  .anf-workflow-statement {
    padding: 0.95rem 1.05rem;
    border-radius: 22px;
    gap: 0.45rem;
  }

  .anf-workflow-paren {
    font-size: 2.2rem;
  }

  .anf-workflow-statement-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  .anf-workflow-statement-highlight {
    margin-top: 0.38rem;
  }

  .anf-workflow-call-label {
    height: 50px;
    padding-inline: 1.55rem;
    font-size: 0.94rem;
  }

  .anf-workflow-call-icon {
    width: 48px;
    height: 48px;
  }

  .site-footer {
    margin-top: 7.5rem;
    padding-top: 3.6rem;
  }

  .footer-lion-ledge-wrap {
    width: min(62vw, 225px);
  }

  .footer-free-kicker {
    font-size: 0.66rem;
    padding: 0.36rem 0.85rem;
    letter-spacing: 0.08em;
  }

  .footer-hero-headline {
    font-size: clamp(1.7rem, 7vw, 2.25rem);
  }

  .footer-hero-headline-accent {
    white-space: normal;
  }

  .footer-main-cta-pill {
    width: 100%;
    max-width: 336px;
    padding: 0.45rem 0.48rem 0.45rem 1.15rem;
    font-size: 0.9rem;
    gap: 0.5rem;
  }

  .footer-main-cta-arrow {
    width: 38px;
    height: 38px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-trust-pills-row {
    flex-direction: column;
    gap: 0.4rem;
  }
}

/* MANDATORY Copy-Paste Safety: Ensure content remains fully visible and legible for assistive technologies or users with motion sensitivities */
@media (prefers-reduced-motion: reduce) {
  .anf-workflow-runway {
    height: auto;
    padding-block: 3rem;
  }
  .anf-workflow-stage {
    position: relative;
    height: auto;
    gap: 2.5rem;
  }
  .anf-workflow-cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1.5rem;
    width: min(92vw, 1200px);
  }
  .anf-workflow-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    transform: none !important;
    translate: 0 0 !important;
  }
  .anf-workflow-outro {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .anf-outro-arrow-svg {
    animation: none !important;
  }
}



.ratgeber-page-body {
  background: #FFFFFF;
  color: #111111;
  overflow-x: clip;
}

.ratgeber-page-body .page-shell {
  overflow-x: clip;
  max-width: 100vw;
}

.ratgeber-hero {
  position: relative;
  padding-top: clamp(7rem, 9.5vw, 8.85rem);
  padding-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
  background: linear-gradient(180deg, #F3FAF4 0%, #ECF6EE 55%, #FFFFFF 100%);
  border-bottom: 1px solid #E5ECE7;
  text-align: center;
}

.ratgeber-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  min-width: 0;
  margin-inline: auto;
}

.ratgeber-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.05rem, 4.8vw, 4.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: #083A18;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0 0 1.15rem;
}

.ratgeber-hero-title .accent-orange {
  color: #FF5A1F;
}

.ratgeber-hero-sub {
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
  color: #374151;
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0 0 1.85rem;
}

















/* Dedicated Single Article Hero */
.article-hero {
  padding-top: clamp(7rem, 9.5vw, 8.75rem);
  padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, #F3FAF4 0%, #FFFFFF 100%);
  border-bottom: 1px solid #E5ECE7;
  text-align: left;
}

.article-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4B5563;
  margin-bottom: 1.15rem;
}

.article-breadcrumb a {
  color: #083A18;
  text-decoration: none;
  font-weight: 700;
}

.article-breadcrumb a:hover {
  color: #FF5A1F;
}

.article-hero-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  max-width: 520px;
  margin-bottom: 0.85rem;
}

.article-hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #083A18;
  max-width: 26ch;
  text-wrap: balance;
  overflow-wrap: break-word;
  margin: 0.35rem 0 1rem;
}

.article-hero-lead {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem);
  line-height: 1.64;
  color: #374151;
  max-width: 74ch;
  text-wrap: pretty;
  margin: 0;
}

/* Overview Section & Unified Card Meta System */
.ratgeber-overview-section {
  padding-block: clamp(2.5rem, 4.8vw, 4.25rem);
  background: #F7FAF8;
  border-bottom: 1px solid #E5ECE7;
}

.ratgeber-featured-card {
  background: #083A18;
  color: #FFFFFF;
  border-radius: 28px;
  padding: clamp(1.5rem, 3.6vw, 2.85rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.2vw, 2.85rem);
  align-items: center;
  box-shadow: 0 24px 60px rgba(8, 58, 24, 0.16);
  margin-bottom: 1.75rem;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.ratgeber-featured-card > div {
  min-width: 0;
}

/* 100% Unified Top Meta Row across Featured Card & All Grid Cards */
.ratgeber-featured-tag-row,
.ratgeber-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 0.95rem;
}

.ratgeber-badge-orange {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.76rem;
  border-radius: 999px;
  background: #FF5A1F;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.ratgeber-read-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #C6E9CE;
  white-space: nowrap;
  flex-shrink: 0;
}

.ratgeber-featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  text-wrap: balance;
  margin: 0 0 0.9rem;
}

.ratgeber-featured-excerpt {
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 1.35rem;
}

.ratgeber-featured-metrics-box {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(198, 233, 206, 0.24);
  border-radius: 22px;
  padding: clamp(1.15rem, 2.2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.ratgeber-featured-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ratgeber-featured-stat {
  background: rgba(8, 58, 24, 0.55);
  border: 1px solid rgba(198, 233, 206, 0.2);
  border-radius: 16px;
  padding: 0.85rem 0.9rem;
  min-width: 0;
}

.ratgeber-featured-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 800;
  color: #4ADE80;
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.ratgeber-featured-stat span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.35;
  display: block;
}

/* Bento Overview Cards Grid */
.ratgeber-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

.ratgeber-card {
  background: #FFFFFF;
  border: 1.5px solid #DFECE2;
  border-radius: 24px;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
  min-width: 0;
  text-align: left;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.ratgeber-card:hover {
  transform: translateY(-4px);
  border-color: #083A18;
  box-shadow: 0 20px 44px rgba(8, 58, 24, 0.09);
}

.ratgeber-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  background: #F2FAF4;
  border: 1px solid #C6E9CE;
  color: #083A18;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.ratgeber-card-time {
  font-size: 0.78rem;
  font-weight: 600;
  color: #6B7280;
  white-space: nowrap;
  flex-shrink: 0;
}

.ratgeber-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.85vw, 1.5rem);
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: #083A18;
  text-wrap: balance;
  margin: 0 0 0.65rem;
}

.ratgeber-card-desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

.ratgeber-card-footer {
  padding-top: 0.85rem;
  border-top: 1px solid #EDF3EE;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.ratgeber-card-footer-tag {
  font-size: 0.79rem;
  font-weight: 600;
  color: #4B5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ratgeber-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #FF5A1F;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.ratgeber-card-link:hover {
  color: #083A18;
}

/* Deep Long-Form Article Sections (Full Width Scannable Executive Layout) */
.ratgeber-article-section {
  padding-block: clamp(2.75rem, 5vw, 4.75rem);
  border-bottom: 1px solid #E5ECE7;
}

.ratgeber-article-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(2rem, 3.8vw, 3.5rem);
  align-items: start;
}

.ratgeber-article-meta-rail {
  position: sticky;
  top: 96px;
  background: #F2FAF4;
  border: 1px solid #C6E9CE;
  border-radius: 22px;
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.ratgeber-author-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ratgeber-author-row img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #083A18;
  flex-shrink: 0;
}

.ratgeber-author-row strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: #083A18;
}

.ratgeber-author-row span {
  display: block;
  font-size: 0.76rem;
  color: #4B5563;
}

.ratgeber-rail-facts {
  list-style: none;
  padding: 0.85rem 0 0;
  margin: 0;
  border-top: 1px solid #C6E9CE;
  display: grid;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #1F2937;
}

.article-toc-box {
  border-top: 1px solid #C6E9CE;
  padding-top: 0.85rem;
}

.article-toc-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #083A18;
  margin: 0 0 0.55rem;
}

.article-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.42rem;
}

.article-toc-list a {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  color: #374151;
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}

.article-toc-list a:hover {
  color: #FF5A1F;
}

.ratgeber-article-body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

.ratgeber-article-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF5A1F;
  margin-bottom: 0.65rem;
}

.ratgeber-article-h2 {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: #083A18;
  text-wrap: balance;
  margin: 2.5rem 0 1rem;
  scroll-margin-top: 108px;
}

.ratgeber-article-body > .ratgeber-article-h2:first-of-type {
  margin-top: 1.75rem;
}

/* 30-Second Executive TL;DR Box (AI & GEO Citation Magnet) */
.ratgeber-tldr-box {
  background: #F2FAF4;
  border: 2px solid #083A18;
  border-radius: 22px;
  padding: clamp(1.2rem, 2.5vw, 1.65rem);
  margin-bottom: 2rem;
  box-shadow: 0 12px 30px rgba(8, 58, 24, 0.06);
}

.ratgeber-tldr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.ratgeber-tldr-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #083A18;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ratgeber-tldr-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  background: #083A18;
  color: #FFFFFF;
  white-space: nowrap;
}

.ratgeber-tldr-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  font-size: 0.96rem;
  line-height: 1.58;
  color: #111111;
}

.ratgeber-article-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.22rem, 1.85vw, 1.5rem);
  font-weight: 800;
  color: #083A18;
  margin: 1.85rem 0 0.65rem;
  letter-spacing: -0.02em;
  line-height: 1.24;
  scroll-margin-top: 108px;
}

.ratgeber-article-body p {
  font-size: 1.02rem;
  line-height: 1.72;
  color: #1F2937;
  margin: 0 0 1.15rem;
}

.ratgeber-article-body ul:not(.ratgeber-tldr-list) {
  margin: 0 0 1.35rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
  font-size: 1rem;
  line-height: 1.65;
  color: #1F2937;
}

/* Scannable Interior KPI Bento Grid (3 Columns inside Wide Article) */
.article-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}

.article-kpi-card {
  background: #F7FAF8;
  border: 1.5px solid #D5E6DA;
  border-radius: 18px;
  padding: 1.2rem 1.25rem;
  min-width: 0;
}

.article-kpi-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  color: #083A18;
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.article-kpi-card span {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #374151;
  font-weight: 600;
}

/* Scannable 2-Column Step / Checklist Grid */
.article-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.35rem 0 1.85rem;
}

.article-checklist-card {
  background: #FFFFFF;
  border: 1.5px solid #DFECE2;
  border-radius: 18px;
  padding: 1.25rem 1.35rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.article-checklist-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #F2FAF4;
  border: 1px solid #C6E9CE;
  color: #FF5A1F;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ratgeber-article-body .article-checklist-card h3,
.article-checklist-card h3,
.article-checklist-card h4 {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 800;
  color: #083A18;
  margin: 0;
  letter-spacing: normal;
  line-height: 1.3;
}

.article-checklist-card p {
  font-size: 0.92rem;
  line-height: 1.58;
  color: #374151;
  margin: 0;
}

/* Comparison Table (Mobile Safe Horizontal Scroll) */
.ratgeber-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5rem 0 1.85rem;
  border-radius: 18px;
  border: 1px solid #C6E9CE;
  background: #FFFFFF;
}

.ratgeber-comparison-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.9rem;
}

.ratgeber-comparison-table th {
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  padding: 0.9rem 1.05rem;
  border-bottom: 1px solid #083A18;
}

.ratgeber-comparison-table td {
  padding: 0.85rem 1.05rem;
  border-bottom: 1px solid #E5ECE7;
  color: #1F2937;
  vertical-align: top;
}

.ratgeber-comparison-table tr:last-child td {
  border-bottom: 0;
}

.ratgeber-comparison-table tr.is-recommended-row td {
  background: #F2FAF4;
  font-weight: 600;
}

/* Case Study Proof Box inside Article */
.ratgeber-case-proof {
  background: #FFFFFF;
  border: 1.5px solid #C6E9CE;
  border-left: 5px solid #FF5A1F;
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  margin: 1.65rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.ratgeber-case-proof-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF5A1F;
}

.ratgeber-case-proof strong {
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: #083A18;
}

.ratgeber-case-proof p {
  font-size: 0.92rem;
  margin: 0;
  color: #374151;
}

/* Article Interactive FAQ Accordion */
.article-faq-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 2rem;
}

.article-faq-item {
  background: #FFFFFF;
  border: 1.5px solid #DFECE2;
  border-radius: 18px;
  overflow: hidden;
}

.article-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: #083A18;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.article-faq-item summary::-webkit-details-marker {
  display: none;
}

.article-faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 700;
  color: #FF5A1F;
  flex-shrink: 0;
  line-height: 1;
}

.article-faq-item[open] summary::after {
  content: '−';
}

.article-faq-item div {
  padding: 0 1.25rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1.64;
  color: #374151;
}

/* Article Bottom CTA Box */
.article-cta-banner {
  margin-top: 2.25rem;
  background: #083A18;
  color: #FFFFFF;
  border-radius: 24px;
  padding: clamp(1.35rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (max-width: 980px) {
  .ratgeber-featured-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .ratgeber-bento-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ratgeber-article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ratgeber-article-meta-rail {
    position: static;
  }
  .article-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .article-checklist-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ratgeber-hero-title {
    font-size: clamp(1.85rem, 7.4vw, 2.35rem);
    line-height: 1.1;
  }
  .ratgeber-featured-tag-row,
  .ratgeber-card-meta,
  .article-hero-meta-bar {
    gap: 0.45rem;
  }
  .ratgeber-badge-orange,
  .ratgeber-card-cat {
    font-size: 0.68rem;
    padding: 0.25rem 0.62rem;
  }
  .ratgeber-read-time,
  .ratgeber-card-time {
    font-size: 0.74rem;
  }
}


/* ==========================================================================
   24. KOSTENLOS INFORMIEREN 2-STEP MODAL (Rainbrand Clean Flow in WEBsitelöwe CI)
   ========================================================================== */
dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}

.info-lead-modal {
  border: 0;
  padding: 0;
  margin: auto;
  width: min(92vw, 468px);
  max-width: 468px;
  max-height: min(90dvh, 760px);
  border-radius: 28px;
  background: #FFFFFF;
  color: #083A18;
  box-shadow: 0 32px 84px rgba(8, 58, 24, 0.28), 0 0 0 1.5px rgba(8, 58, 24, 0.1);
  overflow-y: auto;
  overflow-x: hidden;
}

.info-lead-modal::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(8, 58, 24, 0.62);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.info-modal-shell {
  padding: 1.65rem 1.75rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.info-modal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 36px;
}

.info-modal-kicker {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #546A5B;
}

.info-modal-kicker[hidden],
.info-modal-back-btn[hidden],
.info-modal-step[hidden] {
  display: none !important;
}

.info-modal-back-btn {
  border: 0;
  background: #EEF6F0;
  color: #083A18;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background-color 0.2s ease;
}

.info-modal-back-btn:hover {
  background: #DCEEE1;
}

.info-modal-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 0;
  background: #EEF5F0;
  color: #083A18;
  font-size: 0.95rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.info-modal-close-btn:hover {
  background: #083A18;
  color: #FFFFFF;
}

.info-modal-step {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.info-modal-heading {
  font-family: var(--font-display);
  font-size: clamp(1.62rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: #083A18;
  margin: 0 0 0.45rem;
  text-align: left;
}

.info-modal-heading--compact {
  font-size: clamp(1.28rem, 2.4vw, 1.52rem);
  line-height: 1.2;
  margin-bottom: 0.32rem;
}

.info-modal-sub {
  font-size: 0.93rem;
  line-height: 1.5;
  color: #4A5D50;
  margin: 0 0 1.15rem;
  text-align: left;
}

.info-modal-sub--compact {
  font-size: 0.86rem;
  margin-bottom: 0.8rem;
}

.info-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

.info-modal-field {
  display: flex;
  flex-direction: column;
  text-align: left;
  width: 100%;
}

.info-modal-label {
  font-family: var(--font-display);
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #083A18;
  margin-bottom: 0.2rem;
}

.info-modal-hint {
  display: block;
  font-size: 0.76rem;
  color: #637768;
  margin-bottom: 0.4rem;
}

.info-modal-input,
.info-modal-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1.5px solid #C8D7CC;
  background: #FFFFFF;
  color: #083A18;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.info-modal-input {
  height: 54px;
  padding: 0 1rem;
}

.info-modal-textarea {
  padding: 0.7rem 0.9rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 64px;
}

.info-modal-input::placeholder,
.info-modal-textarea::placeholder {
  color: #7D9082;
}

.info-modal-input:focus,
.info-modal-textarea:focus {
  outline: none;
  border-color: #083A18;
  box-shadow: 0 0 0 3px rgba(8, 58, 24, 0.12);
}

.info-modal-error {
  display: none;
  color: #C43214;
  background: #FFF3EF;
  border: 1px solid #F6C5B8;
  border-radius: 10px;
  padding: 0.48rem 0.7rem;
  font-size: 0.81rem;
  font-weight: 600;
  line-height: 1.38;
  margin-top: 0.45rem;
}

.info-modal-error.is-visible {
  display: block;
}

/* Defer validation error styling until user interaction (:user-invalid + fallback) */
.info-modal-input:user-invalid,
.info-modal-input.user-invalid-fallback {
  border-color: #D9381E;
  background-color: #FFF7F5;
}

.info-modal-input:user-invalid + .info-modal-error,
.info-modal-input.user-invalid-fallback + .info-modal-error {
  display: block;
}

.info-modal-input:user-valid,
.info-modal-input.user-valid-fallback {
  border-color: #167938;
}

.info-modal-primary-btn {
  width: 100%;
  min-height: 54px;
  padding: 0.85rem 1.2rem;
  border-radius: 14px;
  border: 0;
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(8, 58, 24, 0.18);
  transition: background-color 0.22s ease, transform 0.22s ease;
}

.info-modal-primary-btn:hover {
  background: #0C4E21;
  transform: translateY(-1px);
}

.info-modal-primary-btn:disabled {
  opacity: 0.7;
  cursor: wait;
  transform: none;
}

.info-modal-primary-btn--orange {
  background: #FF5A1F;
  box-shadow: 0 14px 30px rgba(255, 90, 31, 0.28);
}

.info-modal-primary-btn--orange:hover {
  background: #E04812;
}

.info-modal-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1rem 0;
  color: #6B7E70;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.info-modal-divider::before,
.info-modal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E2ECE4;
}

.info-modal-whatsapp-btn {
  width: 100%;
  min-height: 54px;
  padding: 0.82rem 1.15rem;
  border-radius: 14px;
  background: #ECF8F0;
  border: 1.5px solid #B7E2C4;
  color: #083A18;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.info-modal-whatsapp-btn:hover {
  background: #DCF2E4;
  border-color: #1DA851;
  transform: translateY(-1px);
}

.info-modal-wa-icon {
  width: 21px;
  height: 21px;
  color: #1DA851;
  flex-shrink: 0;
}

.info-modal-footnote {
  margin: 1rem 0 0;
  font-size: 0.79rem;
  line-height: 1.48;
  color: #607366;
  text-align: left;
}

.info-modal-inline-link {
  border: 0;
  background: none;
  padding: 0;
  color: #083A18;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.info-modal-inline-link:hover {
  color: #FF5A1F;
}

/* Step 2: Situation Checkboxes */
.info-situation-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.info-situation-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.66rem 0.78rem;
  border-radius: 14px;
  border: 1.5px solid #DCE8DF;
  background: #F9FCFA;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.info-situation-option:hover {
  border-color: #A9CEB3;
  background: #F3FAF5;
}

.info-situation-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.info-situation-check {
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1.5px solid #B6C9BC;
  background: #FFFFFF;
  color: transparent;
  font-size: 0.76rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.08rem;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.info-situation-text {
  font-size: 0.84rem;
  line-height: 1.4;
  color: #2B3D30;
}

.info-situation-text strong {
  color: #083A18;
  font-weight: 800;
}

.info-situation-option:has(input:checked) {
  border-color: #FF5A1F;
  background: #FFF7F3;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.09);
}

.info-situation-option input:checked + .info-situation-check,
.info-situation-option:has(input:checked) .info-situation-check {
  background: #FF5A1F;
  border-color: #FF5A1F;
  color: #FFFFFF;
}

.info-situation-option:has(input:focus-visible) {
  outline: 2px solid #083A18;
  outline-offset: 2px;
}

.info-modal-field--custom {
  margin-top: 0.15rem;
}

/* Step 3: Sympathetic Thank-You View */
.info-modal-step--thanks {
  align-items: flex-start;
  text-align: left;
  gap: 0.35rem;
}

.info-modal-thanks-badge {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #E7F7EC;
  border: 1.5px solid #B7E2C4;
  color: #083A18;
  font-size: 1.35rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.45rem;
}

.info-modal-thanks-copy {
  font-size: 0.92rem;
  line-height: 1.56;
  color: #374B3D;
  margin: 0 0 0.85rem;
}

.info-modal-email-highlight {
  color: #FF5A1F;
  word-break: break-word;
}

.info-modal-thanks-list {
  list-style: none;
  padding: 0.85rem 1rem;
  margin: 0 0 1.05rem;
  width: 100%;
  background: #F3FAF5;
  border: 1px solid #D3E8D8;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.48rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #083A18;
}

@media (max-width: 520px) {
  .info-lead-modal {
    width: 92vw;
    max-height: 92dvh;
    border-radius: 24px;
  }

  .info-modal-shell {
    padding: 1.18rem 1.15rem 1.25rem;
    gap: 0.55rem;
  }

  .info-modal-sub--compact {
    font-size: 0.83rem;
    margin-bottom: 0.55rem;
  }

  .info-modal-form {
    gap: 0.68rem;
  }

  .info-modal-input,
  .info-modal-primary-btn,
  .info-modal-whatsapp-btn {
    min-height: 50px;
    height: auto;
  }

  .info-modal-input {
    height: 50px;
  }

  .info-modal-textarea {
    min-height: 54px;
    padding: 0.55rem 0.8rem;
  }

  .info-modal-primary-btn,
  .info-modal-whatsapp-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
  }

  .info-situation-list {
    gap: 0.4rem;
  }

  .info-situation-option {
    padding: 0.5rem 0.65rem;
    gap: 0.55rem;
  }

  .info-situation-text {
    font-size: 0.8rem;
    line-height: 1.35;
  }
}


/* ==========================================================================
   25. KONTAKT ULTRA-SIMPLICITY & FULL-WIDTH EDGE-TO-EDGE SLIM FOOTER
   ========================================================================== */
.kontakt-page-body .page-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.kontakt-page-body .kontakt-main {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  padding-block: clamp(2rem, 4.2vw, 3.8rem);
}

.kontakt-page-body .kontakt-split-layout {
  width: 100%;
  align-items: center;
}

.kontakt-safety-pills {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.kontakt-safety-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #FFFFFF;
  border: 1px solid rgba(8, 58, 24, 0.12);
  border-radius: 18px;
  padding: 0.82rem 1.05rem;
  box-shadow: 0 6px 18px rgba(8, 58, 24, 0.04);
}

.kontakt-safety-row.is-primary {
  background: #F2FAF4;
  border: 1.5px solid #083A18;
}

.kontakt-safety-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #083A18;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kontakt-safety-row.is-primary .kontakt-safety-badge {
  background: #FF5A1F;
}

.kontakt-safety-copy {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.kontakt-safety-copy strong {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 800;
  color: #083A18;
  line-height: 1.25;
}

.kontakt-safety-copy span {
  font-size: 0.83rem;
  color: #4B5E51;
  line-height: 1.35;
}

.kontakt-wa-quickline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: #4B5E51;
  margin-top: 0.2rem;
}

.kontakt-wa-quickline a {
  color: #083A18;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kontakt-wa-quickline a:hover {
  color: #FF5A1F;
}

/* Full-width Edge-to-Edge Slim Footer on /kontakt (aligned flush left & right inside .container) */
.kontakt-slim-footer {
  width: 100%;
  background-color: #083A18;
  color: rgba(243, 250, 244, 0.88);
  padding-block: 1.35rem;
  margin-top: auto;
  border-top: 1px solid rgba(198, 233, 206, 0.16);
}

.kontakt-slim-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem 1.5rem;
  font-size: 0.85rem;
}

.kontakt-slim-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.kontakt-slim-footer-links a,
.kontakt-slim-footer-links button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: #C6E9CE;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.kontakt-slim-footer-links a:hover,
.kontakt-slim-footer-links button:hover {
  color: #FFFFFF;
}

.kontakt-slim-footer-links .kontakt-slim-home {
  color: #FFFFFF;
  font-weight: 700;
}

/* Fehlermeldung beim Lead-Versand (app.js showLeadError) */
.lead-send-error[hidden] {
  display: none;
}
.lead-send-error a {
  text-decoration: underline;
  font-weight: 800;
}
.lead-send-error:focus {
  outline: none;
}

/* Honeypot gegen Spam-Bots: für Menschen unsichtbar, aber nicht display:none */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Impressum und Datenschutz */
.legal-page {
  max-width: 46rem;
  margin: 0 auto;
  color: #1F2937;
  font-size: 1rem;
  line-height: 1.7;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  color: #083A18;
  margin: 0 0 0.4rem;
}
.legal-page h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.35;
  color: #083A18;
  margin: 2rem 0 0.5rem;
}
.legal-page p,
.legal-page ul {
  margin: 0 0 0.9rem;
}
.legal-page ul {
  padding-left: 1.2rem;
  list-style: disc;
}
.legal-page li + li {
  margin-top: 0.35rem;
}
.legal-page a {
  color: #083A18;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}
.legal-page a:hover {
  color: #C43214;
}
.legal-page .legal-meta {
  color: #4B5563;
  font-size: 0.92rem;
}

/* Pflicht-Checkbox Datenschutz an den Formularen */
.consent-field {
  margin: 0.7rem 0 0.8rem;
  text-align: left;
}
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.3rem 0;
  font-size: 0.79rem;
  font-weight: 500;
  line-height: 1.45;
  color: #607366;
  cursor: pointer;
}
.consent-check input {
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.08rem 0 0;
  accent-color: #083A18;
  cursor: pointer;
}
.consent-check input[aria-invalid="true"] {
  outline: 2px solid #D9381E;
  outline-offset: 2px;
}
.consent-check a {
  color: #083A18;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile Kontakt-Leiste (app.js createMobileCtaBar), nur unter 1024px */
.mobile-cta-bar {
  display: none;
}
@media (max-width: 1023.98px) {
  .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid rgba(8, 58, 24, 0.12);
    box-shadow: 0 -10px 30px rgba(8, 58, 24, 0.1);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
  }
  .mobile-cta-bar.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.28s ease, visibility 0s;
  }
  body:has(dialog[open]) .mobile-cta-bar,
  body:has(#mobile-menu-toggle[aria-expanded="true"]) .mobile-cta-bar {
    transform: translateY(110%);
    visibility: hidden;
  }
  .mobile-cta-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    border-radius: 999px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
  }
  .mobile-cta-bar__btn--primary {
    background: #083A18;
    color: #FFFFFF;
  }
  .mobile-cta-bar__btn--wa {
    background: #FFFFFF;
    color: #083A18;
    border: 1.5px solid #083A18;
  }
  .mobile-cta-bar__btn--wa svg {
    width: 1.15rem;
    height: 1.15rem;
  }
  body.has-mobile-cta-bar {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar,
  .mobile-cta-bar.is-visible {
    transition: none;
  }
}

/* Zielgruppen-Zeile unter der Desktop-H1 */
.hero-audience-line {
  position: relative;
  z-index: 10;
  max-width: 760px;
  margin: 18px auto 0;
  padding: 0 1rem;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(8, 58, 24, 0.75);
  text-align: center;
  text-wrap: balance;
}
.hero-headline-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* KPI-Raster mit zwei Karten (Ratgeber Handwerk und Relaunch) */
@media (min-width: 981px) {
  .article-kpi-grid.article-kpi-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ratgeber mobil: Fakten-Liste und Zurück-Link im Rail ausblenden,
   damit der 30-Sekunden-Überblick direkt nach Titel und Autor kommt */
@media (max-width: 980px) {
  .ratgeber-article-meta-rail .ratgeber-rail-facts,
  .ratgeber-article-meta-rail > a[href="/website-ratgeber"] {
    display: none;
  }
}

/* Ratgeber-Hub: eine einzelne letzte Karte im 2-Spalten-Raster über die volle Breite */
.ratgeber-bento-grid > .ratgeber-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Kontrast: kleiner oranger Text auf hellem Grund nutzt das dunklere Text-Orange.
   Orange Flächen (Buttons) und große Überschriften behalten #FF5A1F. */
.bento-card-link,
.section-kicker,
.ratgeber-card-link,
.anf-card-cta,
.anf-card-arrow,
.article-checklist-num,
.ratgeber-case-proof-kicker,
.kontakt-choice-card:hover .kontakt-choice-arrow,
.kontakt-choice-card.is-selected .kontakt-choice-arrow,
.anf-workflow-statement-highlight,
nav a.text-\[\#FF5A1F\] {
  color: var(--wl-orange-text);
}
.skip-link {
  background: #083A18;
  color: #FFFFFF;
}

.info-modal-divider {
  color: #5B6E60;
}

/* Touch-Ziele mindestens 44px: unsichtbare Klickfläche um kleine Knöpfe, Optik bleibt gleich */
.info-modal-close-btn,
#mobile-menu-toggle {
  position: relative;
}
.info-modal-close-btn::after,
#mobile-menu-toggle::after {
  content: '';
  position: absolute;
  inset: -4px;
}
#mobile-menu-toggle::after {
  inset: -2px;
}

/* Danke-Schritte im Info-Fenster nummeriert */
.info-modal-thanks-list.info-modal-thanks-list--steps {
  list-style: decimal;
  padding-left: 2.1rem;
}

/* Kundenprojekte: keine eigene Grafikebene pro Buchstabe (rund 60 Ebenen machten mobil Ruckeln) */
.anf-heading-letter {
  will-change: auto;
}

/* Logo-Laufband: auf Mobil kürzere Überschrift (2 Zeilen) */
.ref-logo-marquee-headline .marquee-short {
  display: none;
}
@media (max-width: 820px) {
  .ref-logo-marquee-headline .marquee-long {
    display: none;
  }
  .ref-logo-marquee-headline .marquee-short {
    display: inline;
  }
}

/* Regionen-Seiten (/webdesign): Hero-Buttons und Projektkarten */
.region-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
}
.region-project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 1rem;
}
.region-project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid #E5ECE7;
  background: #FFFFFF;
  text-decoration: none;
  color: #111111;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.region-project-card:hover {
  box-shadow: 0 14px 32px rgba(8, 58, 24, 0.12);
  transform: translateY(-2px);
}
.region-project-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.region-project-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #374151;
}
.region-project-body strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #083A18;
}
@media (max-width: 980px) {
  .region-project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Hauptmenü mit 6 Punkten: auf kleinen Laptops (1024 bis 1279px) enger setzen */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  nav[aria-label="Hauptnavigation"] {
    gap: 1.15rem !important;
    font-size: 14px;
  }
  nav[aria-label="Hauptnavigation"] a {
    white-space: nowrap;
  }
}

/* ==========================================================================
   CTA-Vereinheitlichung (28.10.2026): schlichter Button statt Hover-Animation,
   WhatsApp-Pill mit dezentem Puls
   ========================================================================== */
.book-cta-btn--plain {
  gap: 0.55rem;
  white-space: nowrap;
  max-width: 100%;
}

@media (max-width: 400px) {
  .book-cta-btn--plain {
    font-size: clamp(0.78rem, 3.6vw, 0.92rem);
    padding-inline: 1.1rem;
  }
}

.wa-pulse {
  position: relative;
  isolation: isolate;
}

.wa-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  animation: waPulse 2.8s ease-out infinite;
}

@keyframes waPulse {
  0% { transform: scale(1); opacity: 0.75; }
  60% { transform: scale(1.12, 1.4); opacity: 0; }
  100% { transform: scale(1.12, 1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-pulse::after { animation: none; }
}

/* Mobiler Hero-CTA: längerer Text muss samt Pfeil in die Karte passen */
.cta-projekt-starten.hero-mobile-cta-fit {
  max-width: 340px;
  font-size: clamp(12px, 3.55vw, 14.5px);
  padding-left: 1rem;
  padding-right: 0.4rem;
  gap: 0.5rem;
}

/* Detail-Popups (Leistungen, Fallbeispiele): nur vertikal scrollen, runder Schließen-Knopf */
.case-study-dialog,
.case-modal-inner {
  overflow-x: hidden;
}

.case-modal-inner {
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.case-study-dialog [data-close-dialog] {
  flex: 0 0 auto;
  width: 44px !important;
  height: 44px !important;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: 1px solid rgba(8, 58, 24, 0.14) !important;
  background: #F7FAF8 !important;
  color: #083A18;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.case-study-dialog [data-close-dialog]:hover {
  background: #E8F3EB !important;
}

.case-study-dialog .btn-creative {
  max-width: 100%;
  white-space: normal;
}

@media (max-width: 640px) {
  .case-study-dialog {
    width: calc(100vw - 24px);
    border-radius: 26px;
  }

  .case-modal-inner {
    padding: 1.35rem 1.15rem 1.5rem;
  }

  .case-modal-inner h2 {
    font-size: 1.4rem !important;
    line-height: 1.2 !important;
  }

  .case-modal-inner strong {
    letter-spacing: 0.04em !important;
  }

  .case-modal-inner > div > div[style*="border-radius: 18px"] {
    padding: 1rem !important;
  }
}

/* Leistungskarten mobil: wandernder Rand (Steuerung per --ring-t / --ring-b aus app.js) */
@media (max-width: 720px) {
  .bento-services-grid.ring-scroll .bento-service-card.is-featured,
  .bento-services-grid.ring-scroll .bento-service-card:hover {
    border-color: rgba(8, 58, 24, 0.08);
  }

  .bento-services-grid.ring-scroll .bento-service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid #083A18;
    border-radius: 22px;
    pointer-events: none;
    z-index: 20;
    clip-path: inset(var(--ring-t, 100%) 0 var(--ring-b, 0%) 0);
  }
}

/* "Starte Wachstum" auf Touch-Geräten: Löwe wird nach rechts geschoben (app.js setzt --slide-x / --slide-p) */
.lion-slide-cta.is-slider,
.lion-slide-cta.is-slider:hover,
.lion-slide-cta.is-slider:focus-visible {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transform: none;
}

.lion-slide-cta.is-slider:not(.is-armed),
.lion-slide-cta.is-slider:not(.is-armed):hover,
.lion-slide-cta.is-slider:not(.is-armed):focus-visible {
  background: linear-gradient(135deg, #052610 0%, #093E1B 100%);
  border-color: #8BF3AC;
  box-shadow: 0 0 22px rgba(114, 238, 154, 0.46),
              inset 0 0 18px rgba(114, 238, 154, 0.22);
}

.lion-slide-cta.is-slider.is-armed {
  background: linear-gradient(135deg, #3A1204 0%, #7C2408 100%);
  border-color: #FF8C61;
  box-shadow: 0 0 28px rgba(255, 90, 31, 0.65),
              inset 0 0 20px rgba(255, 90, 31, 0.32);
}

.lion-slide-cta.is-slider .lion-slide-orb,
.lion-slide-cta.is-slider:hover .lion-slide-orb,
.lion-slide-cta.is-slider:focus-visible .lion-slide-orb {
  transform: translateX(var(--slide-x, 0px));
}

.lion-slide-cta.is-slider:not(.is-armed) .lion-slide-orb {
  background: radial-gradient(circle at 50% 88%, #B8F8CC 0%, #2EC468 42%, #083A18 85%);
  border-color: #DCFCFA;
  box-shadow: 0 0 16px rgba(139, 243, 172, 0.65),
              inset 0 -4px 10px rgba(217, 251, 227, 0.55);
}

.lion-slide-cta.is-slider.is-armed .lion-slide-orb {
  background: radial-gradient(circle at 50% 88%, #FFE2D4 0%, #FF6B35 45%, #8F2504 88%);
  border-color: #FFF0E8;
  box-shadow: 0 0 18px rgba(255, 107, 53, 0.78),
              inset 0 -4px 10px rgba(255, 226, 212, 0.6);
}

.lion-slide-cta.is-slider:not(.is-armed) .lion-slide-orb-img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45)) brightness(1.12);
  transform: none;
}

.lion-slide-cta.is-slider .lion-slide-text--default,
.lion-slide-cta.is-slider:hover .lion-slide-text--default {
  opacity: calc(1 - var(--slide-p, 0) * 1.8);
  transform: translateX(calc(var(--slide-p, 0) * 18px));
}

.lion-slide-cta.is-slider .lion-slide-text--hover,
.lion-slide-cta.is-slider:hover .lion-slide-text--hover {
  opacity: calc(var(--slide-p, 0) * 1.8 - 0.8);
  transform: translateX(calc((1 - var(--slide-p, 0)) * -18px));
}

.lion-slide-cta.is-slider.is-dragging .lion-slide-orb,
.lion-slide-cta.is-slider.is-dragging .lion-slide-text {
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Kleiner Hinweis, dass der Löwe geschoben werden will */
.lion-slide-cta.is-slider:not(.is-dragging):not(.is-armed) .lion-slide-orb {
  animation: lionNudge 3.6s ease-in-out 1.2s infinite;
}

.lion-slide-cta.is-slider.is-hint:not(.is-dragging):not(.is-armed) .lion-slide-orb {
  animation: lionHint 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1;
}

@keyframes lionNudge {
  0%, 72%, 100% { translate: 0 0; }
  80% { translate: 14px 0; }
  88% { translate: 0 0; }
  93% { translate: 6px 0; }
}

@keyframes lionHint {
  0%, 100% { translate: 0 0; }
  45% { translate: 72px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lion-slide-cta.is-slider:not(.is-dragging):not(.is-armed) .lion-slide-orb {
    animation: none;
  }
}

/* Header-CTA "Einfach kontaktieren" bleibt einzeilig; zwischen 1024 und 1279 px WhatsApp nur als Symbol */
.h-10.px-5.rounded-full {
  white-space: nowrap;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .wa-pulse.h-10 {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    gap: 0;
  }

  .wa-pulse.h-10 > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}