/* Themenseiten (Industrien / Anwendungen + Services).
   Nutzt die Design-Tokens der Seite (--color-kit-*, Fira Sans) und bringt keine
   eigenen Farben mit. Fallbacks stehen dran, weil die Tokens erst im Onepage-CSS
   definiert werden und dieses Stylesheet davor geladen wird. */

:root {
  --wk-dark: var(--color-kit-dark, #0A2115);
  --wk-light: var(--color-kit-light, #F1F4EE);
  --wk-key: var(--color-kit-key1, #86CA58);
  --wk-white: var(--color-kit-white, #FFFFFF);
  --wk-head: 'Fira Sans Extra Condensed', 'Fira Sans Condensed', Arial, sans-serif;
  --wk-text: 'Fira Sans Condensed', Arial, sans-serif;
  --wk-max: 1290px;
  --wk-pad: 24px;
}

/* --- Grüne Marke: Unterstreichung wie in der Quelle ---------------------- */
/* Maß und Abstand sind 1:1 die der Startseite („Unsere Stärken", „Unsere
   Standorte", „Deine Möglichkeiten"): text-decoration in em, damit Strichstärke
   und Abstand mit der Schriftgröße mitlaufen — auf 122-px-Titeln genauso wie auf
   26 px im schmalen Fenster. Vorher hatte jeder Baustein sein eigenes Maß
   (Hero 3 px, Abschnittskopf und Kachel 4 px + 2 px Abstand, die Aussage einen
   grünen Balken über 22 % der Zeilenhöhe) — das war der Grund für „manchmal zu
   fett, manchmal zu dünn" (Rückmeldung des Inhabers, 27.08.).
   EINE Regel für alle: Wer einen weiteren Baustein mit `.wk-mark` baut, erbt sie. */
.wk-mark {
  text-decoration-line: underline;
  text-decoration-color: var(--wk-key);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

.wk-hero, .wk-switch, .wk-themen, .wk-crumbs, .wk-artikel, .wk-ap { position: relative; }
.wk-inner { max-width: var(--wk-max); margin: 0 auto; padding-left: var(--wk-pad); padding-right: var(--wk-pad); }

/* --- Hero ---------------------------------------------------------------- */
.wk-hero { background: var(--wk-dark); color: var(--wk-white); overflow: hidden; }
.wk-hero__bg { position: absolute; inset: 0; z-index: 0; }
.wk-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.42; }
/* Nach unten hin abdunkeln: Die Bereichsauswahl liegt auf dem Bild und braucht
   Grund unter den Füßen — ohne dafür das Bild an ihrer Kante abzuschneiden. */
.wk-hero__schleier {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 33, 21, 0) 45%, rgba(10, 33, 21, 0.55) 100%);
}
.wk-hero > .wk-inner { position: relative; z-index: 1; padding-top: 168px; padding-bottom: 40px; }
.wk-kicker {
  display: inline-block; font-family: var(--wk-text); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; color: var(--wk-dark);
  background: var(--wk-key); border-radius: 8px; padding: 8px 12px; margin: 0 0 18px;
}
.wk-hero h1 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase; line-height: 1.05;
  font-size: clamp(38px, 6vw, 72px); margin: 0 0 18px; color: var(--wk-white);
}
.wk-hero__intro {
  font-family: var(--wk-text); font-size: clamp(16px, 1.6vw, 20px); line-height: 1.5;
  max-width: 780px; margin: 0; opacity: 0.92;
}

/* --- Bereichsumschalter (Produkte | Industrien | Services) ---------------- */
.wk-switch { background: var(--wk-dark); }
.wk-switch .wk-inner { padding-top: 0; padding-bottom: 40px; }
/* Fassung im Hero: kein eigener Hintergrund, damit das Bild durchläuft. */
.wk-switch--im-hero { position: relative; z-index: 1; background: transparent; }
.wk-switch--im-hero .wk-inner { padding-top: 0; padding-bottom: 48px; }
.wk-switch--im-hero .wk-switch__list a {
  /* Halbdurchsichtig, damit das Bild dahinter sichtbar bleibt. Nachgemessen:
     weißer Text auf dem Feld erreicht damit rund 16:1 — weit über AA. */
  background: rgba(10, 33, 21, 0.55); border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.wk-switch--im-hero .wk-switch__list a:hover { background: rgba(10, 33, 21, 0.72); border-color: var(--wk-key); }
.wk-switch--im-hero .wk-switch__list a[aria-current="page"] {
  background: var(--wk-key); border-color: var(--wk-key); color: var(--wk-dark);
}
.wk-switch__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; }
.wk-switch__list a {
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  min-height: 92px; padding: 16px 12px; text-align: center; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: var(--wk-white);
  font-family: var(--wk-head); font-size: clamp(15px, 1.7vw, 21px); font-weight: 600;
  text-transform: uppercase; line-height: 1.15; letter-spacing: 0.5px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.wk-switch__list a:hover { background: rgba(255, 255, 255, 0.13); border-color: var(--wk-key); transform: translateY(-2px); }
.wk-switch__list a[aria-current="page"] {
  background: var(--wk-key); border-color: var(--wk-key); color: var(--wk-dark); cursor: default;
}
.wk-switch__list a[aria-current="page"]:hover { transform: none; }
.wk-switch--eingebettet {
  /* Fassung für helle Abschnitte (Produktseite): kein eigenes Farbband,
     die Felder tragen den Kontrast selbst. */
  background: transparent; max-width: var(--wk-max); margin: 0 auto 44px;
  padding-left: var(--wk-pad); padding-right: var(--wk-pad);
}
.wk-switch--eingebettet .wk-switch__list a {
  background: rgba(10, 33, 21, 0.045); border-color: rgba(10, 33, 21, 0.18); color: var(--wk-dark);
}
.wk-switch--eingebettet .wk-switch__list a:hover { background: rgba(10, 33, 21, 0.09); border-color: var(--wk-key); }
.wk-switch--eingebettet .wk-switch__list a[aria-current="page"] { background: var(--wk-key); border-color: var(--wk-key); color: var(--wk-dark); }

.wk-switch__sub { font-family: var(--wk-text); font-size: 13px; font-weight: 400; text-transform: none; opacity: 0.75; letter-spacing: 0; }

/* --- Themenliste (Übersichtsseiten) -------------------------------------- */
.wk-themen { background: var(--wk-light); color: var(--wk-dark); }
.wk-themen .wk-inner { padding-top: 64px; padding-bottom: 64px; }
.wk-themen__head { text-align: center; margin-bottom: 48px; }
.wk-themen__head h2 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.1; margin: 0;
}
.wk-thema {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
  padding: 32px 0; border-top: 1px solid rgba(10, 33, 21, 0.12);
}
.wk-thema:first-of-type { border-top: 0; }
.wk-thema__media { border-radius: 12px; overflow: hidden; }
.wk-thema__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.wk-thema h3 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(22px, 2.6vw, 34px); line-height: 1.1; margin: 0 0 14px;
}
.wk-thema p { font-family: var(--wk-text); font-size: 17px; line-height: 1.55; margin: 0 0 20px; }
.wk-btn {
  display: inline-block; font-family: var(--wk-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; font-size: 16px; text-decoration: none;
  background: var(--wk-key); color: var(--wk-dark); border-radius: 8px; padding: 13px 26px;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.wk-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.wk-btn--ghost { background: transparent; color: var(--wk-dark); border: 2px solid var(--wk-dark); }

/* --- Detailseiten -------------------------------------------------------- */
.wk-crumbs { background: var(--wk-light); }
.wk-crumbs .wk-inner { padding-top: 20px; padding-bottom: 0; }
.wk-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0;
  font-family: var(--wk-text); font-size: 14px; color: rgba(10, 33, 21, 0.7); }
.wk-crumbs li + li::before { content: "›"; margin-right: 8px; }
.wk-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(10, 33, 21, 0.3); }
.wk-crumbs a:hover { color: var(--wk-dark); border-color: var(--wk-dark); }

.wk-artikel { background: var(--wk-light); color: var(--wk-dark); }
.wk-artikel .wk-inner { padding-top: 48px; padding-bottom: 64px; }
.wk-artikel > .wk-inner > * { max-width: 1000px; }
.wk-artikel h2 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.1; margin: 44px 0 16px;
}
.wk-artikel h3 {
  font-family: var(--wk-head); font-weight: 600; text-transform: uppercase;
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.15; margin: 34px 0 12px;
}
.wk-artikel h2:first-child, .wk-artikel h3:first-child { margin-top: 0; }
.wk-artikel p { font-family: var(--wk-text); font-size: 17px; line-height: 1.62; margin: 0 0 16px; max-width: 74ch; }
.wk-artikel__lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; font-weight: 600; }
.wk-artikel figure { margin: 28px 0; }
.wk-artikel figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.wk-artikel figure.wk-logo img { max-width: 220px; border-radius: 0; }

.wk-liste { margin: 0 0 24px; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.wk-liste li {
  font-family: var(--wk-text); font-size: 16px; line-height: 1.45;
  padding: 7px 0 7px 26px; position: relative; border-bottom: 1px solid rgba(10, 33, 21, 0.1);
}
.wk-liste li::before {
  content: ""; position: absolute; left: 4px; top: 15px; width: 9px; height: 9px;
  border-radius: 2px; background: var(--wk-key);
}

/* --- Ansprechpartner ----------------------------------------------------- */
.wk-ap { background: var(--wk-dark); color: var(--wk-white); }
.wk-ap .wk-inner { padding-top: 56px; padding-bottom: 64px; }
.wk-ap h2 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 3vw, 38px); line-height: 1.1; margin: 0 0 8px; color: var(--wk-white);
}
.wk-ap__sub { font-family: var(--wk-text); font-size: 17px; opacity: 0.8; margin: 0 0 32px; }
.wk-ap__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.wk-ap__card {
  display: flex; flex-direction: column; padding: 22px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
}
.wk-ap__card img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: 10px; margin-bottom: 14px; background: rgba(255, 255, 255, 0.08);
}
.wk-ap__card h3 { font-family: var(--wk-head); font-size: 21px; font-weight: 700; margin: 0 0 4px; color: var(--wk-white); }
.wk-ap__rolle { font-family: var(--wk-text); font-size: 14px; line-height: 1.4; opacity: 0.8; margin: 0 0 14px; }
.wk-ap__kontakt { display: flex; flex-direction: column; gap: 5px; margin: 0 0 16px; }
.wk-ap__kontakt a { font-family: var(--wk-text); font-size: 15px; color: var(--wk-white); text-decoration: none; opacity: 0.88; }
.wk-ap__kontakt a:hover { opacity: 1; text-decoration: underline; color: var(--wk-key); }
.wk-ap__card .wk-btn { margin-top: auto; text-align: center; }

/* --- Schmale Darstellung -------------------------------------------------- */
@media (max-width: 900px) {
  .wk-thema { grid-template-columns: 1fr; gap: 20px; }
  .wk-thema__media { order: -1; }
  .wk-hero > .wk-inner { padding-top: 196px; padding-bottom: 32px; }
}
@media (max-width: 620px) {
  .wk-switch__list { grid-template-columns: 1fr; gap: 10px; }
  .wk-switch__list a { min-height: 0; flex-direction: row; gap: 10px; padding: 14px 16px; }
  .wk-liste { grid-template-columns: 1fr; }
  .wk-ap__grid { grid-template-columns: 1fr; }
}

/* --- Semantik-Nachrüstung auf der Produktseite ---------------------------- */
/* Dort sind aus <div> gewordene Überschriften im con-kit-Markup: die Optik
   liefern weiterhin die con-kit-Klassen, hier fällt nur der Browser-Default weg. */
.con-kit-component-header h1.con-kit-quark-paragraph,
.con-kit-component-header h2.con-kit-quark-paragraph { margin: 0; }

/* ==========================================================================
   Service-Detailseiten — gegliederte Fassung
   ==========================================================================
   Die gespiegelte Quelle liefert reinen Fließtext: sechs Absätze am Stück,
   danach flache Listen. Als <p>-Stapel gerendert ergibt das eine Textwüste.
   Die Blöcke hier zerlegen denselben Text (unverändert, 1:1) in Fakten,
   Kapitelkarten, Standorte und Leistungskacheln. Welcher Absatz wohin geht,
   steht in themen-config.mjs (SEITEN) — nicht hier und nicht im Generator.

   Farben ausschließlich aus den Tokens oben. Reihenfolge der Gründe:
   dunkel (Hero+Fakten) → hell (Lead) → weiß (Kapitel) → dunkel (Standorte)
   → hell (Portfolio) → weiß (Ansprechpartner) → dunkel (weitere Services).
   Kein gleicher Grund zweimal hintereinander — das trägt den Rhythmus. */

/* --- Fakten-Band (hängt am Hero) -----------------------------------------
   DERZEIT OHNE AUFRUFER. Kennzahlen brauchen selbst formulierte Etiketten
   („40+ eigene LKW"); Vorgabe ist, ausschließlich Quelltext zu zeigen. Bleibt
   stehen, weil ein einzelnes freigegebenes Etikett den Block sofort zurückholt. */
.wk-fakten { background: var(--wk-dark); color: var(--wk-white); }
/* Das Band sitzt INNERHALB des Heros — wie die Bereichsauswahl. Als eigener
   Abschnitt darunter brachte es seinen eigenen Grund mit und schnitt das
   Hero-Foto an seiner Oberkante waagerecht ab. */
.wk-fakten--im-hero { position: relative; z-index: 1; background: transparent; }
.wk-fakten .wk-inner { padding-top: 0; padding-bottom: 56px; }
/* auto-fit statt fester Vier: Bei drei belegten Kennzahlen stand sonst eine
   leere Spur rechts. Vier Karten ergeben weiterhin genau vier Spalten. */
