/* self-hosted fonts — no external requests to Google Fonts.
   Files uploaded to /neu/fonts/, referenced here relative to /neu/css/. */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/poppins-v24-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/poppins-v24-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/poppins-v24-latin-700.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/poppins-v24-latin-800.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/poppins-v24-latin-900.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}

:root{
    /* Markenfarben weddesign — Grün statt WST-Rot.
       Variablennamen absichtlich unverändert (--red…), damit das
       übernommene CSS 1:1 bleibt und Updates vergleichbar sind.
       Skala eine Stufe dunkler als das reine #99CC00 gewählt, weil
       weiße Schrift auf #669900 nur 3,43:1 erreicht — zu wenig.
       Weiß auf --red: 5,59:1 · auf --red-deep: 7,19:1              */
    --red: #4C7300;         /* Hauptfarbe, gefüllte Flächen mit weißer Schrift */
    --red-deep: #3F6100;    /* Hover auf gefüllten Flächen */
    --red-light: #669900;   /* Akzente, Linien, Schrift auf Dunkel */
    --glow: #99CC00;        /* Leuchtakzent, nur auf dunklem Grund */
    --black: #0C0C0C;
    --black-soft: #161616;
    --white: #FFFFFF;
    --gray-light: #EFEFEF;
    --text-mid: #9A9A9A;
    --mist: #F2F9E4;        /* helles Grün-Weiß, Ergänzung weddesign: Fließtext auf dunklem Grün-Verlauf (.wdp-merge) */
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', sans-serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  /* no overflow-x:hidden here — browsers propagate body overflow to the
     viewport, which breaks horizontal scrolling inside nested tracks */
  /* clips page-level horizontal overflow; the mobile swipe carousel below
     still scrolls fine on its own — nested overflow-x is independent of
     this. Removing this earlier (for a carousel bug that turned out to be
     unrelated) is what caused the ~120px page-wide horizontal scroll.
     overflow-x:clip statt hidden: hidden zwingt den Browser (weil
     overflow-y hier auf "visible" steht) dazu, overflow-y unbemerkt auf
     "auto" umzurechnen — body wird dadurch selbst zum Scroll-Container,
     und position:sticky in Kindelementen (z.B. .wdp-hero) bezieht sich
     dann auf dieses body statt auf den echten Viewport und pinnt nie.
     clip zaehlt nicht als Scroll-Container, loest also dasselbe optische
     Problem ohne diesen Nebeneffekt. */
  body{ font-family:var(--font-body); background:var(--black); color:var(--white); overflow-x:clip; }
  a{ text-decoration:none; }

  /* ---------- NAV ---------- */
  nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5vw;
    transition:opacity 0.3s ease;
  }
  nav{ pointer-events:auto; }
  .logo{ display:flex; align-items:center; }
  .logo img{ height:34px; width:auto; display:block; }
  .navlinks{
    display:flex; gap:2px; list-style:none; font-size:0.85rem; color:var(--white);
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:999px;
    padding:2px;
    backdrop-filter:blur(6px);
  }
  .navlinks li a{
    display:block; cursor:pointer;
    padding:8px 20px;
    border-radius:999px;
    color:inherit; text-decoration:none;
    transition:background-color .2s ease;
  }
  .navlinks li a:hover{ background-color:rgba(102,153,0,0.4); }
  .navlinks li a:active{ background-color:rgba(255,255,255,0.2); }
  /* active item glows: brand-red pill + soft red halo, replacing the flat
     white fill so it reads as the highlighted state rather than a hover */
  .navlinks li a.active{
    background-color:var(--red);
    box-shadow:0 0 0 1px rgba(76,115,0,.6), 0 0 16px rgba(76,115,0,.65);
  }

  /* ---- mobile: hamburger + slide-in panel ---- */
  .nav-burger{
    display:none; width:38px; height:38px; border:none; background:none;
    cursor:pointer; position:relative; z-index:51; flex-shrink:0;
  }
  .nav-burger span{
    position:absolute; left:8px; right:8px; height:2px; background:var(--white);
    border-radius:2px; transition:transform .3s ease, opacity .3s ease;
  }
  .nav-burger span:nth-child(1){ top:13px; }
  .nav-burger span:nth-child(2){ top:19px; }
  .nav-burger span:nth-child(3){ top:25px; }
  .nav-burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-burger.is-open span:nth-child(2){ opacity:0; }
  .nav-burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  @media (max-width:900px){
    .nav-burger{ display:block; }
    .navlinks{
      position:fixed; top:0; right:0; z-index:50;
      flex-direction:column; align-items:stretch; gap:6px;
      width:min(320px, 78vw); height:100vh;
      background:rgba(10,10,10,.98); backdrop-filter:blur(14px);
      border:none; border-radius:0; padding:96px 22px 26px;
      transform:translateX(100%);
      transition:transform .35s ease;
    }
    .navlinks.is-open{ transform:translateX(0); }
    .navlinks li a{ padding:14px 18px; font-size:1rem; }
    /* dims the page behind the open panel */
    .nav-scrim{
      position:fixed; inset:0; z-index:49; background:rgba(0,0,0,.5);
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .nav-scrim.is-open{ opacity:1; pointer-events:auto; }
  }

  /* ---- nav: "Digitale Lösungen" dropdown (für Bauunternehmen / Hosting) ---- */
  .nav-item-drop{ position:relative; }
  .nav-item-drop > a::after{ content:'▾'; display:inline-block; margin-left:5px; font-size:.6rem; opacity:.75; }
  /* invisible bridge over the gap between the pill and .nav-sub so the
     hover chain never breaks while the cursor travels down to it */
  .nav-item-drop::before{ content:''; position:absolute; left:0; right:0; top:100%; height:14px; }
  .nav-sub{
    list-style:none;
    position:absolute; top:calc(100% + 14px); left:50%;
    min-width:200px;
    background:rgba(10,10,10,.98); backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:8px;
    display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(-50%) translateY(-6px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
  }
  .nav-item-drop:hover .nav-sub,
  .nav-item-drop:focus-within .nav-sub{
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .nav-sub li a{
    display:block; padding:9px 16px; border-radius:10px;
    font-size:.82rem; white-space:nowrap;
    color:rgba(255,255,255,.85); text-decoration:none;
    transition:background-color .2s ease, color .2s ease;
  }
  .nav-sub li a:hover{ background-color:rgba(102,153,0,0.4); color:var(--white); }

  @media (max-width:900px){
    .nav-item-drop{ position:static; }
    .nav-item-drop > a::after{ opacity:.55; }
    .nav-sub{
      position:static; opacity:1; visibility:visible; pointer-events:auto;
      transform:none; background:none; backdrop-filter:none; border:none;
      padding:0 0 4px 14px; margin-top:2px;
    }
    .nav-sub li a{ padding:10px 18px; font-size:.9rem; color:rgba(255,255,255,.6); }
  }

  /* ---------- HERO ---------- */
  .hero-wrap{
    /* 5 pinned segments, one per cycling slogan */
    position:relative; height:400vh;
  }
  .hero{
    position:sticky; top:0; height:100vh; display:flex; align-items:center;
    overflow:hidden; background:#050505;
  }
  .hero-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; will-change:transform;
  }
  .hero-overlay{
    position:absolute; inset:0;
    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-glow{
    position:absolute; width:520px; height:520px; border-radius:50%;
    right:8%; top:20%;
    background:radial-gradient(circle, rgba(76,115,0,0.45), transparent 70%);
    filter:blur(30px);
    will-change:transform;
  }
  .hero-content{ position:relative; z-index:2; padding:0 6vw; width:100%; height:420px; }
  .slogan{
    position:absolute; left:6vw; right:6vw; top:0;
    opacity:0; will-change:transform, opacity;
    /* stacked on top of each other: an invisible slogan would still
       swallow the mouse, so only the active one is re-enabled by JS */
    pointer-events:none;
  }
  .hero .slogan-title{
    text-transform:uppercase;
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(3.6rem, 9vw, 7.5rem); line-height:1.02;
    letter-spacing:-0.01em;
    background:linear-gradient(150deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.55) 35%,
      rgba(255,255,255,0.85) 55%,
      rgba(255,255,255,0.4) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,0.25);
    text-shadow:0 8px 40px rgba(0,0,0,0.35);
    filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));
  }
  .hero .accent-line{
    display:inline-block; width:70px; height:4px; background:var(--red);
    margin:22px 0;
  }
  .hero p.sub{
    font-size:1.1rem; color:rgba(255,255,255,.9);
    font-weight:500; width:60%; max-width:none; line-height:1.55;
    will-change:transform, opacity;
  }
  .slogan-cta{
    margin-top:30px;
    will-change:transform, opacity;
  }
  /* Pill button, plain 2px brand-glow outline; fills with the same red on hover */
  .btn-outline-grad{
    display:inline-flex; align-items:center; gap:12px;
    padding:13px 30px;
    border:2px solid var(--glow);
    border-radius:999px;
    font-family:var(--font-body); font-size:.85rem; font-weight:500;
    color:var(--white); text-decoration:none;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(2px);
    transition:background .25s ease, gap .25s ease;
  }
  .btn-outline-grad span{ transition:transform .25s ease; }
  .btn-outline-grad:hover,
  .btn-outline-grad:focus-visible{ background:var(--red); gap:18px; }
  .btn-outline-grad:hover span,
  .btn-outline-grad:focus-visible span{ transform:translateX(4px); }

  .progress-dots{
    position:absolute; right:6vw; top:50%; transform:translateY(-50%); z-index:2;
    display:flex; flex-direction:column; gap:14px;
  }
  .progress-dots span{
    width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.25);
    transition:background 0.3s ease, transform 0.3s ease;
  }
  .progress-dots span.active{ background:var(--red); transform:scale(1.3); }
  /* skip link: jumps straight past the pinned hero to the second block */
  .scroll-cue{
    transition:opacity 0.4s ease;
    position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
    font-size:0.6rem; letter-spacing:3px; color:var(--text-mid);
    text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:8px;
  }
  .scroll-cue a{
    color:inherit; text-decoration:none;
    transition:color .25s ease;
  }
  .scroll-cue a:hover, .scroll-cue a:focus-visible{ color:var(--red); }
  .scroll-cue .line{ width:1px; height:34px; background:var(--text-mid); position:relative; overflow:hidden; }
  .scroll-cue .line::after{
    content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--red);
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }


  /* ---------- DIAGONAL RED INTRO ---------- */
  .intro{
    position:relative;
    /* Studio-backdrop glow built entirely from the brand red #4C7300:
       lighter tints toward the hot centre, darker shades toward the edges.
       A black band is kept at the very top so the seam with .intro-fade
       above still lines up. */
    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%,
        #648600 0%,    /* lightest tint  */
        #4F6A00 20%,
        #4C7300 44%,   /* brand base     */
        #2C3A00 70%,
        #171F00 100%); /* deepest shade  */
    padding:50px 6vw 210px;
    margin-top:-90px; z-index:20;
  }
  /* black-to-transparent veil that rides ABOVE the block, over the hero.
     It's a child of .intro, so it travels with it during the scroll animation. */
  .intro-fade{
    position:absolute; left:0; right:0; bottom:100%;
    height:var(--fade-h); pointer-events:none;
    background:linear-gradient(180deg, rgba(12,12,12,0) 0%, rgba(12,12,12,.55) 45%, rgba(12,12,12,.88) 75%, #0C0C0C 100%);
  }
  .intro{ --fade-h:200px; }
  /* dissolves the red block into the black section below; height stays
     under .intro's 210px bottom padding so it never touches the text */
  .intro-fade-bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:300px;
    z-index:0;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(10,10,10,0) 0%, #0A0A0A 100%);
  }
  /* portrait photo, top-right — no rosette anymore, just the picture.
     Starts fully transparent and fades in to 100% as .intro scrolls
     through the viewport; opacity is set by main.js (see .intro rosette
     scroll handler), this is only the resting/fallback state. */
  .intro-mark{
    position:absolute;
    right:90px;
    top:180px;
    width:300px;
    height:300px;
    object-fit:cover;
    border-radius:25px;
    z-index:0;
    opacity:0;
    pointer-events:none;
    transition:opacity .1s linear;
  }
  /* editorial rule with meta labels */
  .intro-rule,
  .intro-head,
  h2.intro-lead,
  .intro-cols,
  .intro-closing{ position:relative; z-index:1; }

  .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:96px;
  }
  /* the headline is the hero here: solid and outlined in one phrase */
  .intro-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  /* .5 is intentional here — the two lines are meant to sit close/overlap
     on desktop; kept only from 900px up so it doesn't collide on mobile */
  @media (min-width:901px){
    .intro-head{ line-height:.5; }
  }
  .intro-l1{ font-size:clamp(2.4rem,6.5vw,5.6rem); display:block; }
  .intro-dash{ color:var(--red); }
  .intro-wst{ color:var(--red); }
  .intro-l2{ font-size:clamp(3.2rem,10vw,8.8rem); display:block; }
  .intro-out{ color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.85); }
  /* solid, exactly like .intro-head — no separate treatment */
  .intro-serif{ font-size:clamp(3rem, 5vw, 5rem); line-height:clamp(1, 1.1vw, 1.05); }
  @media (max-width:900px){
    /* on mobile both lines read as one tight block, close in size — matches
       .intro-l1's own floor instead of shrinking independently */
    .intro-serif{ font-size:clamp(1.8rem, 4vw, 2rem); }
    .intro-mark{ right:16px; top:110px; width:120px; height:120px; }
    .intro-head{ line-height:.92; }
  }
  h2.intro-lead{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1.05rem,1.9vw,1.6rem); line-height:1.35;
    margin-top:64px; max-width:26ch; color:#FBEAEE;
    border-left:2px solid rgba(255,255,255,.5); padding-left:26px;
  }
  .intro-cols{
    /* uneven split: the first column leads, the second supports */
    display:grid; grid-template-columns:1.15fr .85fr; gap:80px;
    margin-top:100px; padding-top:44px;
    border-top:2px solid transparent;
    border-image:linear-gradient(90deg, #E8E8E8 0%, #669900 55%, rgba(76,115,0,.35) 100%) 1;
  }
  .intro-col-main p{
    font-size:clamp(1.1rem,1.5vw,1.4rem); line-height:1.65;
    color:#FBEAEE; max-width:40ch;
  }
  .intro-col-side p{
    font-size:clamp(.92rem,1.05vw,1rem); line-height:1.8;
    color:#B9D369; max-width:44ch;
  }

  /* services pulled out of the prose — parallel items, so icons earn their place */
  .intro-services{ list-style:none; margin-top:44px; }
  .intro-services li{
    display:flex; align-items:center; gap:18px;
    padding:18px 0;
    border-top:1px solid rgba(255,255,255,.18);
  }
  .intro-services li:last-child{ border-bottom:1px solid rgba(255,255,255,.18); }
  .svc-num{
    font-family:var(--font-body); font-size:.7rem; letter-spacing:.12em;
    color:rgba(255,255,255,.55); min-width:22px;
  }
  .intro-services svg{ width:26px; height:26px; flex-shrink:0; color:#C6DC86; }
  .intro-services svg *{ stroke-linecap:round; stroke-linejoin:round; }
  .svc-name{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.3vw,1.25rem);
  }

  .intro-region-lead{ margin-top:34px; }
  .intro-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
  .intro-tags a{
    display:inline-block;
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; padding:8px 14px;
    border:1px solid rgba(255,255,255,.35); border-radius:999px;
    color:rgba(255,255,255,.9); text-decoration:none;
    transition:background .25s ease, border-color .25s ease;
  }
  .intro-tags a:hover{
    background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7);
  }
  .intro-tags a.active{
    background-color: var(--black);
    border: 1px solid var(--black);
  }

  .intro-closing-row{
    display:flex; align-items:center; gap:26px; flex-wrap:wrap;
    margin-top:70px;
  }
  .intro-closing{
    position:relative; z-index:1;
    margin:0;
    /* a whole sentence: outlining it would make it unreadable, so it just
       moves to the display face like every other heading */
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.25;
    color:#FFF; max-width:22ch;
  }
  /* the sentence's own punctuation, not a separate call-to-action pill —
     same circle-arrow language as .foot-top and .sol-go elsewhere on the page */
  .intro-closing-arrow{
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; width:56px; height:56px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,.5); color:var(--white);
    text-decoration:none; font-size:1.3rem;
    transition:background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .intro-closing-arrow:hover, .intro-closing-arrow:focus-visible{
    background:var(--white); color:var(--red); border-color:var(--white);
    transform:translateX(5px);
  }

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

  /* ---------- VIDEO SECTION (dark, parallax bg) ---------- */
  .video-section{
    /* NO overflow:hidden here — it turns the section into a scroll
       container and kills position:sticky in the right column.
       clip-path already crops the section, and the moving background
       is contained by .video-bg-wrap instead. */
    position:relative; padding:0 6vw 190px;
    background:#0A0A0A; margin-top:0; z-index:2;
  }
  /* The section's own .video-bg is a moving gradient, so the colour right
     at the seam would drift as you scroll. This static cap keeps the top
     of the section at a flat #0A0A0A — the exact colour .intro fades to. */
  .video-bg-wrap{ position:absolute; inset:0; overflow:hidden; z-index:0; }
  .video-top-fade{
    position:absolute; left:0; right:0; top:0;
    height:280px; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,
      #0A0A0A 0%, #0A0A0A 35%, rgba(10,10,10,.6) 70%, rgba(10,10,10,0) 100%);
  }
  .video-bg{
    position:absolute; inset:-10%;
    background:
      radial-gradient(ellipse 60% 50% at 80% 60%, rgba(76,115,0,0.28), transparent 65%),
      linear-gradient(200deg,#0a0a0a,#1c1c1c 70%);
    will-change:transform;
  }
  /* ---- block 3 in the same editorial language as block 2 ---- */
  .video-inner{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 40%; gap:70px;
    align-items:start; padding-top:64px;
  }
  .video-content{ max-width:none; }

  .video-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,.55);
    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-top:0; margin-bottom:0;
    position:relative; z-index:2;
  }
  .video-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  .video-l1{ font-size:clamp(1.8rem,3.6vw,3.2rem); display:block; }
  .video-l2{ font-size:clamp(2.4rem,6vw,5.4rem); display:block; }
  @media (min-width:901px){
    /* "Videoproduktion" is the longest word among the block headlines —
       capped lower than the shared clamp above so it doesn't run wide */
    .video-l2{ font-size:4rem; }
  }
  /* outlined, the same treatment as .intro-out */
  .video-serif{ color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.85); }
  .video-lead{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.35;
    margin-top:44px; max-width:28ch; color:#F0F0F0;
    border-left:2px solid var(--red); padding-left:22px;
  }
  .video-p-main{
    margin-top:44px; max-width:48ch; color:#DADADA;
    font-size:clamp(1.02rem,1.35vw,1.22rem); line-height:1.7;
  }
  .video-p-side{
    margin-top:30px; max-width:52ch; color:#A8A8A8;
    font-size:clamp(.92rem,1.05vw,1rem); line-height:1.8;
  }

  .video-formats{ list-style:none; margin-top:34px; max-width:34ch; }
  .video-formats li{
    display:flex; align-items:center; gap:18px; padding:16px 0;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .video-formats li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
  .video-formats .svc-num{ color:rgba(255,255,255,.45); }
  .video-formats svg{ width:26px; height:26px; flex-shrink:0; color:var(--red); }
  .video-formats svg *{ stroke-linecap:round; stroke-linejoin:round; }
  .video-formats .svc-name{ color:var(--white); }

  /* the 80 % figure lifted out of the prose — a device block 2 doesn't use,
     so the two sections don't read as copies of each other */
  .video-stat{
    display:flex; align-items:flex-start; gap:28px;
    margin-top:54px; padding-top:30px;
    border-top:2px solid transparent;
    border-image:linear-gradient(90deg, #E8E8E8 0%, #669900 55%, rgba(76,115,0,.35) 100%) 1;
  }
  .stat-num{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(3.2rem,7vw,5.6rem); line-height:.85;
    color:var(--white); flex-shrink:0;
  }
  .stat-num i{ font-style:normal; font-size:.4em; color:var(--red); margin-left:4px; }
  .video-stat p{
    color:#A8A8A8; font-size:clamp(.92rem,1.05vw,1rem);
    line-height:1.8; max-width:38ch;
  }

  .video-tags{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
  .video-tags li{ display:contents; }
  .video-tags a{
    display:inline-block;
    font-family:var(--font-body); font-size:.68rem; letter-spacing:.1em;
    text-transform:uppercase; padding:8px 14px;
    border:1px solid rgba(255,255,255,.28); border-radius:999px;
    color:rgba(255,255,255,.85); text-decoration:none;
    transition:background .25s ease, border-color .25s ease;
  }
  .video-tags a:hover, .video-tags a:focus-visible{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.6); }

  .video-cta{ margin-top:44px; }

  /* travels with the text and stays until the block ends */
  .video-media{ position:sticky; top:80px; align-self:start; }
  /* ---- film strip beside the pinned video ---- */
  .film{
    position:relative; margin-top:14px;
    height:clamp(220px, 34vh, 380px);
    overflow:hidden; border-radius:6px;
    /* perforation suggested with thin marks rather than drawn literally */
    padding:0 14px;
    background:
      repeating-linear-gradient(180deg,
        rgba(255,255,255,.22) 0 7px, transparent 7px 20px) left  / 5px 100% no-repeat,
      repeating-linear-gradient(180deg,
        rgba(255,255,255,.22) 0 7px, transparent 7px 20px) right / 5px 100% no-repeat,
      rgba(255,255,255,.04);
  }
  /* fades top and bottom so frames enter and leave instead of being cut */
  .film::after{
    content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
    background:linear-gradient(180deg,
      #0A0A0A 0%, rgba(10,10,10,0.5) 16%,
      rgba(10,10,10,0.7) 84%, #0A0A0A 100%);
  }
  .film-track{
    display:flex; flex-direction:column; gap:8px;
    will-change:transform;
  }
  .film-track img{
    display:block; width:100%; aspect-ratio:16/9;
    object-fit:cover; border-radius:2px;
  }
  @media (max-width:900px){
    .film{ height:200px; }
  }

  /* 16/9 matches the source, so nothing gets cropped away */
  .video-media-frame{
    display:block; width:100%; aspect-ratio:16/9;
    object-fit:cover; border-radius:4px;
    background:#000;
  }

  @media (max-width:900px){
    .video-inner{ grid-template-columns:1fr; gap:48px; padding-top:48px; }
    .video-media{ position:relative; top:0; order:-1; }
    .video-media-frame{ aspect-ratio:16/9; }
    .video-stat{ flex-direction:column; gap:14px; }
  }

  /* ---------- SOLUTIONS (light gray, diagonal) ---------- */
  /* ---------- SOLUTIONS (light) ----------
     The page's one bright section: same editorial grammar as the dark blocks
     (meta rule, split headline, gradient line) but inverted, and with the
     three industries promoted from small buttons to full panels. */
  .solutions{
    position:relative; z-index:3;
    padding:150px 6vw 170px;
    color:var(--black);
    background:
      radial-gradient(ellipse 70% 60% at 85% 10%, rgba(76,115,0,.07), transparent 60%),
      var(--gray-light);
  }
  .sol-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:#666666;
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg, #1A1A1A 0%, #669900 55%, rgba(76,115,0,.25) 100%) 1;
    padding-bottom:14px; margin-bottom:80px;
  }

  .sol-top{
    display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:end;
  }
  .sol-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  .sol-l1{ font-size:clamp(1.8rem,3.6vw,3.2rem); display:block; }
  .sol-l2{ font-size:clamp(2.4rem,6vw,5.2rem); display:block; }
  /* outlined, the same treatment as .intro-out */
  .sol-serif{ color:transparent; -webkit-text-stroke:2px var(--red); }
  .sol-lead{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.35;
    border-left:2px solid var(--red); padding-left:22px; color:#1A1A1A;
  }
  .sol-intro p{
    margin-top:26px; max-width:46ch; color:#4A4A4A;
    font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.8;
  }

  .sol-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
    margin-top:96px;
  }
  /* Each panel is one large target that inverts to bordeaux on hover —
     the section's own device, not repeated anywhere else on the page. */
  .sol-card{
    position:relative; display:flex; flex-direction:column;
    min-height:300px; padding:34px 30px 30px;
    background:var(--white); color:var(--black); text-decoration:none;
    border:1px solid rgba(0,0,0,.09);
    transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
  }
  .sol-card:hover, .sol-card:focus-visible{
    background:var(--red); color:var(--white);
    border-color:var(--red); transform:translateY(-6px);
  }
  /* same construction as "Webdesign" in the webdesign block: bold uppercase
     Poppins drawn as an outline. Stroke is red here instead of white. */
  .sol-num{
    font-family:var(--font-display); font-weight:800; font-style:normal;
    font-size:3rem; line-height:1; letter-spacing:-.02em;
    color:transparent;
    -webkit-text-stroke:2px var(--red);
    transition:-webkit-text-stroke-color .3s ease;
  }
  /* on hover the card fills with bordeaux, so a red outline would disappear */
  .sol-card:hover .sol-num, .sol-card:focus-visible .sol-num{
    -webkit-text-stroke-color:rgba(255,255,255,.9);
  }
  /* number left, round photo right — the photo replaces the old line icon,
     which said the same thing less clearly */
  .sol-top-row{
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  }
  .sol-photo{
    flex-shrink:0; width:clamp(84px, 9vw, 116px); aspect-ratio:1;
    border-radius:50%; overflow:hidden;
    border:3px solid rgba(0,0,0,.12);
    transition:border-color .3s ease;
  }
  .sol-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
  .sol-card:hover .sol-photo, .sol-card:focus-visible .sol-photo{
    border-color:rgba(255,255,255,.5);
  }
  .sol-name{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.2;
    margin-top:auto; padding-top:34px;
  }
  .sol-go{
    display:flex; align-items:center; gap:10px;
    margin-top:16px; padding-top:16px;
    border-top:1px solid rgba(0,0,0,.1);
    font-size:.85rem; font-weight:500; color:#5A5A5A;
    transition:color .3s ease, border-color .3s ease, gap .3s ease;
  }
  .sol-go i{ font-style:normal; transition:transform .3s ease; }
  .sol-card:hover .sol-go, .sol-card:focus-visible .sol-go{
    color:var(--white); border-color:rgba(255,255,255,.35); gap:16px;
  }
  .sol-card:hover .sol-go i, .sol-card:focus-visible .sol-go i{ transform:translateX(4px); }

  @media (max-width:900px){
    .sol-top{ grid-template-columns:1fr; gap:40px; align-items:start; }
    .sol-grid{ grid-template-columns:1fr; gap:18px; }
    .sol-card{ min-height:0; }
  }

  /* ---------- WEBDESIGN (red, reference reel) ---------- */
  .webdesign{
    /* no overflow:hidden — it would turn the section into a scroll container
       and stop .wd-text from sticking, same trap as in the video block */
    position:relative;
    padding:150px 6vw 170px; z-index:4;
    background:
      radial-gradient(ellipse 70% 60% at 22% 78%, rgba(200,84,106,.55), transparent 62%),
      linear-gradient(160deg, #1F2900 0%, var(--red) 55%, #3F6100 100%);
  }
  .wd-inner{ position:relative; z-index:2; }

  .wd-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:70px;
  }

  .wd-grid{
    display:grid; grid-template-columns:1fr 42%; gap:70px; align-items:start;
  }
  /* stays put until every reference card has gone by */
  .wd-text{ position:sticky; top:80px; align-self:start; }

  .wd-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  .wd-l1{ font-size:clamp(1.8rem,3.6vw,3.2rem); display:block; }
  /* outlined, the way "Ihre" is set in the red block */
  .wd-l2{
    font-size:clamp(2.4rem,6vw,5.4rem); display:block;
    color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.85);
  }
  .wd-lead{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.35;
    margin-top:40px; max-width:28ch;
    border-left:2px solid rgba(255,255,255,.75); padding-left:22px;
  }
  .wd-p-main{
    margin-top:44px; max-width:52ch; color:#FBEAEE;
    font-size:clamp(1rem,1.3vw,1.18rem); line-height:1.8;
  }

  .wd-specs{
    list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
    gap:0 30px; margin-top:56px;
  }
  .wd-specs li{ padding-top:16px; border-top:1px solid rgba(255,255,255,.35); }
  .wd-spec-num{
    display:block; font-family:var(--font-body); font-size:.66rem;
    letter-spacing:.16em; color:rgba(255,255,255,.55); margin-bottom:8px;
  }
  .wd-spec-name{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(.9rem,1.1vw,1.05rem); color:var(--white);
  }
  .wd-cta{ margin-top:52px; border-color:#0A0A0A; }
  .wd-cta:hover, .wd-cta:focus-visible{ background:#0A0A0A; }

  /* ---- reference reel ---- */
  .wd-refs{
    position:relative;
    display:flex; flex-direction:column; gap:44px;
    padding-top:20px;
  }
  .wd-ref{ will-change:transform, opacity; }
  .wd-ref:nth-child(even){ margin-left:14%; }
  .wd-ref:nth-child(odd){ margin-right:10%; }
  /* 2:1 matches how website screenshots are shaped, so nothing gets cropped */
  .wd-ref img{
    display:block; width:100%; aspect-ratio:2/1;
    object-fit:cover; border-radius:6px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }

  @media (max-width:900px){
    .wd-grid{ grid-template-columns:1fr; gap:52px; }
    .wd-text{ position:static; }
    .wd-specs{ grid-template-columns:1fr; gap:0; }
    .wd-specs li{ margin-top:14px; }
    /* no drift on small screens: all six cards laid out two per row.
       JS-set opacity/transform are overridden with !important because the
       loop writes them as inline styles. */
    .wd-refs{
      display:grid; grid-template-columns:repeat(2,1fr);
      gap:20px; padding-top:0;
    }
    .wd-ref{ margin:0 !important; }
    .wd-ref[style]{ opacity:1 !important; transform:none !important; }
  }

  /* ---------- SERVICES (dark, alternating cards) ---------- */
  .services{
    position:relative; padding:170px 6vw 140px; background:var(--black);
    z-index:5;
  }
  .svc-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,.55);
    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:70px;
  }
  .svc-head-row{
    display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:end;
  }
  .svc-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  .svc-l1{ font-size:clamp(1.8rem,3.6vw,3.2rem); display:block; }
  .svc-l2{ font-size:clamp(2.4rem,6vw,5.2rem); display:block; }
  /* outlined, the same treatment as .intro-out */
  .svc-serif{ color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.85); }
  .svc-lead{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.35;
    border-left:2px solid var(--red); padding-left:22px;
  }
  .svc-intro p{
    margin-top:26px; max-width:48ch; color:#A8A8A8;
    font-size:clamp(.95rem,1.1vw,1.05rem); line-height:1.8;
  }

  .svc-track{ position:relative; }
  /* arrow row sits above the cards; shown only where the row becomes a
     swipe track (see media query) */
  .svc-nav-row{ display:none; gap:10px; justify-content:flex-end; margin-top:40px; }
  .svc-nav{
    width:44px; height:44px; border-radius:0;
    display:flex; align-items:center; justify-content:center;
    background:transparent; color:var(--white);
    border:1px solid rgba(255,255,255,.35);
    font-size:1.05rem; cursor:pointer;
    transition:background .25s ease, border-color .25s ease, opacity .25s ease;
  }
  .svc-nav:hover{ background:var(--red); border-color:var(--red); }
  .svc-nav[disabled]{ opacity:.25; pointer-events:none; }

  .svc-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
    margin-top:90px;
  }
  /* label, title, image, text, corner arrow — the reference's card rhythm,
     kept in this site's flat, thin-line language rather than glass panels */
  .svc-card{
    opacity:0; transform:translateY(40px);
    position:relative; display:flex; flex-direction:column;
    padding:30px 28px 78px;
    border:1px solid rgba(255,255,255,.12);
    background:#131313; color:var(--white);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1),
               background .3s ease, color .3s ease, border-color .3s ease;
  }
  .svc-card.in{ opacity:1; transform:translateY(0); }
  /* all cards start dark and invert to light on hover */
  .svc-card.in:hover, .svc-card.in:focus-within{
    background:var(--gray-light); color:var(--black);
    border-color:var(--gray-light);
    transform:translateY(-6px);
  }

  .svc-label{
    font-family:var(--font-body); font-size:.66rem; letter-spacing:.16em;
    text-transform:uppercase; color:rgba(255,255,255,.5);
    transition:color .3s ease;
  }
  .svc-card.in:hover .svc-label,
  .svc-card.in:focus-within .svc-label{ color:#8A8A8A; }
  .svc-title{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.2rem,1.7vw,1.55rem); line-height:1.2; margin-top:12px;
  }
  .svc-media{ margin-top:24px; overflow:hidden; border-radius:3px; }
  .svc-media img{
    display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
    transition:transform .5s ease;
  }
  .svc-card:hover .svc-media img{ transform:scale(1.05); }
  .svc-text{
    margin-top:22px; font-size:.9rem; line-height:1.75; color:#A8A8A8;
    transition:color .3s ease;
  }
  .svc-card.in:hover .svc-text,
  .svc-card.in:focus-within .svc-text{ color:#4A4A4A; }

  .svc-arrow{
    position:absolute; left:28px; bottom:28px;
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.3); color:inherit;
    text-decoration:none; font-size:1rem;
    transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
  }
  .svc-card.in:hover .svc-arrow{ border-color:rgba(0,0,0,.25); }
  .svc-arrow:hover, .svc-arrow:focus-visible{
    background:var(--red); border-color:var(--red); color:var(--white);
    transform:translateX(4px);
  }

  @media (max-width:900px){
    .svc-head-row{ grid-template-columns:1fr; gap:40px; align-items:start; }
    /* three cards side by side don't fit, so here the row becomes a swipe
       track — the one place a carousel actually saves space */
    .svc-grid{
      display:flex; gap:16px; margin-top:18px;
      overflow-x:auto; scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;
      padding-bottom:10px;
      scrollbar-width:none;
    }
    .svc-grid::-webkit-scrollbar{ display:none; }
    .svc-card{
      flex:0 0 78%; scroll-snap-align:start;
      /* cards 2 and 3 sit beyond the right edge, so the reveal observer never
         sees them and they would stay invisible — show them outright here */
      opacity:1; transform:none;
    }
    /* breathing room after the last card so it can snap fully into view */
    .svc-grid::after{ content:''; flex:0 0 6vw; }
    .svc-nav-row{ display:flex; }
  }

  /* ---------- WARUM WIR (light, index + closing) ---------- */
  .why-section{
    position:relative; background:var(--white); color:var(--black);
    padding:170px 6vw 140px; z-index:6;
    overflow:hidden;
  }
  /* closing bracket: the same rosette that opens block 2, but oversized and
     nearly transparent — the page ends on the motif it began with */
  .why-mark{
    position:absolute; right:-16%; top:50%; transform:translateY(-50%);
    width:min(1150px, 88%); height:auto;
    z-index:0; pointer-events:none; opacity:.14;
  }
  /* content sits above the mark */
  .why-rule, .why-head-row, .why-index, .why-close{ position:relative; z-index:1; }
  @media (max-width:900px){
    .why-mark{ right:-34%; width:150%; opacity:.09; }
  }
  .why-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:#6E6E6E;
    border-bottom:2px solid transparent;
    border-image:linear-gradient(90deg, #1A1A1A 0%, #669900 55%, rgba(76,115,0,.25) 100%) 1;
    padding-bottom:14px; margin-bottom:80px;
  }
  .why-head-row{
    display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:end;
  }
  .why-head{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:.98; letter-spacing:-.02em;
  }
  .why-l1{ font-size:clamp(1.8rem,3.6vw,3.2rem); display:block; }
  .why-l2{
    font-size:clamp(2.4rem,6vw,5.2rem); display:block;
    color:transparent; -webkit-text-stroke:2px var(--red);
  }
  .why-intro{
    color:#4A4A4A; font-size:clamp(.95rem,1.1vw,1.05rem);
    line-height:1.8; max-width:52ch;
  }

  /* rows sit on hairlines and span the full width — no tiles, so this reads
     differently from the card sections earlier on the page */
  .why-index{ list-style:none; margin-top:96px; }
  .why-row{
    display:grid; grid-template-columns:90px minmax(220px, 1fr) 1.5fr;
    gap:32px; align-items:baseline;
    padding:30px 22px;
    border-top:1px solid rgba(0,0,0,.14);
    transition:background .3s ease, padding-left .3s ease;
  }
  .why-row:last-child{ border-bottom:1px solid rgba(0,0,0,.14); }
  .why-row:hover{ background:#F4F4F4; padding-left:34px; }
  /* Ziffern gefuellt statt als Kontur: die frueheren rgba(0,0,0,.3)-Umrisse
     kamen nur auf 2.12:1 und fielen im Kontrast-Audit durch. #6E6E6E haelt
     5.10:1 auf Weiss und damit auch den strengeren Grenzwert fuer normalen
     Text ein. Fuer den alten Umriss-Look waere die Zeile:
     color:transparent; -webkit-text-stroke:1.5px rgba(0,0,0,.65); */
  .why-num{
    font-family:var(--font-display); font-weight:800;
    font-size:1.6rem; line-height:1; letter-spacing:-.02em;
    color:#6E6E6E;
    transition:color .3s ease;
  }
  .why-row:hover .why-num{ color:var(--red); }
  .why-title{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.02rem,1.35vw,1.25rem); line-height:1.3;
  }
  .why-desc{ color:#5A5A5A; font-size:.95rem; line-height:1.75; }

  /* closing statement — the page's actual ending */
  .why-close{
    display:grid; grid-template-columns:1.15fr .85fr; gap:70px;
    align-items:end; margin-top:110px;
  }
  .why-manifest{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.5rem,3.2vw,2.8rem); line-height:1.2;
    color:var(--black); max-width:20ch;
  }
  .why-manifest em{
    font-style:normal;
    font-size:120%;
    color:var(--red);
  }
  .why-close-side p{
    color:#4A4A4A; font-size:clamp(.95rem,1.1vw,1.05rem);
    line-height:1.8; max-width:44ch;
  }
  .why-cta{
    margin-top:30px; border-color:var(--red); color:var(--black);
  }
  .why-cta:hover, .why-cta:focus-visible{ background:var(--red); color:var(--white); }

  @media (max-width:900px){
    .why-head-row{ grid-template-columns:1fr; gap:36px; align-items:start; }
    .why-index{ margin-top:56px; }
    .why-row{
      grid-template-columns:60px 1fr; gap:8px 20px; padding:24px 0;
    }
    .why-row:hover{ padding-left:0; }
    .why-desc{ grid-column:2; }
    .why-close{ grid-template-columns:1fr; gap:34px; align-items:start; margin-top:64px; }
  }

  /* ---------- FOOTER ---------- */
  .site-footer{
    position:relative; color:var(--white);
    padding:90px 6vw 60px;
    overflow:hidden;
    border-top:2px solid rgba(255,255,255,.07);
    /* soft, colorless ambient glow instead of flat black */
    background:
      radial-gradient(ellipse 55% 60% at 50% 0%, rgba(255,255,255,.07) 0%, transparent 65%),
      var(--black);
  }
  .foot-main{
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:40px; flex-wrap:wrap;
  }
  .foot-name{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.1rem,1.6vw,1.4rem);
  }
  .foot-addr{ margin-top:10px; color:#9A9A9A; font-size:.95rem; line-height:1.7; }
  .foot-phone{
    display:inline-flex; align-items:center; gap:10px; margin-top:18px;
    color:var(--white); text-decoration:none; font-size:.95rem;
    transition:color .25s ease;
  }
  .foot-phone svg{ width:18px; height:18px; color:var(--red); }
  .foot-phone svg *{ stroke-linecap:round; stroke-linejoin:round; }
  .foot-phone:hover{ color:var(--red); }

  /* interne SEO-Linkliste (echte Sitemap-Sektion der Live-Seite,
     woertlich uebernommen -- nur URLs auf relative index.html-Pfade
     umgestellt, siehe CLAUDE.md Regel 1). Zweite Spalte in .foot-main,
     per Trennlinie abgesetzt; je Absatz eine .foot-sitemap-group mit
     kleinem Kicker-Label im Stil der Rule-Baelklen (.wdp-lst-rule etc). */
  .foot-sitemap{
    flex:1 1 420px; max-width:940px;
    padding-left:30px; border-left:1px solid rgba(255,255,255,.12);
  }
  .foot-sitemap-group{ margin:0 0 24px; }
  .foot-sitemap-group:last-child{ margin-bottom:0; }
  .foot-sitemap-kicker{
    display:block; font-family:var(--font-body); font-size:.66rem;
    letter-spacing:.16em; text-transform:uppercase; color:#6E6E6E;
    margin-bottom:10px;
  }
  .foot-sitemap p{ margin:0; font-size:.84rem; line-height:1.9; color:#9A9A9A; }
  .foot-sitemap a{ color:#B7B7B7; text-decoration:none; text-underline-offset:3px; transition:color .2s ease; }
  .foot-sitemap a:hover, .foot-sitemap a:focus-visible{ color:var(--red-light); text-decoration:underline; }
  .foot-sitemap-sep{ display:inline-block; color:#4A4A4A; margin:0 9px; font-size:.6rem; vertical-align:1px; }

  /* sitzt hier immer direkt nach .foot-phone (in .foot-company) --
     margin-top im gleichen Abstand wie .foot-phone selbst zur Adresse. */
  .foot-social{ list-style:none; display:flex; gap:12px; margin-top:18px; }
  /* rund statt eckig, etwas groesser als der frühere 44px-Kreis; Fuellung
     --glow statt --red. Weiss waere hier als Icon-Farbe verboten (1,91:1,
     siehe CLAUDE.md Kontrastregel) -- wie die Icon-Farbe stattdessen
     geloest ist, steht bei .foot-social-icon direkt darunter. */
  .foot-social a{
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; border-radius:50%;
    background:var(--glow); border:1px solid var(--glow);
    transition:background .25s ease, border-color .25s ease;
  }
  /* echte Marken-Icons (assets/img/icons/), fest weiss mit Alpha-Kanal --
     ueber currentColor nicht einfaerbbar. brightness(0) macht aus jedem
     undurchsichtigen Pixel Schwarz (Alpha bleibt erhalten) -- das haelt
     die Kontrastregel auf --glow ein (10,24:1 statt 1,91:1 mit Weiss).
     invert(1) im Hover dreht Schwarz zurueck auf Weiss, passend zu
     --red als Flaeche (5,59:1, wie an anderer Stelle dokumentiert). */
  .foot-social-icon{
    display:block; width:22px; height:22px;
    filter:brightness(0);
    transition:filter .25s ease;
  }
  .foot-social a:hover .foot-social-icon,
  .foot-social a:focus-visible .foot-social-icon{
    filter:brightness(0) invert(1);
  }
  .foot-social a:hover, .foot-social a:focus-visible{
    background:var(--red); border-color:var(--red);
  }

  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    gap:24px; flex-wrap:wrap;
    margin-top:70px; padding-top:26px;
    border-top:1px solid rgba(255,255,255,.14);
  }
  .foot-copy{ color:#8A8A8A; font-size:.82rem; }
  .foot-legal{ list-style:none; display:flex; gap:26px; flex-wrap:wrap; }
  .foot-legal a, .foot-legal button{
    color:#9A9A9A; text-decoration:none; font-size:.78rem;
    letter-spacing:.06em; text-transform:uppercase;
    transition:color .25s ease;
  }
  .foot-legal a:hover{ color:var(--white); }
  /* "Cookie-Einstellungen" reopens the banner — a <button> so it works
     without a target page, styled to match the .foot-legal <a> links */
  .foot-legal button{
    background:none; border:none; padding:0; font-family:inherit; cursor:pointer;
  }
  .foot-legal button:hover, .foot-legal button:focus-visible{ color:var(--white); }
  /* square, matching the swipe arrows in the services block */
  .foot-top{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex-shrink:0;
    border:1px solid rgba(255,255,255,.3); color:var(--white);
    text-decoration:none; font-size:1.05rem;
    transition:background .25s ease, border-color .25s ease;
  }
  .foot-top:hover{ background:var(--red); border-color:var(--red); }

  @media (max-width:900px){
    .foot-main{ gap:34px; }
    .foot-bottom{ margin-top:48px; }
    .foot-sitemap{
      padding-left:0; padding-top:26px; margin-top:0;
      border-left:none; border-top:1px solid rgba(255,255,255,.12);
    }
  }

  /* ---- mobile spacing ----
     Placed last on purpose: .solutions and friends are declared further down
     the sheet, so an earlier media query at the same specificity would lose. */
  @media (max-width:900px){
    .intro{ padding-bottom:80px; }
    .video-section{ padding-bottom:80px; }
    .solutions{ padding-top:80px; padding-bottom:80px; }
    .webdesign{ padding-top:80px; padding-bottom:80px; }
    .services{ padding-top:80px; padding-bottom:80px; }
    .why-section{ padding-top:80px; padding-bottom:80px; }
    .site-footer{ padding-top:60px; padding-bottom:48px; }
  }
/* ============================================================
   CONTACT — Formularblock, genutzt auf kontakt.html
   (die frueheren Slide-in-Panel-Styles .contact-panel/.contact-scrim/
   .contact-close wurden entfernt, seit der Kontakt eine eigene Seite ist)
   ============================================================ */
.contact-inner{ padding:30px 40px; }

.contact-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2rem,4vw,2.6rem); color:var(--red);
  letter-spacing:-.01em;
}
.contact-lead{
  margin-top:22px; font-size:.98rem; line-height:1.75; color:#C8C8C8;
}
.contact-lead strong{ color:var(--white); font-weight:700; }

/* services: pill toggles, same visual family as .video-tags / .intro-tags */
.contact-services{ border:none; padding:0; margin-top:32px; }
.contact-services legend{
  font-family:var(--font-body); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:#A0A0A0; padding:0 0 16px;
  width:100%;
}

/* custom checkboxes — multiple services selectable, replacing the earlier
   single-choice radio pills */
.check-grid{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 18px;
}
.check-item{
  display:flex; align-items:center; gap:12px;
  padding:0; cursor:pointer;
}
.check-item input{
  position:absolute; opacity:0; width:1px; height:1px;
}
/* solid bordeaux square, no border/button framing — the checkmark itself
   is the only thing that changes state */
.check-box{
  flex-shrink:0; width:24px; height:24px; border-radius:5px;
  background-color:var(--red);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .2s ease;
}
.check-box svg{
  width:14px; height:14px; fill:none; stroke:var(--white);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.5);
  transition:opacity .18s ease, transform .18s ease;
}
.check-item input:hover + .check-box{ background-color:var(--red-deep); }
.check-item input:checked + .check-box svg{ opacity:1; transform:scale(1); }
.check-item input:focus-visible + .check-box{
  outline:2px solid var(--white); outline-offset:2px;
}
.check-text{ font-size:.75rem; color:#D8D8D8; }

@media (max-width:900px){
  .check-grid{ grid-template-columns:1fr; }
}

/* text fields */
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin-top:30px;
}
.contact-field{ display:flex; flex-direction:column; gap:8px; }
.contact-field input, .contact-field textarea{
  font-family:var(--font-body); font-size:.92rem; color:var(--white);
  padding:12px 14px; border:1px solid rgba(255,255,255,.22); border-radius:6px;
  background:rgba(255,255,255,.07);
  transition:border-color .25s ease, background .25s ease;
}
.contact-field input:hover, .contact-field textarea:hover{ background:rgba(255,255,255,.1); }
.contact-field input:focus, .contact-field textarea:focus{
  outline:none; border-color:var(--red);
}
.contact-field textarea{ resize:vertical; min-height:120px; }
.contact-message{ margin-top:18px; }

.contact-consent{
  display:flex; align-items:flex-start; gap:10px;
  margin-top:24px; font-size:.85rem; color:#C0C0C0; line-height:1.5;
}
.contact-consent input{ margin-top:3px; accent-color:var(--red); flex-shrink:0; }
.contact-consent a{ color:var(--red); }

.contact-submit{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:30px; padding:15px 34px; width:210px;
  background:var(--red); color:var(--white); border:none; border-radius:999px;
  font-family:var(--font-body); font-size:.9rem; font-weight:600; cursor:pointer;
  transition:background .25s ease;
}
.contact-submit:hover{ background:var(--red-deep); }

@media (max-width:900px){
  .contact-inner{ padding:76px 24px 48px; }
  .contact-grid{ grid-template-columns:1fr; }
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:rgba(255,255,255,.45);
}


/* ============================================================
   SUBPAGE TEMPLATE — shared "wdp-" component classes
   ============================================================
   Reused by recruiting.html, social-media.html, digitale-loesungen.html
   and bauunternehmen-digital.html — hero, red intro/"Warum WST"-merge
   block, industry cards, service tiles, FAQ accordion and closing CTA
   all follow the same structure, so the CSS lives here once instead of
   being duplicated per page. Each page's own stylesheet (recruiting.css
   etc.) now only holds what's genuinely page-specific: the nav
   position:absolute override, the FAQ background photo URL, and small
   one-off tweaks (e.g. a different tile background colour).

   webdesign.html/webdesign.css still carries its own fuller "wdp-" rules
   for the rest of the page (scroll-reveal animation on the why-list, an
   inverted check icon, extra legacy sections) plus a nav position:absolute
   override — but no longer a copy of the hero rules below: index.html and
   webdesign.html use these as-is, straight from here.
   ============================================================ */

/* ---------- HERO: crossfading (or single) photo ---------- */
/* Grundzustand wie in der WST-Vorlage: der Hero scrollt normal mit
   (position:relative). Das Kleben ist ein Sonderfall der Startseite und
   haengt allein am Wrapper .wdp-hero-pin -- eine Seite ohne diesen Wrapper
   (z. B. /webdesign/, /webdesign-mit-ki/) bekommt dadurch nie einen
   Hero, der ueber die ganze Seitenlaenge am Viewport haengen bleibt.
   .wdp-hero-pin ist 100vh + Fade-Strecke hoch; solange man darin scrollt,
   bleibt .wdp-hero (sticky) am Viewport kleben, danach loest es sich von
   selbst und scrollt normal weg. Fade-Strecke hier aendern (30vh = 0.3
   der Hero-Hoehe), webdesign.js berechnet die Opacity daraus dynamisch. */
.wdp-hero-pin{
  position:relative; height:calc(100vh + 30vh);
}
.wdp-hero{
  position:relative; height:100vh; overflow:hidden; background:#050505;
}
.wdp-hero-pin > .wdp-hero{
  position:sticky; top:0;
}
.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.0) 45%, rgba(5,5,5,0.35) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.5) 0%, transparent 30%);
}
.wdp-hero-fade{
  position:absolute; z-index:1;
  bottom:-1px;
  height:120px;
  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;
}
.wdp-hero-accent{
  display:inline-block; width:70px; height:4px; background:var(--red);
  margin:22px 0;
}
.hero-title-1{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.01em; max-width:16ch;
  color:transparent;
  font-size:clamp(2.4rem,6vw,5.4rem);
  -webkit-text-stroke:2px rgba(255,255,255,0.75);
}
.hero-title-2{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.01em; max-width:16ch;
  font-size:clamp(1.8rem,4.4vw,5.2rem);
  background:linear-gradient(150deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 35%, rgba(255,255,255,0.85) 55%, rgba(255,255,255,0.4) 100%);
  background-clip:border-box;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.25);
  text-shadow:0 8px 40px rgba(0,0,0,0.35);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}

