/* ---------------------------------------------------------------
   ars musica, KI-Berater. Farben und Schrift nach CI/ci-spec.md.
   Chatfuehrung im Muster einer Nachrichten-App, damit die Zielgruppe
   zwischen 45 und 65 nichts Neues lernen muss.

   Alle Werte sind an die Variablen unten gebunden und auf .amkib
   begrenzt, damit nichts in das Shop-Theme ausblutet.
   --------------------------------------------------------------- */
.amkib {
  --amkib-magenta: #D24187;
  --amkib-magenta-hover: #bc3a78;
  --amkib-magenta-zart: #DA76AC;
  --amkib-magenta-hauch: #FBEDF5;
  --amkib-anthrazit: #404346;
  --amkib-mauve: #735268;
  --amkib-stahl: #54595F;
  --amkib-hellgrau: #ECEEF0;
  --amkib-titel: #2D2B2B;

  --flaeche: #ffffff;
  --chatgrund: #F4F2F0;
  --rand: #d6d6d6;
  --text: var(--amkib-stahl);
  --text-still: #7c8288;

  --magenta: var(--amkib-magenta);
  --magenta-hover: var(--amkib-magenta-hover);
  --magenta-zart: var(--amkib-magenta-zart);
  --magenta-hauch: var(--amkib-magenta-hauch);
  --anthrazit: var(--amkib-anthrazit);
  --mauve: var(--amkib-mauve);
  --stahl: var(--amkib-stahl);
  --hellgrau: var(--amkib-hellgrau);
  --titelfarbe: var(--amkib-titel);

  --r-btn: 6px;
  --r-blase: 12px;
  --ff: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Grundschrift ruhig lesbar. */
  --fs: 17px;
  --fs-blase: 17px;
  --fs-klein: 15px;

  font-family: var(--ff);
  font-size: var(--fs);
  line-height: 1.6;
  color: var(--text);
  margin: 40px 0;
  clear: both;
}

.amkib *, .amkib *::before, .amkib *::after { box-sizing: border-box; }
.amkib h2 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.3; }
.amkib p { margin: 0; }
.amkib img { max-width: 100%; display: block; }
.amkib button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
.amkib :focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

/* Buttons nach CI: min 45px, Radius 6px, Rahmen konstant 2px, kein Hover-Shift */
.amkib .amkib-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r-btn);
  font-size: 17px; font-weight: 500; border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .19s ease, color .19s ease, border-color .19s ease;
}
.amkib .amkib-btn-primary { background: var(--magenta); color: #fff; }
.amkib .amkib-btn-primary:hover { background: var(--magenta-hover); color: #fff; }
.amkib .amkib-btn-sek { border-color: var(--stahl); color: var(--stahl); background: transparent; }
.amkib .amkib-btn-sek:hover { background: var(--stahl); color: #fff; }
.amkib .amkib-btn svg { width: 19px; height: 19px; flex: none; }

/* --- Der Berater, Nachrichten-App-Muster --------------------------- */
.amkib {
  border: 1px solid var(--rand); border-radius: var(--r-btn); overflow: hidden;
  background: var(--flaeche); box-shadow: 0 2px 10px rgba(64,67,70,.06);
}
.amkib .amkib-kopf {
  display: flex; align-items: center; gap: 13px; padding: 11px 18px;
  background: var(--anthrazit); color: #fff;
}
.amkib .amkib-kopf .amkib-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--mauve), var(--magenta)); color: #fff;
}
.amkib .amkib-kopf .amkib-avatar svg { width: 22px; height: 22px; }
/* Das Shop-Theme gibt Ueberschriften eigene Abstaende und Zeilenhoehen. Die machten
   den Titelblock hoeher als das Zeichen daneben: der Balken wuchs, und Zeichen und
   Text standen versetzt. Beides wird hier festgelegt. */
.amkib .amkib-kopf .amkib-titel { display: grid; gap: 1px; min-width: 0; }
.amkib .amkib-kopf .amkib-titel h2 {
  margin: 0 !important; padding: 0 !important;
  font-size: 19px !important; line-height: 1.25 !important; color: #fff;
}
.amkib .amkib-kopf .amkib-status {
  margin: 0 !important; padding: 0 !important;
  font-size: 14px !important; line-height: 1.3 !important;
  color: #cfd2d5; display: flex; align-items: center; gap: 7px;
}
.amkib .amkib-kopf .amkib-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #6fcf7f; }
/* Der Verlauf startet kompakt, waechst mit dem Gespraech und hoert bei gut der halben
   Bildschirmhoehe auf. So bleibt das Eingabefeld immer sichtbar, ohne die Seite zu scrollen. */
