/*
 * Attia Tools – Shared design system (v1.3)
 * Stacked-Layout: Hero zentriert oben, Tool-Card full-width darunter.
 * Farben/Buttons aus "Wie viel Google-Traffic..."-Sektion.
 */

.attia-tool-section{
  /* Brand tokens */
  --at-bg-1:#000229;
  --at-bg-2:#0A1A4A;
  --at-accent:#64E9FF;
  --at-success:#61CE70;
  --at-blue-1:#2965C7;
  --at-blue-2:#103CE7;
  --at-text:#ffffff;
  --at-text-muted:rgba(255,255,255,.72);
  --at-text-subtle:rgba(255,255,255,.52);
  --at-card:rgba(255,255,255,.06);
  --at-card-border:rgba(255,255,255,.12);
  --at-card-inner:rgba(255,255,255,.04);
  --at-card-inner-border:rgba(255,255,255,.08);

  --at-radius:28px;
  --at-radius-sm:18px;
  --at-radius-pill:999px;

  /* Fluid spacing */
  --at-pad-y:clamp(72px, 10vw, 140px);
  --at-pad-x:clamp(20px, 4vw, 56px);
  --at-gap-section:clamp(40px, 6vw, 80px);  /* zwischen Hero und Card */
  --at-gap-md:clamp(20px, 3vw, 36px);
  --at-gap-sm:clamp(14px, 2vw, 22px);
  --at-card-pad:clamp(28px, 4vw, 56px);

  --at-font-body:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --at-font-head:'Archivo','Hanken Grotesk',system-ui,sans-serif;

  background:linear-gradient(135deg,var(--at-bg-1) 0%,var(--at-bg-2) 100%);
  padding:var(--at-pad-y) var(--at-pad-x);
  font-family:var(--at-font-body);
  position:relative;
  overflow:hidden;
  color:var(--at-text);
  isolation:isolate;
}
.attia-tool-section *{box-sizing:border-box}
.attia-tool-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(ellipse at 18% 20%,rgba(41,101,199,.28),transparent 55%),
    radial-gradient(ellipse at 82% 80%,rgba(16,60,231,.22),transparent 55%);
}

/* Zwei aufeinanderfolgende Tools bekommen einen Divider statt doppelter Luft */
.attia-tool-section + .attia-tool-section{
  padding-top:calc(var(--at-pad-y) * 0.72);
  border-top:1px solid rgba(255,255,255,.06);
}

.attia-tool-inner{
  position:relative;
  max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;
  gap:var(--at-gap-section);
}

/* ========== HERO BLOCK (centered, top) ========== */
.attia-tool-hero{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px, 1.8vw, 22px);
  text-align:center;
  max-width:780px;
  margin:0 auto;
  width:100%;
}
.attia-tool-hero .attia-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 18px;border-radius:var(--at-radius-pill);
  background:rgba(100,233,255,.12);color:var(--at-accent);
  font-weight:600;font-size:13px;letter-spacing:.3px;
}
.attia-tool-hero .attia-pill::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--at-accent);box-shadow:0 0 0 3px rgba(100,233,255,.25);
}
.attia-tool-hero h2{
  font-family:var(--at-font-head);color:#fff;
  font-size:clamp(30px, 4.2vw, 52px);
  font-weight:800;margin:0;
  line-height:1.08;letter-spacing:-.02em;
  max-width:18ch;
}
.attia-tool-hero .attia-hero-sub{
  color:var(--at-text-muted);
  font-size:clamp(15px, 1.25vw, 18px);
  line-height:1.6;margin:0;
  max-width:58ch;
}
.attia-tool-steps{
  list-style:none;padding:0;margin:10px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  width:100%;
}
.attia-tool-steps li{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:22px 18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  text-align:center;
  transition:border-color .2s ease,background .2s ease;
}
.attia-tool-steps li:hover{
  border-color:rgba(100,233,255,.25);
  background:rgba(255,255,255,.06);
}
.attia-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:14px;
  background:rgba(100,233,255,.15);color:var(--at-accent);
  font-family:var(--at-font-head);font-weight:800;font-size:18px;
  flex-shrink:0;
}
.attia-step-body{
  display:flex;flex-direction:column;gap:4px;
  color:rgba(255,255,255,.85);
  font-size:14.5px;line-height:1.5;
}
.attia-step-body strong{color:#fff;font-weight:700;font-size:15.5px}
.attia-tool-trust{
  color:var(--at-text-subtle);font-size:13.5px;margin:4px 0 0;
  line-height:1.5;
}

/* ========== TOOL CARD (full-width, below hero) ========== */
.attia-tool-card{
  width:100%;
  max-width:960px;
  margin:0 auto;
  background:var(--at-card);
  border:1px solid var(--at-card-border);
  border-radius:var(--at-radius);
  padding:var(--at-card-pad);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  display:flex;flex-direction:column;
  gap:clamp(20px, 2.4vw, 32px);
  position:relative;
}
.attia-tool-card .attia-badge{
  align-self:flex-start;
  display:inline-block;padding:6px 16px;border-radius:var(--at-radius-pill);
  background:rgba(97,206,112,.15);color:var(--at-success);
  font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.5px;
}
.attia-tool-card h3{
  font-family:var(--at-font-head);color:#fff;
  font-size:22px;font-weight:700;margin:0;
}
.attia-tool-card .attia-sub{
  color:var(--at-text-muted);font-size:14px;margin:0;line-height:1.55;
}

/* Primary CTA */
.attia-cta{
  display:block;width:100%;text-align:center;
  padding:18px 28px;border-radius:var(--at-radius-pill);
  background:linear-gradient(115deg,var(--at-blue-1),var(--at-blue-2));
  color:#fff;font-family:var(--at-font-head);
  font-weight:700;font-size:16px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
  cursor:pointer;border:none;
  line-height:1.3;
}
.attia-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(16,60,231,.6)}
.attia-cta:active{transform:translateY(0)}
.attia-cta:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.attia-cta.is-ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.attia-micro{color:var(--at-text-subtle);font-size:12.5px;margin:0;text-align:center;line-height:1.55}

