/* ============================================
   LOCAL PEAK SALES PAGE — STYLES
   Design-DNA: Neon-Lime + Schwarz + Condensed
   ============================================ */

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-dark);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }

/* --- CUSTOM PROPERTIES --- */
:root {
  /* Farbpalette */
  --accent: #C8E636;
  --accent-hover: #B8D62A;
  --accent-olive: #A3B836;
  --primary: #C8E636;
  --bg-dark: #000000;
  --bg-dark-lighter: #1A1A1A;
  --bg-light: #FFFFFF;
  --bg-warm: #F0F0E0;
  --bg-white: #FFFFFF;
  --bg-guarantee: #F5F5F0;
  --text-light: #FFFFFF;
  --text-dark: #000000;
  --text-muted: #6B6B4E;
  --text-on-dark: #94A3B8;
  --text-olive: #6B6B4E;
  --star: #FFD700;
  --highlight: rgba(200, 230, 54, 0.35);
  --border-subtle: rgba(255,255,255,0.08);
  --purple: #8B5CF6;

  /* Typografie */
  --font-display: 'FuturaProExtraBoldCondensed', 'Saira Condensed', 'Oswald', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

  /* Spacing */
  --section-py: clamp(5rem, 10vw, 10rem);
  --container-max: 1280px;
  --container-px: clamp(1.25rem, 4vw, 3rem);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* Schräge Section-Übergänge (eine Quelle für alle Sections) */
  --slant-h: 200px;
}

/* Wiederverwendbarer schräger Section-Übergang (oben, steigt nach rechts) */
.slant-top {
  clip-path: polygon(0 var(--slant-h), 100% 0, 100% 100%, 0 100%);
  margin-top: calc(-1 * var(--slant-h));
  padding-top: calc(var(--section-py) + var(--slant-h)) !important;
  position: relative;
}
/* Border unter dem ersten CTA (dont-Section) steiler, damit sie so schraeg
   laeuft wie die Hero->Sales-Letter-Kante (~10deg). Nur diese Section. */
.dont.slant-top {
  --slant-h: 250px;
}

/* --- UTILITY --- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* ===== Headline-Look: Saira Condensed im echten Schwarz-Gewicht (900) ===== */
.hero__headline,
.hero__headline--sell,
.memosec__headline,
.fsec__headline,
.faq__headline,
.tcar__headline,
.display-lg,
.refcta__headline,
.final-cta__headline,
.guide__headline {
  font-weight: 900 !important;
}
.section-dark {
  background: var(--bg-dark);
  color: var(--text-light);
}
.section-light {
  background: var(--bg-white);
  color: var(--text-dark);
}
.section-warm {
  background: var(--bg-warm);
  color: var(--text-dark);
}
.section-black {
  background: #000000;
  color: var(--text-light);
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.text-highlight {
  background: rgba(200, 230, 54, 0.35);
  padding: 0.1em 0.2em;
  border-radius: 2px;
}

/* --- SCROLL-REVEAL (wiederverwendbar) --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- TYPOGRAPHY --- */
.display-xl {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}
.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.08em;
  text-transform: uppercase;
}
.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.section-label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-label--pill {
  display: inline-block;
  padding: 0.5rem 1.85rem;
  border-radius: var(--radius-pill);
  background: #333333;
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.section-label--green {
  background: linear-gradient(180deg, #9BCF4C 0%, #74AC2C 100%);
  color: #1A1A1A;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: var(--radius-pill);
  padding: 1.125rem 2.5rem;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.btn:hover { box-shadow: 0 8px 24px rgba(200,230,54,0.3); }
.btn__arrow { animation: arrow-shoot 1.8s ease-in-out infinite; }
.btn:active { transform: translateY(0); }

@keyframes arrow-shoot {
  0% { transform: translateX(0) scale(1); }
  10% { transform: translateX(-6px) scale(1.05); }
  25% { transform: translateX(10px) scale(0.95); }
  38% { transform: translateX(25px) scale(0.5); }
  48% { transform: translateX(38px) scale(0.05); }
  49% { transform: translateX(-16px) scale(0.05); }
  60% { transform: translateX(-8px) scale(0.6); }
  72% { transform: translateX(-2px) scale(0.95); }
  85% { transform: translateX(2px) scale(1.02); }
  100% { transform: translateX(0) scale(1); }
}
.btn-accent {
  background: var(--accent);
  color: #000;
}
.btn-accent:hover { background: var(--accent-hover); }
.btn-outline {
  background: transparent;
  color: var(--text-dark);
  border: 2px solid var(--text-dark);
}
.btn-outline--light {
  color: var(--text-light);
  border-color: var(--text-light);
}
.btn-full { width: 100%; justify-content: center; }
.btn-lg {
  padding: 1.25rem 3rem;
  font-size: 1.25rem;
}
/* Referenzen-CTA: breiter, hoeher, weiss, Headline-Font */
.cases__cta {
  font-family: var(--font-display);
  color: #FFFFFF;
  font-size: 2.37rem;
  font-weight: 700;
  padding: 1.05rem 6rem;
  letter-spacing: -0.03em;
  border-radius: 12px;
  background: linear-gradient(180deg, #9BCF4C 0%, #74AC2C 100%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.cases__cta:hover {
  background: linear-gradient(180deg, #A6D85A 0%, #7DB833 100%);
}

/* --- STARS --- */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.stars svg { width: 1em; height: 1em; fill: var(--star); }

/* --- NAV --- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s, transform 0.4s ease;
}
.nav--scrolled {
  background: #000;
}
.nav--hidden {
  transform: translateY(-100%);
  pointer-events: none;
}
.nav__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-light);
  font-size: 1.125rem;
  font-weight: 500;
}
.nav__phone svg { width: 1.375rem; height: 1.375rem; fill: var(--accent); stroke: var(--accent); }
/* CTA-Button im Header (statt Telefonnummer): gruene Border, transparent, weisse Schrift */
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.35rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav__cta:hover {
  background: var(--accent);
  color: #14140f;
}
.nav__cta-short { display: none; }
.nav__logo {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav__menu-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  transition: color 0.3s;
}
.nav__menu-btn:hover { color: #888; }
.nav__menu-btn:hover .nav__hamburger span { background: #888; }
.nav__hamburger {
  width: 1.925rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  overflow: visible;
}
.nav__hamburger span {
  display: block;
  height: 4px;
  background: var(--text-light);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s, width 0.3s;
}
.nav__hamburger span:nth-child(1) { width: 100%; }
.nav__hamburger span:nth-child(2) { width: 100%; transform: translateX(30%); transform-origin: center; }
.nav__hamburger span:nth-child(3) { width: 100%; }

/* Menu Overlay */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(60px) saturate(0.5);
  -webkit-backdrop-filter: blur(60px) saturate(0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding-top: 4rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.menu-overlay--open {
  opacity: 1;
  pointer-events: auto;
}
.menu-overlay a {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  line-height: 1;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: -0.06em;
  transition: color 0.2s, transform 0.2s;
  opacity: 0;
  transform: translateY(-20px);
}
.menu-overlay--open a {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.12s ease, transform 0.12s ease, color 0.2s;
}
.menu-overlay--open a:nth-child(1) { transition-delay: 0.03s; }
.menu-overlay--open a:nth-child(2) { transition-delay: 0.12s; }
.menu-overlay--open a:nth-child(3) { transition-delay: 0.21s; }
.menu-overlay--open a:nth-child(4) { transition-delay: 0.30s; }
.menu-overlay--open a:nth-child(5) { transition-delay: 0.39s; }
.menu-overlay--open a:nth-child(6) { transition-delay: 0.48s; }
.menu-overlay--open a:nth-child(7) { transition-delay: 0.57s; }
.menu-overlay--open a:nth-child(8) { transition-delay: 0.66s; }
.menu-overlay--open a:nth-child(9) { transition-delay: 0.75s; }
/* Hover (KK-Stil): gehovertes Item weiss + leicht groesser, uebrige dimmen ab.
   Sofort, ohne Delay (Einblend-Stagger-Delays werden auf Hover ausgehebelt). */
.menu-overlay--open:hover a {
  color: var(--text-light);
  transition: transform 0.15s ease, color 0.15s ease;
  transition-delay: 0s;
}
.menu-overlay--open:hover a:hover {
  color: var(--text-light);
  transform: scale(1.06);
}
/* Aktive Seite: limegruener Punkt daneben */
/* Aktive Seite: Wort bleibt weiss & zentriert, nur ein limegruener Punkt links */
.menu-overlay a.is-active { position: relative; color: var(--text-light); }
.menu-overlay a.is-active::before {
  content: "";
  position: absolute;
  right: calc(100% + 0.45em);
  top: 50%;
  transform: translateY(-50%);
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--accent);
}
.menu-overlay__login {
  font-size: 1rem !important;
  border: 2px solid var(--text-light);
  border-radius: var(--radius-pill);
  padding: 0.5rem 2rem;
  margin-bottom: 1rem;
}
.menu-overlay__login:hover { border-color: var(--accent); }

/* CTA-Button ausblenden, solange das Menu offen ist (Kontakt fuehrt dorthin) */
.nav--menu-open .nav__cta { opacity: 0; pointer-events: none; }
/* Nav hidden on menu open */
.nav--menu-open .nav__hamburger span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
  width: 100%;
}
.nav--menu-open .nav__hamburger span:nth-child(2) { opacity: 0; transform: translateX(0); }
.nav--menu-open .nav__hamburger span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
  width: 100%;
}

/* --- RESPONSIVE NAV --- */
@media (max-width: 767px) {
  .nav__phone-text { display: none; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
  .nav__cta { padding: 0.45rem 1rem; font-size: 0.84rem; border-width: 1.5px; }
}

/* --- HERO --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 10rem 0 0;
  background: #000;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}
.hero__content {
  position: relative;
  z-index: 5;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.hero__headline {
  color: var(--text-light);
  margin-top: -5px;
}
.hero__headline-accent {
  text-decoration: line-through;
  opacity: 0.35;
}
.hero__divider {
  display: block;
  height: 2px;
  background: #C8E636;
  width: 40%;
  margin: 8px auto;
}
.hero__asterisk {
  font-size: 0.65em;
  position: relative;
  top: -0.7em;
  margin-left: -0.15em;
  line-height: 0;
}
.hero__arguments {
  font-size: 0.95rem;
  color: var(--text-on-dark);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.hero__subline {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: #fff;
  max-width: 640px;
  line-height: 1.4;
  text-align: center;
  align-self: center;
}
.hero__form {
  width: 100%;
  max-width: 700px;
  margin-top: 0.75rem;
  align-self: center;
}
.hero__input-wrap {
  display: flex;
  align-items: center;
  background: #e8e8e8;
  border-radius: var(--radius-pill);
  padding: 0.375rem 0.375rem 0.375rem 1.25rem;
  gap: 0.75rem;
}
.hero__input-icon { font-size: 1.6rem; }
.hero__input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-dark);
  background: transparent;
  min-width: 0;
}
.hero__input::placeholder { color: #666; }
.hero__submit {
  white-space: nowrap;
  padding: 1rem 1.5rem 1rem 1rem;
  font-size: 1.3rem;
  border: none;
  outline: none;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important;
  margin: -0.375rem -0.375rem -0.375rem 0;
  align-self: stretch;
  text-transform: none;
  font-weight: 900;
  letter-spacing: -0.03em;
  position: relative;
  overflow: hidden;
}
/* Shine-Sweep auf allen grossen Buttons: schraeger weisser
   Balken laeuft durch. Transition NUR im Hover -> beim Aushovern snapt er sofort/
   unsichtbar nach links zurueck (kein Rueck-Sweep, immer nur links -> rechts). */
.btn-accent,
.cta-banner__btn,
.cases__cta,
.refcta__btn,
.footer__signup-btn {
  position: relative;
  overflow: hidden;
}
.hero__submit::after,
.btn-accent::after,
.cta-banner__btn::after,
.cases__cta::after,
.refcta__btn::after,
.footer__signup-btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -90px;
  width: 45px;
  background: rgba(255, 255, 255, 0.5);
  transform: skewX(-20deg);
  pointer-events: none;
}
.hero__submit:hover::after {
  left: calc(100% + 55px);
  transition: left 0.14s ease-in;
}
/* Breite Buttons: etwas langsamer, damit der Sweep nicht zu hektisch wirkt */
.btn-accent:hover::after,
.cta-banner__btn:hover::after,
.cases__cta:hover::after,
.refcta__btn:hover::after,
.footer__signup-btn:hover::after {
  left: calc(100% + 55px);
  transition: left 0.32s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  .hero__submit:hover::after,
  .btn-accent:hover::after,
  .cta-banner__btn:hover::after,
  .cases__cta:hover::after,
  .refcta__btn:hover::after,
  .footer__signup-btn:hover::after {
    left: -90px;
    transition: none;
  }
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-size: 0.8125rem;
  color: var(--text-on-dark);
  align-self: center;
}
.hero__disclaimer { font-style: normal; font-size: 0.95rem; color: var(--text-on-dark); }
.hero__video {
  position: relative;
  z-index: 3;
  width: min(90%, 1100px);
  margin-top: 2rem;
  align-self: center;
  /* Ruhezustand: Parallelogramm wie auf /website (JS animiert es beim Scrollen) */
  transform: skewY(-10deg) scale(0.65);
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  box-shadow: 35px 35px 60px rgba(0, 0, 0, 0.5);
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.hero__video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  /* Gegen-Skew, damit der Videoinhalt im Parallelogramm nicht verzerrt */
  transform: skewY(10deg) scale(1.32);
  transform-origin: center center;
  transition: transform 0.1s ease-out;
}
.hero__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  /* Gegen-Skew (per JS gesetzt), damit das Play-Icon rund bleibt */
  transform: skewY(10deg);
  transition: transform 0.1s ease-out;
}
.hero__play svg {
  transition: transform 0.2s ease;
}
.hero__play:hover svg {
  transform: scale(1.1);
}

/* --- Hero Übergang: Schräge Kante + Grüne Streifen --- */

/* Schräge untere Kante des Hero */
.hero__transition {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 520px;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.hero__transition::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 520px;
  background: var(--bg-white);
  transform: skewY(-10deg);
  transform-origin: bottom right;
}

/* Grüne Streifen rechts */
.hero__stripes-right {
  position: absolute;
  right: -20px;
  bottom: 120px;
  z-index: 1;
  pointer-events: none;
  width: 200px;
  height: 300px;
  z-index: 2;
  pointer-events: none;
  transform: skewY(-15deg);
}
.hero__stripes-right span {
  display: block;
  height: 22px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.hero__stripes-right span:nth-child(1) {
  background: var(--accent);
  width: 180px;
  margin-left: 40px;
}
.hero__stripes-right span:nth-child(2) {
  background: #D4E87A;
  width: 160px;
  margin-left: 60px;
}
.hero__stripes-right span:nth-child(3) {
  background: var(--accent);
  width: 200px;
  margin-left: 20px;
}

/* Grüne Streifen links */
.hero__stripes-left {
  position: absolute;
  left: -20px;
  bottom: 160px;
  width: 180px;
  height: 250px;
  z-index: 2;
  pointer-events: none;
  transform: skewY(-15deg);
}
.hero__stripes-left span {
  display: block;
  height: 20px;
  margin-bottom: 10px;
  border-radius: 4px;
}
.hero__stripes-left span:nth-child(1) {
  background: var(--accent);
  width: 140px;
}
.hero__stripes-left span:nth-child(2) {
  background: #D4E87A;
  width: 100px;
}

/* Gelbe Outline-Box links */
.hero__outline-box {
  position: absolute;
  left: 20px;
  bottom: 350px;
  width: 70px;
  height: 70px;
  border: 2px solid var(--accent);
  opacity: 0.4;
  z-index: 2;
  pointer-events: none;
  transform: skewY(-15deg);
}

/* Hero ohne Video-Player (Startseite): kompakter Slant, Content bleibt
   oberhalb der Schraege (Rise der Schraege ~ 17.6vw bei -10deg) */
.hero--novideo {
  padding-bottom: calc(300px + 10vw);
}
.hero--novideo .hero__transition,
.hero--novideo .hero__transition::before {
  height: 260px;
}
/* Nahtloser Uebergang Hero -> Sales Letter (nur Startseite, .hero--toletter):
   Schraege traegt die Brief-Farbe, der Brief startet ohne eigene Diagonale
   und ohne Deco-Zwischenzone */
.hero--toletter .hero__transition::before {
  background: #F5F5F0;
}
.hero--toletter ~ .letter-deco {
  display: none;
}
.hero--toletter ~ .letter {
  clip-path: none;
  padding-top: 0.5rem;
}

/* Hero responsive */
@media (max-width: 767px) {
  .hero { min-height: auto; padding: 7rem 0 3rem; }
  .hero--novideo { padding: 7rem 0 calc(140px + 22vw); }
  .hero--novideo .hero__transition,
  .hero--novideo .hero__transition::before { height: 140px; }
  /* KK-Pattern: Pill bleibt auch mobil EINE Zeile (Input + Button) */
  .hero__input-wrap { padding: 0.3rem 0.3rem 0.3rem 1rem; gap: 0.5rem; }
  .hero__submit { padding: 0.75rem 1.1rem 0.75rem 0.85rem; font-size: 1.05rem; }
  .hero__video { width: 95%; }
}

/* --- AWARDS MARQUEE --- */
.awards {
  position: relative;
  z-index: 2;
  padding: 6rem 0 1rem;
  background: #FFFFFF;
  border-bottom: none;
  overflow: hidden;
}
.awards__marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 75%, transparent 100%);
}
.awards__track {
  display: flex;
  align-items: center;
  gap: 0;
  animation: marquee 45s linear infinite;
  width: max-content;
}
.awards__set {
  display: flex;
  align-items: center;
  gap: 5rem;
  padding-right: 5rem;
}
.awards__logo {
  height: 90px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.8;
}
.awards__logo--invert {
  filter: invert(1);
}

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

@media (max-width: 767px) {
  .awards__logo { height: 32px; max-width: 100px; }
  .awards__track { gap: 2.5rem; }
}

/* --- SALES LETTER --- */
.letter {
  position: relative;
  padding: calc(var(--section-py) + 15rem) 0 calc(var(--section-py) + 2rem);
  background: #F5F5F0;
  /* Kante: rechts direkt unter den Logos (0), links 343px -> ~15deg ueber 1280px */
  clip-path: polygon(0 343px, 100% 0, 100% 100%, 0 100%);
  margin-top: 0;
}

/* Grüne Streifen am Übergang zur Letter-Sektion */
.letter-deco {
  position: relative;
  height: 0;
  z-index: 3;
}
.letter__stripes {
  position: absolute;
  top: 246px;
  left: 0;
  right: 0;
  height: 260px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.letter__stripes span {
  position: absolute;
  height: 30px;
  border-radius: 4px;
}
.letter__stripes span:nth-child(1) {
  background: rgba(200, 230, 54, 0.3);
  width: 350px;
  left: -30px;
  top: 60px;
  transform: skewY(-15deg);
}
.letter__stripes span:nth-child(2) {
  background: rgba(100, 200, 80, 0.45);
  width: 280px;
  left: -10px;
  top: 92px;
  transform: skewY(-15deg);
}
.letter__outline-box {
  display: none;
  width: 50px;
  height: 50px;
  border: 2px solid var(--accent);
  opacity: 0.35;
  z-index: 2;
  pointer-events: none;
  transform: rotate(3deg);
}
.letter__container {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--container-px);
  position: relative;
  z-index: 1;
}

/* Streifen entfernt */

.letter__date {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-dark);
  padding-bottom: 0.25rem;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 2.5rem;
}
.letter__greeting {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 2rem;
}
.letter__container p {
  margin-bottom: 1em;
  font-size: 1.625rem;
}
.letter__container strong {
  font-weight: 700;
}

/* --- OFFERING (2 Cards) --- */
/* Deko-Streifen am Übergang Letter → Offering */
.offering-deco {
  position: relative;
  height: 0;
  z-index: 3;
}
.offering-deco__stripe {
  position: absolute;
  height: 28px;
  border-radius: 3px;
  transform: skewY(-8deg);
}
.offering-deco__stripe--1 {
  background: var(--accent);
  width: 220px;
  right: -30px;
  top: -180px;
}
.offering-deco__stripe--2 {
  background: rgba(200, 230, 54, 0.5);
  width: 160px;
  right: 20px;
  top: -150px;
}
.offering-deco__stripe--3 {
  background: rgba(200, 230, 54, 0.3);
  width: 280px;
  left: -20px;
  top: -70px;
}
.offering-deco__stripe--4 {
  background: var(--accent);
  width: 200px;
  left: 10px;
  top: -40px;
}
.offering-deco__box {
  position: absolute;
  width: 50px;
  height: 40px;
  border: 2px solid var(--accent);
  opacity: 0.5;
  transform: skewY(-8deg);
}
.offering-deco__box--1 {
  display: none;
}
.offering-deco__box--2 {
  right: 180px;
  top: -200px;
}

.offering {
  padding: calc(var(--section-py) + 4rem) 0 4rem;
  background: #1A1A1A;
  clip-path: polygon(0 200px, 100% 0, 100% 100%, 0 100%);
  margin-top: -220px;
}
.offering__inner { text-align: center; }
.offering__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-top: 1rem;
}
.offering__card {
  background: #2A2A2A;
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}
/* Remove line between offering and ticker */
.offering__icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.offering__icon--green { background: rgba(200, 230, 54, 0.15); color: var(--accent); }
.offering__icon--purple { background: rgba(139, 92, 246, 0.15); color: var(--purple); }

/* Legacy-Klassen als Fallback */
.offering__icon--blue { background: rgba(200, 230, 54, 0.15); color: var(--accent); }
.offering__icon--orange { background: rgba(139, 92, 246, 0.15); color: var(--purple); }

.offering__sublabel {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: -1.25rem;
}
.offering__sublabel--green,
.offering__sublabel--blue { color: var(--accent); }
.offering__sublabel--purple,
.offering__sublabel--orange { color: var(--accent); }
.offering__headline {
  font-size: clamp(4.5rem, 10vw, 9rem) !important;
}
.offering__btn {
  border-radius: 8px !important;
  margin-top: auto;
  width: 80%;
}
.offering__desc {
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.7;
  text-align: left;
  max-width: 380px;
  margin-bottom: 1rem;
}

@media (max-width: 767px) {
  .offering__grid { grid-template-columns: 1fr; }
}

/* --- TRUST + TECH TICKER --- */
.ticker-section {
  background: #1A1A1A;
  padding: 1.5rem 0 4rem;
  margin-top: -1px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 200px), 0 100%);
  padding-bottom: 20rem;
  margin-bottom: -100px;
}
.ticker {
  overflow: hidden;
  width: 100%;
}
.ticker__track {
  display: flex;
  gap: 0;
  animation: marquee-ticker 25s linear infinite;
  width: max-content;
}
.ticker__track--reverse {
  animation: marquee-ticker-reverse 30s linear infinite;
}
.ticker__set {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
}
.ticker__logo {
  height: 56px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 1;
  filter: none;
}
/* Dunkle Logos auf dunklem Ticker: weisse Variante, Rest bleibt Originalfarbe */
.ticker__logo[alt="ChatGPT"] {
  filter: brightness(0) invert(1);
}
/* Meta AI: Ring in Originalfarben, nur der Schriftzug weiss */
.ticker__meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  flex-shrink: 0;
}
.ticker__meta-icon {
  height: 56px;
  width: auto;
}
.ticker__meta-text {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
}
.ticker {
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  padding: 0 3rem;
}

