/* ============================================================
   INTER Handwerker Service – Premium Layer
   Ergaenzende Styles fuer Scroll-Reveal, Parallax, Whitespace,
   Micro-Animationen, Nav-Glassmorphism und Section-Divider.
   Ueberschreibt / ergaenzt die inline-Styles der Einzelseiten.
   INTER Corporate Design bleibt unveraendert.
   ============================================================ */

/* ---------- WHITESPACE UPGRADE ---------- */
section{padding:96px clamp(24px,6vw,80px)}
.hero{padding:120px clamp(24px,6vw,80px) 96px}
.themen-grid{margin-top:56px}
h2{margin-bottom:20px}
.lead{line-height:1.8;margin-bottom:8px}
.ueber-grid{gap:72px}
.stats-grid{gap:16px;margin:32px 0 24px}
.gewerke-grid{margin-top:56px;gap:16px}
.faq-wrap{margin-top:56px}
.cta-box p{margin-bottom:40px;line-height:1.75}

/* ---------- NAV GLASSMORPHISM ---------- */
nav{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(212,218,227,.6);
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease;
  height:72px
}
nav.nav-scrolled{
  background:rgba(255,255,255,.97);
  box-shadow:0 4px 24px rgba(0,27,65,.10);
  border-bottom-color:transparent
}
nav.nav-scrolled .nav-logo img{transform:scale(.95);transition:transform .3s ease}

/* ---------- HERO PARALLAX ---------- */
.hero{
  --parallax-y:0px;
  position:relative;
  overflow:hidden
}
.hero::before{
  transform:translateY(calc(var(--parallax-y) * .15));
  transition:none;
  will-change:transform
}
.hero-grid{position:relative;z-index:1}

/* Hero content entrance */
.hero .hero-kicker,
.hero h1,
.hero .hero-sub,
.hero .hero-actions,
.hero .hero-trust,
.hero .hero-card{
  opacity:0;
  transform:translateY(28px);
  animation:hero-entrance .9s cubic-bezier(.16,1,.3,1) forwards
}
.hero h1{animation-delay:.1s}
.hero .hero-sub{animation-delay:.2s}
.hero .hero-actions{animation-delay:.3s}
.hero .hero-trust{animation-delay:.4s}
.hero .hero-card{animation-delay:.35s;transform:translateY(32px) scale(.97)}

@keyframes hero-entrance{
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(48px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1)
}
.reveal.revealed{
  opacity:1;
  transform:translateY(0)
}
.reveal-left{
  opacity:0;
  transform:translateX(-48px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1)
}
.reveal-left.revealed{
  opacity:1;
  transform:translateX(0)
}
.reveal-right{
  opacity:0;
  transform:translateX(48px);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1)
}
.reveal-right.revealed{
  opacity:1;
  transform:translateX(0)
}
.reveal-scale{
  opacity:0;
  transform:scale(.92);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),
             transform .85s cubic-bezier(.16,1,.3,1)
}
.reveal-scale.revealed{
  opacity:1;
  transform:scale(1)
}

/* Stagger delays for grid children */
.stagger-1{transition-delay:.08s}
.stagger-2{transition-delay:.16s}
.stagger-3{transition-delay:.24s}
.stagger-4{transition-delay:.32s}
.stagger-5{transition-delay:.40s}

/* ---------- CARD UPGRADE ---------- */
.thema-card{
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             box-shadow .4s ease,
             border-color .3s ease;
  position:relative;
  overflow:hidden
}
.thema-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--cosmic);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}
.thema-card:hover::before{transform:scaleX(1)}
.thema-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,27,65,.12)
}

/* Featured card accent */
.thema-card[style*="border-width:2px"]::before,
.thema-card.featured::before{
  background:var(--aurora);
  transform:scaleX(1)
}

/* ---------- BUTTON POLISH ---------- */
.btn-aurora{
  transition:filter .2s ease,transform .15s ease,box-shadow .2s ease;
  position:relative;
  overflow:hidden
}
.btn-aurora:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(222,220,0,.25)
}
.btn-aurora:active{
  transform:translateY(0);
  box-shadow:none
}
.btn-outline{
  transition:all .25s ease;
  position:relative
}
.btn-outline:hover{
  border-color:rgba(255,255,255,.6);
  color:var(--white);
  background:rgba(255,255,255,.06)
}
.btn-outline-dark{transition:all .25s ease}
.btn-outline-dark:hover{
  border-color:var(--cosmic);
  background:rgba(0,27,65,.03)
}

/* Link underline animation */
.thema-link{
  transition:border-color .25s ease,background .25s ease,color .25s ease;
  position:relative
}
.thema-link:hover{
  border-color:var(--cosmic);
  background:rgba(0,27,65,.03)
}