/* ---------- MERGED RED BLOCK — intro (left, sticky) + Warum WST (right, scrolls) ---------- */
/* Normaler, mitscrollender Hintergrund direkt auf .wdp-merge -- bewusst
   KEIN position:fixed/background-attachment:fixed. Ein wirklich fixierter
   Hintergrund bleibt beim Scrollen am Bildschirm stehen, waehrend
   .wdp-merge selbst darueber wegscrollt -- relativ zur Box sieht das dann
   so aus, als wuerde der Verlauf ueber sie hinweggleiten/sich verschieben.
   Genau das war nicht gewollt: der Verlauf soll fest an der Box sitzen,
   egal wie weit man durch .wdp-why-list scrollt -- das leistet nur ein
   ganz normaler background, der exakt im Gleichschritt mit der Box
   scrollt (also gar nicht "fixed" im CSS-Sinn ist). */
.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%,
      #648600 0%, #4F6A00 20%, #4C7300 44%, #2C3A00 70%, #171F00 100%);
  padding:0 6vw 130px;
}
.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:60px;
}
.wdp-merge > .wdp-intro-rule > span[aria-label="Breadcrumb"]{ color:var(--white); }
.wdp-merge > .wdp-intro-rule > span[aria-label="Breadcrumb"] a{ color:var(--glow); }
.wdp-merge-grid{
  display:grid; grid-template-columns:1.5fr 1fr; gap:80px;
  align-items:start;
}
.wdp-merge-left{ position:sticky; top:40px; }
.wdp-merge-right{ padding-top:0; }

.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; gap:26px;
  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; }

.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:34px 0;
  border-top:1px solid rgba(255,255,255,.22);
}
.wdp-why-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.22); }
.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-check{
  flex-shrink:0; width:56px; height:56px; border-radius:50%;
  background:var(--white); color:var(--red);
  display:flex; align-items:center; justify-content:center;
}
.wdp-check svg{ width:30px; height:30px; }

/* ---------- BRANCHEN (light) — three industry cards ---------- */
.wdp-branchen{ position:relative; background:var(--gray-light); color:var(--black); padding:140px 6vw; }
.wdp-branchen-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:#666666;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#1A1A1A 0%,#669900 55%,rgba(76,115,0,.25) 100%) 1;
  padding-bottom:14px; margin-bottom:70px;
}
.wdp-branchen-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:60px;
}
.wdp-branchen-head span{ display:block; }
.wdp-branchen-out{ color:transparent; -webkit-text-stroke:2px var(--red); }
/* branch cards reuse .sol-grid/.sol-card from style.css (same markup as index.html) */

/* ---------- LEISTUNGEN (light) — five service tiles ---------- */
.wdp-lst{ position:relative; background:var(--gray-light); color:var(--black); padding:140px 6vw 130px; }
.wdp-lst-rule{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.18em;
  /* Rule-Zeile liegt direkt auf dem Sektionsgrund: auf --gray-light
     (#EFEFEF) kaeme #6E6E6E nur auf 4.43:1, #6A6A6A haelt 4.70:1 */
  text-transform:uppercase; color:#6A6A6A;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#1A1A1A 0%,#669900 55%,rgba(76,115,0,.25) 100%) 1;
  padding-bottom:14px; margin-bottom:70px;
}
.wdp-lst-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; font-size:clamp(1.8rem,3.2vw,2.6rem); margin-bottom:60px;
}
.wdp-lst-head span{ display:block; }
.wdp-lst-out{ color:transparent; -webkit-text-stroke:2px var(--red); }
.wdp-lst-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:rgba(0,0,0,.1);
}
.wdp-lst-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--white); padding:44px 34px 38px;
  text-decoration:none; color:var(--black);
  transition:background .25s ease, color .25s ease;
}
.wdp-lst-card:hover{ background:var(--black); color:var(--white); }
.wdp-lst-card:hover .wdp-lst-icon{ background:var(--red); color:var(--white); }
.wdp-lst-card:hover .wdp-lst-text{ color:rgba(255,255,255,.75); }
.wdp-lst-num{
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  /* #B5B5B5 kam auf weiss nur auf 2.05:1; #6E6E6E haelt 5.10:1.
     Die Ziffer sitzt auf der weissen Kachel, nicht auf dem grauen
     Sektionsgrund -- der Wert bleibt deshalb unveraendert. */
  color:#6E6E6E; margin-bottom:26px;
  transition:color .25s ease;
}
/* Kachel wird beim Hover schwarz — dort muss die Ziffer wieder hell werden
   (gleiche Behandlung wie .wdp-lst-text) */
