/*
 * MarkenTal Search Experience
 * Eigenständige Visualisierung für SEO und Google Ads.
 * Die Gestaltung nutzt große typografische Hierarchien, schräge Übergänge,
 * realistische Interface-Szenen und ruhige Scroll-Reveals.
 */

.sx-experience {
  --sx-blue: #149bd3;
  --sx-ink: #0c1114;
  --sx-muted: #687078;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(120px, 14vw, 220px) 0 clamp(105px, 13vw, 190px);
  border-block: 1px solid rgba(16,40,55,.12);
  background:
    radial-gradient(circle at 88% 17%, rgba(20,155,211,.11), transparent 25%),
    repeating-linear-gradient(135deg, transparent 0 43px, rgba(16,40,55,.042) 43px 44px),
    #f7fafb;
}

.sx-experience::before,
.sx-experience::after {
  position: absolute;
  z-index: -1;
  width: 48vw;
  height: 34px;
  background: var(--sx-blue);
  content: "";
  opacity: .95;
  transform: rotate(-8deg);
}
.sx-experience::before { top: 42px; right: -9vw; }
.sx-experience::after { top: 92px; right: -6vw; height: 18px; background: rgba(20,155,211,.24); }

.sx-shell { width: min(calc(100% - 64px), 1380px); margin-inline: auto; }
.sx-heading { max-width: 1120px; margin: 0 auto clamp(70px, 9vw, 120px); text-align: center; }
.sx-breaking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 9px 16px;
  border: 1px solid rgba(16,40,55,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 35px rgba(16,40,55,.06);
  color: #333a3f;
  font: 750 .72rem/1 "DM Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sx-breaking i { width: 9px; height: 9px; border-radius: 50%; background: var(--sx-blue); box-shadow: 0 0 0 7px rgba(20,155,211,.12); animation: sx-pulse 2.2s ease-in-out infinite; }
main .sx-experience .sx-heading h2 { margin: 0; font-family: "Instrument Serif", Georgia, serif !important; font-size: clamp(4rem, 8vw, 8.8rem) !important; font-weight: 400 !important; line-height: .88 !important; letter-spacing: -.045em; text-wrap: balance; }
.sx-heading h2 em { color: var(--sx-blue); font-weight: 400; }
main .sx-experience .sx-heading > p:last-child { max-width: 820px; margin: 34px auto 0; color: var(--sx-muted); font-family: "DM Sans", sans-serif !important; font-size: clamp(1.08rem, 1.5vw, 1.4rem) !important; font-weight: 400 !important; line-height: 1.68 !important; }

.sx-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: stretch;
}
.sx-stage::before { position: absolute; inset: 10% -4% -8% 12%; z-index: -1; background: rgba(20,155,211,.08); content: ""; transform: rotate(1.4deg); }

.sx-browser,
.sx-inspector {
  border: 1px solid rgba(16,40,55,.17);
  background: rgba(255,255,255,.96);
  box-shadow: 0 35px 100px rgba(16,40,55,.12);
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.8,.2,1);
}
.sx-experience.is-visible .sx-browser,
.sx-experience.is-visible .sx-inspector { opacity: 1; transform: none; }
.sx-experience.is-visible .sx-inspector { transition-delay: .16s; }

