/* ===========================
   SERP Overlap Tool – Colorful UI
   (keine neuen Klassen/Markup nötig)
   =========================== */

:root{
  --bg: #ffffff;
  --panel: #f7f9fc;
  --ink: #0f172a;          /* text */
  --muted: #64748b;        /* sekundärtext */
  --line: #e2e8f0;         /* borders */
  --brand: #6d28d9;        /* primary */
  --brand-2: #22c55e;      /* success */
  --brand-3: #f59e0b;      /* warn */
  --brand-4: #ef4444;      /* error */
  --shadow: 0 12px 40px rgba(2,6,23,.08);
}

/* Loading: Scroll lock */
html.loading{ max-height:100vh; overflow:hidden!important; }

/* Page headings (belassen, aber farblich harmonisiert) */
.page-id-94 h1,
.page-id-94 h2,
.page-id-94 h3,
.page-id-94 h4{ text-align:center; color:var(--ink); }
.page-id-94 h1{ text-transform:uppercase; font-weight:700; letter-spacing:.02em; }
.page-id-94 main#content{ margin-top:80px; }
.page-id-94 .site-header .header-inner .custom-logo-link img{ max-width:250px; filter:grayscale(1); }

/* ---------- Formular ---------- */
#overlapForm{
  margin:0 auto; max-width:800px; padding:28px 40px 56px; box-sizing:border-box;
  background: linear-gradient(180deg,#ffffff 0%, #fbfbff 30%, #f5f7ff 100%);
  border:1px solid var(--line); border-radius:14px;
  box-shadow: var(--shadow);
}

#overlapForm .comparison{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:16px; margin-bottom:28px;
}
#overlapForm .comparison .kw{ flex:1; min-width:240px; }
#overlapForm .comparison .vs{
  width:100%; padding:0 30px; text-align:center; color:var(--muted); font-weight:700;
}
@media all and (min-width:768px){ #overlapForm .comparison .vs{ width:auto; }}

/* Labels & Inputs */
#overlapForm label{
  display:inline-block; background:var(--bg); color:var(--muted);
  font-weight:700; padding:0 10px; transform:translateY(14px);
  font-size:16px; border-radius:6px;
  box-shadow:0 2px 0 rgba(2,6,23,.03);
}

#overlapForm input:not([type="submit"]){
  background: var(--panel); color:var(--ink);
  border:2px solid var(--line); padding:18px 16px; border-radius:10px;
  outline:none; width:100%; font-size:16px; box-sizing:border-box;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
#overlapForm input:not([type="submit"]):focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(109,40,217,.12);
  background:#fff;
}

/* Submit Button – Farbverlauf + States */
#overlapForm input[type="submit"]{
  cursor:pointer; display:block; margin:10px auto 0;
  color:#fff; text-align:center; font-size:16px; line-height:1;
  padding:16px 32px; border-radius:999px; border:0;
  background: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%);
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
  transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}
#overlapForm input[type="submit"]:hover{ filter:brightness(1.05); box-shadow:0 10px 26px rgba(37,99,235,.3); }
#overlapForm input[type="submit"]:active{ transform: translateY(1px); }

/* ---------- Ergebniscontainer ---------- */
#result{
  max-width:800px; margin:24px auto 0; box-sizing:border-box;
  display:none; flex-wrap:wrap;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow);
}
#result[class*=overlap-]{ display:flex; }

#result .column{
  width:100%; box-sizing:border-box; padding:40px 32px; color:var(--ink);
}
@media all and (min-width:768px){
  #result .column{ width:50%; }
  #result .column:first-child{ border-right:1px solid var(--line); }
}

/* ---------- Overlap-Kreise ---------- */
#result .circles{ width:100%; display:flex; justify-content:center; margin-top:24px; gap:14px; }
#result .circles .circle-1,
#result .circles .circle-2{
  position:relative; width:50%; aspect-ratio:1; border-radius:50%;
  border:2px dashed rgba(2,6,23,.25);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
#result .circles .circle-1{ background: radial-gradient(circle at 60% 40%, rgba(109,40,217,.45), rgba(109,40,217,.15)); }
#result .circles .circle-2{ background: radial-gradient(circle at 40% 60%, rgba(37,99,235,.35), rgba(37,99,235,.12)); }

#result .circles .circle-1:before,
#result .circles .circle-2:before{
  position:absolute; font-size:24px; color:#fff; font-weight:800;
  top:50%; left:50%; transform:translate(-50%,-50%);
}
#result .circles .circle-1:before{ content:'1'; }
#result .circles .circle-2:before{ content:'2'; }

/* ---------- Score-Bar ---------- */
#result .meter{
  box-sizing:content-box; height:20px; position:relative; margin:20px 0;
  background:#e9eef5; border-radius:999px; padding:6px;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.4);
}
#result .meter > span{
  display:block; height:100%; border-radius:999px; position:relative; overflow:hidden;
  background: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%);
  box-shadow: inset 0 2px 9px rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.25);
}
#result .meter > span:after {
  content: none !important;     /* entfernt das pseudo-Element */
}