.wdp-lst-card:hover .wdp-lst-num{ color:rgba(255,255,255,.75); }
.wdp-lst-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--gray-light); color:var(--red);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; transition:background .25s ease, color .25s ease;
}
.wdp-lst-icon svg{ width:26px; height:26px; }
.wdp-lst-name{ font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin-bottom:12px; }
.wdp-lst-text{ font-size:.9rem; line-height:1.6; color:#5A5A5A; flex-grow:1; transition:color .25s ease; }
.wdp-lst-go{
  display:inline-flex; align-items:center; gap:8px; margin-top:26px;
  font-family:var(--font-body); font-size:.82rem; font-weight:600;
}
.wdp-lst-go i{ font-style:normal; transition:transform .25s ease; }
.wdp-lst-card:hover .wdp-lst-go i{ transform:translateX(4px); }

/* ---------- TUTORIALS (grau, Karten-Karussell) ----------
   Struktur/Typo an .wdp-lst angelehnt; Karussell-Mechanik (Pfeile,
   scrollende Kartenreihe) am Vorbild von wst_projekte/webservice
   section.services -- dort nur Mobile-Fallback, hier bewusst immer
   aktiv (auch Desktop). Farben auf die eigenen Tokens umgestellt
   (grauer Hintergrund statt Schwarz, --red/--glow statt WST-Rot).
   JS: assets/js/tutorials-carousel.js (siehe Glossar-Eintrag). */
.wdp-tut{ position:relative; background:var(--gray-light); color:var(--black); padding:140px 6vw 130px; overflow:hidden; }
.wdp-tut-rule{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.18em;
  /* Grund ist --gray-light (#EFEFEF): #6E6E6E kam nur auf 4.43:1, #6A6A6A haelt 4.70:1 */
  text-transform:uppercase; color:#6A6A6A;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#1A1A1A 0%,#669900 55%,rgba(76,115,0,.25) 100%) 1;
  padding-bottom:14px; margin-bottom:70px;
}
.wdp-tut-head-row{
  display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:end;
  margin-bottom:60px;
}
.wdp-tut-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; font-size:clamp(1.8rem,3.2vw,2.6rem);
}
.wdp-tut-head span{ display:block; }
.wdp-tut-out{ color:transparent; -webkit-text-stroke:2px var(--red); }
.wdp-tut-lead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.35;
  border-left:2px solid var(--red); padding-left:22px;
}
.wdp-tut-intro p{
  margin-top:22px; max-width:48ch; color:#5A5A5A;
  font-size:.95rem; line-height:1.75;
}

