/* ============================================================
   040.studio — Relaunch · zentrales Stylesheet
   Mood: Bauhaus / Swiss Grid · vollbreit · Editorial Contrast
   ============================================================ */
:root{
  --graphite:#101214; --ivory:#F7F6F2; --copper:#C56D42; --stone:#D8D3CC; --lavender:#8F83FF;
  --ink:#101214; --ink-soft:#5d6166; --ivory-soft:#a8a59d;
  --line:rgba(16,18,20,.14); --line-dark:rgba(247,246,242,.16);
  --paper:#FBFAF7;
  --disp:"Inter Tight",system-ui,sans-serif; --body:"Newsreader",Georgia,serif; --ui:"Schibsted Grotesk",system-ui,sans-serif; --mono:"JetBrains Mono",monospace; --claim:"Fraunces",Georgia,serif;
  --pad:clamp(1.4rem,5vw,5rem);
  --maxw:1680px;          /* harter Deckel nur auf XXL-Screens, sonst vollbreit */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{font-family:var(--body);background:var(--ivory);color:var(--ink);line-height:1.6;font-size:16px;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;line-height:1.02;letter-spacing:-.025em;}
.mono{font-family:var(--mono);}
.cu{color:var(--copper);}

/* vollbreite Sektionen mit Innen-Padding; Inhalt bis --maxw zentriert (nur XXL begrenzt) */
.sec{padding:clamp(4.5rem,9vw,8rem) var(--pad);position:relative;}
.sec--dark{background:var(--graphite);color:var(--ivory);}
.sec--dark h2,.sec--dark h3{color:var(--ivory);}
.wrap{max-width:var(--maxw);margin-inline:auto;width:100%;}
.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper);display:inline-block;}
.rule{height:1px;background:var(--line);width:100%;}
.sec--dark .rule{background:var(--line-dark);}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:500;font-size:.95rem;padding:.8rem 1.5rem;border:1px solid transparent;border-radius:2px;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn--p{background:var(--copper);color:var(--ivory);}
.btn--p:hover{background:#b35f37;}
.btn--g{border-color:var(--line);color:var(--ink);}
.sec--dark .btn--g{border-color:var(--line-dark);color:var(--ivory);}
.btn--g:hover{border-color:currentColor;}
.arr{transition:transform .2s;}.btn:hover .arr{transform:translateX(3px);}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:1rem var(--pad);transition:box-shadow .3s,padding .3s;
  background:rgba(247,246,242,.9);backdrop-filter:blur(14px);}
.nav__logo{filter:none;}
.nav.scr{box-shadow:0 1px 0 var(--line);padding-top:.7rem;padding-bottom:.7rem;}
.nav__logo{height:24px;}
.nav__links{display:flex;gap:2rem;font-family:var(--disp);font-weight:500;font-size:.92rem;}
.nav__links a{position:relative;color:var(--ink);opacity:.92;padding-bottom:3px;transition:color .2s;}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--copper);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.nav__links a:hover{color:var(--copper);}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1);}
.nav__links a.active{color:var(--copper);}
.nav__right{display:flex;align-items:center;gap:1.3rem;}
.nav__lang{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);}.nav__lang b{color:var(--ink);}
@media(max-width:860px){.nav__links{display:none;}}

/* ---------- HERO (Home) ---------- */
.hero{position:relative;padding:clamp(8rem,15vw,11rem) var(--pad) clamp(3rem,6vw,5rem);overflow:hidden;}
.hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1px,transparent 1px,transparent calc(100%/6));
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 32%,transparent 78%);
          mask-image:linear-gradient(to bottom,#000 0,#000 32%,transparent 78%);opacity:.7;}
.hero__top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--ink);padding-top:.7rem;margin-bottom:clamp(2.5rem,6vw,5rem);}
.hero__top .mono{font-size:.72rem;letter-spacing:.14em;color:var(--ink-soft);}
.hero__main{position:relative;z-index:2;display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,5vw,4rem);align-items:center;}
@media(max-width:960px){.hero__main{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(2.7rem,7.5vw,6.4rem);font-weight:700;}
.hero__sub{margin-top:1.8rem;max-width:52ch;color:#2c2f33;font-weight:600;font-size:clamp(1.1rem,1.6vw,1.35rem);}
.hero__claim{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-top:1.4rem;}
.hero__cta{margin-top:2.2rem;display:flex;gap:.9rem;flex-wrap:wrap;}
.hero__vis{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:var(--paper);overflow:hidden;}
.hero__vis img{width:100%;height:100%;object-fit:cover;}
.hero__shape{position:absolute;z-index:3;}
.shape-circle{width:clamp(70px,9vw,120px);height:clamp(70px,9vw,120px);border-radius:50%;background:var(--copper);}
.shape-tri{width:0;height:0;border-left:clamp(40px,5vw,62px) solid transparent;border-right:clamp(40px,5vw,62px) solid transparent;border-bottom:clamp(70px,9vw,108px) solid var(--lavender);}
.shape-sq{width:clamp(56px,7vw,92px);height:clamp(56px,7vw,92px);border:2px solid var(--graphite);}

/* Kennzahlen */
.metrics{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);border:1px dashed var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(2.5rem,6vw,4.5rem);}
.metric{padding:1.6rem clamp(1.1rem,2vw,1.8rem);border-left:1px dashed var(--line);}
.metric:first-child{border-left:0;}
.metric .n{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.03em;}
.metric .n b{color:var(--copper);font-weight:700;}
.metric .l{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin-top:.6rem;letter-spacing:.04em;}
@media(max-width:680px){.metrics{grid-template-columns:1fr;}.metric{border-left:0;border-top:1px dashed var(--line);}.metric:first-child{border-top:0;}}

/* ---------- Sektions-Kopf (2-spaltig → bessere Textverteilung) ---------- */
.shead{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.2rem);}
@media(max-width:860px){.shead{grid-template-columns:1fr;gap:1.2rem;}}
.shead__t h2{font-size:clamp(2rem,4.4vw,3.4rem);}
.shead__t .label{margin-bottom:1rem;}
.shead__d{color:#2c2f33;font-weight:600;font-size:1.12rem;max-width:54ch;}
.sec--dark .shead__d{color:#cfccc4;}

/* ---------- METHODE ---------- */
.method{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);}
@media(max-width:860px){.method{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.method{grid-template-columns:1fr;}}
.step{padding:1.8rem 1.6rem 2.2rem;border-right:1px solid var(--line);}
.step:last-child{border-right:0;}
.step .mono{font-size:.72rem;color:var(--copper);letter-spacing:.08em;}
.step h3{font-size:1.5rem;margin:.9rem 0 .5rem;}
.step p{font-size:.92rem;color:var(--ink-soft);}
.sec--dark .step{border-color:var(--line-dark);}
.sec--dark .step p{color:var(--ivory-soft);}

/* ---------- PLATTFORM / Karten ---------- */
.cards{display:grid;grid-template-columns:1.1fr .9fr;gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);}
@media(max-width:860px){.cards{grid-template-columns:1fr;}}
.card{background:var(--graphite);padding:2.2rem;position:relative;transition:background .3s;}
.card:hover{background:#16191d;}
.card__badge{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-soft);display:flex;align-items:center;gap:.5rem;}
.dot{width:7px;height:7px;border-radius:50%;background:#5ad17e;box-shadow:0 0 0 4px rgba(90,209,126,.15);}
.card h3{font-size:1.9rem;margin:1rem 0 .6rem;color:var(--ivory);}
.card p{color:var(--ivory-soft);font-size:.96rem;max-width:42ch;}
.feat{list-style:none;margin-top:1.4rem;display:flex;flex-direction:column;gap:.55rem;}
.feat li{font-size:.88rem;display:flex;gap:.6rem;align-items:baseline;color:var(--ivory);}
.feat li::before{content:"";width:7px;height:7px;background:var(--copper);display:inline-block;flex:none;transform:translateY(1px);}

/* ---------- ÜBER UNS ---------- */
.about{background:var(--paper);}
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem);margin-bottom:clamp(2.5rem,5vw,4rem);}
@media(max-width:680px){.diptych{grid-template-columns:1fr;}}
.frame{position:relative;border:1px solid var(--line);overflow:hidden;background:var(--stone);}
.frame img{width:100%;height:clamp(300px,40vw,560px);object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.02);}
.frame figcaption{position:absolute;left:0;bottom:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory);background:rgba(16,18,20,.72);padding:.45rem .8rem;backdrop-filter:blur(4px);}
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
@media(max-width:860px){.story{grid-template-columns:1fr;}}
.story__lead{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.12;}
.story__body{columns:2;column-gap:2.4rem;}
@media(max-width:680px){.story__body{columns:1;}}
.story__body p{margin-bottom:1.1rem;color:#33363a;font-size:1.02rem;break-inside:avoid;}
.story__sign{font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;color:var(--copper);margin-top:.4rem;columns:1;}
.profiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,4rem);}
@media(max-width:680px){.profiles{grid-template-columns:1fr;}}
.profile{background:var(--ivory);padding:2rem;}
.profile .mono{font-size:.72rem;color:var(--copper);letter-spacing:.08em;}
.profile h3{font-size:1.5rem;margin:.7rem 0 .2rem;}
.profile .role{font-family:var(--disp);font-weight:500;color:var(--ink-soft);font-size:.95rem;margin-bottom:1rem;}
.profile p{font-size:.92rem;color:#3a3d41;max-width:46ch;}
.profile .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 1.2rem;}
.profile .tags span{font-family:var(--mono);font-size:.68rem;border:1px solid var(--line);padding:.25rem .55rem;color:var(--ink-soft);}
.profile .li{font-family:var(--disp);font-weight:500;font-size:.88rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);}
.profile .li:hover{color:var(--copper);}