/* Input field */
.attia-input-group{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto;width:100%}
.attia-input{
  width:100%;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--at-radius-pill);
  padding:18px 24px;font-size:16px;font-family:inherit;color:#fff;
  background:rgba(255,255,255,.04);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
  min-height:56px;
}
.attia-input::placeholder{color:rgba(255,255,255,.45)}
.attia-input:focus{outline:none;border-color:var(--at-accent);box-shadow:0 0 0 3px rgba(100,233,255,.15)}
.attia-input.is-error{border-color:#f87171}
.attia-error{color:#fecaca;font-size:13px;margin:0;line-height:1.5;text-align:center}

/* Mock preview rows */
.attia-mockup{
  background:var(--at-card-inner);
  border:1px solid var(--at-card-inner-border);
  border-radius:var(--at-radius-sm);
  padding:clamp(18px, 2.2vw, 26px);margin:0;
}
.attia-mock-row{
  display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.attia-mock-row:last-child{border-bottom:none}
.attia-mock-kw{color:rgba(255,255,255,.78);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attia-mock-pos{font-family:var(--at-font-head);color:var(--at-accent);font-weight:700;font-size:13.5px;text-align:right;min-width:56px}
.attia-mock-val{font-family:var(--at-font-head);color:var(--at-success);font-weight:700;font-size:13.5px;text-align:right;min-width:64px}
.attia-mock-row.is-blurred{filter:blur(4px);user-select:none;pointer-events:none}

/* Hero-num (big € / score display) */
.attia-hero-num{text-align:center;padding:clamp(8px, 1.5vw, 16px) 0}
.attia-hero-amount{
  font-family:var(--at-font-head);
  font-size:clamp(36px, 5vw, 56px);
  font-weight:800;color:var(--at-success);line-height:1;
}
.attia-hero-amount-label{
  font-size:14px;color:var(--at-text-subtle);margin-top:12px;line-height:1.4;
}

/* Score ring (GEO) */
.attia-ring{
  position:relative;width:clamp(160px, 16vw, 200px);height:clamp(160px, 16vw, 200px);
  margin:clamp(8px, 1.5vw, 16px) auto;
}
.attia-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.attia-ring circle.track{stroke:rgba(255,255,255,.1)}
.attia-ring circle.value{transition:stroke-dashoffset .8s ease;stroke-linecap:round}
.attia-ring-number{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--at-font-head);font-weight:800;color:#fff;
}
.attia-ring-number span.big{font-size:clamp(36px, 4.5vw, 52px);line-height:1}
.attia-ring-number span.small{font-size:12px;color:var(--at-text-subtle);margin-top:6px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* Loading bar */
.attia-progress{display:flex;flex-direction:column;gap:14px;padding:clamp(12px, 2vw, 24px) 0;max-width:560px;margin:0 auto;width:100%}
.attia-progress-bar{width:100%;height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.attia-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--at-accent),var(--at-success));border-radius:999px;transition:width .4s ease}
.attia-progress-label{color:var(--at-text-muted);font-size:14px;text-align:center;line-height:1.5}

/* Expand cards (GEO) */
.attia-check-list{display:flex;flex-direction:column;gap:12px}
.attia-check{
  background:var(--at-card-inner);
  border:1px solid var(--at-card-inner-border);
  border-radius:var(--at-radius-sm);
  padding:18px 22px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s ease;
}
.attia-check.is-open{border-color:rgba(100,233,255,.25)}
.attia-check-head{
  display:flex;align-items:center;gap:16px;cursor:pointer;min-height:44px;
  width:100%;background:transparent;border:none;padding:0;color:inherit;
  font:inherit;text-align:left;
}
.attia-check-head:focus-visible{outline:2px solid var(--at-accent);outline-offset:4px;border-radius:6px}
.attia-check-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.attia-check-dot.is-ok{background:var(--at-success)}
.attia-check-dot.is-warn{background:#f59e0b}
.attia-check-dot.is-fail{background:#ef4444}
.attia-check-title{flex:1;font-family:var(--at-font-head);font-weight:700;color:#fff;font-size:15.5px;line-height:1.4}
.attia-check-score{font-family:var(--at-font-head);font-weight:700;color:var(--at-text-subtle);font-size:13px;white-space:nowrap}
.attia-check-caret{color:var(--at-text-subtle);transition:transform .2s ease;font-size:12px}
.attia-check.is-open .attia-check-caret{transform:rotate(180deg)}
.attia-check-body{display:none;color:var(--at-text-muted);font-size:14px;line-height:1.65}
.attia-check-body > p{margin:0 0 12px}
.attia-check.is-open .attia-check-body{display:block}
.attia-check-body pre{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:14px 16px;margin:12px 0 0;
  color:#dbe7ff;font-family:'JetBrains Mono',ui-monospace,Menlo,monospace;
  font-size:12.5px;overflow-x:auto;white-space:pre;line-height:1.55;
}
.attia-finding{padding:14px 0;border-top:1px dashed rgba(255,255,255,.08)}
.attia-finding:first-child{border-top:none;padding-top:0}
.attia-finding-title{color:#fff;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.attia-tag{
  font-family:var(--at-font-head);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;font-weight:800;
}
.attia-tag.is-critical   {background:rgba(239,68,68,.18);color:#fca5a5}
.attia-tag.is-important  {background:rgba(249,115,22,.18);color:#fdba74}
.attia-tag.is-recommended{background:rgba(250,204,21,.18);color:#fde68a}
.attia-tag.is-optional   {background:rgba(156,163,175,.18);color:#d1d5db}

/* Table (SEO) */
.attia-table{width:100%;border-collapse:collapse;font-size:14px;color:var(--at-text-muted)}
.attia-table th{text-align:left;font-family:var(--at-font-head);color:#fff;padding:12px 10px;border-bottom:1px solid var(--at-card-inner-border);font-weight:700;font-size:12.5px;letter-spacing:.3px;text-transform:uppercase}
.attia-table td{padding:14px 10px;border-bottom:1px solid rgba(255,255,255,.05)}
.attia-table tr:last-child td{border-bottom:none}
.attia-table td.is-right,.attia-table th.is-right{text-align:right}
.attia-table .is-blurred{filter:blur(4px);user-select:none}

/* Lead form wrap (Elementor) */
.attia-tool-leadform{
  margin-top:clamp(20px, 3vw, 36px);
  background:var(--at-card-inner);
  border:1px solid var(--at-card-inner-border);
  border-radius:var(--at-radius);
  padding:clamp(22px, 3vw, 40px);
  max-width:720px;margin-left:auto;margin-right:auto;
  width:100%;
  transition:background .25s ease, border-color .25s ease, padding .25s ease;
}
/* After submit we inject .attia-success-panel and strip the outer chrome so
   the success card doesn't sit inside a second bordered box. */
.attia-tool-leadform.is-success{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
}
.attia-tool-leadform--missing{color:var(--at-text-muted);font-size:13px;text-align:center}

/* Acceptance field (Elementor's privacy/AGB checkbox), styled as a tappable
   pill row that matches the audit quiz radio-buttons. The whole
   .elementor-field-option becomes the pill; the native checkbox sits on the
   left, the label fills the remaining width. We use the native checkbox with
   accent-color instead of rebuilding it. */
.attia-tool-leadform .elementor-field-type-acceptance{width:100%}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-subgroup{width:100%}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  max-width:100% !important;
  padding:14px 20px !important;
  min-height:56px;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:var(--at-radius-pill) !important;
  background:rgba(255,255,255,.04) !important;
  transition:border-color .15s ease, background .15s ease;
  cursor:pointer;
}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option:hover{
  border-color:rgba(100,233,255,.4) !important;
  background:rgba(100,233,255,.08) !important;
}
.attia-tool-leadform .elementor-field-type-acceptance:has(input[type="checkbox"]:checked) .elementor-field-option{
  border-color:rgba(100,233,255,.6) !important;
  background:rgba(100,233,255,.18) !important;
}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option label{
  flex:1 1 auto;
  min-width:0;
  color:var(--at-text-muted);
  font-size:13.5px;line-height:1.55;
  cursor:pointer;
  margin:0;
  font-weight:400;
  text-align:left;
  padding-top:1px;
}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option label a,
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option a{
  color:var(--at-accent) !important;
  text-decoration:underline;text-underline-offset:2px;
  word-break:break-word;
}
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option label a:hover,
.attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option a:hover{
  text-decoration:none;
}

/* Native checkbox, accent-coloured like the audit-quiz radios. */
.attia-tool-leadform .elementor-field-type-acceptance input[type="checkbox"]{
  -webkit-appearance:checkbox !important;
  -moz-appearance:checkbox !important;
  appearance:checkbox !important;
  width:20px !important;height:20px !important;
  min-width:20px !important;min-height:20px !important;
  accent-color:var(--at-accent) !important;
  flex-shrink:0;
  flex:0 0 auto;
  margin:0 !important;padding:0 !important;
  cursor:pointer;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
}
.attia-tool-leadform .elementor-field-type-acceptance input[type="checkbox"]:focus-visible{
  outline:2px solid var(--at-accent) !important;
  outline-offset:2px !important;
}

/* Elementor inputs inside the leadform: visual baseline + autofill defense.
   Chrome's autofill paints its own opaque inset box-shadow which masks the
   element's BG, so we use a wide box-shadow inset of our own to keep the
   pill dark in every autofill state. */
.attia-tool-leadform input[type="text"],
.attia-tool-leadform input[type="email"],
.attia-tool-leadform input[type="tel"],
.attia-tool-leadform input[type="url"],
.attia-tool-leadform input[type="number"],
.attia-tool-leadform textarea,
.attia-tool-leadform select{
  background-color:rgba(0, 0, 0, .28) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff;
  border-radius:var(--at-radius-pill) !important;
  padding:14px 20px !important;
  font-size:15px !important;
  min-height:52px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.attia-tool-leadform input:-webkit-autofill,
.attia-tool-leadform input:-webkit-autofill:hover,
.attia-tool-leadform input:-webkit-autofill:focus,
.attia-tool-leadform input:-webkit-autofill:active,
.attia-tool-leadform textarea:-webkit-autofill,
.attia-tool-leadform select:-webkit-autofill{
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(15, 23, 42, .92) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
.attia-tool-leadform textarea{border-radius:18px !important;min-height:auto}
.attia-tool-leadform input:focus,
.attia-tool-leadform textarea:focus,
.attia-tool-leadform select:focus{
  outline:none !important;
  border-color:var(--at-accent) !important;
  box-shadow:0 0 0 3px rgba(100,233,255,.15) !important;
}
.attia-tool-leadform input::placeholder,
.attia-tool-leadform textarea::placeholder{color:rgba(255,255,255,.45) !important}
.attia-tool-leadform .elementor-field-label{color:var(--at-text-muted);font-size:13.5px;margin-bottom:6px}
.attia-tool-leadform .elementor-button{
  background:linear-gradient(115deg,var(--at-blue-1),var(--at-blue-2)) !important;
  border-radius:var(--at-radius-pill) !important;
  padding:16px 28px !important;
  font-family:var(--at-font-head) !important;
  font-weight:700 !important;
  font-size:16px !important;
}

/* Light theme: keep the leadform legible on white backgrounds too */
.attia-tool-section.is-light .attia-tool-leadform input[type="text"],
.attia-tool-section.is-light .attia-tool-leadform input[type="email"],
.attia-tool-section.is-light .attia-tool-leadform input[type="tel"],
.attia-tool-section.is-light .attia-tool-leadform input[type="url"],
.attia-tool-section.is-light .attia-tool-leadform input[type="number"],
.attia-tool-section.is-light .attia-tool-leadform textarea,
.attia-tool-section.is-light .attia-tool-leadform select{
  background-color:#f8fafc !important;
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a;
  border-color:#e5e7eb !important;
}
.attia-tool-section.is-light .attia-tool-leadform input:-webkit-autofill,
.attia-tool-section.is-light .attia-tool-leadform input:-webkit-autofill:hover,
.attia-tool-section.is-light .attia-tool-leadform input:-webkit-autofill:focus,
.attia-tool-section.is-light .attia-tool-leadform input:-webkit-autofill:active,
.attia-tool-section.is-light .attia-tool-leadform textarea:-webkit-autofill,
.attia-tool-section.is-light .attia-tool-leadform select:-webkit-autofill{
  -webkit-text-fill-color:#0f172a !important;
  caret-color:#0f172a;
  -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
}
.attia-tool-section.is-light .attia-tool-leadform input::placeholder,
.attia-tool-section.is-light .attia-tool-leadform textarea::placeholder{color:#94a3b8 !important}
.attia-tool-section.is-light .attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option label{color:#475569}
.attia-tool-section.is-light .attia-tool-leadform .elementor-field-type-acceptance .elementor-field-option label a{color:#2965c7 !important}
.attia-tool-section.is-light .attia-tool-leadform .elementor-field-type-acceptance input[type="checkbox"]{
  background:#fff;border-color:#cbd5e1;
}
.attia-tool-section.is-light .attia-tool-leadform .elementor-field-type-acceptance input[type="checkbox"]:checked{
  background:var(--at-blue-1);border-color:var(--at-blue-1);
}

/* On mobile only: stack all Elementor form fields vertically.
   On desktop / tablet we leave Elementor's own column system intact. */
@media (max-width: 560px){
  .attia-tool-leadform .elementor-form-fields-wrapper{display:flex;flex-direction:column;gap:14px}
  .attia-tool-leadform .elementor-field-group{margin-bottom:0 !important;width:100% !important;max-width:100% !important}
}

/* ============================================================ */
/* Gating: result is rendered but visually blurred until the    */
/* user submits the lead form. JS toggles `.attia-gated` off    */
/* on `submit_success` (see shared.js → revealResults).         */
/* ============================================================ */
.attia-gated{
  filter:blur(10px);
  pointer-events:none;
  user-select:none;
  position:relative;
  transition:filter .6s ease;
}
.attia-gated::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(0,2,41,.25) 100%);
  pointer-events:none;
  border-radius:inherit;
}
.attia-tool-section.is-light .attia-gated::after{
  background:linear-gradient(180deg,transparent 0%,rgba(15,23,42,.06) 100%);
}

/* Form-intro copy directly above the lead form. Hidden until the
   tool's bindElementorForm() reveals it together with the form. */
.attia-gating-intro{
  text-align:center;
  margin:clamp(20px,3vw,32px) auto 0;
  max-width:560px;
  color:var(--at-text-muted);
  font-size:14.5px;line-height:1.55;
}
.attia-gating-intro strong{
  display:block;
  color:#fff;font-family:var(--at-font-head);
  font-size:18px;font-weight:700;margin-bottom:6px;letter-spacing:-.01em;
}
.attia-tool-section.is-light .attia-gating-intro strong{color:#0f172a}

/* Trust micro-copy directly under the lead form's submit button. */
.attia-gating-trust{
  text-align:center;
  margin:14px auto 0;
  color:var(--at-text-subtle);
  font-size:12.5px;line-height:1.55;
  max-width:560px;
}

/* Soft consultation CTA below the findings (inside the gated result wrapper).
   Revealed together with the findings after the lead form is submitted. */
.attia-soft-cta{
  margin-top:clamp(20px,3vw,32px);
  padding:clamp(20px,2.5vw,28px) clamp(20px,3vw,32px);
  background:linear-gradient(135deg,rgba(100,233,255,.08) 0%,rgba(41,101,199,.08) 100%);
  border:1px solid rgba(100,233,255,.18);
  border-radius:var(--at-radius-sm);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.attia-soft-cta-text{
  flex:1;min-width:240px;
  color:var(--at-text-muted);
  font-size:14.5px;line-height:1.5;
  margin:0;
}
.attia-soft-cta-text strong{
  display:block;
  color:#fff;font-family:var(--at-font-head);
  font-size:16.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.01em;
}
.attia-soft-cta-btn{
  display:inline-block;
  padding:12px 22px;border-radius:var(--at-radius-pill);
  background:linear-gradient(115deg,var(--at-blue-1),var(--at-blue-2));
  color:#fff !important;font-family:var(--at-font-head);
  font-weight:700;font-size:14px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.attia-soft-cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px -10px rgba(16,60,231,.6);
}
.attia-tool-section.is-light .attia-soft-cta{
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 100%);
  border-color:#bfdbfe;
}
.attia-tool-section.is-light .attia-soft-cta-text{color:#475569}
.attia-tool-section.is-light .attia-soft-cta-text strong{color:#0f172a}
@media (max-width:560px){
  .attia-soft-cta{flex-direction:column;align-items:stretch;text-align:center;}
  .attia-soft-cta-btn{width:100%;text-align:center;}
}

/* State toggles */
.attia-hide{display:none !important}
.attia-fade{animation:attia-fade-in .35s ease both}
@keyframes attia-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Post-submit success panel (injected by shared.js when Elementor fires
   submit_success). Replaces the 1-line Elementor message with a proper
   thank-you card, hides the form fields in the process. */
.attia-success-panel{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  text-align:center;
  padding:clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px);
  background:linear-gradient(135deg,rgba(97,206,112,.08) 0%, rgba(100,233,255,.08) 100%);
  border:1px solid rgba(97,206,112,.35);
  border-radius:var(--at-radius);
  animation:attia-fade-in .5s ease both;
}
.attia-success-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--at-success);
  color:#fff;font-size:28px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -8px rgba(97,206,112,.6);
  line-height:1;
}
.attia-success-panel h3{
  font-family:var(--at-font-head);color:#fff;font-weight:800;
  font-size:clamp(20px, 2vw, 26px);margin:0;line-height:1.2;
}
.attia-success-panel p{
  color:var(--at-text-muted);font-size:15px;line-height:1.6;margin:0;
  max-width:460px;
}
.attia-success-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.attia-success-cta{
  display:inline-block;padding:14px 28px;border-radius:var(--at-radius-pill);
  background:linear-gradient(115deg,var(--at-blue-1),var(--at-blue-2));
  color:#fff !important;font-family:var(--at-font-head);
  font-weight:700;font-size:15px;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.attia-success-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(16,60,231,.6)}

.attia-tool-section.is-light .attia-success-panel{
  background:linear-gradient(135deg,#ecfdf5 0%, #eff6ff 100%);
  border-color:#86efac;
}
.attia-tool-section.is-light .attia-success-panel h3{color:#065f46}
.attia-tool-section.is-light .attia-success-panel p{color:#475569}

/* ============================================================ */
/* LIGHT theme override                                         */
/* ============================================================ */
.attia-tool-section.is-light{
  background:#ffffff;color:#0f172a;
  --at-text:#0f172a;--at-text-muted:#475569;--at-text-subtle:#64748b;
  --at-card:#ffffff;--at-card-border:#e5e7eb;--at-card-inner:#f8fafc;--at-card-inner-border:#e5e7eb;
}
.attia-tool-section.is-light::before{display:none}
.attia-tool-section.is-light .attia-pill{background:rgba(41,101,199,.12);color:var(--at-blue-1)}
.attia-tool-section.is-light .attia-tool-hero h2{color:#0f172a}
.attia-tool-section.is-light .attia-tool-hero .attia-hero-sub{color:#475569}
.attia-tool-section.is-light .attia-tool-steps li{background:#f8fafc;border-color:#e5e7eb}
.attia-tool-section.is-light .attia-tool-steps li:hover{border-color:rgba(41,101,199,.3);background:#eff6ff}
.attia-tool-section.is-light .attia-step-body{color:#334155}
.attia-tool-section.is-light .attia-step-body strong{color:#0f172a}
.attia-tool-section.is-light .attia-tool-card{box-shadow:0 14px 50px rgba(15,23,42,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
.attia-tool-section.is-light .attia-input{color:#0f172a;background:#f8fafc;border-color:#e5e7eb}
.attia-tool-section.is-light .attia-input::placeholder{color:#94a3b8}

/* ============================================================ */
/* Responsive breakpoints                                       */
/* ============================================================ */
@media (max-width: 860px){
  .attia-tool-steps{grid-template-columns:1fr;gap:12px}
  .attia-tool-steps li{flex-direction:row;text-align:left;padding:16px 18px}
  .attia-step-num{width:36px;height:36px;font-size:15px}
  .attia-step-body{flex:1}
  .attia-tool-card{padding:clamp(22px, 5vw, 36px)}
}

@media (max-width: 560px){
  .attia-tool-section{padding:clamp(56px, 12vw, 80px) clamp(18px, 5vw, 24px)}
  .attia-tool-hero h2{font-size:clamp(26px, 8vw, 34px);line-height:1.15}
  .attia-tool-card{padding:22px 20px;border-radius:22px}
  .attia-cta{padding:16px 20px;font-size:15px}
  .attia-input{padding:16px 20px;min-height:52px}

  /* Mockup: 2-zeilig, Keyword oben (abgeschnitten bei Überlänge),
     Meta-Zeile darunter als "Pos. 14 · +142/Mo" Chip-Line. */
  .attia-mock-row{
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    padding:12px 0;
  }
  .attia-mock-row .attia-mock-kw{
    font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-width:100%;
  }
  .attia-mock-row .attia-mock-pos,
  .attia-mock-row .attia-mock-val{
    display:inline;text-align:left;min-width:0;font-size:12.5px;
  }
  .attia-mock-row .attia-mock-pos::after{content:" · ";color:var(--at-text-subtle);font-weight:400}

  .attia-hero-amount{font-size:clamp(32px, 9vw, 44px)}
  .attia-check{padding:14px 16px}
  .attia-check-title{font-size:14.5px}

  /* SEO-Table wird auf <560px als Card-Stack dargestellt. Kein horizontales
     Scrollen, keine gequetschten Spalten. Eine Zeile = eine Card mit Keyword
     gross oben, 3 Metriken inline als Chip-Zeile. */
  .attia-seo-result .attia-table,
  .attia-seo-result .attia-table thead,
  .attia-seo-result .attia-table tbody,
  .attia-seo-result .attia-table tr,
  .attia-seo-result .attia-table td,
  .attia-seo-result .attia-table th{display:block}
  .attia-seo-result .attia-table thead{position:absolute;left:-9999px;top:-9999px}
  .attia-seo-result .attia-table tr{
    background:var(--at-card-inner);
    border:1px solid var(--at-card-inner-border);
    border-radius:14px;
    padding:12px 14px;margin-bottom:10px;
  }
  .attia-seo-result .attia-table td{
    border:none;padding:3px 0;text-align:left !important;font-size:13.5px;
  }
  .attia-seo-result .attia-table td:first-child{
    font-weight:700;color:#fff;font-size:14.5px;margin-bottom:2px;
    word-break:break-word;white-space:normal;
  }
  .attia-seo-result .attia-table td:nth-child(2)::before{content:"Pos. ";color:var(--at-text-subtle)}
  .attia-seo-result .attia-table td:nth-child(3)::before{content:"Vol. ";color:var(--at-text-subtle)}
  .attia-seo-result .attia-table td:nth-child(2),
  .attia-seo-result .attia-table td:nth-child(3),
  .attia-seo-result .attia-table td:nth-child(4){
    display:inline-block;margin-right:12px;color:var(--at-text-muted);
  }
  .attia-seo-result .attia-table td:nth-child(4){color:var(--at-success);font-weight:700}
}