/* ===== home.css ===== */ :root{ --green:#0B3912; --green-lite:#16642A; --teal:#045767; --teal-med:#16787E; --dark-1:#021305; --dark-2:#06230B; --gray-1:#777777; --gray-2:#cccccc; --cream:#F7F6F3; --cream-2:#EEECE6; --warm:#F1E9DB; --white:#ffffff; --serif:'Cinzel',Georgia,serif; --sans:'Raleway',system-ui,sans-serif; --maxw:1180px; --r:18px; --shadow:0 20px 60px -20px rgba(4,87,103,.28); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--dark-2);background:var(--cream);line-height:1.7;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.2;color:var(--green)} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.72rem;color:var(--teal-med)} .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem;padding:.85em 1.7em;border-radius:100px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;cursor:pointer;border:none} .btn-primary{background:var(--teal);color:var(--white);box-shadow:0 8px 24px -8px rgba(4,87,103,.6)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(4,87,103,.7);background:var(--teal-med)} .btn-ghost{background:transparent;color:var(--green);border:1.5px solid rgba(11,57,18,.3)} .btn-ghost:hover{background:var(--green);color:var(--white);border-color:var(--green);transform:translateY(-3px)} /* ---- Nav ---- */ header{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s ease;padding:20px 0} header.scrolled{background:rgba(247,246,243,.85);backdrop-filter:blur(14px);padding:12px 0;box-shadow:0 4px 30px -12px rgba(0,0,0,.1)} .nav{display:flex;align-items:center;justify-content:space-between} .logo{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--green)} .logo img{height:52px;width:auto;display:block;transition:height .35s ease} header.scrolled .logo img{height:42px} .logo .dot{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-med),var(--green));box-shadow:0 4px 14px -4px var(--teal);position:relative;flex:none} .logo .dot::after{content:"";position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,255,255,.55)} .nav-links{display:flex;gap:2rem;align-items:center;font-weight:500;font-size:.92rem} .nav-links a{position:relative;padding:4px 0;color:var(--dark-2);transition:color .2s} .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal-med);transition:width .3s} .nav-links a:hover{color:var(--green)}.nav-links a:hover::after{width:100%} .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none} .burger span{width:26px;height:2px;background:var(--green);transition:.3s} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:.42em;background:transparent;border:1.5px solid var(--gray-2);border-radius:100px;padding:.4em .85em;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--dark-2);cursor:pointer;transition:.2s} .lang-btn:hover{color:var(--green);border-color:var(--teal-med)} .lang-btn svg{opacity:.8} .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:150px;background:var(--white);border-radius:12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.28);padding:6px;display:none;flex-direction:column;z-index:130} .lang.open .lang-menu{display:flex} .lang-menu a{padding:.55em .8em;border-radius:8px;font-size:.9rem;color:var(--dark-2);cursor:pointer} .lang-menu a::after{display:none} .lang-menu a:hover{background:var(--cream-2);color:var(--green)} .lang-menu a[aria-current="true"]{color:var(--green);font-weight:700;cursor:default} /* ---- Hero ---- */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding-top:80px;overflow:hidden} .hero-bg{position:absolute;inset:0;z-index:0;background: radial-gradient(ellipse 60% 50% at 75% 30%,rgba(255,255,255,.07),transparent 70%), radial-gradient(ellipse 50% 60% at 20% 80%,rgba(15,110,106,.35),transparent 70%), linear-gradient(160deg,#12706A 0%,#083B37 100%)} /* úszó baktériumok a hero hátterében — 5 morfológia, több irányból */ .bact{position:absolute;opacity:.2;will-change:transform;animation:travel var(--dur,54s) linear infinite;animation-delay:var(--del,0s)} .bact .wob{display:block;transform-origin:center;animation:wob var(--wob,4s) ease-in-out infinite alternate} .bact svg{display:block;width:100%;height:auto;overflow:visible} /* színek: alap = teal-med; .g = zöld; .t = teal */ .bact .b-body{fill:var(--teal-med)} .bact .b-stroke{stroke:var(--teal-med);fill:none;stroke-linecap:round;stroke-linejoin:round} .bact .b-fla{stroke:var(--teal-med);fill:none;stroke-linecap:round;opacity:.65;stroke-width:2.4} .bact .b-hi{fill:#fff;opacity:.3} .bact.g .b-body{fill:var(--green)}.bact.g .b-stroke,.bact.g .b-fla{stroke:var(--green)} .bact.t .b-body{fill:var(--teal)}.bact.t .b-stroke,.bact.t .b-fla{stroke:var(--teal)} @keyframes travel{from{transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--rot,0deg))}to{transform:translate(var(--tx,120vw),var(--ty,0)) rotate(var(--rot,0deg))}} @keyframes wob{from{transform:rotate(-7deg) translateY(-3px)}to{transform:rotate(7deg) translateY(3px)}} @media(prefers-reduced-motion:reduce){.bact,.bact .wob{animation:none!important}} /* floating particles */ .particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .particle{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(22,120,126,.9),rgba(11,57,18,.5));opacity:.35;animation:rise linear infinite} @keyframes rise{0%{transform:translateY(20px) scale(.6);opacity:0}12%{opacity:.4}100%{transform:translateY(-120px) scale(1.1);opacity:0}} /* shimmer on hero H1 */ .hero h1{background:linear-gradient(100deg,var(--green) 0%,var(--green) 40%,var(--teal-med) 50%,var(--green) 60%,var(--green) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 6s ease-in-out infinite} @keyframes shimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}} /* animated eyebrow dot */ .eyebrow.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--teal-med);margin-right:.6em;vertical-align:middle;animation:blink 2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(22,120,126,.5)} @keyframes blink{0%,100%{box-shadow:0 0 0 0 rgba(22,120,126,.5)}50%{box-shadow:0 0 0 6px rgba(22,120,126,0)}} /* section-head animated underline */ .section-head h2{position:relative} /* card tilt/glow */ .icard,.cap,.member,.news{will-change:transform} .tilt{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s} /* marquee band */ .marquee{overflow:hidden;background:linear-gradient(90deg,var(--green),var(--teal));padding:14px 0;white-space:nowrap} .marquee__track{display:inline-block;animation:marq 28s linear infinite} .marquee span{color:rgba(255,255,255,.92);font-family:var(--serif);font-size:1.05rem;margin:0 26px} .marquee span::after{content:"·";margin-left:26px;opacity:.5} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* scroll cue */ .scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:42px;border:2px solid rgba(11,57,18,.35);border-radius:14px;display:flex;justify-content:center;padding-top:7px} .scroll-cue::before{content:"";width:4px;height:8px;border-radius:4px;background:var(--teal-med);animation:cue 1.6s ease-in-out infinite} @keyframes cue{0%{opacity:0;transform:translateY(-4px)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translateY(10px)}} /* kapcsolati űrlap (webhook) */ .contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start} .contact-info h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:.3em 0 .5em} .contact-info p{color:var(--gray-1);margin-bottom:1.4em} .contact-info .ci{margin-bottom:16px;font-size:.95rem}.contact-info .ci strong{color:var(--green);display:block;font-family:var(--serif);margin-bottom:.2em} .contact-info .social{display:flex;gap:10px;margin-top:12px} .contact-info .social a{width:38px;height:38px;border-radius:50%;background:var(--cream-2);display:flex;align-items:center;justify-content:center;color:var(--green);font-weight:700;transition:.2s;text-decoration:none} .contact-info .social a:hover{background:var(--green);color:#fff;transform:translateY(-2px)} .cform{background:var(--white);border-radius:20px;padding:38px;box-shadow:0 18px 54px -30px rgba(4,87,103,.45)} .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fld{margin-bottom:16px} .fld label{display:block;font-size:.82rem;font-weight:600;color:var(--dark-2);margin-bottom:.3em} .fld input,.fld select,.fld textarea{width:100%;padding:.75em .9em;border:1.5px solid rgba(0,0,0,.1);border-radius:10px;font-family:var(--sans);font-size:.95rem;background:var(--cream);color:var(--dark-2);outline:none;transition:border .2s;line-height:1.5} .fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal-med)} .fld select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:auto;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7770' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85em center;background-size:15px;padding-right:2.5em} .fld textarea{resize:vertical;min-height:110px} .chk{display:flex;gap:.6em;align-items:flex-start;font-size:.85rem;color:var(--gray-1);margin:8px 0 18px} .chk input{width:16px;height:16px;flex:none;margin:.15em 0 0 0} .chk label{line-height:1.5} .form-status{margin-top:14px;font-size:.9rem;font-weight:600;min-height:1.2em} .form-status.ok{color:var(--green)}.form-status.err{color:#c0392b} @media(max-width:820px){.contact-wrap{grid-template-columns:1fr}.frow{grid-template-columns:1fr}} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;width:100%} .hero h1{font-size:clamp(2.4rem,5vw,4rem);margin:.4em 0 .3em;color:var(--green)} .hero .lead{font-size:1.2rem;color:var(--dark-2);max-width:36ch;margin-bottom:.5em} .hero .sub{font-family:var(--serif);font-size:1.05rem;color:var(--teal);margin-bottom:1.8em} .hero-cta{display:flex;gap:1rem;flex-wrap:wrap} /* sötét hero (#045767) + fehér szöveg, a vizsgálat oldal fejléc-stílusa */ .hero{background:linear-gradient(160deg,#12706A,#083B37);color:#fff} .hero .eyebrow{color:rgba(255,255,255,.75)} .hero h1{color:#fff;background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:#fff;animation:none} .hero .sub{font-family:var(--serif);font-size:1.3rem;color:rgba(255,255,255,.92);margin:0 0 .4em} .hero p{max-width:56ch;color:rgba(255,255,255,.85);margin:0 0 1.6em} .btn-p{background:var(--teal);color:#fff}.btn-p:hover{transform:translateY(-3px);background:var(--teal-med)} .btn-g{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}.btn-g:hover{background:#fff;color:var(--teal);transform:translateY(-3px)} .hero .btn-p{background:#12706A}.hero .btn-p:hover{background:#1A8A82;transform:translateY(-3px)} .hero .ring{border-color:rgba(255,255,255,.30)} .hero .ring.r2{border-color:rgba(255,255,255,.22)} .hero .ring.r3{border-color:rgba(255,255,255,.14)} .hero .node{box-shadow:0 0 0 4px rgba(255,255,255,.20),0 6px 14px -4px rgba(0,0,0,.45)} /* fejléc a sötét hero fölött: fehér logó+menü, görgetéskor visszavált */ #hdr .logo .lg-w{display:none} #hdr:not(.scrolled) .logo .lg-g{display:none} #hdr:not(.scrolled) .logo .lg-w{display:block} #hdr:not(.scrolled) .nav-links>a{color:#fff} #hdr:not(.scrolled) .nav-links>a::after{background:#fff} #hdr:not(.scrolled) .lang-btn{color:#fff;border-color:rgba(255,255,255,.55)} #hdr:not(.scrolled) .burger span{background:#fff} #hdr:not(.scrolled) .nav-links.open>a{color:var(--dark-2)}#hdr:not(.scrolled) .nav-links.open>a::after{background:var(--teal-med)}#hdr:not(.scrolled) .nav-links.open .lang-btn{color:var(--dark-2);border-color:var(--gray-2)}#hdr:not(.scrolled) .nav-links.open .lang-menu a{color:var(--dark-2)} .orbit{position:relative;aspect-ratio:1;max-width:420px;margin:0 auto;width:100%} .orbit .core{position:absolute;inset:28%;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--teal-med),var(--green) 70%);box-shadow:var(--shadow),inset 0 -10px 30px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:1.3rem;text-align:center;animation:pulse 5s ease-in-out infinite} @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} .ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(22,120,126,.35)} .ring.r2{inset:12%;border-color:rgba(11,57,18,.3)} .ring.r3{inset:24%;border-style:solid;border-color:rgba(4,87,103,.12)} .spin{animation:spin 26s linear infinite}.spin.rev{animation-direction:reverse;animation-duration:34s} @keyframes spin{to{transform:rotate(360deg)}} .node{position:absolute;width:16px;height:16px;border-radius:50%;background:var(--white);box-shadow:0 0 0 4px rgba(22,120,126,.25),0 6px 14px -4px var(--teal)} .node.n1{top:-8px;left:calc(50% - 8px)}.node.n2{right:-8px;top:calc(50% - 8px);background:var(--warm)}.node.n3{left:-8px;top:calc(50% - 8px);background:var(--warm)} /* ---- Sections ---- */ section{position:relative} .pad{padding:110px 0} .pad-sm{padding:80px 0} .center{text-align:center} .section-head{max-width:640px;margin:0 auto 60px} .section-head.left{margin-left:0} .section-head h2{font-size:clamp(1.9rem,3.5vw,2.8rem);margin:.3em 0} .section-head p{color:var(--gray-1);font-size:1.08rem} .bg-dark{background:linear-gradient(160deg,var(--dark-1),var(--dark-2));color:var(--cream-2)} .bg-dark h2,.bg-dark h3{color:var(--warm)} .bg-dark .section-head p{color:rgba(238,236,230,.7)} .bg-cream2{background:var(--cream-2)} .bg-warm{background:linear-gradient(160deg,#fbf7ef,#f3ece0)} /* reveal */ .reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* intro cards */ .intro-grid,.cap-grid,.team-grid{perspective:1000px} .icard,.cap,.member{transform-style:preserve-3d} .intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .icard{background:var(--white);border-radius:var(--r);padding:34px 30px;box-shadow:0 12px 40px -24px rgba(4,87,103,.35);border:1px solid rgba(11,57,18,.06);transition:transform .3s,box-shadow .3s} .icard:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(4,87,103,.4)} .icard .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--teal-med),var(--green));display:flex;align-items:center;justify-content:center;margin-bottom:18px} .icard h3{font-size:1.25rem;margin-bottom:.4em} .icard p{color:var(--gray-1);font-size:.97rem} /* application areas */ .app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .app{position:relative;border-radius:var(--r);padding:28px 24px;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:linear-gradient(160deg,#0E4A50,#08282D);color:#fff;transition:transform .35s} .app:hover{transform:translateY(-6px)} .app.has-img{background-image:linear-gradient(180deg,rgba(4,34,40,.15),rgba(4,34,40,.86) 82%),var(--img);background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s} .app.has-img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 22px 50px -24px rgba(4,87,103,.6)} .app::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(22,120,126,.5),transparent 60%);opacity:.7} .app.has-img::before{opacity:.28} .app .num{position:absolute;top:18px;right:22px;font-family:var(--serif);font-size:2.4rem;opacity:.18;z-index:1} .app .arrow{position:absolute;bottom:20px;right:20px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;line-height:1;z-index:2;background:rgba(255,255,255,.10);transition:.3s} .app:hover .arrow{background:#fff;color:var(--green);border-color:#fff;transform:translateX(3px)} .app h3,.app p{padding-right:48px} .app h3{color:#fff;font-size:1.15rem;z-index:1;position:relative} .app p{font-size:.9rem;color:rgba(255,255,255,.78);z-index:1;position:relative;margin-top:.3em} .app .soon{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(241,233,219,.2);color:var(--warm);padding:.25em .7em;border-radius:100px;margin-top:.8em;width:fit-content;z-index:1;position:relative} /* capsules */ .cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .cap{background:var(--white);border-radius:var(--r);padding:32px 28px;border-top:4px solid var(--teal-med);box-shadow:0 14px 44px -28px rgba(4,87,103,.4);transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column} .cap:hover{transform:translateY(-8px);box-shadow:0 28px 56px -28px rgba(4,87,103,.5)} .cap:nth-child(2n){border-top-color:var(--green)} .cap:nth-child(3n){border-top-color:var(--teal)} .cap .cap-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.6em} .cap h3{font-size:1.5rem} .cap .qty{font-size:.8rem;font-weight:600;color:var(--teal-med);background:var(--cream-2);padding:.3em .8em;border-radius:100px;white-space:nowrap} .cap ul{list-style:none;margin:.6em 0 1.4em;flex:1} .cap li{position:relative;padding-left:1.5em;margin-bottom:.7em;font-size:.94rem;color:var(--dark-2)} .cap li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal-med)} .cap .more{font-weight:600;color:var(--green);display:inline-flex;align-items:center;gap:.4em;transition:gap .25s} .cap .more:hover{gap:.75em} .disclaimer{max-width:820px;margin:44px auto 0;font-size:.85rem;color:var(--gray-1);font-style:italic;text-align:center;border-top:1px solid rgba(0,0,0,.08);padding-top:24px} /* book hub */ .books-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px} .book{position:relative;border-radius:var(--r);overflow:hidden;padding:40px 36px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;transition:transform .35s,box-shadow .35s;box-shadow:0 18px 50px -26px rgba(0,0,0,.5)} .book:hover{transform:translateY(-8px);box-shadow:0 30px 66px -26px rgba(0,0,0,.55)} .book.b1{background:linear-gradient(150deg,#1f5a4a,#0f3329)} .book.b2{background:linear-gradient(150deg,#0a5566,#053743)} .book.b3{background:linear-gradient(150deg,#5a4a1f,#332810)} .book.b4{background:linear-gradient(150deg,#cd191c,#700d0f)} .book.b5{background:linear-gradient(150deg,#12706A,#083B37)} .book{padding:42px 38px;min-height:280px} .book::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.06);top:-70px;right:-40px} .book .tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.78;position:relative} .book h2{color:#fff;font-size:1.9rem;margin:.4em 0 .3em;position:relative} .book .desc{font-size:.96rem;color:rgba(255,255,255,.85);max-width:40ch;position:relative} .book .meta{display:flex;gap:22px;margin-top:26px;position:relative} .book .meta .n{font-family:var(--serif);font-size:1.6rem;color:#fff;line-height:1} .book .meta .l{font-size:.78rem;color:rgba(255,255,255,.7)} .book .arrow{position:absolute;bottom:38px;right:38px;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:.3s;z-index:2}.book .soon{position:absolute;bottom:38px;right:38px;padding:.5em 1.15em;border-radius:100px;border:1.5px solid rgba(255,255,255,.5);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;z-index:2} .book:hover .arrow{background:#fff;color:#111;border-color:#fff;transform:translateX(4px)} .book .spine{position:absolute;top:0;left:0;bottom:0;width:6px;background:rgba(255,255,255,.35)} .book .b-tag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75} .book h3{color:#fff;font-size:1.7rem;margin:.5em 0 .3em} .book p{font-size:.94rem;color:rgba(255,255,255,.82);max-width:38ch} .book .b-meta{display:flex;align-items:center;gap:1em;margin-top:1.4em;font-size:.85rem;opacity:.85} .book .b-arrow{position:absolute;bottom:34px;right:36px;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:.3s} .book:hover .b-arrow{background:#fff;color:var(--dark-1);border-color:#fff} .cap .b-arrow{margin-top:auto;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(11,57,18,.35);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:1.15rem;transition:.3s;text-decoration:none} .cap:hover .b-arrow{background:var(--green);color:#fff;border-color:var(--green);transform:translateX(3px)} .news img.thumb{height:150px;width:100%;object-fit:cover;display:block} /* safety strip */ .safety{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center} .safety-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px} .stat{background:rgba(255,255,255,.05);border:1px solid rgba(241,233,219,.14);border-radius:14px;padding:26px} .stat .n{font-family:var(--serif);font-size:2.6rem;color:var(--warm);line-height:1} .stat .l{font-size:.88rem;color:rgba(238,236,230,.7);margin-top:.4em} /* team */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .member{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 12px 40px -26px rgba(4,87,103,.4);transition:transform .3s} .member:hover{transform:translateY(-6px)} .member .portrait{width:100%;height:320px;object-fit:cover;object-position:center 12%;display:block;background:linear-gradient(135deg,var(--teal-med),var(--green));transition:transform .5s} .member:hover .portrait{transform:scale(1.04)} .member .body{padding:22px 24px 26px} .member .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--teal-med),var(--green));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;margin-bottom:16px} .member h4{font-size:1.1rem;color:var(--green);margin-bottom:.15em} .member .role{font-size:.8rem;font-weight:600;color:var(--teal-med);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8em} .member p{font-size:.88rem;color:var(--gray-1)} /* news */ .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .news{background:var(--white);border-radius:var(--r);overflow:hidden;box-shadow:0 14px 44px -28px rgba(4,87,103,.4);transition:transform .3s} .news:hover{transform:translateY(-6px)} .news .thumb{height:150px;background:linear-gradient(135deg,var(--teal-med),var(--green));position:relative;overflow:hidden} .news:nth-child(2) .thumb{background:linear-gradient(135deg,var(--teal),var(--green-lite))} .news:nth-child(3) .thumb{background:linear-gradient(135deg,var(--green),var(--teal-med))} .news .thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%)} .news .body{padding:24px} .news .date{font-size:.78rem;color:var(--teal-med);font-weight:600} .news h4{font-size:1.1rem;margin:.4em 0;color:var(--green);line-height:1.3} .news p{font-size:.88rem;color:var(--gray-1)} /* CTA band */ .cta-band{background:linear-gradient(135deg,var(--teal),var(--green));border-radius:26px;padding:64px 48px;text-align:center;color:#fff;position:relative;overflow:hidden} .cta-band::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.08);top:-100px;right:-60px} .cta-band h2{color:#fff;font-size:clamp(1.8rem,3vw,2.6rem);position:relative} .cta-band p{max-width:50ch;margin:1em auto 1.8em;color:rgba(255,255,255,.9);position:relative} /* footer */ footer{background:var(--dark-1);color:rgba(238,236,230,.7);padding:70px 0 32px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} footer h5{color:var(--warm);font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2em} footer a{display:block;padding:.35em 0;font-size:.92rem;transition:color .2s} footer a:hover{color:var(--warm)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;text-align:center;font-size:.82rem;opacity:.6} /* progress bar */ .progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--teal-med),var(--green));z-index:200;width:0} @media(max-width:900px){ .hero-inner{grid-template-columns:1fr;gap:30px}.orbit{max-width:300px;order:-1}.hero{padding-bottom:64px} .intro-grid,.cap-grid,.news-grid{grid-template-columns:1fr} .app-grid{grid-template-columns:1fr 1fr}.books-grid{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr 1fr}.safety{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .nav-links{display:none}.burger{display:flex} .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:1.1rem;background:rgba(247,246,243,.98);backdrop-filter:blur(14px);padding:20px 24px 24px;box-shadow:0 16px 34px -16px rgba(0,0,0,.22);border-top:1px solid rgba(0,0,0,.06)} .nav-links.open .lang-menu{position:static;box-shadow:none;padding:4px 0 0 0;min-width:0} .nav-links.open .lang-btn{margin-bottom:.2em} .pad{padding:70px 0} } @media(max-width:520px){.app-grid,.team-grid,.foot-grid{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} /* kapszula-márkaszínek: felső szegély + kapszulanév */ .cap-grid .cap.c-find{border-top-color:#d59511}.cap-grid .cap.c-find h3{color:#c0860f} .cap-grid .cap.c-diff{border-top-color:#cd191c}.cap-grid .cap.c-diff h3{color:#cd191c} .cap-grid .cap.c-transfer{border-top-color:#0D7F82}.cap-grid .cap.c-transfer h3{color:#0D7F82} .cap-grid .cap.c-hosp{border-top-color:#1a4084}.cap-grid .cap.c-hosp h3{color:#1a4084} .cap-grid .cap.c-ultra{border-top-color:#ffd800}.cap-grid .cap.c-ultra h3{color:#a88f00} .cap-grid .cap.c-auto{border-top-color:#1f5a4a}.cap-grid .cap.c-auto h3{color:#1f5a4a} /*FORMUX*/.chk input[type=checkbox]{accent-color:var(--green);width:1.05em;height:1.05em;flex:none;margin-top:.15em;cursor:pointer}.chk input[type=checkbox].bad{outline:2px solid #dc2626;outline-offset:2px;border-radius:3px}.chk-err{display:none;color:#dc2626;font-size:.78rem;line-height:1.5;margin:-.35em 0 .6em;padding-left:1.7em}.req{color:#dc2626;font-weight:700;margin-left:.2em}.req-note{font-size:.8rem;color:var(--gray,#777777);margin:0 0 1.2em}/*/FORMUX*/ #gyik{background:linear-gradient(150deg,#12706A,#083B37);color:var(--cream-2,#EEECE6)}#gyik .eyebrow{color:rgba(238,236,230,.72)}#gyik h2{color:var(--warm,#F1E9DB)}#gyik .faq-item{border-bottom:1px solid rgba(255,255,255,.16)}#gyik .faq-item[open]{background:rgba(255,255,255,.06);border-radius:12px;padding:0 18px;margin:0 -18px}#gyik .faq-item summary{cursor:pointer;list-style:none;padding:1.15em 2.2em 1.15em 0;position:relative;font-family:var(--serif);font-weight:500;font-size:1.12rem;color:var(--warm,#F1E9DB);line-height:1.4}#gyik .faq-item summary::-webkit-details-marker{display:none}#gyik .faq-item summary::after{content:'+';position:absolute;right:.2em;top:.72em;font-family:var(--sans);font-weight:400;font-size:1.5rem;color:rgba(238,236,230,.65)}#gyik .faq-item[open] summary::after{content:'\2212'}#gyik .faq-item .a{padding:0 0 1.3em;color:rgba(238,236,230,.86);line-height:1.8;max-width:72ch}#gyik .btn-ghost{color:var(--warm,#F1E9DB);border-color:rgba(255,255,255,.4)}#gyik .btn-ghost:hover{background:var(--warm,#F1E9DB);color:#0B3912;border-color:var(--warm,#F1E9DB)}@media(max-width:640px){#gyik .faq-item summary{font-size:1.02rem}} /* ── 2026-08-01: kapszulakártya-nyíl és a kapszula-sűrűség gomb ──────────── A nyíl az alkalmazási területek kártyáival egyezően a JOBB oldalra kerül (oszlopirányú flexben a bal oldali automatikus margó tolja át), és a hero türkiz színét (#12706A) veszi fel a korábbi zöld helyett. Ugyanez a türkiz lesz a kapszula-sűrűség gomb hover-háttere is. */ .cap .b-arrow{margin-left:auto;border-color:rgba(18,112,106,.35);color:#12706A} .cap:hover .b-arrow{background:#12706A;border-color:#12706A;color:#fff} #kapszulak .btn-ghost{color:#12706A;border-color:rgba(18,112,106,.35)} #kapszulak .btn-ghost:hover{background:#12706A;border-color:#12706A;color:#fff} /* ═══ MOBIL MENU 2026-08-01 ══════════════════════════════════════════════════════ Jobbrol beuszo panel a korabbi legordulo lista helyett; a nyelvvalaszto egysoros valasztosav lesz. A jeloles valtozatlan, minden stilusbol tortenik. */ @media(max-width:820px){ /* A fejlec (logo) es a hero elso sora kozott legyen levegő, hogy a logo kulon egysegkent latszodjon. Csak mobilon, az asztali nezet valtozatlan. */ .hero{padding-top:132px} #hdr:has(.nav-links.open)::before{content:'';position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} /* A beuszo panel `position:fixed`. A `backdrop-filter` viszont TARTALMAZO BLOKKOT csinal a fixed leszarmazottaknak — ilyenkor a panel nem a kepernyohoz, hanem a FEJLEC dobozahoz igazodik, es arra is zsugorodik: a menupontok kilognak belole, csak a nyelvsor latszik (az `order:-1` miatt az all elol). Gorgetes utan `#hdr.sc`/`.scrolled` kap blurt, ezert jelentkezett a hiba csak a lap tetejerol elgorgetve. Amig a menu nyitva van, a fejlecrol levesszuk a blurt — a panel es a sotetito reteg amugy is eltakarja. 2026-08-02. */ #hdr:has(.nav-links.open),#hdr.sc:has(.nav-links.open), #hdr.scrolled:has(.nav-links.open){ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; filter:none!important;transform:none!important; /* transition nelkul: a #hdr .35s-es atmenete kulonben a blur(12px)→none uton vinne at, es amig a blur > none, a panel meg mindig osszecsuklik. */ transition:none!important; background:rgba(247,246,243,.98)!important} #hdr .nav-links{position:fixed!important;top:0!important;right:0!important; align-items:stretch!important; bottom:0!important;left:auto!important; width:min(330px,86vw);display:flex!important;flex-direction:column;align-items:stretch; gap:0!important;background:var(--white,#fff)!important;backdrop-filter:none!important; padding:74px 0 24px!important;border-top:none;overflow-y:auto;overscroll-behavior:contain; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1)} #hdr .nav-links.open{transform:none} #hdr .nav-links>a{display:flex;align-items:center;gap:14px;position:relative; padding:13px 20px 13px 20px!important;margin:0 10px;border-radius:14px; font-weight:600;font-size:1.02rem;color:var(--dark-2)!important;width:auto; transition:background .18s} #hdr .nav-links>a:hover{background:rgba(18,112,106,.07)} #hdr .nav-links>a::before{content:'';flex:0 0 auto;width:34px;height:34px; border-radius:10px;background:var(--cream-2,#EEECE6);transition:background .18s; position:static;opacity:1} #hdr .nav-links>a::after{content:'';position:absolute!important;left:28px!important; top:50%!important;bottom:auto!important;right:auto!important; width:18px!important;height:18px!important;margin-top:-9px;background:#12706A!important; -webkit-mask:var(--mi) center/18px 18px no-repeat;mask:var(--mi) center/18px 18px no-repeat; transition:background .18s} #hdr .nav-links>a:hover::before{background:#12706A} #hdr .nav-links>a:hover::after{background:#fff!important} /* ── Bezaro gomb ────────────────────────────────────────────── Nyitott allapotban a hamburger korbe zart X lesz a panel jobb felso sarkaban. Eddig a `#hdr:not(.scrolled) .burger span{background:#fff}` szabaly miatt feher X allt a feher panelen, vagyis lathatatlan volt — ezert kell a szinre !important. */ #hdr .burger{position:relative;z-index:5} #hdr .burger.open{position:fixed;top:13px;right:13px;width:40px;height:40px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; border-radius:50%;border:1px solid rgba(4,87,103,.18)!important; background:#fff!important;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:8} #hdr .burger.open span{width:17px;background:#12706A!important} #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0;position:static; display:block!important;width:auto;align-self:stretch!important} #hdr .nav-links .lang-btn{display:none!important} #hdr .nav-links .lang-menu{display:flex!important;position:static!important;flex-wrap:nowrap; flex-direction:row!important;gap:6px;box-shadow:none;background:none;padding:0; min-width:0;border:none;width:100%} #hdr .nav-links .lang-menu a{flex:1 1 0;text-align:center;padding:.55em .2em;border-radius:10px; border:1px solid rgba(4,87,103,.16);font-size:.7rem;font-weight:700;letter-spacing:.02em; color:var(--gray-1,#777777)!important;white-space:nowrap;transition:.18s;font-size:0!important} #hdr .nav-links .lang-menu a::before{font-size:.76rem;font-weight:700;letter-spacing:.06em} #hdr .nav-links .lang-menu a:hover{border-color:#12706A;color:#12706A;background:none} /* Az aktív nyelv: türkiz háttér, fehér betű. !important kell, mert a fejléc saját `#hdr:not(.scrolled) .nav-links.open .lang-menu a` szabálya (id + négy osztály) magasabb fajsúlyú, mint az itteni szelektor. */ #hdr .nav-links .lang-menu a[aria-current]{background:#12706A!important; border-color:#12706A!important;color:#fff!important} #hdr .nav-links .lang-menu a[aria-current]::before{color:#fff!important} /* ── A menu labjegyzete: turkiz valasztovonal + szlogen ──────── A tartalom CSS-bol jon, hogy ne kelljen 2799 oldal jeloleset atirni. `margin-top:auto` — a panel aljara kerul, a Kapcsolat ala. */ #hdr .nav-links::after{content:"VetBiota – Safeguarding your pets";display:block;margin:26px 20px 4px;margin-top:auto; padding-top:15px;border-top:1px solid #12706A; font-size:.76rem;font-weight:600;letter-spacing:.01em;line-height:1.4; color:#12706A;text-align:center} html[lang="hu"] #hdr .nav-links::after{content:"VetBiota – Óvjuk a kedvencét"} html[lang="en"] #hdr .nav-links::after{content:"VetBiota – Safeguarding your pets"} html[lang="de"] #hdr .nav-links::after{content:"VetBiota – Wir schützen Ihre Tiere"} html[lang="es"] #hdr .nav-links::after{content:"VetBiota – Cuidamos a sus mascotas"} html[lang="fr"] #hdr .nav-links::after{content:"VetBiota – Nous protégeons vos animaux"} } @media(max-width:820px){ /* Tartalek: ha egy hivatkozasra nincs ikonunk, ures maszk keruljon ra — `--mi` nelkul a `mask` ervenytelen, es tomor turkiz negyzet latszana. */ #hdr .nav-links>a{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="vetbiota-modern"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="analisis-del-microbioma"], #hdr .nav-links>a[href*="analyse-du-microbiote"], #hdr .nav-links>a[href*="microbiome-testing"], #hdr .nav-links>a[href*="mikrobiom-analyse"], #hdr .nav-links>a[href*="mikrobioma-vizsgalat"], #hdr .nav-links>a[href*="#folyamat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="#szolgaltatasok"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="become-a-donor"], #hdr .nav-links>a[href*="devenez-donneur"], #hdr .nav-links>a[href*="donor"], #hdr .nav-links>a[href*="legyen-on-is-donor"], #hdr .nav-links>a[href*="sea-donante"], #hdr .nav-links>a[href*="donor"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="base-de-connaissances"], #hdr .nav-links>a[href*="base-de-conocimiento"], #hdr .nav-links>a[href*="books/"], #hdr .nav-links>a[href*="knowledgebase"], #hdr .nav-links>a[href*="tudastar"], #hdr .nav-links>a[href*="gyik"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="csapat.html"], #hdr .nav-links>a[href*="csapatunk"], #hdr .nav-links>a[href*="notre-equipe"], #hdr .nav-links>a[href*="nuestro-equipo"], #hdr .nav-links>a[href*="our-team"], #hdr .nav-links>a[href*="csapat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="contact"], #hdr .nav-links>a[href*="contacto"], #hdr .nav-links>a[href*="kapcsolat"], #hdr .nav-links>a[href*="kapcsolat.html"], #hdr .nav-links>a[href*="kapcsolat"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href="/hu/"], #hdr .nav-links>a[href="/en/"], #hdr .nav-links>a[href="/de/"], #hdr .nav-links>a[href="/es/"], #hdr .nav-links>a[href="/fr/"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links .lang-menu a[href$="microbiomebank-modern.html"]::before, #hdr .nav-links .lang-menu a[href*="/hu/"]::before{content:"HU"} html[lang="hu"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"HU"} #hdr .nav-links .lang-menu a[href*="-en.html"]::before, #hdr .nav-links .lang-menu a[href*="/en/"]::before{content:"EN"} html[lang="en"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"EN"} #hdr .nav-links .lang-menu a[href*="-de.html"]::before, #hdr .nav-links .lang-menu a[href*="/de/"]::before{content:"DE"} html[lang="de"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"DE"} #hdr .nav-links .lang-menu a[href*="-es.html"]::before, #hdr .nav-links .lang-menu a[href*="/es/"]::before{content:"ES"} html[lang="es"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"ES"} #hdr .nav-links .lang-menu a[href*="-fr.html"]::before, #hdr .nav-links .lang-menu a[href*="/fr/"]::before{content:"FR"} html[lang="fr"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"FR"} } /* ── VetBiota: a mobil menu ikonjai a data-nav attributumra ─────────── */ #hdr .nav-links>a[data-nav="home"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="process"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="services"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="donor"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="faq"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="contact"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="lang"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} /* ===== shell.css ===== */ /* MicroBiome Bank — közös fejléc + lábléc (a főoldallal megegyező), minden aloldalon. Utoljára betöltve, #hdr / .sitefoot specifikussággal felülírja az oldal saját stílusát. */ :root{--green:#0B3912;--green-lite:#16642A;--teal:#045767;--teal-med:#16787E;--dark-1:#021305;--dark-2:#06230B;--gray-1:#777777;--gray-2:#cccccc;--cream:#F7F4EF;--cream-2:#EEECE6;--warm:#F1E9DB;--white:#ffffff;--serif:'Cinzel',Georgia,serif;--sans:'Raleway',system-ui,sans-serif} /* ---- fejléc ---- */ #hdr{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .4s ease;padding:20px 0;background:transparent;box-shadow:none;backdrop-filter:none} #hdr.scrolled,#hdr.sc{background:rgba(247,244,239,.9)!important;backdrop-filter:blur(14px);padding:12px 0;box-shadow:0 4px 30px -12px rgba(0,0,0,.1)} #hdr .nav{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:0 24px} #hdr .logo{display:flex;align-items:center;gap:.6em;font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--green);text-decoration:none} #hdr .logo img{height:52px;width:auto;display:block;transition:height .35s ease;border-radius:0} #hdr.scrolled .logo img,#hdr.sc .logo img{height:42px} #hdr .logo .lg-w{display:none} #hdr.dark .logo .lg-g{display:none} #hdr.dark .logo .lg-w{display:block} #hdr.dark.scrolled .logo .lg-g,#hdr.dark.sc .logo .lg-g{display:block} #hdr.dark.scrolled .logo .lg-w,#hdr.dark.sc .logo .lg-w{display:none} /* sötét fejléc: fehér menü + nyelvválasztó + aláhúzás (görgetéskor visszavált sötétre) */ #hdr.dark .nav-links>a{color:#fff} #hdr.dark .nav-links>a::after{background:#fff} #hdr.dark .nav-links>a:hover{color:#fff} #hdr.dark .lang-btn{color:#fff;border-color:rgba(255,255,255,.55)} #hdr.dark .lang-btn:hover{color:#fff;border-color:#fff} #hdr.dark .burger span{background:#fff} /* mobil: nyitott hamburger-menü világos panelen — mindig sötét betű */ #hdr.dark .nav-links.open>a{color:var(--dark-2)} #hdr.dark .nav-links.open>a:hover{color:var(--green)} #hdr.dark .nav-links.open>a::after{background:var(--teal-med)} #hdr.dark .nav-links.open .lang-btn{color:var(--dark-2);border-color:var(--gray-2)} #hdr.dark .nav-links.open .lang-menu a{color:var(--dark-2)} #hdr.dark.scrolled .nav-links>a,#hdr.dark.sc .nav-links>a{color:var(--dark-2)} #hdr.dark.scrolled .nav-links>a:hover,#hdr.dark.sc .nav-links>a:hover{color:var(--green)} #hdr.dark.scrolled .nav-links>a::after,#hdr.dark.sc .nav-links>a::after{background:var(--teal-med)} #hdr.dark.scrolled .lang-btn,#hdr.dark.sc .lang-btn{color:var(--dark-2);border-color:var(--gray-2)} #hdr.dark.scrolled .burger span,#hdr.dark.sc .burger span{background:var(--green)} #hdr .nav-links{display:flex;gap:2rem;align-items:center;font-weight:500;font-size:.92rem} #hdr .nav-links>a{position:relative;padding:4px 0;color:var(--dark-2);text-decoration:none;transition:color .2s} #hdr .nav-links>a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--teal-med);transition:width .3s} #hdr .nav-links>a:hover{color:var(--green)}#hdr .nav-links>a:hover::after{width:100%} #hdr .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none} #hdr .burger span{display:block;width:26px;height:2px;background:var(--green);transition:.3s} #hdr .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #hdr .burger.open span:nth-child(2){opacity:0} #hdr .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #hdr .lang{position:relative} #hdr .lang-btn{display:inline-flex;align-items:center;gap:.42em;background:transparent;border:1.5px solid var(--gray-2);border-radius:100px;padding:.4em .85em;font-family:var(--sans);font-weight:600;font-size:.82rem;color:var(--dark-2);cursor:pointer;transition:.2s} #hdr .lang-btn:hover{color:var(--green);border-color:var(--teal-med)} #hdr .lang-btn svg{opacity:.8} #hdr .lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:150px;background:var(--white);border-radius:12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.28);padding:6px;display:none;flex-direction:column;z-index:130} #hdr .lang.open .lang-menu{display:flex} #hdr .lang-menu a{padding:.55em .8em;border-radius:8px;font-size:.9rem;color:var(--dark-2);cursor:pointer;text-decoration:none} #hdr .lang-menu a:hover{background:var(--cream-2);color:var(--green)} #hdr .lang-menu a[aria-current="true"]{color:var(--green);font-weight:700;cursor:default} /* ---- lábléc ---- */ footer.sitefoot{background:var(--dark-1);color:rgba(238,236,230,.7);padding:70px 0 32px;margin-top:0;text-align:left} footer.sitefoot .foot-grid>div{text-align:left} footer.sitefoot .wrap{max-width:1180px;margin:0 auto;padding:0 24px} footer.sitefoot .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px} footer.sitefoot h5{color:var(--warm);font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2em} footer.sitefoot a{display:block;padding:.35em 0;font-size:.92rem;color:rgba(238,236,230,.7);text-decoration:none;transition:color .2s} footer.sitefoot a:hover{color:var(--warm)} footer.sitefoot p{font-size:.9rem;line-height:1.7;color:rgba(238,236,230,.7)} footer.sitefoot .logo img{height:46px;width:auto;border-radius:0} /* 2026-08-03: a lábléc alsó sávja. Eddig a SOR kapott `opacity:.6`-ot, a három hivatkozás pedig `color:inherit`-et — ettől (a) pontosan olyan színűek voltak, mint a szerzői jogi felirat mellettük, és (b) a `footer.sitefoot a:hover{color:var(--warm)}` sem érvényesült rajtuk, mert a `.foot-bottom a` szabály fajsúlyosabb. Így a hover teljesen néma volt. Most a sor szövege halványabb, a három hivatkozás pedig a lábléc többi aktív linkjének színét és hover-viselkedését kapja. */ footer.sitefoot .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 18px;text-align:center;font-size:.82rem;color:rgba(238,236,230,.42)} footer.sitefoot .foot-bottom a, footer.sitefoot .foot-bottom .cc-reopen{display:inline;color:rgba(238,236,230,.7)} footer.sitefoot .foot-bottom a:hover, footer.sitefoot .foot-bottom .cc-reopen:hover{color:var(--warm);text-decoration:none} @media(max-width:820px){ footer.sitefoot .foot-grid{grid-template-columns:1fr 1fr} #hdr .nav-links{display:none;gap:1.1rem} #hdr .burger{display:flex} #hdr .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:rgba(247,244,239,.98);backdrop-filter:blur(14px);padding:20px 24px 24px;box-shadow:0 16px 34px -16px rgba(0,0,0,.22);border-top:1px solid rgba(0,0,0,.06)} #hdr .nav-links.open .lang-menu{position:static;box-shadow:none;padding:4px 0 0;min-width:0} } @media(max-width:520px){footer.sitefoot .foot-grid{grid-template-columns:1fr}} /* ═══ MOBIL MENÜ (2026-08-01) ══════════════════════════════════════════════ Jobbról beúszó panel a korábbi legördülő lista helyett. A jelölés változatlan — minden itt, stílusból történik, ezért nem kellett a 2799 oldalt újragenerálni. A nyelvválasztó kikerül a legördülőből: egysoros választósáv lesz belőle, az aktuális nyelv kiemelve. */ @media(max-width:820px){ /* sötétítő háttér a panel mögé */ #hdr:has(.nav-links.open)::before{content:"";position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} #hdr .nav-links{position:fixed;top:0;right:0;bottom:0;left:auto; width:min(330px,86vw);max-width:none;display:flex!important;flex-direction:column; align-items:stretch;gap:0;background:var(--white);padding:76px 0 0; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1); overflow-y:auto;overscroll-behavior:contain} #hdr .nav-links.open{transform:none;position:fixed;top:0;left:auto;right:0; background:var(--white);backdrop-filter:none;border-top:none;padding:76px 0 0} /* menüpont: ikon + felirat */ #hdr .nav-links>a{display:flex;align-items:center;gap:14px; padding:13px 20px;margin:0 10px;border-radius:14px;font-weight:600;font-size:1.02rem; color:var(--dark-2);transition:background .18s} #hdr .nav-links>a::after{display:none} #hdr .nav-links>a:hover{background:rgba(18,112,106,.07)} #hdr .nav-links>a::before{content:"";flex:0 0 auto;width:34px;height:34px;border-radius:10px; background-color:var(--cream-2);position:relative;transition:background-color .18s} #hdr .nav-links>a>span.mi{display:none} /* a hamburger a panel fölött marad, és bezáró gombbá alakul */ #hdr .burger{position:relative;z-index:5} #hdr .nav-links.open ~ .burger, #hdr .burger.open{z-index:5} #hdr .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} #hdr .burger.open span:nth-child(2){opacity:0} #hdr .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} #hdr .burger span{transition:transform .25s,opacity .2s} /* nyelvválasztó: nem legördülő, hanem egysoros választósáv */ #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0} #hdr .nav-links .lang-btn{display:none} #hdr .nav-links .lang-menu, #hdr .nav-links.open .lang-menu{display:flex!important;position:static;opacity:1;visibility:visible; transform:none;box-shadow:none;border:none;background:none;padding:0;margin:0;min-width:0; gap:6px;flex-direction:row} #hdr .nav-links .lang-menu a{flex:1;text-align:center;padding:.5em 0;border-radius:10px; border:1px solid rgba(4,87,103,.16);font-size:.72rem;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:var(--gray-1);white-space:nowrap;transition:.18s} #hdr .nav-links .lang-menu a:hover{border-color:#12706A;color:#12706A} #hdr .nav-links .lang-menu a[aria-current]{background:#12706A;border-color:#12706A;color:#fff} } @media(max-width:820px){ #hdr .nav-links > a[href*="analisis-del-microbioma"], #hdr .nav-links > a[href*="analyse-du-microbiote"], #hdr .nav-links > a[href*="microbiome-testing"], #hdr .nav-links > a[href*="mikrobiom-analyse"], #hdr .nav-links > a[href*="mikrobioma-vizsgalat"], #hdr .nav-links > a[href*="szolgaltatasok-mikrobioma-profil-keszitese"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%202h6%22%2F%3E%3Cpath%20d%3D%22M10%202v6.2L4.6%2018a3%203%200%200%200%202.6%204.5h9.6A3%203%200%200%200%2019.4%2018L14%208.2V2%22%2F%3E%3Cpath%20d%3D%22M6.5%2015h11%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="#kapszulak"], #hdr .nav-links > a[href*="#capsules"], #hdr .nav-links > a[href*="#kapseln"], #hdr .nav-links > a[href*="#capsulas"], #hdr .nav-links > a[href*="#gelules"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%228%22%20width%3D%2219%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3Cpath%20d%3D%22M5.5%2011.2h2.6%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="become-a-donor"], #hdr .nav-links > a[href*="devenez-donneur"], #hdr .nav-links > a[href*="donor.html"], #hdr .nav-links > a[href*="legyen-on-is-donor"], #hdr .nav-links > a[href*="sea-donante"], #hdr .nav-links > a[href*="spender-werden"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.5s-7.2-4.6-7.2-9.4A4%204%200%200%201%2012%208.4a4%204%200%200%201%207.2%202.7c0%204.8-7.2%209.4-7.2%209.4z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="base-de-connaissances"], #hdr .nav-links > a[href*="base-de-conocimiento"], #hdr .nav-links > a[href*="books/"], #hdr .nav-links > a[href*="knowledgebase"], #hdr .nav-links > a[href*="tudastar"], #hdr .nav-links > a[href*="wissensdatenbank"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%204.5h6a3%203%200%200%201%202%20.9%203%203%200%200%201%202-.9h6v14h-6a3%203%200%200%200-2%20.9%203%203%200%200%200-2-.9H4z%22%2F%3E%3Cpath%20d%3D%22M12%205.4v14%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.5V17l11-11%203.5%203.5-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.5%207.5%2016.5%2010.5%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="csapat.html"], #hdr .nav-links > a[href*="csapatunk"], #hdr .nav-links > a[href*="notre-equipe"], #hdr .nav-links > a[href*="nuestro-equipo"], #hdr .nav-links > a[href*="our-team"], #hdr .nav-links > a[href*="unser-team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.5%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020c0-3.3%202.7-5.5%206-5.5s6%202.2%206%205.5%22%2F%3E%3Cpath%20d%3D%22M16.5%206.2a3%203%200%200%201%200%205.6%22%2F%3E%3Cpath%20d%3D%22M18%2014.9c1.9.7%203%202.5%203%205.1%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links > a[href*="contact"], #hdr .nav-links > a[href*="contacto"], #hdr .nav-links > a[href*="kapcsolat"], #hdr .nav-links > a[href*="kapcsolat.html"], #hdr .nav-links > a[href*="kontakt"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.5%203.5h3l1.6%204-2%201.4a11.5%2011.5%200%200%200%205%205l1.4-2%204%201.6v3a2%202%200%200%201-2.2%202A16.5%2016.5%200%200%201%204.5%205.7a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a::before{ -webkit-mask:var(--mi,none) center/18px 18px no-repeat; mask:var(--mi,none) center/18px 18px no-repeat; background-color:var(--cream-2); box-shadow:none} #hdr .nav-links>a::before{background-color:var(--cream-2)} } @media(max-width:820px){ #hdr .nav-links>a{position:relative} #hdr .nav-links>a::before{background-color:var(--cream-2);-webkit-mask:none;mask:none} #hdr .nav-links>a::after{content:"";display:block;position:absolute;left:28px;top:50%; width:18px;height:18px;margin-top:-9px;background-color:#12706A; -webkit-mask:var(--mi,none) center/18px 18px no-repeat; mask:var(--mi,none) center/18px 18px no-repeat;transition:background-color .18s} #hdr .nav-links>a:hover::before{background-color:#12706A} #hdr .nav-links>a:hover::after{background-color:#fff} } /* ═══ MOBIL MENU 2026-08-01 ══════════════════════════════════════════════════════ Jobbrol beuszo panel a korabbi legordulo lista helyett; a nyelvvalaszto egysoros valasztosav lesz. A jeloles valtozatlan, minden stilusbol tortenik. */ @media(max-width:820px){ /* A fejlec (logo) es a hero elso sora kozott legyen levegő, hogy a logo kulon egysegkent latszodjon. Csak mobilon, az asztali nezet valtozatlan. */ .hero{padding-top:132px} #hdr:has(.nav-links.open)::before{content:'';position:fixed;inset:0; background:rgba(5,32,38,.45);backdrop-filter:blur(3px);z-index:-1} /* A beuszo panel `position:fixed`. A `backdrop-filter` viszont TARTALMAZO BLOKKOT csinal a fixed leszarmazottaknak — ilyenkor a panel nem a kepernyohoz, hanem a FEJLEC dobozahoz igazodik, es arra is zsugorodik: a menupontok kilognak belole, csak a nyelvsor latszik (az `order:-1` miatt az all elol). Gorgetes utan `#hdr.sc`/`.scrolled` kap blurt, ezert jelentkezett a hiba csak a lap tetejerol elgorgetve. Amig a menu nyitva van, a fejlecrol levesszuk a blurt — a panel es a sotetito reteg amugy is eltakarja. 2026-08-02. */ #hdr:has(.nav-links.open),#hdr.sc:has(.nav-links.open), #hdr.scrolled:has(.nav-links.open){ backdrop-filter:none!important;-webkit-backdrop-filter:none!important; filter:none!important;transform:none!important; /* transition nelkul: a #hdr .35s-es atmenete kulonben a blur(12px)→none uton vinne at, es amig a blur > none, a panel meg mindig osszecsuklik. */ transition:none!important; background:rgba(247,244,239,.98)!important} #hdr .nav-links{position:fixed!important;top:0!important;right:0!important; align-items:stretch!important; bottom:0!important;left:auto!important; width:min(330px,86vw);display:flex!important;flex-direction:column;align-items:stretch; gap:0!important;background:var(--white,#fff)!important;backdrop-filter:none!important; padding:74px 0 24px!important;border-top:none;overflow-y:auto;overscroll-behavior:contain; box-shadow:-20px 0 60px -20px rgba(0,0,0,.4); transform:translateX(101%);transition:transform .38s cubic-bezier(.22,.8,.28,1)} #hdr .nav-links.open{transform:none} #hdr .nav-links>a{display:flex;align-items:center;gap:14px;position:relative; padding:13px 20px 13px 20px!important;margin:0 10px;border-radius:14px; font-weight:600;font-size:1.02rem;color:var(--dark-2)!important;width:auto; transition:background .18s} #hdr .nav-links>a:hover{background:rgba(18,112,106,.07)} #hdr .nav-links>a::before{content:'';flex:0 0 auto;width:34px;height:34px; border-radius:10px;background:var(--cream-2,#EEECE6);transition:background .18s; position:static;opacity:1} #hdr .nav-links>a::after{content:'';position:absolute!important;left:28px!important; top:50%!important;bottom:auto!important;right:auto!important; width:18px!important;height:18px!important;margin-top:-9px;background:#12706A!important; -webkit-mask:var(--mi) center/18px 18px no-repeat;mask:var(--mi) center/18px 18px no-repeat; transition:background .18s} #hdr .nav-links>a:hover::before{background:#12706A} #hdr .nav-links>a:hover::after{background:#fff!important} /* ── Bezaro gomb ────────────────────────────────────────────── Nyitott allapotban a hamburger korbe zart X lesz a panel jobb felso sarkaban. Eddig a `#hdr:not(.scrolled) .burger span{background:#fff}` szabaly miatt feher X allt a feher panelen, vagyis lathatatlan volt — ezert kell a szinre !important. */ #hdr .burger{position:relative;z-index:5} #hdr .burger.open{position:fixed;top:13px;right:13px;width:40px;height:40px; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; border-radius:50%;border:1px solid rgba(4,87,103,.18)!important; background:#fff!important;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);z-index:8} #hdr .burger.open span{width:17px;background:#12706A!important} #hdr .nav-links .lang{order:-1;margin:0 20px 14px;padding:0;position:static; display:block!important;width:auto;align-self:stretch!important} #hdr .nav-links .lang-btn{display:none!important} #hdr .nav-links .lang-menu{display:flex!important;position:static!important;flex-wrap:nowrap; flex-direction:row!important;gap:6px;box-shadow:none;background:none;padding:0; min-width:0;border:none;width:100%} #hdr .nav-links .lang-menu a{flex:1 1 0;text-align:center;padding:.55em .2em;border-radius:10px; border:1px solid rgba(4,87,103,.16);font-size:.7rem;font-weight:700;letter-spacing:.02em; color:var(--gray-1,#777777)!important;white-space:nowrap;transition:.18s;font-size:0!important} #hdr .nav-links .lang-menu a::before{font-size:.76rem;font-weight:700;letter-spacing:.06em} #hdr .nav-links .lang-menu a:hover{border-color:#12706A;color:#12706A;background:none} /* Az aktív nyelv: türkiz háttér, fehér betű. !important kell, mert a fejléc saját `#hdr:not(.scrolled) .nav-links.open .lang-menu a` szabálya (id + négy osztály) magasabb fajsúlyú, mint az itteni szelektor. */ #hdr .nav-links .lang-menu a[aria-current]{background:#12706A!important; border-color:#12706A!important;color:#fff!important} #hdr .nav-links .lang-menu a[aria-current]::before{color:#fff!important} /* ── A menu labjegyzete: turkiz valasztovonal + szlogen ──────── A tartalom CSS-bol jon, hogy ne kelljen 2799 oldal jeloleset atirni. `margin-top:auto` — a panel aljara kerul, a Kapcsolat ala. */ #hdr .nav-links::after{content:"VetBiota – Safeguarding your pets";display:block;margin:26px 20px 4px;margin-top:auto; padding-top:15px;border-top:1px solid #12706A; font-size:.76rem;font-weight:600;letter-spacing:.01em;line-height:1.4; color:#12706A;text-align:center} html[lang="hu"] #hdr .nav-links::after{content:"VetBiota – Óvjuk a kedvencét"} html[lang="en"] #hdr .nav-links::after{content:"VetBiota – Safeguarding your pets"} html[lang="de"] #hdr .nav-links::after{content:"VetBiota – Wir schützen Ihre Tiere"} html[lang="es"] #hdr .nav-links::after{content:"VetBiota – Cuidamos a sus mascotas"} html[lang="fr"] #hdr .nav-links::after{content:"VetBiota – Nous protégeons vos animaux"} } @media(max-width:820px){ /* Tartalek: ha egy hivatkozasra nincs ikonunk, ures maszk keruljon ra — `--mi` nelkul a `mask` ervenytelen, es tomor turkiz negyzet latszana. */ #hdr .nav-links>a{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="microbiomebank-modern"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="analisis-del-microbioma"], #hdr .nav-links>a[href*="analyse-du-microbiote"], #hdr .nav-links>a[href*="microbiome-testing"], #hdr .nav-links>a[href*="mikrobiom-analyse"], #hdr .nav-links>a[href*="mikrobioma-vizsgalat"], #hdr .nav-links>a[href*="szolgaltatasok-mikrobioma-profil-keszitese"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="#kapszulak"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="become-a-donor"], #hdr .nav-links>a[href*="devenez-donneur"], #hdr .nav-links>a[href*="donor"], #hdr .nav-links>a[href*="legyen-on-is-donor"], #hdr .nav-links>a[href*="sea-donante"], #hdr .nav-links>a[href*="spender-werden"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="base-de-connaissances"], #hdr .nav-links>a[href*="base-de-conocimiento"], #hdr .nav-links>a[href*="books/"], #hdr .nav-links>a[href*="knowledgebase"], #hdr .nav-links>a[href*="tudastar"], #hdr .nav-links>a[href*="wissensdatenbank"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="csapat.html"], #hdr .nav-links>a[href*="csapatunk"], #hdr .nav-links>a[href*="notre-equipe"], #hdr .nav-links>a[href*="nuestro-equipo"], #hdr .nav-links>a[href*="our-team"], #hdr .nav-links>a[href*="unser-team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href*="contact"], #hdr .nav-links>a[href*="contacto"], #hdr .nav-links>a[href*="kapcsolat"], #hdr .nav-links>a[href*="kapcsolat.html"], #hdr .nav-links>a[href*="kontakt"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[href="/hu/"], #hdr .nav-links>a[href="/en/"], #hdr .nav-links>a[href="/de/"], #hdr .nav-links>a[href="/es/"], #hdr .nav-links>a[href="/fr/"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links .lang-menu a[href$="microbiomebank-modern.html"]::before, #hdr .nav-links .lang-menu a[href*="/hu/"]::before{content:"HU"} html[lang="hu"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"HU"} #hdr .nav-links .lang-menu a[href*="-en.html"]::before, #hdr .nav-links .lang-menu a[href*="/en/"]::before{content:"EN"} html[lang="en"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"EN"} #hdr .nav-links .lang-menu a[href*="-de.html"]::before, #hdr .nav-links .lang-menu a[href*="/de/"]::before{content:"DE"} html[lang="de"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"DE"} #hdr .nav-links .lang-menu a[href*="-es.html"]::before, #hdr .nav-links .lang-menu a[href*="/es/"]::before{content:"ES"} html[lang="es"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"ES"} #hdr .nav-links .lang-menu a[href*="-fr.html"]::before, #hdr .nav-links .lang-menu a[href*="/fr/"]::before{content:"FR"} html[lang="fr"] #hdr .nav-links .lang-menu a[aria-current]::before{content:"FR"} } /* ═══ MBB-KERESES 2026-08-03 ═══════════════════════════════════════════ Teljes szoveges kereso (Pagefind). Jeloles + szkript: _build/inject_search.py · index: _build/build_search_index.sh */ .pfs-sec{padding:0 0 8px} .pfs{max-width:760px;margin:0 auto} .pfs-box{display:flex;align-items:center;gap:.7em;background:var(--white,#fff); border:1px solid rgba(4,87,103,.16);border-radius:100px;padding:.85em 1.4em; box-shadow:0 14px 40px -26px rgba(4,87,103,.55);color:var(--gray,#777777); transition:border-color .25s ease,box-shadow .25s ease} .pfs-box:focus-within{border-color:var(--teal-med,#16787E); box-shadow:0 16px 44px -22px rgba(4,87,103,.6)} .pfs-box svg{flex:none} .pfs-box input{border:0;outline:0;width:100%;background:none;font-size:1.02rem; font-family:var(--sans,'Raleway',system-ui,sans-serif);color:var(--ink,#06230B)} .pfs-chips{display:flex;flex-wrap:wrap;gap:.5em;margin:1em 0 0} .pfs-chip{cursor:pointer;font:inherit;font-size:.78rem;line-height:1; padding:.62em 1.1em;border-radius:100px;border:1px solid rgba(4,87,103,.2); background:transparent;color:var(--gray,#777777)} .pfs-chip:hover{border-color:var(--teal-med,#16787E);color:var(--teal,#045767)} .pfs-chip[aria-current]{background:var(--teal,#045767); border-color:var(--teal,#045767);color:#fff} .pfs-status{margin:.95em 0 0;font-size:.84rem;color:var(--gray,#777777)} .pfs-list{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.7em} .pfs-hit{background:var(--white,#fff);border:1px solid rgba(4,87,103,.1); border-radius:16px;padding:1.05em 1.3em} .pfs-hit-a{display:block;text-decoration:none;color:inherit} .pfs-hit-b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--teal-med,#16787E);margin-bottom:.3em} .pfs-hit-t{display:block;font-family:var(--serif,'Cinzel',Georgia,serif); font-size:1.06rem;color:var(--green,#0B3912);line-height:1.3} .pfs-hit-x{margin:.45em 0 0;font-size:.9rem;line-height:1.6;color:var(--gray,#777777)} .pfs-hit-x mark{background:rgba(22,120,126,.16);color:inherit;border-radius:3px; padding:0 .12em} .pfs-hit-a:hover .pfs-hit-t{color:var(--teal,#045767)} .pfs-subs{list-style:none;margin:.7em 0 0;padding:.6em 0 0;display:grid;gap:.32em; border-top:1px solid rgba(4,87,103,.09)} .pfs-subs a{font-size:.84rem;color:var(--teal,#045767);text-decoration:none} .pfs-subs a:hover{text-decoration:underline} .pfs-more{display:block;margin:1.1em auto 0;cursor:pointer;font:inherit; font-size:.85rem;padding:.8em 2em;border-radius:100px; border:1px solid rgba(4,87,103,.22);background:transparent;color:var(--teal,#045767)} .pfs-more:hover{background:var(--teal,#045767);color:#fff; border-color:var(--teal,#045767)} .pfs-more[disabled]{opacity:.5;cursor:default} @media(max-width:640px){.pfs-box{padding:.75em 1.1em}.pfs-hit{padding:.95em 1.05em}} /* A konyv-nyitooldalak gyors cimszuroje ala kerulo atvezetes a teljes szoveges keresore (C. resz). */ .toolbar .fts-link{display:inline-block;margin-top:.5em;font-size:.82rem; color:var(--teal,#045767);text-decoration:none; border-bottom:1px solid rgba(4,87,103,.35)} .toolbar .fts-link:hover{border-bottom-color:var(--teal,#045767)} /* ═══ /MBB-KERESES ═════════════════════════════════════════════════════ */ /* ═══ HAMAROSAN-KONYVEK 2026-08-03 ═════════════════════════════════════ A DiffBiome Kezikonyv az egyetlen teljes egeszeben olvashato konyv; a masik negy „hamarosan" allapotu. A jeloles nem valtozik, minden stilusbol tortenik. Reszletek: _build/build_soon_books_css.py */ /* ── 1. Tudastar nyitooldal: a nem kattinthato kartyak ────────────────── A kattinthato kartya , a „hamarosan" allapotu
(fix_books_landing.py). Ezert eleg a tipusra szurni. A `grayscale` azert jobb az `opacity`-nal, mint halvanyitas, mert a feher „hamarosan" cimket nem tunteti el. */ .books div.book{cursor:default!important;filter:grayscale(.62) contrast(.96)} .books div.book:hover{transform:none!important; box-shadow:0 20px 54px -28px rgba(0,0,0,.55)!important} .books div.book .desc,.books div.book .meta{opacity:.85} /* A cimke formazasa BETURE ugyanaz, mint a nyelvi fooldalon (`.book .soon`, microbiomebank-modern*.html) — ott is konyvkartyan all, ugyanezzel a jelentessel. A Tudastar sajat beagyazott szabalya csak a helyzetben ternel el (34px a fooldali 38px helyett), ezert irjuk felul. 2026-08-03. */ .books div.book .soon{position:absolute;bottom:38px;right:38px; padding:.5em 1.15em;border-radius:100px;border:1.5px solid rgba(255,255,255,.5); color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em; text-transform:uppercase;z-index:2} /* ── 2. Kozos lablec: a negy nem publikalt konyv hivatkozasa inaktiv ──── Helyzet szerinti szelektor: a lablec jeloles mind a 2711 oldalon azonos. A 4. (DiffBiome) szandekosan kimarad — az marad kattinthato. */ .sitefoot .foot-grid>div:nth-child(3)>a:nth-of-type(1), .sitefoot .foot-grid>div:nth-child(3)>a:nth-of-type(2), .sitefoot .foot-grid>div:nth-child(3)>a:nth-of-type(3), .sitefoot .foot-grid>div:nth-child(3)>a:nth-of-type(5){pointer-events:none!important;cursor:default!important; opacity:.42!important;text-decoration:none!important} /* ── VetBiota: a mobil menu ikonjai a data-nav attributumra ─────────── */ #hdr .nav-links>a[data-nav="home"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="process"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%202.5h5%22%2F%3E%3Cpath%20d%3D%22M10.5%202.5v6.4L5%2018.4A2.9%202.9%200%200%200%207.5%2022.5h9A2.9%202.9%200%200%200%2019%2018.4l-5.5-9.5V2.5%22%2F%3E%3Cpath%20d%3D%22M7.4%2015.2h9.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="services"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.6%22%20y%3D%228%22%20width%3D%2218.8%22%20height%3D%228%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%208v8%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="donor"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020.6S4.6%2015.9%204.6%2011a4%204%200%200%201%207.4-2.4A4%204%200%200%201%2019.4%2011c0%204.9-7.4%209.6-7.4%209.6z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="faq"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.6%204.6h5.6a2.9%202.9%200%200%201%202.8%202%202.9%202.9%200%200%201%202.8-2h5.6v13.4h-5.6a2.9%202.9%200%200%200-2.8%202%202.9%202.9%200%200%200-2.8-2H3.6z%22%2F%3E%3Cpath%20d%3D%22M12%206.6v13.4%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="blog"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020.4v-3.6L15%205.8l3.6%203.6-11%2011H4z%22%2F%3E%3Cpath%20d%3D%22M13.4%207.4%2017%2011%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="team"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%228.4%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M3%2020.2c0-3.3%202.7-5.6%206-5.6s6%202.3%206%205.6%22%2F%3E%3Cpath%20d%3D%22M16.4%206a3%203%200%200%201%200%205.8%22%2F%3E%3Cpath%20d%3D%22M18%2014.8c1.9.8%203%202.6%203%205.2%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="contact"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6.4%203.4h3l1.7%204.1-2%201.4a11.6%2011.6%200%200%200%205%205l1.4-2%204.1%201.7v3a2%202%200%200%201-2.2%202A16.6%2016.6%200%200%201%204.4%205.6a2%202%200%200%201%202-2.2z%22%2F%3E%3C%2Fsvg%3E")} #hdr .nav-links>a[data-nav="lang"]{--mi:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.2%2010.6%2012%203.2l8.8%207.4%22%2F%3E%3Cpath%20d%3D%22M5.6%209.6V20.4h12.8V9.6%22%2F%3E%3Cpath%20d%3D%22M9.6%2020.4v-5.8h4.8v5.8%22%2F%3E%3C%2Fsvg%3E")} /* ===== vetbiota.css ===== */ /* ── VetBiota-specifikus kiegészítések ─────────────────────────────────── */ .hero{background:linear-gradient(160deg,#12706A,#083B37)} .hero-inner{position:relative;z-index:2} /* ── Hero-fotó ───────────────────────────────────────────────────────────── Ugyanúgy, mint az eredeti vetbiota.com-on: sima, kivágott hátterű fotó a szöveg mellett — se kör, se keret. A dog.avif háttere átlátszó, ezért a türkiz hero-átmeneten önmagában áll meg. 900 px alatt a kép a szöveg FÖLÉ kerül, szintén az eredeti szerint. */ .hero-media{position:relative;z-index:2;width:100%;max-width:430px;margin:0 auto; transition:transform .25s ease-out} .hero-media img{display:block;width:100%;height:auto; filter:drop-shadow(0 26px 44px rgba(0,0,0,.38))} .hero-media img[data-missing]{display:none} @media(max-width:900px){.hero-media{order:-1;max-width:290px}} .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:st} .step{position:relative;background:var(--white);border-radius:var(--r);padding:30px 22px 26px; box-shadow:0 12px 40px -26px rgba(4,87,103,.4);border-top:3px solid var(--teal-med)} .step .n{font-family:var(--serif);font-size:2.1rem;color:var(--teal-med);line-height:1;opacity:.55} .step h3{font-size:1.05rem;margin:.45em 0 .3em} .step p{font-size:.9rem;color:var(--gray-1)} @media(max-width:900px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps{grid-template-columns:1fr}} .cap-grid.four{grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:1100px){.cap-grid.four{grid-template-columns:1fr 1fr}} @media(max-width:640px){.cap-grid.four{grid-template-columns:1fr}} .cap .price{font-family:var(--serif);font-size:1.5rem;color:var(--green);display:block; margin:.1em 0 .6em} .cap .tagline{font-size:.9rem;color:var(--teal-med);font-weight:600;margin-bottom:.6em} .cap-grid .cap.c-rescu{border-top-color:#c0392b}.cap-grid .cap.c-rescu h3{color:#c0392b} .cap-grid .cap.c-restore{border-top-color:#0D7F82}.cap-grid .cap.c-restore h3{color:#0D7F82} .cap-grid .cap.c-k9{border-top-color:#1E3860}.cap-grid .cap.c-k9 h3{color:#1E3860} .cap-grid .cap.c-auto{border-top-color:#16787E}.cap-grid .cap.c-auto h3{color:#0f6b70} .solution-grid{display:grid;grid-template-columns:44% minmax(0,1fr);gap:52px;align-items:center} /* a HTML-ben a szöveg jön előbb; a fotó a bal oldali (abszolút) sávba kerül */ .solution-grid>.reveal:first-child{grid-column:2} .solution-grid ul{list-style:none;margin:1.2em 0} .solution-grid li{position:relative;padding-left:1.7em;margin-bottom:.9em;color:var(--dark-2)} .solution-grid li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px; border-radius:50%;background:var(--teal-med)} .solution-note{background:var(--white);border-left:4px solid var(--teal-med);border-radius:12px; padding:20px 24px;font-size:.95rem;color:var(--dark-2);box-shadow:0 12px 36px -28px rgba(4,87,103,.5)} /* A fotó nem dobozban ül, hanem a szakasz széléig kifut és teljes magasságot kap — pontosan úgy, ahogy az eredeti vetbiota.com-on (ott a bal oldalon). A kép saját világosszürke háttere és a szakasz #EEECE6 krémje szinte azonos, így a fotó „beleolvad"; a szöveg felőli szélét lágy átmenet oldja fel. */ #megoldas{overflow:hidden} .solution-img{position:absolute;top:0;left:0;bottom:0;width:46vw;max-width:860px; background:none;border-radius:0;box-shadow:none} /* 2026-09-19 — MERVE, NEM SZEMRE. A 30% azt jelentette, hogy a kivagas a kep BAL szelehez tapad; a kutya viszont a kep jobb harmadaban ul (a 2048px-es eredetin nagyjabol a 39-91% savban), igy a jobb oldala — a mellso laba es a tomzsi oldala — kifutott a dobozbol. A 82%-kal a kivagas jobbra tolodik, amitol a kutya BALRA kerul a dobozban, es egeszben latszik. */ .solution-img img{display:block;width:100%;height:100%;object-fit:cover; object-position:82% 44%} .solution-img::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(270deg,var(--cream-2) 0%,rgba(238,236,230,.45) 5%, rgba(238,236,230,0) 14%), linear-gradient(180deg,rgba(238,236,230,.6) 0%,rgba(238,236,230,0) 16%, rgba(238,236,230,0) 84%,rgba(238,236,230,.85) 100%)} @media(max-width:900px){ .solution-grid{grid-template-columns:1fr} .solution-grid>.reveal:first-child{grid-column:1} /* 2026-09-19 — A -110px a szakasz teteje FOLE emelte a kepet, a #megoldas `overflow:hidden`-je pedig levagta belole azt a 40 pixelt — pont a kutya fejet. A -70px-szel a kep teteje pontosan a szakasz tetejevel esik egybe (merve: levagas 0), a 360px magassag pedig kiadja a teljes kutyat. */ .solution-img{position:relative;order:-1;width:auto;max-width:none;height:360px; margin:-70px -24px 12px} .solution-img img{object-position:75% 50%} .solution-img::after{background:linear-gradient(180deg,rgba(238,236,230,.45) 0%, rgba(238,236,230,0) 22%,rgba(238,236,230,0) 76%,var(--cream-2) 100%)} } .fgroup{font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;color:var(--teal-med);margin:.4em 0 1em} .cform .fgroup:not(:first-of-type){margin-top:1.6em;padding-top:1.2em; border-top:1px solid rgba(0,0,0,.07)} /* ha a kép még nincs a helyén, ne maradjon üres hely */ .solution-img img[data-missing]{display:none} /* Fehér logó sötét háttéren. Ugyanaz az SVG-fájl, csak kifehérítve — így nem kell két külön logóváltozatot karbantartani. */ #hdr .logo .lg-w,.sitefoot .logo .lg-fw{filter:brightness(0) invert(1)} #hdr .logo img{height:38px;width:auto} #hdr.scrolled .logo img,#hdr.sc .logo img{height:32px} /* ═══ ŰRLAP: siker-üzenet és reCAPTCHA ═══════════════════════════════════ A siker-blokk REJTVE indul. A microbiomebank.com-on ez öt nyelven kilátszott beküldés előtt, mert a blokkot olyan laptípusra másolták, ahol a szabálya nem volt definiálva — ezért a szabály itt, a KÖZÖS stíluslapban áll, nem az oldaltípus saját CSS-ében. (regressions.py R13/R14) */ .sent-note{display:none;margin-top:1.1em;padding:16px 18px;border-radius:12px; background:rgba(22,120,126,.10);border-left:4px solid var(--teal-med); font-size:.95rem;color:var(--dark-2);line-height:1.6} .sent-note.in{display:block} /* A reCAPTCHA v3 jelvényét nem töröljük (a script tölti be), csak 1×1 képpontra húzzuk a BAL FELSŐ sarokban, hogy a jobb alsó szabad maradjon. Ez CSAK a kötelező jelzéssel (.rc-note) EGYÜTT megengedett — a kettő egy döntés. */ .grecaptcha-badge{position:fixed!important;top:0!important;left:0!important; right:auto!important;bottom:auto!important;width:1px!important;height:1px!important; overflow:hidden!important;opacity:0!important;pointer-events:none!important; box-shadow:none!important;transform:none!important;z-index:0!important} .rc-note{margin:.9em 0 0;font-size:.72rem;line-height:1.5;color:var(--gray-1);opacity:.9} .rc-note a{color:inherit;text-decoration:underline;text-underline-offset:2px} /* ═══ ELRENDEZÉS ═════════════════════════════════════════════════════════ R47 — Egymás melletti gombok mobilon. Két `.btn` egyetlen

-ben csak szóközzel van elválasztva, a `.btn` pedig inline-flex, aminek a magassága nagyobb a sormagasságnál: töréskor a két sor összeér, nulla pixel köz marad. A `gap` csak a tört sorok között hat, ezért asztali nézetben egyetlen pixelt sem változtat. */ p:has(> .btn + .btn){display:flex;flex-wrap:wrap;gap:.6rem .5rem} /* R22/R23 — a törzs a címmel egy vonalban: a szabály a LAP SAJÁT stílusában áll (build_pages.py PAGE_CSS), mert az a site.css után töltődik be, és csak ott dől el. Ide szándékosan nem duplikáljuk: egy hatástalan másolat azt a látszatot keltené, hogy itt lehet állítani rajta. */