/* ============================================================
   WEBDESIGN SUBPAGE — reuses tokens (--red, --font-display, ...) from
   style.css :root. "wdp-" prefix avoids colliding with the homepage's
   own ".wd-*" classes (its "Modernes Webdesign" block), which style.css
   still defines and which loads on this page too.
   ============================================================ */

/* Scoped override: only this page's nav becomes position:absolute (loads
   after style.css, so this wins). The homepage keeps position:fixed — its
   own hero logic depends on the nav floating transparently over a pinned
   canvas. Absolute here means the nav is out of the document flow (like
   fixed) but anchored to the page rather than the viewport, so it simply
   scrolls away with the page content — no JS, no jump, and (unlike
   relative) it takes no space, so the hero needs no compensating offset. */
nav{ position:absolute; top:0; left:0; right:0; background:transparent; }

/* ---------- HERO: single static photo, same overlay treatment as the
   homepage hero (.hero-overlay) for consistent legibility ---------- */
/* nav is position:absolute now — takes no space of its own, so the hero
   goes back to a plain 100vh with no offset; nav simply overlays it */
.wdp-hero{
  position:relative; height:100vh; overflow:hidden; background:#050505;
}
/* two stacked photos: the second (b) fades in over the first as the
   visitor scrolls, controlled by js/webdesign.js */
.wdp-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.wdp-hero-bg-b{ opacity:0; will-change:opacity; }

.wdp-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.35) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.5) 0%, transparent 30%);
}
/* fades the hero photo into solid black at the very bottom, so the seam
   with .wdp-intro's now-black top edge disappears */
.wdp-hero-fade{
  position:absolute; z-index:1;
  bottom:-1px;
  height:200px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  width:100%;
}
.wdp-hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 6vw;
}
.wdp-hero-kicker{
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  color:var(--white); margin-bottom:0;
}
/* same accent bar as the homepage hero's slogans, for the same reason:
   a plain coloured line under the kicker instead of relying on text colour
   alone against a busy photo */
.wdp-hero-accent{
  display:inline-block; width:70px; height:4px; background:var(--red);
  margin:22px 0;
}
.wdp-hero-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.01em; color:var(--white);
  font-size:clamp(2.4rem,6vw,4.8rem); max-width:16ch;
}

/* ---------- 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%,#B02440 55%,rgba(142,27,50,.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;
  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%,#B02440 55%,rgba(142,27,50,.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(--red); }

/* extra scroll room (6 segments) that drives which item is shown — the
   list itself stays pinned inside this taller wrapper while scrolling
   passes through it */
/* plain vertical list, all 6 items shown at once — the scroll-cycling
   version (sticky+420vh wrapper) was dropped, it wasn't rendering
   reliably */
.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:1rem; }
.wdp-why-list p{ margin-top:4px; color:#A8A8A8; font-size:.88rem; line-height:1.55; }

.wdp-why-branches{ display:flex; flex-wrap:wrap; gap:14px; margin-top:70px; }
.wdp-why-branches a{
  padding:12px 22px; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  color:var(--white); text-decoration:none; font-size:.85rem;
  transition:background .25s ease, border-color .25s ease;
}
.wdp-why-branches a:hover{ background:var(--red); border-color:var(--red); }

/* ---------- FAQ (light, accordion) — same pattern as videoproduktion.css ---------- */
.wdp-faq{ position:relative; background:var(--white); color:var(--black); padding:140px 6vw 130px; overflow:hidden; }
/* photo on a pseudo-element so it can fade in on its own, independent of
   the section's white background and the text above it — starts
   invisible, revealed via .is-visible (toggled in webdesign.js when the
   section scrolls into view). Same pattern as .rec-faq in recruiting.css. */
.wdp-faq::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  background-image:url('../img/webdesign-in-aachen.jpg');
  background-repeat:no-repeat;
  background-position:right center;
  background-size:cover;
  opacity:0;
  transition:opacity 3s ease;
}
.wdp-faq.is-visible::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .wdp-faq::before{ transition:none; opacity:1; }
}
/* gradient scrim (inline-styled div in the markup) sits between the photo
   and the content so the FAQ text stays legible over it */
/* left-aligned two-level heading, same construction as .wdp-lead elsewhere
   on the page — h2 title, h3 lead line with a red accent border */
.wdp-faq-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:calc(40% - 35px) calc(60% - 35px); gap:70px; align-items:start;
  padding-right:220px; /* keeps FAQ text clear of the photo on the right */
}
.wdp-faq-head{ text-align:left; }
.wdp-faq-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.05; color:var(--black);
}
/* outlined, the same treatment as .wdp-why-out */
.wdp-faq-out{ display:block; font-size:clamp(2.4rem,6vw,5.2rem); color:transparent; -webkit-text-stroke:2px var(--red); }
.wdp-faq-lead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.35;
  margin-top:20px; max-width:32ch; color:#3A3A3A;
  border-left:2px solid var(--red); padding-left:22px;
}
.wdp-faq-list{ max-width:none; }
.wdp-faq-item{ border-top:1px solid rgba(0,0,0,.14); }
.wdp-faq-item:last-child{ border-bottom:1px solid rgba(0,0,0,.14); }
.wdp-faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:26px 4px; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.3vw,1.15rem);
}
.wdp-faq-item summary::-webkit-details-marker{ display:none; }
.wdp-faq-toggle{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:400; color:var(--red);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.wdp-faq-item[open] .wdp-faq-toggle{
  background:var(--red); color:var(--white); border-color:var(--red);
}
/* symbol is a pseudo-element, not text, so it can swap cleanly on [open]
   instead of relying on a 45deg rotation to fake a × from a + */
.wdp-faq-toggle::before{ content:'+'; }
.wdp-faq-item[open] .wdp-faq-toggle::before{ content:'−'; }
.wdp-faq-item p{ padding:0 4px 30px; max-width:70ch; color:#4A4A4A; font-size:.98rem; line-height:1.8; }

/* ---------- CLOSING CTA ---------- */
.wdp-cta-section{
  position:relative; background:var(--black); 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:700; font-size:clamp(1.6rem,3.4vw,2.6rem); max-width:20ch; }
.wdp-cta-text em{ font-style:normal; color:var(--red); }

@media (max-width:1200px){
  .wdp-faq-grid{ padding-right:150px; }
}

@media (max-width:900px){
  .wdp-faq::before{ display:none; }
  .wdp-faq-grid{ grid-template-columns:1fr; gap:40px; padding-right:0; }
  .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. The old standalone .wdp-intro/.wdp-why section rules
   above are left in place but unused now (per request) — only the
   reusable component rules (.wdp-why-list, .wdp-check, .wdp-why-branches,
   .wdp-intro-cols etc.) are still referenced, now inside this new wrapper.
   ============================================================ */
.wdp-merge{
  position:relative;
  background:
    linear-gradient(180deg, #0C0C0C 0%, rgba(12,12,12,.7) 14%, rgba(12,12,12,0) 36%),
    radial-gradient(ellipse 95% 78% at 22% 78%,
      #C8546A 0%, #AE3350 20%, #8E1B32 44%, #691326 70%, #3A0A15 100%);
  padding:0 6vw 130px;
}
.wdp-merge-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start;
}
/* stays in view while the right column scrolls past it — nav on this page
   is position:absolute (out of flow), so there's nothing fixed competing
   for the top of the viewport; a small breathing-room offset is enough */
.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:#F0D2D9; }
.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; }