/* ============================================
   Ines Kontaktassistent — Stylesheet v1.0
   Ästhetik: Editorial · Clean · Professionell
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Variablen ── */
#ik-wrap {
  --ik-bg:        #faf9f7;
  --ik-surface:   #ffffff;
  --ik-border:    #e4e0d8;
  --ik-accent:    #2a5f8f;
  --ik-accent-2:  #c8873c;
  --ik-text:      #1a1a1a;
  --ik-muted:     #7a7570;
  --ik-success:   #2e7d5b;
  --ik-error:     #c0392b;
  --ik-radius:    10px;
  --ik-radius-lg: 18px;
  --ik-shadow:    0 4px 24px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);
  --ik-font-head: 'Playfair Display', Georgia, serif;
  --ik-font-body: 'DM Sans', system-ui, sans-serif;
  --ik-trans:     200ms ease;
}

/* ── Wrapper ── */
#ik-wrap {
  background:    var(--ik-bg);
  border:        1px solid var(--ik-border);
  border-radius: var(--ik-radius-lg);
  box-shadow:    var(--ik-shadow);
  font-family:   var(--ik-font-body);
  font-size:     1rem;
  color:         var(--ik-text);
  max-width:     720px;
  margin:        2rem auto;
  padding:       2.4rem 2.8rem 2.8rem;
  position:      relative;
  overflow:      hidden;
}

/* Dezenter Akzentstreifen oben */
#ik-wrap::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     4px;
  background: linear-gradient(90deg, var(--ik-accent), var(--ik-accent-2));
}

/* ── Fortschrittsleiste ── */
.ik-progress-track {
  background:    var(--ik-border);
  border-radius: 99px;
  height:        5px;
  margin-bottom: .6rem;
  overflow:      hidden;
}

.ik-progress-fill {
  background:    linear-gradient(90deg, var(--ik-accent), var(--ik-accent-2));
  border-radius: 99px;
  height:        100%;
  width:         16.6%;
  transition:    width 400ms cubic-bezier(.4,0,.2,1);
}

.ik-progress-meta {
  display:         flex;
  justify-content: space-between;
  font-size:       .8rem;
  color:           var(--ik-muted);
  margin-bottom:   2.2rem;
  font-weight:     300;
}

#ik-step-topic {
  font-style:  italic;
  color:       var(--ik-accent-2);
  font-weight: 400;
}

/* ── Schritte ── */
.ik-step {
  display:    none;
  animation:  ikFadeIn 280ms ease both;
}

.ik-step.active {
  display: block;
}

@keyframes ikFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Frage-Überschrift ── */
.ik-q {
  font-family: var(--ik-font-head);
  font-size:   1.7rem;
  font-weight: 500;
  line-height: 1.25;
  margin:      0 0 .4rem;
  color:       var(--ik-text);
}

.ik-hint {
  color:       var(--ik-muted);
  font-size:   .9rem;
  font-weight: 300;
  margin:      0 0 1.8rem;
}

.ik-label {
  display:     block;
  font-weight: 500;
  font-size:   .9rem;
  margin-bottom: .75rem;
  color:       var(--ik-text);
}

/* ── Karten (Schritt 1) ── */
.ik-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   .9rem;
}

.ik-card {
  background:    var(--ik-surface);
  border:        1.5px solid var(--ik-border);
  border-radius: var(--ik-radius);
  cursor:        pointer;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           .4rem;
  padding:       1.4rem 1rem;
  text-align:    center;
  transition:    border-color var(--ik-trans), box-shadow var(--ik-trans), transform var(--ik-trans);
}

.ik-card:hover {
  border-color: var(--ik-accent);
  box-shadow:   0 0 0 3px rgba(42,95,143,.1);
  transform:    translateY(-2px);
}

.ik-card.selected {
  border-color: var(--ik-accent);
  background:   rgba(42,95,143,.05);
  box-shadow:   0 0 0 3px rgba(42,95,143,.15);
}

.ik-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.ik-card strong {
  font-size:   .9rem;
  font-weight: 500;
  display:     block;
}

.ik-card small {
  font-size:  .75rem;
  color:      var(--ik-muted);
  font-weight: 300;
}

/* ── Auswahl-Buttons (Schritt 2, 4) ── */
.ik-choices {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .65rem;
}

.ik-choice {
  background:    var(--ik-surface);
  border:        1.5px solid var(--ik-border);
  border-radius: var(--ik-radius);
  color:         var(--ik-text);
  cursor:        pointer;
  font-family:   var(--ik-font-body);
  font-size:     .9rem;
  padding:       .6rem 1.1rem;
  transition:    border-color var(--ik-trans), background var(--ik-trans), box-shadow var(--ik-trans);
}

.ik-choice:hover {
  border-color: var(--ik-accent);
  box-shadow:   0 0 0 3px rgba(42,95,143,.1);
}

.ik-choice.selected {
  background:   var(--ik-accent);
  border-color: var(--ik-accent);
  color:        #fff;
}