.wdp-tut-track{ position:relative; }
.wdp-tut-nav-row{ display:flex; gap:10px; justify-content:flex-end; margin-bottom:30px; }
.wdp-tut-nav{
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--black);
  border:1px solid rgba(0,0,0,.15);
  font-size:1.05rem; cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease, opacity .25s ease;
}
.wdp-tut-nav:hover{ background:var(--red); border-color:var(--red); color:var(--white); }
.wdp-tut-nav[disabled]{ opacity:.3; pointer-events:none; }

.wdp-tut-grid{
  display:flex; gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
  scrollbar-width:none;
}
.wdp-tut-grid::-webkit-scrollbar{ display:none; }
.wdp-tut-grid::after{ content:''; flex:0 0 1px; }

.wdp-tut-card{
  flex:0 0 clamp(240px,22vw,300px); scroll-snap-align:start;
  position:relative; display:flex; flex-direction:column;
  padding:26px 26px 68px;
  background:var(--black); color:var(--white);
  border:1px solid rgba(255,255,255,.12);
  text-decoration:none;
  transition:background .4s ease, border-color .3s ease, transform .3s ease;
}
.wdp-tut-card:hover{
  background:var(--white); color:var(--black);
  border-color:var(--white);
  transform:translateY(-6px);
}
.wdp-tut-num{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  letter-spacing:.1em; color:var(--glow); transition:color .3s ease;
}
.wdp-tut-card:hover .wdp-tut-num{ color:#8A8A8A; }
.wdp-tut-media{ margin-top:18px; overflow:hidden; border-radius:3px; background:rgba(255,255,255,.08); }
.wdp-tut-media img{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  transition:transform .5s ease;
}
.wdp-tut-card:hover .wdp-tut-media img{ transform:scale(1.05); }
.wdp-tut-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; line-height:1.25; margin-top:18px;
}
.wdp-tut-text{
  margin-top:12px; font-size:.85rem; line-height:1.65; color:rgba(255,255,255,.65);
  transition:color .3s ease;
}
.wdp-tut-card:hover .wdp-tut-text{ color:#5A5A5A; }
.wdp-tut-arrow{
  position:absolute; left:26px; bottom:24px;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); color:inherit;
  font-size:1rem;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.wdp-tut-card:hover .wdp-tut-arrow{
  background:var(--red); border-color:var(--red); color:var(--white); transform:translateX(4px);
}

/* letzte Karte: Abschluss-Link zur Gesamtuebersicht -- jetzt sind alle
   Karten schwarz, deshalb nur noch am Rahmen als Sonderfall erkennbar */
.wdp-tut-card--more{ border-color:rgba(102,153,0,.5); }
.wdp-tut-card--more:hover{ border-color:rgba(0,0,0,.15); }

@media (max-width:900px){
  .wdp-tut-head-row{ grid-template-columns:1fr; gap:30px; align-items:start; }
  .wdp-tut-card{ flex:0 0 78%; }
}

/* ---------- FAQ (light, accordion) ---------- */
/* photo lives on a pseudo-element (not .wdp-faq's own background) so it
   can fade in on its own — starts invisible, revealed via .is-visible
   (toggled in each page's own JS when the section scrolls into view).
   Each page sets its own image via .wdp-faq::before{ background-image }
   in its own stylesheet, loaded after this one. */
.wdp-faq{
  position:relative; background:var(--white); color:var(--black); padding:140px 6vw 130px;
  overflow:hidden;
}
.wdp-faq::before{
  content:'';
  position:absolute; inset:0; z-index:0;
  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; }
}
.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);
}
.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; }
/* geoeffneter Eintrag und Hover in Markenfarbe. --red (#4C7300) auf dem
   hellen FAQ-Grund: 5,59:1 -- --red-light waere hier mit 2,9:1 zu schwach. */