@keyframes marquee-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marquee-ticker-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* --- MEDIA LOGOS (unused) --- */
.media-logos {
  padding: 3rem 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.media-logos__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.media-logos__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem 3rem;
}
.media-logos__logo {
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.4);
}

/* --- STATS --- */
.stats {
  padding: var(--section-py) 0;
  background: var(--bg-warm);
  position: relative;
}
/* Gruene "Speed-Streak"-Grafik am Uebergang Angebot -> Stats (Kante ~9deg) */
.stats__stripes {
  position: absolute;
  top: 150px;
  left: 0;
  width: 420px;
  height: 180px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.stats__stripes span {
  position: absolute;
  height: 9px;
  border-radius: 6px;
  transform: skewY(-9deg);
}
.stats__stripes span:nth-child(1) {
  width: 380px;
  left: -40px;
  top: 30px;
  background: rgba(200, 230, 54, 0.5);
}
.stats__stripes span:nth-child(2) {
  width: 300px;
  left: -20px;
  top: 50px;
  background: rgba(150, 215, 60, 0.5);
}
.stats__stripes span:nth-child(3) {
  width: 230px;
  left: -10px;
  top: 70px;
  background: rgba(110, 200, 80, 0.5);
}
.stats__stripes span:nth-child(4) {
  width: 165px;
  left: 0;
  top: 90px;
  background: rgba(110, 200, 80, 0.35);
}
.stats__stripes span:nth-child(5) {
  width: 110px;
  left: 0;
  top: 110px;
  background: rgba(110, 200, 80, 0.22);
}
/* Kleineres Echo oben rechts (parallel zur Kante) */
.stats__streak-right {
  position: absolute;
  top: 18px;
  right: 0;
  width: 320px;
  height: 130px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.stats__streak-right span {
  position: absolute;
  right: -40px;
  height: 8px;
  border-radius: 6px;
  transform: skewY(-9deg);
}
.stats__streak-right span:nth-child(1) {
  width: 280px;
  top: 18px;
  background: rgba(200, 230, 54, 0.4);
}
.stats__streak-right span:nth-child(2) {
  width: 210px;
  top: 36px;
  background: rgba(130, 210, 70, 0.4);
}
.stats__streak-right span:nth-child(3) {
  width: 145px;
  top: 54px;
  background: rgba(110, 200, 80, 0.26);
}
.stats__inner { text-align: center; }
.stats__headline { color: #000; font-size: clamp(3rem, 8vw, 6.5rem) !important; font-weight: 700 !important; letter-spacing: -0.08em !important; -webkit-text-stroke: 1px #000; }
.stats__sub {
  max-width: 720px;
  margin: 1.5rem auto 3rem;
  color: var(--text-olive);
  font-size: 26px;
  line-height: 1.7;
  opacity: 0.8;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}
.stats__card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  padding: 2.5rem 1.25rem 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1),
              box-shadow 0.4s ease, border-color 0.4s ease,
              opacity 0.6s ease;
}
.stats__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1);
}
.stats__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.10);
}
.stats__card:hover::before { transform: scaleX(1); }
.stats__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5.5vw, 4.75rem);
  font-weight: 700;
  color: #000000;
  line-height: 1;
  letter-spacing: -0.03em;
}
.stats__suffix { color: var(--accent-olive); }
.stats__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-olive);
  margin-top: 0.625rem;
  opacity: 0.85;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 767px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- CASE STUDIES --- */
