/* Start custom CSS for html, class: .elementor-element-230639e *//* ============================================
   amaseo.de – Konto-Analyse Seite CSS
   Einfügen unter: Elementor > Custom CSS
   ODER: Appearance > Customize > Additional CSS
   ODER: Im Child-Theme style.css
   ============================================ */

:root {
    --navy:       #1a2035;
    --navy-soft:  #2d3a55;
    --orange:     #f97316;
    --orange-dark:#ea6c0a;
    --orange-bg:  #fff7f0;
    --orange-mid: #fed7aa;
    --bg-grad:    linear-gradient(135deg, #fdf0e8 0%, #f0f4fb 50%, #e8f4f8 100%);
    --white:      #ffffff;
    --gray-50:    #fafafa;
    --gray-100:   #f4f4f5;
    --gray-200:   #e4e4e7;
    --gray-400:   #a1a1aa;
    --gray-500:   #71717a;
    --green:      #16a34a;
    --shadow-sm:  0 2px 8px rgba(26,32,53,0.07);
    --shadow:     0 4px 20px rgba(26,32,53,0.10);
    --shadow-lg:  0 8px 40px rgba(26,32,53,0.13);
    --radius:     18px;
    --radius-sm:  10px;
    --radius-xs:  6px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Nunito', sans-serif; background: var(--bg-grad); min-height: 100vh; color: var(--navy); }

  /* HERO */
  .hero { background: var(--bg-grad); padding: 52px 24px 44px; text-align: center; }
  .hero-logo { font-size: 26px; font-weight: 900; color: var(--navy); letter-spacing: -0.5px; margin-bottom: 32px; display: inline-block; }
  .hero-logo span { color: var(--orange); }
  .hero h1 { font-size: clamp(22px, 4vw, 38px); font-weight: 900; color: var(--navy); line-height: 1.18; max-width: 620px; margin: 0 auto 14px; letter-spacing: -0.5px; }
  .hero-sub { font-size: 16px; color: var(--gray-500); max-width: 460px; margin: 0 auto 32px; line-height: 1.6; font-weight: 500; }
  .trust-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .trust-badge { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 6px 14px; font-size: 13px; color: var(--navy-soft); font-weight: 700; box-shadow: var(--shadow-sm); }
  .trust-badge .ck { color: var(--orange); }

  /* CONTAINER */
  .container { max-width: 800px; margin: 0 auto; padding: 36px 20px 80px; }

  /* STEP BAR */
  .step-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
  .step-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
  .step-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--white); border: 2px solid var(--gray-200); color: var(--gray-400); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; transition: all .3s; flex-shrink: 0; box-shadow: var(--shadow-sm); }
  .step-dot.active { background: var(--orange); border-color: var(--orange); color: white; box-shadow: 0 0 0 5px rgba(249,115,22,0.15); }
  .step-dot.done { background: var(--green); border-color: var(--green); color: white; }
  .step-dot.done span { display: none; }
  .step-dot.done::after { content: '✓'; font-size: 15px; }
  .step-lbl { font-size: 11px; font-weight: 700; color: var(--gray-400); position: absolute; bottom: -20px; white-space: nowrap; letter-spacing: 0.04em; }
  .step-dot.active .step-lbl { color: var(--orange); }
  .step-dot.done .step-lbl { color: var(--green); }
  .step-line { flex: 1; height: 2px; background: var(--gray-200); max-width: 80px; transition: background .3s; margin-bottom: 20px; }
  .step-line.done { background: var(--green); }

  /* CARD */
  .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; display: none; animation: fadeUp .3s ease; border: 1px solid rgba(26,32,53,0.06); }
  .card.active { display: block; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

  .eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
  .card h2 { font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.3px; line-height: 1.3; }
  .card-desc { font-size: 14.5px; color: var(--gray-500); margin-bottom: 28px; line-height: 1.6; font-weight: 500; }

  /* TYPE GRID */
  .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .type-card { border: 2px solid var(--gray-200); border-radius: var(--radius-sm); padding: 20px; cursor: pointer; transition: all .2s; position: relative; background: var(--gray-50); }
  .type-card:hover { border-color: var(--orange); background: var(--orange-bg); transform: translateY(-2px); box-shadow: var(--shadow); }
  .type-card.selected { border-color: var(--orange); background: var(--orange-bg); box-shadow: 0 0 0 4px rgba(249,115,22,0.12), var(--shadow); }
  .type-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
  .type-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 5px; }
  .type-card p { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; font-weight: 500; }
  .type-tag { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 100px; background: var(--gray-200); color: var(--gray-500); letter-spacing: 0.04em; text-transform: uppercase; }
  .type-card.selected .type-tag { display: none; }
  .type-check { display: none; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: var(--orange); border-radius: 50%; color: white; font-size: 13px; align-items: center; justify-content: center; font-weight: 800; }
  .type-card.selected .type-check { display: flex; }

  /* FORM */
  .form-grid { display: grid; gap: 16px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-group label { font-size: 13px; font-weight: 800; color: var(--navy); }
  .req { color: var(--orange); }
  .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--gray-200); border-radius: var(--radius-xs); padding: 11px 14px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 500; color: var(--navy); background: var(--gray-50); transition: all .2s; outline: none; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--orange); background: var(--white); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); font-weight: 400; }
  .form-group textarea { resize: vertical; min-height: 80px; }
  .hint { font-size: 11.5px; color: var(--gray-400); font-weight: 500; }

  /* INFO BOX */
  .info-box { background: linear-gradient(135deg, #fff7f0, #fff3e8); border: 1.5px solid var(--orange-mid); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 20px; }
  .info-title { font-size: 13px; font-weight: 800; color: var(--orange-dark); margin-bottom: 10px; }
  .info-box ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .info-box ul li { font-size: 13px; color: var(--navy-soft); font-weight: 600; padding-left: 20px; position: relative; line-height: 1.5; }
  .info-box ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

  /* NOTE */
  .note { background: linear-gradient(135deg, #fffbeb, #fff8e6); border: 1.5px solid #fcd34d; border-radius: var(--radius-sm); padding: 16px 18px; display: flex; gap: 12px; margin-top: 20px; }
  .note-icon { font-size: 20px; flex-shrink: 0; }
  .note-text { font-size: 13px; color: #92400e; font-weight: 600; line-height: 1.55; }
  .note-text strong { color: #78350f; }
  .note.green { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: #86efac; }
  .note.green .note-text { color: #14532d; }
  .note.green .note-text strong { color: #15803d; }

  /* CHECKBOXES */
  .check-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .check-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--navy-soft); cursor: pointer; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 5px 12px; transition: all .15s; }
  .check-item:hover { border-color: var(--orange); background: var(--orange-bg); }
  .check-item input { display: none; }

  /* BUTTONS */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 100px; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s; border: none; letter-spacing: 0.01em; }
  .btn-primary { background: linear-gradient(135deg, var(--orange), #fb923c); color: white; box-shadow: 0 4px 18px rgba(249,115,22,0.35); }
  .btn-primary:hover { background: linear-gradient(135deg, var(--orange-dark), var(--orange)); transform: translateY(-1px); box-shadow: 0 6px 26px rgba(249,115,22,0.45); }
  .btn-primary:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-back { background: transparent; color: var(--gray-500); font-size: 14px; padding: 10px 4px; }
  .btn-back:hover { color: var(--navy); }
  .btn-row { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; flex-wrap: wrap; gap: 12px; }

  /* DSGVO */
  .dsgvo { display: flex; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gray-200); font-size: 11.5px; color: var(--gray-400); font-weight: 500; line-height: 1.5; }
  .dsgvo a { color: var(--orange); text-decoration: none; font-weight: 700; }

  /* SUCCESS */
  .success-wrap { text-align: center; padding: 56px 32px; }
  .success-icon { width: 76px; height: 76px; background: linear-gradient(135deg, #ffedd5, #fed7aa); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 34px; box-shadow: 0 0 0 8px rgba(249,115,22,0.10); }
  .success-wrap h2 { font-size: 26px; font-weight: 900; color: var(--navy); margin-bottom: 12px; letter-spacing: -0.4px; }
  .success-wrap p { font-size: 15px; color: var(--gray-500); max-width: 420px; margin: 0 auto 28px; line-height: 1.6; font-weight: 500; }
  .summary { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 18px 22px; max-width: 420px; margin: 0 auto; text-align: left; }
  .sum-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--gray-200); }
  .sum-row:last-child { border-bottom: none; }
  .sum-lbl { color: var(--gray-400); font-weight: 600; }
  .sum-val { font-weight: 800; color: var(--navy); }
  .sum-val.free { color: var(--green); }

  @media (max-width: 600px) { .card { padding: 24px 18px; } .hero { padding: 40px 18px 32px; } }/* End custom CSS */
/* Start custom CSS for column, class: .elementor-element-94f7ada */<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kostenlose Analyse – amaseo.de</title>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
  :root {
    --navy:       #1a2035;
    --navy-soft:  #2d3a55;
    --orange:     #f97316;
    --orange-dark:#ea6c0a;
    --orange-bg:  #fff7f0;
    --orange-mid: #fed7aa;
    --bg-grad:    linear-gradient(135deg, #fdf0e8 0%, #f0f4fb 50%, #e8f4f8 100%);
    --white:      #ffffff;
    --gray-50:    #fafafa;
    --gray-100:   #f4f4f5;
    --gray-200:   #e4e4e7;
    --gray-400:   #a1a1aa;
    --gray-500:   #71717a;
    --green:      #16a34a;
    --shadow-sm:  0 2px 8px rgba(26,32,53,0.07);
    --shadow:     0 4px 20px rgba(26,32,53,0.10);
    --shadow-lg:  0 8px 40px rgba(26,32,53,0.13);
    --radius:     18px;
    --radius-sm:  10px;
    --radius-xs:  6px;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Nunito', sans-serif; background: var(--bg-grad); min-height: 100vh; color: var(--navy); }

  /* HERO */
  .hero { background: var(--bg-grad); padding: 52px 24px 44px; text-align: center; }
  .hero-logo { font-size: 26px; font-weight: 900; color: var(--navy); letter-spacing: -0.5px; margin-bottom: 32px; display: inline-block; }
  .hero-logo span { color: var(--orange); }
  .hero h1 { font-size: clamp(22px, 4vw, 38px); font-weight: 900; color: var(--navy); line-height: 1.18; max-width: 620px; margin: 0 auto 14px; letter-spacing: -0.5px; }
  .hero-sub { font-size: 16px; color: var(--gray-500); max-width: 460px; margin: 0 auto 32px; line-height: 1.6; font-weight: 500; }
  .trust-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .trust-badge { background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 6px 14px; font-size: 13px; color: var(--navy-soft); font-weight: 700; box-shadow: var(--shadow-sm); }
  .trust-badge .ck { color: var(--orange); }

  /* CONTAINER */
  .container { max-width: 800px; margin: 0 auto; padding: 36px 20px 80px; }

  /* STEP BAR */
  .step-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
  .step-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
  .step-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--white); border: 2px solid var(--gray-200); color: var(--gray-400); font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; transition: all .3s; flex-shrink: 0; box-shadow: var(--shadow-sm); }
  .step-dot.active { background: var(--orange); border-color: var(--orange); color: white; box-shadow: 0 0 0 5px rgba(249,115,22,0.15); }
  .step-dot.done { background: var(--green); border-color: var(--green); color: white; }
  .step-dot.done span { display: none; }
  .step-dot.done::after { content: '✓'; font-size: 15px; }
  .step-lbl { font-size: 11px; font-weight: 700; color: var(--gray-400); position: absolute; bottom: -20px; white-space: nowrap; letter-spacing: 0.04em; }
  .step-dot.active .step-lbl { color: var(--orange); }
  .step-dot.done .step-lbl { color: var(--green); }
  .step-line { flex: 1; height: 2px; background: var(--gray-200); max-width: 80px; transition: background .3s; margin-bottom: 20px; }
  .step-line.done { background: var(--green); }

  /* CARD */
  .card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 40px; display: none; animation: fadeUp .3s ease; border: 1px solid rgba(26,32,53,0.06); }
  .card.active { display: block; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

  .eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
  .card h2 { font-size: 22px; font-weight: 900; color: var(--navy); margin-bottom: 8px; letter-spacing: -0.3px; line-height: 1.3; }
  .card-desc { font-size: 14.5px; color: var(--gray-500); margin-bottom: 28px; line-height: 1.6; font-weight: 500; }

  /* TYPE GRID */
  .type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
  .type-card { border: 2px solid var(--gray-200); border-radius: var(--radius-sm); padding: 20px; cursor: pointer; transition: all .2s; position: relative; background: var(--gray-50); }
  .type-card:hover { border-color: var(--orange); background: var(--orange-bg); transform: translateY(-2px); box-shadow: var(--shadow); }
  .type-card.selected { border-color: var(--orange); background: var(--orange-bg); box-shadow: 0 0 0 4px rgba(249,115,22,0.12), var(--shadow); }
  .type-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 12px; background: var(--white); box-shadow: var(--shadow-sm); }
  .type-card h3 { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 5px; }
  .type-card p { font-size: 12.5px; color: var(--gray-500); line-height: 1.5; font-weight: 500; }
  .type-tag { position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 100px; background: var(--gray-200); color: var(--gray-500); letter-spacing: 0.04em; text-transform: uppercase; }
  .type-card.selected .type-tag { display: none; }
  .type-check { display: none; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: var(--orange); border-radius: 50%; color: white; font-size: 13px; align-items: center; justify-content: center; font-weight: 800; }
  .type-card.selected .type-check { display: flex; }

  /* FORM */
  .form-grid { display: grid; gap: 16px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
  .form-group { display: flex; flex-direction: column; gap: 5px; }
  .form-group label { font-size: 13px; font-weight: 800; color: var(--navy); }
  .req { color: var(--orange); }
  .form-group input, .form-group select, .form-group textarea { border: 1.5px solid var(--gray-200); border-radius: var(--radius-xs); padding: 11px 14px; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 500; color: var(--navy); background: var(--gray-50); transition: all .2s; outline: none; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--orange); background: var(--white); box-shadow: 0 0 0 3px rgba(249,115,22,0.12); }
  .form-group input::placeholder, .form-group textarea::placeholder { color: var(--gray-400); font-weight: 400; }
  .form-group textarea { resize: vertical; min-height: 80px; }
  .hint { font-size: 11.5px; color: var(--gray-400); font-weight: 500; }

  /* INFO BOX */
  .info-box { background: linear-gradient(135deg, #fff7f0, #fff3e8); border: 1.5px solid var(--orange-mid); border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 20px; }
  .info-title { font-size: 13px; font-weight: 800; color: var(--orange-dark); margin-bottom: 10px; }
  .info-box ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
  .info-box ul li { font-size: 13px; color: var(--navy-soft); font-weight: 600; padding-left: 20px; position: relative; line-height: 1.5; }
  .info-box ul li::before { content: '→'; position: absolute; left: 0; color: var(--orange); font-weight: 800; }

  /* NOTE */
  .note { background: linear-gradient(135deg, #fffbeb, #fff8e6); border: 1.5px solid #fcd34d; border-radius: var(--radius-sm); padding: 16px 18px; display: flex; gap: 12px; margin-top: 20px; }
  .note-icon { font-size: 20px; flex-shrink: 0; }
  .note-text { font-size: 13px; color: #92400e; font-weight: 600; line-height: 1.55; }
  .note-text strong { color: #78350f; }
  .note.green { background: linear-gradient(135deg, #f0fdf4, #ecfdf5); border-color: #86efac; }
  .note.green .note-text { color: #14532d; }
  .note.green .note-text strong { color: #15803d; }

  /* CHECKBOXES */
  .check-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .check-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--navy-soft); cursor: pointer; background: var(--gray-100); border: 1.5px solid var(--gray-200); border-radius: 100px; padding: 5px 12px; transition: all .15s; }
  .check-item:hover { border-color: var(--orange); background: var(--orange-bg); }
  .check-item input { display: none; }

  /* BUTTONS */
  .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 100px; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; transition: all .2s; border: none; letter-spacing: 0.01em; }
  .btn-primary { background: linear-gradient(135deg, var(--orange), #fb923c); color: white; box-shadow: 0 4px 18px rgba(249,115,22,0.35); }
  .btn-primary:hover { background: linear-gradient(135deg, var(--orange-dark), var(--orange)); transform: translateY(-1px); box-shadow: 0 6px 26px rgba(249,115,22,0.45); }
  .btn-primary:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-back { background: transparent; color: var(--gray-500); font-size: 14px; padding: 10px 4px; }
  .btn-back:hover { color: var(--navy); }
  .btn-row { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; flex-wrap: wrap; gap: 12px; }

  /* DSGVO */
  .dsgvo { display: flex; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--gray-200); font-size: 11.5px; color: var(--gray-400); font-weight: 500; line-height: 1.5; }
  .dsgvo a { color: var(--orange); text-decoration: none; font-weight: 700; }

  /* SUCCESS */
  .success-wrap { text-align: center; padding: 56px 32px; }
  .success-icon { width: 76px; height: 76px; background: linear-gradient(135deg, #ffedd5, #fed7aa); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-size: 34px; box-shadow: 0 0 0 8px rgba(249,115,22,0.10); }
  .success-wrap h2 { font-size: 26px; font-weight: 900; color: var(--navy); margin-bottom: 12px; letter-spacing: -0.4px; }
  .success-wrap p { font-size: 15px; color: var(--gray-500); max-width: 420px; margin: 0 auto 28px; line-height: 1.6; font-weight: 500; }
  .summary { background: var(--gray-50); border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: 18px 22px; max-width: 420px; margin: 0 auto; text-align: left; }
  .sum-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--gray-200); }
  .sum-row:last-child { border-bottom: none; }
  .sum-lbl { color: var(--gray-400); font-weight: 600; }
  .sum-val { font-weight: 800; color: var(--navy); }
  .sum-val.free { color: var(--green); }

  @media (max-width: 600px) { .card { padding: 24px 18px; } .hero { padding: 40px 18px 32px; } }
</style>
</head>
<body>

<header class="hero">
  <div class="hero-logo">AMA<span>SEO</span></div>
  <h1>Kostenlose Analyse –<br>in 48 Stunden. Unverbindlich.</h1>
  <p class="hero-sub">Wählen Sie Ihren Analysetyp. Kein Verkaufsgespräch, keine Verpflichtung.</p>
  <div class="trust-row">
    <span class="trust-badge"><span class="ck">✓</span> 374 Unternehmen betreut</span>
    <span class="trust-badge"><span class="ck">✓</span> 98 Bewertungen ProvenExpert</span>
    <span class="trust-badge"><span class="ck">✓</span> 100 % DSGVO-konform</span>
    <span class="trust-badge"><span class="ck">✓</span> Kostenlos & unverbindlich</span>
  </div>
</header>

<main class="container">

  <div class="step-bar">
    <div class="step-wrap">
      <div class="step-dot active" id="dot1"><span>1</span><span class="step-lbl">Typ wählen</span></div>
    </div>
    <div class="step-line" id="line1"></div>
    <div class="step-wrap">
      <div class="step-dot" id="dot2"><span>2</span><span class="step-lbl">Ihre Daten</span></div>
    </div>
    <div class="step-line" id="line2"></div>
    <div class="step-wrap">
      <div class="step-dot" id="dot3"><span>3</span><span class="step-lbl">Fertig</span></div>
    </div>
  </div>

  <!-- STEP 1 -->
  <div class="card active" id="step1">
    <div class="eyebrow">Schritt 1 von 2</div>
    <h2>Welche Analyse passt zu Ihnen?</h2>
    <p class="card-desc">Wählen Sie den Typ, der Ihrer aktuellen Situation entspricht. Alle Analysen sind kostenlos und unverbindlich.</p>
    <div class="type-grid">
      <div class="type-card" data-type="amazon-ads" onclick="pick(this)">
        <span class="type-tag">Termin nötig</span><span class="type-check">✓</span>
        <div class="type-icon">📦</div>
        <h3>Amazon Ads Analyse</h3>
        <p>Sie schalten bereits Amazon-Kampagnen und möchten wissen, wo Budget verloren geht und was optimiert werden kann.</p>
      </div>
      <div class="type-card" data-type="google-ads" onclick="pick(this)">
        <span class="type-tag">Termin nötig</span><span class="type-check">✓</span>
        <div class="type-icon">🔍</div>
        <h3>Google Ads Analyse</h3>
        <p>Sie nutzen Google Ads (Search, Shopping oder Performance Max) und möchten eine externe Einschätzung.</p>
      </div>
      <div class="type-card" data-type="website" onclick="pick(this)">
        <span class="type-tag">Sofort</span><span class="type-check">✓</span>
        <div class="type-icon">🌐</div>
        <h3>Website Audit</h3>
        <p>Noch keine Ads aktiv? Wir analysieren Ihre Website auf Conversion-Potenzial, technische Basis und SEO-Grundlagen.</p>
      </div>
      <div class="type-card" data-type="amazon-shop" onclick="pick(this)">
        <span class="type-tag">Sofort</span><span class="type-check">✓</span>
        <div class="type-icon">🛒</div>
        <h3>Amazon Shop Analyse</h3>
        <p>Sie verkaufen auf Amazon ohne Werbung? Wir analysieren Ihren Shop auf Listing-Qualität und Werbepotenzial.</p>
      </div>
    </div>
    <div class="btn-row" style="justify-content:flex-end;margin-top:24px;">
      <button class="btn btn-primary" id="btn1" onclick="go2()" disabled>Weiter →</button>
    </div>
  </div>

  <!-- STEP 2a: Amazon Ads -->
  <div class="card" id="step2-amazon-ads">
    <div class="eyebrow">Schritt 2 von 2 · Amazon Ads Analyse</div>
    <h2>Kontaktdaten & Terminwunsch</h2>
    <p class="card-desc">Für die Analyse benötigen wir Zugang zu Ihrem Konto. Ein amaseo-Techniker richtet den Read-only-Zugang gemeinsam mit Ihnen in einem kurzen Termin ein.</p>
    <div class="info-box">
      <div class="info-title">📋 Was beim Termin passiert</div>
      <ul>
        <li>15-Minuten-Call mit einem amaseo-Techniker (Video oder Telefon)</li>
        <li>Gemeinsames Einrichten des Read-only-Zugangs – kein Passwort, sichere Freigabe</li>
        <li>Sie behalten jederzeit die volle Kontrolle und können den Zugang widerrufen</li>
        <li>Nach dem Termin: schriftliche Analyse in 48 Stunden per E-Mail</li>
      </ul>
    </div>
    <div class="form-grid">
      <div class="form-row">
        <div class="form-group"><label>Vorname <span class="req">*</span></label><input type="text" placeholder="Max"></div>
        <div class="form-group"><label>Nachname <span class="req">*</span></label><input type="text" placeholder="Mustermann"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>E-Mail-Adresse <span class="req">*</span></label><input type="email" placeholder="max@firma.de"></div>
        <div class="form-group"><label>Telefon <span class="req">*</span></label><input type="tel" placeholder="+49 160 000 0000"><span class="hint">Für die Terminbestätigung</span></div>
      </div>
      <div class="form-group"><label>Unternehmen <span class="req">*</span></label><input type="text" placeholder="Musterfirma GmbH"></div>
      <div class="form-row">
        <div class="form-group"><label>Monatliches Amazon Ads Budget</label>
          <select><option value="">Bitte wählen</option><option>Unter 3.000 €</option><option>3.000 – 10.000 €</option><option>10.000 – 30.000 €</option><option>30.000 – 100.000 €</option><option>Über 100.000 €</option></select></div>
        <div class="form-group"><label>Bevorzugter Terminzeitraum</label>
          <select><option value="">Bitte wählen</option><option>Morgens (9–12 Uhr)</option><option>Mittags (12–15 Uhr)</option><option>Nachmittags (15–18 Uhr)</option></select></div>
      </div>
    </div>
    <div class="note"><div class="note-icon">📅</div><div class="note-text"><strong>Nächster Schritt:</strong> Wir melden uns innerhalb von 24 Stunden mit einem Terminvorschlag per E-Mail. Der Termin dauert ca. 15 Minuten.</div></div>
    <div class="dsgvo">🔒 Ihre Daten werden ausschließlich zur Durchführung der Analyse genutzt und nicht an Dritte weitergegeben. <a href="#">Datenschutz</a></div>
    <div class="btn-row">
      <button class="btn btn-back" onclick="back()">← Zurück</button>
      <button class="btn btn-primary" onclick="done('amazon-ads')">Termin anfragen & Analyse starten →</button>
    </div>
  </div>

  <!-- STEP 2b: Google Ads -->
  <div class="card" id="step2-google-ads">
    <div class="eyebrow">Schritt 2 von 2 · Google Ads Analyse</div>
    <h2>Kontaktdaten & Terminwunsch</h2>
    <p class="card-desc">Für die Analyse richten wir gemeinsam in einem kurzen Termin einen Read-only-Zugang über den Google Ads Manager ein.</p>
    <div class="info-box">
      <div class="info-title">📋 Was beim Termin passiert</div>
      <ul>
        <li>15-Minuten-Call mit einem amaseo-Techniker (Video oder Telefon)</li>
        <li>Zugangsfreigabe über Google Ads Manager – keine Passwort-Übergabe</li>
        <li>Nach dem Termin: schriftliche Analyse in 48 Stunden per E-Mail</li>
        <li>3–5 konkrete Optimierungsempfehlungen mit Prioritätensetzung</li>
      </ul>
    </div>
    <div class="form-grid">
      <div class="form-row">
        <div class="form-group"><label>Vorname <span class="req">*</span></label><input type="text" placeholder="Max"></div>
        <div class="form-group"><label>Nachname <span class="req">*</span></label><input type="text" placeholder="Mustermann"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>E-Mail-Adresse <span class="req">*</span></label><input type="email" placeholder="max@firma.de"></div>
        <div class="form-group"><label>Telefon <span class="req">*</span></label><input type="tel" placeholder="+49 160 000 0000"><span class="hint">Für die Terminbestätigung</span></div>
      </div>
      <div class="form-group"><label>Unternehmen <span class="req">*</span></label><input type="text" placeholder="Musterfirma GmbH"></div>
      <div class="form-row">
        <div class="form-group"><label>Monatliches Google Ads Budget</label>
          <select><option value="">Bitte wählen</option><option>Unter 3.000 €</option><option>3.000 – 10.000 €</option><option>10.000 – 30.000 €</option><option>30.000 – 100.000 €</option><option>Über 100.000 €</option></select></div>
        <div class="form-group"><label>Bevorzugter Terminzeitraum</label>
          <select><option value="">Bitte wählen</option><option>Morgens (9–12 Uhr)</option><option>Mittags (12–15 Uhr)</option><option>Nachmittags (15–18 Uhr)</option></select></div>
      </div>
      <div class="form-group"><label>Welche Kampagnentypen nutzen Sie?</label>
        <div class="check-group">
          <label class="check-item"><input type="checkbox"> Search</label>
          <label class="check-item"><input type="checkbox"> Shopping</label>
          <label class="check-item"><input type="checkbox"> Performance Max</label>
          <label class="check-item"><input type="checkbox"> Display</label>
          <label class="check-item"><input type="checkbox"> YouTube</label>
        </div>
      </div>
    </div>
    <div class="note"><div class="note-icon">📅</div><div class="note-text"><strong>Nächster Schritt:</strong> Wir melden uns innerhalb von 24 Stunden mit einem Terminvorschlag per E-Mail.</div></div>
    <div class="dsgvo">🔒 Ihre Daten werden ausschließlich zur Durchführung der Analyse genutzt. <a href="#">Datenschutz</a></div>
    <div class="btn-row">
      <button class="btn btn-back" onclick="back()">← Zurück</button>
      <button class="btn btn-primary" onclick="done('google-ads')">Termin anfragen & Analyse starten →</button>
    </div>
  </div>

  <!-- STEP 2c: Website -->
  <div class="card" id="step2-website">
    <div class="eyebrow">Schritt 2 von 2 · Website Audit</div>
    <h2>Ihre Website & Kontaktdaten</h2>
    <p class="card-desc">Kein Zugang nötig, kein Termin erforderlich. Tragen Sie Ihre Website-URL ein – fertig.</p>
    <div class="form-grid">
      <div class="form-row">
        <div class="form-group"><label>Vorname <span class="req">*</span></label><input type="text" placeholder="Max"></div>
        <div class="form-group"><label>Nachname <span class="req">*</span></label><input type="text" placeholder="Mustermann"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>E-Mail-Adresse <span class="req">*</span></label><input type="email" placeholder="max@firma.de"></div>
        <div class="form-group"><label>Unternehmen</label><input type="text" placeholder="Musterfirma GmbH"></div>
      </div>
      <div class="form-group"><label>Website-URL <span class="req">*</span></label><input type="url" placeholder="https://www.ihreshop.de"><span class="hint">Die URL Ihres Online-Shops oder Ihrer Website</span></div>
      <div class="form-group"><label>Was ist Ihr wichtigstes Ziel?</label>
        <select><option value="">Bitte wählen (optional)</option><option>Mehr organischen Traffic</option><option>Höhere Conversion Rate</option><option>Vorbereitung auf Paid Ads</option><option>Allgemeiner Überblick</option></select></div>
      <div class="form-group"><label>Anmerkungen (optional)</label><textarea placeholder="Gibt es Seiten oder Bereiche, auf die wir besonders eingehen sollen?"></textarea></div>
    </div>
    <div class="note green"><div class="note-icon">⚡</div><div class="note-text"><strong>Kein Termin nötig.</strong> Sie erhalten Ihre Website-Analyse in 48 Stunden direkt per E-Mail. Kein Anruf, keine Warteschleife.</div></div>
    <div class="dsgvo">🔒 Ihre Daten werden ausschließlich zur Durchführung der Analyse genutzt. <a href="#">Datenschutz</a></div>
    <div class="btn-row">
      <button class="btn btn-back" onclick="back()">← Zurück</button>
      <button class="btn btn-primary" onclick="done('website')">Kostenlose Analyse anfordern →</button>
    </div>
  </div>

  <!-- STEP 2d: Amazon Shop -->
  <div class="card" id="step2-amazon-shop">
    <div class="eyebrow">Schritt 2 von 2 · Amazon Shop Analyse</div>
    <h2>Ihr Amazon Shop & Kontaktdaten</h2>
    <p class="card-desc">Kein Konto-Zugang nötig, kein Termin erforderlich. Einfach den Shop-Link eintragen.</p>
    <div class="form-grid">
      <div class="form-row">
        <div class="form-group"><label>Vorname <span class="req">*</span></label><input type="text" placeholder="Max"></div>
        <div class="form-group"><label>Nachname <span class="req">*</span></label><input type="text" placeholder="Mustermann"></div>
      </div>
      <div class="form-row">
        <div class="form-group"><label>E-Mail-Adresse <span class="req">*</span></label><input type="email" placeholder="max@firma.de"></div>
        <div class="form-group"><label>Unternehmen</label><input type="text" placeholder="Musterfirma GmbH"></div>
      </div>
      <div class="form-group"><label>Amazon Shop- oder Produktlink <span class="req">*</span></label><input type="url" placeholder="https://www.amazon.de/..."><span class="hint">Storefront, Produktseite oder ASIN – was für Sie am relevantesten ist</span></div>
      <div class="form-row">
        <div class="form-group"><label>Anzahl aktiver Produkte</label>
          <select><option value="">Optional</option><option>1 – 10</option><option>11 – 50</option><option>51 – 200</option><option>Über 200</option></select></div>
        <div class="form-group"><label>Monatlicher Amazon-Umsatz</label>
          <select><option value="">Optional</option><option>Unter 5.000 €</option><option>5.000 – 20.000 €</option><option>20.000 – 100.000 €</option><option>Über 100.000 €</option></select></div>
      </div>
      <div class="form-group"><label>Anmerkungen (optional)</label><textarea placeholder="Gibt es bestimmte Produkte oder Kategorien, auf die wir besonders eingehen sollen?"></textarea></div>
    </div>
    <div class="note green"><div class="note-icon">⚡</div><div class="note-text"><strong>Kein Termin nötig.</strong> Wir analysieren Ihren Shop auf Listing-Qualität, Optimierungspotenzial und Werbechancen. Ergebnis per E-Mail in 48 Stunden.</div></div>
    <div class="dsgvo">🔒 Ihre Daten werden ausschließlich zur Durchführung der Analyse genutzt. <a href="#">Datenschutz</a></div>
    <div class="btn-row">
      <button class="btn btn-back" onclick="back()">← Zurück</button>
      <button class="btn btn-primary" onclick="done('amazon-shop')">Kostenlose Analyse anfordern →</button>
    </div>
  </div>

  <!-- SUCCESS -->
  <div class="card" id="step-success">
    <div class="success-wrap">
      <div class="success-icon">✓</div>
      <h2>Anfrage eingegangen!</h2>
      <p id="success-msg"></p>
      <div class="summary" id="success-details"></div>
    </div>
  </div>

</main>

<script>
  let sel = null;

  function pick(el) {
    document.querySelectorAll('.type-card').forEach(c => c.classList.remove('selected'));
    el.classList.add('selected');
    sel = el.dataset.type;
    document.getElementById('btn1').disabled = false;
  }

  function setStep(n) {
    ['dot1','dot2','dot3'].forEach((id, i) => {
      const d = document.getElementById(id);
      d.classList.remove('active','done');
      if (i+1 < n) d.classList.add('done');
      else if (i+1 === n) d.classList.add('active');
    });
    ['line1','line2'].forEach((id,i) => {
      document.getElementById(id).classList.toggle('done', i+1 < n);
    });
  }

  function go2() {
    if (!sel) return;
    document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
    document.getElementById('step2-'+sel).classList.add('active');
    setStep(2);
    window.scrollTo({top:0,behavior:'smooth'});
  }

  function back() {
    document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
    document.getElementById('step1').classList.add('active');
    setStep(1);
    window.scrollTo({top:0,behavior:'smooth'});
  }

  function done(type) {
    const msgs = {
      'amazon-ads':  'Unser Techniker meldet sich innerhalb von 24 Stunden mit einem Terminvorschlag. Nach dem 15-minütigen Termin erhalten Sie Ihre Analyse in 48 Stunden per E-Mail.',
      'google-ads':  'Unser Techniker meldet sich innerhalb von 24 Stunden mit einem Terminvorschlag. Nach dem 15-minütigen Termin erhalten Sie Ihre Analyse in 48 Stunden per E-Mail.',
      'website':     'Sie erhalten Ihre Website-Analyse innerhalb von 48 Stunden direkt per E-Mail. Kein weiterer Aufwand.',
      'amazon-shop': 'Sie erhalten Ihre Amazon Shop-Analyse innerhalb von 48 Stunden direkt per E-Mail. Kein weiterer Aufwand.'
    };
    const labels = { 'amazon-ads':'Amazon Ads Analyse', 'google-ads':'Google Ads Analyse', 'website':'Website Audit', 'amazon-shop':'Amazon Shop Analyse' };
    const appt = ['amazon-ads','google-ads'].includes(type);
    document.getElementById('success-msg').textContent = msgs[type];
    document.getElementById('success-details').innerHTML = `
      <div class="sum-row"><span class="sum-lbl">Analysetyp</span><span class="sum-val">${labels[type]}</span></div>
      <div class="sum-row"><span class="sum-lbl">Lieferung</span><span class="sum-val">${appt ? 'Nach Termin + 48h' : 'In 48 Stunden per E-Mail'}</span></div>
      <div class="sum-row"><span class="sum-lbl">Kosten</span><span class="sum-val free">Kostenlos</span></div>
      <div class="sum-row"><span class="sum-lbl">Nächster Schritt</span><span class="sum-val">${appt ? 'Terminvorschlag per E-Mail' : 'Analyse per E-Mail'}</span></div>`;
    document.querySelectorAll('.card').forEach(c => c.classList.remove('active'));
    document.getElementById('step-success').classList.add('active');
    setStep(3);
    window.scrollTo({top:0,behavior:'smooth'});
  }
</script>
</body>
</html>/* End custom CSS */