.amkib .amkib-verlauf {
  background: var(--chatgrund); padding: 20px 18px; display: grid; gap: 16px;
  min-height: 180px; max-height: min(560px, 55vh); overflow-y: auto; align-content: start;
  scroll-behavior: smooth;
}
.amkib .amkib-tag {
  justify-self: center; font-size: 14px; color: var(--text-still);
  background: var(--flaeche); border-radius: 100px; padding: 5px 15px;
}

.amkib .amkib-reihe { display: grid; gap: 6px; max-width: min(640px, 88%); }
.amkib .amkib-reihe.amkib-ich { justify-self: end; justify-items: end; }
.amkib .amkib-reihe.amkib-er { justify-self: start; }

.amkib .amkib-blase {
  position: relative; padding: 14px 17px; border-radius: var(--r-blase);
  font-size: var(--fs-blase); line-height: 1.55; color: var(--titelfarbe);
  box-shadow: 0 1px 2px rgba(64,67,70,.12);
}
.amkib .amkib-reihe.amkib-er .amkib-blase { background: var(--flaeche); border-top-left-radius: 3px; }
.amkib .amkib-reihe.amkib-ich .amkib-blase { background: var(--magenta-hauch); border-top-right-radius: 3px; }
/* Schwaenzchen wie in einer Nachrichten-App */
.amkib-reihe.amkib-er .amkib-blase::before,
.amkib .amkib-reihe.amkib-ich .amkib-blase::before {
  content: ""; position: absolute; top: 0; width: 12px; height: 14px;
}
.amkib .amkib-reihe.amkib-er .amkib-blase::before { left: -9px; background: var(--flaeche); clip-path: polygon(100% 0, 100% 100%, 0 0); }
.amkib .amkib-reihe.amkib-ich .amkib-blase::before { right: -9px; background: var(--magenta-hauch); clip-path: polygon(0 0, 0 100%, 100% 0); }

.amkib .amkib-blase strong { font-weight: 600; color: var(--titelfarbe); }
.amkib .amkib-blase ul { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.amkib .amkib-blase p + p { margin-top: 10px; }
/* EINE Groesse fuer alles im Gespraech. Das Shop-Theme setzt im Produkttext eigene
   Groessen fuer p, li, span und a; ohne Vorrang gewinnt mal die eine, mal die andere
   Regel, und Frage, Antwort und Aufzaehlung sehen unterschiedlich aus. Nur der
   Zeitstempel bleibt klein. */
.amkib .amkib-verlauf .amkib-blase,
.amkib .amkib-verlauf .amkib-blase * {
  font-size: var(--fs-blase) !important;
  line-height: 1.55 !important;
}
.amkib .amkib-verlauf .amkib-blase .amkib-zeit,
.amkib .amkib-verlauf .amkib-blase .amkib-zeit * {
  font-size: 13px !important;
}
.amkib .amkib-zeit {
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  font-size: 13px; color: var(--text-still); margin-top: 7px;
}
.amkib .amkib-zeit svg { width: 16px; height: 16px; color: var(--magenta); }

/* Telefonnummer und Kontaktformular immer als erkennbarer Link */
.amkib .amkib-blase a.amkib-tel { color: inherit; text-decoration: none; white-space: nowrap; font-weight: 500; }
.amkib .amkib-blase a.amkib-tel svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 5px; color: var(--magenta); }
.amkib .amkib-blase a.amkib-tel span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.amkib .amkib-blase a.amkib-tel:hover span { text-decoration-thickness: 2px; }
.amkib .amkib-blase a.amkib-kontakt { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.amkib .amkib-blase a.amkib-kontakt:hover { text-decoration-thickness: 2px; }


/* Links im Antworttext: Produktname und Seitenverweis. Beide dezent unterstrichen,
   damit man sie als anklickbar erkennt, ohne dass der Text bunt wird. */
.amkib .amkib-blase a.amkib-produkt,
.amkib .amkib-blase a.amkib-seite {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; font-weight: 500;
}
.amkib .amkib-blase a.amkib-produkt:hover,
.amkib .amkib-blase a.amkib-seite:hover { text-decoration-thickness: 2px; color: var(--magenta); }

/* Quellenangabe */
.amkib .amkib-quelle {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-klein);
  color: var(--stahl); background: var(--hellgrau); border-radius: 100px;
  padding: 8px 15px; text-decoration: none; min-height: 40px;
}
.amkib .amkib-quelle:hover { background: var(--magenta-zart); color: #fff; }
.amkib .amkib-quelle svg { width: 16px; height: 16px; }

/* Empfohlene Produkte als kleine Kacheln mit Bild, Hersteller, Name, Preis */
.amkib .amkib-kacheln { display: grid; gap: 10px; margin-top: 4px; }
.amkib .amkib-kachel {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-btn);
  padding: 11px 14px; text-decoration: none; color: inherit; min-height: 78px;
  transition: border-color .19s ease, background-color .19s ease;
}
.amkib .amkib-kachel:hover { border-color: var(--magenta); background: var(--magenta-hauch); }
.amkib .amkib-kachel .amkib-bild {
  width: 62px; height: 62px; border-radius: 4px; background: #fff; border: 1px solid var(--rand);
  display: grid; place-items: center; overflow: hidden;
}
.amkib .amkib-kachel .amkib-bild img { max-width: 88%; max-height: 88%; object-fit: contain; }
.amkib .amkib-kachel .amkib-hersteller { font-size: 14px; color: var(--text-still); text-transform: uppercase; letter-spacing: .04em; }
.amkib .amkib-kachel .amkib-kname { font-size: 18px; font-weight: 500; color: var(--titelfarbe); line-height: 1.3; }
.amkib .amkib-kachel .amkib-kpreis { font-size: 19px; color: var(--stahl); white-space: nowrap; }

/* Vorschlaege als grosse, gut treffbare Flaechen. Zartgrau, damit sie sich klar vom
   weissen Eingabefeld absetzen und nicht mit ihm verwechselt werden. */
.amkib .amkib-vorschlaege { display: grid; gap: 10px; }
.amkib .amkib-vorschlaege > .amkib-vtitel { font-size: var(--fs-klein); color: var(--text-still); }
.amkib .amkib-vliste { display: flex; flex-wrap: wrap; gap: 10px; }
.amkib .amkib-chip {
  background: var(--hellgrau); border: 1px solid transparent; border-radius: 100px;
  padding: 12px 20px; font-size: 17px; min-height: 50px; color: var(--text); text-align: left;
}
.amkib .amkib-chip:hover { border-color: var(--magenta); background: var(--magenta-hauch); color: var(--titelfarbe); }

.amkib .amkib-eingabe { border-top: 1px solid var(--rand); background: var(--flaeche); padding: 16px 18px 18px; display: grid; gap: 14px; }
.amkib .amkib-eingabe > label { font-size: var(--fs-klein); color: var(--text-still); }
.amkib .amkib-feldzeile { display: flex; gap: 12px; align-items: center; }
/* Ein zarter Magenta-Schimmer sagt ohne Worte: hier wird geschrieben. */
.amkib .amkib-feld {
  /* min-width 0: sonst schrumpft das Feld auf dem Handy nicht und schiebt den Sendeknopf aus dem Rahmen. */
  flex: 1; min-width: 0; display: flex; align-items: center; min-height: 56px;
  background: var(--flaeche); border: 2px solid var(--magenta-zart); border-radius: 100px; padding: 0 20px;
  box-shadow: 0 0 0 4px rgba(210, 65, 135, .10);
  transition: box-shadow .19s ease, border-color .19s ease;
}
.amkib .amkib-feld:hover { box-shadow: 0 0 0 5px rgba(210, 65, 135, .14); }
.amkib .amkib-feld:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 5px rgba(210, 65, 135, .20); }
.amkib .amkib-feld input { flex: 1; width: 100%; min-width: 0 !important; border: 0; background: transparent; font: inherit; font-size: 18px; color: inherit; outline: none; }
.amkib .amkib-feld input::placeholder { color: var(--text-still); }
.amkib .amkib-senden {
  width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0;
  background: var(--magenta); color: #fff; display: grid; place-items: center;
}
.amkib .amkib-senden:hover { background: var(--magenta-hover); }
.amkib .amkib-senden svg { width: 24px; height: 24px; }

.amkib .amkib-hinweis { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-klein); color: var(--text-still); }
.amkib .amkib-hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }

.amkib .amkib-tippt { display: inline-flex; gap: 6px; padding: 18px 19px; }
.amkib .amkib-tippt i { width: 9px; height: 9px; border-radius: 50%; background: var(--text-still); animation: hopf 1.1s infinite; }
.amkib .amkib-tippt i:nth-child(2) { animation-delay: .15s; }
.amkib .amkib-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes hopf { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .amkib-tippt i { animation: none; opacity: .6; } }

/* Uebergabe an den Menschen */
.amkib .amkib-uebergabe { display: grid; gap: 12px; margin-top: 12px; }
.amkib .amkib-uebergabe .amkib-wege { display: flex; flex-wrap: wrap; gap: 10px; }

