/* ==========================================================================
   KORTE Gravier- & Werkzeugtechnik GmbH
   Gestaltung und Umsetzung: Wipplinger Consulting

   Design-Entscheidungen, bewusst gesetzt und durchgehalten:

   THEME             Dunkle Bühne als Grundton, dazu zwei bewusst gesetzte
                     helle Sektionen: Fertigungsgrenzen und Werkstücke. Grund
                     ist das Material, denn die Studioaufnahmen der Bauteile
                     stehen auf weissem Grund. Der Wechsel ist auf diese zwei
                     Stellen begrenzt und dort identisch aufgebaut, also
                     komponiert und nicht zufällig. Kontraste beider Modi
                     sind gegen WCAG AA gerechnet.
   COLOR LOCK        Ein Akzent, Stahlblau (--co-500), aus dem Blau des
                    Firmenzeichens abgeleitet, auf neutralen Graustufen.
                    Kupfer war die Standardpalette maschinell erzeugter
                    Seiten und las sich entsprechend.
                     Nichts Zweites. Grün und Rot ausschliesslich als
                     Formular-Rückmeldung, entsättigt.
   SHAPE LOCK        Drei Radien, feste Zuordnung:
                       interaktiv (Button, Chip, Pill)  -> --r-pill
                       Flächen (Karte, Medien, Kachel)  -> --r-card
                       Eingabefelder                    -> --r-input
   TYPE              Geist für Fließtext und Display, Geist Mono für Messwerte
                     und Maße. Beide selbst gehostet.
   KONTRAST          Kupferflächen tragen dunkle Schrift (5,94:1). Weiss auf
                     Kupfer käme nur auf 3,32:1 und ist deshalb nirgends im
                     Einsatz.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('font/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('font/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('font/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  --r-chip:  4px;
  /* Bühne */
  --ink:     #0a0b0d;
  --ink-2:   #101216;
  --ink-3:   #15181d;
  --ink-4:   #1c2027;
  --line:    rgba(255, 255, 255, .09);
  --line-2:  rgba(255, 255, 255, .17);

  /* Schrift */
  --text:    #f2f1ef;
  --text-2:  #a4aab2;
  --text-3:  #7d838b;
  --ph:      #949aa2;
  --text-photo: #bcc2c9;  /* Text auf Foto, 5,7:1 im schlimmsten Fall */

  /* Akzent: Kupfer, der einzige der Seite */
  --co-500:  #5b8fc4;
  --co-400:  #8fb6dc;
  --co-600:  #3f6d9c;

  /* Fotoplatte für Studioaufnahmen mit hellem Grund */
  --plate:   #e8e6e2;

  /* Helle Sektionen. Bewusste Ausnahme vom Page Theme Lock: die Studioaufnahmen
     der Bauteile stehen auf weissem Grund und wirken auf einer hellen Fläche
     deutlich besser. Der Wechsel ist auf zwei feste Sektionen begrenzt und
     folgt dort demselben Muster, ist also komponiert und nicht zufällig.
     Alle Werte unten sind auf WCAG AA gegen --p-bg geprüft. */
  --p-bg:     #f5f4f2;
  --p-bg-2:   #eceae7;
  --p-text:   #13161a;   /* 16,5:1 */
  --p-text-2: #4e555e;   /*  6,9:1 */
  --p-text-3: #5f666e;   /*  5,2:1 */
  --p-line:   rgba(10, 12, 16, .12);
  --p-accent: #2b5f92;   /*  6,06 : 1 */

  /* Rückmeldung im Formular, entsättigt */
  --ok:      #8fbf94;
  --ok-bg:   rgba(143, 191, 148, .11);
  --bad:     #d99a83;
  --bad-bg:  rgba(217, 154, 131, .11);

  /* Form */
  --r-pill:  6px;
  --r-card:  8px;
  --r-input: 6px;

  --shell:   1400px;
  --gut:     clamp(20px, 5vw, 60px);

  --ease:    cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.4, 0, .2, 1);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--co-400); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--co-500); color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--co-500); color: var(--ink); padding: 12px 18px;
  border-radius: 0 0 var(--r-input) 0; font-weight: 600;
}
.skip:focus { left: 0; }

.ico { flex: none; stroke-width: 1.5; }

/* --- Layout ------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: clamp(68px, 9vw, 128px); position: relative; }
.sec--tight { padding-block: clamp(52px, 6vw, 88px); }
.sec--rule { border-top: 1px solid var(--line); }
.sec--raised { background: var(--ink-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* --- Helle Sektion ------------------------------------------------------ */
.plate { background: var(--p-bg); color: var(--p-text); }
.plate + .plate { padding-top: 0; }
/* Dasselbe fuer zwei schlichte dunkle Abschnitte (Unternehmen, Messtechnik,
   Vorabcheck). Abschnitte mit eigener Flaeche oder Linie bleiben unberuehrt. */
section[class="sec"] + section[class="sec"] { padding-top: 0; }
.plate .eyebrow { color: var(--p-accent); }
.plate .lead { color: var(--p-text-2); }
.plate .lead strong, .plate .prose strong { color: var(--p-text); }
.plate .prose p { color: var(--p-text-2); }
.plate .figure figcaption { color: var(--p-text-3); }
.plate .tlink { color: var(--p-accent); border-color: rgba(43, 95, 146, .34); }
.plate .tlink:hover { border-color: var(--p-accent); color: #1f4b74; }
.plate .btn--ghost { border-color: var(--p-line); color: var(--p-text); background: transparent; }
.plate .btn--ghost:hover { border-color: rgba(10, 12, 16, .32); background: rgba(10, 12, 16, .04); }
/* Dunkle Karten auf heller Fläche erben deren Textfarbe. Die Kachelzeile
   "Fräswerkzeuge ab" stand damit dunkel auf dunkel und war unsichtbar
   (1,02 : 1). Karten setzen ihre Farbe selbst. */
.plate .tile { color: var(--text); }
/* Der Knopf stand allein in einer leeren halben Bildschirmbreite. Daneben
   die Angabe, die an dieser Stelle als naechstes gebraucht wird. */
.after-row {
  margin-top: clamp(26px, 2.8vw, 38px);
  display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); flex-wrap: wrap;
}
.after-row p { font-size: .86rem; line-height: 1.55; color: var(--text-2); max-width: 46ch; }
.plate .after-row p { color: var(--p-text-2); }
/* Der Cluster stand auf der hellen Fläche in den Dunkel-Tönen: die Werte in
   Weiss auf Weiss (1,03 : 1), die Begriffe bei 2,13 : 1. Gemessen, nicht
   geschätzt. Hier die Hell-Token, alle über AA. */
