/* =====================================================
   Amplify Digital — Website Styles
   Dark Mode · Space Grotesk · Inter · Accent #FAEF70
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Instrument+Serif:ital@0;1&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400;1,500&family=Gilda+Display&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Libre+Caslon+Display&family=DM+Serif+Display:ital@0;1&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..700&display=swap');

:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f4;
  --surface: rgba(0, 0, 0, 0.035);
  --surface-hi: rgba(0, 0, 0, 0.06);
  --surface-hover: rgba(0, 0, 0, 0.09);
  --border: rgba(0, 0, 0, 0.08);
  --border-soft: rgba(0, 0, 0, 0.12);
  --text: #0c0c0c;
  --text-soft: #2a2a2a;
  --text-muted: #6a6a6a;
  --accent: #faef70;
  --accent-ink: #000000;
  --success: #059669;
  --danger: #dc2626;
  --font-head: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 16px;
  --radius-lg: 24px;
  --max-width: 1280px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px circle at 15% 0%, rgba(250, 239, 112, 0.12), transparent 55%),
    radial-gradient(700px circle at 85% 15%, rgba(236, 72, 153, 0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 40px;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .container { padding-inline: 20px; }
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--text);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 16px; }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1.0625rem; font-weight: 500; color: var(--text); }

p { margin: 0 0 16px; }
a { color: var(--accent); text-decoration: none; transition: opacity 200ms; }
a:hover { opacity: 0.8; }

/* Links inside light content sections must be readable */
.lp-faq-answer a,
.lp-legal-copy a,
.lp-legal-highlight a,
.lp-legal-notice a,
.lp-section-sub a,
.lp-ctabig-p a {
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: #b4b4b4;
}
.lp-faq-answer a:hover,
.lp-legal-copy a:hover,
.lp-legal-highlight a:hover,
.lp-legal-notice a:hover,
.lp-section-sub a:hover,
.lp-ctabig-p a:hover {
  opacity: 1;
  text-decoration-color: #0c0c0c;
}
::selection { background: var(--accent); color: var(--accent-ink); }

.lead {
  font-size: 1.1875rem;
  color: var(--text-soft);
  max-width: 60ch;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 24px;
}
.kicker::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

/* HEADER */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: none;
  transition: background 240ms ease, border-color 240ms ease;
}
/* Über dem Hero: Nav-Text weiß, Brand weiß */
.site-header .brand-link,
.site-header .main-nav > a,
.site-header .nav-trigger {
  color: #ffffff;
}
/* Nach dem Hero: Header hat hellen BG + dunklen Text */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header.scrolled .brand-link,
.site-header.scrolled .main-nav > a,
.site-header.scrolled .nav-trigger {
  color: #0c0c0c;
}
.site-header.scrolled .btn.btn-primary {
  background: #0c0c0c;
  color: #ffffff;
}
.site-header.scrolled .btn.btn-primary:hover {
  background: #2a2a2a;
  color: #ffffff;
}

/* Body-Padding nur auf Seiten OHNE full-bleed Video-Hero */
body:not(:has(.hero-bg-video-section)) {
  padding-top: 84px;
}
.site-header .inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 20px 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header .main-nav {
  flex: 1;
  justify-content: center;
}
@media (max-width: 768px) {
  .site-header .inner { padding: 16px 20px; }
}
.brand-link {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: -0.025em;
  color: var(--text-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.brand-link .bright { color: var(--accent); font-weight: 500; padding-left: 0.25em; }
.brand-link:hover { opacity: 1; }

/* Logo (Bild) im Header */
.brand-logo {
  display: block;
  height: 56px;
  width: auto;
}
.brand-logo--dark { display: none; }
.site-header.scrolled .brand-logo--light { display: none; }
.site-header.scrolled .brand-logo--dark { display: block; }
@media (max-width: 720px) {
  .brand-logo { height: 44px; }
}

.main-nav {
  display: flex;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) {
  .main-nav { gap: 20px; }
  .main-nav a:not(.btn) { display: none; }
  .main-nav a.btn { display: inline-flex; }
}
.main-nav a {
  color: var(--text-soft);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 200ms;
}
.main-nav a:hover { color: var(--text); opacity: 1; }
.main-nav a.active { color: var(--text); }

/* =====================================================
   NAV DROPDOWN (Mega-Menu on hover)
===================================================== */
.nav-item-dropdown {
  position: relative;
}
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  transition: color 200ms;
  cursor: pointer;
}
.nav-trigger .nav-caret {
  transition: transform 220ms ease, color 200ms;
  opacity: 0.7;
}
.main-nav > a:not(.btn),
.nav-trigger-text {
  background-image: linear-gradient(
    90deg,
    #4ade80 0%,
    #22d3ee 28%,
    #fbcfe8 52%,
    #f472b6 76%,
    #ef4444 100%
  );
  background-size: 100% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 150ms ease;
}
.main-nav > a:not(.btn):hover,
.nav-item-dropdown:hover .nav-trigger-text,
.nav-item-dropdown:focus-within .nav-trigger-text {
  color: transparent;
}
.nav-item-dropdown:hover .nav-caret,
.nav-item-dropdown:focus-within .nav-caret {
  transform: rotate(180deg);
  opacity: 1;
  color: #ec4899;
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 300px;
  white-space: nowrap;
  background: #ffffff;
  border-radius: 22px;
  padding: 14px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.18),
    0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  z-index: 200;
}
/* Unsichtbarer Hover-Bridge zwischen Trigger und Submenu */
.nav-submenu::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 18px;
}
.nav-item-dropdown:hover .nav-submenu,
.nav-item-dropdown:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu--compact { min-width: 240px; }

.submenu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #0c0c0c;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.submenu-item:hover {
  background: #f2f2f2;
  color: #0c0c0c;
}
.submenu-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0c0c0c;
  transition: border-color 160ms ease;
}
.submenu-icon svg { display: block; }
.submenu-item:hover .submenu-icon {
  background: #ffffff;
  color: #0c0c0c;
  border-color: rgba(0, 0, 0, 0.14);
}
.submenu-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .nav-item-dropdown { display: none; }
}

/* Header-CTA: rund und weiß, wie die Hero-Buttons */
.site-header .btn.btn-primary {
  background: #ffffff;
  color: #000000;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.site-header .btn.btn-primary:hover {
  background: #e6e6e6;
  color: #000000;
  opacity: 1;
  box-shadow: none;
}

.header-phone {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: opacity 200ms;
}
.header-phone:hover { opacity: 0.8; }
@media (max-width: 900px) {
  .header-phone { display: none; }
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  cursor: pointer;
  border: none;
  transition: transform 200ms ease, opacity 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  opacity: 0.98;
  box-shadow: 0 0 24px rgba(250, 239, 112, 0.45);
}
.btn .arrow {
  display: inline-block;
  font-size: 1.15em;
  font-weight: 900;
  line-height: 1;
}
.btn-secondary {
  background: var(--surface-hi);
  color: var(--text);
  border: 1px solid var(--border-soft);
}
.btn-secondary:hover {
  background: var(--surface-hover);
}
.btn-ghost {
  background: transparent;
  color: var(--text-soft);
  padding: 14px 18px;
}
.btn-ghost:hover { color: var(--text); }

/* SECTIONS */
section { padding: 96px 0; }
section.hero { padding: 160px 0 120px; }
section.sub-hero { padding: 128px 0 80px; border-bottom: 1px solid var(--border); }
section + section { border-top: none; }

.section-head { max-width: 60ch; margin-bottom: 64px; }
.section-head h2 { font-weight: 500; letter-spacing: -0.02em; }
.section-head h2 em { color: var(--accent); font-style: normal; font-weight: 500; }
.section-head p { margin-top: 16px; color: var(--text-soft); }

/* HERO */
.hero h1:not(.hero-h1) {
  max-width: 18ch;
  margin-top: 8px;
  margin-bottom: 40px;
}
.hero h1 em { color: var(--accent); font-style: normal; font-weight: 400; }
.hero .lead {
  margin-bottom: 48px;
  font-size: 1.25rem;
}
.hero .cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero .trust-row {
  margin-top: 72px;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--border);
  max-width: 900px;
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust-item .num {
  font-family: var(--font-head);
  font-size: 1.875rem;
  font-weight: 300;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
}
.trust-item .lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* CARD GRIDS */
.card-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.card-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform 240ms ease, background 240ms ease, border-color 240ms ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.card:hover {
  background: var(--surface-hi);
  transform: translateY(-2px);
  border-color: rgba(250, 239, 112, 0.3);
}
.card .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 16px;
  display: block;
}
.card h3 { margin-bottom: 12px; }
.card p { font-size: 0.9375rem; margin-bottom: 16px; }
.card .more {
  font-size: 0.8125rem;
  color: var(--accent);
  font-weight: 500;
}
.card .more::after { content: " →"; }

/* STEPS / TIMELINE */
.steps {
  display: grid;
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.step {
  padding: 40px 40px;
  background: var(--bg);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
}
.step .num {
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 0.9;
}
.step h3 { margin-bottom: 10px; }
.step p { margin: 0; font-size: 0.9375rem; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 12px; padding: 28px; }
  .step .num { font-size: 2rem; }
}

/* FEATURE LIST */
.feature-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.feature-list.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .feature-list.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .feature-list.cols-3 {
    grid-template-columns: 1fr;
  }
}
.feature {
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.feature .marker {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-bottom: 16px;
}
.feature h4 { margin-bottom: 8px; }
.feature p { font-size: 0.875rem; margin: 0; }

/* PRICING */
.pricing-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pricing-card {
  padding: 40px 32px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}
.pricing-card.featured {
  border-color: var(--accent);
  position: relative;
}
.pricing-card.featured::before {
  content: "Empfohlen";
  position: absolute;
  top: -12px;
  left: 32px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.pricing-card .tier-label {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 12px;
}
.pricing-card h3 { margin-bottom: 16px; font-size: 1.5rem; }
.pricing-card .price {
  font-family: var(--font-head);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.pricing-card .price .suffix {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 400;
}
.pricing-card .price-note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 10px;
  flex: 1;
}
.pricing-card li {
  font-size: 0.875rem;
  color: var(--text-soft);
  padding-left: 24px;
  position: relative;
}
.pricing-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 600;
}

/* FAQ */
.faq {
  display: grid;
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
details.faq-item {
  background: var(--bg);
  padding: 28px 32px;
  cursor: pointer;
}
details.faq-item[open] {
  background: var(--bg-soft);
}
details.faq-item summary {
  list-style: none;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  cursor: pointer;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--accent);
  transition: transform 200ms ease;
}
details.faq-item[open] summary::after {
  content: "−";
}
details.faq-item .answer {
  padding-top: 16px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  max-width: 70ch;
}

/* CASE STUDY */
.case-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .case-hero { grid-template-columns: 1fr; gap: 40px; } }
.case-metrics {
  display: grid;
  gap: 2px;
  background: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.metric {
  background: var(--bg);
  padding: 32px;
}
.metric .num {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 8px;
}
.metric .lbl {
  font-size: 0.8125rem;
  color: var(--text-soft);
}
.metric .note {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* CONTACT FORM */
.form-grid {
  display: grid;
  gap: 64px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; gap: 40px; } }
.form-side ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.form-side li { font-size: 0.9375rem; padding-left: 24px; position: relative; }
.form-side li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
}

form.contact-form {
  display: grid;
  gap: 20px;
}
form.contact-form label {
  display: grid;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
form.contact-form input,
form.contact-form textarea,
form.contact-form select {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color 200ms, background 200ms;
}
form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-hi);
}
form.contact-form textarea {
  min-height: 140px;
  resize: vertical;
  font-family: var(--font-body);
}
form.contact-form .privacy {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.5;
}
form.contact-form .privacy input { width: auto; padding: 0; margin-top: 2px; }

/* BLOCK: BIG CTA */
.cta-block {
  padding: 80px 64px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px circle at 50% 0%, rgba(250,239,112,0.08), transparent 60%);
  pointer-events: none;
}
.cta-block > * { position: relative; z-index: 1; }
.cta-block h2 {
  margin-bottom: 20px;
  max-width: 20ch;
  margin-inline: auto;
}
.cta-block p {
  max-width: 50ch;
  margin-inline: auto;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .cta-block { padding: 48px 24px; }
}

/* FOOTER */
.site-footer {
  margin-top: 0;
  border-top: none;
  padding: 48px 0 28px;
}
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; }
}

/* Brand-Spalte */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-logo {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
}
.footer-logo svg { width: 100%; height: 100%; display: block; }
.footer-tagline {
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
  max-width: 24ch;
}
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.footer-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* Link-Spalten */
.footer-col h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  padding: 0;
  border: 0;
  margin: 0 0 18px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.footer-col a {
  color: #8a8a8a;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--text); }

/* Base */
.footer-base {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-social a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: color 0.15s ease;
}
.footer-social a:hover { color: var(--text); }
.footer-social span { color: var(--border); }

/* LEGAL PAGES */
.legal-content { max-width: 72ch; }
.legal-content h2 { margin-top: 48px; margin-bottom: 16px; font-size: 1.5rem; font-weight: 500; }
.legal-content h3 { margin-top: 32px; margin-bottom: 12px; font-size: 1.125rem; }
.legal-content p { font-size: 0.9375rem; }
.legal-content ul { padding-left: 24px; font-size: 0.9375rem; }
.legal-content li { margin-bottom: 6px; }

/* =====================================================
   COMPARISON TABLE (USP-Vergleich Section 6)
===================================================== */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
  font-family: var(--font-body);
}
.comparison-table th,
.comparison-table td {
  padding: 18px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}
.comparison-table thead th {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 12px;
}
.comparison-table tbody td:first-child {
  color: var(--text-soft);
  font-weight: 400;
}
.comparison-table tbody td:nth-child(2) {
  color: var(--text-muted);
}
.comparison-table tbody td:nth-child(3) {
  color: var(--text);
  font-weight: 500;
}
.comparison-table thead th:nth-child(3) {
  color: var(--accent);
}
@media (max-width: 640px) {
  .comparison-table th,
  .comparison-table td {
    padding: 12px 10px;
    font-size: 0.8125rem;
  }
}

/* =====================================================
   REPLACES AGENCIES (Wen wir ersetzen)
===================================================== */
.replaces-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .replaces-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
}
.replaces-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.replaces-list li {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--text-muted);
  text-decoration: line-through;
  padding: 6px 0;
  letter-spacing: -0.01em;
}
.replaces-caption {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}
.replaces-arrow {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
@media (max-width: 768px) {
  .replaces-arrow {
    transform: rotate(90deg);
  }
}
.replaces-after {
  padding: 40px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.replaces-brand {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--text-soft);
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.replaces-brand span {
  color: var(--accent);
  font-weight: 500;
  padding-left: 0.2em;
}
.replaces-headline {
  font-family: var(--font-head);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

/* =====================================================
   HERO CENTERED (Video-Style)
===================================================== */
section.hero.hero-centered {
  min-height: calc(100dvh - 90px);
  padding: 32px 0 48px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-centered .container { max-width: 1240px; width: 100%; }

/* =====================================================
   HERO BG VIDEO (HYROS-Style)
===================================================== */
section.hero.hero-bg-video-section {
  position: relative;
  overflow: hidden;
  display: block;
  min-height: 100dvh;
  padding: 0;
  text-align: left;
  background: #000;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.15) 35%,
      rgba(0, 0, 0, 0) 65%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0) 35%
    );
}
.hero-bg-container {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 180px 40px 240px;
  color: #fff;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 24px;
}
.hero-bg-h1 {
  font-family: 'Source Serif 4', 'Newsreader', 'Tiempos Headline', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 1;
  margin: 0 0 28px;
  max-width: 900px;
}
.hero-bg-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-bg-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 0 40px;
}
.hero-bg-cta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #000;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms ease, background 200ms ease;
}
.btn-hero-primary:hover {
  background: #e6e6e6;
}
.btn-hero-primary .arrow { font-weight: 700; }
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 200ms ease, border-color 200ms ease;
}
.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 720px) {
  .hero-bg-container { padding: 140px 24px 120px; }
  .hero-bg-sub { max-width: 100%; }
}
/* Kurze Viewports (MacBook 13"/14", Laptops) — Banner muss ins Hero passen */
@media (min-width: 721px) and (max-height: 900px) {
  .hero-bg-container {
    padding: 130px 40px 300px;
  }
  .hero-bg-h1 {
    font-size: clamp(2.5rem, 5.4vw, 4.8rem);
  }
  .hero-bg-sub {
    margin: 20px 0 28px;
  }
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 45%,
    rgba(0, 0, 0, 0.85) 62%,
    rgba(0, 0, 0, 0.5) 80%,
    rgba(0, 0, 0, 0) 100%
  );
}

.hero-h1 {
  font-family: 'Instrument Serif', 'Tiempos Headline', 'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.75rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #000000;
  opacity: 1;
  max-width: none;
  margin: 0 auto 24px;
  text-align: center;
}
@media (max-width: 640px) {
  .hero-h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

.hero-proof-link {
  display: inline-block;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1.5px solid var(--text);
  margin-bottom: 28px;
  transition: color 200ms ease, border-color 200ms ease;
}
.hero-proof-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.hero-video-placeholder {
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-video-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--text-muted);
}
.play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  padding-left: 5px;
}
.hero-video-label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =====================================================
   SEGMENTATION (Pick-Your-Lane Section)
===================================================== */
.segmentation { padding: 24px 0 80px; }
.segment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 768px) {
  .segment-grid { grid-template-columns: 1fr; }
}
.segment-card {
  padding: 48px 40px;
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.segment-card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}
.segment-card p {
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 44ch;
  margin: 0;
}
.segment-card .btn {
  margin-top: 12px;
  padding: 18px 36px;
  font-size: 1rem;
}
.segment-card .btn .arrow {
  font-size: 1.2em;
}

