/* KI-Check — erzeugt von build.py aus index.html und themes/. Nicht von Hand ändern. */

.kf {
  --kf-schrift: inherit;
  --kf-schrift-titel: inherit;
  --kf-titel-gewicht: 700;
  --kf-titel-transform: none;
  --kf-titel-laufweite: -.02em;
  --kf-fett: 600;
  --kf-tinte: #17191c;
  --kf-text2: #33383e;
  --kf-leise: #5b6168;
  --kf-still: #8d9197;
  --kf-linie: #e2e4e2;
  --kf-linie-stark: #cfd4d2;
  --kf-grund: #f4f5f4;          /* leise Flächen: Chips, Hinweiskasten */
  --kf-karte: #ffffff;
  --kf-karte-rand: #e2e4e2;
  --kf-karte-radius: 18px;
  --kf-karte-schatten: 0 1px 2px rgba(16, 24, 24, .04), 0 14px 36px rgba(16, 60, 64, .07);
  --kf-feld: #ffffff;           /* Eingaben und Auswahl-Kacheln */
  --kf-feld-radius: 12px;
  --kf-griff: #ffffff;
  --kf-spur: #e3e7e6;
  --kf-akzent: #1aa2ad;         /* Türkis aus dem Kiivoo-Symbol */
  --kf-akzent-text: #13808a;
  --kf-akzent-flaeche: #e3f4f5;
  --kf-knopf: #13808a;          /* AA-Kontrast zu Weiß */
  --kf-knopf-hover: #0e6c75;
  --kf-knopf-text: #ffffff;
  --kf-knopf-rand: 0;
  --kf-knopf-radius: 11px;
  --kf-knopf-schrift: 16px;
  --kf-knopf-transform: none;
  --kf-knopf-laufweite: normal;
  --kf-fokus: rgba(26, 162, 173, .45);
  --kf-fokus-weich: rgba(26, 162, 173, .2);
  --kf-a: #0e6c75;
  --kf-b: #8f5a00;
  --kf-b-flaeche: #f9edd3;
  --kf-b-punkt: #8f5a00;
  --kf-c: #4f545a;
  --kf-c-flaeche: #eceeec;
  --kf-c-punkt: #4f545a;
  --kf-fehler: #b3261e;
}

/* ── Funnel (alles unter .kf, damit es sich einbetten lässt) ──
   Farben, Schriften und Radien hängen ausschließlich an den --kf-Variablen.
   Eine Zielseite überschreibt sie auf .kf (siehe themes/). */
.kf, .kf *, .kf *::before, .kf *::after { box-sizing: border-box; }
.kf { font-family: var(--kf-schrift); font-size: 16px; line-height: 1.55; color: var(--kf-tinte); text-align: left; }
.kf h1, .kf h2, .kf h1:focus-visible, .kf h2:focus-visible { outline: none; }
.kf-karte {
  background: var(--kf-karte); border: 1px solid var(--kf-karte-rand); border-radius: var(--kf-karte-radius);
  padding: 36px 40px 32px; box-shadow: var(--kf-karte-schatten);
}
@media (max-width: 560px) { .kf-karte { padding: 24px 18px 22px; } }
.kf-rein-vor { animation: kfVor .28s ease both; }
.kf-rein-zurueck { animation: kfZurueck .28s ease both; }
@keyframes kfVor { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes kfZurueck { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kf-rein-vor, .kf-rein-zurueck { animation: none; } }

.kf-marke { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.kf-marke img { width: 40px; height: 40px; display: block; }
.kf-marke-name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--kf-tinte); }
.kf-marke-name span { color: var(--kf-leise); font-weight: 400; }