.plate .cluster__g { background: #fff; border-color: var(--p-line); }
.plate .cluster__h { border-bottom-color: var(--p-line); }
.plate .cluster__g div + div { border-top-color: var(--p-line); }
.plate .cluster__h { color: var(--p-text-3); }
.plate .cluster__g dt { color: var(--p-text-2); }
.plate .cluster__g dd { color: var(--p-text); }

/* Formulare auf hellen Flaechen: weisse Karte, dunkle Schrift, ruhige
   Raender. Die dunkle Fassung bleibt fuer die Karte im Seitenkopf. */
.plate .form {
  background: #fff; border-color: var(--p-line);
  box-shadow: 0 24px 60px -38px rgba(15, 18, 24, .35);
}
.plate .field label { color: var(--p-text-2); }
.plate .field label span { color: var(--p-accent); }
.plate .field input, .plate .field select, .plate .field textarea {
  /* background-color, nicht das Kurzschrift-background: das wuerde dem
     Select Pfeil-Wiederholung und Position zuruecksetzen und den Pfeil
     als Wellenmuster ueber den Text kacheln. */
  background-color: #fff; border-color: #d8d5cf; color: var(--p-text);
}
.plate .field input::placeholder, .plate .field textarea::placeholder { color: #8a9098; }
.plate .field input:hover, .plate .field select:hover, .plate .field textarea:hover {
  border-color: #b8b4ad;
}
.plate .field input:focus, .plate .field select:focus, .plate .field textarea:focus {
  background-color: #fff; border-color: var(--co-600);
  box-shadow: 0 0 0 3px rgba(43, 95, 146, .16);
}
.plate .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%235f666e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
.plate .field__help { color: var(--p-text-3); }
.plate .check { color: var(--p-text-2); }
.plate .check a { border-bottom-color: #c9c5be; }
.plate .form__hint { color: var(--p-text-3); }
.plate .drop { border-color: #c6c2bb; background: #faf9f7; }
.plate .drop:hover, .plate .drop.is-over { border-color: var(--co-600); background: #f2f6fa; }
.plate .drop__t { color: var(--p-text); }
.plate .drop__s, .plate .drop__file { color: var(--p-text-3); }
.plate .drop .ico { color: var(--p-accent); }
.plate .contact a, .plate .ctc { color: var(--p-text-2); }
.plate .contact dt { color: var(--p-text-3); }
.plate .contact dd { color: var(--p-text); }
/* Die dunkle Ergebniskarte behaelt in der hellen Sektion ihre eigene
   Schrift, sonst erbt die Ueberschrift das Seiten-Dunkel: unsichtbar. */
.plate .verdict { color: var(--text); }
.plate .verdict p { color: var(--text-2); }
/* Fragen und Antworten auf heller Flaeche. Die Antwort erbte den
   Dunkel-Ton und stand bei 2,13 : 1, also praktisch unlesbar. */
.plate .faq, .plate .faq details { border-color: var(--p-line); }
.plate .faq summary { color: var(--p-text); }
.plate .faq summary:hover { color: var(--p-accent); }
.plate .faq summary .ico { color: var(--p-accent); }
.plate .faq__a p { color: var(--p-text-2); }
/* Kacheln, Maschinengruppen und Werkstuecke ziehen mit. */
.plate .mgroup__t, .plate .work__c { color: var(--p-text); }
.plate .mgroup li, .plate .work__d { color: var(--p-text-2); }
.plate .mgroup__h { color: var(--p-text-3); border-bottom-color: var(--p-line); }

/* Datei-Eingang */
.upl { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 4.4vw, 66px); align-items: start; }
.upl h2 { margin-bottom: 12px; }
.upl__wie { margin: 18px 0 0; padding: 0 0 0 18px; display: grid; gap: 10px; }
.upl__wie li { color: var(--p-text-2); font-size: .93rem; line-height: 1.55; }
.upl__wie b { color: var(--p-text); font-weight: 560; }
.upl__ds { margin-top: 18px; font-size: .82rem; line-height: 1.55; color: var(--p-text-3); max-width: 48ch; }
.upl__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.upl__liste li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: .86rem; color: var(--p-text-2);
  padding: 8px 11px; background: #f6f5f2; border-radius: var(--r-input);
}
.upl__weg {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .78rem; color: var(--p-accent); border-bottom: 1px solid #c9c5be;
}
.upl__bar { height: 5px; border-radius: 3px; background: #e7e4df; overflow: hidden; }
.upl__bar span { display: block; height: 100%; width: 0; background: var(--co-600); transition: width .25s; }
.upl__ok { display: grid; gap: 9px; }
.upl__ok-t { font-size: 1.1rem; font-weight: 580; color: var(--p-text); }
.upl__ok p { color: var(--p-text-2); font-size: .93rem; line-height: 1.6; }
.upl__ok-s { font-size: .84rem; color: var(--p-text-3); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 900px) { .upl { grid-template-columns: 1fr; gap: 30px; } }

/* --- Type --------------------------------------------------------------- */
.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--co-400);
  margin-bottom: 18px; display: block;
}

h1, .h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.05rem);
  font-weight: 560; letter-spacing: -.033em; line-height: 1.04;
  text-wrap: balance;
}
h2, .h2 {
  font-size: clamp(1.72rem, 3vw, 2.65rem);
  font-weight: 550; letter-spacing: -.028em; line-height: 1.1;
  text-wrap: balance;
}
h3, .h3 { font-size: 1.1rem; font-weight: 560; letter-spacing: -.015em; line-height: 1.32; }

.lead {
  font-size: clamp(1.04rem, 1.25vw, 1.24rem);
  line-height: 1.55; color: var(--text-2);
  max-width: 60ch; letter-spacing: -.006em;
}
.lead strong, .prose strong { color: var(--text); font-weight: 500; }
.prose p { color: var(--text-2); max-width: 62ch; }
.prose p + p { margin-top: 1.05em; }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4.4vw, 60px); }
.sec-head .lead { margin-top: 20px; }

/* Textabschnitt: Titel links, Text rechts. Unter 1000px untereinander,
   dann mit kurzem Abstand, nicht mit dem vollen Kopfabstand. */
.textrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5.4vw, 92px); align-items: start; }
.textrow > .sec-head { margin-bottom: 0; }
.textrow .prose { padding-top: .45em; }
@media (max-width: 1000px) {
  .textrow { grid-template-columns: 1fr; gap: 22px; }
  .textrow .prose { padding-top: 0; }
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 24px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 550; font-size: .95rem; letter-spacing: -.008em;
  white-space: nowrap; cursor: pointer;
  transition: background .26s var(--ease-io), border-color .26s var(--ease-io),
              color .26s var(--ease-io), transform .2s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.985); }

/* Kupfer trägt dunkle Schrift, siehe Kontrastnotiz im Kopf */
.btn--primary { background: var(--co-500); color: var(--ink); }
.btn--primary:hover { background: var(--co-400); }

.btn--ghost { border-color: var(--line-2); color: var(--text); background: rgba(255,255,255,.03); }
.btn--ghost:hover { border-color: rgba(255,255,255,.36); background: rgba(255,255,255,.07); }

.btn .ico { transition: transform .28s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.tlink {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 520; font-size: .94rem; color: var(--co-400);
  padding-bottom: 2px; border-bottom: 1px solid rgba(233,166,116,.3);
  transition: border-color .24s, color .24s;
}
.tlink:hover { border-color: var(--co-400); color: #f3c8a4; }

/* --- Header ------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease-io), border-color .4s var(--ease-io);
}
/* Ohne diesen Verlauf stünde die Navigation über hellen Bildstellen ohne Kontrast */
.hdr::before {
  content: ''; position: absolute; inset: 0 0 -34px 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,9,11,.88) 0%, rgba(8,9,11,.55) 55%,
    rgba(8,9,11,0) 100%);
  opacity: 1; transition: opacity .4s var(--ease-io); pointer-events: none;
}
.hdr.is-stuck::before { opacity: 0; }
.hdr.is-stuck {
  background: rgba(10, 11, 13, .8);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 30px; height: 76px; transition: height .35s var(--ease-io); }
.hdr.is-stuck .hdr__in { height: 64px; }

/* Sentinel für den IntersectionObserver, ersetzt einen Scroll-Listener */
.hdr-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.brand { display: flex; align-items: center; gap: 13px; flex: none; }
/* Das Firmenlogo, unverändert übernommen. Es ist in die Jahre gekommen, aber
   es ist ihr Zeichen, und der Kupferton liegt zufällig fast genau auf dem
   Akzent dieser Seite. Höhe knapp unter der Navigationszeile. */