/* ---------- CASES (Grid auf Home) ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2vw,1.8rem);}
@media(max-width:860px){.cgrid{grid-template-columns:1fr;}}
.case{background:#fff;display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 16px 40px -24px rgba(16,18,20,.32);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.case:hover{transform:translateY(-6px);box-shadow:0 32px 62px -24px rgba(16,18,20,.42);border-color:rgba(197,109,66,.4);}
.case__img{aspect-ratio:16/10;overflow:hidden;background:var(--stone);border-bottom:1px solid var(--line);}
.case__img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s;}
.case:hover .case__img img{transform:scale(1.05);}
.case__b{padding:1.4rem 1.5rem 1.7rem;}
.case__b .mono{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper);}
.case__b h3{font-size:1.3rem;margin:.5rem 0 .5rem;}
.case__b p{font-size:.92rem;color:var(--ink-soft);}
.case__b .more{font-family:var(--mono);font-size:.74rem;color:var(--ink);margin-top:.9rem;display:inline-flex;gap:.4rem;}

/* ---------- KONTAKT ---------- */
.contact{text-align:center;}
.contact h2{font-size:clamp(2.4rem,6vw,4.5rem);}
.contact p{color:var(--ivory-soft);max-width:48ch;margin:1.4rem auto 2.2rem;font-size:1.05rem;}
.contact__cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;}

/* ---------- FOOTER ---------- */
.footer{background:var(--graphite);color:var(--ivory-soft);border-top:1px solid var(--line-dark);padding:2.2rem var(--pad);display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center;}
.footer img{height:20px;filter:brightness(0) invert(1);opacity:.9;}
.footer .mono{font-size:.78rem;letter-spacing:.04em;}
.footer a:hover{color:var(--ivory);}

/* ============================================================
   SUBPAGE-BAUSTEINE (Produkt- & Case-Detailseiten)
   ============================================================ */
