/* ============================================================================
   E-Scooter Test — Designkern für die ganze Site
   Erzeugt 14.08.2026, Welt „Anzeige und Asphalt" (Quelle: Startseite).

   Warum das funktioniert, ohne 33 Beiträge anzufassen: das Bestands-CSS ist
   variablengesteuert. Jede Seitenfamilie (kauf, seg, niu, akku, vers, repar)
   bringt ein eigenes :root mit denselben Werten mit — #0066ff Blau, #00c853
   Grün, #0f172a Dunkel, System-Schrift. Hier werden genau diese Variablen
   umgehängt. Wer eine neue Seitenfamilie anlegt, trägt ihre Variablen unten
   nach; sonst bleibt sie im alten Blau stehen.

   Reihenfolge: lädt NACH es-hookfree-polish.css.
   ============================================================================ */

:root{
  --es-asphalt:#15181c;
  --es-blech:#23272e;
  --es-gelb:#ffb400;
  --es-gelb-tief:#c98700;
  --es-stvo:#0b57a4;
  --es-stvo-dunkel:#08427c;
  --es-gruen:#12704a;
  --es-rot:#b3261e;
  --es-beton:#e3e6e9;
  --es-papier:#f7f8f9;
  --es-tinte:#171a1e;
  --es-grau:#565d66;
  --es-linie:#cfd4d9;
  --es-sans:"Barlow",system-ui,-apple-system,sans-serif;
  --es-display:"Anybody","Barlow",system-ui,sans-serif;
}

