/* =====================================================================
   LuxWare GmbH — Design System
   Swiss digital agency. Clean, premium, light, editorial.
   ===================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand — Logo-aligned: deep forest green + warm gold */
  --c-primary:   #1F3A2E;  /* dark forest green */
  --c-primary-2: #2A4D3A;  /* mid forest */
  --c-primary-3: #3E6B53;  /* light forest */
  --c-accent:    #C9A36A;  /* warm gold */
  --c-accent-2:  #B8915A;  /* deep gold */

  /* Background — warm cream paper instead of cold blue tint */
  --c-bg:      #FFFFFF;
  --c-bg-soft: #F8F4EC;   /* warm cream */
  --c-bg-tint: #EDF2EE;   /* very pale green wash */

  /* Text — warm dark (slightly green-tinted neutral) */
  --c-ink:   #1A201C;
  --c-ink-2: #3A433D;
  --c-ink-3: #6B7670;

  /* Border / UI */
  --c-border:   #E8E4D8;  /* warm border that pairs with cream */
  --c-border-2: #D7D2C2;

  /* Gradients — subtle, not 135° AI-standard */
  --g-primary: linear-gradient(118deg, #1F3A2E 0%, #2A4D3A 100%);
  --g-soft:    linear-gradient(160deg, #F8F4EC 0%, #FFFFFF 100%);
  --g-tint:    linear-gradient(150deg, rgba(31,58,46,0.08) 0%, rgba(201,163,106,0.05) 100%);
  --g-accent:  linear-gradient(118deg, #C9A36A 0%, #B8915A 100%);

  /* Shadows — tinted with brand-green instead of pure neutral */
  --sh-sm:   0 1px 2px rgba(31,58,46,0.05),  0 1px 3px rgba(31,58,46,0.07);
  --sh-md:   0 8px 24px rgba(31,58,46,0.07), 0 2px 6px rgba(31,58,46,0.05);
  --sh-lg:   0 24px 60px rgba(31,58,46,0.10), 0 8px 20px rgba(31,58,46,0.05);
  --sh-glow: 0 20px 60px rgba(31,58,46,0.18);

  /* Type families — editorial Swiss agency feel */
  --ff-body:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ff-display: "Fraunces", "Times New Roman", Georgia, serif;

  /* Radius */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;

  /* Type scale */
  --fs-hero: clamp(2.6rem, 5.2vw, 4.4rem);
  --fs-h1: clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.9rem;
  --fs-xs: 0.8rem;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; height: 100%; }
body {
  font-family: var(--ff-body);
  color: var(--c-ink-2);
  background: var(--c-bg);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* verhindert Phantom-Scroll durch übermäßige Kinder; "clip" statt "hidden" → kein scroll context */
  overscroll-behavior-y: none;
  /* Sticky-Footer: body als Flex-Column, footer wird ans Ende geschoben */
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport */
}
body > .site-footer { margin-top: auto !important; }
body > section, body > article, body > main, body > header { flex-shrink: 0; }
/* Scripts und absolute-positionierte Elemente sollen NIE Layout-Höhe addieren */
body > script, body > noscript { display: none !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 {
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.08;
  font-variation-settings: "opsz" 96;
}
h1 { font-weight: 600; }
::selection { background: rgba(201,163,106,0.28); color: var(--c-ink); }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container.wide { max-width: var(--container-wide); }
.section { padding-block: clamp(64px, 9vw, 130px); position: relative; overflow: clip; }
.section--soft { background: var(--c-bg-soft); }
.section--tint { background: var(--g-soft); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.maxw-640 { max-width: 640px; }
.maxw-720 { max-width: 720px; }

.grid { display: grid; gap: var(--gutter); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 18px;
}
/* Editorial alt variant — lowercase italic serif, no caps. Use sparingly to break up the uppercase rhythm. */
.eyebrow--italic {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-accent-2);
}
.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 16px;
  text-wrap: balance;
}
.section-title .accent { color: var(--c-accent-2); font-style: italic; font-weight: 500; }
.section-sub { color: var(--c-ink-3); font-size: var(--fs-lead); max-width: 65ch; }
.section-head { margin-bottom: clamp(36px, 5vw, 60px); }
.section-head.center .section-sub { margin-inline: auto; }

.text-grad {
  background: var(--g-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold {
  color: var(--c-accent-2);
  font-style: italic;
  font-weight: 500;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--g-primary); color: #fff; box-shadow: var(--sh-glow); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 26px 70px rgba(31,58,46,0.32); }
.btn--ghost { background: #fff; color: var(--c-ink); border-color: var(--c-border); box-shadow: var(--sh-sm); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--c-border-2); box-shadow: var(--sh-md); }
.btn--light { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--light:hover { background: rgba(255,255,255,0.22); }
/* Tertiary text-link button — for when a third option would feel cluttered with two filled/ghost buttons */
.btn--link {
  background: transparent;
  color: var(--c-ink);
  border: 0;
  padding: 13px 6px;
  border-radius: 0;
  position: relative;
}
.btn--link::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: 8px;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0.4);
  opacity: 0.4;
  transition: transform .35s var(--ease), opacity .25s;
}
.btn--link:hover { color: var(--c-accent-2); }
.btn--link:hover::after { transform: scaleX(1); opacity: 1; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.site-header.scrolled {
  border-bottom-color: var(--c-border);
  box-shadow: 0 6px 24px rgba(31,58,46,0.04);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}
.brand { display: inline-flex; align-items: center; gap: 0; font-weight: 800; color: var(--c-ink); letter-spacing: -0.02em; font-size: 1.18rem; overflow: visible; }
.site-header { overflow: visible; }
.brand__logo { display: block; height: 110px; width: auto; max-width: 100%; }
.site-footer .brand { gap: 0; }
.site-footer .brand__logo { filter: brightness(0) invert(1); height: 80px; }
@media (max-width: 720px) {
  .brand__logo { height: 80px; }
  .site-footer .brand__logo { height: 60px; }
}
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-ink-2);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  transition: color .25s, background .25s;
}
.nav__links a:hover { color: var(--c-ink); background: var(--c-bg-tint); }
.nav__links a.active { color: var(--c-primary); font-weight: 600; }
.nav__right { display: flex; align-items: center; gap: 14px; }
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  cursor: pointer;
  align-items: center; justify-content: center;
}
.nav__toggle span { position: relative; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: .3s; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: .3s; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--c-bg-soft); border-top: 1px solid var(--c-border); padding-block: 30px; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__nav { display: flex; gap: 6px; flex-wrap: wrap; }
.footer__nav a { font-size: var(--fs-sm); color: var(--c-ink-3); padding: 6px 12px; border-radius: var(--r-pill); transition: color .25s, background .25s; }
.footer__nav a:hover { color: var(--c-primary); background: var(--c-bg-tint); }
.footer__copy { font-size: var(--fs-sm); color: var(--c-ink-3); }
.swiss-badge { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-ink-2); font-weight: 500; }
.swiss-flag { width: 20px; height: 20px; border-radius: 5px; background: #D52B1E; display: grid; place-items: center; box-shadow: var(--sh-sm); }
.swiss-flag::before { content: ""; width: 11px; height: 11px; background:
  linear-gradient(#fff,#fff) center/3px 11px no-repeat,
  linear-gradient(#fff,#fff) center/11px 3px no-repeat; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--sh-sm);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
/* Fine gradient contour that fades in on hover (no layout shift) */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--g-primary);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-7px);
  border-color: transparent;
  box-shadow: 0 22px 50px rgba(31,58,46,0.16), 0 8px 18px rgba(31,58,46,0.05);
}
.card:hover::after { opacity: 1; }
.card__icon {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 13px;
  background: var(--g-tint);
  display: grid; place-items: center;
  color: var(--c-primary);
  margin-bottom: 20px;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover .card__icon {
  background: var(--g-primary);
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow: var(--sh-glow);
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.card p { color: var(--c-ink-3); font-size: var(--fs-sm); }

/* ---------- Process Section ---------- */
.proc-intro { margin-bottom: clamp(40px,5vw,72px); }
.proc-intro__lead { font-size: var(--fs-lead); color: var(--c-ink-2); margin-bottom: 20px; max-width: 560px; line-height: 1.65; }
.proc-intro__sub { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); margin-bottom: 10px; }
.proc-intro__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); margin-top: 28px; }

.proc-list { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 6px 0 0; }
.proc-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.proc-list li::before { content: '—'; color: var(--c-primary); font-weight: 700; flex-shrink: 0; }
.proc-list--success li::before { content: '✓'; color: #10B981; font-weight: 700; }
.proc-list--problem li::before { content: '✕'; color: #EF4444; font-weight: 700; font-size: 0.78em; margin-top: 2px; }

.proc-steps { display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,0.07); margin-bottom: 4px; }
.proc-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: clamp(20px,4vw,52px);
  padding: clamp(28px,4vw,48px) 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.proc-step__num {
  font-size: clamp(2rem,3.5vw,3.8rem);
  font-weight: 900;
  color: var(--c-primary);
  opacity: 0.13;
  line-height: 1;
  letter-spacing: -0.04em;
  padding-top: 4px;
  user-select: none;
}
.proc-step__title {
  font-size: clamp(1.05rem,1.8vw,1.35rem);
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 12px;
  letter-spacing: -0.015em;
}
.proc-step__body > p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 10px; }
.proc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,32px); margin: 6px 0; }

.proc-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.proc-tags span {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  background: var(--g-tint);
  color: var(--c-primary);
  border-radius: 100px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(31,58,46,0.15);
}

.goal-card--rich {
  padding: clamp(28px,4vw,44px);
  display: flex;
  flex-direction: column;
}
.goal-card--rich h3 {
  font-size: clamp(1rem,1.7vw,1.25rem);
  font-weight: 800;
  color: var(--c-ink);
  margin-bottom: 16px;
  line-height: 1.35;
}
.goal-card--rich > p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.65; }

/* --- Process step accordion --- */
.proc-step { padding: 0; } /* padding now lives on header */
.proc-step__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: clamp(22px,3.5vw,38px) 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.proc-step__header:focus-visible .proc-step__toggle {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.proc-step__summary { flex: 1; min-width: 0; }
.proc-step__teaser {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  margin: 5px 0 0;
  line-height: 1.6;
  max-width: 560px;
}
.proc-step__toggle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-3);
  margin-top: 3px;
  transition: background .2s, border-color .2s, color .2s;
  pointer-events: none; /* click handled on header */
}
.proc-step__toggle svg {
  width: 18px;
  height: 18px;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.proc-step.is-open .proc-step__toggle {
  background: var(--g-tint);
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.proc-step.is-open .proc-step__toggle svg { transform: rotate(180deg); }
/* Accordion panel */
.proc-step__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1);
}
.proc-step.is-open .proc-step__detail { grid-template-rows: 1fr; }
.proc-step__detail-inner {
  overflow: hidden;
  padding-bottom: 0;
  transition: padding-bottom .42s cubic-bezier(.4,0,.2,1);
}
.proc-step.is-open .proc-step__detail-inner { padding-bottom: clamp(22px,3vw,34px); }
.proc-step__detail-inner > p { color: var(--c-ink-2); font-size: var(--fs-sm); line-height: 1.7; margin-bottom: 10px; }
.proc-step__detail-inner > p:first-child { margin-top: 0; }

@media (max-width: 680px) {
  .proc-intro__cols { grid-template-columns: 1fr; }
  .proc-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .proc-step__num { font-size: 2rem; }
  .proc-cols { grid-template-columns: 1fr; }
  .proc-step__toggle { width: 30px; height: 30px; }
  .proc-step__toggle svg { width: 15px; height: 15px; }
}