.brand__logo { height: 34px; width: auto; display: block; transition: height .35s var(--ease-io); }
.hdr.is-stuck .brand__logo { height: 29px; }
.ftr .brand__logo { height: 40px; }
.brand__rule { width: 1px; height: 24px; background: var(--line-2); }
.brand__sub {
  font-size: .715rem; line-height: 1.3; color: var(--text-3);
  letter-spacing: .015em; white-space: nowrap;
}

.nav { display: flex; gap: clamp(2px, .7vw, 12px); margin-left: auto; align-items: center; }
.nav a {
  position: relative;
  font-size: .9rem; font-weight: 490; color: var(--text-2);
  padding: 9px 4px; white-space: nowrap;
  transition: color .2s var(--ease-io);
}
/* Aktive Seite als Unterstrich, nicht als Pille: ruhiger und verwechselt
   sich nicht mit dem Button daneben. */
.nav a::after {
  content: ''; position: absolute; left: 4px; right: 4px; bottom: 1px; height: 1.5px;
  background: var(--co-500); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.hdr__cta { display: flex; align-items: center; gap: 18px; flex: none; margin-left: 14px; }
.hdr__tel {
  font-size: .885rem; font-weight: 500; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: color .2s;
}
.hdr__tel:hover { color: var(--text); }
.hdr__tel .ico { opacity: .62; }
.hdr .btn { padding: 11px 20px; font-size: .885rem; }

.burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.04); border-radius: var(--r-pill);
  align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.burger .ico--close { display: none; }
.burger[aria-expanded="true"] .ico--open { display: none; }
.burger[aria-expanded="true"] .ico--close { display: block; }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8, 9, 11, .975);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 94px var(--gut) 36px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .32s var(--ease-io), transform .38s var(--ease), visibility .32s;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer a { font-size: 1.42rem; font-weight: 540; letter-spacing: -.024em; padding: 13px 0; border-bottom: 1px solid var(--line); }
.drawer .btn { margin-top: 22px; align-self: flex-start; }
.drawer__foot { margin-top: auto; padding-top: 26px; color: var(--text-3); font-size: .9rem; }
.drawer__foot a { font-size: .95rem; border: 0; padding: 3px 0; display: block; color: var(--text-2); }

/* ==========================================================================
   Hero: ein Bild, eine Überschrift, ein Satz, zwei Wege weiter.
   ========================================================================== */


/* Headline auf zwei Zeilen bei 1440px, Schriftgrad und Spaltenbreite dafuer abgestimmt */



/* --- Kennzahlenband ----------------------------------------------------- */




/* --- Split (genau einmal pro Seite) ------------------------------------- */
.split { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(30px, 4.4vw, 68px); align-items: center; }
.split--wide { grid-template-columns: 1fr 1.1fr; }
.split h2 + .lead, .split h2 + .prose, .split .lead + .prose { margin-top: 22px; }

.figure img { border-radius: var(--r-card); width: 100%; }
.figure figcaption { margin-top: 13px; font-size: .82rem; color: var(--text-3); line-height: 1.45; max-width: 44ch; }
/* Studioaufnahme auf heller Platte, bleibt ein Bauteil und kein Themenwechsel */
.figure--plate img { background: var(--plate); border: 1px solid var(--line); }

/* ==========================================================================
   Fertigungsgrenzen: vier grosse Werte, danach zwei gruppierte Blöcke.
   Bewusst keine zehnzeilige Tabelle mit Haarlinie unter jeder Zeile.
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 20px); }
.tile {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding: 24px 22px 22px;
}
.tile__k {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 500;
  letter-spacing: -.04em; line-height: 1; color: var(--co-400);
  display: block;
}
.tile__k small { font-size: .44em; font-weight: 450; letter-spacing: 0; color: var(--text-2); margin-left: .35em; }
.tile__t { margin-top: 15px; font-size: .95rem; font-weight: 540; letter-spacing: -.012em; }
.tile__d { margin-top: 6px; font-size: .84rem; color: var(--text-3); line-height: 1.48; }

.cluster { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.6vw, 40px); }
/* Zwei Karten statt zweier nackter Listen. Eine Haarlinie unter jeder Zeile
   fuehrt das Auge von der Bezeichnung zum Wert; ohne sie schwammen die
   Zahlen frei auf der Flaeche. */
.cluster__g {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--ink-2); padding: clamp(18px, 1.9vw, 26px);
}
.cluster__h {
  font-size: .74rem; font-weight: 620; letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-3); padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.cluster__g dl { display: grid; }
.cluster__g div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 18px; flex-wrap: wrap; padding: 13px 0;
}
/* Trennlinie nur zwischen zwei Zeilen. Eine Linie unter jeder Zeile ist die
   Rasterung, an der man erzeugte Tabellen erkennt. */
.cluster__g div + div { border-top: 1px solid var(--line); }
.cluster__g dt { font-size: .91rem; color: var(--text-2); }
.cluster__g dd { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: .93rem; text-align: right; color: var(--text); margin-left: auto; }

/* ==========================================================================
   Verfahren: asymmetrisches Bento, neun Inhalte in neun Zellen.
   Zwei Zellen tragen ein Bild, damit die Fläche nicht aus Text besteht.
   ========================================================================== */
/* Neun Inhalte, neun Zellen, fuenf volle Reihen. Die Spannweiten stehen in
   build.py und ergeben je Reihe genau 6 Spalten, deshalb bleibt keine Zelle leer. */
/* Verfahren als Bildkarten. Ein Foto, ein Titel, eine Wertzeile, ein Pfeil.
   Kein Kastenraster mit wechselnden Groessen: das Motiv traegt die Karte. */
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.7vw, 22px); }
.vcard {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--ink-3);
  transition: transform .35s var(--ease);
}
.vcard:hover { transform: translateY(-3px); }
.vcard__media, .vcard__media picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.vcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.vcard:hover .vcard__media img { transform: scale(1.04); }
.vcard__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,.16) 0%, rgba(10,11,13,0) 34%,
    rgba(10,11,13,.1) 55%, rgba(10,11,13,.9) 100%);
}
.vcard__body {
  position: absolute; inset: auto 0 0 0; padding: clamp(18px, 2vw, 26px);
  display: grid; gap: 5px;
}
.vcard__body h3 { font-size: clamp(1.15rem, 1.4vw, 1.4rem); letter-spacing: -.018em; }
.vcard__body p { font-size: .86rem; color: var(--text-photo); line-height: 1.5; }
.vcard__body .ico { margin-top: 8px; color: var(--text); transition: transform .28s var(--ease); }
.vcard:hover .vcard__body .ico { transform: translateX(5px); }

/* ==========================================================================
   Werkstücke: alle acht Aufnahmen gleichzeitig sichtbar, auf heller Fläche.
   Bildraster, kein Feature-Karten-Dreier.
   ========================================================================== */
