/* PropHunter – Startseite (Neugestaltung 22.10.2026, Produktseiten-Stil)
   Schwarze Bühne für das Produkt, sehr große Typografie, ruhige Flächen in Weiß und Hellgrau,
   Highlights als waagerechte Karten, Bento-Raster. Baut auf ph.css und site.css auf (Knöpfe, Formulare,
   MacBook-Vorführung, Städte, Rechner, Preise, FAQ). Nur auf der Startseite geladen (body.neu). */

.neu {
  --n-schwarz: #000;
  --n-dunkel-2: #161617;
  --n-dunkel-3: #1d1d1f;
  --n-grau: #f5f5f7;
  --n-text: #1d1d1f;
  --n-text-2: #6e6e73;
  --n-text-3: #86868b;
  --n-hell-2: #a1a1a6;
  --n-gold-1: #f1d9a6;
  --n-gold-2: #c9a35f;
  --n-gold-3: #9c7634;
  --n-gold-text: #8a6a2c;
  --n-radius: 30px;
  --n-ease: cubic-bezier(.16, 1, .3, 1);
  --n-abstand: clamp(104px, 12vw, 188px);
  color: var(--n-text);
  background: #fff;
}
.neu .wrap { width: min(1120px, 100% - 48px); }
@media (max-width: 700px) { .neu .wrap { width: calc(100% - 32px); } }
.neu main { display: block; }

