/* ==========================================================================
   knipsmi – Kontaktformular «Gespräch»
   Eigenständiger Baustein. Alle Klassen mit Präfix kf-, Farben/Schriften als
   CSS-Variablen auf .kf (in der Zielseite überschreibbar).
   ========================================================================== */

.kf {
  --kf-card: #fff;
  --kf-field: #fbf6ef;
  --kf-field-hover: #f8f1e8;
  --kf-espresso: #3b2a22;
  --kf-ink: #4a382f;
  --kf-soft: #806a5c;
  --kf-placeholder: #9b8576;
  --kf-line: #eee4d8;
  --kf-line-2: #e3d5c5;
  --kf-apricot: #f2a56d;
  --kf-apricot-soft: #fdeee1;
  --kf-apricot-line: #f0c39d;
  --kf-glow: rgba(246, 176, 118, .45);
  --kf-poppy: #e0583d;
  --kf-accent: #b5533a;
  --kf-warm: #a06a50;
  --kf-ok: #46705a;
  --kf-font-display: "M PLUS Rounded 1c", "Nunito", "Helvetica Neue", Arial, sans-serif;
  --kf-font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
  --kf-radius: clamp(24px, 3vw, 32px);
  --kf-radius-field: 16px;
  --kf-pad: clamp(1.25rem, 4vw, 3rem);
  --kf-gap: 1.5rem;
  --kf-step-gap: 1.35rem;
  --kf-ease: cubic-bezier(.65, 0, .2, 1);
  --kf-ease-out: cubic-bezier(.16, .84, .3, 1);
  --kf-spring: cubic-bezier(.34, 1.4, .5, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--kf-pad);
  border-radius: var(--kf-radius);
  background: var(--kf-card);
  border: 1px solid rgba(227, 213, 197, .6);
  box-shadow: 0 50px 90px -60px rgba(120, 80, 50, .35), 0 2px 6px rgba(120, 80, 50, .04);
  color: var(--kf-ink);
  font: 400 1.0625rem/1.6 var(--kf-font-body);
  -webkit-tap-highlight-color: transparent;
}
.kf *, .kf *::before, .kf *::after { box-sizing: border-box; }
:where(.kf) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(.kf) :where(p, ul) { margin: 0; }
.kf [hidden] { display: none !important; }
.kf :focus-visible { outline: 2px solid var(--kf-accent); outline-offset: 3px; }

.kf-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.kf:not(.kf--js) .kf-js-only { display: none !important; }
.kf--js noscript { display: none; }
/* Abstände per Margin statt gap: verborgene/leere Teile erzeugen so keine Lücken */
.kf > * + * { margin-top: var(--kf-gap); }
.kf > .kf-done, .kf > .kf-hp { margin: 0; }

.kf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Fortschritt ---------- */
.kf-head { display: flex; align-items: center; min-height: 1rem; }
.kf:not(.kf--js) .kf-head { display: none; }
.kf-progress { display: flex; align-items: center; gap: .85rem; }
.kf-progress__bars { display: flex; gap: 5px; }
.kf-progress__bars i {
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: var(--kf-line);
  transition: background-color .5s ease, width .6s var(--kf-ease-out), box-shadow .5s ease;
}
.kf-progress__bars i.is-done { background: #f6c9a3; }
.kf-progress__bars i.is-current {
  width: 34px;
  background: var(--kf-apricot);
  box-shadow: 0 0 8px 0 var(--kf-glow);
}
.kf-progress__text {
  font: 600 .74rem/1 var(--kf-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kf-soft);
}
.kf-progress__text b { font-weight: 600; color: var(--kf-espresso); }

/* ---------- Bühne & Schritte ---------- */
.kf-stage {
  position: relative;
  transition: height .5s var(--kf-ease-out);
}
.kf-stage.is-moving { overflow: hidden; }
@supports (overflow-clip-margin: 8px) {
  .kf-stage.is-moving { overflow: clip; overflow-clip-margin: 10px; }
}

.kf-step {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity .45s ease, filter .55s ease, transform .55s var(--kf-ease-out);
}
.kf:not(.kf--js) .kf-step + .kf-step {
  margin-top: 2.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--kf-line);
}
.kf--js .kf-step:not(.is-current) { display: none; }
.kf-step.is-leaving {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(calc(var(--kf-dir, 1) * -6px));
  transition: opacity .18s ease, filter .18s ease, transform .18s ease;
}
.kf-step.is-entering {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(calc(var(--kf-dir, 1) * 12px));
  transition: none;
}