/* Subpage-Hero */
.phero{padding:clamp(7.5rem,13vw,10rem) var(--pad) clamp(2.5rem,5vw,4rem);position:relative;}
.phero--dark{background:var(--graphite);color:var(--ivory);}
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:1.6rem;display:flex;gap:.5rem;align-items:center;}
.phero--dark .crumb{color:var(--ivory-soft);}
.crumb a:hover{color:var(--copper);}
.phero h1{font-size:clamp(2.6rem,6.5vw,5.2rem);font-weight:700;}
.phero__sub{margin-top:1.4rem;max-width:60ch;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-soft);}
.phero--dark .phero__sub{color:var(--ivory-soft);}
.phero__meta{margin-top:clamp(2rem,4vw,2.6rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  width:fit-content;max-width:100%;border:1px dashed var(--line);border-radius:14px;overflow:hidden;font-family:var(--mono);}
.phero__meta > div{padding:1rem 1.4rem;border-left:1px dashed var(--line);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
.phero__meta > div:first-child{border-left:0;}
.phero__meta b{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(1.3rem,2.3vw,1.85rem);letter-spacing:-.01em;text-transform:none;color:var(--copper);margin-bottom:.2rem;}
@media(max-width:560px){.phero__meta{grid-template-columns:1fr;width:100%;}.phero__meta > div{border-left:0;border-top:1px dashed var(--line);}.phero__meta > div:first-child{border-top:0;}}
.phero--dark .phero__meta,.phero--dark .phero__meta > div{border-color:rgba(247,246,242,.2);}
.phero--dark .phero__meta{color:var(--ivory-soft);}
.phero--dark .phero__meta b{color:var(--copper);}

/* Rechtstexte (Impressum / Datenschutz) */
.legal{max-width:78ch;font-size:1rem;line-height:1.75;color:var(--ink-soft);}
.legal h2{font-family:var(--disp);font-size:clamp(1.5rem,3vw,2rem);font-weight:600;color:var(--ink);margin-top:2.8rem;margin-bottom:.9rem;line-height:1.1;}
.legal h2:first-child{margin-top:0;}
.legal h3{font-family:var(--disp);font-size:clamp(1.1rem,2vw,1.3rem);font-weight:600;color:var(--ink);margin-top:1.8rem;margin-bottom:.6rem;}
.legal p{margin-bottom:1rem;}
.legal ul{list-style:none;margin:0 0 1.2rem;padding:0;}
.legal li{position:relative;padding-left:1.4rem;margin-bottom:.5rem;}
.legal li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;background:var(--copper);border-radius:50%;}
.legal a{color:var(--copper);text-decoration:underline;text-underline-offset:2px;}
.legal a:hover{color:var(--ink);}
.legal .legal__addr{font-family:var(--mono);font-size:.92rem;line-height:1.7;color:var(--ink);}
.legal .legal__note{font-size:.86rem;color:var(--ink-soft);border-left:2px solid var(--line);padding-left:1rem;margin:1.4rem 0;}

/* großes Bühnen-/Screenshot-Bild */
.shot{width:100%;border:1px solid var(--line);overflow:hidden;background:var(--stone);}
.shot img{width:100%;display:block;}
.shot--tall img{height:clamp(360px,46vw,640px);object-fit:cover;object-position:top;}

/* Split: Text + Bild */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
.split--rev .split__media{order:-1;}
@media(max-width:860px){.split{grid-template-columns:1fr;}.split--rev .split__media{order:0;}}
.split__t h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:1rem;}
.split__t p{color:var(--ink-soft);font-size:1.05rem;max-width:52ch;margin-bottom:1rem;}
.sec--dark .split__t p{color:var(--ivory-soft);}

/* Feature-Liste (Zeilen) */
.frows{border-top:1px solid var(--line);}
.frow{display:grid;grid-template-columns:.4fr 1.6fr;gap:1.5rem;padding:1.6rem 0;border-bottom:1px solid var(--line);}
@media(max-width:680px){.frow{grid-template-columns:1fr;gap:.4rem;}}
.frow .mono{font-size:.74rem;color:var(--copper);}
.frow h3{font-size:1.35rem;margin-bottom:.4rem;}
.frow p{color:var(--ink-soft);font-size:.98rem;max-width:60ch;}

/* Screenshot-Galerie */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
@media(max-width:860px){.gallery{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.gallery{grid-template-columns:1fr;}}
.gallery figure{background:var(--ivory);overflow:hidden;}
.gallery img{width:100%;height:clamp(220px,24vw,300px);object-fit:cover;object-position:top;}
.gallery figcaption{font-family:var(--mono);font-size:.72rem;color:var(--ink-soft);padding:.7rem .9rem;}

/* Zitat / Kundenstimme */
.quote{max-width:30ch;}
.quote blockquote{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.02em;line-height:1.15;}
.quote cite{font-family:var(--mono);font-style:normal;font-size:.8rem;color:var(--copper);margin-top:1.2rem;display:block;}

/* CTA-Band */
.ctaband{background:var(--copper);color:var(--ivory);text-align:center;padding:clamp(3.5rem,7vw,6rem) var(--pad);}
.ctaband h2{font-size:clamp(2rem,4.5vw,3.4rem);}
.ctaband p{margin:1rem auto 1.8rem;max-width:46ch;opacity:.92;}
.ctaband .btn--g{border-color:rgba(247,246,242,.5);color:var(--ivory);}
.ctaband .btn--g:hover{border-color:var(--ivory);background:rgba(247,246,242,.1);}

/* zurück-Link */
.backlink{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);display:inline-flex;gap:.5rem;}
.backlink:hover{color:var(--copper);}

/* ============================================================
   HOME v2 — Flow-Chart, Laptop-Mockup, Produkt-/Vita-Container, Boxicons
   ============================================================ */
/* Kennzahlen mit Icon */
.metric i{font-size:1.4rem;color:var(--copper);display:block;margin-bottom:.7rem;}
.metric .n{font-size:clamp(1.8rem,3.6vw,2.8rem);}

/* große Headline-Utility */
.bighead{font-size:clamp(2.6rem,6vw,4.8rem);font-weight:700;letter-spacing:-.03em;line-height:1;}
.lead-bold{font-weight:600;font-size:clamp(1.15rem,1.9vw,1.55rem);max-width:60ch;margin-top:1.3rem;}
.sec--dark .lead-bold{color:var(--ivory);}

/* ---------- METHODE als Flow-Chart ---------- */
.flow{display:flex;align-items:stretch;flex-wrap:nowrap;margin-top:1.8rem;}
.flow__step{flex:1;border:1px solid var(--line);padding:1.9rem 1.5rem 2.1rem;background:var(--ivory);position:relative;}
.flow__step .ico{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(197,109,66,.12);color:var(--copper);font-size:1.55rem;margin-bottom:1.1rem;}
.flow__step .mono{font-size:.72rem;color:var(--copper);letter-spacing:.1em;}
.flow__step h3{font-size:1.45rem;margin:.7rem 0 .5rem;}
.flow__step p{font-size:.92rem;color:var(--ink-soft);font-weight:500;}
.flow__arrow{flex:0 0 auto;align-self:center;font-size:1.7rem;color:var(--copper);background:var(--ivory);z-index:3;margin:0 -.7rem;border-radius:50%;}
@media(max-width:860px){.flow{flex-direction:column;}.flow__arrow{transform:rotate(90deg);margin:-.7rem 0;}}

/* ---------- Laptop-/Browser-Mockup ---------- */
.device{filter:drop-shadow(0 26px 44px rgba(0,0,0,.4));}
.device__bar{background:#202428;border:1px solid var(--line-dark);border-bottom:0;border-radius:10px 10px 0 0;padding:.55rem .85rem;display:flex;align-items:center;gap:.45rem;}
.device__bar span{width:9px;height:9px;border-radius:50%;background:#3a3f44;}
.device__bar span.c{background:var(--copper);}
.device__scr{border:1px solid var(--line-dark);border-top:0;overflow:hidden;background:#0c0d0f;aspect-ratio:16/10;}
.device__scr img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.device__base{height:13px;margin:0 -6%;border-radius:0 0 16px 16px;background:linear-gradient(180deg,#2a2e33,#15181b);}

/* ---------- Produkt-Container (Plattform) ---------- */
.platgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:860px){.platgrid{grid-template-columns:1fr;}}
.product{border:1px solid var(--line-dark);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));padding:1.8rem;display:flex;flex-direction:column;gap:1.5rem;transition:border-color .3s;}
.product:hover{border-color:rgba(197,109,66,.5);}
.product__body h3{font-size:1.9rem;color:var(--ivory);margin:.7rem 0 .5rem;}
.product__body p{color:var(--ivory-soft);font-size:.98rem;font-weight:500;max-width:42ch;}
.pfeat{list-style:none;margin:1.2rem 0 1.5rem;display:flex;flex-direction:column;gap:.55rem;}
.pfeat li{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem;color:var(--ivory);}
.sec:not(.sec--dark) .pfeat li{color:var(--ink);} /* helle Sektion: dunkle Schrift (sonst weiß auf weiß) */
.pfeat li i{color:var(--copper);font-size:1.05rem;transform:translateY(2px);flex:none;}

/* ---------- Über uns: Vita-Container mit Foto ---------- */
.vitas{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:clamp(2.5rem,5vw,4rem);}
@media(max-width:760px){.vitas{grid-template-columns:1fr;}}
.vita{border:1px solid var(--line);background:var(--ivory);padding:1.7rem;display:grid;grid-template-columns:130px 1fr;gap:1.5rem;align-items:start;}
@media(max-width:480px){.vita{grid-template-columns:1fr;}}
.vita__photo{width:130px;height:165px;overflow:hidden;border:1px solid var(--line);background:var(--stone);}
.vita__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03);}
.vita__t .who{font-family:var(--mono);font-size:.72rem;color:var(--copper);letter-spacing:.08em;display:inline-flex;align-items:center;gap:.4rem;}
.vita__t h3{font-size:1.45rem;margin:.5rem 0 .2rem;}
.vita__t .role{font-family:var(--disp);font-weight:600;color:var(--ink-soft);font-size:.92rem;margin-bottom:.9rem;}
.vita__t p{font-size:.92rem;color:#3a3d41;font-weight:500;}
.vita__t .tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 1rem;}
.vita__t .tags span{font-family:var(--mono);font-size:.66rem;border:1px solid var(--line);padding:.22rem .5rem;color:var(--ink-soft);}
.vita__t .li{font-family:var(--disp);font-weight:600;font-size:.85rem;display:inline-flex;align-items:center;gap:.35rem;color:var(--ink);}
.vita__t .li:hover{color:var(--copper);}

/* Boxicons in Buttons/Listen allgemein */
.btn i{font-size:1.1rem;}
.case__b .more i,.crumb i{vertical-align:middle;}

/* Motion */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.07s;}.rv[data-d="2"]{transition-delay:.14s;}.rv[data-d="3"]{transition-delay:.21s;}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* ============================================================
   Über-uns-Teaser (Home) + Team/Standorte (Unterseite)
   ============================================================ */
.teaser{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;}
@media(max-width:760px){.teaser{grid-template-columns:1fr;}}
.teaser__media img{width:100%;height:clamp(260px,30vw,400px);object-fit:cover;object-position:50% 22%;filter:grayscale(1) contrast(1.03);border:1px solid var(--line);}
.teaser__t h2{font-size:clamp(2rem,4.4vw,3.2rem);margin:.8rem 0 1rem;}
.teaser__t p{color:#2c2f33;font-weight:600;font-size:1.1rem;max-width:54ch;margin-bottom:1.6rem;}
.sec--dark .teaser__t p{color:#d7d4cc;}
.sec--dark .teaser__media img{border-color:var(--line-dark);}

/* Standort in Vita */
.vita__t .loc{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4rem;margin:-.4rem 0 .9rem;}
.vita__t .loc i{color:var(--copper);font-size:.95rem;}
.vita__photo--ph{display:grid;place-items:center;background:rgba(197,109,66,.1);}
.vita__photo--ph span{font-family:var(--disp);font-weight:700;font-size:2rem;color:var(--copper);}
.vita__photo--ph small{position:absolute;bottom:6px;font-family:var(--mono);font-size:.55rem;color:var(--ink-soft);}
.vita__photo{position:relative;}

/* Team-Grid (weitere Mitarbeiter) */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(1.5rem,3vw,2.5rem);}
@media(max-width:760px){.team{grid-template-columns:1fr;}}
.member{background:var(--ivory);padding:1.7rem;}
.member__av{width:54px;height:54px;border-radius:50%;background:rgba(197,109,66,.12);color:var(--copper);display:grid;place-items:center;font-size:1.5rem;font-family:var(--disp);font-weight:700;margin-bottom:1rem;}
.member h3{font-size:1.2rem;margin-bottom:.2rem;}
.member .role{font-family:var(--disp);font-weight:600;color:var(--ink-soft);font-size:.88rem;margin-bottom:.7rem;}
.member .loc{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:.4rem;}
.member .loc i{color:var(--copper);font-size:.95rem;}

/* Präsenz-Chips */
.presence{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem;}
.presence span{font-family:var(--mono);font-size:.78rem;border:1px solid var(--line);padding:.45rem .85rem;display:inline-flex;gap:.45rem;align-items:center;color:var(--ink-soft);}
.presence i{color:var(--copper);}
.sec--dark .presence span{border-color:var(--line-dark);color:var(--ivory-soft);}
/* Verteiltes Team — Standort-Karten */
.netgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.5vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:900px){.netgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.netgrid{grid-template-columns:1fr;}}
.node{background:#1b1e22;border:1px solid var(--line-dark);border-radius:18px;padding:clamp(1.4rem,2vw,1.8rem);
  box-shadow:0 20px 48px -24px rgba(0,0,0,.6);transition:transform .25s ease,border-color .25s ease;}
.node:hover{transform:translateY(-4px);border-color:rgba(197,109,66,.45);}
.node__loc{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--copper);display:inline-flex;align-items:center;gap:.4rem;margin-bottom:1rem;}
.node__loc i{font-size:1.05rem;}
.node h3{font-family:var(--disp);font-weight:700;font-size:1.35rem;color:var(--ivory);margin-bottom:.3rem;}
.node p{font-size:.95rem;color:var(--ivory-soft);font-weight:500;}
.netnote{display:flex;align-items:center;gap:.7rem;margin-top:clamp(1.6rem,3vw,2.4rem);font-family:var(--ui);font-size:1.02rem;color:var(--ivory-soft);max-width:60ch;}
.netnote i{font-size:1.7rem;color:var(--copper);flex:none;}

/* Floating "nach oben" */
.totop{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:70;
  width:48px;height:48px;border-radius:50%;background:var(--graphite);color:var(--ivory);
  display:grid;place-items:center;font-size:1.5rem;border:1px solid var(--line-dark);
  box-shadow:0 10px 28px -10px rgba(16,18,20,.5);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .3s,transform .3s,background .25s;}
.totop.show{opacity:1;transform:none;pointer-events:auto;}
.totop:hover{background:var(--copper);transform:translateY(-2px);}
@media(prefers-reduced-motion:reduce){.totop{transition:opacity .2s;}}

/* ============================================================
   Design v2 — größere Headlines, Breite besser nutzen, Copy bold
   ============================================================ */
.hero h1{font-size:clamp(2.3rem,4.9vw,4.4rem);line-height:1.02;}
.phero h1{font-size:clamp(2.8rem,7.2vw,6.4rem);}
.shead__t h2{font-size:clamp(2.4rem,5.6vw,4.6rem);}
.bighead{font-size:clamp(3rem,7.2vw,6.4rem);line-height:.98;}
.split__t h2{font-size:clamp(2rem,4.2vw,3.4rem);}
.contact h2{font-size:clamp(2.8rem,6.5vw,5.6rem);}
.ctaband h2{font-size:clamp(2.2rem,5vw,4rem);}
.story__lead{font-size:clamp(1.7rem,3vw,2.6rem);}
.teaser__t h2{font-size:clamp(2.2rem,4.6vw,3.6rem);}

