/* ==========================================================================
   123Marketing.de – Designsystem
   Weiß & Schwarz als Basis, Blau aus dem Logo als Akzent.
   Kantig: kleine Radien + abgeschrägte Ecken (clip-path).
   ========================================================================== */

:root {
  --ink: #070b14;
  --ink-2: #111827;
  --ink-soft: #4a5263;
  --muted: #7a8396;
  --line: #e5e8ef;
  --line-dark: rgba(255, 255, 255, .1);
  --bg: #ffffff;
  --bg-soft: #f4f6fa;
  --bg-dark: #05080f;
  --navy: #0f243e;
  --blue: #0086ff;
  --blue-2: #006ab4;
  --blue-light: #e8f3ff;
  --cyan: #5cc8ff;
  --grad: linear-gradient(100deg, #0086ff 0%, #006ab4 100%);
  --grad-glow: linear-gradient(100deg, #5cc8ff 0%, #0086ff 50%, #2e5bff 100%);
  --grad-accent: linear-gradient(100deg, #0086ff 0%, #1f74ff 55%, #3aa6ff 100%);
  /* Anthrazit / Chrom für Hervorhebungen und Aktionen */
  --anthra: #24272d;
  --grad-anthra: linear-gradient(135deg, #1b1d22 0%, #33373f 38%, #24272d 62%, #3d424b 100%);
  --grad-chrome: linear-gradient(120deg, #16181c 0%, #2c3037 22%, #4a4f58 40%, #262a30 58%, #3a3f47 78%, #1d2025 100%);
  --grad-chrome-text: linear-gradient(180deg, #ffffff 0%, #d5d9df 38%, #9aa1ab 52%, #e9ecf0 70%, #b7bcc4 100%);
  /* Grün für Bestell-Buttons und Aktionspreise */
  --green: #10b981;
  --green-ink: #064e3b;
  --grad-green: linear-gradient(100deg, #34d399 0%, #10b981 55%, #059669 100%);
  --grad-green-text: linear-gradient(100deg, #d9fbe8 0%, #86efac 45%, #34d399 100%);

  --f-head: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-logo: 'Montserrat', var(--f-head);

  --r: 4px;
  --cut: 14px;
  --container: 1280px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }

[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--f-head);
  font-stretch: 112%;
  font-weight: 760;
  line-height: 1.02;
  letter-spacing: -.035em;
  margin: 0;
}
h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
h2 { font-size: clamp(36px, 5.4vw, 76px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.025em; line-height: 1.1; }
p { margin: 0 0 1em; }
/* Hervorgehobene Wörter: gleiche Schrift, kursiv, Blau mit leichtem Verlauf */
.accent { font-style: italic; color: var(--blue); background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .08em; margin-right: -.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.grad-text { background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-soft); max-width: 640px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-head); font-stretch: 120%; font-weight: 700;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: currentColor; }
.section-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head.center { text-align: center; justify-items: center; }
.section-head.center .lead { margin-inline: auto; }
.section-head.split { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 40px; }
@media (max-width: 860px) { .section-head.split { grid-template-columns: 1fr; } }

/* Platzhalter-Kennzeichnung */
.ph {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase;
  color: #b45309; background: #fff7e6; border: 1px dashed #f0b44c; padding: 5px 8px; border-radius: 3px;
}
.ph-box {
  position: relative; display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(-45deg, #f4f6fa 0 12px, #eef1f6 12px 24px);
  border: 1px dashed #c9d0dc; color: var(--muted); font-size: 14px; padding: 20px;
}
.dark .ph-box { background: repeating-linear-gradient(-45deg, #0b1220 0 12px, #0e1628 12px 24px); border-color: #24304a; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 56px; padding: 0 26px; font-weight: 700; font-size: 15px; letter-spacing: .01em;
  background: var(--bg); color: var(--fg); border-radius: var(--r);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  overflow: hidden; isolation: isolate; transition: color .4s var(--ease); white-space: nowrap;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--blue);
  transform: translateY(101%); transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn .btn-ic {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 2px;
  background: var(--blue); color: #fff; transition: transform .5s var(--ease), background .4s;
}
.btn:hover .btn-ic { transform: rotate(-45deg); background: var(--ink); }
.btn-primary { --bg: var(--blue); }
.btn-primary::before { background: var(--ink); }
.btn-primary .btn-ic { background: #fff; color: var(--blue); }
.btn-primary:hover .btn-ic { background: var(--blue); color: #fff; }
.btn-light { --bg: #fff; --fg: var(--ink); }
.btn-light:hover { color: #fff; }
.btn-ghost { --bg: transparent; --fg: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); clip-path: none; }
.btn-ghost:hover { color: #fff; }
.btn-ghost::before { background: var(--ink); }
.dark .btn-ghost, .btn-ghost.on-dark { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.dark .btn-ghost::before, .btn-ghost.on-dark::before { background: #fff; }
.dark .btn-ghost:hover, .btn-ghost.on-dark:hover { color: var(--ink); }
.btn-sm { height: 44px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); }
.link-arrow svg { transition: transform .4s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 1000; background: var(--bg-dark); color: #fff;
  display: grid; place-items: center; overflow: hidden;
}
.preloader-inner { display: grid; justify-items: center; gap: 18px; }
.preloader-count {
  font: 800 clamp(80px, 16vw, 200px)/.9 var(--f-logo); letter-spacing: -.04em;
  background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: skewX(-10deg);
}
.preloader-bar { width: min(260px, 60vw); height: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.preloader-bar span { display: block; height: 100%; width: 0; background: var(--blue); }
.preloader-note { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.no-js .preloader, .preloader.is-done { display: none; }

/* ---------- Cursor ---------- */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999; mix-blend-mode: normal; }
/* Der Kreis folgt fast ohne Verzögerung, der Punkt ist der eigentliche Mauszeiger (Blau-Verlauf) */
.cursor {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid rgba(0, 134, 255, .7); border-radius: 50%;
  display: grid; place-items: center; transition: width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), background .3s, border-color .3s;
}
.cursor span { font: 700 11px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .25s; }
.cursor-dot { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--grad-glow); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 14px rgba(0, 134, 255, .65); transition: transform .25s var(--ease); }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(0, 134, 255, .12); border-color: var(--blue); }
.cursor.is-hover + .cursor-dot, .cursor-dot.is-hover { transform: scale(.7); }
.cursor.is-view { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--blue); border-color: var(--blue); }
.cursor.is-view span { opacity: 1; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label, html.has-cursor summary, html.has-cursor [role="radio"], html.has-cursor [role="switch"] { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: auto; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h);
  transition: transform .5s var(--ease), background .4s, box-shadow .4s, color .4s;
  color: #fff;
}
.header:not(.is-scrolled):not(.is-solid)::before { content: ''; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(5, 8, 15, .85), rgba(5, 8, 15, 0)); }
.header.is-scrolled { background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--line); color: var(--ink); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-solid { background: #fff; color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo { display: inline-flex; align-items: baseline; font-family: var(--f-logo); font-size: 23px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.logo b { font-weight: 800; }
.logo .l-123 { display: inline-block; transform: skewX(-12deg); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-right: 1px; padding-right: 2px; }
.logo .l-de { font-weight: 300; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative; display: inline-block; overflow: hidden; height: 22px; padding: 0 12px; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; line-height: 22px;
}
.nav a .t { display: block; transition: transform .5s var(--ease); }
.nav a .t::after { content: attr(data-text); display: block; color: var(--blue); }
.nav a:hover .t { transform: translateY(-22px); }
.nav a.is-active::before { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--blue); }

.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r);
  transition: background .3s;
}
.icon-btn:hover { background: rgba(127, 140, 160, .14); }
.cart-count {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
  transform: scale(0); transition: transform .4s var(--ease);
}
.cart-count.has-items { transform: scale(1); }
.cart-count.bump { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }
.burger { display: none; }
.burger span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px auto; transition: transform .4s var(--ease), width .4s; }
.burger span:last-child { width: 14px; margin-left: auto; margin-right: 11px; }
@media (max-width: 1100px) {
  .nav, .header-actions .btn { display: none; }
  .burger { display: grid; }
}

/* ---------- Offcanvas-Menü ---------- */
.offcanvas {
  position: fixed; inset: 0; z-index: 200; background: var(--bg-dark); color: #fff;
  display: grid; grid-template-rows: auto 1fr auto; padding: 20px var(--gutter) 32px;
  clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease), visibility 0s .8s;
}
.offcanvas.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease); }
.offcanvas-top { display: flex; justify-content: space-between; align-items: center; height: 44px; }
.offcanvas-nav { display: grid; align-content: center; gap: 2px; counter-reset: oc; }
.offcanvas-nav a {
  counter-increment: oc; display: flex; align-items: baseline; gap: 14px; overflow: hidden;
  font: 760 clamp(32px, 8vw, 64px)/1.15 var(--f-head); font-stretch: 112%; letter-spacing: -.03em;
}
.offcanvas-nav a::before { content: '0' counter(oc); font: 500 13px var(--f-body); color: var(--blue); letter-spacing: .1em; }
.offcanvas-nav a span { display: inline-block; transform: translateY(110%); transition: transform .8s var(--ease), color .3s; }
.offcanvas.is-open .offcanvas-nav a span { transform: none; }
.offcanvas-nav a:hover span { color: var(--blue); }
.offcanvas-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; color: rgba(255, 255, 255, .6); font-size: 14px; }
.offcanvas-foot a:hover { color: #fff; }

/* ==========================================================================
   HERO (dunkel) – nachgebaut nach dem Arolax-Teaser
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; background: var(--bg-dark); color: #fff; overflow: hidden;
  display: grid; grid-template-rows: 1fr auto; isolation: isolate;
}
.hero::before { /* Raster */
  content: ''; position: absolute; inset: 0; z-index: -2; opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 80%);
}
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.hero-glow.g1 { width: 620px; height: 620px; left: -220px; bottom: -260px; background: rgba(46, 91, 255, .45); }
.hero-glow.g2 { width: 520px; height: 520px; right: -140px; top: -160px; background: rgba(0, 134, 255, .35); }
.hero-glow.g3 { width: 300px; height: 300px; left: 38%; top: 30%; background: rgba(92, 200, 255, .12); }

.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding-top: calc(var(--header-h) + 40px); padding-bottom: 40px; min-height: 100%;
}
.hero-copy { position: relative; z-index: 2; max-width: 640px; }


.hero-kicker {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 760 clamp(24px, 2.8vw, 38px)/1.1 var(--f-head); font-stretch: 118%; letter-spacing: -.03em; margin-bottom: 6px;
}
.hero-sub { font: italic 700 clamp(22px, 2.4vw, 32px)/1.15 var(--f-head); font-stretch: 112%; letter-spacing: -.02em; margin: 0 0 22px; background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-right: .1em; }
.swap { position: relative; display: inline-grid; vertical-align: bottom; }
.swap > span { grid-area: 1 / 1; white-space: nowrap; }
.swap .w1 { background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.swap .w2 { color: #fff; padding: 0 .22em; background: var(--blue); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.swap .w3 { color: #fff; background: linear-gradient(#0086ff, #0086ff) left bottom / 100% .12em no-repeat; padding-bottom: .04em; }
.swap > span.is-out { opacity: 0; }
.no-js .swap .w3 { display: none; }
.no-js .swap .w2 { display: none; }
.hero-kicker .plus { color: rgba(255, 255, 255, .35); font-weight: 300; }

.hero h1 {
  font-size: clamp(38px, 4.5vw, 68px); line-height: .98; letter-spacing: -.045em; font-stretch: 106%; margin-bottom: 24px;
}
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .line > span { display: inline-block; }
.hero h1 .accent { background-image: linear-gradient(100deg, #3aa6ff 0%, #0086ff 50%, #2e6bff 100%); }
.hero-text { font-size: clamp(17px, 1.3vw, 19px); color: rgba(255, 255, 255, .72); max-width: 520px; margin-bottom: 36px; }
.hero-text strong { color: #fff; font-weight: 700; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }
.hero-ctas .btn-ghost { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.hero-ctas .btn-ghost::before { background: #fff; }
.hero-ctas .btn-ghost:hover { color: var(--ink); }

.hero-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 0; border-top: 1px solid var(--line-dark); padding-top: 24px; max-width: 600px; }
.hero-stats > div { display: flex; flex-direction: column; gap: 8px; padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--line-dark); }
.hero-stats > div:last-child { border: 0; margin: 0; padding: 0; }
.hero-stats > div > span { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, .6); max-width: 13em; min-height: 2.7em; }
.hero-stats > div { justify-content: space-between; }
.hero-stats strong { display: block; white-space: nowrap; font: 400 clamp(30px, 2.8vw, 40px)/1 var(--f-head); font-stretch: 100%; letter-spacing: -.01em; color: #fff; }
.hero-stats strong i { font-style: normal; font-weight: 300; color: var(--cyan); }

/* Rechte Seite: geneigte Wand aus Webseiten, die hoch und runter läuft */
.hero-wall-wrap {
  position: absolute; z-index: 0; top: 0; bottom: 0; right: -6vw; width: 58vw; pointer-events: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 85%, transparent 100%), linear-gradient(transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.hero-wall {
  position: absolute; inset: -30% -10% -30% 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  transform: perspective(2200px) rotateX(22deg) rotateY(-8deg) rotateZ(-16deg); transform-origin: 50% 50%;
  pointer-events: auto;
}
.wall-col { display: flex; flex-direction: column; gap: 22px; will-change: transform; }
.wall-col .track { display: flex; flex-direction: column; gap: 22px; animation: wall-up 60s linear infinite; }
.wall-col:nth-child(2) .track { animation-name: wall-down; animation-duration: 70s; }
.wall-col:nth-child(3) .track { animation-duration: 54s; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wall-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* Mini-Webseiten (rein per CSS gezeichnet) */
.mock {
  --c: var(--blue); --bgm: #fff; --tx: #0b1220;
  position: relative; aspect-ratio: 4 / 5.1; border-radius: 8px; overflow: hidden; background: var(--bgm); color: var(--tx);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), filter .6s; filter: saturate(.9) brightness(.92);
  font-family: var(--f-body); cursor: default;
}
.mock:hover { filter: none; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 2px var(--blue); }
.mock .m-nav { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; font-size: 7px; font-weight: 800; }
.mock .m-nav i { display: flex; gap: 5px; }
.mock .m-nav i b { width: 14px; height: 3px; border-radius: 2px; background: currentColor; opacity: .35; }
.mock .m-hero { padding: 6px 11px 10px; }
.mock .m-kick { font-size: 6px; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 800; margin-bottom: 4px; }
.mock .m-h { font: 800 17px/1 var(--f-head); font-stretch: 110%; letter-spacing: -.03em; margin-bottom: 6px; }
.mock .m-h em { font-style: italic; color: var(--c); }
.mock .m-p { height: 3px; border-radius: 2px; background: currentColor; opacity: .18; margin: 3px 0; }
.mock .m-p.s { width: 60%; }
.mock .m-btns { display: flex; gap: 4px; margin-top: 7px; }
.mock .m-btns b { height: 11px; width: 34px; border-radius: 2px; background: var(--c); }
.mock .m-btns b + b { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .4; }
.mock .m-img { margin: 0 11px; height: 38%; border-radius: 4px; background: var(--img, linear-gradient(135deg, var(--c), #0b1220)); position: relative; overflow: hidden; }
.mock .m-img::after { content: ''; position: absolute; width: 60%; height: 120%; right: -10%; top: -10%; background: rgba(255, 255, 255, .14); transform: rotate(18deg); }
.mock .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px 11px; }
.mock .m-cards b { aspect-ratio: 1; border-radius: 3px; background: currentColor; opacity: .08; }
.mock .m-cards b:nth-child(2) { background: var(--c); opacity: .5; }

/* Schwebende Chips */
.float-chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: rgba(17, 24, 39, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; color: #fff; font-size: 13px; line-height: 1.3;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6); pointer-events: auto;
}
.float-chip small { display: block; color: rgba(255, 255, 255, .55); font-size: 11.5px; }
.float-chip .ic { width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center; background: var(--grad); flex: none; }
.float-chip.c1 { top: 24%; left: 47%; }
.float-chip.c2 { bottom: 26%; right: 14%; }
.float-chip.c2 strong { font: 760 26px/1 var(--f-head); }
.float-chip .stars { color: #ffcd44; letter-spacing: 1px; font-size: 12px; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .7); animation: pulse 1.8s infinite; display: inline-block; margin-right: 6px; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

@keyframes spin { to { transform: rotate(360deg); } }

/* Laufband unten im Hero */
.hero-marquee { border-top: 1px solid var(--line-dark); padding: 22px 0; overflow: hidden; position: relative; z-index: 2; background: rgba(5, 8, 15, .6); backdrop-filter: blur(6px); }
.marquee { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-group { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.marquee-group span { font: 700 clamp(17px, 1.6vw, 22px)/1 var(--f-head); font-stretch: 110%; color: rgba(255, 255, 255, .55); white-space: nowrap; transition: color .3s; }
.marquee-group span:hover { color: #fff; }
.marquee-group i { color: var(--blue); font-style: normal; font-size: 20px; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1100px) {
  .hero { display: flex; flex-direction: column; }
  .hero-grid { order: 1; }
  .hero-wall-wrap { order: 2; }
  .hero-marquee { order: 3; }
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 0; }
  .hero-copy { max-width: 720px; }
  .hero-wall-wrap { position: relative; right: auto; width: auto; height: 520px; margin: 0 calc(var(--gutter) * -1); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
  .hero-wall { inset: -40% -20%; }
  .float-chip.c1 { top: 16%; left: 6%; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hero-stats > div { padding-right: 12px; margin-right: 12px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .hero-wall-wrap { height: 420px; }
  .hero-wall { grid-template-columns: repeat(3, 160px); justify-content: center; }
  .float-chip.c2 { display: none; }
}

/* ==========================================================================
   Allgemeine Sektionen (hell)
   ========================================================================== */
.section { position: relative; padding: clamp(80px, 11vw, 160px) 0; }
.section.soft { background: var(--bg-soft); }
.section.dark { background: var(--bg-dark); color: #fff; }
.section.dark .lead { color: rgba(255, 255, 255, .66); }
.section.tight { padding: clamp(60px, 7vw, 100px) 0; }

/* Reveal-Hilfen (GSAP setzt Startwerte; ohne JS sichtbar) */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > span { display: inline-block; will-change: transform; }

/* --- Statement / Aufforderung --- */
.statement { text-align: center; }
.statement h2 { font-size: clamp(40px, 7vw, 112px); line-height: .98; max-width: 1150px; margin: 0 auto 36px; }
.statement h2 .neu { display: inline-block; position: relative; color: var(--muted); }
.statement h2 .neu::after { content: ''; position: absolute; left: -2%; right: -2%; top: 52%; height: .09em; background: var(--blue); transform: scaleX(var(--strike, 1)); transform-origin: left; }
.statement .chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 36px 0 44px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 40px; font-weight: 600; font-size: 14.5px; background: #fff; }
.chip svg { color: var(--green); }

/* --- Angebote (3 Kernangebote) --- */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.offer {
  position: relative; display: flex; flex-direction: column; padding: 34px 30px 30px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  transition: box-shadow .6s var(--ease), border-color .4s;
}
/* Kein transform-Hover: würde sich mit der GSAP-Einblendung beißen */
.offer:hover { box-shadow: 0 40px 80px -40px rgba(7, 11, 20, .35); border-color: #cfd6e2; }
.offer.featured { background: var(--ink); color: #fff; border-color: var(--ink); }
.offer.featured .offer-list li { color: rgba(255, 255, 255, .8); border-color: var(--line-dark); }
.offer.featured .offer-for, .offer.featured .price small { color: rgba(255, 255, 255, .6); }
.offer-tag { position: absolute; top: 18px; right: 40px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--blue); color: #fff; padding: 6px 10px; border-radius: 2px; }
.offer-num { font: 700 13px var(--f-head); font-stretch: 120%; color: var(--blue); letter-spacing: .14em; margin-bottom: 18px; }
.offer h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 10px; }
.offer-for { color: var(--ink-soft); font-size: 15.5px; min-height: 3.2em; }
.offer-visual { height: 170px; margin: 18px 0 22px; border-radius: var(--r); background: var(--bg-soft); position: relative; overflow: hidden; }
.offer.featured .offer-visual { background: #0e1424; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 4px; }
.price .from { font-size: 14px; font-weight: 700; color: var(--muted); }
.price strong { font: 780 clamp(40px, 4vw, 54px)/1 var(--f-head); font-stretch: 108%; letter-spacing: -.04em; }
.price small { font-size: 13.5px; color: var(--muted); }
.price-monthly { font-size: 14px; font-weight: 600; color: var(--blue); margin-bottom: 20px; }
.offer-list { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 0; }
.offer-list li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.offer-list li svg { flex: none; color: var(--green); margin-top: 4px; }
.offer-ctas { margin-top: auto; display: grid; gap: 10px; }
.offer.featured .btn-ghost { --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.offer.featured .btn-ghost::before { background: #fff; }
.offer.featured .btn-ghost:hover { color: var(--ink); }
@media (max-width: 1000px) { .offers { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .offer.featured { order: -1; } }
.vat-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 28px; }

/* Mini-Motion in Angebots-Karten */
.ov-relaunch .old, .ov-relaunch .new { position: absolute; top: 22px; bottom: 22px; width: 42%; border-radius: 4px; }
.ov-relaunch .old { left: 6%; background: #dfe3ea; filter: grayscale(1); }
.ov-relaunch .old::before { content: 'ALT'; position: absolute; top: 8px; left: 8px; font: 800 9px var(--f-body); letter-spacing: .1em; color: #8a93a3; }
.ov-relaunch .old i, .ov-relaunch .new i { position: absolute; left: 10%; right: 10%; height: 6px; border-radius: 2px; background: #c3c9d4; }
.ov-relaunch .old i:nth-child(1) { top: 30%; } .ov-relaunch .old i:nth-child(2) { top: 45%; right: 35%; } .ov-relaunch .old i:nth-child(3) { top: 60%; height: 22%; }
.ov-relaunch .new { right: 6%; background: var(--ink); overflow: hidden; }
.ov-relaunch .new::before { content: 'NEU'; position: absolute; top: 8px; left: 8px; font: 800 9px var(--f-body); letter-spacing: .1em; color: var(--blue); }
.ov-relaunch .new i { background: rgba(255, 255, 255, .2); }
.ov-relaunch .new i:nth-child(1) { top: 28%; height: 12px; background: #fff; right: 25%; } .ov-relaunch .new i:nth-child(2) { top: 48%; right: 45%; background: var(--blue); height: 10px; } .ov-relaunch .new i:nth-child(3) { top: 64%; height: 24%; background: var(--grad); }
.ov-relaunch .arrow { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; z-index: 2; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }
.ov-relaunch .new { animation: newGlow 3s ease-in-out infinite; }
@keyframes newGlow { 50% { box-shadow: 0 0 0 3px rgba(0, 134, 255, .5), 0 10px 30px rgba(0, 134, 255, .35); } }

.ov-starter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px; }
.ov-starter b {
  display: grid; place-items: center; border-radius: 4px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .9);
  font: 700 10px var(--f-body); letter-spacing: .04em; text-align: center; padding: 4px;
  animation: tilePop 4.8s var(--ease) infinite; animation-delay: calc(var(--i) * .3s);
}
.ov-starter b svg { color: var(--cyan); margin-bottom: 4px; }
@keyframes tilePop { 0%, 60%, 100% { background: rgba(255, 255, 255, .06); transform: none; } 10% { background: var(--blue); transform: translateY(-4px); } 25% { background: rgba(255, 255, 255, .06); transform: none; } }

.ov-web .browser { position: absolute; inset: 18px 22px; border-radius: 6px; background: #fff; box-shadow: 0 10px 30px -10px rgba(7, 11, 20, .25); overflow: hidden; }
.ov-web .bar { height: 16px; background: #eef1f6; display: flex; gap: 4px; align-items: center; padding: 0 7px; }
.ov-web .bar i { width: 5px; height: 5px; border-radius: 50%; background: #c7ceda; }
.ov-web .blk { position: absolute; left: 10%; border-radius: 2px; background: #e4e8ef; animation: build 5s var(--ease) infinite; transform-origin: left; }
.ov-web .blk.b1 { top: 30%; width: 55%; height: 12px; background: var(--ink); }
.ov-web .blk.b2 { top: 48%; width: 40%; height: 6px; animation-delay: .25s; }
.ov-web .blk.b3 { top: 62%; width: 26%; height: 14px; background: var(--blue); animation-delay: .5s; }
.ov-web .blk.b4 { top: 26%; left: 70%; width: 20%; height: 52%; background: var(--grad); animation-delay: .7s; }
@keyframes build { 0% { transform: scaleX(0); opacity: 0; } 15%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.ov-web .clicker { position: absolute; top: 66%; left: 30%; width: 16px; height: 16px; animation: clickMove 5s var(--ease) infinite; }
@keyframes clickMove { 0%, 30% { transform: translate(60px, 30px); opacity: 0; } 45% { transform: none; opacity: 1; } 50% { transform: scale(.8); } 55%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* --- Bento: Starterpaket-Inhalt --- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(220px, auto); gap: 16px; }
.tile {
  position: relative; grid-column: span 4; padding: 28px; border-radius: var(--r); background: #fff; border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; transition: border-color .4s, transform .6s var(--ease);
}
.tile:hover { border-color: var(--blue); transform: translateY(-4px); }
.tile h3 { font-size: 22px; margin-bottom: 6px; }
.tile p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.tile .t-num { position: absolute; top: 22px; right: 24px; font: 700 12px var(--f-head); font-stretch: 120%; color: var(--muted); letter-spacing: .12em; }
.tile .t-art { flex: 1; position: relative; margin: -4px -4px 18px; min-height: 120px; }
.tile.w8 { grid-column: span 8; }
.tile.w6 { grid-column: span 6; }
.tile.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.tile.dark p { color: rgba(255, 255, 255, .65); }
.tile.blue { background: var(--blue); color: #fff; border-color: var(--blue); }
.tile.blue p { color: rgba(255, 255, 255, .85); }
@media (max-width: 1000px) { .tile, .tile.w8, .tile.w6 { grid-column: span 6; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .tile, .tile.w8, .tile.w6 { grid-column: auto; } }

/* Logo-Konstruktion */
.art-logo { display: grid; place-items: center; }
.art-logo svg { width: 150px; height: 150px; overflow: visible; }
.art-logo .grid-l { stroke: #d6dce7; stroke-width: 1; fill: none; }
.art-logo .draw { fill: none; stroke: var(--blue); stroke-width: 3; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 4s var(--ease) infinite; }
.art-logo .fillin { fill: var(--ink); opacity: 0; animation: fillin 4s var(--ease) infinite; }
@keyframes draw { 50%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fillin { 0%, 45% { opacity: 0; } 60%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Brandkit */
.art-kit { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.art-kit .sw { flex: 1; min-width: 60px; border-radius: 4px; display: flex; align-items: flex-end; padding: 8px; font: 700 10px var(--f-body); letter-spacing: .05em; transition: flex .6s var(--ease); }
.art-kit .sw:hover { flex: 2; }
.art-kit .type { flex-basis: 100%; display: flex; align-items: baseline; gap: 16px; border-top: 1px solid var(--line-dark); padding-top: 12px; }
.art-kit .type b { font: 800 46px/1 var(--f-head); font-stretch: 120%; }
.art-kit .type i { font: italic 800 46px/1 var(--f-head); font-stretch: 120%; color: var(--cyan); }
.art-kit .type span { font-size: 12px; color: rgba(255, 255, 255, .5); }

/* Visitenkarte */
.art-card { perspective: 900px; display: grid; place-items: center; }
.art-card .card3d { width: 190px; height: 110px; position: relative; transform-style: preserve-3d; animation: flip 6s var(--ease) infinite; }
.art-card .face { position: absolute; inset: 0; border-radius: 6px; backface-visibility: hidden; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 16px 30px -12px rgba(7, 11, 20, .35); }
.art-card .front { background: var(--ink); color: #fff; }
.art-card .front .logo { font-size: 14px; }
.art-card .back { background: #fff; border: 1px solid var(--line); transform: rotateY(180deg); font-size: 9px; color: var(--ink-soft); }
.art-card .back b { font-size: 12px; color: var(--ink); }
@keyframes flip { 0%, 40% { transform: rotateY(-12deg) rotateX(8deg); } 50%, 90% { transform: rotateY(168deg) rotateX(8deg); } 100% { transform: rotateY(348deg) rotateX(8deg); } }

/* Flyer */
.art-flyer { display: grid; place-items: center; }
.art-flyer .sheet { width: 96px; height: 134px; background: #fff; border-radius: 3px; position: absolute; box-shadow: 0 14px 30px -12px rgba(7, 11, 20, .35); padding: 10px; transition: transform .6s var(--ease); }
.art-flyer .sheet:nth-child(1) { transform: rotate(-10deg) translateX(-34px); background: var(--bg-soft); }
.art-flyer .sheet:nth-child(2) { transform: rotate(8deg) translateX(34px); background: var(--blue-light); }
.art-flyer .sheet:nth-child(3) { background: var(--ink); color: #fff; z-index: 2; }
.tile:hover .art-flyer .sheet:nth-child(1) { transform: rotate(-16deg) translateX(-58px); }
.tile:hover .art-flyer .sheet:nth-child(2) { transform: rotate(14deg) translateX(58px); }
.art-flyer .sheet b { display: block; font: 800 15px/1 var(--f-head); font-stretch: 115%; margin-bottom: 6px; }
.art-flyer .sheet i { display: block; height: 40px; background: var(--grad); border-radius: 2px; margin-bottom: 6px; }
.art-flyer .sheet s { display: block; height: 3px; background: currentColor; opacity: .25; margin: 4px 0; text-decoration: none; }

/* Social-Posts-Raster */
.art-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.art-posts b { aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, .18); position: relative; overflow: hidden; animation: postIn 6s var(--ease) infinite; animation-delay: calc(var(--i) * .25s); }
.art-posts b:nth-child(3n+1) { background: #fff; }
.art-posts b:nth-child(4n+2) { background: var(--ink); }
.art-posts b::after { content: '♥'; position: absolute; right: 4px; bottom: 2px; font-size: 10px; color: #ff4d7d; opacity: 0; animation: heart 6s var(--ease) infinite; animation-delay: calc(var(--i) * .25s + .6s); }
@keyframes postIn { 0% { transform: scale(.6); opacity: 0; } 10%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes heart { 0%, 10% { opacity: 0; transform: translateY(6px); } 20%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Profil-/Bio-Einrichtung */
.art-profile { display: grid; place-items: center; }
.art-profile .pf { width: 100%; max-width: 280px; background: var(--bg-soft); border-radius: 8px; padding: 14px; display: grid; grid-template-columns: 50px 1fr; gap: 6px 12px; align-items: center; }
.art-profile .av { width: 50px; height: 50px; border-radius: 50%; background: var(--grad); grid-row: span 2; display: grid; place-items: center; color: #fff; font: 800 15px var(--f-logo); }
.art-profile .nm { font-weight: 800; font-size: 14px; }
.art-profile .st { display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.art-profile .st b { color: var(--ink); }
.art-profile .bio { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); line-height: 1.45; }
.art-profile .lk { grid-column: 1 / -1; font-size: 12px; font-weight: 700; color: var(--blue); display: flex; align-items: center; gap: 6px; }
.art-profile .typing::after { content: '|'; animation: blink 1s steps(1) infinite; color: var(--blue); }
@keyframes blink { 50% { opacity: 0; } }

/* --- Verkaufsstarke Webseite --- */
.sell { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
@media (max-width: 960px) { .sell { grid-template-columns: 1fr; } }
.sell-points { display: grid; gap: 0; margin-top: 36px; }
.sell-point { display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.sell-point:last-child { border-bottom: 1px solid var(--line); }
.sell-point .n { width: 52px; height: 52px; display: grid; place-items: center; background: var(--blue-light); color: var(--blue); border-radius: var(--r); }
.sell-point h3 { font-size: 21px; margin-bottom: 4px; }
.sell-point p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

.phone-stage { position: relative; height: 640px; display: grid; place-items: center; }
.phone {
  position: relative; width: 290px; height: 590px; border-radius: 44px; background: var(--ink); padding: 12px;
  box-shadow: 0 50px 100px -30px rgba(7, 11, 20, .5), inset 0 0 0 2px #2a3242;
}
.phone::before { content: ''; position: absolute; top: 22px; left: 50%; width: 90px; height: 24px; margin-left: -45px; border-radius: 20px; background: #000; z-index: 3; }
.phone-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #fff; }
.phone-scroll { position: absolute; inset: 0 0 auto; padding: 56px 18px 18px; will-change: transform; }
.ps-kick { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); font-weight: 800; margin-bottom: 8px; }
.ps-h { font: 780 30px/1 var(--f-head); font-stretch: 110%; letter-spacing: -.04em; margin-bottom: 10px; }
.ps-h em { font-style: italic; color: var(--blue); }
.ps-p { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.ps-btn { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 800; margin-bottom: 8px; position: relative; overflow: hidden; }
.ps-btn.alt { background: #25d366; }
.ps-img { height: 150px; border-radius: 8px; background: linear-gradient(135deg, #0f243e, #0086ff); margin: 16px 0; position: relative; }
.ps-trust { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-soft); padding: 10px; background: var(--bg-soft); border-radius: 6px; margin-bottom: 14px; }
.ps-trust b { color: #f5a400; letter-spacing: 1px; }
.ps-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ps-cards div { height: 70px; border-radius: 6px; background: var(--bg-soft); }
.ps-cards div:nth-child(2) { background: var(--blue-light); }
.phone-tap { position: absolute; z-index: 4; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 134, 255, .25); border: 2px solid var(--blue); opacity: 0; pointer-events: none; }
.conv-chip {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-radius: 10px;
  box-shadow: 0 20px 50px -15px rgba(7, 11, 20, .3); border: 1px solid var(--line); font-size: 13px; font-weight: 600;
}
.conv-chip small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; }
.conv-chip strong { font: 780 22px/1 var(--f-head); color: var(--blue); }
.conv-chip.a { top: 210px; right: calc(50% + 118px); }
.conv-chip.b { bottom: 90px; left: calc(50% + 112px); }
.conv-chip.c { bottom: 170px; right: calc(50% + 118px); }
.conv-chip .ic { width: 36px; height: 36px; border-radius: 8px; background: var(--blue-light); color: var(--blue); display: grid; place-items: center; }
@media (max-width: 760px) { .phone-stage { height: 600px; } .conv-chip.a { right: auto; left: 0; top: 120px; } .conv-chip.b { left: auto; right: 0; bottom: 60px; } .conv-chip.c { display: none; } }

/* --- Agentisch: 15 vernetzte Agenten auf einer digitalen Welle --- */
.agents-sec { overflow: hidden; }
.agent-net { position: relative; }
.ag-wave { position: absolute; left: -10%; width: 120%; top: 6%; height: 88%; pointer-events: none; opacity: .55; }
.ag-wave path { fill: none; stroke: rgba(0, 134, 255, .35); stroke-width: 1.5; stroke-dasharray: 6 10; animation: agWave 14s linear infinite; }
.ag-wave path:nth-child(2) { stroke: rgba(92, 200, 255, .22); animation-duration: 18s; animation-direction: reverse; }
.ag-wave path:nth-child(3) { stroke: rgba(46, 91, 255, .25); animation-duration: 22s; }
@keyframes agWave { to { stroke-dashoffset: -320; } }
.ag-stage { position: relative; aspect-ratio: 5 / 3; max-height: 760px; width: 100%; margin: 0 auto; }
.ag-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ag-ring { fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: 1.2; }
.ag-ring-flow { fill: none; stroke: #5cc8ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 40 260; animation: agRing 9s linear infinite; opacity: .8; }
@keyframes agRing { to { stroke-dashoffset: -3000; } }
.ag-spoke { fill: none; stroke: rgba(0, 134, 255, .18); stroke-width: 1.2; }
.ag-flow { fill: none; stroke: #34d399; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 18 600; stroke-dashoffset: 618; animation: agFlow 4.5s cubic-bezier(.5, 0, .3, 1) infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes agFlow { 0% { stroke-dashoffset: 618; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.ag-node { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 210px; padding: 9px 12px 9px 9px; transform: translate(-50%, -50%); border-radius: var(--r); background: rgba(14, 22, 40, .92); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7); backdrop-filter: blur(6px); animation: agBob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); transition: border-color .3s, background .3s; }
.ag-node:hover { border-color: var(--blue); background: rgba(0, 60, 120, .9); }
.ag-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--grad-glow); color: #fff; }
.ag-ic svg { color: #fff !important; }
.ag-node b { display: block; font: 700 13.5px/1.15 var(--f-body); color: #fff; white-space: nowrap; }
.ag-node small { display: block; font-size: 11.5px; line-height: 1.25; color: rgba(255, 255, 255, .55); }
@keyframes agBob { 50% { transform: translate(-50%, calc(-50% - 6px)); } }
.ag-core { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 22px 28px; text-align: center; background: var(--grad-chrome); border: 1px solid #5a606a; box-shadow: 0 0 0 10px rgba(52, 211, 153, .08), 0 0 60px rgba(0, 134, 255, .35); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.ag-core::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(52, 211, 153, .25), transparent 70%); animation: corePulse2 2.6s ease-in-out infinite; }
@keyframes corePulse2 { 50% { opacity: .3; } }
.ag-core > * { position: relative; }
.ag-steps { display: flex; gap: 6px; }
.ag-steps i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font: 800 14px var(--f-head); font-style: normal; color: #fff; background: var(--grad-green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.ag-core b { font: 760 clamp(17px, 1.8vw, 22px)/1.1 var(--f-head); font-stretch: 110%; }
.ag-core small { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.agents-sec .agent-benefits { grid-template-columns: repeat(4, 1fr); margin-top: 40px; }
@media (max-width: 1100px) { .ag-node small { display: none; } .ag-node { padding: 6px 9px 6px 6px; } .ag-ic { width: 28px; height: 28px; } }
@media (max-width: 860px) {
  .ag-stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ag-lines { display: none; }
  .ag-node, .ag-core { position: relative; left: auto !important; top: auto !important; transform: none; animation: none; max-width: none; width: auto; }
  .ag-node small { display: block; }
  .ag-node b { white-space: normal; }
  .ag-core { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .agents-sec .agent-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .ag-stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ag-node, .ag-flow, .ag-ring-flow, .ag-wave path, .ag-core::before { animation: none !important; } .ag-flow { opacity: 0; } }
.agent-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.agent-benefits div { padding: 22px; border: 1px solid var(--line-dark); border-radius: var(--r); background: rgba(255, 255, 255, .02); transition: border-color .4s, background .4s; }
.agent-benefits div:hover { border-color: var(--blue); background: rgba(0, 134, 255, .06); }
.agent-benefits strong { display: block; font: 760 34px/1 var(--f-head); font-stretch: 110%; color: var(--blue); margin-bottom: 8px; }
.agent-benefits span { font-size: 14.5px; color: rgba(255, 255, 255, .7); }
@media (max-width: 480px) { .agent-benefits { grid-template-columns: 1fr; } }

/* --- Vergleich früher/heute --- */
.compare-top { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 900px) { .compare-top { grid-template-columns: 1fr; } }
.cmp-card { padding: clamp(26px, 3vw, 40px); border-radius: var(--r); border: 1px solid var(--line); background: #fff; position: relative; overflow: hidden; }
.cmp-card.then { background: var(--bg-soft); }
.cmp-card.now { background: var(--ink); color: #fff; border-color: var(--ink); }
.cmp-card .lbl { font: 700 12px var(--f-head); font-stretch: 120%; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
.cmp-card.now .lbl { color: var(--cyan); }
.cmp-card .big { font: 780 clamp(48px, 6vw, 84px)/1 var(--f-head); font-stretch: 108%; letter-spacing: -.045em; margin-bottom: 8px; }
.cmp-card.then .big { color: var(--ink-soft); }
.cmp-card .calc { font-size: 15px; color: var(--ink-soft); margin-bottom: 24px; }
.cmp-card.now .calc { color: rgba(255, 255, 255, .65); }
.hours { display: grid; gap: 10px; }
.hour-row { display: grid; grid-template-columns: 150px 1fr 54px; gap: 12px; align-items: center; font-size: 14px; }
.hour-row .track { display: block; height: 10px; background: #e3e7ee; border-radius: 1px; overflow: hidden; }
.hour-row .fill { display: block; height: 100%; width: var(--w); background: #9aa3b4; transform-origin: left; }
.cmp-card.now .hour-row .track { background: rgba(255, 255, 255, .08); }
.cmp-card.now .hour-row .fill { background: var(--grad-glow); }
.hour-row b { text-align: right; font-weight: 700; }
@media (max-width: 480px) { .hour-row { grid-template-columns: 110px 1fr 44px; font-size: 13px; } }
.save-badge { position: absolute; top: 26px; right: 26px; background: var(--blue); color: #fff; font: 800 15px/1 var(--f-head); padding: 10px 12px; border-radius: 2px; transform: rotate(4deg); }

.cmp-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 15px; }
.cmp-table th, .cmp-table td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font: 700 13px var(--f-head); font-stretch: 115%; letter-spacing: .1em; text-transform: uppercase; background: var(--bg-soft); }
.cmp-table thead th.us { background: var(--blue); color: #fff; }
.cmp-table td.us { background: #f5faff; font-weight: 600; }
.cmp-table td .bad, .cmp-table td .good { display: inline-flex; gap: 8px; align-items: flex-start; }
.cmp-table td .bad svg { color: #e5484d; flex: none; margin-top: 3px; }
.cmp-table td .good svg { color: var(--green); flex: none; margin-top: 3px; }
.cmp-table tbody tr { transition: background .3s; }
.cmp-table tbody tr:hover td { background: #fafbfd; }
.cmp-table tbody tr:hover td.us { background: #eaf4ff; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
@media (max-width: 720px) {
  .cmp-table thead { display: none; }
  .cmp-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .cmp-table td { border: 0; padding: 12px 14px; font-size: 14px; }
  .cmp-table td:first-child { grid-column: 1 / -1; font-weight: 800; padding-bottom: 0; background: none !important; }
  .cmp-table td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
}
.wp-alert { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.wp-alert div { padding: 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); border-left: 3px solid #e5484d; }
.wp-alert strong { display: block; font: 780 38px/1 var(--f-head); font-stretch: 108%; letter-spacing: -.03em; margin-bottom: 6px; }
.wp-alert span { font-size: 14.5px; color: var(--ink-soft); }
.wp-alert small, .src { display: block; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
@media (max-width: 800px) { .wp-alert { grid-template-columns: 1fr; } }

/* --- Rebranding Vorher/Nachher --- */
.rebrand { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 960px) { .rebrand { grid-template-columns: 1fr; } }
.ba { position: relative; aspect-ratio: 4 / 3.2; border-radius: var(--r); overflow: hidden; user-select: none; touch-action: pan-y; --pos: 50%; background: var(--ink); }
.ba-side { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; }
.ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-label { position: absolute; top: 16px; z-index: 3; font: 800 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; padding: 7px 10px; border-radius: 2px; }
.ba-before .ba-label { left: 16px; background: #d4d4d4; color: #555; }
.ba-after .ba-label { right: 16px; background: var(--blue); color: #fff; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; z-index: 4; cursor: ew-resize; }
.ba-handle::after { content: '⟷'; position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); font-size: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 5; cursor: ew-resize; margin: 0; }
/* alte Seite */
.old-site { background: #f2efe6; color: #333; font-family: 'Times New Roman', serif; padding: 0; }
.old-site .os-top { background: #6b7a5a; color: #fff; padding: 14px 18px; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.old-site .os-top small { font-size: 11px; font-weight: normal; text-decoration: underline; }
.old-site .os-body { padding: 18px; display: grid; grid-template-columns: 1fr 120px; gap: 14px; align-content: start; }
.old-site h4 { font: bold 22px 'Times New Roman', serif; color: #4a5b38; margin: 0 0 8px; letter-spacing: 0; }
.old-site p { font-size: 13px; line-height: 1.4; margin: 0 0 8px; }
.old-site .os-img { background: #c9c3b0; height: 110px; display: grid; place-items: center; font-size: 11px; color: #777; }
.old-site .os-btn { display: inline-block; background: #ddd; border: 2px outset #eee; padding: 4px 10px; font-size: 12px; color: #000; }
.old-site .os-counter { font-size: 10px; color: #999; margin-top: 10px; }
/* neue Seite */
.new-site { background: #fff; color: var(--ink); }
.new-site .ns-top { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; font: 800 15px var(--f-head); font-stretch: 115%; }
.new-site .ns-top span { display: inline-flex; gap: 14px; font: 600 11px var(--f-body); color: var(--ink-soft); }
.new-site .ns-top b { background: var(--blue); color: #fff; padding: 7px 10px; font: 700 11px var(--f-body); border-radius: 2px; }
.new-site .ns-body { padding: 10px 22px 22px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: center; }
.new-site .ns-h { font: 780 clamp(24px, 3vw, 38px)/1 var(--f-head); font-stretch: 110%; letter-spacing: -.04em; margin-bottom: 10px; }
.new-site .ns-h em { font-style: italic; color: var(--blue); }
.new-site .ns-p { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 12px; }
.new-site .ns-cta { display: inline-flex; gap: 8px; }
.new-site .ns-cta i { font-style: normal; background: var(--ink); color: #fff; padding: 9px 12px; font-size: 11px; font-weight: 700; border-radius: 2px; }
.new-site .ns-cta i + i { background: #25d366; }
.new-site .ns-img { aspect-ratio: 1; border-radius: 6px; background: var(--grad); position: relative; overflow: hidden; }
.new-site .ns-img::before { content: '★ 4,9 · 128 Bewertungen'; position: absolute; left: 8px; bottom: 8px; background: #fff; color: var(--ink); font: 700 10px var(--f-body); padding: 6px 8px; border-radius: 4px; }
.growth { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.growth div { padding: 18px; border-radius: var(--r); background: var(--bg-soft); }
.growth strong { display: block; font: 780 clamp(22px, 2.6vw, 30px)/1 var(--f-head); white-space: nowrap; font-stretch: 108%; color: var(--blue); }
.growth span { font-size: 13px; color: var(--ink-soft); }
.customers-viz { display: flex; align-items: flex-end; gap: 6px; height: 120px; margin-top: 26px; }
.customers-viz i { flex: 1; background: #dfe4ec; border-radius: 2px 2px 0 0; height: var(--h); transform-origin: bottom; }
.customers-viz i.up { background: var(--grad-glow); }

/* --- Statistiken --- */
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat { padding: clamp(26px, 3vw, 44px); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; transition: background .4s; }
.stat::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.stat:hover::before { transform: scaleX(1); }
.stat:hover { background: var(--bg-soft); }
.stat .num { font: 780 clamp(52px, 6vw, 88px)/1 var(--f-head); font-stretch: 106%; letter-spacing: -.05em; margin-bottom: 14px; display: flex; align-items: baseline; }
.stat .num i { font-style: normal; color: var(--blue); font-size: .55em; margin-left: 4px; letter-spacing: -.02em; }
.stat p { font-size: 16px; color: var(--ink-soft); margin: 0; max-width: 300px; }
.stat p strong { color: var(--ink); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: 1fr; } }

/* --- Leistungen --- */
.services { display: grid; gap: 0; border-top: 1px solid var(--line-dark); }
.service {
  display: grid; grid-template-columns: 80px 1.1fr 1.4fr 56px; gap: 24px; align-items: center; padding: 30px 0;
  border-bottom: 1px solid var(--line-dark); position: relative; transition: padding .5s var(--ease); cursor: default;
}
.service::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--blue); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: 0; }
.service:hover::before { transform: scaleY(1); }
.service > * { position: relative; z-index: 1; }
.service .s-num { font: 700 14px var(--f-head); font-stretch: 120%; color: rgba(255, 255, 255, .4); letter-spacing: .1em; }
.service h3 { font-size: clamp(24px, 3vw, 42px); }
.service p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 15.5px; }
.service:hover p, .service:hover .s-num { color: rgba(255, 255, 255, .9); }
.service .s-go { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s, color .4s; }
.service:hover .s-go { background: #fff; color: var(--blue); transform: rotate(-45deg); border-color: #fff; }
.service-preview { position: fixed; top: 0; left: 0; width: 260px; height: 180px; border-radius: var(--r); pointer-events: none; z-index: 50; opacity: 0; transform: scale(.6); overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
@media (max-width: 800px) { .service { grid-template-columns: 1fr auto; gap: 8px 16px; } .service .s-num { grid-column: 1 / -1; } .service p { grid-column: 1; } .service .s-go { grid-row: 2 / 4; grid-column: 2; width: 44px; height: 44px; } }

/* --- Shop / Konfigurator --- */
.shop { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 980px) { .shop { grid-template-columns: 1fr; } }
.shop-product { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 40px); }
.shop-product .prod-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; flex-wrap: wrap; margin-bottom: 24px; }
.shop-product h3 { font-size: clamp(28px, 3vw, 38px); }
.opt {
  position: relative; display: grid; grid-template-columns: 28px 1fr auto; gap: 16px; align-items: start; padding: 20px; margin-bottom: 12px;
  border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s;
}
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .box { width: 26px; height: 26px; border: 1.5px solid #c3cad6; border-radius: 3px; display: grid; place-items: center; color: transparent; transition: all .3s; margin-top: 2px; }
.opt input:checked ~ .box { background: var(--blue); border-color: var(--blue); color: #fff; }
.opt input:focus-visible ~ .box { outline: 2px solid var(--blue); outline-offset: 3px; }
.opt h4 { font: 760 18px/1.2 var(--f-head); font-stretch: 110%; letter-spacing: -.02em; margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.opt p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.opt ul { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.opt ul li { font-size: 12.5px; font-weight: 600; padding: 5px 9px; background: var(--bg-soft); border-radius: 2px; }
.opt .opt-price { font: 780 20px/1.1 var(--f-head); text-align: right; white-space: nowrap; }
.opt .opt-price small { display: block; font: 600 12px var(--f-body); color: var(--muted); }
.opt.locked { cursor: default; background: var(--bg-soft); }
.opt.locked .box { background: var(--ink); border-color: var(--ink); color: #fff; }
.opt .pill { font: 800 10.5px var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 2px; background: var(--ink); color: #fff; }
.opt.upgrade { border-color: var(--blue); background: linear-gradient(120deg, #f2f8ff, #fff 60%); box-shadow: 0 0 0 4px rgba(0, 134, 255, .08); }
.opt.upgrade .pill { background: var(--blue); }
.opt.upgrade:not(.is-on) { border-color: var(--line); background: #fff; box-shadow: none; }
.opt.upgrade .wa { display: inline-flex; align-items: center; gap: 6px; color: #128c4b; font-weight: 700; font-size: 13.5px; margin-top: 8px; }
@media (max-width: 520px) { .opt { grid-template-columns: 26px 1fr; } .opt .opt-price { grid-column: 2; text-align: left; } }

.shop-summary { position: sticky; top: calc(var(--header-h) + 20px); background: var(--ink); color: #fff; border-radius: var(--r); padding: clamp(24px, 3vw, 36px); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.shop-summary h3 { font-size: 22px; margin-bottom: 20px; }
.sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-size: 15px; color: rgba(255, 255, 255, .75); }
.sum-row b { color: #fff; white-space: nowrap; }
.sum-total { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; }
.sum-total div { padding: 16px; background: rgba(255, 255, 255, .05); border-radius: var(--r); }
.sum-total small { display: block; font-size: 12px; color: rgba(255, 255, 255, .55); margin-bottom: 4px; }
.sum-total strong { font: 780 30px/1 var(--f-head); font-stretch: 106%; letter-spacing: -.03em; }
.sum-total .mo strong { color: var(--cyan); }
.sum-note { font-size: 12.5px; color: rgba(255, 255, 255, .5); margin: 14px 0 0; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.trust-row span { display: inline-flex; align-items: center; gap: 6px; }
.trust-row svg { color: var(--cyan); }

/* Warenkorb-Schublade */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 15, .5); z-index: 300; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; backdrop-filter: blur(3px); }
.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: #fff; z-index: 301; display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform .6s var(--ease); box-shadow: -30px 0 60px rgba(0, 0, 0, .15);
}
.drawer.is-open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 22px; }
.drawer-body { overflow-y: auto; padding: 16px 24px; }
.drawer-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); background: var(--bg-soft); }
.cart-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item .ci-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cart-item h4 { font: 760 17px/1.2 var(--f-head); font-stretch: 110%; margin: 0; }
.cart-item .ci-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-soft); padding: 3px 0; }
.cart-item .ci-remove { font-size: 12.5px; color: var(--muted); text-decoration: underline; }
.cart-item .ci-remove:hover { color: #e5484d; }
.cart-empty { text-align: center; padding: 50px 10px; color: var(--muted); }
.cart-tot { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 6px; }
.cart-tot b { font-size: 18px; }

/* --- Ablauf (horizontal gepinnt) --- */
.process-wrap { overflow: hidden; }
.process-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); will-change: transform; }
.step {
  min-width: 0; padding: 28px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); min-height: 340px;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.step .s-big { font: 800 110px/.8 var(--f-logo); letter-spacing: -.06em; transform: skewX(-12deg); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: auto; opacity: .95; }
.step h3 { font-size: clamp(19px, 1.7vw, 24px); margin: 26px 0 8px; }
.step p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.step .dur { position: absolute; top: 22px; right: 18px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); background: var(--blue-light); padding: 6px 10px; border-radius: 2px; }
.step.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.step.dark p { color: rgba(255, 255, 255, .7); }
@media (max-width: 1100px) { .process-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .process-track { grid-template-columns: 1fr; }
  .step { min-height: 0; }
  .step .s-big { font-size: 100px; }
}

/* --- Beispiele --- */
.examples { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .examples { grid-template-columns: 1fr; } }
.example { display: block; position: relative; }
.example .ex-frame { position: relative; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); }
.example .ex-frame iframe { position: absolute; top: 0; left: 0; width: 1440px; height: 990px; border: 0; transform-origin: 0 0; pointer-events: none; }
.example .ex-bar { position: absolute; inset: 0 0 auto; height: 28px; background: #eef1f6; display: flex; gap: 5px; align-items: center; padding: 0 10px; z-index: 2; font-size: 11px; color: var(--muted); }
.example .ex-bar i { width: 8px; height: 8px; border-radius: 50%; background: #cfd5e0; }
.example .ex-bar span { margin-left: 10px; }
.example .ex-inner { position: absolute; inset: 28px 0 0; overflow: hidden; }
.example .ex-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px 0; }
.example h3 { font-size: 24px; }
.example .ex-meta p { margin: 4px 0 0; color: var(--ink-soft); font-size: 14.5px; }
.example .ex-go { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .5s var(--ease), background .3s; }
.example:hover .ex-go { transform: rotate(-45deg); background: var(--blue); }
.example .ex-frame::after { content: ''; position: absolute; inset: 0; background: rgba(0, 134, 255, 0); transition: background .4s; }
.example:hover .ex-frame::after { background: rgba(0, 134, 255, .06); }
.refs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.refs .ph-box { aspect-ratio: 4 / 3; border-radius: var(--r); }
@media (max-width: 800px) { .refs { grid-template-columns: 1fr 1fr; } }

/* --- Über uns / Stimmen --- */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) { .about { grid-template-columns: 1fr; } }
.about .ph-box { aspect-ratio: 4 / 5; border-radius: var(--r); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 60px; }
.quote { padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.quote .stars { color: #f5a400; letter-spacing: 2px; margin-bottom: 12px; }
.quote p { font-size: 15.5px; }
.quote .who { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.quote .who i { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-soft); border: 1px dashed #c9d0dc; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }

/* --- FAQ --- */
.faq { max-width: 920px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 26px 0; font: 720 clamp(18px, 1.8vw, 22px)/1.3 var(--f-head); font-stretch: 108%; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .5s var(--ease), background .3s, color .3s; }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--blue); color: #fff; border-color: var(--blue); }
.faq .ans { padding: 0 60px 26px 0; color: var(--ink-soft); }
.faq .ans p:last-child { margin: 0; }

/* --- CTA + Kontakt --- */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final h2 { font-size: clamp(44px, 8vw, 128px); line-height: .95; margin-bottom: 30px; }
.cta-final .contact-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
.contact-card { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--line-dark); border-radius: var(--r); text-align: left; transition: border-color .3s, background .3s; min-width: 260px; }
.contact-card:hover { border-color: var(--blue); background: rgba(0, 134, 255, .08); }
.contact-card .ic { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.contact-card.wa .ic { background: #25d366; }
.contact-card small { display: block; color: rgba(255, 255, 255, .55); font-size: 12.5px; }
.contact-card b { font-size: 16px; }
.big-marquee { overflow: hidden; margin-top: clamp(60px, 8vw, 110px); }
.big-marquee .marquee { animation-duration: 30s; }
.big-marquee span { font: 800 clamp(60px, 11vw, 170px)/1 var(--f-head); font-stretch: 120%; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .25); white-space: nowrap; padding-right: 40px; }
.big-marquee span.f { color: var(--blue); -webkit-text-stroke: 0; }

.footer { background: var(--bg-dark); color: rgba(255, 255, 255, .65); padding: 70px 0 30px; border-top: 1px solid var(--line-dark); font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
.footer .logo { color: #fff; font-size: 26px; margin-bottom: 16px; }
.footer h4 { font: 700 12px var(--f-head); font-stretch: 120%; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a:hover { color: #fff; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line-dark); font-size: 13px; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Nach-oben mit Fortschrittsring */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; background: #fff; box-shadow: 0 10px 30px rgba(7, 11, 20, .18); display: grid; place-items: center; opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .4s var(--ease); }
.to-top.is-visible { opacity: 1; transform: none; }
.to-top svg.prog { position: absolute; inset: 0; transform: rotate(-90deg); }
.to-top svg.prog circle { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; }

/* Mobile Sticky-CTA */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95; display: grid; grid-template-columns: 1fr auto; gap: 8px; transform: translateY(140%); transition: transform .5s var(--ease); }
  .mobile-cta.is-visible { transform: none; }
  .mobile-cta .btn { height: 52px; }
  .mobile-cta .wa-btn { width: 52px; height: 52px; display: grid; place-items: center; background: #25d366; color: #fff; border-radius: var(--r); }
  .to-top { bottom: 76px; right: 14px; width: 44px; height: 44px; }
  .to-top svg.prog { width: 44px; height: 44px; }
}

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 400; transform: translate(-50%, 150%); background: var(--ink); color: #fff; padding: 14px 20px; border-radius: var(--r); font-size: 14.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; transition: transform .5s var(--ease); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
.toast.is-visible { transform: translate(-50%, 0); }
.toast svg { color: var(--cyan); }

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .preloader { display: none; }
}

/* ==========================================================================
   Ergänzungen: Umschalter, Inklusiv-Listen, Sicherheits-Hinweis,
   Programmierung, Referenzen
   ========================================================================== */

/* One-Page / Multi-Page */
.variant-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: var(--r); margin: 4px 0 18px; }
.variant-switch button { display: grid; gap: 2px; padding: 10px 8px; border-radius: 3px; font: 760 15px/1.1 var(--f-head); font-stretch: 110%; color: var(--ink-soft); transition: background .3s, color .3s, box-shadow .3s; text-align: center; }
.variant-switch button small { font: 600 11.5px/1.2 var(--f-body); color: var(--muted); }
.variant-switch button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(7, 11, 20, .1), inset 0 -2px 0 var(--blue); }
.variant-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.variant-switch.big { margin: 0 0 16px; }
.variant-switch.big button { padding: 16px 10px; font-size: 18px; }
.variant-switch.big button small { font-size: 12.5px; }
.offer.featured .variant-switch { background: rgba(255, 255, 255, .06); }
.shop-label { display: block; font: 700 13.5px var(--f-body); margin-bottom: 8px; }

/* Immer inklusive */
.offer-incl { margin: -8px 0 24px; padding: 16px; border-radius: var(--r); background: var(--bg-soft); }
.offer.featured .offer-incl { background: rgba(255, 255, 255, .05); }
.incl-h { display: block; font: 700 11px var(--f-head); font-stretch: 120%; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.offer.featured .incl-h { color: var(--cyan); }
.offer-incl ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.offer-incl li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.offer.featured .offer-incl li { color: rgba(255, 255, 255, .78); }
.offer-incl li svg { color: var(--green); margin-top: 2px; }
.offer-incl li small { grid-column: 2; font-size: 12px; color: var(--muted); }
.offer.featured .offer-incl li small { color: rgba(255, 255, 255, .5); }
.incl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.opt .incl-list { display: grid; }
.incl-list li { position: relative; padding-left: 20px; font-size: 13.5px; color: var(--ink-soft); background: none !important; font-weight: 500 !important; }
.incl-list li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px; border: solid var(--green); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.incl-list.row { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.opt .explain { margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--blue); background: var(--blue-light); font-size: 13.5px; border-radius: 0 var(--r) var(--r) 0; }
.terms { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); font-weight: 600; }
.shop-summary .terms { color: rgba(255, 255, 255, .5); font-weight: 500; margin-top: 2px; }

/* Sternchen-Hinweis (Toggletip) */
.tip-btn {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 4px; padding: 0 5px; vertical-align: 1px;
  border-radius: 10px; background: var(--blue); color: #fff; font: 800 12px/1 var(--f-body); cursor: help; transition: transform .3s var(--ease);
}
.tip-btn:hover { transform: scale(1.12); }
.tip-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.security-note .tip-btn, .faq .tip-btn { height: 24px; padding: 0 10px; border-radius: 12px; font-size: 12px; }
.tip-pop {
  position: fixed; z-index: 450; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 20px 20px 16px; background: var(--ink); color: #fff;
  border-radius: var(--r); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); font-size: 14px; line-height: 1.5;
}
.tip-pop b { display: block; font: 760 17px var(--f-head); font-stretch: 110%; margin: 0 30px 8px 0; }
.tip-pop p { margin: 0 0 10px; color: rgba(255, 255, 255, .8); }
.tip-pop small { display: block; color: rgba(255, 255, 255, .45); font-size: 11.5px; }
.tip-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r); color: #fff; }
.tip-close:hover { background: rgba(255, 255, 255, .1); }
.security-note { max-width: 900px; margin: 22px auto 0; padding: 18px 22px; background: var(--bg-soft); border-radius: var(--r); font-size: 14.5px; color: var(--ink-soft); }
.security-note b { color: var(--ink); }

/* Individuelle Programmierung */
.code-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 960px) { .code-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.code-card { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .4s, box-shadow .6s var(--ease); }
.code-card:hover { border-color: var(--blue); box-shadow: 0 30px 60px -36px rgba(7, 11, 20, .4); }
.code-card h3 { font-size: 24px; }
.code-card p { margin: 0 0 6px; color: var(--ink-soft); font-size: 15.5px; }
.code-card .link-arrow { margin-top: auto; font-size: 14.5px; }
.code-card.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.code-card.dark p { color: rgba(255, 255, 255, .7); }
.code-art { position: relative; height: 180px; border-radius: var(--r); background: var(--bg-soft); margin-bottom: 10px; overflow: hidden; padding: 18px; }
.code-card.dark .code-art { background: #0e1424; color: var(--cyan); }
.art-gen { display: grid; gap: 10px; align-content: start; }
.gen-row { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.gen-row span { width: 50px; color: var(--muted); }
.gen-pill { font-style: normal; padding: 3px 9px; border: 1.5px solid var(--line); border-radius: 3px; font-size: 11px; background: #fff; }
.gen-pill.on, .gen-pill:nth-child(3) { animation: genPick 6s var(--ease) infinite; }
.gen-pill:nth-child(3) { animation-delay: 3s; }
@keyframes genPick { 0%, 45% { background: var(--ink); color: #fff; border-color: var(--ink); } 50%, 100% { background: #fff; color: inherit; border-color: var(--line); } }
.gen-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
.gen-dot:nth-child(2) { animation: dotPick 6s infinite; }
@keyframes dotPick { 0%, 45% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--blue); } 50%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); } }
.gen-toggle { width: 34px; height: 18px; border-radius: 10px; background: #cfd5e0; position: relative; animation: togBg 6s infinite; }
.gen-toggle b { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: togKnob 6s var(--ease) infinite; }
@keyframes togBg { 0%, 30% { background: #cfd5e0; } 35%, 90% { background: var(--blue); } }
@keyframes togKnob { 0%, 30% { transform: none; } 35%, 90% { transform: translateX(16px); } }
.gen-preview { position: absolute; right: 18px; bottom: 16px; display: grid; justify-items: end; gap: 6px; }
.gen-box { width: 64px; height: 64px; border-radius: 6px; background: var(--grad); animation: boxMorph 6s var(--ease) infinite; }
@keyframes boxMorph { 0%, 45% { transform: scale(.85); background: #0086ff; } 50%, 100% { transform: scale(1); background: #070b14; } }
.gen-price { font: 780 18px var(--f-head); color: var(--ink); }
.art-funnel svg { position: absolute; inset: 14px 20px; width: calc(100% - 40px); height: calc(100% - 28px); }
.art-funnel i { position: absolute; top: 18px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: rgba(255, 255, 255, .55); opacity: 0; animation: funnelDrop 3.2s ease-in infinite; animation-delay: var(--d); }
.art-funnel i.win { background: var(--blue); animation-name: funnelWin; }
@keyframes funnelDrop { 0% { transform: translate(var(--from), 0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(0, 62px); opacity: .9; } 70%, 100% { transform: translate(0, 70px); opacity: 0; } }
@keyframes funnelWin { 0% { transform: translate(var(--from), 0); opacity: 0; } 12% { opacity: 1; } 55% { transform: translate(0, 62px); } 85% { transform: translate(0, 112px); opacity: 1; } 100% { transform: translate(0, 120px); opacity: 0; } }
.funnel-out { position: absolute; right: 16px; bottom: 14px; font: 700 12px var(--f-body); color: #34d399; background: rgba(52, 211, 153, .12); padding: 5px 9px; border-radius: 3px; }
.art-calc { display: grid; gap: 14px; align-content: start; }
.calc-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.calc-track { position: relative; height: 4px; border-radius: 2px; background: #d8dde6; }
.calc-knob { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); animation: knob 5s ease-in-out infinite; }
.calc-knob.k2 { animation-delay: -1.6s; } .calc-knob.k3 { animation-delay: -3.2s; }
@keyframes knob { 0%, 100% { left: 15%; } 50% { left: 82%; } }
.calc-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; padding-top: 12px; border-top: 1px dashed #cfd5e0; font-size: 12px; font-weight: 700; color: var(--muted); }
.calc-sum b { font: 780 26px var(--f-head); color: var(--ink); font-variant-numeric: tabular-nums; }
.code-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; padding: 24px 28px; border-radius: var(--r); background: var(--bg-soft); }
.code-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.code-price { font: 780 26px/1 var(--f-head); font-stretch: 108%; }
.code-price small { display: block; font: 600 13px var(--f-body); color: var(--muted); margin-top: 4px; }

/* Referenzen */
.ex-feature { display: block; margin-bottom: 24px; }
.ex-feature .ex-frame { aspect-ratio: 16 / 9; }
.ex-feature h3 { font-size: clamp(26px, 3vw, 36px); }
.ex-feature .ex-meta p { max-width: 560px; }
.ex-slides { position: absolute; inset: 28px 0 0; overflow: hidden; background: #0e1424; }
.ex-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 1.1s ease, transform 6s linear; transform: scale(1.04); }
.ex-slides img.is-on { opacity: 1; transform: scale(1); }
.example .ex-slides img[src*="-og"] { object-fit: cover; object-position: center; }
.ex-tag { display: inline-block; margin-bottom: 6px; font: 700 11px var(--f-head); font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.examples { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .examples { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .examples { grid-template-columns: 1fr; } }
.examples .example h3 { font-size: 20px; }

/* Hero-Wand mit echten Screenshots */
.mock img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .8s ease; }
.mock img.is-fading { opacity: 0; }

/* ==========================================================================
   Branding-Vorschau (Starterpaket): Kunde für Kunde
   ========================================================================== */
.brand-show { position: relative; --b-accent: var(--blue); outline: none; }
.bs-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; margin-bottom: 18px; }
.bs-who { display: grid; gap: 2px; min-width: 0; }
.bs-kicker { display: flex; gap: 10px; align-items: center; font: 700 11px var(--f-head); font-stretch: 120%; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.bs-count { color: var(--muted); letter-spacing: .08em; }
.bs-who b { font: 780 clamp(24px, 3vw, 36px)/1.05 var(--f-head); font-stretch: 112%; letter-spacing: -.03em; }
.bs-who > span:last-child { color: var(--ink-soft); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-tabs button { height: 36px; padding: 0 12px; border-radius: 3px; border: 1px solid var(--line); background: #fff; font: 700 12px var(--f-head); font-stretch: 112%; letter-spacing: .06em; color: var(--ink-soft); transition: all .3s; }
.bs-tabs button:hover { border-color: var(--ink); color: var(--ink); }
.bs-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.bs-arrow {
  position: absolute; z-index: 5; top: 55%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 16px 40px -10px rgba(7, 11, 20, .45);
  transition: transform .4s var(--ease), background .3s;
}
.bs-arrow:hover { background: var(--blue); transform: scale(1.08); }
.bs-arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.bs-arrow.prev { left: -32px; } .bs-arrow.prev svg { transform: rotate(180deg); }
.bs-arrow.next { right: -32px; }
@media (max-width: 1360px) { .bs-arrow.prev { left: -12px; } .bs-arrow.next { right: -12px; } }
@media (max-width: 700px) { .bs-arrow { top: 0; margin-top: 0; width: 50px; height: 50px; } .bs-arrow.prev { left: auto; right: 58px; } .bs-arrow.next { right: 0; } .bs-bar { padding-right: 116px; } .bs-tabs { display: none; } }
.bs-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.bs-dots i { width: 28px; height: 4px; border-radius: 2px; background: var(--line); transition: background .3s, width .4s var(--ease); }
.bs-dots i.on { width: 48px; background: var(--blue); }

.brand-show .t-art { min-height: 150px; }
.bs-ph { height: 100%; min-height: 150px; border-radius: var(--r); }
/* Logo */
.bs-logo-stage { position: relative; height: 100%; min-height: 160px; border-radius: var(--r); display: grid; place-items: center; overflow: hidden; }
.bs-grid { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255, 255, 255, .1); stroke-width: .8; animation: spin 60s linear infinite; }
.bs-logo-mark { position: relative; max-width: 78%; display: grid; place-items: center; }
.bs-logo-img { max-height: 96px; width: auto; max-width: 100%; object-fit: contain; animation: logoFloat 5s ease-in-out infinite; }
@keyframes logoFloat { 50% { transform: translateY(-5px); } }
.bs-word { display: grid; justify-items: center; color: #fff; text-align: center; line-height: 1; }
.bs-word b { font: 800 28px/1 'Brand Saira', var(--f-head); letter-spacing: .02em; }
.bs-word.serif b { font: 760 30px/1 'Brand Fraunces', Georgia, serif; letter-spacing: -.01em; }
.bs-word small { margin-top: 6px; font: 600 9px var(--f-body); letter-spacing: .24em; color: var(--b-accent); }
/* Brandkit */
.brand-show .art-kit .sw { min-height: 92px; align-items: flex-end; }
.brand-show .art-kit .sw span { font: 700 10px/1.35 var(--f-body); letter-spacing: .04em; }
.brand-show .art-kit .type b { font-size: 50px; }
.brand-show .art-kit .type i { font-style: normal; font-size: 40px; color: var(--b-accent); }
/* Visitenkarte */
.brand-show .art-card .face { overflow: hidden; }
.brand-show .art-card .front { align-items: flex-start; }
.brand-show .art-card .front .bs-logo-img { max-height: 40px; animation: none; }
.brand-show .art-card .front .bs-word b { font-size: 16px; } .brand-show .art-card .front .bs-word { justify-items: start; text-align: left; }
.brand-show .art-card .front .bs-word small { font-size: 6.5px; margin-top: 3px; }
.brand-show .art-card .back { gap: 4px; justify-content: center; }
.brand-show .art-card .back b { font-size: 11px; letter-spacing: .02em; }
.brand-show .art-card .back span { font-size: 9px; line-height: 1.5; color: #4a5263; }
.brand-show .art-card .back i { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; }
/* Flyer */
.brand-show .art-flyer .sheet { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.brand-show .art-flyer .sheet .sheet-img { width: 100%; height: 58%; object-fit: cover; flex: none; }
.brand-show .art-flyer .sheet:nth-child(1) .sheet-img { height: 100%; }
.brand-show .art-flyer .sheet.front b { display: block; padding: 7px 8px 2px; font-size: 11.5px; line-height: 1.05; margin: 0; }
.brand-show .art-flyer .sheet.front small { display: block; padding: 0 8px; font-size: 7px; font-weight: 700; letter-spacing: .04em; }
/* Posts */
.brand-show .art-posts b { animation: none; opacity: 1; background: rgba(255, 255, 255, .2); }
.brand-show .art-posts b img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.brand-show .art-posts b:hover img { transform: scale(1.08); }
.brand-show .art-posts b::after { animation: none; }
.brand-show .art-posts b.txt { display: grid; place-items: center; padding: 6px; text-align: center; font-size: clamp(9px, 1vw, 12px); line-height: 1.05; letter-spacing: -.01em; }
/* Profil */
.brand-show .art-profile .av { overflow: hidden; padding: 6px; }
.brand-show .art-profile .av .bs-logo-img { max-height: 34px; animation: none; }
.brand-show .art-profile .av .bs-word b { font-size: 8px; } .brand-show .art-profile .av .bs-word small { display: none; }
.brand-show .art-profile .lk { color: var(--b-accent); }
/* Webseite */
.bs-browser { height: 100%; min-height: 180px; border-radius: 6px; overflow: hidden; background: #0e1424; display: flex; flex-direction: column; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); }
.bs-browser .bar { flex: none; height: 22px; display: flex; gap: 5px; align-items: center; padding: 0 8px; background: #1a2236; }
.bs-browser .bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a4560; }
.bs-browser .bar span { margin-left: 8px; font-size: 10px; color: rgba(255, 255, 255, .5); }
.bs-browser img { flex: 1; width: 100%; min-height: 0; object-fit: cover; object-position: top; animation: webPan 12s ease-in-out infinite alternate; }
@keyframes webPan { from { object-position: 50% 0; } to { object-position: 50% 100%; } }

/* Echte Druckdaten in der Branding-Vorschau */
.bs-logo-stage.light .bs-grid { stroke: rgba(7, 11, 20, .08); }
.bs-logo-stage.light { box-shadow: inset 0 0 0 1px var(--line); }
.brand-show .art-card .card3d.is-print, .brand-show .art-card .card3d.ol { width: 220px; height: 145px; }
.brand-show .art-card .card3d.is-print .face { padding: 0; background: #fff; }
.brand-show .art-card .card3d.is-print .face img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.flyer-print { position: relative; width: 100%; height: 100%; min-height: 180px; display: grid; place-items: center; perspective: 900px; }
.fp-sheet { position: absolute; width: 92px; height: 184px; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 18px 34px -14px rgba(7, 11, 20, .45); transition: transform .7s var(--ease); }
.fp-sheet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-sheet.s0 { transform: translateX(-30px) rotate(-6deg); z-index: 2; animation: fpFront 7s var(--ease) infinite; }
.fp-sheet.s1 { transform: translateX(30px) rotate(6deg); animation: fpBack 7s var(--ease) infinite; }
@keyframes fpFront { 0%, 40%, 100% { transform: translateX(-30px) rotate(-6deg); z-index: 2; } 50%, 90% { transform: translateX(-52px) rotate(-10deg) scale(.96); z-index: 1; } }
@keyframes fpBack { 0%, 40%, 100% { transform: translateX(30px) rotate(6deg); z-index: 1; } 50%, 90% { transform: translateX(44px) rotate(3deg) scale(1.06); z-index: 3; } }
.tile:hover .fp-sheet.s0 { transform: translateX(-58px) rotate(-12deg); }
.tile:hover .fp-sheet.s1 { transform: translateX(58px) rotate(10deg); }
/* Olchinger: Nachbau Visitenkarte & Flyer */
.ol-face { position: relative; background: #fff !important; color: #232B2C; overflow: hidden; padding: 0 !important; }
.ol-sw { position: absolute; inset: 0; width: 100%; height: 100%; }
.ol-face .ol-logo { position: absolute; left: 8%; top: 18%; width: 30%; }
.ol-face .ol-logo img { width: 100%; height: auto; display: block; }
.ol-face.center .ol-logo.big { left: 30%; top: 14%; width: 40%; }
.ol-txt { position: absolute; left: 42%; right: 5%; top: 15%; display: grid; gap: 4px; font-size: 7.5px; line-height: 1.3; }
.ol-txt b { font-size: 8.5px; font-weight: 700; }
.ol-web { margin-top: 6px; }
.ol-sheet { padding: 12px 9px; display: flex; flex-direction: column; gap: 3px; color: #232B2C; font-size: 7.5px; }
.ol-sheet .ol-sw { opacity: .9; }
.ol-sheet > *:not(.ol-sw) { position: relative; }
.ol-h { font-size: 11px; font-weight: 700; color: #95B71E; line-height: 1.1; margin-top: 18px; }
.ol-h span { font-weight: 300; }
.ol-rule { display: block; width: 28px; height: 2px; background: #95B71E; margin: 3px 0 5px; }
.ol-li { display: flex; gap: 4px; align-items: center; }
.ol-li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #95B71E; flex: none; }
.ol-sheet .ol-logo { width: 34px; align-self: flex-end; }
.ol-sheet .ol-logo img { width: 100%; height: auto; }
.ol-q { color: #4A8242; font-size: 8px; line-height: 1.25; }
.bs-variants { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.bs-variants span { width: 34px; height: 34px; border-radius: 4px; background: #fff; display: grid; place-items: center; padding: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); }
.bs-variants img { max-width: 100%; max-height: 100%; }
.bs-logo-mark img[src$=".svg"] { width: 150px; height: auto; max-height: 110px; }
.brand-show .art-profile .av img[src$=".svg"] { width: 38px; height: auto; }

/* Preisvergleich: Hinweis, Mini-Überschrift, animierte Icons */
.cmp-card .big .upto { font: 700 .32em/1 var(--f-head); letter-spacing: .02em; text-transform: uppercase; vertical-align: .9em; color: var(--muted); }
.practice-note { max-width: 900px; margin: 4px auto 44px; padding: 18px 22px; border-left: 3px solid var(--blue); background: var(--blue-light); border-radius: 0 var(--r) var(--r) 0; font-size: 15px; color: var(--ink-soft); }
.practice-note b { color: var(--ink); }
.mini-head { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; letter-spacing: -.015em; max-width: 820px; margin: 0 0 18px; }
.wp-ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: var(--r); background: #fdecec; color: #e5484d; }
.wp-ic svg { width: 32px; height: 32px; overflow: visible; }
.ic-plug .spark { opacity: 0; animation: spark 1.8s ease-in-out infinite; }
.ic-plug .plug { animation: plugIn 1.8s var(--ease) infinite; }
@keyframes plugIn { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(2px); } }
@keyframes spark { 40%, 60% { opacity: 1; } 0%, 30%, 70%, 100% { opacity: 0; } }
.ic-bug .bug { transform-origin: 24px 27px; animation: bugWiggle 1.2s ease-in-out infinite; }
@keyframes bugWiggle { 0%, 100% { transform: rotate(-8deg) translateX(-1px); } 50% { transform: rotate(8deg) translateX(1px); } }
.ic-clock .hand { transform-origin: 24px 26px; animation: spin 2.4s linear infinite; }
h2.long { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; }

/* Vorher/Nachher mit Olchinger Gartenbau */
.old-site { font-family: 'Comic Sans MS', 'Comic Neue', 'Times New Roman', serif; background: #ffffcc; }
.old-site .os-top { background: #00a000; font-family: 'Times New Roman', serif; }
.old-site h4 { color: #c00; font-size: 17px; }
.old-site .os-uc { margin-top: 8px; font-size: 12px; color: #a60; font-weight: bold; animation: blink 1s steps(1) infinite; }
.old-site .os-img { background: repeating-linear-gradient(45deg, #ccc 0 6px, #ddd 6px 12px); border: 3px ridge #999; color: #555; }
.ol-new { font-family: 'Brand Roboto Slab', Georgia, serif; }
.ol-new .ns-top { font-family: 'Brand Roboto Slab', Georgia, serif; }
.ol-new .ns-top img { height: 40px; width: auto; }
.ol-new .ns-top b { background: #95B71E; color: #fff; font-family: 'Brand Roboto Slab', Georgia, serif; }
.ol-new .ns-kick { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #4A8242; margin-bottom: 6px; }
.ol-new .ns-h { font: 700 clamp(22px, 2.8vw, 36px)/1.05 'Brand Roboto Slab', Georgia, serif; letter-spacing: -.02em; color: #232B2C; }
.ol-new .ns-h em { font: inherit; font-style: normal; color: #95B71E; }
.ol-new .ns-cta i { background: #232B2C; } .ol-new .ns-cta i + i { background: #25d366; }
.ol-new .ns-img { background: radial-gradient(circle at 70% 25%, #EFFAC9 0 18%, transparent 19%), linear-gradient(160deg, #95B71E 0%, #4A8242 55%, #232B2C 100%); display: flex; align-items: flex-end; padding: 10px; }
.ol-new .ns-img::before { content: none; }
.ol-new .ns-img span { background: #fff; color: #232B2C; font-size: 10px; font-weight: 600; line-height: 1.3; padding: 7px 9px; border-radius: 4px; }
.ex-logo { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 10px; background: #fff; }
.ex-logo img { width: 140px; height: auto; }

/* Abrechnung jährlich / monatlich */
.sum-total .mo { display: grid; gap: 4px; }
.mo-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mo-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mo-price s { font: 600 16px var(--f-head); color: rgba(255, 255, 255, .45); text-decoration-thickness: 2px; }
.sum-total .mo > small:last-child { margin: 0; color: rgba(255, 255, 255, .55); }
.bill-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 30px 0 8px; border-radius: 12px; background: rgba(255, 255, 255, .1); font: 700 10.5px var(--f-body); color: #fff; white-space: nowrap; }
.bill-switch i { position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); transition: transform .35s var(--ease), background .3s; }
.bill-switch .bs-m { display: none; }
.bill-switch[aria-checked="false"] { padding: 0 8px 0 30px; }
.bill-switch[aria-checked="false"] i { right: auto; left: 3px; background: rgba(255, 255, 255, .6); }
.bill-switch[aria-checked="false"] .bs-y { display: none; }
.bill-switch[aria-checked="false"] .bs-m { display: inline; }
.bill-switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cart-tot small.terms { margin-top: 0; }
s.was { color: var(--muted); font-weight: 500; font-size: .85em; margin-right: 4px; }
.cart-bill { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; margin: 6px 0 4px; cursor: pointer; }
.cart-bill input { accent-color: var(--blue); }
.shop > *, .sum-total > div { min-width: 0; }
.mo-head { flex-wrap: wrap; }
@media (max-width: 480px) { .sum-total { grid-template-columns: 1fr; } }
.ex-slides .ex-logo img { position: static; inset: auto; width: 140px; height: auto; opacity: 1; transform: none; object-fit: contain; }
@media (min-width: 1101px) {
  .step { padding: 24px 20px; min-height: 320px; }
  .step .s-big { font-size: 84px; }
  .step h3 { font-size: 19px; hyphens: manual; }
  .step p { font-size: 14.5px; }
}
.mini-head, h2.long { hyphens: manual; -webkit-hyphens: manual; }


/* Preis-Kasten: einmalig + monatlich (jährlich grün, monatlich blau) */
.sum-total { align-items: stretch; }
.sum-total > div { position: relative; display: grid; align-content: end; gap: 4px; padding: 18px; }
.sum-total .once strong { color: #fff; }
.sum-total .once small, .sum-total .mo .mo-label, .sum-total .mo .mo-note { display: block; margin: 0; color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.sum-total .mo { padding-top: 46px; border: 1px solid transparent; transition: background .4s, border-color .4s; }
.sum-total .mo .bill-switch { position: absolute; top: 12px; right: 12px; }
.mo-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mo-price strong { font: 800 clamp(30px, 3vw, 38px)/1 var(--f-head) !important; letter-spacing: -.03em; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mo.is-yearly { background: linear-gradient(140deg, rgba(110, 231, 183, .16), rgba(52, 211, 153, .05)) !important; border-color: rgba(110, 231, 183, .35); }
.mo.is-yearly .mo-price strong { background-image: linear-gradient(100deg, #d9fbe8 0%, #86efac 45%, #34d399 100%); }
.mo.is-monthly { background: linear-gradient(140deg, rgba(0, 134, 255, .2), rgba(46, 91, 255, .06)) !important; border-color: rgba(92, 200, 255, .35); }
.mo.is-monthly .mo-price strong { background-image: linear-gradient(100deg, #bfe6ff 0%, #5cc8ff 45%, #0086ff 100%); }
.mo .mo-label { font-weight: 700; color: rgba(255, 255, 255, .85) !important; display: flex !important; flex-wrap: wrap; gap: 6px; align-items: center; }
.save-chip { display: inline-block; padding: 3px 8px; border-radius: 20px; background: linear-gradient(100deg, #bbf7d0, #6ee7b7); color: #064e3b; font: 800 11px/1.2 var(--f-body); }
.bill-switch { background: rgba(255, 255, 255, .12); }
.mo.is-yearly .bill-switch i { background: #6ee7b7; }
.mo.is-monthly .bill-switch i { background: #5cc8ff; }

/* Leistungen als Links + Vorschau */
a.service { color: inherit; cursor: pointer; }
.service h3 .s-sub { display: block; margin-top: 6px; font: 600 12px/1.3 var(--f-body); letter-spacing: .01em; color: var(--cyan); }
.service:hover h3 .s-sub { color: rgba(255, 255, 255, .9); }
.service-preview { width: 300px; height: 190px; background: #0e1424; border: 2px solid rgba(255, 255, 255, .12); }
.service-preview video, .service-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Pakete: Webseite · Online-Marketing · Digitaler Neustart · All-in-One
   ========================================================================== */
/* Grüne Bestell-Buttons */
.btn-go { --bg: var(--green); --fg: #fff; background: var(--grad-green); }
.btn-go::before { background: var(--ink); }
.btn-go .btn-ic { background: #fff; color: var(--green); }
.btn-go:hover .btn-ic { background: var(--green); color: #fff; }
.dark .btn-go::before, .offer.featured .btn-go::before, .aio .btn-go::before, .shop-summary .btn-go::before { background: #fff; }
.dark .btn-go:hover, .offer.featured .btn-go:hover, .aio .btn-go:hover, .shop-summary .btn-go:hover { color: var(--ink); }

/* Aktionspreise in Grün */
.deal { background: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--green); }
.soft .deal, .section:not(.dark) .cmp-card:not(.now) .deal { background-image: var(--grad-green); }
.save-chip.big { padding: 6px 12px; font-size: 12.5px; letter-spacing: .02em; }
.save-badge { background: var(--grad-green); color: #fff; box-shadow: 0 10px 30px -10px rgba(16, 185, 129, .7); }

/* Gemeinsamer One-/Multi-Page-Schalter über den Paketen */
.variant-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: -30px auto 34px; flex-wrap: wrap; }
.variant-bar > span { font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.variant-bar .variant-switch { margin: 0; min-width: 300px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.variant-bar .variant-switch button[aria-checked="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.variant-bar .variant-switch button[aria-checked="true"] small { color: rgba(255, 255, 255, .65); }

/* Gratis Domain + E-Mail */
.perks { list-style: none; margin: 0 0 18px; padding: 12px 14px; display: grid; gap: 8px; border-radius: var(--r); background: linear-gradient(120deg, rgba(52, 211, 153, .14), rgba(16, 185, 129, .04)); border: 1px solid rgba(16, 185, 129, .3); }
.perks li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.perks li b { color: var(--ink); }
.perks svg { color: var(--green); margin-top: 2px; }
.perks.on-dark li { color: rgba(255, 255, 255, .75); }
.perks.on-dark li b { color: #fff; }
.perks.on-dark svg { color: #6ee7b7; }

/* Online-Marketing: nur als Top-up */
.offer.topup { border: 1.5px dashed rgba(0, 134, 255, .45); }
.offer.topup .offer-tag { background: var(--ink); }
.only-with { display: grid; grid-template-columns: 16px 1fr; gap: 10px; margin: 0 0 20px; padding: 12px 14px; border-radius: var(--r); background: var(--blue-light); font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.only-with svg { color: var(--blue); margin-top: 2px; }
.only-with b { color: var(--ink); }
.offer > .incl-h { margin-bottom: 4px; }
.ov-marketing { display: flex; align-items: flex-end; justify-content: space-between; padding: 18px 20px; }
.ov-marketing .om-ch { position: absolute; top: 16px; left: calc(16px + var(--i) * 25%); padding: 5px 9px; border-radius: 2px; background: #fff; font: 700 11.5px var(--f-body); box-shadow: 0 6px 16px -8px rgba(7, 11, 20, .3); animation: om-float 4s ease-in-out infinite; animation-delay: calc(var(--i) * -.8s); }
.ov-marketing .om-bars { display: flex; align-items: flex-end; gap: 10px; width: 100%; height: 88px; }
.ov-marketing .om-bars i { flex: 1; height: var(--h); background: rgba(0, 134, 255, .18); transform-origin: bottom; animation: om-grow 3.2s var(--ease) infinite alternate; }
.ov-marketing .om-bars i:last-child { background: var(--grad-green); }
@keyframes om-float { 50% { transform: translateY(-6px); } }
@keyframes om-grow { from { transform: scaleY(.55); } }

/* Digitaler Neustart: Anthrazit statt Schwarz */
.offer.featured { background: var(--grad-anthra); border-color: #3a3f47; box-shadow: 0 40px 80px -40px rgba(7, 11, 20, .7); }
.offer.featured .offer-tag { background: var(--grad-chrome); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.offer.featured .offer-visual { background: rgba(0, 0, 0, .25); }
.offer.featured .price strong { background: var(--grad-chrome-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.offer.featured .price-monthly { color: #9fd8ff; }
.offer.featured .tip-btn { color: #9fd8ff; }

/* All-in-One: quer, Chrom, hervorgehoben */
.aio { position: relative; display: grid; grid-template-columns: 1.25fr 1fr .9fr; gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: 24px; padding: clamp(28px, 4vw, 52px); color: #fff; background: var(--grad-chrome); border: 1px solid #4a4f58; box-shadow: 0 50px 100px -50px rgba(7, 11, 20, .8), inset 0 1px 0 rgba(255, 255, 255, .14);
  clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 40px 100%, 0 calc(100% - 40px)); overflow: hidden; }
.aio::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .09) 45%, transparent 60%); background-size: 250% 100%; animation: aio-shine 7s ease-in-out infinite; }
@keyframes aio-shine { 0%, 30% { background-position: 120% 0; } 70%, 100% { background-position: -120% 0; } }
.aio > * { position: relative; min-width: 0; }
.aio-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.aio-tag { font: 700 13px var(--f-head); font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: #c9ced6; }
.aio h3 { font-size: clamp(30px, 3.4vw, 46px); background: var(--grad-chrome-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; }
.aio-main > p { color: rgba(255, 255, 255, .72); font-size: 16px; }
.aio-parts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 20px; }
.aio-parts span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 2px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); font-weight: 700; font-size: 14px; }
.aio-parts span svg { color: #9fd8ff; }
.aio-parts b { color: #6ee7b7; font-size: 18px; }
.aio-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.aio-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.aio-list svg { color: #6ee7b7; margin-top: 4px; }
.aio-list .tip-btn { color: #9fd8ff; }
.aio-price { display: grid; gap: 6px; padding: 24px; border-radius: var(--r); background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .3); }
.aio-was { font-size: 14px; color: rgba(255, 255, 255, .6); }
.aio-was s { font-weight: 700; text-decoration-thickness: 2px; }
.aio-price strong { font: 800 clamp(48px, 5vw, 66px)/1 var(--f-head); font-stretch: 108%; letter-spacing: -.04em; }
.aio-price > small { color: rgba(255, 255, 255, .6); font-size: 13px; }
.aio-save { justify-self: start; padding: 5px 10px; border-radius: 20px; background: var(--grad-green); color: #fff; font-size: 13px; font-weight: 700; }
.aio-mo { font-size: 13px; color: rgba(255, 255, 255, .7); line-height: 1.45; margin: 4px 0 8px; }
.aio-mo em { font-style: normal; color: rgba(255, 255, 255, .5); }
.aio-mail { text-align: center; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 3px; }
.aio-mail:hover { color: #fff; }
@media (max-width: 1100px) { .aio { grid-template-columns: 1fr 1fr; } .aio-main { grid-column: 1 / -1; } }
@media (max-width: 700px) { .aio { grid-template-columns: 1fr; } }

/* Zusatz-Modul Print / Brandkit – kleiner */
.addon { display: grid; grid-template-columns: auto 1fr auto auto; gap: 18px 24px; align-items: center; margin-top: 16px; padding: 20px 24px; background: #fff; border: 1px solid var(--line); }
.addon-ic { width: 48px; height: 48px; display: grid; place-items: center; background: var(--grad-anthra); color: #fff; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.addon-kick { font: 700 11px var(--f-head); font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.addon h3 { font-size: 20px; margin: 4px 0; }
.addon p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.addon-price strong { display: block; font: 800 28px/1 var(--f-head); }
.addon-price small { font-size: 12px; color: var(--muted); }
@media (max-width: 860px) { .addon { grid-template-columns: auto 1fr; } .addon-price, .addon .btn { grid-column: 2; justify-self: start; } }

/* Shop: Paket-Auswahl */
.pkg-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 22px; }
.pkg-switch button { display: grid; gap: 4px; padding: 14px 12px; text-align: left; border: 1.5px solid var(--line); background: #fff; border-radius: var(--r); transition: border-color .3s, box-shadow .3s, background .3s; min-width: 0; }
.pkg-switch button b { font: 760 16px/1.15 var(--f-head); font-stretch: 108%; }
.pkg-switch button small { font: 700 12.5px var(--f-body); color: var(--muted); }
.pkg-switch button small.deal { background-image: var(--grad-green); }
.pkg-switch button[aria-checked="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(7, 11, 20, .08); }
.pkg-switch button[data-pkg="allinone"][aria-checked="true"] { background: var(--grad-chrome); color: #fff; border-color: #4a4f58; }
.pkg-switch button[data-pkg="allinone"][aria-checked="true"] small.deal { background-image: var(--grad-green-text); }
.pkg-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 560px) { .pkg-switch { grid-template-columns: 1fr; } }
.opt:not(.locked):not(.upgrade).is-on { border-color: var(--green); box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }
.opt:not(.upgrade) input:checked:not(:disabled) ~ .box { background: var(--green); border-color: var(--green); }
.opt.locked input:disabled ~ .box { background: var(--ink); border-color: var(--ink); color: #fff; }
.sum-row.is-deal span, .sum-row.is-deal b { color: #6ee7b7 !important; font-weight: 700; }
.ci-line.is-deal span, .ci-line.is-deal b { color: var(--green); font-weight: 700; }
.sum-total .once s { font: 600 15px var(--f-head); color: rgba(255, 255, 255, .45); text-decoration-thickness: 2px; }
.sum-total .once strong.deal { -webkit-text-fill-color: transparent; }
.cart-tot .deal { font-weight: 800; }
.offer-tag + .offer-num { margin-top: 26px; }
.offer-tag { top: 16px; right: 34px; }
.aio-price strong { font-size: clamp(42px, 4.2vw, 58px); white-space: nowrap; }

/* ==========================================================================
   Cookie- & Datenschutz-Banner
   ========================================================================== */
.consent { position: fixed; left: clamp(12px, 2vw, 28px); bottom: clamp(12px, 2vw, 28px); z-index: 600; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  padding: 24px; color: #fff; background: var(--grad-chrome); border: 1px solid #4a4f58; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .12);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  opacity: 0; transform: translateY(24px); transition: opacity .35s var(--ease), transform .45s var(--ease); font-size: 14px; }
.consent.is-open { opacity: 1; transform: none; }
.consent-ic { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; background: var(--grad-green); color: #fff; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); }
.consent h2 { font-size: 22px; margin-bottom: 8px; }
.consent p { color: rgba(255, 255, 255, .75); line-height: 1.5; margin: 0; }
.consent a { color: #9fd8ff; text-decoration: underline; text-underline-offset: 2px; }
.consent-more { display: grid; gap: 8px; margin-top: 16px; }
.consent-cat { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(255, 255, 255, .08); cursor: pointer; }
.consent-cat input { position: absolute; opacity: 0; pointer-events: none; }
.consent-cat b { display: block; font-size: 14.5px; }
.consent-cat b small { font-weight: 600; color: #6ee7b7; margin-left: 4px; }
.consent-cat small { display: block; color: rgba(255, 255, 255, .62); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.consent-cat .consent-svc { color: rgba(255, 255, 255, .45); }
.consent-sw { position: relative; width: 40px; height: 22px; border-radius: 12px; background: rgba(255, 255, 255, .18); transition: background .3s; margin-top: 1px; }
.consent-sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s var(--ease); }
.consent-cat input:checked + .consent-sw { background: var(--green); }
.consent-cat input:checked + .consent-sw::after { transform: translateX(18px); }
.consent-cat input:focus-visible + .consent-sw { outline: 2px solid #9fd8ff; outline-offset: 2px; }
.consent-cat.is-locked { cursor: default; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
/* Zustimmen und Ablehnen sehen bewusst gleich aus (keine Lenkung) */
.consent-btn { height: 46px; padding: 0 14px; font-weight: 700; font-size: 14px; color: var(--ink); background: #fff; border-radius: var(--r); transition: background .3s, color .3s; }
.consent-btn:hover { background: var(--grad-green); color: #fff; }
.consent-btn:focus-visible, .consent-link:focus-visible { outline: 2px solid #9fd8ff; outline-offset: 2px; }
.consent-link { grid-column: 1 / -1; height: 34px; font-size: 13.5px; font-weight: 700; color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 3px; }
.consent .js-c-save { grid-column: 1 / -1; }
.consent-open-link { background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.legal-foot { padding: 28px 0 40px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); }
.legal-foot a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Pakete v3: Webseite + Neustart, All-in-One, Print, Online-Marketing
   ========================================================================== */
/* Alle Häkchen grün */
:where(svg):has(> use[href="#i-check"]) { color: var(--green); }
.opt .box svg, .toast svg, .btn svg { color: inherit; }
.trust-row svg:has(> use[href="#i-check"]) { color: #6ee7b7; }

.offers.two { grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .offers.two { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } .offers.two .offer.featured { order: 0; } }
.offer-for.small { font-size: 14px; min-height: 0; margin-top: -6px; color: var(--muted); }
.offer.featured .offer-for.small { color: rgba(255, 255, 255, .55); }
.offer-list li.hl { margin: 0 -12px 6px; padding: 12px; border: 0; border-radius: var(--r); background: linear-gradient(120deg, rgba(52, 211, 153, .16), rgba(16, 185, 129, .05)); box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .35); color: var(--ink); font-size: 15.5px; }
.offer.featured .offer-list li.hl, .om .offer-list li.hl { color: #fff; }
.offer-list li.hl b { color: inherit; }
.offer-list li > span { min-width: 0; }
.addon-hint { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: rgba(255, 255, 255, .7); margin: -10px 0 18px; }
.addon-hint svg { color: #6ee7b7; }

/* Info-Knopf: pulsiert leicht, damit man ihn bemerkt */
.info-btn { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 6px; vertical-align: 1px; border-radius: 50%; background: var(--grad-glow); color: #fff; font: 800 13px/1 var(--f-body); cursor: help; transition: transform .3s var(--ease); }
.info-btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(0, 134, 255, .55); animation: infoPulse 2.2s ease-out infinite; }
.info-btn:hover { transform: scale(1.15); }
.info-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@keyframes infoPulse { 0% { transform: scale(.8); opacity: 1; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .info-btn::after { animation: none; opacity: .5; } }

/* Seiten-Zähler */
.pages-box { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); }
.offer.featured .pages-box, .pages-box.on-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); }
.pages-label { font-weight: 700; font-size: 14.5px; }
.pages-label small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); margin-top: 2px; }
.offer.featured .pages-label small, .pages-box.on-dark .pages-label small { color: rgba(255, 255, 255, .55); }
.stepper { display: inline-grid; grid-template-columns: 38px 44px 38px; align-items: center; flex: none; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
.offer.featured .stepper, .pages-box.on-dark .stepper { background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); }
.stepper button { height: 38px; font: 700 20px/1 var(--f-body); color: var(--ink); transition: background .25s, color .25s; }
.offer.featured .stepper button, .pages-box.on-dark .stepper button { color: #fff; }
.stepper button:hover:not(:disabled) { background: var(--grad-green); color: #fff; }
.stepper button:disabled { opacity: .3; cursor: not-allowed; }
.stepper output { text-align: center; font: 760 18px var(--f-head); font-stretch: 110%; }
.pages-box.big { padding: 16px 18px; margin-bottom: 22px; background: #fff; }
.pages-box.big .stepper { grid-template-columns: 46px 54px 46px; }
.pages-box.big .stepper button { height: 46px; }

/* Motion: Webseite mit DSGVO-Stempel, Roboter und grünem Haken */
.ov-dsgvo .browser { position: absolute; inset: 18px 22px; border-radius: 6px; background: #fff; box-shadow: 0 10px 30px -10px rgba(7, 11, 20, .25); overflow: hidden; }
.ov-dsgvo .bar { height: 16px; background: #eef1f6; display: flex; gap: 4px; align-items: center; padding: 0 7px; }
.ov-dsgvo .bar i { width: 5px; height: 5px; border-radius: 50%; background: #c7ceda; }
.ov-dsgvo .blk { position: absolute; left: 10%; border-radius: 2px; background: #e4e8ef; transform-origin: left; animation: dsBuild 7s var(--ease) infinite; }
.ov-dsgvo .blk.b1 { top: 30%; width: 50%; height: 12px; background: var(--ink); }
.ov-dsgvo .blk.b2 { top: 48%; width: 38%; height: 6px; animation-delay: .15s; }
.ov-dsgvo .blk.b3 { top: 62%; width: 24%; height: 14px; background: var(--blue); animation-delay: .3s; }
.ov-dsgvo .blk.b4 { top: 26%; left: 66%; width: 22%; height: 52%; background: var(--grad); animation-delay: .45s; }
.ov-robot { position: absolute; left: 30px; bottom: 26px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--ink); color: #9fd8ff; box-shadow: 0 10px 24px -8px rgba(7, 11, 20, .5); animation: dsRobot 7s var(--ease) infinite; }
.ov-stamp { position: absolute; right: 30px; top: 26px; display: grid; place-items: center; padding: 6px 10px; border: 3px solid var(--green); border-radius: 6px; color: var(--green); background: rgba(255, 255, 255, .92); font: 900 16px/1 var(--f-head); letter-spacing: .06em; transform: rotate(-12deg); animation: dsStamp 7s cubic-bezier(.2, 1.4, .4, 1) infinite; }
.ov-stamp small { font: 700 8.5px var(--f-body); letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }
.ov-check { position: absolute; right: 34px; bottom: 26px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-green); color: #fff !important; box-shadow: 0 0 0 6px rgba(16, 185, 129, .18); animation: dsCheck 7s cubic-bezier(.2, 1.6, .4, 1) infinite; }
.ov-check svg { color: #fff !important; }
@keyframes dsBuild { 0% { transform: scaleX(0); opacity: 0; } 10%, 88% { transform: scaleX(1); opacity: 1; } 100% { opacity: 0; } }
@keyframes dsRobot { 0%, 22% { transform: translateX(-90px) rotate(-10deg); opacity: 0; } 34%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes dsStamp { 0%, 40% { transform: scale(2.4) rotate(-12deg); opacity: 0; } 47%, 88% { transform: scale(1) rotate(-12deg); opacity: 1; } 100% { opacity: 0; } }
@keyframes dsCheck { 0%, 56% { transform: scale(0); } 63%, 88% { transform: scale(1); } 100% { transform: scale(0); } }

/* Motion: alte Seite mit Abmahnungen → neue Seite mit DSGVO-Stempel */
.ov-neustart { background: rgba(0, 0, 0, .25); }
.ov-neustart .ns-old, .ov-neustart .ns-new { position: absolute; inset: 16px 20px; border-radius: 6px; overflow: hidden; }
.ns-old { background: #d9dde4; filter: saturate(.4); animation: nsOld 10s linear infinite; }
.ns-old i { position: absolute; left: 10%; right: 10%; height: 8px; border-radius: 2px; background: #b9c0cc; }
.ns-old i:nth-child(1) { top: 18%; right: 40%; } .ns-old i:nth-child(2) { top: 38%; } .ns-old i:nth-child(3) { top: 56%; height: 28%; right: 50%; }
.ns-x { position: absolute; left: 50%; top: 50%; font: 900 110px/1 var(--f-body); color: rgba(229, 72, 77, .85); transform: translate(-50%, -54%) scale(0); animation: nsX 10s ease-out infinite; }
.ns-warn { position: absolute; padding: 4px 8px; border: 2.5px solid #e5484d; border-radius: 4px; color: #e5484d; background: rgba(255, 255, 255, .85); font: 900 12px var(--f-head); letter-spacing: .08em; text-transform: uppercase; opacity: 0; }
.ns-warn.w1 { left: 8%; top: 12%; transform: rotate(-10deg); animation: nsWarn1 10s ease-out infinite; }
.ns-warn.w2 { right: 8%; top: 40%; transform: rotate(8deg); animation: nsWarn2 10s ease-out infinite; }
.ns-warn.w3 { left: 18%; bottom: 12%; transform: rotate(-4deg); animation: nsWarn3 10s ease-out infinite; }
.ns-cost { position: absolute; right: 10%; bottom: 10%; font: 800 26px/1 'Comic Sans MS', 'Marker Felt', cursive; color: #e5484d; transform: rotate(-6deg); opacity: 0; animation: nsCost 10s ease-out infinite; }
.ns-new { background: var(--ink); opacity: 0; animation: nsNew 10s linear infinite; }
.ns-new .bar { height: 14px; background: rgba(255, 255, 255, .08); display: flex; gap: 4px; align-items: center; padding: 0 6px; }
.ns-new .bar i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.ns-new .nb { position: absolute; left: 9%; border-radius: 2px; }
.ns-new .n1 { top: 26%; width: 48%; height: 12px; background: #fff; }
.ns-new .n2 { top: 46%; width: 30%; height: 10px; background: var(--blue); }
.ns-new .n3 { top: 64%; width: 58%; height: 22%; background: var(--grad); }
.ns-ok { position: absolute; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--grad-green); transform: scale(0); }
.ns-ok svg { color: #fff !important; }
.ns-ok.o1 { left: calc(9% + 48% + 8px); top: calc(26% - 4px); animation: nsOk 10s cubic-bezier(.2, 1.6, .4, 1) infinite; animation-delay: .2s; }
.ns-ok.o2 { left: calc(9% + 30% + 8px); top: calc(46% - 5px); animation: nsOk 10s cubic-bezier(.2, 1.6, .4, 1) infinite; animation-delay: .4s; }
.ns-ok.o3 { left: calc(9% + 58% + 8px); top: 68%; animation: nsOk 10s cubic-bezier(.2, 1.6, .4, 1) infinite; animation-delay: .6s; }
.ns-stamp { position: absolute; right: 8%; top: 20%; display: inline-flex; gap: 5px; align-items: center; padding: 5px 9px; border: 2.5px solid #34d399; border-radius: 5px; color: #34d399; font: 900 13px var(--f-head); letter-spacing: .06em; transform: rotate(-10deg) scale(0); animation: nsStamp 10s cubic-bezier(.2, 1.4, .4, 1) infinite; }
.ns-stamp svg { color: #34d399 !important; }
@keyframes nsOld { 0%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes nsX { 0%, 4% { transform: translate(-50%, -54%) scale(0); } 9%, 46% { transform: translate(-50%, -54%) scale(1); } 52%, 100% { transform: translate(-50%, -54%) scale(1); } }
@keyframes nsWarn1 { 0%, 11% { opacity: 0; transform: rotate(-10deg) scale(2); } 14%, 46% { opacity: 1; transform: rotate(-10deg) scale(1); } 52%, 100% { opacity: 0; } }
@keyframes nsWarn2 { 0%, 17% { opacity: 0; transform: rotate(8deg) scale(2); } 20%, 46% { opacity: 1; transform: rotate(8deg) scale(1); } 52%, 100% { opacity: 0; } }
@keyframes nsWarn3 { 0%, 23% { opacity: 0; transform: rotate(-4deg) scale(2); } 26%, 46% { opacity: 1; transform: rotate(-4deg) scale(1); } 52%, 100% { opacity: 0; } }
@keyframes nsCost { 0%, 29% { opacity: 0; clip-path: inset(0 100% 0 0); } 34% { opacity: 1; clip-path: inset(0 0 0 0); } 42% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes nsNew { 0%, 50% { opacity: 0; transform: scale(.96); } 56%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes nsStamp { 0%, 62% { transform: rotate(-10deg) scale(0); } 67%, 94% { transform: rotate(-10deg) scale(1); } 100% { transform: rotate(-10deg) scale(0); } }
@keyframes nsOk { 0%, 72% { transform: scale(0); } 77%, 94% { transform: scale(1); } 100% { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) {
  .ov-dsgvo *, .ov-neustart * { animation: none !important; }
  .ns-old { opacity: 0; } .ns-new { opacity: 1; } .ns-stamp, .ns-ok, .ov-check { transform: none !important; } .ov-stamp { opacity: 1; transform: rotate(-12deg); }
}

/* Print-Marketing-Paket – mit Abstand unter dem All-in-One */
.print { margin-top: 56px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.print-head { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 24px; align-items: center; margin-bottom: 22px; }
.print-head h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 4px 0; }
.print-head p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.print-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; }
.print-list li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 15px; color: var(--ink-soft); line-height: 1.45; }
.print-list svg { margin-top: 3px; }
.print-list b { color: var(--ink); }
@media (max-width: 760px) { .print-head { grid-template-columns: auto 1fr; } .print-head .addon-price { grid-column: 1 / -1; } .print-list { grid-template-columns: 1fr; } }

/* Online-Marketing-Paket: monatliche Betreuung, farbig hinterlegt */
.om { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 24px; padding: clamp(26px, 4vw, 48px); color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(92, 200, 255, .28), transparent 55%), linear-gradient(135deg, #062a52 0%, #0a3d78 45%, #0b2447 100%);
  border: 1px solid rgba(92, 200, 255, .3); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); }
.om > * { min-width: 0; }
.om-tag { display: inline-block; padding: 7px 12px; margin-bottom: 16px; border-radius: 2px; background: var(--grad-green); color: #fff; font: 800 11.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.om h3 { font-size: clamp(28px, 3vw, 42px); margin-bottom: 10px; }
.om-only { display: flex; gap: 8px; align-items: center; font-size: 14px; color: rgba(255, 255, 255, .75); margin-bottom: 18px; }
.om-only svg { color: #9fd8ff; flex: none; }
.om .offer-list li { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .12); }
.om .offer-list li svg { color: #6ee7b7; }
.om .offer-list li.hl svg { color: #6ee7b7; }
.om .tip-btn { background: #fff; color: var(--blue); }
.om-price { display: grid; gap: 6px; padding: 20px; border-radius: var(--r); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .3); margin-bottom: 18px; }
.om-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.om-amount strong { font: 800 clamp(42px, 4.4vw, 58px)/1 var(--f-head); font-stretch: 106%; letter-spacing: -.04em; background: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.om-amount > span:not(.save-chip) { color: rgba(255, 255, 255, .7); font-weight: 700; }
.om-price small { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.om-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r); background: rgba(255, 255, 255, .08); }
.om-switch button { padding: 9px 8px; border-radius: 3px; font: 700 13px/1.2 var(--f-body); color: rgba(255, 255, 255, .75); transition: background .3s, color .3s; }
.om-switch button[aria-checked="true"] { background: #fff; color: var(--ink); }
.om-switch.small { margin: 10px 0 6px; max-width: 360px; background: var(--bg-soft); }
.om-switch.small button { color: var(--ink-soft); font-size: 12.5px; }
.om-switch.small button[aria-checked="true"] { background: var(--ink); color: #fff; }
.om .offer-incl { background: rgba(255, 255, 255, .06); margin: 0 0 16px; }
.om .offer-incl .incl-h { color: #9fd8ff; }
.om .offer-incl li { color: rgba(255, 255, 255, .8); }
.om .offer-incl li svg { color: #6ee7b7; }
.om-compare { margin: 0 0 18px; padding: 14px 16px; border-left: 3px solid #6ee7b7; background: rgba(255, 255, 255, .06); font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.om-compare b { color: #fff; }
.om-compare .deal { background-image: var(--grad-green-text); }
.opt .opt-price .save-chip { display: block; margin-top: 6px; font-size: 10.5px; }
@media (max-width: 900px) { .om { grid-template-columns: 1fr; } }

/* Tooltip „DSGVO“ – breiter, mit Liste und Kasten */
.tip-pop.wide { width: min(520px, calc(100vw - 32px)); }
.tip-list { margin: 0 0 12px; padding-left: 18px; color: rgba(255, 255, 255, .8); display: grid; gap: 6px; }
.tip-box { margin: 4px 0 12px; padding: 14px; border-radius: var(--r); background: linear-gradient(120deg, rgba(52, 211, 153, .2), rgba(16, 185, 129, .06)); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .4); color: rgba(255, 255, 255, .9); }
.tip-pop .tip-box b { display: inline; font: 700 14px var(--f-body); margin: 0; }
/* Flyer: nur der Flyer selbst, ohne Rahmen */
.fp-sheet { height: auto; background: none; border-radius: 2px; }
.fp-sheet img { height: auto; object-fit: contain; }

/* Referenzen: große Vorschau + Karten zum Umschalten */
button.example { width: 100%; text-align: left; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.example.is-active .ex-frame { box-shadow: 0 0 0 3px var(--green), 0 30px 60px -30px rgba(7, 11, 20, .4); }
.example.is-active .ex-go { background: var(--grad-green); }
.example.is-static { cursor: default; }
.examples { grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .examples { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .examples { grid-template-columns: 1fr; } }
.examples .ex-meta h3 { font-size: 20px; }
.examples .ex-meta p { font-size: 14px; }
.ex-feature .ex-frame { position: relative; }
.ex-nav { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px; margin-top: -26px; display: grid; place-items: center; border-radius: 50%; background: rgba(7, 11, 20, .75); color: #fff; backdrop-filter: blur(6px); transition: background .3s, transform .3s var(--ease); }
.ex-nav:hover { background: var(--grad-green); transform: scale(1.06); }
.ex-nav.prev { left: 16px; } .ex-nav.prev svg { transform: rotate(180deg); }
.ex-nav.next { right: 16px; }
.ex-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 6px; }
.ex-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); transition: width .3s var(--ease), background .3s; }
.ex-dots i.is-on { width: 24px; background: #fff; }
.ex-hint { margin: 8px 0 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
/* Vergleich: Luft zwischen Praxisbeispiel, Gefahren und Tabelle */
.practice-note { margin-bottom: 0; }
.danger-head { margin-top: clamp(100px, 10vw, 140px); text-align: left; }
.danger-head h2 { font-size: clamp(34px, 4.6vw, 64px); margin-bottom: 18px; }
.danger-head .mini-head { font-family: var(--f-body); font-weight: 600; color: var(--ink-soft); }
.wp-alert { margin: 26px 0 50px; }

/* ==========================================================================
   Zahlen, die zählen: horizontaler Slider mit großen Karten + Motion-Grafik
   ========================================================================== */
.stat-rail { overflow: hidden; padding: 10px 0 20px; }
.stat-track { display: flex; gap: 24px; width: max-content; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); will-change: transform; }
.stat-card { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 28px; width: min(860px, 78vw); min-height: 440px; padding: clamp(28px, 4vw, 56px); background: var(--bg-soft); border: 1px solid var(--line); overflow: hidden; transition: background .5s var(--ease), color .5s var(--ease), border-color .5s;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
.stat-card .sc-n { font: 700 12px var(--f-head); font-stretch: 120%; letter-spacing: .16em; color: var(--blue); }
.stat-card .num { font: 780 clamp(64px, 8vw, 128px)/1 var(--f-head); font-stretch: 106%; letter-spacing: -.05em; margin: 14px 0 18px; display: flex; align-items: baseline; }
.stat-card .num i { font-style: normal; color: var(--blue); font-size: .45em; margin-left: 6px; letter-spacing: -.02em; }
.stat-card p { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); max-width: 26em; transition: color .5s; }
.stat-card p strong { color: var(--ink); transition: color .5s; }
.stat-card .src { display: block; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.sc-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-height: 340px; transition: transform .7s var(--ease); }
.sc-art::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 134, 255, .14), transparent 70%); transition: opacity .5s; }
.mg { width: 100%; height: 100%; overflow: visible; position: relative; }
.mg * { vector-effect: non-scaling-stroke; }
.mg-ring { fill: none; stroke: #cfd6e2; stroke-width: 2; }
.mg-line { fill: none; stroke: #9aa3b2; stroke-width: 2; stroke-linecap: round; }
.mg-txt { font: 800 24px var(--f-head); fill: var(--ink); text-anchor: middle; }
.mg-txt.sm { font-size: 15px; fill: var(--muted); }
/* 1 Uhr */
.mg-arc { fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 415; stroke-dashoffset: 415; transform: rotate(-90deg); transform-origin: 100px 108px; animation: mgArc 2.4s cubic-bezier(.6, 0, .2, 1) infinite; }
.mg-hand { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; transform-origin: 100px 108px; animation: mgHand 2.4s cubic-bezier(.6, 0, .2, 1) infinite; }
.mg-dot { fill: var(--blue); }
@keyframes mgArc { 0% { stroke-dashoffset: 415; } 40%, 80% { stroke-dashoffset: 395; } 100% { stroke-dashoffset: 415; } }
@keyframes mgHand { 0% { transform: rotate(0); } 40%, 80% { transform: rotate(18deg); } 100% { transform: rotate(0); } }
/* 2 Handy */
.mg-screen { fill: #e4e8ef; }
.mg-fill { fill: var(--blue); transform-origin: 100px 164px; transform: scaleY(0); animation: mgFill 3.2s var(--ease) infinite; opacity: .9; }
@keyframes mgFill { 0% { transform: scaleY(0); } 45%, 80% { transform: scaleY(.62); } 100% { transform: scaleY(0); } }
.mg-phone .mg-txt { fill: #fff; mix-blend-mode: difference; }
/* 3 Ladebalken + Besucher gehen */
.mg-bar { fill: var(--blue); transform-origin: 24px 67px; transform: scaleX(0); animation: mgLoad 4s linear infinite; }
@keyframes mgLoad { 0% { transform: scaleX(0); } 50%, 100% { transform: scaleX(1); } }
.mg-people circle { fill: var(--ink); animation: mgStay 4s ease-in infinite; }
.mg-people .p1, .mg-people .p3, .mg-people .p4 { animation-name: mgLeave; }
@keyframes mgStay { 0%, 100% { opacity: 1; } }
@keyframes mgLeave { 0%, 50% { transform: none; opacity: 1; fill: var(--ink); } 60% { fill: #e5484d; } 85%, 100% { transform: translateY(60px); opacity: 0; } }
/* 4 Standort */
.mg-drop { fill: var(--blue); animation: mgDrop 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; transform-origin: 100px 150px; }
.mg-hole { fill: #fff; animation: mgDrop 2.8s cubic-bezier(.3, 1.6, .5, 1) infinite; transform-origin: 100px 150px; }
.mg-radar { fill: none; stroke: var(--blue); stroke-width: 2; transform-origin: 100px 160px; animation: mgRadar 2.8s ease-out infinite; }
.mg-radar.r2 { animation-delay: 1.4s; }
@keyframes mgDrop { 0% { transform: translateY(-60px); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes mgRadar { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
/* 5 Plugins mit Lücken */
.mg-plug rect { fill: #e4e8ef; stroke: #cfd6e2; stroke-width: 1.5; animation: mgPlug 3s ease-in-out infinite; animation-delay: calc(var(--d, 0) * 1s); }
.mg-plug .b1, .mg-plug .b5, .mg-plug .b6 { animation-name: mgBug; }
.mg-plug .b5 { animation-delay: .5s; } .mg-plug .b6 { animation-delay: 1s; }
.mg-x { stroke: #e5484d; stroke-width: 6; stroke-linecap: round; animation: mgPulse 1.5s ease-in-out infinite; }
@keyframes mgBug { 0%, 100% { fill: #e4e8ef; } 50% { fill: #fca5a5; stroke: #e5484d; } }
@keyframes mgPulse { 50% { opacity: .3; } }
/* 6 Umsatz */
.mg-bars rect { fill: #cfd6e2; transform-origin: center bottom; transform-box: fill-box; animation: mgGrow 3.4s var(--ease) infinite; }
.mg-bars .c4 { fill: var(--green); }
.mg-bars .c1 { animation-delay: .1s; } .mg-bars .c2 { animation-delay: .2s; } .mg-bars .c3 { animation-delay: .3s; } .mg-bars .c4 { animation-delay: .4s; }
.mg-trend { fill: none; stroke: var(--blue); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 160; animation: mgTrend 3.4s var(--ease) infinite; }
@keyframes mgGrow { 0% { transform: scaleY(0); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes mgTrend { 0%, 20% { stroke-dashoffset: 160; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 160; } }

/* Hover: Karte wird dunkel, Schrift invertiert, Grafik groß */
.stat-card:hover { background: var(--grad-anthra); border-color: #3a3f47; color: #fff; }
.stat-card:hover p { color: rgba(255, 255, 255, .78); }
.stat-card:hover p strong { color: #fff; }
.stat-card:hover .src { color: rgba(255, 255, 255, .5); }
.stat-card:hover .num i, .stat-card:hover .sc-n { color: #5cc8ff; }
.stat-card:hover .sc-art { transform: scale(1.28); }
.stat-card:hover .sc-art::before { background: radial-gradient(circle, rgba(52, 211, 153, .22), transparent 70%); }
.stat-card:hover .mg-ring { stroke: rgba(255, 255, 255, .25); }
.stat-card:hover .mg-hand, .stat-card:hover .mg-people circle:not(.p1):not(.p3):not(.p4) { stroke: #fff; fill: #fff; }
.stat-card:hover .mg-screen, .stat-card:hover .mg-plug rect:not(.b1):not(.b5):not(.b6), .stat-card:hover .mg-bars rect:not(.c4) { fill: rgba(255, 255, 255, .18); }
.stat-card:hover .mg-txt.sm { fill: rgba(255, 255, 255, .6); }
@media (max-width: 860px) {
  .stat-rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .stat-track { padding: 0 var(--gutter); gap: 14px; }
  .stat-card { width: 84vw; grid-template-columns: 1fr; min-height: 0; scroll-snap-align: center; gap: 10px; }
  .sc-art { max-height: 200px; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .mg * { animation: none !important; } .mg-fill { transform: scaleY(.62); } .mg-bar { transform: none; } .mg-arc { stroke-dashoffset: 395; } }

/* So läuft's ab: große Karten mit dezenter Motion-Grafik im Hintergrund */
.process-wrap { overflow: hidden; padding: 10px 0 20px; }
.process-track { display: flex; gap: 24px; width: max-content; max-width: none; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
.process-track .step { width: min(560px, 80vw); min-height: 520px; padding: 40px 36px; overflow: hidden; isolation: isolate; }
.process-track .step .s-big { font-size: clamp(140px, 14vw, 200px); }
.process-track .step h3 { font-size: clamp(24px, 2.4vw, 34px); hyphens: manual; }
.process-track .step p { font-size: 17px; max-width: 26em; }
.s-bg { position: absolute; z-index: -1; right: -40px; bottom: -40px; width: 300px; height: 300px; display: grid; place-items: center; color: var(--blue); opacity: .07; animation: sBg 14s ease-in-out infinite; }
.s-bg svg { width: 100%; height: 100%; }
.step::after { content: ''; position: absolute; z-index: -2; width: 420px; height: 420px; right: -160px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 134, 255, .12), transparent 65%); animation: sGlow 9s ease-in-out infinite; }
.step::before { content: ''; position: absolute; z-index: -2; inset: 0; background-image: linear-gradient(rgba(0, 134, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 134, 255, .05) 1px, transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(160deg, transparent 30%, #000); animation: sGrid 20s linear infinite; }
.step.dark .s-bg { color: #34d399; opacity: .12; }
.step.dark::after { background: radial-gradient(circle, rgba(52, 211, 153, .18), transparent 65%); }
@keyframes sBg { 50% { transform: rotate(8deg) scale(1.06); } }
@keyframes sGlow { 50% { transform: translate(-60px, 60px) scale(1.15); } }
@keyframes sGrid { to { background-position: 36px 36px; } }
@media (max-width: 860px) {
  .process-wrap { overflow-x: auto; scroll-snap-type: x mandatory; }
  .process-track { padding: 0 var(--gutter); gap: 14px; }
  .process-track .step { width: 84vw; min-height: 440px; scroll-snap-align: center; padding: 30px 24px; }
}
@media (prefers-reduced-motion: reduce) { .s-bg, .step::after, .step::before { animation: none; } }
/* Echte Screenshots in den Referenzen */
.pf-shot { width: 100%; max-width: 380px; height: 100%; max-height: 300px; margin: 0 auto; overflow: hidden; border-radius: 14px; background: #0f1218; box-shadow: 0 18px 40px -18px rgba(7, 11, 20, .5); }
.pf-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ex-slides img.mob { object-fit: contain; background: linear-gradient(160deg, #eef1f6, #dfe5ee); padding-top: 28px; }
.ol-real { background: linear-gradient(160deg, #eef3e4, #dfe8cf); display: grid; place-items: center; }
.ol-real img { height: 92%; width: auto; max-width: 70%; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(7, 11, 20, .45); }
.brand-show .bs-browser img { max-height: 320px; width: 100%; object-fit: cover; object-position: top center; }

/* So arbeiten wir: zweite große Zeile */
.agent-save { margin: 10px 0 0; font: 760 clamp(30px, 4vw, 56px)/1.05 var(--f-head); font-stretch: 108%; letter-spacing: -.035em; background: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
/* Gefahren: Überschrift positiv (grün), Hinweis-Karten deutlich rötlich */
.danger-head .safe { font-style: italic; background: var(--grad-green); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .08em; }
.wp-alert div { background: linear-gradient(150deg, #fff1f1 0%, #ffe3e3 100%); border-color: #f6c4c4; border-left: 4px solid #e5484d; }
.wp-alert strong { color: #c4262b; }
.wp-alert .wp-ic { color: #e5484d; }
/* Print-Paket: Preis wie bei den anderen Paketen */
.print-price { display: grid; justify-items: end; gap: 2px; text-align: right; }
.print-price strong { font: 780 clamp(40px, 4vw, 54px)/1 var(--f-head); font-stretch: 108%; letter-spacing: -.04em; }
.print-price .price-monthly { margin: 0; }
@media (max-width: 760px) { .print-price { justify-items: start; text-align: left; } }
/* Neuer Look: Desktop-Screenshot füllt die Fläche */
.ol-real img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; border-radius: 0; box-shadow: none; }
/* Referenzen: 6. Kachel als Platzhalter */
.ex-yours { display: block; color: inherit; }
.ex-placeholder { position: absolute; inset: 28px 0 0; display: grid; place-content: center; justify-items: center; gap: 4px; background: repeating-linear-gradient(-45deg, #e9edf2 0 14px, #e1e6ee 14px 28px); color: var(--muted); }
.ex-placeholder span { font: 800 clamp(44px, 5vw, 64px)/1 var(--f-head); color: #9aa3b2; }
.ex-placeholder small { font-size: 14px; font-weight: 700; }
.ex-yours:hover .ex-placeholder { background: repeating-linear-gradient(-45deg, #e4f0ff 0 14px, #d9e9ff 14px 28px); }

/* Shop v5: Webseite-Box mit Hosting-Pauschale, grüne Häkchen, gut lesbare Hinweise */
.pkg-switch.two { grid-template-columns: 1fr 1fr; }
.opt ul.check-list { display: grid; gap: 6px; margin: 10px 0 0; }
.opt ul.check-list li { position: relative; padding: 0 0 0 24px; background: none; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.opt ul.check-list li::before { content: ''; position: absolute; left: 3px; top: 5px; width: 10px; height: 5px; border: solid var(--green); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.web-box { cursor: default; }
.web-box > .box { background: var(--ink); border-color: var(--ink); color: #fff; }
.host-box { display: block; margin-top: 16px; padding: 14px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--green); }
.host-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.host-head b { font: 760 16px var(--f-head); font-stretch: 110%; }
.host-price { margin-left: auto; font: 780 16px var(--f-head); }
.tip-word { border-bottom: 1.5px dashed var(--blue); color: var(--ink); cursor: help; }
.tip-word:hover, .tip-word:focus-visible { color: var(--blue); outline: none; }
.shop-intro { margin: -4px 0 14px; font-size: 15px; color: var(--ink-soft); max-width: 560px; }
.shop-label { font-size: 15px; }
/* Übersicht: Hinweise größer und weiß – nichts soll versteckt wirken */
.shop-summary .sum-row small.terms { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, .88); margin-top: 3px; }
.shop-summary .sum-note { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.shop-summary .sum-note b { color: #fff; }
.sum-total .once small, .sum-total .mo .mo-note { color: rgba(255, 255, 255, .85) !important; font-size: 13px; }

/* So arbeiten wir: Agenten → Prüfung → Kanal → gläserner Kunde */
.ag-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px 200px; align-items: center; gap: 0; }
.ag-layout .ag-stage { width: 100%; }
.ag-channel { position: relative; display: grid; justify-items: center; gap: 10px; }
.ag-pipe { position: relative; display: block; width: 100%; height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .35), 0 0 24px rgba(52, 211, 153, .15); overflow: hidden; }
.ag-pipe i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(110, 231, 183, .75) 14px 22px); animation: agPipe 1.2s linear infinite; }
@keyframes agPipe { to { background-position: 36px 0; } }
.ag-channel small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6ee7b7; text-align: center; }
.ag-client { display: grid; justify-items: center; gap: 4px; text-align: center; perspective: 700px; }
.ag-client b { margin-top: 10px; font: 760 20px var(--f-head); }
.ag-client small { font-size: 12.5px; color: rgba(255, 255, 255, .6); max-width: 15em; }
.ag-glass { position: relative; width: 150px; height: 150px; display: grid; place-items: center; border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 55%, rgba(92, 200, 255, .12));
  border: 1px solid rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -18px 30px rgba(0, 134, 255, .18), 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 40px rgba(0, 134, 255, .25);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .4s; animation: agFloat 5s ease-in-out infinite; }
.ag-glass::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .35) 45%, transparent 60%); background-size: 260% 100%; animation: agShine 6s ease-in-out infinite; pointer-events: none; }
@keyframes agShine { 0%, 40% { background-position: 130% 0; } 80%, 100% { background-position: -130% 0; } }
@keyframes agFloat { 50% { translate: 0 -8px; } }
.ag-client:hover .ag-glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -18px 30px rgba(52, 211, 153, .25), 0 40px 70px -20px rgba(0, 0, 0, .8), 0 0 60px rgba(52, 211, 153, .35); }
.ag-face { width: 96px; height: 96px; transform: translateZ(30px); }
.ag-face .m-smile { opacity: 0; transition: opacity .3s; }
.ag-face .m-flat { transition: opacity .3s; }
.ag-client.is-happy .m-smile, .ag-client:hover .m-smile { opacity: 1; }
.ag-client.is-happy .m-flat, .ag-client:hover .m-flat { opacity: 0; }
.ag-heart { position: absolute; top: 18px; color: #6ee7b7; font-size: 16px; opacity: 0; transform: translateZ(40px); }
.ag-heart.h1 { right: 14px; } .ag-heart.h2 { left: 16px; top: 30px; color: #ff8fa3; } .ag-heart.h3 { right: 30px; top: 6px; color: #fff; }
.ag-client.is-happy .ag-heart { animation: agHeart 1.4s ease-out; }
.ag-client.is-happy .ag-heart.h2 { animation-delay: .15s; } .ag-client.is-happy .ag-heart.h3 { animation-delay: .3s; }
@keyframes agHeart { 0% { opacity: 0; translate: 0 10px; scale: .5; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 -34px; scale: 1.2; } }
/* Dokument / Webseite, die geprüft wird */
.ag-doc { position: absolute; z-index: 5; left: 0; top: 0; width: 58px; height: 72px; padding: 10px 8px 0; border-radius: 6px; background: #fff; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6); opacity: 0; pointer-events: none; }
.ag-doc i { display: block; height: 4px; margin: 5px 0; border-radius: 2px; background: #cfd6e2; }
.ag-doc i:nth-child(3) { width: 70%; }
.ag-doc .ag-doc-ic { display: block; height: 16px; border-radius: 3px; background: var(--grad-glow); }
.ag-doc.is-web { width: 76px; height: 58px; padding-top: 14px; }
.ag-doc.is-web::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 6px 6px 0 0; background: #e4e8ef; }
.ag-doc-mark { position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font: 800 13px/1 var(--f-body); color: #fff; transform: scale(0); }
.ag-doc.is-ok .ag-doc-mark { background: var(--grad-green); transform: scale(1); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.ag-doc.is-ok .ag-doc-mark::after { content: '✓'; }
.ag-doc.is-no .ag-doc-mark { background: #e5484d; transform: scale(1); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.ag-doc.is-no .ag-doc-mark::after { content: '↺'; }
.ag-doc::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; top: 0; background: #34d399; box-shadow: 0 0 10px #34d399; opacity: 0; }
.ag-doc.is-scan::after { opacity: 1; animation: agScan .9s ease-in-out 2 alternate; }
@keyframes agScan { from { top: 4px; } to { top: calc(100% - 4px); } }
.ag-core.is-busy { box-shadow: 0 0 0 10px rgba(52, 211, 153, .18), 0 0 80px rgba(52, 211, 153, .45); }
.ag-node.is-ping { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .25); }
@media (max-width: 1100px) { .ag-layout { grid-template-columns: minmax(0, 1fr) 90px 170px; } .ag-glass { width: 120px; height: 120px; } }
@media (max-width: 860px) {
  .ag-layout { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .ag-channel { width: 14px; height: 70px; }
  .ag-pipe { width: 14px; height: 70px; }
  .ag-pipe i { background: repeating-linear-gradient(180deg, transparent 0 14px, rgba(110, 231, 183, .75) 14px 22px); }
  .ag-channel small { position: absolute; left: 24px; top: 26px; white-space: nowrap; }
  .ag-doc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ag-glass, .ag-glass::before, .ag-pipe i { animation: none; } }

/* Shop v6 */
.host-box { background: transparent; border: 1px solid #d6dce6; box-shadow: none; }
.host-head { margin-bottom: 2px; }
.opt-price-sub { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font: 780 17px/1.1 var(--f-head); }
.opt-price-sub small { display: block; font: 600 12px var(--f-body); color: var(--muted); }
.js-upgrade-opt { margin-bottom: 40px; }
.shop-step3 { font: 760 clamp(20px, 2vw, 26px)/1.2 var(--f-head); font-stretch: 108%; letter-spacing: -.02em; margin: 0 0 10px; }
.shop-step3 span { display: block; font: 700 13px var(--f-head); font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
.shop-intro strong { color: var(--ink); }
.om-reco { display: block; justify-self: end; margin: 0 0 8px auto; width: max-content; padding: 4px 9px; border-radius: 3px; background: var(--grad-anthra); color: #fff; font: 700 10.5px var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.om-shop-price { display: block; transition: color .3s; }
.om-shop-price.deal { background-image: var(--grad-green); }
/* E-Mail-Sprechblase: Nachrichten wischen hoch */
.mail-chat { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.mc-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(140deg, #0b3d91, #062a66); color: #fff; box-shadow: 0 6px 14px -6px rgba(6, 42, 102, .7); }
.mc-ic svg { color: #fff !important; }
.mc-stack { position: relative; flex: 1; min-width: 0; height: 74px; overflow: hidden; }
.mc-msg { position: absolute; inset: 0 auto auto 0; display: grid; gap: 5px; justify-items: start; opacity: 0; transform: translateY(100%); transition: transform .55s var(--ease), opacity .4s; }
.mc-msg.is-on { opacity: 1; transform: none; }
.mc-msg.is-out { opacity: 0; transform: translateY(-100%); }
.mc-in { position: relative; padding: 7px 12px; border-radius: 4px 14px 14px 14px; background: #fff; border: 1px solid #d9e2f1; font-size: 13.5px; font-weight: 600; color: var(--ink); box-shadow: 0 6px 16px -10px rgba(7, 11, 20, .35); }
.mc-out { padding: 5px 11px; margin-left: 18px; border-radius: 14px 4px 14px 14px; background: #dcf8c6; color: #0f5132; font-size: 12.5px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .mc-msg { transition: none; } }
/* Hero v5: „Datenschutzkonform.“ und mehr Luft zum Slider */
.hero-dsgvo { margin: -10px 0 0; font: italic 300 clamp(22px, 2.4vw, 32px)/1.1 var(--f-head); font-stretch: 105%; letter-spacing: -.01em; background: var(--grad-green-text); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; padding-right: .1em; }
.hero-kicker { margin-top: 80px; }
@media (max-width: 760px) { .hero-kicker { margin-top: 44px; } }
.shop .shop-product .shop-step3 { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.2; margin: 0 0 10px; }
.ol-face > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* Übersicht: Monatsbetrag einzeilig, gleiche Größe wie der Einmalbetrag; monatlich = neutral (weiß) */
.sum-total .once strong, .mo-price strong { font: 780 30px/1.05 var(--f-head) !important; letter-spacing: -.03em; white-space: nowrap; }
.mo-price { display: grid; gap: 2px; }
.mo-price s { font-size: 14px; }
.mo.is-monthly { background: rgba(255, 255, 255, .05) !important; border-color: transparent; }
.mo.is-monthly .mo-price strong { background-image: none; -webkit-text-fill-color: #fff; color: #fff; }
.mo.is-monthly .bill-switch i { background: rgba(255, 255, 255, .7); }
@media (max-width: 1200px) and (min-width: 481px) { .sum-total .once strong, .mo-price strong { font-size: 26px !important; } }

/* Warenkorb: 50 % breiter und übersichtlicher */
.drawer { width: min(690px, 100%); }
.cart-item .ci-top { align-items: flex-start; margin-bottom: 14px; }
.ci-note { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ci-group { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); }
.ci-h { display: block; margin-bottom: 6px; font: 700 11px var(--f-head); font-stretch: 120%; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.cart-item .ci-line { gap: 16px; align-items: baseline; padding: 6px 0; font-size: 14.5px; color: var(--ink); border-bottom: 1px dashed var(--line); }
.cart-item .ci-line:last-child { border-bottom: 0; }
.cart-item .ci-line b { white-space: nowrap; font-weight: 700; }
.cart-item .ci-line small.terms { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.ci-pill { font-style: normal; font-size: 11px; font-weight: 700; color: #0f5132; background: #dcfce7; padding: 2px 7px; border-radius: 10px; margin-left: 4px; white-space: nowrap; }
.ci-toggle { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--blue-light); font-size: 13.5px; color: var(--ink-soft); cursor: pointer; }
.ci-toggle input { margin-top: 3px; accent-color: var(--blue); }
.ci-toggle b { color: var(--ink); }
.cart-tot b { white-space: nowrap; }
/* Online-Marketing im Shop: Badge sitzt auf der Box (ragt oben und rechts heraus) */
.js-opt-marketing-row { position: relative; overflow: visible; }
.om-reco { position: absolute; top: -12px; right: -10px; z-index: 2; margin: 0; padding: 6px 11px; border-radius: 3px; background: linear-gradient(100deg, #d9fbe8, #a7f3d0); color: #065f46; box-shadow: 0 6px 16px -6px rgba(16, 185, 129, .55); }
.opt .opt-price .save-chip { display: inline-block; width: auto; justify-self: end; margin-top: 6px; }
.opt .opt-price { display: grid; justify-items: end; align-content: start; }
/* Print: Badge im Instagram-Verlauf */
.opt .pill.pill-insta { background: linear-gradient(100deg, #f58529 0%, #dd2a7b 50%, #8134af 100%); color: #fff; }
/* Digitaler Neustart: Preis weiß mit leichtem Verlauf ins Hellgrau */
.offer.featured .price strong { background: linear-gradient(135deg, #ffffff 35%, #c9ced6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* So arbeiten wir v3: 8 Plätze mit wechselnden Agenten, gläsernes Firmengebäude, 123-Team, gläserner Kunde */
.ag-layout { grid-template-columns: minmax(0, 1fr) 110px 300px; }
.ag-node { padding: 0; }
.ag-in { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; transition: opacity .45s var(--ease), transform .45s var(--ease), filter .45s; }
.ag-in:not(.is-on) { display: none; }
.ag-node.is-swap .ag-in { opacity: 0; transform: scale(.7) translateY(10px); filter: blur(4px); }
.ag-core { width: min(300px, 34%); padding: 26px 22px 22px; gap: 4px; overflow: hidden; clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 100%, 0 100%);
  background: linear-gradient(160deg, rgba(160, 210, 255, .28) 0%, rgba(40, 80, 140, .35) 45%, rgba(10, 20, 40, .7) 100%);
  border: 0; box-shadow: inset 0 0 0 1px rgba(160, 210, 255, .35), 0 30px 80px -20px rgba(0, 134, 255, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ag-core::before { background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); background-size: 260% 100%; animation: agShine 7s ease-in-out infinite; opacity: 1; }
.ag-facade { position: absolute; inset: 22% 10% 8%; opacity: .45; background:
  repeating-linear-gradient(90deg, rgba(160, 210, 255, .5) 0 1px, transparent 1px 22px),
  repeating-linear-gradient(0deg, rgba(160, 210, 255, .35) 0 1px, transparent 1px 18px); mask-image: linear-gradient(transparent, #000 30%); }
.ag-logo { position: relative; font: 800 20px/1 var(--f-logo); letter-spacing: -.02em; margin-top: 8px; }
.ag-logo .l-123 { display: inline-block; transform: skewX(-12deg); background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ag-logo .l-de { font-weight: 300; }
.ag-title { position: relative; font: 760 clamp(18px, 1.8vw, 24px)/1.1 var(--f-head); font-stretch: 110%; margin-top: 6px; }
.ag-core small { position: relative; max-width: 16em; }
/* 123-Team: kleine gläserne Avatare, die abwechselnd arbeiten */
.ag-team { position: absolute; z-index: 3; left: 50%; top: calc(50% + 92px); transform: translateX(-50%); display: flex; gap: 10px; }
.ag-human { position: relative; display: grid; justify-items: center; width: 46px; }
.ag-hglass { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(255, 255, 255, .28), rgba(92, 200, 255, .08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 18px -8px rgba(0, 0, 0, .6); transition: transform .4s var(--ease), box-shadow .4s; }
.ag-hglass svg { width: 34px; height: 34px; }
.ag-hglass .gl-head, .ag-hglass .gl-body { fill: rgba(200, 235, 255, .55); stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; }
.ag-hglass .gl-mouth { fill: none; stroke: #0b2a4a; stroke-width: 1.6; stroke-linecap: round; }
.ag-laptop { position: absolute; bottom: -6px; width: 26px; height: 6px; border-radius: 2px; background: #9fd8ff; opacity: 0; box-shadow: 0 0 12px #5cc8ff; transition: opacity .3s; }
.ag-dots { position: absolute; top: -12px; display: flex; gap: 2px; opacity: 0; transition: opacity .3s; }
.ag-dots b { width: 4px; height: 4px; border-radius: 50%; background: #6ee7b7; animation: agDot 1s ease-in-out infinite; }
.ag-dots b:nth-child(2) { animation-delay: .15s; } .ag-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes agDot { 50% { transform: translateY(-4px); } }
.ag-human.is-working .ag-hglass { transform: translateY(-4px) scale(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(110, 231, 183, .6), 0 0 24px rgba(52, 211, 153, .45); }
.ag-human.is-working .ag-laptop, .ag-human.is-working .ag-dots { opacity: 1; }
/* Kunde: Avatar selbst wie lasergeschnittenes Glas, doppelt so groß */
.ag-avatar { position: relative; width: 260px; height: 286px; transform-style: preserve-3d; transition: transform .25s ease-out; animation: agFloat 5s ease-in-out infinite; filter: drop-shadow(0 24px 30px rgba(0, 134, 255, .35)); }
.ag-avatar .ag-face { width: 100%; height: 100%; transform: none; }
.gl-cut { fill: url(#glFill); stroke: url(#glEdge); stroke-width: 2.4; stroke-linejoin: round; }
.gl-facet { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; }
.gl-eye { fill: #fff; }
.gl-shine { fill: rgba(255, 255, 255, .55); }
.ag-avatar .m-soft, .ag-avatar .m-smile { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; transition: opacity .3s; }
.ag-avatar .m-smile { opacity: 0; }
.ag-client.is-happy .ag-avatar .m-smile, .ag-client:hover .ag-avatar .m-smile { opacity: 1; }
.ag-client.is-happy .ag-avatar .m-soft, .ag-client:hover .ag-avatar .m-soft { opacity: 0; }
.ag-client:hover .ag-avatar { filter: drop-shadow(0 30px 40px rgba(52, 211, 153, .45)); }
.ag-avatar .ag-heart { font-size: 22px; }
@media (max-width: 1100px) { .ag-layout { grid-template-columns: minmax(0, 1fr) 70px 200px; } .ag-avatar { width: 180px; height: 198px; } .ag-team { top: calc(50% + 80px); } .ag-hglass { width: 38px; height: 38px; } }
@media (max-width: 860px) { .ag-team { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; justify-content: center; order: -1; margin: 0 auto 8px; } .ag-in small { display: block; } }
@media (prefers-reduced-motion: reduce) { .ag-avatar { animation: none; } }
.sum-total .mo-price { background: none !important; padding: 0 !important; border: 0; }

/* ---------- Shop v7: Inklusivleistungen volle Breite, Pauschale inklusive, Abstände ---------- */
.burger span { width: 18px; margin: 3px auto; }
.burger span:last-child { width: 11px; margin-right: 13px; }
.web-box-full { grid-column: 1 / -1; display: block; }
.web-box-full .host-box { margin-top: 14px; }
.web-box .check-list.js-shop-perks:empty { display: none; }
.up-incl, .up-note { display: none; }
.js-upgrade-opt.is-included .up-reg { display: none; }
.js-upgrade-opt.is-included .up-incl { display: inline; }
.js-upgrade-opt.is-included .up-note { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 700; color: #047857; }
.js-upgrade-opt.is-included { cursor: default; }
.up-incl s.was, .sum-row b s.was, .ci-line b s.was, .pkg-line b s.was { font-size: .8em; font-weight: 600; opacity: .6; margin-right: 4px; }
.om-incl { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 2px; padding: 6px 10px; border-radius: 3px; background: #ecfdf5; color: #047857; font-size: 12.5px; font-weight: 700; }
.om-incl svg { flex: none; }
.shop .js-opt-marketing-row { margin-top: 26px; }
.shop .om-reco { top: -20px; }
/* Sprechblase: fest für bis zu 3 Zeilen, damit nichts abgeschnitten wird */
.mc-stack { height: 112px; }
@media (max-width: 520px) {
  .web-box .opt-price { display: flex; align-items: flex-end; gap: 14px; justify-items: start; text-align: left; }
  .web-box .opt-price-sub { margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--line); }
  .web-box-full { grid-column: 1 / -1; }
}
/* Cookie-Banner v2: Akzeptieren weiß, Ablehnen leicht grau */
.consent p.consent-lead { color: #fff; font-weight: 600; margin-bottom: 8px; }
.consent-btn.is-soft { background: #c9ced6; color: #2a2f38; }
.consent-btn.is-soft:hover { background: #b4bac4; color: var(--ink); }
/* So arbeiten wir – Handy: aufgeräumt, feste Höhen (Animationen verschieben nichts) */
.ag-node { height: 52px; }
.ag-in { height: 100%; }
@media (max-width: 860px) {
  .ag-layout { grid-template-columns: 1fr; justify-items: stretch; gap: 0; max-width: 460px; margin: 0 auto; }
  .ag-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; aspect-ratio: auto; height: auto; }
  .ag-core { grid-column: 1 / -1; order: -2; width: 100%; height: 190px; margin: 0; padding: 34px 16px 18px; align-content: center; }
  .ag-core small { font-size: 12px; }
  .ag-team { position: relative; left: auto; top: auto; transform: none; grid-column: 1 / -1; order: -1; display: flex; justify-content: center; gap: 8px; height: 62px; align-items: center; margin: 4px 0 6px; }
  .ag-hglass { width: 40px; height: 40px; border-radius: 12px; }
  .ag-hglass svg { width: 30px; height: 30px; }
  .ag-node { height: 48px; width: auto; max-width: none; min-width: 0; }
  .ag-in { gap: 8px; padding: 6px 8px 6px 6px; min-width: 0; }
  .ag-in > span:last-child { min-width: 0; }
  .ag-node .ag-ic { width: 30px; height: 30px; border-radius: 7px; }
  .ag-node .ag-ic svg { width: 15px; height: 15px; }
  .ag-node b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ag-node small, .ag-in small { display: none !important; }
  .ag-channel { justify-self: center; width: 14px; height: 64px; margin: 10px 0; }
  .ag-client { height: 250px; align-content: start; }
  .ag-avatar { width: 160px; height: 176px; }
  .ag-client b { margin-top: 6px; }
}
@media (max-width: 360px) { .ag-node b { font-size: 11.5px; } .ag-hglass { width: 34px; height: 34px; } }
/* Vergleich: neue Überschrift, rote Zeile in gleicher Größe */
.danger-head .problem-head { font-size: clamp(30px, 4.2vw, 58px); margin-bottom: 18px; max-width: 18em; }
.problem-head .cost { display: block; color: #e5484d; background: linear-gradient(100deg, #ff6b6b, #d92d3a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.safe-head { margin: 0 0 22px; font: 760 clamp(22px, 2.4vw, 32px)/1.15 var(--f-head); font-stretch: 108%; letter-spacing: -.02em; }
/* Vergleichstabelle zugeklappt: 3 Zeilen, die dritte blendet weiß aus */
.cmp-collapse { position: relative; }
.cmp-more { display: none; }
.cmp-collapse.is-collapsed .cmp-table tbody tr:nth-child(n+4) { display: none; }
.cmp-collapse.is-collapsed .table-wrap { position: relative; }
.cmp-collapse.is-collapsed .table-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background: linear-gradient(to top, #fff 8%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0)); pointer-events: none; }
.cmp-collapse.is-collapsed .cmp-table tbody tr:nth-child(3) td { border-bottom: 0; }
.cmp-collapse.is-collapsed .cmp-more { display: flex; justify-content: center; margin-top: 8px; }
.marquee-group i { display: inline-grid; place-items: center; line-height: 0; }
.marquee-group i svg { width: 22px; height: 22px; color: var(--blue); }
@media (max-width: 720px) { .cmp-collapse.is-collapsed .table-wrap::after { height: 120px; } }

/* ---------- v8: einheitliche Breiten in den Paket-Karten ---------- */
.offer-list li.hl { margin: 0 0 6px; padding: 12px 14px; }
.offer .perks { margin-left: 0; margin-right: 0; }
/* So arbeiten wir v4: runder Kreis, Haus als reine Glasfläche, Team im Haus */
.ag-layout .ag-stage { aspect-ratio: 5 / 4; max-height: none; }
.ag-core { width: min(350px, 46%); padding: 40px 22px 24px; gap: 4px; }
.ag-core .ag-team { position: relative; left: auto; top: auto; transform: none; z-index: 1; display: flex; justify-content: center; gap: 16px; margin-top: 18px; }
@media (max-width: 1100px) { .ag-core .ag-team { top: auto; gap: 12px; } .ag-core { width: min(320px, 50%); } }
@media (max-width: 860px) {
  .ag-layout .ag-stage { aspect-ratio: auto; }
  .ag-core { height: 270px; width: 100%; }
  .ag-core .ag-team { order: 0; grid-column: auto; height: 62px; margin: 14px 0 0; gap: 14px; }
}
.ag-core { width: min(296px, 38%); padding: 38px 18px 22px; }
.ag-core .ag-team { gap: 12px; }
.ag-core .ag-hglass { width: 42px; height: 42px; }
@media (min-width: 861px) and (max-width: 1100px) { .ag-core .ag-hglass { width: 32px; height: 32px; border-radius: 10px; } .ag-core .ag-team { gap: 8px; } .ag-core { width: min(260px, 40%); } }
.ag-core .ag-team { gap: 10px; }
.ag-core .ag-hglass { width: 40px; height: 40px; }
@media (max-width: 860px) {
  .ag-core { width: 100%; height: 270px; padding: 40px 16px 18px; }
  .ag-core .ag-team { gap: 14px; }
}
/* v8: dünne Schrift für Zwischenzeilen, „Alle anzeigen“ als reiner Text */
.agent-save { font-weight: 300; }
.safe-head.is-thin { font-weight: 300; color: var(--ink-soft); }
.cmp-more-link { background: none; border: 0; padding: 6px 2px; font: 700 15px var(--f-body); color: var(--blue); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.cmp-more-link:hover { color: var(--ink); }

/* ---------- Ladebildschirm v2: Agenten-Orb, 1-2-3, Text klappt hoch, Vorhang nach oben ---------- */
.preloader { transform: translateY(0); transition: transform 1s cubic-bezier(.76, 0, .24, 1); background: radial-gradient(ellipse at 50% 40%, #0d1a33 0%, var(--bg-dark) 60%); }
.preloader.is-up { transform: translateY(-100%); }
/* Während des Ladebildschirms: Scrollen per Eingabe gesperrt (siehe main.js), Seitenbreite bleibt gleich */
html.is-preloading { overscroll-behavior: none; }
.pl-stage { display: grid; justify-items: center; gap: 26px; text-align: center; padding: 0 20px; }
.pl-orb { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.pl-glow { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 134, 255, .45), rgba(52, 211, 153, .12) 45%, transparent 70%); filter: blur(10px); animation: plPulse 2.4s ease-in-out infinite; }
.pl-core { position: relative; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #9fd8ff 18%, #0086ff 55%, #0a2a66 100%);
  box-shadow: 0 0 40px rgba(0, 134, 255, .8), inset 0 -8px 16px rgba(0, 0, 0, .35); animation: plCore 2.4s ease-in-out infinite; }
.pl-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(159, 216, 255, .22); animation: plSpin 6s linear infinite; }
.pl-ring.r1 { inset: 30px; animation-duration: 3.2s; }
.pl-ring.r2 { inset: 12px; animation-duration: 5s; animation-direction: reverse; transform: rotateX(60deg); border-color: rgba(110, 231, 183, .25); }
.pl-ring.r3 { inset: -6px; animation-duration: 8s; }
.pl-ring i { position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 12px #34d399; }
.pl-ring i:nth-child(2) { top: auto; bottom: -5px; background: #9fd8ff; box-shadow: 0 0 12px #5cc8ff; }
.pl-ring i:nth-child(3) { top: calc(50% - 5px); left: -5px; background: #fff; box-shadow: 0 0 12px #fff; }
.pl-ring i:nth-child(4) { top: calc(50% - 5px); left: auto; right: -5px; }
@keyframes plSpin { to { rotate: 360deg; } }
@keyframes plPulse { 50% { opacity: .55; scale: .9; } }
@keyframes plCore { 50% { scale: 1.08; box-shadow: 0 0 60px rgba(52, 211, 153, .7), inset 0 -8px 16px rgba(0, 0, 0, .35); } }
.pl-count { display: flex; gap: .08em; font: 800 clamp(56px, 10vw, 110px)/.9 var(--f-logo); letter-spacing: -.04em; transform: skewX(-10deg); }
.pl-d { opacity: .12; transform: translateY(20px); transition: opacity .5s, transform .6s cubic-bezier(.2, 1.4, .4, 1); background: var(--grad-glow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-d.is-on { opacity: 1; transform: none; }
.pl-flip { position: relative; height: 1.6em; width: min(92vw, 640px); perspective: 600px; font: 700 clamp(16px, 2.2vw, 22px)/1.6 var(--f-head); }
.pl-msg { position: absolute; inset: 0; display: block; backface-visibility: hidden; transform-origin: 50% 50% -.8em; transform: rotateX(-90deg); opacity: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .5s; color: rgba(255, 255, 255, .75); }
.pl-msg.is-on { transform: rotateX(0); opacity: 1; }
.pl-msg.is-out { transform: rotateX(90deg); opacity: 0; }
.pl-go { color: #fff; font-size: 1.15em; }
.pl-go::first-letter { color: inherit; }
.pl-dots b { display: inline-block; animation: plDot 1.2s ease-in-out infinite; }
.pl-dots b:nth-child(2) { animation-delay: .15s; } .pl-dots b:nth-child(3) { animation-delay: .3s; }
@keyframes plDot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.pl-bar { width: min(260px, 60vw); height: 2px; border-radius: 1px; background: rgba(255, 255, 255, .1); overflow: hidden; position: relative; }
.pl-bar span { position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, #5cc8ff, #34d399); animation: plBar 1.3s ease-in-out infinite; }
.preloader.is-loaded .pl-bar span { animation: none; width: 100%; transition: width .5s; }
@keyframes plBar { from { left: -35%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }
/* Teaser: Datenschutzkonform. Modern. Zukunftsträchtig. */
.hero-claims { margin: -10px 0 0; font: italic 300 clamp(22px, 2.4vw, 32px)/1.2 var(--f-head); font-stretch: 105%; letter-spacing: -.01em; color: rgba(255, 255, 255, .85); }
.hero-claims .hero-dsgvo { margin: 0; }
.hero-claims + .hero-text { margin-top: 40px; }
/* Burger: Striche enger */
.burger span { height: 2px; margin: 2px auto; }
.burger span:last-child { margin-right: 13px; }
/* So arbeiten wir – Handy v2: 4 Agenten ums Haus, Kanal mittig vom Haus zum Kunden, Dokumente sichtbar */
@media (max-width: 860px) {
  .ag-layout .ag-stage { grid-template-columns: 1fr 58px 1fr; gap: 12px 0; }
  .ag-stage > .ag-node:nth-of-type(n+5) { display: none; }
  .ag-stage > .ag-node:nth-of-type(1) { grid-row: 1; grid-column: 1; }
  .ag-stage > .ag-node:nth-of-type(2) { grid-row: 1; grid-column: 3; }
  .ag-stage > .ag-node:nth-of-type(3) { grid-row: 3; grid-column: 1; }
  .ag-stage > .ag-node:nth-of-type(4) { grid-row: 3; grid-column: 3; }
  .ag-core { grid-row: 2; grid-column: 1 / -1; order: 0; }
  .ag-channel { position: relative; z-index: 1; justify-self: center; width: 14px; height: 150px; margin: -60px 0 12px; }
  .ag-pipe { width: 14px; height: 150px; }
  .ag-channel small { left: 26px; top: 84px; }
  .ag-doc { display: block; }
  .ag-node b { font-size: 12px; }
}
.hero h1 { font-size: clamp(30px, 4vw, 64px); hyphens: manual; -webkit-hyphens: manual; }
.hero h1 .line > span { white-space: nowrap; }
@media (max-width: 520px) { .hero h1 { font-size: clamp(26px, 7.6vw, 38px); } }
.hero h1 { font-size: clamp(30px, 4vw, 58px); }
/* Referenzen: nur die Leistungen, die wir für den Kunden gemacht haben */
.bento .tile[hidden] { display: none; }
@media (min-width: 1001px) {
  .js-brand-show[data-tiles="3"] .tile:has(.bs-web) { grid-column: span 12; }
  .js-brand-show[data-tiles="5"] .tile:has(.bs-web) { grid-column: span 4; }
  .js-brand-show.is-solo .tile:has(.bs-web) { grid-column: 3 / span 8; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .js-brand-show[data-tiles="3"] .tile:has(.bs-web), .js-brand-show[data-tiles="5"] .tile:has(.bs-web), .js-brand-show.is-solo .tile:has(.bs-web) { grid-column: span 12; }
}
.js-brand-show[data-tiles="3"] .tile:has(.bs-web) .bs-browser, .js-brand-show.is-solo .bs-browser { max-width: 900px; margin: 0 auto; }
/* Ladebildschirm v3: Partikelwelle statt Globus */
.pl-wave { display: block; width: 320px; height: 180px; max-width: 86vw; filter: drop-shadow(0 0 6px rgba(220, 226, 236, .45)); }
.preloader { background: radial-gradient(ellipse at 50% 40%, #12161f 0%, var(--bg-dark) 65%); }
.pl-d { background: linear-gradient(115deg, #ffffff 0%, #dfe3ea 35%, #ffffff 50%, #b9c0cb 70%, #ffffff 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: plShine 3.2s linear infinite; }
@keyframes plShine { to { background-position: -220% 0; } }
.pl-bar span { background: linear-gradient(90deg, transparent, #e6e9ef, #ffffff); }
/* Burger: Zeilen nicht strecken – die Striche liegen eng beieinander (5 px Abstand) */
.burger { align-content: center; justify-content: center; row-gap: 5px; }
.burger span { margin: 0 auto; }
.burger span:last-child { margin: 0 0 0 auto; }
/* Zähler im Teaser: Ziffernwechsel löst kein Layout der ganzen Seite aus */
.hero-stats > div { contain: layout paint; }
.hero-stats strong { font-variant-numeric: tabular-nums; }
.hero-wall-wrap { will-change: opacity; }

/* ==========================================================================
   v10 · Kompakte Preistabellen (alle Bildschirme)
   ========================================================================== */
.offers.two { gap: 16px; max-width: 1080px; margin-inline: auto; }
.offer { padding: 26px 24px 22px; }
.offer-num { font-size: 11.5px; margin-bottom: 10px; }
.offer h3 { font-size: clamp(22px, 1.9vw, 27px); margin-bottom: 6px; }
.offer-for { font-size: 14px; min-height: 0; margin-bottom: 6px; }
.offer-for.small { font-size: 12.5px; }
.offer-visual { height: 128px; margin: 10px 0 16px; }
.price strong { font-size: clamp(30px, 2.6vw, 40px); }
.price .from, .price small { font-size: 12.5px; }
.price-monthly { font-size: 12.5px; margin-bottom: 14px; }
.offer .pages-box { padding: 9px 12px; margin-bottom: 12px; }
.offer .perks { padding: 10px 12px; margin-bottom: 12px; gap: 6px; }
.offer .perks li { font-size: 13px; }
.offer-list { margin-bottom: 16px; }
.offer-list li { font-size: 13.5px; padding: 6px 0; gap: 8px; }
.offer-list li.hl { padding: 9px 12px; }
.offer-incl { padding: 12px 14px; margin: -2px 0 16px; }
.offer-incl li { font-size: 12.5px; }
.offer-ctas .btn { height: 48px; font-size: 14px; }
.addon-hint { font-size: 13px; }
.om { max-width: 1080px; margin-inline: auto; padding: clamp(22px, 2.6vw, 34px); gap: clamp(20px, 3vw, 40px); }
.om h3 { font-size: clamp(24px, 2.2vw, 32px); margin-bottom: 6px; }
.om-only { font-size: 13px; margin-bottom: 12px; }
.om .offer-list li { font-size: 13.5px; }
.om-price { padding: 16px; margin-bottom: 14px; }
.om-amount strong { font-size: clamp(34px, 3vw, 44px); }
.om-price small { font-size: 12.5px; }
.om .offer-incl li { font-size: 12.5px; }
.print { max-width: 1080px; margin: 28px auto 0; padding: clamp(20px, 2.4vw, 28px); }
.print-head { margin-bottom: 14px; }
.print-head h3 { font-size: clamp(20px, 1.9vw, 26px); }
.print-head p, .print-list li { font-size: 13.5px; }
.print .price strong { font-size: clamp(28px, 2.4vw, 36px); }
/* Shop + Bestellübersicht */
.shop { max-width: 1160px; margin-inline: auto; gap: 20px; }
.shop-product { padding: clamp(20px, 2.4vw, 30px); }
.shop .shop-label { font-size: 12.5px; margin-bottom: 6px; }
.shop .pkg-switch button { padding: 10px 14px; }
.shop .pages-box.big { padding: 12px 14px; margin-bottom: 16px; }
.shop .opt { padding: 14px 16px; gap: 12px; margin-bottom: 10px; }
.shop .opt h4 { font-size: 16px; }
.shop .opt p { font-size: 13.5px; }
.shop .opt ul li, .shop .check-list li { font-size: 12.5px; }
.shop .opt .opt-price { font-size: 18px; }
.shop .shop-product .shop-step3 { font-size: clamp(18px, 1.6vw, 22px); }
.shop .shop-intro { font-size: 14px; }
.shop .mail-chat .mc-in { font-size: 12.5px; }
.shop-summary { padding: clamp(20px, 2.2vw, 26px); }
.shop-summary h3 { font-size: 19px; margin-bottom: 10px; }
.sum-row { padding: 8px 0; font-size: 13.5px; }
.shop-summary .sum-row small.terms { font-size: 12px; }
.sum-total { margin: 16px 0; gap: 10px; }
.sum-total div { padding: 14px; }
.sum-total strong { font-size: 26px; }
.sum-total .mo-price strong { font-size: clamp(24px, 2.2vw, 30px) !important; }
.sum-note { font-size: 11.5px; }

/* ==========================================================================
   v10 · Laptop-Modus (z. B. 13"/14" MacBook: breit genug, aber wenig Höhe)
   Greift automatisch ab 900 px Breite bei höchstens 940 px Fensterhöhe.
   Große Monitore (21"–27") bleiben unverändert.
   ========================================================================== */
@media (min-width: 900px) and (max-height: 940px) {
  :root { --header-h: 66px; }
  .section { padding: clamp(52px, 8vh, 88px) 0; }
  .section-head { gap: 14px; margin-bottom: clamp(26px, 4.5vh, 44px); }
  h2 { font-size: clamp(30px, 3.4vw, 50px); }
  h3 { font-size: clamp(19px, 1.7vw, 24px); }
  .lead { font-size: 16.5px; }
  .eyebrow { font-size: 11.5px; }
  .btn { height: 50px; }
  .btn-sm { height: 40px; }
  /* Teaser */
  .hero-grid { padding-top: calc(var(--header-h) + 16px); padding-bottom: 20px; }
  .hero-claims { font-size: clamp(18px, 1.8vw, 24px); }
  .hero-claims + .hero-text, .hero-text { margin-top: 20px; margin-bottom: 22px; font-size: 16px; }
  .hero-ctas { margin-bottom: 26px; }
  .hero-stats { padding-top: 16px; }
  .hero-stats strong { font-size: clamp(24px, 2.2vw, 32px); }
  .hero-marquee { padding: 14px 0; }
  /* Versprechen */
  .statement h2 { font-size: clamp(34px, 4.6vw, 68px); margin-bottom: 22px; }
  .statement .chip-row { margin: 22px 0 28px; }
  /* Referenzen (Bento) */
  .bento { grid-auto-rows: minmax(160px, auto); gap: 12px; }
  .tile { padding: 20px; }
  .tile h3 { font-size: 18px; }
  .tile p { font-size: 13.5px; }
  /* Verkaufsstarke Webseite */
  .sell { gap: 40px; }
  .sell-points { margin-top: 20px; }
  .sell-point { padding: 12px 0; grid-template-columns: 44px 1fr; gap: 14px; }
  .sell-point .n { width: 44px; height: 44px; }
  .sell-point h3 { font-size: 17px; }
  .sell-point p { font-size: 14px; }
  /* So arbeiten wir: Kreis kleiner, damit er in die Höhe passt */
  .ag-layout { grid-template-columns: minmax(0, 620px) 100px 240px; justify-content: center; }
  .ag-avatar { width: 200px; height: 220px; }
  .agents-sec .agent-benefits { margin-top: 24px; gap: 12px; }
  .agent-benefits div { padding: 16px; }
  .agent-benefits strong { font-size: 26px; }
  /* Vergleich */
  .cmp-card { padding: 22px 24px; }
  .cmp-card .big { font-size: clamp(40px, 4.2vw, 60px); }
  .cmp-card .calc { margin-bottom: 14px; }
  .danger-head { margin-top: 64px; }
  .danger-head .problem-head { font-size: clamp(28px, 3.2vw, 46px); }
  .wp-alert div { padding: 16px 18px; }
  .wp-alert strong { font-size: 30px; }
  .cmp-table th, .cmp-table td { padding: 12px 16px; }
  .cmp-table { font-size: 14px; }
  /* Rebranding */
  .rebrand { gap: 48px; }
  /* Zahlen */
  .stat { padding: 22px 26px; }
  .stat .num { font-size: clamp(44px, 4.6vw, 66px); margin-bottom: 8px; }
  .stat p { font-size: 14.5px; }
  /* Leistungen */
  .service { padding: 16px 0; grid-template-columns: 64px 1.1fr 1.4fr 46px; gap: 20px; }
  .service h3 { font-size: clamp(20px, 2vw, 28px); }
  .service p { font-size: 14px; }
  .service .s-go { width: 42px; height: 42px; }
  /* Individuelle Programmierung */
  .code-card { padding: 22px; }
  .code-card h3 { font-size: 20px; }
  .code-card p { font-size: 14px; }
  /* Ablauf */
  .step { min-height: 270px; padding: 22px 20px; }
  .step .s-big { font-size: 84px; }
  .step h3 { margin: 18px 0 6px; }
  .step p { font-size: 14px; }
  /* Beispiele */
  .ex-feature .ex-frame { aspect-ratio: auto; height: min(56vh, 460px); }
  .examples { gap: 16px; }
  /* FAQ & Abschluss */
  .faq summary { padding: 16px 0; font-size: 17px; }
  .faq summary .pm { width: 34px; height: 34px; }
  .cta-final h2 { font-size: clamp(38px, 5vw, 76px); margin-bottom: 20px; }
  .cta-final .contact-row { margin-top: 26px; }
  /* Preistabellen noch etwas dichter */
  .offer-visual { height: 104px; }
  .offer { padding: 22px 22px 20px; }
  .om { padding: 22px 26px; }
}
@media (min-width: 900px) and (max-height: 940px) {
  h2.long, .section-head h2.long { font-size: clamp(26px, 2.8vw, 40px); }
  .agent-save { font-size: clamp(24px, 2.6vw, 38px); }
  .ag-layout { grid-template-columns: minmax(0, 560px) 90px 230px; }
  .ag-avatar { width: 180px; height: 198px; }
  .stat { padding: 18px 22px; }
  .step .s-big { font-size: 76px !important; }
}
@media (min-width: 900px) and (max-height: 940px) {
  .ag-core { width: min(250px, 46%); padding: 30px 12px 16px; }
  .ag-core .ag-logo { font-size: 16px; }
  .ag-core .ag-title { font-size: 17px; }
  .ag-core small { font-size: 11px; }
  .ag-core .ag-team { gap: 6px; margin-top: 10px; }
  .ag-core .ag-hglass { width: 30px; height: 30px; border-radius: 9px; }
  .ag-core .ag-hglass svg { width: 22px; height: 22px; }
  .ag-node { height: 44px; }
  .ag-node b { font-size: 12px; }
  .ag-node small { font-size: 10.5px; }
  .ag-node .ag-ic { width: 28px; height: 28px; }
  .step { min-height: 220px; }
}
@media (min-width: 900px) and (max-height: 940px) {
  .ag-core { width: min(226px, 42%); padding: 28px 10px 14px; }
  .ag-core .ag-human { width: 34px; }
  .ag-core .ag-logo { font-size: 15px; }
}
@media (min-width: 900px) and (max-height: 940px) {
  /* Rechtsseiten: Inhalt beginnt unter der festen Kopfzeile */
  main.section { padding-top: calc(var(--header-h) + clamp(28px, 5vh, 56px)); }
}

/* ==========================================================================
   v11 · Anfrage-Modus (Live-Seite): kein Shop, kein Warenkorb, kein Konto
   ========================================================================== */
.is-anfrage #shop, .is-anfrage .js-cart-open, .is-anfrage #cart, .is-anfrage .drawer-backdrop,
.is-anfrage [data-shop], .is-anfrage a[href$="konto.html"] { display: none !important; }
.is-shop [data-anfrage] { display: none !important; }

/* ==========================================================================
   v11 · Preistabellen und große Zahlen deutlich kleiner (alle Bildschirme)
   ========================================================================== */
.offers.two { max-width: 960px; gap: 14px; }
.offer { padding: 22px 20px 18px; }
.offer h3 { font-size: clamp(20px, 1.6vw, 24px); }
.offer-for { font-size: 13.5px; }
.offer-visual { height: 96px; margin: 8px 0 12px; }
.price strong { font-size: clamp(26px, 2.1vw, 32px); }
.offer-list li { font-size: 13px; padding: 5px 0; }
.offer-incl li, .offer .perks li { font-size: 12px; }
.offer-ctas .btn { height: 44px; font-size: 13.5px; }
.om { max-width: 960px; padding: 22px 24px; }
.om h3 { font-size: clamp(21px, 1.8vw, 26px); }
.om .offer-list li { font-size: 13px; }
.om-amount strong { font-size: clamp(28px, 2.4vw, 34px); }
.print { max-width: 960px; padding: 20px 22px; }
.print-head h3 { font-size: clamp(19px, 1.6vw, 23px); }
.print .price strong { font-size: clamp(24px, 2vw, 30px); }
.print-list li { font-size: 13px; }
/* Große Zahlen */
.hero-stats strong { font-size: clamp(22px, 2vw, 28px); }
.stat .num { font-size: clamp(38px, 3.6vw, 54px); }
.cmp-card .big { font-size: clamp(34px, 3.4vw, 50px); }
.wp-alert strong { font-size: 26px; }
.agent-benefits strong { font-size: 24px; }
.step .s-big { font-size: 64px !important; }
.sum-total strong, .sum-total .mo-price strong { font-size: 24px !important; }
/* Leistungsseiten */
.lp-tier { padding: 24px 22px; }
.lp-tier h3 { font-size: 19px; margin-bottom: 12px; }
.lp-price strong { font-size: clamp(28px, 2.4vw, 36px); }
.lp-tiers { gap: 14px; max-width: 1040px; margin-inline: auto; }