/*
Theme Name: Webdesign Schinck
Theme URI: https://webdesign-schinck.de
Author: Maxi Schinck
Description: Eigenes Theme für webdesign-schinck.de. Ohne Seitenbaukasten, ohne Fremdbibliotheken. Aufbau und Animationen von Hand.
Version: 1.10.3
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;
    animation:curtainOut .7s cubic-bezier(.76,0,.24,1) forwards; animation-delay:.42s; }
  .curtain img{ width:64px; height:64px; border-radius:18px; animation:markPop .5s 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{ opacity:0; transform:translateY(18px); animation:enterUp .8s cubic-bezier(.2,.75,.25,1) forwards; }
  @keyframes enterUp{ to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .enter{ opacity:1; transform:none; animation:none; } }
  .reveal{ opacity:1; transform:none; transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.25,1); }
  @media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(28px); } .reveal.is-visible{ opacity:1; transform:none; } }
  .word{ display:inline-block; }
  [data-split] .word{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
  [data-split].on .word{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ [data-split] .word{ opacity:1; transform:none; } }

  .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; transition:transform .2s ease; }
  .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); transform:scale(0); animation:rippleAnim .7s ease-out forwards; pointer-events:none; }
  .btn-ghost .ripple{ background:rgba(47,91,255,.2); }
  @keyframes rippleAnim{ to{ transform:scale(1); opacity:0; } }


  /* ---------- 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); animation:auroraA 17s ease-in-out infinite; }
  .aurora .a2{ width:460px; height:460px; right:4%; top:-60px; background:rgba(18,194,233,.15); animation:auroraB 21s ease-in-out infinite; }
  .aurora .a3{ width:420px; height:420px; left:42%; bottom:-220px; background:rgba(122,90,255,.11); animation:auroraC 25s ease-in-out infinite; }
  @keyframes auroraA{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(90px,60px) scale(1.14); } }
  @keyframes auroraB{ 0%,100%{ transform:translate(0,0) scale(1.06); } 50%{ transform:translate(-80px,50px) scale(.94); } }
  @keyframes auroraC{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(60px,-70px) scale(1.1); } }
  .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));
    animation:sweepMove 9s ease-in-out infinite; }
  @keyframes sweepMove{ 0%{ left:-35%; opacity:0; } 12%{ opacity:.9; } 55%{ left:105%; opacity:0; } 100%{ left:105%; opacity:0; } }
  @media (prefers-reduced-motion:reduce){ .aurora i,.sweep i{ animation:none; } .sweep{ display:none; } }

  /* ---------- 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%; animation:driftMove linear infinite; }
  .drift .dmi svg{ width:100%; height:100%; }
  @keyframes driftMove{ 0%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(24px,-32px) rotate(8deg); } 100%{ transform:translate(0,0) rotate(0deg); } }
  @media (prefers-reduced-motion:reduce){ .drift .dmi{ animation:none; } }

  .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; }
  .hero h1 .w{ display:inline-block; opacity:0; transform:translateY(28px); animation:wordUp .85s cubic-bezier(.2,.8,.25,1) forwards; }
  @keyframes wordUp{ to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .hero h1 .w{ opacity:1; transform:none; animation:none; } }
  .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; transform:translateY(.22em); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
  .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 44px; 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;
    animation:loopMove 40s linear infinite; }
  .trow:hover .ttrack{ animation-play-state:paused; }
  .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; } }
  @media (prefers-reduced-motion:reduce){ .ttrack{ animation: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; animation:loopMove 32s linear infinite; }
  .loop:hover .loop-track{ animation-play-state:paused; }
  .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); }
  @keyframes loopMove{ from{ transform:translateX(0); } to{ transform:translateX(calc(-1 * var(--setw, 50%))); } }
  @media (prefers-reduced-motion:reduce){ .loop-track{ animation:none; } }

  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:center; }
  @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; opacity:.32; transform:translateY(8px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.25,1); }
  .step.on{ opacity:1; transform:none; }
  .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; }
  @media (max-width:900px){ .step{ opacity:1; transform:none; } }

  .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; } }
  .sub .subsec{ animation:subUp .65s cubic-bezier(.2,.8,.25,1) both; }
  .sub .subhero{ animation:subUp .55s cubic-bezier(.2,.8,.25,1) both; }
  .sub .subsec:nth-of-type(2){ animation-delay:.06s; }
  .sub .subsec:nth-of-type(3){ animation-delay:.1s; }
  @keyframes subUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  @media (prefers-reduced-motion:reduce){ .sub .subsec,.sub .subhero{ animation: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 */
  @media (prefers-reduced-motion:no-preference){
    .js [data-b2]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease var(--d,0ms), transform .8s cubic-bezier(.2,.75,.25,1) var(--d,0ms); }
    .js [data-b2].b2-an{ opacity:1; transform:none; }
  }

  /* 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 (prefers-reduced-motion:no-preference){
    .cta-deko{ animation:ctaSchweben 6s ease-in-out infinite; }
    .cta-deko.d2{ animation-duration:7s; animation-delay:-2s; }
    .cta-deko.d3{ animation-duration:5.5s; animation-delay:-1s; }
    .cta-deko.d4{ animation-duration:6.5s; animation-delay:-3s; }
  }
  @keyframes ctaSchweben{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
  @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{ animation:waRein .7s cubic-bezier(.2,1.3,.35,1) .6s backwards; }
    .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 waRein{ from{ opacity:0; transform:translateY(30px) scale(.85); } to{ opacity:1; transform:none; } }
  @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; transition:opacity .45s ease; }
  .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-buehne{ animation:storySchwenk 10s ease-in-out infinite alternate; transition:transform .2s ease-out; }
    .b2-story.folgt .b2-buehne{ animation:none; }
    .b2-story .b2-chip.c1{ animation:storyChip 5s ease-in-out infinite; }
    .b2-story .b2-chip.c2{ animation:storyChip 5.6s ease-in-out -2s infinite; }
    .b2-spiegel{ animation:storySpiegel 7s ease-in-out 1s infinite; }

    .b2-story.laeuft .b2-caret{ display:inline-block; animation:storyCaret 1s steps(1) infinite; }
    .b2-story.laeuft.s-k .b2-caret{ display:none; }
    .b2-story.laeuft .b2-pin, .b2-story.laeuft .b2-zeile, .b2-story.laeuft .b2-pin-label{ opacity:0; }
    .b2-story.laeuft.s-k .b2-pin{ animation:storyPin .6s cubic-bezier(.2,1.5,.4,1) both; }
    .b2-story.laeuft.s-k .b2-pin.p2{ animation-delay:.14s; }
    .b2-story.laeuft.s-k .b2-pin.an{ animation:storyPinGross .75s cubic-bezier(.2,1.6,.4,1) .32s both; }
    .b2-story.laeuft.s-t .b2-zeile{ animation:storyZeile .5s cubic-bezier(.2,.8,.25,1) both; }
    .b2-story.laeuft.s-t .b2-zeile.z2{ animation-name:storyZeileMatt; animation-delay:.12s; }
    .b2-story.laeuft.s-t .b2-zeile.z3{ animation-name:storyZeileMatt; animation-delay:.24s; }
    .b2-story.laeuft.s-h .b2-zeile.an{ animation:storyZeile .5s both, storyHervor .7s cubic-bezier(.2,1.4,.4,1) both; }
    .b2-story.laeuft.s-h .b2-pin-label{ animation:storyLabel .55s cubic-bezier(.2,1.5,.4,1) both; }
    .b2-story.laeuft.s-h .b2-pin.an::after{ animation:storyBoden 1.4s ease-out infinite; }
    .b2-story.laeuft.s-f .b2-finger{ animation:storyFinger .7s cubic-bezier(.3,.7,.2,1) both; }
    .b2-story.laeuft.s-p .b2-finger{ animation:storyFinger .7s cubic-bezier(.3,.7,.2,1) both, storyDruck .35s ease-in-out both; }
    .b2-story.laeuft.s-p .b2-ruf::before{ animation:storyWelle .6s ease-out both; }
    .b2-story.laeuft.s-a .b2-anruf{ transform:none; transition:transform .55s cubic-bezier(.2,.8,.2,1); }
    .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; }
    .b2-story.laeuft.s-a .b2-punkte i{ animation:storyPunkt 1.1s ease-in-out infinite; }
    .b2-story.laeuft.s-a .b2-punkte i:nth-child(2){ animation-delay:.15s; }
    .b2-story.laeuft.s-a .b2-punkte i:nth-child(3){ animation-delay:.3s; }
    .b2-story.laeuft.s-x .b2-screen{ opacity:0; }
  }
  @keyframes storySchwenk{ 0%{ transform:rotateX(6deg) rotateY(-16deg); } 100%{ transform:rotateX(2deg) rotateY(12deg); } }
  @keyframes storyChip{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
  @keyframes storySpiegel{ 0%,55%{ background-position:120% 0; } 85%,100%{ background-position:-20% 0; } }
  @keyframes storyCaret{ 50%{ opacity:0; } }
  @keyframes storyPin{ from{ opacity:0; transform:translate(-50%,-190%) scale(.5); } to{ opacity:1; transform:translate(-50%,-100%) scale(1); } }
  @keyframes storyPinGross{ from{ opacity:0; transform:translate(-50%,-220%) scale(.4); } to{ opacity:1; transform:translate(-50%,-100%) scale(1); } }
  @keyframes storyZeile{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  @keyframes storyZeileMatt{ from{ opacity:0; transform:translateY(14px); } to{ opacity:.62; transform:none; } }
  @keyframes storyHervor{ 0%{ transform:scale(1); } 45%{ transform:scale(1.07); } 100%{ transform:scale(1.035); } }
  @keyframes storyLabel{ from{ opacity:0; transform:translateX(-50%) translateY(6px) scale(.6); } to{ opacity:1; transform:translateX(-50%) scale(1); } }
  @keyframes storyBoden{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }
  @keyframes storyFinger{ from{ opacity:0; transform:translate(60px,90px) scale(1.15); } 60%{ opacity:1; } to{ opacity:1; transform:translate(0,0) scale(1); } }
  @keyframes storyDruck{ 0%,100%{ scale:1; } 50%{ scale:.72; background-color:rgba(47,91,255,.45); } }
  @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); } }
  @keyframes storyPunkt{ 0%,100%{ opacity:.35; transform:translateY(0); } 50%{ opacity:1; transform:translateY(-3px); } }
  @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; }
  }
  @media (max-width:600px) and (prefers-reduced-motion:no-preference){
    .b2-buehne{ animation-name:storySchwenkKlein; }
  }
  @keyframes storySchwenkKlein{ 0%{ transform:rotateX(4deg) rotateY(-9deg); } 100%{ transform:rotateX(2deg) rotateY(8deg); } }
  /* 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); }
  @media (prefers-reduced-motion:no-preference){
    .b2-slot.dreh{ animation:slotRein .16s cubic-bezier(.2,.8,.3,1) both; }
    .b2-slot.fest{ animation:slotFest .5s cubic-bezier(.2,1.6,.4,1) both; }
  }
  @keyframes slotRein{ from{ opacity:.2; transform:translateY(85%); filter:blur(1.5px); } to{ opacity:1; transform:none; filter:none; } }
  @keyframes slotFest{ 0%{ transform:translateY(40%); } 60%{ transform:translateY(-12%) scale(1.06); } 100%{ transform:none; } }
  /* 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. */
  .hero h1 .w{ opacity:1; transform:none; position:relative; animation-name:wordTop; animation-fill-mode:both; }
  @keyframes wordTop{ from{ top:.5em; } to{ top:0; } }
  @media (prefers-reduced-motion:reduce){ .hero h1 .w{ animation:none; top:0; } }
  /* Unterseiten: Seitenkopf sofort messbar sichtbar (LCP), nur Hochgleiten statt Einblenden */
  .sub .subhero{ position:relative; }
  .sub .subsec, .sub .subhero{ animation-name:subTop; }
  @keyframes subTop{ from{ top:18px; } to{ top:0; } }

/* 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; }
  }
  @media (max-width:900px) and (prefers-reduced-motion:no-preference), (pointer:coarse) and (prefers-reduced-motion:no-preference){
    .b2-story .b2-handy{ animation:storyHandySchweben 5s ease-in-out infinite; }
    .b2-story .b2-chip.c1{ animation:storyChipMitte 5s ease-in-out infinite; }
    .b2-story .b2-chip.c2{ animation:storyChipMitte 5.6s ease-in-out -2s infinite; }
  }
  @keyframes storyHandySchweben{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
  @keyframes storyChipMitte{ 0%,100%{ translate:-50% 0; } 50%{ translate:-50% -6px; } }

/* 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; }