/* mehr Breite für Copy */
.shead__d{max-width:64ch;}
.phero__sub{max-width:66ch;font-weight:600;color:#2c2f33;}
.phero--dark .phero__sub{color:#cfccc4;}
.split__t p{max-width:60ch;}
.frow p{max-width:68ch;}
.story__body{column-gap:3rem;}

/* Copy/Claims einheitlich kräftiger (bold) */
.step p,.flow__step p,.case__b p,.frow p,.split__t p,.member .role,.metric .l{font-weight:500;}
.card p,.product__body p{font-weight:500;}
.case__b p{font-size:.95rem;color:#3a3d41;}
.story__body p{font-size:1.06rem;color:#2f3236;font-weight:500;}
.contact p{font-weight:500;}

/* ============================================================
   Typo v2 — Claims in Fraunces (Serif), Copy in Hanken Grotesk
   ============================================================ */
.hero__claim{font-family:var(--claim);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:clamp(1.25rem,2.1vw,1.8rem);color:var(--ink);}
.story__lead{font-family:var(--claim);font-style:italic;font-weight:400;letter-spacing:-.01em;line-height:1.15;}
.quote blockquote{font-family:var(--claim);font-style:italic;font-weight:400;}
.contact h2{font-family:var(--claim);font-weight:500;letter-spacing:-.01em;line-height:1.05;}
.story__sign{font-family:var(--claim);font-style:italic;text-transform:none;letter-spacing:0;font-size:1.05rem;}
/* Copy etwas luftiger in Hanken */
body{font-size:16.5px;letter-spacing:-.002em;}

/* Rechtstexte: volle Breite, zweispaltig (lesbar) */
.legal{max-width:none;columns:2;column-gap:clamp(2.5rem,5vw,5.5rem);}
.legal h2,.legal h3{break-after:avoid;-webkit-column-break-after:avoid;}
.legal h2:first-child{margin-top:0;}
.legal p,.legal ul,.legal li,.legal .legal__addr,.legal .legal__note{break-inside:avoid;}
@media(max-width:860px){.legal{columns:1;}}

/* Kennzahlen: sauber stapeln (Zahl über Label, kein Zusammenlaufen) */
.metric .n,.metric .l{display:block;}
.metric .n b{color:var(--copper);}

/* Sektions-Copy neben Headlines prominenter */
.shead__d{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.45;color:#222528;}
.sec--dark .shead__d{color:#d7d4cc;}

/* ============================================================
   Lesbarkeit — größere, luftigere Serif-Copy
   ============================================================ */
body{font-size:18px;line-height:1.72;}
.shead__d{font-size:clamp(1.35rem,1.9vw,1.7rem);line-height:1.55;}
.hero__sub{font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.5;}
.phero__sub{font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.55;}
.lead-bold{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.45;}
.story__lead{line-height:1.2;}
.story__body p{font-size:1.22rem;line-height:1.72;}
.split__t p{font-size:1.2rem;line-height:1.68;}
.frow p{font-size:1.14rem;line-height:1.62;}
.card p,.product__body p{font-size:1.1rem;line-height:1.6;}
.case__b p{font-size:1.08rem;line-height:1.58;}
.step p,.flow__step p{font-size:1.06rem;line-height:1.58;}
.pfeat li,.feat li{font-size:1.02rem;line-height:1.5;}
.profile p,.vita__t p,.member .role{font-size:1.04rem;line-height:1.6;}
.legal{font-size:1.14rem;line-height:1.85;}
.contact p{font-size:1.2rem;line-height:1.55;}
.teaser__t p{font-size:1.2rem;line-height:1.6;}

/* ============================================================
   Boxicons als Gestaltungselement — deutlich größer
   ============================================================ */
.flow__step .ico{width:72px;height:72px;font-size:2.3rem;margin-bottom:1.3rem;}
.metric i{font-size:2.1rem;margin-bottom:.85rem;}
.member__av{width:68px;height:68px;font-size:2.1rem;}
.pfeat li i,.feat li i{font-size:1.35rem;transform:translateY(3px);}
.btn i{font-size:1.35rem;}
.vita__t .who i,.vita__t .loc i,.member .loc i,.presence i,.crumb i{font-size:1.2rem;}
.case__b .more i{font-size:1.2rem;vertical-align:-2px;}
.dot{width:9px;height:9px;}

/* ============================================================
   saasFlow-Produktseite
   ============================================================ */
.screenframe{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 44px 90px -44px rgba(16,18,20,.55);}
.screenframe__bar{background:#1b1e22;display:flex;align-items:center;gap:.5rem;padding:.75rem 1.1rem;}
.screenframe__bar span{width:11px;height:11px;border-radius:50%;background:#3a3f44;flex:none;}
.screenframe__bar span.c{background:var(--copper);}
.screenframe__bar .url{margin-left:1rem;font-family:var(--mono);font-size:.76rem;color:var(--ivory-soft);}
.screenframe img{width:100%;display:block;}
.screenframe--crop img{height:clamp(420px,46vw,720px);object-fit:cover;object-position:top;}
.screenframe--mini img{height:clamp(300px,30vw,420px);object-fit:cover;object-position:top;}

/* Capability-Strip */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);border:1px dashed rgba(247,246,242,.2);border-radius:14px;overflow:hidden;margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:760px){.statstrip{grid-template-columns:1fr 1fr;}.statstrip .st:nth-child(odd){border-left:0;}.statstrip .st:nth-child(n+3){border-top:1px dashed rgba(247,246,242,.2);}}
.statstrip .st{padding:1.8rem;border-left:1px dashed rgba(247,246,242,.2);}
.statstrip .st:first-child{border-left:0;}
.statstrip .st .n{font-family:var(--disp);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.4rem);color:var(--ivory);letter-spacing:-.02em;line-height:1;}
.statstrip .st .n b{color:var(--copper);font-weight:700;}
.statstrip .st .l{font-family:var(--mono);font-size:.74rem;color:var(--ivory-soft);margin-top:.6rem;letter-spacing:.03em;}

/* Modul-Ökosystem */
.modgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,1.5vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:900px){.modgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.modgrid{grid-template-columns:1fr;}}
/* Einzelne, schwebende Karten mit Schatten */
.modcard{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.8rem;
  box-shadow:0 14px 36px -20px rgba(16,18,20,.32);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.modcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(16,18,20,.42);border-color:rgba(197,109,66,.45);}
.modcard .mi{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.75rem;color:#fff;margin-bottom:1.1rem;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);}
.modcard h3{font-size:1.25rem;margin-bottom:.35rem;color:var(--ink);}
.modcard p{font-size:.98rem;color:var(--ink-soft);font-weight:500;}
.modcard .more{font-family:var(--mono);font-size:.72rem;color:var(--copper);margin-top:1rem;display:inline-flex;gap:.35rem;align-items:center;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;}
.modcard:hover .more{opacity:1;transform:none;}
/* dunkle Sektion: dunkle Karten */
.sec--dark .modcard{background:#1b1e22;border-color:var(--line-dark);box-shadow:0 20px 48px -22px rgba(0,0,0,.7);}
.sec--dark .modcard:hover{border-color:rgba(197,109,66,.55);box-shadow:0 34px 70px -24px rgba(0,0,0,.8);}
.sec--dark .modcard h3{color:var(--ivory);}
.sec--dark .modcard p{color:var(--ivory-soft);}

/* ============================================================
   Tiers v2 — elegante, schwebende Preis-Karten
   ============================================================ */
.tiers{gap:clamp(1rem,1.8vw,1.7rem);background:transparent;border:0;margin-top:clamp(3rem,5vw,4.5rem);align-items:stretch;overflow:visible;}
.tier{border:1px solid var(--line);border-radius:22px;padding:2.5rem 2rem 2.2rem;box-shadow:0 18px 44px -26px rgba(16,18,20,.32);transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:visible;}
.tier:hover{transform:translateY(-6px);box-shadow:0 32px 62px -26px rgba(16,18,20,.45);}
.tier--hl{transform:scale(1.055);border-color:transparent;
  box-shadow:0 0 0 1px rgba(197,109,66,.55),0 36px 76px -26px rgba(197,109,66,.5),0 26px 54px -30px rgba(0,0,0,.6);z-index:2;}
.tier--hl:hover{transform:scale(1.055) translateY(-6px);}
@media(max-width:760px){.tier--hl{transform:none;}.tier--hl:hover{transform:translateY(-6px);}}
.tier__price{font-size:clamp(2.3rem,3.7vw,3.2rem);margin:.4rem 0 1.2rem;}
.tier__feats{gap:.8rem;margin-top:.5rem;}
.tier__feats li{font-size:1.02rem;align-items:flex-start;}
.tier__feats li i{color:var(--copper);font-size:1.25rem;transform:translateY(1px);}
.tier--hl .tier__feats li i{color:var(--copper-soft);}
/* floatende "Beliebteste Wahl"-Badge */
.tier__badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);margin:0;
  font-size:.66rem;padding:.45rem 1.1rem;display:inline-flex;align-items:center;gap:.4rem;
  box-shadow:0 12px 26px -8px rgba(197,109,66,.65);white-space:nowrap;}
.tier__badge i{font-size:.92rem;}

/* ============================================================
   Screenshot-Galerie + Lightbox
   ============================================================ */
.shotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.6rem);margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:900px){.shotgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.shotgrid{grid-template-columns:1fr;}}
.gshot{margin:0;}
.shot__a{display:block;position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 16px 40px -24px rgba(16,18,20,.4);background:#fff;aspect-ratio:16/10;cursor:zoom-in;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.shot__a img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .4s ease;}
.shot__a:hover{transform:translateY(-4px);border-color:rgba(197,109,66,.5);box-shadow:0 28px 56px -24px rgba(16,18,20,.5);}
.shot__a:hover img{transform:scale(1.04);}
.shot__zoom{position:absolute;top:.6rem;right:.6rem;width:34px;height:34px;border-radius:50%;background:rgba(16,18,20,.6);
  backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--ivory);font-size:1.1rem;opacity:0;transition:opacity .25s;}
.shot__a:hover .shot__zoom{opacity:1;}
.gshot figcaption{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);margin-top:.7rem;letter-spacing:.02em;}
.sec--dark .shot__a{border-color:var(--line-dark);background:#0c0d0f;box-shadow:0 18px 44px -24px rgba(0,0,0,.65);}
.sec--dark .gshot figcaption{color:var(--ivory-soft);}
/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,9,11,.95);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem);opacity:0;transition:opacity .25s ease;}
.lightbox.open{display:flex;opacity:1;}
.lightbox__fig{margin:0;max-width:1240px;width:100%;display:flex;flex-direction:column;gap:1rem;align-items:center;}
.lightbox__fig img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);}
.lightbox__cap{font-family:var(--mono);font-size:.85rem;color:var(--ivory);letter-spacing:.03em;text-align:center;}
.lightbox__cap b{color:var(--copper);font-weight:500;margin-right:.55rem;}
.lb__btn{position:absolute;background:rgba(247,246,242,.1);border:1px solid rgba(247,246,242,.22);color:var(--ivory);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.5rem;cursor:pointer;transition:background .2s,border-color .2s;}
.lb__btn:hover{background:rgba(197,109,66,.85);border-color:transparent;}
.lb__close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);}
.lb__prev{left:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%);}
.lb__next{right:clamp(.5rem,2vw,2rem);top:50%;transform:translateY(-50%);}
@media(max-width:560px){.lb__btn{width:42px;height:42px;font-size:1.3rem;}.lb__prev{left:.5rem;}.lb__next{right:.5rem;}}