/* ---------------------------------------------------------------- Typografie */
.neu .n-h1 { font-family: var(--font-h); font-size: clamp(56px, 9.4vw, 136px); font-weight: 760; letter-spacing: -.058em; line-height: .93; margin: 0; color: #f5f5f7; text-wrap: balance; }
.neu .n-h1-klein { font-size: clamp(44px, 6.8vw, 104px); }
.neu .n-h2 { font-family: var(--font-h); font-size: clamp(40px, 5.6vw, 80px); font-weight: 740; letter-spacing: -.048em; line-height: 1.02; margin: 0; text-wrap: balance; }
.neu .n-h2 .satz { display: inline; }
.neu .n-sub { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--n-text-2); max-width: 720px; margin: 26px 0 0; letter-spacing: -.012em; }
.neu .n-lead { font-size: clamp(19px, 1.9vw, 25px); line-height: 1.42; color: var(--n-hell-2); max-width: 760px; margin: 30px auto 0; letter-spacing: -.015em; font-weight: 450; }
.neu .n-eyebrow { display: block; font-size: clamp(16px, 1.4vw, 19px); font-weight: 650; letter-spacing: -.01em; color: var(--n-gold-text); margin-bottom: 14px; }
.neu .n-klein { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.005em; color: var(--n-text-3); margin-bottom: 12px; }
.neu .n-gold { background: linear-gradient(100deg, var(--n-gold-1) 0%, var(--n-gold-2) 42%, var(--n-gold-3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neu .n-gold-text { color: var(--n-gold-text); }
.neu .n-schwarz .n-gold-text, .neu .n-dunkel .n-gold-text { color: var(--n-gold-2); }
.neu .n-zentriert { text-align: center; margin-left: auto; margin-right: auto; }
.neu .n-zentriert-block { text-align: center; }
.neu .n-schmal { max-width: 980px; }

/* ---------------------------------------------------------------- Flächen */
.neu .n-sektion { padding: var(--n-abstand) 0; position: relative; }
.neu .n-weiss { background: #fff; }
.neu .n-grau { background: var(--n-grau); }
.neu .n-schwarz { background: var(--n-schwarz); color: #f5f5f7; }
.neu .n-schwarz .n-sub { color: var(--n-hell-2); }
.neu section[id] { scroll-margin-top: 48px; }

/* ---------------------------------------------------------------- Knöpfe und Links */
.neu .btn.gross { height: 56px; padding: 0 32px; font-size: 17px; border-radius: 999px; letter-spacing: -.01em; }
.neu .btn.orange { background: linear-gradient(180deg, #d4b06c 0%, #c6a15b 100%); color: #0b0b0b; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 30px -12px rgba(198, 161, 91, .7); transition: transform .2s var(--n-ease), box-shadow .2s, filter .2s; }
.neu .btn.orange:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 16px 36px -12px rgba(198, 161, 91, .8); }
.neu .btn.orange:active { transform: none; }
.neu .n-link-hell { color: var(--n-gold-2); font-size: 18px; font-weight: 550; text-decoration: none; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 6px; }
.neu .n-link-hell span { font-size: 22px; line-height: 1; transition: transform .2s var(--n-ease); }
.neu .n-link-hell:hover { text-decoration: underline; text-underline-offset: 4px; }
.neu .n-link-hell:hover span { transform: translateX(3px); }
.neu .n-cta { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.neu .n-cta-links { justify-content: flex-start; }
.neu .n-mikro { margin: 22px 0 0; color: var(--n-text-3); font-size: 14px; }
.neu .n-zeile-cta { margin-top: 56px; }

/* ---------------------------------------------------------------- Navigation: dunkel über dunklen Flächen, Glas über hellen */
.neu .nav { height: 52px; background: rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(0, 0, 0, .06); transition: background .35s, border-color .35s, color .35s; }
.neu .nav-in { height: 52px; width: min(1120px, 100% - 48px); }
.neu .nav .logo svg.wortmarke { height: 16px; }
.neu .nav-links { gap: 34px; }
.neu .nav-links a, .neu .nav-login { font-size: 13px; font-weight: 450; letter-spacing: 0; }
.neu .nav-cta .btn.klein { height: 30px; padding: 0 15px; font-size: 12.5px; border-radius: 999px; box-shadow: none; }
.neu .nav.dunkel { background: rgba(0, 0, 0, .66); border-bottom-color: rgba(255, 255, 255, .08); color: #f5f5f7; }
.neu .nav.dunkel .logo { color: #f5f5f7; --logo-gold: var(--n-gold-2); }
.neu .nav.dunkel .nav-links a, .neu .nav.dunkel .nav-login { color: rgba(245, 245, 247, .78); }
.neu .nav.dunkel .nav-links a:hover, .neu .nav.dunkel .nav-login:hover { color: #fff; }
.neu .nav.dunkel .nav-burger span { background: #f5f5f7; }
@media (max-width: 900px) {
  .neu.menu-auf .nav, .neu.menu-auf .nav.dunkel { background: rgba(0, 0, 0, .94); color: #fff; }
  .neu.menu-auf .nav .logo { color: #fff; }
  .neu.menu-auf .nav-burger span { background: #fff; }
  .neu .nav-mobil a { color: #f5f5f7; border-color: rgba(255, 255, 255, .1); }
  .neu .nav-mobil a:last-child { color: var(--n-gold-2); }
}

/* ---------------------------------------------------------------- Hero */
.neu .n-hero { position: relative; background: var(--n-schwarz); color: #f5f5f7; padding: clamp(120px, 12vw, 168px) 0 clamp(80px, 8vw, 120px); overflow: hidden; text-align: center; }
.neu .n-hero-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.neu .n-hero-glow { position: absolute; left: 50%; top: 58%; width: min(1400px, 150vw); height: 900px; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 163, 95, .30), rgba(201, 163, 95, .10) 45%, transparent 72%); filter: blur(10px); }
.neu .n-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 14px 8px 14px; margin-bottom: 30px; border-radius: 999px; text-decoration: none;
  background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: rgba(245, 245, 247, .86); font-size: 14px; font-weight: 500; transition: background .2s; }
.neu .n-pill:hover { background: rgba(255, 255, 255, .11); }
.neu .n-pill #liveBadge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neu .n-punkt { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 4px rgba(52, 199, 89, .18); flex: none; animation: nPuls 2.4s ease-in-out infinite; }
.neu .n-pfeil { color: var(--n-gold-2); font-size: 18px; line-height: 1; }
@keyframes nPuls { 50% { box-shadow: 0 0 0 7px rgba(52, 199, 89, .06); } }
.neu .n-hero .n-mikro { color: var(--n-text-3); }

/* MacBook auf schwarzer Bühne */
.neu .n-buehne { margin-top: clamp(64px, 7vw, 104px); }
.neu .n-buehne .mac-deckel { box-shadow: 0 0 0 1px #4a4c52, 0 0 0 2px #2a2b2f, inset 0 0 0 1px rgba(255, 255, 255, .06), 0 80px 160px -40px rgba(201, 163, 95, .28), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.neu .n-buehne .mac-boden { background: linear-gradient(180deg, #8a8c91 0%, #5c5e63 45%, #2f3034 100%); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); }
.neu .n-buehne .mac-boden i { background: linear-gradient(180deg, #3c3e42, #5c5e63); }
.neu .n-buehne .mac-tabs { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.neu .n-buehne .mac-tabs button { color: #f5f5f7; }
.neu .n-buehne .mac-tabs button span { color: var(--n-text-3); }
.neu .n-buehne .mac-tabs button.an { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.neu .n-buehne .mac-tabs button:not(.an):hover { background: rgba(255, 255, 255, .06); }
.neu .n-buehne .mac-tabs button i { background: rgba(255, 255, 255, .12); }
.neu .n-buehne .mac-hinweis { color: #6e6e73; }
/* Einstieg */
.js-bewegung .neu .n-hero-in > .n-pill, .js-bewegung .neu .n-hero-in > .n-h1, .js-bewegung .neu .n-hero-in > .n-lead,
.js-bewegung .neu .n-hero-in > .n-cta, .js-bewegung .neu .n-hero-in > .n-mikro { animation: heroRein 1s var(--n-ease) both; }
.js-bewegung .neu .n-hero-in > .n-h1 { animation-delay: .06s; }
.js-bewegung .neu .n-hero-in > .n-lead { animation-delay: .16s; }
.js-bewegung .neu .n-hero-in > .n-cta { animation-delay: .24s; }
.js-bewegung .neu .n-hero-in > .n-mikro { animation-delay: .3s; }
.js-bewegung .neu .n-hero-glow { animation: nGlow 2.2s var(--n-ease) both; }
@keyframes nGlow { from { opacity: 0; transform: translate(-50%, -40%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------------------------------------------------------------- Laufband auf Schwarz */
.neu .n-band { background: var(--n-schwarz); border-top: 1px solid rgba(255, 255, 255, .06); }
.neu .n-band .marquee { padding: 34px 0; }
.neu .n-band .ma-marke { color: #6e6e73; }
.neu .n-band .ma-marke:hover { color: #f5f5f7; }
.neu .n-band .ma-gruppe small { color: var(--n-gold-2); }

/* ---------------------------------------------------------------- Statement + Vergleich */
.neu .n-statement { padding-bottom: clamp(72px, 8vw, 120px); }
.neu .n-gross-text { font-family: var(--font-h); font-size: clamp(34px, 4.8vw, 68px); font-weight: 720; letter-spacing: -.042em; line-height: 1.08; margin: 0; color: var(--n-text); text-wrap: pretty; }
.neu .n-gross-text span { transition: color .6s; }
.neu .n-gross-text .n-hl { background: linear-gradient(100deg, #b38a43 0%, #c9a35f 50%, #8a6a2c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports (animation-timeline: view()) {
  .neu .n-gross-text span:not(.n-hl) { animation: nAufhellen linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  .neu .n-gross-text span:nth-child(2) { animation-range: entry 45% cover 52%; }
  @keyframes nAufhellen { from { color: #d2d2d7; } to { color: var(--n-text); } }
}
.neu .n-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(64px, 7vw, 104px); }
.neu .n-vs-k { border-radius: var(--n-radius); padding: clamp(34px, 4vw, 56px); }
.neu .n-vs-k h3 { font-family: var(--font-h); font-size: clamp(28px, 2.8vw, 40px); font-weight: 740; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 26px; }
.neu .n-vs-k ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.neu .n-vs-k li { position: relative; padding: 14px 0 14px 34px; font-size: 16.5px; line-height: 1.45; border-top: 1px solid rgba(0, 0, 0, .08); }
.neu .n-vs-k li::before { content: ""; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%; background-repeat: no-repeat; background-position: center; background-size: 10px 10px; }
.neu .n-vs-alt { background: var(--n-grau); }
.neu .n-vs-alt li { color: var(--n-text-2); }
.neu .n-vs-alt li::before { background-color: rgba(0, 0, 0, .06); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2L2 8' stroke='%2386868b' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.neu .n-vs-neu { background: var(--n-schwarz); color: #f5f5f7; box-shadow: 0 60px 120px -60px rgba(0, 0, 0, .55); }
.neu .n-vs-neu li { border-color: rgba(255, 255, 255, .1); color: rgba(245, 245, 247, .88); }
.neu .n-vs-neu li::before { background-color: rgba(201, 163, 95, .18); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='%23c9a35f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 860px) { .neu .n-vs { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Highlights (waagerechte Karten) */
.neu .n-kopf-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.neu .n-pfeile { display: flex; gap: 12px; }
.neu .n-pf { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .08); color: var(--n-text); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding-bottom: 3px; transition: background .2s, opacity .2s; }
.neu .n-pf:hover { background: rgba(0, 0, 0, .13); }
.neu .n-pf:disabled { opacity: .35; cursor: default; }
.neu .n-hl-spur { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  padding: 56px max(24px, calc((100vw - 1120px) / 2)) 24px; scroll-padding-inline: max(24px, calc((100vw - 1120px) / 2)); scrollbar-width: none; }
.neu .n-hl-spur::-webkit-scrollbar { display: none; }
.neu .n-hl-spur:focus-visible { outline: none; }
.neu .n-hl-karte { position: relative; flex: none; width: min(420px, 84vw); height: min(640px, 150vw); border-radius: var(--n-radius); background: #fff; overflow: hidden; scroll-snap-align: start;
  display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: transform .5s var(--n-ease), box-shadow .5s var(--n-ease); }
.neu .n-hl-karte:hover { transform: scale(1.012); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .25); }
.neu .n-hl-text { padding: 38px 36px 0; }
.neu .n-hl-text h3 { font-family: var(--font-h); font-size: clamp(26px, 2.2vw, 31px); font-weight: 740; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.neu .n-hl-text p { margin: 14px 0 0; color: var(--n-text-2); font-size: 16px; line-height: 1.5; }
.neu .n-hl-karte.n-dunkel { background: var(--n-schwarz); color: #f5f5f7; }
.neu .n-hl-karte.n-dunkel .n-hl-text p { color: var(--n-hell-2); }
.neu .n-hl-bild { position: relative; flex: 1; margin: 30px 0 0 36px; border-radius: 16px 0 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), -20px 20px 60px -30px rgba(0, 0, 0, .35); }
.neu .n-hl-karte.n-dunkel .n-hl-bild { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), -20px 20px 60px -20px rgba(201, 163, 95, .25); }
.neu .n-hl-bild { background: #f5f5f7; }
.neu .n-hl-bild img { position: absolute; left: 0; top: 0; width: 640px; height: auto; max-width: none; }
@media (max-width: 700px) { .neu .n-hl-bild img { width: 560px; } }
.neu .n-hl-mini { flex: 1; display: flex; align-items: center; padding: 30px 36px 40px; }
.neu .n-balken { width: 100%; display: flex; flex-direction: column; gap: 22px; }
.neu .n-balken span { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 14px; font-size: 15px; }
.neu .n-balken b { font-weight: 650; }
.neu .n-balken em { font-style: normal; font-family: var(--font-h); font-weight: 720; text-align: right; }
.neu .n-balken i { position: relative; height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .07); overflow: hidden; }
.neu .n-balken i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--n-gold-2), var(--n-gold-3)); }
@media (max-width: 700px) {
  .neu .n-pfeile { display: none; }
  .neu .n-hl-spur { gap: 14px; padding-top: 40px; }
  .neu .n-hl-text { padding: 30px 26px 0; }
  .neu .n-hl-bild { margin: 24px 0 0 26px; }
  .neu .n-hl-mini { padding: 24px 26px 32px; }
}

/* ---------------------------------------------------------------- Live-Zahlen */
.neu .n-zahlen-sektion { padding: clamp(96px, 10vw, 150px) 0; overflow: hidden; }
.neu .n-zahlen-sektion::before { content: ""; position: absolute; left: 50%; top: 100%; width: 1200px; height: 600px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(201, 163, 95, .16), transparent 70%); pointer-events: none; }
.neu .n-zahlen { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: clamp(56px, 6vw, 88px); }
.neu .n-zahlen[hidden] { display: none; }
.neu .n-zahlen > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 16px; border-left: 1px solid rgba(255, 255, 255, .1); }
.neu .n-zahlen > div:first-child { border-left: 0; }
.neu .n-zahlen b { font-family: var(--font-h); font-size: clamp(44px, 5.6vw, 84px); font-weight: 760; letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(180deg, #fff 0%, #d9d9de 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neu .n-zahlen span { margin-top: 12px; color: var(--n-text-3); font-size: 15px; }
@media (max-width: 760px) {
  .neu .n-zahlen { grid-template-columns: 1fr 1fr; gap: 40px 0; }
  .neu .n-zahlen > div:nth-child(3) { border-left: 0; }
}

/* ---------------------------------------------------------------- Funktionen (Bento) */
.neu .n-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(56px, 6vw, 88px); }
.neu .n-bk { border-radius: var(--n-radius); background: var(--n-grau); padding: 36px 34px; display: flex; flex-direction: column; min-height: 260px; transition: transform .5s var(--n-ease); }
.neu .n-bk:hover { transform: translateY(-4px); }
.neu .n-bk h3 { font-family: var(--font-h); font-size: 24px; font-weight: 740; letter-spacing: -.03em; line-height: 1.15; margin: auto 0 0; }
.neu .n-bk p { margin: 10px 0 0; color: var(--n-text-2); font-size: 16px; line-height: 1.5; }
.neu .n-bk-gross { grid-column: span 2; grid-row: span 2; padding: clamp(40px, 4.6vw, 64px); background: var(--n-schwarz); color: #f5f5f7; justify-content: flex-start; min-height: 540px; position: relative; overflow: hidden; }
.neu .n-bk-gross::after { content: ""; position: absolute; right: -20%; bottom: -40%; width: 80%; height: 90%; background: radial-gradient(closest-side, rgba(201, 163, 95, .28), transparent 70%); pointer-events: none; }
.neu .n-bk-gross h3 { font-size: clamp(34px, 3.8vw, 54px); letter-spacing: -.045em; line-height: 1.02; margin: 0; max-width: 520px; }
.neu .n-bk-gross p { color: var(--n-hell-2); font-size: 18px; max-width: 460px; margin-top: 18px; }
.neu .n-trichter { position: relative; z-index: 1; margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; padding-top: 48px; }
.neu .n-trichter span { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 18px 16px; border-radius: 18px; background: rgba(255, 255, 255, .07); color: var(--n-hell-2); font-size: 13.5px; }
.neu .n-trichter span:nth-child(1) { min-height: 190px; } .neu .n-trichter span:nth-child(2) { min-height: 140px; }
.neu .n-trichter span:nth-child(3) { min-height: 104px; } .neu .n-trichter span:nth-child(4) { min-height: 80px; }
.neu .n-trichter b { font-family: var(--font-h); font-size: clamp(28px, 2.6vw, 38px); font-weight: 760; letter-spacing: -.04em; color: #f5f5f7; line-height: 1; }
.neu .n-trichter span.an { background: linear-gradient(180deg, #d4b06c, #a9823c); color: rgba(0, 0, 0, .7); }
.neu .n-trichter span.an b { color: #000; }
.neu .n-ic { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); margin-bottom: 34px; }
.neu .n-ic svg { width: 26px; height: 26px; fill: none; stroke: var(--n-gold-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.neu .n-ic svg .f { fill: var(--n-gold-3); stroke: none; }
@media (max-width: 960px) {
  .neu .n-bento { grid-template-columns: 1fr 1fr; }
  .neu .n-bk-gross { grid-column: 1 / -1; grid-row: auto; min-height: 480px; }
}
@media (max-width: 600px) {
  .neu .n-bento { grid-template-columns: 1fr; gap: 14px; }
  .neu .n-bk { min-height: 0; padding: 30px 26px; }
  .neu .n-ic { margin-bottom: 24px; }
  .neu .n-trichter { grid-template-columns: 1fr 1fr; gap: 8px; }
  .neu .n-trichter span { padding: 16px 14px; font-size: 13px; border-radius: 16px; }
  .neu .n-trichter span:nth-child(n) { min-height: 96px; }
}

/* ---------------------------------------------------------------- Ablauf */
.neu .n-schritte { list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }
.neu .n-schritte li { position: relative; background: #fff; border-radius: var(--n-radius); padding: 34px 30px 36px; }
.neu .n-schritte li span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 60px;
  font-family: var(--font-h); font-size: 22px; font-weight: 760; color: #000; background: linear-gradient(180deg, #e2c487, #b99350); box-shadow: 0 10px 24px -10px rgba(169, 130, 60, .7); }
.neu .n-schritte h3 { font-family: var(--font-h); font-size: 22px; font-weight: 740; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.neu .n-schritte p { margin: 10px 0 0; color: var(--n-text-2); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 960px) { .neu .n-schritte { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .neu .n-schritte { grid-template-columns: 1fr; gap: 12px; } .neu .n-schritte li span { margin-bottom: 30px; } }

/* ---------------------------------------------------------------- Arbeitsweisen */
.neu .n-modelle { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(56px, 6vw, 88px); }
.neu .n-modell { border-radius: 24px; background: var(--n-grau); padding: 30px 30px 32px; }
.neu .n-modell b { display: block; font-family: var(--font-h); font-size: 21px; font-weight: 740; letter-spacing: -.025em; margin-bottom: 10px; }
.neu .n-modell p { margin: 0; color: var(--n-text-2); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 960px) { .neu .n-modelle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .neu .n-modelle { grid-template-columns: 1fr; gap: 12px; } }

/* ---------------------------------------------------------------- Städte (auf Grau: weiße Kacheln) */
.neu #staedte .stadt-suche { margin-top: clamp(48px, 5vw, 72px); }
.neu #staedte .stadt-suche input { background: #fff; height: 58px; font-size: 17px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.neu #staedte .stadt { background: #fff; border-radius: 22px; }
.neu #staedte .stadt:hover { background: #fff; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.neu #staedte .stadt { transition: box-shadow .4s var(--n-ease), transform .4s var(--n-ease); }

/* ---------------------------------------------------------------- Lead-Agentur auf Schwarz */
.neu .n-ag { margin-top: clamp(56px, 6vw, 88px); }
.neu .n-ag .ag-karte.alt { background: var(--n-dunkel-3); color: #f5f5f7; }
.neu .n-ag .ag-karte.alt li { color: var(--n-hell-2); border-color: rgba(255, 255, 255, .08); }
.neu .n-ag .ag-karte.alt .ag-preis b { color: #ff8a80; text-decoration-color: rgba(255, 138, 128, .45); }
.neu .n-ag .ag-karte.neu { background: #fff; color: var(--n-text); box-shadow: 0 60px 120px -60px rgba(201, 163, 95, .45); }
.neu .n-ag .ag-karte.neu small { color: var(--n-gold-text); }
.neu .n-ag .ag-karte.neu li { color: var(--n-text); border-color: rgba(0, 0, 0, .08); }
.neu .n-ag .ag-mitte { background: linear-gradient(165deg, #2a2418 0%, #15120c 100%); box-shadow: inset 0 0 0 1px rgba(201, 163, 95, .22); }
.neu .n-ag .ag-ersparnis b { background: linear-gradient(180deg, var(--n-gold-1), var(--n-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neu .n-ag .ag-ersparnis span, .neu .n-ag .ag-mitte .feld span { color: #c8b48a; }
.neu .n-ag .ag-mitte .feld b { color: #f5f5f7; }
.neu .n-ag .ag-mitte .note { color: #8f8470; }
.neu .n-ag .ag-mitte .feld input { accent-color: var(--n-gold-2); }

/* ---------------------------------------------------------------- ROI-Rechner */
.neu .rechner h2 { font-size: clamp(38px, 4.4vw, 64px); }
.neu .rechner-text .n-sub { margin-top: 24px; }
.neu .rechner-box { border-radius: var(--n-radius); background: var(--n-grau); }
.neu .rechner-erg .gross { background: #000; }
.neu .rechner-erg .gross b { background: linear-gradient(100deg, var(--n-gold-1), var(--n-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------------------------------------------------------------- Preise */
.neu #preise .n-eyebrow { margin-bottom: 14px; }
.neu .n-preise { margin-top: clamp(56px, 6vw, 88px); }
.neu .n-preise .preis { border-radius: var(--n-radius); box-shadow: 0 1px 2px rgba(0, 0, 0, .03); transition: transform .5s var(--n-ease), box-shadow .5s var(--n-ease); }
.neu .n-preise .preis:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .25); }
.neu .n-preise .preis.top { background: #000; box-shadow: 0 60px 120px -50px rgba(201, 163, 95, .55); }
.neu .n-preise .preis.top .betrag b { background: linear-gradient(100deg, var(--n-gold-1), var(--n-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.neu .n-paket, .neu .n-sitz { border-radius: var(--n-radius); }

/* ---------------------------------------------------------------- Gründer */
.neu .n-zitat { text-align: center; margin: 0 auto; }
.neu .n-zitat blockquote { margin: 0; font-family: var(--font-h); font-size: clamp(30px, 4vw, 56px); font-weight: 700; line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; }
.neu .n-zitat-name { margin-top: 40px; display: flex; flex-direction: column; gap: 4px; }
.neu .n-zitat-name b { font-size: 18px; }
.neu .n-zitat-name span { color: var(--n-text-2); font-size: 15px; }

/* ---------------------------------------------------------------- Empfehlen */
.neu .n-empf { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.neu .n-empf .n-sub { color: var(--n-hell-2); }
.neu .n-empf-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.neu .n-empf-schritte li { display: flex; gap: 20px; align-items: center; padding: 24px 26px; border-radius: 22px; background: var(--n-dunkel-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.neu .n-empf-schritte span { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-h); font-weight: 760; color: #000; background: linear-gradient(180deg, #e2c487, #b99350); }
.neu .n-empf-schritte b { font-family: var(--font-h); font-size: 19px; font-weight: 720; letter-spacing: -.02em; }
.neu .n-empf-schritte p { margin: 2px 0 0; color: var(--n-text-3); font-size: 15px; }
@media (max-width: 860px) { .neu .n-empf { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- FAQ (bestehende Bausteine, ruhiger) */
.neu #faq { background: #fff; padding: var(--n-abstand) 0; }
.neu #faq .kopf h2 { font-family: var(--font-h); font-size: clamp(40px, 5vw, 72px); font-weight: 740; letter-spacing: -.048em; line-height: 1.02; }
.neu #faq .eyebrow { font-size: clamp(16px, 1.4vw, 19px); font-weight: 650; letter-spacing: -.01em; text-transform: none; color: var(--n-gold-text); }
.neu #faq .kopf p { color: var(--n-text-2); }
.neu .faq summary { font-size: clamp(19px, 1.6vw, 23px); padding: 28px 56px 28px 0; }

/* ---------------------------------------------------------------- Schluss */
.neu .n-schluss { position: relative; background: var(--n-schwarz); color: #f5f5f7; text-align: center; padding: clamp(130px, 15vw, 220px) 0; overflow: hidden; }
.neu .n-glow-unten { top: 100%; height: 1000px; }
.neu .n-schluss-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.neu .n-haken { list-style: none; padding: 0; margin: 40px 0 0; display: flex; gap: 12px 30px; flex-wrap: wrap; justify-content: center; color: var(--n-text-3); font-size: 15px; }
.neu .n-haken li { display: flex; align-items: center; gap: 9px; }
.neu .n-haken li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: rgba(201, 163, 95, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2L8 3' fill='none' stroke='%23c9a35f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 9px 9px; }

/* ---------------------------------------------------------------- Fuß im Stil heller Produktseiten */
.neu .n-fuss { background: var(--n-grau); color: var(--n-text-2); padding: 64px 0 28px; border-top: 1px solid rgba(0, 0, 0, .06); }
.neu .n-fuss .logo { color: var(--n-text); --logo-gold: #B08A45; }
.neu .n-fuss .logo svg.wortmarke { height: 16px; }
.neu .n-fuss .fuss-in b { color: var(--n-text); font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 650; }
.neu .n-fuss .fuss-in a:not(.logo) { color: var(--n-text-2); font-size: 12.5px; }
.neu .n-fuss .fuss-in a:not(.logo):hover { color: var(--n-text); text-decoration: underline; }
.neu .n-fuss .note { color: var(--n-text-3); font-size: 12.5px; }
.neu .n-fuss .fuss-unten { border-top-color: rgba(0, 0, 0, .1); color: var(--n-text-3); font-size: 12px; margin-top: 44px; padding-top: 18px; }

/* ---------------------------------------------------------------- Bewegung (Einblenden beim Scrollen) */
.js-bewegung .neu .rein { transform: translateY(44px); transition: opacity 1.1s var(--n-ease), transform 1.2s var(--n-ease); transition-delay: var(--v, 0ms); }
.js-bewegung .neu .rein.da { transform: none; }
@supports (animation-timeline: view()) {
  .neu .n-buehne .mac { animation: nMacGross linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes nMacGross { from { transform: perspective(2400px) rotateX(10deg) scale(.94); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .neu .n-punkt { animation: none; }
  .neu .n-buehne .mac { animation: none !important; }
  .neu .n-gross-text span { animation: none !important; color: var(--n-text); }
  .neu .n-hl-karte, .neu .n-bk, .neu .preis { transition: none; }
  .js-bewegung .neu .n-hero-in > *, .js-bewegung .neu .n-hero-glow { animation: none; }
}

/* ---------------------------------------------------------------- Hero: Live-Mitteilungen neben dem MacBook */
.neu .n-live { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.neu .n-live-karte { position: absolute; width: 330px; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 20px; text-align: left;
  background: rgba(30, 30, 32, .72); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 60px -18px rgba(0, 0, 0, .8), 0 0 0 .5px rgba(0, 0, 0, .4);
  color: #f5f5f7; opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px);
  transition: opacity .7s var(--n-ease), transform .9s var(--n-ease), filter .7s var(--n-ease); }
.neu .n-live-karte.p0 { left: -3%; top: 8%; }
.neu .n-live-karte.p1 { right: -3%; top: 22%; }
.neu .n-live-karte.p2 { left: 1%; top: 44%; }
.neu .n-live-karte.p3 { right: 1%; top: 58%; }
.neu .n-live-karte.an { opacity: 1; transform: none; filter: none; }
.neu .n-live-karte.weg { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(4px); }
.neu .nl-bild { flex: none; width: 52px; height: 52px; border-radius: 12px; background: #2a2a2c center / cover no-repeat; }
.neu .nl-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.neu .nl-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.neu .nl-kopf b { color: var(--n-gold-2); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.neu .nl-kopf b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, .18); }
.neu .nl-kopf i { font-style: normal; color: var(--n-text-3); }
.neu .nl-text strong { font-size: 15px; font-weight: 650; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.neu .nl-text small { font-size: 12.5px; color: var(--n-hell-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1100px) { .neu .n-live-karte.p0, .neu .n-live-karte.p2 { left: 1%; } .neu .n-live-karte.p1, .neu .n-live-karte.p3 { right: 1%; } }
@media (max-width: 760px) {
  .neu .n-live-karte { width: min(300px, 86%); padding: 10px 12px 10px 10px; border-radius: 16px; }
  .neu .n-live-karte.p0, .neu .n-live-karte.p1, .neu .n-live-karte.p2, .neu .n-live-karte.p3 { left: 50%; right: auto; top: -44px; margin-left: calc(min(300px, 86%) / -2); }
  .neu .nl-bild { width: 42px; height: 42px; border-radius: 10px; }
  .neu .nl-text strong { font-size: 14px; }
}
.neu .n-pill .n-zahl { font-variant-numeric: tabular-nums; }
.neu .n-zahlen b { font-variant-numeric: tabular-nums; }
/* Lichtschein atmet langsam */
.js-bewegung .neu .n-hero > .n-hero-glow { animation: nGlow 2.2s var(--n-ease) both, nAtmen 9s ease-in-out 2.2s infinite; }
@keyframes nAtmen { 0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 50% { opacity: .75; transform: translate(-50%, -52%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .neu .n-live-karte { transition: none; filter: none; } .js-bewegung .neu .n-hero > .n-hero-glow { animation: none; } }

/* Highlights: App-Ansichten im iPhone-Rahmen, das Gerät taucht unten aus der Karte auf (nichts wird seitlich abgeschnitten) */
.neu .n-hl-handy { position: relative; flex: 1; display: flex; justify-content: center; margin-top: 30px; min-height: 0; }
.neu .n-hl-geraet { position: relative; flex: none; align-self: flex-start; width: 262px; padding: 9px; border-radius: 46px;
  background: linear-gradient(160deg, #3a3a3c 0%, #1c1c1e 40%, #0e0e0f 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .25), 0 40px 70px -30px rgba(0, 0, 0, .55);
  transition: transform .7s var(--n-ease); }
.neu .n-hl-geraet::before { content: ""; position: absolute; top: 19px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: 20px; background: #000; z-index: 2; }
.neu .n-hl-geraet img { display: block; width: 100%; height: auto; border-radius: 37px; background: #fff; }
.neu .n-hl-karte:hover .n-hl-geraet { transform: translateY(-8px); }
.neu .n-hl-karte.n-dunkel .n-hl-geraet { background: linear-gradient(160deg, #4a4a4e 0%, #2a2a2d 40%, #161618 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 80px -30px rgba(201, 163, 95, .35); }
@media (max-width: 700px) { .neu .n-hl-geraet { width: 236px; border-radius: 42px; } .neu .n-hl-geraet img { border-radius: 34px; } .neu .n-hl-handy { margin-top: 24px; } }

/* Verlaufsschrift: letzter Buchstabe wird bei enger Laufweite sonst rechts abgeschnitten */
.neu .n-zahlen b, .neu .n-gold, .neu .n-gross-text .n-hl, .neu .n-preise .preis.top .betrag b, .neu .rechner-erg .gross b, .neu .n-ag .ag-ersparnis b { padding-right: .08em; margin-right: -.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }