/* ============================================================================
   design-layer.css — Schicht 3b für hotbytes.online
   Heimat für alles, was das CrocoBuilder-Design-System nicht tragen kann
   (Footgun B4a): @keyframes, Pseudo-Elemente, Kontext-Selektoren, Zwischen-
   Breakpoints. Selektoren laufen gegen die stabilen .cb-<element-id>-Klassen
   des Builders und die cb-*-Komponentenklassen. Tokens kommen IMMER aus dem
   Design-System (styles-global) — hier werden keine :root-Basiswerte gesetzt.
   ========================================================================== */

/* ---------- Mobil-Typoskala der Quelle (<620px): bewusster Media-Override,
   keine Basis-Redefinition (Rule 15). Lange Komposita sprengen sonst den
   Viewport — Entscheidung aus dem Freeze übernommen. ---------- */
@media (max-width: 620px) {
  :root {
    --text-4xl: clamp(1.75rem, 0.95rem + 4vw, 2.5rem);
    --text-2xl: clamp(1.5rem, 0.86rem + 3.2vw, 2.1rem);
  }
}

/* ---------- Kontexte ---------- */
.on-light h1, .on-light h2, .on-light h3, .on-light h4 { color: var(--color-ink); }
.on-light p, .on-light .cb-sec-head__lead { color: var(--color-ink); }
.on-light .btn-ghost { color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-border); }
.on-light .btn-ghost:hover { color: var(--color-accent-dark); box-shadow: inset 0 0 0 1.5px var(--color-accent); background: rgba(255,157,20,.08); }

/* Anker: Sprungziele setzen site.js-IDs; Platz für den fixen Header */
#projekte, #leistungen, #pakete, #check { scroll-margin-top: 110px; }

/* Panels: Inhalt hält Abstand zur gerundeten Kante */
.panel > .container { padding-inline: var(--space-panel-pad); }

/* ---------- Buttons: Lichtspot + Pfeiltausch (FKT-Mechanik, kein Glow) ---- */
.btn {
  background-image: radial-gradient(120px circle at var(--px, 50%) var(--py, 130%),
    var(--spot, rgba(255,255,255,.22)) 0%, transparent 60%);
  text-decoration: none;
}
.btn-primary { --spot: rgba(255,255,255,.38); }
.btn-ghost   { --spot: rgba(var(--color-accent-rgb), .16); }
.btn-arrow::after {
  content: "↗"; display: inline-block; margin-left: .1em; font-style: normal;
  transition: transform .34s cubic-bezier(.3,.7,.3,1), opacity .34s;
}
.btn-arrow::before {
  content: "↗"; position: absolute; right: 24px; font-style: normal;
  transform: translate(-105%, 105%); opacity: 0;
  transition: transform .34s cubic-bezier(.3,.7,.3,1), opacity .34s;
}
.btn-arrow:hover::after { transform: translate(105%, -105%); opacity: 0; }
.btn-arrow:hover::before { transform: none; opacity: 1; }

/* ---------- Header (Chrome) ---------- */
.cb-header_root { transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
.cb-header_root.stuck {
  background: rgba(8,11,15,.82);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
}
.cb-header_menu .pb-nav__collapse-toggle { color: #fff; }
/* Mobile-Toggle: Hamburger statt „Menu"-Text; das Label bleibt für Screenreader.
   Drei Balken = ::before (oben) + dessen box-shadow (Mitte) + ::after (unten),
   offen (aria-expanded) drehen die Balken zum X. */
.cb-header_menu .pb-nav__collapse-toggle { width: 44px; height: 44px; position: relative;
  background: transparent; border: 0; cursor: pointer; }
.cb-header_menu .pb-nav__collapse-label { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cb-header_menu .pb-nav__collapse-toggle::before,
.cb-header_menu .pb-nav__collapse-toggle::after { content: ""; position: absolute;
  left: 50%; top: 50%; width: 22px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .3s cubic-bezier(.3,.7,.3,1), box-shadow .2s; }
.cb-header_menu .pb-nav__collapse-toggle::before { transform: translate(-50%, -50%) translateY(-7px);
  box-shadow: 0 7px 0 #fff; }
.cb-header_menu .pb-nav__collapse-toggle::after { transform: translate(-50%, -50%) translateY(7px); }
.cb-header_menu .pb-nav__collapse-toggle[aria-expanded="true"]::before {
  transform: translate(-50%, -50%) rotate(45deg); box-shadow: 0 0 0 rgba(255,255,255,0); }
.cb-header_menu .pb-nav__collapse-toggle[aria-expanded="true"]::after {
  transform: translate(-50%, -50%) rotate(-45deg); }
/* Desktop-Links: Underline wächst von links heran (Quelle .nav-links a::after) */
@media (min-width: 1025px) {
  .cb-header_menu .pb-nav__link { position: relative; padding: 4px 0; transition: color .2s; }
  .cb-header_menu .pb-nav__link::after { content: ""; position: absolute; left: 0; right: 100%;
    bottom: 0; height: 1.5px; background: var(--color-accent); transition: right .28s; }
  .cb-header_menu .pb-nav__link:hover { color: var(--color-accent); }
  .cb-header_menu .pb-nav__link:hover::after { right: 0; }
}
/* Footgun A13: Panel-Styles NUR auf der Collapse-Breite scopen — offen teleportiert
   pb-nav das Panel an den body, und dieselbe Klasse rendert desktop inline. */
@media (max-width: 1024px) {
  /* CBs nav-menu-frontend.css setzt das Panel-Weiß über
     .pb-nav.is-collapsed .pb-nav__mobile-panel (0-3-0) — hier denselben Selektor
     mit body-Präfix spiegeln, damit die dunkle Variante sicher gewinnt. */
  body .pb-nav.is-collapsed .pb-nav__mobile-overlay { background: rgba(5,8,16,.6);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  body .pb-nav.is-collapsed .pb-nav__mobile-panel { background: var(--color-dark-2);
    padding: 30px 26px; border-right: 1px solid var(--color-dark-line); }
  body .pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__list { list-style: none;
    display: grid; gap: 4px; padding: 0; margin: 46px 0 0; }
  body .pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__link { color: #fff;
    font-family: var(--font-head); font-weight: 700; font-size: var(--text-lg);
    display: block; padding: 12px 8px; border-radius: 10px; }
  body .pb-nav.is-collapsed .pb-nav__mobile-panel .pb-nav__link:hover { color: var(--color-accent);
    background: rgba(255,255,255,.04); }
  body .pb-nav.is-collapsed .pb-nav__mobile-close { color: #fff; background: rgba(255,255,255,.08);
    border: 0; border-radius: 50%; width: 36px; height: 36px; cursor: pointer;
    display: grid; place-items: center; position: absolute; top: 16px; right: 16px; }
  body .pb-nav.is-collapsed .pb-nav__mobile-close:hover { background: rgba(255,255,255,.18); }
}
body { padding-top: 0; } /* Header ist fixed und Teil des Hero-Panels-Looks */

/* ---------- HERO ---------- */
.cb-hero_root {
  min-height: calc(100svh - 28px);
  display: flex; align-items: center;
  padding-top: 132px; padding-bottom: 96px;
}
/* Statische Ecken-Glows unter den Lichtwolken (Quelle .hero::before): oben rechts
   kräftig, unten links leise — das warme Grundlicht, auf dem Aurora + Spot aufsetzen. */
.cb-hero_root::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(105% 70% at 80% 8%, rgba(var(--color-accent-rgb),.20), transparent 58%),
    radial-gradient(80% 60% at 12% 92%, rgba(var(--color-accent-rgb),.10), transparent 60%); }
.cb-hero_inner { padding-inline: var(--space-wide-pad); position: relative; z-index: 3; }
.cb-hero_grid { display: grid; grid-template-columns: 1.36fr .84fr; gap: 48px; align-items: center; }
@media (max-width: 1000px) { .cb-hero_grid { grid-template-columns: 1fr; gap: 42px; } }
.cb-hero_copy > * + * { margin-top: 24px; }
.cb-hero_h1 h1, h1.cb-hero_h1 { max-width: 20ch; }
.cb-hero_lead { font-size: var(--text-md); color: #fff; max-width: 62ch; }
.cb-hero_cta_row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 38px; }
.cb-hero_proof { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 34px; font-size: var(--text-sm); color: #fff; }
.cb-hero_proof .stars { color: var(--color-accent); letter-spacing: 2px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent); display: inline-block; animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.4; transform:scale(.85);} 50% { opacity:1; transform:scale(1.15);} }

/* Aurora + Dotgrid + Maus-Spot (DOM via site.js — A12: leere Container rendern nicht) */
.cb-hero_root .dotgrid { position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.1px, transparent 1.1px); background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
          mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%); }
.cb-hero_root .aurora { position:absolute; inset:-18%; z-index:0; pointer-events:none; filter:blur(80px); opacity:.42;
  translate: var(--ax, 0px) var(--ay, 0px);
  -webkit-mask-image: radial-gradient(58% 52% at 42% 46%, transparent 12%, #000 76%);
          mask-image: radial-gradient(58% 52% at 42% 46%, transparent 12%, #000 76%); }
.cb-hero_root .aurora i { position:absolute; display:block; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.aurora .a1 { width:44%; height:56%; left:-12%; top:16%; background:radial-gradient(circle, rgba(255,157,20,.30), rgba(255,157,20,0) 66%); animation:au1 38s ease-in-out infinite; }
.aurora .a2 { width:52%; height:62%; right:-14%; top:-14%; background:radial-gradient(circle, rgba(255,140,26,.26), rgba(255,140,26,0) 68%); animation:au2 46s ease-in-out infinite; }
.aurora .a3 { width:36%; height:46%; left:30%; bottom:-20%; background:radial-gradient(circle, rgba(255,190,90,.16), rgba(255,190,90,0) 70%); animation:au3 52s ease-in-out infinite; }
.aurora .a4 { width:28%; height:36%; right:8%; bottom:-4%; background:radial-gradient(circle, rgba(255,110,10,.20), rgba(255,110,10,0) 68%); animation:au4 43s ease-in-out infinite; }
@keyframes au1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(18%,14%,0) scale(1.16)} 66%{transform:translate3d(8%,-10%,0) scale(.92)} }
@keyframes au2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 40%{transform:translate3d(-22%,18%,0) scale(1.10)} 70%{transform:translate3d(-6%,32%,0) scale(.88)} }
@keyframes au3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-16%,-22%,0) scale(1.22)} }
@keyframes au4 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 45%{transform:translate3d(12%,-26%,0) scale(1.14)} 75%{transform:translate3d(-14%,-8%,0) scale(.94)} }
.cb-hero_root .hero-spot { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .6s ease;
  background: radial-gradient(640px circle at var(--hx,50%) var(--hy,50%), rgba(var(--color-accent-rgb),.13), transparent 70%); }