.cases {
  padding: calc(var(--section-py) - 2.5rem) 0 calc(var(--section-py) + 8rem);
  background: #000;
  overflow: hidden;
}
.cases__inner { text-align: center; }
.cases__marquee {
  margin-top: 4.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  position: relative;
}
.cases__track {
  display: flex;
  width: max-content;
  animation: marquee 55s linear infinite;
}
.cases__set {
  display: flex;
  gap: 1.2rem;
  padding-right: 1.2rem;
  /* Safari berechnet die intrinsische Breite verschachtelter Flexboxen mit
     width:max-content falsch -> Sets schrumpfen, ueberlappen und die zwei
     identischen Sets liegen uebereinander (doppelte Labels im Marquee).
     Explizite Breite = (Kartenbreite + Gap) x Kartenanzahl pro Set (= 9).
     Bei geaenderter Kartenanzahl den Faktor 9 anpassen. */
  flex: 0 0 auto;
  width: calc((clamp(300px, 27vw, 400px) + 1.2rem) * 9);
}
.cases__card {
  position: relative;
  flex: 0 0 clamp(300px, 27vw, 400px);
  /* Explizite Hoehe (Breite x 3.96/3) statt aspect-ratio: Safari ignoriert
     aspect-ratio auf Flex-Items -> Karten kollabierten auf Desktop/Laptop. */
  height: calc(clamp(300px, 27vw, 400px) * 1.32);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #1A1A1A;
}
/* Bild-Ebene pro Karte als ::after (zoombar beim Hover, Headline bleibt fix) */
.cases__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cases__card:hover::after { transform: scale(1.06); }

.cases__card--atlas::after { background-image: url("../img/cases/atlas-sanierung.webp"); }
.cases__card--mefinance::after { background-image: url("../img/cases/mefinance-card.webp"); }
.cases__card--bleifuss::after { background-image: url("../img/cases/bleifuss-card.webp"); }
.cases__card--haenle::after { background-image: url("../img/cases/haenle-card.webp"); }
.cases__card--kubus::after { background-image: url("../img/cases/kubus-card.webp"); }
.cases__card--kroos::after { background-image: url("../img/cases/kroos-card.webp"); }
.cases__card--blum::after { background-image: url("../img/cases/blum-card.webp"); }
.cases__card--panthera::after { background-image: url("../img/cases/panthera-card.webp"); }
/* Gemeinsamer Lesbarkeits-Scrim oben fuer die weisse Headline */
.cases__card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.cases__name {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  text-align: left;
  padding: 1.35rem 1.35rem 0;
  letter-spacing: 0.02em;
  color: #FFFFFF;
}
/* Browser-/Device-Mockup mit der Klienten-Website (Platzhalter, echte Screenshots folgen) */
.cases__device {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%) rotate(-2deg);
  width: 84%;
  background: #FFFFFF;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  box-shadow: 0 24px 55px rgba(0,0,0,0.4);
}
.cases__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  background: #ECECEC;
}
.cases__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C4C4C4;
}
.cases__shot {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cases__card--passions { background: #0a0806; }
.cases__card--passions::after { background-image: url("../img/cases/passions-golf.webp"); }
.cases__macbook {
  position: absolute;
  left: 50%;
  bottom: 29%;
  transform: translateX(-50%) perspective(1400px) rotateX(4deg);
  width: 63%;
  z-index: 2;
}
/* Kontaktschatten auf der Tischplatte */
.cases__macbook::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9%;
  transform: translateX(-50%);
  width: 96%;
  height: 22px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 72%);
  filter: blur(4px);
  z-index: -1;
}
.cases__macbook-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0c0c0e;
  border: 6px solid #16161a;
  border-radius: 12px 12px 3px 3px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
.cases__macbook-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cases__macbook-base {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 118%;
  height: 14px;
  background: linear-gradient(180deg, #cfd1d6 0%, #a6a9af 50%, #7c7f85 100%);
  border-radius: 0 0 10px 10px;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  box-shadow: 0 10px 18px rgba(0,0,0,0.45);
}
.cases__macbook-base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 5px;
  background: #82858b;
  border-radius: 0 0 7px 7px;
}

/* --- PLATFORM --- */
.platform {
  padding: var(--section-py) 0 calc(var(--section-py) + 3rem);
  background: #ECECEC;
}
/* Dicke gruene Streifen am Uebergang Referenzen -> So arbeiten wir
   (Variation der Hero-Bars, auf der schraegen Kante) */