.kf-step > * + * { margin-top: var(--kf-step-gap); }
.kf-q {
  float: left; /* legend als normales Kind, nicht im Rahmen */
  width: 100%;
  margin: 0;
  padding: 0;
  font: 300 clamp(1.8rem, 3.2vw, 2.5rem)/1.12 var(--kf-font-display);
  letter-spacing: -.03em;
  color: var(--kf-espresso);
  text-wrap: balance;
}
.kf-q:focus { outline: none; }
.kf-q:focus-visible { outline: none; }
.kf-step > .kf-sub {
  margin-top: .55rem;
  color: var(--kf-soft);
  font-size: .98rem;
  line-height: 1.5;
}

/* ---------- Felder ---------- */
.kf-field, .kf-group { display: grid; gap: .55rem; min-width: 0; }
.kf-label {
  padding-left: .2rem;
  font: 600 .92rem/1.3 var(--kf-font-body);
  color: var(--kf-espresso);
}
.kf-mini {
  padding-left: .2rem;
  font: 600 .84rem/1.2 var(--kf-font-body);
  color: var(--kf-soft);
}
.kf-opt {
  margin-left: .35em;
  font-weight: 400;
  font-size: .86em;
  color: var(--kf-soft);
}
.kf-hint {
  padding-left: .2rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--kf-soft);
}
.kf-input {
  width: 100%;
  min-height: 54px;
  padding: .85rem 1.1rem;
  background: var(--kf-field);
  border: 1px solid transparent;
  border-radius: var(--kf-radius-field);
  font-size: 1.0625rem; /* ≥16px: kein Zoom auf iOS */
  line-height: 1.4;
  color: var(--kf-espresso);
  transition: border-color .3s, box-shadow .4s, background-color .3s;
  -webkit-appearance: none;
  appearance: none;
}
.kf-input::placeholder { color: var(--kf-placeholder); opacity: 1; }
.kf-input:hover { background: var(--kf-field-hover); }
.kf-input:focus,
.kf-input:focus-visible {
  outline: none;
  background: #fff;
  border-color: #f1c39e;
  box-shadow: 0 0 0 5px rgba(246, 176, 118, .16), 0 6px 18px -10px rgba(220, 140, 80, .5);
}
.kf-input[aria-invalid="true"] {
  border-color: rgba(224, 88, 61, .55);
  background: #fff8f5;
}
.kf-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 5px rgba(224, 88, 61, .12); }
.kf-area { min-height: 7.5rem; resize: vertical; }
.kf-input[type="date"] { min-height: 54px; display: block; }
.kf-input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.kf-input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }

.kf-error {
  display: block;
  padding-left: .2rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kf-accent);
  animation: kf-in .35s var(--kf-ease-out);
}
@keyframes kf-in {
  from { opacity: 0; transform: translateY(-3px); }
}

.kf-suggest { padding-left: .2rem; font-size: .92rem; color: var(--kf-soft); }
.kf-suggest__btn {
  padding: 0;
  border: 0;
  background: linear-gradient(var(--kf-apricot), var(--kf-apricot)) 0 100% / 100% 1.5px no-repeat;
  color: var(--kf-espresso);
  font-weight: 600;
  cursor: pointer;
}

