/* ==========================================================================
   KKM-DESIGN — Kontakt-Overlay (rechts einfahrend, 3 Schritte)
   Geometrie folgt der Seite: keine Radien, eine Schraegkante (--cf-cut),
   Spektrum als einziger Farbtraeger.
   Markup: index.html, Verhalten: js/contact-overlay.js
   ========================================================================== */

/* Seite steht still, solange das Overlay offen ist. Die Breite der
   Scrollleiste wird vom Script gemessen und hier ausgeglichen — sonst
   springt das Layout beim Oeffnen. */
html.cform-locked,
html.cform-locked body { overflow: hidden; }
html.cform-locked body { padding-right: var(--cf-scrollbar, 0px); }

.cform {
  --cf-cut:  clamp(44px, 5.2vw, 84px);   /* Versatz der Schraegkante */
  /* Durchgehend sichtbares Band der Leiste. Die Box ist immer Band plus
     Versatz breit — sonst schneidet das Parallelogramm in den Text. */
  --cf-band: clamp(98px, 7.6vw, 122px);
  --cf-rail: calc(var(--cf-cut) + var(--cf-band));
  /* Wie weit die Leiste ueber die Papierkante ragt. Muss kleiner als
     --cf-band bleiben, sonst rutscht die Panelkante hinter die Leiste. */
  --cf-lap:  clamp(26px, 4.4vw, 72px);
  /* Anteil der Hoehe, den die Leiste oben frei laesst — sie liest sich
     dadurch als eigenes Objekt und nicht als Balken ueber die volle Hoehe. */
  --cf-top:  0.1;
  --cf-pad:  clamp(24px, 3.4vw, 62px);
  --cf-w:    min(1180px, 84vw);

  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}
.cform.is-open { visibility: visible; pointer-events: auto; }

/* --- Abdunklung der Seite ------------------------------------------------ */

.cform__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 420ms ease;
}
.cform.is-open .cform__scrim { opacity: 1; }

/* --- Buehne: Schrittleiste + Panel fahren gemeinsam ein ------------------- */

.cform__stage {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: var(--cf-w);
  display: flex;
  transform: translateX(101%);
  transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform.is-open .cform__stage { transform: translateX(0); }

/* --- Schrittleiste -------------------------------------------------------
   Eigenes Objekt: oben angeschnitten, ueber die Papierkante geschoben,
   unten auslaufend. Der Inhalt sitzt kompakt im oberen Bereich; jede Zeile
   kennt ihre Lage auf der Achse (--t) und wandert mit der Schraege nach
   links, damit sie auf jeder Hoehe mittig im sichtbaren Band steht.
   -------------------------------------------------------------------- */

.cform__rail {
  flex: none;
  position: relative;
  z-index: 2;                                  /* liegt ueber dem Papier */
  width: var(--cf-rail);
  margin-right: calc(var(--cf-lap) * -1);      /* ragt auf die Papierflaeche */
  background: var(--ink-soft);
  color: var(--text-on-ink);

  display: grid;
  grid-template-rows:
    calc(var(--cf-top) * 100%)   /* Anschnitt oben */
    auto auto auto auto          /* Zaehler und die drei Schritte */
    1fr;                         /* Rest laeuft aus */
  row-gap: clamp(38px, 7.6vh, 94px);

  /* Gleiche Schraege wie die Panelkante, oben waagerecht angeschnitten */
  clip-path: polygon(
    calc(var(--cf-cut) * (1 - var(--cf-top)))  calc(var(--cf-top) * 100%),
    calc(100% - var(--cf-cut) * var(--cf-top)) calc(var(--cf-top) * 100%),
    calc(100% - var(--cf-cut))                 100%,
    0                                          100%);
}

.cform__steps {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cform__count,
.cform__steps > li {
  place-self: center;
  text-align: center;
  min-width: clamp(74px, 6.2vw, 96px);
  transform: translateX(calc(var(--cf-cut) * (0.5 - var(--t))));
}

/* --t entspricht der Lage der Zeile auf der Hoehenachse */
.cform__count             { grid-row: 2; --t: 0.17; }
.cform__step:nth-child(1) { grid-row: 3; --t: 0.30; }
.cform__step:nth-child(2) { grid-row: 4; --t: 0.46; }
.cform__step:nth-child(3) { grid-row: 5; --t: 0.63; }

.cform__count {
  margin: 0;
  position: relative;
  padding-bottom: 11px;
  white-space: nowrap;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--muted-on-ink);
}
.cform__count::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--spectrum);
}
.cform__count b { color: var(--text-on-ink); font-weight: 600; }

