/* ATLAS Webcraft — Wizard CSS (aus webcraft.html extrahiert) */
/* Farben werden durch welt-spezifische CSS-Vars überschrieben: --wizard-accent, --wizard-accent-bg, --wizard-bg-input, --wizard-bg-card, --wizard-text, --wizard-text-dim */
/* Clean Step Indicators */
.wc-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:3rem;max-width:36rem;margin-left:auto;margin-right:auto;padding:0 .5rem}
.wc-step{display:flex;align-items:center;gap:.6rem;flex-shrink:0;transition:opacity .3s ease}
.wc-step:not(.is-active):not(.is-done){opacity:.45}
.wc-step-num{width:2.25rem;height:2.25rem;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.875rem;letter-spacing:-.01em;border:1.5px solid rgba(255,255,255,.12);color:#83948f;background:transparent;transition:all .3s ease;flex-shrink:0}
.wc-step.is-active .wc-step-num{border-color:#00f5d4;color:#00f5d4;background:rgba(0,245,212,.08);box-shadow:0 0 0 4px rgba(0,245,212,.06)}
.wc-step.is-done .wc-step-num{border-color:rgba(0,245,212,.4);color:rgba(0,245,212,.7);background:transparent}
.wc-step-label{font-weight:600;font-size:.875rem;color:#dfe2eb;letter-spacing:.01em;white-space:nowrap}
.wc-step:not(.is-active) .wc-step-label{color:#83948f;font-weight:500}
.wc-step-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.04));margin:0 .65rem;min-width:.75rem}
.wc-step-off{opacity:.4;transition:opacity .3s}
.wc-input{width:100%;background:rgba(49,53,60,.55);border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.875rem 1.5rem;color:#dfe2eb;font-size:.95rem;transition:all .2s}
.wc-input:focus{outline:none;border-color:#00f5d4;box-shadow:0 0 0 2px rgba(0,245,212,.15)}
.wc-input::placeholder{color:#83948f}
select.wc-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2383948f' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.2rem center}
.wc-card{background:#1c2026;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:1rem;cursor:pointer;transition:all .2s;text-align:center}
.wc-card:hover{border-color:rgba(0,245,212,.3)}
.wc-card.selected{border-color:#00f5d4;background:rgba(0,245,212,.06)}
/* Demo-Karten: FAQ-artiger Glow auf Hover */
.wc-demo-card{position:relative;background:#1c2026;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.5rem;cursor:pointer;transition:all .25s ease;text-align:center;overflow:hidden}
.wc-demo-card:hover{border-color:#00f5d4;background:rgba(0,245,212,.08);box-shadow:0 0 28px rgba(0,245,212,.18),0 0 0 1px rgba(0,245,212,.35) inset;transform:translateY(-2px)}
.wc-demo-card.selected{border-color:#00f5d4;background:rgba(0,245,212,.12);box-shadow:0 0 22px rgba(0,245,212,.25)}
.wc-demo-card .wc-demo-overlay{position:absolute;inset:.5rem;border-radius:.5rem;background:rgba(0,32,26,.75);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;opacity:0;transition:opacity .2s;pointer-events:none}
.wc-demo-card:hover .wc-demo-overlay{opacity:1;pointer-events:auto}
.wc-demo-card .wc-demo-overlay span.material-symbols-outlined{font-size:28px;color:#00f5d4}
.wc-demo-card .wc-demo-overlay .wc-demo-label{color:#dfe2eb;font-size:.75rem;font-weight:700;letter-spacing:.03em}
/* Scan-Button & Progress */
.wc-scan-wrap{display:flex;gap:.5rem;align-items:stretch}
.wc-scan-wrap .wc-input{flex:1}
.wc-scan-btn{padding:0 1.25rem;border-radius:.75rem;background:linear-gradient(135deg,#00f5d4,#00dfc1);color:#00201a;font-weight:700;font-size:.85rem;border:none;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.wc-scan-btn:hover{transform:scale(1.03);box-shadow:0 4px 18px rgba(0,245,212,.3)}
.wc-scan-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.wc-scan-progress{margin-top:.75rem;padding:.85rem 1rem;background:rgba(0,245,212,.06);border:1px solid rgba(0,245,212,.2);border-radius:.75rem;display:none}
.wc-scan-progress.active{display:block}
.wc-scan-bar{position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:9999px;overflow:hidden;margin-top:.5rem}
.wc-scan-bar-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,#00f5d4,#7af8e1);border-radius:9999px;transition:width .3s ease}
.wc-scan-status{font-size:.8rem;color:#b9cac4;display:flex;align-items:center;gap:.5rem}
.wc-scan-status .material-symbols-outlined{font-size:16px;color:#00f5d4;animation:spin 1s linear infinite}
.wc-scan-done .wc-scan-status .material-symbols-outlined{animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* Social-Media Link Inputs */
.wc-social-link-wrap{margin-top:.65rem;display:none}
.wc-social-link-wrap.active{display:block}
.wc-social-link-wrap .wc-input{font-size:.85rem;padding:.7rem 1rem}

/* Anchor-Scroll-Offset damit Headlines unter Fixed Nav (80px) liegen */
#kontakt, #ki-assistent, #faq, #ablauf, #hosting, #beispiele, #vergleich, #seo, #wc-step1, #wc-step5{scroll-margin-top:100px}

/* Radio-Card für Hosting Ja/Nein */
.wc-radio-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.06);background:#1c2026;cursor:pointer;text-align:center;transition:all .2s}
.wc-radio-card:hover{border-color:rgba(0,245,212,.3)}
.wc-radio-card input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.wc-radio-card:has(input:checked){border-color:#00f5d4;background:rgba(0,245,212,.06);box-shadow:0 0 20px rgba(0,245,212,.1)}
.wc-radio-card .material-symbols-outlined{font-size:1.5rem;color:#83948f;transition:color .2s}
.wc-radio-card:has(input:checked) .material-symbols-outlined{color:#00f5d4}
.wc-radio-card .font-bold{font-size:.85rem}

/* ── Mobile Optimierung ── */
@media (max-width:640px){
  /* Formular-Container kompakter */
  #wc-step1 > div, #wc-step2 > div, #wc-step3 > div, #wc-step4 > div, #wc-step5 > div{
    padding:1.25rem !important;border-radius:1.25rem
  }
  .wc-section{margin-bottom:1.25rem}
  .wc-label{font-size:.65rem;margin-bottom:.4rem}
  /* Inputs: größere Tap-Targets (≥ 44px), iOS Zoom verhindern mit 16px font-size */
  .wc-input{padding:.95rem 1rem !important;font-size:16px !important;min-height:48px}
  select.wc-input{padding-right:2.5rem !important}
  textarea.wc-input{min-height:90px}
  /* Paletten-Grid: 3 Spalten */
  #wc-palettes, #wc-palettes-standard{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.6rem}
  #wc-palettes .wc-card, #wc-palettes-standard .wc-card{padding:.65rem}
  #wc-palettes .wc-card p, #wc-palettes-standard .wc-card p{font-size:.65rem;line-height:1.1}
  /* Stil-Cards: 2 Spalten */
  #wc-styles{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.6rem}
  #wc-styles .wc-card{padding:.8rem}
  /* Demo-Karten: 2 Spalten, Label immer sichtbar, Overlay per :active */
  #wc-demos{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.65rem}
  .wc-demo-card{padding:.4rem}
  .wc-demo-card p{font-size:.7rem;margin-top:.4rem}
  .wc-demo-card .wc-demo-overlay{opacity:0}
  .wc-demo-card:active .wc-demo-overlay{opacity:1}
  /* Scan-Wrap: vertikal + Button full-width */
  .wc-scan-wrap{flex-direction:column;gap:.6rem}
  .wc-scan-btn{width:100%;padding:.95rem;min-height:48px;justify-content:center}
  .wc-scan-progress{padding:.7rem .85rem}
  /* Referenz-Section: Hinweistext kleiner */
  .wc-section p.text-xs{font-size:.7rem}
  /* Wc-check: größere Tap-Targets */
  .wc-check{padding:.75rem 1rem;min-height:48px}
  /* Logo/Dropzones: kompakter */
  #wc-logo-upload label, #wc-texte-hint label, #wc-bilder-hint label{padding:1rem}
  /* Paletten Swatches grösser */
  .wc-swatch{height:34px}
  /* Unterseiten: 2 Spalten */
  #wc-step2 .grid.grid-cols-2.md\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  /* Features/Social: volle 2-Spalten */
  .wc-check{font-size:.85rem}
  /* Hero Trust-Bar: kompakter */
  /* Submit-Button */
  #wc-submit-btn{padding:1.1rem;font-size:1.1rem}
  /* KI-Chat mobile */
  .wc-inline-chat{border-radius:1.25rem}
  #wc-inline-msgs{padding-left:1rem !important;padding-right:1rem !important}
  /* Step-Navigation: kompakter */
  .wc-btn{padding:.8rem 1.25rem;font-size:.9rem;min-height:48px}
  /* Step-Header: Headline + Back-Button stacked auf engen Screens */
  #wc-step1 .flex.items-center.justify-between,
  #wc-step2 .flex.items-center.justify-between,
  #wc-step3 .flex.items-center.justify-between,
  #wc-step4 .flex.items-center.justify-between{flex-wrap:wrap;gap:.75rem}
  /* Section-Headlines kleiner auf Mobile */
  #wc-step4 h3, #wc-step3 h3, #wc-step2 h3, #wc-step1 h3{font-size:1.05rem;line-height:1.3}
  /* Step-Indicator: kompakter auf Mobile */
  .wc-steps{gap:0;padding:0 .25rem;margin-bottom:2rem}
  .wc-step{gap:.4rem}
  .wc-step-num{width:1.75rem;height:1.75rem;font-size:.75rem}
  .wc-step-label{font-size:.7rem}
  .wc-step-line{margin:0 .35rem;min-width:.4rem}
  /* Farbpaletten-Labels beim Klassisch-Teil */
  #wc-palettes-standard+.mt-3, #wc-palettes+.mt-3{margin-top:.75rem}
}
@media (max-width:400px){
  #wc-palettes, #wc-palettes-standard{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #wc-demos{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.wc-swatch{width:100%;height:40px;border-radius:.5rem;margin-bottom:.5rem}
.wc-check{display:flex;align-items:center;gap:.625rem;padding:.625rem 1rem;background:rgba(49,53,60,.35);border:1px solid rgba(255,255,255,.06);border-radius:.625rem;cursor:pointer;transition:all .2s}
.wc-check:hover{border-color:rgba(0,245,212,.25)}
.wc-check input:checked~span{color:#dfe2eb}
.wc-btn{padding:.875rem 2rem;border-radius:.75rem;font-weight:700;font-size:1rem;transition:all .2s;cursor:pointer;border:none}
.wc-btn-next{background:linear-gradient(135deg,#00f5d4,#00dfc1);color:#00201a}
.wc-btn-next:hover{transform:scale(1.02);box-shadow:0 8px 30px rgba(0,245,212,.2)}
.wc-btn-next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.wc-btn-back{background:transparent;border:1px solid rgba(255,255,255,.1);color:#b9cac4}
.wc-btn-back:hover{border-color:rgba(0,245,212,.3);color:#dfe2eb}
.wc-label{font-size:.7rem;font-weight:700;color:#83948f;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem;display:block}
.wc-section{margin-bottom:1.75rem}