/* Recurring badge motif: first word in a red rounded badge */
.badge-headline{font-size:var(--step-4);font-weight:800;letter-spacing:-.02em}
.badge-headline .badge{display:inline-block;background:var(--red);color:#fff;padding:.04em .34em;border-radius:.22em;transform:rotate(-1.5deg)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.5em;border-radius:14px;font-weight:700;font-size:var(--step-0);cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),background .25s}
.btn--solid{background:var(--red);color:#fff}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--black{background:var(--black);color:#fff;border-color:var(--red);border-width:2px}
.btn--text{background:transparent;color:var(--text);padding-inline:.4em}
.btn:hover{transform:translateY(-2px)}
.btn--solid:active{background:var(--red-press)}
.btn--black:active{background:#000}
.icon-arrow{width:1em;height:1em;flex:none}
/* Circled arrow next to the email nav link and the "Alle Leistungen" text button. */
.nav__mail .icon-arrow,.btn--text .icon-arrow{width:1.7em;height:1.7em;padding:.32em;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box}
/* Nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding-block:1.1rem;padding-inline:max(var(--gutter),calc((100% - var(--maxw))/2));transition:padding .3s var(--ease),background .3s;--nav-fg:#fff}
.nav--light{--nav-fg:var(--on-white)}
/* Hintergrund + Blur liegen auf ::before statt auf .nav selbst: backdrop-filter auf .nav
   würde sonst zum Bezugsrahmen für das position:fixed Mobile-Menü (Menü nur so hoch wie die Leiste). */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,box-shadow .3s;pointer-events:none}
.nav--scrolled{padding-block:.7rem}
.nav--scrolled::before{background:rgba(9,9,9,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav--light.nav--scrolled::before{background:rgba(255,255,255,.82);border-bottom-color:#ececef;box-shadow:0 6px 24px rgba(15,15,20,.06)}
.nav__brand{display:flex;align-items:center;gap:.65rem;font-weight:800;color:var(--nav-fg);flex:none}
.nav__brand img{width:clamp(74px,6.2vw,128px);height:auto}
/* Komplettes Logo (Bildmarke + Schriftzug) */
.nav__brand img.nav__logo{width:auto;height:clamp(46px,4.6vw,76px);transition:height .3s var(--ease)}
.nav--scrolled .nav__brand img.nav__logo{height:clamp(42px,3.8vw,62px)}
@media (max-width:1024px){.nav__brand img.nav__logo{height:46px}.nav--scrolled .nav__brand img.nav__logo{height:42px}}
.nav__wordmark{display:flex;flex-direction:column;line-height:1;font-family:"Space Grotesk","Hanken Grotesk",sans-serif;font-size:clamp(1.45rem,1.1rem + .8vw,1.95rem);letter-spacing:.04em}
.nav__wordmark small{font-weight:500;font-size:.5rem;letter-spacing:.16em;color:var(--nav-fg);opacity:.62;margin-top:.32em}
.nav__links{display:flex;align-items:center;gap:clamp(1rem,1.9vw,2.6rem);list-style:none}
.nav__links a{position:relative;font-weight:600;font-size:clamp(1.05rem,.75rem + .5vw,1.45rem);color:var(--nav-fg);white-space:nowrap}
.nav__links a:not(.btn):not(.nav__mail)::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:not(.btn):not(.nav__mail):hover::after,.nav__links a:not(.btn):not(.nav__mail)[aria-current="true"]::after{transform:scaleX(1)}
.nav__mail{display:inline-flex;align-items:center;gap:.3em;font-weight:700}
.nav__links .btn--black{font-size:clamp(1.05rem,.75rem + .45vw,1.4rem);font-weight:800;padding:.45em 1.4em;color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:.4rem}
.burger span{width:26px;height:2px;background:var(--nav-fg);transition:.3s var(--ease)}
/* Burger-Menü bis 1024px (volles Logo + Menüpunkte brauchen ca. 960px) */
@media (max-width:1024px){
  .nav__wordmark small{display:none}
  .nav__links{position:fixed;inset:0;z-index:0;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    flex-direction:column;justify-content:center;gap:1.4rem;padding:6rem var(--gutter) 2rem;background:#fff;
    transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s linear .4s}
  .nav[data-open="true"] .nav__links{transform:none;visibility:visible;transition:transform .4s var(--ease),visibility 0s}
  /* Logo + Burger bleiben über dem offenen Menü sichtbar */
  .nav__brand,.burger{position:relative;z-index:1}
  .nav[data-open="true"]{--nav-fg:var(--on-white)}
  .nav[data-open="true"]::before{background:transparent;box-shadow:none;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .burger{display:flex}
  /* Burger → X */
  .nav[data-open="true"] .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav[data-open="true"] .burger span:nth-child(2){opacity:0}
  .nav[data-open="true"] .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
/* Hintergrund nicht scrollen, solange das Mobile-Menü offen ist */
html.nav-open{overflow:hidden}
/* ── Hero (WHITE surface) ──────────────────────────────────────────── */
.hero{position:relative;z-index:1;overflow:hidden;padding-top:clamp(8.5rem,13vw,13rem);padding-bottom:clamp(7rem,12vw,14.5rem);
  border-bottom-left-radius:clamp(28px,3vw,56px);border-bottom-right-radius:clamp(28px,3vw,56px)}
/* the dark section after the hero tucks up behind the hero's rounded bottom */
.hero + .section--dark{margin-top:clamp(-56px,-3vw,-28px);position:relative;z-index:0;padding-top:clamp(5rem,8vw,8rem)}
/* Faint grid + soft pink/red radial glow behind the headline. */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 48% at 32% 30%, rgba(254,48,49,.16), rgba(254,48,49,0) 70%),
    linear-gradient(#ececed 1px,transparent 1px),
    linear-gradient(90deg,#ececed 1px,transparent 1px);
  background-size:100% 100%, 170px 170px, 170px 170px;
  -webkit-mask:linear-gradient(#000 78%,transparent);mask:linear-gradient(#000 78%,transparent)}
.hero__inner{position:relative;z-index:1}
.hero__top{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.hero__title{font-size:clamp(2.4rem,1.3rem + 4.6vw,6.4rem);line-height:1.06;max-width:none;color:var(--on-white)}
.hero__aside{padding-top:.6rem}
.hero__lead{max-width:40ch;color:var(--muted-white);font-size:var(--step-2);line-height:1.45}
.hero__cta{margin-top:1.8rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.hero__cta .btn{font-size:clamp(1.1rem,.95rem + .45vw,1.4rem);font-weight:800}
/* Mockup stage: three overlapping cards + pointing hand. */
.hero__stage{position:relative;margin-top:0;height:clamp(500px,min(46vw,76vh),1000px);
  perspective:1600px;--tx:0;--ty:0}
.hero__card{position:absolute;top:6%;display:block;border-radius:26px;overflow:hidden;
  box-shadow:0 36px 70px -26px rgba(15,15,20,.45);
  transition:transform .35s var(--ease)}
.hero__card picture img{width:100%;height:auto;display:block}
/* TOP-anchored so the cluster sits directly under the claim (no gap) and bleeds
   down into the dark section. biz & flyer use IDENTICAL width (assets both
   1523x1600) + identical top => flush top AND bottom. */
.hero__card--biz{left:4%;top:11%;width:clamp(300px,30vw,580px);transform:translate(calc(var(--tx)*-10px),calc(var(--ty)*-6px));z-index:1}
.hero__card--flyer{right:4%;left:auto;top:11%;width:clamp(300px,30vw,580px);transform:translate(calc(var(--tx)*10px),calc(var(--ty)*6px));z-index:2}
.hero__card--mac{left:50%;margin-left:-2.5vw;top:-3%;width:clamp(420px,38vw,740px);transform:translateX(-50%) rotate(6deg) translate(calc(var(--tx)*6px),calc(var(--ty)*4px));z-index:3}
/* hero-macbook is a full composite (rounded dark card + gripping hand on transparent bg) —
   drop the rectangular frame so the hand bleeds out; drop-shadow follows the real pixels. */
.hero__card--mac{overflow:visible;border-radius:0;box-shadow:none;width:clamp(420px,38vw,740px);
  filter:drop-shadow(0 34px 56px rgba(15,15,20,.4))}
/* X-Interactive logo badge on each mockup card. */
.hero__badge{position:absolute;top:6%;left:6%;z-index:5;width:clamp(56px,6.4vw,104px);height:auto;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.22));pointer-events:none}
.hero__card--mac .hero__badge{top:30%;bottom:auto;left:14%}
/* Comic "pop" emphasis lines — sit by the hand's little finger and ride the
   SAME parallax translate as the macbook/hand so they move together on hover. */
.hero__lines{position:absolute;z-index:6;left:39%;top:5%;width:clamp(38px,4.4vw,72px);height:auto;
  transform:translate(calc(var(--tx)*6px),calc(var(--ty)*4px));pointer-events:none}
/* Social icon strip on the right edge — fixiert, scrollt mit (sticky) */
.hero__social{position:fixed;right:clamp(.6rem,1.4vw,1.4rem);top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;gap:.7rem;list-style:none;margin:0;padding:0}
.hero__social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--black);border:1px solid rgba(255,255,255,.28);color:#fff;
  box-shadow:0 4px 12px rgba(15,15,20,.18);transition:transform .25s var(--ease),background .25s,color .25s}
.hero__social a:hover{transform:translateY(-2px);background:var(--red);color:#fff;border-color:var(--red)}
.hero__social svg{width:19px;height:19px}
/* "Nach oben" erst einblenden, wenn der Hero verlassen wurde */
.hero__top-item{transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.hero__social:not(.is-scrolled) .hero__top-item{opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
/* Offenes Mobile-Menü nicht überdecken */
html.nav-open .hero__social{visibility:hidden}
/* Tablet / narrow desktop: tighten the mockup cluster so the cards overlap
   like the design instead of drifting apart with a gap in the middle. */
@media (max-width:1280px) and (min-width:861px){
  .hero__card--biz{left:1%;width:39%}
  .hero__card--flyer{right:1%;width:39%}
  .hero__card--mac{width:50%;margin-left:0}
  .hero__lines{left:37%;width:5.4%}
}
@media (max-width:860px){
  .hero{padding-top:7rem}
  .hero__top{grid-template-columns:1fr}
  .hero__title{font-size:var(--step-4);max-width:none}
  .hero__lead{max-width:none}
  .hero__stage{height:clamp(320px,90vw,440px);margin-top:2rem}
  .hero__card--biz{left:0;width:44%}
  .hero__card--mac{left:50%;margin-left:0;width:54%}
  .hero__card--flyer{right:0;width:46%}
  .hero__lines{left:37%;top:6%;width:13%}
  .hero__social{display:none}
}

/* Section 2: Gute Gründe — DARK icon panel */
.gruende{padding-block:clamp(3rem,6vw,6rem);--maxw:1840px}
.gruende__panel{position:relative;overflow:visible;background:#141414;border:2.5px solid #444;border-radius:var(--radius-panel);padding:clamp(3rem,6vw,7rem)}
.gruende__head{margin-bottom:clamp(3rem,5.5vw,5rem);max-width:none}
.gruende__title{font-size:clamp(2.2rem,1.4rem + 2.5vw,4rem);font-weight:800;color:#fff;line-height:1.1;max-width:none;letter-spacing:-.02em;white-space:nowrap}
@media (max-width:1150px){.gruende__title{white-space:normal;font-size:var(--step-3)}}
.gruende__lead{margin-top:1.4rem;color:var(--muted-dark);font-size:clamp(1.5rem,1.2rem + .9vw,2.1rem);max-width:74ch;line-height:1.5}
.gruende__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(2rem,3.4vw,3.6rem);list-style:none;position:relative;z-index:1}
.gruende__item{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.gruende__icon{height:clamp(76px,6.4vw,108px);width:auto;flex:none;align-self:flex-start;object-fit:contain;margin-bottom:.7rem}
.gruende__item-title{font-size:clamp(1.45rem,1.2rem + .7vw,2rem);font-weight:800;color:#fff;line-height:1.15}
.gruende__item-text{color:var(--muted-dark);font-size:clamp(1.15rem,1rem + .5vw,1.5rem);line-height:1.55}
/* decorative pop-lines (top-right) + hand (bottom-left) straddling the border. */
.gruende__lines{position:absolute;right:clamp(2.5rem,4.5vw,5rem);top:clamp(1.8rem,3.5vw,3.2rem);width:clamp(48px,4.6vw,82px);height:auto;pointer-events:none}
.gruende__hand{position:absolute;left:clamp(8rem,12vw,15rem);bottom:clamp(-110px,-7vw,-60px);width:clamp(110px,11vw,210px);height:auto;transform:rotate(-6deg);pointer-events:none;z-index:2}
@media (max-width:900px){.gruende__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.gruende__grid{grid-template-columns:1fr}}

/* Section 3: Digitale Lösungen — WHITE 3-card */
.loesungen{position:relative;z-index:1;overflow:visible;padding-block:clamp(5rem,9vw,11rem);--maxw:1840px;
  border-bottom-left-radius:var(--radius-panel);border-bottom-right-radius:var(--radius-panel)}
/* pull the white panel up over the Gute-Gründe hand so it covers a bit more of the sleeve */
.gruende + .loesungen{margin-top:clamp(-80px,-2.8vw,-44px)}
/* the dark section after Loesungen tucks up behind its rounded bottom */
.loesungen + .section--dark{margin-top:calc(-1 * var(--radius-panel));position:relative;z-index:0;padding-top:clamp(5rem,8vw,8rem)}
.loesungen__head{position:relative;margin-bottom:clamp(3rem,5.5vw,5rem)}
.loesungen__title{font-size:clamp(2.8rem,1.7rem + 4.16vw,7rem);font-weight:800;color:var(--on-white);line-height:1.08;letter-spacing:-.03em;max-width:22ch}
.loesungen__title .badge{display:inline-block;background:var(--red);color:#fff;padding:.04em .3em;border-radius:.22em;transform:rotate(-1.5deg);font-style:normal}
/* clean source assets (Gruppe 70 hand + Gruppe 71 snap-lines) — upper-right of the headline */
.loesungen__hand{position:absolute;right:clamp(1rem,15.8vw,20rem);top:clamp(-4rem,-3.2vw,-2rem);width:clamp(180px,16vw,340px);height:auto;pointer-events:none;z-index:3}
.loesungen__lines{position:absolute;right:clamp(8rem,28.1vw,36rem);top:clamp(-9rem,-6.7vw,-5rem);width:clamp(60px,4.8vw,110px);height:auto;pointer-events:none;z-index:3}
.loesungen__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.3vw,1.25rem);list-style:none}
.solution-card{background:#fff;border:1px solid #ececef;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 24px rgba(14,14,16,.1),0 1px 4px rgba(14,14,16,.06);transition:transform .3s var(--ease),box-shadow .3s}
.solution-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(14,14,16,.14)}
.solution-card__media{position:relative;overflow:hidden;aspect-ratio:4/3}
.solution-card__media picture{display:block;width:100%;height:100%}
.solution-card__media picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.solution-card:hover .solution-card__media picture img{transform:scale(1.04)}
.solution-card__badge{position:absolute;top:5%;left:5%;z-index:2;width:clamp(46px,4.6vw,76px);height:auto;filter:drop-shadow(0 3px 6px rgba(0,0,0,.3));pointer-events:none}
.solution-card__body{padding:clamp(1.4rem,1.8vw,1.65rem);display:flex;flex-direction:column;gap:1rem;flex:1}
.solution-card__head{display:block}
.solution-card__title{font-size:clamp(1.6rem,1.25rem + 1.02vw,2.8rem);font-weight:800;color:var(--on-white);line-height:1.2}
/* arrow floats right so the heading flows beside it on line 1, full-width below (matches template) */
.solution-card__arrow{float:right;margin:.15em 0 .4rem 1rem;display:grid;place-items:center;width:clamp(44px,3.2vw,58px);height:clamp(44px,3.2vw,58px);border:1.5px solid var(--on-white);border-radius:50%;color:var(--on-white);transition:background .25s,color .25s}
.solution-card__arrow svg{width:42%;height:42%}
.solution-card__arrow:hover{background:var(--red);border-color:var(--red);color:#fff}
.solution-card__text{color:var(--muted-white);font-size:clamp(1.2rem,1rem + .62vw,1.72rem);line-height:1.5;flex:1}
.solution-card .btn--black{align-self:flex-start;margin-top:auto;font-size:clamp(1.2rem,1rem + .55vw,1.65rem);font-weight:800;padding:.72em 1.5em}
@media (max-width:860px){.loesungen__cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.loesungen__cards{grid-template-columns:1fr}.loesungen__hand{display:none}}

/* Section 4: Erfolgreiche Projekte — DARK static logo row */
.projekte{position:relative;overflow:visible;padding-block:clamp(3.5rem,7vw,6.5rem)}
.projekte__head{position:relative;text-align:center;margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.projekte__title{display:inline-block;font-size:clamp(2rem,1.3rem + 2.3vw,4rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em}
/* snap-lines just left of the headline's first word */
.projekte__lines{position:absolute;left:clamp(2rem,10vw,16rem);top:clamp(-2.8rem,-2.4vw,-1.4rem);width:clamp(46px,4.4vw,80px);height:auto;pointer-events:none}
/* ── Carousel (Kundenlogos, endlos, mehrere sichtbar) ─────────────────── */
.carousel{--per-view:5;--gap:clamp(1.5rem,3vw,3.5rem);--btn:clamp(42px,3.6vw,56px);
  display:grid;grid-template-columns:var(--btn) minmax(0,1fr) var(--btn);align-items:center;gap:clamp(.75rem,2vw,2rem);outline:none}
.carousel:focus-visible{outline:3px solid var(--red);outline-offset:8px;border-radius:var(--radius-sm)}
.carousel__viewport{overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.carousel__viewport:active{cursor:grabbing}
.carousel__track{display:flex;gap:var(--gap);will-change:transform}
.carousel__item{flex:0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  display:grid;place-items:center;height:clamp(56px,5.2vw,80px)}
.carousel__item img{height:clamp(30px,3.1vw,48px);width:auto;max-width:100%;object-fit:contain;opacity:.8;transition:opacity .3s;pointer-events:none}
/* optical balance: icon/stacked logos run a touch taller than the wordmarks */
.carousel__item--lg img{height:clamp(40px,4.1vw,64px)}
.carousel__item--md img{height:clamp(38px,3.9vw,60px)}
.carousel__item:hover img{opacity:1}
.carousel__btn{width:var(--btn);height:var(--btn);display:grid;place-items:center;padding:0;border-radius:50%;
  background:transparent;color:#fff;border:2px solid #fff;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.carousel__btn svg{width:48%;height:auto}
.carousel__btn--prev svg{transform:scaleX(-1)}
.carousel__btn:hover{background:#fff;color:var(--black)}
.carousel__btn:active{transform:scale(.94)}
.carousel__btn[hidden]{display:grid;visibility:hidden}
.carousel--static .carousel__viewport{cursor:auto}
@media (max-width:1100px){.carousel{--per-view:4}}
@media (max-width:800px){.carousel{--per-view:3}}
@media (max-width:520px){.carousel{--per-view:2;--gap:1.25rem;gap:.5rem}}
.projekte__lead{margin:clamp(2.2rem,4vw,3.4rem) auto 0;max-width:64ch;text-align:center;color:var(--muted-dark);font-size:clamp(1.15rem,.95rem + .6vw,1.55rem);line-height:1.6}
.projekte__hand{position:absolute;left:clamp(1rem,6.3vw,8rem);bottom:clamp(-4rem,-2.5vw,-1.5rem);width:clamp(160px,15vw,300px);height:auto;pointer-events:none;z-index:2}
@media (max-width:680px){.projekte__hand{display:none}}

/* Section 5: Referenzen — RED portfolio (Grid, gleiche Reihenfolge auf jeder Breite) */
.portfolio{padding-block:clamp(4rem,7vw,6.5rem)}
.portfolio__head{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(1.5rem,3vw,3rem);margin-bottom:clamp(2rem,4.5vw,4.6rem)}
.portfolio__title{font-size:clamp(2.6rem,1.6rem + 3.8vw,6.3rem);font-weight:800;color:#fff;line-height:1.14;letter-spacing:-.02em}
.portfolio__title .badge{display:inline-block;background:var(--black);color:#fff;padding:0 .34em .08em;border-radius:.2em;transform:rotate(-1.5deg);line-height:1.05}
.portfolio__lead{margin-top:clamp(1.4rem,2.5vw,2.2rem);color:#fff;font-size:clamp(1.15rem,.95rem + .6vw,1.55rem);line-height:1.55;max-width:34ch}
.portfolio__filters{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:flex-end}
.portfolio__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3.4vw,4rem) clamp(1.2rem,2.8vw,2.8rem)}
@media (min-width:821px){
  .portfolio__grid > .pcard:nth-child(odd){margin-top:clamp(2.5rem,4vw,4.5rem)}
}
.filter-pill{background:transparent;color:#fff;border:1.8px solid rgba(255,255,255,.75);border-radius:var(--radius-pill);padding:.6em 1.2em;font:600 clamp(1rem,.85rem + .48vw,1.35rem)/1 "Hanken Grotesk",sans-serif;white-space:nowrap;cursor:pointer;transition:background .25s var(--ease),color .25s,border-color .25s}
.filter-pill:hover{border-color:#fff}
.filter-pill.is-active{background:#fff;color:var(--red);border-color:#fff}
.filter-pill:focus-visible{outline:3px solid var(--black);outline-offset:3px}
.pcard{position:relative;margin:0;border-radius:var(--radius-panel);overflow:hidden;background:#0e0e10;box-shadow:0 30px 70px -30px rgba(10,10,10,.6)}
.pcard picture img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease)}
.pcard:hover picture img{transform:scale(1.04)}
.pcard--doerr{aspect-ratio:975/935}
.pcard--mac{aspect-ratio:815/930}
.pcard--trifold{aspect-ratio:810/985}
.pcard--biz{aspect-ratio:810/800}
/* client logo overlaid at the top of a card (DUPHORN, meyer) */
.pcard__brand{position:absolute;top:clamp(5%,3vw,8%);left:50%;transform:translateX(-50%);width:38%;height:auto;max-height:14%;object-fit:contain;z-index:2;pointer-events:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.pcard--biz .pcard__brand{width:36%}
.pcard--mac .pcard__brand{width:46%}
.pcard--trifold .pcard__brand{width:40%}
.pcard--doerr .pcard__brand{width:30%}
/* DÖRR card: clean flyers (DL mockup) + DÖRR logo + pointing hand poking out of the corner */
.pcard--doerr{overflow:visible}
.pcard--doerr picture img{border-radius:var(--radius-panel);object-position:50% 50%}
.pcard--doerr:hover picture img{transform:none}
.pcard__hand{position:absolute;top:clamp(-2.6rem,-2.4vw,-1.2rem);left:clamp(-2rem,-1.8vw,-.6rem);width:clamp(120px,13.5vw,210px);height:auto;transform:scaleX(-1) rotate(-8deg);z-index:3;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(0,0,0,.28))}
/* "Mehr zum Projekt" link on the business-card mockup */
.pcard__more{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:.5em;padding:clamp(1.4rem,2vw,2rem) clamp(1.6rem,2.2vw,2.4rem);color:#fff;font-weight:700;font-size:clamp(1rem,.9rem + .4vw,1.3rem);background:linear-gradient(transparent,rgba(10,10,10,.6));text-decoration:underline;text-underline-offset:4px}
.pcard__more svg{width:1.1em;height:1.1em;flex:none}
.pcard__more:hover{color:#fff;opacity:.85}
/* "Mehr Referenzen laden" centered link with circled arrow */
.portfolio__more{margin-top:clamp(2.4rem,4.5vw,4rem);display:flex;justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:.7em;color:#fff;font-weight:700;font-size:clamp(1.05rem,.9rem + .5vw,1.4rem);text-decoration:underline;text-underline-offset:5px}
.link-arrow__circle{display:grid;place-items:center;width:2.1em;height:2.1em;border:1.6px solid currentColor;border-radius:50%;text-decoration:none}
.link-arrow__circle svg{width:.95em;height:.95em}
.link-arrow:hover{opacity:.85}
/* "Mehr Referenzen laden" ist ein <button> → Browser-Standardstil zurücksetzen */
button.link-arrow{background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
button.link-arrow .link-arrow__circle{transition:transform .3s var(--ease)}
button.link-arrow:hover .link-arrow__circle{transform:translateY(3px)}
.portfolio__more[hidden]{display:none}
.pcard[hidden]{display:none}
/* Referenz-Karten (800×600 Mockups) */
.pcard--ref{aspect-ratio:1/1}
.pcard__caption{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1rem;row-gap:.15rem;
  padding:clamp(2.4rem,4vw,3.6rem) clamp(1.4rem,2.2vw,2.4rem) clamp(1.1rem,1.8vw,1.8rem);color:#fff;
  background:linear-gradient(transparent,rgba(10,10,10,.78) 60%)}
.pcard__name{flex:1 1 100%;font-weight:800;font-size:clamp(1.1rem,.95rem + .55vw,1.55rem);line-height:1.2}
.pcard__cat{font-size:clamp(.85rem,.8rem + .2vw,1rem);opacity:.85}
.pcard__link{display:inline-flex;align-items:center;gap:.35em;margin-left:auto;font-weight:700;font-size:clamp(.85rem,.8rem + .2vw,1rem);
  color:#fff;text-decoration:underline;text-underline-offset:3px}
.pcard__link svg{width:1em;height:1em}
.pcard__link:hover{opacity:.85}
.portfolio__empty{margin-top:clamp(1.5rem,3vw,2.5rem);text-align:center;color:#fff;font-weight:600;font-size:clamp(1.05rem,.9rem + .5vw,1.4rem)}
.portfolio__empty[hidden]{display:none}
/* Nachgeladene Referenz-Karten blenden gestaffelt ein */
.pcard--enter{animation:pcard-enter .7s var(--ease) both;animation-delay:calc(var(--i,0) * .09s)}
@keyframes pcard-enter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.pcard:focus{outline:none}
.pcard:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:820px){
  /* Mobil: Überschrift + Filter untereinander, Karten danach in einer Spalte – gleiche Reihenfolge wie im HTML */
  .portfolio__head{flex-direction:column;align-items:stretch;gap:clamp(1.5rem,5vw,2.2rem)}
  .portfolio__filters{justify-content:flex-start}
  .portfolio__grid{grid-template-columns:1fr}
}

/* Section: Beratung (WHITE, zwischen Portfolio und Kunden) – 2×2 versetzt:
   Bild | Text  /  Liste + Button | Bild */
.beratung{position:relative;z-index:1;padding-block:clamp(4rem,8vw,7.5rem);
  border-bottom-left-radius:var(--radius-panel);border-bottom-right-radius:var(--radius-panel)}
/* die dunkle Kunden-Section schiebt sich unter die runde Unterkante */
/* rote Portfolio-Section läuft hinter die runden Ecken oben */
.portfolio + .beratung{margin-top:calc(var(--radius-panel) * -1)}
.portfolio:has(+ .beratung){padding-bottom:calc(clamp(4rem,7vw,6.5rem) + var(--radius-panel))}
.beratung + .section--dark{margin-top:calc(var(--radius-panel) * -1);padding-top:calc(clamp(3.5rem,7vw,6rem) + var(--radius-panel))}
.beratung__grid{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"a intro" "points b";
  column-gap:clamp(2rem,6vw,7rem);row-gap:clamp(2.5rem,5vw,5rem);align-items:start}
.beratung__media{position:relative;margin:0;border-radius:var(--radius-panel);overflow:visible}
.beratung__media picture img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:var(--radius-panel);
  box-shadow:0 30px 70px -30px rgba(10,10,10,.45)}
.beratung__media--a{grid-area:a;width:min(100%,660px);justify-self:end}
.beratung__media--b{grid-area:b;width:min(100%,700px);justify-self:start;margin-top:0px;}
.beratung__lines{position:absolute;left:clamp(-3.4rem,-3vw,-1.6rem);top:clamp(-3.4rem,-3vw,-1.6rem);width:clamp(40px,4vw,70px);height:auto;z-index:2;pointer-events:none}
.beratung__intro{grid-area:intro;align-self:center}
.beratung__title{font-size:clamp(2.2rem,1.4rem + 2.7vw,4.6rem);font-weight:800;color:var(--on-white);line-height:1.14;letter-spacing:-.02em}
.beratung__title .badge{display:inline-block;background:var(--red);color:#fff;padding:.02em .3em .1em;border-radius:.2em;transform:rotate(-1.5deg)}
.beratung__lead{margin-top:clamp(1.2rem,2.2vw,2rem);color:var(--muted-white);font-size:clamp(1.1rem,.95rem + .5vw,1.45rem);line-height:1.6;max-width:54ch}
.beratung__points{grid-area:points;justify-self:end;width:min(100%,640px);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.8rem,3vw,2.6rem)}
.beratung__list{list-style:none;display:grid;
/* gap:clamp(.9rem,1.6vw,1.3rem); */
gap: clamp(.2rem,0.6vw,0.3rem);

}
.beratung__list li{display:flex;align-items:flex-start;gap:.9rem;font-size:clamp(1.05rem,.95rem + .35vw,1.3rem);line-height:1.45;color:var(--on-white);font-weight:600}
.beratung__check{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--red);color:#fff;margin-top:-.1em}
.beratung__check svg{width:60%;height:60%}
.beratung .btn--black{font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);font-weight:800;padding:.95em 2em}



.beratung__content{
  display:list-item !important;
  list-style:square !important;
  list-style-position:outside !important;
  margin-left:70px !important;
  font-weight:300 !important;
}

@media (max-width:820px){
  .beratung__grid{grid-template-columns:1fr;grid-template-areas:"intro" "a" "points" "b"}
  .beratung__media--a,.beratung__media--b,.beratung__points{justify-self:stretch;width:100%}
  .beratung__media--b{margin-top:0}
  .beratung__lines{left:-.6rem;top:-1.6rem}
}
/* Section 6: Testimonials */
.testimonials{padding-block:clamp(3.5rem,7vw,6rem)}
.testimonials__head{position:relative;text-align:center;margin-bottom:clamp(2.6rem,5vw,4.5rem)}
.testimonials__title{display:inline-block;font-size:clamp(2.4rem,1.5rem + 3.85vw,6.4rem);font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em}
.testimonials__title .badge{display:inline-block;background:var(--red);color:#fff;padding:.02em .32em .1em;border-radius:.22em;transform:rotate(-2deg)}
.testimonials__hand{position:absolute;right:clamp(7rem,19vw,25rem);top:clamp(-5.2rem,-4.6vw,-2.6rem);width:clamp(80px,8vw,150px);height:auto;transform:rotate(14deg);pointer-events:none;z-index:2}
/* Testimonial card — red logo circle left, quote right, X badge bottom-right */
.testimonial{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.8rem,3.5vw,4rem);align-items:center;max-width:1480px;margin-inline:auto;background:var(--surface);border:1px solid var(--line);border-radius:clamp(20px,2.4vw,32px);padding:clamp(2rem,3.5vw,3.4rem) clamp(2rem,4.5vw,4.5rem)}
.testimonial__logo{width:clamp(130px,15vw,240px);aspect-ratio:1;border-radius:50%;background:var(--red);display:grid;place-items:center;flex:none}
.testimonial__logo img{width:60%;height:auto;object-fit:contain}
.testimonial__title{font-size:clamp(1.45rem,1.1rem + 1.1vw,2.3rem);font-weight:800;color:#fff;margin-bottom:.7rem;line-height:1.25;max-width:20ch}
.testimonial__quote{color:var(--muted-dark);font-size:clamp(1.05rem,.95rem + .45vw,1.4rem);line-height:1.55;max-width:52ch}
.testimonial figcaption{margin-top:1.2rem;color:#fff;font-weight:700;font-size:clamp(1.05rem,.95rem + .45vw,1.4rem)}
.testimonial__x{position:absolute;right:clamp(1.4rem,2.4vw,2.6rem);bottom:clamp(1.4rem,2.4vw,2.6rem);width:clamp(40px,4vw,66px);height:auto;pointer-events:none}
/* Stage: alle Kundenstimmen liegen übereinander (gleiche Grid-Zelle) → Höhe = höchste, kein Springen */
.testimonials__stage{position:relative;display:grid;max-width:1480px;margin-inline:auto}
.testimonials__stage > .testimonial{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .6s}
.testimonials__stage > .testimonial.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease) .1s,transform .6s var(--ease) .1s,visibility 0s}
.testimonials__stage > .testimonial{width:100%}
/* Fortschrittsbalken für den Auto-Wechsel */
.testimonials__progress{position:absolute;left:clamp(20px,2.4vw,32px);right:clamp(20px,2.4vw,32px);bottom:0;height:3px;
  border-radius:3px;background:var(--red);transform:scaleX(0);transform-origin:left;pointer-events:none;opacity:.9}
.testimonials__progress.is-running{animation:testimonial-progress var(--interval,6000ms) linear forwards}
@keyframes testimonial-progress{to{transform:scaleX(1)}}
/* Clients-Carousel — rote Kreise, aktiver Kunde rot gefüllt */
.clients-carousel{--per-view:6;--gap:clamp(.8rem,1.6vw,1.6rem);max-width:1000px;margin:clamp(2.6rem,5vw,4.2rem) auto 0}
.clients-carousel .carousel__item{height:auto;padding-block:4px}
.client-btn{width:clamp(72px,7vw,112px);aspect-ratio:1;border-radius:50%;background:transparent;border:2.5px solid var(--red);
  display:grid;place-items:center;overflow:hidden;padding:clamp(.7rem,1.1vw,1.1rem);cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.client-btn img{max-width:100%;max-height:56%;width:auto;height:auto;object-fit:contain;pointer-events:none;opacity:.75;transition:opacity .3s}
.client-btn:hover{transform:translateY(-3px)}
.client-btn:hover img,.client-btn.is-active img{opacity:1}
.client-btn.is-active{background:var(--red)}
.client-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
/* Kürzel statt Logo (Kunden ohne Logodatei) */
.client-mono{font-family:"Space Grotesk","Hanken Grotesk",sans-serif;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;text-align:center}
.testimonial__logo .client-mono{font-size:clamp(2.2rem,1.4rem + 3vw,4.6rem)}
.client-btn .client-mono{font-size:clamp(1rem,.8rem + .7vw,1.55rem);opacity:.85;transition:opacity .3s}
.client-btn:hover .client-mono,.client-btn.is-active .client-mono{opacity:1}
.testimonial__org{display:block;font-weight:500;color:var(--muted-dark);font-size:.85em;margin-top:.15rem}
@media (max-width:900px){.clients-carousel{--per-view:5}}
@media (max-width:680px){.clients-carousel{--per-view:4}}
@media (max-width:480px){.clients-carousel{--per-view:3}}
@media (prefers-reduced-motion:reduce){.testimonials__stage > .testimonial{transition:none;transform:none}.testimonials__progress{display:none}}
@media (max-width:680px){.testimonial{grid-template-columns:1fr;text-align:center;justify-items:center}.testimonial__quote{margin-inline:auto}.testimonials__hand{display:none}}

/* Section 7: Kontakt */
.contact{padding-block:clamp(3rem,6vw,6rem)}
.contact__title{font-size:clamp(2.2rem,1.4rem + 2.7vw,4.6rem);font-weight:800;color:var(--on-white);line-height:1.14;letter-spacing:-.02em}
.contact__title__sub{font-size: clamp(1.8rem,3.5vw,3rem);font-weight:800;color:var(--on-white);line-height:1.14;letter-spacing:-.02em}
.contact__title .badge{display:inline-block;background:var(--red);color:#fff;padding:.02em .3em .1em;border-radius:.2em;transform:rotate(-1.5deg)}
/* Office: heading left, map right */
.contact__office{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(3rem,6vw,6rem)}
.contact__map{display:block;justify-self:start;width:100%;max-width:720px;border-radius:clamp(16px,1.8vw,26px);overflow:hidden;box-shadow:0 28px 60px -22px rgba(254,48,49,.4),0 12px 32px rgba(14,14,16,.12);transition:transform .35s var(--ease)}
.contact__map img{width:100%;height:auto;display:block}
.contact__map:hover{transform:translateY(-4px)}
.contact__address
{display:flex;
align-items:flex-start;
gap:.6rem;
margin-top:1.4rem;
font-style:normal;
font-size:clamp(2rem,.94rem + .2vw,1.15rem);
line-height:1.5;color:var(--muted-white);
translate: 0px -150px;
}
@media (max-width:680px){
	.contact__address{translate: 0px 0px;font-size:clamp(1.1rem,.94rem + .2vw,1.15rem);}
}


.contact__address svg{flex:none;width:1.3em;height:1.3em;margin-top:.15em;color:var(--red)}







/* Form block: full width below */
.contact__title--row{margin-bottom:clamp(1.8rem,3.5vw,3rem)}
.contact__form-block{max-width:1480px}
.fields-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,1.6vw,1.4rem);margin-bottom:clamp(.9rem,1.6vw,1.4rem)}
.fields-row .field{margin-bottom:0}
.field{display:grid;gap:.4rem;margin-bottom:clamp(.9rem,1.6vw,1.4rem)}
.field input,.field textarea{width:100%;background:#fff;border:1.5px solid #e0e0e6;border-radius:var(--radius-pill);padding:1.05em 1.5em;color:var(--on-white);font:inherit;font-size:clamp(1rem,.9rem + .35vw,1.25rem);transition:border-color .2s,box-shadow .2s}
.field textarea{border-radius:clamp(18px,2vw,28px);resize:vertical;min-height:clamp(140px,16vw,220px)}
.field input::placeholder,.field textarea::placeholder{color:#9a9aa0}
.field input:focus,.field textarea:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(254,48,49,.12)}
.field--check{grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:clamp(.82rem,.78rem + .15vw,.95rem);color:var(--muted-white);margin-top:.4rem}
.field--check a{color:var(--red);text-decoration:underline}
.field--check label{display:flex;gap:.7rem;align-items:flex-start}
.field--check input[type="checkbox"]{flex:none;width:1.15em;height:1.15em;margin-top:.2em;accent-color:var(--red)}
.field--hp{position:absolute;left:-9999px}
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-color:var(--red)}
.field__error{color:var(--red);font-size:.85rem}
.contact__form-block .btn--black{margin-top:.6rem;font-size:clamp(1.05rem,.95rem + .4vw,1.35rem);font-weight:800;padding:.95em 2em}
.form-status{margin-top:1rem;min-height:1.4em}
/* reCAPTCHA v3: Badge ausblenden – erlaubt, weil der Pflicht-Hinweistext am Formular steht */
.grecaptcha-badge{visibility:hidden}
.form-recaptcha-note{margin-top:.9rem;font-size:clamp(.78rem,.74rem + .12vw,.88rem);color:var(--muted-white);max-width:70ch}
.form-recaptcha-note a{color:inherit;text-decoration:underline}
.form-status[data-state="ok"]{color:var(--success)}.form-status[data-state="err"]{color:var(--red)}
@media (max-width:860px){.contact__office{grid-template-columns:1fr}}
@media (max-width:600px){.fields-row{grid-template-columns:1fr}}

/* Footer */
.site-footer{padding-block:clamp(1.8rem,3vw,2.8rem)}
.site-footer__row{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;color:var(--muted-dark)}
.site-footer__brand img{width:clamp(56px,4.4vw,84px);height:auto;display:block}
.site-footer__legal{font-size:clamp(.95rem,.88rem + .25vw,1.15rem)}
.site-footer__legal span{margin:0 .5em;color:var(--muted-dark)}
.site-footer__legal a{color:var(--muted-dark);text-decoration:none}
.site-footer__legal a:hover{color:#fff}

/* Legal pages */
.legal{max-width:70ch;margin-inline:auto;padding-block:8rem}
.legal h1{margin-bottom:2rem}
.legal h2{margin-top:3rem;margin-bottom:.75rem;font-size:var(--step-1)}
.legal p{margin-bottom:1rem;line-height:1.7;color:var(--text-muted)}
.legal ul{margin-bottom:1rem;padding-left:1.4rem;list-style:disc}
.legal ul li{margin-bottom:.5rem;line-height:1.7;color:var(--text-muted)}
.legal a{color:var(--red)}