/* Durchlaufendes Karussell (Marquee, pausiert bei Hover) */
.carousel{position:relative;overflow:hidden;margin-top:clamp(2rem,4vw,3rem);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);}
.carousel__track{display:flex;gap:clamp(1rem,1.5vw,1.4rem);width:max-content;will-change:transform;}
.carousel.is-ready .carousel__track{animation:marquee var(--dur,80s) linear infinite;}
.carousel:hover .carousel__track,.carousel:focus-within .carousel__track{animation-play-state:paused;}
.carousel.is-paused .carousel__track{animation-play-state:paused;}
.carousel.is-static .carousel__track{justify-content:center;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.carousel .shot__a{flex:0 0 auto;width:clamp(260px,30vw,400px);margin:0;}
.shot__cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .85rem .65rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ivory);
  background:linear-gradient(transparent,rgba(8,9,11,.88));
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none;}
.shot__a:hover .shot__cap{opacity:1;transform:none;}
.carousel + .carousel__hint,.carousel__hint{text-align:center;font-family:var(--mono);font-size:.72rem;color:var(--ivory-soft);margin-top:1.2rem;letter-spacing:.04em;}
.sec:not(.sec--dark) .carousel__hint{color:var(--ink-soft);}
/* Posts-Karussell (Kampagnen — quadratisch/hochformatig, gleiche Höhe) */
.carousel--posts img{height:clamp(300px,38vw,440px);width:auto;flex:0 0 auto;border-radius:16px;display:block;
  border:1px solid var(--line);box-shadow:0 18px 44px -24px rgba(16,18,20,.42);}
.sec--dark .carousel--posts img{border-color:var(--line-dark);}
/* Instagram-Follow-Link (selfi support) */
.ig-follow{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.1rem;color:var(--copper);font-family:var(--mono);font-size:1rem;letter-spacing:.02em;transition:transform .2s ease,filter .2s ease;}
.ig-follow i{font-size:2.7rem;line-height:1;}
.ig-follow:hover{transform:translateY(-2px);filter:brightness(1.12);}

