/* ============================================================
   HOME (startseite, index.html) — component classes the homepage needs
   from the shared "webdesign template" (Intro-Block, Warum-Liste,
   Merge-Sektion, Closing CTA). Split out von webdesign.css, das jetzt
   ausschliesslich /webdesign/ gehoert. Hero-Klassen (.wdp-hero, ...)
   liegen weiterhin in style.css und werden hier nicht dupliziert.
   ============================================================ */

/* Scoped override: nav wird auf dieser Seite position:absolute (laedt
   nach style.css, gewinnt also) — auf Wunsch, obwohl die urspruengliche
   Notiz in webdesign.css sagte, die Startseite brauche wegen ihrer
   Hero-Logik (Nav ueber gepinntem Canvas) eine fixe Nav. Falls die Nav
   beim Scrollen ueber dem Hero verschwindet/springt, liegt's daran. */
nav{ position:absolute; top:0; left:0; right:0; background:transparent; }

/* Zweite Overlay-Ebene, nur auf dieser Seite: liegt unsichtbar (opacity:0)
   ueber dem normalen .wdp-hero-overlay und wird per Klasse .is-active
   eingeblendet -- ausgeloest von webdesign.js, sobald Bild B vollstaendig
   uebergeblendet ist (opacity:1) UND der Nutzer eine Weile nicht weiter
   scrollt. Scrollt man aus dem Pin-Bereich zurueck, verschwindet die
   Klasse sofort wieder, die Ebene blendet ueber dieselbe Transition aus
   ("wird heller"). Eine zweite Ebene statt einer Aenderung am Verlauf von
   .wdp-hero-overlay selbst, weil sich mehrstufige Gradienten nicht
   zuverlaessig ueber alle Browser hinweg transitionieren lassen -- eine
   Opacity-Transition auf einem zweiten, fertig berechneten Verlauf schon. */
.wdp-hero-overlay-deep{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.75) 45%, rgba(5,5,5,0.35) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.6) 0%, transparent 30%);
  opacity:0;
  transition:opacity 2.4s ease;
}
.wdp-hero-overlay-deep.is-active{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .wdp-hero-overlay-deep{ transition:none; }
}


/* .wdp-lst bleibt auf dieser Seite weiss -- style.css definiert den
   Grundwert (--gray-light) fuer /webdesign/ und /webdesign-mit-ki/, hier
   ueberschrieben. Passend dazu die Rule-Zeile zurueck auf #6E6E6E: die
   dunklere #6A6A6A war nur noetig, weil sie in style.css direkt auf dem
   grauen Sektionsgrund lag (4.43:1) -- auf Weiss haelt #6E6E6E wieder
   5.10:1. .wdp-tut ist auf dieser Seite wieder --gray-light (siehe
   style.css), die beiden Sektionen setzen sich also weiterhin voneinander
   ab, nur wie vor dem 08.09.2026 mit vertauschten Farben. */
.wdp-lst{ background:var(--white); }
.wdp-lst-rule{ color:#6E6E6E; }

/* ---------- INTRO (red) — Komponentenklassen, liegen im .wdp-merge-Wrapper ---------- */
.wdp-intro-rule{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#E8E8E8 0%,#669900 55%,rgba(76,115,0,.35) 100%) 1;
  padding-bottom:14px; margin-bottom:80px;
}
.wdp-intro-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.98; letter-spacing:-.02em;
}
.wdp-l1{ display:block; font-size:clamp(1.8rem,3.6vw,3.2rem); }
.wdp-l2{ display:block; font-size:clamp(2.4rem,6vw,5.4rem); color:transparent; -webkit-text-stroke:2px var(--white); }
.wdp-lead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.35;
  margin-top:26px; max-width:32ch; color:var(--glow);
  border-left:2px solid rgba(255,255,255,.75); padding-left:22px;
}
.wdp-intro-cols{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
  margin-top:56px; padding-top:36px;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#E8E8E8 0%,#669900 55%,rgba(76,115,0,.35) 100%) 1;
}
.wdp-intro-cols p{ color:#FBEAEE; font-size:1rem; line-height:1.8; }

/* ---------- WHY WST (dark) — Komponentenklassen, liegen im .wdp-merge-Wrapper ---------- */
.wdp-why-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.05;
  margin-bottom:30px;
}
.wdp-why-head span{ display:block; }
.wdp-why-out{ color:transparent; -webkit-text-stroke:2px var(--glow); }

.wdp-why-list{ list-style:none; }
.wdp-why-list li{
  display:flex; align-items:flex-start; gap:20px; padding:60px 0;
  border-top:1px solid rgba(255,255,255,.14);
  /* scroll reveal via two classes (not inline styles) — .is-visible for
     the active item, .is-neighbour for the dimmed ones either side */
  opacity:0; transform:translateY(28px);
  transition:opacity 1.2s cubic-bezier(.2,.7,.2,1), transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.wdp-why-list li.is-visible{ opacity:1; transform:none; }
.wdp-why-list li.is-neighbour{ opacity:.1; transform:none; }
.wdp-why-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
@media (prefers-reduced-motion: reduce){
  .wdp-why-list li{ opacity:1; transform:none; transition:none; }
}
.wdp-why-list h3{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--glow); }
.wdp-why-list p{ margin-top:4px; color:var(--mist); font-size:.88rem; line-height:1.55; }

/* ---------- CLOSING CTA ---------- */
.wdp-cta-section{
  position:relative; background:radial-gradient(ellipse at 50% 50%, var(--red) 0%, var(--black) 45%); color:var(--white);
  padding:110px 6vw; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:34px;
}
.wdp-cta-text{
  font-family:var(--font-display); font-weight:900; font-size:clamp(1.6rem,3.4vw,3.6rem);
  max-width:30ch; text-transform:uppercase;
  background:linear-gradient(180deg, var(--white) 0%, var(--glow) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.wdp-cta-text em{ font-style:normal; color:var(--glow); }

@media (max-width:900px){
  .wdp-intro-cols{ grid-template-columns:1fr; gap:40px; }
  .wdp-why-list{ grid-template-columns:1fr; }
}

.wdp-check{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center;
}
.wdp-check svg{ width:30px; height:30px; }

/* ============================================================
   MERGED RED BLOCK — intro (left, sticky) + Warum WST (right, scrolls)
   in one section.
   ============================================================ */
.wdp-merge{
  position:relative;
  padding:0 6vw 130px;
}
/* Hintergrund (Verlauf) kommt aus der gemeinsamen .wdp-merge-Regel in
   style.css -- normaler, mitscrollender background, bewusst kein
   position:fixed/background-attachment:fixed (siehe Kommentar dort). */
.wdp-merge-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start;
}
.wdp-merge-left{ position:sticky; top:40px; }
.wdp-merge-right{ padding-top:0; }

/* on red, a red-on-red checkmark would vanish — invert to a white disc */
.wdp-merge-right .wdp-check{
  background:var(--white); color:var(--red);
}
.wdp-merge-right .wdp-why-list p{ color:var(--mist); }
.wdp-merge-right .wdp-why-list li{ border-top-color:rgba(255,255,255,.22); }

@media (max-width:900px){
  .wdp-merge-grid{ grid-template-columns:1fr; gap:50px; }
  .wdp-merge-left{ position:static; }
}

/* meta rule now sits above both columns, full width */
.wdp-merge > .wdp-intro-rule{ margin-bottom:60px; }