/* =====================================================
   LEISTUNGEN — Icon Card Grid (Option C)
===================================================== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .icon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .icon-grid { grid-template-columns: 1fr; }
}
.icon-card {
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 40px 32px;
  position: relative;
  transition: transform 200ms ease, border-color 200ms ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.icon-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  opacity: 1;
}
.icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(250, 239, 112, 0.1);
  border: 1px solid rgba(250, 239, 112, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--accent);
  margin-bottom: 24px;
}
.icon-card h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--text);
  margin: 0 0 12px;
}
.icon-card p {
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0 0 20px;
}
.icon-card .learn {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =====================================================
   REVIEWS (Kunden-Zitate Grid)
===================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .reviews-grid { grid-template-columns: 1fr; }
}
.review-card {
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 220px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.review-card:hover {
  border-color: rgba(250, 239, 112, 0.35);
  transform: translateY(-2px);
}
.review-quote {
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin: 0;
}
.review-quote strong {
  color: var(--text);
  font-weight: 600;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(250, 239, 112, 0.3), rgba(250, 239, 112, 0.1));
  border: 1px solid rgba(250, 239, 112, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--accent);
  flex-shrink: 0;
}
.review-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.2;
}
.review-company {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =====================================================
   COMPACT CTA
===================================================== */
.compact-cta {
  max-width: 540px;
  margin: 0 auto;
  padding: 40px 48px;
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.compact-cta-super {
  color: var(--text-soft);
  font-size: 0.9375rem;
  margin: 0;
}
.compact-cta-btn {
  width: 100%;
  padding: 20px 36px;
  font-size: 1rem;
}
.compact-cta-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.proof-avatars {
  display: flex;
}
.proof-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(250, 239, 112, 0.3), rgba(250, 239, 112, 0.1));
  border: 2px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--accent);
  margin-left: -8px;
}
.proof-avatar:first-child { margin-left: 0; }
.proof-text {
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.3;
}
.proof-text strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.proof-text span {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* =====================================================
   FOUNDER SECTION
===================================================== */
.founder-section { padding: 60px 0 100px; }
.founder-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; gap: 32px; }
}
.founder-photo {
  aspect-ratio: 3 / 4;
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .founder-photo { position: static; max-width: 380px; }
}
.founder-photo-placeholder {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.founder-content h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--text);
}
.founder-title {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 32px;
}
.founder-content h3 {
  font-family: var(--font-head);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin: 32px 0 12px;
}
.founder-content h3:first-of-type { margin-top: 0; }
.founder-content p {
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.7;
  margin: 0 0 12px;
  max-width: 60ch;
}
.founder-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.founder-content ul li {
  position: relative;
  padding-left: 20px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.founder-content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* =====================================================
   BOOKING SECTION
===================================================== */
.booking-section { padding: 80px 0 100px; background: var(--bg-soft); }

.booking-intro {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 48px;
}
.booking-logo {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 1rem;
  opacity: 0.75;
}
.booking-super {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--text-soft);
  font-size: 1rem;
  margin: 0 0 24px;
}
.booking-h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.6vw, 2.375rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 auto 24px;
  max-width: none;
}
.booking-h2 .hl {
  position: relative;
  display: inline-block;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 3px;
  padding-bottom: 2px;
}
.booking-desc {
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 70ch;
  margin: 0 auto 32px;
}
.booking-proof {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}
.booking-proof .proof-avatar { border-color: var(--bg-soft); }
.booking-proof .proof-text {
  text-align: left;
  font-size: 0.875rem;
}
.booking-proof .proof-text strong {
  display: inline;
  color: var(--text);
}
.booking-proof .proof-text span {
  color: var(--text-muted);
  margin-left: 4px;
}

/* WIDGET — light theme, compact */
.booking-widget {
  max-width: 720px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.booking-tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 14px 20px;
  border-bottom: 1px solid #ececec;
  background: #f7f7f7;
}
.booking-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #888;
  font-weight: 500;
}
.booking-tab.active { color: #111; }
.tab-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
}
.booking-tab.active .tab-dot {
  background: #faef70;
  box-shadow: 0 0 0 1px #d4c433;
}

.booking-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: auto;
  color: #111;
}
@media (max-width: 900px) {
  .booking-body { grid-template-columns: 1fr; }
}

.booking-form {
  padding: 24px 24px;
  border-right: 1px solid #ececec;
}
@media (max-width: 900px) {
  .booking-form { border-right: none; border-bottom: 1px solid #ececec; }
}
.booking-form h3 {
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  margin: 0 0 12px;
}
.booking-form-intro {
  color: #555;
  font-size: 0.8125rem;
  margin: 0 0 8px;
}
.booking-form-list {
  color: #555;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding-left: 18px;
  margin: 0 0 18px;
}
.booking-form-list li { margin-bottom: 6px; }
.booking-form-list strong { color: #111; font-weight: 600; }

.booking-form-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.booking-form-fields input,
.booking-form-fields select {
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #d5d5d5;
  border-radius: 6px;
  color: #111;
  font-family: var(--font-body);
  font-size: 0.875rem;
}
.booking-form-fields input::placeholder,
.booking-form-fields select::placeholder { color: #9a9a9a; }
.booking-form-fields input:focus,
.booking-form-fields select:focus {
  outline: none;
  border-color: #faef70;
  box-shadow: 0 0 0 3px rgba(250, 239, 112, 0.25);
}
.phone-group {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 6px;
}
.booking-legal {
  color: #777;
  font-size: 0.6875rem;
  line-height: 1.5;
  margin: 6px 0;
}
.booking-legal a { color: #111; text-decoration: underline; }
.booking-submit {
  margin-top: 4px;
  padding: 12px 20px;
  font-size: 0.875rem;
}
.booking-submit:hover { opacity: 0.95; }

/* CALENDAR — light */
.booking-calendar {
  padding: 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.cal-lock {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 240ms ease;
}
.cal-lock-msg {
  padding: 14px 22px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 0.8125rem;
  color: #333;
  text-align: center;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  max-width: 240px;
}
.booking-widget.form-valid .cal-lock {
  opacity: 0;
  pointer-events: none;
}
.booking-widget:not(.form-valid) .cal-day {
  cursor: not-allowed;
}
.booking-widget:not(.form-valid) .cal-day:hover:not(.empty):not(.past) {
  background: transparent;
  color: #111;
}
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cal-month {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
}
.cal-nav { display: flex; gap: 4px; }
.cal-nav button {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid #d5d5d5;
  color: #555;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
}
.cal-nav button:hover { background: #f0f0f0; color: #111; }
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  color: #999;
  text-align: center;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 6px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: #111;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
  border: 1px solid transparent;
}
.cal-day:hover:not(.empty):not(.past) {
  background: #faef70;
  color: #111;
}
.cal-day.empty { cursor: default; }
.cal-day.past {
  color: #c8c8c8;
  cursor: not-allowed;
}
.cal-day.current {
  background: transparent;
  border: 2px solid #faef70;
  color: #111;
  font-weight: 700;
}
.cal-hint {
  margin-top: 10px;
  padding-top: 8px;
  text-align: center;
  font-size: 0.75rem;
  color: #888;
  font-style: italic;
  border-top: 1px solid #eee;
}

/* =====================================================
   FAQ SECTION
===================================================== */
.faq-section { padding: 100px 0 120px; }

.faq-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  text-align: center;
  margin: 0 auto 64px;
}

.faq-list {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}
.faq-item:hover { background: var(--surface-hi); }
.faq-item[open] {
  background: var(--surface-hi);
  border-color: rgba(250, 239, 112, 0.28);
}

/* Browser default marker komplett abschalten */
.faq-section .faq-item > summary { list-style: none; list-style-type: none; }
.faq-section .faq-item > summary::-webkit-details-marker { display: none; }
.faq-section .faq-item > summary::marker { content: ""; display: none; }
.faq-section .faq-item > summary::after { content: none; }

.faq-item summary {
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--text-soft);
  transition: transform 240ms ease, color 200ms ease;
  line-height: 1;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  padding: 0 28px 22px;
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.65;
  max-width: 80ch;
}

/* =====================================================
   LEISTUNGEN PAGE — Service Sections
===================================================== */
.service-section {
  padding: 80px 0;
}
.service-section:nth-of-type(even) {
  background: var(--bg-soft);
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.service-grid.reverse .service-content { order: 2; }
.service-grid.reverse .service-visual { order: 1; }

@media (max-width: 900px) {
  .service-grid { grid-template-columns: 1fr; gap: 40px; }
  .service-grid.reverse .service-content,
  .service-grid.reverse .service-visual { order: unset; }
}

.service-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 16px;
}

.service-content h2 {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 20px;
}

.service-lead {
  color: var(--text-soft);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 52ch;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.service-list li {
  position: relative;
  padding: 12px 0 12px 28px;
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.service-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 12px;
  color: var(--accent);
  font-weight: 700;
}
.service-list li strong {
  color: var(--text);
  font-weight: 600;
  margin-right: 6px;
}

.service-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.service-price {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.service-visual {
  position: relative;
}
.service-visual-placeholder {
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.service-visual-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(250, 239, 112, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(250, 239, 112, 0.03) 0%, transparent 50%);
}
.sv-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

/* =====================================================
   HERO NO VIDEO (Fallstudien-Variante)
===================================================== */
section.hero.hero-centered.hero-no-video { min-height: auto; padding: 80px 0 40px; }
.hero-cta-big {
  padding: 20px 48px;
  font-size: 1.0625rem;
  margin-bottom: 72px;
}
.reviews-heading {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  text-align: center;
}

/* Reviews section on Fallstudien page */
.reviews-section { padding: 40px 0 100px; }

/* Clickable review cards */
.review-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.review-card-link:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  background: var(--surface-hi);
  opacity: 1;
}
.review-link-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  transition: color 200ms ease;
}

/* ============================
   HERO REVIEW BAR
   ============================ */
.hero-review-bar-wrap {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 5;
  pointer-events: none;
}

.hero-review-bar {
  max-width: none;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  box-shadow:
    0 -10px 40px rgba(0, 0, 0, 0.08),
    0 20px 60px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 32px 16px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  pointer-events: auto;
}

.review-bar-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.review-bar-item:last-child {
  border-right: none;
}

.review-bar-item:first-child {
  padding-left: 0;
}

.review-bar-quote {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.45;
  font-weight: 400;
  color: #0c0c0c;
  margin: 0;
  letter-spacing: -0.005em;
}

.review-bar-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}

.review-bar-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #0c0c0c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.review-bar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.review-bar-avatar--logo {
  background: #ffffff;
  border: 1px solid #ececec;
  padding: 2px;
}
.review-bar-avatar--logo img {
  object-fit: contain;
  max-width: 92%;
  max-height: 92%;
}
.review-bar-avatar--invert {
  background: #0c0c0c;
  border-color: #0c0c0c;
}
.review-bar-avatar--invert img {
  filter: invert(1);
}
.review-bar-avatar--zoom img {
  max-width: 170%;
  max-height: 170%;
  transform: scale(1.7);
  transform-origin: center;
}
.review-bar-avatar--invert.review-bar-avatar--zoom img {
  filter: brightness(0) invert(1);
}
.review-bar-avatar--panthera {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  padding: 4px;
}
.review-bar-avatar--panthera img {
  filter: none;
  object-fit: contain;
  max-width: 88%;
  max-height: 88%;
}
.review-bar-avatar--blum {
  background: #003050;
  border-color: #003050;
  padding: 0;
}
.review-bar-avatar--blum img {
  filter: brightness(0) invert(1);
  object-fit: contain;
  max-width: 120%;
  max-height: 120%;
  transform: scale(1.2);
  transform-origin: center;
}

.review-bar-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.review-bar-name {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  line-height: 1.2;
}

.review-bar-role {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #6a6a6a;
  line-height: 1.3;
}
.review-bar-company {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #6a6a6a;
  line-height: 1.3;
}

@media (max-width: 1024px) {
  .hero-review-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 24px;
  }
  .review-bar-item {
    padding: 0 12px;
  }
  .review-bar-item:nth-child(2) {
    border-right: none;
  }
  .review-bar-item:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  section.hero.hero-bg-video-section {
    min-height: auto;
    background: linear-gradient(180deg, #0b0b1e 0%, #1a1230 45%, #2a0f38 100%);
  }
  .hero-bg-video {
    object-fit: contain;
    object-position: center top;
    height: auto;
    top: 0;
    bottom: auto;
    max-height: 65%;
  }
  .hero-bg-overlay {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(11, 11, 30, 0.4) 60%,
      rgba(11, 11, 30, 0.9) 100%
    );
  }
  .hero-review-bar-wrap {
    position: static;
    margin-top: 0;
    padding: 0 16px 24px;
    background: #0b0b1e;
  }
  .hero-review-bar {
    grid-template-columns: 1fr;
    padding: 28px 22px 32px;
    gap: 24px;
  }
  .review-bar-item {
    padding: 0 0 24px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .review-bar-item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ============================
   PROOF / PROMISE SECTION
   ============================ */
.proof-section {
  padding: 120px 40px;
  background: #ffffff;
}
.proof-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.proof-headline {
  font-family: 'Source Serif 4', 'Newsreader', 'Tiempos Headline', 'Times New Roman', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #0c0c0c;
  margin: 0 0 24px;
}
.proof-headline em {
  font-style: italic;
  font-weight: 400;
}
.proof-sub {
  font-size: 1.125rem;
  line-height: 1.55;
  color: #4a4a4a;
  max-width: 420px;
  margin: 0;
}
.proof-card-wrap {
  position: relative;
  padding: 8px;
  border-radius: 28px;
  background: conic-gradient(
    from 0deg at calc(50% + 80px) calc(50% + 80px),
    #ec4899 0deg,
    #6366f1 45deg,
    #22c55e 90deg,
    #6366f1 135deg,
    #22d3ee 180deg,
    #6366f1 225deg,
    #f97316 270deg,
    #6366f1 315deg,
    #ec4899 360deg
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}
.proof-card {
  background: #ffffff;
  border-radius: 21px;
  padding: 44px 48px;
}
.proof-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.proof-bullets li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: #0c0c0c;
  font-weight: 500;
}
.proof-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.proof-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 32px 0;
}
.proof-footer {
  display: flex;
  align-items: center;
  gap: 20px;
}
.proof-footer-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #0c0c0c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.proof-footer-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.proof-footer-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #0c0c0c;
}
.proof-footer-text strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}
.proof-testimonials {
  max-width: 1280px;
  margin: 96px auto 0;
  padding-top: 64px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}
.proof-testimonial {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.proof-testimonial-quote {
  font-size: 1rem;
  line-height: 1.55;
  color: #2a2a2a;
  margin: 0;
}
.proof-testimonial-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}
.proof-testimonial-logo {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #0c0c0c;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.proof-testimonial-logo img {
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.proof-testimonial-logo--lg {
  background: #003050;
}
.proof-testimonial-logo--lg img {
  max-width: 115%;
  max-height: 115%;
}
.proof-testimonial-logo--xl img {
  max-width: 150%;
  max-height: 150%;
}
.proof-testimonial-logo--inv {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.proof-testimonial-logo--inv img {
  filter: none;
  max-width: 72%;
  max-height: 72%;
}
.proof-testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.proof-testimonial-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  line-height: 1.2;
}
.proof-testimonial-link {
  font-size: 0.875rem;
  font-weight: 500;
  background: linear-gradient(90deg, #00c8d7 0%, #0a2540 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  line-height: 1.3;
  pointer-events: none;
}

@media (max-width: 900px) {
  .proof-section {
    padding: 80px 20px;
  }
  .proof-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .proof-card {
    padding: 32px 24px;
  }
  .proof-footer-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
  .proof-testimonials {
    margin-top: 64px;
    padding-top: 48px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ============================
   USE CASE / UNTERNEHMENSPHASE
   ============================ */
.usecase-section {
  padding: 120px 40px;
  background: #ffffff;
}
.usecase-headline {
  font-family: 'Source Serif 4', 'Newsreader', 'Tiempos Headline', 'Times New Roman', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #0c0c0c;
  text-align: center;
  margin: 0 auto 56px;
  max-width: 900px;
}
.usecase-headline em {
  font-style: italic;
  font-weight: 400;
}
.usecase-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px;
  border-radius: 28px;
  background: conic-gradient(
    from 0deg at calc(50% + 80px) calc(50% + 80px),
    #ec4899 0deg,
    #6366f1 45deg,
    #22c55e 90deg,
    #6366f1 135deg,
    #22d3ee 180deg,
    #6366f1 225deg,
    #f97316 270deg,
    #6366f1 315deg,
    #ec4899 360deg
  );
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.usecase-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 40px 44px 44px;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}
.usecase-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}
.usecase-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  background: #ffffff;
}
.usecase-icon svg {
  width: 22px;
  height: 22px;
  fill: #000000;
  stroke: none;
}
.usecase-card h3 {
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #0c0c0c;
  margin: 0 0 10px;
}
.usecase-sub {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #0c0c0c;
  margin: 0 0 6px;
  line-height: 1.4;
}
.usecase-detail {
  font-size: 0.9375rem;
  color: #4a4a4a;
  line-height: 1.55;
  margin: 0 0 24px;
}
.usecase-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #ffffff;
  color: #0c0c0c;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  align-self: flex-start;
  margin-top: auto;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.usecase-cta:hover {
  background: #f4f4f4;
  color: #0c0c0c;
  border-color: rgba(0, 0, 0, 0.28);
}
@media (max-width: 900px) {
  .usecase-section {
    padding: 80px 20px;
  }
  .usecase-headline {
    margin-bottom: 40px;
  }
  .usecase-grid {
    grid-template-columns: 1fr;
  }
  .usecase-card {
    padding: 32px 24px;
    min-height: 0;
  }
  .usecase-card h3 {
    font-size: 1.625rem;
  }
}

/* FOUNDER QUOTE */
.founder-section {
  padding: 140px 40px 120px;
  background: transparent;
  position: relative;
}
.founder-section .container {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.founder-arc {
  width: 100%;
  max-width: 820px;
  margin: 0 auto -20px;
}
.founder-arc svg {
  width: 100%;
  height: auto;
  display: block;
}
.founder-quote {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  font-weight: 500;
  color: #0c0c0c;
  max-width: 520px;
  margin: 0 auto 48px;
  padding: 0;
  border: none;
  quotes: none;
  text-wrap: balance;
}
.founder-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 32px;
}
.founder-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #0c0c0c;
  margin-bottom: 14px;
}
.founder-name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  background: linear-gradient(90deg, #0a2540 0%, #00c8d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0;
}
.founder-role {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #0c0c0c;
}
.founder-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  max-width: 520px;
  margin: 0 auto 24px;
}
.founder-signature {
  max-width: 260px;
  margin: -36px auto 0;
  transform: rotate(-3deg);
}
.founder-signature img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .founder-section {
    padding: 80px 24px 64px;
  }
  .founder-arc {
    margin-bottom: 16px;
  }
  .founder-quote {
    font-size: 1rem;
  }
}

