/* =========================================================================
   CLOUTCOLLECTIVE v2 — style.css
   Reihenfolge: Reset · Tokens · Typografie · Layout-Primitives ·
                Komponenten · Sektionen · Utilities · Media Queries
   Regeln: nur min-width Queries · alle Farbwerte nur in :root ·
           max. zwei Selektor-Ebenen · kein !important
   ========================================================================= */


/* =========================================================================
   1 — RESET
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

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

button { cursor: pointer; }

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

table { border-collapse: collapse; }

:where(a, button, input, select, textarea, [role="radio"], [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================================
   2 — TOKENS
   ========================================================================= */

:root {
  /* Flächen */
  --bg:            #0A0A0A;
  --surface:       #0F0F0F;
  --surface-nav:   #111111;
  --wine:          #0A0005;

  /* Akzent */
  --accent:        #FF2D78;
  --accent-dark:   #990D38;

  /* Text */
  --text:          #F5F0E8;
  --text-2:        #8A8A8A;
  --text-3:        #7A7A7A;
  --text-4:        #3A3A3A;

  /* Struktur */
  --divider:       #1F1F1F;
  --border-card:   #2A2A2A;

  /* Abgeleitete Transparenzen (kein Hex außerhalb dieses Blocks) */
  --nav-bg:        rgba(17, 17, 17, 0.72);
  --accent-line:   rgba(255, 45, 120, 0.30);
  --accent-glow:   rgba(255, 45, 120, 0.12);
  --accent-grid:   rgba(255, 45, 120, 0.025);
  --accent-soft:   rgba(255, 45, 120, 0.08);
  --overlay:       rgba(10, 10, 10, 0.94);
  --ink-30:        rgba(0, 0, 0, 0.30);
  --ink-45:        rgba(0, 0, 0, 0.45);
  --pure-black:    #000000;
  --ok:            #3FBF6F;

  /* Radien */
  --r-card:        12px;
  --r-btn:         6px;
  --r-tag:         8px;

  /* Motion */
  --e-out:         cubic-bezier(.16, 1, .3, 1);
  --t-fast:        180ms;
  --t-base:        320ms;
  --t-slow:        640ms;

  /* Abstände, 4-px-Skala */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   28px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-14:  56px;
  --s-16:  64px;
  --s-20:  96px;
  --s-24:  192px;

  /* Layout */
  --container: 1240px;
  --gutter:    clamp(20px, 5vw, 64px);
  --sec-y:     clamp(64px, 12vw, 192px);
  --nav-h:     64px;

  /* Typo */
  --f-display: 'Inter', system-ui, -apple-system, sans-serif;
}


/* =========================================================================
   3 — TYPOGRAFIE
   ========================================================================= */

/* Inter lokal. Kein Aufruf an fonts.googleapis.com (LG München, 3 O 17493/20). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/inter-800.woff2') format('woff2');
}

body {
  font-family: var(--f-display);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-2);
  background: var(--bg);
  overflow-x: hidden;
}

.h-hero {
  font-size: clamp(44px, 8.5vw, 104px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.94;
  color: var(--text);
}

.h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text);
}

.h3 {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
}

.eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-3);
}

.sub {
  max-width: 56ch;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--text-2);
}

.data {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.accent { color: var(--accent); }
.muted  { color: var(--text-3); }


/* =========================================================================
   4 — LAYOUT-PRIMITIVES
   ========================================================================= */

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

.section {
  position: relative;
  padding-block: var(--sec-y);
}

.section--tight { padding-block: calc(var(--sec-y) * 0.55); }
.section--flush { padding-block: 0; }

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-12);
}

.stack {
  display: flex;
  flex-direction: column;
}

.divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--divider) 20%, var(--divider) 80%, transparent);
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: 0;
  z-index: 10000;
  padding: var(--s-3) var(--s-5);
  font-size: 14px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-btn);
  transform: translateY(-150%);
  transition: transform var(--t-fast) var(--e-out);
}

.skip:focus-visible {
  transform: translateY(var(--s-2));
  outline: 2px solid var(--text);
  outline-offset: 2px;
}


/* =========================================================================
   5 — KOMPONENTEN
   ========================================================================= */

/* 5.1 Grain-Overlay -------------------------------------------------------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url('../assets/noise.svg');
  background-size: 180px 180px;
}

.no-grain .grain,
.grain--off { display: none; }

/* 5.2 Logo ---------------------------------------------------------------- */
.logo {
  display: inline-block;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  white-space: nowrap;
}

.logo b {
  font-weight: 800;
  color: var(--accent);
}

/* 5.3 Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-7);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: var(--r-btn);
  transition: background var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out);
}

.btn--primary {
  color: var(--bg);
  background: var(--accent);
}

.btn--primary:hover {
  color: var(--text);
  background: var(--accent-dark);
  transform: translateY(-1px);
}

.btn--outline {
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border-card);
}

.btn--outline:hover {
  color: var(--text);
  border-color: var(--text-3);
}

.btn--inverse {
  color: var(--accent);
  background: var(--bg);
}

.btn--inverse:hover { background: var(--pure-black); }

.btn--ghost {
  min-height: 44px;
  padding: 0;
  color: var(--text-2);
  background: none;
}

.btn--ghost:hover { color: var(--text); }

.btn--block { width: 100%; }

.btn:active { transform: translateY(1px); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--t-fast) var(--e-out);
}

.btn:hover .btn__arrow { transform: translateX(4px); }

:where(a, button, input, select, textarea, [role="radio"], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* 5.4 Badge / Tag --------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-tag);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s var(--e-out) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

.tag {
  display: inline-block;
  padding: var(--s-1) var(--s-2);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border-card);
  border-radius: 4px;
}

/* 5.5 Avatar-Stack -------------------------------------------------------- */
.avatars {
  display: flex;
  align-items: center;
}

.avatars li {
  width: 32px;
  height: 32px;
  margin-left: -10px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-3);
  background: var(--surface);
  border: 2px solid var(--bg);
  border-radius: 50%;
}

.avatars li:first-child { margin-left: 0; }

.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--text-3);
}

/* 5.6 Scroll-Reveal ------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--e-out),
              transform var(--t-slow) var(--e-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* 5.7 Kinetic Statement (Signature) --------------------------------------- */
.kinetic {
  font-size: clamp(32px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--text-4);
  text-wrap: balance;
}

.kinetic .w {
  color: var(--text-4);
  transition: color var(--t-base) var(--e-out);
}

.kinetic .w.on { color: var(--text); }
.kinetic .w.hl.on { color: var(--accent); }

/* 5.8 Marquee ------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.marquee__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-8);
  min-height: 56px;
  padding-right: var(--s-8);
  white-space: nowrap;
  animation: marquee 44s linear infinite;
}

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

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

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 14px;
  color: var(--text-2);
}

.marquee__item b {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.marquee__sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* 5.9 Logo-Marquee (startet leer und versteckt) --------------------------- */
.logos__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--s-16);
  min-height: 88px;
  padding-right: var(--s-16);
  animation: marquee 38s linear infinite;
}

.logos__track img {
  height: 26px;
  width: auto;
  opacity: 0.75;
  transition: opacity var(--t-fast) var(--e-out);
}

.logos__track img:hover { opacity: 1; }

/* 5.10 UI-Mockups (LinkedIn-Karten, auch im Hero) ------------------------- */
.mockup {
  position: relative;
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.mockup__flag {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: 2px var(--s-1);
  font-size: 9px;
  line-height: 1.4;
  color: var(--text-3);
  border: 1px solid var(--border-card);
  border-radius: 4px;
}

.mockup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  padding-right: var(--s-12);
}

.mockup__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.mockup__meta {
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.mockup__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.mockup__stat {
  padding: var(--s-2);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--r-tag);
}

.mockup__stat span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.mockup__stat b {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bar {
  height: 4px;
  margin-top: var(--s-2);
  overflow: hidden;
  background: var(--divider);
  border-radius: 999px;
}

.bar i {
  display: block;
  height: 100%;
  width: var(--v, 50%);
  background: var(--accent);
  border-radius: 999px;
}

.barlabel {
  display: flex;
  justify-content: space-between;
  margin-top: var(--s-3);
  font-size: 11px;
  color: var(--text-3);
}

.pill {
  padding: var(--s-1) var(--s-3);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: 999px;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.chat {
  padding: var(--s-3);
  margin-bottom: var(--s-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--r-tag);
}

.chat b { color: var(--text); font-weight: 600; }

.live {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

.delta {
  padding: 2px var(--s-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}


/* =========================================================================
   6 — SEKTIONEN
   ========================================================================= */

/* 6.1 Nav ---------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--surface-nav);
  border-bottom: 1px solid var(--divider);
  padding-top: env(safe-area-inset-top);
  transition: transform var(--t-base) var(--e-out);
}

@supports (backdrop-filter: blur(18px)) {
  .nav {
    background: var(--nav-bg);
    backdrop-filter: blur(18px);
  }
}

.nav--hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: var(--nav-h);
}

.nav__links,
.nav__actions { display: none; }

.nav__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: color var(--t-fast) var(--e-out);
}

.nav__link:hover { color: var(--text); }

.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--text);
}

.burger i {
  position: relative;
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}

.burger i::before,
.burger i::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-fast) var(--e-out);
}

.burger i::before { top: -6px; }
.burger i::after  { top: 6px; }

.burger[aria-expanded="true"] i { background: transparent; }
.burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

/* 6.2 Mobile-Overlay-Menü ------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: calc(var(--nav-h) + env(safe-area-inset-top) + var(--s-8)) var(--gutter)
           calc(var(--s-10) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out),
              visibility var(--t-base) linear;
}

.menu.open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__links {
  display: flex;
  flex-direction: column;
}

.menu__links a {
  padding-block: var(--s-4);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  border-bottom: 1px solid var(--divider);
}

.menu__links a:hover { color: var(--accent); }

.menu__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.menu__social {
  display: flex;
  gap: var(--s-5);
  font-size: 13px;
  color: var(--text-3);
}

/* 6.3 Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 12vw, 128px) clamp(56px, 10vw, 120px);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--accent-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-grid) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(180deg, var(--pure-black), transparent 78%);
  mask-image: linear-gradient(180deg, var(--pure-black), transparent 78%);
}

.hero__glow {
  position: absolute;
  z-index: 0;
  width: 60vw;
  height: 60vw;
  max-width: 620px;
  max-height: 620px;
  pointer-events: none;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  filter: blur(70px);
}

.hero__glow--a { left: -22vw; bottom: -18vw; }
.hero__glow--b { right: -24vw; top: -22vw; }

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
}

.hero__title { text-wrap: balance; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  width: 100%;
}

.hero__actions .btn { flex: 1 1 auto; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-10px) rotate(-0.2deg); }
}

/* 6.4 Problem (Kinetic) --------------------------------------------------- */
.problem { overflow: hidden; }

.problem__mark {
  position: absolute;
  right: calc(var(--gutter) * -0.5);
  top: 50%;
  z-index: 0;
  font-size: clamp(280px, 46vw, 620px);
  font-weight: 800;
  line-height: 0.7;
  color: var(--text-4);
  opacity: 0.4;
  pointer-events: none;
  transform: translateY(-50%);
  user-select: none;
}

.problem__inner {
  position: relative;
  z-index: 1;
}

.problem__end {
  margin-top: var(--s-8);
  font-size: 14px;
  color: var(--text-3);
}

/* 6.5 Footer ------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--divider);
  padding-block: clamp(56px, 9vw, 112px) 0;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom));
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.footer__col--news { order: -1; }

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer__list a {
  min-height: 24px;
  font-size: 14px;
  color: var(--text-2);
  transition: color var(--t-fast) var(--e-out);
}

.footer__list a:hover { color: var(--text); }

.news__field {
  display: flex;
  gap: var(--s-2);
}

.news__field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding-inline: var(--s-4);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-btn);
}

.news__field input::placeholder { color: var(--text-3); }

.news__field button {
  display: grid;
  place-items: center;
  width: 48px;
  min-height: 48px;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-btn);
}

.news__field input:disabled,
.news__field button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.check {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

.check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.check a {
  color: var(--text-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--divider);
  font-size: 12px;
  color: var(--text-3);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-2);
}

.footer__legal a:hover { color: var(--text); }

.footer__social {
  display: flex;
  gap: var(--s-2);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text-3);
  border: 1px solid var(--divider);
  border-radius: var(--r-tag);
  transition: color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}

.footer__social a:hover {
  color: var(--accent);
  border-color: var(--border-card);
}


/* =========================================================================
   7 — UTILITIES
   ========================================================================= */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lock {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

[hidden] { display: none; }

.media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.media-frame video,
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================================
   8 — MEDIA QUERIES (ausschließlich min-width)
   ========================================================================= */

@media (min-width: 640px) {
  .marquee__track { min-height: 72px; animation-duration: 32s; }
  .marquee__item  { font-size: 15px; }

      .hero__actions .btn { flex: 0 0 auto; }

  .footer__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-12) var(--s-8);
  }

  .footer__col--news { order: 0; }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; }

  .burger { display: none; }

  .nav__links {
    display: flex;
    gap: var(--s-8);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--s-6);
  }

  .nav__actions .btn { min-height: 44px; }

  .menu { display: none; }

  .hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--s-16);
  }

      .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
}

