/* ==========================================================================
   kyberio.com — Site-Ebene über dem Design-System (kyb-ds.css)
   Gleiche Sprache: Fläche und Linie, keine Radien, keine Schatten,
   Neon als einziger Akzent, Mono für Kicker und Label.
   Reines Dunkel-Schema (Entscheidung 01.09.2026, siehe OFFENE-PUNKTE 33).
   ========================================================================== */

/* ---- Kopfbereich der Seite ---- */
.k-hero { padding-block: clamp(var(--s7), 9vw, var(--s9)) var(--s7); }
.k-hero__sub { margin-top: var(--s4); }

/* ---- Navigation ---- */
.k-nav__links { display: none; gap: var(--s6); align-items: center; }
.k-nav__links a {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--kyb-text-2); text-decoration: none; padding-block: var(--s1);
  border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t);
}
.k-nav__links a:hover { color: var(--kyb-white); }
.k-nav__links a[aria-current="true"] { color: var(--kyb-white); border-bottom-color: var(--kyb-neon); }

/* Souveränität: rechts abgesetzt, in Akzentfarbe */
.k-nav__accent {
  display: none; margin-left: auto;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--kyb-neon); text-decoration: none;
  padding: var(--s1) var(--s3); border: 1px solid var(--kyb-neon);
  transition: background var(--t), color var(--t);
}
.k-nav__accent:hover { background: var(--kyb-neon); color: var(--kyb-stage); }

.k-nav__toggle {
  background: transparent; border: 1px solid var(--kyb-line-strong); color: var(--kyb-text);
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  padding: var(--s1) var(--s3); cursor: pointer;
}
.k-nav__mobile { display: grid; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--kyb-line); }
.k-nav__mobile a { font-family: var(--mono); font-size: .86rem; color: var(--kyb-text-2); text-decoration: none; }
.k-nav__mobile a.is-accent { color: var(--kyb-neon); }
.k-nav__mobile[hidden] { display: none; }

@media (min-width: 1000px) {
  .k-nav__links { display: flex; }
  .k-nav__accent { display: inline-block; }
  .k-nav__toggle, .k-nav__mobile { display: none; }
}

/* ---- Partner-Störer: statisches Band, kein Overlay, keine Sticky-Bar ---- */
.k-stoerer { border-block: 1px solid var(--kyb-line); background: var(--kyb-stage-2); }
.k-stoerer__in {
  display: grid; gap: var(--s4); padding-block: var(--s6);
  border-left: 2px solid var(--kyb-neon); padding-left: var(--s5);
}
.k-stoerer__hl { font-weight: 600; color: var(--kyb-white); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.15; letter-spacing: -.018em; max-width: 24ch; }
.k-stoerer__sub { color: var(--kyb-text-2); max-width: 62ch; }
@media (min-width: 900px) {
  .k-stoerer__in { grid-template-columns: 1fr auto; align-items: center; }
  .k-stoerer__cta { justify-self: end; }
}

/* ---- Bausteine ---- */
.k-set + .k-set { margin-top: clamp(var(--s7), 7vw, var(--s9)); }
.k-set__head { margin-bottom: var(--s5); }

/* Textblock */
.k-text__body > * + * { margin-top: var(--s3); }
.k-text__body h2, .k-text__body h3 { color: var(--kyb-white); font-weight: 600; letter-spacing: -.018em; }
.k-text__body ul { list-style: none; display: grid; gap: var(--s2); }
.k-text__body ul > li { padding-left: var(--s3); border-left: 2px solid var(--kyb-neon); color: var(--kyb-text-2); }
.k-text__body ol { padding-left: var(--s4); color: var(--kyb-text-2); }
.k-text__body a { color: var(--kyb-neon); }

/* Leistungsraster */
.k-grid { display: grid; gap: 1px; background: var(--kyb-line); }
@media (min-width: 640px) { .k-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .k-grid { grid-template-columns: repeat(3, 1fr); } }
.k-grid__item { background: var(--kyb-stage); padding: var(--s5); border-top: 3px solid var(--kyb-anthracite); transition: border-color var(--t), background var(--t); }
.k-grid__item:hover { border-top-color: var(--kyb-neon); background: var(--kyb-stage-2); }
.k-grid__item h3 { margin-bottom: var(--s2); }
.k-grid__item p { color: var(--kyb-text-2); }
.k-grid__item a { display: inline-block; margin-top: var(--s3); color: var(--kyb-neon); font-family: var(--mono); font-size: .8rem; text-decoration: none; }
.k-grid__item a:hover { text-decoration: underline; }

/* Beweisleiste */
.k-proof { display: grid; gap: 1px; background: var(--kyb-line); border-block: 1px solid var(--kyb-line); }
@media (min-width: 560px) { .k-proof { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .k-proof { grid-template-columns: repeat(4, 1fr); } }
.k-proof__item { background: var(--kyb-stage); padding: var(--s5) var(--s4); }
.k-proof__v { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--kyb-neon); display: block; }
.k-proof__l { color: var(--kyb-text-3); font-size: .88rem; margin-top: var(--s1); display: block; }

/* Zitat */
.k-quote { border-left: 2px solid var(--kyb-neon); padding-left: var(--s5); }
.k-quote__q { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.35; color: var(--kyb-white); font-weight: 300; max-width: 44ch; }
.k-quote__by { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s3); }
.k-quote__nm { color: var(--kyb-white); font-weight: 600; }
.k-quote__rl { color: var(--kyb-text-3); font-family: var(--mono); font-size: .8rem; }
.k-quote__logo img { max-height: 28px; width: auto; }

/* Fragen und Antworten */
.k-faq { display: grid; }
.k-faq__item { border-top: 1px solid var(--kyb-line); }
.k-faq__item:last-child { border-bottom: 1px solid var(--kyb-line); }
.k-faq__q {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  color: var(--kyb-white); font-family: var(--font); font-weight: 600; font-size: 1.05rem;
  padding-block: var(--s4); display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline;
}
.k-faq__q::after { content: "+"; color: var(--kyb-neon); font-family: var(--mono); }
.k-faq__item[open] .k-faq__q::after { content: "–"; }
.k-faq__a { color: var(--kyb-text-2); padding-bottom: var(--s4); max-width: 68ch; }
.k-faq__a > * + * { margin-top: var(--s2); }

/* Handlungsaufforderung */
.k-cta { border-top: 3px solid var(--kyb-neon); background: var(--kyb-surface); padding: clamp(var(--s5), 4vw, var(--s7)); display: grid; gap: var(--s4); }
.k-cta__hl { color: var(--kyb-white); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12; letter-spacing: -.02em; max-width: 22ch; }
.k-cta__tx { color: var(--kyb-text-2); max-width: 60ch; }
@media (min-width: 900px) { .k-cta { grid-template-columns: 1fr auto; align-items: center; } .k-cta__btn { justify-self: end; } }

/* Tabelle */
.k-tablewrap { overflow-x: auto; }
.k-table { width: 100%; border-collapse: collapse; font-size: .96rem; }
.k-table th, .k-table td { text-align: left; padding: var(--s3); border-top: 1px solid var(--kyb-line); }
.k-table thead th { color: var(--kyb-text-3); font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; border-top: 0; }
.k-table tbody tr:last-child td { border-bottom: 1px solid var(--kyb-line); }
.k-table td { color: var(--kyb-text-2); }
.k-caption { color: var(--kyb-text-3); font-family: var(--mono); font-size: .76rem; margin-top: var(--s2); }

/* Bild */
.k-img--wide { max-width: none; }
.k-img figure { border-top: 3px solid var(--kyb-anthracite); }
.k-img img { width: 100%; height: auto; }
.k-img figcaption { color: var(--kyb-text-3); font-family: var(--mono); font-size: .76rem; margin-top: var(--s2); }

/* Code */
.k-code { background: var(--kyb-stage-2); border-top: 3px solid var(--kyb-anthracite); padding: var(--s4); overflow-x: auto; }
.k-code pre, .k-code code { font-family: var(--mono); font-size: .86rem; color: var(--kyb-text-2); white-space: pre; }

/* Logo-Reihe: weiß freigestellte Logos auf der dunklen Bühne */
.k-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s6); align-items: center; }
@media (min-width: 640px) { .k-logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .k-logos { grid-template-columns: repeat(6, 1fr); } }
.k-logos img { max-height: 30px; max-width: 130px; width: auto; object-fit: contain; opacity: .78; transition: opacity var(--t); }
.k-logos img:hover { opacity: 1; }

/* ---- Fußzeile ---- */
.k-footer { border-top: 1px solid var(--kyb-line); margin-top: clamp(var(--s7), 8vw, var(--s9)); padding-block: var(--s7) var(--s5); }
.k-footer__cols { display: grid; gap: var(--s6); }
@media (min-width: 760px) { .k-footer__cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.k-footer h2 { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--kyb-text-3); margin-bottom: var(--s3); }
.k-footer nav { display: grid; gap: var(--s2); }
.k-footer a { color: var(--kyb-text-2); text-decoration: none; font-size: .92rem; }
.k-footer a:hover { color: var(--kyb-white); }
.k-footer__brand img { display: block; height: 24px; width: auto; }
.k-footer__meta { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--kyb-line); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.k-footer__cp { font-family: var(--mono); font-size: .76rem; color: var(--kyb-text-3); }

/* ---- Nur für die lokalen Entwicklungsseiten ---- */
.k-devnote { border-left: 2px solid var(--kyb-danger); padding: var(--s3) var(--s4); background: var(--kyb-stage-2); color: var(--kyb-text-2); font-family: var(--mono); font-size: .8rem; margin-bottom: var(--s6); }
.k-devlabel { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--kyb-text-3); border-bottom: 1px solid var(--kyb-line); padding-bottom: var(--s2); margin-bottom: var(--s4); }

/* ==========================================================================
   Bausteine aus dem WordPress-Bestand (Phase 3, zweiter Durchgang)
   ========================================================================== */

/* Flächenton: erzeugt den Rhythmus, den früher der Wechsel hell/dunkel machte */
.k-set--stage_2 { background: var(--kyb-stage-2); padding: clamp(var(--s5), 4vw, var(--s7)); }
.k-set--surface { background: var(--kyb-surface); padding: clamp(var(--s5), 4vw, var(--s7)); }

.k-kicker + .k-h { margin-top: var(--s2); }
.k-h { color: var(--kyb-white); font-weight: 600; letter-spacing: -.022em; line-height: 1.08; font-size: clamp(1.8rem, 3.6vw, 2.9rem); }

/* Zwei Textspalten */
.k-cols { display: grid; gap: var(--s6); }
.k-cols > div > * + * { margin-top: var(--s3); }
.k-cols a { color: var(--kyb-neon); }
@media (min-width: 860px) {
  .k-cols--50_50 { grid-template-columns: 1fr 1fr; }
  .k-cols--66_33 { grid-template-columns: 2fr 1fr; }
}

/* Text und Bild */
.k-ti { display: grid; gap: var(--s6); align-items: center; }
.k-ti__body > * + * { margin-top: var(--s3); }
.k-ti__body a { color: var(--kyb-neon); }
.k-ti__media img { width: 100%; height: auto; }
.k-ti__media { border-top: 3px solid var(--kyb-anthracite); }
@media (min-width: 860px) {
  .k-ti--two_thirds { grid-template-columns: 2fr 1fr; }
  .k-ti--giant { grid-template-columns: 1fr 1fr; }
  .k-ti--left .k-ti__media { order: -1; }
}
.k-ti--full { display: block; position: relative; }
.k-ti--full .k-ti__media { margin-bottom: var(--s5); }

/* Abschnittskopf */
.k-sechead { border-top: 2px solid var(--kyb-neon); padding-top: var(--s5); }
.k-sechead__h { color: var(--kyb-white); font-weight: 600; letter-spacing: -.024em; line-height: 1.04; font-size: clamp(2rem, 4.4vw, 3.4rem); max-width: 20ch; }
.k-sechead__t { color: var(--kyb-text-2); max-width: 62ch; margin-top: var(--s4); }
.k-btnrow { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* Ablauf */
.k-steps { display: grid; gap: 1px; background: var(--kyb-line); }
@media (min-width: 760px) { .k-steps { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.k-steps__item { background: var(--kyb-stage); padding: var(--s5); }
.k-steps__n { font-family: var(--mono); font-size: .78rem; color: var(--kyb-neon); letter-spacing: .14em; }
.k-steps__item h3 { color: var(--kyb-white); font-weight: 600; margin-block: var(--s2); }
.k-steps__item p { color: var(--kyb-text-2); }

/* Zeitleiste */
.k-timeline { display: grid; gap: 0; }
.k-timeline__item { display: grid; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--kyb-line); }
.k-timeline__item:last-child { border-bottom: 1px solid var(--kyb-line); }
@media (min-width: 700px) { .k-timeline__item { grid-template-columns: 120px 1fr; gap: var(--s5); } }
.k-timeline__y { font-family: var(--mono); font-weight: 600; color: var(--kyb-neon); font-variant-numeric: tabular-nums; }
.k-timeline__item h3 { color: var(--kyb-white); font-weight: 600; }
.k-timeline__item p { color: var(--kyb-text-2); margin-top: var(--s1); }

/* Karten */
.k-cards { display: grid; gap: 1px; background: var(--kyb-line); }
.k-cards--2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .k-cards--2 { grid-template-columns: repeat(2, 1fr); } .k-cards--3, .k-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .k-cards--3 { grid-template-columns: repeat(3, 1fr); } .k-cards--4 { grid-template-columns: repeat(4, 1fr); } }
.k-cards__item { background: var(--kyb-stage); padding: var(--s5); border-top: 3px solid var(--kyb-anthracite); transition: border-color var(--t), background var(--t); }
.k-cards__item:hover { border-top-color: var(--kyb-neon); background: var(--kyb-stage-2); }
.k-cards--center .k-cards__item { text-align: center; }
.k-cards__item img { max-height: 48px; width: auto; margin-bottom: var(--s3); }
.k-cards--center .k-cards__item img { margin-inline: auto; }
.k-cards__item h3 { color: var(--kyb-white); font-weight: 600; }
.k-cards__item p { color: var(--kyb-text-2); margin-top: var(--s2); }
.k-cards__item a { display: inline-block; margin-top: var(--s3); color: var(--kyb-neon); font-family: var(--mono); font-size: .8rem; text-decoration: none; }

/* Reiter */
.k-tabs__nav { display: flex; flex-wrap: wrap; gap: var(--s5); border-bottom: 1px solid var(--kyb-line); }
.k-tabs__btn { background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
  font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: var(--kyb-text-3); padding-block: var(--s3); }
.k-tabs__btn[aria-selected="true"] { color: var(--kyb-white); border-bottom-color: var(--kyb-neon); }
.k-tabs__panel { padding-top: var(--s5); display: grid; gap: var(--s5); }
.k-tabs__panel[hidden] { display: none; }
.k-tabs__panel > div > * + * { margin-top: var(--s3); }
@media (min-width: 860px) { .k-tabs__panel--img { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Bilderstrecke */
/* Bilderstrecke: Raster statt Querscroller — alle Bilder sind sichtbar,
   gleich hoch zugeschnitten, ohne waagerechte Scrollleiste (18.09.2026). */
.k-slider { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3); }
.k-slider > * { min-width: 0; }
.k-slider img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-top: 3px solid var(--kyb-anthracite); }

/* Zertifikate */
.k-certs { display: grid; gap: 1px; background: var(--kyb-line); }
@media (min-width: 700px) { .k-certs { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.k-certs__item { background: var(--kyb-stage); padding: var(--s5); border-top: 3px solid var(--kyb-neon); }
.k-certs__nm { color: var(--kyb-white); font-weight: 600; }
.k-certs__no { font-family: var(--mono); font-size: .82rem; color: var(--kyb-neon); margin-top: var(--s1); }
.k-certs__sc { color: var(--kyb-text-2); font-size: .9rem; margin-top: var(--s2); }

/* Standorte */
.k-locs { display: grid; }
.k-locs__item { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; padding-block: var(--s3); border-top: 1px solid var(--kyb-line); }
.k-locs__item:last-child { border-bottom: 1px solid var(--kyb-line); }
.k-locs__code { font-family: var(--mono); font-size: .82rem; color: var(--kyb-neon); }
.k-locs__city { color: var(--kyb-white); font-weight: 600; }
.k-locs__note { color: var(--kyb-text-3); text-align: right; }

/* Ansprechperson */
.k-person { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.k-person__photo { width: 88px; height: 88px; flex-shrink: 0; overflow: hidden; border-top: 3px solid var(--kyb-neon); background: var(--kyb-card); }
.k-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.k-person__nm { color: var(--kyb-white); font-weight: 600; font-size: 1.1rem; }
.k-person__rl { color: var(--kyb-text-3); font-family: var(--mono); font-size: .82rem; margin-top: 2px; }
.k-person__ct { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.k-person__ct a { color: var(--kyb-neon); font-family: var(--mono); font-size: .84rem; text-decoration: none; }
.k-person__ct a:hover { text-decoration: underline; }

/* Kontaktkästen */
.k-boxes { display: grid; gap: 1px; background: var(--kyb-line); }
@media (min-width: 760px) { .k-boxes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.k-boxes__item { background: var(--kyb-stage); padding: var(--s5); border-top: 3px solid var(--kyb-anthracite); }
.k-boxes__item h3 { color: var(--kyb-white); font-weight: 600; }
.k-boxes__item p { color: var(--kyb-text-2); margin-top: var(--s2); }
.k-boxes__item a { color: var(--kyb-neon); font-family: var(--mono); font-size: .84rem; text-decoration: none; display: block; margin-top: var(--s2); }

/* Formular-Einbindung */
.k-formblock { background: var(--kyb-surface); border-top: 3px solid var(--kyb-anthracite); padding: clamp(var(--s5), 4vw, var(--s7)); }

/* Hinweisleiste */
.k-hinweis { border: 1px solid var(--kyb-neon); padding: var(--s5); display: grid; gap: var(--s4); }
.k-hinweis h2 { color: var(--kyb-white); font-weight: 600; font-size: 1.3rem; }
.k-hinweis p { color: var(--kyb-text-2); }
@media (min-width: 860px) { .k-hinweis { grid-template-columns: 1fr auto; align-items: center; } }

/* Beitragsübersicht */
.k-posts { display: grid; gap: 1px; background: var(--kyb-line); }
@media (min-width: 760px) { .k-posts { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.k-posts__item { background: var(--kyb-stage); padding: var(--s5); border-top: 3px solid var(--kyb-anthracite); text-decoration: none; display: block; transition: border-color var(--t), background var(--t); }
.k-posts__item:hover { border-top-color: var(--kyb-neon); background: var(--kyb-stage-2); }
.k-posts__d { font-family: var(--mono); font-size: .76rem; color: var(--kyb-text-3); }
.k-posts__t { color: var(--kyb-white); font-weight: 600; margin-top: var(--s2); }
.k-posts__x { color: var(--kyb-text-2); margin-top: var(--s2); font-size: .94rem; }
.k-empty { color: var(--kyb-text-3); font-family: var(--mono); font-size: .82rem; border-left: 2px solid var(--kyb-line-strong); padding-left: var(--s3); }

/* Kopfbereich und erster Baustein stapelten zwei volle Abstände übereinander */
.k-hero + .kyb-sec { padding-top: var(--s5); }

/* Formulare */
.k-formfehler { border-left: 2px solid var(--kyb-danger); padding: var(--s3) var(--s4); background: var(--kyb-stage); margin-bottom: var(--s5); color: var(--kyb-text-2); }
.k-formfehler ul { list-style: none; margin-top: var(--s2); display: grid; gap: 4px; }
.k-formfehler li { color: var(--kyb-danger); font-size: .9rem; }

/* ==========================================================================
   Kopfbereich, Gliederungsmittel und Korrekturen (01.09.2026)
   ========================================================================== */

/* ---- Aufzählungen: Neon-Kante statt Aufzählungszeichen ----
   Galt bisher nur im Textblock. Damit standen die Listen in Textspalten,
   Reitern und Karten mit gewöhnlichen Punkten da. */
.k-text__body ul,
.k-cols ul,
.k-ti__body ul,
.k-tabs__panel ul,
.k-faq__a ul,
.k-sechead__t ul {
  list-style: none; display: grid; gap: var(--s2); padding-left: 0;
}
.k-text__body ul > li,
.k-cols ul > li,
.k-ti__body ul > li,
.k-tabs__panel ul > li,
.k-faq__a ul > li,
.k-sechead__t ul > li {
  padding-left: var(--s3); border-left: 2px solid var(--kyb-neon); color: var(--kyb-text-2);
}
.k-cols ul > li strong,
.k-ti__body ul > li strong { display: block; color: var(--kyb-white); font-weight: 600; }
.k-cols ol, .k-ti__body ol, .k-tabs__panel ol { padding-left: var(--s4); color: var(--kyb-text-2); }
.k-cols a, .k-tabs__panel a { color: var(--kyb-neon); }

/* ---- Kopfbereich: Bildkarte neben dem Text ---- */
.k-hero__grid { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) { .k-hero__grid--mit-bild { grid-template-columns: 5fr 7fr; gap: var(--s7); } }
.k-hero__media { border-top: 3px solid var(--kyb-neon); background: var(--kyb-stage-2); position: relative; }
.k-hero__media img { width: 100%; height: auto; display: block; }
.k-hero__h { color: var(--kyb-white); font-weight: 600; letter-spacing: -.026em; line-height: 1.02;
  font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
.k-hero__lead { font-weight: 300; color: var(--kyb-text-2); font-size: clamp(1.08rem, 1.5vw, 1.28rem);
  line-height: 1.55; max-width: 60ch; margin-top: var(--s4); }
.k-hero .k-btnrow { margin-top: var(--s6); }

/* ---- Vertrauensleiste ---- */
.k-trust { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); align-items: center;
  padding-top: var(--s5); border-top: 1px solid var(--kyb-line); margin-top: var(--s6); }
.k-trust__item { display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--kyb-text-2); }
.k-trust__item::before { content: ""; width: 8px; height: 8px; background: var(--kyb-neon); flex-shrink: 0; }

/* ---- Anker-Menü unter dem Kopfbereich ---- */
.k-anchornav { display: none; gap: var(--s6); padding-block: var(--s3);
  border-block: 1px solid var(--kyb-line); }
.k-anchornav a { font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--kyb-text-3); text-decoration: none; transition: color var(--t); }
.k-anchornav a:hover { color: var(--kyb-neon); }
/* Nur zeigen, wenn es wirklich etwas zu springen gibt — ein einzelner
   Eintrag ist kein Menü, sondern Rauschen. */
@media (min-width: 860px) { .k-anchornav:has(a:nth-of-type(2)) { display: flex; } }

/* ---- Kapitelkopf ---- */
.k-chapter { display: grid; gap: var(--s3); padding-top: var(--s5); border-top: 2px solid var(--kyb-line-strong); }
@media (min-width: 760px) { .k-chapter { grid-template-columns: 90px 1fr; gap: var(--s6); } }
.k-chapter__no { font-family: var(--mono); font-weight: 600; font-size: 1.1rem; color: var(--kyb-neon);
  font-variant-numeric: tabular-nums; }
.k-chapter__h { color: var(--kyb-white); font-weight: 600; letter-spacing: -.022em; line-height: 1.08;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); max-width: 22ch; }
.k-chapter__t { color: var(--kyb-text-2); max-width: 64ch; margin-top: var(--s3); }

/* ---- Große Zahlen ---- */
.k-proof--gross { grid-template-columns: 1fr; background: transparent; border: 0; gap: var(--s6); }
@media (min-width: 700px) { .k-proof--gross { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.k-proof--gross .k-proof__item { background: transparent; padding: 0; border-top: 2px solid var(--kyb-neon); padding-top: var(--s4); }
.k-proof--gross .k-proof__v { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.02em; }
.k-proof--gross .k-proof__l { font-size: .92rem; margin-top: var(--s3); }

/* ---- Laufende Logo-Leiste ---- */
.k-marquee { overflow: hidden; position: relative; padding-block: var(--s4);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.k-marquee__track { display: flex; width: max-content; animation: k-lauf 42s linear infinite; }
.k-marquee:hover .k-marquee__track { animation-play-state: paused; }
.k-marquee img { max-height: 30px; width: auto; opacity: .78; }
@keyframes k-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .k-marquee { mask-image: none; overflow-x: auto; }
  .k-marquee__track { animation: none; }
}

/* ---- Klebriger Handlungsaufruf auf dem Telefon ---- */
.k-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(23,23,31,.94); border-top: 1px solid var(--kyb-line);
  padding: 12px var(--pad); display: flex; gap: 12px; }
.k-sticky .kyb-btn { flex: 1; justify-content: center; }
@media (min-width: 760px) { .k-sticky { display: none; } }
/* Die Leiste liegt über dem Seitenende — ohne diesen Platz verdeckt sie die
   letzten Zeilen der Fußzeile. */
@media (max-width: 759px) { body:has(.k-sticky) { padding-bottom: 84px; } }

/* Zweistufige Kopfzeile: alles nach dem ersten Umbruch tritt zurück
   (Entscheidung 01.09.2026). Hervorhebungen bleiben davon unberührt. */
.k-hero__gedaempft { color: var(--kyb-text-2); }

/* ==========================================================================
   Kopfzeile und Kopfbereich nach dem Vorbild der Landingpages
   ========================================================================== */

/* ---- Kopfzeile: Marke links, Navigation mittig, Akzent rechts ---- */
.kyb-nav__in { justify-content: space-between; }
.k-nav__links { justify-content: center; flex: 1; }
.k-nav__accent {
  margin-left: 0; border: 0; color: var(--kyb-stage); background: var(--kyb-grad);
  font-weight: 600; padding: var(--s3) var(--s5); letter-spacing: .02em;
  transition: filter var(--t);
}
.k-nav__accent:hover { background: var(--kyb-grad); color: var(--kyb-stage); filter: brightness(1.08); }

/* ---- Bildkarte: Neon-Verlauf, Bild als Luminanz darüber, Abdunkler ---- */
.k-leit {
  background: var(--kyb-grad); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35);
  padding: var(--s5); display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--s5); min-height: 340px; position: relative; overflow: hidden; isolation: isolate;
}
.k-leit::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--k-leit-bild); background-position: center; background-size: cover;
  background-repeat: no-repeat; mix-blend-mode: luminosity;
}
.k-leit::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.62) 100%);
}
.k-leit > * { position: relative; z-index: 1; }
.k-leit__kicker { font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .2em; font-size: .8rem; color: #fff; opacity: .9; }
.k-leit__h { font-weight: 700; color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  line-height: 1.03; letter-spacing: -.03em; text-wrap: balance; }
.k-leit__a { font-weight: 500; font-size: clamp(1.02rem, 1.8vw, 1.24rem); line-height: 1.34; color: #fff;
  letter-spacing: -.01em; border-top: 1px solid rgba(255,255,255,.45); padding-top: var(--s3); }

/* ---- Zweispaltiger Kopfbereich ---- */
.k-hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: stretch; }
@media (min-width: 920px) {
  .k-hero__grid--mit-bild { grid-template-columns: minmax(300px, .74fr) 1fr; gap: var(--s7); }
}
.k-hero__copy { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); }
.k-hero__h { max-width: 20ch; }

/* Ohne zweite Spalte soll die Bildkarte nicht über die volle Breite laufen. */
.k-hero__grid:not(.k-hero__grid--mit-bild) .k-leit { max-width: 620px; }

/* ==========================================================================
   Unternavigation (Hover-Menü)
   Aufbau wie bei adacor.com: links Einführung, mittig die Punkte in Spalten,
   rechts ein aktueller Anreißer. Mittel sind unsere eigenen — Linien und
   Typografie statt Icons, die das Design-System nicht kennt.
   ========================================================================== */

.k-nav__item { position: static; }
.k-nav__links > .k-nav__item > a {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--kyb-text-2); text-decoration: none; padding-block: var(--s1);
  border-bottom: 2px solid transparent; transition: color var(--t), border-color var(--t);
}
/* Größere Trefferfläche ohne sichtbare Änderung (24.09.2026).
   „KI" war nur 22 px breit — als Ziel für Maus und Finger zu wenig, und
   das Aufklappmenü öffnet erst, wenn man es trifft. Eine Polsterung am
   Verweis würde die Abstände in der Leiste verschieben und die neongrüne
   Unterstreichung des aktiven Punktes mit verbreitern. Deshalb legt ein
   erzeugtes Kästchen die Fläche über den Verweis hinaus: Es zählt beim
   Überfahren wie der Verweis selbst, nimmt aber keinen Platz im Fluss ein. */
.k-nav__links > .k-nav__item > a { position: relative; }
.k-nav__links > .k-nav__item > a::before {
  content: ""; position: absolute; inset: -6px -18px; z-index: 0;
}
.k-nav__links > .k-nav__item > a:hover,
.k-nav__item:focus-within > a { color: var(--kyb-white); }
.k-nav__links > .k-nav__item > a[aria-current="true"] { color: var(--kyb-white); border-bottom-color: var(--kyb-neon); }
.k-nav__chev { transform: rotate(90deg); display: inline-block; transition: transform var(--t); opacity: .6; }
.k-nav__item:hover .k-nav__chev, .k-nav__item:focus-within .k-nav__chev { transform: rotate(-90deg); opacity: 1; }

/* Das Feld selbst: volle Breite unter der Kopfzeile */
.k-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--kyb-stage-2); border-bottom: 1px solid var(--kyb-line);
  box-shadow: none; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.k-nav__item:hover .k-mega,
.k-nav__item:focus-within .k-mega { opacity: 1; visibility: visible; transform: none; }

.k-mega__in { display: grid; gap: var(--s6); padding-block: var(--s6); align-items: start; }
@media (min-width: 1100px) { .k-mega__in { grid-template-columns: 250px 1fr 280px; gap: var(--s7); } }

.k-mega__h { color: var(--kyb-white); font-weight: 600; font-size: 1.15rem; }
.k-mega__t { color: var(--kyb-text-2); font-size: .92rem; margin-top: var(--s2); max-width: 34ch; }
.k-mega__all { display: inline-block; margin-top: var(--s4); color: var(--kyb-neon);
  font-family: var(--mono); font-size: .78rem; text-decoration: none; }
.k-mega__all:hover { text-decoration: underline; }

.k-mega__cols { display: grid; gap: var(--s3) var(--s6); grid-template-columns: 1fr; }
@media (min-width: 760px) { .k-mega__cols { grid-template-columns: 1fr 1fr; } }
.k-mega__group { display: grid; gap: var(--s2); align-content: start; }
.k-mega__grouphead { font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--kyb-text-3); text-decoration: none; padding-bottom: var(--s1);
  border-bottom: 1px solid var(--kyb-line); }
.k-mega__grouphead:hover { color: var(--kyb-neon); }

.k-mega__item { display: block; text-decoration: none; padding: var(--s2) var(--s3);
  border-left: 2px solid transparent; transition: border-color var(--t), background var(--t); }
.k-mega__item:hover { border-left-color: var(--kyb-neon); background: var(--kyb-card); }
.k-mega__nm { display: block; color: var(--kyb-white); font-weight: 600; font-size: .96rem; }
.k-mega__de { display: block; color: var(--kyb-text-3); font-size: .84rem; margin-top: 2px; }

.k-mega__teaser { display: block; text-decoration: none; background: var(--kyb-surface);
  border-top: 3px solid var(--kyb-anthracite); padding: var(--s4); transition: border-color var(--t); }
.k-mega__teaser:hover { border-top-color: var(--kyb-neon); }
.k-mega__tt { display: block; color: var(--kyb-white); font-weight: 600; margin-top: var(--s2); }
.k-mega__tx { display: block; color: var(--kyb-text-2); font-size: .88rem; margin-top: var(--s2); }
.k-mega__tl { display: block; color: var(--kyb-neon); font-family: var(--mono); font-size: .78rem; margin-top: var(--s3); }

/* Mobil: einfache Verschachtelung statt Feld */
.k-nav__mobilesub { display: grid; gap: var(--s2); padding: var(--s2) 0 var(--s3) var(--s4);
  border-left: 1px solid var(--kyb-line); margin-left: var(--s2); }
.k-nav__mobilesub a { font-size: .8rem; color: var(--kyb-text-3); }
@media (min-width: 1000px) { .k-mega { display: block; } }
@media (max-width: 999px) { .k-mega { display: none; } }

/* ==========================================================================
   Navigation in TT Commons statt Mono
   Mono erzwingt große Laufweiten und Schriftgrade. In der Fließschrift lässt
   sich das Menü kleiner und dichter setzen — näher am Vorbild.
   Mono bleibt dem Inhalt vorbehalten: Kicker, Kennzahlen, Label.
   ========================================================================== */

.k-nav__links > .k-nav__item > a {
  font-family: var(--font); font-weight: 500; font-size: .95rem; letter-spacing: -.005em;
  gap: .25rem;
}
.k-nav__chev { font-size: 1.05em; }

.k-nav__accent {
  font-family: var(--font); font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  padding: calc(var(--s2) + 2px) var(--s4);
}

.k-nav__toggle { font-family: var(--font); font-weight: 600; font-size: .85rem;
  text-transform: none; letter-spacing: 0; padding: var(--s2) var(--s3); }

.k-mega__h { font-size: 1.05rem; }
.k-mega__t { font-size: .88rem; line-height: 1.5; }
.k-mega__all { font-family: var(--font); font-weight: 600; font-size: .88rem; letter-spacing: -.005em; }

.k-mega__grouphead {
  font-family: var(--font); font-weight: 600; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--kyb-text-3);
}

.k-mega__item { padding: var(--s1) var(--s3); }
.k-mega__nm { font-size: .92rem; font-weight: 600; letter-spacing: -.005em; }
.k-mega__de { font-size: .8rem; line-height: 1.4; color: var(--kyb-text-3); margin-top: 1px; }

.k-mega__teaser .kyb-kicker {
  font-family: var(--font); font-weight: 600; font-size: .72rem; letter-spacing: .1em;
}
.k-mega__tt { font-size: .95rem; }
.k-mega__tx { font-size: .84rem; line-height: 1.45; }
.k-mega__tl { font-family: var(--font); font-weight: 600; font-size: .85rem; letter-spacing: -.005em; }

.k-nav__mobile a { font-family: var(--font); font-weight: 500; font-size: .98rem; letter-spacing: -.005em; }
.k-nav__mobilesub a { font-size: .88rem; font-weight: 400; }

/* Dichter setzen: mehr Punkte passen in eine Zeile */
.k-nav__links { gap: var(--s5); }
.k-mega__cols { gap: var(--s2) var(--s6); }
.k-mega__group { gap: var(--s1); }

/* Das Menüfeld darf breiter laufen als der Textinhalt — sonst bleiben für die
   Punktespalten nur gut 400 Pixel, und jeder zweite Titel bricht um. */
.k-mega .kyb-wrap { max-width: 1360px; }
@media (min-width: 1100px) {
  .k-mega__in { grid-template-columns: 220px 1fr 260px; gap: var(--s6); }
}

/* Das Menüfeld hing am 1200-Pixel-Container fest, weil `.kyb-wrap` selbst
   positioniert ist und damit der Bezugsrahmen wird. Es wird hier aus dem
   Container gelöst und über die volle Fensterbreite gezogen.
   Die Bewegung läuft dadurch nur über die Deckkraft — `transform` ist für
   die Zentrierung belegt. */
.k-mega {
  left: 50%; right: auto; width: 100vw; transform: translateX(-50%);
  transition: opacity var(--t), visibility var(--t);
}
.k-nav__item:hover .k-mega,
.k-nav__item:focus-within .k-mega { transform: translateX(-50%); }

/* Die Regel `.k-nav__links a` gilt für alle Verweise in der Navigation und
   überstimmt die einzelnen Menü-Regeln. Deshalb hier gesammelt und mit
   ausreichender Genauigkeit. */
.k-mega a { font-family: var(--font); letter-spacing: -.005em; }
.k-mega .k-mega__grouphead { letter-spacing: .1em; }
.k-mega .k-mega__de { letter-spacing: normal; font-weight: 400; }
.k-mega .k-mega__nm { letter-spacing: -.005em; }
.k-mega .k-mega__all { font-size: .88rem; }

/* ==========================================================================
   Metanavigation — klein, rechts oben, über der Hauptnavigation
   ========================================================================== */

.k-meta {
  display: none; justify-content: flex-end; align-items: center; gap: var(--s4);
  padding-block: 7px; border-bottom: 1px solid var(--kyb-line);
}
@media (min-width: 1000px) { .k-meta { display: flex; } }

.k-meta a,
.k-meta__btn {
  font-family: var(--font); font-weight: 400; font-size: .8rem; letter-spacing: -.003em;
  color: var(--kyb-text-3); text-decoration: none; background: none; border: 0; padding: 0;
  cursor: pointer; transition: color var(--t);
}
.k-meta a:hover, .k-meta__btn:hover { color: var(--kyb-white); }
.k-meta a span[aria-hidden] { font-size: .8em; opacity: .7; }

/* Login mit aufklappenden Zielen */
.k-meta__item { position: relative; display: inline-flex; }
.k-meta__btn { display: inline-flex; align-items: center; gap: .25rem; }
.k-meta__btn span { transform: rotate(90deg); display: inline-block; transition: transform var(--t); }
.k-meta__item:hover .k-meta__btn span,
.k-meta__item:focus-within .k-meta__btn span { transform: rotate(-90deg); }

.k-meta__drop {
  position: absolute; right: 0; top: 100%; min-width: 190px; display: grid;
  background: var(--kyb-surface); border-top: 2px solid var(--kyb-neon);
  padding: var(--s2) 0; opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
  z-index: 70;
}
.k-meta__item:hover .k-meta__drop,
.k-meta__item:focus-within .k-meta__drop { opacity: 1; visibility: visible; }
.k-meta__drop a { padding: 6px var(--s3); color: var(--kyb-text-2); }
.k-meta__drop a:hover { color: var(--kyb-white); background: var(--kyb-card); }

/* Die Hauptzeile rückt dadurch etwas zusammen */
.k-meta + .kyb-nav__in { height: 60px; }

/* Mobil hängt die Metanavigation unten im aufgeklappten Menü */
.k-nav__mobilemeta { display: grid; gap: var(--s2); margin-top: var(--s4);
  padding-top: var(--s3); border-top: 1px solid var(--kyb-line); }
.k-nav__mobilemeta a { font-family: var(--font); font-size: .86rem; color: var(--kyb-text-3); text-decoration: none; }
@media (min-width: 1000px) { .k-nav__mobilemeta { display: none; } }

/* Listen aus dem Bestand: das alte Theme setzte `class="arrow"` und ließ
   Elementor-Container stehen. Beides bekommt hier die Gestaltung unserer
   Listen, damit es nicht wie ein Fehler aussieht. */
.k-text__body ul.arrow, .k-cols ul.arrow, .k-ti__body ul.arrow, .k-tabs__panel ul.arrow {
  list-style: none; display: grid; gap: var(--s2); padding-left: 0;
}
.k-text__body ul.arrow > li, .k-cols ul.arrow > li,
.k-ti__body ul.arrow > li, .k-tabs__panel ul.arrow > li {
  padding-left: var(--s3); border-left: 2px solid var(--kyb-neon); color: var(--kyb-text-2);
}
/* Elementor-Hüllen tragen keine eigene Gestaltung mehr */
[class*="elementor-"] { all: unset; display: block; }
[class*="elementor-"] > * { all: revert; }

/* Kennzeichnung maschineller Übersetzung — zurückhaltend, aber auffindbar.
   Steht am Ende des Inhalts, vor dem Störer. */
.k-mtl { border-top: 1px solid var(--kyb-line); margin-top: var(--s7); padding-block: var(--s4); }
.k-mtl p { font-family: var(--mono); font-size: .76rem; color: var(--kyb-text-3);
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; }
.k-mtl p::before { content: ""; width: 6px; height: 6px; background: var(--kyb-text-3); flex: none; align-self: center; }
.k-mtl__d { opacity: .7; }

/* ---- Leistungskarten -------------------------------------------------
   Nach dem Vorbild der Landingpages: ein Raster, dessen Fugen die Linie
   durchscheinen lassen, und eine Oberkante, die beim Zeigen auf Neon
   umschlaegt. Die Fusszeilen liegen auf einer Linie, weil die Merkmale
   sich mit margin-top:auto nach unten schieben. */
.k-angebote { display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--kyb-line); border-block: 1px solid var(--kyb-line); margin-top: var(--s5); }
@media (min-width: 760px) { .k-angebote { grid-template-columns: 1fr 1fr; } }

.k-angebot { background: var(--kyb-stage); padding: var(--s5);
  border-top: 3px solid var(--kyb-anthracite);
  display: flex; flex-direction: column; gap: var(--s3);
  transition: border-color var(--t), background var(--t); }
.k-angebot:hover { border-top-color: var(--kyb-neon); background: rgba(255,255,255,.03); }

.k-angebot__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.k-angebot__top h3 { margin: 0; }

.k-angebot__badge { font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--kyb-stage); background: var(--kyb-grad);
  padding: 4px 9px; white-space: nowrap; flex: none; }

.k-angebot p { color: var(--kyb-text-2); font-size: .96rem; }

.k-angebot__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.k-angebot__chips span { font-family: var(--mono); font-size: .7rem; color: var(--kyb-text-2);
  border: 1px solid var(--kyb-line-strong); padding: 4px 8px; }

.k-angebot__foot { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3); border-top: 1px solid var(--kyb-line); padding-top: var(--s3); }
.k-angebot__preis { color: var(--kyb-white); margin: 0; }
.k-angebot__preis .num { font-family: var(--mono); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.k-angebot__preis small { font-family: var(--mono); font-size: .72rem;
  color: var(--kyb-text-3); margin-left: .35rem; }
.k-angebot__link { font-family: var(--mono); font-size: .78rem; color: var(--kyb-neon); white-space: nowrap; }

/* ---- Partnerband, kompakt --------------------------------------------
   Logoband mit Innenlinien. Das ausfuehrliche Verzeichnis hat einen
   eigenen Namensraum `k-pdir` und liegt in kyb-partner.css. */
.k-pv-kompakt { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--kyb-line); border-block: 1px solid var(--kyb-line); }
.k-pv-kompakt li { flex: 1 1 200px; background: var(--kyb-stage); padding: var(--s4) var(--s5);
  display: flex; align-items: center; min-height: 84px; }
.k-pv-kompakt__nm { font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--kyb-white); letter-spacing: -.01em; }
.k-pv-kompakt img { max-height: 36px; width: auto; }
.k-pv-kompakt__all { margin-top: var(--s4); }
.k-pv-kompakt__all a { font-family: var(--mono); font-size: .8rem; color: var(--kyb-neon); }

/* ======================================================================
   Startseite nach dem Vorbild von proxmox-live.html (14.09.2026)
   ====================================================================== */

/* ---- Kapitelband (g-band) --------------------------------------------
   Bricht aus dem Inhaltscontainer aus: volle Fensterbreite, Inhalt wieder
   auf Containerbreite. html schneidet horizontal ab, es entsteht kein
   Querscrollen. */
.k-bandsec { padding-top: 0; }
.k-band { width: 100vw; margin-left: calc(50% - 50vw); background: var(--kyb-grad); color: var(--kyb-stage); }
.k-band__in { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-block: var(--s3); }
.k-band__no { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--kyb-stage); line-height: 1; letter-spacing: -.01em; }
.k-band__ttl { font-family: var(--mono); font-weight: 600; text-transform: uppercase; letter-spacing: .24em;
  font-size: clamp(.74rem, 1.4vw, .9rem); color: var(--kyb-stage); }
.k-bandhead { max-width: 66ch; margin-top: clamp(var(--s7), 7vw, var(--s9)); }
.k-bandhead .kyb-lead { margin-top: var(--s3); }
/* Der Baustein nach einem Band gehört inhaltlich dazu — weniger Abstand. */
.k-bandsec + .k-set { margin-top: var(--s5); }

/* ---- Leistungen: Kicker ---------------------------------------------- */
.k-angebot__kicker { margin-bottom: var(--s2); }

/* ---- Karten mit Bild (Veranstaltungen) -------------------------------- */
.k-cards--bild .k-cards__item { display: flex; flex-direction: column; }
.k-cards--bild .k-cards__bild { margin: calc(var(--s5) * -1) calc(var(--s5) * -1) var(--s4); aspect-ratio: 4 / 3; overflow: hidden; background: var(--kyb-card); }
.k-cards--bild .k-cards__bild img { width: 100%; height: 100%; max-height: none; object-fit: contain; margin: 0; }
.k-cards--bild .k-cards__item > a:not(.k-cards__bild) { margin-top: auto; padding-top: var(--s3); }

/* ---- Leistungsraster: Schaltflächen ---------------------------------- */
.k-grid__btns { margin-top: var(--s5); }

/* ---- Logos ------------------------------------------------------------ */
.k-logohead { margin-bottom: var(--s3); }
.k-marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.k-marquee__grp { display: flex; align-items: center; gap: var(--s8); padding-right: var(--s8); flex: none; }
.k-marquee img { height: 30px; max-height: none; width: auto; opacity: .68; transition: opacity var(--t); }
.k-marquee img:hover { opacity: 1; }
/* Deckende Bestandslogos (weißer Grund, graues Logo): umfärben statt
   weißer Kästen. invert macht den Grund schwarz, screen blendet Schwarz aus. */
.k-logos--deckend img { filter: grayscale(1) invert(1) contrast(1.35); mix-blend-mode: screen; }
.k-marquee.k-logos--deckend img { height: 54px; }
.k-logos.k-logos--deckend img { max-height: 54px; }
@media (prefers-reduced-motion: reduce) {
  .k-marquee { -webkit-mask-image: none; mask-image: none; }
  .k-marquee__track { animation: none; width: auto; flex-wrap: wrap; }
  .k-marquee__grp { flex-wrap: wrap; justify-content: center; gap: var(--s5) var(--s7); padding-right: 0; }
  .k-marquee__grp:nth-child(2) { display: none; }
}
.k-siegel { gap: var(--s5); }
.k-siegel img { height: 88px; width: auto; }

/* ---- Kontakt: Person und Formular (g-conv) ---------------------------- */
.k-conv { display: grid; grid-template-columns: 1fr; gap: var(--s6); }
@media (min-width: 960px) { .k-conv { grid-template-columns: 1fr 1fr; align-items: start; } }
.k-conv__person { margin-top: var(--s5); align-items: flex-start; }
.k-conv__photo { width: 132px; height: 132px; border: 0; border-top: 3px solid var(--kyb-neon); overflow: hidden; }
.k-conv__photo img { width: 100%; height: 100%; object-fit: cover; }
.k-conv__ct { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s2); }
.k-conv__ct a { font-family: var(--mono); font-size: .84rem; color: var(--kyb-neon); text-decoration: none; }
.k-conv__ct a:hover { text-decoration: underline; }
.k-conv__zusagen { list-style: none; display: grid; gap: var(--s2); margin: var(--s5) 0 0; padding: 0; }
.k-conv__zusagen li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--kyb-text-2); font-size: .95rem; }
.k-conv__zusagen svg { width: 18px; height: 18px; color: var(--kyb-neon); margin-top: 2px; }

/* ---- Fugenraster ohne graue Restflaeche ---------------------------------
   Alle Raster mit 1-px-Fugen zeichnen die Linien als Schatten der Kacheln
   statt als Hintergrund des Rasters. Sonst erscheint eine unvollstaendige
   letzte Reihe (5 Punkte in 3 Spalten) als graue Flaeche. */
.k-grid, .k-cards, .k-angebote { background: transparent; }
.k-grid__item, .k-cards__item, .k-angebot { box-shadow: 0 0 0 1px var(--kyb-line); }

/* Verweise in der Bildkarte des Kopfbereichs */
.k-leit__a a { color: inherit; text-decoration: underline; text-decoration-color: var(--kyb-neon); text-underline-offset: 3px; }
.k-leit__a a:hover { color: var(--kyb-neon); }
.k-foot__claim { font-weight: 600; letter-spacing: -.01em;
  background: var(--kyb-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Claim und Beschreibung als ein Satz (16.09.2026): Claim im Verlauf, Rest weiß */
.k-foot__satz { margin-top: var(--s3); max-width: 38ch; font-size: 1.05rem; line-height: 1.5; color: var(--kyb-white); }

/* Das Herz im Fußzeilensatz schlägt — 60 Schläge pro Minute, also ein Zyklus je
   Sekunde. Nachgebildet ist der Doppelschlag („lub-dub"): kurzer kräftiger Schlag,
   kleiner Nachschlag, dann Ruhe bis zur nächsten Sekunde. Der Ausschlag bleibt
   bewusst klein, damit die Zeile nicht springt. */
.kyb-heart { animation: kybHerzschlag 1s ease-in-out infinite; transform-origin: 50% 55%; will-change: transform; }
@keyframes kybHerzschlag {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.09); }
  16%  { transform: scale(1.01); }
  24%  { transform: scale(1.06); }
  36%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .kyb-heart { animation: none; } }

/* ---- Kopfzeile größer (14.09.2026) ----------------------------------------
   Keine Linie zwischen Meta- und Hauptnavigation, größere Schrift und Marke. */
.k-meta { border-bottom: 0; }
.kyb-nav__in, .k-meta + .kyb-nav__in { height: 76px; }
.kyb-brand img { height: 32px; }
.k-nav__links { gap: var(--s7); }
.k-nav__links > .k-nav__item > a { font-size: 1.08rem; }
/* Flacher als die Textlinks wirkt unruhig, höher als die Leiste erdrückt sie:
   die senkrechte Polsterung hält den Knopf auf der Höhe der Navigationspunkte
   (23.09.2026). */
.k-nav__accent { font-size: 1.05rem; padding: 11px var(--s5); display: inline-flex; align-items: center; gap: .3rem; }
.k-nav__item--accent .k-nav__chev { opacity: .8; }
/* Metanavigation größer (14.09.2026) */
.k-meta { gap: var(--s5); padding-block: 10px; }
.k-meta a, .k-meta__btn { font-size: .95rem; color: var(--kyb-text-2); }
.k-meta__drop a { font-size: .92rem; }

/* ---- Sprachumschalter DE | EN (partials/sprachumschalter) --------------
   Gehört zu den Metaeinträgen, bleibt aber zurückhaltend: zwei Kürzel in
   JetBrains Mono, wie die übrigen kurzen Kennzeichnungen im Haus. Die aktive
   Sprache ist hell und kein Verweis, eine fehlende Übersetzung ist ausgegraut
   und ebenfalls kein Verweis. Der Akzent kommt nur in Hover und Tastaturfokus
   vor — die Leiste soll nicht grün blinken.

   Die Auswahl ist absichtlich zweiteilig (`> a` und `> span`, nicht `> *`):
   `.k-meta a` und `.k-nav__mobilemeta a` sind gleich genau und stünden sonst
   weiter oben in der Rangfolge. */
.k-sprachen { display: inline-flex; align-items: center; }
.k-sprachen > a,
.k-sprachen > span {
  font-family: var(--mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em;
  text-decoration: none; transition: color var(--t);
}
/* Trennstrich statt eines eingetippten „|": eine Linie liest keine
   Sprachausgabe mit vor und bleibt auch bei anderen Schriftgrößen gerade. */
.k-sprachen > a + a,
.k-sprachen > a + span,
.k-sprachen > span + a,
.k-sprachen > span + span {
  margin-left: .5rem; padding-left: .5rem;
  /* Etwas kräftiger als --kyb-line: der Strich soll so deutlich stehen wie ein
     getipptes „|" in den gedämpften Metaeinträgen, nicht wie eine Kastenkante. */
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.k-sprachen .k-sprachen__ist { color: var(--kyb-text); }
.k-sprachen .k-sprachen__zu { color: var(--kyb-text-3); }
.k-sprachen .k-sprachen__zu:hover { color: var(--kyb-neon); }
.k-sprachen .k-sprachen__zu:focus-visible { outline: 2px solid var(--kyb-neon); outline-offset: 3px; border-radius: 3px; }
/* Keine Entsprechung in der anderen Sprache: sichtbar, aber erkennbar aus. */
.k-sprachen .k-sprachen__aus { color: var(--kyb-text-3); opacity: .4; cursor: not-allowed; }

/* Im aufgeklappten Menü steht der Umschalter in einer Rasterspalte und darf
   nicht über die ganze Breite ziehen. */
.k-sprachen--mobil { justify-self: start; margin-top: var(--s1); }
.k-sprachen--mobil > a,
.k-sprachen--mobil > span { font-size: .78rem; }

/* Kompakte Kopfzeile: die Metaleiste klappt zu. Die Einträge werden einzeln
   ausgeblendet (siehe kyb-meta-mega.css), der Umschalter gehört dazu. */
.kyb-nav.is-kompakt .k-meta .k-sprachen { opacity: 0; visibility: hidden; }
.k-meta .k-sprachen { transition: opacity .2s ease, visibility .2s ease; }

/* ---- Kopfzeile: sticky und elegant (14.09.2026) ------------------------
   Oben auf der Seite: volle Höhe mit Metanavigation, fast durchsichtig.
   Beim Scrollen (Klasse is-kompakt aus kyberio.js): Metanavigation blendet
   aus, Leiste und Logo werden schlanker, Hintergrund satter mit Unschärfe
   und feiner Kante. */
.kyb-nav {
  background: rgba(23, 23, 31, .6);
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.k-meta { max-height: 52px; transition: max-height .3s ease, opacity .2s ease, padding .3s ease; }
.kyb-nav__in { transition: height .3s ease; }
.kyb-brand img { transition: height .3s ease; }

.kyb-nav.is-kompakt { background: rgba(23, 23, 31, .88); border-bottom-color: var(--kyb-line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
.kyb-nav.is-kompakt .k-meta { max-height: 0; padding-block: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.kyb-nav.is-kompakt .kyb-nav__in { height: 56px; }
.kyb-nav.is-kompakt .kyb-brand img, .kyb-nav.is-kompakt .kyb-brand svg { height: 24px; }
.kyb-nav.is-kompakt .k-nav__links > .k-nav__item > a { font-size: .98rem; }
.kyb-nav.is-kompakt .k-nav__accent { font-size: .96rem; padding: 9px var(--s4); }
.kyb-nav__in, .k-nav__links > .k-nav__item > a, .k-nav__accent { transition: height .3s ease, font-size .3s ease, padding .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .kyb-nav, .k-meta, .kyb-nav__in, .kyb-brand img { transition: none; }
}

/* ---- Vertrauensblock (g-trust) --------------------------------------- */
.k-vertrauen { display: grid; grid-template-columns: 1fr; gap: var(--s4); align-items: center;
  background: var(--kyb-surface); border-top: 3px solid var(--kyb-anthracite); padding: var(--s5); }
@media (min-width: 760px) { .k-vertrauen { grid-template-columns: auto 1fr; } }
.k-vertrauen__lbl { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--kyb-text-3); margin: 0 0 var(--s2); }
.k-vertrauen__fakten { display: grid; gap: var(--s2); grid-template-columns: 1fr; }
@media (min-width: 560px) { .k-vertrauen__fakten { grid-template-columns: 1fr 1fr; } }
.k-vertrauen__fakten span { padding-left: var(--s3); border-left: 2px solid var(--kyb-neon); font-size: .92rem; color: var(--kyb-text-2); }
.k-vertrauen__fakten b { color: var(--kyb-white); font-weight: 600; }

/* Laufband mit transparenten Logos: exakt wie g-marq der Landingpage */
.k-marquee.k-logos--transparent img { height: 30px; opacity: .68; }

/* ---- Tabellen und Bilder im Fließtext (14.09.2026) ---------------------
   Aus WordPress übernommene Tabellen tragen keine eigenen Größen mehr und
   folgen der Seitengestaltung. Auf schmalen Bildschirmen scrollen sie in
   sich statt die Seite zu verbreitern. */
.k-set table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: .92rem; }
.k-set th, .k-set td { text-align: left; vertical-align: top; padding: .65rem .9rem; border-bottom: 1px solid var(--kyb-line); }
.k-set th { color: var(--kyb-white); font-weight: 600; }
.k-set td { color: var(--kyb-text-2); font-variant-numeric: tabular-nums; }
.k-set tr:first-child th { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kyb-text-3); }
@media (max-width: 700px) { .k-set table { display: block; overflow-x: auto; white-space: nowrap; } }
:where(.k-set) img { max-width: 100%; height: auto; } /* ohne Gewicht: jede Regel mit Klasse gewinnt (Siegel, Personenfotos, Logos) */

/* Buttons im Fließtext behalten ihre Farben — die Linkfarbe Neon machte
   Primär-Buttons unsichtbar (Neon auf Neon). */
.k-set a.kyb-btn { text-decoration: none; }
.k-set a.kyb-btn--primary, .k-set a.kyb-btn--primary:hover { color: var(--kyb-stage); }
.k-set a.kyb-btn--ghost { color: var(--kyb-neon); }
/* Logos ohne Laufband: ruhiges Raster, gleiche Höhe */
.k-logos.k-logos--transparent { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--s6) var(--s5); }
.k-logos.k-logos--transparent img { max-height: 34px; max-width: 150px; opacity: .72; }

/* Laufband: optisch gleich große Logos. Statt fester Höhe gleiche Fläche —
   breite Wortmarken werden flacher, quadratische Siegel höher (wie die
   Höhenklassen h31–h61 der Logowand im Toolkit, nur automatisch). */
.k-marquee.k-logos--transparent img {
  width: auto;
  height: clamp(24px, calc(30px * sqrt(4 * var(--h, 1) / var(--w, 4))), 58px);
}

/* Siegel im Vertrauensblock: Größe wie auf der Landingpage */
.k-vertrauen .kyb-seals { gap: var(--s3); }
.k-vertrauen .kyb-seals img { height: 78px; width: auto; }

/* Aufklappmenü: Icons vor den Unterpunkten (15.09.2026) */
.k-mega__item--icon { display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); align-items: start; }
.k-mega__ic { color: var(--kyb-neon); opacity: .8; margin-top: 2px; transition: opacity var(--t), transform var(--t); }
.k-mega__item--icon:hover .k-mega__ic { opacity: 1; transform: translateY(-1px); }
.k-mega__txt { display: block; min-width: 0; }

/* Bildkarte „Natürlich" (15.09.2026): echte Farben statt Einfärbung.
   Dunkler Verlauf oben trägt die Schrift, das Motiv bleibt unten frei;
   Neon nur als Schimmer in der Ecke und als Kante. */
.k-leit--natur { background: var(--kyb-stage); }
.k-leit--natur::before { mix-blend-mode: normal; filter: saturate(.85) contrast(1.04) brightness(.92); }
.k-leit--natur::after {
  background:
    linear-gradient(90deg, var(--kyb-neon-a), var(--kyb-neon-b)) left bottom / 100% 4px no-repeat,
    radial-gradient(90% 55% at 0% 100%, rgba(15,255,155,.16), transparent 70%),
    linear-gradient(to bottom, rgba(14,15,20,.88) 0%, rgba(14,15,20,.62) 28%, rgba(14,15,20,.12) 55%, rgba(14,15,20,0) 70%, rgba(14,15,20,.35) 100%);
}

/* ---- Logo-Intro (15.09.2026) -------------------------------------------
   Nachbau von Corporate Design/Logo-Intro/Animation 01.mov. Läuft nur mit
   .logo-intro am <html> (erster Aufruf der Sitzung, siehe layout). */
.kyb-brand { display: inline-flex; align-items: center; }
.kyb-marke { display: block; height: 32px; width: auto; overflow: visible; transition: height .3s ease; }
.kyb-marke__b, .kyb-marke__dot { transform-box: fill-box; }

.logo-intro .kyb-marke__b {
  opacity: 0; transform-origin: 50% 100%;
  animation: kyb-logo-teil .62s cubic-bezier(.2, .9, .25, 1.15) both;
  animation-delay: calc(.12s + var(--i) * .085s);
}
.logo-intro .kyb-marke__dot {
  opacity: 0; transform-origin: 50% 100%;
  animation: kyb-logo-punkt 1.05s cubic-bezier(.3, 0, .3, 1) 1.02s both;
}
@keyframes kyb-logo-teil {
  0%   { opacity: 0; transform: translateY(38%) rotate(-14deg) scale(.55); clip-path: inset(55% 0 0 0); }
  45%  { opacity: 1; clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes kyb-logo-punkt {
  0%   { opacity: 0; transform: translate(-70%, -330%) scale(.7, 2.1); }
  12%  { opacity: 1; }
  38%  { transform: translate(-45%, -90%) scale(.85, 1.6); }
  50%  { transform: translate(-25%, 0) scale(1.35, .7); }
  66%  { transform: translate(-10%, -120%) scale(.9, 1.15); }
  82%  { transform: translate(0, 0) scale(1.18, .84); }
  92%  { transform: translate(0, -18%) scale(.97, 1.03); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-intro .kyb-marke__b, .logo-intro .kyb-marke__dot { animation: none; opacity: 1; }
}

/* Bildkarte mit Video (15.09.2026): Video liegt unter dem Abdunkler (::after). */
.k-leit > .k-leit__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; }
.k-leit--natur > .k-leit__video { filter: saturate(.85) contrast(1.04) brightness(.92); }
.k-leit:not(.k-leit--natur) > .k-leit__video { mix-blend-mode: luminosity; }

/* Metanavigation: Unterpunkte eingerückt (Über uns, 15.09.2026) */
.k-meta__drop { min-width: 230px; }
.k-meta__drop a.is-einzug { padding-left: calc(var(--s3) + 14px); font-size: .86rem; color: var(--kyb-text-3); }
.k-meta__drop a.is-einzug::before { content: "–"; margin-right: 6px; color: var(--kyb-neon); opacity: .7; }

/* Lange Einzelwörter in der Bildkarte (z. B. „Nachhaltigkeitskonzept") trennen statt abschneiden */
.k-leit__h { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  hyphenate-limit-chars: 14 6 6; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; }
.k-leit > .k-leit__schleier { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--kyb-grad); mix-blend-mode: screen; opacity: .32; }

/* ---- Bilderkachel (15.09.2026) ---------------------------------------- */
.k-kachel { margin-top: var(--s5); }
.k-kachel__f { position: relative; overflow: hidden; margin: 0; background: var(--kyb-card); }
.k-kachel__f img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .4s ease; }
.k-kachel__f:hover img { transform: scale(1.04); }
.k-kachel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s4) var(--s3) var(--s3);
  font-size: .84rem; color: #fff; background: linear-gradient(to top, rgba(14,15,20,.85), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
.k-kachel__f:hover .k-kachel__cap { opacity: 1; transform: none; }

/* Mosaik: erstes Bild 2×2, danach vier kleine */
.k-kachel--mosaik { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
.k-kachel--mosaik .k-kachel__f:first-child { grid-column: span 2; grid-row: span 2; }
@media (min-width: 820px) {
  .k-kachel--mosaik { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
  .k-kachel--mosaik .k-kachel__f:first-child { border-bottom: 3px solid var(--kyb-neon); }
}

/* Raster: gleich große Quadrate, Neon-Kante beim Überfahren */
.k-kachel--raster { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .k-kachel--raster { grid-template-columns: repeat(4, 1fr); } }
.k-kachel--raster .k-kachel__f { aspect-ratio: 1; }
.k-kachel--raster .k-kachel__f::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 -3px 0 var(--kyb-neon);
  opacity: 0; transition: opacity var(--t); }
.k-kachel--raster .k-kachel__f:hover::after { opacity: 1; }

/* Streifen: hohe Bahnen, die überfahrene öffnet sich */
.k-kachel--streifen { display: flex; gap: 6px; height: clamp(320px, 42vw, 480px); }
.k-kachel--streifen .k-kachel__f { flex: 1; min-width: 0; transition: flex .6s cubic-bezier(.2, .8, .2, 1); }
.k-kachel--streifen .k-kachel__f:hover { flex: 2.6; }
.k-kachel--streifen .k-kachel__f:hover img { transform: none; }
@media (max-width: 700px) { .k-kachel--streifen { flex-direction: column; height: auto; }
  .k-kachel--streifen .k-kachel__f { height: 180px; flex: none; } }

/* Collage: Spalten mit natürlichen Seitenverhältnissen */
.k-kachel--collage { columns: 2 220px; column-gap: 6px; }
@media (min-width: 820px) { .k-kachel--collage { columns: 3; } }
.k-kachel--collage .k-kachel__f { break-inside: avoid; margin-bottom: 6px; }
.k-kachel--collage .k-kachel__f img { height: auto; }

/* Duoton: in Markenfarbe eingefärbt, echte Farbe beim Überfahren */
.k-kachel--duoton { display: grid; gap: 6px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 820px) { .k-kachel--duoton { grid-template-columns: repeat(3, 1fr); } }
.k-kachel--duoton .k-kachel__f { aspect-ratio: 4 / 3; background: var(--kyb-grad); isolation: isolate; }
.k-kachel--duoton .k-kachel__f img { mix-blend-mode: luminosity; filter: contrast(1.05) brightness(.95); }
.k-kachel--duoton .k-kachel__f::after { content: ""; position: absolute; inset: 0; background: rgba(14,15,20,.28);
  transition: opacity var(--t); pointer-events: none; }
.k-kachel--duoton .k-kachel__f:hover img { mix-blend-mode: normal; transform: scale(1.04); }
.k-kachel--duoton .k-kachel__f:hover::after { opacity: 0; }

/* Laufband */
.k-kachel--laufband { overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); }
.k-kachel__track { display: flex; width: max-content; animation: k-lauf 70s linear infinite; }
.k-kachel--laufband:hover .k-kachel__track { animation-play-state: paused; }
.k-kachel__grp { display: flex; gap: 6px; padding-right: 6px; flex: none; }
.k-kachel--laufband .k-kachel__f { height: clamp(180px, 22vw, 260px); }
.k-kachel--laufband .k-kachel__f img { width: auto; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .k-kachel__track { animation: none; }
  .k-kachel--laufband { overflow-x: auto; }
  .k-kachel__f img, .k-kachel--streifen .k-kachel__f { transition: none; }
}

/* ---- Gestaltungsreferenz (/dev/komponenten) ---------------------------- */
.k-ref__icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); margin-top: var(--s5);
  border-top: 1px solid var(--kyb-line); border-left: 1px solid var(--kyb-line); }
.k-ref__icon { display: grid; justify-items: center; gap: var(--s2); padding: var(--s4) var(--s2); color: var(--kyb-neon);
  box-shadow: inset -1px 0 0 var(--kyb-line), inset 0 -1px 0 var(--kyb-line); }
.k-ref__icon code { font-family: var(--mono); font-size: .72rem; color: var(--kyb-text-3); }
.k-ref__karten { display: grid; gap: var(--s5); margin-top: var(--s5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.k-ref__karten figure { margin: 0; display: grid; gap: var(--s3); }
.k-ref__karten .k-leit { min-height: 380px; }
.k-ref__karten figcaption { font-size: .86rem; color: var(--kyb-text-2); }
.k-ref__karten code, .k-ref__hinweis code { font-family: var(--mono); font-size: .8rem; color: var(--kyb-neon); }
.k-ref__logo { display: grid; gap: var(--s4); justify-items: start; margin-top: var(--s5); }
.k-ref__logobuehne { background: var(--kyb-stage-2); border: 1px solid var(--kyb-line); padding: var(--s7) var(--s8); }
.k-ref__logobuehne .kyb-marke { height: 64px; }
.k-ref__hinweis { font-size: .86rem; color: var(--kyb-text-2); }

/* Footer: Rechtliches statt Anschrift (15.09.2026) */
.k-footer .k-footer__legal { display: flex; flex-direction: row; margin: 0; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.k-footer .k-footer__legal a { padding: 0; font-family: var(--mono); font-size: .76rem; color: var(--kyb-text-3); text-decoration: none; transition: color var(--t); }
.k-footer__legal a:hover { color: var(--kyb-neon); }

/* ---- Hintergrund: animierte Punkte (15.09.2026) ------------------------ */
.k-punkte { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; display: block; }
.k-ti__video { display: block; width: 100%; height: auto; }

/* Nur für Screenreader und Suchmaschinen sichtbar */
.k-unsichtbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Ohne Kopfbereich: Abstand zur Navigation */
.k-unsichtbar + .kyb-wrap.kyb-sec { padding-top: clamp(var(--s6), 6vw, var(--s8)); }

/* Formular im Kasten: nur ein Innenabstand (vorher Kasten + Formular doppelt), Felder nutzen die Breite */
.k-formblock { padding: clamp(var(--s4), 2.6vw, var(--s5)); }
.k-formblock .kyb-form { background: none; border-top: 0; padding: 0; max-width: none; }

/* ---- Kopfzeile ohne Flattern (15.09.2026) -------------------------------
   Vorher: sticky im Fluss. Wurde sie kompakt, schrumpfte sie um ~65 px, der
   Inhalt rutschte nach, die Scrollposition fiel unter die Schwelle und die
   Leiste wurde wieder groß — ein Hin und Her. Jetzt liegt sie fest über der
   Seite; ein konstanter Platzhalter (--kopf-h, von kyberio.js gemessen)
   hält den Inhalt an seiner Stelle. */
.kyb-nav { position: fixed; top: 0; left: 0; right: 0; }
body { padding-top: var(--kopf-h, 121px); }
html { scroll-padding-top: calc(var(--kopf-h, 121px) + var(--s3)); }  /* Sprungziele nicht unter die feste Kopfleiste schieben */
.k-nav__mobile:not([hidden]) { max-height: calc(100vh - 80px); overflow-y: auto; }
/* Mit Video: kein Standbild darunter — sonst schimmern die festen Wolken des Vorschaubilds durch die laufenden */
.k-leit--video::before { content: none; }

/* ==========================================================================
   RADIEN UND FARBVARIANZ (16.09.2026)
   Zwei zusammenhaengende Aenderungen am Erscheinungsbild:

   1. Ecken. Das DS war auf radius:0 gebaut. Die Tokens --r-1 bis --r-4 und
      --r-pill (kyb-ds.css) loesen das ab: Pille fuer Schaltflaechen und
      Marken, r-2 fuer Eingaben und Bilder, r-3 fuer Karten, r-4 fuer grosse
      abgesetzte Flaechen.
   2. Farbe. Abgesetzte Flaechen waren fast alle derselbe Dunkelgrauton.
      Jetzt tragen sie weiche Verlaeufe aus --g-karte / --g-flaeche /
      --g-akzent: Neon-Tuerkis als Marke, Violett und Blau als sehr dezente
      Sekundaertoene, Deckkraft 4-12 %. Die Grundfarbe bleibt darunter
      stehen, der Textkontrast aendert sich dadurch nicht.

   Das Neon-Kanten-Motiv (border-top: 3px) bleibt ueberall erhalten; es legt
   sich nur als Bogen um die neue Ecke. Bilder in Karten werden mit
   overflow:hidden beschnitten, damit nichts ueber die Rundung steht.
   ========================================================================== */

/* ---- 1. Schaltflaechen und Marken: Pille -------------------------------- */
.kyb-btn { border-radius: var(--r-btn); }
.k-nav__accent { border-radius: var(--r-btn); }
.k-nav__toggle { border-radius: var(--r-btn); }
.k-angebot__badge,
.k-angebot__chips span { border-radius: var(--r-pill); }
.k-trust__item::before,
.k-mtl p::before { border-radius: 2px; }

/* Reiter: oben gerundet, die Neon-Unterkante bleibt die tragende Linie */
.k-tabs__btn { border-radius: var(--r-1) var(--r-1) 0 0; }

/* ---- 2. Eingaben -------------------------------------------------------- */
.kyb-input,
textarea.kyb-input,
select.kyb-input,
.kyb-form select,
.kyb-form input:not([type="checkbox"]):not([type="radio"]),
.kyb-form textarea { border-radius: var(--r-2); }
.kyb-choice { border-radius: var(--r-2); }

/* ---- 3. Abgesetzte Flaechen: Rundung und Verlauf ------------------------ */
.k-set--stage_2,
.k-set--surface {
  border-radius: var(--r-4);
  box-shadow: var(--kante-oben);
}
.k-set--stage_2 { background-image: var(--g-flaeche); }
.k-set--surface { background-image: var(--g-flaeche-2); }

/* Formularkasten */
.k-formblock {
  border-radius: var(--r-4);
  background-image: var(--g-flaeche-2);
  box-shadow: var(--kante-oben);
}
.kyb-form { border-radius: var(--r-4); background-image: var(--g-flaeche-2); }
.k-formblock .kyb-form { background-image: none; border-radius: 0; }

/* Handlungsaufforderung: der Akzentverlauf, etwas kraeftiger */
.k-cta {
  border-radius: var(--r-4);
  background-image: var(--g-akzent);
  box-shadow: var(--kante-oben);
}

/* Vertrauensblock: Neon und Blau — er traegt die Siegel, also bleibt er
   naeher an der Marke als die uebrigen Flaechen. */
.k-vertrauen {
  border-radius: var(--r-4);
  background-image: var(--g-flaeche-2);
  box-shadow: var(--kante-oben);
}

/* Hinweisleiste und Sonderfaelle */
.k-hinweis { border-radius: var(--r-3); background-image: var(--g-akzent); }
.k-code { border-radius: var(--r-2); background-image: var(--g-karte); }
.k-formfehler { border-radius: var(--r-2); }
.k-devnote { border-radius: var(--r-2); }

/* ---- 4. Karten ---------------------------------------------------------
   Die Fugenraster lagen mit 1 px Abstand aneinander. Runde Ecken brauchen
   Luft, sonst entstehen graue Zwickel zwischen den Kacheln: echte Abstaende,
   Linie als Ring am Element statt als Untergrund des Rasters. */
.k-grid,
.k-cards,
.k-angebote,
.k-steps,
.k-certs,
.k-boxes,
.k-posts { background: transparent; gap: var(--s2); }
.k-angebote { border-block: 0; }

.k-grid__item,
.k-cards__item,
.k-angebot,
.k-steps__item,
.k-certs__item,
.k-boxes__item,
.k-posts__item,
.kyb-card {
  border-radius: var(--r-3);
  background-color: var(--kyb-stage);
  background-image: var(--g-karte);
  box-shadow: 0 0 0 1px var(--kyb-line), var(--kante-oben);
  transition: border-color var(--t), background-image var(--t), box-shadow var(--t);
}
.k-grid__item:hover,
.k-cards__item:hover,
.k-angebot:hover,
.k-posts__item:hover,
.kyb-card:hover {
  background-color: var(--kyb-stage);
  background-image: var(--g-karte-hover);
  box-shadow: 0 0 0 1px var(--kyb-line-strong), var(--kante-oben);
}
/* Zertifikate tragen die Neon-Oberkante dauerhaft — dazu der Akzentverlauf */
.k-certs__item { background-image: var(--g-akzent); }

/* Karten mit Bild: das Bild laeuft bis an die Kante, also muss die Karte
   beschneiden — sonst steht es ueber die Rundung. */
.k-cards--bild .k-cards__item { overflow: hidden; }
.k-cards--bild .k-cards__bild { border-radius: 0; }

/* Kompaktes Partnerband und Kennzahlen bleiben eine Platte mit Innenlinien */
.k-proof,
.k-pv-kompakt,
.kyb-logos { border-radius: var(--r-3); overflow: hidden; }
.k-proof__item { background-image: var(--g-karte); }
.k-proof--gross { border-radius: 0; overflow: visible; }
.k-proof--gross .k-proof__item { background-image: none; }

/* ---- 5. Bilder und Bildkarten ------------------------------------------ */
.k-leit { border-radius: var(--r-4); }
.k-hero__media { border-radius: var(--r-4); overflow: hidden; }
.k-ti__media { border-radius: var(--r-3); overflow: hidden; }
.k-img figure { border-radius: var(--r-3); overflow: hidden; }
.k-slider img { border-radius: var(--r-3); }
.k-kachel__f { border-radius: var(--r-2); }
.k-kachel--laufband { border-radius: 0; }
:where(.k-set) img { border-radius: var(--r-2); }
:where(.k-logos, .kyb-seals, .k-marquee, .k-quote__logo) img,
.k-logos img, .k-marquee img, .kyb-seals img { border-radius: 0; }

/* Bilderkachel-Beschriftung: Neon-Schimmer statt reinem Schwarzverlauf */
.k-kachel__cap {
  background:
    linear-gradient(to top, rgba(14,15,20,.88), rgba(14,15,20,.45) 55%, transparent),
    linear-gradient(105deg, rgba(0,255,130,.16), rgba(125,108,255,.14));
}

/* ---- 6. Personenfotos --------------------------------------------------- */
/* Die Neon-Oberkante laeuft als Bogen in die Ecke. Bei kleinen Quadraten
   waere r-3 zu viel Bogen fuer zu wenig Flaeche, deshalb eine Stufe kleiner. */
.k-person__photo { border-radius: var(--r-3); overflow: hidden; }
.kyb-person__photo { border-radius: var(--r-2); }
.k-conv__photo { border-radius: var(--r-2); }

/* ---- 7. Kontaktblock: eigene Flaeche ------------------------------------
   Der Block stand bisher nackt auf der Buehne. Als ruhige Platte mit
   weichem Verlauf bekommt er das Gewicht, das ihm als Abschluss zusteht.
   Liegt er bereits in einer abgesetzten Flaeche, tritt er zurueck. */
.k-conv {
  padding: clamp(var(--s4), 3vw, var(--s6));
  border-radius: var(--r-4);
  background-image: var(--g-akzent);
  box-shadow: var(--kante-oben);
}
.k-set--surface .k-conv,
.k-set--stage_2 .k-conv { padding: 0; background-image: none; box-shadow: none; }

/* ---- 8. Menues ---------------------------------------------------------- */
.k-mega {
  border-radius: 0 0 var(--r-4) var(--r-4);
  background-image: var(--g-flaeche);
  box-shadow: 0 24px 48px -32px rgba(0,0,0,.8);
}
.k-mega__teaser { border-radius: var(--r-3); background-image: var(--g-karte); }
.k-mega__item { border-radius: var(--r-1); }
.k-meta__drop {
  border-radius: var(--r-1) var(--r-1) var(--r-2) var(--r-2); overflow: hidden;
  background-image: var(--g-flaeche-2);
}

/* Der klebrige Handlungsaufruf bleibt kantig: er liegt bis an die
   Fensterkanten, gerundete Ecken wuerden die Seite durchscheinen lassen.
   Die Schaltflaechen darin sind Pillen, das reicht als Motiv. */

/* Handy/Tablet: Partner steht im aufgeklappten Menü — der große Button oben
   schob sonst den Menü-Knopf aus dem Bild. */
@media (max-width: 999px) {
  .kyb-nav__in > .k-nav__item--accent { display: none; }
}

/* Beweisleiste: Laufende Linie innen an der Oberkante — der gerundete Kasten
   schneidet mit overflow:hidden alles oberhalb ab. */
.k-proof.kyb-seq:not(.k-proof--gross) { --kyb-seq-top: 0; --kyb-seq-h: 2px; }

/* Navigation: im Ausgangszustand ohne Hintergrund; Fläche und Weichzeichner
   erst, wenn sie beim Scrollen kompakt wird oder das Handymenü offen ist. */
.kyb-nav:not(.is-kompakt) {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent; box-shadow: none;
}
.kyb-nav.is-kompakt {
  -webkit-backdrop-filter: saturate(150%) blur(16px); backdrop-filter: saturate(150%) blur(16px);
}
.kyb-nav:has(.k-nav__mobile:not([hidden])) { background: rgba(23, 23, 31, .96); }

/* ---- Partner-Störer als Neon-Band (16.09.2026) --------------------------
   Die frühere Kapitelleiste, jetzt ohne Nummer als auffälliger Störer.
   Läuft über die volle Breite, deshalb kantig. */
.k-stoerer--band { background: var(--kyb-grad); border-block: 0; color: var(--kyb-stage); }
.k-stoerer--band .k-stoerer__in { padding-block: clamp(var(--s5), 4vw, var(--s6)); border-left: 0; padding-left: 0; }
.k-stoerer--band .k-stoerer__hl { color: var(--kyb-stage); }
.k-stoerer--band .k-stoerer__sub { color: rgba(14, 15, 20, .78); }
.k-stoerer__btn { background: var(--kyb-stage); color: var(--kyb-neon); border: 1px solid var(--kyb-stage); }
.k-stoerer__btn:hover { background: #000; color: var(--kyb-neon); }
.k-footer__adresse { font-style: normal; color: var(--kyb-text-2); font-size: .92rem; line-height: 1.6; }

/* Leistungskarte: Logo rechts oben (weiß freigestellt) */
.k-angebot__logo { height: 58px; width: auto; max-width: 42%; object-fit: contain; opacity: .82; flex-shrink: 0; }
/* Die OpenStack-Wortmarke ist reine Schrift ohne Rand, die übrigen Marken sind
   Bildzeichen mit viel Eigenluft (Proxmox etwa trägt sie im Wappen). Bei gleicher
   Kastenhöhe wirkt die Wortmarke deshalb deutlich größer als ihre Nachbarn.
   46 statt 58 Pixel (−21 %) stellt sie optisch auf dieselbe Stufe. Gewählt über
   den Dateinamen in der Glide-Adresse, damit das Bild selbst unberührt bleibt
   und an allen sechs Stellen gleich wirkt (Start, Cloud, VMware — je DE und EN). */
.k-angebot__logo[src*="openstack_wortmarke"] { height: 46px; }
.k-angebot:hover .k-angebot__logo { opacity: 1; }

/* Karten mit Bild: quadratische Bilder (z. B. Veranstaltungen) füllen eine 1:1-Fläche randlos; Bild ist klickbar */
.k-cards--bild .k-cards__bild--quadrat { aspect-ratio: 1 / 1; }
.k-cards--bild .k-cards__bild--quadrat img { object-fit: cover; }
.k-cards--bild a.k-cards__bild { display: block; }
.k-cards--bild a.k-cards__bild img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.k-cards--bild a.k-cards__bild:hover img { transform: scale(1.03); }

/* Leistungskarte über die volle Breite: Text links, Logo groß rechts */
@media (min-width: 760px) {
  .k-angebot--breit { grid-column: 1 / -1; }
  .k-angebot--breit .k-angebot__top { align-items: center; }
  .k-angebot--breit .k-angebot__logo { height: 32px; max-width: 38%; }
  .k-angebot--breit > p { max-width: 78ch; }
}
.k-angebot--breit { background-image: var(--g-akzent, none), var(--g-karte, none); }
/* Logo der breiten Karte halb so groß (16.09.2026) */
.k-angebot--breit .k-angebot__logo { height: 29px; }
@media (min-width: 760px) { .k-angebot--breit .k-angebot__logo { height: 32px; } }

/* Beweisleiste mit fünf Werten: Zeile 1 drei Drittel, Zeile 2 zwei Hälften */
@media (min-width: 900px) {
  .k-proof.kyb-seq--5:not(.k-proof--gross) { grid-template-columns: repeat(6, 1fr); }
  .k-proof.kyb-seq--5:not(.k-proof--gross) > .k-proof__item { grid-column: span 2; }
  .k-proof.kyb-seq--5:not(.k-proof--gross) > .k-proof__item:nth-child(n+4) { grid-column: span 3; }
}
.k-proof--zentriert .k-proof__item { text-align: center; }

/* Logowand (ohne Laufband): optisch gleich große Logos — gleiche Fläche statt
   gleicher Höhe, quadratische Logos höher, Wortmarken flacher. */
.k-logos.k-logos--transparent { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s6) var(--s8); }
.k-logos.k-logos--transparent img {
  height: clamp(30px, calc(34px * sqrt(4 * var(--h, 1) / var(--w, 4))), 76px);
  max-height: none; max-width: 200px; width: auto; object-fit: contain;
}

/* Kopfbereich ohne Bild (16.09.2026): H1 = Seitentitel, darunter H2 = Claim */
.k-hero__h--titel { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.k-hero__h--claim { margin-top: var(--s3); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.15; max-width: 28ch; }

/* Aktuelles-Übersicht: Beitragsbilder füllen die Fläche im Format 16:10 */
.k-cards--bild.k-postkarten .k-cards__bild { aspect-ratio: 16 / 10; }
.k-cards--bild.k-postkarten .k-cards__bild img { object-fit: cover; }

/* ==========================================================================
   Leistungsraster (18.09.2026) — Aufteilung nach Anzahl, Verweis auf Grundlinie
   Vorher: starres Drittelraster. Bei fünf Punkten blieb in der zweiten Reihe
   ein Drittel leer — das las sich wie ein Fehler, nicht wie Gestaltung. Und
   der Verweis hing je nach Textlänge auf unterschiedlicher Höhe.

   Jetzt: zwölfspaltiges Raster, die Spaltenbreite richtet sich nach der Zahl
   der Punkte (k-grid--nN aus dem Template). Die Kachel ist eine Spalte, der
   Verweis sitzt unten und fluchtet über die ganze Reihe. Symbol optional.
   ========================================================================== */
.k-grid { gap: var(--s2); }

@media (min-width: 640px) {
  .k-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); }
  .k-grid > .k-grid__item { grid-column: span 6; }
}
/* Zwei Spalten: eine ungerade letzte Kachel nimmt die ganze Breite,
   statt allein neben einer Lücke zu stehen. */
@media (min-width: 640px) and (max-width: 979.98px) {
  .k-grid > .k-grid__item:last-child:nth-child(odd) { grid-column: span 12; }
}
@media (min-width: 980px) {
  .k-grid > .k-grid__item { grid-column: span 4; }          /* Grundfall: Drittel */
  .k-grid--n2 > .k-grid__item { grid-column: span 6; }      /* 2         */
  .k-grid--n4 > .k-grid__item { grid-column: span 6; }      /* 2 + 2     */
  .k-grid--n5 > .k-grid__item:nth-child(n+4) { grid-column: span 6; }  /* 3 + 2 */
  .k-grid--n7 > .k-grid__item { grid-column: span 3; }      /* 4 + 3     */
  .k-grid--n7 > .k-grid__item:nth-child(n+5) { grid-column: span 4; }
  .k-grid--n8 > .k-grid__item { grid-column: span 3; }      /* 4 + 4     */
  /* Auffanglinie für alle übrigen Anzahlen (1, 10, 13 …): bleibt genau eine
     Kachel übrig, nimmt sie die ganze Breite. */
  .k-grid:not(.k-grid--n2, .k-grid--n4, .k-grid--n5, .k-grid--n7, .k-grid--n8)
    > .k-grid__item:last-child:nth-child(3n+1) { grid-column: span 12; }
}

/* ---- Die Kachel ---------------------------------------------------------- */
.k-grid__item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s4);
}
@media (min-width: 760px) { .k-grid__item { padding: var(--s5); } }
.k-grid__item > h3 { margin-bottom: 0; }
.k-grid__item > p { margin-top: var(--s2); max-width: 48ch; }

/* Verweis auf der Grundlinie der Kachel, nicht direkt unter dem Text */
.k-grid__item .k-grid__mehr {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--s4);
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--kyb-neon);
  text-decoration: none;
}
.k-grid__item .k-grid__mehr:hover { text-decoration: underline; }
.k-grid__pfeil { display: inline-block; transition: transform var(--t); }
.k-grid__item:hover .k-grid__pfeil { transform: translateX(3px); }

/* Ganze Kachel anklickbar — ein Anker, eine Fläche darüber */
.k-grid__item--verweis { cursor: pointer; }
.k-grid__mehr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* Reaktion beim Überfahren: der Ring nimmt einen Hauch Neon an */
.k-grid__item:hover { box-shadow: 0 0 0 1px rgba(15, 255, 155, .26), var(--kante-oben); }

/* ---- Symbol (optional, Standard ohne) ------------------------------------ */
.k-grid__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: var(--s3);
  border-radius: var(--r-2);
  color: var(--kyb-neon);
  background: rgba(15, 255, 155, .07);
  box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .18);
  transition: background var(--t), box-shadow var(--t);
}
.k-grid__ic svg { width: 22px; height: 22px; overflow: visible; }
.k-grid__item:hover .k-grid__ic {
  background: rgba(15, 255, 155, .12);
  box-shadow: inset 0 0 0 1px rgba(15, 255, 155, .34);
}