/* ═══════════════════════════════════════════════════════════════════════════
   Katalogstudio — Produktseite (Entwurf „Mobbros Website v4", Desktop + Mobil).
   Eigene Gestaltung neben site.css: Plus Jakarta Sans, Koralle auf Weiß,
   ein Hintergrund, der beim Scrollen die Farbe wechselt. Selbst gehostet —
   keine externe Anfrage (fonts/, SIL Open Font License).
   Unter 760 px gilt der Mobil-Entwurf: Telefon statt Browserfenster.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(../fonts/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Die Seite steht in der Mobbros-Website: Kopf und Fuß kommen aus site.css.
   Alles hier gilt deshalb nur im Katalogstudio-Bereich (.ks) und im
   Kauf-Fenster (.ks-modal) — die Farbnamen (--ink, --line …) heissen wie die
   der Website, dürfen deren Kopf aber nicht umfärben. */
.ks, .ks-modal {
  --ink: #101A2E;
  --ink-2: #3C4552;
  --mute: #5D6675;
  --mute-2: #8A919E;
  --mute-3: #9AA0AB;
  --mute-4: #B4B9C2;
  --line: #EAE8E3;
  --line-2: #E6E3DD;
  --line-3: #F1EFEA;
  --sand: #F4F2EE;
  --sand-2: #F0EEE9;
  --paper: #FCFBF9;
  --coral: #FF5D52;
  --coral-d: #E0463C;
  --coral-ink: #B5372E;
  --coral-soft: #FFF1EF;
  --coral-line: #FFD0CA;
  --green: #22A06B;
  --mint: #8BE3B8;
  --ease: cubic-bezier(.2,.8,.2,1);
}