.cb-hero_root .hero-spot.an { opacity:1; }
@media (hover:none) { .cb-hero_root .hero-spot { display:none; } }

/* KI-Chat: schräg nach hinten, transparent — WhatsApp-Logik ohne Fenster */
.cb-hero_chat { max-width:580px; width:100%; margin-left:auto; margin-right:32px;
  display:flex; flex-direction:column; gap:22px;
  transform: perspective(1100px) rotateY(-15deg) rotateX(5deg); opacity:.81; }
@media (max-width:1000px) { .cb-hero_chat { transform:none; opacity:1; margin-inline:auto; } }
.cb-chat_thread { display:flex; flex-direction:column; gap:12px; min-height:220px; justify-content:flex-end; }
.ki-bub { max-width:86%; padding:13px 17px; font-size:var(--text-base); line-height:1.5; border-radius:18px; animation:bubIn .32s cubic-bezier(.2,.9,.3,1) both; }
.ki-bub.me { align-self:flex-end; background:var(--color-accent); color:var(--color-dark); border-bottom-right-radius:5px; font-weight:600; }
.ki-bub.ai { align-self:flex-start; background:rgba(255,255,255,.08); color:#fff; border-bottom-left-radius:5px; border:1px solid var(--color-dark-line); }
.ki-bub.ai b { color: var(--color-accent); }
@keyframes bubIn { from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none} }
.ki-typing { display:inline-flex; gap:5px; align-items:center; padding:15px 18px; }
.ki-typing i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.6); animation:dot 1.2s infinite; }
.ki-typing i:nth-child(2){animation-delay:.15s} .ki-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot { 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }
.cb-chat_input { display:flex; align-items:center; gap:12px; padding:0 2px 12px; border-bottom:2px solid var(--color-accent); min-height:44px; }
.cb-chat_input .txt { font-size:var(--text-base); color:#fff; flex:1; }
.cb-chat_input .caret { display:inline-block; width:2px; height:1.05em; background:var(--color-accent); vertical-align:-2px; margin-left:2px; animation:blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.cb-chat_input .send { flex:0 0 34px; height:34px; border-radius:50%; background:var(--color-accent); color:var(--color-dark); display:grid; place-items:center; }
.cb-hero_scroll_hint { position:absolute; right:34px; bottom:44px; z-index:5; display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.42); writing-mode:vertical-rl; }
.cb-hero_scroll_hint .l { width:1px; height:70px; background:linear-gradient(to bottom, var(--color-accent), transparent); }
@media (max-width:1200px) { .cb-hero_scroll_hint { display:none; } }

/* ---------- Sektions-Kopf (Komponente) ---------- */
.cb-sec-head { max-width:1000px; margin-bottom:clamp(2rem, 4vw, 3.4rem); }
.cb-sec-head.sec-center { margin-inline:auto; text-align:center; }
.cb-sec-head__kick { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-size:var(--text-xs); color:var(--color-accent); margin-bottom:18px; }
.cb-sec-head__kick::before { content:""; width:26px; height:1px; background:var(--color-accent); }
.cb-sec-head.sec-center .cb-sec-head__kick::after { content:""; width:26px; height:1px; background:var(--color-accent); }
.cb-sec-head__lead { margin-top:16px; font-size:var(--text-md); color:#fff; }
.cb-sec-head.sec-center .cb-sec-head__lead { margin-inline:auto; max-width:62ch; }

/* ---------- LOGO-MARQUEE (hell, full-bleed) ---------- */
.cb-marq_root { overflow:hidden; white-space:nowrap; padding:30px 0; }
.cb-marq_track { display:inline-flex; align-items:center; gap:88px; width:max-content; max-width:none; animation:marq 34s linear infinite; will-change:transform; }
@keyframes marq { to { transform:translateX(-50%); } }
.cb-marq_track img { height:26px; width:auto; opacity:.62; filter:grayscale(1); transition:opacity .25s, filter .25s; }
.cb-marq_track img:hover { opacity:1; filter:none; }
.cb-marq_track .m-wide img, .cb-marq_track img.m-wide { height:19px; }
.cb-marq_track .m-tall img, .cb-marq_track img.m-tall { height:38px; }
.cb-marq_track .m-mid img,  .cb-marq_track img.m-mid  { height:23px; }
.cb-marq_txt_asys { font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-base); color:rgba(29,29,27,.38); }

/* ---------- PROJEKT-GALERIE ---------- */
.cb-gal_rows { display:grid; gap:22px; }
.gal-track { display:flex; gap:22px; width:max-content; max-width:none; will-change:transform; }
.cb-gal_rows .cb-gal_top_loop, .cb-gal_rows .cb-gal_bottom_loop { overflow:visible; }
.pcard { width:290px; flex:0 0 290px; }
.pcard-frame { background:var(--color-dark-3); border:1px solid var(--color-dark-line); border-radius:14px; overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s; }
.pcard:hover .pcard-frame { transform:translateY(-6px); border-color:rgba(var(--color-accent-rgb),.55); box-shadow:0 24px 56px rgba(0,0,0,.6); }
.pcard-frame::before { content:""; display:block; height:32px; border-bottom:1px solid var(--color-dark-line); background:
  radial-gradient(circle 4px at 16px 16px, rgba(var(--color-accent-rgb),.6) 99%, transparent),
  radial-gradient(circle 4px at 32px 16px, rgba(255,255,255,.22) 99%, transparent),
  radial-gradient(circle 4px at 48px 16px, rgba(255,255,255,.22) 99%, transparent),
  rgba(255,255,255,.045); }
.pcard-shot { aspect-ratio:16/10; position:relative; overflow:hidden; background:linear-gradient(150deg, hsl(214deg 30% 16%), hsl(255deg 28% 10%)); }
.pcard-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease; }
.pcard-shot img + img { opacity:0; }
.pcard:hover .pcard-shot img + img { opacity:1; }
.pcard-shot:not(:has(img))::before { content:""; position:absolute; inset:0;
  background: radial-gradient(70% 60% at 78% 12%, rgba(var(--color-accent-rgb),.22), transparent 62%); }
