/* NE-Metallrecycling – site.css
   Eine Datei, mobile-first, ohne Framework. Breakpoints: 44rem (Tablet), 64rem (Desktop). */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/oswald-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --c-blue: #065a9a;        /* Markenblau aus dem Logo */
  --c-blue-deep: #04416f;
  --c-steel: #c1d1e1;       /* helles Blaugrau aus dem Logo-Bogen */
  --c-zinc: #eef2f6;        /* ruhige Flächen */
  --c-line: #d3dbe4;
  --c-ink: #1b2430;
  --c-muted: #55606c;
  --c-copper: #9c4f2a;      /* einziger Akzent: Fokus, Gültigkeitsvermerke */
  --c-paper: #ffffff;

  --f-head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;

  --w-wrap: 72rem;
  --w-prose: 42rem;
  --r: 3px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 1rem/1.55 var(--f-body);
  color: var(--c-ink);
  background: var(--c-paper);
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-blue); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--c-blue-deep); }
:focus-visible { outline: 3px solid var(--c-copper); outline-offset: 2px; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0 0 var(--s-2); }

h1, h2, h3, .h3 {
  font-family: var(--f-head);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--c-blue-deep);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.125rem); }
h3, .h3 { font-size: 1.25rem; }
.lead { font-size: 1.125rem; color: var(--c-muted); max-width: var(--w-prose); }
.small { font-size: .9rem; color: var(--c-muted); }

.wrap { width: min(100% - 2.5rem, var(--w-wrap)); margin-inline: auto; }
main > section { margin-block: var(--s-4); }
main > section.band {
  background: var(--c-zinc);
  width: 100%;
  padding: var(--s-4) max(1.25rem, calc((100% - var(--w-wrap)) / 2));
}
.prose { max-width: var(--w-prose); }
.prose h2 { margin-top: var(--s-3); }

.button {
  display: inline-block;
  padding: .7em 1.3em;
  background: var(--c-blue);
  color: #fff;
  font-family: var(--f-head);
  font-size: 1.0625rem;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: var(--r);
}
.button:hover { background: var(--c-blue-deep); color: #fff; }

.skip {
  position: absolute; left: var(--s-2); top: -3rem;
  padding: .5em 1em; background: var(--c-blue-deep); color: #fff; z-index: 10;
}
.skip:focus { top: var(--s-2); }

/* ---------- Kopf ---------- */
.site-head { border-bottom: 1px solid var(--c-line); }
.topbar {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  justify-content: space-between; align-items: center;
  padding-block: var(--s-1);
  font-size: .9rem;
}
.topbar-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); list-style: none; }
.topbar a { text-decoration: none; }
.lang { display: flex; gap: var(--s-2); list-style: none; }
.lang a { text-decoration: none; color: var(--c-muted); }
.lang a[aria-current] { color: var(--c-ink); font-weight: 600; border-bottom: 2px solid var(--c-blue); }

.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-block: var(--s-2); }
.brand { margin-right: auto; }
.logo { width: 132px; height: auto; }

.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.nav-button {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .5em .9em; border: 1px solid var(--c-line); border-radius: var(--r);
  font-family: var(--f-head); font-size: 1rem; cursor: pointer; user-select: none;
}
.nav-button span { width: 1.25em; height: 2px; background: var(--c-ink); box-shadow: 0 -6px 0 var(--c-ink), 0 6px 0 var(--c-ink); }
.nav-toggle:focus-visible + .nav-button { outline: 3px solid var(--c-copper); outline-offset: 2px; }
.nav-toggle:checked + .nav-button { background: var(--c-zinc); }

.nav { flex-basis: 100%; }
.nav-toggle:not(:checked) ~ .nav { display: none; }
.nav ul { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.nav a {
  display: block; padding: .75em 0;
  font-family: var(--f-head); font-size: 1.125rem; letter-spacing: .02em;
  color: var(--c-ink); text-decoration: none; border-bottom: 1px solid var(--c-line);
}
.nav a[aria-current] { color: var(--c-blue); }

/* ---------- Hero ---------- */
.hero { margin-block: 0 var(--s-4); display: grid; }
.hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-plate {
  background: var(--c-blue);
  color: #fff;
  padding: var(--s-3) var(--s-3) var(--s-2);
}
.hero-plate h1, .hero-plate .lead { color: #fff; }
.hero-plate .lead { color: var(--c-steel); }
.hero-plate .button { background: #fff; color: var(--c-blue-deep); }
.hero-plate .button:hover { background: var(--c-steel); }
.hero-plate p:last-child { margin-bottom: 0; }

/* ---------- Bausteine ---------- */
.teasers { list-style: none; display: grid; gap: var(--s-2); }
.teasers a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-2);
  padding: var(--s-2); background: var(--c-blue); color: #fff; text-decoration: none; border-radius: var(--r);
}
.teasers .icon { grid-row: 1 / 3; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; background: var(--c-blue-deep); border-radius: var(--r); }
.teasers strong { font-family: var(--f-head); font-size: 1.25rem; font-weight: 500; }
.teasers a > span:last-child { color: var(--c-steel); }
.teasers a:hover { background: var(--c-blue-deep); }

.split { display: grid; gap: var(--s-3); align-items: start; }

.facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.facts li { padding: var(--s-2); background: var(--c-zinc); border-top: 3px solid var(--c-blue); }
.facts strong { display: block; font-family: var(--f-head); font-size: 1.75rem; font-weight: 500; color: var(--c-blue-deep); }
.facts span { color: var(--c-muted); font-size: .9rem; }

.gallery { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

.locations { list-style: none; display: grid; gap: var(--s-3); }
.location img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: var(--s-2); }
.location h3 { margin-bottom: 0; }
.location p:last-child { margin-bottom: 0; }

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tags li { padding: .35em .75em; background: var(--c-zinc); border-left: 3px solid var(--c-blue); }

.mats { list-style: none; display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.mat img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; margin-bottom: var(--s-2); }
.mat h2 { font-size: 1.5rem; }
.mat ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.mat li { padding: .3em .7em; background: var(--c-zinc); border-left: 3px solid var(--c-blue); }
.mats + p { margin-top: var(--s-4); }

.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--s-2); padding-block: var(--s-2); border-top: 1px solid var(--c-line); }
.steps li::before { content: counter(step); font-family: var(--f-head); font-size: 1.5rem; color: var(--c-blue); line-height: 1; }
.steps h3, .steps p { grid-column: 2; }
.steps h3 { margin-bottom: .25rem; }
.steps p { margin: 0; color: var(--c-muted); }