/* ======================================================= */
/* TESTIMONIALS SECTION (HYROS-style asymmetric grid) */
/* ======================================================= */
.testimonials-section {
  padding: 100px 40px 120px;
  background: transparent;
  position: relative;
}
.testimonials-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.testimonials-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}
.testimonials-headline {
  font-family: 'Source Serif 4', 'Newsreader', 'Tiempos Headline',
    'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  margin: 0 0 20px;
}
.testimonials-headline em {
  font-style: italic;
  font-weight: 400;
}
.testimonials-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}
/* 12-column grid: row1 = 7/5, row2 = 5/7, row3 = 5/7 → asymmetric wie HYROS */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.testimonials-grid > :nth-child(1) { grid-column: 1 / span 7; } /* row1 links — groß */
.testimonials-grid > :nth-child(2) { grid-column: 8 / span 5; } /* row1 rechts — klein */
.testimonials-grid > :nth-child(3) { grid-column: 1 / span 5; } /* row2 links — klein */
.testimonials-grid > :nth-child(4) { grid-column: 6 / span 7; } /* row2 rechts — groß */
.testimonials-grid > :nth-child(5) { grid-column: 1 / span 7; } /* row3 links — groß */
.testimonials-grid > :nth-child(6) { grid-column: 8 / span 5; } /* row3 rechts — klein */

.testi-card {
  background: #f7f7f8;
  border: 1px solid #eceef1;
  border-radius: 18px;
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.testi-card--narrow {
  padding: 28px 32px 28px;
  gap: 18px;
  justify-content: center;
}
.testi-card--narrow .testi-author {
  margin-top: 0;
}
/* Wide cards: horizontal split (content left, author block right) — HYROS-style */
.testi-card--wide {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto auto 1fr;
  column-gap: 40px;
  row-gap: 18px;
  align-items: start;
  padding: 32px 36px;
}
.testi-card--wide .testi-stat { grid-column: 1; grid-row: 1; }
.testi-card--wide .testi-divider { grid-column: 1; grid-row: 2; }
.testi-card--wide .testi-quote { grid-column: 1; grid-row: 3; }
.testi-card--wide .testi-author {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-top: 0;
}
.testi-card--wide .testi-avatar {
  width: 160px;
  height: 160px;
  border-radius: 20px;
}
.testi-card--wide .testi-meta {
  align-items: center;
  text-align: center;
}
.testi-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.testi-stat-value {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.25rem, 3.6vw, 3rem);
  color: #0c0c0c;
  line-height: 1;
  letter-spacing: -0.015em;
}
.testi-stat-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #6b7280;
}
.testi-divider {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}
.testi-quote {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: #0c0c0c;
  margin: 0;
  font-weight: 400;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
}
.testi-avatar {
  width: 80px;
  height: 80px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  background: #0c0c0c;
  color: #ffffff;
  border: 1px solid #0c0c0c;
  overflow: hidden;
}
.testi-avatar img {
  max-width: 78%;
  max-height: 78%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.testi-avatar--passions { background: #0c0c0c; color: #ffffff; border-color: #0c0c0c; }
.testi-avatar--passions img { max-width: 118%; max-height: 118%; }
.testi-avatar--panthera { background: #ffffff; color: #0f172a; border-color: rgba(0, 0, 0, 0.12); }
.testi-avatar--panthera img { filter: none; max-width: 72%; max-height: 72%; }
.testi-avatar--blum { background: #003050; color: #ffffff; border-color: #003050; }
.testi-avatar--blum img { max-width: 108%; max-height: 108%; }
.testi-avatar--stalburg { background: #111111; color: #ffffff; border-color: #111111; }
.testi-avatar--stalburg img { max-width: 84%; max-height: 84%; }
.testi-avatar--fore img { filter: none; max-width: 82%; max-height: 82%; }
.testi-avatar--sk img { filter: none; max-width: 88%; max-height: 88%; }
.testi-avatar--sk { background: #0c0c0c; color: #ffffff; border-color: #0c0c0c; }
.testi-avatar--fore { background: #0c404d; color: #f7c437; border-color: #0c404d; }
.testi-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.testi-name {
  font-family: var(--font-body);
  font-size: 0.975rem;
  font-weight: 600;
  color: #0c0c0c;
}
.testi-company {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  background: linear-gradient(90deg, #00c8d7 0%, #0a2540 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  pointer-events: none;
}
.testi-company-line {
  font-family: var(--font-body);
  font-size: 0.875rem;
  background: linear-gradient(90deg, #00c8d7 0%, #0a2540 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ======================================================= */
/* AI VISIBILITY SECTION (HYROS nested-dark-card pattern) */
/* Aligned to hyros.com dimensions: outer #000/r24, inner #131313/r20 */
/* ======================================================= */
.ai-section {
  padding: 40px 20px 72px;
  background: transparent;
}
.ai-outer {
  max-width: 1326px;
  margin: 0 auto;
  background: #000000;
  border-radius: 24px;
  padding: 64px 24px 76px;
  position: relative;
  overflow: clip;
}
.ai-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.ai-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.09);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 8px 16px;
  border-radius: 1000px;
  margin-bottom: 22px;
}
.ai-pill-text {
  background: linear-gradient(135deg, #6a8fd5 0%, #4a6fb5 50%, #2a4575 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ai-headline {
  font-family: 'Source Serif 4', 'Newsreader', 'Tiempos Headline',
    'Times New Roman', Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(2rem, 3.4vw, 2.625rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: #ffffff;
  margin: 0 0 20px;
}
.ai-sub {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 400;
  color: #b8b8b8;
  line-height: 1.55;
  margin: 0;
}

.ai-scroll-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  /* 4 Steps × ~144vh Scroll-Distanz — weiter verkürzt für schnelleren Scroll */
  height: 576vh;
}
.ai-sticky {
  position: sticky;
  top: 90px;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 120px);
}
.ai-inner {
  width: 100%;
  background: #131313;
  border: none;
  border-radius: 20px;
  padding: 56px 60px;
  display: grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 64px;
  align-items: stretch;
}
.ai-inner-left {
  display: flex;
  flex-direction: column;
}
.ai-inner-headline {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0 0 44px;
}

.ai-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}
.ai-feature {
  position: relative;
  padding-left: 22px;
  color: #9a9a9a;
  --p: 0;
}
/* Track (dünnere, fixierte Höhe — kürzer als Feature-Text) */
.ai-feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 28px;
  background: #2d2d2d;
  border-radius: 2px;
}
/* Progressive Fill — wächst von 0% → 100% je nach Scroll-Progress */
.ai-feature::after {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: calc(28px * var(--p));
  background: #ffffff;
  border-radius: 2px;
}
.ai-feature-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
  line-height: 1.4;
}
.ai-feature--active .ai-feature-label {
  margin-bottom: 8px;
}
.ai-feature-desc {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #9a9a9a;
  margin: 0;
  display: none;
}
.ai-feature--active .ai-feature-desc {
  display: block;
}

.ai-inner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 40px;
  align-self: flex-start;
  background: #ffffff;
  color: #0c0c0c;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 1000px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ai-inner-cta svg {
  display: none;
}
.ai-inner-cta:hover {
  background: #e9e9e9;
  transform: translateY(-1px);
}
.ai-inner-note {
  margin: 20px 0 0;
  max-width: 280px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: #ffffff;
}

/* Right column — Visual-Stack (4 Layer, scroll-synchron) */
.ai-inner-right {
  position: relative;
  min-height: 620px;
}
.ai-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none;
}
.ai-visual > * {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.ai-inner--state-1 .ai-visual--1,
.ai-inner--state-2 .ai-visual--2,
.ai-inner--state-3 .ai-visual--3,
.ai-inner--state-4 .ai-visual--4 {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ai-dot--google {
  background: #4285f4;
}

/* Visual 1 — Audit-Liste */
.ai-audit {
  position: relative;
  background: #0a0a0a;
  border: 5px solid transparent;
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  background-image:
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(
      135deg,
      #ff3b30 0%,
      #ff6b9d 18%,
      #a66bff 35%,
      #4a90ff 52%,
      #8fd66e 68%,
      #ffd84d 84%,
      #ffa366 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ai-audit-head {
  padding-bottom: 18px;
  border-bottom: 1px solid #1f1f1f;
  margin-bottom: 8px;
}
.ai-audit-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 3px;
}
.ai-audit-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #6b7280;
}
.ai-audit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ai-audit-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 2px;
  border-bottom: 1px solid #151515;
}
.ai-audit-list li:last-child {
  border-bottom: none;
}
.ai-audit-agent {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #d0d0d0;
  display: inline-flex;
  align-items: center;
}
.ai-audit-status {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 1000px;
}
.ai-audit-status--miss {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.ai-audit-status--weak {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
}
.ai-audit-footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #1f1f1f;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #9a9a9a;
  text-align: right;
}

/* Visual 2 — Schema-Snippet */
.ai-schema {
  position: relative;
  background: #0a0a0a;
  border: 5px solid transparent;
  border-radius: 18px;
  padding: 18px 22px 20px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  background-image:
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(
      45deg,
      #ff3b30 0%,
      #ff6b9d 18%,
      #a66bff 35%,
      #4a90ff 52%,
      #8fd66e 68%,
      #ffd84d 84%,
      #ffa366 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ai-schema-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #1f1f1f;
}
.ai-schema-tab {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b7280;
  padding: 4px 10px;
  border-radius: 1000px;
  background: transparent;
}
.ai-schema-tab--active {
  background: rgba(250, 239, 112, 0.12);
  color: #FAEF70;
}
.ai-schema-code {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #c8c8c8;
  margin: 0;
  white-space: pre;
  overflow-x: auto;
}
.ai-tok-str {
  color: #facc15;
}
.ai-tok-pun {
  color: #8a85ff;
}
.ai-schema-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #1f1f1f;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #9a9a9a;
}
.ai-schema-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  font-weight: 700;
  font-size: 0.65rem;
  margin-right: 6px;
  vertical-align: middle;
}

/* Visual 4 — Growth-Chart */
.ai-growth {
  position: relative;
  background: #0a0a0a;
  border: 5px solid transparent;
  border-radius: 18px;
  padding: 28px 30px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  background-image:
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(
      225deg,
      #ff3b30 0%,
      #ff6b9d 18%,
      #a66bff 35%,
      #4a90ff 52%,
      #8fd66e 68%,
      #ffd84d 84%,
      #ffa366 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ai-growth-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.ai-growth-kpi {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
  margin-bottom: 4px;
}
.ai-growth-kpi-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #9a9a9a;
}
.ai-growth-delta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: #FAEF70;
  background: rgba(250, 239, 112, 0.08);
  padding: 5px 10px;
  border-radius: 1000px;
}
.ai-growth-chart {
  width: 100%;
  height: 140px;
  display: block;
  margin: 4px 0 14px;
}
.ai-growth-cluster {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid #1f1f1f;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ai-growth-cluster li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #d0d0d0;
}
.ai-growth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FAEF70;
  flex-shrink: 0;
}
.ai-growth-month {
  margin-left: auto;
  font-size: 0.7rem;
  color: #6b7280;
  font-weight: 500;
}

/* Right column legacy — jetzt unbenutzt, aber beibehalten */
.ai-inner-right-legacy {
  display: flex;
  align-items: center;
}
.ai-mock {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  border: 5px solid transparent;
  border-radius: 18px;
  padding: 26px 30px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
  background-image:
    linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(
      315deg,
      #ff3b30 0%,
      #ff6b9d 18%,
      #a66bff 35%,
      #4a90ff 52%,
      #8fd66e 68%,
      #ffd84d 84%,
      #ffa366 100%
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.ai-mock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #1f1f1f;
}
.ai-mock-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}
.ai-mock-date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #6b7280;
}
.ai-mock-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.ai-mock-table th {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  padding: 12px 8px 10px;
  border-bottom: 1px solid #1f1f1f;
}
.ai-mock-table td {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #d0d0d0;
  padding: 16px 8px;
  border-bottom: 1px solid #151515;
  vertical-align: middle;
}
.ai-mock-table tbody tr:last-child td {
  border-bottom: none;
}
.ai-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
}
.ai-dot--gpt { background: #10a37f; }
.ai-dot--perplexity { background: #4f46e5; }
.ai-dot--gemini { background: #e85d04; }
.ai-dot--claude { background: #c6a076; }
.ai-pos {
  font-family: var(--font-body);
  font-weight: 600;
  font-feature-settings: 'tnum';
}
.ai-pos--hi { color: #22c55e; }
.ai-pos--mid { color: #eab308; }
.ai-mock-footer {
  padding-top: 14px;
  border-top: 1px solid #1f1f1f;
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.ai-mock-delta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #22c55e;
}

@media (max-width: 900px) {
  .ai-section {
    padding: 32px 16px 56px;
  }
  .ai-outer {
    padding: 48px 24px 32px;
    border-radius: 24px;
  }
  .ai-head {
    margin-bottom: 36px;
  }
  /* Mobile: kein Pinned-Scroll — normaler Flow, alle Features sichtbar,
     nur Visual 1 als Illustration */
  .ai-scroll-wrap {
    height: auto;
  }
  .ai-sticky {
    position: static;
    min-height: 0;
    display: block;
  }
  .ai-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 32px 24px;
    border-radius: 20px;
  }
  .ai-inner-headline {
    margin-bottom: 24px;
  }
  .ai-feature-desc {
    display: block;
  }
  .ai-feature::before {
    background: #2d2d2d;
  }
  .ai-feature--active::before {
    background: #ffffff;
  }
  .ai-inner-right {
    min-height: 0;
  }
  .ai-visual {
    position: static;
    opacity: 0;
    display: none;
    transform: none;
  }
  .ai-inner--state-1 .ai-visual--1,
  .ai-inner--state-2 .ai-visual--2,
  .ai-inner--state-3 .ai-visual--3,
  .ai-inner--state-4 .ai-visual--4 {
    display: flex;
    opacity: 1;
  }
  .ai-mock {
    padding: 16px 14px;
  }
  .ai-mock-table th,
  .ai-mock-table td {
    padding: 10px 6px;
    font-size: 0.75rem;
  }
}

@media (max-width: 900px) {
  .testimonials-section {
    padding: 72px 20px 80px;
  }
  .testimonials-head {
    margin-bottom: 40px;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .testimonials-grid > * {
    grid-column: 1 / -1;
  }
  .testi-card {
    padding: 28px 24px 24px;
  }
  .testi-card--wide {
    display: flex;
    padding: 28px 24px 24px;
  }
  .testi-card--wide .testi-author {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 14px;
  }
  .testi-card--wide .testi-avatar {
    width: 80px;
    height: 80px;
    border-radius: 14px;
  }
  .testi-card--wide .testi-meta {
    align-items: flex-start;
    text-align: left;
  }
}

/* ============================================================
   AI-SECTION — LIGHT VARIANT (Process / Kennenlernen → Wachstum)
   ============================================================ */
.ai-section--light {
  background: transparent;
}
.ai-outer--light {
  background: transparent;
  border: none;
  padding: 40px 24px 60px;
}
.ai-pill--light {
  position: relative;
  isolation: isolate;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 6px 16px;
  margin-bottom: 26px;
  /* Gradient-Text über 5 Farben */
  background-image: linear-gradient(
    90deg,
    #4a90ff 0%,
    #b366ff 25%,
    #ff66b3 50%,
    #ffa366 75%,
    #ffd966 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.ai-pill--light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 1000px;
  z-index: -1;
}
.ai-headline--light {
  color: #0c0c0c;
}
.ai-sub--light {
  color: #4a4a4a;
}

.ai-inner--light {
  background: #f7f7f6;
  border: 1px solid #ebeae7;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.04);
}
.ai-inner--light .ai-inner-headline {
  color: #0c0c0c;
}
.ai-inner--light .ai-feature {
  color: #4a4a4a;
}
.ai-inner--light .ai-feature::before {
  background: #d6d3ca;
}
.ai-inner--light .ai-feature::after {
  background: #0c0c0c;
}
.ai-inner--light .ai-feature-label {
  color: #0c0c0c;
}
.ai-inner--light .ai-feature-desc {
  color: #6a6862;
}
.ai-inner--light .ai-inner-cta {
  background: #0c0c0c;
  color: #ffffff;
}
.ai-inner--light .ai-inner-cta:hover {
  background: #1a1a1a;
}
.ai-inner--light .ai-inner-note {
  color: #0c0c0c;
}

/* Process-Card Base (hell) */
.pc-card {
  background: #ffffff;
  border: 1px solid #e6e4de;
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 30px 60px rgba(12, 12, 12, 0.06);
}
.pc-card-eyebrow {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.4vw, 2.25rem);
  color: #0c0c0c;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 28px;
}

/* Visual 1 — Kalender: Gradient-Wedges an den Seiten */
.ai-visual--1 {
  overflow: visible;
}
.ai-visual--1 > .pc-card {
  position: relative;
  z-index: 1;
}
.pc-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid #eeece6;
  margin-bottom: 18px;
}
.pc-cal-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 4px;
}
.pc-cal-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #8a8a8a;
}
.pc-cal-month {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pc-cal-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.pc-cal-day {
  background: #f7f5f0;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 6px 12px;
  text-align: center;
  transition: all 0.2s ease;
}
.pc-cal-day--active {
  background: #0c0c0c;
  color: #ffffff;
}
.pc-cal-dow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: #8a8a8a;
  margin-bottom: 4px;
}
.pc-cal-day--active .pc-cal-dow {
  color: #b8b8b8;
}
.pc-cal-date {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: #0c0c0c;
}
.pc-cal-day--active .pc-cal-date {
  color: #ffffff;
}
.pc-cal-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.pc-cal-slot {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0c0c0c;
  padding: 8px 14px;
  background: #f7f5f0;
  border: 1px solid #eeece6;
  border-radius: 1000px;
}
.pc-cal-slot--selected {
  background: #0c0c0c;
  color: #ffffff;
  border-color: #0c0c0c;
}
.pc-cal-confirm {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid #eeece6;
}
.pc-cal-confirm-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #6a6862;
}
.pc-cal-confirm-btn {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  background: #0c0c0c;
  padding: 8px 16px;
  border-radius: 1000px;
}

/* Visual 2 — Scorecard */
.pc-score-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid #eeece6;
  margin-bottom: 14px;
}
.pc-score-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 4px;
}
.pc-score-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #8a8a8a;
}
.pc-score-overall {
  text-align: right;
}
.pc-score-overall-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 2rem;
  line-height: 1;
  color: #0c0c0c;
  margin-bottom: 2px;
}
.pc-score-overall-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pc-score-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-score-list li {
  display: grid;
  grid-template-columns: 130px 1fr 30px;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
}
.pc-score-cat {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #0c0c0c;
  font-weight: 500;
}
.pc-score-track {
  height: 6px;
  background: #f0ede6;
  border-radius: 100px;
  overflow: hidden;
}
.pc-score-bar {
  height: 100%;
  border-radius: 100px;
}
.pc-score-bar--good {
  background: #16a34a;
}
.pc-score-bar--mid {
  background: #eab308;
}
.pc-score-bar--bad {
  background: #ef4444;
}
.pc-score-val {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0c0c0c;
  text-align: right;
  font-feature-settings: 'tnum';
}
.pc-score-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid #eeece6;
}
.pc-score-pill {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
  padding: 5px 10px;
  border-radius: 1000px;
}
.pc-score-delta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: #6a6862;
}