.platform-deco {
  position: relative;
  height: 0;
  z-index: 4;
}
.platform__stripes {
  position: absolute;
  top: -34px;
  left: 24px;
  z-index: 4;
  pointer-events: none;
  transform: skewY(-9deg);
}
.platform__stripes span {
  display: block;
  height: 22px;
  margin-bottom: 12px;
  border-radius: 4px;
}
.platform__stripes span:nth-child(1) { background: var(--accent); width: 150px; margin-left: 36px; }
.platform__stripes span:nth-child(2) { background: #D4E87A; width: 210px; margin-left: 0; }
.platform__stripes span:nth-child(3) { background: var(--accent); width: 130px; margin-left: 64px; }
@media (min-width: 768px) {
  .platform { padding-top: 320px !important; }
}
.platform__inner { text-align: center; }
.platform__headline { color: #000; }
.platform__sub {
  max-width: 720px;
  margin: 1.5rem auto 0.5rem;
  color: #555;
  font-size: 26px;
  line-height: 1.7;
}
.platform__mockup {
  max-width: 980px;
  margin: -2.5rem auto 0;
}
.devices-img {
  width: 100%;
  display: block;
}
.greviews {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.greviews__g {
  flex-shrink: 0;
}
.greviews__stars {
  display: inline-flex;
  gap: 0.15rem;
}
.greviews__stars svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: var(--star);
}
.greviews__text {
  font-size: 0.95rem;
  font-weight: 600;
  color: #555;
  letter-spacing: 0.01em;
}

/* Multi-Device-Showcase (Peak Engine auf allen Geräten) */
.devices {
  position: relative;
  width: 100%;
  aspect-ratio: 1264 / 640;
}
.devices__screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Monitor */
.devices__monitor {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 63%;
  z-index: 1;
}
.devices__monitor-screen {
  aspect-ratio: 16 / 9;
  background: radial-gradient(120% 130% at 50% 28%, #212c40 0%, #0a0e16 72%);
  border: 5px solid #050607;
  border-radius: 8px;
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding-bottom: 5%;
}
.devices__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 3.6vw, 2.8rem);
  color: #ffffff;
  letter-spacing: 0.01em;
}
.devices__brand em {
  color: var(--accent);
  font-style: normal;
}
.devices__brand-sub {
  font-size: clamp(0.55rem, 1.1vw, 0.85rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #94a3b8;
}
.devices__monitor-neck {
  width: 9%;
  height: 16px;
  margin: 0 auto;
  background: linear-gradient(180deg, #d0d2d7, #a4a7ad);
}
.devices__monitor-foot {
  width: 34%;
  height: 8px;
  margin: 0 auto;
  background: linear-gradient(180deg, #b6b9be, #8b8e94);
  border-radius: 0 0 7px 7px;
}

/* Tablet */
.devices__tablet {
  position: absolute;
  right: 3%;
  bottom: -3%;
  width: 18.5%;
  z-index: 2;
  font-size: clamp(5px, 1.05vw, 13px);
  aspect-ratio: 3 / 4;
  background: #0c0c0e;
  border: 5px solid #17171b;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.25);
}

/* Laptop */
.devices__laptop {
  position: absolute;
  left: 2%;
  bottom: -3%;
  width: 35%;
  z-index: 3;
}
.devices__laptop-screen {
  aspect-ratio: 16 / 10;
  background: #0c0c0e;
  border: 6px solid #17171b;
  border-radius: 11px 11px 2px 2px;
  overflow: hidden;
}
.devices__laptop-deck {
  position: relative;
  left: -8%;
  width: 116%;
  height: 13px;
  background: linear-gradient(180deg, #d0d2d7 0%, #9a9da3 55%, #7c7f85 100%);
  border-radius: 0 0 9px 9px;
  clip-path: polygon(2% 0, 98% 0, 100% 100%, 0 100%);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.32);
}

/* Smartphone */
.devices__phone {
  position: absolute;
  right: 0;
  bottom: -5%;
  width: 10.5%;
  z-index: 4;
  aspect-ratio: 9 / 19;
  background: #0c0c0e;
  border: 4px solid #17171b;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
  font-size: clamp(3px, 0.62vw, 8px);
}

/* Videokonferenz auf dem Laptop */
.vcall {
  width: 100%;
  height: 100%;
  background: #15171c;
  display: flex;
  flex-direction: column;
  padding: 4%;
  gap: 4%;
}
.vcall__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 3%;
}
.vcall__tile {
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.vcall__tile span {
  font-family: var(--font-body);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(7px, 1vw, 15px);
  letter-spacing: 0.03em;
}
.vcall__tile::after {
  content: '';
  position: absolute;
  left: 8%;
  bottom: 8%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.vcall__tile:nth-child(1) { background: linear-gradient(135deg, #3b4a63, #1f2a3d); }
.vcall__tile:nth-child(2) { background: linear-gradient(135deg, #4a3b63, #2a1f3d); }
.vcall__tile:nth-child(3) { background: linear-gradient(135deg, #3b6358, #1f3d33); }
.vcall__tile:nth-child(4) { background: linear-gradient(135deg, #635a3b, #3d361f); }
.vcall__tile:nth-child(5) { background: linear-gradient(135deg, #633b46, #3d1f28); }
.vcall__tile:nth-child(6) { background: linear-gradient(135deg, #3b5563, #1f343d); }
.vcall__tile:nth-child(7) { background: linear-gradient(135deg, #46633b, #283d1f); }
.vcall__tile:nth-child(8) { background: linear-gradient(135deg, #4a4a55, #2a2a33); }
.vcall__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6%;
  height: 11%;
}
.vcall__btn {
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.vcall__btn--leave {
  background: #ef4444;
  width: 8%;
  border-radius: 6px;
}

/* Mini-Dashboard (iPad / iPhone) */
.dash {
  width: 100%;
  height: 100%;
  background: #0d1117;
  color: #fff;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  padding: 0.9em;
  gap: 0.8em;
}
.dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dash__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4em;
  color: #fff;
  letter-spacing: -0.06em;
}
.dash__brand em { color: var(--accent); font-style: normal; }
.dash__avatar {
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b6472, #2a2f3a);
}
.dash__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
}
.dash__kpi {
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6em;
  padding: 0.7em 0.6em;
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.dash__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7em;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}
.dash__lbl {
  font-size: 0.85em;
  color: #8a93a3;
  letter-spacing: 0.02em;
}
.dash__chart {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6%;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.6em;
  padding: 0.7em;
}
.dash__chart span {
  flex: 1;
  background: linear-gradient(180deg, #c8e636, #74ac2c);
  border-radius: 3px 3px 0 0;
  min-height: 8%;
}

/* === Fotorealistische Frame-Veredelung (Screen-Inhalte bleiben unverändert) === */
.devices__monitor-screen,
.devices__laptop-screen {
  position: relative;
}
/* Glas-Reflexion auf allen Screens */
.devices__monitor-screen::after,
.devices__laptop-screen::after,
.devices__tablet::after,
.devices__phone::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    118deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 14%,
    rgba(255, 255, 255, 0) 33%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 6;
}
/* Monitor: glänzender Glas-Rahmen + Alu-Standfuß */
.devices__monitor-screen {
  border-color: #0b0c0f;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.devices__monitor-neck {
  background: linear-gradient(
    90deg,
    #83868c 0%,
    #eaecf0 38%,
    #c6c9ce 60%,
    #7e8187 100%
  );
}
.devices__monitor-foot {
  background: linear-gradient(180deg, #d4d6db 0%, #aaadb3 55%, #82858b 100%);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}
/* Laptop: glänzendes Display + gebürstetes Alu-Deck */
.devices__laptop-screen {
  border-color: #0b0c0f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.devices__laptop-deck {
  background: linear-gradient(
    180deg,
    #eceef2 0%,
    #c8cbd0 16%,
    #9da0a6 58%,
    #7c7f85 100%
  );
}
.devices__laptop-deck::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16%;
  height: 26%;
  background: #8a8d93;
  border-radius: 0 0 6px 6px;
}
/* Tablet & Phone: tiefschwarzer Glas-Rahmen + dezente Tiefe */
.devices__tablet,
.devices__phone {
  border-color: #0b0c0f;
}
.devices__tablet {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.devices__phone {
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* --- GUARANTEE --- */
.guarantee {
  padding: var(--section-py) 0;
  background: var(--bg-guarantee);
  padding-top: calc(var(--section-py) + 110px) !important;
  padding-bottom: calc(var(--section-py) + 5rem) !important;
}
/* Dicke gruene Streifen links + rechts entlang der schraegen Kante
   (Uebergang So arbeiten wir -> So sicher sind wir uns) */
.guarantee-deco {
  position: relative;
  height: 0;
  z-index: 4;
}
.guarantee__stripes {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: skewY(-9deg);
}
.guarantee__stripes span {
  display: block;
  height: 22px;
  margin-bottom: 12px;
  border-radius: 4px;
}
/* Variation: aufsteigende Treppe (4 Balken, immer breiter, gestaffelt) */
.guarantee__stripes--left { left: 18px; top: -54px; }
.guarantee__stripes--left span { height: 18px; margin-bottom: 10px; }
.guarantee__stripes--left span:nth-child(1) { background: #D4E87A; width: 80px; margin-left: 96px; }
.guarantee__stripes--left span:nth-child(2) { background: var(--accent); width: 130px; margin-left: 64px; }
.guarantee__stripes--left span:nth-child(3) { background: #D4E87A; width: 180px; margin-left: 32px; }
.guarantee__stripes--left span:nth-child(4) { background: var(--accent); width: 230px; margin-left: 0; }
.guarantee__stripes--right { right: 28px; top: -212px; text-align: right; }
.guarantee__stripes--right span { margin-left: auto; }
.guarantee__stripes--right span:nth-child(1) { background: #D4E87A; width: 190px; }
.guarantee__stripes--right span:nth-child(2) { background: var(--accent); width: 140px; margin-right: 40px; }
.guarantee__inner { text-align: center; }
.guarantee__kicker {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-muted);
  font-size: 1.25rem;
}
.guarantee__headline {
  color: var(--text-dark);
}
.guarantee__body {
  max-width: 680px;
  margin: 2rem auto 0;
}
.guarantee__body p {
  margin-bottom: 1.25em;
  font-size: 26px;
  line-height: 1.7;
  color: var(--text-muted);
}
.guarantee__body strong { color: var(--text-dark); }

/* --- GUIDE --- */
.guide {
  padding: var(--section-py) 0;
  background: #FFFFFF;
}
.guide__inner {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: center;
}
.guide__cover {
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  max-width: 320px;
  margin: 0 auto;
}
.guide__desc {
  color: var(--text-muted);
  margin: 1rem 0 1.5rem;
  font-size: 1.0625rem;
}
.guide__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.guide__list li {
  padding-left: 1.75rem;
  position: relative;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.guide__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 767px) {
  .guide__inner { grid-template-columns: 1fr; text-align: center; }
  .guide__list { text-align: left; }
}

/* --- TESTIMONIALS --- */
.testimonials {
  padding: var(--section-py) 0 calc(var(--section-py) + 4rem);
  background: #0A0A0A;
}
/* Gruene Streifen am Uebergang So sicher -> Testimonials
   (Rechteck-Variation: solide Balken + Outline-Box wie im Hero) */
.testimonials-deco {
  position: relative;
  height: 0;
  z-index: 4;
}
.testimonials__stripes {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: skewY(-9deg);
}
.testimonials__stripes span {
  display: block;
  height: 22px;
  margin-bottom: 14px;
  border-radius: 4px;
}
.testimonials__stripes .t-box {
  width: 48px;
  height: 48px;
  border: 3px solid var(--accent);
  border-radius: 6px;
  opacity: 0.75;
  margin-top: 4px;
}
.testimonials__stripes--left { left: 30px; top: -44px; }
.testimonials__stripes--left span:nth-child(1) { background: var(--accent); width: 170px; margin-left: 30px; }
.testimonials__stripes--left span:nth-child(2) { background: #D4E87A; width: 120px; margin-left: 50px; }
.testimonials__stripes--left .t-box { margin-left: 14px; }
.testimonials__stripes--right { right: 30px; top: -232px; text-align: right; }
.testimonials__stripes--right span { margin-left: auto; }
.testimonials__stripes--right span:nth-child(1) { background: #D4E87A; width: 130px; margin-right: 50px; }
.testimonials__stripes--right span:nth-child(2) { background: var(--accent); width: 200px; margin-right: 0; }
.testimonials__stripes--right span:nth-child(3) { background: #D4E87A; width: 100px; margin-right: 70px; }
.testimonials__inner { text-align: center; transform: translateY(-40px); }
.testimonials__kicker {
  display: block;
  margin-bottom: 2.5rem;
  color: var(--text-on-dark);
}
/* Auto-Zitat-Rotator */
.quotes {
  display: grid;
  max-width: 840px;
  margin: 0 auto;
}
.quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin: 0;
}
.quote--active {
  opacity: 1;
  visibility: visible;
}
.quote__text {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-light);
}
.quote__author {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9375rem;
}
.quotes__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.75rem;
}
.quotes__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.3s ease, transform 0.3s ease;
}
.quotes__dot--active {
  background: var(--accent);
  transform: scale(1.25);
}
.testimonials__main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials__bg {
  position: absolute;
  inset: 0;
}
.testimonials__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonials__bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
}
.testimonials__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2rem;
  max-width: 700px;
}
.testimonials__logo {
  height: 32px;
  width: auto;
  margin-bottom: 1.5rem;
  filter: brightness(0) invert(1);
}
.testimonials__quote {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
.testimonials__author {
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}
.testimonials__company {
  color: var(--text-on-dark);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
.testimonials__play { margin-top: 1.5rem; }
.testimonials__thumbs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.5rem 0;
}
.testimonials__thumbs::-webkit-scrollbar { display: none; }
.testimonials__thumb {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.5;
  transition: opacity 0.3s;
  cursor: pointer;
}
.testimonials__thumb--active,
.testimonials__thumb:hover { opacity: 1; }
.testimonials__thumb img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
}
.testimonials__thumb--active img { border-color: var(--accent); }
.testimonials__thumb span {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-on-dark);
}

/* --- FAQ --- */
.faq {
  padding: var(--section-py) 0;
  background: #FFFFFF;
}
/* Gruene Streifen am Uebergang Testimonials -> FAQ
   (Variation 6: Outline-Rechteck ueberlappt von gefuelltem Balken) */
.faq-deco {
  position: relative;
  height: 0;
  z-index: 4;
}
.faq__stripes {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform: skewY(-9deg);
}
.faq__stripes .bar {
  display: block;
  border-radius: 4px;
  background: var(--accent);
  margin-bottom: 12px;
}
.faq__stripes .bar2 { background: #D4E87A; }
.faq__stripes .obar {
  display: block;
  border-radius: 4px;
  background: none;
  border: 3px solid var(--accent);
  margin-bottom: 12px;
}
/* Links: volle Groesse */
.faq__stripes--left { left: 30px; top: -64px; }
.faq__stripes--left .obar { width: 240px; height: 34px; }
.faq__stripes--left .bar  { width: 150px; height: 20px; margin-top: -42px; margin-left: 60px; }
.faq__stripes--left .bar2 { width: 110px; height: 20px; margin-top: 18px; margin-left: 20px; }
/* Rechts: nur gefuellte Balken, gestaffelt */
.faq__stripes--right { right: 30px; top: -210px; }
.faq__stripes--right .bar { height: 20px; }
.faq__stripes--right .bar:nth-child(1) { width: 120px; margin-left: 80px; }
.faq__stripes--right .bar:nth-child(2) { width: 195px; margin-left: 0; }
.faq__stripes--right .bar:nth-child(3) { width: 145px; margin-left: 50px; }
.faq__inner { max-width: 980px; margin: 0 auto; }
.faq__headline {
  text-align: center;
  color: #000;
  margin-bottom: 3rem;
  white-space: nowrap;
}
.faq__list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq__item {
  background: #ECECEC;
  border-radius: 12px;
  overflow: hidden;
}
.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 1.85rem;
  font-size: 1.375rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  color: #1A1A1A;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__chevron {
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__item--active .faq__chevron { transform: rotate(180deg); }
.faq__answer {
  height: 0;
  overflow: hidden;
  padding: 0 1.85rem;
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq__answer p {
  font-size: 1rem;
  color: #555;
  line-height: 1.7;
  padding-bottom: 1.5rem;
}
@media (prefers-reduced-motion: reduce) {
  .faq__answer { transition: none; }
  .faq__chevron { transition: none; }
}

/* --- FINAL CTA --- */
.final-cta {
  position: relative;
  padding: var(--section-py) 0;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background: #000;
}
.final-cta__icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-logo {
  position: absolute;
  width: 64px;
  height: 64px;
  background: #131313;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  opacity: 0.85;
}
.cta-logo svg { width: 56%; height: 56%; }
.cta-logo img { width: 62%; height: 62%; object-fit: contain; }
.cta-logo__emoji { font-size: 2.4rem; line-height: 1; }
/* bewusst unregelmäßig: variierende Position, Größe, Deckkraft */
.cta-logo--1 { /* Facebook */ top: 4%; left: 3%; width: 78px; height: 78px; opacity: 0.95; animation: float 6s ease-in-out infinite; }
.cta-logo--2 { /* Instagram */ top: 2%; left: 33%; width: 72px; height: 72px; opacity: 0.8; animation: float 7.5s ease-in-out infinite 1.1s; }
.cta-logo--3 { /* Google */ top: 8%; right: 7%; width: 70px; height: 70px; opacity: 0.9; animation: float 6.5s ease-in-out infinite 0.4s; }
.cta-logo--4 { /* Google Ads */ bottom: 8%; left: 8%; width: 82px; height: 82px; opacity: 1; animation: float 8s ease-in-out infinite 2s; }
.cta-logo--5 { /* Search Console */ bottom: 4%; left: 33%; width: 54px; height: 54px; opacity: 0.72; animation: float 7s ease-in-out infinite 1.6s; }
.cta-logo--6 { /* YouTube */ top: 47%; right: 2%; width: 80px; height: 80px; opacity: 0.92; animation: float 6s ease-in-out infinite 0.9s; }
.cta-logo--7 { /* Shopify */ bottom: 7%; right: 30%; width: 60px; height: 60px; opacity: 0.82; animation: float 8.5s ease-in-out infinite 0.2s; }
.cta-logo--8 { /* WordPress */ top: 44%; left: 4%; width: 62px; height: 62px; opacity: 0.88; animation: float 7s ease-in-out infinite 1.4s; }
.cta-logo--9 { /* Local Peak */ bottom: 14%; right: 9%; width: 72px; height: 72px; opacity: 0.95; animation: float 6.8s ease-in-out infinite 2.4s; }

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

.final-cta__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.final-cta__headline {
  color: #FFFFFF;
  max-width: 760px;
  margin: 0 auto 2rem;
  line-height: 1.08;
}

/* Final CTA Button: Olive-Gruen statt Neon-Lime */
.final-cta .btn-accent {
  background: var(--accent-olive);
}
.final-cta .btn-accent:hover {
  background: #93A830;
}

/* Sektionsteiler entfernt */

/* --- FOOTER --- */
.footer {
  padding: 4rem 0 2rem;
  background: #000;
  color: var(--text-light);
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.5fr;
  gap: 2rem;
}
.footer__logo {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.footer__desc {
  font-size: 0.9375rem;
  color: var(--text-on-dark);
  line-height: 1.6;
  margin-top: 1rem;
  max-width: 30ch;
}
.footer__address {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--text-on-dark);
  margin-top: 1rem;
  line-height: 1.7;
}
.footer__country {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  padding: 0.85rem 1.2rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease;
}
.footer__country:hover { border-color: var(--accent); }
.footer__country-flag { font-size: 1.25rem; line-height: 1; }
.footer__country-chevron { margin-left: 0.2rem; }

/* Land-Auswahl Popup */
.country-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.country-modal[hidden] { display: none; }
.country-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}
.country-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: country-pop 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes country-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.country-modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  color: #111;
  transition: color 0.2s ease;
}
.country-modal__close:hover { color: #888; }
.country-modal__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -0.05em;
  color: #000000;
  margin-bottom: 1.5rem;
  text-align: center;
}
.country-modal__list { display: flex; flex-direction: column; gap: 0.25rem; }
.country-opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  color: #111;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.country-opt:hover { background: #F3F3F3; }
.country-opt--active { border-color: #D4D4D4; }
.country-opt__flag { font-size: 1.45rem; line-height: 1; }
/* Footer-Signup: links eckig, rechts rund */
.footer__signup {
  display: flex;
  align-items: stretch;
  margin-top: 1.25rem;
  max-width: 380px;
  background: #FFFFFF;
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  overflow: hidden;
}
.footer__signup-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.9rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #111;
}
.footer__signup-input::placeholder { color: #888; }
.footer__signup-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0 1.5rem;
  background: var(--accent);
  color: #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.2s ease;
}
.footer__signup-btn:hover { background: var(--accent-hover); }
.footer__heading {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-light);
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.5rem; }
.footer__col a {
  font-size: 0.875rem;
  color: var(--text-on-dark);
  cursor: pointer;
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--accent); }
.footer__form { margin-top: 0.5rem; }
.footer__input-wrap {
  display: flex;
  gap: 0.5rem;
}
.footer__input {
  flex: 1;
  padding: 0.625rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: #1A1A1A;
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 0.875rem;
  outline: none;
  min-width: 0;
}
.footer__input::placeholder { color: #666; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.footer__social a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__social a:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-2px);
}
.footer__social svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.footer__legal {
  font-size: 0.8125rem;
  color: #999;
  text-align: center;
}
.footer__fun { margin-top: 0.25rem; }
.footer__badges {
  display: flex;
  gap: 1rem;
}
.footer__badge {
  height: 40px;
  width: auto;
  filter: grayscale(1) opacity(0.5);
}

@media (max-width: 1023px) {
  .footer__inner { grid-template-columns: repeat(2, 1fr); }
  .footer__col--brand { grid-column: span 2; }
  .footer__col--newsletter { grid-column: span 2; }
}
@media (max-width: 767px) {
  .footer__inner { grid-template-columns: 1fr; }
  .footer__col--brand, .footer__col--newsletter { grid-column: span 1; }
  .footer__bottom { flex-direction: column; text-align: center; }
}

/* --- GLOBAL RESPONSIVE FIXES --- */
@media (max-width: 767px) {
  .display-xl { font-size: clamp(2.5rem, 12vw, 4rem); }
  .display-lg { font-size: clamp(2rem, 8vw, 3rem); }
  /* Section-Headlines konsistent in Wachse-10x-Groesse */
  .cases__inner > .display-lg,
  .platform__headline,
  .guarantee__headline,
  .faq__headline,
  .final-cta__headline { font-size: clamp(3rem, 8vw, 6.5rem); }
  /* harte Umbrueche raus, Browser bricht natuerlich um */
  .cases__inner > .display-lg br,
  .platform__headline br,
  .guarantee__headline br,
  .faq__headline br,
  .final-cta__headline br { display: none; }
  .faq__headline { white-space: normal; }
  /* Luft fuer Umlaut-Punkte zwischen den Zeilen */
  .platform__headline { line-height: 1.06; }
  .guarantee__kicker { font-size: 13px; }
  .platform .section-label--pill,
  .cases__inner .section-label--pill { font-size: 13px; padding: 4px 18px; }
  /* Hero: erste Zeile groesser, mit Luft zur zweiten */
  .hero__h1-line1 { font-size: 1.45em; line-height: 1; display: inline-block; margin-bottom: 0.05em; }
  .display-md { font-size: clamp(1.5rem, 5vw, 2rem); }
  .final-cta { min-height: auto; padding: 4rem 0; }
  .cta-logo { display: none; }
}

/* Tablet tweaks */
@media (min-width: 768px) and (max-width: 1279px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .offering__grid { gap: 1.5rem; }
}

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

/* ============================================
   CTA-BANNER (nach Sales-Letter)
   ============================================ */
/* In der Sales-Letter-Section */
.letter-cta {
  max-width: 1000px;
  margin: 2.8rem auto 0;
  padding: 0 1.5rem;
}

/* Sales-Letter Teil 2: eigene WEISSE Section mit schraeger Kante */
.rant {
  position: relative;
  background: var(--bg-white);
  padding: 4rem 0 11rem; /* unten: haelt den Slant der naechsten Section frei */
  overflow: visible;
  z-index: 1;
}
/* weisse, schraege Flaeche die nach oben in die graue Letter-Section ragt */
.rant__slope {
  position: absolute;
  top: -110px;
  left: -3px;
  right: -3px;
  height: 300px;
  background: var(--bg-white);
  transform: skewY(-4deg);
  transform-origin: top left;
  z-index: -1;
  pointer-events: none;
}
/* Emojis poken ueber die Kante (nicht geclippt, ueber dem Slope) */
.rant__emojis {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.6rem;
  margin: -235px 0 2rem;
  position: relative;
  z-index: 2;
}
.letter__emoji {
  line-height: 1;
}
.letter__emoji img {
  height: clamp(7.5rem, 19vw, 13.5rem);
  width: auto;
  display: block;
}
.letter__rant-headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  text-align: center;
  color: #111;
  max-width: 16ch;
  margin: 0 auto 2.4rem;
}

/* "Mach das nicht" — Doodle-Section mit eigener SVG-Grafik */
.dont {
  position: relative;
  z-index: 2; /* ueber der weissen Rant-Section (z-index 1), sonst verdeckt sie die schraege Kante */
  background: #f4f4ee;
  text-align: center;
  /* Top-Padding eng an die Kante (ueberschreibt den Slant-Default) */
  padding-top: calc(var(--slant-h) + 2.5rem) !important;
  padding-bottom: calc(var(--section-py) + 8rem);
}
.dont__badge {
  display: inline-block;
  background: #84c13c;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
}
.dont__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 22ch;
  margin: 1.6rem auto 0;
}
.dont__graphic {
  max-width: 1000px;
  margin: 1.6rem auto 0;
}
.dont__letter {
  text-align: left;
  margin-top: 3rem;
}
.dont__subhead {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #111;
  margin-bottom: 1.4rem;
}

/* ===== Beweis / Ergebnisse-Section (Platzhalter-Grafiken) ===== */
.proof {
  position: relative;
  z-index: 3; /* ueber dont (z2), sonst verdeckt dessen Grau die schraege Kante */
  background: var(--bg-white);
  padding-bottom: calc(var(--section-py) + 8rem);
}
/* damit die naechste Section ihre Diagonale ueber den Vorgaenger zeigt
   (Staffelung: proof z3 -> method z4 -> stats z5) */
.stats.slant-top {
  z-index: 5;
}

/* Durchgehende schraege Section-Border (links unten -> rechts oben) */
.slanted {
  position: relative;
  z-index: 4;
  clip-path: polygon(0 130px, 100% 0, 100% 100%, 0 100%);
  margin-top: -130px;
  padding-top: calc(var(--section-py) + 130px) !important;
  /* dezenter Schatten an der Diagonale, damit auch hell-auf-hell sichtbar ist */
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.13));
}
@media (max-width: 700px) {
  .slanted {
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
    margin-top: -70px;
    padding-top: calc(var(--section-py) + 70px) !important;
  }
}
/* Memoji-Sections: Clip auf die BG-Ebene (::before) statt auf die Section,
   damit der Memoji ueber die schraege Kante auf die Border ragen kann */
.memosec.slanted {
  background: transparent !important;
  clip-path: none;
  filter: none;
}
.memosec.slanted::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(0 130px, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.13));
}
.memosec--white.slanted::before {
  background: var(--bg-white);
}
.memosec--grey.slanted::before {
  background: #f4f4ee;
}
.memosec--dark.slanted::before {
  background: #141414;
}
.memosec.slanted > .container {
  position: relative;
  z-index: 1;
}
.memosec.slanted .memosec__emoji,
.memosec.slanted .popvid {
  position: relative;
  z-index: 1;
  margin-top: -240px;
}
@media (max-width: 700px) {
  .memosec.slanted::before {
    clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
  }
  .memosec.slanted .memosec__emoji,
  .memosec.slanted .popvid {
    margin-top: -140px;
  }
}
.proof__inner {
  text-align: center;
}
.proof__badge {
  display: inline-block;
  background: #84c13c;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
}
.proof__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 22ch;
  margin: 1.6rem auto 0;
}
.proof__sub {
  color: #5a5a55;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 56ch;
  margin: 1rem auto 0;
}
/* Platzhalter untereinander (volle Breite, gestapelt) wie in der Vorlage */
.proof-grid {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin-top: 3.2rem;
  text-align: left;
}
.proof-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.proof-card:nth-child(even) {
  flex-direction: row-reverse;
}
.proof-ph {
  flex: 0 0 56%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: #a6a6a0;
  background: #f4f4ee;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 10px,
    transparent 10px,
    transparent 20px
  );
}
.proof-card:nth-child(odd) .proof-ph {
  border-right: 1px solid #ececec;
}
.proof-card:nth-child(even) .proof-ph {
  border-left: 1px solid #ececec;
}
.proof-ph svg {
  width: 50px;
  height: 50px;
}
.proof-ph span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.proof-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 2.4rem;
}
.proof-card__stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 4vw, 2.8rem);
  color: #111;
  line-height: 1;
  letter-spacing: -0.03em;
}
.proof-card__text {
  color: #5a5a55;
  font-size: 1.02rem;
  line-height: 1.55;
  margin-top: 0.6rem;
}
@media (max-width: 760px) {
  .proof-card,
  .proof-card:nth-child(even) {
    flex-direction: column;
  }
  .proof-ph {
    flex: none;
    min-height: 190px;
    border: none !important;
    border-bottom: 1px solid #ececec !important;
  }
}
.proof__close {
  max-width: 680px;
  margin: 3rem auto 0;
  text-align: left;
}
.proof__close p {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--text-dark);
  font-size: 1.625rem;
  margin-bottom: 1em;
}
.proof__close p:last-child {
  margin-bottom: 0;
}

/* ===== Methode / "warum wir so sicher sind" (hell, zentriert wie Vorlage) ===== */
.method {
  position: relative;
  z-index: 4; /* ueber proof (z3) */
  background: #f5f5f0;
  color: var(--text-dark);
  text-align: center;
  padding-bottom: calc(var(--section-py) + 4rem); /* haelt den Slant der naechsten Section frei */
}
.method__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 20ch;
  margin: 0 auto;
}
/* breiter Collage-Platzhalter (Presse, Auszeichnungen, Team) */
.method-ph {
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  margin: 3rem auto 0;
  border: 2px dashed #d4d4cc;
  border-radius: 18px;
  background: #fff;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.025) 0,
    rgba(0, 0, 0, 0.025) 10px,
    transparent 10px,
    transparent 20px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: #a6a6a0;
}
.method-ph svg {
  width: 58px;
  height: 58px;
  stroke: #b8b8b0;
}
.method-ph span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.method-ph small {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #b6b6ae;
}
/* Sales-Letter laeuft unter der Collage weiter */
.method__letter {
  text-align: left;
  margin: 3.2rem auto 0;
}
.method__letter strong {
  color: #111;
}

/* ===== "Magie statt System"-Section (hell, Emojis + Headline + Letter) ===== */
.magic {
  position: relative;
  z-index: 1; /* ueber der schwarzen cases-Section */
  background: #f4f4ef;
  text-align: center;
  /* offer-Section (slant-top) schliesst jetzt direkt an -> genug Luft, damit
     ihre Diagonale den gruenen CTA nicht anschneidet */
  padding-bottom: calc(var(--section-py) + 8rem);
}
.magic__emojis {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.8rem, 3vw, 2.2rem);
  font-size: clamp(5.5rem, 14vw, 9.5rem);
  line-height: 1;
  margin-bottom: 1.6rem;
}
.magic__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 22ch;
  margin: 0 auto;
}
.magic__letter {
  text-align: left;
  margin: 2.8rem auto 0;
}
.magic__letter strong {
  color: #111;
}
/* Aufzaehlung mit gruenen Haken */
.magic-list {
  list-style: none;
  margin: 1.7rem 0 0;
  padding: 0;
}
.magic-list li {
  position: relative;
  padding-left: 3rem;
  margin-top: 1.1rem;
  font-size: 1.625rem; /* nicht kleiner als die uebrigen Absaetze */
  line-height: 1.45;
  color: #1a1a1a;
}
.magic-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.8rem;
  height: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2384c13c'/%3E%3Cpath d='M6.6 12.4l3.4 3.4 7.4-7.6' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
/* Leerzeile nach den Listen vor dem Fazit-Absatz */
.magic-list + p:not(.magic-trans) { margin-top: 2.6rem; }
.offer-steps + p { margin-top: 2.8rem; }

/* italic-Ueberleitung + Zwischen-Headline */
.magic-trans {
  margin-top: 1.6rem;
}
.magic-subhead {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: #111;
  margin: 1.4rem 0 0;
}

/* ===== "Gossip": gefaecherte Bilder + Headline + Kundenzitat ===== */
.gossip {
  position: relative;
  background: #f4f4ef;
  text-align: center;
  padding: 1rem 0 calc(var(--section-py) + 4rem);
  overflow: hidden; /* verhindert horizontalen Ueberlauf der gedrehten Fotos */
}
.gossip-photos {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3rem 0 3.5rem;
}
.gossip-photo {
  flex: 0 0 auto;
  width: clamp(62px, 15vw, 212px);
  aspect-ratio: 4 / 3;
  margin-inline: -1.4vw;
  border: 6px solid #fff;
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.2);
  background: #e7e7e0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.03) 0,
    rgba(0, 0, 0, 0.03) 8px,
    transparent 8px,
    transparent 16px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: #adada4;
}
.gossip-photo svg {
  width: clamp(18px, 2.4vw, 32px);
  height: clamp(18px, 2.4vw, 32px);
}
.gossip-photo span {
  font-size: clamp(0.5rem, 1vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.gossip-photo--1 {
  transform: rotate(-9deg) translateY(16px);
  z-index: 1;
}
.gossip-photo--2 {
  transform: rotate(5deg) translateY(-12px);
  z-index: 2;
}
.gossip-photo--3 {
  transform: rotate(-3deg) translateY(8px);
  z-index: 4;
}
.gossip-photo--4 {
  aspect-ratio: 3 / 4;
  transform: rotate(6deg) translateY(-6px);
  z-index: 3;
}
.gossip-photo--5 {
  transform: rotate(-7deg) translateY(14px);
  z-index: 1;
}
.gossip__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 20ch;
  margin: 0 auto;
}
.gossip-quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  line-height: 1.45;
  color: #1a1a1a;
  max-width: 24ch;
  margin: 2rem auto 0;
}
.gossip-cite {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  color: #6a6a64;
  margin-top: 1.6rem;
}

/* ===== Finales Angebot: eyebrow, Headline, gruene 1-2-3-Liste, P.S./P.P.S. ===== */
.offer {
  position: relative;
  z-index: 2; /* ueber der gossip-Section */
  background: var(--bg-white);
  text-align: center;
  padding-bottom: calc(var(--section-py) + 4rem);
}
.offer__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 100%;
  text-align: left;
  background: #8fc93f;
  color: #2c4a1a;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(0.72rem, 1.5vw, 0.95rem);
  line-height: 1.3;
  padding: 0.65rem 1.6rem 0.65rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 1.6rem;
}
.offer__eyebrow::before {
  content: '';
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #f4623f, #d4271c 72%);
  box-shadow: 0 0 0 0 rgba(212, 39, 28, 0.55);
  animation: offerDotPulse 1.4s ease-in-out infinite;
}
@keyframes offerDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 39, 28, 0.5);
  }
  70% {
    box-shadow: 0 0 0 0.6rem rgba(212, 39, 28, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(212, 39, 28, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer__eyebrow::before {
    animation: none;
  }
}
.offer__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 30ch;
  margin: 0 auto;
}
.offer__letter {
  text-align: left;
  margin: 2.6rem auto 0;
}
.offer__letter strong {
  color: #111;
}
.offer-steps {
  list-style: none;
  counter-reset: ostep;
  padding: 0;
  margin: 1.8rem 0 0;
}
.offer-steps li {
  position: relative;
  padding-left: 6rem;
  margin-top: 2.8rem;
  font-size: 1.625rem;
  line-height: 1.45;
  color: #1a1a1a;
}
.offer-steps li::before {
  counter-increment: ostep;
  content: counter(ostep);
  position: absolute;
  left: 0;
  top: -0.1em;
  color: #8fc93f;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.4rem;
  line-height: 1;
  transform: scaleX(1.15);
  transform-origin: left center;
}
.offer__cta {
  margin-top: 2.8rem;
}
.offer__pps {
  margin-top: 2.2rem;
}

/* ===== Video-Testimonial (dunkel): Logo, Zitat, Lime-Play-Button, Video ===== */
.vtest {
  position: relative;
  z-index: 3; /* ueber der offer-Section (z2) */
  background: #141414;
  color: #fff;
  text-align: center;
  padding-bottom: var(--section-py);
}
.vtest__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 1.4rem;
  border: 1px dashed rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.vtest__logo svg {
  width: 26px;
  height: 26px;
  stroke: rgba(255, 255, 255, 0.5);
}
.vtest__quote {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: 1.4;
  color: #fff;
  max-width: 26ch;
  margin: 0 auto;
}
.vtest__cite {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--accent);
  margin-top: 1.6rem;
}
.vtest__play {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2.6rem auto;
  box-shadow: 0 0 0 16px rgba(200, 230, 54, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vtest__play:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 22px rgba(200, 230, 54, 0.14);
}
.vtest__play svg {
  width: 30px;
  height: 30px;
  fill: #14140f;
  margin-left: 5px;
}
.vtest__video {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: var(--container-px);
}
.vtest__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: #222018;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.03) 0,
    rgba(255, 255, 255, 0.03) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
}
.vtest__thumb svg {
  width: 50px;
  height: 50px;
  stroke: rgba(255, 255, 255, 0.45);
}
.vtest__thumb span {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ===== GEO-Erklaersektion (dunkel, flache Kanten): die Suche hat sich veraendert ===== */
.geo {
  background: #141414;
  color: #fff;
  text-align: center;
  padding: calc(var(--section-py) + 0.5rem) 0;
}
.geo__badge {
  display: inline-block;
  background: #84c13c;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.82rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
}
.geo__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #fff;
  max-width: 22ch;
  margin: 1.4rem auto 0;
}
.geo__lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 1.4rem auto 0;
}
.geo__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  max-width: 880px;
  margin: 3rem auto 0;
  text-align: left;
}
@media (max-width: 760px) {
  .geo__split {
    grid-template-columns: 1fr;
  }
}
.geo__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1.8rem 1.8rem 2rem;
}
.geo__card--accent {
  border-color: #84c13c;
  background: rgba(132, 193, 60, 0.08);
}
.geo__emoji {
  font-size: 2.7rem;
  line-height: 1;
  display: block;
  margin-bottom: 0.6rem;
}
.geo__card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.05em;
}
.geo__card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.55;
}
.geo__card--accent p {
  color: rgba(255, 255, 255, 0.85);
}
.geo__close {
  max-width: 52ch;
  margin: 2.8rem auto 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: #fff;
}

