html, body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, select, code, pre, kbd, samp, small{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.hero,
.hero-bg,
.section-hero,
.cta-band,
.feature-card,
.pillar-card,
.leistung-card,
.compare-col,
.stat-card,
.blog-card,
.process-step,
.belief-card,
.fit-card,
.sister-card,
.author-hero-card,
.faq-card,
.kpi-banner,
.architecture-hero,
.arch-hero,
.section-hero-card,
.testimonial-card,
.pricing-card,
.signup-card,
.popup-card,
.bg-gradient,
.bg-grad,
[class*="-gradient-bg"]{
  background-image: none !important;
}
.text-gradient{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #cca958 !important;
  color: #cca958 !important;
}

.live-pulse{
  animation: none !important;
  box-shadow: none !important;
  background: #cca958 !important;
  width: 6px !important;
  height: 6px !important;
}

.btn-primary i.fa-arrow-right,
.btn-outline i.fa-arrow-right,
.btn-nav i.fa-arrow-right,
a.cta i.fa-arrow-right,
.expert-card .cta i.fa-arrow-right,
.faq-cta i.fa-arrow-right{
  order: 2;
  margin-left: 6px;
  margin-right: 0;
}
.btn-primary, .btn-outline, .btn-nav, a.cta, .expert-card .cta, .faq-cta{
  display: inline-flex;
  align-items: center;
}

.brand-mark{
  position: relative;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: #2c2c30;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    0 4px 12px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.brand-mark::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.brand-mark .service-icon{
  position: relative;
  width: 70%; height: 70%;
  display: block;
  z-index: 1;
  transform-origin: 50% 50%;
  animation: q-cog-spin 18s linear infinite;
  transition: animation-duration 0.4s ease;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.30));
}
.nav-logo:hover .brand-mark .service-icon{
  animation-duration: 4s;
}
.nav-logo .brand-mark{
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease;
}
.nav-logo:hover .brand-mark{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 14px rgba(0,0,0,0.22);
}
@keyframes q-cog-spin{
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark .service-icon{ animation: none; }
}