/* Visual 3 — Projekt-Board */
.pc-board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeece6;
  margin-bottom: 16px;
}
.pc-board-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
}
.pc-board-team {
  display: flex;
  gap: -4px;
}
.pc-board-team .pc-board-avatar {
  margin-left: -6px;
  border: 2px solid #ffffff;
}
.pc-board-team .pc-board-avatar:first-child {
  margin-left: 0;
}
.pc-board-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: #ffffff;
  flex-shrink: 0;
}
.pc-board-avatar--ch {
  background: linear-gradient(135deg, #0c0c0c, #404040);
}
.pc-board-avatar--ck {
  background: linear-gradient(135deg, #6b6bff, #4f46e5);
}
.pc-board-avatar--ml {
  background: linear-gradient(135deg, #16a34a, #0e7c39);
}
.pc-board-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pc-board-col {
  background: #f7f5f0;
  border-radius: 12px;
  padding: 12px 10px;
  min-height: 180px;
}
.pc-board-col-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  padding: 0 4px;
}
.pc-board-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.pc-board-dot--now {
  background: #ef4444;
}
.pc-board-dot--week {
  background: #eab308;
}
.pc-board-dot--plan {
  background: #94a3b8;
}
.pc-board-task {
  background: #ffffff;
  border: 1px solid #eeece6;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.pc-board-task--muted {
  opacity: 0.7;
  background: #fafaf6;
}
.pc-board-task-title {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0c0c0c;
  margin-bottom: 8px;
  line-height: 1.35;
}
.pc-board-task-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pc-board-tag {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  color: #6a6862;
  background: #f0ede6;
  padding: 3px 8px;
  border-radius: 1000px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pc-board-task .pc-board-avatar {
  width: 20px;
  height: 20px;
  font-size: 0.55rem;
}

/* Visual 4 — Reporting-Dashboard */
.pc-report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid #eeece6;
  margin-bottom: 18px;
}
.pc-report-title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 4px;
}
.pc-report-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #8a8a8a;
}
.pc-report-badge {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
  padding: 5px 10px;
  border-radius: 1000px;
}
.pc-roadmap-badge {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6b5bff;
  background: rgba(107, 91, 255, 0.1);
  padding: 5px 10px;
  border-radius: 1000px;
}
.pc-roadmap {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.pc-roadmap-phase {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
}
.pc-roadmap-phase:last-child {
  border-bottom: none;
}
.pc-roadmap-when {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  letter-spacing: 0.02em;
}
.pc-roadmap-what {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: #0c0c0c;
}
.pc-roadmap-status {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 1000px;
}
.pc-roadmap-status--done {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.pc-roadmap-status--now {
  background: rgba(107, 91, 255, 0.1);
  color: #6b5bff;
}
.pc-roadmap-status--plan {
  background: #f2f2f2;
  color: #6b7280;
}
.pc-roadmap-phase--plan .pc-roadmap-what {
  color: #6b7280;
}
.pc-report-hero {
  margin-bottom: 20px;
}
.pc-report-kpi {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 3rem;
  line-height: 1;
  color: #0c0c0c;
  margin-bottom: 4px;
}
.pc-report-kpi-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #6a6862;
  margin-bottom: 14px;
}
.pc-report-chart {
  width: 100%;
  height: 90px;
  display: block;
}
.pc-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #eeece6;
}
.pc-report-mini {
  padding: 2px 0;
}
.pc-report-mini-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.pc-report-mini-val {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
}
.pc-report-mini-delta {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  margin-top: 2px;
}
.pc-report-mini-delta--good {
  color: #16a34a;
}

/* ============================================================
   CTA BANNER — Gradient-Aurora mit Doppel-Button
   ============================================================ */