.kf .kf-eyebrow {
  font-size: 12.5px; font-weight: var(--kf-fett); letter-spacing: .08em; text-transform: uppercase;
  color: var(--kf-akzent-text); margin: 0 0 8px;
}
.kf h1, .kf h2 {
  font-family: var(--kf-schrift-titel); font-weight: var(--kf-titel-gewicht); text-transform: var(--kf-titel-transform);
  letter-spacing: var(--kf-titel-laufweite); color: var(--kf-titel-farbe, var(--kf-tinte)); text-wrap: balance;
}
.kf h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; margin: 0 0 14px; }
.kf h2 { font-size: clamp(22px, 3.6vw, 27px); line-height: 1.25; margin: 0 0 8px; }
.kf h2.kf-gross { font-size: clamp(26px, 4.4vw, 34px); }
.kf p { margin: 0 0 12px; color: inherit; }
.kf strong, .kf b { color: inherit; font-weight: var(--kf-fett); }
.kf .kf-lead { font-size: 18px; color: var(--kf-text2); }
.kf .kf-hilfe { color: var(--kf-leise); margin-bottom: 22px; }
.kf .kf-ehrlich {
  border-left: 3px solid var(--kf-akzent); padding: 2px 0 2px 14px; margin: 18px 0 26px;
  font-weight: var(--kf-fett); color: var(--kf-tinte);
}
.kf-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.kf-meta li {
  font-size: 13.5px; color: var(--kf-leise); background: var(--kf-grund);
  border: 1px solid var(--kf-linie); border-radius: 99px; padding: 4px 12px; margin: 0;
}

/* Kopfzeile mit Fortschritt */
.kf-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; min-height: 28px; }
.kf-zaehler { font-size: 13.5px; color: var(--kf-leise); font-variant-numeric: tabular-nums; }
.kf-textknopf {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px;
  color: var(--kf-leise); cursor: pointer;
}
.kf-textknopf:hover { color: var(--kf-tinte); }
.kf-fortschritt { height: 4px; background: var(--kf-spur); border-radius: 99px; overflow: hidden; margin-bottom: 30px; }
.kf-fortschritt span { display: block; height: 100%; background: var(--kf-akzent); border-radius: 99px; transition: width .35s ease; }

/* Knöpfe */
.kf-btn {
  display: inline-flex; align-items: center; gap: 8px; border: var(--kf-knopf-rand); cursor: pointer;
  background: var(--kf-knopf); color: var(--kf-knopf-text); font: inherit; font-weight: var(--kf-fett); font-size: var(--kf-knopf-schrift);
  text-transform: var(--kf-knopf-transform); letter-spacing: var(--kf-knopf-laufweite);
  padding: 13px 24px; border-radius: var(--kf-knopf-radius); text-decoration: none; line-height: 1.3;
  transition: background .15s ease, transform .1s ease;
}
.kf-btn:hover { background: var(--kf-knopf-hover); color: var(--kf-knopf-text); }
.kf-btn:active { transform: translateY(1px); }
.kf-btn.kf-btn-zweit { background: var(--kf-feld); color: var(--kf-tinte); border: 1.5px solid var(--kf-linie-stark); }
.kf-btn.kf-btn-zweit:hover { background: var(--kf-grund); color: var(--kf-tinte); }
.kf :focus-visible { outline: 3px solid var(--kf-fokus); outline-offset: 2px; }
.kf-fuss { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.kf .kf-fehler { color: var(--kf-fehler); font-size: 14.5px; margin: 0 auto 0 0; }

/* Zahl */
.kf-zahl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kf-zahl label { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--kf-leise); margin: 0; }
.kf-zahl input {
  width: 150px; height: auto; font: inherit; font-size: 26px; font-weight: var(--kf-fett); padding: 10px 14px;
  border: 1.5px solid var(--kf-linie-stark); border-radius: var(--kf-feld-radius); color: var(--kf-tinte);
  background: var(--kf-feld); font-variant-numeric: tabular-nums;
}
.kf-zahl input:focus, .kf-feld input:focus { border-color: var(--kf-akzent); outline: none; box-shadow: 0 0 0 4px var(--kf-fokus-weich); }
.kf-chip {
  font: inherit; font-size: 14px; background: var(--kf-grund); border: 1px solid var(--kf-linie);
  border-radius: 99px; padding: 7px 14px; cursor: pointer; color: var(--kf-tinte);
}
.kf-chip:hover { border-color: var(--kf-akzent); }