.amkib .amkib-bewertung { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text-still); flex-wrap: wrap; }
.amkib .amkib-bewertung button {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 100px;
  padding: 7px 16px; font-size: 15px; min-height: 42px;
}
.amkib .amkib-bewertung button:hover { border-color: var(--magenta); color: var(--magenta); }
.amkib .amkib-bewertung button[aria-pressed="true"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }

/* Schmale Bildschirme: alles untereinander, nichts quer scrollen */
@media (max-width: 720px) {
  .amkib .amkib-reihe { max-width: 94%; }
  .amkib .amkib-vliste { flex-direction: column; }
  .amkib .amkib-chip { width: 100%; }
  .amkib .amkib-kachel { grid-template-columns: 54px 1fr; }
  .amkib .amkib-kachel .amkib-kpreis { grid-column: 2; }
  .amkib .amkib-wege .amkib-btn { width: 100%; }
}

/* Dunkle Darstellung, falls das Theme sie je anbietet */
@media (prefers-color-scheme: dark) {
  .amkib.amkib-dunkel {
    --flaeche: #2f3336; --chatgrund: #24272a; --rand: #4b5055;
    --text: #e8eaec; --text-still: #a7acb1; --titelfarbe: #ffffff;
    --hellgrau: #3a3e42; --magenta-hauch: #4a3341;
  }
}

/* Fuer Vorleseprogramme sichtbar, fuer das Auge nicht: die Beschriftung des
   Eingabefelds. Am Bildschirm ist selbsterklaerend, wo man schreibt. */
.amkib .amkib-nurvorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Warenkorb-Karte: ruhig, im Stil einer Blase, kein Verkaufsbanner --- */
.amkib .amkib-wk {
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-blase);
  padding: 14px 17px; display: grid; gap: 10px; max-width: 520px;
  box-shadow: 0 1px 2px rgba(64,67,70,.12);
}
.amkib .amkib-wk p { margin: 0 !important; font-size: var(--fs-blase) !important; line-height: 1.45 !important; }
.amkib .amkib-wk .amkib-wk-frage { font-weight: 500; color: var(--titelfarbe); }
.amkib .amkib-wk-posten { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0; }
.amkib .amkib-wk-posten input[type="checkbox"] {
  width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--magenta); cursor: pointer;
}
.amkib .amkib-wk-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.amkib .amkib-wk-name { font-size: var(--fs-blase); color: var(--titelfarbe); line-height: 1.35; }
.amkib .amkib-wk-preis { font-size: var(--fs-klein); color: var(--stahl); }
.amkib .amkib-wk-variante {
  margin-top: 6px; min-height: 44px; width: 100%; max-width: 360px; padding: 0 12px;
  border: 1px solid var(--rand); border-radius: var(--r-btn); background: #fff;
  font: inherit; font-size: var(--fs-klein); color: var(--text);
}
.amkib .amkib-wk .amkib-wk-hinweis { font-size: var(--fs-klein) !important; color: var(--text-still); }
.amkib .amkib-wk .amkib-wk-hinweis:empty { display: none; }
.amkib .amkib-wk-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }
.amkib .amkib-wk-knoepfe .amkib-btn { min-height: 46px; font-size: 16px; }
.amkib .amkib-wk-knoepfe .amkib-btn:disabled { opacity: .6; cursor: default; }
.amkib .amkib-wk .amkib-wk-still { color: var(--text-still); }
.amkib .amkib-wk .amkib-wk-fertig { color: var(--titelfarbe); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amkib .amkib-wk-fertig svg { width: 20px; height: 20px; color: var(--magenta); flex: none; }
.amkib .amkib-wk-fertig a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: 500; }
.amkib .amkib-wk-fertig a:hover { color: var(--magenta); text-decoration-thickness: 2px; }
@media (max-width: 600px) {
  .amkib .amkib-wk-knoepfe .amkib-btn { width: 100%; }
}

/* Handy: Die Spalte des Eingabebereichs darf nie breiter als der Rahmen werden.
   Ohne minmax(0,1fr) zog der laengste Vorschlag die Spalte auf, und Sendeknopf und
   Vorschlaege ragten 19px heraus. Lange Vorschlaege brechen deshalb um. */
.amkib .amkib-eingabe { grid-template-columns: minmax(0, 1fr); }
.amkib .amkib-vorschlaege, .amkib .amkib-vliste { min-width: 0; }
.amkib .amkib-chip { white-space: normal !important; min-width: 0; max-width: 100%; }