/* ==========================================================================
   FemBrand — Design System v3  (Brandboard "Markenkompass"-Look)
   Magenta · Lila · Blau · Navy   ·   Asap (thin) + Caveat (Akzent)
   Abwechselnd dunkle (Indigo/Purple) & helle (Creme/Blush) Sektionen.
   ========================================================================== */
:root{
  --magenta:#9618D1;   --magenta-dark:#7E14B0;  --magenta-bright:#A82BE6;
  --lila:#8044D8;      --blau:#3F8CFF;          --blau-deep:#2E6FE0;  --blau-soft:#6E9BFF;
  --navy:#191630;      --helllila:#B388C5;

  /* helle Flächen */
  --cream:#FBF6F3;  --blush:#F7EFF4;  --paper:#ffffff;
  --line:#ECE9E3;   --line-2:#E7E3DB; --line-3:#ECE7E0;

  /* dunkle Flächen */
  --ink:#1E1437;  --ink-2:#1A0E34;  --ink-3:#140924;  --ink-card:#2A1E42;  --ink-line:#3A2C52;

  /* Text auf hell */
  --t-head:#191630; --t-body:#54505E; --t-mut:#6B6675; --t-meta:#9C97A4;
  /* Text auf dunkel */
  --t-head-d:#F4F2F9; --t-body-d:#B7B1C6; --t-soft-d:#D8D3E2; --t-mut-d:#8C86A0; --t-accent-d:#CDBEEA;

  --wrap:1140px;
  --grad:linear-gradient(100deg,#CE8BFF 0%,#9618D1 60%);
  --grad-rainbow:linear-gradient(90deg,#3F8CFF,#8044D8,#9618D1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--cream);
  font-family:'Asap',system-ui,sans-serif;font-weight:300;
  font-size:16px;line-height:1.6;color:var(--t-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px;}
.narrow{max-width:860px;}
.mid{max-width:1040px;}

/* ---------- Typo-Bausteine ---------- */
h1,h2,h3,h4{margin:0;color:var(--t-head);font-weight:200;line-height:1.1;letter-spacing:0.004em;}
.display{font-weight:200;font-size:clamp(38px,5.6vw,62px);line-height:1.05;color:var(--t-head);}
.h2{font-weight:200;font-size:clamp(31px,4.4vw,46px);line-height:1.1;color:var(--t-head);}
.h3{font-weight:500;font-size:clamp(20px,2.4vw,24px);line-height:1.2;color:var(--t-head);}
.lead{font-weight:300;font-size:clamp(17px,1.6vw,20px);line-height:1.65;color:var(--t-mut);}
.eyebrow{font-weight:500;font-size:12px;letter-spacing:0.26em;text-transform:uppercase;color:var(--magenta);}
.kicker{font-family:'Caveat',cursive;font-weight:600;font-size:26px;color:var(--magenta);line-height:1;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hl-blue{color:var(--blau-deep);}
em.soft{font-style:italic;}
.section-head{max-width:760px;margin:0 auto 60px;text-align:center;}
.section-head .eyebrow{display:block;margin-bottom:18px;}
.section-head .lead{margin:22px auto 0;}

/* ---------- Sektionen / Bühnen ---------- */
.sec{padding:clamp(72px,10vw,104px) 0;position:relative;}
.sec-cream{background:var(--cream);}
.sec-blush{background:var(--blush);}
.sec-blush-grad{background:linear-gradient(180deg,#F7EDF4 0%,#F3E6F1 100%);}
.sec-ink{background:var(--ink);color:var(--t-body-d);}
.sec-ink .display,.sec-ink .h2,.sec-ink .h3,.sec-ink h1,.sec-ink h2,.sec-ink h3{color:var(--t-head-d);}
.sec-ink .lead{color:var(--t-body-d);}
.sec-ink .eyebrow{color:var(--helllila);}
.sec-ink .kicker{color:var(--helllila);}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-family:'Asap';font-weight:600;font-size:16px;border-radius:7px;
  padding:15px 30px;cursor:pointer;text-decoration:none;white-space:nowrap;border:0;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, filter .2s ease;}
.btn-primary{background:var(--magenta);color:#fff;box-shadow:0 10px 26px rgba(150,24,209,0.28);}
.btn-primary:hover{background:var(--magenta-dark);transform:translateY(-2px);box-shadow:0 14px 34px rgba(150,24,209,0.42);}
.sec-ink .btn-primary:hover{background:var(--magenta-bright);}
.btn-outline{background:transparent;border:1.5px solid var(--magenta);color:var(--magenta);padding:13.5px 28px;}
.btn-outline:hover{background:var(--magenta);color:#fff;transform:translateY(-2px);}
.btn-dark2{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:var(--t-head-d);padding:14px 28px;}
.btn-dark2:hover{background:rgba(255,255,255,0.16);transform:translateY(-2px);}
.btn-lg{font-size:17px;padding:18px 42px;}
.textlink{color:var(--magenta);font-weight:600;border-bottom:1.5px solid var(--magenta);padding-bottom:2px;}
.textlink:hover{filter:brightness(1.1);}
.sec-ink .textlink{color:var(--blau-soft);border-color:var(--blau-soft);}

/* ---------- Topbar / Navigation ---------- */
.topbar{background:var(--ink);border-bottom:1px solid var(--ink-line);position:sticky;top:0;z-index:60;
  transition:background .3s ease, box-shadow .3s ease;}
.topbar.scrolled{background:rgba(24,15,46,0.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 6px 24px rgba(0,0,0,0.28);}
.topbar-inner{max-width:var(--wrap);margin:0 auto;padding:16px 40px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;transition:padding .3s ease;}
.topbar.scrolled .topbar-inner{padding:9px 40px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand img{width:42px;height:42px;transition:width .3s,height .3s;}
.topbar.scrolled .brand img{width:36px;height:36px;}
.brand-word{font-family:'Asap';font-size:20px;color:var(--t-head-d);font-weight:500;letter-spacing:0.01em;}
.brand-word b{font-weight:800;}
.nav-links{display:flex;align-items:center;gap:26px;}
.nav-links a{font-size:14px;font-weight:400;color:var(--t-body-d);transition:color .2s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-cta{background:var(--magenta);color:#fff !important;font-weight:600;font-size:14px;padding:11px 22px;
  border-radius:6px;box-shadow:0 8px 22px rgba(150,24,209,0.32);}
.nav-cta:hover{background:var(--magenta-bright);transform:translateY(-1px);}
.burger{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1;}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;top:100%;right:18px;flex-direction:column;align-items:flex-start;
    background:var(--ink-2);border:1px solid var(--ink-line);border-radius:14px;padding:20px 24px;gap:16px;min-width:200px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);}
  .nav-links.open{display:flex;}
  .burger{display:block;}
}

/* ---------- Hero (dunkel · Signatur) ---------- */
.hero{background:linear-gradient(165deg,#2C1356 0%,#1A0E34 58%,#140924 100%);position:relative;overflow:hidden;color:var(--t-body-d);}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 76% -12%, #7A2FC0 0%, rgba(122,47,192,0) 50%),
            radial-gradient(90% 80% at 6% 112%, #4A1C86 0%, rgba(74,28,134,0) 58%);}
.mesh{position:absolute;border-radius:50%;pointer-events:none;}
.mesh-a{top:-200px;right:-100px;width:640px;height:640px;
  background:radial-gradient(circle,#B026D6 0%,rgba(176,38,214,0) 62%);opacity:.55;filter:blur(16px);animation:bgmesh 18s ease-in-out infinite;}
.mesh-b{bottom:-240px;left:-160px;width:600px;height:600px;
  background:radial-gradient(circle,#7C2BD0 0%,rgba(124,43,208,0) 62%);opacity:.42;filter:blur(20px);animation:bgmesh2 24s ease-in-out infinite;}
@keyframes bgmesh{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,4%) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
@keyframes bgmesh2{0%{transform:translate(0,0) scale(1.12)}50%{transform:translate(6%,-5%) scale(1)}100%{transform:translate(0,0) scale(1.12)}}
.hero-inner{max-width:var(--wrap);margin:0 auto;padding:clamp(70px,9vw,96px) 40px clamp(78px,10vw,104px);position:relative;z-index:2;}
.badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);
  border-radius:30px;padding:9px 18px;margin-bottom:32px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blau);box-shadow:0 0 10px var(--blau);}
.badge span.txt{font-weight:500;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--t-accent-d);}
.hero h1{font-weight:200;font-size:clamp(40px,7vw,62px);line-height:1.05;color:var(--t-head-d);max-width:920px;}
.hero h1 .accent{font-weight:600;}
.hero-sub{font-weight:300;font-size:clamp(17px,1.7vw,20px);line-height:1.6;color:var(--t-body-d);margin:30px 0 0;max-width:660px;}
.hero-actions{display:flex;align-items:center;gap:26px;margin-top:42px;flex-wrap:wrap;}
.hero-actions .meta{font-weight:300;font-size:14px;color:var(--t-mut-d);line-height:1.5;}
.hero-quote{display:flex;align-items:center;gap:14px;margin-top:52px;padding-top:30px;border-top:1px solid var(--ink-line);max-width:660px;flex-wrap:wrap;}
.hero-quote .kicker{font-size:24px;color:#B388C5;}
.hero-quote .src{font-weight:300;font-size:13px;color:#6A6486;}

/* ---------- Stat-Band (dunkel · Glas) ---------- */
.statband{background:var(--ink-2);border-top:1px solid rgba(255,255,255,0.06);}
.stat-grid{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.stat{flex:1;min-width:210px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;padding:30px;text-align:center;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.stat .num{font-weight:200;font-size:50px;line-height:1;color:var(--t-head-d);}
.stat .num small{color:#B57DE8;font-size:1em;font-weight:200;}
.stat .lbl{font-weight:400;font-size:13px;letter-spacing:0.06em;color:#9C93B8;margin-top:10px;}
.stat-note{text-align:center;font-weight:300;font-size:13px;color:#6E6690;margin-top:26px;}

/* ---------- Karten (weiß auf hell) ---------- */
.cards{display:grid;gap:24px;}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:32px 34px;
  transition:transform .25s ease, box-shadow .25s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,22,48,0.10);}
.card .q{font-weight:400;font-size:22px;color:var(--t-head);margin-bottom:12px;line-height:1.25;}
.card p{font-weight:300;font-size:15px;line-height:1.65;color:var(--t-body);margin:0;}

/* Methode · nummerierte Karten mit Akzentstrich */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.method .step{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:38px 32px;
  transition:transform .25s ease, box-shadow .25s ease;}
.method .step:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(25,22,48,0.10);}
.method .n{font-weight:200;font-size:34px;line-height:1;}
.method .bar{width:46px;height:2px;margin:16px 0 22px;}
.method .step h3{font-weight:500;font-size:24px;color:var(--t-head);margin:0 0 12px;}
.method .step p{font-weight:300;font-size:15px;line-height:1.65;color:var(--t-body);margin:0;}
.acc-magenta{color:var(--magenta);} .bar.acc-magenta{background:var(--magenta);}
.acc-lila{color:var(--lila);}       .bar.acc-lila{background:var(--lila);}
.acc-blau{color:var(--blau);}        .bar.acc-blau{background:var(--blau);}

/* Module · Liste */
.modlist{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;}
.modlist .row{display:flex;align-items:baseline;gap:26px;padding:28px 38px;border-bottom:1px solid #EFEBE3;}
.modlist .row:last-child{border-bottom:0;}
.modlist .row .n{font-weight:200;font-size:30px;color:#B388C5;flex:none;width:54px;}
.modlist .row h3{font-weight:600;font-size:22px;color:var(--t-head);margin:0 0 6px;}
.modlist .row p{font-weight:300;font-size:15px;line-height:1.6;color:var(--t-body);margin:0;}
.modlist .row.plus{background:linear-gradient(90deg,rgba(150,24,209,0.06),transparent);}
.modlist .row.plus .n{color:var(--magenta);}
.modlist .row .mod-after{font-weight:600;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--magenta);margin:16px 0 9px;}
.modlist .row .mod-out{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
.modlist .row .mod-out li{position:relative;padding-left:22px;font-weight:300;font-size:14.5px;line-height:1.5;color:var(--t-body);margin:0;}
.modlist .row .mod-out li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;background:var(--magenta);}
.modlist .row .mod-out li b{font-weight:600;color:var(--t-head);}
.modlist .row .mod-result{margin:15px 0 0;font-weight:500;font-size:14px;line-height:1.5;color:var(--t-head);}
.modlist .row .mod-result b{color:var(--magenta);font-weight:600;}
/* Teil-/Stufen-Überschrift */
.part-head{margin:0 0 22px;}
.part-head .pt{font-weight:600;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--magenta);}
.part-head h3{font-weight:200;font-size:clamp(24px,3vw,32px);line-height:1.12;color:var(--t-head);margin:6px 0 8px;}
.part-head p{font-weight:300;font-size:16px;line-height:1.6;color:var(--t-mut);margin:0;max-width:680px;}
.modlist + .part-head{margin-top:54px;}

/* Transformation · 2-Spalten */
.transform{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.t-col{border-radius:14px;padding:40px;}
.t-now{background:var(--ink-card);border:1px solid var(--ink-line);}
.t-later{background:linear-gradient(155deg,#9618D1,#3F8CFF);}
.t-col .tag{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:24px;font-weight:500;}
.t-now .tag{color:#7B7592;} .t-later .tag{color:rgba(255,255,255,0.8);}
.t-col .item{font-weight:300;font-size:16px;line-height:1.55;margin-bottom:18px;}
.t-now .item{color:#A8A2BC;} .t-later .item{color:#fff;font-weight:400;}
.t-col .item:last-child{margin-bottom:0;}

/* Über / Foto-Split */
.split{display:flex;gap:56px;align-items:center;}
.split .media{flex:none;width:340px;}
.split .media img{width:100%;border-radius:14px;border:1px solid var(--line-2);aspect-ratio:4/5;object-fit:cover;}
.split .body{flex:1;}
.split .body p{font-weight:300;font-size:17px;line-height:1.7;color:var(--t-body);margin:0 0 18px;}
.split .body p strong{font-weight:600;color:var(--t-head);}

/* Proof / Testimonials */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.proof .t{background:var(--paper);border:1px solid var(--line-2);border-radius:12px;padding:32px;}
.proof .t p{font-weight:300;font-size:16px;line-height:1.65;color:#33303C;margin:0 0 22px;font-style:italic;}
.proof .who{display:flex;align-items:center;gap:12px;}
.proof .ava{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#EFE6F7;}
.proof .who .nm{font-weight:600;font-size:14px;color:var(--t-head);}
.proof .who .ro{font-size:11px;letter-spacing:0.06em;color:#9C97A4;}

/* Angebot / Preis-Karte (dunkel · Glow) */
.offer{position:relative;background:var(--ink-card);border:1px solid #5C4080;border-radius:18px;padding:48px;
  box-shadow:0 0 0 1px rgba(150,24,209,0.22), 0 30px 80px rgba(150,24,209,0.28);max-width:760px;margin:0 auto;}
.offer .ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--magenta);color:#fff;
  font-weight:700;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;padding:7px 18px;border-radius:30px;
  white-space:nowrap;box-shadow:0 10px 24px rgba(150,24,209,0.5);}
.offer .check{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.offer .check span.tick{color:var(--blau);font-size:18px;line-height:1.4;flex:none;}
.offer .check span.txt{font-weight:300;font-size:16px;line-height:1.5;color:var(--t-soft-d);}
.offer .pricebox{border-top:1px solid #443359;padding-top:30px;text-align:center;margin-top:34px;}
.offer .pricelbl{font-weight:300;font-size:14px;color:var(--t-mut-d);margin-bottom:6px;}
.offer .price{font-weight:200;font-size:54px;color:var(--t-head-d);line-height:1;}
.offer .price small{font-size:18px;color:var(--t-mut-d);font-weight:300;}
.offer .fineprint{font-weight:300;font-size:13px;color:var(--t-mut-d);margin-top:16px;}

/* Angebote-Übersicht (Home: 1:1 vs KI Atelier) */
.offer-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.offer-card{background:var(--paper);border:1px solid var(--line-2);border-radius:16px;padding:0;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease;}
.offer-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(25,22,48,0.12);}
.offer-card .thumb{height:200px;overflow:hidden;}
.offer-card .thumb img{width:100%;height:100%;object-fit:cover;}
.offer-card .oc-body{padding:32px 34px 34px;display:flex;flex-direction:column;gap:14px;flex:1;}
.offer-card .tag{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--magenta);font-weight:600;}
.offer-card h3{font-weight:300;font-size:28px;color:var(--t-head);line-height:1.1;}
.offer-card h3 b{font-weight:600;}
.offer-card p{font-weight:300;font-size:15.5px;line-height:1.6;color:var(--t-body);margin:0;}
.offer-card ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:10px;}
.offer-card ul li{position:relative;padding-left:24px;font-weight:300;font-size:15px;color:var(--t-body);}
.offer-card ul li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;background:var(--magenta);}
.offer-card .btn{align-self:flex-start;margin-top:8px;}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:18px;max-width:840px;margin:0 auto;}
.faq .item{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;}
.faq details{padding:0;}
.faq summary{list-style:none;cursor:pointer;padding:26px 34px;font-weight:500;font-size:21px;color:var(--t-head);
  display:flex;justify-content:space-between;align-items:center;gap:18px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-weight:300;font-size:26px;color:var(--magenta);transition:transform .2s;}
.faq details[open] summary::after{content:"–";}
.faq .ans{padding:0 34px 28px;font-weight:300;font-size:15px;line-height:1.65;color:var(--t-body);}

/* Trust badges (hell) */
.trust-row{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;}
.trust-row img{height:74px;width:auto;max-width:150px;object-fit:contain;opacity:.8;filter:grayscale(15%);
  transition:opacity .25s, filter .25s, transform .25s;}
.trust-row img:hover{opacity:1;filter:none;transform:translateY(-3px);}
.trust-label{text-align:center;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--t-meta);margin:0 0 30px;}

/* Footer */
.footer{background:var(--ink);color:var(--t-body-d);border-top:1px solid var(--ink-line);}
.footer-top{max-width:var(--wrap);margin:0 auto;padding:72px 40px 40px;display:grid;grid-template-columns:1.4fr 2fr;gap:60px;}
.footer .f-word{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.footer .f-word img{width:40px;height:40px;}
.footer .f-word .brand-word{font-size:22px;}
.footer .f-tag{font-weight:300;font-size:15px;line-height:1.6;color:var(--t-mut-d);max-width:400px;margin:0;}
.footer .f-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.footer .f-col h5{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--helllila);font-weight:600;margin:0 0 18px;}
.footer .f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.footer .f-col a{font-weight:300;font-size:15px;color:var(--t-body-d);}
.footer .f-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid var(--ink-line);}
.footer-bottom .inner{max-width:var(--wrap);margin:0 auto;padding:24px 40px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;font-weight:300;font-size:12px;color:#6A6486;letter-spacing:0.04em;}
.footer-bottom .mono{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);}
.reveal.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}

/* Responsive */
@media (max-width:900px){
  .wrap,.hero-inner,.topbar-inner,.footer-top,.footer-bottom .inner{padding-left:24px;padding-right:24px;}
  .cards.c2,.cards.c3,.method,.transform,.proof,.offer-cards,.footer .f-nav{grid-template-columns:1fr;}
  .split{flex-direction:column;gap:30px;align-items:flex-start;}
  .split .media{width:100%;max-width:360px;}
  .footer-top{grid-template-columns:1fr;gap:34px;}
  .offer{padding:34px 26px;}
  .modlist .row{padding:24px 26px;gap:18px;}
}

/* ---------- Referenzen / Portfolio-Galerie (5 klein in einer Reihe) ---------- */
.refs{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.ref{display:block;background:var(--paper);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;}
.ref:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(25,22,48,0.13);}
.ref-img{position:relative;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(160deg,#EFEAF6,#F4F5F0);}
.ref-img img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}
.ref-img::after{content:"Ansehen →";position:absolute;left:0;right:0;bottom:0;
  padding:9px 11px;font-size:11px;font-weight:500;color:#fff;
  background:linear-gradient(180deg,rgba(20,9,36,0) 0%,rgba(20,9,36,0.82) 100%);opacity:0;transition:opacity .25s ease;}
.ref:hover .ref-img::after{opacity:1;}
.ref-cap{padding:10px 12px;display:flex;flex-direction:column;gap:2px;}
.ref-name{font-weight:600;font-size:13px;color:var(--t-head);line-height:1.2;}
.ref-branche{font-size:10.5px;letter-spacing:0.03em;color:var(--t-meta);}
@media (max-width:760px){
  .refs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:42%;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch;}
  .ref{scroll-snap-align:start;}
}

/* ---------- Onepager: Anker nicht unter der Topbar verstecken ---------- */
section[id]{scroll-margin-top:84px;}

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal{max-width:820px;margin:0 auto;}
.legal h1{font-weight:200;font-size:clamp(32px,4.5vw,46px);line-height:1.1;color:var(--t-head);margin:0 0 8px;}
.legal .updated{font-weight:300;font-size:13px;color:var(--t-meta);margin:0 0 36px;}
.legal h2{font-weight:500;font-size:22px;color:var(--t-head);margin:38px 0 12px;}
.legal h3{font-weight:600;font-size:16px;color:var(--t-head);margin:24px 0 8px;}
.legal p,.legal li{font-weight:300;font-size:15.5px;line-height:1.7;color:var(--t-body);margin:0 0 12px;}
.legal ul{padding-left:22px;margin:0 0 12px;}
.legal a{color:var(--magenta);text-decoration:underline;}
.legal .ph{background:rgba(150,24,209,0.09);border:1px dashed rgba(150,24,209,0.45);border-radius:6px;
  padding:1px 8px;color:#7E14B0;font-weight:500;font-size:0.94em;white-space:nowrap;}
.legal .note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--magenta);
  border-radius:8px;padding:16px 20px;margin:22px 0;font-weight:300;font-size:14px;line-height:1.6;color:var(--t-mut);}
.legal .note b{font-weight:600;color:var(--t-head);}