/* Schriften lokal — keine Einbindung von Google-Servern (DSGVO) */
@font-face { font-family:"Archivo"; src:url("/schriften/archivo-700.woff2") format("woff2");
             font-weight:600 700; font-display:swap; }
@font-face { font-family:"Source Sans 3"; src:url("/schriften/source-sans-3-600.woff2") format("woff2");
             font-weight:400 600; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("/schriften/ibm-plex-mono-400.woff2") format("woff2");
             font-weight:400; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("/schriften/ibm-plex-mono-500.woff2") format("woff2");
             font-weight:500 600; font-display:swap; }

/* ============================================================================
   F.E.S. GmbH — Gestaltung
   Leitbild: Präzisionsinstrument, nicht Firmenbroschüre.
   Das Messraster im Hintergrund, die Monospace-Ziffern und die nummerierten
   Leistungen zitieren die Formensprache von Kalibrierprotokollen.
   ========================================================================= */

:root {
  /* Kalkweiß statt Reinweiß — Papier eines Prüfprotokolls, nicht Bildschirmweiß */
  --grund:        #f4f3ef;
  --grund-tief:   #eceae4;
  --flaeche:      #ffffff;
  --graphit:      #1b1d1e;
  --graphit-weich:#4a4f52;
  --linie:        #d6d3ca;
  --linie-fein:   #e4e1d9;
  /* Signalton: gebranntes Orange wie eine Kalibriermarke. Die Branche macht Blau. */
  --signal:       #c4501e;
  --signal-hell:  #f0e2d8;
  --pruef:        #2f6b4f;

  --schrift-display: "Archivo", "Arial Narrow", sans-serif;
  --schrift-text:    "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
  --schrift-mess:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --spalte: min(96rem, 92vw);
  --takt: 1.6rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--graphit);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Messraster: zwei Linienscharen, kaum sichtbar, aber spürbar */
  background-image:
    linear-gradient(var(--linie-fein) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-fein) 1px, transparent 1px);
  background-size: 100% 4.5rem, 4.5rem 100%;
}

.bahn { max-width: var(--spalte); margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--schrift-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-top: 2.4em; }
h3 { font-size: 1.25rem; margin-top: 2em; }
p  { margin: 0 0 1.15em; max-width: 68ch; }
a  { color: var(--signal); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Kennzeichen: Akkreditierungsnummern, Messwerte, alles Geprüfte in Mono */
.mess, code {
  font-family: var(--schrift-mess);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.augenmerk {
  font-family: var(--schrift-mess);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  display: block;
  margin-bottom: 1.2rem;
}

/* ---------- Kopf ---------- */
/* Kopf dunkel wie die Bühne: Das Firmenlogo liegt nur in Weiß vor, und beides zusammen
   ergibt oben einen geschlossenen dunklen Block, unter dem der Inhalt hell aufklart. */
.kopf {
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(20,22,26,.92);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 50;
}
.kopf .bahn { display: flex; align-items: center; gap: 2rem; min-height: 5.2rem; }
/* Wortmarke statt Logo-Datei: Das vorhandene Firmenlogo ist fein gestreift gestaltet und
   liegt nur als kleines PNG mit Farbpalette vor — daraus wird bei jeder Skalierung ein Moiré.
   Eine sauber gesetzte Wortmarke ist ehrlicher als ein schlecht reproduziertes Logo.
   Liefert der Kunde das Logo als SVG oder in hoher Auflösung, tritt es hier an diese Stelle. */
.marke { display: flex; flex-direction: column; text-decoration: none; line-height: 1; gap: .3rem; }
.marke-wort {
  font-family: var(--schrift-display); font-weight: 700; font-size: 1.6rem;
  letter-spacing: -.02em; color: #fff;
}
.marke-punkt { color: var(--signal); }
.marke-zusatz {
  font-family: var(--schrift-mess); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: #8d8a85;
}
.navi { margin-left: auto; display: flex; gap: 1.6rem; flex-wrap: wrap; }
.navi a {
  color: #a9a6a1; text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent; transition: .18s;
}
.navi a:hover, .navi a[aria-current="page"] { color: #fff; border-bottom-color: var(--signal); }

/* ---------- Bühne: dunkler Instrumentenkopf ---------- */
.buehne {
  position: relative; overflow: hidden;
  background: #14161a;
  margin-top: -1px;
  color: #f2f0ec;
  padding: clamp(4.5rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--graphit);
}
/* Leuchtraster wie auf einem Messschirm — zwei Linienscharen plus Lichtschein */
.buehne::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(196,80,30,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 100% 5.5rem, 5.5rem 100%, 1.1rem 100%;
  mask-image: radial-gradient(120% 90% at 12% 20%, #000 35%, transparent 78%);
  pointer-events: none;
}
.buehne::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, #14161a 26%, rgba(20,22,26,.78) 48%, rgba(20,22,26,.20) 100%),
    url("/bilder/hero-oszilloskop.jpg") right center / cover no-repeat;
  pointer-events: none; z-index: 0;
}
/* Der Lichtschein liegt ueber dem Foto und bindet es an den Signalton */
.buehne .bahn::before {
  content: ""; position: absolute; width: 34rem; height: 34rem;
  right: -12rem; top: -14rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,80,30,.22), transparent 64%);
  pointer-events: none; z-index: -1;
}
.buehne .bahn { position: relative; z-index: 2; }
.buehne h1 { color: #fff; max-width: 22ch; }
.buehne p { color: #b9b6b0; max-width: 56ch; font-size: 1.08rem; }
.buehne .nachweis p { color: #eae7e2; margin: 0; font-size: 1rem; }
/* Der Akkreditierungsnachweis auf dunklem Grund */
.buehne .nachweis { margin-bottom: 2rem;
  background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.13);
  border-left-color: var(--signal); color: #eae7e2; box-shadow: none;
}
.buehne .nachweis code, .buehne .nachweis .mess { color: #ffb489; background: none; }
.buehne .augenmerk { color: #e2865c; }

/* Der Akkreditierungs-Beweis — das stärkste Argument, typografisch als Prüfstempel */
.nachweis {
  display: inline-flex; align-items: baseline; gap: .6rem 1rem; flex-wrap: wrap;
  max-width: 46rem;
  border: 1px solid var(--linie); border-left: 3px solid var(--signal);
  background: var(--flaeche); padding: .9rem 1.3rem; margin: 2rem 0 0;
  box-shadow: 0 1px 0 var(--linie);
}
.nachweis .kennung { font-family: var(--schrift-mess); font-weight: 600; font-size: 1.05rem; }
.nachweis .zusatz { color: var(--graphit-weich); font-size: .9rem; }

/* ---------- Kennzahlen ---------- */
.kennzahlen { display: grid; margin-top: 0; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px; background: var(--linie); border: 1px solid var(--linie); margin: 3.5rem 0; }
.kennzahl { background: var(--flaeche); padding: 1.6rem 1.4rem; }
.kennzahl b { font-family: var(--schrift-display); font-size: 2.4rem; display: block; line-height: 1; }
.kennzahl span { font-size: .88rem; color: var(--graphit-weich); }

/* ---------- Leistungen als Prüfprotokoll ---------- */
.protokoll { border-top: 1px solid var(--graphit); margin: 2.5rem 0; }
.posten {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1.5rem;
  padding: 1.7rem 0; border-bottom: 1px solid var(--linie);
  transition: background .2s;
}
.posten:hover { background: var(--flaeche); }
.posten .nr {
  font-family: var(--schrift-mess); font-size: .82rem; color: var(--signal);
  padding-top: .35rem; letter-spacing: .08em;
}
.posten h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.posten p  { margin: 0; color: var(--graphit-weich); font-size: .97rem; }
.posten ul { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--graphit-weich); font-size: .95rem; }

/* ---------- Flächen & Bilder ---------- */
.abschnitt { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.abschnitt--flaeche { background: var(--flaeche); border-block: 1px solid var(--linie); }
figure { margin: 2.5rem 0; }
figure img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); }
figcaption { font-size: .88rem; color: var(--graphit-weich); margin-top: .6rem; }

/* ---------- Handlungsaufruf ---------- */
.knopf {
  display: inline-block; background: var(--graphit); color: var(--grund);
  padding: .85rem 1.6rem; text-decoration: none; font-weight: 600;
  border: 1px solid var(--graphit); transition: .18s;
}
.knopf:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.knopf--leer { background: transparent; color: var(--graphit); }
.knopf--leer:hover { background: var(--graphit); color: var(--grund); }

/* ---------- Formular ---------- */
form { max-width: 40rem; }
label { display: block; font-size: .9rem; font-weight: 600; margin: 1.2rem 0 .35rem; }
input, textarea {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--linie);
  background: var(--flaeche); font: inherit; color: var(--graphit);
}
input:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
textarea { min-height: 9rem; resize: vertical; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); background: var(--grund-tief); padding: 3rem 0 2rem; margin-top: 4rem; font-size: .93rem; }
.fuss .spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 2rem; }
.fuss a { color: var(--graphit-weich); text-decoration: none; display: block; padding: .2rem 0; }
.fuss a:hover { color: var(--signal); }
.fuss .rechte { border-top: 1px solid var(--linie); margin-top: 2rem; padding-top: 1.2rem; color: var(--graphit-weich); font-size: .85rem; }

