/* =============================================================
   SEOGEO Performance — Analyse-Tool auf der Startseite
   Variante 2 ("Hell")
   -------------------------------------------------------------
   Ergänzung zu css/style.css. Nutzt die vorhandenen CSS-Variablen
   (--color-*, --font-*, --radius*, --shadow*) aus style.css.
   Überschreibt KEINE bestehenden Klassen — alle Klassennamen sind neu.
   Einbinden NACH style.css:
   <link rel="stylesheet" href="css/analyse-tool.css?v=1">
   ============================================================= */

/* ---- Neon-Eyebrow (Badge über der Überschrift) ---- */
.eyebrow-neon{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-headline);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-dark-1);background:var(--color-neon-1);
  padding:.4rem .85rem;border-radius:999px;margin-bottom:1.1rem;
}

/* ---- Faux-URL-Leiste (ist ein Link zur Analyse-Seite) ---- */
.url-bar{
  display:flex;align-items:center;gap:.5rem;background:#fff;
  border-radius:999px;padding:.4rem .4rem .4rem 1.1rem;max-width:460px;
  box-shadow:0 14px 34px rgba(13,43,26,.22);text-decoration:none;
  transition:transform .12s ease,box-shadow .15s ease;
}
.url-bar:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,43,26,.28);}
.url-bar .u-ic{font-size:1rem;line-height:1;}
.url-bar .u-ph{
  flex:1;color:var(--color-muted);font-size:.98rem;font-family:var(--font-body);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.url-bar .u-btn{
  display:inline-flex;align-items:center;background:var(--color-neon-1);
  color:var(--color-dark-1);font-family:var(--font-headline);font-size:.8rem;
  letter-spacing:.02em;padding:.7rem 1.15rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 0 var(--color-dark-1);
}
.url-bar:hover .u-btn{background:var(--color-neon-2);}

/* ---- Sofort-Score-Demo (Mockup-Dashboard) ---- */
.score-demo{
  background:var(--color-bg);border-radius:14px;
  box-shadow:0 30px 70px rgba(13,43,26,.28);overflow:hidden;
  border:1px solid rgba(13,43,26,.10);width:100%;max-width:520px;
}
.score-demo__bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .95rem;background:#0D2B1A;}
.sd-dot{width:11px;height:11px;border-radius:50%;}
.sd-dot:nth-child(1){background:#ff5f57;}
.sd-dot:nth-child(2){background:#febc2e;}
.sd-dot:nth-child(3){background:#28c840;}
.sd-url{margin-left:.55rem;font-family:ui-monospace,Menlo,monospace;font-size:.72rem;color:#9fceac;}
.score-demo__body{padding:1.25rem;}
.sd-overall{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;}
.sd-ring{
  --val:68;width:82px;height:82px;flex:none;border-radius:50%;
  background:conic-gradient(var(--color-neon-1) calc(var(--val)*1%),var(--color-light-1) 0);
  display:flex;align-items:flex-end;justify-content:center;gap:1px;position:relative;padding-bottom:1.4rem;
}
.sd-ring::before{content:"";position:absolute;inset:9px;background:var(--color-bg);border-radius:50%;}
.sd-ring-num{position:relative;font-family:var(--font-headline);font-size:1.7rem;color:var(--color-dark-1);line-height:1;}
.sd-ring-max{position:relative;font-size:.66rem;color:var(--color-muted);margin-bottom:.28rem;}
.sd-overall-txt strong{display:block;font-family:var(--font-headline);color:var(--color-dark-1);font-size:1.02rem;margin-bottom:.15rem;}
.sd-overall-txt span{font-size:.85rem;color:var(--color-muted);line-height:1.4;}
.sd-cards{display:grid;grid-template-columns:1fr;gap:.6rem;}
.sd-card{border:1px solid var(--color-light-1);border-radius:10px;padding:.75rem .85rem;border-left-width:4px;}
.sd-card.tone-good{border-left-color:var(--color-neon-1);}
.sd-card.tone-warn{border-left-color:#E0A800;}
.sd-card.tone-bad{border-left-color:#B03030;}
.sd-card-h{display:flex;align-items:center;gap:.4rem;font-family:var(--font-headline);font-size:.82rem;color:var(--color-dark-1);}
.sd-ic{font-size:.95rem;}
.sd-card-score{font-family:var(--font-headline);font-size:1.3rem;color:var(--color-dark-1);line-height:1;margin:.2rem 0 .5rem;}
.sd-card-score span{font-family:var(--font-body);font-size:.7rem;color:var(--color-muted);font-weight:600;}
.sd-metrics,.sd-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .9rem;}
.sd-metrics li{display:flex;gap:.35rem;font-size:.76rem;color:var(--color-muted);margin:0;}
.sd-metrics li strong{color:var(--color-dark-1);}
.sd-checks li{display:flex;align-items:center;gap:.35rem;font-size:.76rem;color:var(--color-dark-1);margin:0;}
.sd-checks .mk{width:15px;height:15px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex:none;}
.sd-checks li.ok .mk{background:rgba(61,224,41,.2);color:#1B7A4A;}
.sd-checks li.no .mk{background:rgba(176,48,48,.14);color:#B03030;}
.sd-foot{margin:.95rem 0 0;font-size:.72rem;color:var(--color-muted);text-align:center;}

/* =============================================================
   OBERES SEGMENT  —  .au2  (nach dem Hero)
   ============================================================= */
.au2{background:var(--color-light-3);background-image:none;padding:var(--section-pad) 0;}
.au2-card{
  background:#fff;border:1px solid var(--color-light-1);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:clamp(1.75rem,3.5vw,2.75rem);
  display:grid;grid-template-columns:1.4fr auto;gap:2.5rem;align-items:center;
}
.au2 h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:1rem;}
.au2 .au-p{color:var(--color-muted);font-size:1.05rem;max-width:52ch;margin-bottom:1.4rem;}
.au2-badges{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1.1rem 0 0;padding:0;}
.au2-badges li{margin:0;font-weight:700;font-size:.9rem;color:var(--color-dark-2);}
.au2-ring{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center;}
.au2-ring .sd-ring{width:130px;height:130px;padding-bottom:2.1rem;}
.au2-ring .sd-ring-num{font-size:2.6rem;}
.au2-ring .sd-ring-max{font-size:.85rem;margin-bottom:.5rem;}
.au2-ring>span{font-size:.8rem;color:var(--color-muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em;}

/* =============================================================
   MITTLERES SEGMENT  —  .am2  (große Showcase-Sektion)
   ============================================================= */
.am2{background:var(--color-bg);padding:var(--section-pad) 0;}
.am2-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;}
.am2-visual{display:flex;justify-content:center;}
.am2-text h3{font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:1rem;}
.am2-list{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;gap:.85rem;}
.am2-list li{position:relative;padding-left:2rem;color:var(--color-text);font-size:1rem;line-height:1.45;margin:0;}
.am2-list li::before{
  content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;
  background:var(--color-neon-1);border:2px solid var(--color-dark-1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D2B1A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 13 10 18 19 7'/></svg>");
  background-size:60%;background-position:center;background-repeat:no-repeat;box-shadow:0 2px 0 var(--color-dark-1);
}
.am2-list strong{color:var(--color-dark-1);}
.am2-note{margin:.85rem 0 0;font-size:.85rem;color:var(--color-muted);}

/* =============================================================
   RESPONSIVE  (Mobile / Tablet) — keine separate Version nötig
   ============================================================= */
@media (max-width:900px){
  .au2-card{grid-template-columns:1fr;gap:1.75rem;}
  .au2-ring{flex-direction:row;justify-content:flex-start;gap:1rem;text-align:left;}
  .am2-grid{grid-template-columns:1fr;}
  .am2-visual{margin-top:.5rem;order:2;}   /* Text zuerst, Mockup darunter */
  .am2-text{order:1;}
}
@media (max-width:520px){
  .url-bar{flex-wrap:wrap;border-radius:16px;padding:.9rem;gap:.7rem;}
  .url-bar .u-ph{flex-basis:100%;}
  .url-bar .u-btn{width:100%;justify-content:center;}
}