/* Modul-Switcher (Chips zu allen Modulen) */
.modswitch{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.5rem,3vw,2.5rem);}
.modchip{display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.05rem;border-radius:100px;
  border:1px solid var(--line);background:#fff;font-family:var(--ui);font-weight:500;font-size:.95rem;color:var(--ink);
  box-shadow:0 8px 20px -14px rgba(16,18,20,.4);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.modchip i{font-size:1.2rem;}
a.modchip:hover{transform:translateY(-3px);border-color:rgba(197,109,66,.5);box-shadow:0 14px 28px -14px rgba(16,18,20,.45);}
.modchip--active{background:var(--copper);border-color:transparent;color:#fff;cursor:default;box-shadow:0 10px 24px -10px rgba(197,109,66,.6);}
.modchip--active i,.modchip--active .cu{color:#fff !important;}

/* Kundenstimme (prominent, volle Breite, mit Porträt) */
.testimonial .tstm{display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin:0;}
@media(max-width:760px){.testimonial .tstm{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.8rem;}}
.tstm__img{width:clamp(150px,18vw,230px);aspect-ratio:1;object-fit:cover;border-radius:50%;flex:none;
  border:1px solid var(--line-dark);box-shadow:0 22px 54px -20px rgba(0,0,0,.6);}
.tstm__body{position:relative;}
.tstm__mark{position:absolute;top:-3.2rem;left:-.6rem;font-family:var(--claim);font-size:7rem;line-height:1;color:var(--copper);opacity:.32;pointer-events:none;}
@media(max-width:760px){.tstm__mark{position:static;display:block;font-size:4rem;margin-bottom:-1.5rem;}}
.tstm__quote{font-family:var(--claim);font-style:italic;font-weight:400;font-size:clamp(1.5rem,2.8vw,2.3rem);line-height:1.32;color:var(--ivory);margin:0;}
.tstm__by{font-family:var(--mono);font-size:.85rem;letter-spacing:.04em;color:var(--ivory-soft);margin-top:1.6rem;}
.tstm__by b{color:var(--copper);font-weight:500;}
/* Helle Variante */
.testimonial:not(.sec--dark) .tstm__quote{color:var(--ink);}
.testimonial:not(.sec--dark) .tstm__by{color:var(--ink-soft);}
.testimonial:not(.sec--dark) .tstm__img{border-color:var(--line);box-shadow:0 22px 54px -24px rgba(16,18,20,.35);}

/* Social-Wall (Kampagnen-Posts, Masonry) */
.socialgrid{columns:3 250px;column-gap:clamp(1rem,1.6vw,1.4rem);margin-top:clamp(2rem,4vw,3rem);}
.socialgrid img{width:100%;border-radius:14px;margin:0 0 clamp(1rem,1.6vw,1.4rem);display:block;break-inside:avoid;
  box-shadow:0 14px 36px -22px rgba(16,18,20,.4);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease;}
.socialgrid img:hover{transform:translateY(-4px);box-shadow:0 24px 50px -22px rgba(16,18,20,.5);}
.sec--dark .socialgrid img{border-color:var(--line-dark);}
@media(max-width:520px){.socialgrid{columns:2 150px;}}

/* ============================================================
   Flow-Boxen v2 (elegante, schwebende Karten)
   ============================================================ */
.flow{gap:.65rem;}
.flow__step{border:1px solid var(--line-dark);border-radius:18px;background:#1b1e22;box-shadow:0 22px 50px -26px rgba(0,0,0,.72);padding:2rem 1.6rem;transition:transform .25s ease,box-shadow .25s ease;}
.flow__step:hover{transform:translateY(-5px);box-shadow:0 34px 66px -26px rgba(0,0,0,.82);}
.flow__step h3{color:var(--ivory);}
.flow__step p{color:var(--ivory-soft);}
.flow__step .ico{background:rgba(197,109,66,.18);}
.flow__arrow{background:transparent;margin:0;border-radius:0;}
@media(max-width:860px){.flow__arrow{transform:rotate(90deg);margin:-.2rem 0;}}

/* ============================================================
   Mobile-Menü (Hamburger + Overlay)
   ============================================================ */
/* eigener animierter Hamburger (morpht zu X) */
.nav__burger{display:none;background:none;border:0;padding:.5rem .2rem;cursor:pointer;}
.nav__burger .burger{display:block;width:30px;height:16px;position:relative;}
.nav__burger .burger span{position:absolute;left:0;height:2px;width:100%;background:var(--ink);border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),top .3s ease,opacity .2s ease,width .3s ease,background .2s;}
.nav__burger .burger span:nth-child(1){top:0;}
.nav__burger .burger span:nth-child(2){top:7px;width:64%;}
.nav__burger .burger span:nth-child(3){top:14px;}
.nav__burger:hover .burger span{background:var(--copper);}
.nav__burger.is-open .burger span:nth-child(1){top:7px;transform:rotate(45deg);}
.nav__burger.is-open .burger span:nth-child(2){opacity:0;width:100%;}
.nav__burger.is-open .burger span:nth-child(3){top:7px;transform:rotate(-45deg);width:100%;}
.nav__mobile{display:none;}
@media(max-width:860px){
  .nav__burger{display:inline-flex;align-items:center;}
  .nav__right{display:none;}
  .nav__mobile{position:fixed;inset:0;z-index:58;background:rgba(247,246,242,.98);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;justify-content:center;gap:0;
    padding:clamp(5rem,18vw,7rem) clamp(1.6rem,7vw,3rem) clamp(2rem,8vw,3rem);
    transform:translateY(-100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overflow-y:auto;}
  .nav__mobile.open{transform:none;}
  .nav__mobile a:not(.btn){display:flex;justify-content:space-between;align-items:center;gap:1rem;
    font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,7.5vw,2.5rem);color:var(--ink);letter-spacing:-.02em;
    padding:.9rem 0;border-bottom:1px solid var(--line);}
  .nav__mobile a:not(.btn)::after{content:"";width:11px;height:11px;border-right:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg);opacity:.5;flex:none;margin-right:.25rem;transition:transform .2s,opacity .2s;}
  .nav__mobile a.active{color:var(--copper);}
  .nav__mobile a.active::after{opacity:1;}
  .nav__mobile .m-cta{margin-top:1.7rem;}
  .nav__mobile .m-cta a{font-size:1.05rem;padding:1rem 1.9rem;width:100%;justify-content:center;}
  .nav__mobile .m-lang{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;}
  .nav__mobile .m-lang__label{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.12em;}
  .nav__mobile .langtoggle{font-size:1.05rem;}
  .nav__mobile .langtoggle a{padding:.65rem 1.6rem;}
  .nav__mobile > *{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease;}
  .nav__mobile.open > *{opacity:1;transform:none;}
  .nav__mobile.open > *:nth-child(1){transition-delay:.10s;}
  .nav__mobile.open > *:nth-child(2){transition-delay:.16s;}
  .nav__mobile.open > *:nth-child(3){transition-delay:.22s;}
  .nav__mobile.open > *:nth-child(4){transition-delay:.28s;}
  .nav__mobile.open > *:nth-child(5){transition-delay:.34s;}
  .nav__mobile.open > *:nth-child(6){transition-delay:.40s;}
}

/* Sprach-Umschalter (segmentierter Toggle) */
.langtoggle{display:inline-flex;border:1px solid var(--line);border-radius:100px;overflow:hidden;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;}
.langtoggle a{padding:.42rem 1rem;color:var(--ink-soft);line-height:1;display:inline-flex;align-items:center;transition:background .2s,color .2s;}
.langtoggle a.active{background:var(--copper);color:var(--ivory);font-weight:600;}
.langtoggle a:not(.active):hover{color:var(--ink);background:rgba(16,18,20,.05);}

/* Modul-Detailseite */
.mhero-ico{width:66px;height:66px;border-radius:16px;display:grid;place-items:center;font-size:2.2rem;color:#fff;margin-bottom:1.4rem;}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem);}
@media(max-width:760px){.tiers{grid-template-columns:1fr;}}
.tier{background:var(--ivory);color:var(--ink);padding:2rem;display:flex;flex-direction:column;}
.tier__price{color:var(--ink);}
.tier--hl{background:var(--graphite);color:var(--ivory);}
.tier--hl h3,.tier--hl .tier__price{color:var(--ivory);}
.tier__name{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper);}
.tier__price{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.2vw,2.6rem);margin:.5rem 0 1.1rem;letter-spacing:-.02em;line-height:1;}
.tier__price small{font-family:var(--body);font-size:.95rem;font-weight:500;color:var(--ink-soft);}
.tier--hl .tier__price small{color:var(--ivory-soft);}
.tier__year{font-family:var(--mono);font-size:.74rem;color:var(--ink-soft);margin:-.7rem 0 1.1rem;}
.tier--hl .tier__year{color:var(--ivory-soft);}
.tier__feats{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-top:.2rem;}
.tier__feats li{font-size:1rem;display:flex;gap:.55rem;align-items:baseline;}
.tier__feats li i{color:var(--copper);font-size:1.1rem;flex:none;transform:translateY(2px);}
.tier__badge{align-self:flex-start;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;background:var(--copper);color:var(--ivory);padding:.2rem .6rem;border-radius:100px;margin-bottom:.9rem;}

/* Platzhalter: Modul-Screenshot folgt (von Roman) */
.shot-pending{border:2px dashed var(--line-dark);border-radius:14px;padding:clamp(3rem,8vw,6rem) 2rem;text-align:center;color:var(--ivory-soft);background:rgba(255,255,255,.02);}
.shot-pending i{font-size:3rem;color:var(--copper);}
.shot-pending h3{color:var(--ivory);margin:1rem 0 .5rem;font-family:var(--disp);}
.shot-pending p{max-width:50ch;margin:0 auto;}
.shot-pending code{font-family:var(--mono);font-size:.85rem;color:var(--copper);}

/* "NEU"-Blitzer (Starburst-Badge) */
.flash{display:inline-grid;place-items:center;width:64px;height:64px;flex:none;background:var(--copper);color:var(--ivory);font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;
  clip-path:polygon(50% 0,61% 18%,82% 12%,78% 33%,98% 39%,84% 54%,98% 70%,77% 73%,79% 95%,59% 84%,50% 100%,41% 84%,21% 95%,23% 73%,2% 70%,16% 54%,2% 39%,22% 33%,18% 12%,39% 18%);
  transform:rotate(-8deg);animation:flashpulse 2.2s ease-in-out infinite;}
@keyframes flashpulse{0%,100%{transform:rotate(-8deg) scale(1);}50%{transform:rotate(-8deg) scale(1.08);}}
@media(prefers-reduced-motion:reduce){.flash{animation:none;}}

/* Großes zentrales Statement (Claim) */
.statement{text-align:center;}
.statement .big{font-family:var(--claim);font-style:italic;font-weight:400;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.16;letter-spacing:-.01em;max-width:22ch;margin:0 auto;color:var(--ink);}
.sec--dark .statement .big{color:var(--ivory);}
.statement p.sub{margin:1.6rem auto 0;max-width:56ch;font-size:1.18rem;color:#2c2f33;font-weight:500;}
.sec--dark .statement p.sub{color:#d7d4cc;}