:root{
  --bg:#070A10;
  --bg2:#0B1020;
  --card:#0D1428;
  --text:#EAF0FF;
  --muted:#B3C0E6;
  --line:rgba(255,255,255,.10);

  /* WebCore accent (keeps your existing theme-color vibe) */
  --accent:#2a7bff;
  --accent2:#22D3EE;

  --good:#22C55E;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
  --radius2:26px;
  --container:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(900px 600px at 18% 12%, rgba(42,123,255,.22), transparent 55%),
    radial-gradient(900px 600px at 82% 18%, rgba(34,211,238,.14), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
.container{width:min(var(--container), calc(100% - 40px)); margin:0 auto}

.section{padding:84px 0}
.section--alt{ background: transparent; }
@media (max-width: 980px){.section{padding:64px 0}}

.sectionHead{max-width:780px;margin-bottom:26px}
.sectionHead h2{
  font-size: clamp(26px, 3.2vw, 40px);
  line-height:1.1;margin:0 0 10px;letter-spacing:-.02em
}
.sectionHead p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.6}

.grid{display:grid;gap:16px;row-gap:30px}
.cards{grid-template-columns:repeat(4,1fr)}
.showcase{grid-template-columns:repeat(3,1fr)}
.pricing{grid-template-columns:repeat(3,1fr)}
@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .showcase,.pricing{grid-template-columns:1fr}
}
@media (max-width: 560px){.cards{grid-template-columns:1fr}}

.topbar{
  position:sticky;top:0;z-index:50;
  background: rgba(5,8,16,.62);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.01em}
.brand__mark{
  width:34px;height:34px;border-radius:12px;
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(135deg, rgba(42,123,255,.96), rgba(34,211,238,.90));
  box-shadow:0 12px 26px rgba(0,0,0,.45)
}
.brand__text{font-size:16px}
.brand__city{color:rgba(234,240,255,.80);font-weight:650}

.nav{display:flex;gap:14px;align-items:center}
.nav__link{
  color:rgba(234,240,255,.84);font-size:14px;
  padding:10px 10px;border-radius:12px;border:1px solid transparent;
  transition:transform .18s ease, border-color .18s ease, background .18s ease
}
.nav__link:hover{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.10);
  transform:translateY(-1px)
}

.topbar__actions{display:flex;gap:10px;align-items:center}
@media (max-width: 980px){.nav,.topbar__actions{display:none}}

.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:999px;
  font-size:13.5px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease
}
.pill:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.pill--ghost{background:rgba(255,255,255,.02)}
.pill--primary{border:1px solid rgba(42,123,255,.55);background:linear-gradient(135deg, rgba(42,123,255,.96), rgba(34,211,238,.76))}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  font-weight:700;letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  cursor:pointer;
  width: 300px
}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.20);box-shadow:var(--shadow)}
.btn--primary{border-color:rgba(42,123,255,.55);background:linear-gradient(135deg, rgba(42,123,255,.98), rgba(34,211,238,.80))}
.btn--secondary{background:rgba(255,255,255,.03)}
.btn--full{width:100%;padding:13px 16px}

.burger{
  display:none;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);border-radius:14px;padding:10px
}
.burger span{display:block;width:22px;height:2px;background:rgba(234,240,255,.9);margin:5px 0;border-radius:99px}
@media (max-width: 980px){.burger{display:block}}

.mobileNav{
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,16,.76);
  backdrop-filter: blur(16px);
}
.mobileNav__inner{padding:14px 0 18px;display:grid;gap:10px}
.mobileNav__link{
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03)
}
.mobileNav__cta{display:flex;gap:10px;flex-wrap:wrap}

.hero{padding:92px 0 46px}
.hero__grid{
  display:grid;grid-template-columns:1.35fr .65fr;gap:22px;align-items:center
}
@media (max-width: 980px){.hero{padding:68px 0 38px}.hero__grid{grid-template-columns:1fr}}

