/* ====================  css/ki-chatbot.css  ====================
   Seite /ki-chatbot/ (06.10.2026): zwei Chatfenster als Mockup und die Gegenüberstellung
   „eigener KI-Chatbot / Chatbot-App von der Stange“.
   Die Chatfenster folgen den Regeln aus mockups.css: HTML statt Bild, die Marke heißt „ihrshop“,
   damit niemand das Beispiel für eine Kundenreferenz hält. Grundform und Schatten kommen von .fenster. */

/* ---------- Chatfenster ---------- */
.fenster--chat{
  width: min(420px, 100%);
  font: 13px/1.55 var(--schrift);
  background: #f6f7fa;
}
.chat-kopf{
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff;
  border-bottom: 1px solid #e6e9f0;
}
.chat-zeichen{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, var(--blau), var(--violett));
}
.chat-kopf .b{ display: block; font-size: 12.5px; font-weight: 600; color: #1f2328; line-height: 1.3 }
.chat-kopf small{ display: block; font-size: 10.5px; color: #6b7280; line-height: 1.3 }

/* .fenster .chat-frage statt .chat-frage: .fenster p erbt sonst die dunkle Schrift auf den dunklen Grund */
.fenster .chat-frage{
  margin: 16px 16px 0 auto; width: fit-content; max-width: 80%;
  padding: 9px 13px; border-radius: 14px 14px 4px 14px;
  background: #1f2328; color: #fff;
}
.chat-antwort{
  margin: 12px 16px 0; max-width: 88%;
  padding: 10px 13px; border-radius: 14px 14px 14px 4px;
  background: #fff; color: #1f2328;
  box-shadow: 0 0 0 1px #e6e9f0;
}
.chat-antwort .b{ font-weight: 700 }
.fenster .chat-hinweis{
  margin: 7px 16px 0; font-size: 10.5px; color: #6b7280;
  display: flex; align-items: center; gap: 6px;
}
.chat-hinweis::before{
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blau), var(--violett));
}

/* Produktkarte mit Knopf, wie sie im Shop unter der Antwort steht */
.chat-karte{
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  margin: 10px 16px 0; max-width: 88%;
  padding: 8px 8px 8px 8px; border-radius: 12px;
  background: #fff; box-shadow: 0 0 0 1px #e6e9f0;
}
.chat-bild{
  position: relative; width: 42px; height: 42px; border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 30%, #f3f6fb 0%, #e3e9f2 60%, #d3dbe8 100%);
}
.chat-bild::before{            /* Flasche */
  content: ""; position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 14px; height: 24px; border-radius: 4px 4px 3px 3px;
  background: linear-gradient(90deg, #1d3c74, #3060f0 45%, #1d3c74);
}
.chat-bild::after{             /* Etikett */
  content: ""; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 10px; height: 8px; border-radius: 1px; background: #f6f3ee;
}
.chat-karte .b{ display: block; font-size: 12px; font-weight: 600; color: #1f2328; line-height: 1.3 }
.chat-karte small{ display: block; font-size: 11px; color: #6b7280; line-height: 1.3 }
.chat-knopf{
  padding: 7px 10px; border-radius: 8px;
  background: #1f2328; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.fenster .chat-eingabe{
  margin: 16px; padding: 9px 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #dfe2ea;
  color: #9aa0ab; font-size: 12px;
}

/* ---------- Gegenüberstellung ----------
   Text in allen Zellen, keine Zahlen: links das Merkmal, dann die zwei Wege. Die Spalte „eigener
   KI-Chatbot“ trägt einen leisen Grund, damit das Auge zeilenweise vergleicht und nicht spaltenweise
   liest. Im schmalen Fenster wird jede Zeile ein Block, die Spaltennamen kommen aus data-spalte. */
.gegenueber-block{ position: relative; margin-top: clamp(28px, 4vh, 44px); min-width: 0 }
/* Derselbe weiche Grund wie bei .liste und .ablauf (welt.css): sonst liegen Punkte der Wolke in der Schrift */
.gegenueber-block::before, .app-reicht::before{
  content: "";
  position: absolute; inset: -4vh -5vw;
  background: radial-gradient(115% 92% at 35% 50%,
    rgba(5,6,12,.95) 0%, rgba(5,6,12,.82) 52%, transparent 84%);
  z-index: -1; pointer-events: none;
}
.gegenueber{
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: .94rem; line-height: 1.55;
}
.gegenueber caption{
  text-align: left; caption-side: top;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-fern); padding-bottom: 18px;
}
.gegenueber col.merkmal{ width: 22% }
.gegenueber thead th{
  text-align: left; vertical-align: bottom; font-weight: 500;
  font-size: .98rem; color: var(--text);
  padding: 0 clamp(14px, 2vw, 24px) 14px;
  border-bottom: 1px solid var(--text-leise);
}
.gegenueber thead th:first-child{ padding-left: 0 }
.gegenueber thead th.eigen{ color: #fff }
.gegenueber thead th.eigen::before{
  content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--blau), var(--violett)); translate: 0 -1px;
}
.gegenueber tbody th{
  text-align: left; vertical-align: top; font-weight: 400;
  color: var(--text); padding: 16px clamp(14px, 2vw, 24px) 16px 0;
  border-bottom: 1px solid var(--linie);
}
.gegenueber tbody td{
  vertical-align: top; color: var(--text-leise);
  padding: 16px clamp(14px, 2vw, 24px);
  border-bottom: 1px solid var(--linie);
}
.gegenueber tbody td.eigen{
  color: var(--text);
  background: linear-gradient(90deg, rgba(48,96,240,.10), rgba(156,24,252,.06));
}
.gegenueber-fuss{
  margin-top: 18px; font-size: .86rem; color: var(--text-leise); max-width: 70ch;
}

@media (max-width: 760px){
  .gegenueber, .gegenueber tbody, .gegenueber tr, .gegenueber th, .gegenueber td{ display: block }
  .gegenueber thead{ display: none }
  .gegenueber caption{ display: block }   /* als Tabellentitel bliebe sie im Block-Modus wortbreit */
  .gegenueber tr{ padding: 20px 0; border-bottom: 1px solid var(--linie) }
  .gegenueber tbody th, .gegenueber tbody td{ border: 0; padding: 0 }
  .gegenueber tbody th{ font-weight: 500; margin-bottom: 10px }
  .gegenueber tbody td{ padding: 10px 12px; border-radius: 2px }
  .gegenueber tbody td + td{ margin-top: 6px }
  .gegenueber tbody td::before{
    content: attr(data-spalte); display: block; margin-bottom: 4px;
    font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-fern);
  }
  .gegenueber tbody td.eigen::before{ color: var(--text-leise) }
}

/* Der ehrliche Nachsatz: wann eine fertige App genügt */
.app-reicht{
  position: relative; margin-top: clamp(36px, 5vh, 56px); max-width: 64ch;
  padding-left: 22px; border-left: 2px solid var(--linie);
}
.app-reicht h3{ margin-bottom: .5em }
.app-reicht p{ color: var(--text-leise) }