/* ---------- Auftritt ---------- */
@media (prefers-reduced-motion: no-preference) {
  .anlauf { animation: auf .7s cubic-bezier(.2,.7,.3,1) backwards; }
  .anlauf:nth-child(2) { animation-delay: .08s; }
  .anlauf:nth-child(3) { animation-delay: .16s; }
  @keyframes auf { from { opacity: 0; transform: translateY(12px); } }
}

/* ---------- Burger-Menü, ohne JavaScript ---------- */
.menue-schalter { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; clip-path: inset(50%); }
.burger { display: none; }

@media (max-width: 900px) {
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 2.75rem; height: 2.75rem; cursor: pointer;
    border: 1px solid rgba(255,255,255,.16); border-radius: 2px; padding: 0 .55rem;
  }
  .burger span {
    display: block; height: 2px; background: #f2f0ec; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  /* Aus drei Strichen wird ein Kreuz, sobald das Menü offen ist */
  .menue-schalter:checked ~ .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-schalter:checked ~ .burger span:nth-child(2) { opacity: 0; }
  .menue-schalter:checked ~ .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .menue-schalter:focus-visible ~ .burger { outline: 2px solid var(--signal); outline-offset: 2px; }

  .navi {
    flex-basis: 100%; flex-direction: column; gap: 0; margin-left: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .menue-schalter:checked ~ .navi { max-height: 32rem; }
  .navi a {
    padding: .95rem .2rem; border-bottom: 1px solid rgba(255,255,255,.07);
    border-left: 2px solid transparent; font-size: 1.02rem;
  }
  .navi a:hover, .navi a[aria-current="page"] {
    border-bottom-color: rgba(255,255,255,.07); border-left-color: var(--signal);
    padding-left: .7rem;
  }
}

@media (max-width: 780px) {
  .kopf .bahn { flex-wrap: wrap; padding-block: .7rem; gap: .5rem 1rem; }
  .marke-wort { font-size: 1.35rem; }
  .posten { grid-template-columns: 1fr; gap: .4rem; }
  .posten .nr { padding-top: 0; }
}

/* ============================================================ Abbildungen
   Bilder tragen die Seite mit, ohne die ruhige Anmutung zu stoeren: feine Kante,
   leicht zurueckgenommene Farbe, beim Darueberfahren volle Saettigung. */
figure { margin: 2.6rem 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--linie);
  background: #0f1113;
  filter: saturate(.88) contrast(1.03);
  transition: filter .35s ease;
}
figure img:hover { filter: saturate(1) contrast(1.05); }
figcaption {
  margin-top: .7rem; font-size: .88rem; color: var(--graphit-weich);
  font-family: var(--schrift-mess); letter-spacing: .01em;
  border-left: 2px solid var(--signal); padding-left: .7rem;
}

