@font-face{font-family:'IBM Plex Sans';font-weight:300;font-style:normal;font-display:swap;
 src:url('fonts/IBMPlexSans-Light.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;
 src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;
 src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;
 src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2')}

:root{
 --navy:#102040; --navy-lo:#0D1A35; --gold:#EFB722; --silver:#CDD2E1;
 --silver-dim:rgba(205,210,225,.62); --ink:#16213c; --ink-dim:#5a6579;
 --line:#d9dde6; --paper:#f4f5f8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
 background:#fff;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(22px,5vw,64px)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;background:var(--navy);color:var(--silver);
 overflow:hidden;display:flex;align-items:center;padding:96px 0}
.hero video,.hero .still{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;object-position:center;z-index:0}
.hero::after{content:'';position:absolute;inset:0;z-index:1;
 background:linear-gradient(90deg,rgba(13,26,53,.88) 0%,rgba(13,26,53,.78) 44%,rgba(16,32,64,.38) 100%)}
.hero-inner{position:relative;z-index:2;width:100%}
.tile{width:clamp(104px,13vw,132px);height:auto;border-radius:3px;
 box-shadow:0 20px 48px rgba(0,0,0,.42)}
.rule{width:clamp(104px,13vw,132px);height:2px;background:var(--gold);
 margin-top:clamp(24px,3vw,34px)}
.lead{font-size:clamp(21px,2.4vw,25px);line-height:1.42;color:#eef1f7;
 text-shadow:0 1px 18px rgba(5,11,24,.85),0 1px 3px rgba(5,11,24,.55);
 max-width:29ch;margin-top:clamp(22px,2.6vw,30px);letter-spacing:-.1px;font-weight:400}
.body{font-size:clamp(15.5px,1.5vw,16.5px);line-height:1.66;color:rgba(214,219,232,.80);
 text-shadow:0 1px 14px rgba(5,11,24,.8);
 max-width:52ch;margin-top:20px;font-weight:300}
.uc{margin-top:clamp(30px,4vw,44px);font-size:12px;letter-spacing:.09em;
 text-transform:uppercase;color:rgba(205,210,225,.52);text-shadow:0 1px 12px rgba(5,11,24,.8)}

/* ---------- Arbeitsfelder ---------- */
.felder{padding:clamp(52px,7vw,78px) 0 clamp(48px,6vw,70px)}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(26px,3.5vw,40px)}
.feld{border-top:1px solid var(--ink);padding-top:18px}
.feld h2{font-size:15px;font-weight:500;color:var(--ink);margin-bottom:10px;line-height:1.35}
.feld p{font-size:14px;line-height:1.6;color:var(--ink-dim);font-weight:300}

/* ---------- Kontakt ---------- */
.contact{background:var(--paper);padding:clamp(44px,6vw,56px) 0 clamp(48px,6vw,60px)}
.cgrid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:clamp(28px,4vw,40px);align-items:start}
h3{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
 color:var(--ink);margin-bottom:18px}
.addr{font-size:15.5px;line-height:1.8;color:var(--ink)}
.addr a{color:var(--ink);text-decoration:none;border-bottom:1px solid #c5cbd6}
.addr a:hover{border-bottom-color:var(--ink)}
.lbl{display:block;font-size:12.5px;color:var(--ink-dim);margin-top:9px}
.lbl:first-child{margin-top:0}
.quiet{font-size:14.5px;color:var(--ink-dim);line-height:1.75}

/* ---------- Footer ---------- */
footer{background:var(--navy);color:var(--silver-dim);padding:26px 0;font-size:13px}
.frow{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.frow a{color:var(--silver-dim);text-decoration:none;margin-right:22px}
.frow a:hover{color:var(--silver)}
.frow .cp{font-size:12px;color:rgba(205,210,225,.38)}

/* ---------- Unterseiten ---------- */
.subhead{background:var(--navy);padding:26px 0}
.subhead a{display:inline-block}
.subhead img{width:74px;height:auto;border-radius:2px}
.doc{padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(56px,7vw,80px);max-width:760px}
.doc h1{font-size:clamp(23px,3vw,28px);font-weight:500;letter-spacing:-.2px;margin-bottom:28px}
.doc h2{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
 margin:34px 0 12px;color:var(--ink)}
.doc p{font-size:15.5px;line-height:1.75;color:var(--ink);margin-bottom:12px;font-weight:300}
.doc p.tight{margin-bottom:2px}
.doc a{color:var(--ink)}

@media (max-width:860px){
 .fgrid{grid-template-columns:repeat(2,1fr);gap:30px}
 .cgrid{grid-template-columns:1fr;gap:30px}
}
/* Schmale Displays: Zuschnitt nach rechts, dorthin wo das Licht sitzt */
@media (max-aspect-ratio:1/1){
 .hero video,.hero .still{object-position:72% center}
}
/* Schmale Displays: Inhalt nach unten, Bild oben frei, Verlauf nach unten dunkler */
@media (max-width:720px){
 .hero{align-items:flex-end;padding:120px 0 72px}
 .hero video,.hero .still{object-position:76% center}
 .hero::after{background:linear-gradient(180deg,
   rgba(13,26,53,.20) 0%,
   rgba(13,26,53,.34) 30%,
   rgba(13,26,53,.72) 62%,
   rgba(11,22,44,.90) 100%)}
}
@media (max-width:520px){
 .fgrid{grid-template-columns:1fr;gap:26px}
}
@media (prefers-reduced-motion:reduce){
 .hero video{display:none}
}