/* ---------- Offerten-Rechner Modal ---------- */
.calc-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4,0,.2,1);
}
.calc-modal.is-open { opacity: 1; pointer-events: all; }
.calc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31,58,46,0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.calc-modal__box {
  position: relative;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(31,58,46,0.16), 0 8px 24px rgba(31,58,46,0.08);
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(24px) scale(.97);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.calc-modal.is-open .calc-modal__box { transform: translateY(0) scale(1); }
.calc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-3);
  transition: background .2s, color .2s;
  z-index: 2;
}
.calc-modal__close svg { width: 16px; height: 16px; }
.calc-modal__close:hover { background: var(--c-bg-soft); color: var(--c-ink); }
.calc-modal__header {
  padding: clamp(28px,4vw,40px) clamp(24px,4vw,40px) 20px;
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
}
.calc-modal__header h2 {
  font-size: clamp(1.25rem,2.5vw,1.6rem);
  font-weight: 800;
  color: var(--c-ink);
  margin: 6px 0 6px;
  letter-spacing: -0.02em;
}
.calc-modal__header p { font-size: var(--fs-sm); color: var(--c-ink-3); line-height: 1.6; }
.calc-modal__body {
  padding: 24px clamp(24px,4vw,40px);
  overflow-y: auto;
  flex: 1;
}
.calc-section { margin-bottom: 28px; }
.calc-section:last-child { margin-bottom: 0; }
.calc-section h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: 12px;
}
.calc-opts { display: flex; flex-direction: column; gap: 8px; }
.calc-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
  user-select: none;
}
.calc-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.calc-opt__check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--c-border);
  background: #fff;
  transition: border-color .2s, background .2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-opt--extra .calc-opt__check { border-radius: 5px; }
.calc-opt__check::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  opacity: 0;
  transition: opacity .18s;
}
.calc-opt--extra .calc-opt__check::after {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.5l3 3 5-6' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.calc-opt.is-checked {
  border-color: var(--c-primary);
  background: rgba(31,58,46,0.04);
  box-shadow: 0 0 0 3px rgba(31,58,46,0.08);
}
.calc-opt.is-checked .calc-opt__check {
  border-color: var(--c-primary);
  background: var(--c-primary);
}
.calc-opt.is-checked .calc-opt__check::after { opacity: 1; }
.calc-opt:hover:not(.is-checked) { border-color: #9CC0A8; background: rgba(31,58,46,0.02); }
.calc-opt__body { flex: 1; min-width: 0; }
.calc-opt__name { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink); display: block; }
.calc-opt__desc { font-size: 0.74rem; color: var(--c-ink-3); margin-top: 2px; display: block; line-height: 1.45; }
.calc-opt__price { font-size: 0.82rem; font-weight: 800; color: var(--c-primary); white-space: nowrap; flex-shrink: 0; }
.calc-modal__footer {
  padding: 18px clamp(24px,4vw,40px) clamp(20px,3vw,28px);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  background: var(--c-bg-soft);
}
.calc-total { display: flex; flex-direction: column; gap: 2px; }
.calc-total span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-ink-3); font-weight: 600; }
.calc-total strong { font-size: clamp(1.3rem,3vw,1.75rem); font-weight: 900; color: var(--c-ink); letter-spacing: -0.025em; line-height: 1.1; }
@media (max-width: 520px) {
  .calc-modal__footer { flex-direction: column; align-items: stretch; }
  .calc-modal__footer .btn { text-align: center; justify-content: center; }
  .calc-opt__price { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 110px); overflow: hidden; }