/* ===== Generische Feature-Section (flach) + Compare-Spalten ===== */
.fsec {
  text-align: center;
  padding: var(--section-py) 0;
}
.fsec--grey {
  background: #f4f4ee;
}
.fsec--white {
  background: var(--bg-white);
}
/* haelt unten den Slant-Anschnitt der naechsten (schraegen) Section frei */
.fsec--slantnext {
  padding-bottom: calc(var(--section-py) + 4rem);
}
.fsec__badge {
  display: inline-block;
  background: #84c13c;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.82rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
}
.fsec__badge--warn {
  background: #c0392b;
}
.fsec__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 22ch;
  margin: 1.4rem auto 2.8rem;
}
.fsec__lead {
  color: #5a5a55;
  font-size: 1.08rem;
  line-height: 1.6;
  max-width: 60ch;
  margin: 1.2rem auto 0;
}
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 920px;
  margin: 2.8rem auto 0;
  text-align: left;
}
@media (max-width: 760px) {
  .compare {
    grid-template-columns: 1fr;
  }
}
.compare__col {
  border-radius: 16px;
  padding: 1.8rem 1.8rem 2rem;
}
.compare__col--bad {
  background: #fbeeee;
  border: 1px solid #f0d4d4;
}
.compare__col--good {
  background: #eef6e3;
  border: 1px solid #d3e8b8;
}
.compare__col h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  color: #111;
  margin-bottom: 1rem;
  letter-spacing: -0.05em;
}
.compare__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.compare__col li {
  position: relative;
  padding-left: 2rem;
  margin-top: 0.8rem;
  line-height: 1.5;
  color: #2a2a26;
}
.compare__col--bad li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #c0392b;
  font-weight: 700;
}
.compare__col--good li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #5a9e1f;
  font-weight: 700;
}