@media (min-width: 1200px) {
  .hero { padding-block: clamp(96px, 9vw, 140px) clamp(88px, 8vw, 128px); }
}

@media (min-width: 1440px) {
  .hero__inner { gap: var(--s-24); }
}


/* =========================================================================
   9 — REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
  }

  .marquee__track,
  .logos__track,
    .reveal { opacity: 1; transform: none; }
  .kinetic .w { color: var(--text); }
  .kinetic .w.hl { color: var(--accent); }
  .dot { animation: none; }
}


/* =========================================================================
   10 — SEKTIONEN, TEIL 2 (S5 bis S16)
   ========================================================================= */

/* 10.1 S5 Leistungen — Sticky-Stacking Cards ------------------------------ */
.svc__stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.svc__card {
  position: static;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.svc__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.svc__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ticks li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: 14px;
  color: var(--text-2);
}

.ticks li::before {
  content: '✓';
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--accent);
}

.kpi {
  padding-top: var(--s-5);
  border-top: 1px solid var(--divider);
}

.kpi b {
  display: block;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.kpi span {
  display: block;
  margin-top: var(--s-2);
  font-size: 12px;
  color: var(--text-3);
}

/* Post-Planner-Raster */
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-1);
}

.cal span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.cal .on {
  color: var(--text);
  border-color: var(--accent-line);
}

.cal .on::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  margin-top: 14px;
  border-radius: 50%;
  background: var(--accent);
}

.cal span { position: relative; }

.tabs {
  display: flex;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

/* 10.2 S6 Vergleich ------------------------------------------------------- */
.cmp {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.cmp__col {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.cmp__col--us {
  border-color: var(--accent-line);
  background-image: linear-gradient(160deg, var(--accent-soft), transparent 55%);
}

.cmp__title {
  margin-bottom: var(--s-4);
  font-size: 13px
;  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cmp__col--us .cmp__title { color: var(--accent); }

.cmp__row {
  display: flex;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-top: 1px solid var(--divider);
}

.cmp__row:first-of-type { border-top: 0; }

.cmp__icon {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-3);
}

.cmp__col--us .cmp__icon { color: var(--accent); }

.cmp__key {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
}

.cmp__val { font-size: 14px; color: var(--text-3); }
.cmp__col--us .cmp__val { color: var(--text); }

.cmp__head { display: none; }

/* 10.3 S7 Methode --------------------------------------------------------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--s-14);
  margin-top: var(--s-14);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.step__meta {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}

.step__time {
  font-size: 12px;
  color: var(--text-3);
}

/* 10.4 S8 Case-Karten ----------------------------------------------------- */
.case {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.case__text { font-size: 14px; }

.case__impact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider);
}

.case__impact b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.case__impact span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}

.case__shot {
  border: 1px solid var(--divider);
  border-radius: var(--r-tag);
}

/* 10.5 Lightbox (Screenshot im Handy der Belege-Sektion) ------------------ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--overlay);
  overscroll-behavior: contain;
}

.lb img {
  max-width: 92vw;
  max-height: 78dvh;
  border-radius: var(--r-card);
}

.lb__cap {
  max-width: 60ch;
  font-size: 13px;
  text-align: center;
  color: var(--text-2);
}

.lb__close {
  position: absolute;
  top: calc(var(--s-4) + env(safe-area-inset-top));
  right: var(--s-4);
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--text);
}

/* 10.6 S9 Nutzen-Grid ----------------------------------------------------- */
.bgrid {
  display: grid;
  gap: 2px;
  background: var(--border-card);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.bgrid__cell {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--bg);
  transition: background var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}

.bgrid__cell:hover {
  background: var(--surface);
  transform: translateY(-2px);
}

.bgrid__cell svg {
  width: 24px;
  height: 24px;
  stroke: var(--text-3);
  fill: none;
  stroke-width: 1.5;
  transition: stroke var(--t-fast) var(--e-out);
}

.bgrid__cell:hover svg { stroke: var(--accent); }

/* 10.7 S10 Warum wir / Team ---------------------------------------------- */
.why { background: var(--wine); }

.why__lead {
  max-width: 720px;
  margin-inline: auto;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  text-align: center;
}

.pillars {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-12);
}

.pillars li {
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
}

.pillars b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.team {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-14);
}

.team__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.team__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--surface);
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-base) var(--e-out);
}

.team__card:hover .team__photo img { transform: scale(1.02); }

.team__photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, var(--surface));
  pointer-events: none;
}

.team__initials {
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-4);
}

.team__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 0 var(--s-5) var(--s-6);
}

.team__role {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--accent);
}

/* 10.8 S11 Zahlen -------------------------------------------------------- */
.nums {
  display: grid;
  gap: var(--s-10);
}

.nums__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-8) var(--s-5);
}

.nums__val {
  display: block;
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.nums__val i {
  font-style: normal;
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

.nums__lab {
  display: block;
  margin-top: var(--s-3);
  font-size: 12px;
  color: var(--text-3);
}

/* 10.9 S12 Pakete -------------------------------------------------------- */
.seg {
  display: inline-flex;
  gap: var(--s-1);
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: 999px;
}

.seg button {
  min-height: 44px;
  padding: 0 var(--s-5);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  border-radius: 999px;
  transition: color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}

.seg button[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
}

.plans {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-10);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.plan--hl {
  order: -1;
  border-color: var(--accent-line);
  box-shadow: 0 0 60px var(--accent-soft);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.plan__price span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-3);
}

.plan .btn { margin-top: auto; }

.plans[data-mode="einmalig"] .plan[data-billing="monatlich"] { display: none; }
.plans[data-mode="monatlich"] .plan[data-billing="einmalig"] { display: none; }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-top: var(--s-10);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field label {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

.field input,
.field select,
.field textarea {
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  font-size: 16px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: var(--r-btn);
}

.field textarea { min-height: 110px; resize: vertical; }

.field__err {
  font-size: 12px;
  color: var(--accent);
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 10.10 S13 Testimonials ------------------------------------------------- */
.quotes {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-10);
}

.quote {
  position: relative;
  overflow: hidden;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.quote::before {
  content: '”';
  position: absolute;
  top: -18px;
  right: var(--s-4);
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: 0.3;
  pointer-events: none;
}

.quote p {
  position: relative;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

.quote cite {
  display: block;
  margin-top: var(--s-5);
  font-size: 13px;
  font-style: normal;
  color: var(--text);
}

.quote cite span {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}

/* 10.11 S14 FAQ ---------------------------------------------------------- */
.faq {
  max-width: 760px;
  margin-inline: auto;
}

.faq__item { border-bottom: 1px solid var(--divider); }

.faq__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  min-height: 64px;
  padding-block: var(--s-4);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  color: var(--text);
}

.faq__sign {
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 400;
  color: var(--accent);
}

.faq__btn[aria-expanded="true"] .faq__sign::before { content: '−'; }
.faq__btn[aria-expanded="false"] .faq__sign::before { content: '+'; }

.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--e-out);
}

.faq__panel p { padding-bottom: var(--s-5); }

/* 10.12 S14B Insights ---------------------------------------------------- */
.posts {
  display: grid;
  gap: var(--s-5);
}

.post {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.post__meta {
  display: flex;
  gap: var(--s-3);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* 10.13 S15 Diagnose-Teaser ---------------------------------------------- */
.diag {
  display: grid;
  gap: var(--s-10);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-card);
}

.dims li {
  display: flex;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-size: 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--divider);
}

.dims b {
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* 10.14 S16 CTA Final ---------------------------------------------------- */
.final {
  position: relative;
  z-index: 401;
  background: var(--accent);
}

.final__title {
  font-size: clamp(34px, 5.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bg);
}

.final__title span { color: var(--ink-30); }

.final__text {
  max-width: 46ch;
  margin-top: var(--s-6);
  color: var(--ink-45);
}

.final__note {
  margin-top: var(--s-5);
  font-size: 12px;
  color: var(--ink-45);
}


/* =========================================================================
   11 — MEDIA QUERIES, TEIL 2
   ========================================================================= */

@media (min-width: 640px) {
  .bgrid { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .svc__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-10);
  }

  .cmp {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 0 var(--s-4);
  }

  .cmp__head { display: block; }
  .cmp__key { display: none; }

  .cmp__col {
    display: flex;
    flex-direction: column;
    padding: var(--s-6) var(--s-5);
  }

  .cmp__col--keys {
    background: transparent;
    border: 0;
    padding-inline: 0;
  }

  .cmp__row { min-height: 72px; align-items: center; }

  .step { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-12); }
  .step--flip .step__copy { order: 2; }

  .bgrid { grid-template-columns: repeat(3, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .nums { grid-template-columns: 1fr 1fr; gap: var(--s-16); align-items: start; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: repeat(3, 1fr); }
  .diag { grid-template-columns: 1.1fr 1fr; gap: var(--s-16); padding: var(--s-12); }
  .plan--hl { order: 0; }
}

@media (min-width: 1200px) {
}


/* =========================================================================
   12 — TIEFE UND OPTIK NACH VORLAGE
   Übernommen aus ugency-wbs.framer.website: kondensierte Versal-Headlines,
   Pill-Highlight hinter dem Akzentwort, schwebende Pill-Nav, Tab-Karten,
   gekippte Karten mit Schatten, Chips über den Flächen, große Radien.
   Palette bleibt CloutCollective. Dieser Block steht am Ende und
   überschreibt bewusst frühere Regeln, ohne !important.
   ========================================================================= */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-400.woff2') format('woff2');
}

:root {
  --f-head:    'Anton', 'Inter', system-ui, sans-serif;
  --r-xl:      28px;
  --r-tab:     14px;
  --r-pill:    999px;
  --shadow-1:  0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-2:  0 34px 80px rgba(0, 0, 0, 0.65);
  --shadow-hl: 0 34px 80px rgba(255, 45, 120, 0.18);
}

/* 12.1 Display-Typografie ------------------------------------------------- */
.h-hero,
.h2,
.kinetic,
.final__title {
  font-family: var(--f-head);
  font-weight: 400;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}

.h-hero {
  font-size: clamp(44px, 9.5vw, 118px);
  letter-spacing: -0.01em;
  line-height: 0.98;
}

.h2 {
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.005em;
  line-height: 1.0;
}

.kinetic {
  font-size: clamp(30px, 5.6vw, 76px);
  letter-spacing: -0.005em;
  line-height: 1.06;
}

.final__title {
  font-size: clamp(34px, 5.8vw, 76px);
  letter-spacing: -0.005em;
  line-height: 0.98;
}

/* Pill-Highlight hinter dem Akzentteil, wie im Original */
/* Kein Pill mehr, auch nicht in den Headlines. Hervorhebung ausschliesslich
   ueber die Schriftfarbe, damit die Zeilen sauber sitzen. */
.h-hero .accent,
.h2 .accent {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--accent);
}