/* Aufklappen ohne Höhen-Sprung */
.kf-reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows .45s var(--kf-ease-out), opacity .35s ease, margin-top .45s var(--kf-ease-out), visibility 0s .45s;
}
.kf-reveal.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition: grid-template-rows .45s var(--kf-ease-out), opacity .45s ease .08s, margin-top .45s var(--kf-ease-out), visibility 0s;
}
.kf-step > .kf-reveal { margin-top: 0; }
.kf-step > .kf-reveal.is-open { margin-top: var(--kf-step-gap); }
.kf-reveal__in { min-height: 0; overflow: hidden; margin: -8px; padding: 8px; }
.kf-reveal.is-open .kf-reveal__in { overflow: visible; }
.kf-reveal.is-animating .kf-reveal__in { overflow: hidden; }
.kf:not(.kf--js) .kf-reveal { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.kf:not(.kf--js) .kf-step > .kf-reveal { margin-top: var(--kf-step-gap); }
.kf:not(.kf--js) .kf-reveal__in { overflow: visible; }

/* ---------- Chips (Anlass) ---------- */
.kf-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.kf-chip { position: relative; display: inline-flex; }
.kf-chip input,
.kf-seg__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.kf-chip span {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  padding: .6em 1.05em;
  border: 1px solid var(--kf-line);
  border-radius: 999px;
  background: #fff;
  font-size: .97rem;
  line-height: 1.15;
  color: var(--kf-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .4s, transform .3s var(--kf-ease-out);
}
@media (hover: hover) {
  .kf-chip span:hover { border-color: #ecc7a6; background: #fffaf5; }
}
.kf-chip span:active { transform: scale(.97); }
.kf-chip input:checked + span {
  background: var(--kf-apricot-soft);
  border-color: var(--kf-apricot-line);
  box-shadow: inset 0 0 0 .5px var(--kf-apricot-line);
  color: var(--kf-espresso);
  font-weight: 600;
}
.kf-chip input:focus-visible + span,
.kf-seg__opt input:focus-visible + span { outline: 2px solid var(--kf-accent); outline-offset: 2px; }
.kf-chip--other span { border-style: dashed; border-color: var(--kf-line-2); }
.kf-chip--other input:checked + span { border-style: solid; }
/* Anlass «Datenschutz»: dezent am Ende, auf eigener Zeile */
.kf-chip--quiet { flex-basis: 100%; }
.kf-chip--quiet span { padding: .45em .95em; background: transparent; font-size: .88rem; color: var(--kf-soft); }

/* Nachricht (optional) */
.kf-msg { display: grid; }
.kf-msg__toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  justify-self: start;
  min-height: 44px;
  padding: .5rem .2rem;
  border: 0;
  background: none;
  color: var(--kf-espresso);
  font-weight: 600;
  font-size: .98rem;
  text-align: left;
  cursor: pointer;
}
.kf-msg__toggle > span:nth-child(2) {
  background: linear-gradient(var(--kf-apricot), var(--kf-apricot)) 0 100% / 100% 1.5px no-repeat;
  padding-bottom: .1em;
  transition: background-size .5s var(--kf-ease-out);
}
@media (hover: hover) {
  .kf-msg__toggle:hover > span:nth-child(2) { background-size: 40% 1.5px; }
}
.kf-msg__toggle .kf-opt { margin-left: 0; }
.kf-msg__plus {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--kf-apricot-soft);
}
.kf-msg__plus::before,
.kf-msg__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--kf-accent);
  transform: translate(-50%, -50%);
}
.kf-msg__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.kf--js .kf-msg__label { display: none; }
.kf--js .kf-msg.is-open .kf-msg__label { display: block; }
.kf-msg.is-open .kf-msg__toggle { display: none; }
.kf-msg.is-open .kf-reveal__in { padding-top: .2rem; }

/* ---------- Segment (Wann? / Kontaktweg) ---------- */
.kf-seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  justify-self: start;
  padding: 4px;
  border-radius: 999px;
  background: var(--kf-field);
}
.kf-seg__opt { position: relative; display: block; }
.kf-seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55em 1.25em;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: var(--kf-soft);
  cursor: pointer;
  user-select: none;
  transition: background-color .3s, color .3s, box-shadow .3s;
}
@media (hover: hover) {
  .kf-seg__opt span:hover { color: var(--kf-espresso); }
}
.kf-seg__opt input:checked + span {
  background: #fff;
  color: var(--kf-espresso);
  box-shadow: 0 2px 8px -2px rgba(120, 80, 50, .2);
}
@media (max-width: 479px) {
  .kf-seg { display: grid; justify-self: stretch; }
  .kf-seg__opt span { padding-inline: .6em; }
}

/* Datum */
.kf-dates {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  max-width: 17rem;
}
.kf-dates__dash, .kf-dates__to { display: none; }
.kf-dates.is-range {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  max-width: 34rem;
}
.kf-dates.is-range .kf-dates__dash { display: block; padding-bottom: .95rem; color: var(--kf-soft); }
.kf-dates.is-range .kf-dates__to { display: grid; }
.kf-dates + .kf-error { margin-top: .6rem; }
.kf:not(.kf--js) .kf-dates { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; max-width: 34rem; }
.kf:not(.kf--js) .kf-dates__dash { display: block; padding-bottom: .95rem; }
.kf:not(.kf--js) .kf-dates__to { display: grid; }
@media (max-width: 479px) {
  .kf-dates.is-range { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .kf-dates.is-range .kf-dates__dash { display: none; }
  .kf-dates { max-width: none; }
}

/* ---------- Ort: Combobox ---------- */
.kf-step > .kf-where { margin-top: calc(var(--kf-step-gap) + .35rem); }
.kf-combo { position: relative; }
.kf-listbox {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: min(19rem, 50vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: .35rem;
  list-style: none;
  border: 1px solid var(--kf-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(120, 80, 50, .45), 0 2px 8px rgba(120, 80, 50, .06);
  animation: kf-pop .25s var(--kf-ease-out);
}
@keyframes kf-pop {
  from { opacity: 0; transform: translateY(-4px); }
}
.kf-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .55rem .8rem;
  border-radius: 12px;
  cursor: pointer;
  color: var(--kf-espresso);
  line-height: 1.25;
}
.kf-option.is-active,
.kf-option[aria-selected="true"] { background: var(--kf-apricot-soft); }
@media (hover: hover) {
  .kf-option:hover { background: #fff6ee; }
}
.kf-option__flag { flex: none; width: 1.4em; text-align: center; font-size: 1.05rem; }
.kf-option__main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kf-option__main mark { background: none; color: inherit; font-weight: 600; }
.kf-option__meta { flex: none; font-size: .86rem; color: var(--kf-soft); white-space: nowrap; }
.kf-option--sep {
  min-height: 0;
  height: 1px;
  margin: .3rem .6rem;
  padding: 0;
  background: var(--kf-line);
  pointer-events: none;
}
.kf-option--empty { color: var(--kf-soft); cursor: default; font-size: .95rem; }

.kf-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .15rem; }
.kf-quick__label {
  width: 100%;
  padding-left: .2rem;
  font: 600 .7rem/1.6 var(--kf-font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kf-soft);
}
.kf-quick__btn {
  min-height: 38px;
  padding: .35em .95em;
  border: 1px solid var(--kf-line);
  border-radius: 999px;
  background: #fff;
  font-size: .92rem;
  color: var(--kf-ink);
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s;
}
@media (hover: hover) {
  .kf-quick__btn:hover { border-color: #ecc7a6; background: #fffaf5; }
}
.kf-quick__btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.kf-quick__btn[aria-pressed="true"] {
  background: var(--kf-apricot-soft);
  border-color: var(--kf-apricot-line);
  color: var(--kf-espresso);
  font-weight: 600;
}
@media (pointer: coarse) {
  .kf-quick__btn { min-height: 44px; }
}

/* ---------- Telefon ---------- */
.kf-field--phone { gap: .5rem; }
.kf-field--phone .kf-hint { margin-top: -.25rem; }
.kf-phone { position: relative; display: flex; gap: .5rem; }
.kf-cc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 54px;
  padding: 0 .85rem 0 .9rem;
  border: 1px solid transparent;
  border-radius: var(--kf-radius-field);
  background: var(--kf-field);
  color: var(--kf-espresso);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color .3s, box-shadow .4s, background-color .3s;
}
@media (hover: hover) {
  .kf-cc:hover { background: var(--kf-field-hover); }
}
.kf-cc[aria-expanded="true"],
.kf-cc:focus-visible {
  outline: none;
  background: #fff;
  border-color: #f1c39e;
  box-shadow: 0 0 0 5px rgba(246, 176, 118, .16);
}
.kf-cc__flag { font-size: 1.15rem; line-height: 1; }
.kf-cc__code { font-variant-numeric: tabular-nums; }
.kf-cc__chev { color: var(--kf-soft); transition: transform .3s var(--kf-ease-out); }
.kf-cc[aria-expanded="true"] .kf-cc__chev { transform: rotate(180deg); }
.kf-cc.is-detected { animation: kf-detect .9s var(--kf-ease-out); }
@keyframes kf-detect {
  0% { box-shadow: 0 0 0 0 rgba(246, 176, 118, .55); background: var(--kf-apricot-soft); }
  100% { box-shadow: 0 0 0 10px rgba(246, 176, 118, 0); }
}
.kf-phone__num { flex: 1 1 auto; min-width: 0; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.kf-ccpop {
  position: absolute;
  z-index: 25;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-width: 24rem;
  padding: .5rem;
  border: 1px solid var(--kf-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(120, 80, 50, .45), 0 2px 8px rgba(120, 80, 50, .06);
  animation: kf-pop .25s var(--kf-ease-out);
}
.kf-ccpop__search {
  width: 100%;
  min-height: 46px;
  padding: .6rem .9rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--kf-field);
  font-size: 1rem;
  color: var(--kf-espresso);
  -webkit-appearance: none;
  appearance: none;
}
.kf-ccpop__search::placeholder { color: var(--kf-placeholder); }
.kf-ccpop__search:focus { outline: none; border-color: #f1c39e; background: #fff; }
.kf-ccpop__list {
  position: static;
  margin-top: .35rem;
  max-height: 15.5rem;
  padding: 0;
  border: 0;
  box-shadow: none;
  animation: none;
}
.kf-ccpop__list:focus { outline: none; }
.kf-ccpop .kf-option__meta { font-variant-numeric: tabular-nums; }

/* ---------- Übersicht ---------- */
.kf-sum { display: grid; gap: 1.1rem; }
.kf-sum__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .9rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-radius: 20px;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(253, 230, 208, .7), rgba(253, 238, 225, 0)),
    var(--kf-field);
  font: 300 clamp(1.35rem, 2.4vw, 1.75rem)/1.35 var(--kf-font-display);
  letter-spacing: -.02em;
  color: var(--kf-espresso);
}
.kf-sum__dot { display: none; }
.kf-nw { white-space: nowrap; }
.kf-sum__part {
  padding: 0 0 .08em;
  border: 0;
  background: linear-gradient(rgba(242, 165, 109, .7), rgba(242, 165, 109, .7)) 0 100% / 100% 1.5px no-repeat;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 2px;
  transition: color .3s, background-size .5s var(--kf-ease-out);
}
@media (hover: hover) {
  .kf-sum__part:hover { color: var(--kf-accent); background-size: 40% 1.5px; }
}
.kf-sum__part.is-empty {
  background: none;
  color: var(--kf-soft);
  font-size: .62em;
  font-family: var(--kf-font-body);
  font-weight: 600;
  letter-spacing: 0;
  padding: .3em .8em;
  border: 1px dashed var(--kf-line-2);
  border-radius: 999px;
  align-self: center;
}

.kf-sum__rows { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.kf-sum__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .25rem 1rem;
  width: 100%;
  min-height: 56px;
  padding: .8rem 1.1rem;
  border: 1px solid var(--kf-line);
  border-radius: 16px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .3s, background-color .3s;
}
@media (hover: hover) {
  .kf-sum__row:hover { border-color: #ecc7a6; background: #fffaf5; }
}
.kf-sum__label {
  grid-column: 1;
  font: 600 .7rem/1.4 var(--kf-font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kf-soft);
}
.kf-sum__value {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: var(--kf-espresso);
}
.kf-sum__value--quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: italic;
  color: var(--kf-ink);
}
.kf-sum__value--muted { color: var(--kf-soft); }
.kf-sum__edit {
  grid-column: 2;
  grid-row: 1 / span 3;
  font-size: .86rem;
  font-weight: 600;
  color: var(--kf-warm);
}

/* ---------- Navigation ---------- */
.kf-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  padding-top: .25rem;
}
.kf:not(.kf--js) .kf-nav { justify-content: flex-start; }
.kf-back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 48px;
  padding: .5rem .9rem .5rem .55rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--kf-soft);
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  transition: color .3s, background-color .3s, opacity .3s;
}
@media (hover: hover) {
  .kf-back:hover { color: var(--kf-espresso); background: var(--kf-field); }
}
.kf-back.is-hidden { visibility: hidden; opacity: 0; }