/* ===== GEO-Handbuch (Lead-Magnet, Lime) ===== */
.guide {
  background: var(--bg-white);
  color: #14140f;
  text-align: center;
  padding: var(--section-py) 0 calc(var(--section-py) + 4rem);
}
.guide__desc {
  max-width: 680px;
  margin: 3.6rem auto 0;
  font-size: 1.625rem;
  line-height: 1.5;
  text-align: left;
  color: #1a1a1a;
}
.guide__emoji {
  font-size: 3.2rem;
  line-height: 1;
  display: block;
}
.guide__badge {
  display: inline-block;
  margin-top: 0.8rem;
  background: #14140f;
  color: var(--accent);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
}
.guide__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #14140f;
  max-width: 22ch;
  margin: 1.1rem auto 0;
}
.guide__list {
  list-style: none;
  padding: 0;
  margin: 1.6rem auto 0;
  max-width: 680px;
  text-align: left;
}
.guide__list li {
  position: relative;
  padding-left: 3.3rem;
  margin-top: 1.5rem;
  font-size: 1.625rem;
  line-height: 1.5;
  color: #1b1c12;
}
.guide__list li strong {
  color: #14140f;
}
.guide__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 2.1rem;
  height: 2.1rem;
  background: #c8e636;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
/* Intro-Zeile ueber der Liste + Schlusszeile: enger an die Liste */
.guide__lead {
  margin-top: 1.8rem;
}
.guide__more {
  margin-top: 1.8rem;
}
.guide__btn {
  display: inline-block;
  margin-top: 2.2rem;
  background: #14140f;
  color: #fff;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  padding: 1.1rem 2.2rem;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.guide__btn:hover {
  transform: translateY(-2px);
}
.guide__note {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #3a3b2a;
}

/* ===== GEO/SEO-FAQ (Accordion) ===== */
.faqsec {
  background: #f4f4ee;
  padding: var(--section-py) 0;
  text-align: center;
}
.faqsec__emoji {
  display: block;
  width: auto;
  height: clamp(3.6rem, 8vw, 6rem);
  margin: 0 auto 1.2rem;
}
/* FAQ-Inhalt linksbuendig wie auf der Startseite (Headline/Emoji bleiben zentriert) */
.faqsec .faq__question,
.faqsec .faq__answer {
  text-align: left;
}
.faqsec__list {
  max-width: 760px;
  margin: 2.6rem auto 0;
  text-align: left;
}
.faq-item {
  border-bottom: 1px solid #e1e1d8;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.3rem 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  color: #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 1.6rem;
  color: #84c13c;
  font-weight: 700;
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item__a {
  padding: 0 0 1.4rem;
  color: #4a4a45;
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 64ch;
}

/* ===== Memoji-Sektion (grosses Memoji oben + Headline, alles untereinander) ===== */
.memosec {
  text-align: center;
  /* mehr Luft unten, damit die Diagonale der Folge-Section (slanted zieht 130px
     hoch) den gruenen CTA nicht anschneidet */
  padding: var(--section-py) 0 calc(var(--section-py) + 7rem);
}
.memosec--white {
  background: var(--bg-white);
}
.memosec--grey {
  background: #f4f4ee;
}
.memosec--dark {
  background: #141414;
  color: #fff;
}
.memosec__emoji {
  display: block;
  width: auto;
  height: clamp(12.5rem, 25vw, 20rem);
  margin: 0 auto 1.4rem;
}
.memosec__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  color: #111;
  max-width: 22ch;
  margin: 0 auto;
}
.memosec--dark .memosec__headline {
  color: #fff;
}
.memosec__lead {
  font-size: 1.625rem;
  line-height: 1.5;
  color: #2a2a26;
  max-width: 680px;
  margin: 1.6rem auto 0;
}
.memosec--dark .memosec__lead {
  color: rgba(255, 255, 255, 0.72);
}
/* Fliesstext-Spalte (untereinander, konstante Schriftgroesse) */
.memosec__body {
  max-width: 680px;
  margin: 1.8rem auto 0;
  text-align: left;
}
.memosec__body p {
  font-size: 1.625rem;
  line-height: 1.5;
  margin-top: 1.1rem;
}
/* Lange Sales-Letter-Copy (linksbuendig, mehr Absatz-Abstand) */
.memosec__body--letter {
  max-width: 720px;
}
.memosec__body--letter p {
  margin-top: 1.6rem;
}
.memosec__body--letter u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* Text-Highlight (Lime) */
.hl {
  background: var(--accent);
  color: #14140f;
  padding: 0.06em 0.22em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Unterstreichung in Body-Copy */
.memosec__body u {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.memosec--dark .memosec__body p {
  color: rgba(255, 255, 255, 0.85);
}
.memosec__body strong {
  color: inherit;
}

/* gestapelte Bloecke (statt Side-by-Side-Compare) */
.stack {
  max-width: 760px;
  margin: 2.4rem auto 0;
  text-align: left;
}
.stack__block {
  margin-top: 2.2rem;
}
.stack__block h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.35rem;
  color: #111;
  margin-bottom: 0.9rem;
  letter-spacing: -0.05em;
}
.stack__block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stack__block li {
  position: relative;
  padding-left: 2.6rem;
  margin-top: 0.6rem;
  line-height: 1.45;
  font-size: 1.625rem;
  color: #2a2a26;
}
.stack__block--bad li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #c0392b;
  font-weight: 700;
}
.stack__block--good li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #5a9e1f;
  font-weight: 700;
}

/* Trust-/Logo-Leiste (Platzhalter) */
.trust {
  background: var(--bg-white);
  padding: 3rem 0;
  text-align: center;
}
.trust__label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #9a9a90;
  font-weight: 700;
  margin-bottom: 1.6rem;
}
.trust__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-px);
}
.trust__logo {
  width: 130px;
  height: 46px;
  border: 1px dashed #d2d2c8;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b6b6ac;
}

