@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/poppins-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/poppins-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/poppins-latin-700-normal.woff2") format("woff2")}

:root{
  --navy:#293548;
  --navy-deep:#1f2938;
  --silver:#dadada;
  --paper:#f1f2f4;
  --white:#f7f8fa;
  --muted-dark:#b9c0cb;
  --muted:#56627a;
  --gutter:clamp(20px,5vw,64px);
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;font-family:"Poppins",system-ui,sans-serif;font-weight:400;font-size:1rem;line-height:1.75;color:var(--navy);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid #8fb0e8;outline-offset:3px}

.skip{position:absolute;left:var(--gutter);top:-4rem;background:var(--silver);color:var(--navy);padding:.6rem 1rem;z-index:40}
.skip:focus{top:.75rem}

/* Kopf */
.top{background:var(--navy);color:var(--white)}
.top-in{max-width:var(--max);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand img{height:104px;width:auto}
.nav{display:flex;gap:clamp(16px,2.6vw,36px);font-size:.875rem;text-transform:uppercase;letter-spacing:.08em}
.nav a{text-decoration:none;white-space:nowrap;padding:.35rem 0;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--silver)}

/* Einstieg */
.hero{position:relative;background:var(--navy);color:var(--white);overflow:hidden}
.hero-mark{position:absolute;right:-6vw;top:50%;width:min(135vw,1500px);height:94%;transform:translateY(-50%);opacity:.075;pointer-events:none}
.hero-in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,72px);align-items:end;min-height:min(78svh,820px)}
.hero-text{align-self:center;padding:clamp(40px,8vw,96px) 0}
.hero h1{margin:0;font-weight:500;text-transform:uppercase;font-size:clamp(1.45rem,2.9vw,2.6rem);line-height:1.25;letter-spacing:.02em;max-width:22ch}
.hero-who{margin:clamp(28px,4vw,48px) 0 0;font-size:1rem;line-height:1.6;color:var(--muted-dark);max-width:38ch}
.hero-who strong{display:block;color:var(--white);font-weight:500;font-size:1.25rem;margin-bottom:.25rem}
.hero-contact{display:flex;flex-wrap:wrap;gap:6px 32px;margin:1.25rem 0 0;font-size:1.0625rem}
.hero-contact a{color:var(--white);text-underline-offset:.25em}
.hero-pic{align-self:end;margin:0}
.hero-pic img{width:100%;height:auto;aspect-ratio:1.02/1}

.hero-mark path{animation:ray 1.3s cubic-bezier(.2,.7,.2,1) both}
.hero-mark path:nth-child(2){animation-delay:.08s}
.hero-mark path:nth-child(3){animation-delay:.16s}
.hero-mark path:nth-child(4){animation-delay:.24s}
@keyframes ray{from{transform:translateX(18%);opacity:0}to{transform:none;opacity:1}}

/* Abschnitte */
.sec{padding:clamp(56px,9vw,120px) 0}
.sec-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px)}
.sec h2{margin:0;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.3}
.sec-dark{background:var(--navy);color:var(--white)}
.sec-silver{background:var(--silver)}

.lead{margin:0;font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.8;max-width:36em}
.lead-rest{margin:1.2rem 0 0;max-width:44em}

.services{list-style:none;margin:0;padding:0}
.services li{padding:clamp(22px,3vw,34px) 0;border-top:1px solid rgba(218,218,218,.28)}
.services li:last-child{border-bottom:1px solid rgba(218,218,218,.28)}
.services h3{margin:0;font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4}
.services p{margin:.6rem 0 0;color:var(--muted-dark);max-width:38em}

.values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,52px) clamp(24px,4vw,56px);margin:0}
.values>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:.5rem}
.values dt{font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.4}
.values dd{margin:0;color:var(--muted)}

.contact-lines{font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.8;margin:0;font-style:normal}

.ph{background:#f3dc8a;color:#293548;padding:0 .3em;border-radius:2px}

/* Fuß */
.foot{background:var(--navy-deep);color:var(--muted-dark);font-size:.875rem}
.foot-in{max-width:var(--max);margin:0 auto;padding:28px var(--gutter);display:flex;gap:12px 32px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--white)}
.foot nav{display:flex;gap:28px}

/* Rechtstexte */
.legal{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,88px) var(--gutter) clamp(56px,8vw,112px)}
.legal h1{margin:0 0 1.5rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.25}
.legal h2{margin:2.6rem 0 .6rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:1.0625rem;line-height:1.4}
.legal h3{margin:1.8rem 0 .3rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.9375rem;line-height:1.45}
.legal p,.legal ul{margin:.6rem 0}
.legal ul{padding-left:1.2rem}
.legal address{font-style:normal}

@media (max-width:860px){
  .hero-in{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-text{padding-bottom:32px}
  .hero-pic{max-width:520px;justify-self:end;width:86%}
  .hero-mark{width:220vw;right:-40vw;top:50%;height:86%}
  .sec-in{grid-template-columns:1fr;gap:28px}
  .values{grid-template-columns:1fr}
  .brand img{height:76px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-mark path{animation:none}
}

/* Handy: feste Kopfzeile mit Anrufen und Menü */
.actions,.overlay{display:none}
@media (max-width:700px){
  .hero-contact{display:none}
  html{scroll-padding-top:84px}
  html.menu-open{overflow:hidden}
  .top{position:sticky;top:0;z-index:15}
  .top-in{flex-wrap:nowrap;gap:10px;padding-top:12px;padding-bottom:12px}
  .brand img{height:56px}
  .nav{display:none}
  .actions{display:flex;align-items:center;gap:8px}
  .call,.mailbtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.5rem 1rem;font-weight:500;font-size:.9375rem;text-decoration:none}
  .call{background:var(--silver);color:var(--navy)}
  .menu-btn,.menu-close{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:.5rem .85rem;background:none;border:1px solid rgba(218,218,218,.6);color:var(--white);font:inherit;font-weight:500;font-size:.9375rem;cursor:pointer}
  .bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:var(--white);content:"";position:relative}
  .bars::before{position:absolute;top:-6px}
  .bars::after{position:absolute;top:6px}
  .overlay:not([hidden]){display:flex;flex-direction:column;position:fixed;inset:0;z-index:30;background:var(--navy);color:var(--white);padding:12px var(--gutter) 20px;overflow-y:auto}
  .overlay-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .overlay-nav{display:flex;flex-direction:column;margin-top:clamp(20px,6vh,48px)}
  .overlay-nav a{font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:1.125rem;text-decoration:none;padding:1rem 0;border-bottom:1px solid rgba(218,218,218,.25)}
  .quick{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:28px}
  .mailbtn{border:1px solid rgba(218,218,218,.6);color:var(--white)}
}
@media (max-width:360px){
  .top-in{gap:6px}
  .brand img{height:46px}
  .actions{gap:6px}
  .call,.menu-btn{padding:.5rem .6rem;font-size:.8125rem}
}