/* ============================================================================
   U³ — Seite „Karriere" · Sektions-Styles (6.2 Intro, 6.3 Was dich auszeichnet)
   Ton: Aufbruch, Ansprache „du". Baut auf tokens.css + styles.css + za.css.
   ========================================================================== */

/* ===========================================================================
   6.2 SPRUNGBRETT — Intro mit drei Absätzen
   =========================================================================== */
.kk-intro__title { font-size: clamp(28px, 3.6vw, 44px); margin-top: 16px; max-width: 18ch; }
.kk-intro__text { display: grid; gap: 18px; margin-top: 24px; max-width: 760px; }
.kk-intro__text p { font-size: clamp(16px, 1.7vw, 18px); line-height: 1.66; color: var(--u3-ink-2); }

/* B · zweispaltig: Titel links, Absätze rechts */
.kk-intro--split .kk-intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.kk-intro--split .kk-intro__title { margin-top: 16px; max-width: 14ch; }
.kk-intro--split .kk-intro__text { margin-top: 6px; }

/* ===========================================================================
   6.3 WAS DICH AUSZEICHNET — vier Punkte
   =========================================================================== */
.kk-points__head { margin-bottom: 40px; }
.kk-points__title { font-size: clamp(26px, 3.2vw, 38px); margin-top: 14px; }

/* A · 2×2 Hairline-Raster mit Index */
.kk-points-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--u3-line); }
.kk-point { padding: 32px 36px; border-top: 1px solid var(--u3-line); border-left: 1px solid var(--u3-line); display: flex; align-items: baseline; gap: 20px; }
.kk-point:nth-child(1), .kk-point:nth-child(2) { border-top: none; }
.kk-point:nth-child(odd) { border-left: none; }
.kk-point__n { font-family: var(--u3-font-mono); font-size: 11px; letter-spacing: 1.4px; color: var(--u3-petrol-ink); flex: none; transform: translateY(2px); }
.kk-point__t { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(19px, 2.1vw, 24px); color: var(--u3-ink); letter-spacing: -0.2px; line-height: 1.2; }

/* B · Checkliste — vier Zeilen mit Petrol-Marker */
.kk-points-list { display: grid; max-width: 720px; }
.kk-point-row { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; border-top: 1px solid var(--u3-line); }
.kk-point-row:last-child { border-bottom: 1px solid var(--u3-line); }
.kk-point-row__mark { flex: none; width: 22px; height: 1px; background: var(--u3-petrol); transform: translateY(-7px); }
.kk-point-row__t { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(20px, 2.2vw, 26px); color: var(--u3-petrol-ink); letter-spacing: -0.2px; }

/* ===========================================================================
   6.4 / 8.x — CTA mit E-Mail-Zeile (linksbündig, reuse .cta-left)
   =========================================================================== */
.kk-cta__mail { margin-top: 22px; display: flex; align-items: center; gap: 14px; }
.kk-cta__mail-k { font-family: var(--u3-font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--u3-ink-3); }
.kk-cta__mail-v { font-family: var(--u3-font-serif); font-size: 19px; color: var(--u3-petrol-ink); border-bottom: 1px solid rgba(28,83,95,.4); padding-bottom: 2px; }

/* ===========================================================================
   8.3 DISKRETION (Kontakt) — Vertraulichkeit
   =========================================================================== */
.kk-disk { background: var(--u3-papier); }
.kk-disk-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.kk-disk__title { font-size: clamp(24px, 2.8vw, 34px); max-width: 14ch; }
.kk-disk__text { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.62; color: var(--u3-ink-2); max-width: 56ch; }

/* ===========================================================================
   8.2 KONTAKTINFO (Kontakt) — ohne Foto, klare Kontaktliste
   =========================================================================== */
.kk-contact__name { font-family: var(--u3-font-serif); font-weight: 500; font-size: clamp(26px, 3vw, 36px); color: var(--u3-petrol-ink); letter-spacing: -0.3px; }
.kk-contact__role { margin-top: 6px; }
.kk-contact .ma-contact-lines { margin-top: 28px; max-width: 520px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 860px) {
  .kk-intro--split .kk-intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .kk-intro--split .kk-intro__title { max-width: none; }
  .kk-disk-grid { grid-template-columns: 1fr; gap: 18px; }
  .kk-disk__title { max-width: none; }
}
@media (max-width: 600px) {
  .kk-points-grid { grid-template-columns: 1fr; }
  .kk-point { border-left: none !important; }
  .kk-point:nth-child(2) { border-top: 1px solid var(--u3-line); }
}