/* Steiner Brandforensik — Stylesheet */

:root{
  --ink:#102538; --ink-deep:#0A1826; --paper:#F1F3F6; --surface:#FFFFFF;
  --rule:#D3DAE2; --slate:#55677B; --text:#17212D;
  --ember:#A84A22; --ember-soft:#C4652F; --focus:#2F6FA8;
  --shadow:0 1px 2px rgba(16,37,56,.05);
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(1rem,.97rem + .16vw,1.09rem);
  --step-1:clamp(1.18rem,1.1rem + .4vw,1.38rem);
  --step-2:clamp(1.5rem,1.34rem + .8vw,2rem);
  --step-3:clamp(1.95rem,1.6rem + 1.7vw,3rem);
  --gutter:clamp(1rem,4vw,3.5rem);
  --wrap:74rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#DCE5EF; --ink-deep:#060F1A; --paper:#0C1621; --surface:#132131;
    --rule:#25384C; --slate:#9FB0C2; --text:#E6EDF5;
    --ember:#E08A5A; --ember-soft:#C9713F; --focus:#7FB4E0;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#DCE5EF; --ink-deep:#060F1A; --paper:#0C1621; --surface:#132131;
  --rule:#25384C; --slate:#9FB0C2; --text:#E6EDF5;
  --ember:#E08A5A; --ember-soft:#C9713F; --focus:#7FB4E0;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--f-body);
  font-size:var(--step-0);line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.015em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.75rem 1.25rem;z-index:60;font-family:var(--f-display);font-size:var(--step--1)}
.skip:focus{left:0}
.label{font-family:var(--f-mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}

/* header */
.masthead{border-bottom:1px solid var(--rule);background:var(--surface);position:sticky;top:0;z-index:20}
.masthead__in{display:flex;align-items:center;gap:1.5rem;justify-content:space-between;
  padding-block:1.05rem;max-width:82rem}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{height:54px;width:auto}
@media (max-width:1080px){.brand img{height:46px}}
@media (max-width:600px){.brand img{height:40px}}
.logo-dark{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none}
  :root:not([data-theme="light"]) .logo-dark{display:block}
}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}
.nav{display:flex;gap:1.7rem;align-items:center;flex-wrap:wrap}
.nav a{font-family:var(--f-display);font-weight:600;font-size:var(--step--1);letter-spacing:.04em;
  text-transform:uppercase;text-decoration:none;color:var(--slate);padding-block:.35rem;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ember)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ember)}
@media (max-width:960px){.nav{display:none}}
.call{font-family:var(--f-mono);font-size:var(--step--1);color:var(--ink);text-decoration:none;
  white-space:nowrap;border-bottom:1px solid var(--ember);padding-bottom:2px}
@media (max-width:520px){.call{display:none}}

/* hero */
.hero{padding-block:clamp(3rem,7vw,6rem) clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--rule)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.hero__grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(1.7rem,1.25rem + 1.5vw,2.6rem);line-height:1.12;
  margin-block:1rem 1.1rem;color:var(--ink);max-width:24ch}
.hero__lead{font-size:var(--step-1);max-width:46ch;color:var(--text)}
.hero__lead strong{font-family:var(--f-display);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.hero__rule{width:3.25rem;height:3px;background:var(--ember);margin-top:1.6rem}
.facts{margin:0}
.fact{border-top:1px solid var(--rule);padding-block:.85rem}
.fact:first-child{border-top:0;padding-top:0}
.fact dt{font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.fact dd{margin:.2rem 0 0;font-family:var(--f-display);font-weight:700;font-size:var(--step-1);
  color:var(--ink);line-height:1.25}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.btn{font-family:var(--f-display);font-weight:700;font-size:var(--step--1);letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:.8rem 1.5rem;display:inline-block}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:var(--ember)}
.btn--ghost{border:1px solid var(--rule);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ember);color:var(--ember)}

/* page head (inner pages) */
.phead{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.phead h1{font-size:var(--step-3);line-height:1.08;color:var(--ink);max-width:20ch;margin-block:.9rem .9rem}
.phead p{max-width:58ch;font-size:var(--step-1);color:var(--text)}

section{padding-block:clamp(3rem,6vw,5.5rem)}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.25rem;flex-wrap:wrap}
.sec-head h2{font-size:var(--step-2);color:var(--ink)}
.sec-head .label{padding-top:.15rem}

/* prose */
.prose{max-width:65ch}
.prose p + p{margin-top:1.05rem}
.prose h3{font-size:var(--step-1);color:var(--ink);margin:2rem 0 .55rem}
.prose ul{margin:.9rem 0 0;padding-left:1.1rem}
.prose li{margin-bottom:.45rem}
.prose strong{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}

/* service grid */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0;border-top:1px solid var(--rule)}
.service{border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);padding:1.6rem 1.5rem 1.75rem}
.service:last-child{border-right:0}
@media (max-width:920px){.service{border-right:0}}
.service h3{font-size:var(--step-1);color:var(--ink);margin-bottom:.5rem}
.service p{color:var(--slate);font-size:var(--step--1);line-height:1.6}
.service a{font-family:var(--f-mono);font-size:var(--step--1);color:var(--ember);
  text-decoration:none;display:inline-block;margin-top:.7rem;border-bottom:1px solid transparent}