/* ---------- GEWERK CARDS ---------- */
.gewerk{
  transition:background .35s ease,border-color .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
  position:relative;
  overflow:hidden
}
.gewerk::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:var(--aurora);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}
.gewerk:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.1);
  border-color:rgba(222,220,0,.45)
}
.gewerk:hover::after{transform:scaleX(1)}

/* ---------- FAQ POLISH ---------- */
.faq{
  transition:border-color .25s ease,box-shadow .25s ease
}
.faq:hover{
  border-color:rgba(0,27,65,.2);
  box-shadow:0 2px 12px rgba(0,27,65,.06)
}
.faq-q{transition:color .2s ease}
.faq-q::after{
  transition:transform .3s cubic-bezier(.16,1,.3,1),color .2s ease
}
.faq.open{
  border-color:var(--cosmic);
  box-shadow:0 4px 16px rgba(0,27,65,.08)
}
.faq.open .faq-q{color:var(--cosmic)}
.faq-a{
  animation:faq-expand .35s cubic-bezier(.16,1,.3,1)
}
@keyframes faq-expand{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* FAQ tabs polish */
.faq-tab{
  transition:all .25s cubic-bezier(.16,1,.3,1)
}
.faq-tab:hover:not(.active){
  background:var(--g50);
  border-color:var(--cosmic);
  color:var(--cosmic)
}

/* ---------- STAT COUNTERS ---------- */
.stat{
  transition:transform .3s ease,box-shadow .3s ease;
  position:relative;
  overflow:hidden
}
.stat:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,27,65,.08)
}
.stat-num{
  transition:color .3s ease
}

/* ---------- SIEGEL BAND ---------- */
.siegel-track img{
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .3s ease
}
.siegel-track img:hover{
  transform:translateY(-5px) scale(1.04)
}

/* ---------- HISTORIE STRIP ---------- */
.historie-year{
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease
}
.historie-station:hover .historie-year{
  transform:scale(1.1);
  box-shadow:0 4px 20px rgba(222,220,0,.3)
}

/* ---------- HERO CARD GLASSMORPHISM ---------- */
.hero-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:background .3s ease,border-color .3s ease
}
.hero-card:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2)
}

/* ---------- SECTION DIVIDERS ---------- */
.section-divider{
  position:relative
}
.section-divider::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  width:60px;height:3px;
  background:var(--aurora);
  border-radius:2px
}

/* ---------- KICKER UPGRADE ---------- */
.kicker{
  transition:background .3s ease;
  letter-spacing:1.2px
}

/* ---------- UEBER-IMG POLISH ---------- */
.ueber-img{
  position:relative;
  overflow:hidden;
  border-radius:12px
}
.ueber-img::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(0,27,65,.08);
  pointer-events:none
}
.ueber-img img{
  transition:transform .6s cubic-bezier(.16,1,.3,1)
}
.ueber-img:hover img{
  transform:scale(1.03)
}

/* ---------- SMOOTH SCROLL OVERRIDE ---------- */
html{
  scroll-behavior:smooth;
  scroll-padding-top:80px
}

/* ---------- CTA SECTION UPGRADE ---------- */
.cta-section{
  position:relative;
  overflow:hidden
}
.cta-section::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(222,220,0,.06),transparent 70%);
  pointer-events:none
}
.cta-section::after{
  content:'';
  position:absolute;
  bottom:-30%;left:-10%;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(222,220,0,.04),transparent 70%);
  pointer-events:none
}
.cta-box{position:relative;z-index:1}

/* ---------- FOOTER POLISH ---------- */
footer{
  padding:40px clamp(24px,6vw,80px)
}

/* ---------- ENTITY STATEMENT ---------- */
.entity-statement{
  padding:32px 0;
  position:relative
}
.entity-statement::before{
  content:'';
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:40px;height:40px;
  border:2px solid var(--border);
  border-radius:50%;
  opacity:.3
}

/* ---------- CAROUSEL SECTION ---------- */
.carousel-section{
  padding:22px 0 24px
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-left,.reveal-right,.reveal-scale{
    opacity:1;
    transform:none;
    transition:none
  }
  .hero .hero-kicker,
  .hero h1,
  .hero .hero-sub,
  .hero .hero-actions,
  .hero .hero-trust,
  .hero .hero-card{
    opacity:1;
    transform:none;
    animation:none
  }
  .hero::before{transform:none}
  .carousel-track,.siegel-track{animation:none}
}

/* ---------- MOBILE REFINEMENTS ---------- */
@media(max-width:880px){
  section{padding:72px clamp(20px,5vw,48px)}
  .hero{padding:100px clamp(20px,5vw,48px) 72px}
  .ueber-grid{gap:40px}
}
@media(max-width:560px){
  section{padding:56px 20px}
  .hero{padding:88px 20px 56px}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}
}