/* ==========================================================================
   Kantonist Level GmbH — Stylesheet
   Aufbau:
     1. Tokens & Basis
     2. Bausteine (Arrow, Buttons, Section-Head, Reveal)
     3. Header & Navigation
     4. Hero & Laufband
     5. Leistungen (Accordion)
     6. Ablauf
     7. Referenzgalerie
     8. B2B
     9. Über uns
    10. Kontakt & Formular
    11. Footer
    12. Rechtstexte
   ========================================================================== */

/* 1. Tokens & Basis ------------------------------------------------------- */

:root {
  --kl-dark: #161616;
  --kl-green: #7cd400;
  --kl-green-light: #9ee63f;
  --kl-grey: #636c70;
  --kl-white: #ffffff;

  --kl-radius: 12px;
  --kl-max: 1400px;
  --kl-pad-x: clamp(24px, 4vw, 32px);
  --kl-section-y: clamp(72px, 10vw, 130px);

  --kl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kl-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;

  /* Signaturform der Marke: der "Level"-Pfeil aus dem Logo. */
  --kl-arrow: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
}

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

html {
  scroll-behavior: smooth;
  /* Sticky-Header nicht über Ankerziele schieben lassen */
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--kl-dark);
  color: var(--kl-white);
  font-family: var(--kl-font);
  font-weight: 300;
  font-feature-settings: "lnum", "tnum";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video { max-width: 100%; }

a {
  color: var(--kl-green);
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover { color: var(--kl-green-light); }

::selection {
  background: var(--kl-green);
  color: var(--kl-dark);
}

:focus-visible {
  outline: 3px solid var(--kl-green);
  outline-offset: 3px;
}

h1, h2, h3, p { margin: 0; }

.kl-wrap {
  position: relative;
  max-width: var(--kl-max);
  margin: 0 auto;
}

.kl-section {
  position: relative;
  padding: var(--kl-section-y) var(--kl-pad-x);
  overflow: hidden;
}
.kl-section--dark { background: var(--kl-dark); }
.kl-section--grey { background: var(--kl-grey); }
.kl-section--green { background: var(--kl-green); color: var(--kl-dark); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--kl-green);
  color: var(--kl-dark);
  padding: 12px 20px;
  border-radius: var(--kl-radius);
}
.skip-link:focus { left: 12px; top: 12px; color: var(--kl-dark); }

.kl-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 2. Bausteine ------------------------------------------------------------ */

/* Der Marken-Pfeil, überall als Aufzählungs-, Trenn- und Dekorzeichen. */
.kl-arrow {
  display: block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background: var(--kl-green);
  clip-path: var(--kl-arrow);
}
.kl-arrow--dark { background: var(--kl-dark); }
.kl-arrow--muted { background: rgba(255, 255, 255, 0.3); }

/* Große, schwebende Dekorform im Hintergrund einer Sektion. */
.kl-blob {
  position: absolute;
  background: rgba(124, 212, 0, 0.32);
  clip-path: var(--kl-arrow);
  animation: klFloat 12s ease-in-out infinite;
  pointer-events: none;
}
.kl-blob--dark { background: rgba(22, 22, 22, 0.16); }

/* Konturschrift: riesige Wörter, nur als Umriss.
 *
 * WICHTIG — die Füllung (color) muss die Hintergrundfarbe der Sektion sein,
 * niemals `transparent`: -webkit-text-stroke legt die Kontur mittig auf die
 * Buchstabenkante, die innere Hälfte liegt also im Buchstaben. An spitzen
 * Winkeln (Spitze des A, Diagonale des N, Ansatz des R, Kerbe des G)
 * überschneiden sich diese inneren Hälften und werden als Striche sichtbar.
 * Die deckende Füllung wird durch `paint-order: stroke fill` über die Kontur
 * gemalt und verdeckt genau diese Überschneidungen.
 *
 * Jede Verwendung setzt daher --kl-outline-fill auf ihre Hintergrundfarbe. */
.kl-outline-text {
  font-weight: 700;
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--kl-outline-fill, var(--kl-dark));
  /* Konturstärke in em, nicht in px: die Schriftgröße dieser Wörter skaliert
     per clamp() mit der Fensterbreite. Feste 2px wären auf dem Handy (ca.
     40px Schrift) so dick, dass die Punzen zulaufen und die Linien
     ineinander greifen. In em bleibt das Verhältnis überall gleich. */
  -webkit-text-stroke-width: var(--kl-outline-stroke-w, 0.013em);
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.24);
  paint-order: stroke fill;
  user-select: none;
  pointer-events: none;
}

.kl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 28px;
  border: none;
  border-radius: var(--kl-radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.kl-btn--primary { background: var(--kl-green); color: var(--kl-dark); }
.kl-btn--primary:hover {
  color: var(--kl-dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(124, 212, 0, 0.32);
}
.kl-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--kl-white);
}
.kl-btn--ghost:hover { background: rgba(255, 255, 255, 0.2); color: var(--kl-white); }
.kl-btn--dark { background: var(--kl-dark); color: var(--kl-white); }
.kl-btn--dark:hover {
  color: var(--kl-white);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3);
}
.kl-btn--block { width: 100%; }
.kl-btn:disabled { opacity: 0.6; cursor: progress; transform: none; box-shadow: none; }

/* Kopfzeile einer Sektion: Nummer · Strich · Label, darunter die H2. */
.kl-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.kl-eyebrow__num { font-size: 13px; letter-spacing: 0.1em; color: var(--kl-green); }
.kl-eyebrow__rule { display: block; width: 36px; height: 1px; background: rgba(255, 255, 255, 0.3); }
.kl-eyebrow__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.kl-section--grey .kl-eyebrow__rule { background: rgba(255, 255, 255, 0.4); }
.kl-section--grey .kl-eyebrow__label { color: rgba(255, 255, 255, 0.75); }
.kl-section--green .kl-eyebrow__num { color: var(--kl-dark); }
.kl-section--green .kl-eyebrow__rule { background: rgba(22, 22, 22, 0.4); }
.kl-section--green .kl-eyebrow__label { color: rgba(22, 22, 22, 0.7); }

.kl-h2 {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 200;
  line-height: 1;
  color: var(--kl-white);
}
.kl-section--green .kl-h2 { color: var(--kl-dark); }

.kl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 52px;
}
.kl-head__note {
  max-width: 36ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* Einblenden beim Scrollen (JS setzt .is-revealed). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--kl-ease), transform 0.8s var(--kl-ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

@keyframes klMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes klFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kl-blob, .kl-marquee__track { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* 3. Header & Navigation -------------------------------------------------- */

.kl-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(22, 22, 22, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.kl-header__bar {
  max-width: var(--kl-max);
  margin: 0 auto;
  padding: 12px var(--kl-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Markenzeichen = das komplette Logo in der hellen Fassung. 56px Höhe ist
   das Minimum, ab dem der Schriftzug im Logo noch lesbar ist (die Versalien
   sind nur rund 14 % der Logohöhe). */
.kl-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity 0.25s ease;
}
.kl-brand:hover { opacity: 0.8; }
.kl-brand img { height: 56px; width: auto; display: block; }

.kl-nav { display: flex; align-items: center; gap: 32px; }
.kl-nav__link {
  font-size: 15px;
  color: var(--kl-white);
  white-space: nowrap;
}
.kl-nav__link:hover { color: var(--kl-green); }
.kl-nav__link.is-active { color: var(--kl-green); }
.kl-nav .kl-btn { padding: 13px 24px; }

.kl-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--kl-radius);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.kl-burger span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--kl-white);
  transition: transform 0.3s var(--kl-ease), opacity 0.2s ease;
}
.kl-burger span:nth-child(2) { background: var(--kl-green); }
.kl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.kl-mobile-panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 24px;
  background: var(--kl-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kl-mobile-panel.is-open { display: flex; }
.kl-mobile-panel a {
  padding: 12px 8px;
  font-size: 18px;
  color: var(--kl-white);
}
.kl-mobile-panel .kl-btn { margin-top: 8px; padding: 14px 24px; color: var(--kl-dark); }

/* Lesefortschritt als dünne Linie unter dem Header. */
.kl-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--kl-green);
}

@media (max-width: 860px) {
  .kl-nav { display: none; }
  .kl-burger { display: flex; }
}

/* 4. Hero & Laufband ------------------------------------------------------ */

.kl-hero {
  position: relative;
  min-height: 94vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.kl-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kl-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(22, 22, 22, 0.94) 0%,
    rgba(22, 22, 22, 0.78) 42%,
    rgba(22, 22, 22, 0.3) 100%
  );
}
.kl-hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, 0.9) 100%);
}
/* Im Hero steht statt der abstrakten Pfeilform das vollständige Logo mit
   Schriftzug. Position und die Schwebe-Animation aus .kl-blob bleiben —
   überschrieben werden Füllfarbe und clip-path.
   Das Kästchen trägt das Seitenverhältnis des Logos (1,239:1), sonst ließe
   `contain` oben und unten Luft.
   WICHTIG — die Breite ist absichtlich kleiner als bei der früheren
   Pfeilform: Das Logo enthält jetzt den Schriftzug, und der darf nicht
   hinter der Überschrift liegen. Schrift über Schrift macht beides
   unlesbar. Die 26vw halten es rechts neben `.kl-hero__title`
   (max-width: 17ch). Wird die Überschrift länger oder größer gesetzt,
   muss dieser Wert mit. */
.kl-hero__blob {
  top: 50%;
  translate: 0 -50%;
  right: clamp(16px, 3vw, 56px);
  width: clamp(200px, 26vw, 400px);
  height: auto;
  aspect-ratio: 1.239;
  opacity: 0.42;
  clip-path: none;
  background: url('../img/logo/logo-kantonist-level-hell.png') center / contain no-repeat;
}
/* Schmale Schirme: hier entfällt das schwebende Logo ersatzlos. Die
   Überschrift läuft über die volle Breite, daneben ist kein Platz — und
   direkt darüber steht das Logo bereits groß und scharf in der Kopfzeile.
   Eine zweite, blasse Kopie ein paar Pixel darunter bringt nichts. */
@media (max-width: 860px) {
  .kl-hero__blob { display: none; }
}
.kl-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kl-max);
  margin: 0 auto;
  padding: 150px var(--kl-pad-x) 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.kl-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.kl-hero__kicker span:first-child {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--kl-green);
}
.kl-hero__kicker span:last-child {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kl-green);
}
.kl-hero__title {
  max-width: 17ch;
  margin-bottom: 30px;
  font-size: clamp(44px, 8vw, 116px);
  font-weight: 200;
  line-height: 0.9;
  text-wrap: balance;
}
.kl-hero__sub {
  max-width: 46ch;
  margin-bottom: 34px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}
.kl-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.kl-hero__actions .kl-btn { padding: 17px 30px; }

.kl-marquee {
  background: var(--kl-green);
  overflow: hidden;
  padding: clamp(13px, 1.8vw, 20px) 0;
}
.kl-marquee__track {
  display: flex;
  width: max-content;
  animation: klMarquee 34s linear infinite;
}
.kl-marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  width: max-content;
  flex: 0 0 auto;
  padding-right: clamp(24px, 4vw, 56px);
}
.kl-marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-shrink: 0;
}
.kl-marquee__item span {
  font-size: clamp(24px, 3.2vw, 48px);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--kl-dark);
  white-space: nowrap;
}
.kl-marquee .kl-arrow {
  width: clamp(13px, 1.5vw, 20px);
  height: clamp(13px, 1.5vw, 20px);
  background: var(--kl-dark);
}

/* 5. Leistungen (Accordion) ----------------------------------------------- */

.kl-services { display: flex; flex-direction: column; }
.kl-services__end { border-top: 1px solid rgba(255, 255, 255, 0.14); }

.kl-service { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.kl-service__toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 30px) 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: padding-left 0.35s var(--kl-ease);
}
.kl-service__toggle:hover { padding-left: 16px; }
.kl-service__num {
  font-size: 14px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
.kl-service__labels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.kl-service__title {
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--kl-white);
}
.kl-service__short {
  max-width: 44ch;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.45);
}
.kl-service__chev {
  width: 15px;
  height: 15px;
  background: rgba(255, 255, 255, 0.45);
  transition: transform 0.4s var(--kl-ease), background 0.3s ease;
}
.kl-service.is-open .kl-service__num { color: var(--kl-green); }
.kl-service.is-open .kl-service__chev { background: var(--kl-green); transform: rotate(90deg); }