.works { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.7vw, 24px); }
.works figure { margin: 0; }
.works img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-card); background: #fff;
  border: 1px solid var(--p-line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.works figure:hover img {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(10, 12, 16, .45);
}
.works figcaption {
  margin-top: 12px; font-size: .825rem; line-height: 1.45; color: var(--p-text-3);
}

/* ==========================================================================
   Branchen: randlose Bildkarten. Das Foto ist die Fläche, der Text steht
   darauf auf einem Verlauf. Keine Etiketten auf dem Bild.
   ========================================================================== */
.sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }
.sector {
  position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card);
  min-height: 356px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 26px 24px 24px;
  transition: border-color .3s var(--ease-io), transform .4s var(--ease);
}
.sector:hover { border-color: var(--line-2); transform: translateY(-4px); }
.sector__m { position: absolute; inset: 0; z-index: -2; }
.sector__m, .sector__m picture { height: 100%; }
.sector__m img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 32%;   /* Motiv in die helle Zone, Text bleibt im dunklen Teil */
  transition: transform .9s var(--ease);
}
.sector:hover .sector__m img { transform: scale(1.055); }
.sector::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,9,11,.97) 0%, rgba(8,9,11,.93) 40%,
              rgba(8,9,11,.6) 60%, rgba(8,9,11,.16) 84%, rgba(8,9,11,.04) 100%);
}
.sector h3 { font-size: 1.18rem; margin-bottom: 9px; }
.sector p { font-size: .875rem; color: var(--text-photo); line-height: 1.52; }
.sector__more {
  margin-top: 15px; display: inline-flex; align-items: center; gap: 7px;
  font-size: .85rem; font-weight: 520; color: var(--co-400);
}
.sector__more .ico { transition: transform .28s var(--ease); }
.sector:hover .sector__more .ico { transform: translateX(4px); }

/* --- Breitbild-Band ----------------------------------------------------- */
.band { position: relative; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--line); margin-bottom: clamp(34px, 4.4vw, 58px); }
.band img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.band figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 24px 19px;
  font-size: .82rem; color: var(--text-photo);
  background: linear-gradient(to top, rgba(8,9,11,.94), transparent);
}

/* --- Maschinengruppen --------------------------------------------------- */
.mgroups { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.mgroup { border-top: 1px solid var(--line-2); padding-top: 19px; }
.mgroup__h { font-size: .78rem; font-weight: 620; letter-spacing: .11em; text-transform: uppercase; color: var(--co-400); margin-bottom: 14px; }
.mgroup ul { display: flex; flex-direction: column; gap: 8px; }
.mgroup li { font-size: .93rem; color: var(--text-2); }

/* --- Maschinenpark: Gruppen mit Foto ------------------------------------ */
/* Breit-schmal, schmal-breit, breit-schmal. Gleiche Bildhoehe in jeder
   Reihe, damit die Listen darunter auf einer Linie beginnen. */
.mcards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 22px); }
.mcard {
  grid-column: span 2; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ink-2);
}
.mcard:nth-child(6n+1), .mcard:nth-child(6n+4), .mcard:nth-child(6n+5) { grid-column: span 4; }
.mcard__m { height: clamp(190px, 17vw, 252px); overflow: hidden; background: var(--ink-3); }
.mcard__m picture, .mcard__m img { display: block; width: 100%; height: 100%; }
.mcard__m img { object-fit: cover; transition: transform .8s var(--ease); }
.mcard__b { padding: 20px 22px 24px; }
.mcard__h { font-size: 1.12rem; margin-bottom: 12px; }
.mcard ul { display: flex; flex-direction: column; gap: 7px; }
.mcard li { font-size: .93rem; color: var(--text-2); }
.mcard:nth-child(6n+1) ul, .mcard:nth-child(6n+4) ul, .mcard:nth-child(6n+5) ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 24px; max-width: 560px;
}
@media (hover: hover) and (pointer: fine) {
  .mcard:hover .mcard__m img { transform: scale(1.03); }
}
@media (max-width: 1080px) {
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcards .mcard { grid-column: auto; }
  .mcards .mcard ul { display: flex; }
}
@media (max-width: 640px) {
  .mcards { grid-template-columns: 1fr; }
  .mcard__m { height: auto; aspect-ratio: 16 / 9; }
}

.note { border-left: 2px solid var(--co-500); padding: 3px 0 3px 20px; margin-top: clamp(32px, 3.6vw, 48px); max-width: 66ch; }
.note p { font-size: .97rem; color: var(--text-2); }
.note cite { display: block; margin-top: 11px; font-style: normal; font-size: .79rem; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }

/* ==========================================================================
   Qualität: keine Karten, nur Rhythmus. Asymmetrisch 1 gross, 2 klein.
   ========================================================================== */
.qual { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: clamp(24px, 3vw, 52px); }
.qual__i:first-child { grid-row: span 1; }
.qual__k { font-family: var(--mono); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--co-400); display: block; }
.qual__i h3 { margin: 14px 0 8px; font-size: 1.02rem; }
.qual__i p { font-size: .885rem; color: var(--text-2); line-height: 1.54; }

.certs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(30px, 3.6vw, 44px); }
.certs span {
  padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  font-size: .865rem; font-weight: 510; background: rgba(255,255,255,.03);
}

/* --- Prozesskette ------------------------------------------------------- */
/* Prozesskette. Sieben Stationen, jede mit Zeichen und Nummer, verbunden
   durch eine Linie. Kein Kasten und kein Querlauf: auf schmalen Fenstern
   bricht die Kette um, statt zum Schieben zu zwingen. */
.chain { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(12px, 1.5vw, 22px); list-style: none; }
.chain__s { position: relative; }
.chain__ic {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--line-2); border-radius: 7px; color: var(--co-400);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition: border-color .3s var(--ease-io), color .3s var(--ease-io);
}
.chain__s:hover .chain__ic { border-color: rgba(91,143,196,.42); color: var(--co-500); }
/* Die Linie laeuft vom Zeichen zum naechsten und verliert sich nach rechts. */
.chain__s:not(:last-child)::after {
  content: ''; position: absolute; left: 56px; right: calc(-1 * clamp(12px, 1.5vw, 22px));
  top: 23px; height: 1px;
  background: linear-gradient(90deg, var(--line-2), rgba(255,255,255,.04));
}

.chain__n { display: block; margin-top: 16px; font-size: .94rem; font-weight: 550; letter-spacing: -.015em; }
.chain__d { display: block; margin-top: 5px; font-size: .8rem; color: var(--text-3); line-height: 1.44; }
@media (max-width: 1080px) {
  .vgrid { grid-template-columns: repeat(2, 1fr); }
  .chain { grid-template-columns: repeat(4, 1fr); row-gap: 30px; }
  .chain__s:nth-child(4)::after { display: none; }
}
@media (max-width: 720px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
  .chain__s:nth-child(2n)::after { display: none; }
  .chain__s:nth-child(4)::after { display: block; }
}

/* --- Ablauf: gruppierte Schritte, keine Haarlinie je Zeile -------------- */
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.8vw, 40px) clamp(28px, 3.6vw, 56px); }
.step { position: relative; padding-top: 20px; border-top: 1px solid var(--line-2); }
.step::before { content: ''; position: absolute; left: 0; top: -1px; width: 32px; height: 1px; background: var(--co-400); }
.plate .step { border-top-color: var(--p-line); }
.plate .step::before { background: var(--p-accent); }
.plate .step p { color: var(--p-text-2); }
@media (min-width: 1101px) {
  .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: clamp(22px, 2.4vw, 36px); }
}
.step h3 { margin-bottom: 8px; }
.step h3 span { color: var(--co-400); font-family: var(--mono); font-weight: 500; margin-right: 9px; font-size: .9em; }
.step p { font-size: .9rem; color: var(--text-2); line-height: 1.55; max-width: 52ch; }

