*{margin:0;padding:0;box-sizing:border-box}
:root{
  --tinte:#1b2a38; --tinte-weich:#4a5f73; --linie:#d8dee4;
  --papier:#ffffff; --grund:#f4f6f8; --akzent:#2f6b8f;
  --mass:1180px;
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --tinte:#e6ebf0; --tinte-weich:#9fb0c0; --linie:#2b3a48;
    --papier:#111a22; --grund:#0c141b; --akzent:#6aa9cc;
  }
}
:root[data-theme="dark"]{
  --tinte:#e6ebf0; --tinte-weich:#9fb0c0; --linie:#2b3a48;
  --papier:#111a22; --grund:#0c141b; --akzent:#6aa9cc;
}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--grund); color:var(--tinte);
  font:400 17px/1.65 "Source Sans 3","Segoe UI",system-ui,sans-serif;
  letter-spacing:.005em;
}
.huelle{max-width:var(--mass);margin:0 auto;padding:0 16px}

/* ------------------------------------------------------------------- kopfzeile */
.kopf{background:var(--papier);border-bottom:1px solid var(--linie)}
.kopf__reihe{display:flex;align-items:baseline;gap:28px;flex-wrap:wrap;padding:20px 0 18px}
.marke{font-size:20px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinte);text-decoration:none;white-space:nowrap}
.marke span{color:var(--akzent)}
.navi{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.navi a{color:var(--tinte-weich);text-decoration:none;font-size:14.5px;
  letter-spacing:.06em;text-transform:uppercase;padding-bottom:3px;
  border-bottom:2px solid transparent}
.navi a:hover{color:var(--tinte);border-bottom-color:var(--akzent)}
.navi a[aria-current="page"]{color:var(--tinte);border-bottom-color:var(--akzent)}

/* ------------------------------------------------------------------------ held */
.held{background:var(--papier);border-bottom:1px solid var(--linie)}
.held__innen{padding:46px 0 42px;max-width:760px}
.held h1{font-size:clamp(28px,4.4vw,42px);line-height:1.15;font-weight:600;
  letter-spacing:-.015em;margin-bottom:16px}
.held p{font-size:clamp(17px,1.9vw,19px);color:var(--tinte-weich);max-width:62ch}
.streifen{height:4px;background:var(--akzent);width:72px;margin-bottom:22px}

/* -------------------------------------------------------------------- abschnitt */
.ab{padding:44px 0}
.ab--papier{background:var(--papier);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.ab h2{font-size:clamp(21px,2.6vw,27px);font-weight:600;letter-spacing:-.01em;
  margin-bottom:8px}
.ab h3{font-size:18px;font-weight:600;margin-bottom:6px}
.vor{color:var(--tinte-weich);max-width:68ch;margin-bottom:26px}
.ab p+p{margin-top:12px}

/* ----------------------------------------------------------------------- raster */
/* Кадры в архиве — превью 170×100 и 170×200. Плотная сетка под их настоящий
   размер: не растягиваем, иначе мыло. */
.gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:18px;align-items:stretch}
.kachel{background:var(--papier);border:1px solid var(--linie);padding:10px;
  display:flex;flex-direction:column}
/* Кадры архива разных пропорций (170x100, 340x100, 170x200). Единое окно,
   чтобы плитки стояли в ровную линию и ничто не растягивалось. */
.kachel img{display:block;width:100%;aspect-ratio:17/10;object-fit:cover;
  object-position:center;background:var(--grund)}
.kachel figcaption{font-size:13px;line-height:1.45;color:var(--tinte-weich);
  margin-top:8px;padding-top:7px;border-top:1px solid var(--linie);margin-top:auto}
.kachel figcaption{padding-top:7px}
.kachel--hoch img{aspect-ratio:17/10}

/* ------------------------------------------------------------------ werkliste */
.werke{border-top:1px solid var(--linie)}
.werk{display:grid;grid-template-columns:1fr auto;gap:12px 24px;
  padding:13px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.werk__ort{color:var(--tinte);font-size:16.5px}
.werk__jahr{color:var(--tinte-weich);font-size:14px;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ------------------------------------------------------------------- leistungen */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px}
.karte{background:var(--papier);border:1px solid var(--linie);padding:20px}
.karte p{font-size:15.5px;color:var(--tinte-weich);margin-top:6px}

/* ------------------------------------------------------------------------ breit */
.breit{position:relative;background:var(--papier);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.breit img{display:block;width:100%;max-height:420px;object-fit:cover}
.breit figcaption{font-size:13.5px;color:var(--tinte-weich);padding:10px 16px;
  max-width:var(--mass);margin:0 auto}

/* -------------------------------------------------------------------- fusszeile */
.fuss{background:var(--papier);border-top:1px solid var(--linie);
  padding:28px 0 34px;margin-top:8px}
.fuss__reihe{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline}
.fuss a{color:var(--tinte-weich);text-decoration:none;font-size:14.5px}
.fuss a:hover{color:var(--tinte)}
.fuss__klein{color:var(--tinte-weich);font-size:13.5px;margin-top:14px;max-width:70ch}

.nurlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){
  .ab{padding:34px 0}
  .held__innen{padding:34px 0 32px}
  .navi{gap:14px}
  .gitter{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}