.kf-btn {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  margin-left: auto;
  padding: .95em 1.9em 1.02em;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a352b 0%, var(--kf-espresso) 62%);
  color: #fdf6ee;
  font: 400 1.06rem/1.15 var(--kf-font-display);
  letter-spacing: -.005em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 214, .16),
    inset 0 -2px 0 rgba(0, 0, 0, .16),
    0 16px 28px -18px rgba(59, 42, 34, .7);
  transition: transform .5s var(--kf-ease-out), box-shadow .5s var(--kf-ease-out);
}
.kf:not(.kf--js) .kf-btn { margin-left: 0; }
/* warmes Licht, das beim Darüberfahren von unten aufsteigt */
.kf-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 55%;
  width: 130%;
  aspect-ratio: 2.4 / 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 165, 109, .5), rgba(242, 165, 109, .16) 55%, rgba(242, 165, 109, 0));
  opacity: 0;
  transform: translate(-50%, 18%) scale(.7);
  transition: opacity .6s ease, transform .9s var(--kf-ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .kf-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 236, 214, .2), inset 0 -2px 0 rgba(0, 0, 0, .16), 0 20px 34px -18px rgba(120, 52, 26, .6); }
  .kf-btn:hover::before { opacity: 1; transform: translate(-50%, -8%) scale(1); }
}
.kf-btn:active { transform: translateY(0) scale(.98); }
.kf-btn:focus-visible { outline-offset: 4px; }
.kf-btn[disabled] { cursor: progress; }
/* während des Sendens atmet das Licht ruhig weiter */
.kf-btn[disabled]::before { animation: kf-breathe 1.8s ease-in-out infinite; }
@keyframes kf-breathe {
  0%, 100% { opacity: .35; transform: translate(-50%, 10%) scale(.85); }
  50% { opacity: 1; transform: translate(-50%, -8%) scale(1); }
}
.kf--js .kf-send { display: none; }
.kf--js.is-last .kf-send { display: inline-flex; }
.kf--js.is-last .kf-next { display: none; }