/* --- Logowand ----------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--line); }
.logos div { background: var(--ink-2); padding: 28px 16px; display: flex; align-items: center; justify-content: center; min-height: 104px; transition: background .3s; }
.logos div:hover { background: var(--ink-3); }
.logos img {
  max-width: 138px; max-height: 32px; width: auto; height: auto;
  object-fit: contain; opacity: .72; transition: opacity .32s var(--ease-io);
}
.logos div:hover img { opacity: 1; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 900px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 21px 0; cursor: pointer; list-style: none;
  font-size: 1.03rem; font-weight: 530; letter-spacing: -.016em; transition: color .22s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--co-400); }
.faq summary .ico { margin-top: 3px; color: var(--co-500); transition: transform .32s var(--ease); }
.faq details[open] summary .ico { transform: rotate(135deg); }
.faq__a { padding: 0 0 22px 36px; }
.faq__a p { font-size: .94rem; color: var(--text-2); max-width: 64ch; }
.faq details[open] .faq__a { animation: fadeUp .4s var(--ease) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* --- Stellen ------------------------------------------------------------ */
.jobs { display: grid; gap: 13px; margin-top: clamp(32px, 3.6vw, 46px); }
.job {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--ink-2); transition: border-color .3s, background .3s;
}
.job:hover { border-color: var(--line-2); background: var(--ink-3); }
.job__t { font-size: 1.02rem; font-weight: 540; letter-spacing: -.016em; }
.job__m { font-size: .845rem; color: var(--text-3); margin-top: 5px; }
.job__m i { font-style: normal; opacity: .5; margin: 0 7px; }
.job .tlink { margin-left: auto; }

/* --- Standorte ---------------------------------------------------------- */
.locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.loc { border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 21px; background: var(--ink-2); }
.loc__tag { font-size: .74rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--co-400); display: block; margin-bottom: 12px; }
.loc address { font-style: normal; font-size: .99rem; line-height: 1.54; }
.loc p { font-size: .85rem; color: var(--text-3); margin-top: 9px; }

/* --- Kontakt und Formular ----------------------------------------------- */
.contact { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 4.4vw, 66px); }
.cinfo__list { display: grid; gap: 16px; margin-top: 28px; }
.cinfo__list > div { display: flex; align-items: flex-start; gap: 13px; }
.cinfo__list .ico { color: var(--co-400); margin-top: 3px; }
.cinfo__list dt { font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.cinfo__list dd { font-size: .99rem; margin-top: 3px; }
.cinfo__list dd a { border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: border-color .24s; }
.cinfo__list dd a:hover { border-color: var(--co-500); }

.form { border: 1px solid var(--line); border-radius: var(--r-card); background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); padding: clamp(22px, 2.8vw, 34px); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .79rem; font-weight: 540; letter-spacing: .025em; color: var(--text-2); }
.field label span { color: var(--co-400); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,.045); border: 1px solid var(--line-2);
  border-radius: var(--r-input); padding: 12px 13px; font-size: .94rem; width: 100%;
  transition: border-color .24s, background .24s, box-shadow .24s;
}
.field textarea { resize: vertical; min-height: 114px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,.28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--co-500); background: rgba(255,255,255,.065);
  box-shadow: 0 0 0 3px rgba(91,143,196,.22), 0 0 0 1px var(--co-600);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ph); }
.field__help { font-size: .78rem; color: var(--text-3); }
.field select {
  appearance: none; cursor: pointer; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23a4aab2' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.field select option { background: var(--ink-3); color: var(--text); }
.field__err { font-size: .79rem; color: var(--bad); min-height: 0; }

.check { grid-column: 1 / -1; display: flex; gap: 11px; align-items: flex-start; font-size: .85rem; color: var(--text-2); line-height: 1.5; cursor: pointer; }
.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--co-500); cursor: pointer; }
.check a { border-bottom: 1px solid var(--line-2); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-top: 22px; }
.form__hint { font-size: .8rem; color: var(--text-3); max-width: 32ch; line-height: 1.45; }
.form__msg { grid-column: 1 / -1; font-size: .87rem; padding: 12px 15px; border-radius: var(--r-input); display: none; }
.form__msg.is-on { display: block; }
.form__msg.is-ok { background: var(--ok-bg); border: 1px solid rgba(143,191,148,.3); color: var(--ok); }
.form__msg.is-err { background: var(--bad-bg); border: 1px solid rgba(217,154,131,.32); color: var(--bad); }

/* Ladezustand des Absendens, Form der Zielfläche statt Spinner */
.btn.is-busy { position: relative; color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(10,11,13,.28), transparent);
  background-size: 200% 100%; animation: sweep 1.1s linear infinite;
}
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --- CTA-Band ----------------------------------------------------------- */
.ctaband {
  border-top: 1px solid var(--line);
  background: radial-gradient(78% 130% at 76% 0%, rgba(91,143,196,.15) 0%, rgba(91,143,196,0) 58%), var(--ink-2);
}
.ctaband__in { display: flex; align-items: center; justify-content: space-between; gap: 38px; flex-wrap: wrap; }
.ctaband h2 { max-width: 22ch; }
.ctaband p { color: var(--text-2); margin-top: 14px; max-width: 46ch; font-size: .99rem; }

/* --- Seitenkopf der Unterseiten ---------------------------------------- */
.phero { position: relative; padding-top: 104px; padding-bottom: clamp(34px, 4vw, 56px); overflow: hidden; isolation: isolate; }
.phero--img { padding-top: 128px; padding-bottom: clamp(40px, 5vw, 72px); min-height: 48svh; display: flex; align-items: flex-end; }
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media picture { display: block; width: 100%; height: 100%; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
/* Unten voll deckend, sonst entsteht an der Bildkante eine sichtbare Naht */
.phero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(78deg, rgba(8,9,11,.96) 0%, rgba(8,9,11,.86) 38%, rgba(8,9,11,.5) 74%, rgba(8,9,11,.34) 100%),
    linear-gradient(to top, rgba(8,9,11,1) 0%, rgba(8,9,11,.72) 24%, rgba(8,9,11,0) 62%);
}
/* Der Kopf der Unterseiten trug die Shell-Breite selbst auf 860px herunter.
   Damit zentrierte sich der ganze Block in der Fensterbreite und stand nicht
   mehr auf derselben Kante wie Logo, Navigation und alle Abschnitte darunter.
   Die Shell bleibt breit, begrenzt wird nur das Textmass. */
.phero__in { position: relative; }
.phero__in > * { max-width: 880px; }
.phero h1 { margin-bottom: 18px; overflow-wrap: break-word; }
@media (max-width: 480px) { .phero h1, .shero h1 { hyphens: auto; } }
.phero .lead { max-width: 56ch; }
/* Kennwerte als eigenes Band unter dem Kopf, auf ruhigem Grund.
   Auf dem Foto waren sie Aufkleber und je nach Bildinhalt schlecht lesbar. */
.pstats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.pstats__in { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 72px); padding-block: 20px; }
.pstat { display: flex; align-items: baseline; gap: 9px; }
.pstat__k {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 500; color: var(--co-400); letter-spacing: -.02em;
}
.pstat__v { font-size: .84rem; color: var(--text-3); }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-3); margin-bottom: 22px; }
.crumbs a { color: var(--text-3); transition: color .2s; padding-block: 10px; margin-block: -10px; }
.crumbs a:hover { color: var(--text-2); }
.crumbs span { opacity: .45; }
.crumbs em { font-style: normal; color: var(--text-2); }