.service a:hover{border-bottom-color:var(--ember)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.step{border-top:2px solid var(--ink);padding-top:1rem}
.step__no{font-family:var(--f-mono);font-size:var(--step--1);color:var(--ember);letter-spacing:.1em}
.step h3{font-size:var(--step-1);margin:.35rem 0 .45rem;color:var(--ink)}
.step p{font-size:var(--step--1);color:var(--slate);line-height:1.6}

/* dark band */
.band{background:var(--ink-deep);color:#E6EDF5;border-block:1px solid var(--rule)}
.band .sec-head h2{color:#fff}
.band .label{color:#8FA6BD}
.band .prose p{color:#C3D2E1}
.band .prose strong{color:#fff}
.method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:800px){.method{grid-template-columns:1fr}}
.method p{color:#C3D2E1;max-width:60ch}
.method p + p{margin-top:1rem}
.method__list{list-style:none;margin:0;padding:0}
.method__list li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;
  border-top:1px solid rgba(255,255,255,.14);padding-block:.9rem}
.method__list li span{font-family:var(--f-mono);font-size:var(--step--1);color:#E08A5A}
.method__list li strong{font-family:var(--f-display);font-weight:600;color:#fff;font-size:var(--step-0)}
.method__list li em{display:block;font-style:normal;color:#9FB4C9;font-size:var(--step--1);
  line-height:1.5;margin-top:.15rem}

/* credentials */
.creds{border-top:1px solid var(--rule)}
.cred{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1.5rem;
  border-bottom:1px solid var(--rule);padding-block:1.05rem;align-items:baseline}
@media (max-width:760px){.cred{grid-template-columns:1fr;gap:.3rem;padding-block:1.1rem}}
.cred__kind{font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate)}
.cred__what{font-family:var(--f-display);font-weight:600;font-size:var(--step-0);color:var(--ink);line-height:1.4}
.cred__what small{display:block;font-family:var(--f-body);font-weight:400;color:var(--slate);
  font-size:var(--step--1);margin-top:.2rem}

/* contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,4vw,3rem)}
.office{background:var(--surface);border:1px solid var(--rule);padding:1.6rem 1.5rem;box-shadow:var(--shadow)}
.office h3{font-size:var(--step-1);color:var(--ink);margin-bottom:.15rem}
.office .label{display:block;margin-bottom:.9rem}
.office a{display:block;font-family:var(--f-mono);font-size:var(--step-0);color:var(--ink);
  text-decoration:none;padding-block:.3rem;border-bottom:1px solid transparent;width:fit-content}
.office a:hover{border-bottom-color:var(--ember);color:var(--ember)}
.contact__note{font-size:var(--step--1);color:var(--slate);max-width:40ch;padding-top:1.6rem;
  border-top:2px solid var(--ember)}

/* legal pages */
.legal{max-width:68ch}
.legal h2{font-size:var(--step-1);color:var(--ink);margin:2.2rem 0 .6rem}
.legal h2:first-of-type{margin-top:0}
.legal p + p{margin-top:.8rem}
.legal ul{padding-left:1.1rem;margin:.7rem 0 0}
.legal li{margin-bottom:.35rem}
.fill{background:rgba(168,74,34,.1);border-bottom:2px solid var(--ember);
  color:var(--ember);font-family:var(--f-mono);font-size:.9em;padding:.05em .35em;font-style:normal}
.notice{border-left:3px solid var(--ember);padding:.9rem 0 .9rem 1.1rem;margin-bottom:2rem;
  color:var(--slate);font-size:var(--step--1);max-width:60ch}

/* Bilder */
figure{margin:0}
figure img{width:100%;height:auto;display:block;background:var(--rule)}
figcaption{font-family:var(--f-mono);font-size:var(--step--1);color:var(--slate);
  line-height:1.5;margin-top:.6rem;max-width:52ch}
.band figcaption{color:#9FB4C9}

.shot{margin-top:1.8rem}
.shot--tall img{aspect-ratio:3/4;object-fit:cover}
.shot--wide img{aspect-ratio:4/3;object-fit:cover}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.25rem,3vw,2rem)}
.gallery figure img{aspect-ratio:1/1;object-fit:cover}

.bleed{border-block:1px solid var(--rule)}
.bleed img{width:100%;height:clamp(15rem,34vw,26rem);object-fit:cover;display:block}
.bleed .wrap{padding-block:1rem 0}
.bleed figcaption{margin-top:.8rem}

.portrait{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media (max-width:700px){.portrait{grid-template-columns:1fr}
  .portrait figure{max-width:15rem}}
.portrait figure img{aspect-ratio:4/5;object-fit:cover}

/* footer */
.foot{background:var(--ink-deep);color:#B9C9D9;padding-block:3rem 2.25rem;font-size:var(--step--1);
  border-top:1px solid var(--rule)}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2rem}
.foot h4{font-family:var(--f-display);font-size:var(--step--1);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;margin:0 0 .75rem;font-weight:700}
.foot a{color:#B9C9D9;text-decoration:none;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--ember-soft);color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot img{height:34px;width:auto;margin-bottom:1rem}
.foot__bar{margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;color:#8DA2B6}