@import url("/assets/base.css");
@import url("/assets/referenz-detail.css");
@import url("/assets/referenz-qa.css");
@import url("/assets/hero-wireframe.css");

/* =========================================================================
   360Web Layout rhythm layer
   Base visual system: /assets/base.css
   ========================================================================= */

h1{font-size:clamp(2.3rem,4.9vw,4.6rem)}

.page-hero{padding:clamp(52px,5vw,72px) 0 clamp(48px,4.5vw,66px)}
.page-hero .eyebrow{margin:0 0 14px}
.page-hero h1 + .lead,
.page-hero h1 + p:not(.eyebrow){margin-top:20px}
.page-hero .lead{margin-bottom:0}
.page-hero .lead + .btn{margin-top:24px}
.page-hero .hero-actions{margin:24px 0 0}
.page-hero-grid{gap:clamp(40px,4.5vw,64px)}

.section{padding:clamp(68px,6.5vw,96px) 0}
.section-head{margin-bottom:clamp(30px,3.2vw,40px)}
.section-head .eyebrow{margin:0 0 13px;color:var(--brand);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.section.dark .section-head .eyebrow{color:#87b2ff}
.section-head h2 + p:not(.eyebrow),
.section-head h2 + .lead{margin-top:17px}
.section-head p:last-child{margin-bottom:0}
.section-head > p:not(.eyebrow) + .btn{margin-top:20px}

.card h3 + p,
.article-card h3 + p,
.process-card h3 + p,
.benefit h3 + p,
.industry-card h3 + p,
.reference-card h3 + p,
.signal-card h3 + p,
.branch-row h3 + p,
.contact-card h3 + p,
.compare-grid h3 + p{margin-top:10px}

.card p:last-child,
.article-card p:last-child,
.process-card p:last-child,
.benefit p:last-child,
.industry-card p:last-child,
.reference-card p:last-child,
.signal-card p:last-child,
.branch-row p:last-child,
.contact-card p:last-child{margin-bottom:0}

.step h3 + p{margin-top:8px}
.compare-grid h3 + ul,
.check-panel h3 + ul,
.pricing-note h3 + ul{margin-top:12px}

.cta-panel .eyebrow{margin-bottom:12px}
.cta-panel h2 + p{margin-top:15px}
.footer-cta .eyebrow{margin-bottom:12px}
.footer-cta h2 + p{margin-top:12px}
.article-body h2 + p{margin-top:14px}
.article-body h3 + p{margin-top:10px}
.section-head p.eyebrow{font-size:.72rem;color:var(--brand)}
.section.dark .section-head p.eyebrow{color:#87b2ff}

/* =========================================================================
   Stable sticky header.
   The dark service line is visible only at the top. When scrolling, the whole
   header moves up by exactly the service-line height while the navigation keeps
   a constant height and typography. Because no layout dimensions change at the
   scroll threshold, the header cannot enter the previous scroll-jitter loop.
   ========================================================================= */
:root{--topbar-height:36px;--nav-height:78px}
html{scroll-padding-top:var(--nav-height)}

.site-header{
  top:0;
  z-index:101;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transform:translateY(0);
  will-change:transform;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;
}
.site-header::before{content:"";display:block;height:var(--topbar-height);background:var(--dark)}
.site-header.is-scrolled{transform:translateY(calc(-1 * var(--topbar-height)));background:rgba(255,255,255,.98);box-shadow:var(--shadow-sm)}

.nav-wrap{position:relative;height:var(--nav-height);gap:clamp(12px,1.6vw,26px)}
.nav-wrap::before,
.nav-wrap::after{
  position:absolute;
  top:calc(-1 * var(--topbar-height));
  height:var(--topbar-height);
  display:flex;
  align-items:center;
  font-family:var(--body);
  font-size:12.5px;
  line-height:1;
  color:var(--on-dark);
  white-space:pre;
  pointer-events:none;
  opacity:1;
  transition:opacity .12s ease;
}
.nav-wrap::before{content:"Digitalagentur und IT Partner aus Düsseldorf";left:0;color:#fff;font-weight:600}
.nav-wrap::after{content:"Antwort in 24 Stunden   |   hallo@360web.info   |   +49 211 92415902";right:0;font-weight:400}
.site-header.is-scrolled .nav-wrap::before,
.site-header.is-scrolled .nav-wrap::after{opacity:0}

.brand{align-items:baseline;gap:0;font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--text)}
.brand-mark{display:inline;width:auto;height:auto;margin:0;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--text);font-weight:700}
.brand-mark::after{content:none!important}
.brand>span:last-child{color:var(--muted-2);font-weight:400;text-transform:capitalize}
.site-footer .brand{color:#fff}
.site-footer .brand-mark{color:#fff}
.site-footer .brand>span:last-child{color:var(--on-dark-2)}

.desktop-nav{gap:clamp(8px,1vw,17px);font-size:15px;font-weight:500}
.desktop-nav>a,
.nav-mega-trigger>a{position:relative;padding:6px 0;color:var(--text-2);transition:color .2s ease}
.desktop-nav>a::after,
.nav-mega-trigger>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.desktop-nav>a:hover,
.desktop-nav>a.active,
.nav-mega-trigger>a:hover,
.nav-mega-trigger>a.active{color:var(--text)}
.desktop-nav>a:hover::after,
.desktop-nav>a.active::after,
.nav-mega-trigger>a:hover::after,
.nav-mega-trigger>a.active::after{transform:scaleX(1)}
.mega-grid a::after,.mega-cta::after{display:none!important}

@media(max-width:760px){
  h1{font-size:clamp(2.05rem,9vw,3.3rem)}
  .page-hero{padding:46px 0 54px}
  .page-hero h1 + .lead,
  .page-hero h1 + p:not(.eyebrow){margin-top:17px}
  .page-hero .lead + .btn{margin-top:21px}
  .page-hero .hero-actions{margin-top:21px}
  .section{padding:58px 0}
  .section-head{margin-bottom:28px}

  :root{--topbar-height:32px;--nav-height:66px}
  html{scroll-padding-top:var(--nav-height)}
  .nav-wrap{height:var(--nav-height)}
  .nav-wrap::before{display:none}
  .nav-wrap::after{content:"hallo@360web.info   ·   +49 211 92415902";left:0;right:0;justify-content:center;font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .site-header,.nav-wrap::before,.nav-wrap::after{transition:none}
}