/* AC / DC PLANUNG · Startseite — Layout nach Referenz sewamo.de */

/* ---------- Hero ---------- */
.hero{position:relative;display:grid;grid-template-rows:1fr;align-items:center;min-height:min(100svh,880px);isolation:isolate;overflow:hidden;background:var(--blue-950);color:#fff}
.hero__media{grid-row:1;grid-column:1}
.hero > .wrap{grid-row:1;grid-column:1}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hero__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,13,16,.94) 0%,rgba(12,13,16,.82) 38%,rgba(12,13,16,.5) 66%,rgba(12,13,16,.28) 100%),linear-gradient(180deg,rgba(12,13,16,.3),rgba(12,13,16,.62))}
.hero__title,.hero__lead,.hero__kicker,.hero__note{text-shadow:0 2px 22px rgba(12,13,16,.6),0 1px 2px rgba(12,13,16,.5)}
.hero .wrap{display:block;width:100%;align-self:center}
.hero__inner{position:relative;display:grid;align-content:center;gap:1.4rem;padding-block:clamp(6rem,14svh,9rem) clamp(7rem,16svh,10rem);max-width:900px}
.hero__kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--fs-sm);font-weight:600;letter-spacing:.16em;line-height:1.4;text-transform:uppercase;color:#fff;margin-bottom:.2rem}
.hero__kicker::before{content:"";width:26px;height:2px;background:var(--orange-3);border-radius:2px}
.hero__title{color:#fff;font-size:var(--fs-display);font-weight:var(--w-display);line-height:.95;letter-spacing:-.035em;margin:0}
.hero__word{display:inline-block;color:#fff;transition:opacity .42s var(--ease), transform .42s var(--ease)}
.hero__word.is-out{opacity:0;transform:translateY(6px)}
.hero__lead{max-width:46ch;color:#fff;font-size:var(--fs-lead);line-height:1.6;margin:0}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.5rem}
.hero__note{color:rgba(255,255,255,.85);font-size:var(--fs-sm);margin:.25rem 0 0}
.hero .hero__dots{position:absolute;left:0;right:0;bottom:clamp(1.75rem,4svh,2.75rem);display:flex;align-items:center;gap:1.5rem;z-index:2;justify-content:flex-start}
.hero__pause{width:auto;flex:none}
.hero__bar{display:flex;gap:.6rem}
.hero__bar i{display:block;width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.hero__bar i::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left}
.hero__bar i.is-active::after{transform:scaleX(1);transition:transform 3.6s linear}
.hero.is-paused .hero__bar i.is-active::after{transition:none;transform:scaleX(.5)}
.hero__pause .ic-play{display:none}
.hero__pause svg{width:12px;height:12px}
.hero.is-paused .hero__pause .ic-pause{display:none}
.hero.is-paused .hero__pause .ic-play{display:block}
@media (max-width:760px){
  .hero{min-height:min(94svh,720px)}
  .hero__inner{padding-block:5rem 7rem;gap:1.1rem}
  .hero__actions{display:grid;gap:.75rem}
  .hero__actions .btn{width:100%}
  .hero__dots{gap:1rem}
  .hero__bar i{width:26px}
}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split__copy .lead{margin:0 0 1.4rem}
.split__copy .chips-check{margin:0 0 2rem}
.split__copy h2{margin:0 0 1.1rem;max-width:18ch}
.bild--4x5{aspect-ratio:4/5;max-width:520px;justify-self:end;width:100%}
.split--facts{align-items:start}
.split--facts .facts-card{max-width:520px;justify-self:end;width:100%;margin-top:.5rem}
@media (max-width:960px){.split{grid-template-columns:1fr;gap:2.25rem}.bild--4x5,.split--facts .facts-card{justify-self:start;max-width:none}.bild--4x5{max-width:520px}}

/* ---------- Lebenszyklus ---------- */
.rows__actions{margin-top:2rem}

/* ---------- Leitsatz-Band ---------- */
.band__grid{display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:2rem 4rem;align-items:center}
.band__title{font-size:clamp(1.75rem,1.2rem + 2.2vw,2.75rem);font-weight:var(--w-display);line-height:1.15;letter-spacing:-.024em;margin:0;max-width:26ch;color:var(--orange-ink)}
.band__grid--cta h2{margin:0 0 .9rem;max-width:18ch}
.band__grid--cta p{margin:0;max-width:54ch;font-size:var(--fs-lead)}
.band__grid--cta p a{color:var(--ink);text-decoration-color:rgba(180,72,11,.4)}
.band__grid--cta p a:hover{color:var(--orange-3)}
@media (max-width:860px){.band__grid{grid-template-columns:1fr}}

.band__text{margin:.8rem 0 0;max-width:56ch;font-size:var(--fs-lead);color:var(--ink-2)}
.band__grid--cta .btn-row{justify-content:flex-end}
@media (max-width:860px){.band__grid--cta .btn-row{justify-content:flex-start}}

/* ---------- Hero-Chip (nach cogswell) ---------- */
.hero__chip{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:clamp(1.75rem,4svh,2.75rem);width:min(480px,86vw);display:flex;align-items:center;gap:.8rem;background:#fff;color:var(--ink);border-radius:18px;padding:.8rem 1.1rem .8rem .8rem;box-shadow:0 24px 60px rgba(12,13,16,.28);text-decoration:none;transition:transform .32s var(--ease-out), box-shadow .32s var(--ease)}
.hero__chip:hover{transform:translate(-50%,-3px);box-shadow:0 30px 70px rgba(12,13,16,.32);color:var(--ink)}
.hero__chip .ic{width:40px;height:40px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;flex:none}
.hero__chip .ic svg{width:18px;height:18px}
.hero__chip .txt{display:flex;flex-direction:column;min-width:0}
.hero__chip .txt b{font-size:.95rem;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.hero__chip .txt small{font-size:.78rem;color:var(--ink-dim);margin-top:.15rem;font-weight:500}
.hero__chip .arr{margin-left:auto;font-weight:600;color:var(--ink-dim)}
.hero .hero__dots{justify-content:flex-start;width:auto;left:0;right:auto}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;justify-content:flex-end}
  .hero > .wrap{flex:1;display:grid;align-content:center}
  .hero__inner{padding-bottom:1.5rem}
  .hero__chip{position:static;transform:none;width:calc(100% - 2*var(--gutter));margin:0 var(--gutter) 1rem}
  .hero__chip:hover{transform:translateY(-3px)}
  .hero .hero__dots{position:static;padding-bottom:1.5rem}
}
/* ---------- CTA zentriert (nach cogswell) ---------- */
.cta-center{text-align:center;padding-block:clamp(5rem,9vw,8.5rem);background:var(--orange)}
.cta-center h2{margin:0 auto 1rem;max-width:18ch;font-size:clamp(2.1rem,1.2rem + 3.6vw,4rem)}
.cta-center p{margin:0 auto 2rem;max-width:56ch;font-size:var(--fs-lead)}
.cta-center p a{color:var(--ink);text-decoration-color:rgba(180,72,11,.4)}
.cta-center .btn-row{justify-content:center}


/* ---------- Kompakter ---------- */
.hero{min-height:min(84svh,760px)}
.hero__inner{padding-block:clamp(4.5rem,10svh,6.5rem) clamp(6rem,13svh,8rem);gap:1.1rem}
.section{padding-block:clamp(3.5rem,6vw,6rem)}
.section-head,.bento-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.rows .row{padding:1.2rem 0}
.rows__actions{margin-top:1.5rem}
@media (min-width:641px){.uc-tile{aspect-ratio:4/5}}
@media (max-width:640px){.uc-tile{aspect-ratio:4/3}}
.cta-center{padding-block:clamp(4rem,7vw,6.5rem)}
.band{padding-block:clamp(3rem,5vw,4.5rem)}
.split{gap:clamp(2rem,5vw,4.5rem)}
.bild--4x5{max-width:460px}
@media (max-width:960px){.split{grid-template-columns:minmax(0,1fr)}.bild--4x5{max-width:100%;justify-self:stretch}}

/* Hero: dezenter Parallax über Scroll-Timeline, nur wo unterstützt */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .hero__media video{animation:heroParallax linear both;animation-timeline:scroll();animation-range:0 100vh;will-change:transform}
    @keyframes heroParallax{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.04) translateY(10%)}}
    .hero__inner{animation:heroFade linear both;animation-timeline:scroll();animation-range:0 70vh}
    @keyframes heroFade{to{opacity:.15;transform:translateY(-24px)}}
  }
}
/* Wechselwort: kurzer Abgang, weicher Eintritt */
.hero__word{transition:opacity .42s var(--ease-out), transform .42s var(--ease-out)}
.hero__word.is-out{opacity:0;transform:translateY(-6px);transition:opacity .16s var(--ease-out), transform .16s var(--ease-out)}
.hero__word.is-in{opacity:0;transform:translateY(8px);transition:none}