/* gefaecherte News-Screenshot-Platzhalter */
.newsshots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2.4rem 0 0;
}
.newsshot {
  flex: 0 0 auto;
  width: clamp(150px, 28vw, 360px);
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 1px solid #e2e2da;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #b0b0a6;
}
.newsshot svg {
  width: clamp(26px, 4vw, 40px);
  height: clamp(26px, 4vw, 40px);
  stroke: #c4c4ba;
}
.newsshot span {
  font-size: clamp(0.6rem, 1.3vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.newsshot--1 {
  transform: rotate(-5deg) translateY(8px);
  z-index: 1;
}
.newsshot--2 {
  transform: rotate(4deg) translateY(-8px);
  margin-left: -3vw;
  z-index: 2;
}

/* Buch-Mockup-Platzhalter (Free Report / GEO-Handbuch) */
.bookwrap {
  display: flex;
  justify-content: center;
  margin: 2.6rem 0;
}
.book {
  position: relative;
  width: clamp(200px, 30vw, 300px);
  aspect-ratio: 3 / 4;
}
.book__cover {
  position: absolute;
  inset: 0;
  background: #14140f;
  border-radius: 6px 12px 12px 6px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4);
  border-left: 8px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--accent);
  text-align: center;
  padding: 1.5rem;
  z-index: 2;
}
.book__cover .book__emoji {
  font-size: 2.4rem;
}
.book__cover .book__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.05em;
}
.book__cover .book__title em {
  color: var(--accent);
  font-style: normal;
}
.book__cover .book__sub {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.book__page {
  position: absolute;
  top: 6%;
  height: 88%;
  width: 70%;
  background: #fff;
  border: 1px solid #e2e2da;
  border-radius: 6px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.book__page--l {
  left: -18%;
  transform: rotate(-10deg);
  z-index: 1;
}
.book__page--r {
  right: -18%;
  transform: rotate(10deg);
  z-index: 1;
}

/* ===== Methode-Checkliste (gruene Haken) ===== */
.checklist {
  list-style: none;
  padding: 0;
  margin: 1.9rem auto 0;
  max-width: 660px;
  text-align: left;
}
.checklist li {
  position: relative;
  padding-left: 2.2rem;
  margin-top: 0.95rem;
  font-size: 1.25rem;
  line-height: 1.5;
}
.checklist li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #5a9e1f;
  font-weight: 700;
  font-size: 1.35rem;
}
.memosec--dark .checklist li {
  color: rgba(255, 255, 255, 0.88);
}

/* ===== Ergebnis-Bild-Grid (Platzhalter) ===== */
.imggrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 920px;
  margin: 2.6rem auto 0;
}
.imggrid__tile {
  aspect-ratio: 4 / 3;
  border: 1px dashed #cfcfc6;
  border-radius: 10px;
  background: #fafaf7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #b4b4a8;
}
.imggrid__tile svg {
  width: 30px;
  height: 30px;
  stroke: #c4c4ba;
}
.imggrid__tile span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .imggrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Testimonial-Karussell ===== */
.tcar {
  background: #141414;
  color: #fff;
  padding: var(--section-py) 0 calc(var(--section-py) + 3.5rem);
  text-align: center;
}
/* etwas weniger Abstand von der schraegen oberen Kante zum Inhalt */
.tcar.slanted {
  padding-top: calc(var(--section-py) + 90px) !important;
}
.tcar__eyebrow {
  display: inline-block;
  background: var(--accent);
  color: #14140f;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.8rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.tcar__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.3rem, 6vw, 5rem);
  line-height: 0.96;
  letter-spacing: -0.08em;
  margin-bottom: 2.6rem;
}
.tcar__viewport {
  max-width: 760px;
  margin: 0 auto;
  /* Grid-Stack: alle Slides in derselben Zelle -> Hoehe = laengstes Zitat,
     springt nicht mehr beim Wechsel (auch responsiv) */
  display: grid;
}
.tcar__slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.tcar__slide--active {
  opacity: 1;
  pointer-events: auto;
}
.tcar__stars {
  color: var(--accent);
  letter-spacing: 2px;
  margin-bottom: 0.8rem;
}
.tcar__quote {
  font-size: 1.5rem;
  line-height: 1.5;
  font-style: italic;
}
.tcar__name {
  margin-top: 1.4rem;
  font-weight: 700;
  color: var(--accent);
}
.tcar__role {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}
.tcar__dots {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 2rem;
}
.tcar__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  padding: 0;
}
.tcar__dot--active {
  background: var(--accent);
}
/* ===== Zweite Free-Report-CTA (Lime-Banner) ===== */
.refcta {
  background: var(--accent);
  color: #14140f;
  text-align: center;
  padding: var(--section-py) 0;
}
.refcta__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  line-height: 1.02;
  max-width: 22ch;
  margin: 0 auto;
  letter-spacing: -0.08em;
}
.refcta__sub {
  max-width: 52ch;
  margin: 1.1rem auto 0;
  font-size: 1.1rem;
  line-height: 1.55;
}
.refcta__btn {
  display: inline-block;
  margin-top: 1.9rem;
  background: #14140f;
  color: #fff;
  font-weight: 700;
  padding: 1rem 2.2rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.refcta__btn:hover {
  background: #000;
}

/* ===== Section-CTA-Button (lime, zentriert) ===== */
.sec-cta {
  display: inline-block;
  margin: 2.6rem auto 0;
  background: var(--accent);
  color: #14140f;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  padding: 1rem 2.4rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.sec-cta:hover {
  background: #d4ef5a;
}

/* Blauer Free-Report-Button */
.guide__btn--blue {
  background: #2233cc;
  color: #fff;
}
.guide__btn--blue:hover {
  background: #1b2aa8;
}

/* 2 Bild-Platzhalter nebeneinander */
.imgrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  max-width: 860px;
  margin: 2.4rem auto 0;
}
.imgrow__tile {
  aspect-ratio: 4 / 3;
  border: 1px dashed #cfcfc6;
  border-radius: 12px;
  background: #fafaf7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: #b4b4a8;
}
.imgrow__tile svg {
  width: 34px;
  height: 34px;
  stroke: #c4c4ba;
}
.imgrow__tile span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .imgrow {
    grid-template-columns: 1fr;
  }
}
/* News-Screenshot-Bild (Presse/Artikel) */
.newsimg {
  max-width: 1240px;
  margin: 2.8rem auto 0;
}
.newsimg img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  /* weicher, gleichmaessiger Schatten rundum, damit sich die weisse Card vom
     weissen Hintergrund abhebt */
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* Breaking-News-Pill innerhalb einer Section (grau) */
.breaking-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: #9b9b92;
  border-radius: 999px;
  padding: 0.7rem 1.8rem 0.7rem 1.25rem;
  margin-bottom: 1.9rem;
}
.breaking-pill__dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ff3b30;
}
.breaking-pill__dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff3b30;
  animation: breakingShock 1.6s ease-out infinite;
}
@keyframes breakingShock {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    opacity: 0;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .breaking-pill__dot::after {
    animation: none;
  }
}
.breaking-pill__text {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Algorithmus-Section: weniger Abstand oben (Pill statt straddelndem Memoji) */
#algorithmus {
  padding-top: 150px !important;
}
@media (max-width: 700px) {
  #algorithmus {
    padding-top: 95px !important;
  }
}

/* Gold-Lorbeer-Badge mit Text in der Mitte */
.laurel-badge {
  position: relative;
  max-width: 640px;
  margin: 2.8rem auto;
}
.laurel-badge--wide {
  max-width: 780px;
}
/* Querformat-Lorbeer (Aeste links/rechts, Text in der Mitte, wie KK) */
.laurel-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 860px;
  margin: 2.8rem auto;
}
.laurel-wide__branch {
  flex: 0 0 auto;
  height: clamp(160px, 27vw, 250px);
  width: auto;
}
.laurel-wide__branch--r {
  transform: scaleX(-1);
}
.laurel-wide__text {
  flex: 0 1 auto;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(2.3rem, 6.4vw, 4.6rem);
  padding: 0 0.3rem;
  background: linear-gradient(180deg, #f6dd8a 0%, #cb9a33 58%, #a87a26 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 600px) {
  .laurel-wide {
    gap: 0.15rem;
  }
  .laurel-wide__branch {
    height: 118px;
  }
}
.laurel-badge__wreath {
  width: 100%;
  height: auto;
  display: block;
}
.laurel-badge__text {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 3.7vw, 2.7rem);
  background: linear-gradient(180deg, #f6dd8a 0%, #cb9a33 58%, #a87a26 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* kleine Notiz unter einem CTA (zentriert, gedaempft) */
.sec-note {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: #6a6a62;
}
.memosec--dark .sec-note {
  color: rgba(255, 255, 255, 0.55);
}

/* Scarcity-Pill (orange, mit weissem Ring) */
.scarcity-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: #e8492e;
  border-radius: 999px;
  padding: 0.45rem 1.8rem 0.45rem 1.1rem;
  margin-bottom: 1.9rem;
  max-width: 100%;
}
.scarcity-pill__ring {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: scarcityPulse 1.5s ease-out infinite;
}
@keyframes scarcityPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  }
  70% {
    box-shadow: 0 0 0 0.7rem rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scarcity-pill__ring {
    animation: none;
  }
}
.scarcity-pill__text {
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#ganz-oben,
#angebot {
  padding-top: 150px !important;
}
@media (max-width: 700px) {
  #ganz-oben,
  #angebot {
    padding-top: 95px !important;
  }
  .scarcity-pill {
    gap: 0.6rem;
    padding: 0.5rem 1.2rem 0.5rem 0.6rem;
  }
  .scarcity-pill__text {
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }
  .scarcity-pill__ring {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
  }
}

/* Poop-Video-Emoji (transparentes Webm) — etwas kleiner als die Memoji-Koepfe */
.popvid {
  display: block;
  height: clamp(10rem, 20vw, 16rem);
  width: auto;
  margin: 0 auto 1.4rem;
}

/* ===== TL;DR / Kurzfassung (weisser Hintergrund) ===== */
.tldr {
  background: #f4f4ee;
  text-align: center;
  padding: var(--section-py) 0;
  z-index: 3; /* ueber der offer-Section (z2), damit die schraege Kante zeigt */
}
.tldr__headline {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: #111;
  margin: 0 0 1.7rem;
}
.tldr__text {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.55;
  color: #1a1a1a;
  max-width: 34ch;
  margin: 0 auto;
}
.tldr__text strong {
  font-weight: 700;
}
.dont-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.dont-ink {
  fill: none;
  stroke: #141414;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dont-head {
  fill: #fff;
}
.dont-tongue {
  fill: #e0322f;
  stroke: #141414;
  stroke-width: 2;
}
.dont-bubbles ellipse {
  fill: #fff;
  filter: url(#dontWobble);
}
.dont-bubbles text {
  fill: #141414;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 42px;
  text-anchor: middle;
}
.cta-banner__btn {
  display: block;
  width: 100%;
  background: #8cc63f;
  border-radius: 12px;
  padding: 1.55rem 2rem 1.35rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.13);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.cta-banner__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.18);
}
/* Blaue Variante des grossen CTA-Buttons (Free Report) — helleres Royalblau mit
   Verlauf + leichter Headline-Schatten fuer Tiefe */