.cta-banner-section {
  padding: 40px 24px 72px;
}
.cta-banner {
  position: relative;
  max-width: 1326px;
  margin: 0 auto;
  border-radius: 32px;
  overflow: hidden;
  padding: 140px 40px;
  text-align: center;
  background: #2233cc;
  isolation: isolate;
}
.cta-banner-aurora {
  position: absolute;
  inset: -10%;
  background-image: url('cta-banner-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(70px) saturate(1.15);
  transform: scale(1.15);
  z-index: -2;
}
.cta-banner-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.35;
  mix-blend-mode: overlay;
  z-index: -1;
  pointer-events: none;
}
.cta-banner-content {
  position: relative;
  z-index: 1;
}
.cta-banner-headline {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: #ffffff;
  margin: 0 0 18px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.15);
}
.cta-banner-sub {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 40px;
  line-height: 1.5;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.15);
}
.cta-banner-actions {
  display: inline-flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cta-banner-btn {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 9px 26px;
  border-radius: 1000px;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.cta-banner-btn--primary {
  background: #ffffff;
  color: #0c0c0c;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.cta-banner-btn--primary:hover {
  background: #f5f5f5;
  transform: translateY(-1px);
}
.cta-banner-btn--secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-banner-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .cta-banner-section {
    padding: 24px 16px 48px;
  }
  .cta-banner {
    padding: 80px 24px;
    border-radius: 24px;
  }
  .cta-banner-headline {
    font-size: 2.125rem;
  }
  .cta-banner-sub {
    font-size: 1rem;
    margin-bottom: 30px;
  }
  .cta-banner-actions {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .cta-banner-btn {
    width: 100%;
    padding: 10px 20px;
  }
}

/* ============================================================
   PROOF SECTION — "Sie wachsen. Punkt." + Kunden-Logos
   ============================================================ */
.proof-section {
  padding: 100px 24px 120px;
  background: transparent;
}
.proof-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.proof-headline {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text, #0c0c0c);
  margin: 0 0 28px;
}
.proof-divider {
  width: 220px;
  height: 1px;
  background: rgba(0, 0, 0, 0.18);
  margin: 0 auto 28px;
}
.proof-sub {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text, #0c0c0c);
  max-width: 640px;
  margin: 0 auto 64px;
  line-height: 1.55;
}
.proof-logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 8px;
  align-items: center;
  justify-items: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.proof-logo {
  color: var(--text, #0c0c0c);
  opacity: 0.82;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.proof-logo:hover {
  opacity: 1;
}
/* Typografische "Logos" — jede Marke eigener Stil */
.proof-logo--passions {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 1.625rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.proof-logo--panthera {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.proof-logo--blum {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.proof-logo--stalburg {
  font-family: var(--font-body);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-style: italic;
}
.proof-logo--sk {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.proof-logo--mrd {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.proof-logo--pfannes {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 1.625rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
}
.proof-logo--fore {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: 0.24em;
}

@media (max-width: 900px) {
  .proof-section {
    padding: 72px 20px 80px;
  }
  .proof-logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
  .proof-logo--passions,
  .proof-logo--blum,
  .proof-logo--fore {
    font-size: 1.375rem;
  }
  .proof-logo--stalburg,
  .proof-logo--sk,
  .proof-logo--panthera,
  .proof-logo--mrd {
    font-size: 1rem;
  }
  .proof-logo--pfannes {
    font-size: 1.375rem;
  }
}

@media (max-width: 900px) {
  .ai-outer--light {
    padding: 48px 20px 32px;
  }
  .pc-card {
    padding: 20px 18px;
  }
  .pc-board-cols {
    grid-template-columns: 1fr;
  }
  .pc-score-list li {
    grid-template-columns: 100px 1fr 30px;
    gap: 10px;
  }
  .pc-cal-days {
    gap: 6px;
  }
  .pc-report-kpi {
    font-size: 2.25rem;
  }
  .pc-report-kpis {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
}

/* =========================================================
   BOOK-A-CALL (Hyros 1:1-Klon)
   Minimale Seite: H1 + Agentur-Link + Widget + Footer
   ========================================================= */

.hy-page {
  background: #ffffff;
  color: #0c0c0c;
}

.hy-hero {
  padding: 96px 24px 32px;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}
.hy-h1 {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  text-wrap: balance;
  margin: 0 0 40px;
}
.hy-agency {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #0c0c0c;
  margin: 0;
}
.hy-agency a {
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
  margin-left: 4px;
}

/* WIDGET */
.hy-widget-wrap {
  padding: 48px 24px 96px;
  display: flex;
  justify-content: center;
}
.hy-widget {
  width: 100%;
  max-width: 960px;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.hy-tabs {
  display: flex;
  gap: 28px;
  justify-content: center;
  padding: 12px 24px;
  border-bottom: 1px solid #ececec;
  background: #fafafa;
}
.hy-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #999;
}
.hy-tab .hy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d8d8;
  display: inline-block;
}
.hy-tab.is-active { color: #0c0c0c; }
.hy-tab.is-active .hy-dot { background: #0c0c0c; }

.hy-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 440px;
}
@media (max-width: 820px) {
  .hy-split { grid-template-columns: 1fr; }
}

/* LEFT: Form */
.hy-form-panel {
  padding: 24px 28px 22px;
  background: #ffffff;
  border-right: 1px solid #ececec;
  display: flex;
  flex-direction: column;
}
@media (max-width: 820px) {
  .hy-form-panel {
    border-right: none;
    border-bottom: 1px solid #ececec;
  }
}
.hy-form-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.hy-form-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.hy-form-logo-mark {
  display: inline-flex;
  gap: 2px;
  align-items: end;
}
.hy-form-logo-mark span {
  display: block;
  width: 3px;
  background: #0c0c0c;
  border-radius: 1px;
}
.hy-form-logo-mark span:nth-child(1) { height: 9px; }
.hy-form-logo-mark span:nth-child(2) { height: 15px; }
.hy-form-logo-mark span:nth-child(3) { height: 21px; }
.hy-form-logo-mark span:nth-child(4) { height: 15px; }
.hy-form-logo-mark span:nth-child(5) { height: 9px; }
.hy-form-logo-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #0c0c0c;
}
.hy-form-title {
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 600;
  color: #0c0c0c;
  margin: 0 0 10px;
  letter-spacing: 0;
  line-height: 1.3;
}
.hy-form-desc {
  font-size: 0.875rem;
  color: #6a6a6a;
  line-height: 1.55;
  margin: 0 0 24px;
}
.hy-form {
  display: grid;
  gap: 14px;
  margin-top: auto;
}
.hy-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hy-form input {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  padding: 13px 14px;
  background: #ffffff;
  border: 1px solid #dedede;
  border-radius: 8px;
  color: #0c0c0c;
  width: 100%;
  transition: border-color 150ms;
}
.hy-form input:focus {
  outline: none;
  border-color: #0c0c0c;
}
.hy-form input::placeholder {
  color: #a8a8a8;
}
.hy-consent {
  font-size: 0.75rem;
  color: #8a8a8a;
  line-height: 1.5;
  margin: 4px 0 0;
}
.hy-consent a {
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hy-continue {
  margin-top: 12px;
  background: #0c0c0c;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 150ms;
}
.hy-continue:hover { background: #222; }
.hy-continue svg { width: 14px; height: 14px; }

/* RIGHT: Kalender (disabled state) */
.hy-cal-panel {
  padding: 24px 28px;
  background: #fafafa;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hy-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hy-cal-month {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #0c0c0c;
}
.hy-cal-nav {
  display: inline-flex;
  gap: 4px;
}
.hy-cal-nav button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #dedede;
  background: #ffffff;
  color: #6a6a6a;
  cursor: pointer;
  font-size: 0.875rem;
  display: inline-grid;
  place-items: center;
  transition: background 150ms, color 150ms;
}
.hy-cal-nav button:hover { background: #f0f0f0; color: #0c0c0c; }

.hy-cal-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.hy-day {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 10px 0 12px;
  text-align: center;
  background: #ffffff;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #b8b8b8;
}
.hy-day-num {
  font-size: 1rem;
  font-weight: 500;
  color: #c8c8c8;
  margin-top: 2px;
}

.hy-cal-tz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #b0b0b0;
  padding: 4px 2px 0;
}
.hy-cal-tz-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hy-cal-tz-24h {
  padding: 2px 8px;
  border: 1px solid #dedede;
  border-radius: 6px;
  font-size: 0.75rem;
  color: #8a8a8a;
  background: #ffffff;
}

.hy-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hy-slot {
  padding: 12px 0;
  text-align: center;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #ffffff;
  color: #c0c0c0;
  font-size: 0.875rem;
}

.hy-tooltip {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  color: #0c0c0c;
  font-size: 0.875rem;
  padding: 14px 22px;
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid #ececec;
  text-align: center;
  max-width: 280px;
  line-height: 1.4;
  z-index: 2;
}
.hy-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}

.hy-widget-foot {
  border-top: 1px solid #ececec;
  padding: 10px 24px;
  text-align: center;
  background: #fafafa;
  font-size: 0.75rem;
  color: #a0a0a0;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}
.hy-widget-foot-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* Header-Overrides auf der Light-Kontaktseite */
.hy-page .site-header .brand-link,
.hy-page .site-header .main-nav > a,
.hy-page .site-header .nav-trigger {
  color: #0c0c0c;
}
.hy-page .site-header .main-nav > a:not(.btn):hover,
.hy-page .site-header .nav-item-dropdown:hover .nav-trigger-text,
.hy-page .site-header .nav-item-dropdown:focus-within .nav-trigger-text {
  color: transparent;
}
.hy-page .site-header .btn.btn-primary {
  background: #0c0c0c;
  color: #ffffff;
}
.hy-page .site-header .btn.btn-primary:hover {
  background: #2a2a2a;
  color: #ffffff;
}

/* TRUST-MARQUEE zwischen Widget und Footer */
.hy-trust {
  padding: 50px 24px 80px;
  background: #ffffff;
  text-align: center;
}
.hy-trust-inner {
  max-width: 960px;
  margin: 0 auto;
}
.hy-trust-head {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  max-width: 28ch;
  margin: 0 auto 56px;
  text-wrap: balance;
}
.hy-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}
.hy-marquee-track {
  display: flex;
  gap: 80px;
  width: max-content;
  animation: hy-scroll 40s linear infinite;
}
.hy-marquee:hover .hy-marquee-track {
  animation-play-state: paused;
}
.hy-marquee-item {
  color: #0c0c0c;
  opacity: 0.75;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
@keyframes hy-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hy-marquee-track { animation: none; }
}

/* ==========================================================
   LEISTUNGS-SEITEN (Light Landing-Page Primitives)
   ========================================================== */
.lp-page { background: #ffffff; color: #0c0c0c; }

.lp-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6a6a6a;
  margin: 0 0 20px;
}
.lp-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: #0c0c0c;
  display: inline-block;
}

.lp-h1,
.lp-h2,
.lp-h3 {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  color: #0c0c0c;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
.lp-h1 {
  font-size: clamp(2rem, 4.6vw, 3.75rem);
  line-height: 1.08;
}
.lp-h2 {
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  line-height: 1.14;
}
.lp-h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  font-variation-settings: 'opsz' 40;
}

.lp-lead {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  color: #3d3d3d;
  max-width: 640px;
  margin: 24px auto 0;
}
.lp-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: #5a5a5a;
  max-width: 620px;
  margin: 18px auto 0;
}

/* HERO */
.lp-hero {
  padding: 88px 24px 56px;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.lp-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 36px;
}

/* BUTTONS */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}
.lp-btn--primary {
  background: #0c0c0c;
  color: #ffffff;
}
.lp-btn--primary:hover {
  background: #2a2a2a;
}
.lp-btn--ghost {
  background: #ffffff;
  color: #0c0c0c;
  border-color: #d8d8d8;
}
.lp-btn--ghost:hover {
  border-color: #0c0c0c;
}

/* SECTIONS */
.lp-section {
  padding: 88px 24px;
}
.lp-section--alt { background: #fafafa; }
.lp-section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.lp-section-head .lp-kicker {
  justify-content: center;
}

/* FEATURE GRID */
.lp-grid {
  display: grid;
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .lp-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .lp-grid--3 { grid-template-columns: 1fr; }
}

.lp-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 28px 28px 26px;
  transition: border-color 180ms ease, transform 180ms ease;
}
.lp-card:hover {
  border-color: #0c0c0c;
  transform: translateY(-2px);
}
.lp-card-num {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #8a8a8a;
  margin-bottom: 14px;
}
.lp-card h3,
.lp-card .lp-card-h {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 30;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #0c0c0c;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.lp-card p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0;
}

/* PRICING */
.lp-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1120px;
  margin: 0 auto;
  align-items: stretch;
}
.lp-price-grid--2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
}
@media (max-width: 900px) {
  .lp-price-grid,
  .lp-price-grid--2 { grid-template-columns: 1fr; max-width: 560px; }
}
.lp-price-card {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lp-price-card--featured {
  background: #0c0c0c;
  border-color: #0c0c0c;
  color: #ffffff;
}
.lp-price-tier {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.lp-price-card--featured .lp-price-tier { color: #faef70; }
.lp-price-name {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 40;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.2;
  color: inherit;
  margin: 0;
  letter-spacing: -0.01em;
}
.lp-price-value {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: inherit;
}
.lp-price-value span {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.7;
  margin-left: 2px;
}
.lp-price-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #8a8a8a;
  margin: -8px 0 6px;
}
.lp-price-card--featured .lp-price-note { color: #bfbfbf; }

.lp-price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: grid;
  gap: 10px;
  flex: 1;
}
.lp-price-list li {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #3d3d3d;
  padding-left: 22px;
  position: relative;
}
.lp-price-card--featured .lp-price-list li { color: #e6e6e6; }
.lp-price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 6px;
  border-left: 1.75px solid #0c0c0c;
  border-bottom: 1.75px solid #0c0c0c;
  transform: rotate(-45deg);
}
.lp-price-card--featured .lp-price-list li::before {
  border-color: #faef70;
}
.lp-price-card .lp-btn {
  width: 100%;
  margin-top: 10px;
}
.lp-price-card--featured .lp-btn--primary {
  background: #ffffff;
  color: #0c0c0c;
}
.lp-price-card--featured .lp-btn--primary:hover {
  background: #faef70;
}
.lp-price-card--featured .lp-btn--ghost {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}
.lp-price-card--featured .lp-btn--ghost:hover {
  border-color: #ffffff;
}

.lp-single {
  max-width: 560px;
  margin: 0 auto;
}

/* FAQ */
.lp-faq {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.lp-faq-item {
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  padding: 0;
  transition: border-color 180ms ease;
}
.lp-faq-item[open] {
  border-color: #0c0c0c;
}
.lp-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #0c0c0c;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: #0c0c0c;
  transition: transform 200ms ease;
}
.lp-faq-item[open] summary::after {
  content: "−";
}
.lp-faq-answer {
  padding: 0 24px 22px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #5a5a5a;
}

/* CTA BAND */
.lp-cta-band {
  padding: 96px 24px;
  text-align: center;
  background: #0c0c0c;
  color: #ffffff;
}
.lp-cta-band .lp-kicker { color: #bfbfbf; }
.lp-cta-band .lp-kicker::before { background: #faef70; }
.lp-cta-band .lp-h2 { color: #ffffff; max-width: 640px; margin: 0 auto; }
.lp-cta-band .lp-sub { color: #bfbfbf; }
.lp-cta-band .lp-btn--primary {
  background: #ffffff;
  color: #0c0c0c;
  margin-top: 32px;
}
.lp-cta-band .lp-btn--primary:hover {
  background: #faef70;
}

@media (max-width: 700px) {
  .lp-hero { padding: 64px 20px 40px; }
  .lp-section { padding: 64px 20px; }
  .lp-cta-band { padding: 72px 20px; }
}

/* SPLIT HERO (Hyros-style) */
.lp-hero--split {
  max-width: 1200px;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding: 112px 24px 48px;
}
.lp-hero--split + .lp-section { padding-top: 56px; }
.lp-hero--split + .lp-section .lp-section-head { margin-bottom: 48px; }
.lp-hero--split .lp-kicker {
  justify-content: flex-start;
  font-size: 1.125rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #6b6b6b;
  gap: 6px;
}
.lp-hero--split .lp-kicker::before { display: none; }
.lp-kicker-accent {
  background: linear-gradient(90deg, #2a4bff 0%, #4ab8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
}
.lp-hero--split .lp-h1 {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: clamp(1.8rem, 4.14vw, 3.375rem);
}
.lp-hero--split-left {
  margin-top: -44px;
}
.lp-hero--split .lp-hero-cta .lp-btn {
  padding: 9px 18px;
}
@media (max-width: 960px) {
  .lp-hero--split-left { margin-top: 0; }
}
.lp-hero--split .lp-hero-cta {
  justify-content: flex-start;
  margin-top: 36px;
}
.lp-hero--split-right {
  padding-top: 48px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #3d3d3d;
  max-width: 440px;
}
.lp-hero--split-right p { margin: 0; }
.lp-hero--split-right p + p { margin-top: 14px; }

@media (max-width: 960px) {
  .lp-hero--split {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 80px 20px 56px;
  }
  .lp-hero--split-right { padding-top: 0; max-width: none; }
  .lp-hero--split .lp-h1 { max-width: none; }
}

/* HOW-IT-WORKS (4-step gradient-border grid) */
/* TESTIMONIAL SECTION */
.lp-testimonial-section { padding: 96px 24px; }
.lp-testimonial {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.lp-testimonial-logo {
  width: 128px;
  height: 128px;
  margin: 0 auto 32px;
  background: #0c0c0c;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-testimonial-logo img {
  max-width: 127%;
  max-height: 127%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.lp-testimonial-quote {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: #3d3d3d;
  margin: 0;
  font-style: normal;
  quotes: none;
}
.lp-testimonial-meta {
  margin-top: 28px;
  font-family: var(--font-body);
}
.lp-testimonial-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0c0c0c;
}
.lp-testimonial-url {
  display: inline-block;
  margin-top: 4px;
  color: #4ab8ff;
  text-decoration: none;
  font-size: 0.95rem;
}
.lp-testimonial-url:hover { text-decoration: underline; }

/* METRICS SECTION (Hyros-style attribution panel) */
.lp-metrics-section {
  padding: 96px 24px 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-metrics-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.lp-metrics-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.875rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  margin: 0 0 24px;
}
.lp-metrics-sub {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #6b6b6b;
  margin: 0;
}
.lp-metrics-panel {
  background: #f5f2ec;
  border: none;
  border-radius: 24px;
  padding: 20px;
}
.lp-metrics-panel-head {
  background: #fbfaf7;
  border: 1px solid rgba(12, 12, 12, 0.05);
  border-radius: 16px;
  padding: 56px 32px;
  text-align: center;
}
.lp-metrics-panel-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  margin: 0;
}
.lp-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 20px;
}
.lp-metrics-cell {
  padding: 40px 24px 32px;
  text-align: center;
  border-right: 1px solid rgba(12, 12, 12, 0.08);
}
.lp-metrics-cell:last-child {
  border-right: none;
}
.lp-metrics-arrow {
  font-family: var(--font-body);
  font-size: 1.375rem;
  color: #0c0c0c;
  margin-bottom: 36px;
  opacity: 0.85;
  line-height: 1;
}
.lp-metrics-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #1a1a1a;
}
@media (max-width: 768px) {
  .lp-metrics-section {
    padding: 72px 16px 32px;
  }
  .lp-metrics-panel {
    padding: 12px;
  }
  .lp-metrics-panel-head {
    padding: 40px 20px;
  }
  .lp-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-metrics-cell {
    padding: 32px 16px 24px;
  }
  .lp-metrics-cell:nth-child(2) {
    border-right: none;
  }
  .lp-metrics-cell:nth-child(1),
  .lp-metrics-cell:nth-child(2) {
    border-bottom: 1px solid rgba(12, 12, 12, 0.08);
  }
}

/* DASHBOARD MOCKUP SECTION (Hyros-style analytics frame) */
.lp-dashboard-section {
  position: relative;
  padding: 32px 24px 96px;
  overflow: hidden;
}
.lp-dashboard-glow {
  display: none;
}
.lp-dashboard-wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  zoom: 0.9;
}
.lp-dashboard-frame {
  position: relative;
  background: #101014;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 14px;
}
.lp-dashboard-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 12px;
}
.lp-dashboard-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
}
.lp-dashboard-dot:nth-child(1) { background: #ff5f57; opacity: 0.85; }
.lp-dashboard-dot:nth-child(2) { background: #febc2e; opacity: 0.85; }
.lp-dashboard-dot:nth-child(3) { background: #28c840; opacity: 0.85; }
.lp-dashboard-url {
  margin-left: 14px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.lp-dashboard-inner {
  background: #ffffff;
  border-radius: 12px;
  padding: 82px 24px 20px;
  color: #0c0c0c;
  font-family: var(--font-body);
}
.lp-dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(12, 12, 12, 0.08);
}
.lp-dashboard-title {
  font-size: 1rem;
  font-weight: 600;
  color: #0c0c0c;
}
.lp-dashboard-subtitle {
  font-size: 0.8125rem;
  color: #6b6b6b;
  margin-top: 3px;
}
.lp-dashboard-date {
  font-size: 0.8125rem;
  color: #6b6b6b;
  background: #eeece7;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
}
.lp-dashboard-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.lp-dashboard-tiles--6 {
  grid-template-columns: repeat(6, 1fr);
}
.lp-dashboard-subtiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 10px;
}
.lp-dashboard-subtile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border-right: 1px solid rgba(12, 12, 12, 0.06);
}
.lp-dashboard-subtile:last-child { border-right: none; }
.lp-dashboard-subtile-label {
  font-size: 0.7rem;
  color: #9b9b9b;
  letter-spacing: 0.02em;
}
.lp-dashboard-subtile-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0c0c0c;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.lp-dashboard-subtile-delta {
  font-size: 0.7rem;
  font-weight: 600;
}
.lp-dashboard-subtile-delta.up { color: #1aa064; }

/* SPLIT LAYOUT */
.lp-dashboard-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.lp-dashboard-main,
.lp-dashboard-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-dashboard-paneltitle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0c0c0c;
}
.lp-dashboard-paneltitle-meta {
  font-size: 0.7rem;
  font-weight: 500;
  color: #9b9b9b;
  letter-spacing: 0.02em;
}
.lp-dashboard-subpanel {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 10px;
  padding: 12px 14px 14px;
}
.lp-dashboard-subpanel .lp-dashboard-paneltitle {
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(12, 12, 12, 0.06);
  margin-bottom: 10px;
}
.lp-dashboard-llmlist,
.lp-dashboard-reflist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-dashboard-llm {
  display: grid;
  grid-template-columns: 24px 1fr auto 44px;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}
.lp-dashboard-llm-logo {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 700;
}
.lp-dashboard-llm-logo.llm-chatgpt { background: #10a37f; }
.lp-dashboard-llm-logo.llm-claude { background: #cc785c; }
.lp-dashboard-llm-logo.llm-perplexity { background: #1f8b9e; }
.lp-dashboard-llm-logo.llm-gemini { background: #4285f4; }
.lp-dashboard-llm-name {
  color: #0c0c0c;
  font-weight: 500;
}
.lp-dashboard-llm-val {
  font-weight: 600;
  color: #0c0c0c;
  font-variant-numeric: tabular-nums;
}
.lp-dashboard-ref {
  display: grid;
  grid-template-columns: 1fr 48px 44px;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}
.lp-dashboard-ref-name {
  color: #0c0c0c;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-dashboard-ref-dr {
  font-size: 0.7rem;
  font-weight: 700;
  color: #137a45;
  background: #d7f0e1;
  padding: 3px 6px;
  border-radius: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.lp-dashboard-ref-tag {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6b6b;
  background: #f3f1ec;
  padding: 3px 6px;
  border-radius: 6px;
  text-align: center;
}
.lp-dashboard-ref-tag.new {
  color: #2a4bff;
  background: #e6ebff;
}
.lp-dashboard-tile {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
.lp-dashboard-tile-label {
  font-size: 0.75rem;
  color: #6b6b6b;
  margin-bottom: 6px;
}
.lp-dashboard-tile-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0c0c0c;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.lp-dashboard-tile-delta {
  font-size: 0.75rem;
  margin-top: 6px;
  font-weight: 600;
}
.lp-dashboard-tile-delta.up { color: #1aa064; }
.lp-dashboard-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-dashboard-tablehead,
.lp-dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 60px 60px 48px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
}
.lp-dashboard-tablehead {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9b9b9b;
  padding: 6px 14px;
}
.lp-dashboard-tablehead .ta-right,
.lp-dashboard-row .ta-right { text-align: right; }
.lp-dashboard-tablehead .ta-center,
.lp-dashboard-row .ta-center { text-align: center; }
.lp-dashboard-row {
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.06);
}
.lp-dashboard-row--highlight {
  border-color: #0c0c0c;
  box-shadow: 0 0 0 1px #0c0c0c;
}
.lp-dashboard-kw {
  font-weight: 500;
  color: #0c0c0c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-dashboard-num {
  font-variant-numeric: tabular-nums;
  color: #1a1a1a;
  font-weight: 500;
}
.lp-dashboard-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lp-dashboard-pos.p-top {
  background: #d7f0e1;
  color: #137a45;
}
.lp-dashboard-pos.p-mid {
  background: #fff4d6;
  color: #a6780f;
}
.lp-dashboard-pos.p-low {
  background: #f3f1ec;
  color: #6b6b6b;
}
.lp-dashboard-delta {
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lp-dashboard-delta.up { color: #1aa064; }
.lp-dashboard-delta.down { color: #c53030; }
.lp-dashboard-tooltip {
  position: absolute;
  top: 115px;
  right: 280px;
  max-width: 320px;
  background: #0c0c0c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 500;
  box-shadow: 0 16px 40px -12px rgba(12, 12, 12, 0.5);
  z-index: 3;
}
.lp-dashboard-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 40px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #0c0c0c;
}
@media (max-width: 900px) {
  .lp-dashboard-tiles,
  .lp-dashboard-tiles--6 { grid-template-columns: repeat(3, 1fr); }
  .lp-dashboard-subtiles { grid-template-columns: repeat(3, 1fr); }
  .lp-dashboard-subtile:nth-child(3n) { border-right: none; }
  .lp-dashboard-subtile:nth-child(-n+3) {
    border-bottom: 1px solid rgba(12, 12, 12, 0.06);
    padding-bottom: 8px;
    margin-bottom: 4px;
  }
  .lp-dashboard-split { grid-template-columns: 1fr; }
  .lp-dashboard-tablehead,
  .lp-dashboard-row {
    grid-template-columns: 1fr 50px 56px;
    font-size: 0.75rem;
    gap: 8px;
  }
  .lp-dashboard-tablehead > *:nth-child(4),
  .lp-dashboard-tablehead > *:nth-child(5),
  .lp-dashboard-row > *:nth-child(4),
  .lp-dashboard-row > *:nth-child(5) { display: none; }
  .lp-dashboard-tooltip {
    font-size: 0.8125rem;
    max-width: 240px;
    top: 52px;
    right: 16px;
  }
  .lp-dashboard-inner { padding: 16px 14px; }
  .lp-dashboard-url { display: none; }
}
@media (max-width: 540px) {
  .lp-dashboard-tiles,
  .lp-dashboard-tiles--6 { grid-template-columns: repeat(2, 1fr); }
  .lp-dashboard-subtiles { grid-template-columns: repeat(2, 1fr); }
  .lp-dashboard-subtile:nth-child(2n) { border-right: none; }
  .lp-dashboard-subtile:nth-child(-n+4) {
    border-bottom: 1px solid rgba(12, 12, 12, 0.06);
    padding-bottom: 8px;
  }
}

/* DASHBOARD CTA (Hyros-style headline + pill button) */
.lp-dashboard-cta {
  text-align: center;
  padding: 56px 24px 8px;
}
.lp-dashboard-cta-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 500;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  margin: 0 0 32px;
}
.lp-dashboard-cta-btn {
  display: inline-block;
  background: #0c0c0c;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 120ms ease, background 120ms ease;
}
.lp-dashboard-cta-btn:hover {
  background: #2a4bff;
  transform: translateY(-1px);
}

/* DARK PANEL SECTION (Hyros-style inset dark block) */
.lp-dark-wrap {
  padding: 24px 16px 64px;
}
.lp-dark-panel {
  position: relative;
  max-width: none;
  margin: 0 auto;
  background-color: #0c0c0c;
  background-image:
    radial-gradient(700px 520px at 0% 50%, rgba(42, 75, 255, 0.35), transparent 60%),
    radial-gradient(700px 520px at 100% 50%, rgba(232, 62, 140, 0.28), transparent 60%),
    radial-gradient(600px 400px at 15% 90%, rgba(247, 196, 55, 0.18), transparent 60%),
    radial-gradient(600px 400px at 85% 10%, rgba(74, 184, 255, 0.22), transparent 60%);
  color: #ffffff;
  border-radius: 28px;
  padding: 96px 32px 112px;
  text-align: center;
  overflow: hidden;
}
.lp-dark-intro {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: #d6d6d6;
  margin: 0 auto;
  max-width: 620px;
  font-weight: 500;
}
.lp-dark-pill {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 22px;
  background: #1a1a1a;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #9a9a9a;
  letter-spacing: 0.01em;
}
.lp-dark-h {
  margin: 72px auto 0;
  max-width: 820px;
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .lp-dark-panel { padding: 72px 20px 88px; border-radius: 22px; }
  .lp-dark-intro br { display: none; }
  .lp-dark-h { margin-top: 56px; }
  .lp-dark-h br { display: none; }
}

/* Dark panel hero variant — hero content inside dark panel */
.lp-dark-panel--hero {
  padding-top: 120px;
  padding-bottom: 120px;
}
.lp-kicker--on-dark { color: #d6d6d6; }
.lp-kicker--on-dark .lp-kicker-accent { color: #faef70; }
.lp-dark-h1 {
  margin: 18px auto 0;
  max-width: 900px;
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-wrap: balance;
}
.lp-dark-lead {
  margin: 24px auto 0;
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.lp-hero-cta--on-dark {
  margin-top: 32px;
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-btn--ghost-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.lp-btn--ghost-on-dark:hover {
  border-color: #faef70;
  color: #faef70;
}
.lp-btn--primary-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 22px;
  border-radius: 999px;
  background: #faef70;
  color: #0c0c0c;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.2s, transform 0.15s;
}
.lp-btn--primary-on-dark:hover {
  background: #ffffff;
}
.lp-dark-divider {
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  margin: 88px auto 72px;
}
@media (max-width: 720px) {
  .lp-dark-panel--hero { padding-top: 88px; padding-bottom: 96px; }
  .lp-dark-h1 { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .lp-dark-lead { font-size: 1rem; padding: 0 4px; }
  .lp-dark-divider { margin: 64px auto 48px; }
  .lp-hero-cta--on-dark { gap: 10px; }
  .lp-btn--ghost-on-dark, .lp-btn--primary-on-dark { min-height: 44px; }
}

/* CLAIM SECTION (Hyros-style centered stat block) */
.lp-claim-section { padding-top: 56px; padding-bottom: 56px; }
.lp-claim {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.lp-claim-h {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  text-wrap: balance;
  margin: 0;
}
.lp-claim-sub {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: #6b6b6b;
  margin: 18px 0 0;
}
.lp-claim-accent {
  font-family: var(--font-body);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 500;
  line-height: 1.35;
  background: linear-gradient(90deg, #2a4bff 0%, #4ab8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 32px 0 0;
}

.lp-how-wrap {
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 6px;
  border-radius: 28px;
  background: linear-gradient(90deg, #2a4bff 0%, #e83e8c 40%, #ff8c42 65%, #4ab8ff 100%);
  position: relative;
}
.lp-how {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: transparent;
  border-radius: 22px;
  overflow: hidden;
}
.lp-how-card { background: #ffffff; border-radius: 18px; }
.lp-how-card {
  position: relative;
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 360px;
}
.lp-how-card + .lp-how-card {
  border-left: none;
}
.lp-how-num {
  width: 36px;
  height: 36px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #0c0c0c;
}
.lp-how-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.18;
  color: #0c0c0c;
  letter-spacing: 0;
  margin: 0;
  min-height: calc(3 * 1.18em);
}
.lp-how-p {
  font-family: var(--font-body);
  color: #3d3d3d;
  line-height: 1.55;
  font-size: 0.95rem;
  margin: 0;
}
.lp-how-arrow {
  position: absolute;
  right: -23px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #0c0c0c;
}
.lp-how-card:last-child .lp-how-arrow { display: none; }

/* Zigzag variant: alternating dark cards (used on /leistungen/seo.html) */
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) {
  background: #0c0c0c;
}
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) .lp-how-num {
  background: rgba(250, 239, 112, 0.14);
  border-color: rgba(250, 239, 112, 0.4);
  color: #faef70;
}
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) .lp-how-h {
  color: #f5f5f5;
}
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) .lp-how-p {
  color: #b8b8b8;
}
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) .lp-how-arrow {
  background: #0c0c0c;
  border-color: #2a2a2a;
  color: #f5f5f5;
}
.lp-how-wrap--zigzag .lp-how-card:nth-child(even) .lp-how-visual {
  filter: invert(1) hue-rotate(180deg) brightness(0.95);
}
.lp-how-visual {
  margin-top: auto;
  padding-top: 16px;
  min-height: 100px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lp-how-visual svg,
.lp-how-visual img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
}

@media (max-width: 960px) {
  .lp-how { grid-template-columns: 1fr; }
  .lp-how-card {
    min-height: auto;
    padding: 28px 22px;
  }
  .lp-how-card + .lp-how-card {
    border-left: none;
    border-top: 1px solid #ededed;
  }
  .lp-how-arrow {
    right: 50%;
    top: auto;
    bottom: -20px;
    transform: translateX(50%) rotate(90deg);
  }
}

/* =========================================================
   Proof / Testimonials Grid (Hyros-Style)
   ========================================================= */
.lp-proof-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 112px;
}
.lp-proof-head {
  text-align: center;
  margin-bottom: 48px;
}
.lp-proof-kicker {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #2a4bff 0%, #2a4bff 45%, #8aa3ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.lp-proof-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  margin: 0;
}
.lp-proof-grid {
  column-count: 2;
  column-gap: 20px;
}
.lp-proof-card {
  break-inside: avoid;
  background: #efefef;
  border-radius: 20px;
  padding: 26px 28px;
  margin: 0 0 20px;
  display: block;
}
.lp-proof-stat,
.lp-proof-word {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0c0c0c;
  margin: 4px 0 6px;
}
.lp-proof-statlabel {
  font-size: 0.92rem;
  font-weight: 500;
  color: #4a4a4a;
  margin-bottom: 4px;
}
.lp-proof-hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 18px 0;
}
.lp-proof-text {
  font-size: 1.12rem;
  line-height: 1.55;
  color: #1a1a1a;
  margin: 0 0 4px;
}
.lp-proof-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.lp-proof-logo {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  background: #0c0c0c;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.lp-proof-logo img {
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.lp-proof-logo--plain img {
  filter: none;
  max-width: 92%;
  max-height: 92%;
}
.lp-proof-logo--invert img {
  filter: invert(1);
  max-width: 92%;
  max-height: 92%;
}
.lp-proof-logo--xl img {
  max-width: 125%;
  max-height: 125%;
}
.lp-proof-logo--sm img {
  max-width: 90%;
  max-height: 90%;
}
.lp-proof-logo--mono {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
}
.lp-proof-logo-mono {
  color: #fff;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
}
.lp-proof-name {
  font-weight: 600;
  font-size: 1.12rem;
  color: #0c0c0c;
  line-height: 1.2;
  margin-bottom: 4px;
}
.lp-proof-url {
  display: inline-block;
  font-size: 1rem;
  text-decoration: none;
  background: linear-gradient(90deg, #83cfe8 0%, #4a90c6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 760px) {
  .lp-proof-grid {
    column-count: 1;
  }
  .lp-proof-section {
    padding: 56px 20px 88px;
  }
  .lp-proof-card {
    padding: 22px 22px;
  }
}

/* =========================================================
   Big CTA Panel (Hyros-Style)
   ========================================================= */
.lp-ctabig {
  padding: 24px 24px 96px;
  max-width: 1280px;
  margin: 0 auto;
}
.lp-ctabig-panel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background-image: url("ctabig-bg.png");
  background-size: cover;
  background-position: center;
  background-color: #11272d;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-ctabig-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.35) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.25) 100%);
  pointer-events: none;
}
.lp-ctabig-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 88px 32px;
  max-width: 720px;
  margin: 0 auto;
}
.lp-ctabig-inner .lp-kicker { justify-content: center; }
.lp-ctabig-p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #3a3a3a;
  max-width: 560px;
  margin: 0 auto 28px;
}
.lp-ctabig-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.lp-ctabig-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 24px;
}
.lp-ctabig-sub {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  max-width: 520px;
  margin: 0 auto 34px;
}
.lp-ctabig-btn {
  display: inline-block;
  padding: 11px 20px;
  background: #ffffff;
  color: #0c0c0c;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.lp-ctabig-btn:hover {
  transform: translateY(-2px);
  background: #f7c437;
}

@media (max-width: 760px) {
  .lp-ctabig {
    padding: 12px 16px 72px;
  }
  .lp-ctabig-inner {
    padding: 64px 24px;
  }
  .lp-ctabig-panel {
    min-height: 360px;
  }
}

/* =========================================================
   Features Grid (Hyros-Style Use Cases)
   ========================================================= */
.lp-features {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 24px 120px;
}
.lp-features-head {
  text-align: center;
  margin-bottom: 56px;
}
.lp-features-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  margin: 0;
}
.lp-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.lp-features-grid > .lp-feature-card:nth-child(1) { order: 4; }
.lp-features-grid > .lp-feature-card:nth-child(2) { order: 5; }
.lp-features-grid > .lp-feature-card:nth-child(3) { order: 2; }
.lp-features-grid > .lp-feature-card:nth-child(4) { order: 3; }
.lp-features-grid > .lp-feature-card:nth-child(5) { order: 0; }
.lp-features-grid > .lp-feature-card:nth-child(6) { order: 1; }
.lp-feature-card {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 16px;
  padding: 28px 28px 26px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lp-feature-card:hover {
  border-color: #d5d5d5;
  transform: translateY(-2px);
}
.lp-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #ececec;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c0c0c;
  background: #fafafa;
}
.lp-feature-icon svg {
  width: 22px;
  height: 22px;
}
.lp-feature-body {
  min-width: 0;
}
.lp-feature-h {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0c0c0c;
  margin: 2px 0 8px;
  line-height: 1.25;
}
.lp-feature-p {
  font-size: 0.98rem;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0 0 18px;
}
.lp-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #2a4bff;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.lp-feature-link span {
  transition: transform 0.2s ease;
}
.lp-feature-link:hover span {
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .lp-features {
    padding: 16px 20px 88px;
  }
  .lp-features-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .lp-feature-card {
    padding: 22px 22px 20px;
  }
}

/* Mosaic variant: heterogenous grid with hero + accent cards (used on /leistungen/seo.html) */
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(1),
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(2),
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(3),
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(4),
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(5),
.lp-features--mosaic .lp-features-grid > .lp-feature-card:nth-child(6) {
  order: 0;
}
.lp-features--mosaic .lp-feature-card--hero {
  grid-column: 1 / -1;
  background: #0c0c0c;
  border-color: #1a1a1a;
  color: #f5f5f5;
  padding: 36px 36px 32px;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
.lp-features--mosaic .lp-feature-card--hero::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 239, 112, 0.18) 0%, rgba(250, 239, 112, 0) 70%);
  pointer-events: none;
}
.lp-features--mosaic .lp-feature-card--hero:hover {
  border-color: #2a2a2a;
  transform: translateY(-2px);
}
.lp-features--mosaic .lp-feature-card--hero .lp-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(250, 239, 112, 0.5);
  background: rgba(250, 239, 112, 0.12);
  color: #faef70;
}
.lp-features--mosaic .lp-feature-card--hero .lp-feature-icon svg {
  width: 30px;
  height: 30px;
}
.lp-features--mosaic .lp-feature-card--hero .lp-feature-h {
  font-size: 1.6rem;
  color: #f5f5f5;
}
.lp-features--mosaic .lp-feature-card--hero .lp-feature-p {
  font-size: 1.05rem;
  color: #b8b8b8;
  max-width: 62ch;
}
.lp-features--mosaic .lp-feature-card--hero .lp-feature-link {
  color: #faef70;
}
.lp-features--mosaic .lp-feature-card--accent {
  border-color: #0c0c0c;
  box-shadow: 0 3px 0 0 #faef70;
}
.lp-features--mosaic .lp-feature-card--accent .lp-feature-icon {
  background: #faef70;
  border-color: #e4d34d;
  color: #0c0c0c;
}
.lp-features--mosaic .lp-feature-card--accent:hover {
  border-color: #0c0c0c;
  box-shadow: 0 5px 0 0 #faef70;
}
@media (max-width: 760px) {
  .lp-features--mosaic .lp-feature-card--hero {
    grid-column: 1;
    padding: 26px 22px 22px;
    grid-template-columns: 52px 1fr;
  }
  .lp-features--mosaic .lp-feature-card--hero .lp-feature-icon {
    width: 52px;
    height: 52px;
  }
  .lp-features--mosaic .lp-feature-card--hero .lp-feature-h {
    font-size: 1.25rem;
  }
}

/* FAQ section follows features grid — white bg + tighter top spacing */
.lp-features + .lp-section--alt {
  background: #ffffff;
  padding-top: 16px;
}

/* Legal placeholders — visible marker for pre-launch content gaps */
.placeholder {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 2px;
  background: rgba(250, 239, 112, 0.35);
  border: 1px dashed rgba(178, 92, 26, 0.4);
  border-radius: 4px;
  color: #8a4912;
  font-size: 0.92em;
  font-style: italic;
}

/* Legal pages (Impressum, Datenschutz, AGB, Cookies) */
.lp-legal {
  padding: 24px 24px 140px;
  background: #ffffff;
}
.lp-legal-inner {
  max-width: 780px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.7;
  color: #1a1a1a;
}
.lp-legal-inner p {
  margin: 0 0 18px;
}
.lp-legal-inner a {
  color: #0c0c0c;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lp-legal-inner a:hover {
  color: #4a90c6;
}
.lp-legal-notice {
  background: rgba(250, 239, 112, 0.14);
  border: 1px solid rgba(250, 239, 112, 0.55);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 56px;
}
.lp-legal-notice p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4a3a10;
}
.lp-legal-notice-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a4912;
  font-weight: 600;
  margin-bottom: 10px;
}
.lp-legal-highlight {
  background: #f6f3e2;
  border-left: 3px solid #d4b84f;
  border-radius: 4px;
  padding: 20px 24px;
  margin: 16px 0 28px;
}
.lp-legal-highlight p {
  margin: 0 0 10px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #2a2a2a;
}
.lp-legal-highlight p:last-child {
  margin-bottom: 0;
}
.lp-legal-h {
  font-family: "Source Serif 4", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  color: #0c0c0c;
  margin: 52px 0 14px;
  letter-spacing: -0.01em;
}
.lp-legal-h:first-of-type {
  margin-top: 0;
}
.lp-legal-list {
  margin: 0 0 18px;
  padding-left: 22px;
}
.lp-legal-list li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.lp-legal-h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #0c0c0c;
  margin: 32px 0 10px;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Hero category chips */
.lp-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.lp-hero-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.lp-hero-chip--necessary {
  background: #e8f2e9;
  color: #1f5a2a;
  border-color: #b8d6bc;
}
.lp-hero-chip--analytics {
  background: #e7eefc;
  color: #1f3a7a;
  border-color: #b8c6e8;
}
.lp-hero-chip--marketing {
  background: #fcf0e6;
  color: #7a4016;
  border-color: #e8c8a8;
}

/* Category tag inside h3 */
.lp-cookie-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.lp-cookie-cat--necessary {
  background: #e8f2e9;
  color: #1f5a2a;
  border-color: #b8d6bc;
}
.lp-cookie-cat--analytics {
  background: #e7eefc;
  color: #1f3a7a;
  border-color: #b8c6e8;
}
.lp-cookie-cat--marketing {
  background: #fcf0e6;
  color: #7a4016;
  border-color: #e8c8a8;
}

/* Summary "In 3 Sätzen" */
.lp-legal-summary {
  background: #f5f3ef;
  border: 1px solid #e6e1d6;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 32px;
}
.lp-legal-summary p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: #1a1a1a;
}
.lp-legal-summary-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Table of contents */
.lp-legal-toc {
  background: #ffffff;
  border: 1px solid #e6e1d6;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 56px;
}
.lp-legal-toc-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 600;
  margin-bottom: 12px;
}
.lp-legal-toc ol {
  margin: 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 32px;
  font-size: 0.95rem;
}
.lp-legal-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
}
.lp-legal-toc a {
  color: #0c0c0c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.lp-legal-toc a:hover {
  color: #4a90c6;
  border-bottom-color: #4a90c6;
}

/* Cookie inventory tables */
.lp-cookie-table-wrap {
  overflow-x: auto;
  margin: 14px 0 28px;
  border: 1px solid #e6e1d6;
  border-radius: 12px;
  background: #ffffff;
}
.lp-cookie-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.55;
}
.lp-cookie-table thead th {
  background: #f5f3ef;
  color: #0c0c0c;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid #e6e1d6;
  white-space: nowrap;
}
.lp-cookie-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f0ece3;
  color: #1a1a1a;
  vertical-align: top;
}
.lp-cookie-table tbody tr:last-child td {
  border-bottom: 0;
}
.lp-cookie-table code {
  background: #f5f3ef;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  color: #0c0c0c;
  white-space: nowrap;
}