.kicker{
  display:inline-flex;align-items:center;gap:10px;padding:8px 12px;
  border-radius:999px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);color:rgba(234,240,255,.86);
  font-size:13px;margin-bottom:12px
}
.kicker .dot{
  width:8px;height:8px;border-radius:50%;
  background:linear-gradient(135deg, rgba(42,123,255,1), rgba(34,211,238,1));
  box-shadow:0 0 18px rgba(34,211,238,.35)
}
.hero h1{
  margin:0 0 14px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height:1.05;letter-spacing:-0.03em
}
.glow{
  background:linear-gradient(135deg, rgba(234,240,255,1), rgba(34,211,238,.95));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 22px rgba(34,211,238,.10)
}
.lead{margin:0 0 18px;color:rgba(179,192,230,.92);font-size:17px;line-height:1.65;max-width:62ch}

.hero__cta {
  gap:10px;
  margin-bottom:16px;
  display: flex;
}
.hero__cta .btn {
    flex: 1;
}

.trustRow{display:flex;gap:10px}

.trustRow__item{
  font-size:13.5px;color:rgba(234,240,255,.84);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  padding:9px 10px;border-radius:14px;
  flex: 1;
  text-align:center;
}


@media (max-width: 768px) {
  .hero__cta {
    justify-content: center !important;
    flex-direction:column;
  }

  .hero__cta .btn {
    width: 100%;
    max-width: 420px;
    flex:unset;
  }
  
  .trustRow {
    justify-content: center !important;
    flex-direction:column;
  }

  .trustRow__item{
    width: 100%;
    max-width: 420px;
    text-align: left;
    flex:unset;
  }

}

.hero__panel{position:relative}
.hero__glowBlob{
  position:absolute;inset:-40px;
  background:
    radial-gradient(260px 260px at 50% 30%, rgba(42,123,255,.28), transparent 60%),
    radial-gradient(240px 240px at 70% 70%, rgba(34,211,238,.18), transparent 60%);
  filter: blur(8px);
  z-index:0;pointer-events:none
}
.glassCard{
  position:relative;z-index:1;
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:var(--shadow);
  padding:18px
}
.glassCard__title{font-weight:800;letter-spacing:.01em;margin-bottom:10px}
.glassCard__line{height:1px;background:rgba(255,255,255,.10);margin:10px 0 12px}
.glassCard__list{margin:0;padding-left:0;list-style:none;display:grid;gap:10px;color:rgba(234,240,255,.88)}
.tick{
  display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
  border-radius:8px;margin-right:8px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.25);
  color:rgba(34,197,94,.95);font-weight:900
}
.glassCard__footer{gap:8px;margin-top:14px}
.badge{
  display:inline-flex;padding:8px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  font-size:12.5px
}
.badge--muted{color:rgba(179,192,230,.92)}

.proof{padding:22px 0 0}
.proof__inner{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proof__item{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:var(--radius);
  padding:14px 14px
}
.proof__num{font-weight:900;letter-spacing:-.01em}
.proof__text{color:rgba(179,192,230,.92);margin-top:6px;font-size:14px}
@media (max-width: 980px){.proof__inner{grid-template-columns:1fr}}

.card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:18px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease
}
.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  background:rgba(255,255,255,.03)
}
/* Clickable cards (Premium Links) */
.card--link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  outline:none;
}
.card--link:hover{
  border-color:rgba(34,197,94,.60);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 12px 34px rgba(34,197,94,.14);
  background:linear-gradient(180deg, rgba(34,197,94,.06), rgba(255,255,255,.02));
  transform:translateY(-4px);
}
.card--link:hover h3{
  color:rgba(234,240,255,.98);
}
.card--link:focus-visible{
  border-color:rgba(34,197,94,.75);
  box-shadow:0 0 0 4px rgba(34,197,94,.20), 0 18px 50px rgba(0,0,0,.55);
}
.card h3{margin:0 0 8px;letter-spacing:-.01em}
.card p{margin:0;color:rgba(179,192,230,.92);line-height:1.6}
.card__meta{
  margin-top:12px;color:rgba(234,240,255,.76);font-size:12.5px;
  padding-top:10px
}

