@font-face{font-family:Montserrat;font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:italic;font-weight:300;font-display:swap;src:url(fonts/montserrat-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Montserrat;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/montserrat-latin-800-normal.woff2) format("woff2")}

:root{--navy:#06163F;--navy2:#0B2259;--cream:#FDF6F2;--rose:#F6D8D8;--ink:#2B3557;--muted:#5A6380;--lilac:#D9B8FA;--violet:#7A3FC4;--brand:#B866F0;--soft:#DDE1EE;--soft2:#C9CFE3}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--navy);font-family:Montserrat,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--navy)}a:hover{color:var(--violet)}
img{max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px}
.kicker{margin:0;font-size:15px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.light .kicker{color:var(--soft2)}
.btn{display:inline-block;text-decoration:none;padding:18px 32px;font-size:17px;font-weight:500}
.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{color:#fff;background:var(--navy2)}
.btn-rose{background:var(--rose);color:var(--navy)}.btn-rose:hover{color:var(--navy);background:#f0c9c9}
.btn-line{border:1px solid var(--navy);padding:13px 24px}
.lead{margin:0;font-size:19px;line-height:1.7;font-weight:300;color:var(--ink)}
.light .lead{color:var(--soft)}
h1,h2,h3{margin:0}
h2.big{font-weight:300;font-size:clamp(32px,4vw,52px);line-height:1.15}
.row{display:flex;flex-wrap:wrap;gap:64px}
.col{flex:1 1 420px;min-width:0}
.stack{display:flex;flex-direction:column;gap:16px}

/* Header */
.header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;padding-bottom:28px}
.logo{text-decoration:none;font-weight:800;font-size:40px;letter-spacing:-1px;color:var(--brand)}
.logo:hover{color:var(--brand)}
.logo img{display:block;height:40px;width:auto}
.flogo{height:22px;width:auto;vertical-align:-4px;margin-right:12px}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:32px;font-size:16px}
.nav a{text-decoration:none}
.nav .btn{padding:14px 24px;font-size:16px}

/* Hero */
.hero{padding-top:64px;padding-bottom:112px;display:flex;flex-direction:column;gap:72px}
.hero h1{font-weight:300;font-size:clamp(44px,7vw,100px);line-height:1.02;letter-spacing:-2px}
.hero .intro{display:flex;flex-direction:column;gap:28px}
.hero .lead{font-size:20px;line-height:1.6;max-width:580px}
.btns{display:flex;flex-wrap:wrap;gap:16px;padding-top:8px}
.areas{background:#fff;padding:16px;display:flex;flex-wrap:wrap;gap:16px}
.area{flex:1 1 360px;min-width:0;text-decoration:none;color:var(--navy);padding:32px;display:flex;gap:24px;align-items:baseline}
.area.alt{background:var(--cream)}
.num{font-size:14px;font-weight:600;color:var(--violet)}
.area-t{display:flex;flex-direction:column;gap:8px}
.area-t b{font-size:22px;font-weight:500}
.area-t span{font-size:16px;font-weight:300;line-height:1.6;color:var(--ink)}

/* Beratung */
.dark{background:var(--navy);color:#fff}
.dark .top{padding-top:112px;padding-bottom:64px}
.cards{display:flex;flex-wrap:wrap;gap:24px;padding-bottom:112px}
.card{flex:1 1 320px;min-width:0;padding:40px;display:flex;flex-direction:column;gap:18px}
.dark .card{background:var(--navy2)}
.dark .card .num{color:var(--lilac)}
.card h3{font-size:24px;font-weight:500;line-height:1.3}
.card p{margin:0;font-size:17px;line-height:1.7;font-weight:300}
.dark .card p{color:var(--soft)}

/* Referenz */
.ref-sec{padding-top:96px}
.ref{background:#fff;padding:48px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.ref-cover{flex:0 0 auto;width:160px;height:160px;background:var(--navy);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600;color:#D8B45A}
.ref-body{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}
.ref-body .kicker{font-size:14px}
.ref-body h2{font-size:30px;font-weight:300}
.ref-body p.txt{margin:0;font-size:17px;line-height:1.7;font-weight:300;color:var(--ink)}
.ref-body .btns .btn{padding:14px 24px;font-size:16px}
.ref-body .btns .btn-line{padding:13px 24px}

/* Produkte */
.prod{padding-top:112px;padding-bottom:112px}
.prod .row{align-items:flex-end;margin-bottom:56px}
.brandrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px;align-items:center}
.range{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.brand{min-width:0;padding:0 40px 0 0;display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.brand img{width:200px;height:200px;flex:0 0 auto}
.brand-t{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:14px}
.brand-t .kicker{font-size:14px}
.brand-t h3{font-size:30px;font-weight:500}
.brand-t p{margin:0;font-size:17px;line-height:1.7;font-weight:300;color:var(--ink)}
.values{min-width:0;padding-left:40px;display:flex;flex-direction:column;justify-content:center;gap:32px}
.value{display:flex;flex-direction:column;gap:6px}
.value b{font-size:20px;font-weight:500}
.value span{font-size:16px;line-height:1.6;font-weight:300;color:var(--ink)}
.range{margin-top:72px;display:flex;flex-wrap:wrap;gap:24px}
.range .card{flex:1 1 380px;background:#fff;gap:14px}
.range .card h3{font-size:26px}
.range .card p{color:var(--ink)}
.range-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.range-top .kicker{font-size:14px}
.badge{font-size:13px;font-weight:600;background:var(--rose);padding:6px 12px}
.cta-bar{margin-top:24px;background:var(--navy);color:#fff;padding:32px 40px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta-bar span{flex:1 1 400px;min-width:0;font-size:19px;font-weight:300}
.cta-bar .btn{padding:16px 28px;font-size:16px}

/* Über uns */
.white{background:#fff}
.about{padding-top:112px;padding-bottom:112px;align-items:center}
.facts{flex:1 1 340px;min-width:0;max-width:440px;list-style:none;margin:0;padding:40px;background:var(--cream);color:var(--navy);display:flex;flex-direction:column;gap:22px}
.facts li{display:flex;flex-direction:column;gap:4px;padding-bottom:18px;border-bottom:1px solid rgba(6,22,63,.15)}
.facts li:last-child{border-bottom:0;padding-bottom:0}
.facts small{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--violet)}
.facts span{font-size:19px;font-weight:300}
.about-t{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:24px}
.about-t h2{font-weight:300;font-size:clamp(32px,4vw,48px);line-height:1.2}
.principles{padding-bottom:112px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px}
.principle{border-top:2px solid var(--navy);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.principle h3{font-size:22px;font-weight:500}
.principle p{margin:0;font-size:17px;line-height:1.7;font-weight:300;color:var(--ink)}

/* Kontakt */
.contact{background:var(--rose)}
.contact .wrap{padding-top:112px;padding-bottom:112px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-end;justify-content:space-between}
.contact h2{font-weight:300;font-size:clamp(40px,6vw,80px);line-height:1;letter-spacing:-1px}
.contact-l{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px}
.contact-l p{margin:0;font-size:19px;line-height:1.6;font-weight:300;color:var(--ink)}
.contact-r{flex:0 1 400px;min-width:0;display:flex;flex-direction:column;gap:14px;font-size:19px}
.contact-r a{text-decoration:none;padding:18px 28px;font-weight:500;overflow-wrap:anywhere}
.contact-r .c-navy{background:var(--navy);color:#fff}
.contact-r .c-white{background:#fff}
.contact-r .c-plain{padding:8px 0;font-weight:400}

/* Footer */
.footer{background:var(--navy);color:var(--soft2)}
.footer .wrap{padding-top:40px;padding-bottom:40px;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;font-size:14px}
.footer strong{color:var(--brand);font-weight:800;font-size:22px;margin-right:8px}
.footer nav{display:flex;flex-wrap:wrap;gap:28px}
.footer nav a{color:var(--soft2);text-decoration:none}.footer nav a:hover{color:#fff}

/* Rechtstexte */
.legal{padding-top:48px;padding-bottom:112px;max-width:820px}
.legal h1{font-weight:300;font-size:clamp(30px,5vw,56px);margin-bottom:40px;hyphens:auto;overflow-wrap:break-word}
.legal{hyphens:auto;overflow-wrap:break-word}
.legal h2{font-size:22px;font-weight:500;margin:40px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.7;font-weight:300;color:var(--ink)}
.legal p{margin:0 0 16px}
.legal b{font-weight:500;color:var(--navy)}
.legal ul{padding-left:22px;margin:0 0 16px}
.back{display:inline-block;margin-bottom:32px;text-decoration:none;font-size:16px}

@media (max-width:640px){
  .header{flex-wrap:nowrap}
  .logo img{height:32px}
  .nav{gap:16px;font-size:15px}
  .nav a:not(.btn){display:none}
  .nav .btn{padding:12px 18px;font-size:15px}
  .hero h1{font-size:38px;letter-spacing:-1px}
  .hero{padding-top:32px;padding-bottom:72px;gap:48px}
  .area,.card,.ref{padding:28px}
  .dark .top,.prod,.about,.contact .wrap{padding-top:72px}
  .cards,.prod,.about,.principles,.contact .wrap{padding-bottom:72px}
  .row{gap:32px}
  .brand img{width:140px;height:140px}
  .brand{padding:0}
  .values{padding-left:0}
  .cta-bar{padding:28px}
}