/* ============================================================
   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-Overlay dunkler als auf der Startseite: der mittlere Haltepunkt
   (45%) hat hier 0.55 statt 0.0 -- style.css definiert die Grundregel
   fuer alle Hero-Seiten, diese Ueberschreibung gilt bewusst nur hier
   (und auf /webdesign-mit-ki/, die dieselbe Datei laedt). */
.wdp-hero-overlay{
  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%);
}

/* Hero (.wdp-hero, .wdp-hero-pin, .wdp-hero-bg/-a/-b, .wdp-hero-fade,
   .wdp-hero-content, .wdp-hero-kicker, .wdp-hero-accent, .hero-title-1/2)
   lebt weiterhin nur in style.css. Einzige Ausnahme ist .wdp-hero-overlay
   direkt oben: die ist seit 08.09.2026 hier ueberschrieben (dunkler als
   auf der Startseite), zusammen mit dem Nav-Override die einzigen beiden
   seitenspezifischen Hero-Regeln in dieser Datei. */

/* ---------- 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:50ch; color:var(--glow);
  border-left:2px solid rgba(255,255,255,.75); padding-left:22px;
}
.wdp-intro-cols{
  display:block;
  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; }
/* Abstand zwischen den Absaetzen; frueher lieferte ihn der grid-gap. */
.wdp-intro-cols p + p{ margin-top:26px; }

/* ---------- 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); }

/* 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:var(--mist); 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; }
/* Hintergrundfoto (::before) entfernt 30.10.2026 – Bild existierte nicht,
   der Bereich bleibt weiss. */
/* 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 */
/* Hoehe kommt aus der von webdesign.js gemessenen und gesetzten Variable
   --wdp-faq-list-h (Hoehe von .wdp-faq-list) -- gibt dem sticky
   .wdp-robot-wrap darin Platz zum Rollen, bevor die Sektion endet.
   .wdp-faq-head selbst ist NICHT sticky. */
.wdp-faq-head{ text-align:left; min-height:var(--wdp-faq-list-h, auto); }
.wdp-faq-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:calc(40% - 35px) calc(60% - 35px); gap:70px;
  padding-right:220px; /* keeps FAQ text clear of the photo on the right */
}
/* .wdp-faq hat in style.css overflow:hidden (für den Hintergrund-Effekt
   auf den anderen Seiten) — das kappt jede sticky-Berechnung innerhalb,
   der Browser findet sonst keinen scrollenden Vorfahren und die Sticky-
   Position wirkt nie. Nur hier auf overflow:visible zurücksetzen, wo der
   Roboter das braucht; die Hintergrundgrafik (::before, inset:0) bleibt
   unabhängig davon exakt auf die Sektion begrenzt. */
.wdp-faq:has(.wdp-robot){ overflow:visible; }
/* .wdp-robot-wrap liegt bewusst verschachtelt in .wdp-faq-head (Vorgabe).
   HINWEIS (empirisch ermittelt, ausführlich isoliert getestet): position:sticky
   klebt in diesem Chromium (Stand 2026) NICHT für ein Element, das in einem
   GRID-ITEM verschachtelt ist -- .wdp-faq-head ist genau das (Grid-Item von
   .wdp-faq-grid). Die Regel unten bleibt trotzdem stehen (bewusste
   Struktur-Entscheidung), ist in dieser Verschachtelung aber wirkungslos:
   der Roboter scrollt stumpf mit statt zu kleben. */
.wdp-robot-wrap{ text-align:center; margin:30px 0; }
.wdp-robot-wrap:has(.wdp-robot){ position:sticky; top:40px; }
.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); -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word; }
.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: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(--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-robot-wrap{ position:static; }
  .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;
  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:1.5fr 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: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; }

/* ---------- KI-ROBOT (FAQ-Kopfbereich) — Ergaenzung weddesign, kein
   WST-Baustein (siehe --mist weiter oben in style.css). Reines Inline-
   SVG statt assets/img/ki.webp: erlaubt Ebenen (Kopf, Augen, Pupillen,
   Arme) einzeln per CSS/JS zu animieren. Verhalten in webdesign.js,
   guarded auf #wdp-robot -- siehe dort. ---------- */
.wdp-robot{
  width:100%; max-width:380px; aspect-ratio:1/1; display:inline-block; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .35s cubic-bezier(.2,.8,.3,1.2);
}
.wdp-robot:hover{ transform:scale(1.035); }
.wdp-robot-svg{ width:100%; height:100%; display:block; overflow:visible; }

