/* inline-card.css — Component 1 + Component 3 (the box morphs in place) */

/* Components are light-only by design (host /referenzen/* articles are
 * light-only). Lock light tokens locally so any cache-stale or future
 * dark-mode :root override cannot leak in. Restore inheritance from
 * shared-tokens.css when the entire site becomes dark-aware. */
.kk-card {
  --kk-primary:    #0C1C28;
  --kk-accent:     #967BB6;
  --kk-cream:      #FEF5F3;
  --kk-cream-deep: #FFFFFF;
  --kk-line:       #DDD5D0;
  --kk-text-mut:   #5A6770;

  container-type: inline-size;
  container-name: kk-card;
  background: var(--kk-cream-deep);   /* default = white; card sits on cream sections */
  border: 1px solid var(--kk-accent); /* lavender accent frame */
  border-radius: var(--kk-r-soft);
  padding: var(--kk-pad-block);
  margin: clamp(28px, 5vw, 44px) 0;
  font-family: var(--kk-font-body);
  color: var(--kk-primary);
  view-transition-name: kk-card;
}

/* Modifier: card sits on a WHITE section — invert background to cream */
.kk-card--on-white {
  background: var(--kk-cream);
}

.kk-card__eyebrow {
  font-family: var(--kk-font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kk-text-mut);
  margin: 0 0 14px;
}

.kk-card__title {
  font-family: var(--kk-font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 12px;
  color: var(--kk-primary);
}

.kk-card__body {
  font-size: var(--kk-body-size);
  line-height: 1.6;
  margin: 0 0 24px;
  color: var(--kk-primary);
  max-width: 56ch;
}

/* Form ─────────────────────────────────────── */

.kk-form {
  display: grid;
  gap: 22px;
}

@container kk-card (min-width: 560px) {
  .kk-form { grid-template-columns: 1fr 1fr; align-items: end; }
  .kk-form__submit-row,
  .kk-form__micro,
  .kk-form__error { grid-column: 1 / -1; }
}

.kk-field {
  position: relative;
  padding-top: 18px;
}
.kk-field__input {
  width: 100%;
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--kk-primary);
  border-radius: 0;
  padding: 8px 0 9px;
  font: inherit;
  font-size: var(--kk-body-size);
  color: var(--kk-primary);
  transition: border-color var(--kk-t-micro) var(--kk-ease);
}
.kk-field__input:focus {
  outline: none;
  border-bottom: 2px solid var(--kk-accent);
  padding-bottom: 8px;
}
.kk-field__label {
  position: absolute;
  left: 0;
  top: 26px;
  font-size: var(--kk-body-size);
  color: var(--kk-text-mut);
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--kk-t-micro) var(--kk-ease),
              color var(--kk-t-micro) var(--kk-ease);
}
.kk-field__input:focus ~ .kk-field__label,
.kk-field__input:not(:placeholder-shown) ~ .kk-field__label {
  transform: translateY(-22px) scale(0.78);
  color: var(--kk-text-mut);
}
.kk-field__input:focus ~ .kk-field__label {
  color: var(--kk-accent);
}

/* Submit ───────────────────────────────────── */

.kk-form__submit-row { display: flex; }
.kk-btn {
  appearance: none;
  border: 0;
  background: var(--kk-primary);
  color: var(--kk-cream-deep);
  font-family: var(--kk-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  padding: 16px 26px;
  border-radius: var(--kk-r-hard);
  min-height: 48px;
  cursor: pointer;
  transition: background var(--kk-t-micro) var(--kk-ease),
              transform var(--kk-t-micro) var(--kk-ease);
  position: relative;
}
.kk-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--kk-primary) 88%, var(--kk-accent));
}
.kk-btn:active:not(:disabled) { transform: translateY(1px); }
.kk-btn:focus-visible {
  outline: 2px solid var(--kk-accent);
  outline-offset: 2px;
  box-shadow: var(--kk-focus-ring);
}
.kk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading: three dots replace label */
.kk-btn[data-state="loading"] .kk-btn__label { visibility: hidden; }
.kk-btn[data-state="loading"]::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle 3px at 30% 50%, currentColor 99%, transparent 100%),
    radial-gradient(circle 3px at 50% 50%, currentColor 99%, transparent 100%),
    radial-gradient(circle 3px at 70% 50%, currentColor 99%, transparent 100%);
  background-size: 100% 100%;
  /* stagger via mask animation */
  animation: kk-dots 900ms infinite;
}
@keyframes kk-dots {
  0%   { opacity: .35; }
  50%  { opacity: 1; }
  100% { opacity: .35; }
}