.cform__step {
  position: relative;
  padding-bottom: 12px;
  color: #33322F;
  transition: color 340ms ease;
}
.cform__step b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 46px);
  line-height: 0.9;
  color: currentColor;
}
.cform__step span {
  display: block;
  margin-top: 7px;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: inherit;
}
/* Grundstrich unter jedem Schritt, beim aktiven faehrt das Spektrum auf */
.cform__step::before,
.cform__step::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
}
.cform__step::before { height: 1px; background: rgba(245, 243, 238, 0.13); }
.cform__step::after {
  height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform__step.is-done   { color: #4A4843; }
.cform__step.is-active { color: var(--text-on-ink); }
.cform__step.is-active span   { color: var(--muted-on-ink); }
.cform__step.is-active::after { transform: scaleX(1); }

/* --- Panel --------------------------------------------------------------- */

.cform__panel {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  margin-left: calc(var(--cf-cut) * -1);
  background: var(--paper);
  color: var(--text-on-paper);
  clip-path: polygon(var(--cf-cut) 0, 100% 0, 100% 100%, 0 100%);
  display: flex;
  flex-direction: column;
  /* Der Inhalt haelt Abstand zur Schraege und zur ueberlappenden Leiste */
  padding: clamp(26px, 3vw, 46px) var(--cf-pad) 0
           calc(var(--cf-cut) + var(--cf-lap) + var(--cf-pad) + clamp(8px, 1vw, 22px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* --- Kopfzeile ----------------------------------------------------------- */

.cform__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cform__eyebrow {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted-on-paper);
}
.cform__close {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 6px 0 6px 20px;
  border: 0;
  background: none;
  color: var(--text-on-paper);
  cursor: pointer;
}
.cform__close::before {
  content: "";
  width: 1px;
  height: 26px;
  background: var(--hairline-paper);
}
.cform__close svg { width: 22px; height: 22px; }
.cform__close:hover { opacity: 0.55; }

/* --- Schritt-Ansichten --------------------------------------------------- */

.cform__body {
  flex: 1 1 auto;
  padding: clamp(28px, 3.4vw, 54px) 0 clamp(24px, 3vw, 44px);
}

.cform__view { display: none; }
.cform__view.is-current { display: block; }

.cform__title {
  margin: 0 0 clamp(24px, 3vw, 42px);
  max-width: 15ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 74px);
  /* Deutlich mehr Durchschuss als --lh-display: Anton setzt die
     Umlautpunkte sehr hoch, bei 0.98 stossen sie in die Zeile darueber. */
  line-height: 1.14;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
/* Formularschritte: eine Zeile, kein Umbruch — die Frage traegt die Stufe.
   Der Durchschuss bleibt grosszuegig, damit ein Umbruch auf schmalen
   Geraeten die Umlautpunkte nicht in die Zeile darueber setzt. */
.cform__view--form .cform__title {
  font-size: clamp(30px, 3.6vw, 58px);
  line-height: 1.22;
  max-width: none;
}
.cform__title:has(+ .cform__hint) { margin-bottom: 14px; }

.cform__hint {
  margin: 0 0 clamp(26px, 2.8vw, 42px);
  max-width: 58ch;
  font-size: var(--fs-body-sm);
  line-height: 1.65;
  color: var(--muted-on-paper);
}

/* --- Auswahlkarten (Schritt 01) ------------------------------------------ */

.cform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 20px);
}

.cform__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(140px, 14vw, 190px);
  padding: clamp(18px, 1.9vw, 28px);
  background: var(--case-paper);
  border: 1px solid var(--hairline-paper);
  cursor: pointer;
  transition: background-color 280ms ease, border-color 280ms ease,
              color 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform__card input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cform__card:hover {
  border-color: rgba(12, 12, 12, 0.38);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(12, 12, 12, 0.055) 0 1px,
    transparent 1px 7px);
}
.cform__card:has(:focus-visible) { outline: var(--focus); outline-offset: 3px; }

.cform__box {
  position: absolute;
  top: clamp(18px, 1.9vw, 28px);
  left: clamp(18px, 1.9vw, 28px);
  width: 16px; height: 16px;
  border: 1px solid currentColor;
  opacity: 0.5;
  transition: opacity 260ms ease;
}
.cform__box::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: currentColor;
  transform: scale(0);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform__ne {
  position: absolute;
  top: clamp(18px, 1.9vw, 28px);
  right: clamp(18px, 1.9vw, 28px);
  width: 13px; height: 13px;
  opacity: 0.55;
}
.cform__card b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 28px);
  line-height: 1;
  text-transform: uppercase;
}
.cform__card small {
  display: block;
  margin-top: 9px;
  font-size: var(--fs-body-sm);
  color: var(--muted-on-paper);
  transition: color 280ms ease;
}