/* Ohne JS bleiben alle Panels offen — die Inhalte sind so immer lesbar. */
.js .kl-service__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--kl-ease);
}
.js .kl-service.is-open .kl-service__panel { grid-template-rows: 1fr; }
.js .kl-service__panel > div { min-height: 0; overflow: hidden; }

.kl-service__body {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(20px, 3vw, 44px);
  padding: 6px 4px clamp(28px, 3.4vw, 40px);
}
.kl-service__figure {
  border-radius: var(--kl-radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #26292b;
}
.kl-service__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-service__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.kl-service__tagline {
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
.kl-service__extra {
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}
.kl-service__text .kl-btn { align-self: flex-start; padding: 14px 24px; }

@media (max-width: 860px) {
  .kl-service__short { display: none; }
  .kl-service__body { grid-template-columns: 1fr; }
}

/* 6. Ablauf --------------------------------------------------------------- */

.kl-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.kl-step { position: relative; padding-top: 24px; }
.kl-step__rail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
}
.kl-step__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--kl-green);
  transition: width 1.1s var(--kl-ease);
}
.kl-steps.is-running .kl-step__fill { width: 100%; }
.kl-step__num {
  margin-bottom: 18px;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: 0.02em;
  color: var(--kl-grey);
  -webkit-text-stroke-width: 0.035em;
  -webkit-text-stroke-color: var(--kl-green);
  paint-order: stroke fill;
}
.kl-step__title { margin-bottom: 10px; font-size: 23px; font-weight: 400; }
.kl-step__desc { max-width: 34ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }

.kl-ablauf__cta {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
}
.kl-ablauf__note { font-size: 14px; color: rgba(255, 255, 255, 0.7); }
.kl-ablauf__blob {
  bottom: -10vw;
  right: -7vw;
  width: 38vw;
  height: 38vw;
  max-width: 500px;
  max-height: 500px;
  animation-duration: 14s;
}

/* 7. Referenzgalerie ------------------------------------------------------ */

.kl-gallery__head { margin-bottom: 36px; }
.kl-gallery__lead {
  max-width: 56ch;
  margin-top: 14px;
  font-size: 19px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.7);
}
.kl-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.kl-filter {
  padding: 11px 20px;
  border: none;
  border-radius: var(--kl-radius);
  background: rgba(255, 255, 255, 0.14);
  color: var(--kl-white);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.kl-filter:hover { transform: translateY(-2px); }
.kl-filter.is-active { background: var(--kl-green); color: var(--kl-dark); }

.kl-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.kl-tile {
  position: relative;
  border-radius: var(--kl-radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #26292b;
}
.kl-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--kl-ease);
}
.kl-tile:hover img { transform: scale(1.05); }
.kl-tile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  pointer-events: none;
}
.kl-tile__badge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: var(--kl-radius);
  background: rgba(0, 0, 0, 0.55);
  color: var(--kl-white);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kl-tile__title { display: block; font-size: 16px; font-weight: 400; color: var(--kl-white); }
.kl-tile__note { display: block; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, 0.78); }
.kl-tile[hidden] { display: none; }

.kl-pager { display: flex; justify-content: center; gap: 10px; margin-top: 32px; }
.kl-pager__btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--kl-radius);
  background: rgba(255, 255, 255, 0.14);
  color: var(--kl-white);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.kl-pager__btn:hover { transform: translateY(-2px); }
.kl-pager__btn.is-active { background: var(--kl-green); color: var(--kl-dark); }

/* Auf dem Handy wird aus dem Raster ein Wischkarussell. */
@media (max-width: 860px) {
  .kl-gallery__grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .kl-gallery__grid::-webkit-scrollbar { display: none; }
  .kl-tile { flex: 0 0 82%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
  .kl-pager { gap: 12px; margin-top: 16px; }
}

/* 8. B2B ------------------------------------------------------------------ */

.kl-b2b {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.kl-b2b__title {
  margin-bottom: 24px;
  font-size: clamp(34px, 5.4vw, 70px);
  font-weight: 200;
  line-height: 0.98;
  color: var(--kl-dark);
}
.kl-b2b__text {
  max-width: 52ch;
  margin-bottom: 16px;
  font-size: 19px;
  line-height: 1.35;
  color: rgba(22, 22, 22, 0.78);
}
.kl-b2b__tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 32px; }
.kl-b2b__tag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: 1px solid rgba(22, 22, 22, 0.22);
  border-radius: var(--kl-radius);
  background: rgba(22, 22, 22, 0.09);
  color: var(--kl-dark);
  font-size: 14px;
}
.kl-b2b__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(220px, 28vw, 360px);
}
.kl-b2b__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(110px, 18vw, 260px);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.02em;
  /* Füllung = Hintergrund der Sektion, siehe Erklärung bei .kl-outline-text */
  color: var(--kl-green);
  /* em statt px, weil die Schriftgröße per clamp() mitskaliert */
  -webkit-text-stroke-width: 0.0115em;
  -webkit-text-stroke-color: rgba(22, 22, 22, 0.22);
  paint-order: stroke fill;
  user-select: none;
}
.kl-b2b__arrows {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  animation: klFloat 12s ease-in-out infinite;
}
.kl-b2b__arrows span {
  display: block;
  width: clamp(56px, 7vw, 104px);
  height: clamp(82px, 10.6vw, 150px);
  background: var(--kl-dark);
  clip-path: var(--kl-arrow);
}
.kl-b2b__arrows span:last-child { background: rgba(22, 22, 22, 0.45); transform: scaleX(-1); }
.kl-b2b__blob {
  top: -10vw;
  right: -8vw;
  width: 44vw;
  height: 44vw;
  max-width: 600px;
  max-height: 600px;
  background: rgba(22, 22, 22, 0.13);
  animation-duration: 13s;
}

/* 9. Über uns ------------------------------------------------------------- */

.kl-page-hero { padding-top: clamp(120px, 14vw, 190px); }
.kl-page-hero__blob {
  top: 8%;
  right: -8vw;
  width: 42vw;
  height: 42vw;
  max-width: 560px;
  max-height: 560px;
  background: rgba(124, 212, 0, 0.11);
  animation-duration: 15s;
}
.kl-page-hero__title {
  max-width: 22ch;
  margin-bottom: 32px;
  font-size: clamp(36px, 6vw, 84px);
  font-weight: 200;
  line-height: 0.95;
  text-wrap: balance;
}
/* Der Nachfahren-Selektor ist Absicht: `.kl-about__text p` setzt die
   Absatzfarbe und hätte sonst die höhere Spezifität — der Akzent würde
   weiß statt grün. */
.kl-about__text .kl-about__accent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--kl-green);
}

/* Über uns: Fließtext links, Teamfoto rechts.
   Die große Überschrift steht bewusst darüber über die volle Breite — in
   einer halben Spalte bräche sie auf vier Zeilen um und verlöre ihre
   Wirkung. Das Foto kommt aus assets/img/team/ (siehe kl_team_photo()). */
.kl-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 30vw, 420px);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
/* Ohne Begrenzung würden die Zeilen in der breiten linken Spalte über
   100 Zeichen lang — dieselbe Obergrenze wie bei .kl-why__desc. */
.kl-about__text { max-width: 62ch; }
.kl-about__text p {
  margin-bottom: 18px;
  font-size: 18px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.75);
}
.kl-about__text p:last-child { margin-bottom: 0; }
.kl-about__figure {
  margin: 0;
  border-radius: var(--kl-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #26292b;
}
.kl-about__figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-about__figure--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  /* deckend, damit die grüne Deko-Form dahinter nicht durchscheint */
  background: #1f2224;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 860px) {
  /* Untereinander: erst der Text, dann das Foto. Hochkant 4:5 wäre auf dem
     Handy fast bildschirmfüllend — deshalb dort flacher. */
  .kl-about { grid-template-columns: 1fr; }
  .kl-about__figure { aspect-ratio: 4 / 3; }
}

.kl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 2.6vw, 28px);
}
.kl-card {
  position: relative;
  padding: 32px;
  border-radius: var(--kl-radius);
  background: var(--kl-dark);
  overflow: hidden;
}
.kl-card__num {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 68px;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.02em;
  /* Füllung = Hintergrund der Karte, siehe Erklärung bei .kl-outline-text */
  color: var(--kl-dark);
  -webkit-text-stroke-width: 0.037em;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.2);
  paint-order: stroke fill;
}
/* padding-right hält den Titel frei von der großen Konturziffer oben rechts. */
.kl-card__title { position: relative; margin-bottom: 10px; padding-right: 62px; font-size: 21px; font-weight: 400; }
.kl-card__desc { position: relative; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); }

.kl-why { display: flex; flex-direction: column; }
.kl-why__row {
  display: grid;
  grid-template-columns: auto 1fr 1.6fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.kl-why__row .kl-arrow {
  width: clamp(20px, 2.2vw, 30px);
  height: clamp(20px, 2.2vw, 30px);
  margin-top: 6px;
}
.kl-why__title { font-size: clamp(22px, 2.8vw, 32px); font-weight: 300; }
.kl-why__desc { max-width: 62ch; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.68); }
.kl-why__end { border-top: 1px solid rgba(255, 255, 255, 0.14); }

@media (max-width: 700px) {
  .kl-why__row { grid-template-columns: auto 1fr; }
  .kl-why__desc { grid-column: 2; }
}

/* 10. Kontakt & Formular -------------------------------------------------- */

