/* home.css — Panzer IT Startseite (premium, cineastisch, mobile-first).
   Setzt auf base.css/components.css/animations.css auf (nur Tokens). */

/* ============================ HERO (full-bleed) ============================ */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:100svh; display:flex; align-items:center;
  padding-block:clamp(7rem,12vh,10rem) clamp(3rem,7vh,6rem);
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(20,22,25,.72) 0%, rgba(20,22,25,.55) 40%, rgba(20,22,25,.9) 100%),
    radial-gradient(circle at 78% 30%, rgba(184,115,51,.22), transparent 55%);
}
.hero__inner{ max-width:60rem; }
.hero .eyebrow{ display:inline-block; }
.hero h1{
  margin-top:var(--sp-2);
  font-size:clamp(2.6rem, 1.6rem + 5.4vw, 5.6rem);
  line-height:1.02; max-width:16ch;
}
.hero__lead{
  margin-top:var(--sp-3); max-width:52ch;
  color:var(--c-text); opacity:.92;
  font-size:clamp(1.1rem, 1rem + .5vw, 1.4rem);
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.hero__scroll{
  position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%);
  z-index:1; color:var(--c-muted); font-size:.8rem; letter-spacing:.2em;
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.hero__scroll span{ width:1px; height:2.4rem; background:linear-gradient(var(--c-copper),transparent); }

/* Große rotierende Hero-Deko */
.hero__deco{
  position:absolute; z-index:-1; pointer-events:none;
  width:min(70vw,780px); height:min(70vw,780px);
  top:50%; right:-16%; translate:0 -50%;
  opacity:.14;
}

/* ============================ Section-Grundlagen ============================ */
.section-head{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
.section-head h2{ margin-top:var(--sp-1); }
.section-head p{ color:var(--c-muted); margin-top:var(--sp-2); }
.section-center{ text-align:center; margin-inline:auto; }

/* ============================ Vertrauens-Leiste ============================ */
.trust{
  border-block:1px solid var(--c-line); background:var(--c-panel);
}
.trust__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--sp-3); padding-block:var(--sp-4);
}
.trust__item{ text-align:center; }
.trust__num{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.6rem,1.2rem+1.4vw,2.4rem); color:var(--c-copper);
}
.trust__label{ color:var(--c-muted); font-size:.9rem; margin-top:.2rem; }

/* ============================ Leistungen (Karten) ============================ */
.svc-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.svc-card{ display:flex; flex-direction:column; gap:.75rem; height:100%; }
.svc-card__icon{
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center; color:var(--c-copper);
  background:rgba(184,115,51,.12); border:1px solid var(--c-line);
}
.svc-card__icon svg{ width:26px; height:26px; }
.svc-card h3{ font-size:1.25rem; }
.svc-card p{ color:var(--c-muted); font-size:.96rem; }
.svc-card__more{
  margin-top:auto; color:var(--c-copper); font-family:var(--font-display);
  font-weight:600; font-size:.9rem;
}
.svc-card.svc-card--feature{ border-color:var(--c-copper); }
.svc-card__badge{
  align-self:flex-start; font-family:var(--font-display); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:#14110c;
  background:var(--c-copper); padding:.25em .7em; border-radius:999px;
}

/* ============================ Warum / USP ============================ */
.why-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.why-item{ display:flex; gap:var(--sp-2); }
.why-item__mark{
  flex:none; width:2.6rem; height:2.6rem; border-radius:10px;
  display:grid; place-items:center; color:var(--c-copper);
  border:1px solid var(--c-line); background:var(--c-panel);
  font-family:var(--font-display); font-weight:700;
}
.why-item h3{ font-size:1.1rem; }
.why-item p{ color:var(--c-muted); font-size:.92rem; margin-top:.25rem; }

/* ============================ Ablauf (Timeline) ============================ */
.steps{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(4,1fr);
}
.step{ position:relative; padding-top:var(--sp-3); }
.step::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--c-copper),transparent);
}
.step__num{
  font-family:var(--font-display); font-weight:700; color:var(--c-copper);
  font-size:1.5rem;
}
.step h3{ font-size:1.1rem; margin-top:.4rem; }
.step p{ color:var(--c-muted); font-size:.92rem; margin-top:.35rem; }

/* ============================ Referenzen (Testimonials) ============================ */
.quote-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.quote{ display:flex; flex-direction:column; gap:var(--sp-2); height:100%; }
.quote__mark{ color:var(--c-copper); font-family:var(--font-display); font-size:2.4rem; line-height:.6; }
.quote p{ font-size:1.02rem; }
.quote__author{
  margin-top:auto; color:var(--c-copper); font-family:var(--font-display);
  font-weight:600; font-size:.92rem;
}

/* ============================ Preis-Anker ============================ */
.pricing-grid{
  display:grid; gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.price-card{ position:relative; display:flex; flex-direction:column; gap:.5rem; }
.price-card--highlight{ border-color:var(--c-copper); }
.price-card__badge{
  position:absolute; top:-.8rem; left:var(--sp-4);
  font-family:var(--font-display); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:#14110c; background:var(--c-copper);
  padding:.25em .7em; border-radius:999px;
}
.price-card h3{ font-size:1.2rem; }
.price-card__price{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; }
.price-card__price small{ font-size:.85rem; color:var(--c-muted); font-weight:500; }
.price-card p{ color:var(--c-muted); font-size:.92rem; }
.price-card .btn{ margin-top:auto; }
.pricing-note{ color:var(--c-muted); font-size:.9rem; margin-top:var(--sp-3); text-align:center; }

/* ============================ CTA-Panel ============================ */
.cta-panel{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--c-panel);
  border-block:1px solid var(--c-line);
}
.cta-panel::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(184,115,51,.22), transparent 55%),
    radial-gradient(circle at 82% 80%, rgba(217,165,102,.14), transparent 50%);
}
.cta-panel__inner{
  position:relative; z-index:1; text-align:center;
  padding-block:clamp(3.5rem,7vw,6rem); max-width:44rem; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.cta-panel__inner p{ color:var(--c-muted); }

/* ============================ Responsive ============================ */
@media (max-width:860px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .trust__grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--sp-4); }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .hero__deco{ right:-40%; opacity:.1; }
  .hero__scroll{ display:none; }
}