/* hoefker nocke bueckle - Buero fuer Bauphysik, Bochum / Oldenburg / Backnang.
   Farbwelt aus der Firmenmarke: das Dunkelblau des Schriftzugs auf Papierweiss.
   Ein Akzent, eine Schrift, klare Spalten - ein Ingenieurbuero rechnet, es
   dekoriert nicht. */

:root {
  --papier:   #FFFFFF;
  --flaeche:  #F4F5F7;   /* abgesetzte Flaeche */
  --linie:    #DFE2E6;
  --tinte:    #16202B;   /* Text, 15:1 auf Papier */
  --grau:     #55616E;   /* Nebentext, 7.1:1 */
  --marke:    #1A3A5C;   /* Dunkelblau aus dem Logo */
  --marke-h:  #12293F;

  --sp-1: .5rem;  --sp-2: 1rem;   --sp-3: 1.5rem;
  --sp-4: 2.5rem; --sp-5: 4rem;   --sp-6: 6rem;
  --kante: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(100% - 2.5rem, 68rem); margin-inline: auto; }

a { color: var(--marke); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--marke); outline-offset: 3px;
}

/* Kopf */
.top { border-bottom: 1px solid var(--linie); }
.top .wrap { display: flex; align-items: center; gap: var(--sp-3); padding-block: var(--sp-3); flex-wrap: wrap; }
/* Kopfmarke: der Originalschriftzug von 2007, freigestellt. */
.marke { display: block; text-decoration: none; }
.marke img { display: block; width: auto; height: 2.5rem; }
.marke:hover { opacity: .8; }

nav.haupt { border-bottom: 1px solid var(--linie); background: var(--papier); }
nav.haupt .wrap { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
nav.haupt a {
  padding: .9rem 0; font-size: .9375rem; font-weight: 500; color: var(--grau);
  text-decoration: none; border-bottom: 2px solid transparent;
}
nav.haupt a:hover { color: var(--tinte); }
nav.haupt a[aria-current] { color: var(--marke); border-bottom-color: var(--marke); }

/* Auftakt */
.titel { padding-block: var(--sp-5) var(--sp-4); }
.titel h1 {
  margin: 0 0 var(--sp-3);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 600; line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance; max-width: 22ch;
}
.titel .fuehrung { margin: 0; max-width: 56ch; font-size: 1.1875rem; color: var(--grau); text-wrap: pretty; }

.auftakt { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-5); align-items: center; }
.auftakt-bild {
  margin: 0; border-radius: var(--kante); background: var(--flaeche);
  display: grid; place-items: center; padding: var(--sp-3);
}
.auftakt-bild img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 24rem;
}

/* Leistungen als Liste */
.felder { border-top: 1px solid var(--linie); }
.feld-zeile {
  display: grid; grid-template-columns: minmax(12rem, 22%) 1fr; gap: var(--sp-4);
  padding-block: var(--sp-3); border-bottom: 1px solid var(--linie); align-items: baseline;
}
.feld-zeile h2, .feld-zeile h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--marke); }
.feld-zeile p { margin: 0; color: var(--grau); max-width: 64ch; text-wrap: pretty; }
.feld-zeile > * { min-width: 0; }

/* Abschnitte */
section { padding-block: var(--sp-5); border-top: 1px solid var(--linie); }
section > .wrap > h2 {
  margin: 0 0 var(--sp-4); font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 600; letter-spacing: -.015em; text-wrap: balance;
}
.fliess > * { max-width: 68ch; }
.fliess p { margin: 0 0 var(--sp-2); color: var(--grau); text-wrap: pretty; }

/* Bildstreifen */
.bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.bilder figure:nth-child(4), .bilder figure:nth-child(5) { grid-column: span 1; }
.bilder:has(figure:nth-child(5)) figure:nth-child(4) { grid-column: 1 / span 1; }
.bilder figure { margin: 0; }
.bilder .rahmen {
  display: grid; place-items: center; height: 11rem; padding: var(--sp-2);
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--kante);
}
.bilder img { display: block; width: auto; height: auto; max-width: 100%; max-height: 9rem; }
.bilder figcaption { padding-top: .45rem; font-size: .8125rem; line-height: 1.4; color: var(--grau); }

/* Standorte */
.orte { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sp-4); }
.ort-karte h2, .ort-karte h3 { margin: 0 0 .3rem; font-size: .8125rem; font-weight: 600; color: var(--grau);
                letter-spacing: .04em; }
.ort-karte .person { font-size: 1.0625rem; font-weight: 600; margin-bottom: .2rem; }
.ort-karte address { font-style: normal; color: var(--grau); line-height: 1.6; }

/* Veroeffentlichungen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { padding-block: var(--sp-2); border-bottom: 1px solid var(--linie); color: var(--grau); max-width: 74ch; }
.liste li b { color: var(--tinte); font-weight: 600; }

footer { padding-block: var(--sp-3) var(--sp-5); border-top: 1px solid var(--linie);
         font-size: .875rem; color: var(--grau); }
.fuss { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); align-items: start; }
.fuss > * { min-width: 0; }
.fuss-firma b { color: var(--tinte); font-weight: 600; }
.fuss-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem var(--sp-3); }
.fuss-nav a { color: var(--grau); text-decoration: none; }
.fuss-nav a:hover { color: var(--marke); text-decoration: underline; }

@media (max-width: 62rem) {
  .auftakt { grid-template-columns: 1fr; gap: var(--sp-3); }
}

/* Drei Aufnahmen: entweder alle nebeneinander oder alle untereinander -
   eine leere Zelle in der zweiten Reihe waere ein Planungsfehler. */
@media (max-width: 52rem) {
  .bilder { grid-template-columns: minmax(0, 1fr); }
  .bilder .rahmen { height: 13rem; }
  .bilder img { max-height: 11rem; }
}

@media (max-width: 48rem) {
  .feld-zeile { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .feld-zeile p { max-width: none; }
  .titel { padding-block: var(--sp-4) var(--sp-3); }
  .marke img { height: 1.9rem; }
  .fuss { grid-template-columns: 1fr; }
  .fuss-nav { justify-content: flex-start; padding-top: var(--sp-2); border-top: 1px solid var(--linie); }
}

/* Sprungmarke: fuer die Maus unsichtbar, beim Tabben das erste Ziel -
   sonst muss sich die Tastatur durch das ganze Menue arbeiten. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: .7rem 1.1rem; background: var(--marke); color: #fff;
  text-decoration: none; border-radius: 0 0 var(--kante) 0;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }