/*
 * Location : /public_html/assets/css/kontakt.css
 * File     : kontakt.css
 * Function : Styles for Kontakt/Antrag wizard — hero, progress, steps,
 *            form fields, service cards, documents, summary, navigation.
 * Version  : 2.0.0
 * Generated: 2026-05-08
 *
 * Changelog:
 *   2.0.0 (2026-05-08) — Extracted from monolithic kontakt.php.
 *   1.0.0 (2026-04-17) — Initial styles in <style> block.
 */

/* ── Wizard hero ─────────────────────────────────────────────────────────── */
.page-hero-wizard {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #1a3a2a 100%);
  padding: calc(var(--nav-h) + 5rem) 1.5rem 3.5rem;
  color: #fff;
}
.wiz-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.wiz-hero-inner .page-hero-title  { color: #fff; }
.wiz-hero-inner .page-hero-sub    { color: rgba(255,255,255,.7); }
.wiz-hero-inner .section-eyebrow  { color: var(--brand-green-mid); }

.wiz-hero-meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.wiz-hero-meta i { color: var(--brand-green-mid); margin-right: .25rem; }

.wiz-hero-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  padding: 1.75rem 1.5rem;
  text-align: center;
  min-width: 200px;
}
.wiz-hero-card-icon  { font-size: 2rem; color: var(--brand-green-mid); margin-bottom: .75rem; }
.wiz-hero-card-title { font-family: var(--ff-d); font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: .25rem; }
.wiz-hero-card-sub   { font-size: .75rem; color: rgba(255,255,255,.5); margin-bottom: .5rem; }
.wiz-hero-card-tel   { display: block; font-family: var(--ff-d); font-size: 1.4rem; font-weight: 600; color: var(--brand-green-mid); text-decoration: none; letter-spacing: -.01em; }
.wiz-hero-card-hours { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: .25rem; }

@media (max-width: 899.98px) {
  .wiz-hero-inner { grid-template-columns: 1fr; }
  .wiz-hero-card  { display: none; }
}

/* ── Urgent banner ───────────────────────────────────────────────────────── */
.wiz-urgent-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(90deg, #fef3c7, #fde68a);
  border: 1px solid #f59e0b;
  border-radius: var(--r-lg);
  margin-bottom: 1.5rem;
  font-size: .875rem;
  font-weight: 500;
  color: #78350f;
}
.wiz-urgent-banner a     { color: #b45309; font-weight: 700; text-decoration: none; }
.wiz-urgent-banner i     { color: #d97706; font-size: 1.1rem; flex-shrink: 0; }
.wiz-urgent-close        { margin-left: auto; background: none; border: none; cursor: pointer; color: #92400e; font-size: 1rem; padding: .25rem; border-radius: 4px; flex-shrink: 0; }

/* ── Wizard wrapper ──────────────────────────────────────────────────────── */
.wizard-wrap { max-width: 860px; margin: 0 auto; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.wiz-progress       { margin-bottom: 2.5rem; }
.wiz-progress-bar   { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 1rem; }
.wiz-progress-fill  {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-green), var(--brand-blue));
  border-radius: 999px;
  transition: width .4s ease;
}

.wiz-steps-labels {
  display: flex;
  justify-content: space-between;
  gap: .25rem;
}
.wiz-step-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted2);
  cursor: default;
  flex: 1;
}
.wiz-step-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  color: var(--muted2);
  transition: all .25s;
}
.wiz-step-label.done   .wiz-step-dot { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.wiz-step-label.active .wiz-step-dot { border-color: var(--brand-green); color: var(--brand-green); box-shadow: 0 0 0 3px rgba(3,103,3,.15); }
.wiz-step-label.active              { color: var(--brand-green); }

.wiz-step-counter {
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: .625rem;
  text-align: center;
}

@media (max-width: 599.98px) {
  .wiz-step-label span  { display: none; }
  .wiz-steps-labels     { gap: .1rem; }
}

/* ── Step panels ─────────────────────────────────────────────────────────── */
.wiz-step        { display: none; animation: wizIn .25s ease both; }
.wiz-step.active { display: block; }

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

.wiz-step-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-s);
}
.wiz-step-num   { font-family: var(--ff-d); font-size: 2.5rem; font-weight: 600; color: var(--border); line-height: 1; flex-shrink: 0; letter-spacing: -.05em; }
.wiz-step-title { font-family: var(--ff-d); font-size: 1.6rem; font-weight: 500; color: var(--ink); margin-bottom: .35rem; }
.wiz-step-sub   { font-size: .875rem; font-weight: 300; color: var(--muted); line-height: 1.65; }

/* ── Form elements ───────────────────────────────────────────────────────── */
.wiz-field       { margin-bottom: 1.5rem; }
.wiz-row-2       { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

@media (max-width: 599.98px) {
  .wiz-row-2 { grid-template-columns: 1fr; }
}

.wiz-label {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: .5rem;
}
.wiz-req         { color: var(--brand-red); margin-left: .2rem; }
.wiz-hint        { font-size: .72rem; color: var(--muted2); margin-top: .35rem; line-height: 1.5; }
.wiz-hint-inline { font-size: .68rem; color: var(--muted2); font-weight: 400; text-transform: none; letter-spacing: 0; }
.wiz-hint-text   { font-size: .78rem; color: var(--muted); }

.wiz-input,
.wiz-select,
.wiz-textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  padding: .875rem 1rem;
  font-family: var(--ff-b);
  font-size: .9375rem;
  color: #111827;
  line-height: 1.5;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none;
  appearance: none;
}
.wiz-input::placeholder   { color: #9ca3af; }
.wiz-select               { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .875rem center; padding-right: 2.5rem; }
.wiz-input:focus,
.wiz-select:focus,
.wiz-textarea:focus {
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(3,103,3,.1);
  outline: none;
}
.wiz-input.err,
.wiz-select.err,
.wiz-textarea.err  { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(165,3,33,.08); }
.wiz-textarea      { resize: vertical; min-height: 110px; }

/* date input — keep consistent across browsers */
input[type="date"].wiz-input {
  cursor: pointer;
  color: #111827;
}
input[type="date"].wiz-input:not(:focus):placeholder-shown,
input[type="date"].wiz-input::-webkit-datetime-edit-text,
input[type="date"].wiz-input::-webkit-datetime-edit-month-field,
input[type="date"].wiz-input::-webkit-datetime-edit-day-field,
input[type="date"].wiz-input::-webkit-datetime-edit-year-field {
  color: #9ca3af;
}
input[type="date"].wiz-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
}

.wiz-error {
  font-size: .74rem;
  font-weight: 500;
  color: var(--brand-red);
  margin-top: .375rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}
.wiz-error::before { content: '⚠'; flex-shrink: 0; }

/* ── Service cards ───────────────────────────────────────────────────────── */
.wiz-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .875rem;
  margin-bottom: .75rem;
}
@media (max-width: 699.98px) { .wiz-service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 419.98px) { .wiz-service-grid { grid-template-columns: 1fr; } }

.service-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.service-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem;
  background: #fff;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  position: relative;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  user-select: none;
}
.service-card:hover   { border-color: var(--brand-green); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(3,103,3,.12); }
.service-card.selected { border-color: var(--brand-green); box-shadow: 0 4px 20px rgba(3,103,3,.16); background: var(--brand-green-lt); }
.service-card-icon    { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; }
.service-card-title   { font-family: var(--ff-d); font-size: .975rem; font-weight: 500; color: var(--ink); line-height: 1.2; }
.service-card-desc    { font-size: .68rem; font-weight: 300; color: var(--muted); line-height: 1.45; }
.service-card-check   { position: absolute; top: .75rem; right: .75rem; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-green); color: #fff; font-size: .75rem; display: none; align-items: center; justify-content: center; }
.service-card.selected .service-card-check { display: flex; }