.wk-fakten__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.wk-fakt {
  padding: 20px 22px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 3px solid var(--wk-key);
}
.wk-fakt__zahl {
  display: block; font-family: var(--wk-head); font-weight: 700; line-height: 1;
  font-size: clamp(30px, 3.4vw, 46px); color: var(--wk-key); margin: 0 0 6px;
}
.wk-fakt__zahl small { font-size: 0.5em; font-weight: 600; opacity: 0.85; margin-right: 4px; vertical-align: 0.35em; }
.wk-fakt__label {
  display: block; font-family: var(--wk-text); font-size: 15px; line-height: 1.35;
  margin: 0; opacity: 0.9;
}

/* --- Lead: Aussage links, Erzählung rechts ------------------------------- */
.wk-lead { background: var(--wk-light); color: var(--wk-dark); }
.wk-lead .wk-inner { padding-top: 56px; padding-bottom: 64px; }
.wk-lead__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
.wk-lead__aussage {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 42px); line-height: 1.08; margin: 0;
  /* Auf breiten Fenstern mitlaufen: Die Aussage ist die Klammer über den Text
     rechts, nicht seine Überschrift — sie bleibt beim Lesen stehen. */
  position: sticky; top: 120px;
}
.wk-lead__text p { font-family: var(--wk-text); font-size: 17px; line-height: 1.65; margin: 0 0 18px; }
.wk-lead__text p:last-child { margin-bottom: 0; }
.wk-lead__text p:first-child { font-size: 18px; }

/* --- Kapitelkarten ------------------------------------------------------- */
.wk-kapitel { background: var(--wk-white); color: var(--wk-dark); }
.wk-kapitel .wk-inner { padding-top: 64px; padding-bottom: 68px; }
.wk-kapitel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wk-karte {
  display: flex; flex-direction: column; padding: 26px 26px 28px;
  border-radius: 16px; background: var(--wk-light);
  border: 1px solid rgba(10, 33, 21, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wk-karte:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 33, 21, 0.12); }
.wk-karte__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 0 18px; border-radius: 12px;
  background: var(--wk-key); color: var(--wk-dark); flex: 0 0 auto;
}
.wk-karte__icon svg { width: 26px; height: 26px; }
.wk-karte h3 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.12; margin: 0 0 12px;
}
.wk-karte p { font-family: var(--wk-text); font-size: 16px; line-height: 1.6; margin: 0; }
/* Ohne Überschrift trägt der Absatz die Karte allein: etwas größer gesetzt,
   und das Piktogramm bekommt eine Grundlinie als optischen Anker. */
.wk-karte--ohne-titel .wk-karte__icon { margin-bottom: 20px; }
.wk-karte--ohne-titel p { font-size: 16.5px; line-height: 1.62; }

/* Abschnittskopf, wie auf der Startseite: Titel mit grüner Unterstreichung. */
.wk-kopf { max-width: 760px; margin: 0 0 40px; }
.wk-kopf--mitte { margin-left: auto; margin-right: auto; text-align: center; }
.wk-kopf h2 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.08; margin: 0;
}
.wk-kopf p {
  font-family: var(--wk-text); font-size: 17px; line-height: 1.6;
  margin: 16px 0 0; opacity: 0.86;
}
.wk-kopf--auf-dunkel h2, .wk-kopf--auf-dunkel p { color: var(--wk-white); }

/* --- Standorte / Anlagen ------------------------------------------------- */
/* `position: relative` ist Pflicht, nicht Kosmetik: Ohne sie bezieht sich das
   `inset: 0` des Hintergrundbildes auf den nächsten positionierten Vorfahren
   und das Bild läuft über die Abschnittskante in den nächsten Block. */
.wk-orte { position: relative; background: var(--wk-dark); color: var(--wk-white); overflow: hidden; }
.wk-orte .wk-inner { padding-top: 64px; padding-bottom: 68px; position: relative; z-index: 1; }
/* Hintergrundbild mit Schleier darüber. Bewusst NICHT über `opacity` gedimmt
   (so wie im Hero) — das wäscht die Farben aus. Stattdessen liegt das Bild in
   voller Deckkraft und ein eigener Verlauf darüber: links dicht, damit die
   Überschrift trägt, nach rechts offener, damit das Motiv sichtbar bleibt.
   Nachgemessen: weißer Text sitzt auf mindestens 0.86 Deckung von #0A2115. */
.wk-orte__bg { position: absolute; inset: 0; z-index: 0; }
.wk-orte__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wk-orte__schleier {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 33, 21, 0.55) 0%, rgba(10, 33, 21, 0) 22%, rgba(10, 33, 21, 0) 78%, rgba(10, 33, 21, 0.55) 100%),
    linear-gradient(to right, rgba(10, 33, 21, 0.95) 0%, rgba(10, 33, 21, 0.9) 40%, rgba(10, 33, 21, 0.8) 100%);
}
/* Auf dem Bild brauchen die Ortskarten mehr Grund als auf glattem Dunkelgrün,
   sonst läuft das Motiv durch den Text. */
.wk-orte--mit-bild .wk-ort { background: rgba(10, 33, 21, 0.62); border-color: rgba(255, 255, 255, 0.24); }
.wk-orte__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
/* Pin und Name in einer Zeile: Viele Standorte haben in der Quelle keine
   Zusatzangabe — als hohe Karte mit einem Wort darin liefen sie sichtbar leer. */
.wk-ort {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 18px 22px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.wk-ort__pin { display: block; width: 22px; height: 22px; color: var(--wk-key); margin-top: 2px; }
.wk-ort h3 { font-family: var(--wk-head); font-weight: 700; text-transform: uppercase; font-size: 22px; margin: 0; color: var(--wk-white); }
.wk-ort p { font-family: var(--wk-text); font-size: 15px; line-height: 1.45; margin: 3px 0 0; opacity: 0.82; }

/* --- Aussage-Band (dunkel, für Seiten ohne Standortliste) ---------------- */
/* position: relative gehört AN DEN ABSCHNITT — sonst bezieht sich das
   Hintergrundbild mit inset: 0 auf den nächsten positionierten Vorfahren und
   läuft über die Abschnittskante. overflow: hidden allein hilft dabei nicht. */
.wk-aussage { position: relative; background: var(--wk-dark); color: var(--wk-white); overflow: hidden; }
.wk-aussage .wk-inner { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 68px; }
.wk-aussage__bg { position: absolute; inset: 0; z-index: 0; }
.wk-aussage__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wk-aussage__schleier {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10, 33, 21, 0.95) 0%, rgba(10, 33, 21, 0.88) 55%, rgba(10, 33, 21, 0.78) 100%),
    linear-gradient(to bottom, rgba(10, 33, 21, 0.55) 0%, rgba(10, 33, 21, 0) 24%, rgba(10, 33, 21, 0) 76%, rgba(10, 33, 21, 0.55) 100%);
}
.wk-aussage__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 44px; }
.wk-aussage__grid p {
  font-family: var(--wk-text); font-size: 17px; line-height: 1.65; margin: 0; opacity: 0.9;
}

/* --- Leistungsportfolio ------------------------------------------------- */
.wk-port { background: var(--wk-light); color: var(--wk-dark); }
.wk-port .wk-inner { padding-top: 64px; padding-bottom: 68px; }
.wk-port__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; align-items: start; }
.wk-port__block {
  padding: 30px 30px 32px; border-radius: 18px; background: var(--wk-white);
  border: 1px solid rgba(10, 33, 21, 0.08);
}
.wk-port__block h3 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.2vw, 27px); line-height: 1.1; margin: 0 0 20px;
}
/* Chips: die sieben Abfallarten sind Aufzählung, kein Text — als Marken gesetzt
   sind sie überfliegbar und füllen die Fläche, statt eine dünne Spalte zu bilden. */