/* Regler */
.kf-regler-wert { display: flex; align-items: baseline; gap: 12px; min-height: 44px; }
.kf-regler-wert strong { font-size: 32px; font-weight: var(--kf-fett); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--kf-tinte); }
.kf-regler-wert span { color: var(--kf-leise); font-size: 16px; }
.kf input.kf-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; padding: 0; border: 0; border-radius: 99px;
  background: linear-gradient(to right, var(--kf-akzent) 0, var(--kf-akzent) var(--p), var(--kf-spur) var(--p), var(--kf-spur) 100%);
  margin: 20px 0 10px; cursor: pointer; display: block;
}
.kf input.kf-range::-webkit-slider-runnable-track { height: 8px; background: transparent; border-radius: 99px; }
.kf input.kf-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px; border-radius: 50%; background: var(--kf-griff);
  border: 3px solid var(--kf-knopf); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.kf input.kf-range::-moz-range-track { height: 8px; background: transparent; border-radius: 99px; }
.kf input.kf-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--kf-griff);
  border: 3px solid var(--kf-knopf); box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.kf input.kf-range:focus-visible { outline: none; box-shadow: 0 0 0 5px var(--kf-fokus-weich); }
.kf-regler-enden { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--kf-still); }

/* Auswahl-Kacheln */
.kf-optionen { display: grid; gap: 10px; }
.kf-optionen.kf-raster { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kf-option {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; margin: 0;
  font: inherit; color: var(--kf-tinte); background: var(--kf-feld); cursor: pointer; text-transform: none; letter-spacing: normal;
  border: 1.5px solid var(--kf-linie-stark); border-radius: var(--kf-feld-radius); padding: 14px 16px;
  transition: border-color .12s ease, background .12s ease;
}
.kf-option:hover { border-color: var(--kf-akzent); }
.kf-option[aria-pressed="true"] { border-color: var(--kf-akzent); background: var(--kf-akzent-flaeche); }
.kf-marker {
  flex: none; width: 22px; height: 22px; border: 2px solid var(--kf-linie-stark); background: var(--kf-feld);
  display: grid; place-items: center; transition: all .12s ease; color: var(--kf-knopf-text);
}
.kf-marker.rund { border-radius: 50%; }
.kf-marker.eckig { border-radius: 6px; }
.kf-option[aria-pressed="true"] .kf-marker { border-color: var(--kf-knopf); background: var(--kf-knopf); }
.kf-marker svg { width: 13px; height: 13px; opacity: 0; }
.kf-option[aria-pressed="true"] .kf-marker svg { opacity: 1; }
.kf-option b { display: block; font-weight: var(--kf-fett); }
.kf-option small { display: block; color: var(--kf-leise); font-size: 14px; margin-top: 1px; }

/* Warum fragen wir das? */
.kf-warum { margin-top: 22px; font-size: 14.5px; color: var(--kf-leise); }
.kf-warum summary { cursor: pointer; color: var(--kf-akzent-text); font-weight: var(--kf-fett); width: max-content; display: list-item; }
.kf .kf-warum p { margin: 8px 0 0; padding-left: 14px; border-left: 2px solid var(--kf-linie); }

/* Kontakt */
.kf-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 8px; }
.kf-felder .voll { grid-column: 1 / -1; }
@media (max-width: 560px) { .kf-felder { grid-template-columns: 1fr; } }
.kf-feld label { display: block; font-size: 14px; font-weight: var(--kf-fett); margin: 0 0 5px; color: var(--kf-tinte); }
.kf-feld label small { font-weight: 400; color: var(--kf-still); font-size: inherit; }
.kf-feld input {
  width: 100%; height: auto; font: inherit; padding: 11px 13px; border: 1.5px solid var(--kf-linie-stark);
  border-radius: var(--kf-feld-radius); color: var(--kf-tinte); background: var(--kf-feld);
}
.kf-einwilligung { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; font-size: 14px; color: var(--kf-leise); cursor: pointer; }
.kf-einwilligung input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--kf-knopf); flex: none; }
.kf-einwilligung a { color: var(--kf-akzent-text); text-decoration: underline; }

/* Ergebnis */
.kf-stufe {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--kf-fett);
  letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 5px 12px 5px 6px; margin-bottom: 16px;
}
.kf-stufe i {
  font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 13px;
}
.kf-stufe-A { background: var(--kf-akzent-flaeche); color: var(--kf-a); }
.kf-stufe-A i { background: var(--kf-knopf); color: var(--kf-knopf-text); }
.kf-stufe-B { background: var(--kf-b-flaeche); color: var(--kf-b); }
.kf-stufe-B i { background: var(--kf-b-punkt); }
.kf-stufe-C { background: var(--kf-c-flaeche); color: var(--kf-c); }
.kf-stufe-C i { background: var(--kf-c-punkt); }
.kf .kf-gruende-titel { margin: 18px 0 0; font-weight: var(--kf-fett); }
.kf-gruende { list-style: none; padding: 0; margin: 18px 0 20px; display: grid; gap: 8px; }
.kf-gruende li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.kf-gruende li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--kf-akzent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.kf .kf-mailhinweis {
  display: flex; gap: 12px; align-items: flex-start; background: var(--kf-grund); border: 1px solid var(--kf-linie);
  border-radius: var(--kf-feld-radius); padding: 14px 16px; font-size: 15px; margin: 22px 0 24px;
}
.kf-mailhinweis svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--kf-akzent-text); }
.kf-aktionen { display: flex; gap: 12px; flex-wrap: wrap; }
.kf .kf-toast { font-size: 13.5px; color: var(--kf-leise); margin-top: 12px; min-height: 20px; }


/* ── Nur im Modul (nicht im Mockup) ── */
.kf { max-width: var(--kf-breite, 760px); margin-inline: auto; scroll-margin-top: var(--kf-scroll-abstand, 110px); }
.kf-fang { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kf-btn[disabled] { opacity: .8; cursor: progress; }
.kf-textknopf[disabled] { opacity: .5; cursor: default; }
.kf-dreher {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; animation: kfDreh .7s linear infinite;
}
@keyframes kfDreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kf-dreher { animation-duration: 2.5s; } }

/* KI-Check im Erscheinungsbild von eventomaxx.de
   Werte am 02.10.2026 von der Live-Seite abgelesen (/kiivoo-assistent und
   Terminanfrage): fast schwarzer Grund mit Grünstich, grüne Überschriften in
   Josefin Sans (Versalien), Poppins für Text, grüner Knopf mit schwarzer Schrift. */