.sx-browser__chrome { display: flex; min-height: 62px; align-items: center; gap: 9px; padding: 0 22px; border-bottom: 1px solid rgba(16,40,55,.11); background: #f3f6f7; }
.sx-browser__chrome > i { width: 10px; height: 10px; border-radius: 50%; background: #d1d8db; }
.sx-browser__chrome > i:first-child { background: #149bd3; }
.sx-browser__address { overflow: hidden; flex: 1; margin-left: 12px; padding: 9px 15px; border: 1px solid rgba(16,40,55,.09); border-radius: 8px; background: #fff; color: #7b8287; font: 500 .7rem/1 "DM Sans", sans-serif; white-space: nowrap; }
.sx-browser__body { min-height: 640px; padding: clamp(28px, 5vw, 62px); }
.sx-searchbar { display: flex; min-height: 58px; align-items: center; gap: 14px; padding: 0 20px; border: 1px solid rgba(16,40,55,.16); border-radius: 999px; box-shadow: 0 8px 24px rgba(16,40,55,.06); }
.sx-searchbar svg { width: 19px; flex: none; color: var(--sx-blue); }
.sx-searchbar span { overflow: hidden; font: 500 clamp(.85rem, 1.2vw, 1rem)/1.2 "DM Sans", sans-serif; white-space: nowrap; }
.sx-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--sx-blue); vertical-align: -.17em; animation: sx-blink .85s steps(1) infinite; }

.sx-serp-meta { margin: 24px 8px 30px; color: #848b90; font: 500 .68rem/1.2 "DM Sans", sans-serif; }
.sx-serp-card { position: relative; margin-top: 18px; padding: 25px 27px; border: 1px solid rgba(16,40,55,.11); background: #fff; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.sx-serp-card--winner { border-color: rgba(20,155,211,.55); box-shadow: 0 18px 45px rgba(20,155,211,.1); }
.sx-serp-card--winner::before { position: absolute; top: -1px; left: -1px; padding: 7px 12px; background: var(--sx-blue); color: #fff; content: "POSITION 1"; font: 800 .58rem/1 "DM Sans", sans-serif; letter-spacing: .08em; }
.sx-serp-card small { display: block; margin: 8px 0 9px; color: #697178; font: 500 .66rem/1.3 "DM Sans", sans-serif; }
.sx-serp-card strong { display: block; color: #126da8; font: 500 clamp(1.15rem, 2vw, 1.65rem)/1.2 "DM Sans", sans-serif; }
main .sx-experience .sx-serp-card p { margin: 9px 0 0; color: #61696e; font-family: "DM Sans", sans-serif !important; font-size: .78rem !important; font-weight: 400 !important; line-height: 1.55 !important; text-align: left; }
.sx-serp-card--muted { opacity: .48; }
.sx-serp-card--winner:hover { box-shadow: 0 28px 65px rgba(20,155,211,.16); transform: translateY(-4px); }

.sx-query-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 28px; }
.sx-query { position: relative; overflow: hidden; padding: 17px; border: 1px solid rgba(16,40,55,.1); background: #f8fafb; }
.sx-query::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #d9e2e6; content: ""; }
.sx-query.is-good::after { background: var(--sx-blue); }
.sx-query span { display: block; color: #777f84; font: 700 .57rem/1 "DM Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.sx-query strong { display: block; margin-top: 12px; font: 600 .8rem/1.35 "DM Sans", sans-serif; }

.sx-inspector { padding: clamp(30px, 4vw, 48px); }
.sx-inspector__top { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 26px; border-bottom: 1px solid rgba(16,40,55,.13); }
.sx-inspector__top span { color: var(--sx-muted); font: 800 .65rem/1 "DM Sans", sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.sx-live { display: inline-flex; align-items: center; gap: 7px; color: #149bd3!important; }
.sx-live::before { width: 7px; height: 7px; border-radius: 50%; background: currentColor; content: ""; animation: sx-pulse 2.2s ease-in-out infinite; }
.sx-score { padding: 40px 0 34px; text-align: center; }
.sx-score__value { font: 400 clamp(5.8rem, 9vw, 9.5rem)/.78 "Instrument Serif", Georgia, serif; letter-spacing: -.05em; }
.sx-score__unit { margin-left: 6px; color: var(--sx-blue); font: 800 1rem/1 "DM Sans", sans-serif; }
main .sx-experience .sx-score p { max-width: 280px; margin: 22px auto 0; color: var(--sx-muted); font-family: "DM Sans", sans-serif !important; font-size: .75rem !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.sx-bars { display: grid; gap: 25px; margin-top: 20px; }
.sx-bar__label { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #555d62; font: 650 .73rem/1.2 "DM Sans", sans-serif; }
.sx-bar__track { height: 7px; background: #e0e7ea; }
.sx-bar__fill { width: 0; height: 100%; background: var(--sx-blue); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.sx-experience.is-visible .sx-bar__fill { width: var(--fill); }
.sx-proof { display: grid; grid-template-columns: 42px 1fr; gap: 17px; margin-top: 38px; padding: 22px; border: 1px solid rgba(20,155,211,.25); background: rgba(20,155,211,.055); }
.sx-proof svg { width: 25px; color: var(--sx-blue); }
.sx-proof strong { display: block; font: 750 .85rem/1.3 "DM Sans", sans-serif; }
main .sx-experience .sx-proof p { margin: 7px 0 0; color: var(--sx-muted); font-family: "DM Sans", sans-serif !important; font-size: .74rem !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left; }

.sx-marquees { overflow: hidden; padding: clamp(70px, 9vw, 120px) 0; border-bottom: 1px solid rgba(16,40,55,.12); background: #fff; }
.sx-marquee { display: flex; width: max-content; gap: 16px; margin: 16px 0; animation: sx-move-left 44s linear infinite; }
.sx-marquee--reverse { animation-name: sx-move-right; }
.sx-chip { display: flex; min-width: 275px; align-items: center; gap: 14px; padding: 20px 24px; border: 1px solid rgba(16,40,55,.14); background: #fff; box-shadow: 0 10px 30px rgba(16,40,55,.045); font: 650 .82rem/1.25 "DM Sans", sans-serif; }
.sx-chip i { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border-radius: 50%; background: rgba(20,155,211,.1); color: var(--sx-blue); font-style: normal; }
.sx-chip--active { border-color: rgba(20,155,211,.55); background: #f4fbfe; }

@keyframes sx-pulse { 50% { opacity: .45; transform: scale(.82); } }
@keyframes sx-blink { 50% { opacity: 0; } }
@keyframes sx-move-left { to { transform: translateX(-50%); } }
@keyframes sx-move-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 920px) {
  .sx-stage { grid-template-columns: 1fr; }
  .sx-browser__body { min-height: 0; }
  .sx-inspector { max-width: 680px; width: 100%; margin-inline: auto; }
}

@media (max-width: 620px) {
  .sx-shell { width: min(calc(100% - 32px), 1380px); }
  .sx-experience { padding-top: 105px; }
  .sx-experience::before { width: 70vw; right: -20vw; }
  main .sx-experience .sx-heading h2 { font-size: clamp(3.25rem, 16vw, 5.2rem) !important; }
  .sx-browser__body { padding: 22px 16px 28px; }
  .sx-browser__chrome { padding-inline: 14px; }
  .sx-browser__address { margin-left: 5px; }
  .sx-query-grid { grid-template-columns: 1fr; }
  .sx-serp-card { padding: 23px 18px; }
  .sx-inspector { padding: 28px 20px; }
  .sx-chip { min-width: 235px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-breaking i, .sx-live::before, .sx-cursor, .sx-marquee { animation: none; }
  .sx-browser, .sx-inspector { opacity: 1; transform: none; }
  .sx-bar__fill { width: var(--fill); }
}