/* FAQ accordion */
.lp-legal-faq {
  margin: 14px 0 28px;
  border: 1px solid #e6e1d6;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.lp-legal-faq-item {
  border-bottom: 1px solid #f0ece3;
}
.lp-legal-faq-item:last-child {
  border-bottom: 0;
}
.lp-legal-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 24px;
  font-weight: 600;
  font-size: 1rem;
  color: #0c0c0c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background 0.15s ease;
}
.lp-legal-faq-item > summary::-webkit-details-marker {
  display: none;
}
.lp-legal-faq-item > summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 300;
  color: #4a4a4a;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.lp-legal-faq-item[open] > summary::after {
  content: "−";
}
.lp-legal-faq-item:hover > summary {
  background: #faf8f4;
}
.lp-legal-faq-item > p {
  margin: 0;
  padding: 0 24px 20px;
  color: #1a1a1a;
  font-size: 0.97rem;
  line-height: 1.65;
}

/* Anchor-link scroll offset */
.lp-legal [id] {
  scroll-margin-top: 100px;
}

@media (max-width: 720px) {
  .lp-legal-h3 {
    font-size: 1.08rem;
    margin: 26px 0 10px;
  }
  .lp-legal-summary,
  .lp-legal-toc {
    padding: 18px 20px;
  }
  .lp-legal-toc ol {
    columns: 1;
  }
  .lp-cookie-table {
    font-size: 0.86rem;
  }
  .lp-cookie-table thead th,
  .lp-cookie-table tbody td {
    padding: 10px 12px;
  }
  .lp-legal-faq-item > summary {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  .lp-legal-faq-item > p {
    padding: 0 20px 16px;
  }
}
@media (max-width: 720px) {
  .lp-legal {
    padding: 16px 20px 100px;
  }
  .lp-legal-h {
    font-size: 1.35rem;
    margin: 40px 0 12px;
  }
}

/* ==========================================================================
   PRICING PAGE (preise.html)
   ========================================================================== */

.lp-section-sub {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 16px 0 0;
}

.lp-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.lp-pricing-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
}