.kf.kf-thema-eventomaxx {
  --kf-schrift: inherit;                       /* Poppins kommt vom Theme */
  --kf-schrift-titel: "Josefin Sans", sans-serif;
  --kf-titel-gewicht: 400;
  --kf-titel-transform: uppercase;
  --kf-titel-laufweite: normal;
  --kf-titel-farbe: #7dc13a;                   /* Überschriften sind auf der Seite grün */
  --kf-fett: 600;                              /* Poppins 600 ist hier geladen */

  --kf-tinte: #ffffff;
  --kf-text2: #eeeeee;
  --kf-leise: #b9c4ae;
  --kf-still: #8b9980;
  --kf-linie: rgba(114, 182, 43, .24);
  --kf-linie-stark: rgba(114, 182, 43, .5);
  --kf-grund: rgba(114, 182, 43, .10);

  --kf-karte: #0a1407;
  --kf-karte-rand: rgba(114, 182, 43, .22);
  --kf-karte-radius: 15px;
  --kf-karte-schatten: 0 6px 50px rgba(0, 0, 0, .4);
  --kf-feld: #000f00;                          /* wie die Eingabefelder der Terminanfrage */
  --kf-feld-radius: 8px;
  --kf-griff: #ffffff;
  --kf-spur: rgba(114, 182, 43, .22);

  --kf-akzent: #72b62b;
  --kf-akzent-text: #7dc13a;
  --kf-akzent-flaeche: rgba(114, 182, 43, .20);
  --kf-knopf: #72b62b;                         /* wie „Absenden" in der Terminanfrage */
  --kf-knopf-hover: #86cf37;
  --kf-knopf-text: #000000;
  --kf-knopf-rand: 0;
  --kf-knopf-radius: 30px;
  --kf-knopf-schrift: 15px;
  --kf-knopf-transform: uppercase;
  --kf-knopf-laufweite: .03em;
  --kf-fokus: rgba(134, 207, 55, .7);
  --kf-fokus-weich: rgba(114, 182, 43, .3);

  --kf-a: #dcf3c2;
  --kf-b: #f3d48f;
  --kf-b-flaeche: rgba(220, 165, 60, .18);
  --kf-b-punkt: #a8730f;
  --kf-c: #d0d6c9;
  --kf-c-flaeche: rgba(255, 255, 255, .10);
  --kf-c-punkt: #5f6a57;
  --kf-fehler: #ff9a8f;
}

/* KI-Check im Erscheinungsbild von vendoweb.de
   Werte am 01.10.2026 von der Live-Seite abgelesen (/kiivoo-assistent und
   Terminanfrage): Marineblau als Grund, Josefin Sans in Versalien für
   Überschriften, Poppins für Text, Blau #1048af für Knöpfe. */
.kf.kf-thema-vendoweb {
  --kf-schrift: inherit;                       /* Poppins kommt vom Theme */
  --kf-schrift-titel: "Josefin Sans", sans-serif;
  --kf-titel-gewicht: 400;
  --kf-titel-transform: uppercase;
  --kf-titel-laufweite: normal;
  --kf-fett: 500;                             /* Poppins ist nur in 400 geladen: 500 bleibt sauber, 600 würde künstlich gefettet */

  --kf-tinte: #ffffff;
  --kf-text2: #eeeeee;
  --kf-leise: #b7c3d9;
  --kf-still: #8a99b4;
  --kf-linie: rgba(112, 159, 239, .22);
  --kf-linie-stark: rgba(112, 159, 239, .45);
  --kf-grund: rgba(112, 159, 239, .10);

  --kf-karte: #0b172b;                         /* wie die Formularkarte der Terminanfrage */
  --kf-karte-rand: rgba(112, 159, 239, .22);
  --kf-karte-radius: 15px;
  --kf-karte-schatten: 0 6px 50px rgba(0, 0, 0, .25);
  --kf-feld: #0e1c32;
  --kf-feld-radius: 8px;
  --kf-griff: #ffffff;
  --kf-spur: rgba(112, 159, 239, .22);

  --kf-akzent: #709fef;
  --kf-akzent-text: #8fb4f5;
  --kf-akzent-flaeche: rgba(16, 72, 175, .40);
  --kf-knopf: #1048af;
  --kf-knopf-hover: #1a5ad0;
  --kf-knopf-text: #ffffff;
  --kf-knopf-rand: 1px solid #365ea7;
  --kf-knopf-radius: 20px;
  --kf-knopf-schrift: 14px;
  --kf-knopf-transform: uppercase;
  --kf-knopf-laufweite: .03em;
  --kf-fokus: rgba(112, 159, 239, .65);
  --kf-fokus-weich: rgba(112, 159, 239, .28);

  --kf-a: #d5e3ff;
  --kf-b: #f3d48f;
  --kf-b-flaeche: rgba(220, 165, 60, .18);
  --kf-b-punkt: #a8730f;
  --kf-c: #cdd5e2;
  --kf-c-flaeche: rgba(255, 255, 255, .10);
  --kf-c-punkt: #5d6a80;
  --kf-fehler: #ff9a8f;
}