/* sitetap · Leistungsseite SEO (/seo-agentur-ulm/) · setzt tokens.css, components.css und site.css voraus.
   Eigene Klassen mit Präfix seo-. Farben nur über Tokens; in SVG-Attributen die Hex-Werte der Tokens. */

/* Animationen anhalten, solange der Bereich außerhalb des Bildschirms liegt (setzt seite-seo-agentur-ulm.js) */
.seo-pausiert *,.seo-pausiert *::before,.seo-pausiert *::after{animation-play-state:paused!important}

/* ══ 3 · Leistungen ════════════════════════════ */
.seo-l .leistung__vis{min-height:196px}

/* 01 · Keyword-Recherche: Suchfeld mit tippendem Begriff, darunter Vorschläge mit Häufigkeit */
.seo-kw{display:grid;gap:8px;width:min(100%,264px)}
.seo-kw__feld{display:flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:999px;background:var(--st-weiss);box-shadow:0 0 0 4px rgba(123,140,245,.16),0 16px 30px -14px rgba(0,0,0,.8);font:500 13.5px/1 var(--st-font-body);color:var(--st-tinte)}
.seo-kw__feld img{flex:none;width:16px;height:16px}
.seo-kw__tippen{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;animation:seo-tippen 8s steps(14,end) infinite}
@keyframes seo-tippen{0%{max-width:0}22%,90%{max-width:104px}97%,100%{max-width:0}}
.seo-kw__caret{flex:none;width:1.5px;height:15px;margin-left:-8px;background:var(--st-indigo);animation:lv-blink 1.1s steps(1) infinite}
.seo-kw__liste{list-style:none;margin:0;padding:6px;border-radius:14px;background:rgba(15,20,51,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 22px 40px -22px rgba(0,0,0,.85)}
.seo-kw__liste li{display:grid;grid-template-columns:minmax(0,1fr) 46px 26px;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;animation:seo-vorschlag 8s ease-out infinite both;animation-delay:var(--d)}
.seo-kw__liste li:first-child{background:rgba(123,140,245,.12)}
.seo-kw__liste span{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12px/1 var(--st-font-body);color:var(--st-nebeltext)}
.seo-kw__liste li:first-child span{color:var(--st-weiss)}
.seo-kw__liste svg{flex:none;width:12px;height:12px;fill:none;stroke:var(--st-indigo-hell);stroke-width:2.2;stroke-linecap:round}
.seo-kw__liste b{position:relative;display:block;height:5px;border-radius:999px;background:var(--st-nachtlinie);overflow:hidden}
.seo-kw__liste b::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--st-indigo),var(--st-indigo-hell));transform-origin:left;animation:seo-balken 8s var(--st-ease-out) infinite both;animation-delay:var(--d)}
.seo-kw__liste small{font:600 11px/1 var(--st-font-head);text-align:right;color:var(--st-indigo-hell)}
@keyframes seo-vorschlag{0%,24%{opacity:0;transform:translateY(-4px)}30%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes seo-balken{0%,28%{transform:scaleX(0)}40%,100%{transform:scaleX(1)}}

/* 02 · Ratgeber: drei aufgefächerte Artikel-Karten, die vorderste wandert nach hinten */
.seo-rg{position:relative;width:min(100%,236px);height:150px;margin-top:6px}
.seo-rg__karte{position:absolute;left:0;right:0;top:22px;display:grid;gap:7px;padding:13px 15px 15px;border-radius:16px;background:rgba(19,25,62,.97);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 24px 40px -22px rgba(0,0,0,.85);transform-origin:50% 100%;animation:seo-faecher 9s var(--st-ease-out) infinite both;animation-delay:calc(var(--n) * -3s)}
.seo-rg__karte strong{font:600 16px/1.2 var(--st-font-head);letter-spacing:-.02em;color:var(--st-weiss)}
.seo-rg__karte b{display:block;height:6px;border-radius:999px;background:var(--st-nachtlinie)}
.seo-rg__karte .seo-rg__kurz{width:64%}
@keyframes seo-faecher{
  0%,28%{transform:none;opacity:1;z-index:3}
  31%{transform:translateY(26px) scale(.96);opacity:0;z-index:3}
  32%{transform:translate(-26px,-4px) rotate(-8deg) scale(.9);opacity:0;z-index:1}
  36%,61%{transform:translate(-26px,-4px) rotate(-8deg) scale(.9);opacity:.6;z-index:1}
  66%,94%{transform:translate(26px,-6px) rotate(7deg) scale(.94);opacity:.8;z-index:2}
  100%{transform:none;opacity:1;z-index:3}}

/* 03 · Seitenstruktur: Scanlinie fährt über die Seite, Abschnitte werden markiert und benannt */
.seo-scan{position:relative;width:min(100%,262px);height:164px}
.seo-scan__seite{position:absolute;left:0;top:0;width:62%;height:158px;padding:10px 11px;box-sizing:border-box;border-radius:14px;background:rgba(15,20,51,.78);box-shadow:inset 0 0 0 1px rgba(123,140,245,.22),0 26px 44px -24px rgba(0,0,0,.85);overflow:hidden}
.seo-scan__seite b,.seo-scan__seite i{display:block}
.seo-scan__nav{display:flex;gap:5px;height:8px;margin-bottom:10px}
.seo-scan__nav i{width:16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(201,207,245,.28)}
.seo-scan__nav i:first-child{width:24px;margin-right:auto;background:rgba(123,140,245,.32);box-shadow:none}
.seo-scan__block{position:absolute;left:11px;right:11px;height:24px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 6px;border-radius:6px}
.seo-scan__block::after{content:"";position:absolute;inset:-2px;border-radius:7px;box-shadow:inset 0 0 0 1.5px var(--st-indigo-hell);background:rgba(123,140,245,.1);opacity:0}
.seo-scan__block--1{top:28px}.seo-scan__block--2{top:60px;flex-direction:row;align-items:center}.seo-scan__block--3{top:92px}.seo-scan__block--4{top:124px}
.seo-scan__block--1::after{animation:seo-scan-1 6s linear infinite}
.seo-scan__block--2::after{animation:seo-scan-2 6s linear infinite}
.seo-scan__block--3::after{animation:seo-scan-3 6s linear infinite}
.seo-scan__block--4::after{animation:seo-scan-4 6s linear infinite}
.seo-scan__h{width:72%;height:7px;border-radius:3px;background:rgba(201,207,245,.5)}
.seo-scan__t{width:88%;height:4px;border-radius:999px;background:rgba(201,207,245,.18)}
.seo-scan__t--kurz{width:60%}
.seo-scan__block--2 b{flex:1;height:16px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(201,207,245,.24)}
.seo-scan__knopf{width:44%;height:10px;border-radius:5px 2px 5px 2px;background:var(--st-indigo)}
.seo-scan__linie{position:absolute;left:0;right:0;top:20px;height:2px;background:linear-gradient(90deg,rgba(123,140,245,0),var(--st-indigo-hell) 40%,var(--st-indigo-hell));box-shadow:0 0 14px 2px rgba(123,140,245,.55);animation:seo-scanlinie 6s linear infinite}
.seo-scan__linie i{position:absolute;right:4px;top:50%;display:grid;place-items:center;width:20px;height:20px;transform:translateY(-50%);border-radius:50%;background:var(--st-weiss);box-shadow:0 4px 10px rgba(0,0,0,.45)}
.seo-scan__linie img{width:12px;height:12px}
.seo-scan__tag{position:absolute;left:calc(62% + 14px);display:inline-flex;align-items:center;height:22px;padding:0 9px;white-space:nowrap;border-radius:var(--st-ecke-pill);background:rgba(15,20,51,.92);box-shadow:inset 0 0 0 1px rgba(123,140,245,.45),0 10px 20px -10px rgba(0,0,0,.8);font:600 11px/1 var(--st-font-head);color:var(--st-weiss);opacity:0}
.seo-scan__tag::before{content:"";position:absolute;right:100%;top:50%;width:14px;border-top:1px dashed rgba(123,140,245,.6)}
.seo-scan__tag--1{top:29px;animation:seo-scan-1 6s linear infinite}
.seo-scan__tag--2{top:61px;animation:seo-scan-2 6s linear infinite}
.seo-scan__tag--3{top:93px;animation:seo-scan-3 6s linear infinite}
.seo-scan__tag--4{top:125px;animation:seo-scan-4 6s linear infinite}
@keyframes seo-scanlinie{0%{top:22px;opacity:0}4%{opacity:1}70%{top:150px;opacity:1}76%,100%{top:150px;opacity:0}}
@keyframes seo-scan-1{0%,9%{opacity:0}12%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes seo-scan-2{0%,26%{opacity:0}29%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes seo-scan-3{0%,43%{opacity:0}46%,88%{opacity:1}94%,100%{opacity:0}}
@keyframes seo-scan-4{0%,60%{opacity:0}63%,88%{opacity:1}94%,100%{opacity:0}}

/* 04 · Google Maps: Kartenausschnitt, Ihr Pin hebt sich ab, darunter die drei Kartentreffer */
.seo-map{position:relative;width:min(100%,272px);aspect-ratio:272/164;border-radius:16px;overflow:hidden;background:rgba(15,20,51,.8);box-shadow:inset 0 0 0 1px rgba(123,140,245,.22),0 26px 44px -24px rgba(0,0,0,.85)}
.seo-map__karte{position:absolute;inset:0;width:100%;height:100%}
.seo-map__fluss{fill:none;stroke:rgba(123,140,245,.22);stroke-width:10;stroke-linecap:round}
.seo-map__strasse{fill:none;stroke:rgba(201,207,245,.12);stroke-width:2.5;stroke-linecap:round}
.seo-map__strasse--gross{stroke:rgba(201,207,245,.2);stroke-width:5}
.seo-map__pin{position:absolute;width:11px;height:11px;transform:translate(-50%,-100%) rotate(-45deg);border-radius:50% 50% 50% 0;background:rgba(154,166,238,.45)}
.seo-map__pin--ihr{z-index:1;display:grid;place-items:center;width:30px;height:30px;background:var(--st-indigo);box-shadow:inset 0 0 0 2px var(--st-weiss),0 10px 22px -6px rgba(69,91,229,.9);animation:seo-pin 3.2s var(--st-ease-out) infinite}
.seo-map__pin--ihr svg{width:14px;height:14px;transform:rotate(45deg);fill:none;stroke:var(--st-weiss);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.seo-map__pin--ihr::after{content:"";position:absolute;left:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px rgba(123,140,245,.7);transform:rotate(45deg) scale(.4);opacity:0;animation:seo-ring 3.2s ease-out infinite}
@keyframes seo-pin{0%,100%{transform:translate(-50%,-100%) rotate(-45deg)}12%{transform:translate(-50%,calc(-100% - 7px)) rotate(-45deg)}24%{transform:translate(-50%,-100%) rotate(-45deg)}}
@keyframes seo-ring{0%,20%{opacity:0;transform:scale(.4)}26%{opacity:1}60%,100%{opacity:0;transform:scale(2.2)}}
.seo-map__liste{position:absolute;right:8px;bottom:8px;left:auto;width:58%;list-style:none;margin:0;padding:5px;border-radius:12px;background:rgba(15,20,51,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 14px 26px -12px rgba(0,0,0,.85)}
.seo-map__liste li{display:flex;align-items:center;gap:6px;height:20px;padding:0 6px;border-radius:7px}
.seo-map__liste b{flex:none;font:600 10px/1 var(--st-font-head);color:var(--st-indigo-hell)}
.seo-map__liste i{flex:1;height:4px;border-radius:999px;background:var(--st-nachtlinie)}
.seo-map__liste span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font:600 11px/1 var(--st-font-head);color:var(--st-weiss)}
.seo-map__liste em{font-style:normal;font-size:8px;letter-spacing:.5px;color:var(--st-lavendel)}
.seo-map__liste .seo-map__treffer--ihr{background:var(--st-indigo)}
.seo-map__liste .seo-map__treffer--ihr b{color:var(--st-weiss)}

/* 05 · Technik: Tacho für die Ladezeit, daneben der Handy-Check */
.seo-tech{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}
.seo-tacho{display:flex;flex-direction:column;align-items:center;gap:4px;width:150px}
.seo-tacho svg{display:block;width:100%;overflow:visible}
.seo-tacho__spur,.seo-tacho__wert{fill:none;stroke-width:10;stroke-linecap:round}
.seo-tacho__spur{stroke:var(--st-nachtlinie)}
.seo-tacho__wert{stroke:url(#seo-tacho-verlauf);stroke-dasharray:1;stroke-dashoffset:.16;filter:drop-shadow(0 0 6px rgba(123,140,245,.55));animation:seo-tacho-bogen 6s var(--st-ease-out) infinite}
.seo-tacho__striche{fill:none;stroke:rgba(201,207,245,.35);stroke-width:1.5;stroke-linecap:round}
.seo-tacho__nadel{transform-origin:80px 84px;transform:rotate(60deg);animation:seo-tacho-nadel 6s var(--st-ease-out) infinite}
.seo-tacho__nadel path{stroke:var(--st-weiss);stroke-width:3;stroke-linecap:round}
.seo-tacho__nadel circle{fill:var(--st-weiss);stroke:var(--st-indigo);stroke-width:3}
.seo-tacho__label{display:flex;align-items:baseline;gap:6px;font:500 11.5px/1 var(--st-font-body);color:var(--st-nebeltext)}
.seo-tacho__label strong{font:600 14px/1 var(--st-font-head);color:var(--st-weiss)}
@keyframes seo-tacho-bogen{0%{stroke-dashoffset:1}30%,88%{stroke-dashoffset:.16}100%{stroke-dashoffset:1}}
@keyframes seo-tacho-nadel{0%{transform:rotate(-90deg)}30%,88%{transform:rotate(60deg)}100%{transform:rotate(-90deg)}}
.seo-handy{position:relative;display:flex;flex-direction:column;align-items:center}
.seo-handy__geraet{display:flex;flex-direction:column;gap:6px;width:58px;height:104px;padding:14px 8px 8px;box-sizing:border-box;border-radius:14px;background:rgba(15,20,51,.85);box-shadow:inset 0 0 0 1.5px rgba(123,140,245,.45),0 20px 34px -18px rgba(0,0,0,.85)}
.seo-handy__geraet i{display:block;width:16px;height:3px;margin:-8px auto 4px;border-radius:999px;background:rgba(201,207,245,.3)}
.seo-handy__geraet b{display:block;height:5px;border-radius:999px;background:rgba(201,207,245,.2)}
.seo-handy__geraet b:first-of-type{height:7px;width:80%;background:rgba(201,207,245,.5)}
.seo-handy__geraet .seo-handy__kurz{width:60%}
.seo-handy__geraet em{display:block;width:60%;height:9px;margin-top:auto;border-radius:5px 2px 5px 2px;background:var(--st-indigo)}
.seo-handy__check{position:absolute;bottom:-12px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;white-space:nowrap;border-radius:var(--st-ecke-pill);background:rgba(15,20,51,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 24px -12px rgba(0,0,0,.8);font:600 11px/1 var(--st-font-head);color:var(--st-weiss);animation:seo-check 6s var(--st-ease-out) infinite}
.seo-handy__check svg{width:15px;height:15px;padding:2px;box-sizing:border-box;border-radius:50%;background:var(--st-wachstum);fill:none;stroke:var(--st-weiss);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes seo-check{0%,30%{opacity:0;transform:translateY(6px)}38%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 06 · Report: Plätze wandern Schritt für Schritt nach oben */
.seo-rank{width:min(100%,268px);padding:12px 12px 8px;box-sizing:border-box;border-radius:16px;background:rgba(15,20,51,.88);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 40px -22px rgba(0,0,0,.85)}
.seo-rank__kopf{margin:0 2px 8px}
.seo-rank__liste{list-style:none;margin:0;padding:0}
.seo-rank__liste li{display:grid;grid-template-columns:minmax(0,1fr) 34px 44px;align-items:center;gap:8px;padding:7px 4px;border-top:1px solid rgba(40,48,99,.8)}
.seo-rank__begriff{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 12px/1 var(--st-font-body);color:var(--st-nebeltext)}
.seo-rank__platz{display:block;height:22px;overflow:hidden;border-radius:6px 2px 6px 2px;background:rgba(123,140,245,.14)}
.seo-rank__platz>span{display:flex;flex-direction:column;animation:seo-platz 9s var(--st-ease-out) infinite}
.seo-rank__platz i{display:block;height:22px;font:600 13px/22px var(--st-font-head);font-style:normal;text-align:center;color:var(--st-weiss)}
.seo-rank__platz i:last-child{color:var(--st-indigo-hell)}
.seo-rank__liste li:nth-child(2) .seo-rank__platz>span{animation-delay:.2s}
.seo-rank__liste li:nth-child(3) .seo-rank__platz>span{animation-delay:.4s}
.seo-rank__delta{font:600 11.5px/1 var(--st-font-head);text-align:right;color:var(--st-wachstum);animation:seo-delta 9s ease-out infinite}
@keyframes seo-platz{0%,16%{transform:none}24%,40%{transform:translateY(-22px)}48%,64%{transform:translateY(-44px)}72%,94%{transform:translateY(-66px)}100%{transform:translateY(-66px)}}
@keyframes seo-delta{0%,70%{opacity:0;transform:translateY(4px)}76%,94%{opacity:1;transform:none}100%{opacity:0}}

/* ══ 4 · Die Google-Suche ══════════════════════ */
.seo-suche__head{margin-bottom:var(--st-space-7)}
.seo-suche__head h2{max-width:22ch}
.seo-suche__head .st-lead{max-width:60ch;color:var(--st-tinte)}
.seo-suche{--zeile:56px;--ort:46px;position:relative;isolation:isolate;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
/* weicher Farbfleck hinter der Ergebnisseite, wie beim Schaubild der Startseite */
.seo-suche::before{content:"";position:absolute;z-index:-1;left:50%;top:46%;width:min(92%,900px);aspect-ratio:1.3;transform:translate(-50%,-50%);pointer-events:none;border-radius:50%;filter:blur(40px);background:
  radial-gradient(45% 45% at 42% 40%,rgba(69,91,229,.2) 0%,rgba(69,91,229,0) 100%),
  radial-gradient(50% 50% at 62% 62%,rgba(154,166,238,.5) 0%,rgba(154,166,238,0) 100%),
  radial-gradient(70% 70% at 50% 50%,rgba(227,231,255,.95) 0%,rgba(227,231,255,0) 100%)}
.seo-serp{position:relative;width:min(100%,600px);padding:20px 22px 10px;box-sizing:border-box;border-radius:var(--st-radius-panel);background:var(--st-weiss);box-shadow:var(--st-lift-gross)}
.seo-serp__kopf{display:flex;align-items:center;gap:14px}
.seo-serp__logo{flex:none;width:26px;height:26px}
.seo-serp__feld{flex:1;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;border-radius:999px;box-shadow:0 0 0 1px var(--st-linie),0 8px 18px -12px rgba(28,33,64,.35);font:500 15px/1 var(--st-font-body);color:var(--st-tinte)}
.seo-serp__feld svg{width:18px;height:18px;fill:none;stroke:var(--st-indigo);stroke-width:2.2;stroke-linecap:round}
.seo-serp__tabs{display:flex;gap:20px;margin:14px 0 14px 40px;border-bottom:1px solid var(--st-linie);font:500 13px/1 var(--st-font-body);color:var(--st-grau)}
.seo-serp__tabs span{padding:4px 2px 10px}
.seo-serp__tabs .is-aktiv{color:var(--st-indigo);box-shadow:inset 0 -2px 0 var(--st-indigo)}
/* Kartentreffer: Karte links, drei Einträge rechts */
.seo-serp__maps{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:10px;margin-bottom:12px;border-radius:16px;background:var(--st-karte-bg)}
.seo-serp__karte{position:relative;overflow:hidden;border-radius:12px;background:var(--st-lavendel)}
.seo-serp__karte svg{position:absolute;inset:0;width:100%;height:100%}
.seo-serp__fluss{fill:none;stroke:rgba(154,166,238,.55);stroke-width:9;stroke-linecap:round}
.seo-serp__strasse{fill:none;stroke:var(--st-weiss);stroke-width:2.5;stroke-linecap:round}
.seo-serp__strasse--gross{stroke-width:5}
.seo-serp__pin{position:absolute;width:13px;height:13px;transform:translate(-50%,-100%) rotate(-45deg);border-radius:50% 50% 50% 0;background:var(--st-soft-indigo);transition:opacity .5s}
.seo-serp__pin--ihr{z-index:1;width:24px;height:24px;background:var(--st-indigo);box-shadow:inset 0 0 0 5px var(--st-indigo),inset 0 0 0 9px var(--st-weiss),0 8px 16px -6px rgba(69,91,229,.8);opacity:0;transition:opacity .5s .3s}
.seo-suche[data-stufe="3"] .seo-serp__pin--ihr{opacity:1;animation:seo-pin 3.2s var(--st-ease-out) infinite}
.seo-serp__orte{position:relative;height:calc(var(--ort) * 3 + 3px);list-style:none;margin:0;padding:0;overflow:hidden}
.seo-serp__ort{position:absolute;left:2px;right:2px;top:3px;height:calc(var(--ort) - 6px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 12px;box-sizing:border-box;border-radius:10px;transform:translateY(calc(var(--slot,0) * var(--ort)));transition:transform .8s var(--st-ease-out),opacity .5s}
.seo-serp__ort b{display:block;width:46%;height:8px;border-radius:999px;background:var(--st-soft-indigo);opacity:.55}
.seo-serp__ort>span{display:flex;align-items:center;gap:8px}
.seo-serp__ort em{font-style:normal;font-size:10px;letter-spacing:1px;color:var(--st-soft-indigo)}
.seo-serp__ort>span>i{display:block;width:30%;height:5px;border-radius:999px;background:var(--st-linie)}
.seo-serp__ort.is-weg{opacity:0}
.seo-serp__ort--ihr{padding-right:52px;background:var(--st-weiss);box-shadow:0 0 0 1.5px var(--st-indigo),var(--st-float)}
.seo-serp__ort--ihr strong{font:600 14px/1 var(--st-font-head);color:var(--st-indigo)}
.seo-serp__ort--ihr>span{font:400 12px/1 var(--st-font-body);color:var(--st-grau)}
.seo-serp__ort--ihr em{color:var(--st-indigo)}
.seo-serp__anruf{position:absolute;right:10px;top:50%;display:grid;place-items:center;width:30px;height:30px;transform:translateY(-50%);border-radius:50%;background:var(--st-indigo)}
.seo-serp__anruf svg{width:15px;height:15px;fill:none;stroke:var(--st-weiss);stroke-width:2;stroke-linejoin:round}
/* organische Treffer: --slot setzt das Skript, Seite 2 beginnt nach Platz 5 */
.seo-serp__liste{position:relative;height:calc(var(--zeile) * 8);list-style:none;margin:0;padding:0}
.seo-serp__liste>li{position:absolute;left:0;right:0;top:0;height:calc(var(--zeile) - 8px);display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 12px;box-sizing:border-box;border-radius:12px;transform:translateY(calc(var(--slot,0) * var(--zeile)));transition:transform .9s var(--st-ease-out),opacity .6s}
.seo-serp__liste b{display:block;border-radius:999px}
.seo-serp__u{width:28%;height:6px;background:var(--st-linie)}
.seo-serp__t{width:64%;height:10px;background:var(--st-soft-indigo);opacity:.6}
.seo-serp__z{width:86%;height:6px;background:var(--st-kartengrau)}
.seo-serp__liste>li.is-seite2{opacity:.38}
.seo-serp__treffer--ihr{z-index:1;gap:6px;background:var(--st-lavendel);box-shadow:0 0 0 1.5px var(--st-indigo),var(--st-float)}
.seo-serp__liste>.seo-serp__treffer--ihr.is-seite2{opacity:.85}
.seo-serp__url{display:flex;align-items:center;gap:6px;font:400 12px/1 var(--st-font-body);color:var(--st-grau)}
.seo-serp__url img{width:8px;height:auto}
.seo-serp__treffer--ihr strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 15px/1.15 var(--st-font-head);letter-spacing:-.01em;color:var(--st-indigo)}
.seo-serp__zeile{display:block;width:78%;height:5px;border-radius:999px;background:var(--st-weiss)}
.seo-serp__seite2{flex-direction:row!important;align-items:center;gap:12px!important;font:600 12px/1 var(--st-font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--st-grau)}
.seo-serp__seite2::before,.seo-serp__seite2::after{content:"";flex:1;border-top:1px dashed var(--st-soft-indigo);opacity:.6}
.seo-suche.is-reset .seo-serp__liste>li,.seo-suche.is-reset .seo-serp__ort{transition:none}
/* Hinweise neben der Ergebnisseite */
.seo-suche__hinweise{list-style:none;margin:0;padding:0}
.seo-suche__hinweis .st-pill{gap:8px;padding:10px 14px;box-shadow:var(--st-float);font-size:13px;white-space:nowrap}
.seo-suche__hinweis svg{flex:none;color:var(--st-indigo)}
.seo-suche__status{min-height:1.6em;margin:var(--st-space-5) 0 0;text-align:center;font:600 16px/1.5 var(--st-font-head);color:var(--st-tinte)}
@media (min-width:1180px){
  .seo-suche__hinweis{position:absolute;display:flex;align-items:center}
  .seo-suche__hinweis--1{right:calc(50% + 300px + 22px);top:182px}
  .seo-suche__hinweis--2{left:calc(50% + 300px + 22px);top:300px}
  .seo-suche__hinweis--3{right:calc(50% + 300px + 22px);bottom:96px}
  .seo-suche__hinweis--1::after,.seo-suche__hinweis--3::after{content:"";width:16px;margin-left:6px;border-top:1.5px dashed var(--st-soft-indigo)}
  .seo-suche__hinweis--2::before{content:"";width:16px;margin-right:6px;border-top:1.5px dashed var(--st-soft-indigo)}
  .seo-suche__hinweis{animation:seo-schweben 5.5s ease-in-out infinite}
  .seo-suche__hinweis--2{animation-delay:-1.8s}
  .seo-suche__hinweis--3{animation-delay:-3.6s}
}
@keyframes seo-schweben{50%{transform:translateY(-5px)}}
@media (max-width:1179px){
  .seo-suche__hinweise{order:3;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--st-space-5)}
}

/* ══ 4b · Das Prinzip: Lage Ihres Ladens ═══════ */
/* Bühne und Umschalter kommen von .eimer (site.css), hier nur die Canvas */
.seo-laden__canvas{display:block;width:100%;aspect-ratio:560/520;margin-top:4px}
.seo-laden .eimer__stat strong{color:var(--st-indigo)}

/* ══ 5 · Vorteile · Bento ══════════════════════ */
/* 01 · Anfragen jeden Monat: Indigo-Karte, Stapel wachsen Monat für Monat */
.seo-b--monate{background:
  radial-gradient(80% 40% at 50% 100%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 75%),
  linear-gradient(180deg,var(--st-indigo) 0%,var(--st-soft-indigo) 58%,var(--st-lavendel) 100%)}
.seo-b--monate .bento__nr{color:var(--st-weiss);opacity:.8}
.seo-monate{position:absolute;inset:0;padding:56px 26px 10px;display:flex;flex-direction:column}
.seo-monate__stat{color:var(--st-weiss)}
.seo-monate__stat strong{display:block;font:600 clamp(32px,2.8vw,40px)/1.05 var(--st-font-head);letter-spacing:-.03em}
.seo-monate__stat span{display:block;margin-top:8px;font-size:13px;opacity:.9}
.seo-monate__spalten{flex:1;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;list-style:none;margin:18px 0 0;padding:0}
.seo-monate__spalten li{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px}
.seo-monate__spalten b{display:block;width:100%;max-width:34px;height:calc(var(--n) * 20px - 4px);border-radius:6px;background:var(--st-weiss);box-shadow:0 10px 20px -10px rgba(28,33,64,.35);
  -webkit-mask:repeating-linear-gradient(to top,#000 0 16px,transparent 16px 20px);mask:repeating-linear-gradient(to top,#000 0 16px,transparent 16px 20px);
  animation:seo-stapel 8s steps(var(--n),end) infinite both;animation-delay:var(--d)}
.seo-monate__spalten li:last-child b{background:var(--st-weiss);filter:drop-shadow(0 0 10px rgba(255,255,255,.9))}
.seo-monate__spalten small{font:600 11px/1 var(--st-font-head);color:var(--st-weiss);opacity:.9}
@keyframes seo-stapel{0%{clip-path:inset(100% 0 0 0)}22%,90%{clip-path:inset(0)}100%{clip-path:inset(100% 0 0 0)}}

/* 02 · Werbebudget: Anzeige kostet pro Klick, Besucher aus der Suche sind kostenlos */
.seo-b--budget .bento__vis{display:flex;align-items:center;justify-content:center;padding:48px 24px 12px}
.seo-budget{display:grid;gap:4px;width:min(100%,310px);padding:16px 18px 10px;box-sizing:border-box;border-radius:20px;background:var(--st-weiss);box-shadow:var(--st-float)}
.seo-budget__titel{margin-bottom:6px;font:600 13px/1 var(--st-font-head);color:var(--st-grau)}
.seo-budget__zeile{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:52px;border-top:1px solid var(--st-linie)}
.seo-budget__quelle{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--st-font-head);color:var(--st-tinte)}
.seo-budget__quelle img{flex:none;width:18px;height:18px}
.seo-budget__muenzen{position:relative;height:24px;overflow:hidden}
.seo-budget__muenzen i{position:absolute;left:0;top:0;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--st-lavendel);box-shadow:inset 0 0 0 1.5px var(--st-soft-indigo);font:600 12px/1 var(--st-font-head);font-style:normal;color:var(--st-indigo);animation:seo-muenze 3.6s linear infinite both}
.seo-budget__muenzen i:nth-child(2){animation-delay:1.2s}
.seo-budget__muenzen i:nth-child(3){animation-delay:2.4s}
@keyframes seo-muenze{0%{transform:translateX(-24px);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(90px);opacity:0}}
.seo-budget__preis{font-size:12.5px;color:var(--st-grau)}
.seo-budget__zeile--seo{margin:0 -8px;padding:0 8px;border-radius:12px;border-top-color:transparent;background:var(--st-karte-bg)}
.seo-budget__null{font:600 26px/1 var(--st-font-head);letter-spacing:-.03em;color:var(--st-wachstum)}

/* 03 · Kaufbereit: Suche mit Dringlichkeit, daraus wird ein Anruf */
.seo-b--kaufbereit .bento__vis{display:flex;align-items:center;justify-content:center;padding:50px 24px 12px}
.seo-kauf{display:flex;flex-direction:column;align-items:center;width:100%}
.seo-kauf__suche{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:999px;background:var(--st-weiss);box-shadow:var(--st-float);white-space:nowrap;font:500 14px/1 var(--st-font-body);color:var(--st-tinte)}
.seo-kauf__suche svg{width:16px;height:16px;fill:none;stroke:var(--st-indigo);stroke-width:2.2;stroke-linecap:round}
.seo-kauf__pfad{position:relative;width:2px;height:46px;background:repeating-linear-gradient(to bottom,var(--st-soft-indigo) 0 4px,transparent 4px 9px)}
.seo-kauf__pfad::after{content:"";position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--st-indigo);box-shadow:0 0 0 4px rgba(69,91,229,.18);animation:seo-pfad 2.4s ease-in-out infinite}
@keyframes seo-pfad{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(38px);opacity:0}}
.seo-kauf__anruf{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--st-weiss);box-shadow:var(--st-float)}
.seo-kauf__icon{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--st-indigo)}
.seo-kauf__icon::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(69,91,229,.45);animation:seo-klingeln 2.4s ease-out infinite}
.seo-kauf__icon svg{width:18px;height:18px;fill:none;stroke:var(--st-weiss);stroke-width:2;stroke-linejoin:round;animation:seo-wackeln 2.4s ease-in-out infinite}
.seo-kauf__anruf strong{display:block;font:600 14px/1.2 var(--st-font-head);color:var(--st-tinte)}
.seo-kauf__anruf small{display:block;margin-top:3px;font-size:12px;color:var(--st-grau)}
@keyframes seo-klingeln{0%{box-shadow:0 0 0 0 rgba(69,91,229,.45)}70%,100%{box-shadow:0 0 0 14px rgba(69,91,229,0)}}
@keyframes seo-wackeln{0%,40%,100%{transform:none}5%,15%,25%{transform:rotate(-12deg)}10%,20%,30%{transform:rotate(12deg)}}

/* 04 · Experte: Fragen-Box, Ihr Ratgeber liefert die Antwort */
.seo-b--experte .bento__vis{display:flex;align-items:center;justify-content:center;padding:46px 26px 8px;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 98%);mask-image:linear-gradient(180deg,#000 70%,transparent 98%)}
.seo-fragen{width:min(100%,440px);padding:16px 18px 6px;box-sizing:border-box;border-radius:20px;background:var(--st-weiss);box-shadow:var(--st-float)}
.seo-fragen__titel{display:block;margin-bottom:8px;font:600 15px/1 var(--st-font-head);color:var(--st-tinte)}
.seo-fragen__frage{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;font:500 14px/1.3 var(--st-font-body);color:var(--st-tinte)}
.seo-fragen__frage svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--st-grau);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seo-fragen__frage--zu{border-top:1px solid var(--st-linie)}
.seo-fragen__offen{border-top:1px solid var(--st-linie);padding-bottom:12px}
.seo-fragen__offen .seo-fragen__frage{font-weight:600}
.seo-fragen__offen .seo-fragen__frage svg{stroke:var(--st-indigo)}
.seo-fragen__antwort{display:grid;gap:7px;margin-bottom:12px}
.seo-fragen__antwort b{display:block;height:6px;border-radius:999px;background:var(--st-kartengrau);transform-origin:left;animation:seo-antwort 7s var(--st-ease-out) infinite both}
.seo-fragen__antwort b:nth-child(2){animation-delay:.15s}
.seo-fragen__antwort .seo-fragen__kurz{width:58%;animation-delay:.3s}
@keyframes seo-antwort{0%,6%{transform:scaleX(0)}20%,100%{transform:scaleX(1)}}
.seo-fragen__quelle{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--st-ecke-pill);background:var(--st-lavendel);font:600 12px/1 var(--st-font-head);color:var(--st-indigo);animation:seo-quelle 7s ease-in-out infinite}
.seo-fragen__quelle img{width:8px;height:auto}
@keyframes seo-quelle{0%,18%{box-shadow:0 0 0 0 rgba(69,91,229,0)}28%{box-shadow:0 0 0 5px rgba(69,91,229,.18)}40%,100%{box-shadow:0 0 0 0 rgba(69,91,229,0)}}

/* 05 · Report: drei Kennzahlen und eine Linie */
.seo-b--report .bento__vis{display:flex;align-items:center;justify-content:center;padding:46px 26px 12px}
.seo-bericht{width:min(100%,460px);padding:18px 20px 14px;box-sizing:border-box;border-radius:20px;background:var(--st-weiss);box-shadow:var(--st-float)}
.seo-bericht__kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.seo-bericht__monat{font:600 13px/1 var(--st-font-head);color:var(--st-grau)}
.seo-bericht__zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.seo-bericht__zahlen div{display:flex;flex-direction:column;gap:5px;min-width:0}
.seo-bericht__zahlen span{min-height:2.6em;font-size:12px;line-height:1.3;color:var(--st-grau)}
.seo-bericht__zahlen strong{font:600 clamp(24px,2.2vw,30px)/1 var(--st-font-head);letter-spacing:-.03em;color:var(--st-tinte)}
.seo-bericht__zahlen em{font:600 12.5px/1 var(--st-font-head);font-style:normal;color:var(--st-wachstum)}
.seo-bericht__linie{display:block;width:100%;height:46px;margin-top:14px;overflow:visible}
.seo-bericht__linie path{fill:none;stroke:var(--st-indigo);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:520;stroke-dashoffset:520;animation:seo-linie 7s var(--st-ease-out) infinite}
@keyframes seo-linie{0%{stroke-dashoffset:520}35%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}

/* ══ Tablet / Mobil ════════════════════════════ */
@media (max-width:560px){
  .seo-l .leistung__vis{min-height:200px}
  .seo-suche{--zeile:54px;--ort:42px}
  .seo-serp{padding:14px 12px 6px}
  .seo-serp__kopf{gap:10px}
  .seo-serp__feld{height:40px;padding:0 14px;font-size:14px}
  .seo-serp__tabs{gap:14px;margin-left:0}
  .seo-serp__maps{grid-template-columns:96px minmax(0,1fr);gap:8px;padding:8px}
  .seo-serp__ort{padding:0 8px}
  .seo-serp__ort--ihr{padding-right:44px}
  .seo-serp__ort--ihr strong{font-size:13px}
  .seo-serp__ort--ihr>span{font-size:11px}
  .seo-serp__anruf{right:7px;width:28px;height:28px}
  .seo-serp__treffer--ihr strong{font-size:14px}
  .seo-suche__hinweis .st-pill{font-size:12.5px;white-space:normal}
  .seo-suche__status{font-size:15px}
  .seo-bericht__zahlen{gap:8px}
  .seo-bericht{padding:16px 16px 12px}
  .seo-budget__zeile{grid-template-columns:84px minmax(0,1fr) auto}
}

@media (prefers-reduced-motion:reduce){
  .seo-l *,.seo-l *::before,.seo-l *::after,.seo-b *,.seo-b *::before,.seo-b *::after,.seo-suche__hinweis,.seo-suche *{animation:none!important;transition:none!important}
  .seo-kw__tippen{max-width:none}
  .seo-rg__karte[style*="--n:1"]{transform:translate(-26px,-4px) rotate(-8deg) scale(.9);opacity:.6;z-index:1}
  .seo-rg__karte[style*="--n:2"]{transform:translate(26px,-6px) rotate(7deg) scale(.94);opacity:.8;z-index:2}
  .seo-rg__karte[style*="--n:0"]{z-index:3}
  .seo-scan__block::after,.seo-scan__tag{opacity:1}
  .seo-scan__linie{top:150px;opacity:0}
  .seo-rank__platz>span{transform:translateY(-66px)}
  .seo-handy__check{opacity:1}
  .seo-monate__spalten b{clip-path:none}
}