/* jede bewegte Gruppe bekommt ihren eigenen Ursprungspunkt relativ zur
   eigenen Bounding-Box (fill-box), nicht zum SVG-Dokument */
.wdp-robot-jump, .wdp-robot-float, .wdp-robot-sway, .wdp-robot-head,
.wdp-robot-arm, .wdp-robot-eye, .wdp-robot-eyes, .wdp-robot-pupil,
.wdp-robot-shadow{
  transform-box:fill-box; will-change:transform;
}
.wdp-robot-jump  { transform-origin:50% 100%; }
.wdp-robot-float { transform-origin:50% 100%; animation:wdp-robot-float 3.6s ease-in-out infinite; }
.wdp-robot-sway  { transform-origin:50% 92%;  animation:wdp-robot-sway 6.4s ease-in-out infinite; }
/* Kopf/Koerper-Ausrichtung zum Cursor kommt per Inline-Transform aus
   webdesign.js (raf-Loop) -- die kurze Transition glaettet nur den
   letzten Schritt, keine eigene Keyframe-Animation noetig */
.wdp-robot-head { transform-origin:50% 96%; transition:transform .12s linear; }
.wdp-robot-lean { transition:transform .12s linear; }
.wdp-robot-eyes,
.wdp-robot-pupil{ transition:transform .12s linear; }
.wdp-robot-shadow{
  fill:var(--black); opacity:.13; transform-origin:50% 50%;
  animation:wdp-robot-shadow-pulse 3.6s ease-in-out infinite;
}

/* Schulter-Drehpunkt: der linke Arm wird von der Elterngruppe gespiegelt
   (scale(-1,1)), deshalb teilen sich beide denselben lokalen Ursprung */
.wdp-robot-arm-l{ transform-origin:14% 3%; animation:wdp-robot-arm 3.8s ease-in-out infinite; }
.wdp-robot-arm-r{ transform-origin:14% 3%; animation:wdp-robot-arm 3.8s ease-in-out infinite .4s; }

.wdp-robot-eye.is-blink{ animation:wdp-robot-blink .22s ease-in-out; }

/* Winken bei Hover oder Tap (.is-wave von webdesign.js bei Touch) */
.wdp-robot:hover .wdp-robot-arm-r,
.wdp-robot.is-wave .wdp-robot-arm-r{ animation:wdp-robot-wave .9s ease-in-out infinite; }

/* Huepfen bei Klick (.is-jump kurz von webdesign.js gesetzt) */
.wdp-robot.is-jump .wdp-robot-jump{ animation:wdp-robot-jump .62s cubic-bezier(.3,1.4,.5,1); }

@keyframes wdp-robot-float{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-16px) }
}
@keyframes wdp-robot-shadow-pulse{
  0%,100%{ transform:scale(1);   opacity:.13 }
  50%    { transform:scale(.88); opacity:.08 }
}
@keyframes wdp-robot-sway{
  0%,100%{ transform:rotate(-1.6deg) }
  50%    { transform:rotate(1.6deg) }
}
@keyframes wdp-robot-arm{
  0%,100%{ transform:rotate(-4deg) }
  50%    { transform:rotate(5deg) }
}
@keyframes wdp-robot-wave{
  0%   { transform:rotate(-2deg) }
  20%  { transform:rotate(-19deg) }
  40%  { transform:rotate(-7deg) }
  60%  { transform:rotate(-20deg) }
  80%  { transform:rotate(-8deg) }
  100% { transform:rotate(-2deg) }
}
@keyframes wdp-robot-blink{
  0%,100%{ transform:scaleY(1) }
  50%    { transform:scaleY(.06) }
}
@keyframes wdp-robot-jump{
  0%   { transform:translateY(0) scaleY(1) }
  25%  { transform:translateY(6px) scaleY(.94) }
  55%  { transform:translateY(-52px) scaleY(1.04) }
  80%  { transform:translateY(4px) scaleY(.97) }
  100% { transform:translateY(0) scaleY(1) }
}

@media (prefers-reduced-motion:reduce){
  .wdp-robot-float, .wdp-robot-sway, .wdp-robot-arm-l, .wdp-robot-arm-r,
  .wdp-robot-shadow, .wdp-robot:hover .wdp-robot-arm-r,
  .wdp-robot.is-jump .wdp-robot-jump{ animation:none !important; }
  .wdp-robot:hover{ transform:none; }
}