/* gewaehlt: invertiert, Spektrum an der Unterkante */
.cform__card:has(input:checked) {
  background-color: var(--ink);
  background-image: none;
  border-color: var(--ink);
  color: var(--text-on-ink);
}
.cform__card:has(input:checked) small { color: var(--muted-on-ink); }
.cform__card:has(input:checked) .cform__box { opacity: 1; }
.cform__card:has(input:checked) .cform__box::after { transform: scale(1); }
.cform__card:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--spectrum);
}

/* --- Felder --------------------------------------------------------------
   Eingaben liegen auf Weiss gegen das warme Papier: klare Kante, klares
   Feld. Der Spektrumstrich faehrt beim Fokus von links auf.
   -------------------------------------------------------------------- */

.cform__field { margin-bottom: clamp(20px, 2.2vw, 32px); }
.cform__field:last-child { margin-bottom: 0; }

.cform__label {
  display: block;
  margin-bottom: 10px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--muted-on-paper);
}
.cform__label i {
  font-style: normal;
  color: var(--s-orange);
}

.cform__ctrl {
  position: relative;
  background: var(--case-paper);
  border: 1px solid var(--hairline-paper);
  transition: border-color 240ms ease;
}
.cform__ctrl::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px; bottom: -1px;
  height: 2px;
  background: var(--spectrum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform__ctrl:hover { border-color: rgba(12, 12, 12, 0.34); }
.cform__ctrl:focus-within { border-color: rgba(12, 12, 12, 0.42); }
.cform__ctrl:focus-within::after { transform: scaleX(1); }

.cform__input,
.cform__area {
  display: block;
  width: 100%;
  padding: 15px 18px;
  font: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text-on-paper);
  background: transparent;
  border: 0;
}
.cform__input:focus,
.cform__area:focus { outline: none; }
.cform__area { min-height: clamp(112px, 12vw, 156px); line-height: 1.65; resize: vertical; }
.cform__input::placeholder,
.cform__area::placeholder { color: rgba(12, 12, 12, 0.32); }

/* Ungueltig erst nach einem Versuch markieren, nicht beim Tippen */
.cform__input:user-invalid { color: var(--s-magenta); }
.cform__ctrl:has(:user-invalid) { border-color: var(--s-magenta); }

.cform__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 24px);
}

/* --- Chips (Budget, Zeitraum) -------------------------------------------- */

.cform__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.cform__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px;
  background: var(--case-paper);
  border: 1px solid var(--hairline-paper);
  font-size: var(--fs-body-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.cform__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Marke links: leer, gefuellt wenn gewaehlt */
.cform__chip::before {
  content: "";
  width: 7px; height: 7px;
  background: rgba(12, 12, 12, 0.22);
  transition: background-color 240ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cform__chip:hover { border-color: rgba(12, 12, 12, 0.38); }
.cform__chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--text-on-ink);
}
.cform__chip:has(input:checked)::before {
  background: var(--text-on-ink);
  transform: scale(1.28);
}
.cform__chip:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--spectrum);
}
.cform__chip:has(:focus-visible) { outline: var(--focus); outline-offset: 3px; }

/* --- Zustimmung ----------------------------------------------------------
   Eine Zeile, keine Flaeche. Das Kaestchen fuellt sich und setzt ein
   echtes Haekchen — klarer Zustand ohne zusaetzlichen Kasten.
   -------------------------------------------------------------------- */

.cform__consent {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--muted-on-paper);
  cursor: pointer;
}
.cform__consent input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cform__consent i {
  position: relative;
  flex: none;
  width: 18px; height: 18px;
  border: 1px solid rgba(12, 12, 12, 0.3);
  background: var(--case-paper);
  transition: background-color 220ms ease, border-color 220ms ease;
}
.cform__consent i::after {
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 4px; height: 8px;
  border: solid var(--paper);
  border-width: 0 1.6px 1.6px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1), opacity 160ms ease;
}
.cform__consent:hover i { border-color: var(--text-on-paper); }
.cform__consent:has(input:checked) i {
  background: var(--ink);
  border-color: var(--ink);
}
.cform__consent:has(input:checked) i::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.cform__consent a { color: var(--text-on-paper); text-decoration: underline; text-underline-offset: 3px; }
.cform__consent:has(:focus-visible) i { outline: var(--focus); outline-offset: 3px; }