@media (prefers-reduced-motion: reduce){
  .hero__word{transition:opacity .2s var(--ease)}
  .hero__word.is-out{transform:none}
  .hero__media video{display:none}
}

/* Hero clean: kräftigere Abdunklung links und unten, damit Text auf hellen Szenen lesbar bleibt */
.hero__shade{background:linear-gradient(90deg,rgba(12,13,16,.97) 0%,rgba(12,13,16,.9) 38%,rgba(12,13,16,.6) 68%,rgba(12,13,16,.38) 100%),linear-gradient(180deg,rgba(12,13,16,.35) 0%,rgba(12,13,16,.15) 40%,rgba(12,13,16,.7) 100%)}
.hero__media video{filter:brightness(.72) saturate(.9)}
.hero__title,.hero__lead,.hero__note,.hero__kicker{text-shadow:0 1px 2px rgba(0,0,0,.35),0 8px 30px rgba(0,0,0,.25)}
.hero__inner{padding-bottom:clamp(4rem,10svh,6.5rem)}
.hero__chip,.hero__dots{display:none}

/* ---------- Leistungen als reines Foto-Bento mit wechselnden Breiten ---------- */
.bento--photos{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(300px,auto)}
.bento--photos .tile--photo{min-height:300px}
.bento--photos .tile--w2{grid-column:span 2}
.bento--photos .tile--photo h3{font-size:clamp(1.35rem,1rem + 1.1vw,1.9rem)}
.bento--photos .tile--w2 h3{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.bento--photos .tile__body p{max-width:44ch}
@media (max-width:1100px){.bento--photos{grid-template-columns:1fr 1fr}.bento--photos .tile--w2{grid-column:span 2}}
@media (max-width:640px){.bento--photos{grid-template-columns:1fr}.bento--photos .tile--w2{grid-column:auto}.bento--photos .tile--photo{min-height:0;aspect-ratio:5/4}.bento--photos .tile--photo::before{background:linear-gradient(180deg,rgba(20,20,22,.08) 10%,rgba(20,20,22,.6) 52%,rgba(20,20,22,.92) 100%)}}
/* ---------- Ablauf als Schritt-Karten mit Foto ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.step-card{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-xl);overflow:hidden;padding:0 1.35rem 1.5rem;color:var(--ink);box-shadow:var(--shadow-xs)}
.step-card__img{margin:0 -1.35rem 1.2rem;aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--surface-2)}
.step-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-zoom) var(--ease-out)}
.step-card__no{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;color:var(--orange-ink);margin-bottom:.5rem}
.step-card h3{color:var(--ink);font-size:1.15rem;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0 0 .5rem}
.step-card p{color:var(--ink-dim);font-size:var(--fs-sm);line-height:1.6;margin:0}
@media (hover:hover) and (pointer:fine){.step-card:hover .step-card__img img{transform:scale(1.04)}}
@media (max-width:1000px){.steps-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.steps-grid{grid-template-columns:1fr}}
/* ---------- Standort als Bildkarte ---------- */
.loc-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.loc-card__img{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.loc-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.loc-card__img figcaption{position:absolute;left:1rem;bottom:1rem;background:#fff;border-radius:12px;padding:.6rem .85rem;display:grid;gap:.1rem;box-shadow:var(--shadow-md)}
.loc-card__img figcaption strong{font-size:.95rem;font-weight:600;color:var(--ink)}
.loc-card__img figcaption span{font-size:.78rem;color:var(--ink-mute)}
.loc-card__facts{padding:.4rem 1.4rem .6rem}
.loc-card__facts .fact{padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.loc-card__facts .fact:last-child{border-bottom:0}
.loc-card__facts .fact h3{font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;margin:0 0 .3rem;color:var(--ink)}
.loc-card__facts .fact p{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-dim)}

/* Ablauf: ein ruhiger Textlink statt zweiter Button-Reihe */
.rows__link{margin-top:1.75rem}
.rows__link .link-arrow{color:var(--ink);font-size:var(--fs-base);text-decoration:none}
.rows__link .link-arrow:hover{color:var(--orange-3)}