.pcard-shot:not(:has(img))::after { content:"Platzhalter"; position:absolute; top:10px; right:10px; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.25); border-radius:5px; padding:3px 7px; }
.pcard-cap-title { font-family:var(--font-head); font-size:var(--text-base); color:#fff; padding:13px 4px 0; }
.pcard-cap-sub { font-size:var(--text-xs); color:#fff; padding:2px 4px 0; }

/* ---------- AUSGANGSLAGE ---------- */
.cb-prob_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.cb-prob-item { padding:4px 44px; border-left:1px solid var(--color-border); }
.cb-el:first-child > .cb-prob-item, .cb-prob_grid > :first-child .cb-prob-item { padding-left:0; border-left:0; }
.cb-prob_grid > :last-child .cb-prob-item { padding-right:0; }
.cb-prob-item__ico { display:block; color:var(--color-accent); margin-bottom:22px; }
.cb-prob-item__ico svg { width:38px; height:38px; }
.cb-prob-item__title { font-size:var(--text-lg); margin-bottom:12px; }
.cb-prob-item__text { font-size:var(--text-base); }
@media (max-width:900px) {
  .cb-prob_grid { grid-template-columns:1fr; gap:36px; }
  .cb-prob-item, .cb-prob_grid > :first-child .cb-prob-item { padding:0 0 0 24px; border-left:2px solid rgba(var(--color-accent-rgb),.4); }
}
.pi-eye { animation:piEye 4.4s ease-in-out infinite; }
.pi-pupil { animation:piBlind 4.4s ease-in-out infinite; }
.pi-slash { stroke-dasharray:26; stroke-dashoffset:26; animation:piSlash 4.4s ease-in-out infinite; }
@keyframes piEye { 0%,32%{opacity:1} 52%,88%{opacity:.34} 100%{opacity:1} }
@keyframes piBlind { 0%,32%{opacity:1} 52%,88%{opacity:0} 100%{opacity:1} }
@keyframes piSlash { 0%,30%{stroke-dashoffset:26} 50%,86%{stroke-dashoffset:0} 100%{stroke-dashoffset:26} }
.pi-shield { animation:piShield 3.6s ease-in-out infinite; }
.pi-bar, .pi-dot { animation:piWarn 1.8s ease-in-out infinite; }
.pi-dot { animation-delay:.14s; }
@keyframes piShield { 0%,100%{opacity:1} 50%{opacity:.46} }
@keyframes piWarn { 0%,100%{opacity:.26} 50%{opacity:1} }
.pi-l { animation:piL 3.4s ease-in-out infinite; }
.pi-r { animation:piR 3.4s ease-in-out infinite; }
.pi-mid { transform-origin:12px 12px; animation:piMid 3.4s ease-in-out infinite; }
@keyframes piL { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2.9px)} }
@keyframes piR { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-2.9px)} }
@keyframes piMid { 0%,100%{transform:scale(1)} 50%{transform:scale(.66)} }

/* ---------- LEISTUNGEN: Sticky-Stapel ---------- */
.cb-svc_root { padding-bottom:0; }
.cb-svc_scroll { position:relative; margin-top:-140px; margin-bottom:-160px; }
@media (max-width:900px) { .cb-svc_scroll { margin-top:-50px; margin-bottom:-60px; } }
.cb-svc_stage { position:sticky; top:0; height:100svh; display:grid; place-items:center; overflow:hidden; }
.cb-svc_stage > .cb-el { grid-area:1/1; position:absolute; width:min(880px,90vw);
  transition:transform .55s cubic-bezier(.22,.8,.28,1), opacity .45s ease; will-change:transform,opacity; }
.cb-svc-card { position:relative; border-radius:var(--radius-lg); padding:52px; overflow:visible; }
.cb-svc-card::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background:var(--color-dark-3); border:1px solid var(--color-dark-line); transition:border-color .45s, box-shadow .45s; }
.cb-el.on .cb-svc-card::after { border-color:rgba(var(--color-accent-rgb),.55); box-shadow:0 34px 80px rgba(0,0,0,.55); }
.cb-svc-card__ico { position:absolute; z-index:-1; left:-88px; top:-88px; width:168px; height:168px; border-radius:36px;
  background:var(--color-accent); color:var(--color-dark); box-shadow:0 24px 54px rgba(0,0,0,.5); }
.cb-svc-card__ico svg { position:absolute; left:14px; top:14px; width:60px; height:60px; }
.cb-svc-card__num { position:absolute; top:30px; right:36px; font-family:var(--font-head); font-weight:700;
  font-size:var(--text-base); color:rgba(255,255,255,.25); z-index:2; }
