/* ---------- Schriften (liegen auf dem Webspace unter /fonts) ---------- */
  @font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
  @font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-SemiBold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
  @font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face{ font-family:"Montserrat"; src:url("../fonts/Montserrat-ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap; }

  /* ---------- Design-Tokens (helles Theme) ---------- */
  :root{
    --ink:#070043; --ink-2:#140C6E;
    --bg:#F5F5F7; --surface:#FFFFFF;
    --body:#44455A; --muted:#71728A; --border:#E6E6EC;
    --tint:rgba(7,0,67,0.06); --cream:#F1EEE4;
    --maxw:1120px;
    --sans:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--sans); color:var(--body); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(245,245,247,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
  .nav{display:flex; align-items:center; justify-content:space-between; height:72px;}
  .brand{display:flex; align-items:center; gap:12px; color:var(--ink);}
  .brand .mark{width:34px; height:34px; flex:none;}
  .brand .name{font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:0.01em; color:var(--ink);}
  .nav-links{display:flex; align-items:center; gap:30px;}
  .nav-links a{color:var(--muted); font-size:0.95rem; font-weight:500; transition:color .2s;}
  .nav-links a:hover{color:var(--ink);}
  .btn{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.95rem; line-height:1; padding:13px 22px; border-radius:10px; transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;}
  .btn-primary{background:var(--ink); color:var(--cream);}
  .btn-primary:hover{transform:translateY(-2px); background:var(--ink-2);}
  .btn-ghost{border:1px solid var(--border); color:var(--ink); background:var(--surface);}
  .btn-ghost:hover{border-color:var(--ink);}
  .nav .btn{padding:11px 18px;}

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; padding:96px 0 88px;}
  .hero::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(680px 420px at 82% 0%, rgba(7,0,67,0.06), transparent 62%), radial-gradient(560px 460px at 0% 100%, rgba(7,0,67,0.04), transparent 60%);}
  .hero .wrap{position:relative; z-index:1;}
  .hero-grid{display:grid; grid-template-columns:1.25fr 0.9fr; gap:48px; align-items:center;}
  .eyebrow{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:0.85rem; color:var(--ink); margin-bottom:22px;}
  .eyebrow .pin{width:15px; height:15px;}
  h1{font-family:var(--display); font-weight:800; font-size:clamp(2.4rem, 5.2vw, 4rem); line-height:1.06; letter-spacing:-0.01em; color:var(--ink); margin-bottom:20px;}
  .hero p.lead{font-size:1.16rem; color:var(--muted); max-width:44ch; margin-bottom:34px; font-weight:400;}
  .hero-actions{display:flex; flex-wrap:wrap; gap:14px;}
  .hero-visual{display:flex; justify-content:center; align-items:center;}
  .hero-visual .mark{width:min(320px, 74vw); height:auto; color:var(--ink);}

  /* ---------- Scroll-Fortschrittsbalken ---------- */
  .scroll-progress{position:fixed; top:0; left:0; height:3px; width:0%; background:var(--ink); z-index:60; transition:width .1s linear;}
  @media (prefers-reduced-motion:reduce){ .scroll-progress{ transition:none; } }

  /* ---------- Aktiver Menüpunkt ---------- */
  .nav-links a{position:relative; padding-bottom:4px;}
  .nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--ink); border-radius:2px; transform:scaleX(0); transition:transform .2s ease;}
  .nav-links a.active{color:var(--ink); font-weight:600;}
  .nav-links a.active::after{transform:scaleX(1);}

  /* ---------- Mobile: kompakter Button-Text ---------- */
  .btn-label-short{display:none;}
  @media (max-width:480px){
    .btn-label-full{display:none;}
    .btn-label-short{display:inline;}
    .nav .btn{padding:10px 16px; font-size:0.88rem;}
  }

  /* ---------- Kontakt: sekundäre E-Mail-Zeile ---------- */
  .contact-alt{margin-top:16px; font-size:0.92rem; color:rgba(241,238,228,0.72);}
  .contact-alt a{color:var(--cream); font-weight:600; text-decoration:underline; text-underline-offset:3px;}



  /* ---------- Sektionen ---------- */
  section{padding:84px 0;}
  .section-head{max-width:640px; margin-bottom:48px;}
  .section-head .kicker{font-family:var(--display); font-weight:700; font-size:0.9rem; color:var(--ink); opacity:.75; margin-bottom:14px;}
  h2{font-family:var(--display); font-weight:800; font-size:clamp(1.8rem, 3.4vw, 2.5rem); line-height:1.14; letter-spacing:-0.01em; color:var(--ink); margin-bottom:16px;}
  .section-head p{color:var(--muted); font-size:1.05rem;}

  /* ---------- Leistungen ---------- */
  section[id]{scroll-margin-top:92px;}
  #leistungen{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
  .cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:18px;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:28px 26px; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
  .card:hover{transform:translateY(-4px); border-color:#CFC9E6; box-shadow:0 16px 34px rgba(7,0,67,0.08);}
  .card .ic{width:46px; height:46px; border-radius:12px; background:var(--tint); display:grid; place-items:center; margin-bottom:18px;}
  .card .ic svg{width:24px; height:24px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .card h3{font-family:var(--sans); font-weight:600; font-size:1.12rem; color:var(--ink); margin-bottom:8px;}
  .card p{color:var(--muted); font-size:0.97rem;}

  /* ---------- Über ---------- */
  .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; align-items:center;}
  .about-visual{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:44px; display:grid; place-items:center; box-shadow:0 20px 44px rgba(7,0,67,0.06);}
  .about-visual .mark{width:min(230px,58vw); height:auto; color:var(--ink);}
  .about-text h2{margin-bottom:20px;}
  .about-text p{color:var(--body); font-size:1.06rem; margin-bottom:18px;}
  .about-text p strong{color:var(--ink); font-weight:600;}
  .facts{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
  .fact{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:9px 16px; font-size:0.9rem; font-weight:500; color:var(--ink);}
  .fact svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

  /* ---------- Kontakt (Indigo-Akzent) ---------- */
  #kontakt{background:var(--bg);}
  .contact-box{background:var(--ink); color:var(--cream); border-radius:24px; padding:60px 48px; text-align:center; position:relative; overflow:hidden;}
  .contact-box::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(560px 320px at 50% -10%, rgba(255,255,255,0.08), transparent 60%);}
  .contact-box > *{position:relative;}
  .contact-box h2{color:var(--cream); margin-bottom:14px;}
  .contact-box p{color:rgba(241,238,228,0.8); font-size:1.08rem; max-width:48ch; margin:0 auto 30px;}
  .contact-mail{display:inline-flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:1.12rem; padding:16px 30px; border-radius:12px; background:var(--cream); color:var(--ink); transition:transform .15s ease, background .2s ease;}
  .contact-mail:hover{transform:translateY(-2px); background:#fff;}
  .contact-mail svg{width:20px; height:20px; flex:none; stroke:var(--ink); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .contact-note{margin-top:22px; color:rgba(241,238,228,0.75); font-size:0.95rem; display:inline-flex; align-items:flex-start; justify-content:center; gap:8px; line-height:1.4; max-width:280px; margin-left:auto; margin-right:auto; text-align:left;}
  .contact-note svg{width:16px; height:16px; flex:none; margin-top:2px; stroke:var(--cream); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

  /* ---------- Footer + Rechtliches ---------- */
  footer{border-top:1px solid var(--border); padding:56px 0 40px; background:var(--surface);}
  .foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap; margin-bottom:40px;}
  .foot-brand{display:flex; align-items:center; gap:12px; color:var(--ink);}
  .foot-brand .mark{width:32px; height:32px; color:var(--ink);}
  .foot-brand .name{font-family:var(--display); font-weight:800; font-size:1.05rem; color:var(--ink);}
  .foot-links{display:flex; gap:26px; flex-wrap:wrap;}
  .foot-links a{color:var(--muted); font-size:0.95rem; transition:color .2s;}
  .foot-links a:hover{color:var(--ink);}
  .copy{color:var(--muted); font-size:0.85rem; border-top:1px solid var(--border); padding-top:24px;}

  .legal{padding:72px 0; border-top:1px solid var(--border); background:var(--surface);}
  .legal h2{font-size:1.5rem; margin-bottom:18px;}
  .legal p{color:var(--body); margin-bottom:12px; max-width:70ch;}
  .legal p strong{color:var(--ink);}
  .placeholder{background:var(--tint); border:1px dashed var(--ink); border-radius:10px; padding:16px 18px; color:var(--ink); font-size:0.92rem; margin:14px 0;}

  /* ---------- Responsive ---------- */
  @media (max-width:860px){
    .hero-grid{grid-template-columns:1fr; gap:36px;}
    .hero-visual{order:-1;}
    .hero-visual .mark{width:min(220px,55vw);}
    .about-grid{grid-template-columns:1fr; gap:34px;}
    .about-visual{order:-1;}
    .nav-links{display:none;}
  }
  @media (max-width:520px){ .hero{padding:64px 0 60px;} section{padding:64px 0;} .contact-box{padding:44px 24px;} }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important;} }

/* Gemeinsame Erweiterungen fuer Leistungsseiten und Navigation. */
[hidden]{display:none!important}
button,summary,input,textarea{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #695cca;outline-offset:4px}
.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:8px}
.skip-link:focus{top:12px}
.nav{gap:20px;position:relative}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav>a,.services-menu>summary{font-size:.93rem;font-weight:500;color:var(--muted);padding:12px 0;white-space:nowrap}
.site-nav>a:hover,.services-menu>summary:hover,.site-nav>[aria-current="page"],.services-menu.is-current>summary{color:var(--ink)}
.site-nav>[aria-current="page"]{font-weight:700}
.services-menu{position:relative}
.services-menu>summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer}
.services-menu>summary::-webkit-details-marker{display:none}
.chevron{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .18s}
.services-menu[open]>summary .chevron{transform:rotate(180deg)}
.services-panel{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:620px;max-width:calc(100vw - 40px);padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px rgba(7,0,67,.13);max-height:calc(100dvh - 110px);overflow-y:auto}
.services-panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font-size:.82rem;font-weight:700;padding:0 4px 14px;border-bottom:1px solid var(--border);margin-bottom:8px}
.services-panel-title a{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.services-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.services-list a{display:flex;gap:12px;align-items:center;padding:12px 10px;border-radius:10px;color:var(--body);font-size:.87rem;line-height:1.4;min-height:55px;transition:background-color .24s ease,color .24s ease}
.services-list a:is(:hover,:focus-visible,[aria-current="page"]){background:var(--ink);color:var(--cream)}
.services-list a:is(:hover,:focus-visible,[aria-current="page"]) svg{stroke:var(--cream)}
.services-list a[aria-current="page"]{font-weight:700}
.services-list svg{width:23px;height:23px;flex:none;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .24s ease}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--ink);cursor:pointer;flex:none}
.nav-toggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none}
.nav-toggle[aria-expanded="true"] .hamburger{display:none}
.nav-toggle:not([aria-expanded="true"]) .close-icon{display:none}
.nav-actions{display:flex;gap:10px;align-items:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card-link{display:flex;flex-direction:column;height:100%}

/* Verlinkte Kacheln auf allen Seiten wechseln bei Hover und Tastaturfokus ins Markenblau. */
.card-link{
  transition:background-color .24s ease, transform .18s ease, border-color .24s ease, box-shadow .24s ease;
}
.card-link h3,
.card-link p,
.card-link .card-more{transition:color .24s ease;}
.card-link .ic{transition:background-color .24s ease;}
.card-link .ic svg{transition:stroke .24s ease;}
.card-link:is(:hover,:focus-visible){
  background:var(--ink);
  border-color:var(--ink);
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(7,0,67,.20);
}
.card-link:is(:hover,:focus-visible) h3,
.card-link:is(:hover,:focus-visible) p,
.card-link:is(:hover,:focus-visible) .card-more{color:var(--cream);}
.card-link:is(:hover,:focus-visible) .ic{background:rgba(255,255,255,.12);}
.card-link:is(:hover,:focus-visible) .ic svg{stroke:var(--cream);}

.card-link p{flex:1}
.card-more{display:flex;align-items:center;gap:7px;margin-top:22px;color:var(--ink);font-size:.86rem;font-weight:600}
.card-more svg,.inline-arrow{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.about-more{margin-top:10px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;font-size:.83rem;color:var(--muted);margin-bottom:26px;line-height:1.5}
.breadcrumb li+li:before{content:"/";padding-right:8px;color:#9494a4}
.breadcrumb a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.service-hero{padding:40px 0 50px;position:relative;background:radial-gradient(650px 400px at 95% 10%,rgba(7,0,67,.05),transparent 65%)}
.service-hero .eyebrow{margin-bottom:18px;gap:12px}
.service-hero .eyebrow svg{height:25px;width:25px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.service-hero h1{font-size:clamp(2rem,4.5vw,3.25rem);line-height:1.12;max-width:25ch;margin-bottom:25px}
.subpage h1{overflow-wrap:anywhere}
.service-intro{max-width:76ch}
.service-intro p{font-size:1.06rem;line-height:1.8;margin-bottom:16px}
.service-intro p:first-child{font-size:1.15rem;color:var(--body)}
.service-hero .hero-actions{margin-top:26px}
.service-body{padding:0 0 76px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:36px;align-items:start}
.service-article{min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:12px 36px}
.service-section{padding:30px 0;scroll-margin-top:96px}
.service-section+.service-section{border-top:1px solid var(--border)}
.service-section h2{font-size:clamp(1.3rem,2.1vw,1.65rem);line-height:1.3;margin-bottom:16px;letter-spacing:0}
.service-section p{margin:0 0 14px;line-height:1.85}
.service-section p:last-child{margin-bottom:0}
.service-section ul{margin:0 0 16px 22px;line-height:1.85}
.service-section li{margin-bottom:7px}
.service-article a:not(.btn){color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.detail-aside{position:sticky;top:96px;display:grid;gap:18px}
.toc-card,.help-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.toc-title{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.toc-card ol{list-style:none;display:grid;gap:1px;max-height:calc(100dvh - 370px);min-height:140px;overflow:auto}
.toc-card a{display:block;padding:8px 0;font-size:.82rem;line-height:1.5;color:var(--muted)}
.toc-card a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.help-card{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.help-card p{font-size:.85rem;line-height:1.7;margin-bottom:12px}
.help-card .help-name{font-weight:700;font-size:1rem}
.help-card a{display:block;color:var(--cream);text-decoration:underline;text-underline-offset:3px;font-size:.85rem;overflow-wrap:anywhere}
.related{padding:0 0 72px}
.related h2{font-size:1.7rem;margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.related-grid .card{padding:24px}
.related-grid .card h3{font-size:1rem}
.related-grid .card p{font-size:.88rem}
.service-contact{padding:0 0 72px}
.service-contact .contact-box{padding:44px 32px}
.service-contact .contact-box h2{font-size:1.8rem}
.service-contact .contact-mail{font-size:1rem;line-height:1.35;justify-content:center}
.back,.subpage-content a{overflow-wrap:anywhere}
.contact-layout{min-width:0}
@media(max-width:1020px){
 .site-nav{gap:20px}.detail-grid{grid-template-columns:minmax(0,1fr) 250px;gap:24px}.service-article{padding:8px 28px}.toc-card,.help-card{padding:20px}
}
@media(max-width:900px){
 .nav{height:72px}.nav-toggle{display:flex}.nav-actions>.btn{padding:11px 15px;font-size:.87rem}
 .js .site-nav{display:none}.js .site-nav.is-open{display:flex}
 .site-nav{position:absolute;top:calc(100% + 1px);left:16px;right:16px;flex-direction:column;align-items:stretch;gap:0;padding:14px 20px 20px;background:var(--surface);border:1px solid var(--border);border-radius:0 0 16px 16px;box-shadow:0 20px 30px rgba(7,0,67,.1);max-height:calc(100dvh - 90px);overflow:auto}
 .site-nav>a,.services-menu>summary{padding:13px 0;width:100%;font-size:.95rem}.services-menu>summary{justify-content:space-between}
 .services-panel{position:static;transform:none;width:100%;max-width:none;max-height:none;padding:8px 0;box-shadow:none;border:none;overflow:visible}
 .services-panel-title{padding:10px 0;font-size:.79rem}.services-list{gap:2px 8px}.services-list a{font-size:.85rem;padding:10px 8px}
 .detail-grid{display:flex;flex-direction:column}.detail-aside{position:static;width:100%;order:-1}.toc-card ol{display:grid;grid-template-columns:1fr 1fr;gap:2px 24px;max-height:none;min-height:0}.help-card{display:none}
 .service-article{width:100%;padding:8px 30px}.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 html:not(.js) .nav{height:auto;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}html:not(.js) .site-nav{position:static;order:3;flex-basis:100%;box-shadow:none;max-height:none;border-radius:12px}
}
@media(max-width:520px){
 .wrap{padding-left:20px;padding-right:20px}.nav{gap:10px}.brand{gap:8px}.brand .mark{width:29px;height:29px}.brand .name{font-size:.94rem}.nav-actions{gap:8px}.nav-actions>.btn{padding:10px 12px}.nav-toggle{width:40px;height:40px}
 .cards{grid-template-columns:1fr}.services-list{grid-template-columns:1fr}.service-hero{padding:26px 0 34px}.breadcrumb{font-size:.77rem;margin-bottom:22px}.service-hero .eyebrow{font-size:.77rem}.service-hero h1{font-size:2rem;overflow-wrap:anywhere}.service-intro p,.service-intro p:first-child{font-size:1rem}.service-hero .hero-actions .btn{line-height:1.4;justify-content:center;text-align:center;width:100%}
 .service-article{padding:3px 22px}.service-section{padding:25px 0}.service-section p,.service-section li{font-size:.95rem}.toc-card{padding:20px}.toc-card ol{grid-template-columns:1fr}.toc-card a{padding:7px 0;font-size:.84rem}.related-grid{grid-template-columns:1fr}.service-contact .contact-box{padding:34px 22px}.service-contact .contact-mail{padding:15px 20px}.service-body,.related,.service-contact{padding-bottom:48px}.foot-links{gap:16px 22px}
}
@media(max-width:370px){.nav-actions>.btn{display:none}.brand .name{font-size:.96rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- Hero-Animation ---------- */
.hero-anim{position:relative;width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;box-shadow:0 20px 44px rgba(7,0,67,.06)}
.ha-stage{width:100%;height:auto;color:var(--ink);overflow:visible;user-select:none;-webkit-user-select:none}
.ha-sc{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.ha-sc.is-on{opacity:1;visibility:visible;transition:opacity .5s ease}
.ha-t1{font-family:var(--display);font-weight:800;font-size:30px;fill:var(--ink)}
.ha-t2{font-family:var(--sans);font-weight:500;font-size:20px;fill:var(--muted)}
.ha-t3{font-family:var(--sans);font-weight:600;font-size:22px;fill:var(--ink)}
.ha-btn-text{font-family:var(--sans);font-weight:600;font-size:19px;fill:var(--cream)}
.ha-spin,.ha-pop,.ha-halo{transform-box:fill-box;transform-origin:center}
.ha-ring{transform-box:fill-box;transform-origin:center bottom}
.ha-wd{transform-box:fill-box;transform-origin:left center}
.ha-rise,.ha-slide,.ha-wd,.ha-wv,.ha-halo{opacity:0}
.is-on .ha-spin{animation:ha-spin 9s linear infinite}
.is-on .ha-rev{animation-duration:5.4s;animation-direction:reverse}
.ha-fast.is-on .ha-spin{animation-duration:3s}
.ha-fast.is-on .ha-rev{animation-duration:1.8s}
.is-on .ha-pop{animation:ha-pop .5s cubic-bezier(.22,.9,.3,1) both}
.is-on .ha-rise{animation:ha-rise .7s ease-out both}
.is-on .ha-slide{animation:ha-slide .6s ease-out both}
.is-on .ha-wd{animation:ha-word .35s ease-out both}
.is-on .ha-wv{animation:ha-wave 1.6s ease-in-out infinite}
.is-on .ha-ring{animation:ha-ring 2.4s ease-in-out infinite}
.is-on .ha-dot{animation:ha-blink 1.2s infinite}
.is-on .ha-halo{animation:ha-halo 2s ease-out .8s infinite}
.hero-anim.is-paused *{animation-play-state:paused!important}
@keyframes ha-spin{to{transform:rotate(360deg)}}
@keyframes ha-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@keyframes ha-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes ha-slide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes ha-word{from{opacity:0;transform:scaleX(.3)}to{opacity:1;transform:scaleX(1)}}
@keyframes ha-wave{0%,100%{opacity:0}50%{opacity:1}}
@keyframes ha-ring{0%,50%,100%{transform:rotate(0)}10%,30%{transform:rotate(-7deg)}20%,40%{transform:rotate(7deg)}}
@keyframes ha-blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes ha-halo{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.12,1.4)}}
.ha-toggle{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .2s}
.ha-toggle:hover{border-color:var(--ink)}
.ha-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ha-toggle .ha-i-play{display:none}
.ha-toggle .ha-i-play path{fill:currentColor}
.ha-toggle.is-paused .ha-i-pause{display:none}
.ha-toggle.is-paused .ha-i-play{display:block}
@media (max-width:860px){.hero-anim{max-width:460px;padding:12px}}
@media (prefers-reduced-motion:reduce){.ha-rise,.ha-slide,.ha-wd,.ha-wv{opacity:1}}

/* Mobil: Animation zwischen Text und Buttons */
@media (max-width:860px){
  .hero-grid{display:flex;flex-direction:column;gap:0}
  .hero-copy{display:contents}
  .hero-copy .eyebrow{align-self:flex-start}
  .hero-visual{order:1;margin:0 0 30px}
  .hero-actions{order:2}
}