/* ==========================================================================
   Artikel (Beiträge, Vorlage post.antlers.html) — 17.09.2026
   Redaktioneller Kopf, Lesespalte für Textbausteine, Weitere Beiträge.
   Alles unter .k-artikel — Seiten bleiben unberührt.
   ========================================================================== */

.k-artikel { --k-spalte: 46rem; }

/* ---- Kopf ------------------------------------------------------------ */
.k-artikel__kopf { padding-top: clamp(var(--s5), 6vw, var(--s8)); }
.k-artikel__spalte { max-width: var(--k-spalte); margin-inline: auto; }

.k-artikel__zurueck {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--kyb-text-2); text-decoration: none;
  transition: color var(--t);
}
.k-artikel__zurueck span { transition: transform var(--t); }
.k-artikel__zurueck:hover { color: var(--kyb-neon); }
.k-artikel__zurueck:hover span { transform: translateX(-3px); }

.k-artikel__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  margin-top: var(--s6);
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; color: var(--kyb-text-3);
}
.k-artikel__meta time { color: var(--kyb-text-2); }
.k-artikel__thema {
  border: 1px solid var(--kyb-line-strong); border-radius: var(--r-pill);
  padding: 2px 10px; color: var(--kyb-text-2);
}

.k-artikel__h {
  margin-top: var(--s3);
  color: var(--kyb-white); font-weight: 600; letter-spacing: -.026em; line-height: 1.06;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
}
.k-artikel__lead {
  margin-top: var(--s4);
  font-weight: 300; color: var(--kyb-text-2); line-height: 1.55;
  font-size: clamp(1.14rem, 1.6vw, 1.34rem);
  text-wrap: pretty;
}
.k-artikel__btns { margin-top: var(--s5); }

.k-artikel__bild {
  position: relative; margin-top: clamp(var(--s6), 5vw, var(--s8));
  border-radius: var(--r-4); overflow: hidden;
  background: var(--kyb-stage-2); aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 1px var(--kyb-line);
}
.k-artikel__bild img { width: 100%; height: 100%; object-fit: cover; }
.k-artikel__bild--klein { display: grid; place-items: center; background-image: var(--g-flaeche); }
.k-artikel__bild--klein img { width: auto; height: auto; max-width: 60%; max-height: 70%; object-fit: contain; }
.k-artikel__bild .kyb-ki-marke { left: 14px; bottom: 14px; }

/* ---- Inhalt: Lesespalte ------------------------------------------------ */
.k-artikel__inhalt { padding-block: clamp(var(--s7), 7vw, var(--s9)); }

.k-artikel__block + .k-artikel__block { margin-top: clamp(var(--s6), 5vw, var(--s8)); }
/* Zwei Textbausteine hintereinander gehören zum selben Lesefluss */
.k-artikel__block--text + .k-artikel__block--text,
.k-artikel__block--text_block + .k-artikel__block--text_image,
.k-artikel__block--text_image + .k-artikel__block--text_image,
.k-artikel__block--text_columns + .k-artikel__block--text_image,
.k-artikel__block--text_columns + .k-artikel__block--section_head,
.k-artikel__block--section_head + .k-artikel__block--text_image,
.k-artikel__block--text_image + .k-artikel__block--text_block,
.k-artikel__block--text_image + .k-artikel__block--text_columns,
.k-artikel__block--text_columns + .k-artikel__block--text_columns { margin-top: var(--s6); }

.k-artikel__block--text,
.k-artikel__block--text_block,
.k-artikel__block--text_image,
.k-artikel__block--text_columns,
.k-artikel__block--section_head,
.k-artikel__block--image,
.k-artikel__block--quote,
.k-artikel__block--table,
.k-artikel__block--code,
.k-artikel__block--faq { max-width: var(--k-spalte); margin-inline: auto; }

/* Bausteine mit eigener Fläche (Kontakt, Logos …) brauchen Luft zur Lesespalte */
.k-artikel__block--kontakt_person_formular,
.k-artikel__block--logo_wall,
.k-artikel__block--feature_grid { margin-top: clamp(var(--s7), 8vw, var(--s9)); }

/* Typografie des Fließtexts */
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) {
  font-size: clamp(1.06rem, 1.25vw, 1.16rem); line-height: 1.72; color: var(--kyb-text);
  text-wrap: pretty; overflow-wrap: break-word;
}
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) > * + * { margin-top: 1.05em; }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) strong { color: var(--kyb-white); font-weight: 600; }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) a {
  color: var(--kyb-neon); text-decoration: underline; text-decoration-color: rgba(15,255,155,.4);
  text-underline-offset: 3px; transition: text-decoration-color var(--t);
}
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) a:hover { text-decoration-color: var(--kyb-neon); }

/* Überschriften: Set-Überschrift und Überschriften im Text gleich groß */
.k-artikel__block .k-h,
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) h2 {
  max-width: none; color: var(--kyb-white); font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); text-wrap: balance;
}
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) h3 {
  color: var(--kyb-white); font-weight: 600; letter-spacing: -.014em; line-height: 1.25;
  font-size: clamp(1.18rem, 1.7vw, 1.35rem);
}
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) > :is(h2, h3):not(:first-child) { margin-top: 1.9em; }
.k-artikel__block .k-set__head { margin-bottom: var(--s4); }
.k-artikel__block .k-h + * { margin-top: var(--s4); }
.k-artikel__block .kyb-kicker + .k-h { margin-top: var(--s2); }

/* Listen: Neon-Kante wie im DS, mit etwas mehr Luft */
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) ul { gap: var(--s2); margin-block: 1.2em; }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) ul > li { color: var(--kyb-text); padding-block: 2px; }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) ol { color: var(--kyb-text); padding-left: 1.3em; display: grid; gap: var(--s1); }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) ol > li::marker { color: var(--kyb-neon); font-family: var(--mono); font-size: .9em; }

/* Text mit Bild: in der Lesespalte untereinander statt nebeneinander.
   Bild links → über dem Text, sonst darunter. */
.k-artikel__block .k-ti { display: flex; flex-direction: column; align-items: stretch; gap: var(--s5); }
.k-artikel__block .k-ti--left .k-ti__media,
.k-artikel__block .k-ti--full .k-ti__media { order: -1; margin-bottom: 0; }
.k-artikel__block .k-ti__media {
  border-top: 0; border-radius: var(--r-3); overflow: hidden; position: relative;
  box-shadow: inset 0 0 0 1px var(--kyb-line); background: var(--kyb-stage-2);
}
.k-artikel__block .k-ti__media img { width: 100%; height: auto; max-height: 520px; object-fit: cover; }

/* Textspalten: in der Lesespalte immer einspaltig; leere Spalte fällt weg */
.k-artikel__block .k-cols { grid-template-columns: 1fr; gap: var(--s4); }
.k-artikel__block .k-cols > div:empty { display: none; }

/* Abschnittskopf als Fließtext */
.k-artikel__block--section_head .k-text__body { margin-top: var(--s4); }

/* ---- Ende: Weitere Beiträge ------------------------------------------- */
.k-artikel__ende {
  border-top: 1px solid var(--kyb-line);
  padding-block: clamp(var(--s7), 7vw, var(--s9));
}
.k-artikel__ende-kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s4); margin-bottom: var(--s5);
}
.k-artikel__ende .k-h { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.k-artikel__alle {
  font-family: var(--mono); font-size: .82rem; letter-spacing: .04em;
  color: var(--kyb-neon); text-decoration: none;
}
.k-artikel__alle span { display: inline-block; transition: transform var(--t); }
.k-artikel__alle:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .k-artikel__zurueck span, .k-artikel__alle span { transition: none; }
}

/* Aus dem Import: Zwischenüberschriften als fetter Einzelabsatz.
   Enger an den folgenden Absatz binden, mehr Luft davor. */
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) > p:has(> strong:only-child):not(:first-child) { margin-top: 1.6em; }
.k-artikel__block :is(.k-text__body, .k-ti__body, .k-cols > div) > p:has(> strong:only-child) + p { margin-top: .4em; }

/* ---- Video-Baustein (23.09.2026) --------------------------------------
   Das Video steht in derselben Spalte wie der Fließtext, damit es den
   Lesefluss nicht zerreißt. Quadratische Aufnahmen aus sozialen Netzen
   werden sonst riesig: deshalb eine Höhenbegrenzung statt einer festen
   Breite — ein 16:9-Mitschnitt nutzt die volle Spalte, ein 1:1-Clip bleibt
   so hoch wie ein Absatz lang ist. */
.k-video__fig { margin-top: var(--s4); display: flex; flex-direction: column; align-items: center; }
.k-video__el {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 70vh;
  background: #000;
  border-top: 3px solid var(--kyb-anthracite);
}
.k-video--wide .k-video__el { max-height: 80vh; }
.k-video__fig figcaption {
  margin-top: var(--s2);
  color: var(--kyb-text-3);
  font-size: .86rem;
}