.wdp-faq-item summary:hover,
.wdp-faq-item[open] > summary{ color:var(--red); }
.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 summary:hover .wdp-faq-toggle{ border-color:var(--red); }
.wdp-faq-item[open] .wdp-faq-toggle{
  background:var(--red); color:var(--white); border-color:var(--red);
}
.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:22ch; }
.wdp-cta-text em{ font-style:normal; color:var(--red); }

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

@media (max-width:1100px){
  .wdp-lst-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .wdp-faq::before{ display:none; }
  .wdp-faq-grid{ grid-template-columns:1fr; gap:40px; padding-right:0; }
  .wdp-merge-grid{ grid-template-columns:1fr; gap:50px; }
  .wdp-merge-left{ position:static; }
  .wdp-lst-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   COOKIE BANNER — two equal-weight buttons (Akzeptieren/Ablehnen),
   choice persisted in localStorage via js/cookie-consent.js. Reusable
   across every page (no include system on this site, so the script tag
   + a small "Cookie-Einstellungen" footer trigger are added per page,
   same pattern as shared.js). See js/cookie-consent.js for the logic
   and the data-consent-src/-wrap pattern used to gate future third-party
   embeds (Google Maps, YouTube, ...) behind consent.
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .4s ease, opacity .4s ease;
}
.cookie-banner.is-visible{ transform:translateY(0); opacity:1; pointer-events:auto; }
.cookie-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  flex-wrap:wrap;
  max-width:1100px; margin:0 18px 18px; padding:26px 30px;
  background:var(--black-soft);
  border:1px solid rgba(255,255,255,.14);
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#E8E8E8 0%,#669900 55%,rgba(76,115,0,.35) 100%) 1;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@media (min-width:1160px){ .cookie-banner-inner{ margin-left:auto; margin-right:auto; } }
.cookie-banner-text{
  font-family:var(--font-body); font-size:.88rem; line-height:1.65; color:#C8C8C8;
  flex:1 1 380px; margin:0;
}
.cookie-banner-text a{ color:var(--white); }
.cookie-banner-text a:hover, .cookie-banner-text a:focus-visible{ color:var(--red-light); }

