/* LP-TOP-LEVEL-GLOSS-V1 — shared top-level polish only (Home, Strom, Gas, Internet, Mietwagen, Ratgeber, Service) — 2026-09-19 */
:root{
  --lp-gloss-navy:#09265a;
  --lp-gloss-navy-2:#0b3765;
  --lp-gloss-teal:#0aa7ae;
  --lp-gloss-green:#22c55e;
  --lp-gloss-purple:#7257ff;
}

/* Header brand: text must never disappear on the white portal header. */
.sh .logo{
  color:var(--lp-gloss-navy)!important;
  opacity:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-shadow:none!important;
  transition:color .2s ease,transform .2s ease!important;
}
html body .sh .logo:hover,html body .sh .logo:focus-visible{color:var(--lp-gloss-teal)!important}
/* Section-aware brand hover: mirror the active portal color on each top-level vertical. */
html body .sh:has(a.active[href="/strom/"]) .logo:hover,html body .sh:has(a.active[href="/strom/"]) .logo:focus-visible{color:#08a7ae!important}
html body .sh:has(a.active[href="/gas/"]) .logo:hover,html body .sh:has(a.active[href="/gas/"]) .logo:focus-visible{color:#147fe3!important}
html body .sh:has(a.active[href="/internet/"]) .logo:hover,html body .sh:has(a.active[href="/internet/"]) .logo:focus-visible{color:#6d4aff!important}
html body .sh:has(a.active[href="/mietwagen/"]) .logo:hover,html body .sh:has(a.active[href="/mietwagen/"]) .logo:focus-visible{color:#f28a00!important}
html body .sh:has(a.active[href="/ratgeber/"]) .logo:hover,html body .sh:has(a.active[href="/ratgeber/"]) .logo:focus-visible{color:#0799a1!important}
html body .sh:has(a.active[href="/service/"]) .logo:hover,html body .sh:has(a.active[href="/service/"]) .logo:focus-visible{color:#0aa7ae!important}
.sh .logo img{
  box-shadow:0 5px 14px rgba(8,167,174,.14)!important;
  transition:transform .22s ease,box-shadow .22s ease!important;
}
@media(hover:hover) and (pointer:fine){
  .sh .logo:hover img{transform:translateY(-1px) scale(1.035);box-shadow:0 8px 20px rgba(8,167,174,.20)!important}
}

/* Service: browser-local recent searches are inserted immediately before .main.
   The negative hero overlap is useful only when no history strip exists. */
body.lp-service-polished #lp-recent-searches + .main{margin-top:0!important}
body.lp-service-polished #lp-recent-searches{
  position:relative;z-index:5;
  margin-top:14px!important;margin-bottom:14px!important;
  box-shadow:0 12px 32px rgba(17,46,78,.075)!important;
}

/* Old dark comparison strips: retain contrast, add depth, light and modern sheen. */
.ob{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% -35%,rgba(59,217,224,.32) 0,rgba(59,217,224,0) 31%),
    radial-gradient(circle at 88% 145%,rgba(114,87,255,.22) 0,rgba(114,87,255,0) 34%),
    linear-gradient(118deg,#071b3d 0%,#0a315d 48%,#0a5268 100%)!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 44px rgba(9,38,90,.10)!important;
}
.ob:before{
  content:"";position:absolute;pointer-events:none;
  width:420px;height:170px;left:38%;top:-150px;border-radius:50%;
  background:rgba(255,255,255,.09);filter:blur(4px);transform:rotate(-9deg);
}
.ob:after{
  content:"";position:absolute;pointer-events:none;
  width:190px;height:190px;right:4%;top:-118px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 42px rgba(255,255,255,.025),0 0 0 84px rgba(255,255,255,.014);
}
.ob .oi{position:relative!important;z-index:1!important}
.ob .oi h2{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.08)!important}
.ob .oi p{color:rgba(255,255,255,.76)!important}
.ob .of .field label{color:rgba(255,255,255,.96)!important}
.ob .of .field input{
  background:rgba(255,255,255,.97)!important;color:#16335d!important;
  border:1px solid rgba(255,255,255,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 7px 20px rgba(0,0,0,.10)!important;
}
.ob .of .field input::placeholder{color:#9aaabd!important}

/* Gloss on the important action buttons without making every control look identical. */
.lp-vw-entry-cta,.hero-plz-btn,.bo,.lp2-btn--primary,.svc-compass-link,.tool-link{
  position:relative!important;overflow:hidden!important;isolation:isolate;
}
.lp-vw-entry-cta,.bo{
  background:linear-gradient(180deg,#35dc72 0%,#22c55e 56%,#1db954 100%)!important;
  color:#09265a!important;
  border:1px solid rgba(255,255,255,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 10px 26px rgba(34,197,94,.25)!important;
}
.hero-plz-btn,.lp2-btn--primary{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 27px rgba(8,167,174,.23)!important;
}
.lp-vw-entry-cta:after,.hero-plz-btn:after,.bo:after,.lp2-btn--primary:after,.tool-link:after{
  content:"";position:absolute;pointer-events:none;z-index:2;
  top:-90%;left:-38%;width:30%;height:280%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.42),rgba(255,255,255,0));
  transform:skewX(-22deg) translateX(-260%);transition:transform .62s cubic-bezier(.2,.7,.2,1);
}
@media(hover:hover) and (pointer:fine){
  .lp-vw-entry-cta:hover:after,.hero-plz-btn:hover:after,.bo:hover:after,.lp2-btn--primary:hover:after,.tool-link:hover:after{transform:skewX(-22deg) translateX(650%)}
  .lp-vw-entry-cta:hover,.bo:hover{transform:translateY(-2px)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 14px 30px rgba(34,197,94,.31)!important}
}

/* Shared card micro-interactions: subtle 3D response, not a uniform template. */
@media(hover:hover) and (pointer:fine){
  .lp2-compare-card,.lp2-tool,.strom-topic-card,.gas-topic-card,.internet-topic-card,.mietwagen-topic-card,.rg-cat,.tool-card,.svc-compass-link{
    transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease!important;
  }
  .lp2-compare-card:hover,.lp2-tool:hover,.strom-topic-card:hover,.gas-topic-card:hover,.internet-topic-card:hover,.mietwagen-topic-card:hover,.rg-cat:hover,.tool-card:hover,.svc-compass-link:hover{
    transform:translateY(-4px)!important;
    box-shadow:0 20px 46px rgba(18,48,79,.12)!important;
  }
}

/* Footer: preserve the trustworthy dark anchor, but give it the same modern depth as the rebuilt pages. */
html body footer.sf[data-lp-footer-v33="1"]{
  position:relative!important;overflow:hidden!important;
  background:
    radial-gradient(circle at 10% -30%,rgba(10,167,174,.30) 0,rgba(10,167,174,0) 31%),
    radial-gradient(circle at 92% -20%,rgba(114,87,255,.20) 0,rgba(114,87,255,0) 28%),
    linear-gradient(125deg,#061832 0%,#0b2a50 55%,#0b4156 100%)!important;
  border-top:1px solid rgba(255,255,255,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
}
html body footer.sf[data-lp-footer-v33="1"]:before{
  content:"";position:absolute;pointer-events:none;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(75,225,223,.62),rgba(114,87,255,.42),transparent);
}
html body footer.sf[data-lp-footer-v33="1"]:after{
  content:"";position:absolute;pointer-events:none;right:-80px;top:-150px;width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 60px rgba(255,255,255,.018),0 0 0 120px rgba(255,255,255,.012);
}
html body footer.sf .fi2,html body footer.sf .fg,html body footer.sf .flegal{position:relative;z-index:1}
html body footer.sf a{transition:color .18s ease,transform .18s ease,opacity .18s ease!important}
@media(hover:hover) and (pointer:fine){html body footer.sf a:hover{color:#fff!important;transform:translateX(2px)}}

/* Keep motion respectful and stable for users who prefer reduced movement. */
@media(prefers-reduced-motion:reduce){
  .sh .logo,.sh .logo img,.lp-vw-entry-cta,.hero-plz-btn,.bo,.lp2-btn--primary,.tool-link,.lp2-compare-card,.lp2-tool,.strom-topic-card,.gas-topic-card,.internet-topic-card,.mietwagen-topic-card,.rg-cat,.tool-card,.svc-compass-link,.sf a{transition:none!important;transform:none!important}
  .lp-vw-entry-cta:after,.hero-plz-btn:after,.bo:after,.lp2-btn--primary:after,.tool-link:after{display:none!important}
}

@media(max-width:700px){
  .sh .logo{font-size:15px!important}
  .sh .logo img{margin-right:8px!important}
  .ob:before{left:20%;width:300px}.ob:after{right:-70px}
}