/* =========================================================================
   KI & Automatisierung - Block Siro Web Agent (seit 19.10.2026)
   Nur von ki-automatisierung.html geladen. Farben aus style.css.
   Keine Endlosanimation: Bewegung nur beim Einblenden (.auftritt).
   ========================================================================= */

/* Drei Probleme, je mit Loesung */
.ki-wa-probleme{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.ki-wa-probleme > *{min-width:0}
@media (min-width:900px){ .ki-wa-probleme{grid-template-columns:repeat(3,1fr)} }
.ki-wa-problem{background:#fff;border:1px solid var(--blue-100);border-radius:var(--radius-lg);
  padding:var(--space-6);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.ki-wa-problem h3{font-size:var(--text-h3);margin-bottom:var(--space-3)}
.ki-wa-problem > p{color:var(--ink-700);margin-bottom:var(--space-4)}
.ki-wa-loesung{margin:auto 0 0!important;padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--ink-900);color:rgba(255,255,255,.88)!important}
.ki-wa-loesung b{display:block;color:#8ec4e8;font-size:var(--text-sm);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;margin-bottom:var(--space-1)}

/* Einmal -> danach */
.ki-wa-prinzip{display:grid;gap:var(--space-5);align-items:stretch;margin-top:var(--space-8)}
.ki-wa-prinzip > *{min-width:0}
@media (min-width:1000px){ .ki-wa-prinzip{grid-template-columns:.8fr 56px 1.6fr} }
.ki-wa-marke{display:inline-block;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;padding:3px var(--space-3);
  border-radius:var(--radius-pill);margin-bottom:var(--space-3)}
.ki-wa-einmal{background:#fff;border:1.5px dashed var(--blue-400);border-radius:var(--radius-lg);
  padding:var(--space-6);display:flex;flex-direction:column;justify-content:center}
.ki-wa-einmal .ki-wa-marke{background:var(--gray-100);color:var(--ink-700);align-self:flex-start}
.ki-wa-einmal h3{font-size:var(--text-h3);margin-bottom:var(--space-3)}
.ki-wa-einmal p{color:var(--ink-700);margin:0}
.ki-wa-pfeil{display:flex;align-items:center;justify-content:center;color:var(--blue-500)}
.ki-wa-pfeil svg{width:48px;height:48px}
@media (max-width:999px){ .ki-wa-pfeil svg{transform:rotate(90deg)} }
.ki-wa-danach{position:relative;overflow:hidden;background:var(--ink-900);color:#fff;border-radius:var(--radius-lg);
  padding:var(--space-6);display:grid;gap:var(--space-6);align-items:center;box-shadow:var(--shadow-lg)}
.ki-wa-danach > *{min-width:0}
.ki-wa-danach::before{content:"";position:absolute;width:420px;height:420px;right:-140px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(66,149,207,.45),transparent 68%);pointer-events:none}
@media (min-width:640px){ .ki-wa-danach{grid-template-columns:1fr 200px} }
.ki-wa-danach-text{position:relative}
.ki-wa-danach .ki-wa-marke{background:#8ec4e8;color:var(--ink-900)}
.ki-wa-danach h3{color:#fff;font-size:var(--text-h3);margin-bottom:var(--space-4)}
.ki-wa-danach .hakenliste{margin:0}
.ki-wa-danach .hakenliste li{color:rgba(255,255,255,.88)}

/* Stilisiertes Handy, ruhend */
.ki-wa-handy{margin:0 auto;width:200px;position:relative;border-radius:30px;background:#0d0b0c;padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 0 1.5px #4a4647;transform:rotate(4deg)}
@media (prefers-reduced-motion:reduce){ .ki-wa-handy{transform:none} }
.ki-wa-schirm{background:#fff;color:var(--ink-900);border-radius:23px;padding:var(--space-5) var(--space-3) var(--space-3);
  display:flex;flex-direction:column;gap:var(--space-2);min-height:300px}
.ki-wa-schirm span{display:block;font-size:var(--text-xs);line-height:1.4}
.ki-wa-schirm-kopf{font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--blue-600);padding-bottom:var(--space-2);border-bottom:1px solid var(--gray-100)}
.ki-wa-schirm-feld{border:1.5px solid var(--blue-500);border-radius:var(--radius-md);padding:var(--space-2);
  font-style:italic;font-size:var(--text-sm)!important;box-shadow:var(--shadow-focus)}
.ki-wa-schirm-haken{position:relative;padding-left:22px;color:var(--ink-900)}
.ki-wa-schirm-haken::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.ki-wa-schirm-knopf{margin-top:auto;text-align:center;background:var(--blue-500);color:#fff;
  font-weight:var(--weight-semibold);padding:8px;border-radius:var(--radius-md);font-size:var(--text-sm)!important}
.ki-wa h2,.ki-wa h3{-webkit-hyphens:manual;hyphens:manual}