/* Kinetic ohne Pill: die Hervorhebung passiert allein ueber die Schriftfarbe.
   Kein Hintergrund, kein Padding, damit nichts in die Nachbarzeile ragt. */
.kinetic .w.hl {
  padding: 0;
  background: none;
  border-radius: 0;
}

.kinetic .w.hl.on { color: var(--accent); }

/* 12.2 Eyebrow als Pill -------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
}

/* 12.3 Buttons als Pill mit Kreis-Pfeil ---------------------------------- */
.btn { border-radius: var(--r-pill); padding: 0 var(--s-5) 0 var(--s-3); }
.btn--ghost { padding: 0; }

.btn__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 13px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--accent);
  transition: transform var(--t-fast) var(--e-out);
}

.btn--outline .btn__ico { background: var(--surface); color: var(--text); }
.btn--inverse .btn__ico { background: var(--accent); color: var(--bg); }
.btn:hover .btn__ico { transform: translateX(3px); }

/* 12.4 Schwebende Pill-Nav ----------------------------------------------- */
.nav {
  position: fixed;
  inset: calc(env(safe-area-inset-top) + var(--s-3)) 0 auto 0;
  background: transparent;
  border-bottom: 0;
  padding-top: 0;
}

.nav__inner {
  gap: var(--s-3);
  min-height: 56px;
}