/* hero uses full viewport width — text flush to left, image bleeds right */
.hero > .container.wide {
  max-width: 100%;
  padding-inline-start: clamp(24px, 5vw, 80px);
  padding-inline-end: 0;
}
.hero__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 { font-size: var(--fs-hero); margin-bottom: 24px; }
.hero__lead { font-size: var(--fs-lead); color: var(--c-ink-3); max-width: 520px; margin-bottom: 16px; }
.hero__tagline { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-primary); opacity: 0.85; margin-bottom: 32px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.hero__trust { display: flex; gap: 36px; flex-wrap: wrap; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item__ic { width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--g-tint); display: grid; place-items: center; color: var(--c-primary); }
.trust-item__ic svg { width: 18px; height: 18px; }
.trust-item strong { display: block; color: var(--c-ink); font-size: var(--fs-sm); font-weight: 700; }
.trust-item span { font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---------- Hero Tech Carousel ---------- */
/* logos-strip — standalone section below hero */
.logos-strip {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 28px 0 24px;
}
.logos-strip__label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.38);
  text-align: center;
  margin-bottom: 20px;
}
/* hero text contrast overrides */
.hero .eyebrow { color: #1F3A2E; font-weight: 800; }
.hero h1 { color: #0f1d16; }
.hero h1 .text-grad {
  background: linear-gradient(135deg, #1F3A2E 0%, #C9A36A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .hero__lead { color: #1e293b; }
.tech-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.tech-strip__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: techScroll 30s linear infinite;
}
.tech-strip__track:hover { animation-play-state: paused; }
@keyframes techScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 0 24px;
  cursor: default;
  transition: transform .2s, opacity .2s;
}
.tech-item:hover { transform: translateY(-2px); opacity: .85; }
.tech-item__icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tech-item__icon svg { width: 100%; height: 100%; }
.tech-item__name {
  font-size: 0.71rem;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.tech-item__desc {
  font-size: 0.61rem;
  color: rgba(0,0,0,0.4);
  white-space: nowrap;
  text-align: center;
}
/* Next.js name stays dark on white bg */
.tech-item--nextjs .tech-item__name { color: #111827; }

/* Brand colours */
.tech-item--gmaps       .tech-item__icon { color: #EA4335; }
.tech-item--gmaps       .tech-item__name { color: #EA4335; }
.tech-item--dji         .tech-item__icon { color: #2D6CDF; }
.tech-item--dji         .tech-item__name { color: #2D6CDF; }
.tech-item--openai      .tech-item__icon { color: #10A37F; }
.tech-item--openai      .tech-item__name { color: #10A37F; }
.tech-item--perplexity  .tech-item__icon { color: #20B2AA; }
.tech-item--perplexity  .tech-item__name { color: #20B2AA; }
.tech-item--nextjs      .tech-item__icon { color: #e2e8f0; }
.tech-item--nextjs      .tech-item__name { color: #e2e8f0; }
.tech-item--cloudflare  .tech-item__icon { color: #F6821F; }
.tech-item--cloudflare  .tech-item__name { color: #F6821F; }

/* Hero background motion layers */
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.blob--1 { width: 520px; height: 520px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(31,58,46,0.28), transparent 70%); animation: float1 18s ease-in-out infinite; }
.blob--2 { width: 460px; height: 460px; bottom: -180px; left: -100px; background: radial-gradient(circle, rgba(201,163,106,0.22), transparent 70%); animation: float2 22s ease-in-out infinite; }
.blob--3 { width: 360px; height: 360px; top: 30%; left: 40%; background: radial-gradient(circle, rgba(184,145,90,0.16), transparent 70%); animation: float1 26s ease-in-out infinite reverse; }
.hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }

/* Scroll-scrubbed hero video */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.hero__video.ready { opacity: 0.9; }
/* Readability scrim: strong on the left (text column), clearing to the right */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247,249,252,0.94) 0%, rgba(247,249,252,0.72) 34%, rgba(247,249,252,0.30) 60%, rgba(247,249,252,0.05) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 70%, rgba(247,249,252,0.85) 100%);
}
@media (max-width: 860px) {
  /* Mobile: Video als dezenter Backdrop + gleichmäßiger Schleier,
     damit sich Hintergrund und Text nicht mehr beißen (klare Lesbarkeit). */
  .hero__video.ready { opacity: 0.80; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(247,249,252,0.72) 0%, rgba(247,249,252,0.55) 48%, rgba(247,249,252,0.82) 100%);
  }
  .hero__waves { opacity: 0.4; }
  .hero .blob--1, .hero .blob--3 { opacity: 0.72; }
}

@keyframes float1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(1.08); } }
@keyframes float2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,-30px) scale(1.1); } }

/* ---------- Device mockups ---------- */
.mockups { position: relative; }
.mockup-laptop {
  position: relative;
  border-radius: 16px 16px 0 0;
  background: #1f2430;
  padding: 11px 11px 0;
  box-shadow: var(--sh-lg);
}
.mockup-laptop__bar { display: flex; gap: 6px; padding: 4px 4px 9px; }
.mockup-laptop__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4150; display: block; }
.mockup-laptop__bar i:nth-child(1){ background:#ff5f57; } .mockup-laptop__bar i:nth-child(2){ background:#febc2e; } .mockup-laptop__bar i:nth-child(3){ background:#28c840; }
.mockup-laptop__screen { border-radius: 6px; overflow: hidden; background: #fff; aspect-ratio: 16/10; }
.mockup-laptop__base { height: 14px; background: linear-gradient(#d4d8e0,#b9bfca); border-radius: 0 0 14px 14px; margin: 0 -22px; box-shadow: var(--sh-md); }
.mockup-laptop__base::after { content:""; display:block; width:120px; height:6px; background:#aab0bd; border-radius:0 0 8px 8px; margin: 0 auto; }
.mockup-phone {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 27%;
  min-width: 130px;
  border-radius: 26px;
  background: #1f2430;
  padding: 8px;
  box-shadow: var(--sh-lg);
}
.mockup-phone__screen { border-radius: 18px; overflow: hidden; background:#fff; aspect-ratio: 9/19; }
.mockup-phone__notch { position:absolute; top:14px; left:50%; transform:translateX(-50%); width:38%; height:5px; background:#0c0e14; border-radius:5px; }

/* Faux UI inside screens */
.scr { width: 100%; height: 100%; display: flex; flex-direction: column; background: #fff; }
.scr__nav { display:flex; align-items:center; justify-content:space-between; padding: 9px 12px; border-bottom:1px solid var(--c-border); }
.scr__logo { display:flex; align-items:center; gap:6px; font-size:9px; font-weight:800; color:var(--c-ink); }
.scr__logo i { width:14px; height:14px; border-radius:4px; background:var(--g-primary); display:block; }
.scr__menu { display:flex; gap:7px; }
.scr__menu i { width:18px; height:5px; border-radius:3px; background:var(--c-bg-tint); display:block; }
.scr__menu i:last-child { width:30px; background:var(--g-primary); }
.scr__hero { position:relative; flex:1; min-height:0; }
.scr__hero img, .scr__hero .scene { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scr__hero-txt { position:absolute; left:12px; bottom:12px; right:12px; }
.scr__hero-txt b { display:block; color:#fff; font-size:13px; font-weight:800; text-shadow:0 2px 10px rgba(0,0,0,.3); line-height:1.15; }
.scr__hero-txt small { color:rgba(255,255,255,.85); font-size:8px; }
.scr__cards { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:10px 12px; }
.scr__cards span { height:30px; border-radius:6px; background:var(--c-bg-soft); border:1px solid var(--c-border); }
.scr--phone .scr__cards { grid-template-columns:1fr; }
.scr--phone .scr__cards span { height:22px; }

/* Alpine SVG scene utility */
.scene { background: linear-gradient(180deg, #cfe0ff 0%, #eaf0ff 55%, #f7f9fc 100%); }

/* ---------- Stats strip ---------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; border:1px solid var(--c-border); border-radius: var(--r-lg); background:#fff; padding: 30px; box-shadow: var(--sh-sm); }
.stat { display:flex; gap:14px; align-items:center; }
.stat__ic { width:40px; height:40px; flex:none; border-radius:11px; background:var(--g-tint); display:grid; place-items:center; color:var(--c-primary); }
.stat__ic svg{ width:20px; height:20px; }
.stat b { display:block; font-size:1.5rem; color:var(--c-ink); font-weight:800; letter-spacing:-0.02em; }
.stat span { font-size:var(--fs-xs); color:var(--c-ink-3); }

/* ---------- Services grid — Bento layout ---------- */
.services-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 18px;
}
/* Hero card — spans 2 columns × 2 rows, becomes the visual anchor */
.services-grid .card--hero {
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-2) 100%);
  color: rgba(255,255,255,0.92);
  padding: clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  border: 0;
}
.services-grid .card--hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(201,163,106,0.32) 0%, transparent 65%);
  pointer-events: none;
}
.services-grid .card--hero .card__icon {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  margin-bottom: 18px;
}
.services-grid .card--hero h3 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: #fff;
  margin-bottom: 12px;
  line-height: 1.15;
}
.services-grid .card--hero p {
  color: rgba(255,255,255,0.78);
  font-size: 1rem;
  max-width: 42ch;
  line-height: 1.6;
}
.services-grid .card--hero .card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-weight: 600;
  color: var(--c-accent);
  font-size: 0.92rem;
  transition: gap 0.2s var(--ease), color 0.2s;
}
.services-grid .card--hero .card__more:hover { gap: 14px; color: #fff; }
.services-grid .card--hero:hover::after { opacity: 0; }
.services-grid .card--hero:hover { transform: translateY(-4px); }

@media (max-width: 760px) {
  .services-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .services-grid .card--hero {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ---------- Two-col feature ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items:center; }
.split--narrow { grid-template-columns: 1.1fr 0.9fr; }

/* ---------- Process steps ---------- */
.process { position:relative; }
.process__track { display:grid; grid-template-columns: repeat(5,1fr); gap: 18px; position:relative; }
.process__line { position:absolute; top:24px; left:9%; right:9%; height:2px; background: linear-gradient(90deg, var(--c-border-2), var(--c-primary-3), var(--c-border-2)); z-index:0; }
.step { position:relative; text-align:center; z-index:1; }
.step__num { width:50px; height:50px; margin:0 auto 16px; border-radius:14px; background:#fff; border:1px solid var(--c-border); display:grid; place-items:center; color:var(--c-primary); box-shadow:var(--sh-sm); }
.step__num svg{ width:22px; height:22px; }
.step .idx { font-size:var(--fs-xs); font-weight:700; color:var(--c-primary); letter-spacing:.1em; }
.step h3 { font-size:1.05rem; margin:4px 0 8px; }
.step p { font-size:var(--fs-sm); color:var(--c-ink-3); }

.goal-card { background: var(--g-tint); border:1px solid var(--c-border-2); border-radius:var(--r-lg); padding:30px; }
.goal-card h4 { color:var(--c-primary); font-size:var(--fs-sm); font-weight:700; margin-bottom:12px; letter-spacing:.02em; }
.goal-card p { color:var(--c-ink-2); font-size:1.05rem; }
.goal-card .arrow { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--c-primary); box-shadow:var(--sh-sm); margin-top:18px; }

/* ---------- Projects ---------- */
.filters { display:flex; gap:10px; flex-wrap:wrap; }
.chip {
  font-size:var(--fs-sm); font-weight:600; color:var(--c-ink-2);
  padding:9px 18px; border-radius:var(--r-pill);
  border:1px solid var(--c-border); background:#fff; cursor:pointer;
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--c-border-2); color:var(--c-ink); }
.chip.active { background: var(--g-primary); color:#fff; border-color:transparent; box-shadow: var(--sh-glow); }
/* Projects — Bento layout with Twin-Hero (Ayat + Plantyq) and wide tiles */
.projects-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(220px, auto);
  grid-auto-flow: dense;
  gap: 18px;
}
.project--feature { grid-column: span 2; grid-row: span 2; align-self: start; }
.project--wide    { grid-column: span 2; }
.project--feature .project__body h3 { font-size: 1.35rem; }
.project {
  border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:#fff;
  box-shadow:var(--sh-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex; flex-direction: column;
}
/* All cards: image fills available vertical space, body stays compact at bottom. */
.project__media { flex: 1 1 auto; min-height: 220px; }
.project__body  { flex: 0 0 auto; }
/* Featured card: lock media to image's natural 3:2 ratio so contain leaves no cream gap */
.project--feature .project__media {
  flex: 0 0 auto;
  min-height: 0;
  aspect-ratio: 3 / 2;
}
.project--wide .project__media    { min-height: 280px; }
.project:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.project__media { overflow:hidden; position:relative; }
.project__media .scene { width:100%; height:100%; }
.project__media .tag { position:absolute; top:12px; left:12px; font-size:var(--fs-xs); font-weight:600; color:var(--c-primary); background:rgba(255,255,255,.92); padding:5px 12px; border-radius:var(--r-pill); box-shadow:var(--sh-sm); }
.project__media .tag--wip { color:#92400e; background:rgba(255,237,213,.95); }
.project__media .tag--wip::before { content:'● '; font-size:0.55rem; vertical-align:middle; color:#f97316; }
.project__body { padding:18px 20px 22px; }
.project__body h3 { font-size:1.1rem; margin-bottom:4px; }
.project__body .cat { font-size:var(--fs-xs); color:var(--c-primary); font-weight:600; letter-spacing:.04em; }
.project__body p { font-size:var(--fs-sm); color:var(--c-ink-3); margin-top:8px; }
.project__link { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:700; color:var(--c-primary); text-decoration:none; margin-top:12px; transition:gap .2s; }
.project__link:hover { gap:8px; }
/* Mobile fallback for bento projects grid */
@media (max-width: 760px) {
  .projects-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .project--feature, .project--wide {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ---------- Interactive feature ---------- */
.feature-band { background: var(--g-soft); border:1px solid var(--c-border); border-radius: var(--r-xl); padding: clamp(32px,5vw,60px); overflow:hidden; }
.feature-list { display:flex; flex-direction:column; gap:22px; margin-top:28px; }
.feature-list li { display:flex; gap:16px; }
.feature-list .fic { width:44px; height:44px; flex:none; border-radius:12px; background:#fff; border:1px solid var(--c-border); display:grid; place-items:center; color:var(--c-primary); box-shadow:var(--sh-sm); }
.feature-list .fic svg{ width:22px; height:22px; }
.feature-list strong { display:block; color:var(--c-ink); font-size:1.02rem; }
.feature-list span { font-size:var(--fs-sm); color:var(--c-ink-3); }

/* Offer calculator widget */
.calc { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-md); }
.calc__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.calc__head h4 { font-size:1.15rem; }
.calc__steps { display:flex; gap:8px; }
.calc__steps i { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:var(--fs-xs); font-weight:700; background:var(--c-bg-tint); color:var(--c-ink-3); font-style:normal; }
.calc__steps i.on { background:var(--g-primary); color:#fff; }
.calc__steps i.done { background:var(--c-bg-tint); color:var(--c-primary); }
/* Multi-step panels */
.calc__step { display:none; }
.calc__step.is-active { display:block; animation: calcIn .45s var(--ease); }
@keyframes calcIn { from { opacity:0; transform: translateX(12px); } to { opacity:1; transform:none; } }
.calc__nav { display:flex; gap:10px; margin-top:4px; }
.calc__nav .btn--primary { flex:1; }
.calc__nav .btn--ghost { flex:0 0 auto; }
/* Estimate box */
.calc__estimate {
  background: var(--g-tint);
  border:1px solid var(--c-border-2);
  border-radius: var(--r-md);
  padding:18px 20px;
  margin-bottom:18px;
  text-align:center;
}
.calc__estimate span { display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--c-primary); }
.calc__estimate strong { display:block; font-size:1.5rem; color:var(--c-ink); font-weight:800; letter-spacing:-0.02em; margin:4px 0; }
.calc__estimate small { font-size:var(--fs-xs); color:var(--c-ink-3); }
.calc__incl { display:flex; align-items:center; gap:8px; margin-top:14px; font-size:var(--fs-sm); font-weight:600; color:var(--c-primary); }
.calc__fields { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.calc__success { display:none; padding:12px 14px; border-radius:var(--r-sm); background:var(--c-bg-tint); border:1px solid var(--c-border-2); color:var(--c-ink-2); font-size:var(--fs-sm); }
.calc__success.show { display:block; }
.calc__q { font-size:var(--fs-sm); font-weight:700; color:var(--c-ink); margin-bottom:6px; }
.calc__hint { font-size:var(--fs-xs); color:var(--c-ink-3); margin-bottom:18px; }
.calc__opts { display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
#offerten-rechner .calc-opt { display:flex; align-items:center; gap:12px; padding:13px 15px; border:1.5px solid var(--c-border); border-radius:var(--r-sm); cursor:pointer; transition:border-color .2s, background .2s, color .2s; font-size:var(--fs-sm); background:#fff; line-height:1.35; }
/* Native Checkbox/Radio wieder sichtbar — das Modal-CSS (.calc-opt input{opacity:0})
   würde sie sonst auch hier ausblenden. */
#offerten-rechner .calc-opt input { position:static; opacity:1; width:19px; height:19px; flex:none; margin:0; accent-color: var(--c-primary); pointer-events:auto; }
#offerten-rechner .calc-opt:hover { border-color:var(--c-primary); background:var(--c-bg-soft); }
#offerten-rechner .calc-opt.checked { border-color:var(--c-primary); background:var(--c-bg-tint); box-shadow: inset 0 0 0 1px var(--c-primary); font-weight:600; color:var(--c-primary); }
#offerten-rechner .calc-opt.checked span { color: var(--c-ink-3); }

/* ---------- About checklist ---------- */
.checklist { display:grid; grid-template-columns: repeat(2,1fr); gap:16px; margin-top:8px; }
.check { display:flex; gap:12px; align-items:center; font-weight:600; color:var(--c-ink-2); font-size:var(--fs-sm); }
.check .ck { width:26px; height:26px; flex:none; border-radius:8px; background:var(--g-tint); color:var(--c-primary); display:grid; place-items:center; }
.check .ck svg { width:15px; height:15px; }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px,4vw,56px); }
.form { display:flex; flex-direction:column; gap:14px; }
.form label { font-size:var(--fs-xs); font-weight:600; color:var(--c-ink-2); }
.field { width:100%; padding:13px 16px; border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-bg-soft); font-size:var(--fs-sm); transition: border-color .25s, box-shadow .25s, background .25s; }
.field:focus { outline:none; border-color: var(--c-primary); background:#fff; box-shadow: 0 0 0 4px rgba(31,58,46,0.1); }
textarea.field { resize:vertical; min-height:120px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.info-card { background:#fff; border:1px solid var(--c-border); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-sm); }
.info-card h3 { font-size:1.2rem; margin-bottom:4px; }
.info-card .role { font-size:var(--fs-sm); color:var(--c-ink-3); margin-bottom:20px; }
.info-line { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:var(--fs-sm); color:var(--c-ink-2); }
.info-line .il { width:34px; height:34px; flex:none; border-radius:9px; background:var(--g-tint); color:var(--c-primary); display:grid; place-items:center; }
.info-line .il svg{ width:17px; height:17px; }
.map { margin-top:18px; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--c-border); aspect-ratio: 16/9; background:
  linear-gradient(135deg,#eaf0ff,#f7f9fc); position:relative; }
.contact-cta { display:flex; flex-direction:column; gap:10px; margin-top: 18px; }
.contact-cta .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.contact-cta .btn svg { width: 18px; height: 18px; }
.map__pin { position:absolute; top:46%; left:52%; transform:translate(-50%,-100%); color:#D52B1E; }
.map__pin svg{ width:30px; height:30px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.map__grid { position:absolute; inset:0; opacity:.5; background-image:
  linear-gradient(rgba(31,58,46,.10) 1px, transparent 1px),
  linear-gradient(90deg, rgba(31,58,46,.10) 1px, transparent 1px);
  background-size: 36px 36px; }

.form-success { display:none; padding:14px 16px; border-radius:var(--r-sm); background:var(--c-bg-tint); border:1px solid var(--c-border-2); color:var(--c-ink-2); font-size:var(--fs-sm); }
.form-success.show { display:block; }

/* ---------- Page hero (sub pages) ---------- */
.page-hero { position:relative; padding-top: clamp(56px,7vw,96px); padding-bottom: clamp(40px,5vw,64px); overflow:hidden; text-align:center; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom:18px; }
.page-hero p { color: var(--c-ink-3); font-size: var(--fs-lead); max-width:640px; margin:0 auto; }
.breadcrumb { font-size:var(--fs-xs); color:var(--c-ink-3); margin-bottom:18px; letter-spacing:.04em; }
.breadcrumb a { color:var(--c-primary); }

/* ---------- Blog ---------- */
.blog-grid { grid-template-columns: repeat(3,1fr); }
.post { border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; background:#fff; box-shadow:var(--sh-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.post:hover { transform:translateY(-6px); box-shadow:var(--sh-lg); }
.post__media { aspect-ratio:16/10; }
.post__media .scene { width:100%; height:100%; }
.post__body { padding:22px; display:flex; flex-direction:column; flex:1; }
.post__meta { font-size:var(--fs-xs); color:var(--c-primary); font-weight:600; letter-spacing:.04em; margin-bottom:10px; }
.post__body h3 { font-size:1.15rem; margin-bottom:10px; }
.post__body p { font-size:var(--fs-sm); color:var(--c-ink-3); margin-bottom:18px; }
.post__more { margin-top:auto; font-size:var(--fs-sm); font-weight:600; color:var(--c-primary); display:inline-flex; align-items:center; gap:7px; }
.post--feature { grid-column: span 3; }
.post--feature .post__inner { display:grid; grid-template-columns:1.1fr 1fr; }
.post--feature .post__media { aspect-ratio:auto; }

/* ---------- Team ---------- */
.team-grid { grid-template-columns: repeat(4,1fr); }
.member { text-align:center; }
.member__photo { aspect-ratio:1; border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px; box-shadow:var(--sh-sm); }
.member__photo .scene { width:100%; height:100%; }
.member h3 { font-size:1.05rem; margin-bottom:2px; }
.member .role { font-size:var(--fs-sm); color:var(--c-primary); font-weight:600; }

/* ---------- Value cards / generic ---------- */
.cta-band {
  background: var(--g-primary);
  border-radius: var(--r-xl);
  padding: clamp(40px,6vw,72px);
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow: var(--sh-glow);
}
.cta-band::before { content:""; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,.12); top:-160px; right:-100px; filter:blur(20px); }
.cta-band::after { content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.08); bottom:-160px; left:-80px; filter:blur(20px); }
.cta-band h2 { color:#fff; font-size:var(--fs-h2); margin-bottom:14px; position:relative; }
.cta-band p { color:rgba(255,255,255,.9); font-size:var(--fs-lead); max-width:560px; margin:0 auto 28px; position:relative; }
.cta-band .btn { position:relative; }

/* ---------- Price tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.price-table th, .price-table td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--c-border); vertical-align: top; }
.price-table thead th { background: var(--c-bg-soft); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-3); font-weight: 700; }
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr { transition: background .25s; }
.price-table tbody tr:hover { background: var(--c-bg-tint); }
.price-table .name { font-weight: 700; color: var(--c-ink); }
.price-table .price { font-weight: 800; color: var(--c-primary); white-space: nowrap; }
.price-table .det { color: var(--c-ink-3); font-size: var(--fs-sm); }
.price-note { font-size: var(--fs-sm); color: var(--c-ink-3); margin-top: 16px; }
.included-card { background: var(--g-tint); border: 1px solid var(--c-border-2); border-radius: var(--r-lg); padding: 30px; }
.included-card h3 { font-size: var(--fs-h3); margin-bottom: 18px; }

/* ---------- Clickable cards ---------- */
.card--clickable { cursor: pointer; }
.card__more {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 18px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-primary);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.card--clickable:hover .card__more,
.card--clickable:focus-visible .card__more { opacity: 1; transform: none; }
.card--clickable:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
@media (hover: none) { .card__more { opacity: 1; transform: none; } }

/* ---------- Service detail panel (inline, expandable) ---------- */
.svc-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .4s ease;
}
.svc-panel.open { grid-template-rows: 1fr; opacity: 1; }
.svc-panel__inner { overflow: hidden; min-height: 0; }
.svc-panel__card {
  position: relative;
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-xl);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: var(--sh-lg);
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.svc-panel__close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-ink-2);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .3s var(--ease), background .25s, color .25s;
}
.svc-panel__close:hover { background: var(--c-bg-soft); color: var(--c-ink); transform: rotate(90deg); }
.svc-panel__side { align-self: center; }

.svc-detail__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--g-primary); color: #fff;
  display: grid; place-items: center; margin-bottom: 18px;
  box-shadow: var(--sh-glow);
}
.svc-detail__icon svg { width: 26px; height: 26px; }
.svc-panel h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 4px 0 16px; padding-right: 44px; }
.svc-detail__hook {
  font-size: 1.1rem; font-weight: 600; color: var(--c-ink);
  line-height: 1.5; margin-bottom: 14px;
  padding-left: 16px; border-left: 3px solid var(--c-primary);
}
.svc-detail__desc { color: var(--c-ink-3); font-size: var(--fs-sm); }
.svc-detail__benefits { display: flex; flex-direction: column; gap: 14px; }
.svc-detail__benefits .b { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2); }
.svc-detail__benefits .b .ck {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--g-tint); color: var(--c-primary); display: grid; place-items: center;
}
.svc-detail__benefits .b .ck svg { width: 15px; height: 15px; }

@media (max-width: 760px) { .svc-panel__card { grid-template-columns: 1fr; } }

/* Active card while its panel is open */
.card--clickable.is-active { border-color: transparent; transform: translateY(-7px); box-shadow: 0 22px 50px rgba(31,58,46,0.16), 0 8px 18px rgba(31,58,46,0.05); }
.card--clickable.is-active::after { opacity: 1; }
.card--clickable.is-active .card__icon { background: var(--g-primary); color: #fff; box-shadow: var(--sh-glow); }
.card--clickable.is-active .card__more { opacity: 1; transform: none; }

/* ---------- Modal / Popup ---------- */
body.modal-open { overflow: hidden; }
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 44px 24px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal.open { opacity: 1; visibility: visible; }
.modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(31,58,46,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.modal__dialog {
  position: relative;
  width: 100%; max-width: 480px;
  margin: auto;
  transform: translateY(40px) scale(0.92);
  opacity: 0;
  transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .4s ease;
}
.modal.open .modal__dialog { transform: none; opacity: 1; }
.modal__dialog .calc { box-shadow: 0 40px 90px rgba(31,58,46,0.28); }
.modal__close {
  position: absolute; top: -14px; right: -14px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-border); background: #fff; color: var(--c-ink-2);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh-md);
  transition: transform .3s var(--ease), background .25s, color .25s;
}
.modal__close:hover { background: var(--c-bg-soft); color: var(--c-ink); transform: rotate(90deg); }

/* Floating launcher to re-open the calculator after closing */
.calc-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  display: none; align-items: center; gap: 10px;
  padding: 13px 20px; border: none; border-radius: var(--r-pill);
  background: var(--g-primary); color: #fff; font-weight: 600; font-size: var(--fs-sm);
  cursor: pointer; box-shadow: var(--sh-glow);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.calc-launcher.show { display: inline-flex; animation: calcIn .4s var(--ease); }
.calc-launcher--link { display: inline-flex; text-decoration: none; }

/* =====================================================================
   Footer — Social Icons
   ===================================================================== */
.footer__social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.footer__social a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  color: var(--c-ink-2);
  background: #fff;
  transition: transform .25s var(--ease), border-color .25s, color .25s, background .25s, box-shadow .25s;
}
.footer__social a:hover {
  transform: translateY(-2px);
  color: var(--c-primary);
  border-color: var(--c-primary);
  background: var(--c-bg-tint);
  box-shadow: var(--sh-sm);
}
.footer__social a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
.footer__social svg { width: 18px; height: 18px; display: block; }

/* =====================================================================
   Testimonials — Editorial pull-quote style
   ===================================================================== */
.testimonials { padding-block: clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.testimonials .container { position: relative; z-index: 1; }
.testimonials::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,163,106,0.06), transparent 60%),
    var(--c-bg-soft);
  pointer-events: none;
}
.testimonials__head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.testimonials__head .eyebrow--italic { display: inline-block; margin-bottom: 12px; }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.testimonial {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 32px 28px 28px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.testimonial__mark {
  font-family: var(--ff-display);
  font-weight: 600;
  font-style: italic;
  font-size: 4.4rem;
  line-height: 0.7;
  color: var(--c-accent);
  margin-bottom: 6px;
  user-select: none;
}
.testimonial__quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin-bottom: 26px;
  flex: 1 1 auto;
}
.testimonial__author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}
.testimonial__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--g-primary);
  display: grid; place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: var(--ff-body);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.testimonial__meta { display: flex; flex-direction: column; }
.testimonial__name { font-weight: 600; font-size: 0.95rem; color: var(--c-ink); line-height: 1.2; }
.testimonial__role { font-size: 0.82rem; color: var(--c-ink-3); margin-top: 2px; }
.testimonial--placeholder { opacity: 0.85; border-style: dashed; }
.testimonial--placeholder .testimonial__avatar { background: var(--c-border-2); color: var(--c-ink-3); }
.testimonials__note {
  text-align: center;
  margin-top: clamp(28px, 4vw, 44px);
  font-size: 0.88rem;
  color: var(--c-ink-3);
  font-style: italic;
}

@media (max-width: 920px) { .testimonials__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .testimonials__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Portrait (Über uns)
   ===================================================================== */
.portrait {
  position: relative;
  border-radius: clamp(18px, 2vw, 26px);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  background: var(--c-bg-soft);
  aspect-ratio: 4 / 5;
  max-width: 460px;
  margin: 0 auto;
}
.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.portrait:hover img { transform: scale(1.03); }
.portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(31,58,46,0.18) 100%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .portrait { aspect-ratio: 4 / 5; max-width: 360px; }
}
.calc-launcher:hover { transform: translateY(-2px); box-shadow: 0 26px 70px rgba(31,58,46,0.3); }
.calc-launcher svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .calc-launcher span { display: none; } .calc-launcher { padding: 14px; } }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
.reveal[data-delay="5"]{ transition-delay:.40s; }

/* Pronounced "pop-in" (used e.g. for the offer calculator) */
.reveal-pop {
  opacity: 0;
  transform: translateY(34px) scale(0.92);
  transition: opacity .6s ease, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}
.reveal-pop.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2,1fr); }
  /* projects-grid: bento stays 3-col on tablets, only collapses on mobile (see 760px rule) */
  .blog-grid { grid-template-columns: repeat(2,1fr); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .stats { grid-template-columns: repeat(2,1fr); }
  .post--feature .post__inner { grid-template-columns:1fr; }
  .post--feature { grid-column: span 2; }
}
@media (max-width: 860px) {
  .nav__links { display:none; }
  .nav__toggle { display:flex; }
  body.nav-open .nav__links {
    display:flex; position:absolute; top:74px; left:0; right:0;
    flex-direction:column; gap:4px; padding:18px var(--gutter) 26px;
    background:rgba(255,255,255,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--c-border); box-shadow: var(--sh-md);
  }
  body.nav-open .nav__links a { padding:12px 14px; }
  .hero__grid { grid-template-columns:1fr; }
  .hero__visual { order:-1; max-width:540px; }
  .split, .split--narrow, .contact-grid { grid-template-columns:1fr; }
  .process__track { grid-template-columns: repeat(2,1fr); gap:28px; }
  .process__line { display:none; }
  .nav__right .btn--primary { display:none; }
}
@media (max-width: 560px) {
  .services-grid, .projects-grid, .blog-grid, .team-grid, .stats { grid-template-columns: 1fr; }
  .checklist { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
  .process__track { grid-template-columns:1fr; }
  .hero__trust { gap:20px; }
  .post--feature { grid-column: span 1; }
  .footer__row { flex-direction:column; text-align:center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal-pop { opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   PREMIUM LAYER — Apple × Linear × Stripe × Vercel × Raycast
   Cinematic · Atmospheric · Editorial
   ===================================================================== */

/* ---------- Display font for headlines (kept here for late-override safety) ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 96;
}

/* ---------- Noise texture overlay ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Premium keyframes ---------- */
@keyframes floatDevice {
  0%,100% { transform: translateY(0px) rotate(-1.5deg); }
  33%      { transform: translateY(-14px) rotate(-0.5deg); }
  66%      { transform: translateY(-7px) rotate(-2.2deg); }
}
@keyframes floatPhone {
  0%,100% { transform: translateY(0px) rotate(2deg); }
  40%     { transform: translateY(-18px) rotate(3.5deg); }
  70%     { transform: translateY(-9px) rotate(1.4deg); }
}
@keyframes glowPulse {
  0%,100% { opacity: 0.5; transform: scale(1); }
  50%     { opacity: 0.78; transform: scale(1.12); }
}
@keyframes ambientDrift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(-22px,32px) scale(1.08); }
  66%  { transform: translate(28px,-18px) scale(0.94); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-14deg); }
  100% { transform: translateX(280%) skewX(-14deg); }
}

/* ---------- Hero — reset to standard 2-col container ---------- */
.hero > .container.wide {
  max-width: var(--container-wide);
  padding-inline: var(--gutter);
}
.hero {
  min-height: 100svh;
  padding-top: clamp(88px, 10vw, 140px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

/* ---------- Hero animated headline gradient ---------- */
.hero h1 .text-grad {
  background: linear-gradient(135deg, #1A322A 0%, #1F3A2E 30%, #C9A36A 60%, #3E6B53 100%);
  background-size: 250% 250%;
  animation: gradient-shift 7s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Hero visual column ---------- */
.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: clamp(0px, 2vw, 32px);
}

.device-scene {
  position: relative;
  width: 100%;
  max-width: 540px;
}

/* Atmospheric glow halo behind devices */
.device-scene::before {
  content: "";
  position: absolute;
  inset: -20% -15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 55%,
    rgba(31,58,46,0.22) 0%,
    rgba(201,163,106,0.12) 40%,
    transparent 68%);
  animation: glowPulse 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Orbit rings */
.device-scene__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.device-scene__ring--1 {
  inset: -6%;
  border: 1px solid rgba(31,58,46,0.14);
  animation: ambientDrift 22s ease-in-out infinite;
}
.device-scene__ring--2 {
  inset: -18%;
  border: 1px solid rgba(201,163,106,0.07);
  animation: ambientDrift 30s ease-in-out infinite reverse;
}

/* MacBook */
.device-laptop {
  position: relative;
  z-index: 2;
  animation: floatDevice 7.5s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 32px 64px rgba(31,58,46,0.26)) drop-shadow(0 8px 20px rgba(31,58,46,0.14));
}
.device-laptop__lid {
  background: linear-gradient(145deg, #282c3a 0%, #1c1f2e 55%, #141720 100%);
  border-radius: 14px 14px 0 0;
  padding: 10px 10px 0;
}
.device-laptop__bar {
  display: flex; gap: 5px;
  padding: 4px 5px 8px;
}
.device-laptop__bar i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.device-laptop__bar i:nth-child(1) { background: #ff5f57; }
.device-laptop__bar i:nth-child(2) { background: #febc2e; }
.device-laptop__bar i:nth-child(3) { background: #28c840; }
.device-laptop__screen {
  border-radius: 6px; overflow: hidden;
  background: #0d0f18; aspect-ratio: 16/10; position: relative;
}
.device-laptop__base {
  height: 12px;
  background: linear-gradient(180deg, #32364a 0%, #262938 100%);
  border-radius: 0 0 12px 12px;
  margin: 0 -20px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
.device-laptop__base::after {
  content: ""; display: block;
  width: 100px; height: 5px;
  background: rgba(255,255,255,0.06);
  border-radius: 0 0 6px 6px; margin: 0 auto;
}

/* iPhone */
.device-phone {
  position: absolute;
  right: -5%; bottom: -7%;
  width: 23%; min-width: 108px;
  z-index: 3;
  animation: floatPhone 5.8s ease-in-out infinite 1.2s;
  will-change: transform;
  filter: drop-shadow(0 20px 44px rgba(31,58,46,0.32));
}
.device-phone__shell {
  background: linear-gradient(145deg, #282c3a 0%, #141720 100%);
  border-radius: 22px; padding: 7px; position: relative;
}
.device-phone__screen {
  border-radius: 15px; overflow: hidden;
  background: #0d0f18; aspect-ratio: 9/19; position: relative;
}
.device-phone__notch {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 5px;
  background: #08090c; border-radius: 5px; z-index: 1;
}

/* Dark-mode faux screen content — laptop */
.dev-screen {
  width: 100%; height: 100%;
  background: linear-gradient(155deg, #0d0f18 0%, #131625 100%);
  display: flex; flex-direction: column;
  padding: 8px 10px; gap: 6px; overflow: hidden;
}
.dev-screen__nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 2px;
}
.dev-screen__logo {
  width: 16px; height: 16px; border-radius: 4px;
  background: linear-gradient(135deg, #1F3A2E, #C9A36A);
}
.dev-screen__dots { display: flex; gap: 3px; }
.dev-screen__dots i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); display: block; }
.dev-screen__dots i:last-child { width: 32px; background: rgba(31,58,46,0.6); }
.dev-screen__hero {
  flex: 1; border-radius: 5px;
  background: linear-gradient(135deg, rgba(31,58,46,0.2) 0%, rgba(201,163,106,0.12) 100%);
  position: relative; overflow: hidden;
}
.dev-screen__hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 28% 55%, rgba(31,58,46,0.38) 0%, transparent 58%);
}
.dev-screen__hero::after {
  content: ""; position: absolute;
  bottom: 0; left: 0; right: 0; height: 55%;
  background: linear-gradient(transparent, rgba(13,15,24,0.55));
}
.dev-screen__title {
  position: absolute; bottom: 8px; left: 10px; right: 10px; z-index: 1;
}
.dev-screen__title b {
  display: block; height: 5px; width: 80%; border-radius: 3px;
  background: rgba(255,255,255,0.82); margin-bottom: 4px;
}
.dev-screen__title span {
  display: block; height: 3px; width: 55%; border-radius: 2px;
  background: rgba(255,255,255,0.38);
}
.dev-screen__cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.dev-screen__cards i {
  height: 26px; border-radius: 5px; display: block;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

/* Dark-mode faux screen content — phone */
.dev-screen--phone {
  padding: 20px 7px 7px; gap: 5px;
}
.dev-bar {
  height: 4px; border-radius: 3px;
  background: rgba(255,255,255,0.08); margin-bottom: 2px;
}
.dev-bar--accent {
  background: linear-gradient(90deg, #1F3A2E, #C9A36A);
  width: 72%;
}
.dev-card {
  border-radius: 7px; padding: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; gap: 4px;
}
.dev-card b { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.28); width: 78%; }
.dev-card span { display: block; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.12); width: 52%; }

/* ---------- Atmospheric section orbs ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(72px);
  z-index: 0;
}
.orb--tl { top: -12%; left: -10%; width: 48vw; height: 48vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle, rgba(31,58,46,0.1) 0%, transparent 65%); animation: glowPulse 13s ease-in-out infinite; }
.orb--tr { top: -12%; right: -10%; width: 42vw; height: 42vw; max-width: 460px; max-height: 460px; background: radial-gradient(circle, rgba(201,163,106,0.09) 0%, transparent 65%); animation: glowPulse 16s ease-in-out infinite reverse; }
.orb--bl { bottom: -12%; left: -10%; width: 42vw; height: 42vw; max-width: 460px; max-height: 460px; background: radial-gradient(circle, rgba(184,145,90,0.08) 0%, transparent 65%); animation: glowPulse 19s ease-in-out infinite 3s; }
.orb--br { bottom: -12%; right: -10%; width: 48vw; height: 48vw; max-width: 520px; max-height: 520px; background: radial-gradient(circle, rgba(31,58,46,0.07) 0%, transparent 65%); animation: glowPulse 15s ease-in-out infinite 1.5s; }
.orb--center { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60vw; height: 60vw; max-width: 640px; max-height: 640px; background: radial-gradient(circle, rgba(31,58,46,0.06) 0%, transparent 65%); animation: glowPulse 20s ease-in-out infinite 2s; }

/* ---------- Premium eyebrow pill ---------- */
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px 5px 6px; border-radius: 100px;
  background: rgba(31,58,46,0.08);
  border: 1px solid rgba(31,58,46,0.18);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-primary); margin-bottom: 20px;
}
.eyebrow--pill i {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--g-primary); color: #fff;
  display: grid; place-items: center; font-style: normal;
  flex-shrink: 0; font-size: 10px; line-height: 1;
}

/* ---------- Animated CTA band ---------- */
.cta-band--cinematic {
  background: linear-gradient(135deg, #1A322A 0%, #1F3A2E 28%, #C9A36A 58%, #C9A36A 100%);
  background-size: 260% 260%;
  animation: gradient-shift 9s ease infinite;
}
.cta-band--cinematic .cta-shimmer {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
}
.cta-band--cinematic .cta-shimmer::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  animation: shimmer 7s ease-in-out infinite 2.5s;
}

/* ---------- Responsive premium ---------- */
@media (max-width: 860px) {
  .hero__visual { display: none; }
  .device-scene { display: none; }
}

/* =====================================================================
   CINEMATIC LAYER — Stripe-level atmosphere, depth, emotion
   ===================================================================== */

/* ── Dark hero ───────────────────────────────────────────────────── */
.hero--cinematic {
  background: #07071A;
  padding-bottom: clamp(120px, 18vw, 220px); /* extra space for the fade */
}

/* Autoplay background video — cinematic dark hero */
.hero__video--bg { opacity: 0.28 !important; mix-blend-mode: screen; }
.hero--cinematic .hero__video.ready { opacity: 0.28; mix-blend-mode: screen; }

/* Aurora mesh — replaces the flat scrim */
.hero--cinematic .hero__scrim {
  background:
    radial-gradient(ellipse 80% 65% at 68% 30%, rgba(31,58,46,0.38) 0%, transparent 60%),
    radial-gradient(ellipse 55% 85% at 5%  65%, rgba(31,58,46,0.42)  0%, transparent 58%),
    radial-gradient(ellipse 65% 55% at 95% 78%, rgba(201,163,106,0.28) 0%, transparent 58%),
    radial-gradient(ellipse 40% 40% at 45% 8%,  rgba(201,163,106,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(201,163,106,0.10) 0%, transparent 70%),
    linear-gradient(160deg, #09091E 0%, #07071A 55%, #0A0A22 100%);
}

/* Bigger, brighter aurora blobs on dark bg */
.hero--cinematic .blob--1 {
  width: 700px; height: 700px;
  top: -240px; right: -140px;
  background: radial-gradient(circle, rgba(31,58,46,0.55), transparent 68%);
  opacity: 0.75;
  filter: blur(90px);
}
.hero--cinematic .blob--2 {
  width: 560px; height: 560px;
  bottom: -120px; left: -90px;
  background: radial-gradient(circle, rgba(31,58,46,0.55), transparent 68%);
  opacity: 0.65;
  filter: blur(90px);
}
.hero--cinematic .blob--3 {
  width: 420px; height: 420px;
  top: 25%; right: 28%;
  background: radial-gradient(circle, rgba(201,163,106,0.3), transparent 68%);
  opacity: 0.55;
  filter: blur(100px);
}

/* Extra aurora accent — warm magenta for cinematic depth */
.aurora-accent {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(100px);
}
.aurora-accent--1 {
  width: 380px; height: 260px;
  bottom: 0; right: 18%;
  background: radial-gradient(circle, rgba(201,163,106,0.22), transparent 70%);
  animation: float1 24s ease-in-out infinite reverse;
}
.aurora-accent--2 {
  width: 300px; height: 300px;
  top: 10%; left: 18%;
  background: radial-gradient(circle, rgba(31,58,46,0.18), transparent 70%);
  animation: float2 28s ease-in-out infinite;
}

/* Hero text — white on dark */
.hero--cinematic h1 { color: #fff; }
.hero--cinematic .hero__lead { color: rgba(255,255,255,0.66); }
.hero--cinematic .eyebrow--pill {
  background: rgba(31,58,46,0.2);
  border-color: rgba(140,130,255,0.35);
  color: rgba(200,195,255,0.92);
}
.hero--cinematic .eyebrow--pill i {
  background: linear-gradient(135deg, #1F3A2E, #1F3A2E);
}

/* Gradient text — vivid, luminous on dark */
.hero--cinematic h1 .text-grad {
  background: linear-gradient(135deg, #C4B5FD 0%, #A78BFF 25%, #818CF8 55%, #93C5FD 100%);
  background-size: 280% 280%;
  animation: gradient-shift 7s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Buttons on dark bg */
.hero--cinematic .btn--ghost {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.86);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
}
.hero--cinematic .btn--ghost:hover {
  background: rgba(255,255,255,0.13);
  border-color: rgba(255,255,255,0.28);
  box-shadow: none;
}
.hero--cinematic .btn--primary {
  box-shadow: 0 0 30px rgba(31,58,46,0.5), 0 8px 20px rgba(31,58,46,0.3);
}
.hero--cinematic .btn--primary:hover {
  box-shadow: 0 0 50px rgba(31,58,46,0.65), 0 14px 30px rgba(31,58,46,0.35);
}

/* Device scene — stronger glow on dark */
.hero--cinematic .device-scene::before {
  background: radial-gradient(ellipse at 48% 55%,
    rgba(31,58,46,0.45) 0%,
    rgba(201,163,106,0.22) 38%,
    transparent 66%);
  animation: glowPulse 6s ease-in-out infinite;
}
.hero--cinematic .device-laptop {
  filter:
    drop-shadow(0 0 40px rgba(31,58,46,0.45))
    drop-shadow(0 30px 60px rgba(31,58,46,0.55))
    drop-shadow(0 8px 20px rgba(31,58,46,0.2));
}
.hero--cinematic .device-phone {
  filter:
    drop-shadow(0 0 28px rgba(31,58,46,0.5))
    drop-shadow(0 18px 40px rgba(31,58,46,0.6));
}

/* Gradient fade: dark hero → white content */
.hero__fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: clamp(100px, 16vw, 200px);
  background: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
  z-index: 3;
  pointer-events: none;
}

/* Logos strip sits above the fade */
.logos-strip { position: relative; z-index: 4; }

/* ── Typography upgrades ─────────────────────────────────────────── */
.hero h1 {
  font-size: clamp(3rem, 6.8vw, 5.8rem);
  letter-spacing: -0.045em;
  line-height: 1.0;
  font-weight: 900;
}
.section-title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -0.032em;
  line-height: 1.06;
  font-weight: 900;
}
h3 { letter-spacing: -0.02em; }

/* ── Process section — warm gradient background ──────────────────── */
.proc-section {
  background: linear-gradient(180deg,
    #ffffff 0%,
    #F5F3FF 30%,
    #EEF2FF 55%,
    #F5F3FF 78%,
    #ffffff 100%);
}
.proc-step {
  grid-template-columns: clamp(72px, 8vw, 100px) 1fr;
  overflow: visible;
}
.proc-step__num {
  background: var(--g-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
  font-size: clamp(2.4rem, 3.8vw, 4.2rem);
  overflow: visible;
  white-space: nowrap;
}

/* ── Card depth upgrade ──────────────────────────────────────────── */
.card:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow:
    0 30px 70px rgba(31,58,46,0.18),
    0 10px 28px rgba(31,58,46,0.07);
}

/* ── Leistungen section — atmospheric ───────────────────────────── */
.section--soft {
  background:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(31,58,46,0.055) 0%, transparent 60%),
    radial-gradient(ellipse 60% 70% at 10% 80%, rgba(201,163,106,0.05) 0%, transparent 60%),
    var(--c-bg-soft);
}

/* ── CTA band — deep cinematic ───────────────────────────────────── */
.cta-band--cinematic {
  background: linear-gradient(135deg,
    #11221C 0%,
    #1A322A 18%,
    #1F3A2E 38%,
    #2A4D3A 56%,
    #C9A36A 78%,
    #B8915A 100%);
  background-size: 320% 320%;
  animation: gradient-shift 11s ease infinite;
  box-shadow:
    0 48px 120px rgba(31,58,46,0.32),
    0 20px 50px rgba(31,58,46,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12);
  padding: clamp(32px, 4vw, 52px) clamp(40px, 7vw, 88px);
  text-align: center;
}
.cta-band--cinematic h2,
.cta-band--cinematic p { text-align: center; margin-left: auto; margin-right: auto; }
.cta-band--cinematic .btn { margin-left: auto; margin-right: auto; display: inline-flex; }
.cta-band--cinematic h2 {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  letter-spacing: -0.035em;
  margin-bottom: 12px;
  line-height: 1.15;
}
.cta-band--cinematic p {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: rgba(255,255,255,0.82);
  margin-bottom: 22px;
}

/* ── Section dividers — subtle gradient ─────────────────────────── */
.logos-strip {
  background: #ffffff;
  border-top: none;
  border-bottom: none;
  box-shadow: none;
}

/* ── FAQ (KI-optimiert) ──────────────────────────────────────────── */
.faq-list {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 12px;
}
.faq-item {
  background: #fff;
  border: 1px solid rgba(31,58,46,0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.faq-item[open] {
  border-color: rgba(31,58,46,0.28);
  box-shadow: 0 12px 36px rgba(31,58,46,0.1);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 20px 24px;
  font-family: var(--ff-display);
  font-weight: 600; font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--c-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex-shrink: 0;
  width: 22px; height: 22px;
  background: var(--g-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item summary:hover { color: var(--c-primary); }
.faq-answer { padding: 0 24px 22px; }
.faq-answer p {
  margin: 0; color: var(--c-ink-2);
  font-size: clamp(0.95rem, 1.2vw, 1.02rem); line-height: 1.65;
}

/* ── Foto-Platzhalter (Über uns) ─────────────────────────────────── */
.photo-ph {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 70% at 30% 20%, rgba(31,58,46,0.16) 0%, transparent 60%),
    radial-gradient(ellipse 70% 80% at 80% 90%, rgba(201,163,106,0.14) 0%, transparent 60%),
    linear-gradient(135deg, #F5F3FF 0%, #EEF2FF 50%, #F5F3FF 100%);
  border: 1px solid rgba(31,58,46,0.14);
  display: grid;
  place-items: center;
}
.photo-ph::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(31,58,46,0.025) 14px, rgba(31,58,46,0.025) 28px);
  pointer-events: none;
}
.photo-ph__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: var(--c-primary);
}
.photo-ph__inner svg {
  width: clamp(56px, 8vw, 84px);
  height: clamp(56px, 8vw, 84px);
  opacity: 0.5;
}
.photo-ph__inner span {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-primary); opacity: 0.6;
}

/* ── Website Score Checker ───────────────────────────────────────── */
.score-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(48px, 7vw, 88px) clamp(28px, 6vw, 72px);
  text-align: center;
  background: linear-gradient(135deg, #0F1F18 0%, #1F3A2E 25%, #2a4d3d 50%, #B8915A 80%, #C9A36A 100%);
  background-size: 280% 280%;
  animation: gradient-shift 10s ease infinite;
  box-shadow: 0 48px 120px rgba(31,58,46,0.45), 0 16px 40px rgba(31,58,46,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
.score-band h2 {
  color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  position: relative; z-index: 1;
}
.score-band > .score-band__inner { position: relative; z-index: 1; }
.score-band p {
  color: rgba(255,255,255,0.8);
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Orb accents inside band */
.score-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(60px);
}
.score-orb--1 {
  width: 380px; height: 380px; top: -160px; right: -80px;
  background: rgba(255,255,255,0.12);
  animation: glowPulse 8s ease-in-out infinite;
}
.score-orb--2 {
  width: 300px; height: 300px; bottom: -140px; left: -60px;
  background: rgba(255,255,255,0.08);
  animation: glowPulse 12s ease-in-out infinite reverse;
}

/* Honeypot — vor Menschen versteckt, von Bots ausgefüllt */
.score-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  overflow: hidden;
}

/* Input row */
.score-form { width: 100%; max-width: 680px; margin: 0 auto 28px; }
.score-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.97);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 20px;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(31,58,46,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
.score-input-icon {
  flex-shrink: 0; color: var(--c-ink-3);
  display: flex; align-items: center;
}
.score-input-icon svg { width: 20px; height: 20px; }
.score-input {
  flex: 1; border: none; background: transparent;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: var(--c-ink);
  outline: none;
  min-width: 0;
}
.score-input::placeholder { color: var(--c-ink-3); }
.score-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #C9A36A, #1F3A2E);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 4px 14px rgba(31,58,46,0.4);
}
.score-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(31,58,46,0.5);
}

/* Result message */
.score-result {
  display: none;
  margin-top: 16px;
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.score-result.show { display: block; }

/* Feature pills */
.score-pills {
  display: flex; gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.score-pills span {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.score-pills span svg { width: 16px; height: 16px; opacity: 0.85; }

/* Score states */
.score-state { width: 100%; }
.score-error {
  color: rgba(255,200,100,0.9); font-size: var(--fs-sm);
  margin-top: 10px; min-height: 20px; font-weight: 500;
}

/* Loading spinner */
.score-loader { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 0; }
.score-spinner {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.score-loader p { color: #fff; font-size: 1.1rem; font-weight: 600; margin: 0; }

/* Result URL label */
.score-result-url {
  color: rgba(255,255,255,0.65); font-size: var(--fs-sm);
  margin-bottom: 28px; font-weight: 500;
}

/* Score rings layout */
.score-rings {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 3vw, 32px); flex-wrap: wrap; margin-bottom: 28px;
}
.score-ring-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  position: relative;
}
.score-ring { width: 80px; height: 80px; transform: rotate(-90deg); }
.score-ring--main { width: 110px; height: 110px; }
.score-ring__bg { fill: none; stroke: rgba(255,255,255,0.15); stroke-width: 6; }
.score-ring--main .score-ring__bg { stroke-width: 7; }
.score-ring__fill {
  fill: none; stroke: #fff; stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 201; /* 2π×32 */
  stroke-dashoffset: 201;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4,0,0.2,1), stroke 0.6s;
}
.score-ring--main .score-ring__fill {
  stroke-dasharray: 264; /* 2π×42 */
  stroke-dashoffset: 264;
  stroke-width: 7;
}
/* Color states */
.score-ring__fill[data-grade="good"]   { stroke: #4ade80; }
.score-ring__fill[data-grade="ok"]     { stroke: #fbbf24; }
.score-ring__fill[data-grade="poor"]   { stroke: #f87171; }

.score-ring__val {
  position: absolute; top: 40px; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; font-size: 1.3rem; font-weight: 900;
  letter-spacing: -0.03em; line-height: 1;
  pointer-events: none;
}
.score-ring__val--main { font-size: 1.8rem; top: 55px; }
.score-ring__label {
  color: rgba(255,255,255,0.75); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-align: center;
}
.score-ring-wrap--main .score-ring__label { color: rgba(255,255,255,0.9); font-size: 0.78rem; }

/* Tips */
.score-tips {
  display: flex; flex-direction: column; gap: 10px;
  max-width: 600px; margin: 0 auto;
}
.score-tip {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-md); padding: 12px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  text-align: left;
}
.score-tip__icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.score-tip__text { font-size: var(--fs-sm); color: rgba(255,255,255,0.85); line-height: 1.55; }
.score-tip__text strong { color: #fff; display: block; margin-bottom: 2px; }

/* Ghost button variant */
.score-btn--ghost {
  background: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255,255,255,0.25);
}
.score-btn--ghost:hover { background: rgba(255,255,255,0.2) !important; }

@media (max-width: 560px) {
  .score-input-wrap { flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-lg); }
  .score-btn { width: 100%; justify-content: center; }
  .score-pills { gap: 14px; }
  .score-ring { width: 64px; height: 64px; }
  .score-ring--main { width: 90px; height: 90px; }
  .score-rings { gap: 10px; }
}

/* ── Global atmospheric glow — every page ───────────────────────── */

/* Page-hero sub-pages */
.page-hero::before {
  content: "";
  position: absolute;
  top: -35%; right: -12%;
  width: 62vw; height: 62vw;
  max-width: 660px; max-height: 660px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,58,46,0.11) 0%, transparent 65%);
  filter: blur(74px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 14s ease-in-out infinite;
}
.page-hero::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -10%;
  width: 52vw; height: 52vw;
  max-width: 560px; max-height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,163,106,0.09) 0%, transparent 65%);
  filter: blur(74px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 20s ease-in-out infinite reverse;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .breadcrumb,
.page-hero h1,
.page-hero p { position: relative; z-index: 1; }

/* Every .section — alternating orbs left/right */
.section::before {
  content: "";
  position: absolute;
  top: -25%; right: -10%;
  width: 55vw; height: 55vw;
  max-width: 580px; max-height: 580px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,58,46,0.08) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 17s ease-in-out infinite;
}
.section::after {
  content: "";
  position: absolute;
  bottom: -25%; left: -10%;
  width: 50vw; height: 50vw;
  max-width: 530px; max-height: 530px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,163,106,0.07) 0%, transparent 65%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: glowPulse 23s ease-in-out infinite reverse 2s;
}
/* Odd sections flip sides for visual rhythm */
.section:nth-of-type(odd)::before { right: auto; left: -10%; }
.section:nth-of-type(odd)::after  { left: auto;  right: -10%; }

/* Ensure section content stays above orbs */
.section > .container,
.section > .container.wide { position: relative; z-index: 1; }

/* Section--soft gets a warmer tint */
.section--soft::before {
  background: radial-gradient(circle, rgba(31,58,46,0.09) 0%, transparent 65%);
}
.section--soft::after {
  background: radial-gradient(circle, rgba(184,145,90,0.07) 0%, transparent 65%);
}

/* hero section on index — orbs already handled by blobs, no duplicate */
.hero::before, .hero::after { display: none; }

/* ── Score Checker — Extended UI ────────────────────────────────── */

/* Header row: URL label + tabs */
.score-res-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.score-result-url {
  margin: 0; min-width: 0; flex: 1 1 auto; max-width: 100%;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.score-result-url__label {
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.score-result-url__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #fff; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  max-width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.score-result-url__chip > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
  font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
}
.score-result-url__chip svg { flex: none; opacity: 0.7; }
.score-result-url__chip:hover {
  background: rgba(201,163,106,0.18);
  border-color: rgba(201,163,106,0.45);
  transform: translateY(-1px);
  color: #fff;
}
.score-result-url__chip:hover svg { opacity: 1; }
.score-result-url__ext { opacity: 0.5; }

/* Mobile / Desktop tabs */
.score-tabs {
  display: inline-flex; gap: 4px;
  background: rgba(255,255,255,0.1); border-radius: 100px;
  padding: 4px;
}
.score-tab {
  padding: 7px 18px; border: none; border-radius: 100px;
  background: transparent; color: rgba(255,255,255,0.65);
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
}
.score-tab.active {
  background: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.score-tab:hover:not(.active) { background: rgba(255,255,255,0.12); color: #fff; }

/* Section labels */
.score-section-label {
  color: rgba(255,255,255,0.5); font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 14px;
}

/* ── Core Web Vitals ─────────────────────────────────────────────── */
.score-vitals { margin-bottom: 28px; text-align: left; }
.score-vitals__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.vital-chip {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md); padding: 14px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: background 0.3s, border-color 0.3s;
}
.vital-chip__name {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}
.vital-chip__val {
  font-size: 1.15rem; font-weight: 900; color: #fff;
  letter-spacing: -0.02em; line-height: 1;
}
.vital-chip__desc {
  font-size: 0.65rem; color: rgba(255,255,255,0.45); font-weight: 500;
  text-align: center;
}
.vital-chip[data-grade="good"]  { border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.08); }
.vital-chip[data-grade="ok"]    { border-color: rgba(251,191,36,0.35);  background: rgba(251,191,36,0.08);  }
.vital-chip[data-grade="poor"]  { border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); }
.vital-chip[data-grade="good"] .vital-chip__name  { color: #4ade80; }
.vital-chip[data-grade="ok"]   .vital-chip__name  { color: #fbbf24; }
.vital-chip[data-grade="poor"] .vital-chip__name  { color: #f87171; }

/* ── LuxWare Empfehlungen ────────────────────────────────────────── */
.score-recs { margin-bottom: 28px; text-align: left; }
.score-recs__list { display: flex; flex-direction: column; gap: 8px; }
.score-rec-item {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-md); padding: 13px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.score-rec-item__icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.score-rec-item__body { flex: 1; }
.score-rec-item__title {
  color: #fff; font-size: 0.9rem; font-weight: 700;
  margin: 0 0 3px; display: block;
}
.score-rec-item__desc {
  color: rgba(255,255,255,0.72); font-size: var(--fs-sm);
  line-height: 1.5; margin: 0;
}
.score-rec-item__tag {
  flex-shrink: 0; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
  background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6);
  align-self: flex-start;
}
.score-rec-item__tag--high { background: rgba(248,113,113,0.25); color: #fca5a5; }
.score-rec-item__tag--med  { background: rgba(251,191,36,0.22);  color: #fde68a; }
.score-rec-item__tag--low  { background: rgba(74,222,128,0.18);  color: #86efac; }

/* ── SEO-Detailanalyse (eigener Analyzer) ───────────────────────────── */
.score-seo-breakdown {
  margin-bottom: 14px; padding: 16px 18px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
}
.score-seo-breakdown__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px; color: #fff; font-weight: 700; font-size: 0.95rem;
}
.score-seo-breakdown__head span { color: rgba(255,255,255,0.5); font-size: 0.78rem; font-weight: 600; }
.score-seo-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 0; font-size: 0.85rem; color: rgba(255,255,255,0.82);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.score-seo-row:first-of-type { border-top: 0; }
.score-seo-row__ic { flex: none; font-size: 0.9rem; }
.score-seo-row__label em {
  display: block; color: rgba(255,255,255,0.45); font-style: normal;
  font-size: 0.76rem; margin-top: 2px;
}
.score-seo-row--fail .score-seo-row__label { color: #fff; }

/* Disclaimer */
.score-band p.score-disclaimer,
.score-disclaimer {
  display: block;
  text-align: right !important;
  color: rgba(255,255,255,0.15);
  font-size: 0.58rem !important;
  line-height: 1.35;
  margin: 8px 0 0 auto !important;
  max-width: 240px !important;
  font-style: italic;
}


/* ── Score Verlauf ───────────────────────────────────────────────── */
.score-history { margin-bottom: 28px; text-align: left; }
.score-history__list { display: flex; flex-direction: column; gap: 7px; }
.score-history__item {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-md); padding: 11px 14px;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  cursor: pointer; transition: background 0.2s;
}
.score-history__item:hover { background: rgba(255,255,255,0.1); }
.score-history__url {
  color: rgba(255,255,255,0.8); font-size: var(--fs-sm); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.score-history__meta {
  color: rgba(255,255,255,0.4); font-size: 0.7rem; font-weight: 500;
  white-space: nowrap;
}
.score-history__badge {
  font-size: 0.78rem; font-weight: 900; padding: 3px 10px;
  border-radius: 100px; color: #fff;
}
.score-history__badge[data-grade="good"]  { background: rgba(74,222,128,0.3);  color: #4ade80; }
.score-history__badge[data-grade="ok"]    { background: rgba(251,191,36,0.3);   color: #fbbf24; }
.score-history__badge[data-grade="poor"]  { background: rgba(248,113,113,0.3);  color: #f87171; }

/* Loading URL label */
.score-loading-url {
  color: rgba(255,255,255,0.5); font-size: 0.8rem; font-weight: 500;
}

/* Responsive CWV */
@media (max-width: 600px) {
  .score-vitals__row { grid-template-columns: repeat(2, 1fr); }
  .score-res-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 360px) {
  .score-vitals__row { grid-template-columns: 1fr 1fr; }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hero--cinematic { padding-bottom: clamp(80px, 14vw, 140px); }
  .hero__fade { height: clamp(60px, 12vw, 120px); }
  .hero h1 { font-size: clamp(2.4rem, 8vw, 3.6rem); }
}

/* Reduced motion — disable orb animations */
@media (prefers-reduced-motion: reduce) {
  .page-hero::before, .page-hero::after,
  .section::before, .section::after { animation: none !important; }
}

/* =====================================================================
   Blog article (prose) typography
   ===================================================================== */
.article-body { color: var(--c-ink); font-size: 1.04rem; line-height: 1.75; }
.article-body > * + * { margin-top: 1em; }
.article-body h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.01em; margin-top: 2.2em; line-height: 1.25; }
.article-body h3 { font-size: clamp(1.15rem, 1.6vw, 1.32rem); font-weight: 700; margin-top: 1.6em; line-height: 1.3; }
.article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }
.article-body p { color: var(--c-ink-2); }
.article-body strong { color: var(--c-ink); font-weight: 700; }
.article-body ul, .article-body ol { padding-left: 1.4em; color: var(--c-ink-2); }
.article-body li { margin: 0.35em 0; }
.article-body li::marker { color: var(--c-accent, #1F3A2E); }
.article-body a { color: var(--c-accent, #1F3A2E); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--c-ink); }
.article-body blockquote { border-left: 4px solid var(--c-accent, #1F3A2E); padding: 4px 0 4px 18px; font-style: italic; color: var(--c-ink-2); }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.96rem; }
.article-body th, .article-body td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.article-body th { background: rgba(31,58,46,0.06); font-weight: 700; color: var(--c-ink); }
.article-body tr:hover td { background: rgba(31,58,46,0.03); }
.article-body .lead { font-size: 1.15rem; color: var(--c-ink); font-weight: 500; }
.article-body .meta-line { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--c-ink-2); padding: 6px 14px; border-radius: 999px; background: rgba(31,58,46,0.08); }
.article-body .article-cta { margin-top: 2.4em; padding: 28px 30px; border-radius: 18px; background: linear-gradient(135deg, rgba(31,58,46,0.08), rgba(201,163,106,0.06)); border: 1px solid var(--c-border); }
.article-body .article-cta p { margin: 0 0 14px; color: var(--c-ink); font-weight: 500; }

/* =====================================================================
   Accessibility — Skip to content link
   ===================================================================== */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 22px;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  box-shadow: var(--sh-glow);
  transition: top 0.18s var(--ease);
}
.skip-to-content:focus {
  top: 14px;
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* =====================================================================
   Form validation — inline error feedback
   ===================================================================== */
.field.is-invalid { border-color: #C0392B; background: rgba(192,57,43,0.04); }
.field.is-invalid:focus { box-shadow: 0 0 0 4px rgba(192,57,43,0.12); }
.field-error {
  display: block;
  margin-top: 6px;
  font-size: 0.85rem;
  color: #A33323;
  min-height: 1em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s, transform 0.2s;
}
.field-error.is-visible { opacity: 1; transform: translateY(0); }

/* =====================================================================
   Blog detail page — hero image between page-hero and article body
   ===================================================================== */
.blog-hero-img {
  padding-block: clamp(8px, 2vw, 24px) clamp(24px, 4vw, 48px);
}
.blog-hero-img .container { max-width: 1100px; }
.blog-hero-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: clamp(12px, 1.8vw, 22px);
  box-shadow: var(--sh-lg);
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   Utility-Klassen (extrahiert aus Inline-Styles für Wiederverwendung)
   ───────────────────────────────────────────────────────────── */
.section--narrow-top   { padding-top: clamp(20px, 3vw, 40px); }
.section--tight-top    { padding-top: clamp(24px, 3vw, 40px); }
.section--cta-pad      { padding-block: clamp(40px, 5vw, 72px); }
.container--narrow     { max-width: 820px; }
.img-cover             { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-contain-cream     { width: 100%; height: 100%; object-fit: contain; background: #ede5d6; display: block; }
.footer__copy-row      { text-align: center; margin-top: 18px; }
.sr-offscreen          { position: absolute; left: -9999px; top: -9999px; }
.is-hidden { display: none; }

/* ──────────────────────────────────────────────────────────
   Score-Compare: Mobile vs Desktop Side-by-Side
   ────────────────────────────────────────────────────────── */
.score-compare {
  margin: 8px 0 36px;
  padding: 24px clamp(20px,3vw,32px);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  backdrop-filter: blur(6px);
}
.score-compare .score-section-label {
  color: #fff;
  margin: 0 0 22px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.score-compare .score-section-label::before,
.score-compare .score-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.score-compare__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.score-compare-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.score-compare-card__name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.score-compare-card__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  justify-content: space-between;
}
.score-compare-card__row small {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  font-weight: 500;
}
.score-compare-card__val {
  font-family: var(--ff-display, Fraunces, serif);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
}
.score-compare-card__val[data-grade="good"] { color: #7fcfa0; }
.score-compare-card__val[data-grade="ok"]   { color: #e6c779; }
.score-compare-card__val[data-grade="poor"] { color: #e88a8a; }
.score-compare-card__bar {
  height: 4px;
  background: rgba(255,255,255,0.10);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.score-compare-card__bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
.score-compare-card__bar-fill[data-grade="good"] { background: linear-gradient(90deg, #5cc488, #7fcfa0); }
.score-compare-card__bar-fill[data-grade="ok"]   { background: linear-gradient(90deg, #d4ad58, #e6c779); }
.score-compare-card__bar-fill[data-grade="poor"] { background: linear-gradient(90deg, #d46a6a, #e88a8a); }
.score-compare-card__delta {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.score-compare-card__delta--up   { background: rgba(127,207,160,0.18); color: #7fcfa0; }
.score-compare-card__delta--down { background: rgba(232,138,138,0.18); color: #e88a8a; }
.score-compare-card__delta--even { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.6); }

@media (max-width: 640px) {
  .score-compare__grid { grid-template-columns: repeat(2, 1fr); }
  .score-compare-card__val { font-size: 1.3rem; }
}

/* ──────────────────────────────────────────────────────────
   Cookie-/Datenschutz-Hinweis (CH revDSG — Info, kein Consent
   weil aktuell keine Tracking-Cookies gesetzt werden)
   ────────────────────────────────────────────────────────── */
.lw-cookie {
  position: fixed; left: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 24px); z-index: 9999;
  max-width: 520px; margin: 0 auto;
  padding: 18px 22px;
  background: var(--c-card, #fff);
  border: 1px solid var(--c-border, #e3dccd);
  border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(31,58,46,0.35), 0 8px 20px -10px rgba(31,58,46,0.18);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13.5px; line-height: 1.5;
  transform: translateY(20px); opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
}
.lw-cookie.is-visible { transform: translateY(0); opacity: 1; }
.lw-cookie p { margin: 0; flex: 1 1 240px; color: var(--c-ink-2, #3a4f44); }
.lw-cookie a { color: var(--c-primary, #1F3A2E); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lw-cookie__btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lw-cookie__ok, .lw-cookie__deny {
  appearance: none; cursor: pointer;
  padding: 9px 18px; border-radius: 999px;
  font-weight: 600; font-size: 13px; letter-spacing: .01em;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.lw-cookie__ok {
  border: none;
  background: var(--c-primary, #1F3A2E); color: #fff;
}
.lw-cookie__ok:hover { transform: translateY(-1px); background: #2a4d3d; }
.lw-cookie__deny {
  background: transparent; color: var(--c-ink-2, #5a6b62);
  border: 1px solid var(--c-border, #e3dccd);
}
.lw-cookie__deny:hover { transform: translateY(-1px); border-color: var(--c-ink-3, #7a8a82); color: var(--c-ink, #1F3A2E); }

/* ──────────────────────────────────────────────────────────
   Score-Screenshots: visueller Eindruck der getesteten Site
   ────────────────────────────────────────────────────────── */
.score-shots { margin-bottom: 28px; }
.score-shots__label {
  color: #fff; margin: 0 0 18px;
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.score-shots__label::before,
.score-shots__label::after {
  content: ""; flex: 1; height: 1px; max-width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.score-shots__grid {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 24px;
  align-items: end;
  justify-content: center;
  max-width: 920px; margin: 0 auto;
}
.score-shot { margin: 0; min-width: 0; }
.score-shot figcaption {
  margin-top: 12px; text-align: center;
  color: rgba(255,255,255,0.65); font-size: 0.82rem;
  font-weight: 600; letter-spacing: 0.04em;
}

/* Phone Frame */
.score-shot__frame--phone {
  position: relative;
  padding: 14px 8px;
  background: linear-gradient(135deg,#1a1a1a, #2a2a2a);
  border-radius: 26px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
  max-width: 240px; margin: 0 auto;
}
.score-shot__frame--phone::before {
  content: ""; position: absolute; top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.18);
}
.score-shot__frame--phone img {
  display: block; width: 100%; border-radius: 14px;
  aspect-ratio: 9/16; object-fit: cover; object-position: top;
  background: #fff;
}

/* Monitor Frame */
.score-shot__frame--monitor {
  position: relative;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg,#1a1a1a, #2a2a2a);
  border-radius: 14px 14px 6px 6px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.08);
}
.score-shot__frame--monitor::after {
  content: ""; position: absolute; left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 80px; height: 10px;
  background: linear-gradient(180deg,#2a2a2a,#1a1a1a);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.5);
}
.score-shot__frame--monitor img {
  display: block; width: 100%; border-radius: 6px;
  aspect-ratio: 16/10; object-fit: cover; object-position: top;
  background: #fff;
}

.score-shots__hint {
  margin-top: 96px !important;
  margin-left: auto; margin-right: auto;
  max-width: 600px; padding: 20px 26px;
  text-align: center;
  background: linear-gradient(135deg, rgba(201,163,106,0.10), rgba(201,163,106,0.04));
  border: 1px solid rgba(201,163,106,0.25);
  border-radius: 12px;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem; font-style: italic; line-height: 1.6;
}
.score-shot figcaption { margin-top: 22px !important; }
.score-shots { margin-bottom: 64px !important; }
.score-shots + .score-section-label { margin-top: 0; }
.score-shots__grid { margin-bottom: 32px; }

@media (max-width: 720px) {
  .score-shots__grid { grid-template-columns: 1fr; max-width: 320px; }
  .score-shot__frame--phone { max-width: 200px; }
}

/* Lockerer Untertitel unter den Kontakt-CTAs */
.info-card__casual {
  margin: 16px 4px 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--c-ink-3);
  font-style: italic;
  line-height: 1.5;
}

/* =====================================================================
   Pakete / Pricing
   ===================================================================== */
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 34px 30px;
  box-shadow: var(--sh-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--c-border-2); }
.price-card__head { margin-bottom: 18px; }
.price-card__name { font-size: 1.6rem; margin-bottom: 4px; }
.price-card__tag { color: var(--c-ink-3); font-size: var(--fs-sm); }
.price-card__price { display: flex; align-items: baseline; gap: 8px; }
.price-card__price .cur { font-family: var(--ff-display); font-size: 1.05rem; color: var(--c-ink-3); }
.price-card__price .amt {
  font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3rem); color: var(--c-ink);
  letter-spacing: -0.02em; line-height: 1;
}
.price-card__bill { color: var(--c-ink-3); font-size: var(--fs-xs); margin: 6px 0 22px; }
.price-card .btn { margin-bottom: 26px; }
.price-list { display: flex; flex-direction: column; gap: 13px; }
.price-list li {
  position: relative; padding-left: 30px;
  font-size: var(--fs-sm); color: var(--c-ink-2); line-height: 1.4;
}
.price-list li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; border-radius: 50%;
  background: rgba(201,163,106,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%23B8915A' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.price-list__all { font-weight: 600; color: var(--c-ink); }
.price-list__hl { font-weight: 600; color: var(--c-accent-2); }

/* Featured — dunkle Forest-Green Karte, sticht heraus */
.price-card--featured {
  background: var(--g-primary);
  border-color: transparent;
  box-shadow: var(--sh-glow);
  color: #fff;
}
@media (min-width: 921px) { .price-card--featured { transform: translateY(-14px) scale(1.015); } }
.price-card--featured:hover { transform: translateY(-20px) scale(1.015); box-shadow: 0 42px 92px rgba(31,58,46,0.34); }
.price-card--featured .price-card__name,
.price-card--featured .price-card__price .amt { color: #fff; }
.price-card--featured .price-card__tag,
.price-card--featured .price-card__bill,
.price-card--featured .price-card__price .cur { color: rgba(255,255,255,0.72); }
.price-card--featured .price-list li { color: rgba(255,255,255,0.92); }
.price-card--featured .price-list__all { color: #fff; }
.price-card--featured .price-list__hl { color: var(--c-accent); }
.price-card--featured .price-list li::before { background-color: rgba(201,163,106,0.24); }
.price-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--g-accent); color: #2A1E0C;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em;
  padding: 7px 16px; border-radius: var(--r-pill);
  box-shadow: 0 10px 24px rgba(201,163,106,0.45); white-space: nowrap;
}

/* Add-ons */
.addons { margin-top: clamp(56px, 7vw, 90px); }
.addons__head { margin-bottom: 36px; }
.addons__head h3 { font-size: var(--fs-h3); margin-top: 6px; }
.addons__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.addon {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 22px 18px; text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.addon:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--c-border-2); }
.addon__price { font-family: var(--ff-display); font-weight: 600; font-size: 1.3rem; color: var(--c-primary); }
.addon__label { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.addon__note { color: var(--c-ink-3); font-size: var(--fs-xs); line-height: 1.35; }
.pricing__foot { margin-top: 42px; color: var(--c-ink-3); font-size: var(--fs-sm); }

@media (max-width: 920px) {
  .pricing__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .price-card--featured { transform: none; }
  .price-card--featured:hover { transform: translateY(-6px); }
  .addons__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .addons__grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
}