/* ═══════════════════════════════════════════════════════════
   Seiten-CSS, Poolbau (Neubau)
   Eigenes Bauteil: Kostentreiber-Liste (.kt)
   ═══════════════════════════════════════════════════════════ */

.kt{display:grid; gap:1rem}
.kt__row{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.3rem; align-items:center;
  min-width:0; padding:1.5rem 1.7rem; border-radius:var(--r);
  border:1px solid var(--grey); background:#fff;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.kt__row:hover{transform:translateX(4px); border-color:#B9CEDE; box-shadow:0 20px 40px -30px rgba(0,58,99.4)}
.kt__ico{color:var(--navy); flex:none}
.kt__body{min-width:0}
.kt__body h3{font-size:1.05rem; font-weight:700; color:var(--deep); margin-bottom:.35rem}
.kt__body p{color:var(--muted); font-size:.93rem}
.kt__dir{
  font-family:var(--ff-d); font-size:.7rem; font-weight:700; letter-spacing:.03em;
  white-space:nowrap; padding:.4rem .75rem; border-radius:999px; text-align:center;
  justify-self:end;
}
.kt__dir--up{background:#FFF1E0; color:#8A4B00}
.kt__dir--down{background:var(--water); color:var(--deep)}

@media(max-width:720px){
  .kt__row{grid-template-columns:auto 1fr; row-gap:.8rem}
  .kt__dir{grid-column:1/-1; justify-self:start}
}

/* Startzustand für Bewegung, via [data-rise], generisch von app.js gehandhabt */
@medianot all{
  .kt__row{transition:none}
}