.shot{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.40)
}
.shot__img{
  height:168px;
  background:
    radial-gradient(300px 200px at 20% 10%, rgba(42,123,255,.32), transparent 60%),
    radial-gradient(300px 200px at 80% 40%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.shot__img--2{
  background:
    radial-gradient(300px 200px at 30% 10%, rgba(34,211,238,.26), transparent 60%),
    radial-gradient(300px 200px at 70% 40%, rgba(42,123,255,.24), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.shot__img--3{
  background:
    radial-gradient(300px 200px at 20% 10%, rgba(34,197,94,.14), transparent 60%),
    radial-gradient(300px 200px at 80% 40%, rgba(42,123,255,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.shot__body{padding:16px}
.shot__body h3{margin:0 0 8px}
.shot__body p{margin:0 0 12px;color:rgba(179,192,230,.92);line-height:1.6}
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-size:12px;padding:7px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:rgba(234,240,255,.82)
}

.steps{display:grid;gap:12px}
.step{
  display:grid;grid-template-columns:46px 1fr;gap:12px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:14px
}
.step__num{
  width:46px;height:46px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-weight:950;
  background:linear-gradient(135deg, rgba(42,123,255,.75), rgba(34,211,238,.55));
  border:1px solid rgba(255,255,255,.12)
}
.step__content h3{margin:2px 0 6px}
.step__content p{margin:0;color:rgba(179,192,230,.92);line-height:1.6}

.priceCard{
  border-radius:var(--radius2);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:18px;position:relative
}
.priceCard__top h3{margin:0 0 6px}
.priceCard__top p{margin:0;color:rgba(179,192,230,.92);line-height:1.6}
.priceCard__list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.priceCard__cta{margin-top:16px}
.priceCard--featured{
  border-color:rgba(42,123,255,.35);
  background:linear-gradient(180deg, rgba(42,123,255,.10), rgba(255,255,255,.02));
  box-shadow:var(--shadow)
}
.ribbon{
  position:absolute;top:14px;right:14px;font-size:12px;
  padding:7px 9px;border-radius:999px;
  background:rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.26);
  color:rgba(234,240,255,.9)
}
.note{
  margin-top:16px;padding:14px 16px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  color:rgba(179,192,230,.92);line-height:1.6
}

.faq{display:grid;gap:10px;width:100%;max-width:none}
.faq__item{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:14px 14px
}
.faq__item summary{cursor:pointer;font-weight:800}
.faq__item p{margin:10px 0 0;color:rgba(179,192,230,.92);line-height:1.65}

.ctaBox{
  display:grid;
  /* grid-template-columns:1.05fr .95fr; */
  gap:16px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(520px 360px at 10% 20%, rgba(42,123,255,.22), transparent 60%),
    radial-gradient(520px 360px at 90% 60%, rgba(34,211,238,.14), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  padding:18px
}
@media (max-width: 980px){.ctaBox{grid-template-columns:1fr}}
.ctaBox h2{margin:6px 0 10px;font-size:clamp(24px, 3.2vw, 38px)}
.ctaBox p{margin:0 0 12px;color:rgba(179,192,230,.92);line-height:1.65; padding: 10px}
.ctaBox__bullets{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.ctaBox__bullets>div{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  padding:9px 10px;border-radius:14px;
  color:rgba(234,240,255,.86);font-size:13.5px
}

.form{
  border-radius:22px;border:1px solid rgba(255,255,255,.10);
  background:rgba(8,12,22,.55);
  padding:14px
}
.field{display:grid;gap:6px;margin-bottom:10px}
.field span{font-size:12.5px;color:rgba(234,240,255,.82)}
input,textarea{
  width:100%;padding:12px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);outline:none
}
input:focus,textarea:focus{
  border-color:rgba(34,211,238,.35);
  box-shadow:0 0 0 4px rgba(34,211,238,.10)
}
.form__note{
  margin:10px 0 0;font-size:12.5px;
  color:rgba(179,192,230,.88);line-height:1.55
}
.form__note a{text-decoration:underline;text-underline-offset:3px}

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  padding:26px 0;background:rgba(255,255,255,.01)
}
.footer__inner{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap
}
.footer__brand{font-weight:900;letter-spacing:-.01em}
.footer__sub{color:rgba(179,192,230,.92);font-size:13.5px;margin-top:4px}
.footer__links{display:flex;gap:12px;flex-wrap:wrap;color:rgba(234,240,255,.82)}
.footer__links a:hover{text-decoration:underline;text-underline-offset:3px}

/* Simple "page" layout for Impressum/Datenschutz */
.pageHero{padding:76px 0 26px}
.pageHero h1{margin:0 0 10px;font-size: clamp(28px, 3.8vw, 46px);letter-spacing:-.03em;line-height:1.05}
.pageHero p{margin:0;color:rgba(179,192,230,.92);line-height:1.65;max-width:70ch}
.prose{
  padding: 22px 0 70px;
}
.prose h2{margin:26px 0 10px;letter-spacing:-.01em}
.prose p, .prose li{color:rgba(179,192,230,.92);line-height:1.75}
.prose a{text-decoration:underline;text-underline-offset:3px}
/* ---------------------------------------------
   Soft section transitions ("flow")
   --------------------------------------------- */
.section, .section--alt, .hero, .proof, .footer { position: relative; }




/* Make hero blend more smoothly into next section */
.hero{
  background:
    radial-gradient(900px 600px at 22% 20%, rgba(42,123,255,.12), transparent 60%),
    radial-gradient(900px 600px at 78% 18%, rgba(34,211,238,.08), transparent 62%);
}
.proof{ margin-top: -10px; }

/* ---------------------------------------------
   Brand logo (from your original) in premium colors
   --------------------------------------------- */
.brand{ gap:10px; }
.brand__mark{
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;
  color: rgba(234,240,255,.95);
  background:
    radial-gradient(12px 12px at 30% 30%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(135deg, rgba(42,123,255,.96), rgba(34,211,238,.90));
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}
.brand__name{
  font-size:16px;
  font-weight:900;
  letter-spacing:-.01em;
}
.brand__sub{
  font-size:16px;
  font-weight:650;
  color: rgba(234,240,255,.78);
}

/* ---------------------------------------------
   Futuristic hover effects (buttons + links)
   --------------------------------------------- */
.btn, .pill, .nav__link, .mobileNav__link, .footer__links a{
  position:relative;
  overflow:hidden;
  will-change: transform;
}

/* sheen / slide */
.btn::before, .pill::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.18) 18%,
    rgba(34,211,238,.16) 34%,
    rgba(42,123,255,.12) 52%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events:none;
}
.btn:hover::before, .pill:hover::before{
  transform: translateX(120%);
}

/* glow ring on hover */
.btn:hover, .pill:hover{
  box-shadow:
    0 18px 55px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.14),
    0 0 26px rgba(42,123,255,.10);
}

/* links: subtle underline slide */
.nav__link::after, .footer__links a::after{
  content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:8px;
  height:1px;
  background: linear-gradient(90deg, rgba(34,211,238,.0), rgba(34,211,238,.55), rgba(42,123,255,.0));
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
  opacity:.9;
}
.nav__link:hover::after, .footer__links a:hover::after{ transform: scaleX(1); }

/* ---------------------------------------------
   Card hover: clearer "I'm hovered" feedback
   --------------------------------------------- */
.card, .shot, .priceCard, .step, .proof__item, .faq__item{
  position:relative;
}
.card::after, .shot::after, .priceCard::after, .step::after, .proof__item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  background: radial-gradient(420px 180px at 30% 10%, rgba(34,211,238,.10), transparent 55%),
              radial-gradient(420px 180px at 70% 30%, rgba(42,123,255,.10), transparent 55%);
  opacity:0;
  transition: opacity .22s ease;
  pointer-events:none;
}
.card:hover::after, .shot:hover::after, .priceCard:hover::after, .step:hover::after, .proof__item:hover::after{
  opacity:1;
}

/* ---------------------------------------------
   Reveal on scroll
   --------------------------------------------- */
.reveal{
  opacity:0;
  transform: translateY(16px) scale(.99);
  filter: blur(6px);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease;
}
.reveal.in-view{
  opacity:1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .btn::before,.pill::before{display:none}
}
/* ---------------------------------------------
   Portfolio (Demo-Showcase)
   --------------------------------------------- */
.portfolioGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){
  .portfolioGrid{ grid-template-columns: 1fr; }
}

.portfolioMock{
  height: 188px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(360px 220px at 25% 18%, rgba(42,123,255,.28), transparent 60%),
    radial-gradient(360px 220px at 78% 45%, rgba(34,211,238,.18), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.portfolioMock--handwerk{
  background:
    radial-gradient(360px 220px at 25% 18%, rgba(42,123,255,.30), transparent 60%),
    radial-gradient(360px 220px at 78% 45%, rgba(34,211,238,.16), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.portfolioMock--praxis{
  background:
    radial-gradient(360px 220px at 30% 18%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(360px 220px at 76% 55%, rgba(42,123,255,.18), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.portfolioMock--gastro{
  background:
    radial-gradient(360px 220px at 25% 18%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(360px 220px at 78% 45%, rgba(42,123,255,.18), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}

.portfolioMock__top{
  position:absolute;
  top:10px; left:12px;
  display:flex;
  gap:6px;
  opacity:.75;
}
.portfolioMock__dot{
  width:8px;height:8px;border-radius:99px;
  background: rgba(234,240,255,.35);
  border: 1px solid rgba(255,255,255,.12);
}

.portfolioMock__hero{
  position:absolute;
  left:12px; right:12px;
  top:34px;
  height:64px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(140px 80px at 30% 30%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}

.portfolioMock__lines{
  position:absolute;
  left:12px; right:12px;
  top:110px;
  display:grid;
  gap:10px;
}
.portfolioMock__lines span{
  height:10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.portfolioMock__lines span:nth-child(1){ width: 86%; }
.portfolioMock__lines span:nth-child(2){ width: 72%; }
.portfolioMock__lines span:nth-child(3){ width: 64%; }

.portfolioNote{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  color: rgba(179,192,230,.92);
  line-height: 1.6;
}


/* Ultra-soft flow between sections (no visible bands) */
.section, .section--alt{
  position:relative;
}
.section::before, .section--alt::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-60px;
  height:120px;
  background: radial-gradient(70% 120px at 50% 100%, rgba(34,211,238,.06), transparent 70%);
  pointer-events:none;
}
.section::after, .section--alt::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-60px;
  height:120px;
  background: radial-gradient(70% 120px at 50% 0%, rgba(42,123,255,.06), transparent 70%);
  pointer-events:none;
}

.portfolioNote{ margin-bottom: 18px; }

html, body{ width:100%; overflow-x:hidden; }
.hero__grid, .container{ max-width:100%; }



/* Seamless background flow: subtle global overlays (prevents visible bands) */
body::before, body::after{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  z-index:-1;
}
body::before{
  background: radial-gradient(1200px 700px at 20% 15%, rgba(42,123,255,.12), transparent 65%),
              radial-gradient(1200px 700px at 80% 35%, rgba(34,211,238,.08), transparent 65%);
  filter: blur(14px);
  opacity:.9;
}
body::after{
  background: radial-gradient(900px 520px at 55% 80%, rgba(34,211,238,.06), transparent 70%);
  filter: blur(18px);
  opacity:.8;
}

/* Portfolio images */
.portfolioShot{
  height: 188px;
  overflow:hidden;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}
.portfolioShot img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.04);
  transition: transform .35s ease, filter .35s ease;
}
.shot:hover .portfolioShot img{
  transform: scale(1.06);
  filter: saturate(1.08) contrast(1.08);
}

/* Remove old CSS-mock block borders if present */
.portfolioMock{ display:none !important; }





/* Kicker centered (desktop + mobile) */
.kicker{
  margin-left:auto;
  margin-right:auto;
  justify-content:center;
  text-align:center;
  width: fit-content;
  max-width: calc(100% - 24px);
}


/* Global ultra-soft noise overlay (premium, removes banding) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image: url("../img/noise-soft.png");
  background-size: 420px 420px;
  opacity: .10;
  mix-blend-mode: soft-light;
  filter: blur(0.6px);
}


/* Mobile menu animation */
.mobileNav{
  overflow:hidden;
  transform-origin: top;
  transition: transform .28s ease, opacity .28s ease, max-height .28s ease;
  will-change: transform, opacity, max-height;
}
.mobileNav[hidden]{
  display:block;           /* keep for animation */
  max-height:0;
  opacity:0;
  transform: translateY(-6px) scaleY(.98);
  pointer-events:none;
}
body.navOpen .mobileNav{
  max-height:420px;
  opacity:1;
  transform: translateY(0) scaleY(1);
  pointer-events:auto;
}

/* Burger morph */
.burger{
  transition: transform .18s ease, box-shadow .18s ease;
}
.burger:hover{ transform: translateY(-1px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.burger span{
  transition: transform .22s ease, opacity .18s ease, width .22s ease;
  transform-origin: center;
}
.burger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
  width:0;
}
.burger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}


.hero__content h1,
.hero__content p{
  align-self:flex-start; /* keep text left */
}
.kicker{
  align-self:center;
  margin-top: 8px;
  margin-bottom: 18px;
}




/* Subpages helpers */
.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
.grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.spacer{ height: 50px; }
.lead{ font-size: 18px; line-height:1.6; color: rgba(179,192,230,.92); max-width: 62ch; }
@media (max-width: 980px){
  .grid3, .grid2{ grid-template-columns: 1fr; }
}

/* Home: deep links to service pages */
.leistungsLinks{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 14px 0 18px;
}
.leistungsLinks .pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
}
.leistungsLinks .pill em{
  font-style:normal;
  color: rgba(179,192,230,.86);
}
@media (max-width: 980px){
  .leistungsLinks{ gap:8px; }
  .leistungsLinks .pill{ width: 100%; justify-content: space-between; }
}


/* Hero: kicker sits between header and headline (no overlap), buttons stay left */
.hero__content{
  position: relative;
}

.kicker{
  position: relative;
  z-index: 2;
  margin-top: clamp(10px, 4vh, 44px);
  margin-bottom: 18px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin-left: 0;          /* keep hero text left */
  margin-right: 0;
}

@media (max-width: 980px){
  .kicker{
    margin-top: 14px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Keep CTAs left aligned (desktop + mobile) */
.hero__cta{
  /* justify-content: flex-start !important; */
  /* align-items: center; */
}


/* Fix: prevent logo overflow */
.header{
  overflow: hidden;
}
.brand{
  max-width: 100%;
}
.brand__mark{
  flex-shrink: 0;
}


/* Reduce space between header and hero */
.hero{
  padding-top: 110px; /* previously larger visual gap */
}

@media (max-width: 980px){
  .hero{
    padding-top: 95px;
  }
}


/* Header premium enhancements: hover underline, active state, scroll shrink + glass */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(7,10,16,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease, padding .25s ease, backdrop-filter .25s ease;
}

.header__inner{
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding .25s ease;
}

/* Nav links: futuristic underline slide */
.nav__link{
  position: relative;
  padding: 10px 10px;
  border-radius: 12px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.nav__link::after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(42,123,255,.0), rgba(34,211,238,.65), rgba(42,123,255,.0));
  transform: scaleX(.25);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
  transform-origin: center;
}

.nav__link:hover{
  background: rgba(255,255,255,.03);
  transform: translateY(-1px);
}

.nav__link:hover::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Active link (current section/page) */
.nav__link.is-active{
  color: rgba(234,240,255,.98);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
}
.nav__link.is-active::after{
  opacity: 1;
  transform: scaleX(1);
}

/* Scroll state: slightly smaller, stronger glass */
body.scrolled .header{
  background: rgba(7,10,16,.72);
  box-shadow: 0 18px 70px rgba(0,0,0,.45);
}
body.scrolled .header__inner{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Mobile nav uses same glass feel */
.mobileNav{
  background: rgba(7,10,16,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}


/* Header layout: keep burger on the far right (also on subpages) */
.header__inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.nav{
  margin-left:auto;
}
.burger{
  margin-left: 12px;
}


/* Leistungsseiten pills: clearly clickable (subtle pulse + chevron) */
.leistungsLinks .pill{
  cursor: pointer;
  position: relative;
  padding-right: 44px;
}
.leistungsLinks .pill::after{
  content:"?";
  position:absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(234,240,255,.75);
  transition: transform .25s ease, color .25s ease;
}
.leistungsLinks .pill:hover::after{
  transform: translateY(-50%) translateX(2px);
  color: rgba(234,240,255,.95);
}

/* Very subtle pulse to hint "clickable" */
@keyframes pillPulse{
  0%, 100% { box-shadow: 0 0 0 rgba(42,123,255,0); }
  50% { box-shadow: 0 18px 60px rgba(42,123,255,.16); }
}
.leistungsLinks .pill{
  animation: pillPulse 2.8s ease-in-out infinite;
}
.leistungsLinks:hover .pill{
  animation-play-state: paused; /* stop pulsing when user engages */
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .leistungsLinks .pill{ animation: none !important; }
}

.leistungsLinks__hint{
  margin: 6px 0 10px;
  font-size: 13px;
  color: rgba(179,192,230,.78);
}


/* Mobile: more spacing between stacked CTA buttons */
@media (max-width: 640px){
  .ctaBox__actions{
    display:flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
  }
  .ctaBox__actions .btn{
    width: 300px;
  }
}

.ctaBox__actions .btn{
	margin-top: 10px;
}

/* Consent banner (future-proof; hidden unless analytics enabled) */
.consent{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2000;
}
.consent__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}
.consent__text{
  display:flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(234,240,255,.92);
  font-size: 13.5px;
  line-height: 1.45;
}
.consent__text span{ color: rgba(179,192,230,.92); }
.consent__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 740px){
  .consent__inner{ flex-direction: column; align-items: flex-start; }
}




/* FAQ ? Apple-level interaction (details/summary) */
.faq__item{
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}

.faq__item + .faq__item{ margin-top: 10px; }

.faq__item summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 600;
  color: rgba(234,240,255,.95);
  position: relative;
  outline: none;
}
.faq__item summary::-webkit-details-marker{ display:none; }

.faq__item summary::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(234,240,255,.70);
  border-bottom: 2px solid rgba(234,240,255,.70);
  transform: translateY(-55%) rotate(45deg);
  transition: transform .28s ease, border-color .28s ease, opacity .28s ease;
  opacity: .9;
}

/* Open state: subtle glow + chevron rotation */
.faq__item[open]{
  border-color: rgba(34,211,238,.18);
  background: rgba(255,255,255,.03);
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}

.faq__item[open] summary::after{
  transform: translateY(-45%) rotate(225deg);
  border-color: rgba(234,240,255,.92);
}

.faq__content{
  padding: 0 18px 16px 18px;
  color: rgba(179,192,230,.92);
  line-height: 1.65;
}

/* Animated wrapper used by JS */
.faq__contentInner{
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: height .42s cubic-bezier(.22,.61,.36,1),
              opacity .32s ease,
              transform .32s ease;
  will-change: height;
}

.faq__item[open] .faq__contentInner{
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faq__contentInner{ transition: none !important; }
  .faq__item, .faq__item summary::after{ transition: none !important; }
}


/* Toast / inline form feedback (premium) */
.toast{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  display:flex;
  justify-content: center;
  pointer-events: none;
}
.toast__card{
  width: min(720px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(7,10,16,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 90px rgba(0,0,0,.58);
  padding: 14px 14px;
  display:flex;
  align-items:flex-start;
  gap: 12px;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .38s cubic-bezier(.22,.61,.36,1), opacity .26s ease;
  pointer-events: auto;
}
.toast.is-visible .toast__card{
  transform: translateY(0);
  opacity: 1;
}
.toast__icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  background: rgba(42,123,255,.18);
  border: 1px solid rgba(42,123,255,.25);
  color: rgba(234,240,255,.92);
}
.toast__icon svg{ width: 18px !important; height: 18px !important; display:block; max-width:18px; max-height:18px; }
.toast__text{ flex:1; }
.toast__title{
  font-weight: 700;
  color: rgba(234,240,255,.96);
  margin: 0 0 2px 0;
  font-size: 14px;
}
.toast__msg{
  margin: 0;
  color: rgba(179,192,230,.92);
  font-size: 13.5px;
  line-height: 1.45;
}
.toast__actions{
  display:flex;
  gap: 8px;
  align-items:center;
}
.toast__close{
  appearance:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.92);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.toast__close:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.22);
  background: rgba(255,255,255,.05);
}
.toast__card.is-success .toast__icon{
  background: rgba(34,211,238,.14);
  border-color: rgba(34,211,238,.22);
}
.toast__card.is-error .toast__icon{
  background: rgba(255,99,99,.12);
  border-color: rgba(255,99,99,.20);
}
@media (prefers-reduced-motion: reduce){
  .toast__card{ transition: none !important; }
}


/* Equal-width pills (desktop) */
.leistungsLinks .pill{
  flex: 1 1 220px;
  justify-content: space-between;
}

/* Card marks for audit checklist */
.card{ position:relative; }
.card__mark{
  position:absolute;
  top:12px;
  right:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card__markNum{
  font-weight:700;
  letter-spacing:.06em;
  font-variant-numeric: tabular-nums;
  color: rgba(225,235,255,.92);
}

/* Premium cross (for negative comparisons) */
.cross{
  display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;
  border-radius:8px;margin-right:8px;
  background: rgba(255,77,77,.12);
  border: 1px solid rgba(255,77,77,.22);
  color: rgba(255,77,77,.95);
  font-weight:700;
}


/* Pricing price line */
.priceCard__price{font-size:1.25rem;font-weight:700;margin:.35rem 0 .5rem;letter-spacing:.2px;color:rgba(255,255,255,.92)}
.priceCard--abo .priceCard__price{color:rgba(255,255,255,.92)}
.pricing--abo{margin-top:1.25rem}
@media (max-width: 980px){.pricing.pricing--abo{grid-template-columns:1fr}}


/* Ensure toast never blocks footer links when hidden */
.toast[hidden]{display:none !important;}


/* Native smooth anchor scrolling (works on desktop + mobile) */
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}
/* Prevent header from covering anchor targets */
#top,#leistungen,#pakete,#ablauf,#faq,#kontakt,#abo,#audit-anfrage{
  scroll-margin-top: 96px;
}
@media (max-width: 980px){
  #top,#leistungen,#pakete,#ablauf,#faq,#kontakt,#abo,#audit-anfrage{
    scroll-margin-top: 84px;
  }
}

/* Ensure toast never blocks footer links when hidden */
.toast[hidden]{display:none !important;}

/* Leistungs-Karten: gleiche H?he + Meta unten fixiert */
.cards{
  align-items: stretch; /* alle Grid-Items gleich hoch */
}

.cards .card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Leistungs-Karten ? Meta-Bereich sauber nivellieren */
.cards .card__meta{
  margin-top: auto;
  min-height: 84px;           /* ggf. 72/84/96 anpassen */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Linie optisch entkoppeln */
.cards .card__meta::before{
  content:"";
  display:block;
  height:1px;
  background: rgba(255,255,255,.08);
  margin-bottom:10px;
}
/* Nur in den Leistungs-Cards: manuelle <br> deaktivieren */
.cards .card br{
  display: none;
}
.cards .card > p{
  flex: 1 1 auto;
}