/* ================= Mit und ohne KI =================
   Die Seite lebt von der Gegenüberstellung. Deshalb überall zwei oder drei
   Spalten mit demselben Satzbau: Der Unterschied entsteht im Inhalt, nicht
   in der Gestaltung. */

/* ---------- Ohne und mit ---------- */
.ki-zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,20px)}
@media(max-width:820px){.ki-zwei{grid-template-columns:1fr}}
.ki-k{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(24px,3vw,34px)}
.ki-mit{background:var(--navy);border-color:transparent}
.ki-lab{display:inline-block;font-size:.63rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;border-radius:100px;padding:5px 13px;margin-bottom:15px;
  color:var(--grau);background:var(--flaeche)}
.ki-mit .ki-lab{color:#fff;background:var(--rot)}
.ki-k b{display:block;font-size:clamp(1.14rem,1.8vw,1.36rem);font-weight:700;
  color:var(--navy);letter-spacing:-.03em;line-height:1.28;margin-bottom:12px}
.ki-mit b{color:#fff}
.ki-k p{font-size:.94rem;font-weight:300;color:var(--grau);line-height:1.7;margin:0 0 16px}
.ki-mit p{color:rgba(255,255,255,.78)}
.ki-k ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:9px;
  padding-top:16px;border-top:1px solid var(--linie)}
.ki-mit ul{border-top-color:rgba(255,255,255,.18)}
.ki-k li{display:grid;grid-template-columns:17px 1fr;gap:11px;font-size:.89rem;
  font-weight:300;color:var(--grau);line-height:1.55}
.ki-mit li{color:rgba(255,255,255,.82)}
.ki-k li::before{content:'';width:16px;height:16px;border-radius:50%;margin-top:3px;
  background-color:var(--rot);background-repeat:no-repeat;background-position:center;
  background-size:9px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.4l2.4 2.4L9.6 3.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* ---------- Der Beispielvergleich ---------- */
.kiv{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,16px)}
.kiv-z{background:#fff;border:1px solid var(--linie);border-radius:var(--r-l);
  padding:clamp(20px,2.4vw,28px)}
.kiv-t{display:block;font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:700;
  color:var(--navy);letter-spacing:-.026em;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--linie)}
.kiv-sp{display:grid;grid-template-columns:1fr 1fr .85fr;gap:clamp(14px,2vw,24px)}
@media(max-width:860px){.kiv-sp{grid-template-columns:1fr;gap:14px}}
.kiv-sp span{display:block;font-size:.62rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--grau-h);margin-bottom:6px}
.kiv-sp p{font-size:.89rem;font-weight:300;color:var(--grau);line-height:1.65;margin:0}
.kiv-u span{color:var(--rot)}
.kiv-u p{color:var(--text)}

/* ---------- Die sechs Zusagen ---------- */
.ki-regeln{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,18px)}
@media(max-width:900px){.ki-regeln{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ki-regeln{grid-template-columns:1fr}}
.kir{background:var(--flaeche);border-radius:var(--r-l);padding:clamp(20px,2.4vw,26px)}
.kir-nr{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--rot);color:#fff;font-size:.8rem;font-weight:800;margin-bottom:13px}
.kir b{display:block;font-size:1.02rem;font-weight:700;color:var(--navy);
  letter-spacing:-.024em;margin-bottom:7px}
.kir small{display:block;font-size:.87rem;font-weight:300;color:var(--grau);line-height:1.6}