.cb-el.on .cb-svc-card__num { color:var(--color-accent); }
.cb-svc-card__title { position:relative; z-index:2; font-size:var(--text-xl); margin-bottom:10px; }
.cb-svc-card__text { position:relative; z-index:2; color:#fff; font-size:var(--text-base); }
@media (min-width:821px) { .cb-svc-card__title, .cb-svc-card__text { max-width:64%; } }
.cb-svc-card__art { position:absolute; inset:0; z-index:1; overflow:hidden; border-radius:inherit; opacity:0; transition:opacity .55s ease .06s;
  -webkit-mask-image:linear-gradient(to right, transparent 4%, rgba(0,0,0,.3) 36%, #000 66%);
          mask-image:linear-gradient(to right, transparent 4%, rgba(0,0,0,.3) 36%, #000 66%); }
.cb-el.on .cb-svc-card__art { opacity:1; }
.cb-svc-card__art::before { content:""; position:absolute; top:-45%; right:-20%; width:52%; height:86%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.22), transparent 70%); }
.cb-svc-card__art * { animation-play-state:paused; }
.cb-el.on .cb-svc-card__art * { animation-play-state:running; }
@media (max-width:820px) { .cb-svc-card__art > * { display:none; } }
@media (max-width:700px) { .cb-svc-card { padding:30px; } .cb-svc_stage { height:92svh; }
  .cb-svc-card__ico { left:-52px; top:-52px; width:118px; height:118px; border-radius:26px; }
  .cb-svc-card__ico svg { left:11px; top:11px; width:34px; height:34px; } }
/* Motive (Klassen wie Quelle, gescoped) */
.art-shots .shot { position:absolute; width:186px; height:130px; border-radius:10px; background:#1b2430;
  border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 40px rgba(0,0,0,.5); }
.art-shots .shot::before { content:""; position:absolute; left:0; right:0; top:0; height:16px; background:#242f3d;
  border-radius:9px 9px 0 0; border-bottom:1px solid rgba(255,255,255,.08); }
.art-shots .shot i { position:absolute; left:11px; display:block; border-radius:3px; background:rgba(255,255,255,.17); }
.art-shots .shot i:nth-child(1) { top:29px; width:62%; height:11px; background:var(--color-accent); opacity:.8; }
.art-shots .shot i:nth-child(2) { top:48px; width:80%; height:6px; }
.art-shots .shot i:nth-child(3) { top:60px; width:55%; height:6px; }
.art-shots .shot i:nth-child(4) { top:79px; left:11px; right:11px; height:36px; border-radius:6px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 30%, transparent 30% 35%); }
.art-shots .s1 { right:17%; top:9%; animation:shot1 15s ease-in-out infinite; }
.art-shots .s2 { right:2%; top:36%; animation:shot2 18s ease-in-out infinite; }
.art-shots .s3 { right:24%; top:62%; animation:shot3 21s ease-in-out infinite; }
@keyframes shot1 { 0%,100%{transform:translate3d(0,0,0) rotate(-7deg)} 50%{transform:translate3d(-9px,-13px,0) rotate(-4deg)} }
@keyframes shot2 { 0%,100%{transform:translate3d(0,0,0) rotate(4.5deg)} 50%{transform:translate3d(10px,11px,0) rotate(7.5deg)} }
@keyframes shot3 { 0%,100%{transform:translate3d(0,0,0) rotate(-2deg)} 50%{transform:translate3d(-11px,9px,0) rotate(-5.5deg)} }
.art-ki svg { position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:62%; height:auto; }
.art-ki .lnk path { stroke-dasharray:9 92; stroke-dashoffset:101; animation:kiFlow 3.4s linear infinite; }
.art-ki .lnk path:nth-child(2){animation-delay:.45s} .art-ki .lnk path:nth-child(3){animation-delay:.9s}
.art-ki .lnk path:nth-child(4){animation-delay:1.35s} .art-ki .lnk path:nth-child(5){animation-delay:1.8s}
.art-ki .lnk path:nth-child(6){animation-delay:2.25s}
@keyframes kiFlow { to{stroke-dashoffset:0} }
.art-ki .ring { transform-origin:150px 110px; animation:kiPing 3.6s ease-out infinite; }
.art-ki .r2 { animation-delay:1.8s; }
@keyframes kiPing { 0%{transform:scale(.45); opacity:.85} 100%{transform:scale(3.6); opacity:0} }
.art-ki .nd { animation:kiNode 3.6s ease-in-out infinite; }
@keyframes kiNode { 0%,100%{opacity:.45} 55%{opacity:1} }
.art-chart .bars { position:absolute; right:8%; top:52%; transform:translateY(-50%); display:flex; align-items:flex-end; gap:11px; height:104px; }
.art-chart .bars i { display:block; width:19px; border-radius:4px 4px 2px 2px; background:rgba(255,255,255,.16);
  transform-origin:50% 100%; animation:barGrow 4.6s ease-in-out infinite; }
.art-chart .bars i:nth-child(1){height:34%} .art-chart .bars i:nth-child(2){height:52%; animation-delay:.18s}
.art-chart .bars i:nth-child(3){height:44%; animation-delay:.36s} .art-chart .bars i:nth-child(4){height:70%; animation-delay:.54s}
.art-chart .bars i:nth-child(5){height:84%; animation-delay:.72s; background:rgba(255,157,20,.5)}
.art-chart .bars i:nth-child(6){height:100%; animation-delay:.9s; background:var(--color-accent)}
@keyframes barGrow { 0%,100%{transform:scaleY(.42)} 45%{transform:scaleY(1)} }
.art-chart svg { position:absolute; right:6%; top:50%; transform:translateY(-50%); width:56%; height:auto; }
.art-chart .trend { stroke-dasharray:340; stroke-dashoffset:340; animation:trendDraw 4.6s ease-in-out infinite; }
@keyframes trendDraw { 0%{stroke-dashoffset:340} 45%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:340} }
.art-rack .unit { position:absolute; right:7%; width:210px; height:34px; border-radius:7px; background:#1a222d;
  border:1px solid rgba(255,255,255,.13); box-shadow:0 10px 26px rgba(0,0,0,.4); }
.art-rack .unit::after { content:""; position:absolute; left:38px; top:12px; right:16px; height:9px; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 4px, transparent 4px 9px); }
.art-rack .unit i { position:absolute; left:15px; top:13px; width:8px; height:8px; border-radius:50%; background:var(--color-accent); animation:led 2.6s ease-in-out infinite; }
.art-rack .u1{top:14%} .art-rack .u2{top:35%} .art-rack .u3{top:56%} .art-rack .u4{top:77%}
.art-rack .u2 i{animation-delay:.5s} .art-rack .u3 i{animation-delay:1s} .art-rack .u4 i{animation-delay:1.5s}
@keyframes led { 0%,100%{opacity:.22; box-shadow:none} 50%{opacity:1; box-shadow:0 0 12px var(--color-accent)} }
.art-shield svg { position:absolute; right:11%; top:50%; transform:translateY(-50%); width:40%; height:auto; }
.art-shield .tick { stroke-dasharray:120; stroke-dashoffset:120; animation:tickDraw 4.2s ease-in-out infinite; }
@keyframes tickDraw { 0%,10%{stroke-dashoffset:120} 45%,85%{stroke-dashoffset:0} 100%{stroke-dashoffset:120} }
.art-shield .sh { animation:shGlow 4.2s ease-in-out infinite; }
@keyframes shGlow { 0%,100%{opacity:.55} 50%{opacity:1} }
.art-faces .f { position:absolute; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.18);
  box-shadow:0 14px 34px rgba(0,0,0,.45); filter:grayscale(1) contrast(1.05); }
.art-faces .f img { width:100%; height:100%; object-fit:cover; }
.art-faces .f1 { width:96px; height:96px; right:26%; top:12%; animation:bob 9s ease-in-out infinite; }
.art-faces .f2 { width:120px; height:120px; right:6%; top:34%; border-color:var(--color-accent); filter:none; animation:bob 11s ease-in-out infinite .8s; }
.art-faces .f3 { width:82px; height:82px; right:30%; top:58%; animation:bob 10s ease-in-out infinite .4s; }
.art-faces .f4 { width:70px; height:70px; right:10%; top:76%; animation:bob 12s ease-in-out infinite 1.2s; }
@keyframes bob { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-14px,0)} }
.cb-svc_cta_row { text-align:center; padding-top:46px; padding-bottom:var(--space-section); position:relative; z-index:40; }