.kf > .kf-status { margin-top: .9rem; }
.kf-status { font-weight: 600; font-size: .98rem; line-height: 1.45; }
.kf-status:empty { display: none; }
.kf-status.is-error { color: var(--kf-accent); }
.kf-status.is-ok { color: var(--kf-ok); }

.kf-noscript { font-size: .95rem; color: var(--kf-soft); }
.kf-noscript a { color: var(--kf-espresso); }

.cf-turnstile:empty { display: none; }
/* unsichtbares Widget (interaction-only) erzeugt keinen zusätzlichen Abstand */
.kf > .cf-turnstile { margin-top: 0; }
.kf > .cf-turnstile > * { margin-top: var(--kf-gap); }

/* ---------- Gesendet ---------- */
.kf-done {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  padding: 2rem;
  border-radius: inherit;
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(253, 230, 208, .85), rgba(255, 255, 255, 0)),
    #fff;
  text-align: center;
  animation: kf-fade .7s ease both;
}
.kf-done__title {
  font: 300 clamp(2.8rem, 6vw, 4.6rem)/1 var(--kf-font-display);
  letter-spacing: -.045em;
  color: var(--kf-espresso);
  animation: kf-focus 1.6s cubic-bezier(.3, .1, .2, 1) .15s both;
}
.kf-done__text {
  max-width: 22em;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--kf-ink);
  animation: kf-focus-soft 1.1s ease .7s both;
}
.kf-done__again {
  margin-top: 1rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 0;
  background: linear-gradient(var(--kf-apricot), var(--kf-apricot)) 50% 85% / calc(100% - 2rem) 1.5px no-repeat;
  color: var(--kf-espresso);
  font-weight: 600;
  cursor: pointer;
  animation: kf-fade .8s ease 1.2s both;
}
@keyframes kf-fade { from { opacity: 0; } }
@keyframes kf-focus { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } }
@keyframes kf-focus-soft { from { opacity: 0; filter: blur(6px); } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .kf *, .kf *::before, .kf *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .kf-step.is-leaving, .kf-step.is-entering { filter: none; transform: none; }
}

/* ---------- Mobile ---------- */
@media (max-width: 599px) {
  .kf { --kf-gap: 1.25rem; --kf-step-gap: 1.2rem; }
  /* Anlässe als ruhiges Zweierraster statt acht Zeilen */
  .kf-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
  .kf-chip { display: flex; }
  .kf-chip span {
    position: relative;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: .55em 1.05em;
    border-radius: 16px;
    font-size: .95rem;
    text-align: center;
    text-wrap: balance;
  }
  /* nichts verschiebt sich beim Antippen: Auswahl nur über Farbe und Rand */
  .kf-chip input:checked + span { font-weight: 400; }
  .kf-chip--quiet { grid-column: 1 / -1; }
  .kf-chip--quiet span { width: auto; font-size: .88rem; }
  .kf-quick { gap: .35rem; }
  .kf-quick__btn { padding-inline: .8em; font-size: .9rem; }
  .kf-nav { flex-wrap: nowrap; gap: .35rem; }
  .kf-back { flex: none; padding-inline: .3rem .6rem; }
  .kf-btn { flex: 1 1 auto; max-width: 17rem; padding-inline: 1.1em 1.3em; }
  .kf-sum__line { padding: 1rem 1.05rem 1.05rem; }
  .kf-ccpop { max-width: none; }
}