.lp-pricing-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 20px;
  padding: 28px 24px 24px;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.lp-pricing-card:hover {
  border-color: #0c0c0c;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.18);
}
.lp-section--alt .lp-pricing-card {
  background: #ffffff;
}

.lp-pricing-h {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: #0c0c0c;
  margin: 0 0 10px;
  letter-spacing: 0;
}

.lp-pricing-lead {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #5a5a5a;
  margin: 0 0 18px;
}

.lp-pricing-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.lp-pricing-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: #2a2a2a;
}
.lp-pricing-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 8px;
  border-left: 2px solid #0c0c0c;
  border-bottom: 2px solid #0c0c0c;
  transform: rotate(-45deg);
}

.lp-pricing-price {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b6b6b;
  padding: 10px 0;
  margin-bottom: 14px;
  border-top: 1px solid #ededed;
  text-align: center;
}

.lp-pricing-cta {
  width: 100%;
}

.lp-pricing-card--compact {
  padding: 24px;
}
.lp-pricing-card--compact .lp-pricing-lead {
  margin-bottom: 18px;
  flex: 1;
}

.lp-bundle-note {
  max-width: 880px;
  margin: 28px auto 0;
  padding: 18px 24px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #c8c8c8;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #2a2a2a;
  line-height: 1.5;
}
.lp-section--alt .lp-bundle-note {
  background: #ffffff;
}
.lp-bundle-note strong {
  font-weight: 600;
  color: #0c0c0c;
}
.lp-bundle-note a {
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 6px;
  white-space: nowrap;
}
.lp-bundle-note a:hover {
  text-decoration: none;
}

.lp-btn--lg {
  padding: 16px 30px;
  font-size: 1rem;
}

@media (max-width: 1080px) {
  .lp-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .lp-pricing-grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .lp-pricing-grid,
  .lp-pricing-grid--two {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lp-pricing-card {
    padding: 24px 20px 20px;
  }
  .lp-bundle-note {
    margin: 22px 16px 0;
  }
}

/* ==========================================================================
   Founder spotlight — dark full-width section with portrait + bio
   ========================================================================== */
.lp-founder {
  background: #0c0c0c;
  color: #f5f5f5;
  padding: 96px 0 120px;
}
.lp-founder-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.lp-founder-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-founder-photo-placeholder {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #2a2a2a;
  font-family: "Inter", sans-serif;
}
.lp-founder-content {
  padding-top: 8px;
}
.lp-founder-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #ffffff;
}
.lp-founder-role {
  font-size: 1.25rem;
  color: #a8a8a8;
  font-weight: 400;
  margin: 0 0 40px;
  letter-spacing: -0.005em;
}
.lp-founder-section-h {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 32px 0 18px;
  letter-spacing: -0.005em;
}
.lp-founder-section-h:first-of-type {
  margin-top: 0;
}
.lp-founder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.lp-founder-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 18px;
  line-height: 1.55;
  color: #d4d4d4;
  font-size: 1rem;
}
.lp-founder-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #faef70;
}

/* Management team — dark section with 3-card grid */
.lp-mgmt {
  background: #0c0c0c;
  color: #f5f5f5;
  padding: 32px 0 120px;
}
.lp-mgmt-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
.lp-mgmt-h {
  text-align: center;
  font-family: "Source Serif 4", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 56px;
}
.lp-mgmt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-mgmt-card {
  background: #161616;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
}
.lp-mgmt-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1e1e1e;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-mgmt-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lp-mgmt-photo-placeholder {
  font-size: 3rem;
  font-weight: 600;
  color: #2a2a2a;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.02em;
}
.lp-mgmt-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-variation-settings: "opsz" 60;
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.lp-mgmt-role {
  font-size: 0.95rem;
  color: #a8a8a8;
  margin: 0 0 16px;
}
.lp-mgmt-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  color: #a8a8a8;
  transition: color 0.15s ease;
}
.lp-mgmt-linkedin:hover {
  color: #ffffff;
}
.lp-mgmt-linkedin svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .lp-founder {
    padding: 64px 0 80px;
  }
  .lp-founder-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 0 24px;
  }
  .lp-founder-photo {
    max-width: 480px;
    margin: 0 auto;
  }
  .lp-mgmt {
    padding: 16px 0 80px;
  }
  .lp-mgmt-inner {
    padding: 0 24px;
  }
  .lp-mgmt-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .lp-mgmt-h {
    margin-bottom: 36px;
  }
}

/* =========================================================
   BLOG — lp-blog-* card grid + newsletter input (used on /blog.html)
   ========================================================= */
.lp-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.lp-blog-card {
  background: #ffffff;
  border: 1px solid #ececea;
  border-radius: 18px;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.lp-blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(12, 12, 12, 0.08);
  border-color: #dcdcd8;
}
.lp-blog-card--feature {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.lp-blog-card--feature .lp-blog-card-link {
  display: contents;
}
.lp-blog-card--feature .lp-blog-card-visual {
  aspect-ratio: auto;
  height: 100%;
  min-height: 260px;
}
.lp-blog-card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.lp-blog-card-visual {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #f4f4f2;
  overflow: hidden;
}
.lp-blog-card-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}
.lp-blog-card-body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.lp-blog-card--feature .lp-blog-card-body {
  padding: 40px 44px;
  justify-content: center;
}
.lp-blog-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #8a8a8a;
  letter-spacing: 0.01em;
}
.lp-blog-tag {
  display: inline-block;
  padding: 4px 10px;
  background: #faef70;
  color: #0c0c0c;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}
.lp-blog-date {
  color: #6b6b6b;
  font-weight: 500;
}
.lp-blog-read {
  color: #a0a0a0;
}
.lp-blog-card-h {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif;
  font-variation-settings: 'opsz' 48;
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0c0c0c;
  margin: 4px 0 2px;
  text-wrap: balance;
}
.lp-blog-card--feature .lp-blog-card-h {
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  line-height: 1.18;
}
.lp-blog-card-p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #5a5a5a;
  margin: 0;
}
.lp-blog-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2a4bff;
  letter-spacing: 0.005em;
}
.lp-blog-card-link:hover .lp-blog-card-cta {
  color: #0c0c0c;
}

/* Newsletter form inside lp-dark-wrap */
.lp-dark-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin: 40px auto 12px;
  padding: 0 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-dark-input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-dark-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.lp-dark-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.12);
}
.lp-dark-form .lp-btn { flex: 0 0 auto; }
.lp-dark-note {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 4px 0 0;
}

@media (max-width: 960px) {
  .lp-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-blog-card--feature { grid-column: span 2; grid-template-columns: 1fr; }
  .lp-blog-card--feature .lp-blog-card-visual { min-height: 220px; aspect-ratio: 16 / 9; }
  .lp-blog-card--feature .lp-blog-card-body { padding: 28px 28px 32px; }
}
@media (max-width: 640px) {
  .lp-blog-grid { grid-template-columns: 1fr; gap: 18px; }
  .lp-blog-card--feature { grid-column: span 1; }
  .lp-blog-card-body { padding: 20px 22px 24px; }
  .lp-dark-form { margin-top: 32px; }
}

/* --- Blog Article (single post) --- */
.lp-article-hero {
  padding: 72px 0 40px;
  background: #f4f4f2;
}
.lp-article-hero .container { max-width: 760px; }
.lp-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.875rem;
  color: rgba(12, 12, 12, 0.6);
}
.lp-article-meta .lp-blog-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #faef70;
  color: #0c0c0c;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lp-article-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(12, 12, 12, 0.3);
}
.lp-article-h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: #0c0c0c;
  text-wrap: balance;
}
.lp-article-lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(12, 12, 12, 0.75);
  margin: 0;
}
.lp-article-visual {
  max-width: 960px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.lp-article-visual-inner {
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0c0c0c;
}
.lp-article-visual-inner svg { width: 100%; height: 100%; display: block; }
.lp-article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px 64px;
  color: #1a1a1a;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.lp-article-body > p,
.lp-article-body > ul,
.lp-article-body > ol,
.lp-article-body > blockquote,
.lp-article-body > .lp-article-callout {
  margin: 0 0 20px;
}
.lp-article-body h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 48px 0 16px;
  color: #0c0c0c;
  text-wrap: balance;
}
.lp-article-body h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 32px 0 10px;
  color: #0c0c0c;
}
.lp-article-body ul,
.lp-article-body ol {
  padding-left: 24px;
}
.lp-article-body li { margin-bottom: 8px; }
.lp-article-body a {
  color: #2a4bff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.lp-article-body a:hover { color: #0c0c0c; }
.lp-article-body blockquote {
  border-left: 3px solid #faef70;
  padding: 4px 0 4px 20px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.45;
  color: #0c0c0c;
  font-style: italic;
}
.lp-article-callout {
  background: #fafaf8;
  border: 1px solid #ececea;
  border-radius: 14px;
  padding: 20px 22px;
}
.lp-article-callout h4 {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2a4bff;
}
.lp-article-callout p:last-child { margin: 0; }
.lp-article-cta {
  margin: 48px 0 0;
  padding: 32px;
  background: #0c0c0c;
  color: #fafafa;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-article-cta h3 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  color: #fafafa;
}
.lp-article-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  line-height: 1.6;
}
.lp-article-cta .lp-btn--primary {
  align-self: flex-start;
  background: #faef70;
  color: #0c0c0c;
}
.lp-article-cta .lp-btn--primary:hover { background: #fff; }
.lp-article-nav {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 24px;
  border-top: 1px solid #ececea;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9375rem;
}
.lp-article-nav a {
  color: #2a4bff;
  text-decoration: none;
  font-weight: 500;
}
.lp-article-nav a:hover { color: #0c0c0c; }
.lp-article-related {
  background: #f4f4f2;
  padding: 72px 0;
}
.lp-article-related .container { max-width: 1200px; }
.lp-article-related h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.625rem;
  margin: 0 0 32px;
  font-weight: 600;
  color: #0c0c0c;
}
.lp-article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 960px) {
  .lp-article-hero { padding: 48px 0 32px; }
  .lp-article-body { font-size: 1rem; padding: 0 20px 48px; }
  .lp-article-body h2 { font-size: 1.5rem; margin-top: 36px; }
  .lp-article-related-grid { grid-template-columns: 1fr; }
  .lp-article-cta { padding: 24px; }
}
@media (max-width: 640px) {
  .lp-article-hero { padding: 36px 0 24px; }
  .lp-article-visual { padding: 0 16px; margin-bottom: 32px; }
  .lp-article-body { padding: 0 16px 40px; }
}


/* --- TL;DR / Auf einen Blick (GEO + skimmers) --- */
.lp-article-tldr {
  display: block;
  margin: 0 0 28px;
  padding: 20px 24px;
  background: #faef70;
  border-radius: 14px;
  border: 1px solid rgba(12, 12, 12, 0.08);
}
.lp-article-tldr h2 {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #0c0c0c;
}
.lp-article-tldr ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.lp-article-tldr li {
  position: relative;
  padding-left: 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #0c0c0c;
}
.lp-article-tldr li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: #2a4bff;
}

/* --- Author byline (E-E-A-T signal) --- */
.lp-article-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid #ececea;
  font-size: 0.875rem;
  color: rgba(12, 12, 12, 0.7);
}
.lp-article-author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0c0c0c;
  color: #faef70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700;
  font-size: 0.9375rem;
  flex-shrink: 0;
}
.lp-article-author-name {
  font-weight: 600;
  color: #0c0c0c;
}
.lp-article-author-role {
  color: rgba(12, 12, 12, 0.55);
}