/* --- Weiterführende Links ---------------------------------------------- */
.rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rel__i {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 17px 19px; background: var(--ink-2);
  transition: border-color .3s, background .3s, transform .35s var(--ease);
}
.rel__i:hover { border-color: var(--line-2); background: var(--ink-3); transform: translateY(-2px); }
.rel__i .ico { margin-left: auto; color: var(--co-400); transition: transform .28s var(--ease); }
.rel__i:hover .ico { transform: translateX(4px); }
.rel__l { font-size: .95rem; font-weight: 530; letter-spacing: -.014em; display: block; }
.rel__s { font-size: .82rem; color: var(--text-3); display: block; margin-top: 3px; }
.rel__txt { min-width: 0; }

/* --- Footer ------------------------------------------------------------- */
.ftr { border-top: 1px solid var(--line); background: var(--ink); padding-block: clamp(48px, 5.4vw, 74px) 30px; }
.ftr__top { display: grid; grid-template-columns: 1.28fr 1fr 1fr 1fr; gap: clamp(26px, 3vw, 46px); }
.ftr__h { font-size: .755rem; font-weight: 620; letter-spacing: .11em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.ftr ul li { margin-bottom: 2px; }
.ftr ul a { display: inline-block; padding-block: 6px; font-size: .915rem; color: var(--text-2); transition: color .2s; }
.ftr ul a:hover { color: var(--text); }
.ftr address { font-style: normal; font-size: .915rem; color: var(--text-2); line-height: 1.6; }
.ftr__brand .brand { margin-bottom: 16px; }
.ftr__legal {
  margin-top: clamp(36px, 4.4vw, 56px); padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline;
  font-size: .805rem; color: var(--text-3); line-height: 1.55;
}
.ftr__legal a { color: var(--text-3); transition: color .2s; }
.ftr__legal a:hover { color: var(--text-2); }
.ftr__links { display: flex; gap: 18px; }
/* Siegel des Umsetzers. Zurueckhaltend: eine Zeile Text, darunter das
   Zeichen. Es gehoert in die Fusszeile, nicht neben das Kundenlogo. */
.ftr__siegel {
  display: inline-grid; gap: 6px; justify-items: start;
  transition: opacity .28s var(--ease-io);
}
.ftr__siegel span { font-size: .74rem; letter-spacing: .04em; color: var(--text-3); }
.ftr__siegel img { height: 34px; width: auto; display: block; opacity: .72; transition: opacity .28s var(--ease-io); }
.ftr__siegel:hover img { opacity: 1; }

/* --- Reveal ------------------------------------------------------------- */
/* .r beim Scrollen über IntersectionObserver, .ri direkt beim Laden */
.r { opacity: 0; transform: translateY(14px); }
.r.is-in { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .85s var(--ease); transition-delay: var(--d, 0ms); }
.ri { animation: riseIn .85s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; }
  .ri { animation: none; opacity: 1; transform: none; }
  
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- Rechtstexte -------------------------------------------------------- */
.legal { padding-top: 116px; }
.legal .prose { max-width: 70ch; }
.legal h2 { font-size: clamp(1.32rem, 2vw, 1.72rem); margin-top: 2.1em; margin-bottom: .65em; }
.legal .prose ul { list-style: disc; padding-left: 1.25em; color: var(--text-2); margin: 1em 0; }
.legal .prose ul li { margin-bottom: .4em; font-size: .94rem; }
.legal__dl { margin: 1.4em 0; display: grid; gap: 12px; }
.legal__dl > div { display: grid; grid-template-columns: 190px 1fr; gap: 14px; }
.legal__dl dt { color: var(--text-3); font-size: .87rem; }
.legal__dl dd { font-size: .94rem; }

/* ==========================================================================
   Umbrüche. Für jedes mehrspaltige Raster ist der Fallback hier deklariert.
   ========================================================================== */
@media (max-width: 1300px) {
  .nav { gap: 10px; }
  .nav a { font-size: .86rem; padding: 9px 2px; }
  .hdr__tel { display: none; }
}

@media (max-width: 1080px) {

  .tiles { grid-template-columns: repeat(2, 1fr); }
  .mgroups { grid-template-columns: repeat(2, 1fr); }
  .qual { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(3, 1fr); }
  .sectors { grid-template-columns: repeat(2, 1fr); }
  .logos { grid-template-columns: repeat(4, 1fr); }
  .rel { grid-template-columns: repeat(2, 1fr); }
  .ftr__top { grid-template-columns: 1fr 1fr; }

}

@media (max-width: 900px) {
  .nav, .hdr__cta { display: none; }
  .burger { display: flex; }
  .split, .split--wide, .contact, .steps, .cluster { grid-template-columns: 1fr; }
  .contact { gap: 36px; }
  .locs { grid-template-columns: repeat(2, 1fr); }
  .ctaband__in { flex-direction: column; align-items: flex-start; }
  .legal__dl > div { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 640px) {
  .vgrid { grid-template-columns: 1fr; }
  .tiles, .mgroups, .qual, .locs, .fgrid, .rel, .sectors { grid-template-columns: 1fr; }
  .vcard { aspect-ratio: 16 / 11; }
  body { font-size: 16px; }
  html { scroll-padding-top: 76px; }

  .phero, .phero--img { padding-top: 104px; min-height: 0; }

  .works { grid-template-columns: repeat(2, 1fr); }
  .sector { min-height: 290px; }
  .logos { grid-template-columns: repeat(2, 1fr); }
  /* Sieben Zeichen in zwei Spalten liessen die achte Zelle leer. */
  .logos div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sector__m img { min-height: 100%; }
  .job { flex-direction: column; align-items: flex-start; gap: 13px; }
  .job .tlink { margin-left: 0; }
  .band img { aspect-ratio: 4 / 3; }
  .faq__a { padding-left: 0; }
  .btn { width: 100%; justify-content: center; }
  .hdr .btn, .drawer .btn { width: auto; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .ftr__top { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr address a, .contact dd a, .legal__dl dd a { display: inline-block; padding-block: 6px; }
  .ftr__links a { display: inline-block; padding-block: 8px; }
}

/* ==========================================================================
   Hero, zweite Fassung. Statt Text über einem trüben Foto jetzt eine
   asymmetrische Bühne: Text links auf ruhigem Dunkel, rechts das Bauteil als
   eigene DOM-Ebene über einem Kupfer-Bloom, mit leichtem Schweben und
   Zeiger-Parallaxe. Das Motiv trägt die Aufmerksamkeit, nicht der Scrim.
   ========================================================================== */
.shero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: 104px; padding-bottom: clamp(56px, 5.4vw, 88px);
  background: var(--ink);
}
/* Das Gebaeude traegt die Buehne. Graustufen, damit das Stahlblau der
   einzige Farbauftritt bleibt; der Verlauf haelt die linke Haelfte dunkel
   genug fuer AA, rechts bleibt die Halle sichtbar. */
.shero__bg { position: absolute; inset: 0; z-index: -2; }
/* <picture> ist sonst inline und gibt die Hoehe nicht weiter; das Bild
   stuende dann unskaliert oben links. Dieselbe Falle wie bei den
   Bento-Zellen, deshalb hier ausdruecklich. */
.shero__bg picture { display: block; width: 100%; height: 100%; }
.shero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 74% 62%;
  filter: saturate(1) contrast(1.02) brightness(.94);
}
.shero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,11,13,.96) 0%, rgba(10,11,13,.86) 36%,
      rgba(10,11,13,.42) 64%, rgba(10,11,13,.16) 100%),
    linear-gradient(180deg, rgba(10,11,13,.5) 0%, rgba(10,11,13,.06) 26%,
      rgba(10,11,13,0) 60%, rgba(10,11,13,.85) 100%);
}
.shero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 660px) minmax(300px, 380px);
  justify-content: space-between; gap: clamp(28px, 4vw, 64px);
  align-items: center;
  min-height: min(64svh, 620px);
}
/* Direktkontakt. Die rechte Haelfte der Buehne war leer, und wer schon weiss,
   was er braucht, soll nicht erst zum Fusszeilen-Kontakt scrollen. Telefon
   zuerst: in diesem Gewerbe beginnt der Auftrag im Gespraech. */