.logo {
  padding: var(--s-3) var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.nav__links {
  padding: var(--s-2) var(--s-5);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.burger {
  margin-right: 0;
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.nav__actions .btn { box-shadow: var(--shadow-1); }

body { padding-top: 0; }
main { padding-top: calc(56px + var(--s-6)); }

/* 12.5 Chips über Flächen ------------------------------------------------ */
.chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: var(--text);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  font-variant-numeric: tabular-nums;
  transform: rotate(-6deg);
}

.chip--accent { color: var(--text); background: var(--accent); }
.chip--a { top: -14px; left: -10px; }
.chip--b { right: -12px; bottom: 18%; transform: rotate(5deg); }
.chip--c { left: -16px; bottom: -12px; transform: rotate(4deg); }

/* 12.6 Gekippte Karten, Tiefe ------------------------------------------- */
.mockup {
  padding: var(--s-5);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

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


/* 12.7 Tab-Karten (S/1-Reiter wie im Original) --------------------------- */
.svc__card {
  position: relative;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.svc__card .svc__num {
  position: absolute;
  top: 0;
  left: var(--s-6);
  z-index: 2;
  padding: var(--s-2) var(--s-5);
  font-family: var(--f-head);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  transform: translateY(-55%);
}

.svc__card--hl { box-shadow: var(--shadow-hl); }

.step__meta .svc__num {
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-pill);
}

.step .mockup { transform: rotate(-2deg); }
.step--flip .mockup { transform: rotate(2deg); }

/* 12.8 Vergleich als eingesetzter Block mit schwebender Spalte ----------- */
.cmp {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.cmp__col {
  background: transparent;
  border: 0;
  border-radius: var(--r-xl);
}

.cmp__col--us {
  color: var(--bg);
  background: var(--text);
  background-image: none;
  border: 0;
  box-shadow: var(--shadow-2);
}

.cmp__col--us .cmp__title { color: var(--accent-dark); }
.cmp__col--us .cmp__val   { color: var(--bg); }
.cmp__col--us .cmp__icon  { color: var(--accent-dark); }
.cmp__col--us .cmp__key   { color: var(--text-4); }
.cmp__col--us .cmp__row   { border-color: rgba(0, 0, 0, 0.12); }

/* 12.9 Cases, Proof, Grid, Pakete, Zitate ------------------------------- */
.case,
.plan,
.quote,
.team__card,
.diag,
.form,
.bgrid,
.post {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.case:nth-child(odd)  { transform: rotate(-1deg); }
.case:nth-child(even) { transform: rotate(1deg); }
.plan--hl { box-shadow: var(--shadow-hl); }

/* 12.10 Final-CTA als eingesetzter Block -------------------------------- */
.final {
  margin-inline: var(--gutter);
  border-radius: var(--r-xl);
}

.final .wrap { padding-inline: clamp(20px, 4vw, 48px); }

/* 12.11 Warum-wir-Block ------------------------------------------------- */
.why {
  margin-inline: var(--gutter);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.pillars li { border-left-width: 3px; }

/* 12.12 Tiefe erst ab 900 px voll ausspielen ---------------------------- */
@media (min-width: 900px) {
  .nav__inner { min-height: 64px; }
  main { padding-top: calc(64px + var(--s-8)); }

  .cmp { padding: var(--s-10) var(--s-8); }
  .cmp__col--us { margin-block: calc(var(--s-6) * -1); padding: var(--s-8) var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .step .mockup,
  .step--flip .mockup,
  .case:nth-child(odd),
  .case:nth-child(even),
  .chip { transform: none; }
}


/* =========================================================================
   13 — KACHEL-KONSTRUKTION NACH VORLAGE
   Aufbau aus dem Original: eine große Kachel mit Reiter, darin einzelne
   angehobene Unter-Kacheln mit Icon-Kreis links, Titel und Status.
   Kachel-in-Kachel erzeugt die Tiefe, nicht die Farbe.
   Palette unverändert: --surface für die Trägerkachel, --surface-nav für
   die Unter-Kacheln, --accent nur für Reiter und Icons.
   ========================================================================= */

/* 13.1 Unter-Kacheln ----------------------------------------------------- */

.mockup__stat {
  padding: var(--s-3);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

.chat {
  border-radius: var(--r-tab);
  background: var(--surface-nav);
  box-shadow: var(--shadow-1);
}

.cal span {
  background: var(--surface-nav);
  box-shadow: var(--shadow-1);
}

/* 13.2 Icon-Kreis in der Unter-Kachel ------------------------------------ */
.ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
}

.ico--ok {
  color: var(--bg);
  background: var(--ok);
}

.ico--run {
  color: var(--bg);
  background: var(--accent);
}

.ico--next {
  color: var(--text-3);
  background: var(--surface);
  border: 1px solid var(--border-card);
}

/* 13.3 Kachelstapel mit Versatz und Überlappung -------------------------- */
.steps { gap: var(--s-10); }

.step .mockup { z-index: 1; }

.case__impact {
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-top: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

.case__impact > div {
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border-radius: 10px;
}

/* Nutzen-Kacheln: aus dem Rasterblock werden einzelne angehobene Kacheln */
.bgrid {
  gap: var(--s-4);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.bgrid__cell {
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.bgrid__cell:hover {
  background: var(--surface-nav);
  box-shadow: var(--shadow-2);
}

/* Zahlen-Kacheln */
.nums__grid { gap: var(--s-4); }

.nums__grid > div {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

/* Checklisten-Kachel neben den Zahlen */
.nums .ticks {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

/* Pillar-Kacheln in der Warum-wir-Sektion */
.pillars li {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

/* Dimensionsliste im Diagnose-Teaser als Kachelreihe */
.dims li {
  align-items: center;
  margin-bottom: var(--s-2);
  padding: var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

/* 13.4 Ab 900 px: Versatz und Überlappung wie im Original ---------------- */
@media (min-width: 900px) {

  .step .mockup { margin-block: calc(var(--s-6) * -1); }

  .case__impact { padding: var(--s-5); }
}


/* =========================================================================
   14 — KACHEL-FEINSCHLIFF UND PLATZHALTER
   Paddings, Reiter und Innenabstände nach den Vorlagen-Screenshots.
   Original: Trägerkachel ~24px innen, Reiter überlappt die Kante zur Hälfte,
   Unter-Kacheln ~16px innen mit deutlich hellerer Fläche, Titel und
   Untertitel zweizeilig, Kachelfuß mit Überschrift und Fließtext.
   ========================================================================= */

/* 14.1 Trägerkachel ------------------------------------------------------ */
.mockup {
  padding: var(--s-5);
  padding-top: var(--s-6);
}

.mockup__head {
  margin-bottom: var(--s-4);
  padding-right: var(--s-14);
}

/* Reiter sitzt jetzt auf der Oberkante und überlappt sie zur Hälfte */
.svc__card .svc__num {
  top: 0;
  left: var(--s-8);
  padding: var(--s-2) var(--s-6);
  transform: translateY(-55%);
}

/* 14.2 Unter-Kachel: zweizeilig, wie im Original ------------------------- */
.tile {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

.tile:last-child { margin-bottom: 0; }

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

.tile__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.tile__sub {
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-3);
}

.tile__end {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 14.3 Kachelfuß --------------------------------------------------------- */
.mockup__foot {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--divider);
}

.mockup__foot b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.mockup__foot span {
  display: block;
  margin-top: var(--s-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* 14.4 Platzhalter-Kacheln ---------------------------------------------- */
.ph {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px dashed var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.ph__label {
  align-self: flex-start;
  padding: var(--s-1) var(--s-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
}

.ph__line {
  height: 10px;
  background: var(--surface-nav);
  border-radius: var(--r-pill);
}

.ph__line--s { width: 42%; }
.ph__line--m { width: 74%; }

.ph__box {
  aspect-ratio: 16 / 10;
  background: var(--surface-nav);
  border: 1px solid var(--divider);
  border-radius: var(--r-tab);
}

.ph__grid {
  display: grid;
  gap: var(--s-4);
}

.ph__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}

/* 14.5 Wege-Kacheln (drei Sackgassen, Muster von 360-BPM) --------------- */
.ways {
  display: grid;
  gap: var(--s-4);
}

.way {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

/* 14.6 Problem-Kacheln --------------------------------------------------- */
.probs {
  display: grid;
  gap: var(--s-4);
}

.prob {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.prob h3 { margin-bottom: var(--s-3); }

/* 14.7 Gründer-Kachel ---------------------------------------------------- */
.founder {
  display: grid;
  gap: var(--s-8);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.founder__photo {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--surface-nav);
  border: 1px solid var(--divider);
  border-radius: var(--r-tab);
}

/* 14.8 Garantie-Marquee -------------------------------------------------- */
.promise .marquee__item {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

/* 14.9 Ab 900 px --------------------------------------------------------- */
@media (min-width: 640px) {
  .ways   { grid-template-columns: repeat(3, 1fr); }
  .probs  { grid-template-columns: repeat(2, 1fr); }
  .ph__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .mockup { padding: var(--s-6); padding-top: var(--s-7); }
  .founder { grid-template-columns: 0.8fr 1.2fr; align-items: center; padding: var(--s-10); }
  .ph__grid { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   15 — LABEL-PILLS, EINHEITLICH
   Ein einziges Erscheinungsbild für alle Label-Pills der Seite:
   pinker Rand, pinke Schrift, leuchtender Punkt links, gleiche Rundung.
   Betrifft: Eyebrow, Hero-Badge, Wege-Nummern, Platzhalter-Labels.
   Steht am Ende und überschreibt die früheren Einzelregeln.
   ========================================================================= */

.eyebrow,
.badge,
.ph__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: none;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
}

/* Leuchtender Punkt. .dot steht im Markup nur beim Hero-Badge,
   die übrigen bekommen ihn über ::before, damit das Markup schlank bleibt. */
.eyebrow::before,
.badge::before,
.ph__label::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), 0 0 10px 1px var(--accent);
  animation: pulse 2.4s var(--e-out) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Zentrierte Sektionsköpfe: Pill mittig statt links */
.section__head[style*="center"] .eyebrow { align-self: center; }

/* Kleine Inhalts-Chips teilen die Rundung, bleiben aber neutral —
   sonst konkurrieren sie mit den Label-Pills um Aufmerksamkeit. */
.tag,
.pill,
.mockup__flag {
  border-radius: var(--r-pill);
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before,
  .badge::before,
  .ph__label::before { animation: none; }
}


/* =========================================================================
   16 — REITER-MODUL UND PINKE VERLÄUFE
   Der pinke Reiter aus den Leistungskarten wird zum wiederverwendbaren
   Modul und läuft durch die ganze Seite. Dazu drei Abstufungen von
   Akzentlicht, damit die Seite Rhythmus bekommt statt gleichförmiger Kacheln.
   ========================================================================= */

/* 16.1 Reiter: eine Klasse für alle Kacheln ------------------------------ */
.tab {
  position: absolute;
  top: 0;
  left: var(--s-6);
  z-index: 2;
  padding: var(--s-2) var(--s-5);
  font-family: var(--f-head);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  transform: translateY(-55%);
  white-space: nowrap;
}

.tab--ghost {
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-bottom: 0;
}

/* Jede Kachel mit Reiter braucht Bezugspunkt und Luft nach oben */
.has-tab {
  position: relative;
  margin-top: var(--s-7);
  padding-top: var(--s-8);
}

/* 16.2 Akzentlicht in drei Stufen ---------------------------------------- */
.lit {
  border-color: var(--accent-line);
  box-shadow: var(--shadow-hl);
}

.lit-soft {
  background-image: radial-gradient(120% 90% at 8% 0%, var(--accent-soft), transparent 58%);
}

.lit-edge {
  position: relative;
  overflow: hidden;
}

.lit-edge::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
}

/* 16.3 Sektionslicht: weicher pinker Schein hinter ausgewählten Blöcken --- */
.section--glow { position: relative; }

.section--glow::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(120vw, 1000px);
  height: min(80vh, 620px);
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 68%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
}

.section--glow > .wrap { position: relative; z-index: 1; }

.section--glow-l::before { left: 0; transform: translate(-30%, -50%); }
.section--glow-r::before { left: 100%; transform: translate(-70%, -50%); }

/* 16.4 Trennlinie mit Akzent statt reinem Grau --------------------------- */
.divider--accent {
  background: linear-gradient(90deg, transparent, var(--accent-line) 35%, var(--accent) 50%, var(--accent-line) 65%, transparent);
  opacity: 0.55;
}

/* 16.5 Icon-Kreise im Nutzen-Raster ------------------------------------- */
.bgrid__cell {
  position: relative;
  padding-top: var(--s-8);
}

.bgrid__cell svg {
  width: 40px;
  height: 40px;
  padding: 8px;
  stroke: var(--accent);
  background: var(--surface-nav);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}

.bgrid__cell:hover svg {
  background: var(--accent);
  stroke: var(--bg);
}

/* 16.6 Kachel-Rhythmus: jede dritte Kachel bekommt Licht ---------------- */
.probs .prob:nth-child(3),
.ways .way:nth-child(2),
.quotes .quote:nth-child(2),
.nums__grid > div:nth-child(2) { border-color: var(--accent-line); }

.probs .prob:nth-child(3),
.ways .way:nth-child(2) {
  background-image: radial-gradient(120% 90% at 8% 0%, var(--accent-soft), transparent 58%);
}

@media (prefers-reduced-motion: reduce) {
  .section--glow::before { filter: none; opacity: 0.6; }
}


/* =========================================================================
   17 — GESCHLOSSENE KACHELN
   Der Reiter saß zur Hälfte auf der Kartenkante und hat den Rahmen
   durchschnitten. Jetzt sitzt er vollständig oberhalb, die Kachel bleibt
   rundum geschlossen. Dazu ein einheitliches Innenmaß, damit sich
   Reiter, Ecken und Inhalt nirgends überlagern.
   ========================================================================= */

:root { --tab-h: 30px; }

/* 17.1 Reiter komplett über der Kante ------------------------------------ */
.tab,
.svc__card .svc__num {
  top: 0;
  left: var(--s-8);          /* > Eckradius, damit der Reiter nicht in die Rundung ragt */
  height: var(--tab-h);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-5);
  border-radius: var(--r-tab) var(--r-tab) 0 0;
  transform: translateY(-100%);
}

/* Umriss-Variante: die Kartenkante ist zugleich der Abschluss des Reiters */
.tab--ghost {
  border: 1px solid var(--accent-line);
  border-bottom: 0;
}

/* 17.2 Platz für den Reiter, ohne das Innenmaß der Kachel anzufassen ----- */
.has-tab {
  position: relative;
  margin-top: var(--tab-h);
  padding-top: var(--s-6);
}

.svc__card { margin-top: var(--tab-h); }

/* Reiter darf nicht abgeschnitten werden */
.has-tab,
.svc__card,
/* 17.3 Innenmaße vereinheitlichen ---------------------------------------- */
.prob,
.way,
.plan,
.case,
.bgrid__cell,
.quote,
.nums__grid > div,
.ph {
  padding: var(--s-6);
}

.prob.has-tab,
.way.has-tab,
.plan.has-tab,
.case.has-tab,
.nums__grid > div.has-tab { padding-top: var(--s-6); }

/* 17.4 Kollisionen im Kachelkopf auflösen -------------------------------- */
.mockup__flag {
  top: var(--s-3);
  right: var(--s-3);
}

.mockup__head { padding-right: var(--s-16); }

/* Hervorhebungs-Badge der Pakete kollidierte mit dem Reiter */
.plan--hl { padding-top: var(--s-6); }

/* Zitatzeichen lag über der ersten Textzeile */
.quote::before {
  top: -6px;
  right: var(--s-5);
  font-size: 84px;
  opacity: 0.22;
}

.quote p { padding-right: var(--s-8); }

/* Case-Karten kippten in die Nachbarkarte hinein */
.case:nth-child(odd),
.case:nth-child(even) { transform: none; }

/* 17.5 Chips bleiben außen, schneiden aber keinen Text an --------------- */
.chip--a { top: -12px; left: var(--s-4); }
.chip--b { right: var(--s-4); bottom: auto; top: 38%; }
.chip--c { left: var(--s-4); bottom: -12px; }

@media (min-width: 900px) {
  .tab,
  .svc__card .svc__num { left: var(--s-10); }
  .step .mockup { margin-block: calc(var(--s-4) * -1); }
}


/* =========================================================================
   18 — PAKETE: ZENTRIERUNG UND HINWEIS OHNE FLÄCHE
   Das Raster reservierte vier Spalten, obwohl die Filterung eine Karte
   ausblendet. Dadurch standen drei Karten linksbündig mit Loch rechts.
   Flexbox statt festem Raster: sichtbare Karten rücken mittig zusammen.
   ========================================================================= */

.plans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
  margin-top: var(--s-10);
}

.plan {
  flex: 1 1 260px;
  max-width: 340px;
}

/* Hinweis als kleiner pinker Text direkt unter dem Pakettitel */
.plan__note {
  margin-top: calc(var(--s-2) * -1);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.plan--hl { padding-top: var(--s-6); }

@media (min-width: 1200px) {
  .plans { flex-wrap: nowrap; }
}


/* =========================================================================
   19 — PAKET-REITER MIT WORTMARKE
   Wortreiter statt Nummern. Anton in Versalien wäre bei kurzen Wörtern
   zu breit, deshalb hier Inter in Kapitälchen-Optik.
   ========================================================================= */

.plan .tab {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}


/* =========================================================================
   20 — LEISTUNGEN ALS SLIDE-STAPEL
   Die Karten 01 bis 05 docken nacheinander unter der Nav an. Jede folgende
   schiebt sich von oben über die vorherige, die vorherige bleibt mit ihrem
   Reiter sichtbar. Optik der Karten bleibt unverändert.
   ========================================================================= */

.svc__stack {
  gap: 0;                     /* Abstand entsteht allein durch die Reiterhöhe */
  perspective: none;
}

.svc__card {
  position: sticky;
  top: calc(88px + var(--tab-h) + var(--i) * 10px);
  z-index: calc(var(--i) + 1);
  margin-top: var(--tab-h);
  transform: none;            /* keine Skalierung: Stil bleibt 1:1 */
  background: var(--surface); /* deckend, sonst scheint die Karte darunter durch */
}

/* Nach der letzten Karte etwas Weg, damit der Stapel sichtbar aufgelöst wird */
.svc__stack::after {
  content: '';
  display: block;
  height: var(--s-16);
}

@media (min-width: 900px) {
  .svc__card {
    top: calc(104px + var(--tab-h) + var(--i) * 14px);
    padding: var(--s-10);
    transform: none;
  }

  .svc__stack::after { height: var(--s-20); }
}

/* Einzelne Kachel im Platzhalter braucht keinen Stapel */
.svc__stack--flat .svc__card { position: relative; top: auto; }
.svc__stack--flat::after { display: none; }

/* Erklärende Subline in der Custom-Kachel */
.plan__hint {
  margin-top: calc(var(--s-3) * -1);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-3);
}


/* =========================================================================
   21 — RECHNER
   Nutzt die bestehende Reiter-Kachel. Neu sind nur Regler und Ergebniszeile.
   ========================================================================= */

.calc__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--divider);
}

.calc__field:last-of-type { border-bottom: 0; }

.calc__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: 13px;
  color: var(--text-2);
}

.calc__value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-4);
  font-variant-numeric: tabular-nums;
}

/* Regler. Track als Verlauf, Füllstand kommt per --fill aus dem Script. */
.range {
  width: 100%;
  height: 28px;
  margin: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--divider) var(--fill, 50%));
}

.range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--divider) var(--fill, 50%));
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px var(--accent-glow); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px var(--accent-glow); }

/* Ergebniszeile */
.calc .mockup__foot b {
  font-family: var(--f-head);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.calc__info {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-3);
}

.calc__info summary {
  cursor: pointer;
  color: var(--text-2);
}

.calc__info p { margin-top: var(--s-3); }

.calc__legal {
  margin-top: var(--s-6);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-4);
}

.calc__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
}

@media (min-width: 900px) {
  .calc .svc__inner { align-items: start; }
}


/* =========================================================================
   22 — EINWAND-KACHELN
   Nutzen die Problem-Kachel als Basis. Neu sind nur das vorangestellte
   Zitat und der abschließende Satz.
   ========================================================================= */

.obj__quote {
  margin-bottom: var(--s-3);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent);
}

.obj__end {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  border-top: 1px solid var(--divider);
}


/* =========================================================================
   23 — DEUTSCHE VERSAL-TYPOGRAFIE
   Zwei Fehler in den Display-Headlines, beide sprachbedingt:

   1) hyphens: auto trennte mitten in der Headline ("GESPRÄ-CHE").
      Automatische Trennung gehört in Fließtext, nicht in eine Zeile,
      die als Aussage gelesen wird. Deshalb hier abgeschaltet.

   2) Versal-Umlaute (Ä Ö Ü) sitzen bei Anton deutlich über der
      Versalhöhe. Bei Zeilenhöhe unter 1.1 stößt der Umlaut der unteren
      Zeile an die obere und die Punkte verschwinden optisch — aus
      GEHÖREN wird GEHOREN. Die Zeilenhöhen liegen daher jetzt über 1.1.
      Das ist kein Geschmack, das ist die Metrik der Schrift.
   ========================================================================= */

.h-hero,
.h2,
.kinetic,
.final__title {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;   /* greift nur, wenn ein Wort allein nicht passt */
  text-wrap: balance;
}

.h-hero      { line-height: 1.12; }
.h2          { line-height: 1.14; }
.kinetic     { line-height: 1.18; }
.final__title { line-height: 1.12; }

/* Die Kinetic-Sektionen brauchen mit größerer Zeilenhöhe etwas mehr Luft */
.kinetic { margin-bottom: var(--s-4); }


/* =========================================================================
   24 — BELEGE: HANDY MIT LAUFENDER ZITATWAND
   Aufbau nach Vorlage: Kopf mittig, darunter Avatare und Sterne, dann
   ein Handy in der Mitte, hinter dem zwei Reihen heller Karten
   gegenläufig durchs Bild laufen.
   ========================================================================= */

.wallhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}

.wallhead .h2 { text-wrap: balance; }

/* 24.1 Bewertungszeile --------------------------------------------------- */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
}

.rating .avatars li {
  width: 44px;
  height: 44px;
  margin-left: -14px;
  font-size: 12px;
  border-width: 3px;
}

.rating .avatars li:first-child { margin-left: 0; }

.rating__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.stars {
  display: inline-flex;
  gap: 3px;
  font-size: 15px;
  line-height: 1;
  color: var(--accent);
}

.rating__text {
  font-size: 13px;
  color: var(--text-2);
}

.rating__text b {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 24.2 Bühne ------------------------------------------------------------- */
.wall {
  position: relative;
  margin-top: var(--s-10);
  padding-block: var(--s-6);
  overflow: hidden;
}

.wall::before,
.wall::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 12%;
  pointer-events: none;
}

.wall::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.wall::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.wall__rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.wall__row {
  display: flex;
  overflow: hidden;
}

.wall__track {
  display: flex;
  flex: 0 0 auto;
  gap: var(--s-4);
  padding-right: var(--s-4);
  animation: marquee 52s linear infinite;
}

.wall__row--back .wall__track {
  animation-direction: reverse;
  animation-duration: 64s;
}

.wall:hover .wall__track { animation-play-state: paused; }

/* 24.3 Helle Zitatkarten ------------------------------------------------- */
.wcard {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  color: var(--bg);
  background: var(--text);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

.wcard p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--bg);
}

