/*
Theme Name: Webdesign Schinck 2.0
Theme URI: https://webdesign-schinck.de
Author: Maxi Schinck
Description: Eigenes Theme für webdesign-schinck.de, Design 2.0. Ohne Seitenbaukasten. Seide im Kopf, Bewegung von Hand, GSAP nur für die Unterseiten.
Version: 2.0.2
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: webdesign-schinck
*/

/* Schriften: liegen unter wp-content/uploads/ws-schriften/ und werden
   von inc/fonts.php eingebunden. Fehlen sie, greift der Ersatzstapel. */
  :root{
    --bg:#ffffff; --white:#ffffff; --bg-soft:#f5f6f9; --black:#0a0a0c; --ink-soft:#3d4252; --star:#a56a08;
    --ink:#0e1016; --ink-dim:#63687a; --ink-faint:#6a7080; --line:#e7e9f0;
    --blue:#2f5bff; --blue-deep:#1a3ad6; --blue-soft:#eef2ff;
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-accent:'Playfair Display','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
    --gutter:clamp(20px,5vw,60px); --maxw:1160px;
  }
  *{ box-sizing:border-box; }
  html{ background:var(--bg); scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3{ font-family:var(--font); margin:0; letter-spacing:-.035em; font-weight:800; text-wrap:balance; }
  p{ margin:0; } a{ color:inherit; text-decoration:none; } img,svg{ max-width:100%; display:block; }
  ::selection{ background:var(--blue); color:#fff; }
  :focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:8px; }
  @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s !important; animation-delay:0s !important; transition-duration:.12s !important; } }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
  .kicker{ font-weight:700; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); }
  .accent{ font-family:var(--font-accent); font-style:italic; font-weight:900; color:var(--blue); }

  #sparks{ position:fixed; inset:0; z-index:55; pointer-events:none; }

  .curtain{ position:fixed; inset:0; z-index:200; background:#fff; display:flex; align-items:center; justify-content:center; pointer-events:none;
    animation:curtainOut .5s cubic-bezier(.76,0,.24,1) forwards; animation-delay:.2s; }
  .curtain img{ width:64px; height:64px; border-radius:18px; animation:markPop .4s cubic-bezier(.2,1.4,.4,1) forwards; }
  @keyframes markPop{ from{ opacity:0; transform:scale(.72); } to{ opacity:1; transform:scale(1); } }
  @keyframes curtainOut{ to{ opacity:0; transform:scale(1.05); } }
  @media (prefers-reduced-motion:reduce){ .curtain{ display:none; } }

  /* .enter, .reveal, [data-split]: Bewegung laeuft seit 1.13 ueber GSAP, siehe Block BEWEGUNG 1.13 am Ende */
  
  
  
  
  
  
  
  

  .nav{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.74); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:12px; }
  .brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:16.5px; letter-spacing:-.02em; }
  .brand img{ width:34px; height:34px; border-radius:10px; }
  .nav-links{ display:flex; gap:32px; align-items:center; }
  .nav-links a{ position:relative; font-size:14.5px; font-weight:600; color:var(--ink-dim); transition:color .25s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(.3,.8,.3,1); }
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  @media (max-width:880px){ .nav-links{ display:none; } }

  .btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px;
    padding:15px 30px; border-radius:999px; font-weight:700; font-size:15px; letter-spacing:-.01em; border:2px solid transparent; cursor:pointer; }
  .btn-primary{ background:var(--blue); color:#fff; box-shadow:0 14px 30px -14px rgba(47,91,255,.6); }
  .btn-primary::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--blue-deep); transform:translateY(102%); transition:transform .45s cubic-bezier(.3,.8,.3,1); }
  .btn-primary:hover::before{ transform:translateY(0); }
  .btn-ghost{ border-color:var(--line); background:#fff; color:var(--ink); }
  .btn-ghost::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--blue-soft); transform:scale(0); border-radius:999px; transition:transform .45s cubic-bezier(.3,.8,.3,1); }
  .btn-ghost:hover{ border-color:var(--blue); color:var(--blue-deep); }
  .btn-ghost:hover::before{ transform:scale(1); }
  .btn .lbl{ position:relative; display:inline-flex; align-items:center; gap:9px; }
  .btn .arw{ transition:transform .3s cubic-bezier(.3,.8,.3,1); }
  .btn:hover .arw{ transform:translateX(5px); }
  .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.4); pointer-events:none; }
  .btn-ghost .ripple{ background:rgba(47,91,255,.2); }
  


  /* ---------- lebendiger Hero Hintergrund ---------- */
  #heroGrid{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
  .aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
  .aurora i{ position:absolute; display:block; border-radius:50%; filter:blur(120px); opacity:.34; }
  .aurora .a1{ width:540px; height:540px; left:8%; top:-160px; background:rgba(47,91,255,.22); }
  .aurora .a2{ width:460px; height:460px; right:4%; top:-60px; background:rgba(18,194,233,.15); }
  .aurora .a3{ width:420px; height:420px; left:42%; bottom:-220px; background:rgba(122,90,255,.11); }
  .sweep{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
  .sweep i{ position:absolute; top:-40%; left:-30%; width:28%; height:180%; transform:rotate(14deg);
    background:linear-gradient(90deg, rgba(47,91,255,0), rgba(47,91,255,.085), rgba(47,91,255,0)); }
  

  /* ---------- Hero ---------- */
  .hero{ position:relative; overflow:hidden; padding-block:clamp(50px,8vw,92px) 34px; text-align:center; }
  .hero::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:320px; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, var(--white) 100%); }
  .glow{ position:absolute; width:640px; height:640px; border-radius:50%; filter:blur(110px); background:rgba(47,91,255,.15); top:-280px; left:50%; transform:translateX(-50%); pointer-events:none; }
  .drift{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
  .drift .dm{ position:absolute; color:var(--blue); }
  .drift .dmi{ display:block; width:100%; height:100%; }
  .drift .dmi svg{ width:100%; height:100%; }
  

  .hero-inner{ position:relative; z-index:1; }
  .pill-tag{ display:inline-flex; align-items:center; gap:9px; background:var(--blue-soft); color:var(--blue-deep); font-weight:700; font-size:13.5px; padding:9px 18px; border-radius:999px; }
  .pill-tag .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); animation:pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.55); opacity:.5; } }
  .hero h1{ font-size:clamp(38px,6.4vw,76px); font-weight:800; line-height:1.04; margin-top:24px; }
  
  
  .rotator,.hero h1 .rotator{ display:inline-grid; vertical-align:top; }
  .rotator span{ grid-area:1/1; white-space:nowrap; font-family:var(--font-accent); font-style:italic; font-weight:900; color:var(--blue); font-size:1.06em; opacity:0; }
  .rotator span.on{ opacity:1; transform:none; }
  .hero .lede{ margin:24px auto 0; max-width:52ch; color:var(--ink-dim); font-size:18.5px; }
  .hero-actions{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }
  .hero-note{ margin-top:16px; font-size:14px; color:var(--ink-faint); }
  .hero-trust{ margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px; }
  .htitem{ display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); font-weight:600; }
  .htitem .stars{ color:#a56a08; letter-spacing:1.5px; font-size:14px; }
  .htitem b{ font-weight:800; color:var(--ink); }
  .htitem .tick{ width:18px; height:18px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
    display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
  .htsep{ width:1px; height:16px; background:var(--line); }
  @media (max-width:620px){ .htsep{ display:none; } }

  /* ---------- Werkstatt Rahmen ---------- */
  .stage{ position:relative; margin:clamp(40px,5.5vw,64px) auto 0; max-width:880px; }
  .stage-marks{ display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:16px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
  .stage-marks i{ display:block; width:40px; height:1px; background:var(--line); }
  .stage-marks b{ font-weight:700; color:var(--blue); }
  .shell{ position:relative; border-radius:22px; padding:2px; overflow:hidden; box-shadow:0 46px 90px -44px rgba(10,16,60,.45); }
  .shell::after{ content:''; position:absolute; inset:0; border-radius:22px; box-shadow:inset 0 0 0 1px rgba(10,16,60,.07); pointer-events:none; z-index:3; }
  .shell-glow{ position:absolute; top:50%; left:50%; width:170%; aspect-ratio:1; translate:-50% -50%; border-radius:50%;
    background:conic-gradient(from 0deg, transparent 0deg, rgba(47,91,255,.0) 34deg, var(--blue) 66deg, #a9bcff 86deg, rgba(47,91,255,0) 118deg, transparent 360deg);
    animation:spinGlow 5.5s linear infinite; }
  @media (prefers-reduced-motion:reduce){ .shell-glow{ animation:none; opacity:.35; } }
  @keyframes spinGlow{ to{ transform:rotate(360deg); } }
  .build{ position:relative; z-index:2; border-radius:20px; overflow:hidden; background:#fff; }
  .build-bar{ display:flex; align-items:center; gap:7px; padding:11px 15px; background:#fbfbfd; border-bottom:1px solid var(--line); }
  .build-dot{ width:9px; height:9px; border-radius:50%; background:#e1e3ec; }
  .build-url{ margin-left:10px; flex:1; max-width:300px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:5px 15px; font-size:12px; color:var(--ink-faint); font-weight:600; text-align:left; }
  .build-body{ position:relative; aspect-ratio:16/9; background:#fff; }
  .wire{ position:absolute; inset:0; padding:5%; display:grid; grid-template-columns:repeat(12,1fr); gap:2.4% 1.6%; align-content:start;
    background-image:radial-gradient(circle,#dfe3ef 1px,transparent 1px); background-size:20px 20px; }
  .wb{ background:#eef0f6; border-radius:8px; }
  .wb.line{ background:#e6e9f2; height:9px; border-radius:6px; }
  .real{ position:absolute; inset:0; clip-path:inset(0 60% 0 0); }
  .real img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
  .scan{ position:absolute; top:0; bottom:0; width:2px; left:40%; background:linear-gradient(180deg,transparent,var(--blue),transparent); box-shadow:0 0 18px 2px rgba(47,91,255,.5); z-index:3; }
  .stage-hint{ margin-top:16px; font-size:13.5px; color:var(--ink-faint); }

  /* ---------- Werkzeugband, zugleich Farbuebergang vom Hero ---------- */
  .tools{ position:relative; z-index:1; padding:30px 0 22px; overflow:hidden;
    background:linear-gradient(180deg, var(--white) 0%, var(--bg-soft) 100%); }
  .tlabel{ text-align:center; font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:20px; }
  .trow{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
  .ttrack{ display:flex; align-items:center; gap:14px; width:max-content; }
  
  .chip{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
    padding:11px 20px; border-radius:999px; background:#fff; border:1px solid var(--line);
    box-shadow:0 2px 12px rgba(16,24,64,.05); font-weight:700; font-size:15px; color:var(--ink);
    transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
  .chip i{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex:none; }
  .chip em{ font-style:normal; font-weight:600; font-size:13.5px; color:var(--ink-faint); }
  .chip:hover{ transform:translateY(-3px); border-color:rgba(47,91,255,.35); box-shadow:0 10px 24px rgba(47,91,255,.14); }
  @media (max-width:680px){ .chip em{ display:none; } }
  

  /* ---------- Kundenlogos ---------- */
  .band{ background:var(--bg-soft); padding-block:clamp(44px,6vw,68px); overflow:hidden; border-bottom:1px solid var(--line); }
  .band-label{ text-align:center; font-weight:700; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:34px; }
  .loop{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
  .loop-track{ display:flex; align-items:center; gap:clamp(46px,7vw,92px); width:max-content; }
  
  .loop-track img{ width:auto; max-width:230px; object-fit:contain; opacity:.92; transition:opacity .35s ease, transform .35s ease; }
  .loop-track img.lg-s{ height:clamp(24px,2.7vw,34px); }
  .loop-track img.lg-m{ height:clamp(30px,3.4vw,42px); }
  .loop-track img.lg-l{ height:clamp(38px,4.2vw,52px); }
  .loop-track img:hover{ opacity:1; transform:scale(1.07); }
  

  section{ padding-block:clamp(70px,9vw,120px); position:relative; }
  .soft{ background:var(--bg-soft); }
  .sec-head{ max-width:730px; margin:0 auto clamp(40px,5vw,60px); text-align:center; }
  .sec-head h2{ font-size:clamp(29px,4.4vw,52px); margin-top:16px; line-height:1.08; }
  .sec-head p{ margin-top:18px; color:var(--ink-dim); font-size:18px; }

  .tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media (max-width:880px){ .tiles{ grid-template-columns:repeat(2,1fr); } }
  .tile{ background:#fff; border-radius:22px; padding:28px 22px; box-shadow:0 2px 6px rgba(10,16,60,.05); transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
  .tile:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -32px rgba(10,16,60,.4); }
  .tile .num{ font-weight:800; font-size:42px; line-height:1; color:var(--blue); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
  .tile .num small{ font-size:21px; font-weight:700; }
  .tile .txt{ margin-top:13px; font-size:15px; color:var(--ink-dim); }

  .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .cards{ grid-template-columns:1fr; } }
  .card{ position:relative; overflow:hidden; background:#fff; border-radius:26px; padding:36px 30px; display:flex; flex-direction:column; gap:15px; box-shadow:0 2px 6px rgba(10,16,60,.05); transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
  .card:hover{ transform:translateY(-10px); box-shadow:0 36px 70px -34px rgba(10,16,60,.42); }
  .card::after{ content:''; position:absolute; inset:0; background:linear-gradient(115deg,transparent 42%,rgba(47,91,255,.09) 50%,transparent 58%); transform:translateX(-130%); transition:transform 1s ease; pointer-events:none; }
  .card:hover::after{ transform:translateX(130%); }
  .ico{ width:56px; height:56px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; transition:transform .5s cubic-bezier(.2,1.3,.4,1); }
  .card:hover .ico{ transform:rotate(-9deg) scale(1.08); }
  .card h3{ font-size:23px; }
  .card p{ color:var(--ink-dim); font-size:15.5px; }
  .card .go{ margin-top:auto; font-weight:700; font-size:14.5px; color:var(--blue); display:inline-flex; align-items:center; gap:7px; }
  .card .go .arw{ transition:transform .3s cubic-bezier(.3,.8,.3,1); }
  .card:hover .go .arw{ transform:translateX(5px); }

  /* ---------- 3D Handy Sequenz ---------- */
  .proc{ position:relative; height:460vh; background:var(--bg-soft); border-bottom:1px solid var(--line); }
  .proc-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:flex-start; padding-top:min(9vh,84px); }
  @media (max-width:900px){ .proc{ height:auto; } .proc-sticky{ position:static; height:auto; padding-block:64px; } }
  .pgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,70px); align-items:center; width:100%; }
  @media (max-width:900px){ .pgrid{ grid-template-columns:1fr; } }
  .ptext h2{ font-size:clamp(28px,4.2vw,50px); margin-top:14px; line-height:1.08; }
  .steps{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
  .step{ display:flex; gap:16px; }
  
  .step b{ font-size:13px; font-weight:800; color:var(--blue); letter-spacing:.08em; min-width:26px; padding-top:4px; }
  .step h3{ font-size:19px; }
  .step p{ color:var(--ink-dim); font-size:15px; margin-top:3px; }
  

  .pstage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; perspective:1400px; }
  .pglowbg{ position:absolute; top:50%; left:50%; width:420px; height:420px; translate:-50% -50%; border-radius:50%;
    background:radial-gradient(circle, rgba(47,91,255,.22), rgba(47,91,255,0) 68%); pointer-events:none; }
  .pshadow{ position:absolute; bottom:6%; left:50%; width:62%; height:26px; translate:-50% 0; border-radius:50%;
    background:radial-gradient(ellipse, rgba(10,16,60,.38), rgba(10,16,60,0) 70%); filter:blur(6px); pointer-events:none; }
  .phone{ position:relative; width:clamp(210px,19vw,272px); aspect-ratio:440/854; border-radius:15%/7%;
    background:linear-gradient(145deg,#dfe3ec,#959cae 28%,#f4f6fa 52%,#838a9c 72%,#d2d7e2);
    padding:9px; box-shadow:0 60px 90px -42px rgba(10,16,60,.55);
    transform:rotateY(-34deg) rotateX(12deg) rotateZ(-5deg); will-change:transform; }
  .pscreen{ position:relative; width:100%; height:100%; border-radius:13%/6%; overflow:hidden; background:#07080c; }
  .phshot{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
    transition:opacity .18s linear; }
  .phshot-b{ opacity:0; }
  .poff{ position:absolute; inset:0; background:#07080c; }
  .pisland{ position:absolute; top:3.4%; left:50%; translate:-50% 0; width:30%; height:3.2%; border-radius:999px; background:#07080c; z-index:4; }
  .pglare{ position:absolute; inset:0; border-radius:15%/7%; z-index:5; pointer-events:none;
    background:linear-gradient(118deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.10) 24%, rgba(255,255,255,0) 44%); }
  .pcaption{ order:-1; position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 2px 10px rgba(16,24,64,.05); font-size:12.5px; font-weight:700; color:var(--ink-dim); transition:opacity .2s linear; }

  /* ---------- Projektstapel ---------- */
  .stack{ display:flex; flex-direction:column; gap:clamp(40px,9vh,90px); padding-bottom:clamp(30px,8vh,80px); }
  .stack-card{ position:sticky; top:calc(96px + var(--i) * 16px); will-change:transform; }
  .pcard{ background:#fff; border-radius:28px; overflow:hidden; box-shadow:0 30px 70px -40px rgba(10,16,60,.5), 0 0 0 1px rgba(10,16,60,.06);
    display:grid; grid-template-columns:1.15fr .85fr; align-items:stretch; }
  @media (max-width:900px){ .pcard{ grid-template-columns:1fr; } }
  .pshot{ position:relative; background:var(--bg-soft); padding:22px; display:flex; align-items:center; }
  .pmini{ width:100%; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 20px 44px -26px rgba(10,16,60,.55), 0 0 0 1px rgba(10,16,60,.06); }
  .pmini-bar{ display:flex; align-items:center; gap:5px; padding:8px 11px; background:#fbfbfd; border-bottom:1px solid var(--line); }
  .pmini-bar i{ width:7px; height:7px; border-radius:50%; background:#e1e3ec; display:block; }
  .pmini-bar span{ margin-left:8px; font-size:10.5px; font-weight:600; color:var(--ink-faint); }
  .pmini img{ width:100%; height:auto; display:block; transition:transform 1.1s cubic-bezier(.2,.8,.25,1); }
  .pcard:hover .pmini img{ transform:scale(1.03); }
  .pbrand{ width:100%; aspect-ratio:16/10; border-radius:14px; background:linear-gradient(150deg,#ffffff,#e9eeff); display:flex; align-items:center; justify-content:center;
    box-shadow:0 20px 44px -28px rgba(10,16,60,.5), 0 0 0 1px rgba(10,16,60,.06); }
  .pbrand img{ max-width:56%; max-height:52%; object-fit:contain; }
  .pinfo{ padding:clamp(26px,3vw,40px); display:flex; flex-direction:column; justify-content:center; gap:12px; }
  .pinfo .no{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
  .pinfo h3{ font-size:clamp(21px,2.4vw,28px); }
  .pinfo .sub{ color:var(--ink-faint); font-size:14.5px; margin-top:-4px; }
  .pinfo .res{ color:var(--ink-dim); font-size:15.5px; }
  .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
  .tag{ font-size:12px; font-weight:700; color:var(--blue-deep); background:var(--blue-soft); padding:6px 12px; border-radius:999px; }


  /* ---------- Pakete ---------- */
  .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
  @media (max-width:900px){ .plans{ grid-template-columns:1fr; } }
  .plan{ position:relative; display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:26px; padding:34px 28px;
    box-shadow:0 2px 6px rgba(10,16,60,.05); transition:transform .4s cubic-bezier(.2,.8,.25,1), box-shadow .4s ease; }
  .plan:hover{ transform:translateY(-8px); box-shadow:0 34px 66px -34px rgba(10,16,60,.4); }
  .plan.best{ background:var(--black); color:#fff; box-shadow:0 34px 70px -34px rgba(10,16,60,.55); }
  .plan .tagbest{ position:absolute; top:-12px; left:28px; background:var(--blue); color:#fff; font-size:12px; font-weight:700; padding:6px 14px; border-radius:999px; }
  .plan h3{ font-size:21px; }
  .plan .plan-for{ font-size:15.5px; line-height:1.5; font-weight:600; color:var(--ink-soft); min-height:70px; }
  .plan.best .plan-for{ color:rgba(255,255,255,.72); }
  .plan ul{ list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .plan li{ display:flex; gap:10px; font-size:15px; color:var(--ink-dim); }
  .plan.best li{ color:rgba(255,255,255,.76); }
  .plan li svg{ flex:none; margin-top:3px; }
  .plan .btn{ margin-top:auto; }
  .plan-note{ margin-top:22px; text-align:center; font-size:14px; color:var(--ink-faint); }

  /* ---------- Fragen ---------- */
  .faq{ max-width:840px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
  .qa{ background:#fff; border-radius:20px; box-shadow:0 2px 6px rgba(10,16,60,.05); overflow:hidden; }
  .qa summary{ list-style:none; cursor:pointer; padding:22px 26px; font-weight:700; font-size:17.5px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .qa summary::-webkit-details-marker{ display:none; }
  .qa summary .pm{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:800; transition:transform .35s cubic-bezier(.3,.8,.3,1); }
  .qa[open] summary .pm{ transform:rotate(45deg); }
  .qa .ans{ padding:0 26px 24px; color:var(--ink-dim); font-size:16px; max-width:70ch; }
  .qa[open] .ans{ animation:qaIn .45s cubic-bezier(.2,.8,.25,1); }
  @keyframes qaIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

  /* ---------- Formular ---------- */
  .form{ max-width:620px; margin:34px auto 0; text-align:left; display:grid; gap:14px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:640px){ .row2{ grid-template-columns:1fr; } }
  .field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
  .field input,.field select,.field textarea{ width:100%; font-family:var(--font); font-size:15.5px; color:var(--ink);
    background:#fff; border:1.5px solid var(--line); border-radius:14px; padding:13px 16px; transition:border-color .25s, box-shadow .25s; }
  .field textarea{ min-height:120px; resize:vertical; }
  .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,91,255,.12); }
  .consent{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-dim); }
  .consent input{ width:18px; height:18px; margin-top:2px; accent-color:var(--blue); flex:none; }
  .form .btn{ justify-self:start; }
  .formnote{ font-size:13.5px; color:var(--ink-faint); min-height:20px; }

  .about{ background:var(--black); border-radius:34px; overflow:hidden; display:grid; grid-template-columns:.9fr 1.1fr; }
  @media (max-width:880px){ .about{ grid-template-columns:1fr; } }
  .about-photo{ position:relative; min-height:420px; }
  .about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .about-txt{ padding:clamp(30px,4.4vw,58px); color:#fff; display:flex; flex-direction:column; justify-content:center; }
  .about-txt .kicker{ color:#8ea4ff; }
  .about-txt h2{ font-size:clamp(28px,3.6vw,42px); margin-top:14px; }
  .about-txt p{ margin-top:20px; color:rgba(255,255,255,.72); font-size:16.5px; max-width:52ch; }
  .facts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
  .fact{ border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 17px; font-size:14px; font-weight:600; color:rgba(255,255,255,.9); }

  .reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:900px){ .reviews{ grid-template-columns:1fr; } }
  .review{ background:#fff; border-radius:24px; padding:30px; box-shadow:0 2px 6px rgba(10,16,60,.05); transition:transform .4s cubic-bezier(.2,.8,.25,1); }
  .review:hover{ transform:translateY(-8px); }
  .stars{ color:var(--blue); letter-spacing:3px; font-size:16px; }
  .review p{ margin-top:16px; color:var(--ink-dim); font-size:16px; }
  .review .who{ margin-top:20px; font-size:13.5px; color:var(--ink-faint); font-weight:700; }
  .note{ margin-top:22px; text-align:center; color:var(--ink-faint); font-size:14.5px; }
  /* Hinweiskasten im Fließtext, links ausgerichtet */
  .subsec p.hinweis, p.hinweis{ margin-top:24px; padding:18px 22px; border-left:3px solid var(--blue);
    border-radius:0 14px 14px 0; background:#f2f5ff; color:var(--ink); font-size:15.5px; line-height:1.65; }
  .subsec .ticks + p{ margin-top:18px; }


  .gbadge{ display:inline-flex; align-items:center; gap:12px; background:#fff; border-radius:999px; padding:10px 20px 10px 14px;
    box-shadow:0 2px 6px rgba(10,16,60,.06), 0 0 0 1px rgba(10,16,60,.05); margin-top:18px; }
  .gbadge .g{ width:26px; height:26px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center; }
  .gbadge .val{ font-weight:800; font-size:16px; }
  .gbadge .st{ color:#a56a08; letter-spacing:1px; font-size:14px; }
  .gbadge .cnt{ font-size:14px; color:var(--ink-faint); }
  .review .head{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
  .review .av{ width:38px; height:38px; border-radius:50%; background:var(--blue-soft); color:var(--blue-deep); font-weight:800; font-size:15px;
    display:flex; align-items:center; justify-content:center; flex:none; }
  .review .nm{ font-weight:700; font-size:15px; }
  .review .dt{ font-size:12.5px; color:var(--ink-faint); }
  .review .stars{ color:#a56a08; }

  .cta-wrap{ text-align:center; }
  .cta-wrap h2{ font-size:clamp(31px,5.4vw,62px); max-width:17ch; margin:0 auto; line-height:1.05; }
  .cta-wrap p{ margin:20px auto 0; max-width:48ch; color:var(--ink-dim); font-size:18px; }
  .cta-actions{ display:flex; gap:14px; justify-content:center; margin-top:36px; flex-wrap:wrap; }

  .float-cta{ position:fixed; right:22px; bottom:22px; z-index:70; display:inline-flex; align-items:center; gap:10px;
    background:var(--blue); color:#fff; font-weight:700; font-size:14.5px; padding:14px 24px; border-radius:999px; box-shadow:0 20px 40px -16px rgba(47,91,255,.65);
    opacity:0; transform:translateY(24px) scale(.94); pointer-events:none; transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.2,.35,1), background .25s ease; }
  .float-cta.show{ opacity:1; transform:none; pointer-events:auto; }
  .float-cta:hover{ background:var(--blue-deep); }
  .float-cta .pulse{ position:relative; width:9px; height:9px; border-radius:50%; background:#fff; flex:none; }
  .float-cta .pulse::after{ content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(255,255,255,.7); animation:pulseRing 2s ease-out infinite; }
  @keyframes pulseRing{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
  @media (max-width:520px){ .float-cta{ right:14px; bottom:14px; padding:12px 18px; font-size:13.5px; } }

  footer{ background:var(--bg-soft); padding-block:54px 32px; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px; }
  @media (max-width:980px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-tag{ margin-top:14px; color:var(--ink-dim); font-size:15px; max-width:34ch; }
  .foot-col h4, .foot-col .foot-h{ font-size:14.5px; font-weight:800; margin-bottom:14px; letter-spacing:-.01em; line-height:1.4; }
  .foot-adr{ margin-top:16px; font-style:normal; font-size:15px; color:var(--ink-dim); line-height:1.7; }
  .foot-adr a{ color:var(--ink); font-weight:700; }
  .foot-col a{ display:block; padding-block:6px; font-size:15px; color:var(--ink-dim); transition:color .25s, transform .25s; }
  .foot-col a:hover{ color:var(--blue); transform:translateX(3px); }
  .foot-bottom{ margin-top:44px; padding-top:22px; border-top:1px solid #dfe2ea; display:flex; justify-content:space-between; font-size:13px; color:var(--ink-faint); flex-wrap:wrap; gap:10px; }

  /* ---------- Unterseiten ---------- */
  .page[hidden]{ display:none; }
  .subhero{ position:relative; padding:clamp(40px,6vw,74px) 0 clamp(26px,3.5vw,42px);
    background:linear-gradient(180deg, #f7f8fc 0%, var(--white) 100%); border-bottom:1px solid var(--line); }
  .subhero .back{ display:inline-block; font-size:14px; font-weight:700; color:var(--ink-faint); margin-bottom:18px; }
  .subhero .back:hover{ color:var(--blue); }
  .subhero .kicker{ display:block; margin-bottom:12px; }
  .subhero h1{ font-size:clamp(34px,5.2vw,62px); font-weight:800; line-height:1.06; letter-spacing:-.03em; max-width:16ch; }
  .subhero .lede{ margin-top:22px; max-width:64ch; font-size:clamp(16.5px,1.5vw,19.5px); color:var(--ink-dim); line-height:1.66; }
  .sub .subsec{ padding-block:clamp(38px,5vw,64px); }
  .sub .subsec.soft{ background:var(--bg-soft); border-block:1px solid var(--line); }
  .sub .subsec h2{ font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:-.02em; margin-bottom:22px; }
  .sub .subsec p{ color:var(--ink-dim); line-height:1.72; max-width:70ch; margin-bottom:14px; }
  .sub .subsec > .wrap, .subhero .wrap{ max-width:var(--maxw); }
  .sub p.muted{ color:var(--ink-faint); font-size:15px; }
  .sub p.todo{ background:#fff8e6; border:1px solid #f0dca6; border-radius:14px; padding:16px 18px; color:#6b5620; max-width:none; }
  .ticks{ display:grid; gap:12px; margin:4px 0 6px; list-style:none; padding:0; }
  .ticks li{ position:relative; padding-left:30px; color:var(--ink-dim); line-height:1.6; max-width:70ch; }
  .ticks li::before{ content:''; position:absolute; left:0; top:4px; width:18px; height:18px; border-radius:50%;
    background:var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.6' stroke='%232f5bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
  .numsteps{ counter-reset:ns; display:grid; gap:18px; list-style:none; padding:0; }
  .numsteps li{ counter-increment:ns; position:relative; padding-left:56px; }
  .numsteps li::before{ content:counter(ns,decimal-leading-zero); position:absolute; left:0; top:0; font-weight:800; font-size:14px; color:var(--blue);
    width:38px; height:38px; border-radius:50%; background:var(--blue-soft); display:flex; align-items:center; justify-content:center; }
  .numsteps b{ display:block; font-size:17.5px; font-weight:800; margin-bottom:4px; }
  .numsteps span{ color:var(--ink-dim); line-height:1.65; }
  .compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .cbox{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px; }
  .cbox.best{ border-color:rgba(47,91,255,.32); box-shadow:0 18px 40px -26px rgba(47,91,255,.5); }
  .cbox h3{ font-size:18px; font-weight:800; margin-bottom:16px; }
  @media (max-width:760px){ .compare{ grid-template-columns:1fr; } }
  .subcta{ padding-block:clamp(46px,6vw,78px); text-align:center; background:var(--black); color:#fff; }
  .subcta h2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-.02em; }
  .subcta p{ color:rgba(255,255,255,.66); margin:14px auto 26px; max-width:52ch; }
  .subcta .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .subcta .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
  .portrait-row{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(24px,4vw,56px); align-items:center; }
  .portrait-img img{ width:100%; border-radius:26px; display:block; box-shadow:0 30px 60px -34px rgba(10,16,60,.55); }
  .portrait-text h2{ margin-bottom:18px; }
  @media (max-width:820px){ .portrait-row{ grid-template-columns:1fr; } }
  .contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .ccard{ display:block; background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px 24px;
    transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
  .ccard:hover{ transform:translateY(-4px); border-color:rgba(47,91,255,.32); box-shadow:0 18px 40px -26px rgba(47,91,255,.5); }
  .ccard .ci{ display:block; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px; }
  .ccard b{ display:block; font-size:19px; font-weight:800; margin-bottom:6px; }
  .ccard .cs{ font-size:14.5px; color:var(--ink-dim); }
  @media (max-width:820px){ .contact-cards{ grid-template-columns:1fr; } }
  
  
  
  
  @keyframes subUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  
  .nav-drop{ position:relative; }
  .nav-drop > a::after{ content:'⌄'; font-size:12px; margin-left:5px; opacity:.6; }
  .drop{ position:absolute; top:100%; left:50%; translate:-50% 0; padding-top:14px; opacity:0; visibility:hidden;
    transform:translateY(6px); transition:opacity .25s ease, transform .25s ease, visibility .25s; }
  .nav-drop:hover .drop, .nav-drop:focus-within .drop{ opacity:1; visibility:visible; transform:none; }
  .drop-in{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; min-width:250px;
    box-shadow:0 26px 50px -28px rgba(10,16,60,.5); display:grid; gap:2px; }
  .drop-in a{ display:block; padding:11px 14px; border-radius:12px; font-size:15px; font-weight:700; color:var(--ink); }
  .drop-in a span{ display:block; font-size:13px; font-weight:500; color:var(--ink-faint); margin-top:2px; }
  .drop-in a:hover{ background:var(--blue-soft); color:var(--blue-deep); }


  .projshot{ margin-bottom:22px; }
  .projshot img{ display:block; width:100%; height:auto; }
  .projmeta{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .projmeta div{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
  .projmeta span{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
  .projmeta b{ font-size:15px; font-weight:700; line-height:1.45; }
  .projmeta a{ color:var(--blue); }
  @media (max-width:760px){ .projmeta{ grid-template-columns:1fr; } }
  .projnav{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .projnav a{ display:block; }
  .projnav a.r{ text-align:right; margin-left:auto; }
  .projnav span{ display:block; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px; }
  .projnav b{ font-size:19px; font-weight:800; }
  .projnav a:hover b{ color:var(--blue); }
  .plink{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:800; font-size:15px; color:var(--blue); }
  .plink:hover .arw{ transform:translateX(4px); }
  .sub .subsec .tags{ margin-top:18px; }


  /* ---------- Menü für kleine Bildschirme ---------- */
  .burger{ display:none; width:46px; height:46px; border-radius:14px; border:1px solid var(--line); background:#fff;
    flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; flex:none; }
  .burger span{ display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s ease, opacity .25s ease; }
  body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2){ opacity:0; }
  body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mmenu{ position:fixed; inset:0; z-index:55; background:rgba(255,255,255,.97); backdrop-filter:blur(18px);
    overflow-y:auto; padding:96px 22px 48px; animation:mmIn .28s ease both; }
  .mmenu[hidden]{ display:none; }
  @keyframes mmIn{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
  .mm-in{ display:grid; gap:4px; max-width:520px; margin:0 auto; }
  .mm-h{ font-size:11.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:22px 0 6px; }
  .mm-in > a{ font-size:19px; font-weight:700; padding:11px 0; border-bottom:1px solid var(--line); }
  .mm-in > a:active{ color:var(--blue); }
  .mm-cta{ margin-top:26px; justify-content:center; border-bottom:0 !important; }
  .mm-legal{ display:flex; gap:20px; margin-top:26px; }
  .mm-legal a{ font-size:14px; font-weight:600; color:var(--ink-faint); }
  body.menu-open{ overflow:hidden; }
  @media (max-width:880px){
    .burger{ display:flex; }
    .nav-cta{ display:none; }
    .brand{ font-size:15.5px; }
    .brand img{ width:30px; height:30px; }
    .nav-row{ gap:12px; }
    .float-cta{ right:14px; bottom:14px; padding:12px 18px; font-size:14px; }
  }
  @media (max-width:420px){
    .brand{ font-size:14px; gap:8px; }
  }


  .wgrid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .wcard{ display:block; transition:transform .4s cubic-bezier(.2,.8,.25,1); }
  .wcard:hover{ transform:translateY(-6px); }
  .wcard .pmini img{ width:100%; aspect-ratio:16/9.6; object-fit:cover; object-position:top center; display:block; }
  .wcard .wmeta{ display:flex; flex-direction:column; }
  .wmeta{ padding:18px 4px 0; }
  .wmeta b{ display:block; font-size:19px; font-weight:800; }
  .wmeta span{ display:block; font-size:14.5px; color:var(--ink-dim); margin-top:4px; }
  .wmeta em{ display:inline-block; font-style:normal; font-size:12.5px; font-weight:800; letter-spacing:.06em;
    color:var(--blue-deep); background:var(--blue-soft); border-radius:999px; padding:5px 12px; margin-top:12px; }
  .wgrid.drei{ grid-template-columns:repeat(3,1fr); gap:20px; }
  @media (max-width:980px){ .wgrid.drei{ grid-template-columns:1fr 1fr; } }
  @media (max-width:820px){ .wgrid{ grid-template-columns:1fr; } }
  @media (max-width:820px){ .wgrid.drei{ grid-template-columns:1fr; } }


  .linkrow{ display:grid; gap:12px; }
  .linkrow a{ display:block; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 20px;
    transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s ease, box-shadow .3s ease; }
  .linkrow a:hover{ transform:translateY(-3px); border-color:rgba(47,91,255,.32); box-shadow:0 16px 34px -24px rgba(47,91,255,.5); }
  .linkrow b{ display:block; font-size:17px; font-weight:800; }
  .linkrow span{ display:block; font-size:14.5px; color:var(--ink-dim); margin-top:3px; }


  .cbox:not(.best) .ticks li::before{ background:#eef0f6; }
  .cbox:not(.best) .ticks li::after{ content:''; position:absolute; left:5px; top:12px; width:8px; height:2px; border-radius:2px; background:#9aa0b0; }


  /* Barrierefreiheit: größere Klickflächen, sichtbarer Fokus */
  .plink{ padding:10px 0; min-height:44px; }
  .subhero .back{ display:inline-block; padding:10px 0; min-height:44px; }
  .mm-legal a{ padding:10px 0; display:inline-block; }
  .foot-col a{ padding:7px 0; display:block; min-height:26px; }
  .nav-links > a{ display:inline-flex; align-items:center; padding-block:8px; min-height:30px; }
  .foot-bottom span{ padding-block:4px; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible{
    outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
  .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; font-weight:700;
    padding:12px 20px; border-radius:0 0 14px 0; }
  .skip:focus{ left:0; }


  /* Formular: Pflichtfelder, Fehler, Erfolg */
  .field .req{ color:var(--blue); }
  .field .hint{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
  .field .err{ display:block; font-size:13px; font-weight:600; color:#b3261e; margin-top:6px; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#b3261e; background:#fff6f5; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .sent{ max-width:620px; margin:34px auto 0; text-align:center; background:#fff; border:1px solid var(--line);
    border-radius:26px; padding:36px 30px; box-shadow:0 26px 50px -34px rgba(10,16,60,.4); animation:subUp .5s cubic-bezier(.2,.8,.25,1) both; }
  .sent[hidden]{ display:none; }
  .sent-ico{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--blue-soft); color:var(--blue);
    display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; }
  .sent h3{ font-size:24px; font-weight:800; margin-bottom:10px; }
  .sent p{ color:var(--ink-dim); margin-bottom:22px; }
  .sent .hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }



  /* ================= Megamenü ================= */
  .nav{ position:sticky; top:0; z-index:60; }
  .nav-links{ display:flex; gap:26px; align-items:center; }
  .nav-trigger{ position:relative; display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
    font-family:inherit; font-size:14.5px; font-weight:600; color:var(--ink-dim); padding:8px 0; transition:color .25s;
    text-decoration:none; appearance:none; }
  .nav-trigger:hover, .nav-trigger[aria-expanded="true"]{ color:var(--ink); }
  .nchev{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px); transition:transform .3s ease; opacity:.55; }
  .nav-trigger[aria-expanded="true"] .nchev{ transform:rotate(-135deg) translate(-3px,-3px); opacity:1; }
  .nav-trigger::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--blue);
    transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.2,.8,.25,1); }
  .nav-trigger:hover::after, .nav-trigger[aria-expanded="true"]::after{ transform:scaleX(1); transform-origin:left; }

  .mega-wrap{ position:absolute; left:0; right:0; top:100%; }
  .mega{ position:absolute; left:0; right:0; top:0; background:#fff; backdrop-filter:saturate(180%) blur(22px);
    border-bottom:1px solid var(--line); box-shadow:0 30px 60px -34px rgba(10,16,60,.45);
    opacity:0; transform:translateY(-10px); pointer-events:none; transition:opacity .28s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
  .mega[hidden]{ display:none; }
  .mega.offen{ opacity:1; transform:none; pointer-events:auto; }
  .mega-in{ display:grid; grid-template-columns:1fr 1fr 1fr 1.15fr; gap:34px; padding-block:34px 38px; align-items:start; }
  .mega-arbeiten .mega-in, .mega-arbeiten.mega-in{ grid-template-columns:2.6fr 1fr; }
  .mega-ratgeber.mega-in{ grid-template-columns:1fr 1fr 1.15fr; }
  .mega-h{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-faint); margin-bottom:14px; }
  .mlink{ display:flex; gap:13px; align-items:center; padding:9px; margin:-9px -9px 2px; border-radius:16px;
    transition:background .25s ease, transform .25s cubic-bezier(.2,.8,.25,1); }
  .mlink:hover{ background:var(--blue-soft); transform:translateX(3px); }
  .mthumb{ flex:none; width:62px; height:46px; border-radius:11px; overflow:hidden; background:var(--bg-soft);
    box-shadow:0 6px 16px -10px rgba(10,16,60,.5); display:flex; align-items:center; justify-content:center; }
  .mthumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .mthumb-ico{ color:#fff; }
  .mthumb-ico svg{ width:22px; height:22px; }
  .mthumb-ico.t1{ background:linear-gradient(135deg, var(--blue), #6f86ff); }
  .mthumb-ico.t2{ background:linear-gradient(135deg, #0f172a, #38507f); }
  .mthumb-ico.t3{ background:linear-gradient(135deg, #0f172a, #2f5bff); }
  .mtxt{ display:block; min-width:0; }
  .mtxt b{ display:block; font-size:15.5px; font-weight:800; line-height:1.25; }
  .mtxt em{ display:block; font-style:normal; font-size:13px; color:var(--ink-dim); margin-top:3px; line-height:1.4; }

  .mcards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .mcard{ display:block; border-radius:18px; overflow:hidden; background:#fff; border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease, border-color .3s ease; }
  .mcard:hover{ transform:translateY(-4px); border-color:rgba(47,91,255,.3); box-shadow:0 18px 40px -26px rgba(47,91,255,.55); }
  .mcard-shot{ display:block; aspect-ratio:16/7.6; overflow:hidden; }
  .mcard-shot img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
  .mcard-txt{ display:block; padding:12px 14px 14px; }
  .mcard-txt b{ display:block; font-size:15px; font-weight:800; }
  .mcard-txt em{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-dim); margin-top:2px; }

  .mega-feature{ display:block; border-radius:22px; overflow:hidden; background:var(--bg-soft); border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease; }
  .mega-feature:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -28px rgba(10,16,60,.5); }
  .mega-feature img{ width:100%; height:128px; object-fit:cover; object-position:top center; display:block; }
  .mf-txt{ display:block; padding:16px 18px 18px; }
  .mf-kicker{ display:block; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:7px; }
  .mega-feature b{ display:block; font-size:17px; font-weight:800; }
  .mega-feature em{ display:block; font-style:normal; font-size:13.5px; color:var(--ink-dim); margin-top:5px; line-height:1.5; }
  .mf-go{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-weight:800; font-size:14px; color:var(--blue); }
  .mega-feature:hover .arw{ transform:translateX(4px); }
  .mega-feature-dunkel{ background:var(--black); border-color:var(--black); }
  .mega-feature-dunkel b{ color:#fff; }
  .mega-feature-dunkel em{ color:rgba(255,255,255,.62); }
  .mega-feature-dunkel .mf-kicker{ color:#8fa9ff; }
  .mega-feature-dunkel .mf-go{ color:#fff; }

  body.mega-offen .nav{ background:#fff; }
  .mega-schatten{ position:fixed; inset:0; top:0; background:rgba(10,16,60,.18); opacity:0; pointer-events:none;
    transition:opacity .3s ease; z-index:50; }
  body.mega-offen .mega-schatten{ opacity:1; }
  @media (prefers-reduced-motion:reduce){ .mega{ transition:none; } }
  @media (max-width:1180px){ .nav-links{ gap:18px; } .mega-in{ gap:22px; } }

  /* ---------- Mobiles Menü mit Gruppen ---------- */
  .mgroup{ border-bottom:1px solid var(--line); }
  .mgroup-top{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:none; border:0; cursor:pointer; font-family:inherit; font-size:18px; font-weight:800; color:var(--ink);
    padding:16px 2px; text-align:left; }
  .mgroup-top .nchev{ width:10px; height:10px; transform:rotate(45deg); transition:transform .3s ease; }
  .mgroup.open .mgroup-top .nchev{ transform:rotate(-135deg); }
  .mgroup-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.2,.8,.25,1); }
  .mgroup-body > *{ overflow:hidden; }
  .mgroup.open .mgroup-body{ grid-template-rows:1fr; }
  .mgroup-body .mlink{ margin:0 0 8px; padding:8px; border-radius:14px; border-bottom:0; }
  .mgroup-body .mlink:first-child{ margin-top:2px; }
  .mgroup-body .mlink:last-child{ margin-bottom:14px; }
  .mm-in > a.btn{ margin-top:24px; }

  @media (max-width:880px){
    .nav-links{ display:none; }
    .mega-wrap{ display:none; }
    .mega-schatten{ display:none; }
  }


/* =====================================================================
   Version 1.9: Brotkrumen, Seitenkopf mit Handlung und Bild, Zitate,
   Kartenraster, Landingpages, Danke Seite, Einwilligungshinweis
   ===================================================================== */

  /* Brotkrumen */
  .crumbs ol{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 0; font-size:13.5px; font-weight:600; color:var(--ink-faint); }
  .crumbs li{ display:inline-flex; align-items:center; }
  .crumbs li + li::before{ content:''; width:5px; height:5px; margin:0 10px; border-right:1.6px solid #b4b9c6; border-top:1.6px solid #b4b9c6; transform:rotate(45deg); }
  .crumbs a{ display:inline-block; padding:10px 0; color:var(--ink-dim); }
  .crumbs a:hover{ color:var(--blue); }
  .crumbs [aria-current]{ color:var(--ink-faint); max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Seitenkopf: Handlung und Vertrauen direkt unter dem Einstieg */
  .subhero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
  .subhero-cta .btn svg{ flex:none; }
  .trustline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:18px; font-size:14px; color:var(--ink-dim); }
  .trustline .stars{ color:var(--star); letter-spacing:1.5px; font-size:14px; }
  .trustline b{ color:var(--ink); font-weight:800; }
  .trustline .sep{ width:4px; height:4px; border-radius:50%; background:#c5c9d4; }
  .sub .subhero .trustline{ margin-bottom:0; }

  .subhero.mit-bild{ padding-bottom:clamp(34px,5vw,64px); overflow:hidden; }
  .subhero.mit-bild .wrap{ max-width:var(--maxw); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(30px,5vw,70px); align-items:center; }
  .subhero.mit-bild h1{ max-width:none; font-size:clamp(34px,4.3vw,58px); }
  .subhero-bild{ position:relative; display:block; padding:0 0 34px 0; }
  .subhero-bild .pmini{ display:block; transform:perspective(1400px) rotateY(-9deg) rotateX(3deg); transform-origin:left center;
    box-shadow:0 40px 80px -40px rgba(10,16,60,.55), 0 0 0 1px rgba(10,16,60,.06); transition:transform .8s cubic-bezier(.2,.8,.25,1); }
  .subhero-bild:hover .pmini{ transform:perspective(1400px) rotateY(-4deg) rotateX(1deg); }
  .subhero-bild .pmini img{ aspect-ratio:16/10; object-fit:cover; object-position:top center; }
  .subhero-handy{ position:absolute; right:-6px; bottom:0; width:24%; min-width:92px; border-radius:22px; overflow:hidden; background:#0e1016;
    border:5px solid #0e1016; box-shadow:0 30px 60px -24px rgba(10,16,60,.6); }
  .subhero-handy img{ width:100%; height:auto; display:block; border-radius:16px; }
  .subhero-bild-zeile{ position:absolute; left:12px; bottom:0; font-size:13px; font-weight:700; color:var(--ink-dim); }
  .subhero-bild-zeile .arw{ display:inline-block; transition:transform .3s ease; }
  .subhero-bild:hover .subhero-bild-zeile{ color:var(--blue); }
  .subhero-bild:hover .subhero-bild-zeile .arw{ transform:translateX(4px); }
  @media (max-width:900px){
    .subhero.mit-bild .wrap{ grid-template-columns:1fr; }
    .subhero-bild{ max-width:560px; }
    .subhero-bild .pmini{ transform:none; }
  }
  @media (prefers-reduced-motion:reduce){ .subhero-bild .pmini{ transform:none; transition:none; } }

  /* Zweispaltige Abschnitte, damit nicht 5 gleiche Blöcke untereinander stehen */
  .sub .subsec > .wrap.split{ max-width:var(--maxw); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:start; }
  .split .split-kopf h2{ margin-bottom:16px; }
  .split .split-kopf p:last-child{ margin-bottom:0; }
  .split .split-inhalt{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:clamp(22px,3vw,34px); box-shadow:0 24px 50px -40px rgba(10,16,60,.4); }
  .soft .split .split-inhalt{ box-shadow:none; }
  @media (max-width:860px){ .sub .subsec > .wrap.split{ grid-template-columns:1fr; } }

  /* Kartenraster */
  .kartengrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:6px; }
  .kartengrid.drei{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .karte{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 24px 22px; }
  .soft .karte{ border-color:#e3e6ee; }
  .karte-nr{ display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:11px; background:var(--blue-soft); color:var(--blue-deep); font-size:13px; font-weight:800; margin-bottom:14px; }
  .karte h3{ font-size:18px; font-weight:800; letter-spacing:-.015em; margin-bottom:8px; }
  .sub .subsec .karte p, .lp .karte p{ margin:0; font-size:15.5px; line-height:1.65; color:var(--ink-dim); }
  @media (max-width:980px){ .kartengrid.drei{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:640px){ .kartengrid, .kartengrid.drei{ grid-template-columns:1fr; } }

  /* Zitat aus einer echten Bewertung */
  .subsec.zitat .wrap{ max-width:880px; }
  .quote{ margin:0; background:var(--black); color:#fff; border-radius:28px; padding:clamp(28px,4.4vw,52px); position:relative; overflow:hidden; }
  .quote::before{ content:'\201C'; position:absolute; right:30px; bottom:-120px; font-family:var(--font-accent); font-style:italic; font-weight:900; font-size:220px; line-height:1; color:rgba(143,169,255,.14); }
  .quote .stars{ color:#f2b63c; letter-spacing:3px; font-size:17px; }
  .quote blockquote{ margin:14px 0 0; }
  .sub .subsec .quote blockquote p, .lp .quote blockquote p{ color:#fff; font-size:clamp(19px,2.1vw,25px); line-height:1.5; font-weight:600; letter-spacing:-.01em; max-width:none; margin:0; }
  .quote figcaption{ display:flex; align-items:center; gap:12px; margin-top:24px; font-size:14px; color:rgba(255,255,255,.7); }
  .quote figcaption b{ color:#fff; font-size:15px; }
  .quote .av{ width:42px; height:42px; flex:none; border-radius:50%; background:rgba(143,169,255,.18); color:#c9d5ff; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .sub .subsec p.quote-note, .lp p.quote-note{ margin:14px 0 0; font-size:13.5px; color:var(--ink-faint); text-align:center; max-width:none; }

  /* Handlungsband mitten auf der Seite */
  .sub .subsec.band-cta{ padding-block:clamp(20px,3vw,34px); }
  .band-cta .wrap{ max-width:1000px; }
  .bcta{ position:relative; overflow:hidden; display:flex; align-items:center; gap:18px 24px; flex-wrap:wrap; color:#fff; border-radius:28px; padding:28px 30px;
    background:radial-gradient(420px 220px at 90% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(360px 200px at 0% 100%, rgba(14,165,233,.35), transparent 70%), var(--g-marke);
    box-shadow:0 30px 60px -34px rgba(80,60,255,.8); }
  .bcta-sym{ flex:none; width:54px; height:54px; border-radius:16px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); }
  .bcta-text{ flex:1 1 280px; }
  .sub .subsec .bcta h2{ font-size:clamp(20px,2.2vw,24px); margin:0 0 4px; color:#fff; }
  .sub .subsec .bcta p{ margin:0; font-size:15.5px; color:rgba(255,255,255,.86); }
  .bcta-knoepfe{ display:flex; gap:10px; flex-wrap:wrap; }
  .btn-hell{ background:#fff; color:var(--blue-deep); box-shadow:0 14px 30px -16px rgba(10,10,40,.5); }
  .btn-hell::before{ content:''; position:absolute; inset:0; z-index:-1; background:#eef2ff; transform:translateY(102%); transition:transform .45s cubic-bezier(.3,.8,.3,1); }
  .btn-hell:hover::before{ transform:none; }
  .btn-glas{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); }
  .btn-glas:hover{ background:rgba(255,255,255,.2); }
  .btn-glas .kico{ color:#fff; }
  @media (max-width:600px){ .bcta{ padding:22px 20px; } .bcta-knoepfe, .bcta-knoepfe .btn{ width:100%; } }

  /* Projektkarten */
  .wgrid.eins{ grid-template-columns:1fr; max-width:760px; }
  .wcard-still:hover{ transform:none; }
  .sub .subsec .lede, .lp .subsec .lede{ margin-bottom:26px; }

  /* Formular: Hinweise */
  .formfehler{ max-width:620px; margin:24px auto 0; padding:14px 18px; border-radius:14px; background:#fdecea; color:#8c1d18; font-weight:600; font-size:15px; text-align:left; }
  .formfehler a{ color:#8c1d18; text-decoration:underline; }
  .field .opt{ font-weight:500; color:var(--ink-faint); }
  .field .hint{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:6px; }
  .field .err{ display:block; font-size:13px; color:#b3261e; font-weight:600; margin-top:6px; }
  .field .err[hidden], .field .hint[hidden]{ display:none; }
  .field label.consent{ display:flex; gap:10px; align-items:flex-start; font-weight:500; font-size:13.5px; line-height:1.55; }
  .field label.consent a{ color:var(--blue); text-decoration:underline; }
  .field [aria-invalid="true"]{ border-color:#b3261e; }
  .form button[disabled]{ opacity:.7; cursor:progress; }
  .sub .form{ margin-left:0; }

  /* Kontaktseite */
  .kontakt-form .wrap{ max-width:880px; }
  .kontakt-form .form{ max-width:none; margin-top:10px; }

  /* Danke Seite */
  .danke-ico{ width:58px; height:58px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; margin-bottom:22px; box-shadow:0 18px 36px -16px rgba(47,91,255,.7); }

  /* ------------------------------------------------------------ Landingpages */
  .lp-body{ background:#fff; }
  .lp-kopf{ position:relative; z-index:5; border-bottom:1px solid var(--line); background:#fff; }
  .lp-kopf-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; min-height:62px; }
  .lp-kopf-info{ font-size:14px; color:var(--ink-dim); }
  .lp-kopf-info .stars{ color:var(--star); letter-spacing:1px; }
  .lp-kopf-info b{ color:var(--ink); }
  .lp-kopf-cta{ padding:10px 18px; }

  .lp-hero{ position:relative; overflow:hidden; background:linear-gradient(180deg,#f3f5fc 0%,#fff 100%); padding-block:clamp(30px,5vw,70px) clamp(36px,5vw,70px); }
  .lp-hero::before{ content:''; position:absolute; width:720px; height:720px; right:-240px; top:-320px; border-radius:50%; background:radial-gradient(circle, rgba(47,91,255,.16), rgba(47,91,255,0) 65%); pointer-events:none; }
  .lp-hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,64px); align-items:start; }
  .lp-hero h1{ font-size:clamp(34px,5vw,60px); line-height:1.05; margin-top:14px; max-width:15ch; }
  .lp-hero .lede{ margin-top:20px; font-size:clamp(16.5px,1.5vw,19px); color:var(--ink-dim); line-height:1.65; max-width:56ch; }
  .lp-punkte{ list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; }
  .lp-punkte li{ position:relative; padding-left:28px; font-weight:600; font-size:15.5px; line-height:1.45; color:var(--ink); }
  .lp-punkte li::before{ content:''; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%;
    background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
  .lp-hero-cta{ display:none; margin-top:24px; }
  .lp-formkarte{ background:#fff; border:1px solid var(--line); border-radius:28px; padding:clamp(22px,3vw,32px); box-shadow:0 40px 80px -46px rgba(10,16,60,.5); scroll-margin-top:20px; }
  .lp-formkarte h2{ font-size:24px; letter-spacing:-.02em; }
  .lp-formkarte > p{ margin-top:8px; font-size:15px; color:var(--ink-dim); line-height:1.6; }
  .lp-formkarte .form{ margin:18px 0 0; max-width:none; gap:12px; }
  .lp-formkarte .form .btn{ justify-self:stretch; width:100%; }
  .lp-formkarte .field textarea{ min-height:84px; }
  @media (max-width:900px){
    .lp-hero-grid{ grid-template-columns:1fr; }
    .lp-hero-cta{ display:inline-flex; }
  }
  @media (max-width:520px){ .lp-punkte{ grid-template-columns:1fr; } .lp-kopf-info{ font-size:13px; } }

  .lp-logos{ padding-block:26px 8px; }
  .lp-logos .band-label{ text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
  .lp-logoreihe{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:18px 42px; margin-top:18px; }
  .lp-logoreihe img{ height:40px; width:auto; object-fit:contain; filter:grayscale(1); opacity:.72; }

  .lp .subsec{ padding-block:clamp(40px,5.5vw,70px); }
  .lp .subsec.soft{ background:var(--bg-soft); border-block:1px solid var(--line); }
  .lp .subsec > .wrap{ max-width:var(--maxw); }
  .lp .subsec p{ max-width:70ch; }
  .lp .subsec .wgrid{ max-width:980px; }
  .lp .subsec.zitat > .wrap{ max-width:880px; }
  .lp .kartengrid{ max-width:980px; }
  .lp .subsec > .wrap.narrow{ max-width:var(--maxw); }
  .lp .faq{ margin-left:0; }
  .lp-ablauf{ max-width:860px; }
  .lp-kopf .brand{ white-space:nowrap; }
  .lp-kopf-info{ white-space:nowrap; }
  @media (max-width:420px){ .lp-kopf-zusatz{ display:none; } }
  .lp .subsec h2{ font-size:clamp(25px,3vw,36px); letter-spacing:-.02em; margin-bottom:22px; }
  .lp .subsec p{ color:var(--ink-dim); line-height:1.7; }

  .lp-ablauf{ list-style:none; padding:0; margin:0; display:grid; gap:14px; counter-reset:none; }
  .lp-ablauf li{ display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:22px; padding:20px 22px; }
  .lp-ablauf-nr{ flex:none; width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .lp-ablauf h3{ font-size:18px; font-weight:800; margin:6px 0 4px; }
  .lp .lp-ablauf p, .sub .subsec .lp-ablauf p{ margin:0; font-size:15.5px; }

  .lp-schluss{ background:var(--black); color:#fff; text-align:center; padding-block:clamp(50px,7vw,90px); }
  .lp-schluss h2{ font-size:clamp(28px,4vw,46px); line-height:1.1; max-width:20ch; margin:0 auto; }
  .lp-schluss p{ margin:16px auto 28px; max-width:50ch; color:rgba(255,255,255,.7); }

  .lp-fuss{ background:var(--bg-soft); padding-block:22px 90px; font-size:13.5px; color:var(--ink-faint); }
  .lp-fuss-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; align-items:center; }
  .lp-fuss nav{ display:flex; gap:20px; }
  .lp-fuss a{ display:inline-block; padding:8px 0; color:var(--ink-dim); font-weight:600; }
  @media (min-width:901px){ .lp-fuss{ padding-bottom:26px; } }

  .lp-sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:80; display:none; align-items:center; justify-content:center; gap:8px;
    background:var(--blue); color:#fff; font-weight:800; font-size:16px; padding:15px 20px; border-radius:16px; box-shadow:0 18px 40px -14px rgba(47,91,255,.75);
    transform:translateY(140%); transition:transform .35s cubic-bezier(.2,.8,.25,1); }
  .lp-sticky.an{ transform:none; }
  @media (max-width:900px){ .lp-sticky{ display:flex; } }
  @media (prefers-reduced-motion:reduce){ .lp-sticky{ transition:none; } }

  /* Einwilligungshinweis, nur wenn eine Messkennung eingetragen ist */
  .einw{ position:fixed; left:16px; bottom:16px; z-index:120; max-width:440px; background:#fff; border:1px solid var(--line); border-radius:20px; padding:18px 20px;
    box-shadow:0 30px 70px -30px rgba(10,16,60,.55); font-size:14.5px; color:var(--ink-dim); line-height:1.55; }
  .einw b{ color:var(--ink); }
  .einw a{ color:var(--blue); text-decoration:underline; }
  .einw-knoepfe{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
  .einw .btn{ padding:11px 14px; font-size:14.5px; }
  @media (max-width:520px){ .einw{ left:10px; right:10px; bottom:10px; max-width:none; } }

  /* Startseite: Kontaktbereich mit Formular */
  .cta-oder{ margin-top:34px; font-size:15px; color:var(--ink-faint); }
  #kontakt .cta-wrap p.cta-oder{ margin-top:34px; font-size:15px; }
  .plink-hell{ color:#8fa9ff; }
  .plink-hell:hover{ color:#fff; }

  /* Einheitliche linke Kante auf Unterseiten */
  .sub .subsec .faq{ margin-left:0; max-width:840px; }
  .sub .subsec .linkrow{ max-width:760px; }
  .sub .subsec .ticks, .sub .subsec .numsteps{ max-width:760px; }
  .split .split-inhalt .ticks, .split .split-inhalt .numsteps{ max-width:none; }
  .sub .subsec .compare{ max-width:900px; }
  .sub .subsec .wgrid{ max-width:980px; }
  .sub .subsec .kartengrid{ max-width:980px; }
  @media (min-width:861px){ .split .split-kopf{ position:sticky; top:110px; } }
  .sub .subsec.zitat > .wrap, .sub .subsec.band-cta > .wrap{ max-width:880px; }
  .subsec p.hinweis{ max-width:760px; }
  .split-inhalt .split-titel{ font-size:17px; font-weight:800; margin-bottom:14px; }
  /* Logoprobe auf der Grafikseite */
  .logo-probe-quer{ width:100%; max-width:360px; height:auto; }
  .logo-probe-reihe{ display:flex; align-items:flex-end; gap:22px; margin:22px 0 24px; padding:18px 20px; border-radius:18px; background:var(--bg-soft); }
  .logo-probe-reihe img{ border-radius:22%; }
  .sub .subsec .karte p.preis, .karte p.preis{ margin:0 0 8px; font-size:17px; font-weight:800; color:var(--blue-deep); letter-spacing:-.01em; }
  .kennzahl{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; background:#fff; border:1px solid rgba(47,91,255,.28); border-radius:22px; padding:22px 24px; margin-bottom:18px; box-shadow:0 18px 40px -30px rgba(47,91,255,.6); max-width:760px; }
  .kennzahl b{ font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; color:var(--blue); line-height:1; }
  .kennzahl span{ font-size:16px; color:var(--ink-dim); flex:1 1 240px; }
  .foot-adr a{ display:inline-block; padding:4px 0; min-height:26px; }
  .projmeta a{ display:inline-block; padding:4px 0; min-height:26px; }
  .sub .subsec h2, .lp .subsec h2{ line-height:1.2; }
  @media (max-width:640px){ .quote::before{ display:none; } }
  /* Kein seitliches Verschieben auf dem Handy, auch nicht in Safari */
  .proc{ overflow-x:clip; }
  @media (max-width:560px){ .crumbs li:last-child{ display:none; } }
  .trustline{ gap:6px 16px; }
  .trustline .tl-item{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
  .trustline .tick{ width:17px; height:17px; border-radius:50%; background:var(--blue-soft); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; }

  /* Fakten auf einen Blick, gleiche Liste wie in /llms.txt */
  .fakten{ margin-top:34px; padding:26px 28px; border:1px solid var(--line); border-radius:22px; background:#fff; }
  .fakten h2{ font-size:clamp(22px,2.4vw,28px); margin:0 0 14px; }
  .fakten dl{ margin:0; display:grid; gap:0; }
  .fakten .fakt{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:6px 18px; padding:11px 0; border-top:1px solid var(--line); }
  .fakten .fakt:first-child{ border-top:0; }
  .fakten dt{ font-weight:800; color:var(--ink); font-size:15px; }
  .fakten dd{ margin:0; color:var(--ink-dim); font-size:15.5px; line-height:1.55; }
  @media (max-width:560px){ .fakten{ padding:20px 18px; } .fakten .fakt{ grid-template-columns:1fr; gap:2px; } }

  /* Eigenes Logo von Maxi statt Kachel */
  .brand img.brand-logo{ width:auto; height:40px; border-radius:0; display:block; }
  @media (max-width:760px){ .brand img.brand-logo{ height:34px; } }
  footer .brand img.brand-logo{ height:44px; }
  .curtain img{ width:98px; height:64px; border-radius:0; }
  .logo-probe-reihe img{ border-radius:0; height:auto; }

  /* Kontaktkanäle mit Symbol */
  .kico{ flex:none; display:inline-block; vertical-align:middle; width:auto; height:auto; }
  .btn .lbl .kico{ margin-right:1px; }
  .knopf-whatsapp.btn-ghost .kico{ color:#1f9e4f; }
  .knopf-instagram.btn-ghost .kico{ color:#c13584; }
  .knopf-mail.btn-ghost .kico{ color:var(--blue); }
  .subcta .btn-ghost .kico{ color:#fff; }
  .ccard .ci{ display:inline-flex; align-items:center; gap:8px; }
  .ccard-whatsapp .ci .kico{ color:#1f9e4f; }
  .ccard-instagram .ci .kico{ color:#c13584; }
  .ccard-mail .ci .kico{ color:var(--blue); }
  .foot-col a.foot-kanal{ display:flex !important; align-items:center; gap:8px; }
  .foot-kanal .kico{ color:var(--ink-dim); }

/* =====================================================================
   Gestaltung 2.0: mehr Farbe, Symbole und Bewegung, weniger Fließtext
   ===================================================================== */
  :root{
    --violett:#7c4dff; --cyan:#0ea5e9; --gruen:#16a34a; --orange:#f97316; --rosa:#e11d74;
    --g-blau:linear-gradient(135deg,#2f5bff 0%,#5b7cff 55%,#7c9bff 100%);
    --g-violett:linear-gradient(135deg,#6d3cff 0%,#9b6bff 100%);
    --g-cyan:linear-gradient(135deg,#0284c7 0%,#22c3f5 100%);
    --g-gruen:linear-gradient(135deg,#15803d 0%,#34c46b 100%);
    --g-orange:linear-gradient(135deg,#ea580c 0%,#fbab24 100%);
    --g-rosa:linear-gradient(135deg,#db2777 0%,#f472b6 100%);
    --g-marke:linear-gradient(120deg,#2f5bff 0%,#7c4dff 60%,#c04dff 100%);
  }

  /* Abschnitte mit weichem Farbverlauf statt flachem Grau */
  .sub .subsec.soft{ background:
      radial-gradient(760px 360px at 0% 0%, rgba(47,91,255,.09), transparent 62%),
      radial-gradient(680px 340px at 100% 100%, rgba(124,77,255,.08), transparent 62%),
      #f7f8fc; border-block:1px solid #eceef6; }
  .sub .subsec{ position:relative; }

  /* Einblenden beim Scrollen */
  

  /* Kopf eines Abschnitts */
  .b2-kopf{ max-width:720px; margin-bottom:clamp(24px,3vw,36px); }
  .b2-kopf.mittig{ margin-inline:auto; text-align:center; }
  .b2-kicker{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
  .b2-kicker::before{ content:''; width:9px; height:9px; border-radius:50%; background:var(--g-marke); box-shadow:0 0 0 4px rgba(124,77,255,.14); }
  .sub .subsec .b2-kopf h2{ margin-bottom:12px; }
  .sub .subsec p.b2-lede{ font-size:clamp(17px,1.6vw,19px); color:var(--ink-soft); line-height:1.6; margin:0; max-width:62ch; }
  .b2-kopf.mittig p.b2-lede{ margin-inline:auto; }

  /* Symbolfläche */
  .b2-sym{ flex:none; width:50px; height:50px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; color:#fff; position:relative;
    box-shadow:0 12px 24px -12px var(--sh,rgba(47,91,255,.6)); transition:transform .5s cubic-bezier(.2,1.3,.4,1); }
  .b2-sym.klein{ width:40px; height:40px; border-radius:12px; }
  .f-blau{ background:var(--g-blau); --sh:rgba(47,91,255,.55); }
  .f-violett{ background:var(--g-violett); --sh:rgba(124,77,255,.55); }
  .f-cyan{ background:var(--g-cyan); --sh:rgba(14,165,233,.55); }
  .f-gruen{ background:var(--g-gruen); --sh:rgba(22,163,74,.5); }
  .f-orange{ background:var(--g-orange); --sh:rgba(249,115,22,.5); }
  .f-rosa{ background:var(--g-rosa); --sh:rgba(225,29,116,.45); }
  .f-grau{ background:#eceef4; color:#7a8093; box-shadow:none; }

  /* Kacheln */
  .b2-kacheln{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .b2-kacheln.sp2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .b2-kacheln.sp4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .b2-kachel{ position:relative; background:#fff; border:1px solid #e8eaf2; border-radius:22px; padding:24px 22px 22px; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
  .b2-kachel::after{ content:''; position:absolute; inset:auto -40% -60% auto; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(47,91,255,.10), transparent 70%); opacity:0; transition:opacity .4s ease; }
  .b2-kachel:hover{ transform:translateY(-5px); border-color:rgba(47,91,255,.28); box-shadow:0 22px 44px -28px rgba(30,50,140,.45); }
  .b2-kachel:hover::after{ opacity:1; }
  .b2-kachel:hover .b2-sym{ transform:rotate(-8deg) scale(1.06); }
  .b2-kachel h3{ font-size:18px; font-weight:800; letter-spacing:-.015em; margin:16px 0 6px; }
  .sub .subsec .b2-kachel p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-dim); }
  @media (max-width:980px){ .b2-kacheln, .b2-kacheln.sp4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:600px){ .b2-kacheln, .b2-kacheln.sp2, .b2-kacheln.sp4{ grid-template-columns:1fr; } .b2-kachel{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; padding:18px; } .b2-kachel .b2-sym{ grid-row:span 2; width:44px; height:44px; border-radius:13px; } .b2-kachel h3{ margin:2px 0 4px; } }

  /* Schritte als Zeitstrahl */
  .b2-schritte{ list-style:none; padding:0; margin:0; display:grid; gap:18px; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); position:relative; counter-reset:none; }
  .b2-schritte.n3{ --n:3; } .b2-schritte.n4{ --n:4; } .b2-schritte.n5{ --n:5; }
  .b2-schritte::before{ content:''; position:absolute; left:26px; right:calc(100% / var(--n,4) - 26px); top:25px; height:3px; border-radius:3px; background:#e3e7f3; }
  .b2-schritte::after{ content:''; position:absolute; left:26px; right:calc(100% / var(--n,4) - 26px); top:25px; height:3px; border-radius:3px; background:var(--g-marke); transform-origin:left; transform:scaleX(1); }
  @media (prefers-reduced-motion:no-preference){ .js .b2-schritte::after{ transform:scaleX(0); transition:transform 1.4s cubic-bezier(.6,.1,.2,1) .15s; } .js .b2-schritte.b2-an::after{ transform:scaleX(1); } .js .b2-schritte[data-b2]{ opacity:1; transform:none; } .js .b2-schritte li{ opacity:0; transform:translateY(16px); transition:opacity .6s ease calc(var(--d) + 200ms), transform .7s cubic-bezier(.2,.75,.25,1) calc(var(--d) + 200ms); } .js .b2-schritte.b2-an li{ opacity:1; transform:none; } }
  .b2-schritte li{ position:relative; z-index:1; }
  .b2-nr{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; color:#fff; background:var(--g-blau); box-shadow:0 0 0 6px #fff, 0 14px 26px -12px rgba(47,91,255,.7); margin-bottom:16px; }
  .soft .b2-nr{ box-shadow:0 0 0 6px #f7f8fc, 0 14px 26px -12px rgba(47,91,255,.7); }
  .b2-schritte li:nth-child(2) .b2-nr{ background:var(--g-violett); }
  .b2-schritte li:nth-child(3) .b2-nr{ background:var(--g-cyan); }
  .b2-schritte li:nth-child(4) .b2-nr{ background:var(--g-gruen); }
  .b2-schritte li:nth-child(5) .b2-nr{ background:var(--g-orange); }
  .b2-schritte h3{ font-size:17.5px; font-weight:800; margin-bottom:6px; letter-spacing:-.01em; }
  .sub .subsec .b2-schritte p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-dim); }
  @media (max-width:860px){
    .b2-schritte, .b2-schritte.n3, .b2-schritte.n4, .b2-schritte.n5{ grid-template-columns:1fr; gap:22px; }
    .b2-schritte::before, .b2-schritte::after{ left:25px; right:auto; top:26px; bottom:26px; width:3px; height:auto; transform-origin:top; }
    @media (prefers-reduced-motion:no-preference){ .js .b2-schritte::after{ transform:scaleY(0); } .js .b2-schritte.b2-an::after{ transform:scaleY(1); } }
    .b2-schritte li{ display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start; }
    .b2-nr{ margin:0; }
  }

  /* Haken als kleine Kacheln */
  .b2-haken{ list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .b2-haken.sp1{ grid-template-columns:1fr; }
  .b2-haken li{ display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #e8eaf2; border-radius:16px; padding:14px 16px; font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
  .b2-hk{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--g-gruen); color:#fff; display:inline-flex; align-items:center; justify-content:center; margin-top:-1px; box-shadow:0 8px 16px -8px rgba(22,163,74,.7); }
  @media (max-width:600px){ .b2-haken{ grid-template-columns:1fr; } }

  /* Hinweis mit Verlaufsrahmen */
  .b2-hinweis{ display:flex; gap:16px; align-items:flex-start; margin-top:24px; padding:20px 22px; border-radius:20px; background:linear-gradient(#fff,#fff) padding-box, var(--g-marke) border-box; border:2px solid transparent; box-shadow:0 20px 40px -30px rgba(90,60,255,.6); }
  .b2-hinweis b{ display:block; font-size:16.5px; margin-bottom:4px; }
  .sub .subsec .b2-hinweis p{ margin:0; color:var(--ink-soft); font-size:15.5px; line-height:1.6; }

  /* Vorteile als Band */
  .b2-vorteile{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
  .b2-vorteil{ display:flex; gap:13px; align-items:center; background:#fff; border:1px solid #e8eaf2; border-radius:18px; padding:16px; box-shadow:0 16px 36px -30px rgba(30,50,140,.5); }
  .b2-vorteil b{ display:block; font-size:15.5px; font-weight:800; line-height:1.3; letter-spacing:-.01em; }
  .b2-vorteil div > span{ display:block; font-size:13.5px; color:var(--ink-dim); line-height:1.4; margin-top:2px; }
  @media (max-width:980px){ .b2-vorteile{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:520px){ .b2-vorteile{ grid-template-columns:1fr; } }
  .sub .subsec.b2-band{ padding-block:clamp(20px,3vw,34px); }

  /* Vergleich */
  .b2-vergleich{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
  .b2-seite{ border-radius:24px; padding:26px 24px; background:#fff; border:1px solid #e8eaf2; }
  .b2-seite.schwach{ background:#fafbfd; }
  .b2-seite.stark{ background:linear-gradient(#fff,#fff) padding-box, var(--g-marke) border-box; border:2px solid transparent; box-shadow:0 26px 50px -34px rgba(70,60,255,.6); }
  .b2-seite-kopf{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .b2-seite h3{ font-size:19px; font-weight:800; }
  .b2-seite ul{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
  .b2-seite li{ display:flex; gap:11px; align-items:flex-start; font-size:15.5px; line-height:1.5; color:var(--ink-soft); }
  .b2-mk{ flex:none; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
  .schwach .b2-mk{ background:#fde8e8; color:#c2410c; }
  .stark .b2-mk{ background:#dcfce7; color:#15803d; }
  .sub .subsec .b2-notiz{ margin:18px 0 0; padding-top:14px; border-top:1px dashed #dfe3ee; font-size:14.5px; color:var(--ink-dim); }
  @media (max-width:760px){ .b2-vergleich{ grid-template-columns:1fr; } }

  /* Aufteilung Text und Bild */
  .b2-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,80px); align-items:center; }
  @media (max-width:900px){ .b2-split{ grid-template-columns:1fr; } }

  /* Szene: Suche auf dem Handy */
  .b2-szene{ position:relative; min-height:500px; padding-block:58px; display:flex; align-items:center; justify-content:center; }
  .b2-glow{ position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%, rgba(47,91,255,.32), rgba(124,77,255,.18) 45%, transparent 70%); filter:blur(8px); }
  .b2-handy{ position:relative; width:260px; border-radius:38px; background:#0e1016; padding:12px; box-shadow:0 40px 80px -40px rgba(14,16,40,.7), inset 0 0 0 2px #2a2d38; }
  .b2-notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:84px; height:20px; border-radius:0 0 14px 14px; background:#0e1016; z-index:2; }
  .b2-suchfeld, .b2-treffer{ background:#fff; }
  .b2-suchfeld{ border-radius:26px 26px 0 0; padding:34px 14px 12px; display:flex; align-items:center; gap:8px; color:#5f6577; font-size:12.5px; }
  .b2-suchfeld .sym{ color:var(--blue); }
  .b2-tipp{ flex:1; background:#f1f3f9; border-radius:999px; padding:8px 12px; color:#20242f; font-weight:600; white-space:nowrap; overflow:hidden; }
  .b2-karte{ position:relative; height:150px; overflow:hidden; background:
      linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px) 0 0/28px 28px,
      linear-gradient(160deg,#dfe9ff,#eaf5ee 60%,#f3efe2); }
  .b2-karte::before{ content:''; position:absolute; left:-10%; top:55%; width:120%; height:14px; background:#fff; transform:rotate(-12deg); opacity:.9; }
  .b2-karte::after{ content:''; position:absolute; left:38%; top:-10%; width:12px; height:130%; background:#fff; transform:rotate(18deg); opacity:.8; }
  .b2-pin{ position:absolute; z-index:1; color:#9aa3b8; transform:translate(-50%,-100%); }
  .b2-pin .sym{ fill:#fff; }
  .b2-pin.an{ color:var(--rosa); }
  .b2-pin.an .sym{ fill:#ffe4ef; filter:drop-shadow(0 6px 8px rgba(225,29,116,.45)); }
  .b2-treffer{ border-radius:0 0 26px 26px; padding:10px 10px 16px; display:grid; gap:8px; }
  .b2-zeile{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #eceef4; border-radius:14px; padding:9px 11px; }
  .b2-zeile b{ display:block; font-size:12.5px; color:#1b1f2a; }
  .b2-zeile div > span{ display:block; font-size:11px; color:#7a8093; }
  .b2-zeile.an{ border-color:rgba(47,91,255,.4); box-shadow:0 12px 24px -16px rgba(47,91,255,.7); background:linear-gradient(90deg,#f3f6ff,#fff); }
  .b2-ruf{ width:32px; height:32px; border-radius:50%; background:var(--g-gruen); color:#fff; display:inline-flex !important; align-items:center; justify-content:center; position:relative; }
  .b2-ruf::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(22,163,74,.5); }
  .b2-chip{ position:absolute; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #e8eaf2; border-radius:999px; padding:9px 14px; font-size:13px; font-weight:700; color:var(--ink); box-shadow:0 18px 36px -22px rgba(30,40,90,.5); white-space:nowrap; }
  .b2-chip .sym{ color:var(--violett); }
  .b2-chip.c1{ right:4%; top:6px; }
  .b2-chip.c2{ left:4%; bottom:6px; }
  .b2-chip.c2 .sym{ color:var(--rosa); }
  @media (max-width:520px){ .b2-chip.c1{ right:0; } .b2-chip.c2{ left:0; } .b2-chip{ font-size:12px; padding:8px 12px; } }
  @media (prefers-reduced-motion:no-preference){
    .js .b2-szene .b2-pin{ opacity:0; }
    .js .b2-szene.b2-an .b2-pin{ animation:b2Pin .7s cubic-bezier(.2,1.4,.4,1) var(--d) both; }
    .js .b2-szene .b2-zeile{ opacity:0; transform:translateY(10px); }
    .js .b2-szene.b2-an .b2-zeile{ animation:b2Hoch .6s cubic-bezier(.2,.8,.25,1) var(--d) both; }
    .js .b2-szene.b2-an .b2-ruf::after{ animation:b2Puls 2s ease-out 1.8s infinite; }
    .js .b2-szene .b2-chip{ opacity:0; }
    .js .b2-szene.b2-an .b2-chip.c1{ animation:b2Hoch .7s cubic-bezier(.2,.8,.25,1) 1.2s both, b2Schweben 5s ease-in-out 2s infinite; }
    .js .b2-szene.b2-an .b2-chip.c2{ animation:b2Hoch .7s cubic-bezier(.2,.8,.25,1) 1.5s both, b2Schweben 5.5s ease-in-out 2.3s infinite; }
    .js .b2-szene .b2-tipp{ clip-path:inset(0 100% 0 0); }
    .js .b2-szene.b2-an .b2-tipp{ animation:b2Tippen 1s steps(24) .2s both; }
  }
  @keyframes b2Pin{ from{ opacity:0; transform:translate(-50%,-160%) scale(.6); } to{ opacity:1; transform:translate(-50%,-100%) scale(1); } }
  @keyframes b2Hoch{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
  @keyframes b2Puls{ 0%{ box-shadow:0 0 0 0 rgba(22,163,74,.55); } 80%,100%{ box-shadow:0 0 0 14px rgba(22,163,74,0); } }
  @keyframes b2Schweben{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  @keyframes b2Tippen{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

  /* Überschrift h2 mit Farbverlauf im Akzent */
  .sub .subsec h2 .accent{ background:var(--g-marke); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; }

  /* Häufige Fragen etwas lebendiger */
  .sub .faq .qa{ border-radius:18px; }
  .sub .faq .qa[open]{ box-shadow:0 18px 40px -30px rgba(47,91,255,.55); border-color:rgba(47,91,255,.3); }

/* ---------------------------------------------------------------------
   Lebendige Symbole: jedes Symbol hat seine eigene kleine Schleife.
   Nur in Symbolflächen, nie in Fließtext, aus bei reduzierter Bewegung.
   --------------------------------------------------------------------- */
  .sym *{ transform-box:fill-box; transform-origin:center; }
  @media (prefers-reduced-motion:no-preference){
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip) .sym-zahnrad{ animation:symDrehen 7s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-uhr .zm{ transform-box:view-box; transform-origin:12px 12px; animation:symDrehen 4s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-uhr .zs{ transform-box:view-box; transform-origin:12px 12px; animation:symDrehen 24s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-tacho .zm{ transform-box:view-box; transform-origin:12px 13.5px; animation:symTacho 3.2s cubic-bezier(.5,0,.3,1) infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip) .sym-pin{ animation:symHuepfen 2.2s cubic-bezier(.3,0,.3,1) infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-anruf{ animation:symKlingeln 2.8s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-handy{ animation:symVibrieren 3.2s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-stern{ animation:symFunkeln 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip) .sym-blitz{ animation:symBlitz 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-haken .h{ stroke-dasharray:24; animation:symZeichnen 2.8s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-lupe{ animation:symSuchen 3.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-chat .p1{ animation:symPunkt 1.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-chat .p2{ animation:symPunkt 1.4s ease-in-out .18s infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-chat .p3{ animation:symPunkt 1.4s ease-in-out .36s infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-kamera .l{ animation:symFokus 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-ebenen .o{ animation:symSchweben 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-ziel .i{ animation:symPuls 2s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-schild{ animation:symPuls 2.8s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-herz{ animation:symHerz 1.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-trend .t{ stroke-dasharray:26; animation:symZeichnen 3.2s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-dokument .zl{ stroke-dasharray:7; animation:symZeichnen 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-dokument .z2{ animation-delay:.3s; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-sortieren .s1{ transform-origin:left center; animation:symBalken 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-sortieren .s2{ transform-origin:left center; animation:symBalken 2.6s ease-in-out .2s infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-sortieren .s3{ transform-origin:left center; animation:symBalken 2.6s ease-in-out .4s infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-bild .s{ animation:symPuls 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip) .sym-funken{ animation:symFunken 4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-werkzeug{ animation:symWackeln 3s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-schluessel{ animation:symWackeln 3.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-pinsel{ animation:symWackeln 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-euro{ animation:symMuenze 4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-globus{ animation:symMuenze 6s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-rakete{ animation:symRakete 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-rakete .fl{ animation:symFlamme .5s ease-in-out infinite alternate; }
    :is(.b2-sym,.bcta-sym,.cta-deko) :is(.sym-haus,.sym-buch,.sym-karte,.sym-kalender,.sym-person,.sym-miete,.sym-ordner,.sym-auto,.sym-waage){ animation:symSchweben 3s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-pfeil{ animation:symStupsen 1.8s ease-in-out infinite; }
  }
  @keyframes symDrehen{ to{ transform:rotate(360deg); } }
  @keyframes symTacho{ 0%,100%{ transform:rotate(-70deg); } 55%{ transform:rotate(18deg); } 70%{ transform:rotate(8deg); } }
  @keyframes symHuepfen{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-3.5px); } 60%{ transform:translateY(0); } 70%{ transform:translateY(-1.2px); } }
  @keyframes symKlingeln{ 0%,58%,100%{ transform:rotate(0); } 62%{ transform:rotate(-14deg); } 66%{ transform:rotate(12deg); } 70%{ transform:rotate(-10deg); } 74%{ transform:rotate(8deg); } 78%{ transform:rotate(0); } }
  @keyframes symVibrieren{ 0%,70%,100%{ transform:translateX(0); } 73%{ transform:translateX(-1.2px); } 76%{ transform:translateX(1.2px); } 79%{ transform:translateX(-1.2px); } 82%{ transform:translateX(1.2px); } 85%{ transform:translateX(0); } }
  @keyframes symFunkeln{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.14) rotate(12deg); } }
  @keyframes symBlitz{ 0%,100%{ opacity:1; transform:scale(1); } 45%{ opacity:1; } 50%{ opacity:.35; transform:scale(.92); } 55%{ opacity:1; transform:scale(1.08); } }
  @keyframes symZeichnen{ 0%{ stroke-dashoffset:26; } 45%,75%{ stroke-dashoffset:0; opacity:1; } 95%{ opacity:0; } 100%{ stroke-dashoffset:0; opacity:0; } }
  @keyframes symSuchen{ 0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-1.6px,-1.2px); } 50%{ transform:translate(1.4px,-1.6px); } 75%{ transform:translate(1.2px,1.2px); } }
  @keyframes symPunkt{ 0%,60%,100%{ transform:translateY(0); opacity:.55; } 30%{ transform:translateY(-2px); opacity:1; } }
  @keyframes symFokus{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.72); } }
  @keyframes symSchweben{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2.2px); } }
  @keyframes symPuls{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
  @keyframes symHerz{ 0%,40%,100%{ transform:scale(1); } 15%{ transform:scale(1.18); } 28%{ transform:scale(1.06); } }
  @keyframes symBalken{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.55); } }
  @keyframes symFunken{ 0%,100%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(45deg) scale(1.12); } }
  @keyframes symWackeln{ 0%,60%,100%{ transform:rotate(0); } 70%{ transform:rotate(-16deg); } 80%{ transform:rotate(10deg); } 90%{ transform:rotate(-4deg); } }
  @keyframes symMuenze{ 0%,100%{ transform:rotateY(0); } 50%{ transform:rotateY(180deg); } }
  @keyframes symRakete{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(1px,-2.5px); } }
  @keyframes symFlamme{ from{ opacity:.4; transform:scaleY(.7); } to{ opacity:1; transform:scaleY(1.15); } }
  @keyframes symStupsen{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(3px); } }

/* ---------------------------------------------------------------------
   Abschlussband: farbige Box mit Verlauf statt schwarzem Balken
   --------------------------------------------------------------------- */
  .subcta{ position:relative; background:#fff; color:#fff; text-align:center; padding-block:clamp(40px,6vw,76px); padding-inline:0; }
  .subcta > .wrap{ position:relative; overflow:hidden; isolation:isolate; max-width:1080px; width:calc(100% - 2 * var(--gutter)); border-radius:clamp(24px,3vw,36px);
    padding:clamp(44px,6vw,76px) clamp(22px,5vw,64px);
    background:
      radial-gradient(520px 300px at 88% -10%, rgba(255,255,255,.28), transparent 65%),
      radial-gradient(480px 320px at -5% 110%, rgba(14,165,233,.45), transparent 65%),
      linear-gradient(125deg,#2346ff 0%,#4f46e5 35%,#7c4dff 68%,#c026d3 100%);
    box-shadow:0 40px 80px -46px rgba(70,50,230,.9); }
  .subcta > .wrap::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:.18;
    background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.4px); background-size:22px 22px;
    -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%); }
  .subcta > .wrap::after{ content:''; position:absolute; z-index:-1; width:340px; height:340px; right:-90px; bottom:-150px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); }
  @media (prefers-reduced-motion:no-preference){ .subcta > .wrap::after{ animation:ctaOrb 9s ease-in-out infinite; } }
  @keyframes ctaOrb{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-60px,-40px) scale(1.15); } }
  .subcta h2{ color:#fff; font-size:clamp(28px,3.6vw,44px); text-wrap:balance; }
  .subcta p{ color:rgba(255,255,255,.86); margin:14px auto 28px; max-width:52ch; font-size:clamp(16px,1.5vw,18px); }
  .subcta .btn-primary{ background:#fff; color:#2a36d6; box-shadow:0 18px 36px -18px rgba(10,10,60,.6); }
  .subcta .btn-primary::before{ background:#eef2ff; }
  .subcta .btn-ghost{ background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .subcta .btn-ghost::before{ background:rgba(255,255,255,.16); }
  .subcta .btn-ghost:hover{ color:#fff; border-color:#fff; }
  .subcta .btn-ghost .kico{ color:#fff; }
  .cta-deko{ position:absolute; z-index:-1; width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
  .cta-deko.d1{ left:28px; top:26px; transform:rotate(-8deg); }
  .cta-deko.d2{ right:30px; top:30px; width:48px; height:48px; transform:rotate(9deg); }
  .cta-deko.d3{ left:44px; bottom:28px; width:44px; height:44px; transform:rotate(6deg); }
  .cta-deko.d4{ right:36px; bottom:26px; transform:rotate(-6deg); }
  
  @media (max-width:980px){ .cta-deko, .cta-deko.d1, .cta-deko.d2, .cta-deko.d3, .cta-deko.d4{ position:relative; inset:auto; display:inline-flex; vertical-align:top; width:46px; height:46px; border-radius:14px; margin:0 5px 20px; z-index:0; } }

  /* Linkkarten mit Symbol */
  .b2-links{ display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .b2-link{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e8eaf2; border-radius:20px; padding:18px; transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
  .b2-link:hover{ transform:translateY(-4px); border-color:rgba(47,91,255,.3); box-shadow:0 22px 44px -28px rgba(30,50,140,.45); }
  .b2-link-text{ flex:1; min-width:0; }
  .b2-link-text b{ display:block; font-size:16.5px; font-weight:800; letter-spacing:-.01em; }
  .b2-link-text span{ display:block; font-size:14px; color:var(--ink-dim); margin-top:2px; line-height:1.4; }
  .b2-link-pfeil{ color:var(--blue); transition:transform .3s ease; }
  .b2-link:hover .b2-link-pfeil{ transform:translateX(4px); }
  @media (max-width:900px){ .b2-links{ grid-template-columns:1fr; } }

  /* Szene: Browser mit Startseite im Aufbau */
  .b2-szene-browser{ min-height:420px; padding-block:40px; }
  .b2-browser{ position:relative; width:min(100%,460px); border-radius:18px; background:#fff; border:1px solid #e3e6ef; box-shadow:0 40px 80px -44px rgba(20,30,90,.55); overflow:hidden; }
  .b2-browser-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:#f6f7fb; border-bottom:1px solid #eceef4; }
  .b2-browser-bar i{ width:9px; height:9px; border-radius:50%; background:#dfe2ea; }
  .b2-browser-bar span{ margin-left:10px; font-size:11.5px; color:#8a90a2; background:#fff; border:1px solid #eceef4; border-radius:999px; padding:3px 12px; }
  .b2-browser-seite{ padding:16px 18px 20px; }
  .b2-wf-nav{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .b2-wf-nav b{ width:54px; height:12px; border-radius:6px; background:var(--g-blau); }
  .b2-wf-nav span{ width:30px; height:7px; border-radius:4px; background:#e6e9f1; }
  .b2-wf-nav em{ margin-left:auto; width:58px; height:20px; border-radius:999px; background:var(--g-blau); }
  .b2-wf-hero{ border-radius:14px; padding:18px; background:linear-gradient(135deg,#eef2ff,#f5efff); }
  .b2-wf-kicker{ width:80px; height:7px; border-radius:4px; background:#c9d4ff; margin-bottom:10px; }
  .b2-wf-titel{ font-weight:800; font-size:20px; letter-spacing:-.02em; margin-bottom:10px; background:var(--g-marke); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .b2-wf-zeile{ height:8px; border-radius:4px; background:#dde2ef; margin-bottom:7px; width:92%; }
  .b2-wf-zeile.kurz{ width:64%; }
  .b2-wf-knoepfe{ display:flex; gap:8px; margin-top:14px; }
  .b2-wf-knopf{ width:88px; height:26px; border-radius:999px; background:var(--g-blau); position:relative; }
  .b2-wf-knopf.hell{ width:70px; background:#fff; border:1px solid #d9deea; }
  .b2-wf-karten{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
  .b2-wf-karten span{ height:44px; border-radius:10px; background:#f3f5fa; border:1px solid #eceef4; }
  .b2-marke{ position:absolute; display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid #e6e9f2; border-radius:999px; padding:8px 14px 8px 8px; font-size:13.5px; font-weight:700; color:var(--ink); box-shadow:0 18px 36px -22px rgba(30,40,90,.5); white-space:nowrap; z-index:2; }
  .b2-marke .b2-hk{ width:24px; height:24px; }
  .b2-marke.m1{ left:0; top:26%; }
  .b2-marke.m2{ right:0; top:48%; }
  .b2-marke.m3{ left:4%; bottom:12%; }
  @media (max-width:520px){ .b2-marke{ font-size:12px; } .b2-marke.m1{ top:14%; } .b2-marke.m3{ bottom:6%; } }
  @media (prefers-reduced-motion:no-preference){
    .js .b2-szene-browser .b2-marke{ opacity:0; }
    .js .b2-szene-browser.b2-an .b2-marke{ animation:b2Hoch .7s cubic-bezier(.2,.8,.25,1) var(--d) both, b2Schweben 5s ease-in-out calc(var(--d) + 900ms) infinite; }
    .js .b2-szene-browser .b2-wf-hero > *, .js .b2-szene-browser .b2-wf-karten span{ opacity:0; }
    .js .b2-szene-browser.b2-an .b2-wf-hero > *{ animation:b2Hoch .5s ease both; }
    .js .b2-szene-browser.b2-an .b2-wf-titel{ animation-delay:.15s; }
    .js .b2-szene-browser.b2-an .b2-wf-zeile{ animation:b2Hoch .5s ease .3s both, b2Schimmer 2.6s linear infinite; }
    .js .b2-szene-browser.b2-an .b2-wf-zeile.kurz{ animation:b2Hoch .5s ease .38s both, b2Schimmer 2.6s linear infinite; }
    .js .b2-szene-browser.b2-an .b2-wf-knoepfe{ animation-delay:.5s; }
    .js .b2-szene-browser.b2-an .b2-wf-karten span{ animation:b2Hoch .5s ease both; }
    .js .b2-szene-browser.b2-an .b2-wf-karten span:nth-child(1){ animation-delay:.6s; }
    .js .b2-szene-browser.b2-an .b2-wf-karten span:nth-child(2){ animation-delay:.7s; }
    .js .b2-szene-browser.b2-an .b2-wf-karten span:nth-child(3){ animation-delay:.8s; }
    .b2-wf-knopf:not(.hell)::after{ content:''; position:absolute; inset:0; border-radius:999px; animation:b2PulsBlau 2.2s ease-out 1.6s infinite; }
    .b2-wf-zeile{ background:linear-gradient(90deg,#dde2ef 0%,#eef1f8 40%,#dde2ef 80%) 0 0/200% 100%; animation:b2Schimmer 2.6s linear infinite; }
  }
  @keyframes b2PulsBlau{ 0%{ box-shadow:0 0 0 0 rgba(47,91,255,.5); } 80%,100%{ box-shadow:0 0 0 10px rgba(47,91,255,0); } }
  @keyframes b2Schimmer{ to{ background-position:-200% 0; } }

  /* Szene: Umzug der Adressen */
  .b2-szene-umzug{ min-height:380px; padding-block:50px 30px; }
  .b2-umzug{ position:relative; width:min(100%,470px); background:#fff; border:1px solid #e3e6ef; border-radius:22px; padding:18px; box-shadow:0 40px 80px -44px rgba(20,30,90,.55); display:grid; gap:10px; }
  .b2-umzug-kopf{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
  .b2-umzug-kopf b{ font-size:15px; }
  .b2-umzug-kopf em{ margin-left:auto; font-style:normal; font-size:12px; font-weight:700; color:#15803d; background:#dcfce7; border-radius:999px; padding:4px 10px; }
  .b2-umzug-zeile{ display:grid; grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) auto; align-items:center; gap:8px; padding:10px 12px; border-radius:14px; background:#f7f8fc; border:1px solid #eceef5; font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
  .b2-umzug-zeile .alt{ color:#9aa0b0; text-decoration:line-through; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .b2-umzug-zeile .neu{ color:#1b2a8f; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .b2-umzug-zeile .weg{ position:relative; display:flex; align-items:center; justify-content:flex-end; color:var(--blue); }
  .b2-umzug-zeile .weg i{ position:absolute; left:0; right:14px; top:50%; height:2px; border-radius:2px; background:var(--g-marke); transform-origin:left; }
  .b2-umzug-zeile .code{ font-family:var(--font); font-size:11px; font-weight:800; color:#fff; background:var(--g-gruen); border-radius:8px; padding:3px 7px; }
  .b2-szene-umzug .b2-chip.c1{ right:4%; top:6px; }
  @media (prefers-reduced-motion:no-preference){
    .js .b2-szene-umzug .b2-umzug-zeile{ opacity:0; transform:translateX(-10px); }
    .js .b2-szene-umzug.b2-an .b2-umzug-zeile{ animation:b2Rein .6s cubic-bezier(.2,.8,.25,1) var(--d) both; }
    .js .b2-szene-umzug .weg i{ transform:scaleX(0); }
    .js .b2-szene-umzug.b2-an .weg i{ animation:b2Linie 1.6s cubic-bezier(.6,.1,.2,1) calc(var(--d) + 300ms) infinite; }
    .js .b2-szene-umzug .code{ opacity:0; }
    .js .b2-szene-umzug.b2-an .code{ animation:b2Stempel .5s cubic-bezier(.2,1.6,.4,1) calc(var(--d) + 700ms) both; }
    .js .b2-szene-umzug .b2-chip{ opacity:0; }
    .js .b2-szene-umzug.b2-an .b2-chip{ animation:b2Hoch .7s ease 1.8s both, b2Schweben 5s ease-in-out 2.6s infinite; }
  }
  @keyframes b2Rein{ from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:none; } }
  @keyframes b2Linie{ 0%{ transform:scaleX(0); opacity:1; } 60%{ transform:scaleX(1); opacity:1; } 100%{ transform:scaleX(1); opacity:0; } }
  @keyframes b2Stempel{ from{ opacity:0; transform:scale(1.8); } to{ opacity:1; transform:none; } }
  .b2-listen-titel{ font-size:17px; font-weight:800; margin:0 0 14px; }
  @media (max-width:520px){ .b2-umzug-zeile{ grid-template-columns:1fr auto; } .b2-umzug-zeile .weg{ display:none; } .b2-umzug-zeile .neu{ grid-column:1; } .b2-umzug-zeile .code{ grid-row:1 / span 2; grid-column:2; } }

  /* Szene: KI Assistent */
  .b2-szene-chat{ min-height:460px; padding-block:30px; }
  .b2-chatfenster{ position:relative; width:min(100%,440px); background:#fff; border:1px solid #e3e6ef; border-radius:24px; padding:16px; box-shadow:0 40px 80px -44px rgba(20,30,90,.55); display:grid; gap:10px; }
  .b2-chat-kopf{ display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid #eef0f5; }
  .b2-chat-kopf b{ font-size:14.5px; }
  .b2-blase{ border-radius:18px; padding:11px 14px; font-size:13.5px; line-height:1.5; }
  .b2-blase.frage{ justify-self:end; max-width:86%; background:var(--g-blau); color:#fff; border-bottom-right-radius:6px; }
  .b2-blase.tippen{ justify-self:start; display:none; gap:5px; background:#f1f3f9; }
  .b2-blase.tippen i{ width:7px; height:7px; border-radius:50%; background:#9aa3b8; display:inline-block; }
  .b2-blase.antwort{ justify-self:start; background:#f5f6fb; border-bottom-left-radius:6px; color:var(--ink-soft); width:100%; }
  .b2-blase.antwort p{ margin:0 0 8px; }
  .b2-vorschlag{ display:flex; gap:10px; align-items:center; background:#fff; border:1px solid #e8eaf2; border-radius:12px; padding:8px 10px; margin-top:6px; }
  .b2-vorschlag .nr{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--g-violett); color:#fff; font-size:11.5px; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .b2-vorschlag b{ display:block; font-size:13px; color:var(--ink); }
  .b2-vorschlag span{ display:block; font-size:11.5px; color:#7a8093; }
  .b2-quellen{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .b2-quellen span{ font-size:11px; font-weight:700; color:#4338ca; background:#eef0ff; border-radius:999px; padding:3px 9px; }
  @media (prefers-reduced-motion:no-preference){
    .js .b2-szene-chat .b2-blase.frage{ opacity:0; }
    .js .b2-szene-chat.b2-an .b2-blase.frage{ animation:b2Hoch .5s ease .2s both; }
    .js .b2-szene-chat .b2-blase.tippen{ display:inline-flex; opacity:0; }
    .js .b2-szene-chat.b2-an .b2-blase.tippen{ animation:b2Tippblase 1.3s ease .7s both; }
    .js .b2-szene-chat.b2-an .b2-blase.tippen i{ animation:symPunkt 1s ease-in-out infinite; }
    .js .b2-szene-chat.b2-an .b2-blase.tippen i:nth-child(2){ animation-delay:.15s; }
    .js .b2-szene-chat.b2-an .b2-blase.tippen i:nth-child(3){ animation-delay:.3s; }
    .js .b2-szene-chat .b2-blase.antwort{ opacity:0; }
    .js .b2-szene-chat.b2-an .b2-blase.antwort{ animation:b2Hoch .5s ease 1.9s both; }
    .js .b2-szene-chat .b2-vorschlag{ opacity:0; }
    .js .b2-szene-chat.b2-an .b2-vorschlag{ animation:b2Hoch .5s ease var(--d) both; }
  }
  @keyframes b2Tippblase{ 0%{ opacity:0; max-height:40px; } 15%,80%{ opacity:1; max-height:40px; } 100%{ opacity:0; max-height:0; padding-block:0; margin:-5px 0; } }

  .b2-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .b2-marke-chip{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid #e6e9f2; border-radius:999px; padding:9px 16px 9px 12px; font-size:14.5px; font-weight:700; color:var(--ink); box-shadow:0 12px 26px -22px rgba(30,40,90,.5); }
  .b2-marke-chip i{ width:10px; height:10px; border-radius:50%; }
  .portrait-text .b2-kopf{ margin-bottom:18px; }
  .f-insta{ background:linear-gradient(135deg,#f58529 0%,#dd2a7b 50%,#8134af 100%); --sh:rgba(221,42,123,.5); }
  .ccard .b2-sym{ margin-bottom:14px; }
  .ccard .b2-sym .kico{ color:#fff; }
  .ccard:hover .b2-sym{ transform:rotate(-8deg) scale(1.06); }

  /* Projektseiten */
  .projmeta.b2-meta > div{ display:flex; gap:12px; align-items:flex-start; }
  .projmeta.b2-meta > div > div{ min-width:0; }
  .b2-split.b2-oben{ align-items:start; }
  .b2-ergebnis{ position:relative; overflow:hidden; border-radius:28px; padding:clamp(26px,4vw,44px); background:linear-gradient(#fff,#fff) padding-box, var(--g-marke) border-box; border:2px solid transparent; box-shadow:0 30px 60px -40px rgba(70,60,255,.6); max-width:900px; margin-inline:auto; }
  .b2-ergebnis::after{ content:''; position:absolute; right:-80px; top:-80px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(124,77,255,.12), transparent 70%); }
  .b2-ergebnis-kopf{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
  .b2-ergebnis-kopf .b2-kicker{ margin:0; }
  .b2-kennzahl{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
  .b2-kennzahl b{ font-size:clamp(40px,6vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1; background:var(--g-marke); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .b2-kennzahl span{ font-size:16px; color:var(--ink-soft); max-width:36ch; }
  .sub .subsec .b2-ergebnis p{ color:var(--ink-soft); font-size:17px; margin:0 0 18px; }
  .sub .subsec .b2-ergebnis p.b2-ergebnis-link{ margin:18px 0 0; }
  .b2-haken.warn .b2-hk{ background:linear-gradient(135deg,#dc2626,#f97316); box-shadow:0 8px 16px -8px rgba(220,38,38,.6); }
  .sub .subsec .b2-kachel p.b2-preis{ font-size:18px; font-weight:800; letter-spacing:-.01em; margin:0 0 8px; background:var(--g-marke); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .b2-split .b2-links{ grid-template-columns:1fr; }
  .wrap.narrow .b2-links{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:700px){ .wrap.narrow .b2-links{ grid-template-columns:1fr; } }
  .b2-schritte.n6{ --n:6; }
  .b2-schritte.vertikal{ grid-template-columns:1fr !important; gap:20px; }
  .b2-schritte.vertikal::before, .b2-schritte.vertikal::after{ left:25px; right:auto; top:26px; bottom:26px; width:3px; height:auto; transform-origin:top; }
  @media (prefers-reduced-motion:no-preference){ .js .b2-schritte.vertikal::after{ transform:scaleY(0); } .js .b2-schritte.vertikal.b2-an::after{ transform:scaleY(1); } }
  .b2-schritte.vertikal li{ display:grid; grid-template-columns:52px 1fr; gap:18px; align-items:start; }
  .b2-schritte.vertikal .b2-nr{ margin:0; }
  .b2-schritte.vertikal li:nth-child(6) .b2-nr{ background:var(--g-rosa); }
  .b2-schritte.n7{ --n:7; }
  .b2-schritte.vertikal li:nth-child(7) .b2-nr{ background:var(--g-blau); }
  .b2-themen .b2-kachel{ display:flex; flex-direction:column; }
  .b2-themen .b2-kachel .plink{ margin-top:16px; }
  @media (max-width:600px){ .b2-themen .b2-kachel{ display:grid; } .b2-themen .b2-kachel .plink{ grid-column:2; margin-top:8px; } }

/* Danke Seite und Landingpage Abschluss im neuen Stil */
  .danke-ico.b2-sym{ width:64px; height:64px; border-radius:20px; font-size:0; }
  .danke-ico.b2-sym svg{ width:30px; height:30px; }
  .danke-eilt .b2-sym{ flex:none; }
  .danke-eilt .kico{ color:#fff; }
  .danke-eilt a{ font-weight:700; }
  .lp .subsec .b2-kopf{ margin-bottom:clamp(22px,3vw,34px); }
  .danke-ico .sym-haken .h{ stroke-dasharray:24; animation:dankeHaken .9s .35s cubic-bezier(.3,.8,.3,1) both !important; }
  @keyframes dankeHaken{ from{ stroke-dashoffset:24; } to{ stroke-dashoffset:0; opacity:1; } }
  @media (prefers-reduced-motion:reduce){ .danke-ico .sym-haken .h{ animation:none !important; stroke-dasharray:none; } }

/* Dunkle Flächen: tiefer Verlauf statt reinem Schwarz */
  .quote, .about, .plan.best, .mega-feature-dunkel{
    background:
      radial-gradient(420px 260px at 100% 0%, rgba(124,77,255,.35), transparent 70%),
      radial-gradient(380px 260px at 0% 100%, rgba(35,70,255,.35), transparent 70%),
      linear-gradient(135deg,#0f1540 0%,#1b1b57 55%,#2c1a63 100%); }
  .mega-feature-dunkel{ border-color:#1b1b57; }

/* ---------------------------------------------------------------------
   Mehr Bewegung: jede Symbolfläche schwebt und pulsiert, jedes Symbol
   bewegt sich deutlich. Versetzt, damit nicht alles im Gleichtakt läuft.
   Alles aus bei reduzierter Bewegung.
   --------------------------------------------------------------------- */
  .b2-sym:not(.f-grau), .b2-hk, .b2-ruf{ isolation:isolate; }
  .b2-sym:not(.f-grau)::after, .b2-hk::after{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:inherit; opacity:0; pointer-events:none; }
  .b2-kachel .b2-sym, .b2-vorteil .b2-sym, .b2-link .b2-sym, .ccard .b2-sym{ --lauf:3.8s; }
  @media (prefers-reduced-motion:no-preference){
    .b2-sym:not(.f-grau){ animation:symTraeger var(--lauf,3.8s) ease-in-out infinite; animation-delay:calc(var(--d,0ms) * -4); }
    .b2-sym:not(.f-grau)::after{ animation:symHalo 2.8s cubic-bezier(.2,.7,.3,1) infinite; animation-delay:calc(var(--d,0ms) * -5); }
    .b2-hk{ animation:hakenPop 2.6s ease-in-out infinite; animation-delay:calc(var(--d,0ms) * -6); }
    .b2-hk::after{ animation:symHalo 2.6s cubic-bezier(.2,.7,.3,1) infinite; animation-delay:calc(var(--d,0ms) * -6); }
    .b2-mk{ animation:hakenPop 3s ease-in-out infinite; }
    .b2-wahl li:nth-child(2) .b2-mk, .b2-seite li:nth-child(2) .b2-mk{ animation-delay:-.5s; }
    .b2-seite li:nth-child(3) .b2-mk{ animation-delay:-1s; }
    .b2-seite li:nth-child(4) .b2-mk{ animation-delay:-1.5s; }
    .b2-seite li:nth-child(5) .b2-mk{ animation-delay:-2s; }
    .b2-kicker::before{ animation:kickerPuls 2.4s ease-out infinite; }
    .b2-ruf::after{ animation:b2Puls 1.8s ease-out infinite !important; }
    .b2-chip .sym, .b2-marke .b2-hk{ animation-duration:2s; }
    .b2-link-pfeil .sym-pfeil{ animation:symStupsen 1.6s ease-in-out infinite; }
    .btn .kico-whatsapp, .foot-kanal .kico-whatsapp{ transform-origin:50% 50%; animation:symKlingeln 3.2s ease-in-out infinite; }
    .foot-kanal .kico-instagram{ animation:symPuls 2.8s ease-in-out infinite; }
    .foot-kanal .kico-mail{ animation:symSchweben 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip,.b2-hk) .sym-haken .h{ stroke-dasharray:none; animation:none; }
    :is(.b2-sym,.bcta-sym,.cta-deko,.b2-chip) .sym-pin{ animation:symHuepfen 1.8s cubic-bezier(.3,0,.3,1) infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-anruf{ animation:symKlingeln 2s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-handy{ animation:symVibrieren 2s linear infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-werkzeug{ animation:symPendeln 2.2s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-schluessel{ animation:symPendeln 2.6s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-pinsel{ animation:symPinsel 1.8s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-euro{ animation:symMuenze 3s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) :is(.sym-haus,.sym-buch,.sym-karte,.sym-kalender,.sym-person,.sym-miete,.sym-ordner,.sym-waage){ animation:symSchweben 2.2s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-auto{ animation:symFahren 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-waage{ animation:symWaage 2.8s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-kreuz{ animation:symWackeln 2.4s ease-in-out infinite; }
    :is(.b2-sym,.bcta-sym,.cta-deko) .sym-pause{ animation:symPuls 2s ease-in-out infinite; }
  }
  @keyframes symTraeger{ 0%,100%{ translate:0 0; } 50%{ translate:0 -5px; } }
  @keyframes symHalo{ 0%{ transform:scale(1); opacity:.5; } 75%,100%{ transform:scale(1.6); opacity:0; } }
  @keyframes hakenPop{ 0%,55%,100%{ transform:scale(1); } 65%{ transform:scale(1.22); } 75%{ transform:scale(.94); } 85%{ transform:scale(1.05); } }
  @keyframes kickerPuls{ 0%{ box-shadow:0 0 0 0 rgba(124,77,255,.45); } 80%,100%{ box-shadow:0 0 0 9px rgba(124,77,255,0); } }
  @keyframes symHuepfen{ 0%,100%{ transform:translateY(0); } 35%{ transform:translateY(-6px); } 55%{ transform:translateY(0) scaleY(.9); } 68%{ transform:translateY(-2px); } 80%{ transform:translateY(0); } }
  @keyframes symKlingeln{ 0%,45%,100%{ transform:rotate(0); } 50%{ transform:rotate(-18deg); } 55%{ transform:rotate(16deg); } 60%{ transform:rotate(-14deg); } 65%{ transform:rotate(12deg); } 70%{ transform:rotate(-6deg); } 75%{ transform:rotate(0); } }
  @keyframes symVibrieren{ 0%,55%,100%{ transform:translateX(0) rotate(0); } 60%{ transform:translateX(-2px) rotate(-6deg); } 65%{ transform:translateX(2px) rotate(6deg); } 70%{ transform:translateX(-2px) rotate(-6deg); } 75%{ transform:translateX(2px) rotate(6deg); } 80%{ transform:translateX(0) rotate(0); } }
  @keyframes symFunkeln{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.28) rotate(22deg); } }
  @keyframes symSuchen{ 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-3px,-2px) rotate(-8deg); } 50%{ transform:translate(3px,-3px) rotate(6deg); } 75%{ transform:translate(2px,2px) rotate(-4deg); } }
  @keyframes symPunkt{ 0%,60%,100%{ transform:translateY(0); opacity:.45; } 30%{ transform:translateY(-3.5px); opacity:1; } }
  @keyframes symFokus{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.55); } }
  @keyframes symSchweben{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-4px) rotate(-5deg); } }
  @keyframes symPuls{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.22); } }
  @keyframes symHerz{ 0%,40%,100%{ transform:scale(1); } 15%{ transform:scale(1.3); } 28%{ transform:scale(1.1); } }
  @keyframes symBalken{ 0%,100%{ transform:scaleX(1); } 50%{ transform:scaleX(.4); } }
  @keyframes symFunken{ 0%,100%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(90deg) scale(1.25); } }
  @keyframes symRakete{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(2px,-4.5px); } }
  @keyframes symStupsen{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
  @keyframes symPendeln{ 0%,100%{ transform:rotate(-16deg); } 50%{ transform:rotate(16deg); } }
  @keyframes symPinsel{ 0%,100%{ transform:rotate(-14deg) translateX(-1.5px); } 50%{ transform:rotate(14deg) translateX(1.5px); } }
  @keyframes symFahren{ 0%,100%{ transform:translateX(-2.5px); } 50%{ transform:translateX(2.5px) translateY(-1px); } }
  @keyframes symWaage{ 0%,100%{ transform:rotate(-10deg); } 50%{ transform:rotate(10deg); } }
  .card .karten-sym{ width:56px; height:56px; border-radius:17px; --lauf:3.6s; }
  .card:nth-child(2) .karten-sym{ --d:120ms; }
  .card:nth-child(3) .karten-sym{ --d:240ms; }
  .card:hover .karten-sym{ transform:rotate(-9deg) scale(1.08); }
  @media (prefers-reduced-motion:no-preference){
    .plan li > svg{ animation:hakenPop 2.6s ease-in-out infinite; transform-origin:50% 50%; }
    .plan li:nth-child(2) > svg{ animation-delay:-.4s; }
    .plan li:nth-child(3) > svg{ animation-delay:-.8s; }
    .plan li:nth-child(4) > svg{ animation-delay:-1.2s; }
    .plan li:nth-child(5) > svg{ animation-delay:-1.6s; }
  }
  /* Porträt nie verzerren: Höhe folgt der Breite */
  .portrait-img img{ height:auto; aspect-ratio:620 / 776; object-fit:cover; object-position:center top; }
  /* Logoprobe mit Kundenlogo */
  .logo-probe-gross{ display:block; width:100%; max-width:300px; height:auto; margin-inline:auto; border-radius:24px; background:#fff; box-shadow:0 30px 60px -40px rgba(20,30,90,.45); }
  .logo-probe-reihe.rund{ justify-content:center; align-items:flex-end; gap:26px; }
  .logo-probe-reihe.rund figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
  .logo-probe-reihe.rund img{ border-radius:50%; background:#fff; box-shadow:0 0 0 1px #e3e6ef, 0 10px 20px -12px rgba(20,30,90,.4); }
  .logo-probe-reihe.rund figcaption{ font-size:12.5px; font-weight:700; color:var(--ink-dim); }

/* ---------------------------------------------------------------------
   Schwebender WhatsApp Knopf aus grünem Glas, auf allen Seiten
   --------------------------------------------------------------------- */
  .wa-float{ position:fixed; right:22px; bottom:22px; z-index:70; display:inline-flex; align-items:center; gap:12px; padding:8px 22px 8px 8px; border-radius:999px; overflow:hidden; isolation:isolate;
    color:#fff; text-decoration:none; line-height:1.15;
    background:linear-gradient(120deg, rgba(37,211,102,.93) 0%, rgba(13,122,78,.95) 30%, rgba(7,84,62,.96) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(170%); backdrop-filter:blur(16px) saturate(170%);
    border:1px solid rgba(255,255,255,.42);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 22px rgba(0,40,30,.18), 0 22px 44px -18px rgba(7,94,84,.7), 0 4px 14px -6px rgba(37,211,102,.5);
    transition:transform .45s cubic-bezier(.2,1.2,.35,1), box-shadow .35s ease; }
  .wa-float::before{ content:''; position:absolute; inset:1px 1px 50% 1px; z-index:-1; border-radius:999px 999px 40% 40% / 999px 999px 60% 60%;
    background:linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)); pointer-events:none; }
  .wa-float::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1; pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); opacity:0; }
  .wa-float:hover{ transform:translateY(-3px) scale(1.03); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 22px rgba(0,40,30,.18), 0 28px 54px -18px rgba(7,94,84,.8), 0 6px 18px -6px rgba(37,211,102,.6); color:#fff; }
  .wa-float:focus-visible{ outline:3px solid #0b0d17; outline-offset:3px; }
  .wa-float-ico{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
  .wa-float-ico .kico{ color:#fff; width:24px; height:24px; }
  .wa-float-ico::after{ content:''; position:absolute; inset:-1px; border-radius:50%; border:2px solid rgba(255,255,255,.75); opacity:0; }
  .wa-float-text{ display:flex; flex-direction:column; }
  .wa-float-text b{ font-size:16px; font-weight:800; letter-spacing:-.01em; text-shadow:0 1px 2px rgba(0,50,30,.25); }
  .wa-float-text small{ font-size:12.5px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,50,30,.25); }
  body.menu-open .wa-float{ opacity:0; pointer-events:none; }
  @media (max-width:560px){
    .wa-float{ right:14px; bottom:14px; padding:6px 18px 6px 6px; gap:10px; }
    .wa-float-ico{ width:40px; height:40px; }
    .wa-float-text small{ display:none; }
    body:has(#einw:not([hidden])) .wa-float{ opacity:0; pointer-events:none; }
  }
  @media (prefers-reduced-motion:no-preference){
    
    .wa-float::after{ animation:waGlanz 5.5s ease-in-out 2s infinite; }
    .wa-float-ico::after{ animation:waRing 2.4s ease-out 1.4s infinite; }
    .wa-float-ico .kico{ animation:symKlingeln 3.2s ease-in-out 1.2s infinite; }
  }
  @keyframes waGlanz{ 0%,70%{ left:-60%; opacity:0; } 72%{ opacity:1; } 92%{ left:120%; opacity:1; } 93%,100%{ left:120%; opacity:0; } }
  @keyframes waRing{ 0%{ transform:scale(1); opacity:.8; } 80%,100%{ transform:scale(1.55); opacity:0; } }
  .float-cta{ display:none !important; }
  @media (max-width:560px){ .foot-bottom{ padding-bottom:72px; } }

/* ---------------------------------------------------------------------
   Wärmer: cremige Bänder statt kühlem Grau, getönte Karten statt Listen
   --------------------------------------------------------------------- */
  :root{ --bg-soft:#f6f5ff; --warm-linie:#e9e6fb; }
  .sub .subsec.soft, .lp .subsec.soft{ background:
      radial-gradient(760px 380px at 0% 0%, rgba(47,91,255,.09), transparent 62%),
      radial-gradient(700px 360px at 100% 100%, rgba(140,80,255,.11), transparent 62%),
      radial-gradient(520px 260px at 70% 10%, rgba(192,77,255,.05), transparent 60%),
      #f7f6ff; border-block:1px solid var(--warm-linie); }
  .soft .b2-nr{ box-shadow:0 0 0 6px #f7f6ff, 0 14px 26px -12px rgba(47,91,255,.7); }
  .band{ border-bottom-color:var(--warm-linie); }

  .b2-kacheln.sp1{ grid-template-columns:1fr; gap:14px; }
  .b2-kacheln.warm .b2-kachel{ border:1px solid transparent; box-shadow:0 18px 40px -32px rgba(40,40,140,.35); }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+1){ background:linear-gradient(140deg,#eef3ff 0%,#ffffff 70%); border-color:#e2e9ff; }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+2){ background:linear-gradient(140deg,#f4eeff 0%,#ffffff 70%); border-color:#ebe2ff; }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+3){ background:linear-gradient(140deg,#e9f8fd 0%,#ffffff 70%); border-color:#d9f0f8; }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+4){ background:linear-gradient(140deg,#eaf9f0 0%,#ffffff 70%); border-color:#d8f1e2; }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+5){ background:linear-gradient(140deg,#efedff 0%,#ffffff 70%); border-color:#e2defc; }
  .b2-kacheln.warm .b2-kachel:nth-child(6n+6){ background:linear-gradient(140deg,#f6eeff 0%,#ffffff 70%); border-color:#ecdffb; }
  .b2-kacheln.sp1 .b2-kachel, .b2-kacheln.quer .b2-kachel{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:start; padding:20px 22px; }
  .b2-kacheln.sp1 .b2-kachel h3, .b2-kacheln.quer .b2-kachel h3{ margin:2px 0 4px; font-size:17px; }
  .b2-kacheln.sp1 .b2-kachel .b2-sym{ width:46px; height:46px; border-radius:14px; }
  .b2-kacheln.warn .b2-kachel .b2-sym{ background:linear-gradient(135deg,#f97316,#e11d48); --sh:rgba(225,29,72,.45); }
  /* Fließtext statt Liste */
  .sub .subsec .b2-fliesstext p{ font-size:17px; line-height:1.7; color:var(--ink-soft); margin:0 0 14px; max-width:58ch; }
  .sub .subsec .b2-fliesstext p:last-child{ margin-bottom:0; }
  /* Beispielnachricht auf der Kontaktseite */
  .b2-beispiel{ margin-top:26px; display:flex; flex-direction:column; gap:10px; max-width:460px; }
  .b2-beispiel-label{ font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
  .sub .subsec p.b2-blase{ position:relative; margin:0; padding:14px 18px; border-radius:20px 20px 20px 6px; background:#fff; border:1px solid #e6e3fa; color:var(--ink); font-size:15.5px; line-height:1.55; box-shadow:0 18px 36px -28px rgba(40,40,140,.35); max-width:92%; }
  .sub .subsec p.b2-blase-antwort{ align-self:flex-end; border-radius:20px 20px 6px 20px; background:linear-gradient(135deg,#dcf8c6,#c9f1b0); border-color:#bfe8a4; color:#173d12; }
  .ccard .b2-sym{ display:flex; }
  .projmeta.b2-meta > div > div{ background:none; border:0; padding:0; border-radius:0; }
  .projmeta.b2-meta > div{ align-items:center; }
  .projmeta span.b2-sym{ display:flex; margin:0; color:#fff; letter-spacing:0; text-transform:none; }

/* ---------------------------------------------------------------------
   Handy Geschichte in 3D: tippen, Karte, Treffer, "Deine Firma" leuchtet,
   Finger tippt auf Anrufen, Anrufbildschirm. Ohne JavaScript oder bei
   reduzierter Bewegung steht das fertige Bild still da.
   --------------------------------------------------------------------- */
  .b2-story{ position:relative; min-height:600px; padding-block:76px; display:flex; align-items:center; justify-content:center; perspective:1100px; }
  .b2-story .b2-glow{ transform:translateZ(-80px); }
  .b2-buehne{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; transform-style:preserve-3d; transform:rotateX(var(--rx,5deg)) rotateY(var(--ry,-12deg)); }
  .b2-story .b2-handy{ transform-style:preserve-3d; width:262px; }
  .b2-story .b2-handy::before{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg,#1b1e28,#05060a 40%,#1b1e28); transform:translateZ(-14px); box-shadow:0 50px 90px -40px rgba(14,16,60,.75); }
  .b2-story .b2-handy::after{ content:''; position:absolute; right:-3px; top:110px; width:4px; height:54px; border-radius:3px; background:#2a2d38; transform:translateZ(-7px); }
  .b2-story .b2-notch{ transform:translateX(-50%) translateZ(1px); z-index:4; }
  .b2-screen{ position:relative; border-radius:27px; overflow:hidden; background:#fff; }
  .b2-story .b2-suchfeld, .b2-story .b2-treffer{ border-radius:0; }
  .b2-story .b2-tipp{ display:flex; align-items:center; min-height:31px; }
  .b2-caret{ display:none; width:1.5px; height:13px; margin-left:1px; background:var(--blue); }
  .b2-story .b2-karte{ height:140px; }
  .b2-story .b2-pin.an{ z-index:2; }
  .b2-story .b2-pin.an::after{ content:''; position:absolute; left:50%; top:100%; width:24px; height:9px; margin:-5px 0 0 -12px; border-radius:50%; background:rgba(225,29,116,.3); z-index:-1; }
  .b2-pin-label{ position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:10.5px; font-weight:800; color:#fff; padding:3px 9px; border-radius:999px; background:var(--g-marke); box-shadow:0 8px 16px -8px rgba(90,60,255,.8); }
  .b2-story .b2-zeile{ position:relative; background:#fff; }
  .b2-story .b2-zeile:not(.an){ opacity:.62; }
  .b2-story .b2-zeile:not(.an) b{ color:#586072; }
  .b2-story .b2-zeile.an{ border:1.5px solid transparent; background:linear-gradient(90deg,#f3f5ff,#fff) padding-box, var(--g-marke) border-box; box-shadow:0 14px 26px -16px rgba(80,60,255,.75); }
  .b2-story .b2-zeile.an b{ font-size:13px; }
  .b2-sterne{ color:#f5a524 !important; font-size:10px !important; letter-spacing:1px; line-height:1.3; }
  .b2-finger{ position:absolute; right:12px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%; background:rgba(47,91,255,.24); border:2px solid rgba(255,255,255,.95); box-shadow:0 8px 18px rgba(20,30,90,.35); opacity:0; pointer-events:none; z-index:2; }
  .b2-ruf::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(22,163,74,.7); opacity:0; }
  .b2-anruf{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#fff; text-align:center;
    background:radial-gradient(circle at 50% 32%, #22c56e 0%, #0d7a55 55%, #06483a 100%); transform:translateY(102%); }
  .b2-anruf b{ font-size:17px; font-weight:800; margin-top:14px; letter-spacing:-.01em; }
  .b2-anruf > span:not(.b2-anruf-bild){ font-size:11.5px; opacity:.88; }
  .b2-anruf-bild{ width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.45); }
  .b2-punkte{ display:flex; gap:4px; margin-top:8px; }
  .b2-punkte i{ width:5px; height:5px; border-radius:50%; background:#fff; opacity:.5; }
  .b2-spiegel{ position:absolute; inset:0; z-index:5; pointer-events:none; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.38) 48%, transparent 58%) no-repeat; background-size:260% 100%; background-position:120% 0; mix-blend-mode:soft-light; }
  .b2-story .b2-chip.c1{ transform:translateZ(70px); right:2%; top:22px; z-index:6; }
  .b2-story .b2-chip.c2{ transform:translateZ(50px); left:2%; bottom:22px; z-index:6; }
  @media (max-width:600px){ .b2-story{ overflow-x:clip; min-height:560px; padding-block:64px; } .b2-story .b2-chip.c1{ right:0; } .b2-story .b2-chip.c2{ left:0; } }

  @media (prefers-reduced-motion:no-preference){ .b2-story.laeuft .b2-caret{ display:inline-block; animation:storyCaret 1s steps(1) infinite; } .b2-story.laeuft.s-h .b2-pin.an::after{ animation:storyBoden 1.4s ease-out infinite; } .b2-story.laeuft.s-p .b2-ruf::before{ animation:storyWelle .6s ease-out both; } .b2-story.laeuft.s-a .b2-anruf-bild{ animation:storyRinge 1.6s ease-out .4s infinite; } .b2-story.laeuft.s-a .b2-anruf-bild .sym{ animation:symKlingeln 1.6s ease-in-out .5s infinite; } }
  @keyframes storyCaret{ 50%{ opacity:0; } }
  @keyframes storyBoden{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
  @keyframes storyWelle{ from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(2.2); } }
  @keyframes storyRinge{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); } 100%{ box-shadow:0 0 0 22px rgba(255,255,255,0); } }
  @media (max-width:600px){
    .b2-story .b2-chip.c1, .b2-story .b2-chip.c2{ transform:none; }
    .b2-story .b2-chip.c1{ right:4px; } .b2-story .b2-chip.c2{ left:4px; }
  }
  
  /* Suchfeld mit wechselnden Berufen */
  .b2-tipp-slot{ gap:4px; font-size:11px; padding:8px 10px; overflow:hidden; letter-spacing:-.01em; }
  .b2-slot{ display:inline-block; font-weight:800; color:#20242f; white-space:nowrap; }
  .b2-slot-rest{ color:#6a7084; font-weight:600; white-space:nowrap; }
  .b2-slot.fest{ color:var(--blue); }
  
  /* Startseite: Handy Geschichte statt Bildschirmfotos im Ablauf */
  .proc:has(.pstage-story){ height:240vh; }
  .pstage-story{ width:100%; perspective:none; }
  .pstage-story .b2-story{ width:100%; }
  @media (max-width:900px){ .proc:has(.pstage-story){ height:auto; } }
  /* Startseite: neue Bausteine ohne .sub Rahmen */
  #page-home .b2-kacheln{ margin-top:clamp(26px,3vw,40px); }
  #page-home .b2-kachel p{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-dim); }
  .plan ul.plan-punkte{ gap:12px; margin-top:14px; }
  .plan ul.plan-punkte li{ align-items:center; gap:12px; font-weight:600; color:var(--ink-soft); line-height:1.4; }
  .plan.best ul.plan-punkte li{ color:#fff; }
  .plan-punkte .b2-sym.klein{ width:34px; height:34px; border-radius:11px; }
  .plan.best .plan-punkte .b2-sym{ box-shadow:0 10px 20px -10px rgba(0,0,0,.5); }
  /* Startseite: Überschrift sofort messbar sichtbar (LCP). Kein Einblenden über Deckkraft, nur ein Hochgleiten. */
  
  
  /* Unterseiten: Seitenkopf sofort messbar sichtbar (LCP), nur Hochgleiten statt Einblenden */
  .sub .subhero{ position:relative; }
  
  /* Mobiles Menü: Gruppen sauber ein und ausklappen (1 Hülle je Gruppe, sonst schieben sich die Zeilen ineinander) */
  .mgroup-body > *{ overflow:visible; }
  .mgroup-body > .mgroup-inner{ min-height:0; overflow:hidden; }
  .mgroup:not(.open) .mgroup-inner{ visibility:hidden; transition:visibility 0s linear .32s; }
  .mgroup.open .mgroup-inner{ visibility:visible; }
  .mgroup-inner .mlink:first-child{ margin-top:2px; }
  .mgroup-inner .mlink:last-child{ margin-bottom:14px; }

/* Handy Geschichte auf Handys und Tablets: flach statt 3D (Safari zeichnet 3D Ebenen fehlerhaft),
   Hinweise über und unter dem Handy statt darauf */
  @media (max-width:900px), (pointer:coarse){
    .b2-story{ perspective:none; padding-block:70px; min-height:0; }
    .b2-buehne, .b2-story .b2-handy{ transform-style:flat; }
    .b2-buehne{ transform:none !important; animation:none !important; }
    .b2-story .b2-handy::before, .b2-story .b2-handy::after{ display:none; }
    .b2-story .b2-handy{ box-shadow:0 40px 80px -40px rgba(14,16,60,.6), inset 0 0 0 2px #2a2d38; }
    .b2-story .b2-notch{ transform:translateX(-50%); }
    .b2-story .b2-chip.c1, .b2-story .b2-chip.c2{ transform:none; left:50%; right:auto; translate:-50% 0; }
    .b2-story .b2-chip.c1{ top:-54px; bottom:auto; }
    .b2-story .b2-chip.c2{ bottom:-54px; top:auto; }
    .b2-spiegel{ display:none; }
  }
  
  /* ============================================================ Website Check */
  :root{ --chk-gut:#0f7a58; --chk-warn:#9a6a05; --chk-krit:#b3261e; }
  .chk-hero .subhero-text{ max-width:760px; }
  .chk-start{ display:grid; gap:14px; margin-top:26px; max-width:620px; }
  .chk-feld{ display:grid; gap:8px; }
  .chk-label-text{ font-size:13.5px; font-weight:700; color:var(--ink-dim); }
  .chk-eingabe{ display:flex; align-items:center; gap:0; background:#fff; border:1.5px solid var(--line); border-radius:16px;
    padding:4px 6px 4px 16px; transition:border-color .25s, box-shadow .25s; }
  .chk-eingabe:focus-within{ border-color:var(--blue); box-shadow:0 0 0 4px rgba(47,91,255,.12); }
  .chk-praefix{ font-size:15px; color:var(--ink-faint); flex:none; }
  .chk-eingabe input{ flex:1; min-width:0; border:0; outline:none; background:transparent; font-family:var(--font); font-size:16.5px; padding:14px 8px; color:var(--ink); }
  .chk-start .btn{ justify-self:start; }
  .chk-start.laeuft .btn{ opacity:.6; }
  .chk-hinweis{ font-size:13.5px; color:var(--ink-faint); }

  .chk-laeuft{ display:flex; align-items:center; gap:16px; background:var(--blue-soft); border-radius:22px; padding:22px 24px; }
  .chk-laeuft[hidden]{ display:none; }
  .chk-laeuft p{ font-size:15.5px; color:var(--ink-dim); }
  .chk-laeuft b{ color:var(--ink); }
  .chk-puls{ width:20px; height:20px; border-radius:50%; background:var(--blue); flex:none; animation:chkPuls 1.1s ease-in-out infinite; }
  @keyframes chkPuls{ 0%,100%{ transform:scale(.7); opacity:.5; } 50%{ transform:scale(1); opacity:1; } }

  .chk-ergebnis{ display:grid; gap:26px; }
  .chk-ergebnis:focus{ outline:none; }
  .chk-kopf{ display:flex; align-items:center; gap:30px; background:linear-gradient(135deg,#f4f5ff,#fbf7ff 60%,#f6f9ff);
    border:1px solid #e6e8f6; border-radius:28px; padding:28px 30px; }
  .chk-kopf-text h2{ font-size:clamp(21px,2.6vw,28px); margin:8px 0 8px; }
  .chk-bilanz{ font-size:15.5px; color:var(--ink-dim); }
  .chk-ring{ position:relative; width:132px; height:132px; flex:none; }
  .chk-ring svg{ width:132px; height:132px; transform:rotate(-90deg); }
  .chk-ring circle{ fill:none; stroke-width:11; stroke-linecap:round; }
  .chk-ring-bg{ stroke:#e4e7f4; }
  .chk-ring-wert{ stroke:var(--blue); stroke-dasharray:327; stroke-dashoffset:calc(327px - 3.27px * var(--wert,0)); animation:chkRing 1.1s cubic-bezier(.3,.8,.3,1); }
  @keyframes chkRing{ from{ stroke-dashoffset:327px; } }
  .chk-gut .chk-ring-wert{ stroke:var(--chk-gut); }
  .chk-warn .chk-ring-wert{ stroke:var(--chk-warn); }
  .chk-kritisch .chk-ring-wert{ stroke:var(--chk-krit); }
  .chk-zahl{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:34px; font-weight:800; letter-spacing:-.04em; }
  .chk-zahl small{ font-size:14px; font-weight:700; color:var(--ink-faint); margin-left:2px; }

  .chk-gruppe h3{ display:flex; align-items:center; gap:12px; font-size:19px; margin-bottom:14px; }
  .chk-liste{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
  .chk-punkt{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
    background:#fff; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:16px; padding:16px 18px; }
  .chk-punkt b{ font-size:16px; font-weight:700; display:block; margin-bottom:4px; }
  .chk-punkt p{ font-size:15px; color:var(--ink-dim); }
  .chk-ico{ width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:#fff; }
  .chk-punkt.chk-gut{ border-left-color:var(--chk-gut); } .chk-punkt.chk-gut .chk-ico{ background:var(--chk-gut); }
  .chk-punkt.chk-warn{ border-left-color:var(--chk-warn); } .chk-punkt.chk-warn .chk-ico{ background:var(--chk-warn); }
  .chk-punkt.chk-kritisch{ border-left-color:var(--chk-krit); } .chk-punkt.chk-kritisch .chk-ico{ background:var(--chk-krit); }
  .chk-punkt.chk-info{ border-left-color:#8b90a6; } .chk-punkt.chk-info .chk-ico{ background:#8b90a6; }
  .chk-label{ font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin-left:8px; vertical-align:1px; }
  .chk-gut .chk-label{ color:var(--chk-gut); } .chk-warn .chk-label{ color:var(--chk-warn); }
  .chk-kritisch .chk-label{ color:var(--chk-krit); } .chk-info .chk-label{ color:#6a7080; }

  .chk-bericht{ display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;
    background:#0f1330; background-image:linear-gradient(135deg,#131a44,#2a1d5c 55%,#14265e); color:#fff; border-radius:28px; padding:34px; }
  .chk-bericht h3{ font-size:clamp(20px,2.4vw,26px); margin:8px 0 10px; }
  .chk-bericht .accent{ color:#bcd0ff; }
  .chk-bericht .kicker{ color:#a9bcff; }
  .chk-bericht-text p{ color:rgba(255,255,255,.78); font-size:15.5px; }
  .chk-bericht .field label{ color:#fff; }
  .chk-bericht .hint, .chk-bericht .formnote, .chk-bericht .consent{ color:rgba(255,255,255,.7); }
  .chk-bericht .consent a, .chk-bericht .formnote a{ color:#fff; text-decoration:underline; }
  .chk-bericht .field input{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff; }
  .chk-bericht .field input::placeholder{ color:rgba(255,255,255,.45); }
  .chk-bericht .field input:focus{ border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.14); }
  .chk-bericht .btn-primary{ background:#fff; color:#20307f; box-shadow:0 18px 36px -18px rgba(0,0,0,.6); }
  .chk-bericht .btn-primary::before{ background:#e9eeff; }
  @media (max-width:900px){ .chk-bericht{ grid-template-columns:1fr; padding:26px 22px; } }
  @media (max-width:760px){ .chk-kopf{ flex-direction:column; align-items:flex-start; gap:18px; padding:24px 22px; } }

/* Sterne überall im auffälligen Gold statt dunklem Senfton */
  :root{ --star:#ffb400; }
  .stars, .htitem .stars, .trustline .stars, .lp-kopf-info .stars, .gbadge .st, .review .stars, .b2-sterne, .quote .stars{
    color:var(--star) !important; text-shadow:0 1px 1px rgba(120,72,0,.35); }
  .quote .stars{ text-shadow:none; }

  /* ==================== PREMIUM 1.12 ==================== */

  /* Feines, gestaffeltes Einblenden einzelner Elemente */
  

  /* Linie, die beim Ueberfahren ueber die Karte waechst */
  .b2-kachel::before, .card::before, .plan::before, .review::before{
    content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
    background:linear-gradient(90deg,#2f5bff 0%,#7a5cff 48%,#3fc8ff 100%);
    transform:scaleX(0); transform-origin:left center;
    transition:transform .6s cubic-bezier(.2,.8,.25,1); }
  .b2-kachel:hover::before, .card:hover::before, .plan:hover::before, .review:hover::before{ transform:scaleX(1); }
  .card, .review{ overflow:hidden; }
  .plan::before{ left:20px; right:20px; border-radius:2px; }
  .review{ position:relative; transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease; }
  .review:hover{ transform:translateY(-5px); box-shadow:0 24px 48px -30px rgba(30,50,140,.42); }

  @media (prefers-reduced-motion:reduce){
    .b2-kachel::before, .card::before, .plan::before, .review::before{ display:none; }
    .review:hover{ transform:none; }
  }

  /* ==================== PROJEKTBAND 1.12 ==================== */
  .pband{ position:relative; margin:clamp(26px,3vw,40px) 0 0; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
  .pband-spur{ display:flex; width:max-content; padding:8px 0 22px; }
  .pb-gruppe{ display:flex; }
  
  .pb-karte{ position:relative; flex:0 0 auto; width:clamp(272px,25vw,348px); margin-right:22px; display:block;
    background:#fff; border:1px solid #e8eaf2; border-radius:22px; overflow:hidden;
    box-shadow:0 18px 40px -32px rgba(40,40,140,.35);
    transition:transform .35s cubic-bezier(.2,.8,.25,1), box-shadow .35s ease, border-color .35s ease; }
  .pb-karte:nth-child(4n+1){ background:linear-gradient(150deg,#eef3ff 0%,#fff 62%); border-color:#e2e9ff; }
  .pb-karte:nth-child(4n+2){ background:linear-gradient(150deg,#eaf9f0 0%,#fff 62%); border-color:#d8f1e2; }
  .pb-karte:nth-child(4n+3){ background:linear-gradient(150deg,#f4eeff 0%,#fff 62%); border-color:#ebe2ff; }
  .pb-karte:nth-child(4n+4){ background:linear-gradient(150deg,#e9f8fd 0%,#fff 62%); border-color:#d9f0f8; }
  .pb-karte:hover{ transform:translateY(-6px); border-color:rgba(47,91,255,.3); box-shadow:0 28px 54px -28px rgba(30,50,140,.5); }
  .pb-karte::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:3; pointer-events:none;
    background:linear-gradient(90deg,#2f5bff,#7a5cff 48%,#3fc8ff); transform:scaleX(0); transform-origin:left center;
    transition:transform .6s cubic-bezier(.2,.8,.25,1); }
  .pb-karte:hover::before{ transform:scaleX(1); }

  .pb-bild{ display:block; padding:12px 12px 0; }
  .pb-bar{ display:flex; align-items:center; padding:0 5px 9px; }
  .pb-bar i{ width:7px; height:7px; border-radius:50%; background:#d9dee8; margin-right:5px; }
  .pb-bar span{ margin-left:9px; font-size:11.5px; color:#8b95a7; }
  .pb-bild img{ width:100%; height:auto; border-radius:13px; border:1px solid #e9edf5; }
  .pb-fuss{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding:14px 18px 17px; min-height:82px; }
  .pb-txt{ min-width:0; }
  .pb-kick{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#8b95a7; }
  .pb-txt b{ display:block; margin-top:4px; font-size:16.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .pb-pfeil{ flex:0 0 auto; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--blue); color:#fff; box-shadow:0 10px 22px -12px rgba(47,91,255,.9);
    transition:transform .32s cubic-bezier(.2,.8,.25,1), background .3s ease; }
  .pb-karte:hover .pb-pfeil{ transform:translate(2px,-2px) scale(1.08); background:var(--blue-deep); }

  @media (max-width:600px){ .pb-karte{ width:78vw; margin-right:16px; } }
  @media (prefers-reduced-motion:reduce){
    .pband{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
    .pband-spur{ animation:none; }
    .pb-gruppe[aria-hidden="true"]{ display:none; }
    .pb-karte:hover{ transform:none; }
    .pb-karte::before{ display:none; }
  }

  /* ==================== WEICHE FARBFLAECHEN 1.12 ==================== */
  #vorteile, #arbeiten, #pakete, #fragen{ position:relative; isolation:isolate; overflow:clip; }
  
  @keyframes wsBlob{
    0%,100%{ transform:translate(-6%,-4%) scale(1); opacity:.40; }
    33%{ transform:translate(5%,3%) scale(1.09); opacity:.56; }
    66%{ transform:translate(-3%,6%) scale(.96); opacity:.44; } }
  
  

  /* ==================== HERO MIT PORTRAIT (Variante) ==================== */
  .hero-portrait{ text-align:left; padding-block:clamp(44px,6vw,76px) clamp(30px,4vw,48px); }
  .hero-portrait .hero-inner{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
    gap:clamp(30px,5vw,70px); align-items:center; }
  .hero-portrait .hero-txt{ min-width:0; }
  .hero-portrait h1{ text-align:left; font-size:clamp(32px,4.2vw,58px); }
  .hero-portrait .hero-trust{ gap:10px 20px; }
  .hero-portrait .htsep{ display:none; }
  .hero-portrait .lede{ margin-left:0; margin-right:0; max-width:34em; }
  .hero-portrait .hero-actions{ justify-content:flex-start; }
  .hero-portrait .hero-note{ text-align:left; }
  .hero-portrait .hero-trust{ justify-content:flex-start; }

  /* Bildseite */
  .hero-bild{ position:relative; justify-self:end; width:100%; max-width:430px; }
  .hero-bild::before{ content:''; position:absolute; z-index:0; inset:-14% -12% -10% -16%;
    background:radial-gradient(circle at 60% 40%, rgba(47,91,255,.34), rgba(122,92,255,.18) 46%, transparent 72%);
    filter:blur(48px); animation:wsBlob 22s ease-in-out infinite; }
  .hero-bild-rahmen{ position:relative; z-index:1; border-radius:28px; overflow:hidden;
    background:#0e1016; border:1px solid rgba(47,91,255,.22);
    box-shadow:0 44px 90px -44px rgba(16,24,80,.62), 0 2px 0 rgba(255,255,255,.55) inset;
    animation:heroSchweben 9s ease-in-out infinite; }
  .hero-bild-rahmen img{ width:100%; height:auto; display:block; }
  .hero-bild-rahmen::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(200deg, rgba(255,255,255,.14), transparent 38%); }
  @keyframes heroSchweben{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

  /* Plakette am Bild */
  .hero-bild-karte{ position:absolute; z-index:2; left:-26px; bottom:26px; display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border:1px solid rgba(20,30,80,.1); border-radius:16px; padding:11px 16px 11px 12px;
    box-shadow:0 26px 52px -26px rgba(16,24,80,.5);
    animation:heroSchweben 11s ease-in-out .8s infinite; }
  .hero-bild-karte .hbk-bild{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,var(--blue),#7a5cff); color:#fff; font-weight:800; font-size:14px; letter-spacing:-.02em; }
  .hero-bild-karte b{ display:block; font-size:14.5px; letter-spacing:-.01em; }
  .hero-bild-karte span{ display:block; font-size:12.5px; color:var(--ink-dim); margin-top:1px; }

  @media (max-width:1000px){
    .hero-portrait .hero-inner{ grid-template-columns:1fr; gap:clamp(26px,5vw,38px); text-align:center; }
    .hero-portrait h1, .hero-portrait .hero-note{ text-align:center; }
    .hero-portrait .lede{ margin-left:auto; margin-right:auto; }
    .hero-portrait .hero-actions, .hero-portrait .hero-trust{ justify-content:center; }
    .hero-bild{ justify-self:center; max-width:340px; order:-1; }
    .hero-bild-karte{ left:auto; right:-14px; bottom:18px; }
  }
  @media (max-width:520px){ .hero-bild{ max-width:228px; } .hero-bild-karte{ right:-10px; bottom:10px; padding:8px 12px 8px 9px; } .hero-bild-karte .hbk-bild{ width:32px; height:32px; border-radius:9px; font-size:12.5px; } .hero-bild-karte b{ font-size:13.5px; } .hero-bild-karte span{ font-size:11.5px; } }
  @media (prefers-reduced-motion:reduce){
    .hero-bild-rahmen, .hero-bild-karte, .hero-bild::before{ animation:none; }
  }


    /* ==================== FEINSCHLIFF 1.12.2 ====================
     1. Uebergang Hero, Werkzeugband, erste Sektion enger
     2. Echte Logos im Werkzeugband
     3. Sektionsueberschriften eine Stufe groesser, auf allen Seiten */

  /* 1.13.2: Werkzeugband und Ablauf ruecken zusammen, die klebende Box bringt ihren eigenen Abstand mit */
.tools + section{ padding-top:0; }

  /* Unter 900 px wird .proc-sticky statisch und brachte 64 px oben und
     unten mit. Die Sektion hat ihr eigenes Polster, das reicht. */
  @media (max-width:900px){
    .proc-sticky{ padding-block:0; }
  }

  @media (max-width:640px){
    .hero{ padding-block:clamp(40px,8vw,92px) 22px; }
    .tools{ padding:22px 0 12px; } .tools + section{ padding-top:16px; }
  }

  /* Logos statt Punkt. Einfarbig, damit das Band ruhig bleibt. */
  .chip .tlogo{ width:18px; height:18px; flex:none; border-radius:0; background:none;
    display:inline-flex; align-items:center; justify-content:center; }
  .chip .tlogo svg{ width:18px; height:18px; display:block; fill:#5d6780;
    transition:fill .3s ease; }
  .chip:hover .tlogo svg{ fill:var(--blue); }
  .tsprite{ position:absolute; width:0; height:0; overflow:hidden; }

  /* Ueberschriften */
  .sec-head h2{ font-size:clamp(34px,5vw,58px); }
  .ptext h2{ font-size:clamp(33px,4.8vw,56px); }
  .about-txt h2{ font-size:clamp(32px,4.2vw,48px); }
  .sub .subsec h2{ font-size:clamp(29px,3.6vw,44px); }


/* =====================================================================
   BEWEGUNG 1.13: GSAP (Core, ScrollTrigger, SplitText) und Lenis
   Die Bewegung selbst steht in assets/js/main.js. Hier stehen nur Anfangszustaende,
   Masken und das, was ohne JavaScript oder bei reduzierter Bewegung gelten muss.
   Regel: nur transform und opacity, nie Layout Eigenschaften.
   ===================================================================== */
html.ws-lenis, html.ws-lenis body{ height:auto; }
html.ws-lenis{ scroll-behavior:auto !important; }
html.lenis.lenis-stopped{ overflow:hidden; }

/* Anfangszustand im ersten Bildschirm, damit nichts flackert. GSAP holt es herein.
   .ws-not kommt nach 5 Sekunden ohne Bewegung, .ws-ruhig bei reduzierter Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .js:not(.ws-not):not(.ws-ruhig) .hero .enter{ transform:translateY(22px); }
  .js:not(.ws-not):not(.ws-ruhig) .hero.maske h1 .w{ transform:translateY(118%); }
}
.hero h1 .w{ position:relative; }
.hero h1 .w:not(.rotator){ display:inline-block; }
.w-maske{ display:inline-block; overflow:clip; vertical-align:top; padding:.06em .1em .16em; margin:-.06em -.1em -.16em; }
.rotator{ overflow:clip; padding:.05em .12em .18em; margin:-.05em -.12em -.18em; }
.ws-zeile{ display:block; }
[data-zaehler]{ font-variant-numeric:tabular-nums; }

/* Weiche Farbflaechen als echte Elemente statt ::before, damit GSAP sie bewegen kann */
.ws-blob{ position:absolute; z-index:-1; pointer-events:none; width:min(720px,68vw); aspect-ratio:1; border-radius:50%; filter:blur(72px); opacity:.45; }
.ws-blob-blau{ background:radial-gradient(circle,rgba(47,91,255,.20),transparent 68%); }
.ws-blob-violett{ background:radial-gradient(circle,rgba(122,92,255,.18),transparent 68%); }
.ws-blob-cyan{ background:radial-gradient(circle,rgba(63,200,255,.20),transparent 68%); }
@media (max-width:700px){ .ws-blob{ filter:blur(58px); opacity:.34; } }
@media (prefers-reduced-motion:reduce){ .ws-blob{ opacity:.3; } }

/* Kopfzeile bekommt erst nach dem ersten Scrollen einen Schatten */
.nav{ transition:box-shadow .35s ease, background-color .35s ease; }
.nav.nav-schatten{ box-shadow:0 10px 30px -18px rgba(10,16,60,.35); background:rgba(255,255,255,.88); }

/* Karten, die GSAP neigt und hebt: CSS macht nur noch Schatten, Rahmen und Linie */
.ws-motion :is(.pb-karte,.card,.plan,.wcard){ transition-property:box-shadow, border-color, background-color; }
.ws-motion .btn .lbl{ transition:none; }
.ws-motion .step{ transition:none; }

/* Projektband: Bild zoomt beim Ueberfahren leicht, im Rahmen beschnitten */
.pb-shot{ display:block; overflow:hidden; border-radius:13px; border:1px solid #e9edf5; }
.pb-shot img{ border:0; border-radius:0; transition:transform 1s cubic-bezier(.2,.8,.25,1); }
.pb-karte:hover .pb-shot img{ transform:scale(1.045); }

/* Ohne Bewegung oder ohne GSAP: alles sofort da */
.ws-not .hero .enter, .ws-ruhig .hero .enter{ opacity:1; transform:none; }
.ws-not .hero h1 .w, .ws-ruhig .hero h1 .w{ transform:none; }
@media (prefers-reduced-motion:reduce){
  .pb-karte:hover .pb-shot img{ transform:none; }
  .curtain{ display:none; }
  .sweep{ display:none; }
}

/* ==================== WOW 1.14 ====================
   Mehr sichtbare Höhepunkte, vor allem auf den Unterseiten. Es werden nur
   transform, opacity und Masken bewegt, keine Layout Eigenschaft. Alles aus
   bei reduzierter Bewegung oder ohne GSAP (dann fehlt die Klasse ws-motion). */

/* Seitenkopf: weiche Farbflaechen (JS), feines Punktraster, Marker unter dem Akzentwort */
.ws-motion .subhero{ isolation:isolate; overflow:clip; }
.ws-motion .subhero::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(47,91,255,.30) 1px, transparent 1.4px); background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 82% 30%, #000 0%, transparent 70%); mask-image:radial-gradient(ellipse 60% 90% at 82% 30%, #000 0%, transparent 70%); }
.subhero .ws-blob{ width:min(620px,70vw); }
.js .subhero h1 .accent{ position:relative; z-index:0; }
.js .subhero h1 .accent::after{ content:''; position:absolute; left:-.03em; right:0; bottom:.03em; height:.16em; border-radius:.08em; z-index:-1;
  background:linear-gradient(90deg, rgba(47,91,255,.20), rgba(124,77,255,.32) 60%, rgba(192,77,255,.22)); transform:scaleX(0); transform-origin:left center; }
.ws-motion .subhero h1 .accent::after{ transform:scaleX(1); transition:transform .9s cubic-bezier(.2,.8,.25,1) .55s; }
.ws-not .subhero h1 .accent::after, .ws-ruhig .subhero h1 .accent::after{ transform:scaleX(1); }

/* Karten: ein Lichtrand folgt der Maus. JS vergibt die Klasse ws-spot und setzt --mx und --my, nur mit feinem Zeiger. */
.ws-motion .ws-spot{ position:relative; }
.ws-motion .ws-spot::before{ content:''; display:block; position:absolute; inset:0; left:0; right:0; top:0; height:auto; z-index:3; pointer-events:none;
  border-radius:inherit; padding:1.5px; opacity:0; transform:none; transition:opacity .45s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(47,91,255,.95), rgba(124,77,255,.5) 38%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; }
.ws-motion .ws-spot:hover::before{ opacity:1; transform:none; }

/* Projektbilder in Rastern: ein farbiger Vorhang schiebt sich weg, das Bild zoomt aus */
.ws-motion .wgrid .pmini{ position:relative; }
.ws-motion .wgrid .pmini::after{ content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(120deg,#2f5bff 0%,#7c4dff 60%,#c04dff 100%);
  transform:scaleX(1); transform-origin:right center; transition:transform 1s cubic-bezier(.75,0,.2,1) var(--vz,0s); }
.ws-motion .wgrid.b2-an .pmini::after{ transform:scaleX(0); }
.ws-motion .wgrid .pmini img{ transform:scale(1.16); transition:transform 1.5s cubic-bezier(.2,.8,.25,1) var(--vz,0s); }
.ws-motion .wgrid.b2-an .pmini img{ transform:none; }
.wgrid > :nth-child(2) .pmini{ --vz:.12s; }
.wgrid > :nth-child(3) .pmini{ --vz:.24s; }

/* Schritte: die Ziffern springen ein, sobald der Zeitstrahl sichtbar wird */
.js .b2-schritte li .b2-nr{ transform:scale(.5); transition:transform .9s cubic-bezier(.2,1.6,.4,1) calc(var(--d) + 300ms); }
.js .b2-schritte.b2-an li .b2-nr{ transform:none; }
/* Sicherheitsnetz ohne GSAP oder bei reduzierter Bewegung: Schritte sind trotzdem da */
.ws-not .b2-schritte li, .ws-ruhig .b2-schritte li{ opacity:1; transform:none; }
.ws-not .b2-schritte li .b2-nr, .ws-ruhig .b2-schritte li .b2-nr{ transform:none; }
.ws-not .b2-schritte::after, .ws-ruhig .b2-schritte::after{ transform:none; }

/* Knoepfe in den Handlungsbaendern: ein Lichtstreifen laeuft beim Ueberfahren durch */
.subcta .btn-primary::after, .bcta .btn-hell::after{ content:''; position:absolute; top:-40%; bottom:-40%; left:0; width:38%; z-index:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 0%, rgba(47,91,255,.16) 50%, transparent 100%); transform:translateX(-160%) skewX(-18deg); transition:transform .9s cubic-bezier(.2,.8,.25,1); }
.subcta .btn-primary:hover::after, .bcta .btn-hell:hover::after{ transform:translateX(320%) skewX(-18deg); }

/* Abschlussband: ein Glanz zieht alle paar Sekunden ueber die farbige Box (JS legt das Element an und bewegt es) */
.cta-glanz{ position:absolute; top:-30%; bottom:-30%; left:0; width:18%; z-index:-1; pointer-events:none; opacity:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%); }

@media (prefers-reduced-motion:reduce){
  .subcta .btn-primary::after, .bcta .btn-hell::after, .cta-glanz{ display:none; }
}

/* =====================================================================
   DESIGN 2.0
   Seide als Hintergrund im Kopf, Schlagworte färben sich beim Einblenden
   ein, Kopfzeile als schwebende Pille, Handymenü mit Ebenen, neue Fußzeile.
   Dieser Block steht bewusst am Ende und gewinnt gegen ältere Regeln.
   Bewegung: nur transform und opacity (dazu die Farbfüllung über --r),
   bei reduzierter Bewegung steht alles still. Inhalte stehen ohne JS im DOM.
   ===================================================================== */

/* Ältere Regeln, die dem neuen Auftritt im Weg stehen */
.nav, .nav.nav-schatten, body.mega-offen .nav{ background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; box-shadow:none; }
.nav-row{ padding-block:0; }
.brand img.brand-logo{ width:155px; height:40px; object-fit:contain; border-radius:0; }
@media (max-width:760px){ .brand img.brand-logo{ width:148px; height:38px; } }
.burger{ padding:0; }
.burger span{ display:block; width:auto; }
#sparks, .curtain{ display:none !important; }
.ws-motion .subhero::after{ content:none; }
.subhero .ws-blob{ display:none; }
.subhero h1 .accent::after{ content:none !important; }
.ripple{ display:none; }

/* Layout: zentrierter Hero, darunter eine 3D Bühne mit echten Kundenseiten; weiß, Apple artig, Markenblau führt */
:root{
  --bg:#ffffff; --ink:#0e1016; --ink-soft:#3d4252; --ink-dim:#555c70; --line:#e7e9f0;
  --blue:#2f5bff; --blue-deep:#1a3ad6; --blue-soft:#eef2ff; --violet:#7c4dff; --cyan:#22c3f5;
  --star:#ffb400; --wa:#1faa59; --lh-green:#0cce6b; --lh-ink:#0a7a3e;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(20px,5vw,60px); --maxw:1160px; --navh:64px;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.7,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --font-accent:var(--font);
  --g-marke:linear-gradient(120deg,#2f5bff 0%,#6a46ff 55%,#7c4dff 72%,#22a6f5 100%);
  color-scheme:light;
}
*{ box-sizing:border-box; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; }
h1,h2,h3{ margin:0; font-family:var(--font); }
p{ margin:0; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--blue); color:#fff; }
:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:10px; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:10px; }
.skip:focus{ top:12px; }

/* ================= Kopfzeile ================= */
.nav{ position:sticky; top:env(safe-area-inset-top,0px); z-index:60; transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
.nav-row{ position:relative; }
.nav-row::before{ content:''; position:absolute; z-index:-1; top:7px; bottom:7px; left:calc(var(--gutter) * .5 - 6px); right:calc(var(--gutter) * .5 - 6px); border-radius:999px;
  background:rgba(255,255,255,.8); -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px);
  box-shadow:0 16px 40px -20px rgba(18,28,90,.38), 0 0 0 1px rgba(14,16,22,.06); opacity:0; transform:scale(.97) translateY(-6px); transition:opacity .45s ease, transform .6s var(--ease-out); pointer-events:none; }
.nav.fest .nav-row::before{ opacity:1; transform:none; }
.menu-offen .nav-row::before{ opacity:0; transform:scale(.97) translateY(-6px); }
.nav.fest .burger{ box-shadow:none; background:rgba(255,255,255,.6); }
.menu-offen .nav{ position:fixed; left:0; right:0; top:var(--navtop,0px); background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.menu-offen main{ padding-top:var(--navh); }
.nav-row{ isolation:isolate; height:var(--navh); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand-logo{ width:155px; height:40px; object-fit:contain; }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ position:relative; font-size:14.5px; font-weight:600; color:var(--ink-soft); transition:color .25s; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--blue); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease-out); }
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.burger{ display:none; position:relative; width:46px; height:46px; border-radius:50%; border:1px solid rgba(14,16,22,.1); background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; box-shadow:0 6px 18px -10px rgba(20,30,90,.35); transition:background-color .3s, border-color .3s; }
.burger span{ position:absolute; left:14px; right:14px; height:2px; border-radius:2px; background:var(--ink); transition:transform .5s var(--ease-out); }
.burger span:nth-child(1){ top:18px; } .burger span:nth-child(2){ top:25px; }
.burger[aria-expanded="true"]{ background:#fff; border-color:var(--line); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }
.nav .nav-cta{ min-height:44px; padding:0 22px; font-size:14.5px; }
@media (max-width:900px){ .nav-links,.nav .nav-cta{ display:none; } .burger{ display:block; } }

/* ================= Knöpfe ================= */
.btn{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:52px; padding:0 30px; border-radius:999px; font-weight:700; font-size:15.5px; letter-spacing:-.01em; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; }
.btn .lbl{ position:relative; display:inline-flex; align-items:center; gap:9px; }
.btn .arw{ display:inline-block; transition:transform .35s var(--ease-out); }
.btn:hover .arw{ transform:translateX(5px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 16px 34px -14px rgba(47,91,255,.7), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-primary::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,var(--blue-deep),#5b3dff); transform:translateY(102%); transition:transform .45s var(--ease-out); }
.btn-primary:hover::before{ transform:none; }
.btn-primary::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; z-index:-1; background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent); transform:translateX(-120%) skewX(-18deg); }
.held .btn-primary::after{ animation:glanz 4.8s var(--ease-io) 2.4s infinite; }
@keyframes glanz{ 0%{ transform:translateX(-120%) skewX(-18deg); } 28%,100%{ transform:translateX(320%) skewX(-18deg); } }
.btn-ghost{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-color:rgba(14,16,22,.1); color:var(--ink); }
.btn-ghost::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--blue-soft); border-radius:999px; transform:scale(0); transition:transform .45s var(--ease-out); }
.btn-ghost:hover{ border-color:rgba(47,91,255,.4); color:var(--blue-deep); }
.btn-ghost:hover::before{ transform:none; }
.welle{ position:absolute; border-radius:50%; background:rgba(255,255,255,.45); transform:scale(0); pointer-events:none; animation:welle .7s ease-out forwards; }
.btn-ghost .welle{ background:rgba(47,91,255,.2); }
@keyframes welle{ to{ transform:scale(1); opacity:0; } }
/* Leuchtring um den Hauptknopf */
.cta-hof{ position:relative; display:inline-flex; border-radius:999px; }
.cta-hof::before{ content:''; position:absolute; inset:-10px; border-radius:999px; background:radial-gradient(closest-side,rgba(92,78,255,.45),transparent); filter:blur(8px); z-index:-1; transform:scale(.9); animation:hof 3.6s ease-in-out infinite; }
@keyframes hof{ 0%,100%{ transform:scale(.9); opacity:.55; } 50%{ transform:scale(1.06); opacity:1; } }

/* ================= Hero ================= */
.held{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; margin-top:calc(-1 * var(--navh)); padding-top:calc(var(--navh) + clamp(26px,4.4vw,56px)); padding-bottom:clamp(40px,7vw,96px); text-align:center;
  background:
    radial-gradient(60% 34% at 12% 0%, rgba(47,91,255,.30), transparent 70%),
    radial-gradient(50% 30% at 92% 4%, rgba(124,77,255,.26), transparent 70%),
    radial-gradient(70% 30% at 50% 74%, rgba(34,195,245,.22), transparent 70%),
    radial-gradient(60% 30% at 80% 82%, rgba(124,77,255,.2), transparent 70%),
    var(--bg); }
.held-seide{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; opacity:0; transition:opacity 1.6s ease; pointer-events:none; }
.held-seide.an{ opacity:1; }
.held-ende{ position:absolute; left:0; right:0; bottom:0; height:140px; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg)); }
.held-txt{ position:relative; max-width:1000px; margin-inline:auto; }
.held-copy{ position:relative; z-index:2; }

.h1{ font-weight:800; letter-spacing:-.045em; line-height:1; color:var(--ink); }
.h1-ort{ display:inline-flex; align-items:center; gap:9px; margin-bottom:clamp(18px,2.4vw,26px); padding:8px 16px 8px 13px; border-radius:999px; font-size:13.5px; line-height:1.2; font-weight:700; letter-spacing:0; color:var(--blue-deep);
  background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border:1px solid rgba(47,91,255,.16); box-shadow:0 10px 26px -14px rgba(47,91,255,.5); }
.h1-ort .punkt{ position:relative; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.h1-ort .punkt::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--blue); animation:puls 2.2s ease-out infinite; }
@keyframes puls{ from{ transform:scale(1); opacity:.7; } to{ transform:scale(3); opacity:0; } }
.m{ display:block; overflow:hidden; overflow:clip; padding:.06em .08em .26em; margin:-.06em -.08em -.26em; }
.m > span{ display:block; }
.h1-l1{ display:block; font-size:min(9.6vw,46px); }
.h1-l2{ position:relative; display:block; margin-top:.02em; font-size:min(16vw,92px); font-weight:900; letter-spacing:-.055em; line-height:.96; }
.rot{ display:grid; justify-items:center; }
.ph{ grid-area:1/1; display:block; }
@property --r{ syntax:'<length>'; inherits:true; initial-value:0px; }
.ph .ln{ display:block; width:fit-content; margin-inline:auto; padding-inline:.02em; padding-block:.1em .26em; margin-block:-.1em -.26em;
  color:var(--ink);
  background-image:radial-gradient(circle at var(--kx,60%) var(--ky,60%),transparent calc(var(--r) - 70px),var(--ink) var(--r)),
                   linear-gradient(100deg,#2f5bff 0%,#6a46ff 22%,#2f5bff 44%,#16a4f5 66%,#6a46ff 84%,#2f5bff 100%);
  background-size:100% 100%,260% 100%; background-repeat:no-repeat,repeat;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:fluss 10s linear infinite; }
@keyframes fluss{ to{ background-position:0 0,-260% 0; } }
.ph.farbe{ --r:1800px; }
.ph{ --r:0px; transition:transform .9s var(--ease-out), --r 1.15s cubic-bezier(.3,.6,.2,1); }
.js .ph:not(.an){ transform:translateY(140%); }
.js .ph.raus{ transform:translateY(-140%); }
/* Einstieg: Überschrift aus der Maske, Rest gleitet hoch. Keine Deckkraft im ersten Bild (LCP) */
.js [data-maske]{ transform:translateY(135%); }
.js [data-rein]{ transform:translateY(26px); }
.js #buehne[data-rein]{ transform:translateY(90px); }
.go [data-maske],.go [data-rein]{ transform:none; transition:transform 1.1s var(--ease-out) var(--dl,0s); }
.go #buehne[data-rein]{ transform:none; transition-duration:1.7s; }
@media (min-width:760px){
  .h1-l1{ font-size:min(5.6vw,74px); }
  .h1-l2{ font-size:min(7.2vw,104px); }
  .ph{ white-space:nowrap; }
  .ph .ln{ display:inline; margin:0; }
}
.held-lede{ margin:clamp(34px,3.1vw,46px) auto 0; max-width:46ch; font-size:clamp(16.5px,1.5vw,19px); line-height:1.62; color:var(--ink-dim); text-wrap:pretty; }
.held-lede strong{ color:var(--ink-soft); font-weight:650; }
.held-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; margin-top:clamp(24px,3vw,34px); }
.held-trust{ margin-top:22px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.g-plakette{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px; background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(14,16,22,.07); box-shadow:0 10px 24px -16px rgba(20,30,90,.4); font-size:14px; font-weight:600; color:var(--ink-soft); }
.g-plakette .sterne{ display:inline-flex; gap:1px; color:var(--star); font-size:15px; letter-spacing:0; }
.g-plakette b{ color:var(--ink); font-weight:800; font-variant-numeric:tabular-nums; }
.g-plakette .gz{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue-deep); font-weight:800; font-size:12px; }
.trust-zeile{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-size:13.5px; color:var(--ink-dim); font-weight:500; }
.trust-zeile span{ display:inline-flex; align-items:center; gap:7px; }
.trust-zeile span::before{ content:''; width:6px; height:6px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet)); }
@media (max-width:759px){
  .held-lede{ margin-top:50px; }
  .held-knoepfe{ flex-direction:column; }
  .held-knoepfe .cta-hof, .held-knoepfe .btn-primary{ width:100%; max-width:360px; }
  .held-knoepfe .btn-ghost{ min-height:48px; padding:0 22px; }
}

/* ================= Cursor "Maxi" ================= */
.cur{ position:absolute; left:0; top:0; z-index:4; pointer-events:none; transform:translate(110vw,40px); transition:transform 1.05s var(--ease-out); }
.cur-in{ display:block; transform-origin:4px 3px; }
.cur svg{ width:22px; height:24px; display:block; filter:drop-shadow(0 3px 5px rgba(60,30,160,.35)); }
.cur .cur-tag{ position:absolute; left:17px; top:19px; transition:transform .6s var(--ease-out); padding:3px 9px 4px; border-radius:3px 10px 10px 10px; background:var(--violet); color:#fff; font-size:12px; font-weight:700; letter-spacing:.01em; white-space:nowrap; box-shadow:0 6px 14px -6px rgba(124,77,255,.8); }
.h1{ position:relative; z-index:1; }
.kw{ position:absolute; left:0; top:0; width:0; height:0; z-index:0; pointer-events:none; perspective:420px; transform-style:preserve-3d; }
.kw i{ position:absolute; left:-70px; top:-70px; width:140px; height:140px; border-radius:50%; border:2.5px solid rgba(106,70,255,.85); box-shadow:0 0 22px rgba(106,70,255,.45), inset 0 0 16px rgba(34,195,245,.45); opacity:0; }
.kw i:nth-child(2){ border-color:rgba(34,195,245,.85); box-shadow:0 0 22px rgba(34,195,245,.45), inset 0 0 16px rgba(106,70,255,.4); }
.kw b{ position:absolute; left:-26px; top:-26px; width:52px; height:52px; border-radius:50%; border:2px solid rgba(47,91,255,.9); opacity:0; }
.kw em{ position:absolute; left:-130px; top:-130px; width:260px; height:260px; border-radius:50%; background:radial-gradient(closest-side,rgba(124,77,255,.34),rgba(34,195,245,.12) 60%,transparent); opacity:0; }
.cur.links .cur-tag{ transform:translateX(calc(-100% - 22px)); }
.funke{ position:absolute; left:0; top:0; width:2px; height:9px; margin:-4.5px 0 0 -1px; border-radius:2px; background:linear-gradient(var(--violet),var(--cyan)); pointer-events:none; z-index:4; }

/* ================= Rundsiegel ================= */
.siegel{ position:absolute; z-index:3; left:-15%; top:66%; width:132px; height:132px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.7); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); border:1px solid rgba(255,255,255,.9); box-shadow:0 24px 50px -24px rgba(18,28,90,.45); transition:transform .5s var(--spring); }
.siegel:hover{ transform:scale(1.06); }
.siegel-text{ position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); animation:ringdreh 18s linear infinite; }
.siegel-text text{ font-size:10.4px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-soft); }
.siegel-pfeil{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); box-shadow:0 12px 24px -10px rgba(92,78,255,.8); }
.siegel-pfeil svg{ width:22px; height:22px; animation:pfeilHuepf 2.2s ease-in-out infinite; }
@keyframes pfeilHuepf{ 0%,100%{ transform:translateY(-2px); } 50%{ transform:translateY(4px); } }
@media (max-width:1180px){ .siegel{ display:none; } }
.js .siegel{ transform:scale(.4) rotate(-40deg); opacity:0; }
.go .siegel{ transform:none; opacity:1; transition:transform 1.2s var(--spring) 1.3s, opacity .5s ease 1.3s; }
.go .siegel:hover{ transform:scale(1.06); transition:transform .5s var(--spring); }

/* ================= 3D Objekte ================= */
.objs{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.obj{ position:absolute; left:var(--x); top:var(--y); width:var(--s); will-change:transform; }
.obj-pop{ display:block; }
.obj-fl{ display:block; animation:schweben var(--d,7s) ease-in-out var(--dl,0s) infinite; }
@keyframes schweben{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(0,-14px,0) rotate(var(--rot,6deg)); } }
.js .obj-pop{ transform:scale(.2); opacity:0; }
.go .obj-pop{ transform:none; opacity:1; transition:transform 1.1s var(--spring) var(--in,.6s), opacity .5s ease var(--in,.6s); }
.o-orb{ display:block; width:100%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98) 0 4%,rgba(255,255,255,.5) 10%,rgba(255,255,255,0) 26%),
             radial-gradient(circle at 74% 82%,rgba(96,232,255,.95) 0%,rgba(96,232,255,0) 44%),
             radial-gradient(circle at 42% 40%,#8aa2ff 0%,#2f5bff 44%,#1b2fb0 80%,#111b6e 100%);
  box-shadow:inset -8px -10px 22px rgba(8,14,70,.45), inset 6px 8px 16px rgba(255,255,255,.28), 0 26px 40px -18px rgba(47,91,255,.65); }
.o-orb.vio{ background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98) 0 4%,rgba(255,255,255,.5) 10%,rgba(255,255,255,0) 26%),
             radial-gradient(circle at 74% 82%,rgba(255,140,230,.8) 0%,rgba(255,140,230,0) 44%),
             radial-gradient(circle at 42% 40%,#b39bff 0%,#7c4dff 46%,#4a22c9 82%,#2a137a 100%);
  box-shadow:inset -6px -8px 16px rgba(30,8,90,.45), inset 5px 6px 12px rgba(255,255,255,.3), 0 20px 30px -14px rgba(124,77,255,.6); }
.o-orb.cy{ background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.98) 0 5%,rgba(255,255,255,0) 28%),
             radial-gradient(circle at 42% 40%,#9befff 0%,#22c3f5 48%,#0b7fc4 100%);
  box-shadow:inset -4px -5px 10px rgba(4,50,100,.4), 0 14px 22px -10px rgba(34,195,245,.7); }
.o-ring{ position:relative; display:block; width:100%; aspect-ratio:1; transform:rotateX(62deg) rotateY(-16deg); transform-style:preserve-3d; }
.o-ring i{ position:absolute; inset:0; border-radius:50%; animation:ringdreh 14s linear infinite;
  background:conic-gradient(from 200deg,#22c3f5,#2f5bff 22%,#7c4dff 45%,#c46bff 58%,#7c4dff 72%,#2f5bff 86%,#22c3f5);
  -webkit-mask:radial-gradient(farthest-side,transparent 61%,#000 62.5%); mask:radial-gradient(farthest-side,transparent 61%,#000 62.5%); }
.o-ring i::after{ content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(farthest-side,rgba(10,10,60,.35) 61%,rgba(255,255,255,.55) 76%,rgba(255,255,255,.1) 86%,rgba(10,10,60,.4) 100%); }
.o-ring::after{ content:''; position:absolute; inset:8%; border-radius:50%; box-shadow:0 60px 60px -30px rgba(90,60,255,.35); }
@keyframes ringdreh{ to{ transform:rotate(360deg); } }
.o-tile{ display:grid; place-items:center; width:100%; aspect-ratio:1; border-radius:28%; color:#fff; font-weight:800; letter-spacing:-.05em; font-size:calc(var(--s) * .32); line-height:1;
  background:linear-gradient(145deg,#a58aff 0%,#6c47ff 46%,#3f2bd8 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.6), inset 0 -7px 12px rgba(24,10,110,.45), 0 7px 0 -1px #2f1fb0, 0 26px 34px -14px rgba(90,60,255,.65); }
.o-tile span{ transform:translateY(-3%); text-shadow:0 2px 6px rgba(20,8,90,.35); }
.o-cap{ display:block; width:100%; aspect-ratio:2.3; border-radius:999px;
  background:linear-gradient(180deg,#92e6ff 0%,#22c3f5 34%,#2f5bff 100%);
  box-shadow:inset 0 3px 2px rgba(255,255,255,.65), inset 0 -6px 10px rgba(10,30,120,.35), 0 20px 30px -14px rgba(34,160,245,.7); }
.o-stern{ display:block; width:100%; aspect-ratio:1; animation:funkeln var(--d,3.2s) ease-in-out var(--dl,0s) infinite; }
.o-stern svg{ width:100%; height:100%; display:block; }
@keyframes funkeln{ 0%,100%{ transform:scale(.55) rotate(0deg); opacity:.35; } 50%{ transform:scale(1) rotate(45deg); opacity:1; } }

/* ================= Bühne mit Kundenseiten ================= */
.buehne{ position:relative; z-index:1; margin:clamp(46px,6vw,80px) auto 0; max-width:1060px; perspective:1600px; perspective-origin:50% 0%; }
.b3d{ position:relative; transform-style:preserve-3d; transform-origin:50% 12%; }
.browser{ position:relative; width:min(900px,90%); margin:0 auto; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 60px 110px -40px rgba(24,36,120,.55), 0 0 0 1px rgba(14,16,22,.07); }
.b-leiste{ height:42px; display:flex; align-items:center; gap:12px; padding:0 16px; background:linear-gradient(#fdfdfe,#f1f2f6); border-bottom:1px solid var(--line); }
.b-punkte{ display:flex; gap:7px; flex:none; }
.b-punkte i{ width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.b-punkte i:nth-child(2){ background:#febc2e; } .b-punkte i:nth-child(3){ background:#28c840; }
.b-url{ flex:1; max-width:430px; margin-inline:auto; height:27px; border-radius:8px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:7px; font-size:12.5px; color:var(--ink-soft); font-weight:500; white-space:nowrap; overflow:hidden; }
.b-url svg{ width:11px; height:11px; flex:none; color:var(--ink-dim); }
.b-url .caret{ width:1px; height:14px; background:var(--blue); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.b-platz{ width:88px; flex:none; }
.b-screen{ position:relative; aspect-ratio:880/386; background:#0b0d14; overflow:hidden; }
.b-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 1.4s var(--ease-out); }
.b-screen img.an{ opacity:1; transform:none; }
.b-screen img:first-child{ opacity:1; transform:none; }
.b-screen.laeuft img:first-child:not(.an){ opacity:0; transform:scale(1.06); }
.fon{ position:absolute; margin:0; width:clamp(150px,17vw,196px); }
.fon-tr{ display:block; transform-style:preserve-3d; }
.fon-fl{ display:block; animation:schweben var(--d,6s) ease-in-out var(--dl,0s) infinite; --rot:0deg; }
.fon-body{ position:relative; display:block; aspect-ratio:440/819; border-radius:17% / 8.4%; padding:4.2%; background:linear-gradient(145deg,#353a4a,#0d0f16 55%,#1d2130); box-shadow:0 44px 70px -26px rgba(18,28,90,.6), inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 4px #07080c; }
.fon-body img{ width:100%; height:100%; object-fit:cover; object-position:top; border-radius:13.5% / 6.6%; }
.fon-body::after{ content:''; position:absolute; left:50%; top:5.6%; width:30%; height:3.4%; margin-left:-15%; border-radius:999px; background:#05060a; }
.bchip{ position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:18px; text-align:left;
  background:rgba(255,255,255,.95); border:1px solid #fff; box-shadow:0 22px 44px -20px rgba(18,28,90,.45), 0 0 0 1px rgba(14,16,22,.05); }
.bchip-in{ display:flex; align-items:center; gap:10px; }
.bchip small{ display:block; font-size:11.5px; line-height:1.3; color:var(--ink-dim); font-weight:500; }
.bchip strong{ display:block; font-size:14px; line-height:1.25; font-weight:750; color:var(--ink); }
.c-bew .sterne{ color:var(--star); font-size:13px; letter-spacing:1px; line-height:1; }
.c-bew .zahl{ font-size:26px; font-weight:850; letter-spacing:-.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; padding:2px 4px 2px 6px; }
.ring-wert{ position:relative; width:46px; height:46px; flex:none; }
.ring-wert svg{ width:46px; height:46px; transform:rotate(-90deg); }
.ring-wert circle{ fill:none; stroke-width:4.5; }
.ring-wert .bg{ stroke:#dff7ea; } .ring-wert .vg{ stroke:var(--lh-green); stroke-linecap:round; stroke-dasharray:119.4; stroke-dashoffset:119.4; }
.ring-wert b{ position:absolute; inset:0; display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--lh-ink); font-variant-numeric:tabular-nums; }
.c-note{ gap:11px; padding:11px 16px 11px 11px; border-radius:20px; min-width:250px; }
.c-note .app{ width:40px; height:40px; flex:none; border-radius:11px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 4px 10px -4px rgba(20,30,90,.3); display:grid; place-items:center; }
.c-note .app img{ width:30px; height:auto; }
.c-note .zeit{ margin-left:auto; align-self:flex-start; font-size:11px; color:var(--ink-dim); padding-left:10px; }
.c-proj{ padding:8px 14px; border-radius:999px; font-size:12.5px; font-weight:700; color:#fff; background:linear-gradient(100deg,var(--blue),var(--violet)); border:0; gap:8px; box-shadow:0 14px 30px -14px rgba(90,60,255,.8); }
.c-proj i{ width:7px; height:7px; border-radius:50%; background:#7dffb2; box-shadow:0 0 0 3px rgba(125,255,178,.28); }
.bchip-fl{ animation:schweben var(--d,6.5s) ease-in-out var(--dl,0s) infinite; --rot:0deg; }
.js .bchip-pop{ transform:scale(.6) translateY(16px); opacity:0; }
.go .bchip-pop{ transform:none; opacity:1; transition:transform .9s var(--spring) var(--in,1.4s), opacity .4s ease var(--in,1.4s); }
.c-note-w{ transition:transform .8s var(--spring), opacity .45s ease; }
.js .c-note-w:not(.zeigen){ transform:translateX(40px) scale(.94); opacity:0; }

/* Desktop Anordnung */
@media (min-width:901px){
  .p-c{ display:none; }
  .p-l{ left:0; bottom:-12%; }
  .p-r{ right:1%; bottom:-20%; }
  .p-l .fon-tr{ transform:translateZ(90px) rotate(-6deg); }
  .p-r .fon-tr{ transform:translateZ(130px) rotate(5deg); }
  .c-bew-w{ left:-1%; top:14%; }
  .c-ring-w{ right:-1%; top:4%; }
  .c-note-w{ right:-3%; top:46%; }
  .c-proj-w{ left:7%; top:-50px; }
}
/* Handy Anordnung: 3 Handys als Fächer */
@media (max-width:900px){
  .buehne{ height:clamp(400px,100vw,660px); }
  .b3d{ height:100%; }
  .browser{ display:none; }
  .fon{ left:50%; top:30px; width:clamp(150px,42vw,250px); margin-left:calc(clamp(150px,42vw,250px) / -2); }
  .p-l .fon-tr{ transform:translateX(-60%) translateY(26px) rotate(-11deg) scale(.84); }
  .p-r .fon-tr{ transform:translateX(60%) translateY(26px) rotate(11deg) scale(.84); }
  .p-c{ z-index:2; }
  .c-bew-w{ left:-4px; top:0; }
  .c-ring-w{ right:-4px; top:2%; }
  .c-note-w{ left:50%; bottom:6px; margin-left:-150px; width:300px; }
  .c-note{ min-width:0; width:300px; }
  .c-proj-w{ display:none; }
  .js .c-note-w:not(.zeigen){ transform:translateY(24px) scale(.94); }
}

/* ================= Werkzeugband ================= */
.werkzeuge{ position:relative; padding-block:8px 34px; overflow:hidden; }
.band-titel{ text-align:center; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:16px; }
.band-reihe{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.wtrack{ display:flex; gap:12px; width:max-content; animation:band 42s linear infinite; }
@keyframes band{ to{ transform:translateX(-50%); } }
.tchip{ display:inline-flex; align-items:baseline; gap:8px; padding:11px 18px; border-radius:999px; background:#f7f7fe; border:1px solid #ebeaf8; font-size:14.5px; font-weight:700; white-space:nowrap; }
.tchip em{ font-style:normal; font-weight:500; font-size:13px; color:var(--ink-dim); }


/* WhatsApp Knopf */
.wa-float{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:50; display:inline-flex; align-items:center; gap:10px; padding:8px 20px 8px 8px; border-radius:999px; color:#fff; font-weight:800; font-size:16px;
  background:linear-gradient(160deg,rgba(47,190,110,.92),rgba(18,110,62,.94)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 16px 36px -14px rgba(18,110,62,.7), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .5s var(--spring), opacity .3s; }
.wa-float .wa-float-ico{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); }
.wa-float svg{ width:22px; height:22px; }
.menu-offen .wa-float{ transform:translateY(120px); opacity:0; pointer-events:none; }

/* ================= Handymenü ================= */
.mm2{ position:fixed; inset:0; z-index:58; }
.mm-wipe{ position:absolute; left:var(--cx,90%); top:var(--cy,32px); width:var(--dm,2400px); height:var(--dm,2400px); margin:calc(var(--dm,2400px) / -2) 0 0 calc(var(--dm,2400px) / -2); border-radius:50%; transform:scale(0); transition:transform .75s var(--ease-io); will-change:transform; }
.mm-wipe.w1{ background:linear-gradient(135deg,#2f5bff,#7c4dff 55%,#22c3f5); }
.mm-wipe.w2{ background:#fff; transition-delay:.1s; }
.mm2.offen .mm-wipe{ transform:scale(1); }
.mm2.zu .w1{ transition-delay:.12s; } .mm2.zu .w2{ transition-delay:0s; }
.mm-deko{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity .6s ease .3s; }
.mm2.offen .mm-deko{ opacity:1; }
.mm-deko i{ position:absolute; border-radius:50%; filter:blur(50px); }
.mm-deko i:nth-child(1){ width:260px; height:260px; right:-90px; top:40px; background:rgba(47,91,255,.28); animation:blobA 12s ease-in-out infinite; }
.mm-deko i:nth-child(2){ width:220px; height:220px; left:-100px; bottom:120px; background:rgba(124,77,255,.22); animation:blobB 14s ease-in-out infinite; }
@keyframes blobA{ 50%{ transform:translate(-40px,60px) scale(1.15); } }
@keyframes blobB{ 50%{ transform:translate(50px,-40px) scale(1.1); } }
.mm2-in{ position:absolute; inset:0; display:flex; flex-direction:column; padding-top:calc(var(--mmtop,var(--navh)) + 10px); }
.mm-ebenen{ position:relative; flex:1; min-height:0; overflow:hidden; }
.mm-ebene{ position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding:10px var(--gutter) 24px; transition:transform .6s var(--ease-out), opacity .4s ease; }
.mm-ebene.mm-sub{ transform:translateX(104%); visibility:hidden; transition:transform .6s var(--ease-out), opacity .4s ease, visibility 0s .6s; }
.mm-ebene.mm-sub.da{ transform:none; visibility:visible; transition:transform .6s var(--ease-out), opacity .4s ease, visibility 0s; }
.mm-ebene.haupt.weg{ transform:translateX(-26%); opacity:0; }
.mm-liste{ list-style:none; margin:0; padding:0; }
.mm-liste li{ border-bottom:1px solid rgba(14,16,22,.07); }
.mm-mk{ display:block; overflow:hidden; }
.mm-a{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:13px 0; border:0; background:none; cursor:pointer; text-align:left; font-size:clamp(32px,9.4vw,42px); font-weight:800; letter-spacing:-.045em; line-height:1.08; color:var(--ink); transition:color .25s; }
.mm-a .pf{ flex:none; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1.5px solid rgba(14,16,22,.1); color:var(--ink); transition:background-color .3s, border-color .3s, color .3s, transform .45s var(--ease-out); }
.mm-a .pf svg{ width:16px; height:16px; }
.mm-a:hover,.mm-a:focus-visible{ color:var(--blue); }
.mm-a:hover .pf,.mm-a:focus-visible .pf{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateX(3px); }
.mm-a .zahl{ font-size:13px; font-weight:700; letter-spacing:0; color:var(--ink-dim); margin-left:auto; margin-right:8px; align-self:center; }
.mm-mk > *{ transform:translateY(110%); }
.mm2.offen .mm-mk > *{ transform:none; transition:transform .8s var(--ease-out) calc(.3s + var(--i) * .055s); }
.mm-extra{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; font-weight:600; color:var(--ink-soft); transform:translateY(16px); opacity:0; }
.mm2.offen .mm-extra{ transform:none; opacity:1; transition:transform .8s var(--ease-out) .62s, opacity .5s ease .62s; }
.mm-extra .sterne{ color:var(--star); letter-spacing:1px; }
.mm-extra b{ color:var(--ink); font-weight:800; }
.mm-fuss{ position:relative; display:grid; gap:12px; padding:16px var(--gutter) calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(14,16,22,.07); background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); transform:translateY(24px); opacity:0; }
.mm2.offen .mm-fuss{ transform:none; opacity:1; transition:transform .8s var(--ease-out) .5s, opacity .5s ease .5s; }
.mm-fuss .btn{ width:100%; }
.mm-kanal{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.mm-kanal a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:62px; border-radius:16px; background:#f5f6ff; border:1px solid #e9ebfa; font-size:12.5px; font-weight:700; color:var(--ink-soft); transition:background-color .25s, transform .3s var(--ease-out); }
.mm-kanal a:active{ transform:scale(.96); }
.mm-kanal svg{ width:21px; height:21px; }
.mm-kanal .k-wa svg{ color:#1faa59; } .mm-kanal .k-ig svg{ color:#d6297a; } .mm-kanal .k-mail svg{ color:var(--blue); }
.mm-recht{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-dim); }
.mm-recht a{ text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(85,92,112,.35); }
.mm-kopf{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.mm-zurueck{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px 0 10px; border-radius:999px; border:1.5px solid rgba(14,16,22,.1); background:#fff; font-size:14px; font-weight:700; cursor:pointer; }
.mm-zurueck svg{ width:15px; height:15px; }
.mm-titel{ font-size:clamp(30px,8.4vw,38px); font-weight:800; letter-spacing:-.045em; line-height:1.1; margin:6px 0 14px; }
.mm-alle{ display:inline-flex; align-items:center; gap:8px; margin-bottom:8px; font-size:15px; font-weight:700; color:var(--blue); }
.mm-zeilen{ list-style:none; margin:0; padding:0; }
.mm-zeilen a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid rgba(14,16,22,.07); font-size:19px; font-weight:700; letter-spacing:-.02em; }
.mm-zeilen a span{ color:var(--ink-dim); transition:transform .3s var(--ease-out), color .3s; }
.mm-zeilen a:hover span{ transform:translateX(4px); color:var(--blue); }
.mm-label{ margin:22px 0 10px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.mm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.mm-chips a{ padding:10px 16px; border-radius:999px; background:#f5f6ff; border:1px solid #e9ebfa; font-size:14.5px; font-weight:700; }
.mm-karten{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:6px; }
.mm-karte{ display:block; }
.mm-karte .bild{ display:block; aspect-ratio:16/11; border-radius:16px; background-size:cover; background-position:50% 0; box-shadow:0 14px 28px -18px rgba(18,28,90,.55), 0 0 0 1px rgba(14,16,22,.06); transition:transform .5s var(--ease-out); }
.mm-karte .bild{ overflow:hidden; background:#eef0fb; }
.mm-karte .bild img{ width:100%; height:100%; object-fit:cover; object-position:50% 0; }
.mm-karte:hover .bild{ transform:scale(1.03); }
.mm-karte b{ display:block; margin-top:9px; font-size:14.5px; line-height:1.25; letter-spacing:-.01em; }
.mm-karte small{ display:block; font-size:12.5px; color:var(--ink-dim); line-height:1.35; }
.mm-ebene.mm-sub > *{ transform:translateX(30px); opacity:0; transition:transform .6s var(--ease-out), opacity .4s ease; }
.mm-ebene.mm-sub.da > *{ transform:none; opacity:1; transition-delay:calc(.08s + var(--i,0) * .04s); }

/* ================= Abschnitte: gemeinsame Bausteine ================= */
.sec{ position:relative; padding-block:clamp(72px,8.4vw,124px); }
.sec-soft{ background:linear-gradient(180deg,rgba(245,245,255,0) 0%,#f5f5ff 14%,#f7f4ff 86%,rgba(247,244,255,0) 100%); }
.kopf{ max-width:800px; margin:0 auto clamp(40px,5.2vw,68px); text-align:center; }
.kopf.links{ margin-left:0; text-align:left; }
.kicker{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:750; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep); }
.kicker::before{ content:''; width:20px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--violet)); }
.h2{ margin-top:16px; font-size:clamp(34px,5.2vw,64px); font-weight:800; letter-spacing:-.045em; line-height:1.04; text-wrap:balance; color:var(--ink); }
.h3{ font-size:clamp(20px,1.8vw,23px); font-weight:750; letter-spacing:-.025em; line-height:1.25; color:var(--ink); }
.lead{ margin:18px auto 0; max-width:56ch; font-size:clamp(16.5px,1.5vw,19px); line-height:1.62; color:var(--ink-dim); text-wrap:pretty; }
.kopf.links .lead{ margin-left:0; }
/* Schlagwort: schwarz, beim Einblenden läuft die Farbe von links hinein */
.js [data-r]{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform 1.1s var(--ease-out); transition-delay:calc(var(--i,0) * 90ms); }
.js [data-r].sicht{ opacity:1; transform:none; }
.k2{ position:relative; isolation:isolate; border-radius:28px; background:#fff; border:1px solid rgba(14,16,22,.07); box-shadow:0 34px 70px -46px rgba(24,36,120,.45), 0 2px 8px -4px rgba(24,36,120,.08); }
html .ws-spot::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:3; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(106,70,255,.95),rgba(34,195,245,.55) 42%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
html .ws-spot:hover::before{ opacity:1; }
.pfeil-link{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--blue-deep); }
.pfeil-link span{ transition:transform .35s var(--ease-out); }
.pfeil-link:hover span{ transform:translateX(5px); }
.viz{ position:relative; overflow:hidden; border-radius:20px; }
.viz *{ animation-play-state:paused !important; }
.viz.laeuft *{ animation-play-state:running !important; }

/* ================= Ablauf mit Handy Geschichte ================= */
.ablauf{ padding-bottom:0; }
.ablauf .kopf{ margin-bottom:10px; }
.proc-lauf{ position:relative; height:calc(100svh + 280svh); }
.proc-stick{ position:sticky; top:var(--navh); height:calc(100svh - var(--navh)); display:flex; align-items:center; overflow:hidden; }
.proc-grid{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,5vw,80px); align-items:center; }
.schritte{ list-style:none; margin:0; padding:0; display:grid; gap:4px; position:relative; }
.schritt{ display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; align-items:start; padding:16px 18px; border-radius:22px; opacity:.38; transition:opacity .5s ease, background-color .5s ease, box-shadow .5s ease, transform .7s var(--ease-out); }
.schritt.an{ opacity:1; background:#fff; box-shadow:0 26px 50px -34px rgba(24,36,120,.45), 0 0 0 1px rgba(14,16,22,.05); transform:translateX(10px); }
.schritt .snr{ width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:15px; font-weight:800; color:var(--ink-dim); background:#eef0fb; font-variant-numeric:tabular-nums; transition:background .5s, color .5s, transform .6s var(--spring); }
.schritt.an .nr{ color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); transform:scale(1.06); box-shadow:0 12px 24px -12px rgba(92,78,255,.8); }
.schritt h3{ font-size:clamp(19px,1.7vw,22px); font-weight:750; letter-spacing:-.025em; line-height:1.25; }
.schritt p{ margin-top:4px; font-size:15.5px; line-height:1.55; color:var(--ink-dim); }
.proc-balken{ margin:18px 0 0 18px; height:4px; border-radius:4px; background:#eceefa; overflow:hidden; max-width:420px; }
.proc-balken i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--blue),var(--violet),var(--cyan)); transform-origin:0 50%; transform:scaleX(.2); transition:transform .25s linear; }
.proc-punkte{ display:none; }
.proc-buehne{ position:relative; display:grid; place-items:center; perspective:1400px; }
.proc-buehne::before{ content:''; position:absolute; width:min(460px,90%); aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,rgba(92,78,255,.34),rgba(34,195,245,.16) 60%,transparent); filter:blur(10px); }
.ph3d{ position:relative; width:clamp(220px,22vw,310px); transform-style:preserve-3d; will-change:transform; }
.ph3d .fon-body{ box-shadow:0 60px 90px -30px rgba(18,28,90,.55), inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 0 0 4px #07080c; }
.pscr{ position:absolute; inset:4.2%; border-radius:13.5% / 6.6%; overflow:hidden; background:#fff; }
.ps-wire{ position:absolute; inset:0; padding:16% 8% 0; display:flex; flex-direction:column; gap:5%; }
.ps-wire i{ display:block; border-radius:8px; background:#e8eaf3; transform-origin:0 50%; transition:background-color .6s ease, transform .7s var(--ease-out); }
.ps-wire .w-nav{ height:4%; width:100%; border-radius:6px; flex:none; }
.ps-wire .w-hero{ height:24%; width:100%; flex:none; border-radius:14px; }
.ps-wire .w-h1{ height:4.2%; width:88%; flex:none; } .ps-wire .w-h1.k{ width:62%; margin-top:-3%; }
.ps-wire .w-txt{ height:2.4%; width:94%; flex:none; } .ps-wire .w-txt.k{ width:70%; margin-top:-3%; }
.ps-wire .w-btn{ height:5.6%; width:56%; flex:none; border-radius:999px; }
.ps-wire .w-reihe{ display:flex; gap:6%; height:15%; background:none; flex:none; }
.ps-wire .w-reihe b{ flex:1; border-radius:10px; background:#e8eaf3; transition:background-color .6s; }
[data-schritt="0"] .ps-wire i{ animation:bauen .9s var(--ease-out) both; }
[data-schritt="0"] .ps-wire i:nth-child(2){ animation-delay:.08s; } [data-schritt="0"] .ps-wire i:nth-child(3){ animation-delay:.16s; }
[data-schritt="0"] .ps-wire i:nth-child(4){ animation-delay:.22s; } [data-schritt="0"] .ps-wire i:nth-child(5){ animation-delay:.28s; }
[data-schritt="0"] .ps-wire i:nth-child(6){ animation-delay:.34s; } [data-schritt="0"] .ps-wire i:nth-child(7){ animation-delay:.4s; } [data-schritt="0"] .ps-wire i:nth-child(8){ animation-delay:.46s; }
@keyframes bauen{ from{ transform:scaleX(0); } }
.ab1 .ps-wire .w-nav{ background:#0e1016; }
.ab1 .ps-wire .w-hero{ background:linear-gradient(135deg,#2f5bff,#7c4dff 60%,#22c3f5); }
.ab1 .ps-wire .w-h1{ background:#0e1016; } .ab1 .ps-wire .w-txt{ background:#c9cde0; }
.ab1 .ps-wire .w-btn{ background:#2f5bff; } .ab1 .ps-wire .w-reihe b{ background:#eef0ff; }
.ps-blitz{ position:absolute; top:0; bottom:0; left:0; width:45%; z-index:5; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); }
.ps-foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; opacity:0; transform:scale(1.08); transition:opacity .8s ease, transform 1.2s var(--ease-out); }
.ab2 .ps-foto{ opacity:1; transform:none; }
.ps-tempo{ position:absolute; left:50%; top:50%; width:62%; margin-left:-31%; padding:12% 8%; border-radius:22px; background:rgba(255,255,255,.95); box-shadow:0 20px 40px -18px rgba(0,0,0,.5); text-align:center; opacity:0; transform:translateY(-40%) scale(.8); transition:opacity .45s ease, transform .7s var(--spring); }
[data-schritt="3"] .ps-tempo{ opacity:1; transform:translateY(-50%); }
.ps-tempo svg{ width:66%; margin:0 auto; display:block; transform:rotate(-90deg); }
.ps-tempo circle{ fill:none; stroke-width:7; }
.ps-tempo .bg{ stroke:#e4f7ec; } .ps-tempo .vg{ stroke:var(--lh-green); stroke-linecap:round; stroke-dasharray:201; stroke-dashoffset:201; }
[data-schritt="3"] .ps-tempo .vg{ animation:tacho 1.2s var(--ease-out) .2s forwards; }
@keyframes tacho{ to{ stroke-dashoffset:24; } }
.ps-tempo b{ display:block; margin-top:8%; font-size:clamp(13px,1.3vw,16px); font-weight:800; color:var(--lh-ink); letter-spacing:-.01em; }
.ps-tempo small{ display:block; font-size:11px; color:var(--ink-dim); }
.ps-lade{ position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); transform-origin:0 50%; transform:scaleX(0); }
[data-schritt="3"] .ps-lade{ animation:laden 1s var(--ease-out) forwards; }
@keyframes laden{ to{ transform:scaleX(1); } }
.ps-suche{ position:absolute; inset:0; background:#f6f7fb; padding:17% 6% 0; transform:translateY(102%); transition:transform .8s var(--ease-out); display:flex; flex-direction:column; gap:4%; }
[data-schritt="4"] .ps-suche{ transform:none; }
.pss-bar{ display:flex; align-items:center; gap:7px; padding:0 10px; height:9%; border-radius:999px; background:#fff; box-shadow:0 4px 12px -6px rgba(0,0,0,.25); font-size:clamp(10px,.95vw,12.5px); font-weight:600; color:var(--ink-soft); flex:none; }
.pss-bar svg{ width:13px; height:13px; flex:none; color:var(--ink-dim); }
.pss-karte{ position:relative; height:24%; border-radius:14px; flex:none; overflow:hidden; background:linear-gradient(135deg,#e7f0e3 0%,#e9eef6 50%,#e3ecf5 100%); }
.pss-karte::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(35deg,transparent 0 18px,rgba(255,255,255,.8) 18px 21px),repeating-linear-gradient(-55deg,transparent 0 26px,rgba(255,255,255,.7) 26px 28px); }
.pss-karte i{ position:absolute; width:14px; height:14px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#9aa3b8; box-shadow:0 3px 6px -2px rgba(0,0,0,.35); }
.pss-karte i.du{ background:var(--blue); width:18px; height:18px; }
[data-schritt="4"] .pss-karte i{ animation:pin .6s var(--spring) both; }
[data-schritt="4"] .pss-karte i:nth-child(2){ animation-delay:.15s; } [data-schritt="4"] .pss-karte i:nth-child(3){ animation-delay:.3s; }
@keyframes pin{ from{ transform:translateY(-24px) rotate(-45deg); opacity:0; } }
.pss-treffer{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 8px; padding:9px 11px; border-radius:14px; background:#fff; font-size:clamp(10px,.9vw,12px); color:var(--ink-dim); box-shadow:0 2px 6px -3px rgba(0,0,0,.15); flex:none; }
.pss-treffer b{ font-size:clamp(11.5px,1.05vw,14px); color:var(--ink); font-weight:750; }
.pss-treffer span{ grid-column:1; }
.pss-treffer.du{ box-shadow:0 0 0 2px var(--blue), 0 14px 26px -12px rgba(47,91,255,.6); }
.pss-treffer.du span{ color:#b77a00; }
.pss-treffer em{ grid-row:1 / span 2; grid-column:2; font-style:normal; font-weight:750; font-size:clamp(10px,.9vw,12px); color:#fff; background:var(--blue); padding:6px 10px; border-radius:999px; }
[data-schritt="4"] .pss-treffer{ animation:treffer .7s var(--ease-out) both; }
[data-schritt="4"] .pss-treffer:nth-of-type(2){ animation-delay:.12s; } [data-schritt="4"] .pss-treffer:nth-of-type(3){ animation-delay:.24s; }
[data-schritt="4"] .pss-treffer.du em{ animation:tippen 1.6s ease-in-out 1s infinite; }
@keyframes treffer{ from{ transform:translateY(20px); opacity:0; } }
@keyframes tippen{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(47,91,255,.5); } 50%{ transform:scale(1.08); box-shadow:0 0 0 8px rgba(47,91,255,0); } }
.p-obj{ position:absolute; z-index:0; animation:schweben 8s ease-in-out infinite; }
.p-o1{ width:clamp(44px,5vw,78px); left:8%; top:12%; }
.p-o2{ width:clamp(80px,9vw,140px); right:2%; bottom:10%; animation-delay:-3s; --rot:-6deg; }
.p-o3{ width:clamp(16px,1.6vw,24px); right:18%; top:16%; animation-delay:-5s; }
@media (max-width:900px){ .p-o1{ left:0; top:4%; width:40px; } .p-o2{ right:-6%; bottom:4%; width:76px; } .p-o3{ display:none; } }
.ph-label{ position:absolute; z-index:3; left:-14%; top:14%; display:flex; align-items:center; gap:8px; padding:9px 14px 9px 10px; border-radius:16px; background:#fff; font-size:13px; font-weight:750; color:var(--ink); box-shadow:0 20px 40px -18px rgba(18,28,90,.45), 0 0 0 1px rgba(14,16,22,.05); transform:translateZ(80px); }
.ph-label i{ width:26px; height:26px; border-radius:9px; display:grid; place-items:center; color:#fff; font-style:normal; font-size:12px; background:linear-gradient(135deg,var(--blue),var(--violet)); }
@media (max-width:900px){
  .proc-lauf{ height:calc(100svh + 240svh); }
  .proc-stick{ align-items:center; }
  .proc-grid{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .proc-txt{ order:2; }
  .proc-buehne{ order:1; }
  .ph3d{ width:min(56vw,236px,calc((100svh - var(--navh) - 236px) / 1.87)); }
  .schritte{ height:150px; display:block; }
  .schritt{ position:absolute; inset:0; opacity:0; transform:translateY(18px); padding:14px 16px; pointer-events:none; }
  .schritt.an{ opacity:1; transform:none; pointer-events:auto; }
  .proc-balken{ display:none; }
  .proc-punkte{ display:flex; justify-content:center; gap:8px; margin-top:6px; }
  .proc-punkte i{ width:8px; height:8px; border-radius:99px; background:#d9dcef; transition:width .45s var(--ease-out), background-color .45s; }
  .proc-punkte i.an{ width:26px; background:linear-gradient(90deg,var(--blue),var(--violet)); }
  .ph-label{ left:auto; right:-26%; top:8%; font-size:12px; }
}

/* ================= Kundenlogos ================= */
.logos{ padding-block:clamp(60px,8vw,110px) clamp(20px,3vw,40px); }
.ltrack{ display:flex; align-items:center; gap:clamp(18px,3vw,34px); width:max-content; animation:band 36s linear infinite; }
.logo-kachel{ flex:none; display:grid; place-items:center; height:clamp(78px,8vw,96px); padding:0 clamp(22px,2.6vw,34px); border-radius:22px; background:#fff; border:1px solid rgba(14,16,22,.06); box-shadow:0 20px 40px -32px rgba(24,36,120,.4); }
.logo-kachel img{ height:clamp(40px,4.4vw,54px); width:auto; }

/* ================= Warum mit mir ================= */
.bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); }
.vorteil{ padding:14px 14px 26px; }
.vorteil .viz{ height:clamp(190px,17vw,220px); background:linear-gradient(145deg,#f3f4ff,#f7f2ff); }
.vorteil h3{ margin:20px 12px 0; }
.vorteil p{ margin:8px 12px 0; font-size:15.5px; line-height:1.6; color:var(--ink-dim); }
.v-handy .mini{ position:absolute; left:auto; right:16%; top:22px; width:112px; height:230px; border-radius:24px; background:#fff; box-shadow:0 0 0 5px #151823, 0 24px 40px -18px rgba(18,28,90,.5); overflow:hidden; }
.v-handy .mini i{ position:absolute; left:12px; right:12px; border-radius:6px; background:#e8eaf3; }
.v-handy .mini i:nth-child(1){ top:14px; height:52px; background:linear-gradient(135deg,#2f5bff,#7c4dff); animation:blink2 3s ease-in-out infinite; }
.v-handy .mini i:nth-child(2){ top:76px; height:9px; right:26px; background:#0e1016; }
.v-handy .mini i:nth-child(3){ top:91px; height:9px; right:44px; background:#0e1016; }
.v-handy .mini i:nth-child(4){ top:110px; height:6px; } .v-handy .mini i:nth-child(5){ top:121px; height:6px; right:30px; }
.v-handy .mini i:nth-child(6){ top:140px; height:22px; right:40px; border-radius:99px; background:#2f5bff; }
@keyframes blink2{ 0%,100%{ filter:none; } 50%{ filter:saturate(1.3) brightness(1.08); } }
.v-handy .daumen{ position:absolute; right:calc(16% + 40px); top:150px; width:34px; height:34px; border-radius:50%; background:rgba(47,91,255,.22); border:2px solid rgba(47,91,255,.6); animation:tipp 2.4s ease-in-out infinite; }
@keyframes tipp{ 0%,20%{ transform:translate(40px,40px) scale(1); opacity:0; } 40%{ transform:translate(0,0) scale(1); opacity:1; } 50%{ transform:scale(.8); } 60%{ transform:scale(1.4); opacity:0; } 100%{ opacity:0; } }
.v-handy .tempo{ position:absolute; left:16px; top:18px; display:flex; align-items:center; gap:6px; padding:7px 11px; border-radius:999px; background:#fff; font-size:12px; font-weight:750; color:var(--lh-ink); box-shadow:0 10px 20px -12px rgba(0,0,0,.35); }
.v-handy .tempo::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--lh-green); box-shadow:0 0 0 4px rgba(12,206,107,.2); }
.v-anfragen .nt{ position:absolute; left:18px; right:18px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:0 14px 28px -16px rgba(18,28,90,.45); font-size:12.5px; color:var(--ink-dim); opacity:0; animation:noteLauf 7.5s var(--ease-out) infinite; }
.v-anfragen .nt b{ display:block; font-size:13.5px; color:var(--ink); }
.v-anfragen .nt .ic{ width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; font-size:15px; }
.v-anfragen .nt .nt-t{ margin-left:auto; align-self:flex-start; font-size:11px; }
.v-anfragen .nt:nth-child(1){ top:14px; }
.v-anfragen .nt:nth-child(2){ top:72px; animation-delay:1.2s; }
.v-anfragen .nt:nth-child(3){ top:130px; animation-delay:2.4s; }
@keyframes noteLauf{ 0%{ opacity:0; transform:translateX(40px) scale(.95); } 8%,78%{ opacity:1; transform:none; } 90%,100%{ opacity:0; transform:translateY(-10px); } }
.v-einer .kern{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:26px; font-weight:850; background:linear-gradient(135deg,var(--blue),var(--violet)); box-shadow:0 0 0 10px rgba(92,78,255,.12), 0 20px 36px -12px rgba(92,78,255,.7); z-index:2; }
.v-einer .bahn{ position:absolute; left:50%; top:50%; width:176px; height:176px; margin:-88px 0 0 -88px; border-radius:50%; border:1.5px dashed rgba(92,78,255,.35); animation:ringdreh 24s linear infinite; }
.v-einer .bahn span{ position:absolute; padding:6px 11px; border-radius:999px; background:#fff; font-size:12px; font-weight:750; color:var(--ink); box-shadow:0 10px 20px -12px rgba(18,28,90,.5); white-space:nowrap; animation:gegen 24s linear infinite; }
.v-einer .bahn span:nth-child(1){ left:50%; top:-14px; margin-left:-30px; }
.v-einer .bahn span:nth-child(2){ right:-34px; top:50%; margin-top:-14px; }
.v-einer .bahn span:nth-child(3){ left:50%; bottom:-14px; margin-left:-26px; }
.v-einer .bahn span:nth-child(4){ left:-28px; top:50%; margin-top:-14px; }
@keyframes gegen{ to{ transform:rotate(-360deg); } }

/* ================= Leistungen ================= */
.leist{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); }
.leistung{ display:flex; flex-direction:column; padding:14px 14px 26px; transition:transform .6s var(--ease-out); }
.leistung .viz{ height:clamp(200px,18vw,236px); background:linear-gradient(145deg,#eef1ff,#f6f2ff); }
.leistung h3{ margin:22px 12px 0; font-size:clamp(24px,2.2vw,30px); font-weight:800; letter-spacing:-.035em; }
.leistung p{ margin:10px 12px 0; font-size:15.5px; line-height:1.6; color:var(--ink-dim); flex:1; }
.leistung .pfeil-link{ margin:18px 12px 0; }
.l-web .fenster{ position:absolute; left:18px; right:18px; top:20px; bottom:-12px; border-radius:14px; background:#fff; box-shadow:0 24px 40px -22px rgba(18,28,90,.5); overflow:hidden; }
.l-web .fenster .leiste{ height:22px; display:flex; align-items:center; gap:5px; padding:0 10px; background:#f3f4f8; }
.l-web .fenster .leiste i{ width:7px; height:7px; border-radius:50%; background:#ff5f57; } .l-web .fenster .leiste i:nth-child(2){ background:#febc2e; } .l-web .fenster .leiste i:nth-child(3){ background:#28c840; }
.l-web .blk{ position:absolute; border-radius:7px; transform-origin:0 50%; animation:blkBau 6s var(--ease-out) infinite; }
.l-web .b1{ left:14px; top:36px; width:36%; height:10px; background:#0e1016; }
.l-web .b2{ left:14px; top:52px; width:28%; height:10px; background:#0e1016; animation-delay:.15s; }
.l-web .b3{ left:14px; top:72px; width:42%; height:6px; background:#c9cde0; animation-delay:.3s; }
.l-web .b4{ left:14px; top:84px; width:34%; height:6px; background:#c9cde0; animation-delay:.4s; }
.l-web .b5{ left:14px; top:102px; width:24%; height:18px; border-radius:99px; background:var(--blue); animation-delay:.55s; }
.l-web .b6{ right:14px; top:34px; width:40%; height:92px; border-radius:12px; background:linear-gradient(135deg,#2f5bff,#7c4dff 60%,#22c3f5); animation-delay:.7s; transform-origin:50% 50%; }
.l-web .b7{ left:14px; right:14px; top:136px; height:60px; border-radius:10px; background:linear-gradient(90deg,#eef0ff 0 31%,transparent 31% 34.5%,#eef0ff 34.5% 65.5%,transparent 65.5% 69%,#eef0ff 69%); animation-delay:.85s; }
@keyframes blkBau{ 0%{ transform:scaleX(0); opacity:0; } 12%{ transform:none; opacity:1; } 86%{ transform:none; opacity:1; } 96%,100%{ transform:none; opacity:0; } }
.l-web .zeiger{ position:absolute; left:0; top:0; width:18px; animation:zeigerWeg 6s var(--ease-io) infinite; z-index:2; }
@keyframes zeigerWeg{ 0%{ transform:translate(220px,190px); } 25%{ transform:translate(120px,110px); } 45%{ transform:translate(250px,70px); } 65%{ transform:translate(70px,112px); } 100%{ transform:translate(220px,190px); } }
.l-seo .suche{ position:absolute; left:18px; right:18px; top:20px; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; background:#fff; box-shadow:0 12px 24px -16px rgba(18,28,90,.5); font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.l-seo .suche svg{ width:15px; height:15px; color:var(--ink-dim); }
.l-seo .suche .q{ display:inline-block; overflow:hidden; white-space:nowrap; border-right:2px solid var(--blue); width:0; animation:tippText 6s steps(14) infinite; }
@keyframes tippText{ 0%{ width:0; } 20%,100%{ width:18ch; } }
.l-seo .tr{ position:absolute; left:18px; right:18px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:#fff; font-size:12.5px; color:var(--ink-dim); box-shadow:0 8px 18px -14px rgba(18,28,90,.5); opacity:0; animation:trLauf 6s var(--ease-out) infinite; }
.l-seo .tr b{ color:var(--ink); font-size:13.5px; margin-right:auto; }
.l-seo .tr i{ width:22px; height:22px; flex:none; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:#aab2c6; }
.l-seo .tr.du{ box-shadow:0 0 0 2px var(--blue), 0 14px 26px -14px rgba(47,91,255,.7); }
.l-seo .tr.du i{ background:var(--blue); }
.l-seo .tr.du em{ font-style:normal; color:#b77a00; font-weight:700; }
.l-seo .tr:nth-of-type(2){ top:74px; } .l-seo .tr:nth-of-type(3){ top:124px; animation-delay:.15s; } .l-seo .tr:nth-of-type(4){ top:174px; animation-delay:.3s; }
@keyframes trLauf{ 0%,24%{ opacity:0; transform:translateY(14px); } 32%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.l-grafik svg.kurve{ position:absolute; inset:0; width:100%; height:100%; }
.l-grafik .pfad{ fill:none; stroke:url(#gv); stroke-width:6; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420; animation:zeichnen 5.5s var(--ease-io) infinite; }
@keyframes zeichnen{ 0%{ stroke-dashoffset:420; } 45%,85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:0; } }
.l-grafik .hebel{ stroke:#9aa3ff; stroke-width:1.5; }
.l-grafik .anker{ fill:#fff; stroke:var(--blue); stroke-width:2; }
.l-grafik .farben{ position:absolute; right:16px; bottom:16px; display:flex; gap:7px; }
.l-grafik .farben i{ width:24px; height:24px; border-radius:8px; box-shadow:0 6px 12px -6px rgba(0,0,0,.35); animation:popFarbe 5.5s var(--spring) infinite; }
.l-grafik .farben i:nth-child(1){ background:#2f5bff; } .l-grafik .farben i:nth-child(2){ background:#7c4dff; animation-delay:.12s; } .l-grafik .farben i:nth-child(3){ background:#22c3f5; animation-delay:.24s; } .l-grafik .farben i:nth-child(4){ background:#0e1016; animation-delay:.36s; }
@keyframes popFarbe{ 0%,40%{ transform:scale(0); } 52%,90%{ transform:scale(1); } 100%{ transform:scale(0); } }

/* ================= Arbeiten: Kartenstapel ================= */
.stapel{ position:relative; }
.pkarte{ position:sticky; top:calc(var(--navh) + 20px + var(--i) * 14px); margin-bottom:clamp(60px,14vh,140px); }
.pkarte:last-child{ margin-bottom:0; }
.pk-in{ position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3vw,44px); align-items:center; padding:clamp(22px,3vw,40px); border-radius:34px; background:#fff; border:1px solid rgba(14,16,22,.07); box-shadow:0 50px 90px -60px rgba(24,36,120,.55), 0 2px 10px -4px rgba(24,36,120,.1); transform-origin:50% 0; will-change:transform; overflow:hidden; isolation:isolate; }
.pk-in::before{ content:''; position:absolute; right:-10%; top:-30%; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side,var(--glow),transparent); z-index:-1; }
.pk-in::after{ content:''; position:absolute; inset:0; background:#eef0fb; opacity:var(--d,0); pointer-events:none; z-index:4; border-radius:inherit; }
.pk-nr{ font-size:13px; font-weight:800; color:var(--ink-dim); font-variant-numeric:tabular-nums; letter-spacing:.06em; }
.pk-cat{ display:block; margin-top:12px; font-size:12.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--akz); }
.pk-txt h3{ margin-top:10px; font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.045em; line-height:1.05; }
.pk-txt p{ margin-top:14px; font-size:16px; line-height:1.6; color:var(--ink-dim); max-width:46ch; }
.pk-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:24px; }
.pk-meta .btn{ min-height:46px; padding:0 22px; font-size:14.5px; }
.pk-url{ display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.pk-url:hover{ color:var(--blue-deep); }
.pk-viz{ position:relative; padding:0 8% 7% 0; }
.pk-browser{ border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 40px 70px -34px rgba(18,28,90,.55), 0 0 0 1px rgba(14,16,22,.08); transform:rotate(-1.2deg); }
.pk-browser .leiste{ height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#f3f4f8; }
.pk-browser .leiste i{ width:9px; height:9px; border-radius:50%; background:#ff5f57; } .pk-browser .leiste i:nth-child(2){ background:#febc2e; } .pk-browser .leiste i:nth-child(3){ background:#28c840; }
.pk-browser img{ width:100%; height:auto; aspect-ratio:880/386; object-fit:cover; object-position:top; }
.pk-phone{ position:absolute; right:0; bottom:0; width:28%; transform:rotate(4deg); }
.pk-chip{ position:absolute; right:2%; bottom:6%; padding:10px 14px; border-radius:16px; background:#fff; font-size:13px; font-weight:750; box-shadow:0 20px 40px -18px rgba(18,28,90,.45), 0 0 0 1px rgba(14,16,22,.05); }
.pk-chip small{ display:block; font-weight:500; color:var(--ink-dim); font-size:11.5px; }
@media (max-width:900px){
  .pk-in{ grid-template-columns:minmax(0,1fr); border-radius:28px; }
  .pk-viz{ order:-1; padding:0 12% 10% 0; }
  .pk-txt p{ font-size:15.5px; }
  .pkarte{ top:calc(var(--navh) + 12px + var(--i) * 10px); }
}

/* ================= Über mich ================= */
.ueber{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(30px,6vw,90px); align-items:center; }
.ue-bild{ position:relative; max-width:500px; width:100%; justify-self:center; }
.ue-rahmen{ position:relative; border-radius:34px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 50px 90px -46px rgba(18,28,90,.6); }
.ue-rahmen img{ width:100%; height:112%; object-fit:cover; object-position:50% 30%; will-change:transform; }
.ue-rahmen::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%,rgba(20,20,60,.35)); }
.ue-badge{ position:absolute; z-index:2; display:flex; align-items:center; gap:9px; padding:11px 16px 11px 12px; border-radius:18px; background:#fff; font-size:14px; font-weight:750; color:var(--ink); box-shadow:0 24px 44px -18px rgba(18,28,90,.5), 0 0 0 1px rgba(14,16,22,.05); animation:schweben 7s ease-in-out infinite; --rot:0deg; }
.ue-badge small{ display:block; font-size:12px; font-weight:500; color:var(--ink-dim); }
.ue-badge .ic{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); font-weight:800; font-size:13px; }
.ue-badge.b1{ left:-8%; bottom:25%; }
.ue-badge.b2{ right:-8%; bottom:5%; animation-delay:-3s; }
.ue-badge .gruen{ width:10px; height:10px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.2); }
.ue-txt p{ margin-top:18px; font-size:17px; line-height:1.7; color:var(--ink-dim); max-width:54ch; }
.ue-chips{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.ue-chips li{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:#fff; border:1px solid rgba(14,16,22,.07); font-size:14px; font-weight:650; color:var(--ink-soft); }
.ue-chips li::before{ content:''; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet)); }
.ue-txt .btn{ margin-top:30px; }
@media (max-width:900px){ .ueber{ grid-template-columns:minmax(0,1fr); } .ue-bild{ max-width:400px; } .ue-badge.b1{ left:-4%; } .ue-badge.b2{ right:-4%; } }

/* ================= Pakete ================= */
.pakete{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); align-items:stretch; }
.paket{ display:flex; flex-direction:column; padding:clamp(26px,2.6vw,36px); }
.paket .p-ic{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#9aa6ff,#6b7bff); box-shadow:0 14px 26px -14px rgba(47,91,255,.8); }
.paket .p-ic svg{ width:24px; height:24px; }
.paket h3{ margin-top:22px; font-size:clamp(26px,2.4vw,32px); font-weight:800; letter-spacing:-.04em; }
.paket > p{ margin-top:10px; font-size:15.5px; line-height:1.6; color:var(--ink-dim); }
.paket ul{ list-style:none; margin:24px 0 0; padding:22px 0 0; border-top:1px solid rgba(14,16,22,.07); display:grid; gap:14px; flex:1; align-content:start; }
.paket li{ display:flex; align-items:flex-start; gap:12px; font-size:15.5px; font-weight:600; color:var(--ink-soft); line-height:1.45; }
.paket li svg{ width:22px; height:22px; flex:none; color:var(--blue); }
.paket .btn{ margin-top:28px; width:100%; }
.paket-top{ position:relative; isolation:isolate; border-radius:30px; padding:2px; overflow:hidden; box-shadow:0 50px 90px -46px rgba(92,78,255,.7); transform:translateY(-12px); }
.paket-top::before{ content:''; position:absolute; left:50%; top:50%; width:200%; aspect-ratio:1; margin:-100% 0 0 -100%; z-index:-1; background:conic-gradient(from 0deg,#2f5bff,#7c4dff,#22c3f5,#c46bff,#2f5bff); animation:ringdreh 6s linear infinite; }
.paket-top .paket{ height:100%; border-radius:28px; background:#fff; }
.paket-top .p-ic{ background:linear-gradient(135deg,var(--blue),var(--violet)); }
.p-flag{ position:absolute; top:22px; right:22px; z-index:2; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:750; color:#fff; background:linear-gradient(100deg,var(--blue),var(--violet)); box-shadow:0 10px 20px -10px rgba(92,78,255,.8); }
.p-fuss{ margin:34px auto 0; max-width:64ch; text-align:center; font-size:15px; color:var(--ink-dim); line-height:1.6; }
@media (max-width:900px){ .pakete{ grid-template-columns:minmax(0,1fr); max-width:520px; margin-inline:auto; } .paket-top{ transform:none; } }

/* ================= Bewertungen ================= */
.g-gross{ display:inline-flex; align-items:center; gap:16px; margin-top:26px; padding:12px 22px 12px 14px; border-radius:22px; background:#fff; border:1px solid rgba(14,16,22,.06); box-shadow:0 24px 50px -32px rgba(24,36,120,.45); }
.g-gross .wert{ font-size:40px; font-weight:850; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.g-gross .gst{ color:var(--star); font-size:18px; letter-spacing:2px; display:block; line-height:1.1; }
.g-gross .gst i{ display:inline-block; font-style:normal; }
.g-gross small{ display:block; font-size:13.5px; color:var(--ink-dim); font-weight:600; text-align:left; }
.rev-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,22px); align-items:start; }
.rev{ margin:0; padding:clamp(24px,2.4vw,32px); }
.rev blockquote{ margin:0; }
.rev-grid .rev:nth-child(2){ margin-top:40px; }
.rev .q{ display:block; height:40px; font-size:84px; line-height:.9; font-weight:900; background:linear-gradient(135deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.rev .rst{ margin-top:8px; color:var(--star); letter-spacing:2px; font-size:16px; }
.rev p{ margin-top:12px; font-size:16px; line-height:1.65; color:var(--ink-soft); }
.rev .wer{ display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(14,16,22,.07); }
.rev .rav{ width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--violet)); }
.rev .wer b{ display:block; font-size:15px; } .rev .wer small{ display:block; font-size:13px; color:var(--ink-dim); }
.r-fuss{ margin-top:30px; text-align:center; font-size:14px; color:var(--ink-dim); }
@media (max-width:900px){ .rev-grid{ grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; } .rev-grid .rev:nth-child(2){ margin-top:0; } }

/* ================= Fragen ================= */
.fragen-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(30px,5vw,80px); align-items:start; }
.fragen-seite{ position:sticky; top:calc(var(--navh) + 30px); }
.frage-hilfe{ margin-top:10px; padding:24px; }
.frage-hilfe b{ display:block; font-size:18px; letter-spacing:-.02em; }
.frage-hilfe p{ margin-top:6px; font-size:15px; color:var(--ink-dim); line-height:1.55; }
.frage-hilfe .btn{ margin-top:16px; min-height:46px; padding:0 20px; font-size:14.5px; background:#1faa59; color:#fff; box-shadow:0 14px 28px -14px rgba(31,170,89,.8); }
.frage-hilfe .btn svg{ width:18px; height:18px; }
@media (max-width:900px){ .fragen-grid{ grid-template-columns:minmax(0,1fr); } .fragen-seite{ position:static; } }

/* ================= Kontakt ================= */
.k-panel{ position:relative; isolation:isolate; overflow:hidden; border-radius:clamp(28px,3.4vw,44px); padding:clamp(28px,5vw,72px); color:#fff; background:linear-gradient(135deg,#1c3cf0 0%,#3a2fe0 40%,#6a3cff 72%,#2f8bff 100%); box-shadow:0 60px 120px -60px rgba(47,60,255,.8); }
.k-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
.k-bg i{ position:absolute; border-radius:50%; filter:blur(60px); }
.k-bg i:nth-child(1){ width:60%; aspect-ratio:1; left:-15%; top:-30%; background:rgba(34,195,245,.55); animation:blobA 14s ease-in-out infinite; }
.k-bg i:nth-child(2){ width:50%; aspect-ratio:1; right:-10%; bottom:-35%; background:rgba(196,107,255,.55); animation:blobB 16s ease-in-out infinite; }
.k-bg i:nth-child(3){ width:30%; aspect-ratio:1; left:40%; top:30%; background:rgba(255,255,255,.14); animation:blobA 18s ease-in-out -6s infinite; }
.k-bg::after{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.2px); background-size:22px 22px; -webkit-mask:radial-gradient(ellipse at 20% 20%,#000,transparent 70%); mask:radial-gradient(ellipse at 20% 20%,#000,transparent 70%); }
.k-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,70px); align-items:start; }
.k-txt .kicker{ color:rgba(255,255,255,.85); }
.k-txt .kicker::before{ background:#fff; }
.k-txt .h2{ color:#fff; }
.k-txt .h2 .strich{ position:relative; white-space:nowrap; }
.k-txt .h2 .strich svg{ position:absolute; left:-2%; bottom:-.16em; width:104%; height:.34em; overflow:visible; }
.k-txt .h2 .strich path{ fill:none; stroke:#7dffd0; stroke-width:6; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; transition:stroke-dashoffset 1.4s var(--ease-out) .4s; }
.k-txt.sicht .h2 .strich path{ stroke-dashoffset:0; }
.k-txt{ position:relative; }
.k-txt .h2{ font-size:clamp(32px,3.6vw,50px); }
.k-doodle{ position:absolute; right:-6%; top:34%; width:150px; height:112px; overflow:visible; }
.k-doodle path{ fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:320; stroke-dashoffset:320; opacity:.9; }
.k-txt.sicht .k-doodle path{ transition:stroke-dashoffset 1.6s var(--ease-io) .9s; stroke-dashoffset:0; }
.k-txt.sicht .k-doodle path + path{ transition-delay:2.3s; transition-duration:.5s; }
@media (max-width:1100px){ .k-doodle{ display:none; } }
.k-txt > p{ margin-top:18px; font-size:17.5px; line-height:1.65; color:rgba(255,255,255,.86); max-width:44ch; }
.k-kanal{ display:grid; gap:10px; margin-top:30px; max-width:400px; }
.k-kanal a{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-weight:700; font-size:15.5px; transition:background-color .3s, transform .4s var(--ease-out); }
.k-kanal a:hover{ background:rgba(255,255,255,.2); transform:translateX(4px); }
.k-kanal a small{ display:block; font-weight:500; font-size:13px; color:rgba(255,255,255,.75); }
.k-kanal a .ic{ width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; background:#fff; }
.k-kanal a .ic svg{ width:20px; height:20px; }
.k-kanal a.wa{ background:#fff; color:var(--ink); border-color:#fff; }
.k-kanal a.wa small{ color:var(--ink-dim); }
.k-kanal a.wa .ic{ background:#1faa59; color:#fff; }
.k-kanal a .pf{ margin-left:auto; font-size:18px; opacity:.7; }
.k-note{ margin-top:18px; font-size:14px; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:8px; }
.k-note::before{ content:''; width:8px; height:8px; border-radius:50%; background:#7dffd0; box-shadow:0 0 0 4px rgba(125,255,208,.25); }
.k-form{ padding:clamp(22px,2.6vw,32px); border-radius:28px; background:#fff; color:var(--ink); box-shadow:0 40px 80px -40px rgba(10,10,60,.6); }
.k-form h3{ font-size:19px; font-weight:800; letter-spacing:-.02em; }
@media (max-width:900px){ .k-grid{ grid-template-columns:minmax(0,1fr); } }

/* ================= Fußzeile ================= */
.fuss{ position:relative; overflow:hidden; margin-top:clamp(40px,6vw,80px); padding-top:clamp(60px,7vw,90px); border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0; background:linear-gradient(180deg,#f4f4ff 0%,#efedff 60%,#ebe8ff 100%); box-shadow:0 -1px 0 rgba(14,16,22,.05), 0 -30px 60px -40px rgba(24,36,120,.25); }
.fuss-grid{ display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:clamp(24px,4vw,60px); }
.f-marke img{ width:170px; height:auto; }
.f-marke p{ margin-top:16px; font-size:15.5px; line-height:1.6; color:var(--ink-dim); max-width:34ch; }
.f-marke .adr{ margin-top:14px; font-style:normal; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }
.f-spalte b{ display:block; font-size:13px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:14px; }
.f-spalte ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.f-spalte a{ font-size:15px; color:var(--ink-dim); transition:color .25s; }
.f-spalte a:hover{ color:var(--blue-deep); }
.f-unten{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; margin-top:clamp(40px,5vw,60px); padding-block:22px; border-top:1px solid rgba(14,16,22,.07); font-size:13.5px; color:var(--ink-dim); }
.f-riese{ display:block; margin-top:-1vw; font-size:clamp(90px,21vw,330px); font-weight:900; letter-spacing:-.05em; line-height:.8; text-align:center; white-space:nowrap; color:transparent; background:linear-gradient(180deg,rgba(47,91,255,.16),rgba(124,77,255,0) 85%); -webkit-background-clip:text; background-clip:text; -webkit-text-stroke:1.5px rgba(92,78,255,.4); user-select:none; will-change:transform; padding-bottom:1vw; }
@media (max-width:900px){ .fuss-grid{ grid-template-columns:1fr 1fr; } .f-marke{ grid-column:1 / -1; } }

@media (max-width:900px){
  .bento,.leist{ grid-template-columns:minmax(0,1fr); max-width:560px; margin-inline:auto; }
}

.ablauf + .sec{ padding-top:clamp(40px,7vw,110px); }
.nach-stapel{ margin-top:clamp(36px,5vw,56px); text-align:center; }
.band-lauf:not(.laeuft) .ltrack,.band-lauf:not(.laeuft) .wtrack{ animation-play-state:paused; }
.werkzeuge{ margin-top:clamp(64px,8vw,110px); padding-bottom:0; }
section[id]{ scroll-margin-top:calc(var(--navh) + 8px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }

/* ================= Ruhige Fassung ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01s !important; transition-delay:0s !important; }
  .js [data-maske],.js [data-rein]{ transform:none !important; }
  .v-anfragen .nt{ opacity:1; transform:none; }
  .l-seo .suche .q{ width:18ch; border-right-color:transparent; }
  .l-seo .tr{ opacity:1; transform:none; }
  .l-grafik .pfad{ stroke-dashoffset:0; }
  .l-grafik .farben i{ transform:none; }
  .l-web .blk{ transform:none; opacity:1; }
  .l-web .zeiger{ transform:translate(150px,120px); }
  .v-handy .daumen{ display:none; }
  .ps-tempo .vg{ stroke-dashoffset:24; }
  .ps-lade{ transform:scaleX(1); }
}

/* Lage der 3D Objekte: Handy zuerst, am Rechner weiter nach außen */
.ob1{ --x:-3%; --y:-2%; --s:38px; }
.ob2{ --x:86%; --y:3%; --s:70px; }
.ob3{ --x:3%; --y:78.5%; --s:42px; }
.ob4{ --x:88%; --y:80%; --s:52px; }
.ob5{ --x:2%; --y:24%; --s:14px; }
.ob6{ --x:95%; --y:31%; --s:12px; }
.ob7{ --x:24%; --y:-4%; --s:13px; }
.ob8{ --x:72%; --y:-2%; --s:12px; }
.ob9{ --x:95%; --y:64%; --s:12px; }
.ob10{ --x:3%; --y:68%; --s:12px; }
@media (max-width:900px){ .ob5,.ob6{ display:none; } }
@media (min-width:901px){
  .ob1{ --x:-13%; --y:2%; --s:104px; }
  .ob2{ --x:99%; --y:4%; --s:150px; }
  .ob3{ --x:-11%; --y:42%; --s:80px; }
  .ob4{ --x:101%; --y:64%; --s:108px; }
  .ob5{ --x:-2%; --y:34%; --s:26px; }
  .ob6{ --x:104%; --y:44%; --s:20px; }
  .ob7{ --x:14%; --y:-6%; --s:22px; }
  .ob8{ --x:84%; --y:-4%; --s:18px; }
  .ob9{ --x:95%; --y:88%; --s:18px; }
  .ob10{ --x:3%; --y:92%; --s:18px; }
}


/* ================= Schlagworte: schwarz, beim Einblenden läuft die Farbe von links hinein =================
   Gilt für .fill (Startseite) und .accent (alle Unterseiten). JS setzt am Elternblock die Klasse farbe-an.
   Ohne JS, ohne Bewegung oder wenn das Skript ausbleibt, stehen die Worte sofort in Farbe. */
.fill, .accent, .sub .subsec h2 .accent, .lp .subsec h2 .accent{
  font-family:inherit; font-style:normal; font-weight:inherit; letter-spacing:inherit; padding-inline:.03em; padding-right:.03em; color:var(--ink);
  background-image:radial-gradient(circle at var(--kx,0px) var(--ky,60%),transparent calc(var(--r) - 90px),var(--ink) var(--r)),
                   linear-gradient(100deg,#2f5bff 0%,#6a46ff 26%,#2f5bff 48%,#16a4f5 68%,#6a46ff 86%,#2f5bff 100%);
  background-size:100% 100%,260% 100%; background-repeat:no-repeat,repeat; background-position:0 0,0 0;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:fluss 12s linear infinite; transition:--r 1.5s cubic-bezier(.3,.6,.2,1); }
.fill, .accent{ --r:1800px; }
.js :is(.fill,.accent){ --r:0px; }
.js .farbe-an :is(.fill,.accent), .js :is(.fill,.accent).farbe, .v2-not :is(.fill,.accent){ --r:1800px; }
/* Auf farbigen Flächen bleibt das Schlagwort hell */
.subcta .accent, .bcta .accent, .k-panel .accent, .chk-bericht .accent{ background:none; -webkit-text-fill-color:currentColor; color:inherit; animation:none; }
.chk-bericht .accent{ color:#bcd0ff; }

/* ================= Eigene Klassen des Themes ================= */
.skip{ left:12px; top:-60px; padding:10px 16px; border-radius:10px; background:var(--ink); }
.skip:focus{ left:12px; top:12px; }
.werkzeuge .tsprite{ position:absolute; width:0; height:0; overflow:hidden; }
.tchip{ align-items:center; }
.tchip .tlogo{ width:18px; height:18px; flex:none; align-self:center; }
.tchip .tlogo svg{ width:18px; height:18px; display:block; fill:#5d6780; }
.tchip .tpunkt{ width:7px; height:7px; flex:none; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--violet)); align-self:center; }
.band-lauf:not(.laeuft) .ltrack, .band-lauf:not(.laeuft) .wtrack{ animation-play-state:paused; }
.band-reihe:hover .ltrack, .band-reihe:hover .wtrack{ animation-play-state:paused; }
.btn-wa, .frage-hilfe .btn{ background:#128045; color:#fff; box-shadow:0 14px 28px -14px rgba(18,128,69,.8); }
.btn-wa .lbl svg{ width:18px; height:18px; }
.cur .cur-tag{ position:absolute; left:17px; top:19px; }
/* Größere Tippflächen für Textlinks */
.pfeil-link{ padding-block:8px; }
.pk-url{ padding-block:10px; }
/* Lange Wörter auf dem Handy trennen statt über den Rand laufen */
@media (max-width:600px){ .subhero h1, .sub .subsec h2, .lp .subsec h2, .h2, .sec-head h2{ -webkit-hyphens:auto; hyphens:auto; hyphenate-limit-chars:12 5 5; overflow-wrap:break-word; } }
.sr{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Mausrand für Karten ohne eigenen Radius */
.ws-spot{ position:relative; }

/* Kontaktkanäle im Farbfeld: Symbole in Markenfarbe auf weißem Grund */
.k-kanal .ic .kico{ color:var(--blue); }
.k-kanal .ic.ig .kico{ color:#d6297a; }
.k-kanal a.wa .ic .kico{ color:#fff; }
/* WhatsApp Knopf: alter Auftritt bleibt, im offenen Menü weg */
.menu-offen .wa-float{ transform:translateY(120px); opacity:0; pointer-events:none; }

/* Kopfzeile auf kleineren Rechnern: Links bleiben einzeilig */
.nav-links a{ white-space:nowrap; }
@media (max-width:1180px){ .nav-links{ gap:20px; } .nav-links a{ font-size:14px; } }
@media (max-width:1080px){ .nav-links{ gap:16px; } .nav-links > a[href$="#pakete"]{ display:none; } .nav .nav-cta{ padding:0 18px; } }

/* ================= Megamenü als schwebende Karte unter der Pille ================= */
.mega-wrap{ left:0; right:0; top:calc(100% - 4px); max-width:var(--maxw); margin-inline:auto; padding-inline:calc(var(--gutter) * .5 - 6px); }
.mega{ left:calc(var(--gutter) * .5 - 6px); right:calc(var(--gutter) * .5 - 6px); border-radius:30px; border:1px solid rgba(14,16,22,.06); background:rgba(255,255,255,.97);
  box-shadow:0 40px 90px -40px rgba(18,28,90,.45), 0 0 0 1px rgba(14,16,22,.03); transform:translateY(-10px) scale(.985); transform-origin:50% 0; }
.mega.offen{ transform:none; }
.mega-in{ padding:30px 30px 32px; grid-template-columns:1fr 1.15fr 1fr; gap:30px; }
.mega-arbeiten.mega-in{ grid-template-columns:2.6fr 1fr; }
.mega-ratgeber.mega-in{ grid-template-columns:1fr 1fr 1fr; }
.mega-h{ display:inline-flex; align-items:center; gap:9px; color:var(--blue-deep); letter-spacing:.14em; }
.mega-h::before{ content:''; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--violet)); }
.mlink:hover{ background:#f3f4ff; }
.mthumb{ border-radius:12px; }
.mthumb-ico.t1{ background:linear-gradient(145deg,#8aa2ff,#2f5bff 60%,#1b2fb0); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 8px 16px -8px rgba(47,91,255,.8); }
.mthumb-ico.t2{ background:linear-gradient(145deg,#b39bff,#7c4dff 55%,#4a22c9); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 8px 16px -8px rgba(124,77,255,.8); }
.mthumb-ico.t3{ background:linear-gradient(145deg,#9befff,#22c3f5 50%,#0b7fc4); box-shadow:inset 0 1px 1px rgba(255,255,255,.5), 0 8px 16px -8px rgba(34,160,245,.8); }
.mega-col .mega-feature{ margin-top:18px; }
.mega-feature{ border-radius:22px; background:#f6f6ff; border-color:rgba(14,16,22,.06); }
.mega-feature img{ height:118px; }
.mega-feature-farbe{ position:relative; overflow:hidden; isolation:isolate; border:0; color:#fff; align-self:stretch; display:flex; align-items:flex-end;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.22),transparent 60%),linear-gradient(135deg,#1c3cf0 0%,#3a2fe0 40%,#6a3cff 72%,#2f8bff 100%); box-shadow:0 30px 60px -36px rgba(47,60,255,.8); }
.mega-feature-farbe b{ color:#fff; font-size:22px; letter-spacing:-.03em; }
.mega-feature-farbe em{ color:rgba(255,255,255,.84); }
.mega-feature-farbe .mf-kicker{ color:rgba(255,255,255,.8); }
.mega-feature-farbe .mf-go{ color:#fff; }
.mega-feature-farbe .mf-txt{ padding:24px; }
.mcard{ border-radius:20px; border-color:rgba(14,16,22,.07); }
.mega-schatten{ background:rgba(20,26,80,.12); }
body.mega-offen .nav-row::before{ opacity:1; transform:none; }
@media (max-width:1180px){ .mega-in{ gap:20px; padding:24px; } }

/* ================= Seitenkopf der Unterseiten: Seide wie auf der Startseite ================= */
.subhero{ position:relative; isolation:isolate; overflow:hidden; overflow:clip; margin-top:calc(-1 * var(--navh));
  padding:calc(var(--navh) + clamp(26px,4.6vw,64px)) 0 clamp(46px,6.4vw,92px);
  background:
    radial-gradient(56% 40% at 96% 6%, rgba(124,77,255,.20), transparent 70%),
    radial-gradient(50% 44% at 80% 90%, rgba(34,195,245,.18), transparent 70%),
    radial-gradient(40% 40% at 0% 0%, rgba(47,91,255,.14), transparent 70%),
    var(--bg); }
.subhero .ws-seide{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; opacity:0; transition:opacity 1.6s ease; pointer-events:none; }
.subhero .ws-seide.an{ opacity:1; }
.subhero .held-ende{ position:absolute; left:0; right:0; bottom:0; height:120px; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,0),var(--bg)); }
.subhero > .wrap{ position:relative; z-index:1; }
.subhero-text{ position:relative; }
.subhero .kicker{ display:inline-flex; width:auto; margin:0 0 20px; padding:8px 16px 8px 12px; border-radius:999px; font-size:12px; letter-spacing:.14em;
  background:rgba(255,255,255,.76); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(47,91,255,.16); box-shadow:0 10px 26px -14px rgba(47,91,255,.5); }
.subhero .kicker::before{ width:8px; height:8px; border-radius:50%; background:var(--blue); animation:kickerPuls 2.2s ease-out infinite; }
@keyframes kickerPuls{ 0%{ box-shadow:0 0 0 0 rgba(47,91,255,.55); } 100%{ box-shadow:0 0 0 9px rgba(47,91,255,0); } }
.subhero h1{ font-size:clamp(38px,6vw,80px); font-weight:800; letter-spacing:-.05em; line-height:1.0; max-width:15ch; color:var(--ink); text-wrap:balance; }
.subhero.mit-bild h1{ font-size:clamp(36px,4.8vw,66px); }
.subhero .lede{ margin-top:clamp(20px,2.4vw,28px); max-width:56ch; font-size:clamp(16.5px,1.5vw,19.5px); line-height:1.64; color:var(--ink-dim); text-wrap:pretty; }
.subhero-cta{ margin-top:clamp(24px,3vw,34px); }
.trustline{ gap:8px 16px; margin-top:20px; font-size:13.5px; font-weight:500; }
.trustline > span:first-child{ display:inline-flex; align-items:center; gap:8px; }
.trustline .stars{ color:var(--star); }
.crumbs ol{ margin-bottom:14px; font-size:13px; }
.crumbs a{ color:var(--ink-dim); }
.subhero-bild{ perspective:1600px; }
.subhero-bild .pmini{ border-radius:18px; overflow:hidden; box-shadow:0 60px 100px -46px rgba(24,36,120,.55), 0 0 0 1px rgba(14,16,22,.07); }
.subhero-handy{ border-radius:24px; border-width:5px; box-shadow:0 40px 70px -26px rgba(18,28,90,.6); }
/* 3D Objekte im Seitenkopf */
.sub-objs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.sub-objs .obj{ position:absolute; left:var(--x); top:var(--y); width:var(--s); }
.sub-objs .so1{ --x:88%; --y:30%; --s:clamp(54px,6vw,92px); }
.sub-objs .so2{ --x:76%; --y:62%; --s:clamp(70px,8vw,132px); }
.sub-objs .so3{ --x:94%; --y:52%; --s:clamp(14px,1.4vw,22px); }
.sub-objs .so4{ --x:66%; --y:20%; --s:clamp(12px,1.2vw,18px); }
.sub-objs .so5{ --x:84%; --y:86%; --s:clamp(28px,3vw,46px); }
.mit-bild .sub-objs .so1{ --x:93%; --y:15%; }
.mit-bild .sub-objs .so2{ display:none; }
.mit-bild .sub-objs .so4{ --x:52%; --y:10%; }
.mit-bild .sub-objs .so5{ --x:95%; --y:78%; }
@media (max-width:900px){
  .sub-objs .so1, .sub-objs .so2, .sub-objs .so5{ display:none; }
  .sub-objs .so3{ --x:90%; --y:17%; --s:16px; }
  .sub-objs .so4{ --x:76%; --y:9%; }
}
.js .sub-objs .obj-pop{ transform:scale(.2); opacity:0; }
.go .sub-objs .obj-pop{ transform:none; opacity:1; transition:transform 1.1s var(--spring) var(--in,.6s), opacity .5s ease var(--in,.6s); }

/* ================= Abschnitte der Unterseiten ================= */
.sub .subsec{ padding-block:clamp(56px,7vw,108px); }
.sub .subsec.soft, .lp .subsec.soft{ border-block:0; background:linear-gradient(180deg,rgba(245,245,255,0) 0%,#f5f5ff 12%,#f7f4ff 88%,rgba(247,244,255,0) 100%); }
.sub .subsec h2, .lp .subsec h2{ font-size:clamp(30px,4.2vw,52px); font-weight:800; letter-spacing:-.045em; line-height:1.06; text-wrap:balance; }
.sec-head h2{ font-size:clamp(32px,4.8vw,60px); letter-spacing:-.045em; line-height:1.04; }
.b2-kopf{ max-width:780px; margin-bottom:clamp(30px,4vw,52px); }
.b2-kicker{ gap:10px; font-size:12.5px; font-weight:750; letter-spacing:.16em; color:var(--blue-deep); margin-bottom:14px; }
.b2-kicker::before{ width:20px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--violet)); box-shadow:none; }
.sub .subsec p.b2-lede{ font-size:clamp(16.5px,1.5vw,19px); color:var(--ink-dim); line-height:1.62; }
.sub .subsec p{ text-wrap:pretty; }

/* Symbolflächen als kleine 3D Kacheln */
.b2-sym{ width:54px; height:54px; border-radius:17px;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.55), inset 0 -6px 10px rgba(10,10,60,.26), 0 5px 0 -1px var(--kante,#2440d8), 0 20px 28px -14px var(--sh,rgba(47,91,255,.6)); }
.b2-sym.klein{ width:42px; height:42px; border-radius:13px; box-shadow:inset 0 2px 1px rgba(255,255,255,.5), inset 0 -4px 8px rgba(10,10,60,.24), 0 4px 0 -1px var(--kante,#2440d8), 0 14px 22px -12px var(--sh,rgba(47,91,255,.6)); }
.f-blau{ background:linear-gradient(145deg,#8aa2ff 0%,#2f5bff 55%,#1f3fd8 100%); --kante:#1a33b8; }
.f-violett{ background:linear-gradient(145deg,#b39bff 0%,#7c4dff 52%,#5a2fe0 100%); --kante:#4a22c9; }
.f-cyan{ background:linear-gradient(145deg,#9befff 0%,#22c3f5 48%,#0b8fd4 100%); --kante:#0876b3; }
.f-gruen{ background:linear-gradient(145deg,#8ff0b4 0%,#22b35c 52%,#15803d 100%); --kante:#12702f; }
.f-orange{ background:linear-gradient(145deg,#ffd08a 0%,#fb923c 50%,#ea580c 100%); --kante:#c2410c; }
.f-rosa{ background:linear-gradient(145deg,#ffb3dc 0%,#ec4899 52%,#c0187a 100%); --kante:#a3135f; }
.f-grau{ box-shadow:none; }
.b2-sym svg{ filter:drop-shadow(0 1px 1px rgba(10,10,60,.25)); }

/* Karten: runder, weicher Schatten, Lichtrand */
.b2-kachel, .b2-link, .b2-vorteil, .b2-seite, .karte, .split .split-inhalt, .b2-haken li{ border-color:rgba(14,16,22,.07); }
.b2-kachel{ border-radius:26px; padding:26px 24px 24px; box-shadow:0 34px 70px -50px rgba(24,36,120,.45), 0 2px 8px -4px rgba(24,36,120,.07); transition:transform .5s var(--ease-out), box-shadow .5s ease, border-color .4s ease; }
.b2-kachel:hover{ transform:translateY(-6px); border-color:rgba(47,91,255,.2); box-shadow:0 46px 80px -48px rgba(24,36,120,.55), 0 2px 8px -4px rgba(24,36,120,.07); }
.b2-kachel h3{ font-size:19px; font-weight:750; letter-spacing:-.025em; margin:20px 0 8px; }
.b2-link{ border-radius:22px; padding:20px; box-shadow:0 26px 50px -40px rgba(24,36,120,.45); }
.b2-vorteil{ border-radius:22px; padding:18px; box-shadow:0 26px 50px -40px rgba(24,36,120,.45); }
.b2-seite{ border-radius:28px; padding:30px 28px; }
.b2-seite.stark{ background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#2f5bff,#7c4dff 55%,#22c3f5) border-box; box-shadow:0 40px 80px -46px rgba(92,78,255,.65); }
.b2-haken li{ border-radius:18px; box-shadow:0 18px 36px -32px rgba(24,36,120,.45); }
.karte{ border-radius:26px; box-shadow:0 30px 60px -46px rgba(24,36,120,.45); }
.fakten{ border-radius:28px; border-color:rgba(14,16,22,.07); box-shadow:0 34px 70px -50px rgba(24,36,120,.45); }
.sub .subsec .fakten h2{ font-size:clamp(22px,2.4vw,28px); letter-spacing:-.03em; line-height:1.15; margin-bottom:14px; }
/* Kacheln auf dem Handy: Symbol links, alles andere rechts daneben */
@media (max-width:600px){ .b2-kachel > :not(.b2-sym){ grid-column:2; } .b2-kachel .b2-sym{ grid-row:1 / span 3; align-self:start; } }
.split .split-inhalt{ border-radius:28px; box-shadow:0 34px 70px -50px rgba(24,36,120,.45); }
.b2-hinweis{ border-radius:24px; padding:22px 24px; background:linear-gradient(#fff,#fff) padding-box, linear-gradient(120deg,#2f5bff,#7c4dff 55%,#22c3f5) border-box; box-shadow:0 30px 60px -40px rgba(92,78,255,.55); }

/* Schritte */
.b2-nr{ border-radius:17px; width:54px; height:54px; box-shadow:inset 0 2px 1px rgba(255,255,255,.5), inset 0 -6px 10px rgba(10,10,60,.25), 0 0 0 6px #fff, 0 16px 28px -12px rgba(47,91,255,.7); }
.soft .b2-nr{ box-shadow:inset 0 2px 1px rgba(255,255,255,.5), inset 0 -6px 10px rgba(10,10,60,.25), 0 0 0 6px #f6f5ff, 0 16px 28px -12px rgba(47,91,255,.7); }
.b2-schritte li:nth-child(1) .b2-nr{ background:linear-gradient(145deg,#8aa2ff,#2f5bff 55%,#1f3fd8); }
.b2-schritte li:nth-child(2) .b2-nr{ background:linear-gradient(145deg,#b39bff,#7c4dff 52%,#5a2fe0); }
.b2-schritte li:nth-child(3) .b2-nr{ background:linear-gradient(145deg,#9befff,#22c3f5 48%,#0b8fd4); }
.b2-schritte li:nth-child(4) .b2-nr{ background:linear-gradient(145deg,#8aa2ff,#2f5bff 55%,#1f3fd8); }
.b2-schritte li:nth-child(5) .b2-nr{ background:linear-gradient(145deg,#b39bff,#7c4dff 52%,#5a2fe0); }
.b2-schritte::after{ background:linear-gradient(90deg,var(--blue),var(--violet),var(--cyan)); }
.b2-schritte::before, .b2-schritte::after{ top:26px; }
@media (max-width:860px){ .b2-schritte::before, .b2-schritte::after{ left:26px; top:27px; } }
.b2-schritte h3{ font-size:18.5px; font-weight:750; letter-spacing:-.02em; }

/* Zitat: helle Karte mit großem Anführungszeichen statt dunkler Fläche */
.quote{ background:#fff; color:var(--ink); border:1px solid rgba(14,16,22,.07); border-radius:34px; padding:clamp(30px,4.6vw,56px);
  box-shadow:0 60px 110px -64px rgba(24,36,120,.6), 0 2px 10px -4px rgba(24,36,120,.08); }
.quote::before{ content:'\201C'; font-family:var(--font); font-style:normal; font-weight:900; font-size:clamp(200px,24vw,300px); right:24px; bottom:auto; top:-.12em; line-height:1;
  color:transparent; background:linear-gradient(135deg,var(--blue),var(--violet) 60%,var(--cyan)); -webkit-background-clip:text; background-clip:text; opacity:.16; }
.quote .stars{ color:var(--star); }
.sub .subsec .quote blockquote p, .lp .quote blockquote p{ color:var(--ink); font-weight:650; letter-spacing:-.02em; }
.quote figcaption{ color:var(--ink-dim); padding-top:20px; border-top:1px solid rgba(14,16,22,.07); }
.quote figcaption b{ color:var(--ink); }
.quote .av{ background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; }

/* Handlungsbänder in Markenfarbe */
.bcta{ border-radius:32px; padding:30px 32px;
  background:radial-gradient(420px 220px at 92% 0%, rgba(255,255,255,.24), transparent 70%), radial-gradient(360px 220px at 0% 100%, rgba(34,195,245,.45), transparent 70%), linear-gradient(135deg,#1c3cf0 0%,#3a2fe0 40%,#6a3cff 72%,#2f8bff 100%);
  box-shadow:0 40px 80px -44px rgba(47,60,255,.85); }
.bcta-sym{ border-radius:17px; box-shadow:inset 0 1px 1px rgba(255,255,255,.4); }
.subcta > .wrap{ border-radius:clamp(30px,3.6vw,46px);
  background:
    radial-gradient(520px 300px at 88% -10%, rgba(255,255,255,.26), transparent 65%),
    radial-gradient(480px 320px at -5% 110%, rgba(34,195,245,.5), transparent 65%),
    linear-gradient(135deg,#1c3cf0 0%,#3a2fe0 40%,#6a3cff 72%,#2f8bff 100%);
  box-shadow:0 60px 120px -60px rgba(47,60,255,.85); }
.subcta h2{ font-size:clamp(32px,4.4vw,56px); letter-spacing:-.045em; line-height:1.04; }
.cta-deko{ border-radius:18px; background:rgba(255,255,255,.16); box-shadow:inset 0 1px 1px rgba(255,255,255,.4), 0 16px 30px -16px rgba(10,10,60,.5); }

/* Häufige Fragen: Karten mit Plus, das sich zum Minus dreht */
.faq{ display:grid; gap:12px; }
.qa, .sub .faq .qa{ border-radius:22px; background:#fff; border:1px solid rgba(14,16,22,.07); box-shadow:0 20px 40px -34px rgba(24,36,120,.4); transition:box-shadow .4s ease, border-color .4s ease; }
.qa[open], .sub .faq .qa[open]{ border-color:rgba(47,91,255,.25); box-shadow:0 30px 60px -36px rgba(47,91,255,.45); }
.qa summary{ padding:20px 22px; font-size:clamp(16.5px,1.4vw,18px); font-weight:700; letter-spacing:-.015em; color:var(--ink); }
.qa summary .pm{ position:relative; width:34px; height:34px; background:#f1f2fb; color:transparent; font-size:0; transition:background-color .35s, transform .5s var(--ease-out); }
.qa summary .pm::before, .qa summary .pm::after{ content:''; position:absolute; left:50%; top:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:var(--ink); transition:transform .45s var(--ease-out), background-color .3s; }
.qa summary .pm::after{ transform:rotate(90deg); }
.qa[open] summary .pm{ background:var(--blue); transform:rotate(180deg); }
.qa[open] summary .pm::before, .qa[open] summary .pm::after{ background:#fff; }
.qa[open] summary .pm::after{ transform:rotate(0deg); }
.qa .ans{ padding:0 22px 22px; font-size:16px; line-height:1.65; color:var(--ink-dim); max-width:66ch; }
.qa .plink{ display:flex; width:fit-content; color:var(--blue-deep); }

/* Formular im neuen Stil */
.field label{ font-size:14px; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.field input, .field select, .field textarea{ min-height:52px; padding:13px 16px; border-radius:16px; border:1.5px solid #e4e6f0; background:#f8f9fd; font-size:16px; transition:border-color .25s, background-color .25s, box-shadow .25s; }
.field textarea{ min-height:124px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(47,91,255,.12); }
.field select{ -webkit-appearance:none; appearance:none; padding-right:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23555c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; background-size:16px; }
.form .btn[type="submit"], .form button.btn{ width:100%; justify-self:stretch; }
.consent input{ width:20px; height:20px; }
.k-form .form{ margin:14px 0 0; max-width:none; }
.k-form .formnote{ text-align:center; }
.sent{ border-radius:28px; border-color:rgba(14,16,22,.07); }
.k-form .sent{ margin:10px 0 0; box-shadow:none; border:0; padding:20px 0 0; }

/* Projektdaten: nie breiter als die Spalte, auf dem Tablet untereinander */
.projmeta{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.projmeta b, .projmeta a{ overflow-wrap:break-word; }
@media (max-width:900px){ .projmeta{ grid-template-columns:minmax(0,1fr); } }
.projmeta > div{ border-radius:20px; border-color:rgba(14,16,22,.07); box-shadow:0 20px 40px -34px rgba(24,36,120,.4); }
/* Projektkarten und Rechnerbilder */
.pmini{ border-radius:18px; }
.wcard{ border-radius:28px; }

/* ================= Fußzeile ================= */
.fuss{ padding-bottom:0; }
.fuss .f-kanal{ display:inline-flex; align-items:center; gap:8px; }
.fuss .f-kanal .kico{ flex:none; }
.f-sterne{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; padding:8px 14px; border-radius:999px; background:#fff; border:1px solid rgba(14,16,22,.06); font-size:13.5px; font-weight:600; color:var(--ink-soft); box-shadow:0 10px 24px -16px rgba(20,30,90,.35); }
.f-sterne .sterne{ color:var(--star); letter-spacing:1px; }
.f-sterne b{ color:var(--ink); font-weight:800; }
.f-spalte a{ display:inline-block; padding-block:3px; }
.f-unten span{ padding-block:4px; }

/* ================= Sicherheitsnetz: Skript fehlt, alles sichtbar ================= */
.v2-not [data-maske], .v2-not [data-rein], .v2-not [data-r], .v2-not .obj-pop, .v2-not .bchip-pop, .v2-not .siegel{ transform:none !important; opacity:1 !important; }
.v2-not .ph:not(.an){ display:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .subhero .kicker::before{ animation:none; }
  .js .sub-objs .obj-pop{ transform:none; opacity:1; }
}

/* ================= Ablauf: Handy dreht sich bei jedem Schritt einmal ganz um ================= */
.ph-halter{ position:relative; transform-style:preserve-3d; animation:schweben 6.5s ease-in-out infinite; --rot:0deg; }
.ph3d{ transform:rotateX(5deg) rotateY(-12deg); }
.ph3d .fon-body{ -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.fon-back{ position:absolute; inset:0; border-radius:17% / 8.4%; overflow:hidden; transform:rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(124,77,255,.55), transparent 70%),
    linear-gradient(155deg,#3d45b8 0%,#262a78 42%,#1c1f55 70%,#3a2a9a 100%);
  box-shadow:0 60px 90px -30px rgba(18,28,90,.55), inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 0 0 4px #161a4a; }
.fon-back .cam{ position:absolute; left:9%; top:4.6%; width:36%; aspect-ratio:1; border-radius:30%; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 8px 18px -8px rgba(0,0,20,.6); }
.fon-back .cam i{ position:absolute; width:38%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle at 35% 35%,#5a6cff 0 12%,#101433 30%,#05061a 70%); box-shadow:0 0 0 3px rgba(255,255,255,.12), 0 0 0 5px rgba(10,12,40,.6); }
.fon-back .cam i:nth-child(1){ left:8%; top:8%; } .fon-back .cam i:nth-child(2){ left:8%; bottom:8%; } .fon-back .cam i:nth-child(3){ right:8%; top:31%; width:22%; }
.fon-back img{ position:absolute; left:50%; top:52%; width:36%; height:auto; transform:translate(-50%,-50%); filter:brightness(0) invert(1); opacity:.92; }
.ph-info{ position:absolute; z-index:4; left:-2%; bottom:14%; display:flex; align-items:flex-start; gap:12px; width:min(270px,64%); padding:14px 16px 14px 14px; border-radius:20px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 26px 50px -22px rgba(18,28,90,.5), 0 0 0 1px rgba(14,16,22,.05); transition:opacity .35s ease, transform .6s var(--spring); }
.ph-info.weg{ opacity:0; transform:translateY(14px) scale(.9); transition:opacity .2s ease, transform .25s ease; }
.ph-info .nr{ flex:none; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:13.5px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
  background:linear-gradient(145deg,#8aa2ff,#2f5bff 55%,#5a2fe0); box-shadow:inset 0 2px 1px rgba(255,255,255,.5), inset 0 -4px 8px rgba(10,10,60,.25), 0 10px 20px -10px rgba(47,91,255,.8); }
.ph-info b{ display:block; font-size:15px; font-weight:750; letter-spacing:-.02em; line-height:1.25; color:var(--ink); }
.ph-info small{ display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--ink-dim); }
.ph-label{ display:none; }
@media (max-width:900px){
  .ph-info{ left:auto; right:-2%; bottom:6%; width:min(200px,54vw); padding:10px 12px 10px 10px; gap:9px; border-radius:16px; }
  .ph-info .nr{ width:30px; height:30px; border-radius:10px; font-size:12px; }
  .ph-info b{ font-size:13px; }
  .ph-info small{ font-size:11.5px; }
}
@media (prefers-reduced-motion:reduce){ .ph-halter{ animation:none; } }

/* ================= Screenshots der Kundenseiten: immer ganz in der Breite, nur unten beschnitten ================= */
.subhero-bild .pmini img, .wcard .pmini img{ aspect-ratio:880/386; object-fit:cover; object-position:top center; }

/* ================= Kopfzeile auf dem Handy: mehr Luft in der weißen Pille ================= */
@media (max-width:900px){
  .nav .nav-row{ padding-inline:calc(var(--gutter) + 8px); }
  .nav-row::before{ left:10px; right:10px; top:6px; bottom:6px; }
  .burger{ width:42px; height:42px; }
  .burger span{ left:13px; right:13px; }
  .burger span:nth-child(1){ top:16px; } .burger span:nth-child(2){ top:23px; }
}
@media (max-width:760px){ .brand img.brand-logo{ width:132px; height:34px; } }

/* Chips auf der Bühne: Hülle liegt absolut, der Chip selbst im Fluss der Hülle */
.bchip-w{ position:absolute; z-index:4; }
.c-note-w{ z-index:5; }
.bchip-w .bchip{ position:relative; }

/* Abschnittskicker: Strich ohne pulsierenden Ring (alte Animation hieß gleich) */
.b2-kicker::before{ animation:none; }

/* Ablauf: inaktive Schritte über die Farbe zurücknehmen statt über Deckkraft (Kontrast bleibt lesbar) */
.schritt{ opacity:1; }
.schritt:not(.an) h3, .schritt:not(.an) p{ color:#666c7d; }
.schritt:not(.an) .snr{ color:#5f6576; }

/* Angemeldet: Kopfzeile unter der WordPress Leiste */
@media (min-width:601px){ .admin-bar .nav{ top:46px; } }
@media (min-width:783px){ .admin-bar .nav{ top:32px; } }