.wk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wk-chips li {
  font-family: var(--wk-text); font-size: 15.5px; line-height: 1.3;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(134, 202, 88, 0.16); border: 1px solid rgba(10, 33, 21, 0.1);
}
.wk-port__liste { list-style: none; margin: 0; padding: 0; }
/* Zehn kurze Punkte untereinander machen den Block doppelt so hoch wie seinen
   Nachbarn. Mehrspaltig gesetzt stehen beide Blöcke wieder auf einer Höhe. */
.wk-port__liste--spalten { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); column-gap: 28px; }
/* `min-width: 0` hebt die Mindestbreite auf, die ein Grid-Element sonst von
   seinem längsten unteilbaren Wort erbt — ohne das schob „Fällmittel/Primär-
   flockungsmittel" (219 px) seine 198 px breite Spalte auf und überlappte den
   Nachbareintrag. Mit Silbentrennung (das Dokument ist `lang="de"`) bricht das
   Kompositum sauber, `break-word` fängt den Rest ab. */
.wk-port__liste--spalten li { min-width: 0; }
.wk-port__liste li { overflow-wrap: break-word; hyphens: auto; }
.wk-port__liste li {
  position: relative; padding: 13px 0 13px 32px;
  font-family: var(--wk-text); font-size: 16.5px; line-height: 1.4;
  border-bottom: 1px solid rgba(10, 33, 21, 0.1);
}
.wk-port__liste li:last-child { border-bottom: 0; padding-bottom: 0; }
.wk-port__liste li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--wk-key);
}
/* Häkchen aus zwei Rahmenkanten — spart ein Icon-Bild. */
.wk-port__liste li::after {
  content: ""; position: absolute; left: 5px; top: 19px; width: 5px; height: 8px;
  border-right: 2px solid var(--wk-dark); border-bottom: 2px solid var(--wk-dark);
  transform: rotate(45deg);
}

/* Zertifikat als Siegel statt einzeiliger Liste. */
.wk-port__label {
  font-family: var(--wk-text); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; opacity: 0.6;
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid rgba(10, 33, 21, 0.12);
}
.wk-zert { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.wk-zert li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--wk-head); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.4px; font-size: 15px;
  padding: 12px 18px; border-radius: 10px;
  background: var(--wk-dark); color: var(--wk-white);
}
.wk-zert svg { width: 18px; height: 18px; color: var(--wk-key); flex: 0 0 auto; }

/* --- Ansprechpartner, kompakte Fassung ---------------------------------- */
/* Sieben Karten im 4:5-Format füllen sonst einen ganzen Bildschirm. Hier:
   eine hervorgehobene Karte plus schmale Zeilen mit rundem Bild. */
.wk-ap--hell { background: var(--wk-white); color: var(--wk-dark); }
.wk-ap--hell h2, .wk-ap--hell .wk-ap__sub { color: var(--wk-dark); }
.wk-ap--hell .wk-ap__sub { opacity: 0.7; }
.wk-ap__haupt {
  display: grid; grid-template-columns: 190px 1fr; gap: 28px; align-items: center;
  padding: 24px; border-radius: 18px; margin: 0 0 24px;
  background: var(--wk-light); border: 1px solid rgba(10, 33, 21, 0.08);
}
.wk-ap__haupt img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: 12px;
}
.wk-ap__haupt h3 { font-family: var(--wk-head); font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 6px; }
.wk-ap__marke {
  display: inline-block; font-family: var(--wk-text); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 12px;
  padding: 5px 10px; border-radius: 6px; background: var(--wk-key); color: var(--wk-dark);
}
.wk-ap__zeilen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wk-ap__zeile {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
  padding: 18px; border-radius: 14px;
  background: var(--wk-light); border: 1px solid rgba(10, 33, 21, 0.08);
}
.wk-ap__zeile img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: rgba(10, 33, 21, 0.06);
}
.wk-ap__zeile h3 { font-family: var(--wk-head); font-weight: 700; font-size: 18px; text-transform: uppercase; margin: 0 0 3px; }
.wk-ap--hell .wk-ap__rolle { color: var(--wk-dark); opacity: 0.68; margin-bottom: 10px; }
.wk-ap--hell .wk-ap__kontakt a { color: var(--wk-dark); opacity: 0.85; }
.wk-ap--hell .wk-ap__kontakt a:hover { color: var(--wk-dark); opacity: 1; }
.wk-ap__zeile .wk-ap__kontakt { margin-bottom: 0; }
.wk-ap__haupt .wk-ap__kontakt { margin-bottom: 18px; }
.wk-ap__haupt .wk-btn { margin-top: 0; }

/* --- Weitere Services --------------------------------------------------- */
.wk-weiter { background: var(--wk-dark); color: var(--wk-white); }
.wk-weiter .wk-inner { padding-top: 60px; padding-bottom: 64px; }
/* auto-fit statt fester Vier: Die Gruppen sind verschieden groß (4 weitere
   Services, 5 weitere Industrien). Bei fester Spaltenzahl bliebe sonst eine
   einzelne Karte allein in der zweiten Zeile stehen. */
.wk-weiter__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.wk-weiter__karte {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  border-radius: 14px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14); color: var(--wk-white);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.wk-weiter__karte:hover { transform: translateY(-3px); border-color: var(--wk-key); }
.wk-weiter__karte img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.wk-weiter__karte span { display: block; padding: 16px 18px 18px; }
.wk-weiter__karte strong {
  display: block; font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: 19px; line-height: 1.12; margin: 0 0 6px;
}
.wk-weiter__karte em {
  display: block; font-family: var(--wk-text); font-style: normal; font-size: 14px;
  line-height: 1.45; opacity: 0.78;
}
.wk-weiter__karte:hover strong { color: var(--wk-key); }

/* --- Schmale Darstellung ------------------------------------------------ */
@media (max-width: 1100px) {
  .wk-fakten__grid { grid-template-columns: repeat(2, 1fr); }
  .wk-weiter__grid { grid-template-columns: repeat(2, 1fr); }
  .wk-ap__zeilen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wk-aussage__grid { grid-template-columns: 1fr; gap: 18px; }
  .wk-lead__grid { grid-template-columns: 1fr; gap: 28px; }
  .wk-lead__aussage { position: static; }
  .wk-kapitel__grid { grid-template-columns: 1fr; }
  .wk-port__grid { grid-template-columns: 1fr; }
  .wk-ap__haupt { grid-template-columns: 1fr; gap: 20px; }
  .wk-ap__haupt img { max-width: 200px; }
}
@media (max-width: 620px) {
  .wk-fakten__grid { grid-template-columns: 1fr; }
  .wk-fakten .wk-inner { padding-bottom: 40px; }
  .wk-weiter__grid { grid-template-columns: 1fr; }
  .wk-ap__zeilen { grid-template-columns: 1fr; }
  .wk-port__block { padding: 22px; }
}

/* --- Standort mit eigenen Kennzahlen ------------------------------------- */
/* Die Zahlen gehören zum Ort, nicht in ein gemeinsames Kennzahlen-Band — dort
   wäre die Zuordnung „welche Kapazität steht wo" verloren. */
.wk-ort--mit-werten { align-items: start; }
.wk-ort__werte { list-style: none; margin: 12px 0 0; padding: 0; }
.wk-ort__werte li {
  font-family: var(--wk-text); font-size: 15.5px; line-height: 1.35;
  padding: 8px 0 8px 18px; position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.wk-ort__werte li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--wk-key);
}

/* --- Bildband ------------------------------------------------------------ */
.wk-bild { background: var(--wk-light); }
.wk-bild .wk-inner { padding-top: 8px; padding-bottom: 64px; }
.wk-bild__rahmen { margin: 0; border-radius: 18px; overflow: hidden; }
.wk-bild__foto { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
@media (max-width: 620px) {
  .wk-bild__foto { aspect-ratio: 4 / 3; }
  .wk-bild .wk-inner { padding-bottom: 44px; }
}

/* --- Aussage-Band: einzelner kurzer Satz -------------------------------- */
/* Ein Aufruf wie „Sprechen Sie mit unserem Team über Ihre Wünsche." trägt das
   Band allein — in Fließtextgröße wirkte es wie ein Streifen ohne Absicht. */
.wk-aussage--gross .wk-inner { padding-top: 52px; padding-bottom: 56px; }
.wk-aussage--gross .wk-aussage__grid { grid-template-columns: 1fr; }
.wk-aussage--gross p {
  font-family: var(--wk-head); font-weight: 700;
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.12;
  max-width: 22ch; margin: 0;
}

/* --- Ansprechpartner: nur zwei Kontakte --------------------------------- */
/* Zwei gleichwertige Karten statt „einer groß, einer als schmale Zeile". */
.wk-ap__paar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.wk-ap__paar .wk-ap__haupt { margin: 0; grid-template-columns: 150px 1fr; gap: 22px; }
@media (max-width: 900px) {
  .wk-ap__paar { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Bento-Raster (Detailseiten, Variante zum Bänderstapel)
   ==========================================================================
   Ein einziges asymmetrisches Kachelfeld auf hellem Grund. Zwölf Spalten,
   jede Kachel bekommt ihre Breite über --span aus dem Generator. Der Rhythmus
   kommt aus Größe und Grundton der Kacheln, nicht aus Abschnittskanten —
   deshalb hat der Abschnitt selbst keine Bänder mehr.
   Farben nur aus den Tokens oben: weiß = Grundkachel, dunkel und grün sind die
   beiden Akzente. Mehr als zwei Akzente lassen das Raster unruhig wirken. */
.wk-bento { background: var(--wk-light); color: var(--wk-dark); }
.wk-bento .wk-inner { padding-top: 52px; padding-bottom: 68px; }
.wk-bento__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }

.wk-kachel {
  grid-column: span var(--span, 4);
  display: flex; flex-direction: column;
  background: var(--wk-white); border-radius: 18px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(10, 33, 21, 0.06);
  /* Ohne min-width: 0 erbt eine Kachel die Mindestbreite ihres längsten
     unteilbaren Wortes — bei Chemie-Komposita sprengt das die Spalte. */
  min-width: 0;
}
/* Der Innenabstand sitzt an der Inhaltshülle, nicht an der Kachel — sonst
   bekäme ein Foto einen weißen Rahmen statt randlos zu sitzen. */
.wk-kachel__inhalt { display: flex; flex-direction: column; flex: 1; padding: 28px 30px 30px; min-width: 0; }
.wk-kachel__inhalt > *:last-child { margin-bottom: 0; }
.wk-kachel p { font-family: var(--wk-text); font-size: 16.5px; line-height: 1.62; margin: 0 0 14px; }
.wk-kachel h2, .wk-kachel h3 {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  line-height: 1.1; margin: 0 0 16px;
}
.wk-kachel h2 { font-size: clamp(24px, 2.6vw, 34px); }
.wk-kachel h3 { font-size: clamp(19px, 2vw, 25px); }

/* Aufmacher-Kachel: die Aussage der Quelle trägt die Kachel, der Text folgt. */
.wk-kachel--lead .wk-kachel__inhalt { padding: 34px 36px 36px; }
.wk-kachel__aussage {
  font-family: var(--wk-head) !important; font-weight: 700; text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px) !important; line-height: 1.08 !important;
  margin: 0 0 22px !important;
}

.wk-kachel--dunkel { background: var(--wk-dark); color: var(--wk-white); }
.wk-kachel--dunkel h2, .wk-kachel--dunkel h3 { color: var(--wk-white); }
.wk-kachel--dunkel p { opacity: 0.9; }

.wk-kachel--gruen { background: var(--wk-key); color: var(--wk-dark); box-shadow: none; }
/* Auf der grünen Kachel brauchen die Marken einen eigenen Grund — grau auf Grün
   ergab nur einen Tonwertunterschied, keinen lesbaren Kontrast. */
.wk-kachel--gruen .wk-kachel__marken li { background: var(--wk-white); }
/* Fünf Marken füllen die Kachel nicht aus. Überschrift und Marken zusammen
   mittig gesetzt — nur die Marken zu zentrieren riss eine Lücke unter den Titel. */
.wk-kachel--gruen { justify-content: center; }

/* Schritt-Kachel: Piktogramm als Anker, weil die Quelle für diese Sätze keine
   Überschrift hat und eine eigene neu formulierter Kundentext wäre. */
.wk-kachel--schritt { background: var(--wk-white); }
.wk-kachel__icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin: 0 0 18px; border-radius: 12px;
  background: var(--wk-key); color: var(--wk-dark); flex: 0 0 auto;
}
.wk-kachel__icon svg { width: 25px; height: 25px; }

/* Listen in Kacheln */
.wk-kachel__liste { list-style: none; margin: 0; padding: 0; }
.wk-kachel__liste--spalten {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); column-gap: 26px;
  /* Die Kachel ist so hoch wie ihre höchste Nachbarin. Statt unten 130 px leer
     zu lassen, verteilen sich die Zeilen über die volle Höhe. */
  flex: 1; align-content: space-between;
}
.wk-kachel__liste li {
  position: relative; min-width: 0; padding: 11px 0 11px 28px;
  font-family: var(--wk-text); font-size: 16px; line-height: 1.4;
  border-bottom: 1px solid rgba(10, 33, 21, 0.1);
  overflow-wrap: break-word; hyphens: auto;
}
.wk-kachel__liste li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 14px; height: 14px;
  border-radius: 4px; background: var(--wk-key);
}
.wk-kachel__marken { display: flex; flex-wrap: wrap; gap: 9px; margin: 0; padding: 0; list-style: none; }
.wk-kachel__marken li {
  font-family: var(--wk-text); font-size: 15px; line-height: 1.3; font-weight: 600;
  padding: 9px 15px; border-radius: 999px;
  background: rgba(10, 33, 21, 0.1); overflow-wrap: break-word;
}

/* Ansprechpartner als hohe Kachel: drei schmale Zeilen statt drei Karten. */
.wk-personen { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wk-person {
  display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center;
  padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); min-width: 0;
}
.wk-person:first-child { border-top: 0; padding-top: 0; }
/* Mehrspaltig hätte die erste Zeile jeder Spalte eine Linie über sich, die
   zweite Spalte also eine zu viel. Dort trennt darum kein Strich, sondern
   der Spaltenabstand. */
.wk-personen--spalten .wk-person { border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding-top: 13px; }
.wk-personen--spalten .wk-person:last-child { border-bottom: 0; }
.wk-person img {
  width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top center;
  background: rgba(255, 255, 255, 0.08);
}
.wk-person strong {
  display: block; font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: 17px; line-height: 1.15;
}
.wk-person em {
  display: block; font-family: var(--wk-text); font-style: normal; font-size: 13px;
  line-height: 1.35; opacity: 0.72; margin: 2px 0 5px;
}
.wk-person__wege { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wk-person__wege a {
  font-family: var(--wk-text); font-size: 13.5px; color: var(--wk-white);
  text-decoration: none; opacity: 0.85; overflow-wrap: break-word;
}
.wk-person__wege a:hover { opacity: 1; color: var(--wk-key); }

/* --- Bildkacheln --------------------------------------------------------- */
/* Eine reine Bildkachel füllt ihr Feld ganz aus — sie ist so hoch wie ihre
   Nachbarin und beschneidet das Motiv, statt Weißraum zu lassen. */
.wk-kachel--bild { box-shadow: 0 6px 24px rgba(10, 33, 21, 0.1); }
/* Das Bild darf die Zeilenhoehe NICHT bestimmen. Ohne absolute Lage rechnet der
   Browser die Hoehe aus dem Seitenverhaeltnis der Datei — eine 8 Spalten breite
   Kachel wurde so 520 px hoch und zog die Kachel daneben (ein Ansprechpartner)
   auf dieselbe Hoehe, mit einem grossen Loch darunter. So gibt umgekehrt die
   Nachbarkachel die Hoehe vor und das Motiv wird passend beschnitten. */
.wk-kachel--bild .wk-kachel__foto { position: relative; flex: 1; min-height: 240px; }
.wk-kachel--bild .wk-kachel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-kachel__foto { position: relative; overflow: hidden; }
.wk-kachel__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Auf Schritt-Kacheln sitzt das Foto oben in festem Seitenverhältnis, damit die
   drei nebeneinander auf einer Linie beginnen. */
.wk-kachel--mit-foto .wk-kachel__foto { aspect-ratio: 16 / 9; flex: 0 0 auto; }
.wk-kachel--mit-foto .wk-kachel__inhalt { padding-top: 0; }
/* Das Piktogramm überlappt die Bildkante und verbindet Foto und Text. */
.wk-kachel--mit-foto .wk-kachel__icon {
  margin-top: -23px; position: relative; z-index: 1;
  box-shadow: 0 4px 12px rgba(10, 33, 21, 0.18);
}

/* --- Aufzählung mit Piktogrammen ---------------------------------------- */
/* Fünf Anwendungsgebiete als Bildmarken statt als Textzeilen — das ist der
   Unterschied zwischen „Liste" und „Übersicht". */
.wk-kachel__iconliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.wk-kachel__iconliste li {
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center;
  padding: 9px 0; font-family: var(--wk-text); font-size: 15.5px; line-height: 1.3;
  font-weight: 600; min-width: 0; overflow-wrap: break-word;
}
.wk-kachel__iconliste li > span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--wk-white); color: var(--wk-dark);
}
.wk-kachel__iconliste svg { width: 21px; height: 21px; }


/* --- Schmale Darstellung ------------------------------------------------ */
/* Zwölf Spalten tragen nur auf breiten Fenstern. Darunter zwei gleich breite
   Spalten, in denen die beiden großen Kacheln über die volle Breite gehen —
   und ganz schmal steht alles untereinander. */
@media (max-width: 1080px) {
  .wk-bento__grid {
    grid-template-columns: repeat(2, 1fr);
    /* Im Zweispalter treffen sehr unterschiedlich hohe Kacheln aufeinander.
       Auf Zeilenhöhe gestreckt reißt die kürzere eine große Leerfläche auf —
       hier zieht sich jede Kachel stattdessen auf ihre Inhaltshöhe. */
    align-items: start;
  }
  .wk-kachel { grid-column: span 1; }
  .wk-kachel--lead, .wk-kachel--kontakt { grid-column: span 2; }
  /* Die Verteilung über die volle Höhe ergibt nur im gestreckten Raster Sinn. */
  .wk-kachel__liste--spalten { align-content: start; }
}
@media (max-width: 680px) {
  .wk-bento__grid { grid-template-columns: 1fr; }
  .wk-kachel, .wk-kachel--lead, .wk-kachel--kontakt { grid-column: span 1; }
  .wk-kachel__inhalt { padding: 24px 22px 26px; }
  .wk-kachel--lead .wk-kachel__inhalt { padding: 26px 22px 28px; }
}

/* --- Bildnachweis, Logo-Kachel, Statement-Kachel ------------------------- */
/* Der Nachweis („Quelle: …") steht in der Quelle als eigener Absatz. Er gehört
   an sein Bild — als loser Satz im Fließtext las er sich wie ein Fragment. */
.wk-kachel__quelle {
  font-family: var(--wk-text); font-size: 12.5px; line-height: 1.3;
  margin: 0; padding: 10px 16px; opacity: 0.62;
}
.wk-kachel--bild .wk-kachel__quelle { background: var(--wk-white); }

/* Ein Logo wird eingepasst, nicht beschnitten — und sitzt mittig auf der Fläche. */
.wk-kachel--logo .wk-kachel__inhalt { align-items: center; justify-content: center; text-align: center; }
.wk-kachel--logo img { display: block; width: 100%; max-width: 340px; height: auto; }
.wk-kachel--logo .wk-kachel__quelle { padding: 12px 0 0; }

/* Statement-Kachel: ein kurzer Satz der Quelle, groß gesetzt. */
.wk-kachel--gross .wk-kachel__inhalt { justify-content: center; }
.wk-kachel--gross p {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: clamp(21px, 2.2vw, 30px) !important; line-height: 1.14 !important;
}

/* Vier Ansprechpartner in einer breiten Kachel: zwei Spalten statt einer
   langen Reihe — sonst wird die Kachel doppelt so hoch wie ihre Nachbarn. */
/* auto-fill statt fester Zwei: Die Kontaktkachel ist je nach Seite 4, 8 oder 12
   Spalten breit — mit fester Spaltenzahl stünde sie mal gedrängt, mal fast leer. */
.wk-personen--spalten { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 4px 26px; }


