/* 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{
    --red: #8E1B32;
    --red-deep: #6E1526;
    --red-light: #B02440;
    --black: #0C0C0C;
    --black-soft: #161616;
    --white: #FFFFFF;
    --gray-light: #EFEFEF;
    --text-mid: #9A9A9A;
    --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. */
  body{ font-family:var(--font-body); background:var(--black); color:var(--white); overflow-x:hidden; }

  /* ---------- 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(176,36,64,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(142,27,50,.6), 0 0 16px rgba(142,27,50,.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: kompakter zwischen Desktop und Burger-Menü (8 Punkte seit
     „Preiskalkulator“, sonst bricht die Leiste unter ~1200px um) ---- */
  @media (min-width:901px) and (max-width:1200px){
    .navlinks li a{ padding:8px 12px; white-space:nowrap; }
  }
  @media (min-width:901px) and (max-width:1060px){
    .navlinks{ font-size:.8rem; }
    .navlinks li a{ padding:7px 9px; }
  }
  @media (min-width:901px) and (max-width:960px){
    .navlinks{ font-size:.78rem; }
    .navlinks li a{ padding:6px 6px; }
  }

  /* ---- 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(176,36,64,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(142,27,50,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-red 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(--red);
    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 #8E1B32:
       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%,
        #C8546A 0%,    /* lightest tint  */
        #AE3350 20%,
        #8E1B32 44%,   /* brand base     */
        #691326 70%,
        #3A0A15 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%, #B02440 55%, rgba(142,27,50,.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%, #B02440 55%, rgba(142,27,50,.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:#E4BFC8; 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:#F0C9D2; }
  .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(142,27,50,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%, #B02440 55%, rgba(142,27,50,.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%, #B02440 55%, rgba(142,27,50,.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(142,27,50,.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%, #B02440 55%, rgba(142,27,50,.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, #4A0E1A 0%, var(--red) 55%, #6E1526 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%, #B02440 55%, rgba(142,27,50,.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%, #B02440 55%, rgba(142,27,50,.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%, #B02440 55%, rgba(142,27,50,.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); }

  .foot-social{ list-style:none; display:flex; gap:12px; }
  .foot-social a{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:var(--red); border:1px solid var(--red); color:var(--white);
    transition:background .25s ease, border-color .25s ease;
  }
  .foot-social svg{ width:20px; height:20px; }
  .foot-social svg *{ stroke-linecap:round; stroke-linejoin:round; }
  .foot-social a:hover, .foot-social a:focus-visible{
    background:var(--red-light); border-color:var(--red-light);
  }

  .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; }
  }

  /* ---- 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); text-decoration:underline; }

.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 is intentionally NOT covered: it still
   carries its own fuller "wdp-" rules (scroll-reveal animation on the
   why-list, an inverted check icon, extra legacy sections). webdesign.css
   loads after this file, so its same-selector rules simply take
   precedence there via the normal cascade — this shared block has no
   effect on webdesign.html.
   ============================================================ */

/* ---------- HERO: crossfading (or single) photo ---------- */
.wdp-hero{
  position:relative; height:100vh; overflow:hidden; background:#050505;
}
.wdp-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.wdp-hero-bg-b{ opacity:0; will-change:opacity; }
.wdp-hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.55) 45%, rgba(5,5,5,0.35) 100%),
    linear-gradient(0deg, rgba(5,5,5,0.5) 0%, transparent 30%);
}
.wdp-hero-fade{
  position:absolute; z-index:1;
  bottom:-1px;
  height:200px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
  width:100%;
}
.wdp-hero-content{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 6vw;
}
.wdp-hero-kicker{
  font-family:var(--font-body); font-size:1rem; font-weight:500;
  color:var(--white); margin-bottom:0;
}
.wdp-hero-accent{
  display:inline-block; width:70px; height:4px; background:var(--red);
  margin:22px 0;
}
.wdp-hero-title{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:1.02; letter-spacing:-.01em; color:var(--white);
  font-size:clamp(2.4rem,6vw,4.8rem); max-width:18ch;
}

/* ---------- MERGED RED BLOCK — intro (left, sticky) + Warum WST (right, scrolls) ---------- */
.wdp-merge{
  position:relative;
  background:
    linear-gradient(180deg, #0C0C0C 0%, rgba(12,12,12,.7) 14%, rgba(12,12,12,0) 36%),
    radial-gradient(ellipse 95% 78% at 22% 78%,
      #C8546A 0%, #AE3350 20%, #8E1B32 44%, #691326 70%, #3A0A15 100%);
  padding:0 6vw 130px;
}
.wdp-intro-rule{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-body); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#E8E8E8 0%,#B02440 55%,rgba(142,27,50,.35) 100%) 1;
  padding-bottom:14px; margin-bottom:60px;
}
.wdp-merge-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:start;
}
.wdp-merge-left{ position:sticky; top:40px; }
.wdp-merge-right{ padding-top:0; }

.wdp-intro-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  line-height:.98; letter-spacing:-.02em;
}
.wdp-l1{ display:block; font-size:clamp(1.8rem,3.6vw,3.2rem); }
.wdp-l2{ display:block; font-size:clamp(2.4rem,6vw,5.4rem); color:transparent; -webkit-text-stroke:2px var(--white); }
.wdp-lead{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.6vw,1.35rem); line-height:1.35;
  margin-top:26px; max-width:32ch;
  border-left:2px solid rgba(255,255,255,.75); padding-left:22px;
}
.wdp-intro-cols{
  display:grid; grid-template-columns:1fr; gap:26px;
  margin-top:56px; padding-top:36px;
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg,#E8E8E8 0%,#B02440 55%,rgba(142,27,50,.35) 100%) 1;
}
.wdp-intro-cols p{ color:#FBEAEE; font-size:1rem; line-height:1.8; }

.wdp-why-head{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,3.6vw,3rem); line-height:1.05;
  margin-bottom:30px;
}
.wdp-why-head span{ display:block; }
.wdp-why-out{ color:transparent; -webkit-text-stroke:2px var(--red); }

.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:#F0D2D9; 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%,#B02440 55%,rgba(142,27,50,.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(--white); 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;
  text-transform:uppercase; color:#6E6E6E;
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#1A1A1A 0%,#B02440 55%,rgba(142,27,50,.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 */
  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); }

/* ---------- 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); }
.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);
}
.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%,#B02440 55%,rgba(142,27,50,.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); text-decoration:underline; text-underline-offset:2px; }
.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); }