/* --- Breadcrumbs (SEO + UX) --- */
.lp-breadcrumb {
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 0 24px;
  font-size: 0.8125rem;
  color: rgba(12, 12, 12, 0.55);
}
.lp-breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.lp-breadcrumb a {
  color: rgba(12, 12, 12, 0.65);
  text-decoration: none;
}
.lp-breadcrumb a:hover { color: #2a4bff; text-decoration: underline; }
.lp-breadcrumb li[aria-current="page"] { color: #0c0c0c; font-weight: 500; }
.lp-breadcrumb .sep { color: rgba(12, 12, 12, 0.3); }

@media (max-width: 640px) {
  .lp-article-h1 { font-size: clamp(1.625rem, 7vw, 2.25rem); }
  .lp-article-lead { font-size: 1rem; }
  .lp-article-meta { font-size: 0.8125rem; gap: 8px; }
  .lp-article-cta { padding: 22px 20px; }
  .lp-article-cta .lp-btn--primary { min-height: 44px; display: inline-flex; align-items: center; }
  .lp-article-nav { flex-direction: column; gap: 12px; padding: 20px 16px; margin-top: 40px; }
  .lp-article-nav a { display: inline-flex; min-height: 44px; align-items: center; }
  .lp-article-tldr { padding: 16px 18px; margin-bottom: 20px; }
  .lp-article-tldr li { font-size: 0.875rem; }
  .lp-breadcrumb { padding: 0 16px; }
}


/* =========================================================
   Hyros-Style Interactive Product Configurator (preise.html)
   ========================================================= */
.lp-hyros {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px 12px 72px;
}
.lp-hyros-panel {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: calc(100vh - 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 38%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(270deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 22%),
    linear-gradient(180deg, rgba(12, 12, 12, 0.25) 0%, rgba(12, 12, 12, 0.55) 100%),
    url('hyros-bg.png') center/cover no-repeat,
    #0c0c0c;
  padding: 64px 32px 56px;
}
.lp-hyros-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(247, 196, 55, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(250, 239, 112, 0.08) 0%, transparent 60%);
  pointer-events: none;
}
.lp-hyros-inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  transform: translateY(-20px);
}
.lp-hyros-toggle {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.lp-hyros-toggle-btn {
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  transition: color 180ms;
  letter-spacing: -0.005em;
}
.lp-hyros-toggle-btn.is-active { color: #ffffff; }
.lp-hyros-toggle-btn:hover { color: #ffffff; }
.lp-hyros-switch {
  position: relative;
  width: 56px;
  height: 28px;
  border-radius: 999px;
  background-color: #0e0e14;
  background-image: url('toggle-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.lp-hyros-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 280ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.lp-hyros-switch[data-state="seo"] .lp-hyros-switch-knob {
  transform: translateX(28px);
}
.lp-hyros-switch[data-state="seo"] {
  background-image: url('toggle-bg-seo.png');
}
.lp-hyros-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.3vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0 0 14px;
}
.lp-hyros-sub {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
  max-width: 560px;
  margin: 0 auto 72px;
}
.lp-hyros-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  margin-bottom: 36px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-hyros-tab {
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: background 180ms, color 180ms, border-color 180ms;
  letter-spacing: -0.005em;
}
.lp-hyros-tab:hover { color: #ffffff; }
.lp-hyros-tab.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}
.lp-hyros-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #121212;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  overflow: hidden;
  text-align: left;
}
.lp-hyros-card-left,
.lp-hyros-card-right { padding: 52px 40px; }
.lp-hyros-card-left { border-right: 1px solid rgba(255, 255, 255, 0.06); }
.lp-hyros-card-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}
.lp-hyros-card-right-top { display: flex; flex-direction: column; }
.lp-hyros-card-right-bottom { display: flex; flex-direction: column; }
.lp-hyros-note {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  margin: 18px 0 0;
}
.lp-hyros-card-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 44;
  font-weight: 400;
  font-size: clamp(1.7rem, 2.9vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0 0 22px;
}
.lp-hyros-rule { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 18px 0; }
.lp-hyros-rule--light { background: rgba(255, 255, 255, 0.06); }
.lp-hyros-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lp-hyros-includes { list-style: none; margin: 0; padding: 0; }
.lp-hyros-includes li {
  position: relative;
  padding-left: 24px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.lp-hyros-includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 6px;
  border-left: 2px solid #faef70;
  border-bottom: 2px solid #faef70;
  transform: rotate(-45deg);
}
.lp-hyros-meta { font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.lp-hyros-pitch-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 40;
  font-weight: 400;
  font-size: 1.4rem;
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.008em;
  line-height: 1.25;
}
.lp-hyros-pitch { font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.8); margin: 0 0 4px; }
.lp-hyros-price-label { font-size: 0.85rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; letter-spacing: -0.003em; }
.lp-hyros-price { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }
.lp-hyros-price-value {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 48;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: #ffffff;
  letter-spacing: -0.012em;
  line-height: 1.05;
}
.lp-hyros-price-unit { font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); }
.lp-hyros-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 8px 18px;
  background: #ffffff;
  color: #0c0c0c;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 180ms, background 180ms;
}
.lp-hyros-cta:hover { background: #faef70; transform: translateY(-1px); }

/* LIGHT THEME — aktiviert, wenn data-product="seo" */
.lp-hyros[data-product="seo"] .lp-hyros-panel {
  background:
    linear-gradient(180deg, #ffffff 0%, #ffffff 62%, rgba(255, 255, 255, 0.3) 88%, rgba(255, 255, 255, 0) 100%),
    url('hyros-bg-seo.png') center bottom/cover no-repeat,
    #ffffff;
}
.lp-hyros[data-product="seo"] .lp-hyros-panel::before {
  background: none;
}
.lp-hyros[data-product="seo"] .lp-hyros-h,
.lp-hyros[data-product="seo"] .lp-hyros-sub,
.lp-hyros[data-product="seo"] .lp-hyros-toggle-btn,
.lp-hyros[data-product="seo"] .lp-hyros-tab,
.lp-hyros[data-product="seo"] .lp-hyros-card-h,
.lp-hyros[data-product="seo"] .lp-hyros-label,
.lp-hyros[data-product="seo"] .lp-hyros-includes li,
.lp-hyros[data-product="seo"] .lp-hyros-meta,
.lp-hyros[data-product="seo"] .lp-hyros-pitch-h,
.lp-hyros[data-product="seo"] .lp-hyros-pitch,
.lp-hyros[data-product="seo"] .lp-hyros-note,
.lp-hyros[data-product="seo"] .lp-hyros-price-label,
.lp-hyros[data-product="seo"] .lp-hyros-price-value,
.lp-hyros[data-product="seo"] .lp-hyros-price-unit {
  color: #0c0c0c;
}
.lp-hyros[data-product="seo"] .lp-hyros-sub,
.lp-hyros[data-product="seo"] .lp-hyros-meta,
.lp-hyros[data-product="seo"] .lp-hyros-pitch,
.lp-hyros[data-product="seo"] .lp-hyros-note,
.lp-hyros[data-product="seo"] .lp-hyros-price-label,
.lp-hyros[data-product="seo"] .lp-hyros-price-unit,
.lp-hyros[data-product="seo"] .lp-hyros-toggle-btn {
  color: rgba(12, 12, 12, 0.6);
}
.lp-hyros[data-product="seo"] .lp-hyros-toggle-btn.is-active,
.lp-hyros[data-product="seo"] .lp-hyros-tab.is-active {
  color: #0c0c0c;
}
.lp-hyros[data-product="seo"] .lp-hyros-tab.is-active {
  background: rgba(12, 12, 12, 0.08);
}
.lp-hyros[data-product="seo"] .lp-hyros-card {
  background: #f5f4f1;
  border: 1px solid rgba(12, 12, 12, 0.06);
}
.lp-hyros[data-product="seo"] .lp-hyros-card-left {
  border-right-color: rgba(12, 12, 12, 0.08);
}
.lp-hyros[data-product="seo"] .lp-hyros-rule {
  background: rgba(12, 12, 12, 0.1);
}
.lp-hyros[data-product="seo"] .lp-hyros-rule--light {
  background: rgba(12, 12, 12, 0.06);
}
.lp-hyros[data-product="seo"] .lp-hyros-includes li::before {
  border-left-color: #0c0c0c;
  border-bottom-color: #0c0c0c;
}
.lp-hyros[data-product="seo"] .lp-hyros-cta {
  background: #0c0c0c;
  color: #ffffff;
}
.lp-hyros[data-product="seo"] .lp-hyros-cta:hover {
  background: #1f1f1f;
}

@media (max-width: 860px) {
  .lp-hyros { padding: 12px 16px 56px; }
  .lp-hyros-panel { padding: 48px 20px 40px; border-radius: 18px; }
  .lp-hyros-card { grid-template-columns: 1fr; }
  .lp-hyros-card-left { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .lp-hyros-card-left,
  .lp-hyros-card-right { padding: 28px 24px; }
  .lp-hyros-tabs { width: 100%; justify-content: stretch; }
  .lp-hyros-tab { flex: 1; padding: 9px 10px; font-size: 0.88rem; }
}

/* ZUSÄTZLICHE SETUPS — Enterprise + White-Label (nur SEO-Modus) */
.lp-add {
  display: none;
  background: transparent;
  padding: 72px 24px 16px;
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}
.lp-hyros[data-product="seo"] .lp-add {
  display: block;
}
.lp-hyros[data-product="seo"] ~ .lp-wi {
  display: none;
}
.lp-add-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 52;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  margin: 0 auto 48px;
  max-width: 720px;
}
.lp-add-stack {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}
.lp-add-card {
  background: #f5f4f1;
  border-radius: 18px;
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.lp-add-left {
  display: flex;
  flex-direction: column;
  padding: 10px 8px 10px 16px;
}
.lp-add-right {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}
.lp-add-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(12, 12, 12, 0.1);
  font-size: 0.84rem;
  color: #0c0c0c;
  font-weight: 500;
  margin-bottom: 10px;
}
.lp-add-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  margin: 0 0 10px;
}
.lp-add-sub {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(12, 12, 12, 0.7);
  margin: 0 0 10px;
}
.lp-add-bonus {
  font-size: 0.92rem;
  color: rgba(12, 12, 12, 0.75);
  margin: 0 0 12px;
}
.lp-add-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 8px 16px;
  background: #0c0c0c;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  margin-top: auto;
  transition: background 200ms ease, transform 150ms ease;
}
.lp-add-cta:hover { background: #1f1f1f; transform: translateY(-1px); }
.lp-add-right-h {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 10px;
}
.lp-add-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.lp-add-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(12, 12, 12, 0.78);
  margin-bottom: 6px;
}
.lp-add-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: rgba(12, 12, 12, 0.45);
}
.lp-add-learn {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0c0c0c;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: auto;
}
@media (max-width: 860px) {
  .lp-add { padding: 48px 16px 32px; }
  .lp-add-card { grid-template-columns: 1fr; padding: 16px; }
  .lp-add-left { padding: 12px; }
  .lp-add-right { padding: 20px; }
}

/* IN JEDEM WEBSITE-PAKET ENTHALTEN */
.lp-wi {
  background: #ffffff;
  padding: 64px 24px;
}
.lp-wi-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
  padding: 0 48px;
}
.lp-wi-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 48;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  margin: 0 0 20px;
}
.lp-wi-sub {
  font-size: 1.05rem;
  font-weight: 600;
  color: #0c0c0c;
  margin: 0 0 20px;
  letter-spacing: -0.005em;
}
.lp-wi-p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(12, 12, 12, 0.72);
  margin: 0 0 24px;
  max-width: 440px;
}
.lp-wi-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: #0c0c0c;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 180ms, background 180ms;
}
.lp-wi-cta:hover { background: #1f1f1f; transform: translateY(-1px); }
.lp-wi-right {
  padding-left: 0;
}
.lp-wi-label {
  font-size: 1rem;
  font-weight: 600;
  color: #0c0c0c;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.lp-wi-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lp-wi-list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(12, 12, 12, 0.82);
  margin-bottom: 10px;
}
.lp-wi-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: rgba(12, 12, 12, 0.55);
}
@media (max-width: 860px) {
  .lp-wi { padding: 56px 20px; }
  .lp-wi-inner { grid-template-columns: 1fr; gap: 48px; padding: 0; }
  .lp-wi-right { padding-top: 0; }
}

/* TESTIMONIALS / REFERENZEN */
.lp-ts {
  background: #ffffff;
  padding: 56px 24px 40px;
  text-align: center;
}
.lp-ts-brand {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: #efece7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
  flex-shrink: 0;
}
.lp-ts-brand img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.lp-ts-brand--dark {
  background: #0c0c0c;
}
.lp-ts-brand--dark img {
  filter: brightness(0) invert(1);
}
.lp-ts-brand--inv img {
  filter: invert(1);
  max-width: 72%;
  max-height: 72%;
}
.lp-ts-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 52;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  margin: 0 auto 40px;
  max-width: 720px;
}
.lp-ts-row {
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
  text-align: left;
}
.lp-ts-card {
  background: #f5f4f1;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.lp-ts-card--img { gap: 8px; }
.lp-ts-card--wide {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  padding: 24px;
}
.lp-ts-card--metric { padding: 24px; }
.lp-ts-img {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(135deg, #cfc9bd 0%, #a89f90 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: -0.005em;
}
.lp-ts-img--sm {
  aspect-ratio: 1 / 1;
  width: 100%;
  margin-bottom: 12px;
}
.lp-ts-img-label { opacity: 0.85; }
.lp-ts-name {
  font-size: 0.98rem;
  font-weight: 600;
  color: #0c0c0c;
  letter-spacing: -0.005em;
}
.lp-ts-role {
  font-size: 0.92rem;
  color: rgba(12, 12, 12, 0.6);
  margin-top: 2px;
}
.lp-ts-label {
  font-size: 0.92rem;
  color: rgba(12, 12, 12, 0.55);
  margin-bottom: 10px;
  font-weight: 500;
}
.lp-ts-quote-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 40;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: #0c0c0c;
  margin: 0 0 14px;
}
.lp-ts-rule {
  height: 1px;
  background: rgba(12, 12, 12, 0.1);
  margin: 10px 0;
}
.lp-ts-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(12, 12, 12, 0.75);
  margin: 0;
}
.lp-ts-wide-left { display: flex; flex-direction: column; }
.lp-ts-wide-right { display: flex; flex-direction: column; }
.lp-ts-link {
  font-size: 0.9rem;
  text-decoration: none;
  margin-top: 2px;
  pointer-events: none;
  cursor: default;
  background: linear-gradient(90deg, #22d3ee 0%, #1e3a8a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  width: fit-content;
}
.lp-ts-link:hover { text-decoration: none; }
.lp-ts-metric {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #0c0c0c;
  margin: 0 0 18px;
}
@media (max-width: 960px) {
  .lp-ts { padding: 64px 16px 32px; }
  .lp-ts-row { grid-template-columns: 1fr; gap: 16px; }
  .lp-ts-card--wide { grid-template-columns: 1fr; gap: 24px; }
  .lp-ts-img--sm { width: 120px; }
}

/* WARUM ERSTGESPRÄCH — dunkler Panel mit Paint-BG */
.lp-why {
  background: #ffffff;
  padding: 0 24px 96px;
}
.lp-why-panel {
  max-width: 1080px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 100%),
    url('hyros-bg.png') center 70%/170% no-repeat,
    #0c0c0c;
  padding: 96px 32px;
  text-align: center;
}
.lp-why-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.lp-why-h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 48;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: #ffffff;
  margin: 0 0 20px;
}
.lp-why-p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 32px;
}
.lp-why-cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: #ffffff;
  color: #0c0c0c;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 180ms, background 180ms;
}
.lp-why-cta:hover { background: #faef70; transform: translateY(-1px); }
@media (max-width: 860px) {
  .lp-why { padding: 0 16px 64px; }
  .lp-why-panel { padding: 64px 24px; border-radius: 18px; }
}

/* ============================================================
   BRAND-KIT Dashboard (Branding & Design Preview)
   ============================================================ */
.lp-bk-row { display: grid; gap: 14px; margin-top: 14px; }
.lp-bk-row--hero { grid-template-columns: 1.15fr 1fr; }
.lp-bk-row:not(.lp-bk-row--hero) { grid-template-columns: 1fr 1fr; }

.lp-bk-panel {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
}
.lp-bk-panel--full { margin-top: 14px; }

.lp-bk-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}
.lp-bk-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: #0c0c0c;
  letter-spacing: -0.01em;
}
.lp-bk-panel-meta {
  font-size: 11px;
  color: #8a8a8a;
  font-variant-numeric: tabular-nums;
}

/* Logo-Stage */
.lp-bk-logo-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.lp-bk-logo-card {
  background:
    linear-gradient(#fafafa, #fafafa) padding-box,
    #fafafa;
  background-image:
    linear-gradient(to right, #ececec 1px, transparent 1px),
    linear-gradient(to bottom, #ececec 1px, transparent 1px);
  background-size: 16px 16px;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 20px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 128px;
  gap: 14px;
}
.lp-bk-logo-card--primary {
  background: #ffffff;
  background-image: none;
  border-style: dashed;
  border-color: #d8d8d8;
}
.lp-bk-logo-card--dark {
  background: #0c0c0c;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  border-color: #0c0c0c;
}
.lp-bk-logo-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-bk-logo-solo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.lp-bk-logo-mark {
  width: 22px;
  height: 22px;
  background: #0c0c0c;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.lp-bk-logo-mark--lg { width: 42px; height: 42px; }
.lp-bk-logo-dot {
  width: 8px;
  height: 8px;
  background: #faef70;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  right: 3px;
}
.lp-bk-logo-mark--lg .lp-bk-logo-dot { width: 14px; height: 14px; top: 5px; right: 5px; }
.lp-bk-logo-wordmark {
  font-size: 15px;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.01em;
}
.lp-bk-logo-monogram {
  font-size: 22px;
  font-weight: 700;
  color: #faef70;
  letter-spacing: -0.02em;
}
.lp-bk-logo-label {
  font-size: 10px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.lp-bk-logo-card--dark .lp-bk-logo-label { color: rgba(255,255,255,0.55); }

/* Type Specimen */
.lp-bk-type-aa {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0 18px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 14px;
}
.lp-bk-type-aa-glyph {
  font-size: 68px;
  line-height: 1;
  font-weight: 700;
  color: #0c0c0c;
  letter-spacing: -0.03em;
}
.lp-bk-type-aa-meta { display: flex; flex-direction: column; gap: 8px; }
.lp-bk-type-aa-family {
  font-size: 13px;
  font-weight: 600;
  color: #0c0c0c;
}
.lp-bk-type-aa-weights { display: flex; gap: 4px; }
.lp-bk-type-aa-chip {
  font-size: 10px;
  font-weight: 600;
  color: #8a8a8a;
  background: #f4f4f2;
  padding: 3px 7px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.lp-bk-type-aa-chip--active {
  background: #0c0c0c;
  color: #faef70;
}
.lp-bk-type-scale { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lp-bk-type-line {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  gap: 12px;
}
.lp-bk-type-label {
  font-size: 10px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.lp-bk-type-sample { color: #0c0c0c; letter-spacing: -0.01em; }
.lp-bk-type-sample--h1 { font-size: 22px; font-weight: 700; line-height: 1.2; }
.lp-bk-type-sample--h2 { font-size: 16px; font-weight: 600; line-height: 1.3; }
.lp-bk-type-sample--body { font-size: 12.5px; font-weight: 400; color: #4a4a4a; line-height: 1.5; }

/* Color Swatches */
.lp-bk-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.lp-bk-swatch {
  border-radius: 10px;
  padding: 16px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 110px;
  position: relative;
}
.lp-bk-swatch-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 24px;
}
.lp-bk-swatch-name {
  font-size: 13px;
  font-weight: 600;
}
.lp-bk-swatch-hex {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.lp-bk-swatch-wcag {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.18);
  letter-spacing: 0.04em;
}
.lp-bk-swatch[style*="#FAFAF7"] .lp-bk-swatch-wcag { background: rgba(12,12,12,0.08); }
.lp-bk-swatch--accent .lp-bk-swatch-wcag { background: rgba(12,12,12,0.12); }

/* Components */
.lp-bk-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px dashed #f0f0f0;
}
.lp-bk-comp-row:last-child { border-bottom: none; }
.lp-bk-comp-label {
  width: 64px;
  font-size: 10px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.lp-bk-comp-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
.lp-bk-comp-btn--primary { background: #0c0c0c; color: #ffffff; }
.lp-bk-comp-btn--accent { background: #faef70; color: #0c0c0c; }
.lp-bk-comp-btn--ghost { background: transparent; color: #0c0c0c; border: 1px solid #d8d8d8; }

.lp-bk-comp-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: #f4f4f2;
  color: #4a4a4a;
}
.lp-bk-comp-chip--dark { background: #0c0c0c; color: #ffffff; }
.lp-bk-comp-chip--accent { background: #faef70; color: #0c0c0c; }

.lp-bk-comp-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #f4f4f2;
  color: #0c0c0c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Assets */
.lp-bk-asset-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lp-bk-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fafafa;
  transition: background 180ms;
}
.lp-bk-asset:hover { background: #f4f4f2; }
.lp-bk-asset-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.lp-bk-asset-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lp-bk-asset-name { font-size: 12px; font-weight: 600; color: #0c0c0c; }
.lp-bk-asset-meta { font-size: 10px; color: #8a8a8a; }
.lp-bk-asset-dl {
  color: #8a8a8a;
  font-size: 14px;
  font-weight: 700;
  padding: 0 4px;
}

@media (max-width: 860px) {
  .lp-bk-row, .lp-bk-row--hero { grid-template-columns: 1fr; }
  .lp-bk-logo-grid { grid-template-columns: 1fr 1fr; }
  .lp-bk-logo-card--primary { grid-column: 1 / -1; }
  .lp-bk-swatches { grid-template-columns: repeat(3, 1fr); }
  .lp-bk-type-aa-glyph { font-size: 52px; }
}