.brand-mark .service-icon .body{ fill: #ffffff; }
.brand-mark .service-icon .accent{ fill: #cca958; }
.brand-mark .service-icon .window{ fill: #ffffff; }
.footer-quik .brand-mark .service-icon .body{ fill: #ffffff; }

.on-dark .brand-mark .service-icon .body,
.dark-section .brand-mark .service-icon .body,
[data-theme="dark"] .brand-mark .service-icon .body{
  fill: #ffffff;
}
.on-dark .logo-wordmark .quik-grad,
.on-dark .logo-wordmark .startup-text,
.dark-section .logo-wordmark .quik-grad,
.dark-section .logo-wordmark .startup-text{
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

.startup-text{ font-weight: 600; }

.topbar{
  position: relative;
  z-index: 1100;
  background: #141416;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar a{
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.topbar .pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(204,169,88,0.18);
  border: 1px solid rgba(204,169,88,0.40);
  color: #cca958;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.topbar .text strong{ color: #cca958; font-weight: 700; }
.topbar .arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cca958;
  font-weight: 600;
  white-space: nowrap;
}
.topbar .arrow i{ transition: transform 0.2s; }
.topbar a:hover .arrow i{ transform: translateX(3px); }
@media (max-width: 600px){
  .topbar{
    font-size: 0.82rem;
    padding: 10px 14px;
    line-height: 1.35;
  }
  .topbar a{
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
  }
  .topbar .pill{
    flex-shrink: 0;
    font-size: 0.6rem;
    padding: 3px 8px;
  }
  .topbar .text{
    display: inline !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    color: #ffffff;
    flex: 1 1 auto;
    min-width: 0;
  }
  .topbar .arrow{ display: none; }
}

body.has-topbar .navbar{ top: 56px !important; }
body.has-topbar .navbar.scrolled,
body.has-topbar .navbar.shrink,
body.has-topbar .navbar.is-scrolled{
  top: 12px !important;
}
@media (max-width: 600px){
  body.has-topbar .navbar{ top: 50px !important; }
}

.topbar{ transition: transform 0.3s ease, opacity 0.3s ease; }
body.has-topbar.scrolled .topbar,
body.scrolled-down .topbar{
  transform: translateY(-100%);
  opacity: 0;
}

.btn-primary[style*="cca958"],
.btn-primary[style*="background: #cca958"],
.btn-gold,
a.sgb-cta[style*="cca958"]{
  color: #ffffff !important;
}

[style*="background: #cca958"], [style*="background:#cca958"]{
  color: #ffffff !important;
}
[style*="background: #cca958"] i, [style*="background:#cca958"] i{
  color: #ffffff !important;
}

:root{
  --section-py: 96px;
}
.section-py{ padding: var(--section-py) 0; }
.section-py-sm{ padding: 64px 0; }
.section-head{ margin-bottom: 48px; }
.feature-grid + *, .pillars + *, .arch-grid + *{ margin-top: 48px; }

.page-intro{ padding: 130px 0 60px; }
.page-intro .hero-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 880px;
  margin-left: auto; margin-right: auto;
  text-wrap: balance;
}
.page-intro .hero-subtitle{
  max-width: 680px;
  margin: 18px auto 0;
  text-wrap: pretty;
}

.hero-eyebrow .pill{
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  border: 1px solid rgba(0,0,0,0.06);
}

.hero-eyebrow .pill::before,
.section-eyebrow::before,
.kpi-banner-eyebrow::before{
  display: none !important;
}
.hero-eyebrow .pill{ padding-left: 12px; }

.text-gradient,
.hero-title .text-gradient,
.section-title .text-gradient,
h1 .text-gradient,
h2 .text-gradient{
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important;
  animation: none !important;
}
.text-gradient::after{ display: none !important; }
.text-gradient .word,
.text-gradient .word > span{
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--text-primary) !important;
}

.cta-band{
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.cta-band::after{
  content: '';
  position: absolute;
  left: 56px; right: 56px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.5;
}
.cta-band .particles,
.cta-band .spark{ display: none !important; }
.cta-band .cta-title{
  text-shadow: none !important;
  color: #ffffff !important;
}
.cta-band .cta-sub{ color: rgba(255,255,255,0.72) !important; }
.cta-band .btn-primary{
  background: #ffffff !important;
  color: #141416 !important;
  border: 1px solid #ffffff;
  transition: background 0.2s, color 0.2s;
}
.cta-band .btn-primary:hover{
  background: transparent !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
.cta-band .btn-primary i{ color: #cca958; }
.cta-band .btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}
.cta-band .btn-outline:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.45) !important;
}

.compare-col.good{
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  position: relative;
  overflow: hidden;
}
.compare-col.good::after{
  content: '';
  position: absolute;
  left: 28px; right: 28px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.5;
}

.price-card.featured{
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  position: relative;
  overflow: hidden;
}
.price-card.featured::after{
  content: '';
  position: absolute;
  left: 28px; right: 28px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.5;
}

.chapter-num{
  background: #141416 !important;
}

.manifesto .mega-quote,
.mega-quote{
  background: #141416 !important;
  box-shadow: none !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}
.manifesto .mega-quote::after,
.mega-quote::after{
  content: '';
  position: absolute;
  left: 56px; right: 56px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.5;
}
.mega-quote-text{
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
.mega-quote-text em{
  color: #cca958 !important;
  background: none !important;
  -webkit-text-fill-color: #cca958 !important;
  font-style: normal;
}
.mega-quote-text strong,
.mega-quote-text b{
  color: #ffffff !important;
}
.mega-quote-attribution{
  color: rgba(255,255,255,0.55) !important;
}
.mega-quote-marks{
  color: rgba(204,169,88,0.20) !important;
  background: none !important;
  -webkit-text-fill-color: rgba(204,169,88,0.20) !important;
}
.mega-rockets .label{ color: rgba(255,255,255,0.55) !important; }
.mega-rockets .r-dot{ background: rgba(255,255,255,0.20) !important; }
.mega-rockets .r-dot.live{
  background: #cca958 !important;
  color: #141416 !important;
}

[style*="linear-gradient(135deg, #1d1d1f 0%, #2c2c30 100%)"]{
  background: #141416 !important;
}

.arch-hero{
  position: relative;
  margin: 56px auto 0;
  max-width: 1180px;
  padding: 48px 48px 36px;
  background: #141416;
  border-radius: 28px;
  overflow: hidden;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
.arch-hero::before{
  content: '';
  position: absolute; inset: 0;
  background: transparent;
  pointer-events: none;
}
.arch-hero::after{
  content: '';
  position: absolute;
  left: -10%; right: -10%; top: -40%;
  height: 60%;
  background: transparent;
  pointer-events: none;
}

.arch-hero-status{
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 32px;
  font-size: 0.74rem;
}
.arch-hero-status .left{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.62);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.arch-hero-status .left .status-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6ee7a3;
  box-shadow: 0 0 0 0 rgba(110,231,163,0.6);
  animation: q-pulse 2s ease-out infinite;
}
@keyframes q-pulse{
  0% { box-shadow: 0 0 0 0 rgba(110,231,163,0.55); }
  70% { box-shadow: 0 0 0 8px rgba(110,231,163,0); }
  100% { box-shadow: 0 0 0 0 rgba(110,231,163,0); }
}
.arch-hero-status .right{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.arch-hero-status .right .dot{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
}
.arch-hero-status .right .gold-text{
  color: #cca958;
}

.arch-hero-grid{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}

.arch-hero-tier{
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 28px 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
  isolation: isolate;
  cursor: default;
}
.arch-hero-tier::before{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: rgba(204,169,88,0.4);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.arch-hero-tier::after{
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.arch-hero-tier:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.35);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.55);
}
.arch-hero-tier:hover::before{ opacity: 1; }
.arch-hero-tier:hover::after{ opacity: 1; }
.arch-hero-tier:hover .tier-icon{
  background: rgba(204,169,88,0.22);
  border-color: rgba(204,169,88,0.55);
  transform: scale(1.06) rotate(-3deg);
}
.arch-hero-tier:hover .tier-num{ color: #cca958; }

.arch-hero-tier .tier-num{
  position: absolute;
  top: 22px; right: 22px;
  font-size: 0.70rem;
  font-weight: 700;
  color: rgba(204,169,88,0.55);
  letter-spacing: 0.14em;
  transition: color 0.3s ease;
}
.arch-hero-tier .tier-icon{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: rgba(204,169,88,0.12);
  border: 1px solid rgba(204,169,88,0.25);
  color: #cca958;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 22px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background 0.35s ease, border-color 0.35s ease;
}
.arch-hero-tier .tier-eyebrow{
  font-size: 0.70rem;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.arch-hero-tier h3{
  font-size: 1.42rem;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.arch-hero-tier h3 em{
  color: #cca958;
  font-style: normal;
}
.arch-hero-tier .tier-desc{
  font-size: 0.90rem;
  color: rgba(255,255,255,0.70);
  line-height: 1.55;
  margin-bottom: 20px;
}
.arch-hero-tier .tier-list{
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arch-hero-tier .tier-list li{
  font-size: 0.84rem;
  color: rgba(255,255,255,0.72);
  position: relative;
  padding-left: 20px;
  line-height: 1.5;
  transition: color 0.25s ease, transform 0.25s ease;
}
.arch-hero-tier .tier-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 10px; height: 2px;
  background: #cca958;
  border-radius: 1px;
  transition: width 0.3s cubic-bezier(.2,.8,.2,1);
}
.arch-hero-tier:hover .tier-list li{ color: rgba(255,255,255,0.92); }
.arch-hero-tier:hover .tier-list li::before{ width: 14px; }

.arch-hero-tier .tier-foot{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.arch-hero-tier .tier-foot .pct{
  color: #cca958;
  font-size: 0.78rem;
}

.arch-hero-tier.is-goal{
  background: rgba(204,169,88,0.04);
  border-color: rgba(204,169,88,0.22);
}
.arch-hero-tier.is-goal::before{ opacity: 0.4; }
.arch-hero-tier.is-goal .tier-icon{
  background: #cca958;
  color: #141416;
  border-color: #cca958;
  box-shadow: 0 6px 18px -6px rgba(204,169,88,0.55);
}
.arch-hero-tier.is-goal h3{ color: #ffffff; }
.arch-hero-tier.is-goal h3 em{ color: #cca958; }

.arch-flow{
  position: relative;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 56px;
}
.arch-flow-line{
  position: absolute;
  left: 4px; right: 4px;
  top: 50%; transform: translateY(-50%);
  height: 1px;
  background: rgba(204,169,88,0.45);
}
.arch-flow-arrow{
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #1d1d1f;
  border: 1px solid rgba(204,169,88,0.45);
  color: #cca958;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  animation: q-arrow-glide 3.6s ease-in-out infinite;
}
@keyframes q-arrow-glide{
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50% { transform: translateX(4px); opacity: 1; box-shadow: 0 0 0 3px rgba(204,169,88,0.10); }
}

.arch-hero-meter{
  position: relative; z-index: 1;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.arch-hero-meter .meter-track{
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.arch-hero-meter .meter-fill{
  position: absolute;
  inset: 0;
  width: 0;
  background: #cca958;
  border-radius: 999px;
  box-shadow: 0 0 18px rgba(204,169,88,0.45);
  animation: q-meter-fill 2.8s cubic-bezier(.2,.8,.2,1) 0.2s forwards;
}
@keyframes q-meter-fill{
  to { width: 78%; }
}
.arch-hero-meter .meter-labels{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arch-hero-meter .meter-labels .dim{
  color: rgba(255,255,255,0.32);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 0.78rem;
}

@media (max-width: 980px){
  .arch-hero{ padding: 32px 22px 26px; border-radius: 22px; }
  .arch-hero-status{ font-size: 0.68rem; gap: 12px; flex-wrap: wrap; }
  .arch-hero-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .arch-flow{
    width: auto;
    margin: 0 auto;
    height: 28px;
  }
  .arch-flow-line{
    left: 50%; right: auto;
    top: 4px; bottom: 4px;
    width: 1px; height: auto;
    transform: translateX(-50%);
    background: rgba(204,169,88,0.45);
  }
  .arch-flow-arrow{
    transform: rotate(90deg);
    animation: q-arrow-glide-v 3.6s ease-in-out infinite;
  }
  @keyframes q-arrow-glide-v{
    0%, 100% { transform: rotate(90deg) translateX(0); opacity: 0.85; }
    50% { transform: rotate(90deg) translateX(4px); opacity: 1; }
  }
  .arch-hero-tier{ padding: 22px 20px 18px; }
  .arch-hero-tier h3{ font-size: 1.24rem; }
}
@media (prefers-reduced-motion: reduce){
  .arch-hero-status .left .status-dot,
  .arch-flow-arrow,
  .arch-hero-meter .meter-fill{ animation: none; }
  .arch-hero-meter .meter-fill{ width: 78%; }
}

.expert-network{
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 24px;
  margin-top: 56px;
}
.expert-card{
  position: relative;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.expert-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.06);
  border-color: var(--border-mid);
}
.expert-card.lead{
  background: #141416;
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffffff;
  padding: 36px;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}
.expert-card.lead::after{
  content: '';
  position: absolute;
  left: 36px; right: 36px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.55;
}
.expert-card.lead img{
  width: 84px; height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(204,169,88,0.30);
}
.expert-card.lead h3{ color: #ffffff; font-size: 1.4rem; margin-top: 18px; margin-bottom: 6px; }
.expert-card.lead .role{ color: rgba(255,255,255,0.62); font-size: 0.9rem; margin-bottom: 12px; font-weight: 500; }
.expert-card.lead .bio{ color: rgba(255,255,255,0.78); font-size: 0.95rem; line-height: 1.55; margin-bottom: 18px; }
.expert-card.lead .cta{ color: #cca958; font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px; }
.expert-card.lead .expert-tag{
  display: inline-flex;
  align-items: center;
  background: rgba(204,169,88,0.16);
  border: 1px solid rgba(204,169,88,0.4);
  color: #cca958;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
}

.expert-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.expert-card:not(.lead){
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
}
.expert-card:not(.lead) img{
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  margin-bottom: 14px;
}
.expert-card:not(.lead) h3{ font-size: 1.05rem; margin-bottom: 4px; }
.expert-card:not(.lead) .role{
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.expert-card:not(.lead) .bio{
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.expert-card:not(.lead) .cta{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.expert-card:not(.lead) .cta i{ color: #cca958; }
.expert-card:not(.lead) .expert-tag{
  position: absolute;
  top: 18px; right: 18px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-family: 'Inter', sans-serif;
}

@media (max-width: 960px){
  .expert-network{ grid-template-columns: 1fr; }
  .expert-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .expert-grid{ grid-template-columns: 1fr; }
}

.footer-quik .footer-col h4 + ul + h4{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 18px;
}

.leistungen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.leistung-card{
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.2s;
}
.leistung-card.live{
  border-color: rgba(204,169,88,0.45);
  border-left: 3px solid #cca958;
  padding-left: 30px;
}
.leistung-card{ overflow: hidden; }
.leistung-card.live:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}
.leistung-card.soon{
  background: var(--surface-2);
  opacity: 0.85;
}
.leistung-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.leistung-head .status{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(204,169,88,0.12);
  color: #cca958;
  border: 1px solid rgba(204,169,88,0.3);
}
.leistung-card.soon .leistung-head .status{
  background: rgba(0,0,0,0.04);
  color: var(--text-tertiary);
  border-color: var(--border);
}
.leistung-head .num{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.leistung-icon{
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
  color: #141416;
}
.leistung-card.live .leistung-icon{
  background: #141416;
  color: #fff;
  border-color: #141416;
}
.leistung-card h3{
  font-size: 1.25rem;
  margin-bottom: 10px;
}
.leistung-card > p{
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.leistung-list{
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 8px;
  flex-grow: 1;
}
.leistung-list li{
  position: relative;
  padding-left: 22px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.leistung-list li::before{
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 2px;
  background: #cca958;
  border-radius: 1px;
}
.leistung-cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}
.leistung-cta i{ color: #cca958; }
.leistung-cta.muted{ color: var(--text-tertiary); cursor: default; }
.leistung-cta.muted i{ display: none; }
@media (max-width: 960px){ .leistungen-grid{ grid-template-columns: 1fr; } }

.footer-quik{
  background: #141416 !important;
  border-top: none !important;
  padding: 80px 0 28px !important;
  color: #ffffff;
}
.footer-quik .footer-grid{
  grid-template-columns: 1.6fr 1fr 1fr 1fr !important;
  gap: 56px !important;
}
.footer-quik .footer-tag,
.footer-quik .footer-contact{
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 320px;
  margin-top: 14px;
}
.footer-quik .footer-contact a{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-quik .footer-contact a i{ color: #cca958; }
.footer-quik .footer-contact a:hover{ color: #ffffff; }
.footer-quik .footer-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.footer-quik .footer-cta i{ color: #cca958; }
.footer-quik .footer-cta:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.30);
}
.footer-quik .footer-col h4{
  font-size: 0.74rem !important;
  letter-spacing: 0.10em !important;
  color: rgba(255,255,255,0.45) !important;
  margin-bottom: 18px;
  font-weight: 700;
}
.footer-quik .footer-col ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-quik .footer-col li{ margin: 0 !important; }
.footer-quik .footer-col a{
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.94rem !important;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-quik .footer-col a:hover{ color: #ffffff !important; }
.footer-quik .footer-brand .nav-logo .service-icon .body{ fill: #ffffff !important; }
.footer-quik .footer-brand .nav-logo .service-icon .accent{ fill: #cca958 !important; }
.footer-quik .footer-brand .logo-wordmark .quik-grad{
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
}
.footer-quik .footer-brand .logo-wordmark .startup-text{
  color: rgba(255,255,255,0.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}
.footer-quik .footer-bottom{
  margin-top: 56px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.45) !important;
  opacity: 1 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-quik .footer-bottom .footer-legal{
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-quik .footer-bottom .footer-legal a{
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.footer-quik .footer-bottom .footer-legal a:hover{ color: #ffffff; }
.footer-quik .footer-bottom .sep{ color: rgba(255,255,255,0.25); }

@media (max-width: 880px){
  .footer-quik .footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .footer-quik .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .footer-quik .footer-grid{ grid-template-columns: 1fr !important; }
  .footer-quik .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

.price-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.price-card{
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.price-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-mid);
}
.price-card.featured{
  background: #1d1d1f;
  border-color: transparent;
  color: #fff;
  transform: scale(1.03);
}
.price-card.featured h3,
.price-card.featured .price-amount{ color: #fff; }
.price-card.featured p,
.price-card.featured .price-list li{ color: rgba(255,255,255,0.78); }
.price-card.featured .price-eyebrow{ color: #cca958; }
.price-card.featured .price-list i{ color: #cca958; }
.price-badge{
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(255,255,255,0.94);
  color: #1d1d1f;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(20,20,22,0.10);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  z-index: 3;
}
.price-eyebrow{
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.price-card h3{
  font-size: 1.4rem;
  margin-bottom: 6px;
}
.price-card .price-target{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
  font-weight: 600;
}
.price-card .price-desc{
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 22px;
}
.price-amount{
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-amount small{
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-tertiary);
}
.price-card.featured .price-amount small{ color: rgba(255,255,255,0.6); }
.price-meta{
  font-size: 0.82rem;
  color: var(--text-tertiary);
  margin: 6px 0 22px;
}
.price-list{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.price-list li{
  display: flex;
  gap: 10px;
  font-size: 0.94rem;
  line-height: 1.45;
}
.price-list i{
  color: #cca958;
  margin-top: 4px;
  font-size: 0.78rem;
}
.price-list-head{
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.price-card.featured .price-list-head{ color: rgba(255,255,255,0.5); }

@media (max-width: 960px){
  .price-grid{ grid-template-columns: 1fr; }
  .price-card.featured{ transform: none; }
}

.compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.compare-col{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.compare-col.bad{
  background: var(--surface-2);
}
.compare-col.good{
  background: #1d1d1f;
  color: #fff;
  border-color: transparent;
}
.compare-col h3{
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.compare-col.good h3{ color: #fff; }
.compare-eyebrow{
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}
.compare-col.good .compare-eyebrow{ color: #cca958; }
.compare-list{
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-list li{
  font-size: 0.95rem;
  line-height: 1.5;
  display: flex;
  gap: 10px;
}
.compare-list li::before{
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  margin-top: 9px;
  flex-shrink: 0;
}
.compare-col.good .compare-list li::before{ background: #cca958; }
@media (max-width: 800px){
  .compare-grid{ grid-template-columns: 1fr; }
}

.form-card{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.page-intro .form-card,
.hero .form-card{ text-align: left; }
.form-card *{ text-align: left; }
.form-card div[style*="text-align: center"]{ text-align: center !important; }
.form-card label{
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.form-card input[type=text],
.form-card input[type=email],
.form-card textarea{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  margin-bottom: 16px;
  transition: var(--transition);
}
.form-card input:focus,
.form-card textarea:focus{
  outline: none;
  border-color: #1d1d1f;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.form-card textarea{ resize: vertical; min-height: 120px; }
.form-checkbox{
  display: flex;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 22px;
  line-height: 1.5;
}
.form-card .btn-primary{ width: 100%; justify-content: center; }

.arch-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.arch-card{
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: var(--transition);
}
.arch-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-mid);
}
.arch-num{
  position: absolute;
  top: 24px; right: 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.arch-card .arch-icon{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--grad-grey-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 18px;
}
.arch-card h3{
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.arch-step-eyebrow{
  display: inline-block;
  margin-left: 12px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #cca958;
  vertical-align: middle;
}
.step .step-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-bottom: 14px;
}

.step:hover .step-num{
  background: #ffffff !important;
  color: var(--text-primary) !important;
  transform: scale(1.04) !important;
  box-shadow: 0 4px 14px -4px rgba(204,169,88,0.30);
}
.step .step-title{
  display: block;
  margin-top: 6px;
  clear: both;
}
.arch-card p{
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 14px;
}
.arch-card ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arch-card ul li{
  font-size: 0.88rem;
  color: var(--text-secondary);
  display: flex;
  gap: 8px;
}
.arch-card ul li::before{
  content: '✓';
  color: #cca958;
  font-weight: 700;
}
@media (max-width: 880px){
  .arch-grid{ grid-template-columns: 1fr; }
}

.timeline-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.timeline-item{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
}
.timeline-when{
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cca958;
  margin-bottom: 8px;
}
.timeline-item h4{
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.timeline-item p{
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 880px){
  .timeline-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .timeline-grid{ grid-template-columns: 1fr; }
}

.hero-portrait{
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.hero-portrait img{
  width: 220px; height: 220px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: var(--shadow-lg);
}

.stat-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 48px 0;
}
.stat-trio .stat{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}
.stat-trio .stat-num{
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #1d1d1f;
}
.stat-trio .stat-label{
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 760px){
  .stat-trio{ grid-template-columns: 1fr; }
}

.hero-image{
  margin-top: 56px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.hero-image img{ display: block; width: 100%; height: auto; }

.split-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 56px;
}
.split-grid img{
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split-grid .split-text h2{
  font-size: 2.1rem;
  margin-bottom: 18px;
}
@media (max-width: 880px){
  .split-grid{ grid-template-columns: 1fr; gap: 32px; }
}

.chapter-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.chapter-card{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  gap: 18px;
  transition: var(--transition);
}
.chapter-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.chapter-num{
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: #1d1d1f;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}
.chapter-card h3{
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.chapter-card p{
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
@media (max-width: 760px){
  .chapter-grid{ grid-template-columns: 1fr; }
}

.story-item:first-child::before{ display: flex; }
.story-item h3{
  font-size: 1.3rem;
  margin-bottom: 12px;
  color: #1d1d1f;
}
.story-item p{
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 12px 0;
}
.story-item p:last-child{ margin-bottom: 0; }

.beliefs-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.belief-card{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: var(--transition);
}
.belief-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.belief-num{
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #cca958;
  margin-bottom: 8px;
}
.belief-card h3{
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.belief-card p{
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 760px){
  .beliefs-grid{ grid-template-columns: 1fr; }
}

.perks-band{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  margin: 40px auto;
  max-width: 920px;
}
.perks-band .perk{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.perks-band .perk i{ color: #cca958; }

.contact-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
@media (max-width: 880px){
  .contact-split{ grid-template-columns: 1fr; }
}

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--i, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

.btn-primary,
.btn-outline,
.btn-nav{
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary:hover,
.btn-nav:hover{
  background: #000 !important;
  color: #ffffff !important;
}
.btn-outline:hover{
  background: rgba(0,0,0,0.08) !important;
  color: var(--text-primary) !important;
}

.cta-band .btn-primary,
.cta-band .btn-outline{
  background: #ffffff !important;
  color: #141416 !important;
  border-color: #ffffff !important;
}
.cta-band .btn-primary:hover,
.cta-band .btn-outline:hover{
  background: #cca958 !important;
  color: #141416 !important;
  border-color: #cca958 !important;
}
.btn-primary::after,
.btn-outline::after{
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.btn-primary:hover,
.btn-outline:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(204,169,88,0.35), 0 4px 12px -4px rgba(0,0,0,0.25);
}
.btn-primary:hover::after,
.btn-outline:hover::after{ opacity: 1; }
.btn-primary:active,
.btn-outline:active{ transform: translateY(0); }
.btn-primary{ position: relative; }
.btn-primary i.fa-arrow-right{
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover i.fa-arrow-right,
.btn-outline:hover i.fa-arrow-right{
  transform: translateX(4px);
}

@keyframes q-cta-pulse{
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,169,88,0.45); }
  60% { box-shadow: 0 0 0 14px rgba(204,169,88,0); }
}
.btn-primary[data-magnetic]{
  animation: q-cta-pulse 3.6s ease-out infinite;
  animation-delay: 1.2s;
}
.btn-primary[data-magnetic]:hover{ animation: none; }
@media (prefers-reduced-motion: reduce){
  .btn-primary[data-magnetic]{ animation: none; }
}

.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="url"],
.form-card select,
.form-card textarea,
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="url"],
.form-row select,
.form-row textarea,
input[type="text"]:not(.search-input):not(.q-bot-hint),
input[type="email"],
input[type="tel"],
textarea{
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus{
  outline: none;
  border-color: #cca958 !important;
  box-shadow: 0 0 0 4px rgba(204,169,88,0.12);
  background: rgba(204,169,88,0.02);
}
.form-row label,
.form-card label{
  transition: color 0.2s ease;
}
.form-row > div:focus-within label,
.form-card > div:focus-within label{
  color: #cca958;
}

.article-card,
.blog-card{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
  overflow: hidden;
}
.article-card .card-img,
.article-card .blog-cover,
.blog-card .card-img,
.blog-card .blog-cover{
  overflow: hidden;
  position: relative;
}
.article-card .card-img img,
.article-card .blog-cover img,
.blog-card .card-img img,
.blog-card .blog-cover img{
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.4s ease;
}
.article-card:hover,
.blog-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px -22px rgba(0,0,0,0.45);
  border-color: rgba(204,169,88,0.30);
}
.article-card:hover .card-img img,
.article-card:hover .blog-cover img,
.blog-card:hover .card-img img,
.blog-card:hover .blog-cover img{
  transform: scale(1.06);
  filter: brightness(1.04);
}
.article-card .card-title,
.blog-card .card-title{
  transition: color 0.25s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card:hover .card-title,
.blog-card:hover .card-title{ color: #cca958; }
.article-card .card-cta,
.blog-card .card-cta{
  transition: gap 0.3s ease, color 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.article-card:hover .card-cta,
.blog-card:hover .card-cta{ gap: 12px; color: #cca958; }

.feature-card,
.pillar-card,
.compare-col{
  position: relative;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.feature-card::before,
.pillar-card::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.feature-card:hover,
.pillar-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 20px 40px -18px rgba(0,0,0,0.35);
}
.feature-card:hover::before,
.pillar-card:hover::before{ opacity: 1; }
.feature-card .feature-icon,
.pillar-card .pillar-icon{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background 0.3s ease, color 0.3s ease;
}
.feature-card:hover .feature-icon,
.pillar-card:hover .pillar-icon{
  transform: scale(1.08) rotate(-4deg);
}

.compare-grid:hover .compare-col{ transition: opacity 0.35s ease; }
.compare-grid:hover .compare-col:not(:hover){ opacity: 0.55; }

.leistung-card{
  position: relative;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.leistung-card.live:hover{
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -20px rgba(204,169,88,0.30);
  border-color: rgba(204,169,88,0.45);
}
.leistung-card.soon{
  cursor: not-allowed;
  opacity: 0.78;
}
.leistung-card.soon:hover{
  opacity: 0.92;
  transform: translateY(-2px);
}
.leistung-card .leistung-icon{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
.leistung-card:hover .leistung-icon{
  transform: rotate(-6deg) scale(1.06);
}

details{
  transition: background 0.3s ease, border-color 0.3s ease;
}
details summary{
  cursor: pointer;
  position: relative;
  transition: color 0.25s ease;
  list-style: none;
}
details summary::-webkit-details-marker{ display: none; }

details summary > i.fa-plus,
details summary > i.fa-chevron-down{ display: none !important; }
.article-overview details summary > i.fa-plus{ display: flex !important; }

details summary::after{
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: #cca958;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  line-height: 1;
}
.article-overview details summary::after{ display: none; }
details[open] summary::after{
  transform: translateY(-50%) rotate(45deg);
}
details[open]:not(.article-overview details){
  background: rgba(204,169,88,0.04);
  border-color: rgba(204,169,88,0.20);
}
details:hover summary{ color: #cca958; }

.filter-pill,
.cat-pill{
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.filter-pill:hover,
.cat-pill:hover{
  transform: translateY(-1px);
}

.stat-card,
.stat-block{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease;
}
.stat-card:hover,
.stat-block:hover{
  transform: translateY(-3px);
  border-color: rgba(204,169,88,0.35);
}
.stat-num{
  transition: color 0.3s ease;
}
.stat-card:hover .stat-num{ color: #cca958; }

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

.brand-letters .letter{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), color 0.3s ease;
}
.brand-letters .letter:hover{
  transform: translateY(-6px);
  color: #cca958;
}

.author-card,
.team-card{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
}
.author-card .avatar,
.team-card .avatar{
  overflow: hidden;
  position: relative;
}
.author-card .avatar img,
.team-card .avatar img{
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.author-card:hover .avatar img,
.team-card:hover .avatar img{
  transform: scale(1.08);
}

.mobile-sticky-cta{ display: none; }

.page-intro:has(.author-hero-card){
  padding-top: 120px;
  padding-bottom: 56px;
  background: #fafafa;
  position: relative;
}
.page-intro:has(.author-hero-card)::before{
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}
.page-intro:has(.author-hero-card) .page-intro-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-intro:has(.author-hero-card) .hero-eyebrow{ order: 1; margin-bottom: 28px; }
.author-hero-card{ order: 2; display: contents; }
.page-intro:has(.author-hero-card) .hero-title{ order: 4; margin-top: 6px; }
.page-intro:has(.author-hero-card) .hero-subtitle{
  order: 6;
  max-width: 640px;
  margin-top: 18px;
  margin-bottom: 0;
}

.author-avatar-frame{
  order: 2;
  position: relative;
  width: 132px; height: 132px;
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.author-avatar-frame .author-avatar-xl{
  width: 124px !important; height: 124px !important;
  border-radius: 50% !important;
  border: 4px solid #fff !important;
  box-shadow: 0 0 0 1.5px #cca958, 0 18px 36px -12px rgba(0,0,0,0.20) !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease;
}
.author-avatar-frame:hover .author-avatar-xl{
  transform: scale(1.04);
  box-shadow: 0 0 0 2px #cca958, 0 22px 44px -10px rgba(204,169,88,0.30) !important;
}
.author-avatar-pulse{
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(204,169,88,0.35);
  opacity: 0;
  animation: q-avatar-pulse 3s ease-out infinite;
  pointer-events: none;
}
@keyframes q-avatar-pulse{
  0%   { transform: scale(0.92); opacity: 0; }
  40%  { opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .author-avatar-pulse{ animation: none; }
}

.page-intro:has(.author-hero-card) .role{
  order: 3;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #cca958;
  font-weight: 700;
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.page-intro:has(.author-hero-card) .role::before,
.page-intro:has(.author-hero-card) .role::after{
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: rgba(204,169,88,0.4);
}

.author-social{
  order: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
  background: #fff;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.author-social i{
  color: #0A66C2;
  font-size: 1rem;
}
.author-social:hover{
  transform: translateY(-2px);
  border-color: #0A66C2;
  color: #0A66C2;
  box-shadow: 0 10px 22px -10px rgba(10,102,194,0.30);
}

.page-intro:has(.author-hero-card) .author-stats{
  order: 7;
  margin: 38px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border);
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
.page-intro:has(.author-hero-card) .author-stats .stat{
  flex: 1 1 0;
  position: relative;
  padding: 6px 22px;
  text-align: center;
  transition: transform 0.3s ease;
}
.page-intro:has(.author-hero-card) .author-stats .stat:hover{ transform: translateY(-2px); }
.page-intro:has(.author-hero-card) .author-stats .stat:not(:last-child)::after{
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 36px;
  background: var(--border);
}
.page-intro:has(.author-hero-card) .author-stats .stat strong{
  display: block;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.page-intro:has(.author-hero-card) .author-stats .stat span{
  font-size: 0.74rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
}

@media (max-width: 600px){
  .page-intro:has(.author-hero-card) .author-stats{
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
  }
  .page-intro:has(.author-hero-card) .author-stats .stat:not(:last-child)::after{
    width: 36px;
    height: 1px;
    right: 50%;
    top: auto; bottom: -9px;
    transform: translateX(50%);
  }
  .author-avatar-frame{ width: 104px; height: 104px; }
  .author-avatar-frame .author-avatar-xl{
    width: 96px !important; height: 96px !important;
  }
}

html{ scroll-behavior: smooth; }

.hero-title{
  opacity: 0;
  transform: translateY(12px);
  animation: q-title-in 0.85s cubic-bezier(.2,.8,.2,1) 0.15s forwards;
}
@keyframes q-title-in{
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-title{ opacity: 1; transform: none; animation: none; }
}

.section-eyebrow,
.hero-eyebrow{
  display: inline-flex;
  align-items: center;
}
.reveal .section-eyebrow,
.reveal .hero-eyebrow{
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible .section-eyebrow,
.reveal.is-visible .hero-eyebrow{
  opacity: 1;
  transform: none;
}

.hero-subtitle,
.page-intro .hero-subtitle{
  opacity: 0;
  transform: translateY(8px);
  animation: q-subtitle-in 0.8s cubic-bezier(.2,.8,.2,1) 0.7s forwards;
}
@keyframes q-subtitle-in{
  to { opacity: 1; transform: none; }
}

.hero-cta-row > *{
  opacity: 0;
  animation: q-cta-fade-in 0.6s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-cta-row > *:nth-child(1){ animation-delay: 1.0s; }
.hero-cta-row > *:nth-child(2){ animation-delay: 1.15s; }
@keyframes q-cta-fade-in{
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

form .btn-primary,
form button[type="submit"],
.form-card .btn-primary{
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

button,
.btn-primary, .btn-outline, .btn-nav,
.btn-ghost, .btn-gold,
a.btn-primary, a.btn-outline, a.btn-nav,
a.cta, a.ac, a.sgb-cta,
.leistung-cta, .footer-cta,
.qg-popup-submit{
  opacity: 1 !important;
  visibility: visible !important;
}
button:hover,
.btn-primary:hover, .btn-outline:hover, .btn-nav:hover,
.btn-ghost:hover, .btn-gold:hover,
a.btn-primary:hover, a.btn-outline:hover, a.btn-nav:hover,
a.cta:hover, a.ac:hover, a.sgb-cta:hover,
.leistung-cta:hover, .footer-cta:hover,
.qg-popup-submit:hover{
  opacity: 1 !important;
  visibility: visible !important;
}

.btn-primary,
.btn-primary:hover,
a.btn-primary,
a.btn-primary:hover{

  background-color: #1d1d1f;
  color: #ffffff;
}
.cta-band .btn-primary,
.cta-band .btn-primary:hover{

  background-color: #ffffff;
  color: #141416;
}
.cta-band .btn-primary:hover{
  background-color: #cca958 !important;
}

.qg-popup .qg-popup-submit,
.qg-popup .qg-popup-submit:hover{
  background-color: #1d1d1f !important;
  color: #ffffff !important;
}
.qg-popup .qg-popup-submit:hover{
  background-color: #000 !important;
}
@media (prefers-reduced-motion: reduce){
  .hero-subtitle,
  .hero-cta-row > *{ opacity: 1; transform: none; animation: none; }
}

.section-title{
  position: relative;
  display: block;
}
.reveal.is-visible .section-title::after,
.section-title::after{
  content: none !important;
  display: none !important;
}

.compare-col.good .compare-eyebrow,
.compare-col.b .compare-eyebrow,
.compare-col.dark .compare-eyebrow{
  color: rgba(255,255,255,0.90) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.compare-col.bad .compare-eyebrow,
.compare-col.a .compare-eyebrow{
  color: #86868b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.section-head{
  text-align: center;
}
.section-head .section-eyebrow,
.section-head .hero-eyebrow{
  display: block;
  margin: 0 auto 14px;
  width: max-content;
  max-width: 100%;
}
.section-head .section-title{ display: block; }
.section-head .section-sub{ display: block; }

.feature-card,
.pillar-card,
.article-card,
.blog-card,
.leistung-card{
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s ease, border-color 0.35s ease;
}

.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: #cca958;
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1100;
  pointer-events: none;
}

.saeulen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}
.saeule-card{
  position: relative;
  background: #ffffff;
  border: none !important;
  border-radius: 28px;
  padding: 28px 28px 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 16px 40px -16px rgba(0,0,0,0.10);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.saeule-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 28px 60px -20px rgba(0,0,0,0.16);
}
.saeule-num{
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.saeule-visual{
  background: rgba(0,0,0,0.02);
  border-radius: 20px;
  padding: 18px;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.saeule-visual svg{
  width: 100%;
  height: 100%;
  max-height: 180px;
}
.saeule-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.saeule-tag{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  width: fit-content;
}
.saeule-card h3{
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.saeule-card p{
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 980px){
  .saeulen-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .saeule-visual{ height: 180px; }
}

.btn-nav{
  padding: 9px 18px !important;
  font-size: 0.86rem !important;
}
.navbar.scrolled .btn-nav{
  padding: 8px 16px !important;
  font-size: 0.82rem !important;
}

.hebel-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.hebel-card{
  position: relative;
  grid-column: span 3;
  background: #ffffff;
  border: none !important;
  border-radius: 28px;
  padding: 32px 32px 32px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 16px 40px -16px rgba(0,0,0,0.10);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.hebel-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 28px 60px -20px rgba(0,0,0,0.16);
}
.hebel-featured{ grid-column: span 6; }
.hebel-featured .hebel-visual{
  background: rgba(0,0,0,0.02);
  border-radius: 18px;
  padding: 24px;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hebel-featured .hebel-visual svg{
  max-width: 100%;
  height: 100%;
  color: var(--text-primary);
}
.hebel-visual-sm{
  width: 120px;
  height: 60px;
  margin: 0;
  color: var(--text-primary);
}
.hebel-visual-sm svg{ width: 100%; height: 100%; }
.hebel-num{
  position: absolute;
  top: 24px;
  right: 28px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.hebel-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hebel-tag{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  width: fit-content;
}
.hebel-card h3{
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0;
}
.hebel-featured h3{ font-size: 1.6rem; letter-spacing: -0.022em; }
.hebel-card p{
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.hebel-dark{
  background: #141416;
  color: #ffffff;
}
.hebel-dark .hebel-visual{
  background: rgba(255,255,255,0.04);
}
.hebel-dark .hebel-visual svg{ color: #ffffff; }
.hebel-dark .hebel-num,
.hebel-dark .hebel-tag{
  color: rgba(255,255,255,0.55);
}
.hebel-dark h3{ color: #ffffff; }
.hebel-dark p{ color: rgba(255,255,255,0.72); }

@media (max-width: 980px){
  .hebel-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .hebel-card{ grid-column: span 1 !important; }
  .hebel-featured{ grid-column: span 2 !important; }
}
@media (max-width: 640px){
  .hebel-grid{ grid-template-columns: 1fr; gap: 18px; }
  .hebel-card,
  .hebel-featured{ grid-column: span 1 !important; padding: 26px 22px; }
  .hebel-featured .hebel-visual{ height: 140px; }
  .hebel-card h3{ font-size: 1.18rem; }
  .hebel-featured h3{ font-size: 1.32rem; }
}

.experte-fit-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.experte-fit-grid .fit-card{
  border: none !important;
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 32px 30px 30px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 14px 36px -16px rgba(0,0,0,0.10) !important;
  grid-column: span 2;
}
.experte-fit-grid .fit-card.big{
  grid-column: span 3;
  padding: 36px 34px 34px !important;
}
.experte-fit-grid .fit-card::before{ display: none !important; }
.experte-fit-grid .fit-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 48px -18px rgba(0,0,0,0.16) !important;
}
.experte-fit-grid .fit-eyebrow{
  background: rgba(0,0,0,0.04) !important;
  color: var(--text-primary) !important;
  border-radius: 999px;
}
.experte-fit-grid .fit-eyebrow i{
  color: var(--text-secondary) !important;
}
@media (max-width: 880px){
  .experte-fit-grid{ grid-template-columns: 1fr; gap: 16px; }
  .experte-fit-grid .fit-card,
  .experte-fit-grid .fit-card.big{ grid-column: span 1; }
}

.slot-list{
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 14px 36px -16px rgba(0,0,0,0.08) !important;
}
.slot-row{
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}
.slot-domain i{
  color: var(--text-secondary) !important;
}
.slot-progress span{
  border-color: rgba(0,0,0,0.20) !important;
}
.slot-progress span.taken{
  background: var(--text-primary) !important;
  border-color: var(--text-primary) !important;
}
.slot-status.full{ color: var(--text-tertiary) !important; }
.slot-status.open{ color: #16803c !important; }

.hero-slot-widget{
  max-width: 540px;
  margin: 56px auto 0;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 12px 36px -16px rgba(0,0,0,0.12);
}
.hsw-head{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 14px;
}
.hsw-pulse{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6ee7a3;
  box-shadow: 0 0 0 0 rgba(110,231,163,0.6);
  animation: q-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
.hsw-title{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.hsw-grid{ display: flex; flex-direction: column; gap: 10px; }
.hsw-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
  font-size: 0.92rem;
  font-weight: 500;
}
.hsw-label{ color: var(--text-primary); }
.hsw-dots{ display: inline-flex; gap: 6px; }
.hsw-dots span{
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--text-primary);
  background: transparent;
}
.hsw-dots span.taken{ background: var(--text-primary); }
.hsw-status{
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hsw-status.open{ color: #16803c; }
.hsw-status.full{ color: var(--text-tertiary); }

.stats-trio{
  gap: 28px !important;
}
.stat-card .stat-visual{
  width: 80px; height: 80px;
  margin: 0 auto 16px;
  color: var(--text-primary);
  opacity: 0.85;
}
.stat-card .stat-visual svg{
  width: 100%; height: 100%;
}
.stats-trio .stat-num{
  color: var(--text-primary) !important;
  font-size: 2rem !important;
}

.ecosystem-diagram{
  max-width: 980px;
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}
.eco-layer{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 22px;
  padding: 24px 28px;
  box-shadow: 0 8px 28px -16px rgba(0,0,0,0.08);
}
.eco-layer-label{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  text-align: center;
}
.eco-nodes{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.eco-node{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.05);
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.eco-node:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.12);
}
.eco-node i{
  font-size: 1.1rem;
  color: var(--text-primary);
}
.eco-node span{
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
}
.eco-flow{
  display: flex;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  margin: -4px 0;
}
.eco-brands{
  background: #141416;
  border-color: rgba(255,255,255,0.06);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 28px;
}
.eco-brand-card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px 22px;
  color: #fff;
  transition: transform 0.3s var(--ease-out), background 0.3s ease;
}
.eco-brand-card:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,0.05);
}
.eco-brand-tag{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 8px;
}
.eco-brand-name{
  font-size: 1.34rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.eco-brand-name strong{ font-weight: 700; }
.eco-brand-meta{
  font-size: 0.84rem;
  color: rgba(255,255,255,0.55);
}
.eco-output{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.eco-output-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
}
.eco-output-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.14);
}
.eco-output-card i{
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.eco-output-card strong{
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
}
.eco-output-card span{
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.ecosystem-narrative{
  max-width: 720px;
  margin: 48px auto 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-secondary);
}
.ecosystem-narrative strong{
  color: var(--text-primary);
  font-weight: 600;
}

@media (max-width: 880px){
  .eco-nodes{ grid-template-columns: repeat(3, 1fr); }
  .eco-brands{ grid-template-columns: 1fr; }
  .eco-output{ grid-template-columns: 1fr; }
  .hero-slot-widget{ padding: 18px 18px; }
  .hsw-row{ grid-template-columns: 1fr auto; }
  .hsw-dots{ grid-column: 2; grid-row: 1; }
  .hsw-status{ grid-column: 1 / -1; font-size: 0.66rem; }
}

.features-grid{ gap: 28px !important; }
.pillars-grid{ gap: 28px !important; }
.leistungen-grid{ gap: 28px !important; }
.leist-process{ gap: 24px !important; }
.beliefs-grid{ gap: 28px !important; }
.compare-grid{ gap: 28px !important; }

.section-eyebrow,
.hero-eyebrow{
  color: var(--text-tertiary) !important;
  margin-bottom: 16px !important;
}
.hero-eyebrow .pill{
  color: var(--text-primary) !important;
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.section-eyebrow{ color: var(--text-tertiary) !important; }

.stat-num,
.trust-cell strong,
.stats-trio .stat-num{
  color: var(--text-primary) !important;
}

.experte-trust-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 640px;
  margin: 28px auto 0;
  padding: 20px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(20,20,22,0.08);
  border-radius: 0;
  box-shadow: none;
}
.experte-trust-strip .trust-cell{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  position: relative;
}
.experte-trust-strip .trust-cell:not(:last-child)::after{
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 28px;
  background: var(--border);
}
.experte-trust-strip .trust-cell strong{
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.experte-trust-strip .trust-cell span{
  font-size: 0.70rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  line-height: 1.25;
}
@media (max-width: 720px){
  .experte-trust-strip{ grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 18px; }
  .experte-trust-strip .trust-cell:not(:last-child)::after{ display: none; }
}

.slot-list{
  max-width: 880px;
  margin: 56px auto 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.slot-row{
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease, padding-left 0.25s cubic-bezier(.2,.8,.2,1);
}
.slot-row:last-child{ border-bottom: none; }
.slot-row.open:hover{
  background: rgba(204,169,88,0.04);
  padding-left: 28px;
}
.slot-row.full{ opacity: 0.65; }
.slot-domain{
  font-weight: 600;
  font-size: 0.96rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}
.slot-domain i{
  color: #cca958;
  font-size: 1rem;
  width: 24px;
  text-align: center;
}
.slot-progress{
  display: inline-flex;
  gap: 8px;
}
.slot-progress span{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #cca958;
  background: transparent;
  display: inline-block;
  transition: background 0.3s ease;
}
.slot-progress span.taken{
  background: #cca958;
}
.slot-status{
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  white-space: nowrap;
}
.slot-status.full{ color: var(--text-tertiary); }
.slot-status.open{ color: #cca958; }
@media (max-width: 720px){
  .slot-row{
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
  }
  .slot-progress{ grid-column: 2; grid-row: 1; }
  .slot-status{ grid-column: 1 / -1; text-align: left; font-size: 0.72rem; }
}

.experte-fit-grid-legacy-removed{ display: none; }
.fit-card{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px 24px 22px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}
.fit-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #cca958;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.fit-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,0.18);
}
.fit-card:hover::before{ transform: scaleY(1); }

.fit-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cca958;
  background: rgba(204,169,88,0.08);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.fit-card h3{
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.fit-card.big h3{ font-size: 1.32rem; }
.fit-card p{
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 720px){
  .experte-fit-grid{ grid-template-columns: 1fr; }
  .fit-card.big, .fit-card{ grid-column: span 1 !important; }
}

.stats-trio{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stats-trio .stat-card{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.stats-trio .stat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.14);
}
.stats-trio .stat-num{
  font-size: 2.4rem;
  font-weight: 700;
  color: #cca958;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.stats-trio .stat-label{
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: 10px;
}
.stats-trio .stat-meta{
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
@media (max-width: 720px){
  .stats-trio{ grid-template-columns: 1fr; }
}

.leistungen-trust-strip{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 920px;
  margin: 48px auto 0;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 32px -18px rgba(0,0,0,0.10);
}
.trust-cell{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  position: relative;
}
.trust-cell:not(:last-child)::after{
  content: '';
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 28px;
  background: var(--border);
}
.trust-cell strong{
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.trust-cell span{
  font-size: 0.70rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  line-height: 1.25;
}
@media (max-width: 720px){
  .leistungen-trust-strip{ grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 18px; }
  .trust-cell:not(:last-child)::after{ display: none; }
}

.leistung-card .leistung-price{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.leistung-card .price-from{
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-weight: 600;
}
.leistung-card .price-amount{
  font-size: 1.5rem;
  font-weight: 700;
  color: #cca958;
  letter-spacing: -0.015em;
}
.leistung-card .price-meta{
  font-size: 0.74rem;
  color: var(--text-tertiary);
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.leist-process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
  position: relative;
}
.leist-process::before{
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  top: 36px;
  height: 1px;
  background: rgba(204,169,88,0.4);
  z-index: 0;
}
.process-step{
  position: relative;
  z-index: 1;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px 20px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.process-step:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.18);
}
.process-step .step-num{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: #ffffff;
  border: 1.5px solid #cca958;
  color: #cca958;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 50%;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  box-shadow: 0 0 0 4px var(--bg-soft);
}
.process-step h3{
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.process-step p{
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.process-step .step-meta{
  display: inline-block;
  font-size: 0.70rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cca958;
  font-weight: 700;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  width: 100%;
}
@media (max-width: 980px){
  .leist-process{ grid-template-columns: repeat(2, 1fr); }
  .leist-process::before{ display: none; }
}
@media (max-width: 560px){
  .leist-process{ grid-template-columns: 1fr; gap: 14px; }
}

.leist-compare{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.compare-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.compare-col-bad,
.compare-col-good{
  padding: 22px 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #ffffff;
}
.compare-col-bad{
  opacity: 0.78;
}
.compare-col-good{
  border-color: rgba(204,169,88,0.28);
  background: #ffffff;
}
.cmp-tag{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.compare-col-bad .cmp-tag{
  background: rgba(0,0,0,0.05);
  color: var(--text-tertiary);
}
.compare-col-good .cmp-tag{
  background: rgba(204,169,88,0.10);
  color: #cca958;
}
.compare-col-bad p,
.compare-col-good p{
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
.compare-col-good p{ color: var(--text-primary); }
@media (max-width: 720px){
  .compare-row{ grid-template-columns: 1fr; }
}

.faq-list details{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 56px 18px 22px;
  margin-bottom: 10px;
  position: relative;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.faq-list details summary{
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
}
.faq-list details summary::-webkit-details-marker{ display: none; }
.faq-list details p{
  margin: 12px 0 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.6;
}

.mobile-nav{
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding-top: 96px !important;
}
.mobile-nav > a{
  font-size: 1.45rem !important;
  font-weight: 600;
  padding: 14px 4px !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.25s ease, padding-left 0.3s cubic-bezier(.2,.8,.2,1);
}
.mobile-nav > a::after{
  content: '\2192';
  font-size: 1rem;
  color: var(--text-tertiary);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), color 0.25s ease;
}
.mobile-nav > a:active,
.mobile-nav > a:hover{
  color: #cca958;
  padding-left: 8px !important;
}
.mobile-nav > a:active::after,
.mobile-nav > a:hover::after{
  color: #cca958;
  transform: translateX(4px);
}

@media (max-width: 600px){
  .hamburger{
    z-index: 1101 !important;
    position: relative;
  }
}

:root{
  --section-py: 64px;
}
.section-py{ padding-top: 64px; padding-bottom: 64px; }
.section-head{ margin-bottom: 36px; }
.page-intro{ padding: 110px 0 44px; }
.page-intro + .section-py{ padding-top: 16px; }
.page-intro + .section-py .article-grid,
.page-intro + .section-py .leistungen-grid{ margin-top: 24px; }

.section-head{ max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }

.article-author-card .actions{ gap: 10px; }
.article-author-card .actions .ac.outline{ display: none; }

.article-author-card{
  padding: 26px 30px !important;
  margin-top: 48px !important;
  display: grid !important;
  grid-template-columns: 88px 1fr auto !important;
  gap: 22px !important;
  align-items: center !important;
}
.article-author-card img{
  width: 88px !important; height: 88px !important;
  border-width: 2px !important;
  margin: 0 !important;
}
.article-author-card .info{
  min-width: 0;
}
.article-author-card .label{
  display: inline-block !important;
  margin-bottom: 6px !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.16em !important;
}
.article-author-card::after{
  left: 30px !important; right: 30px !important;
}
.article-author-card h3{ font-size: 1.22rem !important; margin-bottom: 2px !important; line-height: 1.2 !important; }
.article-author-card .role{ margin-bottom: 8px !important; font-size: 0.82rem !important; }
.article-author-card p{ margin-bottom: 10px !important; font-size: 0.9rem !important; line-height: 1.5 !important; }
.article-author-card .meta-row{ gap: 14px !important; font-size: 0.72rem !important; margin-top: 2px !important; }
.article-author-card .actions{
  min-width: auto !important;
  align-self: center !important;
}
.article-author-card .actions .ac{
  padding: 10px 18px !important;
  font-size: 0.84rem !important;
  white-space: nowrap;
}

@media (max-width: 720px){
  .article-author-card{
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .article-author-card img{ width: 64px !important; height: 64px !important; }
  .article-author-card .actions .ac{ width: 100%; }
}

.article-toc{
  padding: 14px 22px 18px !important;
  margin: 0 0 32px !important;
}
.article-toc h2{
  margin: 0 0 10px !important;
  font-size: 0.72rem !important;
}
.article-toc li{ margin-bottom: 4px !important; }
.article-toc li::before{ top: 1px !important; }

@media (max-width: 720px){
  .article-author-card{
    padding: 22px !important;
    grid-template-columns: 1fr !important;
    text-align: left;
  }
  .article-author-card img{ width: 72px !important; height: 72px !important; }
}

@media (max-width: 720px){
  .section-py{ padding-top: 48px; padding-bottom: 48px; }
  .page-intro{ padding: 90px 0 32px; }
}

.qg-popup{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.qg-popup[data-open="1"]{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.qg-popup-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 17, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.qg-popup-card{
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 22px;
  width: 100%;
  max-width: 520px;
  padding: 36px 36px 30px;
  box-shadow: 0 32px 80px -24px rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.06);
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1), opacity 0.45s ease;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.qg-popup[data-open="1"] .qg-popup-card{
  transform: none;
  opacity: 1;
}
.qg-popup-close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-tertiary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.qg-popup-close:hover{
  color: var(--text-primary);
  border-color: var(--text-tertiary);
  transform: rotate(90deg);
}
.qg-popup-head{ margin-bottom: 24px; }
.qg-popup-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #cca958;
  background: rgba(204,169,88,0.08);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.qg-popup h2{
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.18;
}
.qg-popup .qg-gold{ color: #cca958; }
.qg-popup-head p{
  font-size: 0.96rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}
.qg-popup-form .form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.qg-popup-form label{
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.qg-popup-form input[type="text"],
.qg-popup-form input[type="email"]{
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.95rem;
  background: #fff;
  font-family: inherit;
}
.qg-popup-form .form-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 4px 0 18px;
}
.qg-popup-form .form-checkbox input{
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: #cca958;
}
.qg-popup-submit{
  width: 100%;
  justify-content: center;
}
.qg-popup-note{
  display: block;
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-tertiary);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 520px){
  .qg-popup{ padding: 16px; }
  .qg-popup-card{ padding: 28px 22px 24px; max-width: 100%; }
  .qg-popup h2{ font-size: 1.4rem; }
  .qg-popup-form .form-row{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .qg-popup, .qg-popup-card{ transition: none; }
}

.felix-quickfacts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 36px auto 0;
  max-width: 880px;
}
.qf-chip{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
  min-width: 0;
}
.qf-chip:hover{
  transform: translateY(-3px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 14px 28px -14px rgba(0,0,0,0.18);
}
.qf-icon{
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(204,169,88,0.10);
  border: 1px solid rgba(204,169,88,0.20);
  color: #cca958;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), background 0.3s ease;
}
.qf-chip:hover .qf-icon{
  transform: scale(1.06) rotate(-4deg);
  background: rgba(204,169,88,0.20);
}
.qf-icon-linkedin{
  background: rgba(10,102,194,0.10);
  border-color: rgba(10,102,194,0.25);
  color: #0A66C2;
}
.qf-chip:hover .qf-icon-linkedin{
  background: rgba(10,102,194,0.18);
}
.qf-stack{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.qf-label{
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-tertiary);
  font-weight: 700;
  line-height: 1.1;
}
.qf-value{
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qf-value strong{
  color: #cca958;
  font-weight: 700;
}
.qf-chip-accent{
  background: #ffffff;
}

@media (max-width: 880px){
  .felix-quickfacts{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px){
  .felix-quickfacts{ grid-template-columns: 1fr; gap: 10px; max-width: 360px; }
  .qf-chip{ padding: 10px 14px; }
}

.story-grid{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 56px;
  padding-left: 40px;
}
.story-grid::before{
  content: '';
  position: absolute;
  left: 14px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border);
}
.story-item{
  position: relative;
  padding: 24px 0 32px 28px;
  border-bottom: 1px dashed var(--border);
}
.story-item:last-child{ border-bottom: none; }
.story-item::before{
  counter-increment: story;
  content: counter(story, decimal-leading-zero);
  position: absolute;
  left: -42px; top: 22px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #cca958;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.78rem;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(204,169,88,0.30), 0 0 0 4px #fff;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
  z-index: 1;
}
.story-grid{ counter-reset: story; }
.story-item:hover::before{
  transform: scale(1.10);
  box-shadow: 0 0 0 4px rgba(204,169,88,0.10);
}
.story-item h3{
  font-size: 1.20rem;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  transition: color 0.25s ease;
}
.story-item:hover h3{ color: #cca958; }
.story-item p{
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.story-item p:last-child{ margin-bottom: 0; }

@media (max-width: 600px){
  .story-grid{ padding-left: 32px; }
  .story-grid::before{ left: 10px; }
  .story-item::before{ left: -32px; width: 26px; height: 26px; font-size: 0.70rem; }
  .story-item{ padding: 18px 0 24px 18px; }
}

.beliefs-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 48px;
}
.belief-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px 28px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}
.belief-card::before{
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #cca958;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.belief-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,0.18);
}
.belief-card:hover::before{ transform: scaleY(1); }
.belief-card .belief-num{
  display: inline-block;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cca958;
  background: rgba(204,169,88,0.08);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.belief-card h3{
  font-size: 1.20rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}
.belief-card p{
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
@media (max-width: 720px){
  .beliefs-grid{ grid-template-columns: 1fr; }
  .belief-card{ padding: 24px 22px 22px; }
}

.pillars-grid .pillar-card{
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.pillars-grid .pillar-icon{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(204,169,88,0.08);
  border: 1px solid rgba(204,169,88,0.22);
  color: #cca958;
  font-size: 1.5rem;
  margin-bottom: 18px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background 0.3s ease, border-color 0.3s ease;
}
.pillars-grid .pillar-card:hover .pillar-icon{
  transform: rotate(-6deg) scale(1.08);
  background: rgba(204,169,88,0.18);
  border-color: rgba(204,169,88,0.45);
}
.pillars-grid .pillar-card h3{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.pillars-grid .pillar-card p{
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.quik-startup-list,
.startup-tier-list{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  margin: 36px auto 0;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.quik-startup-list .row,
.startup-tier-list .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  transition: background 0.25s ease, padding-left 0.25s cubic-bezier(.2,.8,.2,1);
}
.quik-startup-list .row:last-child,
.startup-tier-list .row:last-child{ border-bottom: none; }
.quik-startup-list .row:hover,
.startup-tier-list .row:hover{
  padding-left: 4px;
}
.quik-startup-list .row .label,
.startup-tier-list .row .label{
  font-weight: 600;
  color: var(--text-primary);
}
.quik-startup-list .row .value,
.startup-tier-list .row .value{
  color: var(--text-tertiary);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.sister-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}
.sister-card{
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px 22px;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}
.sister-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 22px 44px -20px rgba(0,0,0,0.18);
}
.sister-card .sister-icon{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(204,169,88,0.10);
  border: 1px solid rgba(204,169,88,0.25);
  color: #cca958;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 18px;
}
.sister-card h3{
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.sister-card p{
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
}
.sister-card a.sister-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cca958;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.88rem;
  transition: gap 0.3s cubic-bezier(.2,.8,.2,1);
}
.sister-card a.sister-cta:hover{ gap: 12px; }
@media (max-width: 880px){
  .sister-grid{ grid-template-columns: 1fr; }
}

.page-intro + .section-py{ padding-top: 24px; }
.page-intro + .section-py .article-grid{ margin-top: 0; }

.footer a{
  transition: color 0.2s ease;
}
.footer-col a{
  text-decoration: none;
}
.footer-col a:hover{
  color: #cca958;
}

.footer-col a::after{
  background: currentColor !important;
  height: 1px !important;
}

.topbar a:hover .arrow i{
  transform: translateX(3px);
  transition: transform 0.3s ease;
}

.arch-hero-meter .meter-fill{
  animation: none !important;
  width: 0 !important;
  transition: width 1.6s cubic-bezier(.2,.8,.2,1);
}
.arch-hero.is-visible .arch-hero-meter .meter-fill{
  width: 78% !important;
}

.section-head.reveal{ transition-duration: 0.85s; }

@media (max-width: 480px){

  .container{ padding-left: 20px; padding-right: 20px; }
  .section-py{ padding-top: 56px; padding-bottom: 56px; }
  .section-head{ margin-bottom: 32px; }

  .hero{ padding-top: 92px; padding-bottom: 56px; min-height: auto; }
  .hero-title{
    font-size: clamp(2.0rem, 9vw, 2.6rem) !important;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  .hero-subtitle{
    font-size: 1.02rem;
    line-height: 1.55;
    margin-top: 18px;
  }
  .hero-cta-row{
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline{ width: 100%; justify-content: center; }
  .hero-eyebrow{ font-size: 0.78rem; }

  .section-title{ font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.12; }
  .section-sub{ font-size: 0.98rem; line-height: 1.55; }

  .btn-primary, .btn-outline, .btn-nav{
    min-height: 50px;
    padding: 14px 22px;
    font-size: 1rem;
  }
  .btn-nav{ min-height: 44px; padding: 10px 18px; }

  .arch-hero{ padding: 24px 18px 22px; border-radius: 18px; margin-top: 36px; }
  .arch-hero-status{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.66rem;
  }
  .arch-hero-tier{ padding: 22px 18px 18px; border-radius: 14px; }
  .arch-hero-tier h3{ font-size: 1.18rem; }
  .arch-hero-tier .tier-desc{ font-size: 0.88rem; }
  .arch-hero-tier .tier-list li{ font-size: 0.84rem; }
  .arch-hero-tier .tier-icon{ width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 16px; }
  .arch-hero-meter .meter-labels{ flex-direction: column; align-items: flex-start; gap: 4px; }

  .feature-card, .pillar-card, .leistung-card, .article-card, .blog-card,
  .compare-col, .stat-card{
    padding: 22px 20px;
    border-radius: 14px;
  }
  .feature-card .feature-icon,
  .pillar-card .pillar-icon{ width: 44px; height: 44px; font-size: 1.1rem; }

  .article-grid, .blog-grid{
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .pillars-grid{ grid-template-columns: 1fr !important; gap: 14px; }
  .features-grid{ grid-template-columns: 1fr !important; gap: 14px; }

  .compare-grid{ grid-template-columns: 1fr !important; gap: 16px; }

  .stats-trio, .stats-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .stat-num{ font-size: 2.4rem !important; }

  .leistungen-grid{ grid-template-columns: 1fr !important; gap: 16px; }

  .form-card{ padding: 22px 18px; border-radius: 16px; }
  .form-row{ grid-template-columns: 1fr !important; gap: 14px; }
  .form-card input, .form-card select, .form-card textarea,
  input[type="text"], input[type="email"], textarea{
    font-size: 16px !important;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
  }
  textarea{ min-height: 120px; }

  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{ flex-direction: column; gap: 10px; align-items: flex-start; }

  /* topbar mobile rules consolidated above */

  .feature-card:hover, .pillar-card:hover, .article-card:hover,
  .blog-card:hover, .leistung-card.live:hover{
    transform: none;
    box-shadow: 0 8px 18px -8px rgba(0,0,0,0.25);
  }
  .compare-grid:hover .compare-col:not(:hover){ opacity: 1; }

  .btn-primary:active, .btn-outline:active{
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  .article-card:active, .blog-card:active,
  .feature-card:active, .pillar-card:active,
  .leistung-card.live:active{
    transform: scale(0.985);
    transition: transform 0.12s ease;
  }

  body.has-mobile-cta{ padding-bottom: 100px; }
  body.has-mobile-cta footer{ margin-bottom: 0; }
  .mobile-sticky-cta{
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 60;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(20,20,22,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
    transform: translateY(120%);
    transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-sticky-cta.show{ transform: translateY(0); }
  .mobile-sticky-cta a{
    flex: 1;
    text-align: center;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
  }
  .mobile-sticky-cta a.primary{
    background: #cca958;
    color: #141416;
    border-color: #cca958;
  }
  .mobile-sticky-cta a:active{ transform: scale(0.97); }

  .reveal{
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
    transition-delay: 0ms !important;
  }
  .reveal.is-visible{ transform: none; }

  .article-card,
  .feature-card,
  .pillar-card,
  .leistung-card,
  .belief-card,
  .process-step,
  .qf-chip,
  .sister-card,
  .stat,
  .compare-row > *{
    transition: transform 0.55s cubic-bezier(.2,.8,.2,1), opacity 0.55s ease;
  }
  .reveal:not(.is-visible) .article-card,
  .reveal:not(.is-visible) .feature-card,
  .reveal:not(.is-visible) .pillar-card,
  .reveal:not(.is-visible) .leistung-card{
    transform: translateY(16px) scale(0.985);
    opacity: 0.6;
  }
  .reveal.is-visible .article-card,
  .reveal.is-visible .feature-card,
  .reveal.is-visible .pillar-card,
  .reveal.is-visible .leistung-card{
    transform: none;
    opacity: 1;
  }

  section.section-py{
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .arch-flow-arrow{
    box-shadow: 0 0 0 0 rgba(204,169,88,0.30);
    animation: q-arrow-pulse-mobile 2.4s ease-out infinite;
  }
  @keyframes q-arrow-pulse-mobile{
    0%, 100% { box-shadow: 0 0 0 0 rgba(204,169,88,0.30); }
    60% { box-shadow: 0 0 0 8px rgba(204,169,88,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .arch-flow-arrow{ animation: none; }
  }

  .section-py{ padding-top: 52px !important; padding-bottom: 52px !important; }
  .section-head{ margin-bottom: 28px !important; }
  .section-head .section-title{ font-size: clamp(1.6rem, 6.5vw, 2.0rem) !important; line-height: 1.15; }
  .section-head .section-sub{ font-size: 0.96rem; line-height: 1.55; }

  .page-intro{ padding: 84px 0 30px !important; }
  .page-intro + .section-py{ padding-top: 14px !important; }

  .navbar .nav-logo{ font-size: 1.0rem; }
  .navbar .brand-mark{ width: 30px; height: 30px; border-radius: 9px; }

  body.has-topbar .navbar{ top: 36px; }

  .manifesto-quote{ font-size: 1.4rem !important; line-height: 1.35; padding: 0 8px; }

  .cta-band{ padding: 36px 20px; border-radius: 18px; }
  .cta-band h2{ font-size: 1.6rem; }
}

@media (max-width: 414px){
  .hero-title{ font-size: 2.2rem !important; }
  .arch-hero{ margin-left: -4px; margin-right: -4px; }
  .container{ padding-left: 18px; padding-right: 18px; }
}

@media (hover: none) and (pointer: coarse){
  .btn-primary[data-magnetic]{ animation: none; }
  .marquee .marquee-track{ animation-duration: 60s; }
  .arch-flow-arrow{ animation: none; }
}

:root{
  --section-py: 96px;
  --section-py-tight: 64px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-lift: 0 8px 32px rgba(0,0,0,0.06);
  --shadow-deep: 0 24px 60px -20px rgba(0,0,0,0.12);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

.hero-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem) !important;
  letter-spacing: -0.028em !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}
.hero-subtitle{
  font-size: clamp(1.05rem, 1.4vw, 1.2rem) !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px !important;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.section-title{
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}
.section-sub{
  font-size: clamp(1rem, 1.2vw, 1.1rem) !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin-top: 14px !important;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow,
.hero-eyebrow{
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin-bottom: 16px !important;
}
.hero-eyebrow .pill{
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #1d1d1f !important;
  padding: 5px 13px !important;
  font-size: 0.68rem !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.section-py{
  padding-top: var(--section-py) !important;
  padding-bottom: var(--section-py) !important;
}
.section-head{
  margin-bottom: 56px !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.page-intro{
  padding-top: 130px !important;
  padding-bottom: 80px !important;
}
.page-intro + .section-py{
  padding-top: 32px !important;
}

.container{ max-width: 1240px !important; }
.container-narrow{ max-width: 800px !important; }

.btn-primary,
.btn-outline,
.btn-nav{
  border-radius: 999px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  font-size: 0.95rem !important;
  padding: 13px 24px !important;
  transition: transform 0.4s var(--ease-out), background-color 0.3s ease, color 0.3s ease, box-shadow 0.4s ease !important;
}
.btn-primary{
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.08) !important;
}
.btn-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.16), 0 12px 28px rgba(0,0,0,0.10) !important;
}
.btn-outline:hover{
  transform: translateY(-2px) !important;
}

.feature-card,
.pillar-card,
.article-card,
.blog-card,
.leistung-card,
.belief-card,
.process-step,
.fit-card,
.compare-col,
.compare-col-bad,
.compare-col-good,
.stat-card,
.sister-card{
  border-radius: var(--radius-lg) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: var(--shadow-soft) !important;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease, border-color 0.4s ease !important;
}
.feature-card:hover,
.pillar-card:hover,
.article-card:hover,
.blog-card:hover,
.leistung-card.live:hover,
.belief-card:hover,
.process-step:hover,
.fit-card:hover,
.stat-card:hover,
.sister-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-deep) !important;
  border-color: rgba(0,0,0,0.10) !important;
}

.article-card{
  border-radius: var(--radius-lg) !important;
}
.article-card-cover{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.article-card-body{
  padding: 28px 28px 24px !important;
}
.article-card h3{
  font-size: 1.18rem !important;
  letter-spacing: -0.018em !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin-bottom: 12px !important;
}
.article-card p{
  font-size: 0.94rem !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 20px !important;
}

/* Removed 2026-05-13: Outer frame around trust-strip looked like a card wrapping
   the metric cells. Per Felix sitewide rule: no outer container border around
   inline metric strips. Cells stay; the wrapping frame goes. */
.leistungen-trust-strip,
.experte-trust-strip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.leistungen-trust-strip .trust-cell strong,
.experte-trust-strip .trust-cell strong{
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

.form-card{
  border-radius: var(--radius-xl) !important;
  padding: 40px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: var(--shadow-lift) !important;
}
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card input[type="url"],
.form-card select,
.form-card textarea,
input[type="text"]:not(.search-input),
input[type="email"],
textarea,
select{
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 1rem !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: #ffffff !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(204,169,88,0.5) !important;
  box-shadow: 0 0 0 4px rgba(204,169,88,0.10) !important;
}
.form-card label{
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  margin-bottom: 10px !important;
  display: block;
  color: var(--text-primary);
}

.form-card label:has(+ input[required])::after,
.form-card label:has(+ select[required])::after,
.form-card label:has(+ textarea[required])::after,
.form-card .form-row > div:has(input[required]) > label::after,
.form-card .form-row > div:has(select[required]) > label::after,
.form-card .form-row > div:has(textarea[required]) > label::after,
.qg-popup-form label:has(+ input[required])::after,
.qg-popup-form label:has(+ select[required])::after,
.qg-popup-form label:has(+ textarea[required])::after,
.qg-popup-form .form-row > div:has(input[required]) > label::after,
.qg-popup-form .form-row > div:has(select[required]) > label::after,
.qg-popup-form .form-row > div:has(textarea[required]) > label::after,
form label:has(+ input[required])::after,
form label:has(+ select[required])::after,
form label:has(+ textarea[required])::after,
form .form-row > div:has(input[required]) > label::after,
form .form-row > div:has(select[required]) > label::after,
form .form-row > div:has(textarea[required]) > label::after{
  content: ' *';
  color: #cca958;
  font-weight: 700;
  margin-left: 2px;
}

.form-checkbox label::after{
  content: none !important;
}
.form-row{
  gap: 20px !important;
  margin-bottom: 28px !important;
}
.form-card form > label{
  margin-top: 4px;
}
.form-card form > input,
.form-card form > select,
.form-card form > textarea{
  margin-bottom: 28px !important;
}
.form-card .form-checkbox{
  margin-top: 8px;
}

.cta-band{
  border-radius: var(--radius-xl) !important;
  padding: 64px 48px !important;
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}
.cta-title{
  font-size: clamp(1.8rem, 3.6vw, 2.6rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.cta-sub{
  color: rgba(255,255,255,0.68) !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 14px !important;
  margin-bottom: 32px !important;
}

.arch-hero{
  border-radius: var(--radius-xl) !important;
  padding: 56px 56px 48px !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 32px 80px -32px rgba(0,0,0,0.5) !important;
}
.arch-hero-tier{
  border-radius: var(--radius-md) !important;
  padding: 32px 28px 26px !important;
  background: rgba(255,255,255,0.02) !important;
}
.arch-hero-tier h3{
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

.section-head .section-eyebrow{
  display: inline-block !important;
  margin: 0 auto 18px !important;
  font-size: 0.72rem !important;
}

.feature-icon,
.pillar-icon{
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  width: 56px !important;
  height: 56px !important;
  font-size: 1.4rem !important;
}
.feature-card:hover .feature-icon,
.pillar-card:hover .pillar-icon{
  background: rgba(204,169,88,0.10) !important;
  border-color: rgba(204,169,88,0.22) !important;
  color: #cca958 !important;
}

@media (max-width: 880px){
  :root{ --section-py: 64px; }
  .section-head{ margin-bottom: 36px !important; }
  .page-intro{ padding-top: 100px !important; padding-bottom: 48px !important; }
  .form-card{ padding: 28px 22px !important; }
  .cta-band{ padding: 48px 28px !important; border-radius: var(--radius-lg) !important; }
  .arch-hero{ padding: 32px 22px 28px !important; border-radius: var(--radius-lg) !important; }
  .article-card-body{ padding: 22px 22px 18px !important; }
}

.footer{ padding: 80px 0 32px !important; }
.footer h4{
  font-size: 0.74rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  margin-bottom: 18px !important;
  color: rgba(255,255,255,0.45) !important;
}
.footer-col a{
  font-size: 0.94rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.78) !important;
}

html{ scroll-behavior: smooth; }
*{ scroll-margin-top: 100px; }

*:focus-visible{
  outline: 2px solid #cca958 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

.manifesto-card{
  border-radius: var(--radius-xl) !important;
  padding: 48px !important;
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,0.4) !important;
}
@media (max-width: 720px){
  .manifesto-card{ padding: 32px 24px !important; }
}

@media (max-width: 760px){

  .experte-trust-strip{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }
  .experte-trust-strip .trust-cell strong{
    font-size: 1.35rem !important;
  }
  .experte-trust-strip .trust-cell span{
    font-size: 0.7rem !important;
  }

  .manifesto-card{
    padding: 28px 22px !important;
    margin-top: 48px !important;
    border-radius: 22px !important;
  }
  .manifesto-card > div:first-child{
    font-size: 1.08rem !important;
    line-height: 1.55 !important;
  }

  .saeulen-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .saeule-card{
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }
  .saeule-visual{
    height: 130px !important;
  }
  .saeule-num{
    font-size: 0.7rem !important;
  }
  .saeule-body h3{
    font-size: 1.25rem !important;
  }
  .saeule-body p{
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
  }

  .hebel-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .hebel-card{
    padding: 26px 22px 28px !important;
    border-radius: 20px !important;
  }
  .hebel-visual{
    margin: -8px -10px 18px !important;
    padding: 18px 8px !important;
    min-height: 150px !important;
  }
  .hebel-card.featured-big,
  .hebel-card.featured-dark{
    grid-column: span 1 !important;
  }
  .hebel-card .hebel-num{
    top: 18px !important;
    right: 18px !important;
    font-size: 0.7rem !important;
  }
  .hebel-card h3{
    font-size: 1.2rem !important;
    letter-spacing: -0.02em !important;
  }
  .hebel-card p{
    font-size: 0.93rem !important;
    line-height: 1.55 !important;
  }

  .ecosystem-diagram{
    margin-top: 36px !important;
    gap: 14px !important;
  }
  .eco-layer{
    padding: 20px 16px !important;
    border-radius: 18px !important;
  }
  .eco-nodes{
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .eco-node{
    padding: 12px 6px !important;
    border-radius: 12px !important;
  }
  .eco-node i{ font-size: 1rem !important; }
  .eco-node span{ font-size: 0.66rem !important; }
  .eco-brands{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 22px 18px !important;
  }
  .eco-brand-card{
    padding: 18px 18px !important;
  }
  .eco-brand-name{ font-size: 1.18rem !important; }
  .eco-output{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .eco-output-card{
    flex-direction: row !important;
    text-align: left !important;
    padding: 16px 18px !important;
    gap: 14px !important;
  }
  .eco-output-card i{ margin-bottom: 0 !important; }

  .experte-fit-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .experte-fit-grid .fit-card,
  .experte-fit-grid .fit-card.big{
    grid-column: span 1 !important;
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }

  .stats-trio .stat-card{
    padding: 24px 22px !important;
    border-radius: 18px !important;
  }
  .stats-trio .stat-num{
    font-size: 2.4rem !important;
  }

  .process-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .process-step{
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }

  .slot-list{
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }
  .slot-list-row{
    padding: 12px 0 !important;
  }

  .faq-list details{
    padding: 18px 18px !important;
    border-radius: 14px !important;
  }
  .faq-list details summary{
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  #bewerben .form-card{
    padding: 26px 20px 22px !important;
    border-radius: 22px !important;
    margin-top: 28px !important;
  }
  #bewerben .form-card form > label,
  #bewerben .form-card form > input,
  #bewerben .form-card form > select,
  #bewerben .form-card form > textarea{
    margin-bottom: 22px !important;
  }
  #bewerben .form-row{
    margin-bottom: 22px !important;
    gap: 14px !important;
  }

  .page-intro .hero-title{
    font-size: clamp(2.0rem, 8vw, 2.6rem) !important;
    line-height: 1.08 !important;
  }
  .page-intro .hero-subtitle{
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }
}

.reveal.is-visible .hebel-card,
.reveal.is-visible .saeule-card,
.reveal.is-visible .fit-card,
.reveal.is-visible .process-step,
.reveal.is-visible .stat-card{
  animation: q-card-rise 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible .hebel-card:nth-child(1),
.reveal.is-visible .saeule-card:nth-child(1),
.reveal.is-visible .fit-card:nth-child(1),
.reveal.is-visible .process-step:nth-child(1),
.reveal.is-visible .stat-card:nth-child(1){ animation-delay: 0.05s; }
.reveal.is-visible .hebel-card:nth-child(2),
.reveal.is-visible .saeule-card:nth-child(2),
.reveal.is-visible .fit-card:nth-child(2),
.reveal.is-visible .process-step:nth-child(2),
.reveal.is-visible .stat-card:nth-child(2){ animation-delay: 0.13s; }
.reveal.is-visible .hebel-card:nth-child(3),
.reveal.is-visible .saeule-card:nth-child(3),
.reveal.is-visible .fit-card:nth-child(3),
.reveal.is-visible .process-step:nth-child(3),
.reveal.is-visible .stat-card:nth-child(3){ animation-delay: 0.21s; }
.reveal.is-visible .hebel-card:nth-child(4),
.reveal.is-visible .fit-card:nth-child(4),
.reveal.is-visible .process-step:nth-child(4){ animation-delay: 0.29s; }
.reveal.is-visible .hebel-card:nth-child(5),
.reveal.is-visible .fit-card:nth-child(5){ animation-delay: 0.37s; }
.reveal.is-visible .hebel-card:nth-child(6),
.reveal.is-visible .fit-card:nth-child(6){ animation-delay: 0.45s; }

@keyframes q-card-rise{
  0%{
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  60%{
    opacity: 1;
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.reveal.is-visible .hebel-visual svg{
  animation: q-svg-fade 1s 0.3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes q-svg-fade{
  from{ opacity: 0; transform: scale(0.94); }
  to{ opacity: 1; transform: scale(1); }
}

.section-head.reveal.is-visible .text-gradient,
.hero-title .text-gradient{
  background: none !important;
  color: #cca958 !important;
  -webkit-text-fill-color: #cca958 !important;
  animation: none !important;
}

.eco-flow{
  animation: q-eco-flow 2.4s ease-in-out infinite;
}
@keyframes q-eco-flow{
  0%, 100%{ transform: translateY(0); opacity: 0.6; }
  50%{ transform: translateY(4px); opacity: 1; }
}

@media (max-width: 760px){
  .reveal.is-visible .hebel-card{
    animation-duration: 0.8s;
  }

  html, body{
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  .hebel-card:active,
  .saeule-card:active,
  .fit-card:active{
    transform: scale(0.985) !important;
    transition: transform 0.12s ease !important;
  }

  .reveal.is-visible .experte-trust-strip .trust-cell strong{
    animation: q-num-pop 0.6s 0.2s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes q-num-pop{
    from{ transform: scale(0.6); opacity: 0; }
    to{ transform: scale(1); opacity: 1; }
  }

  .reveal.is-visible .manifesto-card{
    animation: q-manifesto-rise 0.9s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes q-manifesto-rise{
    from{ opacity: 0; transform: translateY(40px) scale(0.96); }
    to{ opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce){
  .reveal.is-visible .hebel-card,
  .reveal.is-visible .saeule-card,
  .reveal.is-visible .fit-card,
  .reveal.is-visible .process-step,
  .reveal.is-visible .stat-card,
  .reveal.is-visible .hebel-visual svg,
  .reveal.is-visible .manifesto-card,
  .reveal.is-visible .experte-trust-strip .trust-cell strong,
  .section-head.reveal.is-visible .text-gradient,
  .hero-title .text-gradient,
  .eco-flow{
    animation: none !important;
  }
}

.experten-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.experte-card{
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.3s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.04);
}
.experte-card:hover{
  transform: translateY(-6px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.18);
}
.experte-card-media{
  position: relative;
  background: #f5f5f6;
  padding: 36px 28px 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.experte-card-media img{
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.15);
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.experte-card:hover .experte-card-media img{
  transform: scale(1.04);
}
.experte-card-pill{
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--text-primary);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.experte-open-icon{
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(204,169,88,0.10);
  border: 2px dashed rgba(204,169,88,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #cca958;
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}
.experte-card-open:hover .experte-open-icon{
  transform: scale(1.04) rotate(90deg);
}
.experte-card-body{
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.experte-card-body h3{
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  margin: 0;
}
.experte-role{
  font-size: 0.84rem;
  font-weight: 600;
  color: #cca958;
  letter-spacing: -0.01em;
  margin: 0;
}
.experte-bio{
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 4px 0 0;
}
.experte-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.experte-tags span{
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-tertiary);
  background: rgba(0,0,0,0.04);
  padding: 4px 10px;
  border-radius: 999px;
}
.experte-cta{
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.005em;
}
.experte-cta i{
  transition: transform 0.3s var(--ease-out);
}
.experte-card:hover .experte-cta i{
  transform: translateX(4px);
}
.experte-card-open{
  background: #fffaf0;
  border-color: rgba(204,169,88,0.22);
}
.experte-card-open .experte-card-media{
  background: #fff7e6;
}

.experte-card{ opacity: 1; }
.reveal.is-visible .experte-card{
  animation: q-card-rise 0.7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible .experte-card:nth-child(1){ animation-delay: 0.05s; }
.reveal.is-visible .experte-card:nth-child(2){ animation-delay: 0.13s; }
.reveal.is-visible .experte-card:nth-child(3){ animation-delay: 0.21s; }
.reveal.is-visible .experte-card:nth-child(4){ animation-delay: 0.29s; }
.reveal.is-visible .experte-card:nth-child(5){ animation-delay: 0.37s; }
.reveal.is-visible .experte-card:nth-child(6){ animation-delay: 0.45s; }

@media (max-width: 960px){
  .experten-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 600px){
  .experten-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 36px !important;
  }
  .experte-card-media{
    padding: 28px 22px 22px !important;
  }
  .experte-card-media img,
  .experte-open-icon{
    width: 110px !important;
    height: 110px !important;
  }
  .experte-card-body{
    padding: 20px 22px 22px !important;
  }
  .experte-card-body h3{
    font-size: 1.22rem !important;
  }
}

.page-intro .hero-eyebrow,
.page-intro .hero-eyebrow span,
.page-intro .hero-eyebrow .pill,
.section-head .hero-eyebrow,
.section-head .hero-eyebrow span,
.section-head .hero-eyebrow .pill{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
.page-intro .hero-eyebrow .pill,
.section-head .hero-eyebrow .pill{
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}

body::before{ content: none !important; display: none !important; background: none !important; }

.btn-primary,
.btn-outline,
.btn-nav{
  transition:
    transform 0.25s cubic-bezier(.16,1,.3,1),
    box-shadow 0.25s cubic-bezier(.16,1,.3,1),
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease !important;
  will-change: transform;
}
.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.35);
}
.btn-outline:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.10);
}
.btn-primary:active,
.btn-outline:active,
.btn-nav:active{
  transform: scale(0.97);
  transition: transform 0.1s ease !important;
}

.btn-primary i.fa-arrow-right,
.btn-outline i.fa-arrow-right,
.experte-cta i.fa-arrow-right,
a.faq-cta i.fa-arrow-right{
  transition: transform 0.28s cubic-bezier(.16,1,.3,1);
}
.btn-primary:hover i.fa-arrow-right,
.btn-outline:hover i.fa-arrow-right,
.experte-card:hover .experte-cta i.fa-arrow-right,
a.faq-cta:hover i.fa-arrow-right{
  transform: translateX(4px);
}

.feature-card,
.pillar-card,
.leistung-card,
.article-card,
.blog-card,
.fit-card,
.process-step,
.belief-card,
.stat-card,
.sister-card,
.faq-card{
  transition:
    transform 0.35s cubic-bezier(.16,1,.3,1),
    box-shadow 0.35s cubic-bezier(.16,1,.3,1),
    border-color 0.25s ease !important;
}

.article-card-cover img,
.blog-card-cover img{
  transition: transform 0.6s cubic-bezier(.16,1,.3,1);
}
.article-card:hover .article-card-cover img,
.blog-card:hover .blog-card-cover img{
  transform: scale(1.04);
}

.faq-answer p a:not(.faq-cta),
.story-item p a,
.article-card-body p a{
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.3s cubic-bezier(.16,1,.3,1);
  text-decoration: none;
}
.faq-answer p a:not(.faq-cta):hover,
.story-item p a:hover,
.article-card-body p a:hover{
  background-size: 100% 1px;
}

details.faq-item summary i.fa-plus{
  transition: transform 0.35s cubic-bezier(.16,1,.3,1);
}
details.faq-item[open] summary i.fa-plus{
  transform: rotate(45deg);
}
details.faq-item .faq-answer{
  animation: q-faq-slide-down 0.4s cubic-bezier(.16,1,.3,1);
}
@keyframes q-faq-slide-down{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.nav-dropdown-menu a{
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    padding-left 0.2s ease !important;
}
.nav-dropdown-menu a:hover{
  background: rgba(0,0,0,0.04);
}

.page-intro .hero-subtitle{
  animation: q-subtitle-fade 0.9s 0.25s cubic-bezier(.16,1,.3,1) both;
}
@keyframes q-subtitle-fade{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

.scroll-up-btn{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1d1d1f;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.16,1,.3,1), background 0.25s ease;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4);
}
.scroll-up-btn.show{
  opacity: 1;
  transform: translateY(0);
}
.scroll-up-btn:hover{
  background: #cca958;
  color: #141416;
}
@media (max-width: 600px){
  .scroll-up-btn{ width: 40px; height: 40px; bottom: 14px; right: 14px; }
}

.stat-card .stat-num,
.experte-trust-strip .trust-cell strong,
.stats-trio .stat-num{
  transition: transform 0.3s ease;
}
.stat-card:hover .stat-num,
.experte-trust-strip .trust-cell:hover strong{
  transform: scale(1.05);
}

.form-card input,
.form-card select,
.form-card textarea,
form input,
form select,
form textarea{
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s cubic-bezier(.16,1,.3,1) !important;
}

.topbar .pill i.fa-sparkles{
  animation: q-spark-pulse 2.4s ease-in-out infinite;
}
@keyframes q-spark-pulse{
  0%, 100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(1.15); opacity: 0.8; }
}

.nav-logo:hover .brand-mark{
  animation: q-logo-tilt 0.5s cubic-bezier(.16,1,.3,1);
}
@keyframes q-logo-tilt{
  0%{ transform: rotate(0); }
  35%{ transform: rotate(-6deg); }
  70%{ transform: rotate(4deg); }
  100%{ transform: rotate(0); }
}

@keyframes q-page-fade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
body{
  animation: q-page-fade 0.5s ease;
}

@media (prefers-reduced-motion: reduce){
  body::before,
  .topbar .pill i.fa-sparkles,
  .nav-logo:hover .brand-mark,
  .page-intro .hero-subtitle,
  details.faq-item .faq-answer,
  body{
    animation: none !important;
  }
  .btn-primary:hover,
  .btn-outline:hover,
  .article-card:hover .article-card-cover img,
  .blog-card:hover .blog-card-cover img{
    transform: none !important;
  }
}

@media (max-width: 760px){
  .section-py{
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .section-head{ margin-bottom: 28px !important; }
  .section-head .section-title{
    font-size: clamp(1.7rem, 7vw, 2.05rem) !important;
    line-height: 1.12 !important;
  }
  .section-head .section-sub{
    font-size: 0.96rem !important;
    line-height: 1.55 !important;
  }

  .page-intro{ padding: 84px 0 32px !important; }
  .page-intro .hero-eyebrow{
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: center;
  }
  .page-intro .hero-eyebrow .pill{ margin-right: 0 !important; }

  .hero-cta-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-outline{
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
  }

  .cta-band{
    padding: 40px 22px !important;
    border-radius: 20px !important;
  }
  .cta-band .cta-title{
    font-size: 1.6rem !important;
    line-height: 1.2 !important;
  }
  .cta-band .cta-row{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .cta-band .cta-row .btn-primary,
  .cta-band .cta-row .btn-outline{
    width: 100% !important;
    justify-content: center !important;
  }

  .article-grid,
  .blog-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .article-card,
  .blog-card{ border-radius: 18px !important; }
  .article-card-body,
  .blog-card-body{ padding: 22px 22px 20px !important; }
  .article-card h3,
  .blog-card h3{
    font-size: 1.18rem !important;
    line-height: 1.3 !important;
  }

  .pillars-grid,
  .features-grid,
  .leistungen-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .compare-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .leistungen-trust-strip,
  .experte-trust-strip{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    padding: 18px !important;
  }

  .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .footer-grid,
  .footer-quik .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .topbar{
    font-size: 0.74rem !important;
    padding: 7px 14px !important;
  }
  .topbar .arrow{ display: none !important; }

  .nav-dropdown-menu{
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .manifesto-card{
    padding: 28px 22px !important;
    border-radius: 22px !important;
  }
  .manifesto-card > div:first-child,
  .manifesto-quote{
    font-size: 1.08rem !important;
    line-height: 1.5 !important;
  }

  .stats-trio,
  .stats-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .stats-trio .stat-num{ font-size: 2.4rem !important; }

  .process-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-card{
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }
  .form-row{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
  }
  .form-card form > input,
  .form-card form > select,
  .form-card form > textarea{
    margin-bottom: 22px !important;
  }
  .form-card input,
  .form-card select,
  .form-card textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  textarea{
    font-size: 16px !important;
    min-height: 50px !important;
    padding: 13px 14px !important;
  }
  textarea{ min-height: 130px !important; }

  .faq-list{ gap: 8px !important; }
  .faq-list details.faq-item,
  .faq-list details{
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .faq-list summary{
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 414px){
  .hero-title{
    font-size: clamp(1.95rem, 8.5vw, 2.4rem) !important;
    line-height: 1.08 !important;
  }
  .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

.article-author-card,
.article-author-card.article-author-card{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 28px !important;
  padding: 40px 44px !important;
  margin-top: 72px !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  column-gap: 32px !important;
  row-gap: 14px !important;
  position: relative;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 32px -16px rgba(0,0,0,0.10) !important;
  transition: box-shadow 0.4s cubic-bezier(.16,1,.3,1), transform 0.4s cubic-bezier(.16,1,.3,1) !important;
}
.article-author-card:hover{
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 24px 56px -20px rgba(0,0,0,0.16) !important;
  transform: translateY(-2px);
}
.article-author-card::after,
.article-author-card::before{ content: none !important; display: none !important; background: none !important; }

.article-author-card img{
  flex-shrink: 0 !important;
  width: 112px !important;
  height: 112px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: 50% 25% !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.12) !important;
  margin: 0 !important;
}

.article-author-card .info{
  display: block !important;
  flex: 1 1 calc(100% - 144px) !important;
  min-width: 0 !important;
  padding-right: 0 !important;
}

.article-author-card .label{
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45) !important;
  margin: 0 0 10px !important;
  display: block;
}
.article-author-card h3{
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.15 !important;
  color: #1d1d1f !important;
  margin: 0 0 4px !important;
}
.article-author-card .role{
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: #cca958 !important;
  margin: 0 !important;
  letter-spacing: -0.005em;
}

.article-author-card p{
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: rgba(0,0,0,0.66) !important;
  margin: 12px 0 0 !important;
  max-width: 56ch;
  letter-spacing: -0.005em;
}

.article-author-card .meta-row{
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin: 16px 0 0 !important;
  font-size: 0.78rem !important;
}
.article-author-card .meta-row span{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(0,0,0,0.04) !important;
  border-radius: 999px !important;
  color: rgba(0,0,0,0.7) !important;
  font-weight: 500 !important;
  font-size: 0.76rem !important;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, color 0.2s ease;
}
.article-author-card .meta-row span:hover{
  background: rgba(204,169,88,0.12) !important;
  color: #1d1d1f !important;
}
.article-author-card .meta-row span i{
  color: #cca958 !important;
  font-size: 0.72rem !important;
}

.article-author-card .actions{
  position: static !important;
  display: block !important;
  margin: 4px 0 0 !important;
  flex: 0 0 100% !important;
  padding-left: calc(112px + 32px) !important;
  min-width: 0 !important;
}
.article-author-card .actions .ac{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1d1d1f !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,0,0,0.25) !important;
  text-underline-offset: 4px !important;
  text-decoration-thickness: 1px !important;
  letter-spacing: -0.005em;
  transition: text-decoration-color 0.25s ease, color 0.25s ease !important;
}
.article-author-card .actions .ac:hover{
  background: transparent !important;
  color: #1d1d1f !important;
  transform: none !important;
  text-decoration-color: #1d1d1f !important;
  box-shadow: none !important;
}
.article-author-card .actions .ac i{
  font-size: 0.78rem !important;
  color: #1d1d1f !important;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1) !important;
}
.article-author-card .actions .ac:hover i{
  transform: translateX(3px) !important;
}
.article-author-card .actions .ac.outline{ display: none !important; }

@media (max-width: 720px){

  .article-layout{
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .article-body,
  .article-layout .article-body,
  .article-layout.has-sidebar .article-body{
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
  .article-body *{
    max-width: 100% !important;
  }
  .article-body a{
    word-break: break-word;
  }
  .article-body img,
  .article-body iframe,
  .article-body table,
  .article-body pre{
    max-width: 100% !important;
    height: auto;
  }
  .article-author-card,
  .article-author-card.article-author-card{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 32px 24px 28px !important;
    border-radius: 24px !important;
    margin-top: 56px !important;
    gap: 18px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .article-author-card img{
    width: 84px !important;
    height: 84px !important;
    margin: 0 auto !important;
  }
  .article-author-card .info{
    padding-right: 0 !important;
    width: 100%;
    flex: 0 1 auto !important;
  }
  .article-author-card .meta-row{
    justify-content: center !important;
    margin-top: 14px !important;
    width: 100%;
  }
  .article-author-card .actions{
    position: static !important;
    margin-top: 14px !important;
    justify-content: center !important;
    width: 100%;
    padding-left: 0 !important;
    text-align: center !important;
  }
  .article-author-card .actions .ac{
    width: auto !important;
  }
  .article-author-card p{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
  }
}

.section-eyebrow,
.kpi-banner-eyebrow,
.fit-eyebrow,
.saeule-tag,
.hebel-eyebrow,
.eco-brand-tag,
.compare-eyebrow,
.price-eyebrow,
.arch-step-eyebrow,
.story-eyebrow{
  color: rgba(0,0,0,0.45) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.45) !important;
  background: transparent !important;
}

.feature-card .feature-title strong,
.pillar-card h3 em,
.feature-text strong,
.belief-card h3 em,
.story-item h3 em,
.process-step h3 em{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.arch-hero-tier.is-goal h3 em,
.arch-hero-tier h3 em,
.arch-card h3 em,
.quik-card h3 em{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .qg-popup-eyebrow,
html body span.qg-popup-eyebrow{
  background: rgba(20,20,22,0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.10) !important;
}

html body .manifesto blockquote,
html body .manifesto blockquote *,
html body .manifesto blockquote p,
html body .manifesto blockquote span,
html body .manifesto blockquote strong,
html body .manifesto blockquote em,
html body blockquote[style*="background: #141416"],
html body blockquote[style*="background: #141416"] *,
html body blockquote[style*="background:#141416"] *,
html body blockquote[style*="background:#1d1d1f"] *,
html body blockquote[style*="background: #1d1d1f"] *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html body .qg-popup-eyebrow i{
  color: #1d1d1f !important;
}

html body .article-overview .badge,
html body .article-overview span.badge{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}
.compare-col.good .compare-eyebrow,
.compare-col.b .compare-eyebrow{
  color: rgba(255,255,255,0.90) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.90) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.stat-num,
.stats-trio .stat-num,
.kpi-banner-stat-num,
.experte-trust-strip .trust-cell strong,
.leistungen-trust-strip .trust-cell strong{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

.expert-card .cta,
.expert-card .cta i,
.leistung-cta i,
.compare-col .compare-cta i,
.blog-card-meta i,
.blog-card .card-cta,
.blog-card .card-cta i,
.blog-card:hover .card-title,
.blog-card:hover .card-cta,
.blog-card:hover .card-cta i,
.story-item:hover h3,
.story-item p a{
  color: #1d1d1f !important;
}

a[style*="text-decoration-color:#cca958"],
a[style*="text-decoration-color: #cca958"]{
  text-decoration-color: rgba(0,0,0,0.25) !important;
  text-decoration-thickness: 1px !important;
}
.faq-cta,
.faq-cta:hover{
  color: #1d1d1f !important;
}

.manifesto-card strong{
  color: #ffffff !important;
}

.topbar .pill,
.topbar .pill i.fa-sparkles{

}

.footer-quik .footer-contact a i,
.footer-quik .footer-cta i{
  color: #1d1d1f !important;
}
.footer-quik a:hover{
  color: #1d1d1f !important;
}

.hero-title .text-gradient,
.section-title .text-gradient{
  color: #cca958 !important;
  -webkit-text-fill-color: #cca958 !important;
}

.experte-role,
.author-card-role{
  color: rgba(0,0,0,0.55) !important;
}

.form-card label::after,
form label::after{
  color: rgba(0,0,0,0.55) !important;
}

.slot-status.open,
.eco-output-card i,
.eco-node i,
.fit-eyebrow i,
.hebel-eyebrow i,
.saeule-tag i,
.experte-tags span,
.article-author-card .meta-row span i,
.blog-card-meta-cat,
.author-social i{
  color: #1d1d1f !important;
}

.tag-cloud a:hover,
.filter-pill.active{
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,0.15) !important;
  background: rgba(0,0,0,0.04) !important;
}

*:focus-visible{
  outline-color: #1d1d1f !important;
  outline-offset: 2px !important;
}

details:hover summary{
  color: #1d1d1f !important;
}
.stat-card:hover .stat-num,
.experte-trust-strip .trust-cell:hover strong{
  color: #1d1d1f !important;
}

.article-toc li::before{
  color: rgba(0,0,0,0.35) !important;
}

.scroll-up-btn:hover{
  background: #2c2c30 !important;
  color: #ffffff !important;
}

[style*="color:#cca958"],
[style*="color: #cca958"],
[style*="color:#CCA958"]{
  color: #1d1d1f !important;
}
[style*="background:#cca958"],
[style*="background: #cca958"],
[style*="background-color:#cca958"]{
  background-color: #1d1d1f !important;
}
[style*="border-color:#cca958"],
[style*="border-color: #cca958"]{
  border-color: rgba(0,0,0,0.15) !important;
}
[style*="text-decoration-color:#cca958"],
[style*="text-decoration-color: #cca958"]{
  text-decoration-color: rgba(0,0,0,0.25) !important;
}

.hero-title .text-gradient,
.section-title .text-gradient,
h1 .text-gradient,
h2 .text-gradient,
.text-gradient{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0,0,0,0.18) !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 8px !important;
}

.topbar{
  background: #141416 !important;
  color: #ffffff !important;
}
.topbar .pill{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}
.topbar .pill i,
.topbar .pill i.fa-sparkles{
  color: #ffffff !important;
  animation: none !important;
}
.topbar .text strong,
.topbar .text a,
.topbar a{ color: #ffffff !important; }
.topbar .arrow{ color: #ffffff !important; }

.section-eyebrow,
.hero-eyebrow,
.kpi-banner-eyebrow,
.fit-eyebrow,
.fit-eyebrow i,
.saeule-tag,
.hebel-eyebrow,
.eco-brand-tag,
.compare-eyebrow,
.price-eyebrow,
.arch-step-eyebrow,
.story-eyebrow,
.cta-eyebrow,
.sgb-eyebrow,
.sgb-eyebrow i,
.experte-card-pill,
.brand-mark .accent{
  color: rgba(0,0,0,0.45) !important;
  -webkit-text-fill-color: rgba(0,0,0,0.45) !important;
}
.brand-mark .accent{ fill: rgba(0,0,0,0.45) !important; }
.cta-eyebrow{ color: rgba(255,255,255,0.55) !important; -webkit-text-fill-color: rgba(255,255,255,0.55) !important; }

*:hover{
  text-decoration-color: rgba(0,0,0,0.35) !important;
}
.faq-cta,
.faq-cta i,
.story-item p a:hover,
.faq-answer p a:not(.faq-cta){
  color: #1d1d1f !important;
  text-decoration-color: rgba(0,0,0,0.35) !important;
}

.form-card label::after,
.form-card .form-row > div > label::after,
.qg-popup-form label::after,
.qg-popup-form .form-row > div > label::after,
form label::after,
form .form-row > div > label::after{
  color: rgba(0,0,0,0.45) !important;
}

.experte-role,
.author-card-role,
.article-author-card .role,
.experte-tags span,
.article-author-card .meta-row span i{
  color: rgba(0,0,0,0.55) !important;
}

.stat-num,
.stats-trio .stat-num,
.kpi-banner-stat-num,
.experte-trust-strip .trust-cell strong,
.leistungen-trust-strip .trust-cell strong{
  color: #1d1d1f !important;
}

.btn-primary i,
.btn-primary i.fa-arrow-right,
.btn-primary i.fa-paper-plane,
.btn-primary i.fa-rocket,
.btn-primary i.fa-bolt,
.btn-primary i.fa-handshake,
.btn-primary i.fa-users,
.btn-primary i.fa-arrow-up,
.btn-primary i.fa-arrow-down,
.btn-primary i.fa-calendar-check,
.btn-primary i.fa-download,
.btn-primary i.fa-pen-nib,
.btn-primary i.fa-circle-info,
.btn-outline i,
.btn-outline i.fa-arrow-right,
.cta-band .btn-primary i,
.cta-band .btn-primary:hover i,
.btn-nav i{
  color: #ffffff !important;
}
.btn-outline i{ color: #1d1d1f !important; }

.cta-band{ background: #141416 !important; }
.cta-band .btn-primary{
  background: #ffffff !important;
  color: #1d1d1f !important;
}
.cta-band .btn-primary i{ color: #1d1d1f !important; }
.cta-band .btn-primary:hover{
  background: rgba(255,255,255,0.92) !important;
  color: #1d1d1f !important;
}
.cta-band .btn-primary:hover i{ color: #1d1d1f !important; }
.cta-band .btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.30) !important;
}
.cta-band .btn-outline:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.50) !important;
  color: #ffffff !important;
}

.manifesto-card strong{ color: #ffffff !important; }
.manifesto-card a{ color: #ffffff !important; }

.filter-pill.active,
.filter-pill:hover{
  color: #1d1d1f !important;
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.15) !important;
}
.tag-cloud a:hover,
.tag-cloud a:focus{
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,0.20) !important;
}

.slot-status.open,
.eco-output-card i,
.eco-node i,
.author-social i,
.fit-eyebrow i,
.hebel-eyebrow i,
.saeule-tag i,
.experte-card-pill,
.experte-cta,
.experte-cta i{
  color: #1d1d1f !important;
}

.experte-card-open{
  background: #fafafa !important;
  border-color: rgba(0,0,0,0.10) !important;
}
.experte-card-open .experte-card-media{
  background: #f5f5f6 !important;
}
.experte-open-icon{
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.20) !important;
  color: #1d1d1f !important;
}

[style*="border-color:rgba(204,169,88"]{
  border-color: rgba(0,0,0,0.10) !important;
}
[style*="background:rgba(204,169,88"],
[style*="background-color:rgba(204,169,88"]{
  background-color: rgba(0,0,0,0.04) !important;
}

.seo-guide-banner{
  background: #fafafa !important;
  border-color: rgba(0,0,0,0.10) !important;
}
.sgb-cta{
  background: #1d1d1f !important;
  color: #ffffff !important;
}
.sgb-cta i{ color: #ffffff !important; }
.sgb-perks span i{ color: #1d1d1f !important; }

.qg-popup .qg-gold{ color: #1d1d1f !important; }
.qg-popup .qg-popup-card .pill,
.qg-popup-card .pill{
  background: rgba(0,0,0,0.06) !important;
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,0.10) !important;
}
.qg-popup-form input:focus,
.qg-popup-form select:focus,
.qg-popup-form textarea:focus{
  border-color: #1d1d1f !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus,
input:focus,
textarea:focus,
select:focus{
  border-color: #1d1d1f !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

input[type="checkbox"]{
  accent-color: #1d1d1f !important;
}

.article-toc li::before{ color: rgba(0,0,0,0.30) !important; }

.footer-quik .footer-contact a i,
.footer-quik .footer-cta i,
.footer-quik a:hover{
  color: #ffffff !important;
}

.eco-flow{ color: rgba(0,0,0,0.45) !important; }

.topbar .pill::before{ display: none !important; }

svg .accent,
svg .accent-fill{ fill: #1d1d1f !important; }
svg [fill="#cca958"],
svg [fill="#CCA958"]{ fill: #1d1d1f !important; }
svg [stroke="#cca958"],
svg [stroke="#CCA958"]{ stroke: #1d1d1f !important; }

.cta-band,
.manifesto-card,
.eco-brands,
.hebel-card.featured-dark,
.footer,
.footer-quik,
.topbar{
  position: relative;
  overflow: hidden;
}
.cta-band::before,
.manifesto-card::before,
.eco-brands::before,
.hebel-card.featured-dark::before,
.footer::before,
.footer-quik::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='%23ffffff' fill-opacity='0.55'><circle cx='42' cy='73' r='1'/><circle cx='187' cy='29' r='0.8'/><circle cx='324' cy='110' r='1.2'/><circle cx='498' cy='52' r='0.9'/><circle cx='651' cy='91' r='1'/><circle cx='745' cy='164' r='0.7'/><circle cx='112' cy='178' r='1.1'/><circle cx='265' cy='223' r='0.8'/><circle cx='418' cy='198' r='1'/><circle cx='572' cy='246' r='0.9'/><circle cx='697' cy='289' r='1.2'/><circle cx='38' cy='312' r='0.7'/><circle cx='195' cy='358' r='1'/><circle cx='349' cy='332' r='0.8'/><circle cx='483' cy='376' r='1.1'/><circle cx='629' cy='415' r='0.9'/><circle cx='772' cy='396' r='1'/><circle cx='75' cy='438' r='1.2'/><circle cx='234' cy='482' r='0.8'/><circle cx='386' cy='456' r='1'/><circle cx='541' cy='504' r='0.9'/><circle cx='684' cy='532' r='1.1'/><circle cx='118' cy='549' r='0.7'/><circle cx='287' cy='575' r='1'/><circle cx='447' cy='568' r='0.8'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.7;
}

.topbar::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 50'><g fill='%23ffffff' fill-opacity='0.35'><circle cx='52' cy='12' r='0.8'/><circle cx='178' cy='28' r='0.6'/><circle cx='289' cy='8' r='0.7'/><circle cx='401' cy='34' r='0.8'/><circle cx='524' cy='18' r='0.6'/><circle cx='648' cy='38' r='0.7'/><circle cx='772' cy='14' r='0.8'/></g></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.5;
}

.cta-band > *,
.manifesto-card > *,
.eco-brands > *,
.hebel-card.featured-dark > *,
.footer > *,
.footer-quik > *,
.topbar > *{
  position: relative;
  z-index: 1;
}

@keyframes q-particles-drift{
  0%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-6px) translateX(2px); }
  100%{ transform: translateY(0) translateX(0); }
}
.cta-band::before,
.manifesto-card::before,
.eco-brands::before,
.hebel-card.featured-dark::before,
.footer::before,
.footer-quik::before{
  animation: q-particles-drift 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .cta-band::before,
  .manifesto-card::before,
  .eco-brands::before,
  .hebel-card.featured-dark::before,
  .footer::before,
  .footer-quik::before{
    animation: none !important;
  }
}

.gl-hero{
  padding-top: 132px !important;
  padding-bottom: 88px !important;
}
.gl-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px;
  align-items: center;
}
.gl-hero-copy .hero-title{
  text-align: left !important;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.05 !important;
  margin-bottom: 22px !important;
}
.gl-hero-copy .hero-subtitle{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 540px;
  font-size: 1.12rem !important;
  line-height: 1.55 !important;
  color: rgba(0,0,0,0.62) !important;
}
.gl-hero-copy .hero-eyebrow{
  margin-bottom: 24px !important;
}

.gl-trust-line{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.gl-trust-line-avatars{
  display: flex;
  align-items: center;
}
.gl-trust-line-avatars img{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff;
  margin-left: -10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.gl-trust-line-avatars img:first-child{ margin-left: 0; }
.gl-trust-line-text{
  font-size: 0.92rem;
  color: rgba(0,0,0,0.55);
  letter-spacing: -0.005em;
}
.gl-trust-line-text strong{
  color: #1d1d1f;
  font-weight: 600;
}

.gl-hero-form{ position: relative; }
.gl-form-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 28px;
  padding: 36px 36px 32px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 24px 64px -24px rgba(0,0,0,0.16);
}
.gl-form-head{
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.gl-form-step{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin-bottom: 10px;
}
.gl-form-title{
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #1d1d1f;
  margin: 0;
}
.gl-form-card form > label{
  display: block;
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #1d1d1f;
}
.gl-form-card form > input{
  width: 100%;
  padding: 14px 16px !important;
  margin-bottom: 18px !important;
  font-size: 1rem !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-sizing: border-box;
}
.gl-form-card .form-checkbox{
  margin-top: 6px;
  margin-bottom: 18px;
  font-size: 0.82rem;
  color: rgba(0,0,0,0.62);
}
.gl-microcopy{
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 0.78rem;
  color: rgba(0,0,0,0.45);
  letter-spacing: -0.005em;
}

.gl-pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.gl-pillar{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 36px 32px 32px;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.gl-pillar:hover{
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 24px 56px -20px rgba(0,0,0,0.14);
}
.gl-pillar-num{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(0,0,0,0.35);
  margin-bottom: 22px;
}
.gl-pillar-icon{
  width: 56px;
  height: 56px;
  margin-bottom: 22px;
  color: #1d1d1f;
}
.gl-pillar-icon svg{ width: 100%; height: 100%; }
.gl-pillar h3{
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  margin: 0 0 12px;
  color: #1d1d1f;
}
.gl-pillar p{
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  margin: 0;
}

.gl-issues{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.gl-issue{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  padding: 26px 28px 24px;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), border-color 0.25s ease, box-shadow 0.35s ease;
}
.gl-issue:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.12);
}
.gl-issue-meta{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.45);
  margin-bottom: 14px;
}
.gl-issue-num{
  text-transform: uppercase;
  color: #1d1d1f;
  letter-spacing: 0.10em;
}
.gl-issue h3{
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.3;
  margin: 0 0 10px;
  color: #1d1d1f;
}
.gl-issue p{
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  margin: 0 0 16px;
}
.gl-issue-tags{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.gl-issue-tags span{
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.65);
}

.gl-author-band{
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 36px;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 28px;
  padding: 40px 44px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 32px -16px rgba(0,0,0,0.10);
}
.gl-author-band img{
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.12);
}
.gl-author-band-info{ min-width: 0; }
.gl-author-band-eyebrow{
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.45);
  margin-bottom: 12px;
}
.gl-author-band h2{
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: #1d1d1f;
  margin: 0 0 14px;
}
.gl-author-band p{
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  margin: 0 0 16px;
  max-width: 60ch;
}
.gl-author-band-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.25);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.gl-author-band-link:hover{
  text-decoration-color: #1d1d1f;
}
.gl-author-band-link i{
  font-size: 0.78rem;
  transition: transform 0.25s cubic-bezier(.16,1,.3,1);
}
.gl-author-band-link:hover i{ transform: translateX(3px); }

@media (max-width: 960px){
  .gl-hero{ padding-top: 96px !important; padding-bottom: 56px !important; }
  .gl-hero-grid{
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .gl-pillars{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 36px !important;
  }
  .gl-issues{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 36px !important;
  }
  .gl-author-band{
    grid-template-columns: 1fr !important;
    text-align: center;
    padding: 32px 28px !important;
    gap: 20px !important;
  }
  .gl-author-band img{
    margin: 0 auto;
    width: 110px !important;
    height: 110px !important;
  }
  .gl-author-band p{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (max-width: 600px){
  .gl-hero-copy .hero-title{
    font-size: clamp(2.1rem, 8vw, 2.6rem) !important;
  }
  .gl-form-card{
    padding: 28px 24px !important;
    border-radius: 24px !important;
  }
  .gl-form-title{ font-size: 1.36rem !important; }
  .gl-pillar{ padding: 28px 24px 26px !important; }
  .gl-issue{ padding: 22px 22px 22px !important; }
  .gl-trust-line{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

.cta-band, .cta-band *,
.manifesto-card, .manifesto-card *,
.eco-brands, .eco-brands *,
.hebel-card.featured-dark, .hebel-card.featured-dark *,
.footer, .footer *,
.footer-quik, .footer-quik *,
.topbar, .topbar *{

}
.cta-band,
.manifesto-card,
.eco-brands,
.hebel-card.featured-dark,
.footer,
.footer-quik,
.topbar{
  color: #ffffff !important;
}
.cta-band p, .cta-band span, .cta-band li, .cta-band a,
.manifesto-card p, .manifesto-card span, .manifesto-card a,
.eco-brands p, .eco-brands span, .eco-brands a,
.hebel-card.featured-dark p, .hebel-card.featured-dark span,
.footer p, .footer span, .footer li, .footer a,
.footer-quik p, .footer-quik span, .footer-quik li, .footer-quik a,
.topbar span, .topbar a{
  color: #ffffff !important;
}
.footer p, .footer-quik p,
.footer span:not(.pill), .footer-quik span:not(.pill),
.cta-band p, .manifesto-card p{
  color: rgba(255,255,255,0.70) !important;
}
.footer h4, .footer-quik h4,
.cta-band h2, .cta-band .cta-title,
.manifesto-card h2, .manifesto-card h3{
  color: #ffffff !important;
}
.footer-bottom, .footer-bottom span, .footer-bottom a{
  color: rgba(255,255,255,0.55) !important;
}

.section-py > .container > .section-head h1,
.section-py > .container > .section-head h2,
.section-py > .container > .section-head h3,
.section-py > .container > h1,
.section-py > .container > h2,
.section-py > .container > h3{
  color: #1d1d1f !important;
}

.cta-band .btn-primary{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.cta-band .btn-primary i{ color: #1d1d1f !important; }
.cta-band .btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.cta-band .btn-outline i{ color: #ffffff !important; }

.form-card .btn-primary,
form .btn-primary,
.gl-form-card .btn-primary{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
}
.form-card .btn-primary i,
form .btn-primary i,
.gl-form-card .btn-primary i{ color: #ffffff !important; }

.topbar .text,
.topbar .text strong,
.topbar .arrow{
  color: #ffffff !important;
}

input, textarea, select{
  color: #1d1d1f !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(0,0,0,0.40) !important;
}

.footer a:hover, .footer-quik a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,0.50) !important;
}

.cta-band h2,
.cta-band h3,
.cta-band .cta-title,
.cta-band .cta-title *,
.cta-band .cta-sub,
.cta-band .cta-eyebrow,
.cta-band p,
.cta-band span,
.cta-band li,
.cta-band a:not(.btn-primary):not(.btn-outline),
.manifesto-card h2,
.manifesto-card h3,
.manifesto-card p,
.manifesto-card span,
.manifesto-card a:not(.btn-primary):not(.btn-outline),
section .cta-band h1,
section .cta-band h2,
section .cta-band h3{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.cta-band .cta-sub,
.manifesto-card p:not(:first-child){
  color: rgba(255,255,255,0.72) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.72) !important;
}
.cta-band .text-gradient,
.cta-band h2 .text-gradient,
.manifesto-card .text-gradient{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration-color: rgba(255,255,255,0.40) !important;
}

@keyframes q-particles-drift{
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(8px, -10px, 0); }
  50%  { transform: translate3d(-6px, -18px, 0); }
  75%  { transform: translate3d(10px, -8px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes q-particles-drift-slow{
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
  50%  { transform: translate3d(-12px, 8px, 0) scale(1.05); opacity: 0.85; }
  100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.5; }
}
@keyframes q-particles-twinkle{
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.95; }
}

.cta-band::before,
.eco-brands::before,
.hebel-card.featured-dark::before{
  animation: q-particles-drift 12s ease-in-out infinite, q-particles-twinkle 3.5s ease-in-out infinite !important;
}
.manifesto-card::before,
.footer::before,
.footer-quik::before{
  animation: q-particles-drift-slow 14s ease-in-out infinite !important;
}

.cta-band::after,
.eco-brands::after,
.manifesto-card::after,
.hebel-card.featured-dark::after,
.footer::after,
.footer-quik::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><g fill='%23ffffff' fill-opacity='0.40'><circle cx='95' cy='42' r='0.6'/><circle cx='234' cy='128' r='0.5'/><circle cx='378' cy='65' r='0.7'/><circle cx='522' cy='192' r='0.5'/><circle cx='672' cy='98' r='0.6'/><circle cx='148' cy='258' r='0.7'/><circle cx='312' cy='298' r='0.5'/><circle cx='456' cy='268' r='0.6'/><circle cx='604' cy='340' r='0.7'/><circle cx='745' cy='234' r='0.5'/><circle cx='62' cy='402' r='0.6'/><circle cx='208' cy='448' r='0.5'/><circle cx='358' cy='418' r='0.7'/><circle cx='498' cy='462' r='0.6'/><circle cx='648' cy='498' r='0.5'/><circle cx='98' cy='568' r='0.6'/><circle cx='268' cy='524' r='0.5'/><circle cx='420' cy='552' r='0.7'/></g></svg>") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0.6 !important;
  animation: q-particles-drift-slow 18s ease-in-out infinite reverse !important;
}

.cta-band > *:not(::before):not(::after),
.manifesto-card > *:not(::before):not(::after),
.eco-brands > *:not(::before):not(::after),
.footer > *:not(::before):not(::after),
.footer-quik > *:not(::before):not(::after),
.hebel-card.featured-dark > *:not(::before):not(::after){
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce){
  .cta-band::before, .cta-band::after,
  .manifesto-card::before, .manifesto-card::after,
  .eco-brands::before, .eco-brands::after,
  .hebel-card.featured-dark::before, .hebel-card.featured-dark::after,
  .footer::before, .footer::after,
  .footer-quik::before, .footer-quik::after{
    animation: none !important;
  }
}

.reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.reveal.is-visible{
  opacity: 1 !important;
  transform: none !important;
}

@keyframes q-fade-up-safe{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}
.reveal.is-visible.q-anim{
  animation: q-fade-up-safe 0.7s cubic-bezier(.16,1,.3,1) both;
}

html.no-js .reveal{ opacity: 1 !important; transform: none !important; }

.seo-guide-banner{
  background: #141416 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  position: relative;
  overflow: hidden;
}
.seo-guide-banner *{
  position: relative;
  z-index: 1;
}
.seo-guide-banner h2,
.seo-guide-banner h2 *,
.seo-guide-banner p,
.seo-guide-banner span,
.seo-guide-banner .sgb-eyebrow{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
.seo-guide-banner p{
  color: rgba(255,255,255,0.78) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
}
.seo-guide-banner .sgb-eyebrow{
  color: rgba(255,255,255,0.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
}
.seo-guide-banner .sgb-eyebrow i{
  color: #ffffff !important;
}
.seo-guide-banner .sgb-perks span,
.seo-guide-banner .sgb-perks span i{
  color: rgba(255,255,255,0.85) !important;
}
.seo-guide-banner .sgb-cta{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.seo-guide-banner .sgb-cta i{ color: #1d1d1f !important; }
.seo-guide-banner .sgb-cta:hover{
  background: rgba(255,255,255,0.92) !important;
  transform: translateY(-1px);
}

.seo-guide-banner::after{
  display: none !important;
}

.footer a,
.footer-quik a{
  text-decoration: none !important;
  background-image: none !important;
}
.footer a:hover,
.footer-quik a:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,0.50) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px !important;
}

.footer *:hover,
.footer-quik *:hover{
  text-decoration-color: rgba(255,255,255,0.50) !important;
}

.feature-card::after,
.pillar-card::after,
.leistung-card::after,
.compare-col::after,
.stat-card::after,
.fit-card::after,
.process-step::after,
.belief-card::after,
.experte-card::after,
.experte-card::before,
.article-card::after,
.blog-card::after,
.gl-pillar::after,
.gl-issue::after,
.faq-card::after{
  display: none !important;
  background: none !important;
  content: none !important;
}

.eco-brand-card::after,
.faq-list details::after,
details.faq-item::after{
  display: none !important;
}

.seo-guide-banner::after,
aside.seo-guide-banner::after{ display: none !important; }

[class*="card"]::after,
.cta-band::after,
.manifesto-card::after{

}

.cta-eyebrow,
.cta-eyebrow *,
.experten .cta-eyebrow,
section .cta-eyebrow{
  color: rgba(255,255,255,0.55) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}

[style*="color:#cca958"]{
  color: rgba(0,0,0,0.45) !important;
}

.hero-title .text-gradient,
.section-title .text-gradient,
h1 .text-gradient,
h2 .text-gradient{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  text-decoration: none !important;
  background: none !important;
  border-bottom: none !important;
  font-weight: 800 !important;
  font-style: normal !important;
}

.topbar .pill{
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
}
.topbar .text strong{
  color: #ffffff !important;
}

.brand-mark .accent{ fill: rgba(255,255,255,0.85) !important; }

.exp-domain-list{
  margin-top: 56px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  overflow: hidden;
}
.exp-domain-row{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 0.4fr;
  gap: 24px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background 0.25s ease;
}
.exp-domain-row:last-child{ border-bottom: none; }
.exp-domain-row:hover{ background: rgba(0,0,0,0.02); }
.exp-domain-name{
  font-size: 1rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.012em;
}
.exp-domain-slots{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.exp-domain-slots span{
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: -0.005em;
}
.exp-domain-slots span.taken{
  background: rgba(0,0,0,0.05);
  color: rgba(0,0,0,0.62);
}
.exp-domain-slots span.open{
  background: rgba(40,137,255,0.08);
  color: #2889ff;
  border: 0;
}
.exp-domain-status{
  text-align: right;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.exp-domain-status.full{ color: rgba(0,0,0,0.40); }
.exp-domain-status.open{ color: #1d1d1f; }

.experten-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.experten-step{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 36px 32px 32px;
  position: relative;
  transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.experten-step:hover{
  transform: translateY(-4px);
  border-color: rgba(0,0,0,0.14);
  box-shadow: 0 24px 56px -20px rgba(0,0,0,0.14);
}
.experten-step-num{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(0,0,0,0.35);
  margin-bottom: 24px;
}
.experten-step h3{
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #1d1d1f;
  margin: 0 0 12px;
}
.experten-step p{
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(0,0,0,0.62);
  margin: 0 0 16px;
}
.experten-step-meta{
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1d1d1f;
  padding: 6px 14px;
  background: rgba(0,0,0,0.05);
  border-radius: 999px;
  letter-spacing: -0.005em;
}

@media (max-width: 760px){
  .exp-domain-row{
    grid-template-columns: 1fr !important;
    padding: 18px 20px !important;
    gap: 10px !important;
  }
  .exp-domain-status{ text-align: left !important; }
  .experten-steps{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-top: 36px !important;
  }
  .experten-step{ padding: 28px 24px 26px !important; }
}

*,
em,
i:not([class*="fa-"]):not([class*="fas"]):not([class*="far"]):not([class*="fab"]),
cite,
address,
dfn,
var,
.text-gradient,
.hero-title .text-gradient,
.section-title .text-gradient,
h1 .text-gradient,
h2 .text-gradient,
.italic,
[class*="italic"],
blockquote,
q,
.quote{
  font-style: normal !important;
}

.av-stats em,
.stat-num em,
em{
  font-style: normal !important;
  font-weight: inherit;
}

i.fa-solid, i.fa-regular, i.fa-brands, i.fa-light, i.fa-thin,
i.fas, i.far, i.fab, i.fal, i.fat,
i[class*="fa-"]{
  font-style: normal !important;
}

.page-intro .hero-eyebrow,
.page-intro .hero-eyebrow span,
.page-intro .hero-eyebrow .pill,
.section-head .hero-eyebrow,
.section-head .hero-eyebrow span,
.section-head .hero-eyebrow .pill,
section .hero-eyebrow,
section .hero-eyebrow span{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  opacity: 1 !important;
}
.page-intro .hero-eyebrow .pill{
  background: rgba(0,0,0,0.05) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  color: #1d1d1f !important;
}

.page-intro .hero-subtitle,
section.page-intro .hero-subtitle,
.hero-subtitle{
  color: rgba(0,0,0,0.65) !important;
  opacity: 1 !important;
}

section.page-intro [style*="background:rgba(0,0,0,0.04)"],
section.page-intro [style*="background: rgba(0,0,0,0.04)"]{
  background: rgba(0,0,0,0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

[style*="color:#cca958"],
[style*="color: #cca958"]{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}

section.page-intro [style*="background:#141416"],
section.page-intro [style*="background: #141416"],
.section-py:not(.cta-band-section) [style*="background:#141416"]:not(.cta-band):not(.manifesto-card):not(.eco-brands){
  background: rgba(0,0,0,0.05) !important;
  color: #1d1d1f !important;
}

.form-card,
.gl-form-card,
.experte-card,
.fit-card,
.feature-card,
.pillar-card,
.leistung-card,
.belief-card,
.process-step,
.gl-pillar,
.gl-issue,
.experten-step,
.exp-domain-list,
.article-author-card{
  color: #1d1d1f !important;
}
.form-card *:not(button):not(.btn-primary):not(.btn-outline),
.gl-form-card *:not(button):not(.btn-primary):not(.btn-outline){
  color: inherit;
}

.form-card .btn-primary,
.gl-form-card .btn-primary,
form .btn-primary,
section .form-card .btn-primary,
section.page-intro .btn-primary{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
}
.form-card .btn-primary i,
.gl-form-card .btn-primary i,
form .btn-primary i{ color: #ffffff !important; }

.cta-band .btn-primary,
.manifesto-card .btn-primary{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: none !important;
}
.cta-band .btn-primary i,
.manifesto-card .btn-primary i{ color: #1d1d1f !important; }

.cta-band .btn-outline,
.manifesto-card .btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}

.page-intro .btn-outline,
.gl-hero .btn-outline,
.hero-cta-row .btn-outline{
  background: rgba(0,0,0,0.04) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
}
.page-intro .btn-outline i,
.hero-cta-row .btn-outline i{ color: #1d1d1f !important; }

section .cta-band .btn-outline,
section .cta-band a.btn-outline,
section .cta-band .cta-row .btn-outline,
body .cta-band .btn-outline,
body .cta-band a.btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
}
section .cta-band .btn-outline i,
section .cta-band a.btn-outline i,
body .cta-band .btn-outline i{
  color: #ffffff !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea,
select{
  color: #1d1d1f !important;
  background: #ffffff !important;
}
input::placeholder, textarea::placeholder{ color: rgba(0,0,0,0.40) !important; }

.form-card a, .gl-form-card a,
.experte-card a, .article-author-card a:not(.btn-primary):not(.btn-outline){
  color: #1d1d1f !important;
}

.footer, .footer-quik,
.footer *, .footer-quik *{
  color: rgba(255,255,255,0.78);
}
.footer a, .footer-quik a, .footer h4, .footer-quik h4{
  color: #ffffff;
}

.topbar, .topbar *{ color: #ffffff !important; }
.topbar .pill{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
}

.cta-band,
.hero-cta-band,
.cta-band-dark,
section.cta-band{
  background: #1d1d1f !important;
}
.hero-section,
.hero,
.page-intro,
.lab-branch,
.lab-branch-startup{
  background: #ffffff !important;
}
.hero-section.dark,
.hero.dark,
.section-dark,
.dark-section{
  background: #1d1d1f !important;
}
.ambient::before,
.ambient::after,
.ambient-soft,
.ambient-soft::before,
.soft-vignette,
.soft-glow{
  background: transparent !important;
}

.bubble,
.bubble.alt-1,
.avatar:nth-child(1),
.avatar:nth-child(2),
.avatar:nth-child(3),
.avatar:nth-child(4){
  background: #1d1d1f !important;
}

.brand-mark{ background: #1d1d1f !important; }
.brand-mark::before{ background: transparent !important; }

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-nav,
.footer-cta,
a.btn,
button.btn{
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
}
.btn-primary i,
.btn-secondary i,
.btn-outline i,
.btn-nav i,
.footer-cta i,
a.btn i,
button.btn i,
.cta i.fa-solid,
.cta i.fa-regular,
.btn-primary svg,
.btn-outline svg{
  color: inherit !important;
}
.btn-primary:hover i,
.btn-outline:hover i,
.btn-nav:hover i,
.footer-cta:hover i{
  color: inherit !important;
}

.cta-band .btn-outline,
.cta-band a.btn-outline,
.cta-section .btn-outline,
section.cta-band .btn-outline{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.40) !important;
}
.cta-band .btn-outline i,
.cta-band a.btn-outline i,
.cta-section .btn-outline i,
section.cta-band .btn-outline i{
  color: #ffffff !important;
}
.cta-band .btn-outline:hover,
.cta-band a.btn-outline:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-outline:not(.cta-band .btn-outline){
  color: #1d1d1f !important;
  border: 1px solid #1d1d1f !important;
}
.btn-outline:not(.cta-band .btn-outline) i{
  color: #1d1d1f !important;
}
.btn-outline:not(.cta-band .btn-outline):hover{
  background: #1d1d1f !important;
  color: #ffffff !important;
}
.btn-outline:not(.cta-band .btn-outline):hover i{
  color: #ffffff !important;
}

.article-body a i,
.article-body a svg,
a:hover i,
a:hover svg,
nav a i,
.btn i,
.cta i{
  text-decoration: none !important;
  border-bottom: none !important;
}
.article-body a{
  text-decoration-skip-ink: auto;
}

.filter-section{ padding: 96px 0 !important; }
.filter-section .section-head{ margin-bottom: 64px; }
.filter-track{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  margin-top: 40px;
}
.filter-track::before{
  content: '';
  position: absolute;
  top: 56px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: rgba(20,20,22,0.08);
  z-index: 0;
}
.filter-stage{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  padding: 36px 32px;
  position: relative;
  z-index: 1;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 12px 32px rgba(0,0,0,0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.filter-stage:hover{
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 22px 48px rgba(0,0,0,0.10);
  border-color: rgba(204,169,88,0.40);
}
.filter-stage .filter-num{
  position: absolute;
  top: 28px;
  right: 32px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #cca958;
  letter-spacing: 0.20em;
}
.filter-stage .filter-icon{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #1d1d1f;
  color: #cca958;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 6px;
}
.filter-stage h3{
  font-size: 1.4rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}
.filter-stage > p{
  font-size: 0.98rem;
  line-height: 1.6;
  color: #515154;
  margin: 0;
}
.filter-points{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  border-top: 1px solid rgba(20,20,22,0.06);
  padding-top: 16px;
}
.filter-points li{
  font-size: 0.92rem;
  color: #1d1d1f;
  font-weight: 500;
  padding: 8px 0 8px 22px;
  position: relative;
  line-height: 1.5;
}
.filter-points li::before{
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 8px;
  color: #cca958;
  font-size: 0.78rem;
}
.filter-stage-lead{
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #ffffff;
}
.filter-stage-lead h3{ color: #ffffff; }
.filter-stage-lead > p{ color: rgba(255,255,255,0.70); }
.filter-stage-lead .filter-points{ border-top-color: rgba(255,255,255,0.10); }
.filter-stage-lead .filter-points li{ color: #ffffff; }
.filter-stage-lead .filter-icon{
  background: #ffffff;
  color: #1d1d1f;
}
@media (max-width: 900px){
  .filter-track{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .filter-track::before{ display: none; }
  .filter-section{ padding: 72px 0 !important; }
}

.text-gradient,
.text-gradient .word,
.text-gradient .word > span,
h1 .text-gradient,
h2 .text-gradient,
h3 .text-gradient{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  background: none !important;
  background-image: none !important;
  font-weight: 800 !important;
}

.section-eyebrow,
.hero-eyebrow .pill{
  color: #515154 !important;
  background: rgba(20,20,22,0.04) !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
}
.section-eyebrow{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.leistung-icon,
.pillar-icon,
.feature-icon,
.expert-card .expert-icon,
.qg-popup-eyebrow i,
.feat-banner-icon{
  background: rgba(20,20,22,0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.06);
}

.filter-stage .filter-icon{
  background: #1d1d1f !important;
  color: #ffffff !important;
}
.filter-stage-lead .filter-icon{
  background: #ffffff !important;
  color: #1d1d1f !important;
}
.filter-stage .filter-num{
  color: #86868b !important;
  font-weight: 600 !important;
}

.filter-points li::before{
  color: #1d1d1f !important;
}

.err-code .err-zero{
  color: #1d1d1f !important;
}
.err-eyebrow{
  color: #515154 !important;
}
.err-eyebrow::before,
.err-eyebrow::after{
  background: #d2d2d7 !important;
}
.err-grid a i{
  color: #1d1d1f !important;
}

.doi-mark{
  background: #1d1d1f !important;
  color: #ffffff !important;
}
.doi-eyebrow{
  color: #515154 !important;
}
.doi-eyebrow::before,
.doi-eyebrow::after{
  background: #d2d2d7 !important;
}
.doi-title em{
  color: #1d1d1f !important;
  font-weight: 800 !important;
}
.doi-step .num{
  color: #86868b !important;
}
.doi-hint{
  background: rgba(20,20,22,0.04) !important;
  border-color: rgba(20,20,22,0.08) !important;
}
.doi-hint i{
  color: #1d1d1f !important;
}

.article-overview .badge{
  background: rgba(20,20,22,0.06) !important;
  color: #515154 !important;
  border: 1px solid rgba(20,20,22,0.10) !important;
}

.seo-guide-inline{
  background: #1d1d1f !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}
.seo-guide-inline .icon{
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}
.seo-guide-inline .eyebrow{
  color: rgba(255,255,255,0.65) !important;
}
.seo-guide-inline strong{
  color: #ffffff !important;
}
.seo-guide-inline span{
  color: rgba(255,255,255,0.75) !important;
}
.seo-guide-inline .cta{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: none !important;
}
.seo-guide-inline .cta i{
  color: #1d1d1f !important;
}

.qg-gold,
.qg-popup-head .qg-gold{
  color: #1d1d1f !important;
}

.article-cat,
.article-card-cat{
  background: rgba(20,20,22,0.85) !important;
  color: #ffffff !important;
  border: none !important;
}

.reading-progress{
  background: #1d1d1f !important;
}

.av-compare .box li::before,
.av-stats .stat .num em,
.qg-popup-eyebrow i.fa-sparkles{
  color: #1d1d1f !important;
}

.article-body a{
  text-decoration: underline !important;
  text-decoration-color: rgba(20,20,22,0.30) !important;
  text-underline-offset: 2px !important;
}
.article-body a:hover{
  text-decoration-color: #1d1d1f !important;
}

.brand-mark .accent,
.brand-mark circle.accent{
  fill: #ffffff !important;
}

.footer-cta i,
.footer a i{
  color: inherit !important;
}

.topbar .pill i{
  color: #ffffff !important;
}

.author-strip .by-line,
.article-author-card .label{
  color: #86868b !important;
}

.article-overview .icon{
  background: rgba(20,20,22,0.06) !important;
  color: #1d1d1f !important;
}

.av-compare .box.dark h5{
  color: rgba(255,255,255,0.65) !important;
}

.pillar-card::before,
.pillar-card::after,
.leistung-card::before,
.leistung-card::after,
.feature-card::before{
  background: transparent !important;
  border-color: rgba(20,20,22,0.08) !important;
}

.lab-branch-num,
.lab-branch-startup .lab-branch-num{
  background: #1d1d1f !important;
  color: #ffffff !important;
}

.pillar-card:hover,
.leistung-card:hover,
.feature-card:hover,
.article-card:hover,
.expert-card:hover{
  border-color: rgba(20,20,22,0.20) !important;
}

.filter-stage:hover{
  border-color: rgba(20,20,22,0.20) !important;
}

.manifesto-quote em,
blockquote em{
  color: #1d1d1f !important;
  font-style: normal !important;
}

.article-toc h2,
.article-overview h2{
  color: #1d1d1f !important;
}
.article-toc ol li a:hover{
  color: #1d1d1f !important;
}

.tag-cloud a{
  background: #ffffff !important;
  color: #515154 !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
}
.tag-cloud a:hover{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border-color: #1d1d1f !important;
}

html body .text-gradient,
html body .text-gradient *,
html body .hero-title .text-gradient,
html body .section-title .text-gradient,
html body .section-head .text-gradient,
html body .section-head.reveal .text-gradient,
html body .section-head.reveal.is-visible .text-gradient,
html body h1 .text-gradient,
html body h2 .text-gradient,
html body h3 .text-gradient,
html body .cta-title .text-gradient{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-decoration: none !important;
  border-bottom: none !important;
  font-weight: 800 !important;
}
html body .cta-band .text-gradient,
html body .cta-band h2 .text-gradient,
html body section .cta-band .text-gradient,
html body .manifesto-card .text-gradient{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .mobile-sticky-cta a,
html body .mobile-sticky-cta a.primary{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: none !important;
}
html body .mobile-sticky-cta a:not(.primary){
  background: rgba(255,255,255,0.95) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.12) !important;
}
html body .mobile-sticky-cta a i{ color: inherit !important; }

html body .arch-card .arch-num,
html body .arch-card .arch-step-eyebrow,
html body .pattern-grid .cell .num{
  color: rgba(255,255,255,0.45) !important;
}
html body .feature-card .arch-step-eyebrow,
html body .step .arch-step-eyebrow,
html body .compare-eyebrow,
html body .price-card .arch-step-eyebrow,
html body .step-eyebrow{
  color: #86868b !important;
}
html body .arch-card .arch-icon,
html body .quik-card .arch-icon{
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

html body .hero-trust i,
html body .trust-strip i,
html body .hero-checks i{
  color: #1d1d1f !important;
}

html body .section-eyebrow,
html body .hero-eyebrow .pill,
html body .arch-step-eyebrow,
html body .compare-eyebrow{
  color: #86868b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
html body .cta-band .section-eyebrow,
html body .cta-band .cta-eyebrow,
html body section .cta-band .cta-eyebrow,
html body .compare-col.good .compare-eyebrow,
html body .compare-col.b .compare-eyebrow{
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

html body .v-pattern .cell.cluster::after{
  border-color: rgba(20,20,22,0.20) !important;
}
html body .v-pattern .cell.gold{
  background: #1d1d1f !important;
  color: #ffffff !important;
}

html body .av-bars .bar-row .bar .fill{
  background: #1d1d1f !important;
}
html body .av-bars .bar-row .bar .fill.gold{
  background: #515154 !important;
}

html body a.btn-primary i,
html body button.btn-primary i,
html body .btn-primary i,
html body .btn-primary svg,
html body a.btn-outline i,
html body button.btn-outline i,
html body .btn-outline i,
html body .btn-outline svg,
html body a.btn-nav i,
html body .btn-nav i,
html body .footer-cta i,
html body .cta i,
html body .leistung-cta i,
html body a.btn i,
html body button i{
  color: inherit !important;
  fill: currentColor !important;
}

html body .hero-title{
  font-size: clamp(1.8rem, 4.2vw, 3rem) !important;
  letter-spacing: -0.024em !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  text-wrap: balance !important;
}
html body .section-title{
  font-size: clamp(1.7rem, 3.8vw, 2.6rem) !important;
  letter-spacing: -0.022em !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  text-wrap: balance !important;
}
html body .cta-title,
html body .manifesto-card h2{
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  text-wrap: balance !important;
}

@media (max-width: 768px){
  html body .hero-title,
  html body h1.hero-title{
    font-size: clamp(1.6rem, 7vw, 2rem) !important;
    line-height: 1.18 !important;
    padding: 0 4px !important;
  }
  html body .section-title,
  html body h2.section-title{
    font-size: clamp(1.45rem, 6vw, 1.85rem) !important;
    line-height: 1.2 !important;
    padding: 0 4px !important;
  }
  html body .cta-title{
    font-size: clamp(1.4rem, 5.5vw, 1.8rem) !important;
    line-height: 1.2 !important;
  }
  html body .hero-subtitle,
  html body .section-sub,
  html body .cta-sub{
    font-size: 0.98rem !important;
    line-height: 1.55 !important;
  }
  html body .section-py{
    padding: 56px 0 !important;
  }
  html body .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .hero-ctas,
  html body .hero-cta-row,
  html body .err-ctas,
  html body .doi-actions{
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 10px !important;
  }
  html body .hero-ctas a,
  html body .hero-cta-row a,
  html body .err-ctas a,
  html body .doi-actions a{
    width: 100% !important;
    justify-content: center !important;
  }
  html body .hero-eyebrow{
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  html body .hero-eyebrow .pill,
  html body .hero-eyebrow span{
    font-size: 0.66rem !important;
    padding: 4px 10px !important;
  }
  html body .article-grid,
  html body .feature-grid,
  html body .pillars-grid,
  html body .filter-track,
  html body .price-grid,
  html body .compare-grid,
  html body .steps-4,
  html body .feature-grid-4,
  html body .doi-steps,
  html body .err-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  html body .filter-track::before{
    display: none !important;
  }
  html body .feature-card,
  html body .pillar-card,
  html body .leistung-card,
  html body .article-card,
  html body .filter-stage,
  html body .price-card{
    padding: 22px 18px !important;
  }
  html body .mobile-sticky-cta{
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  html body .mobile-sticky-cta a{
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
    border-radius: 999px !important;
  }
  html body .topbar{
    font-size: 0.74rem !important;
  }
  html body .topbar .arrow{
    display: none !important;
  }
  html body .author-hero-card{
    flex-direction: column !important;
  }
  html body .article-hero-inner{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html body .article-hero-cover img{
    max-height: 220px !important;
    object-fit: cover !important;
  }
}

@media (max-width: 480px){
  html body .hero-title,
  html body h1.hero-title{
    font-size: 1.65rem !important;
    letter-spacing: -0.02em !important;
  }
  html body .section-title,
  html body h2.section-title{
    font-size: 1.45rem !important;
  }
  html body .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html body .section-py{
    padding: 44px 0 !important;
  }
  html body .topbar .pill{
    display: none !important;
  }
  html body .topbar .text{
    font-size: 0.72rem !important;
  }
  html body .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

html body h1 em,
html body h2 em,
html body h3 em,
html body .hero-title em,
html body .section-title em,
html body .cta-title em,
html body .feature-title em,
html body .step-title em{
  color: #1d1d1f !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body .arch-card h3 em,
html body .quik-card h3 em,
html body .arch-card .feature-title em,
html body .arch-hero em,
html body .arch-hero h3 em,
html body .arch-hero-tier em,
html body .arch-hero-tier h3 em,
html body .cta-band em,
html body .cta-band h2 em,
html body .manifesto-card em{
  color: #ffffff !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body .arch-hero .arch-step-eyebrow,
html body .arch-hero-tier .arch-step-eyebrow,
html body .arch-hero .arch-num,
html body .arch-hero-tier .arch-num{
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  border: none !important;
}
html body .arch-hero .tier-icon,
html body .arch-hero-tier .tier-icon{
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html body .arch-hero .tier-icon i,
html body .arch-hero-tier .tier-icon i{
  color: #ffffff !important;
}
html body .arch-hero .pct,
html body .arch-hero-tier .pct,
html body .arch-hero .status{
  color: rgba(255,255,255,0.65) !important;
}
html body .arch-hero .arch-flow-arrow,
html body .arch-hero .arch-flow-arrow i,
html body .arch-hero-tier .arch-flow-arrow,
html body .arch-hero-tier .arch-flow-arrow i,
html body .arch-hero .arch-flow-down,
html body .arch-hero .arch-flow-down i{
  color: rgba(255,255,255,0.45) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

html body .arch-hero .arch-meta,
html body .arch-hero-meta{
  color: rgba(255,255,255,0.55) !important;
}
html body .arch-hero .arch-meta span,
html body .arch-hero-meta span,
html body .arch-hero .arch-meta strong{
  color: rgba(255,255,255,0.55) !important;
}

html body .gold-text{
  color: inherit !important;
}
html body .cta-band .gold-text,
html body .arch-card .gold-text{
  color: rgba(255,255,255,0.85) !important;
}

html body .arch-card .tier-icon,
html body .quik-card .tier-icon{
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
html body .arch-card .tier-icon i,
html body .quik-card .tier-icon i{
  color: #ffffff !important;
}

html body .arch-flow-arrow,
html body .arch-flow-arrow i{
  color: rgba(255,255,255,0.45) !important;
}

html body .arch-card .pct,
html body .quik-card .pct,
html body .arch-stage .pct{
  color: rgba(255,255,255,0.65) !important;
}

html body .arch-card .status,
html body .live-dot + .status{
  color: rgba(255,255,255,0.75) !important;
}

html body .arch-card .arch-flow-down,
html body .arch-down-arrow{
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.65) !important;
}
html body .arch-card .arch-flow-down i,
html body .arch-down-arrow i{
  color: rgba(255,255,255,0.65) !important;
}

html body .arch-card .arch-step-eyebrow,
html body .quik-card .arch-step-eyebrow,
html body .arch-card .arch-num{
  color: rgba(255,255,255,0.55) !important;
  background: transparent !important;
}

@media (max-width: 768px){
  html body .arch-card,
  html body .quik-card{
    padding: 20px 18px !important;
  }
  html body .arch-card h3,
  html body .quik-card h3{
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
  }
  html body .arch-meta{
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
}

html body .mega-quote-text em,
html body .mega-quote em,
html body .quote em,
html body blockquote em,
html body .arch-hero-tier em,
html body .tier-card em,
html body p em{
  color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

html body .section-py h2 em,
html body .container h2 em,
html body main h1 em,
html body main h2 em{
  color: #1d1d1f !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

html body .arch-hero h2 em,
html body .arch-hero h3 em,
html body section.dark h2 em,
html body section[style*="background: #1d1d1f"] h2 em,
html body .cta-band h2 em,
html body .manifesto-card em{
  color: #ffffff !important;
}

html body .status,
html body .leistung-head .status,
html body span.status{
  color: #515154 !important;
}
html body .live-dot{
  background: #34c759 !important;
}

html body .tier-num,
html body .arch-hero .tier-num,
html body .arch-hero-tier .tier-num{
  color: rgba(255,255,255,0.55) !important;
  font-weight: 700 !important;
}

html body .btn-primary i,
html body .btn-primary svg,
html body a.btn-primary i,
html body a.btn-primary svg,
html body button.btn-primary i{
  color: inherit !important;
  fill: currentColor !important;
}

html body .section-eyebrow,
html body .hero-eyebrow .pill,
html body .arch-step-eyebrow,
html body .compare-eyebrow,
html body .step-eyebrow{
  color: #86868b !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

html body .cta-band .section-eyebrow,
html body .cta-band .cta-eyebrow,
html body section .cta-band .section-eyebrow,
html body .arch-hero .arch-step-eyebrow,
html body .arch-hero-tier .arch-step-eyebrow,
html body .arch-hero .compare-eyebrow,
html body .compare-col.good .compare-eyebrow,
html body .compare-col.b .compare-eyebrow{
  color: rgba(255,255,255,0.90) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

html body .arch-hero p,
html body .arch-hero-tier p,
html body .arch-hero li,
html body .arch-hero-tier li,
html body .arch-hero .tier-desc,
html body .arch-hero-tier .tier-desc,
html body .cta-band p,
html body .cta-band li,
html body .manifesto-card p,
html body .filter-stage-lead p,
html body .filter-stage-lead li{
  color: rgba(255,255,255,0.82) !important;
}
html body .arch-hero .tier-eyebrow,
html body .arch-hero-tier .tier-eyebrow,
html body .arch-hero .phase,
html body .arch-hero-tier .phase,
html body .arch-hero .pct,
html body .arch-hero-tier .pct{
  color: rgba(255,255,255,0.72) !important;
}

html body p.section-sub,
html body p.hero-subtitle,
html body p.lede,
html body .section-sub,
html body .hero-subtitle{
  color: #515154 !important;
}

html body .feature-text,
html body .pillar-card p,
html body .leistung-card p,
html body .step-text,
html body .compare-list li,
html body .filter-points li{
  color: #1d1d1f !important;
}

html body .compare-list li::before,
html body .filter-points li::before,
html body .feature-list li::before{
  color: #86868b !important;
}

html body .footer p,
html body .footer-tag,
html body .footer-quik p{
  color: rgba(255,255,255,0.78) !important;
}
html body .footer a,
html body .footer-quik a,
html body .footer li a{
  color: rgba(255,255,255,0.92) !important;
}
html body .footer h4,
html body .footer-quik h4{
  color: #ffffff !important;
}

html body .topbar a,
html body .topbar .text,
html body .topbar strong{
  color: #ffffff !important;
}
html body .topbar .pill{
  color: #ffffff !important;
  background: rgba(255,255,255,0.14) !important;
}

html body .compare-col .compare-list li{
  color: #1d1d1f !important;
}
html body .compare-col.good .compare-list li,
html body .compare-col.b .compare-list li{
  color: rgba(255,255,255,0.92) !important;
}

html body .article-body p,
html body .article-body li{
  color: #1d1d1f !important;
}
html body .article-body p strong,
html body .article-body li strong{
  color: #1d1d1f !important;
}

html body .author-strip .by-line,
html body .author-strip .by-name,
html body .article-author-card .role,
html body .article-author-card .label{
  color: #515154 !important;
}

html body .article-meta-row{
  color: #515154 !important;
}
html body .article-meta-row span{
  color: #515154 !important;
}

html body .breadcrumbs,
html body .breadcrumbs a{
  color: #515154 !important;
}
html body .breadcrumbs span[aria-current]{
  color: #1d1d1f !important;
}

html body .article-card-body p,
html body .feature-card p,
html body .leistung-card p,
html body .pillar-card p{
  color: #515154 !important;
}

html body .article-card-cat{
  color: #ffffff !important;
  background: rgba(20,20,22,0.90) !important;
}

html body input,
html body textarea{
  color: #1d1d1f !important;
}
html body label,
html body .form-checkbox span{
  color: #1d1d1f !important;
}

html body .mobile-sticky-cta a:not(.primary){
  color: #1d1d1f !important;
  background: #ffffff !important;
  border: 1px solid rgba(20,20,22,0.18) !important;
}

html body main .btn-primary i,
html body main .btn-primary i.fa-arrow-right,
html body main .btn-primary i.fa-arrow-left,
html body main .btn-primary i.fa-calendar-check,
html body main .btn-primary i.fa-paper-plane,
html body main .btn-primary i.fa-rocket,
html body main .btn-primary i.fa-bolt,
html body main .btn-primary i.fa-handshake,
html body main .btn-primary i.fa-users,
html body main .btn-primary i.fa-arrow-up,
html body main .btn-primary i.fa-arrow-down,
html body main .btn-primary i.fa-download,
html body main .btn-primary i.fa-pen-nib,
html body main .btn-primary i.fa-circle-info,
html body main .btn-primary i.fa-house,
html body main .btn-primary i.fa-newspaper,
html body main .btn-primary i.fa-sparkles,
html body main .btn-primary svg,
html body footer .btn-primary i,
html body .btn-primary i,
html body section .btn-primary i,
html body section .cta-band .btn-primary i,
html body section .cta-band .btn-primary i.fa-arrow-right{
  color: inherit !important;
  fill: currentColor !important;
}
html body main .btn-outline i,
html body main .btn-outline i.fa-arrow-right,
html body main .btn-outline i.fa-calendar-check,
html body main .btn-outline i.fa-newspaper,
html body main .btn-outline i.fa-house,
html body main .btn-outline svg,
html body footer .btn-outline i,
html body .btn-outline i,
html body section .btn-outline i,
html body section .cta-band .btn-outline i,
html body section .cta-band .btn-outline i.fa-arrow-right{
  color: inherit !important;
  fill: currentColor !important;
}
html body .btn-nav i,
html body main .btn-nav i,
html body nav .btn-nav i,
html body .footer-cta i,
html body footer .footer-cta i,
html body .cta i.fa-arrow-right,
html body .leistung-cta i,
html body .leistung-cta i.fa-arrow-right{
  color: inherit !important;
  fill: currentColor !important;
}

html body .section-eyebrow,
html body .hero-eyebrow,
html body .hero-eyebrow .pill,
html body .hero-eyebrow > span,
html body .hero-eyebrow span.pill,
html body span.hero-eyebrow span.pill,
html body .arch-step-eyebrow,
html body .compare-eyebrow,
html body .step-eyebrow,
html body .tier-eyebrow,
html body .arch-meta .arch-step-eyebrow,
html body .err-eyebrow,
html body .doi-eyebrow,
html body section .section-eyebrow,
html body section .hero-eyebrow .pill,
html body main .hero-eyebrow .pill,
html body header .hero-eyebrow .pill,
html body .page-intro .hero-eyebrow .pill{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #86868b !important;
  display: inline-block;
}
html body .hero-eyebrow{
  display: inline-flex !important;
  gap: 14px !important;
  align-items: center !important;
}
html body .hero-eyebrow .pill,
html body .hero-eyebrow > span{
  position: relative;
}

html body .hero-eyebrow .pill + span::before,
html body .hero-eyebrow > span + span::before{
  content: '·';
  margin-right: 14px;
  color: #c7c7cc;
  font-weight: 400;
}

html body .cta-band .section-eyebrow,
html body .cta-band .cta-eyebrow,
html body .arch-hero .section-eyebrow,
html body .arch-hero .arch-step-eyebrow,
html body .arch-hero-tier .arch-step-eyebrow,
html body .arch-hero-tier .tier-eyebrow,
html body section.dark .section-eyebrow,
html body .filter-stage-lead .arch-step-eyebrow,
html body .compare-col.good .compare-eyebrow,
html body .compare-col.b .compare-eyebrow,
html body .compare-col.dark .compare-eyebrow,
html body .price-card.featured .arch-step-eyebrow,
html body .price-card.dark .arch-step-eyebrow,
html body .filter-stage-lead .filter-num,
html body .av-compare .box.dark h5{
  color: #ffffff !important;
  opacity: 1 !important;
}

html body .cta-band p:not(.section-sub):not(.hero-subtitle),
html body .arch-hero p,
html body .compare-col.good p,
html body .compare-col.b p,
html body .filter-stage-lead p,
html body .price-card.featured p,
html body .arch-hero li{
  color: rgba(255,255,255,0.82) !important;
}

html body .arch-hero .tier-num,
html body .arch-hero-tier .tier-num,
html body .arch-hero .phase,
html body .arch-hero-tier .phase,
html body .arch-hero .pct,
html body .arch-hero-tier .pct,
html body .filter-stage-lead .filter-num{
  color: rgba(255,255,255,0.75) !important;
}

html body .article-card-cover{
  position: relative !important;
}
html body .article-card-cat,
html body .article-card-cover .article-card-cat{
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.94) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  display: inline-block;
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

html body .article-cat,
html body .article-meta-row .article-cat{
  background: rgba(20,20,22,0.06) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.10) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  display: inline-block;
}

html body .page-intro:not(.gl-hero):not(.author-hero) .hero-title,
html body .page-intro:not(.gl-hero):not(.author-hero) .hero-subtitle{
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}
html body .page-intro:not(.gl-hero):not(.author-hero) .hero-subtitle{
  max-width: 640px !important;
}

html body .section-head .section-title,
html body .section-head h2.section-title{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}
html body .section-head .section-sub{
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}

html body .cta-band .cta-title,
html body .cta-band h2,
html body .manifesto-card h2,
html body .err-headline,
html body .doi-title{
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}
html body .cta-band .cta-sub,
html body .err-sub,
html body .doi-sub{
  max-width: 580px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}

html body .gl-hero .hero-title,
html body .gl-hero .hero-subtitle,
html body .gl-hero .gl-hero-copy h1,
html body .gl-hero .gl-hero-copy p,
html body .author-hero .hero-title,
html body .author-hero .hero-subtitle{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  text-wrap: balance !important;
}

html body .article-hero h1,
html body .article-hero .lede{
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

@media (max-width: 768px){
  html body .hero-title,
  html body .section-title,
  html body .cta-title,
  html body .hero-subtitle,
  html body .section-sub,
  html body .cta-sub{
    max-width: 100% !important;
  }
}

html body .cta-band,
html body .cta-band *,
html body .manifesto-card,
html body .manifesto-card *,
html body .arch-hero,
html body .arch-hero *,
html body .arch-hero-tier,
html body .arch-hero-tier *,
html body .compare-col.good,
html body .compare-col.good *,
html body .compare-col.b,
html body .compare-col.b *,
html body .price-card.featured,
html body .price-card.featured *,
html body .filter-stage-lead,
html body .filter-stage-lead *,
html body .pillar-card.dark,
html body .pillar-card.dark *,
html body .expert-card.dark,
html body .expert-card.dark *,
html body .feature-card.dark,
html body .feature-card.dark *,
html body .experte-cta,
html body .experte-card.dark,
html body .quik-card,
html body .quik-card *,
html body .arch-card,
html body .arch-card *{
  
}

html body .cta-band h1, html body .cta-band h2, html body .cta-band h3, html body .cta-band h4, html body .cta-band h5,
html body .manifesto-card h1, html body .manifesto-card h2, html body .manifesto-card h3,
html body .arch-hero h1, html body .arch-hero h2, html body .arch-hero h3, html body .arch-hero h4,
html body .arch-hero-tier h1, html body .arch-hero-tier h2, html body .arch-hero-tier h3,
html body .compare-col.good h2, html body .compare-col.good h3, html body .compare-col.good h4,
html body .compare-col.b h2, html body .compare-col.b h3,
html body .price-card.featured h2, html body .price-card.featured h3,
html body .filter-stage-lead h2, html body .filter-stage-lead h3,
html body .expert-card.dark h2, html body .expert-card.dark h3,
html body .experte-card h2, html body .experte-card h3,
html body .quik-card h2, html body .quik-card h3,
html body .arch-card h2, html body .arch-card h3,
html body section.dark h2, html body section.dark h3{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html body .cta-band p, html body .cta-band li, html body .cta-band span:not(.section-eyebrow):not(.cta-eyebrow):not(.pill),
html body .manifesto-card p, html body .manifesto-card li,
html body .arch-hero p, html body .arch-hero li,
html body .arch-hero-tier p, html body .arch-hero-tier li,
html body .compare-col.good p, html body .compare-col.good li,
html body .compare-col.b p, html body .compare-col.b li,
html body .price-card.featured p, html body .price-card.featured li,
html body .filter-stage-lead p, html body .filter-stage-lead li,
html body .expert-card.dark p, html body .expert-card.dark li,
html body .experte-card.dark p, html body .experte-card.dark li,
html body .quik-card p, html body .quik-card li,
html body .arch-card p, html body .arch-card li{
  color: rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}

html body .experte-card:not(.dark) p,
html body .experte-card:not(.dark) li,
html body .experte-card:not(.dark) h2,
html body .experte-card:not(.dark) h3,
html body .experte-card:not(.dark) .experte-role,
html body .experte-card:not(.dark) .experte-bio,
html body .experte-card:not(.dark) .experte-name{
  color: #1d1d1f !important;
  -webkit-text-fill-color: #1d1d1f !important;
}
html body .experte-card:not(.dark) .experte-role,
html body .experte-card:not(.dark) .experte-bio{
  color: #515154 !important;
  -webkit-text-fill-color: #515154 !important;
}

html body .cta-band .section-eyebrow, html body .cta-band .cta-eyebrow,
html body .arch-hero .section-eyebrow, html body .arch-hero .arch-step-eyebrow,
html body .arch-hero-tier .section-eyebrow, html body .arch-hero-tier .tier-eyebrow,
html body .arch-hero-tier .arch-step-eyebrow,
html body .compare-col.good .compare-eyebrow,
html body .compare-col.b .compare-eyebrow,
html body .price-card.featured .price-eyebrow,
html body .filter-stage-lead .arch-step-eyebrow,
html body .filter-stage-lead .filter-num,
html body .experte-card .expert-eyebrow,
html body .experte-card .arch-step-eyebrow,
html body .quik-card .arch-step-eyebrow,
html body .arch-card .arch-step-eyebrow{
  color: rgba(255,255,255,0.85) !important;
  background: transparent !important;
  border: none !important;
}

html body .cta-band i, html body .cta-band svg,
html body .arch-hero i:not(.fa-circle):not(.live-dot),
html body .arch-hero-tier i,
html body .compare-col.good i,
html body .compare-col.b i,
html body .price-card.featured i,
html body .filter-stage-lead i,
html body .expert-card.dark i,
html body .experte-card i,
html body .quik-card i,
html body .arch-card i,
html body section.dark i{
  color: rgba(255,255,255,0.85) !important;
  fill: currentColor !important;
}

html body .cta-band a:not(.btn-primary):not(.btn-outline):not(.cta-band-link),
html body .arch-hero a:not(.btn-primary):not(.btn-outline),
html body .arch-hero-tier a:not(.btn-primary):not(.btn-outline),
html body .compare-col.good a:not(.btn-primary):not(.btn-outline),
html body .compare-col.b a:not(.btn-primary):not(.btn-outline),
html body .price-card.featured a:not(.btn-primary):not(.btn-outline),
html body .experte-card a:not(.btn-primary):not(.btn-outline),
html body .experte-cta,
html body a.experte-cta,
html body .quik-card a:not(.btn-primary):not(.btn-outline),
html body .arch-card a:not(.btn-primary):not(.btn-outline){
  color: #ffffff !important;
}
html body .experte-cta i,
html body a.experte-cta i{
  color: #ffffff !important;
}

html body .cta-band li::before, html body .cta-band ul li i.fa-check,
html body .arch-hero li::before, html body .arch-hero li i.fa-check,
html body .price-card.featured li::before, html body .price-card.featured li i,
html body .filter-stage-lead li::before,
html body .compare-col.good li::before, html body .compare-col.b li::before{
  color: rgba(255,255,255,0.75) !important;
}

html body .arch-hero .tier-num, html body .arch-hero-tier .tier-num,
html body .arch-hero .phase, html body .arch-hero-tier .phase,
html body .arch-hero .pct, html body .arch-hero-tier .pct,
html body .arch-card .arch-num,
html body .arch-hero .status, html body .arch-hero-tier .status,
html body .arch-flow-arrow, html body .arch-flow-arrow i,
html body .arch-flow-down, html body .arch-flow-down i{
  color: rgba(255,255,255,0.75) !important;
}

html body .cta-band a:not(.btn-primary):not(.btn-outline):hover,
html body .arch-hero a:not(.btn-primary):not(.btn-outline):hover,
html body .experte-cta:hover,
html body a.experte-cta:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255,255,255,0.40) !important;
}

html body .qf-icon,
html body span.qf-icon{
  background: rgba(20,20,22,0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
}
html body .qf-icon i,
html body span.qf-icon i{
  color: #1d1d1f !important;
}

html body .qf-stat strong,
html body .qf-stats strong,
html body .author-stats strong,
html body .stat-num strong,
html body .stats strong,
html body .stat strong{
  color: #1d1d1f !important;
}

html body .cta-band .qf-stat strong,
html body .arch-hero .qf-stat strong,
html body .author-hero-card .qf-stat strong{
  color: #ffffff !important;
}

html body .belief-num,
html body div.belief-num{
  background: rgba(20,20,22,0.05) !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.10) !important;
}

html body .author-hero-card,
html body .author-hero-card *{
  
}
html body .author-hero-card .qf-stat strong,
html body .team-hero .qf-stat strong{
  color: #1d1d1f !important;
}
html body .author-hero-card .qf-stat span,
html body .team-hero .qf-stat span{
  color: #515154 !important;
}

html body .author-hero-card .qf-avatar-frame,
html body .team-hero .qf-avatar-frame{
  border-color: rgba(20,20,22,0.10) !important;
  background: #ffffff !important;
}

html body .belief-card,
html body .belief-card h3,
html body .belief-card p{
  color: inherit !important;
}
html body .belief-card .belief-icon,
html body .belief-card i{
  color: #1d1d1f !important;
  background: rgba(20,20,22,0.05) !important;
}

html body .felix-quote,
html body .team-quote{
  border-color: rgba(20,20,22,0.10) !important;
}
html body .felix-quote::before,
html body .team-quote::before{
  color: rgba(20,20,22,0.20) !important;
}

html body .stat-card .stat-num,
html body .stat-card strong{
  color: #1d1d1f !important;
}
html body .stat-card .stat-num em{
  color: #515154 !important;
  font-style: normal !important;
}

html body .live-dot,
html body .pulse-dot,
html body .live-pulse{
  background: #34c759 !important;
}

html body .felix-quickfacts .qf-chip,
html body .felix-quickfacts .qf-chip-accent,
html body a.qf-chip{
  background: rgba(20,20,22,0.04) !important;
  border: 1px solid rgba(20,20,22,0.10) !important;
  color: #1d1d1f !important;
}
html body .felix-quickfacts .qf-chip:hover,
html body a.qf-chip:hover{
  background: rgba(20,20,22,0.08) !important;
  border-color: rgba(20,20,22,0.20) !important;
  color: #1d1d1f !important;
}
html body .felix-quickfacts .qf-value,
html body .felix-quickfacts .qf-value strong,
html body .qf-value strong,
html body .qf-chip .qf-value,
html body .qf-chip .qf-value strong{
  color: #1d1d1f !important;
}
html body .qf-chip .qf-label,
html body .felix-quickfacts .qf-label{
  color: #515154 !important;
}
html body .felix-quickfacts .qf-icon,
html body .qf-chip .qf-icon{
  background: rgba(20,20,22,0.05) !important;
  color: #1d1d1f !important;
}
html body .felix-quickfacts .qf-icon i,
html body .qf-chip .qf-icon i{
  color: #1d1d1f !important;
}

html body .hero .hero-inner{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
html body .hero .hero-title{
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance !important;
}
html body .hero .hero-subtitle{
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 18px !important;
  text-wrap: pretty !important;
}

html body .page-intro .hero-subtitle,
html body section.page-intro .hero-subtitle{
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: pretty !important;
}
@media (max-width: 768px){
  html body .hero .hero-subtitle,
  html body .page-intro .hero-subtitle{
    max-width: 100% !important;
    font-size: 1rem !important;
  }
}

@media (max-width: 1024px){
  html body .footer-quik .footer-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  html body .footer-quik .footer-brand{
    grid-column: 1 / -1;
  }
}
@media (max-width: 600px){
  html body .footer-quik .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  html body .footer-quik .footer-brand p.footer-tag{ font-size: 0.92rem; }
  html body .footer-quik .footer-bottom{
    flex-direction: column !important;
    gap: 10px;
    text-align: center;
  }
}
html body .footer-quik{ overflow: hidden; }
html body .footer-quik .container{
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 1240px !important;
}

html body .btn-primary[style*="background: #ffffff"]:hover,
html body .btn-primary[style*="background:#ffffff"]:hover,
html body .btn-primary.btn-light:hover,
html body .guide-cta-btn:hover,
html body .seo-guide-cta .btn-primary:hover,
html body section.guide-cta-section .btn-primary:hover,
html body .hub-felix-actions .btn-primary:hover,
html body section[style*="background: #141416"] .btn-primary:hover,
html body section[style*="background:#141416"] .btn-primary:hover,
html body section[style*="background: #1d1d1f"] .btn-primary:hover,
html body section[style*="background:#1d1d1f"] .btn-primary:hover{
  background: #f0f0f2 !important;
  color: #1d1d1f !important;
  border-color: transparent !important;
}
html body .guide-cta-btn:hover i,
html body .seo-guide-cta .btn-primary:hover i,
html body section.guide-cta-section .btn-primary:hover i,
html body .hub-felix-actions .btn-primary:hover i,
html body section[style*="background: #141416"] .btn-primary:hover i,
html body section[style*="background: #1d1d1f"] .btn-primary:hover i{
  color: #1d1d1f !important;
}

html body .footer-quik{
  overflow: visible !important;
  padding-bottom: 80px !important;  
}
@media (min-width: 1025px){
  html body .footer-quik .footer-grid{
    grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr !important;
    gap: 40px !important;
  }
  html body .footer-quik .footer-col h4[style*="margin-top"]{
    display: none !important; 
  }
}

/* Removed 2026-05-13: This grid rule added 14px gap between h4 and ul
   in the last footer column ("Über quik"), making it visually inconsistent
   with the other columns (Produkt, Lesen). */

@media (max-width: 768px){
  html body .footer-quik{ padding-bottom: 100px !important; }
  html body .footer-quik .footer-bottom{
    padding-top: 24px !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px !important;
  }
}

html body a.btn-primary,
html body a.btn-outline,
html body a.btn-nav,
html body a.btn-outline-light,
html body .article-author-card .actions .ac,
html body .footer-cta,
html body .sgb-cta,
html body .anbieter-card-cta,
html body .quik-popup-btn,
html body .guide-cta-btn,
html body .other-city-link{
  text-decoration: none !important;
  border-bottom: none !important;
}
html body a.btn-primary:hover,
html body a.btn-outline:hover,
html body a.btn-nav:hover,
html body a.btn-outline-light:hover,
html body .article-author-card .actions .ac:hover,
html body .footer-cta:hover,
html body .sgb-cta:hover,
html body .anbieter-card-cta:hover,
html body .quik-popup-btn:hover,
html body .guide-cta-btn:hover{
  text-decoration: none !important;
}

html body a i,
html body button i{
  text-decoration: none !important;
  display: inline-block;
}
html body a:hover i{ text-decoration: none !important; }

html body a{ text-decoration-skip-ink: auto; }

html body .hero .hero-title,
html body .page-intro .hero-title{
  font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
  font-weight: 800 !important;
}
@media (max-width: 768px){
  html body .hero .hero-title,
  html body .page-intro .hero-title{
    font-size: clamp(2.0rem, 9vw, 2.8rem) !important;
    line-height: 1.08 !important;
  }
}

html body details.faq-item,
html body details.hub-faq-item,
html body details.accordion-item{
  background: #ffffff !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  padding: 0 24px !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  overflow: hidden;
}
html body details.faq-item[open],
html body details.hub-faq-item[open],
html body details.accordion-item[open]{
  border-color: rgba(20,20,22,0.15) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
html body details.faq-item summary,
html body details.hub-faq-item summary,
html body details.accordion-item summary{
  list-style: none !important;
  cursor: pointer !important;
  padding: 22px 0 !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  position: relative !important;
  padding-right: 44px !important;
  user-select: none;
  transition: color 0.2s ease;
}
html body details.faq-item summary::-webkit-details-marker,
html body details.hub-faq-item summary::-webkit-details-marker,
html body details.accordion-item summary::-webkit-details-marker{ display: none !important; }
html body details.faq-item summary::after,
html body details.hub-faq-item summary::after,
html body details.accordion-item summary::after{
  content: "" !important;
  position: absolute;
  right: 4px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20,20,22,0.05);
  transform: translateY(-50%);
  transition: background 0.2s ease, transform 0.3s ease;
  display: flex;
}
html body details.faq-item summary::before,
html body details.hub-faq-item summary::before,
html body details.accordion-item summary::before{
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: #1d1d1f;
  transform: translateY(-50%) rotate(90deg);
  transition: transform 0.3s ease;
  z-index: 1;
}
html body details.faq-item summary{
  position: relative;
}
html body details.faq-item summary > *,
html body details.hub-faq-item summary > *,
html body details.accordion-item summary > *{ position: relative; z-index: 2; }
html body details.faq-item:not([open]) summary::before{
  
}
html body details.faq-item[open] summary::before,
html body details.hub-faq-item[open] summary::before,
html body details.accordion-item[open] summary::before{
  transform: translateY(-50%) rotate(0deg);
}
html body details.faq-item[open] summary::after,
html body details.hub-faq-item[open] summary::after,
html body details.accordion-item[open] summary::after{
  background: #1d1d1f;
}
html body details.faq-item[open] summary::before,
html body details.hub-faq-item[open] summary::before,
html body details.accordion-item[open] summary::before{
  background: #ffffff;
}

html body details.faq-item summary::after{
  background: rgba(20,20,22,0.05);
}

html body details.faq-item .faq-answer,
html body details.faq-item div:not(summary),
html body details.hub-faq-item .hub-faq-body,
html body details.accordion-item .accordion-body{
  padding: 0 0 24px !important;
  font-size: 0.96rem !important;
  line-height: 1.7 !important;
  color: #515154 !important;
}

html body .article-author-card{
  grid-template-columns: 120px 1fr !important;
}
html body .article-author-card .actions{
  grid-column: 2 / 3;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  margin-top: 4px;
  min-width: 0 !important;
}
html body .article-author-card .actions .ac.primary{
  padding: 11px 22px !important;
  border-radius: 999px !important;
}
@media (max-width: 760px){
  html body .article-author-card .actions{
    grid-column: 1 / -1;
    justify-content: center;
  }
}

html body section.section-py .section-head:has(span.section-eyebrow:-webkit-any(:contains("Weiterlesen"))){
  text-align: center !important;
}

html body .article-grid + p,
html body section .section-head h2[style*="text-align:left"]{
  
}

html body .page-intro:has(.author-hero-card) .hero-eyebrow{
  display: none !important;
}

html body .footer-quik .footer-grid{
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
}
html body .footer-quik .footer-bottom{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px 24px !important;
  padding-top: 28px !important;
  margin-top: 32px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-size: 0.84rem !important;
  color: rgba(255,255,255,0.55) !important;
}
html body .footer-quik .footer-partners{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}
html body .footer-quik .footer-partners a{
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: 500;
}
html body .footer-quik .footer-partners a:hover{ color: #ffffff; }
html body .footer-quik .footer-legal{ display: inline-flex; gap: 8px; }
html body .footer-quik .footer-legal a{ color: rgba(255,255,255,0.65); text-decoration: none; }
html body .footer-quik .footer-legal a:hover{ color: #ffffff; }
@media (max-width: 768px){
  html body .footer-quik .footer-bottom{
    flex-direction: column !important;
    text-align: center;
    align-items: center !important;
  }
}

html body section .section-head h2.section-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body .anbieter-profile-main .section-head h2.section-title,
html body .anbieter-similar-section .section-head h2.section-title,
html body .anbieter-hero-main h2.section-title{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .tag-cloud a{
  text-decoration: none !important;
  border-bottom: none !important;
}
html body .tag-cloud a:hover{
  text-decoration: none !important;
  background: rgba(20,20,22,0.06) !important;
  border-color: rgba(20,20,22,0.15) !important;
}

html body .article-toc{
  padding: 24px 28px !important;
  margin-top: 32px !important;
  margin-bottom: 36px !important;
}
html body .article-toc h2{
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(20,20,22,0.06);
}
html body .article-toc ol{
  margin-top: 8px;
  padding-bottom: 4px;
}
html body .article-toc li{
  padding: 6px 0;
}

html body .article-author-card{
  grid-template-columns: 120px 1fr !important;
  grid-template-areas: "img info" "img actions" !important;
}
html body .article-author-card img{ grid-area: img; }
html body .article-author-card .info{ grid-area: info; }
html body .article-author-card .actions{
  grid-area: actions;
  flex-direction: row !important;
  justify-content: flex-start !important;
  margin-top: 8px !important;
}
@media (max-width: 760px){
  html body .article-author-card{
    grid-template-columns: 1fr !important;
    grid-template-areas: "img" "info" "actions" !important;
    text-align: center;
  }
  html body .article-author-card .actions{
    justify-content: center !important;
  }
}

/* ============================================================
   SEO Pakete Page Fixes (2026-05-12c)
   ============================================================ */

/* (1) Timeline-Circles entfernen (alte vertical-timeline ::before stoert Grid-Layout) */
html body .timeline-grid .timeline-item::before{
  display: none !important;
  content: none !important;
}

/* (2) SEO Team Grid - 3 gleichmaessige Spalten mit konsistentem Styling */
.seo-team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.seo-team-card{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: #1d1d1f;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.seo-team-card:hover{
  transform: translateY(-3px);
  border-color: rgba(20,20,22,0.18);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
/* Lead-Card: dunkel mit weisser Schrift */
.seo-team-card.seo-team-lead{
  background: #141416;
  color: #ffffff;
  border-color: rgba(255,255,255,0.10);
}
.seo-team-card.seo-team-lead h3{ color: #ffffff; }
.seo-team-card.seo-team-lead .seo-team-role,
.seo-team-card.seo-team-lead .seo-team-bio{ color: rgba(255,255,255,0.72); }
.seo-team-card.seo-team-lead .seo-team-cta{ color: #ffffff; }
.seo-team-card.seo-team-lead .seo-team-cta i{ color: #cca958; }
.seo-team-card.seo-team-lead::after{
  content: "";
  position: absolute;
  left: 28px; right: 28px; bottom: 0;
  height: 2px;
  background: #cca958;
  opacity: 0.55;
}

/* Tag oben */
.seo-team-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #cca958;
  padding: 5px 12px;
  background: rgba(204,169,88,0.10);
  border-radius: 999px;
  align-self: flex-start;
}
.seo-team-card.seo-team-lead .seo-team-tag{
  background: rgba(204,169,88,0.15);
  color: #cca958;
}
.seo-team-tag-muted{
  color: #86868b;
  background: rgba(20,20,22,0.05);
}
.seo-team-tag-domains{
  color: #cca958;
  background: rgba(204,169,88,0.10);
}
.seo-team-tag .live-pulse{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cca958;
  box-shadow: 0 0 0 3px rgba(204,169,88,0.20);
}

/* Avatar */
.seo-team-avatar{
  width: 64px !important;
  height: 64px !important;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
  border: 2px solid rgba(204,169,88,0.40);
}
.seo-team-avatar-placeholder{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(20,20,22,0.04);
  border: 1.5px solid rgba(20,20,22,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86868b;
  font-size: 1.1rem;
}
.seo-team-avatar-icon{
  background: rgba(204,169,88,0.08);
  border: 1.5px solid rgba(204,169,88,0.25);
  color: #cca958;
}

/* Text */
.seo-team-card h3{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 4px 0 0;
  color: #1d1d1f;
  line-height: 1.25;
}
.seo-team-role{
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #86868b;
  margin: 0;
}
.seo-team-bio{
  font-size: 0.92rem;
  line-height: 1.55;
  color: #515154;
  margin: 0;
  flex-grow: 1;
}
.seo-team-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #1d1d1f;
  text-decoration: none;
  margin-top: auto;
  padding-top: 6px;
}
.seo-team-cta i{
  color: #1d1d1f;
  font-size: 0.78rem;
  transition: transform 0.2s ease;
}
.seo-team-card:hover .seo-team-cta i{ transform: translateX(4px); }

@media (max-width: 900px){
  .seo-team-grid{ grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   TOC FIX (2026-05-12f): Counter-Overlap + Underline
   .article-body ol li::before stoert das TOC.
   ============================================================ */
html body .article-body .article-toc{
  counter-reset: toc;
}
html body .article-body .article-toc ol{
  list-style: none !important;
  padding-left: 0 !important;
}
html body .article-body .article-toc ol li{
  counter-increment: toc !important;
  position: relative !important;
  padding-left: 38px !important;
  display: block !important;
  margin-bottom: 4px !important;
}
html body .article-body .article-toc ol li::before{
  content: counter(toc, decimal-leading-zero) !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: rgba(0,0,0,0.35) !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  letter-spacing: 0.04em;
}
html body .article-body .article-toc a{
  text-decoration: none !important;
  border-bottom: none !important;
  color: #515154 !important;
  line-height: 1.55;
}
html body .article-body .article-toc a:hover{
  color: #1d1d1f !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(20,20,22,0.30) !important;
  text-underline-offset: 3px;
}

/* ============================================================
   Article-Author-Card Actions: Padding-Left auf 0 (2026-05-12g)
   Alte Regel hatte 144px padding-left aus 1-col Layout - nicht
   mehr noetig im neuen 2-col grid mit eigener Spalte.
   ============================================================ */
html body .article-author-card .actions{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 8px !important;
  flex: initial !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-self: start !important;
}
@media (max-width: 760px){
  html body .article-author-card .actions{
    justify-content: center !important;
    padding-left: 0 !important;
  }
}

/* ============================================================
   Homepage Hero Spacing Fix (2026-05-12h)
   ============================================================ */
html body .hero .hero-eyebrow{
  margin-bottom: 28px !important;
}
html body .hero .hero-title{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
html body .hero .hero-subtitle{
  margin-top: 22px !important;
  margin-bottom: 0 !important;
}
html body .hero .hero-ctas{
  margin-top: 36px !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  justify-content: center;
}
html body .hero .hero-trust{
  margin-top: 28px !important;
  padding-top: 0 !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 14px 24px !important;
  justify-content: center;
}
html body .hero .hero-trust-item{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.84rem;
  color: #515154;
}
html body .hero .hero-trust-item i{
  color: #cca958;
  font-size: 0.78rem;
}

/* Article-Author-Card Actions: HARD override fuer Padding-Left */
html body main .article-author-card .actions,
html body body .article-author-card .actions{
  padding: 0 !important;
  margin-top: 10px !important;
  display: flex !important;
  justify-content: flex-start !important;
  flex-direction: row !important;
  flex: initial !important;
}

/* Hero Trust Pill: mehr Padding + groesserer Gap zwischen Items (2026-05-12i) */
html body .hero .hero-trust{
  padding: 12px 32px !important;
  gap: 14px 36px !important;
}
html body .hero .hero-trust-item{
  gap: 8px !important;
}

/* Footer "Über quik" Abstand-Fix + Partner-Pretty (2026-05-12k) */
html body .footer-quik .footer-col h4{
  white-space: nowrap !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
  min-height: 0 !important;
  height: auto !important;
}
html body .footer-quik .footer-col ul{
  margin: 0 !important;
  padding: 0 !important;
}

/* Partner-Bereich pretty: Logos statt nur Text */
html body .footer-quik .footer-partners{
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.55) !important;
}
html body .footer-quik .footer-partners::before{
  content: "Partner";
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
  padding-right: 6px;
  border-right: 1px solid rgba(255,255,255,0.10);
  margin-right: 4px;
}
html body .footer-quik .footer-partners a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 6px 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 0.78rem !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
html body .footer-quik .footer-partners a:hover{
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(204,169,88,0.40) !important;
  color: #ffffff !important;
}
/* Trennzeichen zwischen Partner Links entfernen */
html body .footer-quik .footer-partners{
  font-size: 0;  /* hide text nodes (text " · ") between links */
}
html body .footer-quik .footer-partners::before,
html body .footer-quik .footer-partners a{
  font-size: 0.78rem !important;
}


/* ============================================================
   WOW Animations + Interactions (2026-05-12L)
   ============================================================ */
html { scroll-behavior: smooth; }

@keyframes quik-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes quik-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes quik-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(204,169,88,0.15); }
  50% { box-shadow: 0 0 0 6px rgba(204,169,88,0.05); }
}

/* Hero Cascade Homepage */
html body .hero .hero-eyebrow{ animation: quik-fade-up 0.7s cubic-bezier(.2,.8,.2,1) 0.05s both !important; }
html body .hero .hero-title{ animation: quik-fade-up 0.85s cubic-bezier(.2,.8,.2,1) 0.18s both !important; }
html body .hero .hero-subtitle{ animation: quik-fade-up 0.8s cubic-bezier(.2,.8,.2,1) 0.32s both !important; }
html body .hero .hero-ctas{ animation: quik-fade-up 0.75s cubic-bezier(.2,.8,.2,1) 0.46s both !important; }
html body .hero .hero-trust{ animation: quik-fade-up 0.7s cubic-bezier(.2,.8,.2,1) 0.58s both !important; }

/* Page-Intro Cascade */
html body .page-intro .breadcrumbs{ animation: quik-fade-in 0.5s ease 0.05s both; }
html body .page-intro .hero-eyebrow{ animation: quik-fade-up 0.7s cubic-bezier(.2,.8,.2,1) 0.15s both; }
html body .page-intro .hero-title{ animation: quik-fade-up 0.85s cubic-bezier(.2,.8,.2,1) 0.28s both !important; }
html body .page-intro .hero-subtitle{ animation: quik-fade-up 0.8s cubic-bezier(.2,.8,.2,1) 0.42s both !important; }

/* Card Hover lift */
html body .article-card,
html body .featured-card,
html body .anbieter-card,
html body .city-card,
html body .cat-card,
html body .seo-team-card,
html body .similar-card,
html body .pillar,
html body .leistung-card{
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, border-color 0.25s ease !important;
  will-change: transform;
}
html body .article-card:hover,
html body .featured-card:hover,
html body .anbieter-card:hover,
html body .city-card:hover,
html body .cat-card:hover,
html body .seo-team-card:hover,
html body .similar-card:hover,
html body .pillar:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06) !important;
  border-color: rgba(20,20,22,0.18) !important;
}

/* Button hover scale */
html body a.btn-primary,
html body a.btn-outline,
html body button.btn-primary{
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), background 0.25s ease, box-shadow 0.25s ease !important;
}
html body a.btn-primary:hover,
html body button.btn-primary:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
html body a.btn-outline:hover{
  transform: translateY(-2px);
  border-color: #1d1d1f !important;
}
html body a.btn-primary:active,
html body button.btn-primary:active,
html body a.btn-outline:active{
  transform: translateY(0) scale(0.99);
  transition-duration: 0.05s !important;
}

/* Arrow slide on hover */
html body i.fa-arrow-right{ transition: transform 0.25s cubic-bezier(.2,.8,.2,1); }
html body a:hover > i.fa-arrow-right,
html body a:hover i.fa-arrow-right:last-child,
html body button:hover i.fa-arrow-right{
  transform: translateX(4px);
}

/* Logo rotate on hover */
html body .nav-logo .brand-mark .service-icon{
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
}
html body .nav-logo:hover .brand-mark .service-icon{
  transform: rotate(45deg);
}

/* Section-Eyebrow Pulse Dot */
html body .section-eyebrow::before{
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: #cca958;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(204,169,88,0.15);
  animation: quik-pulse-dot 2.4s ease-in-out infinite;
}

/* Reveal Elements fade-up */
html body .reveal:not(.is-visible){
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
html body .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html body .hero > *,
  html body .page-intro > *,
  html body .section-eyebrow::before{ animation: none !important; }
  html body .article-card:hover,
  html body .featured-card:hover,
  html body .anbieter-card:hover,
  html body .city-card:hover,
  html body .cat-card:hover,
  html body .seo-team-card:hover,
  html body .pillar:hover{
    transform: none !important;
  }
}

/* ============================================================
   Mobile-First Polish (2026-05-12L)
   ============================================================ */
@media (max-width: 768px){
  html body .hero{ padding: 100px 0 60px !important; }
  html body .hero .hero-inner,
  html body .hero .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body .hero .hero-title{
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }
  html body .hero .hero-subtitle{
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-top: 18px !important;
    padding: 0 4px;
  }
  html body .hero .hero-ctas{
    flex-direction: column !important;
    width: 100%;
    align-items: stretch !important;
    margin-top: 28px !important;
    gap: 10px !important;
  }
  html body .hero .hero-ctas .btn-primary,
  html body .hero .hero-ctas .btn-outline{
    width: 100%;
    justify-content: center;
  }
  html body .hero .hero-trust{
    margin-top: 24px !important;
    padding: 12px 18px !important;
    gap: 10px 18px !important;
    font-size: 0.78rem !important;
  }
  html body .hero .hero-trust-item{ font-size: 0.78rem !important; }

  html body .page-intro{ padding-top: 110px !important; padding-bottom: 32px !important; }
  html body .page-intro .hero-title{
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }
  html body .page-intro .hero-subtitle{
    font-size: 1rem !important;
    margin-top: 14px !important;
    padding: 0 6px;
  }

  html body section.section-py{ padding: 48px 0 !important; }
  html body .container{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  html body .article-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  html body .section-head{ padding: 0 8px; }
  html body .section-head h2.section-title{
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
    line-height: 1.15 !important;
  }
  html body .section-head .section-sub{ font-size: 0.96rem !important; }

  html body .topbar{ font-size: 0.78rem !important; }
  html body .topbar .text{ display: none; }
  html body .topbar .pill{ margin-right: 6px; }

  html body .mobile-sticky-cta{
    padding: 10px !important;
    gap: 8px !important;
  }
  html body .mobile-sticky-cta a{
    padding: 11px 14px !important;
    font-size: 0.86rem !important;
  }

  html body .footer-quik .footer-brand .footer-tag{ font-size: 0.9rem !important; }
  html body .footer-quik .footer-bottom{
    font-size: 0.74rem !important;
    line-height: 1.5;
  }
  html body .footer-quik .footer-partners::before{ display: none; }
}

@media (max-width: 420px){
  html body .topbar{ padding: 8px 12px !important; }
  html body .hero .hero-trust{
    padding: 10px 14px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  html body .footer-quik .footer-bottom > *{
    width: 100%;
    text-align: center;
  }
}

/* Touch: kein Hover lift */
@media (hover: none) and (pointer: coarse){
  html body a.btn-primary,
  html body a.btn-outline,
  html body button.btn-primary,
  html body .article-card,
  html body .nav-links a,
  html body .mobile-nav a{
    min-height: 44px;
  }
  html body .article-card:hover,
  html body .featured-card:hover,
  html body .anbieter-card:hover,
  html body .city-card:hover,
  html body .cat-card:hover{
    transform: none !important;
  }
}


/* ============================================================
   QUIK-STARTUP DESIGN GUIDELINE (2026-05-12M)
   Inspired from quik-startup.com Apple-Typography
   ============================================================ */

/* Apple SF Pro Stack sitewide */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apple-Style sehr tight letter-spacing auf grossen Headlines */
html body .hero .hero-title,
html body .page-intro .hero-title{
  letter-spacing: -0.04em !important;
  font-weight: 700 !important;
}
html body .section-head h2.section-title,
html body h2.cta-title,
html body h2.section-title{
  letter-spacing: -0.035em !important;
  font-weight: 700 !important;
}
html body h3{
  letter-spacing: -0.022em;
}

/* ============================================================
   Tag-Cloud: Hover schwarz statt grau + Padding-Bottom
   ============================================================ */
html body .tag-cloud{
  padding-bottom: 32px !important;
  margin-bottom: 16px !important;
}
html body .tag-cloud a{
  padding: 8px 16px !important;
  display: inline-block;
  border-radius: 999px !important;
}
html body .tag-cloud a:hover{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border-color: #1d1d1f !important;
}

/* ============================================================
   SEO Verzeichnis Hero: Linksbuendige Buttons + Eyebrow ohne Gold-Kreis
   ============================================================ */
html body .hub-hero-v2 .hub-hero-eyebrow{
  /* Gold dot bullet entfernen */
}
html body .hub-hero-v2 .hub-hero-eyebrow-dot{
  display: none !important;
}
html body .hub-hero-v2 .hub-hero-eyebrow::before{
  display: none !important;
}
html body .hub-hero-v2 .hub-hero-cta{
  justify-content: flex-start !important;
}
html body .hub-hero-v2 .hub-hero-stats{
  /* schon links */
}

/* ============================================================
   SEO Guide Popup: Zentriert + groesser (statt rechts unten)
   ============================================================ */
html body .quik-popup{
  bottom: auto !important;
  right: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  max-width: 520px !important;
  width: calc(100% - 48px) !important;
  padding: 40px 40px 32px !important;
}
html body .quik-popup.is-open{
  transform: translate(-50%, -50%) scale(1) !important;
}
html body .quik-popup-title{
  font-size: 1.55rem !important;
}
html body .quik-popup-sub{
  font-size: 1rem !important;
  margin-bottom: 22px !important;
}
@media (max-width: 600px){
  html body .quik-popup{
    max-width: calc(100% - 32px) !important;
    padding: 28px 24px 22px !important;
  }
  html body .quik-popup-title{ font-size: 1.25rem !important; }
}

/* ============================================================
   Anbieter-Profile: 'Andere SEO-Agenturen' Headline mittig
   ============================================================ */
html body .anbieter-profile-main .anbieter-similar-section .section-head{
  text-align: center !important;
}
html body .anbieter-profile-main .anbieter-similar-section .section-head h2.section-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
html body .anbieter-profile-main .anbieter-similar-section .section-head .section-eyebrow{
  display: block;
  text-align: center;
  margin-bottom: 14px;
}

/* ============================================================
   City Filter-Bar Pro: stylischer
   ============================================================ */
html body .filter-bar-pro{
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  border-radius: 22px !important;
  padding: 18px 22px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06) !important;
  border: 1px solid rgba(20,20,22,0.06) !important;
}
html body .filter-bar-pro:hover{
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 20px 48px rgba(0,0,0,0.08) !important;
}

/* ============================================================
   Newsletter Page: Eyebrow Linksbuendig (Hero)
   ============================================================ */
html body[data-page="newsletter"] .page-intro .hero-eyebrow,
html body.has-mobile-cta .page-intro .hero-eyebrow.newsletter-eyebrow{
  display: block !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================================
   Hub City-Grid: kreativer (vorher zu langweilig)
   ============================================================ */
html body .city-grid .city-card{
  position: relative;
  overflow: hidden;
}
html body .city-grid .city-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #cca958 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
html body .city-grid .city-card:hover::before{
  opacity: 0.8;
}
html body .city-grid .city-card .city-name{
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   'Selbst SEO machen' Section auf Hub: Polish (zum Footer passend)
   ============================================================ */
html body .hub-felix-cta{
  position: relative;
  padding: 20px 0;
}
html body section.section-py:has(.hub-felix-cta){
  background: #141416 !important;
  position: relative;
  overflow: hidden;
}
html body section.section-py:has(.hub-felix-cta)::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(204,169,88,0.40), transparent);
}

/* ============================================================
   Article-Card Meta mit Datum (auf article-grid auf Listen)
   Wir nutzen ::after um Datum visuell zu integrieren via data-date Attribut
   ============================================================ */
html body .article-card-meta time,
html body .article-card-meta .article-card-date{
  font-size: 0.78rem;
  color: #86868b;
  margin-left: 6px;
}

/* ============================================================
   Hub-Hero Marquee: Hover Stop (Interaction!)
   ============================================================ */
html body .hub-marquee:hover .hub-marquee-track{
  animation-play-state: paused;
}

/* ============================================================
   Cards bekommen subtle Gold-Glow on Hover (Premium feel)
   ============================================================ */
html body .featured-card:hover,
html body .anbieter-card:hover{
  box-shadow: 0 16px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(204,169,88,0.20) !important;
}


/* ============================================================
   MEGA CSS BATCH (2026-05-12N)
   - Newsletter Eyebrow links
   - City Filter-Bar stylischer
   - Hub Cities Section kreativer
   - Hub FAQ Accordions konsistent
   - Felix-CTA stimmig zum Footer
   - Experten Cards Profile-Link
   - SEO Pakete Sections moderner
   - Alle Anbieter Filter-Seite Styles
   ============================================================ */

/* Newsletter Eyebrow linksbuendig */
html body[data-page="newsletter"] .page-intro .page-intro-inner,
html body .page-intro:has(.newsletter-form) .page-intro-inner{
  text-align: left !important;
}
html body[data-page="newsletter"] .page-intro .hero-eyebrow,
html body .page-intro:has(.newsletter-form) .hero-eyebrow{
  margin-left: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
}
html body[data-page="newsletter"] .page-intro .hero-title,
html body[data-page="newsletter"] .page-intro .hero-subtitle,
html body .page-intro:has(.newsletter-form) .hero-title,
html body .page-intro:has(.newsletter-form) .hero-subtitle{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 720px !important;
}

/* Newsletter Form fix */
html body .newsletter-form,
html body form.newsletter-form{
  display: grid !important;
  gap: 14px !important;
  max-width: 540px !important;
}
html body .newsletter-form input,
html body .newsletter-form select{
  width: 100% !important;
  box-sizing: border-box;
  padding: 14px 18px !important;
  border: 1px solid rgba(20,20,22,0.12) !important;
  border-radius: 14px !important;
  font: inherit;
  font-size: 0.96rem !important;
  background: #ffffff;
}
html body .newsletter-form input:focus{
  outline: 2px solid #1d1d1f !important;
  border-color: #1d1d1f !important;
}
html body .newsletter-form button[type="submit"],
html body .newsletter-form .btn-primary{
  width: 100% !important;
  justify-content: center !important;
  padding: 14px 22px !important;
  font-weight: 700 !important;
}
html body .newsletter-form label{
  font-size: 0.86rem !important;
  color: #515154 !important;
  display: block;
  margin-bottom: 6px;
}

/* Hub Cities Section: kreativer mit Floating-Numbers */
html body section[id="staedte"] .city-grid{
  gap: 18px !important;
}
html body section[id="staedte"] .city-card{
  position: relative;
  padding: 32px 26px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  overflow: hidden;
}
html body section[id="staedte"] .city-card::after{
  content: counter(city-num, decimal-leading-zero);
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(204,169,88,0.06);
  letter-spacing: -0.04em;
  pointer-events: none;
}
html body section[id="staedte"] .city-grid{
  counter-reset: city-num;
}
html body section[id="staedte"] .city-card{
  counter-increment: city-num;
}

/* Hub FAQ: gleiche Accordion-Optik wie sitewide */
html body .hub-faq-item{
  background: #ffffff !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
  border-radius: 16px !important;
  margin-bottom: 12px !important;
  padding: 0 24px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body .hub-faq-item[open]{
  border-color: rgba(20,20,22,0.18) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
}
html body .hub-faq-item summary{
  list-style: none !important;
  cursor: pointer !important;
  padding: 22px 0 !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  padding-right: 44px !important;
  position: relative !important;
}
html body .hub-faq-item summary::-webkit-details-marker{ display: none !important; }
html body .hub-faq-item summary::after{
  content: "+" !important;
  position: absolute;
  right: 4px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20,20,22,0.05);
  color: #1d1d1f;
  font-size: 1.2rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  transition: transform 0.3s ease, background 0.3s ease !important;
}
html body .hub-faq-item[open] summary::after{
  content: "−" !important;
  background: #1d1d1f;
  color: #ffffff;
}

/* Felix-CTA Section auf Hub: bessere Integration zum Footer */
html body section.section-py:has(.hub-felix-cta){
  background: linear-gradient(180deg, #141416 0%, #0a0a0b 100%) !important;
  padding: 80px 0 !important;
  position: relative;
}
html body section.section-py:has(.hub-felix-cta)::after{
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: rgba(204,169,88,0.40);
}
html body .hub-felix-cta h2{
  margin-bottom: 18px !important;
  letter-spacing: -0.03em !important;
}

/* Experten Cards: 'Zum Profil' Link */
html body .experten-grid .expert-card,
html body .experten-card{
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
html body .experten-grid .expert-card::after,
html body .experten-card .card-profile-link{
  content: "Zum Profil →";
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1d1d1f;
  text-decoration: underline;
  text-decoration-color: rgba(20,20,22,0.30);
  text-underline-offset: 3px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
html body .experten-grid .expert-card:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* SEO Pakete Hero: stylischer */
html body[data-page="seo-pakete"] .page-intro,
html body .page-intro:has(.pricing-grid){
  position: relative;
  overflow: hidden;
}
html body[data-page="seo-pakete"] .page-intro::before,
html body .page-intro:has(.pricing-grid)::before{
  content: "";
  position: absolute;
  top: 30%; right: -10%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(204,169,88,0.10) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

/* SEO Pakete Problem Section: moderne Cards */
html body section .problem-grid,
html body section[data-section="problems"] .problem-grid,
html body .pillars.problem-pillars{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 48px;
}
html body .problem-pillars .pillar{
  position: relative;
  padding: 32px 28px 28px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
html body .problem-pillars .pillar:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

/* Pricing Cards: aufgewertet */
html body .price-grid{
  gap: 22px !important;
}
html body .price-card{
  padding: 36px 30px !important;
  border-radius: 22px !important;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}
html body .price-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.08);
}
html body .price-card.featured{
  background: #141416 !important;
  color: #fff !important;
  border-color: #cca958 !important;
  position: relative;
}
html body .price-card.featured::before{
  content: "Empfohlen";
  position: absolute;
  top: 18px; right: 18px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #cca958;
  padding: 4px 10px;
  border: 1px solid rgba(204,169,88,0.40);
  border-radius: 999px;
}

/* SEO Pakete Garantie Section: prominenter */
html body .garantie-card,
html body .seo-garantie{
  position: relative;
  padding: 40px 36px !important;
  background: linear-gradient(135deg, #141416 0%, #1d1d1f 100%) !important;
  color: #fff !important;
  border-radius: 24px !important;
  margin: 32px auto !important;
  max-width: 880px;
  overflow: hidden;
}
html body .garantie-card::before{
  content: "★";
  position: absolute;
  top: -10px; right: 24px;
  font-size: 6rem;
  color: rgba(204,169,88,0.10);
  font-weight: 900;
  pointer-events: none;
}

/* SEO Pakete Team Section: kreativer */
html body section[data-section="team"] .seo-team-grid,
html body .seo-team-grid{
  margin-top: 56px !important;
}

/* SEO Guide Page: Hero verbessern */
html body[data-page="seo-guide"] .page-intro,
html body .page-intro:has(.sgb-perks){
  position: relative;
}

/* Leistungen 'So arbeiten wir': Linie mittig */
html body .arch-steps-grid,
html body section .arch-flow{
  position: relative;
}
html body .arch-steps-grid::before,
html body section .arch-flow::before{
  content: "";
  position: absolute;
  top: 50% !important;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(204,169,88,0.40), transparent);
  z-index: 0;
  transform: translateY(-50%);
}

/* Leistungen 'Wie wir arbeiten': Weiß-auf-Weiß Bug fixen */
html body .leistung-card,
html body .leistungen-grid .leistung-card{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
}
html body .leistung-card *{
  color: inherit !important;
}
html body .leistung-card h3,
html body .leistung-card strong{
  color: #1d1d1f !important;
}
html body .leistung-card p{
  color: #515154 !important;
}

/* Filter-Seite "Alle Anbieter" (neue Seite) */
.providers-all-table{
  background: #fff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  overflow: hidden;
}
.providers-all-table th{
  background: rgba(20,20,22,0.04);
  padding: 16px 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #86868b;
  text-align: left;
  border-bottom: 1px solid rgba(20,20,22,0.08);
}
.providers-all-table td{
  padding: 14px 18px;
  font-size: 0.94rem;
  border-bottom: 1px solid rgba(20,20,22,0.05);
}

/* Article Card: Datum slot */
.article-card-meta time{
  font-size: 0.78rem;
  color: #86868b;
  margin-left: auto;
}

/* Blog-Artikel Slug: Kein Wrap im Browser-Bar visualization */
html body main article header h1{
  text-wrap: balance;
  word-break: normal;
}

/* ============================================================
   SEO PAKETE — Problem Pillars + Garantie Card finishing (2026-05-12O)
   ============================================================ */
html body .problem-pillars .pillar .pillar-num{
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 1.45rem;
  font-weight: 800;
  color: rgba(204,169,88,0.45);
  letter-spacing: -0.02em;
  line-height: 1;
}
html body .problem-pillars .pillar .arch-step-eyebrow{
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #86868b;
  display: inline-block;
  margin-bottom: 14px;
}
html body .problem-pillars .pillar .feature-title{
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
html body .problem-pillars .pillar .feature-text{
  color: #515154 !important;
  font-size: 0.94rem;
  line-height: 1.55;
  margin: 0 !important;
}

/* Garantie card finishing */
html body .garantie-card .garantie-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(204,169,88,0.15);
  border: 1px solid rgba(204,169,88,0.30);
  color: #cca958;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
html body .garantie-card .garantie-title{
  margin: 18px 0 14px !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em;
  max-width: 680px;
}
html body .garantie-card .garantie-text{
  color: rgba(255,255,255,0.74) !important;
  font-size: 1rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 26px !important;
}
html body .garantie-card .garantie-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
html body .garantie-card .garantie-meta span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: rgba(255,255,255,0.86);
  font-weight: 500;
}
html body .garantie-card .garantie-meta span i{
  color: #cca958;
  font-size: 0.78rem;
}

/* SEO Team Grid Card refinements (Felix Lead + offene Slots) */
html body .seo-team-card{
  position: relative;
  padding: 34px 30px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(20,20,22,0.08) !important;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  display: flex;
  flex-direction: column;
}
html body .seo-team-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.32);
  box-shadow: 0 18px 40px rgba(0,0,0,0.06);
}
html body .seo-team-card.seo-team-lead{
  background: linear-gradient(180deg, #ffffff 0%, #fafaf7 100%) !important;
  border-color: rgba(204,169,88,0.32) !important;
}
html body .seo-team-card.seo-team-open{
  background: rgba(20,20,22,0.02) !important;
}
html body .seo-team-card.seo-team-domains{
  background: linear-gradient(180deg, #1d1d1f 0%, #141416 100%) !important;
  color: #ffffff !important;
}
html body .seo-team-card.seo-team-domains h3,
html body .seo-team-card.seo-team-domains .seo-team-role,
html body .seo-team-card.seo-team-domains .seo-team-bio{
  color: #ffffff !important;
}
html body .seo-team-card.seo-team-domains .seo-team-cta{
  color: #cca958 !important;
}

/* ============================================================
   GRADIENT REMOVAL — feedback rule (2026-05-12P)
   Felix erlaubt keine Gradients. Alle vorherigen linear/radial
   Gradients durch solide Flächen ersetzen.
   ============================================================ */
html body section[id="staedte"] .city-card{
  background: #ffffff !important;
}
html body section.section-py:has(.hub-felix-cta){
  background: #0e0e10 !important;
}
html body[data-page="seo-pakete"] .page-intro::before,
html body .page-intro:has(.pricing-grid)::before{
  background: none !important;
  display: none !important;
}
html body .garantie-card,
html body .seo-garantie{
  background: #141416 !important;
}
html body .arch-steps-grid::before,
html body section .arch-flow::before{
  background: rgba(204,169,88,0.28) !important;
}
html body .seo-team-card.seo-team-lead{
  background: #fbfaf6 !important;
}
html body .seo-team-card.seo-team-domains{
  background: #141416 !important;
}

/* text-accent-gold solid (kein shimmer/gradient) */
html body .text-accent-gold,
html body .hero-title .text-accent-gold,
html body .text-gradient{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #cca958 !important;
  animation: none !important;
}

/* Hero Corner Mark (Leistungen + SEO Pakete) */
html body .page-intro .hero-corner-mark{
  position: absolute;
  top: 32px;
  right: 32px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(20,20,22,0.32);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 2;
}
html body .page-intro .hero-corner-mark span{
  color: rgba(204,169,88,0.80);
  margin: 0 4px;
}
@media (max-width: 768px){
  html body .page-intro .hero-corner-mark{
    top: 20px;
    right: 20px;
    font-size: 0.62rem;
  }
}

/* Pillar position: counter element needs anchor */
html body .problem-pillars .pillar{
  position: relative;
}

/* ============================================================
   NEWSLETTER — Netzwerk Band + Anatomie + Personas + Anti (2026-05-12Q)
   ============================================================ */
html body .gl-network-band{
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  max-width: 540px;
}
html body .gl-network-avatars{
  display: flex;
}
html body .gl-network-avatars a{
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(20,20,22,0.08);
  background: #f0f0f0;
  transition: transform 0.2s ease, z-index 0s;
  position: relative;
}
html body .gl-network-avatars a + a{ margin-left: -10px; }
html body .gl-network-avatars a:hover{
  transform: translateY(-2px) scale(1.08);
  z-index: 5;
}
html body .gl-network-avatars img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html body .gl-network-body{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
html body .gl-network-eyebrow{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #86868b;
}
html body .gl-network-name{
  font-size: 1rem;
  font-weight: 700;
  color: #1d1d1f;
}
html body .gl-network-sub{
  font-size: 0.78rem;
  color: #515154;
}

/* Anatomie einer Ausgabe */
html body .gl-anatomy{
  max-width: 880px;
  margin: 48px auto 0;
}
html body .gl-anatomy-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
html body .gl-anatomy-list li{
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 18px;
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 16px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
html body .gl-anatomy-list li:hover{
  border-color: rgba(204,169,88,0.30);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.05);
}
html body .gl-anatomy-step{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #1d1d1f;
  color: #ffffff;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
}
html body .gl-anatomy-list h3{
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
html body .gl-anatomy-list p{
  margin: 0;
  color: #515154;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Personas */
html body .gl-personas{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
html body .gl-persona{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 20px;
  padding: 32px 28px;
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
html body .gl-persona:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.30);
  box-shadow: 0 18px 38px rgba(0,0,0,0.06);
}
html body .gl-persona-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(204,169,88,0.10);
  color: #cca958;
  font-size: 1.25rem;
  margin-bottom: 18px;
}
html body .gl-persona h3{
  margin: 0 0 10px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
html body .gl-persona p{
  margin: 0;
  color: #515154;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* Anti Grid */
html body .gl-anti-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px;
  margin-top: 48px;
}
html body .gl-anti{
  padding: 32px 28px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
}
html body .gl-anti.gl-anti-yes{
  background: #141416;
  color: #ffffff;
  border-color: rgba(204,169,88,0.32);
}
html body .gl-anti-tag{
  display: inline-block;
  padding: 6px 12px;
  background: rgba(20,20,22,0.05);
  color: #86868b;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 18px;
}
html body .gl-anti.gl-anti-yes .gl-anti-tag{
  background: rgba(204,169,88,0.18);
  color: #cca958;
}
html body .gl-anti ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
html body .gl-anti li{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #515154;
}
html body .gl-anti.gl-anti-yes li{ color: rgba(255,255,255,0.86); }
html body .gl-anti li i{
  font-size: 0.86rem;
  color: #c0c0c4;
  margin-top: 4px;
}
html body .gl-anti.gl-anti-yes li i{ color: #cca958; }

@media (max-width: 640px){
  html body .gl-network-band{
    flex-direction: column;
    align-items: flex-start;
  }
  html body .gl-anatomy-list li{
    grid-template-columns: 48px 1fr;
    gap: 14px;
    padding: 18px;
  }
  html body .gl-anatomy-step{
    width: 40px;
    height: 40px;
    font-size: 0.86rem;
  }
}

/* ============================================================
   SEO GUIDE — Journey + Quotes (2026-05-12R)
   ============================================================ */
html body .guide-journey{
  display: grid;
  gap: 22px;
  max-width: 920px;
  margin: 56px auto 0;
}
html body .guide-journey .journey-row{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: start;
  padding: 32px 30px;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 22px;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
html body .guide-journey .journey-row:hover{
  border-color: rgba(204,169,88,0.30);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.06);
}
html body .guide-journey .journey-when{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #cca958;
  padding-top: 6px;
}
html body .guide-journey .journey-body h3{
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.02em;
}
html body .guide-journey .journey-body p{
  color: #515154;
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0 0 18px;
}
html body .guide-journey .journey-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
html body .guide-journey .journey-list li{
  padding-left: 22px;
  position: relative;
  font-size: 0.92rem;
  color: #1d1d1f;
}
html body .guide-journey .journey-list li::before{
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #cca958;
  font-weight: 700;
}
@media (max-width: 720px){
  html body .guide-journey .journey-row{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 22px;
  }
}

/* Guide Quotes */
html body .guide-quotes{
  display: grid;
  gap: 22px;
  margin-top: 48px;
}
html body .guide-quote{
  margin: 0;
  padding: 28px 30px;
  background: #ffffff;
  border-left: 3px solid #cca958;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}
html body .guide-quote blockquote{
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #1d1d1f;
  font-weight: 500;
  letter-spacing: -0.01em;
}
html body .guide-quote figcaption{
  font-size: 0.82rem;
  color: #86868b;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ============================================================
   EXPERTEN — Manifest + Card Profile-Link Fix (2026-05-12S)
   ============================================================ */
html body .manifest-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 56px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
html body .manifest-row{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 26px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(204,169,88,0.18);
  border-radius: 16px;
  align-items: start;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
html body .manifest-row:hover{
  border-color: rgba(204,169,88,0.42);
  transform: translateY(-3px);
  background: rgba(255,255,255,0.06);
}
html body .manifest-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(204,169,88,0.18);
  color: #cca958;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
html body .manifest-row h3{
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
}
html body .manifest-row p{
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Korrekte Klasse: .experte-card (nicht .expert-card) */
html body .experten-grid .experte-card{
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
html body .experten-grid .experte-card .experte-cta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  position: relative;
}
html body .experten-grid .experte-card .experte-cta::after{
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: rgba(204,169,88,0.40);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
html body .experten-grid .experte-card:hover .experte-cta::after{
  transform: scaleX(1);
}
html body .experten-grid .experte-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.32);
  box-shadow: 0 18px 40px rgba(0,0,0,0.07);
}

/* Deaktiviere das falsche ::after aus MEGA BATCH (class .expert-card existiert nicht) */
html body .experten-grid .expert-card::after,
html body .experten-card .card-profile-link{
  display: none !important;
  content: none !important;
}

/* ============================================================
   MOBILE FIX BATCH (2026-05-12U)
   - Search input: doppeltes X auf iOS entfernen
   - Burger Menu prominenter + besser benutzbar
   - Mobile-Nav klare Hierarchie + CTA
   ============================================================ */

/* === Search Inputs: natives Clear-X auf iOS/Chrome entfernen === */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}
input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal{
  display: none !important;
  width: 0;
  height: 0;
}

/* === BURGER MENU: prominenter, klarer Tap-Target === */
@media (max-width: 900px){
  html body .hamburger{
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    gap: 5px !important;
    background: rgba(20,20,22,0.04) !important;
    border: 1px solid rgba(20,20,22,0.08) !important;
    border-radius: 12px !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  }
  html body .hamburger:active{
    background: rgba(20,20,22,0.08) !important;
    transform: scale(0.96);
  }
  html body .hamburger span{
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #1d1d1f !important;
    border-radius: 2px !important;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  html body .hamburger.open{
    background: #1d1d1f !important;
    border-color: #1d1d1f !important;
  }
  html body .hamburger.open span{
    background: #ffffff !important;
  }
  html body .hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  html body .hamburger.open span:nth-child(2){ opacity: 0; }
  html body .hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* === MOBILE-NAV: klare Hierarchie, modernes Design === */
@media (max-width: 900px){
  html body .mobile-nav{
    background: #ffffff !important;
    padding: 84px 22px 32px !important;
    gap: 0 !important;
  }
  /* Wrapper-Effect: erste 4 Links als "Hauptnavigation" - groesser/bolder */
  html body .mobile-nav > a{
    font-size: 1.18rem !important;
    font-weight: 600 !important;
    padding: 16px 18px !important;
    margin-bottom: 6px !important;
    border: 1px solid rgba(20,20,22,0.06) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1d1d1f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, padding-left 0.2s ease !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
  }
  html body .mobile-nav > a::after{
    content: "" !important;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(20,20,22,0.30);
    border-top: 2px solid rgba(20,20,22,0.30);
    transform: rotate(45deg);
    transition: border-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
  }
  html body .mobile-nav > a:hover,
  html body .mobile-nav > a:active{
    background: rgba(20,20,22,0.03) !important;
    border-color: rgba(204,169,88,0.40) !important;
    color: #1d1d1f !important;
    padding-left: 22px !important;
  }
  html body .mobile-nav > a:hover::after,
  html body .mobile-nav > a:active::after{
    border-color: #cca958 !important;
    transform: rotate(45deg) translate(2px, -2px);
  }
  /* Letzter Link (Kontakt) als prominenter CTA-Button */
  html body .mobile-nav > a:last-of-type{
    background: #1d1d1f !important;
    color: #ffffff !important;
    border-color: #1d1d1f !important;
    margin-top: 18px !important;
    font-weight: 700 !important;
    padding: 18px 20px !important;
    justify-content: center !important;
  }
  html body .mobile-nav > a:last-of-type::after{
    border-color: #cca958 !important;
    margin-left: 10px;
  }
  html body .mobile-nav > a:last-of-type:hover,
  html body .mobile-nav > a:last-of-type:active{
    background: #0a0a0b !important;
    border-color: #0a0a0b !important;
    color: #ffffff !important;
    padding-left: 20px !important;
  }
  /* Section-Trennlinie als ::before auf bestimmten Items via Position (5. Item: about-Bereich) */
  html body .mobile-nav > a:nth-child(5)::before{
    content: "ÜBER QUIK";
    position: absolute;
    left: 0;
    top: -18px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #86868b;
    letter-spacing: 0.16em;
  }
  html body .mobile-nav > a:nth-child(5){
    position: relative;
    margin-top: 28px !important;
  }
  /* Logo im offenen Menue: visuelle Anker am oberen Rand */
  html body .mobile-nav.open::before{
    content: "";
    position: fixed;
    top: 20px;
    left: 22px;
    right: 22px;
    height: 1px;
    background: rgba(20,20,22,0.08);
    pointer-events: none;
  }
}

/* Safari iOS Tap-Highlight entfernen fuer cleane Buttons */
html body .hamburger,
html body .mobile-nav > a,
html body .mobile-nav,
html body input[type="search"]{
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   SEO VERZEICHNIS Hero - Verlauf entfernen (2026-05-12V)
   Memory-Regel: Niemals Gradients/Verlaeufe. Orbs raus.
   ============================================================ */
html body .hub-hero-orbs,
html body .hub-hero-orbs .orb,
html body .hub-hero-orbs .orb-1,
html body .hub-hero-orbs .orb-2,
html body .hub-hero-orbs .orb-3{
  display: none !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}

html body .hub-hero-grid-bg{
  mask-image: none !important;
  -webkit-mask-image: none !important;
  opacity: 0.5;
}

html body .hub-hero-v2{
  background: #ffffff !important;
}

/* ============================================================
   TOPBAR MOBILE als klarer CTA (2026-05-12W)
   - Arrow-Icon zeigt sichtbar dass es klickbar ist
   - Subtile Hover/Active Feedback
   ============================================================ */
@media (max-width: 600px){
  html body .topbar{
    padding: 11px 14px !important;
  }
  html body .topbar a{
    position: relative;
    padding-right: 30px;
  }
  /* Arrow als prominentes CTA-Icon rechts */
  html body .topbar .arrow{
    display: inline-flex !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(204,169,88,0.18);
    border: 1px solid rgba(204,169,88,0.40);
    color: #cca958 !important;
    font-size: 0;
    padding: 0;
    margin: 0;
    gap: 0;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  html body .topbar .arrow i{
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  html body .topbar a:active .arrow{
    background: rgba(204,169,88,0.32);
  }
  html body .topbar a:active .arrow i{
    transform: translateX(2px);
  }
  /* Text greift nicht in den Arrow-Bereich */
  html body .topbar .text{
    padding-right: 4px;
  }
}

/* ============================================================
   HUB MISSION + VISION SECTIONS - sauberes Design (2026-05-12W)
   Vorher: ungestylt, Browser-Defaults. Jetzt: klare Hierarchie.
   ============================================================ */

/* Mission Section: 3 Cards mit Icon */
html body .hub-mission{
  padding: 80px 0 !important;
  background: #ffffff;
}
html body .hub-mission .section-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
html body .hub-mission-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
html body .hub-mission-card{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 20px;
  padding: 36px 30px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}
html body .hub-mission-card:hover{
  transform: translateY(-4px);
  border-color: rgba(204,169,88,0.32);
  box-shadow: 0 18px 38px rgba(0,0,0,0.06);
}
html body .hub-mission-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(204,169,88,0.12);
  color: #cca958;
  font-size: 1.42rem;
  margin-bottom: 24px;
}
html body .hub-mission-card h3{
  margin: 0 0 12px;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1d1d1f;
  line-height: 1.3;
}
html body .hub-mission-card p{
  margin: 0;
  color: #515154;
  font-size: 0.95rem;
  line-height: 1.6;
}
@media (max-width: 900px){
  html body .hub-mission-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  html body .hub-mission-card{
    padding: 28px 24px;
  }
}

/* Vision Section: dunkel, 2 Spalten Text + Stats */
html body .hub-vision{
  padding: 88px 0 !important;
  background: #141416 !important;
  color: #ffffff !important;
}
html body .hub-vision-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
html body .hub-vision-text{
  max-width: 580px;
}
html body .hub-vision-eyebrow{
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #cca958;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(204,169,88,0.32);
  background: rgba(204,169,88,0.08);
  margin-bottom: 24px;
}
html body .hub-vision-title{
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #ffffff !important;
  line-height: 1.18;
  margin: 0 0 22px;
}
html body .hub-vision-text p{
  color: rgba(255,255,255,0.74);
  font-size: 1.04rem;
  line-height: 1.65;
  margin: 0 0 28px;
}
html body .hub-vision-bullets{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html body .hub-vision-bullets span{
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.96rem;
  font-weight: 500;
  color: rgba(255,255,255,0.92);
}
html body .hub-vision-bullets span i{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(204,169,88,0.18);
  color: #cca958;
  font-size: 0.7rem;
  flex-shrink: 0;
}
html body .hub-vision-stats{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
html body .hub-vision-stat{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 20px;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
html body .hub-vision-stat:hover{
  border-color: rgba(204,169,88,0.40);
  background: rgba(255,255,255,0.06);
}
html body .hub-vision-stat strong{
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #cca958;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
html body .hub-vision-stat span{
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255,255,255,0.74);
  letter-spacing: -0.005em;
}
@media (max-width: 900px){
  html body .hub-vision{
    padding: 64px 0 !important;
  }
  html body .hub-vision-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }
  html body .hub-vision-title{
    font-size: 1.7rem;
  }
  html body .hub-vision-stat{
    padding: 22px 24px;
  }
  html body .hub-vision-stat strong{
    font-size: 2.2rem;
  }
}

/* ============================================================
   HUB FELIX-CTA: Card-Design statt Full-Width Black (2026-05-12X)
   Vorher: dunkle Section direkt am dunklen Footer = ein Block.
   Jetzt: weisse Section, CTA als dunkles Card mit Trennwirkung.
   ============================================================ */
html body section.section-py:has(.hub-felix-cta){
  background: #ffffff !important;
  color: #1d1d1f !important;
  padding: 72px 0 !important;
}
html body section.section-py:has(.hub-felix-cta) .container.hub-felix-cta{
  background: #141416;
  color: #ffffff;
  border-radius: 24px;
  padding: 56px 48px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
/* Subtiler Gold-Akzent oben am Card */
html body section.section-py:has(.hub-felix-cta) .container.hub-felix-cta::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  background: #cca958;
  border-radius: 0 0 4px 4px;
}
html body section.section-py:has(.hub-felix-cta) .hub-felix-text{
  max-width: 720px;
}
html body section.section-py:has(.hub-felix-cta) .hub-felix-eyebrow{
  color: #cca958;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 18px;
}
html body section.section-py:has(.hub-felix-cta) h2{
  color: #ffffff !important;
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.22;
  margin: 0 0 16px;
}
html body section.section-py:has(.hub-felix-cta) p{
  color: rgba(255,255,255,0.78);
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 28px;
}
html body section.section-py:has(.hub-felix-cta) .hub-felix-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
html body section.section-py:has(.hub-felix-cta) .hub-felix-actions .btn-outline-light{
  border-color: rgba(255,255,255,0.30);
  color: #ffffff;
}
html body section.section-py:has(.hub-felix-cta) .hub-felix-actions .btn-outline-light:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.50);
}

@media (max-width: 720px){
  html body section.section-py:has(.hub-felix-cta){
    padding: 48px 0 !important;
  }
  html body section.section-py:has(.hub-felix-cta) .container.hub-felix-cta{
    padding: 40px 28px;
    border-radius: 20px;
    margin: 0 20px;
  }
  html body section.section-py:has(.hub-felix-cta) h2{
    font-size: 1.45rem;
  }
  html body section.section-py:has(.hub-felix-cta) .hub-felix-actions{
    flex-direction: column;
  }
  html body section.section-py:has(.hub-felix-cta) .hub-felix-actions .btn-primary,
  html body section.section-py:has(.hub-felix-cta) .hub-felix-actions .btn-outline-light{
    width: 100%;
    justify-content: center;
  }
}

/* Frühere Felix-CTA gradient Regel zurücknehmen (Memory: no gradients) */
html body section.section-py:has(.hub-felix-cta){
  background-image: none !important;
}
html body section.section-py:has(.hub-felix-cta)::after{
  display: none !important;
}

/* ============================================================
   Hero Trust Pill auf Mobile: kein Kreis (2026-05-12Y)
   Bei vertikalem Stacking sah das Pill aus wie ein Oval/Kreis.
   ============================================================ */
@media (max-width: 640px){
  html body .hero .hero-trust,
  html body .hero-trust{
    border-radius: 18px !important;
    padding: 14px 20px !important;
    gap: 10px 18px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    display: inline-flex !important;
    width: auto;
    max-width: 100%;
  }
  html body .hero .hero-trust-item,
  html body .hero-trust-item{
    font-size: 0.82rem !important;
    flex: 0 1 auto;
    white-space: nowrap;
  }
}

/* Footer Mobile Optimierung (2026-05-12Y)
   - Footer-cols auf Mobile sauber gestackt mit korrektem Padding
   - Bessere Hierarchie, keine zerquetschten Spalten
   ============================================================ */
@media (max-width: 640px){
  html body .footer-quik .footer-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    margin-bottom: 36px !important;
  }
  html body .footer-quik .footer-brand{
    text-align: left;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  html body .footer-quik .footer-tag{
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }
  html body .footer-quik .footer-cta{
    width: 100%;
    justify-content: center;
    margin-top: 18px;
    padding: 13px 22px;
  }
  /* Footer-cols nebeneinander wenn Platz, sonst stacked. 2x mobile-friendly */
  html body .footer-quik .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  html body .footer-quik .footer-col{
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  html body .footer-quik .footer-col:last-child{
    border-bottom: 0;
    padding-bottom: 0;
  }
  html body .footer-quik .footer-col h4{
    margin-bottom: 14px !important;
    font-size: 0.7rem !important;
  }
  html body .footer-quik .footer-col ul{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 18px !important;
  }
  html body .footer-quik .footer-col li{
    margin: 0 !important;
  }
  html body .footer-quik .footer-col a{
    font-size: 0.92rem !important;
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
  }
  /* Footer Bottom: sauberer Stack */
  html body .footer-quik .footer-bottom{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  html body .footer-quik .footer-bottom > span{
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
  }
  html body .footer-quik .footer-bottom .footer-partners{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  html body .footer-quik .footer-bottom .footer-legal{
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    width: 100%;
  }
  html body .footer-quik .footer-bottom .footer-legal a{
    font-size: 0.9rem;
    font-weight: 500;
  }
}

/* ============================================================
   FOOTER weisser Balken sitewide entfernen (2026-05-12Z)
   Cause Mobile: body.has-mobile-cta { padding-bottom: 100px } - body bg weiss zeigt sich.
   Cause Desktop: iOS Overscroll / Safari bottom safe-area.
   Fix: html background dark + padding wandert vom body in den footer.
   ============================================================ */
html{
  background-color: #141416 !important;
}
body{
  background-color: #ffffff;
}

/* Mobile sticky CTA Space: nicht mehr als body padding, sondern als footer padding */
@media (max-width: 600px){
  body.has-mobile-cta{
    padding-bottom: 0 !important;
  }
  body.has-mobile-cta footer{
    padding-bottom: 110px !important;
    margin-bottom: 0 !important;
  }
}

/* Fallback fuer Safari iOS bottom safe-area */
@supports (padding: env(safe-area-inset-bottom)){
  body.has-mobile-cta footer{
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}

/* ============================================================
   BURGER MENU MOBILE - cleaneres, Apple-Style Design (2026-05-12Z)
   Vorher: jeder Link als Card mit Border + Chevron = unruhig.
   Jetzt: Typografie-fokussiert, klare Hierarchie, ruhig.
   ============================================================ */
@media (max-width: 900px){
  /* Mobile-nav: cleaner container, mehr padding-top fuer Logo-Bereich */
  html body .mobile-nav{
    background: #ffffff !important;
    padding: 96px 28px 40px !important;
    gap: 0 !important;
  }

  /* Links: keine Cards mehr, einfache Apple-style Liste */
  html body .mobile-nav > a{
    font-size: 1.32rem !important;
    font-weight: 600 !important;
    padding: 18px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(20,20,22,0.07) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d1d1f !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
    text-decoration: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
  }
  /* Chevron Arrow: dezenter, nur dunkler beim Hover */
  html body .mobile-nav > a::after{
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.5px solid rgba(20,20,22,0.20) !important;
    border-top: 1.5px solid rgba(20,20,22,0.20) !important;
    border-radius: 0 !important;
    transform: rotate(45deg) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
    flex-shrink: 0;
    margin-left: 14px;
    background: none !important;
  }
  html body .mobile-nav > a:hover,
  html body .mobile-nav > a:active{
    color: #1d1d1f !important;
    background: transparent !important;
    padding-left: 8px !important;
    border-color: rgba(204,169,88,0.30) !important;
  }
  html body .mobile-nav > a:hover::after,
  html body .mobile-nav > a:active::after{
    border-color: #cca958 !important;
    transform: rotate(45deg) translate(2px, -2px) !important;
  }
  /* Section-Trennlinie weg, war zu unruhig */
  html body .mobile-nav > a:nth-child(5)::before{
    display: none !important;
  }
  html body .mobile-nav > a:nth-child(5){
    margin-top: 0 !important;
  }
  /* Erstes Item: keine obere Border noetig */
  html body .mobile-nav > a:first-of-type{
    border-top: 1px solid rgba(20,20,22,0.07) !important;
  }
  /* Last Item (Kontakt) als prominenter CTA-Button */
  html body .mobile-nav > a:last-of-type{
    margin-top: 28px !important;
    padding: 16px 24px !important;
    background: #141416 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 14px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  }
  html body .mobile-nav > a:last-of-type::after{
    border-color: #cca958 !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 10px;
  }
  html body .mobile-nav > a:last-of-type:hover,
  html body .mobile-nav > a:last-of-type:active{
    background: #0a0a0b !important;
    color: #ffffff !important;
    padding-left: 24px !important;
  }
  html body .mobile-nav > a:last-of-type:hover::after,
  html body .mobile-nav > a:last-of-type:active::after{
    border-color: #cca958 !important;
    transform: rotate(45deg) translate(2px, -2px) !important;
  }

  /* Burger Icon: weiterhin prominent, leicht angepasst */
  html body .hamburger{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    background: rgba(20,20,22,0.04) !important;
    border: 1px solid rgba(20,20,22,0.08) !important;
    border-radius: 12px !important;
  }
  html body .hamburger span{
    width: 18px !important;
    height: 1.8px !important;
    background: #1d1d1f !important;
  }
  html body .hamburger.open{
    background: #141416 !important;
    border-color: #141416 !important;
  }
  html body .hamburger.open span{
    background: #ffffff !important;
  }
}


/* ============================================================
   SITEWIDE DESIGN POLISH BATCH (2026-05-12 v.AA)
   - Gradient final removal
   - Italic final removal
   - Color-on-color guards
   - Mobile consistency
   - Section/Card padding harmonisierung
   - Tap-Targets sitewide
   ============================================================ */

html body *[style*="linear-gradient"],
html body *[style*="radial-gradient"]{
  background-image: none !important;
}

html body .text-gradient,
html body .quik-grad,
html body .text-accent-gold{
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: #cca958 !important;
  animation: none !important;
}

@keyframes quik-shimmer { from { opacity: 1; } to { opacity: 1; } }

html body p,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body span, html body div, html body li, html body a, html body em,
html body i:not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not([class*="fa-"]){
  font-style: normal !important;
}

html body .article-card,
html body .feature-card,
html body .leistung-card,
html body .pillar,
html body .hub-mission-card,
html body .price-card:not(.featured),
html body .blog-card,
html body .gl-persona,
html body .seo-team-card:not(.seo-team-domains){
  color: #1d1d1f;
}
html body .article-card h3,
html body .feature-card h3,
html body .pillar h3,
html body .hub-mission-card h3,
html body .gl-persona h3,
html body .seo-team-card:not(.seo-team-domains) h3{
  color: #1d1d1f !important;
}
html body .article-card p,
html body .feature-card p,
html body .pillar p,
html body .hub-mission-card p,
html body .gl-persona p,
html body .seo-team-card:not(.seo-team-domains) p{
  color: #515154 !important;
}

html body .price-card.featured,
html body .price-card.featured h3,
html body .price-card.featured p,
html body .gl-anti.gl-anti-yes,
html body .gl-anti.gl-anti-yes li,
html body .seo-team-card.seo-team-domains,
html body .seo-team-card.seo-team-domains h3,
html body .seo-team-card.seo-team-domains p{
  color: #ffffff !important;
}

html body .page-intro{ padding: 110px 0 56px; }
@media (max-width: 900px){
  html body .page-intro{ padding: 96px 0 36px !important; }
}
@media (max-width: 600px){
  html body .page-intro{ padding: 88px 0 28px !important; }
}

html body .page-intro .hero-title,
html body .article-hero h1,
html body .hub-hero-h1{
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
}
@media (max-width: 600px){
  html body .page-intro .hero-title,
  html body .article-hero h1{
    font-size: clamp(1.75rem, 7.5vw, 2.4rem) !important;
    line-height: 1.12 !important;
  }
}

html body .section-py{ padding: 80px 0; }
@media (max-width: 900px){ html body .section-py{ padding: 56px 0 !important; } }
@media (max-width: 600px){ html body .section-py{ padding: 48px 0 !important; } }

html body .article-card,
html body .feature-card,
html body .price-card,
html body .leistung-card,
html body .hub-mission-card,
html body .pillar,
html body .gl-persona,
html body .seo-team-card,
html body .featured-card,
html body .hub-vision-stat{
  border-radius: 20px;
}

@media (max-width: 900px){
  html body button,
  html body .btn-primary,
  html body .btn-outline,
  html body .btn-nav,
  html body input[type="submit"]{
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  html body .filter-pill{
    min-height: 40px;
  }
}

html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="search"],
html body input[type="url"],
html body textarea,
html body select{
  font-size: 0.95rem;
  padding: 12px 16px;
  border: 1px solid rgba(20,20,22,0.12);
  border-radius: 12px;
  background: #ffffff;
  color: #1d1d1f;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body input[type="search"]:focus,
html body input[type="url"]:focus,
html body textarea:focus,
html body select:focus{
  outline: none;
  border-color: #1d1d1f;
  box-shadow: 0 0 0 3px rgba(20,20,22,0.06);
}
@media (max-width: 600px){
  html body input[type="text"],
  html body input[type="email"],
  html body input[type="tel"],
  html body input[type="search"],
  html body textarea,
  html body select{
    font-size: 16px !important;
  }
}

html body .breadcrumbs{
  margin-bottom: 18px;
  font-size: 0.84rem;
  color: #86868b;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
html body .breadcrumbs a{
  color: #86868b;
  text-decoration: none;
  transition: color 0.2s ease;
}
html body .breadcrumbs a:hover{ color: #1d1d1f; }
html body .breadcrumbs .sep{
  color: rgba(20,20,22,0.20);
  margin: 0 2px;
}

html body .article-body a:not(.btn-primary):not(.btn-outline){
  text-decoration: underline;
  text-decoration-color: rgba(204,169,88,0.40);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
html body .article-body a:not(.btn-primary):not(.btn-outline):hover{
  text-decoration-color: #cca958;
}

html body .tag-cloud{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(20,20,22,0.08);
}
html body .tag-cloud a{
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: rgba(20,20,22,0.04);
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 999px;
  color: #515154 !important;
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
html body .tag-cloud a:hover{
  background: #141416 !important;
  color: #ffffff !important;
  border-color: #141416 !important;
}

html body .article-card-meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 0.82rem;
  color: #86868b;
  margin-top: 12px;
}
html body .article-card-meta img{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}
html body .article-card-meta .dot{
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(20,20,22,0.20);
}

html body .section-head{
  text-align: center;
  margin-bottom: 48px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
html body .section-eyebrow{
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #86868b;
  margin-bottom: 14px;
}
html body .section-title{
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
  margin: 0 0 14px;
}
html body .section-sub{
  font-size: 1rem;
  line-height: 1.6;
  color: #515154;
  margin: 0 auto;
  max-width: 640px;
}
@media (max-width: 600px){
  html body .section-head{ margin-bottom: 36px; }
  html body .section-title{ font-size: 1.55rem !important; }
  html body .section-sub{ font-size: 0.95rem !important; }
}

@media (max-width: 600px){
  html body .footer-quik{ padding-top: 48px !important; }
  html body .footer-quik .footer-tag{
    font-size: 0.92rem !important;
    line-height: 1.6;
  }
}

html body a,
html body button,
html body input,
html body textarea,
html body select{
  -webkit-tap-highlight-color: transparent;
}

html, body{ overflow-x: hidden; }
html body .container{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px){
  html body .container{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}


/* ============================================================
   AUDIT-DRIVEN POLISH BATCH (2026-05-12 v.BB)
   - Newsletter Hero linksbuendig (Memory rule)
   - Newsletter Form Consent-Label Overflow fix
   - Article Popup Auto-Open + Backdrop fix
   - FAQ Toggle Icon fix
   - Alle-Anbieter Filter Mobile 1-col
   - Hero Corner-Mark Mobile hide
   - Experten Manifest H2 Contrast
   - Card Banner Image fixes
   ============================================================ */

/* === Newsletter Hero LINKSBÜNDIG (Memory Rule) === */
html body[data-page="newsletter"] .gl-hero-copy,
html body .gl-hero-copy{
  text-align: left !important;
}
html body[data-page="newsletter"] .gl-hero-copy .hero-eyebrow,
html body .gl-hero-copy .hero-eyebrow{
  margin-left: 0 !important;
  margin-right: auto !important;
  display: inline-flex !important;
}
html body[data-page="newsletter"] .gl-hero-copy .hero-title,
html body[data-page="newsletter"] .gl-hero-copy .hero-subtitle,
html body .gl-hero-copy .hero-title,
html body .gl-hero-copy .hero-subtitle{
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html body[data-page="newsletter"] .gl-hero-copy .gl-network-band,
html body .gl-hero-copy .gl-network-band{
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* === Newsletter Form Consent-Label Overflow fix === */
html body .gl-form-card form .form-checkbox,
html body .newsletter-form .form-checkbox{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  margin-bottom: 12px;
}
html body .gl-form-card form .form-checkbox input[type="checkbox"],
html body .newsletter-form .form-checkbox input[type="checkbox"]{
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  height: 16px;
}
html body .gl-form-card form .form-checkbox label,
html body .newsletter-form .form-checkbox label{
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #515154;
  font-weight: 400 !important;
  margin: 0 !important;
  white-space: normal;
}
html body .gl-form-card form .form-checkbox label a,
html body .newsletter-form .form-checkbox label a{
  color: #1d1d1f;
  font-weight: 600;
}

/* Newsletter Form Card Width Stabilizer */
html body .gl-form-card{
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
html body .gl-form-card form{
  display: grid;
  gap: 14px;
}
html body .gl-form-card form > div,
html body .gl-form-card form > label,
html body .gl-form-card form > .form-checkbox,
html body .gl-form-card form > button{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* === Article Popup Auto-Open Override === */
/* Popup soll erst nach 5 sek erscheinen, nicht sofort */
html body .qg-popup{
  z-index: 99999 !important;
}
html body .qg-popup .qg-popup-backdrop{
  background: rgba(20,20,22,0.78) !important;
  backdrop-filter: blur(4px);
}

/* === FAQ Toggle Icon: pure CSS + Sign mit Plus statt Buchstabe === */
html body .faq-item summary::after,
html body .hub-faq-item summary::after{
  content: "+" !important;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 300 !important;
  font-size: 1.4rem !important;
  line-height: 1 !important;
}
html body .faq-item[open] summary::after,
html body .hub-faq-item[open] summary::after{
  content: "−" !important;
}

/* === Alle-Anbieter Filter Bar Mobile (1-col stack) === */
@media (max-width: 720px){
  html body .filter-bar-pro .filter-bar-row{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
  }
  html body .filter-bar-pro .filter-search-wrap,
  html body .filter-bar-pro .filter-select-wrap{
    width: 100% !important;
  }
  html body .filter-bar-pro .filter-select-wrap select{
    width: 100% !important;
    min-width: 0 !important;
  }
  html body .filter-bar-pro .city-filter-count{
    align-self: flex-start;
  }
}

/* === Hero Corner-Mark Mobile: ganz verstecken da abgeschnitten === */
@media (max-width: 768px){
  html body .page-intro .hero-corner-mark{
    display: none !important;
  }
}

/* === Experten Manifest H2 Kontrast (dunkler Background, weisser Titel) === */
html body section[style*="background:#141416"] .section-title,
html body section[style*="background: #141416"] .section-title,
html body .manifest-grid + * .section-title,
html body section.section-py[style*="background:#141416"] h2.section-title{
  color: #ffffff !important;
}
html body section.section-py[style*="background"] .section-head .section-title{
  color: #ffffff !important;
}

/* Wir bauen kein Verzeichnis Section header */
html body section.section-py[style*="background:#141416"] .section-head h2,
html body section.section-py[style*="background: #141416"] .section-head h2{
  color: #ffffff !important;
}
html body section.section-py[style*="background:#141416"] .section-head .section-sub,
html body section.section-py[style*="background: #141416"] .section-head .section-sub{
  color: rgba(255,255,255,0.74) !important;
}
html body section.section-py[style*="background:#141416"] .section-head .section-eyebrow,
html body section.section-py[style*="background: #141416"] .section-head .section-eyebrow{
  color: #cca958 !important;
}

/* === Article Card Cover Banner Image fix === */
html body .article-card .article-card-cover{
  position: relative;
  overflow: hidden;
  background: #f5f5f7;
  aspect-ratio: 16 / 9;
}
html body .article-card .article-card-cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html body .article-card .article-card-cat{
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1d1d1f;
  border: 1px solid rgba(20,20,22,0.05);
}

/* === Force lowercase "quik" in eyebrows where it should be lowercase === */
/* Eyebrows die uppercase via text-transform machen, brauchen kein quik fix */
/* Aber regular text muss quik klein behalten */


/* ============================================================
   NO GOLD WORDS IN HEADLINES (2026-05-12 v.CC)
   User explicit: kein goldenes Wort in Headlines sitewide.
   text-accent-gold + text-gradient + qg-gold + gold-text spans
   in H1/H2/H3 inheriten jetzt Parent-Farbe (dunkel statt gold).
   ============================================================ */
html body h1 .text-accent-gold,
html body h1 .text-gradient,
html body h1 .qg-gold,
html body h1 .gold-text,
html body h1 em,
html body h2 .text-accent-gold,
html body h2 .text-gradient,
html body h2 .qg-gold,
html body h2 .gold-text,
html body h2 em,
html body h3 .text-accent-gold,
html body h3 .text-gradient,
html body h3 .qg-gold,
html body h3 .gold-text,
html body h3 em,
html body .hero-title .text-accent-gold,
html body .hero-title .text-gradient,
html body .hero-title em,
html body .article-hero h1 .text-accent-gold,
html body .article-hero h1 .text-gradient,
html body .article-hero h1 em,
html body .section-title .text-accent-gold,
html body .section-title .text-gradient,
html body .section-title em,
html body .hub-hero-h1 .text-accent-gold,
html body .hub-hero-h1 .text-gradient,
html body .hub-vision-title .text-accent-gold,
html body .hub-vision-title .text-gradient{
  color: inherit !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: inherit !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* Aber: Gold bleibt erlaubt fuer kleinere Akzente (Pills, Stats, Eyebrows, Icons) - nur in Headlines verboten. */


/* ============================================================
   FORM-CHECKBOX Label Regression Fix (2026-05-12 v.DD)
   v.BB fuegte word-break: break-word ein → kaputt
   Jetzt richtig: overflow-wrap + normales Flex
   ============================================================ */

/* Reset force fuer Newsletter Form Checkbox */
html body .gl-form-card form .form-checkbox,
html body .newsletter-form .form-checkbox,
html body form[data-event="newsletter"] .form-checkbox{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

html body .gl-form-card form .form-checkbox > input[type="checkbox"],
html body .newsletter-form .form-checkbox > input[type="checkbox"],
html body form[data-event="newsletter"] .form-checkbox > input[type="checkbox"]{
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
}

html body .gl-form-card form .form-checkbox > label,
html body .newsletter-form .form-checkbox > label,
html body form[data-event="newsletter"] .form-checkbox > label{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: #515154 !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  display: block !important;
}

html body .gl-form-card form .form-checkbox > label a{
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

/* SEO Guide popup form-checkbox identical Fix */
html body .qg-popup-form .form-checkbox,
html body form.qg-popup-form > .form-checkbox{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
}
html body .qg-popup-form .form-checkbox > span{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  color: #515154 !important;
}

/* SEO Guide form (Ressourcen page) Checkbox */
html body form[data-event="seo-guide"] .form-checkbox,
html body form[data-event="contact"] .form-checkbox{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}
html body form[data-event="seo-guide"] .form-checkbox > label,
html body form[data-event="contact"] .form-checkbox > label{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
}

/* Wieder GL-Hero Layout-Stabilizer: linksbuendig nur via text-align, NICHT via margin-tricks */
html body .gl-hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px){
  html body .gl-hero-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
html body .gl-hero-copy{
  text-align: left;
  min-width: 0;
}
html body .gl-hero-copy .hero-title{
  text-align: left;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 14px 0 18px;
}
html body .gl-hero-copy .hero-subtitle{
  text-align: left;
  font-size: 1.04rem;
  line-height: 1.55;
  color: #515154;
  margin: 0 0 28px;
  max-width: 540px;
}
html body .gl-hero-copy .hero-eyebrow{
  display: inline-flex;
  margin: 0;
}


/* ============================================================
   FORM-CHECKBOX FINAL FIX (2026-05-12 v.EE)
   Vorher: flex: 1 1 0 + min-width: 0 = label width 0px = per-letter wrap
   Jetzt: simple block-Layout mit padding-left fuer Checkbox-Space
   ============================================================ */

/* Reset alle vorherigen .form-checkbox Rules komplett */
html body .gl-form-card form .form-checkbox,
html body .newsletter-form .form-checkbox,
html body form[data-event="newsletter"] .form-checkbox,
html body form[data-event="seo-guide"] .form-checkbox,
html body form[data-event="contact"] .form-checkbox{
  display: block !important;
  position: relative !important;
  padding-left: 28px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}

html body .gl-form-card form .form-checkbox > input[type="checkbox"],
html body .newsletter-form .form-checkbox > input[type="checkbox"],
html body form[data-event="newsletter"] .form-checkbox > input[type="checkbox"],
html body form[data-event="seo-guide"] .form-checkbox > input[type="checkbox"],
html body form[data-event="contact"] .form-checkbox > input[type="checkbox"]{
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
}

html body .gl-form-card form .form-checkbox > label,
html body .newsletter-form .form-checkbox > label,
html body form[data-event="newsletter"] .form-checkbox > label,
html body form[data-event="seo-guide"] .form-checkbox > label,
html body form[data-event="contact"] .form-checkbox > label{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  flex-basis: auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  color: #515154 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

html body .gl-form-card form .form-checkbox > label a,
html body .newsletter-form .form-checkbox > label a{
  color: #1d1d1f !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Popup form (qg-popup-form) Checkbox - selber Reset */
html body .qg-popup-form .form-checkbox{
  display: block !important;
  position: relative !important;
  padding-left: 28px !important;
  width: 100% !important;
  margin: 14px 0 !important;
}
html body .qg-popup-form .form-checkbox > input[type="checkbox"]{
  position: absolute !important;
  left: 0 !important;
  top: 3px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}
html body .qg-popup-form .form-checkbox > span{
  display: block !important;
  width: 100% !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  color: #515154 !important;
  flex: none !important;
}


/* ============================================================
   CRITICAL FIX FF (2026-05-12 v.FF)
   1. White-on-gray H2 bug: meine frühere Rule zu breit
   2. Scroll-Probleme: overflow-x:hidden auf html entfernen
   ============================================================ */

/* === FIX 1: Section-Title default DUNKEL, nur explizit dark sections weiss === */
/* Reset: alle section-title default zurück auf dunkel */
html body section .section-title,
html body section h2.section-title,
html body section h2{
  color: #1d1d1f;
}

/* Nur DARK Sections: weisser Title */
html body section[style*="#141416"] .section-title,
html body section[style*="#1d1d1f"] .section-title,
html body section[style*="#0a0a0b"] .section-title,
html body section[style*="#141416"] h2,
html body section[style*="#1d1d1f"] h2,
html body section[style*="#0a0a0b"] h2,
html body .hub-vision .section-title,
html body .hub-vision h2,
html body section.hub-vision h2,
html body section[style*="color: #fff"] h2,
html body section[style*="color:#fff"] h2,
html body section[style*="color: white"] h2{
  color: #ffffff !important;
}

/* Auch für text-gradient/accent-gold spans innerhalb dark sections */
html body section[style*="#141416"] h2 .text-gradient,
html body section[style*="#141416"] h2 .text-accent-gold,
html body section[style*="#141416"] h2 em,
html body section[style*="#1d1d1f"] h2 .text-gradient,
html body section[style*="#1d1d1f"] h2 .text-accent-gold{
  color: #ffffff !important;
}

/* === FIX 2: SCROLL-PROBLEME === */
/* overflow-x: hidden auf html verursacht iOS Scroll-Issues */
html{
  overflow-x: visible !important;
  -webkit-overflow-scrolling: touch;
}
/* Body kann overflow-x clip statt hidden (besseres iOS Verhalten) */
body{
  overflow-x: clip !important;
}
/* Bei Browsern ohne clip-Support, fallback hidden auf body */
@supports not (overflow-x: clip){
  body{
    overflow-x: hidden !important;
  }
}

/* Verhindere dass body scroll lockt wenn popup zu */
html body:not(.popup-open){
  overflow-y: auto !important;
  height: auto !important;
  position: static !important;
}

/* Reading-progress sollte Scroll nicht beeinflussen */
html body .reading-progress{
  pointer-events: none;
  user-select: none;
}

/* iOS scroll touch action */
html body main,
html body article,
html body section{
  touch-action: pan-y;
}


/* ============================================================
   CRITICAL FIX GG (2026-05-12 v.GG)
   Override: section[style*="background"] .section-title { white } 
   → only fuer DARK sections, sonst dunkel
   ============================================================ */

/* Reset: section[style*=background] .section-head .section-title default DUNKEL */
html body section.section-py[style*="background"] .section-head .section-title,
html body section.section-py[style*="background"] .section-head h2,
html body section.section-py[style*="background"] .section-head h1,
html body section.section-py[style*="background"] .section-title,
html body section.section-py[style*="background"] h2.section-title{
  color: #1d1d1f !important;
}

html body section.section-py[style*="background"] .section-head .section-sub,
html body section.section-py[style*="background"] .section-head p.section-sub{
  color: #515154 !important;
}

html body section.section-py[style*="background"] .section-head .section-eyebrow{
  color: #86868b !important;
}

/* Nur DARK sections: weisser Titel */
html body section.section-py[style*="#141416"] .section-head .section-title,
html body section.section-py[style*="#141416"] .section-title,
html body section.section-py[style*="#141416"] h2,
html body section.section-py[style*="#1d1d1f"] .section-head .section-title,
html body section.section-py[style*="#1d1d1f"] .section-title,
html body section.section-py[style*="#1d1d1f"] h2,
html body section.section-py[style*="#0a0a0b"] .section-head .section-title,
html body section.section-py[style*="#0a0a0b"] .section-title,
html body section.section-py[style*="#0a0a0b"] h2{
  color: #ffffff !important;
}

html body section.section-py[style*="#141416"] .section-head .section-sub,
html body section.section-py[style*="#1d1d1f"] .section-head .section-sub,
html body section.section-py[style*="#0a0a0b"] .section-head .section-sub{
  color: rgba(255,255,255,0.74) !important;
}

html body section.section-py[style*="#141416"] .section-head .section-eyebrow,
html body section.section-py[style*="#1d1d1f"] .section-head .section-eyebrow,
html body section.section-py[style*="#0a0a0b"] .section-head .section-eyebrow{
  color: #cca958 !important;
}


/* ============================================================
   SCROLL PERFORMANCE FIX (2026-05-12 v.HH)
   - .ambient fixed + backdrop-filter verursacht iOS Scroll-Jank
   - qg-popup wenn closed soll display:none statt opacity:0
   ============================================================ */

/* .ambient: passiv, kein GPU/performance hit */
html body .ambient{
  pointer-events: none !important;
  will-change: auto !important;
  z-index: 0 !important;
}

/* Auf Mobile: .ambient ganz aus (perf gewinn fuer Scroll) */
@media (max-width: 900px){
  html body .ambient,
  html body .ambient .noise{
    display: none !important;
  }
}

/* Popup wenn closed: vollstaendig versteckt, kein backdrop-filter Rendering */
html body .qg-popup:not([data-open]):not([data-open="1"]){
  display: none !important;
}
html body .qg-popup[aria-hidden="true"]:not([data-open]):not([data-open="1"]){
  display: none !important;
}

/* Scroll-Performance: passiv touch + smooth iOS */
html{
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
body{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
}

/* Will-change vermeiden auf Elementen die sich nicht animieren */
html body section,
html body main,
html body article{
  will-change: auto !important;
  transform: none;
}


/* ============================================================
   LOGO: kein Gold (2026-05-12 v.II)
   User-Regel: kein Gold im Logo sitewide
   ============================================================ */
html body .nav-logo .quik-grad,
html body .nav-logo .startup-text,
html body .logo-wordmark .quik-grad,
html body .logo-wordmark .startup-text,
html body .footer-quik .quik-grad,
html body .footer-quik .startup-text{
  color: #1d1d1f !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  animation: none !important;
}

/* Footer Logo auf dunklem Background -> weiss statt gold */
html body .footer-quik .logo-wordmark .quik-grad,
html body .footer-quik .logo-wordmark .startup-text,
html body .footer-quik .nav-logo .quik-grad,
html body .footer-quik .nav-logo .startup-text{
  color: #ffffff !important;
}

/* Auch Brand-Mark SVG: accent circle nicht gold */
html body .nav-logo .brand-mark .service-icon .accent{
  fill: #1d1d1f !important;
}
html body .footer-quik .brand-mark .service-icon .accent{
  fill: #ffffff !important;
}


/* ============================================================
   LOGO TYPOGRAPHY wie quik-startup.com (2026-05-12 v.JJ)
   - quik = bold 700, dunkel #1d1d1f
   - services = medium 500, grau #86868b
   - Apple SF Pro Display + tight letter-spacing
   ============================================================ */
html body .nav-logo,
html body .logo-wordmark,
html body .footer-quik .nav-logo,
html body .footer-quik .logo-wordmark{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Helvetica Neue", sans-serif !important;
  letter-spacing: -0.02em !important;
}

html body .nav-logo .quik-grad,
html body .logo-wordmark .quik-grad{
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.02em !important;
}

html body .nav-logo .startup-text,
html body .logo-wordmark .startup-text{
  font-weight: 500 !important;
  color: #86868b !important;
  letter-spacing: -0.02em !important;
  margin-left: 6px;
}

/* Footer (dark bg): quik weiss, services hellgrau */
html body .footer-quik .nav-logo .quik-grad,
html body .footer-quik .logo-wordmark .quik-grad{
  font-weight: 700 !important;
  color: #ffffff !important;
}
html body .footer-quik .nav-logo .startup-text,
html body .footer-quik .logo-wordmark .startup-text{
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
}


/* ============================================================
   KONTRAST + KEIN GRÜN (2026-05-12 v.KK)
   1. Kein gruener Live-Pulse Dot (User: kein Gruen)
   2. seo-team-card CTA "Profil ansehen" sichtbar (war weiss auf hell)
   3. Sitewide guard: keine weisse Schrift auf weiss / schwarze auf schwarz
   ============================================================ */

/* === FIX 1: Live-Pulse Dot von gruen -> gold === */
html body .live-pulse,
html body .seo-team-tag .live-pulse,
html body span.live-pulse{
  background: #cca958 !important;
  background-color: #cca958 !important;
}
html body .live-pulse::before,
html body .live-pulse::after{
  background: rgba(204,169,88,0.40) !important;
  background-color: rgba(204,169,88,0.40) !important;
}
/* Falls .live-pulse box-shadow als Pulse hat */
html body .live-pulse{
  box-shadow: 0 0 0 0 rgba(204,169,88,0.6);
}

/* Alle vermeintlichen Gruen-Werte auf neutral */
html body [style*="color: green"],
html body [style*="color: #00"],
html body [style*="color: rgb(0"],
html body .green,
html body .text-green{
  color: #1d1d1f !important;
}

/* === FIX 2: seo-team-card CTA Visibility === */
html body .seo-team-card.seo-team-lead .seo-team-cta,
html body .seo-team-card.seo-team-open .seo-team-cta,
html body .seo-team-card:not(.seo-team-domains) .seo-team-cta{
  color: #1d1d1f !important;
  font-weight: 600 !important;
}
html body .seo-team-card.seo-team-lead .seo-team-cta:hover,
html body .seo-team-card.seo-team-open .seo-team-cta:hover{
  color: #cca958 !important;
}

/* seo-team-domains (DARK card) CTA bleibt gold */
html body .seo-team-card.seo-team-domains .seo-team-cta{
  color: #cca958 !important;
}

/* === FIX 3: SITEWIDE Kontrast-Guard === */
/* Button mit dunklem BG hat IMMER weissen Text */
html body button.btn-primary,
html body a.btn-primary,
html body .btn-primary{
  background: #1d1d1f !important;
  color: #ffffff !important;
  border: 1px solid #1d1d1f !important;
}
html body button.btn-primary:hover,
html body a.btn-primary:hover,
html body .btn-primary:hover{
  background: #0a0a0b !important;
  color: #ffffff !important;
  border-color: #0a0a0b !important;
}

/* Button mit hellem/transparenten BG hat IMMER dunklen Text */
html body button.btn-outline,
html body a.btn-outline,
html body .btn-outline{
  background: transparent !important;
  color: #1d1d1f !important;
  border: 1px solid rgba(20,20,22,0.20) !important;
}
html body button.btn-outline:hover,
html body a.btn-outline:hover,
html body .btn-outline:hover{
  background: rgba(20,20,22,0.04) !important;
  color: #1d1d1f !important;
  border-color: #1d1d1f !important;
}

/* btn-outline-light: nur fuer dunklen BG -> heller Text */
html body .btn-outline-light{
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
html body .btn-outline-light:hover{
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

/* Btn-nav (Termin buchen in Navbar) sitewide */
html body a.btn-nav,
html body .btn-nav{
  background: #1d1d1f !important;
  color: #ffffff !important;
}
html body a.btn-nav:hover{
  background: #0a0a0b !important;
  color: #ffffff !important;
}

/* Featured Price Card (dunkel) Button Override */
html body .price-card.featured .btn-primary{
  background: #ffffff !important;
  color: #1d1d1f !important;
  border-color: #ffffff !important;
}
html body .price-card.featured .btn-primary:hover{
  background: rgba(255,255,255,0.92) !important;
  color: #1d1d1f !important;
}

/* Allgemein: Wenn ein Element [data-bg="dark"] hat -> heller Text */
html body [data-bg="dark"] *{
  color: #ffffff;
}

/* ============================================================
   Leistungen Hero v2 + neue Sections (2026-05-13)
   ============================================================ */
.leistungen-hero-v2 .leistungen-hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.leistungen-hero-v2 .leistungen-hero-copy{ min-width: 0; }
.leistungen-hero-v2 .hero-title{
  font-size: clamp(2rem, 4.8vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 16px 0 18px;
  font-weight: 700;
  color: #1d1d1f;
}
.leistungen-hero-v2 .hero-subtitle{
  font-size: 1.08rem;
  line-height: 1.55;
  color: #424246;
  max-width: 56ch;
}
.leistungen-hero-ctas{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 32px 0 28px;
}
.leistungen-hero-v2 .leistungen-trust-strip{
  background: transparent;
  border: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(20,20,22,0.08);
  padding-top: 24px;
  margin-top: 8px;
}
.leistungen-hero-v2 .leistungen-trust-strip .trust-cell{
  border-right: 1px solid rgba(20,20,22,0.08);
  padding: 0 18px;
}
.leistungen-hero-v2 .leistungen-trust-strip .trust-cell:first-child{ padding-left: 0; }
.leistungen-hero-v2 .leistungen-trust-strip .trust-cell:last-child{ border-right: 0; }
.leistungen-hero-v2 .leistungen-trust-strip .trust-cell strong{
  font-size: 1.55rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.leistungen-hero-v2 .leistungen-trust-strip .trust-cell span{
  font-size: 0.78rem;
  color: #6e6e73;
}

/* Right column: architecture stack visual */
.leistungen-hero-stack{
  position: relative;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%);
  border-radius: 24px;
  padding: 28px 24px;
  border: 1px solid rgba(20,20,22,0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 380px;
  justify-content: center;
}
.leistungen-hero-stack .lh-layer{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.leistungen-hero-stack .lh-layer:hover{
  transform: translateX(-4px);
  box-shadow: 0 4px 12px rgba(20,20,22,0.06);
}
.leistungen-hero-stack .lh-layer-top{
  margin-right: 0;
  border-top: 2px solid #cca958;
}
.leistungen-hero-stack .lh-layer-mid{ margin-right: 14px; }
.leistungen-hero-stack .lh-layer-base{ margin-right: 28px; }
.leistungen-hero-stack .lh-layer-num{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #86868b;
  flex: 0 0 auto;
  width: 22px;
  font-variant-numeric: tabular-nums;
}
.leistungen-hero-stack .lh-layer-body strong{
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.leistungen-hero-stack .lh-layer-body span{
  display: block;
  font-size: 0.84rem;
  color: #6e6e73;
  margin-top: 2px;
}
.leistungen-hero-stack .lh-tag{
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #86868b;
}
@media (max-width: 960px){
  .leistungen-hero-v2 .leistungen-hero-grid{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .leistungen-hero-stack{
    min-height: auto;
    padding: 22px 18px;
  }
  .leistungen-hero-stack .lh-layer-mid{ margin-right: 10px; }
  .leistungen-hero-stack .lh-layer-base{ margin-right: 22px; }
}
@media (max-width: 600px){
  .leistungen-hero-v2 .leistungen-trust-strip{
    grid-template-columns: repeat(3, 1fr);
  }
  .leistungen-hero-v2 .leistungen-trust-strip .trust-cell{
    padding: 0 10px;
  }
  .leistungen-hero-v2 .leistungen-trust-strip .trust-cell strong{ font-size: 1.25rem; }
}

/* ============================================================
   Section: Drei Ebenen Architektur (leist-arch-section)
   ============================================================ */
.leist-arch-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.leist-arch-card{
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.leist-arch-card:hover{
  transform: translateY(-3px);
  border-color: rgba(20,20,22,0.16);
  box-shadow: 0 14px 36px -18px rgba(20,20,22,0.18);
}
.leist-arch-card .leist-arch-num{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.leist-arch-card .leist-arch-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(20,20,22,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #1d1d1f;
}
.leist-arch-card h3{
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  margin: 4px 0 2px;
}
.leist-arch-card .leist-arch-desc{
  font-size: 0.96rem;
  line-height: 1.55;
  color: #424246;
}
.leist-arch-card .leist-arch-list{
  list-style: none;
  margin: 8px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(20,20,22,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leist-arch-card .leist-arch-list li{
  font-size: 0.9rem;
  color: #424246;
  padding-left: 18px;
  position: relative;
}
.leist-arch-card .leist-arch-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2889ff;
}
.leist-arch-card-mid .leist-arch-list li::before{ background: #1d1d1f; }
.leist-arch-card-top{
  background: #1d1d1f;
  border-color: #1d1d1f;
  color: #ffffff;
}
.leist-arch-card-top .leist-arch-num{ color: rgba(255,255,255,0.55); }
.leist-arch-card-top .leist-arch-icon{
  background: rgba(255,255,255,0.10);
  color: #cca958;
}
.leist-arch-card-top h3{ color: #ffffff; }
.leist-arch-card-top .leist-arch-desc{ color: rgba(255,255,255,0.74); }
.leist-arch-card-top .leist-arch-list{ border-top-color: rgba(255,255,255,0.10); }
.leist-arch-card-top .leist-arch-list li{ color: rgba(255,255,255,0.74); }
.leist-arch-card-top .leist-arch-list li::before{ background: #cca958; }
@media (max-width: 960px){
  .leist-arch-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================================
   Section: Was bleibt bei dir (leist-deliverables)
   ============================================================ */
.leist-deliverables-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.leist-deliv-card{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.leist-deliv-card:hover{
  border-color: rgba(20,20,22,0.16);
  transform: translateY(-2px);
}
.leist-deliv-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(20,20,22,0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: #1d1d1f;
  margin-bottom: 2px;
}
.leist-deliv-card h3{
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  margin: 0;
}
.leist-deliv-card p{
  font-size: 0.92rem;
  line-height: 1.55;
  color: #424246;
  margin: 0;
}
@media (max-width: 960px){
  .leist-deliverables-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .leist-deliverables-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Experten Hero — Avatar Strip (2026-05-13)
   ============================================================ */
.experten-hero-avatars{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: 48px auto 0;
  max-width: 640px;
  position: relative;
  flex-wrap: wrap;
}
.experten-hero-avatars .expa{
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin-left: -14px;
  border: 3px solid #ffffff;
  background: #fafafa;
  box-shadow: 0 4px 14px -6px rgba(20,20,22,0.18);
  transition: transform 0.22s ease, z-index 0s ease 0.22s;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.experten-hero-avatars .expa:first-child{ margin-left: 0; }
.experten-hero-avatars .expa:hover{
  transform: translateY(-6px) scale(1.06);
  z-index: 10;
  transition: transform 0.22s ease, z-index 0s ease;
}
.experten-hero-avatars .expa img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.experten-hero-avatars .expa-tag{
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #86868b;
  margin-top: 16px;
}
@media (max-width: 480px){
  .experten-hero-avatars .expa{ width: 56px; height: 56px; margin-left: -10px; }
}

/* ============================================================
   Slot Status section — visualer Grid statt Listen-Rows
   ============================================================ */
.exp-domain-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}
.exp-domain-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 14px;
  padding: 18px 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.exp-domain-row:hover{
  border-color: rgba(20,20,22,0.18);
  transform: translateY(-1px);
}
.exp-domain-row .exp-domain-name{
  font-size: 1.02rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.005em;
  grid-column: 1;
  grid-row: 1;
}
.exp-domain-row .exp-domain-slots{
  grid-column: 1;
  grid-row: 2;
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exp-domain-row .exp-domain-slots span{
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.exp-domain-row .exp-domain-slots .taken{
  background: rgba(20,20,22,0.04);
  color: #424246;
}
.exp-domain-row .exp-domain-slots .open{
  background: rgba(40,137,255,0.08);
  color: #2889ff;
}
.exp-domain-row .exp-domain-status{
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  align-self: center;
}
.exp-domain-row .exp-domain-status.full{
  background: rgba(20,20,22,0.05);
  color: #6e6e73;
}
.exp-domain-row .exp-domain-status.open{
  background: #1d1d1f;
  color: #ffffff;
}
@media (max-width: 760px){
  .exp-domain-list{ grid-template-columns: 1fr; }
}

/* ============================================================
   Experten — Manifest Section (replaces old "Eine Bewegung")
   2-Spalten: Statement + 4 Pillars als Cards
   ============================================================ */
/* Updated 2026-05-13: full-width black section replaced by an inner
   rounded dark card (per Felix sitewide rule: nie schwarz über volle Breite). */
.exp-manifest-section{
  background: transparent;
  padding: 80px 0;
}
.exp-manifest-section > .container{
  background: #141416;
  color: #ffffff;
  border-radius: 32px;
  padding: 80px 56px;
  position: relative;
  overflow: hidden;
}
.exp-manifest-section > .container::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 18%, rgba(204,169,88,0.05) 0%, transparent 50%),
    radial-gradient(circle at 88% 84%, rgba(40,137,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.exp-manifest-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}
@media (max-width: 720px){
  .exp-manifest-section{ padding: 56px 0; }
  .exp-manifest-section > .container{
    border-radius: 24px;
    padding: 48px 28px;
  }
}
.exp-manifest-statement{ position: sticky; top: 110px; }
.exp-manifest-eyebrow{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cca958;
  margin-bottom: 18px;
  padding: 5px 12px;
  border: 1px solid rgba(204,169,88,0.32);
  border-radius: 999px;
}
.exp-manifest-title{
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #ffffff;
  font-weight: 700;
  margin: 0 0 22px;
}
.exp-manifest-lede{
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
  max-width: 38ch;
  margin: 0 0 18px;
}
.exp-manifest-meta{
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.62);
}
.exp-manifest-meta span{ display: inline-flex; align-items: center; gap: 10px; }
.exp-manifest-meta i{ color: #cca958; font-size: 13px; }

/* Pillars (4 cards stacked) */
.exp-manifest-pillars{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.exp-pillar{
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 26px 28px;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.exp-pillar:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(204,169,88,0.32);
  transform: translateX(-3px);
}
.exp-pillar-tag{
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #cca958;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}
.exp-pillar-body h3{
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
  margin: 0 0 6px;
}
.exp-pillar-body p{
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
  margin: 0;
}
@media (max-width: 960px){
  .exp-manifest-grid{ grid-template-columns: 1fr; gap: 40px; }
  .exp-manifest-statement{ position: static; }
  .exp-manifest-lede{ max-width: 100%; }
}

/* ============================================================
   Experten — Modell Section (replaces old "Die Idee")
   Flow-Diagramm + 2 Regel-Cards
   ============================================================ */
.exp-model-section{ background: #fafafa; padding: 96px 0; }
.exp-model-flow{
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 52px;
}
.exp-model-stage{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
.exp-model-stage:hover{
  border-color: rgba(20,20,22,0.18);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -18px rgba(20,20,22,0.18);
}
.exp-model-stage-num{
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #86868b;
  font-variant-numeric: tabular-nums;
}
.exp-model-stage-icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(20,20,22,0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #1d1d1f;
}
.exp-model-stage h3{
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  margin: 6px 0 2px;
}
.exp-model-stage p{
  font-size: 0.92rem;
  line-height: 1.55;
  color: #424246;
  margin: 0;
}
.exp-model-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(20,20,22,0.18);
  font-size: 18px;
}

/* Rules row (2 cards) */
.exp-model-rules{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}
.exp-model-rule{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 18px;
  padding: 28px;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  align-items: start;
  border-left: 3px solid #1d1d1f;
}
.exp-model-rule:nth-child(2){ border-left-color: #cca958; }
.exp-model-rule-num{
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #1d1d1f;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.exp-model-rule:nth-child(2) .exp-model-rule-num{ color: #cca958; }
.exp-model-rule-body h3{
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1d1d1f;
  margin: 0 0 6px;
}
.exp-model-rule-body p{
  font-size: 0.96rem;
  line-height: 1.6;
  color: #424246;
  margin: 0;
}
@media (max-width: 1020px){
  .exp-model-flow{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .exp-model-arrow{
    transform: rotate(90deg);
    padding: 4px 0;
  }
}
@media (max-width: 760px){
  .exp-model-rules{ grid-template-columns: 1fr; }
}

/* ============================================================
   2026-05-13: Hub Vision section — converted from full-width
   dark background to inner rounded dark card (Felix sitewide rule).
   ============================================================ */
.hub-vision{
  background: transparent;
  padding: 80px 0;
}
.hub-vision > .container{
  background: #141416;
  color: #ffffff;
  border-radius: 32px;
  padding: 80px 56px;
  position: relative;
  overflow: hidden;
}
.hub-vision .hub-vision-eyebrow,
.hub-vision .hub-vision-title{
  color: #ffffff;
}
.hub-vision .hub-vision-text p,
.hub-vision .hub-vision-bullets li{
  color: rgba(255,255,255,0.78);
}
@media (max-width: 720px){
  .hub-vision{ padding: 56px 0; }
  .hub-vision > .container{
    border-radius: 24px;
    padding: 48px 28px;
  }
}

/* ============================================================
   Standalone FAQ list (about-page) — no outer wrapper
   Cards stehen einzeln, kein umschließender weißer Hintergrund-Card.
   ============================================================ */
.faq-standalone-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-standalone-list details.faq-item{
  background: #ffffff;
  border: 1px solid rgba(20,20,22,0.08);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-standalone-list details.faq-item:hover{
  border-color: rgba(20,20,22,0.16);
  transform: translateY(-1px);
}
.faq-standalone-list details.faq-item[open]{
  border-color: rgba(20,20,22,0.18);
  box-shadow: 0 4px 14px -6px rgba(20,20,22,0.12);
}
.faq-standalone-list details.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 1.02rem;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: -0.005em;
}
.faq-standalone-list details.faq-item summary::-webkit-details-marker{ display: none; }
.faq-standalone-list details.faq-item summary::after{
  content: "+";
  font-size: 22px;
  font-weight: 300;
  color: #86868b;
  line-height: 1;
  transition: transform 0.22s ease, color 0.22s ease;
}
.faq-standalone-list details.faq-item[open] summary::after{
  transform: rotate(45deg);
  color: #1d1d1f;
}
.faq-standalone-list details.faq-item .ov-body{
  padding: 0 24px 18px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #424246;
}
.faq-standalone-list details.faq-item .ov-body a{ color: #2889ff; }

/* ============================================================
   2026-05-13: FAQ Toggle-Icon vereinfacht.
   Vorher: ::before-Bar + ::after-Circle + optional <i.fa-plus> = mehrere Striche überlappten.
   Jetzt: nur ein "+" via ::after, rotiert zu "×" beim Öffnen.
   ============================================================ */
html body details.faq-item summary::before,
html body details.hub-faq-item summary::before,
html body details.accordion-item summary::before{
  display: none !important;
  content: none !important;
}
html body details.faq-item summary::after,
html body details.hub-faq-item summary::after,
html body details.accordion-item summary::after{
  content: "+" !important;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 22px;
  font-weight: 300;
  color: #86868b;
  line-height: 1;
  transition: transform 0.22s ease, color 0.22s ease;
  display: inline-block !important;
}
html body details.faq-item[open] summary::after,
html body details.hub-faq-item[open] summary::after,
html body details.accordion-item[open] summary::after{
  transform: translateY(-50%) rotate(45deg);
  color: #1d1d1f;
  background: transparent !important;
}
/* Hide any explicit fa-plus icons that might still exist in old HTML */
details.faq-item summary i.fa-plus,
details.hub-faq-item summary i.fa-plus,
details.accordion-item summary i.fa-plus{ display: none !important; }