.wcard__who {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: auto;
}

.wcard__ini {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border-radius: 50%;
}

.wcard__name {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  line-height: 1.3;
}

.wcard__name b { font-weight: 700; }
.wcard__name span { color: var(--text-4); }

/* 24.4 Handy ------------------------------------------------------------- */
/* Fertiges Geräte-Mockup als Bild. Kein CSS-Rahmen mehr, deshalb auch
   kein Notch-Element und keine eigene Bildschirmfläche. */
.phone {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(250px, 66vw);
  padding: 0;
  background: none;
  border: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 60px var(--ink-45)) drop-shadow(0 0 70px var(--accent-glow));
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
}

.phone__cta {
  position: absolute;
  inset: auto 0 -26px 0;
  font-size: 11px;
  text-align: center;
  color: var(--text-3);
}

.wall__legal {
  margin-top: var(--s-6);
  font-size: 12px;
  text-align: center;
  color: var(--text-3);
}

/* 24.5 Ab 640 px --------------------------------------------------------- */
@media (min-width: 640px) {
  .wcard { flex: 0 0 300px; }
  .phone { width: 270px; }
  .rating__box { align-items: center; }
}

@media (min-width: 900px) {
  .wall { padding-block: var(--s-10); }
  .wall__rows { gap: var(--s-5); }
  .wcard { flex: 0 0 340px; }
  .phone { width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none; }
}


/* =========================================================================
   25 — KORREKTUREN BELEGE UND VERTRAUENSZITAT
   ========================================================================= */

/* 25.1 Sterne in Gold statt Akzentfarbe ---------------------------------- */
:root { --star: #F5B23E; }

.stars { color: var(--star); }

/* 25.2 Eyebrow-Pill in mittigen Köpfen zentrieren ------------------------ */
.wallhead .eyebrow { align-self: center; }

/* 25.3 Langsamere Zitatwand ---------------------------------------------- */
.wall__track { animation-duration: 88s; }
.wall__row--back .wall__track { animation-duration: 106s; }

/* 25.4 Vertrauenszitat direkt unter dem Header --------------------------- */
.quote--lead {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 760px;
  margin-inline: auto;
  padding: var(--s-8);
  text-align: center;
  align-items: center;
}

.quote--lead p {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--text);
  padding-right: 0;
}

.quote--lead cite {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: 0;
}

.quote__ini {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: 50%;
}

.quote__who {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  color: var(--text);
}

.quote__who span {
  font-size: 12px;
  color: var(--text-3);
}

.quote--lead::before { display: none; }


/* =========================================================================
   26 — GLOW HINTER BELEGE-BÜHNE UND LAUFBÄNDERN
   Der Glow liegt in einer eigenen Ebene unter dem Inhalt. Bei den
   Laufbändern muss er außerhalb des Bandes sitzen, weil .marquee
   overflow: hidden hat und ihn sonst abschneidet.
   ========================================================================= */

/* 26.1 Belege-Bühne ------------------------------------------------------ */
.wall__glow {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(110vw, 900px);
  height: min(70vh, 560px);
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 66%);
  filter: blur(70px);
  transform: translate(-50%, -50%);
}

/* Nur die Kartenreihen brauchen hier einen Stapelkontext. Das Handy nicht:
   es steht absolut und mittig. Wenn es hier auf relative gesetzt wird,
   fällt es zurück in den Textfluss, landet unter den Karten und
   verlängert die Bühne um seine volle Höhe. Genau das war der Fehler. */
.wall__rows { position: relative; }

/* 26.2 Laufbänder -------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
}

.band::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(100vw, 820px);
  height: 320px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 68%);
  filter: blur(60px);
  transform: translate(-50%, -50%);
}

.band > .marquee { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .wall__glow,
  .band::before { filter: none; opacity: 0.55; }
}


/* =========================================================================
   27 — FOTOS IN DEN AVATAR-BUBBLES
   Die Kreise trugen bisher Initialen. Wo ein Foto vorliegt, ersetzt es
   den Text; Initialen bleiben als Rückfallebene für Personen ohne Foto.
   ========================================================================= */

.avatars li img,
.quote__ini img,
.wcard__ini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatars li:has(img),
.quote__ini:has(img),
.wcard__ini:has(img) {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.quote__ini,
.wcard__ini { overflow: hidden; }

/* Der Rahmen der Bewertungsavatare bleibt sichtbar, das Foto füllt innen */
.rating .avatars li { overflow: hidden; }

/* Zitat-Fuß in der Testimonial-Sektion mit Foto */
.quote cite {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}


/* =========================================================================
   28 — ECHTE FOTOS
   Teamfotos ersetzen die Initialenflächen, der Screenshot der
   Buchungsansicht ersetzt die Platzhalterfläche im Erstgespräch.
   ========================================================================= */

/* Initialen bleiben als Rückfallebene für Personen ohne Foto */
.team__photo:has(img) { background: var(--surface-nav); }

/* Buchungsansicht: heller Screenshot auf dunklem Grund braucht eine Fassung */
.callshot {
  margin: 0;
  padding: var(--s-3);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.callshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-tab);
}

@media (min-width: 900px) {
  .founder .callshot { align-self: start; }
}


/* =========================================================================
   29 — AUFKLAPP-KACHEL "CUSTOM ANFRAGEN"
   Im geschlossenen Zustand ist die Kachel nur eine Zeile. Der Text sitzt
   linksbündig und im Padding vertikal mittig, das Plus rechts außen.
   ========================================================================= */