.scard {
  /* Satte Flaeche statt Milchglas: bei .78 Deckung plus starkem Blur las
     sich die Karte als Effekt, nicht als Werkzeug. Und sie ankert unten am
     Buehnenrand, ein Formular haengt nicht in der Luft. */
  align-self: end;
  margin-bottom: calc(-1 * clamp(56px, 5.4vw, 88px));
  padding: clamp(22px, 2.2vw, 30px);
  background: rgba(15, 17, 21, .93);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 0;
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 18px 44px -26px rgba(0, 0, 0, .7);
}
.scard__t { font-size: 1.06rem; font-weight: 560; letter-spacing: -.015em; }
.scard__d { margin-top: 7px; font-size: .86rem; line-height: 1.55; color: var(--text-2); }
.scard__who {
  display: flex; align-items: center; gap: 12px; margin-top: 13px;
}
.scard__mono {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; color: var(--co-400);
  background: rgba(91, 143, 196, .12);
}
.scard__who p { display: grid; gap: 1px; font-size: .84rem; line-height: 1.35; }
.scard__who b { font-weight: 560; color: var(--text); }
.scard__who span { color: var(--text-3); }

.scard__form { display: grid; gap: 15px; margin-top: 16px; }
.scard__form .field input, .scard__form .field textarea {
  padding: 11px 13px; font-size: .9rem;
  background: rgba(255, 255, 255, .06);
}
.scard__form .field textarea { min-height: 62px; }
/* Der Knopf braucht Abstand zum Feld darueber und volle Breite mit
   ordentlicher Hoehe, sonst klebt er am Text wie ein Link. */
.scard__send {
  width: 100%; justify-content: center;
  margin-top: 5px; padding-block: 13px;
}
.scard__msg { font-size: .8rem; line-height: 1.5; color: var(--co-400); min-height: 0; }
.scard__msg:empty { display: none; }
.scard__foot {
  margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between;
  font-size: .84rem; color: var(--text-3);
}
.scard__telx {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: .9rem; font-weight: 500; color: var(--text);
}
.scard__telx:hover { color: var(--co-400); }
/* Herkunftszeile. Die Flagge ist eine schmale Marke in echten Farben, das
   Schwarz einen Hauch aufgehellt und der Block fein umrandet, sonst
   versinkt das obere Drittel im dunklen Foto. */
.shero__origin {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap; flex-wrap: nowrap;
  font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text);
  margin-bottom: 18px;
}
.shero__origin svg {
  display: block; border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, .28); outline-offset: 0;
}
.shero h1 { font-size: clamp(2.2rem, 3.9vw, 3.85rem); margin-bottom: 20px; }
.shero .lead { max-width: 52ch; }
.shero__cta { margin-top: 30px; }
.shero__meta {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  font-size: .85rem; color: var(--text-2);
}
.shero__meta b { color: var(--text); font-weight: 500; }


/* --- Kundenband: echte Logos statt Kennzahlen ---------------------------- */
.proof { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.proof__in { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 3vw, 52px); align-items: center; padding-block: 26px; }
.proof__lbl { font-size: .8rem; color: var(--text-3); line-height: 1.45; max-width: 15ch; }
.proof__lbl b { display: block; color: var(--text-2); font-weight: 500; }
/* Alle Felder gleich gross, das Logo wird eingepasst. Sonst bestimmt die
   Bildbreite die Optik und DB steht neben kaiser+waltermann wie ein Fehler. */
/* Laufende Leiste. Vier gleiche Saetze, die Bewegung um genau einen Satz
   (-25%) ist damit nahtlos. Der Abstand sitzt als padding-right im Satz und
   nicht als gap im Track, sonst geht die Rechnung um einen halben Abstand
   daneben und es ruckelt bei jedem Durchlauf. */
.mq { position: relative; overflow: hidden; }
.mq::before, .mq::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 68px; z-index: 2;
  pointer-events: none;
}
.mq::before { left: 0; background: linear-gradient(90deg, var(--ink-2), transparent); }
.mq::after { right: 0; background: linear-gradient(270deg, var(--ink-2), transparent); }
.mq__track { display: flex; width: max-content; animation: mq 42s linear infinite; }
.mq:hover .mq__track, .mq:focus-within .mq__track { animation-play-state: paused; }
.mq__set {
  display: flex; align-items: center; flex: none;
  gap: var(--mq-gap); padding-right: var(--mq-gap);
}
@keyframes mq { to { transform: translateX(-25%); } }

/* Ohne min-width:0 waechst das Grid-Item auf die max-content-Breite des
   Tracks und schiebt die Seite waagrecht auf. */
.proof__row { --mq-gap: clamp(30px, 3.2vw, 52px); min-width: 0; }
/* Freigestellt, einfarbig, direkt auf dem Grund. Die weissen Kaesten waren
   die Notloesung fuer sieben verschiedene Vorlagen; die Marken sind jetzt
   aufbereitet und brauchen sie nicht mehr.
   Begrenzt wird ueber Hoehe UND Breite: die Zeichen reichen von fast
   quadratisch (DB) bis 5:1 (ABA BEUL). Nur eine Hoehengrenze und die breiten
   waeren dreimal so lang wie die kompakten. */
.proof__chip {
  display: grid; place-items: center; height: 46px; flex: none;
}
.proof__chip img {
  max-height: 30px; max-width: 146px; width: auto; height: auto;
  object-fit: contain; opacity: .74;
  transition: opacity .3s var(--ease-io);
}
.proof__chip:hover img { opacity: 1; }
/* Zertifizierungsband. Die Zeichen sind einfarbig aufbereitet: farbige
   Kundenlogos oben und farbige Pruefzeichen hier untereinander haetten die
   Seite in zwei Logowaende verwandelt. Einfarbig liest es sich als Nachweis. */
.cband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--ink-2); }
.cband__in {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: clamp(24px, 3.4vw, 60px); padding-block: clamp(24px, 2.6vw, 34px);
}
.cband__marks { display: flex; align-items: center; gap: clamp(26px, 2.6vw, 40px); flex: none; }
/* Freigestellt wie die Kundenzeichen. Weisse Kaesten waren hier das letzte
   Ueberbleibsel der alten Behandlung und fielen dadurch auf. */
.cband__chip { display: grid; place-items: center; height: 48px; }
.cband__chip img {
  max-height: 40px; max-width: 150px; width: auto; height: auto;
  object-fit: contain; opacity: .82;
}
.cband__norms { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.cband__norms span {
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .01em;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); color: var(--text-2);
}
.cband__note { font-size: .82rem; line-height: 1.58; color: var(--text-3); max-width: 68ch; }