/* Microcopy + error ─────────────────────────── */
.kk-form__micro {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--kk-text-mut);
  margin: 0;
  max-width: 60ch;
}
.kk-form__error {
  font-size: 0.85rem;
  color: var(--kk-text-mut);
  margin: 0;
  min-height: 1.2em;
}
.kk-form__error[hidden] { display: none; }

/* Confirmation panel (Component 3) ─────────── */
.kk-confirm {
  view-transition-name: kk-card-content;
}
.kk-confirm__check {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 0 18px;
}
.kk-confirm__check circle,
.kk-confirm__check path {
  fill: none;
  stroke: var(--kk-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kk-confirm__check circle {
  stroke-width: 1.5;
  stroke-dasharray: 138;
  stroke-dashoffset: 138;
  animation: kk-draw-circle 500ms var(--kk-ease) forwards;
}
.kk-confirm__check path {
  stroke-width: 2.25;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: kk-draw-check 400ms var(--kk-ease) 280ms forwards;
}
@keyframes kk-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes kk-draw-check  { to { stroke-dashoffset: 0; } }

.kk-confirm__title {
  font-family: var(--kk-font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.6vw, 1.65rem);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--kk-primary);
}
.kk-confirm__body {
  font-size: var(--kk-body-size);
  line-height: 1.6;
  color: var(--kk-primary);
  margin: 0 0 24px;
  max-width: 60ch;
}
.kk-expander {
  border-top: 1px solid var(--kk-line);
  padding-top: 16px;
}
.kk-expander__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--kk-font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--kk-primary);
  padding: 4px 0;
  min-height: 32px;
}
.kk-expander__summary::-webkit-details-marker { display: none; }
.kk-expander__chev {
  width: 14px; height: 14px;
  transition: transform var(--kk-t-micro) var(--kk-ease);
  color: var(--kk-text-mut);
}
.kk-expander[open] .kk-expander__chev { transform: rotate(180deg); }
.kk-expander__content {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--kk-text-mut);
  margin: 12px 0 4px;
  max-width: 60ch;
}

/* View Transitions ─────────────────────────── */
::view-transition-old(kk-card-content),
::view-transition-new(kk-card-content) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
::view-transition-old(kk-card-content) {
  animation-name: kk-fade-out;
}
::view-transition-new(kk-card-content) {
  animation-name: kk-fade-in;
}
@keyframes kk-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes kk-fade-in  { from { opacity: 0; transform: translateY(6px); } }

/* CSS-only fallback morph (browsers without View Transitions) */
.kk-card__inner.is-leaving {
  animation: kk-fade-out 200ms var(--kk-ease) forwards;
}
.kk-card__inner.is-entering {
  animation: kk-fade-in 360ms var(--kk-ease) forwards;
}

/* Variation 2 — eyebrow above a hairline rule, button full-bleed, denser micro */
.kk-card--v2 .kk-card__eyebrow {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--kk-line);
  margin-bottom: 18px;
}
.kk-card--v2 .kk-form__submit-row { width: 100%; }
.kk-card--v2 .kk-btn { width: 100%; }
@container kk-card (min-width: 560px) {
  .kk-card--v2 .kk-form { grid-template-columns: 1fr 1fr 1fr; }
  .kk-card--v2 .kk-form__submit-row { grid-column: auto; align-self: end; }
  .kk-card--v2 .kk-form__submit-row { width: auto; }
  .kk-card--v2 .kk-btn { width: 100%; }
}

/* Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .kk-card *,
  .kk-card *::before,
  .kk-card *::after {
    animation: none !important;
    transition: none !important;
  }
  .kk-confirm__check circle,
  .kk-confirm__check path { stroke-dashoffset: 0; }
}