.form {
  padding: 0;
  gap: 0;
}

.form > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-6);
  text-align: left;
  cursor: pointer;
  list-style: none;
}

.form > summary::-webkit-details-marker { display: none; }
.form > summary::marker { content: ''; }

.form > summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.form[open] > summary::after { content: '−'; }

.form[open] > summary { padding-bottom: var(--s-4); }

/* Inhalt bekommt das Padding, das vorher an der Kachel hing */
.form > :not(summary) {
  margin-inline: var(--s-6);
}

.form > :last-child { margin-bottom: var(--s-6); }

.form > form { display: flex; flex-direction: column; gap: var(--s-5); }

.form > .plan__hint { margin-top: 0; }


/* =========================================================================
   30 — TEAMFOTO IM RAHMEN HALTEN
   Die Karte kappt links, rechts und oben, aber das Bildfeld selbst hatte
   keine Begrenzung. Beim Zoom lief das Bild deshalb nach unten in den
   Textbereich. Das Bildfeld kappt jetzt selbst.
   ========================================================================= */

.team__photo {
  overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}

.team__photo img { transform-origin: center; }

/* Vertrauenszeile im Hero: Sterne über der Textzeile, wie in der Belege-Sektion */
.hero .trust .rating__box { align-items: flex-start; }
.hero .trust .stars { font-size: 14px; }


/* =========================================================================
   31 — VERTIKALER RHYTHMUS
   Vorher: --sec-y bis 192 px, also bis zu 384 px zwischen zwei Sektionen,
   dazu 48 px unter jedem Sektionskopf und bis zu 56 px Vorlauf je Block.
   Das addierte sich auf über 400 px Leerraum an manchen Übergängen.

   Jetzt gilt eine einzige Skala mit drei Stufen. Alles vertikale Maß
   zwischen Blöcken greift auf diese drei Werte zu, nichts rechnet
   mehr eigene Abstände dazu.
   ========================================================================= */

:root {
  --sec-y:    clamp(48px, 6vw, 96px);   /* Sektion oben und unten */
  --gap-head: clamp(24px, 2.6vw, 40px); /* unter dem Sektionskopf */
  --gap-block: clamp(28px, 3.2vw, 48px);/* zwischen Blöcken in der Sektion */
}

.section__head { margin-bottom: var(--gap-head); }

.steps {
  margin-top: var(--gap-block);
  gap: var(--gap-block);
}

.team,
.pillars,
.plans,
.quotes,
.wall,
.form { margin-top: var(--gap-block); }

.svc__stack { margin-top: var(--gap-block); }

/* Kinetic-Blöcke trugen den Abstand als Inline-Angabe im HTML */
.kinetic { margin-top: var(--gap-head); }

/* Zwei aufeinanderfolgende Sektionen ohne Trenner: die untere zieht an */
.section + .section { padding-top: calc(var(--sec-y) * 0.7); }

/* Laufbänder und Trenner brauchen keinen doppelten Rand */
.band + .section,
.marquee + .section { padding-top: var(--sec-y); }

.divider + .section { padding-top: calc(var(--sec-y) * 0.8); }

/* Eingesetzte Blöcke bringen eigenes Innenmaß mit, außen reicht weniger */
.why,
.final { padding-block: calc(var(--sec-y) * 0.9); }

/* Hero enger ans Laufband */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(40px, 6vw, 80px); }

@media (min-width: 1200px) {
  .hero { padding-block: clamp(64px, 6vw, 104px) clamp(48px, 5vw, 88px); }
}

/* Kopf und Text der Methodenschritte brauchen wieder Innenabstände,
   nachdem die Inline-Angaben entfernt wurden. */
.step__copy .h3 { margin-top: var(--s-3); }
.step__copy .h3 + p { margin-top: var(--s-3); }

/* Abstand über dem abschließenden Satz einer Sektion */
.problem__end { margin-top: var(--gap-block); }

/* Buttonzeile unter dem Fließtext */
.hero__actions { margin-top: 0; }

/* Bühne: Höhe folgt den Kartenreihen, das Handy braucht aber Platz,
   damit es oben und unten nicht angeschnitten wird. */
.wall {
  min-height: calc(min(250px, 66vw) / 0.491 + var(--s-10));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wall__legal { margin-top: var(--gap-head); }

@media (min-width: 640px) {
  .wall { min-height: calc(270px / 0.491 + var(--s-10)); }
}

@media (min-width: 900px) {
  .wall { min-height: calc(300px / 0.491 + var(--s-12)); }
}


/* =========================================================================
   32 — HERO: ZWEI ANALYTICS-ANSICHTEN IM FLOAT
   Ersetzt die gebauten UI-Karten. Echte Zahlen schlagen nachgebaute
   Oberflächen als Vertrauensanker. Zwei Geräte versetzt, leicht gekippt,
   pinke Chips mit Glow außen an den Kanten.
   ========================================================================= */

.hero__phones {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding-block: var(--s-8);
}

.hphone {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
}

.hphone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 50px var(--ink-45));
}

/* Vordere Ansicht: die Impressionskurve, größer und weiter vorn */
.hphone--a {
  z-index: 2;
  width: min(196px, 50vw);
  transform: rotate(-4deg);
  animation: hfloat-a 11s ease-in-out infinite;
}

/* Hintere Ansicht: die Engagement-Zahlen, kleiner und angeschnitten */
.hphone--b {
  z-index: 1;
  width: min(168px, 43vw);
  margin-left: -13%;
  margin-top: 14%;
  transform: rotate(5deg);
  animation: hfloat-b 13s ease-in-out infinite;
}

@keyframes hfloat-a {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(-2.5deg) translateY(-14px); }
}

@keyframes hfloat-b {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50%      { transform: rotate(3.5deg) translateY(-10px); }
}

/* Glow hinter beiden Geräten */
.hero__glow2 {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: min(120%, 620px);
  height: min(90%, 560px);
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--accent-glow), transparent 66%);
  filter: blur(64px);
  transform: translate(-50%, -50%);
}

/* Chips: pink, leuchtend, außen an den Gerätekanten */
.hchip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface-nav);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 4px var(--accent-glow), 0 10px 26px var(--ink-45);
}

.hchip b {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.hchip--a { top: 8%;  left: -16%; transform: rotate(-5deg); }
.hchip--b { top: 46%; left: -22%; transform: rotate(-3deg); }
.hchip--c { top: 22%; right: -20%; transform: rotate(5deg); }
.hchip--d { bottom: 16%; right: -14%; transform: rotate(4deg); }

/* Ab 640 px ist Platz für größere Geräte und Chips */
@media (min-width: 640px) {
  .hphone--a { width: 230px; }
  .hphone--b { width: 196px; }
  .hchip { font-size: 11px; padding: var(--s-2) var(--s-4); }
  .hchip b { font-size: 14px; }
}

@media (min-width: 900px) {
  .hero__phones { padding-block: var(--s-10); }
  .hphone--a { width: 268px; }
  .hphone--b { width: 228px; }
}

@media (min-width: 1200px) {
  .hphone--a { width: 296px; }
  .hphone--b { width: 252px; }
}

@media (prefers-reduced-motion: reduce) {
  .hphone--a,
  .hphone--b { animation: none; }
  .hero__glow2 { filter: none; opacity: 0.6; }
}


/* =========================================================================
   33 — DIAGNOSE-SEITE
   Nutzt die Kachel- und Reiter-Bausteine der Startseite. Neu sind nur
   die Statusleiste, die Ampelschalter und die Auswertung.
   ========================================================================= */

/* 33.1 Statusleiste unter der Nav ---------------------------------------- */
.scorebar {
  position: sticky;
  top: calc(56px + env(safe-area-inset-top) + var(--s-3));
  z-index: 400;
  margin-inline: var(--gutter);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.scorebar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.scorebar__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.tally {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tally span {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.tally i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.tally .i-gruen { background: var(--ok); }
.tally .i-gelb  { background: var(--star); }
.tally .i-rot   { background: var(--accent); }

.scorebar__rail {
  height: 3px;
  margin-top: var(--s-3);
  overflow: hidden;
  background: var(--divider);
  border-radius: 999px;
}

.scorebar__rail i {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width var(--t-base) var(--e-out);
}

/* 33.2 Kennzahlen im Kopf ------------------------------------------------ */
.facts {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--gap-block);
}

.fact {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.fact b {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}

.fact span {
  display: block;
  margin-top: var(--s-3);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-2);
}

/* 33.3 Dimensionskachel -------------------------------------------------- */
.dim {
  position: relative;
  margin-top: var(--tab-h);
  padding: var(--s-6);
  padding-top: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  scroll-margin-top: 180px;
}

.dim + .dim { margin-top: calc(var(--gap-block) + var(--tab-h)); }

.dim__lead {
  margin-bottom: var(--s-5);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

.dim__q {
  margin-bottom: var(--s-5);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text);
}

/* Ampel */
.amp {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.amp__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              background var(--t-fast) var(--e-out);
}

.amp__opt i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-4);
  transition: background var(--t-fast) var(--e-out);
}

.amp__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.amp__opt:hover { color: var(--text); }

.amp__opt[data-on="true"] { color: var(--text); background: var(--surface); }
.amp__opt[data-on="true"][data-wert="gruen"] { border-color: var(--ok); }
.amp__opt[data-on="true"][data-wert="gelb"]  { border-color: var(--star); }
.amp__opt[data-on="true"][data-wert="rot"]   { border-color: var(--accent); }

.amp__opt[data-on="true"][data-wert="gruen"] i { background: var(--ok); }
.amp__opt[data-on="true"][data-wert="gelb"]  i { background: var(--star); }
.amp__opt[data-on="true"][data-wert="rot"]   i { background: var(--accent); }

.amp__opt:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Zustandsblöcke */
.states {
  display: grid;
  gap: var(--s-3);
}

.state {
  padding: var(--s-4);
  background: var(--surface-nav);
  border: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  box-shadow: var(--shadow-1);
}

.state__k {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.state--gruen { border-left: 3px solid var(--ok); }
.state--rot   { border-left: 3px solid var(--accent); }
.state--praxis { border-left: 3px solid var(--star); }

.state p { font-size: 13px; line-height: 1.55; }

.dim__why {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-3);
  border-top: 1px solid var(--divider);
}

.dim__why b { color: var(--text-2); }

/* 33.4 Auswertung -------------------------------------------------------- */
.result {
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hl);
}