/* ==========================================================================
   Bänder-Stapel: Ausgleich dünner Seiten
   ==========================================================================
   Die fünf Serviceseiten teilen sich denselben Baukasten, aber nicht dieselbe
   Menge Quelltext. Wo eine Seite weniger liefert, blieben Raster halb belegt —
   das las sich wie ein Fehler, nicht wie eine Entscheidung. Diese drei Regeln
   lassen die dünneren Seiten dasselbe Bild abgeben wie recycling-entsorgung.
   Sie stehen NACH den Media Queries oben, damit die schmale Darstellung
   (eine Spalte) weiterhin gewinnt.
   ========================================================================== */

/* Zwei Kapitelkarten füllen die Breite, statt ein Drittel leer zu lassen. */
.wk-kapitel__grid--zwei { grid-template-columns: repeat(2, 1fr); }

/* Eine einzelne Portfolio-Gruppe nimmt die ganze Breite — im 7fr/5fr-Raster
   stand sie sonst als angeschnittene Karte mit leerer rechter Hälfte da. */
.wk-port__grid--einzel { grid-template-columns: 1fr; }

/* Aufmacher, die ein ganzer Quellsatz sind (über 140 Zeichen), eine Stufe
   kleiner: in voller Anzeigegröße wurde daraus eine Wand aus Versalien. */
.wk-lead--lang .wk-lead__aussage { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.14; }

@media (max-width: 900px) {
  .wk-kapitel__grid--zwei { grid-template-columns: 1fr; }
  .wk-port__grid--einzel { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Übersicht als Kachelfeld (Industrien / Anwendungen)
   ==========================================================================
   Bauform übernommen vom Stellenfeld auf /karriere/: Filterpillen über einem
   Raster aus Karten (Label · Bild · Titel · Anriss · Knopf). Dort liegt das
   Feld auf dunklem Grund und die Karten sind Glas; hier ist der Grund WEISS,
   deshalb tragen Karte und Schrift den Kontrast selbst (heller Kartenton,
   dunkle Schrift, Rand statt Schatten). Glas und Textschatten wären auf Weiß
   sinnlos bis unlesbar. Die Wechselbild-Liste (.wk-thema) bleibt
   für Gruppen ohne `felder` bestehen, deshalb ein Modifier statt Umbau.
   Steht am Dateiende und damit hinter den Media Queries oben; die schmale
   Darstellung dieses Blocks bringt er selbst mit. */

.wk-themen--karten { background: var(--wk-white); color: var(--wk-dark); }
.wk-themen--karten .wk-themen__head { margin-bottom: 28px; }
.wk-themen--karten .wk-themen__head h2 { color: var(--wk-dark); }

/* --- Filterpillen --------------------------------------------------------- */
.wk-filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 36px;
}
.wk-filter__btn {
  font-family: var(--wk-text); font-size: 15px; font-weight: 600; line-height: 1.2;
  background: rgba(10, 33, 21, 0.04); border: 1px solid rgba(10, 33, 21, 0.25); color: var(--wk-dark);
  padding: 9px 20px; border-radius: 20px; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.wk-filter__btn:hover { background: rgba(10, 33, 21, 0.08); border-color: var(--wk-key); }
.wk-filter__btn.is-aktiv {
  background: var(--wk-key); border-color: var(--wk-key); color: var(--wk-dark); cursor: default;
}

/* --- Kartenraster --------------------------------------------------------- */
.wk-branchen { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; }
/* Sechs Karten: drei Spalten ergeben zwei volle Reihen. Das freie auto-fit
   legte auf 1440 px vier Karten in die erste Reihe und ließ die zweite halb
   leer — das las sich wie ein Fehler. Bleibt trotzdem auto-fit als Grundwert,
   damit eine siebte Branche nicht sofort umgebaut werden muss. */
@media (min-width: 1000px) { .wk-branchen { grid-template-columns: repeat(3, 1fr); } }
.wk-branche {
  display: flex; flex-direction: column; padding: 24px; border-radius: 16px;
  background: var(--wk-light); border: 1px solid rgba(10, 33, 21, 0.1);
  box-shadow: 0 6px 18px rgba(10, 33, 21, 0.07);
  transition: filter 0.25s ease, opacity 0.25s ease;
}
/* Label in Grün wäre auf hellem Grund zu schwach (2.1:1). Dunkel gesetzt,
   die Rubrik trägt ihre Wirkung über Versalien und Sperrung. */
.wk-branche__label {
  display: block; font-family: var(--wk-text); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: rgba(10, 33, 21, 0.65); margin-bottom: 8px;
}
.wk-branche__bild {
  display: block; width: 100%; height: 180px; object-fit: cover;
  border-radius: 8px; margin-bottom: 15px;
}
.wk-branche__titel {
  font-family: var(--wk-head); font-weight: 700; text-transform: uppercase;
  font-size: 22px; line-height: 1.1; margin: 10px 0; color: var(--wk-dark);
}
.wk-branche__text {
  font-family: var(--wk-text); font-size: 15px; line-height: 1.5; margin: 0 0 20px;
  color: var(--wk-dark);
}
.wk-branche__btn {
  display: block; width: 100%; margin-top: auto; padding: 12px 0;
  font-family: var(--wk-head); font-weight: 700; font-size: 16px; letter-spacing: 0.5px;
  text-transform: uppercase; text-align: center; text-decoration: none;
  background: var(--wk-key); color: var(--wk-dark); border-radius: 8px;
  transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.wk-branche__btn:hover {
  filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(10, 33, 21, 0.18);
}

/* Ausgrauen statt ausblenden — das Raster bleibt stehen, die Auswahl ist
   trotzdem sofort ablesbar (gleiche Regel wie im Stellenfeld). */
.wk-branche.is-matt { filter: grayscale(1); opacity: 0.4; }
.wk-branche.is-matt .wk-branche__btn { pointer-events: none; }

@media (max-width: 900px) {
  .wk-branchen { grid-template-columns: 1fr; gap: 16px; }
  .wk-branche { box-shadow: 0 8px 20px rgba(10, 33, 21, 0.09); }
  .wk-branche__titel { font-size: 20px; }
  .wk-branche__text { font-size: 16px; line-height: 1.6; }
}

/* ==========================================================================
   Hero „typo" (/services/) — Volltongrund statt Vollbild
   ==========================================================================
   Bewusst anders gebaut als die übrigen Heros dieses Bereichs: Dort liegt der
   Text auf einem großflächigen Foto. Hier steht der Titel auf dem Volltongrund
   und die Fotos leben in einer Komposition daneben. Zwei Gründe:

   1. Der Bereich hat drei gleichrangige Einstiege (Produkte · Industrien ·
      Services). Wenn alle drei „Text auf Foto" sind, sieht jeder Wechsel gleich
      aus — die Seiten unterscheiden sich dann nur am Wort im Titel.
   2. Die Komposition zeigt die Breite der Leistungen bildlich. Ein zweiter Satz
      Verweise im Hero wäre dieselbe Navigation, die zwei Zentimeter darunter als
      Themenliste schon steht.

   Farben, Schrift, Rundungen und die Bereichsauswahl bleiben unverändert — die
   Familie erkennt man daran, nicht am Bildaufbau.

   Am Dateiende, weil die schmale Darstellung des Standard-Heros weiter oben in
   `@media (max-width: 900px)` steht und dieselbe Spezifität hat. */

.wk-hero--typo { background: var(--wk-dark); }
/* Hintergrundmotiv: deutlich schwächer als im Standard-Hero (0.42). Es soll die
   Fläche strukturieren, nicht mit der Bildkomposition konkurrieren — die trägt
   drei scharfe Fotos, und zwei gleich starke Bildebenen ergeben Unruhe.
   Nachgemessen: Titel bleibt über 12:1, Aufmacher über 9:1. */
.wk-hero--typo .wk-hero__bg img { opacity: 0.46; }
/* Von links kräftig, nach rechts hin dünner: Links steht die Schrift, rechts
   liegt die Komposition und darf Motiv durchlassen. Der zweite Verlauf gibt der
   Bereichsauswahl unten Grund unter den Füßen. */
.wk-hero--typo .wk-hero__schleier {
  background:
    linear-gradient(98deg, rgba(10, 33, 21, 0.88) 0%, rgba(10, 33, 21, 0.72) 36%,
      rgba(10, 33, 21, 0.42) 70%, rgba(10, 33, 21, 0.58) 100%),
    linear-gradient(to bottom, rgba(10, 33, 21, 0) 46%, rgba(10, 33, 21, 0.5) 100%);
}
.wk-hero--typo > .wk-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: 30px 60px; align-items: center;
  padding-top: 172px; padding-bottom: 44px;
}
/* Flacher grüner Schimmer unten links — bindet die Fläche an die Hausfarbe.
   Das Schrägraster, das hier stand, solange der Grund einfarbig war, ist mit dem
   Hintergrundmotiv wieder raus: Foto UND Raster übereinander ist eine Zutat zu
   viel, und die Struktur bringt jetzt das Motiv.
   Die Maske hält den Schimmer in der linken Hälfte, unter der Komposition wäre
   er nur Rechenzeit. Fehlt `mask-image`, liegt er über die ganze Fläche. */
.wk-hero--typo .wk-hero__glanz {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 20% 92%, rgba(134, 202, 88, 0.13), rgba(134, 202, 88, 0) 68%);
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 44%, rgba(0, 0, 0, 0) 62%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 44%, rgba(0, 0, 0, 0) 62%);
}