.kl-contact { padding-bottom: clamp(80px, 11vw, 150px); }
.kl-contact__watermark {
  /* Füllung = Hintergrund der grauen Kontaktsektion */
  --kl-outline-fill: var(--kl-grey);
  /* dieses Wort wird größer gesetzt als das Footer-Wortzeichen */
  --kl-outline-stroke-w: 0.009em;
  position: absolute;
  z-index: 0;
  top: clamp(8px, 2vw, 32px);
  left: -1vw;
  font-size: clamp(80px, 15vw, 240px);
  line-height: 0.8;
  white-space: nowrap;
}
.kl-contact__grid {
  position: relative;
  z-index: 1;
  max-width: var(--kl-max);
  margin: 0 auto;
  padding-top: clamp(48px, 8vw, 130px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  align-items: stretch;
}
.kl-contact__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--kl-radius);
  background: var(--kl-dark);
  overflow: hidden;
}
.kl-contact__card .kl-h2 { font-size: clamp(32px, 4.2vw, 54px); margin-bottom: 16px; }
.kl-contact__intro { position: relative; }
.kl-contact__lead { max-width: 38ch; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.kl-contact__blob {
  top: -6vw;
  right: -8vw;
  width: 30vw;
  height: 30vw;
  max-width: 380px;
  max-height: 380px;
  background: rgba(124, 212, 0, 0.13);
}
.kl-contact__list { position: relative; display: flex; flex-direction: column; }
.kl-contact__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--kl-white);
  font-size: 17px;
  transition: padding-left 0.3s ease, color 0.25s ease;
}
a.kl-contact__row:hover { padding-left: 8px; color: var(--kl-green); }
.kl-contact__row--static { color: rgba(255, 255, 255, 0.72); border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.kl-contact__lang { margin-top: 24px; font-size: 15px; line-height: 1.4; color: var(--kl-green); }
.kl-contact__row .kl-arrow { width: 15px; height: 15px; }

.kl-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--kl-radius);
  background: rgba(22, 22, 22, 0.4);
}
.kl-form__head { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.kl-form__head-row { display: flex; align-items: center; gap: 12px; }
.kl-form__head h2 { font-size: clamp(21px, 2.4vw, 28px); font-weight: 300; }
.kl-form__head p { margin-top: 10px; font-size: 15px; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.kl-form__head .kl-arrow { width: 17px; height: 17px; }

.kl-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.kl-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.kl-field input,
.kl-field select,
.kl-field textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--kl-radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--kl-white);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.kl-field textarea { resize: vertical; min-height: 118px; }
.kl-field select option { background: var(--kl-dark); color: var(--kl-white); }
.kl-field input::placeholder,
.kl-field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.kl-field input:focus,
.kl-field select:focus,
.kl-field textarea:focus {
  outline: none;
  border-color: var(--kl-green);
  box-shadow: 0 0 0 3px rgba(124, 212, 0, 0.16);
}

.kl-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kl-file__btn {
  padding: 13px 22px;
  border-radius: var(--kl-radius);
  background: rgba(255, 255, 255, 0.16);
  color: var(--kl-white);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.kl-file__btn:hover { background: rgba(255, 255, 255, 0.26); }
.kl-file input[type="file"] { display: none; }
.kl-file__label { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.kl-file__label.is-error { color: #ff8f6b; }

.kl-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
.kl-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--kl-green); flex-shrink: 0; }

.kl-form__hint { margin-top: 14px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

.kl-form__status { display: none; padding: 16px; border-radius: var(--kl-radius); font-size: 15px; line-height: 1.45; }
.kl-form__status.is-visible { display: block; }
.kl-form__status.is-success { background: rgba(124, 212, 0, 0.16); border: 1px solid var(--kl-green); color: var(--kl-white); }
.kl-form__status.is-error { background: rgba(255, 100, 60, 0.14); border: 1px solid #ff8f6b; color: var(--kl-white); }

/* Erfolgsmeldung nach Absenden ohne JavaScript. */
.kl-thanks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  height: 100%;
  padding: 44px;
  border-radius: var(--kl-radius);
  background: var(--kl-dark);
}
.kl-thanks .kl-arrow { width: 34px; height: 34px; }
.kl-thanks p { max-width: 30ch; font-size: 24px; font-weight: 300; }

/* 11. Footer -------------------------------------------------------------- */

.kl-footer {
  position: relative;
  padding: clamp(56px, 8vw, 90px) var(--kl-pad-x) 32px;
  background: var(--kl-dark);
  border-top: 3px solid var(--kl-green);
  overflow: hidden;
}
.kl-footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.kl-footer__col { flex: 1 1 240px; }
.kl-footer__col--brand { flex: 1 1 300px; }
.kl-footer__brand { display: flex; align-items: center; margin-bottom: 18px; }
.kl-footer__brand img { height: 72px; width: auto; display: block; }
.kl-footer__claim { max-width: 38ch; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
.kl-footer__title {
  margin-bottom: 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.kl-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.78);
}
.kl-footer__links a { color: var(--kl-white); }
.kl-footer__links a:hover { color: var(--kl-green); }
.kl-footer__social { display: flex; gap: 12px; }
.kl-footer__social a {
  width: 44px;
  height: 44px;
  border-radius: var(--kl-radius);
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kl-white);
  transition: background 0.25s ease, color 0.25s ease;
}
.kl-footer__social a:hover { background: var(--kl-green); color: var(--kl-dark); }
.kl-footer__social svg { width: 19px; height: 19px; display: block; }
.kl-footer__wordmark {
  /* Füllung = Hintergrund des Footers */
  --kl-outline-fill: var(--kl-dark);
  margin: 36px 0 22px;
  font-size: clamp(40px, 10.5vw, 160px);
  /* Zeilenabstand > 0.82, damit sich bei zwei Zeilen die Konturen der
     Ober- und Unterzeile nicht berühren. */
  line-height: 0.95;
}
.kl-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kl-footer__bottom span,
.kl-footer__bottom a { font-size: 14px; color: rgba(255, 255, 255, 0.4); }
.kl-footer__bottom a:hover { color: var(--kl-green); }
.kl-footer__meta { display: flex; gap: 24px; flex-wrap: wrap; }

/* 12. Rechtstexte --------------------------------------------------------- */

.kl-legal { max-width: 820px; }
.kl-legal h2 {
  margin: 44px 0 14px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 300;
  color: var(--kl-green);
}
.kl-legal h3 { margin: 26px 0 10px; font-size: 18px; font-weight: 400; }
.kl-legal p,
.kl-legal li { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.kl-legal p { margin-bottom: 14px; }
.kl-legal ul { margin: 0 0 14px; padding-left: 20px; }
.kl-legal li { margin-bottom: 8px; }