/* ============================================================
   Startseite — Zusatzstyles (kh-*). Gemeinsame Bausteine in sections.css.
   ============================================================ */

/* ---------- Hero: Foto mit schwebenden Karten ---------- */
.kh-hero-grid { align-items: center; }
.kh-hero-visual { position: relative; padding: 2.2rem 0 2.6rem; }
.kh-hero-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 5 / 5.4; }
.kh-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; display: block; }
.kh-hero-name { position: absolute; right: 14px; bottom: 14px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(10, 12, 30, .6); padding: .3rem .7rem; border-radius: 8px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.kh-float { position: absolute; z-index: 2; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: .8rem; }
.kh-float-ki { top: 58%; left: -2.6rem; display: flex; flex-direction: column; gap: .55rem; }
.kh-float-label { font-size: .72rem; font-weight: 700; color: var(--text-faint); letter-spacing: .04em; }
.kh-float-job { right: -2.2rem; top: 42%; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; }
.kh-float-job div, .kh-result-job div { display: flex; flex-direction: column; line-height: 1.3; }
.kh-float-job b, .kh-result-job b { font-size: .9rem; color: var(--text); }
.kh-float-job span, .kh-result-job span { font-size: .78rem; color: var(--text-muted); }
.kh-notif-ico { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E") center / 18px no-repeat; }
@media (max-width: 1100px) { .kh-float-ki { left: -.8rem; } .kh-float-job { right: -.6rem; } }
@media (max-width: 900px) {
  .kh-hero-visual { padding: 0 0 2.6rem; max-width: 520px; }
  .kh-hero-name { display: none; }
  .kh-hero-photo { aspect-ratio: 16 / 12; }
  .kh-float-ki { top: auto; bottom: 0; left: .6rem; }
  .kh-float-job { display: none; }
}

/* ---------- Leistungen: 2 große Karten mit Grafik ---------- */
.kh-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.kh-service { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.kh-service-visual { background: var(--surface); min-height: 280px; padding: 1.6rem; display: flex; align-items: center; justify-content: center; gap: 1rem; border-bottom: 1px solid var(--border); }
.kh-sv-ki { flex-direction: column; }
.kh-sv-ki .kx-bubble { align-self: flex-end; margin-right: 8%; }
.kh-sv-ki .kx-reco { align-self: flex-start; margin-left: 8%; }
.kh-sv-ki .kx-systems { margin-top: .4rem; justify-content: center; }
.kh-service-copy { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.kh-service-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: .4rem; }
.kh-service-copy > p { color: var(--text-muted); margin-top: .6rem; }
.kh-gets { margin: 1.2rem 0 1.6rem; gap: .55rem; }
.kh-gets li { font-size: .95rem; }
.kh-service-copy .btn { margin-top: auto; align-self: flex-start; }

.kh-mini-ad { width: 170px; background: #fff; color: #0d0d0d; border-radius: 14px; padding: .55rem; box-shadow: var(--shadow); transform: rotate(-3deg); }
.kh-mini-ad-head { display: flex; gap: .4rem; align-items: center; margin-bottom: .45rem; }
.kh-mini-ad-head span { width: 22px; height: 22px; border-radius: 50%; background: #e4e6eb; }
.kh-mini-ad-head div { display: flex; flex-direction: column; line-height: 1.15; }
.kh-mini-ad-head b { font-size: .68rem; }
.kh-mini-ad-head em { font-style: normal; font-size: .58rem; color: #777; }
.kh-mini-ad img { width: 100%; aspect-ratio: 4 / 4.3; object-fit: cover; object-position: 60% 35%; border-radius: 8px; display: block; }
.kh-mini-ad-cta { display: block; text-align: center; font-size: .7rem; color: #1570ef; padding: .45rem 0 .15rem; }
.kh-mini-form { width: 160px; background: #fff; color: #0d0d0d; border-radius: 14px; padding: .8rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .4rem; transform: rotate(2.5deg) translateY(18px); }
.kh-mini-form b { font-size: .78rem; }
.kh-mini-form span { font-size: .66rem; color: #888; border: 1px solid #e3e5ea; border-radius: 8px; padding: .4rem .5rem; }
.kh-mini-form em { font-style: normal; text-align: center; font-size: .68rem; font-weight: 700; color: #fff; background: #1570ef; border-radius: 999px; padding: .45rem 0; }
@media (max-width: 860px) { .kh-services { grid-template-columns: 1fr; } }

/* ---------- Ergebnisse ---------- */
.kh-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.kh-result-top { display: flex; flex-direction: column; gap: .5rem; }
.kh-result-top b { font-family: var(--font-display); font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--accent); letter-spacing: -.02em; }
.kh-result-top span { color: var(--text); font-size: 1.02rem; line-height: 1.45; max-width: 40ch; }
.kh-result-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 1.4rem 0 1rem; }
.kh-result-pills span { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: var(--surface); border-radius: var(--radius); padding: .8rem .4rem; }
.kh-result-pills em { font-style: normal; font-size: .78rem; font-weight: 700; color: var(--text); }
.kh-result-pills i, .kh-result-job i { font-style: normal; }
.kh-result-job { display: flex; align-items: center; gap: .8rem; background: var(--surface); border-radius: var(--radius); padding: 1rem; margin: 1.4rem 0 1rem; }
.kh-result-job i { margin-left: auto; }
.kh-link { margin-top: auto; padding-top: .8rem; font-weight: 600; color: var(--accent); }
.kh-link:hover { color: var(--accent-hover); }
@media (max-width: 860px) { .kh-results { grid-template-columns: 1fr; } }

/* ---------- Kontakt im Banner ---------- */
.kh-contact { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }
.kh-contact li { display: flex; flex-direction: column; font-size: .98rem; color: #fff; }
.kh-contact span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.72); }
.kh-contact a { color: #fff; font-weight: 600; }
.kh-contact a:hover { text-decoration: underline; }
.kh-result-top .kh-result-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.kh-result-top h3 { font-size: clamp(1.35rem, 2.3vw, 1.75rem); line-height: 1.2; }
.kh-result-top > span:not(.kh-result-kicker) { color: var(--text-muted); }
.kh-h1 span { display: block; }
.kh-h1 span + span { color: var(--accent); }