.result__big {
  font-family: var(--f-head);
  font-size: clamp(56px, 12vw, 108px);
  font-weight: 400;
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.result__unit {
  display: block;
  margin-bottom: var(--s-5);
  font-size: 13px;
  color: var(--text-3);
}

.result__head {
  margin-bottom: var(--s-3);
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
}

.result[data-status="offen"] .result__big { color: var(--text-4); }

.result__cta { margin-top: var(--gap-block); }

/* 33.5 Kompaktblöcke unter dem Check ------------------------------------- */
.mini {
  display: grid;
  gap: var(--s-4);
}

.mini__card {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.mini__card h3 {
  margin-bottom: var(--s-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.mini__card p { font-size: 13px; line-height: 1.55; }

.mini__q {
  display: block;
  margin-bottom: var(--s-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.miniproof {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}

.miniproof__phone { justify-self: center; width: min(220px, 60vw); }
.miniproof__phone img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 46px var(--ink-45)); }

/* 33.6 Formular ---------------------------------------------------------- */
.dform {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.dform__nr {
  margin-right: var(--s-2);
  font-family: var(--f-head);
  font-size: 13px;
  color: var(--accent);
}

.radios { display: grid; gap: var(--s-2); }

.radios label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-4);
  font-size: 13px;
  color: var(--text-2);
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: var(--r-tab);
  cursor: pointer;
}

.radios input { accent-color: var(--accent); }
.radios label:hover { color: var(--text); }

.dform__ok {
  padding: var(--s-6);
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--ok);
  border-radius: var(--r-xl);
}

/* 33.7 Breakpoints ------------------------------------------------------- */
@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .states { grid-template-columns: repeat(2, 1fr); }
  .state--praxis { grid-column: 1 / -1; }
  .mini { grid-template-columns: repeat(3, 1fr); }
  .radios { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .scorebar { top: calc(64px + var(--s-4)); }
  .dim { padding: var(--s-10); }
  .states { grid-template-columns: repeat(3, 1fr); }
  .state--praxis { grid-column: auto; }
  .result { padding: var(--s-10); }
  .miniproof { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-12); }
  .dform { padding: var(--s-10); }
}

@media (prefers-reduced-motion: reduce) {
  .scorebar__rail i { transition: none; }
}


/* Zitat mit Sternen darüber (Diagnose-Seite) */
.quote .stars { display: block; margin-bottom: var(--s-3); }
.quote:has(.stars)::before { display: none; }

/* Radiogruppe im Diagnose-Formular */
.dform fieldset { border: 0; padding: 0; margin: 0; }
.dform legend { padding: 0; margin-bottom: var(--s-2); font-size: 12px; letter-spacing: 0.04em; color: var(--text-3); }

/* Der weiße Kasten um die Ampel war der Standardrahmen des fieldset.
   Er wird zurückgesetzt und durch eine gerundete Fassung im Seitenstil
   ersetzt, damit die Gruppe als Einheit lesbar bleibt. */
.amp {
  padding: var(--s-2);
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--border-card);
  border-radius: var(--r-pill);
}

.amp__opt { border-color: transparent; background: transparent; }
.amp__opt:hover { background: var(--surface-nav); }
.amp__opt[data-on="true"] { background: var(--surface-nav); }

/* =========================================================================
   34 — DIAGNOSE: ABSTAND UND HANDLUNGSAUFFORDERUNG
   Die Statusleiste klebt, ihre Höhe fehlt aber im Fluss. Der Block
   darunter lief deshalb zu dicht auf. Dazu fehlte überall der Hinweis,
   wo geklickt werden soll.
   ========================================================================= */

.scorebar { margin-bottom: var(--gap-block); }

.scorebar__inner { flex-wrap: wrap; }

.scorebar__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  font-size: 12px;
  font-weight: 700;
  color: var(--bg);
  background: var(--accent);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.scorebar__cta:hover { background: var(--accent-dark); color: var(--text); }

/* Erste Sektion nach der Leiste braucht keinen doppelten Vorlauf */
.scorebar + .section { padding-top: var(--gap-block); }

/* Aufforderung über der Ampel */
.amp__ask {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.amp__ask::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  animation: pulse 2.4s var(--e-out) infinite;
}

/* Beantwortete Dimension: Aufforderung tritt zurück */
.dim[data-status="gruen"] .amp__ask,
.dim[data-status="gelb"] .amp__ask,
.dim[data-status="rot"] .amp__ask { color: var(--text-3); }

.dim[data-status="gruen"] .amp__ask::before,
.dim[data-status="gelb"] .amp__ask::before,
.dim[data-status="rot"] .amp__ask::before {
  background: var(--text-4);
  box-shadow: none;
  animation: none;
}

.nextline { margin-top: var(--gap-block); }

@media (prefers-reduced-motion: reduce) {
  .amp__ask::before { animation: none; }
}

/* =========================================================================
   35 — DIAGNOSE-KACHEL: INNENABSTÄNDE NACHZIEHEN
   Drei Korrekturen:
   1) Das Label-Pill hatte keinen Abstand nach unten, der Einleitungstext
      lief dagegen.
   2) `margin: 0` beim Runden der Ampel hat deren Abstand nach unten
      mitgelöscht, dadurch klebten die grauen Zustandskacheln daran.
   3) Die Kachel bekommt oben mehr Luft, damit das Pill unter dem Reiter
      frei steht.
   ========================================================================= */

.dim {
  padding-top: var(--s-8);
}

.dim .eyebrow { margin-bottom: var(--s-4); }

.dim__lead { margin-bottom: var(--s-6); }

.dim__q { margin-bottom: var(--s-6); }

.amp {
  margin: 0 0 var(--s-6);
}

.amp__ask { margin-bottom: var(--s-3); }

.states { gap: var(--s-4); }

.dim__why { margin-top: var(--s-6); padding-top: var(--s-6); }

@media (min-width: 900px) {
  .dim { padding: var(--s-10); padding-top: var(--s-10); }
}


/* =========================================================================
   36 — MOBILE: HERO ZENTRIERT, GERÄTE KLEINER
   Basis ist Mobil. Ab 900 px wird auf das zweispaltige, linksbündige
   Layout zurückgestellt. Reihenfolge im Markup bleibt: Text, dann Geräte,
   also rutschen die Geräte auf Mobil ohnehin unter die Headline.
   ========================================================================= */

.hero__copy {
  align-items: center;
  text-align: center;
}

.hero__title,
.hero__copy .sub {
  text-align: center;
  margin-inline: auto;
}

.hero__actions { justify-content: center; }

.hero .trust {
  justify-content: center;
  text-align: center;
}

.hero .trust .rating__box { align-items: center; }

.hero__phones {
  width: 100%;
  transform: scale(0.94);
  transform-origin: top center;
}

/* Geräte auf schmalen Displays deutlich kleiner, damit die Chips
   an den Außenkanten nicht über den Bildschirmrand laufen */
.hphone--a { width: min(168px, 44vw); }
.hphone--b { width: min(144px, 38vw); }

.hchip {
  font-size: 9px;
  padding: var(--s-1) var(--s-2);
}

.hchip b { font-size: 11px; }

.hchip--a { left: -10%; }
.hchip--b { left: -14%; }
.hchip--c { right: -12%; }
.hchip--d { right: -8%; }

@media (min-width: 640px) {
  .hphone--a { width: 230px; }
  .hphone--b { width: 196px; }
  .hchip { font-size: 11px; padding: var(--s-2) var(--s-4); }
  .hchip b { font-size: 14px; }
  .hchip--a { left: -16%; }
  .hchip--b { left: -22%; }
  .hchip--c { right: -20%; }
  .hchip--d { right: -14%; }
  .hero__phones { transform: none; }
}

@media (min-width: 900px) {
  .hero__copy {
    align-items: flex-start;
    text-align: left;
  }

  .hero__title,
  .hero__copy .sub {
    text-align: left;
    margin-inline: 0;
  }

  .hero__actions { justify-content: flex-start; }

  .hero .trust {
    justify-content: flex-start;
    text-align: left;
  }

  .hero .trust .rating__box { align-items: flex-start; }
}

/* Das Label-Pill steht global linksbündig. Im zentrierten Mobil-Hero
   muss es mittig sitzen, ab 900 px wieder links. */
.hero__copy .badge,
.hero__copy .eyebrow { align-self: center; }

.hero__phones { max-width: 100%; }

@media (min-width: 900px) {
  .hero__copy .badge,
  .hero__copy .eyebrow { align-self: flex-start; }
}

/* Ehemalige Inline-Angaben, jetzt steuerbar über Breakpoints */
.problem__end--right { text-align: center; }

.section__head--center {
  align-items: center;
  text-align: center;
}

.section__head--center .eyebrow { align-self: center; }

.sub--narrow { max-width: 46ch; margin-inline: auto; }

@media (min-width: 900px) {
  .problem__end--right { text-align: right; }
}


/* =========================================================================
   37 — HERO-HEADLINE: GRÖSSE FOLGT DER SPALTE, NICHT DEM FENSTER
   Die Größe hing an vw, also an der Fensterbreite. Die Headline steht ab
   900 px aber in einer halben Spalte, und die ist bei 900 px schmaler
   (373 px) als die volle Spalte bei 640 px (576 px). Ein einzelner clamp
   über alle Breiten kann das nicht abbilden, deshalb wird beim
   Spaltenwechsel neu gesetzt.

   Rechengrundlage: Anton läuft in Versalien mit rund 0,48 em je Zeichen,
   das längste Wort auf der Seite hat 16 Zeichen (FÜHRUNGSKRÄFTE als
   Kompositum). Daraus ergeben sich die Obergrenzen:
     375 px → 43 px | 640 px → 75 px | 900 px → 48 px | 1440 px → 68 px
   ========================================================================= */

/* Eine Spalte, volle Breite */
.h-hero {
  font-size: clamp(38px, 11.5vw, 72px);
  line-height: 1.06;
}

@media (min-width: 900px) {
  /* Zwei Spalten: die Textspalte ist nur noch etwa halb so breit */
  .h-hero { font-size: clamp(42px, 4.6vw, 66px); }
}

@media (min-width: 1440px) {
  .h-hero { font-size: 66px; }
}


/* =========================================================================
   38 — CASE-STRIP MITTIG
   Der Strip ist ein horizontaler Scroller. Passen alle Karten hinein,
   standen sie linksbündig und rechts blieb Leerraum.

   `justify-content: center` scheidet aus: sobald der Inhalt breiter wird
   als der Container, schneidet es in Scroll-Containern den ersten Eintrag
   ab, der dann nicht mehr erreichbar ist. Stattdessen zwei leere
   Flex-Elemente mit `margin: auto`. Sie verteilen freien Platz gleichmäßig
   auf beide Seiten und fallen auf null zusammen, sobald kein Platz frei ist.
   ========================================================================= */

/* =========================================================================
   39 — STATUSLEISTE AUF SCHMALEN DISPLAYS
   Die Leiste war als Pill gerundet. Sobald der Inhalt umbricht, wird sie
   zwei Zeilen hoch, und dann läuft die Fortschrittsschiene am unteren Rand
   in die Rundung hinein. Eine Pill-Rundung funktioniert nur bei einer Zeile.

   Basis ist deshalb eine Kachel mit normaler Eckrundung. Ab 900 px, wo
   alles in eine Zeile passt, wird wieder auf die Pill-Form gewechselt.
   ========================================================================= */