/* --- Fusszeile ----------------------------------------------------------- */

.cform__foot {
  flex: none;
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: auto;
  padding-bottom: clamp(24px, 2.6vw, 40px);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(18px, 2vw, 40px);
  padding-top: clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--hairline-paper);
}

.cform__direct { display: flex; align-items: center; gap: 16px; }
.cform__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--hairline-paper);
}
.cform__ico svg { width: 20px; height: 20px; }
.cform__direct p { margin: 0 0 2px; font-size: var(--fs-body-sm); color: var(--muted-on-paper); }
.cform__direct a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  color: var(--text-on-paper);
}
.cform__direct a svg { width: 20px; height: 9px; }
.cform__direct a:hover { opacity: 0.6; }

/* Honigtopf. Bewusst nicht display:none — Bots pruefen darauf. Das Feld
   steht ausserhalb des sichtbaren Bereichs, ist aria-hidden und nicht
   tabbar, ein Mensch kommt also gar nicht daran. */
.cform__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fehlerhinweis beim Versand. Steht ueber der Navigation, nicht anstelle des
   Formulars — die Eingaben bleiben sichtbar und koennen erneut gesendet werden. */
.cform__error {
  margin-bottom: clamp(12px, 1.4vw, 18px);
  padding: clamp(12px, 1.4vw, 16px) clamp(14px, 1.6vw, 20px);
  border-left: 2px solid var(--s-orange);
  background: rgba(255, 106, 0, 0.10);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.cform__error a { color: inherit; text-underline-offset: 3px; }

.cform__nav { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.cform__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--fs-body-sm);
  color: var(--muted-on-paper);
  cursor: pointer;
  transition: color 200ms ease;
}
.cform__back::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.cform__back:hover { color: var(--text-on-paper); }
.cform__back[hidden] { display: none; }

.cform .btn { text-transform: uppercase; letter-spacing: var(--ls-label); font-weight: 600; }

/* --- Bestaetigung -------------------------------------------------------- */

.cform__done { display: none; }
.cform.is-sent .cform__done { display: block; }
.cform.is-sent .cform__view,
.cform.is-sent .cform__nav { display: none; }
.cform__done p {
  max-width: 46ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--muted-on-paper);
}

/* --- Eintritt der Schritte ----------------------------------------------
   Kurzer Versatz nach oben, gestaffelt. Laeuft bei jedem Schrittwechsel neu.
   -------------------------------------------------------------------- */

@keyframes cf-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.cform__view.is-current > *,
.cform__view.is-current .cform__card {
  animation: cf-rise 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cform__view.is-current > *:nth-child(2),
.cform__view.is-current .cform__card:nth-child(2) { animation-delay: 60ms; }
.cform__view.is-current > *:nth-child(3),
.cform__view.is-current .cform__card:nth-child(3) { animation-delay: 120ms; }
.cform__view.is-current > *:nth-child(4),
.cform__view.is-current .cform__card:nth-child(4) { animation-delay: 180ms; }
.cform__view.is-current > *:nth-child(5) { animation-delay: 240ms; }

/* --- Bewegung reduziert -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cform__stage,
  .cform__scrim { transition-duration: 1ms; }
  .cform__view.is-current > *,
  .cform__view.is-current .cform__card { animation: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1180px) {
  .cform { --cf-w: 92vw; }
}

@media (max-width: 860px) {
  .cform { --cf-w: 100vw; --cf-cut: 0px; --cf-lap: 0px; }

  .cform__stage { flex-direction: column; }

  /* Schrittleiste wird zum Kopfband */
  .cform__rail {
    width: 100%;
    margin-right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px var(--cf-pad);
    background: var(--ink);
    clip-path: none;
  }
  .cform__steps { display: flex; gap: 20px; }
  .cform__count,
  .cform__steps > li { place-self: auto; min-width: 0; transform: none; }
  .cform__count { padding-bottom: 7px; }
  .cform__step { padding-bottom: 6px; }
  .cform__step b { font-size: 21px; }
  .cform__step span { display: none; }

  .cform__panel {
    margin-left: 0;
    clip-path: none;
    padding-left: var(--cf-pad);
  }
  .cform__grid { grid-template-columns: 1fr; }
  .cform__card {
    min-height: 0;
    padding-top: calc(clamp(18px, 1.9vw, 28px) + 34px);
  }
  .cform__row { grid-template-columns: 1fr; }
  .cform__foot { flex-direction: column; align-items: stretch; }
  .cform__nav { justify-content: space-between; }
  .cform__nav .btn { flex: 1; justify-content: center; }
}