/* ── Checkboxes ──────────────────────────────────────────────────────────── */
.wiz-checkbox       { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-checkbox-label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; font-size: .875rem; color: var(--ink); line-height: 1.55; }
.wiz-checkbox-box   { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all .15s; margin-top: .1rem; }

.wiz-checkbox:checked ~ .wiz-checkbox-box,
.wiz-checkbox:checked + .wiz-checkbox-box { background: var(--brand-green); border-color: var(--brand-green); }
.wiz-checkbox:checked ~ .wiz-checkbox-box::after,
.wiz-checkbox:checked + .wiz-checkbox-box::after { content: '✓'; color: #fff; font-size: .75rem; font-weight: 700; }
.wiz-checkbox:focus-visible ~ .wiz-checkbox-box,
.wiz-checkbox:focus-visible + .wiz-checkbox-box { box-shadow: 0 0 0 3px rgba(3,103,3,.2); }

.wiz-checkboxes   { display: flex; flex-wrap: wrap; gap: .4rem; }
.wiz-check-pill   { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .875rem; border: 1.5px solid var(--border); border-radius: 999px; cursor: pointer; font-size: .8rem; color: var(--muted); transition: all .15s; user-select: none; }
.wiz-check-pill:hover { border-color: var(--brand-green); color: var(--brand-green); }
.wiz-check-pill input:checked ~ span,
.wiz-check-pill input:checked + span { color: var(--brand-green); font-weight: 600; }
.wiz-check-pill:has(input:checked)   { border-color: var(--brand-green); background: var(--brand-green-lt); color: var(--brand-green); }

/* ── Radio group ─────────────────────────────────────────────────────────── */
.wiz-radio-group  { display: flex; flex-direction: column; gap: .625rem; }
.wiz-radio        { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-radio-label  { display: flex; align-items: center; gap: .65rem; cursor: pointer; font-size: .875rem; color: var(--ink); }
.wiz-radio-box    { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 50%; flex-shrink: 0; transition: all .15s; position: relative; }
.wiz-radio:checked + .wiz-radio-box { border-color: var(--brand-green); }
.wiz-radio:checked + .wiz-radio-box::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green); }

/* ── Range slider ────────────────────────────────────────────────────────── */
.wiz-range        { width: 100%; height: 6px; -webkit-appearance: none; background: var(--border); border-radius: 999px; outline: none; cursor: pointer; accent-color: var(--brand-green); }
.wiz-range-val    { font-weight: 700; color: var(--brand-green); font-size: .875rem; margin-left: .5rem; }
.wiz-range-labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted2); margin-top: .25rem; }