/* both buttons share size/weight/radius — deliberately equal prominence,
   only the color treatment tells "Akzeptieren" and "Ablehnen" apart */
.cookie-banner-actions{ display:flex; gap:14px; flex-wrap:wrap; flex-shrink:0; }
.cookie-btn{
  font-family:var(--font-body); font-size:.88rem; font-weight:600;
  padding:14px 28px; border-radius:999px; cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
  white-space:nowrap;
}
.cookie-btn-accept{ background:var(--red); border:1px solid var(--red); color:var(--white); }
.cookie-btn-accept:hover, .cookie-btn-accept:focus-visible{ background:var(--red-deep); border-color:var(--red-deep); }
.cookie-btn-reject{ background:transparent; border:1px solid rgba(255,255,255,.4); color:var(--white); }
.cookie-btn-reject:hover, .cookie-btn-reject:focus-visible{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.65); }

@media (max-width:560px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; margin:0 12px 12px; padding:24px; }
  .cookie-banner-actions{ flex-direction:column; }
  .cookie-btn{ width:100%; text-align:center; }
}

/* ---------- consent-gated third-party embeds (prepared, unused for now) ----------
   Pattern for a future Google Maps/YouTube embed: wrap it in an element
   with [data-consent-wrap], give the iframe data-consent-src instead of
   src, and add a .consent-placeholder child with a [data-consent-reopen]
   button. cookie-consent.js swaps data-consent-src -> src once consent is
   accepted, and toggles the .consent-blocked class otherwise. */