.containers { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.containers img { background: #fff; padding: var(--s-1); border: 1px solid var(--c-line); }
.containers h3 { margin: var(--s-2) 0 0; }
.containers p { margin: 0; color: var(--c-muted); }

.certs { list-style: none; display: grid; gap: var(--s-4); }
.cert { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-2) var(--s-3); align-items: start; }
.cert img { border: 1px solid var(--c-line); }
.cert h2 { font-size: 1.5rem; }
.cert .valid { color: var(--c-copper); font-weight: 600; }

.people { list-style: none; display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.person { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s-2); align-items: start; }
.person img, .portrait-empty { width: 5.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); }
.portrait-empty { display: block; background: var(--c-steel); }
.person h3 { margin-bottom: .1rem; }
.person ul { list-style: none; }
.person li { overflow-wrap: anywhere; }

.next { margin-block: var(--s-5) 0; }
.next ul { list-style: none; display: grid; gap: var(--s-1); }
.next a {
  display: grid; padding: var(--s-2); text-decoration: none;
  background: var(--c-zinc); border-left: 4px solid var(--c-blue); color: var(--c-ink);
}
.next strong { font-family: var(--f-head); font-size: 1.25rem; font-weight: 500; color: var(--c-blue-deep); }
.next span { color: var(--c-muted); }
.next a:hover { background: var(--c-steel); }

.legal h2 { font-size: 1.5rem; margin-top: var(--s-4); }
.legal h3 { font-size: 1.2rem; margin-top: var(--s-3); }
.legal h4 { font-size: 1.05rem; margin: var(--s-2) 0 var(--s-1); }
.legal ul { padding-left: 1.2em; margin-bottom: var(--s-2); }

/* ---------- Fuß ---------- */
.site-foot { margin-top: var(--s-5); background: var(--c-blue-deep); color: #fff; padding-block: var(--s-4) var(--s-3); }
.site-foot a { color: #fff; }
.foot-grid { display: grid; gap: var(--s-3); }
.foot-title { font-family: var(--f-head); font-size: 1.125rem; color: var(--c-steel); margin-bottom: var(--s-1); }
.foot-links { list-style: none; }
.foot-links li { padding-block: .1em; }
.colophon { margin-top: var(--s-4); padding-top: var(--s-2); border-top: 1px solid rgba(255,255,255,.2); color: var(--c-steel); font-size: .9rem; }

/* ---------- Tablet ---------- */
@media (min-width: 44rem) {
  .teasers { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .locations { grid-template-columns: repeat(3, 1fr); }
  .mats { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .containers { grid-template-columns: repeat(4, 1fr); }
  .cert { grid-template-columns: 10rem 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .next ul { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Desktop ---------- */
@media (min-width: 64rem) {
  .logo { width: 160px; }
  .nav-button { display: none; }
  .nav { flex-basis: auto; }
  .nav-toggle:not(:checked) ~ .nav { display: block; }
  .nav ul { flex-direction: row; gap: var(--s-3); border: 0; }
  .nav a { padding: .25em 0; border-bottom: 2px solid transparent; }
  .nav a:hover { border-bottom-color: var(--c-steel); }
  .nav a[aria-current] { border-bottom-color: var(--c-blue); }

  /* Textplatte liegt am unteren linken Rand über dem Bild – ohne absolute Positionierung */
  .hero > * { grid-area: 1 / 1; }
  .hero-img { aspect-ratio: 5 / 2; max-height: 34rem; }
  .hero-plate {
    align-self: end; justify-self: start;
    max-width: 40rem;
    margin-left: max(1.25rem, calc((100% - var(--w-wrap)) / 2));
    padding: var(--s-3) var(--s-4) var(--s-3);
  }
  .people { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: repeat(4, 1fr); }
}

@media print {
  .site-head, .site-foot, .next, .hero-img, .button { display: none; }
  a { color: inherit; text-decoration: none; }
}