/* ── Checkboxen (Schritt 3, 5) ── */
.ik-checks {
  display:       flex;
  flex-direction: column;
  gap:           .6rem;
  margin-bottom: 1.6rem;
}

.ik-check {
  align-items:  center;
  cursor:       pointer;
  display:      flex;
  font-size:    .92rem;
  gap:          .7rem;
  padding:      .55rem .8rem;
  border-radius: var(--ik-radius);
  transition:   background var(--ik-trans);
}

.ik-check:hover {
  background: rgba(42,95,143,.05);
}

.ik-check input[type="checkbox"] {
  accent-color: var(--ik-accent);
  cursor:       pointer;
  flex-shrink:  0;
  height:       1.1rem;
  width:        1.1rem;
}

/* ── Weiter-Button ── */
.ik-next {
  background:    var(--ik-accent);
  border:        none;
  border-radius: var(--ik-radius);
  color:         #fff;
  cursor:        pointer;
  font-family:   var(--ik-font-body);
  font-size:     .95rem;
  font-weight:   500;
  margin-top:    .5rem;
  padding:       .75rem 2rem;
  transition:    background var(--ik-trans), transform var(--ik-trans);
}

.ik-next:hover {
  background: #1e4d77;
  transform:  translateY(-1px);
}

/* ── Kontaktfelder (Schritt 6) ── */
.ik-field-group {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1rem;
}

.ik-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.ik-field--full {
  grid-column: 1 / -1;
}

.ik-field label {
  font-size:   .85rem;
  font-weight: 500;
  color:       var(--ik-text);
}

.ik-field input,
.ik-field textarea {
  background:    var(--ik-surface);
  border:        1.5px solid var(--ik-border);
  border-radius: var(--ik-radius);
  color:         var(--ik-text);
  font-family:   var(--ik-font-body);
  font-size:     .92rem;
  padding:       .65rem .9rem;
  transition:    border-color var(--ik-trans), box-shadow var(--ik-trans);
  width:         100%;
  box-sizing:    border-box;
}

.ik-field input:focus,
.ik-field textarea:focus {
  border-color: var(--ik-accent);
  box-shadow:   0 0 0 3px rgba(42,95,143,.12);
  outline:      none;
}

.ik-field textarea {
  resize:      vertical;
  min-height:  90px;
}

/* ── Absenden-Button ── */
.ik-submit {
  background:    linear-gradient(135deg, var(--ik-accent), #1a4060);
  border:        none;
  border-radius: var(--ik-radius);
  color:         #fff;
  cursor:        pointer;
  font-family:   var(--ik-font-body);
  font-size:     1rem;
  font-weight:   500;
  margin-top:    1.4rem;
  padding:       .85rem 2.2rem;
  transition:    opacity var(--ik-trans), transform var(--ik-trans);
  letter-spacing: .02em;
}

.ik-submit:hover {
  opacity:   .9;
  transform: translateY(-1px);
}

.ik-submit:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

/* ── Zurück-Button ── */
.ik-back {
  background:  none;
  border:      none;
  color:       var(--ik-muted);
  cursor:      pointer;
  font-family: var(--ik-font-body);
  font-size:   .85rem;
  margin-top:  1.2rem;
  padding:     0;
  text-decoration: underline;
  transition:  color var(--ik-trans);
}

.ik-back:hover { color: var(--ik-accent); }

/* ── Fehlermeldung ── */
.ik-error {
  background:    rgba(192,57,43,.08);
  border:        1px solid var(--ik-error);
  border-radius: var(--ik-radius);
  color:         var(--ik-error);
  font-size:     .88rem;
  margin-top:    1rem;
  padding:       .7rem 1rem;
}

.ik-pflicht {
  color:     var(--ik-muted);
  font-size: .78rem;
  margin:    .5rem 0 0;
}

/* ── Erfolgsmeldung ── */
.ik-success {
  text-align: center;
  padding:    2rem 1rem;
}

.ik-success-icon {
  font-size:     3rem;
  margin-bottom: 1rem;
}

.ik-success h2 {
  font-family: var(--ik-font-head);
  font-size:   2rem;
  margin:      0 0 .6rem;
}

.ik-success p {
  color:     var(--ik-muted);
  font-size: 1rem;
}

/* ── Honeypot verstecken ── */
.ik-honeypot {
  position:   absolute;
  left:       -9999px;
  visibility: hidden;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  #ik-wrap {
    padding: 1.6rem 1.2rem 2rem;
    margin:  1rem;
    border-radius: var(--ik-radius);
  }

  .ik-q { font-size: 1.35rem; }

  .ik-cards {
    grid-template-columns: 1fr 1fr;
  }

  .ik-field-group {
    grid-template-columns: 1fr;
  }

  .ik-field--full {
    grid-column: 1;
  }
}

@media (max-width: 380px) {
  .ik-cards {
    grid-template-columns: 1fr;
  }
}