#result .meter > span,
#result [class*="overlap-"] .meter > span {
  background: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%) !important;
}

@keyframes move{ 0%{background-position:0 0;} 100%{background-position:50px 50px;} }

/* Score-Farben je Overlap (optional, nutzt bestehende Klassen) */
#result.overlap-10 .meter > span,
#result.overlap-20 .meter > span{ background: linear-gradient(90deg, var(--brand-4) 0%, #f97316 100%); }
#result.overlap-30 .meter > span,
#result.overlap-40 .meter > span,
#result.overlap-50 .meter > span{ background: linear-gradient(90deg, var(--brand-3) 0%, #f59e0b 100%); }
#result.overlap-60 .meter > span,
#result.overlap-70 .meter > span{ background: linear-gradient(90deg, var(--brand-2) 0%, #10b981 100%); }
#result.overlap-80 .meter > span,
#result.overlap-90 .meter > span,
#result.overlap-100 .meter > span{ background: linear-gradient(90deg, #22d3ee 0%, #06b6d4 50%, #22c55e 100%); }

/* ---------- Preloader ---------- */
.lds-ring-holder{
  display:none; position:fixed; z-index:9999999999; top:0; left:0; width:100%; height:100%;
  justify-content:center; align-items:center;
  background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(17,24,39,.55));
}
.loading .lds-ring-holder{ display:flex; }

.lds-ring{ display:inline-block; position:relative; width:80px; height:80px; }
.lds-ring div{
  box-sizing:border-box; display:block; position:absolute; width:64px; height:64px; margin:8px;
  border:8px solid #fff; border-radius:50%;
  animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
  border-color:#fff transparent transparent transparent;
}
.lds-ring div:nth-child(1){ animation-delay:-.45s; }
.lds-ring div:nth-child(2){ animation-delay:-.3s; }
.lds-ring div:nth-child(3){ animation-delay:-.15s; }
@keyframes lds-ring{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ---------- Overlap-Offsets (bestehen bleiben) ---------- */
#result.overlap-10  .circle-1{ transform:translateX(5%); }   #result.overlap-10  .circle-2{ transform:translateX(-5%); }
#result.overlap-20  .circle-1{ transform:translateX(10%); }  #result.overlap-20  .circle-2{ transform:translateX(-10%); }
#result.overlap-30  .circle-1{ transform:translateX(15%); }  #result.overlap-30  .circle-2{ transform:translateX(-15%); }
#result.overlap-40  .circle-1{ transform:translateX(20%); }  #result.overlap-40  .circle-2{ transform:translateX(-20%); }
#result.overlap-50  .circle-1{ transform:translateX(25%); }  #result.overlap-50  .circle-2{ transform:translateX(-25%); }
#result.overlap-60  .circle-1{ transform:translateX(30%); }  #result.overlap-60  .circle-2{ transform:translateX(-30%); }
#result.overlap-70  .circle-1{ transform:translateX(35%); }  #result.overlap-70  .circle-2{ transform:translateX(-35%); }
#result.overlap-80  .circle-1{ transform:translateX(40%); }  #result.overlap-80  .circle-2{ transform:translateX(-40%); }
#result.overlap-90  .circle-1{ transform:translateX(45%); }  #result.overlap-90  .circle-2{ transform:translateX(-45%); }
#result.overlap-100 .circle-1{ transform:translateX(50%); }  #result.overlap-100 .circle-2{ transform:translateX(-50%); }

/* ---------- Ergebnislisten ---------- */
#results{
  display:flex; flex-wrap:wrap; justify-content:space-between; max-width:800px; box-sizing:border-box; margin:24px auto 0; gap:24px;
}
#results h5{ color:var(--ink); margin-bottom:18px; }

#results mark{
  background: linear-gradient(90deg, #6d28d9 0%, #2563eb 100%);
  color:#fff; padding:2px 8px; border-radius:8px;
}

#results .column.hidden{ display:none; }
#results .column{
  width:100%; box-shadow: var(--shadow); padding:20px 16px; box-sizing:border-box;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid var(--line); border-radius:12px;
}
@media all and (min-width:768px){ #results .column{ width:calc(50% - 12px); } }

#results ul{ list-style:none; padding:0; margin:0; }
div#results li{
  margin:6px 0; font-size:14px; word-break:break-all; color:var(--ink);
  padding:6px 8px; border-radius:6px; transition:background .15s ease;
}
div#results li:hover{ background:#f1f5f9; }

#results .match{
  color:var(--ink); font-weight:700; border:1px dashed rgba(2,6,23,.25); padding:6px 8px; border-radius:8px;
  background: linear-gradient(180deg, rgba(125,211,252,.2), rgba(167,139,250,.2));
}



/* Verbindungslinien-Overlay */
#results { position: relative; }
#matchLines {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
/* Listen über die Linien legen */
#results .column { position: relative; z-index: 1; }