/* --- Schriften: dieselben Dateien wie auf der Startseite -------------------- */
@font-face{font-family:"Anybody";src:url("fonts/anybody-var-latin.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

/* --- Die Umhängung: alte Variablen bekommen neue Werte --------------------- */
:root{
  --es-font:var(--es-sans);
  --es-primary:var(--es-stvo);      --es-primary-dark:var(--es-stvo-dunkel);
  --es-accent:var(--es-gruen);

  --es-kauf-font:var(--es-sans);
  --es-kauf-primary:var(--es-stvo); --es-kauf-primary-dark:var(--es-stvo-dunkel);
  --es-kauf-primary-light:#2166a8;  --es-kauf-secondary:var(--es-blech);
  --es-kauf-accent:var(--es-gelb);  --es-kauf-info:var(--es-stvo);
  --es-kauf-bg-light:var(--es-papier); --es-kauf-bg-dark:var(--es-asphalt);
  --es-kauf-text-dark:var(--es-tinte); --es-kauf-text-medium:var(--es-grau);

  --es-seg-font:var(--es-sans);
  --es-seg-blue:var(--es-stvo);     --es-seg-blue-dark:var(--es-stvo-dunkel);
  --es-seg-green:var(--es-gruen);   --es-seg-green-dark:#0d5b3b;
  --es-seg-hero-dark:var(--es-asphalt); --es-seg-hero-mid:var(--es-blech);
  --es-seg-light:var(--es-papier);  --es-seg-text:var(--es-tinte);
  --es-seg-text-light:var(--es-grau); --es-seg-border:var(--es-linie);
  --es-seg-radius:14px;

  --es-niu-font:var(--es-sans);
  --es-niu-blue:var(--es-stvo);     --es-niu-blue-dark:var(--es-stvo-dunkel);
  --es-niu-green:var(--es-gruen);   --es-niu-green-dark:#0d5b3b;
  --es-niu-hero-dark:var(--es-asphalt); --es-niu-hero-mid:var(--es-blech);
  --es-niu-light:var(--es-papier);  --es-niu-text:var(--es-tinte);
  --es-niu-text-light:var(--es-grau); --es-niu-border:var(--es-linie);
  --es-niu-radius:14px;

  --es-akku-font:var(--es-sans);
  --es-akku-blue:var(--es-stvo);    --es-akku-blue-dark:var(--es-stvo-dunkel);
  --es-akku-green:var(--es-gruen);  --es-akku-green-dark:#0d5b3b;
  --es-akku-hero-dark:var(--es-asphalt); --es-akku-hero-mid:var(--es-blech);
  --es-akku-light:var(--es-papier); --es-akku-text:var(--es-tinte);
  --es-akku-text-light:var(--es-grau); --es-akku-border:var(--es-linie);
  --es-akku-radius:14px;

  --es-vers-font:var(--es-sans);
  --es-vers-primary:var(--es-stvo); --es-vers-primary-dark:var(--es-stvo-dunkel);
  --es-vers-secondary:var(--es-gruen); --es-vers-text-dark:var(--es-tinte);
  --es-vers-text-medium:var(--es-grau); --es-vers-bg-light:var(--es-papier);
  --es-vers-border:var(--es-linie);

  --es-repar-accent:var(--es-stvo); --es-repar-accent-hover:#2166a8;
  --es-repar-dark:var(--es-asphalt); --es-repar-dark2:var(--es-blech);
  --es-repar-bg-light:var(--es-papier);
  --es-repar-text:#e7eaee; --es-repar-text-muted:#a9b1bb;

  --es-ink:var(--es-asphalt);       --es-ink-soft:var(--es-blech);
  --es-text:var(--es-tinte);        --es-muted:var(--es-grau);
  --es-line:var(--es-linie);        --es-bg:var(--es-papier);
  --es-blue:var(--es-stvo);         --es-blue-dark:var(--es-stvo-dunkel);
  --es-green:var(--es-gruen);       --es-green-dark:#0d5b3b;
  --es-amber:var(--es-gelb);        --es-radius:14px;
}

/* --- Grundschrift und Überschriften --------------------------------------- */
body{font-family:var(--es-sans);color:var(--es-tinte);background:var(--es-papier)}
.entry-content h2,.entry-content h3,.entry-content h4,
h1,h2,h3,h4,
.entry-title,.page-title,
[class*="-hero-title"],[class*="-title"],[class*="-heading"],[class*="-section-title"]{
  font-family:var(--es-display);
  font-variation-settings:"wdth" 86,"wght" 740;
  letter-spacing:-.012em;line-height:1.12;text-wrap:balance;
}
h1,.page-title,[class*="-hero-title"]{font-variation-settings:"wdth" 84,"wght" 780;text-transform:uppercase}
p,li,dd,dt,td,th{font-family:var(--es-sans)}

/* --- Browser-Flächen: gehören zum Entwurf, nicht dem Browser --------------- */
::selection{background:var(--es-gelb);color:var(--es-asphalt)}
:root{caret-color:var(--es-gelb-tief);accent-color:var(--es-stvo)}
html{scrollbar-color:var(--es-blech) var(--es-beton)}
::-webkit-scrollbar{width:13px;height:13px}
::-webkit-scrollbar-track{background:var(--es-beton)}
::-webkit-scrollbar-thumb{background:var(--es-blech);border:3px solid var(--es-beton);border-radius:8px}
:where(a,button,summary,input,select):focus-visible{outline:3px solid var(--es-stvo);outline-offset:3px;border-radius:4px}
.entry-content li::marker{color:var(--es-gelb-tief)}
a{text-underline-offset:.18em;text-decoration-thickness:from-font}

/* --- Die Fahrbahn: das Wiedererkennungszeichen, auf jeder Seite ------------
   Rein aus CSS, damit dafür kein Hook-Render nötig ist. Der fahrende Roller
   bleibt der Startseite vorbehalten — ein Signature-Element wirkt nur, wenn
   es nicht überall zappelt. */
.site-header{position:relative}
.site-header::after{
  content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;z-index:2;
  background:linear-gradient(180deg,#3a4048 0 2px,#2b3037 2px 5px,#1b1f24 5px 100%);
  pointer-events:none;
}
.site-header::before{
  content:"";position:absolute;left:0;right:0;bottom:-11px;height:4px;z-index:3;
  background:repeating-linear-gradient(90deg,var(--es-gelb) 0 34px,transparent 34px 108px);
  opacity:.9;pointer-events:none;
}
.site-content{margin-top:14px}
/* Auf der Startseite bringt der Inhalt sein eigenes, hohes Band mit Roller mit. */
body.home .site-header::after,body.home .site-header::before{display:none}
body.home .site-content{margin-top:0}

/* --- Navigation und Untermenüs -------------------------------------------- */
.main-navigation .main-nav ul li a{font-family:var(--es-sans);font-weight:600;letter-spacing:.02em}
/* ★ Das Untermenü muss ÜBER dem Fahrbahnband liegen. Ohne z-index öffnet es
   zwar (opacity 1, 177 px hoch), verschwindet aber hinter dem Band — am
   14.08.2026 genau so gemessen. */
.main-navigation{position:relative;z-index:40}
.main-navigation .main-nav ul ul{
  z-index:50;
  background:var(--es-blech);border-radius:0 0 12px 12px;
  box-shadow:0 2px 4px rgba(16,20,26,.16),0 26px 50px -20px rgba(16,20,26,.5);
  padding:.35rem;min-width:16rem;
}
.main-navigation .main-nav ul ul li a{
  color:#cdd3da;border-radius:8px;padding:.7rem .85rem;line-height:1.3;
  transition:background .18s ease,color .18s ease;
}
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li.current-menu-item>a{background:#31363f;color:#fff}
.main-navigation .menu-item-has-children>a .dropdown-menu-toggle{color:var(--es-gelb)}
.main-navigation .main-nav>ul>li>a{position:relative}
/* Der aktive Punkt ist im Theme schon als Pille markiert — die gelbe Marke
   liegt deshalb tief und dünn, sonst schneidet sie durch die Schrift. */
.main-navigation .main-nav>ul>li>a:hover::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.28rem;height:2px;background:var(--es-gelb);
}

/* --- Kategorieseiten: Karten in der neuen Welt ----------------------------- */
/* Der Hub-Kopf bringt seinen eigenen hellen Kasten mit — nur lesbar machen,
   nicht umfärben. Weiße Schrift auf Creme war der erste Versuch und falsch. */
.archive .page-title,.archive .page-header h1{
  color:var(--es-tinte);font-size:clamp(1.9rem,1.2rem+2.4vw,3rem);
}
.archive .page-header .taxonomy-description a{color:var(--es-stvo-dunkel);font-weight:600}

.archive .site-main>article,.blog .site-main>article{
  background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,26,.08),0 12px 28px -14px rgba(16,20,26,.28);
  transition:transform .2s cubic-bezier(.16,.84,.3,1),box-shadow .2s ease;
}
.archive .site-main>article:hover,.blog .site-main>article:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(16,20,26,.12),0 22px 44px -18px rgba(16,20,26,.4);
}
.archive .entry-title,.blog .entry-title{font-size:1.25rem;line-height:1.2}
.archive .entry-title a,.blog .entry-title a{color:var(--es-tinte);text-decoration:none}
.archive .entry-title a:hover,.blog .entry-title a:hover{color:var(--es-stvo)}
.archive .entry-meta,.blog .entry-meta{
  font-size:.8125rem;letter-spacing:.04em;color:var(--es-grau);
}
.archive .entry-summary,.blog .entry-summary{color:var(--es-grau);max-width:640px}
.archive .read-more,.blog .read-more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;
  font-weight:700;color:var(--es-stvo);text-decoration:none;
}
.archive .read-more::after,.blog .read-more::after{content:"→";transition:transform .2s cubic-bezier(.16,.84,.3,1)}
.archive .read-more:hover::after,.blog .read-more:hover::after{transform:translateX(4px)}
.archive .post-image img,.blog .post-image img{aspect-ratio:16/9;object-fit:cover;width:100%}
.archive .page-numbers{border-radius:8px}
.archive .page-numbers.current{background:var(--es-asphalt);color:#fff}

/* --- Beitragsseiten: die wiederkehrenden Bausteine ------------------------- */
[class$="-hero-answer"],[class$="-answer-first"],[class$="-answer-text"],[class$="answer-box"]{
  border-radius:14px;
}
.entry-content table{font-variant-numeric:tabular-nums}
.entry-content th{font-family:var(--es-sans);letter-spacing:.06em;text-transform:uppercase;font-size:.75rem}
.es-quellen{font-size:.875rem;color:var(--es-grau)}

/* --- Fuß ------------------------------------------------------------------ */
.es-site-footer,.site-footer{background:var(--es-asphalt)}
.es-site-footer a:hover{color:var(--es-gelb)}
.es-site-footer-heading{font-family:var(--es-display);font-variation-settings:"wdth" 86,"wght" 720;
  letter-spacing:.02em;text-transform:uppercase;font-size:.8125rem}

@media (prefers-reduced-motion:reduce){
  .archive .site-main>article,.blog .site-main>article,
  .archive .read-more::after,.blog .read-more::after{transition:none}
  .archive .site-main>article:hover,.blog .site-main>article:hover{transform:none}
}

/* --- Zeilenbreite: die wichtigste Layoutregel des Hauses -------------------
   Der Fließtext der Beiträge lief mit ~90 Zeichen je Zeile. 620–680 px sind
   der Zielkorridor; der Container bleibt breit, nur die Zeile wird gebunden. */
.single .entry-content p,
.single .entry-content li,
.page:not(.home) .entry-content p,
.archive .entry-summary{max-width:580px}
/* ⚠ Ausnahmen sparsam: die Karten der Beiträge enthalten den Fließtext selbst.
   Erst standen `[class*="-card"] p` und `[class*="-box"] p` hier — damit lief der
   Text wieder auf 115 Zeichen. Nur echte Tabellen- und Rasterzellen dürfen breit. */
.single .entry-content table p,.single .entry-content td p,
.single .entry-content th p,.single .entry-content [class*="-spec"] td{max-width:none}
.single .entry-content li{max-width:600px}

/* --- Karten in Karten vermeiden ------------------------------------------- */
.archive .site-main>article .post-image{box-shadow:none;border-radius:0}
.archive .site-main>article .post-image img{border-radius:10px}

/* --- Zeilenhöhe der Kartentitel ------------------------------------------- */
.archive .entry-title,.blog .entry-title{line-height:1.22}

/* ============================================================================
   Sidebar der Beiträge — eine Gestalt für alle Seitenfamilien
   Frank, 14.08.2026: „eine Sidebar, wo man auch technische Daten reinschreiben
   kann, ist sehr übersichtlich."
   Die Klassen heißen je Familie anders (es-alter-…, es-seg-…, es-niu-… ),
   deshalb wird über das Namensende gegriffen. Wer eine neue Familie anlegt,
   nennt ihre Sidebar ebenso `es-<fam>-sidebar…` — dann gilt das hier sofort.
   ============================================================================ */
.entry-content [class$="-sidebar"]{
  position:sticky;top:24px;align-self:start;display:grid;gap:1.1rem;
}
/* Ist die Sidebar höher als das Fenster, setzt es-sidebar.js einen NEGATIVEN
   top-Wert per style-Attribut: sie scrollt dann erst mit und bleibt stehen,
   sobald ihr unteres Ende den Fensterboden erreicht. */
.entry-content [class$="-sidebar"][data-tall]{bottom:auto}
.entry-content [class$="-sidebar-card"]{
  background:#fff;border:1px solid var(--es-linie);border-radius:14px;
  padding:1.25rem 1.35rem 1.35rem;margin:0;
  box-shadow:0 1px 2px rgba(16,20,26,.06);
}
.entry-content [class$="-sidebar-card"] h3{
  font-family:var(--es-display);font-variation-settings:"wdth" 86,"wght" 740;
  font-size:1.0625rem;letter-spacing:.02em;text-transform:uppercase;
  margin:0 0 .35rem;padding-bottom:.6rem;border-bottom:2px solid var(--es-asphalt);
  line-height:1.2;
}
.entry-content [class$="-sidebar-item"]{
  display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;
  padding:.6rem 0;border-top:1px solid var(--es-linie);
}
.entry-content [class$="-sidebar-item"]:first-of-type{border-top:0}
.entry-content [class$="-sidebar-label"]{
  color:var(--es-grau);font-size:.9375rem;flex:0 1 auto;max-width:58%;
  hyphens:auto;overflow-wrap:normal;
}
/* Lange Wörter wie „Versicherungspflicht" brachen sonst mitten im Wort um;
   bei sehr langen Labels rutscht der Wert stattdessen in die nächste Zeile. */
.entry-content [class$="-sidebar-item"]{flex-wrap:wrap;row-gap:.15rem}
.entry-content [class$="-sidebar-value"]{margin-left:auto}
.entry-content [class$="-sidebar-value"]{
  font-weight:700;text-align:right;font-variant-numeric:tabular-nums;
}
.entry-content [class$="-sidebar-link"]{
  display:block;padding:.6rem 0;border-top:1px solid var(--es-linie);
  color:var(--es-tinte);text-decoration:none;font-weight:600;
  transition:color .18s ease,padding-left .18s ease;
}
.entry-content [class$="-sidebar-link"]:first-of-type{border-top:0}
.entry-content [class$="-sidebar-link"]:hover{color:var(--es-stvo)}
.entry-content [class$="-sidebar-link"]::before{content:"→ ";color:var(--es-gelb-tief)}

/* Unter 1024 px rutscht die Sidebar unter den Inhalt — nie danebenquetschen. */
@media (max-width:1024px){
  .entry-content [class$="-sidebar"]{position:static;grid-template-columns:1fr}
}
@media (min-width:700px) and (max-width:1024px){
  .entry-content [class$="-sidebar"]{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .entry-content [class$="-sidebar-link"]{transition:none}
}

/* Akzentkante auf runder Ecke: entstand beim Drehen der Seitenkanten nach oben.
   Auf gerundeten Kästen trägt stattdessen ein Hintergrundton. */
.entry-content [class$="-answer-box"],.entry-content [class$="-highlight"],
.entry-content [class$="-warning"],.entry-content [class$="-fact-note"]{
  border-top:0;background-color:#fffdf3;
}
/* Der Vorspann im Hero steht auf dem Hero-Verlauf — dort KEIN eigener Ton,
   sonst schwimmt ein cremefarbener Block im Farbverlauf. */
.entry-content [class$="-hero-answer"],.entry-content [class$="-answer-first"]{
  border-top:0;background-color:transparent;
}
.entry-content [class$="-warning"]{background-color:#fff6f5}

/* --- Fuß: Kontrast und Zeilenbreite ---------------------------------------
   Der Fußtext stand auf rgba(255,255,255,.82) über Asphalt — 3,3:1, also unter
   AA. Und er lief über die volle Breite (1440 px, ~105 Zeichen). */
.es-site-footer,.es-site-footer p,.es-site-footer li,.site-info,.copyright-bar{
  color:#c9d0d8;
}
.es-site-footer p,.es-site-footer li,.site-info p,.copyright-bar p{max-width:560px}
.es-site-footer a{color:#e3e8ee}

/* --- Tabellenrahmen: der Rahmen sitzt am Wrapper, die Tabelle klebt daran --- */
.entry-content [class$="table-wrap"]{border:0;padding:0;background:none;overflow-x:auto}
.entry-content [class$="table-wrap"] table{border:1px solid var(--es-linie);border-radius:12px;overflow:hidden}

/* --- Archiv: eine Karte, nicht zwei ---------------------------------------
   GeneratePress legt in jeden <article> noch ein .inside-article mit eigenem
   Hintergrund und Schatten. Zusammen mit unserer Karte ergibt das „Karte in
   Karte". Die äußere trägt die Gestalt, die innere nur den Abstand. */
.archive .site-main>article>.inside-article,
.blog .site-main>article>.inside-article{
  background:none;box-shadow:none;border:0;border-radius:0;padding:1.15rem 1.25rem 1.3rem;
}
.archive .site-main article .entry-title,.blog .site-main article .entry-title{line-height:1.36}
.archive .page-header p,.archive .page-header strong,.archive .taxonomy-description p,
.archive .taxonomy-description strong{max-width:600px;display:inline-block}

/* --- Text auf farbigem Grund: immer hell ----------------------------------
   Nach dem Umhängen der Palette saß dunkle Schrift auf StVO-Blau (2,5:1).
   Marken, Pillen und Tags auf gesättigtem Grund tragen weiße Schrift. */
/* Marken auf gesättigtem Grund: weiße Schrift. Die Kategoriemarke stand mit
   #15181c auf StVO-Blau (2,5:1). */
.entry-content [class*="-badge--cat"],.entry-content [class*="-badge-cat"],
.entry-content [class*="-table-tag"],.entry-content [class*="-cta-date"]{color:#fff}
.entry-content [class*="-badge"],.entry-content [class*="-tag"]{line-height:1.35}

/* Der Fußtext sitzt in .inside-site-info über dem Asphaltband — dort greift die
   Farbe des Elternteils nicht, deshalb hier direkt. */
.site-info,.inside-site-info,.inside-site-info p,.copyright-bar,.copyright-bar p{color:#d2d8df}
.site-footer,.site-info{background:var(--es-asphalt)}

/* --- Karte in Karte: die innere trägt keinen eigenen Schatten -------------- */
.entry-content [class*="-card"] [class*="-card"],
.entry-content [class*="-box"] [class*="-card"],
.entry-content [class*="-card"] [class*="-box"]{box-shadow:none}

/* --- Text auf dunklen Flächen: hell, ohne Ausnahme ------------------------
   Nach dem Umhängen der Palette blieben Stellen, an denen Farbe und Grund in
   verschiedenen Regeln stehen — dort half die zentrale Umrechnung nicht.
   Gemessen am 14.08.2026: #5f6874 auf #23272e (2,7:1), #0b57a4 auf #23272e
   (2,1:1) und sogar #0b57a4 auf #0b57a4 (1,0:1 — unsichtbar). */
.entry-content [class*="-badge--cat"],.entry-content [class*="-badge-cat"],
.entry-content [class*="-badge--dark"],.entry-content [class*="-tag--blue"]{color:#fff}
.entry-content [class*="-dark"] :where(p,li,span,strong,a,dt,dd,td,th),
.entry-content [class*="-hero-dark"] :where(p,li,span,strong,a),
.entry-content [class*="-cta"] :where(p,li,span,strong,a){color:#e7eaee}
.entry-content [class*="-dark"] a,.entry-content [class*="-cta"] a{color:var(--es-gelb)}

/* --- Breite Tabellen: erst enger setzen, dann erst scrollen ----------------
   Gemessen 14.08.2026: die Anbieter-Tabelle auf /ratgeber/e-scooter-versicherung-2/
   brauchte 824 px in einer 612 px breiten Spalte — sie war rechts abgeschnitten.
   Ursache war das Layout mit max-width 1000 px (Hauswert: 1200). Zusätzlich
   sitzen Zellen mit 6 Spalten jetzt enger. */
.single .entry-content table{table-layout:auto}
.single .entry-content table :where(td,th){padding:.55rem .6rem;font-size:.9375rem;hyphens:auto}
/* Vergleichstabellen mit vielen Spalten dürfen enger setzen, bevor gescrollt wird. */
.single .entry-content table:has(tr > :nth-child(5)) :where(td,th){padding:.5rem .5rem;font-size:.875rem}
.single .entry-content table:has(tr > :nth-child(5)) :where(td,th):first-child{padding-left:.65rem}
.single .entry-content [class*="table-wrap"]{
  overflow-x:auto;overscroll-behavior-x:contain;
  /* Schatten am Rand zeigt, dass seitlich noch etwas steht */
  background:
    linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left / 28px 100% no-repeat,
    linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) right / 28px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%,rgba(16,20,26,.16),transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%,rgba(16,20,26,.16),transparent) right / 12px 100% no-repeat;
  background-attachment:local,local,scroll,scroll;
}