.ks, .ks-modal { color: var(--ink); font: 400 16px/1.55 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
/* Unter dem festen Mobbros-Kopf (72 px) beginnen. */
.ks { padding-top: 72px; }
/* :where() hält diese Grundregeln ohne Gewicht — sonst schlüge .ks a die
   Knopfklassen (weisse Schrift auf Koralle) und .ks p die zentrierten Absätze. */
:where(.ks, .ks-modal) a { color: var(--coral); text-decoration: none; }
:where(.ks, .ks-modal) a:hover { color: var(--coral-d); }
:where(.ks, .ks-modal) button { font: inherit; color: inherit; }
/* site.css setzt Überschriften in Space Grotesk — hier gilt der Entwurf. */
:where(.ks, .ks-modal) h1, :where(.ks, .ks-modal) h2, :where(.ks, .ks-modal) h3 { font-family: inherit; color: inherit; margin: 0; line-height: 1.1; letter-spacing: normal; }
:where(.ks) p { margin: 0; }
.ks :focus-visible, .ks-modal :focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes floaty2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes sheen { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes orbA { from { transform: rotate(0deg) translateX(20vw) rotate(0deg); } to { transform: rotate(360deg) translateX(20vw) rotate(-360deg); } }
@keyframes orbB { from { transform: rotate(120deg) translateX(26vw) rotate(-120deg); } to { transform: rotate(-240deg) translateX(26vw) rotate(240deg); } }
@keyframes orbC { from { transform: rotate(240deg) translateX(16vw) rotate(-240deg); } to { transform: rotate(600deg) translateX(16vw) rotate(-600deg); } }
@keyframes orbD { from { transform: rotate(60deg) translateX(30vw) rotate(-60deg); } to { transform: rotate(-300deg) translateX(30vw) rotate(300deg); } }
@keyframes shimmer { from { background-position: -220% 0; } to { background-position: 220% 0; } }
@keyframes floatCard { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes floatCard2 { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(10px) rotate(3deg); } }
@keyframes breathe { 0%,100% { opacity: .42; } 50% { opacity: .62; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fly { 0% { opacity: 0; transform: translate(0,0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(140px,190px) scale(.28); } }
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(34,160,107,.5); } 100% { box-shadow: 0 0 0 14px rgba(34,160,107,0); } }
@keyframes drop { from { opacity: 0; transform: translateY(-26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slideup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* ─────────────────────────────────────────── Rahmen und Hintergrund */
/* clip statt hidden: hidden machte .ks zum Scrollbehälter, und die klebende
   Leiste darunter bliebe nicht stehen. */
.ks { position: relative; background: #fff; overflow-x: clip; }
.ks-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transition: opacity .6s; }
.ks-orbs i { position: absolute; border-radius: 50%; }
.ks-orbs .o1 { top: 18%; left: 26%; width: 52vw; height: 52vw; margin: -26vw 0 0 -26vw; filter: blur(100px);
  background: radial-gradient(circle, rgba(255,93,82,.55), rgba(255,93,82,0) 70%); animation: orbA 34s linear infinite, breathe 11s ease-in-out infinite; }
.ks-orbs .o2 { top: 52%; left: 68%; width: 46vw; height: 46vw; margin: -23vw 0 0 -23vw; filter: blur(105px);
  background: radial-gradient(circle, rgba(126,166,255,.55), rgba(126,166,255,0) 70%); animation: orbB 46s linear infinite, breathe 14s ease-in-out 2s infinite; }
.ks-orbs .o3 { top: 74%; left: 34%; width: 40vw; height: 40vw; margin: -20vw 0 0 -20vw; filter: blur(95px);
  background: radial-gradient(circle, rgba(34,160,107,.48), rgba(34,160,107,0) 70%); animation: orbC 39s linear infinite, breathe 9s ease-in-out 1s infinite; }
.ks-orbs .o4 { top: 34%; left: 52%; width: 34vw; height: 34vw; margin: -17vw 0 0 -17vw; filter: blur(90px);
  background: radial-gradient(circle, rgba(255,178,120,.45), rgba(255,178,120,0) 70%); animation: orbD 52s linear infinite, breathe 13s ease-in-out 3s infinite; }

.ks-in { max-width: 1160px; margin: 0 auto; }
.ks-sec { position: relative; z-index: 1; padding: clamp(48px,6vw,88px) clamp(16px,4vw,40px); scroll-margin-top: 90px; }
.ks-sec-tint { background: rgba(251,250,248,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line-3); }
.ks-h2 { max-width: 20ch; font-size: clamp(26px,3.4vw,42px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; }
.ks-h3 { font-size: clamp(20px,2.4vw,28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 800; margin-top: 8px; }
.ks-sub { margin-top: 12px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: var(--mute); }
.ks-sub-side { margin: 0; flex: 0 1 380px; }
.ks-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ks-head-row > div:first-child { flex: 1 1 340px; min-width: 0; }
.ks-label-caps { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--mute-4); text-transform: uppercase; }
.ks-label-caps.ks-c, .ks-c { color: var(--coral-ink); }
.ks-light { color: rgba(255,255,255,.45) !important; }
.ks-small { font-size: 11px; font-weight: 600; color: var(--mute-3); }
.ks-mini { display: block; font-size: 10.5px; font-weight: 600; color: var(--mute-3); margin-bottom: 6px; }
.ks-fine { margin-top: 18px; font-size: 13px; color: var(--mute-2); }
.ks-fine-c { text-align: center; margin-top: 26px; }

/* Schrift mit wanderndem Glanz — der Entwurf nennt es „shimmer" */
.ks-shimmer { background: linear-gradient(100deg, var(--ink) 20%, var(--coral) 42%, var(--ink) 62%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s linear infinite; }
.ks-shimmer-light { background-image: linear-gradient(100deg, #fff 20%, #FFB5AE 42%, #fff 62%); }

/* ─────────────────────────────────────────── Knöpfe */
.ks-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px;
  padding: 10px 17px; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.ks-btn-lg { padding: 14px 24px; font-size: 15px; }
.ks-btn-block { width: 100%; }
.ks-btn-dark { background: var(--ink); color: #fff; border-radius: 10px; }
.ks-btn-dark:hover { background: var(--coral); color: #fff; }
.ks-btn-coral { background: var(--coral); color: #fff; box-shadow: 0 10px 24px rgba(255,93,82,.28); }
.ks-btn-coral:hover { background: var(--coral-d); color: #fff; }
.ks-btn-line { background: #fff; color: var(--ink); border-color: #E3E0DA; }
.ks-btn-line:hover { border-color: var(--ink); color: var(--ink); }
.ks-btn-white { background: #fff; color: var(--ink); box-shadow: 0 14px 30px -14px rgba(255,255,255,.5); padding: 15px 26px; }
.ks-btn-white:hover { background: var(--coral); color: #fff; transform: translateY(-2px); }
.ks-btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); padding: 15px 26px; }
.ks-btn-ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }
.ks-play { width: 22px; height: 22px; border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-size: 9px; display: inline-flex; align-items: center; justify-content: center; }

/* ─────────────────────────────────────────── Leiste unter dem Mobbros-Kopf */
.ks-subnav { position: sticky; top: 72px; z-index: 30; padding: 14px clamp(16px,4vw,40px) 0; }
.ks-subnav-in { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 18px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 26px -20px rgba(16,26,46,.35); font-size: 14px; }
.ks-crumb { color: var(--mute-2); font-weight: 500; }
.ks-crumb:hover { color: var(--ink); }
.ks-crumb-sep { color: var(--mute-4); }
.ks-subnav-in > b { font-weight: 700; }
.ks-subnav-links { display: flex; gap: clamp(12px,1.8vw,24px); margin-left: auto; margin-right: 8px; }
.ks-subnav-links a { color: var(--mute); font-weight: 500; }
.ks-subnav-links a:hover { color: var(--ink); }

/* ─────────────────────────────────────────── Hero */
.ks-hero { position: relative; z-index: 1; padding: clamp(36px,5vw,72px) clamp(16px,4vw,40px) clamp(40px,5vw,72px); overflow: hidden; }
.ks-hero-glow { position: absolute; top: -320px; left: 50%; width: min(1240px,150vw); height: 700px; margin-left: calc(min(1240px,150vw) / -2);
  background: radial-gradient(ellipse at 50% 50%, rgba(255,93,82,.10), rgba(255,93,82,0) 64%); animation: sheen 11s ease-in-out infinite; pointer-events: none; }
.ks-hero-in { position: relative; max-width: 1160px; margin: 0 auto; text-align: center; }
.ks-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border: 1px solid #EFE0DD; background: #FFF6F4; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--coral-ink); animation: rise .6s var(--ease) both; }
.ks-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: dot 1.8s ease-in-out infinite; }
.ks-badge .ks-m { display: none; }
.ks-hero h1 { margin: clamp(18px,2.4vw,26px) auto 0; max-width: 17ch; font-size: clamp(36px,6.2vw,74px); line-height: 1.03; letter-spacing: -.035em; font-weight: 800;
  text-wrap: balance; animation: rise .7s var(--ease) .06s both, shimmer 6s linear infinite; }
.ks-lede { margin: clamp(14px,1.8vw,22px) auto 0; max-width: 54ch; font-size: clamp(15px,1.25vw,18px); line-height: 1.6; color: var(--mute); text-wrap: pretty; animation: rise .7s var(--ease) .12s both; }
.ks-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(20px,2.6vw,30px); animation: rise .7s var(--ease) .18s both; }

/* Vorführung Desktop */
.ks-stage { position: relative; max-width: 940px; margin: clamp(34px,4.6vw,58px) auto 0; animation: rise .8s var(--ease) .26s both; text-align: left; }
.ks-window { position: relative; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 30px 70px -32px rgba(16,26,46,.32); overflow: hidden;
  transition: transform .7s var(--ease), filter .5s, opacity .5s; }
.ks-window.is-behind { transform: scale(.94) translateY(10px); filter: blur(3px); opacity: .45; }
.ks-win-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-3); background: var(--paper); }
.ks-dots { display: flex; gap: 5px; }
.ks-dots i { width: 8px; height: 8px; border-radius: 50%; background: #E8E5DF; }
.ks-dots i.on { background: var(--coral); }
.ks-url { flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; color: var(--mute-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-tag { font-size: 11px; font-weight: 700; color: var(--coral-ink); background: var(--coral-soft); padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.ks-cards { display: flex; flex-wrap: wrap; gap: clamp(10px,1.4vw,16px); padding: clamp(14px,1.8vw,22px); }
.ks-card { flex: 1 1 180px; min-width: 0; position: relative; padding: 8px; margin: -8px; border-radius: 16px; transition: box-shadow .4s, background-color .4s; }
.ks-card.is-picked { box-shadow: 0 0 0 2px var(--coral); background: #FFF7F5; }
.ks-card.is-kept { box-shadow: 0 0 0 1px var(--coral-line); }
.ks-card-img { height: clamp(130px,17vw,190px); border-radius: 12px; overflow: hidden; background: var(--sand); }
.ks-card-img img, .ks-detail-img img, .ks-thumbs img, .ks-p-img img, .ks-prow-img img, .ks-pdetail-img img, .ks-float1-img img, .ks-fly img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ks-card-no { font-size: 11px; font-weight: 600; color: var(--mute-3); margin-top: 10px; }
.ks-card-name { font-size: 14.5px; font-weight: 700; margin-top: 2px; }
.ks-card-price { font-size: 16px; font-weight: 800; color: var(--coral); margin-top: 4px; }
.ks-card-pick { display: flex; gap: 5px; margin-top: 9px; animation: rise .4s var(--ease) both; }
.ks-card-pick span, .ks-sizes span { font-size: 11px; font-weight: 700; color: var(--mute); padding: 5px 9px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.ks-card-pick span.on, .ks-sizes span.on { color: #fff; border-color: var(--coral); background: var(--coral); }
.ks-sizes span.on.dark { background: var(--ink); border-color: var(--ink); }
.ks-card-pick em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: var(--coral-ink); padding: 5px 10px; border-radius: 8px; background: var(--coral-soft); }
.ks-cartbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 13px clamp(14px,1.8vw,22px); border-top: 1px solid var(--line-3); background: var(--paper);
  font-size: 12.5px; font-weight: 600; color: var(--mute); transition: background-color .4s; }
.ks-cartbar.is-done { background: #F1FAF5; }
.ks-cartbar b { color: inherit; }
.ks-cartbar-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ks-sum { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink) !important; }
.ks-order { font-size: 13px; font-weight: 700; color: #fff; background: var(--ink); padding: 9px 16px; border-radius: 9px; transition: background-color .4s; }
.ks-cartbar.is-done .ks-order { background: var(--green); }

.ks-over { position: absolute; left: 0; right: 0; bottom: 0; top: 44px; z-index: 7; background: #fff; border-radius: 0 0 18px 18px; overflow: hidden; animation: rise .45s var(--ease) both; }
.ks-over-dark { top: 0; z-index: 8; background: var(--ink); border-radius: 18px; color: #fff; }
.ks-detail { display: flex; flex-wrap: wrap; gap: clamp(12px,1.8vw,22px); padding: clamp(14px,1.8vw,22px); height: 100%; }
.ks-detail-img { flex: 1 1 200px; min-width: 0; border-radius: 12px; overflow: hidden; background: var(--sand); }
.ks-detail-body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.ks-detail-name { font-size: clamp(18px,2.2vw,25px); font-weight: 800; letter-spacing: -.025em; margin-top: 4px; }
.ks-detail-body p { font-size: 13.5px; line-height: 1.55; color: var(--mute); margin-top: 8px; }
.ks-swatches { display: flex; gap: 6px; margin-top: 14px; }
.ks-swatches i { width: 22px; height: 22px; border-radius: 7px; }
.ks-swatches i.on { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--coral); }
.ks-swatches-s { margin-top: 0; }
.ks-swatches-s i { width: 20px; height: 20px; border-radius: 6px; }
.ks-sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ks-sizes-s { margin-top: 0; }
.ks-sizes-s span { font-weight: 600; padding: 4px 8px; }
.ks-tiers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ks-tiers span { flex: 1 1 80px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 11px; color: var(--mute-2); }
.ks-tiers span b { display: block; font-size: 14px; color: var(--ink); }
.ks-tiers span.on { border-color: var(--coral-line); background: #FFF4F2; color: var(--coral-ink); }
.ks-tiers span.on b { color: var(--coral); }
.ks-tiers-l { margin-top: clamp(14px,1.8vw,22px); gap: 10px; }
.ks-tiers-l span { flex: 1 1 120px; padding: 12px 14px; border-radius: 12px; background: #fff; font-size: 10.5px; font-weight: 600; }
.ks-tiers-l span b { font-size: 18px; font-weight: 800; margin-top: 3px; }
.ks-detail-go, .ks-kasse-go, .ks-mail-go, .ks-pgo { display: block; width: 100%; border: 0; cursor: pointer; text-align: center; font-weight: 700; color: #fff; border-radius: 11px; }
.ks-detail-go { margin-top: auto; padding: 13px; background: var(--coral); font-size: 14.5px; box-shadow: 0 12px 26px -12px rgba(255,93,82,.7); }
.ks-detail-go:hover, .ks-mail-go:hover { background: var(--coral-d); }
.ks-fly { position: absolute; left: 14%; top: 34%; z-index: 9; pointer-events: none; width: 74px; height: 74px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 34px -14px rgba(16,26,46,.5); animation: fly 1s cubic-bezier(.4,0,.6,1) both; }
.ks-kasse { display: flex; flex-wrap: wrap; gap: clamp(12px,1.8vw,22px); padding: clamp(14px,1.8vw,22px); }
.ks-kasse-l { flex: 1 1 240px; min-width: 0; }
.ks-field { margin-top: 12px; }
.ks-field span { display: block; font-size: 10.5px; font-weight: 600; color: var(--mute-3); }
.ks-field b { display: block; font-size: 14px; font-weight: 600; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.ks-note { font-size: 11.5px; color: var(--mute-2); margin-top: 10px; }
.ks-kasse-r { flex: 1 1 200px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ks-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--mute); padding: 6px 0; }
.ks-line + .ks-line { border-top: 1px solid var(--line-3); }
.ks-line b { color: var(--ink); font-weight: 700; }
.ks-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--coral-line); }
.ks-total span { font-size: 12px; font-weight: 600; color: var(--mute-2); }
.ks-total > b { font-size: 20px; font-weight: 800; color: var(--coral); letter-spacing: -.02em; }
.ks-total-green { border-top-color: #EFEDE8; }
.ks-total-green > b { color: var(--green); }
.ks-total-plain > b { color: var(--ink); font-size: 19px; }
.ks-kasse-go { margin-top: 14px; padding: 12px; background: var(--ink); font-size: 14px; }
.ks-kasse-go:hover { background: var(--coral); }
.ks-done { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px,2vw,26px); padding: clamp(16px,2vw,26px); }
.ks-done-l { flex: 1 1 240px; min-width: 0; }
.ks-tick { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #EAF7F0; color: var(--green);
  font-size: 20px; animation: pulseRing 1.8s ease-out infinite; }
.ks-tick-sq { width: 34px; height: 34px; border-radius: 11px; background: var(--green); color: #fff; font-size: 15px; flex: 0 0 auto; }
.ks-tick-l { width: 56px; height: 56px; background: var(--green); color: #fff; font-size: 25px; animation: none; box-shadow: 0 16px 30px -14px rgba(34,160,107,.8); }
.ks-done-h { font-size: clamp(20px,2.6vw,30px); font-weight: 800; letter-spacing: -.03em; margin-top: 14px; }
.ks-done-l p { font-size: 13.5px; line-height: 1.55; color: var(--mute); margin-top: 8px; }
.ks-done-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.ks-done-meta small { display: block; font-size: 10.5px; font-weight: 600; color: var(--mute-3); }
.ks-done-meta b { font-size: 15px; }
.ks-done-r { flex: 1 1 200px; min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.ks-thumbs { display: flex; gap: 7px; }
.ks-thumbs span { flex: 1; height: clamp(46px,6vw,62px); border-radius: 9px; overflow: hidden; background: var(--sand-2); }
.ks-thumbs-s span { height: 48px; border-radius: 8px; }
.ks-notify-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.ks-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; color: var(--mint); }
.ks-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: dot 1.4s ease-in-out infinite; }
.ks-notify { display: flex; flex-wrap: wrap; gap: clamp(12px,1.8vw,20px); padding: clamp(14px,1.8vw,22px); }
.ks-notify-l { flex: 1 1 260px; min-width: 0; }
.ks-congrats { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(34,160,107,.14); border: 1px solid rgba(34,160,107,.4); }
.ks-congrats .ks-tick { animation: pulseRing 1.8s ease-out infinite; }
.ks-congrats b { display: block; font-size: clamp(15px,1.8vw,18px); font-weight: 800; letter-spacing: -.02em; }
.ks-congrats small { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 2px; }
.ks-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ks-kpis div { flex: 1 1 110px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); }
.ks-kpis small { display: block; font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,.5); }
.ks-kpis b { display: block; font-size: 17px; font-weight: 800; margin-top: 2px; }
.ks-kpis b.c { color: #FF7E74; }
.ks-inbox { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.ks-inbox .ks-label-caps { color: rgba(255,255,255,.45); }
.ks-inbox-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 12.5px; color: rgba(255,255,255,.5); }
.ks-inbox-row + .ks-inbox-row { border-top: 1px solid rgba(255,255,255,.08); }
.ks-inbox-row i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.25); }
.ks-inbox-row span { flex: 1; min-width: 0; }
.ks-inbox-row.on { color: #fff; font-weight: 700; }
.ks-inbox-row.on i { background: var(--green); }
.ks-inbox-row b { color: var(--mint); }
.ks-inbox-go { margin-top: 12px; padding: 10px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 13px; font-weight: 700; text-align: center; }

.ks-mail-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 6; }
.ks-mail { width: min(420px,88%); border-radius: 16px; border: 1px solid var(--line); background: #fff; box-shadow: 0 40px 80px -30px rgba(16,26,46,.5); overflow: hidden; animation: drop .55s var(--ease) both; }
.ks-mail-bar { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--line-3); background: var(--paper); font-size: 11.5px; font-weight: 700; color: var(--mute); }
.ks-mail-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); animation: dot 1.4s ease-in-out infinite; }
.ks-mail-bar small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--mute-3); }
.ks-mail-body { padding: 16px 18px 18px; }
.ks-mail-h { font-size: clamp(17px,2.1vw,21px); font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.ks-mail-body p { font-size: 13.5px; line-height: 1.55; color: var(--mute); margin-top: 8px; }
.ks-mail-go { margin-top: 16px; padding: 13px; background: var(--coral); font-size: 14.5px; box-shadow: 0 12px 26px -12px rgba(255,93,82,.7); animation: floaty 2.4s ease-in-out infinite; }

.ks-chip { position: absolute; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 32px -18px rgba(16,26,46,.4); transition: opacity .4s; z-index: 3; }
.ks-chip.is-off { opacity: 0; }
.ks-chip-price { top: 76px; right: -10px; animation: floaty 5.5s ease-in-out infinite; }
.ks-chip-price small { display: block; font-size: 10.5px; font-weight: 600; color: var(--mute-3); }
.ks-chip-price b { display: block; font-size: 15px; font-weight: 800; color: var(--coral); margin-top: 1px; }
.ks-chip-in { bottom: -16px; left: -6px; display: flex; align-items: center; gap: 8px; padding: 9px 13px; font-size: 12.5px; font-weight: 700; animation: floaty2 6.4s ease-in-out infinite; }
.ks-chip-in i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: dot 1.8s ease-in-out infinite; }

/* Telefon (nur Mobil) */
.ks-phone-demo { display: none; }
.ks-phone { position: relative; margin: 0 auto; width: 100%; max-width: 300px; padding: 9px; border-radius: 38px; background: var(--ink); box-shadow: 0 30px 60px -28px rgba(16,26,46,.6); }
.ks-phone-screen { position: relative; border-radius: 30px; background: #fff; overflow: hidden; height: 470px; text-align: left; }
.ks-phone-status { position: absolute; top: 0; left: 0; right: 0; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
  font-size: 9.5px; font-weight: 700; color: var(--ink); z-index: 9; }
.ks-ps { position: absolute; inset: 26px 0 0; padding: 14px; display: flex; flex-direction: column; animation: slideup .4s var(--ease) both; }
.ks-ps-flush { padding: 0; }
.ks-pmail { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 20px 36px -24px rgba(16,26,46,.5); animation: drop .5s var(--ease) both; }
.ks-pmail .ks-mail-bar { padding: 9px 12px; font-size: 10.5px; }
.ks-pmail-body { padding: 13px; }
.ks-pmail-h { font-size: 16px; font-weight: 800; letter-spacing: -.02em; margin-top: 5px; line-height: 1.2; }
.ks-pmail-body p { font-size: 12px; line-height: 1.5; color: var(--mute); margin: 6px 0 11px; }
.ks-pmail-body .ks-mail-go { margin-top: 12px; padding: 12px; font-size: 13.5px; }
.ks-purl { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-bottom: 1px solid var(--line-3); background: var(--paper); font-size: 9.5px; font-weight: 600; color: var(--mute-2); }
.ks-purl span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-purl em { font-style: normal; font-weight: 700; color: var(--coral-ink); background: var(--coral-soft); padding: 3px 7px; border-radius: 5px; }
.ks-plist { padding: 13px; display: flex; flex-direction: column; gap: 10px; }
.ks-prow { display: flex; gap: 11px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: #fff; text-align: left; width: 100%; }
.ks-prow.on { border-color: var(--coral-line); background: #FFF8F6; cursor: pointer; }
.ks-prow-img { flex: 0 0 58px; height: 58px; border-radius: 9px; overflow: hidden; background: var(--sand-2); }
.ks-prow small { display: block; font-size: 9.5px; font-weight: 600; color: var(--mute-3); }
.ks-prow b { display: block; font-size: 13px; font-weight: 700; margin-top: 1px; }
.ks-prow em { display: block; font-style: normal; font-size: 15px; font-weight: 800; color: var(--coral); margin-top: 3px; }
.ks-prow em.n { color: var(--ink); }
.ks-pdetail-img { height: 150px; background: var(--sand-2); flex: 0 0 auto; }
.ks-pdetail { padding: 13px; }
.ks-pprice { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.ks-pprice b { font-size: 22px; font-weight: 800; color: var(--coral); letter-spacing: -.02em; }
.ks-pprice small { font-size: 11px; color: var(--mute-3); }
.ks-pdetail .ks-swatches { margin-top: 12px; }
.ks-pdetail .ks-sizes span { font-size: 10.5px; }
.ks-pgo { margin-top: 14px; padding: 12px; background: var(--ink); font-size: 13.5px; }
.ks-pgo-coral { background: var(--coral); }
.ks-ps > .ks-pgo { margin-top: auto; }
.ks-pcart { flex: 1; padding-top: 10px; }
.ks-pcart .ks-line { font-size: 12px; padding: 9px 0; border-bottom: 1px solid #F4F2EE; }
.ks-pcart .ks-line + .ks-line { border-top: 0; }
.ks-pkasse { flex: 1; display: flex; flex-direction: column; }
.ks-pkasse .ks-field { margin-top: 9px; }
.ks-pkasse .ks-field b { font-size: 13px; }
.ks-pkasse .ks-total { margin-top: auto; border-top: 0; }
.ks-ps-done { align-items: center; justify-content: center; text-align: center; padding: 20px; background: linear-gradient(180deg,#F5FBF8,#fff); }
.ks-ps-done .ks-pmail-h { font-size: 19px; margin-top: 16px; }
.ks-ps-done p { font-size: 12.5px; line-height: 1.55; color: var(--mute); margin-top: 8px; }
.ks-done-foot { display: flex; justify-content: space-between; gap: 9px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #E6EFE9; width: 100%; font-size: 11px; color: var(--mute-2); }
.ks-done-foot b { color: var(--green); }
.ks-ps-dark { background: var(--ink); color: #fff; }
.ks-pnotify { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ks-pnotify-card { border: 1px solid rgba(255,93,82,.5); border-radius: 14px; background: rgba(255,93,82,.1); padding: 15px; animation: drop .5s var(--ease) both; }
.ks-live-c { margin: 0; color: #FFB3AC; letter-spacing: .05em; font-size: 10px; }
.ks-live-c i { background: var(--coral); }
.ks-pnotify-card > b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin-top: 9px; line-height: 1.2; }
.ks-pnotify-card p { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.62); margin-top: 7px; }
.ks-pnotify-card .ks-done-foot { border-top-color: rgba(255,255,255,.14); color: rgba(255,255,255,.5); }
.ks-pnotify-card .ks-done-foot b { color: var(--coral); font-size: 17px; }
.ks-pnotify .ks-pgo { margin-top: 11px; text-align: center; }

.ks-beats { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(6px,1vw,12px); margin-top: clamp(20px,2.4vw,28px); }
.ks-beats button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--mute-2); transition: all .3s; }
.ks-beats button i { width: 6px; height: 6px; border-radius: 50%; background: #D8D5CF; }
.ks-beats button.is-past { border-color: var(--coral-line); color: var(--coral-ink); }
.ks-beats button.is-past i { background: var(--coral); }
.ks-beats button.is-at { border-color: var(--coral); background: var(--coral); color: #fff; }
.ks-beats button.is-at i { background: #fff; }
.ks-beats .ks-auto { padding-left: 9px; border-color: var(--coral-line); background: #FFF4F2; color: var(--coral-ink); }
.ks-auto[aria-pressed="false"] { border-color: var(--line-2); background: #fff; color: var(--mute-2); }
.ks-switch { position: relative; width: 34px; height: 20px; border-radius: 999px; background: var(--coral); box-shadow: inset 0 0 0 1px rgba(16,26,46,.06); transition: background-color .3s var(--ease); }
.ks-switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,26,46,.3);
  transform: translateX(14px); transition: transform .3s var(--ease); }
.ks-auto[aria-pressed="false"] .ks-switch { background: #DCD9D3; }
.ks-auto[aria-pressed="false"] .ks-switch span { transform: none; }

/* ─────────────────────────────────────────── Vergleich */
.ks-same { flex: 0 1 300px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ks-same > div:last-child { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
.ks-same b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.ks-same span { font-size: 13px; color: var(--mute-2); }
.ks-race { display: flex; flex-wrap: wrap; gap: clamp(12px,1.6vw,20px); margin-top: clamp(24px,3vw,38px); }
.ks-race-col { flex: 1 1 300px; min-width: 0; padding: clamp(20px,2.4vw,30px); border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.ks-race-hot { border-color: var(--coral-line); box-shadow: 0 26px 50px -30px rgba(255,93,82,.5); }
.ks-race-top { display: flex; align-items: center; gap: 10px; }
.ks-race-top .ks-label-caps { font-size: 12px; color: var(--mute-3); }
.ks-race-top .ks-label-caps.ks-c { color: var(--coral-ink); }
.ks-ico { width: 28px; height: 28px; border-radius: 9px; background: var(--sand-2); color: var(--mute-2); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.ks-ico-c { background: var(--coral); color: #fff; }
.ks-race h3 { font-size: clamp(18px,2.2vw,22px); font-weight: 800; margin-top: 14px; letter-spacing: -.025em; }
.ks-steps { list-style: none; margin: 20px 0 0; padding: 0; }
.ks-steps li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #F4F2EE; }
.ks-steps i { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; font-style: normal;
  transition: all .4s; background: #F7F5F1; color: #C9CDD4; }
.ks-steps span { flex: 1; min-width: 0; font-size: 14px; color: var(--mute-4); transition: color .4s; }
.ks-steps em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--mute-3); opacity: 0; transition: opacity .4s; }
.ks-steps li.is-done i { background: #E8E5DF; color: var(--mute); }
.ks-steps li.is-done span { color: var(--ink-2); }
.ks-steps li.is-done em { opacity: 1; }
.ks-steps-hot i { background: #FFF0ED; color: #FFB3AC; }
.ks-steps-hot li.is-done i { background: var(--coral); color: #fff; }
.ks-steps-hot li.is-done span { color: var(--ink); }
.ks-steps-hot li.is-done em { color: var(--coral-ink); }
.ks-bar-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #EFEDE8; }
.ks-bar-row > span { font-size: 11px; font-weight: 600; color: var(--mute-3); flex: 0 0 74px; }
.ks-bar-row > b { font-size: 15px; font-weight: 800; min-width: 34px; text-align: right; }
.ks-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--sand-2); overflow: hidden; }
.ks-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #C9CDD4; transition: width .8s var(--ease); }
.ks-bar-hot { background: #FFF0ED; }
.ks-bar-hot i { background: var(--coral); }
.ks-race-hot .ks-bar-row { border-top-color: #FFE4E0; }
.ks-facts { display: flex; flex-wrap: wrap; gap: clamp(12px,1.6vw,20px); margin-top: clamp(12px,1.6vw,20px); }
.ks-facts > div { flex: 1 1 180px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.ks-facts p { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.ks-facts p b { font-size: clamp(22px,2.6vw,30px); font-weight: 800; letter-spacing: -.03em; color: var(--coral); }
.ks-facts p s, .ks-facts p span { font-size: 13px; color: var(--mute-3); }

/* ─────────────────────────────────────────── Ablauf */
.ks-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(22px,2.6vw,32px); }
.ks-tabs button { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-2); background: #fff; color: var(--mute); transition: all .3s; }
.ks-tabs button em { font-style: normal; font-size: 11px; font-weight: 800; opacity: .6; }
.ks-tabs button[aria-selected="true"] { border-color: var(--coral); background: var(--coral); color: #fff; }
.ks-panels { position: relative; margin-top: clamp(16px,2vw,22px); border: 1px solid var(--line); border-radius: 18px; background: var(--paper); overflow: hidden; min-height: clamp(320px,34vw,420px); }
.ks-panel { padding: clamp(16px,2vw,26px); animation: rise .35s var(--ease) both; }
.ks-p-art { display: flex; flex-wrap: wrap; gap: clamp(12px,1.6vw,18px); margin-top: 14px; }
.ks-p-img { flex: 0 0 clamp(90px,11vw,130px); height: clamp(110px,13vw,160px); border-radius: 12px; overflow: hidden; background: var(--sand-2); }
.ks-p-fields { flex: 1 1 260px; min-width: 0; }
.ks-p-two { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-bottom: 16px; }
.ks-p-two > * { flex: 1 1 120px; min-width: 0; }
.ks-p-two .ks-field { margin-top: 0; }
.ks-p-build { display: flex; flex-wrap: wrap; gap: clamp(12px,1.8vw,22px); margin-top: 14px; }
.ks-p-branchen { flex: 0 0 190px; min-width: 0; }
.ks-p-branchen b { display: block; font-size: 13px; font-weight: 600; color: var(--mute); padding: 8px 11px; border-radius: 9px; margin-bottom: 5px; }
.ks-p-branchen b.on { color: #fff; background: var(--coral); font-weight: 700; }
.ks-p-grid { flex: 1 1 260px; min-width: 0; }
.ks-p-grid-h { display: flex; justify-content: space-between; }
.ks-p-grid-h em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--coral-ink); }
.ks-p-tiles { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.ks-p-tiles img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 2px var(--coral); }
.ks-p-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ks-p-meta span { flex: 1 1 90px; }
.ks-p-meta small { display: block; font-size: 10.5px; color: var(--mute-3); font-weight: 600; }
.ks-p-meta b { font-size: 14px; }
.ks-p-send { display: flex; flex-wrap: wrap; gap: clamp(10px,1.4vw,16px); margin-top: 14px; }
.ks-p-send > div { flex: 1 1 200px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ks-p-send > div.on { border-color: var(--coral-line); }
.ks-p-send p { display: flex; align-items: center; }
.ks-p-send p i { width: 28px; height: 28px; border-radius: 9px; background: var(--sand-2); color: var(--mute); font-size: 11.5px; font-weight: 800; font-style: normal; display: flex; align-items: center; justify-content: center; }
.ks-p-send .on p i { background: var(--coral); color: #fff; }
.ks-p-send p em { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: dot 1.8s ease-in-out infinite; }
.ks-p-send b { display: block; font-size: 15px; font-weight: 800; margin-top: 11px; }
.ks-p-send small { display: block; font-size: 12px; color: var(--mute-2); margin-top: 3px; }
.ks-p-send code { display: block; background: none; border-radius: 0; font: 600 11.5px/1.4 'Plus Jakarta Sans', sans-serif; color: var(--coral-ink); margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--line-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ks-p-mail { max-width: 520px; margin: 14px auto 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px -26px rgba(16,26,46,.35); }
.ks-p-mail .ks-thumbs { margin-top: 14px; }
.ks-p-mail .ks-thumbs span { height: clamp(52px,7vw,80px); border-radius: 10px; }
.ks-p-mail .ks-mail-go { margin-top: 14px; padding: 12px; font-size: 14px; animation: none; }
.ks-p-order { display: flex; flex-wrap: wrap; gap: clamp(12px,1.6vw,18px); margin-top: 14px; }
.ks-p-order-img { flex: 0 0 clamp(90px,11vw,130px); min-width: 0; }
.ks-p-order-img .ks-p-img { height: clamp(96px,11vw,140px); }
.ks-p-order-img b { display: block; font-size: 13px; margin-top: 8px; }
.ks-p-order-img em { font-style: normal; font-size: 15px; font-weight: 800; color: var(--coral); }
.ks-p-order-box { flex: 1 1 260px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ks-p-order-box .ks-line { padding: 7px 0; }

/* ─────────────────────────────────────────── Preise je Kunde */
.ks-custs { display: flex; flex-wrap: wrap; gap: clamp(12px,1.6vw,20px); margin-top: clamp(24px,3vw,38px); }
.ks-cust { flex: 1 1 260px; min-width: 0; padding: clamp(18px,2.2vw,26px); border: 1px solid var(--line); border-radius: 16px; background: #fff;
  transition: transform .5s var(--ease), box-shadow .5s, border-color .5s; animation: cardIn .6s var(--ease) both; }
.ks-cust:nth-child(2) { animation-delay: .12s; } .ks-cust:nth-child(3) { animation-delay: .24s; }
.ks-cust-top { display: flex; align-items: center; gap: 10px; }
.ks-cust-top i { width: 30px; height: 30px; border-radius: 9px; background: var(--sand-2); color: var(--mute); font-size: 12px; font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center; transition: background-color .5s, color .5s; }
.ks-cust-top b { font-size: 15.5px; font-weight: 700; }
.ks-cust-save { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--green); opacity: 0; transition: opacity .5s; }
.ks-cust-top em { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: background-color .5s; }
.ks-cust-price { font-size: clamp(28px,3.4vw,40px); font-weight: 800; letter-spacing: -.03em; margin-top: 16px; transition: color .5s; font-variant-numeric: tabular-nums; }
.ks-cust-terms { font-size: 13px; color: var(--mute-2); margin-top: 4px; }
.ks-cust-bar { height: 6px; border-radius: 999px; background: var(--sand-2); margin-top: 16px; overflow: hidden; }
.ks-cust-bar i { display: block; height: 100%; border-radius: 999px; background: #C9CDD4; transition: background-color .5s; }
.ks-cust.is-on { transform: translateY(-8px); box-shadow: 0 26px 46px -26px rgba(255,93,82,.6); border-color: var(--coral-line); }
.ks-cust.is-on .ks-cust-top i { background: var(--coral); color: #fff; }
.ks-cust.is-on .ks-cust-save { opacity: 1; }
.ks-cust.is-on .ks-cust-top em { background: var(--coral); }
.ks-cust.is-on .ks-cust-price { color: var(--coral); }
.ks-cust.is-on .ks-cust-bar i { background: var(--coral); }

/* ─────────────────────────────────────────── Einblicke */
.ks-shots { margin-top: clamp(22px,2.6vw,32px); }
.ks-shot-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-shot-tabs button { padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line-2); background: #fff; color: var(--mute); transition: all .3s; }
.ks-shot-tabs button.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.ks-shot { margin: 16px 0 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 30px 70px -32px rgba(16,26,46,.32); }
.ks-shot img { width: 100%; height: auto; transition: opacity .25s; }
.ks-shot img.is-loading { opacity: .35; }
.ks-shot figcaption { padding: 13px 18px; border-top: 1px solid var(--line-3); background: var(--paper); font-size: 13.5px; color: var(--mute); }
.ks-customer { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px,4vw,56px); margin-top: clamp(40px,5vw,72px); }
.ks-customer-txt { flex: 1 1 300px; min-width: 0; }
.ks-customer-txt > p { margin-top: 12px; font-size: 15.5px; line-height: 1.6; color: var(--mute); }
.ks-checks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.ks-checks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ks-checks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: var(--coral-soft); color: var(--coral);
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ks-customer-shots { flex: 1.4 1 420px; min-width: 0; position: relative; padding-bottom: 30px; }
.ks-customer-d { width: 88%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(16,26,46,.4); }
.ks-customer-m { position: absolute; right: 0; bottom: 0; width: 26%; padding: 6px; border-radius: 24px; background: var(--ink); box-shadow: 0 30px 60px -24px rgba(16,26,46,.55); }
.ks-customer-m img { width: 100%; height: auto; border-radius: 18px; }
.ks-vorlagen { margin-top: clamp(40px,5vw,72px); }
.ks-vorlagen-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; margin-top: 14px; }
.ks-vorlagen figure { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s; }
.ks-vorlagen figure:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(16,26,46,.35); }
.ks-vorlagen img { width: 100%; height: auto; aspect-ratio: 16/11; object-fit: cover; object-position: top; border-bottom: 1px solid var(--line-3); }
.ks-vorlagen figcaption { padding: 10px 12px 12px; font-size: 12px; line-height: 1.45; color: var(--mute-2); }
.ks-vorlagen figcaption b { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }

/* ─────────────────────────────────────────── Preise */
.ks-editor-deal { flex: 0 1 460px; display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--coral-line); border-radius: 16px; background: #fff;
  box-shadow: 0 20px 40px -30px rgba(255,93,82,.6); }
.ks-deal-badge { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.ks-editor-deal p { font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.ks-editor-deal b { color: var(--ink); }
.ks-plans { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.6vw,20px); margin-top: clamp(24px,3vw,38px); align-items: start; }
.ks-plan { position: relative; display: flex; flex-direction: column; padding: clamp(22px,2.4vw,30px); border: 1px solid var(--line); border-radius: 20px; background: #fff; height: 100%; }
.ks-plan-hot { border-color: var(--coral-line); box-shadow: 0 30px 60px -34px rgba(255,93,82,.6); }
.ks-plan-flag { position: absolute; top: -12px; left: 24px; padding: 5px 11px; border-radius: 999px; background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 700; }
.ks-plan h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ks-plan-tag { margin-top: 4px; font-size: 13.5px; color: var(--mute-2); }
.ks-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; }
.ks-plan-price b { font-size: clamp(30px,3.4vw,40px); font-weight: 800; letter-spacing: -.035em; }
.ks-plan-price span { font-size: 14px; color: var(--mute-2); }
.ks-plan-editor { margin-top: 6px; font-size: 13px; color: var(--green); font-weight: 600; min-height: 20px; }
.ks-plan-editor b { font-weight: 800; }
.ks-plan .ks-checks { margin: 20px 0 24px; flex: 1; }
.ks-plan .ks-checks li { font-size: 14px; }
.ks-plan .ks-btn { margin-top: auto; }

/* ─────────────────────────────────────────── Abschluss */
.ks-cta { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px,4vw,56px); padding: clamp(34px,5vw,72px) clamp(20px,4vw,56px);
  border-radius: 24px; background: var(--ink); color: #fff; }
.ks-cta-glow1 { position: absolute; top: -180px; left: 12%; width: 560px; height: 560px; border-radius: 50%; filter: blur(90px); pointer-events: none;
  background: radial-gradient(circle, rgba(255,93,82,.55), rgba(255,93,82,0) 68%); animation: orbA 30s linear infinite; }
.ks-cta-glow2 { position: absolute; bottom: -220px; right: 8%; width: 480px; height: 480px; border-radius: 50%; filter: blur(95px); pointer-events: none;
  background: radial-gradient(circle, rgba(126,166,255,.42), rgba(126,166,255,0) 68%); animation: orbB 42s linear infinite; }
.ks-cta-txt { position: relative; flex: 1 1 380px; min-width: 0; }
.ks-cta-badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); }
.ks-cta-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); animation: dot 1.8s ease-in-out infinite; }
.ks-cta h2 { font-size: clamp(30px,4.4vw,56px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin-top: 18px; max-width: 15ch; }
.ks-cta-txt > p { margin-top: 16px; max-width: 44ch; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.66); }
.ks-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.ks-cta-stats { display: flex; flex-wrap: wrap; gap: clamp(18px,3vw,38px); margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.ks-cta-stats b { display: block; font-size: clamp(20px,2.4vw,28px); font-weight: 800; letter-spacing: -.02em; }
.ks-cta-stats b.c { color: #FF7E74; } .ks-cta-stats b.g { color: var(--mint); }
.ks-cta-stats small { font-size: 12.5px; color: rgba(255,255,255,.5); }
.ks-cta-cards { flex: 0 1 320px; min-width: 0; position: relative; min-height: 400px; }
.ks-float1 { position: absolute; top: 0; left: 50%; margin-left: -105px; width: 210px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 34px 60px -26px rgba(0,0,0,.65);
  animation: floatCard 7s ease-in-out infinite; z-index: 2; }
.ks-float1-img { height: 132px; background: var(--sand-2); }
.ks-float1-body { padding: 12px 14px 14px; }
.ks-float1-body small { display: block; font-size: 10.5px; font-weight: 600; color: var(--mute-3); }
.ks-float1-body b { display: block; font-size: 13.5px; color: var(--ink); margin-top: 2px; }
.ks-float1-body em { display: block; font-style: normal; font-size: 17px; font-weight: 800; color: var(--coral); margin-top: 3px; }
.ks-float2 { position: absolute; right: 0; bottom: 0; width: 210px; padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: floatCard2 9s ease-in-out infinite; z-index: 3; }
.ks-float2 p { display: flex; align-items: center; gap: 9px; }
.ks-float2 .ks-tick-sq { width: 26px; height: 26px; border-radius: 9px; font-size: 12px; animation: none; }
.ks-float2 small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); }
.ks-float2 b { display: block; font-size: 13px; margin-top: 8px; }
.ks-float2 em { display: block; font-style: normal; font-size: 16px; font-weight: 800; color: var(--mint); margin-top: 2px; }

/* ─────────────────────────────────────────── Kauf-Fenster */
.ks-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ks-modal-bg { position: absolute; inset: 0; background: rgba(16,26,46,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ks-modal-box { position: relative; width: min(460px,100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 20px; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(16,26,46,.5); animation: drop .35s var(--ease) both; }
.ks-modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--sand); cursor: pointer; font-size: 18px; line-height: 1; }
.ks-modal-box h2 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin-top: 6px; }
.ks-co-sum { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); font-size: 14px; }
.ks-co-sum div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.ks-co-sum span { color: var(--mute-2); }
.ks-co-note { display: block !important; font-size: 12.5px; color: var(--green) !important; padding-top: 8px !important; margin-top: 6px; border-top: 1px solid var(--line-3); line-height: 1.5; }
.ks-co-field { display: block; margin-top: 16px; }
.ks-co-field > span { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.ks-co-field input, .ks-co-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 11px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); }
.ks-co-field textarea { min-height: 96px; resize: vertical; }
.ks-co-field input:focus, .ks-co-field textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,93,82,.15); }
.ks-co-field small { display: block; margin-top: 6px; font-size: 12px; color: var(--mute-2); }
.ks-co-check { display: flex; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.ks-co-check input { margin-top: 3px; accent-color: var(--coral); }
.ks-co-err { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--coral-soft); color: var(--coral-ink); font-size: 13.5px; }
.ks-co-ok { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #EAF7F0; color: #17724C; font-size: 14px; }
.ks-modal-box .ks-btn { margin-top: 16px; }
.ks-co-fine { margin-top: 10px; font-size: 12px; color: var(--mute-2); text-align: center; }

/* ─────────────────────────────────────────── Mobil (Entwurf „Mobil") */
@media (max-width: 1040px) {
  .ks-vorlagen-grid { grid-template-columns: repeat(3,1fr); }
  .ks-plans { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 900px) { .ks-subnav-links { display: none; } .ks-subnav-in > .ks-btn { margin-left: auto; } }
@media (max-width: 760px) {
  .ks-subnav { display: none; }
  .ks-hero { padding: 30px 18px 34px; text-align: left; }
  .ks-hero-in { text-align: left; }
  .ks-badge .ks-d { display: none; } .ks-badge .ks-m { display: inline; }
  .ks-hero h1 { margin: 16px 0 0; font-size: 34px; line-height: 1.06; }
  .ks-lede { margin: 14px 0 0; font-size: 15px; }
  .ks-hero-btns { flex-direction: column; margin-top: 20px; }
  .ks-hero-btns .ks-btn { width: 100%; padding: 15px; }
  .ks-stage { display: none; }
  .ks-phone-demo { display: block; margin-top: 34px; }
  .ks-phone-head { display: flex; align-items: center; margin-bottom: 12px; }
  .ks-beats { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; margin: 16px -18px 0; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
  .ks-beats::-webkit-scrollbar { display: none; }
  .ks-beats button { flex: 0 0 auto; font-size: 12px; padding: 7px 12px; }
  .ks-sec { padding: 34px 18px; }
  .ks-h2 { font-size: 26px; line-height: 1.12; }
  .ks-sub { font-size: 14.5px; }
  .ks-same { display: none; }
  .ks-race-col { padding: 18px; }
  .ks-facts { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ks-facts > div { flex: 0 0 152px; padding: 14px 16px; }
  .ks-facts p b { font-size: 22px; }
  .ks-p-branchen { flex-basis: 100%; }
  .ks-p-branchen b { display: inline-block; }
  .ks-customer-shots { flex-basis: 100%; }
  .ks-vorlagen-grid { grid-template-columns: repeat(2,1fr); }
  .ks-editor-deal { flex-basis: 100%; }
  .ks-cta { padding: 34px 22px; }
  .ks-cta h2 { font-size: 28px; }
  .ks-cta-btns { flex-direction: column; }
  .ks-cta-btns .ks-btn { width: 100%; }
  .ks-cta-cards { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ks *, .ks *::before, .ks *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ks-orbs { display: none; }
}