.scorebar {
  padding: var(--s-4);
  border-radius: var(--r-xl);
}

.scorebar__inner {
  gap: var(--s-3) var(--s-4);
  row-gap: var(--s-3);
}

.scorebar__label { flex: 0 0 auto; }

.tally { flex: 1 1 auto; justify-content: flex-start; }

.scorebar__cta {
  flex: 1 1 100%;
  justify-content: center;
}

.scorebar__rail {
  margin-top: var(--s-4);
  margin-inline: 0;
}

@media (min-width: 640px) {
  .scorebar__cta { flex: 0 0 auto; }
}

@media (min-width: 900px) {
  /* Eine Zeile, deshalb wieder Pill-Form. Die Schiene bekommt seitlich
     so viel Abstand, wie die Rundung an Breite kostet. */
  .scorebar {
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
  }

  .scorebar__inner { flex-wrap: nowrap; }
  .scorebar__rail { margin-top: var(--s-3); margin-inline: var(--s-4); }
}

/* Die erste Dimensionskachel folgt direkt auf den Sektionskopf. Ihr
   Abstand nach oben ist aber nur die Reiterhöhe, und die wird vom
   überstehenden Reiter aufgebraucht. Dadurch klebte der Reiter am
   Fließtext. Erste Kachel bekommt denselben Abstand wie alle folgenden. */
.section__head + .dim { margin-top: calc(var(--gap-block) + var(--tab-h)); }

/* Gleiches Muster überall dort, wo eine Reiter-Kachel direkt auf Text folgt */
.section__head + .has-tab,
.section__head + .svc__stack { margin-top: calc(var(--gap-block) + var(--tab-h)); }


/* =========================================================================
   40 — AMPEL AUF SCHMALEN DISPLAYS
   Dieselbe Ursache wie bei der Statusleiste: Die Fassung war als Pill
   gerundet, brach aber auf zwei Zeilen um. Eine Pill-Rundung setzt eine
   einzige Zeile voraus, sonst wirkt die Form gebrochen.

   Auf Mobil stehen die drei Schalter deshalb untereinander, jeweils über
   die volle Breite. Das ist auch beim Tippen sicherer als drei schmale
   Ziele nebeneinander. Ab 640 px, wo alle drei nebeneinander passen,
   wird auf die Zeile mit Pill-Form zurückgeschaltet.
   ========================================================================= */

.amp {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-xl);
}

.amp__opt {
  width: 100%;
  justify-content: flex-start;
  min-height: 52px;
  padding: 0 var(--s-4);
  background: var(--surface-nav);
  border-color: var(--border-card);
  border-radius: var(--r-tab);
}

.amp__opt i {
  width: 12px;
  height: 12px;
  margin-right: var(--s-1);
}

@media (min-width: 640px) {
  .amp {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: var(--s-2);
    border-radius: var(--r-pill);
  }

  .amp__opt {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    background: transparent;
    border-color: transparent;
    border-radius: var(--r-pill);
  }

  .amp__opt i { width: 10px; height: 10px; margin-right: 0; }
}

/* Laufbänder: der Umlauf verschiebt einen Track um genau seine eigene
   Breite. Ist ein Track schmaler als der Bildschirm, entsteht dahinter
   eine sichtbare Lücke. Die Tracks sind deshalb im HTML so oft wiederholt,
   dass sie über 2560 px kommen. Beim Ergänzen von Einträgen gilt: immer
   in beide Tracks derselben Reihe und nie unter diese Breite fallen. */
.wall__track,
.marquee__track,
.logos__track { min-width: max-content; }


/* =========================================================================
   41 — CASES ALS STATISCHES RASTER
   Der Drag-Strip ist raus. Drei Cases passen nebeneinander, also braucht
   es kein Ziehen und keinen Hinweis darauf. Das Raster zentriert sich
   selbst und nimmt trotzdem beliebig viele Karten auf.
   ========================================================================= */

.cases {
  display: grid;
  gap: var(--s-5);
  margin-top: calc(var(--gap-block) + var(--tab-h));
  justify-content: center;
}

.cases .case {
  flex: none;
  width: auto;
  max-width: 460px;
  margin-inline: auto;
  transform: none;
  scroll-snap-align: none;
}

@media (min-width: 640px) {
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
  }
}

@media (min-width: 1200px) {
  .cases { gap: var(--s-6); }
}


/* =========================================================================
   42 — RECHTSSEITEN
   Reiner Lesetext, deshalb schmale Spalte und keine Effekte.
   ========================================================================= */

.legal { max-width: 760px; margin-inline: auto; }

.legal h2 {
  margin-top: var(--gap-block);
  margin-bottom: var(--s-4);
  font-family: var(--f-head);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
}

.legal h3 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-2);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.legal p,
.legal li { font-size: 14px; line-height: 1.7; }

.legal p { margin-bottom: var(--s-4); }

.legal ul {
  margin-bottom: var(--s-4);
  padding-left: var(--s-5);
  list-style: disc;
}

.legal li { margin-bottom: var(--s-2); }

.legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal address {
  padding: var(--s-5);
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
}

.legal__note {
  padding: var(--s-5);
  margin-bottom: var(--s-6);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--surface);
  border: 1px dashed var(--accent-line);
  border-radius: var(--r-xl);
}

.legal__note b { color: var(--accent); }

.legal__stand {
  margin-top: var(--gap-block);
  padding-top: var(--s-5);
  font-size: 12px;
  color: var(--text-3);
  border-top: 1px solid var(--divider);
}

/* Footer hat jetzt fünf Spalten: Marke, Leistungen, Kontakt, Navigation, Newsletter */
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.3fr 0.9fr 1.1fr 0.9fr 1.2fr; }
}


/* =========================================================================
   43 — TERMINBESTÄTIGUNG
   Seite nach der Calendly-Buchung. Ihre Aufgabe ist nicht Verkauf, sondern
   dass die Person auch erscheint. Deshalb ruhiger Aufbau, viel Gewissheit,
   wenig Bewegung.
   ========================================================================= */

.done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  text-align: center;
}

.done__haken {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  font-size: 28px;
  color: var(--bg);
  background: var(--ok);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(63, 191, 111, 0.12);
}

.slot {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  width: 100%;
  max-width: 520px;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-hl);
}

.slot__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

.slot__zeit {
  font-family: var(--f-head);
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--text);
}

.slot__meta {
  font-size: 12px;
  color: var(--text-3);
}

.slot__meta b { color: var(--accent); font-weight: 700; }

/* Loom-Fläche direkt unter dem Kopf */
.loom {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
}

.loom video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.loom__wrap { position: relative; }

.loom__unter {
  margin-top: var(--s-3);
  font-size: 12px;
  text-align: center;
  color: var(--text-3);
}

/* Zeitleiste des Gesprächs */
/* Ruhiger Hinweiskasten */
.hinweis {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-tab);
}

.hinweis b { color: var(--text); }

@media (min-width: 900px) {
}


/* =========================================================================
   44 — ABLAUF ALS QUERE ZEITACHSE
   Vorher standen Zeit und Text nebeneinander, dadurch blieb links eine
   leere Spalte stehen, sobald die Zeitangabe kurz war. Jetzt läuft der
   Ablauf quer: vier Karten in einer Reihe, die Zeitangabe sitzt als
   Reiter oben, eine durchgehende Achse verbindet sie.
   ========================================================================= */

.ablauf {
  position: relative;
  display: grid;
  gap: var(--s-5);
  margin-top: calc(var(--gap-block) + var(--tab-h));
}

/* Achse: senkrecht auf Mobil, waagerecht ab 900 px */
.ablauf__achse {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-line) 70%, transparent);
  opacity: 0.5;
}

.ablauf__karte {
  position: relative;
  margin-top: 0;
  padding: var(--s-6);
  padding-left: var(--s-12);
  background: var(--surface);
  border: 1px solid var(--border-card);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-1);
}

.ablauf__punkt {
  position: absolute;
  left: 12px;
  top: var(--s-8);
  width: 14px;
  height: 14px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.ablauf__karte h3 { margin-bottom: var(--s-3); }
.ablauf__karte p { font-size: 14px; }

/* Die erste Station liegt vor dem Gespräch, deshalb der Umriss-Reiter */
.ablauf__karte .tab { left: var(--s-12); }

@media (min-width: 640px) {
  .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .ablauf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-4);
    padding-top: var(--s-8);
  }

  /* Achse dreht sich in die Waagerechte und läuft hinter den Punkten durch */
  .ablauf__achse {
    left: 12%;
    right: 12%;
    top: calc(var(--s-8) - 6px);
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-line) 12%, var(--accent) 50%, var(--accent-line) 88%, transparent);
  }

  .ablauf__karte {
    padding: var(--s-6);
    padding-top: var(--s-8);
    margin-top: 0;
  }

  .ablauf__punkt {
    left: 50%;
    top: calc(var(--s-8) * -1 + 2px);
    transform: translateX(-50%);
  }

  .ablauf__karte .tab { left: 50%; transform: translate(-50%, -100%); }
}

/* Selbst gehostetes Video: die Bedienelemente des Browsers reichen,
   nur das Vorschaubild soll die Fläche füllen. */
.loom video { background: var(--pure-black); object-fit: cover; }


/* =========================================================================
   45 — EIGENER PLAY-KNOPF ÜBER DEM VIDEO
   Ersetzt den grauen Standardknopf des Browsers durch den pinken Kreis
   der Seite. Er liegt über dem Vorschaubild und verschwindet beim Start,
   danach übernehmen die Bedienelemente des Browsers.
   ========================================================================= */

.playknopf {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-6);
  cursor: pointer;
  background: linear-gradient(180deg, var(--ink-30), var(--ink-45));
  transition: opacity var(--t-base) var(--e-out), visibility var(--t-base) linear;
}

.playknopf__kreis {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  padding-left: 6px;          /* das Dreieck sitzt sonst optisch links */
  font-size: 30px;
  line-height: 1;
  color: var(--bg);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 12px var(--accent-glow), 0 18px 40px var(--ink-45);
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}

.playknopf__text {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: 0 2px 12px var(--ink-45);
}

.playknopf:hover .playknopf__kreis {
  transform: scale(1.06);
  box-shadow: 0 0 0 16px var(--accent-glow), 0 18px 40px var(--ink-45);
}

.playknopf:active .playknopf__kreis { transform: scale(0.98); }

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

/* Nach dem Start ausblenden, aber im Baum lassen, damit ein Zurückspringen
   möglich bliebe, ohne das Markup neu aufzubauen. */
.loom[data-gestartet] .playknopf,
[data-video][data-gestartet] .playknopf {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 900px) {
  .playknopf__kreis { width: 104px; height: 104px; font-size: 36px; }
  .playknopf__text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .playknopf__kreis { transition: none; }
  .playknopf:hover .playknopf__kreis { transform: none; }
}