:root{
    --bg:#02040F;
    --bg-2:#050B1A;
    --panel:#0A1426;
    --panel-2:#0D1A30;
    --cyan:#00E0FF;
    --blau:#2E8BFF;
    --verlauf:linear-gradient(120deg,#00E0FF,#2E8BFF);
    --text:#EAF2FB;
    --muted:#8CA1B8;
    --linie:rgba(0,224,255,.14);
    --glow:0 0 44px rgba(0,224,255,.28);
    --radius:18px;
    --display:'Poppins',system-ui,sans-serif;
    --body:'Manrope',system-ui,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:var(--body);color:var(--text);background:var(--bg);line-height:1.65;font-size:17px;overflow-x:hidden}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px}
  img,svg{display:block}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation:none!important;transition:none!important}
  }

  /* ── Hintergrund-Effekte (beide Ansichten) ─────────────── */
  .fx-gitter{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(0,224,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,224,255,.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 20%, black, transparent 75%);
  }
  .orb{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:0}
  .orb-a{width:560px;height:560px;background:rgba(46,139,255,.16);top:-180px;left:-160px;animation:orbTreiben 16s ease-in-out infinite alternate}
  .orb-b{width:460px;height:460px;background:rgba(0,224,255,.12);bottom:-160px;right:-120px;animation:orbTreiben 20s ease-in-out infinite alternate-reverse}
  @keyframes orbTreiben{from{transform:translate(0,0)}to{transform:translate(70px,50px)}}

  /* Pixel-Spur — Motiv aus dem Logo */
  .pixel{position:absolute;background:var(--verlauf);border-radius:2px;opacity:0;animation:pixelAuf 7s ease-in-out infinite}
  @keyframes pixelAuf{
    0%{opacity:0;transform:translateY(18px) scale(.6)}
    18%{opacity:.85}
    55%{opacity:.5}
    100%{opacity:0;transform:translateY(-70px) scale(1)}
  }

  /* ── Flüssiger Motion-Blur-Übergang beim allerersten Aufruf ── */
  body.lädt{overflow:hidden;height:100vh}
  #seite{
    filter:blur(18px);opacity:0;transform:scale(1.035);
    transition:filter 1s cubic-bezier(.16,1,.3,1), opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
  }
  body.blur-weg #seite{filter:blur(0);opacity:1;transform:none}

  /* ── Schneller kinematischer Fade bei jeder weiteren Seite (kein Vorhang-Repeat) ── */
  body.schnell #seite{
    filter:none;opacity:0;transform:translateY(16px);
    transition:opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1);
  }
  body.schnell.blur-weg #seite{opacity:1;transform:none}

  /* ── Kinematischer Ausblick beim Verlassen der Seite ── */
  body.seite-verlassen #seite{
    opacity:0!important;transform:translateY(-14px)!important;
    transition:opacity .22s ease, transform .22s ease!important;
  }
  #ladelogo{
    position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
    background:var(--bg);transition:opacity .7s ease, filter .7s ease;
  }
  #ladelogo img{width:min(220px,50vw);height:auto;animation:vPuls 1.4s ease-in-out infinite;filter:drop-shadow(0 0 26px rgba(0,224,255,.4))}
  #ladelogo.weg{opacity:0;filter:blur(14px);pointer-events:none}
  @keyframes vPuls{0%,100%{filter:drop-shadow(0 0 20px rgba(0,224,255,.3))}50%{filter:drop-shadow(0 0 52px rgba(0,224,255,.6))}}
  /* Fühlbares Tipp-Feedback auf Touch-Geräten */
  @media (hover:none){
    .kzeile:active,.speichern:active,.weiter:active,.cta-voll:active,.cta-rand:active,.mobil-leiste a:active{transform:scale(.97)}
  }

  /* ═══════════ MODAL · DIGITALE VISITENKARTE ═══════════ */
  #intro{
    position:fixed;inset:0;z-index:60;
    display:none;flex-direction:column;align-items:center;justify-content:center;
    gap:24px;
    padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
    background:rgba(2,4,15,.72);backdrop-filter:blur(8px);
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  #intro.sichtbar{display:flex;animation:modalRein .28s ease}
  @keyframes modalRein{from{opacity:0}to{opacity:1}}
  body.modal-offen{overflow:hidden}
  .modal-schliessen{
    position:fixed;top:max(18px, env(safe-area-inset-top));right:18px;z-index:3;
    width:42px;height:42px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:rgba(255,255,255,.06);border:1px solid rgba(0,224,255,.3);
    color:var(--text);transition:background .15s, border-color .15s, transform .12s;
  }
  .modal-schliessen:hover{background:rgba(0,224,255,.12);border-color:var(--cyan);transform:rotate(90deg)}

  .intro-logo{width:min(290px,62vw);height:auto;flex-shrink:0;filter:drop-shadow(0 0 30px rgba(0,224,255,.28))}
  /* Bei wenig Höhe: oben ausrichten, damit nichts abgeschnitten wird */
  @media (max-height:760px){
    #intro{justify-content:flex-start;gap:18px}
    .intro-logo{width:min(210px,52vw)}
  }

  .karten-buehne{perspective:1300px;position:relative;z-index:2}
  .vcard{
    width:min(430px,92vw);
    border-radius:24px;
    padding:28px 28px 24px;
    background:
      radial-gradient(130% 100% at 90% -10%, rgba(0,224,255,.14), transparent 55%),
      linear-gradient(155deg, #0E1B33 0%, #0A1426 55%, #071021 100%);
    border:1px solid rgba(0,224,255,.22);
    box-shadow:0 34px 90px rgba(0,0,0,.65), var(--glow), inset 0 1px 0 rgba(255,255,255,.08);
    transform-style:preserve-3d;
    transition:transform .15s ease-out;
    position:relative;overflow:hidden;
  }
  /* Glanzpunkt folgt der Maus */
  .vcard .shine{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(0,224,255,.13), transparent 60%);
  }
  .vcard-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .vcard-kopf .mini-logo{height:30px;width:auto}
  .nfc{opacity:.9;filter:drop-shadow(0 0 8px rgba(0,224,255,.6))}
  .vcard h1{font-family:var(--display);font-weight:700;font-size:clamp(26px,6vw,31px);line-height:1.15;letter-spacing:-.01em;color:#fff}
  .vcard .rolle{color:var(--muted);font-size:15px;margin:6px 0 20px}
  .vcard .rolle b{font-weight:700;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}

  .kontakt-zeilen{display:grid;gap:10px}
  .kzeile{
    display:flex;align-items:center;gap:14px;text-decoration:none;
    background:rgba(255,255,255,.035);border:1px solid rgba(0,224,255,.14);
    border-radius:14px;padding:12px 15px;
    transition:background .15s, border-color .15s, transform .12s, box-shadow .15s;
  }
  .kzeile:hover{background:rgba(0,224,255,.08);border-color:rgba(0,224,255,.55);transform:translateX(3px);box-shadow:0 0 24px rgba(0,224,255,.12)}
  .kzeile .icon{
    width:40px;height:40px;border-radius:11px;flex-shrink:0;
    display:grid;place-items:center;
    background:var(--verlauf);color:#04101F;
    box-shadow:0 0 16px rgba(0,224,255,.4);
  }
  .kzeile .txt{flex:1;min-width:0}
  .kzeile .txt small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .kzeile .txt span{color:#fff;font-weight:700;font-size:15.5px}

  .speichern{
    margin-top:14px;width:100%;
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--display);font-weight:700;font-size:16px;
    color:#04101F;background:var(--verlauf);
    border:none;cursor:pointer;border-radius:14px;padding:15px 20px;
    box-shadow:0 0 30px rgba(0,224,255,.35), 0 10px 30px rgba(0,0,0,.4);
    transition:transform .12s, box-shadow .15s, filter .15s;
  }
  .speichern:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(0,224,255,.5), 0 14px 34px rgba(0,0,0,.45);filter:brightness(1.05)}
  .speichern:active{transform:translateY(1px)}

  .vcard-fuss{
    margin-top:18px;padding-top:14px;border-top:1px dashed rgba(0,224,255,.2);
    display:flex;justify-content:space-between;align-items:center;
    font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--muted);
  }

  .weiter{
    position:relative;z-index:2;
    display:inline-flex;align-items:center;gap:12px;
    font-family:var(--display);font-weight:600;font-size:15.5px;
    color:var(--text);background:rgba(255,255,255,.04);
    border:1px solid rgba(0,224,255,.35);cursor:pointer;border-radius:99px;
    padding:14px 28px;
    transition:transform .12s, box-shadow .15s, border-color .15s, background .15s;
  }
  .weiter:hover{transform:translateY(-2px);border-color:var(--cyan);background:rgba(0,224,255,.08);box-shadow:0 0 34px rgba(0,224,255,.25)}
  .weiter .pfeil{transition:transform .15s}

  /* ══════════════ PREMIUM-ERLEBNIS ══════════════ */
  #erlebnis{position:fixed;inset:0;z-index:95;display:none;background:var(--bg);
    --e1: 46,139,255; --e2: 0,224,255; --e3: 46,139,255;
  }
  #erlebnis.sichtbar{display:block;animation:erlRein .5s cubic-bezier(.16,1,.3,1)}
  @keyframes erlRein{from{opacity:0;transform:scale(1.02);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
  .erl-gitter{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:linear-gradient(rgba(0,224,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,224,255,.045) 1px, transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse 85% 65% at 50% 15%, black, transparent 78%);
    -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 15%, black, transparent 78%);
  }
  .erl-staub{position:fixed;z-index:0;border-radius:2px;pointer-events:none;opacity:0;animation:pixelAuf 7.5s ease-in-out infinite}
  .erl-scroll{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
  .erl-fortschritt{position:fixed;top:0;left:0;height:3px;width:0%;z-index:6;background:var(--verlauf);box-shadow:0 0 12px rgba(0,224,255,.6);transition:width .08s linear}
  .erl-schliessen{position:fixed;top:max(18px, env(safe-area-inset-top));right:18px;z-index:6}
  .erl-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;will-change:transform}

  .erl-inhalt{display:none}
  .erl-inhalt.aktiv{display:block}

  .erl-szene{
    position:relative;z-index:1;min-height:100vh;min-height:100dvh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:100px 24px;
  }
  .erl-marke{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;
    font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);
  }
  .erl-marke::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
  .erl-szene h2{font-family:var(--display);font-weight:800;color:#fff;font-size:clamp(32px,6.4vw,66px);line-height:1.05;max-width:16ch;letter-spacing:-.02em}
  .erl-szene h2 .glanz{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
  .erl-szene .erl-sub{margin-top:20px;max-width:52ch;color:var(--muted);font-size:18px}
  .erl-szene .erl-sub b{color:var(--text);font-weight:600}

  .erl-fade{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
  .erl-fade.in{opacity:1;transform:none}
  .erl-fade.erl-d1{transition-delay:.08s} .erl-fade.erl-d2{transition-delay:.16s}
  .erl-fade.erl-d3{transition-delay:.24s} .erl-fade.erl-d4{transition-delay:.32s}

  .erl-featureliste{display:grid;gap:16px;max-width:560px;margin-top:44px;text-align:left;width:100%}
  .erl-feature{
    display:flex;gap:16px;align-items:flex-start;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:16px;padding:20px 22px;
  }
  .erl-feature .erl-fi{
    width:38px;height:38px;border-radius:11px;flex-shrink:0;
    display:grid;place-items:center;background:var(--verlauf);color:#04101F;
    box-shadow:0 0 16px rgba(0,224,255,.35);
  }
  .erl-feature b{display:block;color:#fff;font-family:var(--display);font-weight:700;font-size:16.5px;margin-bottom:4px}
  .erl-feature span{color:var(--muted);font-size:15px}

  /* ── Google Review Cards: Mockups ── */
  /* ── Praxisbeispiele (Review Cards / ERP / Automatisierungen) ── */
  .erl-beispiele{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:760px;margin-top:46px;width:100%}
  .erl-beispiel{
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:16px;padding:24px 20px;text-align:left;
    transition:border-color .2s, transform .15s;
  }
  .erl-beispiel:hover{border-color:rgba(0,224,255,.45);transform:translateY(-3px)}
  .erl-beispiel .eb-branche{
    display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--cyan);background:rgba(0,224,255,.08);border:1px solid rgba(0,224,255,.25);
    padding:4px 10px;border-radius:99px;margin-bottom:14px;
  }
  .erl-beispiel h5{font-family:var(--display);font-weight:700;font-size:16.5px;color:#fff;margin-bottom:8px}
  .erl-beispiel p{color:var(--muted);font-size:14.5px}
  @media (max-width:720px){.erl-beispiele{grid-template-columns:1fr}}

  .erl-kartenmock.foto .mock-foto-rahmen{
    width:180px;display:flex;align-items:center;justify-content:center;
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(0,224,255,.1));
    transition:filter .3s ease;
  }
  .erl-kartenmock.foto:hover .mock-foto-rahmen{filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(0,224,255,.22))}
  .erl-kartenmock.foto.aufsteller .mock-foto-rahmen{
    width:150px;background:#fff;border-radius:16px;padding:10px;
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.55)) drop-shadow(0 0 20px rgba(255,255,255,.12));
  }
  .erl-kartenmock.foto.aufsteller:hover .mock-foto-rahmen{filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,255,255,.18))}
  .erl-kartenmock.foto.aufsteller .mock-foto-rahmen img{border-radius:8px}
  .erl-kartenmock.foto .mock-foto-rahmen img{width:100%;height:auto;display:block}
  .erl-mini-hinweis{
    margin-top:18px;font-size:12.5px;color:var(--muted);max-width:52ch;
    font-style:italic;opacity:.8;
  }

  .erl-kartenreihe{display:flex;flex-wrap:wrap;gap:34px;justify-content:center;margin-top:50px;perspective:1200px}
  .erl-kartenmock{width:180px;transition:transform .3s ease}
  .erl-kartenmock:hover{transform:rotateY(8deg) rotateX(-6deg) translateY(-6px)}
  .erl-kartenmock .mock-flaeche{
    position:relative;overflow:hidden;aspect-ratio:1/1;
    background:linear-gradient(150deg,#0E1B33,#071021);
    border:1px solid rgba(0,224,255,.3);
    box-shadow:0 26px 60px rgba(0,0,0,.5), 0 0 40px rgba(0,224,255,.12);
  }
  .erl-kartenmock.rund .mock-flaeche{border-radius:50%}
  .erl-kartenmock.eckig .mock-flaeche{border-radius:20px}
  .erl-kartenmock .mock-flaeche::before{
    content:"";position:absolute;inset:-40%;
    background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
    animation:mockGlanz 3.4s ease-in-out infinite;
  }
  @keyframes mockGlanz{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
  .mock-logo{position:absolute;top:16%;left:0;right:0;text-align:center;font-family:var(--display);font-weight:700;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.06em}
  .mock-sterne{position:absolute;top:38%;left:0;right:0;text-align:center;color:var(--signal, var(--cyan));font-size:15px;letter-spacing:2px}
  .mock-nfc{
    position:absolute;top:10%;right:14%;z-index:2;color:var(--cyan);
    filter:drop-shadow(0 0 6px rgba(0,224,255,.6));
    animation:nfcPuls 2s ease-in-out infinite;
  }
  @keyframes nfcPuls{0%,100%{opacity:.55}50%{opacity:1}}
  .mock-qr{
    position:absolute;bottom:14%;left:50%;transform:translateX(-50%);
    width:44%;aspect-ratio:1/1;border-radius:8px;
    background:
      repeating-linear-gradient(90deg, rgba(0,224,255,.85) 0 3px, transparent 3px 6px),
      repeating-linear-gradient(0deg, rgba(0,224,255,.85) 0 3px, transparent 3px 6px);
    background-blend-mode:screen;opacity:.85;
  }
  .erl-kartenmock.aufsteller{width:190px}
  .erl-kartenmock.aufsteller .mock-flaeche{
    border-radius:14px;transform:rotateX(18deg);transform-origin:bottom;
    box-shadow:0 40px 50px -20px rgba(0,0,0,.6), 0 0 40px rgba(0,224,255,.12);
  }
  .erl-kartenmock.aufsteller .mock-fuss{
    width:70%;height:14px;margin:0 auto;background:linear-gradient(180deg,#0A1426,#050B1A);
    border-radius:0 0 6px 6px;box-shadow:0 10px 18px rgba(0,0,0,.5);
  }
  .erl-kartenmock .mock-label{margin-top:16px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--text)}
  .erl-kartenmock .mock-hinweis{font-size:12.5px;color:var(--muted);margin-top:2px}

  /* ── Websites: Geräte-Mockups mit wechselnden Projekten ── */
  .erl-geraete{display:flex;align-items:flex-end;justify-content:center;gap:26px;margin-top:52px;flex-wrap:wrap}
  .erl-geraet{position:relative;transition:opacity .5s ease}
  .geraet-desktop{width:min(460px,80vw)}
  .geraet-desktop .geraet-rahmen{
    background:#0A1426;border-radius:14px 14px 0 0;padding:14px 14px 0;
    border:1px solid rgba(0,224,255,.25);box-shadow:0 30px 70px rgba(0,0,0,.5);
  }
  .geraet-desktop .geraet-fuss{width:26%;height:16px;margin:0 auto;background:#0A1426;border-radius:0 0 6px 6px}
  .geraet-desktop .geraet-stand{width:44%;height:8px;margin:0 auto;background:#0A1426;border-radius:0 0 10px 10px;box-shadow:0 8px 20px rgba(0,0,0,.4)}
  .geraet-tablet{width:150px;align-self:center}
  .geraet-tablet .geraet-rahmen{
    background:#0A1426;border-radius:16px;padding:10px;border:1px solid rgba(0,224,255,.25);
    box-shadow:0 24px 50px rgba(0,0,0,.5);
  }
  .geraet-phone{width:96px}
  .geraet-phone .geraet-rahmen{
    background:#0A1426;border-radius:22px;padding:7px;border:1px solid rgba(0,224,255,.25);
    box-shadow:0 20px 44px rgba(0,0,0,.5);
  }
  .geraet-bildschirm{position:relative;overflow:hidden;border-radius:4px;background:#050B1A;aspect-ratio:16/10}
  .geraet-tablet .geraet-bildschirm,.geraet-phone .geraet-bildschirm{aspect-ratio:9/16;border-radius:12px}
  .site-projekt{position:absolute;inset:0;opacity:0;transition:opacity .6s ease, transform .6s ease;transform:translateY(8px);
    --akzent: 190 100% 50%;
  }
  .site-projekt[data-akzent="1"]{--akzent: 336 82% 62%}
  .site-projekt[data-akzent="2"]{--akzent: 32 92% 56%}
  .site-projekt[data-akzent="3"]{--akzent: 142 60% 48%}
  .site-projekt.aktiv{opacity:1;transform:none}

  .site-nav{height:15%;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav-klein{height:11%;display:flex;align-items:center;padding:0 8%;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08)}
  .site-wortmarke{font-family:var(--display);font-weight:700;font-size:11px;color:#fff;letter-spacing:.01em;white-space:nowrap}
  .geraet-phone .site-wortmarke,.geraet-tablet .site-wortmarke{font-size:9px}
  .site-navlinks{display:flex;gap:10px}
  .site-navlinks i{width:20px;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}

  .site-hero{position:relative;height:52%;margin:6% 8% 0;border-radius:6px;overflow:hidden;
    background:linear-gradient(135deg, hsl(var(--akzent) / .30), hsl(var(--akzent) / .08));
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:8%;
  }
  .site-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);animation:mockGlanz 4s ease-in-out infinite}
  .site-headline{position:relative;z-index:1;font-family:var(--display);font-weight:700;color:#fff;font-size:12px;line-height:1.25}
  .geraet-tablet .site-headline{font-size:10px}
  .geraet-phone .site-headline{font-size:11px}
  .site-cta{
    position:relative;z-index:1;display:inline-block;font-family:var(--display);font-weight:600;font-size:8px;
    color:#04101F;background:hsl(var(--akzent) / 1);padding:5px 11px;border-radius:99px;
  }
  .site-hero--mobil{height:64%;margin-top:14%}
  .site-kacheln{display:flex;gap:6%;margin:6% 8% 0}
  .site-kacheln i{flex:1;aspect-ratio:1/1;border-radius:5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}

  .site-branche{
    position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--cyan);background:rgba(0,224,255,.1);border:1px solid rgba(0,224,255,.3);
    padding:4px 10px;border-radius:99px;white-space:nowrap;
  }
  .erl-branchen-nav{display:flex;gap:8px;justify-content:center;margin-top:26px;flex-wrap:wrap}
  .erl-branchen-nav button{
    font-family:var(--display);font-weight:600;font-size:13px;color:var(--muted);
    background:rgba(255,255,255,.04);border:1px solid rgba(0,224,255,.18);border-radius:99px;
    padding:8px 16px;cursor:pointer;transition:color .15s, border-color .15s, background .15s;
  }
  .erl-branchen-nav button.aktiv{color:#04101F;background:var(--verlauf);border-color:transparent}

  /* ── ERP: animiertes Dashboard-Mockup ── */
  .erl-dashboard{
    width:min(560px,88vw);margin-top:50px;border-radius:18px;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);padding:26px 26px 30px;text-align:left;
    box-shadow:0 30px 70px rgba(0,0,0,.4);
  }
  .erl-dash-kopf{display:flex;gap:7px;margin-bottom:20px}
  .erl-dash-kopf span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
  .erl-dash-balken{display:flex;align-items:flex-end;gap:10px;height:110px;margin-bottom:22px}
  .erl-dash-balken i{
    flex:1;border-radius:6px 6px 0 0;background:var(--verlauf);
    animation:dashWachsen 1.4s cubic-bezier(.2,.8,.2,1) forwards;transform-origin:bottom;transform:scaleY(0);
  }
  @keyframes dashWachsen{to{transform:scaleY(1)}}
  .erl-dash-zeile{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06)}
  .erl-dash-zeile .punkt{width:8px;height:8px;border-radius:50%;background:#3ADB6B;flex-shrink:0}
  .erl-dash-zeile .balk{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
  .erl-kennzahlen-reihe{display:flex;gap:16px;margin-top:24px;width:min(560px,88vw);flex-wrap:wrap;justify-content:center}
  .erl-kz-kachel{
    flex:1;min-width:140px;text-align:center;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:14px;padding:18px 14px;
  }

  /* ── Automatisierungen: Flow-Diagramm ── */
  .erl-flow{display:flex;align-items:center;justify-content:center;gap:0;margin-top:56px;flex-wrap:wrap;max-width:640px}
  .erl-knoten{
    display:flex;flex-direction:column;align-items:center;gap:12px;width:130px;
  }
  .erl-knoten .kreis{
    width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));border:1.5px solid rgba(0,224,255,.35);
    color:var(--cyan);box-shadow:0 0 24px rgba(0,224,255,.18);
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .erl-knoten span{font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text)}
  .erl-knoten-info{display:contents}
  .erl-knoten--hub .kreis--hub{background:var(--verlauf);border-color:transparent;color:#04101F;box-shadow:0 0 30px rgba(0,224,255,.4)}
  .erl-kennzahl{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:var(--cyan);margin-top:6px}
  .erl-kennzahl-label{display:block;font-family:var(--body);font-weight:400;font-size:11.5px;color:var(--muted);margin-top:2px}
  .erl-live-chip{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted);
    border:1px solid rgba(0,224,255,.18);border-radius:99px;padding:4px 10px;
    opacity:.4;transition:opacity .3s ease, border-color .3s ease, color .3s ease;
  }
  .erl-live-chip i{width:6px;height:6px;border-radius:50%;background:var(--muted);transition:background .3s ease}
  .erl-knoten[data-live].erl-live-aktiv .erl-live-chip{opacity:1;color:var(--cyan);border-color:rgba(0,224,255,.4)}
  .erl-knoten[data-live].erl-live-aktiv .erl-live-chip i{background:var(--cyan);box-shadow:0 0 8px var(--cyan);animation:puls 1s ease-in-out infinite}
  .erl-knoten[data-live].erl-live-aktiv .kreis{border-color:var(--cyan);box-shadow:0 0 22px rgba(0,224,255,.3)}
  .erl-linie{flex:1;min-width:40px;height:2px;position:relative;background:rgba(0,224,255,.15);margin:0 -4px 26px}
  .erl-linie::after{
    content:"";position:absolute;inset:0;
    background:repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 16px);
    animation:flowLaufen 1s linear infinite;
  }
  @keyframes flowLaufen{from{background-position:0 0}to{background-position:16px 0}}

  .erl-cta-reihe{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}

  @media (max-width:720px){
    /* Szenen: nicht mehr starr auf volle Bildschirmhöhe zwingen — Inhalt bestimmt die Höhe, das scrollt sich flüssiger */
    .erl-szene{min-height:0;padding:56px 20px;justify-content:flex-start}
    .erl-szene:first-child{padding-top:88px;min-height:88vh;min-height:88dvh;justify-content:center}
    .erl-marke{margin-bottom:16px}
    .erl-szene .erl-sub{font-size:16px;margin-top:14px}
    .erl-featureliste{margin-top:30px;gap:12px}
    .erl-feature{padding:16px 17px}

    /* Hintergrund-Effekte auf dem Handy zurücknehmen — ruhiger und flüssiger */
    .erl-orb{filter:blur(70px)}
    .erl-staub{display:none}

    /* Review Cards */
    .erl-kartenreihe{gap:20px;margin-top:34px}
    .erl-kartenmock.foto .mock-foto-rahmen{width:112px}
    .erl-kartenmock.foto.aufsteller .mock-foto-rahmen{width:98px}
    .erl-mini-hinweis{margin-top:14px}
    .erl-beispiele{margin-top:30px}

    /* Websites: nur das Smartphone groß zeigen, Desktop/Tablet raus — auf dem Handy wirkt 1 großes Gerät ruhiger als 3 kleine */
    .erl-geraete{margin-top:32px;gap:0}
    .geraet-desktop,.geraet-tablet{display:none}
    .geraet-phone{width:58vw;max-width:220px}
    .geraet-phone .site-headline{font-size:15px}
    .site-cta{font-size:10px;padding:7px 14px}
    .geraet-phone .site-wortmarke{font-size:12px}
    .erl-branchen-nav{margin-top:22px;gap:6px}
    .erl-branchen-nav button{font-size:12px;padding:7px 13px}

    /* ERP */
    .erl-dashboard{margin-top:32px;padding:20px 18px 24px}
    .erl-dash-balken{height:80px}
    .erl-kennzahlen-reihe{margin-top:18px;gap:10px}
    .erl-kz-kachel{min-width:0;padding:14px 8px}
    .erl-kennzahl{font-size:19px}
    .erl-kennzahl-label{font-size:10.5px}

    /* Automatisierungen: senkrechter Ablauf statt gequetschter Reihe */
    .erl-flow{flex-direction:column;gap:0;margin-top:36px;max-width:none}
    .erl-knoten{width:auto;flex-direction:row;gap:16px;text-align:left;padding:4px 0}
    .erl-knoten .kreis{width:52px;height:52px;flex-shrink:0}
    .erl-knoten-info{display:flex;flex-direction:column;gap:2px;justify-content:center}
    .erl-linie{width:2px;height:34px;min-width:0;flex:none;margin:0 0 0 25px;background:rgba(0,224,255,.15)}
    .erl-linie::after{background:repeating-linear-gradient(180deg, var(--cyan) 0 8px, transparent 8px 16px);animation:flowLaufenVertikal 1s linear infinite}
    .erl-live-chip{margin-top:6px}

    /* CTAs im Erlebnis: volle Breite, leichter zu treffen */
    .erl-cta-reihe{margin-top:30px;width:100%}
    .erl-cta-reihe .cta-voll{width:100%;justify-content:center}
    .erl-szene:last-child{padding-bottom:72px}
  }
  @keyframes flowLaufenVertikal{from{background-position:0 0}to{background-position:0 16px}}

  /* ── Erfolgs-Popup nach dem Absenden ── */
  #afErfolg{
    position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
    padding:20px;background:rgba(2,4,15,.75);backdrop-filter:blur(8px);
    overflow-y:auto;
  }
  #afErfolg.sichtbar{display:flex;animation:modalRein .3s ease}
  .af-erfolg-karte{
    position:relative;width:min(420px,100%);text-align:center;
    background:
      radial-gradient(120% 120% at 50% -10%, rgba(0,224,255,.16), transparent 55%),
      linear-gradient(165deg, #0E1B33, #071021);
    border:1px solid rgba(0,224,255,.28);border-radius:24px;
    padding:44px 30px 34px;
    box-shadow:0 34px 90px rgba(0,0,0,.6), var(--glow);
    animation:afKarteRein .45s cubic-bezier(.25,1.1,.4,1);
    overflow:hidden;
  }
  @keyframes afKarteRein{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
  .af-haken-ring{
    width:74px;height:74px;margin:0 auto 20px;border-radius:50%;
    display:grid;place-items:center;
    background:radial-gradient(circle, rgba(0,224,255,.16), transparent 70%);
  }
  .af-haken-kreis{stroke:var(--cyan);stroke-width:2.5;stroke-dasharray:145;stroke-dashoffset:145;animation:afKreisZeichnen .5s ease-out forwards}
  .af-haken-pfad{stroke:var(--cyan);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:afHakenZeichnen .35s .45s ease-out forwards;filter:drop-shadow(0 0 8px rgba(0,224,255,.6))}
  @keyframes afKreisZeichnen{to{stroke-dashoffset:0}}
  @keyframes afHakenZeichnen{to{stroke-dashoffset:0}}
  .af-erfolg-karte h3{font-family:var(--display);font-weight:800;font-size:28px;color:#fff;margin-bottom:12px}
  .af-erfolg-karte p{color:var(--muted);font-size:15.5px;max-width:34ch;margin:0 auto}
  .af-erfolg-klein{margin-top:20px!important;font-size:13px!important}
  .af-erfolg-ctas{display:flex;gap:10px;justify-content:center;margin-top:14px}
  .af-erfolg-ctas .cta-voll,.af-erfolg-ctas .cta-rand{padding:11px 20px;font-size:14.5px}
  .af-erfolg-fertig{
    margin-top:24px;font-family:var(--display);font-weight:600;font-size:14px;
    color:var(--muted);background:none;border:none;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;
    transition:color .15s;
  }
  .af-erfolg-fertig:hover{color:var(--text)}
  /* Konfetti-Pixel aus dem Logo-Motiv */
  .af-konfetti{position:absolute;border-radius:2px;background:var(--verlauf);opacity:0;pointer-events:none;animation:afKonfettiFall 1.1s ease-in forwards}
  @keyframes afKonfettiFall{
    0%{opacity:1;transform:translateY(-20px) rotate(0deg)}
    100%{opacity:0;transform:translateY(240px) rotate(340deg)}
  }

  /* ═══════════ HAUPTSEITE ═══════════ */
  #seite{position:relative;z-index:1}

  .kopfleiste{
    position:sticky;top:0;z-index:20;
    background:rgba(2,4,15,.75);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--linie);
  }
  .kopfleiste .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
  .kopf-marke{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;gap:10px;text-decoration:none}
  .kopf-nav{display:flex;align-items:center;gap:22px}
  .kopf-nav a{
    font-family:var(--display);font-weight:600;font-size:14px;text-decoration:none;
    color:var(--muted);position:relative;padding:6px 0;transition:color .15s;white-space:nowrap;
  }
  .kopf-nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
    background:var(--verlauf);transform:scaleX(0);transition:transform .2s ease;transform-origin:left;
  }
  .kopf-nav a:hover{color:var(--text)}
  .kopf-nav a.aktiv{color:#fff}
  .kopf-nav a.aktiv::after{transform:scaleX(1)}
  .kopfleiste .wrap{flex-wrap:wrap;row-gap:10px}
  @media (max-width:640px){
    .kopf-rechts{gap:8px}
    .kopf-nav{
      order:3;width:100%;margin-top:2px;
      display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
      -webkit-overflow-scrolling:touch;padding:2px 2px 4px;
    }
    .kopf-nav::-webkit-scrollbar{display:none}
    .kopf-nav a{
      flex-shrink:0;font-size:13px;padding:7px 14px;border-radius:99px;
      background:rgba(255,255,255,.04);border:1px solid var(--linie);
    }
    .kopf-nav a::after{display:none}
    .kopf-nav a.aktiv{background:var(--verlauf);color:#04101F;border-color:transparent;font-weight:700}
  }
  .kopf-marke img{height:32px;width:auto}
  .kopf-marke .wortzug{font-family:var(--display);font-weight:600;font-size:15px;color:#fff;letter-spacing:.01em}
  .kopf-marke .wortzug b{font-weight:600;color:var(--cyan)}

  /* Mobile Aktionsleiste — Anrufen & WhatsApp immer griffbereit */
  .mobil-leiste{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(2,4,15,.85);backdrop-filter:blur(14px);
    border-top:1px solid var(--linie);
    gap:10px;
  }
  .mobil-leiste a{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;
    min-height:48px;border-radius:14px;
  }
  .mobil-leiste .ml-tel{background:var(--verlauf);color:#04101F;box-shadow:0 0 20px rgba(0,224,255,.3)}
  .mobil-leiste .ml-wa{border:1px solid rgba(0,224,255,.4);color:var(--text)}
  @media (max-width:720px){
    .mobil-leiste{display:flex}
  }
  .kopf-rechts{display:flex;align-items:center;gap:10px}
  .kopf-vk{
    display:inline-flex;align-items:center;gap:8px;cursor:pointer;
    font-family:var(--display);font-weight:600;font-size:14px;
    color:var(--text);background:rgba(0,224,255,.05);
    border:1px solid rgba(0,224,255,.35);border-radius:99px;
    padding:9px 16px;min-height:38px;
    transition:transform .12s, border-color .15s, box-shadow .15s;
  }
  .kopf-vk:hover{transform:translateY(-1px);border-color:var(--cyan);box-shadow:0 0 22px rgba(0,224,255,.2)}
  .kopf-cta{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);font-weight:600;font-size:14.5px;text-decoration:none;
    color:#04101F;background:var(--verlauf);
    padding:9px 18px;border-radius:99px;
    box-shadow:0 0 22px rgba(0,224,255,.3);
    transition:transform .12s, box-shadow .15s;
  }
  .kopf-cta:hover{transform:translateY(-1px);box-shadow:0 0 34px rgba(0,224,255,.45)}

  /* ── Kinematischer Video-Hero (nur Startseite) ── */
  .cine-hero{
    position:relative;height:92vh;height:92dvh;min-height:560px;
    display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .cine-video-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 90% 70% at 50% 30%, #0E1B33, var(--bg));overflow:hidden}
  .cine-video-bg::before{
    content:"";position:absolute;inset:-20%;z-index:0;
    background:
      radial-gradient(circle at 20% 30%, rgba(0,224,255,.18), transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(46,139,255,.16), transparent 45%),
      radial-gradient(circle at 50% 100%, rgba(139,92,246,.1), transparent 50%);
    animation:cineFeld 22s ease-in-out infinite alternate;
  }
  @keyframes cineFeld{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(-3%,2%) scale(1.08)}
    100%{transform:translate(2%,-3%) scale(1.03)}
  }
  .cine-video-bg canvas{position:relative;z-index:1;width:100%;height:100%;display:block;opacity:.6}

  .cine-icons{position:absolute;inset:0;z-index:1;pointer-events:none}
  .cine-icon{
    position:absolute;color:var(--cyan);opacity:0;
    animation:cineIconSchweben ease-in-out infinite;
    filter:drop-shadow(0 0 10px rgba(0,224,255,.25));
  }
  @keyframes cineIconSchweben{
    0%{opacity:0;transform:translateY(18px) rotate(-4deg)}
    12%{opacity:.22}
    50%{opacity:.32;transform:translateY(-16px) rotate(3deg)}
    88%{opacity:.2}
    100%{opacity:0;transform:translateY(18px) rotate(-4deg)}
  }
  @media (max-width:720px){.cine-icon{transform:scale(.8)}}
  .cine-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg, rgba(2,4,15,.5) 0%, rgba(2,4,15,.35) 40%, rgba(2,4,15,.85) 100%),
      radial-gradient(ellipse 70% 60% at 50% 40%, transparent, rgba(2,4,15,.6));
  }
  .cine-inhalt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
  .cine-logo{width:min(420px,72vw);height:auto;filter:drop-shadow(0 0 44px rgba(0,224,255,.3));animation:cineLogoRein 1.1s cubic-bezier(.16,1,.3,1) both}
  @keyframes cineLogoRein{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
  .cine-hero .slogan{animation:cineFadeRein .9s ease both .25s}
  .cine-sub{max-width:52ch;color:var(--muted);font-size:18px;animation:cineFadeRein .9s ease both .4s}
  .cine-hero .hero-ctas{animation:cineFadeRein .9s ease both .55s}
  .cine-schnellzugriff{
    position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:18px;
    font-family:var(--display);font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;
    animation:cineFadeRein .9s ease both .68s;transition:color .15s, gap .2s;
  }
  .cine-schnellzugriff:hover{color:var(--cyan);gap:10px}
  @keyframes cineFadeRein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .cine-scroll-hinweis{
    position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:1;
    color:var(--cyan);opacity:.7;animation:cineScrollHinweis 2s ease-in-out infinite;
  }
  @keyframes cineScrollHinweis{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
  @media (max-width:640px){
    .cine-hero{height:86vh;height:86dvh}
    .cine-logo{width:min(300px,78vw)}
    .cine-sub{font-size:16px}
  }

  .hero{padding:90px 0 56px;position:relative}
  .hero .slogan{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--cyan);border:1px solid rgba(0,224,255,.3);border-radius:99px;
    padding:7px 16px;margin-bottom:26px;
    background:rgba(0,224,255,.05);
  }
  .hero .slogan::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:puls 2.2s ease-in-out infinite}
  @keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
  .hero h2{
    font-family:var(--display);font-weight:800;
    font-size:clamp(38px,6.6vw,68px);line-height:1.06;letter-spacing:-.02em;
    max-width:17ch;color:#fff;
  }
  .hero h2 .glanz{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(0,224,255,.35))}
  .hero p{margin-top:24px;max-width:56ch;font-size:19px;color:var(--muted)}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

  .band{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);overflow:hidden;padding:14px 0;margin:44px 0 0;background:rgba(0,224,255,.03)}
  .band-spur{display:flex;width:max-content;animation:laufen 28s linear infinite}
  .band span{font-family:var(--mono);font-size:13.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding:0 20px;color:var(--muted)}
  .band .punkt{color:var(--cyan)}
  @keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  section{padding:76px 0;position:relative}
  .sek-tag{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
  h3.sek-titel{font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.12;margin-bottom:12px;color:#fff}
  .sek-intro{color:var(--muted);max-width:58ch;margin-bottom:44px}

  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .zelle{
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:var(--radius);
    padding:30px 28px;position:relative;overflow:hidden;
    transition:transform .18s, box-shadow .2s, border-color .2s;
  }
  .zelle::before{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(360px circle at var(--mx,50%) var(--my,20%), rgba(0,224,255,.1), transparent 65%);
    transition:opacity .2s;
  }
  .zelle:hover{transform:translateY(-4px);border-color:rgba(0,224,255,.5);box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 30px rgba(0,224,255,.1)}
  .zelle:hover::before{opacity:1}
  .erlebnis-trigger{cursor:pointer}
  .erlebnis-trigger:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  .z-entdecken{
    display:inline-flex;align-items:center;gap:6px;margin-top:16px;
    font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--cyan);
    opacity:.75;transition:opacity .2s, gap .2s;
  }
  .z-entdecken svg{transition:transform .2s}
  .erlebnis-trigger:hover .z-entdecken{opacity:1;gap:9px}
  .erlebnis-trigger:hover .z-entdecken svg{transform:translateX(2px)}

  .icon-liste{list-style:none;display:grid;gap:9px;margin-top:16px}
  .icon-liste li{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}
  .icon-liste li svg{flex-shrink:0;color:var(--cyan)}
  .z-preise{
    position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;margin-top:18px;
    font-family:var(--display);font-weight:700;font-size:13.5px;color:#04101F;
    background:var(--verlauf);padding:9px 15px;border-radius:99px;text-decoration:none;
    transition:transform .15s, box-shadow .15s;
  }
  .z-preise:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(0,224,255,.3)}
  .z-gross{grid-column:span 4}
  .z-klein{grid-column:span 2}
  .z-halb{grid-column:span 3}
  .zelle .z-tag{
    font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--cyan);border:1px solid rgba(0,224,255,.3);background:rgba(0,224,255,.06);
    display:inline-block;padding:4px 11px;border-radius:99px;margin-bottom:18px;margin-right:8px;
  }
  .z-preis-badge{
    font-family:var(--display);font-weight:700;font-size:12px;
    color:#04101F;background:var(--verlauf);
    display:inline-block;padding:4px 12px;border-radius:99px;margin-bottom:18px;
  }
  .zelle h4{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:10px;color:#fff}
  .zelle p{color:var(--muted);font-size:16px;max-width:50ch}

  .ablauf{background:linear-gradient(180deg, transparent, rgba(0,224,255,.03) 30%, rgba(0,224,255,.03) 70%, transparent)}
  .schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s}
  .schritt{counter-increment:s;padding-right:28px;position:relative}
  .schritt + .schritt{padding-left:28px;border-left:1px dashed rgba(0,224,255,.25)}
  .schritt::before{
    content:"0" counter(s);
    font-family:var(--display);font-weight:800;font-size:46px;line-height:1;
    background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent;
    opacity:.9;display:block;margin-bottom:14px;
    filter:drop-shadow(0 0 18px rgba(0,224,255,.3));
  }
  .schritt h4{font-family:var(--display);font-weight:700;font-size:19px;margin-bottom:8px;color:#fff}
  .schritt p{color:var(--muted);font-size:16px}

  .warum-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
  .punkt-k{
    display:flex;gap:14px;align-items:flex-start;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:var(--radius);
    padding:20px 22px;
    transition:border-color .2s, transform .15s;
  }
  .punkt-k:hover{border-color:rgba(0,224,255,.45);transform:translateY(-2px)}
  .punkt-k .haken{
    width:28px;height:28px;border-radius:9px;flex-shrink:0;margin-top:2px;
    background:var(--verlauf);display:grid;place-items:center;
    box-shadow:0 0 14px rgba(0,224,255,.4);
  }
  .punkt-k b{display:block;font-weight:700;color:#fff}
  .punkt-k span{color:var(--muted);font-size:15.5px}

  /* ── Anfrage-Assistent (Frage für Frage, kein statisches Formular) ── */
  /* ── Rechtstext (Impressum, Datenschutz) ── */
  .rechtstext{
    max-width:740px;background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:22px;padding:40px 36px;
  }
  .rechtstext h4{font-family:var(--display);font-weight:700;font-size:19px;color:#fff;margin:32px 0 12px}
  .rechtstext h4:first-child{margin-top:0}
  .rechtstext p{color:var(--muted);font-size:15px;line-height:1.75;margin-bottom:14px}
  .rechtstext p b{color:var(--text);font-weight:600}
  .rechtstext p i{color:var(--text);font-style:normal;font-weight:600}
  .rechtstext a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
  .rechtstext ul{list-style:none;display:grid;gap:6px;margin:0 0 14px;padding:0}
  .rechtstext ul li{position:relative;padding-left:18px;color:var(--muted);font-size:15px}
  .rechtstext ul li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}
  .rechts-hinweis{
    display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--cyan);border:1px solid rgba(0,224,255,.3);background:rgba(0,224,255,.06);
    padding:5px 13px;border-radius:99px;margin-bottom:22px;
  }
  .rechts-fussnote{
    margin-top:24px;padding-top:20px;border-top:1px solid var(--linie);
    font-size:13px;font-style:italic;color:var(--muted);opacity:.85;
  }
  @media (max-width:720px){
    .rechtstext{padding:28px 22px;border-radius:18px}
    .rechtstext h4{font-size:17px;margin-top:26px}
    .rechtstext p,.rechtstext ul li{font-size:14.5px}
  }

  .assistent{
    position:relative;overflow:hidden;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:26px;
    padding:38px 40px 34px;
  }
  .assist-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
  .unverbindlich-hinweis{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;
    color:var(--cyan);border:1px solid rgba(0,224,255,.3);border-radius:99px;
    padding:7px 15px;background:rgba(0,224,255,.05);
  }
  .unverbindlich-hinweis svg{flex-shrink:0}
  .assist-fortschritt{flex:1;min-width:180px;max-width:260px;margin-left:auto}
  .af-schritt-label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;text-align:right}
  .af-punkte{display:flex;justify-content:flex-end;gap:7px;margin-bottom:8px}
  .af-punkt{
    width:22px;height:6px;border-radius:99px;padding:0;border:none;cursor:not-allowed;
    background:rgba(255,255,255,.12);transition:background .25s, transform .15s;
  }
  .af-punkt.erreicht{cursor:pointer;background:rgba(0,224,255,.35)}
  .af-punkt.erreicht:hover{transform:scaleY(1.3)}
  .af-punkt.aktiv{background:var(--verlauf);width:30px}
  .af-balken{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
  .af-balken-fuellung{height:100%;width:25%;background:var(--verlauf);border-radius:99px;transition:width .4s cubic-bezier(.65,0,.35,1)}

  #anfrageForm{position:relative;min-height:280px}
  .af-frage{display:none;animation:afRein .38s cubic-bezier(.25,.7,.4,1)}
  .af-frage.aktiv{display:block}
  @keyframes afRein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  .af-frage h4{font-family:var(--display);font-weight:700;font-size:clamp(21px,3vw,26px);color:#fff;margin-bottom:8px}
  .af-hinweis{color:var(--muted);font-size:14.5px;margin-bottom:24px}

  .af-optionen{display:grid;gap:12px}
  .af-optionen--grid{grid-template-columns:repeat(2,1fr)}
  .af-optionen--einspaltig{grid-template-columns:1fr}
  .af-option{
    display:flex;align-items:center;gap:13px;text-align:left;
    font-family:var(--body);font-size:15.5px;color:var(--text);
    background:rgba(255,255,255,.03);border:1.5px solid rgba(0,224,255,.18);
    border-radius:14px;padding:16px 18px;cursor:pointer;
    transition:border-color .15s, background .15s, transform .1s;
  }
  .af-option:hover{border-color:rgba(0,224,255,.45);transform:translateY(-1px)}
  .af-option.gewaehlt{border-color:var(--cyan);background:rgba(0,224,255,.09)}
  .af-option--breit{grid-column:1/-1}
  .af-check{
    width:22px;height:22px;border-radius:6px;flex-shrink:0;
    border:1.5px solid rgba(0,224,255,.4);position:relative;
  }
  .af-check--rund{border-radius:50%}
  .af-option.gewaehlt .af-check{background:var(--verlauf);border-color:transparent}
  .af-option.gewaehlt .af-check::after{
    content:"";position:absolute;inset:0;
    background:center/60% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l4 4 8-9' stroke='%2304101F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .af-option.gewaehlt .af-check--rund::after{background-size:52%}

  .af-felder{display:grid;gap:20px}
  .af-feld-reihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  label{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;color:#fff;margin-bottom:8px}
  label .optional{font-family:var(--body);font-weight:400;color:var(--muted);font-size:13px}
  input[type=text],input[type=email],input[type=tel],textarea{
    width:100%;font-family:var(--body);font-size:15.5px;color:var(--text);
    background:rgba(255,255,255,.04);border:1px solid rgba(0,224,255,.18);
    border-radius:12px;padding:13px 15px;transition:border-color .15s, background .15s;
  }
  input::placeholder,textarea::placeholder{color:#5C6C7F}
  input:focus,textarea:focus{outline:none;border-color:var(--cyan);background:rgba(0,224,255,.05)}
  textarea{resize:vertical;min-height:110px}

  .af-zusammenfassung{
    margin-top:22px;padding:14px 16px;border-radius:12px;
    background:rgba(0,224,255,.05);border:1px solid rgba(0,224,255,.18);
    font-size:14px;color:var(--muted);line-height:1.6;
  }
  .af-zusammenfassung b{color:var(--text)}

  .af-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:30px}
  .af-zurueck{
    font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--muted);
    background:none;border:none;cursor:pointer;padding:10px 4px;
    transition:color .15s;
  }
  .af-zurueck:hover{color:var(--text)}
  .af-weiter{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--display);font-weight:700;font-size:15.5px;
    color:#04101F;background:var(--verlauf);
    border:none;cursor:pointer;border-radius:99px;padding:13px 24px;
    box-shadow:0 0 22px rgba(0,224,255,.3);
    transition:transform .12s, box-shadow .15s, opacity .15s;
  }
  .af-weiter:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(0,224,255,.45)}
  .af-weiter:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

  .formular-absenden{
    display:flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--display);font-weight:700;font-size:16.5px;
    color:#04101F;background:var(--verlauf);
    border:none;cursor:pointer;border-radius:14px;padding:16px 26px;
    box-shadow:0 0 30px rgba(0,224,255,.35), 0 10px 30px rgba(0,0,0,.4);
    transition:transform .12s, box-shadow .15s, filter .15s;
  }
  .formular-absenden:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(0,224,255,.5)}
  .formular-absenden:disabled{opacity:.6;cursor:wait;transform:none}
  .formular-klein{font-size:13px;color:var(--muted);text-align:center;margin-top:16px}

  .formular-status{
    display:none;margin-top:18px;padding:14px 16px;border-radius:12px;
    font-size:14.5px;line-height:1.5;
  }
  .formular-status.zeigen{display:block}
  .formular-status.erfolg{background:rgba(0,224,255,.08);border:1px solid rgba(0,224,255,.35);color:var(--text)}
  .formular-status.fehler{background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.35);color:var(--text)}
  #_honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

  @media (max-width:720px){
    .assistent{padding:28px 20px 24px}
    .assist-kopf{flex-direction:column;align-items:flex-start}
    .assist-fortschritt{max-width:none;width:100%;margin-left:0}
    .af-optionen--grid{grid-template-columns:1fr}
    .af-feld-reihe{grid-template-columns:1fr}
    .af-nav{flex-wrap:wrap}
  }

  /* ── FAQ-Akkordeon ── */
  .faq-liste{display:grid;gap:12px}
  .faq-item{
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:14px;overflow:hidden;
    transition:border-color .2s;
  }
  .faq-item:has(.faq-frage[aria-expanded="true"]){border-color:rgba(0,224,255,.4)}
  .faq-frage{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:none;border:none;cursor:pointer;text-align:left;
    padding:19px 22px;font-family:var(--display);font-weight:600;font-size:16px;color:#fff;
  }
  .faq-pfeil{flex-shrink:0;color:var(--cyan);transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .faq-frage[aria-expanded="true"] .faq-pfeil{transform:rotate(180deg)}
  .faq-antwort{max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
  .faq-antwort p{padding:0 22px 20px;color:var(--muted);font-size:15px;max-width:62ch}

  /* ── Gadget: Lese-Fortschrittsbalken ── */
  #scrollLeiste{
    position:fixed;top:0;left:0;height:3px;width:0%;z-index:80;
    background:var(--verlauf);box-shadow:0 0 12px rgba(0,224,255,.6);
    transition:width .1s linear;
  }
  /* ── Gadget: Nach-oben-Button ── */
  #hochButton{
    position:fixed;right:20px;bottom:20px;z-index:35;
    width:46px;height:46px;border-radius:50%;
    display:none;align-items:center;justify-content:center;cursor:pointer;
    background:var(--verlauf);color:#04101F;border:none;
    box-shadow:0 0 24px rgba(0,224,255,.4), 0 8px 20px rgba(0,0,0,.4);
    opacity:0;transform:translateY(10px);
    transition:opacity .25s ease, transform .25s ease;
  }
  #hochButton.zeigen{display:flex}
  #hochButton.sichtbar{opacity:1;transform:none}
  #hochButton:hover{filter:brightness(1.08)}
  @media (max-width:720px){#hochButton{bottom:calc(78px + env(safe-area-inset-bottom))}}

  /* ── Gadget: Kopier-Buttons neben Kontaktdaten ── */
  .kopier-btn{
    background:none;border:none;cursor:pointer;flex-shrink:0;
    color:var(--muted);padding:6px;border-radius:8px;
    transition:color .15s, background .15s;
  }
  .kopier-btn:hover{color:var(--cyan);background:rgba(0,224,255,.08)}
  .kopier-toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:90;
    font-family:var(--display);font-weight:600;font-size:14px;color:#04101F;
    background:var(--verlauf);padding:11px 20px;border-radius:99px;
    box-shadow:0 0 24px rgba(0,224,255,.4);
    opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
  }
  .kopier-toast.zeigen{opacity:1;transform:translate(-50%,0)}

  /* ── Gadget: Live-Erreichbarkeits-Badge ── */
  .status-badge{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:12px;color:var(--muted);
    border:1px solid rgba(0,224,255,.2);border-radius:99px;padding:6px 12px;
  }
  .status-punkt{width:7px;height:7px;border-radius:50%;background:#3ADB6B;box-shadow:0 0 8px #3ADB6B;animation:puls 2.2s ease-in-out infinite}
  .status-badge.zu .status-punkt{background:#8CA1B8;box-shadow:none;animation:none}
  @media (max-width:880px){.status-badge{display:none}}

  /* ── Preise ── */
  .preis-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:12px}
  .preis-karte{
    position:relative;background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:20px;padding:32px 26px;
    display:flex;flex-direction:column;transition:border-color .2s, transform .15s;
  }
  .preis-karte:hover{transform:translateY(-3px);border-color:rgba(0,224,255,.4)}
  .preis-karte.preis-hervorgehoben{border-color:var(--cyan);box-shadow:0 0 34px rgba(0,224,255,.15)}
  .preis-badge{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:#04101F;background:var(--verlauf);padding:5px 14px;border-radius:99px;white-space:nowrap;
  }
  .preis-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
  .preis-karte h4{font-family:var(--display);font-weight:700;font-size:22px;color:#fff;margin:10px 0 18px}
  .preis-zahl{font-family:var(--display);font-weight:800;font-size:28px;color:#fff;margin-bottom:22px}
  .preis-zahl span{font-family:var(--body);font-weight:400;font-size:14px;color:var(--muted);margin-left:4px}
  .preis-liste{list-style:none;display:grid;gap:12px;flex:1}
  .preis-liste li{display:flex;align-items:flex-start;gap:9px;font-size:14.5px;color:var(--muted)}
  .preis-liste li svg{flex-shrink:0;margin-top:3px;color:var(--cyan)}
  @media (max-width:880px){.preis-gitter{grid-template-columns:1fr}}

  /* ── Staffelpreise (Google Review Cards) ── */
  .staffel-tabelle{
    display:grid;gap:10px;max-width:600px;margin-top:36px;
  }
  .staffel-zeile{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:14px;padding:18px 24px;
    transition:border-color .2s;
  }
  .staffel-zeile.staffel-beste{border-color:rgba(0,224,255,.4)}
  .staffel-zeile .staffel-menge{font-family:var(--display);font-weight:600;font-size:16px;color:#fff}
  .staffel-zeile .staffel-menge span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:400}
  .staffel-zeile .staffel-preis{font-family:var(--display);font-weight:800;font-size:22px;color:var(--cyan)}
  .staffel-zeile .staffel-preis span{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted);margin-left:4px}

  /* ── Kombi-Pakete ── */
  .kombi-gitter{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}
  .kombi-karte{
    position:relative;overflow:hidden;
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid rgba(0,224,255,.3);border-radius:20px;padding:32px 28px;
    box-shadow:0 0 30px rgba(0,224,255,.08);
  }
  .kombi-karte .kombi-tag{
    display:inline-flex;align-items:center;gap:7px;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);
    border:1px solid rgba(0,224,255,.3);background:rgba(0,224,255,.06);padding:5px 12px;border-radius:99px;margin-bottom:16px;
  }
  .kombi-karte h4{font-family:var(--display);font-weight:700;font-size:21px;color:#fff;margin-bottom:10px}
  .kombi-karte p{color:var(--muted);font-size:14.5px;margin-bottom:18px}
  .kombi-karte .kombi-preis{font-family:var(--display);font-weight:800;font-size:26px;color:#fff;margin-bottom:20px}
  .kombi-karte .kombi-preis span{font-family:var(--body);font-weight:400;font-size:13px;color:var(--muted)}
  @media (max-width:720px){.kombi-gitter{grid-template-columns:1fr}.staffel-zeile{padding:16px 18px}}

  /* ── Paket-Hinweisleiste (Finanzierung, Wartung) ── */
  .paket-hinweise{display:grid;gap:10px;margin-top:26px}
  .paket-hinweis{
    display:flex;gap:12px;align-items:flex-start;
    background:rgba(0,224,255,.05);border:1px solid rgba(0,224,255,.18);border-radius:12px;
    padding:14px 16px;font-size:14px;color:var(--muted);
  }
  .paket-hinweis svg{flex-shrink:0;margin-top:2px;color:var(--cyan)}
  .paket-hinweis b{color:var(--text)}

  /* ── Produkt-Karten (Varianten, Loyalty-Produkte) ── */
  .produkt-gitter{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
  .produkt-karte{
    background:linear-gradient(165deg, var(--panel-2), var(--panel));
    border:1px solid var(--linie);border-radius:18px;padding:22px 22px 26px;
    text-align:center;transition:border-color .2s, transform .15s;
  }
  .produkt-karte:hover{transform:translateY(-3px);border-color:rgba(0,224,255,.4)}
  .produkt-bild{
    background:radial-gradient(circle, rgba(0,224,255,.08), transparent 70%);
    border-radius:14px;padding:14px;margin-bottom:16px;
    display:flex;align-items:center;justify-content:center;min-height:150px;
  }
  .produkt-bild img{max-width:100%;max-height:160px;height:auto;filter:drop-shadow(0 14px 26px rgba(0,0,0,.5))}
  .produkt-status{
    display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
    padding:4px 12px;border-radius:99px;margin-bottom:12px;
  }
  .status-verfuegbar{color:#04101F;background:#3ADB6B}
  .status-anfrage{color:var(--cyan);background:rgba(0,224,255,.08);border:1px solid rgba(0,224,255,.3)}
  .produkt-karte h4{font-family:var(--display);font-weight:700;font-size:19px;color:#fff;margin-bottom:8px}
  .produkt-karte p{color:var(--muted);font-size:14px}
  @media (max-width:900px){
    .produkt-gitter{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .produkt-karte{padding:18px 16px 20px}
    .produkt-bild{min-height:110px;padding:10px}
    .produkt-bild img{max-height:110px}
    .produkt-karte h4{font-size:16px}
    .produkt-karte p{font-size:12.5px}
    .produkt-status{font-size:9.5px;padding:3px 10px}
  }
  @media (max-width:600px){
    .produkt-gitter{
      display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
      gap:14px;margin:14px -18px 0;padding:4px 18px 10px;
      -webkit-overflow-scrolling:touch;scrollbar-width:none;
    }
    .produkt-gitter::-webkit-scrollbar{display:none}
    .produkt-karte{flex:0 0 76%;max-width:280px;scroll-snap-align:start;padding:20px 18px 24px}
    .produkt-bild{min-height:140px}
    .produkt-bild img{max-height:140px}
    .produkt-karte h4{font-size:18px}
    .produkt-karte p{font-size:14px}
  }

  .schluss{padding:20px 0 90px}
  .schluss-box{
    position:relative;overflow:hidden;
    background:
      radial-gradient(120% 140% at 50% -20%, rgba(0,224,255,.16), transparent 55%),
      linear-gradient(165deg, #0C1830, #071021);
    border:1px solid rgba(0,224,255,.25);
    border-radius:28px;padding:66px 30px;
    text-align:center;display:flex;flex-direction:column;align-items:center;
    box-shadow:var(--glow);
  }
  .schluss-box h3{font-family:var(--display);font-weight:800;font-size:clamp(30px,4.6vw,48px);line-height:1.08;max-width:20ch;color:#fff}
  .schluss-box h3 .glanz{background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
  .schluss-box p{color:var(--muted);margin:16px 0 32px;max-width:50ch}
  .schluss-ctas{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
  .cta-voll,.cta-rand{
    display:inline-flex;align-items:center;gap:10px;text-decoration:none;
    font-family:var(--display);font-weight:600;font-size:16px;
    padding:15px 28px;border-radius:99px;transition:transform .12s, box-shadow .15s;
  }
  .cta-voll{background:var(--verlauf);color:#04101F;box-shadow:0 0 30px rgba(0,224,255,.35)}
  .cta-voll:hover{transform:translateY(-2px);box-shadow:0 0 46px rgba(0,224,255,.5)}
  .cta-rand{border:1px solid rgba(0,224,255,.4);color:var(--text)}
  .cta-rand:hover{transform:translateY(-2px);border-color:var(--cyan);box-shadow:0 0 26px rgba(0,224,255,.2)}
  .schluss-box .klein{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:22px 0 0}

  footer{border-top:1px solid var(--linie);color:var(--muted);padding:64px 0 30px;font-size:14px;background:linear-gradient(180deg, transparent, rgba(0,224,255,.02))}
  footer a{color:var(--text);text-decoration:none;opacity:.75;transition:opacity .15s, color .15s}
  footer a:hover{color:var(--cyan);opacity:1}

  .fuss-haupt{
    display:flex;flex-wrap:wrap;justify-content:space-between;gap:48px;
    padding-bottom:40px;margin-bottom:36px;border-bottom:1px solid var(--linie);
  }
  .fuss-marke-spalte{flex:1 1 280px;max-width:340px;display:flex;flex-direction:column;gap:16px}
  .fuss-marke-link{display:flex;align-items:center;gap:10px;opacity:1}
  .fuss-marke-link .fuss-logo-gross{height:30px;width:auto;opacity:.95}
  .fuss-marke-link span{font-family:var(--display);font-weight:600;font-size:15px;color:var(--text)}
  .fuss-marke-link span b{color:var(--cyan);font-weight:600}
  .fuss-marke-link:hover span{color:var(--cyan)}
  .fuss-claim{font-size:13.5px;line-height:1.65;color:var(--muted);max-width:34ch}
  .fuss-kontakt-mini{display:flex;flex-direction:column;gap:10px}
  .fuss-kontakt-mini a{display:flex;align-items:center;gap:9px;font-size:13.5px;opacity:.85}
  .fuss-kontakt-mini a:hover{opacity:1}
  .fuss-kontakt-mini svg{flex-shrink:0;color:var(--cyan)}

  .fuss-nav-gruppe{display:flex;flex-wrap:wrap;gap:56px;flex:2 1 480px;justify-content:flex-end}
  .fuss-spalte{display:flex;flex-direction:column;gap:16px;min-width:140px}
  .fuss-spalten-titel{
    font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--cyan);opacity:.85;
  }
  .fuss-nav{display:flex;flex-direction:column;gap:12px}
  .fuss-nav a{font-size:14.5px}

  .fuss-unten{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  }
  .fuss-unten p{margin:0;font-size:13px;color:var(--muted)}
  .fuss-badge{height:32px;width:auto;border-radius:8px}

  @media (max-width:880px){
    .fuss-haupt{flex-direction:column;gap:36px}
    .fuss-marke-spalte{max-width:none}
    .fuss-nav-gruppe{justify-content:flex-start;gap:40px}
  }
  @media (max-width:560px){
    .fuss-nav-gruppe{flex-direction:column;gap:28px}
    .fuss-spalte{min-width:0}
    .fuss-unten{flex-direction:column;align-items:flex-start;gap:18px}
  }

  /* ── Gadget: schwebender WhatsApp-Button ── */
  #waFloat{
    position:fixed;left:20px;bottom:20px;z-index:35;
    width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#25D366;color:#fff;text-decoration:none;
    box-shadow:0 0 0 rgba(37,211,102,.5), 0 8px 22px rgba(0,0,0,.4);
    animation:waPuls 2.4s ease-in-out infinite;
    transition:transform .15s ease;
  }
  #waFloat:hover{transform:translateY(-3px) scale(1.05)}
  @keyframes waPuls{
    0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45), 0 8px 22px rgba(0,0,0,.4)}
    50%{box-shadow:0 0 0 10px rgba(37,211,102,0), 0 8px 22px rgba(0,0,0,.4)}
  }
  @media (max-width:720px){#waFloat{display:none}}

  .reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease, transform .65s ease}
  .reveal.in{opacity:1;transform:none}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none}}

  @media (max-width:880px){
    .bento{grid-template-columns:1fr}
    .z-gross,.z-klein,.z-halb{grid-column:span 1}
    .schritte{grid-template-columns:1fr}
    .schritt{padding-right:0}
    .schritt + .schritt{padding-left:0;border-left:none;padding-top:26px;margin-top:26px;border-top:1px dashed rgba(0,224,255,.25)}
    .warum-gitter{grid-template-columns:1fr}
    section{padding:56px 0}
    .hero{padding:60px 0 40px}
  }
  @media (max-width:720px){
    body{font-size:16px}
    .wrap{padding:0 18px}
    /* Visitenkarte */
    .vcard{padding:22px 20px 20px;border-radius:20px}
    .vcard h1{font-size:25px}
    .vcard .rolle{font-size:14.5px;margin-bottom:16px}
    .kzeile{padding:12px 13px;min-height:52px}
    .kzeile .icon{width:42px;height:42px}
    .speichern{min-height:52px;font-size:15.5px}
    .vcard-fuss{font-size:10px;letter-spacing:.08em}
    .weiter{min-height:50px;font-size:15px;padding:13px 24px}
    /* Effekte auf dem Handy zurücknehmen — spart Akku und wirkt ruhiger */
    .orb{filter:blur(80px)}
    .orb-a{width:380px;height:380px}
    .orb-b{width:320px;height:320px}
    /* Hauptseite */
    .kopf-marke .wortzug{font-size:14px}
    .kopf-cta{display:none}
    .kopf-vk{font-size:13.5px;padding:8px 14px}
    .hero{padding:44px 0 32px}
    .hero .slogan{font-size:11px;letter-spacing:.14em;padding:6px 13px;margin-bottom:20px}
    .hero h2{font-size:clamp(33px,9.4vw,44px)}
    .hero p{font-size:17px;margin-top:18px}
    .band{margin-top:32px;padding:11px 0}
    .band span{font-size:12px;letter-spacing:.14em;padding:0 14px}
    section{padding:48px 0}
    .sek-intro{margin-bottom:32px}
    .zelle{padding:24px 20px}
    .zelle h4{font-size:20px}
    .schritt::before{font-size:38px}
    .punkt-k{padding:17px 18px}
    .schluss{padding:12px 0 60px}
    .schluss-box{padding:48px 20px;border-radius:22px}
    .schluss-ctas{flex-direction:column;width:100%;max-width:340px}
    .cta-voll,.cta-rand{width:100%;justify-content:center;min-height:52px}
    /* Platz für die feste Aktionsleiste unten */
    body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

    /* Preis- & Produkt-Komponenten */
    .kombi-karte{padding:26px 22px}
    .kombi-preis{font-size:22px}
    .produkt-karte{padding:20px 18px 22px}
    .produkt-bild{min-height:120px;padding:10px}
    .produkt-bild img{max-height:120px}
    .staffel-zeile .staffel-preis{font-size:19px}
    .z-preis-badge,.zelle .z-tag{font-size:10.5px;padding:4px 10px}

    /* Footer */
    .fuss-claim{max-width:none}
    .fuss-unten{text-align:left}

    /* Hero-Schnellzugriff */
    .cine-schnellzugriff{font-size:13px}
  }