[data-consent-wrap]{ position:relative; }
[data-consent-wrap].consent-blocked > iframe{ display:none; }
.consent-placeholder{
  display:none; flex-direction:column; align-items:flex-start; gap:14px;
  padding:34px; background:var(--black-soft); border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
}
[data-consent-wrap].consent-blocked .consent-placeholder{ display:flex; }
.consent-placeholder p{ font-family:var(--font-body); font-size:.9rem; color:#C8C8C8; line-height:1.65; margin:0; }
.consent-placeholder button{
  font-family:var(--font-body); font-size:.85rem; font-weight:600;
  padding:12px 24px; border-radius:999px;
  background:var(--red); border:1px solid var(--red); color:var(--white); cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.consent-placeholder button:hover{ background:var(--red-deep); border-color:var(--red-deep); }

/* =====================================================================
   ERGÄNZUNGEN weddesign — nicht Teil der WST-Vorlage
   Alles oberhalb dieser Linie stammt 1:1 aus dem WST-Projekt, nur mit
   getauschten Farbwerten. Was hier steht, kam für weddesign dazu.
   ===================================================================== */

/* Sprunglink für Tastatur- und Screenreader-Nutzer. WST hat keinen —
   dort ist "data-skip-to" nur die Scroll-Andeutung im Hero. Das Markup
   liegt auf jeder Seite als erstes Element im <body>. */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--red); color:var(--white);
  padding:12px 20px; font-family:var(--font-body); font-weight:600;
  text-decoration:none; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; top:0; }


/* Referenzen: EIN Block aus drei Bilderreihen (Quelle
   assets/img/referenzen/reihe1|2|3), die direkt untereinander liegen und
   zusammen sichtbar sind. Darauf zwei Sticky-Phasen (Scroll-Jacking):

   Phase 1 -- .wdp-ref selbst ist position:sticky; top:0. Sobald seine
   Oberkante die Bildschirmoberkante erreicht, friert der ganze Block ein;
   referenzen.js schiebt in dieser Zeit Reihe 1 horizontal durch. Die
   Scroll-Strecke dafuer liefert der .wdp-ref-spacer NACH der Sektion,
   innerhalb von .wdp-ref-stage: solange dieser Spacer durchgescrollt wird,
   bleibt die Sektion kleben, danach loest sie sich von selbst.

   Phase 2 -- danach scrollt der Block normal hoch, bis die statische
   Reihe oben ankommt: ab da klebt .wdp-ref-group (top:0) und Reihe 3
   laeuft durch. Bewusst EIN gemeinsamer sticky-Wrapper um Reihe 2 und
   Reihe 3 statt zwei einzelner sticky-Elemente: einzeln endet der
   Klebe-Bereich der tiefer sitzenden Reihe 3 rechnerisch um ihre eigene
   Hoehe + gap frueher als der von Reihe 2 -- Reihe 3 scrollt dann in
   diesem Reststueck schon weiter und schiebt sich sichtbar UEBER Reihe 2
   (sie ist positioniert und kommt im DOM spaeter, malt also obendrauf).
   Gemeinsam gewrappt kleben und loesen beide exakt gleichzeitig und
   verschieben sich nie gegeneinander. Die Scroll-Strecke fuer diese Phase
   liefert der zweite .wdp-ref-spacer, der letzte Eintrag in
   .wdp-ref-track.

   Bewusst Spacer-Elemente statt padding an den Wrappern: der
   Sticky-Bewegungsraum bemisst sich am Inhaltsbereich des Elternteils,
   padding zaehlt dort nicht zuverlaessig mit.

   WICHTIG (schon einmal reingefallen): kein Vorfahre eines
   sticky-Elements darf overflow auf etwas anderes als visible/clip
   setzen. overflow-x:hidden rechnet overflow-y still auf auto um, der
   Vorfahre wird damit selbst zum Scroll-Container und das sticky-Element
   klebt nie. Das horizontale Clipping der Zeilen laeuft deshalb ueber
   overflow-x:clip direkt auf .wdp-ref-viewport (auf dem sticky-Element
   selbst ist das unproblematisch, es betrifft nur dessen Kinder).

   Neue Komponente, kein WST-Pendant -- eigener Praefix wdp-ref.
   Kopfzeile nutzt das vorhandene .wdp-intro-rule. */
.wdp-ref-stage{ position:relative; }
.wdp-ref{
  position:sticky; top:0;
  background:var(--black); padding:60px 0;
}
/* Kopfzeile einruecken: margin, NICHT padding -- die Trennlinie ist ein
   border-bottom und sitzt an der Aussenkante des Elements, padding
   verschiebt nur den Text und laesst die Linie randlos durchlaufen. */
.wdp-ref .wdp-intro-rule{ margin-left:6vw; margin-right:6vw; }
.wdp-ref-track{
  display:flex; flex-direction:column; gap:10px;
}
/* Sichtfenster einer animierten Zeile: schneidet nur horizontal ab,
   kein Innenabstand -- die drei Reihen sollen dicht als ein Block sitzen. */
.wdp-ref-viewport{
  overflow-x:clip;
  padding:0;
}
/* Reihe 3 klebt NICHT selbst -- sie haengt am gemeinsamen .wdp-ref-group.
   Die Klasse bleibt als Marker, damit referenzen.js die Zeile findet. */
.wdp-ref-group{
  position:sticky; top:0;
  display:flex; flex-direction:column; gap:10px;
  padding:0 0;
}
.wdp-ref-row{ display:flex; gap:10px; will-change:transform; }
.wdp-ref-row img{
  height:250px; width:auto; flex:0 0 auto;
  object-fit:cover; display:block;
  filter: brightness(0.5);
  transition: filter .3s ease;
}
.wdp-ref-row img:hover{ filter: brightness(1) grayscale(0); }

/* Statische mittlere Reihe (Zeile 2): laeuft nie horizontal durch, klebt
   in Phase 2 zusammen mit Reihe 3 ueber .wdp-ref-group. Bewusst
   display:grid statt flex -- drei Spalten teilen sich die Breite exakt zu
   gleichen Teilen. Wichtig: minmax(0, 1fr), NICHT nur 1fr -- bei reinem
   1fr bekommt jede Spalte automatisch einen Mindestwert in Hoehe des
   natuerlichen Bildinhalts (hier teils 930px breite Screenshots), wodurch
   die Spalten ungleich breit wurden statt zu dritteln; minmax(0, ...)
   setzt diesen Mindestwert auf 0. Jedes Bild fuellt seine Spalte
   komplett (width:100%, dazu min-width:0 aus demselben Grund), Hoehe
   bleibt im eigenen Seitenverhaeltnis (height:auto). */
.wdp-ref-row--static{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;
  cursor:default;
  /* erbt .wdp-ref-row, wird aber nie verschoben -- will-change wieder
     zuruecknehmen, damit hier kein unnoetiger Compositing-Layer entsteht */
  will-change:auto;
}
.wdp-ref-row--static img{ width:100%; height:auto; display:block; min-width:0; }

/* Reine Scroll-Strecke, nichts Sichtbares -- Hoehe = Laenge der jeweiligen
   Sticky-Phase. Hier drehen, wenn eine Reihe zu schnell/zu langsam
   durchlaeuft. */
.wdp-ref-spacer{ height:80vh; flex:0 0 auto; }

@media (prefers-reduced-motion: reduce){
  .wdp-ref, .wdp-ref-group{ position:static; }
  .wdp-ref-spacer{ display:none; }
  .wdp-ref-row{ transform:none !important; }
}

/* ---------- Mobil (bis 900px): kein Scroll-Jacking ----------
   Auf dem Handy waeren die beiden Sticky-Phasen zusammen rund vier
   Bildschirmhoehen, in denen man kaum weiterkommt, und die Zeilen muessten
   dabei etwa doppelt so schnell wandern wie der Finger scrollt (Reihe 1
   legt ~2600px zurueck, angetrieben von ~1270px Scroll). Deshalb hier
   stattdessen das Muster, das im Projekt schon bei .svc-grid steckt: jede
   der drei Reihen wird ein nativer Wisch-Streifen. Kein Sticky, keine
   Spacer -- referenzen.js haelt sich unter 900px komplett raus (matchMedia
   dort), gescrollt wird nativ vom Browser.

   scroll-snap bewusst "proximity" statt "mandatory": die Screenshots sind
   unterschiedlich breit und teils breiter als das Display -- mandatory
   wuerde dabei bevormunden. */
@media (max-width:900px){
  .wdp-ref, .wdp-ref-group{ position:static; }
  .wdp-ref-spacer{ display:none; }

  .wdp-ref-viewport{
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .wdp-ref-viewport::-webkit-scrollbar{ display:none; }

  /* die Zeilen werden nativ gescrollt, nicht mehr per transform verschoben */
  .wdp-ref-row{ transform:none !important; }
  /* Keine Abdunkelung auf Touch: die brightness(0.5) der Desktop-Regel wird
     erst per :hover aufgehoben, und Hover gibt es hier nicht -- die Bilder
     waeren sonst dauerhaft dunkel. */
  .wdp-ref-row img{
    scroll-snap-align:start;
    filter:none;
    transition:none;
  }

  /* Die statische Reihe ist mobil nicht dreispaltig -- drei Screenshots auf
     ~390px waeren je ~120px breit und damit unlesbar. Sie wird hier auch
     kein Wisch-Streifen wie Reihe 1 und 3, sondern ein einfacher Block:
     die drei Bilder stehen untereinander, jedes ueber die volle Breite in
     seinem eigenen Seitenverhaeltnis. */
  .wdp-ref-row--static{
    display:block;
  }
  .wdp-ref-row--static img{
    height:auto; width:100%; min-width:auto;
  }
}

/* Text-Wortmarke im Header, solange kein echtes Logo unter assets/img/logo/
   liegt (siehe DESIGN.md, "Bekannte Kanten"). .logo-text-accent markiert die
   weiß abgesetzten Buchstaben "ED" in "WEDDesign". */
.logo-text{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  color:var(--red-light);
}
.logo-text-accent{ color:var(--white); }

/* Wortmarke im Footer (.foot-name) wiederverwendet -- Farben/Font-Weight
   bleiben wie im Header, nur die Groesse folgt weiter .foot-name statt
   den festen 1.15rem von .logo-text. */
.foot-name .logo-text{ font-size:clamp(1.1rem,1.6vw,1.4rem); }