/* ── Info boxes ──────────────────────────────────────────────────────────── */
.wiz-info-box     { display: flex; align-items: flex-start; gap: .875rem; padding: 1rem 1.25rem; border-radius: var(--r-lg); font-size: .84rem; line-height: 1.65; margin-bottom: 1rem; }
.wiz-info-box i   { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.wiz-info-green   { background: var(--brand-green-lt); border: 1px solid #7dc27d; color: #14532d; }
.wiz-info-green i { color: var(--brand-green); }
.wiz-info-blue    { background: var(--brand-blue-lt); border: 1px solid #6b8fd4; color: #1e3a8a; }
.wiz-info-blue i  { color: var(--brand-blue); }
.wiz-info-amber   { background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; }
.wiz-info-amber i { color: #d97706; }

/* ── Documents ───────────────────────────────────────────────────────────── */
.wiz-docs-group   { margin-bottom: 1.75rem; }
.wiz-docs-label   { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted2); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border-s); }
.wiz-doc-item     { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.25rem; background: #fff; border: 1.5px solid var(--border); border-radius: var(--r-lg); margin-bottom: .625rem; }
.wiz-doc-item:last-child { margin-bottom: 0; }
.wiz-doc-icon     { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.wiz-doc-icon.required { background: var(--brand-green-lt); color: var(--brand-green); }
.wiz-doc-icon.optional { background: var(--bg2); color: var(--muted); }
.wiz-doc-info     { flex: 1; min-width: 0; }
.wiz-doc-title    { font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wiz-doc-condition{ font-size: .75rem; color: var(--brand-green); font-weight: 500; margin-bottom: .2rem; display: flex; align-items: center; gap: .2rem; }
.wiz-doc-condition .bi { font-size: .65rem; }
.wiz-doc-desc     { font-size: .78rem; color: var(--muted); line-height: 1.5; }
.wiz-badge-req    { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--brand-green); color: #fff; padding: .15rem .55rem; border-radius: 999px; }
.wiz-badge-opt    { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #f1f5f9; color: #64748b; padding: .15rem .55rem; border-radius: 999px; flex-shrink: 0; }
.wiz-upload-btn   { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.125rem; border: 1.5px solid var(--border); border-radius: var(--r); color: var(--ink); font-family: var(--ff-b); font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; user-select: none; flex-shrink: 0; background: #fff; }
.wiz-upload-btn:hover { border-color: var(--brand-green); color: var(--brand-green); background: var(--brand-green-lt); }
.wiz-file-input   { display: none; }
.wiz-file-preview { font-size: .72rem; color: var(--brand-green); margin-top: .375rem; }

/* ── Summary ─────────────────────────────────────────────────────────────── */
.wiz-summary          { border: 1.5px solid var(--border); border-radius: var(--r-xl); overflow: hidden; background: #fff; }
.wiz-summary-group    { display: grid; grid-template-columns: 160px 1fr; border-bottom: 1px solid var(--border-s); }
.wiz-summary-group:last-child { border-bottom: none; }
.wiz-summary-label    { padding: .875rem 1rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg2); }
.wiz-summary-value    { padding: .875rem 1rem; font-size: .875rem; color: var(--ink); line-height: 1.6; }

/* ── Navigation bar ──────────────────────────────────────────────────────── */
.wiz-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-s);
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-bottom: 1rem;
  z-index: 10;
}
.wiz-next-btn,
.wiz-back-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .82rem 2rem;
  border-radius: var(--r);
  font-family: var(--ff-b);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .2s, transform .15s;
}
.wiz-next-btn           { background: var(--brand-green); color: #fff; box-shadow: 0 3px 12px rgba(3,103,3,.28); }
.wiz-next-btn:hover     { background: var(--brand-green-dark); transform: translateY(-1px); }
.wiz-next-btn:disabled  { opacity: .5; cursor: not-allowed; transform: none; }
.wiz-back-btn           { background: var(--bg2); color: var(--ink); border: 1px solid var(--border); }
.wiz-back-btn:hover     { background: var(--bg); }
.wiz-draft-hint         { font-size: .72rem; color: var(--muted2); flex: 1; text-align: center; }

/* ── Final actions ───────────────────────────────────────────────────────── */
.wiz-final-actions { display: flex; gap: .875rem; flex-wrap: wrap; margin-top: 1.5rem; }
.wiz-submit-btn    { padding: 1rem 2.25rem; font-size: .9rem; }
.wiz-draft-btn     { display: inline-flex; align-items: center; gap: .4rem; padding: .82rem 1.5rem; border-radius: var(--r); font-family: var(--ff-b); font-size: .82rem; font-weight: 500; color: var(--muted); background: none; border: 1.5px solid var(--border); cursor: pointer; transition: border-color .15s, color .15s; }
.wiz-draft-btn:hover { border-color: var(--brand-green); color: var(--brand-green); }
.wiz-call-btn      { display: inline-flex; align-items: center; gap: .4rem; padding: .82rem 1.5rem; border-radius: var(--r); font-family: var(--ff-b); font-size: .82rem; font-weight: 500; color: var(--brand-blue); border: 1.5px solid var(--brand-blue-lt); background: var(--brand-blue-lt); text-decoration: none; transition: background .15s; }
.wiz-call-btn:hover { background: var(--brand-blue); color: #fff; }

/* ── Success state ───────────────────────────────────────────────────────── */
.wiz-success        { text-align: center; padding: 3rem 2rem; }
.wiz-success-icon   { font-size: 4rem; color: var(--brand-green); margin-bottom: 1.25rem; }
.wiz-success-title  { font-family: var(--ff-d); font-size: 1.8rem; font-weight: 500; color: var(--ink); margin-bottom: .875rem; }
.wiz-success-sub    { font-size: .9375rem; font-weight: 300; color: var(--muted); line-height: 1.75; max-width: 520px; margin: 0 auto 1.75rem; }
.wiz-success-next   { display: flex; flex-direction: column; gap: .625rem; max-width: 380px; margin: 0 auto; }
.wiz-success-step   { display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: var(--ink); text-align: left; }
.wiz-success-step i { color: var(--brand-green); font-size: 1.25rem; flex-shrink: 0; }

/* ── Contact strip ───────────────────────────────────────────────────────── */
.contact-strip      { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.contact-strip-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border-s); border-radius: var(--r-xl); box-shadow: var(--sh-s); }
.contact-strip-item > i  { font-size: 1.35rem; color: var(--brand-green); flex-shrink: 0; margin-top: .1rem; }
.contact-strip-label     { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted2); margin-bottom: .2rem; }
.contact-strip-val       { display: block; font-family: var(--ff-d); font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; }
a.contact-strip-val:hover { color: var(--brand-green); }
.contact-strip-hours     { font-size: .72rem; color: var(--muted); margin-top: .15rem; }

/* ── Per-step help CTA ───────────────────────────────────────────────────── */
.step-help-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding: .875rem 1.25rem;
  background: linear-gradient(90deg, #f0fdf4 0%, #e8f5e8 100%);
  border: 1.5px solid #7dc27d;
  border-left: 4px solid var(--brand-green);
  border-radius: var(--r-lg);
}
.step-help-icon {
  width: 38px; height: 38px; flex-shrink: 0;
  background: var(--brand-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1rem;
}
.step-help-text        { flex: 1; font-size: .84rem; color: #14532d; line-height: 1.55; min-width: 160px; }
.step-help-text strong { font-weight: 600; color: #14532d; }
.step-help-tel {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.1rem;
  background: var(--brand-green); color: #fff;
  border-radius: var(--r); text-decoration: none;
  font-family: var(--ff-b); font-size: .82rem; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
  transition: background .2s;
  box-shadow: 0 2px 8px rgba(3,103,3,.25);
}
.step-help-tel:hover { background: var(--brand-green-dark); color: #fff; }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .contact-strip { grid-template-columns: 1fr; }
}

@media (max-width: 599.98px) {
  .wiz-step-header          { flex-direction: column; gap: .5rem; }
  .wiz-step-num             { font-size: 1.75rem; }
  .wiz-step-title           { font-size: 1.25rem; }
  .wiz-doc-item             { flex-wrap: wrap; gap: .625rem; padding: .875rem 1rem; }
  .wiz-upload-btn           { width: 100%; justify-content: center; }
  .wiz-file-preview         { width: 100%; }
  .wiz-final-actions        { flex-direction: column; }
  .wiz-summary-group        { grid-template-columns: 1fr; }
  .wiz-summary-label        { padding: .5rem 1rem .2rem; }
  .wiz-summary-value        { padding: .2rem 1rem .75rem; }
  .wiz-nav                  { flex-direction: column; gap: .75rem; }
  .wiz-next-btn,
  .wiz-back-btn             { width: 100%; justify-content: center; }
  .step-help-cta            { gap: .75rem; }
  .step-help-tel            { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   SCHULE AUTOCOMPLETE  — custom dropdown with fuzzy search
   Version: 1.0.0 · 2026-05-08
══════════════════════════════════════════════════════════════════════ */
.schule-ac { position: relative; }

/* ── Input wrap ── */
.schule-ac-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.schule-ac-icon {
  position: absolute;
  left: .9rem;
  color: var(--muted2);
  font-size: .95rem;
  pointer-events: none;
  z-index: 1;
  transition: color .2s;
}
.schule-ac-input {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}
.schule-ac-input:focus ~ .schule-ac-icon,
.schule-ac-input:not(:placeholder-shown) ~ .schule-ac-icon {
  color: var(--brand-green);
}
.schule-ac-clear {
  position: absolute;
  right: .75rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted2);
  font-size: .8rem;
  padding: .25rem;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
  z-index: 1;
}
.schule-ac-clear:hover { color: var(--brand-red); background: #fee2e2; }

/* ── Selected badge ── */
.schule-ac-selected {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .5rem;
  padding: .6rem 1rem;
  background: var(--brand-green-lt);
  border: 1.5px solid #7dc27d;
  border-radius: var(--r-lg);
  font-size: .875rem;
  font-weight: 600;
  color: #14532d;
  animation: fadeIn .2s ease;
}
.schule-ac-selected i { color: var(--brand-green); font-size: 1rem; flex-shrink: 0; }
.schule-ac-selected span { flex: 1; }
.schule-ac-deselect {
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  font-size: .75rem;
  padding: .2rem .3rem;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.schule-ac-deselect:hover { color: var(--brand-red); background: rgba(165,3,33,.08); }

/* ── Dropdown list ── */
.schule-ac-list {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0; right: 0;
  z-index: 500;
  background: #fff;
  border: 1.5px solid var(--brand-green);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 4px 12px rgba(3,103,3,.08);
  list-style: none;
  padding: .375rem 0;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: dropIn .15s ease;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.schule-ac-item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .625rem 1rem;
  cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid var(--border-s);
}
.schule-ac-item:last-child { border-bottom: none; }
.schule-ac-item:hover,
.schule-ac-item[aria-selected="true"] {
  background: var(--brand-green-lt);
}
.schule-ac-item[aria-selected="true"] .sac-name { color: var(--brand-green); }

.sac-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: var(--bg2);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: .05rem;
}
.schule-ac-item[aria-selected="true"] .sac-icon,
.schule-ac-item:hover .sac-icon {
  background: rgba(3,103,3,.12);
  color: var(--brand-green);
}
.sac-text  { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.sac-name  { font-size: .855rem; font-weight: 500; color: var(--ink); line-height: 1.3; }
.sac-name mark {
  background: none;
  color: var(--brand-green);
  font-weight: 700;
}
.sac-meta  { font-size: .7rem; color: var(--muted2); }

/* Group header */
.schule-ac-group {
  padding: .35rem 1rem .2rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  background: var(--bg2);
  border-bottom: 1px solid var(--border-s);
  cursor: default;
  user-select: none;
}

/* Empty / no results */
.schule-ac-empty {
  padding: 1.25rem 1rem;
  font-size: .85rem;
  color: var(--muted);
  text-align: center;
}
.schule-ac-empty a { color: var(--brand-green); font-weight: 600; text-decoration: none; }

/* Result count pill */
.schule-ac-count {
  font-size: .68rem;
  color: var(--muted2);
  margin-top: .3rem;
  min-height: 1em;
}

/* wiz-hint link */
.wiz-hint-link {
  color: var(--brand-green);
  font-weight: 600;
  text-decoration: none;
  font-size: .72rem;
}
.wiz-hint-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   STEP 7 — FULL SUMMARY BLOCKS
   Version: 1.0.0 · 2026-05-08
══════════════════════════════════════════════════════════════════════ */

/* ── Summary block ── */
.sum-block {
  background: #fff;
  border: 1.5px solid var(--border-s);
  border-radius: var(--r-xl);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: box-shadow .2s;
}
.sum-block:hover { box-shadow: var(--sh-s); }

.sum-block-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: var(--bg2);
  border-bottom: 1px solid var(--border-s);
}
.sum-block-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.sum-icon-green  { background: var(--brand-green-lt);  color: var(--brand-green); }
.sum-icon-blue   { background: var(--brand-blue-lt);   color: var(--brand-blue); }
.sum-icon-orange { background: var(--brand-orange-lt); color: var(--brand-orange-dark); }
.sum-icon-purple { background: #f5f3ff; color: #7c3aed; }
.sum-icon-teal   { background: #ecfdf5; color: #065f46; }
.sum-icon-gray   { background: var(--bg2); color: var(--muted); }

.sum-block-title {
  flex: 1;
  font-family: var(--ff-b);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink2);
}

.sum-edit-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .875rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-family: var(--ff-b);
  font-size: .72rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.sum-edit-btn:hover {
  border-color: var(--brand-green);
  color: var(--brand-green);
  background: var(--brand-green-lt);
}

/* ── Summary rows ── */
.sum-block-body { padding: .25rem 0; }
.sum-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: .75rem;
  padding: .625rem 1.25rem;
  border-bottom: 1px solid var(--border-s);
  align-items: baseline;
}
.sum-row:last-child { border-bottom: none; }
.sum-key {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.sum-val {
  font-size: .875rem;
  color: var(--ink);
  line-height: 1.6;
}
.sum-val a      { color: var(--brand-green); text-decoration: none; }
.sum-val a:hover { text-decoration: underline; }
.sum-val-highlight { font-weight: 600; color: var(--ink); }
.sum-val-muted  { color: var(--muted); font-style: italic; font-size: .82rem; }

/* ── Tags ── */
.sum-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
}
.sum-tag-green { background: var(--brand-green-lt); color: #14532d; }
.sum-tag-red   { background: #fee2e2; color: #991b1b; }
.sum-tag-blue  { background: var(--brand-blue-lt);  color: #1e3a8a; }

/* ── Completeness bar ── */
.sum-completeness { margin: 1.25rem 0 .5rem; }
.sum-complete-bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.sum-complete-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}
.sum-complete-msg {
  font-size: .8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .4rem;
}

/* ── STEP 8: Submit recap ── */
.submit-recap {
  background: var(--bg2);
  border: 1.5px solid var(--border-s);
  border-radius: var(--r-xl);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.submit-recap-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: var(--ink);
}
.submit-recap-row i { font-size: 1rem; flex-shrink: 0; width: 18px; }
.submit-privacy-note {
  font-size: .75rem;
  color: var(--muted);
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.submit-privacy-note a { color: var(--muted); }
.submit-privacy-note a:hover { color: var(--brand-green); }

/* ── Responsive ── */
@media (max-width: 599.98px) {
  .sum-row { grid-template-columns: 1fr; gap: .2rem; }
  .sum-key { font-size: .65rem; }
  .sum-block-head { flex-wrap: wrap; gap: .5rem; }
  .sum-edit-btn { font-size: .68rem; }
}

/* ── Summary→Submit divider ─────────────────────────────────────────── */
.sum-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 1.5rem;
}
.sum-divider-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sum-divider span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
  white-space: nowrap;
}

/* ── Geburtsdatum — 3 selects ─────────────────────────────────────── */
.dob-selects {
  display: grid;
  grid-template-columns: 90px 130px 1fr;
  gap: .625rem;
}
.dob-select { }
@media (max-width: 420px) {
  .dob-selects { grid-template-columns: 1fr 1fr 1.4fr; }
}