/* --- Textspalte ----------------------------------------------------------- */
/* Größer als im Standard-Hero (72 px): Ohne Foto trägt die Schrift die Fläche.
   Der Titel ist ein Wort — er darf die Höhe der Komposition mitgehen. */
.wk-hero--typo h1 { font-size: clamp(46px, 8vw, 122px); margin: 0 0 20px; letter-spacing: -0.5px; }
/* Grüner Strich statt Unterstreichung: Er markiert das Ende des Titels und
   wiederholt die Hausfarbe an der Stelle, an der sonst das Foto Farbe brachte. */
.wk-hero--typo h1::after {
  content: ''; display: block; width: 72px; height: 5px; border-radius: 3px;
  background: var(--wk-key); margin: 22px 0 0;
}
.wk-hero--typo .wk-hero__intro { max-width: 46ch; opacity: 0.86; }

/* --- Bildkomposition ------------------------------------------------------ */
/* Ein hohes Motiv links, zwei kleinere rechts gestapelt. Feste Zeilenverhältnisse
   statt gleicher Höhen: Das große Motiv bekommt Vorrang, die beiden kleinen
   bleiben Beiwerk. */
.wk-hero__collage {
  display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1.15fr 1fr;
  gap: 14px; height: clamp(300px, 30vw, 392px);
}
.wk-hero__collage figure {
  margin: 0; overflow: hidden; border-radius: 16px; position: relative;
  /* Auf einfarbigem Grund brauchte die Komposition keinen Schatten. Über einem
     Foto schon: Ohne ihn schwimmen die drei Felder im Motiv. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}
.wk-hero__collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-collage__gross { grid-row: span 2; }
/* Feine Kante nach innen: Auf dem dunklen Grund verschwinden die Bildränder
   sonst je Motiv, und die Komposition verliert ihre Form. */
.wk-hero__collage figure::after {
  content: ''; position: absolute; inset: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
/* Kein grüner Rahmen um das große Motiv: Als 2-px-Kontur um ein Foto wirkt die
   Hausfarbe wie ein Aufkleber. Den Akzent trägt der Strich unter dem Titel. */

/* --- Bereichsauswahl in dieser Bauform ------------------------------------ */
/* Die `--im-hero`-Fassung (halbdurchsichtig + Blur, damit das Bild durchläuft)
   ist für Fotos gemacht. Liegt in dieser Bauform KEIN Hintergrundmotiv, wäre sie
   ein Feld in Grundfarbe auf Grundfarbe und die Felder verlören ihre Kontur —
   dann gelten die Standardwerte. Über `:has()` hängt das am tatsächlichen
   Vorhandensein des Bildes und nicht an einer Klasse, die man beim Entfernen des
   Motivs vergessen könnte. */
.wk-hero--typo:not(:has(.wk-hero__bg)) .wk-switch--im-hero .wk-switch__list a {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.wk-hero--typo:not(:has(.wk-hero__bg)) .wk-switch--im-hero .wk-switch__list a:hover {
  background: rgba(255, 255, 255, 0.13); border-color: var(--wk-key);
}
.wk-hero--typo:not(:has(.wk-hero__bg)) .wk-switch--im-hero .wk-switch__list a[aria-current="page"] {
  background: var(--wk-key); border-color: var(--wk-key); color: var(--wk-dark);
}

/* --- Schmale Darstellung -------------------------------------------------- */
@media (max-width: 1000px) {
  .wk-hero--typo > .wk-inner { grid-template-columns: 1fr; gap: 30px; padding-top: 172px; }
  .wk-hero--typo .wk-hero__intro { max-width: 640px; }
  .wk-hero__collage { height: clamp(260px, 44vw, 360px); }
  /* Untereinander gibt es keine „rechte Seite", die vom Motiv leben soll: Schrift
     und Komposition stehen beide über der ganzen Breite. Der Schleier trägt hier
     von oben nach unten, statt von links nach rechts. */
  .wk-hero--typo .wk-hero__schleier {
    background: linear-gradient(to bottom, rgba(10, 33, 21, 0.84) 0%, rgba(10, 33, 21, 0.7) 42%,
      rgba(10, 33, 21, 0.62) 100%);
  }
  .wk-hero--typo .wk-hero__glanz { -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 900px) {
  .wk-hero--typo > .wk-inner { padding-top: 196px; padding-bottom: 32px; }
}
@media (max-width: 620px) {
  /* Drei Bilder nebeneinander wären auf dem Handy drei Streifen. Großes Motiv
     über die Breite, die beiden kleinen darunter als Paar. */
  .wk-hero__collage {
    grid-template-columns: 1fr 1fr; grid-template-rows: 1.35fr 1fr;
    height: clamp(300px, 82vw, 380px); gap: 10px;
  }
  .wk-collage__gross { grid-row: 1; grid-column: span 2; }
  .wk-hero--typo h1::after { margin-top: 18px; width: 60px; height: 4px; }
  .wk-hero__collage figure, .wk-hero__collage figure::after { border-radius: 12px; }
}