/*
  GEMEINSAMES LAYOUT DER UNTERSEITEN
  (website-fuer-handwerker, seo-fuer-handwerker, buero-assistent, ueber-auvance, referenz-on-se, referenz-installateur-zeus)

  Farben, Schriften, Navigation, Knöpfe, Karten und Fuß sind aus dem CSS der Startseite (index.html) übernommen,
  damit die Unterseiten wie dieselbe Website aussehen. Die Startseite behält ihr eigenes CSS im Kopf.
  Ändert sich dort etwas Grundsätzliches (Farben, Navigation, Fuß), hier mitziehen.

  Abstände hängen hier an der Breite (vw), nicht an der Höhe (vh), damit die Seiten in jeder Fensterhöhe gleich aussehen.
  Bewegung: nur transform und opacity, ohne Bewegung bei prefers-reduced-motion (ganz unten).
  Ohne JavaScript bleibt alles sichtbar: die Reveal-Klassen greifen nur unter html.js.
*/
:root{
  --paper:#ffffff;--paper-2:#f4f9ff;--paper-3:#eef3fb;
  --ink:#041127;--ink-2:#030c1b;--ink-soft:#2f394c;
  --muted:#6d7582;--faint:#9aa3b2;--line:#e3e9f2;--line-2:#d7e0ee;
  --accent:#1b74f3;--accent-2:#7e37f8;--accent-press:#0d5fd6;
  --grad-blue:linear-gradient(103deg,#0968f6,#4848ff);
  --grad-soft:linear-gradient(160deg,#eaf1ff 0%,#f4f9ff 55%,#f6f1ff 100%);
  --grad-card:linear-gradient(180deg,#eef4ff 0%,#ffffff 70%);
  --grad-lav:linear-gradient(165deg,#f4f0ff 0%,#eaf2ff 100%);
  --grad-visual:linear-gradient(262deg,#f4f9ff 3%,#e9f3ff 14%,#e8e9ff 48%,#e7e1ff 91%,#f4f1ff 100%);
  --grad-indigo:linear-gradient(140deg,#4630c8 0%,#5a3bf2 46%,#3158ef 100%);
  --maxw:1180px;--r:22px;--r-lg:28px;--ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 24px 60px -32px rgba(13,40,90,.30);
  --shadow-float:0 24px 50px -24px rgba(13,40,90,.35);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:'Geist','Inter',sans-serif;font-weight:600;letter-spacing:-0.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.25rem,5.2vw,3.85rem);letter-spacing:-0.042em;line-height:1.04}
h2{font-size:clamp(1.8rem,3.8vw,2.85rem)}
h3{font-size:1.3rem;line-height:1.2}
p{color:var(--muted);text-wrap:pretty}
a{color:inherit;text-decoration:none}
[id]{scroll-margin-top:96px}
.eyebrow{font-family:'Inter';font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(27,116,243,.14)}
.note{font-family:'Handlee',cursive;color:var(--accent);letter-spacing:0}
.inl{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:rgba(27,116,243,.3);text-underline-offset:3px;transition:text-decoration-color .18s}
.inl:hover{text-decoration-color:var(--accent)}
.nb{white-space:nowrap}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid rgba(27,116,243,.45);outline-offset:3px;border-radius:8px}

#progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--grad-blue);z-index:70;transform:scaleX(0);transform-origin:left}

/* ---- Knöpfe (wie Startseite) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:'Inter';font-weight:600;font-size:.98rem;padding:13px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .18s var(--ease),box-shadow .18s,background .18s,border-color .18s,color .18s}
.btn:focus-visible{outline:3px solid rgba(27,116,243,.4);outline-offset:2px;border-radius:999px}
.btn-primary{background:var(--grad-blue);color:#fff;box-shadow:0 12px 26px -12px rgba(27,116,243,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(27,116,243,.7)}
.btn-ghost{background:#fff;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn-dark{background:var(--ink-soft);color:#fff;box-shadow:0 10px 22px -12px rgba(4,17,39,.55)}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-invert{background:#fff;color:var(--ink);box-shadow:0 14px 30px -14px rgba(2,6,18,.65)}
.btn-invert:hover{transform:translateY(-2px);box-shadow:0 20px 38px -14px rgba(2,6,18,.7)}
.lnk-light{color:#fff;font-weight:600;font-size:.98rem;display:inline-flex;align-items:center;gap:.45em;padding:13px 6px;opacity:.9;transition:opacity .18s,transform .18s var(--ease)}
.lnk-light:hover{opacity:1;transform:translateY(-2px)}
.ref-link{display:inline-flex;margin-top:18px;font-weight:600;color:var(--accent);font-size:.95rem;transition:transform .18s var(--ease)}
.ref-link:hover{transform:translateX(3px)}

/* ---- schwebende Navigation (wie Startseite), dazu ein Menü für schmale Bildschirme ---- */
header{position:fixed;top:14px;left:0;right:0;z-index:60;pointer-events:none}
.nav{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:18px;height:62px;max-width:1080px;margin:0 auto;padding:0 10px 0 24px;background:#fff;border:1px solid rgba(227,233,242,.9);border-radius:999px;box-shadow:0 18px 44px -24px rgba(13,40,90,.35)}
.brand{font-family:'Geist',sans-serif;font-weight:600;font-size:1.4rem;letter-spacing:-0.03em;color:var(--ink);display:inline-flex;align-items:center;gap:.5em}
.brand .mark{display:block;flex:none;filter:drop-shadow(0 6px 14px rgba(27,116,243,.34));transition:transform .25s var(--ease)}
.brand:hover .mark{transform:translateY(-2px) rotate(-4deg)}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a.lnk{font-size:.93rem;font-weight:500;color:var(--muted);transition:color .18s}
.navlinks a.lnk:hover,.navlinks a.lnk[aria-current]{color:var(--ink)}
.nav .btn-dark{padding:11px 22px;font-size:.92rem}
.mnav{display:none}
.mnav summary{list-style:none;cursor:pointer;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:border-color .18s,color .18s}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary:hover,.mnav[open] summary{border-color:var(--accent);color:var(--accent)}
.mnav summary:focus-visible{border-radius:50%}
.mnav .x{display:none}.mnav[open] .x{display:block}.mnav[open] .b{display:none}
.mnav-panel{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 70px -28px rgba(13,40,90,.5);padding:10px;display:flex;flex-direction:column;animation:menuIn .28s var(--ease) both}
.mnav-panel a{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-radius:14px;font-weight:500;font-size:1rem;color:var(--ink)}
.mnav-panel a:hover,.mnav-panel a[aria-current]{background:var(--paper-2);color:var(--accent-press)}
.mnav-panel hr{border:0;border-top:1px solid var(--line);margin:6px 12px}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(max-width:1120px){.nav{margin:0 16px}}
@media(max-width:980px){.navlinks{gap:8px}.navlinks a.lnk{display:none}.mnav{display:block}.nav{height:58px;padding-left:18px;padding-right:8px}}
@media(max-width:400px){.brand{font-size:1.2rem}.nav .btn-dark{padding:10px 15px;font-size:.86rem}.nav{margin:0 12px;padding-left:14px}.mnav summary{width:40px;height:40px}}

/* ---- Kopf der Unterseite: heller Verlauf, Text links, Bild rechts ---- */
.phero{position:relative;overflow:hidden;background:var(--grad-soft);padding:clamp(122px,13vw,170px) 0 clamp(64px,7vw,104px)}
.phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none;z-index:1}
.orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5}
.orb.o1{width:520px;height:520px;left:-170px;top:-140px;background:radial-gradient(circle at 35% 35%,rgba(123,150,255,.8),transparent 70%)}
.orb.o2{width:460px;height:460px;right:-130px;top:30px;background:radial-gradient(circle at 60% 40%,rgba(168,130,255,.7),transparent 70%)}
.phero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,76px);align-items:center}
.crumb{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:.86rem;font-weight:500;color:var(--muted);margin-bottom:24px}
.crumb li{display:inline-flex;align-items:center;gap:9px}
.crumb li+li::before{content:"";width:6px;height:10px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' fill='none'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.crumb a{transition:color .18s}.crumb a:hover{color:var(--accent)}
.crumb [aria-current]{color:var(--ink-soft)}
.phero h1{margin-top:18px;max-width:18ch}
.phero h1 em{font-style:normal;color:var(--accent)}
.phero h1.long{font-size:clamp(2.05rem,4.5vw,3.3rem);max-width:21ch}
.phero .sub{font-size:clamp(1.05rem,1.55vw,1.2rem);line-height:1.6;max-width:54ch;margin-top:22px;color:var(--ink-soft)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.microcta{display:inline-flex;align-items:center;gap:.5em;margin-top:16px;font-size:1.1rem}
.microcta::before{content:"";flex:none;width:26px;height:14px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' fill='none'%3E%3Cpath d='M1 11C7 4 13 2 24 3' stroke='%231b74f3' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M19 1l5 2-3 4' stroke='%231b74f3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.phero-visual{position:relative;min-width:0}
@media(max-width:900px){.phero-grid{grid-template-columns:1fr;gap:64px}.phero h1{max-width:20ch}}

/* Kopf mittig (Referenz Zeus): Text oben, großes Bild darunter */
.phero.center .phero-copy{max-width:900px;margin:0 auto;text-align:center}
.phero.center .crumb,.phero.center .hero-cta{justify-content:center}
.phero.center h1{max-width:20ch;margin-left:auto;margin-right:auto}
.phero.center .sub{margin-left:auto;margin-right:auto;max-width:60ch}

/* Kopf dunkel (Büro-Assistent): dasselbe Indigo wie die Assistenten-Karte der Startseite */
.phero.dark{background:var(--grad-indigo);border-radius:0 0 40px 40px;padding-bottom:clamp(64px,7vw,96px)}
.phero.dark::after{display:none}
.stars{position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.7),transparent 100%),
  radial-gradient(1px 1px at 28% 64%,rgba(255,255,255,.5),transparent 100%),
  radial-gradient(1.5px 1.5px at 44% 12%,rgba(255,255,255,.6),transparent 100%),
  radial-gradient(1px 1px at 58% 48%,rgba(255,255,255,.45),transparent 100%),
  radial-gradient(1.5px 1.5px at 72% 18%,rgba(255,255,255,.65),transparent 100%),
  radial-gradient(1px 1px at 84% 58%,rgba(255,255,255,.5),transparent 100%),
  radial-gradient(1px 1px at 18% 84%,rgba(255,255,255,.4),transparent 100%),
  radial-gradient(1.5px 1.5px at 64% 86%,rgba(255,255,255,.5),transparent 100%),
  radial-gradient(1px 1px at 92% 32%,rgba(255,255,255,.55),transparent 100%),
  radial-gradient(1px 1px at 38% 38%,rgba(255,255,255,.4),transparent 100%),
  radial-gradient(520px 520px at -6% 110%,rgba(255,255,255,.10),transparent 60%),
  radial-gradient(520px 520px at 106% 110%,rgba(255,255,255,.10),transparent 60%)}
.phero.dark h1{color:#fff}
.phero.dark h1 em{color:#cbd6ff}
.phero.dark .sub{color:rgba(255,255,255,.84)}
.phero.dark .crumb,.phero.dark .crumb [aria-current]{color:rgba(255,255,255,.72)}
.phero.dark .crumb a:hover{color:#fff}
.phero.dark .crumb li+li::before{opacity:.9;filter:brightness(2)}
.pill{display:inline-flex;align-items:center;gap:.6em;font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:8px 16px}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#9db4ff;box-shadow:0 0 0 4px rgba(157,180,255,.25)}
.phero.dark .fine{margin-top:18px;font-size:.95rem;color:rgba(255,255,255,.76)}
.phero.dark .hero-cta{align-items:center;gap:6px 18px}
@media(max-width:560px){.phero.dark{border-radius:0 0 28px 28px}.pill{font-size:.7rem;letter-spacing:.08em;padding:7px 13px}}

/* ---- Abschnitte ---- */
section{padding:clamp(68px,8vw,118px) 0}
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tight-top{padding-top:clamp(28px,3vw,44px)}
.lead{max-width:62ch}
.lead .eyebrow{margin-bottom:18px}
.lead h2{margin-bottom:.42em}
.lead p{font-size:1.1rem;color:var(--ink-soft)}
.lead.center{margin:0 auto;text-align:center}
.lead.center .eyebrow{justify-content:center}
.lead.center p{margin-left:auto;margin-right:auto;max-width:58ch}
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5.5vw,84px);align-items:start}
.split>.lead{position:sticky;top:112px}
.split.rev{grid-template-columns:1.18fr .82fr}
.prose p{color:var(--ink-soft);font-size:1.07rem;line-height:1.68;max-width:64ch}
.prose p+p{margin-top:1.05em}
.prose h3{margin:1.8em 0 .45em}
.prose>h3:first-child{margin-top:0}
@media(max-width:880px){.split,.split.rev{grid-template-columns:1fr;gap:30px}.split>.lead{position:static}}

/* Häkchen-Listen */
.checks{list-style:none;display:flex;flex-direction:column;gap:12px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:.97rem;color:var(--ink-soft);font-weight:500;line-height:1.45}
.checks li::before{content:"";width:20px;height:20px;border-radius:50%;flex:none;margin-top:1px;background:var(--check) center/11px no-repeat,var(--grad-blue);box-shadow:0 4px 10px -4px rgba(27,116,243,.7)}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;box-shadow:0 8px 18px -12px rgba(13,40,90,.35);white-space:nowrap}
.tag::before{content:"";width:14px;height:14px;border-radius:50%;background-image:var(--check),linear-gradient(135deg,#22c55e,#15a34a);background-repeat:no-repeat;background-position:center;background-size:9px,cover}

/* ---- Maskottchen: kleine Auftritte am Rand von Bildern und Karten (wie Startseite) ---- */
.peek{position:absolute;width:112px;height:auto;z-index:4;filter:drop-shadow(0 0 16px rgba(255,255,255,.92)) drop-shadow(0 0 8px rgba(244,247,255,.85)) drop-shadow(0 13px 18px rgba(126,55,248,.22));animation:floatY 5s ease-in-out infinite;pointer-events:none}
.peek.d-2{animation-delay:1.2s}.peek.d-3{animation-delay:1.8s}
.peek-note{position:absolute;z-index:4;font-family:'Handlee',cursive;color:var(--accent-2);font-size:1.02rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:7px 14px;box-shadow:0 14px 30px -18px rgba(126,55,248,.5);white-space:nowrap}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:560px){.peek{width:88px}.peek-note{font-size:.92rem;padding:6px 11px}}

/* ---- Browser-Rahmen, schwebende Karten ---- */
.shot{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 50px 110px -42px rgba(13,40,90,.5);overflow:hidden;text-align:left}
.chrome{display:flex;align-items:center;gap:7px;padding:10px 16px;border-bottom:1px solid var(--line);background:#fafcff}
.chrome i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.chrome .url{margin:0 auto;background:var(--paper-3);border-radius:999px;font-size:.72rem;font-style:normal;color:var(--muted);padding:4px 16px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78%}
.fc{position:absolute;z-index:4;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-float);padding:14px 16px;text-align:left;pointer-events:none}
.fc .fc-h{display:flex;align-items:center;gap:9px;font-size:.8rem;font-weight:600;color:var(--ink)}
.fc .ic{width:26px;height:26px;border-radius:9px;background:var(--grad-blue);flex:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -6px rgba(27,116,243,.7)}
.fc small{display:block;font-size:.7rem;font-weight:400;color:var(--muted);margin-top:2px}
.stars-row{display:flex;gap:3px;margin-bottom:5px}
.stars-row svg{display:block}
.ref-shot{display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 44px 90px -48px rgba(13,40,90,.55);transition:transform .35s var(--ease),box-shadow .35s}
a.ref-shot:hover{transform:translateY(-6px);box-shadow:0 54px 100px -46px rgba(13,40,90,.6)}
.ref-shot img{display:block;width:100%;height:auto}

/* Website-Seite: dieselbe Muster-Website am Rechner und am Handy */
.duo{padding:0 0 46px}
.duo .shot{width:88%}
.site{padding:16px 20px 22px;background:linear-gradient(180deg,#fdfeff,#f7faff)}
.site-top{display:flex;align-items:center;gap:10px;padding-bottom:13px;border-bottom:1px solid var(--paper-3)}
.site-logo{width:24px;height:24px;border-radius:8px;background:var(--grad-blue);flex:none;display:flex;align-items:center;justify-content:center}
.site-logo svg{display:block}
.site-name{font-family:'Geist';font-weight:600;font-size:.84rem;letter-spacing:-.01em;white-space:nowrap}
.site-chip{font-size:.67rem;font-weight:600;color:#fff;background:var(--grad-blue);border-radius:999px;padding:6px 12px;white-space:nowrap}
.site-top .site-chip{margin-left:auto}
.site-ghost{font-size:.67rem;font-weight:600;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;background:#fff;white-space:nowrap}
.site-h{font-family:'Geist';font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.03em;line-height:1.12;color:var(--ink);margin-top:18px}
.site-sub{margin-top:8px;font-size:.78rem;line-height:1.5;color:var(--muted);max-width:30ch}
.site-ctas{display:flex;gap:9px;margin-top:14px}
.site-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;max-width:64%}
.site-badges span{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:500;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap}
.site-badges .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.handy{position:absolute;right:0;bottom:0;width:36%;min-width:150px;padding:6px;border-radius:26px;background:#fff;box-shadow:0 40px 80px -30px rgba(13,40,90,.6),0 0 0 1px var(--line)}
.handy-in{border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#fdfeff,#f3f7ff);padding:12px 12px 14px}
.handy-top{display:flex;align-items:center;gap:7px;padding-bottom:9px;border-bottom:1px solid var(--paper-3)}
.handy-top .site-logo{width:18px;height:18px;border-radius:6px}
.handy-top .site-name{font-size:.66rem}
.handy .site-h{font-size:.92rem;margin-top:12px}
.handy .site-chip{display:inline-block;margin-top:10px;font-size:.6rem;padding:5px 10px}
.handy-pic{position:relative;height:74px;margin-top:12px;border-radius:12px;background:var(--grad-visual);overflow:hidden}
.handy-pic::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(94,82,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(94,82,255,.10) 1px,transparent 1px);background-size:16px 16px}
.handy-pic svg{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);filter:drop-shadow(0 8px 12px rgba(70,48,200,.28))}
.handy-bars{margin-top:10px}
.handy-bars i{display:block;height:6px;border-radius:4px;background:var(--paper-3);margin-top:6px}
.handy-bars i:nth-child(1){width:86%}.handy-bars i:nth-child(2){width:62%}
.duo .peek{width:122px;top:-58px;left:-26px}
.duo .fc-note{right:-18px;top:-30px;width:220px;transform:rotate(3deg)}
@media(max-width:1240px){.duo .fc-note{right:0}}
@media(max-width:900px){.duo{max-width:560px;margin:0 auto}.duo .peek{left:-8px}}
@media(max-width:560px){.duo .shot{width:92%}.duo .peek{width:98px;top:-52px;left:0}.duo .fc-note{right:0;width:194px;padding:11px 13px;top:-40px}.duo .chrome .url{visibility:hidden}.duo .site-top .site-chip,.duo .site-ghost{display:none}.duo .site-sub{max-width:52%}.site-badges{max-width:54%}.site-badges span:nth-child(3){display:none}}

/* ---- Listen mit Linien: Überschrift, Marke, Text (Website-Seite) ---- */
.deflist>div{display:grid;grid-template-columns:1fr auto;gap:8px 18px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.deflist>div:last-child{border-bottom:1px solid var(--line)}
.deflist p{grid-column:1/-1;color:var(--ink-soft);font-size:1.03rem;max-width:60ch}
.side-art{position:relative;margin-top:34px;max-width:340px}
.side-art img{display:block;width:62%;height:auto;filter:drop-shadow(0 18px 28px rgba(126,55,248,.2))}
.side-art .peek-note{position:absolute;right:0;top:12%;transform:rotate(3deg)}
@media(max-width:880px){.side-art{display:none}}
@media(max-width:480px){.deflist>div{grid-template-columns:1fr}.deflist .tag{justify-self:start}}

/* ---- Zeilen mit Symbol (Über Auvance, wie „Warum“ auf der Startseite) ---- */
.rows{margin-top:52px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:76px 1fr 1.15fr;gap:30px;align-items:start;padding:34px 0;border-bottom:1px solid var(--line)}
.row .orb-ic{width:46px;height:46px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px rgba(27,116,243,.75);font-family:'Geist',sans-serif;font-weight:700;color:#fff}
.row .orb-ic svg{display:block}
.row .ref-link{margin-top:12px}
.row p{color:var(--ink-soft);font-size:1.03rem}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:12px;padding:28px 0}}

/* ---- Ablauf als Zeitleiste ---- */
.tl{list-style:none;counter-reset:tl}
.tl li{counter-increment:tl;position:relative;padding:0 0 36px 74px}
.tl li::before{content:counter(tl);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--grad-blue);color:#fff;font-family:'Geist',sans-serif;font-weight:700;font-size:1rem;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px rgba(27,116,243,.8)}
.tl li::after{content:"";position:absolute;left:22px;top:56px;bottom:10px;border-left:2px dashed var(--line-2)}
.tl li:last-child{padding-bottom:0}.tl li:last-child::after{display:none}
.tl h3{padding-top:10px}
.tl p{margin-top:7px;color:var(--ink-soft);font-size:1.03rem;max-width:56ch}
@media(max-width:480px){.tl li{padding-left:62px}}

/* ---- Preiskarten (wie Startseite) ---- */
.plan{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;padding:32px 28px 34px}
.plan h3{font-size:1.4rem}
.plan-for{font-size:.97rem;margin-top:6px}
.price{display:flex;align-items:baseline;gap:8px;margin:22px 0}
.price b{font-family:'Geist',sans-serif;font-weight:700;font-size:clamp(2rem,2.6vw,2.4rem);letter-spacing:-.04em;color:var(--ink);line-height:1;white-space:nowrap}
.price span{font-size:.95rem;color:var(--muted);white-space:nowrap}
.plan .btn{width:100%}
.plan .checks{margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.plan.featured{background:var(--grad-indigo);border-color:transparent;box-shadow:0 46px 100px -46px rgba(56,38,180,.7)}
.plan.featured h3,.plan.featured .price b{color:#fff}
.plan.featured .plan-for,.plan.featured .price span{color:rgba(255,255,255,.78)}
.plan.featured .checks{border-top-color:rgba(255,255,255,.2)}
.plan.featured .checks li{color:#fff}
.plan.featured .checks li::before{background:var(--check) center/11px no-repeat,rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.plan-badge{position:absolute;top:-13px;left:26px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;box-shadow:0 10px 22px -12px rgba(13,40,90,.45)}
.fineprint{font-size:.92rem;color:var(--muted);max-width:66ch}
.fineprint.center{text-align:center;margin:34px auto 0}

/* Website-Seite: das Paket links, die nächsten Stufen rechts */
.offer{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,5vw,76px);align-items:start;margin-top:104px}
.offer .plan{box-shadow:var(--shadow)}
.offer .plan .peek{top:-70px;right:14px;width:104px}
.ladder h3.lh{font-size:1.5rem}
.ladder>p{margin-top:10px;color:var(--ink-soft);font-size:1.05rem;max-width:54ch}
.ladder dl{margin-top:22px;border-top:1px solid var(--line)}
.ladder dl>div{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.ladder dt{font-family:'Geist',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.ladder .lp{font-family:'Geist',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);white-space:nowrap}
.ladder .lp small{font-family:'Inter';font-weight:400;font-size:.86rem;color:var(--muted)}
.ladder dd.t{grid-column:1/-1;color:var(--ink-soft);font-size:.99rem}
.ladder .links{display:flex;flex-wrap:wrap;gap:4px 26px;margin-top:6px}
@media(max-width:880px){.offer{grid-template-columns:1fr;gap:44px;margin-top:96px}.offer .plan{max-width:480px}}

/* SEO-Seite: drei Stufen als Treppe, die mittlere trägt das Gewicht */
.stairs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;margin-top:64px}
.stairs .plan{display:flex;flex-direction:column}
.stairs .plan:nth-child(1){margin-top:80px}
.stairs .plan:nth-child(2){margin-top:40px}
.stairs .step-no{font-family:'Handlee',cursive;font-size:1.12rem;color:var(--accent);display:block;margin-bottom:10px}
.stairs .plan.featured .step-no{color:#d3dbff}
.stairs .plan .btn{margin-top:auto}
.stairs .plan .checks{margin:0 0 28px;border-top:0;padding-top:0}
.stairs .price{margin:20px 0 22px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.stairs .plan.featured .price{border-bottom-color:rgba(255,255,255,.2)}
.stairs .plan .peek{top:-76px;right:10px;width:100px}
@media(max-width:920px){.stairs{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto;gap:34px}.stairs .plan:nth-child(n){margin-top:0}}

/* ---- Zickzack: Bild und Text im Wechsel ---- */
.zig{display:flex;flex-direction:column;gap:clamp(60px,8vw,104px);margin-top:60px}
.zig-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5.5vw,80px);align-items:center}
.zig-row.flip .vis{order:2}
.zig-row h2,.zig-row h3.big{font-size:clamp(1.55rem,2.9vw,2.15rem);margin:14px 0 .45em}
.zig-row .prose p{font-size:1.04rem}
.zig-row .checks{margin-top:20px}
.vis{position:relative;min-width:0}
.vis-box{position:relative;border-radius:26px;background:var(--grad-visual);padding:clamp(22px,3.4vw,40px);overflow:hidden}
.vis-box::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(94,82,255,.14) 1px,transparent 1.5px);background-size:15px 15px;pointer-events:none}
.vis-box>*{position:relative;z-index:1}
.cap{margin-top:14px;font-size:.8rem;color:var(--muted)}
@media(max-width:860px){.zig-row{grid-template-columns:1fr;gap:34px}.zig-row .vis,.zig-row.flip .vis{order:2}.zig-row .vis.peeked{margin-top:44px}}

/* SEO-Kopf: Karte mit Treffern darunter */
.localpack{width:100%;max-width:440px;margin-left:auto;padding-bottom:30px}
.lp-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 50px 110px -42px rgba(13,40,90,.5);overflow:hidden}
.lp-search{display:flex;align-items:center;gap:9px;margin:14px 14px 0;background:var(--paper-3);border-radius:999px;padding:10px 15px;font-size:.84rem;color:var(--ink-soft);font-weight:500}
.lp-map{position:relative;height:150px;margin:12px 14px 0;border-radius:14px;background:var(--grad-visual);overflow:hidden}
.lp-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(94,82,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(94,82,255,.12) 1px,transparent 1px);background-size:26px 26px}
.lp-map .road{position:absolute;background:#fff;opacity:.85;border-radius:6px}
.lp-map .road.r1{left:-5%;right:-5%;top:58%;height:9px;transform:rotate(-7deg)}
.lp-map .road.r2{top:-10%;bottom:-10%;left:36%;width:8px;transform:rotate(14deg)}
.lp-map .road.r3{left:52%;right:-5%;top:24%;height:6px;transform:rotate(9deg)}
.pin{position:absolute;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--grad-blue);box-shadow:0 10px 18px -6px rgba(27,116,243,.75);display:flex;align-items:center;justify-content:center}
.pin::after{content:"";width:10px;height:10px;border-radius:50%;background:#fff}
.pin.p1{left:44%;top:26%}
.pin.sm{width:18px;height:18px;background:#b9c3da;box-shadow:none}.pin.sm::after{width:6px;height:6px}
.pin.p2{left:18%;top:54%}.pin.p3{left:76%;top:50%}
.lp-list{padding:6px 18px 16px}
.lp-item{display:grid;grid-template-columns:22px 1fr;gap:2px 10px;padding:13px 0;border-bottom:1px solid var(--paper-3)}
.lp-item:last-child{border-bottom:0}
.lp-item .pos{font-family:'Geist';font-weight:700;font-size:.9rem;color:var(--accent);grid-row:1/3}
.lp-item b{font-size:.92rem;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.lp-item small{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted)}
.lp-item small .st{display:inline-flex;gap:1px}
.lp-item.skel{opacity:.6}
.lp-item.skel .pos{color:var(--faint)}
.lp-item.skel i{display:block;height:7px;border-radius:4px;background:var(--paper-3)}
.lp-item.skel i:first-of-type{width:62%;margin:4px 0 7px}
.lp-item.skel i:last-of-type{width:40%}
.localpack .peek{top:-84px;right:18px;width:104px}
.localpack .peek-note{top:-52px;right:132px}
.localpack .fc-stars{left:-38px;bottom:0;transform:rotate(-2deg);padding:12px 15px}
.localpack .fc-stars small{font-size:.72rem;color:var(--ink-soft);font-weight:500;margin-top:0}
@media(max-width:900px){.localpack{margin:0 auto}}
@media(max-width:560px){.localpack .fc-stars{left:-8px}.localpack .peek{width:88px;top:-72px;right:12px}.localpack .peek-note{right:104px;top:-46px}}

/* SEO: Unternehmensprofil als Karte */
.gbp{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -36px rgba(13,40,90,.45);padding:22px;max-width:400px;margin:0 auto}
.gbp-head{display:flex;gap:14px;align-items:center}
.gbp-logo{width:48px;height:48px;border-radius:14px;background:var(--grad-blue);flex:none;display:flex;align-items:center;justify-content:center}
.gbp-head b{display:block;font-family:'Geist';font-weight:600;font-size:1.08rem;letter-spacing:-.02em;color:var(--ink)}
.gbp-head small{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);margin-top:2px}
.gbp-rows{margin-top:16px;border-top:1px solid var(--paper-3)}
.gbp-rows div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--paper-3);font-size:.84rem;color:var(--ink-soft)}
.gbp-rows div span:first-child{color:var(--muted)}
.gbp-rows .ok{color:#15803d;font-weight:600}
.gbp-post{margin-top:16px;display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:10px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line)}
.gbp-post .thumb{height:52px;border-radius:10px;background:var(--grad-lav);border:1px solid var(--line)}
.gbp-post b{display:block;font-size:.8rem;font-weight:600;color:var(--ink)}
.gbp-post small{font-size:.72rem;color:var(--muted)}
.vis .peek.on-vis{top:-70px;right:18px;width:104px}
.vis .peek-note.on-vis{top:-36px;right:132px}

/* SEO: Seitenliste als Marken */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips span{font-size:.86rem;font-weight:600;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:0 8px 18px -14px rgba(13,40,90,.4)}
.chips .grp{flex:0 0 100%;font-family:'Handlee',cursive;font-weight:400;font-size:1.06rem;color:var(--accent-2);background:none;border:0;box-shadow:none;padding:8px 2px 0}
.chips .grp:first-child{padding-top:0}

/* Cockpit am Handy (echte Aufnahme) */
.cp-phone{width:min(100%,300px);margin:0 auto;padding:6px;border-radius:30px;background:#fff;box-shadow:0 40px 80px -30px rgba(13,40,90,.6),0 0 0 1px var(--line)}
.cp-phone img{display:block;width:100%;height:auto;border-radius:24px}
.vis .cap{text-align:center}

/* ---- Büro-Assistent: Handy mit Chat (wie Startseite) ---- */
.phone{position:relative;justify-self:center;width:min(100%,356px);margin:0 auto;background:#fff;border-radius:30px;padding:8px;box-shadow:0 44px 90px -30px rgba(10,6,60,.75),0 0 0 1px rgba(255,255,255,.2);transform:rotate(1.5deg)}
.phone-top{display:flex;align-items:center;gap:10px;padding:10px 12px 12px;border-bottom:1px solid #e6ebf3}
.bot-av{width:34px;height:34px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;flex:none}
.phone-top b{display:block;font-family:'Geist',sans-serif;font-size:.9rem;color:var(--ink);line-height:1.2}
.phone-top small{font-size:.7rem;color:var(--muted)}
.chat{display:flex;flex-direction:column;gap:9px;padding:16px 10px 14px;background:#e8eef7;border-radius:0 0 22px 22px}
.msg{max-width:88%;border-radius:16px;padding:9px 12px;font-size:.78rem;line-height:1.45;color:var(--ink);box-shadow:0 2px 6px -3px rgba(13,40,90,.3)}
.msg.me{align-self:flex-end;background:#d6e6ff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:#fff;border-bottom-left-radius:5px;width:88%}
.msg.me em{display:block;margin-top:7px;font-style:italic;color:var(--ink-soft);font-size:.74rem}
.voice{display:flex;align-items:center;gap:9px}
.play{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;padding-left:2px}
.wave{display:flex;align-items:center;gap:2px;height:22px;flex:1}
.wave i{display:block;width:3px;border-radius:2px;background:#4f86ea}
.msg small{font-size:.66rem;color:var(--muted)}
.msg.bot>b{font-weight:600}
.lines{display:grid;grid-template-columns:1fr auto;gap:3px 0;margin-top:8px;font-size:.74rem;color:var(--ink-soft)}
.lines span{white-space:nowrap}
.lines span:nth-child(odd){padding-right:14px}
.lines span:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
.lines .sum{font-weight:600;color:var(--ink);border-top:1px solid var(--line);padding-top:5px;margin-top:3px}
.pdf{display:flex;align-items:center;gap:10px;margin-top:10px;padding:8px 10px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line)}
.pdf-ic{width:28px;height:34px;border-radius:6px;background:#e5484d;color:#fff;font-size:.56rem;font-weight:700;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;flex:none;letter-spacing:.02em}
.pdf b{display:block;font-size:.72rem;font-weight:600}
.kb{display:grid;grid-template-columns:1fr;gap:6px;width:88%}
.kb span{background:rgba(255,255,255,.8);border-radius:10px;padding:8px 6px;text-align:center;font-size:.72rem;font-weight:600;color:var(--accent-press);white-space:nowrap}
.phone-mascot{position:absolute;right:-30px;top:-84px;width:110px;height:auto;z-index:2;transform:rotate(-1.5deg);filter:drop-shadow(0 18px 22px rgba(10,6,60,.45));animation:floatY 5.2s ease-in-out infinite .6s;pointer-events:none}
@media(max-width:1180px){.phone-mascot{right:-12px;top:-66px;width:92px}}
@media(max-width:900px){.phone{transform:none;margin-top:26px}.phone-mascot{right:-4px;top:-68px;width:88px;transform:none}}
@media(max-width:560px){.msg,.msg.bot,.kb{max-width:94%;width:94%}.msg.me{width:auto}}

/* Büro-Assistent: „das sagen Sie, das bekommen Sie“ als Zeilen */
.say-h{display:block;font-family:'Handlee',cursive;font-size:1.2rem;color:var(--accent-2);margin-top:44px}
.sayrows{margin-top:12px;border-top:1px solid var(--line)}
.sayrows>div{display:grid;grid-template-columns:1.2fr .8fr;gap:6px 36px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.sayrows dt{font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(1.12rem,1.9vw,1.42rem);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.sayrows dd{display:flex;gap:11px;font-size:1.02rem;line-height:1.45;color:var(--ink-soft)}
.sayrows dd::before{content:"";flex:none;width:18px;height:12px;margin-top:.42em;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 5h13M10 1l4 4-4 4' stroke='%231b74f3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media(max-width:700px){.sayrows>div{grid-template-columns:1fr;padding:18px 0}}

/* Büro-Assistent: Schriftstück als Blatt */
.sheets{position:relative;max-width:360px;margin:0 auto;padding:18px 0 8px}
.sheet{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 30px 60px -30px rgba(13,40,90,.45);padding:22px 22px 20px}
.sheet.back{position:absolute;inset:18px 0 8px;transform:rotate(-5deg) translate(-14px,6px);opacity:.75;box-shadow:0 20px 40px -26px rgba(13,40,90,.4)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.sheet-head b{font-family:'Geist';font-weight:700;font-size:.92rem;letter-spacing:-.02em;color:var(--ink)}
.sheet-head small{display:block;font-size:.62rem;color:var(--muted);line-height:1.4;margin-top:2px}
.sheet-logo{width:30px;height:30px;border-radius:9px;background:var(--grad-blue);flex:none;display:flex;align-items:center;justify-content:center}
.sheet-t{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-family:'Geist';font-weight:600;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink)}
.sheet-t small{font-family:'Inter';font-weight:500;font-size:.7rem;color:var(--muted)}
.sheet .lines{font-size:.78rem;margin-top:14px;gap:7px 0}
.sheet .lines .sum{padding-top:8px;margin-top:4px}
.sheet-foot{margin-top:16px;display:flex;gap:6px}
.sheet-foot i{display:block;height:5px;border-radius:3px;background:var(--paper-3);flex:1}
.vis .peek.on-sheet{top:-46px;right:6px;width:108px}
.vis .peek-note.on-sheet{top:-22px;right:122px}
.doctypes{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.doctypes span{font-size:.86rem;font-weight:600;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
@media(max-width:560px){.vis .peek.on-sheet{width:86px;top:-40px}.vis .peek-note.on-sheet{right:96px}}

/* Büro-Assistent: Punkte ohne Karten, zwei Spalten */
.points{display:grid;grid-template-columns:1fr 1fr;gap:44px clamp(32px,6vw,88px);margin-top:54px}
.point{display:grid;grid-template-columns:46px 1fr;gap:4px 18px;align-items:start}
.point .orb-ic{grid-row:1/3;width:46px;height:46px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px rgba(27,116,243,.75)}
.point h3{padding-top:9px}
.point p{color:var(--ink-soft);font-size:1.03rem;max-width:44ch}
@media(max-width:760px){.points{grid-template-columns:1fr;gap:34px}}

/* Büro-Assistent: Beispielvideo (wie Startseite, lädt erst beim Klick) */
.teaser{text-align:center}
.teaser-player{position:relative;max-width:960px;margin:40px auto 0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#f4f8fe;box-shadow:0 50px 100px -50px rgba(13,40,90,.55)}
.teaser-player video{display:block;width:100%;height:100%;object-fit:cover}
.teaser-play{position:absolute;left:20px;bottom:20px;display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border:0;border-radius:999px;cursor:pointer;background:var(--ink);color:#fff;font:600 .95rem 'Inter',sans-serif;box-shadow:0 18px 40px -16px rgba(4,17,39,.6);transition:transform .2s var(--ease)}
.teaser-play:hover{transform:translateY(-2px)}
.teaser-play:focus-visible{border-radius:999px}
.teaser-play .pi{width:36px;height:36px;border-radius:50%;background:var(--grad-blue);display:flex;align-items:center;justify-content:center;padding-left:2px}
.teaser.playing .teaser-play{display:none}
@media(max-width:640px){.teaser-player{margin-top:28px;border-radius:16px}.teaser-play{left:10px;bottom:10px;gap:8px;padding:5px 14px 5px 5px;font-size:.82rem}.teaser-play .pi{width:28px;height:28px}.teaser-play .pi svg{width:11px;height:12px}}

/* Büro-Assistent: Preis als breite Karte (wie Startseite) */
.plan-wide{display:grid;grid-template-columns:1.05fr 1.5fr auto;gap:22px 40px;align-items:center;padding:34px 36px;box-shadow:var(--shadow);margin-top:48px}
.plan-wide .checks{margin-top:0;border-top:0;padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.plan-wide .pw-buy{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.plan-wide .price{margin:0}
.plan-wide .btn{width:auto;padding:12px 30px}
.plan-wide .peek{top:-74px;right:26px;width:100px}
@media(max-width:1000px){.plan-wide{grid-template-columns:1fr}.plan-wide .pw-buy{flex-direction:row;align-items:center;justify-content:space-between}}
@media(max-width:640px){.plan-wide{padding:30px 24px;margin-top:92px}.plan-wide .checks{grid-template-columns:1fr}.plan-wide .pw-buy{flex-direction:column;align-items:stretch}.plan-wide .btn{width:100%}}

/* ---- Über Auvance: Maskottchen sitzt auf dem Steckbrief ---- */
.hello{width:100%;max-width:430px;margin-left:auto;padding-top:128px}
.hello-m{position:absolute;top:0;right:22px;width:212px;height:auto;z-index:2;filter:drop-shadow(0 18px 28px rgba(126,55,248,.22));animation:floatY 5.5s ease-in-out infinite .4s}
.steck{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 50px 110px -46px rgba(13,40,90,.5);padding:58px 28px 12px}
.steck-h{position:absolute;top:22px;left:28px;font-family:'Handlee',cursive;font-size:1.14rem;color:var(--accent-2)}
.steck dl>div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:13px 0;border-top:1px solid var(--paper-3);align-items:baseline}
.steck dt{font-size:.86rem;color:var(--muted)}
.steck dd{font-weight:600;font-size:.98rem;color:var(--ink);line-height:1.4}
.steck dd a{color:var(--accent)}
@media(max-width:900px){.hello{margin:0 auto}}
@media(max-width:400px){.steck{padding-left:22px;padding-right:22px}.steck-h{left:22px}.steck dl>div{grid-template-columns:88px 1fr}}

/* Über Auvance: großer Satz links, Grundsätze rechts */
.statement{font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(1.8rem,3.8vw,2.85rem);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.statement em{font-style:normal;color:var(--accent)}
.kv>div{padding:22px 0;border-top:1px solid var(--line)}
.kv>div:last-child{border-bottom:1px solid var(--line)}
.kv dt{font-family:'Geist',sans-serif;font-weight:600;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink)}
.kv dd{margin-top:6px;color:var(--ink-soft);font-size:1.03rem;max-width:58ch}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.contact address{font-style:normal;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--grad-card);padding:34px 34px 30px;position:relative}
.contact address .peek{top:-64px;right:22px;width:104px}
.contact address b{display:block;font-family:'Geist';font-weight:600;font-size:1.3rem;letter-spacing:-.02em}
.contact address span{display:block;color:var(--ink-soft);margin-top:4px}
.contact address a.mail{display:inline-block;margin-top:16px;font-family:'Geist';font-weight:600;font-size:clamp(1.2rem,2.4vw,1.55rem);letter-spacing:-.02em;color:var(--accent)}
.contact address a.mail:hover{color:var(--accent-press)}
@media(max-width:820px){.contact{grid-template-columns:1fr}}

/* ---- Referenzen ---- */
.refs{display:flex;flex-direction:column;gap:clamp(60px,8vw,100px);margin-top:60px}
.lead-peek{position:relative}
.lead-peek .peek{top:-18px;right:4px;width:132px}
@media(max-width:700px){.lead-peek .peek{display:none}}
.ref{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
.ref.flip .ref-shot{order:2}
.ref-copy{position:relative}
.ref-copy h3{font-size:clamp(1.6rem,2.6vw,2rem);margin:14px 0 .35em}
.ref-copy .checks{margin-top:20px}
.ref-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.ref-tags span{font-size:.74rem;font-weight:600;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.ref-links{display:flex;flex-wrap:wrap;gap:0 26px}
@media(max-width:820px){.ref{grid-template-columns:1fr}.ref.flip .ref-shot{order:0}}

/* zwei Referenzen nebeneinander, versetzt (Website-Seite) */
.refpair{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:56px}
.refpair>a:nth-child(2){margin-top:clamp(0px,7vw,84px)}
.rp{display:block}
.rp .ref-shot{transition:transform .35s var(--ease),box-shadow .35s}
.rp:hover .ref-shot{transform:translateY(-6px);box-shadow:0 54px 100px -46px rgba(13,40,90,.6)}
.rp .eyebrow{margin-top:24px}
.rp h3{margin-top:10px;font-size:1.5rem}
.rp p{margin-top:6px;color:var(--ink-soft)}
.rp .ref-link{margin-top:12px}
@media(max-width:760px){.refpair{grid-template-columns:1fr;gap:48px}.refpair>a:nth-child(2){margin-top:0}}

/* Referenz: Bild im Kopf */
.hero-shot{position:relative}
.hero-shot .peek{top:-60px;right:18px;width:116px}
.hero-shot .peek-note{top:-34px;right:144px}
@media(max-width:560px){.hero-shot .peek{width:92px;top:-50px;right:8px}.hero-shot .peek-note{right:108px;top:-30px}}

/* Referenz: Eckdaten als Leiste, ragt in den Kopf hinein */
.facts{position:relative;z-index:3;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-top:-34px}
.facts>div{background:#fff;padding:20px 22px}
.facts dt{font-size:.84rem;color:var(--muted)}
.facts dd{font-family:'Geist',sans-serif;font-weight:600;font-size:1.04rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-top:5px}
.facts dd a{color:var(--accent)}
@media(max-width:980px){.facts{grid-template-columns:1fr 1fr}.facts>div:last-child{grid-column:1/-1}}
@media(max-width:480px){.facts>div{padding:16px 18px}.facts dd{font-size:.98rem}}

/* Referenz ON-SE: Ergebnis, zwei Sätze mit Gewicht */
.outcome{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--grad-card);padding:44px 40px 38px}
.outcome .peek{top:-88px;right:22px;width:120px}
.outcome ul{list-style:none;display:flex;flex-direction:column;gap:22px}
.outcome li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:1.06rem;color:var(--ink-soft);line-height:1.45}
.outcome li::before{content:"";width:26px;height:26px;border-radius:50%;margin-top:4px;background:var(--check) center/13px no-repeat,var(--grad-blue);box-shadow:0 6px 14px -6px rgba(27,116,243,.7)}
.outcome li b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.8vw,1.95rem);letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
@media(max-width:880px){.outcome{margin-top:56px}}
@media(max-width:560px){.outcome{padding:40px 24px 30px}.outcome .peek{width:96px;top:-72px;right:12px}}

/* Referenz ON-SE: Seitenplan */
.tree{margin-top:54px}
.tree-root{display:flex;justify-content:center}
.node{display:inline-flex;align-items:center;gap:9px;font-family:'Geist',sans-serif;font-weight:600;font-size:1rem;letter-spacing:-.01em;color:#fff;background:var(--grad-blue);border-radius:999px;padding:11px 22px;box-shadow:0 12px 26px -12px rgba(27,116,243,.6)}
.tree-cols{position:relative;display:grid;grid-template-columns:1.25fr 1fr 1fr .9fr;gap:18px;margin-top:38px;padding-top:26px}
.tree-cols::before{content:"";position:absolute;top:0;left:12%;right:11%;border-top:2px dashed var(--line-2)}
.tree-cols::after{content:"";position:absolute;top:-38px;left:50%;height:38px;border-left:2px dashed var(--line-2)}
.tree-col{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 24px}
.tree-col::before{content:"";position:absolute;top:-27px;left:50%;height:26px;border-left:2px dashed var(--line-2)}
.tree-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:'Geist',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.02em;color:var(--ink)}
.tree-h small{font-family:'Handlee',cursive;font-weight:400;font-size:1rem;color:var(--accent-2);letter-spacing:0}
.tree-col ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.tree-col li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--ink-soft);font-weight:500}
.tree-col li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.55;flex:none}
@media(max-width:900px){.tree-cols{grid-template-columns:1fr 1fr}.tree-cols::before,.tree-col::before{display:none}.tree-cols{padding-top:0}.tree-cols::after{height:38px}}
@media(max-width:480px){.tree-cols{grid-template-columns:1fr}}

/* Referenz Zeus: großes Bild unter dem Kopf, dunkle Bausteine im Stil der Kundenseite */
.zshot{position:relative;z-index:2;max-width:980px;margin:clamp(48px,6vw,76px) auto 0}
.zshot .peek{top:-62px;left:22px;width:122px}
.zshot .peek-note{top:-34px;left:152px}
.ref-shot.dark{border-color:#221d14;background:#0d0b08;box-shadow:0 60px 120px -50px rgba(13,20,50,.7)}
.chrome.dark{background:#15120d;border-bottom-color:#262117}
.chrome.dark i{background:#3a3325}
.chrome.dark .url{background:#221d14;color:#a89f8c}
.zcard{background:#0f0d0a;color:#f1ebdf;border-radius:20px;padding:24px 24px 22px;box-shadow:0 30px 70px -34px rgba(13,20,50,.7);max-width:400px;margin:0 auto;border:1px solid #262117}
.zcard-h{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#a89f8c}
.zcard ul{list-style:none;margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.zcard li{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #262117;font-size:.84rem;font-weight:500}
.zcard li::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:#e8b84a;flex:none}
.zcard ul.zrows{grid-template-columns:1fr}
.zrows li{justify-content:space-between;gap:14px;padding:13px 0}
.zrows li::before{display:none}
.zrows li span{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a89f8c}
.zrows li b{font-weight:600;font-size:.86rem;text-align:right}
.zrows li i{display:block;width:84px;height:18px;border-radius:5px;background:linear-gradient(90deg,#e8b84a,#f3d27c)}
.zrows li:last-child{border-bottom:0;padding-bottom:0}
.zfield{margin-top:14px}
.zfield small{display:block;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a89f8c}
.zfield span{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:11px 14px;border:1px solid #3a3325;border-radius:10px;font-size:.88rem;font-weight:500}
.zfield span::after{content:"";width:8px;height:8px;border-right:2px solid #e8b84a;border-bottom:2px solid #e8b84a;transform:rotate(45deg) translateY(-2px)}
.zsum{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid #3a3325;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#a89f8c}
.zsum i{display:block;width:96px;height:22px;border-radius:6px;background:linear-gradient(90deg,#e8b84a,#f3d27c)}
@media(max-width:560px){.zshot .peek{width:94px;top:-50px;left:8px}.zshot .peek-note{left:106px;top:-30px}.zcard ul{grid-template-columns:1fr}}

/* ---- dunkle Karte (wie Startseite): Aufruf mitten auf der Seite ---- */
.mega{position:relative;overflow:hidden;border-radius:32px;background:var(--grad-indigo);padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);box-shadow:0 50px 110px -50px rgba(56,38,180,.65);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:center}
.mega>*{position:relative;z-index:1}
.mega>.stars{position:absolute;z-index:0}
.mega h2{color:#fff;margin-top:22px;font-size:clamp(1.75rem,3.4vw,2.6rem)}
.mega p{color:rgba(255,255,255,.84);margin-top:16px;font-size:1.06rem;line-height:1.65;max-width:56ch}
.mega .hero-cta{align-items:center;gap:8px 18px}
.mega-side{border:1px solid rgba(255,255,255,.24);border-radius:22px;padding:26px 26px 24px;background:rgba(255,255,255,.08)}
.mega-side dl>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.mega-side dl>div:first-child{padding-top:0}
.mega-side dl>div:last-child{border-bottom:0;padding-bottom:0}
.mega-side dt{color:#fff;font-family:'Geist',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.mega-side dt small{display:block;font-family:'Inter';font-weight:400;font-size:.86rem;letter-spacing:0;color:rgba(255,255,255,.74);margin-top:2px}
.mega-side dd{color:#fff;font-family:'Geist',sans-serif;font-weight:600;white-space:nowrap}
.mega-side dd small{font-family:'Inter';font-weight:400;font-size:.84rem;color:rgba(255,255,255,.74)}
@media(max-width:860px){.mega{grid-template-columns:1fr;border-radius:26px}}

/* Chat-Ausschnitt ohne Handy (Büro-Assistent) */
.chatcard{max-width:380px;margin:0 auto;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -34px rgba(13,40,90,.5);border:1px solid var(--line)}
.chatcard .chat{border-radius:0;padding:18px 14px 18px}
.chatcard .msg{font-size:.84rem}
.msg .lead-t{display:block;margin-top:4px;color:var(--ink-soft)}
.msg .act{display:inline-block;margin-top:9px;padding:7px 12px;border-radius:10px;background:var(--paper-2);border:1px solid var(--line);font-size:.76rem;font-weight:600;color:var(--accent-press)}

/* ---- Büro-Assistent: Anruf (nicht abgehoben, dann die Meldung in Telegram) und Termin (Mail, Vorschläge, Kalender) ---- */
.anruf{max-width:380px;margin:0 auto 14px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.74);border:1px solid var(--line);border-radius:16px;padding:10px 16px 10px 10px}
.anruf .ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--paper-3);color:var(--muted);display:flex;align-items:center;justify-content:center}
.anruf b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.anruf small{display:block;font-size:.74rem;line-height:1.3;color:var(--muted)}
.anruf time{margin-left:auto;font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chatcard .msg.bot:only-child{width:100%;max-width:100%}
.msg .lead-t.job{margin-top:8px;margin-bottom:6px;color:var(--ink);font-weight:600}
.termin{max-width:380px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.termin>div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 22px 44px -30px rgba(13,40,90,.5)}
.termin small{display:block;font-size:.72rem;font-weight:600;line-height:1.3;color:var(--muted)}
.termin-mail p{margin-top:5px;font-size:.9rem;line-height:1.45;color:var(--ink)}
.termin-vor{margin-left:28px}
.termin-vor em{display:block;margin-top:9px;font-style:normal;font-size:.8rem;color:var(--ink-soft)}
.slots{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.slots span{font-size:.8rem;font-weight:600;line-height:1;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:8px 12px;font-variant-numeric:tabular-nums}
.slots span.on{background:var(--grad-blue);border-color:transparent;color:#fff;box-shadow:0 8px 16px -8px rgba(27,116,243,.7)}
.termin .termin-fix{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:12px 16px 12px 12px}
.blatt{width:52px;border-radius:11px;overflow:hidden;border:1px solid var(--line);text-align:center;background:#fff}
.blatt i{display:block;font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding:5px 0 4px;color:#fff;background:var(--accent)}
.blatt b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:.84rem;letter-spacing:-.02em;line-height:1;padding:8px 0 9px;color:var(--ink);font-variant-numeric:tabular-nums}
.termin-fix>div b{display:block;font-family:'Geist',sans-serif;font-weight:600;font-size:.92rem;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.termin-fix>div small{font-weight:500;margin-top:2px}
.termin-fix .ok{width:22px;height:22px;border-radius:50%;background:var(--check) center/12px no-repeat,var(--grad-blue)}
@media(max-width:560px){.termin-vor{margin-left:14px}.slots{gap:6px}.slots span{padding:8px 10px;font-size:.76rem}}
.steck.plain{padding-top:12px;box-shadow:var(--shadow)}
.steck.plain dl>div:first-child{border-top:0}

/* ---- Fragen: Karten zum Aufklappen (wie Startseite) ---- */
.faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq-grid .lead{position:sticky;top:112px}
.faqs{display:flex;flex-direction:column;gap:14px}
.faq{background:#fff;border:1px solid var(--line);border-radius:18px;padding:0 24px;transition:box-shadow .25s,border-color .25s}
.faq.open{box-shadow:var(--shadow);border-color:var(--line-2)}
.faq h3{font:inherit;letter-spacing:inherit}
.faq .q{width:100%;background:none;border:none;cursor:pointer;font-family:'Geist',sans-serif;font-weight:500;font-size:1.08rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);text-align:left;padding:21px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq .chev{flex:none;transition:transform .3s var(--ease);color:var(--accent)}
.faq.open .chev{transform:rotate(180deg)}
.faq .a p{padding:0 0 22px;max-width:62ch;color:var(--ink-soft)}
.js .faq .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.js .faq .a>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .4s}
.js .faq.open .a{grid-template-rows:1fr}
.js .faq.open .a>div{visibility:visible}
@media(max-width:880px){.faq-grid{grid-template-columns:1fr;gap:34px}.faq-grid .lead{position:static}}
@media(max-width:480px){.faq{padding:0 20px}.faq .q{font-size:1.03rem}}

/* ---- weiterlesen: Verweise auf die anderen Seiten ---- */
.more{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,72px);margin-top:40px}
.more a{display:grid;grid-template-columns:1fr auto;gap:4px 18px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.more a b{font-family:'Geist',sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:-.02em;color:var(--ink);transition:color .18s}
.more a span{grid-column:1;color:var(--muted);font-size:.97rem}
.more a svg{grid-row:1/3;grid-column:2;color:var(--accent);transition:transform .22s var(--ease)}
.more a:hover b{color:var(--accent-press)}
.more a:hover svg{transform:translateX(5px)}
@media(max-width:760px){.more{grid-template-columns:1fr}}

/* ---- Schluss: die Wiese der Startseite ---- */
.final{position:relative;text-align:center;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,.55) 30%,rgba(255,255,255,0) 62%),url("img/hero-wiese.webp") center bottom/cover no-repeat;padding:clamp(100px,11vw,160px) 0 clamp(150px,17vw,230px)}
.final .watermark{position:absolute;left:50%;top:34px;transform:translateX(-50%);font-family:'Geist',sans-serif;font-weight:800;font-size:clamp(5rem,16vw,13rem);letter-spacing:-0.05em;line-height:1;color:rgba(123,140,235,.16);white-space:nowrap;pointer-events:none;user-select:none}
.final .wrap{position:relative;z-index:2}
.final .mascot{display:block;width:170px;height:auto;margin:0 auto 12px;filter:drop-shadow(0 0 26px rgba(245,248,255,.95)) drop-shadow(0 0 12px rgba(234,241,255,.9)) drop-shadow(0 18px 28px rgba(126,55,248,.20));animation:floatY 5.5s ease-in-out infinite .6s}
.final h2{max-width:19ch;margin:14px auto .2em}
.final p{max-width:46ch;margin:18px auto 0;color:var(--ink-soft)}
.final .hero-cta{justify-content:center}
.final .microcta{margin-top:18px}
.final .microcta::before{display:none}
.final .microcta .note{background:rgba(255,255,255,.86);border-radius:999px;padding:3px 16px}

/* ---- Fuß (wie Startseite, dazu eine Zeile mit den Seiten) ---- */
footer{border-top:1px solid var(--line);padding:42px 0;background:#fff}
.foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--muted)}
.foot .brand{font-size:1.2rem;color:var(--ink);flex:0 0 100%}
.foot-about{flex:0 0 100%;padding-right:max(0px,calc(100% - 68ch));margin:-6px 0 6px;line-height:1.55}
footer nav a{color:var(--muted);margin-right:18px;transition:color .18s}
footer nav a:hover{color:var(--ink)}
.foot nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;min-width:0}
.foot nav.foot-pages{flex:0 0 100%;padding-bottom:16px;border-bottom:1px solid var(--line)}
.foot nav.foot-pages a{color:var(--ink-soft);font-weight:500}
@media(max-width:560px){.foot{flex-direction:column;text-align:center;gap:14px}.foot .brand{justify-content:center}.foot nav{justify-content:center}footer nav a{margin:0 9px}.foot-about{padding-right:0}}

/* ---- Bewegung ---- */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.phero .crumb{animation:riseIn .8s var(--ease) both .05s}
.phero .eyebrow,.phero .pill{animation:riseIn .8s var(--ease) both .12s}
.phero h1{animation:riseIn .8s var(--ease) both .22s}
.phero .sub{animation:riseIn .8s var(--ease) both .34s}
.phero .hero-cta{animation:riseIn .8s var(--ease) both .46s}
.phero .microcta,.phero .fine{animation:riseIn .8s var(--ease) both .56s}
.phero-visual,.zshot{animation:riseIn .9s var(--ease) both .5s}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .js .faq .a,.js .faq .a>div,.faq .chev,.btn,.ref-shot,.more a svg{transition:none}
}
@media(max-width:480px){.wrap{padding:0 22px}}