/* Alap stílusok */
body{margin:0;background:#F4F6F8}
a{color:#22486F}a:hover{color:#183552}
input,select,textarea,button{font:inherit}

html{scroll-behavior:smooth}
img{max-width:100%}
.has-schematic{position:relative;overflow:hidden}
.has-schematic::before{content:"";position:absolute;inset:0;background:url("https://hidraulikatapegyseg.hu/wp-content/uploads/2023/08/3509_resize.png") no-repeat right -40px center/720px auto;filter:invert(1);mix-blend-mode:screen;opacity:.08;pointer-events:none}
.has-schematic>*{position:relative}
.ph{border:2px dashed #9AA6B2}
:focus-visible{outline:3px solid #E0A23A;outline-offset:3px}
#tapegysegek button{min-width:0}
@media (min-width:1000px){aside[aria-label="Összesítő"],aside[aria-label="Becsült eredmény"]{position:sticky;top:16px;align-self:flex-start;max-height:calc(100vh - 32px);overflow:auto}}
#tapegysegek button span{overflow-wrap:anywhere;hyphens:auto}
@media (max-width:700px){
  h1{font-size:38px!important;line-height:1.08!important}
  h2{font-size:30px!important}
  #tapegysegek button span[style*="font-size: 22px"]{font-size:18px!important}
  [style*="padding: 48px 44px"],[style*="padding: 44px 44px"]{padding:28px 20px!important}
}

body{font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;color:#1F2A36;-webkit-font-smoothing:antialiased}
#app h1,#app h2,#app h3{text-wrap:balance}
#tapegysegek button{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
#tapegysegek button:hover{border-color:#22486F!important}
@media (max-width:700px){#tapegysegek div[style*="minmax(240px"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}#tapegysegek button span[style*="height: 180px"]{height:120px!important}}
#app p{text-wrap:pretty}
#app a{color:#22486F}
#app a[style*="font-weight: 600"]:not([style*="background"]):not([style*="border"]){text-decoration:none;border-bottom:2px solid #E0A23A;padding-bottom:1px}
#app a[style*="font-weight: 600"]:not([style*="background"]):not([style*="border"]):hover{color:#183552;border-bottom-color:#183552}
#app a[style*="background: #E0A23A"]:hover{background:#EDB356!important}
#app a[style*="background: #22486F"]:hover,#app button[style*="background: #22486F"]:hover{background:#183552!important}
#app a[style*="padding"][style*="font-weight: 600"][style*="background"],#app a[style*="border: 2px solid"],#app button{border-radius:4px}
#app fieldset button,#app details,#app aside,#app figure,#app section,#app [style*="border: 1px solid #D9E0E7"]{border-radius:6px}
#app img{border-radius:6px}
#app header img,#app a img[alt="Hidra Kft."]{border-radius:0}
#app details summary{list-style:none;color:#22486F;display:flex;justify-content:space-between;gap:24px}
#app details summary::-webkit-details-marker{display:none}
#app details summary::after{content:"";flex:0 0 14px;width:14px;height:14px;margin-top:5px;background:linear-gradient(#E0A23A,#E0A23A) center/100% 2px no-repeat,linear-gradient(#E0A23A,#E0A23A) center/2px 100% no-repeat;transition:transform .2s}
#app details[open] summary::after{transform:rotate(45deg)}
#app input:focus,#app textarea:focus,#app select:focus{outline:3px solid #E0A23A;outline-offset:1px}
@media (prefers-reduced-motion:no-preference){#app a,#app button{transition:background-color .2s,border-color .2s,color .2s}}