/* ---------- PAKETE ---------- */
.cb-pakete_grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:1020px; margin-inline:auto; }
@media (max-width:820px) { .cb-pakete_grid { grid-template-columns:1fr; gap:20px; } }
.cb-plan-card { position:relative; border:1px solid var(--color-border); border-radius:var(--radius-plan); padding:38px 34px;
  overflow:hidden; background:linear-gradient(158deg, #fff 0%, #FAFBFC 100%); transition:border-color .35s; }
.cb-plan-card::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(29,29,27,.20) 1.2px, transparent 1.2px); background-size:19px 19px;
  -webkit-mask-image:radial-gradient(72% 64% at 100% 0%, #000, transparent 76%);
          mask-image:radial-gradient(72% 64% at 100% 0%, #000, transparent 76%); }
.cb-plan-card > * { position:relative; z-index:1; }
.cb-plan-card.plan-pro { border-color:rgba(var(--color-accent-rgb),.5);
  background:linear-gradient(158deg, rgba(var(--color-accent-rgb),.11) 0%, rgba(var(--color-accent-rgb),.03) 44%, #fff 100%); }
.cb-plan-card.plan-pro::before { background-image:radial-gradient(rgba(var(--color-accent-rgb),.52) 1.2px, transparent 1.2px); }
.cb-plan-card__name { font-family:var(--font-head); font-weight:700; font-size:var(--text-base); color:var(--color-ink); }
.cb-plan-card__claim { font-family:var(--font-head); font-weight:700; font-size:var(--text-3xl); line-height:1.04;
  letter-spacing:var(--ls-tight); margin-top:10px; color:var(--color-ink); }
.cb-plan-card.plan-pro .cb-plan-card__claim { color:var(--color-accent-dark); }
.cb-plan-card__desc { color:var(--color-ink); margin-top:16px; }
.cb-plan-card__cta { width:100%; justify-content:center; margin-top:28px; }
.cb-plan-card__sep { height:1px; background:var(--color-border); margin:30px 0 24px; }
.cb-plan-card.plan-pro .cb-plan-card__sep { background:rgba(var(--color-accent-rgb),.28); }
.cb-plan-card__lead { font-weight:700; color:var(--color-ink); margin-bottom:16px; }
.cb-plan-card__list { display:grid; gap:13px; list-style:none; margin:0; padding:0; }
.cb-plan-card__list li { position:relative; padding-left:30px; color:var(--color-ink); line-height:1.5; }
.cb-plan-card__list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--color-accent); font-weight:700; }
.cb-pakete_hinweis { text-align:center; margin-top:20px; color:var(--color-muted); }
.cb-pakete_hinweis .pakete-link { color:var(--color-accent-dark); font-weight:700; }
.cb-pakete_extra { margin-top:44px; }
.cb-pakete_extra_p { color:var(--color-muted); }
.cb-pakete_chips { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.chip span { color:var(--color-accent); font-weight:800; margin-right:8px; }

/* ---------- SEO-RADAR ---------- */
.cb-radar_grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:760px) { .cb-radar_grid { grid-template-columns:1fr; } }
.cb-radar-card { position:relative; background:var(--color-dark-3); border:1px solid var(--color-dark-line);
  border-radius:var(--radius-lg); padding:32px; overflow:hidden; transition:transform .3s, border-color .3s, box-shadow .3s; }
/* Hover wie Quelle .card: anheben, Eck-Glow einblenden, Schatten + Ico-Glow */
.cb-radar-card::before { content:""; position:absolute; top:-40%; right:-25%; width:55%; height:80%;
  background:radial-gradient(circle, rgba(var(--color-accent-rgb),.2), transparent 70%); opacity:0; transition:.35s; }
.cb-radar-card:hover { border-color:rgba(var(--color-accent-rgb),.55); transform:translateY(-5px);
  box-shadow:0 26px 56px rgba(0,0,0,.45); }
.cb-radar-card:hover::before { opacity:1; }
.cb-radar-card:hover .cb-radar-card__ico { box-shadow:0 12px 30px rgba(var(--color-accent-rgb),.42); }
.cb-radar-card__ico { width:52px; height:52px; border-radius:14px; background:var(--color-accent); color:var(--color-dark);
  display:grid; place-items:center; margin-bottom:18px; animation:rIco 5.6s ease-in-out infinite; position:relative; z-index:1; }
.cb-radar-card__ico svg { width:26px; height:26px; }
.cb-radar-card__title { margin-bottom:9px; position:relative; z-index:1; }
.cb-radar-card__text { color:#fff; position:relative; z-index:1; }
@keyframes rIco { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.cb-radar-card__art { position:absolute; right:-12px; bottom:-16px; width:88px; height:88px; pointer-events:none; opacity:.34;
  z-index:0; transform:scale(1.6); transform-origin:100% 100%; }
.cb-radar-card__art i { position:absolute; display:block; }
.art-ping i { left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%;
  border:1.5px solid var(--color-accent); animation:rPing 3.4s ease-out infinite; }
.art-ping i:nth-child(2){animation-delay:1.13s} .art-ping i:nth-child(3){animation-delay:2.26s}
@keyframes rPing { 0%{transform:scale(.4); opacity:.9} 100%{transform:scale(2.4); opacity:0} }
.art-walk { background:repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 1px, transparent 1px 22px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 22px); }
.art-walk i { width:9px; height:9px; border-radius:50%; background:var(--color-accent); animation:rWalk 8s steps(1) infinite; }
@keyframes rWalk { 0%{transform:translate(14px,14px)} 25%{transform:translate(59px,14px)} 50%{transform:translate(59px,59px)} 75%{transform:translate(14px,59px)} 100%{transform:translate(14px,14px)} }
.art-fill i { left:0; height:8px; border-radius:4px; background:rgba(255,255,255,.18); overflow:hidden; }
.art-fill i:nth-child(1){top:18px; width:100%} .art-fill i:nth-child(2){top:42px; width:76%} .art-fill i:nth-child(3){top:66px; width:54%}
.art-fill i::after { content:""; position:absolute; inset:0; background:var(--color-accent); transform-origin:0 50%;
  transform:scaleX(0); animation:rFill 4.4s ease-in-out infinite; }
.art-fill i:nth-child(2)::after{animation-delay:.5s} .art-fill i:nth-child(3)::after{animation-delay:1s}
@keyframes rFill { 0%,8%{transform:scaleX(0)} 42%,74%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.art-blink i { width:15px; height:15px; border-radius:4px; background:rgba(255,255,255,.18); animation:rBlink 3.2s ease-in-out infinite; }
.art-blink i:nth-child(1){left:16px; top:16px} .art-blink i:nth-child(2){left:56px; top:16px; animation-delay:.4s}
.art-blink i:nth-child(3){left:16px; top:56px; animation-delay:.8s} .art-blink i:nth-child(4){left:56px; top:56px; animation-delay:1.2s}
@keyframes rBlink { 0%,100%{background:rgba(255,255,255,.18)} 50%{background:var(--color-accent)} }
.art-scan { background:repeating-linear-gradient(0deg, rgba(255,255,255,.16) 0 2px, transparent 2px 16px); }
.art-scan i { left:0; width:100%; height:2px; background:var(--color-accent); box-shadow:0 0 12px var(--color-accent); animation:rScan 3.8s ease-in-out infinite; }
@keyframes rScan { 0%,100%{top:2px} 50%{top:84px} }
.art-bars i { bottom:0; width:16px; border-radius:3px 3px 0 0; background:var(--color-accent); transform-origin:50% 100%; animation:rBar 3.8s ease-in-out infinite; }
.art-bars i:nth-child(1){left:8px; height:40px} .art-bars i:nth-child(2){left:34px; height:64px; animation-delay:.3s; opacity:.72}
.art-bars i:nth-child(3){left:60px; height:88px; animation-delay:.6s; opacity:.48}
@keyframes rBar { 0%,100%{transform:scaleY(.48)} 50%{transform:scaleY(1)} }
@media (max-width:620px) { .cb-radar-card__art { display:none; } }


/* ---------- BAFA ---------- */
.cb-bafa_grid { display:grid; grid-template-columns:1.4fr auto; gap:44px; align-items:center; }
@media (max-width:820px) { .cb-bafa_grid { grid-template-columns:1fr; gap:30px; text-align:center; justify-items:center; } }
.cb-bafa_kick { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-size:var(--text-xs); color:var(--color-accent); margin-bottom:14px; }
.cb-bafa_kick::before { content:""; width:26px; height:1px; background:var(--color-accent); }
.cb-bafa_h2 h2, h2.cb-bafa_h2 { font-size:var(--text-3xl); }
.cb-bafa_text { margin-top:12px; }
.accent { color:var(--color-accent); }

/* ---------- RUNDUM-CHECK ---------- */
.cb-check_grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
@media (max-width:1000px) { .cb-check_grid { grid-template-columns:1fr; } }
.cb-check_list ul { list-style:none; display:grid; gap:11px; margin-top:22px; padding:0; }
.cb-check_list li { color:var(--color-ink); display:flex; gap:13px; align-items:flex-start; padding:15px 18px;
  background:#fff; border:1px solid var(--color-border); border-radius:12px; transition:border-color .2s, background .2s; }
.cb-check_list li:hover { border-color:rgba(var(--color-accent-rgb),.6); background:rgba(var(--color-accent-rgb),.05); }
.cb-check_list li > i { flex:0 0 22px; height:22px; border-radius:6px; background:rgba(var(--color-accent-rgb),.16);
  border:1px solid rgba(var(--color-accent-rgb),.5); display:grid; place-items:center; font-style:normal; color:var(--color-accent-dark); font-size:.8rem; }
.cb-check_card { background:#fff; border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:38px; box-shadow:var(--shadow-card); }
.cb-check_card_kick { font-size:var(--text-xs); color:var(--color-accent-dark); font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px; }
.cb-check_card_title { font-size:var(--text-xl); }
.cb-check_card_list ul { list-style:none; margin:24px 0; display:grid; gap:11px; padding:0; }
.cb-check_card_list li { color:var(--color-ink); display:flex; gap:10px; }
.cb-check_card_list li::before { content:"✓"; color:var(--color-accent); font-weight:800; }
.cb-check_fine { color:var(--color-soft); font-size:var(--text-xs); text-align:center; margin-top:14px; }
.cb-check_fine i { color:var(--color-accent); font-style:normal; }
/* JetFormBuilder-Skin */
.cb-check_form .jet-form-builder { display:grid; gap:22px; margin-top:10px; }
/* Feldtext klar VOR der Eingabe: dunkler, größer, mit Abstand — der Platzhalter
   im Feld ist nur noch Beispiel, nicht Ersatz fürs Label. */
.cb-check_form .jet-form-builder__label { font-size:var(--text-sm); font-weight:600;
  color:var(--color-ink); margin-bottom:7px; display:block; }
.cb-check_form .jet-form-builder__required { color:var(--color-accent); }
.cb-check_form input[type="text"], .cb-check_form input[type="email"], .cb-check_form input[type="tel"],
.cb-check_form input[type="date"], .cb-check_form select, .cb-check_form textarea {
  width:100%; font-family:var(--font-body); font-size:var(--text-base); color:var(--color-ink);
  background:#fff; border:1px solid var(--color-border); border-radius:11px; padding:14px 16px;
  transition:border-color .2s, box-shadow .2s; }
.cb-check_form ::placeholder { color:var(--color-soft); }
.cb-check_form input:focus, .cb-check_form select:focus, .cb-check_form textarea:focus {
  outline:0; border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(var(--color-accent-rgb),.15); }
.cb-check_form .checkradio-wrap label { font-size:var(--text-sm); color:var(--color-muted); }
.cb-check_form input[type="checkbox"] { accent-color:var(--color-accent); width:18px; height:18px; }
.cb-check_form .jet-form-builder__submit {
  width:100%; justify-content:center; display:inline-flex; align-items:center; cursor:pointer; border:0;
  font-family:var(--font-head); font-weight:700; font-size:var(--text-base); padding:16px 28px;
  border-radius:var(--radius-btn); background:var(--color-accent); color:var(--color-dark); transition:background .2s; }
.cb-check_form .jet-form-builder__submit:hover { background:var(--color-accent-dark); }
.cb-check_form .field-termin-hidden { display:none; }

/* Multistep: Fortschrittsleiste (Kreise + Labels) und Blätter-Buttons */
.cb-check_form .jet-form-builder-progress-pages { display:flex; align-items:flex-start; margin-bottom:12px; }
.cb-check_form .jet-form-builder-progress-pages__item--wrapper { display:flex; align-items:flex-start; }
.cb-check_form .jet-form-builder-progress-pages__item--wrapper:not(:last-child) { flex:1; }
.cb-check_form .jet-form-builder-progress-pages__item { display:grid; justify-items:center; gap:6px; text-align:center; }
.cb-check_form .jet-form-builder-progress-pages__item--circle { width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:var(--text-sm);
  background:#fff; border:2px solid var(--color-border); color:var(--color-muted);
  transition:background .3s, border-color .3s, color .3s; }
.cb-check_form .jet-form-builder-progress-pages__item--label { font-size:var(--text-xs); color:var(--color-muted); }
.cb-check_form .active-page .jet-form-builder-progress-pages__item--circle,
.cb-check_form .passed-page .jet-form-builder-progress-pages__item--circle {
  border-color:var(--color-accent); background:var(--color-accent); color:var(--color-dark); }
.cb-check_form .active-page .jet-form-builder-progress-pages__item--label { color:var(--color-ink); font-weight:600; }
/* JFBs grünen Default-Ring um den aktiven Kreis überschreiben */
.cb-check_form .jet-form-builder-progress-pages__item--wrapper.active-page .jet-form-builder-progress-pages__item--circle,
.cb-check_form .jet-form-builder-progress-pages__item--wrapper.passed-page .jet-form-builder-progress-pages__item--circle {
  border-color:var(--color-accent); background:var(--color-accent); color:var(--color-dark);
  box-shadow:0 0 0 4px rgba(var(--color-accent-rgb),.22); outline:none; }
/* JFB-Fremdfarben raus (Grün #34D7A1 aktiv, Blau #617BE5 passed): die Overrides
   spiegeln JFBs eigene Selektoren 1:1 und hängen unseren Scope davor, damit die
   Spezifität IMMER gewinnt — schwächere Selektoren verlieren je nach Ladereihenfolge. */
.cb-check_form .jet-form-builder-progress-pages__item--wrapper .jet-form-builder-progress-pages__separator {
  flex:1; height:2px; margin:16px 10px 0; background:var(--color-border); border-radius:2px; }
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.active-page,
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.passed-page { color:var(--color-ink); }
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.active-page .jet-form-builder-progress-pages__item--circle,
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.passed-page .jet-form-builder-progress-pages__item--circle {
  border:2px solid var(--color-accent); }
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.active-page .jet-form-builder-progress-pages__item + .jet-form-builder-progress-pages__separator {
  background-color:var(--color-border); height:2px; }
.cb-check_form .jfb-progress-type--default .jet-form-builder-progress-pages__item--wrapper.passed-page .jet-form-builder-progress-pages__item + .jet-form-builder-progress-pages__separator {
  background-color:var(--color-accent); height:2px; }
.cb-check_form .jet-form-builder-progress-pages { flex-wrap:nowrap; }
@media (max-width:600px) { .cb-check_form .jet-form-builder-progress-pages__item--label { display:none; } }
/* Checkboxen: JFB malt das Häkchen-Feld blau (#0b76ef) — auf Accent umfärben */
.cb-check_form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :checked + span::before {
  border-color:var(--color-accent); background-color:var(--color-accent); }
.cb-check_form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :focus:not(:checked) + span::before {
  border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(var(--color-accent-rgb),.15); }
.cb-check_form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :not(:disabled):active + span::before {
  border-color:var(--color-accent); background-color:rgba(var(--color-accent-rgb),.25); }
.cb-check_form .field-type-checkbox-field .jet-form-builder__field-label.for-checkbox :not(:disabled):not(:checked):hover + span::before {
  border-color:rgba(var(--color-accent-rgb),.6); }
.cb-check_form .jet-form-builder-page { display:grid; gap:22px; }
/* JFB versteckt inaktive Seiten nur per --hidden-Klasse (0-1-0) — die Grid-Regel
   darüber würde sie sonst wieder einblenden (alle Schritte gestapelt). */
.cb-check_form .jet-form-builder-page--hidden { display:none; }
.cb-check_form .jet-form-builder-page__btns-wrapper { display:flex; gap:12px; margin-top:10px; }
.cb-check_form .jet-form-builder__next-page, .cb-check_form .jet-form-builder__prev-page {
  cursor:pointer; font-family:var(--font-head); font-weight:700; font-size:var(--text-sm);
  padding:12px 26px; border-radius:var(--radius-btn); transition:background .2s, color .2s, box-shadow .2s; }
.cb-check_form .jet-form-builder__next-page { border:0; background:var(--color-accent); color:var(--color-dark); margin-left:auto; }
.cb-check_form .jet-form-builder__next-page:hover { background:var(--color-accent-dark); }
.cb-check_form .jet-form-builder__prev-page { background:transparent; border:0; color:var(--color-muted);
  box-shadow:inset 0 0 0 1.5px var(--color-border); }
.cb-check_form .jet-form-builder__prev-page:hover { color:var(--color-accent-dark);
  box-shadow:inset 0 0 0 1.5px var(--color-accent); }

/* ---------- PROZESS: Timeline ---------- */
.cb-tl_wrap { position:relative; max-width:900px; margin-inline:auto; padding-left:110px; }
.cb-tl_wrap .tl-line { position:absolute; left:39px; top:18px; bottom:22px; width:2px; background:var(--color-dark-line); border-radius:2px; }
.cb-tl_wrap .tl-line i { position:absolute; left:0; top:0; width:100%; height:0; background:var(--color-accent); border-radius:2px;
  box-shadow:0 0 14px rgba(var(--color-accent-rgb),.55); }
.cb-tl-step { position:relative; padding-bottom:58px; display:grid; grid-template-columns:1fr 158px; gap:44px; align-items:center; }
.cb-el:last-child > .cb-tl-step { padding-bottom:0; }
.cb-tl-step__node { position:absolute; left:-110px; top:-4px; width:66px; height:66px; border-radius:50%;
  background:var(--color-dark-3); border:2px solid var(--color-dark-line); display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:var(--text-lg); color:rgba(255,255,255,.32);
  transition:border-color .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.3,.8,.3,1); }
.cb-el.an .cb-tl-step__node { border-color:var(--color-accent); color:var(--color-accent); transform:scale(1.06);
  box-shadow:0 0 0 10px rgba(var(--color-accent-rgb),.09); }
.cb-tl-step__title { font-size:var(--text-xl); margin-bottom:10px; }
.cb-tl-step__text { max-width:64ch; }
.cb-tl-step__art { position:relative; width:158px; height:132px; opacity:.28; transition:opacity .5s ease; display:block; }
.cb-el.an .cb-tl-step__art { opacity:1; }
.cb-tl-step__art i { position:absolute; display:block; animation-play-state:paused; }
.cb-el.an .cb-tl-step__art i { animation-play-state:running; }
.art-check i { left:0; height:12px; border-radius:6px; background:rgba(255,255,255,.16); overflow:hidden; }
.art-check i:nth-child(1){top:22px; width:100%} .art-check i:nth-child(2){top:58px; width:76%} .art-check i:nth-child(3){top:94px; width:54%}
.art-check i::after { content:""; position:absolute; inset:0; background:var(--color-accent); transform-origin:0 50%;
  transform:scaleX(0); animation:taFill 4.4s ease-in-out infinite; }
.art-check i:nth-child(2)::after{animation-delay:.55s} .art-check i:nth-child(3)::after{animation-delay:1.1s}
@keyframes taFill { 0%,6%{transform:scaleX(0)} 42%,76%{transform:scaleX(1)} 100%{transform:scaleX(0)} }
.art-build i { left:50%; width:104px; margin-left:-52px; height:32px; border-radius:7px; background:var(--color-accent); animation:taRise 4s ease-in-out infinite; }
.art-build i:nth-child(1){bottom:6px} .art-build i:nth-child(2){bottom:44px; opacity:.72; animation-delay:.45s}
.art-build i:nth-child(3){bottom:82px; opacity:.46; animation-delay:.9s}
@keyframes taRise { 0%,100%{transform:translateY(14px); opacity:0} 22%,72%{transform:translateY(0); opacity:1} }
.art-live i { left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  border:2px solid var(--color-accent); animation:taPing 3.2s ease-out infinite; }
.art-live i:nth-child(2){animation-delay:1.07s} .art-live i:nth-child(3){animation-delay:2.14s}
@keyframes taPing { 0%{transform:scale(.5); opacity:1} 100%{transform:scale(3.2); opacity:0} }
@media (max-width:900px) { .cb-tl-step { grid-template-columns:1fr; gap:0; } .cb-tl-step__art { display:none; } }
@media (max-width:700px) {
  .cb-tl_wrap { padding-left:66px; }
  .cb-tl_wrap .tl-line { left:23px; }
  .cb-tl-step__node { left:-66px; width:48px; height:48px; font-size:var(--text-base); top:-2px; }
  .cb-tl-step { padding-bottom:42px; }
}

/* ---------- FAQ ---------- */
.cb-faq_loop { max-width:900px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--color-border); }
.faq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center;
  font-family:var(--font-head); font-weight:700; font-size:var(--text-md); color:var(--color-ink); padding:24px 0; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .pm { flex:0 0 38px; height:38px; display:grid; place-items:center; color:var(--color-accent);
  font-size:2.3rem; font-weight:400; line-height:1; transition:transform .3s ease, opacity .3s; }
.faq-item[open] .pm { transform:rotate(45deg); }
.faq-item summary:hover .pm { opacity:.7; }
.faq-item-a p { padding-bottom:24px; color:var(--color-ink); }

/* ---------- FINAL ---------- */
.cb-final_root { text-align:center; }
.cb-final_root::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%, rgba(var(--color-accent-rgb),.16), transparent 62%); }
.cb-final_inner > * { position:relative; }
.cb-final_lead { margin:18px auto 0; max-width:60ch; font-size:var(--text-md); }
.cb-final_cta_row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:38px; }
.cb-final_legal { font-size:var(--text-xs); color:rgba(255,255,255,.38); max-width:840px; margin:34px auto 0; line-height:1.5; }

/* ---------- Reveal-on-Scroll ---------- */
.rv { opacity:0; transform:translateY(30px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rv.in { opacity:1; transform:none; }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv { opacity:1; transform:none; }
}

/* JFB-Felder: Standardbreiten sprengen sonst den Container (Leck-Fix, QA 14.08.) */
.cb-check_form .jet-form-builder,
.cb-check_form .jet-form-builder-row,
.cb-check_form .jet-form-builder__field-wrap { max-width: 100%; min-width: 0; }
.cb-check_form .jet-form-builder__field { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.cb-check_form .jet-form-builder-row { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
/* Grid-Blowout-Schutz: min-content darf 1fr-Tracks nie aufspannen (QA 15.08.) */
.cb-hero_grid { grid-template-columns: minmax(0, 1.36fr) minmax(0, 0.84fr); }
@media (max-width: 1000px) { .cb-hero_grid { grid-template-columns: minmax(0, 1fr); } }
.cb-check_grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .cb-check_grid { grid-template-columns: minmax(0, 1fr); } }
.cb-hero_grid > *, .cb-check_grid > * { min-width: 0; }
.cb-hero_chat { max-width: min(580px, 100%); }
/* H1 nie mit Trennstrich brechen — im Mockup verhindert das der Wort-Split des
   Reveal-Effekts; die Mobil-Typoskala (<620px) hält das längste Wort im Viewport. */
h1 { hyphens: manual; -webkit-hyphens: manual; }

/* Klickbare Referenz-Karten: Stretched Link über der ganzen Karte, Linktext
   nur für Screenreader. Der Klick öffnet das Projekt-Popup (site.js fängt ihn ab);
   der echte href bleibt als Fallback ohne JS. Entwürfe ohne projekt_url bleiben
   unklickbar. */
.pcard { position: relative; cursor: pointer; }
.pcard-link { position: absolute; inset: 0; z-index: 3; overflow: hidden;
  text-indent: 200%; white-space: nowrap; color: transparent;
  border: 0; padding: 0; background: transparent; cursor: pointer; }
.pcard-link[href=""] { display: none; } /* ohne JS: Entwürfe ohne Ziel bleiben stumm */

/* Projekt-Popup: dunkle Glas-Lightbox mit großem Screenshot (scrollbar) und
   Live-Link. Ein Dialog für alle Karten, site.js befüllt ihn pro Klick. */
.pmodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: clamp(14px, 4vw, 48px); }
.pmodal[hidden] { display: none; }
.pmodal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pmodal-dialog { position: relative; width: min(860px, 100%); max-height: 100%;
  display: flex; flex-direction: column; background: var(--color-dark-2);
  border: 1px solid var(--color-dark-line); border-radius: 18px; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0,0,0,.65);
  animation: pmodal-rein .34s cubic-bezier(.3,.7,.3,1) both; }
@keyframes pmodal-rein { from { opacity: 0; transform: translateY(22px) scale(.97); } }
/* Browser-Kopfleiste wie auf den Karten — gleiche Metapher, größer */
.pmodal-dialog::before { content: ""; flex: none; height: 38px;
  border-bottom: 1px solid var(--color-dark-line); background:
    radial-gradient(circle 5.5px at 19px 19px, #ff5f57 99%, transparent),
    radial-gradient(circle 5.5px at 37px 19px, #febc2e 99%, transparent),
    radial-gradient(circle 5.5px at 55px 19px, #28c840 99%, transparent),
    var(--color-dark-3); }
.pmodal-close { position: absolute; top: 7px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff; font-size: 15px; line-height: 1;
  display: grid; place-items: center; transition: background .25s; }
.pmodal-close:hover { background: rgba(255,255,255,.22); }
/* Bühne: eine 3D-Fläche mit Vorder- und Rückseite. Blättern dreht die Fläche um;
   lange Screenshots scrollen innerhalb ihrer Seite. */
.pmodal-shots { position: relative; flex: none; aspect-ratio: 16/10; max-height: 58vh;
  perspective: 1700px;
  background: linear-gradient(150deg, hsl(214deg 30% 16%), hsl(255deg 28% 10%)); }
.pmodal-flip { position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.35,.7,.3,1); }
.pmodal-face { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--color-dark-3); cursor: pointer; }
.pmodal-face.hinten { transform: rotateY(180deg); }
.pmodal-face img { display: block; width: 100%; height: auto; }
.pmodal-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-dark-line);
  background: rgba(10,14,22,.72); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background .25s, border-color .25s; }
.pmodal-nav:hover { background: rgba(var(--color-accent-rgb),.28); border-color: rgba(var(--color-accent-rgb),.6); }
.pmodal-nav.prev { left: 12px; }
.pmodal-nav.next { right: 12px; }
.pmodal-count { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: .72rem; letter-spacing: .14em; color: rgba(255,255,255,.78);
  background: rgba(10,14,22,.72); border: 1px solid var(--color-dark-line);
  border-radius: 999px; padding: 4px 12px; }
/* Projekte ohne Screenshot (Entwürfe in Arbeit): der Verlauf bleibt, ein Label sagt warum */
.pmodal-face:empty::after { content: "Screenshot folgt"; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.45); }
@media (prefers-reduced-motion: reduce) { .pmodal-flip { transition: none; } }
.pmodal-meta { flex: none; display: flex; align-items: center; gap: 16px;
  justify-content: space-between; flex-wrap: wrap;
  padding: 16px 20px; border-top: 1px solid var(--color-dark-line); }