.cta-banner__btn--blue {
  background: linear-gradient(90deg, #5872f0 0%, #3547d6 100%);
  padding: 1.55rem 2rem 1.35rem;
}
.cta-banner__btn--blue .cta-banner__title {
  text-shadow: 0 2px 0 rgba(18, 26, 82, 0.45);
}
.cta-banner__btn--blue .cta-banner__sub {
  color: #cdd4ff;
}
.cta-banner__title {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.3vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.cta-banner__sub {
  display: block;
  margin-top: 0.55rem;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: #38470f;
}
.cta-banner__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #555;
}
.cta-banner__stars {
  color: #f5a623;
  font-size: 1.15rem;
  letter-spacing: 2px;
  line-height: 1;
}

/* ============================================================
   MOBILE POLISH (2026-07-07) — Feinschliff fuer Smartphones
   Kernproblem: Basis-Typo mobil zu gross (Letter-Absaetze 29px,
   3 Woerter/Zeile), Hero-Deko-Stripes ragen in die Opt-in-Box,
   Trust-Badges unterm Formular gequetscht.
   Kompakte Typo, ruhiger Hero.
   ============================================================ */
@media (max-width: 480px) {
  /* Alles rem-basierte skaliert ~11% runter (18px -> 16px Basis) */
  html { font-size: 16px; }

  /* Letter: Lesegroesse statt Poster-Groesse */
  .letter__container p { font-size: 1.2rem; line-height: 1.65; }
  .letter__greeting { font-size: 1.3rem; }

  /* Garantie-Text + Methoden-Intro: gleiche Lesegroesse wie der Letter */
  .guarantee__body p { font-size: 1.2rem; line-height: 1.65; }
  .platform__sub { font-size: 1.2rem; line-height: 1.65; }
  .stats__sub { font-size: 1.2rem; line-height: 1.65; }
  /* /website: Flusstexte + Listen in Letter-Lesegroesse */
  .proof__close p,
  .magic-list li,
  .offer-steps li { font-size: 1.2rem; line-height: 1.65; }
  /* /sichtbarkeit: memosec-Copy + Handbuch-Block in Letter-Lesegroesse */
  .memosec__body p,
  .guide__desc,
  .guide__lead,
  .guide__more,
  .guide__list li { font-size: 1.2rem; line-height: 1.65; }

  /* Hero: Deko-Stripes kollidieren mit der Opt-in-Box */
  .hero__stripes-left,
  .hero__stripes-right { display: none; }

  /* Trust-Badges: untereinander statt gequetscht nebeneinander */
  .hero__trust {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
  }

  /* E-Mail-Placeholder nicht abschneiden */
  .hero__input::placeholder { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  /* Deko-Streifen am Letter->Offering-Uebergang ueberlagern mobil den
     Brieftext und schneiden die Sektions-Headline -> ausblenden */
  .offering-deco { display: none; }
}

/* Micro-Copy ueber dem Hero-Opt-in */
.hero__form-note {
  font-size: 0.95rem;
  color: var(--text-on-dark);
  text-align: center;
  margin-bottom: 0.6rem;
}
@media (max-width: 767px) {
  /* Hero-Deko-Stripes ragen bis 767px in die Opt-in-Box */
  .hero__stripes-left,
  .hero__stripes-right { display: none; }
}
@media (max-width: 480px) {
  /* Header entlasten: nur Burger statt "Menu"-Wort + Burger */
  .nav__menu-btn > span:first-child { display: none; }
  .hero__form-note { font-size: 0.9rem; }
}

/* Hero-Micro-Copy nur mobil; Desktop behaelt Emoji+Copy in der Pill */
.hero__form-note { display: none; }
@media (max-width: 767px) {
  .hero__form-note { display: block; }
  .hero__input-icon { display: none; }
}

/* Hero-Feinschliff mobil (Desktop unveraendert):
   3-zeilige Subline, einzeilige Micro-Copy, Deko-Viereck raus */
.br-mobile { display: none; }
@media (max-width: 767px) {
  .br-mobile { display: inline; }
  .hero__subline { font-size: 0.98rem; }
  .hero__form-note { font-size: 0.8rem; white-space: nowrap; }
  .hero__outline-box { display: none; }
}

/* Mobile-Feinschliff Runde 2 (Desktop unveraendert) */
@media (max-width: 767px) {
  .br-desktop { display: none; }
  /* Trust-Badges kleiner + enger */
  .hero__trust { font-size: 0.72rem; gap: 0.15rem; }
}

@media (max-width: 767px) {
  /* Badge-Kinder haben eigene font-sizes (0.95rem) -> mit verkleinern */
  .hero__trust .hero__disclaimer,
  .hero__trust .hero__arguments,
  .hero__trust > * { font-size: 0.78rem; }
}

/* Mobile: Header-CTA als Icon-Kreis (KK-Pattern), Menue-Woerter groesser */
.nav__cta-icon { display: none; }
@media (max-width: 767px) {
  .nav__cta-full, .nav__cta-short { display: none !important; }
  .nav__cta-icon { display: block; width: 17px; height: 17px; }
  .nav__cta { width: 40px; height: 40px; padding: 0; }
  .menu-overlay a { font-size: 2.6rem; }
}

/* Mobile-Feinschliff Runde 3 (Desktop unveraendert) */
.lbl-mobile { display: none; }
@media (max-width: 767px) {
  /* Buttons einzeilig; "Jetzt starten" -> "Starten" */
  .lbl-desktop { display: none; }
  .lbl-mobile { display: inline; }
  .offering__btn, .cases__cta { white-space: nowrap; }

  /* ALLE Deko-Streifen: Desktop-Offsets passen mobil nicht,
     Streifen laufen ueber Text/Buttons -> komplett ausblenden */
  .letter__stripes,
  .platform__stripes,
  .stats__stripes,
  .guarantee__stripes,
  .faq__stripes,
  .testimonials__stripes { display: none !important; }

  /* Mehr Luft zu den diagonalen Sektionskanten */
  .letter { padding-bottom: calc(var(--section-py) + 5rem); }
}

@media (max-width: 767px) {
  /* "Sichtbar werden"-CTAs: 38px-Font sprengte den Viewport (438px breit) */
  .cases__cta { font-size: 1.35rem !important; max-width: 100%; padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Mobile-Feinschliff Runde 4 (Desktop unveraendert) */
@media (max-width: 767px) {
  /* Peak Engine: Grafik nicht mehr in den Text ziehen + Luft zur Kante */
  .platform__mockup { margin-top: 1.5rem; }
  .platform { padding-bottom: calc(var(--section-py) + 6rem); }

  /* FAQ-Karten kompakter (waren 1.5rem/1.85rem Padding, 22px Font) */
  .faq__question { padding: 1rem 1.15rem; font-size: 1.05rem; }
  .faq__answer { padding: 0 1.15rem; }
  .faq__answer p { padding-bottom: 1rem; }

  /* Final-CTA: schwebende Logos wieder einblenden, einheitlich klein */
  .cta-logo { display: flex !important; width: 44px !important; height: 44px !important; }
  .cta-logo__emoji { font-size: 1.5rem; }
  /* bewusste mobile Umbrueche in Final-CTA-Headlines zulassen */
  .final-cta__headline br.br-mobile { display: inline; }
  /* Logos in die freien Randzonen: nie auf Headline oder Button */
  .cta-logo--3 { top: 3%; right: 4%; }
  .cta-logo--5 { bottom: 2%; left: 30%; }
  .cta-logo--6 { top: 3%; right: 17%; }
  .cta-logo--7 { bottom: 6%; right: 3%; }
  .cta-logo--8 { top: 4%; left: 18%; }
  /* slanted Final-CTA (ueber-uns, blog): obere Logos unter die Diagonale */
  .final-cta.slanted .cta-logo--8 { top: calc(12vw + 12px); left: 18%; }
  .final-cta.slanted .cta-logo--6 { top: calc(3.4vw + 30px); }

  /* Footer: Menuepunkte enger */
  .footer__col ul { gap: 0.2rem !important; }

  /* Disclaimer steht jetzt im Markup ganz unten (site-footer.js) */
  .footer__legal .footer__disclaimer { margin-top: 1rem !important; }
}

/* Mobile-Feinschliff Runde 5 (Desktop unveraendert) */
@media (max-width: 767px) {
  /* A) "Tu es"-Button buendig in der Pill (Desktop-Negativ-Margins neutralisieren) */
  .hero__submit { margin: 0; align-self: stretch; }

  /* B) Hero hoeher: H1 minimal nach unten, mehr Luft zur Subline */
  .hero__headline { margin-top: 2rem; }
  .hero__subline { margin-top: 1.4rem; }

  /* E2) Offering-Eyebrows einzeilig ("Wir machen dich sichtbar") */
  .offering__sublabel { white-space: nowrap; font-size: 0.72rem; letter-spacing: 0.16em; }

  /* Cases-Karten: iOS-Safari ignoriert aspect-ratio in Flex -> explizite Hoehe */
  .cases__card { flex: 0 0 300px; width: 300px; height: 396px; }

  /* D) Unser Angebot: noch mehr Luft zur Kante */
}

/* ============================================================
   Streifen mobil: exakt parallel zur Diagonalkante.
   Kanten-Steigung = Offset/Viewportbreite -> skewY(atan2()).
   transform-origin left: linke Kante bleibt auf top-Wert,
   rechte faellt um den Kanten-Offset -> parallel bei jeder Breite.
   ============================================================ */
@media (max-width: 767px) {
  @supports (transform: skewY(atan2(-1px, 100vw))) {
    /* Brief -> Angebot (Kante: Offering-clip 200px, -220px Overlap) */
    .offering-deco { display: block !important; }
    .offering-deco__stripe {
      left: 0; height: 14px; border-radius: 3px;
      transform-origin: left center;
      transform: skewY(atan2(-15.625vw, 100vw));
    }
    /* kurze Balken in den Ecken der Diagonale (Headline-Zone x~70-320 meiden) */
    .offering-deco__stripe--1 { top: -26px; width: 15vw; }
    .offering-deco__stripe--2 { top: calc(-2.2vw - 27px); width: 9vw; left: 17vw; }
    .offering-deco__stripe--3 { top: calc(-13.1vw - 27px); width: 16vw; left: 84vw; }
    .offering-deco__stripe--4 { display: none; }
  }
}

@media (max-width: 767px) {
  @supports (transform: skewY(atan2(-1px, 100vw))) {
    /* Kanten-Streifen der 200px-Sections: mobil steilerer Winkel, an der Kante */
    .guarantee__stripes,
    .faq__stripes,
    .testimonials__stripes,
    .platform__stripes {
      display: block !important;
      transform: skewY(atan2(-15.625vw, 100vw));
      transform-origin: left top;
    }
    .guarantee__stripes--left,
    .faq__stripes--left,
    .testimonials__stripes--left { left: 12px; top: -34px; }
    .guarantee__stripes--right,
    .faq__stripes--right,
    .testimonials__stripes--right { right: 16px; top: -66px; }
    .platform__stripes { left: 16px; top: -30px; }
  }
}

@media (max-width: 767px) {
  @supports (transform: skewY(atan2(-1px, 100vw))) {
    /* Balken-Stapel mobil kompakt: max 2 Balken, duenner, kurz an der Kante */
    .guarantee__stripes span, .testimonials__stripes span,
    .faq__stripes .bar, .faq__stripes .obar, .faq__stripes .bar2,
    .platform__stripes span {
      height: 12px !important;
      margin-top: 0 !important;
      margin-bottom: 8px !important;
      max-width: 140px;
    }
    .guarantee__stripes span:nth-child(n+3),
    .testimonials__stripes span:nth-child(n+3),
    .faq__stripes--left .bar2,
    .faq__stripes--right .bar:nth-child(n+3),
    .platform__stripes span:nth-child(n+3),
    .testimonials__stripes .t-box, .faq__stripes .obar { display: none !important; }
    .guarantee__stripes--left { left: 10px; top: calc(15.625vw - 85px); }
    .testimonials__stripes--left { left: 10px; top: calc(15.625vw - 85px); }
    .faq__stripes--left { left: 10px; top: calc(15.625vw - 75px); }
    .guarantee__stripes--right { right: 12px; top: -52px; }
    .faq__stripes--right, .testimonials__stripes--right { right: 12px; top: -52px; }
    .platform__stripes { left: 12px; top: calc(15.625vw - 84px); }
  }
}

/* ============================================================
   KK-Tracking konsolidiert (2026-07-08): alle Nutzer der
   Display-Font (Futura Pro XBold Cond) bekommen das enge
   Spacing gestaffelt nach Groesse.
   ============================================================ */
/* Grosse Headlines (bis 5rem+) -> -0.08em */
.letter__rant-headline, .dont__headline, .proof__headline,
.method__headline, .magic__headline, .gossip__headline,
.offer__headline, .geo__headline, .guide__headline,
.memosec__headline, .tcar__headline, .fsec__headline,
.tldr__headline, .laurel-wide__text {
  letter-spacing: -0.08em;
}
/* Mittlere Headlines / Sub-Heads / grosse Zahlen -> -0.06em */
.dont__subhead, .magic-subhead, .refcta__headline,
.country-modal__title, .proof-card__stat, .cta-banner__title,
.laurel-badge__text, .devices__brand, .cases__cta, .stats__number {
  letter-spacing: -0.06em;
}
/* Kleine Display-Elemente (Cards, Logos, Buttons) -> -0.04em */
.cases__name, .footer__logo, .geo__card h3, .compare__col h3,
.stack__block h3, .book__cover .book__title, .dash__brand,
.dash__num, .guide__btn, .offer-steps li::before {
  letter-spacing: -0.04em;
}

/* Mobile-Feinschliff Runde 6 (Desktop unveraendert) */
@media (max-width: 767px) {
  /* "Tu es" nahtlos in der Pill: Desktop-Negativmargins ans mobile Padding angepasst */
  .hero__submit { margin: -0.3rem -0.3rem -0.3rem 0; align-self: auto; border-radius: 0 var(--radius-pill) var(--radius-pill) 0 !important; }

  /* Hero: Content tiefer, weniger Leerraum unterm Formular */
  .hero--novideo { padding-top: 10rem; padding-bottom: calc(180px + 22vw); }

  /* "Unser Angebot" weiter von der Kante weg */
  /* Kanten mobil im Desktop-Winkel (200px/1280px = 15.625vw) — flacher,
     dadurch braucht kein Element mehr Kanten-Sonderabstaende */
  :root { --slant-h: 15.625vw; }
  .dont.slant-top { --slant-h: 19.5vw; } /* Desktop 250px/1280px */
  .offering {
    clip-path: polygon(0 15.625vw, 100% 0, 100% 100%, 0 100%);
    margin-top: calc(-15.625vw - 20px);
    padding-top: calc(15.625vw + var(--section-py) + 4rem);
  }
  .ticker-section { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15.625vw), 0 100%); padding-bottom: 12rem; }

  /* Gruene Deko-Vierecke im Brief (bei *Engelschoere singen*) ausblenden */
  .letter__outline-box,
  .offering-deco__box { display: none !important; }

  /* Mehr Luft zwischen Sublabel (WIR BAUEN DEINE / WIR MACHEN DICH SICHTBAR)
     und Headline (WEBSITE / SEO/GEO): Desktop nutzt -1.25rem Negativ-Margin */
  .offering__sublabel { margin-bottom: 0.3rem; }
}

@media (max-width: 767px) {
  @supports (transform: skewY(atan2(-1px, 100vw))) {
    /* Speed-Streaks am Angebot->Stats-Uebergang: Desktop-Winkel (-9deg)
       passt mobil nicht zur 200px-Kante -> Container-Skew exakt parallel */
    .stats__streak-right {
      top: 9px;
      width: 320px;
      transform: skewY(atan2(-15.625vw, 100vw));
      transform-origin: left top;
      overflow: visible;
    }
    .stats__streak-right span { transform: none; height: 10px; }
  }
}

/* Hero: Transparenz-Hinweis unterm Opt-in.
   flex-basis 100% -> eigene zentrierte Zeile UNTER Disclaimer + Haken-Argument */
.hero__privacy-note {
  /* min-width statt max-width: max-width wuerde die Flex-Groesse deckeln
     und die Note passt dann doch neben Disclaimer + Haken (kein Umbruch) */
  min-width: 100%;
  text-align: center;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.hero__privacy-note a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: underline;
}

/* Mobile-Feinschliff /website (Desktop unveraendert) */
@media (max-width: 767px) {
  /* CTA-Banner-Buttons kompakter, Subzeile einzeilig */
  .cta-banner__btn, .cta-banner__btn--blue { padding: 1rem 1rem 0.85rem; }
  .cta-banner__sub { font-size: clamp(0.62rem, 2.6vw, 1rem); white-space: nowrap; margin-top: 0.4rem; }

  /* Rant-Emojis groesser */
  .letter__emoji img { height: clamp(9rem, 30vw, 12rem); }

  /* Minenfeld-Grafik mehr Luft */
  .dont__graphic { margin: 2.6rem auto 2rem; }

  /* Aufzaehlungen kompakter (Haken + Nummern) */
  .magic-list li { padding-left: 2.1rem; }
  .magic-list li::before { width: 1.35rem; height: 1.35rem; top: 0.16em; }
  .offer-steps li { padding-left: 3.6rem; }
  .offer-steps li::before { font-size: 3rem; top: 0; }

  /* Angebots-Eyebrow zentriert */
  .offer__eyebrow { text-align: center; justify-content: center; }

  /* CTA-Buttons/Text naeher an die Section-Kante */
  .dont { padding-bottom: calc(var(--section-py) + 1rem); }
  .proof { padding-bottom: calc(var(--section-py) + 1rem); }
  .rant { padding-bottom: 5rem; }
  .magic { padding-bottom: calc(var(--section-py) + 1rem); }

  /* Zwischen-Headline "Verkaeufer, der nie schlaeft" groesser */
  .magic-subhead { font-size: 1.9rem; }

  /* /sichtbarkeit: CTA naeher an die Folge-Kante */
  .memosec { padding-bottom: calc(var(--section-py) + 1rem); }

  /* /sichtbarkeit: Memojis + Poop-Video groesser */
  .memosec__emoji { height: clamp(15rem, 60vw, 17rem); }
  .popvid { height: clamp(12rem, 48vw, 14rem); }

  /* /sichtbarkeit: Luft fuer Umlaut-Punkte in den Section-Headlines */
  .memosec__headline { line-height: 1.06; }

  /* /sichtbarkeit: graue Breaking-Pill kompakt */
  .breaking-pill { gap: 0.45rem; padding: 0.35rem 0.9rem 0.35rem 0.65rem; margin-bottom: 1.4rem; }
  .breaking-pill__dot { width: 9px; height: 9px; }
  .breaking-pill__text { font-size: 0.7rem; }

  /* Blauer Handbuch-Button: Headline einzeilig, Subzeile passt komplett */
  .cta-banner__btn--blue { padding: 1rem 0.6rem 0.85rem; }
  .cta-banner__btn--blue .cta-banner__title { white-space: nowrap; font-size: clamp(1.05rem, 5vw, 1.6rem); }
  .cta-banner__btn--blue .cta-banner__sub { font-size: clamp(0.58rem, 2.4vw, 1rem); }
}