@media (max-width: 980px) {
  .shero__grid { grid-template-columns: 1fr; min-height: 0; }
  .shero { padding-bottom: 26px; }
  .scard {
    max-width: none; width: auto; margin-top: 14px; margin-bottom: -26px;
    margin-inline: calc(-1 * var(--gut));
    border-left: 0; border-right: 0;
  }
  
    .proof__in { grid-template-columns: 1fr; gap: 18px; }
  .proof__lbl { max-width: none; }
  .cband__in { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 560px) {
  .cband__marks { flex-wrap: wrap; }
  .cband__chip { height: 42px; }
  .cband__chip img { max-height: 34px; max-width: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung reicht ein Satz, der umbricht. */
  .mq { overflow: visible; }
  .mq::before, .mq::after { display: none; }
  .mq__track { animation: none; width: auto; }
  .mq__set { flex-wrap: wrap; padding-right: 0; }
  .mq__set + .mq__set { display: none; }
}
@media (max-width: 640px) {
  .shero { padding-top: 92px; }
}

/* ==========================================================================
   Machbarkeits-Vorabcheck
   ========================================================================== */
.checker { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.drop {
  border: 1.5px dashed var(--line-2); border-radius: var(--r-card);
  background: rgba(255,255,255,.025); padding: clamp(26px, 4vw, 44px) 24px;
  text-align: center; cursor: pointer; display: block;
  transition: border-color .25s, background .25s;
}
.drop:hover, .drop.is-over { border-color: var(--co-500); background: rgba(91,143,196,.07); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop__t { font-size: 1.02rem; font-weight: 540; margin-top: 12px; }
.drop__s { font-size: .85rem; color: var(--text-3); margin-top: 7px; line-height: 1.5; }
.drop .ico { color: var(--co-400); margin: 0 auto; }
.drop__file { margin-top: 14px; font-family: var(--mono); font-size: .82rem; color: var(--co-400); word-break: break-all; }

.chkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.chkgrid .field--full { grid-column: 1 / -1; }

/* Skeleton in der Form des Ergebnisses, kein Spinner */
.skel { display: grid; gap: 12px; }
.skel i {
  display: block; height: 13px; border-radius: 5px;
  background: linear-gradient(90deg, var(--ink-3) 25%, var(--ink-4) 50%, var(--ink-3) 75%);
  background-size: 220% 100%; animation: shimmer 1.3s linear infinite;
}
.skel i:nth-child(1) { width: 42%; height: 26px; }
.skel i:nth-child(2) { width: 92%; }
.skel i:nth-child(3) { width: 84%; }
.skel i:nth-child(4) { width: 66%; }
.skel i:nth-child(5) { width: 78%; margin-top: 12px; }
.skel i:nth-child(6) { width: 55%; }
@keyframes shimmer { from { background-position: 220% 0; } to { background-position: -220% 0; } }

.verdict {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding: clamp(22px, 3vw, 32px);
}
.verdict__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: var(--r-pill);
  font-size: .82rem; font-weight: 560; letter-spacing: .02em;
  border: 1px solid; margin-bottom: 16px;
}
.v-ja       { color: #9ccfa2; border-color: rgba(156,207,162,.4); background: rgba(156,207,162,.1); }
.v-ruecksp  { color: var(--co-400); border-color: rgba(233,166,116,.42); background: rgba(233,166,116,.1); }
.v-nein     { color: var(--bad); border-color: rgba(217,154,131,.42); background: rgba(217,154,131,.1); }
.v-unklar   { color: var(--text-2); border-color: var(--line-2); background: rgba(255,255,255,.05); }
.verdict h3 { font-size: 1.16rem; margin-bottom: 10px; }
.verdict h2 { margin-bottom: 14px; }
.verdict p { color: var(--text-2); font-size: .96rem; }

.vsec { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.vsec__h { font-size: .77rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 13px; }
.vrow { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; flex-wrap: wrap; }
.vrow + .vrow { border-top: 1px solid rgba(255,255,255,.05); }
.vrow__m { font-size: .93rem; flex: 1 1 42%; min-width: 0; }
.vrow__v { font-family: var(--mono); font-size: .88rem; color: var(--text-2); }
.vtag { font-size: .7rem; font-weight: 560; padding: 3px 9px; border-radius: var(--r-pill); margin-left: auto; white-space: nowrap; }
.t-unkritisch     { background: rgba(156,207,162,.14); color: #9ccfa2; }
.t-im_grenzbereich{ background: rgba(233,166,116,.15); color: var(--co-400); }
.t-ausserhalb     { background: rgba(217,154,131,.15); color: var(--bad); }
.t-unklar         { background: rgba(255,255,255,.07); color: var(--text-2); }

.vlist { display: grid; gap: 11px; }
.vlist li { font-size: .93rem; color: var(--text-2); padding-left: 17px; position: relative; line-height: 1.55; }
.vlist li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--co-500); }
.vsteps { display: grid; gap: 14px; }
.vsteps li { font-size: .93rem; }
.vsteps b { display: block; color: var(--text); font-weight: 540; margin-bottom: 3px; }
.vsteps span { color: var(--text-2); }

.vfoot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--text-3); line-height: 1.5; }
.vfoot .btn-row { margin-top: 16px; }

@media (max-width: 900px) { .checker { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .chkgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Fehlerseite. Keine Entschuldigung, sondern die drei Wege, die gesucht werden.
   ========================================================================== */
.nf { padding-top: clamp(120px, 12vw, 190px); }
.nf h1 { max-width: 18ch; margin-bottom: 16px; }
/* Der Pfeil gehoert in die Zeile. .ico ist sonst ein Block und faellt darunter. */
.nf__t .ico { display: inline-block; }
.nf .lead { max-width: 52ch; }
.nf__g {
  margin-top: clamp(30px, 3.4vw, 46px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px); max-width: 780px;
}
.nf__c {
  display: grid; gap: 5px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  transition: border-color .3s var(--ease-io), transform .3s var(--ease);
}
.nf__c:hover { border-color: var(--line-2); transform: translateY(-2px); }
.nf__t { font-size: 1rem; font-weight: 550; letter-spacing: -.015em; color: var(--text); }
.nf__t .ico { color: var(--co-400); vertical-align: -2px; margin-left: 3px; }
.nf__d { font-size: .85rem; color: var(--text-3); line-height: 1.5; }
@media (max-width: 620px) { .nf__g { grid-template-columns: 1fr; } }

/* --------------------------------------------------- Verteiler im Fuss ---
   Eine Zeile, kein Kasten mit Rahmen: der Fuss ist kein Werbeplatz. Das
   Versprechen steht daneben, damit niemand raten muss, was er bekommt. */
.ftr__nl {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 28px 40px; align-items: start;
  padding: 26px 0; margin-top: 6px;
  border-top: 1px solid var(--line);
}
.ftr__nl p { margin-top: 6px; font-size: .89rem; line-height: 1.6; color: var(--text-2); max-width: 46ch; }
.nlf__l {
  display: block; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 600; color: var(--text-3); margin-bottom: 7px;
}
.nlf__r { display: flex; gap: 9px; flex-wrap: wrap; }
.nlf__i {
  flex: 1 1 210px; min-width: 0; padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 0;
  background: rgba(255, 255, 255, .05); color: var(--text);
  font: inherit; font-size: .93rem;
  transition: border-color .18s, background .18s;
}
.nlf__i::placeholder { color: var(--text-3); }
.nlf__i:focus {
  outline: none; border-color: var(--co-400); background: rgba(255, 255, 255, .08);
}
.nlf__b { flex: 0 0 auto; }
.nlf__m { margin-top: 9px; font-size: .82rem; line-height: 1.55; color: var(--text-3); }
.nlf__m.is-ok { color: var(--co-400); }
.nlf__m.is-err { color: #e79a90; }

@media (max-width: 780px) {
  .ftr__nl { grid-template-columns: 1fr; gap: 18px; }
}