.pmodal-title { font-family: var(--font-head); font-size: var(--text-lg); color: #fff; }
.pmodal-sub { font-size: var(--text-xs); color: rgba(255,255,255,.62); margin-top: 2px; }
.pmodal-cta { display: inline-flex; align-items: center; gap: .45em;
  padding: .72em 1.35em; border-radius: 999px; text-decoration: none;
  font-weight: 600; font-size: var(--text-sm); color: #0b0e17;
  background: var(--color-accent); transition: filter .25s, transform .25s; }
.pmodal-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pmodal-cta::after { content: "↗"; }
.pmodal-cta[hidden] { display: none; } /* Entwürfe: Popup ohne Live-Link */

/* Rundum-Check-Popup: nur das Formular als weißer Dialog; Kick/Titel/Liste bleiben
   in der Sektion, dort öffnet der Start-Button das Popup (ohne JS bleibt das
   Formular ganz normal in der Karte stehen). */
.cmodal { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: clamp(14px, 4vw, 48px); }
.cmodal[hidden] { display: none; }
.cmodal-backdrop { position: absolute; inset: 0; background: rgba(5,8,16,.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cmodal-dialog { position: relative; width: min(640px, 100%); max-height: 100%;
  overflow-y: auto; overscroll-behavior: contain; border-radius: var(--radius-lg);
  background: #fff; padding: 42px 46px 46px;
  box-shadow: 0 40px 90px rgba(0,0,0,.65);
  animation: pmodal-rein .34s cubic-bezier(.3,.7,.3,1) both; }
@media (max-width: 620px) { .cmodal-dialog { padding: 30px 24px 32px; } }
.cmodal-kick { font-size: var(--text-xs); color: var(--color-accent-dark); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.cmodal-titel { font-family: var(--font-head); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-ink); margin-bottom: 24px; }
.cmodal-close { position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(13,17,23,.08); color: var(--color-ink); font-size: 17px; line-height: 1;
  display: grid; place-items: center; transition: background .25s; }
.cmodal-close:hover { background: rgba(13,17,23,.18); }
/* Start-Button in der Karte an der Stelle des Formulars */
.check-start { width: 100%; justify-content: center; display: inline-flex; align-items: center;
  cursor: pointer; border: 0; margin-top: 8px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-base);
  padding: 16px 28px; border-radius: var(--radius-btn);
  background: var(--color-accent); color: var(--color-dark); transition: background .2s; }
.check-start:hover { background: var(--color-accent-dark); }
body.pmodal-offen { overflow: hidden; }