/* ------------------------------------------------------------ ::: galerie
   Dichtes Raster aus Detailaufnahmen — wirkt wie eine Geraetewand im Labor.
   Bewusst kleine Kacheln: die Aufnahmen aus dem Altbestand sind klein, im Raster
   ist das eine Staerke statt eines Mangels. */
.galerie {
  display: grid; gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  margin: 2.8rem 0; background: var(--linie); border: 1px solid var(--linie);
}
.galerie figure { margin: 0; }
.galerie figure img {
  border: 0; aspect-ratio: 4/3; object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.95);
}
.galerie figure img:hover { filter: saturate(1) contrast(1.04) brightness(1); }
.galerie figcaption {
  border: 0; padding: .5rem .7rem .7rem; margin: 0;
  font-size: .74rem; background: var(--grund-tief);
}

/* ------------------------------------------------------------ ::: bildzeile
   Bild und Text nebeneinander. Unter 760px rutscht das Bild ueber den Text. */
.bildzeile {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; margin: 3rem 0;
}
.bildzeile figure { margin: 0; }
.bildzeile h2, .bildzeile h3 { margin-top: 0; }
.bildzeile > p:first-child { margin-top: 0; }

/* Ein Bild, das ueber die volle Textbreite hinausragt — fuer die eine starke Aufnahme */
.breitbild { margin: 3.4rem 0; }
.breitbild figure { margin: 0; }
.breitbild figure img { aspect-ratio: 21/9; object-fit: cover; }

/* Das Akkreditierungssymbol steht fuer sich, nicht ueber die volle Breite */
.siegel { margin: 2.4rem 0; }
.siegel figure { margin: 0; max-width: 20rem; }
.siegel figure img { background: #fff; padding: .9rem; }

@media (max-width: 760px) {
  .bildzeile { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: repeat(2, 1fr); }
  .breitbild figure img { aspect-ratio: 16/10; }
}

/* Registriernummern und Normbezeichnungen sind laenger als eine Kennzahl — kleiner gesetzt
   passen sie in eine Zeile, statt mitten im Wort umzubrechen. */
/* Auf schmalen Schirmen darf die Nummer umbrechen — ein erzwungenes nowrap sprengt
   sonst das Raster und die ganze Seite scrollt seitlich (18.08.2026 gemessen). */
.kennzahl.lang b { font-size: 1.24rem; letter-spacing: -.005em; overflow-wrap: anywhere; }
@media (min-width: 560px) { .kennzahl.lang b { white-space: nowrap; overflow-wrap: normal; } }

/* --- erzeugt von bauen.py: Buehnenbild je Seite --- */
body.bb-metsoft-collage .buehne::after { background-image:
  linear-gradient(100deg, #14161a 26%, rgba(20,22,26,.78) 48%, rgba(20,22,26,.20) 100%),
  url("/bilder/metsoft-collage.jpg"); }
body.bb-multimeter-pruefspitzen .buehne::after { background-image:
  linear-gradient(100deg, #14161a 26%, rgba(20,22,26,.78) 48%, rgba(20,22,26,.20) 100%),
  url("/bilder/multimeter-pruefspitzen.jpg"); }
body.bb-oszilloskop-bedienung .buehne::after { background-image:
  linear-gradient(100deg, #14161a 26%, rgba(20,22,26,.78) 48%, rgba(20,22,26,.20) 100%),
  url("/bilder/oszilloskop-bedienung.jpg"); }